/* Aegis review UI.
 *
 * The only opinionated part of this stylesheet is the confidence shading, and
 * it is opinionated in one direction on purpose: low confidence is drawn as a
 * *question*, never as a warning. Design §2.2 -- tesseract routinely reports
 * >90% confidence on a confidently-wrong digit, so a red cell would tell the
 * reader that the un-shaded cells are fine, which is exactly the belief this
 * product exists to remove. The gate is the arithmetic, and the arithmetic gets
 * the loud colour (.row-fail).
 */

:root {
  --ink: #14171a;
  --ink-soft: #5b6570;
  --line: #d8dee4;
  --bg: #fbfcfd;
  --panel: #ffffff;
  --accent: #1f5fa0;
  --warn-bg: #fff6e0;
  --warn-line: #e0a800;
  --stop-bg: #fdeceb;
  --stop-line: #b3261e;
  --ok-line: #1e7a44;
  --shade-1: #f4f7fa;
  --shade-2: #eaf1f7;
  --shade-3: #dfe9f3;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---------------------------------------------------------- staleness header */
.staleness {
  background: #101820;
  color: #eef3f8;
  padding: 10px 20px;
  border-bottom: 3px solid var(--accent);
}
.staleness.is-stale { border-bottom-color: var(--warn-line); }
.staleness.is-refused { border-bottom-color: var(--stop-line); }
.staleness-clocks { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.clock-label { color: #9fb0c0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.clock strong { font-family: var(--mono); margin: 0 6px; }
.clock-age { color: #9fb0c0; font-size: 13px; }
.clock-sep { color: #47576a; }
.staleness-note { margin: 6px 0 0; font-size: 13px; color: #9fb0c0; max-width: 78ch; }

/* ------------------------------------------------------------------ chrome */
.nav {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a.active { color: var(--accent); }
.nav .brand { font-weight: 700; color: var(--ink); font-size: 17px; letter-spacing: -.01em; }
.nav-spacer { flex: 1; }
.who { color: var(--ink-soft); font-size: 13px; }

.screen { padding: 22px 20px 80px; max-width: 1180px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 26px 0 8px; }
h3 { font-size: 15px; margin: 0 0 4px; }
.sub { color: var(--ink-soft); margin: 0 0 18px; max-width: 80ch; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px; margin-bottom: 16px;
}
.card.stop { border-color: var(--stop-line); background: var(--stop-bg); }
.card.warn { border-color: var(--warn-line); background: var(--warn-bg); }

button, .button {
  font: inherit; padding: 7px 13px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
button.ghost { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
.close { border: 0; background: transparent; color: var(--ink-soft); font-size: 22px; padding: 0 6px; }

input, select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; }
label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 3px; }

/* ------------------------------------------------------------- staged steps */
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.steps li {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--panel);
}
.steps li.done { border-color: var(--ok-line); }
.steps .tick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); }
.steps li.done .tick { background: var(--ok-line); border-color: var(--ok-line); }
.steps .detail { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }

/* ------------------------------------------------------------------ tables */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
td.num, th.num { text-align: right; font-family: var(--mono); }
tr.row-fail td { background: var(--stop-bg); }
tr.row-fail td:first-child { box-shadow: inset 3px 0 0 var(--stop-line); }

/* Click-to-source cells. The whole cell is the target: a small icon would be a
   fiddly hit area on the exact interaction the trust model depends on. */
.cell-src { cursor: pointer; border-bottom: 1px dashed var(--line); }
.cell-src:hover { background: var(--shade-3); outline: 1px solid var(--accent); }
.cell-src.conf-low { background: var(--shade-3); }
.cell-src.conf-mid { background: var(--shade-2); }
.cell-src.conf-high { background: var(--shade-1); }
.cell-src.corrected { border-bottom: 2px solid var(--accent); }
.cell-edit { width: 9em; font-family: var(--mono); }

.tag {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--shade-1);
  text-transform: uppercase; letter-spacing: .03em;
}
.tag.stop { border-color: var(--stop-line); color: var(--stop-line); background: var(--stop-bg); }
.tag.ok { border-color: var(--ok-line); color: var(--ok-line); background: #eef8f1; }
.tag.warn { border-color: var(--warn-line); color: #7a5b00; background: var(--warn-bg); }

.legend { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }

/* ------------------------------------------------------------ reconciliation */
.delta { display: flex; gap: 26px; margin: 10px 0 14px; flex-wrap: wrap; }
.delta div { min-width: 140px; }
.delta .n { font-family: var(--mono); font-size: 20px; display: block; }
.delta .k { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------------------------------------------ sliders */
.band { display: grid; grid-template-columns: 6em 1fr 12em 12em; gap: 10px; align-items: center; margin-bottom: 8px; }
.band input[type=range] { width: 100%; }
.band .pct, .band .usd { font-family: var(--mono); font-size: 13px; text-align: right; }
.band .usd { color: var(--accent); }

/* ------------------------------------------------------ recommendation cards */
.rec { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px; margin-bottom: 10px; }
.rec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rec-action { font-weight: 700; letter-spacing: .02em; }
.rec-sizing { font-family: var(--mono); }
.rec-reason { margin: 6px 0 0; color: var(--ink-soft); }
.rec-withheld { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 6px; padding: 8px; margin-top: 8px; font-size: 13px; }

.cite-group { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; background: var(--panel); }
.cite-group > h3 { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--line); background: var(--shade-1); border-radius: 8px 8px 0 0; }
.cite-group.missing { border-color: var(--stop-line); }
.cite { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.cite:last-child { border-bottom: 0; }
.cite .what { font-family: var(--mono); font-size: 13px; }
.cite .unresolved { color: var(--stop-line); }

/* -------------------------------------------------------------- source panel */
.source {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(620px, 92vw);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgba(20, 23, 26, .12); overflow: auto; z-index: 40; padding: 16px;
}
.source-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.source-meta { margin: 2px 0 10px; color: var(--ink-soft); font-size: 13px; font-family: var(--mono); }
.source-figure { margin: 0; }
.source-figure img { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.source-figure figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #101820; color: #eef3f8; padding: 9px 16px; border-radius: 6px; z-index: 60;
  max-width: 70ch;
}
.toast.bad { background: var(--stop-line); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-soft); }
.right { text-align: right; }