/* RemitBench - shared brand layer for the landing page and the app.
   Single light theme, every colour set explicitly. No build step. */

:root {
  /* ink + paper */
  --ink:        #101c26;
  --ink-2:      #2f3f4a;
  --muted:      #5f6f79;
  --faint:      #93a1a8;
  --paper:      #f4f6f4;
  --surface:    #ffffff;
  --surface-2:  #fafbfa;
  --rule:       #dde2df;
  --rule-2:     #c4ccc7;

  /* ledger green: the one accent */
  --accent:      #10513a;
  --accent-deep: #0a3527;
  --accent-soft: #e7efe9;
  --accent-line: #b9cdc1;

  /* caution ochre, used only for the accuracy disclaimer */
  --flag:      #7d5411;
  --flag-soft: #fbf2df;
  --flag-line: #e7d6ac;

  /* trace highlight: the box drawn over a number on its source page.
     Deliberately off the brand palette, because it has to read as an
     annotation on a dense black and white document, never as part of it. */
  --hl-line: #e8420a;
  --hl-fill: rgba(255, 178, 26, .38);
  --hl-glow: rgba(232, 66, 10, .22);
  --hl-drop: 0 1px 5px rgba(232, 66, 10, .3);

  /* the widest a docked evidence layout may grow, and the column the
     rendered PDF page sits in. Both pages read these. */
  --wide:   min(1600px, 96vw);
  --pane-w: 620px;

  --bad:      #8b2b21;
  --bad-soft: #f9e9e6;

  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(16, 28, 38, .05), 0 8px 24px -16px rgba(16, 28, 38, .28);
  --w: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------- wordmark */

.mark {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  letter-spacing: .01em; text-transform: none;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.mark:hover { color: var(--ink); }
.mark .bars { display: inline-flex; gap: 2px; align-items: flex-end; transform: translateY(1px); }
.mark .bars i { display: block; width: 3px; background: var(--accent); border-radius: 1px; }
.mark .bars i:nth-child(1) { height: 8px; }
.mark .bars i:nth-child(2) { height: 13px; }
.mark .bars i:nth-child(3) { height: 10px; opacity: .45; }
.mark small {
  font-size: 11px; letter-spacing: .12em; color: var(--muted); font-weight: 500;
}

/* --------------------------------------------------------------- header */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 20px; min-height: 62px;
}
.site-head nav { display: flex; gap: 22px; margin-left: auto; }
.site-head nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500;
}
.site-head nav a:hover { color: var(--accent); }
.site-head nav a.btn-primary, .site-head nav a.btn-primary:hover { color: #fff; }

/* -------------------------------------------------------------- buttons */

/* display:inline-flex below wins over the hidden attribute, so restore it. */
.btn[hidden] { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 14px/1 var(--sans); letter-spacing: .01em;
  padding: 11px 18px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink);
  text-decoration: none; transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn:disabled:hover { border-color: var(--rule-2); color: var(--ink); }
.btn:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --------------------------------------------------------- data surface */

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}

.eyebrow {
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}

.scroller { overflow-x: auto; }

table.grid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.grid th, table.grid td {
  border-bottom: 1px solid var(--rule); padding: 9px 14px; text-align: left; vertical-align: top;
}
table.grid thead th {
  background: var(--surface-2); border-bottom: 1px solid var(--rule-2);
  font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap;
}
table.grid tbody th {
  font-weight: 500; color: var(--muted); white-space: nowrap; width: 232px;
  background: var(--surface-2);
}
table.grid td.num { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.grid td.miss { color: var(--faint); }
table.grid tbody tr:last-child th, table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid .file {
  display: block; margin-top: 3px; font: 400 11px/1.35 var(--mono);
  color: var(--muted); word-break: break-all;
}

/* ------------------------------------------------------ source evidence */
/* The rendered PDF page and the highlight over the value it was read from.
   Shared by the landing demo and the app so the two always match. The
   geometry comes from boxToCss in extract.mjs; this is only paint. */

.peek-stage { position: relative; width: max-content; margin: 0 auto; line-height: 0; }
.peek-stage canvas { display: block; background: #fff; }
.peek-stage .box {
  position: absolute; pointer-events: none; border-radius: 2px;
  border: 2px solid var(--hl-line);
  background: var(--hl-fill);
  box-shadow: 0 0 0 3px var(--hl-glow), var(--hl-drop);
  animation: hl-land .85s ease-out 1;
}

/* one flash as the box lands, so the eye finds it on a page of grey type */
@keyframes hl-land {
  0% {
    background: rgba(255, 178, 26, .72);
    box-shadow: 0 0 0 0 rgba(232, 66, 10, .55), var(--hl-drop);
  }
  55% {
    background: var(--hl-fill);
    box-shadow: 0 0 0 12px rgba(232, 66, 10, 0), var(--hl-drop);
  }
  100% {
    background: var(--hl-fill);
    box-shadow: 0 0 0 3px var(--hl-glow), var(--hl-drop);
  }
}
@media (prefers-reduced-motion: reduce) {
  .peek-stage .box { animation: none; }
}

/* ---------------------------------------------------------------- notes */

.note {
  border: 1px solid var(--flag-line); background: var(--flag-soft); color: var(--flag);
  border-radius: 5px; padding: 12px 15px; font-size: 13.5px; line-height: 1.55;
}
.note strong { font-weight: 600; }

/* --------------------------------------------------------------- footer */

.site-foot {
  border-top: 1px solid var(--rule); background: var(--surface);
  margin-top: 72px; padding: 28px 0;
  font-size: 13px; color: var(--muted);
}
.site-foot .wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.site-foot .spacer { flex: 1; }

@media (max-width: 700px) {
  .site-head nav { gap: 14px; }
  .site-head nav a.hide-sm { display: none; }
  table.grid tbody th { width: auto; }
}