/* ============================================================
   FILAMENT v2 — PatentFunnel design tokens
   Graphite-cool neutrals · one kingfisher accent (petrol light /
   electric cyan dark) · bronze metadata.
   Every text/background pair below is measured ≥ 4.5:1 (WCAG AA);
   headings/body are AAA. Dark mode is a token swap — components
   never hardcode a color.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Ink triplet (for alpha-derived washes only — text uses the tiers) */
  --ink-rgb: 20, 20, 25;

  /* ---- Text tiers */
  --text-heading: #141419;   /* 17.5:1 on --bg */
  --text-body: #34343c;      /* 11.7:1 */
  --text-secondary: #55555f; /*  7.0:1 */
  --muted: #6f6f7b;          /*  4.7:1 — smallest text only */
  --faint: rgba(var(--ink-rgb), 0.38); /* placeholders/disabled — never body copy */

  /* ---- Surfaces */
  --bg: #f9f9fa;             /* page canvas */
  --bg-alt: #f3f3f5;         /* alternating landing bands, rail wells */
  --surface: #ffffff;        /* cards, panels, inputs */
  --surface-raised: #ffffff; /* modals/popovers (elevation via shadow in light) */
  --surface-sunken: #efeff2; /* wells, dropzones, code blocks */

  /* ---- Hairlines */
  --line: #e6e6ea;
  --line-strong: #d2d2d9;    /* hover borders, table header rules */
  --line-faint: #ececef;     /* row separators */

  /* ---- Brand (kingfisher — deep petrol in light) */
  --brand: #0f5e6d;          /* 7.02:1 as text on --bg */
  --brand-hover: #0a4c5a;
  --brand-active: #083e4a;
  --brand-ink: #ffffff;      /* text on brand fills — 7.39:1 */
  --brand-rgb: 15, 94, 109;
  --brand-tint: #e7f1f3;     /* selected bg, hover washes */
  --brand-tint-strong: rgba(var(--brand-rgb), 0.18);
  --brand-border: rgba(var(--brand-rgb), 0.35);

  /* ---- Steel (secondary accent: mono eyebrows, metadata — never actions)
     v2: the lane is now BRONZE; the --steel name is kept so 1000+ existing
     usages keep working — only the value changed. */
  --steel: #6e6150;          /* bronze — as text on --bg */
  --steel-ink: #ffffff;
  --steel-tint: rgba(110, 97, 80, 0.10);

  /* ---- Status (all pass 4.5:1 as text on --bg/--surface) */
  --success: #1a7f4b;  --success-tint: rgba(26, 127, 75, 0.10);
  --warning: #a16207;  --warning-tint: rgba(161, 98, 7, 0.10);
  --danger: #c81e3c;   --danger-tint: rgba(200, 30, 60, 0.10);
  --danger-fill: #c81e3c;
  --info: #2563eb;     --info-tint: rgba(37, 99, 235, 0.10);

  /* ---- Ceremonial (filed/complete, Ultra tier) — the ember carries ceremony */
  --ember-glow: radial-gradient(ellipse 640px 420px at center,
      rgba(var(--brand-rgb), 0.10) 0%, rgba(var(--brand-rgb), 0.03) 45%, transparent 72%);

  /* ---- Focus (one rule app-wide) */
  --focus-border: var(--brand);
  --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.25);

  /* ---- Shadows (cool graphite cast; always paired with a hairline border) */
  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.06);
  --shadow-md: 0 2px 8px rgba(var(--ink-rgb), 0.07);
  --shadow-lg: 0 12px 32px rgba(var(--ink-rgb), 0.10);
  --shadow-hover: 0 8px 24px rgba(var(--ink-rgb), 0.10), 0 2px 6px rgba(var(--ink-rgb), 0.05);
  /* Page dim behind modal layers. A fixed dark value on purpose: --ink-rgb turns light in
     dark mode, and a scrim must darken in both. */
  --scrim: rgba(15, 23, 42, 0.45);

  /* ---- Radius scale (three sizes + pill) */
  --radius-ctl: 8px;    /* buttons, inputs, selects */
  --radius-card: 12px;  /* cards, panels, dropzones */
  --radius-modal: 16px; /* modals, sheets */
  --radius-pill: 999px;

  /* ---- Type families (vendored — fonts.css) */
  --font-display: "Schibsted Grotesk", var(--font-sans);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Dense app type scale (unchanged steps) */
  --fs-badge: 10px;
  --fs-meta: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-reading: 14px;
  --fs-heading: 15px;
  --fs-lg: 17px;

  /* ---- Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 120ms;
  --dur-panel: 150ms;
  --dur-lift: 220ms;
  --dur-reveal: 650ms;

  /* ---- Charts */
  --chart-1: #0f7080;
  --chart-2: #9a5b8f;
  --chart-3: #b08a35;
  --chart-4: #557f63;
  --chart-5: #4c6fa6;

  /* ---- Layout: one app content column, aligned topbar↔content.
     1200px is the mid-2020s SaaS dashboard width (≈ Tailwind max-w-7xl); the gutter
     keeps content off the edge on narrower viewports. Chrome (topbar) aligns to the
     same column so the brand/nav sit flush with the content, not at the screen edges. */
  --app-max-width: 1200px;
  --app-gutter: 24px;
  --left-pane-width: 280px;
  --right-pane-width: 360px;
  --reviewer-left-width: 280px;
  --reviewer-right-width: 420px;
  --math-side-width: 520px;
  --math-panel-height: 48vh;
  --review-bottom-height: 320px;

  /* ---- Legacy aliases (migration bridge — retire as the sweep lands) */
  --panel: var(--surface);
  --ink: var(--text-body);
  --accent: var(--brand);
  --accent-dark: var(--brand-hover);
  --accent-tint: var(--brand-tint);
  --blue: var(--info);
  --shadow: var(--shadow-md);
}

/* ============ DARK — a first-class mode, not an inversion ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink-rgb: 244, 244, 246;

    --text-heading: #f4f4f6;   /* 17.3:1 on --bg */
    --text-body: #d5d5dc;
    --text-secondary: #a3a3af;
    --muted: #87879a;
    --faint: rgba(var(--ink-rgb), 0.35);

    --bg: #101013;             /* tinted graphite, not void black */
    --bg-alt: #141418;
    --surface: #18181d;
    --surface-raised: #1e1e24; /* dark elevates by tone, not shadow */
    --surface-sunken: #0b0b0e;

    --line: #26262c;
    --line-strong: #34343c;
    --line-faint: #1e1e24;

    --brand: #3fd2e8;          /* kingfisher electrifies; 10.49:1 as text on --bg */
    --brand-hover: #63dcee;
    --brand-active: #2bc3dc;
    --brand-ink: #04232a;      /* cyan fill + near-black ink — the signature */
    --brand-rgb: 63, 210, 232;
    --brand-tint: rgba(var(--brand-rgb), 0.12);
    --brand-tint-strong: rgba(var(--brand-rgb), 0.22);
    --brand-border: rgba(var(--brand-rgb), 0.40);

    /* Bronze lane (token name kept — see :root note) */
    --steel: #b0a490;
    --steel-ink: #191410;
    --steel-tint: rgba(176, 164, 144, 0.12);

    --success: #3dbb7e;  --success-tint: rgba(61, 187, 126, 0.14);
    --warning: #e5b34a;  --warning-tint: rgba(229, 179, 74, 0.14);
    --danger: #ff5d73;   --danger-tint: rgba(255, 93, 115, 0.14);
    --danger-fill: #c81e3c;
    --info: #5d9bff;     --info-tint: rgba(93, 155, 255, 0.14);

    --ember-glow: radial-gradient(ellipse 640px 420px at center,
        rgba(var(--brand-rgb), 0.16) 0%, rgba(var(--brand-rgb), 0.05) 45%, transparent 72%);

    --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.30);

    /* Shadows nearly vanish; surface tone + top-edge highlight do the work */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
    --scrim: rgba(0, 0, 0, 0.62); /* the light-mode slate barely dims a near-black page */

    --chart-1: #4fd0e4;
    --chart-2: #c287b5;
    --chart-3: #d8b163;
    --chart-4: #7dab8d;
    --chart-5: #7d9bd0;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  /* Consistent app-wide base; without this the browser default (16px) leaks
     into everything that inherits (chat, inputs, selects, buttons) while panels
     used 12-13px, causing the size mismatch across the app. */
  font-size: 13px;
  line-height: 1.5;
}

/* NOTHING in this app is underlined. Anchors inherit their surroundings by default, exactly as
   marketing.css already does, and a link earns its appearance from a class: a button, a card, a
   chip, a nav item, or .text-link below. Without this rule each of those classes had to remember
   `text-decoration: none` on its own, and the ones that forgot shipped — the org chip on the
   Disclosure Desk, then the disclosure call-to-action in the vault hero. A default that has to
   be suppressed everywhere is the wrong default, so it changed.

   Underlines are not used as a hover affordance either: hover shifts colour. Search this file
   for `text-decoration: underline` — there should be no hits. */
a {
  color: inherit;
  text-decoration: none;
}

/* An inline link inside a sentence — the one case that is neither a button nor a card. It reads
   as a link through brand colour and weight, never a rule under the text. */
.text-link {
  color: var(--brand);
  font-weight: 650;
}

.text-link:hover {
  color: var(--brand-hover);
}

.text-link:focus-visible {
  border-radius: 3px;
  box-shadow: var(--focus-ring);
  outline: none;
}

button,
input,
select,
textarea {
  /* textarea MUST be here: without it, browsers default <textarea> to monospace,
     so every multi-line field (review editors, template box, disclosure paste)
     rendered in system Courier/Menlo instead of the app's Inter. */
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--left-pane-width) 6px minmax(460px, 1fr) 6px var(--right-pane-width);
  height: 100vh;
  min-height: 720px;
}

body.math-helper-side .app-shell {
  grid-template-columns: var(--left-pane-width) 6px minmax(360px, 1fr) 6px var(--math-side-width);
}

body.reader-maximized .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.reader-maximized .doc-rail,
body.reader-maximized .pane-resizer,
body.reader-maximized .probe-panel {
  display: none;
}

body.reader-maximized .reader-column {
  grid-column: 1;
}

body.reader-maximized .reader-toolbar {
  min-height: 60px;
}

body.reader-maximized .reader-surface {
  padding: 12px;
}

/* Independent collapse of the whole right (assistant) pane for more reading
   width, separate from "Maximize PDF" (which also hides the math panel). */
body.right-pane-hidden .app-shell {
  grid-template-columns: var(--left-pane-width) 6px minmax(460px, 1fr);
}

body.math-helper-side.right-pane-hidden .app-shell {
  grid-template-columns: var(--left-pane-width) 6px minmax(360px, 1fr) 6px var(--math-side-width);
}

body.right-pane-hidden .probe-panel,
body.right-pane-hidden .pane-resizer-right {
  display: none;
}

.right-pane-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl) 0 0 var(--radius-ctl);
  border-right: 0;
  box-shadow: -2px 0 8px var(--line-faint);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  position: fixed;
  right: var(--right-pane-width);
  top: 96px;
  transition: background 120ms ease, color 120ms ease, right 130ms ease;
  width: 20px;
  z-index: 30;
}

.right-pane-toggle::before {
  content: "\203A";
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

body.right-pane-hidden .right-pane-toggle {
  right: 0;
}

body.right-pane-hidden .right-pane-toggle::before {
  content: "\2039";
}

.right-pane-toggle:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

.right-pane-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body.reader-maximized .right-pane-toggle {
  display: none;
}

/* Persistent credit warning window. */
.credit-banner[hidden] {
  display: none;
}

.credit-banner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  bottom: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  position: fixed;
  right: 16px;
  width: 320px;
  z-index: 60;
}

.credit-banner.is-depleted {
  border-color: var(--danger);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--danger) 28%, transparent);
}

.credit-banner-title {
  color: var(--ink);
  font-size: 14px;
}

.credit-banner.is-depleted .credit-banner-title {
  color: var(--danger);
}

.credit-banner-detail {
  color: var(--muted);
  font-size: 12px;
}

.credit-bar {
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
}

.credit-bar-fill {
  background: var(--brand);
  display: block;
  height: 100%;
}

.credit-banner.is-depleted .credit-bar-fill {
  background: var(--danger);
}

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

.credit-topup-btn {
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--brand-ink);
  cursor: pointer;
  font-weight: 750;
  padding: 7px 12px;
}

.credit-topup-btn:hover {
  background: var(--brand-hover);
}

.credit-auto {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 5px;
}

.credit-manage {
  color: var(--brand-hover);
  font-size: 12px;
  margin-left: auto;
}

.credit-dismiss {
  background: transparent;
  border: 0;
  color: var(--faint);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

.credit-dismiss:hover {
  color: var(--ink);
}

.doc-rail,
.probe-panel {
  background: var(--surface);
  border-color: var(--line);
  border-style: solid;
  overflow: hidden;
}

.doc-rail {
  border-width: 0 1px 0 0;
  padding: 18px;
  overflow-y: auto;
}

.probe-panel {
  border-width: 0 0 0 1px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  overflow: auto;
}

.pane-resizer {
  background: transparent;
  cursor: col-resize;
  position: relative;
  transition: background 130ms ease;
  z-index: 10;
}

.pane-resizer:hover,
body.resizing-panes .pane-resizer {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

/* Grab handle: a rounded pill with a dot-grid grip that brightens to an accent
   outline on hover/drag, replacing the old thin bar + "⋮" glyph. */
.pane-resizer::before {
  background-color: var(--surface-sunken);
  background-image: radial-gradient(circle, var(--faint) 1.1px, transparent 1.5px);
  background-position: center;
  background-size: 4px 7px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  content: "";
  height: 42px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: height 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
  width: 7px;
}

.pane-resizer:hover::before,
body.resizing-panes .pane-resizer::before {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.5px);
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 6px rgba(15, 23, 42, 0.14);
  height: 60px;
}

body.resizing-panes {
  cursor: col-resize;
  user-select: none;
}

.brand-row {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.brand-mark {
  align-items: center;
  background: var(--brand);
  border-radius: var(--radius-ctl);
  color: var(--brand-ink);
  display: flex;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 34px;
}

/* A company's own logo in place of the mark, on its subdomain (services/tenancy.py). Same height as
   the mark; wordmarks run wider, so the width follows the image up to a cap. */
.brand-logo {
  display: block;
  height: 34px;
  max-width: 160px;
  object-fit: contain;
  width: auto;
}

.brand-name {
  font-size: 17px;
  font-weight: 800;
}

.brand-subtitle,
.doc-meta,
.paper-meta,
.mini-label,
.probe-header span,
.empty-note {
  color: var(--muted);
  font-size: 12px;
}

.upload-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  padding: 12px;
}

.upload-messages {
  margin-bottom: 10px;
}

.upload-message {
  padding: 8px 10px;
  border-radius: var(--radius-ctl);
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.review-control-panel {
  display: grid;
  gap: 8px;
}

.panel-title {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
  padding-top: 12px;
  text-transform: uppercase;
}

.panel-title:first-child {
  border-top: 0;
  padding-top: 0;
}

.upload-drop {
  align-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-ctl);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-height: 92px;
  text-align: center;
}

.upload-drop input {
  display: none;
}

.upload-drop span {
  font-weight: 750;
}

.compact-upload {
  min-height: 68px;
}

.title-input,
.style-textarea,
.chat-box input,
.probe-controls select {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  min-width: 0;
  outline: none;
  padding: 10px 11px;
  width: 100%;
}

.title-input {
  margin: 10px 0;
}

/* Multi-line inputs are never fixed 2010 boxes: always user-resizable, and on
   browsers with field-sizing support they grow with the content up to a
   viewport cap (older browsers just keep the manual resize handle). */
textarea.title-input,
.disclosure-field textarea,
.style-textarea {
  field-sizing: content;
  max-height: 60vh;
  resize: vertical;
}

textarea.title-input {
  min-height: 72px;
}

.primary-button,
.secondary-button,
.chat-box button {
  align-items: center;
  border: 0;
  border-radius: var(--radius-ctl);
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  font-size: var(--fs-base);
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 60ms ease;
  white-space: nowrap;
}

.primary-button:active,
.secondary-button:active,
.chat-box button:active {
  transform: translateY(1px);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.chat-box button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.compact-button {
  min-height: 32px;
  padding: 6px 10px;
}

.icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: 32px;
  padding: 6px;
}

.icon-button svg {
  height: 16px;
  width: 16px;
}

.primary-button {
  background: var(--brand);
  color: var(--brand-ink);
  width: auto;   /* size to content — use .btn-block for a full-width button */
}

/* Opt-in full-width (forms, mobile CTAs, modal confirms). Buttons default to
   content width so an action button in a flex row never balloons to fill it. */
.btn-block,
.primary-button.btn-block,
.secondary-button.btn-block {
  width: 100%;
}

/* The upload button should stay a fixed size, not stretch/resize with the
   (draggable) library rail. */
.upload-panel .primary-button {
  align-self: start;
  width: fit-content;
}

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

.primary-button:disabled,
.chat-box button:disabled,
.chat-box input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secondary-button {
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-faint);
  color: var(--ink);
}

.secondary-button:hover {
  background: color-mix(in srgb, var(--surface-sunken) 90%, var(--text-body));
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Toggle/segmented state for toolbar buttons (Skimming, Hide Math, etc.). */
.secondary-button.active,
.secondary-button.is-active,
.secondary-button[aria-pressed="true"] {
  background: var(--brand-tint-strong);
  box-shadow: inset 0 0 0 1px var(--brand);
  color: var(--brand-hover);
}

.rail-section {
  margin-top: 22px;
}

.rail-heading {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.doc-list {
  display: grid;
  gap: 8px;
}

.review-doc-list .doc-item {
  width: 100%;
}

.review-doc-item {
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}

.review-doc-item.active {
  border-color: var(--line-strong);
  box-shadow: inset 3px 0 0 var(--brand);
}

.doc-row {
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  overflow: hidden;
}

.doc-row.active,
.doc-row:hover {
  background: var(--brand-tint);
  border-color: var(--brand-border);
}

.doc-item {
  border: 0;
  border-radius: 0;
  color: inherit;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-decoration: none;
}

.doc-item:hover {
  background: transparent;
}

.library-delete-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0;
  width: 34px;
}

.library-delete-button:hover {
  background: var(--danger-tint);
  color: var(--danger);
}

/* Papers with a saved review get a quick jump-to-reviewer link + tag, so the
   library doubles as the index of reviews. */
.doc-row {
  grid-template-columns: minmax(0, 1fr) auto 34px;
}

.doc-row:not(:has(.library-review-link)) {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.library-review-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 30px;
}

.library-review-link svg {
  height: 15px;
  width: 15px;
}

.library-review-link:hover {
  background: var(--brand-tint);
}

.doc-review-tag {
  background: var(--brand-tint);
  border-radius: var(--radius-pill);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 6px;
}

.doc-title {
  color: var(--text-heading);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-column {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
}

.reader-toolbar {
  align-items: center;
  backdrop-filter: saturate(1.1) blur(4px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 60px;
  padding: 9px 16px;
}

.reader-toolbar > div:first-child {
  min-width: 0;
}

.reader-toolbar h1 {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  margin: 0 0 4px;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.toolbar-divider {
  align-self: stretch;
  background: var(--line);
  margin: 4px 2px;
  width: 1px;
}

/* Primary view switcher: segmented Reader · Equation · Reviewer control. */
.view-switcher {
  align-items: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-ctl);
  box-shadow: inset 0 0 0 1px var(--line-faint);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.view-switcher-btn {
  background: transparent;
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  padding: 7px 13px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}

.view-switcher-btn:hover {
  color: var(--ink);
}

.view-switcher-btn.active {
  background: var(--surface);
  color: var(--brand-hover);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), inset 0 0 0 1px var(--brand-border);
}

.view-switcher-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.zoom-controls {
  align-items: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-ctl);
  display: inline-flex;
  gap: 4px;
  /* 32px compact buttons + 2×1px = 34px, matching the sibling icon buttons and
     the view-switcher pill so the toolbar's segmented controls are one height. */
  padding: 1px 3px;
}

.zoom-controls .secondary-button {
  min-width: 32px;
}

#zoomLevel {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  min-width: 44px;
  text-align: center;
}

.reader-surface {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  position: relative;
  touch-action: pan-x pan-y pinch-zoom;
  --pdf-page-width: 860px;
  --pdf-zoom: 1;
}

.pdf-page {
  background: white;
  box-shadow: var(--shadow-md);
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 860px 1215px;
  flex: 0 0 auto;
  max-width: none;
  transition: width 120ms ease;
  width: calc(var(--pdf-page-width) * var(--pdf-zoom));
}

/* During a continuous pinch/wheel zoom the width changes every frame; the
   120ms width transition would lag and stutter behind the gesture, so drop it
   while zooming. Button-step zoom keeps the smooth transition. */
body.reader-zooming .pdf-page {
  transition: none;
}

.pdf-canvas {
  position: relative;
  width: 100%;
}

.pdf-canvas > .page-image,
.pdf-canvas > .pdf-js-canvas,
.pdf-canvas > .page-placeholder {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.page-label {
  background: #111827;
  border-radius: var(--radius-pill);
  color: white;
  font-size: 11px;
  font-weight: 750;
  left: 12px;
  padding: 5px 8px;
  position: absolute;
  top: 12px;
  z-index: 4;
}

.page-image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pdf-js-canvas {
  display: none;
  height: 100%;
  width: 100%;
}

body.pdfjs-ready .pdf-page.pdf-rendered .pdf-js-canvas {
  display: block;
}

body.pdfjs-ready .pdf-page.pdf-rendered .page-image {
  display: none;
}

.page-placeholder {
  height: 100%;
}

.page-placeholder,
.blank-reader,
.empty-reader {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  padding: 30px;
  text-align: center;
}

.highlight-layer {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.skimming-layer {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.selection-popover {
  background: #26313a;
  border: 1px solid #1d252c;
  border-radius: var(--radius-ctl);
  box-shadow: 0 10px 26px rgba(23, 31, 46, 0.24);
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  position: fixed;
  z-index: 20;
}

.tag-action-popover {
  align-items: center;
  background: var(--surface-raised)fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  box-shadow: 0 14px 38px rgba(23, 31, 46, 0.16);
  display: flex;
  gap: 8px;
  padding: 6px;
  position: fixed;
  z-index: 25;
}

.tag-action-popover[hidden] {
  display: none;
}

.tag-color-row {
  border-right: 1px solid var(--line);
  display: flex;
  gap: 6px;
  padding-right: 8px;
}

.tag-color-row[hidden] {
  display: none;
}

.trash-button {
  align-items: center;
  background: var(--danger-tint);
  border: 1px solid var(--danger-tint);
  border-radius: var(--radius-ctl);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.trash-button:hover {
  background: var(--danger-tint);
}

.trash-icon {
  fill: none;
  height: 18px;
  stroke: var(--danger);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.selection-popover[hidden] {
  display: none;
}

.selection-actions,
.selection-swatches {
  align-items: center;
  display: flex;
  gap: 7px;
}

.selection-actions button {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #f2f5f7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  min-height: 24px;
  padding: 0;
}

.selection-actions button + button {
  border-left: 1px solid rgba(226, 232, 240, 0.45);
  padding-left: 9px;
}

.selection-actions button:hover {
  color: #ffffff;
}

.selection-swatches {
  border-top: 1px solid rgba(226, 232, 240, 0.45);
  padding-top: 7px;
}

.color-swatch {
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  height: 20px;
  padding: 0;
  width: 20px;
}

.color-swatch:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

.color-swatch.color-red {
  background: #ef2424;
}

.color-swatch.color-orange {
  background: #d9911c;
}

.color-swatch.color-yellow {
  background: #d6d72a;
}

.color-swatch.color-lime {
  background: #84cc16;
}

.color-swatch.color-green {
  background: #20d12a;
}

.color-swatch.color-blue {
  background: #3aa0f6;
}

.color-swatch.color-cyan {
  background: #22d3ee;
}

.color-swatch.color-teal {
  background: #14b8a6;
}

.color-swatch.color-indigo {
  background: #6366f1;
}

.color-swatch.color-purple {
  background: #9333ea;
}

.color-swatch.color-pink {
  background: #c85b8f;
}

.color-swatch.color-gray {
  background: #94a3b8;
}

.selection-icon-button {
  background: transparent;
  border: 0;
  color: #f2f5f7;
  cursor: pointer;
  height: 22px;
  position: relative;
  width: 22px;
}

.selection-icon-button:hover {
  color: #ffffff;
}

.comment-icon::before {
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  content: "";
  height: 13px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 15px;
}

.comment-icon::after {
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  bottom: 4px;
  content: "";
  height: 5px;
  left: 5px;
  position: absolute;
  transform: skew(-28deg);
  width: 6px;
}

.copy-icon::before,
.copy-icon::after {
  border: 2px solid currentColor;
  border-radius: 3px;
  content: "";
  height: 13px;
  position: absolute;
  width: 11px;
}

.copy-icon::before {
  left: 4px;
  top: 3px;
}

.copy-icon::after {
  left: 8px;
  top: 7px;
  background: #26313a;
}

.pdf-text-layer {
  inset: 0;
  line-height: 1;
  overflow: hidden;
  position: absolute;
  text-align: initial;
  transform-origin: 0 0;
  user-select: text;
  z-index: 2;
}

.pdf-text-layer span {
  color: transparent;
  cursor: text;
  position: absolute;
  transform-origin: 0 0;
  user-select: text;
  white-space: pre;
}

.pdf-text-layer br {
  user-select: none;
}

.pdf-text-layer .endOfContent {
  display: block;
  inset: 100% 0 0;
  position: absolute;
  user-select: none;
  z-index: -1;
}

.pdf-text-span {
  color: transparent;
  cursor: text;
  display: block;
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
  position: absolute;
  user-select: text;
  white-space: pre;
  transform-origin: left top;
}

.pdf-citation-link {
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
}

.pdf-text-span::selection,
.pdf-text-layer::selection {
  background: rgba(37, 99, 235, 0.28);
  color: transparent;
}

.saved-highlight {
  border-radius: 3px;
  cursor: pointer;
  mix-blend-mode: multiply;
  pointer-events: auto;
  position: absolute;
}

.saved-highlight.has-number::before {
  align-items: center;
  background: #172033;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-pill);
  color: #ffffff;
  content: attr(data-highlight-number);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  left: -8px;
  line-height: 1;
  min-width: 18px;
  padding: 0 5px;
  position: absolute;
  top: -16px;
}

.skimming-highlight {
  border-radius: 2px;
  position: absolute;
  /* Behave like a highlighter: tint the text instead of painting over it, so the
     underlying words/equations always stay legible even where several bands overlap
     (plain alpha compounds toward opaque and hid content, e.g. display equations). */
  mix-blend-mode: multiply;
}

/* Highlight boxes use the same colors as their margin arrows/flags. */
.skimming-highlight.skimming-goals {
  background: rgba(186, 230, 253, 0.55);
}

.skimming-highlight.skimming-methods {
  background: rgba(254, 215, 170, 0.55);
}

.skimming-highlight.skimming-results {
  background: rgba(251, 207, 232, 0.55);
}

.skimming-margin-flag {
  border: 1px solid rgba(17, 24, 39, 0.22);
  border-radius: 4px;
  color: #1f2937;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  left: 3px;
  min-height: 19px;
  min-width: 50px;
  padding: 2px 8px;
  pointer-events: auto;
  position: absolute;
  text-align: left;
}

.skimming-margin-flag.skimming-goals {
  background: rgba(186, 230, 253, 0.96);
}

.skimming-margin-flag.skimming-methods {
  background: rgba(254, 215, 170, 0.96);
}

.skimming-margin-flag.skimming-results {
  background: rgba(251, 207, 232, 0.96);
}

.skimming-margin-flag:hover {
  filter: saturate(1.12);
  transform: translateX(2px);
}

body.skimming-flags-hidden .skimming-margin-flag,
body.skimming-goals-hidden [data-skimming-category="goals"],
body.skimming-methods-hidden [data-skimming-category="methods"],
body.skimming-results-hidden [data-skimming-category="results"],
body .density-hidden,
body.skimming-density-few [data-skimming-index="3"],
body.skimming-density-few [data-skimming-index="4"],
body.skimming-density-few [data-skimming-index="5"],
body.skimming-density-few [data-skimming-index="6"],
body.skimming-density-few [data-skimming-index="7"],
body.skimming-density-few [data-skimming-index="8"],
body.skimming-density-few [data-skimming-index="9"],
body.skimming-density-few [data-skimming-index="10"],
body.skimming-density-balanced [data-skimming-index="6"],
body.skimming-density-balanced [data-skimming-index="7"],
body.skimming-density-balanced [data-skimming-index="8"],
body.skimming-density-balanced [data-skimming-index="9"],
body.skimming-density-balanced [data-skimming-index="10"] {
  display: none;
}

.saved-highlight.has-probe {
  outline: 2px solid var(--brand);
  pointer-events: auto;
}

.skimming-highlight.active-skimming-item {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
  outline: 2px solid rgba(37, 99, 235, 0.65);
}

.skimming-margin-flag.active-skimming-item {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 3px 9px rgba(23, 31, 46, 0.12);
}

.saved-highlight.math-highlight {
  cursor: pointer;
  outline: 2px solid rgba(37, 99, 235, 0.85);
}

.saved-highlight.math-highlight::after {
  background: var(--info);
  border-radius: 3px;
  color: white;
  content: "f(x)";
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 4px;
  position: absolute;
  right: -4px;
  top: -18px;
}

.saved-highlight.active-math-highlight {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
  outline-color: var(--info);
}

.saved-highlight.active-analysis-highlight {
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.2);
  outline-color: var(--brand);
}

.edge-note {
  border: 0;
  /* Blocky tag: rectangle body with a triangle point aimed at the line. */
  clip-path: polygon(0 50%, 42% 0, 100% 0, 100% 100%, 42% 100%);
  cursor: pointer;
  height: 23px;
  opacity: 0.95;
  pointer-events: auto;
  position: absolute;
  right: 3px;
  width: 17px;
}

.edge-note::after {
  color: #111827;
  content: attr(data-highlight-number);
  font-size: 10px;
  font-weight: 900;
  left: 8px;
  position: absolute;
  top: 7px;
}

.edge-note:hover {
  filter: saturate(1.15);
  transform: translateX(2px);
}

.edge-note.math-edge-note {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

.edge-note-popover {
  background: #fffdf5;
  border: 2px solid rgba(17, 24, 39, 0.18);
  border-radius: var(--radius-ctl);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.26);
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
  max-width: 300px;
  padding: 10px 12px;
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

.edge-note-popover[hidden] {
  display: none;
}

.edge-note-popover.is-pinned {
  pointer-events: auto;
}

.edge-note-popover-body {
  max-height: 320px;
  overflow: auto;
  overflow-wrap: anywhere;
}

/* The close button overlays the top-right corner (with a backdrop matching the
   popover fill so it stays legible) instead of reserving an empty right column
   down the whole popover. */
.edge-note-popover-close {
  background: inherit;
  border: 0;
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  display: none;
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  padding: 0 4px;
  position: absolute;
  right: 4px;
  top: 6px;
}

.edge-note-popover.is-pinned .edge-note-popover-close {
  display: block;
}

.edge-note-popover-close:hover {
  opacity: 1;
}

body.annotations-hidden .highlight-layer {
  display: none;
}

/* Hiding skim highlights only hides the on-page layer; the panel stays so the
   eye toggle and Run controls remain reachable. */
body.skimming-hidden .skimming-layer {
  display: none;
}

.color-yellow {
  background: rgba(250, 204, 21, 0.45);
}

.color-blue {
  background: rgba(96, 165, 250, 0.35);
}

.color-green {
  background: rgba(74, 222, 128, 0.36);
}

.color-lime {
  background: rgba(132, 204, 22, 0.34);
}

.color-cyan {
  background: rgba(34, 211, 238, 0.34);
}

.color-teal {
  background: rgba(20, 184, 166, 0.34);
}

.color-indigo {
  background: rgba(99, 102, 241, 0.34);
}

.color-pink {
  background: rgba(244, 114, 182, 0.34);
}

.color-orange {
  background: rgba(251, 146, 60, 0.36);
}

.color-purple {
  background: rgba(168, 85, 247, 0.34);
}

.color-red {
  background: rgba(248, 113, 113, 0.34);
}

.color-gray {
  background: rgba(148, 163, 184, 0.36);
}

.citation-link {
  color: var(--info);
  font-weight: 700;
}

.reference-open-link {
  color: inherit;
}

.math-explainer-panel {
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px rgba(23, 31, 46, 0.04);
  flex: 0 0 var(--math-panel-height);
  max-height: calc(100vh - 96px);
  min-height: 260px;
  overflow: auto;
  position: relative;
  z-index: 6;
}

body.math-helper-unavailable .math-explainer-panel,
body.math-helper-hidden .math-explainer-panel {
  display: none;
}

body.math-helper-side .reader-column {
  min-width: 0;
}

body.math-helper-side .math-explainer-panel {
  border-left: 1px solid var(--line);
  border-top: 0;
  box-shadow: -10px 0 24px rgba(23, 31, 46, 0.05);
  flex: none;
  bottom: 0;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: var(--math-side-width);
  z-index: 30;
}

/* Docked right, the equation occupies the rightmost pane slot rather than its
   own extra column, so the assistant pane and its controls step aside. */
body.math-helper-side .pane-resizer-right,
body.math-helper-side .probe-panel,
body.math-helper-side .right-pane-toggle {
  display: none;
}

body.math-helper-side .math-resize-handle {
  cursor: col-resize;
  height: 100%;
  inset: 0 auto 0 0;
  position: absolute;
  width: 14px;
}

body.math-helper-side .math-resize-handle::before {
  background-size: 4px 7px;
  height: 42px;
  width: 7px;
}

body.math-helper-side .math-resize-handle:hover::before {
  height: 60px;
  width: 7px;
}

.math-resize-handle {
  background: transparent;
  cursor: row-resize;
  height: 14px;
  inset: 0 0 auto;
  position: sticky;
  top: 0;
  transition: background 130ms ease;
  z-index: 3;
}

.math-resize-handle:hover {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

.math-resize-handle::before {
  background-color: var(--surface-sunken);
  background-image: radial-gradient(circle, var(--faint) 1.1px, transparent 1.5px);
  background-position: center;
  background-size: 7px 4px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  content: "";
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
  width: 42px;
}

.math-resize-handle:hover::before {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.5px);
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 6px rgba(15, 23, 42, 0.14);
  width: 64px;
}

/* Keep the math grip lit while an active drag is in progress (the pointer
   leaves the thin strip, so :hover alone is not enough). */
body.resizing-math .math-resize-handle {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

body.resizing-math .math-resize-handle::before {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.5px);
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 6px rgba(15, 23, 42, 0.14);
  width: 64px;
}

body.math-helper-side.resizing-math .math-resize-handle::before {
  height: 60px;
  width: 7px;
}

/* Keyboard focus on the resize separators. */
.pane-resizer:focus-visible,
.math-resize-handle:focus-visible,
.review-bottom-resizer:focus-visible,
.pdf-size-handle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.pane-resizer:focus-visible::before,
.math-resize-handle:focus-visible::before,
.review-bottom-resizer:focus-visible::before {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.5px);
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 6px rgba(15, 23, 42, 0.14);
}

.math-panel-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 5px 16px 6px;
}

.math-panel-header h2 {
  font-size: 14px;
  margin: 0;
}

.math-panel-header span {
  color: var(--muted);
  font-size: 12px;
}

.math-panel-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.math-panel-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 260px;
}

/* When the single-tab strip is hidden (one math note), drop its grid column so
   the equation stage spans the full width instead of the 220px tab track. */
.math-panel-body:has(.math-probe-tab:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

body.math-helper-expanded .math-panel-body,
body.math-helper-side .math-panel-body {
  min-height: calc(100% - 74px);
}

body.math-helper-side .math-panel-body {
  grid-template-columns: 1fr;
}

body.math-helper-side .math-probe-list {
  border-bottom: 1px solid var(--line);
  border-right: 0;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 220px);
  overflow-x: auto;
}

.math-probe-list {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 10px;
  /* Pack tabs at the top at their content height instead of stretching each row
     to fill the panel (the grid default is align-content:stretch), and scroll
     the list when there are many equations — a compact switcher, not one giant
     box per equation. */
  align-content: start;
  grid-auto-rows: max-content;
  overflow-y: auto;
}

/* With a single math note the tab strip switches to nothing, so hide it and
   reclaim the space. It reappears automatically once a second note exists. */
.math-probe-list:has(.math-probe-tab:only-child) {
  display: none;
}

.math-probe-tab {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 1px;
  min-height: 0;
  padding: 7px 10px;
  text-align: left;
}

.math-probe-tab.active {
  background: var(--brand-tint);
  border-color: var(--brand-border);
}

.math-probe-tab span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.math-probe-tab small {
  color: var(--muted);
  font-size: 11px;
}

.math-probe-stage {
  min-width: 0;
  padding: 14px 18px;
}

.math-probe-card {
  display: none;
  gap: 12px;
}

.math-probe-card.active {
  display: grid;
}

.math-latex {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.math-source {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  padding: 8px 10px;
}

.math-source summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.math-source[open] .math-latex {
  display: block;
  margin-top: 8px;
  overflow: auto;
}

.math-typeset-equation {
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  color: var(--text-heading);
  min-height: 82px;
  overflow: auto;
  padding: 16px 18px;
  position: relative;
}

/* Equation + action buttons stay pinned at the top while the Q&A scrolls;
   the ask box is pinned at the bottom — a standard chat window. */
.math-card-head {
  background: var(--surface);
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 6;
}

.math-equation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.math-ask-form {
  background: var(--surface);
  border-top: 1px solid var(--line);
  bottom: 0;
  margin-top: 4px;
  padding-top: 8px;
  position: sticky;
  z-index: 6;
}

.math-typeset-equation .katex-display {
  margin: 0;
}

.math-typeset-equation .katex {
  font-size: 20px;
  /* KaTeX math glyphs render thin; a hair of stroke makes the equation a bit bolder
     and more legible (works across KaTeX's single-weight math fonts, unlike font-weight).
     currentColor keeps the per-token derive-highlight colors intact. */
  -webkit-text-stroke: 0.35px currentColor;
}

.math-typeset-equation .math-inline-token {
  appearance: none;
  /* A soft per-part tint groups the equation by color. NO default box-shadow ring:
     one hard 1px box per token turned a many-token equation into a wall of boxes.
     The interactive box now appears only on hover/derive (rules below). */
  background: rgba(var(--math-part-color, 250, 204, 21), 0.08);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  line-height: inherit;
  outline: 1px solid transparent;
  outline-offset: 2px;
  padding: 0 1px;
  position: relative;
  transition: background-color 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
}

/* Hovering a derivation step boxes the parts it references in the equation. */
.math-answer-equation[data-math-ref] {
  border-radius: var(--radius-ctl);
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* Discoverability: standalone steps get a faint interactive tint + underline so
   the reader knows they can hover/focus them to link back to the equation. */
.math-answer-equation.block[data-math-ref] {
  box-shadow: inset 0 -2px 0 var(--line-strong);
}

.math-answer-equation.block[data-math-ref]:hover,
.math-answer-equation.block[data-math-ref]:focus-visible {
  background: color-mix(in srgb, var(--info) 10%, transparent);
  box-shadow: inset 0 -2px 0 var(--brand);
  outline: none;
}

.math-typeset-equation .math-inline-token.derive-highlight,
.math-typeset-equation .math-render-token.derive-highlight {
  background: rgba(250, 204, 21, 0.4);
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.95);
  outline-color: rgba(202, 138, 4, 0.95);
}

.math-typeset-equation.derive-source {
  border-color: var(--brand);
}

/* Reverse direction: hovering a symbol in the sticky equation highlights the
   symbol itself and every derivation step that uses it. */
.math-typeset-equation .math-inline-token {
  cursor: pointer;
}

.math-typeset-equation .math-inline-token.derive-token-active {
  background: color-mix(in srgb, var(--info) 35%, transparent);
  box-shadow: 0 0 0 2px var(--brand);
}

.math-answer-equation.derive-match {
  background: color-mix(in srgb, var(--info) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.math-typeset-equation .math-part-color-0 { --math-part-color: 251, 146, 60; }
.math-typeset-equation .math-part-color-1 { --math-part-color: 96, 165, 250; }
.math-typeset-equation .math-part-color-2 { --math-part-color: 52, 211, 153; }
.math-typeset-equation .math-part-color-3 { --math-part-color: 244, 114, 182; }
.math-typeset-equation .math-part-color-4 { --math-part-color: 168, 85, 247; }
.math-typeset-equation .math-part-color-5 { --math-part-color: 250, 204, 21; }
.math-typeset-equation .math-part-color-6 { --math-part-color: 45, 212, 191; }
.math-typeset-equation .math-part-color-7 { --math-part-color: 248, 113, 113; }

.math-typeset-equation .math-inline-token:hover,
.math-typeset-equation .math-inline-token.active {
  background: rgba(var(--math-part-color, 250, 204, 21), 0.09);
  box-shadow: 0 0 0 1px rgba(var(--math-part-color, 250, 204, 21), 0.58);
  outline-color: rgba(var(--math-part-color, 250, 204, 21), 0.58);
}

.math-typeset-equation .math-inline-token.type-operator:hover,
.math-typeset-equation .math-inline-token.type-operator.active {
  background: rgba(var(--math-part-color, 147, 197, 253), 0.09);
  outline-color: rgba(var(--math-part-color, 147, 197, 253), 0.58);
}

.math-typeset-equation.is-fallback {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
}

.math-overlay-layer {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.math-overlay-layer .math-inline-token {
  pointer-events: auto;
}

.math-measure-probe {
  left: -9999px;
  pointer-events: none;
  position: fixed;
  top: -9999px;
  visibility: hidden;
}

.math-context-menu {
  background: #1f2933;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-ctl);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
  padding: 5px;
  position: fixed;
  z-index: 90;
}

.math-context-menu[hidden] {
  display: none;
}

.math-context-menu button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-ctl);
  color: #f8fafc;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 10px;
}

.math-context-menu button:hover,
.math-context-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.math-token-store[hidden] {
  display: none;
}

.math-rendered-equation {
  align-items: center;
  background: var(--bg-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-ctl);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: auto;
  padding: 10px;
}


.math-token-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.math-token {
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  color: var(--text-body);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  min-height: 32px;
  padding: 6px 9px;
}

.math-render-token {
  border-width: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
  min-height: 42px;
  min-width: 38px;
}

.compact-parts {
  opacity: 0.88;
}

.compact-parts .math-token {
  font-size: 12px;
  min-height: 28px;
  padding: 4px 7px;
}

.math-token:hover,
.math-token:focus-visible,
.math-token.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
  outline: none;
}

.math-token.active {
  background: #d9f99d;
  border-color: #4d7c0f;
  box-shadow: 0 0 0 3px rgba(77, 124, 15, 0.2);
}

.math-token.type-variable {
  background: var(--brand-tint);
}

.math-token.type-operator {
  background: var(--info-tint);
}

.math-token.type-symbol {
  background: var(--warning-tint);
}

.math-token.type-constant,
.math-token.type-structure {
  background: var(--surface-sunken);
}

.active-analysis-text {
  display: grid;
  gap: 8px;
}

.active-analysis-text p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.active-math-equation {
  min-height: 56px;
  padding: 10px 12px;
}

.active-math-equation .katex {
  font-size: 17px;
}

.math-detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 8px;
  padding: 12px;
}

.math-detail-card strong {
  font-family: inherit;
  font-size: 15px;
}

.math-detail-card strong .katex {
  font-size: 1.08em;
}

.math-detail-card p,
.math-detail-card dd {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.math-detail-card dl {
  display: grid;
  gap: 5px 12px;
  grid-template-columns: 90px minmax(0, 1fr);
  margin: 0;
}

.math-detail-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.math-question-form {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.math-question-form input {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  min-height: 38px;
  min-width: 0;
  padding: 9px 10px;
}

.math-answer-thread {
  display: grid;
  gap: 8px;
}

.math-answer-message {
  border-radius: var(--radius-ctl);
  padding: 9px 10px;
}

.math-answer-message.assistant {
  background: var(--brand-tint);
  justify-self: start;
  max-width: 94%;
}

.math-answer-pending .math-thinking {
  color: var(--muted);
  font-style: italic;
}

.math-answer-pending .math-thinking-dots::after {
  content: "…";
  animation: math-thinking-pulse 1.2s ease-in-out infinite;
}

@keyframes math-thinking-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.math-answer-message.user {
  background: var(--bg-alt);
  justify-self: end;
  max-width: 88%;
}

.math-answer-message strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.math-answer-message p,
.math-answer-body {
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.math-answer-heading {
  font-weight: 600;
  line-height: 1.3;
  margin: 10px 0 4px;
}

.math-answer-heading:first-child {
  margin-top: 0;
}

.math-answer-heading.level-1 { font-size: 16px; }
.math-answer-heading.level-2 { font-size: 15px; }
.math-answer-heading.level-3 { font-size: 14px; }
.math-answer-heading.level-4,
.math-answer-heading.level-5,
.math-answer-heading.level-6 {
  font-size: 13px;
  color: var(--text-secondary);
}

.math-answer-line {
  margin: 0 0 6px;
}

.math-answer-line:last-child {
  margin-bottom: 0;
}

.math-answer-list {
  margin: 4px 0 8px;
  padding-left: 20px;
}

.math-answer-list li {
  margin: 2px 0;
}

.math-answer-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 8px 0;
}

.math-answer-body {
  overflow-wrap: anywhere;
}

.math-answer-equation.inline {
  display: inline-block;
  margin: 0 2px;
  vertical-align: -0.12em;
}

.math-answer-equation.block {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-ctl);
  display: block;
  margin: 8px 0;
  overflow-x: auto;
  padding: 8px 10px;
}

.math-answer-equation.block .katex-display {
  margin: 0;
}

.math-answer-equation .katex {
  font-size: 1.03em;
}

.math-empty-state {
  color: var(--muted);
  display: block;
  font-size: 13px;
}

.math-probe-stage.has-math-probes .math-empty-state {
  display: none;
}

.probe-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  column-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 14px;
  row-gap: 8px;
}

.probe-header h2 {
  flex-shrink: 0;
  font-size: 15px;
  margin: 0;
}

.probe-header-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

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

.inline-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.inline-field select {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  font-size: 12px;
  padding: 5px 7px;
}

.probe-controls,
.selection-card {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.skimming-assist-panel,
.skimming-settings-panel {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.skimming-settings-panel[hidden] {
  display: none;
}

.skimming-assist-header,
.settings-heading-row {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.skimming-assist-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

#toggleSkimmingHighlights[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

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

#rerunSkimming.is-spinning svg {
  animation: skim-spin 0.7s linear infinite;
}

.skimming-assist-header h2 {
  align-items: center;
  display: flex;
  font-size: 15px;
  gap: 7px;
  margin: 0 0 6px;
}

.skim-title-icon {
  color: var(--brand);
  height: 18px;
  width: 18px;
}

.has-leading-icon {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.has-leading-icon .skim-title-icon {
  height: 15px;
  width: 15px;
}

.skimming-assist-header p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

#runSkimming {
  justify-self: start;
  margin-top: 10px;
}

/* Highlight intensity: normal is the default opacity. */
body.skim-intensity-subtle .skimming-highlight {
  opacity: 0.5;
}

body.skim-intensity-vivid .skimming-highlight {
  filter: saturate(1.35);
}

.skimming-summary-list {
  display: grid;
  gap: 12px;
  max-height: 330px;
  overflow: auto;
  padding: 2px 2px 2px 0;
}

.skimming-summary-card {
  background: transparent;
  border: 0;
  border-left: 5px solid transparent;
  color: var(--text-body);
  cursor: pointer;
  display: grid;
  font-size: 12px;
  gap: 3px 8px;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.4;
  padding: 4px 0 6px 9px;
  text-align: left;
}

.skimming-summary-card.skimming-goals {
  border-left-color: rgba(96, 165, 250, 0.45);
}

.skimming-summary-card.skimming-methods {
  border-left-color: rgba(251, 146, 60, 0.42);
}

.skimming-summary-card.skimming-results {
  border-left-color: rgba(244, 114, 182, 0.42);
}

.skimming-summary-card:hover,
.skimming-summary-card.active-skimming-summary {
  background: var(--bg-alt);
}

.summary-flag {
  align-self: start;
  border: 1px solid rgba(17, 24, 39, 0.24);
  border-radius: 5px;
  color: #1f2937;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0;
  min-width: 22px;
  padding: 2px 5px;
  text-align: center;
}

.summary-flag.color-blue {
  background: rgba(186, 230, 253, 0.96);
}

.summary-flag.color-orange {
  background: rgba(254, 215, 170, 0.96);
}

.summary-flag.color-pink {
  background: rgba(251, 207, 232, 0.96);
}

.summary-text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-size: 12px;
  line-clamp: 2;
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
}

/* Double-clicking a card (or Expand all) shows its full text. */
.skimming-summary-card.is-expanded .summary-text {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.summary-page {
  background: var(--surface-sunken);
  border-radius: 5px;
  color: var(--muted);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  grid-column: 2;
  justify-self: start;
  padding: 1px 6px;
}

.summary-group-head {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 8px 0 1px;
  text-transform: uppercase;
}

/* Compact list: dense single-line points, no page chip. */
body.skim-compact .skimming-summary-card {
  gap: 2px 6px;
  padding: 2px 0 2px 9px;
}

body.skim-compact .summary-text,
body.skim-compact .skimming-summary-card.is-expanded .summary-text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.skim-compact .summary-page {
  display: none;
}

/* Collapse the whole summary list to just the panel header. */
body.skim-summary-collapsed .skimming-summary-list {
  display: none;
}

#toggleSkimSummary[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

.skimming-option,
.switch-row,
.density-control {
  align-items: center;
  display: grid;
  gap: 10px;
}

.skimming-option {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.switch-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.skimming-option input,
.switch-row input {
  height: 18px;
  width: 18px;
}

.settings-swatch {
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 4px;
  height: 18px;
  width: 18px;
}

.skimming-option strong,
.switch-row span,
.density-control span {
  color: var(--text-body);
  font-size: 13px;
}

.skimming-option small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.density-control {
  align-items: stretch;
}

.density-control select,
.density-control input[type="text"] {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  min-height: 38px;
  padding: 8px 10px;
}

.skim-gen-divider {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  margin-top: 4px;
  padding-top: 12px;
  text-transform: uppercase;
}

.skim-level-control input[type="range"] {
  accent-color: var(--brand);
  width: 100%;
}

#runSkimmingFromSettings {
  justify-content: center;
  margin-top: 6px;
}

.probe-controls label {
  color: var(--text-secondary);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  text-transform: uppercase;
}

.selection-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  max-height: 150px;
  overflow: auto;
}

.postit-head .mini-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.postit-item {
  align-items: stretch;
  background: #fff7cc;
  border: 1px solid #ead77f;
  border-radius: var(--radius-ctl);
  color: inherit;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 30px;
  padding: 8px;
  text-align: left;
  width: 100%;
}

.postit-open {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  text-align: left;
}

.postit-open p {
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 0;
}

/* Minimized post-it (double-click, or Collapse all): title line only. */
.postit-item.is-min .postit-open p {
  display: none;
}

.postit-delete {
  align-items: center;
  align-self: start;
  background: rgba(254, 226, 226, 0.9);
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: var(--radius-ctl);
  cursor: pointer;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 30px;
}

.postit-delete:hover {
  background: var(--danger-tint);
}

.postit-item.color-red {
  background: rgba(254, 226, 226, 0.86);
}

.postit-item.color-orange {
  background: rgba(255, 237, 213, 0.86);
}

.postit-item.color-yellow {
  background: #fff7cc;
}

.postit-item.color-lime,
.postit-item.color-green {
  background: rgba(220, 252, 231, 0.86);
}

.postit-item.color-blue,
.postit-item.color-cyan,
.postit-item.color-teal {
  background: rgba(224, 242, 254, 0.86);
}

.postit-item.color-indigo,
.postit-item.color-purple {
  background: rgba(237, 233, 254, 0.86);
}

.postit-item.color-pink {
  background: rgba(252, 231, 243, 0.86);
}

.postit-item.color-gray {
  background: rgba(241, 245, 249, 0.9);
}

.postit-item:hover {
  border-color: #d0ad2f;
}

.postit-item strong {
  align-items: center;
  display: flex;
  font-size: 12px;
  gap: 6px;
  margin-bottom: 4px;
}

.postit-number {
  align-items: center;
  background: #172033;
  border-radius: var(--radius-pill);
  color: #ffffff;
  display: inline-flex;
  font-size: 12px;
  height: 20px;
  justify-content: center;
  line-height: 1;
  min-width: 20px;
  padding: 0 6px;
}

.postit-item p {
  color: #51451a;
  font-size: 12px;
  margin: 0;
  max-height: none;
}

.active-analysis {
  background: var(--brand-tint);
}

.active-analysis strong {
  font-size: 13px;
}

/* "Hide" collapses the whole Ask Confread tool down to its header strip so
   the PDF gets the room; only the header (with the Show button) stays. */
body.analysis-hidden #activeAnalysis,
body.analysis-hidden .inline-field,
body.analysis-hidden .chat-thread,
body.analysis-hidden .chat-box {
  display: none;
}

body.analysis-hidden .app-shell {
  grid-template-rows: 1fr auto !important;
}

/* Active analysis card only takes space once a probe is active. */
#activeAnalysis {
  display: none;
}

#activeAnalysis.is-active {
  display: grid;
}

/* Collapse chevron flips to point up when the panel is collapsed. */
#toggleAnalysis[aria-expanded="false"] svg,
#togglePostits[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

/* Post-its header row + collapse to just the header. */
.postit-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.postit-head-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

#toggleNoteHover[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

body.postits-hidden #savedPostits .postit-item,
body.postits-hidden #savedPostits .empty-note {
  display: none;
}

/* Experimental reflowed-HTML reading view. */
#toggleHtmlView[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.html-view-container {
  display: none;
  margin: 0 auto;
  max-width: 820px;
  padding: 4px 4px 60px;
  width: 100%;
}

body.html-view .pdf-page {
  display: none;
}

body.html-view .html-view-container {
  display: block;
}

.html-view-container .html-page {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  color: #1f2937;
  margin-bottom: 18px;
  padding: 26px 34px;
}

.html-view-container .html-page-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

.html-view-container p {
  line-height: 1.6;
  margin: 0 0 10px;
}

/* Figures/photos extracted from the PDF should scale to the column. */
.html-view-container img {
  display: block;
  height: auto;
  margin: 12px auto;
  max-width: 100%;
}

.html-view-container h1,
.html-view-container h2,
.html-view-container h3 {
  line-height: 1.3;
  margin: 16px 0 8px;
}

/* ---- Marker engine output: a clean, reflowed reading document ---- */
.html-view-container .html-doc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  color: #1f2937;
  font-size: 16px;
  line-height: 1.65;
  padding: 40px clamp(24px, 5vw, 56px) 64px;
}

.html-doc h1 { font-size: 1.7em; margin: 0 0 18px; }
.html-doc h2 { font-size: 1.35em; margin: 30px 0 10px; }
.html-doc h3 { font-size: 1.15em; margin: 22px 0 8px; }
.html-doc h4 { font-size: 1.02em; margin: 18px 0 6px; }
.html-doc h1, .html-doc h2, .html-doc h3, .html-doc h4 {
  color: #111827;
  line-height: 1.3;
}

.html-doc p { margin: 0 0 14px; }
.html-doc ul, .html-doc ol { margin: 0 0 14px; padding-left: 26px; }
.html-doc li { margin: 4px 0; }

.html-doc img,
.html-doc figure img {
  border-radius: var(--radius-ctl);
  display: block;
  height: auto;
  margin: 6px auto;
  max-width: 100%;
}

.html-doc figure {
  margin: 20px 0;
  text-align: center;
}

.html-doc figcaption {
  color: var(--muted);
  font-size: 0.86em;
  margin-top: 8px;
}

.html-doc table {
  border-collapse: collapse;
  display: block;
  font-size: 0.9em;
  margin: 18px 0;
  max-width: 100%;
  overflow-x: auto;
}

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

.html-doc thead th {
  background: var(--surface-sunken);
  font-weight: 700;
}

.html-doc blockquote {
  border-left: 3px solid var(--line);
  color: #374151;
  margin: 14px 0;
  padding: 2px 0 2px 16px;
}

.html-doc pre,
.html-doc code {
  background: var(--surface-sunken);
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}

.html-doc code { padding: 1px 5px; }
.html-doc pre { overflow-x: auto; padding: 12px 14px; }
.html-doc pre code { background: none; padding: 0; }

/* KaTeX equations rendered client-side from Marker's LaTeX. */
.html-doc .katex-display {
  margin: 16px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}

.html-doc .math-render-failed {
  color: var(--danger);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}

.alpha-badge {
  background: var(--warning-tint);
  border-radius: var(--radius-pill);
  color: var(--warning);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  margin-left: 5px;
  padding: 1px 5px;
  text-transform: uppercase;
}

.arxiv-chip {
  border: 1px solid #b31b1b !important;
  color: #b31b1b;
  font-weight: 800;
}

.arxiv-chip:hover {
  background: #fdeaea;
}

.arxiv-chip[hidden] {
  display: none;
}

/* References list (reader right rail), styled after Semantic Scholar. */
.references-panel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}

.references-count {
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
}

.references-list {
  display: grid;
  gap: 8px;
  max-height: 440px;
  overflow: auto;
}

/* Tiny influence chart: bars for the most-cited references, click to jump. */
.reference-chart {
  align-items: flex-end;
  display: flex;
  gap: 3px;
  height: 40px;
}

.reference-chart-bar {
  align-items: flex-end;
  align-self: stretch;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 0;
}

.reference-chart-bar::after {
  background: var(--brand);
  border-radius: 3px 3px 0 0;
  content: "";
  height: var(--infl, 10%);
  min-height: 3px;
  opacity: 0.6;
  transition: opacity 120ms ease;
  width: 100%;
}

.reference-chart-bar:hover::after {
  opacity: 1;
}

.reference-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}

.reference-card:hover,
.reference-card:focus-visible {
  background: var(--bg-alt);
  border-color: var(--brand);
  outline: none;
}

@keyframes reference-flash {
  from {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent);
  }
  to {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 0%, transparent);
  }
}

.reference-flash {
  animation: reference-flash 1.1s ease;
  border-color: var(--brand);
}

/* Semantic-Scholar-style card: bold title first, then a muted author·year
   byline and a row of metric badges. The [n] marker leads the title inline
   (hanging indent) so wrapped lines align under the text. */
.reference-title {
  color: var(--text-heading);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
  padding-left: 2.1em;
  text-indent: -2.1em;
}

.reference-card:hover .reference-title,
.reference-card:focus-visible .reference-title {
  color: var(--brand);
}

.reference-marker {
  border-radius: 4px;
  color: var(--brand);
  cursor: pointer;
  font-weight: 800;
  margin-right: 5px;
  padding: 0 2px;
}

.reference-marker:hover {
  background: var(--brand-tint);
}

.reference-byline {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
}

/* Semantic-Scholar-style stacked fields: authors, fields/venue, year, TLDR. */
.reference-authors {
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reference-card.is-expanded .reference-authors {
  -webkit-line-clamp: unset;
}

.reference-venue {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  margin: 0;
}

.reference-year {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin: 0;
}

.reference-tldr {
  margin: 2px 0 0;
}

/* Only show the TLDR block once it has content (or while generating). */
.reference-tldr[data-tldr-empty]:not(.is-loading),
.reference-tldr.is-unavailable {
  display: none;
}

.reference-tldr-label {
  color: var(--brand);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  margin-right: 6px;
}

.reference-tldr-text {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.reference-tldr:not(.is-loading) .reference-tldr-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.reference-card.is-expanded .reference-tldr-text {
  -webkit-line-clamp: unset;
}

.reference-tldr.is-loading .reference-tldr-text {
  color: var(--muted);
  font-style: italic;
}

.reference-expand {
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 0;
}

.reference-expand:hover {
  color: var(--brand-hover);
}

/* Full abstract — revealed only when the card is expanded (Semantic Scholar). */
.reference-abstract {
  display: none;
  margin-top: 2px;
}

.reference-card.is-expanded .reference-abstract:not([hidden]) {
  display: block;
}

.reference-abstract-label {
  color: var(--brand);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  margin-right: 6px;
}

.reference-abstract-text {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

/* Tabs: References / Citations / Related (Semantic Scholar style). */
.reference-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
}

.reference-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
}

.reference-tab.is-active {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

.reference-tab-count {
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 10px;
  padding: 0 6px;
}

.reference-tab.is-active .reference-tab-count {
  background: var(--brand-tint-strong);
  color: var(--brand);
}

/* Paper overview (abstract + fields + counts) from Semantic Scholar. */
.s2-overview {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 6px;
  padding: 10px;
}

/* The class `display:grid` above would otherwise override the hidden attribute
   and leave an empty bordered box. */
.s2-overview[hidden] {
  display: none;
}

.s2-overview-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s2-field,
.ref-field {
  background: var(--info-tint);
  border-radius: var(--radius-pill);
  color: var(--info);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
}

.s2-counts {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.s2-overview-abstract {
  color: var(--text-secondary);
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.s2-list {
  display: grid;
  gap: 8px;
  max-height: 440px;
  overflow: auto;
}

.rail-bottom-dock-body .s2-list,
body.pdf-hidden .s2-list {
  max-height: none;
}

.s2-card {
  cursor: default;
}

.s2-card .reference-title a {
  color: inherit;
  text-decoration: none;
}

.s2-card .reference-title a:hover {
  color: var(--brand);
}

.ref-fields {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reference-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1px;
}

.ref-badge {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

.ref-badge-key {
  background: var(--warning-tint);
  color: var(--warning);
}

.ref-badge-build {
  background: var(--brand-tint);
  color: var(--brand);
}

.ref-badge-sim {
  background: var(--info-tint);
  color: var(--info);
}

/* Tiny inline bar inside the build-on badge. */
.ref-badge-bar {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--radius-pill);
  display: inline-block;
  height: 4px;
  overflow: hidden;
  width: 22px;
}

.ref-badge-bar > span {
  background: var(--brand);
  display: block;
  height: 100%;
}

.reference-page-chip {
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  white-space: nowrap;
}

.reference-sort {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
}

.reference-open {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  justify-content: center;
  height: 24px;
  margin-left: auto;
  padding: 0;
  width: 24px;
}

.reference-open:hover {
  background: var(--brand-tint);
  color: var(--brand);
}

.reference-open svg {
  height: 14px;
  width: 14px;
}

/* Menu shown when the ↗ icon is clicked. */
.reference-open-menu {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 4px;
  position: fixed;
  z-index: 60;
}

.reference-open-menu[hidden] { display: none; }

.reference-open-menu button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  padding: 8px 10px;
  text-align: left;
}

.reference-open-menu button:hover { background: var(--bg-alt); }

/* Ensure a positioning context so locate highlights sit over the page even on
   the reviewer's thumbnail pages (which have no .highlight-layer). */
.pdf-page {
  position: relative;
}

/* Temporary highlight over a reference's exact spot in the PDF. Click dismisses. */
.reference-locate-highlight {
  animation: reference-locate-pulse 1.1s ease;
  background: rgba(250, 204, 21, 0.35);
  border: 1.5px solid rgba(202, 138, 4, 0.9);
  border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22);
  cursor: pointer;
  position: absolute;
  z-index: 7;
}

@keyframes reference-locate-pulse {
  from { box-shadow: 0 0 0 7px rgba(250, 204, 21, 0.45); }
  to { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22); }
}

/* The exact passage a chat clip points to — one at a time, clearly visible even
   when several clips share a page. */
.saved-highlight.clip-target-active {
  animation: clip-target-pulse 0.9s ease-in-out 3;
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  z-index: 9 !important;
}

@keyframes clip-target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent), 0 0 16px 5px color-mix(in srgb, var(--brand) 40%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 22%, transparent), 0 0 22px 9px color-mix(in srgb, var(--brand) 18%, transparent); }
}

.reference-influence {
  align-items: center;
  display: flex;
  gap: 6px;
}

.reference-influence-track {
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  flex: 1;
  height: 4px;
  max-width: 90px;
  overflow: hidden;
}

.reference-influence-fill {
  background: var(--brand);
  display: block;
  height: 100%;
}

.reference-influence-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

body.references-hidden .references-list,
body.references-hidden .reference-chart {
  display: none;
}

#toggleReferences[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

/* Expand references to fill the rail (dock down) and scroll. */
body.references-expanded .references-list {
  max-height: 70vh;
}

[data-dock-toggle][aria-pressed="true"] {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}

/* ---- Shared bottom dock: a fixed footer strip that can hold several rail
   panels (post-its, references) side by side, in any view. --------------- */
.rail-bottom-dock {
  background: var(--surface);
  border-top: 1px solid var(--line);
  bottom: 0;
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  /* Size to the docked panel's content, capped at the resizable height — so an
     empty/short panel stays short instead of leaving a big blank strip. */
  max-height: var(--bottom-dock-height-px, 320px);
  left: 0;
  position: fixed;
  right: 0;
  z-index: 45;
}

.rail-bottom-dock[hidden] {
  display: none;
}

.rail-bottom-dock-resizer {
  align-items: center;
  cursor: ns-resize;
  display: flex;
  flex: none;
  height: 14px;
  justify-content: center;
  touch-action: none;
}

.rail-bottom-dock-resizer::before {
  background: var(--line);
  border-radius: var(--radius-pill);
  content: "";
  height: 4px;
  transition: background 120ms ease, width 120ms ease;
  width: 52px;
}

.rail-bottom-dock-resizer:hover::before,
body.resizing-bottom-dock .rail-bottom-dock-resizer::before {
  background: var(--brand);
  width: 72px;
}

.rail-bottom-dock-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.rail-bottom-dock-body > .is-bottom-docked {
  border-left: 1px solid var(--line);
  border-top: 0;
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  overflow: auto;
  padding: 0 16px 14px;
}

.rail-bottom-dock-body > .is-bottom-docked:first-child {
  border-left: 0;
}

/* Keep each docked panel's header visible while its body scrolls. */
.rail-bottom-dock-body .references-head,
.rail-bottom-dock-body .postit-head {
  background: var(--surface);
  padding-top: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* One reference per line (full width), scrolling within the dock. */
.rail-bottom-dock-body .references-list {
  grid-template-columns: 1fr;
  max-height: none;
}

/* ---- Resizable dividers between the right-rail sections ---------------- */
.rail-resizer {
  align-items: center;
  cursor: ns-resize;
  display: flex;
  flex: none;
  height: 10px;
  justify-content: center;
  margin: -7px 0;
  touch-action: none;
  z-index: 2;
}

.rail-resizer::before {
  background: var(--line);
  border-radius: var(--radius-pill);
  content: "";
  height: 4px;
  transition: background 120ms ease, width 120ms ease;
  width: 40px;
}

.rail-resizer:hover::before,
body.resizing-rail .rail-resizer::before {
  background: var(--brand);
  width: 60px;
}

body.resizing-rail,
body.resizing-bottom-dock {
  cursor: ns-resize;
  user-select: none;
}

/* ---- Hide PDF: collapse the reading surface and give the panels the room --- */
#togglePdf[aria-pressed="true"] {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}

body.pdf-hidden .reader-surface {
  display: none;
}

/* Reader: with the PDF gone the centre only holds the toolbar, so collapse that
   row and let the Ask Confread dock fill the freed height. Columns keep the base
   grid's resizable tracks (var(--right-pane-width)) so the right rail stays its
   normal, drag-resizable width instead of ballooning to a fixed fraction. */
body.pdf-hidden:not(.reader-maximized) .app-shell {
  grid-template-columns: var(--left-pane-width) 6px minmax(0, 1fr) 6px var(--right-pane-width) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.pdf-hidden .references-list {
  grid-template-columns: 1fr;
}

/* Reviewer with the PDF hidden: keep the resizable side tracks (like the reader)
   so the panes stay their drag-set widths instead of ballooning to fractions. */
body.pdf-hidden:not(.review-pane-bottom) .review-shell {
  grid-template-columns:
    var(--reviewer-left-width, 280px) 6px minmax(0, 1fr) 6px var(--reviewer-right-width, 420px);
}

/* Reviewer with the review pane docked at the bottom: collapse the empty PDF
   row so the review/references pane fills the height. */
body.pdf-hidden.review-pane-bottom .review-shell {
  grid-template-rows: auto 8px minmax(0, 1fr);
}

/* Reviewer with a per-section bottom dock AND the PDF hidden: the reader row
   would otherwise keep its full 1fr height (now empty), leaving a large gap
   above the dock while the right panel runs the full height beside it. Collapse
   the reader row to its toolbar height so the dock fills the freed space. */
body.pdf-hidden.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell {
  grid-template-rows: auto minmax(0, 1fr);
}

#toggleReferencesExpand[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.full-width {
  width: 100%;
}

.review-shell {
  display: grid;
  grid-template-columns:
    var(--reviewer-left-width, 280px) 6px minmax(360px, 1fr) 6px var(--reviewer-right-width, 420px);
  height: 100vh;
  min-height: 720px;
}

.review-shell > .doc-rail {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  min-width: 0;
}

.review-shell > .reader-column {
  grid-column: 3;
}

.tldr-banner {
  align-items: center;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  padding: 10px 18px;
}

.tldr-label {
  background: var(--brand);
  border-radius: var(--radius-pill);
  color: var(--brand-ink);
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 3px 9px;
}

.tldr-text {
  color: var(--text-body);
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.tldr-banner [data-tldr-generate] {
  flex: none;
}

body.tldr-hidden .tldr-banner {
  display: none;
}

#toggleTldr[aria-pressed="false"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.review-panel {
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  grid-column: 5;
  overflow: auto;
}

.review-panel-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.review-bottom-resizer {
  background: transparent;
  cursor: row-resize;
  display: none;
  position: relative;
  transition: background 130ms ease;
}

.review-bottom-resizer:hover,
body.resizing-review-pane .review-bottom-resizer {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

.review-bottom-resizer::before {
  background-color: var(--surface-sunken);
  background-image: radial-gradient(circle, var(--faint) 1.1px, transparent 1.5px);
  background-position: center;
  background-size: 7px 4px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  content: "";
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
  width: 42px;
}

.review-bottom-resizer:hover::before,
body.resizing-review-pane .review-bottom-resizer::before {
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--brand) 1.2px, transparent 1.5px);
  box-shadow: inset 0 0 0 1px var(--brand), 0 2px 6px rgba(15, 23, 42, 0.14);
  width: 64px;
}

body.review-pane-bottom .review-shell {
  grid-template-columns: 280px minmax(460px, 1fr);
  grid-template-rows: minmax(280px, 1fr) 8px var(--review-bottom-height);
  min-height: 100vh;
}

body.review-pane-bottom .doc-rail {
  grid-row: 1 / 4;
}

body.review-pane-bottom .reader-column {
  grid-column: 2;
  grid-row: 1;
  /* The base .reader-column is height:100vh; in the reviewer grid it must fit
     its row instead of overflowing onto the review panel below. */
  height: auto;
  min-height: 0;
}

body.review-pane-bottom .review-bottom-resizer {
  display: block;
  grid-column: 2;
  grid-row: 2;
}

body.review-pane-bottom .review-panel {
  border-left: 0;
  border-top: 1px solid var(--line);
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
}

body.review-pane-bottom .review-list {
  padding: 14px 18px;
}

body.review-pane-bottom .compact-page {
  max-width: min(1120px, calc(100% - 32px));
  width: min(1120px, calc(100% - 32px));
}

body.resizing-review-pane {
  cursor: row-resize;
  user-select: none;
}

/* Per-section bottom dock: the Update-section editor and/or Citation integrity
   checker can be sent to a strip under the PDF while the review cards stay in
   the right panel. */
.reviewer-bottom-dock {
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  overflow: auto;
  padding: 16px 18px 12px;
  position: relative;
}

/* Grab bar pinned to the dock's top edge — drag to resize the dock height
   against the PDF area above it (drives --reviewer-dock-height). */
.reviewer-dock-resizer {
  align-items: center;
  cursor: row-resize;
  display: flex;
  height: 14px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  touch-action: none;
  z-index: 6;
}

.reviewer-dock-resizer::before {
  background: var(--line);
  border-radius: var(--radius-pill);
  content: "";
  height: 4px;
  transition: background 120ms ease, width 120ms ease;
  width: 44px;
}

.reviewer-dock-resizer:hover::before,
body.resizing-review-pane .reviewer-dock-resizer::before {
  background: var(--brand);
  width: 64px;
}

.reviewer-bottom-dock[hidden] {
  display: none;
}

.reviewer-bottom-dock > .dockable-review-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  flex: 1 1 0;
  min-width: 0;
  overflow: auto;
  padding: 12px 14px;
}

.reviewer-bottom-dock .review-section-chat {
  border: 1px solid var(--line);
  position: static;
  /* Content sits at its natural height — the prompt auto-grows exactly like it does
     in the side panel, instead of the textarea stretching to fill the whole dock. */
  align-content: start;
}

.dockable-section-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

/* The unified Review section wraps the review cards + the Update-section editor,
   so it isn't a padded .review-list itself — pad just its head to line the
   title/controls up with the cards below. */
.review-section-head {
  padding: 14px 18px 0;
}

/* Minimize-all-subsections toggle: chevrons point up to collapse the review's
   <details>; flip them down once everything is collapsed (expand affordance). */
[data-collapse-all-review][aria-pressed="true"] svg {
  transform: rotate(180deg);
}

/* Collapsible section: click the heading to hide its body, so a long Citation
   integrity list doesn't push the sections below it far down. */
.section-collapse-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.section-collapse-toggle .rail-heading {
  margin: 0;
}

.collapse-chevron {
  flex: none;
  height: 15px;
  transition: transform 0.15s ease;
  width: 15px;
}

.section-collapse-toggle[aria-expanded="false"] .collapse-chevron {
  transform: rotate(-90deg);
}

.dockable-review-section.section-collapsed > :not(.dockable-section-head) {
  display: none;
}

.dock-section-toggle[aria-pressed="true"] {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}

body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell {
  grid-template-columns:
    var(--reviewer-left-width, 280px) 6px minmax(0, 1fr) 6px var(--reviewer-right-width, 420px);
  /* fit-content() sizes the dock to its content (so a tiny panel like Document
     integrity stays compact instead of a fixed 34vh of empty space) while never
     exceeding the cap. --reviewer-dock-height acts as that cap: default 45vh, or
     whatever the user drags the resizer to. */
  grid-template-rows: minmax(0, 1fr) fit-content(var(--reviewer-dock-height, 45vh));
}

body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell > .doc-rail {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Keep the drag handles full-height across both rows in the docked layout. */
body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell > .pane-resizer-left {
  grid-column: 2;
  grid-row: 1 / 3;
}

body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell > .pane-resizer-right {
  grid-column: 4;
  grid-row: 1 / 3;
}

body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell > .reader-column {
  grid-column: 3;
  grid-row: 1;
  height: auto;
  min-height: 0;
}

body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell > .reviewer-bottom-dock {
  grid-column: 3;
  grid-row: 2;
}

body.reviewer-has-bottom-dock:not(.review-pane-bottom) .review-shell > .review-panel {
  grid-column: 5;
  grid-row: 1 / 3;
}

.reviewer-reader {
  align-items: center;
}

/* Toolbar zoom scales the whole thumbnail via the CSS `zoom` property (which
   reserves layout space, so the surface scrolls when zoomed past the column). */
.compact-page {
  max-width: 760px;
  zoom: var(--reviewer-zoom, 1);
  /* Skip layout/paint of off-screen thumbnails so a resizer drag or zoom only
     reflows the visible pages (not all 20), keeping interactions smooth. */
  content-visibility: auto;
  contain-intrinsic-size: auto 980px;
}

.review-list {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.review-section-chat {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 10px 18px;
}

/* Heading, section picker and Send share one compact row so the only tall
   element left is the (resizable) prompt textarea. */
.prompt-controls {
  align-items: center;
  display: flex;
  gap: 8px;
}

.prompt-heading {
  flex: none;
  margin-bottom: 0;
  white-space: nowrap;
}

.prompt-select {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.review-prompt-send {
  flex: none;
  width: fit-content;
}

/* Auto-growing composer: one line when empty, expanding with content up to a cap
   (JS sets the height; see autoGrowPrompt). align-self:start keeps that height
   authoritative in the grid; the min-height override + zeroed .title-input margins
   let it be as short as a single line. */
.review-section-chat #reviewPromptText {
  align-self: start;
  margin: 0;
  max-height: 220px;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 10px; /* tighter than the default .title-input 10px — one compact line */
  resize: none;
}

.review-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 8px;
  padding: 12px;
}

.review-card.active-review {
  border-color: var(--line-strong);
  box-shadow: inset 3px 0 0 var(--brand);
}

.review-card-header,
.credential-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.review-card-header span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.citation-check-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.citation-check-body {
  display: grid;
  gap: 4px;
}
/* Per-reference Check/Recheck: right-aligned, quiet until hovered. */
.citation-check-actions {
  display: flex;
  justify-content: flex-end;
}
.citation-recheck {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}
.citation-recheck .citation-recheck-spinner {
  display: none;
}
.citation-recheck.is-checking .citation-recheck-spinner {
  animation: skim-spin 0.7s linear infinite;
  display: inline-block;
}
/* Brief confirmation flash after an in-place recheck updates the card. */
.citation-check-card.citation-check-flash {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-tint);
}
.citation-check-card.citation-check-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-tint);
}

/* "Check citations" running indicator: spinner in the button + an indeterminate
   progress bar with status text while the resolver queries the metadata sources. */
#citationCheckButton {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

#citationCheckButton .citation-check-spinner {
  display: none;
}

#citationCheckButton.is-checking .citation-check-spinner {
  animation: skim-spin 0.7s linear infinite;
  display: inline-block;
}

/* Document-integrity preflight: reuse the citation card + spinner look, add a
   severity pill (high=red, medium=amber, low/info=muted). */
#runAllChecksButton {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

#runAllChecksButton .integrity-check-spinner {
  display: none;
}

#runAllChecksButton.is-checking .integrity-check-spinner {
  animation: skim-spin 0.7s linear infinite;
  display: inline-block;
}

#runAllChecksButton.is-checking {
  opacity: 0.7;
  pointer-events: none;
}

/* Preflight checklist — one row per check, run/re-run each independently. */
.preflight-checklist {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 2px 0 10px;
  padding: 0;
}

.preflight-check {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 6px 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 8px 10px;
  transition: border-color 120ms ease, background 400ms ease;
}

.preflight-check-main {
  min-width: 0;
}

.preflight-check-label {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 650;
}

.preflight-check-beta {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 4px;
  color: var(--brand);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 1px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.preflight-check-desc {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
}

.preflight-check-status {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}

.preflight-check-status[data-state="clean"] {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.preflight-check-status[data-state="issues"] {
  background: color-mix(in srgb, var(--warning) 24%, transparent);
  color: var(--warning);
}

.preflight-check-status[data-state="unavailable"] {
  font-style: italic;
}

.preflight-check-status[data-state="error"] {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.preflight-check-note {
  color: var(--danger);
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

/* Finding locators: page chips + the exact excerpts, so every finding is
   checkable + jump-to-able (shared by all checks). */
.finding-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.finding-page-chip {
  background: var(--brand-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--brand);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}

.finding-page-chip:hover {
  border-color: var(--brand);
}

.finding-page-chip.mini {
  font-size: 10.5px;
  padding: 1px 7px;
}

.finding-evidence {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.finding-evidence li {
  align-items: start;
  display: flex;
  gap: 6px;
}

.finding-excerpt {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.finding-evidence-url {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 8px;
  word-break: break-all;
}

/* PDF marker: a box drawn over the page thumbnail at the finding's location. */
.page-image-wrap {
  display: block;
  position: relative;
}

.finding-overlay-layer {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.finding-marker {
  animation: findingMarkerPulse 4s ease forwards;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 2px solid var(--danger);
  border-radius: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent);
  position: absolute;
}

@keyframes findingMarkerPulse {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

.pdf-page.finding-page-flash {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.preflight-run.is-checking {
  opacity: 0.6;
  pointer-events: none;
}

/* The paid Smart (structured) and Full (thorough) passes are opt-in — render them as quieter,
   secondary actions beside the standard Run button, with tabular figures for the credit cost. */
.preflight-run-smart,
.preflight-run-deep {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.preflight-run-smart:hover:not(:disabled),
.preflight-run-deep:hover:not(:disabled) {
  opacity: 1;
}

.preflight-check.preflight-flash {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.preflight-check.preflight-error {
  border-color: var(--danger);
}

.preflight-actions {
  margin: 0 0 12px;
}

.preflight-export {
  align-items: center;
  color: var(--brand);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 650;
  gap: 6px;
  text-decoration: none;
}

.preflight-export:hover {
  color: var(--brand-hover);
}

#citationSupportButton {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

#citationSupportButton .citation-support-spinner {
  display: none;
}

#citationSupportButton.is-checking .citation-support-spinner {
  animation: skim-spin 0.7s linear infinite;
  display: inline-block;
}

/* Citation-support verdict on a citation card: colored by supported / partial /
   unsupported / uncertain. */
.citation-check-card .citation-support {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border-left: 3px solid var(--muted);
  border-radius: 4px;
  color: var(--text-secondary);
  display: block;
  padding: 4px 8px;
}

.citation-check-card .citation-support[data-support="supported"] {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-left-color: var(--success);
}

.citation-check-card .citation-support[data-support="partial"] {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-left-color: var(--warning);
}

.citation-check-card .citation-support[data-support="unsupported"] {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-left-color: var(--danger);
}

/* "Last scanned" indicator so a clean preflight reads as done, not un-run. */
.integrity-scan-status {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 4px;
}

.integrity-scan-status[data-state="clean"] {
  color: var(--success);
}

.integrity-scan-status[data-state="issues"] {
  color: var(--warning);
}

.integrity-finding-card .integrity-severity {
  align-items: center;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: var(--radius-pill);
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  margin-top: 0;
  padding: 3px 9px;
  white-space: nowrap;
}

.integrity-finding-card .integrity-severity[data-severity="high"] {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.integrity-finding-card .integrity-severity[data-severity="medium"] {
  background: color-mix(in srgb, var(--warning) 24%, transparent);
  color: var(--warning);
}

.citation-check-status {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 6px;
  padding: 2px 0 4px;
}

/* The `display: grid` above would otherwise beat the UA [hidden] rule, leaving the
   "Checking…" status visible when no check is running. Restore hidden. */
.citation-check-status[hidden] {
  display: none;
}

.citation-check-status.is-error {
  color: var(--danger);
}

.citation-check-status-row {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.citation-check-count {
  color: var(--text-body);
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Native <progress>: the browser renders the determinate fill (value/max set by
   JS) or its own indeterminate animation when no value is set. We just theme it. */
.citation-check-progress {
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--brand);
  display: block;
  height: 5px;
  overflow: hidden;
  width: 100%;
}

.citation-check-status.is-error .citation-check-progress {
  display: none;
}

.citation-check-progress::-webkit-progress-bar {
  background: transparent;
}

.citation-check-progress::-webkit-progress-value {
  background: var(--brand);
  border-radius: var(--radius-pill);
  transition: width 0.25s ease;
}

.citation-check-progress::-moz-progress-bar {
  background: var(--brand);
  border-radius: var(--radius-pill);
}

.citation-check-card .review-card-header {
  align-items: flex-start;
}

/* The reference text leads the card (with the [n] marker inline); the status is
   a right-aligned badge that no longer displaces it to a second line. */
.citation-ref-line {
  color: var(--text-body);
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  min-width: 0;
}

.citation-ref-line strong {
  color: var(--brand);
}

.citation-ref-line .citation-link {
  color: inherit;
}

/* Citation integrity status pill — color-coded by the real check outcome. */
.citation-check-card .citation-status {
  align-items: center;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: var(--radius-pill);
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  margin-top: 0;
  padding: 3px 9px;
  white-space: nowrap;
}

.citation-check-card .citation-status-dot {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 7px;
  margin-top: 0;
  width: 7px;
}

.citation-check-card .citation-status-score {
  display: inline-block;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-top: 0;
  opacity: 0.72;
}

.citation-check-card .citation-status[data-status="verified"] {
  background: color-mix(in srgb, var(--success) 24%, transparent);
  color: var(--success);
}

.citation-check-card .citation-status[data-status="needs_review"] {
  background: color-mix(in srgb, var(--warning) 24%, transparent);
  color: var(--warning);
}

.citation-check-card .citation-status[data-status="not_found"],
.citation-check-card .citation-status[data-status="suspicious"],
.citation-check-card .citation-status[data-status="retracted_or_flagged"] {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.review-delete {
  flex: 0 0 auto;
}

/* --- Interactive review sections: collapse caret, rename, delete, add ----- */
.review-sections {
  display: grid;
  gap: 8px;
}
.review-section {
  border-top: 1px solid var(--line-faint);
  display: grid;
  gap: 6px;
  padding-top: 8px;
}
.review-section.is-dragging {
  opacity: 0.55;
}
/* Distinct amber "highlighter" selection colour for the review editors, so when a
   Rewrite/Rephrase/Expand leaves the edited text selected, it clearly reads as a
   change (and stands out from a normal blue OS selection elsewhere). */
.review-section-editor::selection {
  background: rgba(250, 204, 21, 0.55);
  color: var(--text-heading);
}
.review-section-editor::-moz-selection {
  background: rgba(250, 204, 21, 0.55);
  color: var(--text-heading);
}
.review-section-head {
  align-items: center;
  display: flex;
  gap: 4px;
}
.review-section-grip {
  color: var(--muted);
  cursor: grab;
  display: inline-flex;
  opacity: 0.45;
  touch-action: none;
  transition: opacity 0.15s ease;
}
.review-section-grip:hover {
  opacity: 1;
}
.review-section.is-dragging .review-section-grip {
  cursor: grabbing;
}
.review-section-caret {
  align-items: center;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  padding: 2px;
}
.review-section-caret .collapse-chevron {
  height: 15px;
  transition: transform 0.15s ease;
  width: 15px;
}
.review-section.is-collapsed .review-section-caret .collapse-chevron {
  transform: rotate(-90deg);
}
.review-section-title {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  color: var(--ink);
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  padding: 3px 6px;
}
.review-section-title:hover {
  border-color: var(--line);
}
.review-section-title:focus {
  background: var(--surface);
  border-color: var(--brand);
  outline: none;
}
.review-section-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  opacity: 0;
  padding: 3px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.review-section:hover .review-section-delete,
.review-section-delete:focus-visible {
  opacity: 1;
}
.review-section-delete:hover {
  color: var(--danger);
}
.review-section-delete .trash-icon {
  height: 15px;
  stroke: currentColor;
  width: 15px;
}
.review-section.is-collapsed .review-section-editor {
  display: none;
}
.review-add-section {
  align-items: center;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 7px;
  width: 100%;
}
.review-add-section:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.review-card p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.review-section-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.45;
  min-height: 120px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.review-save {
  justify-self: start;
}

.review-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Editable review name + autosave status ------------------------------ */
.review-card-titlebox {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-title-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-heading);
  font-weight: 700;
  margin: -3px -6px 0;
  padding: 3px 6px;
  width: 100%;
}
.review-title-input:hover {
  border-color: var(--line);
}
.review-title-input:focus {
  background: var(--surface);
  border-color: var(--brand);
  outline: none;
}
.review-title-input::placeholder {
  color: var(--muted);
  font-weight: 700;
}
.review-save-status {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin-right: auto; /* keep the action buttons to the right */
  white-space: nowrap;
}
.review-save-status[data-state="saving"] { color: var(--info); }
.review-save-status[data-state="saved"] { color: var(--brand); }
.review-save-status[data-state="error"] { color: var(--danger); }

/* --- Revision history overlay -------------------------------------------- */
.review-history-overlay {
  align-items: center;
  backdrop-filter: saturate(1.1) blur(3px);
  background: rgba(23, 31, 46, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 120;
}
.review-history-overlay[hidden] { display: none; }
.review-history-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  max-height: min(760px, 92vh);
  overflow: hidden;
  width: min(920px, 100%);
}
.review-history-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
}
.review-history-title {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.review-history-subtitle {
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-history-close { color: var(--muted); }
.review-history-body {
  display: grid;
  flex: 1;
  grid-template-columns: 264px 1fr;
  min-height: 0;
}
.review-history-list {
  border-right: 1px solid var(--line);
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 8px;
}
.review-history-item { margin: 0 0 4px; }
.review-history-item-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 8px;
  text-align: left;
  width: 100%;
}
.review-history-item-btn:hover { background: var(--bg); }
.review-history-item.active .review-history-item-btn {
  background: var(--brand-tint);
  border-color: var(--brand);
}
.rev-when { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.rev-tags { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; }
.rev-origin {
  background: var(--bg);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-badge);
  letter-spacing: 0;
  padding: 1px 7px;
  text-transform: uppercase;
}
.rev-origin-ai_review { background: var(--info-tint); color: var(--info); }
.rev-origin-manual { background: var(--brand-tint); color: var(--brand-hover); }
.rev-origin-restore { background: var(--warning-tint); color: var(--warning); }
.rev-label {
  background: var(--brand);
  border-radius: var(--radius-pill);
  color: var(--brand-ink);
  font-size: var(--fs-badge);
  padding: 1px 7px;
}
.rev-pin { color: var(--warning); font-size: var(--fs-sm); }
.rev-delta { color: var(--muted); font-size: var(--fs-meta); }
.review-history-preview {
  overflow-y: auto;
  padding: 14px 16px;
}
.review-history-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.review-history-meta { color: var(--muted); font-size: var(--fs-sm); }
.review-history-toolbar-actions { align-items: center; display: flex; gap: 6px; }
.review-history-label { width: 168px; }
.review-diff-legend { color: var(--muted); font-size: var(--fs-meta); margin: 0 0 10px; }
.review-diff-legend ins,
.review-diff ins {
  background: var(--success-tint);
  border-radius: 2px;
  text-decoration: none;
}
.review-diff-legend del,
.review-diff del {
  background: var(--danger-tint);
  border-radius: 2px;
  color: var(--danger);
}
.review-history-section { border-top: 1px solid var(--line); padding: 8px 0; }
.review-history-section summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: capitalize;
}
.review-diff {
  font-size: var(--fs-reading);
  line-height: 1.55;
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.review-diff-empty,
.review-diff-unchanged { color: var(--muted); }
.review-diff-nochange { color: var(--muted); font-weight: 400; }
@media (max-width: 640px) {
  .review-history-body { grid-template-columns: 1fr; }
  .review-history-list { border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
}

.style-textarea {
  min-height: 84px;
  resize: vertical;
}

.template-actions {
  display: grid;
  gap: 8px;
}

.style-sample-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 4px;
  padding: 8px;
}

.style-sample-item strong {
  font-size: 12px;
}

.style-sample-item p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.review-edit-popover {
  background: #26313a;
  border: 1px solid #1d252c;
  border-radius: var(--radius-ctl);
  box-shadow: 0 8px 22px rgba(23, 31, 46, 0.22);
  display: flex;
  gap: 1px;
  padding: 2px;
  position: fixed;
  z-index: 40;
}

.review-edit-popover[hidden] {
  display: none;
}

.review-edit-popover button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-ctl);
  color: #f8fafc;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
}

.review-edit-popover button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.chat-thread {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 12px;
  min-height: 140px;
  overflow: auto;
  padding: 18px;
}

.message {
  border-radius: var(--radius-ctl);
  line-height: 1.45;
  padding: 12px;
}

.message p,
.message .message-body {
  margin: 5px 0 0;
}

.message.assistant {
  background: var(--brand-tint);
}

.message.user {
  background: var(--bg-alt);
}

.message.pending {
  color: var(--muted);
}

.message.error {
  background: var(--danger-tint);
  color: var(--danger);
}

.message.muted {
  color: var(--muted);
}

.message-citations {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

/* Each citation shows its page + a snippet of the quoted passage, so the reader
   can tell what it refers to at a glance (full text on hover). */
.message-citation {
  align-items: center;
  background: var(--info-tint);
  border: 1px solid var(--info-tint);
  border-radius: var(--radius-ctl);
  color: var(--info);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 8px;
  padding: 6px 10px;
  text-align: left;
  width: 100%;
}

.message-citation:hover {
  background: var(--info-tint);
  border-color: var(--info-tint);
}

.message-citation .cite-page {
  background: var(--info);
  border-radius: 4px;
  color: #fff;
  flex: none;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
}

.message-citation .cite-quote {
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-box {
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 14px;
  position: sticky;
  z-index: 8;
}

.chat-box button {
  background: var(--info);
  color: white;
}

/* "Send" swaps to "Sending..." while a message is in flight — reserve the wider
   label so the input and Clear button don't shift on every send. */
.chat-box button[type="submit"] {
  min-width: 92px;
}

.chat-box #documentChatClear {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

.chat-box #documentChatClear:hover {
  color: var(--ink);
}

@media (max-width: 1100px) {
  /* Not enough width for a side pane, so the assistant (chat + Skim Assist)
     stacks as a reading pane at the bottom instead of disappearing. */
  .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .pane-resizer-right,
  .pane-resizer-left,
  .right-pane-toggle {
    display: none;
  }

  .doc-rail {
    grid-column: 1;
    grid-row: 1;
  }

  .reader-column {
    grid-column: 2;
    grid-row: 1;
    height: auto;
    min-height: 0;
  }

  body:not(.right-pane-hidden) .probe-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto;
    max-height: 46vh;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
    height: auto;
    min-height: 100vh;
  }

  .doc-rail {
    border-width: 0 0 1px;
  }

  .reader-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .reader-surface {
    padding: 14px;
  }

  .math-panel-body {
    grid-template-columns: 1fr;
  }

  .math-probe-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* ===== Shared bottom dock: Reader (chat/probes) and Equation (walkthrough)
   share one full-width panel below the PDF; the view switcher toggles which
   one shows. Overrides the older right-pane / side-dock layout. ===== */
.app-shell {
  grid-template-columns: var(--left-pane-width) 6px minmax(0, 1fr) 6px var(--right-pane-width) !important;
  grid-template-rows: minmax(0, 1fr) var(--bottom-dock-height, 40vh) !important;
}

.app-shell > .doc-rail {
  grid-column: 1;
  grid-row: 1 / 3;
}

.app-shell > .pane-resizer-left {
  grid-column: 2;
  grid-row: 1 / 3;
}

.app-shell > .reader-column {
  grid-column: 3;
  grid-row: 1;
  height: auto;
}

/* Horizontal grab handle above the bottom dock, matching the side resizers. */
.app-shell > .dock-resizer {
  align-items: center;
  align-self: start;
  cursor: ns-resize;
  display: flex;
  grid-column: 3;
  grid-row: 2;
  height: 10px;
  justify-content: center;
  margin-top: -5px;
  position: relative;
  touch-action: none;
  z-index: 12;
}

.app-shell > .dock-resizer::before {
  background: var(--line);
  border-radius: var(--radius-pill);
  content: "";
  height: 4px;
  transition: background 120ms ease, width 120ms ease;
  width: 48px;
}

.app-shell > .dock-resizer:hover::before,
body.resizing-panes .app-shell > .dock-resizer::before {
  background: var(--brand);
  width: 72px;
}

/* No bottom dock to resize when maximized, docked to the right, or narrow. */
body.reader-maximized .app-shell > .dock-resizer,
body.dock-right .app-shell > .dock-resizer {
  display: none;
}

/* Bottom dock: chat/probes (Reader) or equation walkthrough (Equation),
   in the center column, bounded by the left and right rails. */
.app-shell > .math-explainer-panel,
.app-shell > .probe-panel {
  border: 0;
  border-top: 1px solid var(--line);
  box-shadow: none;
  flex: initial;
  grid-column: 3;
  grid-row: 2;
  height: auto;
  inset: auto;
  max-height: none;
  min-height: 0;
  position: relative;
  right: auto;
  width: auto;
  z-index: auto;
}

.app-shell > .pane-resizer-right {
  display: block;
  grid-column: 4;
  grid-row: 1 / 3;
}

.app-shell > .right-rail {
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-column: 5;
  grid-row: 1 / 3;
  min-width: 0;
  overflow: auto;
  padding: 16px;
}

body:not(.view-equation) .app-shell > .math-explainer-panel {
  display: none !important;
}

body.view-equation .app-shell > .probe-panel {
  display: none !important;
}

body.view-equation .app-shell > .math-explainer-panel {
  display: block;
}

/* Maximize PDF hides the bottom dock and right rail for a full read. */
body.reader-maximized .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
}

body.reader-maximized .app-shell > .math-explainer-panel,
body.reader-maximized .app-shell > .probe-panel,
body.reader-maximized .app-shell > .right-rail,
body.reader-maximized .app-shell > .pane-resizer-right {
  display: none !important;
}

/* Dock right: the chat / walkthrough dock moves to the right side (below the
   reference rail) and the PDF takes the full center height. */
body.dock-right .app-shell > .reader-column {
  grid-row: 1 / 3;
}

body.dock-right .app-shell > .right-rail {
  grid-row: 1;
}

body.dock-right .app-shell > .math-explainer-panel,
body.dock-right .app-shell > .probe-panel {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  grid-column: 5;
  grid-row: 2;
}

/* The view switcher (Reader/Equation) controls the dock content, so the legacy
   math toolbar toggle and expand button are redundant; the dock button stays
   (repurposed as the bottom/right dock toggle). */
#toggleMathHelper,
#expandMathHelper {
  display: none !important;
}

/* --- Patent Check ------------------------------------------------------------ */

.patent-check-surface {
  display: grid;
  gap: 16px;
  overflow-y: auto;
  padding: 20px 24px 40px;
}

.patent-upgrade-note {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: var(--radius-card);
  color: var(--warning);
  font-size: var(--fs-base);
  padding: 10px 14px;
}

.patent-upgrade-note a {
  color: inherit;
  font-weight: 700;
}

.patent-check-form {
  display: grid;
  gap: 10px;
}

.patent-check-form .style-textarea {
  font-family: var(--font-sans);
  min-height: 160px;
  resize: vertical;
}

.patent-check-controls {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.patent-depth-field {
  flex: 1;
  max-width: 320px;
}

/* Depth as a tier slider (matches the sidebar Model/Effort sliders). */
.patent-check-controls .tier-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tier-cap-hint {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.tier-cap-hint a {
  color: var(--brand);
  font-weight: 650;
}

/* The depth <select> inherits .title-input's 10px vertical margin, which — inside
   its label flex item — floats its visible bottom above the Run button. Zero it
   and match the button height so both share one bottom baseline (align-items:end). */
.patent-check-controls .title-input,
.patent-check-controls .primary-button {
  height: 34px;
  margin: 0;
}

.patent-model-hint {
  align-self: center;
  color: var(--muted);
  flex: 1;
  font-size: var(--fs-meta);
}

#runPatentCheckButton {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: 6px;
  position: relative;
  /* Reserve the idle-label width ("Run Patent Check") so the swap to
     "Checking…" never shrinks the box mid-run. */
  min-width: 154px;
}

/* Take the spinner out of flow so the label stays centered (an in-flow slot on
   the left offsets it), and overlay it at the left edge only while checking. top
   uses a fixed offset, not transform, so it doesn't fight the skim-spin rotate. */
#runPatentCheckButton .patent-check-spinner {
  position: absolute;
  left: 12px;
  top: calc(50% - 6.5px);
  visibility: hidden;
}

#runPatentCheckButton.is-checking .patent-check-spinner {
  animation: skim-spin 0.7s linear infinite;
  visibility: visible;
}

.patent-check-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

/* display: grid/flex above beats the UA [hidden] rule — restore it so a hidden panel
   doesn't stay visible (see the same fix on .citation-check-status). */
.patent-check-progress[hidden],
.patent-check-results[hidden],
.patent-model-warning[hidden] {
  display: none;
}

.patent-check-progress.is-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
}

.patent-progress-steps {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.patent-progress-steps li {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--fs-sm);
  gap: 8px;
}

.patent-step-dot {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.patent-progress-steps li.done {
  color: var(--ink);
}

.patent-progress-steps li.done .patent-step-dot {
  background: var(--brand);
}

.patent-progress-steps li.active {
  color: var(--brand-hover);
  font-weight: 700;
}

.patent-progress-steps li.active .patent-step-dot {
  animation: skim-spin 0.9s linear infinite;
  background: transparent;
  border: 2px solid var(--brand);
  border-top-color: transparent;
}

.patent-progress-status-row {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.search-trace {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding-top: 10px;
}

.search-trace-heading {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.search-trace-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-trace-list li {
  color: var(--ink);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
  padding-left: 16px;
  position: relative;
}

.search-trace-list li::before {
  background: var(--brand);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 2px;
  position: absolute;
  top: 0.55em;
  width: 6px;
}

.search-trace-list li.is-limit::before {
  background: var(--warning);
}

.search-summary .search-trace-list {
  margin-top: 8px;
}

.dossier-search {
  margin-top: 12px;
}

.patent-check-progress.is-error .patent-progress-status-row {
  color: var(--danger);
  font-weight: 700;
}

.patent-check-progress.is-error #patentProgressBar {
  display: none;
}

.patent-check-empty {
  padding: 6px 0;
}

.patent-check-results {
  display: grid;
  gap: 16px;
}

.patent-result-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.patent-decision-badge {
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  padding: 6px 14px;
  text-transform: capitalize;
}

.patent-decision-badge[data-decision="pursue"] {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  color: var(--success);
}

.patent-decision-badge[data-decision="refine"] {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--warning);
}

.patent-decision-badge[data-decision="pause"] {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}

.patent-decision-badge[data-decision="uncertain"] {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.patent-result-scores {
  display: grid;
  gap: 6px;
  min-width: 240px;
}

.patent-score-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 92px 1fr 30px;
}

.patent-score-label {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.patent-score-bar {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: var(--radius-pill);
  display: block;
  height: 6px;
  overflow: hidden;
}

.patent-score-fill {
  background: var(--brand);
  border-radius: var(--radius-pill);
  display: block;
  height: 100%;
}

.patent-score-value {
  color: var(--ink);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.patent-result-summary {
  color: var(--ink);
  font-size: var(--fs-reading);
  line-height: 1.5;
  margin: 0;
}

.patent-style-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-style: italic;
  margin: 0;
}

.patent-model-warning {
  align-items: flex-start;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-radius: var(--radius-ctl);
  color: var(--warning);
  display: flex;
  font-size: var(--fs-sm);
  gap: 8px;
  padding: 8px 12px;
}

.patent-model-warning svg {
  flex: none;
  margin-top: 1px;
}

.patent-rationale summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.patent-rationale p {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.patent-result-section {
  display: grid;
  gap: 8px;
}

.patent-feature-list {
  color: var(--ink);
  display: grid;
  font-size: var(--fs-sm);
  gap: 6px;
  line-height: 1.4;
  margin: 0;
  padding-left: 20px;
}

.patent-hit-list {
  display: grid;
  gap: 10px;
}

.patent-hit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.patent-hit-card.is-open {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

/* Clickable summary row: rank · title/meta · similarity */
.patent-hit-summary {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.patent-hit-summary:hover {
  background: var(--bg);
}

.patent-hit-rank {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  display: flex;
  flex: none;
  font-size: var(--fs-meta);
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.patent-hit-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.patent-sim {
  align-items: flex-end;
  display: grid;
  flex: none;
  gap: 4px;
  width: 96px;
}

.patent-sim-pct {
  font-size: var(--fs-base);
  font-weight: 750;
}

.patent-sim-bar {
  background: var(--line);
  border-radius: var(--radius-pill);
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.patent-sim-bar > span {
  background: var(--muted);
  border-radius: var(--radius-pill);
  display: block;
  height: 100%;
}

.patent-sim[data-band="high"] .patent-sim-pct { color: var(--danger); }
.patent-sim[data-band="high"] .patent-sim-bar > span { background: var(--danger); }
.patent-sim[data-band="medium"] .patent-sim-pct { color: var(--warning); }
.patent-sim[data-band="medium"] .patent-sim-bar > span { background: var(--warning); }
.patent-sim[data-band="low"] .patent-sim-pct { color: var(--success); }
.patent-sim[data-band="low"] .patent-sim-bar > span { background: var(--success); }

.patent-hit-detail {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.patent-hit-detail[hidden] {
  display: none;
}

/* Scientific-literature cross-reference */
.scholar-block {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}

.scholar-block h3 {
  font-size: var(--fs-heading);
  margin: 0 0 4px;
}

.scholar-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.scholar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 5px;
  padding: 12px 14px;
}

.scholar-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.scholar-title {
  color: var(--text-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0;
}

.scholar-title a {
  color: var(--brand-hover);
}

.scholar-cites {
  color: var(--muted);
  flex: none;
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.scholar-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.scholar-snippet {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
}

.scholar-pdf {
  color: var(--brand-hover);
  font-size: var(--fs-meta);
  font-weight: 650;
  justify-self: start;
}

/* Element-level claim chart (FTO matrix) */
.claim-chart-scroll {
  margin-top: 10px;
  overflow-x: auto;
}

.claim-chart {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 100%;
}

.claim-chart th,
.claim-chart td {
  border: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
}

.claim-chart thead th {
  background: var(--bg);
  font-weight: 700;
  white-space: nowrap;
}

.claim-chart thead th a {
  color: var(--brand-hover);
}

.cc-limitation {
  border-left-width: 3px;
  max-width: 260px;
  min-width: 180px;
}

.cc-el {
  display: block;
  font-weight: 700;
}

.cc-text {
  color: var(--muted);
  display: block;
  font-size: var(--fs-meta);
  line-height: 1.4;
}

.cc-cell {
  cursor: help;
  font-weight: 800;
  text-align: center;
}

.cc-cell[data-status="disclosed"],
.cc-limitation[data-status="disclosed"] {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-left-color: var(--danger);
  color: var(--danger);
}

.cc-cell[data-status="partially_disclosed"],
.cc-limitation[data-status="partially_disclosed"] {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-left-color: var(--warning);
  color: var(--warning);
}

.cc-cell[data-status="not_found"],
.cc-limitation[data-status="not_found"] {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-left-color: var(--success);
  color: var(--success);
}

.cc-cell[data-status="uncertain"],
.cc-limitation[data-status="uncertain"] {
  border-left-color: var(--muted);
  color: var(--muted);
}

.patent-hit-detail .secondary-button {
  justify-self: start;
  width: auto;
}

.patent-hit-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.patent-hit-features .rail-heading {
  flex-basis: 100%;
}

.patent-feature-chip {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: var(--radius-ctl);
  color: var(--brand-hover);
  font-size: var(--fs-meta);
  padding: 3px 9px;
}

.patent-hit-header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.patent-hit-card-legacy {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

.patent-hit-header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.patent-hit-title {
  color: var(--text-heading);
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.patent-hit-title a {
  color: var(--brand-hover);
}

.patent-disclosure-status {
  border-radius: var(--radius-pill);
  flex: none;
  font-size: var(--fs-meta);
  font-weight: 700;
  padding: 3px 9px;
  text-transform: capitalize;
  white-space: nowrap;
}

.patent-disclosure-status[data-status="disclosed"] {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.patent-disclosure-status[data-status="partially_disclosed"] {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--warning);
}

.patent-disclosure-status[data-status="not_found"] {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  color: var(--success);
}

.patent-disclosure-status[data-status="uncertain"] {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.patent-hit-meta {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin: 0;
}

/* Why the engine surfaced this candidate: a search it wrote, or a citation link. */
.patent-hit-via {
  color: var(--muted);
  display: block;
  font-size: var(--fs-meta);
  font-style: italic;
  overflow-wrap: anywhere;
}

.patent-hit-explanation {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.4;
  margin: 0;
}

.patent-history-item.active {
  box-shadow: inset 3px 0 0 var(--brand);
}

.patent-check-side .patent-side-copy {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* --- Inventor workflow (vault dashboard + invention workspace) ----------------- */

.workflow-body {
  background: var(--bg);
  min-height: 100vh;
}

/* Opt-in expert execution panel. It exists directly in the left rail only when enabled. */
[data-expert-mode="true"] .tools-sidebar { --sidebar-w: 320px; }
.expert-sidebar-panel { gap: 7px; }
.expert-panel-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.expert-live-badge { background: var(--accent-tint); border-radius: 999px; color: var(--accent);
  font-size: 10px; font-weight: 800; padding: 2px 7px; text-transform: uppercase; }
.expert-panel-notice { background: var(--accent-tint); border-radius: 8px; color: var(--muted);
  font-size: 10.5px; line-height: 1.45; margin: 0; padding: 8px 9px; }
.expert-group { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.expert-group summary { cursor: pointer; font-size: 11.5px; font-weight: 750; list-style-position: outside; margin-left: 14px; }
.expert-row { background: var(--bg); border-radius: 8px; margin: 6px 0; padding: 7px 8px; }
.expert-row strong { display: block; font-size: 11.5px; }
.expert-meta { color: var(--muted); font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; }

.workflow-topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 22px;
}

/* On the centered dashboards (body.app-centered) the full-bleed bar insets its content
   to line up with the .workflow-main column. Full-width layouts (the invention
   workspace, with its edge-anchored tools sidebar) keep the default padding. */
body.app-centered .workflow-topbar {
  padding-left: max(var(--app-gutter), calc((100% - var(--app-max-width)) / 2 + var(--app-gutter)));
  padding-right: max(var(--app-gutter), calc((100% - var(--app-max-width)) / 2 + var(--app-gutter)));
}

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

.workflow-topnav {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* Phones: the nav group gets its own full-width row and wraps, instead of running off the
   right edge (it was 728px wide on a 375px screen, hiding Help and Account). The workspace's
   stage picker takes a row of its own and scrolls sideways if its stages don't fit. */
@media (max-width: 720px) {
  .workflow-topnav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0;
    min-width: 0;
  }

  .workflow-topnav > .invention-status-field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .invention-status-field .seg-picker {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .invention-status-field .seg-picker::-webkit-scrollbar {
    display: none;
  }

  .invention-status-field .seg-option {
    flex: none;
  }

  .workflow-title-wrap {
    flex-basis: 100%;
    min-width: 0;
  }
}

.credit-pill {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-meta);
  font-weight: 650;
  gap: 6px;
  padding: 5px 11px;
  text-decoration: none;
  white-space: nowrap;
}

.credit-pill:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.credit-pill #creditBalance {
  color: var(--ink);
  font-weight: 750;
}

.credit-pill-dot {
  background: var(--brand);
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

/* In-app modal dialogs (ConfreadShared.confirmDialog / promptDialog) */
.cf-modal-overlay {
  align-items: center;
  background: var(--scrim);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}

.cf-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  max-width: 440px;
  padding: 22px 24px;
  width: 100%;
}

.cf-modal-title {
  font-size: var(--fs-lg);
  font-weight: 750;
  margin: 0 0 8px;
}

.cf-modal-message {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}

.cf-modal-input {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  margin-top: 14px;
  padding: 9px 11px;
  resize: vertical;
  width: 100%;
}

.cf-modal-input.is-error {
  border-color: var(--danger);
}

.cf-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.cf-modal-actions .primary-button,
.cf-modal-actions .secondary-button {
  width: auto;
}

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

.primary-button.is-danger:hover {
  background: color-mix(in srgb, var(--danger-fill) 85%, black);
}

.workflow-main {
  margin: 0 auto;
  max-width: var(--app-max-width);
  padding: 28px var(--app-gutter) 80px;
  width: 100%;
}

/* Vault dashboard */

.vault-hero {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 26px;
}

.vault-hero h1 {
  font-size: 26px;
  margin: 0 0 6px;
}

.vault-hero p {
  color: var(--muted);
  font-size: var(--fs-reading);
  margin: 0;
  max-width: 520px;
}

.vault-new-form {
  align-items: flex-end;
  display: flex;
  gap: 8px;
}

/* Zero the global .title-input margin and pin both controls to one height so the
   input and "New invention" button share a bottom baseline (see .invite-form). */
.vault-new-form .title-input {
  height: 40px;
  margin: 0;
  min-width: 230px;
}

.vault-new-form .primary-button {
  height: 40px;
}

/* Phones: the title field shrinks to share the row with its button (its 230px floor pushed the
   page 4px wider than a 375px screen). */
@media (max-width: 480px) {
  .vault-hero-actions,
  .vault-new-form {
    width: 100%;
  }

  .vault-new-form .title-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .vault-new-form .primary-button {
    flex: none;
  }
}

.vault-filter {
  margin-bottom: 14px;
}

.vault-filter .title-input {
  max-width: 340px;
}

.vault-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.vault-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  /* Column layout + margin-top:auto on the foot (vault.html) pins the disclosure
     chip / review CTA to the card bottom so a grid row's feet share a baseline. */
  display: flex;
  flex-direction: column;
  position: relative;
}

.vault-card-link {
  color: inherit;
  display: block;
  padding: 16px 16px 14px;
  text-decoration: none;
}

.vault-card-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
  /* Leave room in the top-right corner for the absolutely-positioned delete
     button so the status pill never sits under it. */
  padding-right: 30px;
}

.vault-card-head h2 {
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
  padding-right: 20px;
}

.invention-status-pill {
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  border-radius: var(--radius-pill);
  color: var(--muted);
  flex: none;
  font-size: var(--fs-meta);
  font-weight: 700;
  padding: 3px 10px;
  white-space: nowrap;
}

.invention-status-pill[data-status="capturing"] {
  background: color-mix(in srgb, var(--info) 16%, transparent);
  color: var(--info);
}

.invention-status-pill[data-status="checking"] {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
}

.invention-status-pill[data-status="drafting"] {
  background: var(--brand-tint);
  color: var(--brand-hover);
}

.invention-status-pill[data-status="filed"] {
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--success);
}

.vault-card-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.vault-card-meta dt {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vault-card-meta dd {
  font-size: var(--fs-sm);
  margin: 3px 0 0;
}

.vault-deadline.is-urgent {
  color: var(--danger);
  font-weight: 700;
}

.vault-deadline.is-warning {
  color: var(--warning);
  font-weight: 700;
}

.vault-card-delete {
  border-radius: var(--radius-ctl);
  height: 28px;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
}

/* ---- Vault view toggle: Blocks (cards) vs List ----------------------------- */
.vault-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.vault-toolbar .vault-filter {
  flex: 1;
  margin-bottom: 0;
}

.vault-view-toggle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: inline-flex;
  margin-left: auto;
  overflow: hidden;
}

.vault-view-btn {
  align-items: center;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 650;
  gap: 6px;
  padding: 7px 12px;
}

.vault-view-btn + .vault-view-btn {
  border-left: 1px solid var(--line);
}

.vault-view-btn:hover {
  color: var(--ink);
}

.vault-view-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-hover);
}

.vault-view-btn svg {
  height: 15px;
  width: 15px;
}

/* List mode: each card collapses to a single compact row. */
.vault-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault-grid.is-list .vault-card {
  box-shadow: none;
}

.vault-grid.is-list .vault-card-link {
  align-items: center;
  display: flex;
  gap: 20px;
  padding: 11px 46px 11px 16px;
}

.vault-grid.is-list .vault-card-head {
  align-items: center;
  flex: 1 1 40%;
  margin-bottom: 0;
  min-width: 0;
  padding-right: 0;
}

.vault-grid.is-list .vault-card-head h2 {
  overflow: hidden;
  padding-right: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-grid.is-list .vault-card-meta {
  display: flex;
  flex: 1 1 auto;
  gap: 30px;
  justify-content: flex-end;
}

.vault-grid.is-list .vault-card-meta > div {
  min-width: 88px;
}

.vault-grid.is-list .vault-card-delete {
  top: 50%;
  transform: translateY(-50%);
}

/* On narrow screens a list row can't hold everything side by side — fall back
   to the stacked card layout regardless of the toggle. */
@media (max-width: 640px) {
  .vault-grid.is-list .vault-card-link {
    align-items: stretch;
    display: block;
    padding: 16px 16px 14px;
  }

  .vault-grid.is-list .vault-card-head {
    margin-bottom: 12px;
    padding-right: 30px;
  }

  .vault-grid.is-list .vault-card-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: initial;
  }
}

.vault-onboarding {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  margin-top: 8px;
  padding: 30px;
}

.vault-onboarding h2 {
  margin-top: 0;
}

/* Invention workspace */

.workflow-title-wrap {
  align-items: center;
  display: flex;
  /* Title and save-status sit side by side (not stacked), so the title stays on
     the bar's centre-line — a status line stacked beneath it pushed the title up.
     A real flex-basis (not 0) so the editable title can never be squeezed to
     zero width by the fixed topbar controls; the bar wraps instead. */
  flex: 1 1 260px;
  gap: 12px;
  min-width: 200px;
}

.workflow-title-row {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 10px;
  min-width: 0;
}

.patent-pending-badge {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--line));
  border-radius: var(--radius-pill);
  color: var(--success);
  flex: none;
  font-size: var(--fs-meta);
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 3px 11px;
  text-transform: uppercase;
  white-space: nowrap;
}

.invention-title-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  color: var(--ink);
  flex: 1;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  min-width: 140px;
  padding: 4px 8px;
}

.invention-title-input:hover,
.invention-title-input:focus {
  background: var(--bg);
  border-color: var(--line);
  outline: none;
}

.invention-save-status {
  color: var(--muted);
  flex: none;
  font-size: var(--fs-meta);
  /* Inline at the right of the title, not stacked beneath it — appears and
     disappears horizontally, so an autosave cycle never shifts the page down.
     Reserve its width so the title input doesn't reflow when "Saving…"/"Saved"
     appears mid-edit. */
  min-width: 54px;
  white-space: nowrap;
}

.invention-status-field {
  align-items: center;
  display: flex;
  gap: 6px;
}

/* The rail-heading's 8px bottom margin is for vertical rails; here "Stage" sits
   inline to the left of the seg-picker, and that margin makes align-items:center
   push the label up off the pills' centre-line. */
.invention-status-field .rail-heading {
  margin-bottom: 0;
}

.compact-select {
  padding: 5px 8px;
  width: auto;
}

/* --- Collapsible + resizable left sidebar navigation ------------------------- */
.workflow-layout {
  align-items: flex-start;
  display: flex;
}

/* Workflow steps: horizontal bar, sticky under the (non-sticky) topbar. */
.invention-stepper {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ---- Left tools rail: model / effort / admin / vault shortcut --------------- */
.tools-sidebar {
  --sidebar-w: 208px;
  --rail-top: 46px; /* height of the sticky stepper above it */
  align-self: stretch;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - var(--rail-top));
  overflow-y: auto;
  padding: 14px 12px 22px;
  position: sticky;
  top: var(--rail-top);
  width: var(--sidebar-w);
  z-index: 20;
}

.tools-sidebar.is-collapsed {
  align-items: center;
  padding: 14px 6px 22px;
  width: 50px;
}

.sidebar-toggle {
  align-items: center;
  align-self: flex-end;
  background: none;
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-meta);
  font-weight: 650;
  gap: 6px;
  margin-bottom: 2px;
  padding: 4px 8px;
}

.sidebar-toggle:hover {
  background: var(--bg);
  color: var(--ink);
}

.sidebar-toggle-icon {
  font-size: 16px;
  line-height: 1;
}

.tools-sidebar.is-collapsed .sidebar-toggle {
  align-self: center;
}

.tools-sidebar.is-collapsed .sidebar-toggle-label {
  display: none;
}

.tools-sidebar.is-collapsed .sidebar-toggle-icon {
  transform: scaleX(-1);
}

.invention-step {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  gap: 6px;
  padding: 12px 10px;
  white-space: nowrap;
}

.invention-step:hover {
  color: var(--ink);
}

.invention-step.active {
  border-bottom-color: var(--brand);
  color: var(--brand-hover);
}

.invention-step-num {
  align-items: center;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  font-size: var(--fs-meta);
  height: 20px;
  justify-content: center;
  width: 20px;
}

.invention-step.active .invention-step-num {
  background: var(--brand);
  color: var(--brand-ink);
}

.invention-step-check {
  color: var(--success);
  flex: none;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.invention-step-check.is-done {
  opacity: 1;
}

/* Phones: the eleven steps are one row that scrolls sideways (snapping to steps, fading at the
   edges to show there is more), instead of wrapping into a centred block half a screen tall.
   invention.js keeps the open step scrolled into view. */
@media (max-width: 720px) {
  .invention-stepper {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .invention-stepper::-webkit-scrollbar {
    display: none;
  }

  .invention-step {
    flex: none;
    padding: 12px 8px;
    scroll-snap-align: center;
  }
}

/* ---- Tools-rail sections ---------------------------------------------------- */
.tools-home {
  align-items: center;
  border-radius: var(--radius-ctl);
  color: var(--ink);
  display: flex;
  font-weight: 650;
  gap: 8px;
  padding: 8px 10px;
  text-decoration: none;
}

.tools-home:hover {
  background: var(--bg);
  color: var(--brand-hover);
}

.tools-home-icon {
  font-size: 16px;
  line-height: 1;
}

.tools-section {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.tools-section-heading {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tools-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tools-field-label {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--fs-meta);
  font-weight: 600;
  gap: 5px;
}

.tools-link {
  border-radius: var(--radius-ctl);
  color: var(--muted);
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 6px 10px;
  text-decoration: none;
}

.tools-link:hover {
  background: var(--bg);
  color: var(--ink);
}

/* ---- Workspace "Filing" panel (tools sidebar) -------------------------------- */
.workspace-panel .ws-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workspace-panel .ws-block + .ws-block {
  margin-top: 4px;
}

.ws-block-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ws-block-label {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 600;
}

.ws-progress-count {
  color: var(--ink);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ws-progress-bar {
  background: var(--line);
  border-radius: var(--radius-pill);
  height: 5px;
  overflow: hidden;
}

.ws-progress-fill {
  background: var(--brand);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--dur-micro) var(--ease-standard);
  width: 0;
}

.ws-resume {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 700;
  padding: 2px 0;
}

.ws-resume:hover {
  text-decoration: none;
  opacity: 0.82;
}

.ws-deadline {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-meta);
  gap: 5px;
}

.ws-deadline-days {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ws-deadline-days.is-urgent {
  color: var(--danger);
}

.ws-muted {
  color: var(--muted);
}

.ws-download {
  border-radius: var(--radius-ctl);
  color: var(--ink);
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 6px 10px;
  text-decoration: none;
}

.ws-download:hover {
  background: var(--bg);
}

.ws-download.is-locked {
  color: var(--muted);
}

/* ---- Tier sliders (model / effort) ------------------------------------------ */
/* flex-start keeps the label text + optional help-dot packed together (the Effort
   row has a help-dot as a third child, which space-between stranded mid-row);
   margin-left:auto still pushes the tier readout to the right edge in both rows. */
.tier-field .tools-field-label {
  justify-content: flex-start;
}
.tier-field .tools-field-label .tier-current {
  margin-left: auto;
}

.tier-current {
  color: var(--brand-hover);
  font-size: var(--fs-base);
  font-weight: 700;
}

.tier-slider {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  height: 26px;
  margin: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* The native track is invisible — the pixel-matrix layer behind is the visual. */
.tier-slider::-webkit-slider-runnable-track {
  background: transparent;
  border-radius: 8px;
  height: 26px;
}

.tier-slider::-moz-range-track {
  background: transparent;
  border-radius: 8px;
  height: 26px;
}

/* Thumb: a light rounded pill riding the matrix. */
.tier-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(23, 43, 34, 0.28);
  height: 22px;
  margin-top: 2px;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  width: 16px;
}

.tier-slider::-moz-range-thumb {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(23, 43, 34, 0.28);
  height: 22px;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  width: 16px;
}

.tier-slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.tier-slider:hover::-moz-range-thumb { transform: scale(1.08); }

.tier-slider:focus-visible {
  outline: none;
}

.tier-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

.tier-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* ---- Dot-matrix meter track --------------------------------------------------
   A grid of tiny squares (carved by an intersecting mask) that fills to the
   current value: a dim grid across the whole track, bright brand cells from the
   left up to --tier-fill, and a shimmer sweep on the premium tiers.
   --tier-fill is set on .tier-field by the slider JS; the input sits on top with a
   transparent track so the matrix shows through. */
.tier-track {
  --cell: 7px;        /* cell pitch */
  --cell-lit: 5px;    /* lit square size (2px gap) */
  --matrix-grad: linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 60%, #000 20%) 0%,
    var(--brand) 40%,
    var(--brand-hover) 72%,
    color-mix(in srgb, var(--brand-hover) 55%, #fff 45%) 100%);
  position: relative;
  height: 26px;
  margin-top: 8px;
}

.tier-track .tier-slider {
  position: absolute;
  inset: 0;
  width: 100%;
}

.tier-matrix {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.tier-matrix::before,
.tier-matrix::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  /* Intersect two 1-D gratings → a grid of lit squares that pixelates the fill. */
  -webkit-mask:
    repeating-linear-gradient(90deg, #000 0 var(--cell-lit), transparent var(--cell-lit) var(--cell)),
    repeating-linear-gradient(180deg, #000 0 var(--cell-lit), transparent var(--cell-lit) var(--cell));
  -webkit-mask-composite: source-in;
  mask:
    repeating-linear-gradient(90deg, #000 0 var(--cell-lit), transparent var(--cell-lit) var(--cell)),
    repeating-linear-gradient(180deg, #000 0 var(--cell-lit), transparent var(--cell-lit) var(--cell));
  mask-composite: intersect;
}

/* Dim base grid across the whole track (the "unspent" cells). */
.tier-matrix::before {
  background: var(--matrix-grad);
  opacity: 0.22;
}

/* Bright fill from 0 → the selected value, plus a highlight-sweep layer that
   only animates on premium tiers (it sits off-screen at rest otherwise). */
.tier-matrix::after {
  width: var(--tier-fill, 0%);
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
    var(--matrix-grad);
  background-size: 45% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0, 0 0;
  transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tier-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Premium tiers: the lit matrix cells shimmer — a highlight band sweeping
   left→right across the filled squares. */
.tier-field.is-premium .tier-matrix::after {
  animation: matrix-sweep 2.2s linear infinite;
}

@keyframes matrix-sweep {
  0% { background-position: -60% 0, 0 0; }
  100% { background-position: 160% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tier-field.is-premium .tier-matrix::after { animation: none; }
}

/* Premium tiers (Ultra / Max): the value label shimmers — a slow gradient sweep
   across the text, Claude-style — and the thumb picks up a soft glow. */
@keyframes tier-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tier-field.is-premium .tier-current {
  animation: tier-shimmer 2.4s linear infinite;
  background: linear-gradient(100deg,
    var(--brand-hover) 38%,
    color-mix(in srgb, var(--brand) 55%, #fff 45%) 48%,
    color-mix(in srgb, var(--brand) 25%, #fff 75%) 52%,
    color-mix(in srgb, var(--brand) 55%, #fff 45%) 56%,
    var(--brand-hover) 66%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tier-field.is-premium .tier-slider::-webkit-slider-thumb {
  border-color: var(--brand-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--brand) 55%, transparent);
}

.tier-field.is-premium .tier-slider::-moz-range-thumb {
  border-color: var(--brand-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--brand) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .tier-field.is-premium .tier-current {
    animation: none;
    background-position: 50% 0;
  }
}

/* Collapsed: thin icon rail — hide selects, headings, labels; keep the home icon. */
.tools-sidebar.is-collapsed .tools-section,
.tools-sidebar.is-collapsed .tools-sidebar-label {
  display: none;
}

.tools-sidebar.is-collapsed .tools-home {
  justify-content: center;
  padding: 8px 4px;
}

.sidebar-resize {
  align-self: stretch;
  cursor: col-resize;
  flex: none;
  position: sticky;
  top: 46px;
  touch-action: none;
  width: 7px;
  z-index: 20;
}

.sidebar-resize::after {
  background: var(--line);
  content: "";
  display: block;
  height: calc(100vh - 46px);
  margin: 0 auto;
  width: 1px;
}

.sidebar-resize:hover::after,
body.resizing-panes .sidebar-resize::after {
  background: var(--brand);
  width: 2px;
}

.tools-sidebar.is-collapsed + .sidebar-resize {
  display: none;
}

/* No max-width of its own: the workspace takes the app's page width from .workflow-main
   (--app-max-width), like every other page. It used to cap itself at 880px, which left prior-art
   results and the discovery board in a narrow column on a wide screen. Running text keeps its own
   reading width (.invention-panel-intro p). */
.invention-main {
  flex: 1;
  margin: 0 auto;
  min-width: 0;
}

/* A rail field for one step only. .tools-field sets display, which would otherwise beat [hidden]. */
[data-rail-step][hidden] {
  display: none;
}

.invention-panel {
  display: none;
}

.invention-panel.active {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Fill the height below the topbar + sticky stepper so the Next footer lands in the
     same place on every step — short steps push it to the bottom rather than leaving it
     mid-content at a different height each time. Taller steps just scroll past it. */
  min-height: calc(100vh - 150px);
}

.invention-panel-intro h2 {
  font-size: 21px;
  margin: 0 0 6px;
}

.invention-panel-intro p {
  color: var(--muted);
  font-size: var(--fs-reading);
  line-height: 1.5;
  margin: 0;
  max-width: 640px;
}

/* The step's "Next" button. Pinned to the bottom of the viewport as a footer bar so it
   sits in one place per step instead of drifting down with the content as it loads or
   grows (the panels vary a lot in height). Right-aligned = consistent horizontally; an
   opaque, edge-bleeding bar with a top border reads as a footer and covers content that
   scrolls behind it. On phones it reflows to normal flow (see the media query). */
.invention-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;   /* push to the bottom of the filled panel */
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-inline: calc(-1 * var(--app-gutter));
  padding: 12px var(--app-gutter);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .invention-panel.active {
    min-height: 0;   /* no fill-to-bottom on phones — the footer reflows with content */
  }
  .invention-panel-actions {
    position: static;
    margin: 0;
    padding: 6px 0 0;
    background: none;
    border-top: 0;
  }
}

/* Disclosure step */

.disclosure-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.disclosure-field {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.disclosure-label {
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: 700;
}

.disclosure-field small {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.disclosure-field textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
}

.disclosure-field textarea:focus {
  border-color: var(--brand);
  outline: none;
}

/* Evidence step */

/* Evidence: a drop zone → auto-labeled cards with an inline label picker. */
/* Evidence step progress toolbar: a live count of attached / still-processing
   files, with a spinner that spins while an upload is in flight or any file has
   not reached "ready". */
.evidence-toolbar {
  justify-content: space-between;
  margin-bottom: 14px;
}

.evidence-progress {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: var(--fs-sm);
  font-weight: 600;
  gap: 6px;
}

/* Spinner is out of flow when idle (display:none), so the count sits flush left;
   it appears and spins only while busy. */
.evidence-progress .patent-check-spinner {
  display: none;
}

.evidence-progress.is-busy .patent-check-spinner {
  animation: skim-spin 0.7s linear infinite;
  display: inline-block;
}

.evidence-dropzone {
  align-items: center;
  background: var(--bg-alt);
  border: 1.5px dashed var(--brand-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 34px 24px;
  text-align: center;
  transition: background var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}

.evidence-dropzone:hover,
.evidence-dropzone:focus-visible {
  background: var(--brand-tint);
  border-color: var(--brand);
  outline: none;
}

.evidence-dropzone.is-dragover {
  background: var(--brand-tint);
  border-color: var(--brand);
  border-style: solid;
}

.evidence-dropzone.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.evidence-dropzone-icon {
  color: var(--brand);
  height: 30px;
  width: 30px;
}

.evidence-dropzone-title {
  color: var(--text-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 4px 0 0;
}

.evidence-dropzone-hint {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}

.evidence-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.evidence-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}

.evidence-card-main {
  align-items: center;
  display: flex;
  gap: 12px;
}

.evidence-card-body {
  flex: 1;
  min-width: 0;
}

.evidence-role-pill {
  align-items: center;
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  color: var(--brand-hover);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 700;
  gap: 4px;
  padding: 4px 10px;
  white-space: nowrap;
}

.evidence-role-pill:hover {
  border-color: var(--brand);
}

.evidence-title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-meta {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin: 2px 0 0;
}

/* Text a reader could not see was left out of this file before any AI step (pdf_hidden_text).
   Warning colour only when that text addressed an AI; otherwise it is a plain note. */
.evidence-hidden-note {
  margin: 6px 0 0;
  font-size: var(--fs-meta);
  color: var(--muted);
}

.evidence-hidden-note.is-attack {
  padding: 4px 8px;
  border-radius: var(--radius-ctl);
  background: var(--warning-tint);
  color: var(--warning);
}

.evidence-card-actions {
  display: flex;
  flex: none;
  gap: 6px;
}

.evidence-role-chips {
  border-top: 1px solid var(--line-faint);
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
}

.evidence-card.is-editing .evidence-role-chips {
  display: flex;
}

.evidence-role-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 5px 12px;
}

.evidence-role-chip:hover {
  border-color: var(--line-strong);
  color: var(--text-heading);
}

.evidence-role-chip.is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* ---- Evidence image viewer (reader surface for image documents) ------------ */
.evidence-image-surface {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: 24px;
}

.evidence-image-figure {
  margin: 0;
  max-width: 100%;
}

.evidence-image {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  display: block;
  max-height: 78vh;
  max-width: 100%;
  object-fit: contain;
}

.evidence-image-caption {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--fs-sm);
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
}

/* ---- Segmented picker — the app's dropdown replacement --------------------- */
.seg-picker {
  align-items: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-ctl);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  vertical-align: middle;
}

.seg-picker.seg-wrap {
  flex-wrap: wrap;
}

.seg-option {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 6px 12px;
  white-space: nowrap;
}

.seg-option:hover:not(:disabled):not([aria-checked="true"]) {
  color: var(--text-heading);
}

.seg-option[aria-checked="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-heading);
}

.seg-option:disabled {
  color: var(--faint);
  cursor: not-allowed;
}

.seg-option:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.seg-compact .seg-option {
  font-size: var(--fs-sm);
  padding: 4px 9px;
}

/* Prior-art step */

.priorart-query-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 6px;
  padding: 12px 16px;
}

.priorart-query-text {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.priorart-query-text.is-empty {
  color: var(--muted);
  font-style: italic;
}

.patent-history-block {
  display: grid;
  gap: 8px;
}

/* Filing step */

.filing-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
}

.filing-progress-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.filing-progress-head h3 {
  font-size: var(--fs-heading);
  margin: 0;
}

.filing-progress-count {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.filing-progress-track {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .filing-progress-track {
    grid-template-columns: 1fr;
  }
}

.filing-progress-step {
  display: flex;
}

.filing-progress-btn {
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  gap: 9px;
  padding: 10px 11px;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  width: 100%;
}

div.filing-progress-btn {
  cursor: default;
}

button.filing-progress-btn:hover {
  border-color: var(--brand);
}

.filing-progress-marker {
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  flex: none;
  font-size: 12px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.filing-progress-step.is-done .filing-progress-btn {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  color: var(--ink);
}

.filing-progress-step.is-done .filing-progress-marker {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.filing-progress-text {
  display: grid;
  gap: 2px;
}

.filing-progress-label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.filing-progress-sub {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.filing-progress-hint {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* Applicant & filing details — pre-fills the official USPTO forms */
.applicant-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-bottom: 14px;
  padding: 4px 16px;
}

.applicant-summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
}

.applicant-summary-title {
  font-size: var(--fs-heading);
  font-weight: 600;
}

.applicant-optional,
.applicant-summary-hint {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.applicant-body {
  display: grid;
  gap: 18px;
  padding: 6px 0 16px;
}

.applicant-block {
  display: grid;
  gap: 10px;
}

.applicant-block h4 {
  align-items: center;
  display: flex;
  font-size: var(--fs-sm);
  gap: 10px;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.inventor-rows {
  display: grid;
  gap: 8px;
}

.inventor-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr 1fr 0.8fr auto;
}

.inventor-remove {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  height: 32px;
  line-height: 1;
  width: 32px;
}

.inventor-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.applicant-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.applicant-grid label,
.applicant-docket {
  color: var(--muted);
  display: grid;
  font-size: var(--fs-sm);
  gap: 4px;
}

.applicant-grid .applicant-wide {
  grid-column: 1 / -1;
}

.entity-questions {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entity-q {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  padding: 10px 12px;
}

.entity-q-text {
  font-size: var(--fs-sm);
}

.entity-q-toggle {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}

.entity-q-toggle label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-sm);
  gap: 4px;
}

.applicant-status-pill {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  text-transform: none;
}

.applicant-status-pill[data-status="micro"] {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.applicant-status-pill[data-status="small"] {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand-hover);
}

.applicant-status-pill[data-status="large"] {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--ink);
}

.applicant-export-toggle {
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  display: flex;
  font-size: var(--fs-sm);
  gap: 10px;
  line-height: 1.45;
  padding: 12px 14px;
}

.applicant-export-toggle input {
  flex: none;
  margin-top: 2px;
}

.applicant-save-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 680px) {
  .inventor-row { grid-template-columns: 1fr 1fr; }
  .inventor-row .inventor-remove { grid-column: 2; justify-self: end; }
  .applicant-grid { grid-template-columns: 1fr; }
  .entity-q { grid-template-columns: 1fr; }
}

.filing-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.filing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
}

.filing-card h3 {
  font-size: var(--fs-heading);
  margin: 0;
}

.filing-download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invention-panel-intro .filing-guide-link {
  margin-top: 12px;
}

.rail-optional {
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
}

.addon-note {
  background: color-mix(in srgb, var(--success) 9%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--success) 55%, var(--line));
  border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0;
  color: var(--success);
  font-size: var(--fs-sm);
  margin-top: 10px;
  padding: 7px 12px;
}

/* Contextual help */
.help-dot {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 17px;
  justify-content: center;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  width: 17px;
}

.help-dot:hover {
  border-color: var(--brand);
  color: var(--brand-hover);
}

.help-popover {
  background: #1f2937;
  border-radius: var(--radius-ctl);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.32);
  color: #f8fafc;
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 320px;
  padding: 10px 13px;
  position: absolute;
  z-index: 1100;
}

.filing-checklist {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.filing-check-item {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  font-size: var(--fs-sm);
  gap: 8px;
}

.filing-check-item.is-done {
  color: var(--ink);
}

.filing-check-mark {
  color: var(--muted);
  flex: none;
  font-weight: 800;
}

.filing-check-item.is-done .filing-check-mark {
  color: var(--success);
}

.filing-countdown {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.filing-countdown-days {
  color: var(--brand-hover);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.filing-countdown.is-urgent .filing-countdown-days {
  color: var(--danger);
}
.filing-countdown.is-warning .filing-countdown-days {
  color: var(--warning);
}

.filing-countdown-label {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.filing-deadline-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.filing-date-form {
  display: grid;
  gap: 8px;
}

.filing-date-actions {
  display: flex;
  gap: 8px;
}

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

/* On narrow screens the tools rail folds into a full-width, non-sticky strip BELOW the step's
   content: the work comes first, and the progress bar under the stepper already summarises the
   rail's Filing panel. Its "All inventions" link is dropped here; the top bar has one. */
@media (max-width: 900px) {
  .workflow-layout {
    flex-direction: column;
  }

  .tools-sidebar,
  .tools-sidebar.is-collapsed {
    align-items: stretch;
    border-right: 0;
    border-top: 1px solid var(--line);
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 16px;
    max-height: none;
    overflow: visible;
    padding: 10px 14px;
    position: static;
    width: auto;
  }

  .tools-sidebar .sidebar-toggle {
    display: none;
  }

  /* The collapse toggle is hidden here, so always show the rail's content. */
  .tools-sidebar.is-collapsed .tools-section {
    display: flex;
  }

  .tools-sidebar.is-collapsed .tools-sidebar-label {
    display: revert;
  }

  .tools-sidebar .tools-section,
  .tools-sidebar.is-collapsed .tools-section {
    border-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 0;
  }

  .tools-sidebar .tools-section-heading,
  .tools-sidebar.is-collapsed .tools-section-heading {
    display: none;
  }

  .sidebar-resize {
    display: none;
  }

  .tools-sidebar .tools-home {
    display: none;
  }
}

/* --- Invention workflow panels (structure / interview / embodiments / draft /
   review / figures) ----------------------------------------------------------- */

.panel-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The global .primary-button is width:100% for the reader app's narrow rails.
   In the workflow panels that turns every action into a giant
   full-width bar. Here the buttons sit in flex toolbars/footers, so they should
   size to their label instead. */
.invention-panel .primary-button {
  width: auto;
}

.panel-toolbar .primary-button {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  position: relative;
}

/* Take the spinner out of the flex flow so justify-content centers the label on
   its own — a reserved in-flow slot on the left pushes the visible text right of
   center. Absolute positioning also means the button doesn't grow ~19px and shove
   .panel-hint/.panel-status right during a multi-second generation. It overlays at
   the left edge only while checking; top uses a fixed offset (not transform) so it
   doesn't fight the skim-spin rotate. */
.panel-toolbar .primary-button .patent-check-spinner {
  position: absolute;
  left: 12px;
  top: calc(50% - 6.5px);
  visibility: hidden;
}

.panel-toolbar .primary-button.is-checking .patent-check-spinner {
  animation: skim-spin 0.7s linear infinite;
  visibility: visible;
}

.panel-hint {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* Bulk actions above the element and findings lists (confirm all; resolve or dismiss all). */
.bulk-action-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 12px;
}

/* display: flex above beats the UA [hidden] rule. */
.bulk-action-bar[hidden] {
  display: none;
}

.panel-status {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.panel-status.is-error {
  color: var(--danger);
  font-weight: 600;
}

.panel-progress {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.panel-progress progress {
  accent-color: var(--brand);
  height: 8px;
  width: 140px;
}

.panel-progress span {
  color: var(--muted);
  font-size: var(--fs-meta);
}

/* Entity review rows */

.entity-list,
.question-list,
.embodiment-list,
.section-list,
.finding-list,
.figure-list {
  display: grid;
  gap: 10px;
}

.entity-group {
  display: grid;
  gap: 6px;
}

.entity-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
}

.entity-main {
  align-items: baseline;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 220px;
}

.entity-desc {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.entity-qualification {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-radius: var(--radius-ctl);
  color: var(--warning);
  flex-basis: 100%;
  font-size: var(--fs-sm);
  padding: 4px 8px;
}

.entity-actions {
  align-items: center;
  display: flex;
  flex: none;
  gap: 6px;
}

.entity-pill {
  border-radius: var(--radius-pill);
  flex: none;
  font-size: var(--fs-meta);
  font-weight: 700;
  padding: 2px 9px;
  white-space: nowrap;
}

.entity-pill-ok {
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--success);
}

.entity-pill-warn {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--warning);
}

.entity-pill-bad {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.entity-pill-muted {
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  color: var(--muted);
}

.entity-add-form {
  align-items: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.entity-add-form .title-input {
  flex: 1;
  height: 40px;
  margin: 0;
  min-width: 140px;
}

/* Match the input height so the name/description inputs and "Add element" button
   sit at one height (the stray .title-input margin otherwise inflated the row). */
.entity-add-form .secondary-button {
  height: 40px;
}

/* The element-type picker is a wrapping pill cloud — give it the full row. */
.entity-add-form .seg-picker {
  flex-basis: 100%;
}

/* Interview + embodiment cards */

.question-card,
.embodiment-card,
.finding-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.question-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.question-reason {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.embodiment-text {
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}

.finding-row.is-closed {
  opacity: 0.65;
}

/* Draft section cards */

.section-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.section-card.is-stale {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
}

/* Flash a section when a review finding jumps to it. */
.section-card.is-flash {
  animation: section-flash 1.6s ease;
}

@keyframes section-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); }
}

.section-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-buttons {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.section-body {
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.section-body p {
  margin: 0 0 10px;
}

.section-body p:last-child,
.section-body ul:last-child,
.section-body ol:last-child {
  margin-bottom: 0;
}

/* ---- Per-section provenance trace (Sources) ------------------------------------ */
.section-sources {
  border-top: 1px solid var(--line-faint);
  margin-top: 12px;
  padding-top: 8px;
}

.section-sources summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  user-select: none;
}

.section-sources summary:hover {
  color: var(--text-body);
}

.section-sources-body {
  display: grid;
  gap: 8px;
  padding: 8px 0 2px;
}

.section-sources-engine {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.section-sources-label {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-sources-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-pill {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  cursor: default;
  font-size: var(--fs-meta);
  font-weight: 650;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Origin tint: interview-sourced elements read differently from extraction/manual. */
.source-pill.source-origin-interview {
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand);
}

.source-pill.source-origin-manual {
  background: var(--steel-tint, var(--surface-sunken));
  color: var(--steel, var(--text-body));
}

.source-pill.source-origin-embodiment,
.source-pill.source-origin-figure {
  font-style: italic;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-pill.source-origin-evidence {
  background: var(--success-tint);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
}

/* ---- Build-history timeline (File & handoff) ------------------------------------ */
.filing-card-wide {
  grid-column: 1 / -1;
}

.build-history {
  max-height: 340px;
  overflow-y: auto;
}

.history-timeline {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-item {
  align-items: baseline;
  border-left: 2px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-left: 5px;
  padding: 5px 0 5px 14px;
  position: relative;
}

.history-dot {
  background: var(--muted);
  border-radius: 50%;
  height: 8px;
  left: -5px;
  position: absolute;
  top: 11px;
  width: 8px;
}

.history-version .history-dot {
  background: var(--brand);
}

.history-when {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}

.history-label {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 650;
}

.history-version .history-label {
  color: var(--brand-hover);
}

.history-detail {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.section-body .section-subhead {
  font-size: var(--fs-sm);
  font-weight: 750;
  letter-spacing: 0.02em;
  margin: 14px 0 6px;
  text-transform: uppercase;
}

.section-body .section-subhead:first-child {
  margin-top: 0;
}

.section-body ul,
.section-body ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.section-body li {
  margin: 2px 0;
}

.section-editor {
  display: grid;
  gap: 8px;
}

.section-editor[hidden] {
  display: none;
}

.section-editor textarea {
  font-family: var(--font-sans);
  line-height: 1.5;
  resize: vertical;
}

/* Figures */

.figure-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.figure-title-input {
  flex: 1;
  min-width: 160px;
}

.figure-editor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
  .figure-editor-grid {
    grid-template-columns: 1fr;
  }
}

.figure-editor-grid textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  resize: vertical;
}

.figure-preview {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: flex;
  justify-content: center;
  min-height: 160px;
  overflow: auto;
  padding: 8px;
}

.figure-preview svg {
  height: auto;
  max-width: 100%;
}

/* Generated-drawing figure: an image, not an editable Mermaid diagram. */
.figure-drawing-preview {
  align-items: center;
  background: #ffffff;  /* patent drawings are black-on-white; keep the surface white in both themes */
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  display: flex;
  justify-content: center;
  margin: 10px 0;
  padding: 12px;
}

.figure-drawing-preview img {
  height: auto;
  max-height: 460px;
  max-width: 100%;
  object-fit: contain;
}

a.primary-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: auto;
}

/* ============================================================
   FEEDBACK PASS — styled selects · funnel mark · usage meter
   ============================================================ */

/* ---- Styled selects -------------------------------------------------
   Native <select> renders with OS chrome (ugly), and its option popup
   ignores the app theme. Give every select the same box + a custom
   chevron, and color-scheme so the native popup follows light/dark. */
select.title-input,
select.org-select,
.probe-controls select,
.app-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface);
  color: var(--text-body);
  color-scheme: light dark;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  padding: 7px 32px 7px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%236f6f7b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.title-input,
  :root:not([data-theme="light"]) select.org-select,
  :root:not([data-theme="light"]) .probe-controls select,
  :root:not([data-theme="light"]) .app-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2387879a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
select.title-input:hover,
select.org-select:hover,
.probe-controls select:hover,
.app-select:hover { border-color: var(--line-strong); }
select.title-input:focus-visible,
select.org-select:focus-visible,
.probe-controls select:focus-visible,
.app-select:focus-visible {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
  outline: none;
}
select.title-input option,
select.org-select option,
.app-select option {
  background: var(--surface-raised);
  color: var(--text-body);
}

/* ---- Preflight checklist: never stick on the light background ----
   A `background` transition on a var(--surface)-driven fill freezes on
   the old (light) value when the OS theme flips live, leaving white-on-
   white. Track --surface instantly; run the "just checked" flash as a
   keyframe instead of a persistent background transition. */
.preflight-check {
  transition: border-color 120ms ease;
}
.preflight-check.preflight-flash {
  background: var(--surface);
  animation: preflight-flash 500ms var(--ease-standard);
}
@keyframes preflight-flash {
  0%   { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
  100% { background: var(--surface); }
}

/* ---- Funnel logo mark -----------------------------------------------
   The brand square shows the funnel glyph (masked so it takes --brand-ink
   over the accent fill — the app's signature). Templates keep their text
   fallback; we hide it and paint the mark. */
.brand-mark {
  font-size: 0;
  overflow: hidden;
}
.brand-mark::before {
  content: "";
  width: 62%;
  height: 62%;
  background-color: var(--brand-ink);
  -webkit-mask: url("brand/logo-mark.e6409373f880.svg") center / contain no-repeat;
  mask: url("brand/logo-mark.e6409373f880.svg") center / contain no-repeat;
}

/* ---- Usage meter (dot-matrix + premium shimmer) ---------------------
   A row of cells: filled = credits used. On the top tier the filled
   cells run a cascading shimmer (a bright wave travels the row,
   approximating a moving gradient — staggered, never a synchronized
   pulse), the DESIGN.md "premium tier" flourish. */
.usage-pill {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-sm);
  font-weight: 600;
  gap: 9px;
  padding: 5px 12px 5px 11px;
  transition: border-color 120ms ease, background 120ms ease;
}
.usage-pill:hover { border-color: var(--line-strong); background: var(--bg-alt); }
.usage-pill .usage-matrix { --cell: 5px; --gap: 2px; }
.usage-pill-label { font-variant-numeric: tabular-nums; }

.usage-matrix {
  --cell: 9px;
  --gap: 3px;
  display: flex;
  gap: var(--gap);
  align-items: center;
}
.usage-cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: 2px;
  background: var(--surface-sunken);
  flex: none;
}
.usage-cell.is-on { background: var(--brand); }
.usage-cell.is-warn.is-on { background: var(--warning); }
.usage-cell.is-danger.is-on { background: var(--danger); }

/* Premium shimmer: a traveling brightness wave. Each on-cell brightens in
   sequence (delay ∝ column index --i), so a gradient-like crest sweeps
   across and repeats. Frozen for reduced-motion. */
.usage-matrix.shimmer .usage-cell.is-on {
  animation: usage-shimmer 2.6s linear infinite;
  animation-delay: calc(var(--i, 0) * -90ms);
}
@keyframes usage-shimmer {
  0%, 62%, 100% { background: var(--brand); filter: none; }
  31%           { background: color-mix(in srgb, var(--brand) 45%, white);
                  filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .usage-matrix.shimmer .usage-cell.is-on { animation: none; }
}

.usage-popover {
  position: absolute;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.usage-popover[hidden] { display: none; }
.usage-popover-head { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.usage-popover-plan { color: var(--brand); font-size: var(--fs-sm); font-weight: 700; }
.usage-popover-num { color: var(--text-heading); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.usage-popover-num small { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; margin-left: 6px; }
.usage-popover-sub { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 12px; }
.usage-popover-meta { align-items: center; color: var(--text-secondary); display: flex; font-size: var(--fs-sm); gap: 12px; justify-content: space-between; margin-top: 12px; }
.usage-popover-foot { border-top: 1px solid var(--line-faint); display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; }
.usage-popover-foot a { color: var(--brand); font-size: var(--fs-sm); font-weight: 650; }
.usage-mono { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---- Provisional template picker + builder (Draft step) ---- */
.draft-template-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.draft-template-row .app-select, .draft-template-row .compact-button { height: 34px; min-height: 0; }
.draft-template-row .tools-field-label { align-items: center; color: var(--text-secondary); display: inline-flex; font-size: var(--fs-sm); font-weight: 600; gap: 4px; margin: 0; }
.template-builder { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-card); margin: 10px 0 14px; padding: 16px; }
.template-builder-head { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }
.tb-scope { align-items: center; color: var(--text-secondary); display: inline-flex; font-size: var(--fs-sm); gap: 6px; }
.tb-sections { display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 4px 0 12px; }
.tb-section { align-items: center; color: var(--text-body); cursor: pointer; display: flex; font-size: var(--fs-base); gap: 8px; }
.template-builder-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- eety-inspired: readiness gauge, Understanding, Verifier, progress strip ------ */

/* Live progress strip — always-visible under the stepper while a workflow runs. */
.run-progress-bar {
  align-items: center;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  gap: 18px;
  padding: 7px 20px;
}
.run-progress-bar.is-done { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--success) 40%, var(--line)); color: var(--success); }
.run-progress-bar.is-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--danger); }
.run-progress-item { align-items: center; display: inline-flex; gap: 8px; }
.run-progress-label { font-weight: 600; }
.run-progress-time { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-meta); }
.run-progress-fill { width: 90px; height: 6px; vertical-align: middle; accent-color: var(--accent); }
.run-progress-count { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-meta); }
.run-progress-spinner {
  animation: run-progress-spin 0.8s linear infinite;
  border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 50%;
  border-top-color: var(--brand);
  display: inline-block;
  height: 12px;
  width: 12px;
}
.run-progress-check { font-weight: 800; }
@keyframes run-progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .run-progress-spinner { animation: none; } }

/* Readiness gauge (Draft soft-gate + Understanding header). */
.draft-readiness, .understanding-readiness {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}
.readiness-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.readiness-head .patent-decision-badge { text-transform: none; }
.readiness-bar { flex: 1; min-width: 120px; height: 8px; }
.readiness-percent { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; }
.readiness-checks { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.readiness-check { align-items: baseline; color: var(--text-body); display: flex; flex-wrap: wrap; font-size: var(--fs-sm); gap: 8px; }
.readiness-check-mark { font-weight: 800; width: 14px; }
.readiness-check.is-ok .readiness-check-mark { color: var(--success); }
.readiness-check.is-missing .readiness-check-mark { color: var(--muted); }
.readiness-check.is-missing .readiness-check-label { color: var(--muted); }
.readiness-check-hint { color: var(--muted); font-size: var(--fs-meta); }

/* Understanding read-view. */
.understanding-meta { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0; }
.understanding-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.understanding-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 8px; align-content: start; padding: 14px 16px; }
.understanding-section.is-empty { background: var(--bg-alt); }
.understanding-section.understanding-questions-block { grid-column: 1 / -1; }
.understanding-heading { color: var(--text-heading); font-size: var(--fs-heading); font-weight: 700; margin: 0; }
.understanding-prose { color: var(--text-body); font-size: var(--fs-reading); line-height: 1.55; margin: 0; }
.understanding-list { display: grid; gap: 8px; margin: 0; padding-left: 0; list-style: none; }
ol.understanding-list { counter-reset: uitem; }
ol.understanding-list .understanding-item { counter-increment: uitem; }
ol.understanding-list .understanding-item::before { color: var(--muted); content: counter(uitem) "."; font-family: var(--font-mono); font-size: var(--fs-meta); }
.understanding-item { align-items: baseline; color: var(--text-body); display: flex; flex-wrap: wrap; font-size: var(--fs-sm); gap: 6px 8px; }
.understanding-item-name { font-weight: 600; }
.understanding-item-desc { color: var(--muted); flex-basis: 100%; font-size: var(--fs-meta); }
.understanding-questions { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.understanding-question { align-items: baseline; color: var(--text-body); display: flex; flex-wrap: wrap; font-size: var(--fs-sm); gap: 8px; }

/* Reference-numeral chip, shared by Understanding + Verifier. */
.numeral-pill { background: var(--brand-tint-strong); border-radius: var(--radius-pill); color: var(--brand-ink); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; padding: 1px 7px; }

/* Verifier. */
.verifier-summary { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.verifier-summary .patent-decision-badge { text-transform: none; }
.finding-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.finding-detail { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin: 4px 0 8px; }
.verifier-table { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; }
.verifier-table th { color: var(--muted); font-size: var(--fs-meta); font-weight: 650; padding: 6px 10px; text-align: left; text-transform: uppercase; }
.verifier-table td { border-top: 1px solid var(--line); padding: 7px 10px; vertical-align: middle; }
.verifier-row.status-missing_spec td, .verifier-row.status-stray td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.verifier-row.status-missing_figure td { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.muted-cell { color: var(--muted); }
.verifier-claims { display: grid; gap: 8px; }
.verifier-claim { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.verifier-claim.has-gap { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.verifier-claim-num { color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 700; margin-right: 4px; text-transform: uppercase; }

/* ---- Disclosure-confidence gauge (Phase 1: confidence-driven interview loop) ------ */
/* A completeness measure, not a patentability prediction. Bands: low=amber, building=brand, strong=success. */
.confidence-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 12px; padding: 14px 16px; }
.confidence-panel:empty { display: none; }
.confidence-title { align-items: center; color: var(--text-heading); display: flex; font-size: var(--fs-heading); font-weight: 700; gap: 4px; }
.confidence-head { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; }
.confidence-score-wrap { display: grid; gap: 2px; }
.confidence-score { font-family: var(--font-mono); font-size: 34px; font-weight: 800; line-height: 1; }
.confidence-score small { font-size: 18px; font-weight: 700; }
.confidence-label { font-size: var(--fs-sm); font-weight: 650; }
.confidence-score-wrap[data-band="low"] { color: var(--warning); }
.confidence-score-wrap[data-band="building"] { color: var(--brand); }
.confidence-score-wrap[data-band="strong"] { color: var(--success); }
.confidence-meter { display: grid; flex: 1; gap: 4px; min-width: 170px; }
.confidence-track { background: color-mix(in srgb, var(--muted) 18%, transparent); border-radius: var(--radius-pill); height: 10px; overflow: visible; position: relative; }
.confidence-track-fill { border-radius: var(--radius-pill); display: block; height: 100%; transition: width 0.4s ease; }
.confidence-track-fill[data-band="low"] { background: var(--warning); }
.confidence-track-fill[data-band="building"] { background: var(--brand); }
.confidence-track-fill[data-band="strong"] { background: var(--success); }
.confidence-target { background: var(--text-heading); border-radius: 2px; height: 16px; position: absolute; top: -3px; transform: translateX(-50%); width: 2px; }
.confidence-target-note { color: var(--muted); font-size: var(--fs-meta); justify-self: end; }
.confidence-dims { display: grid; gap: 6px; }
.confidence-dim { align-items: center; display: grid; gap: 10px; grid-template-columns: 148px 1fr 34px; }
.confidence-dim-label { color: var(--text-secondary); font-size: var(--fs-sm); }
.confidence-dim-bar { height: 6px; }
.confidence-dim-val { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-meta); text-align: right; }
.confidence-gaps { color: var(--text-body); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.confidence-gaps-label { color: var(--muted); font-weight: 650; }
.confidence-gaps.is-clear { color: var(--success); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .confidence-track-fill { transition: none; } }

/* ---- Scope check card (Phase 4: multiple-invention advisory — insight, not warning) ---- */
.scope-card { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border: 1px solid var(--brand-border); border-radius: var(--radius-card); display: grid; gap: 12px; padding: 16px 18px; }
.scope-card-head { align-items: center; display: flex; gap: 12px; }
.scope-ico { align-items: center; background: var(--brand-tint); border-radius: var(--radius-ctl); color: var(--brand); display: inline-flex; flex: none; height: 34px; justify-content: center; width: 34px; }
.scope-ico svg { height: 18px; width: 18px; }
.scope-title { color: var(--text-heading); font-size: var(--fs-heading); font-weight: 700; margin: 0; }
.scope-obs { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 0; }
.scope-groups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.scope-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); display: grid; gap: 6px; padding: 12px 14px; align-content: start; }
.scope-group-head { color: var(--text-heading); font-size: var(--fs-sm); font-weight: 700; }
.scope-group-row { color: var(--text-body); display: grid; font-size: var(--fs-sm); gap: 2px; }
.scope-group-k { color: var(--muted); font-size: var(--fs-meta); font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; }
.scope-shared { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-ctl); display: grid; font-size: var(--fs-sm); gap: 2px; padding: 10px 14px; }
.scope-why { color: var(--text-body); font-size: var(--fs-sm); }
.scope-why summary { color: var(--brand); cursor: pointer; font-weight: 600; }
.scope-why p { color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.scope-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.scope-note { color: var(--muted); font-size: var(--fs-sm); }
.scope-note.is-error { color: var(--danger); }
.scope-disclaimer { color: var(--muted); font-size: var(--fs-meta); font-style: italic; margin: 0; }

/* ---- Domain steer card (Phase 5: recommend an attorney for hard domains) ---- */
.domain-card { align-items: start; background: color-mix(in srgb, var(--warning) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: var(--radius-card); display: flex; gap: 12px; padding: 16px 18px; }
.domain-ico { align-items: center; background: color-mix(in srgb, var(--warning) 20%, transparent); border-radius: var(--radius-ctl); color: var(--warning); display: inline-flex; flex: none; height: 34px; justify-content: center; width: 34px; }
.domain-ico svg { height: 18px; width: 18px; }
.domain-body { display: grid; gap: 4px; flex: 1; }
.domain-title { align-items: center; color: var(--text-heading); display: flex; flex-wrap: wrap; font-size: var(--fs-heading); font-weight: 700; gap: 8px; margin: 0; }
.domain-chip { background: color-mix(in srgb, var(--warning) 20%, transparent); border-radius: var(--radius-pill); color: var(--warning); font-size: var(--fs-badge); font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; text-transform: uppercase; }
.domain-reason { color: var(--text-body); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.domain-connect { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 0; }
.domain-dismiss { flex: none; }

/* ---- Two equal handoff paths (Phase 2: file yourself vs hand to an attorney) ---- */
.handoff-paths { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 18px; }
.handoff-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); display: grid; gap: 10px; align-content: start; padding: 20px 22px; }
.handoff-tag { background: var(--brand-tint); border-radius: var(--radius-pill); color: var(--brand); font-size: var(--fs-badge); font-weight: 700; justify-self: start; letter-spacing: 0.05em; padding: 3px 11px; text-transform: uppercase; }
.handoff-tag.is-attorney { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.handoff-card h3 { font-size: var(--fs-lg); margin: 2px 0 0; }
.handoff-connect { align-items: center; border-top: 1px solid var(--line-faint); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding-top: 12px; }
.handoff-inquiries { display: grid; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.handoff-inquiries li { align-items: baseline; display: flex; flex-wrap: wrap; font-size: var(--fs-sm); gap: 4px 10px; justify-content: space-between; }
.handoff-inquiries li span { color: var(--muted); }

/* Org chip in the topbar. Shared: used by the vault and the Disclosure Desk, so it lives here
   rather than in one page's <style> block — where the Desk inherited the browser's default blue
   underlined link because the rule was never in scope. */
.org-strip-link { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); display: inline-flex; font-size: var(--fs-meta); font-weight: 650; gap: 6px; max-width: 220px; overflow: hidden; padding: 5px 11px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.org-strip-link:hover { border-color: var(--brand); color: var(--ink); }
.org-strip-link:focus-visible { border-color: var(--focus-border); box-shadow: var(--focus-ring); outline: none; }

/* ---- Discovery board -------------------------------------------------------------------------
   Importance is carried by colour AND words: a row's stripe and its selected option share a colour,
   and the option always reads Needed / Optional / Not sure, so nobody has to read colour alone.
   Suggestions are dashed until kept; a picked wording turns green. */
.discovery-board { display: grid; gap: 12px; margin-top: 4px; }
.board-coverage { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.board-tile { background: var(--surface-sunken); border-radius: var(--radius-ctl); display: grid; gap: 2px; padding: 9px 12px; }
.board-tile-label { color: var(--muted); font-size: var(--fs-meta); }
.board-tile-value { color: var(--text-heading); font-family: var(--font-mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.board-tile-value small { color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-meta); }
.board-tile.is-gap .board-tile-value { color: var(--warning); }
.board-legend { align-items: center; color: var(--text-secondary); display: flex; flex-wrap: wrap; font-size: var(--fs-sm); gap: 6px 16px; }
.board-legend > span { align-items: center; display: inline-flex; gap: 6px; }
.board-legend-note { color: var(--muted); }
.board-dot { border-radius: 50%; display: inline-block; height: 9px; width: 9px; }
.board-dot[data-importance="required"] { background: var(--brand); }
.board-dot[data-importance="optional"] { background: var(--steel); }
.board-dot[data-importance="unknown"] { background: var(--warning); }
.board-waiting { align-items: center; background: var(--warning-tint); border-radius: var(--radius-ctl); color: var(--text-body); display: flex; flex-wrap: wrap; font-size: var(--fs-sm); gap: 8px 12px; margin: 0; padding: 8px 12px; }
.board-group-title { color: var(--steel); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0.14em; margin: 10px 0 0; text-transform: uppercase; }
.board-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: inset 4px 0 0 var(--warning); display: grid; gap: 12px; padding: 14px 16px 14px 20px; }
.board-row[data-importance="required"] { box-shadow: inset 4px 0 0 var(--brand); }
.board-row[data-importance="optional"] { box-shadow: inset 4px 0 0 var(--steel); }
.board-row[data-depth="1"] { margin-left: 28px; }
.board-row-head { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.board-row-title { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.board-row-title strong { color: var(--text-heading); font-size: var(--fs-lg); }
.board-type { color: var(--muted); font-size: var(--fs-sm); }
.board-step-num { background: var(--surface-sunken); border-radius: var(--radius-pill); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-meta); padding: 1px 8px; }
.board-importance { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); display: inline-flex; flex: none; overflow: hidden; }
.board-importance-option { background: var(--surface); border: 0; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--fs-sm); padding: 5px 12px; }
.board-importance-option + .board-importance-option { border-left: 1px solid var(--line-strong); }
.board-importance-option:hover { color: var(--text-heading); }
.board-importance-option[aria-checked="true"][data-importance="required"] { background: var(--brand-tint); color: var(--brand); font-weight: 650; }
.board-importance-option[aria-checked="true"][data-importance="optional"] { background: var(--steel-tint); color: var(--steel); font-weight: 650; }
.board-importance-option[aria-checked="true"][data-importance="unknown"] { background: var(--warning-tint); color: var(--warning); font-weight: 650; }
.board-importance-option:focus-visible, .board-rung:focus-visible, .board-add-rung:focus-visible,
.board-chip-keep:focus-visible, .board-chip-x:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.board-label { color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 650; letter-spacing: 0.02em; margin: 0 0 6px; }
.board-ladder { align-items: stretch; display: flex; flex-wrap: wrap; gap: 6px; }
.board-rung { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); color: var(--text-body); cursor: pointer; font: inherit; font-size: var(--fs-sm); max-width: 100%; padding: 6px 10px; text-align: left; }
.board-rung:hover { border-color: var(--steel); }
.board-rung.is-picked { background: var(--success-tint); border-color: var(--success); color: var(--success); font-weight: 650; }
.board-rung-tag { color: var(--muted); display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.board-add-rung { background: none; border: 1px dashed var(--line-strong); border-radius: var(--radius-ctl); color: var(--brand); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 6px 10px; }
.board-add-rung:hover { border-color: var(--brand); }
.board-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .board-split { grid-template-columns: minmax(0, 1fr); } }
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.board-chip { align-items: center; background: var(--brand-tint); border: 1px solid var(--brand-border); border-radius: var(--radius-pill); color: var(--text-heading); display: inline-flex; font-size: var(--fs-sm); gap: 2px; max-width: 100%; padding: 2px 4px 2px 10px; }
.board-chip.is-suggested { background: var(--surface); border-color: var(--line-strong); border-style: dashed; color: var(--text-secondary); }
.board-chip-keep { background: none; border: 0; border-radius: var(--radius-ctl); color: inherit; cursor: pointer; font: inherit; padding: 0; text-align: left; }
.board-chip-keep:hover { color: var(--brand); }
.board-chip-x { background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; flex: none; font-size: 15px; height: 22px; line-height: 1; width: 22px; }
.board-chip-x:hover { background: var(--danger-tint); color: var(--danger); }
.board-empty { color: var(--faint); font-size: var(--fs-sm); }
.board-add { display: flex; gap: 6px; }
.board-add-input, .board-num, .board-num-name, .board-num-unit { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); color: var(--ink); font: inherit; font-size: var(--fs-sm); min-width: 0; padding: 5px 8px; }
.board-add-input { flex: 1 1 auto; }
.board-add-input:focus-visible, .board-num:focus-visible, .board-num-name:focus-visible, .board-num-unit:focus-visible { border-color: var(--brand); outline: 2px solid var(--brand-border); outline-offset: 1px; }
.board-numbers { display: grid; gap: 8px; margin-bottom: 8px; }
.board-number { border: 1px solid var(--line); border-radius: var(--radius-ctl); display: grid; gap: 8px; padding: 8px 10px; }
.board-number.is-suggested { border-color: var(--line-strong); border-style: dashed; }
.board-number-head { display: flex; gap: 6px; }
.board-num-name { flex: 1 1 auto; }
.board-num-unit { width: 76px; }
.board-number-tiers { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.board-tier { display: grid; gap: 3px; }
.board-tier-label { color: var(--muted); font-size: var(--fs-meta); }
.board-range { align-items: center; display: flex; gap: 4px; }
.board-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; width: 100%; }
.board-number-actions { align-items: center; display: flex; gap: 6px; justify-content: flex-end; }
.board-evidence { color: var(--muted); font-size: var(--fs-meta); font-style: italic; margin: 0 0 6px; }
.board-inline-error { color: var(--danger); font-size: var(--fs-sm); margin: 6px 0 0; }
.board-chip[aria-busy="true"] { cursor: progress; opacity: .55; }
.inline-note { color: var(--text-secondary); font-size: var(--fs-sm); margin: 6px 0 0; }
.inline-note.is-error { color: var(--danger); }
.board-lanes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.board-lane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; }
.board-lane-title { color: var(--text-heading); font-size: var(--fs-base); margin: 0 0 2px; }
.board-lane-hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 8px; }
.discovery-more { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
.discovery-more-head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.discovery-more-head h3 { font-size: var(--fs-lg); margin: 0; }

/* A feature the current plan does not include, said plainly beside where the control would be. */
.paid-note { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; }

/* ---- Federal grant card ----------------------------------------------------------------------
   Each deadline is a row whose stripe and chip say where it stands: done green, overdue red,
   due within 30 days amber, later brand. The statement sits in a sunken well because it is quoted
   text the application must carry verbatim. */
.grant-form { display: grid; gap: 12px; }
.grant-form [hidden] { display: none !important; }
.grant-field { display: grid; gap: 4px; }
.grant-field small { color: var(--muted); font-size: var(--fs-meta); line-height: 1.4; }
.grant-pair { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grant-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.grant-choice { cursor: pointer; }
.grant-choice input { height: 0; opacity: 0; pointer-events: none; position: absolute; width: 0; }
.grant-choice span { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); color: var(--text-body); display: block; font-size: var(--fs-sm); padding: 5px 11px; }
.grant-choice:hover span { border-color: var(--steel); }
.grant-choice input:checked + span { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.grant-choice input:focus-visible + span { outline: 2px solid var(--brand-border); outline-offset: 2px; }
.grant-use-date { background: none; border: 0; color: var(--brand); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; justify-self: start; padding: 0; text-align: left; }
.grant-use-date:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.grant-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.grant-remove { color: var(--danger); }
.grant-award { color: var(--text-body); font-size: var(--fs-base); margin: 0 0 10px; }
.grant-steps { display: grid; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.grant-step { border: 1px solid var(--line); border-radius: var(--radius-ctl); box-shadow: inset 4px 0 0 var(--line-strong); padding: 9px 12px 9px 16px; }
.grant-step[data-status="done"] { box-shadow: inset 4px 0 0 var(--success); }
.grant-step[data-status="overdue"] { box-shadow: inset 4px 0 0 var(--danger); }
.grant-step[data-status="soon"] { box-shadow: inset 4px 0 0 var(--warning); }
.grant-step[data-status="upcoming"] { box-shadow: inset 4px 0 0 var(--brand); }
.grant-step-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.grant-status { background: var(--surface-sunken); border-radius: var(--radius-pill); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; padding: 1px 8px; white-space: nowrap; }
.grant-status[data-status="done"] { background: var(--success-tint); color: var(--success); }
.grant-status[data-status="overdue"] { background: var(--danger-tint); color: var(--danger); }
.grant-status[data-status="soon"] { background: var(--warning-tint); color: var(--warning); }
.grant-step-rule { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 0; }
.grant-step-note { color: var(--text-body); font-size: var(--fs-sm); margin: 6px 0 0; }
.grant-step-note[data-level="danger"] { color: var(--danger); }
.grant-statement { background: var(--surface-sunken); border-radius: var(--radius-ctl); margin: 0 0 12px; padding: 10px 12px; }
.grant-statement p { color: var(--text-heading); font-size: var(--fs-base); line-height: 1.55; margin: 4px 0; }
.grant-statement small { color: var(--muted); font-size: var(--fs-meta); }
.grant-source { color: var(--muted); font-size: var(--fs-meta); margin: 10px 0 0; }

/* ---- One-time provisional purchase -------------------------------------------------------------
   Offered wherever drafting or downloads are locked; the return note confirms what payment unlocked. */
.provisional-offer { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.provisional-offer-note { color: var(--muted); font-size: var(--fs-sm); }
.provisional-offer-status { color: var(--danger); font-size: var(--fs-sm); }
.provisional-return { background: var(--surface-sunken); border-radius: var(--radius-ctl); color: var(--text-body); font-size: var(--fs-sm); margin: 0 0 10px; padding: 8px 12px; }
.provisional-return.is-paid { background: var(--success-tint); color: var(--success); font-weight: 600; }

/* ---- Workspace help: Help button, Help drawer, first-visit tour (help.js) ------------ */
.help-button { align-items: center; display: inline-flex; gap: 6px; }
.help-button[aria-expanded="true"] { background: var(--brand-tint); border-color: var(--brand-border); color: var(--brand); }

/* Non-modal drawer for the open step. Fixed to the right edge; opens with a short slide. */
.help-drawer {
  background: var(--surface-raised);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  inset: 0 0 0 auto;
  max-width: 100vw;
  opacity: 0;
  position: fixed;
  transform: translateX(24px);
  transition: opacity var(--dur-panel) var(--ease-standard), transform var(--dur-panel) var(--ease-standard);
  width: 380px;
  z-index: 40; /* above the sticky stepper (30); below modal layers (1000) */
}
.help-drawer.is-open { opacity: 1; transform: none; }
.help-drawer[hidden] { display: none; } /* display:flex above beats the UA [hidden] rule */

/* Wide screens make room for the drawer instead of covering the step, so its sticky Next
   button stays reachable while the help is open. Narrower screens overlay. */
@media (min-width: 1180px) {
  body.help-open { padding-right: 380px; }
}

.help-drawer-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 18px 20px 14px;
}
.help-drawer-eyebrow {
  color: var(--steel);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.help-drawer-title {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  gap: 9px;
  margin: 5px 0 0;
}
.help-drawer-num {
  align-items: center;
  background: var(--brand-tint);
  border-radius: var(--radius-pill);
  color: var(--brand);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}
.help-drawer-close {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  padding: 6px;
  transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.help-drawer-close:hover { background: var(--surface-sunken); color: var(--ink); }
.help-drawer-close:focus-visible,
.tour-skip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.help-drawer-body { flex: 1; overflow-y: auto; padding: 4px 20px 16px; }
.help-section { border-bottom: 1px solid var(--line-faint); padding: 14px 0; }
.help-section:last-child { border-bottom: 0; }
.help-section-heading {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.help-section-text { color: var(--text-body); font-size: var(--fs-reading); line-height: 1.55; margin: 0; }
.help-section-list { counter-reset: help-do; display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.help-section-list li {
  color: var(--text-body);
  counter-increment: help-do;
  font-size: var(--fs-reading);
  line-height: 1.5;
  padding-left: 28px;
  position: relative;
}
.help-section-list li::before {
  align-items: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  content: counter(help-do);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  height: 18px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 1px;
  width: 18px;
}
.help-drawer-foot { border-top: 1px solid var(--line); display: grid; gap: 10px; padding: 14px 20px 18px; }
.help-drawer-foot .secondary-button { justify-self: start; }
.help-drawer-note { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; margin: 0; }

/* First-visit tour: the rest of the page is inert; a spotlight rings the target and a
   card explains it. The dim is the spot's own outer shadow; the veil only catches clicks. */
.tour-root { inset: 0; position: fixed; z-index: 1000; }
.tour-veil { inset: 0; position: absolute; }
.tour-spot {
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 2px var(--brand), 0 0 0 9999px var(--scrim);
  pointer-events: none;
  position: fixed;
}
.tour-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 24px);
  opacity: 0;
  padding: 16px 18px 14px;
  position: fixed;
  transform: translateY(4px);
  transition: opacity var(--dur-panel) var(--ease-standard), transform var(--dur-panel) var(--ease-standard);
  width: 340px;
}
.tour-card.is-in { opacity: 1; transform: none; }
.tour-progress {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour-title { color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 6px 0 4px; }
.tour-body { color: var(--text-secondary); font-size: var(--fs-reading); line-height: 1.5; margin: 0 0 14px; }
.tour-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.tour-nav { display: flex; gap: 8px; }
.tour-card .primary-button { width: auto; }
.tour-skip {
  background: none;
  border: 0;
  border-radius: var(--radius-ctl);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 2px;
}
.tour-skip:hover { color: var(--ink); }

@media (max-width: 640px) {
  .help-drawer { border-left: 0; width: 100vw; }
  .tour-card { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .help-drawer, .tour-card { transform: none; transition: none; }
}

/* ---- Preparation progress (services/journey.py, _journey_bar.html) -------------------------
   Four phases in method order. A phase fills with the brand accent as its milestones land and
   turns success-green when all are done; untouched phases are the neutral track. */
.journey {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journey-phase {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.journey-track {
  background: var(--line);
  border-radius: var(--radius-pill);
  display: block;
  height: 6px;
  overflow: hidden;
}

.journey-fill {
  background: var(--brand);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--dur-panel, 150ms) var(--ease-standard, ease);
  width: var(--journey-fill, 0%);
}

.journey-phase.is-complete .journey-fill {
  background: var(--success);
}

.journey-label {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-phase.is-started .journey-label,
.journey-phase.is-complete .journey-label {
  color: var(--ink);
}

.journey-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.journey.is-compact {
  gap: 4px;
}

.journey.is-compact .journey-track {
  height: 4px;
}

/* The narrow tools sidebar: two phases per row, so the labels are not cut off. */
.ws-block .journey:not(.is-compact) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 10px;
}

/* Under the workspace stepper: a slim full-width bar that reads on every step. */
.journey-slot.is-under-stepper {
  padding: 0 22px 8px;
}

/* On a vault card, the bar sits under the card's facts. */
.vault-card .journey.is-compact {
  margin-top: 14px;
}

/* ---- The provisional window as a coloured timeline (invention.js deadlineTimeline) --------- */
.deadline-timeline {
  --timeline-color: var(--success);
  --timeline-tint: var(--success-tint);
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.deadline-timeline.is-warning { --timeline-color: var(--warning); --timeline-tint: var(--warning-tint); }
.deadline-timeline.is-danger,
.deadline-timeline.is-lapsed { --timeline-color: var(--danger); --timeline-tint: var(--danger-tint); }

.deadline-track {
  background: var(--timeline-tint);
  border-radius: var(--radius-pill);
  height: 10px;
  position: relative;
}

.deadline-elapsed {
  background: var(--timeline-color);
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: var(--at);
}

.deadline-tick {
  background: var(--surface, #fff);
  height: 100%;
  left: var(--at);
  opacity: 0.85;
  position: absolute;
  top: 0;
  width: 2px;
}

.deadline-today {
  background: var(--ink);
  border: 2px solid var(--surface, #fff);
  border-radius: 50%;
  height: 16px;
  left: var(--at);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
}

.deadline-status {
  color: var(--timeline-color);
  font-size: var(--fs-meta);
  font-weight: 700;
  margin: 0;
}

.deadline-scale {
  color: var(--muted);
  display: flex;
  font-size: var(--fs-meta);
  justify-content: space-between;
}

.deadline-scale span { display: grid; gap: 1px; }
.deadline-scale strong { color: var(--ink); font-weight: 600; }
.deadline-scale-end { text-align: right; }

.deadline-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--fs-meta);
  gap: 6px;
}

.deadline-legend-tick { background: var(--timeline-color); display: inline-block; height: 10px; width: 2px; }
.deadline-legend-today { background: var(--ink); border-radius: 50%; display: inline-block; height: 8px; width: 8px; }

.deadline-timeline.is-compact { margin-top: 2px; }
.deadline-timeline.is-compact .deadline-track { height: 7px; }
.deadline-timeline.is-compact .deadline-today { height: 12px; width: 12px; }

/* The filing-progress toolbar's fill (invention.js renderFilingProgress). */
.filing-progress-meter {
  background: var(--line);
  border-radius: var(--radius-pill);
  height: 6px;
  margin: 4px 0 12px;
  overflow: hidden;
}

.filing-progress-meter > span {
  background: var(--brand);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--dur-panel, 150ms) var(--ease-standard, ease);
}

.filing-progress-meter.is-complete > span { background: var(--success); }

@media (prefers-reduced-motion: reduce) {
  .journey-fill, .filing-progress-meter > span { transition: none; }
}

/* Earlier drafts: list, compare, restore (panels/draft.html, services/draft_history.py). */
.draft-versions {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 10px 0;
  padding: 8px 12px;
}

.draft-versions > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.draft-version-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.draft-version-item {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.draft-version-name {
  font-weight: 700;
}

.draft-version-meta {
  color: var(--muted);
  flex: 1 1 200px;
  font-size: var(--fs-meta);
}

.draft-compare {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

.draft-compare-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.draft-compare-head strong {
  flex: 1 1 240px;
}

.draft-compare-full {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.draft-compare-section h4 {
  font-size: var(--fs-sm);
  margin: 0 0 6px;
}

.draft-compare-section p {
  border-radius: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  padding: 4px 8px;
}

.draft-compare-section ins,
.draft-compare-section del {
  text-decoration: none;
}

.diff-add {
  background: color-mix(in srgb, var(--success) 14%, transparent);
}

.diff-del {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--muted);
}

.diff-skip {
  color: var(--muted);
  font-style: italic;
}

.section-carried-note {
  color: var(--muted);
  font-size: var(--fs-meta);
  margin: 4px 0 0;
}

/* Revisions (services/revisions.py, _revision_banner.html). */
.revision-banner {
  background: color-mix(in srgb, var(--brand) 7%, var(--surface, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
}

.revision-banner.is-locked {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface, transparent));
  border-color: color-mix(in srgb, var(--warning) 35%, var(--line));
}

.revision-banner-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
}

.revision-banner-text,
.revision-banner-hint {
  margin: 0;
}

.revision-banner-text {
  font-size: var(--fs-sm);
}

.revision-banner-hint,
.revision-changes-note {
  color: var(--muted);
  font-size: var(--fs-meta);
}

.revision-changes > summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.revision-changes-body {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.revision-change-group {
  display: grid;
  gap: 4px;
}

.revision-change-group p {
  border-radius: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 4px 8px;
}

.revision-change-group ins,
.revision-change-group del {
  text-decoration: none;
}

.revision-change-list {
  display: grid;
  font-size: var(--fs-sm);
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.revision-banner .panel-status:empty {
  display: none;

/* "Coming soon" beside a feature that is shown but not built yet (Figures: patent drawings). */
.drawing-soon {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.soon-chip {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: var(--radius-pill);
  color: var(--brand-hover);
  font-size: var(--fs-badge);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Formal sheets of the flowcharts and block diagrams: downloads and the drawing-rule check. */
.formal-figures {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding-top: 12px;
}

.formal-figures-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formal-findings {
  color: var(--ink);
  display: grid;
  font-size: var(--fs-sm);
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.formal-findings li {
  overflow-wrap: anywhere;
}

.formal-rule {
  color: var(--muted);
  font-size: var(--fs-meta);
  white-space: nowrap;
}