:root {
  /* ── MetaPaperLens palette ───────────────────────────────────────
     Sibling theme to the Metalens site (metalens.tech) — teal-navy
     primary + soft mint accents on an off-white canvas.  The named
     colour tokens below stay generic (--primary, --bg, …) so existing
     component CSS keeps working unchanged; we just point them at the
     new hex values.  Brand-specific tokens live under --mpl-* and
     can be referenced directly by new components. */
  --mpl-navy-900:  #122740;
  --mpl-navy-800:  #1b485e;
  --mpl-teal-700:  #367380;
  --mpl-teal-300:  #9cbcc4;
  --mpl-teal-200:  #c6dde1;
  --mpl-mint-100:  #e9f4e7;
  --mpl-canvas:    #f5f5f5;

  --primary:       var(--mpl-navy-800);
  --primary-dark:  var(--mpl-navy-900);
  --primary-light: var(--mpl-mint-100);
  /* Sage-green derived from the metalens mint palette
     (#c7ddd1 / #e9f4e7) so the "go" buttons + "done" badges
     read as part of the same teal-navy world, not as a
     foreign Tailwind green. */
  --success:       #4f8a6b;
  --success-dark:  #3d7355;
  --success-light: #dceee2;
  --error:         #c93434;
  --bg:            var(--mpl-canvas);
  --card:          #ffffff;
  --border:        #d6dde2;
  --border-focus:  var(--mpl-teal-300);
  --text:          var(--mpl-navy-900);
  --text-muted:    #5a6b78;
  --shadow-sm: 0 1px 3px rgba(18, 39, 64, 0.06), 0 1px 2px rgba(18, 39, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 39, 64, 0.08);
  --shadow-lg: 0 8px 32px rgba(18, 39, 64, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  /* Body type: DM Sans (cleaner than Space Grotesk, more distinctive
     than Inter).  Mono pair: JetBrains Mono. */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sidebar geometry — wired into the index.html layout shell. */
  --mpl-sidebar-width: 240px;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────── */

body {
  padding-left: var(--mpl-sidebar-width);
}
body.mpl-no-sidebar {
  padding-left: 0;
}
body.mpl-no-sidebar #mplSidebar {
  display: none;
}

/* ── MASEMiner-only chrome ──────────────────────────────────────
   Activated by JS adding ``body.is-maseminer`` whenever the page
   is the dedicated /maseminer entry or the locked-down local
   distribution.  Switches the global palette tokens to the
   navy/teal-blue family from the MASEMiner logo and hides the
   MetaPaperLens app header (the logo PNG inside the hero carries
   the brand identity instead). */
body.is-maseminer {
  /* MASEMiner palette — sampled from the supplied logo:
     deep navy + crisp teal-blue accent, white canvas. */
  --mpl-navy-900:  #122a4d;
  --mpl-navy-800:  #1d4a8c;
  --mpl-teal-700:  #2d8aa3;
  --mpl-teal-300:  #9ec9d5;
  --mpl-teal-200:  #cbe4eb;
  --mpl-mint-100:  #eef6f9;
  --mpl-canvas:    #ffffff;

  /* Re-derive the semantic tokens so any component reading
     --primary / --bg / --text picks up the new colour world. */
  --primary:       #1d4a8c;
  --primary-dark:  #122a4d;
  --primary-light: #eef6f9;
  --bg:            #ffffff;
  --card:          #ffffff;
  --border:        #d3dde8;
  --border-focus:  #5cb8c8;
  --text:          #122a4d;
  --text-muted:    #5a6b85;
}

/* In MASEMiner mode, swap the generic mode-choice cards (Extract /
   Label / Review) on step 1 for the MASEM starter cards (Blank /
   TAS-20).  Step 3's "Generate vs. Manual" choice is already
   hidden by applyPreset() when a MASEM preset is active. */
/* Step 1 has two mutually-exclusive bodies:
   - #modeGrid     : the generic Extract / Label / Review picker
   - #masemStep1   : the MASEM-Extraction label + MetaPaperLens/MASEMiner toggle
   In MetaPaperLens mode the first is visible and the second is hidden;
   in MASEMiner mode the toggle swaps both. */
#masemStep1 { display: none; }
body.is-maseminer #modeGrid   { display: none; }
body.is-maseminer #masemStep1 { display: block; }

/* MetaPaperLens / MASEMiner mode toggle — segmented control inside
   step 1 in MASEMiner mode.  Both segments are anchors so a click
   navigates between the two app paths; the .active state matches the
   current page. */
.mode-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.mode-toggle-btn:hover { color: var(--text); }
.mode-toggle-btn.active {
  background: var(--primary);
  color: #fff;
}
.mode-toggle-btn.active:hover { color: #fff; }
.mode-toggle-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* MASEMiner skips the "Review prompt" step — the builder commits the
   prompt directly into state and lands users on the Upload step.  In
   MetaPaperLens that section is still visible. */
body.is-maseminer #step5 { display: none; }

/* MASEMiner skips step 1 ("Choose your task") entirely — the mode
   itself already implies extraction, and the Direct/Indirect choice
   surfaces in step 3.  Renumbering of the remaining steps (2→1, 3→2,
   6→3) is done in JS once the body class is set. */
body.is-maseminer #step1 { display: none; }

/* Step 2's "Back" button would jump to the now-hidden step 1 — no
   useful target in MASEMiner mode, so hide it.  The page header logo
   (clickable, links to /maseminer) and the mode toggle on step 1 in
   MetaPaperLens mode already cover the "get me back to the start"
   cases. */
body.is-maseminer #step2BackBtn { display: none; }
#masemStep1 .option-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
#masemStep1 .option-card h3 { font-size: 15px; }

/* MASEMiner header handling.

   On the masemLanding hero (which is what /maseminer initially shows)
   the hero carries the brand identity itself — so we hide the global
   <header> while the hero is visible.

   Once the user clicks "Get started" and the flow page opens, JS adds
   ``body.masem-in-flow`` and we reveal the header in its MASEMiner
   form: the mark-only SVG and the appTitle h1 (which JS swaps to read
   "MASEMiner") sit at the top of every flow step. */
body.is-maseminer:not(.masem-in-flow) > .app > header {
  display: none;
}
body.is-maseminer .app {
  padding-top: 24px;
}

/* In MASEMiner mode the single header logo's src is swapped to
   /static/maseminer-mark.svg by app.js — the MASEMiner mark renders
   well at the same 140×140 box used by the MetaPaperLens M.  The
   appTitle h1 is also swapped to "MASEMiner" so the title stays
   visible at the top of every flow step. */
body.is-maseminer header h1 {
  font-size: 30px;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}
body.is-maseminer header #appTagline { display: none; }

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

@media (max-width: 800px) {
  /* Narrow viewports: tuck the sidebar above the main column. */
  body { padding-left: 0; padding-top: 56px; }
  #mplSidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 56px !important;
    flex-direction: row !important;
    align-items: center;
    padding: 8px 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
  }
  #mplSidebar .mpl-sidebar-steps,
  #mplSidebar .mpl-sidebar-footer {
    display: none;
  }
}

/* ── MetaPaperLens left sidebar ─────────────────── */
.mpl-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--mpl-sidebar-width);
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 30;
  font-family: var(--font);
}

.mpl-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mpl-navy-900);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.mpl-sidebar-brand:hover {
  background: var(--mpl-mint-100);
}
.mpl-sidebar-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.mpl-sidebar-wordmark {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.mpl-sidebar-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.mpl-sidebar-step {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}
.mpl-sidebar-step:hover {
  background: var(--mpl-mint-100);
  color: var(--mpl-navy-900);
}
.mpl-sidebar-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--mpl-teal-200);
  color: var(--mpl-navy-900);
}
.mpl-sidebar-step-label {
  font-weight: 500;
}
.mpl-sidebar-step.is-active {
  background: var(--mpl-mint-100);
  color: var(--mpl-navy-900);
}
.mpl-sidebar-step.is-active .mpl-sidebar-step-num {
  background: var(--mpl-navy-800);
  color: #fff;
}
.mpl-sidebar-step.is-done {
  color: var(--mpl-navy-900);
}
.mpl-sidebar-step.is-done .mpl-sidebar-step-num {
  background: var(--mpl-teal-700);
  color: #fff;
}
.mpl-sidebar-step-results .mpl-sidebar-step-num {
  background: transparent;
  color: var(--mpl-teal-700);
  font-size: 14px;
}
.mpl-sidebar-step-results.is-active .mpl-sidebar-step-num {
  background: var(--mpl-navy-800);
  color: #fff;
}

.mpl-sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: 12px;
}
.mpl-sidebar-link {
  display: inline-block;
  color: var(--mpl-teal-700);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
}
.mpl-sidebar-link:hover {
  background: var(--mpl-mint-100);
  text-decoration: underline;
}

/* ── Header ─────────────────────────────────────── */

header {
  padding: 52px 0 36px;
  text-align: center;
}

.header-logo {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 18px;
}
.header-logo-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  transition: opacity 0.15s, transform 0.15s;
}
.header-logo-link:hover { opacity: 0.85; }
.header-logo-link:active { transform: scale(0.98); }
.header-logo-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 8px;
}

header p {
  font-size: 15px;
  color: var(--text-muted);
}


/* ── Cards ───────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
}

.card h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.card .subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ── Option Grid (Step 1) ────────────────────────── */

.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Primary task picker — Extract / Label / Summarise / Workflows.
   2×2 tile layout: gives each card enough breathing room for icon +
   title + description to read clearly, instead of cramming four
   cards into a single row.  Reading order is left→right, top→bottom
   so the disclosure card lands in the bottom-right (natural
   "downstream choice" position).  Collapses to 1-up at narrow
   widths.  Bottom margin so the workflows-disclosure panel below
   isn't crammed against the row above. */
.option-grid-primary {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  .option-grid-primary { grid-template-columns: 1fr; }
}

/* Secondary "work with existing data" row — Extend + Review.  Two
   columns regardless of viewport width (down to mobile where it
   collapses).  Sits below the workflows-disclosure panel so its
   bottom-row position reads as "different category of action". */
.option-grid-secondary {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
  .option-grid-secondary { grid-template-columns: 1fr; }
}

/* Divider between primary (start a new task) and secondary (work
   with existing data) groups.  Horizontal hairline through the middle
   with a small inline label that anchors the meaning — purely visual,
   no click target.  Margin gives it breathing room on both sides. */
.option-grid-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.option-grid-divider::before,
.option-grid-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.option-grid-divider-label {
  white-space: nowrap;
  font-weight: 500;
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 24px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  font-family: var(--font);
}

.option-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

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

.option-icon {
  /* Two-colour SVGs replace the previous emoji.  ``currentColor`` is the
     navy primary; the accent stroke/fill colour is hard-coded as the
     metalens teal so the icons stay on-brand regardless of where the
     card is rendered. */
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mpl-navy-900);
  line-height: 1;
}
.option-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.option-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.option-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* "Load existing data" cards use a horizontal row layout (icon left,
   text right) instead of the centered-stack layout the primary task
   cards use.  Dashed border signals "different category of action".

   They no longer span the full grid row by default — the secondary
   row has two of them side-by-side.  The full-row span is restored
   only when they appear alone in the primary grid (rare; mostly the
   legacy "single load card on a 2-col task grid" case). */
.option-card-load {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 18px 22px;
  gap: 16px;
  border-style: dashed;
}
.option-grid-primary .option-card-load {
  grid-column: 1 / -1;
}

.option-card-load .option-icon { width: 26px; height: 26px; flex-shrink: 0; }
.option-card-load-text { flex: 1; min-width: 0; }
.option-card-load h3 { font-size: 14px; }
.option-card-load p  { font-size: 12.5px; margin-top: 3px; }

/* "Use a pre-built workflow" disclosure card — sits in the primary
   row alongside Extract / Label / Summarise but its click toggles
   the workflows list below instead of navigating.  Visual cues that
   signal the difference: dashed border (it's a chooser, not a
   destination), muted background, chevron in the title that rotates
   on expand.  The all-three-lens UX review explicitly called out
   mixing affordances as the biggest risk in this layout — these
   styles are the mitigation. */
.option-card-disclosure {
  border-style: dashed;
  background: var(--bg);
  position: relative;
}
.option-card-disclosure:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.option-card-disclosure h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.option-card-disclosure .disclosure-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
  display: inline-block;
  transform: translateY(1px);
}
.option-card-disclosure[aria-expanded="true"] .disclosure-chevron {
  transform: translateY(1px) rotate(180deg);
}
.option-card-disclosure[aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* One-line prereq hint above the task picker — the absolute-minimum
   visibility for the API-key requirement, so first-time users don't
   miss it when the full prereq list is folded into "How does this
   work?".  Slim, monochrome, sits right above the option grid. */
.prereq-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 4px 0 14px;
  line-height: 1.5;
}
.prereq-hint a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--primary);
}
.prereq-hint a:hover { border-bottom-style: solid; }

/* API key + Test connection button row */
.api-key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.api-key-row input { flex: 1; min-width: 0; }
.api-key-row .btn  { flex-shrink: 0; white-space: nowrap; }

.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
  word-break: break-word;
}
.conn-status-pending { background: var(--bg);            color: var(--text-muted); border: 1px solid var(--border); }
.conn-status-ok      { background: var(--success-light); color: var(--success);    border: 1px solid #b3ccbb; }
.conn-status-err     { background: #fef2f2;              color: var(--error);      border: 1px solid #fecaca; }

/* "Most common" badge on the recommended landing-screen option */
.option-card-recommended {
  position: relative;
  border-color: var(--primary-light);
}
.option-card-recommended:hover { border-color: var(--primary); }

.option-recommended-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
}

/* Vision-mode request-size warning (step 5) — amber banner shown when one
   or more papers would push the request body past the provider's per-request
   size cap.  Includes a one-click "switch to text extraction" action. */
.size-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 11px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #78350f;
  line-height: 1.55;
}
.size-warning-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
.size-warning-body { flex: 1; }
.size-warning-list {
  margin: 8px 0 4px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  color: #92400e;
}
.size-warning-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.size-warning-note { font-size: 12px; color: #92400e; }

/* Pre-extraction cost estimate (step 5) */
.cost-estimate {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
.cost-est-icon {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.cost-est-note {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* "You'll need" prerequisites strip — quick orientation for first-time users */
.prereq-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  margin: 14px 0 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-muted);
}
.prereq-title  { font-weight: 600; color: var(--text); }
.prereq-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.prereq-list li { margin: 1px 0; }
/* Back-compat for any pages still using the inline span layout. */
.prereq-item   { white-space: nowrap; }
.prereq-sep    { opacity: 0.5; }

/* Back row inside the JSON upload panel */
.panel-back-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.panel-back-row h2 { margin: 0; }

/* Step 6 header with "Edit API key" button */
.step6-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.edit-setup-btn {
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.edit-setup-btn:hover { background: var(--bg); color: var(--text); border-color: var(--text-muted); }

/* Error panel shown in resultDisplay when a paper fails */
.paper-error-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.paper-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fee2e2;
  color: var(--error);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paper-error-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.paper-error-msg {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}

.error-response-details {
  width: 100%;
  max-width: 520px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.error-response-details summary {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.error-response-details summary::-webkit-details-marker { display: none; }

.error-response-pre {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  background: #fff;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

/* ── Forms ───────────────────────────────────────── */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
  letter-spacing: 0.1px;
}

.form-group .optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

.form-group select { cursor: pointer; }

.form-group small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.provider-warning {
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 10px 13px;
  line-height: 1.55;
  margin: 0;
}

.provider-info {
  /* Was Tailwind sky-blue; switched to the metalens teal-navy
     family to match the info-box and the rest of the brand chrome. */
  font-size: 13px;
  color: var(--mpl-navy-800);
  background: #e6f0f3;
  border: 1px solid var(--mpl-teal-300);
  border-radius: 6px;
  padding: 10px 13px;
  line-height: 1.55;
  margin: 0;
}

/* ── Info box (step 1 how-it-works) ─────────────── */

.info-box {
  /* Was sky-blue Tailwind tints; switched to the metalens
     teal-navy family so the callout matches the rest of the
     brand chrome instead of reading as a foreign blue. */
  background: #e6f0f3;
  border: 1px solid var(--mpl-teal-300);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.info-box summary {
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mpl-navy-800);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.info-box summary::-webkit-details-marker { display: none; }
.info-box summary:hover { background: #d4e6eb; }

.info-box-body {
  padding: 4px 15px 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-box-body p { margin: 0; }

/* ── JSON load panel ─────────────────────────────── */

.json-format-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.json-format-info p { margin: 0; }
.json-format-info code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 12px;
  background: var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}
.json-format-evidence-note { margin-top: 10px !important; color: var(--text-muted); }

.json-format-example {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.json-format-example summary {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.json-format-example summary::-webkit-details-marker { display: none; }
.json-format-example summary:hover { background: var(--bg); }

.json-format-pre {
  padding: 12px 14px;
  margin: 0;
  font-size: 11.5px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: #f8fafc;
  color: var(--text);
  border-top: 1px solid var(--border);
}

.json-req-list {
  margin: 10px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.json-req-list li { line-height: 1.55; }

.json-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.json-upload-section {}
.json-upload-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.json-upload-required {
  color: var(--error);
  font-weight: 500;
  margin-left: 4px;
}
.json-upload-optional {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

.json-drop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.json-drop-row.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.json-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.json-ready-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--success-light);
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 4px;
}
.json-ready-text {
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}

/* ── Edit hint ───────────────────────────────────── */

.edit-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--primary-dark);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--primary-light);
  border: 1px solid #bfdbfe;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.edit-hint::before {
  content: "✎";
  font-size: 15px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ── Evidence warning banner ─────────────────────── */

.evidence-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.55;
}
.evidence-warning-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.evidence-warning code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: #fef3c7;
  border-radius: 3px;
  padding: 1px 4px;
}

/* Softer info-style notice for the results panel — used when extraction
   succeeded but page-highlighting couldn't be wired up. The data still
   renders normally; this is just a quiet aside. */
.evidence-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  border-radius: var(--radius-sm);
  padding: 8px 10px 8px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}

/* Re-upload PDFs prompt on the results page — shown when the server's
   in-memory page-image cache has been wiped (e.g. after a Fly restart)
   and the user is reviewing an older batch.  Layout mirrors the
   evidence-notice card but adds a drop zone on the right. */
.reupload-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}
.reupload-notice .reupload-text {
  flex: 1 1 320px;
  min-width: 0;
}
.reupload-notice .reupload-text strong { display: block; margin-bottom: 2px; color: #713f12; }
.reupload-notice .reupload-drop {
  flex: 0 0 auto;
}
.evidence-notice-icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; opacity: 0.75; }
.evidence-notice-body { flex: 1; }
.evidence-notice-body code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11px;
  background: #e2e8f0;
  border-radius: 3px;
  padding: 1px 4px;
}
.evidence-notice-body .btn { margin-top: 6px; }
.evidence-notice-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
  margin: -2px -2px 0 4px;
}
.evidence-notice-close:hover { color: #475569; }

/* Shown above the page image when the current page has no text layer.
   Sits between the image and the page nav so the user immediately sees
   why the overlay is empty. */
.scanned-page-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #78350f;
}
.scanned-page-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }

/* Per-file badge in the upload list — surfaced via the upfront /api/check-pdf
   probe so the user knows what to expect before extraction runs. */
.probe-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 4px;
}
.probe-badge.probe-loading { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.probe-badge.probe-text    { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.probe-badge.probe-scanned { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.probe-badge.probe-mixed   { background: #fef3c7; border-color: #fde68a; color: #78350f; }
.probe-badge.probe-unknown { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }

/* Banner shown above the file list when any selected PDF is image-only.
   Two intensities — soft (informational) and hard (text-only model picked
   but the file is a scan, so extraction itself will fail). */
.probe-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
}
.probe-warning.warning-soft {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
}
.probe-warning.warning-hard {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.probe-warning-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; opacity: 0.85; }

/* Panel shown when the model response can't be parsed into structured
   entries — gives the user a warning, the raw response, and a button to
   start filling in values manually. */
.extraction-failed-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-md);
}
.extraction-failed-warn {
  font-size: 13.5px;
  line-height: 1.55;
  color: #7c2d12;
}
.extraction-failed-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.extraction-raw-details {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
}
.extraction-raw-details summary {
  cursor: pointer;
  color: #92400e;
  font-weight: 500;
  user-select: none;
}
/* "Re-running this paper…" notice shown in the result column while the
   new job is in flight.  The right-hand page panel is intentionally
   untouched, so the user keeps their PDF context. */
.rerun-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13.5px;
}
.rerun-spinner {
  display: inline-block;
  font-size: 18px;
  color: var(--primary);
  animation: rerun-spin 1.2s linear infinite;
}
@keyframes rerun-spin { to { transform: rotate(360deg); } }

.extraction-raw-details .raw-text {
  margin-top: 8px;
  max-height: 360px;
  overflow: auto;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 10px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #44403c;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Buttons ─────────────────────────────────────── */

.btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 2px 8px rgba(37,99,235,0.3); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-dark); }

.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { background: var(--bg); }

/* ── Loading (Step 4) ────────────────────────────── */

.card-center {
  text-align: center;
  padding: 60px 40px;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 0 auto 24px;
}

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

/* ── Prompt Display (Step 5) ─────────────────────── */

.prompt-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 20px 0 24px;
}

.prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.model-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  letter-spacing: 0.2px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.copy-btn:hover { background: var(--bg); color: var(--text); }
.copy-btn.copied { background: var(--success); color: #fff; border-color: var(--success); }

.prompt-text {
  padding: 18px 20px;
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  background: #fff;
}

.confirm-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.confirm-row .btn { flex: 1; justify-content: center; }

/* ── Success (Step 6) ────────────────────────────── */

.success-mark {
  width: 60px;
  height: 60px;
  background: var(--success);
  color: #fff;
  font-size: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* ── Step panels ─────────────────────────────────── */

/* Step 8 (results) is the only remaining .panel — shown as a separate
   full-width view via inline display:none/'' from JS. */
.panel.active {
  animation: fadeUp 0.28s ease;
}

/* ── Accordion (one-pager configuration flow) ────── */

.onepager {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acc-section {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow 0.18s, border-color 0.18s;
}

.acc-section.acc-active {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.acc-section.acc-pending {
  opacity: 0.78;
}

.acc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.acc-header::-webkit-details-marker { display: none; }
.acc-header::marker { content: ''; }
.acc-header:hover { background: var(--bg); }

.acc-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.acc-section.acc-active .acc-num { background: var(--primary); color: #fff; }
.acc-section.acc-done   .acc-num { background: var(--success); color: #fff; }

.acc-title {
  flex: 1 0 auto;
}

.acc-summary-text {
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.acc-chevron {
  font-size: 13px;
  color: var(--text-muted);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.acc-section[open] .acc-chevron { transform: rotate(180deg); }

/* Cards inside accordion bodies — drop their own shadow/border (the section
   already has one) so they don't double up */
.acc-section > .card {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--border);
  animation: fadeUp 0.22s ease;
}

.acc-inline-loading {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 48px 24px;
  text-align: center;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── In-loading email prompt ────────────────────── */

.email-prompt {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeUp 0.3s ease;
}
.email-prompt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.email-prompt-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.email-prompt-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.email-prompt-form input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  min-width: 0;
}
.email-prompt-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.email-prompt-status {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.email-prompt-ok  { background: var(--success-light); color: var(--success); border: 1px solid #b3ccbb; }
.email-prompt-err { background: #fef2f2;              color: var(--error);   border: 1px solid #fecaca; }

/* ── Domain-workflow preset banner (MASEMiner etc.) ────────────────────── */

.preset-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 8px 14px;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--primary-dark);
  width: fit-content;
  max-width: 100%;
}
.preset-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.preset-banner-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.preset-banner-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preset-banner-clear {
  background: none;
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.preset-banner-clear:hover {
  background: var(--primary);
  color: #fff;
}

/* ── "Pre-built workflows" link on landing screen ──────────────────────── */

.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0 0 0 6px;
  margin: 0;
}
.link-btn:hover { color: var(--primary-dark); }

/* ── /maseminer hero landing ───────────────────────────────────────────── */

.preset-landing {
  margin-top: 8px;
}

.preset-hero {
  border-top: 4px solid var(--primary);
}

.preset-hero-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
  text-align: center;
}
.preset-hero-tagline {
  text-align: center;
}

/* Stacked brand logo: the supplied PNG is an all-in-one mark + wordmark
   so we just centre it.  Old .preset-hero-mark / .masem-wordmark rules
   stay below for the preset-banner mini-mark which still uses the
   inline SVG #masemMark. */
.preset-hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.masem-logo-img {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
}

/* Explainer video — sits above the step-1 accordion on MetaPaperLens
   and inside the welcome hero on MASEMiner.  Centered, capped at a
   comfortable read-along width, with a subtle shadow so it reads as
   a media block. */
.explainer-video {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 20px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  background: #000;
}
/* On the MetaPaperLens page the video sits in the ``onepager`` flow,
   above the first accordion section.  In MASEMiner mode the welcome
   hero carries its own explainer, so hide this one to avoid two
   videos on screen at once. */
body.is-maseminer .onepager-video { display: none; }
.preset-hero-mark {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

/* Two-tone "MASE/Miner" wordmark — legacy, used by the older inline
   wordmark span treatment.  Kept for the preset-banner label and any
   downstream callers. */
.masem-wordmark .brand-mase  { color: #1d4a8c; font-weight: 800; letter-spacing: 0.01em; }
.masem-wordmark .brand-miner { color: #5cb8c8; font-weight: 600; }
.preset-hero-logo .preset-hero-title { margin: 0; line-height: 1; }
.preset-hero-title {
  font-size: 32px;
  margin: 0;
  letter-spacing: -0.01em;
}

.preset-hero-tagline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.preset-hero-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}

.preset-hero-body > p {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.preset-hero-body a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.preset-hero-body a:hover,
.preset-hero-body a:focus-visible {
  color: var(--primary);
  text-decoration: none;
  outline: none;
}

.preset-hero-section-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.preset-hero-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.preset-hero-checklist li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

.preset-hero-checklist li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  top: 4px;
  color: #7c3aed;
}

.preset-hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.preset-hero-cta .btn-primary {
  /* Inherit --primary (navy in MASEMiner mode, navy-teal everywhere
     else) instead of the previous hardcoded violet override. */
  background: var(--primary);
  border-color: var(--primary);
  font-size: 15px;
  padding: 10px 22px;
}

/* Footnote line under the CTA buttons — points researchers at the
   public maseminer mirror for local self-hosting. */
.preset-hero-footnote {
  margin: 20px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.preset-hero-footnote a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--primary-light);
}
.preset-hero-footnote a:hover {
  border-bottom-color: var(--primary);
}
.preset-hero-footnote code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--primary-light);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 4px;
}
.preset-hero-cta .btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

@media (max-width: 720px) {
  .preset-hero-body { grid-template-columns: 1fr; }
  .preset-hero-title { font-size: 26px; }
}

/* ── Inline pre-built workflows section on step 1 ──────────────────────── */

.prebuilt-workflows {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.prebuilt-workflows-header h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.prebuilt-workflows-header .subtitle {
  font-size: 13px;
  margin-bottom: 14px;
}

.prebuilt-workflows-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Reuse option-card-load styles — these workflow cards have the same shape */
.workflow-card.option-card-load {
  text-align: left;
  font-family: inherit;
}

/* ── Workflows modal ────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 20px;
}
.modal-overlay[style*="flex"] { display: flex; }

.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 26px;
  animation: fadeUp 0.2s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.modal-header h3 { font-size: 17px; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }

/* ── VLM picker modal ─────────────────────────────────────── */
.vlm-picker-modal { max-width: 460px; }
.vlm-picker-intro {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 4px 0 14px;
}
.vlm-picker-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vlm-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.vlm-picker-option:hover { border-color: var(--primary); }
.vlm-picker-option.is-selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.vlm-picker-option-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vlm-picker-option.is-selected .vlm-picker-option-radio {
  border-color: var(--primary);
}
.vlm-picker-option.is-selected .vlm-picker-option-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}
.vlm-picker-option-label { flex: 1; font-weight: 500; }
.vlm-picker-option-current {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 7px;
  border-radius: 999px;
}
.modal-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.workflows-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflows-loading,
.workflows-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px 0;
  text-align: center;
}
.workflow-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.workflow-card:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.workflow-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.workflow-card-tagline {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.workflow-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

/* ── Footer ──────────────────────────────────────── */

.app-footer {
  margin-top: 56px;
  padding: 18px 0 6px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.app-footer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.app-footer a:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* On the wide results page, keep the footer span readable */
.wide-mode .app-footer { margin-top: 32px; }

/* ── Toast ───────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #1e293b;
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  max-width: 480px;
  white-space: pre-line;        /* preserve newlines in provider messages */
  word-break: break-word;       /* don't overflow on long URLs / param names */
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
}

.toast.error-toast   { background: var(--error); }
.toast.success-toast { background: var(--success); }

.toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Upload Zone (Step 6) ────────────────────────── */

.prompt-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.prompt-summary summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prompt-summary summary::-webkit-details-marker { display: none; }
.prompt-summary summary::before { content: '▶'; font-size: 10px; transition: transform 0.2s; }
.prompt-summary[open] summary::before { transform: rotate(90deg); }

.prompt-summary-model {
  font-weight: 400;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 4px;
}

.prompt-summary-text {
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  border-top: 1px solid var(--border);
  background: #fff;
  margin: 0;
}

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 14px;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}

.upload-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  color: var(--mpl-navy-900);
}
.upload-icon svg { width: 100%; height: 100%; display: block; }

.upload-primary {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.upload-secondary { font-size: 13px; color: var(--text-muted); }

/* ── File list (multi-upload) ────────────────────── */

.file-list {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}

.file-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.file-list-add {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 3px 10px;
  font-family: var(--font);
  transition: background 0.15s;
}
.file-list-add:hover { background: var(--primary-light); }

.file-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.file-list-item:last-child { border-bottom: none; }

.file-icon { font-size: 18px; flex-shrink: 0; }

.file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-size {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.file-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.file-remove:hover { background: #fee2e2; color: var(--error); }

.upload-note {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 9px 13px;
  margin-bottom: 4px;
  display: none;
  line-height: 1.5;
}

/* ── Results (Step 8) ────────────────────────────── */

.results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.results-header h2 { margin-bottom: 4px; }
.results-header .subtitle { margin-bottom: 0; }

.results-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Raw-text fallback */
.raw-text {
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  margin: 0;
}

/* (input-tabs removed — step 3 now uses choice cards) */

/* ── Entry navigation bar ────────────────────────── */

.entry-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 9px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.entry-counter {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.btn.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ── Wide mode ───────────────────────────────────── */

/* On the results page the layout breaks out of the 760-px column so the
   entry view + page-image preview can use the available real estate. */
body.wide-mode .app {
  max-width: none;
  padding: 0 24px 80px;
}

.results-card { padding: 28px 32px; }

/* 3-column grid: papers sidebar | entry area */
.results-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

/* entry area splits horizontally: result | page image.
   1.2fr / 1fr lets the result column grow generously on wide screens
   while keeping the page-image preview readable. */
.entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, 1fr);
  gap: 20px;
  align-items: start;
}

/* ── Papers sidebar ──────────────────────────────── */

.papers-sidebar {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #fff;
}

.paper-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
  transition: background 0.15s;
  min-width: 0;
}

.paper-item:last-child { border-bottom: none; }

.paper-item.status-done { cursor: pointer; color: var(--text); }
.paper-item.status-done:hover { background: var(--primary-light); }
.paper-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.paper-status-icon {
  flex-shrink: 0;
  font-size: 13px;
  width: 16px;
  text-align: center;
}

.paper-item.status-done    .paper-status-icon { color: var(--success); }
.paper-item.status-error   .paper-status-icon { color: var(--error); }
.paper-item.status-processing .paper-status-icon {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.paper-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Per-sample sidebar rows (one per sample for multi-sample papers).
   Slightly inset and tinted so adjacent samples for the same paper read
   as a related cluster, while still being clickable independently. */
.paper-item-sample {
  padding-left: 28px;
  font-size: 13px;
}
.paper-sample-suffix {
  color: var(--text-muted);
  font-weight: 500;
}
.paper-item.active .paper-sample-suffix {
  color: var(--primary);
}
.paper-sample-bullet {
  color: var(--text-muted);
  width: 14px;
  display: inline-block;
  text-align: center;
  flex-shrink: 0;
}
.paper-sample-label {
  color: var(--text);
}
.paper-item-sample.active .paper-sample-label {
  color: var(--primary);
  font-weight: 600;
}

/* Header row for multi-entry papers — visually distinct from the
   nested sample rows below.  Uses a small bottom border so the
   cluster of indented entries reads as belonging to this paper. */
.paper-item-header {
  font-weight: 600;
  background: var(--bg-subtle, #fafafa);
}
.paper-item-header.active-parent {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* ── Result column ───────────────────────────────── */

.result-col {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 20px 22px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* ── Split re-run group (text + vision) ──────────── */
.rerun-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ── MASEMiner row-validity warning ──────────────── */
/* Shown above the parsed sample data when an item-row of
   factor_loadings or factor_correlations has no reported value —
   usually a signal the LLM dropped an item that does exist in the
   source. */
.masem-warning-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  margin-bottom: 14px;
  background: #fdf5d3;
  border: 1px solid #c79412;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: #7d5a02;
}
.masem-warning-icon {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.2;
  color: #c79412;
}
.masem-warning-body { flex: 1; }
.masem-warning-body strong { color: #5b4101; }
.masem-warning-body > div + div { margin-top: 6px; }

/* ── Extraction-confidence badge row ─────────────── */
/* Shown above the parsed sample data when the model emits an
   `extraction_confidence` block (high / medium / low per category). */
.confidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.confidence-row-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid;
}
.confidence-badge-label {
  font-weight: 500;
  opacity: 0.85;
}
.confidence-badge-value {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.confidence-badge.confidence-high {
  background: #e7f7ec;
  border-color: #2f9e54;
  color: #1c6a37;
}
.confidence-badge.confidence-medium {
  background: #fdf5d3;
  border-color: #c79412;
  color: #7d5a02;
}
.confidence-badge.confidence-low {
  background: #fde7e7;
  border-color: #c93434;
  color: #8a1f1f;
}
.confidence-badge.confidence-unknown {
  background: #eef0f3;
  border-color: #b8bec8;
  color: #4a5260;
}

/* ── Page image column ───────────────────────────── */

.page-display-col .pages-panel {
  position: sticky;
  top: 20px;
}

.pages-panel {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pages-panel-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 36px;
}

#pageDisplayLabel { flex: 1; min-width: 0; }

/* Evidence page nav (shown when multiple pages) */
.page-evidence-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.page-nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.page-nav-btn:hover:not(:disabled) { background: var(--primary-light); color: var(--primary); }
.page-nav-btn:disabled { opacity: 0.35; cursor: default; }

.page-nav-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}

/* When the currently-displayed page carries any sub-view-matched
   highlights, tint the counter so the user can see at a glance which
   pages have evidence as they flip through. */
.page-evidence-nav.page-nav-on-evidence .page-nav-counter {
  color: var(--primary);
}

/* Zoom controls */
.zoom-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.zoom-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font);
}
.zoom-btn:hover { background: var(--primary-light); color: var(--primary); }

/* Zoom container — clips the transformed image */
.page-zoom-container {
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: var(--bg);
  max-height: calc(100vh - 100px);
  display: flex;
  align-items: flex-start;
}
.page-zoom-container.dragging { cursor: grabbing; }

#pageDisplayImg {
  width: 100%;
  display: block;
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: none;
}

/* SVG highlight overlay — sits on top of the page image, scales with zoom/pan
   via the same transform.  preserveAspectRatio="none" + matching viewBox keeps
   the rectangles aligned with the page contents at all zoom levels. */
.highlight-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;          /* clicks pass through to the image */
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1);
  will-change: transform;
}
.highlight-overlay .highlight-rect {
  fill: rgba(250, 204, 21, 0.25);    /* yellow-400, lighter wash */
  stroke: none;                      /* borderless — just a soft tint */
  pointer-events: auto;              /* re-enable so the <title> tooltip works */
  transition: fill 0.15s;
}

/* The rect tied to the cell the user just clicked.  Distinct teal
   accent + thicker stroke + soft pulse so it pops out from the rest
   of the yellow evidence rects on the same page. */
.highlight-overlay .highlight-rect-focused {
  fill: rgba(54, 115, 128, 0.32);    /* metalens teal-700 */
  stroke: rgba(27, 72, 94, 0.95);    /* metalens navy-800 */
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(27, 72, 94, 0.45));
  animation: mpl-focus-pulse 1.4s ease-out 1;
}
@keyframes mpl-focus-pulse {
  0%   { fill: rgba(54, 115, 128, 0.55); }
  60%  { fill: rgba(54, 115, 128, 0.38); }
  100% { fill: rgba(54, 115, 128, 0.32); }
}

/* Green-focus highlight — drawn on top of the yellow underlay for
   evidence the user explicitly clicked (a cell or an evidence_idx
   chip).  Coexists with the yellow rects from the always-on baseline:
   green sits on top, outlined, so the focused snippet pops out. */
.highlight-overlay .highlight-rect-green-focus {
  fill: rgba(34, 197, 94, 0.20);     /* green-500 wash */
  stroke: rgba(22, 163, 74, 0.95);   /* green-600 outline */
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.4));
  animation: mpl-green-focus-pulse 1.4s ease-out 1;
}
@keyframes mpl-green-focus-pulse {
  0%   { fill: rgba(34, 197, 94, 0.45); }
  60%  { fill: rgba(34, 197, 94, 0.28); }
  100% { fill: rgba(34, 197, 94, 0.20); }
}

/* Value-focus highlight — drawn on top of all other layers for literal
   text matches of the clicked cell's value (e.g. clicking "42.87" on
   a finding outlines every "42.87" on the visible PDF page).  Sharper
   outline + tighter pulse so it pops out from the snippet-level
   green-focus rectangle that surrounds it. */
.highlight-overlay .highlight-rect-value-focus {
  fill: rgba(34, 197, 94, 0.35);
  stroke: rgba(21, 128, 61, 1.0);    /* green-700, fully opaque */
  stroke-width: 2.0;
  filter: drop-shadow(0 0 3px rgba(21, 128, 61, 0.7));
  animation: mpl-value-focus-pulse 1.0s ease-out 1;
}
@keyframes mpl-value-focus-pulse {
  0%   { fill: rgba(34, 197, 94, 0.65); }
  70%  { fill: rgba(34, 197, 94, 0.42); }
  100% { fill: rgba(34, 197, 94, 0.35); }
}

#pageDisplayNone {
  padding: 32px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

/* ── Formatted result renderer ───────────────────── */

.rv-root { padding: 0; }

.rv-obj {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

.rv-row {
  display: contents;
}

.rv-row > .rv-key,
.rv-row > .rv-val {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

/* Draw separator only between rows, not after last */
.rv-row:last-child > .rv-key,
.rv-row:last-child > .rv-val { border-bottom: none; }

.rv-key {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  padding-right: 16px;
  vertical-align: top;
}

.rv-val { color: var(--text); }

.rv-null  { color: var(--text-muted); font-style: italic; font-size: 13px; }
.rv-num   { font-variant-numeric: tabular-nums; color: #1d4ed8; font-size: 13px; }
.rv-bool  { font-weight: 600; font-size: 13px; }
.rv-str   { font-size: 13px; }

/* Nested objects get a subtle indent */
.rv-val .rv-obj {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

/* Array */
.rv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

.rv-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rv-idx {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.rv-list-body { flex: 1; min-width: 0; }

/* Compact numeric grid (factor loadings etc.) */
.rv-numgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px 6px;
  margin-top: 4px;
}

.rv-numgrid-cell {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 7px;
}

.rv-numgrid-k {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1px;
}

/* Evidence block */
.rv-evidence {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin-top: 2px;
}

.ev-snippet {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 6px;
  quotes: "\201C" "\201D";
}
.ev-snippet::before { content: open-quote; }
.ev-snippet::after  { content: close-quote; }

.ev-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.ev-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.ev-page   { background: #eff6ff; color: var(--primary); }
.ev-source { background: #f0fdf4; color: var(--success); }

/* ── Editable leaf values ────────────────────────── */

.rv-editable {
  cursor: text;
  border-radius: 3px;
  outline: none;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  min-width: 12px;
  display: inline-block;
  /* Persistent dotted underline so users always see what's editable */
  border-bottom: 1px dashed transparent;
}

/* Resting affordance: a subtle dashed underline on every editable value.
   Disabled inside table cells where the dense grid would feel too noisy
   (the row hover state below picks up the slack there). */
.rv-editable:not(.rv-edited) {
  border-bottom-color: rgba(37, 99, 235, 0.28);
}

.rv-table .rv-editable:not(.rv-edited) {
  border-bottom-color: transparent;
}
.rv-table tr:hover .rv-editable:not(.rv-edited) {
  border-bottom-color: rgba(37, 99, 235, 0.35);
}

.rv-editable:hover {
  background: var(--primary-light);
  border-bottom-color: var(--primary);
}

.rv-editable:focus {
  background: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
  border-bottom-color: var(--primary);
}

/* Visual marker for human-overridden fields */
.rv-edited {
  background: #fefce8 !important;
  border-bottom: 2px solid #eab308;
  border-radius: 2px 2px 0 0;
}

/* "Most recently clicked" cell.  Only one ``.rv-selected`` exists at
   a time — the click handler in app.js wipes the class from every
   other element on each new click — so users can always tell which
   value the PDF highlight corresponds to. */
.rv-selected {
  background: var(--primary-light) !important;
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}

/* ── Results page — entry navigation, view toggle, multi-entry hint ────── */

.entry-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.entry-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.entry-counter {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding: 0 4px;
}

/* Numbered entry tabs — visible only when there are >1 entries */
.entry-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.entry-tab {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.entry-tab:hover  { background: var(--bg); color: var(--text); }
.entry-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* "+" / "−" controls next to the numbered tabs for adding / removing samples */
.entry-tab-add, .entry-tab-del {
  font-size: 14px;
  font-weight: 700;
  padding: 0 10px;
  color: var(--text-muted);
  border-style: dashed;
}
.entry-tab-add:hover { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.entry-tab-del:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* Parsed / Raw toggle */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.view-toggle-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.view-toggle-btn.active { background: var(--card); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.view-toggle-btn:hover:not(.active) { color: var(--text); }

/* Banner that prominently flags multi-entry papers */
.multi-entry-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 14px;
  background: var(--primary-light);
  border: 1px solid #bfdbfe;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--primary-dark);
}
.multi-entry-icon { font-size: 15px; flex-shrink: 0; }

/* Raw model response — fixed-width, scrollable, large enough to read */
.raw-response {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 75vh;
  overflow: auto;
  color: var(--text);
}

/* The smart evidence warning (action button below the message) */
.evidence-warning-body { flex: 1; line-height: 1.55; }
.evidence-warning-body code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: #fef3c7;
  border-radius: 3px;
  padding: 1px 4px;
}

/* When the page nav is in browse-all mode, give it a slightly different look
   so the user can tell it's not citing evidence. */
.page-evidence-nav.page-nav-browse {
  background: var(--bg);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ── Sev-2 additions ────────────────────────────── */

/* Token summary inline in the results header (S2.8) */
.token-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.token-summary .token-label  { font-weight: 600; color: var(--text); }
.token-summary .token-stat   { color: var(--text-muted); }
.token-summary .token-sep    { color: var(--border); }
.token-summary .token-total  { font-weight: 600; color: var(--text); }
.results-title h2            { margin-bottom: 0; }

/* Download dropdown (S2.7) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  display: none;
  flex-direction: column;
  padding: 4px;
  z-index: 50;
}
.dropdown-menu.open { display: flex; }
.dropdown-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.dropdown-item {
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.dropdown-item:hover { background: var(--bg); }

/* Preset-driven sub-tabs (e.g. MASEM Loadings/Correlations/Descriptives)
   Sit directly below the active paper card in the sidebar. */
.paper-subtabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 10px 38px;     /* indent so they visibly nest under the paper */
  margin-bottom: 4px;
  border-left: 2px solid var(--primary-light);
  margin-left: 14px;
}
.paper-subtab {
  background: transparent;
  border: none;
  padding: 5px 8px;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.paper-subtab:hover {
  background: var(--bg);
  color: var(--text);
}
.paper-subtab.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

/* Per-paper phase label in the sidebar (S2.5) */
.paper-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.paper-phase {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-paper Stop button (S2.4) */
.paper-stop {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.paper-stop:hover { background: #fef2f2; color: var(--error); border-color: #fecaca; }

/* Page-image skeleton (S2.9) */
.page-skeleton {
  width: 100%;
  height: 320px;
  position: relative;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 200%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-skeleton-text {
  font-size: 12px;
  color: var(--text-muted);
  z-index: 1;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Past extractions list (S2.2) */
.past-batches {
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.past-batches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.past-batches-header h3 { font-size: 14px; }
.past-batches-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.past-batch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.past-batch-row:hover {
  background: var(--primary-light);
  border-color: #bfdbfe;
}
.past-batch-name { font-size: 13.5px; font-weight: 600; color: var(--text); grid-column: 1; grid-row: 1; }
.past-batch-meta { font-size: 11.5px; color: var(--text-muted); grid-column: 1; grid-row: 2; }
.past-batch-counts {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
}
.batch-count {
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.batch-count-done { background: var(--success-light); color: var(--success); }
.batch-count-err  { background: #fef2f2;              color: var(--error); }
.batch-count-can  { background: var(--bg);            color: var(--text-muted); }
.batch-count-pen  { background: var(--primary-light); color: var(--primary); }

/* Keyboard shortcut cheat-sheet in the help drawer (S2.6) */
.kbd-table {
  width: 100%;
  margin-top: 10px;
  font-size: 12.5px;
  border-collapse: collapse;
}
.kbd-table td {
  padding: 4px 8px;
  vertical-align: top;
}
.kbd-table td:first-child { width: 110px; white-space: nowrap; }
.kbd-table strong { display: block; padding-top: 6px; color: var(--text); }
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
}

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 1200px) {
  .entry-layout {
    grid-template-columns: 1fr 400px;
  }
}

@media (max-width: 1100px) {
  .entry-layout {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 900px) {
  .results-layout {
    grid-template-columns: 1fr;
  }
  .papers-sidebar {
    position: static;
    max-height: 180px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .paper-item {
    border-bottom: none;
    border-right: 1px solid var(--border);
    min-width: 140px;
    flex-shrink: 0;
  }
  .entry-layout {
    grid-template-columns: 1fr;
  }
  .page-display-col .pages-panel { position: static; }
  .page-zoom-container { max-height: 400px; }
}

@media (max-width: 560px) {
  .card { padding: 24px 20px; }
  .option-grid { grid-template-columns: 1fr; }
  .confirm-row { flex-direction: column; }
  .acc-summary-text { display: none; }
  .results-header { flex-direction: column; }
  .results-actions { width: 100%; }
  header { padding: 32px 0 24px; }
  header h1 { font-size: 22px; }
}

/* ── Parsing method toggle (step 6) ─────────────── */

/* ── MASEMiner guided builder (step 3 alt view) ────────────────────────── */

.masem-starter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.masem-starter-card {
  appearance: none;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color 0.12s, background 0.12s;
}
.masem-starter-card:hover { border-color: var(--primary); }
.masem-starter-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.masem-starter-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
}
.masem-starter-card.active .masem-starter-icon {
  background: rgba(255,255,255,0.7);
}
.masem-starter-icon svg { display: block; }
.masem-starter-body { flex: 1 1 auto; min-width: 0; }
.masem-starter-label {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.masem-starter-tagline {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Compact scale-name / item-count / max-factor row.  Inner grid keeps
   label / input / hint on three named rows, so labels and inputs line
   up across all three columns no matter how the hint text wraps. */
.masem-scalar-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 4px 12px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "labelA labelB"
    "inputA inputB"
    "hintA  hintB";
  align-items: start;
}
@media (max-width: 640px) {
  .masem-scalar-row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
}
.masem-scalar {
  display: contents;
}
.masem-scalar .masem-scalar-label  { grid-row: 1; }
.masem-scalar input                { grid-row: 2; }
.masem-scalar .masem-scalar-hint   { grid-row: 3; }
.masem-scalar:nth-child(1) > * { grid-column: 1; }
.masem-scalar:nth-child(2) > * { grid-column: 2; }
.masem-scalar:nth-child(3) > * { grid-column: 3; }
@media (max-width: 640px) {
  .masem-scalar { display: flex; flex-direction: column; gap: 4px; }
  .masem-scalar > * { grid-row: auto; grid-column: auto; }
}
.masem-scalar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.masem-scalar input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  box-sizing: border-box;
}
.masem-scalar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(29, 74, 140, 0.12);
}
.masem-scalar-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* A/B data-source cards.  Multi-select toggle buttons styled like
   selectable cards (matches the brand-mark feel in the screenshot). */
.masem-source-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.masem-source-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  appearance: none;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.masem-source-card:hover { border-color: var(--primary); }
.masem-source-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(29, 74, 140, 0.08);
}
.masem-source-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  color: var(--primary);
}
.masem-source-card.active .masem-source-icon {
  background: #fff;
}
.masem-source-body {
  flex: 1;
  min-width: 0;
}
.masem-source-title {
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.masem-source-card.active .masem-source-title { color: var(--primary); }
.masem-source-tagline {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Hint paragraph shown below each section header in the builder. */
.masem-hint {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.masem-hint code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 4px;
}

#masemBuilder textarea {
  font-family: inherit;
  font-size: 13px;
}

/* ── Structured prompt designer (step 3, "Generate with AI" path) ── */

#designerSection .designer-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 14px;
  background: var(--bg-soft, #f9fafb);
}
#designerSection .designer-group > legend {
  font-weight: 600;
  font-size: 13.5px;
  padding: 0 6px;
  color: var(--text);
}
#designerSection .designer-hint {
  margin: -2px 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
#designerSection .designer-hint code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 4px;
}
#designerSection .designer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 12.5px;
}
#designerSection .designer-field-label {
  font-weight: 500;
  color: var(--text);
}
#designerSection .designer-field-hint {
  font-size: 11.5px;
  color: var(--text-muted);
}
#designerSection .designer-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
#designerSection .designer-row .designer-field {
  flex: 1 1 220px;
  margin-bottom: 0;
}
#designerSection .designer-radioset {
  border: none;
  padding: 0;
  margin: 0;
}
#designerSection .designer-radioset legend {
  font-weight: 500;
  font-size: 12.5px;
  margin-bottom: 4px;
  color: var(--text);
}
#designerSection .designer-radioset label {
  margin-right: 16px;
  font-size: 12.5px;
  cursor: pointer;
}
#designerSection input[type="text"],
#designerSection textarea {
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  /* Fill the available column width.  Section 3 (paper-metadata) and
     Section 4 (free-form context) only host a bare textarea — without
     an explicit width: 100% they collapse to the textarea's default
     ~20-column width and look noticeably narrower than the chunk-card
     fields above. */
  width: 100%;
  /* Pull placeholder + cursor away from the left edge so the typing
     position visually aligns with the section label above it. */
  padding: 6px 10px;
}
#designerSection textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Chunk card */
.designer-chunk-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg);
}
.designer-chunk-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.designer-chunk-card-head .designer-chunk-num {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
}
.designer-chunk-card-head .designer-chunk-remove {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--text-muted);
}
.designer-chunk-card-head .designer-chunk-remove:hover {
  border-color: var(--danger, #c43d3d);
  color: var(--danger, #c43d3d);
}
.designer-chunk-card .designer-display-radioset {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0;
}
.designer-chunk-card .designer-display-radioset label {
  font-size: 12.5px;
  cursor: pointer;
}
.designer-chunk-card .designer-display-radioset label input[type="radio"] {
  margin-right: 4px;
}

/* "Your workflows" group label on the step-1 workflows panel — a
   compact divider used to separate user-built presets from the
   built-in ones below them. */
.workflow-group-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 2px 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.workflow-group-label > span:first-child {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.workflow-group-hint {
  font-size: 11.5px;
  font-style: italic;
}
.workflow-card-wrap {
  position: relative;
}
.workflow-card-wrap .workflow-card {
  width: 100%;
}
.workflow-card-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.workflow-card-wrap:hover .workflow-card-del,
.workflow-card-del:focus {
  opacity: 1;
}
.workflow-card-del:hover {
  border-color: var(--danger, #c43d3d);
  color: var(--danger, #c43d3d);
}
.workflow-card-user {
  border-color: rgba(124, 58, 237, 0.35);  /* faint purple matches ai-findings accent */
}

/* ── Evidence-index chips ─────────────────────────────────────────
   Rendered for ``evidence_idx: [N, M]`` fields on findings/effect-
   sizes.  Each chip clicks through to the referenced evidence
   entry's PDF page.  Distinct from the generic ``.rv-idx`` badge so
   we don't accidentally style every list-item index. */
.ev-idx-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.ev-idx-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ev-idx-chip:hover,
.ev-idx-chip:focus {
  background: var(--accent, #367380);
  border-color: var(--accent, #367380);
  color: #fff;
  outline: none;
}
.ev-idx-chip.ev-idx-chip-active {
  background: #16a34a;            /* matches the green-focus overlay */
  border-color: #15803d;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}

/* Inline detail panel rendered under the chip when clicked.  Shows
   the evidence snippet, page, source, and which field the snippet
   supports so the reviewer can audit the link from a single click. */
.ev-idx-detail {
  margin: 6px 0 10px 0;
  padding: 10px 12px;
  border-left: 3px solid #16a34a;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text);
}
/* When the detail panel is inserted as a sibling of an .rv-row inside
   the .rv-obj grid (display:grid with auto 1fr), force it to span both
   key + value columns so it reads as full-width rather than squeezed
   into the key column.  Same trick for HTML-table contexts: the TR
   wrapper's TD uses colSpan, but a stray detail panel slipped into a
   grid container needs the explicit grid-column rule. */
.rv-obj > .ev-idx-detail {
  grid-column: 1 / -1;
}
.ev-idx-detail-snippet {
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.45;
  color: var(--text);
}
.ev-idx-detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-muted);
}
.ev-idx-detail-meta code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.ev-idx-detail-source { color: var(--text); }
.ev-idx-detail-page   { color: #15803d; font-weight: 600; }
.ev-idx-detail-idx    { color: var(--text-muted); font-family: "SF Mono", "Menlo", "Monaco", monospace; }

/* The TR wrapper used to embed the detail panel inside an HTML table.
   No border so the panel reads as belonging to the row above it. */
.ev-idx-detail-row > td {
  background: transparent;
  border: none;
  padding: 0;
}

/* "?"-icon tooltip used next to each data-source label.  The hover/focus
   tip is rendered via a CSS pseudo-element from the ``data-tip`` attribute
   so we don't need extra DOM. */
.masem-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  position: relative;
}
.masem-help:hover,
.masem-help:focus { color: var(--primary); border-color: var(--primary); outline: none; }
.masem-help::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 5px;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.masem-help::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10;
}
.masem-help:hover::after,
.masem-help:focus::after,
.masem-help:hover::before,
.masem-help:focus::before { opacity: 1; }

.masem-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  max-height: 360px;
  overflow: auto;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.parse-method-group {
  margin-top: 16px;
}

.parse-method-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.parse-method-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parse-method-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

.parse-method-opt input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.parse-method-default {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Token usage footer (step 8) ────────────────── */

.token-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}

.token-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.token-stat { color: var(--text-muted); }
.token-sep  { color: var(--border); }
.token-total { font-weight: 600; color: var(--text); }

/* ── Labeling result renderer ───────────────────── */

.label-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.label-badge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.label-badge {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border: 1.5px solid #bfdbfe;
  border-radius: 8px;
  padding: 6px 16px;
  line-height: 1.4;
}

.label-badge:hover,
.label-badge:focus {
  background: #dbeafe;
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.label-confidence {
  font-size: 13px;
  color: var(--text-muted);
}

.label-confidence span.rv-editable {
  font-weight: 600;
  color: var(--text);
}

.label-rationale {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  background: #f8fafc;
  border-left: 3px solid var(--border);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
}

.label-rationale:hover  { background: var(--primary-light); border-left-color: var(--primary); }
.label-rationale:focus  { background: var(--primary-light); border-left-color: var(--primary); outline: none; }

.label-extra-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 13.5px;
}

.label-evidence-section {
  margin-top: 4px;
}

.label-evidence-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Auto-detected tables (factor loadings, correlation matrix, etc.) ─ */

.rv-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  margin: 4px 0;
}

.rv-table-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.rv-table-caption-icon {
  color: var(--primary);
  font-size: 12px;
}

.rv-table-source {
  position: relative;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--success-light);
  color: var(--success);
  cursor: help;
}

.rv-table-source-auto {
  background: #fef3c7;
  color: #92400e;
}

/* Inline tooltip — replaces the unreliable native `title` attribute.
   Appears on hover, positioned above the pill, with a small arrow. */
.rv-table-source[data-tip]:hover::after,
.rv-table-source[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  box-shadow: var(--shadow-md);
  z-index: 20;
  pointer-events: none;
}
.rv-table-source[data-tip]:hover::before,
.rv-table-source[data-tip]:focus::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
  z-index: 20;
}

.rv-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rv-table th,
.rv-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.rv-table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.rv-table tr:last-child td { border-bottom: none; }
.rv-table tr:hover td { background: #f8fafc; }

.rv-table .rv-tbl-rowlabel {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  white-space: nowrap;
}

/* Trailing delete-row column on explicit ``_table`` arrays. */
.rv-table th.rv-tbl-del-head,
.rv-table td.rv-tbl-del {
  width: 28px;
  padding: 2px 6px;
  text-align: center;
}
.rv-row-del {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.rv-table tr:hover .rv-row-del { opacity: 1; }
.rv-row-del:hover,
.rv-row-del:focus-visible {
  color: #b42318;
  background: #fee4e2;
  outline: none;
}

/* Inline ✕ button on each column header / row label and the "+ col" / "+ row"
   add buttons.  Subtle by default; hover state in red (delete) or green (add).
   IMPORTANT: ``display: flex`` MUST live on inner div, NOT the ``<th>``/``<td>``
   itself — applying flex to a table cell drops it out of the table layout
   and collapses every header into a single column. */
.rv-tbl-coltitle,
.rv-tbl-rowlabel-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: space-between;
}
.rv-tbl-del {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rv-tbl-del:hover { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }
.rv-tbl-addcol,
.rv-tbl-addrow .rv-tbl-rowlabel,
.rv-tbl-add-btn {
  text-align: center;
}
.rv-tbl-add-btn {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rv-tbl-add-btn:hover { color: #16a34a; background: #f0fdf4; border-color: #86efac; }
.rv-tbl-addcol-cell { background: transparent; }
.rv-tbl-addrow td   { background: transparent; border-bottom: none; }

.rv-table td .rv-num,
.rv-table td .rv-str,
.rv-table td .rv-bool,
.rv-table td .rv-null {
  display: inline-block;
}

/* ── Help drawer ────────────────────────────────────── */

.help-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 90;
  transition: transform 0.15s, background 0.15s;
}
.help-fab:hover { background: var(--primary-dark); transform: translateY(-2px); }

.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 95;
}
.help-overlay.visible { opacity: 1; pointer-events: auto; }

.help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 92vw);
  background: var(--card);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.help-drawer.open { transform: translateX(0); }

.help-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-drawer-header h2 { font-size: 17px; }

.help-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.help-close:hover { background: var(--bg); color: var(--text); }

.help-drawer-body {
  overflow-y: auto;
  padding: 18px 22px 30px;
  flex: 1;
}

.help-section {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.help-section:last-child { border-bottom: none; }

.help-section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.help-section > summary::-webkit-details-marker { display: none; }
.help-section > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.help-section[open] > summary::before { transform: rotate(90deg); }

.help-section p,
.help-section ul,
.help-section ol {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin-top: 8px;
}

.help-section ul,
.help-section ol { padding-left: 20px; }
.help-list li { margin-bottom: 4px; }

.help-section code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--primary-dark);
}

.help-pre {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Extend-dataset picker (Phase 3b) ─────────────────────
   Each row is a clickable button that surfaces the dataset's
   title + donor + paper count + relative time.  Hover and
   focus states mirror .option-card so they feel like the
   rest of the picker UI. */
.extend-dataset-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.extend-dataset-row:hover {
  border-color: var(--primary);
  background: var(--primary-light, #f0f8ff);
}
.extend-dataset-row:active {
  transform: scale(0.998);
}
.extend-dataset-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.extend-dataset-icon {
  font-size: 16px;
  line-height: 1;
}
.extend-dataset-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.extend-dataset-badge {
  font-size: 11.5px;
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.extend-dataset-meta {
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.extend-dataset-dot {
  color: var(--text-muted);
}
.extend-dataset-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Gated-dataset inline password prompt (Phase 3c) ──────
   When the user clicks a 🔒 row in the picker modal, the row is
   replaced in-place by this prompt shell.  Shares the bordered
   container of .extend-dataset-row so the visual continuity stays;
   reverts to a normal row on Cancel.  Cursor:default because the
   shell isn't itself clickable (the inputs / buttons are). */
.extend-dataset-row-prompt {
  cursor: default;
  border-color: var(--primary);
  background: var(--primary-light, #f0f8ff);
}
.extend-dataset-row-prompt:hover {
  background: var(--primary-light, #f0f8ff);
  transform: none;
}
.extend-dataset-prompt-help {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 8px;
}
.extend-dataset-prompt-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.extend-dataset-prompt-error {
  margin-top: 6px;
}