*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; -webkit-text-size-adjust: 100%; }
/* Surfaces, text and type come from tokens.css — the shared house tokens served from
   jaybulb.com/tokens.css and consumed the same way by spark, wiretext and curvely.
   Everything below is an alias onto those, plus the status colours that carry litigation
   meaning (danger/warn/good) and have no house equivalent. Never hardcode a surface,
   text or border colour past this block.

   ponytail: the aliases sit on `body`, not `:root`. A var() alias resolves against the
   element it is declared on, and tokens.css publishes its dark palette at
   [data-theme="dark"] — which is the attribute this app sets on <body>. Hoisting these
   to :root would resolve them against html, silently pinning the whole app to the light
   palette in dark mode. */
body {
  --ink: var(--text);
  --paper: var(--bg2);
  --paper-2: color-mix(in srgb, var(--bg2) 94%, var(--text));
  --rule: var(--border);
  --rule-strong: color-mix(in srgb, var(--text) 18%, transparent);
  --mid: var(--text2);
  --muted: var(--text3);
  --sans: var(--font-body);
  --danger: #d24a3a;
  --danger-soft: rgba(210,74,58,0.14);
  --warn: #d18a3a;
  --warn-soft: rgba(209,138,58,0.14);
  --good: #3aa674;
  --good-soft: rgba(58,166,116,0.14);
  --info: var(--accent);
  --info-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --grade-a: var(--good);
  --grade-b: var(--info);
  --grade-c: var(--warn);
  --grade-d: var(--danger);
}
/* Light mode gets its surfaces from tokens.css automatically; only the status colours
   need deepening for contrast on white. */
body[data-theme="white"] {
  --danger: #b03220;
  --danger-soft: rgba(176,50,32,0.10);
  --warn: #976316;
  --warn-soft: rgba(151,99,22,0.10);
  --good: #1f6e46;
  --good-soft: rgba(31,110,70,0.10);
}
body[data-accent="amber"] { --danger: #d18a3a; --danger-soft: rgba(209,138,58,0.14); }
body[data-accent="ink"]   { --danger: #c9c2b1; --danger-soft: rgba(201,194,177,0.10); }
body[data-theme="white"][data-accent="amber"] { --danger: #976316; --danger-soft: rgba(151,99,22,0.10); }
body[data-theme="white"][data-accent="ink"]   { --danger: #2a200f; --danger-soft: rgba(42,32,15,0.08); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}
::selection { background: var(--danger); color: var(--bg); }

/* Auth overlay */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.3s;
}
.auth-overlay.hidden { opacity: 0; pointer-events: none; }
/* Signed in: the landing is still in the DOM behind the app, so stop its
   background animations rather than paying for them forever. */
.auth-overlay.hidden * { animation-play-state: paused; }
.auth-card {
  width: 320px;
  padding: 36px 32px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.auth-title { font-family: var(--sans); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }
.auth-sub { font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 24px; }
.auth-input {
  width: 100%; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  margin-bottom: 10px; outline: none;
  transition: border-color 0.15s;
}
.auth-input:focus { border-color: var(--ink); }
.auth-btn {
  width: 100%; padding: 11px;
  background: var(--ink); color: var(--bg);
  border: none; border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: opacity 0.15s;
}
.auth-btn:hover { opacity: 0.88; }
.auth-err { font-family: var(--sans); font-size: 11px; color: var(--danger); margin-top: 8px; }
.auth-who { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:12px; background:var(--paper-2); border:1px solid var(--rule-strong); border-radius:var(--radius-sm); }
.auth-avatar { width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:15px; font-weight:700; flex-shrink:0; }
.auth-confirmed { font-family:var(--sans); font-size:12px; color:var(--mid); }
.auth-back { background:none; border:none; font-family:var(--sans); font-size:11px; color:var(--muted); cursor:pointer; margin-top:12px; padding:0; text-decoration:underline; letter-spacing:0.04em; }
.auth-back:hover { color:var(--ink); }
.auth-footer { font-family: var(--sans); font-size: 10px; color: var(--muted); margin-top: 24px; letter-spacing: 0.06em; }

/* Type primitives */
.eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* Sticky strip */
.strip {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center; gap: 18px;
  padding: 12px 22px;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px; color: var(--mid);
  letter-spacing: 0.02em;
}
.strip .brand {
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  color: var(--ink); letter-spacing: -0.02em;
  padding-right: 14px; border-right: 1px solid var(--rule);
  text-transform: lowercase;
}
.strip .meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.strip .meta b { color: var(--ink); font-weight: 500; }
.strip .pulse { display: inline-flex; align-items: center; gap: 7px; color: var(--danger); }
.strip .pulse::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--danger-soft); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}
.strip-btn {
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill);
  padding: 5px 12px; font-family: var(--sans); font-size: 10px; color: var(--mid);
  cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.15s;
}
.strip-btn:hover { color: var(--ink); border-color: var(--ink); }
.strip-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--danger-soft); color: var(--danger);
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  font-weight: 600;
}

/* Page layout */
.page { max-width: 1180px; margin: 0 auto; padding: 0 32px 120px; }

/* Hero */
.hero { padding: 56px 0 32px; }
.hero-marks {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 36px; border-bottom: 1px solid var(--rule); padding-bottom: 14px;
}
.hero-marks .l { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hero-marks .r { font-family: var(--sans); font-size: 10.5px; color: var(--mid); }
.hero-title {
  font-family: var(--sans); font-size: clamp(40px, 8vw, 92px); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 18px;
}
.hero-title .v {
  font-weight: 400; color: var(--mid); display: inline-block;
  margin: 0 0.06em; font-size: 0.55em; letter-spacing: -0.02em; vertical-align: 0.18em;
}
.hero-sub {
  font-family: var(--sans); font-weight: 400; font-size: clamp(15px, 1.7vw, 18px);
  color: var(--mid); max-width: 60ch; line-height: 1.55; margin: 0 0 36px; letter-spacing: -0.005em;
}

/* Case clock */
.clock { margin: 18px 0 36px; padding: 22px 0 6px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.clock-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.clock-hd .lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--danger); }
.clock-hd .days { font-family: var(--sans); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; color: var(--danger); line-height: 1; }
.clock-now-row { position: relative; height: 38px; margin-bottom: 6px; }
.clock-now-label {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translateX(-50%); white-space: nowrap; text-align: center;
}
.clock-now-label .what { font-family: var(--sans); font-size: 10px; color: var(--danger); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.clock-now-label .when { font-family: var(--sans); font-size: 10.5px; color: var(--danger); letter-spacing: 0.04em; }
.clock-now-label::after { content: ''; position: absolute; bottom: -6px; width: 1px; height: 6px; background: var(--danger); }
.clock-track { position: relative; height: 96px; overflow: visible; }
.clock-decay-svg { position: absolute; inset: 0 0 14px 0; width: 100%; height: calc(100% - 14px); z-index: 1; pointer-events: none; }
.clock-line { position: absolute; bottom: 8px; left: 0; right: 0; height: 1px; background: var(--rule-strong); z-index: 2; }
.clock-segment { position: absolute; bottom: 8px; height: 1px; z-index: 3; }
.clock-segment.expired { background: var(--warn); height: 2px; bottom: 7.5px; }
.clock-segment.runway  { background: var(--danger); height: 2px; bottom: 7.5px; opacity: 0.55; }
.clock-tick { position: absolute; bottom: 4px; display: flex; flex-direction: column; align-items: center; z-index: 4; }
.clock-tick .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bg); background: var(--mid); }
.clock-tick.t-expired .dot { background: var(--warn); }
.clock-tick.t-now .dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); width: 13px; height: 13px; }
.clock-tick.t-now { bottom: 2px; }
.clock-tick .stem { position: absolute; bottom: 16px; width: 1px; background: var(--danger); opacity: 0.45; z-index: 3; }
.clock-labels { position: relative; margin-top: 10px; height: 32px; }
.clock-label { position: absolute; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.clock-label .when { font-family: var(--sans); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; }
.clock-label .what { font-family: var(--sans); font-size: 10px; color: var(--mid); text-transform: uppercase; letter-spacing: 0.1em; }
.clock-label.exp .when, .clock-label.exp .what { color: var(--warn); }
.clock-label.left  { left: 0; align-items: flex-start; }
.clock-label.right { right: 0; align-items: flex-end; text-align: right; }
.clock-label.mid   { align-items: flex-start; }
.clock-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); gap: 12px;
}
.clock-caption b { color: var(--warn); font-weight: 600; }
.clock-cap-key { display: inline-flex; align-items: center; gap: 8px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.swatch.warn { background: var(--warn); opacity: 0.55; }

/* Tri-stat */
.tristat { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.tristat .col { padding: 22px 18px 22px 0; border-right: 1px solid var(--rule); }
.tristat .col:last-child { border-right: 0; padding-right: 0; }
.tristat .col:not(:first-child) { padding-left: 22px; }
.tristat .lbl { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tristat .val { font-family: var(--sans); font-weight: 700; font-size: clamp(30px,4.2vw,48px); letter-spacing: -0.045em; line-height: 1; margin-bottom: 6px; }
.tristat .col.likely .val { color: var(--danger); }
.tristat .sub { font-family: var(--sans); font-size: 10.5px; color: var(--mid); }

/* Tabs */
.tabs { display: flex; gap: 32px; margin: 28px 0 0; border-bottom: 1px solid var(--rule); }
.tab-btn {
  background: none; border: none; padding: 14px 0 12px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; position: relative; transition: color 0.15s;
}
.tab-btn:hover { color: var(--mid); }
.tab-btn.active { color: var(--ink); }
.tab-btn.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.tab-btn .n { font-family: var(--sans); font-size: 9px; color: var(--muted); margin-right: 6px; }
.tab-panel { display: block; }
.tab-panel + .tab-panel { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
.tab-panel[data-section]::before { content: attr(data-section); display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-bottom: 20px; }

/* Section */
.section { margin-top: 56px; }
.section-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px;
}
.section-hd .lbl { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.section-hd .lbl b { color: var(--ink); font-weight: 600; }
.section-hd::after { content: ''; flex: 1; height: 1px; background: var(--rule); align-self: center; }
.section-hd .hint { font-family: var(--sans); font-size: 10px; color: var(--muted); }

/* Next action */
.next-action {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 18px 22px; margin-top: 24px;
  background: var(--danger-soft); border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent); border-radius: var(--radius-sm);
}
.next-action .na-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--danger); }
.next-action .na-body { display: flex; flex-direction: column; gap: 4px; }
.next-action .na-title { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.next-action .na-note { font-family: var(--sans); font-size: 11px; color: var(--mid); }
.next-action .na-call {
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 10px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--bg) 60%, transparent); transition: all 0.15s;
}
.next-action .na-call:hover { border-color: var(--ink); }

/* Facts */
.facts { border-top: 1px solid var(--rule); }
.facts .row { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.facts .k { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.facts .v { font-family: var(--sans); font-size: 14.5px; font-weight: 500; }
.facts .v em { font-style: italic; color: var(--mid); font-weight: 400; }
.facts .v.danger { color: var(--danger); }

/* Witness */
.witness { border-top: 1px solid var(--rule-strong); padding-top: 20px; }
.witness-hd { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: 18px; }
.witness-av { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); }
.witness-name { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
.witness-role { font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; margin-top: 2px; }
.witness-stamp { font-family: var(--sans); font-size: 10px; color: var(--good); letter-spacing: 0.1em; text-transform: uppercase; }
.witness-stamp::before { content: '● '; }
.witness-stmt { font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--danger); padding: 4px 0 4px 20px; margin-bottom: 18px; font-weight: 400; letter-spacing: -0.005em; }
.witness-stmt::before { content: '"'; color: var(--danger); margin-right: 2px; font-size: 22px; font-weight: 400; }
.witness-stmt::after  { content: '"'; color: var(--danger); margin-left:  2px; font-size: 22px; font-weight: 400; }
.witness-ann { display: flex; flex-direction: column; gap: 10px; }
.witness-ann .a { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; background: var(--paper-2); border-left: 2px solid var(--warn); border-radius: 0 4px 4px 0; }
.witness-ann .a .q { font-family: var(--sans); font-size: 11.5px; color: var(--warn); }
.witness-ann .a .defeats { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--good); margin-top: 4px; }
.witness-ann .a .defeats em { color: var(--ink); font-style: normal; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 11.5px; }
.witness-ann .a .n { font-family: var(--sans); font-size: 13px; color: var(--mid); line-height: 1.5; margin-top: 4px; }

/* Grounds accordion */
.grounds { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ground { border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 0.15s; }
.ground:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.ground-hd { display: grid; grid-template-columns: 60px 1fr 140px auto; gap: 18px; align-items: baseline; padding: 20px 0; }
.ground-n { font-family: var(--sans); font-weight: 500; font-size: 18px; color: var(--muted); letter-spacing: 0; line-height: 1; padding-top: 4px; }
.ground.open .ground-n { color: var(--danger); }
.ground-title { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.025em; line-height: 1.15; }
.ground-sec { font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em; margin-top: 4px; }
.ground-val { font-family: var(--sans); font-size: 13px; font-weight: 500; text-align: right; }
.ground-grade { font-family: var(--sans); font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 2px; border: 1px solid var(--rule-strong); letter-spacing: 0.08em; min-width: 28px; text-align: center; }
.ground-grade.g-A { color: var(--grade-a); border-color: color-mix(in oklab, var(--grade-a) 40%, transparent); background: color-mix(in oklab, var(--grade-a) 10%, transparent); }
.ground-grade.g-B { color: var(--grade-b); border-color: color-mix(in oklab, var(--grade-b) 40%, transparent); background: color-mix(in oklab, var(--grade-b) 10%, transparent); }
.ground-grade.g-C { color: var(--grade-c); border-color: color-mix(in oklab, var(--grade-c) 40%, transparent); background: color-mix(in oklab, var(--grade-c) 10%, transparent); }
.ground-grade.g-D { color: var(--grade-d); border-color: color-mix(in oklab, var(--grade-d) 40%, transparent); background: color-mix(in oklab, var(--grade-d) 10%, transparent); }
.ground-mag { height: 2px; background: var(--rule); margin: 0 0 0 78px; }
.ground-mag-fill { height: 100%; width: 0; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }
.ground-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1); }
.ground.open .ground-body { max-height: 900px; }
.ground-inner { padding: 18px 0 24px 78px; display: grid; gap: 14px; }
.ground-desc { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink); max-width: 68ch; font-weight: 400; letter-spacing: -0.003em; }
.ground-cite { font-family: var(--sans); font-size: 11px; color: var(--mid); padding: 10px 14px; background: var(--paper-2); border-left: 2px solid var(--rule-strong); border-radius: 0 4px 4px 0; line-height: 1.6; }
.ground-cite b { color: var(--ink); font-weight: 500; }
.ground-da { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.55; }
.ground-da-label { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.ground-da-text { color: var(--mid); }
.ground-da-counter .ground-da-label { color: var(--good); }
.ground-da-counter .ground-da-text { color: var(--ink); }

/* Journal */
.journal-controls { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.journal-add { background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 6px 14px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); cursor: pointer; transition: all 0.15s; }
.journal-add:hover { color: var(--ink); border-color: var(--ink); }
.journal-form { display: none; padding: 16px 0; border-top: 1px solid var(--rule); }
.journal-form.open { display: grid; gap: 10px; }
.journal-form input[type=date], .journal-form textarea { width: 100%; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--sans); font-size: 14px; color: var(--ink); resize: vertical; }
.journal-form input[type=date] { font-family: var(--sans); font-size: 12px; }
.journal-form textarea { min-height: 80px; line-height: 1.55; }
.journal-form .row { display: flex; gap: 8px; }
.journal-form .save { padding: 9px 16px; border-radius: var(--radius-sm); border: none; background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.journal-form .cancel { padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: transparent; color: var(--mid); font-family: var(--sans); font-size: 11px; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; }
.journal-list { border-top: 1px solid var(--rule); }
.j-entry { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.j-entry .when { font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; }
.j-entry .what { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink); letter-spacing: -0.003em; }

/* Outcomes */
.scen { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.scen:first-child { border-top: 1px solid var(--rule); }
.scen-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; margin-bottom: 12px; }
.scen-name { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.scen-desc { font-family: var(--sans); font-size: 13px; color: var(--mid); margin-top: 4px; line-height: 1.5; max-width: 56ch; }
.scen-right { text-align: right; }
.scen-amt { font-family: var(--sans); font-size: 16px; font-weight: 500; }
.scen-pct { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.06em; }
.bar-track { height: 3px; background: var(--rule); overflow: hidden; border-radius: var(--radius-pill); }
.bar-fill { height: 100%; width: 0; border-radius: var(--radius-pill); transition: width 1s cubic-bezier(0.22,1,0.36,1); }

/* Damages stack */
.stack-tot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stack-tot .l-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.stack-tot .l-val { font-family: var(--sans); font-size: clamp(48px,7vw,84px); font-weight: 700; line-height: 0.95; letter-spacing: -0.055em; color: var(--danger); }
.stack-tot .r { text-align: right; font-family: var(--sans); font-size: 11px; color: var(--mid); }
.stack-tot .r b { color: var(--ink); font-weight: 500; }
.stack-tot .r div { margin-bottom: 4px; }
.stack-toggle { display: flex; margin: 16px 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); width: fit-content; overflow: hidden; }
.stack-toggle button { padding: 8px 18px; background: transparent; border: none; font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); cursor: pointer; }
.stack-toggle button.active { background: var(--ink); color: var(--bg); }
.stack-rows { border-top: 1px solid var(--rule); }
.stack-row { display: grid; grid-template-columns: 44px 1fr 110px; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.stack-row:last-child { border-bottom: 0; }
.stack-row .badge { font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 3px 0; border-radius: 2px; border: 1px solid var(--rule-strong); text-align: center; letter-spacing: 0.08em; }
.stack-row .badge.g-A { color: var(--grade-a); border-color: color-mix(in oklab, var(--grade-a) 40%, transparent); background: color-mix(in oklab, var(--grade-a) 12%, transparent); }
.stack-row .badge.g-B { color: var(--grade-b); border-color: color-mix(in oklab, var(--grade-b) 40%, transparent); background: color-mix(in oklab, var(--grade-b) 12%, transparent); }
.stack-row .badge.g-C { color: var(--grade-c); border-color: color-mix(in oklab, var(--grade-c) 40%, transparent); background: color-mix(in oklab, var(--grade-c) 12%, transparent); }
.stack-row .badge.g-D { color: var(--grade-d); border-color: color-mix(in oklab, var(--grade-d) 40%, transparent); background: color-mix(in oklab, var(--grade-d) 12%, transparent); }
.stack-row .mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stack-row .label { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.stack-row .sub { font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
.stack-row .meter { height: 3px; background: var(--rule); overflow: hidden; border-radius: var(--radius-pill); }
.stack-row .meter > div { height: 100%; width: 0; border-radius: var(--radius-pill); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.stack-row .amt { font-family: var(--sans); font-size: 14px; font-weight: 500; text-align: right; }

/* Scale */
.scale-band { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.scale-band:first-child { border-top: 1px solid var(--rule); }
.scale-band-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.scale-band-hd .lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); }
.scale-band-hd .max { font-family: var(--sans); font-size: 10px; color: var(--muted); }
.scale-track { position: relative; height: 56px; }
.scale-track .line { position: absolute; top: 28px; left: 0; right: 0; height: 1px; background: var(--rule-strong); }
.scale-mark { position: absolute; top: 22px; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-50%); }
.scale-mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mid); border: 2px solid var(--bg); }
.scale-mark .lbl { font-family: var(--sans); font-size: 10px; color: var(--mid); white-space: nowrap; }
.scale-mark.this .dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); width: 12px; height: 12px; }
.scale-mark.this .lbl { color: var(--danger); }
.scale-mark.this::after { content: 'THIS CASE'; position: absolute; bottom: 100%; margin-bottom: 4px; font-family: var(--sans); font-size: 9px; letter-spacing: 0.18em; color: var(--danger); }
.scale-list { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.scale-list .row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; font-family: var(--sans); font-size: 11px; }
.scale-list .row .name { color: var(--mid); }
.scale-list .row .name .yr { color: var(--muted); }
.scale-list .row .v { font-weight: 500; color: var(--ink); }

/* Leverage */
.lev-card { margin: 6px 0 18px; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lev-tot { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 28px; }
.lev-tot-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.lev-tot-val { font-family: var(--sans); font-weight: 700; font-size: clamp(56px,9vw,104px); letter-spacing: -0.06em; line-height: 0.9; color: var(--danger); margin-bottom: 14px; }
.lev-tot-delta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lev-delta-pill { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--good); background: var(--good-soft); padding: 5px 10px; border-radius: var(--radius-pill); letter-spacing: 0.04em; }
.lev-tot-sub { font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
.lev-breakdown { display: flex; flex-direction: column; min-width: 220px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.lev-bd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 14px; font-family: var(--sans); font-size: 11.5px; border-bottom: 1px solid var(--rule); }
.lev-bd-row:last-child { border-bottom: 0; }
.lev-bd-row span:first-child { color: var(--mid); }
.lev-bd-row .lev-pos { color: var(--good); }
.lev-bar { position: relative; min-height: 60px; }
.lev-bar-track { position: absolute; left: 0; right: 0; top: 4px; height: 6px; background: var(--rule); border-radius: var(--radius-pill); }
.lev-bar-fill { position: absolute; left: 0; top: 4px; height: 6px; background: var(--danger); border-radius: var(--radius-pill); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.lev-bar-marker { position: absolute; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); box-shadow: 0 0 0 4px var(--danger-soft); transform: translateX(-50%); transition: left 0.6s cubic-bezier(0.22,1,0.36,1); }
.lev-bar-anchors { position: relative; margin-top: 22px; height: 16px; font-family: var(--sans); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.lev-bar-anchors > span:first-child { position: absolute; left: 0; }
.lev-bar-anchors > span:last-child  { position: absolute; right: 0; }
.lev-list-hd { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; padding: 12px 0 8px; border-bottom: 1px solid var(--rule); }
.lev-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.lev-row-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; box-shadow: 0 0 0 4px var(--danger-soft); }
.lev-row-name { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.lev-row-sub { font-family: var(--sans); font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: 0.06em; }
.lev-row-amt { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--good); }

/* Trajectory */
.traj-card { padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.traj-track { position: relative; height: 100px; margin: 38px 6px 8px; }
.traj-line { position: absolute; left: 0; right: 0; top: 40px; height: 4px; background: var(--danger); border-radius: var(--radius-pill); opacity: 0.55; }
.traj-step { position: absolute; top: 30px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); cursor: pointer; transition: transform 0.15s; }
.traj-step:hover { transform: translateX(-50%) translateY(-2px); }
.traj-step.focus { transform: translateX(-50%) translateY(-4px); }
.traj-step .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--mid); position: relative; z-index: 2; }
.traj-step.now .dot { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.traj-step.focus .dot { border-color: var(--ink); }
.traj-step .val { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: -0.025em; position: absolute; top: -22px; white-space: nowrap; color: var(--ink); }
.traj-step.now .val { color: var(--danger); }
.traj-step .lbl { font-family: var(--sans); font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; position: absolute; top: 26px; white-space: nowrap; text-align: center; }
.traj-step.now .lbl { color: var(--danger); }
.traj-delta { font-family: var(--sans); font-size: 9.5px; color: var(--good); position: absolute; top: -36px; white-space: nowrap; }
.traj-detail { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); margin-top: 8px; }
.traj-detail .det-l { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--danger); white-space: nowrap; }
.traj-detail .det-m { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--mid); }
.traj-detail .det-r { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--good); text-align: right; white-space: nowrap; }

/* Lawyers */
.lawyer { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.lawyer:first-child { border-top: 1px solid var(--rule); }
.lawyer-av { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.02em; }
.lawyer-body { display: flex; flex-direction: column; gap: 8px; }
.lawyer-name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lawyer-name { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.lawyer-sub { font-family: var(--sans); font-size: 11px; color: var(--mid); }
.lawyer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fit-dots { font-size: 11px; letter-spacing: 0.18em; color: var(--muted); font-family: var(--sans); }
.fit-dots.fit-5 { color: var(--good); }
.fit-dots.fit-4 { color: var(--good); opacity: 0.85; }
.fit-dots.fit-3 { color: var(--info); }
.fit-dots.fit-2 { color: var(--mid); }
.fit-dots.fit-1 { color: var(--muted); }
.tag { font-family: var(--sans); font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 2px; background: var(--paper-2); color: var(--mid); letter-spacing: 0.04em; }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.status { cursor: pointer; user-select: none; border: 1px solid transparent; transition: all 0.15s; }
.tag.status.emailed   { background: var(--warn-soft); color: var(--warn); }
.tag.status.voicemail { background: var(--paper-2); color: var(--muted); }
.tag.status.callback  { background: var(--info-soft); color: var(--info); }
.tag.status.retained  { background: var(--good-soft); color: var(--good); }
.tag.status.declined  { background: var(--danger-soft); color: var(--danger); }
.tag.urgent { background: var(--info-soft); color: var(--info); }
.tag.fail   { background: var(--danger-soft); color: var(--danger); }
.lawyer.priority .lawyer-name::after {
  content: 'Priority'; margin-left: 10px; vertical-align: middle;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--info-soft); color: var(--info);
}
.lawyer-actions { display: flex; flex-direction: column; gap: 6px; min-width: 200px; align-items: flex-end; }
.contact { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--paper-2); font-family: var(--sans); font-size: 11.5px; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); transition: all 0.15s; }
.contact:hover { border-color: var(--ink); }
.contact.primary { background: var(--ink); color: var(--bg); }
.contact .ic { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.contact.primary .ic { color: color-mix(in oklab, var(--bg) 60%, transparent); }

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 140px 24px 1fr; gap: 12px; align-items: start; }
.tl-when { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; min-height: 60px; }
.tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--mid); margin-top: 6px; flex-shrink: 0; }
.tl-dot.now  { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.tl-dot.good { background: var(--good); }
.tl-dot.warn { background: var(--warn); }
.tl-dot.bad  { background: var(--danger); }
.tl-line { width: 1px; flex: 1; background: var(--rule); margin: 6px 0; min-height: 18px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { padding-bottom: 32px; }
.tl-title { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -0.025em; }
.tl-desc { font-family: var(--sans); font-size: 13px; color: var(--mid); line-height: 1.5; margin-top: 4px; max-width: 56ch; }

/* Checklist */
.cl-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cl-hd .l { font-family: var(--sans); font-size: 11px; color: var(--mid); }
.cl-hd .c { font-family: var(--sans); font-size: 11px; font-weight: 500; }
.cl-bar { height: 2px; background: var(--rule); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 10px; }
.cl-bar > div { height: 100%; background: var(--good); width: 0; transition: width 0.5s ease; border-radius: var(--radius-pill); }
.cl-list { border-top: 1px solid var(--rule); }
.cl-item { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 14px; padding: 13px 0; align-items: center; border-bottom: 1px solid var(--rule); cursor: pointer; user-select: none; transition: opacity 0.15s; }
.cl-box { width: 18px; height: 18px; border-radius: 3px; border: 1.5px solid var(--rule-strong); display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.cl-box.done { background: var(--good); border-color: var(--good); }
.cl-box.done::after { content: '✓'; font-size: 12px; color: var(--bg); font-weight: 700; line-height: 1; }
.cl-label { font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.cl-label.done { color: var(--muted); text-decoration: line-through; }
.cl-lev { font-family: var(--sans); font-size: 11px; color: var(--mid); }
.cl-pri { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.cl-pri.now  { color: var(--danger); }
.cl-pri.soon { color: var(--warn); }

/* Call script */
.script { font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--mid); padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); white-space: pre-wrap; max-height: 360px; overflow-y: auto; }
.script-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.copy-btn { background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 6px 12px; font-family: var(--sans); font-size: 10px; color: var(--mid); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }
.copy-btn.copied { background: var(--good); color: var(--bg); border-color: var(--good); }

/* Prose */
.prose { font-family: var(--sans); font-size: 14.5px; line-height: 1.65; color: var(--ink); max-width: 68ch; padding: 4px 0; font-weight: 400; letter-spacing: -0.003em; }
.prose em { color: var(--danger); font-style: italic; }
.prose .warn { color: var(--warn); }
.prose .good { color: var(--good); }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }

/* Drafts */
details.draft { border-bottom: 1px solid var(--rule); padding: 14px 0; }
details.draft > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; }
details.draft > summary::-webkit-details-marker { display: none; }
details.draft .d-title { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.025em; }
details.draft .d-kind { font-family: var(--sans); font-size: 10px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
details.draft .d-body { margin-top: 14px; padding: 16px 18px; background: var(--paper-2); border-left: 2px solid var(--rule-strong); border-radius: 0 4px 4px 0; font-family: var(--sans); font-size: 12px; color: var(--mid); line-height: 1.7; white-space: pre-wrap; }

/* Risks */
.risks { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.risk { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.risk .k { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.risk.high .k { color: var(--danger); }
.risk.med  .k { color: var(--warn); }
.risk .v { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink); }
.risk .v em { color: var(--mid); font-style: italic; }

/* Tweaks panel */
.tw-panel { position: fixed; right: 22px; bottom: 22px; z-index: 100; width: 280px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); overflow: hidden; }
.tw-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.tw-title { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.tw-close { width: 22px; height: 22px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--rule-strong); color: var(--mid); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.tw-close:hover { color: var(--ink); border-color: var(--ink); }
.tw-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; }
.tw-sec { display: flex; flex-direction: column; gap: 8px; }
.tw-lbl { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: baseline; }
.tw-val { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.tw-seg { display: flex; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; }
.tw-seg button { flex: 1; padding: 8px 10px; background: transparent; border: none; font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); cursor: pointer; transition: all 0.15s; border-right: 1px solid var(--rule); }
.tw-seg button:last-child { border-right: 0; }
.tw-seg button.active { background: var(--ink); color: var(--bg); }
.tw-swatches { display: flex; gap: 8px; }
.tw-swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--rule); cursor: pointer; padding: 0; position: relative; transition: all 0.15s; }
.tw-swatches button.active { border-color: var(--ink); transform: scale(1.05); }
.tw-swatches button.active::after { content: ''; position: absolute; inset: -5px; border: 1px solid var(--ink); border-radius: 50%; }
.tw-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--rule); border-radius: var(--radius-pill); outline: none; }
.tw-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 2px var(--danger-soft); }
.tw-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.tw-toggle input { display: none; }
.tw-toggle span { position: absolute; inset: 0; background: var(--rule-strong); border-radius: var(--radius-pill); transition: background 0.2s; }
.tw-toggle span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform 0.2s; }
.tw-toggle input:checked + span { background: var(--good); }
.tw-toggle input:checked + span::after { transform: translateX(16px); background: white; }
.tw-sec:has(.tw-toggle) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.tw-sec:has(.tw-toggle) .tw-lbl { margin-bottom: 0; }

/* Density */
body[data-density="compact"] .section { margin-top: 36px; }
body[data-density="compact"] .hero { padding: 32px 0 18px; }
body[data-density="compact"] .clock { padding: 14px 0 4px; margin: 12px 0 22px; }
body[data-density="compact"] .stack-tot { padding: 16px 0; }
body[data-density="compact"] .tristat .col { padding: 14px 14px 14px 0; }
body[data-density="compact"] .tristat .col:not(:first-child) { padding-left: 14px; }
body[data-density="compact"] .next-action { padding: 14px 18px; }

/* Visibility toggles */
body[data-annot="off"] .witness-ann { display: none; }
body[data-decay="off"] .clock-decay-svg { display: none; }

/* Hero scale */
.hero-title { font-size: calc(clamp(40px, 8vw, 92px) * var(--hero-scale, 1)); }

/* Footer */
footer { margin-top: 80px; padding: 28px 0; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-family: var(--sans); font-size: 10px; color: var(--muted); letter-spacing: 0.06em; }

/* Responsive */
@media (max-width: 1024px) { .strip > div:nth-of-type(3) { display: none; } }
@media (max-width: 880px) {
  .strip { grid-template-columns: auto 1fr auto auto; gap: 12px; padding: 11px 18px; }
  .strip .meta { gap: 14px; font-size: 10.5px; }
}
@media (max-width: 700px) {
  .strip { grid-template-columns: auto 1fr auto; padding: 10px 16px; gap: 10px; }
  .strip .meta { display: none; }
  .page { padding: 0 18px 80px; }
  .hero { padding: 36px 0 24px; }
  .tabs { gap: 18px; overflow-x: auto; }
  .tristat { grid-template-columns: 1fr; }
  .tristat .col { border-right: 0; border-bottom: 1px solid var(--rule); padding: 16px 0; }
  .tristat .col:last-child { border-bottom: 0; padding-bottom: 0; }
  .ground-hd { grid-template-columns: 36px 1fr auto; gap: 14px; }
  .ground-hd .ground-val { display: none; }
  .ground-mag { margin-left: 50px; }
  .ground-inner { padding-left: 50px; }
  .lawyer { grid-template-columns: 1fr; }
  .lawyer-actions { align-items: flex-start; }
  .next-action { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 96px 20px 1fr; }
  .facts .row { grid-template-columns: 110px 1fr; gap: 14px; }
  .stack-row { grid-template-columns: 40px 1fr 80px; gap: 12px; }
  .j-entry { grid-template-columns: 100px 1fr; gap: 16px; }
  .risk { grid-template-columns: 88px 1fr; gap: 12px; }
  .traj-detail { grid-template-columns: 1fr; }
  .lev-tot { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .page { padding: 0 14px 64px; overflow-x: hidden; }
  .scale-track { overflow: hidden; }
  .strip { padding: 8px 14px; gap: 8px; }
  .strip .brand { font-size: 13px; padding-right: 10px; }
  .hero { padding: 28px 0 20px; }
  .hero-title { font-size: clamp(34px, 11vw, 92px); }
  .tristat .val { font-size: clamp(26px, 9vw, 48px); }
  .stack-tot .l-val { font-size: clamp(38px, 13vw, 84px); }
  .lev-tot-val { font-size: clamp(42px, 15vw, 104px); }

  /* Fixed label columns are too cramped at phone widths -- stack label over value */
  .facts .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .j-entry { grid-template-columns: 1fr; gap: 4px; }
  .risk { grid-template-columns: 1fr; gap: 6px; }

  .tl-item {
    grid-template-columns: 18px 1fr;
    grid-template-areas: "rail when" "rail body";
    column-gap: 12px;
  }
  .tl-rail { grid-area: rail; }
  .tl-when { grid-area: when; padding-top: 0; margin-bottom: 2px; }
  .tl-body { grid-area: body; }

  .stack-row {
    grid-template-columns: 28px 1fr;
    grid-template-areas: "badge mid" "badge amt";
    column-gap: 12px; row-gap: 6px;
  }
  .stack-row .badge { grid-area: badge; }
  .stack-row .mid { grid-area: mid; }
  .stack-row .amt { grid-area: amt; text-align: left; }

  .ground-hd { grid-template-columns: 24px 1fr auto; gap: 10px; }
  .ground-mag { margin-left: 34px; }
  .ground-inner { padding-left: 34px; }

  .next-action { padding: 16px 18px; }
  .lawyer-actions { min-width: 0; width: 100%; align-items: stretch; }
  .lev-breakdown { min-width: 0; }

  /* Long case-fact strings (names, addresses, citations) must wrap, not overflow */
  .facts .v, .j-entry .what, .risk .v, .witness-stmt,
  .ground-da { grid-template-columns: 1fr; gap: 3px; }
  .ground-cite, .ground-da-text, .lawyer-name, .tl-title, .tl-desc {
    overflow-wrap: anywhere;
  }
}
@media print {
  body { background: white !important; color: #0d0d0d !important; }
  .auth-overlay, .strip, .tw-panel, .tabs, .copy-btn, .traj-card, .journal-add, .journal-form, .print-btn { display: none !important; }
  .tab-panel + .tab-panel { page-break-before: always; margin-top: 0; border-top: none; }
  .page { padding: 24px !important; max-width: 100% !important; }
  .clock-decay-svg { display: none !important; }
  .ground-body { max-height: none !important; }
  /* Must target body, not :root — that is where the token aliases are declared. */
  body { --bg: #fff !important; --paper: #fff !important; --paper-2: #f2f2f2 !important; --ink: #0d0d0d !important; --mid: rgba(0,0,0,0.65) !important; --muted: rgba(0,0,0,0.45) !important; --rule: rgba(0,0,0,0.10) !important; --rule-strong: rgba(0,0,0,0.20) !important; }
}

/* ===== CASE SWITCHER ===== */
.case-switcher { display:flex; gap:4px; }
.cs-btn { font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:0.08em;
  padding:4px 10px; border:1px solid var(--rule-strong); border-radius:var(--radius-sm);
  background:transparent; color:var(--mid); cursor:pointer; transition:all 0.15s; }
.cs-btn.active { background:var(--danger); color:#fff; border-color:var(--danger); }
.cs-btn:not(.active):hover { background:var(--paper-2); color:var(--ink); }

/* N-case visibility: hide only non-active blocks; active blocks keep their natural display */
.case-family, .case-muni { display:none; }
body[data-activecase="rcmp"]   .case-family, body[data-activecase="rcmp"]   .case-muni,
body[data-activecase="family"] .case-rcmp,   body[data-activecase="family"] .case-muni,
body[data-activecase="muni"]   .case-rcmp,   body[data-activecase="muni"]   .case-family,
body[data-activecase="bylaw"]  .case-rcmp,   body[data-activecase="bylaw"]  .case-family,  body[data-activecase="bylaw"] .case-muni { display:none !important; }
body[data-activecase="family"] .case-family,
body[data-activecase="muni"]   .case-muni { display:revert !important; }
/* ===========================================================================
   PUBLIC LANDING PAGE (signed out)
   ---------------------------------------------------------------------------
   Structure matches the other house sites: sticky nav (mark + wordmark left,
   log in / register right), full-height hero over an animated background, then
   features / how-it-works / platforms / closing CTA / footer. The sign-in card
   is a modal now, opened from any [data-auth] button.

   Colour: the house signature token --bulb is a yellow. On a litigation tool a
   yellow block reads as a caution flag, so the landing runs on a graphite scale
   mixed from the theme's own text and background instead — one definition that
   inverts correctly in both dark and light without a second palette.
   ======================================================================== */
body {
  --sig:       color-mix(in srgb, var(--text) 58%, var(--bg));  /* bars, marks, cursor */
  --sig-line:  color-mix(in srgb, var(--text) 36%, var(--bg));  /* rules under the sig  */
  --sig-block: color-mix(in srgb, var(--text) 14%, var(--bg));  /* highlight fill       */
  --sig-glow:  color-mix(in srgb, var(--text) 10%, transparent);/* background blooms    */
}
body[data-theme="white"] {
  --sig:       color-mix(in srgb, var(--text) 52%, var(--bg));
  --sig-block: color-mix(in srgb, var(--text) 11%, var(--bg));
  --sig-glow:  color-mix(in srgb, var(--text) 7%, transparent);
}

/* --- Animated background --------------------------------------------------
   Ruled paper drifting up one line at a time, a column grid panning sideways,
   and two slow graphite blooms. No canvas, no JS; all of it stops dead under
   prefers-reduced-motion. */
.lp-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-bg-rules, .lp-bg-grid { position: absolute; inset: -12% -12%; will-change: transform; }
.lp-bg-rules {
  background-image: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--text) 7%, transparent) 0 1px, transparent 1px 38px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  animation: lp-drift 24s linear infinite;
}
.lp-bg-grid {
  background-image: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 120px);
  -webkit-mask-image: radial-gradient(130% 85% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(130% 85% at 50% 0%, #000 0%, transparent 78%);
  animation: lp-pan 70s linear infinite;
}
@keyframes lp-drift { to { transform: translateY(-38px); } }
@keyframes lp-pan   { to { transform: translateX(-120px); } }
.lp-orb {
  position: absolute; width: min(76vw, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--sig-glow), transparent 68%);
  filter: blur(26px); will-change: transform;
}
.lp-orb-a { top: -22%; left: -12%; animation: lp-float-a 34s ease-in-out infinite alternate; }
.lp-orb-b { top:  14%; right: -18%; animation: lp-float-b 44s ease-in-out infinite alternate; }
@keyframes lp-float-a { to { transform: translate3d(13vw, 11vh, 0) scale(1.14); } }
@keyframes lp-float-b { to { transform: translate3d(-11vw, 17vh, 0) scale(0.9); } }

/* --- Nav ---------------------------------------------------------------- */
.lp-nav {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 26px;
  padding: 13px clamp(16px, 4vw, 40px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.lp-logo {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
  font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: -0.035em;
}
.lp-mark { flex: none; }
.lp-links { display: flex; gap: 22px; }
.lp-links a {
  font-family: var(--sans); font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color 0.15s;
}
.lp-links a:hover { color: var(--ink); }
.lp-nav-cta { margin-left: auto; display: flex; gap: 10px; }

/* --- Buttons ------------------------------------------------------------ */
.lp-btn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn-solid { background: var(--ink); color: var(--bg); }
.lp-btn-solid:hover { opacity: 0.88; }
.lp-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.lp-btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.lp-btn-lg { padding: 13px 22px; font-size: 13.5px; }

/* --- Hero --------------------------------------------------------------- */
.lp-hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 336px;
  gap: clamp(32px, 6vw, 72px); align-items: center;
  max-width: 1080px; margin: 0 auto;
  padding: clamp(44px, 8vh, 100px) clamp(20px, 4vw, 40px) clamp(56px, 8vh, 96px);
  min-height: 76vh;
}
.lp-eyebrow {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.lp-h1 {
  font-family: var(--sans); font-size: clamp(32px, 5vw, 54px); line-height: 1.06;
  font-weight: 700; letter-spacing: -0.035em; margin: 0 0 20px; color: var(--ink); max-width: 16ch;
}
.lp-lead { margin: 0 0 30px; max-width: 54ch; font-size: 15.5px; line-height: 1.62; color: var(--mid, var(--muted)); }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chips span {
  font-family: var(--sans); font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 5px 10px;
}

/* The one flourish: the closing phrase sits on a graphite block that wipes in. */
.lp-h1 .hl { position: relative; white-space: nowrap; isolation: isolate; color: var(--ink); }
.lp-h1 .hl::before {
  content: ""; position: absolute; left: -0.08em; right: -0.08em; top: 44%; bottom: 7%;
  background: var(--sig-block); border-bottom: 2px solid var(--sig-line);
  z-index: -1; transform: scaleX(0); transform-origin: left;
  animation: hl-wipe 0.7s var(--ease, ease-out) 0.45s forwards;
}
@keyframes hl-wipe { to { transform: scaleX(1); } }

/* Staggered entrance for the hero column. */
.lp-hero-copy > *, .lp-hero-art > * { opacity: 0; transform: translateY(10px); animation: rise 0.55s var(--ease, ease-out) forwards; }
.lp-hero-copy > *:nth-child(1) { animation-delay: 0.02s; }
.lp-hero-copy > *:nth-child(2) { animation-delay: 0.10s; }
.lp-hero-copy > *:nth-child(3) { animation-delay: 0.18s; }
.lp-hero-copy > *:nth-child(4) { animation-delay: 0.26s; }
.lp-hero-copy > *:nth-child(5) { animation-delay: 0.34s; }
.lp-hero-art > *:nth-child(1) { animation-delay: 0.30s; }
.lp-hero-art > *:nth-child(2) { animation-delay: 0.40s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* --- Hero art: docket card + limitation clock --------------------------- */
.lp-hero-art { display: grid; gap: 14px; align-content: center; }
.lp-docket {
  border: 1px solid var(--rule-strong); background: var(--paper);
  border-radius: var(--radius-md); padding: 14px 16px 12px; font-size: 12px;
}
.dk-head { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 8px; margin-bottom: 10px; }
.dk-head span { color: var(--muted); letter-spacing: 0.1em; font-size: 10px; }
.dk-head b { font-weight: 600; letter-spacing: -0.01em; }
.dk-head b::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 5px;
  background: var(--sig); vertical-align: -1px; animation: dk-blink 1.1s steps(1) infinite; }
@keyframes dk-blink { 50% { opacity: 0; } }
.dk-rows { display: grid; gap: 9px; }
.dk-row { display: grid; grid-template-columns: minmax(0,1fr) 84px; gap: 10px; align-items: center;
  color: var(--muted); font-size: 11.5px; }
.dk-row i { display: block; height: 6px; background: var(--paper-2); position: relative; }
.dk-row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w);
  background: var(--sig); transform: scaleX(0); transform-origin: left;
  animation: dk-fill 0.9s var(--ease, ease-out) forwards; }
.dk-row:nth-child(1) i::after { animation-delay: 0.55s; }
.dk-row:nth-child(2) i::after { animation-delay: 0.70s; }
.dk-row:nth-child(3) i::after { animation-delay: 0.85s; }
.dk-row:nth-child(4) i::after { animation-delay: 1.00s; }
@keyframes dk-fill { to { transform: scaleX(1); } }
.dk-foot { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--rule-strong);
  color: var(--muted); font-size: 10.5px; letter-spacing: 0.06em; }

.lp-clock {
  border: 1px solid var(--rule-strong); background: var(--paper);
  border-radius: var(--radius-md); padding: 13px 16px 12px;
}
.lp-clock-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.lp-clock-track { position: relative; height: 3px; background: var(--paper-2); }
.lp-clock-track i {
  position: absolute; top: -3px; left: 0; width: 9px; height: 9px; background: var(--sig);
  animation: lp-clock-run 7s var(--ease, ease-in-out) infinite alternate;
}
@keyframes lp-clock-run { from { left: 0; } to { left: calc(100% - 9px); } }
.lp-clock-foot { display: flex; justify-content: space-between; margin-top: 9px;
  font-family: var(--sans); font-size: 10.5px; color: var(--muted); }

/* --- Sections ----------------------------------------------------------- */
.lp-section, .lp-final {
  position: relative; z-index: 1; max-width: 1080px; margin: 0 auto;
  scroll-margin-top: 72px;
  padding: clamp(48px, 8vh, 88px) clamp(20px, 4vw, 40px);
  border-top: 1px solid var(--rule);
}
.lp-sec-head { margin-bottom: 34px; max-width: 56ch; }
.lp-sec-head h2 {
  font-family: var(--sans); font-size: clamp(22px, 3vw, 30px); font-weight: 700;
  letter-spacing: -0.03em; margin: 0 0 10px; color: var(--ink);
}
.lp-sec-head p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; }
.lp-card {
  border: 1px solid var(--rule-strong); border-radius: var(--radius-md);
  background: var(--paper); padding: 20px 18px 18px; position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.lp-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sig-line); transform: scaleY(0); transform-origin: top;
  transition: transform 0.25s var(--ease, ease-out);
}
.lp-card:hover { border-color: var(--sig-line); transform: translateY(-2px); }
.lp-card:hover::before { transform: scaleY(1); }
.lp-card-no { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; color: var(--sig); margin-bottom: 12px; }
.lp-card h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); }
.lp-card p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--muted); }

.lp-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule-strong); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); overflow: hidden; }
.lp-steps li {
  counter-increment: step; background: var(--paper); padding: 18px 20px;
  display: grid; grid-template-columns: 40px 190px minmax(0, 1fr); gap: 18px; align-items: baseline;
}
.lp-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; color: var(--sig);
}
.lp-steps b { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.lp-steps span { font-size: 13.5px; line-height: 1.58; color: var(--muted); }

.lp-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lp-plat { border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper); padding: 20px 18px; }
.lp-plat b { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.lp-plat span { display: block; font-size: 13.5px; line-height: 1.58; color: var(--muted); }
.lp-plat a { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sig-line); }

.lp-final { text-align: center; }
.lp-final h2 { font-family: var(--sans); font-size: clamp(26px, 4vw, 38px); font-weight: 700;
  letter-spacing: -0.035em; margin: 0 0 10px; color: var(--ink); }
.lp-final p { margin: 0 0 26px; font-size: 14.5px; color: var(--muted); }
.lp-final .lp-cta-row { justify-content: center; margin-bottom: 0; }

/* Sections rise as they scroll in where the browser supports scroll-driven
   animations; where it does not, the same keyframes just play once on load. */
@supports (animation-timeline: view()) {
  .lp-section, .lp-final {
    animation: rise 0.6s var(--ease, ease-out) both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}

/* --- Footer ------------------------------------------------------------- */
.lp-foot {
  position: relative; z-index: 1; max-width: 1080px; margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 40px) 48px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.lp-foot-brand { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.lp-dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; background: var(--sig); }
.lp-foot-links { display: flex; gap: 18px; }
.lp-foot-links a { font-family: var(--sans); font-size: 12.5px; color: var(--muted); text-decoration: none; }
.lp-foot-links a:hover { color: var(--ink); }
.lp-foot-note { margin-left: auto; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }

/* --- Auth modal --------------------------------------------------------- */
.auth-or { font-family:var(--sans); font-size:10px; color:var(--muted); text-align:center; letter-spacing:0.12em; text-transform:uppercase; margin:14px 0 12px; }
.auth-oauth { background:var(--paper-2); color:var(--ink); border:1px solid var(--rule-strong); }
.auth-btn + .auth-btn { margin-top: 8px; }

.auth-modal {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  overflow-y: auto; animation: lp-fade 0.18s ease-out;
}
.auth-modal[hidden] { display: none; }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.auth-modal .auth-card {
  position: relative; margin: auto;
  box-shadow: 0 24px 60px color-mix(in srgb, #000 38%, transparent);
  animation: lp-pop 0.22s var(--ease, ease-out);
}
@keyframes lp-pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.auth-close {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.auth-close:hover { color: var(--ink); background: var(--paper-2); }

/* Step 2 offers both sign-in and create-account. Which one is the primary
   button depends on which nav button opened the modal — order and weight swap,
   the markup and the ids auth.js binds to do not. */
#authFormPass { display: flex; flex-direction: column; }
#authPassword { order: 1; }
#authFormPass button[type="submit"] { order: 2; }
#authSignup { order: 3; }
#authForgot { order: 4; }
#authErrPass { order: 5; }
.auth-btn-alt { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule-strong); }
.mode-register #authSignup { order: 2; background: var(--ink); color: var(--bg); border: none; }
.mode-register #authFormPass button[type="submit"] { order: 3; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule-strong); }

/* --- Motion / responsive ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lp-bg-rules, .lp-bg-grid, .lp-orb, .lp-clock-track i, .dk-head b::after { animation: none; }
  .lp-hero-copy > *, .lp-hero-art > * { opacity: 1; transform: none; animation: none; }
  .lp-section, .lp-final { animation: none; opacity: 1; transform: none; }
  .lp-h1 .hl::before, .dk-row i::after { transform: scaleX(1); animation: none; }
  .auth-modal, .auth-modal .auth-card { animation: none; }
  .auth-overlay { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .lp-links { display: none; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .lp-hero-art { order: 2; max-width: 420px; }
  .lp-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 14px; }
  .lp-steps li b { grid-column: 2; }
  .lp-steps li span { grid-column: 2; }
}
@media (max-width: 560px) {
  .lp-nav { gap: 12px; padding-inline: 16px; }
  .lp-nav-cta { gap: 8px; }
  .lp-btn { padding: 8px 12px; font-size: 12px; }
  .lp-cta-row .lp-btn { flex: 1 1 100%; }
  .lp-foot { flex-direction: column; align-items: flex-start; }
  .lp-foot-note { margin-left: 0; }
  .auth-modal { padding: 16px; }
  .auth-modal .auth-card { width: 100%; padding: 30px 22px; }
}