/* Generated by scripts/build-css-bundles.js — do not edit.
   Sources (in order):
   styles.css
   assets/ddt-tokens.css
   assets/ddt-platform.css
   assets/ddt-tools.css
   assets/layout.css
   assets/cookie-consent.css
   assets/workflow-pipeline-view.css
   assets/checklists/checklist.css
   assets/persona-dashboard.css
   assets/workflow-pipeline-view.css
   assets/checklists/checklist.css
   assets/persona-dashboard.css
   assets/workflow-pipeline-view.css
   assets/checklists/checklist.css
   assets/persona-dashboard.css
   assets/workflow-pipeline-view.css
   assets/checklists/checklist.css
   assets/persona-dashboard.css
   assets/workflow-pipeline-view.css
   assets/checklists/checklist.css
   assets/persona-dashboard.css
   assets/workflow-pipeline-view.css
   assets/checklists/checklist.css
   assets/persona-dashboard.css
*/

/* ===== styles.css ===== */
/* =========================================================
   Daily Developer Tools — Modern UI Styles (Full Replacement)
   Compatible with existing HTML class names
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 12px; gap: 4px; font-size: 0.85em; }
.breadcrumb li + li::before { content: "/"; margin-right: 4px; opacity: 0.5; }
.breadcrumb a { color: var(--color-link, #0969da); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-secondary, #4b5563); }

/* ---------- Empty-state output hints ---------- */
.monospace-output:empty::before {
  content: attr(data-empty-hint);
  color: var(--color-text-muted, #57606a);
  font-style: italic;
  font-size: 0.9em;
  font-family: inherit;
}

/* ---------- Reset / Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Pin native-control rendering (select popups, scrollbars, pickers) to the
   site's explicit theme rather than the OS preference. Without this, a user on
   a light-mode OS viewing the site in dark mode gets a white native dropdown
   popup with light option text — invisible. */
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark']  { color-scheme: dark; }

body {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  line-height: 1.45;
  color: var(--text-main);
  background: var(--bg);
}

body.command-palette-open {
  overflow: hidden;
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: inherit;
}

input,
textarea,
select,
button {
  font: inherit;
}

::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

:where(button, input, textarea, select, summary, .icon-button, .tool-chip, .tool-filter-tab):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Design Tokens ---------- */

/* Design tokens removed (Task B2): all --* / --rd-* tokens are now defined
   once in assets/ddt-design-tokens.css. Do NOT re-add token :root/[data-theme]
   blocks here. Non-token rules below are unchanged. */

/* Background refinement */
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(29, 78, 216, 0.12), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(15, 118, 110, 0.1), transparent 55%),
    radial-gradient(700px 380px at 55% 100%, rgba(245, 158, 11, 0.06), transparent 62%),
    var(--bg);
}

html[data-theme='dark'] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(96, 165, 250, 0.16), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(45, 212, 191, 0.1), transparent 55%),
    radial-gradient(700px 380px at 55% 100%, rgba(251, 191, 36, 0.05), transparent 62%),
    var(--bg);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Layout Shell ---------- */

.sd-page {
  max-width: 1220px;
  margin: 0 auto;
}

.sd-main {
  margin-top: 6px;
}

.page-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  background: var(--bg-panel);
  border-radius: var(--radius-xl);
  padding: 22px 24px 24px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 1440px) {
  .sd-page {
    max-width: 1420px;
  }
  .page-wrapper {
    max-width: 1320px;
  }
}

.page-content {
  min-width: 0;
}

@media (max-width: 640px) {
  body {
    padding: 12px;
  }
  .page-wrapper {
    padding: 16px 14px 18px;
    border-radius: 14px;
  }
}

/* ---------- Header ---------- */

.sd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 8px;
  z-index: 86;
  padding: 10px 12px 14px;
  margin: 0 -6px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 80%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
}

.sd-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sd-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.sd-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sd-logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.15));
}

.sd-logo-text {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.sd-logo-text-highlight {
  color: var(--primary);
}

.sd-logo-link:hover .sd-logo-text-highlight {
  text-decoration: underline;
}

.sd-header-tagline {
  font-size: 12px;
  color: var(--text-muted);
}

.sd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sd-header-right a.icon-button[aria-current='page'] {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--primary);
  font-weight: 700;
}

.sd-header-right:has(.sd-header-search) {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.sd-header-search {
  display: flex;
  justify-content: center;
}

.sd-header-search .tool-search-input {
  width: min(420px, 100%);
  min-width: 220px;
  border-color: var(--field-border-hover);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), rgba(255, 255, 255, 0) 62%), var(--field-bg);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent),
    var(--shadow-card);
}

.sd-header-search .tool-search-input:focus {
  border-color: var(--field-focus-border);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent),
    var(--shadow-card);
}

.sd-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sd-header-actions > .icon-button {
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.sd-header-actions > a.icon-button[href="/"],
.sd-header-actions > a.icon-button[href="/index.html"] {
  border-color: color-mix(in srgb, #245ee8 28%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #245ee8 10%, transparent), transparent 70%),
    var(--bg-elevated);
  color: color-mix(in srgb, #245ee8 82%, var(--text-main));
}

.sd-header-actions > .ddt-workflows-link {
  border-color: color-mix(in srgb, #7657d8 30%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #7657d8 11%, transparent), transparent 70%),
    var(--bg-elevated);
  color: color-mix(in srgb, #7657d8 78%, var(--text-main));
}

.ddt-contact-link {
  margin-left: 4px;
  padding-left: 12px;
  border-left-color: color-mix(in srgb, #0d9488 35%, var(--border-soft)) !important;
  border-color: color-mix(in srgb, #0d9488 30%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #0d9488 11%, transparent), transparent 70%),
    var(--bg-elevated);
  color: color-mix(in srgb, #047857 78%, var(--text-main));
  position: relative;
}

.ddt-contact-link::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-border-subtle, rgba(0, 0, 0, 0.08));
}

.ddt-bookmark-button {
  gap: 6px;
  border-color: color-mix(in srgb, #c76a14 34%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #c76a14 14%, transparent), transparent 68%),
    var(--bg-elevated);
  color: color-mix(in srgb, #b45309 78%, var(--text-main));
}

.ddt-bookmark-button:hover,
.ddt-bookmark-button:focus-visible {
  border-color: color-mix(in srgb, #c76a14 62%, transparent);
  color: #b45309;
}

/* Compact top-nav buttons (Workflows / Challenges / Contact / Bookmark)
   injected by assets/layout.js. Description text is in the title= tooltip,
   so the button itself stays small. */
.ddt-top-nav-link {
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.1;
  text-decoration: none;
}
.ddt-top-nav-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ddt-top-nav-label {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .ddt-top-nav-link {
    padding: 4px 8px;
  }
  .ddt-top-nav-label {
    display: none;
  }
  .ddt-top-nav-icon {
    font-size: 15px;
  }
}

.ddt-feedback-card {
  max-width: 820px;
}

.ddt-feedback-form {
  display: grid;
  gap: 14px;
}

.ddt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ddt-feedback-form input[type='text'],
.ddt-feedback-form input[type='email'],
.ddt-feedback-form input[type='url'] {
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text-main);
  padding: 10px 12px;
  font: inherit;
  box-shadow: var(--field-shadow);
}

.ddt-feedback-form input[type='text']:focus,
.ddt-feedback-form input[type='email']:focus,
.ddt-feedback-form input[type='url']:focus {
  outline: none;
  border-color: var(--field-focus-border);
}

.ddt-type-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ddt-type-fieldset > legend {
  padding: 0;
  margin-bottom: 8px;
}

.ddt-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.ddt-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.ddt-radio-option input[type='radio'] {
  margin: 0;
  accent-color: var(--field-focus-border, var(--accent, #4f46e5));
}

.ddt-field-optional {
  color: var(--text-muted);
  font-weight: 400;
}

.ddt-feedback-warning {
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  padding: 10px 12px;
}

.ddt-feedback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ddt-honey-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 980px) {
  .sd-header-right:has(.sd-header-search) {
    grid-template-columns: 1fr;
  }
  .sd-header-search {
    justify-content: stretch;
  }
  .sd-header-search .tool-search-input {
    width: 100%;
    max-width: none;
  }

  .ddt-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .sd-header .ddt-bookmark-button {
    width: 36px;
    min-width: 36px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Theme toggle */
.theme-toggle {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--border-muted);
  background: var(--bg-subtle);
}

.theme-toggle:active {
  transform: translateY(1px);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.theme-toggle-icon {
  display: inline-block;
}

/* ---------- Modal (Confirm) ---------- */
.ddt-modal-open {
  overflow: hidden;
}

.ddt-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ddt-overlay, rgba(15, 23, 42, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 96;
  padding: 16px;
}

.ddt-modal-card {
  width: min(440px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.ddt-modal-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text-main);
}

.ddt-modal-body {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.ddt-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Onboarding Tips ---------- */
.ddt-tip {
  position: fixed;
  max-width: 280px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  z-index: 95;
}

.ddt-tip::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  transform: rotate(45deg);
}

.ddt-tip.is-bottom::after {
  top: -6px;
  left: 24px;
  border-bottom: none;
  border-right: none;
}

.ddt-tip.is-top::after {
  bottom: -6px;
  left: 24px;
  border-top: none;
  border-left: none;
}

.ddt-tip-title {
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--text-main);
}

.ddt-tip-body {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.ddt-tip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ddt-tip-actions .ddt-tip-link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}

.ddt-tip-actions .ddt-tip-link:hover {
  color: var(--primary);
}

.ddt-tip-target {
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 10px;
}

.icon-button.is-loading,
button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.icon-button.is-loading::after,
button.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--primary);
  animation: ddt-btn-spin 0.7s linear infinite;
}
@keyframes ddt-btn-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Typography ---------- */

h1 {
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

h2 {
  font-size: 15px;
  margin: 0;
}

.small h2,
h2.small,
.list-header.small h2,
.card-header.small h2 {
  font-size: 15px;
  font-weight: 600;
}

.subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* ---------- Tool filters ---------- */
.tool-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tool-filter-tab {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tool-filter-tab:hover {
  background: var(--bg-subtle);
  border-color: var(--border-muted);
}

.tool-filter-tab.is-active {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

/* ---------- Large input progress ---------- */
.ddt-progress-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 94;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  font-size: 12px;
}

.ddt-progress-toast.is-visible {
  display: flex;
}

.ddt-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  border-top-color: var(--primary);
  animation: ddt-spin 0.9s linear infinite;
}

.ddt-progress-bar {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: var(--primary-soft);
  overflow: hidden;
}

.ddt-progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--primary);
  animation: ddt-progress 1.2s ease-in-out infinite;
}

@keyframes ddt-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ddt-progress {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(60%);
  }
  100% {
    transform: translateX(220%);
  }
}

/* ---------- Textarea stats ---------- */
.ddt-textarea-stats {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ddt-textarea-stats .ddt-stat-sep {
  opacity: 0.6;
}

.ddt-textarea-stats .ddt-stat-json {
  font-weight: 700;
  color: var(--primary);
}

.ddt-textarea-stats .ddt-stat-json.is-invalid {
  color: var(--danger);
}

.small {
  font-size: 12px;
  color: var(--text-muted);
}

.note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-tool-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
}

/* Tool header row with right-aligned actions */
.ddt-tool-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}

.ddt-tool-header > h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.ddt-tool-header .ddt-tool-actions {
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .ddt-tool-header {
    align-items: flex-start;
  }
}

.section-separator {
  margin-top: 18px;
  border-top: 1px dashed var(--border-soft);
  padding-top: 12px;
}

/* Stop globally forcing scrolling on all ULs (UX fix)
   Use scroll where appropriate via tool-specific selectors below. */
ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Keyboard hint */
.kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* ---------- Tool Search (Index) ---------- */

.tool-search-row {
  margin-bottom: 12px;
}

.tool-search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  font-size: 13px;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.06s ease;
  box-shadow: var(--field-shadow);
}

.tool-search-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.results-title {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---------- Cards / Grids ---------- */

.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

/* On tool pages the .results grid holds just the input/output cards. Force
   auto-fit so the 2 cards stretch to fill the row — the homepage tool-card
   override below re-declares grid-template-columns with auto-fill, which would
   otherwise leave empty tracks (and a half-empty page) when only 2 items exist. */
body[data-tool-id] .results {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 100%, transparent), transparent 42%), var(--bg-elevated);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

/* Nested .card on narrow viewports: drop horizontal padding so input/output areas
   don't lose 28 px to a doubled card inset on phones. Visual chrome (border/shadow) kept. */
@media (max-width: 700px) {
  .card .card {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Tool cards (index link cards) */
.tool-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transform: translateY(0);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.tool-card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  box-shadow: var(--shadow-float);
  transform: translateY(-1px);
}

.tool-card:active {
  transform: translateY(0px);
}

/* Chips */
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-chip {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border-soft));
  padding: 7px 12px;
  font-size: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 38%, transparent), transparent), var(--bg-elevated);
  cursor: pointer;
  transition:
    transform 0.06s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.tool-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--bg-elevated));
}

.tool-chip:active {
  transform: translateY(1px);
}

/* Use-case links card relocated to bottom of page-content by JS */
.card.use-case-links.ddt-use-case-bottom {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-top: 32px !important;
  background: var(--bg-subtle, rgba(0,0,0,0.02)) !important;
  box-shadow: none !important;
  border-color: var(--border-soft) !important;
}

@media (min-width: 960px) {
  body[data-tool-id] .card.use-case-links:not(.ddt-use-case-bottom) {
    float: right;
    width: 360px;
    max-width: 40vw;
    margin-left: 16px;
    margin-top: 0 !important;
  }

  body[data-tool-id] .tool-help {
    columns: 2;
    column-gap: 26px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  body[data-tool-id] .tool-help li {
    break-inside: avoid;
  }

}

.ddt-platform-slots {
  clear: both;
}

body[data-tool-id] .card.use-case-links[hidden] {
  display: none !important;
}

body[data-tool-id] .tool-help,
body[data-tool-id] .tool-help li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-tool-id] .tool-help {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1 !important;
  display: none !important;
}

/* ── Quick-help icon (replaces old <details class="help-card">) ── */
body[data-tool-id] .ddt-tool-utility-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin: 8px 0 14px;
}

body[data-tool-id] .ddt-tool-actions .ddt-tool-utility-row {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-tool-id] .ddt-tool-primary-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

body[data-tool-id] .ddt-tool-primary-btn {
  min-width: 148px;
}

@media (max-width: 700px) {
  body[data-tool-id] .ddt-tool-primary-row {
    align-items: stretch;
  }

  body[data-tool-id] .ddt-tool-primary-btn {
    width: 100%;
  }
}

.ddt-help-icon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
}

.ddt-help-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft, #cbd5e1);
  background: color-mix(in srgb, var(--bg-subtle, #f8fafc) 82%, transparent);
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ddt-help-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ddt-workflow-icon-wrap,
.ddt-header-share-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
}

.ddt-help-icon--workflow {
  border-color: color-mix(in srgb, #7657d8 34%, var(--border-soft, #cbd5e1));
  background:
    linear-gradient(135deg, color-mix(in srgb, #7657d8 12%, transparent), transparent 72%),
    var(--bg-elevated, #fff);
  color: color-mix(in srgb, #7657d8 82%, var(--text-main, #0f172a));
}

.ddt-help-icon--workflow svg {
  width: 20px !important;
  min-width: 20px;
  height: 20px !important;
}
.ddt-help-icon--share {
  border-color: color-mix(in srgb, #0d9488 34%, var(--border-soft, #cbd5e1));
  background:
    linear-gradient(135deg, color-mix(in srgb, #0d9488 12%, transparent), transparent 72%),
    var(--bg-elevated, #fff);
  color: color-mix(in srgb, #0f766e 84%, var(--text-main, #0f172a));
}

.ddt-help-icon--share svg {
  width: 18px !important;
  min-width: 18px;
  height: 18px !important;
}

.ddt-help-icon:hover,
.ddt-help-icon:focus-visible,
.ddt-help-icon-wrap.is-open .ddt-help-icon {
  border-color: var(--primary, #0ea5e9);
  color: var(--primary, #0ea5e9);
  background: color-mix(in srgb, var(--primary-soft, rgba(14, 165, 233, 0.12)) 92%, transparent);
  outline: none;
}

.ddt-help-popup {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px 14px;
  min-width: 260px;
  max-width: min(380px, calc(100vw - 32px));
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted, #475569);
  white-space: normal;
}

.ddt-help-popup-title {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

.ddt-help-popup ul {
  margin: 0;
  padding-left: 16px;
}

.ddt-popup-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ddt-popup-link-list li + li {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border-soft, #e2e8f0) 72%, transparent);
}

.ddt-popup-link,
.ddt-popup-link--workflow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--text-main, #0f172a);
  text-decoration: none;
  cursor: pointer;
}

.ddt-popup-link:hover,
.ddt-popup-link--workflow:hover {
  color: var(--primary, #0ea5e9);
}

.ddt-popup-link-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

.ddt-help-popup-empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.ddt-help-popup-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border-soft, #e2e8f0) 72%, transparent);
}

.ddt-popup-link--footer,
.ddt-popup-link--workflow-library {
  font-size: 12px;
  font-weight: 600;
}

.ddt-help-popup li + li {
  margin-top: 4px;
}

.ddt-help-popup strong {
  color: var(--text-main, #0f172a);
}

/* Show only when toggled open or keyboard-focused */
.ddt-help-icon-wrap:focus-within .ddt-help-popup,
.ddt-help-icon-wrap.is-open .ddt-help-popup {
  display: block;
}

html[data-theme='dark'] .ddt-help-popup {
  background: var(--bg-elevated, #1e293b);
  border-color: var(--border-soft, #334155);
  color: var(--text-muted, #94a3b8);
}

html[data-theme='dark'] .ddt-help-popup strong {
  color: var(--text-main, #f1f5f9);
}

html[data-theme='dark'] .ddt-help-popup-title {
  color: var(--text-main, #f1f5f9);
}

html[data-theme='dark'] .ddt-popup-link,
html[data-theme='dark'] .ddt-popup-link--workflow {
  color: var(--text-main, #f1f5f9);
}

html[data-theme='dark'] .ddt-popup-link-meta,
html[data-theme='dark'] .ddt-help-popup-empty {
  color: var(--text-muted, #94a3b8);
}

/* Pinned tools (home + recents) */
.ddt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ddt-section-header .results-title {
  margin: 0;
}

.ddt-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ddt-section-summary {
  margin: 8px 0 0;
}

.ddt-pinned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.ddt-pinned-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

.ddt-pinned-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ddt-pinned-item:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
}

.ddt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 100%, transparent), transparent), var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  cursor: default;
}

.ddt-chip--local {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 100%, transparent), transparent), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.ddt-tool-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 12px;
}

.ddt-tool-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.ddt-chip-link {
  text-decoration: none;
  color: inherit;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ddt-pin-btn,
.ddt-pin-mini,
.ddt-unpin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ddt-pin-btn {
  padding: 6px 10px;
}

.ddt-pin-mini,
.ddt-unpin-btn {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.ddt-pin-mini:hover,
.ddt-unpin-btn:hover {
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-muted));
}

.ddt-pin-btn.is-active,
.ddt-pin-mini.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 100%, transparent), transparent), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--primary);
}

.ddt-pin-icon {
  font-size: inherit;
  line-height: 1;
}

.ddt-pin-label {
  font-size: inherit;
  line-height: 1;
}

/* Icon buttons */
.icon-button {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
  min-width: 34px;
}

.icon-button.ddt-pin-btn {
  padding: 6px 10px;
  min-width: auto;
}

/* Favorites button on tool pages */
.ddt-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  inline-size: 34px;
  min-inline-size: 34px;
  padding: 6px;
}

.ddt-fav-btn.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 100%, transparent), transparent), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--primary);
}

.ddt-fav-icon {
  font-size: inherit;
  line-height: 1;
}

/* Unfavorite button in favorites grid */
.ddt-unfav-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.ddt-unfav-btn:hover {
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-muted));
}

.icon-button:hover {
  background: color-mix(in srgb, var(--primary-soft) 30%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-muted));
}

.icon-button:active {
  transform: translateY(1px);
}

.icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.tool-star {
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 2px 6px;
}

.tool-star--active {
  color: #f59e0b;
}

/* ---------- Workspace Panels ---------- */

.ddt-workspace {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.ddt-workspace--split {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.ddt-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ddt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ddt-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddt-editor {
  width: 100%;
  flex: 1;
  min-height: 220px;
  height: clamp(240px, 42vh, 520px);
  resize: vertical;
}

@media (max-width: 980px) {
  .ddt-workspace--split {
    grid-template-columns: 1fr;
  }
}

/* ---------- Shared Layout (Lists / Comparator Columns) ---------- */

.container {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 280px;
  min-width: 260px;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.list-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.list-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .list-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .list-header-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Optional list name inputs */
.list-name-input {
  width: 100%;
  margin: 2px 0 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  font-size: 12px;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

.list-name-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Tip row */
.tip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tip {
  margin: 4px 0 6px;
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tip-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Suggestion banner */
.ddt-suggest {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-soft);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-suggest[hidden] {
  display: none !important;
}

.ddt-suggest-text {
  font-weight: 600;
  color: var(--text-main);
}

.ddt-suggest-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* ---------- Form Controls ---------- */

textarea {
  width: 100%;
  height: 200px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 13px;
  resize: vertical;
  outline: none;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

textarea:focus {
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  font-size: 13px;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

.text-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.output-textarea {
  width: 100%;
  min-height: 90px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--output-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  resize: vertical;
  background: var(--output-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 8%, white);
}

.output-textarea:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.monospace-output {
  border-radius: var(--radius-md);
  border: 1px solid var(--output-border);
  padding: 10px 12px;
  min-height: 90px;
  max-height: 260px;
  overflow: auto;
  background: var(--output-bg);
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 8%, white);
}

/* Selects */
select {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

select:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Field group */
.field-group {
  margin-top: 10px;
}

/* Detection row */
.detection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Buttons ---------- */

button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

button.primary {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}

button.primary:hover {
  background: var(--primary-hover);
}

button.secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 88%, transparent), transparent), var(--bg-elevated);
  color: var(--text-main);
  border-color: var(--border-soft);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

button.secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted));
}

button.small-btn {
  padding: 7px 12px;
  font-size: 12px;
}

/* Prominent action */
.compare-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800;
}

/* Clear actions (gentle danger, consistent) */
.ddt-clear-btn,
.clear-all-btn {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

html[data-theme='dark'] .ddt-clear-btn,
html[data-theme='dark'] .clear-all-btn {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.22);
}

.ddt-clear-btn:hover,
.clear-all-btn:hover {
  background: color-mix(in srgb, var(--danger-soft) 100%, var(--bg-elevated));
}

.icon-button.ddt-clear-btn {
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

.icon-button.ddt-clear-btn:hover {
  background: color-mix(in srgb, var(--danger-soft) 100%, var(--bg-subtle));
}

.card-header .ddt-clear-btn,
.field-group .ddt-clear-btn,
.detection-row .ddt-clear-btn,
.compare-bar .ddt-clear-btn,
.ddt-actionbar .ddt-clear-btn {
  margin-left: auto;
}

/* ---------- Sort / Compare Bars ---------- */

.sort-mode-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sort-toggle-btn {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  background: var(--bg-elevated);
  color: var(--text-muted);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sort-toggle-btn:hover {
  border-color: var(--border-muted);
  background: var(--bg-subtle);
}

.sort-toggle-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 20%, transparent);
}

.compare-bar {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 100%, transparent), transparent 52%), var(--bg-elevated);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}

.compare-left {
  flex: 1 1 0;
}

.compare-center {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 auto;
}

.compare-right {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
}

.compare-center label {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Results section wrapper */
.results-section {
  margin-top: 18px;
}

/* Make comparator output lists scroll without affecting all ULs */
.results-section ul,
#onlyList1,
#common,
#onlyList2 {
  max-height: 260px;
  overflow: auto;
}

/* Duplicates actions */
.dup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.dup-output {
  font-size: 13px;
}

/* ---------- Badges (JSON/CSV/YAML + OK/Error) ---------- */

.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.type-badge--json {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}

.type-badge--csv {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-border);
}

.type-badge--yaml {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning-border);
}

.type-badge--unknown {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border-color: var(--border-soft);
}

.type-badge--ok {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}

.type-badge--error {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* Column export row */
.column-export {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.column-export select {
  min-width: 160px;
}

/* ---------- Regex Tester ---------- */

.flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pill-btn {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.pill-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border-muted));
}

.regex-match {
  background: color-mix(in srgb, var(--warning-soft) 100%, transparent);
  border-radius: 3px;
  padding: 0 2px;
}

.matches-list {
  list-style: disc;
  padding-left: 18px;
}

/* ---------- Command Palette (Ctrl+K) ---------- */

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.command-palette[hidden] {
  display: none;
}

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.command-palette-panel {
  position: relative;
  margin: 80px auto 0;
  max-width: 560px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-float);
  padding: 10px 12px 12px;
}

.command-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.command-palette-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  font-size: 13px;
  margin-bottom: 8px;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

.command-palette-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.command-palette-list {
  max-height: 290px;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.command-palette-item {
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.command-palette-item-main {
  font-size: 13px;
  font-weight: 800;
}

.command-palette-item-meta {
  color: var(--text-muted);
}

.command-palette-item--active {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--text-main);
}

.command-palette-empty {
  padding: 8px 10px;
}

.command-palette-hint {
  margin-top: 8px;
  color: var(--text-muted);
}

/* ---------- Text Diff: Lined Editors + Table ---------- */

.lined-textarea {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  overflow: hidden;
  min-height: 160px;
}

.line-numbers {
  width: 44px;
  padding: 10px 6px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
}

.line-number {
  line-height: 1.55;
  padding-right: 4px;
}

.lined-textarea-input {
  flex: 1;
  border: none;
  resize: vertical;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  background: var(--bg-elevated);
  outline: none;
}

.lined-textarea textarea {
  border: none !important;
  box-shadow: none !important;
}

.compare-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.compare-options-left label {
  margin-right: 10px;
  cursor: pointer;
}

.compare-options-right {
  display: flex;
  gap: 8px;
}

/* Legend */
.diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.legend-item::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
}

.legend-equal::before {
  background: var(--bg-elevated);
}
.legend-added::before {
  background: var(--success-soft);
}
.legend-removed::before {
  background: var(--danger-soft);
}
.legend-changed::before {
  background: var(--info-soft);
}

/* Clickable legend filtering */
.legend-item {
  cursor: pointer;
  user-select: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.legend-item:hover {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted));
  background: color-mix(in srgb, var(--surface-tint) 100%, transparent);
}

html[data-theme='dark'] .legend-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.legend-item.is-off {
  opacity: 0.45;
}

/* Diff table */
.diff-table-container {
  margin-top: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  overflow: auto;
  max-height: 460px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.diff-table th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 10px;
  text-align: left;
  font-weight: 800;
}

.diff-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.diff-line-equal {
  background: transparent;
}
.diff-line-added {
  background: var(--success-soft);
}
.diff-line-removed {
  background: var(--danger-soft);
}
.diff-line-changed {
  background: var(--info-soft);
}

/* Cells & text (compact: number + text on one line) */

.diff-cell {
  width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.diff-line-number {
  color: #6b7280;
  font-size: 11px;
  margin-bottom: 0; /* key: remove stacking gap */
  min-width: 34px; /* fixed number column */
  text-align: right;
  flex: 0 0 auto;
  line-height: 1.4;
  padding-top: 1px; /* baseline alignment */
}

.diff-line-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap; /* keep wrapping */
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
}

/* Word highlights */
.diff-word-added {
  background: color-mix(in srgb, var(--success-soft) 100%, transparent);
}
.diff-word-removed {
  background: color-mix(in srgb, var(--danger-soft) 100%, transparent);
  text-decoration: line-through;
}

/* ---------- Footer ---------- */

.sd-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 12px 14px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}

.sd-footer a,
.sd-footer .link-button {
  color: var(--text-main);
}

.sd-footer a:hover,
.sd-footer .link-button:hover {
  color: var(--primary);
}

/* ---------- Scrollbar (subtle) ---------- */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.38);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   Button styling compatibility override (ADD AT END)
   ========================================================= */

/* Default buttons: treat as "secondary" so nothing looks plain */
button {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 88%, transparent), transparent), var(--bg-elevated);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

/* Default hover for buttons */
button:hover {
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted));
}

/* Ensure "primary" looks like a real primary CTA everywhere */
button.primary,
.primary-btn,
.btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}

button.primary:hover,
.primary-btn:hover,
.btn-primary:hover {
  background: var(--primary-hover) !important;
}

/* Ensure "secondary" remains consistent */
button.secondary,
.secondary-btn,
.btn-secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 88%, transparent), transparent), var(--bg-elevated) !important;
  color: var(--text-main) !important;
  border-color: var(--border-soft) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

button.secondary:hover,
.secondary-btn:hover,
.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--bg-subtle)) !important;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted)) !important;
}

/* Disabled buttons */
button:disabled,
button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   JSON ⇄ CSV Converter — tool-specific enhancements
   Append at end of styles.css
   ========================================================= */

body[data-tool-id='json-to-csv'] #universalInput,
body[data-tool-id='json-to-csv'] #universalOutput {
  min-height: 340px;
}

body[data-tool-id='json-to-csv'] #columnListOutput {
  min-height: 160px;
}

/* Inline status bar */
body[data-tool-id='json-to-csv'] .ddt-status {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

body[data-tool-id='json-to-csv'] .ddt-status--info {
  background: var(--info-soft);
  border-color: var(--info-border);
}

body[data-tool-id='json-to-csv'] .ddt-status--ok {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}

body[data-tool-id='json-to-csv'] .ddt-status--error {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* Options (details) */
body[data-tool-id='json-to-csv'] .tool-options {
  margin-top: 10px;
}

body[data-tool-id='json-to-csv'] .tool-options summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

body[data-tool-id='json-to-csv'] .tool-options[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body[data-tool-id='json-to-csv'] .tool-options .tool-options-body {
  border: 1px solid var(--border-soft);
  border-top: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

body[data-tool-id='json-to-csv'] .tool-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-options-row,
body[data-tool-id='json-yaml'] .json-yaml-advanced,
body[data-tool-id='json-yaml'] .json-yaml-panel,
body[data-tool-id='json-yaml'] .json-yaml-roundtrip {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

body[data-tool-id='json-yaml'] .json-yaml-options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-inline-option,
body[data-tool-id='json-yaml'] .json-yaml-options-grid label {
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

body[data-tool-id='json-yaml'] .json-yaml-inline-option {
  grid-template-columns: auto minmax(220px, 320px);
  align-items: center;
}

body[data-tool-id='json-yaml'] .json-yaml-advanced {
  padding: 0;
}

body[data-tool-id='json-yaml'] .json-yaml-advanced summary,
body[data-tool-id='json-yaml'] .json-yaml-panel summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 700;
}

body[data-tool-id='json-yaml'] .json-yaml-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--text);
}

body[data-tool-id='json-yaml'] .json-yaml-panels {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

body[data-tool-id='json-yaml'] .json-yaml-panel-body,
body[data-tool-id='json-yaml'] .json-yaml-roundtrip {
  padding: 0 12px 12px;
  color: var(--text);
}

body[data-tool-id='json-yaml'] .json-yaml-roundtrip {
  padding: 10px 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

body[data-tool-id='json-yaml'] .json-yaml-report-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.86rem;
}

body[data-tool-id='json-yaml'] .json-yaml-warning-list,
body[data-tool-id='json-yaml'] .json-yaml-preview-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

body[data-tool-id='json-yaml'] .json-yaml-warning-list li {
  margin: 4px 0;
}

body[data-tool-id='json-yaml'] .json-yaml-next-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

body[data-tool-id='json-yaml'] .json-yaml-next-panel h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.3;
}

body[data-tool-id='json-yaml'] .json-yaml-next-panel .json-yaml-next-actions {
  padding: 0;
}

body[data-tool-id='json-yaml'] .json-yaml-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

@media (max-width: 720px) {
  body[data-tool-id='json-yaml'] .json-yaml-inline-option {
    grid-template-columns: 1fr;
    width: 100%;
  }

body[data-tool-id='json-yaml'] .json-yaml-inline-option select {
    width: 100%;
  }
}

body[data-tool-id='yaml-validator'] .yv-workbench-options,
body[data-tool-id='yaml-validator'] .yv-panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

body[data-tool-id='yaml-validator'] .yv-workbench-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  align-items: end;
}

body[data-tool-id='yaml-validator'] .yv-workbench-options label,
body[data-tool-id='yaml-validator'] .yv-options-grid label,
body[data-tool-id='yaml-validator'] .yv-panel-body > label {
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

body[data-tool-id='yaml-validator'] .yv-panel summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 700;
}

body[data-tool-id='yaml-validator'] .yv-panel-body {
  padding: 0 12px 12px;
}

body[data-tool-id='yaml-validator'] .yv-workbench-panels {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body[data-tool-id='yaml-validator'] .yv-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

body[data-tool-id='yaml-validator'] .yv-checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--text);
}

body[data-tool-id='yaml-validator'] .yv-small-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.45;
}

body[data-tool-id='yaml-validator'] .yv-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

body[data-tool-id='yaml-validator'] .yv-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.86rem;
}

body[data-tool-id='yaml-validator'] .yv-result-group {
  margin-top: 10px;
}

body[data-tool-id='yaml-validator'] .yv-result-group h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

body[data-tool-id='yaml-validator'] .yv-result-list,
body[data-tool-id='yaml-validator'] .yv-structure-list {
  margin: 0;
  padding-left: 18px;
}

body[data-tool-id='yaml-validator'] .yv-result-list li,
body[data-tool-id='yaml-validator'] .yv-structure-list li {
  margin: 5px 0;
}

body[data-tool-id='yaml-validator'] .yv-result-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

body[data-tool-id='yaml-validator'] .yv-doc-table-wrap {
  overflow-x: auto;
}

body[data-tool-id='yaml-validator'] .yv-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

body[data-tool-id='yaml-validator'] .yv-doc-table th,
body[data-tool-id='yaml-validator'] .yv-doc-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

body[data-tool-id='yaml-validator'] .yv-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-tool-id='yaml-validator'] .yv-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

@media (max-width: 720px) {
  body[data-tool-id='yaml-validator'] .yv-workbench-options {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Global UX Consistency Pack (Toolbars + Handoff Links)
   Add at end of styles.css
   ========================================================= */

/* Reusable sticky surface for tool action bars */
.ddt-sticky {
  position: sticky;
  top: 10px;
  z-index: 5;
}

/* Slightly better spacing + wrapping for compare bars */
.compare-right {
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Mobile: keep toolbars usable (no cramped center) */
@media (max-width: 900px) {
  .compare-left,
  .compare-center,
  .compare-right {
    flex: 1 1 100%;
  }

  .compare-center {
    justify-content: flex-start;
    margin: 0;
  }

  .compare-right {
    justify-content: flex-start;
  }
}

/* Disabled buttons: clearer, consistent */
button:disabled,
.icon-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Send-to / handoff row (links instead of dropdowns) */
.ddt-handoff-row {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ddt-handoff-link {
  border: 1px solid transparent;
  background: transparent;
  color: var(--primary);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ddt-handoff-link:hover {
  background: var(--primary-soft);
}

.ddt-handoff-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.ddt-handoff-link.is-active {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* Utility: visually hide but keep for JS */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Schema Inspector visual mode */
body[data-tool-id='schema-inspector'] .visual-output,
body[data-tool-id='sql-formatter'] .visual-output {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--card-bg);
  min-height: 120px;
}

body[data-tool-id='schema-inspector'] .tree-wrap {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
}

body[data-tool-id='schema-inspector'] .tree-node,
body[data-tool-id='schema-inspector'] .tree-leaf {
  margin: 6px 0;
}

body[data-tool-id='schema-inspector'] .tree-summary {
  list-style: none;
}

body[data-tool-id='schema-inspector'] .tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-tool-id='schema-inspector'] .tree-key {
  font-weight: 600;
}

body[data-tool-id='schema-inspector'] .tree-type {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

body[data-tool-id='schema-inspector'] .tree-example {
  font-size: 11px;
  color: var(--text-muted);
}

body[data-tool-id='schema-inspector'] .tree-children {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 1px dashed rgba(127, 127, 127, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   MODERNIZATION LAYER — Phases 2-9
   All additions below. Existing rules above are untouched.
   Dark mode selector matches existing JS: html[data-theme='dark']
   ═══════════════════════════════════════════════════════════ */

/* ── Phase 2: Design Token Extensions ──────────────────────── */

/* Design tokens removed (Task B2): all --* / --rd-* tokens are now defined
   once in assets/ddt-design-tokens.css. Do NOT re-add token :root/[data-theme]
   blocks here. Non-token rules below are unchanged. */

/* ── Phase 3: Nav modernization ─────────────────────────────── */

.sd-header {
  align-items: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  top: 8px;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-3);
  backdrop-filter: none;
  box-shadow: var(--shadow-xs);
  margin: 0 -6px 8px;
}

.sd-header-left {
  gap: var(--space-2);
}

.sd-logo-link {
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.sd-logo-mark {
  height: 28px;
  width: auto;
  filter: none;
}

.sd-logo-text {
  font-weight: 700;
  font-size: var(--font-size-md);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.sd-logo-text-highlight {
  color: var(--color-accent);
}

.sd-header-tagline {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Nav links area */
.sd-header-right {
  gap: var(--space-2);
}

.sd-header-right .icon-button {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sd-header-right .icon-button:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: transparent;
}

.sd-header-right .icon-button[aria-current='page'] {
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  border-color: transparent;
  font-weight: 600;
}

/* Pipeline toggle button — inherits .sd-header-right .icon-button styling so
   it sits on the same visual plane as the other top-right nav links. */

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0;
  box-shadow: none;
}

.theme-toggle:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border-medium);
}

/* ── Phase 4 & 5: Homepage ───────────────────────────────────── */

/* Tool card grid */
.results {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.tool-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.tool-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tool-card:active {
  transform: translateY(0);
}

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* Category filter tabs */
.tool-filter-tabs {
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-3);
}

.tool-filter-tab {
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  transition: all var(--transition-fast);
}

.tool-filter-tab:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: transparent;
  box-shadow: none;
}

.tool-filter-tab.is-active {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: none;
}

/* Magic Box section */
.magic-box-card {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.magic-box-card::before {
  display: none;
}

.magic-box-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* ── Phase 6: Pinned / recents grid ─────────────────────────── */

.ddt-pinned-item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: border-color var(--transition-fast);
}

.ddt-pinned-item:hover {
  border-color: var(--color-accent);
}

/* ── Phase 7: Tool page panels ──────────────────────────────── */

.ddt-panel {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.ddt-panel-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-3);
}

/* Action bar modernization */
.ddt-action-bar,
.ddt-actionbar {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
}

.ddt-actionbar-left,
.ddt-actionbar-right,
.ddt-actionbar-group {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.ddt-actionbar-left {
  flex: 1 1 320px;
}

.ddt-actionbar-right {
  margin-left: auto;
}

.ddt-actionbar-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.ddt-actionbar-divider {
  color: var(--color-text-muted);
  font-weight: 700;
}

.ddt-actionbar-workflow {
  display: grid;
  gap: 2px;
}

.ddt-actionbar-workflow-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ddt-actionbar-trust {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.ddt-has-shared-actionbar .page-content .ddt-workflow-cta-btn {
  display: none !important;
}

.ddt-has-shared-actionbar .page-content .rd-tp-hero-actions .ddt-workflow-cta-btn,
.ddt-has-shared-actionbar .page-content .ddt-tool-actions .ddt-workflow-cta-btn,
.ddt-has-shared-actionbar .page-content .ddt-actionbar .ddt-workflow-cta-btn {
  display: inline-flex !important;
}

@media (max-width: 860px) {
  .ddt-actionbar-right {
    margin-left: 0;
  }

  .ddt-actionbar-workflow {
    width: 100%;
  }
}

.ddt-start-card {
  margin-top: 10px;
}

.ddt-start-steps {
  margin: 8px 0 0;
  padding-left: 18px;
}

.ddt-start-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ddt-start-note {
  margin-top: 10px;
  color: var(--color-text-muted);
}

/* Panel header component (new class) */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.panel-header-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.panel-header + textarea,
.panel-header + .panel-body textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Phase 8: Button system additions ───────────────────────── */
/* Adds .btn-* classes as new options; existing button/primary/secondary unchanged */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-subtle) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-medium) !important;
}

.btn-secondary:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.btn-ghost:active { transform: scale(0.98); }

.btn-icon {
  padding: var(--space-2);
  width: 34px;
  height: 34px;
  justify-content: center;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Phase 9: Status badge system ───────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.valid,
.status-badge.success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.status-badge.error,
.status-badge.invalid {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.status-badge.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.status-badge.info,
.status-badge.idle {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

/* Improve existing type badges to use new tokens */
.type-badge--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.type-badge--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

.type-badge--json {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

/* ── Phase 10: Typography improvements ──────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 {
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
}

h2 {
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: var(--line-height-tight);
}

h3, h4 {
  color: var(--color-text-primary);
}

/* Section title label (all-caps, muted) */
.section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text-primary);
}

/* ── Phase 11: Footer modernization ─────────────────────────── */

.sd-footer {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  gap: var(--space-4);
  box-shadow: none;
}

.sd-footer a,
.sd-footer .link-button {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.sd-footer a:hover,
.sd-footer .link-button:hover {
  color: var(--color-text-secondary);
}

/* ── Phase 12: Info cards grid (new components) ─────────────── */

.info-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  display: block;
}

.info-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.info-card h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.info-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin: 0;
}

/* ── Phase 13: FAQ section (new component) ──────────────────── */

.faq-section {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-5) 0;
}

/* ── Phase 14: Scroll, focus & interaction polish ───────────── */

::selection {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Override general :focus-visible where box-shadow ring is used instead */
:where(button, input, textarea, select, summary, .icon-button, .tool-chip, .tool-filter-tab):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Refined scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: var(--radius-full);
  border: none;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Copy feedback state */
.btn.copied,
button.copied {
  background: var(--color-success-bg) !important;
  color: var(--color-success) !important;
  border-color: var(--color-success-border) !important;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle) 25%,
    var(--color-bg-overlay) 50%,
    var(--color-bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Phase 15: Responsive overrides ─────────────────────────── */

@media (max-width: 768px) {
  .results {
    grid-template-columns: 1fr;
  }

  .tool-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .tool-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .sd-header {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  .sd-header-tagline {
    display: none;
  }

  .magic-box-card {
    border-radius: var(--radius-lg);
  }

  .ddt-panel {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }

  .sd-footer {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
  }
}

body[data-tool-id='sql-formatter'] .sql-diagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

body[data-tool-id='sql-formatter'] .sql-table-card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}

body[data-tool-id='sql-formatter'] .sql-table-title {
  font-weight: 700;
  margin-bottom: 6px;
}

body[data-tool-id='sql-formatter'] .sql-column {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
}

body[data-tool-id='sql-formatter'] .sql-col-type {
  color: var(--text-muted);
}

body[data-tool-id='sql-formatter'] .sql-col-badges {
  display: inline-flex;
  gap: 4px;
}

body[data-tool-id='sql-formatter'] .sql-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
}

body[data-tool-id='sql-formatter'] .sql-badge--pk {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.2);
}

body[data-tool-id='sql-formatter'] .sql-badge--fk {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.2);
}

body[data-tool-id='sql-formatter'] .sql-relations {
  margin-top: 14px;
  font-size: 12px;
}

body[data-tool-id='sql-formatter'] .sql-relations-title {
  font-weight: 600;
  margin-bottom: 6px;
}

body[data-tool-id='sql-formatter'] .sql-relations-list {
  margin: 0;
  padding-left: 18px;
}

body[data-tool-id='sql-formatter'] .sql-relations-empty {
  color: var(--text-muted);
}

html[data-theme='dark'] body[data-tool-id='schema-inspector'] .tree-type {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
}

/* ---------- Use-case pages ---------- */
.use-case-page .use-case-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.use-case-examples {
  display: grid;
  gap: 12px;
}

.use-case-example-body {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.use-case-example-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.use-case-example-mode {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.use-case-example-block {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--bg-elevated);
}

.use-case-example-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.use-case-example-block pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.use-case-faq-item + .use-case-faq-item {
  margin-top: 10px;
}


/* -----------------------------
 * Header badge (Local-only)
 * ----------------------------- */
.sd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  margin-left: 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

/* -----------------------------
 * First-run toast
 * ----------------------------- */
.ddt-toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

body.ddt-cookie-visible .ddt-toast-container {
  bottom: calc(16px + var(--ddt-cookie-banner-height, 80px));
}

.ddt-toast {
  position: relative;
  width: min(380px, calc(100vw - 32px));
  padding: 12px 12px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: auto;
}

.ddt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ddt-toast.is-exiting {
  opacity: 0;
  transform: translateY(8px);
}

.ddt-toast--success {
  border-color: var(--success-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--success-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

.ddt-toast--warn {
  border-color: var(--warning-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warning-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

.ddt-toast-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.ddt-toast-body {
  display: grid;
  gap: 6px;
  color: var(--text-main);
  margin-bottom: 10px;
}

.ddt-toast-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ddt-toast .icon-button {
  padding: 8px 10px;
}

.ddt-toast--mini {
  width: auto;
  padding: 8px 10px;
}

.ddt-toast--mini .ddt-toast-body {
  margin-bottom: 0;
  font-size: 12px;
}

/* UX-001: Copy confirmation feedback */
.icon-button.is-copied {
  color: var(--success);
}
.icon-button.is-copied::after {
  content: " \2713";
}

/* UX-001: Screen-reader-only live region */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   DDT Action Button System
   Adds icons + semantic colour tints to all [data-action] buttons.
   Icons use CSS mask-image so they follow currentColor in both
   dark and light themes. No extra dependencies.
   ================================================================ */

/* ── Icon base ── */
.icon-button[data-action] {
  gap: 5px;
}
.icon-button[data-action]::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* ── Icon definitions ── */

/* copy — two overlapping rectangles */
.icon-button[data-action='copy']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
}

/* download — arrow into tray */
.icon-button[data-action='download']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

/* send / open-in-tool — external link arrow */
.icon-button[data-action='send']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
}

/* paste — clipboard */
.icon-button[data-action='paste']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/></svg>");
}

/* load-file — folded-corner file */
.icon-button[data-action='load']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
}

/* sort — bidirectional arrows */
.icon-button[data-action='sort']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 16 4 4 4-4'/><path d='M7 20V4'/><path d='m21 8-4-4-4 4'/><path d='M17 4v16'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 16 4 4 4-4'/><path d='M7 20V4'/><path d='m21 8-4-4-4 4'/><path d='M17 4v16'/></svg>");
}

/* normalize — sliders / adjustments */
.icon-button[data-action='normalize']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
}

/* dedupe / remove duplicates — funnel filter */
.icon-button[data-action='dedupe']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
}

/* find duplicates — magnifying glass */
.icon-button[data-action='duplicates']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}

/* view toggle — eye */
.icon-button[data-action='view']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
}

/* ── Colour variants by action type ── */

/* download — blue tint: "saving" feels like a deliberate, primary action */
.icon-button[data-action='download'] {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.28);
  color: #1d4ed8;
}
.icon-button[data-action='download']:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.45);
}
body[data-theme='dark'] .icon-button[data-action='download'] {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.3);
}
body[data-theme='dark'] .icon-button[data-action='download']:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(37, 99, 235, 0.5);
}

/* send / open-in-tool — violet tint: cross-tool integration feels special */
.icon-button[data-action='send'] {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.28);
  color: #6d28d9;
}
.icon-button[data-action='send']:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.45);
}
body[data-theme='dark'] .icon-button[data-action='send'] {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.3);
}
body[data-theme='dark'] .icon-button[data-action='send']:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.5);
}

/* ============================================================
   DDT Share — Inline trigger button, hint text & tooltip
   ============================================================ */

/* The Share Results button — teal accent, rightmost in its row */
.ddt-share-trigger-btn {
  position: relative;
  background: rgba(13, 148, 136, 0.08) !important;
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  font-weight: 600;
  white-space: nowrap;
}

.ddt-share-trigger-btn:hover {
  background: rgba(13, 148, 136, 0.16) !important;
  border-color: #0f766e !important;
  color: #0f766e !important;
}
.ddt-header-share-btn.ddt-share-trigger-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 0;
  line-height: 1;
}

.ddt-header-share-btn.ddt-share-trigger-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

.ddt-header-share-btn.ddt-share-trigger-btn[data-ddt-tooltip]::after {
  width: max-content;
  max-width: 220px;
  white-space: nowrap;
  text-align: center;
}

body[data-theme='dark'] .ddt-share-trigger-btn,
html[data-theme='dark'] .ddt-share-trigger-btn {
  background: rgba(45, 212, 191, 0.1) !important;
  border-color: #2dd4bf !important;
  color: #2dd4bf !important;
}

body[data-theme='dark'] .ddt-share-trigger-btn:hover,
html[data-theme='dark'] .ddt-share-trigger-btn:hover {
  background: rgba(45, 212, 191, 0.18) !important;
  border-color: #5eead4 !important;
  color: #5eead4 !important;
}

/* CSS tooltip driven by data-ddt-tooltip attribute */
.ddt-share-trigger-btn[data-ddt-tooltip] {
  overflow: visible;
}

.ddt-share-trigger-btn[data-ddt-tooltip]::after {
  content: attr(data-ddt-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--bg-panel, #1e293b);
  color: var(--text-main, #f1f5f9);
  border: 1px solid var(--border-soft, #334155);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
  text-align: left;
  font-weight: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 500;
}

.ddt-share-trigger-btn[data-ddt-tooltip]:hover::after,
.ddt-share-trigger-btn[data-ddt-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Arrow below tooltip bubble */
.ddt-share-trigger-btn[data-ddt-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-soft, #334155);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 501;
}

.ddt-share-trigger-btn[data-ddt-tooltip]:hover::before,
.ddt-share-trigger-btn[data-ddt-tooltip]:focus-visible::before {
  opacity: 1;
}

/* Hint text line below the action bar */
.ddt-share-hint {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}

.ddt-share-hint strong {
  color: var(--text-main, #0f172a);
}

body[data-theme='dark'] .ddt-share-hint strong,
html[data-theme='dark'] .ddt-share-hint strong {
  color: var(--text-main, #f1f5f9);
}

/* Fallback row when no standard action bar is found */
.ddt-share-fallback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: var(--radius-lg, 10px);
  background: var(--bg-elevated, #f8fafc);
  border: 1px solid var(--border-soft, #e2e8f0);
}

.ddt-share-fallback-row .ddt-share-hint {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* ============================================================
   DDT Share Modal
   ============================================================ */

.ddt-share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.ddt-share-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.ddt-share-modal {
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 560px;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}

.ddt-share-modal-overlay.is-visible .ddt-share-modal {
  transform: translateY(0) scale(1);
}

.ddt-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-soft, #e2e8f0);
}

.ddt-share-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  margin: 0;
}

.ddt-share-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #64748b);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

.ddt-share-modal-close:hover {
  background: var(--bg-elevated, #f1f5f9);
  color: var(--text-main, #0f172a);
}

.ddt-share-modal-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ddt-share-warning-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-elevated, #f8fafc);
  border: 1px solid var(--border-soft, #e2e8f0);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main, #0f172a);
}

.ddt-share-warning-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* URL row */
.ddt-share-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ddt-share-url-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-elevated, #f8fafc);
  color: var(--text-muted, #64748b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ddt-share-url-input:focus {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 1px;
  color: var(--text-main, #0f172a);
}

/* Meta line */
.ddt-share-meta {
  color: var(--text-muted, #64748b);
  font-size: 12px;
}

/* Loading state */
.ddt-share-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

.ddt-share-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-soft, #e2e8f0);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: ddt-share-spin 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes ddt-share-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.ddt-share-error-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.ddt-share-error-icon {
  font-size: 28px;
  text-align: center;
}

.ddt-share-error-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-main, #0f172a);
  line-height: 1.55;
  text-align: center;
}

.ddt-share-error-tips {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

/* Dark mode overrides */
body[data-theme='dark'] .ddt-share-modal,
html[data-theme='dark'] .ddt-share-modal {
  background: var(--bg-panel, #1e293b);
  border-color: var(--border-soft, #334155);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

body[data-theme='dark'] .ddt-share-modal-title,
html[data-theme='dark'] .ddt-share-modal-title {
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-warning-row,
html[data-theme='dark'] .ddt-share-warning-row {
  background: var(--bg-elevated, #0f172a);
  border-color: var(--border-soft, #334155);
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-url-input,
html[data-theme='dark'] .ddt-share-url-input {
  background: var(--bg-elevated, #0f172a);
  border-color: var(--border-soft, #334155);
  color: var(--text-muted, #94a3b8);
}

body[data-theme='dark'] .ddt-share-url-input:focus,
html[data-theme='dark'] .ddt-share-url-input:focus {
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-error-content p,
html[data-theme='dark'] .ddt-share-error-content p {
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-modal-close:hover,
html[data-theme='dark'] .ddt-share-modal-close:hover {
  background: var(--bg-elevated, #0f172a);
  color: var(--text-main, #f1f5f9);
}

/* =========================================================
   Color & UX Improvements — Button visibility & action zones
   ========================================================= */

/* 1. Secondary buttons — blue-tinted background + clearly visible border so
      they unmistakably read as buttons, not just surface elements.
      Overrides both the original rules and the modernization layer !important. */
button.secondary,
button.secondary.small-btn,
.secondary-btn,
.btn-secondary {
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border-soft)) !important;
  color: color-mix(in srgb, var(--primary) 30%, var(--text-main)) !important;
}

button.secondary:hover,
button.secondary.small-btn:hover,
.secondary-btn:hover,
.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 90%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-muted)) !important;
  color: var(--primary) !important;
}

/* 2. Icon buttons (copy / download / etc.) — blue-tinted border + icon color at
      rest so they're visually distinct from plain text. Exclude danger/pin/fav
      buttons which already have correct semantic colors. */
.icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn) {
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-soft));
  color: color-mix(in srgb, var(--primary) 55%, var(--text-muted));
}

.icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn):hover {
  background: color-mix(in srgb, var(--primary-soft) 80%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border-muted));
  color: var(--primary);
}

/* 3. Action bar — 3px top accent strip makes the toolbar feel like a dedicated
      control surface. Keep the rest of the border from the modernization layer. */
.ddt-action-bar,
.ddt-actionbar {
  border-top: 3px solid color-mix(in srgb, var(--primary) 60%, transparent) !important;
}

/* 4. Primary button — bolder shadow on hover reinforces the "main action" role. */
button.primary:hover,
.primary-btn:hover,
.btn-primary:hover {
  box-shadow: 0 16px 32px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

/* 5. Primary button — slightly heavier font weight to visually separate it from
      the sea of secondary buttons at a glance. */
button.primary,
.primary-btn,
.btn-primary {
  font-weight: 700 !important;
}

/* 6. Compare / run CTA — extra shadow at rest pulls the eye to the most
      important action on diff/compare tool pages. */
.compare-btn.primary,
button.compare-btn.primary {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent),
              0 2px 6px  color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

/* 7. Sort toggle inactive state — match secondary button treatment so inactive
      sort options look interactive, not just disabled text labels. */
.sort-toggle-btn:not(.active) {
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border-soft));
  color: color-mix(in srgb, var(--primary) 30%, var(--text-muted));
}

/* Dark theme — increase primary mix percentages to compensate for dark surfaces
   swallowing color more aggressively. */
html[data-theme='dark'] button.secondary,
html[data-theme='dark'] button.secondary.small-btn,
html[data-theme='dark'] .secondary-btn,
html[data-theme='dark'] .btn-secondary {
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-soft)) !important;
  color: color-mix(in srgb, var(--primary) 40%, var(--text-main)) !important;
}

html[data-theme='dark'] button.secondary:hover,
html[data-theme='dark'] button.secondary.small-btn:hover,
html[data-theme='dark'] .secondary-btn:hover,
html[data-theme='dark'] .btn-secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 110%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border-muted)) !important;
  color: var(--primary) !important;
}

html[data-theme='dark'] .icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn) {
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-soft));
  color: color-mix(in srgb, var(--primary) 65%, var(--text-muted));
}

html[data-theme='dark'] .icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn):hover {
  background: color-mix(in srgb, var(--primary-soft) 100%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border-muted));
  color: var(--primary);
}

.sd-header-right .sd-header-actions > a.icon-button[href="/"],
.sd-header-right .sd-header-actions > a.icon-button[href="/index.html"] {
  border-color: color-mix(in srgb, #245ee8 30%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #245ee8 12%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #245ee8 84%, var(--text-main)) !important;
}

.sd-header-right .sd-header-actions > .ddt-workflows-link {
  border-color: color-mix(in srgb, #7657d8 34%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #7657d8 13%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #7657d8 82%, var(--text-main)) !important;
}

.sd-header-right .sd-header-actions > .ddt-contact-link {
  border-color: color-mix(in srgb, #0d9488 34%, var(--border-soft)) !important;
  border-left-color: color-mix(in srgb, #0d9488 45%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #0d9488 13%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #047857 84%, var(--text-main)) !important;
}

.sd-header-right .sd-header-actions > .ddt-bookmark-button {
  border-color: color-mix(in srgb, #c76a14 38%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #c76a14 16%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #b45309 84%, var(--text-main)) !important;
}

/* ==========================================================================
   Vertical density pass (global)
   Targeted spacing reductions to reclaim above-the-fold real estate without
   touching HTML or JS. Ordered by area.
   ========================================================================== */

/* --- Header: tighter padding while keeping the site tagline consistent --- */
.sd-header {
  padding: 7px 12px 9px;
  margin: 0 -6px 4px;
}
/* On tool pages the "Press Ctrl+K" hint is the first thing to wrap — hide
   below laptop widths where it just causes the nav to grow a second row. */
@media (max-width: 1100px) {
  body[data-tool-id] .sd-header-right .small {
    display: none;
  }
}

/* --- Section separator + results title: no more stacked 18px margins --- */
.section-separator {
  margin-top: 12px;
  padding-top: 8px;
}
.section-separator > .results-title:first-child,
.section-separator > .results-title {
  margin-top: 4px;
  margin-bottom: 6px;
}

/* --- Typography: trim h1 and subtitle bottom margins --- */
h1 {
  margin: 0 0 4px;
}
.subtitle {
  margin: 0 0 10px;
}

/* --- Cards: tighter vertical padding and header gap --- */
.card {
  padding: 10px 14px;
}
.card-header {
  margin-bottom: 4px;
}
.list-header {
  margin-bottom: 4px;
}

/* --- Lists: trim top margin on default bulleted lists --- */
ul {
  margin: 4px 0 0;
}

/* --- Empty platform slots: don't reserve whitespace when unused --- */
.ddt-platform-slots:empty,
.ddt-platform-slots > div[data-slot]:empty {
  display: none;
}

/* --- Tool help lists: tighter leading --- */
.tool-help {
  margin-top: 4px !important;
}

/* --- Use-case link chip card: compact top margin --- */
.card.use-case-links {
  padding: 8px 12px;
}
.card.use-case-links .note {
  margin-top: 4px;
}

/* ==========================================================================
   2026 UX Theme Refinement
   Direction: softer workbench surfaces, calmer contrast, transparent editors.
   ========================================================================== */

/* Design tokens removed (Task B2): all --* / --rd-* tokens are now defined
   once in assets/ddt-design-tokens.css. Do NOT re-add token :root/[data-theme]
   blocks here. Non-token rules below are unchanged. */

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1100px 520px at -5% -10%, rgba(36, 94, 232, 0.12), transparent 62%),
    radial-gradient(880px 420px at 102% 0%, rgba(13, 148, 136, 0.11), transparent 58%),
    radial-gradient(760px 420px at 50% 108%, rgba(199, 106, 20, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 24%),
    var(--bg);
}

html[data-theme='dark'] body {
  background:
    radial-gradient(1100px 520px at -5% -10%, rgba(138, 180, 255, 0.16), transparent 62%),
    radial-gradient(880px 420px at 102% 0%, rgba(88, 212, 192, 0.11), transparent 58%),
    radial-gradient(760px 420px at 50% 108%, rgba(244, 184, 96, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
    var(--bg);
}

body,
button,
input,
select {
  font-family: var(--font-sans);
}

textarea,
.text-input,
.output-textarea,
.lined-textarea-input,
.command-palette-input,
.ddt-share-url-input,
code,
pre,
kbd {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}

textarea,
.text-input,
.output-textarea,
.tool-search-input,
.list-name-input,
.command-palette-input,
.lined-textarea-input,
.ddt-share-url-input,
select,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']) {
  background: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  border-color: var(--field-border) !important;
  color: var(--text-main);
}

html[data-theme='dark'] textarea,
html[data-theme='dark'] .text-input,
html[data-theme='dark'] .output-textarea,
html[data-theme='dark'] .tool-search-input,
html[data-theme='dark'] .list-name-input,
html[data-theme='dark'] .command-palette-input,
html[data-theme='dark'] .lined-textarea-input,
html[data-theme='dark'] .ddt-share-url-input,
html[data-theme='dark'] select,
html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Native <select> popup contrast.
   The control itself is forced transparent above, so without explicit option
   colors the browser renders the open option list on its default (white) popup
   while options inherit the light --text-main color — light-on-light, invisible
   in dark mode. Give options a solid, theme-matched background + contrasting
   text so the dropdown list is always readable. Solid hex (not the translucent
   --bg-elevated token) because native option backgrounds must be opaque. */
select option,
select optgroup {
  background-color: #ffffff;
  color: #102033;
}
html[data-theme='dark'] select option,
html[data-theme='dark'] select optgroup {
  background-color: #0c1828;
  color: #e8edf5;
}

textarea:hover,
.text-input:hover,
.output-textarea:hover,
.tool-search-input:hover,
.list-name-input:hover,
.command-palette-input:hover,
.lined-textarea-input:hover,
.ddt-share-url-input:hover,
select:hover,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']):hover {
  border-color: var(--field-border-hover) !important;
}

textarea:focus,
.text-input:focus,
.output-textarea:focus,
.tool-search-input:focus,
.list-name-input:focus,
.command-palette-input:focus,
.lined-textarea-input:focus,
.ddt-share-url-input:focus,
select:focus,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']):focus {
  border-color: var(--field-focus-border) !important;
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.monospace-output,
.lined-textarea,
.lined-textarea textarea {
  background: transparent !important;
}

.sd-header,
.card,
.tool-card,
.ddt-actionbar,
.ddt-history-item,
.ddt-preset-item,
.ddt-share-modal,
.ddt-share-warning-row,
.ddt-tool-example {
  background: color-mix(in srgb, var(--bg-panel) 86%, transparent);
  border-color: color-mix(in srgb, var(--border-soft) 92%, rgba(255, 255, 255, 0.22));
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
}

.sd-header {
  box-shadow: 0 14px 34px rgba(25, 37, 54, 0.08);
  backdrop-filter: blur(18px);
}

.card,
.tool-card {
  border-radius: 18px;
}

.tool-card:hover,
.card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border-soft));
  box-shadow: 0 18px 44px rgba(25, 37, 54, 0.1);
}

.card-header,
.panel-header {
  background: color-mix(in srgb, var(--bg-subtle) 92%, transparent);
}

.tool-chip,
.tool-filter-tab,
.ddt-tool-category,
.ddt-tool-tag {
  background: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
  border-color: color-mix(in srgb, var(--border-soft) 96%, transparent);
}

.tool-chip:hover,
.tool-filter-tab:hover {
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border-soft));
}

button.primary,
.primary-btn,
.btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, white 12%), var(--primary-hover)) !important;
  border-color: color-mix(in srgb, var(--primary) 75%, black 6%) !important;
  box-shadow: 0 16px 28px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

button.primary:hover,
.primary-btn:hover,
.btn-primary:hover {
  box-shadow: 0 20px 32px color-mix(in srgb, var(--primary) 34%, transparent) !important;
}

/* Contrast fix: in dark mode --primary is a light periwinkle (#8ab4ff), so any
   element filled with --primary and labelled in white (the primary CTAs plus the
   active filter/sort/tab/chip states and the workflow-panel primary buttons)
   renders pale-on-pale and is barely legible. Use dark ink in dark mode. Light
   mode is untouched — there --primary is a strong blue (#245ee8) where white reads
   well. (Root cause is white text on a light fill; if new --primary-filled buttons
   are added, add them here or switch them to a theme-aware on-primary color.) */
html[data-theme='dark'] button.primary,
html[data-theme='dark'] .primary-btn,
html[data-theme='dark'] .btn-primary,
html[data-theme='dark'] .tool-filter-tab.is-active,
html[data-theme='dark'] .sort-toggle-btn.active,
html[data-theme='dark'] .mbwf-btn-primary,
html[data-theme='dark'] .ddt-wf-btn-primary,
html[data-theme='dark'] .wb-view-tab[aria-pressed='true'],
html[data-theme='dark'] .wb-btn-primary,
html[data-theme='dark'] .wg-btn-primary,
html[data-theme='dark'] .wg-category-chip[aria-pressed='true'],
html[data-theme='dark'] .wfio-btn-primary {
  color: #0b1020 !important;
}

h1,
h2,
h3,
.sd-logo-text,
.panel-header-title {
  letter-spacing: -0.02em;
}

.subtitle,
.note,
.ddt-actionbar-meta,
.ddt-help-popup,
.magic-suggestion-meta {
  color: var(--text-muted);
}

/* ==========================================================================
   UX audit follow-ups (P0/P1)
   - Remove "Primary action" eyebrow label
   - De-emphasize "Continue in Workflow" so it doesn't compete with tool CTA
   - Normalize nav pill styling (drop underlines on header links)
   - Cleaner theme-toggle pill
   - Mobile header: single row + drawer-friendly
   - Tools catalog toolbar stacks sooner so chips aren't clipped
   ========================================================================== */

/* P0-2: demote the workflow CTA to secondary styling. It kept a bright primary
   gradient that competed with the tool's actual primary button. Styled here
   instead of changing HTML classes across 17 tool files. */
.ddt-workflow-cta-btn,
button.ddt-workflow-cta-btn,
button.primary.ddt-workflow-cta-btn {
  background: var(--bg-elevated) !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border-soft)) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.ddt-workflow-cta-btn:hover,
button.primary.ddt-workflow-cta-btn:hover {
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border-soft)) !important;
  box-shadow: none !important;
}
.ddt-workflow-cta-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
html[data-theme='dark'] .ddt-workflow-cta-btn,
html[data-theme='dark'] button.primary.ddt-workflow-cta-btn {
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent) !important;
  color: color-mix(in srgb, var(--primary) 72%, white) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border-soft)) !important;
}

/* P1-1: normalize header nav chips. Some browsers were inheriting link
   underlines for the anchor-style .icon-button items. */
.sd-header-right a.icon-button,
.sd-header-right a.icon-button:hover,
.sd-header-right a.icon-button:focus,
.sd-header-right a.icon-button:visited {
  text-decoration: none;
}

/* P1-2: theme toggle — ensure it matches the other header pills and hides the
   emoji fallback when the icon swap runs. */
.theme-toggle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
}
.theme-toggle .theme-toggle-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle .theme-toggle-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* P0-1: mobile header. Below 900px, collapse long nav into the layout drawer.
   Logo + search + theme toggle stay. Drawer access is via the topnav
   hamburger (already present in .ddt-topnav on tool pages) and via the
   existing Workflows link. */
@media (max-width: 900px) {
  .sd-header {
    padding: 8px 10px 10px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .sd-header-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .sd-header .sd-logo-text {
    font-size: 16px;
    white-space: nowrap;
  }
  .sd-header-tagline {
    display: none;
  }
  .sd-header-right {
    flex-wrap: nowrap;
    gap: 6px;
  }
  /* On the tool pages we already inject a search into header-right; keep
     that, plus only Workflows + theme toggle. Hide the text-heavy nav
     pills; users reach them via the topnav drawer and footer. */
  .sd-header-right > a.icon-button,
  .sd-header-right > button.icon-button:not(#ddtPipelineToggle):not(#themeToggle):not(#ddtFocusToggle):not(.ddt-bookmark-button):not(.ddt-topnav-hamburger),
  .sd-header-right .sd-header-actions > a.icon-button:not(.ddt-workflows-link):not(.ddt-challenges-link):not(.ddt-contact-link):not(.ddt-bookmark-button),
  .sd-header-right .sd-header-actions > button.icon-button:not(#ddtPipelineToggle):not(#themeToggle):not(#ddtFocusToggle):not(.ddt-bookmark-button):not(.ddt-topnav-hamburger) {
    display: none;
  }
  /* Show search input full-width under logo when present */
  .sd-header-right .sd-header-search {
    order: 99;
    flex-basis: 100%;
  }
  .sd-header-right .sd-header-search .tool-search-input {
    width: 100%;
  }
}

/* Also trim the search placeholder hint on narrower viewports — the Ctrl+K
   suffix caused clipping on phones. Pure-CSS can't rewrite placeholder text,
   so we compact by shrinking input size + letting the input's own ellipsis
   truncate, AND we prepare a class the JS can add to swap placeholder text. */
@media (max-width: 560px) {
  .sd-header-search .tool-search-input {
    font-size: 13px;
  }
}

/* P0-4: Tools catalog toolbar — stack chips earlier so none get clipped.
   The old breakpoint was ~880px; at 1024px the row was already cramped. */
@media (max-width: 1180px) {
  .ddt-catalog-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ddt-catalog-toolbar .ddt-filter-row {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
}

/* Subtle visual cue that chips are scrollable when they overflow */
.ddt-filter-row {
  scrollbar-width: thin;
}
.ddt-filter-row::-webkit-scrollbar { height: 6px; }
.ddt-filter-row::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-muted) 60%, transparent);
  border-radius: 999px;
}

/* P1-5: consistent "Runs locally" badge on every tool page. Injected into
   the subtitle row by JS; styled here. */
.ddt-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--success-soft, #d1fae5) 72%, transparent);
  color: var(--success, #047857);
  border: 1px solid color-mix(in srgb, var(--success, #059669) 28%, transparent);
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}
.ddt-privacy-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success, #059669);
  display: inline-block;
}
html[data-theme='dark'] .ddt-privacy-badge {
  background: color-mix(in srgb, var(--success, #059669) 22%, transparent);
  color: color-mix(in srgb, var(--success, #34d399) 85%, white);
}
@media (max-width: 560px) {
  .ddt-privacy-badge {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* Magic Box action buttons — Paste is the affirmative primary action,
   Clear is a destructive action rendered as a subtle/danger style so the two
   are distinguishable at a glance. */
.ddt-magic-clear-btn.secondary {
  color: var(--danger, #b91c1c);
  border-color: color-mix(in srgb, var(--danger, #b91c1c) 30%, transparent);
}
.ddt-magic-clear-btn.secondary:hover {
  background: color-mix(in srgb, var(--danger, #b91c1c) 10%, transparent);
  border-color: var(--danger, #b91c1c);
  color: var(--danger, #b91c1c);
}

/* Display-settings cluster (Focus + Theme) sits at the far right of the
   top-right header, visually separated from the navigation link buttons. */
.sd-header-right {
  gap: var(--space-3, 10px);
}
.sd-header-right:has(.sd-header-search) {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "search actions display";
}
.sd-header-right:has(.sd-header-search) .sd-header-search {
  grid-area: search;
  min-width: 0;
}
.sd-header-right:has(.sd-header-search) .sd-header-actions {
  grid-area: actions;
  justify-self: end;
  flex-wrap: nowrap;
  min-width: max-content;
}
.sd-header-right:has(.sd-header-search) .sd-header-display-settings,
.sd-header-right:has(.sd-header-search) > #themeToggle {
  grid-area: display;
  justify-self: end;
  margin-left: 0;
}
.sd-header-display-settings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
}
@media (max-width: 1180px) {
  .sd-header-right:has(.sd-header-search) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search search"
      "actions display";
  }
}
@media (max-width: 980px) {
  .sd-header-right:has(.sd-header-search) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search search"
      "actions display";
  }
  .sd-header-right:has(.sd-header-search) .sd-header-actions {
    min-width: 0;
    flex-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .sd-header-display-settings {
    margin-left: 2px;
    padding-left: 4px;
    border-left: 0;
  }
}
@media (max-width: 900px) {
  .sd-header-right:has(.sd-header-search) {
    display: flex;
    flex-wrap: wrap;
  }
  .sd-header-right:has(.sd-header-search) .sd-header-actions {
    order: 1;
    justify-self: auto;
    flex-wrap: nowrap;
  }
  .sd-header-right:has(.sd-header-search) .sd-header-display-settings,
  .sd-header-right:has(.sd-header-search) > #themeToggle {
    order: 2;
    justify-self: auto;
  }
  .sd-header-right:has(.sd-header-search) .sd-header-search {
    order: 99;
    flex-basis: 100%;
  }
}

/* Focus toggle — icon-only button, same footprint as the theme toggle so
   the two read as a matched pair of display settings. */
.ddt-focus-toggle.icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
  background: transparent;
  color: var(--color-text-secondary, var(--text-muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ddt-focus-toggle.icon-button:hover {
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, var(--text-main));
  border-color: var(--color-border-medium, rgba(0, 0, 0, 0.16));
}
.ddt-focus-toggle.icon-button.is-active {
  background: var(--primary-soft, rgba(29, 78, 216, 0.1));
  color: var(--primary, #1d4ed8);
  border-color: color-mix(in srgb, var(--primary, #1d4ed8) 40%, transparent);
}
.ddt-focus-toggle.icon-button svg {
  width: 18px;
  height: 18px;
}

/* Tool-page density and action consistency --------------------------------
   Keeps controls readable while reducing the repeated, oversized button
   footprint across the utility pages. */
body[data-tool-id] h1 {
  font-size: 20px;
}

body[data-tool-id] .subtitle {
  font-size: 12px;
  line-height: 1.45;
}

body[data-tool-id] .ddt-tool-intro,
body[data-tool-id] .ddt-start-card,
body[data-tool-id] .tip-row,
body[data-tool-id] .mini-help,
body[data-tool-id] .ddt-actionbar-trust,
body[data-tool-id] .ddt-actionbar-workflow-hint {
  display: none !important;
}

body[data-tool-id] .tool-page-header,
body[data-tool-id] .page-content > h1,
body[data-tool-id] .page-content > .subtitle {
  margin-bottom: 6px;
}

body[data-tool-id] .ddt-tool-utility-row {
  margin: 4px 0 8px;
}

body[data-tool-id] .ddt-tool-actions .ddt-tool-utility-row {
  margin: 0;
}

body[data-tool-id] .ddt-input-local-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 6px;
}

body[data-tool-id] .ddt-input-upload-btn {
  white-space: nowrap;
}

body[data-tool-id] .card h3,
body[data-tool-id] .panel-header-title,
body[data-tool-id] .ddt-example-title {
  font-size: 12px;
}

body[data-tool-id] .small,
body[data-tool-id] .note,
body[data-tool-id] .ddt-help,
body[data-tool-id] .tool-help,
body[data-tool-id] .ddt-actionbar-meta,
body[data-tool-id] .ddt-actionbar-workflow-hint,
body[data-tool-id] .ddt-actionbar-trust,
body[data-tool-id] .ddt-editor-footer {
  font-size: 11px;
}

body[data-tool-id] button,
body[data-tool-id] .btn,
body[data-tool-id] .icon-button,
body[data-tool-id] .ddt-tab,
body[data-tool-id] .ddt-examples-tab {
  min-height: 30px;
  padding: 6px 10px;
  gap: 6px;
  font-size: 12px;
  line-height: 1.15;
}

body[data-tool-id] button.small-btn,
body[data-tool-id] .small-btn,
body[data-tool-id] .btn-sm,
body[data-tool-id] .card-header .icon-button,
body[data-tool-id] .panel-header-actions .icon-button,
body[data-tool-id] .ddt-example-actions button {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11px;
}

body[data-tool-id] .ddt-action-bar,
body[data-tool-id] .ddt-actionbar {
  gap: 6px;
  padding: 6px 8px;
}

body[data-tool-id] .ddt-actionbar-left,
body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .ddt-actionbar-group,
body[data-tool-id] .ddt-example-actions,
body[data-tool-id] .ddt-examples-tabs {
  gap: 6px;
}

body[data-tool-id] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']),
body[data-tool-id] select,
body[data-tool-id] textarea,
body[data-tool-id] .text-input,
body[data-tool-id] .output-textarea,
body[data-tool-id] .monospace-output,
body[data-tool-id] .lined-textarea textarea {
  padding: 8px 10px;
  font-size: 12px;
}

body[data-tool-id] .ddt-examples-card:not([open]) {
  padding: 8px 10px;
  box-shadow: none;
}

body[data-tool-id] .ddt-examples-card:not([open]) .ddt-examples-summary {
  gap: 8px;
}

@media (pointer: coarse) {
  body[data-tool-id] button,
  body[data-tool-id] .btn,
  body[data-tool-id] .icon-button,
  body[data-tool-id] button.small-btn,
  body[data-tool-id] .small-btn,
  body[data-tool-id] .btn-sm {
    min-height: 34px;
    padding: 7px 11px;
  }
}

/* Home h1 — added 2026-05-01 */
.ddt-home-h1 {
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin: 4px 0 6px;
}

/* Standardized tool surfaces and content typography.
   Keep this late in the cascade so older page-local and shared layers converge. */
body[data-tool-id] textarea,
body[data-tool-id] .output-textarea,
body[data-tool-id] .lined-textarea-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea-input {
  flex: 1 1 auto;
  width: auto;
}

body[data-tool-id] .line-numbers {
  flex: 0 0 44px;
}

body[data-tool-id] .ddt-action-bar,
body[data-tool-id] .ddt-actionbar,
body[data-tool-id] .compare-bar {
  width: 100%;
  max-width: 100%;
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle, var(--border-soft));
  border-top: 3px solid color-mix(in srgb, var(--primary) 60%, transparent) !important;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface, var(--bg-elevated));
  box-shadow: var(--shadow-xs, var(--shadow-card));
}

body[data-tool-id] .ddt-action-bar > *,
body[data-tool-id] .ddt-actionbar > *,
body[data-tool-id] .compare-bar > * {
  min-width: 0;
}

body[data-tool-id] .ddt-actionbar-left,
body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .ddt-actionbar-group,
body[data-tool-id] .compare-bar-left,
body[data-tool-id] .compare-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .compare-bar-right {
  margin-left: auto;
  justify-content: flex-end;
}

.seo-content h3 {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  margin: 18px 0 6px;
  letter-spacing: 0;
}

body[data-tool-id] h3 {
  font-size: 15px;
  line-height: 1.35;
}

/* Skip-to-main link (injected by ddt-main.js) */
.ddt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--primary, #1d4ed8);
  color: #fff;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-weight: 600;
}
.ddt-skip-link:focus,
.ddt-skip-link:focus-visible {
  left: 0;
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 2px;
}

/* Reserve space at the bottom of <main> while the cookie banner is visible
   so it never covers tool action bars or input. The banner sets
   body.ddt-cookie-visible while showing. */
body.ddt-cookie-visible main,
body.ddt-cookie-visible .sd-main,
body.ddt-cookie-visible .ddt-404-shell {
  padding-bottom: 96px;
}
@media (max-width: 720px) {
  body.ddt-cookie-visible main,
  body.ddt-cookie-visible .sd-main,
  body.ddt-cookie-visible .ddt-404-shell {
    padding-bottom: 140px;
  }
}

/* Redaction-before-share gate panel */
.ddt-share-gate-title { margin: 0 0 4px; font-size: 14px; color: var(--text-main, #0f172a); }
.ddt-share-gate-subtitle { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
.ddt-share-gate-list { list-style: none; padding: 0; margin: 0 0 12px; max-height: 220px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px; }
.ddt-share-gate-list li { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: 70px 130px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.ddt-share-gate-list li:last-child { border-bottom: none; }
.ddt-share-gate-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ddt-share-gate-preview { margin-top: 6px; font-size: 12px; }
.ddt-share-gate-preview-pre { max-height: 200px; overflow: auto; background: var(--bg-elevated); padding: 8px; border-radius: 6px; font-size: 11px; white-space: pre-wrap; word-break: break-word; }
.ddt-share-gate-not-secret { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 6px; }
.ddt-share-gate-not-secret:hover { color: var(--text); text-decoration: underline; }

/* ---- Encrypted share: send-modal trust lead (Surface 1) ---- */
.ddt-share-trust-lead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #16a34a) 8%, transparent);
  margin-bottom: 12px;
}
.ddt-share-trust-lead .ddt-share-lock { font-size: 20px; line-height: 1.2; }
.ddt-share-trust-lead strong { display: block; color: var(--text-main, #0f172a); font-size: 14px; }
.ddt-share-trust-lead p { margin: 4px 0 0; color: var(--text-muted, #64748b); font-size: 13px; }
.ddt-share-facts { list-style: none; padding: 0; margin: 8px 0 12px; }
.ddt-share-facts li { color: var(--text-muted, #64748b); font-size: 12px; }
[data-theme="dark"] .ddt-share-trust-lead { border-color: var(--border-soft, #334155); }
[data-theme="dark"] .ddt-share-trust-lead strong { color: var(--text-main, #f1f5f9); }

/* Surface 2 (protective gate heading): color is set on the base .ddt-share-gate-title
   rule above (was danger-red, now neutral --text-main, which is light in dark mode). */

/* ---- Encrypted share: recipient receive panel (Surface 3) ---- */
.ddt-receive-panel {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent, #16a34a) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #16a34a) 7%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ddt-receive-head { display: flex; align-items: center; gap: 8px; }
.ddt-receive-glyph { font-size: 18px; }
.ddt-receive-head strong { font-size: 15px; color: var(--text-main, #0f172a); }
.ddt-receive-body { margin: 8px 0 0; color: var(--text-main, #0f172a); font-size: 14px; }
.ddt-receive-redacted { margin: 8px 0 0; color: #92400e; font-size: 13px; }
.ddt-receive-redacted code { background: rgba(245,158,11,.16); padding: 1px 4px; border-radius: 3px; }
.ddt-receive-brand { margin: 6px 0 0; color: var(--text-muted, #64748b); font-size: 12px; }
.ddt-receive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ddt-receive-about { text-decoration: none; display: inline-flex; align-items: center; }
.ddt-receive-dismiss {
  position: absolute; right: 10px; top: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--text-muted, #64748b);
}
[data-theme="dark"] .ddt-receive-head strong,
[data-theme="dark"] .ddt-receive-body { color: var(--text-main, #f1f5f9); }
[data-theme="dark"] .ddt-receive-redacted { color: #fbbf24; }
@media (max-width: 600px) {
  .ddt-receive-actions { flex-direction: column; align-items: stretch; }
  .ddt-receive-actions .primary,
  .ddt-receive-actions .secondary { text-align: center; }
}

/* UX audit follow-through: Magic Box history/privacy affordances */
.magic-history-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.magic-history-optin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.magic-suggestion--summary,
.magic-suggestion--empty {
  border-style: dashed;
}
.magic-suggestion-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ===== assets/ddt-tokens.css ===== */
/* assets/ddt-tokens.css
 * Superseded by assets/ddt-design-tokens.css (Task B2). All design tokens are
 * now defined once, there. This file is intentionally empty of token
 * declarations; it is still listed in some CSS bundle manifests, where it
 * contributes nothing. Do NOT re-add token :root/[data-theme] blocks here.
 */


/* ===== assets/ddt-platform.css ===== */
:root {
  --ddt-font-scale: 1;
  --ddt-space-unit: 1;
}

body {
  font-size: calc(16px * var(--ddt-font-scale));
}

.tool-root :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Empty platform slots must collapse completely. Tools with local output
   controls now carry those controls in their own panes, so an empty shared
   actionbar should not reserve a blank component above the workspace. */
body[data-tool-id] .ddt-platform-slots > div[data-slot='ddt-actionbar']:empty {
  display: none;
  min-height: 0;
}
.ddt-actionbar {
  position: sticky;
  top: 10px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(10px * var(--ddt-space-unit));
  padding: calc(10px * var(--ddt-space-unit)) calc(12px * var(--ddt-space-unit));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

.ddt-actionbar-left,
.ddt-actionbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ddt-space-unit));
  align-items: center;
}

.ddt-actionbar-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-select,
.ddt-view-select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
}

.ddt-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ddt-choice-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ddt-choice-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ddt-choice-pill-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ddt-choice-pill:hover .ddt-choice-pill-text,
.ddt-choice-pill input:focus-visible + .ddt-choice-pill-text {
  border-color: var(--primary);
  color: var(--primary);
}

.ddt-choice-pill input:checked + .ddt-choice-pill-text {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border-soft) 48%);
  background: color-mix(in srgb, var(--primary-soft) 82%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.ddt-file-info {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-file-info.is-visible {
  display: flex;
}

.ddt-file-clear {
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
}

.ddt-dropzone-active {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--primary-soft) 62%, transparent);
}

.ddt-error-banner {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
}

.ddt-error-message {
  font-weight: 600;
}

.ddt-error-meta {
  font-size: 12px;
  margin-top: 4px;
}

.ddt-error-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-error-highlight {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 34%, transparent) inset;
}

.ddt-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  z-index: 30;
}

.ddt-drawer-overlay[aria-hidden='false'] {
  display: flex;
}

.ddt-drawer {
  width: min(420px, 92vw);
  background: var(--bg-panel);
  border-left: 1px solid var(--border-soft);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.ddt-drawer-header {
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ddt-drawer-title {
  font-weight: 600;
}

.ddt-drawer-body {
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ddt-drawer-note {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-drawer-note.is-warning {
  color: var(--danger);
}

.ddt-drawer-controls {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ddt-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-main);
}

.ddt-history-list,
.ddt-presets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddt-history-item,
.ddt-preset-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ddt-history-meta,
.ddt-preset-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-history-actions,
.ddt-preset-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-preset-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-empty {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-view-controls {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: 12px;
}

.ddt-view-label {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-toast-wrap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}

.ddt-toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
  font-size: 12px;
}

.ddt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ddt-toast--ok {
  border-color: var(--success-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--success-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

.ddt-toast--error {
  border-color: var(--danger-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

/* Transparent control pass */
.ddt-select,
.ddt-view-select {
  background: transparent;
  border-color: var(--field-border, var(--border-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.ddt-choice-pill-text {
  background: transparent;
  border-color: var(--field-border, var(--border-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme='dark'] .ddt-select,
html[data-theme='dark'] .ddt-view-select {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme='dark'] .ddt-choice-pill-text {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ===== assets/ddt-tools.css ===== */
.ddt-two-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  .ddt-two-panel {
    grid-template-columns: 1fr;
  }
}

.ddt-action-bar {
  position: sticky;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

/* Shared "Clear" / "Clear All" control. One consistent, easy-to-recognise
   look across every tool: a muted-danger outline so it reads as a reset, and
   margin-left:auto so it parks at the far right of an action toolbar, on the
   same line as the primary action. Place it as the last item in the bar. */
.ddt-clear-btn {
  margin-left: auto;
}
/* Theme-scoped so the muted-danger look wins over .secondary.small-btn in
   both light and dark, regardless of which base button class is used. */
html[data-theme='light'] .ddt-clear-btn {
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.08);
}
html[data-theme='light'] .ddt-clear-btn:hover,
html[data-theme='light'] .ddt-clear-btn:focus-visible {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}
html[data-theme='dark'] .ddt-clear-btn {
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
}
html[data-theme='dark'] .ddt-clear-btn:hover,
html[data-theme='dark'] .ddt-clear-btn:focus-visible {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

/* Shared "Try a sample" affordance. A lightweight text link that flows inline at
   the end of the tool's subtitle line rather than taking a row of its own or
   competing as a first-class button in the action bar. Works as a <button> or an <a>. */
.ddt-try-sample {
  display: inline;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary, #2563eb);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.ddt-try-sample:hover,
.ddt-try-sample:focus-visible {
  text-decoration: underline;
}
html[data-theme='dark'] .ddt-try-sample {
  color: var(--primary, #60a5fa);
}

.ddt-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ddt-toast-wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 999;
}

.ddt-toast-wrap .ddt-toast {
  padding: 8px 12px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ddt-toast-wrap .ddt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ddt-toast-wrap .ddt-toast--error {
  background: #b91c1c;
}

.ddt-toast-wrap .ddt-toast--success {
  background: #166534;
}

.ddt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ddt-tab {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
}

.ddt-tab.is-active {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.ddt-help {
  color: var(--text-muted);
  font-size: 12px;
}

.ddt-form-row {
  margin-bottom: 10px;
}

.ddt-form-row:last-child {
  margin-bottom: 0;
}

.ddt-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-input {
  width: 90px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  background: var(--bg-elevated);
  color: var(--text);
}

.inline-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 0 3px var(--ring);
}

.ddt-action-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-soft);
  align-self: center;
  flex-shrink: 0;
  margin: 0 2px;
}

.ddt-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ddt-mode-card .ddt-tabs {
  margin-top: 0;
  flex-shrink: 0;
}

.ddt-mode-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Vertical density pass: tighter action bar + sticky offset --- */
.ddt-action-bar {
  padding: 6px 8px;
  top: 6px;
  gap: 6px;
}

.ddt-ux-status-panel,
.ddt-ux-stats-panel,
.ddt-ux-secrets-panel,
.ddt-ux-next-panel {
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.5;
}

.ddt-ux-status-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ddt-ux-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-soft);
}

.ddt-ux-status-info {
  background: color-mix(in srgb, var(--primary-soft, #dbeafe) 70%, var(--bg-elevated));
  color: color-mix(in srgb, var(--primary, #2563eb) 72%, var(--text-main));
}

.ddt-ux-status-warning {
  background: color-mix(in srgb, #fef3c7 72%, var(--bg-elevated));
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 42%, var(--border-soft));
}

.ddt-ux-note {
  margin-top: 4px;
  color: var(--text-muted);
}

.ddt-ux-secrets-panel {
  border-color: color-mix(in srgb, #f59e0b 44%, var(--border-soft));
  background: color-mix(in srgb, #fef3c7 30%, var(--bg-elevated));
}

.ddt-ux-secrets-panel[hidden] {
  display: none;
}

.ddt-ux-secret-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.ddt-ux-next-actions,
.ddt-ux-editor-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
}

.ddt-ux-sanitized-preview {
  width: 100%;
  min-height: 120px;
  margin-top: 8px;
}

.ddt-ux-editor-shell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ddt-ux-editor-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  border-radius: 8px;
}

.ddt-ux-editor-body > textarea {
  min-width: 0;
}

.ddt-ux-line-gutter {
  display: block;
  min-width: 38px;
  max-width: 54px;
  margin: 0;
  padding: 10px 7px;
  overflow: hidden;
  border: 1px solid var(--field-border, var(--border-soft));
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--border-soft));
  color: var(--text-muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-align: right;
  user-select: none;
  white-space: pre;
}

.ddt-ux-editor-body > textarea {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.ddt-ux-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.ddt-ux-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ddt-ux-mini-btn {
  padding: 3px 7px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .ddt-ux-status-panel {
    align-items: flex-start;
  }

  .ddt-ux-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .ddt-ux-next-actions,
  .ddt-ux-editor-actions {
    margin-left: 0;
  }
}


/* ===== assets/layout.css ===== */
/* assets/layout.css */
:root {
  --topnav-height: 44px;
  --rail-width: 0px;
  --rail-expanded-width: 240px;
  --header-height: 60px;
  --ddt-overlay: rgba(15, 18, 24, 0.45);
}

body.ddt-layout {
  padding-left: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

.ddt-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
}

#app-main {
  min-height: 100vh;
}


body.ddt-focus .sd-page,
body.ddt-focus .page-wrapper {
  max-width: 100%;
}

body.ddt-focus .page-wrapper {
  margin: 0;
}

body.ddt-focus:not(.ddt-is-mobile) .ddt-rail {
  display: flex;
}

.sd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Final shared UI normalization. This file loads after the optional tool
   bundles, so these rules keep core controls aligned across page variants. */
body[data-tool-id] textarea,
body[data-tool-id] .output-textarea,
body[data-tool-id] .lined-textarea-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea-input {
  flex: 1 1 auto;
  width: auto;
}

body[data-tool-id] .line-numbers {
  flex: 0 0 44px;
}

body[data-tool-id] .ddt-action-bar,
body[data-tool-id] .ddt-actionbar,
body[data-tool-id] .compare-bar {
  width: 100%;
  max-width: 100%;
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle, var(--border-soft));
  border-top: 3px solid color-mix(in srgb, var(--primary) 60%, transparent) !important;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface, var(--bg-elevated));
  box-shadow: var(--shadow-xs, var(--shadow-card));
}

body[data-tool-id] .ddt-action-bar > *,
body[data-tool-id] .ddt-actionbar > *,
body[data-tool-id] .compare-bar > * {
  min-width: 0;
}

body[data-tool-id] .ddt-actionbar-left,
body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .ddt-actionbar-group,
body[data-tool-id] .compare-bar-left,
body[data-tool-id] .compare-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .compare-bar-right {
  margin-left: auto;
  justify-content: flex-end;
}

.seo-content h3 {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  margin: 18px 0 6px;
  letter-spacing: 0;
}

body[data-tool-id] h3 {
  font-size: 15px;
  line-height: 1.35;
}

.ddt-header-btn {
  font-size: 12px;
  padding: 6px 10px;
  min-width: 44px;
  border-radius: 10px;
}

.icon-button.ddt-iconified {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.ddt-rail {
  display: none !important;
}

.ddt-rail-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, padding 0.18s ease;
}

.ddt-rail-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ddt-rail-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddt-rail-label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  transition: max-width 0.18s ease, opacity 0.12s ease, margin-left 0.18s ease;
}

.ddt-rail-item:hover {
  background: var(--bg-elevated);
  border-color: var(--border-soft);
}

.ddt-rail-item:hover .ddt-rail-icon,
.ddt-rail-item:focus-visible .ddt-rail-icon {
  background: var(--bg-panel);
  border-color: var(--border-soft);
  color: currentColor;
}

.ddt-rail-item.is-active {
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--bg-panel));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ddt-rail-item.is-active .ddt-rail-icon {
  background: color-mix(in srgb, var(--accent-soft) 85%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
}

.ddt-rail-item.is-active .ddt-rail-label {
  font-weight: 600;
}

.ddt-rail-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, left 0.15s ease;
  z-index: 80;
}

.ddt-rail-item:hover::after,
.ddt-rail-item:focus-visible::after {
  opacity: 1;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .ddt-rail:hover,
  .ddt-rail:focus-within {
    width: var(--rail-expanded-width);
    align-items: stretch;
    padding-left: 8px;
    padding-right: 8px;
    box-shadow: 2px 0 14px rgba(15, 18, 24, 0.05);
  }

  .ddt-rail:hover .ddt-rail-item,
  .ddt-rail:focus-within .ddt-rail-item {
    width: 100%;
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
    gap: 0;
  }

  .ddt-rail:hover .ddt-rail-label,
  .ddt-rail:focus-within .ddt-rail-label {
    max-width: 176px;
    opacity: 1;
    margin-left: 10px;
  }

  .ddt-rail:hover .ddt-rail-item[data-tooltip]::after,
  .ddt-rail:focus-within .ddt-rail-item[data-tooltip]::after {
    opacity: 0;
  }
}

/* ── Top Navigation Bar ─────────────────────────────────── */

.ddt-topnav {
  width: 100%;
  height: var(--topnav-height);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: stretch;
  overflow: visible;
}

.ddt-topnav-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 12px;
}

.ddt-topnav-cats {
  display: flex;
  align-items: stretch;
}

.ddt-topnav-cat {
  position: relative;
  display: flex;
  align-items: stretch;
  --topnav-cat-accent: var(--accent);
  --topnav-cat-bg: color-mix(in srgb, var(--topnav-cat-accent) 10%, transparent);
  --topnav-cat-border: color-mix(in srgb, var(--topnav-cat-accent) 48%, transparent);
}

.ddt-topnav-cat[data-category='JSON & YAML'] {
  --topnav-cat-accent: #245ee8;
}

.ddt-topnav-cat[data-category='SQL'] {
  --topnav-cat-accent: #0f7fa6;
}

.ddt-topnav-cat[data-category='API & Web'] {
  --topnav-cat-accent: #0d9488;
}

.ddt-topnav-cat[data-category='Security & Auth'] {
  --topnav-cat-accent: #c23b4b;
}

.ddt-topnav-cat[data-category='Encode / Decode'] {
  --topnav-cat-accent: #c76a14;
}

.ddt-topnav-cat[data-category='DevOps & Config'] {
  --topnav-cat-accent: #7657d8;
}

.ddt-topnav-cat[data-category='Compare & Diff'] {
  --topnav-cat-accent: #b14cc7;
}

.ddt-topnav-cat[data-category='Utilities'] {
  --topnav-cat-accent: #9f6b1b;
}

.ddt-topnav-cat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  background: color-mix(in srgb, var(--topnav-cat-accent) 5%, transparent);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: color-mix(in srgb, var(--topnav-cat-accent) 44%, var(--text-main));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ddt-topnav-cat-btn:hover {
  background: var(--topnav-cat-bg);
  border-color: color-mix(in srgb, var(--topnav-cat-accent) 18%, transparent);
  border-bottom-color: var(--topnav-cat-border);
  color: var(--topnav-cat-accent);
}

.ddt-topnav-cat.is-active .ddt-topnav-cat-btn {
  background: color-mix(in srgb, var(--topnav-cat-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--topnav-cat-accent) 18%, transparent);
  border-bottom-color: var(--topnav-cat-accent);
  color: var(--topnav-cat-accent);
  font-weight: 700;
}

.ddt-topnav-cat-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--topnav-cat-accent) 60%, var(--text-muted));
}

.ddt-topnav-cat.is-active .ddt-topnav-cat-icon,
.ddt-topnav-cat-btn:hover .ddt-topnav-cat-icon {
  color: var(--topnav-cat-accent);
}

.ddt-topnav-cat-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddt-topnav-cat-label {
  font-size: 13px;
}

body.ddt-has-shared-actionbar .page-content .ddt-workflow-cta-btn {
  display: none !important;
}

body.ddt-has-shared-actionbar .page-content .ddt-actionbar .ddt-workflow-cta-btn {
  display: inline-flex !important;
}

.ddt-topnav-chevron {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
  opacity: 0.5;
}

.ddt-topnav-cat.is-open .ddt-topnav-chevron,
.ddt-topnav-cat:hover .ddt-topnav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.ddt-topnav-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 220px;
  max-height: min(72vh, 500px);
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 18, 24, 0.13);
  padding: 6px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

@media (hover: hover) {
  .ddt-topnav-cat:hover .ddt-topnav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.ddt-topnav-cat.is-open .ddt-topnav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ddt-topnav-tool-link {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.4;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.ddt-topnav-tool-link:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}

.ddt-topnav-tool-link.is-active {
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.ddt-topnav-search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ddt-topnav-search:hover,
.ddt-topnav-search:focus-within {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.ddt-topnav-search svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ddt-topnav-search input {
  width: min(18vw, 190px);
  min-width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  line-height: 1.4;
}

.ddt-topnav-search input::placeholder {
  color: var(--text-muted);
}

.ddt-topnav-search-shortcut {
  padding: 1px 5px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

/* Compact labels at medium widths */
@media (max-width: 1200px) {
  .ddt-topnav-cat-label {
    display: none;
  }
  .ddt-topnav-cat-btn {
    padding: 0 9px;
    gap: 0;
  }
  .ddt-topnav-chevron {
    display: none;
  }
}

/* ── End Top Navigation Bar ──────────────────────────────── */

/* Phase 4: the command palette (assets/palette.js) owns all of its own styling
   and show/hide via .ddt-cmdk* / .ddt-cmdk.is-open in assets/palette.css, which
   self-injects on first open. No .ddt-cmdk rules live in layout.css. */

.command-palette {
  display: none !important;
}

@media (max-width: 900px) {
  body.ddt-layout {
    padding-left: 0;
  }
  .ddt-topnav {
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .ddt-topnav-inner {
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    padding: 0 8px;
  }
  .ddt-topnav-cats {
    display: flex;
    width: max-content;
    min-width: 100%;
  }
  .ddt-topnav-search-shortcut {
    display: none;
  }
  .ddt-topnav-search input {
    width: 140px;
    min-width: 120px;
  }
  .ddt-topnav-cat-label {
    display: inline;
  }
  .ddt-topnav-chevron {
    display: block;
  }
  .ddt-topnav-cat-btn {
    min-height: 44px;
    padding: 0 10px;
    gap: 5px;
  }
}

@media (max-width: 640px) {
  body.ddt-layout {
    padding-left: 0;
  }
  .ddt-topnav-inner {
    padding: 0 6px;
  }
}

/* Transparent header search field (the palette styles itself in palette.css). */
.ddt-topnav-search {
  background: transparent;
  border-color: var(--field-border, var(--border-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme='dark'] .ddt-topnav-search {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ===== assets/cookie-consent.css ===== */
/* assets/cookie-consent.css */
#ddt-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--panel, #2a2a2a);
  border-top: 1px solid var(--border, #444);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  /* Respect device safe areas (notch / home indicator) so actions stay tappable. */
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
}

.ddt-cookie-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.ddt-cookie-copy {
  flex: 1;
  min-width: 0;
}
/* Compact copy prevents the deferred notice from becoming the page's LCP element. */
.ddt-cookie-text {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text, #eee);
  line-height: 1.35;
}

.ddt-cookie-text a {
  color: var(--primary, #3b82f6);
  text-decoration: underline;
}

.ddt-cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Scope under the banner id so these win over per-page button normalisation
   such as `body[data-tool-id] button` (higher specificity) on tool pages. */
#ddt-cookie-banner .ddt-cookie-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ddt-cookie-btn-primary {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

.ddt-cookie-btn-primary:hover {
  background: #1e40af;
  border-color: #1e40af;
}

.ddt-cookie-btn-secondary {
  background: transparent;
  color: var(--text, #eee);
  border-color: var(--border, #444);
}

.ddt-cookie-btn-secondary:hover {
  background: var(--border, #444);
}

/* While the banner is visible, reserve space so it doesn't overlap content.
   The homepage hero centers its content in 100svh, so add bottom padding there
   too — with justify-content:center this lifts the chips/stats clear of the banner. */
body.ddt-cookie-open {
  padding-bottom: 72px;
}
body.ddt-cookie-open .rd-hero {
  padding-bottom: 84px;
}

@media (max-width: 600px) {
  .ddt-cookie-inner {
    align-items: center;
    gap: 8px;
  }

  .ddt-cookie-actions {
    gap: 6px;
  }

  #ddt-cookie-banner .ddt-cookie-btn {
    /* WCAG 2.2 touch-target minimum on mobile. */
    min-height: 44px;
    width: auto;
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  body.ddt-cookie-open {
    padding-bottom: 96px;
  }
  body.ddt-cookie-open .rd-hero {
    padding-bottom: 108px;
  }
}


/* ===== assets/workflow-pipeline-view.css ===== */
/* assets/workflow-pipeline-view.css — shared live workflow run view */
.wfpl-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; padding:6px 2px 10px; }
.wfpl-card { flex:0 0 auto; width:220px; border:1px solid var(--border,#2a2f3a); border-radius:10px; padding:10px 12px; background:var(--bg-elevated,#161a22); cursor:pointer; transition:border-color .15s ease; }
.wfpl-card:focus-visible { outline:2px solid var(--accent,#6ea8fe); outline-offset:2px; }
.wfpl-card[data-status="running"] { border-color:var(--accent,#6ea8fe); }
.wfpl-card[data-status="error"] { border-color:var(--danger,#e5534b); }
.wfpl-card[data-status="warn"] { border-color:var(--warning,#d29922); }
.wfpl-card[data-status="ok"] { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, transparent); }
.wfpl-card[data-status="skipped"] { opacity:.55; }
.wfpl-card-head { display:flex; align-items:center; gap:8px; }
.wfpl-tool { font-weight:600; color:var(--text,#e6edf3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfpl-dur { margin-left:auto; font-size:.72rem; color:var(--muted,#8b949e); }
.wfpl-dot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.72rem; color:#fff; background:var(--muted,#8b949e); }
.wfpl-dot[data-status="ok"] { background:var(--success,#3fb950); }
.wfpl-dot[data-status="warn"] { background:var(--warning,#d29922); }
.wfpl-dot[data-status="error"] { background:var(--danger,#e5534b); }
.wfpl-dot[data-status="running"] { background:var(--accent,#6ea8fe); animation:wfpl-pulse 1s ease-in-out infinite; }
.wfpl-dot[data-status="pending"], .wfpl-dot[data-status="skipped"] { background:var(--muted,#8b949e); }
@keyframes wfpl-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.wfpl-verdict { margin-top:6px; font-size:.82rem; color:var(--text,#e6edf3); }
.wfpl-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wfpl-chip { font-size:.7rem; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--muted,#8b949e) 22%, transparent); color:var(--text,#e6edf3); }
.wfpl-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning,#d29922) 22%, transparent); color:var(--warning,#d29922); }
.wfpl-chip[data-tone="danger"] { background:color-mix(in srgb, var(--danger,#e5534b) 22%, transparent); color:var(--danger,#e5534b); }
.wfpl-preview { margin:8px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--muted,#8b949e); white-space:pre-wrap; word-break:break-word; max-height:6.5em; overflow:hidden; }
.wfpl-detail { margin-top:8px; border-top:1px dashed var(--border,#2a2f3a); padding-top:8px; }
.wfpl-io-label { font-size:.7rem; color:var(--muted,#8b949e); text-transform:uppercase; letter-spacing:.03em; }
.wfpl-detail pre { margin:2px 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--text,#e6edf3); max-height:220px; overflow:auto; }
.wfpl-copy { font-size:.72rem; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#2a2f3a); background:transparent; color:var(--text,#e6edf3); cursor:pointer; }
.wfpl-arrow { align-self:center; color:var(--muted,#8b949e); flex:0 0 auto; }
.wfpl-card[data-expanded="true"] { width:300px; }
@media (max-width:720px) {
  .wfpl-track { flex-direction:column; overflow-x:visible; }
  .wfpl-card, .wfpl-card[data-expanded="true"] { width:auto; }
  .wfpl-arrow { transform:rotate(90deg); }
}


/* ===== assets/checklists/checklist.css ===== */
/* assets/checklists/checklist.css
 * Scoped under .ddt-checklist so styles don't leak into the rest of the site.
 */
.ddt-checklist {
  display: block;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #ffffff);
  margin: 16px 0;
}
.ddt-cl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  padding-bottom: 10px;
}
.ddt-cl-progress { font-weight: 600; color: var(--muted, #4b5563); }
.ddt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ddt-cl-actions button {
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface-alt, #f9fafb);
  color: var(--text, #111827);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.ddt-cl-actions button:hover { background: var(--surface-hover, #f3f4f6); }
.ddt-cl-persist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ddt-cl-item {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
}
.ddt-cl-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ddt-cl-item .ddt-cl-label { font-weight: 500; }
.ddt-cl-help { margin: 4px 0 8px 24px; color: var(--muted, #4b5563); font-size: 0.875rem; }
.ddt-cl-note {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
  margin-left: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
}
.ddt-cl-tool-link {
  display: inline-block;
  margin-left: 24px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #111827);
  font-size: 0.875rem;
}
.ddt-cl-tool-link:hover { background: var(--surface-hover, #e5e7eb); }
.ddt-cl-runner { margin: 8px 0 0 24px; }
.ddt-cl-runner summary { cursor: pointer; font-size: 0.875rem; color: var(--muted, #4b5563); }
.ddt-cl-runner textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 8px 0;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.ddt-cl-runner button {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-alt, #f9fafb);
  cursor: pointer;
}
.ddt-cl-runner button[disabled] { opacity: 0.5; cursor: not-allowed; }
.ddt-cl-evidence {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-evidence[data-status="pass"] { color: var(--success, #047857); font-weight: 600; }
.ddt-cl-evidence[data-status="fail"] { color: var(--danger, #b91c1c); font-weight: 600; }
.ddt-cl-evidence[data-status="error"] { color: var(--warning, #92400e); }
.ddt-cl-error { color: var(--danger, #b91c1c); padding: 12px; }

@media (max-width: 640px) {
  .ddt-cl-header { flex-direction: column; align-items: flex-start; }
  .ddt-cl-help, .ddt-cl-note, .ddt-cl-tool-link, .ddt-cl-runner { margin-left: 0; }
}

.ddt-cl-intro { max-width: 760px; margin: 0 0 16px; }
.ddt-cl-intro h1 { margin: 0 0 8px; }
.ddt-cl-intro .ddt-cl-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 1rem; }
.ddt-cl-intro h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-intro ul { margin: 0 0 8px 20px; padding: 0; color: var(--muted, #4b5563); font-size: 0.95rem; }

.ddt-cl-explain { max-width: 760px; margin: 24px 0 0; color: var(--text, #111827); font-size: 0.95rem; }
.ddt-cl-explain h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-explain p { margin: 0 0 8px; }
.ddt-cl-explain ul { margin: 0 0 8px 20px; padding: 0; }

[data-theme="dark"] .ddt-checklist,
[data-theme="dark"] .ddt-cl-item { background: var(--surface, #1f2937); }
[data-theme="dark"] .ddt-cl-actions button,
[data-theme="dark"] .ddt-cl-runner button,
[data-theme="dark"] .ddt-cl-tool-link { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-cl-intro .ddt-cl-lede,
[data-theme="dark"] .ddt-cl-intro ul { color: var(--muted, #9ca3af); }

/* Auto-captured tool output */
.ddt-cl-saved-hint { font-size: 0.78rem; color: var(--muted, #6b7280); }
.ddt-cl-output {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="dark"] .ddt-cl-output { background: var(--surface-alt, #111827); color: var(--text, #e5e7eb); }

/* ---- Evidence pack panel ---- */
.ddt-cl-evidence-pack {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}
.ddt-ep-title { margin: 0 0 4px; font-size: 1.1rem; }
.ddt-ep-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 0.9rem; }
.ddt-ep-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ddt-ep-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted, #4b5563);
  flex: 1 1 200px;
}
.ddt-ep-input {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; font-weight: 400;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-gate {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-ep-gate[data-status="blocked"] { border-color: var(--danger, #b91c1c); background: rgba(185, 28, 28, 0.06); }
.ddt-ep-gate[data-status="clean"] { border-color: var(--success, #047857); background: rgba(4, 120, 87, 0.06); }
.ddt-ep-gate[data-status="warn"] { border-color: var(--warning, #92400e); }
.ddt-ep-gate-msg { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ddt-ep-gate-list { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 0.8rem; color: var(--muted, #4b5563); }
.ddt-ep-gate-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.ddt-ep-gate-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddt-ep-sev { text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--danger, #b91c1c); }
.ddt-ep-gate-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ddt-ep-gate-btns button {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 5px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-redact { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.ddt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddt-ep-btn {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
.ddt-ep-btn:hover:not([disabled]) { background: var(--surface-hover, #f3f4f6); }
.ddt-ep-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ddt-ep-result { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted, #4b5563); word-break: break-all; }
.ddt-ep-share-row { display: flex; gap: 8px; margin-top: 8px; }
.ddt-ep-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-share-copy {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 6px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
[data-theme="dark"] .ddt-ep-input,
[data-theme="dark"] .ddt-ep-btn,
[data-theme="dark"] .ddt-ep-gate-btns button,
[data-theme="dark"] .ddt-ep-share-input,
[data-theme="dark"] .ddt-ep-share-copy { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-ep-gate { background: var(--surface-alt, #111827); }

/* ---- Shared (received) evidence pack ---- */
.ddt-shared-pack {
  border: 1px solid var(--border, #d1d5db);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 10px; padding: 16px; margin: 0 0 20px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-shared-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ddt-shared-integrity { font-size: 0.8rem; font-weight: 700; }
.ddt-shared-integrity[data-ok="yes"] { color: var(--success, #047857); }
.ddt-shared-integrity[data-ok="no"] { color: var(--danger, #b91c1c); }
.ddt-shared-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-meta { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ddt-shared-item { border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.ddt-shared-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.ddt-shared-item[data-status="pass"] .ddt-shared-badge, .ddt-shared-item[data-status="done"] .ddt-shared-badge { color: var(--success, #047857); }
.ddt-shared-item[data-status="fail"] .ddt-shared-badge { color: var(--danger, #b91c1c); }
.ddt-shared-item[data-status="pending"] .ddt-shared-badge { color: var(--muted, #6b7280); }
.ddt-shared-label { font-weight: 500; }
.ddt-shared-verdict, .ddt-shared-note-item { font-size: 0.8rem; color: var(--muted, #4b5563); margin-top: 4px; }
.ddt-shared-hash { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted, #6b7280); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-theme="dark"] .ddt-shared-pack { background: var(--surface-alt, #111827); }
[data-theme="dark"] .ddt-shared-item { background: var(--surface, #1f2937); }


/* ===== assets/persona-dashboard.css ===== */
/* assets/persona-dashboard.css
 * Interactive persona dashboard: instant-launch tool cards, inline workflow
 * runner, and live checklist progress. Direct-linked from persona pages
 * (not bundled), same as ddt-tool-page.css. All behaviour is client-side.
 */

.pd-dash {
  --pd-accent: var(--rd-accent-cyan, #00d4ff);
  margin: 8px 0 28px;
}

.pd-intro {
  color: var(--text-muted);
  max-width: 760px;
  margin: 4px 0 20px;
}

.pd-sec {
  margin-top: 30px;
}

.pd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pd-sec-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pd-sec-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ----- Instant-launch tool grid ------------------------------------ */

.pd-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tool-item {
  min-width: 0;
  list-style: none;
}

.pd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tool:hover,
.pd-tool:focus-visible {
  border-color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px var(--pd-accent);
  outline: none;
}

.pd-tool:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-tool-name {
  font-weight: 650;
  font-size: 0.96rem;
}

.pd-tool-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.pd-key {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  font: 600 0.74rem/1 var(--font-mono, ui-monospace, monospace);
}

.pd-tool:hover .pd-key,
.pd-tool:focus-visible .pd-key {
  color: var(--pd-accent);
  border-color: var(--pd-accent);
}

/* ----- Inline workflow runner -------------------------------------- */

.pd-workflows {
  display: grid;
  gap: 16px;
}

.pd-wf {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 16px;
}

.pd-wf-head {
  margin-bottom: 10px;
}

.pd-wf-title {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pd-wf-desc {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pd-wf-steps {
  display: inline-block;
  font: 600 0.74rem/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--pd-accent);
  word-break: break-word;
}

.pd-wf-inputlabel {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pd-wf-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg-base, #0d1117));
  color: var(--text-main);
  font: 0.85rem/1.45 var(--font-mono, ui-monospace, monospace);
}

.pd-wf-input:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -1px;
  border-color: var(--pd-accent);
}

.pd-wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-wf-run {
  border: 1px solid var(--pd-accent);
  background: var(--pd-accent);
  color: #05070d;
  font-weight: 650;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

.pd-wf-run:hover { filter: brightness(1.08); }
.pd-wf-run:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-wf-sample {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

.pd-wf-sample:hover { border-color: var(--pd-accent); }

.pd-wf-open {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
}

.pd-wf-open:hover { text-decoration: underline; }

.pd-wf-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pd-wf-status[data-tone="success"] { color: var(--success, #10b981); }
.pd-wf-status[data-tone="error"] { color: var(--danger, #ef4444); }

.pd-wf-pipeline {
  margin-top: 12px;
}

.pd-wf-pipeline:empty { display: none; }

/* ----- Checklists --------------------------------------------------- */

.pd-checklists {
  display: grid;
  gap: 16px;
}

.pd-checklist-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pd-checklist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pd-checklist-topbar h3 {
  margin: 0;
  font-size: 0.98rem;
}

.pd-checklist-topbar h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.pd-checklist-topbar h3 a:hover { text-decoration: underline; }

.pd-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pd-progress-count {
  font: 600 0.78rem/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
}

.pd-progress-bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.pd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pd-accent);
  transition: width 0.3s ease;
}

.pd-checklist-card .ddt-checklist {
  padding: 4px 12px 12px;
}

/* ----- Collapsed SEO accordion ------------------------------------- */

.pd-guide {
  margin-top: 26px;
}

.pd-guide .topic-problems { columns: 2; column-gap: 28px; max-width: 760px; }
.pd-guide .topic-problems li { margin-bottom: 6px; }
.pd-guide .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 4px;
}
.pd-guide .topic-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-guide .topic-card h3 { margin: 0; font-size: 1rem; }
.pd-guide .topic-card h3 a { text-decoration: none; color: var(--text-main); }
.pd-guide .topic-card h3 a:hover { text-decoration: underline; }
.pd-guide .topic-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; flex: 1; }
.pd-guide .topic-card-go { align-self: flex-start; font-size: 0.8rem; color: var(--pd-accent); text-decoration: none; font-weight: 600; }
.pd-guide .topic-card-go:hover { text-decoration: underline; }
.pd-guide .topic-section { margin-top: 24px; }
.pd-guide .topic-intro { color: var(--text-muted); max-width: 760px; }
.pd-guide .topic-faq-item { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.pd-guide .topic-faq-item h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pd-guide .topic-faq-item p { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .pd-guide .topic-problems { columns: 1; }
  .pd-wf-open { margin-left: 0; }
}


/* ===== assets/workflow-pipeline-view.css ===== */
/* assets/workflow-pipeline-view.css — shared live workflow run view */
.wfpl-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; padding:6px 2px 10px; }
.wfpl-card { flex:0 0 auto; width:220px; border:1px solid var(--border,#2a2f3a); border-radius:10px; padding:10px 12px; background:var(--bg-elevated,#161a22); cursor:pointer; transition:border-color .15s ease; }
.wfpl-card:focus-visible { outline:2px solid var(--accent,#6ea8fe); outline-offset:2px; }
.wfpl-card[data-status="running"] { border-color:var(--accent,#6ea8fe); }
.wfpl-card[data-status="error"] { border-color:var(--danger,#e5534b); }
.wfpl-card[data-status="warn"] { border-color:var(--warning,#d29922); }
.wfpl-card[data-status="ok"] { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, transparent); }
.wfpl-card[data-status="skipped"] { opacity:.55; }
.wfpl-card-head { display:flex; align-items:center; gap:8px; }
.wfpl-tool { font-weight:600; color:var(--text,#e6edf3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfpl-dur { margin-left:auto; font-size:.72rem; color:var(--muted,#8b949e); }
.wfpl-dot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.72rem; color:#fff; background:var(--muted,#8b949e); }
.wfpl-dot[data-status="ok"] { background:var(--success,#3fb950); }
.wfpl-dot[data-status="warn"] { background:var(--warning,#d29922); }
.wfpl-dot[data-status="error"] { background:var(--danger,#e5534b); }
.wfpl-dot[data-status="running"] { background:var(--accent,#6ea8fe); animation:wfpl-pulse 1s ease-in-out infinite; }
.wfpl-dot[data-status="pending"], .wfpl-dot[data-status="skipped"] { background:var(--muted,#8b949e); }
@keyframes wfpl-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.wfpl-verdict { margin-top:6px; font-size:.82rem; color:var(--text,#e6edf3); }
.wfpl-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wfpl-chip { font-size:.7rem; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--muted,#8b949e) 22%, transparent); color:var(--text,#e6edf3); }
.wfpl-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning,#d29922) 22%, transparent); color:var(--warning,#d29922); }
.wfpl-chip[data-tone="danger"] { background:color-mix(in srgb, var(--danger,#e5534b) 22%, transparent); color:var(--danger,#e5534b); }
.wfpl-preview { margin:8px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--muted,#8b949e); white-space:pre-wrap; word-break:break-word; max-height:6.5em; overflow:hidden; }
.wfpl-detail { margin-top:8px; border-top:1px dashed var(--border,#2a2f3a); padding-top:8px; }
.wfpl-io-label { font-size:.7rem; color:var(--muted,#8b949e); text-transform:uppercase; letter-spacing:.03em; }
.wfpl-detail pre { margin:2px 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--text,#e6edf3); max-height:220px; overflow:auto; }
.wfpl-copy { font-size:.72rem; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#2a2f3a); background:transparent; color:var(--text,#e6edf3); cursor:pointer; }
.wfpl-arrow { align-self:center; color:var(--muted,#8b949e); flex:0 0 auto; }
.wfpl-card[data-expanded="true"] { width:300px; }
@media (max-width:720px) {
  .wfpl-track { flex-direction:column; overflow-x:visible; }
  .wfpl-card, .wfpl-card[data-expanded="true"] { width:auto; }
  .wfpl-arrow { transform:rotate(90deg); }
}


/* ===== assets/checklists/checklist.css ===== */
/* assets/checklists/checklist.css
 * Scoped under .ddt-checklist so styles don't leak into the rest of the site.
 */
.ddt-checklist {
  display: block;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #ffffff);
  margin: 16px 0;
}
.ddt-cl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  padding-bottom: 10px;
}
.ddt-cl-progress { font-weight: 600; color: var(--muted, #4b5563); }
.ddt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ddt-cl-actions button {
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface-alt, #f9fafb);
  color: var(--text, #111827);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.ddt-cl-actions button:hover { background: var(--surface-hover, #f3f4f6); }
.ddt-cl-persist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ddt-cl-item {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
}
.ddt-cl-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ddt-cl-item .ddt-cl-label { font-weight: 500; }
.ddt-cl-help { margin: 4px 0 8px 24px; color: var(--muted, #4b5563); font-size: 0.875rem; }
.ddt-cl-note {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
  margin-left: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
}
.ddt-cl-tool-link {
  display: inline-block;
  margin-left: 24px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #111827);
  font-size: 0.875rem;
}
.ddt-cl-tool-link:hover { background: var(--surface-hover, #e5e7eb); }
.ddt-cl-runner { margin: 8px 0 0 24px; }
.ddt-cl-runner summary { cursor: pointer; font-size: 0.875rem; color: var(--muted, #4b5563); }
.ddt-cl-runner textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 8px 0;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.ddt-cl-runner button {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-alt, #f9fafb);
  cursor: pointer;
}
.ddt-cl-runner button[disabled] { opacity: 0.5; cursor: not-allowed; }
.ddt-cl-evidence {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-evidence[data-status="pass"] { color: var(--success, #047857); font-weight: 600; }
.ddt-cl-evidence[data-status="fail"] { color: var(--danger, #b91c1c); font-weight: 600; }
.ddt-cl-evidence[data-status="error"] { color: var(--warning, #92400e); }
.ddt-cl-error { color: var(--danger, #b91c1c); padding: 12px; }

@media (max-width: 640px) {
  .ddt-cl-header { flex-direction: column; align-items: flex-start; }
  .ddt-cl-help, .ddt-cl-note, .ddt-cl-tool-link, .ddt-cl-runner { margin-left: 0; }
}

.ddt-cl-intro { max-width: 760px; margin: 0 0 16px; }
.ddt-cl-intro h1 { margin: 0 0 8px; }
.ddt-cl-intro .ddt-cl-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 1rem; }
.ddt-cl-intro h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-intro ul { margin: 0 0 8px 20px; padding: 0; color: var(--muted, #4b5563); font-size: 0.95rem; }

.ddt-cl-explain { max-width: 760px; margin: 24px 0 0; color: var(--text, #111827); font-size: 0.95rem; }
.ddt-cl-explain h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-explain p { margin: 0 0 8px; }
.ddt-cl-explain ul { margin: 0 0 8px 20px; padding: 0; }

[data-theme="dark"] .ddt-checklist,
[data-theme="dark"] .ddt-cl-item { background: var(--surface, #1f2937); }
[data-theme="dark"] .ddt-cl-actions button,
[data-theme="dark"] .ddt-cl-runner button,
[data-theme="dark"] .ddt-cl-tool-link { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-cl-intro .ddt-cl-lede,
[data-theme="dark"] .ddt-cl-intro ul { color: var(--muted, #9ca3af); }

/* Auto-captured tool output */
.ddt-cl-saved-hint { font-size: 0.78rem; color: var(--muted, #6b7280); }
.ddt-cl-output {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="dark"] .ddt-cl-output { background: var(--surface-alt, #111827); color: var(--text, #e5e7eb); }

/* ---- Evidence pack panel ---- */
.ddt-cl-evidence-pack {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}
.ddt-ep-title { margin: 0 0 4px; font-size: 1.1rem; }
.ddt-ep-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 0.9rem; }
.ddt-ep-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ddt-ep-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted, #4b5563);
  flex: 1 1 200px;
}
.ddt-ep-input {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; font-weight: 400;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-gate {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-ep-gate[data-status="blocked"] { border-color: var(--danger, #b91c1c); background: rgba(185, 28, 28, 0.06); }
.ddt-ep-gate[data-status="clean"] { border-color: var(--success, #047857); background: rgba(4, 120, 87, 0.06); }
.ddt-ep-gate[data-status="warn"] { border-color: var(--warning, #92400e); }
.ddt-ep-gate-msg { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ddt-ep-gate-list { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 0.8rem; color: var(--muted, #4b5563); }
.ddt-ep-gate-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.ddt-ep-gate-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddt-ep-sev { text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--danger, #b91c1c); }
.ddt-ep-gate-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ddt-ep-gate-btns button {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 5px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-redact { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.ddt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddt-ep-btn {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
.ddt-ep-btn:hover:not([disabled]) { background: var(--surface-hover, #f3f4f6); }
.ddt-ep-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ddt-ep-result { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted, #4b5563); word-break: break-all; }
.ddt-ep-share-row { display: flex; gap: 8px; margin-top: 8px; }
.ddt-ep-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-share-copy {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 6px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
[data-theme="dark"] .ddt-ep-input,
[data-theme="dark"] .ddt-ep-btn,
[data-theme="dark"] .ddt-ep-gate-btns button,
[data-theme="dark"] .ddt-ep-share-input,
[data-theme="dark"] .ddt-ep-share-copy { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-ep-gate { background: var(--surface-alt, #111827); }

/* ---- Shared (received) evidence pack ---- */
.ddt-shared-pack {
  border: 1px solid var(--border, #d1d5db);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 10px; padding: 16px; margin: 0 0 20px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-shared-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ddt-shared-integrity { font-size: 0.8rem; font-weight: 700; }
.ddt-shared-integrity[data-ok="yes"] { color: var(--success, #047857); }
.ddt-shared-integrity[data-ok="no"] { color: var(--danger, #b91c1c); }
.ddt-shared-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-meta { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ddt-shared-item { border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.ddt-shared-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.ddt-shared-item[data-status="pass"] .ddt-shared-badge, .ddt-shared-item[data-status="done"] .ddt-shared-badge { color: var(--success, #047857); }
.ddt-shared-item[data-status="fail"] .ddt-shared-badge { color: var(--danger, #b91c1c); }
.ddt-shared-item[data-status="pending"] .ddt-shared-badge { color: var(--muted, #6b7280); }
.ddt-shared-label { font-weight: 500; }
.ddt-shared-verdict, .ddt-shared-note-item { font-size: 0.8rem; color: var(--muted, #4b5563); margin-top: 4px; }
.ddt-shared-hash { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted, #6b7280); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-theme="dark"] .ddt-shared-pack { background: var(--surface-alt, #111827); }
[data-theme="dark"] .ddt-shared-item { background: var(--surface, #1f2937); }


/* ===== assets/persona-dashboard.css ===== */
/* assets/persona-dashboard.css
 * Interactive persona dashboard: instant-launch tool cards, inline workflow
 * runner, and live checklist progress. Direct-linked from persona pages
 * (not bundled), same as ddt-tool-page.css. All behaviour is client-side.
 */

.pd-dash {
  --pd-accent: var(--rd-accent-cyan, #00d4ff);
  margin: 8px 0 28px;
}

.pd-intro {
  color: var(--text-muted);
  max-width: 760px;
  margin: 4px 0 20px;
}

.pd-sec {
  margin-top: 30px;
}

.pd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pd-sec-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pd-sec-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ----- Instant-launch tool grid ------------------------------------ */

.pd-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tool-item {
  min-width: 0;
  list-style: none;
}

.pd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tool:hover,
.pd-tool:focus-visible {
  border-color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px var(--pd-accent);
  outline: none;
}

.pd-tool:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-tool-name {
  font-weight: 650;
  font-size: 0.96rem;
}

.pd-tool-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.pd-key {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  font: 600 0.74rem/1 var(--font-mono, ui-monospace, monospace);
}

.pd-tool:hover .pd-key,
.pd-tool:focus-visible .pd-key {
  color: var(--pd-accent);
  border-color: var(--pd-accent);
}

/* ----- Inline workflow runner -------------------------------------- */

.pd-workflows {
  display: grid;
  gap: 16px;
}

.pd-wf {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 16px;
}

.pd-wf-head {
  margin-bottom: 10px;
}

.pd-wf-title {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pd-wf-desc {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pd-wf-steps {
  display: inline-block;
  font: 600 0.74rem/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--pd-accent);
  word-break: break-word;
}

.pd-wf-inputlabel {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pd-wf-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg-base, #0d1117));
  color: var(--text-main);
  font: 0.85rem/1.45 var(--font-mono, ui-monospace, monospace);
}

.pd-wf-input:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -1px;
  border-color: var(--pd-accent);
}

.pd-wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-wf-run {
  border: 1px solid var(--pd-accent);
  background: var(--pd-accent);
  color: #05070d;
  font-weight: 650;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

.pd-wf-run:hover { filter: brightness(1.08); }
.pd-wf-run:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-wf-sample {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

.pd-wf-sample:hover { border-color: var(--pd-accent); }

.pd-wf-open {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
}

.pd-wf-open:hover { text-decoration: underline; }

.pd-wf-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pd-wf-status[data-tone="success"] { color: var(--success, #10b981); }
.pd-wf-status[data-tone="error"] { color: var(--danger, #ef4444); }

.pd-wf-pipeline {
  margin-top: 12px;
}

.pd-wf-pipeline:empty { display: none; }

/* ----- Checklists --------------------------------------------------- */

.pd-checklists {
  display: grid;
  gap: 16px;
}

.pd-checklist-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pd-checklist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pd-checklist-topbar h3 {
  margin: 0;
  font-size: 0.98rem;
}

.pd-checklist-topbar h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.pd-checklist-topbar h3 a:hover { text-decoration: underline; }

.pd-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pd-progress-count {
  font: 600 0.78rem/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
}

.pd-progress-bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.pd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pd-accent);
  transition: width 0.3s ease;
}

.pd-checklist-card .ddt-checklist {
  padding: 4px 12px 12px;
}

/* ----- Collapsed SEO accordion ------------------------------------- */

.pd-guide {
  margin-top: 26px;
}

.pd-guide .topic-problems { columns: 2; column-gap: 28px; max-width: 760px; }
.pd-guide .topic-problems li { margin-bottom: 6px; }
.pd-guide .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 4px;
}
.pd-guide .topic-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-guide .topic-card h3 { margin: 0; font-size: 1rem; }
.pd-guide .topic-card h3 a { text-decoration: none; color: var(--text-main); }
.pd-guide .topic-card h3 a:hover { text-decoration: underline; }
.pd-guide .topic-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; flex: 1; }
.pd-guide .topic-card-go { align-self: flex-start; font-size: 0.8rem; color: var(--pd-accent); text-decoration: none; font-weight: 600; }
.pd-guide .topic-card-go:hover { text-decoration: underline; }
.pd-guide .topic-section { margin-top: 24px; }
.pd-guide .topic-intro { color: var(--text-muted); max-width: 760px; }
.pd-guide .topic-faq-item { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.pd-guide .topic-faq-item h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pd-guide .topic-faq-item p { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .pd-guide .topic-problems { columns: 1; }
  .pd-wf-open { margin-left: 0; }
}


/* ===== assets/workflow-pipeline-view.css ===== */
/* assets/workflow-pipeline-view.css — shared live workflow run view */
.wfpl-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; padding:6px 2px 10px; }
.wfpl-card { flex:0 0 auto; width:220px; border:1px solid var(--border,#2a2f3a); border-radius:10px; padding:10px 12px; background:var(--bg-elevated,#161a22); cursor:pointer; transition:border-color .15s ease; }
.wfpl-card:focus-visible { outline:2px solid var(--accent,#6ea8fe); outline-offset:2px; }
.wfpl-card[data-status="running"] { border-color:var(--accent,#6ea8fe); }
.wfpl-card[data-status="error"] { border-color:var(--danger,#e5534b); }
.wfpl-card[data-status="warn"] { border-color:var(--warning,#d29922); }
.wfpl-card[data-status="ok"] { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, transparent); }
.wfpl-card[data-status="skipped"] { opacity:.55; }
.wfpl-card-head { display:flex; align-items:center; gap:8px; }
.wfpl-tool { font-weight:600; color:var(--text,#e6edf3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfpl-dur { margin-left:auto; font-size:.72rem; color:var(--muted,#8b949e); }
.wfpl-dot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.72rem; color:#fff; background:var(--muted,#8b949e); }
.wfpl-dot[data-status="ok"] { background:var(--success,#3fb950); }
.wfpl-dot[data-status="warn"] { background:var(--warning,#d29922); }
.wfpl-dot[data-status="error"] { background:var(--danger,#e5534b); }
.wfpl-dot[data-status="running"] { background:var(--accent,#6ea8fe); animation:wfpl-pulse 1s ease-in-out infinite; }
.wfpl-dot[data-status="pending"], .wfpl-dot[data-status="skipped"] { background:var(--muted,#8b949e); }
@keyframes wfpl-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.wfpl-verdict { margin-top:6px; font-size:.82rem; color:var(--text,#e6edf3); }
.wfpl-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wfpl-chip { font-size:.7rem; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--muted,#8b949e) 22%, transparent); color:var(--text,#e6edf3); }
.wfpl-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning,#d29922) 22%, transparent); color:var(--warning,#d29922); }
.wfpl-chip[data-tone="danger"] { background:color-mix(in srgb, var(--danger,#e5534b) 22%, transparent); color:var(--danger,#e5534b); }
.wfpl-preview { margin:8px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--muted,#8b949e); white-space:pre-wrap; word-break:break-word; max-height:6.5em; overflow:hidden; }
.wfpl-detail { margin-top:8px; border-top:1px dashed var(--border,#2a2f3a); padding-top:8px; }
.wfpl-io-label { font-size:.7rem; color:var(--muted,#8b949e); text-transform:uppercase; letter-spacing:.03em; }
.wfpl-detail pre { margin:2px 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--text,#e6edf3); max-height:220px; overflow:auto; }
.wfpl-copy { font-size:.72rem; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#2a2f3a); background:transparent; color:var(--text,#e6edf3); cursor:pointer; }
.wfpl-arrow { align-self:center; color:var(--muted,#8b949e); flex:0 0 auto; }
.wfpl-card[data-expanded="true"] { width:300px; }
@media (max-width:720px) {
  .wfpl-track { flex-direction:column; overflow-x:visible; }
  .wfpl-card, .wfpl-card[data-expanded="true"] { width:auto; }
  .wfpl-arrow { transform:rotate(90deg); }
}


/* ===== assets/checklists/checklist.css ===== */
/* assets/checklists/checklist.css
 * Scoped under .ddt-checklist so styles don't leak into the rest of the site.
 */
.ddt-checklist {
  display: block;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #ffffff);
  margin: 16px 0;
}
.ddt-cl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  padding-bottom: 10px;
}
.ddt-cl-progress { font-weight: 600; color: var(--muted, #4b5563); }
.ddt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ddt-cl-actions button {
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface-alt, #f9fafb);
  color: var(--text, #111827);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.ddt-cl-actions button:hover { background: var(--surface-hover, #f3f4f6); }
.ddt-cl-persist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ddt-cl-item {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
}
.ddt-cl-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ddt-cl-item .ddt-cl-label { font-weight: 500; }
.ddt-cl-help { margin: 4px 0 8px 24px; color: var(--muted, #4b5563); font-size: 0.875rem; }
.ddt-cl-note {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
  margin-left: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
}
.ddt-cl-tool-link {
  display: inline-block;
  margin-left: 24px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #111827);
  font-size: 0.875rem;
}
.ddt-cl-tool-link:hover { background: var(--surface-hover, #e5e7eb); }
.ddt-cl-runner { margin: 8px 0 0 24px; }
.ddt-cl-runner summary { cursor: pointer; font-size: 0.875rem; color: var(--muted, #4b5563); }
.ddt-cl-runner textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 8px 0;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.ddt-cl-runner button {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-alt, #f9fafb);
  cursor: pointer;
}
.ddt-cl-runner button[disabled] { opacity: 0.5; cursor: not-allowed; }
.ddt-cl-evidence {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-evidence[data-status="pass"] { color: var(--success, #047857); font-weight: 600; }
.ddt-cl-evidence[data-status="fail"] { color: var(--danger, #b91c1c); font-weight: 600; }
.ddt-cl-evidence[data-status="error"] { color: var(--warning, #92400e); }
.ddt-cl-error { color: var(--danger, #b91c1c); padding: 12px; }

@media (max-width: 640px) {
  .ddt-cl-header { flex-direction: column; align-items: flex-start; }
  .ddt-cl-help, .ddt-cl-note, .ddt-cl-tool-link, .ddt-cl-runner { margin-left: 0; }
}

.ddt-cl-intro { max-width: 760px; margin: 0 0 16px; }
.ddt-cl-intro h1 { margin: 0 0 8px; }
.ddt-cl-intro .ddt-cl-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 1rem; }
.ddt-cl-intro h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-intro ul { margin: 0 0 8px 20px; padding: 0; color: var(--muted, #4b5563); font-size: 0.95rem; }

.ddt-cl-explain { max-width: 760px; margin: 24px 0 0; color: var(--text, #111827); font-size: 0.95rem; }
.ddt-cl-explain h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-explain p { margin: 0 0 8px; }
.ddt-cl-explain ul { margin: 0 0 8px 20px; padding: 0; }

[data-theme="dark"] .ddt-checklist,
[data-theme="dark"] .ddt-cl-item { background: var(--surface, #1f2937); }
[data-theme="dark"] .ddt-cl-actions button,
[data-theme="dark"] .ddt-cl-runner button,
[data-theme="dark"] .ddt-cl-tool-link { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-cl-intro .ddt-cl-lede,
[data-theme="dark"] .ddt-cl-intro ul { color: var(--muted, #9ca3af); }

/* Auto-captured tool output */
.ddt-cl-saved-hint { font-size: 0.78rem; color: var(--muted, #6b7280); }
.ddt-cl-output {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="dark"] .ddt-cl-output { background: var(--surface-alt, #111827); color: var(--text, #e5e7eb); }

/* ---- Evidence pack panel ---- */
.ddt-cl-evidence-pack {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}
.ddt-ep-title { margin: 0 0 4px; font-size: 1.1rem; }
.ddt-ep-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 0.9rem; }
.ddt-ep-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ddt-ep-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted, #4b5563);
  flex: 1 1 200px;
}
.ddt-ep-input {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; font-weight: 400;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-gate {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-ep-gate[data-status="blocked"] { border-color: var(--danger, #b91c1c); background: rgba(185, 28, 28, 0.06); }
.ddt-ep-gate[data-status="clean"] { border-color: var(--success, #047857); background: rgba(4, 120, 87, 0.06); }
.ddt-ep-gate[data-status="warn"] { border-color: var(--warning, #92400e); }
.ddt-ep-gate-msg { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ddt-ep-gate-list { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 0.8rem; color: var(--muted, #4b5563); }
.ddt-ep-gate-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.ddt-ep-gate-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddt-ep-sev { text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--danger, #b91c1c); }
.ddt-ep-gate-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ddt-ep-gate-btns button {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 5px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-redact { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.ddt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddt-ep-btn {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
.ddt-ep-btn:hover:not([disabled]) { background: var(--surface-hover, #f3f4f6); }
.ddt-ep-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ddt-ep-result { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted, #4b5563); word-break: break-all; }
.ddt-ep-share-row { display: flex; gap: 8px; margin-top: 8px; }
.ddt-ep-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-share-copy {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 6px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
[data-theme="dark"] .ddt-ep-input,
[data-theme="dark"] .ddt-ep-btn,
[data-theme="dark"] .ddt-ep-gate-btns button,
[data-theme="dark"] .ddt-ep-share-input,
[data-theme="dark"] .ddt-ep-share-copy { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-ep-gate { background: var(--surface-alt, #111827); }

/* ---- Shared (received) evidence pack ---- */
.ddt-shared-pack {
  border: 1px solid var(--border, #d1d5db);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 10px; padding: 16px; margin: 0 0 20px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-shared-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ddt-shared-integrity { font-size: 0.8rem; font-weight: 700; }
.ddt-shared-integrity[data-ok="yes"] { color: var(--success, #047857); }
.ddt-shared-integrity[data-ok="no"] { color: var(--danger, #b91c1c); }
.ddt-shared-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-meta { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ddt-shared-item { border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.ddt-shared-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.ddt-shared-item[data-status="pass"] .ddt-shared-badge, .ddt-shared-item[data-status="done"] .ddt-shared-badge { color: var(--success, #047857); }
.ddt-shared-item[data-status="fail"] .ddt-shared-badge { color: var(--danger, #b91c1c); }
.ddt-shared-item[data-status="pending"] .ddt-shared-badge { color: var(--muted, #6b7280); }
.ddt-shared-label { font-weight: 500; }
.ddt-shared-verdict, .ddt-shared-note-item { font-size: 0.8rem; color: var(--muted, #4b5563); margin-top: 4px; }
.ddt-shared-hash { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted, #6b7280); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-theme="dark"] .ddt-shared-pack { background: var(--surface-alt, #111827); }
[data-theme="dark"] .ddt-shared-item { background: var(--surface, #1f2937); }


/* ===== assets/persona-dashboard.css ===== */
/* assets/persona-dashboard.css
 * Interactive persona dashboard: instant-launch tool cards, inline workflow
 * runner, and live checklist progress. Direct-linked from persona pages
 * (not bundled), same as ddt-tool-page.css. All behaviour is client-side.
 */

.pd-dash {
  --pd-accent: var(--rd-accent-cyan, #00d4ff);
  margin: 8px 0 28px;
}

.pd-intro {
  color: var(--text-muted);
  max-width: 760px;
  margin: 4px 0 20px;
}

.pd-sec {
  margin-top: 30px;
}

.pd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pd-sec-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pd-sec-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ----- Instant-launch tool grid ------------------------------------ */

.pd-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tool-item {
  min-width: 0;
  list-style: none;
}

.pd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tool:hover,
.pd-tool:focus-visible {
  border-color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px var(--pd-accent);
  outline: none;
}

.pd-tool:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-tool-name {
  font-weight: 650;
  font-size: 0.96rem;
}

.pd-tool-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.pd-key {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  font: 600 0.74rem/1 var(--font-mono, ui-monospace, monospace);
}

.pd-tool:hover .pd-key,
.pd-tool:focus-visible .pd-key {
  color: var(--pd-accent);
  border-color: var(--pd-accent);
}

/* ----- Inline workflow runner -------------------------------------- */

.pd-workflows {
  display: grid;
  gap: 16px;
}

.pd-wf {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 16px;
}

.pd-wf-head {
  margin-bottom: 10px;
}

.pd-wf-title {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pd-wf-desc {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pd-wf-steps {
  display: inline-block;
  font: 600 0.74rem/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--pd-accent);
  word-break: break-word;
}

.pd-wf-inputlabel {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pd-wf-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg-base, #0d1117));
  color: var(--text-main);
  font: 0.85rem/1.45 var(--font-mono, ui-monospace, monospace);
}

.pd-wf-input:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -1px;
  border-color: var(--pd-accent);
}

.pd-wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-wf-run {
  border: 1px solid var(--pd-accent);
  background: var(--pd-accent);
  color: #05070d;
  font-weight: 650;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

.pd-wf-run:hover { filter: brightness(1.08); }
.pd-wf-run:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-wf-sample {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

.pd-wf-sample:hover { border-color: var(--pd-accent); }

.pd-wf-open {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
}

.pd-wf-open:hover { text-decoration: underline; }

.pd-wf-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pd-wf-status[data-tone="success"] { color: var(--success, #10b981); }
.pd-wf-status[data-tone="error"] { color: var(--danger, #ef4444); }

.pd-wf-pipeline {
  margin-top: 12px;
}

.pd-wf-pipeline:empty { display: none; }

/* ----- Checklists --------------------------------------------------- */

.pd-checklists {
  display: grid;
  gap: 16px;
}

.pd-checklist-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pd-checklist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pd-checklist-topbar h3 {
  margin: 0;
  font-size: 0.98rem;
}

.pd-checklist-topbar h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.pd-checklist-topbar h3 a:hover { text-decoration: underline; }

.pd-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pd-progress-count {
  font: 600 0.78rem/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
}

.pd-progress-bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.pd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pd-accent);
  transition: width 0.3s ease;
}

.pd-checklist-card .ddt-checklist {
  padding: 4px 12px 12px;
}

/* ----- Collapsed SEO accordion ------------------------------------- */

.pd-guide {
  margin-top: 26px;
}

.pd-guide .topic-problems { columns: 2; column-gap: 28px; max-width: 760px; }
.pd-guide .topic-problems li { margin-bottom: 6px; }
.pd-guide .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 4px;
}
.pd-guide .topic-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-guide .topic-card h3 { margin: 0; font-size: 1rem; }
.pd-guide .topic-card h3 a { text-decoration: none; color: var(--text-main); }
.pd-guide .topic-card h3 a:hover { text-decoration: underline; }
.pd-guide .topic-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; flex: 1; }
.pd-guide .topic-card-go { align-self: flex-start; font-size: 0.8rem; color: var(--pd-accent); text-decoration: none; font-weight: 600; }
.pd-guide .topic-card-go:hover { text-decoration: underline; }
.pd-guide .topic-section { margin-top: 24px; }
.pd-guide .topic-intro { color: var(--text-muted); max-width: 760px; }
.pd-guide .topic-faq-item { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.pd-guide .topic-faq-item h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pd-guide .topic-faq-item p { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .pd-guide .topic-problems { columns: 1; }
  .pd-wf-open { margin-left: 0; }
}


/* ===== assets/workflow-pipeline-view.css ===== */
/* assets/workflow-pipeline-view.css — shared live workflow run view */
.wfpl-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; padding:6px 2px 10px; }
.wfpl-card { flex:0 0 auto; width:220px; border:1px solid var(--border,#2a2f3a); border-radius:10px; padding:10px 12px; background:var(--bg-elevated,#161a22); cursor:pointer; transition:border-color .15s ease; }
.wfpl-card:focus-visible { outline:2px solid var(--accent,#6ea8fe); outline-offset:2px; }
.wfpl-card[data-status="running"] { border-color:var(--accent,#6ea8fe); }
.wfpl-card[data-status="error"] { border-color:var(--danger,#e5534b); }
.wfpl-card[data-status="warn"] { border-color:var(--warning,#d29922); }
.wfpl-card[data-status="ok"] { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, transparent); }
.wfpl-card[data-status="skipped"] { opacity:.55; }
.wfpl-card-head { display:flex; align-items:center; gap:8px; }
.wfpl-tool { font-weight:600; color:var(--text,#e6edf3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfpl-dur { margin-left:auto; font-size:.72rem; color:var(--muted,#8b949e); }
.wfpl-dot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.72rem; color:#fff; background:var(--muted,#8b949e); }
.wfpl-dot[data-status="ok"] { background:var(--success,#3fb950); }
.wfpl-dot[data-status="warn"] { background:var(--warning,#d29922); }
.wfpl-dot[data-status="error"] { background:var(--danger,#e5534b); }
.wfpl-dot[data-status="running"] { background:var(--accent,#6ea8fe); animation:wfpl-pulse 1s ease-in-out infinite; }
.wfpl-dot[data-status="pending"], .wfpl-dot[data-status="skipped"] { background:var(--muted,#8b949e); }
@keyframes wfpl-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.wfpl-verdict { margin-top:6px; font-size:.82rem; color:var(--text,#e6edf3); }
.wfpl-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wfpl-chip { font-size:.7rem; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--muted,#8b949e) 22%, transparent); color:var(--text,#e6edf3); }
.wfpl-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning,#d29922) 22%, transparent); color:var(--warning,#d29922); }
.wfpl-chip[data-tone="danger"] { background:color-mix(in srgb, var(--danger,#e5534b) 22%, transparent); color:var(--danger,#e5534b); }
.wfpl-preview { margin:8px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--muted,#8b949e); white-space:pre-wrap; word-break:break-word; max-height:6.5em; overflow:hidden; }
.wfpl-detail { margin-top:8px; border-top:1px dashed var(--border,#2a2f3a); padding-top:8px; }
.wfpl-io-label { font-size:.7rem; color:var(--muted,#8b949e); text-transform:uppercase; letter-spacing:.03em; }
.wfpl-detail pre { margin:2px 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--text,#e6edf3); max-height:220px; overflow:auto; }
.wfpl-copy { font-size:.72rem; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#2a2f3a); background:transparent; color:var(--text,#e6edf3); cursor:pointer; }
.wfpl-arrow { align-self:center; color:var(--muted,#8b949e); flex:0 0 auto; }
.wfpl-card[data-expanded="true"] { width:300px; }
@media (max-width:720px) {
  .wfpl-track { flex-direction:column; overflow-x:visible; }
  .wfpl-card, .wfpl-card[data-expanded="true"] { width:auto; }
  .wfpl-arrow { transform:rotate(90deg); }
}


/* ===== assets/checklists/checklist.css ===== */
/* assets/checklists/checklist.css
 * Scoped under .ddt-checklist so styles don't leak into the rest of the site.
 */
.ddt-checklist {
  display: block;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #ffffff);
  margin: 16px 0;
}
.ddt-cl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  padding-bottom: 10px;
}
.ddt-cl-progress { font-weight: 600; color: var(--muted, #4b5563); }
.ddt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ddt-cl-actions button {
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface-alt, #f9fafb);
  color: var(--text, #111827);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.ddt-cl-actions button:hover { background: var(--surface-hover, #f3f4f6); }
.ddt-cl-persist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ddt-cl-item {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
}
.ddt-cl-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ddt-cl-item .ddt-cl-label { font-weight: 500; }
.ddt-cl-help { margin: 4px 0 8px 24px; color: var(--muted, #4b5563); font-size: 0.875rem; }
.ddt-cl-note {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
  margin-left: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
}
.ddt-cl-tool-link {
  display: inline-block;
  margin-left: 24px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #111827);
  font-size: 0.875rem;
}
.ddt-cl-tool-link:hover { background: var(--surface-hover, #e5e7eb); }
.ddt-cl-runner { margin: 8px 0 0 24px; }
.ddt-cl-runner summary { cursor: pointer; font-size: 0.875rem; color: var(--muted, #4b5563); }
.ddt-cl-runner textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 8px 0;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.ddt-cl-runner button {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-alt, #f9fafb);
  cursor: pointer;
}
.ddt-cl-runner button[disabled] { opacity: 0.5; cursor: not-allowed; }
.ddt-cl-evidence {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-evidence[data-status="pass"] { color: var(--success, #047857); font-weight: 600; }
.ddt-cl-evidence[data-status="fail"] { color: var(--danger, #b91c1c); font-weight: 600; }
.ddt-cl-evidence[data-status="error"] { color: var(--warning, #92400e); }
.ddt-cl-error { color: var(--danger, #b91c1c); padding: 12px; }

@media (max-width: 640px) {
  .ddt-cl-header { flex-direction: column; align-items: flex-start; }
  .ddt-cl-help, .ddt-cl-note, .ddt-cl-tool-link, .ddt-cl-runner { margin-left: 0; }
}

.ddt-cl-intro { max-width: 760px; margin: 0 0 16px; }
.ddt-cl-intro h1 { margin: 0 0 8px; }
.ddt-cl-intro .ddt-cl-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 1rem; }
.ddt-cl-intro h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-intro ul { margin: 0 0 8px 20px; padding: 0; color: var(--muted, #4b5563); font-size: 0.95rem; }

.ddt-cl-explain { max-width: 760px; margin: 24px 0 0; color: var(--text, #111827); font-size: 0.95rem; }
.ddt-cl-explain h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-explain p { margin: 0 0 8px; }
.ddt-cl-explain ul { margin: 0 0 8px 20px; padding: 0; }

[data-theme="dark"] .ddt-checklist,
[data-theme="dark"] .ddt-cl-item { background: var(--surface, #1f2937); }
[data-theme="dark"] .ddt-cl-actions button,
[data-theme="dark"] .ddt-cl-runner button,
[data-theme="dark"] .ddt-cl-tool-link { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-cl-intro .ddt-cl-lede,
[data-theme="dark"] .ddt-cl-intro ul { color: var(--muted, #9ca3af); }

/* Auto-captured tool output */
.ddt-cl-saved-hint { font-size: 0.78rem; color: var(--muted, #6b7280); }
.ddt-cl-output {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="dark"] .ddt-cl-output { background: var(--surface-alt, #111827); color: var(--text, #e5e7eb); }

/* ---- Evidence pack panel ---- */
.ddt-cl-evidence-pack {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}
.ddt-ep-title { margin: 0 0 4px; font-size: 1.1rem; }
.ddt-ep-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 0.9rem; }
.ddt-ep-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ddt-ep-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted, #4b5563);
  flex: 1 1 200px;
}
.ddt-ep-input {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; font-weight: 400;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-gate {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-ep-gate[data-status="blocked"] { border-color: var(--danger, #b91c1c); background: rgba(185, 28, 28, 0.06); }
.ddt-ep-gate[data-status="clean"] { border-color: var(--success, #047857); background: rgba(4, 120, 87, 0.06); }
.ddt-ep-gate[data-status="warn"] { border-color: var(--warning, #92400e); }
.ddt-ep-gate-msg { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ddt-ep-gate-list { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 0.8rem; color: var(--muted, #4b5563); }
.ddt-ep-gate-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.ddt-ep-gate-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddt-ep-sev { text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--danger, #b91c1c); }
.ddt-ep-gate-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ddt-ep-gate-btns button {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 5px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-redact { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.ddt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddt-ep-btn {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
.ddt-ep-btn:hover:not([disabled]) { background: var(--surface-hover, #f3f4f6); }
.ddt-ep-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ddt-ep-result { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted, #4b5563); word-break: break-all; }
.ddt-ep-share-row { display: flex; gap: 8px; margin-top: 8px; }
.ddt-ep-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-share-copy {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 6px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
[data-theme="dark"] .ddt-ep-input,
[data-theme="dark"] .ddt-ep-btn,
[data-theme="dark"] .ddt-ep-gate-btns button,
[data-theme="dark"] .ddt-ep-share-input,
[data-theme="dark"] .ddt-ep-share-copy { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-ep-gate { background: var(--surface-alt, #111827); }

/* ---- Shared (received) evidence pack ---- */
.ddt-shared-pack {
  border: 1px solid var(--border, #d1d5db);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 10px; padding: 16px; margin: 0 0 20px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-shared-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ddt-shared-integrity { font-size: 0.8rem; font-weight: 700; }
.ddt-shared-integrity[data-ok="yes"] { color: var(--success, #047857); }
.ddt-shared-integrity[data-ok="no"] { color: var(--danger, #b91c1c); }
.ddt-shared-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-meta { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ddt-shared-item { border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.ddt-shared-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.ddt-shared-item[data-status="pass"] .ddt-shared-badge, .ddt-shared-item[data-status="done"] .ddt-shared-badge { color: var(--success, #047857); }
.ddt-shared-item[data-status="fail"] .ddt-shared-badge { color: var(--danger, #b91c1c); }
.ddt-shared-item[data-status="pending"] .ddt-shared-badge { color: var(--muted, #6b7280); }
.ddt-shared-label { font-weight: 500; }
.ddt-shared-verdict, .ddt-shared-note-item { font-size: 0.8rem; color: var(--muted, #4b5563); margin-top: 4px; }
.ddt-shared-hash { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted, #6b7280); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-theme="dark"] .ddt-shared-pack { background: var(--surface-alt, #111827); }
[data-theme="dark"] .ddt-shared-item { background: var(--surface, #1f2937); }


/* ===== assets/persona-dashboard.css ===== */
/* assets/persona-dashboard.css
 * Interactive persona dashboard: instant-launch tool cards, inline workflow
 * runner, and live checklist progress. Direct-linked from persona pages
 * (not bundled), same as ddt-tool-page.css. All behaviour is client-side.
 */

.pd-dash {
  --pd-accent: var(--rd-accent-cyan, #00d4ff);
  margin: 8px 0 28px;
}

.pd-intro {
  color: var(--text-muted);
  max-width: 760px;
  margin: 4px 0 20px;
}

.pd-sec {
  margin-top: 30px;
}

.pd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pd-sec-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pd-sec-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ----- Instant-launch tool grid ------------------------------------ */

.pd-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tool-item {
  min-width: 0;
  list-style: none;
}

.pd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tool:hover,
.pd-tool:focus-visible {
  border-color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px var(--pd-accent);
  outline: none;
}

.pd-tool:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-tool-name {
  font-weight: 650;
  font-size: 0.96rem;
}

.pd-tool-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.pd-key {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  font: 600 0.74rem/1 var(--font-mono, ui-monospace, monospace);
}

.pd-tool:hover .pd-key,
.pd-tool:focus-visible .pd-key {
  color: var(--pd-accent);
  border-color: var(--pd-accent);
}

/* ----- Inline workflow runner -------------------------------------- */

.pd-workflows {
  display: grid;
  gap: 16px;
}

.pd-wf {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 16px;
}

.pd-wf-head {
  margin-bottom: 10px;
}

.pd-wf-title {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pd-wf-desc {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pd-wf-steps {
  display: inline-block;
  font: 600 0.74rem/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--pd-accent);
  word-break: break-word;
}

.pd-wf-inputlabel {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pd-wf-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg-base, #0d1117));
  color: var(--text-main);
  font: 0.85rem/1.45 var(--font-mono, ui-monospace, monospace);
}

.pd-wf-input:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -1px;
  border-color: var(--pd-accent);
}

.pd-wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-wf-run {
  border: 1px solid var(--pd-accent);
  background: var(--pd-accent);
  color: #05070d;
  font-weight: 650;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

.pd-wf-run:hover { filter: brightness(1.08); }
.pd-wf-run:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-wf-sample {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

.pd-wf-sample:hover { border-color: var(--pd-accent); }

.pd-wf-open {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
}

.pd-wf-open:hover { text-decoration: underline; }

.pd-wf-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pd-wf-status[data-tone="success"] { color: var(--success, #10b981); }
.pd-wf-status[data-tone="error"] { color: var(--danger, #ef4444); }

.pd-wf-pipeline {
  margin-top: 12px;
}

.pd-wf-pipeline:empty { display: none; }

/* ----- Checklists --------------------------------------------------- */

.pd-checklists {
  display: grid;
  gap: 16px;
}

.pd-checklist-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pd-checklist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pd-checklist-topbar h3 {
  margin: 0;
  font-size: 0.98rem;
}

.pd-checklist-topbar h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.pd-checklist-topbar h3 a:hover { text-decoration: underline; }

.pd-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pd-progress-count {
  font: 600 0.78rem/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
}

.pd-progress-bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.pd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pd-accent);
  transition: width 0.3s ease;
}

.pd-checklist-card .ddt-checklist {
  padding: 4px 12px 12px;
}

/* ----- Collapsed SEO accordion ------------------------------------- */

.pd-guide {
  margin-top: 26px;
}

.pd-guide .topic-problems { columns: 2; column-gap: 28px; max-width: 760px; }
.pd-guide .topic-problems li { margin-bottom: 6px; }
.pd-guide .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 4px;
}
.pd-guide .topic-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-guide .topic-card h3 { margin: 0; font-size: 1rem; }
.pd-guide .topic-card h3 a { text-decoration: none; color: var(--text-main); }
.pd-guide .topic-card h3 a:hover { text-decoration: underline; }
.pd-guide .topic-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; flex: 1; }
.pd-guide .topic-card-go { align-self: flex-start; font-size: 0.8rem; color: var(--pd-accent); text-decoration: none; font-weight: 600; }
.pd-guide .topic-card-go:hover { text-decoration: underline; }
.pd-guide .topic-section { margin-top: 24px; }
.pd-guide .topic-intro { color: var(--text-muted); max-width: 760px; }
.pd-guide .topic-faq-item { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.pd-guide .topic-faq-item h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pd-guide .topic-faq-item p { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .pd-guide .topic-problems { columns: 1; }
  .pd-wf-open { margin-left: 0; }
}


/* ===== assets/workflow-pipeline-view.css ===== */
/* assets/workflow-pipeline-view.css — shared live workflow run view */
.wfpl-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; padding:6px 2px 10px; }
.wfpl-card { flex:0 0 auto; width:220px; border:1px solid var(--border,#2a2f3a); border-radius:10px; padding:10px 12px; background:var(--bg-elevated,#161a22); cursor:pointer; transition:border-color .15s ease; }
.wfpl-card:focus-visible { outline:2px solid var(--accent,#6ea8fe); outline-offset:2px; }
.wfpl-card[data-status="running"] { border-color:var(--accent,#6ea8fe); }
.wfpl-card[data-status="error"] { border-color:var(--danger,#e5534b); }
.wfpl-card[data-status="warn"] { border-color:var(--warning,#d29922); }
.wfpl-card[data-status="ok"] { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, transparent); }
.wfpl-card[data-status="skipped"] { opacity:.55; }
.wfpl-card-head { display:flex; align-items:center; gap:8px; }
.wfpl-tool { font-weight:600; color:var(--text,#e6edf3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfpl-dur { margin-left:auto; font-size:.72rem; color:var(--muted,#8b949e); }
.wfpl-dot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.72rem; color:#fff; background:var(--muted,#8b949e); }
.wfpl-dot[data-status="ok"] { background:var(--success,#3fb950); }
.wfpl-dot[data-status="warn"] { background:var(--warning,#d29922); }
.wfpl-dot[data-status="error"] { background:var(--danger,#e5534b); }
.wfpl-dot[data-status="running"] { background:var(--accent,#6ea8fe); animation:wfpl-pulse 1s ease-in-out infinite; }
.wfpl-dot[data-status="pending"], .wfpl-dot[data-status="skipped"] { background:var(--muted,#8b949e); }
@keyframes wfpl-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.wfpl-verdict { margin-top:6px; font-size:.82rem; color:var(--text,#e6edf3); }
.wfpl-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wfpl-chip { font-size:.7rem; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--muted,#8b949e) 22%, transparent); color:var(--text,#e6edf3); }
.wfpl-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning,#d29922) 22%, transparent); color:var(--warning,#d29922); }
.wfpl-chip[data-tone="danger"] { background:color-mix(in srgb, var(--danger,#e5534b) 22%, transparent); color:var(--danger,#e5534b); }
.wfpl-preview { margin:8px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--muted,#8b949e); white-space:pre-wrap; word-break:break-word; max-height:6.5em; overflow:hidden; }
.wfpl-detail { margin-top:8px; border-top:1px dashed var(--border,#2a2f3a); padding-top:8px; }
.wfpl-io-label { font-size:.7rem; color:var(--muted,#8b949e); text-transform:uppercase; letter-spacing:.03em; }
.wfpl-detail pre { margin:2px 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--text,#e6edf3); max-height:220px; overflow:auto; }
.wfpl-copy { font-size:.72rem; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#2a2f3a); background:transparent; color:var(--text,#e6edf3); cursor:pointer; }
.wfpl-arrow { align-self:center; color:var(--muted,#8b949e); flex:0 0 auto; }
.wfpl-card[data-expanded="true"] { width:300px; }
@media (max-width:720px) {
  .wfpl-track { flex-direction:column; overflow-x:visible; }
  .wfpl-card, .wfpl-card[data-expanded="true"] { width:auto; }
  .wfpl-arrow { transform:rotate(90deg); }
}


/* ===== assets/checklists/checklist.css ===== */
/* assets/checklists/checklist.css
 * Scoped under .ddt-checklist so styles don't leak into the rest of the site.
 */
.ddt-checklist {
  display: block;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #ffffff);
  margin: 16px 0;
}
.ddt-cl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  padding-bottom: 10px;
}
.ddt-cl-progress { font-weight: 600; color: var(--muted, #4b5563); }
.ddt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ddt-cl-actions button {
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface-alt, #f9fafb);
  color: var(--text, #111827);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.ddt-cl-actions button:hover { background: var(--surface-hover, #f3f4f6); }
.ddt-cl-persist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ddt-cl-item {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
}
.ddt-cl-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ddt-cl-item .ddt-cl-label { font-weight: 500; }
.ddt-cl-help { margin: 4px 0 8px 24px; color: var(--muted, #4b5563); font-size: 0.875rem; }
.ddt-cl-note {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
  margin-left: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
}
.ddt-cl-tool-link {
  display: inline-block;
  margin-left: 24px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #111827);
  font-size: 0.875rem;
}
.ddt-cl-tool-link:hover { background: var(--surface-hover, #e5e7eb); }
.ddt-cl-runner { margin: 8px 0 0 24px; }
.ddt-cl-runner summary { cursor: pointer; font-size: 0.875rem; color: var(--muted, #4b5563); }
.ddt-cl-runner textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 8px 0;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.ddt-cl-runner button {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-alt, #f9fafb);
  cursor: pointer;
}
.ddt-cl-runner button[disabled] { opacity: 0.5; cursor: not-allowed; }
.ddt-cl-evidence {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-evidence[data-status="pass"] { color: var(--success, #047857); font-weight: 600; }
.ddt-cl-evidence[data-status="fail"] { color: var(--danger, #b91c1c); font-weight: 600; }
.ddt-cl-evidence[data-status="error"] { color: var(--warning, #92400e); }
.ddt-cl-error { color: var(--danger, #b91c1c); padding: 12px; }

@media (max-width: 640px) {
  .ddt-cl-header { flex-direction: column; align-items: flex-start; }
  .ddt-cl-help, .ddt-cl-note, .ddt-cl-tool-link, .ddt-cl-runner { margin-left: 0; }
}

.ddt-cl-intro { max-width: 760px; margin: 0 0 16px; }
.ddt-cl-intro h1 { margin: 0 0 8px; }
.ddt-cl-intro .ddt-cl-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 1rem; }
.ddt-cl-intro h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-intro ul { margin: 0 0 8px 20px; padding: 0; color: var(--muted, #4b5563); font-size: 0.95rem; }

.ddt-cl-explain { max-width: 760px; margin: 24px 0 0; color: var(--text, #111827); font-size: 0.95rem; }
.ddt-cl-explain h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-explain p { margin: 0 0 8px; }
.ddt-cl-explain ul { margin: 0 0 8px 20px; padding: 0; }

[data-theme="dark"] .ddt-checklist,
[data-theme="dark"] .ddt-cl-item { background: var(--surface, #1f2937); }
[data-theme="dark"] .ddt-cl-actions button,
[data-theme="dark"] .ddt-cl-runner button,
[data-theme="dark"] .ddt-cl-tool-link { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-cl-intro .ddt-cl-lede,
[data-theme="dark"] .ddt-cl-intro ul { color: var(--muted, #9ca3af); }

/* Auto-captured tool output */
.ddt-cl-saved-hint { font-size: 0.78rem; color: var(--muted, #6b7280); }
.ddt-cl-output {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="dark"] .ddt-cl-output { background: var(--surface-alt, #111827); color: var(--text, #e5e7eb); }

/* ---- Evidence pack panel ---- */
.ddt-cl-evidence-pack {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}
.ddt-ep-title { margin: 0 0 4px; font-size: 1.1rem; }
.ddt-ep-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 0.9rem; }
.ddt-ep-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ddt-ep-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted, #4b5563);
  flex: 1 1 200px;
}
.ddt-ep-input {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; font-weight: 400;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-gate {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-ep-gate[data-status="blocked"] { border-color: var(--danger, #b91c1c); background: rgba(185, 28, 28, 0.06); }
.ddt-ep-gate[data-status="clean"] { border-color: var(--success, #047857); background: rgba(4, 120, 87, 0.06); }
.ddt-ep-gate[data-status="warn"] { border-color: var(--warning, #92400e); }
.ddt-ep-gate-msg { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ddt-ep-gate-list { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 0.8rem; color: var(--muted, #4b5563); }
.ddt-ep-gate-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.ddt-ep-gate-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddt-ep-sev { text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--danger, #b91c1c); }
.ddt-ep-gate-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ddt-ep-gate-btns button {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 5px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-redact { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.ddt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddt-ep-btn {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
.ddt-ep-btn:hover:not([disabled]) { background: var(--surface-hover, #f3f4f6); }
.ddt-ep-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ddt-ep-result { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted, #4b5563); word-break: break-all; }
.ddt-ep-share-row { display: flex; gap: 8px; margin-top: 8px; }
.ddt-ep-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-share-copy {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 6px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
[data-theme="dark"] .ddt-ep-input,
[data-theme="dark"] .ddt-ep-btn,
[data-theme="dark"] .ddt-ep-gate-btns button,
[data-theme="dark"] .ddt-ep-share-input,
[data-theme="dark"] .ddt-ep-share-copy { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-ep-gate { background: var(--surface-alt, #111827); }

/* ---- Shared (received) evidence pack ---- */
.ddt-shared-pack {
  border: 1px solid var(--border, #d1d5db);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 10px; padding: 16px; margin: 0 0 20px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-shared-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ddt-shared-integrity { font-size: 0.8rem; font-weight: 700; }
.ddt-shared-integrity[data-ok="yes"] { color: var(--success, #047857); }
.ddt-shared-integrity[data-ok="no"] { color: var(--danger, #b91c1c); }
.ddt-shared-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-meta { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ddt-shared-item { border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.ddt-shared-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.ddt-shared-item[data-status="pass"] .ddt-shared-badge, .ddt-shared-item[data-status="done"] .ddt-shared-badge { color: var(--success, #047857); }
.ddt-shared-item[data-status="fail"] .ddt-shared-badge { color: var(--danger, #b91c1c); }
.ddt-shared-item[data-status="pending"] .ddt-shared-badge { color: var(--muted, #6b7280); }
.ddt-shared-label { font-weight: 500; }
.ddt-shared-verdict, .ddt-shared-note-item { font-size: 0.8rem; color: var(--muted, #4b5563); margin-top: 4px; }
.ddt-shared-hash { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted, #6b7280); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-theme="dark"] .ddt-shared-pack { background: var(--surface-alt, #111827); }
[data-theme="dark"] .ddt-shared-item { background: var(--surface, #1f2937); }


/* ===== assets/persona-dashboard.css ===== */
/* assets/persona-dashboard.css
 * Interactive persona dashboard: instant-launch tool cards, inline workflow
 * runner, and live checklist progress. Direct-linked from persona pages
 * (not bundled), same as ddt-tool-page.css. All behaviour is client-side.
 */

.pd-dash {
  --pd-accent: var(--rd-accent-cyan, #00d4ff);
  margin: 8px 0 28px;
}

.pd-intro {
  color: var(--text-muted);
  max-width: 760px;
  margin: 4px 0 20px;
}

.pd-sec {
  margin-top: 30px;
}

.pd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pd-sec-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pd-sec-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ----- Instant-launch tool grid ------------------------------------ */

.pd-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tool-item {
  min-width: 0;
  list-style: none;
}

.pd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tool:hover,
.pd-tool:focus-visible {
  border-color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px var(--pd-accent);
  outline: none;
}

.pd-tool:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-tool-name {
  font-weight: 650;
  font-size: 0.96rem;
}

.pd-tool-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.pd-key {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  font: 600 0.74rem/1 var(--font-mono, ui-monospace, monospace);
}

.pd-tool:hover .pd-key,
.pd-tool:focus-visible .pd-key {
  color: var(--pd-accent);
  border-color: var(--pd-accent);
}

/* ----- Inline workflow runner -------------------------------------- */

.pd-workflows {
  display: grid;
  gap: 16px;
}

.pd-wf {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 16px;
}

.pd-wf-head {
  margin-bottom: 10px;
}

.pd-wf-title {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pd-wf-desc {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pd-wf-steps {
  display: inline-block;
  font: 600 0.74rem/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--pd-accent);
  word-break: break-word;
}

.pd-wf-inputlabel {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pd-wf-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg-base, #0d1117));
  color: var(--text-main);
  font: 0.85rem/1.45 var(--font-mono, ui-monospace, monospace);
}

.pd-wf-input:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -1px;
  border-color: var(--pd-accent);
}

.pd-wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-wf-run {
  border: 1px solid var(--pd-accent);
  background: var(--pd-accent);
  color: #05070d;
  font-weight: 650;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

.pd-wf-run:hover { filter: brightness(1.08); }
.pd-wf-run:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-wf-sample {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

.pd-wf-sample:hover { border-color: var(--pd-accent); }

.pd-wf-open {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
}

.pd-wf-open:hover { text-decoration: underline; }

.pd-wf-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pd-wf-status[data-tone="success"] { color: var(--success, #10b981); }
.pd-wf-status[data-tone="error"] { color: var(--danger, #ef4444); }

.pd-wf-pipeline {
  margin-top: 12px;
}

.pd-wf-pipeline:empty { display: none; }

/* ----- Checklists --------------------------------------------------- */

.pd-checklists {
  display: grid;
  gap: 16px;
}

.pd-checklist-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pd-checklist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pd-checklist-topbar h3 {
  margin: 0;
  font-size: 0.98rem;
}

.pd-checklist-topbar h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.pd-checklist-topbar h3 a:hover { text-decoration: underline; }

.pd-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pd-progress-count {
  font: 600 0.78rem/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
}

.pd-progress-bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.pd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pd-accent);
  transition: width 0.3s ease;
}

.pd-checklist-card .ddt-checklist {
  padding: 4px 12px 12px;
}

/* ----- Collapsed SEO accordion ------------------------------------- */

.pd-guide {
  margin-top: 26px;
}

.pd-guide .topic-problems { columns: 2; column-gap: 28px; max-width: 760px; }
.pd-guide .topic-problems li { margin-bottom: 6px; }
.pd-guide .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 4px;
}
.pd-guide .topic-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-guide .topic-card h3 { margin: 0; font-size: 1rem; }
.pd-guide .topic-card h3 a { text-decoration: none; color: var(--text-main); }
.pd-guide .topic-card h3 a:hover { text-decoration: underline; }
.pd-guide .topic-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; flex: 1; }
.pd-guide .topic-card-go { align-self: flex-start; font-size: 0.8rem; color: var(--pd-accent); text-decoration: none; font-weight: 600; }
.pd-guide .topic-card-go:hover { text-decoration: underline; }
.pd-guide .topic-section { margin-top: 24px; }
.pd-guide .topic-intro { color: var(--text-muted); max-width: 760px; }
.pd-guide .topic-faq-item { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.pd-guide .topic-faq-item h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pd-guide .topic-faq-item p { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .pd-guide .topic-problems { columns: 1; }
  .pd-wf-open { margin-left: 0; }
}


/* ===== assets/workflow-pipeline-view.css ===== */
/* assets/workflow-pipeline-view.css — shared live workflow run view */
.wfpl-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; overflow-x:auto; padding:6px 2px 10px; }
.wfpl-card { flex:0 0 auto; width:220px; border:1px solid var(--border,#2a2f3a); border-radius:10px; padding:10px 12px; background:var(--bg-elevated,#161a22); cursor:pointer; transition:border-color .15s ease; }
.wfpl-card:focus-visible { outline:2px solid var(--accent,#6ea8fe); outline-offset:2px; }
.wfpl-card[data-status="running"] { border-color:var(--accent,#6ea8fe); }
.wfpl-card[data-status="error"] { border-color:var(--danger,#e5534b); }
.wfpl-card[data-status="warn"] { border-color:var(--warning,#d29922); }
.wfpl-card[data-status="ok"] { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, transparent); }
.wfpl-card[data-status="skipped"] { opacity:.55; }
.wfpl-card-head { display:flex; align-items:center; gap:8px; }
.wfpl-tool { font-weight:600; color:var(--text,#e6edf3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wfpl-dur { margin-left:auto; font-size:.72rem; color:var(--muted,#8b949e); }
.wfpl-dot { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.72rem; color:#fff; background:var(--muted,#8b949e); }
.wfpl-dot[data-status="ok"] { background:var(--success,#3fb950); }
.wfpl-dot[data-status="warn"] { background:var(--warning,#d29922); }
.wfpl-dot[data-status="error"] { background:var(--danger,#e5534b); }
.wfpl-dot[data-status="running"] { background:var(--accent,#6ea8fe); animation:wfpl-pulse 1s ease-in-out infinite; }
.wfpl-dot[data-status="pending"], .wfpl-dot[data-status="skipped"] { background:var(--muted,#8b949e); }
@keyframes wfpl-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.wfpl-verdict { margin-top:6px; font-size:.82rem; color:var(--text,#e6edf3); }
.wfpl-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wfpl-chip { font-size:.7rem; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, var(--muted,#8b949e) 22%, transparent); color:var(--text,#e6edf3); }
.wfpl-chip[data-tone="warn"] { background:color-mix(in srgb, var(--warning,#d29922) 22%, transparent); color:var(--warning,#d29922); }
.wfpl-chip[data-tone="danger"] { background:color-mix(in srgb, var(--danger,#e5534b) 22%, transparent); color:var(--danger,#e5534b); }
.wfpl-preview { margin:8px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--muted,#8b949e); white-space:pre-wrap; word-break:break-word; max-height:6.5em; overflow:hidden; }
.wfpl-detail { margin-top:8px; border-top:1px dashed var(--border,#2a2f3a); padding-top:8px; }
.wfpl-io-label { font-size:.7rem; color:var(--muted,#8b949e); text-transform:uppercase; letter-spacing:.03em; }
.wfpl-detail pre { margin:2px 0 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; white-space:pre-wrap; word-break:break-word; color:var(--text,#e6edf3); max-height:220px; overflow:auto; }
.wfpl-copy { font-size:.72rem; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#2a2f3a); background:transparent; color:var(--text,#e6edf3); cursor:pointer; }
.wfpl-arrow { align-self:center; color:var(--muted,#8b949e); flex:0 0 auto; }
.wfpl-card[data-expanded="true"] { width:300px; }
@media (max-width:720px) {
  .wfpl-track { flex-direction:column; overflow-x:visible; }
  .wfpl-card, .wfpl-card[data-expanded="true"] { width:auto; }
  .wfpl-arrow { transform:rotate(90deg); }
}


/* ===== assets/checklists/checklist.css ===== */
/* assets/checklists/checklist.css
 * Scoped under .ddt-checklist so styles don't leak into the rest of the site.
 */
.ddt-checklist {
  display: block;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface, #ffffff);
  margin: 16px 0;
}
.ddt-cl-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  padding-bottom: 10px;
}
.ddt-cl-progress { font-weight: 600; color: var(--muted, #4b5563); }
.ddt-cl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ddt-cl-actions button {
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface-alt, #f9fafb);
  color: var(--text, #111827);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.ddt-cl-actions button:hover { background: var(--surface-hover, #f3f4f6); }
.ddt-cl-persist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ddt-cl-item {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
}
.ddt-cl-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.ddt-cl-item .ddt-cl-label { font-weight: 500; }
.ddt-cl-help { margin: 4px 0 8px 24px; color: var(--muted, #4b5563); font-size: 0.875rem; }
.ddt-cl-note {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
  margin-left: 24px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
}
.ddt-cl-tool-link {
  display: inline-block;
  margin-left: 24px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-alt, #f3f4f6);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text, #111827);
  font-size: 0.875rem;
}
.ddt-cl-tool-link:hover { background: var(--surface-hover, #e5e7eb); }
.ddt-cl-runner { margin: 8px 0 0 24px; }
.ddt-cl-runner summary { cursor: pointer; font-size: 0.875rem; color: var(--muted, #4b5563); }
.ddt-cl-runner textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 8px 0;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.ddt-cl-runner button {
  padding: 6px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface-alt, #f9fafb);
  cursor: pointer;
}
.ddt-cl-runner button[disabled] { opacity: 0.5; cursor: not-allowed; }
.ddt-cl-evidence {
  margin-left: 8px;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}
.ddt-cl-evidence[data-status="pass"] { color: var(--success, #047857); font-weight: 600; }
.ddt-cl-evidence[data-status="fail"] { color: var(--danger, #b91c1c); font-weight: 600; }
.ddt-cl-evidence[data-status="error"] { color: var(--warning, #92400e); }
.ddt-cl-error { color: var(--danger, #b91c1c); padding: 12px; }

@media (max-width: 640px) {
  .ddt-cl-header { flex-direction: column; align-items: flex-start; }
  .ddt-cl-help, .ddt-cl-note, .ddt-cl-tool-link, .ddt-cl-runner { margin-left: 0; }
}

.ddt-cl-intro { max-width: 760px; margin: 0 0 16px; }
.ddt-cl-intro h1 { margin: 0 0 8px; }
.ddt-cl-intro .ddt-cl-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 1rem; }
.ddt-cl-intro h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-intro ul { margin: 0 0 8px 20px; padding: 0; color: var(--muted, #4b5563); font-size: 0.95rem; }

.ddt-cl-explain { max-width: 760px; margin: 24px 0 0; color: var(--text, #111827); font-size: 0.95rem; }
.ddt-cl-explain h2 { margin: 16px 0 6px; font-size: 1rem; }
.ddt-cl-explain p { margin: 0 0 8px; }
.ddt-cl-explain ul { margin: 0 0 8px 20px; padding: 0; }

[data-theme="dark"] .ddt-checklist,
[data-theme="dark"] .ddt-cl-item { background: var(--surface, #1f2937); }
[data-theme="dark"] .ddt-cl-actions button,
[data-theme="dark"] .ddt-cl-runner button,
[data-theme="dark"] .ddt-cl-tool-link { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-cl-intro .ddt-cl-lede,
[data-theme="dark"] .ddt-cl-intro ul { color: var(--muted, #9ca3af); }

/* Auto-captured tool output */
.ddt-cl-saved-hint { font-size: 0.78rem; color: var(--muted, #6b7280); }
.ddt-cl-output {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow: auto;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="dark"] .ddt-cl-output { background: var(--surface-alt, #111827); color: var(--text, #e5e7eb); }

/* ---- Evidence pack panel ---- */
.ddt-cl-evidence-pack {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--border-subtle, #e5e7eb);
}
.ddt-ep-title { margin: 0 0 4px; font-size: 1.1rem; }
.ddt-ep-lede { margin: 0 0 12px; color: var(--muted, #4b5563); font-size: 0.9rem; }
.ddt-ep-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ddt-ep-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--muted, #4b5563);
  flex: 1 1 200px;
}
.ddt-ep-input {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; font-weight: 400;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-gate {
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-ep-gate[data-status="blocked"] { border-color: var(--danger, #b91c1c); background: rgba(185, 28, 28, 0.06); }
.ddt-ep-gate[data-status="clean"] { border-color: var(--success, #047857); background: rgba(4, 120, 87, 0.06); }
.ddt-ep-gate[data-status="warn"] { border-color: var(--warning, #92400e); }
.ddt-ep-gate-msg { margin: 0; font-size: 0.875rem; font-weight: 600; }
.ddt-ep-gate-list { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 0.8rem; color: var(--muted, #4b5563); }
.ddt-ep-gate-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.ddt-ep-gate-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddt-ep-sev { text-transform: uppercase; font-size: 0.68rem; font-weight: 700; color: var(--danger, #b91c1c); }
.ddt-ep-gate-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ddt-ep-gate-btns button {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 5px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-redact { border-color: var(--danger, #b91c1c) !important; color: var(--danger, #b91c1c) !important; }
.ddt-ep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddt-ep-btn {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
.ddt-ep-btn:hover:not([disabled]) { background: var(--surface-hover, #f3f4f6); }
.ddt-ep-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ddt-ep-result { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted, #4b5563); word-break: break-all; }
.ddt-ep-share-row { display: flex; gap: 8px; margin-top: 8px; }
.ddt-ep-share-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 6px; padding: 6px 8px; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface, #fff); color: var(--text, #111827);
}
.ddt-ep-share-copy {
  border: 1px solid var(--border, #d1d5db); border-radius: 6px; padding: 6px 12px;
  font-size: 0.82rem; cursor: pointer; background: var(--surface-alt, #f9fafb); color: var(--text, #111827);
}
[data-theme="dark"] .ddt-ep-input,
[data-theme="dark"] .ddt-ep-btn,
[data-theme="dark"] .ddt-ep-gate-btns button,
[data-theme="dark"] .ddt-ep-share-input,
[data-theme="dark"] .ddt-ep-share-copy { background: var(--surface-alt, #374151); color: var(--text, #f3f4f6); }
[data-theme="dark"] .ddt-ep-gate { background: var(--surface-alt, #111827); }

/* ---- Shared (received) evidence pack ---- */
.ddt-shared-pack {
  border: 1px solid var(--border, #d1d5db);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 10px; padding: 16px; margin: 0 0 20px;
  background: var(--surface-alt, #f9fafb);
}
.ddt-shared-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ddt-shared-integrity { font-size: 0.8rem; font-weight: 700; }
.ddt-shared-integrity[data-ok="yes"] { color: var(--success, #047857); }
.ddt-shared-integrity[data-ok="no"] { color: var(--danger, #b91c1c); }
.ddt-shared-note { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-meta { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted, #4b5563); }
.ddt-shared-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ddt-shared-item { border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; padding: 8px 10px; background: var(--surface, #fff); }
.ddt-shared-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.ddt-shared-item[data-status="pass"] .ddt-shared-badge, .ddt-shared-item[data-status="done"] .ddt-shared-badge { color: var(--success, #047857); }
.ddt-shared-item[data-status="fail"] .ddt-shared-badge { color: var(--danger, #b91c1c); }
.ddt-shared-item[data-status="pending"] .ddt-shared-badge { color: var(--muted, #6b7280); }
.ddt-shared-label { font-weight: 500; }
.ddt-shared-verdict, .ddt-shared-note-item { font-size: 0.8rem; color: var(--muted, #4b5563); margin-top: 4px; }
.ddt-shared-hash { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted, #6b7280); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-theme="dark"] .ddt-shared-pack { background: var(--surface-alt, #111827); }
[data-theme="dark"] .ddt-shared-item { background: var(--surface, #1f2937); }


/* ===== assets/persona-dashboard.css ===== */
/* assets/persona-dashboard.css
 * Interactive persona dashboard: instant-launch tool cards, inline workflow
 * runner, and live checklist progress. Direct-linked from persona pages
 * (not bundled), same as ddt-tool-page.css. All behaviour is client-side.
 */

.pd-dash {
  --pd-accent: var(--rd-accent-cyan, #00d4ff);
  margin: 8px 0 28px;
}

.pd-intro {
  color: var(--text-muted);
  max-width: 760px;
  margin: 4px 0 20px;
}

.pd-sec {
  margin-top: 30px;
}

.pd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.pd-sec-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pd-sec-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ----- Instant-launch tool grid ------------------------------------ */

.pd-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tool-item {
  min-width: 0;
  list-style: none;
}

.pd-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-main);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tool:hover,
.pd-tool:focus-visible {
  border-color: var(--pd-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -10px var(--pd-accent);
  outline: none;
}

.pd-tool:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

.pd-tool-name {
  font-weight: 650;
  font-size: 0.96rem;
}

.pd-tool-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

.pd-key {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  background: var(--bg-subtle, var(--bg-elevated));
  color: var(--text-muted);
  font: 600 0.74rem/1 var(--font-mono, ui-monospace, monospace);
}

.pd-tool:hover .pd-key,
.pd-tool:focus-visible .pd-key {
  color: var(--pd-accent);
  border-color: var(--pd-accent);
}

/* ----- Inline workflow runner -------------------------------------- */

.pd-workflows {
  display: grid;
  gap: 16px;
}

.pd-wf {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  padding: 16px;
}

.pd-wf-head {
  margin-bottom: 10px;
}

.pd-wf-title {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pd-wf-desc {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pd-wf-steps {
  display: inline-block;
  font: 600 0.74rem/1.4 var(--font-mono, ui-monospace, monospace);
  color: var(--pd-accent);
  word-break: break-word;
}

.pd-wf-inputlabel {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pd-wf-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--bg-subtle, var(--bg-base, #0d1117));
  color: var(--text-main);
  font: 0.85rem/1.45 var(--font-mono, ui-monospace, monospace);
}

.pd-wf-input:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: -1px;
  border-color: var(--pd-accent);
}

.pd-wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-wf-run {
  border: 1px solid var(--pd-accent);
  background: var(--pd-accent);
  color: #05070d;
  font-weight: 650;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
}

.pd-wf-run:hover { filter: brightness(1.08); }
.pd-wf-run:disabled { opacity: 0.55; cursor: not-allowed; }

.pd-wf-sample {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
}

.pd-wf-sample:hover { border-color: var(--pd-accent); }

.pd-wf-open {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pd-accent);
  text-decoration: none;
}

.pd-wf-open:hover { text-decoration: underline; }

.pd-wf-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pd-wf-status[data-tone="success"] { color: var(--success, #10b981); }
.pd-wf-status[data-tone="error"] { color: var(--danger, #ef4444); }

.pd-wf-pipeline {
  margin-top: 12px;
}

.pd-wf-pipeline:empty { display: none; }

/* ----- Checklists --------------------------------------------------- */

.pd-checklists {
  display: grid;
  gap: 16px;
}

.pd-checklist-card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pd-checklist-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pd-checklist-topbar h3 {
  margin: 0;
  font-size: 0.98rem;
}

.pd-checklist-topbar h3 a {
  color: var(--text-main);
  text-decoration: none;
}

.pd-checklist-topbar h3 a:hover { text-decoration: underline; }

.pd-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pd-progress-count {
  font: 600 0.78rem/1 var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
}

.pd-progress-bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  overflow: hidden;
}

.pd-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--pd-accent);
  transition: width 0.3s ease;
}

.pd-checklist-card .ddt-checklist {
  padding: 4px 12px 12px;
}

/* ----- Collapsed SEO accordion ------------------------------------- */

.pd-guide {
  margin-top: 26px;
}

.pd-guide .topic-problems { columns: 2; column-gap: 28px; max-width: 760px; }
.pd-guide .topic-problems li { margin-bottom: 6px; }
.pd-guide .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 4px;
}
.pd-guide .topic-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-guide .topic-card h3 { margin: 0; font-size: 1rem; }
.pd-guide .topic-card h3 a { text-decoration: none; color: var(--text-main); }
.pd-guide .topic-card h3 a:hover { text-decoration: underline; }
.pd-guide .topic-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; flex: 1; }
.pd-guide .topic-card-go { align-self: flex-start; font-size: 0.8rem; color: var(--pd-accent); text-decoration: none; font-weight: 600; }
.pd-guide .topic-card-go:hover { text-decoration: underline; }
.pd-guide .topic-section { margin-top: 24px; }
.pd-guide .topic-intro { color: var(--text-muted); max-width: 760px; }
.pd-guide .topic-faq-item { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.pd-guide .topic-faq-item h3 { margin: 0 0 4px; font-size: 0.98rem; }
.pd-guide .topic-faq-item p { margin: 0; color: var(--text-muted); }

@media (max-width: 560px) {
  .pd-guide .topic-problems { columns: 1; }
  .pd-wf-open { margin-left: 0; }
}