/* Tie-Out. Warm paper ground, ink text, one chrome accent, and four semantic
   hues that share chroma/lightness and vary only in hue.

   Sizing note: this screen is read, not skimmed. The evidence quote is the
   product -- it is the thing a reader has to be able to check against the page
   image beside it -- so nothing here is smaller than it. An earlier pass set
   the quote at 11.5px and the verdict at 13px, which made a tool for reading
   documents harder to read than the documents. Body text is 15px, the quote is
   15px, and the conclusion is the largest thing in the pane. */
:root {
  --ground: oklch(0.985 0.004 95);
  --panel: #fff;
  --rule: oklch(0.905 0.005 95);
  --rule-soft: oklch(0.945 0.004 95);
  --ink: oklch(0.24 0.012 250);
  --muted: oklch(0.50 0.014 250);
  --faint: oklch(0.635 0.014 250);
  --accent: oklch(0.44 0.075 205);

  --corroborates: oklch(0.55 0.11 150);
  --contradicts: oklch(0.55 0.15 27);
  --reconciled: oklch(0.60 0.115 75);
  --insufficient: oklch(0.55 0.03 250);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.45;
  background: var(--ground); color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- top bar */
header {
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
  height: 66px; background: var(--panel); border-bottom: 1px solid var(--rule);
  flex-shrink: 0; box-shadow: 0 1px 3px oklch(0.24 0.012 250 / .04);
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px;
         letter-spacing: -.015em; }
.brand svg { flex-shrink: 0; width: 22px; height: 22px; }
.divider { width: 1px; height: 26px; background: var(--rule); }
.spacer { flex: 1; }

/* Corpus counters: figure over label. Five counts run together in one line of
   11px grey read as decoration; these are the numbers checked first. */
#corpus { display: flex; align-items: center; gap: 20px; }
.stat { display: flex; flex-direction: column; line-height: 1.1; }
.stat .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.stat .l { font-size: 11px; color: var(--faint); margin-top: 3px; }
.mode {
  font-size: 11.5px; padding: 4px 9px; border-radius: 100px; white-space: nowrap;
  background: color-mix(in oklab, var(--corroborates) 12%, transparent);
  color: color-mix(in oklab, var(--corroborates) 72%, black);
  border: 1px solid color-mix(in oklab, var(--corroborates) 26%, transparent);
}
.mode.ref {
  background: color-mix(in oklab, var(--accent) 11%, transparent);
  color: color-mix(in oklab, var(--accent) 82%, black);
  border-color: color-mix(in oklab, var(--accent) 26%, transparent);
}

#filters { display: flex; gap: 7px; }
.pill {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 6px; border: 1px solid var(--rule); background: var(--panel);
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: background .12s, border-color .12s;
}
.pill:hover { border-color: var(--faint); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--insufficient)); }
.pill .n { font-family: var(--mono); opacity: .7; }
.pill[aria-pressed="true"] {
  border-color: var(--c); border-width: 1.5px; padding: 6.5px 11.5px;
  background: color-mix(in oklab, var(--c) 13%, transparent);
  color: color-mix(in oklab, var(--c) 78%, black); font-weight: 600;
}
.pill[data-label="CORROBORATES"] { --c: var(--corroborates); }
.pill[data-label="CONTRADICTS"] { --c: var(--contradicts); }
.pill[data-label="CONTEXTUALLY_RECONCILED"] { --c: var(--reconciled); }
.pill[data-label="INSUFFICIENT_EVIDENCE"] { --c: var(--insufficient); }
.pill.refused { --c: var(--contradicts); margin-left: 5px; }
.pill.refused .dot { background: none; border: 1.5px solid var(--c); }

.tag.reason {
  background: color-mix(in oklab, var(--contradicts) 14%, transparent);
  color: color-mix(in oklab, var(--contradicts) 78%, black);
  /* "quote not found" and "unresolvable entity" are the whole point of the
     Refused view; clipping them to "quote not fou..." says nothing. */
  max-width: none;
}

#upload-btn {
  padding: 8px 15px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
}
#upload-btn:hover { filter: brightness(1.1); }
#upload-btn[disabled] { opacity: .5; cursor: progress; }

/* ------------------------------------------------------------------ body */
main { flex: 1; display: grid; grid-template-columns: minmax(620px, 47%) minmax(0, 1fr); min-height: 0; }

#left {
  display: flex; flex-direction: column; background: var(--panel);
  border-right: 1px solid var(--rule); min-height: 0;
}
.section-head {
  display: flex; align-items: baseline; gap: 11px; padding: 16px 20px 10px;
}
.section-head h2 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink);
}
.export {
  font-size: 12.5px; color: var(--accent);
  text-decoration: none; border: 1px solid var(--rule); border-radius: 5px;
  padding: 5px 10px; white-space: nowrap;
}
.export:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }

.section-head .note { font-size: 12.5px; color: var(--faint); }

#search {
  margin: 0 20px 12px; padding: 9px 12px; width: calc(100% - 40px);
  border: 1px solid var(--rule); border-radius: 6px; font: inherit; font-size: 14px;
  background: var(--ground); color: var(--ink);
}
#search::placeholder { color: var(--faint); }
#search:focus { outline: none; border-color: var(--accent);
                box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent); }

/* The ledger is a list, not a spreadsheet. Six columns of readable type do not
   fit beside the reasoning pane -- at 14.5px the metric column collapsed to
   ~140px and every label truncated mid-word ("Borro... consoli..."), which is
   how a fact ledger ends up looking like the filings it was built to read.
   Two lines instead: identity on the first, provenance on the second, and the
   value pulled out on its own so the eye can run down the numbers. */
#rows { overflow-y: auto; flex: 1; }
.row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px; align-items: baseline; padding: 12px 20px 13px;
  border-bottom: 1px solid var(--rule-soft); cursor: pointer;
}
.row:hover { background: oklch(0.974 0.004 95); }
.row[aria-selected="true"] {
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.row .n { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.row .main { min-width: 0; }

.l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 14.5px; }
.l1 .ent {
  color: var(--muted); flex-shrink: 0; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.l1 .ent::after { content: "·"; margin-left: 8px; color: var(--faint); }
.l1 .met {
  color: var(--ink); font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.l1 .tag { flex-shrink: 0; }
.l2 {
  display: flex; align-items: baseline; gap: 9px; margin-top: 4px;
  font-family: var(--mono); font-size: 12px; color: var(--faint);
}
.l2 .period, .l2 .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l2 .period { flex-shrink: 0; max-width: 55%; }
.l2 .period::after { content: "·"; margin-left: 9px; }

.row .value {
  text-align: right; font-family: var(--mono); font-weight: 600; font-size: 15px;
  white-space: nowrap; color: var(--ink);
}
.row .value.text {
  font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}

.tag {
  font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: oklch(0.95 0.004 95); color: var(--muted); flex-shrink: 1;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag.vintage { background: color-mix(in oklab, var(--reconciled) 20%, transparent);
               color: color-mix(in oklab, var(--reconciled) 75%, black); }

footer.ledger-foot {
  display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 38px;
  border-top: 1px solid var(--rule); background: oklch(0.972 0.004 95);
  font-size: 12.5px; color: var(--muted); flex-shrink: 0;
}
footer.ledger-foot .bad { color: var(--contradicts); }

/* ----------------------------------------------------------------- right */
#right { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow-y: auto; }
#reasoning { padding: 4px 26px 22px; background: var(--panel); border-bottom: 1px solid var(--rule); }

.fact-card {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center;
  gap: 14px; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 9px;
  background: var(--panel); margin-bottom: 9px; font-size: 14.5px;
  box-shadow: 0 1px 2px oklch(0.24 0.012 250 / .03);
}
/* A and B as coin badges: the pane refers to "A" and "B" throughout, so they
   should be findable at a glance rather than being two grey letters. */
.fact-card .k {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted);
  background: oklch(0.945 0.004 95); border: 1px solid var(--rule);
}
.fact-card .v { font-family: var(--mono); font-size: 17px; font-weight: 600; white-space: nowrap; }
.fact-card.b { border-color: color-mix(in oklab, var(--c) 42%, transparent);
               background: color-mix(in oklab, var(--c) 6%, transparent); }
.fact-card.b .k {
  background: color-mix(in oklab, var(--c) 16%, transparent);
  border-color: color-mix(in oklab, var(--c) 38%, transparent);
  color: color-mix(in oklab, var(--c) 78%, black);
}

.trace { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-top: 14px; }
.trace-head {
  display: flex; gap: 11px; align-items: baseline; padding: 10px 15px;
  background: oklch(0.972 0.004 95); border-bottom: 1px solid var(--rule);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.trace-head .sub { font-weight: 400; color: var(--faint); font-size: 12.5px; }
.check {
  display: grid; grid-template-columns: 20px 116px minmax(0, 1fr); gap: 13px;
  align-items: center; padding: 9px 15px; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 13.5px;
}
.check:last-child { border-bottom: none; }
.check .dim { font-size: 13px; color: var(--muted); }
.check.differs { background: color-mix(in oklab, var(--c) 10%, transparent); }
.check.differs .dim { font-weight: 600; color: color-mix(in oklab, var(--c) 75%, black); }
.check.unknown { background: oklch(0.972 0.004 95); }
.check.same { background: color-mix(in oklab, var(--corroborates) 4.5%, transparent); }

/* The conclusion. It reads after the trace on purpose -- comparability is
   settled before agreement is -- but it must not be quieter than the working
   that leads to it. */
.verdict {
  display: flex; align-items: center; gap: 16px; margin-top: 18px;
  padding: 17px 21px; border-radius: 9px;
  background: color-mix(in oklab, var(--c) 11%, transparent);
  border: 1px solid color-mix(in oklab, var(--c) 34%, transparent);
  border-left: 4px solid var(--c);
}
.verdict .label { font-size: 22px; font-weight: 700; letter-spacing: -.015em;
                  line-height: 1.15; color: color-mix(in oklab, var(--c) 80%, black); }
.verdict .dim { font-size: 13px; margin-top: 3px;
                color: color-mix(in oklab, var(--c) 62%, black); }
.verdict .conf { font-family: var(--mono); font-size: 28px; font-weight: 600;
                 line-height: 1; color: color-mix(in oklab, var(--c) 80%, black); text-align: right; }
.verdict .conf-l { font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em;
                   text-transform: uppercase; margin-top: 5px; text-align: right;
                   color: color-mix(in oklab, var(--c) 60%, black); }

.prose {
  margin: 16px 0 0; font-family: var(--serif); font-size: 15px; line-height: 1.65;
  color: oklch(0.32 0.012 250); max-width: 68ch; text-wrap: pretty;
}

/* -------------------------------------------------------------- evidence */
#evidence { padding: 4px 26px 28px; }
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ev {
  display: flex; flex-direction: column; border: 1px solid var(--rule);
  border-radius: 9px; background: var(--panel); overflow: hidden;
  box-shadow: 0 1px 2px oklch(0.24 0.012 250 / .03);
}
.ev.b { border-color: color-mix(in oklab, var(--c) 42%, transparent); }
.ev-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft); background: oklch(0.975 0.004 95);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.ev-head .file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* The dimension that separates the two sides. Load-bearing when both cards
   cite the same page: without it they read as duplicated evidence. */
.ev-dim {
  flex-shrink: 0; padding: 2px 7px; border-radius: 4px; font-size: 11px;
  background: color-mix(in oklab, var(--c, var(--insufficient)) 15%, transparent);
  color: color-mix(in oklab, var(--c, var(--insufficient)) 80%, black);
  border: 1px solid color-mix(in oklab, var(--c, var(--insufficient)) 32%, transparent);
}
/* The quote is set as a pulled quotation, not as a form field: it is the one
   piece of text on the screen that came verbatim out of somebody's PDF. */
.ev-quote {
  margin: 15px 16px; padding: 2px 0 2px 15px; border-left: 3px solid var(--rule);
  font-family: var(--serif); font-size: 15px; line-height: 1.75;
  color: oklch(0.30 0.012 250);
}
.ev.b .ev-quote { border-left-color: color-mix(in oklab, var(--c) 40%, transparent); }
.ev-quote mark {
  background: color-mix(in oklab, var(--reconciled) 30%, transparent);
  color: var(--ink); border-radius: 3px; padding: 1px 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.ev.open { grid-column: 1 / -1; }
.page-wrap { position: relative; line-height: 0; background: #fff; max-height: 620px; overflow: auto;
             border-top: 1px solid var(--rule-soft); }
.page-wrap img { width: 100%; display: block; }
.hl {
  position: absolute; background: color-mix(in oklab, var(--reconciled) 30%, transparent);
  outline: 1.5px solid color-mix(in oklab, var(--reconciled) 62%, transparent);
  border-radius: 2px; pointer-events: none;
}
.ev-toggle {
  border: 1px solid var(--rule); background: var(--panel); border-radius: 5px;
  padding: 3px 9px; font-family: var(--sans); font-size: 12px; color: var(--accent);
}
.ev-toggle:hover { border-color: var(--accent);
                   background: color-mix(in oklab, var(--accent) 8%, transparent); }

.more {
  display: block; width: calc(100% - 36px); margin: 12px 18px 18px; padding: 11px;
  border: 1px dashed var(--rule); border-radius: 6px; background: transparent;
  font-size: 13.5px; color: var(--muted);
}
.more:hover { border-color: var(--accent); color: var(--accent); }

.empty {
  padding: 64px 28px; color: var(--faint); font-size: 14.5px; text-align: center;
  line-height: 1.6; max-width: 44ch; margin: 0 auto;
}
.empty strong {
  display: block; color: var(--ink); margin-bottom: 8px; font-size: 16px;
  font-weight: 600; letter-spacing: -.01em;
}

#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 19px; border-radius: 7px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s;
  max-width: 70ch;
}
#toast.show { opacity: 1; }

/* --------------------------------------------------------------- narrow */
/* Below this the two panes cannot both hold a readable measure, so they
   stack: the ledger keeps its own scroll and the reasoning follows it. */
@media (max-width: 1180px) {
  main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 46vh) minmax(0, 1fr); }
  #left { border-right: none; border-bottom: 1px solid var(--rule); }
  .ev-grid { grid-template-columns: 1fr; }
  /* The corpus counters are the first thing worth losing: they are repeated in
     the ledger footer, whereas the filter pills and Add PDF are the only way
     to reach the other views. Without this the header overflowed a 900px
     viewport by ~430px and clipped Refused and Add PDF off the right edge --
     body is overflow:hidden, so they were simply unreachable. */
  #corpus, .divider { display: none; }
  header { gap: 12px; padding: 0 14px; }
  #filters { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .pill { flex-shrink: 0; }
  .brand { flex-shrink: 0; }
  #upload-btn { flex-shrink: 0; }
}
@media (max-width: 860px) {
  .brand span { display: none; }
  .row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 11px 14px; }
  #reasoning, #evidence { padding-left: 16px; padding-right: 16px; }
}

#snapshot-note {
  padding: 10px 22px; background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted);
  flex-shrink: 0; line-height: 1.5;
}
#snapshot-note strong { color: var(--ink); }
#snapshot-note a { color: var(--accent); }
#upload-btn { opacity: .45; cursor: not-allowed; }