/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ═══════════════════════════════════════════════════════════════
   Design System — Component Classes
   Uses Tailwind CSS variables for automatic dark mode support.
   ═══════════════════════════════════════════════════════════════ */

/* Native text selection belongs to the app palette too: warm parchment on
   paper, subdued bronze on ink navy, with explicit ink for legibility. */
::selection {
  background: var(--color-selection);
  color: var(--color-selection-ink);
  text-shadow: none;
}

/* ── Gilt & Ink — brand typography and signature details ──────
   The night-sky identity (ink navy, starlight, gilt) carried into
   the working surfaces, not just the chrome.

   - .font-display  Playfair Display: page titles, section identity
   - .case-name     Lora italic: how case names appear in legal print
   - .font-serif-title  Lora: matter names, document titles
   - gilt           gold is the authority metal — nav rule + binding/
                    top-cited signals only; never decorative elsewhere */

.font-display {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.015em;
}

.page-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.font-serif-title {
  font-family: 'Lora', Georgia, serif;
  letter-spacing: -0.005em;
}

.case-name {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
}

/* ── Mono metadata & gilt labels (marketing identity) ──────────
   IBM Plex Mono carries the technical-precise metadata layer — labels,
   citations, scores, version tags. All color comes from tokens
   (--color-faint for quiet meta, --color-authority for gilt), so each
   reads correctly in both light and dark. */
.meta-mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-faint);
}

.label-mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-faint);
}

/* Gilt section label — gold mono with a leading hairline. */
.gilt-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-authority);
}
.gilt-label::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-authority) 55%, transparent);
}

/* Legal citation in gilt mono. */
.cite-gilt {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--color-authority);
}

/* Legal-authority link — warmer and quieter than the blue used for ordinary
   app links. Case and statute references use the authority palette everywhere
   they appear, with a restrained underline that strengthens on interaction. */
.case-ref {
  color: var(--color-authority);
  text-decoration-line: underline;
  text-decoration-color: var(--color-authority-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.12s, text-decoration-color 0.12s;
}
.case-ref:visited {
  color: var(--color-authority-visited);
  text-decoration-color: color-mix(in srgb, var(--color-authority-visited) 42%, transparent);
}
.case-ref:hover {
  color: color-mix(in srgb, var(--color-authority) 72%, var(--color-ink));
  text-decoration-color: currentColor;
}
.case-ref:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--color-authority);
  outline-offset: 2px;
}

/* Curtain redaction placeholder — client-side redaction replaces PII with
   tokens like [SURNAME_7] before text leaves the device. Raw tokens read
   as broken output, so the presentation layer renders them as a quiet
   small-caps chip ("last name 7"). The index is kept: it distinguishes
   person 7 from person 8 across a document. */
.redaction-token {
  display: inline;
  padding: 0 0.3em;
  border-radius: 0.25rem;
  background: var(--color-sunken);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  white-space: nowrap;
  cursor: help;
}

/* A value Curtain restored from its in-memory, same-session vault. The lock
   distinguishes locally revealed PII from ordinary prose without introducing
   another product color or making the value look editable. */
.curtain-revealed {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  max-width: 100%;
  padding: 0 0.3em;
  border: 1px solid var(--color-authority-line);
  border-radius: 0.25rem;
  background: var(--color-authority-soft);
  color: var(--color-ink);
  font-style: normal;
  line-height: 1.35;
  vertical-align: -0.08em;
  white-space: nowrap;
}
.curtain-revealed::before {
  content: "";
  width: 0.78em;
  height: 0.78em;
  flex: none;
  background: var(--color-authority);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 8.5V6.75a3.5 3.5 0 0 1 7 0V8.5m-8 0h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 8.5V6.75a3.5 3.5 0 0 1 7 0V8.5m-8 0h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── New Matter (fact-pattern entry) ───────────────────────
   Uses the app's card, type, and control language while keeping the
   research brief itself a focused legal-writing surface. */

/* Match the research workspaces' existing surface hierarchy exactly:
   white workspace, app-canvas controls, and line-based separation. */
.new-matter-workspace-body {
  background: var(--color-surface);
}
.new-matter-workspace-body .form-input,
.new-matter-workspace-body .fact-panel,
.new-matter-workspace-body .party-btn:not([aria-pressed="true"]) {
  background: var(--color-canvas);
}

/* Fact-pattern panel — one calm surface with a gilt top edge and a
   gilt focus-within ring (replaces the giant dashed dropzone). */
.fact-panel {
  position: relative;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.fact-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-authority), transparent 70%);
  opacity: 0.65;
}
.fact-panel:focus-within,
.fact-panel.is-dragging {
  border-color: var(--color-authority-line);
  box-shadow: 0 0 0 4px var(--color-authority-soft);
}
.fact-input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  color: var(--color-ink);
  font-family: 'Lora', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  min-height: 11rem;
  padding: 1rem 1.125rem;
  /* Safari draws native chrome on form controls unless appearance is off. */
  -webkit-appearance: none;
  appearance: none;
}
/* The PANEL carries the focus treatment (.fact-panel:focus-within gilt
   ring). The inner textarea must never add its own — a native/UA focus
   ring here renders as a stray horizontal line under the FACT PATTERN
   label, since the textarea's top edge sits directly beneath it. */
.fact-input:focus,
.fact-input:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
}
.fact-input::placeholder { color: var(--color-faint); }
.fact-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6875rem 1rem;
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-sunken) 55%, transparent);
}

/* Represented party — ordinary pressed buttons. Selection is conveyed by
   the same authority fill and border used by other active app controls. */
.party-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 9rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 0.625rem;
  cursor: pointer;
  color: var(--color-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.party-btn:hover {
  border-color: var(--color-line-strong);
}
.party-btn:focus-visible {
  outline: 2px solid var(--color-authority);
  outline-offset: 2px;
}
.party-btn[aria-pressed="true"] {
  border-color: var(--color-authority-line);
  background: var(--color-authority-soft);
  box-shadow: inset 0 0 0 1px var(--color-authority-line);
}

.party-picker {
  transition: opacity 0.18s ease;
}
.party-picker[disabled] {
  opacity: 0.45;
}
.party-picker[disabled] .party-btn {
  cursor: not-allowed;
}

/* Detected-issue card — quiet, gilt left rule. */
.issue-card {
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-authority-line);
  background: var(--color-raised);
  border-radius: 0.625rem;
}

/* Gilt toggle switch (federal law). Track/thumb spans follow the checkbox. */
.gilt-switch { position: relative; display: inline-block; width: 38px; height: 21px; flex: none; cursor: pointer; }
.gilt-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gilt-switch .track { position: absolute; inset: 0; background: var(--color-line-strong); border-radius: 999px; transition: background 0.2s; }
.gilt-switch .thumb { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.2s; }
.gilt-switch input:checked + .track { background: var(--color-authority); }
.gilt-switch input:checked + .track + .thumb { transform: translateX(17px); }
.gilt-switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--color-authority-soft); }

/* Neutral outline button — the secondary CTA against the gilt primary
   (real hierarchy; the two were identical before). */
.btn-outline {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  font-weight: 600;
}
.btn-outline:hover {
  border-color: var(--color-muted);
  transform: translateY(-1px);
}

/* Gilt hairline — the book-spine edge under the night-sky nav.
   Brighter at center, fading to the edges. */
.nav-refined::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0) 0%,
    rgba(212, 175, 55, 0.55) 18%,
    rgba(232, 203, 112, 0.85) 50%,
    rgba(212, 175, 55, 0.55) 82%,
    rgba(212, 175, 55, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.wordmark {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 560;
  letter-spacing: 0.005em;
}

/* App dialog — <dialog>-based Turbo Frame modal (modal_controller).
   Paper surface, ink shadow, blurred backdrop. */
.app-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
  overflow-y: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.75rem;
  padding: 0;
  background: var(--color-raised);
  color: var(--color-gray-900);
  box-shadow: 0 24px 64px -16px rgba(15, 30, 50, 0.35), 0 4px 16px -4px rgba(15, 30, 50, 0.15);
}

.app-dialog::backdrop {
  background: rgba(10, 14, 26, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Add Case lives inside the sticky, overflow-clipped argument rail. A native
   dialog promotes it to the browser's top layer so its backdrop always covers
   the full viewport rather than stopping at the sidebar's scroll box. */
.case-typeahead-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(32rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(85dvh, 42rem);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 0.75rem;
  padding: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 25px 60px rgba(15, 30, 50, 0.28);
}

.case-typeahead-dialog::backdrop {
  background: rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dark .case-typeahead-dialog {
  border-color: rgba(147, 197, 253, 0.22);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.dark .app-dialog {
  /* background comes from --color-raised (dark) */
  border-color: rgba(147, 197, 253, 0.2);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6), 0 0 1px 0 rgba(147, 197, 253, 0.2);
}

.app-dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.375rem;
  border-radius: 0.5rem;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  z-index: 1;
}

.app-dialog-close:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

.curtain-vault-dialog {
  width: min(30rem, calc(100vw - 2rem));
}

.citing-cases-dialog {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(88dvh, 52rem);
  overflow: hidden;
}

.citing-cases-panel {
  display: flex;
  max-height: min(88dvh, 52rem);
  flex-direction: column;
}

.citing-cases-panel--loading {
  height: min(88dvh, 52rem);
}

.citing-cases-panel--loading .citing-cases-list {
  flex: 1;
}

.citing-cases-header {
  flex: none;
  padding: 1.5rem 3.5rem 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-raised);
}

.citing-cases-list {
  min-height: 8rem;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  background: var(--color-sunken);
}

.citing-cases-pagination {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-raised);
}

@media (max-width: 640px) {
  .citing-cases-dialog,
  .citing-cases-panel {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .citing-cases-panel--loading { height: calc(100dvh - 1rem); }

  .citing-cases-header { padding: 1.25rem 3rem 1rem 1rem; }
  .citing-cases-list { padding: 0.75rem; }
  .citing-cases-pagination { padding: 0.75rem 1rem; }
}

/* CREAC outline — brief-genre presentation. Hierarchy is typographic
   (small-caps labels, serif prose, hairline nesting); color is reserved
   for judgment signals (polarity dots, strength). */
.creac-label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.creac-label-inline {
  display: inline;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-right: 0.375rem;
}

/* CREAC structural level tag (Issue / Element) — the ONLY gilt in the
   outline. Judgment color stays reserved for polarity dots + defeaters;
   the C/R/E/A section labels stay the quiet gray mono above. */
.creac-level {
  display: inline;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-authority);
  margin-right: 0.375rem;
}

.font-serif-text {
  font-family: 'Lora', Georgia, serif;
}

/* Quiet metadata tag — hairline border, ink text. Replaces the
   rose/sky/violet pill zoo for rule types. */
.tag-quiet {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600);
  background: transparent;
}

/* Authority tag — statute citations and other binding sources. Gold
   is the authority metal (same gilt as the nav hairline); everything
   else about the tag stays quiet ink. */
.tag-authority {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--color-gray-700);
  background: transparent;
  transition: border-color 0.15s ease;
}

a.tag-authority:hover {
  border-color: rgba(212, 175, 55, 0.9);
  color: var(--color-gray-900);
}

/* Result triage — inbox semantics. Dismissed cards dim and sink
   (result-sort partitions them last). Buttons are quiet gray icons until
   active. (Shortlist was retired in favor of argument membership.) */
.triage-dismissed {
  opacity: 0.45;
}

.triage-btn.triage-active {
  color: var(--color-gray-800);
}

.triage-btn.triage-active svg {
  fill: currentColor;
}

/* Fact-pattern passages tied to legal elements. Quiet by default —
   a faint dotted underline as the only hint; the element list lights
   them up on hover/select (element_highlight_controller sets the
   --hl-color custom property). Keeps the attorney's own text from
   being the loudest thing on the page. */
.highlight-passage {
  border-bottom: 1px dotted var(--color-gray-300);
}

.highlight-passage.hl-active {
  background-color: color-mix(in srgb, var(--hl-color, var(--color-gray-400)) 22%, transparent);
  border-bottom: 2px solid var(--hl-color, var(--color-gray-400));
}

/* Fact-to-element traces need to remain legible without turning the
   attorney's prose into a field of colored highlights. Use a clearly
   visible neutral underline at rest, then gilt emphasis on direct hover. */
#fact-pattern-text .highlight-passage {
  border-bottom: 0;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-faint);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  transition: background-color 0.12s, text-decoration-color 0.12s;
}

#fact-pattern-text .highlight-passage:hover {
  background-color: var(--color-authority-soft);
  text-decoration-style: solid;
  text-decoration-color: var(--color-authority);
}

#fact-pattern-text .highlight-passage.hl-active {
  border-bottom: 0;
  text-decoration-style: solid;
  text-decoration-color: var(--hl-color, var(--color-authority));
  text-decoration-thickness: 2px;
}

/* Flash messages — ink on paper with a colored hairline, not
   default alert bars. */
.flash {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-gray-200);
  border-left-width: 3px;
  background: var(--color-raised);
  color: var(--color-gray-800);
  box-shadow: 0 1px 2px 0 rgba(15, 30, 50, 0.04);
}

.flash-notice { border-left-color: #4d7c0f; }
.flash-alert  { border-left-color: #b91c1c; }

.dark .flash {
  /* background comes from --color-raised (dark) */
  color: var(--color-gray-700);
}
.dark .flash-notice { border-left-color: #86efac; }
.dark .flash-alert  { border-left-color: #fca5a5; }

/* ── Turbo Frames ─────────────────────────────────────────── */
turbo-frame {
  display: block;
}

turbo-frame[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
  min-height: 4rem;
}

/* ── Cards ─────────────────────────────────────────────────── */
/* Cards — generous 14px radius and a layered drop shadow give the
   "designed" feel the marketing mocks have; same semantic tokens, so
   both modes hold. The deep low-opacity second shadow is what reads as
   lift on the warm paper. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
  padding: 1.125rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12);
}

.card-interactive {
  /* White on the warm paper canvas. Hover warms slightly and lifts. */
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
  padding: 1.125rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.12);
  transition: background-color 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.card-interactive:hover {
  background: #fbfaf6;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 16px 36px -16px rgba(15, 23, 42, 0.22);
  border-color: var(--color-line-strong);
  transform: translateY(-2px);
}

/* Large research runs can contain hundreds of case cards. Keep them in the
   DOM for instant client-side filtering/sorting, but let the browser defer
   layout and paint for cards far below the viewport. Browsers without
   content-visibility support simply render the list as before. */
.result-card-wrap {
  content-visibility: auto;
  contain-intrinsic-size: auto 18rem;
}

.dark .card,
.dark .card-interactive {
  /* background comes from --color-surface (dark) — only the glow differs */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

.dark .card-interactive:hover {
  background: #182338;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(147, 197, 253, 0.08);
}

/* ── Search Quality Tiers ────────────────────────────────── */
.search-tier-excellent {
  border-left: 3px solid #f59e0b;
  background: #fefcf5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 0 8px -1px rgba(245, 158, 11, 0.18);
}

.search-tier-excellent:hover {
  background: #fdf8eb;
  border-left-color: #d97706;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 0 12px -1px rgba(245, 158, 11, 0.3);
}

.dark .search-tier-excellent {
  background: #1a1710;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 0 12px -2px rgba(245, 158, 11, 0.25);
}

.dark .search-tier-excellent:hover {
  background: #211e14;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 18px -2px rgba(245, 158, 11, 0.35);
}

.search-tier-good {
  border-left: 3px solid #3b82f6;
}

.search-tier-good:hover {
  border-left-color: #2563eb;
}

.search-tier-basic {
  border-left: 3px solid #d1d5db;
}

.dark .search-tier-basic {
  border-left-color: #374151;
}

/* Lead-case accent — a gilt left edge marks high-relevance cards
   (authority/relevance is gold throughout the redesign). */
.card-accent {
  border-left: 4px solid var(--color-authority-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card-accent:hover {
  border-left-color: var(--color-authority);
}

/* Bad-law edge — dispositive negative treatment outranks the relevance
   accent ("this case is overruled" changes what the score means).
   Cautionary treatment remains in the badge without a border flourish. */
.card-treatment-negative,
.card-treatment-negative:hover {
  border-left: 4px solid var(--color-unfavorable);
}

/* Synthesis element cards — shares card-interactive visual language
   Set --el-color on each card via inline style for the tinted background. */
.synth-card {
  --el-color: #6b7280;
  background: color-mix(in srgb, var(--el-color) 6%, var(--color-sunken));
  border: 1px solid color-mix(in srgb, var(--el-color) 12%, var(--color-line));
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.synth-card:hover {
  background: color-mix(in srgb, var(--el-color) 10%, var(--color-sunken));
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  border-color: color-mix(in srgb, var(--el-color) 20%, var(--color-line-strong));
}

.dark .synth-card {
  background: color-mix(in srgb, var(--el-color) 8%, #131c2b);
  border-color: color-mix(in srgb, var(--el-color) 20%, rgba(147, 197, 253, 0.1));
  box-shadow: 0 1px 4px 0 rgba(147, 197, 253, 0.06), 0 0 1px 0 rgba(147, 197, 253, 0.1);
}

.dark .synth-card:hover {
  background: color-mix(in srgb, var(--el-color) 12%, #182338);
  border-color: color-mix(in srgb, var(--el-color) 30%, rgba(147, 197, 253, 0.15));
  box-shadow: 0 2px 12px -2px rgba(147, 197, 253, 0.12), 0 0 1px 0 rgba(147, 197, 253, 0.15);
}

/* Strength pills */
.strength-pill {
  display: inline-flex;
  overflow: hidden;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px var(--sp-ring);
  --sp-green: #c7e4d1;
  --sp-red: #e4c7c7;
  --sp-indigo: #c7d2fe;
  --sp-empty: #e5e7eb;
  --sp-ring-green: var(--color-green-600);
  --sp-ring-red: var(--color-red-600);
  --sp-ring-indigo: var(--color-indigo-600);
}
.dark .strength-pill {
  --sp-green: #15803d;
  --sp-red: #991b1b;
  --sp-indigo: #3730a3;
  --sp-empty: #4b5563;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

/* Starlight-gold primary action — gold fill + ink, an inset sheen and a
   soft gold glow that lifts on hover. Gold + glow are token-derived, so
   this one rule is correct in both modes (no .dark override needed). */
.btn-primary {
  background: var(--color-gold);
  color: var(--color-gold-ink);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
              0 10px 30px -12px color-mix(in srgb, var(--color-gold) 55%, transparent);
}

.btn-primary:hover {
  background: var(--color-gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 16px 38px -12px color-mix(in srgb, var(--color-gold) 70%, transparent);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 0 0 3px color-mix(in srgb, var(--color-gold) 38%, transparent);
}

/* (btn-starfield removed — it repainted the gold primary as a near-black
   night sky in dark mode, so the page's most important button had the least
   visual weight. Primary actions are starlight gold in both modes.) */

/* ── Issue Direction Toggle ──────────────────────────────── */
.issue-dir-btn {
  color: #6b7280;
  border-right: 1px solid var(--color-gray-300);
}
.issue-dir-btn:last-child { border-right: none; }
.issue-dir-btn:hover { background: var(--color-gray-100); }

.issue-dir-for.active {
  background: #166534;
  color: #fff;
}
.issue-dir-for.active:hover {
  background: #15803d;
}
.issue-dir-against.active {
  background: #991b1b;
  color: #fff;
}
.issue-dir-against.active:hover {
  background: #b91c1c;
}

.dark .issue-dir-label {
  color: #9ca3af;
  border-right-color: rgba(147, 197, 253, 0.12);
}
.dark .issue-dir-btn {
  color: #9ca3af;
  border-right-color: rgba(147, 197, 253, 0.12);
}
.dark .issue-dir-btn:hover {
  background: #182338;
  color: #d1d5db;
}
.dark .issue-dir-for.active {
  background: #166534;
  color: #bbf7d0;
  box-shadow: 0 0 8px rgba(22, 101, 52, 0.3);
}
.dark .issue-dir-for.active:hover {
  background: #15803d;
}
.dark .issue-dir-against.active {
  background: #991b1b;
  color: #fecaca;
  box-shadow: 0 0 8px rgba(153, 27, 27, 0.3);
}
.dark .issue-dir-against.active:hover {
  background: #b91c1c;
}


.btn-secondary {
  background: transparent;
  color: var(--color-blue-700);
  border: 1px solid var(--color-blue-200);
}

.btn-secondary:hover {
  background: var(--color-blue-50);
  border-color: var(--color-blue-300);
}

/* Compact workspace actions — downloads, maps, and graph controls. A quiet
   gilt-tinted raised surface keeps these discoverable without giving them the
   visual weight of a primary action. The token-driven washes work in both
   paper and ink modes. */
.workspace-action {
  background: color-mix(in srgb, var(--color-authority) 7%, var(--color-raised));
  border-color: color-mix(in srgb, var(--color-authority) 24%, var(--color-control-line));
  color: var(--color-muted);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 72%, transparent),
    0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.workspace-action:hover {
  background: color-mix(in srgb, var(--color-authority) 12%, var(--color-raised));
  border-color: color-mix(in srgb, var(--color-authority) 48%, var(--color-control-line));
  color: var(--color-ink);
}

.workspace-action:focus-visible {
  outline: 2px solid var(--color-authority);
  outline-offset: 2px;
}

.dark .workspace-action {
  background: color-mix(in srgb, var(--color-authority) 8%, var(--color-sunken));
  border-color: color-mix(in srgb, var(--color-authority) 22%, var(--color-control-line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark .workspace-action:hover {
  background: color-mix(in srgb, var(--color-authority) 13%, var(--color-sunken));
  border-color: color-mix(in srgb, var(--color-authority) 42%, var(--color-control-line));
}

.outline-toolbar-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  line-height: 1;
}

.outline-toolbar-control svg {
  flex: none;
}

/* The desktop outline spine becomes a persistent context switcher on mobile.
   Its native dialog enters the top layer, so the sheet clears workspace
   stacking contexts and the fixed app tab bar. */
.mobile-outline-navigator {
  position: sticky;
  top: calc(var(--sticky-top, 0px) + 0.5rem);
  z-index: 35;
  margin-bottom: 1rem;
}

body.mobile-outline-sheet-open {
  overflow: hidden;
}

body.mobile-filter-sheet-open {
  overflow: hidden;
}

.mobile-outline-switcher {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid var(--color-authority-line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-raised) 94%, var(--color-authority-soft));
  box-shadow: 0 5px 16px color-mix(in srgb, var(--color-ink) 12%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-outline-switcher-adversary {
  border-color: color-mix(in srgb, var(--color-unfavorable) 36%, var(--color-line));
  background: color-mix(in srgb, var(--color-raised) 94%, var(--color-unfavorable-soft));
}

.mobile-outline-step,
.mobile-outline-current {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
  touch-action: manipulation;
}

.mobile-outline-step {
  min-width: 44px;
  border-right: 1px solid var(--color-line);
}

.mobile-outline-current + .mobile-outline-step {
  border-right: 0;
  border-left: 1px solid var(--color-line);
}

.mobile-outline-step:hover,
.mobile-outline-current:hover {
  background: var(--color-sunken);
  color: var(--color-ink);
}

.mobile-outline-step-disabled {
  color: var(--color-line-strong);
  cursor: default;
}

.mobile-outline-current {
  min-width: 0;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
}

.mobile-outline-step:focus-visible,
.mobile-outline-current:focus-visible,
.mobile-outline-sheet-close:focus-visible,
.mobile-outline-sheet-item:focus-visible {
  outline: 2px solid var(--color-authority);
  outline-offset: -2px;
}

.mobile-outline-sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: min(72dvh, 42rem);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  background: var(--color-raised);
  color: var(--color-ink);
  box-shadow: 0 -20px 55px rgba(2, 6, 23, 0.28);
}

.mobile-outline-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: mobileOutlineSheetIn 160ms ease-out;
}

.mobile-outline-sheet::backdrop {
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mobile-outline-sheet-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0.75rem 0.75rem 1rem;
  border-bottom: 1px solid var(--color-line);
}

.mobile-outline-sheet-close {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  color: var(--color-muted);
  cursor: pointer;
}

.mobile-outline-sheet-close:hover {
  background: var(--color-sunken);
  color: var(--color-ink);
}

.mobile-outline-sheet-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.375rem 0 max(0.75rem, env(safe-area-inset-bottom, 0px));
}

.mobile-outline-sheet-issue {
  padding: 0.75rem 1rem 0.25rem;
  color: var(--color-faint);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-outline-sheet-item {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-left: 3px solid transparent;
}

.mobile-outline-sheet-item:hover {
  background: var(--color-sunken);
}

.mobile-outline-sheet-item-selected {
  border-left-color: var(--color-authority);
  background: var(--color-authority-soft);
}

.mobile-outline-sheet-item-adversary {
  border-left-color: var(--color-unfavorable);
  background: var(--color-unfavorable-soft);
}

.mobile-case-filter-navigator {
  position: relative;
}

.mobile-case-filter-current {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-authority-line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-raised) 94%, var(--color-authority-soft));
  color: var(--color-ink);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--color-ink) 12%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-case-filter-current:hover {
  background: var(--color-sunken);
}

.mobile-case-filter-current:focus-visible,
.mobile-case-filter-option:focus-visible {
  outline: 2px solid var(--color-authority);
  outline-offset: -2px;
}

.mobile-case-filter-option {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-left: 3px solid transparent;
  color: var(--color-muted);
  cursor: pointer;
  text-align: left;
}

.mobile-case-filter-option:hover {
  background-color: var(--color-sunken);
  color: var(--color-ink);
}

.mobile-case-filter-option[aria-pressed="true"] {
  border-left-color: var(--filter-color);
}

.mobile-case-filter-check {
  opacity: 0;
}

.mobile-case-filter-option[aria-pressed="true"] .mobile-case-filter-check {
  opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
  .mobile-outline-sheet[open] { animation: none; }
}

@media (max-width: 767px) {
  .cases-filter-toolbar,
  #results-filter-chips {
    display: contents;
  }

  .cases-filter-controller {
    position: sticky;
    top: calc(var(--sticky-top, 0px) + 0.5rem);
    z-index: 35;
    margin-bottom: 0.75rem;
  }

  .cases-filter-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
  }
}

/* Cases filters — every inactive chip carries a whisper of its eventual
   selected color, so the row remains legible as a set of distinct choices
   without becoming a strip of solid badges. Inline selected-state colors
   intentionally override these soft component defaults. */
.case-filter-chip {
  --filter-color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1rem;
  vertical-align: middle;
  background: color-mix(in srgb, var(--filter-color) 6%, var(--color-raised));
  border-color: color-mix(in srgb, var(--filter-color) 30%, var(--color-control-line));
  color: var(--color-muted);
}

.case-filter-chip:hover {
  background: color-mix(in srgb, var(--filter-color) 11%, var(--color-raised));
  border-color: color-mix(in srgb, var(--filter-color) 55%, var(--color-control-line));
  color: var(--color-ink);
}

.case-filter-chip:focus-visible {
  outline: 2px solid var(--filter-color);
  outline-offset: 2px;
}

.case-filter-count {
  background: color-mix(in srgb, var(--filter-color) 8%, white);
  color: #25303d;
}

.dark .case-filter-chip {
  background: color-mix(in srgb, var(--filter-color) 10%, var(--color-sunken));
  border-color: color-mix(in srgb, var(--filter-color) 34%, var(--color-control-line));
}

.dark .case-filter-count {
  background: rgb(0 0 0 / 18%);
  color: inherit;
}

.dark .case-filter-chip:hover {
  background: color-mix(in srgb, var(--filter-color) 16%, var(--color-sunken));
  border-color: color-mix(in srgb, var(--filter-color) 58%, var(--color-control-line));
}

/* The reader reuses the case-card argument controls, but its label belongs
   to the case header's metadata hierarchy. Contextual overrides survive the
   Turbo replacement of the shared inner partial after an add/remove edit. */
#reader-argument-actions .argument-actions {
  margin-top: 0.375rem;
}

#reader-argument-actions .argument-actions-label {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.btn-danger {
  background: transparent;
  color: var(--color-red-500);
}

.btn-danger:hover {
  background: var(--color-red-50);
  color: var(--color-red-700);
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 9999px;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  vertical-align: middle;
}

/* Relevance score chip — gilt (authority/relevance). Token-derived,
   so one rule holds in both modes. */
.badge-score {
  background: var(--color-authority-soft);
  color: var(--color-authority);
}

/* Neutral "facts" chip — quiet, no judgment color. */
.badge-secondary {
  background: var(--color-sunken);
  color: var(--color-muted);
}

.badge-status {
  background: var(--color-green-100);
  color: var(--color-green-800);
  font-weight: 500;
}

/* ── Form inputs ───────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 0.25rem;
}

.form-input,
.form-textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-gray-300);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--color-white);
  color: var(--color-gray-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-blue-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-400);
}

/* The Matters index search carries its own leading icon. Component padding
   is declared after utilities in the compiled cascade, so keep the icon gap
   explicit instead of relying on a Tailwind padding utility. */
.matter-library-search {
  padding-left: 2.25rem;
}

/* ── Nav refinement ────────────────────────────────────────── */
:root {
  --nav-height: 3.5rem;
  --app-content-height: calc(100dvh - var(--nav-height));
}

/* The app chrome owns the viewport; ordinary pages scroll inside the region
   below the navbar. This keeps the browser scrollbar aligned with the content
   it controls and gives every sticky workspace control one scroll ancestor. */
html:has(body.app-shell) {
  height: 100%;
  overflow: hidden;
}

body.app-shell {
  display: flex;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

body.matter-workspace-page main {
  padding-top: 0;
}

/* Matter workspaces supply their own compact navigation in the masthead. */
body.matter-workspace-page {
  --nav-height: 0px;
}

.app-scroll-region {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

body.mobile-outline-sheet-open .app-scroll-region,
body.mobile-filter-sheet-open .app-scroll-region,
body.reader-modal-open .app-scroll-region,
body.overflow-hidden .app-scroll-region {
  overflow-y: hidden;
}

.nav-refined {
  height: var(--nav-height);
  background: #0a0e1a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 4px 0 rgba(147, 197, 253, 0.05);
}

#app-menu { background: rgba(250, 251, 252, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.dark #app-menu { background: rgba(26, 35, 50, 0.85); }

.nav-link {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  transition: color 0.15s ease;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--color-gray-900);
}

.nav-link-active {
  color: var(--color-authority);
  font-weight: 500;
  border-bottom-color: var(--color-authority);
}

/* Prevent iOS Safari auto-zoom on input focus */
@media screen and (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Hide matter header + mobile tabs when reading a case on mobile.
   JS toggles .reading-case on the tab container when frame has data-case-name. */
@media (max-width: 767px) {
  /* Mobile scrollbars overlay the content. Reserving a desktop-style gutter
     makes fixed floating rails wider than the in-flow structure rails. */
  .app-scroll-region {
    scrollbar-gutter: auto;
  }

  body:has(.reading-case) > #matter-header,
  .reading-case > #matter-mobile-tabs {
    display: none !important;
  }
  body:has(.reading-case) #matter-workspace {
    --app-content-height: calc(100dvh - var(--nav-height));
  }
  body.reader-open:has(.reading-case) #matter-workspace {
    --app-content-height: 100dvh;
  }
  .reading-case .opinion-header-sticky {
    top: var(--reader-sticky-gap, 1rem) !important;
  }
  main:has(.reading-case) {
    padding-top: 0 !important;
  }
}

/* Case reader header — sticky on web, static on native */
.opinion-header-sticky {
  position: sticky;
  top: calc(var(--sticky-top, 0px) + var(--reader-sticky-gap, 2rem));
  z-index: 30;
  box-shadow: 0 -2rem 0 0 var(--color-canvas);
}

/* Opinion overview — the vertical document is projected onto a horizontal
   masthead track. The viewport capsule follows reading position; annotation
   ticks remain directly clickable. */
.document-progress {
  padding: 0 1rem 0.5rem;
  background: inherit;
}
.document-progress--inline {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 28rem;
  padding: 0 0.25rem;
  align-self: center;
}
.document-progress-track {
  position: relative;
  height: 1.25rem;
  cursor: pointer;
  touch-action: manipulation;
}
.document-progress-line,
.document-progress-read {
  position: absolute;
  top: 0.5625rem;
  left: 0;
  height: 2px;
  border-radius: 9999px;
}
.document-progress-line {
  width: 100%;
  background: var(--color-line-strong);
}
.document-progress-read {
  width: 0;
  background: color-mix(in srgb, var(--color-muted) 50%, transparent);
}
.document-progress-viewport {
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 1.5%;
  height: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-muted) 58%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-surface) 54%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-canvas) 68%, transparent);
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.document-progress-viewport:active,
.document-progress-viewport.is-dragging {
  cursor: grabbing;
  background: color-mix(in srgb, var(--color-selection) 45%, var(--color-surface));
  border-color: var(--color-muted);
}
.document-progress-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.document-progress-marker {
  --progress-marker-color: var(--color-muted);
  position: absolute;
  z-index: 2;
  width: 0.875rem;
  height: 0.625rem;
  margin-left: -0.4375rem;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.document-progress-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 3px;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--progress-marker-color);
  transform: translateX(-50%);
}
.document-progress-marker--note {
  --progress-marker-color: var(--color-authority);
  top: 0;
}
.document-progress-marker--note::before {
  top: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
}
.document-progress-marker:not(.document-progress-marker--note) {
  top: 0.625rem;
}
.document-progress-marker:not(.document-progress-marker--note)::before {
  bottom: 0;
}
.document-progress-marker--fact { --progress-marker-color: #71806a; }
.document-progress-marker--reasoning { --progress-marker-color: #766c80; }
.document-progress-marker--holding { --progress-marker-color: #8a6b2d; }
.document-progress-marker--favors_met { --progress-marker-color: #55715d; }
.document-progress-marker--against_met { --progress-marker-color: #8a554c; }
.dark .document-progress-marker--fact { --progress-marker-color: #a9c7aa; }
.dark .document-progress-marker--reasoning { --progress-marker-color: #c7bad2; }
.dark .document-progress-marker--holding { --progress-marker-color: #d8bd78; }
.dark .document-progress-marker--favors_met { --progress-marker-color: #a6c8ad; }
.dark .document-progress-marker--against_met { --progress-marker-color: #d7aaa2; }

/* Opinion inline highlights — restrained archival washes on paper instead
   of stock highlighter colors. Each type owns only its palette; shared
   passage treatment keeps HTML and plain-text renderers visually aligned. */
.highlight-passage:is(.hl-fact, .hl-reasoning, .hl-relevance, .hl-favorable, .hl-unfavorable) {
  background: var(--highlight-wash);
  border-bottom: 2px solid var(--highlight-line);
}
.highlight-passage.has-tooltip {
  cursor: help;
}

.hl-fact {
  --highlight-wash: #e5ece3;
  --highlight-line: #71806a;
}
.hl-reasoning {
  --highlight-wash: #e8e5ec;
  --highlight-line: #766c80;
}
.hl-relevance {
  --highlight-wash: #eee5cf;
  --highlight-line: #8a6b2d;
}
.hl-favorable {
  --highlight-wash: #e1ebe4;
  --highlight-line: #55715d;
}
.hl-unfavorable {
  --highlight-wash: #eee1de;
  --highlight-line: #8a554c;
}

.highlight-dot-fact { background: #71806a; }
.highlight-dot-reasoning { background: #766c80; }
.highlight-dot-holding { background: #8a6b2d; }

.dark .hl-fact {
  --highlight-wash: rgba(169, 199, 170, 0.28);
  --highlight-line: #a9c7aa;
}
.dark .hl-reasoning {
  --highlight-wash: rgba(199, 186, 210, 0.28);
  --highlight-line: #c7bad2;
}
.dark .hl-relevance {
  --highlight-wash: rgba(216, 189, 120, 0.32);
  --highlight-line: #d8bd78;
}
.dark .hl-favorable {
  --highlight-wash: rgba(166, 200, 173, 0.28);
  --highlight-line: #a6c8ad;
}
.dark .hl-unfavorable {
  --highlight-wash: rgba(215, 170, 162, 0.30);
  --highlight-line: #d7aaa2;
}

.dark .highlight-dot-fact { background: #a9c7aa; }
.dark .highlight-dot-reasoning { background: #c7bad2; }
.dark .highlight-dot-holding { background: #d8bd78; }

/* ── Opinion long-read typography ─────────────────────────────
   Book-size Lora on a centered ~65ch measure. Justified to match legal
   print — hyphenation is required with justify or word-spacing rivers
   appear. Ink is softened one step in dark mode (near-white is harsh over
   a long read). Unlayered on purpose: these must beat the prose-sm /
   text-ink utility classes on the same element, and anything inside
   @layer base loses to utilities regardless of selector specificity. */
#opinion-body .prose,
#opinion-body-highlighted .prose {
  font-family: 'Lora', Georgia, serif;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 42rem;
  margin-inline: auto;
}
.dark #opinion-body .prose,
.dark #opinion-body-highlighted .prose {
  color: #d9e1ec;
}

/* ── Distraction-free case reader ─────────────────────────────
   Uses the same inset, blurred-backdrop interaction as Map and Graph. */
body.reader-modal-open {
  overflow: hidden;
}

.reader-reading-modal {
  --color-canvas: #f4f0e8;
  --color-surface: #ffffff;
  --color-raised: #fffdf9;
  --color-sunken: #eee9df;
  --color-ink: #080d16;
  --color-muted: #27364a;
  --color-faint: #465568;
  --color-line: #e5e7eb;
  --color-line-strong: #d1d5db;
  --color-control-line: #928a7f;
  --color-link: #1f4f7a;
  --color-authority: #76551f;
  --color-selection: #d8c9a8;
  --color-selection-ink: #17130b;
  --color-authority-soft: rgba(212, 175, 55, 0.13);
  --color-authority-line: rgba(212, 175, 55, 0.40);
  --color-favorable: #166534;
  --color-unfavorable: #991b1b;
  --color-caution: #b45309;
  --color-favorable-soft: rgba(22, 101, 52, 0.10);
  --color-caution-soft: rgba(180, 83, 9, 0.10);
  --color-unfavorable-soft: rgba(153, 27, 27, 0.10);
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-green-100: #dcfce7;
  --color-green-400: #4ade80;
  --color-red-100: #fee2e2;
  --color-red-400: #f87171;
  --color-emerald-100: #d1fae5;
  --color-emerald-400: #34d399;
  --color-purple-100: #f3e8ff;
  --color-purple-400: #c084fc;

  position: relative;
  width: min(72rem, calc(100vw - 4rem));
  height: min(56rem, calc(100dvh - 4rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #c9c3b8;
  border-radius: 0.875rem;
  background: #e9e5dd;
  color: var(--color-ink);
  color-scheme: light;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.32);
}

.reader-reading-modal-header {
  min-height: 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 28rem) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding: 0.75rem 1rem 0.625rem 1.25rem;
  border-bottom: 1px solid var(--color-line-strong);
  background: var(--color-raised);
}

.reader-reading-modal-title {
  min-width: 0;
  color: var(--color-ink);
  grid-column: 1;
  grid-row: 1;
}

.reader-reading-modal-header .document-progress {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 28rem;
  padding-inline: 0;
}

.reader-reading-modal-title > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.reader-reading-modal-close {
  flex: 0 0 auto;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--color-faint);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.reader-reading-modal-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.reader-reading-modal-theme {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--color-faint);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.reader-reading-modal-theme:hover {
  color: var(--color-ink);
  background: var(--color-sunken);
}

.reader-reading-modal-close:hover {
  color: var(--color-ink);
  background: var(--color-sunken);
}

.reader-reading-modal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 2rem;
}

/* Reporter pages remain visible in the workspace as well as reader mode.
   The workspace uses the app palette; the modal overrides these surfaces
   with its archival light-paper palette below. */
#opinion-body .prose.reader-modal-pages {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-inline: auto;
  color: var(--color-ink);
}

#opinion-body.reading-margin-active .reader-modal-pages {
  width: calc(100% - 15rem);
  margin-left: 0 !important;
  margin-right: auto !important;
}

.reader-modal-page {
  box-sizing: border-box;
  width: min(48rem, 100%);
  margin-inline: auto;
  padding: clamp(2.25rem, 6vw, 4.5rem);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  box-shadow: 0 3px 12px rgba(42, 35, 24, 0.10);
}

.dark .reader-modal-page {
  color: #d9e1ec;
  border-color: rgba(147, 197, 253, 0.14);
  background: #111a28;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.24);
}

.reader-reading-modal #opinion-body {
  padding: 1.5rem !important;
}

/* Reassert the Reader's light-theme highlight palette after global dark
   overrides; reader-theme-dark supplies its own palette below. */
.reader-reading-modal .hl-fact {
  --highlight-wash: #e5ece3;
  --highlight-line: #71806a;
}
.reader-reading-modal .hl-reasoning {
  --highlight-wash: #e8e5ec;
  --highlight-line: #766c80;
}
.reader-reading-modal .hl-relevance {
  --highlight-wash: #eee5cf;
  --highlight-line: #8a6b2d;
}
.reader-reading-modal .hl-favorable {
  --highlight-wash: #e1ebe4;
  --highlight-line: #55715d;
}
.reader-reading-modal .hl-unfavorable {
  --highlight-wash: #eee1de;
  --highlight-line: #8a554c;
}
.reader-reading-modal .highlight-dot-fact { background: #71806a; }
.reader-reading-modal .highlight-dot-reasoning { background: #766c80; }
.reader-reading-modal .highlight-dot-holding { background: #8a6b2d; }
.reader-reading-modal .document-progress-marker--fact { --progress-marker-color: #71806a; }
.reader-reading-modal .document-progress-marker--reasoning { --progress-marker-color: #766c80; }
.reader-reading-modal .document-progress-marker--holding { --progress-marker-color: #8a6b2d; }
.reader-reading-modal .document-progress-marker--favors_met { --progress-marker-color: #55715d; }
.reader-reading-modal .document-progress-marker--against_met { --progress-marker-color: #8a554c; }

.reader-reading-modal #opinion-body .reader-modal-pages {
  color: var(--color-ink);
}

.reader-reading-modal .reader-modal-page {
  color: var(--color-ink);
  border: 1px solid #d7d3cb;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(42, 35, 24, 0.10);
}

.reader-reading-modal.reader-theme-dark {
  --color-canvas: #080d16;
  --color-surface: #111a28;
  --color-raised: #0f1725;
  --color-sunken: #182334;
  --color-ink: #d9e1ec;
  --color-muted: #c3cedd;
  --color-faint: #94a3b8;
  --color-line: rgba(147, 197, 253, 0.12);
  --color-line-strong: rgba(147, 197, 253, 0.18);
  --color-control-line: #64748b;
  --color-link: #93c5fd;
  --color-selection: #48566b;
  --color-selection-ink: #f8fafc;
  border-color: rgba(147, 197, 253, 0.16);
  background: #080d16;
  color-scheme: dark;
}

.reader-reading-modal.reader-theme-dark .reader-modal-page {
  color: #d9e1ec;
  border-color: rgba(147, 197, 253, 0.14);
  background: #111a28;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.24);
}

.reader-reading-modal.reader-theme-dark .hl-fact {
  --highlight-wash: rgba(169, 199, 170, 0.28);
  --highlight-line: #a9c7aa;
}
.reader-reading-modal.reader-theme-dark .hl-reasoning {
  --highlight-wash: rgba(199, 186, 210, 0.28);
  --highlight-line: #c7bad2;
}
.reader-reading-modal.reader-theme-dark .hl-relevance {
  --highlight-wash: rgba(216, 189, 120, 0.32);
  --highlight-line: #d8bd78;
}
.reader-reading-modal.reader-theme-dark .hl-favorable {
  --highlight-wash: rgba(166, 200, 173, 0.28);
  --highlight-line: #a6c8ad;
}
.reader-reading-modal.reader-theme-dark .hl-unfavorable {
  --highlight-wash: rgba(215, 170, 162, 0.30);
  --highlight-line: #d7aaa2;
}

.dark .reader-reading-modal #opinion-body .prose,
.reader-reading-modal #opinion-body .prose {
  color: var(--color-ink);
}

#opinion-body .reader-modal-page .page-marker {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 0 1.5rem !important;
  padding: 0 0 0.5rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-line-strong) !important;
  background: transparent !important;
  color: var(--color-faint) !important;
}

.reader-mode-overlay [data-reader-tools-target="popover"] {
  z-index: 130;
  max-width: calc(100vw - 1rem);
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  --color-surface: #ffffff;
  --color-ink: #080d16;
  --color-muted: #27364a;
  --color-faint: #465568;
  --color-line: #e5e7eb;
  color: #111827;
  color-scheme: light;
}

[data-reader-tools-target="popover"] .reader-note-form {
  box-sizing: border-box;
  width: min(18rem, calc(100vw - 1rem));
  max-width: 100%;
}

.reader-mode-overlay [data-reader-tools-target="popover"] .reader-note-field {
  border-color: #d1d5db;
  background: #ffffff;
  color: #111827;
  color-scheme: light;
}

.reader-mode-overlay [data-reader-tools-target="popover"] .reader-note-field::placeholder {
  color: #6b7280;
}

.reader-mode-overlay.reader-theme-dark [data-reader-tools-target="popover"] {
  --color-surface: #111a28;
  --color-ink: #d9e1ec;
  --color-muted: #c3cedd;
  --color-faint: #94a3b8;
  --color-line: rgba(147, 197, 253, 0.18);
  background: #111a28;
  color: #d9e1ec;
  color-scheme: dark;
}

.reader-mode-overlay.reader-theme-dark [data-reader-tools-target="popover"] .reader-note-field {
  border-color: #334155;
  background: #0f1725;
  color: #e2e8f0;
  color-scheme: dark;
}

.reader-mode-overlay.reader-theme-dark [data-reader-tools-target="popover"] .reader-note-field::placeholder {
  color: #94a3b8;
}

@media (max-width: 767px) {
  .graph-overlay.reader-mode-overlay {
    padding: 0;
  }

  .reader-reading-modal {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .reader-reading-modal-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.5rem;
    padding: max(0.375rem, env(safe-area-inset-top, 0px)) 0.375rem 0.375rem 1rem;
  }

  .reader-reading-modal-header .document-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .reader-reading-modal-close {
    grid-column: auto;
  }

  .reader-reading-modal-actions {
    grid-column: 2;
  }

  .reader-reading-modal-close {
    display: none;
  }

  .reader-reading-modal-scroll {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .reader-reading-modal #opinion-body {
    padding: 0 !important;
  }

  .reader-reading-modal #opinion-body .reader-modal-pages {
    width: 100%;
    max-width: none;
    margin-inline: 0 !important;
    gap: 0.75rem;
    background: #e9e5dd;
  }

  .reader-reading-modal .reader-modal-page {
    width: 100%;
    padding: 1.25rem 1rem;
    border: 0;
    border-top: 1px solid #d7d3cb;
    border-bottom: 1px solid #d7d3cb;
    box-shadow: 0 1px 3px rgba(42, 35, 24, 0.10);
  }

  .reader-modal-page + .reader-modal-page {
    border-top-color: #c9c3b8;
  }

  .reader-reading-modal.reader-theme-dark #opinion-body .reader-modal-pages {
    background: #080d16;
  }

  .reader-reading-modal.reader-theme-dark .reader-modal-page + .reader-modal-page {
    border-top-color: rgba(147, 197, 253, 0.18);
  }
}

/* The embedded case view remains usable if a mobile reader is closed. */
@media (max-width: 767px) {
  #tab_content[data-case-name] #opinion-body {
    padding-inline: 0 !important;
  }

  #tab_content[data-case-name] #opinion-body .reader-modal-pages,
  #tab_content[data-case-name] #opinion-body.reading-margin-active .reader-modal-pages {
    width: 100% !important;
    max-width: none;
    margin-inline: 0 !important;
    gap: 0.75rem;
    background: var(--color-canvas);
  }

  #tab_content[data-case-name] #opinion-body .reader-modal-page {
    width: 100%;
    border-inline: 0;
  }

  #tab_content[data-case-name] #reader-annotations-rail {
    display: none !important;
  }
}

/* ── Turbo Native overrides ──────────────────────────────── */
body.turbo-native {
  --nav-height: 0px;
}

body.turbo-native main {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Hide web-only elements inside native shell */
body.turbo-native .web-only {
  display: none !important;
}


/* Hide web headers and tab bars in native app — handled by native UI */
body.turbo-native #matters-header,
body.turbo-native #matter-header,
body.turbo-native #matter-mobile-tabs,
body.turbo-native #tab-bar-mobile,
body.turbo-native #matter-sidebar,
body.turbo-native #tab-sidebar,
body.turbo-native #settings-mobile-tabs,
body.turbo-native #settings-sidebar {
  display: none !important;
}

/* Show native-only elements (hidden by default, visible in native shell) */
.native-only { display: none !important; }
body.turbo-native .native-only { display: flex !important; }

/* Case reader: un-stick the header and hide close button on native (nav back handles it) */
body.turbo-native .opinion-header-sticky {
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}
body.turbo-native #opinion-header [data-action="opinion-reader#close"] {
  display: none !important;
}

/* On native, page markers scroll inline (not sticky) and are visually subtle */
body.turbo-native .page-marker {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(209, 213, 219, 0.5) !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  justify-content: center !important;
}

/* Apple Books-style floating page bubble */
#native-page-bubble {
  position: fixed;
  bottom: calc(var(--native-tab-bar-height, 100px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 10px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#native-page-bubble.visible {
  opacity: 1;
}
#native-page-bubble.chrome-hidden {
  bottom: 20px;
}
.dark #native-page-bubble {
  background: rgba(255, 255, 255, 0.2);
}

/* Nav starfield (always-dark navbar) */
nav #nav-starfield {
  background: linear-gradient(90deg, #060a14 0%, #0a0e1a 50%, #060a14 100%);
}

/* Starry night login screen */
html:has(.starry-night) { height: 100%; background: #0a0e1a; }
html:has(.starry-night) body { width: 100%; min-height: 100%; height: 100%; background: #0a0e1a !important; margin: 0; }
html:has(.starry-night) main { padding: 0 !important; margin: 0 !important; max-width: none !important; }

.starry-night {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  z-index: 0;
}

.starry-night::before {
  content: '';
  position: fixed;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  background: linear-gradient(180deg, #0a0e1a 0%, #111827 40%, #1a1f3a 100%);
  z-index: -1;
}

.starry-night #starfield {
  position: fixed;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  z-index: 0;
}

.starry-night #constellation {
  position: fixed;
  width: min(220px, 30vw);
  height: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.starry-content {
  position: relative;
  z-index: 10;
  padding: 1rem;
  padding-top: 25vh;
  max-width: 28rem;
  margin: 0 auto;
}

.starry-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(147, 197, 253, 0.15);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.08);
}

.starry-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgba(147, 197, 253, 0.2);
  background: rgba(15, 23, 42, 0.5);
  color: #e2e8f0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem; /* 16px prevents iOS Safari auto-zoom on focus */
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.starry-input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.starry-input:focus {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Public account entry — same night-sky, editorial serif, mono labels,
   and starlight-gold controls as the marketing page. Kept under
   .auth-shell so none of these presentation rules leak into the app. */
html:has(.auth-shell) body > footer { display: none; }

.auth-shell {
  --auth-text: #e9ecf6;
  --auth-text-soft: #c2c8da;
  --auth-muted: #828aa3;
  --auth-faint: #626b84;
  --auth-border: rgba(255,255,255,.1);
  --auth-border-strong: rgba(255,255,255,.17);
  --auth-panel: rgba(16,22,37,.88);
  --auth-panel-2: rgba(255,255,255,.035);
  --auth-gold: #e8c87d;
  --auth-gold-hover: #f0d693;
  --auth-gold-soft: rgba(232,200,125,.12);
  --auth-gold-line: rgba(232,200,125,.34);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--auth-text);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

.auth-shell::before {
  inset: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(232,200,125,.07), transparent 62%),
    radial-gradient(800px 650px at 10% 12%, rgba(86,108,170,.1), transparent 64%),
    linear-gradient(180deg, #0a0e1a 0%, #090d18 48%, #070a13 100%);
}

.auth-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

.auth-shell #auth-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.auth-content {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 7vh, 5rem) 1.25rem 3rem;
}

.auth-content-login { max-width: 31rem; }
.auth-content-signup { max-width: 39rem; padding-top: clamp(2rem, 5vh, 3.5rem); }

.auth-brand-row { display: flex; justify-content: center; margin-bottom: 2rem; }
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--auth-text);
  transition: color .15s ease;
}
.auth-brand:hover { color: #fff; }
.auth-brand span { color: var(--auth-gold); font-size: .75em; transform: translateY(-.04em); }

.auth-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--auth-border);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(21,28,47,.94), var(--auth-panel));
  box-shadow: 0 32px 80px -36px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.auth-heading { margin-bottom: 1.6rem; }
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auth-gold);
}
.auth-eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--auth-gold-line); }
.auth-heading h1 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2rem, 8vw, 2.65rem);
  font-weight: 480;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--auth-text);
}
.auth-heading p { margin: .6rem 0 0; font-size: .925rem; line-height: 1.55; color: var(--auth-muted); }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-field { min-width: 0; }
.auth-fieldset { min-width: 0; margin: .25rem 0 0; padding: 0; border: 0; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.auth-label {
  display: block;
  margin-bottom: .45rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--auth-text-soft);
}

.auth-shell .auth-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: .68rem .8rem;
  border: 1px solid var(--auth-border-strong);
  border-radius: .55rem;
  outline: none;
  background: rgba(5,9,18,.45);
  color: var(--auth-text);
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-shell .auth-input::placeholder { color: var(--auth-faint); }
.auth-shell .auth-input:hover { border-color: rgba(255,255,255,.25); }
.auth-shell .auth-input:focus {
  border-color: var(--auth-gold-line);
  background: rgba(5,9,18,.62);
  box-shadow: 0 0 0 3px var(--auth-gold-soft);
}
.auth-shell .auth-input-disabled { opacity: .65; cursor: not-allowed; }
.auth-help { margin: .4rem 0 0; font-size: .72rem; line-height: 1.45; color: var(--auth-muted); }

.auth-primary-button {
  width: 100%;
  min-height: 2.9rem;
  margin-top: .25rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  background: var(--auth-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px -16px rgba(232,200,125,.65);
  color: #1a1408;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-primary-button:hover { transform: translateY(-1px); background: var(--auth-gold-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 16px 36px -16px rgba(232,200,125,.75); }
.auth-primary-button:focus-visible { outline: 2px solid var(--auth-gold); outline-offset: 3px; }

.auth-link { color: var(--auth-text-soft); text-decoration: underline; text-decoration-color: var(--auth-gold-line); text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.auth-link:hover { color: var(--auth-gold); text-decoration-color: currentColor; }
.auth-link-quiet { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .75rem; text-transform: none; letter-spacing: 0; }

.auth-card-footer {
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin-top: 1.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--auth-border);
  font-size: .8rem;
  color: var(--auth-muted);
}

.auth-alert {
  margin-bottom: 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--auth-border);
  border-left-width: 3px;
  border-radius: .6rem;
  background: rgba(16,22,37,.9);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--auth-text-soft);
}
.auth-alert-error { border-left-color: #d46a62; }
.auth-alert-notice { border-left-color: #6da17a; }

.auth-tier-list { display: grid; gap: .6rem; }
.auth-tier-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem;
  border: 1px solid var(--auth-border);
  border-radius: .6rem;
  background: rgba(5,9,18,.22);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.auth-tier-option:hover { border-color: var(--auth-border-strong); }
.auth-tier-option:has(input:checked) { border-color: var(--auth-gold-line); background: var(--auth-gold-soft); }
.auth-tier-option input { flex: none; margin-top: .2rem; accent-color: var(--auth-gold); }
.auth-tier-copy { display: block; flex: 1; min-width: 0; color: var(--auth-muted); font-size: .75rem; line-height: 1.45; }
.auth-tier-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .15rem; }
.auth-tier-title b { color: var(--auth-text); font-size: .86rem; font-weight: 600; }
.auth-tier-title strong { color: var(--auth-gold); font-size: .8rem; font-weight: 500; }

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem;
  border: 1px solid var(--auth-border);
  border-radius: .6rem;
  background: var(--auth-panel-2);
  color: var(--auth-text-soft);
  font-size: .78rem;
  line-height: 1.5;
}
.auth-consent input { flex: none; margin-top: .17rem; accent-color: var(--auth-gold); }

.auth-legal { max-width: 27rem; margin: 1.35rem auto 0; text-align: center; font-size: .68rem; line-height: 1.55; color: var(--auth-faint); }
.auth-legal p { margin: 0; }
.auth-legal p + p { display: flex; justify-content: center; gap: .5rem; margin-top: .45rem; }
.auth-legal a { color: var(--auth-muted); text-decoration: underline; text-decoration-color: rgba(255,255,255,.16); text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--auth-text-soft); }

.onboarding-progress { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 1.75rem; }
.onboarding-step { display: flex; align-items: flex-start; }
.onboarding-step-content { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.onboarding-connector { width: clamp(2.5rem, 10vw, 4rem); height: 1px; margin-top: .85rem; background: rgba(255,255,255,.13); }
.onboarding-connector.is-complete { background: var(--auth-gold-line, rgba(232,200,125,.34)); }
.onboarding-marker { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(194,200,218,.5); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .65rem; font-weight: 500; }
.onboarding-marker.is-active { border-color: var(--auth-gold-line, rgba(232,200,125,.34)); background: var(--auth-gold-soft, rgba(232,200,125,.12)); color: var(--auth-gold, #e8c87d); }
.onboarding-marker.is-complete { border-color: var(--auth-gold, #e8c87d); background: var(--auth-gold, #e8c87d); color: #1a1408; }
.onboarding-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(130,138,163,.55); }
.onboarding-label.is-current { color: var(--auth-text-soft, #c2c8da); }

@media (max-width: 560px) {
  .auth-content { padding: 1.5rem 1rem 2rem; }
  .auth-brand-row { margin-bottom: 1.5rem; }
  .auth-card { padding: 1.35rem 1.15rem; }
  .auth-heading { margin-bottom: 1.35rem; }
  .auth-heading h1 { font-size: 2rem; }
  .auth-tier-title { display: block; }
  .auth-tier-title strong { display: block; margin-top: .1rem; }
  .auth-card-footer { flex-wrap: wrap; }
}

/* Constellation animation */
.star-node {
  animation: twinkle 6s ease-in-out infinite;
}

.star-node:nth-child(1) { animation-delay: 0s; animation-duration: 7s; }
.star-node:nth-child(2) { animation-delay: -2.1s; animation-duration: 5s; }
.star-node:nth-child(3) { animation-delay: -4.3s; animation-duration: 8s; }
.star-node:nth-child(4) { animation-delay: -1.7s; animation-duration: 6s; }
.star-node:nth-child(5) { animation-delay: -3.8s; animation-duration: 9s; }
.star-node:nth-child(6) { animation-delay: -0.5s; animation-duration: 7s; }
.star-node:nth-child(7) { animation-delay: -5.2s; animation-duration: 5.5s; }
.star-node:nth-child(8) { animation-delay: -2.9s; animation-duration: 8s; }
.star-node:nth-child(9) { animation-delay: -6.1s; animation-duration: 6.5s; }
.star-node:nth-child(10) { animation-delay: -1.3s; animation-duration: 7.5s; }
.star-node:nth-child(11) { animation-delay: -4.6s; animation-duration: 5s; }
.star-node:nth-child(12) { animation-delay: -3.2s; animation-duration: 9s; }
.star-node:nth-child(13) { animation-delay: -0.8s; animation-duration: 6s; }
.star-node:nth-child(14) { animation-delay: -5.7s; animation-duration: 7s; }
.star-node:nth-child(15) { animation-delay: -2.5s; animation-duration: 8.5s; }

.star-bright {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.star-glow {
  animation: pulse-glow 10s ease-in-out infinite;
}

.star-glow:nth-child(2) { animation-delay: -3s; }
.star-glow:nth-child(3) { animation-delay: -7s; }

.constellation-lines line {
  animation: line-fade 12s ease-in-out infinite;
}

.constellation-lines line:nth-child(odd) { animation-delay: -4s; }
.constellation-lines line:nth-child(3n) { animation-delay: -8s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; r: 6; }
  50% { opacity: 0.8; r: 9; }
}

@keyframes line-fade {
  0%, 100% { stroke-opacity: 0.25; }
  50% { stroke-opacity: 0.4; }
}

/* Prose typography (replaces @tailwindcss/typography) */
.prose {
  line-height: 1.75;
}

/* Optimal reading width for opinion text (~63 chars/line with Lora at prose-sm) */
/* (Legacy opinion measure/color rules removed — the consolidated
   long-read typography block above owns these now.) */

.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose p:first-child {
  margin-top: 0;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1em;
  margin: 1.25em 0;
  font-style: italic;
  color: #4b5563;
}

.dark .prose blockquote {
  border-color: rgba(147, 197, 253, 0.25);
  color: #94a3b8;
}

.prose em {
  font-style: italic;
}

.prose strong {
  font-weight: 600;
}

.prose ul, .prose ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin: 0.25em 0;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.prose h1 { font-size: 1.5em; }
.prose h2 { font-size: 1.25em; }
.prose h3 { font-size: 1.125em; }

.prose-sm {
  font-size: 0.875rem;
}

/* CourtListener opinion HTML rendering */
.opinion-html pre {
  white-space: pre-line;
  word-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.75;
  margin: 0;
}

.opinion-html a {
  color: var(--color-link);
  text-decoration: underline;
}

.opinion-html a:hover {
  color: #1d4ed8;
}

.dark .opinion-html a:hover {
  color: #93c5fd;
}

/* ── Sidebar Tab Buttons ────────────────────────────────── */

/* "Summary ready" invitation dot: hide the instant the tab goes active —
   the server clears searches.summary_viewed_at on the same request, but
   the sidebar DOM isn't re-rendered by a frame-only tab switch. */
.tab-btn.tab-active .summary-ready-dot,
.mobile-tab-btn.tab-active .summary-ready-dot {
  display: none;
}

#tab-sidebar .tab-btn,
.workspace-rail .tab-btn {
  border-left-width: 3px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#tab-sidebar .tab-btn svg {
  color: var(--color-gray-400);
  transition: color 0.15s ease;
}

.workspace-rail .tab-btn svg {
  color: currentColor;
  transition: color 0.15s ease;
}

.sidebar-hover-row:hover,
#tab-sidebar .tab-btn:hover:not(:disabled):not(.tab-active),
.workspace-rail a.tab-btn:not(.tab-active):hover {
  border-left-color: var(--color-authority-line);
  background: color-mix(in srgb, var(--color-authority) 7%, var(--color-surface));
}

#tab-sidebar .tab-btn:hover:not(:disabled):not(.tab-active),
.workspace-rail a.tab-btn:not(.tab-active):hover {
  color: var(--color-ink);
}

.sidebar-filter-active,
.sidebar-filter-active:hover {
  border-left-color: var(--color-authority);
  background: var(--color-authority-soft);
}

.sidebar-filter-active:hover {
  background: var(--color-authority-soft-hover);
}

#tab-sidebar .tab-btn:hover:not(:disabled):not(.tab-active) svg,
.workspace-rail a.tab-btn:not(.tab-active):hover svg {
  color: var(--color-authority);
}

/* Hovering the selected destination should strengthen its existing gilt
   wash, not switch it to the generic cool hover trough. */
#tab-sidebar .tab-btn.tab-active:hover,
.workspace-rail .tab-btn.tab-active:hover,
.dark #tab-sidebar .tab-btn.tab-active:hover,
.dark .workspace-rail .tab-btn.tab-active:hover {
  background: var(--color-authority-soft-hover);
}

/* Active tab = gilt (authority/brand). Token-derived, so no .dark twin. */
#tab-sidebar .tab-btn.tab-active svg,
.workspace-rail .tab-btn.tab-active svg {
  color: var(--color-authority);
}

#tab-sidebar .tab-btn.tab-active .tab-count,
.workspace-rail .tab-btn.tab-active .tab-count {
  background: var(--color-authority-soft);
  color: var(--color-authority);
}

/* Desktop matter navigation is an architectural rail: flush, quiet, and
   continuous with the workspace instead of presented as another card. */
main:has(#matter-workspace) {
  padding-bottom: 0;
}

.workspace-rail {
  transition: width 160ms ease;
}

.workspace-rail-toggle-row {
  position: absolute;
  top: 0.5rem;
  right: -0.9375rem;
  z-index: 45;
}

.workspace-rail-toggle {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-line);
  border-radius: 9999px;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

html:not(.matter-rail-collapsed) .workspace-rail:not(.is-collapsed) .workspace-rail-version > summary,
html:not(.matter-rail-collapsed) .workspace-rail:not(.is-collapsed) #matter-sidebar-tabs > .tab-btn:first-child {
  padding-right: 2.5rem;
}

html.matter-rail-collapsed .workspace-rail,
.workspace-rail.is-collapsed {
  width: 3.75rem;
}

html.matter-rail-collapsed .workspace-rail-version,
.workspace-rail.is-collapsed .workspace-rail-version {
  display: none;
}

html.matter-rail-collapsed .workspace-rail .tab-btn,
.workspace-rail.is-collapsed .tab-btn {
  position: relative;
  min-height: 2.5rem;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

html.matter-rail-collapsed .workspace-rail .tab-btn > span:first-child,
.workspace-rail.is-collapsed .tab-btn > span:first-child {
  gap: 0;
  font-size: 0;
}

html.matter-rail-collapsed .workspace-rail .tab-count,
html.matter-rail-collapsed .workspace-rail .tab-btn > svg,
.workspace-rail.is-collapsed .tab-count,
.workspace-rail.is-collapsed .tab-btn > svg {
  display: none;
}

html.matter-rail-collapsed .workspace-rail .workspace-rail-utility-label,
html.matter-rail-collapsed .workspace-rail .workspace-rail-utility-shortcut,
html.matter-rail-collapsed .workspace-rail .workspace-rail-wordmark,
.workspace-rail.is-collapsed .workspace-rail-utility-label,
.workspace-rail.is-collapsed .workspace-rail-utility-shortcut,
.workspace-rail.is-collapsed .workspace-rail-wordmark {
  display: none;
}

html.matter-rail-collapsed .workspace-rail .workspace-rail-utility,
.workspace-rail.is-collapsed .workspace-rail-utility {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

html.matter-rail-collapsed .workspace-rail .workspace-rail-brand,
.workspace-rail.is-collapsed .workspace-rail-brand {
  justify-content: center;
  padding-left: 0;
}

html.matter-rail-collapsed .workspace-rail .summary-ready-dot,
.workspace-rail.is-collapsed .summary-ready-dot {
  position: absolute;
  top: 0.45rem;
  right: 1rem;
}

.workspace-rail .tab-btn {
  border-left-width: 2px;
}

.workspace-rail .tab-count {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-faint);
}

.workspace-rail .tab-btn.tab-active .tab-count {
  background: transparent;
}

/* ── Mobile bottom tab bar ──────────────────────────────── */
#matter-mobile-tabs {
  left: 1rem;
  right: calc(1rem + var(--app-scrollbar-width, 0px));
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.mobile-tab-dock {
  min-height: 60px;
  overflow: hidden;
  padding: 0.25rem;
  border: 1px solid var(--color-authority-line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-raised) 94%, var(--color-authority-soft));
  box-shadow: 0 5px 16px color-mix(in srgb, var(--color-ink) 12%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-tab-dock .mobile-tab-btn {
  min-height: 52px;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-tab-dock a.mobile-tab-btn:hover {
  background: var(--color-sunken);
  color: var(--color-ink);
}

.mobile-tab-btn.tab-active {
  color: var(--color-authority);
}
.mobile-tab-dock .mobile-tab-btn.tab-active {
  background: var(--color-authority-soft);
}
.mobile-tab-btn.tab-active svg {
  stroke-width: 2;
}
.dark .mobile-tab-btn {
  color: var(--color-gray-500);
}
.dark .mobile-tab-btn.tab-active {
  color: var(--color-authority);
}
.dark .mobile-tab-dock {
  border-color: var(--color-authority-line);
}
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hide scrollbar on mobile tab bar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom tooltips */
.app-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.app-tooltip.visible {
  opacity: 1;
}

.app-tooltip.tooltip-fact {
  background: #065f46;
  color: #d1fae5;
}

.app-tooltip.tooltip-reasoning {
  background: #581c87;
  color: #f3e8ff;
}

.app-tooltip.tooltip-holding {
  background: #713f12;
  color: #fef9c3;
}

.app-tooltip.tooltip-default {
  background: #1f2937;
  color: #f3f4f6;
}

.tooltip-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin-right: 4px;
  margin-bottom: 4px;
  vertical-align: middle;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip-pill-element {
  background: rgba(255, 255, 255, 0.2);
}

.tooltip-pill-factor {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 500;
}

.tooltip-text {
  display: block;
}

/* Workspace interaction baseline. Mouse users keep the compact, quiet
   controls; keyboard and touch users get visible focus and real targets.
   These selectors intentionally cover the case reader inside tab_content as
   well as the surrounding matter workspace. */
:where(#matter-workspace, turbo-frame#tab_content)
  :where(a[href], button, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
[data-tooltip]:focus-visible {
  outline: 2px solid var(--color-authority);
  outline-offset: 2px;
}

:where(#matter-workspace, turbo-frame#tab_content)
  :where(a[href], button, summary) {
  touch-action: manipulation;
}

.touch-target-icon,
.touch-target-inline,
.touch-target-compact,
.touch-tooltip-target {
  position: relative;
}

@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  /* Required actions cannot wait for a hover state on touch hardware. */
  .hover-reveal-action {
    opacity: 1 !important;
  }

  .touch-target-icon,
  .touch-tooltip-target {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Inline cite/provenance marks are deliberately a little smaller so a
     citation remains readable, while still clearing WCAG's 24px minimum. */
  .touch-target-inline {
    min-width: 32px;
    min-height: 32px;
  }

  .touch-target-compact,
  .case-filter-chip,
  .workspace-action,
  #tab-bar-mobile .tab-btn {
    min-height: 44px;
  }

  .touch-target-compact,
  .workspace-action {
    min-width: 44px;
  }

  .outline-toolbar .outline-toolbar-control {
    min-width: 0;
    min-height: 36px;
  }

  .mobile-tab-btn {
    min-height: 48px;
  }

  /* A sidebar summary may be clamped for mouse users who can hover for its
     title. Touch users get the complete text in the flow instead. */
  [data-argument-summary] {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* ── Skeleton loading cards ────────────────────────────────── */
.skeleton-bone {
  background: #dfe2e8;
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;
}

.skeleton-bone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: shimmer 1.8s ease-in-out infinite;
}

.dark .skeleton-bone {
  background: rgba(147, 197, 253, 0.08);
}

.dark .skeleton-bone::after {
  background: linear-gradient(90deg, transparent 0%, rgba(147, 197, 253, 0.08) 50%, transparent 100%);
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Case-sorting loading animation ──────────────────────── */
.sorting-anim {
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  height: 24rem;
  position: relative;
  /* Clip content AND fade edges */
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 90%, transparent 100%);
}

.sorting-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  will-change: transform;
}

.sorting-card-inner {
  background: var(--color-sunken);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.06);
}

.sorting-card-accent {
  border-left: 3px solid var(--color-blue-200, #bfdbfe);
}

.sorting-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sorting-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sorting-card-score {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  background: var(--color-teal-100, #ccfbf1);
  color: var(--color-teal-800, #115e59);
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
}

.sorting-card-cite {
  font-size: 0.6875rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

.sorting-card-holding {
  font-size: 0.75rem;
  color: #4b5563;
  margin-top: 0.25rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sorting-card-snippet {
  margin-top: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sorting-snippet-line {
  height: 0.375rem;
  background: #dfe2e8;
  border-radius: 0.125rem;
}

.sorting-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.sorting-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.5rem 0.0625rem 0.3125rem;
  border-radius: 9999px;
  color: white;
  background: var(--pill-color, #6b7280);
}

.sorting-pill-check {
  width: 0.6875rem;
  height: 0.6875rem;
}

/* Dark mode */
.dark .sorting-card-inner {
  background: #131c2b;
  border-color: rgba(147, 197, 253, 0.1);
}
.dark .sorting-card-accent { border-left-color: rgba(147, 197, 253, 0.2); }
.dark .sorting-card-name { color: #e5e7eb; }
.dark .sorting-card-cite { color: #9ca3af; }
.dark .sorting-card-holding { color: #9ca3af; }
/* --color-teal-100/800 aren't theme tokens, so the score pill's var()
   fallbacks always resolve to the light values — soften it for dark. */
.dark .sorting-card-score { background: rgba(45, 212, 191, 0.15); color: #5eead4; }
.dark .sorting-snippet-line { background: rgba(147, 197, 253, 0.08); }

/* Tab panel fade-in when shown */
[data-tab-panel]:not(.hidden) {
  animation: tab-fade-in 150ms ease-out;
}
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile reader mode — nav and tab bar scroll away, only case info sticks */
@media (max-width: 767px) {
  body.reader-open > nav {
    display: none !important;
  }
  body.reader-open #tab-bar-mobile,
  body.reader-open #matter-header,
  body.reader-open #matter-mobile-tabs {
    display: none !important;
  }
  body.reader-open #opinion-header {
    position: relative !important;
    top: auto !important;
    z-index: 1;
  }
  body.reader-open .page-marker {
    top: var(--page-marker-top, 0px) !important;
  }
  .mobile-reader-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 0 var(--color-gray-50);
  }
  .dark .mobile-reader-header {
    border-bottom-color: rgba(147, 197, 253, 0.15);
  }
}

/* ── Print styles ────────────────────────────────────────── */
/* Designed for "Print Case" with true reporter pagination.
   .page-marker divs already exist at reporter page boundaries with
   data-page attributes. Adding page-break-before on them produces
   one printed page per reporter page.

   Page-range printing: add .print-page-hidden to content outside
   the desired range before calling window.print(). The CSS below
   hides those elements. */

@media print {
  @page { margin: 0.75in 1in; }

  /* ── Hide app chrome ── */
  nav, #tab-sidebar, #matter-sidebar, #matter-header, #matter-mobile-tabs,
  #tab-bar-mobile, #reporter-switcher, #highlights-container,
  #native-page-bubble, #mobile-reader-spacer, #card-ticker, #card-ticker-source,
  #analysis-banner, .app-tooltip, .print-hide { display: none !important; }

  /* ── Force light theme with pure black text ── */
  body, body.dark { background: white !important; color: #000 !important; }
  .prose, .prose *, .opinion-html, .opinion-html *, #opinion-body, #opinion-body * { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline !important; }

  /* ── Opinion reader: fill the page ── */
  [data-tab-panel] { display: none !important; }
  #opinion-reader-panel, #opinion-reader-panel.hidden {
    display: block !important;
    position: static !important;
    width: 100% !important;
    overflow: visible !important;
  }
  #opinion_reader { overflow: visible !important; }
  #opinion-header { display: none !important; }
  #opinion-body {
    padding: 0 !important;
    overflow: visible !important;
  }
  #opinion-body .prose, #opinion-body .opinion-html {
    max-width: none !important;
    margin: 0 !important;
  }
  #opinion-body .reader-modal-pages {
    display: block !important;
    width: 100% !important;
  }
  #opinion-body .reader-modal-page {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  /* ── Per-page sections (built by print_case_controller) ── */
  .print-pages {
    /* Container for restructured per-page sections */
  }
  /* Each section = one reporter page = one printed page.
     min-height fills the page; content area on letter paper
     with 0.75in top/bottom margins = 9.5in. */
  .print-page {
    page-break-after: always;
    break-after: page;
  }
  .print-page-first {
    display: flex;
    flex-direction: column;
    min-height: 9in;
  }
  .print-page:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ── Page markers inside sections ── */
  .page-marker {
    position: static !important;
    top: auto !important;
    display: flex !important;
    background: none !important;
    border: none !important;
    border-bottom: 0.5pt solid #999 !important;
    padding: 0 0 3pt 0 !important;
    margin: 0 0 9pt 0 !important;
    font-size: 9pt !important;
    color: #555 !important;
    z-index: auto !important;
    page-break-before: auto !important;
    break-before: auto !important;
    column-span: all;
  }
  .page-marker.hidden { display: none !important; }
  .page-marker .sm\:hidden { display: none !important; }
  .page-marker .hidden.sm\:inline { display: inline !important; }

  /* ── Typography — user-configurable via Settings > Print Layout ── */
  body { font-family: var(--print-font, Georgia, "Times New Roman", serif) !important; font-size: var(--print-size, 11pt) !important; line-height: var(--print-line-spacing, 1.4) !important; }
  .prose, .prose-sm { font-size: var(--print-size, 11pt) !important; line-height: var(--print-line-spacing, 1.4) !important; }
  .print-page:not(.print-page-first) { column-count: var(--print-columns, 1); column-gap: 0.3in; }
  .prose p, .opinion-html p { orphans: 3; widows: 3; margin-top: 0.75em !important; margin-bottom: 0.75em !important; text-align: var(--print-align, left); }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }

  /* ── Packet: controls hidden, cases flow continuously ── */
  .print-packet-controls { display: none !important; }
  .print-packet-body { background: white !important; }
  .print-packet-content { overflow: visible !important; }

  /* ── Packet cover page ── */
  .packet-cover-page {
    display: flex;
    flex-direction: column;
    min-height: 9in;
  }
  .packet-cover-top {
    padding: 1in 0 0.5in;
    border-bottom: 1pt solid #ccc;
    margin-bottom: 0.4in;
  }
  .packet-cover-matter {
    font-size: 18pt;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin-bottom: 0.1in;
  }
  .packet-cover-meta {
    font-size: 11pt;
    color: #666;
    margin-bottom: 0.05in;
  }
  .packet-cover-date {
    font-size: 10pt;
    color: #999;
  }
  .packet-cover-facts {
  }
  .packet-cover-facts-label {
    font-size: 9pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 0.1in;
  }
  .packet-cover-facts-text {
    font-size: 10.5pt;
    line-height: 1.5;
    color: #333;
  }
  .packet-cover-footer {
    border-top: 0.5pt solid #ccc;
    padding-top: 0.15in;
    text-align: left;
    margin-top: auto;
  }
  .packet-cover-brand {
    font-size: 11pt;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.05in;
  }
  .packet-cover-disclaimer {
    font-size: 8pt;
    color: #999;
    line-height: 1.4;
  }

  /* ── Table of cases ── */
  .packet-toc {
    padding: 0.3in 0;
  }
  .packet-toc-title {
    font-size: 14pt;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.3in;
    padding-bottom: 0.1in;
    border-bottom: 1pt solid #ccc;
  }
  .packet-toc-table {
    width: 100%;
    border-collapse: collapse;
  }
  .packet-toc-row td {
    padding: 4pt 0;
    vertical-align: top;
    border-bottom: 0.5pt solid #eee;
  }
  .packet-toc-num {
    width: 1.5em;
    font-size: 10pt;
    color: #999;
    text-align: right;
    padding-right: 6pt !important;
  }
  .packet-toc-case {
    font-size: 10pt;
  }
  .packet-toc-name {
    font-weight: 600;
    color: #111;
    display: block;
  }
  .packet-toc-cite {
    font-size: 9pt;
    color: #666;
    display: block;
  }
  .packet-toc-elements {
    display: block;
    font-size: 8pt;
    color: #888;
    margin-top: 1pt;
  }
  .packet-toc-score {
    width: 3em;
    text-align: right;
    font-size: 10pt;
    font-weight: 600;
    color: #555;
  }

  /* Each case in the packet starts on a new page */
  .packet-case + .packet-case {
    page-break-before: always;
    break-before: page;
  }

  /* Case title page */
  .packet-case-header {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .packet-title {
    text-align: center;
    padding: 0.3in 0 0.4in;
    display: flex;
    flex-direction: column;
    min-height: 9in;
  }
  .packet-title-name {
    font-size: 16pt;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin-bottom: 0.15in;
  }
  .packet-title-cite {
    font-size: 13pt;
    color: #333;
    margin-bottom: 0.15in;
  }
  .packet-title-court {
    font-size: 11pt;
    color: #666;
    margin-bottom: 0.3in;
  }
  .packet-title-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4pt;
    margin-bottom: 0.4in;
  }
  .packet-title-highlights {
    text-align: left;
    max-width: none;
    margin: 0;
    border-top: 0.5pt solid #ccc;
    padding-top: 0.25in;
    column-count: var(--print-columns, 1);
    column-gap: 0.3in;
  }
  .packet-highlight {
    font-size: 9.5pt;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0.15in;
  }
  .packet-highlight-label {
    font-weight: 600;
    color: #555;
  }
  .packet-highlight-page {
    font-weight: 400;
    color: #888;
    font-style: italic;
  }

  .packet-opinion-body {
    overflow: visible !important;
    padding: 0 !important;
  }
  .packet-opinion-body .prose {
    max-width: none !important;
    margin: 0 !important;
  }

  /* ── Highlights: print-friendly ── */
  [data-highlight-type] {
    background: none !important;
    text-decoration: underline;
    text-decoration-color: #999;
    text-underline-offset: 2pt;
  }
}

/* ----- Embedded outline graph (matter outline tab) ----- */

.graph-embed {
  position: relative;
  border-radius: 0.875rem;
  background: linear-gradient(180deg, #0a0e1a 0%, #111827 50%, #1a1f3a 100%);
  border: 1px solid rgba(147, 197, 253, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 12px 36px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.graph-embed .graph-demo-scroll {
  padding: 1rem 1rem 1.25rem;
  overflow: hidden;
  height: calc(100vh - 14rem);
  height: calc(100dvh - 14rem);
  min-height: 380px;
}

.graph-embed--empty {
  padding: 3rem 2rem;
  text-align: center;
}
.graph-empty-message p {
  margin: 0;
  color: rgba(186, 211, 245, 0.65);
}
.graph-empty-message .graph-empty-hint {
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  color: rgba(186, 211, 245, 0.45);
}
.graph-empty-message strong {
  color: rgba(186, 211, 245, 0.85);
  font-weight: 600;
}

/* Compact-mode tweaks for the smaller embedded nodes */
.graph-embed .node              { padding: 0.3rem 0.6rem; border-radius: 10px; }
.graph-embed .node[data-collapse-key] { padding-right: 1.4rem; }
.graph-embed .node-title        { font-size: 0.78rem; }
.graph-embed .node-label        { font-size: 0.5rem; margin-bottom: 0; }
.graph-embed .node--issue       { padding: 0.55rem 0.85rem; }
.graph-embed .node--issue .node-title { font-size: 0.92rem; }
.graph-embed .node--factor      { padding: 0.25rem 0.6rem; }
.graph-embed .node--factor .node-title { font-size: 0.72rem; }
.graph-embed .node--case        { padding: 0.2rem 0.55rem; gap: 0.45rem; }
.graph-embed .node--case .case-name { font-size: 0.65rem; }
.graph-embed .node--case .case-meta { font-size: 0.55rem; }
.graph-embed .node-chevron      { right: 0.4rem; width: 10px; height: 10px; }
.graph-embed .node-hidden-count { font-size: 0.55rem; right: 1.3rem; bottom: 0.2rem; }

/* Argument graph modal */

.graph-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: graphOverlayIn 0.18s ease-out;
}

@keyframes graphOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.graph-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(6px);
}

.case-map-modal {
  position: relative;
  width: min(1100px, calc(100vw - 4rem));
  height: min(680px, calc(100dvh - 6rem));
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 0.875rem;
  background: #1e293b;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.32);
}

.case-map-modal-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 0.8rem 4rem 0.8rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.45);
}

.case-map-modal-header h2 {
  color: #f8fafc;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
}

.case-map-modal-header p {
  margin-top: 0.15rem;
  color: #94a3b8;
  font-size: 0.72rem;
}

.case-map-modal-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.case-map-modal-canvas > svg {
  width: 100%;
  height: 100%;
}

html:not(.dark) .case-map-modal {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
  box-shadow: 0 25px 60px rgba(71, 55, 31, 0.2);
}

html:not(.dark) .case-map-modal-header {
  border-color: var(--color-line);
  background: var(--color-raised);
}

html:not(.dark) .case-map-modal-header h2 { color: var(--color-ink); }
html:not(.dark) .case-map-modal-header p { color: var(--color-muted); }

@media (max-width: 640px) {
  .case-map-overlay { padding: 0.75rem; }
  .case-map-modal {
    width: calc(100vw - 1.5rem);
    height: calc(100dvh - 1.5rem);
    min-height: 0;
  }
  .case-map-modal-header p { max-width: 16rem; }
}

.graph-overlay .graph-embed--modal {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.outline-graph-modal .graph-embed--modal {
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The argument graph gets substantially more useful as its hierarchy gains
   room to spread out. Keep the shared Map modal compact, but let Graph use
   nearly the full viewport with a small visual margin. */
.outline-graph-modal {
  width: min(1680px, calc(100vw - 3rem));
  height: min(1050px, calc(100dvh - 3rem));
}

@media (max-width: 640px) {
  .outline-graph-modal {
    width: calc(100vw - 1.5rem);
    height: calc(100dvh - 1.5rem);
  }
}

.graph-overlay .graph-embed--modal .graph-demo-scroll {
  flex: 1;
  overflow: hidden;
  padding: 1.5rem 1.5rem 2rem;
}

.graph-overlay-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 30;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(147, 197, 253, 0.22);
  color: rgba(186, 211, 245, 0.8);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.graph-overlay-close:hover {
  color: #f1f5f9;
  background: rgba(30, 41, 90, 0.8);
  border-color: rgba(147, 197, 253, 0.5);
}
.graph-overlay-close svg { pointer-events: none; }

/* ----- Graph demo (/graphdemo) ----- */

.graph-demo {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.graph-demo-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.5rem 1.25rem;
  flex-wrap: wrap;
}

.graph-demo-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.55);
  font-weight: 600;
}

.graph-demo-title {
  margin: 0.25rem 0 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}

.graph-demo-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: rgba(186, 211, 245, 0.7);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  backdrop-filter: blur(10px);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 0.15rem;
}
.legend-dot--met    { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.legend-dot--notmet { background: transparent; border: 1px dashed #f87171; }

.legend-divider {
  width: 1px;
  height: 14px;
  background: rgba(147, 197, 253, 0.25);
  margin: 0 0.25rem;
}

.legend-hint {
  font-style: italic;
  color: rgba(186, 211, 245, 0.55);
}

.graph-demo-scroll {
  position: relative;
  z-index: 10;
  flex: 1;
  overflow: hidden;
  padding: 1rem 2.5rem 3rem;
}

.graph-canvas {
  position: relative;
}

.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.node {
  position: absolute;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(147, 197, 253, 0.18);
  backdrop-filter: blur(12px);
  padding: 0.4rem 0.75rem;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(59, 130, 246, 0.05);
  transition:
    left 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  will-change: left, top, transform;
}

.node:hover {
  transform: translateY(-1px);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(59, 130, 246, 0.18);
}

.node[data-collapse-key] { cursor: pointer; padding-right: 1.7rem; }
.node--case { color: inherit; text-decoration: none; }
a.node--case { cursor: pointer; }
a.node--case:hover {
  transform: translateY(-1px);
  border-color: var(--accent, rgba(147, 197, 253, 0.55));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 30px var(--accent, rgba(59, 130, 246, 0.18));
}
a.node--case:hover .case-name { color: #ffffff; }

.node-chevron {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  color: rgba(186, 211, 245, 0.55);
  transition: transform 0.18s ease, color 0.18s ease;
}
.node-chevron svg { width: 100%; height: 100%; display: block; }
.node-chevron.is-collapsed { transform: translateY(-50%) rotate(-90deg); color: rgba(186, 211, 245, 0.85); }

.node--issue .node-chevron { right: 0.8rem; }

.node-hidden-count {
  position: absolute;
  bottom: 0.25rem;
  right: 1.6rem;
  font-size: 0.6rem;
  color: rgba(186, 211, 245, 0.55);
  font-style: italic;
}

/* Detail content shown only at higher zoom (semantic zoom).
   max-height in em is more reliable than -webkit-line-clamp inside
   nested flex containers (line-clamp can fail to constrain height
   when the box is a child of a flex item, which leaks content into
   adjacent nodes and breaks the measurement-based layout). */
.node-desc {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(186, 211, 245, 0.75);
  display: block;
  max-height: calc(1.35em * 3);
  overflow: hidden;
}
.node--issue .node-desc {
  font-size: 0.78rem;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  max-height: calc(1.35em * 4);
}
.node--factor .node-desc {
  font-size: 0.66rem;
  margin-top: 0.2rem;
  max-height: calc(1.35em * 2);
}
.case-holding {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1.3;
  color: rgba(186, 211, 245, 0.7);
  display: block;
  max-height: calc(1.3em * 2);
  overflow: hidden;
}

.node.is-collapsed {
  background: rgba(15, 23, 42, 0.55);
  border-style: dashed;
  border-color: rgba(147, 197, 253, 0.28);
}

.node-label {
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.55);
  font-weight: 600;
  margin-bottom: 0.05rem;
}

.node-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.15;
  color: #f1f5f9;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.node-meta {
  font-size: 0.7rem;
  color: rgba(186, 211, 245, 0.6);
  margin-top: 0.15rem;
}

.node--issue {
  background: linear-gradient(135deg, rgba(30, 41, 90, 0.85), rgba(15, 23, 42, 0.85));
  border-color: rgba(147, 197, 253, 0.35);
  padding: 0.7rem 1rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(96, 165, 250, 0.18);
}
.node--issue .node-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.25;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.node--issue .node-label { color: rgba(147, 197, 253, 0.7); }

.node--element {
  border-left: 3px solid var(--accent, #60a5fa);
  background:
    linear-gradient(90deg, var(--accent-fill, rgba(59,130,246,0.12)) 0%, rgba(15, 23, 42, 0.78) 60%);
}
.node--element .node-label { color: var(--accent, #60a5fa); opacity: 0.85; }

.node--factor {
  padding: 0.3rem 0.7rem;
}
.node--factor .node-title {
  font-size: 0.78rem;
  font-weight: 500;
  -webkit-line-clamp: 2;
}
.node--factor .node-label { display: none; }
.node--factor::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent, #60a5fa);
  transform: translateY(-50%);
  box-shadow: 0 0 12px var(--accent, #60a5fa);
}

.node--case {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.65rem;
  background: rgba(15, 23, 42, 0.65);
}

.case-marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent, #60a5fa);
  box-shadow: 0 0 10px var(--accent, #60a5fa);
}

.node--case-not_met .case-marker {
  background: transparent;
  border: 1px dashed var(--accent, #f87171);
  box-shadow: none;
}

.node--case-not_met {
  border-style: dashed;
  border-color: rgba(147, 197, 253, 0.22);
}

/* "Related cases" column — high-scoring cases that aren't directly
   cited by the synthesis. Dimmer than the primary cases. */
.node--extra {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(147, 197, 253, 0.13);
  opacity: 0.78;
}
.node--extra .case-marker {
  width: 6px;
  height: 6px;
  opacity: 0.7;
}
.node--extra .case-name {
  font-weight: 500;
  font-size: 0.66rem;
  color: rgba(241, 245, 249, 0.85);
}
.node--extra .case-meta {
  font-size: 0.55rem;
  color: rgba(186, 211, 245, 0.45);
}
a.node--extra:hover {
  opacity: 1;
  border-color: var(--accent, rgba(147, 197, 253, 0.5));
}

.node .case-body { min-width: 0; flex: 1; }

.node .case-name {
  font-size: 0.72rem;
  font-weight: 600;
  font-style: italic;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.node .case-meta {
  font-size: 0.6rem;
  color: rgba(186, 211, 245, 0.55);
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-meta span + span::before {
  content: '·';
  margin-right: 0.4rem;
  opacity: 0.6;
}

/* The graph is night-sky chrome in dark mode, but it should belong to the
   paper workspace in light mode. These overrides cover both the embedded
   graph and the fullscreen graph created dynamically by graph_controller. */
html:not(.dark) .graph-embed {
  background: linear-gradient(180deg, var(--color-raised) 0%, var(--color-canvas) 100%);
  border-color: var(--color-line-strong);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 12px 32px rgba(71, 55, 31, 0.10);
}

html:not(.dark) .graph-empty-message p { color: var(--color-muted); }
html:not(.dark) .graph-empty-message .graph-empty-hint { color: var(--color-faint); }
html:not(.dark) .graph-empty-message strong { color: var(--color-ink); }

html:not(.dark) .graph-overlay-close {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-color: var(--color-line-strong);
  color: var(--color-muted);
  box-shadow: 0 1px 3px rgba(71, 55, 31, 0.08);
}

html:not(.dark) .graph-overlay-close:hover {
  color: var(--color-ink);
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
}

html:not(.dark) .graph-overlay-backdrop {
  background: rgba(15, 23, 42, 0.38);
}

html:not(.dark) .node {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-canvas));
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    0 6px 18px rgba(71, 55, 31, 0.11);
}

html:not(.dark) .node:hover,
html:not(.dark) a.node--case:hover {
  border-color: color-mix(in srgb, var(--accent, var(--color-accent)) 45%, var(--color-line));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 10px 24px rgba(71, 55, 31, 0.15);
}

html:not(.dark) a.node--case:hover .case-name { color: var(--color-ink); }
html:not(.dark) .node-chevron,
html:not(.dark) .node-hidden-count { color: var(--color-faint); }
html:not(.dark) .node-chevron.is-collapsed { color: var(--color-muted); }
html:not(.dark) .node-desc,
html:not(.dark) .case-holding { color: var(--color-muted); }

html:not(.dark) .node.is-collapsed {
  background: color-mix(in srgb, var(--color-canvas) 72%, var(--color-surface));
  border-color: var(--color-line-strong);
}

html:not(.dark) .node-label { color: var(--color-faint); }
html:not(.dark) .node-title,
html:not(.dark) .node .case-name { color: var(--color-ink); }
html:not(.dark) .node-meta,
html:not(.dark) .case-meta { color: var(--color-faint); }

html:not(.dark) .node--issue {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 11%, var(--color-surface)),
    var(--color-surface)
  );
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 10px 28px rgba(30, 58, 95, 0.13);
}
html:not(.dark) .node--issue .node-label { color: var(--color-accent); }

html:not(.dark) .node--element {
  background: linear-gradient(
    90deg,
    var(--accent-fill, color-mix(in srgb, var(--color-accent) 12%, transparent)) 0%,
    var(--color-surface) 65%
  );
}

html:not(.dark) .node--factor::before,
html:not(.dark) .case-marker {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--color-accent)) 18%, transparent);
}

html:not(.dark) .node--case {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-canvas));
}

html:not(.dark) .node--case-not_met {
  border-color: var(--color-line-strong);
}

html:not(.dark) .node--extra {
  background: color-mix(in srgb, var(--color-canvas) 62%, var(--color-surface));
  border-color: var(--color-line);
  opacity: 0.84;
}
html:not(.dark) .node--extra .case-name { color: var(--color-muted); }
html:not(.dark) .node--extra .case-meta { color: var(--color-faint); }



/* Jump-to-highlight flash — the why-surfaced strip's count buttons scroll
   a mark into view and ring it briefly. Gilt outline reads on light, dark,
   and paper surfaces alike. */
.highlight-jump-flash {
  outline: 2px solid var(--color-authority);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Case-reading annotation rail ──────────────────────────────
   Saved notes and generated highlight explanations sit in the opinion's
   right gutter, aligned with their passages. There is no hover-only state:
   every annotation and note action is visible at rest. */
.reader-annotation {
  display: block;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  text-align: left;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  border: 0;
  border-left: 2px solid var(--annotation-line, var(--color-authority-line));
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.5rem 0.625rem;
}
.reader-annotation:disabled {
  cursor: default;
  opacity: 1;
}
#reader-annotations-rail .reader-annotation {
  position: absolute;
  left: 0;
  right: 0;
}
.reader-annotation--note {
  --annotation-line: var(--color-authority);
  position: relative;
  padding-right: 2rem !important;
}
.reader-annotation--fact { --annotation-line: #71806a; }
.reader-annotation--reasoning { --annotation-line: #766c80; }
.reader-annotation--holding { --annotation-line: #8a6b2d; }
.reader-annotation--favors_met { --annotation-line: #55715d; }
.reader-annotation--against_met { --annotation-line: #8a554c; }
.dark .reader-annotation--fact { --annotation-line: #a9c7aa; }
.dark .reader-annotation--reasoning { --annotation-line: #c7bad2; }
.dark .reader-annotation--holding { --annotation-line: #d8bd78; }
.dark .reader-annotation--favors_met { --annotation-line: #a6c8ad; }
.dark .reader-annotation--against_met { --annotation-line: #d7aaa2; }
.reader-reading-modal .reader-annotation--fact { --annotation-line: #71806a; }
.reader-reading-modal .reader-annotation--reasoning { --annotation-line: #766c80; }
.reader-reading-modal .reader-annotation--holding { --annotation-line: #8a6b2d; }
.reader-reading-modal .reader-annotation--favors_met { --annotation-line: #55715d; }
.reader-reading-modal .reader-annotation--against_met { --annotation-line: #8a554c; }
.reader-annotation-label {
  display: block;
  color: var(--color-faint);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reader-annotation-explanation {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-ink);
  font-size: 0.75rem;
  line-height: 1.4;
}
.reader-annotation-meta {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-faint);
  font-size: 0.625rem;
  line-height: 1.35;
}
.reader-note-hovering {
  cursor: help;
}
.reader-hover-annotations-active .highlight-passage {
  cursor: help;
}
.reader-hover-tooltip {
  position: fixed;
  z-index: 140;
  display: none;
  width: max-content;
  max-width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.625rem 0.75rem;
  pointer-events: none;
  color: var(--color-ink);
  background: var(--color-raised);
  border: 1px solid var(--color-line-strong);
  border-radius: 0.5rem;
  box-shadow: 0 5px 16px rgb(0 0 0 / 0.18);
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-align: left;
}
.reader-hover-tooltip.visible {
  display: block;
}
.reader-hover-tooltip-annotation + .reader-hover-tooltip-annotation {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-line);
}
.reader-hover-tooltip-label,
.reader-hover-tooltip-text {
  display: block;
}
.reader-hover-tooltip-label {
  color: var(--color-faint);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.reader-hover-tooltip-text {
  margin-top: 0.125rem;
  color: var(--color-ink);
  font-size: 0.75rem;
  line-height: 1.4;
}
.margin-note-rail-quote {
  font-size: 0.6875rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--color-faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.margin-note-rail-body {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink);
  margin-top: 0.125rem;
  white-space: pre-wrap;
}
.reader-annotation [data-role="margin-note-delete"] {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  opacity: 0.7;
}
::highlight(margin-note-anchor) {
  background-color: color-mix(in srgb, var(--color-authority) 16%, transparent);
}
::highlight(margin-note-flash) {
  background-color: color-mix(in srgb, var(--color-authority) 45%, transparent);
}
/* Rail active: shift the centered prose column left so the notes get a
   real right gutter (annotated-manuscript layout). Toggled by the
   margin_notes controller only when the space is actually there. */
#opinion-body.reading-margin-active .prose {
  margin-inline: 0 auto;
}
.margin-note-rail-element {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.125rem;
  font-size: 0.625rem;
  color: var(--color-faint);
}
.margin-note-rail-element-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  flex-shrink: 0;
}