/* Legal research tool. Density over whitespace. */

:root {
  --bg: #fbfaf8;
  --panel: #ffffff;
  --ink: #17150f;
  --dim: #6b6559;
  --faint: #6b6459;
  --rule: #ddd8cc;
  --rule-hard: #c3bcab;
  --accent: #7a1f1f;
  --accent-bg: #f6ecea;
  --mark: #ffe9a8;
  --warn-bg: #fff4d6;
  --warn-rule: #d9a441;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Status hues, validated for CVD separation. */
  --good: #137a3d; --warn: #d18b00; --crit: #cc2936;
  --bar: #7a1f1f; --bar-soft: #d8bdb8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130f;
    --panel: #1b1a15;
    --ink: #e8e3d6;
    --dim: #9c9486;
    --faint: #a39c8e;
    --rule: #2e2c24;
    --rule-hard: #423f33;
    --accent: #d98b7f;
    --accent-bg: #2a1c18;
    --mark: #5a4a1a;
    --warn-bg: #33280f;
    --warn-rule: #8a6a20;
    --bar: #d98b7f; --bar-soft: #4a2e2a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- chrome ------------------------------------------------------------ */

header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 14px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-hard);
}
header.top h1 {
  margin: 0; font: 600 14px/1 var(--ui); letter-spacing: .01em;
}
header.top .docket {
  font: 12px/1 var(--mono); color: var(--faint);
}
header.top nav { margin-left: auto; display: flex; gap: 2px; }
header.top nav button {
  font: 13px/1 var(--ui); color: var(--dim);
  background: none; border: 1px solid transparent; border-radius: 3px;
  padding: 5px 9px; cursor: pointer;
}
header.top nav button:hover { background: var(--bg); color: var(--ink); }
header.top nav button[aria-current="true"] {
  color: var(--ink); border-color: var(--rule-hard); background: var(--bg);
}

.banner {
  padding: 8px 14px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-rule);
  font: 13px/1.5 var(--ui);
}
.banner strong { font-weight: 700; }

/* --- layout ------------------------------------------------------------ */

main { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

aside {
  border-right: 1px solid var(--rule);
  padding: 10px 0 40px;
  height: calc(100vh - 39px);
  overflow-y: auto;
  position: sticky; top: 39px;
}
@media (max-width: 860px) { aside { position: static; height: auto; } }

aside section { margin-bottom: 4px; }
aside h2 {
  margin: 10px 0 3px; padding: 0 12px;
  font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint);
}
.facet {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  padding: 3px 12px; border: 0; background: none; cursor: pointer;
  font: 13px/1.4 var(--ui); color: var(--dim); text-align: left;
}
.facet:hover { background: var(--accent-bg); color: var(--ink); }
.facet[aria-pressed="true"] {
  background: var(--accent-bg); color: var(--accent); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.facet .n { margin-left: auto; font: 11px/1 var(--mono); color: var(--faint); }
.facet .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

section.pane { padding: 12px 16px 60px; min-width: 0; }

/* --- search ------------------------------------------------------------ */

.searchbar { display: flex; gap: 6px; margin-bottom: 10px; }
.searchbar input {
  flex: 1; padding: 7px 9px;
  font: 13px/1.2 var(--ui);
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule-hard); border-radius: 3px;
}
.searchbar input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px; border-radius: 3px;
  background: var(--accent-bg); color: var(--accent);
  font: 11px/1.5 var(--ui); border: 1px solid transparent;
}
.chip button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0; font-size: 12px; }

.count { color: var(--faint); font: 11px/1 var(--mono); margin-bottom: 8px; }

/* --- results ----------------------------------------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 44px 68px 150px 88px minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 5px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.row:hover { background: var(--panel); }
.row.focus { background: var(--accent-bg); }
@media (max-width: 860px) {
  .row { grid-template-columns: 44px 68px minmax(0, 1fr); }
  .row .who.row .ph { grid-column: span 1; }
}

.row .day.row .t { font: 12px/1.5 var(--mono); color: var(--faint); white-space: nowrap; }
.row .who { font: 13px/1.5 var(--ui); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who.witness { color: var(--ink); font-weight: 600; }
.row .who.court { font-style: italic; }
.row .ph { font: 11px/1.5 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.row .txt { font: 14.5px/1.6 var(--sans); min-width: 0; }
.row mark { background: var(--mark); color: inherit; padding: 0 1px; border-radius: 2px; }
.row .flag { color: var(--warn-rule); font: 11px/1 var(--mono); }

/* --- timeline ---------------------------------------------------------- */

.clock { max-width: 900px; }
.clock h2 { font: 600 15px/1.3 var(--ui); margin: 0 0 2px; }
.clock .sub { color: var(--dim); font-size: 12px; margin-bottom: 14px; }

.tl { border-left: 2px solid var(--rule-hard); margin-left: 62px; }
.tl-row {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 5px 0 5px 14px; border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.tl-row:hover { background: var(--panel); }
.tl-row::before {
  content: ""; position: absolute; left: -5px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule-hard);
}
.tl-row[data-key="1"]::before { background: var(--accent); }
.tl-row .time {
  position: absolute; left: -76px; width: 62px; text-align: right;
  font: 12px/1.7 var(--mono); color: var(--ink);
}
.tl-row .ev { font: 14.5px/1.6 var(--sans); }
.tl-row .src { font: 11.5px/1.7 var(--mono); color: var(--faint); white-space: nowrap; }
.tl-row .hits { font: 11px/1.6 var(--mono); color: var(--accent); }

/* --- tables ------------------------------------------------------------ */

table.grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.grid th {
  text-align: left; padding: 4px 8px 4px 0;
  font: 600 11px/1.4 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--rule-hard);
}
table.grid td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
table.grid tr:hover td { background: var(--panel); }
table.grid .m { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
table.grid .dim { color: var(--dim); }
table.grid .clickable { cursor: pointer; }

.pill {
  display: inline-block; padding: 0 5px; border-radius: 2px;
  font: 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--rule-hard); color: var(--dim);
}
.pill.commonwealth { color: #8a4a12; border-color: #c9a06a; }
.pill.defense { color: #1f4f7a; border-color: #7aa3c9; }

.empty {
  padding: 28px 16px; text-align: center; color: var(--dim);
  border: 1px dashed var(--rule-hard); border-radius: 4px; font-size: 13px;
}
.empty code { font: 11px/1.6 var(--mono); background: var(--panel); padding: 1px 4px; border-radius: 2px; }

/* --- mobile ------------------------------------------------------------ */

.aside-toggle { display: none; }

@media (max-width: 860px) {
  /* Density is right at a desk; on a phone it just costs legibility. */
  body { font-size: 15px; }

  header.top { flex-wrap: wrap; gap: 6px 10px; padding: 7px 10px; }
  header.top .docket { order: 3; width: 100%; }
  header.top nav {
    order: 4; width: 100%; margin-left: 0;
    flex-wrap: wrap; gap: 3px;
  }
  header.top nav button {
    white-space: nowrap; padding: 7px 11px; font-size: 13px;
    border: 1px solid var(--rule); border-radius: 999px;
  }

  .banner { font-size: 13px; padding: 8px 12px; }

  .aside-toggle {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border: 0; border-bottom: 1px solid var(--rule);
    background: var(--panel); color: var(--dim); cursor: pointer;
    font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  }
  aside { border-right: 0; border-bottom: 1px solid var(--rule-hard); padding-bottom: 10px; }
  aside.collapsed { display: none; }

  section.pane { padding: 10px 12px 60px; }

  /* Rows reflow to two lines: metadata above, text below. */
  .row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "day t ph" "who who who" "txt txt txt";
    gap: 2px 8px; padding: 8px 2px;
  }
  .row .day { grid-area: day; }
  .row .t { grid-area: t; font-size: 12px; }
  .row .ph { grid-area: ph; text-align: right; }
  .row .who { grid-area: who; white-space: normal; font-size: 13.5px; }
  .row .txt { grid-area: txt; margin-top: 3px; font-size: 15px; line-height: 1.5; }

  /* The timeline keeps its clock reading, but the time moves inline. */
  .tl { margin-left: 0; }
  .tl-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0 8px 12px; }
  .tl-row .time {
    position: static; width: auto; text-align: left; display: block;
    color: var(--accent); font-weight: 600;
  }
  .tl-row .src { white-space: normal; }

  dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; margin: 0; }
}

/* Reference tables reflow into labelled cards. A 5-column roster cannot be read
   at 390px by scrolling it sideways -- the columns have to stack. */
@media (max-width: 620px) {
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tr {
    border: 1px solid var(--rule); border-radius: 4px;
    padding: 7px 9px; margin-bottom: 7px; background: var(--panel);
  }
  table.grid tr:hover td { background: none; }
  table.grid td {
    border: 0; padding: 2px 0;
    display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px;
    align-items: baseline; font-size: 13.5px;
  }
  table.grid td::before {
    content: attr(data-label);
    font: 600 11px/1.6 var(--ui); letter-spacing: .06em; text-transform: uppercase;
    color: var(--faint);
  }
  table.grid td:empty { display: none; }
  /* The td is a grid, so an inline-block child would otherwise stretch. */
  table.grid td > .pill { justify-self: start; }
  /* The identifying cell is the card's heading, so it loses its label. */
  table.grid td.hd { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
  table.grid td.hd::before { content: none; }
}

@media (max-width: 480px) {
  .row { grid-template-columns: auto auto; grid-template-areas: "day t" "ph ph" "who who" "txt txt"; }
  .row .ph { text-align: left; }
}

/* Touch targets stay finger-sized on coarse pointers. */
@media (pointer: coarse) {
  .facet { padding: 8px 12px; }
  .row.tl-row { padding-top: 9px; padding-bottom: 9px; }
  header.top nav button { padding: 9px 12px; }
}

/* --- context view ------------------------------------------------------ */

dialog {
  width: min(780px, 92vw); max-height: 82vh; padding: 0;
  border: 1px solid var(--rule-hard); border-radius: 5px;
  background: var(--panel); color: var(--ink);
}
dialog::backdrop { background: rgba(0,0,0,.42); }
dialog header {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--panel);
}
dialog header .m { font: 11px/1.4 var(--mono); color: var(--faint); }
dialog header button { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--dim); }
dialog .body { padding: 8px 12px 16px; overflow-y: auto; }
.ctx { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.ctx.focus { background: var(--accent-bg); margin: 0 -12px; padding: 5px 12px; }
.ctx .meta { font: 11px/1.6 var(--mono); color: var(--faint); }
.ctx .sp { font-weight: 600; font-size: 12px; }
.ctx .tx { font: 15px/1.65 var(--sans); }


/* --- provenance -------------------------------------------------------- */

#provenance {
  grid-column: 1 / -1;
  border-top: 2px solid var(--rule-hard);
  margin-top: 24px; padding: 18px 20px 48px;
  background: var(--panel);
  font: 14.5px/1.75 var(--ui); color: var(--dim);
}
#provenance p { margin: 0 0 10px; max-width: 72ch; }
#provenance strong { color: var(--ink); }
#provenance #live-notice { color: var(--ink); }
#provenance .corrections { font-size: 12px; color: var(--faint); }
.unattr {
  font-family: var(--mono); font-size: .92em;
  color: var(--faint); border-bottom: 1px dotted var(--faint);
}
.row .who.unattributed.ctx .sp.unattributed {
  color: var(--faint); font-weight: 400; font-style: italic;
}
@media (max-width: 860px) { #provenance { font-size: 13px; padding: 14px 12px 40px; } }


/* --- metric primitives (shared by Status pane and /admin) -------------- */

.tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 14px; }
.tile { border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; background: var(--panel); }
.tile .k { font: 600 11px/1.4 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.tile .v { font: 600 22px/1.2 var(--mono); margin-top: 2px; }
.tile .d { font: 11px/1.4 var(--ui); color: var(--dim); margin-top: 1px; }
.tile .v.good { color: var(--good); }
.tile .v.warn { color: var(--warn); }
.tile .v.crit { color: var(--crit); }

.barlist { display: grid; gap: 3px; }
.barrow { display: grid; grid-template-columns: minmax(90px, 1fr) 44px; gap: 8px; align-items: center;
  font: 12px/1.5 var(--ui); position: relative; padding: 1px 0; }
.barrow .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1; }
.barrow .num { font: 11px var(--mono); text-align: right; color: var(--dim); }
.barrow .track { position: absolute; inset: 0 52px 0 0; }
.barrow .fill { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--bar-soft); border-radius: 0 3px 3px 0; }
.barrow:hover .fill { background: var(--bar); opacity: .35; }

.cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
h3.sec { font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin: 20px 0 7px; padding-bottom: 5px; border-bottom: 1px solid var(--rule-hard); }

/* --- search chronology -------------------------------------------------- */

.qchip {
  font-family: var(--sans); font-size: 15px; line-height: 1.65;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px; padding: 2px 7px;
}
.qchip.linked {
  cursor: pointer; border-color: var(--accent);
  background: var(--accent-bg); color: var(--accent);
}
.qchip.linked:hover { border-style: solid; text-decoration: underline; }

.nearby {
  margin-top: 7px; padding-left: 10px;
  border-left: 2px solid var(--rule);
  font: 13px/1.65 var(--ui); color: var(--dim);
}
.nearby .nd { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.nearby .np { color: var(--faint); font-style: italic; }

.xref {
  display: inline-block; margin-top: 7px;
  font: 11.5px/1 var(--ui); color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.xref:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .qchip { font-size: 14px; }
  .nearby { font-size: 12.5px; }
}

/* --- day summaries + stepper -------------------------------------------- */

.notice {
  border: 1px solid var(--warn-rule); background: var(--warn-bg);
  border-radius: 4px; padding: 12px 14px; margin: 11px 0 16px;
  font: 14.5px/1.7 var(--ui); max-width: 78ch;
}
.notice strong { color: var(--ink); }

.stepper {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  border: 1px solid var(--rule-hard); border-radius: 4px;
  background: var(--panel); padding: 8px 10px; margin-bottom: 8px;
}
.stepper .nav {
  font: 12px/1 var(--ui); color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule-hard); border-radius: 3px;
  padding: 8px 11px; cursor: pointer; white-space: nowrap;
}
.stepper .nav:disabled { opacity: .35; cursor: default; }
.stepper .stephead { text-align: center; min-width: 0; }
.stepper .sdate { font: 600 16px/1.35 var(--mono); }
.stepper .smeta {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  flex-wrap: wrap; font: 12.5px/1.6 var(--ui); color: var(--dim); margin-top: 2px;
}

.strip { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 12px; }
.strip .pip {
  font: 11px/1 var(--mono); min-width: 24px; padding: 6px 4px;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--panel); color: var(--dim); cursor: pointer;
}
.strip .pip.on { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--ink); font-weight: 700; }
.strip .pip.reported { border-color: var(--good); }
.strip .pip.sparse { border-color: var(--rule-hard); }
.strip .pip.unverified { border-color: var(--warn); }
.strip .pip.expected { border-color: var(--crit); border-style: dashed; }

.cov.phase {
  font: 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 2px; border: 1px solid var(--rule-hard); color: var(--dim);
}
.cov.reported { color: var(--good); border-color: var(--good); }
.cov.unverified { color: var(--warn); border-color: var(--warn); }
.cov.expected { color: var(--crit); border-color: var(--crit); }

.day { border-top: 1px solid var(--rule); padding-top: 10px; }
.dsum { font: 18px/1.75 var(--sans); margin: 0 0 12px; max-width: 74ch; }
.dmeta { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-bottom: 6px; }
.dmeta .lbl {
  font: 600 11px/1.7 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); min-width: 66px;
}
.tag {
  font: 13.5px/1.6 var(--ui); padding: 4px 9px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
}
.tag.live { cursor: pointer; border-color: var(--accent); color: var(--accent); }
.tag.dim { color: var(--dim); }
.tag.src { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }

.grouphead {
  padding: 7px 4px 5px; border-bottom: 1px solid var(--rule-hard);
  font: 12px/1.4 var(--ui); color: var(--dim);
}
.grouphead strong { color: var(--ink); }
.srow {
  display: grid; grid-template-columns: 84px 74px minmax(0, 1fr);
  gap: 10px; align-items: baseline; padding: 6px 4px;
  border-bottom: 1px solid var(--rule); cursor: pointer;
}
.srow:hover { background: var(--panel); }
.srow .t { font: 11px/1.5 var(--mono); color: var(--faint); }
.srow .txt { font: 15.5px/1.65 var(--sans); }
.srow mark { background: var(--mark); color: inherit; }

@media (max-width: 860px) {
  .stepper { grid-template-columns: 1fr; gap: 7px; }
  .stepper .nav { width: 100%; }
  .stepper .stephead { order: -1; }
  .dsum { font-size: 15.5px; }
  .dmeta .lbl { min-width: 100%; }
  .srow { grid-template-columns: 1fr; gap: 2px; }
}

/* --- overview ----------------------------------------------------------- */

.hero { border-bottom: 2px solid var(--rule-hard); padding-bottom: 12px; margin-bottom: 14px; }
.hero h2 { font: 600 24px/1.25 var(--sans); margin: 0 0 5px; letter-spacing: -.01em; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 4px 15px; align-items: baseline;
  font: 13px/1.6 var(--ui); color: var(--dim);
}
.hero-meta .m { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.hero-issue {
  margin: 10px 0 0; padding-left: 11px; border-left: 3px solid var(--accent);
  font: 16.5px/1.75 var(--sans); color: var(--ink); max-width: 74ch;
}

.cardgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.card {
  border: 1px solid var(--rule); border-radius: 4px; padding: 11px 13px;
  background: var(--panel);
}
.card.clickable { cursor: pointer; transition: border-color .12s, transform .12s; }
.card.clickable:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-head { display: flex; gap: 9px; align-items: baseline; margin-bottom: 5px; }
.card-head .m { font: 12px/1.4 var(--mono); color: var(--ink); font-weight: 600; }
.card-title { font: 600 15.5px/1.35 var(--ui); margin-bottom: 3px; }
.card p { margin: 0; font: 14.5px/1.65 var(--ui); color: var(--dim); }
.card .more {
  display: inline-block; margin-top: 8px;
  font: 11.5px/1 var(--ui); color: var(--accent);
}
.prose { font: 15.5px/1.8 var(--sans); color: var(--dim); max-width: 76ch; margin: 0; }

/* Nav reads as one continuous control rather than nine loose buttons. */
header.top nav {
  gap: 1px; background: var(--bg);
  border: 1px solid var(--rule); border-radius: 4px; padding: 2px;
}
header.top nav button { border-radius: 3px; border-color: transparent; }
header.top nav button[aria-current="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header.top nav button[aria-current="true"] { color: #14130f; }
}

@media (max-width: 860px) {
  .hero h2 { font-size: 19px; }
  .hero-issue { font-size: 14px; }
  header.top nav { border: 0; padding: 0; background: none; gap: 3px; }
  header.top nav button { border-color: var(--rule); }
  .cardgrid { grid-template-columns: 1fr; }
}

/* With no corpus there are no facets, so the grid collapses to one column. */
body.no-rail main { grid-template-columns: minmax(0, 1fr); }
body.no-rail aside { display: none; }
body.no-rail section.pane { padding-left: 22px; padding-right: 22px; max-width: 1180px; }
@media (max-width: 860px) {
  body.no-rail section.pane { padding-left: 12px; padding-right: 12px; }
}

/* --- evidence ----------------------------------------------------------- */

body.no-rail section.pane { margin-inline: auto; }

.disc {
  border: 1px solid var(--rule); border-left-width: 3px; border-radius: 4px;
  padding: 10px 12px; margin-bottom: 9px; background: var(--panel);
}
.disc.sev-high { border-left-color: var(--crit); }
.disc.sev-medium { border-left-color: var(--warn); }
.disc.sev-low { border-left-color: var(--rule-hard); }
.disc-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 5px; }
.disc-title { font: 600 16px/1.4 var(--ui); flex: 1; min-width: 200px; }
.disc-status { font: 11px/1.6 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.sevtag {
  font: 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 2px; border: 1px solid currentColor;
}
.sevtag.high { color: var(--crit); }
.sevtag.medium { color: var(--warn); }
.sevtag.low { color: var(--faint); }
.why { margin: 0 0 10px; font: 14.5px/1.7 var(--ui); color: var(--dim); max-width: 78ch; }

.positions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pos { border: 1px solid var(--rule); border-radius: 3px; padding: 8px 10px; background: var(--bg); }
.pos-n { font: 600 11px/1.7 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pos p { margin: 3px 0 7px; font: 15.5px/1.65 var(--sans); }
.pos-src { font: 11.5px/1.6 var(--mono); color: var(--accent); }
.disc-note {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed var(--rule);
  font: 13px/1.6 var(--ui); color: var(--faint);
}

.thread { border-top: 1px solid var(--rule); padding: 11px 0; }
.thread-title { font: 600 16.5px/1.4 var(--ui); margin-bottom: 3px; }
.bears { font: 14px/1.65 var(--ui); color: var(--ink); margin-bottom: 5px; }
.bears .lbl { font: 600 11px/1.7 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
ul.facts { list-style: none; margin: 6px 0 0; padding: 0; }
ul.facts li {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--rule);
}
ul.facts .when { font: 12px/1.6 var(--mono); color: var(--accent); white-space: nowrap; }
ul.facts .f { font: 15.5px/1.65 var(--sans); }
ul.facts .src { font: 11.5px/1.7 var(--mono); color: var(--faint); text-align: right; white-space: nowrap; }

@media (max-width: 860px) {
  ul.facts li { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  ul.facts .src { text-align: left; white-space: normal; }
  .positions { grid-template-columns: 1fr; }
}

/* --- structured day blocks ---------------------------------------------- */

h4.blockhead {
  font: 600 12px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin: 18px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}

.wit {
  border-left: 3px solid var(--rule-hard); padding: 2px 0 2px 12px;
  margin-bottom: 13px;
}
.wit-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.wit-name { font: 600 17px/1.35 var(--ui); }
.wit-time { font: 12.5px/1.6 var(--mono); color: var(--faint); }
.wit-role { font: 14.5px/1.55 var(--ui); color: var(--dim); margin-top: 1px; }
.wit-exam { font: 12.5px/1.65 var(--mono); color: var(--accent); margin-top: 3px; white-space: pre; }

ul.points { list-style: none; margin: 7px 0 0; padding: 0; }
ul.points li {
  position: relative; padding: 3px 0 3px 15px;
  font: 16.5px/1.7 var(--sans);
}
ul.points li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rule-hard);
}

ul.track { list-style: none; margin: 0; padding: 0; }
ul.track li {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px;
  align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rule);
  font: 15px/1.65 var(--ui);
}
ul.track li .tm { font: 13px/1.65 var(--mono); color: var(--accent); }
ul.track li:only-child, ul.track li:not(:has(.tm)) { grid-template-columns: 1fr; }

.keypoints {
  border: 1px solid var(--rule-hard); border-radius: 4px;
  background: var(--bg); padding: 10px 13px; margin: 16px 0 4px;
}
.kp-head {
  font: 600 12px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.keypoints ul { margin: 0; padding-left: 17px; }
.keypoints li { font: 15px/1.7 var(--ui); padding: 2px 0; }

@media (max-width: 860px) {
  ul.track li { grid-template-columns: 1fr; gap: 1px; padding: 7px 0; }
  .wit { padding-left: 10px; }
  ul.points li { font-size: 15px; }
}

/* --- search controls ---------------------------------------------------- */
.btn {
  font: 13px/1 var(--ui); padding: 8px 14px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule-hard); border-radius: 3px;
  background: var(--panel); color: var(--ink);
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { color: #14130f; }
}
.srow .cov { justify-self: start; }
@media (max-width: 620px) {
  .searchbar { flex-wrap: wrap; }
  .searchbar input { flex: 1 1 100%; }
  .btn { flex: 1; }
}
ul.resolved li { color: var(--good); }
ul.resolved li::marker { color: var(--good); }


/* Larger still on small screens: a phone is held closer but the text is the
   whole point of the page. */
@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .dsum { font-size: 18.5px; line-height: 1.75; }
  ul.points li { font-size: 17px; line-height: 1.7; }
  .wit-name { font-size: 17.5px; }
  .wit-role { font-size: 15px; }
  ul.track li { font-size: 15.5px; }
  .keypoints li { font-size: 15.5px; }
  .notice { font-size: 15px; }
  .prose { font-size: 16px; }
  table.grid { font-size: 15px; }
  .stepper .sdate { font-size: 17px; }
}

/* --- brand mark --------------------------------------------------------- */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand:hover .mark { color: var(--accent); }
.mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  color: var(--accent); transition: color .12s;
}
@media (max-width: 860px) { .mark { width: 20px; height: 20px; } }

/* Footer is now a single compact line. */
#provenance { padding: 13px 20px 30px; }
#provenance .foot-line { max-width: 92ch; margin: 0; }
#provenance .foot-line a { white-space: nowrap; }
@media (max-width: 860px) { #provenance { padding: 13px 12px 30px; } }


/* --- navigation --------------------------------------------------------- */
/* Its own full-width row. Everything visible, comfortable hit areas, an
   underline for the active view instead of nested boxes. */

header.top {
  display: block; padding: 0;
  position: sticky; top: 0; z-index: 20;
}
.titlerow {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 20px 7px;
}
header.top nav {
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
  padding: 0 20px; border-top: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
header.top nav::-webkit-scrollbar { display: none; }
.navmain, .navutil { display: flex; align-items: stretch; gap: 2px; }
.navutil { opacity: .9; }

header.top nav button {
  font: 13.5px/1 var(--ui); color: var(--dim); white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 12px 9px; cursor: pointer; border-radius: 0;
}
header.top nav button:hover { color: var(--ink); background: var(--bg); }
header.top nav button[aria-current="true"] {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
  background: none;
}
.navutil button { font-size: 13px; }

.navlink {
  font: 13.5px/1 var(--ui); color: var(--accent); text-decoration: none;
  padding: 11px 12px 9px; display: inline-block;
}
.pagenav { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 6px; }

aside, body.no-rail section.pane { }
@media (max-width: 860px) {
  .titlerow { padding: 8px 12px 6px; gap: 8px; }
  header.top nav { padding: 0 12px; gap: 10px; }
  header.top nav button { padding: 11px 9px 9px; font-size: 13px; }
}

/* --- mobile navigation -------------------------------------------------- */
.navtoggle, .navsheet { display: none; }

@media (max-width: 860px) {
  header.top nav {
    display: block; padding: 0; border-top: 1px solid var(--rule);
    overflow: visible;
  }
  .navmain, .navutil { display: none; }

  .navtoggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px; padding: 12px 14px;
    background: none; border: 0; cursor: pointer;
    font: 600 14.5px/1 var(--ui); color: var(--accent);
  }
  .nt-label { letter-spacing: .01em; }
  .nt-icon {
    width: 18px; height: 12px; position: relative; flex: 0 0 auto;
  }
  .nt-icon::before, .nt-icon::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .16s;
  }
  .nt-icon::before { top: 2px; }
  .nt-icon::after { bottom: 2px; }
  .navtoggle[aria-expanded="true"] .nt-icon::before { transform: translateY(4px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .nt-icon::after { transform: translateY(-4px) rotate(-45deg); }

  .navsheet {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 4px 8px 10px; border-top: 1px solid var(--rule);
    background: var(--panel);
  }
  .navsheet[hidden] { display: none; }
  .navsheet button {
    text-align: left; font: 15px/1 var(--ui); color: var(--dim);
    background: none; border: 0; border-radius: 4px;
    padding: 13px 10px; cursor: pointer;
  }
  .navsheet button[aria-current="true"] {
    color: var(--accent); font-weight: 700; background: var(--accent-bg);
  }
}

/* --- counsel ------------------------------------------------------------ */
.person {
  border-left: 3px solid var(--rule-hard); padding: 4px 0 6px 14px;
  margin-bottom: 22px;
}
.person.side-commonwealth { border-left-color: #8a4a12; }
.person.side-defense { border-left-color: #1f4f7a; }
.person.side-court { border-left-color: var(--accent); }
.p-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.p-name { font: 600 18px/1.3 var(--sans); }
.p-role { font: 14px/1.55 var(--ui); color: var(--dim); margin-top: 2px; }
.p-line { font: 14.5px/1.6 var(--ui); }
.pill.court { color: var(--accent); border-color: var(--accent); }
.exlink {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.exlink:hover { color: var(--ink); }


/* --- share -------------------------------------------------------------- */
.sharebar {
  display: flex; margin: 24px 0 6px; padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.sharedd { position: relative; }
.sharedd > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13.5px/1 var(--ui); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; padding: 10px 16px;
}
.sharedd > summary::-webkit-details-marker { display: none; }
.sharedd > summary:hover { background: var(--accent-bg); }
.sharedd[open] > summary { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sharedd[open] > summary { color: #14130f; }
}

.sg { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; }
.sg svg { width: 100%; height: 100%; display: block; }

.sharemenu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  width: 296px; padding: 12px;
  background: var(--panel); border: 1px solid var(--rule-hard); border-radius: 6px;
  box-shadow: 0 10px 34px rgba(0,0,0,.17);
}
.sharedd.up .sharemenu { top: auto; bottom: calc(100% + 8px); }

.sm-head {
  font: 600 10.5px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px;
}
.sm-url {
  font: 11.5px/1.4 var(--mono); color: var(--dim);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  padding: 6px 8px; margin-bottom: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sm-primary, .sm-secondary {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: 600 14px/1 var(--ui); cursor: pointer;
  border-radius: 4px; padding: 11px 12px; margin-bottom: 6px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sm-primary { color: #14130f; }
  :root:not([data-theme="light"]) .sm-primary.done { color: #14130f; }
}
.sm-primary:hover { filter: brightness(1.08); }
.sm-primary.done { background: var(--good); border-color: var(--good); }
.sm-secondary {
  background: var(--panel); color: var(--ink); border-color: var(--rule-hard); font-weight: 500;
}
.sm-secondary:hover { border-color: var(--accent); color: var(--accent); }

.sm-rule { height: 1px; background: var(--rule); margin: 10px 0 9px; }

.sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sm-dest {
  display: flex; align-items: center; gap: 8px;
  font: 13.5px/1 var(--ui); color: var(--ink); text-decoration: none;
  border: 1px solid transparent; border-radius: 4px; padding: 10px 9px;
}
.sm-dest:hover {
  background: var(--bg); border-color: var(--rule); color: var(--accent);
  text-decoration: none;
}
.sm-dest .sg { color: var(--dim); }
.sm-dest:hover .sg { color: var(--accent); }

@media (max-width: 620px) {
  .sharedd, .sharedd > summary { width: 100%; justify-content: center; }
  .sharemenu { width: 100%; left: 0; right: 0; }
}

/* --- condensed notice --------------------------------------------------- */
/* The claim rides on every day page; the explanation is one tap away. Three
   copies of the same paragraph per page was the actual problem. */
.notice.slim {
  padding: 0; margin: 10px 0 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-rule); border-radius: 4px;
}
.notice.slim > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; font: 14px/1.4 var(--ui);
}
.notice.slim > summary::-webkit-details-marker { display: none; }
.notice.slim > summary strong { color: var(--ink); }
.n-why {
  margin-left: auto; font: 12.5px/1.4 var(--ui); color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.notice.slim[open] .n-why::after { content: " −"; }
.notice.slim:not([open]) .n-why::after { content: " +"; }
.n-body {
  padding: 0 12px 11px; font: 13.5px/1.6 var(--ui); color: var(--dim); max-width: 74ch;
}
.notice.crit { border-color: var(--crit); background: var(--panel); }
.notice.crit strong { color: var(--crit); }

@media (max-width: 860px) {
  .notice.slim > summary { font-size: 14.5px; padding: 10px 12px; }
  .n-why { margin-left: 0; }
}

/* --- mobile nav affordance ---------------------------------------------- */
/* No colour inversion on open. Inverting meant the label turned white from one
   rule while the background came from another, so any mismatch left white text
   on a pale bar. Dark text on a light ground in both states cannot fail that
   way, and the state is carried by the border, the lead chip and the icon. */

@media (max-width: 860px) {
  .navtoggle {
    background: var(--bg);
    border-bottom: 1px solid var(--rule-hard);
    padding: 11px 14px; gap: 9px;
  }
  .nt-lead {
    font: 700 10.5px/1 var(--ui); letter-spacing: .09em; text-transform: uppercase;
    color: #fff; background: var(--accent); border: 1px solid var(--accent);
    border-radius: 3px; padding: 5px 7px; flex: 0 0 auto;
  }
  .nt-label {
    font: 600 15px/1 var(--ui); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nt-count {
    margin-left: auto; font: 11.5px/1 var(--mono); color: var(--dim);
    flex: 0 0 auto; white-space: nowrap;
  }
  .nt-icon { margin-left: 4px; color: var(--accent); }

  .navtoggle[aria-expanded="true"] {
    background: var(--accent-bg);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  .navtoggle[aria-expanded="true"] .nt-label { color: var(--accent); }
}

/* Dark mode: the chip keeps light-on-accent, everything else stays on tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nt-lead { color: #14130f; }
}

/* Tiles that lead somewhere say so. */
.tile.clickable { cursor: pointer; transition: border-color .12s, transform .12s; }
.tile.clickable:hover {
  border-color: var(--accent); transform: translateY(-1px);
}
.tile.clickable:hover .k { color: var(--accent); }
.tile.clickable::after {
  content: "→"; float: right; margin-top: -18px;
  font: 13px/1 var(--ui); color: var(--rule-hard);
}
.tile.clickable:hover::after { color: var(--accent); }