/* Audit AI — editorial-institutional. Warm white, near-black ink, electric
   cobalt accent. Fraunces display / IBM Plex Sans body / IBM Plex Mono figures. */

:root {
  --paper:   #f7f6f2;      /* warm off-white canvas */
  --card:    #ffffff;
  --ink:     #14161c;      /* near-black */
  --ink-2:   #565b68;      /* secondary text */
  --ink-3:   #8b909d;      /* muted */
  --line:    #e7e5de;      /* hairline */
  --line-2:  #d9d7cf;
  --accent:  #1f43ff;      /* electric cobalt */
  --accent-d:#1633d6;
  --accent-t:#eaeeff;      /* accent tint */
  --red:  #d63f3f;  --red-t:  #fbeceb;
  --green:#1f9d57;  --green-t:#e7f6ee;
  --amber:#c98a12;  --amber-t:#fbf1da;

  --r: 14px;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow: 0 1px 0 rgba(20,22,28,.02), 0 6px 24px -12px rgba(20,22,28,.18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 100% -10%, rgba(31,67,255,.05), transparent 55%),
    radial-gradient(80% 70% at -10% 110%, rgba(31,67,255,.04), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* faint grain for depth */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- top bar ---------- */
.topbar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 40px 20px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-t), inset 0 0 0 5px var(--card);
  transform: rotate(45deg);
}
.brandtext h1 {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: 25px; letter-spacing: -.02em; line-height: 1;
}
.brandtext .sub {
  margin: 3px 0 0; color: var(--ink-3); font-size: 12px;
  letter-spacing: .02em;
}
.tag {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- layout: two modes ----------
   mode-hero : first load — the query panel is a large centered card, workspace hidden
   mode-run  : a run has started — classic two-column; query panel can collapse to a rail */
.layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 340px minmax(0,1fr);
  gap: 22px; align-items: start;
  max-width: 1240px; margin: 0 auto; padding: 30px 40px 60px;
  transition: grid-template-columns .3s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.controls { position: sticky; top: 30px; }

/* hero: one big centered query card */
.layout.mode-hero { display: flex; justify-content: center; padding-top: 46px; }
.layout.mode-hero .workspace { display: none; }
.layout.mode-hero .controls { position: static; width: min(980px, 100%); padding: 30px 34px; }

/* hero only: two columns — the run form on the left, "Analyze work" + upload +
   history on the right. Everywhere else (the narrow run-mode sidebar) the two
   groups stack, which is the default block flow, so this rule is scoped to hero. */
.layout.mode-hero #controlsBody {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start;
}
.cb-main, .cb-aside { min-width: 0; }
/* the aside's first heading sits level with "Run a check", not pushed down */
.layout.mode-hero .cb-aside .panel-label:first-child { margin-top: 0 !important; }
@media (max-width: 760px) {
  .layout.mode-hero .controls { width: min(660px, 100%); }
  .layout.mode-hero #controlsBody { grid-template-columns: 1fr; gap: 0; }
}
.layout.mode-hero .qfree textarea { min-height: 52px; font-size: 13.5px; }
.layout.mode-hero #run { font-size: 15px; padding: 14px 16px; }
/* the question picker is the primary control — larger in the hero */
.layout.mode-hero .combo-q .combo-btn { font-size: 15px; padding: 14px 15px; }
.layout.mode-hero .combo-q .combo-list { max-height: 380px; }

/* ---------- searchable combobox (contract + audit question) ---------- */
.combo { position: relative; }
.combo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--sans); font-size: 14px; color: var(--ink); text-align: left;
  line-height: 1.45; padding: 11px 13px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.combo-btn:hover { border-color: var(--ink-3); }
.combo.open .combo-btn {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-t); background: var(--card);
}
.combo-val { white-space: normal; min-width: 0; }   /* long questions wrap, stay readable */
.combo-val.ph { color: var(--ink-3); }
.combo-caret {
  flex: none; width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s;
}
.combo.open .combo-caret { transform: rotate(225deg); margin-top: 4px; }
.combo-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 18px 50px -18px rgba(20,22,28,.35); overflow: hidden;
  animation: rise .18s ease both;
}
.combo-search {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  border-bottom: 1px solid var(--line); background: var(--paper);
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); padding: 12px 14px;
}
.combo-search::placeholder { color: var(--ink-3); }
.combo-list { max-height: 300px; overflow-y: auto; }
.combo-opt {
  padding: 11px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  cursor: pointer; border-bottom: 1px solid var(--line);
}
.combo-opt:last-child { border-bottom: none; }
.combo-opt:hover { background: var(--accent-t); color: var(--ink); }
.combo-opt.on { background: var(--accent-t); color: var(--accent); font-weight: 600; }
.combo-none { padding: 14px; color: var(--ink-3); font-size: 12.5px; }

/* collapsed query rail (only when the user folds it) — a compact button,
   not a tall empty panel */
.layout.qcollapsed { grid-template-columns: 56px minmax(0,1fr); }
.layout.qcollapsed .controls {
  padding: 0; background: none; border: none; box-shadow: none;
}
.layout.qcollapsed #controlsBody { display: none; }
.qrail {
  display: none; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; border-radius: 12px; box-shadow: var(--shadow);
  flex-direction: column; align-items: center; gap: 9px;
  width: 46px; padding: 13px 0 15px; margin: 0;
  color: var(--ink-2); font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em;
  transition: border-color .15s, color .15s;
}
.layout.qcollapsed .qrail { display: flex; }
.qrail:hover { color: var(--accent); border-color: var(--accent); }
.qrail-i { font-size: 14px; color: var(--accent); }
.qrail-t { writing-mode: vertical-rl; }
.qcollapse {
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 12px;
  line-height: 1; flex: none;
}
.qcollapse:hover { border-color: var(--accent); color: var(--accent); }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px;
  animation: rise .6s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.panel-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.panel-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.panel-label .qcollapse { order: 3; }

/* ---------- form ---------- */
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; font-size: 12px; font-weight: 500; color: var(--ink-2);
  margin-bottom: 7px; letter-spacing: .01em;
}
.selectwrap { position: relative; }
.selectwrap::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
}
select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 11px 34px 11px 13px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
/* "type your own" is the secondary path — kept deliberately small */
.qfree > span { font-size: 11px; color: var(--ink-3); }
.qfree textarea {
  /* overflow:auto, not hidden — if a question ever exceeds the grow cap the
     rest must still be reachable by scrolling, never silently clipped */
  width: 100%; box-sizing: border-box; resize: vertical; overflow: auto; min-height: 46px;
  font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink);
  padding: 9px 11px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.qfree textarea:focus { outline: none; border-color: var(--accent, #7aa2ff); }
.qfree textarea::placeholder { color: var(--ink-3); }
.up-hint { font-size: 12px; color: var(--ink-3); margin: 4px 0 10px; line-height: 1.45; }
.up-hint code { font-family: var(--mono, monospace); font-size: 11px; }
.upload .btn { width: 100%; }
.up-report { margin-top: 10px; font-size: 12px; border: 1px solid var(--line-2);
  border-radius: 10px; padding: 9px 11px; max-height: 180px; overflow-y: auto; }
.up-report .ur-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.up-report .ur-role { color: var(--ink-3); font-family: var(--mono, monospace); font-size: 11px; }
.up-report .ur-role.miss { color: var(--warn, #c77); font-weight: 600; }
select:hover { border-color: var(--ink-3); }
select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-t); background: var(--card);
}

/* ---------- buttons ---------- */
.btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: transform .1s, background .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform .18s; }
.btn-primary {
  color: #fff; background: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 8px 20px -10px var(--accent);
}
.btn-primary:hover { background: var(--accent-d); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:disabled { background: var(--ink-3); box-shadow: none; cursor: default; opacity: .7; }
.btn-ghost {
  color: var(--accent); background: var(--card); border-color: var(--accent);
}
.btn-ghost:hover { background: var(--accent-t); }
.btn-ghost:disabled { color: var(--ink-3); border-color: var(--line-2); cursor: default; }

.hint { min-height: 16px; margin-top: 11px; font-size: 12px; color: var(--ink-3); }

/* ---------- active-run banner (reconnect: runs already in progress on the server) ---------- */
.active-runs-banner {
  margin-top: 11px; padding: 10px 12px; border-radius: 10px;
  background: var(--amber-t); border: 1px solid var(--amber);
  font-size: 12px; color: var(--ink-2);
}
.active-runs-banner .arb-title { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.active-runs-banner .arb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 0;
}
.active-runs-banner .arb-row + .arb-row { border-top: 1px dashed var(--line); }
.active-runs-banner .arb-cancel {
  font: inherit; font-size: 11px; color: var(--amber); background: none;
  border: 1px solid var(--amber); border-radius: 6px; padding: 3px 8px; cursor: pointer;
}
.active-runs-banner .arb-cancel:hover { background: var(--amber-t); }

/* ---------- history (persisted question ledger) ---------- */
.ledger { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ledger-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.ledger-tools { display: inline-flex; align-items: center; gap: 8px; }
.count {
  font-family: var(--mono); font-size: 12px; color: #fff; background: var(--ink);
  border-radius: 20px; padding: 2px 10px; min-width: 26px; text-align: center;
}
.h-clear {
  border: none; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3);
}
.h-clear:hover { color: var(--red); }
#historyList { list-style: none; margin: 12px 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
#historyList li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px;
  cursor: pointer; border-radius: 6px;
  animation: rise .4s ease both;
}
#historyList li:hover { background: var(--accent-t); }
#historyList li .hq { min-width: 0; }
#historyList li .hq .hq-t {
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
#historyList li .hq .hq-m {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); display: block; margin-top: 2px;
}
#historyList li .badge { flex: none; }

/* ---------- workspace ---------- */
.workspace { min-height: 460px; display: flex; flex-direction: column; }
.empty {
  margin: auto; text-align: center; color: var(--ink-3); font-size: 14.5px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.empty-mark {
  width: 78px; height: 78px; border-radius: 16px; opacity: .9;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-t), transparent 70%),
    repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 9px);
  border: 1px solid var(--line-2);
}

/* ---------- result: summary first, question second ---------- */
.verdict-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.badge {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 7px; white-space: nowrap;
}
.badge.red   { color: var(--red);   background: var(--red-t); }
.badge.green { color: var(--green); background: var(--green-t); }
.badge.amber { color: var(--amber); background: var(--amber-t); }
.meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.summary {
  font-family: var(--serif); font-size: 18px; font-weight: 450;
  line-height: 1.5; color: var(--ink); margin: 0 0 10px; letter-spacing: -.005em;
}
/* the headline's supporting bullets — sans, smaller, quieter */
.summary .sum-pts {
  margin: 9px 0 0; padding-left: 20px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 5px; letter-spacing: 0;
}
.summary .sum-pts li { line-height: 1.55; }
.summary .sum-pts li::marker { color: var(--accent); }
.q-line {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line-2);
}
.q-line .q-k {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
}

.findings { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.finding {
  border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  border-radius: 10px; padding: 13px 15px; background: var(--paper);
}
.finding.high   { border-left-color: var(--red); }
.finding.medium { border-left-color: var(--amber); }
.finding.low    { border-left-color: var(--green); }
.finding .ftitle { font-weight: 600; font-size: 13.5px; }
.finding .fbody  { font-size: 13.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.55; }
.finding .fsrc   { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.sources {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2);
}

/* ---------- live progress ---------- */
.progress { animation: rise .4s ease both; }
.prog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.progpct { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent); }
.pbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pfill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #4a68ff);
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.pnow {
  margin: 16px 0 2px; font-size: 14.5px; color: var(--ink); min-height: 22px;
  display: flex; align-items: center; gap: 8px;
}
.pnow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 0 var(--accent-t);
  animation: pulse 1.2s ease-in-out infinite;
}
.pnow.reread::before { background: var(--amber); }
.pnow .pdoc { font-family: var(--mono); font-weight: 600; color: var(--accent); }
.pnow .pmeta { color: var(--ink-3); font-size: 12.5px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,67,255,.35); }
  70% { box-shadow: 0 0 0 8px rgba(31,67,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,67,255,0); }
}

.steps { list-style: none; margin: 18px 0 0; padding: 0; }
.steps li {
  display: flex; align-items: center; gap: 11px; padding: 8px 0;
  font-size: 13px; color: var(--ink-3); transition: color .2s;
}
.steps li .dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-2); background: var(--card); transition: all .2s;
}
.steps li .dur { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.steps li.now { color: var(--ink); font-weight: 500; }
.steps li.now .dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-t); }
.steps li.on { color: var(--ink-2); }
.steps li.on .dot {
  border-color: var(--green); background: var(--green);
  box-shadow: inset 0 0 0 2px var(--card);
}

.act-label {
  margin-top: 22px; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between;
}
.vtoggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 10px; letter-spacing: .06em; color: var(--ink-3);
}
.vtoggle input { margin: 0; accent-color: var(--accent); }
.activity {
  margin-top: 10px; display: flex; flex-direction: column;
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 2px 6px;
}
/* terse mode: rows tagged verbose stay hidden until "engine detail" is ticked */
.activity.terse .act-wrap.verbose, .activity.terse .act.verbose { display: none; }
.act {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 12.5px; color: var(--ink-2); padding: 8px 6px;
  border-bottom: 1px solid var(--line); animation: rise .25s ease both;
  line-height: 1.5;
}
.activity > .act:last-child, .activity > .act-wrap:last-child .act:last-of-type { border-bottom: none; }
/* typed icon chips — quiet, tinted, no emoji */
.act .act-i {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.act-i.read { color: var(--accent); background: var(--accent-t); }
.act-i.ok   { color: var(--green);  background: var(--green-t); }
.act-i.warn { color: var(--amber);  background: var(--amber-t); }
.act-i.err  { color: var(--red);    background: var(--red-t); }
.act-i.info { color: var(--ink-3);  background: var(--paper); border: 1px solid var(--line-2); }
.act b { color: var(--ink); font-weight: 600; }
.act.act-x { cursor: pointer; }
.act.act-x:hover .act-t { color: var(--accent); }
.act-caret { display: inline-block; margin-right: 5px; color: var(--ink-3); font-size: 10px; }
.act-items {
  margin: 0 0 6px 28px; display: flex; flex-direction: column;
  border-left: 2px solid var(--line-2); padding-left: 12px;
}
.act-item {
  font-size: 12px; color: var(--ink-2); padding: 5px 0;
  border-bottom: 1px dotted var(--line); display: flex; gap: 8px; align-items: baseline;
}
.act-item:last-child { border-bottom: none; }
.act-item .ai-v { font-family: var(--mono); color: var(--ink); font-weight: 600; margin-left: auto; }
.act-item .ai-d { font-family: var(--mono); font-size: 10px; color: var(--accent); }

/* ---------- findings table (wide text columns, scrolls sideways if needed) ---------- */
.section-h {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  margin: 22px 0 10px;
}
.tablewrap { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.findtable { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.findtable thead th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
  background: var(--paper); padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.findtable th.n, .findtable td.n { text-align: right; }
.findtable tbody td {
  padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top;
  color: var(--ink-2);
}
.findtable tbody tr:last-child td { border-bottom: none; }
.findtable td.item { color: var(--ink); font-weight: 500; min-width: 240px; }
.findtable td.why { color: var(--ink-2); min-width: 280px; }
.findtable td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.findtable td.excess { color: var(--red); font-weight: 600; }
/* The item's printed description in FULL. It was clamped to two lines to keep
   rows short; that cut "…Polypropylene (P…" mid-word, and on a comparison
   table the description is the thing that proves the two sides are the same
   item. A tall row is a fair price for that. */
.findtable td.item { max-width: 340px; font-size: 13.5px; }
.findtable .clamp2 { line-height: 1.5; }
/* the item number is a label, not a finding — present, quiet, out of the way */
.findtable .itno { font-family: var(--mono); color: var(--ink-3); font-size: 12px; }
.findtable td.item b { font-weight: 650; color: var(--ink); }
/* the summary: one plain lead line, then short bullets — an auditor scans for
   the exception, and a paragraph is where an exception hides */
/* The findings summary is read, not admired. Serif at 18px is a magazine
   headline; these are figures an auditor scans, so: sans throughout, one size
   up for legibility across a room during a demo, and the bold reserved for the
   numbers rather than sprayed across the sentence. */
.summary .lead {
  font-family: var(--sans); font-size: 20px; font-weight: 600;
  line-height: 1.4; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px;
}
.summary .sumlist { margin: 0; padding-left: 20px; list-style: none; }
.summary .sumlist li {
  position: relative; font-family: var(--sans); font-size: 15.5px;
  font-weight: 400; line-height: 1.6; margin: 8px 0; color: var(--ink-2);
  letter-spacing: 0;
}
.summary .sumlist li b { color: var(--ink); font-weight: 600; }
.summary .sumlist li::before {
  content: "—"; position: absolute; left: -20px; color: var(--ink-3);
}
/* direction matters more than magnitude in a two-sided comparison: billed ABOVE
   estimate and billed BELOW estimate are different findings, and reading them
   both in the same alarm-red hides the one that is unusual */
.findtable td.excess .up { color: var(--red); }
.findtable td.excess .down { color: var(--ink-2); font-weight: 500; }
.sevpill {
  font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; letter-spacing: .04em;
}
.sevpill.high { color: var(--red); background: var(--red-t); }
.sevpill.medium { color: var(--amber); background: var(--amber-t); }
.sevpill.low { color: var(--green); background: var(--green-t); }
.cite {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  background: var(--accent-t); padding: 3px 8px; border-radius: 6px;
  white-space: nowrap; display: inline-block; border: none; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
button.cite:hover { background: var(--accent); color: #fff; }
button.cite:hover .ck { color: rgba(255,255,255,.8); }
.cite .ck { color: var(--ink-3); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- document viewer: near-fullscreen ---------- */
.drawer-back {
  position: fixed; inset: 0; z-index: 40; background: rgba(20,22,28,.45);
  opacity: 0; transition: opacity .26s;
}
.drawer-back.show { opacity: 1; }
.drawer {
  position: fixed; inset: 14px; z-index: 41;
  width: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(20,22,28,.5);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s;
}
.drawer.show { transform: none; opacity: 1; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line); gap: 16px;
}
.dw-role { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent); }
.dw-ref { font-family: var(--mono); font-size: 13px; color: var(--ink); margin-top: 3px; }
.dw-actions { display: flex; align-items: center; gap: 10px; }
.dw-tabs { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.dwtab {
  border: none; background: var(--paper); color: var(--ink-2); cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 7px 14px;
}
.dwtab.on { background: var(--accent); color: #fff; }
.dwtab:not(.on):hover { color: var(--accent); }
.dw-open {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  text-decoration: none; background: var(--accent-t); padding: 6px 11px; border-radius: 7px;
}
.dw-open:hover { background: var(--accent); color: #fff; }
.dw-close {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.dw-close:hover { border-color: var(--accent); color: var(--accent); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px; }
/* the PDF gets the whole panel — no padding frame around a document that
   already carries its own margins, and no second scrollbar outside the
   viewer's own */
.drawer-body.pdfmode { padding: 0; overflow: hidden; }
.pdfframe {
  display: block; width: 100%; height: 100%; border: 0;
  background: #fff; border-radius: 0 0 13px 13px;
}
.ocrdoc { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); max-width: 1400px; margin: 0 auto; }
.ocrdoc .ocrpagecap {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin: 22px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ocrdoc .ocrpagecap:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.ocrdoc .ocrpage { margin-bottom: 6px; white-space: pre-wrap; }

/* OCR'd government-bill tables: sparse, ragged scans cleaned up at render time (see
   web.py:_tidy_ocr_html). Kept compact and scrollable rather than letting a wide table
   blow out the drawer. */
.ocrtblwrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; }
/* the table takes the width its TEXT needs (scrolling sideways in its wrap),
   instead of being squeezed to container width — description columns stay readable
   while empty columns stay narrow */
.ocrdoc table {
  border-collapse: collapse; width: max-content; min-width: 100%; max-width: none;
  font-size: 12.5px; line-height: 1.5; margin: 0;
}
.ocrdoc td, .ocrdoc th {
  border: 1px solid var(--line-2); padding: 6px 10px; vertical-align: top;
  min-width: 44px; max-width: 380px; overflow-wrap: break-word; white-space: normal;
}
.ocrdoc th {
  background: var(--paper); color: var(--ink); font-weight: 700; font-size: 11.5px;
  text-align: left;
}
.ocrdoc tbody tr:nth-child(even) { background: var(--paper); }
.ocrdoc tbody tr:hover { background: var(--accent-t); }
.ocrdoc mark { background: #ffe89e; color: #4a3800; padding: 0 2px; border-radius: 3px; font-weight: 600; }
.srcrow { display: flex; flex-wrap: wrap; gap: 7px; }
.verified {
  margin-top: 14px; font-size: 12.5px; color: var(--green); font-weight: 500;
}

/* original page scans inside the viewer */
.origwrap { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.origpage { margin: 0; width: 100%; max-width: 980px; }
.origpage .origcap {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); margin-bottom: 6px;
}
.origpage img {
  width: 100%; display: block; border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: var(--shadow); background: #fff;
}
.origpage.cited img { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- report (below result) ---------- */
.reportbar { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.reportbar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rb-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.rb-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.rb-btn { width: auto; padding: 11px 20px; }
.muted { color: var(--ink-3); font-size: 12.5px; margin: 0 0 16px; line-height: 1.55; }
.downloads { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.dl {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500;
  background: var(--paper); transition: border-color .15s, background .15s, transform .1s;
}
.dl:hover { border-color: var(--accent); background: var(--card); }
.dl:active { transform: translateY(1px); }
.dlk {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .05em;
  color: var(--accent); background: var(--accent-t);
  padding: 3px 7px; border-radius: 5px;
}

/* numbers in mono everywhere they appear inline */
.count, .badge, .meta, .tag, .dlk, .fsrc, .sources { font-variant-numeric: tabular-nums; }

/* ---- document rack: the papers, available before any answer exists ---- */
.docs-panel{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line,#e4e6ee);
            border-radius:10px;background:var(--card,#fff)}
.docchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.docchip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;
         border:1px solid var(--line,#e4e6ee);border-radius:8px;background:transparent;
         font:inherit;font-size:12px;cursor:pointer;transition:border-color .15s}
.docchip:hover{border-color:#8fa4d8}
.docchip.haspdf{border-color:#b6c4e6}
.docchip .dcid{font-family:ui-monospace,Menlo,Consolas,monospace}
.docchip .dcrole{opacity:.65}
.docchip .dcpages{opacity:.45;font-size:11px}
.docchip .dcpdf{font-size:10px;letter-spacing:.06em;padding:2px 6px;border-radius:4px;
                background:#eaf0ff;color:#2145a8;border:1px solid #b6c4e6}
.docchip .dcpdf:hover{background:#2145a8;color:#fff}
.docchip.reading{border-color:#2145a8;box-shadow:0 0 0 2px rgba(33,69,168,.12)}
.docchip.readdone{opacity:.6}
/* ── the sixteen golden questions, run as one set ─────────────────────────── */
.goldenset { margin-top: 4px; }
.gs-actions { display: flex; align-items: center; gap: 12px; }
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent); }
.btn-link:disabled { opacity: .45; cursor: default; text-decoration: none; }

.gs-bar { display: flex; align-items: center; gap: 9px; margin: 12px 0 8px; }
.gs-track {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.gs-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: var(--accent); transition: width .35s ease;
}
.gs-pct { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.gs-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.gs-row {
  display: grid; grid-template-columns: 30px 1fr auto;
  align-items: baseline; gap: 8px;
  padding: 5px 6px; border-radius: 6px;
  font-size: 12px; line-height: 1.35;
  border-left: 2px solid transparent;
}
.gs-row.is-running { background: var(--accent-t); border-left-color: var(--accent); }
.gs-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gs-title { color: var(--ink-2, inherit); }
.gs-state {
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gs-state.gs-red   { color: var(--red); font-weight: 600; }
.gs-state.gs-green { color: var(--green); }