/* Palette (light + dark) lives in theme.css, linked before this file. Don't
     redeclare colour variables here — that split is the whole point of theme.css. */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font-sans); background: var(--bg); color: var(--text); min-height: 100vh; }

  /* The app-shell header is the shared klarik.ui .k-header component now
     (markup in index.html, all CSS in klarik.ui/components.css) -- this
     repo no longer styles `header`/`.header-inner`/`.btn-header`. */

  .main { max-width: clamp(700px, 90%, 1500px); margin: 0 auto; padding: 32px 24px; }

  /* ── Banner ────────────────────────────────────────────────────────── */
  .banner { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.9rem; display: none; }
  .banner.show { display: block; }
  .banner-error { background: var(--err-bg); color: var(--err); border: 1px solid #fca5a5; }
  .banner-warning { background: var(--warn-bg); color: var(--warn); border: 1px solid #fcd34d; }
  .banner-warning a { color: inherit; font-weight: 500; }
  .banner > button { background: none; border: none; cursor: pointer; float: right; line-height: 1; color: inherit; opacity: 0.7; }
  .banner > button svg { width: 16px; height: 16px; vertical-align: middle; }
  /* Path chip + its copy button inside a showWarning() message -- scoped to
     #bannerMsg (not `.banner button`, the close-button rule above) so they lay
     out inline with the surrounding text instead of floating right. */
  .banner-path { font-family: var(--font-mono); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
  #bannerMsg button.banner-copy-btn { display: inline; float: none; opacity: 1; cursor: pointer; border: 1px solid currentColor; border-radius: 4px; padding: 5px 14px; font-size: 0.85em; font-weight: 500; margin-left: 8px; background: none; color: inherit; }
  #bannerMsg button.banner-copy-btn:hover { filter: brightness(0.93); }
  .btn svg { width: 15px; height: 15px; }

  /* ── Upload zone ───────────────────────────────────────────────────── */
  .upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .upload-zone.drag-over { border-color: var(--accent); background: var(--teal-faint); }
  .upload-zone--staged { border-style: solid; border-color: var(--accent); background: var(--teal-faint); }
  .upload-zone .icon { margin-bottom: 12px; }
  .upload-zone .icon svg { width: 40px; height: 40px; color: var(--muted); }
  .upload-zone--staged .icon svg { color: var(--accent); }
  .upload-zone p { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }
  .upload-zone input[type=file] { display: none; }

  /* ── Source chooser (+ New Transcript) ────────────────────────────────*/
  .source-chooser { display: flex; flex-wrap: wrap; gap: 14px; }
  .source-btn {
    flex: 1 1 160px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-family: inherit; font-size: 0.9rem; font-weight: 500;
    cursor: pointer; transition: border-color .15s, background .15s;
  }
  .source-btn:hover { border-color: var(--accent); background: var(--teal-faint); }
  .source-btn svg { width: 28px; height: 28px; color: var(--muted); }
  .source-btn:hover svg { color: var(--accent); }
  .source-panel-field { margin-bottom: 14px; }
  .source-panel-field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; }
  .source-panel-field input[type=text], .source-panel-field input[type=url], .source-panel-field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.9rem;
  }
  .source-panel-field textarea { min-height: 220px; resize: vertical; }

  /* .btn / .btn-outline / .btn-secondary live below (line ~470) -- this was
     a second, older declaration for the same selectors. Most of its
     properties (padding, border-radius, font-size, colours) were already
     shadowed by the later block; display/align-items/cursor and the
     :disabled state were NOT shadowed anywhere and have been folded into
     the surviving block below so removing this doesn't change rendering. */

  /* ── Status pill ───────────────────────────────────────────────────── */
  .pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.78rem; font-weight: 500; }
  .pill-ok { background: var(--ok-bg); color: var(--ok); }
  .pill-warn { background: var(--warn-bg); color: var(--warn); }
  .pill-err { background: var(--err-bg); color: var(--err); }
  .pill-muted { background: #f1f5f9; color: var(--muted); }

  /* ── Panel: spinner ────────────────────────────────────────────────── */
  .spinner-wrap { text-align: center; padding: 48px; color: var(--muted); }
  .spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
  .spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

  /* ── Panel: session dashboard ──────────────────────────────────────── */
  .session-grid { display: grid; gap: 16px; }
  .session-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px 24px; display: flex; align-items: flex-start; gap: 16px;
  }
  .session-card .info { flex: 1; min-width: 0; }
  .session-card .name { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .session-card .meta { font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }

  /* ── Panel: story selection ─────────────────────────────────────────── */
  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
  /* .panel h2 type is set once in the later block; its margin-bottom moved
     there too (ADR 0008 phase 6a). .panel .subtitle font-size is likewise
     live in the later block (var(--fs-secondary)); kept in sync here so a
     grep hit on this line isn't a stale literal. */
  .panel .subtitle { font-size: var(--fs-secondary); color: var(--muted); margin-bottom: 16px; }
  .story-list { display: flex; flex-direction: column; gap: 10px; }
  .story-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
  .story-item:hover { background: #f8fafc; }
  .story-item .story-name { font-weight: 500; font-size: 0.9rem; }
  .story-item .story-desc { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
  .group-b-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f1f5f9; border-radius: 6px; font-size: 0.9rem; color: var(--muted); }

  /* ── Checkbox ──────────────────────────────────────────────────────── */
  input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px;
    border: 1.5px solid var(--border); border-radius: 5px;
    background: var(--surface); cursor: pointer;
    display: inline-grid; place-content: center;
    transition: background .15s, border-color .15s;
  }
  input[type=checkbox]:hover { border-color: var(--accent); }
  input[type=checkbox]::before {
    content: ''; width: 10px; height: 10px;
    clip-path: polygon(12% 45%, 40% 72%, 88% 15%, 100% 27%, 40% 96%, 0 55%);
    background: #fff; transform: scale(0); transition: transform .1s ease-in-out;
  }
  input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
  input[type=checkbox]:checked::before { transform: scale(1); }
  input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn-link { background: none; border: none; color: var(--text); cursor: pointer; font-size: 0.85rem; font-family: inherit; padding: 0; text-decoration: underline; }
  .btn-link:hover { color: var(--muted); }
  .subtitle a { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
  .subtitle a:hover { color: var(--accent-hover); }
  .subtitle a svg { width: 13px; height: 13px; }

  /* ── Section heading ────────────────────────────────────────────────── */
  .section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  /* .section-header h2 type is set once in the later block (ADR 0008 phase 6a). */

  /* ── Empty state ────────────────────────────────────────────────────── */
  .empty { text-align: center; padding: 64px 32px; color: var(--muted); }
  .empty .icon { margin-bottom: 16px; }
  .empty .icon svg { width: 48px; height: 48px; color: var(--muted); }
  .empty p { margin-top: 8px; font-size: 0.9rem; }

  /* ── Family / report page ───────────────────────────────────────────── */
  .family-heading { min-width: 0; }
  .family-meta { font-size: var(--fs-secondary); color: var(--muted-strong); margin-top: 4px; }

  /* The Meeting debrief panel is styled in full in the un-indented
     "Meeting debrief panel" block further down this file (the dashboard
     refresh) — kept in one place rather than split across two. */

  /* Richness is a forecast, not a grade — the enrichment voice never marks a
     story out of ten, so this is a neutral ramp, not ok / warn / err. */
  .pill.richness-workable { opacity: 0.85; }
  .pill.richness-sparse { background: var(--elevated); color: var(--muted); }

  /* ── Runs table ─────────────────────────────────────────────────────── */
  /* .runs-table is styled once, in the later "Tables" block (ADR 0008
     phase 6b) — this generation's copy was fully folded in. */
  .run-label { font-weight: 600; white-space: nowrap; }
  .run-date { color: var(--muted); white-space: nowrap; }
  .run-action { text-align: right; white-space: nowrap; }
  .run-action-group { display: inline-flex; align-items: center; gap: 6px; }
  /* .btn-sm lives below (line ~521, min-height/padding/border-radius/
     font-size) -- both this and the next declaration were fully shadowed
     by it and contributed nothing to the rendered size. */

  /* Pulses the run row a returning notebook Back button lands on -- see
     highlightRunRow() in app.js. Runs on the row's own background so it
     reads correctly against --teal-faint in both light and dark. */
  .run-row-highlight { animation: run-row-pulse 1s ease-in-out 1; }
  @keyframes run-row-pulse {
    0%, 100% { background: transparent; }
    50% { background: var(--teal-faint); }
  }

  /* ── Session card status variants ──────────────────────────────────────── */
  /* Coloured left edge here is superseded by the refresh section's
     .session-card::before strip below — left as plain var(--border) so
     status is signalled once, not by two slightly different hexes stacked
     on top of each other. */
  .session-card { border-left-width: 4px; }

  /* ── Session card actions ───────────────────────────────────────────── */
  .card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; align-self: flex-end; }
  .btn-danger-sm {
    background: none; border: 1px solid var(--border); color: var(--err);
    padding: 6px 10px; border-radius: var(--radius); cursor: pointer;
    display: flex; align-items: center; line-height: 1;
  }
  .btn-danger-sm:hover { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 50%, var(--border)); }
  .btn-danger-sm:disabled { color: var(--muted); cursor: not-allowed; }
  .btn-danger-sm:disabled:hover { background: none; border-color: var(--border); }
  .session-card--failed     { border-left-color: var(--err); }
  .session-card .status-desc { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
  .session-card--action .status-desc { color: #92400e; }
  .session-card--failed .status-desc { color: var(--err); }
  .btn-action { background: var(--warn); color: #fff; }
  .btn-action:hover { background: color-mix(in srgb, var(--warn) 82%, black); }
  .btn-failed { background: var(--err); color: #fff; }
  .btn-failed:hover { background: color-mix(in srgb, var(--err) 82%, black); }
  .btn-running { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
  .btn-running:hover { background: var(--btn-primary-hover-bg); }
  .search-input {
    padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--text); width: 220px;
  }
  .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

  /* ── Session card button: never shrink ─────────────────────────────────── */
  .session-card .btn { flex-shrink: 0; }

  /* ── Expandable story list ──────────────────────────────────────────────── */
  .story-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; margin-top: 2px;
    font-size: 0.85rem; color: var(--muted); cursor: pointer;
    font-family: inherit; line-height: 1.4;
  }
  .story-toggle:hover { color: var(--text); }
  .story-toggle .story-chevron { width: 14px; height: 14px; transition: transform 0.15s; flex-shrink: 0; }
  .story-toggle.open .story-chevron { transform: rotate(90deg); }
  .card-stories { display: none; padding: 6px 0 2px 18px; }
  .card-stories.open { display: block; }
  .card-stories ul { list-style: none; padding: 0; margin: 0; }
  .card-stories li { font-size: var(--fs-secondary); color: var(--muted); padding: 2px 0; line-height: 1.4; }
  .card-stories li::before { content: "•"; color: var(--accent); margin-right: 6px; }
  .story-open-link {
    display: block; background: none; border: none; padding: 0; margin-top: 4px;
    font-size: 0.82rem; font-family: inherit; color: var(--accent); cursor: pointer;
  }
  .story-open-link:hover { text-decoration: underline; }

  /* ── Settings form ──────────────────────────────────────────────────────── */
  .settings-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
  .settings-field.settings-field--row { flex-direction: row; align-items: center; gap: 16px; }
  .settings-field.settings-field--row > label { white-space: nowrap; min-width: 72px; margin-bottom: 0; }
  .settings-field.settings-field--row .settings-input-wrap { flex: 1; }

  .settings-field label { font-size: 0.875rem; font-weight: 500; }
  .settings-input {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--text);
    width: 100%; appearance: none;
  }
  .settings-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
  .label-hint { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
  .settings-input-wrap { position: relative; }
  .settings-input-wrap .settings-input { padding-right: 2.5rem; }
  .btn-icon-inline {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; line-height: 0;
  }
  .btn-icon-inline:hover { color: var(--text); }
  .btn-icon-inline svg { width: 16px; height: 16px; }
  .settings-url-row { display: flex; align-items: center; gap: 8px; }
  .settings-url { font-family: monospace; font-size: 0.875rem; color: var(--muted); flex: 1; }
  .settings-url-row .btn-icon-inline { position: static; transform: none; }
  .settings-actions { margin-top: 20px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
  .settings-actions-right { display: flex; gap: 12px; align-items: center; }
  .btn-outline:disabled { background: transparent; }
  .settings-saved-msg { color: var(--accent); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 4px; }
  .settings-saved-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
  .settings-error-msg { color: var(--err); font-size: 0.88rem; }

  /* ── Attachment chips (Send Feedback) ─────────────────────────────────── */
  .attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .attachment-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: 99px;
    background: var(--teal-faint); font-size: 0.82rem; color: var(--text);
  }
  .attachment-chip button {
    background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: 1rem; line-height: 1; padding: 2px 4px;
  }
  .attachment-chip button:hover { color: var(--err); }

  /* ── Tablet / iPad (below 900px max-width column) ──────────────────────── */
  @media (max-width: 899px) {
    .main         { padding: 20px 16px; }
    .upload-zone  { padding: 32px 20px; }
    .search-input { width: 180px; }
    .session-card { padding: 16px 20px; }
  }

  /* ── Account ─────────────────────────────────────────────────────────────── */

  /* ── Modal overlay ──────────────────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
  }
  /* Login gate is a hard block, not a transient confirm/restart dialog —
     the page underneath should read as genuinely inaccessible, not just dimmed. */
  .modal-overlay--opaque { background: rgba(0, 0, 0, 0.88); }
  .modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .modal-box .btn { align-self: center; min-width: 100px; }
  #loginGateButtons { display: flex; flex-direction: column; gap: 12px; }
  #loginGateStatus.login-gate-error { color: var(--err); }
  /* These three are themselves plain children of .modal-box's own flex
     column above -- each gets 16px from its neighbours that way -- but
     internally they're plain divs with no layout of their own, so their
     own children (button/input/links) had zero gap between them (the
     global `* { margin: 0 }` reset leaves nothing to fall back on).
     Same fix, same value, as #loginGateButtons above. */
  #pendingInviteBox,
  #soloGetStartedForm,
  #noOrgCreateForm { display: flex; flex-direction: column; gap: 12px; }

  /* ── Dark theme ─────────────────────────────────────────────────────────────
     The palette remap is in theme.css. What remains here are the app-shell spots
     that hardcoded a light colour a variable couldn't reach. */
  :root[data-theme="dark"] .story-item:hover,
  :root[data-theme="dark"] .btn-danger-sm:hover { background: rgba(255, 255, 255, 0.05); }
  :root[data-theme="dark"] .group-b-toggle,
  :root[data-theme="dark"] .pill-muted           { background: rgba(255, 255, 255, 0.06); }
  :root[data-theme="dark"] .session-card--action { background: var(--surface); }

/* ============================================================
   Klarik analytical-dashboard visual refresh
   ------------------------------------------------------------
   This section deliberately overrides only presentation. Existing
   class names, JS hooks, display behavior, and page structure stay intact.
   ============================================================ */

html {
  background: var(--bg);
  /* Always reserve the vertical scrollbar's width so centred content
     (.k-header__inner, .main) never shifts left/right when navigating
     between a page that scrolls and one that doesn't. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 76% -10%, var(--accent-soft), transparent 28rem),
    linear-gradient(var(--bg), var(--bg));
  color: var(--text);
  letter-spacing: -0.006em;
}

/* ── App header ─────────────────────────────────────────────────
   Moved out of this repo. The header is klarik.ui's shared .k-header*
   component (klarik.ui/klarik_ui/static/components.css), adopted by the
   markup in web/index.html. It used to be styled here as
   `header`/`.header-inner`/`header h1`/`header p`/`.btn-header` -- a copy
   of the same values that had drifted (this repo flattened the bar off
   the navy gradient in commits 0a658ef / d996b45; the shared component
   didn't). One source now: edit components.css. */

/* ── Main canvas ────────────────────────────────────────────── */
.main {
  max-width: var(--app-content-max);   /* klarik.ui tokens.css -- shared with .k-header__inner / .page */
  padding: 30px 0 56px;
}

/* ── Shared surfaces ────────────────────────────────────────── */
.panel,
.session-card,
.upload-zone,
.modal-box {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 98%, white 2%),
      var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.panel {
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 18px;
}

.panel h2,
.section-header h2 {
  font-size: var(--fs-heading);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.panel h2 { margin-bottom: 4px; }

.panel .subtitle {
  color: var(--muted);
  font-size: var(--fs-secondary);
  line-height: 1.55;
  margin-top: 4px;
  margin-bottom: 18px;
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Primary button colour lives in tokens.css's --btn-primary-* (ink navy in
   light, marigold in dark — a dark-yellow fill reads muddy on white, and it
   kept the accent doubling as button + link + highlight). Change the fill
   there, once, for every repo. */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  padding: var(--btn-pad);
  gap: 7px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-weight: var(--btn-weight);
  font-size: var(--btn-font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--btn-primary-bg) 20%, transparent);
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.btn:hover {
  background: var(--btn-primary-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--btn-primary-bg) 26%, transparent);
}

.btn:active { transform: translateY(0); }
/* Folded in from the removed line-72 declaration -- no other .btn rule
   sets a disabled state. */
.btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--btn-primary-bg); }

/* Secondary button: neutral on the light canvas so it recedes behind the
   filled .btn primary (both were --accent before, which muddied the
   hierarchy and looked washed-out on white). */
.btn-outline {
  color: var(--text);
  background: transparent;
  border-color: var(--border-strong);
  box-shadow: none;
}

.btn-outline:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--muted);
  box-shadow: none;
}

.btn-secondary {
  color: var(--err);
  background: transparent;
  border-color: color-mix(in srgb, var(--err) 48%, var(--border));
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--err-bg);
  border-color: var(--err);
}

.btn-sm {
  min-height: var(--btn-sm-h);
  padding: var(--btn-sm-pad);
  border-radius: var(--btn-sm-radius);
  font-size: var(--btn-sm-font);
}

.btn svg { stroke-width: 1.9; }

/* ── Session cards: dashboard module feel ───────────────────── */
.session-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.session-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 22px 24px;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 0;
  border-left-width: 1px;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.session-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: transparent;
}

.session-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-pop);
}

.session-card .name {
  font-size: var(--fs-card-title);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

/* Badge, title and status line each take their own full-width row, so the
   name and the roll-up text span the whole card; .info + .card-actions
   share the row below. */
.session-card > .card-badges,
.session-card > .name,
.session-card > .status-desc {
  flex: 0 0 100%;
  max-width: 100%;
}

.session-card .meta,
.session-card .status-desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.session-card--processing::before { background: var(--accent); }
.session-card--action::before     { background: var(--amber); }
.session-card--complete::before   { background: var(--ok); }
.session-card--failed::before     { background: var(--err); }

.session-card--action {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warn-bg) 45%, var(--surface)),
    var(--surface));
}

.session-card--action .status-desc { color: var(--warn); }

/* ── Card overflow (3-dot) menu ─────────────────────────────── */
/* Secondary card actions (Delete) sit behind this rather than on the card
   face. The card clips its overflow for the rounded ::before strip, so the
   open card lifts the clip and rises above its siblings while the menu shows. */
.session-card.menu-open { overflow: visible; z-index: 30; }

.card-overflow { position: relative; display: flex; }

.card-overflow-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;
}

.card-overflow-btn:hover,
.card-overflow-btn[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.card-overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  /* The "Move to project" list can make this menu long -- cap it and scroll. */
  max-height: min(60vh, 380px);
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.card-overflow-menu[hidden] { display: none; }

.card-overflow-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.card-overflow-item:hover { background: var(--surface-hover); }
.card-overflow-item i { width: 15px; height: 15px; flex-shrink: 0; }

.card-overflow-item--danger { color: var(--err); }
.card-overflow-item--danger:hover { background: var(--err-bg); }

/* ── Status pills ───────────────────────────────────────────── */
.pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-badge);
  line-height: 1.45;
  font-weight: 700;
  border: 1px solid transparent;
}

.pill-ok   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 18%, transparent); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 18%, transparent); }
.pill-err  { background: var(--err-bg);  color: var(--err);  border-color: color-mix(in srgb, var(--err) 18%, transparent); }
.pill-muted {
  background: color-mix(in srgb, var(--elevated) 86%, transparent);
  color: var(--muted);
  border-color: var(--border);
}

/* Project marker on a session card in the pooled "All" view. Same muted palette
   as .pill-muted, but read as a name (not a status) via the .card-badges
   override below. */
.pill-project {
  background: color-mix(in srgb, var(--elevated) 86%, transparent);
  color: var(--muted);
  border-color: var(--border);
}

.pill.richness {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ── Upload + source chooser ────────────────────────────────── */
.upload-zone {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 52px 32px;
  box-shadow: none;
}

.upload-zone:hover,
.upload-zone.drag-over,
.upload-zone--staged {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.upload-zone .icon svg {
  width: 42px;
  height: 42px;
  color: var(--muted);
  stroke-width: 1.6;
}

.upload-zone:hover .icon svg,
.upload-zone--staged .icon svg {
  color: var(--accent);
}

.source-chooser { gap: 12px; }

.source-btn {
  min-height: 118px;
  padding: 24px 16px;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.source-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: var(--accent-soft);
}

.source-btn svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  stroke-width: 1.7;
}

/* ── Forms ──────────────────────────────────────────────────── */
.source-panel-field label,
.settings-field label {
  font-weight: 600;
  color: var(--muted-strong);
}

.source-panel-field input[type=text],
.source-panel-field input[type=url],
.source-panel-field textarea,
.settings-input,
.search-input {
  background: var(--elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.015);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.source-panel-field input[type=text],
.source-panel-field input[type=url],
.source-panel-field textarea {
  padding: 11px 12px;
}

.settings-input,
.search-input { padding: 8px 11px; }

.source-panel-field input:focus,
.source-panel-field textarea:focus,
.settings-input:focus,
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--surface);
}

/* ── Collapsible settings sections (native <details>) ────────── */
.settings-section {
  border-top: 1px solid var(--border);
}
.settings-section:first-of-type {
  border-top: 0;
}
.settings-section > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted-strong);
}
.settings-section > summary::-webkit-details-marker {
  display: none;
}
.settings-section > summary:hover {
  color: var(--text);
}
.settings-section-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .15s ease;
}
.settings-section[open] > summary .settings-section-caret {
  transform: rotate(90deg);
}
.settings-section-body {
  padding-top: 4px;
}
/* the last field of an open section shouldn't stack its 32px margin on top of
   the next section's divider */
.settings-section-body > .settings-field:last-child {
  margin-bottom: 20px;
}

/* ── Settings › Consistent names: one radio + label/help per option ───── */
.vocab-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.vocab-mode-option input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.vocab-mode-option .label-hint {
  display: block;
  margin-top: 2px;
}

/* ── Segmented control — Settings › Appearance theme picker ───── */
.seg {
  display: inline-flex;
  gap: 2px;
  width: max-content;
  padding: 3px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--btn-compact-font);
  font-weight: 600;
  color: var(--muted);
  padding: 6px 18px;
  border-radius: calc(var(--btn-radius) - 3px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.seg-btn:hover {
  color: var(--text);
}
.seg-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Story / report content ─────────────────────────────────── */
.story-list { gap: 8px; }

.story-item {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  transition: background .15s ease, border-color .15s ease;
}

.story-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.story-item .story-name {
  font-size: 0.86rem;
  font-weight: 700;
}

.story-item .story-desc {
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Session vocabulary panel on the "Stories to generate" screen (renderVocabPanel).
   Groups are native <details>; rows are name | type pill | aliases | edit. */
.vocab-group {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.vocab-group > summary {
  cursor: pointer;
  font-size: var(--fs-secondary);
  font-weight: 600;
}

.vocab-kind {
  margin: 12px 0 4px;
  color: var(--muted);
  font-size: var(--fs-badge);
  font-weight: 600;
}

.vocab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
}

.vocab-row .vocab-name {
  font-size: 0.86rem;
  font-weight: 500;
}

.vocab-row .vocab-aliases {
  flex: 1;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Rotating "what this step is doing" line — under a running story/phase row on
   the progress screen, and as the caption below the spinner ring on the import
   screen. Claude-Code "working" treatment: a twinkling ✻ glyph plus a shimmer
   wave sweeping left-to-right through neutral-coloured text, so the eye lands on
   the line while a long step runs. Applied identically in both places. */
.story-item .phase-activity,
.spinner-wrap .inv-activity {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 4px;
  background: linear-gradient(
    100deg,
    var(--muted) 32%,
    var(--text) 50%,
    var(--muted) 68%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: phase-activity-shimmer 3s linear infinite;
  transition: opacity 0.3s ease;
}
.story-item .phase-activity::before,
.spinner-wrap .inv-activity::before {
  content: "\273B";           /* ✻ — same family as Claude Code's working glyph */
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  animation: phase-activity-twinkle 1.6s ease-in-out infinite;
}
.story-item .phase-activity.is-swapping,
.spinner-wrap .inv-activity.is-swapping {
  opacity: 0;
}
.spinner-wrap .inv-activity {
  /* Own line, below the spinner ring — never beside it. width:fit-content
     keeps the shimmer gradient mapped to the text (not the full panel) while
     the element still lays out as its own block. */
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
}

/* Per-item terminal-state icon on the right of a progress row (icon-only;
   colour set inline so lucide's <svg> inherits it via currentColor). */
.progress-state-icon {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.progress-state-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

@keyframes phase-activity-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@keyframes phase-activity-twinkle {
  0%, 100% { opacity: 0.3;  transform: scale(0.82); }
  50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .story-item .phase-activity,
  .spinner-wrap .inv-activity {
    background: none;
    color: var(--muted);
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
  .story-item .phase-activity::before,
  .spinner-wrap .inv-activity::before {
    animation: none;
    opacity: 0.7;
  }
}

.group-b-toggle {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
}

/* ============================================================
   Meeting debrief panel  (family-view · renderReport)
   ------------------------------------------------------------
   The in-app twin of the "Open overview" dashboard (doc_page.css):
   a marigold thread with tick nodes, a two-column summary row,
   icon badges from web/icons/, finding-rows, and a mono signal
   strip on each story card. Prose stays prose — the dashboard
   treatment is spent only where the content is structured or
   countable. Single source of truth for every .report-* rule.
   ============================================================ */
.report-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text);
}
.report-toggle:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.report-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.15s;
}
.report-toggle.open .report-chevron { transform: rotate(90deg); }
/* Matches .panel h2 — the sibling panels on this page ("Want to model more…",
   "Imports"). Everything on screen is the app sans now; hierarchy here is
   weight and size, not a face change. */
.report-title {
  font-size: var(--fs-heading);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.report-toggle:hover .report-title { color: var(--accent); }

.report-preview {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.report-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--elevated);
  font-size: var(--fs-badge);
  font-weight: 600;
  color: var(--muted-strong);
  white-space: nowrap;
}
.report-chip__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
}
.report-chip__glyph { width: 11px; height: 11px; }
.report-chip__dot {
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-radius: 50%;
  background: currentColor;
}
.report-chip--detailed { color: var(--accent); }
.report-chip--workable { color: color-mix(in srgb, var(--accent) 76%, var(--muted)); }
.report-chip--sparse   { color: var(--muted); }

.report-body { display: none; margin-top: 18px; }
.report-body.open { display: block; }

/* ── Section heading + icon badge ── */
.report-heading {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--muted);
}
.report-node__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  margin-bottom: 8px;
}
.report-node__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid transparent;
}
.report-node__glyph { width: 15px; height: 15px; }
.report-node__badge--neutral { background: var(--elevated); color: var(--muted-strong); border-color: var(--border); }
.report-node__badge--ok      { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 20%, transparent); }
.report-node__badge--warn    { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 20%, transparent); }
.report-node__badge--info    { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.report-node__badge--accent  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }
.report-node__badge--ink     { background: var(--elevated); color: var(--text); border-color: var(--border); }
.report-node__badge--muted   { background: transparent; color: var(--muted); border-color: var(--border); }

.report-text {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  line-height: 1.7;
}
.report-text:last-child { margin-bottom: 0; }
.report-muted { color: var(--muted); font-size: var(--fs-secondary); }
.report-label { color: var(--muted-strong); font-weight: 600; }
.report-inline-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--muted);
}

/* ── Summary row (covered | strongest) ── */
.report-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.report-summary-row .report-node {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 98%, white 2%),
      var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

/* ── The thread ── */
.report-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 22px;
  margin-bottom: 22px;
}
.report-thread::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
/* The tick node — a small marigold diamond sitting on the thread line. */
.report-thread .report-node__head::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 10px;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ── Finding rows (debrief "missed" / "tips") ── */
.report-findings { list-style: none; margin: 0; padding: 0; }
.report-findings li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.report-findings li:first-child { padding-top: 0; }
.report-findings li:last-child { padding-bottom: 0; border-bottom: 0; }
.report-finding__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid transparent;
}
.report-finding__glyph { width: 13px; height: 13px; }
.report-finding__icon--warn   { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 18%, transparent); }
.report-finding__icon--info   { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 18%, transparent); }
.report-finding__icon--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }

/* ── One question — the pull-quote ── */
.report-question {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--text);
}
.report-question::before {
  content: "\201C";
  margin-right: 2px;
  color: var(--accent);
  font-size: 1.3em;
  line-height: 0;
  vertical-align: -0.25em;
}

/* ── Rule standouts ── (each links into the guide #rule-N; the good / focus
   split and the guide's own rule number are the only signals — no ok/warn pills) */
.report-rules-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.report-rules-col {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: var(--radius);
}
.report-rules-col--well  { border-left-color: var(--ok); }
.report-rules-col--focus { border-left-color: var(--accent); }
.report-rules-col .report-heading { display: block; margin-bottom: 10px; }
.report-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-rules li { display: flex; flex-direction: column; gap: 2px; }
a.report-rule {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  align-self: flex-start;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}
.report-rule-num {
  flex-shrink: 0;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
}
.report-rules-col--well .report-rule-num {
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: var(--ok-bg);
  color: var(--ok);
}
a.report-rule:hover .report-rule-name,
a.report-rule:focus-visible .report-rule-name {
  color: var(--accent);
  text-decoration: underline;
}
a.report-rule svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  align-self: center;
  color: var(--muted);
}
.report-rule-note {
  font-size: var(--fs-secondary);
  line-height: 1.55;
  color: var(--muted);
}

/* ── Stories ── the head carries an icon badge; the marigold left edge on
   each card is the thread motif here, so no line / tick. */
.report-thread--stories {
  display: block;
  padding-left: 0;
  margin-bottom: 22px;
}
.report-thread--stories::before { display: none; }
.report-thread--stories .report-node__head::before { content: none; }
.report-thread--stories .report-node__head { margin-bottom: 12px; }
.report-stories { display: flex; flex-direction: column; gap: 12px; }

/* ── Story tabs ── one story at a time; strip mirrors the glossary viewer's
   .view-tabs (wraps here because a debrief can name many stories). */
.report-story-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.report-story-tab {
  max-width: 100%;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-story-tab:hover { color: var(--text); }
.report-story-tab[aria-selected="true"] { background: var(--accent); color: #fff; }
.report-story-tab:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.report-story-panel[hidden] { display: none; }
.report-story {
  padding: 14px 16px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
}
.report-story-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.report-story .story-name { font-size: var(--fs-card-title); font-weight: 700; }
.report-state {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-badge);
  font-weight: 700;
  letter-spacing: .02em;
}
.report-state--ok {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
.report-state--neutral {
  color: var(--muted);
  background: color-mix(in srgb, var(--elevated) 80%, transparent);
  border-color: var(--border);
}

.report-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}
.report-signal {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  font-size: var(--fs-badge);
  color: var(--muted);
}
.report-signal__n {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Story asides (not captured / ask next time) ── */
.report-aside { margin-top: 10px; }
.report-aside__label {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.report-aside__glyph { width: 12px; height: 12px; margin-right: 5px; }
.report-aside--warn .report-aside__glyph { color: var(--warn); }
.report-aside--accent .report-aside__glyph { color: var(--accent); }
.report-aside__list { margin: 4px 0 0; padding-left: 16px; }
.report-aside__list li {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--muted-strong);
}

/* ── Mentioned, but not a story ── */
.report-node--plain { margin-top: 4px; }
.report-units { display: flex; flex-direction: column; gap: 8px; }
.report-unit { font-size: var(--fs-body); line-height: 1.5; }
.report-unit-why { font-size: var(--fs-secondary); color: var(--muted); }

@media (max-width: 720px) {
  .report-summary-row,
  .report-rules-row { grid-template-columns: 1fr; }
  .report-preview { flex-basis: 100%; margin: 6px 0 0; }
}

/* ── Tables ───────────────────────────────────────────────────
   One block now — the early-generation copy up the file was folded in
   (ADR 0008 phase 6b). table-layout: fixed + the colgroup in app.js
   (renderRunsTable) pin the column widths so expanding a row's story
   list can't reflow the others. Cell/header type is matched to the
   doc-page `table` block in web/doc_page.css — 1.0625rem cells,
   0.9375rem / 800 / .04em headers, not uppercase — so the family view's
   runs table and main-index-dashboard's tables read at one size. */
.runs-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-table);
  overflow: hidden;
  border-radius: 10px;
}

.runs-table th {
  text-align: left;
  color: var(--muted);
  background: var(--elevated);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-table-head);
  font-weight: 800;
  letter-spacing: .04em;
}

.runs-table th:first-child { border-top-left-radius: 6px; }
.runs-table th:last-child { border-top-right-radius: 6px; }

.runs-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.runs-table tr:last-child td { border-bottom: none; }

.runs-table tbody tr {
  transition: background .15s ease;
}

.runs-table tbody tr:hover {
  background: var(--surface-hover);
}

/* ── Banners ────────────────────────────────────────────────── */
.banner {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .82rem;
  box-shadow: var(--shadow-sm);
}

.banner-error {
  border-color: color-mix(in srgb, var(--err) 35%, transparent);
}

.banner-warning {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(0, 8, 18, .62);
  backdrop-filter: blur(8px);
}

.modal-overlay--opaque {
  background: rgba(0, 8, 18, .92);
}

.modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}

/* ── Rename dialog ─────────────────────────────────────────── */
#renameInput {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#renameInput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.modal-error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--err);
}

/* ── Checkboxes ─────────────────────────────────────────────── */
input[type=checkbox] {
  border-color: var(--border-strong);
  border-radius: 5px;
  background: var(--elevated);
}

input[type=checkbox]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Links / small actions ──────────────────────────────────── */
.btn-link,
.subtitle a,
.story-open-link {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

.btn-link:hover,
.subtitle a:hover,
.story-open-link:hover {
  color: var(--accent-hover);
}

.attachment-chip {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn-danger-sm {
  border-color: var(--border);
  color: var(--err);
  background: transparent;
}

.btn-danger-sm:hover {
  background: var(--err-bg);
  border-color: color-mix(in srgb, var(--err) 50%, var(--border));
}

/* ── Focus: one consistent accessible ring ─────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Scrollbar (Chromium/WebKit) ────────────────────────────── */
:root[data-theme="dark"] {
  scrollbar-color: var(--elevated) var(--bg);
}

:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--elevated);
  border: 3px solid var(--bg);
  border-radius: 999px;
}

/* ── Dark-only cleanup for legacy hard-coded light values ───── */
/* (The primary button's dark fill now lives in tokens.css --btn-primary-*,
   which flips per theme — no override needed here.) */
:root[data-theme="dark"] .story-item:hover,
:root[data-theme="dark"] .btn-danger-sm:hover {
  background: var(--surface-hover);
}

:root[data-theme="dark"] .group-b-toggle,
:root[data-theme="dark"] .pill-muted {
  background: var(--elevated);
}

:root[data-theme="dark"] .session-card--action {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--warn-bg) 65%, var(--surface)),
      var(--surface));
}

/* ── Responsive polish ──────────────────────────────────────── */
/* .main's max-width steps down via --app-content-max (klarik.ui
   tokens.css), the same token .k-header__inner and .page read -- so the
   header and content column stay aligned at every width with nothing
   repeated here. Only .main's own padding is set below. */
@media (max-width: 899px) {
  .main { padding: 22px 0 40px; }

  .session-grid {
    grid-template-columns: 1fr;
  }

  .panel { padding: 20px; }
}

@media (max-width: 560px) {
  .panel {
    border-radius: 12px;
    padding: 18px;
  }

  .session-card {
    padding: 16px;
    flex-wrap: wrap;
  }

  .card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================================================
   Dashboard view — align with the session overview (doc page)
   ------------------------------------------------------------
   Mirrors doc_page.css's "analytical-dashboard refresh": a navy
   gradient hero header with a serif title, and a status badge on
   every card. Scoped to #viewDashboard so #viewUpload's plain
   .section-header is left as-is.
   ============================================================ */

#viewDashboard .section-header {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--navy) 92%, var(--accent) 8%),
      var(--navy));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
  margin-bottom: 18px;
}

#viewDashboard .section-header h2 {
  font-family: var(--font-sans);
  /* Fixed light colour, not var(--text) — same reasoning as .doc-header h1
     (the theme-guarded rules below flatten this hero the way .k-header is
     flattened for the app header). */
  color: #fff;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.006em;
  line-height: 1.2;
}

#viewDashboard .section-header .search-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

#viewDashboard .section-header .search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

#viewDashboard .section-header .search-input:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Each card leads with a state badge, the way the report's .status-card
   pairs a title with a status badge. */
.session-card .card-badges { margin-bottom: 6px; }

.session-card .card-badges .pill {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
}

/* The Project chip carries a name, not a status word: keep its casing, let it
   truncate rather than wrap the badge row. */
.session-card .card-badges .pill-project {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

@media (max-width: 560px) {
  #viewDashboard .section-header { padding: 18px 18px; }
}

/* ============================================================
   Light theme: flatten the "Transcripts" hero
   ------------------------------------------------------------
   The hero (#viewDashboard .section-header) was navy in every
   theme, pulling visual weight off the cards. In light theme
   drop it to the page surface with a shadow for separation.
   (The app header got the same treatment; it now lives in
   klarik.ui's .k-header component, flattened for both themes
   there.)
   ============================================================ */
:root:not([data-theme="dark"]) #viewDashboard .section-header {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
:root:not([data-theme="dark"]) #viewDashboard .section-header h2 { color: var(--text); }
:root:not([data-theme="dark"]) #viewDashboard .section-header .search-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root:not([data-theme="dark"]) #viewDashboard .section-header .search-input::placeholder {
  color: var(--muted);
}
:root:not([data-theme="dark"]) #viewDashboard .section-header .search-input:focus {
  background: var(--surface);
}

/* ============================================================
   Dark theme: match the light-theme dashboard pass (commit 0a658ef)
   ------------------------------------------------------------
   Same intent as the light rules above — flatten the chrome, drop
   the accent-coloured outlines, let one CTA ("Review") carry the
   colour so the grid reads calm. Guarded to :root[data-theme="dark"]
   (also covers the Teal variant). CSS only.
   ============================================================ */

/* "Transcripts" hero: off the navy gradient onto the plain surface with a
   shadow for separation — the same move as light theme. (The app header
   got the same treatment; it's klarik.ui's .k-header component now,
   flattened for both themes there.) */
:root[data-theme="dark"] #viewDashboard .section-header {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
:root[data-theme="dark"] #viewDashboard .section-header h2 { color: var(--text); }
:root[data-theme="dark"] #viewDashboard .section-header .search-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] #viewDashboard .section-header .search-input::placeholder {
  color: var(--muted);
}
:root[data-theme="dark"] #viewDashboard .section-header .search-input:focus {
  background: var(--surface);
}

/* The filled card buttons that remain (Review on --action cards, the
   failed / running roll-up) drop the .btn drop-shadow here so the dark grid
   reads flat. The resting "View" is .btn-outline (quiet in both themes) and
   needs nothing. */
:root[data-theme="dark"] .session-card .card-actions .btn {
  box-shadow: none;
}

/* Secondary card text failed contrast in --muted on the dark surface —
   lift to --muted-strong. Amber status line on --action cards is a
   deliberate signal, left alone. */
:root[data-theme="dark"] .session-card:not(.session-card--action) .status-desc,
:root[data-theme="dark"] .session-card .meta {
  color: var(--muted-strong);
}

/* Card depth: firmer hairline + a soft shadow instead of a high-contrast
   fill. Hover keeps its lift. */
:root[data-theme="dark"] .session-card {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .session-card:hover {
  box-shadow: var(--shadow-pop);
}

/* Trash icon: recede to 40% until the card (or the control) is
   hovered/focused. */
:root[data-theme="dark"] .session-card .btn-danger-sm {
  opacity: 0.4;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
:root[data-theme="dark"] .session-card:hover .btn-danger-sm,
:root[data-theme="dark"] .session-card .btn-danger-sm:hover,
:root[data-theme="dark"] .session-card .btn-danger-sm:focus-visible {
  opacity: 1;
}

/* ============================================================
   Project bar / strip / dialog  (docs/intent/meeting-projects.md)
   ------------------------------------------------------------
   A flat organizing layer between the "Transcripts" hero and the
   card grid. Reuses the .seg / .btn-link control language and
   existing tokens only — no new palette, no new --btn-* values.
   ============================================================ */

.project-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.project-chip { flex-shrink: 0; }

/* "All" + pinned chips scroll sideways in this inner track if they overflow
   (docs/intent/meeting-projects.md, Addendum 4). The "Projects ▾" trigger and
   "+ New" sit outside it and never move, and the picker popover -- anchored to
   .project-picker-wrap, a sibling of this track -- is never clipped by the
   track's overflow. */
.project-bar-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.project-chip {
  appearance: none;
  font-family: inherit;
  font-size: var(--btn-compact-font);
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.project-chip:hover { color: var(--text); border-color: var(--border-strong); }
.project-chip.is-active {
  background: var(--elevated);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.project-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.project-chip--new { border-style: dashed; }
.project-chip-count { margin-left: 6px; opacity: .55; }

/* "Projects ▾" — opens the searchable picker of every Project */
.project-chip--more { display: inline-flex; align-items: center; gap: 4px; }
.project-chip--more i { width: 14px; height: 14px; }

.project-picker-wrap { position: relative; display: inline-flex; flex-shrink: 0; }

.project-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 260px;
  max-height: min(60vh, 420px);
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.project-picker[hidden] { display: none; }

.project-picker-search { padding: 4px; }
.project-picker-search input {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}
.project-picker-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.project-picker-list { overflow-y: auto; }

.project-picker-row { display: flex; align-items: center; gap: 4px; }
.project-picker-row.is-active .project-picker-pick { color: var(--accent); }

.project-picker-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.project-picker-pick:hover { background: var(--surface-hover); }
.project-picker-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.project-pin {
  display: flex;
  align-items: center;
  padding: 6px;
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted);
  cursor: pointer;
}
.project-pin:hover { background: var(--surface-hover); color: var(--text); }
.project-pin i { width: 14px; height: 14px; }
.project-pin.is-pinned { color: var(--accent); }
.project-pin.is-locked { cursor: default; opacity: .4; }
.project-pin.is-locked:hover { background: none; color: var(--muted); }

.project-picker-empty { padding: 12px 10px; font-size: 0.82rem; color: var(--muted); }

.project-picker-new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.project-picker-new:hover { background: var(--surface-hover); }
.project-picker-new i { width: 15px; height: 15px; }

.project-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: -6px 0 18px;
  font-size: 0.82rem;
  color: var(--muted);
}
.project-strip-name { color: var(--text); font-weight: 600; }
.project-strip-desc {
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-strip .btn-link { font-size: 0.82rem; }

.project-modal-pin {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.project-modal-pin input { cursor: pointer; }

/* "Move to project" section inside the card overflow menu */
.card-overflow-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.card-overflow-label {
  padding: 6px 10px 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.card-overflow-item[aria-checked="true"] { color: var(--accent); }

/* Project dialog — reuses #renameModal's overlay/box; these are the extras */
#projectNameInput,
#projectDescInput {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#projectDescInput { resize: vertical; min-height: 62px; }
#projectNameInput:focus,
#projectDescInput:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.project-modal-dates {
  margin: 0;
  font-size: 0.78rem;
  text-align: left;
  color: var(--muted);
}
.project-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-modal-primary {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.project-modal-delete { color: var(--err); }
.project-modal-delete[disabled] {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
}

/* "Other project…" dialog — reuses .modal-overlay/.modal-box, left-aligned with
   a searchable, scrolling list. */
.move-project-modal {
  text-align: left;
  max-width: 420px;
  gap: 12px;
}
.move-project-title { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.move-project-meeting {
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#moveProjectSearch {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#moveProjectSearch:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.move-project-list {
  display: flex;
  flex-direction: column;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  margin: 0 -6px;
}
.move-project-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.move-project-row:hover { background: var(--surface-hover); }
.move-project-row i { width: 15px; height: 15px; flex-shrink: 0; }
.move-project-row span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-project-row[aria-selected="true"] { color: var(--accent); }
.move-project-actions { display: flex; justify-content: flex-end; }

/* Session vocabulary edit popup (#vocabEditModal) — reuses .modal-overlay /
   .modal-box, left-aligned like the "Other project…" dialog. On a large screen
   it is two columns — what it is | what else it's called, with quotes — and only
   the columns scroll, so the title, messages and Save/Cancel never leave view.
   Below 820px the columns stack and the body scrolls as one. The merge list
   reuses .move-project-list / .move-project-row. */
.vocab-edit-modal {
  text-align: left;
  max-width: 1000px;
  width: 92%;
  max-height: 90vh;
  overflow: hidden;
  gap: 12px;
}
.vocab-edit-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.vocab-edit-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}
.vocab-edit-main,
.vocab-edit-names {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* A scroll box clips whatever is drawn past its edge, focus rings included, so
   both scrolling columns pad themselves and pull back by the same amount: the
   content still lines up with the title, and a selected field's ring shows. */
.vocab-edit-main,
.vocab-alias-list {
  padding: 6px 10px 6px 6px;
  margin: -6px -10px -6px -6px;
}
.vocab-edit-main { overflow-y: auto; }
/* The list only takes the room its names need, so "Add another name" sits right
   under the last one; a long list scrolls instead of growing past the column. */
.vocab-edit-names-field { flex: 0 1 auto; min-height: 0; }
.vocab-alias-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
/* "Is this the same as…" is its own action, kept apart at the foot of the column. */
.vocab-same-section {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vocab-same-section > .vocab-edit-note { margin: 0; }
@media (max-width: 820px) {
  .vocab-edit-body { overflow-y: auto; padding: 6px; margin: -6px; }
  .vocab-edit-cols { display: flex; flex-direction: column; gap: 16px; flex: none; }
  .vocab-edit-main,
  .vocab-alias-list { overflow: visible; }
}
.vocab-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vocab-edit-field > span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}
.vocab-edit-input {
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
textarea.vocab-edit-input { resize: vertical; }
.vocab-edit-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
/* One other name: a head row (the word, "Is it a different item?", ×) with the
   transcript quotes below it. */
.vocab-alias {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}
.vocab-alias-head,
.vocab-alias-add {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}
.vocab-alias-name { flex: 1 1 45%; font-weight: 500; overflow-wrap: anywhere; }
.vocab-alias-head .vocab-edit-input,
.vocab-alias-add .vocab-edit-input { flex: 1; }
.vocab-alias-head .btn-link { font-size: 0.8rem; text-align: right; }
/* One question per name adds up; keep them quiet until pointed at, so the
   popup's own question ("Is this the same as…") stays the one that stands out. */
.vocab-alias-head .vocab-alias-split { color: var(--muted); font-weight: 500; }
.vocab-alias-head .vocab-alias-split:hover { color: var(--accent); }
.vocab-alias-add .btn-link { font-size: 0.8rem; white-space: nowrap; }
.vocab-alias--split,
.vocab-alias--remove { display: flex; flex-direction: column; gap: 6px; }
.vocab-alias--remove .vocab-edit-note { margin: 0; }
.vocab-split-question { margin: 0; font-weight: 600; }
.vocab-split-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vocab-split-actions .btn-link { font-size: 0.85rem; }

/* Where a word was said — word-for-word transcript quotes. */
.vocab-quotes {
  margin: 4px 0 0;
  padding: 0 0 0 10px;
  list-style: none;
  border-left: 2px solid var(--border);
}
.vocab-quotes li {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
}
.vocab-quotes li + li { margin-top: 3px; }
.vocab-quote-none {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.vocab-name-quotes:empty { display: none; }
.vocab-intro-kinds {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.vocab-intro-kinds strong { font-weight: 600; }
.vocab-alias-remove {
  background: none;
  border: none;
  padding: 0 4px;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.vocab-alias-remove:hover { color: var(--err); }
.vocab-merge { display: flex; flex-direction: column; gap: 6px; }
/* Each choice shows its other names under it: they all come across when picked. */
.vocab-merge-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.vocab-merge-row span:first-of-type { width: 100%; }
.vocab-merge-also { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
/* Type-to-find box above a long list (panel names, or a popup's other names). */
.vocab-filter { width: 100%; box-sizing: border-box; }
.vocab-panel .vocab-filter { margin: 4px 0 10px; }
.vocab-kind-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 0.88rem;
}
.vocab-kind-switch label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.vocab-kind-switch input { accent-color: var(--accent); }
.vocab-edit-modal .btn-link { align-self: flex-start; min-width: 0; }
.vocab-edit-messages ul { margin: 0; padding-left: 18px; font-size: 0.85rem; }
.vocab-edit-warning { color: var(--warn); }
.vocab-edit-actions { display: flex; gap: 12px; justify-content: flex-end; }
.vocab-edit-actions .btn { align-self: auto; }
.vocab-row .vocab-edit { font-size: 0.82rem; }

/* Session view: the transcript name heading is the anchor for the whole
   processing screen — lift it above the shared .section-header h2 size so it
   reads clearly while the status messages run below. Scoped to #viewSession so
   no other view's heading changes. */
#viewSession .section-header h2 {
  font-size: 1.3rem;
}

/* "Adding to <Project>" — shown in the upload panel (#uploadProjectHint) and
   the processing view (#sessionProjectHint) when a new import will inherit the
   dashboard's active Project chip (docs/intent/meeting-projects.md addendum).
   Accent-tinted so it reads as a deliberate destination, not a status line. */
.upload-project-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 6px 12px;
  font-size: var(--fs-secondary);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius);
}

/* Session view: the progress ("render details") screen while doc-tasks run.
   Scoped to .progress-panel (renderProgressTable's panel only) so the story
   selection list, which shares .story-name / .story-desc, is left at its
   smaller size. */
.progress-panel h2 {
  font-size: 1.3rem;
}
.progress-panel .story-name {
  font-size: 1rem;
  /* Match the rotating activity line's resting colour (its shimmer sits
     between --muted and --text) instead of full-strength --text. */
  color: var(--muted);
}
.progress-panel .story-desc {
  font-size: 0.9rem;
}