/* ---------------------------------------------------------------------------
   CRIF design system.
   Tokens taken from the stylesheets on crif.digital: navy #012A56 primary with
   an orange accent, Inter for body text and Recursive for display, a 9px radius
   and a 9px spacing unit.
   --------------------------------------------------------------------------- */

:root {
  --navy: #012A56;
  --navy-deep: #131B4A;
  --navy-mid: #00609C;
  --navy-tint: #D5E4EF;
  --orange: #F76F03;
  --orange-light: #FB9711;
  --yellow: #FFCE00;

  --ink: #313241;
  --ink-2: #55565f;
  --ink-3: #707070;
  --ink-4: #8B8B8B;

  --line: #E3E8EE;
  --bg: #F5F7FA;
  --panel: #FFFFFF;

  --ok: #1E7B4D;
  --ok-bg: #E6F4EC;
  --warn: #9A6A00;
  --warn-bg: #FFF6DF;
  --err: #C0392B;
  --err-bg: #FDECEA;

  /* 9px base unit, as on crif.digital */
  --space-xxs: 3px;
  --space-xs: 6px;
  --space-s: 9px;
  --space-m: 18px;
  --space-l: 27px;
  --space-xl: 36px;

  --radius: 9px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(1, 42, 86, .05), 0 2px 8px rgba(1, 42, 86, .06);
  --shadow-lg: 0 4px 20px rgba(1, 42, 86, .10);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Recursive", "Inter", Georgia, sans-serif;
  --font-mono: "Recursive-Monospace", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--font-display); color: var(--navy); }
h1 { font-size: 32px; line-height: 1.25; margin: 0 0 var(--space-xs); font-weight: 700; letter-spacing: -.4px; }
h2 { font-size: 20px; line-height: 1.3; margin: 0 0 var(--space-m); font-weight: 700; }
h3 {
  font-size: 12px; margin: 0 0 var(--space-s); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--ink-3);
  font-family: var(--font-body);
}
p.sub { margin: 0 0 var(--space-m); color: var(--ink-3); font-size: 15px; }

/* ---------- masthead: white, as on crif.digital ---------- */
.site__masthead {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1000;
}
.site__masthead-content {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--space-m);
  display: flex; align-items: center; gap: var(--space-xl); height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--navy); letter-spacing: -1px; line-height: 1;
}
.brand-logo .dot { color: var(--orange); }
.brand-divider { width: 1px; height: 26px; background: var(--line); }
.brand-app { font-size: 13px; line-height: 1.25; color: var(--ink-3); }
.brand-app strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }

.nav { display: flex; gap: var(--space-xxs); margin-left: auto; align-items: center; }
.nav a {
  color: var(--ink-2); padding: 9px 14px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 14px;
}
.nav a:hover { background: var(--bg); color: var(--navy); text-decoration: none; }
.nav a.active { color: var(--navy); font-weight: 700; position: relative; }
.nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 3px; background: var(--orange); border-radius: 3px 3px 0 0;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: var(--space-l) var(--space-m) var(--space-xl); }
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-m); margin-bottom: var(--space-l);
}

/* ---------- panels ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--space-m); margin-bottom: var(--space-m);
}
.panel-flush { padding: 0; overflow: hidden; }
.panel-head {
  padding: var(--space-m); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
}
.panel-head h2 { margin: 0; }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-m); margin-bottom: var(--space-m);
}
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-m); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy);
}
.stat.accent::before { background: var(--orange); }
.stat .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-3); margin-bottom: var(--space-xs); font-weight: 600;
}
.stat .v { font-size: 30px; font-weight: 700; letter-spacing: -.8px; color: var(--navy); font-family: var(--font-display); }
.stat .v.sm { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-3); padding: 11px var(--space-m); border-bottom: 1px solid var(--line);
  font-weight: 700; background: #FAFBFC;
}
td { padding: 13px var(--space-m); border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FAFBFC; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-neutral { background: var(--navy-tint); color: var(--navy); }

/* ---------- confidence meter ---------- */
.conf { display: flex; align-items: center; gap: var(--space-s); min-width: 116px; }
.conf-bar { flex: 1; height: 6px; background: #EDF1F5; border-radius: 3px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 3px; }
.conf-num {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2);
  min-width: 36px; text-align: right; font-weight: 600;
}

/* ---------- forms ---------- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-xs); }
input[type=text], input[type=number], input[type=file], textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--navy-mid); box-shadow: 0 0 0 3px rgba(0, 96, 156, .14);
}
textarea { resize: vertical; min-height: 68px; }
.field { margin-bottom: var(--space-m); }
.row { display: flex; gap: var(--space-s); }
.row > * { flex: 1; }

/* ---------- buttons: navy primary, as on crif.digital ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 9px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg); border-color: #CBD5E0; text-decoration: none; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: #01234A; border-color: #01234A; }
.btn-accent { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-accent:hover { background: #DD6203; border-color: #DD6203; }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-danger { color: var(--err); border-color: #EFC4BF; }
.btn-danger:hover { background: var(--err-bg); border-color: #E5A9A2; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- misc ---------- */
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: 13px; }
.empty { padding: 48px var(--space-m); text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink); margin-bottom: var(--space-xs); font-size: 16px; font-family: var(--font-display); }
.terms { display: flex; flex-wrap: wrap; gap: var(--space-xxs); margin-top: var(--space-xs); }
.term {
  background: var(--navy-tint); color: var(--navy); padding: 2px 8px;
  border-radius: var(--radius-sm); font-size: 11px; font-family: var(--font-mono); font-weight: 500;
}
.alert {
  padding: 12px var(--space-m); border-radius: var(--radius-sm);
  margin-bottom: var(--space-m); font-size: 14px; border-left: 3px solid;
}
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--yellow); }
.alert-err { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

.split { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-m); align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }

.doc-text {
  background: #FAFBFC; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-m); max-height: 540px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--ink-2);
}
.field-row { display: grid; grid-template-columns: 1fr 96px; gap: var(--space-s); align-items: end; margin-bottom: var(--space-s); }
.toolbar { display: flex; gap: var(--space-s); align-items: center; }
.spacer { flex: 1; }

/* ---------- footer ---------- */
.site__footer {
  border-top: 1px solid var(--line); background: var(--panel);
  margin-top: var(--space-xl); padding: var(--space-m) 0;
}
.site__footer-content {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--space-m);
  display: flex; align-items: center; gap: var(--space-m);
  font-size: 13px; color: var(--ink-4);
}

/* ---------- review screen ---------- */
/* Field entry is the throughput-critical screen, so the field column gets real width.
   At 400px the value inputs could not show a VIN and its confidence side by side. */
/* The document is the thing an operator reads, so it gets the majority of the width and
   the field panel is kept as narrow as it can usefully be. Collapsing to one column stacks
   the fields above the document, which hides it -- so the split is held far longer. */
.review-split {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
  gap: var(--space-m); align-items: start;
}
@media (max-width: 860px) { .review-split { grid-template-columns: 1fr; } }

.candidates { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.candidate {
  flex: 1 1 220px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-s) 12px; background: #FAFBFC;
}
.candidate.is-top { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 1px var(--navy); }
.candidate-name { font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 4px; }
.candidate-meta { display: flex; align-items: center; gap: var(--space-s); }
.candidate-raw { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }

/* Field rows: label above, wide value input, confidence and provenance to the right. */
.fields-table { display: flex; flex-direction: column; }
.field-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 124px;
  gap: var(--space-s);
  /* Top-aligned, because the left column grows with the page badges while the right holds
     only the meter -- centring left the two visibly out of step. */
  align-items: start;
  /* Horizontal padding, pulled back out with a negative margin so the row still lines up
     with the panel. Without it the selected background began exactly at the text and cut
     off the label, the badges and the confidence figure. */
  padding: 11px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.field-item:last-child { border-bottom: none; }
.field-item label { margin-bottom: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.field-item input[type=text] { font-size: 14px; }
.field-item input.is-empty { background: #FFFCF5; border-color: #EBD9A8; }
/* Sits alongside the label so the meter reads level with the field it describes. */
.field-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  padding-top: 18px;
}
.field-meta .conf { min-width: 0; width: 100%; }

.src {
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
}
.src-pattern { background: var(--ok-bg); color: var(--ok); }
.src-llm { background: #EDE7F6; color: #5E35B1; }
.src-manual { background: var(--navy-tint); color: var(--navy); }
.src-none { background: var(--warn-bg); color: var(--warn); }

.extract-summary {
  display: flex; gap: var(--space-m); padding: 10px 12px; background: #FAFBFC;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--space-m);
  font-size: 13px; flex-wrap: wrap;
}
.extract-summary span { display: flex; align-items: center; gap: 5px; }
.dot-marker { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.src-invalid { background: var(--err-bg); color: var(--err); }
.field-item input.is-invalid { border-color: var(--err); background: #FFF8F7; }

/* ---------- document viewer ---------- */
.viewer { position: sticky; top: 84px; }
.viewer-stage {
  position: relative; background: #4A5464; border-radius: var(--radius-sm);
  padding: 10px; overflow: auto; max-height: calc(100vh - 190px);
}
/* The page fits the column by default. Width is driven by a variable so the zoom control
   can grow it past 100% and let the stage scroll, rather than the image overflowing. */
.viewer-page {
  position: relative; margin: 0 auto;
  width: var(--zoom, 100%); max-width: none;
}
.viewer-page img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.35); background: #fff;
}

/* Highlight boxes are positioned as percentages, so they track the image at any zoom. */
.hl {
  position: absolute; border: 2px solid var(--orange);
  background: rgba(247, 111, 3, .18); border-radius: 2px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  /* A short value such as an APR occupies a fraction of a percent of the page; without a
     floor the highlight is a sliver that is impossible to see. */
  min-width: 14px; min-height: 12px;
  margin: -3px 0 0 -3px; padding: 3px;
  box-sizing: content-box;
}
.hl.show { opacity: 1; }
.hl.active {
  border-color: var(--orange); background: rgba(247, 111, 3, .30);
  box-shadow: 0 0 0 3px rgba(247, 111, 3, .28), 0 0 0 9999px rgba(31, 58, 95, .30);
}

.viewer-bar {
  display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap;
  padding: 8px 0 10px;
}
.page-pill {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px;
  background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-2);
}
.page-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.page-pill:hover { border-color: var(--navy-mid); }

.zoom-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  font-size: 15px; line-height: 1; font-weight: 700;
}
.zoom-btn:hover { border-color: var(--navy-mid); color: var(--navy); }
.zoom-level { font-size: 12px; color: var(--ink-3); min-width: 40px; text-align: center; }

/* The field list scrolls independently so a long schema never pushes the document away. */
/* Padding matches the rows' negative margin so nothing is clipped at the scroll edge. */
.fields-scroll {
  max-height: calc(100vh - 430px); overflow-y: auto;
  padding: 0 12px; margin: 0 -12px;
}

.field-item { cursor: pointer; transition: background .12s, box-shadow .12s; }
.field-item:hover { background: #FAFBFC; }
/* The selected row is outlined rather than merely tinted, so it is obvious which field the
   highlight on the page belongs to. */
.field-item.selected {
  background: #FFF4E8;
  box-shadow: inset 3px 0 0 var(--orange), 0 0 0 1px rgba(247, 111, 3, .35);
  border-bottom-color: transparent;
}
.field-item.selected input[type=text] { border-color: var(--orange); background: #fff; }
.field-item.no-box { cursor: default; }
.field-item.no-box:hover { background: transparent; }
.locate-hint { font-size: 10px; color: var(--ink-4); }

/* ---------- occurrence badges ---------- */
/* A value printed on several pages corroborates itself. Each badge jumps to that copy. */
.page-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.page-badge {
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: var(--font-mono);
}
.page-badge:hover { border-color: var(--navy-mid); background: var(--navy-tint); }
.page-badge.active { background: var(--orange); border-color: var(--orange); color: #fff; }