/* The case docket. Layered on style.css -- every colour is one of that
   file's tokens, so this page reads as the same document in both schemes.

   COLOUR IS NEVER THE ONLY SIGNAL. Every state badge carries its name in
   words; NOT_REACHED is OUTLINED rather than filled, so it is told apart
   from a ruled row with no colour vision at all; INAPPLICABLE is muted and
   italic; UNEVALUABLE is struck through with a dotted rule. A reader who
   sees no colour still sees five different things. */

/* --- the doors ---------------------------------------------------------- */
.doors { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

button.door {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--ink);
  font-family: var(--serif);
  cursor: pointer;
}
button.door:hover { border-color: var(--accent); }
button.door.chosen { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.door-label { font-size: 1.05rem; font-weight: 600; }
.door-question { color: var(--ink-dim); font-size: 0.92rem; }
.door-count { color: var(--ink-dim); font-size: 0.8rem; }

/* --- the next question -------------------------------------------------- */
.ask-card { border-inline-start: 3px solid var(--accent); }
.ask-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ask-head .waiting { font-size: 0.85rem; color: var(--ink-dim); }
.ask-head .unblocked {
  font-size: 0.85rem;
  color: var(--answer);
  background: var(--answer-bg);
  border-radius: 10px;
  padding: 2px 10px;
}
.ask-card h2 { margin-block: 8px 4px; font-size: 1.25rem; }
.ask-controls { margin-block-start: 14px; }
.ask-controls .tri { max-width: 380px; }

/* An AUTHORED paraphrase. Marked wherever it appears, never silently mixed
   with the statute's own words below it. */
.authored-mark {
  font-size: 0.78rem;
  color: var(--discrepancy);
  border: 1px dashed var(--discrepancy);
  border-radius: 3px;
  padding: 1px 6px;
  display: inline-block;
  margin-block-end: 6px;
}
.authored-tag { font-size: 0.78rem; color: var(--discrepancy); }

blockquote.statute-quote {
  font-family: var(--mono);
  font-size: 0.85rem;
  margin: 6px 0;
  padding: 6px 10px;
  border-inline-start: 2px solid var(--rule);
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: anywhere;
}

/* Where the statute leaves the word open. Not a checkbox with a friendly
   caption -- a note that the question is a judgment. */
.open-judgment {
  font-size: 0.85rem;
  color: var(--discretion);
  background: var(--discretion-bg);
  border-radius: 4px;
  padding: 6px 10px;
  margin-block: 6px;
}
/* ... and where the statute is precise but the answer is reached in text
   this repo does not hold. A different reason, so a different mark: solid
   rather than the open judgment's flat fill, and told apart without hue. */
.open-judgment[data-note="stated_conclusion"] {
  background: none;
  border-inline-start: 3px double var(--discretion);
  border-radius: 0;
}

.done-card { border-inline-start: 3px solid var(--answer); }

/* --- findings ------------------------------------------------------------ */
.finding-card { border-inline-start: 3px solid var(--conflict); }
.finding-head { display: flex; gap: 8px; align-items: baseline; margin-block-end: 6px; }
.finding-marker {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--conflict);
  border: 1px solid var(--conflict);
  border-radius: 3px;
  padding: 0 5px;
}
.finding-kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--conflict);
}

/* --- state badges -------------------------------------------------------- */
.state-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.state-badge[data-state="RULED"] { background: var(--answer); color: var(--accent-ink); }
.state-badge[data-state="STOPPED"] { background: var(--stop); color: var(--accent-ink); }
.state-badge[data-state="STOPPED"][data-stop="DISCRETION_POINT"] { background: var(--discretion); }
.state-badge[data-state="STOPPED"][data-stop="UNDEFINED_TERM"] { background: var(--undefined); }
.state-badge[data-state="STOPPED"][data-stop="DEFINITION_CONFLICT"] { background: var(--conflict); }
/* OUTLINE, not fill: a row waiting on a fact must never look like a ruled
   one, and must be distinguishable without colour. */
.state-badge[data-state="NOT_REACHED"] {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--ink-dim);
}
.state-badge[data-state="INAPPLICABLE"] {
  background: var(--muted-bg);
  color: var(--ink-dim);
  font-style: italic;
}
.state-badge[data-state="UNEVALUABLE"] {
  background: transparent;
  color: var(--stop);
  border: 1px dotted var(--stop);
}

/* --- outcome panels ------------------------------------------------------ */
.outcome {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
  margin-block-end: 10px;
  background: var(--bg-raised);
}
.outcome[data-state="RULED"] { border-inline-start: 3px solid var(--answer); }
.outcome[data-state="STOPPED"] { border-inline-start: 3px solid var(--stop); }
.outcome[data-state="NOT_REACHED"] { border-inline-start: 3px dashed var(--ink-dim); }
.outcome[data-state="INAPPLICABLE"] { opacity: 0.72; }
.outcome[data-state="UNEVALUABLE"] { border-inline-start: 3px dotted var(--stop); }
.outcome-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.actor-chip {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--answer-bg);
  color: var(--answer);
  border-radius: 10px;
  padding: 1px 9px;
}
.scope-chip, .tier-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 5px;
}
/* The row that is about the party the reader picked at the door. A chip, not
   a colour: it has to survive a monochrome print and a colour-blind reader,
   and it is a comparison of roles rather than anything about the law. */
.mine-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.outcome[data-mine="1"] { border-inline-start-width: 6px; }

.ruling-body { margin-block-start: 8px; }

/* --- the reading, and the text it is a reading OF ------------------------ */
/* Side by side where there is room, stacked on a narrow screen. Labelled on
   both sides, always: neither half may be read as the other. */
.reading-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-block-start: 8px;
}
@media (min-width: 900px) {
  .reading-pair:has(.verbatim) { grid-template-columns: 1fr 1fr; }
}
.reading-mark, .verbatim-mark {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  border-block-end: 1px solid var(--rule);
  padding-block-end: 3px;
}
.reading-mark { color: var(--discrepancy); border-block-end-style: dashed; }
.verbatim .statute-quote:first-of-type { margin-block-start: 6px; }

/* --- the provisions nothing attached under ------------------------------- */
/* Folded so the one live sentence is not buried under fifty dead ones. The
   count is in the summary, so the fold cannot hide its own size. */
.not-attached-fold { margin-block-start: 10px; }
.not-attached-fold > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-dim);
  padding-block: 4px;
}
.not-attached-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.not-attached-fold ul.plain-statements > li { font-size: 0.88rem; }

/* --- the coverage steps, collapsed --------------------------------------- */
/* Open on demand, never gone: the trace is the product. */
.supporting { margin-block-start: 14px; border-block-start: 1px solid var(--rule); }
.supporting > summary {
  cursor: pointer;
  padding-block: 10px;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.supporting > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.supporting[open] > summary { color: var(--ink); }

/* --- "needs: ..." -------------------------------------------------------- */
/* ALWAYS VISIBLE. This is the line that stops a missing fact reading as a
   "no", so it is never collapsed, greyed out or hidden behind a toggle. */
.needs { margin-block: 4px; font-size: 0.92rem; }
.needs-label { color: var(--ink-dim); font-family: var(--mono); font-size: 0.8rem; }
button.needs-link {
  background: none;
  border: none;
  border-bottom: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 0.92rem;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
button.needs-link:hover { border-bottom-style: solid; }

/* --- the engine's own failure -------------------------------------------- */
.defect {
  border: 1px dotted var(--stop);
  border-radius: 4px;
  padding: 8px 10px;
  background: var(--stop-bg);
}
.defect-label { font-size: 0.8rem; color: var(--stop); margin-block-end: 4px; }
.defect-text {
  font-family: var(--mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  margin: 0;
  overflow-wrap: anywhere;
}
.defect-note { color: var(--stop); }

/* --- fact cards ---------------------------------------------------------- */
.fact-card {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.fact-card:last-child { border-bottom: none; }
.fact-card .fact-label { flex: 1 1 320px; }
.fact-card .fact-label .name { font-size: 0.98rem; }
.fact-card.jumped {
  background: var(--discretion-bg);
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.text-control { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.text-control input { width: 200px; }

/* --- the docket ---------------------------------------------------------- */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-block-end: 12px; }
.legend-item { display: flex; gap: 6px; align-items: baseline; }
.legend-gloss { font-size: 0.8rem; color: var(--ink-dim); }

.docket-rows { display: flex; flex-direction: column; gap: 8px; }
.docket-row {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 10px 12px;
  background: var(--bg-raised);
  will-change: transform;
}
.docket-row[data-tier="outcome"] { border-inline-start: 3px solid var(--accent); }
.docket-row[data-state="INAPPLICABLE"] { opacity: 0.7; }
.docket-row[data-state="UNEVALUABLE"] { border-style: dotted; }
.row-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.row-head .marker { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); }
.row-name { font-family: var(--mono); font-size: 0.85rem; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .docket-row { transition: none !important; }
}