/*
 * 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.
   ═══════════════════════════════════════════════════════════════ */

/* ── 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-gray-900);
}

.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.6875rem;
  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);
}

/* ── New Search (fact-pattern entry) ─────────────────────────
   Token-driven restyle. Gilt = brand accent (top edge, focus ring,
   selected party, federal switch); judgment colors untouched. Every
   surface rides a semantic token, so no .dark twin is needed. */

/* 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: 1rem;
  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.8;
}
.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;
  padding: 0.875rem 1.25rem 1rem;
}
.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 — segmented pair; selected = gilt-soft fill + inset
   gilt border, driven off [aria-pressed="true"] (party-picker controller). */
.party-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  padding: 0.8125rem 1rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 0.6875rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.party-btn:hover { border-color: var(--color-line-strong); }
.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);
}

/* 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;
}
/* Gilt star before the wordmark — the brand glyph, with a soft glow. */
.wordmark-star {
  color: var(--color-authority);
  font-size: 0.82em;
  line-height: 1;
  transform: translateY(-0.04em);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-authority) 55%, transparent);
}

/* 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);
}

.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);
}

/* 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-gray-500);
}

.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-gray-500);
  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); shortlisted shows a filled
   bookmark. Buttons are quiet gray icons until active. */
.triage-dismissed {
  opacity: 0.45;
}

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

/* Active shortlist star is gilt (relevance/brand); set-aside stays neutral. */
.triage-btn.triage-shortlist.triage-active {
  color: var(--color-authority);
}

.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));
}

/* 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 bg — the old cool gray (#eef0f4) clashed
     with the #f8f6f1 page. Hover warms toward the paper tone + 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);
}

.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;
}

/* Adverse / opposing-side card — a subtle unfavorable wash + red left
   edge marks the adversary's argument as the other side. Mixed off the
   semantic tokens, so it stays subtle in both modes (a faint warm tint
   over surface, never a loud fill). */
.adverse-card {
  background: color-mix(in srgb, var(--color-unfavorable) 7%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-unfavorable) 22%, var(--color-line));
  border-left: 3px solid color-mix(in srgb, var(--color-unfavorable) 55%, var(--color-line));
}
.dark .adverse-card {
  background: color-mix(in srgb, var(--color-unfavorable) 9%, var(--color-surface));
}

/* 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);
}

/* 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);
}

.dark .btn-starfield {
  background: linear-gradient(135deg, #060a14 0%, #0f172a 50%, #060a14 100%);
  border: 1px solid rgba(147, 197, 253, 0.2);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: rgba(147, 197, 253, 0.9);
}

.dark .btn-starfield:hover {
  background: linear-gradient(135deg, #0a1020 0%, #131c2e 50%, #0a1020 100%);
  border-color: rgba(147, 197, 253, 0.35);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* ── 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;
}

.dark .btn-starfield:focus {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2), 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.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);
}

.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);
}

/* ── Nav refinement ────────────────────────────────────────── */
:root { --nav-height: 3.5rem; }

.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) {
  .reading-case > #matter-header,
  .reading-case > #matter-mobile-tabs {
    display: none !important;
  }
  .reading-case .opinion-header-sticky {
    top: var(--nav-height) !important;
  }
  main:has(.reading-case) {
    padding-top: 0 !important;
  }
}

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

/* Opinion inline highlights — relevance (holdings / key passages) reads
   as a gilt wash + underline (authority/relevance). Token-derived, so it
   holds in both modes; paper mode overrides via [data-highlight-type]. */
.hl-relevance {
  background: color-mix(in srgb, var(--color-authority) 26%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--color-authority) 68%, transparent);
  cursor: help;
}

/* ── Reader paper/sepia mode ──────────────────────────────────
   Warm cream column for long reads. Uses the --paper tokens so the
   values live in one place (see @theme). Restyles only the opinion
   column + its sticky header — nothing else on the page. */
.reader-paper #opinion-body {
  background: var(--paper);
}
.reader-paper #opinion-header,
.reader-paper #opinion-case-info {
  background: color-mix(in srgb, var(--paper), #000 4%) !important;
  border-bottom-color: var(--paper-line) !important;
}
.reader-paper .opinion-header-sticky {
  box-shadow: 0 -2rem 0 0 color-mix(in srgb, var(--paper), #000 4%);
}
.reader-paper #opinion-body .prose,
.reader-paper #opinion-body .opinion-html {
  color: var(--paper-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  line-height: 1.7;
}
.reader-paper #opinion-body .page-marker {
  background: color-mix(in srgb, var(--paper), #000 5%) !important;
  border-bottom-color: var(--paper-line) !important;
  color: color-mix(in srgb, var(--paper-ink) 60%, transparent) !important;
}
.reader-paper #opinion-body mark,
.reader-paper #opinion-body [data-highlight-type] {
  background: color-mix(in srgb, var(--color-authority) 50%, var(--paper)) !important;
  color: inherit !important;
}
.reader-mode-active {
  color: #8b6f3a !important;
  background: rgba(139, 111, 58, 0.1) !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);
}

/* 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) */
@media (min-width: 768px) {
  #opinion-body .prose,
  #opinion-body-highlighted .prose {
    max-width: 38em !important;
    margin-left: auto;
    margin-right: auto;
  }
}

.dark #opinion-body .prose,
.dark #opinion-body-highlighted .prose {
  color: #f8fafc !important;
}

.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 ────────────────────────────────── */
#tab-sidebar .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;
}

#tab-sidebar .tab-btn:hover:not(:disabled) {
  background: var(--color-gray-50);
}

#tab-sidebar .tab-btn:hover:not(:disabled) svg {
  color: var(--color-gray-600);
}

.dark #tab-sidebar .tab-btn:hover:not(:disabled) {
  background: #182338;
}

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

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

/* ── Mobile bottom tab bar ──────────────────────────────── */
.mobile-tab-btn.tab-active {
  color: var(--color-authority);
}
.mobile-tab-btn.tab-active svg {
  stroke-width: 2;
}
.dark .mobile-tab-btn {
  color: var(--color-gray-500);
}
.dark #matter-mobile-tabs {
  background: rgba(17, 24, 39, 0.95);
  border-color: var(--color-gray-700);
}
.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: 360px;
  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;
}

/* ── 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; }
.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;
  }

  /* ── 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; }

/* Top-right expand-to-fullscreen button */
.graph-embed-expand {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(147, 197, 253, 0.2);
  color: rgba(186, 211, 245, 0.7);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.graph-embed-expand svg { pointer-events: none; }
.graph-embed-expand:hover {
  color: #f1f5f9;
  background: rgba(30, 41, 90, 0.7);
  border-color: rgba(147, 197, 253, 0.5);
}

.graph-extras-toggle {
  position: absolute;
  top: 0.6rem;
  right: 2.8rem;  /* leave room for the expand button at right: 0.6rem */
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(147, 197, 253, 0.2);
  color: rgba(186, 211, 245, 0.7);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.graph-extras-toggle svg { pointer-events: none; }
.graph-extras-toggle:hover {
  color: #f1f5f9;
  background: rgba(30, 41, 90, 0.7);
  border-color: rgba(147, 197, 253, 0.5);
}
.graph-extras-toggle.is-active {
  color: #f1f5f9;
  background: rgba(59, 130, 246, 0.35);
  border-color: rgba(96, 165, 250, 0.6);
}
.graph-embed--modal .graph-extras-toggle {
  right: 0.6rem;  /* modal has no expand button */
}

/* Fullscreen graph overlay (triggered by .graph-embed-expand) */

.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);
}

.graph-overlay-container {
  position: relative;
  width: 100%;
  max-width: min(95vw, 1600px);
  height: calc(100vh - 4rem);
  display: flex;
}

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

.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; }

/* Active state on the Graph toggle button */
button.is-active[data-outline-graph-toggle-target="button"] {
  background: #1f2937;
  border-color: #1f2937;
  color: #f9fafb;
}
button.is-active[data-outline-graph-toggle-target="button"]:hover {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

/* ----- 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));
}

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

.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;
}

.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;
}