/* Judge view — layout over design/tokens.css (typography is locked there:
   body 16px, secondary 14px, weights 400/500, line-height ~1.6).
   This file adds only a calm, high-contrast palette and spacing. No font sizes
   below 14px; no weights other than 400/500. */

:root {
  /* Phase 2 (2a) — NEUTRAL repoint: legacy names kept (so all rules + the shared
     intake/examine consumers keep resolving), values now reference the new tokens
     (design/tokens.css Phase-2 :root). Colliding names — --line / --line-strong /
     --focus-ring are ALSO declared in tokens.css, so they are HARDCODED to the new hex
     here to avoid a self-reference cycle; non-colliding names use var(). Status + party
     colours are deliberately left on the legacy palette (Step 2b). */
  --bg: var(--paper);                  /* #F4F1EA */
  --surface: var(--card);              /* #FCFBF7 */
  --ink: var(--ink-900);               /* #1F1D1A — primary text */
  --ink-2: var(--ink-600);             /* #5A554C — secondary; darker option, holds the 14px floor */
  --line: #DCD6CA;                     /* == tokens --line; hardcoded (name collides) */
  --line-strong: #C9C1B2;              /* == tokens --line-strong; hardcoded (name collides) */
  --focus: var(--accent);              /* slate #324153 — accent / primary control */
  --focus-hover: var(--accent-strong); /* slate-900 #222C38 */
  --focus-ring: #46586D;               /* slate-500; hardcoded (name collides with tokens --focus-ring) */
  --on-focus: var(--text-on-accent);   /* paper #F4F1EA */

  /* Non-reliance notice — Phase 2 (2b): softened from prominent-gold to quiet neutral
     by design decision (documented in DESIGN_SYSTEM.md). Wording is UNCHANGED. */
  --notice-bg: #EEEAE0;    /* paper-2 — calm neutral */
  --notice-line: #736D62;  /* ink-500 — quiet accent */

  /* Evidential status — always paired with the WORD and a dot, never colour alone.
     Full set, shared with intake/examine: agreed / disputed / open / dispositive / unaddressed. */
  /* Phase 2 (2b) — repointed into the warm palette. */
  --agreed: #3a6b4e;       --agreed-bg: #e8efe9;        /* sage (palette had no green) */
  --disputed: #7C3B43;     --disputed-bg: #EFE3E1;      /* claret */
  --open: #324153;         --open-bg: #E3E7EC;          /* slate */
  --dispositive: #324153;  --dispositive-bg: #E3E7EC;   /* slate; same as open (the factor in focus) */
  --unaddressed: #736D62;  --unaddressed-bg: #EEEAE0;   /* warm neutral — record silent */

  /* Party accents — DECOUPLED from status; the account cards point at these.
     Phase 2 (2b) Option B: slate (defence/accused) + ochre (Crown). Mapping preserved. */
  --party-accused: #324153;   /* the accused's / defence account (slate) */
  --party-crown:   #8A5A2B;   /* the Crown / police account (ochre) */

  /* Spacing scale — section/card rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;

  --maxw: 940px;
  --space: 24px;   /* legacy alias (== --space-5); kept for notice/error/body gutters */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--space) 72px;
  background: var(--bg);
  color: var(--ink);
  /* font-family / size / line-height inherited from design/tokens.css (now Source Serif) */
}

/* Phase 2 (2a) — typography boundary. Reading text + headings/titles inherit Source Serif
   from html (tokens.css); UI chrome (eyebrows, labels, sublabels/ledes, controls, chips,
   badges, citation list) is IBM Plex. Long-form prose is deliberately NOT listed here and
   stays serif: .notice__text, .reading__body, .hero__question/__note, .case__body,
   .where-turns__note/__quote, and all heading classes. (.btn handled in its own rule.) */
.skip-link,
.notice__label,
.matter__eyebrow, .matter__context,
.section-eyebrow, .section-sub,
.reading__title, .reading__source,
.rest__group-label, .rest__label,
.chip,
.case__sub, .case__movelabel,
.examine-lede, .examining__sub,
.src-chip,
.authorities__label, .authorities__item, .authorities__cite, .authorities__none, .authorities__flag,
.auth-badge {
  font-family: var(--font-sans-new);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--space); top: 8px; z-index: 10;
  background: var(--surface); padding: 8px 12px; border: 2px solid var(--focus); border-radius: 6px;
}

/* --- Persistent notice --- */
.notice {
  max-width: var(--maxw);
  margin: var(--space-5) auto 0;
  display: flex; gap: var(--space-3); align-items: baseline;
  background: var(--notice-bg);
  border: 1px solid var(--notice-line);
  border-left: 6px solid var(--notice-line);
  border-radius: 8px;
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 1px 3px rgba(31, 29, 26, 0.06);   /* Phase 2 (2b): neutral lift — no gold halo */
}
.notice__label {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--notice-line); white-space: nowrap;
}
.notice__text { margin: 0; font-size: var(--font-size-body); color: var(--ink); font-style: italic; }   /* Phase 2 (2b): quieter, italicised */

/* --- Matter header --- */
.matter { max-width: var(--maxw); margin: var(--space-6) auto 0; }
.matter__eyebrow {
  margin: 0 0 var(--space-2); font-size: var(--font-size-secondary); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.matter__title {
  margin: 0; font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-medium); line-height: var(--line-height-heading);
}
.matter__context { margin: var(--space-2) 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); }

main { max-width: var(--maxw); margin: 0 auto; }

.section-eyebrow {
  margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-secondary); color: var(--focus);
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: var(--font-weight-medium);
}

/* --- Hero: the one thing in focus --- */
.hero {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04);
}
.hero__question {
  margin: 0; font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-medium); line-height: var(--line-height-heading);
}
.hero__note { margin: var(--space-3) 0 0; font-size: var(--font-size-body); color: var(--ink-2); }

.readings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 720px) { .readings { grid-template-columns: 1fr; } }

/* Account cards — the centrepiece. Raised white panels, a 4px PARTY accent, the quote
   given presence (stepped up the existing scale to 20px, weight 400, generous leading). */
.reading {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.05);
}
.reading--accused { border-top: 4px solid var(--party-accused); }
.reading--police  { border-top: 4px solid var(--party-crown); }
.reading__title {
  margin: 0 0 var(--space-4); font-size: var(--font-size-secondary); color: var(--ink-2);
  font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em;
}
.reading__body p {
  margin: 0 0 var(--space-2); font-size: var(--font-size-heading-md);
  line-height: var(--line-height-body); color: var(--ink);
}
.reading__source {
  margin: var(--space-3) 0 var(--space-4); font-size: var(--font-size-secondary);
  color: var(--ink-2); letter-spacing: 0.02em;
}

.hero__actions { margin-top: var(--space-6); }
.btn {
  font: inherit; font-family: var(--font-sans-new);   /* UI chrome: IBM Plex, not the serif body default */
  font-weight: var(--font-weight-medium); font-size: var(--font-size-body);
  background: var(--focus); color: var(--on-focus);
  border: 1px solid var(--focus); border-radius: 8px;
  padding: 12px 20px; min-height: 44px; cursor: pointer;
}
.btn:hover { background: var(--focus-hover); }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hero__hint { margin: 12px 0 0; font-size: var(--font-size-secondary); color: var(--ink-2); }

/* --- The rest of the case: calm secondary list --- */
.rest { margin-top: var(--space-6); }
.section-heading { margin: 0; font-size: var(--font-size-heading-md); font-weight: var(--font-weight-medium); }
.section-sub { margin: var(--space-2) 0 var(--space-4); font-size: var(--font-size-secondary); color: var(--ink-2); }
.rest__list { display: flex; flex-direction: column; gap: var(--space-1); }
.rest__group-label {
  margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-secondary); color: var(--ink-2);
  font-weight: var(--font-weight-medium);
}
.rest__item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: var(--space-3) var(--space-4);
}
.rest__label { font-size: var(--font-size-body); }

/* --- Status chip: WORD + dot + colour (redundant; never colour alone) --- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor;
}
.chip__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.chip--agreed      { color: var(--agreed);      background: var(--agreed-bg); }
.chip--disputed    { color: var(--disputed);    background: var(--disputed-bg); }
.chip--open        { color: var(--open);        background: var(--open-bg); }
.chip--dispositive { color: var(--dispositive); background: var(--dispositive-bg); }
.chip--unaddressed { color: var(--unaddressed); background: var(--unaddressed-bg); }

.error {
  max-width: var(--maxw); margin: var(--space) auto;
  background: #F4E4E2; border: 1px solid #9A4A53; color: #7C3B43;   /* Phase 2 (2b): claret-family error (warmer than cold red; a touch more alarmed than disputed) */
  border-radius: 8px; padding: 16px 20px; font-size: var(--font-size-body);
}

/* ============================================================================
   3b — live /factor/examine output. Tokens only; two cases at EQUAL weight;
   no winner, no score, no disposition.
   ============================================================================ */

.examine-result { margin-top: 28px; }

/* Calm, deliberate loading state — text-led, never spinner-only. */
.examining {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 20px 22px;
  background: var(--bg);
}
.examining__title { margin: 0; font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-medium); }
.examining__sub { margin: 8px 0 16px; font-size: var(--font-size-body); color: var(--ink-2); }
.examining__bar { height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }   /* Phase 2 (2a): warm neutral track */
.examining__bar::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--focus); border-radius: 999px;
  animation: ratio-sweep 1.6s ease-in-out infinite;
}
@keyframes ratio-sweep { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .examining__bar::after { animation: none; width: 100%; opacity: 0.5; } }

.examine-heading {
  margin: 0 0 4px; font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-medium); line-height: var(--line-height-heading);
}
.examine-lede { margin: 0 0 20px; font-size: var(--font-size-secondary); color: var(--ink-2); }

/* Two cases — identical treatment, equal weight, side by side. */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .cases { grid-template-columns: 1fr; } }
.case {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--ink-2);   /* same neutral accent on BOTH — neither styled as winning */
  border-radius: 10px;
  padding: 22px;
}
.case__title { margin: 0; font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.case__sub { margin: 4px 0 14px; font-size: var(--font-size-secondary); color: var(--ink-2); }
.case__body { margin: 0; font-size: var(--font-size-body); white-space: pre-wrap; }  /* faithful: verbatim text + line breaks */

/* Where this turns — the hinge, beneath the two cases. */
.where-turns {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--open);
  border-radius: 10px;
  padding: 22px;
}
.where-turns__title { margin: 0 0 6px; font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-medium); }
.where-turns__note { margin: 0 0 16px; font-size: var(--font-size-body); }
.where-turns__row { margin: 0 0 14px; }
.where-turns__src { margin: 0 0 6px; }
.src-chip {
  display: inline-block; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 12px;
}
.where-turns__quote { margin: 6px 0 0; font-size: var(--font-size-body); color: var(--ink); }

.examine-close {
  margin: 22px 0 0; font-size: var(--font-size-body); font-weight: var(--font-weight-medium);
  color: var(--ink); padding-top: 16px; border-top: 1px solid var(--line);
}

/* Examine error — plain message + one-click retry. */
.examine-error {
  border: 1px solid #9A4A53; background: #F4E4E2; color: #7C3B43;   /* Phase 2 (2b): claret-family error */
  border-radius: 10px; padding: 20px 22px;
}
.examine-error__msg { margin: 0 0 14px; font-size: var(--font-size-body); }
.btn--retry { background: var(--surface); color: var(--focus); border: 1px solid var(--focus); }
.btn--retry:hover { background: var(--accent-tint); }   /* Phase 2 (2a): slate tint, was old-blue #eef3f8 */
.btn[disabled] { opacity: 0.65; cursor: default; }

/* 3b formatting pass: case body now renders light markdown (<p>/<em>/<strong>),
   not pre-wrapped raw text. Override the verbatim rule above. */
.case__body { white-space: normal; }
.case__body p { margin: 0 0 12px; font-size: var(--font-size-body); }
.case__body p:last-child { margin-bottom: 0; }
.case__body em { font-style: italic; }
.case__body strong { font-weight: var(--font-weight-medium); }  /* medium, never heavier */

/* ---- citation guard (3c) — quiet "Authorities" line under each case --------
   The guard polices whether a cited authority is in this doctrine's verified
   set and whether its neutral citation matches our record. It never judges
   whether the authority SUPPORTS the argument — that stays with the human.
   Status is conveyed by word + colour + symbol, never colour alone. */
.authorities { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.authorities__label {
  margin: 0 0 10px; font-size: var(--font-size-secondary); color: var(--ink-2);
  font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em;
}
.authorities__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.authorities__item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--font-size-secondary);
}
.authorities__cite { font-size: var(--font-size-secondary); color: var(--ink); }
.authorities__none { margin: 0; font-size: var(--font-size-secondary); color: var(--ink-2); }
.authorities__flag {
  margin: 10px 0 0; font-size: var(--font-size-secondary); color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.auth-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.auth-badge__sym { font-weight: var(--font-weight-medium); }
.auth-badge--verified { color: var(--agreed);   background: var(--agreed-bg); }
.auth-badge--flagged  { color: var(--disputed); background: var(--disputed-bg); }
.auth-badge--statute  { color: var(--ink-2);    background: var(--paper-2); }   /* neutral: not a tick, not a flag (Phase 2 2a: warm neutral) */

/* Opening / In reply sublabels within each case column (two-round exchange). */
.case__movelabel {
  margin: 16px 0 6px; font-size: var(--font-size-secondary); font-weight: var(--font-weight-medium);
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em;
}
.case__movelabel:first-of-type { margin-top: 0; }