/* mailscan viewer — alpha. Phone first (390px), WCAG AA, no external resources. */

:root {
  color-scheme: light dark;
  --bg: #f6f5f2;
  --card: #ffffff;
  --fg: #161616;
  --muted: #454545;          /* 9.4:1 on --card */
  --line: #d3d0c9;           /* decorative only */
  --field: #6e6e6e;          /* 5.1:1 — form/field boundaries (WCAG 1.4.11) */
  --accent: #0a4fbf;         /* 6.9:1 on white */
  --accent-fg: #ffffff;
  --danger: #9e0c0c;         /* 8.5:1 on white */
  --danger-bg: #fdeaea;
  --warn: #6b4100;           /* 8.3:1 on white */
  --warn-bg: #fff0d1;
  --ok: #11652a;
  --chip: #e8ecf3;
  --mark: #ffe066;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --card: #1c1d20;
    --fg: #f2f2f2;
    --muted: #c9c9c9;
    --line: #3a3c41;
    --field: #9a9da3;
    --accent: #9cc0ff;
    --accent-fg: #0b1a33;
    --danger: #ffb3ad;
    --danger-bg: #3d1515;
    --warn: #ffd27d;
    --warn-bg: #352708;
    --ok: #8fdba3;
    --chip: #2a2e36;
    --mark: #6b5800;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1.125rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.has-nav { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.wrap { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 2rem; }

a { color: var(--accent); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: .5rem 1rem; z-index: 20; }

/* Type scale: headers are always larger than the body they introduce. */
h1 { font-size: 1.875rem; line-height: 1.2; margin: .25rem 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.375rem; line-height: 1.25; margin: 2rem 0 .75rem; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.25rem 0 .5rem; }
.h-sub { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: .35rem; }
.h-overdue { color: var(--danger); }
.eyebrow { margin: 0; font-size: 1rem; font-weight: 700; color: var(--muted); }
.sub { color: var(--muted); font-size: 1rem; }
.lede { font-size: 1.2rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1rem; word-break: break-all; }

.page-head { margin-bottom: .5rem; }
.headline-pay { font-size: 1.375rem; margin: .25rem 0 .75rem; }
.headline-pay strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }

.caveat {
  margin: .75rem 0;
  padding: .6rem .9rem;
  font-size: 1rem;
  background: var(--warn-bg);
  color: var(--fg);
  border-left: 5px solid var(--warn);
  border-radius: 8px;
}
.alert {
  padding: .75rem 1rem;
  background: var(--danger-bg);
  color: var(--fg);
  border-left: 5px solid var(--danger);
  border-radius: 8px;
  word-break: break-word;
}
.empty { padding: 1rem; background: var(--card); border-radius: var(--radius); border: 1px dashed var(--field); }

/* ---- lists ------------------------------------------------------------ */
.items, .rows, .chips { list-style: none; margin: 0; padding: 0; }
.items, .rows { display: grid; gap: .75rem; }

/* Action item: who + what on the left, the answer (amount, date) on the right. */
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  min-height: 5rem;
  padding: 1rem 1rem 1rem .9rem;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--line);
  border-left: 7px solid var(--field);
  border-radius: var(--radius);
}
.item.tone-overdue { border-left-color: var(--danger); }
.item.tone-week { border-left-color: var(--warn); }
.item-main, .item-side { display: flex; flex-direction: column; gap: .2rem; }
.item-side { align-items: flex-end; text-align: right; }
.item-who { font-size: 1.25rem; font-weight: 750; line-height: 1.25; }
.item-sum { line-height: 1.4; }
.item-amt { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-when { font-weight: 650; white-space: nowrap; }
.item-rel { font-weight: 750; white-space: nowrap; }
.tone-overdue .item-rel, .ask.tone-overdue .ask-when strong { color: var(--danger); }
.tone-week .item-rel, .ask.tone-week .ask-when strong { color: var(--warn); }

.ai-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: .25rem;
  padding: .05rem .5rem;
  font-size: .95rem;
  font-weight: 650;
  color: var(--fg);
  border: 1.5px dashed var(--field);
  border-radius: 6px;
}

/* Letter row */
.row {
  display: block;
  min-height: 3.5rem;
  padding: .85rem 1rem;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.row-who { font-size: 1.2rem; font-weight: 750; line-height: 1.25; }
.row-date { flex: none; font-size: 1rem; color: var(--muted); }
.row-what { display: block; margin-top: .1rem; }
.due {
  display: inline-block;
  margin-top: .45rem;
  padding: .15rem .65rem;
  font-size: 1rem;
  font-weight: 700;
  background: var(--chip);
  color: var(--fg);
  border-radius: 999px;
}
.due.tone-overdue { background: var(--danger-bg); color: var(--danger); }
.due.tone-week { background: var(--warn-bg); color: var(--warn); }
.snip { display: block; margin-top: .45rem; font-size: 1rem; color: var(--muted); }
mark { background: var(--mark); color: var(--fg); padding: 0 .1em; border-radius: 3px; }

.month { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.result-count { font-weight: 650; margin: 1rem 0 .25rem; }

/* ---- disclosures (<details>) — CSS only ------------------------------- */
details.fold, details.filters {
  margin: 1.25rem 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: .6rem 1rem;
  font-size: 1.25rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; font-size: 1.6rem; line-height: 1; font-weight: 500; }
details[open] > summary::after { content: "−"; }
details > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
details > .items { margin: 0 .5rem .75rem; }
details > :last-child { margin-bottom: 1rem; }
details.group { margin-top: 1.5rem; }

/* ---- search + facets -------------------------------------------------- */
.search { display: flex; gap: .5rem; margin: .5rem 0 .25rem; }
.search input {
  flex: 1;
  min-width: 0;
  min-height: 3.25rem;
  padding: .6rem .9rem;
  font: inherit;
  color: var(--fg);
  background: var(--card);
  border: 2px solid var(--field);
  border-radius: 10px;
}
.search input:focus { border-color: var(--accent); }
button, .login-form button {
  min-height: 3.25rem;
  padding: 0 1.2rem;
  font: inherit;
  font-weight: 750;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.hint { margin: .25rem 0 1rem; font-size: 1rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips.active { margin: .5rem 0 1rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.875rem;            /* 46px */
  padding: .35rem .95rem;
  font-weight: 650;
  color: var(--fg);
  background: var(--chip);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
}
.chip.on { background: var(--accent); color: var(--accent-fg); }
.chip .n { font-weight: 800; font-variant-numeric: tabular-nums; }
.chip.small { min-height: 2.75rem; margin: 0 .25rem .35rem 0; }
.facet-title { font-size: 1.1rem; margin: 1rem 1rem .5rem; }

/* ---- detail ----------------------------------------------------------- */
.back { margin: 0 0 .5rem; }
.back a { display: inline-flex; align-items: center; min-height: 2.875rem; font-weight: 700; }
.kind { font-size: 1.2rem; margin: 0 0 .75rem; }
.answer {
  padding: .25rem 1rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.answer h2 { margin-top: .75rem; }
.ask { padding: .25rem 0 .75rem .9rem; border-left: 6px solid var(--field); margin-bottom: .75rem; }
.ask.tone-overdue { border-left-color: var(--danger); }
.ask.tone-week { border-left-color: var(--warn); }
.ask-big { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ask-when { margin: .25rem 0; font-size: 1.15rem; }
.ask-sum { margin: .25rem 0; }
.ask-none { font-size: 1.2rem; font-weight: 650; }
.done { color: var(--ok); font-weight: 650; }

.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.facts dt { font-weight: 750; }
.facts dd { margin: 0; }
.facts dd > a:not(.chip) { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; font-weight: 650; }

.photo { margin: 1.5rem 0; }
.photo img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.photo figcaption { margin-top: .4rem; }
.photo figcaption a { display: inline-flex; align-items: center; min-height: 2.875rem; font-weight: 700; }
.noimg { padding: 2rem 1rem; text-align: center; border: 2px dashed var(--field); border-radius: 10px; background: var(--card); }

.ocr {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 1rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.techlist dt { font-weight: 750; margin-top: .6rem; }
.techlist dd { margin: 0; word-break: break-word; }

/* ---- misc ------------------------------------------------------------- */
.more { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
  background: var(--chip);
  border-radius: 10px;
}
.foot { margin-top: 2rem; }
.foot a { display: inline-flex; align-items: center; min-height: 2.875rem; }

/* ---- login ------------------------------------------------------------ */
.login-form { display: grid; gap: .6rem; max-width: 24rem; }
.login-form label { font-weight: 750; font-size: 1.2rem; }
.login-form input {
  min-height: 3.25rem;
  padding: .6rem .9rem;
  font: inherit;
  color: var(--fg);
  background: var(--card);
  border: 2px solid var(--field);
  border-radius: 10px;
}

/* ---- bottom tab bar: within thumb reach ------------------------------ */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card);
  border-top: 1px solid var(--field);
}
.tabbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 4rem;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--fg);
  text-decoration: none;
  border-top: 4px solid transparent;
}
.tabbar a[aria-current="page"] { color: var(--accent); border-top-color: var(--accent); }
.count {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .4rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--card);
  background: var(--danger);
  border-radius: 999px;
}

/* ---- desktop: secondary ---------------------------------------------- */
@media (min-width: 64rem) {
  .wrap { max-width: 72rem; padding: 2rem; }
  .detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .detail .photo { position: sticky; top: 1rem; margin-top: 0; }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabbar { left: 50%; transform: translateX(-50%); max-width: 36rem; border: 1px solid var(--field); border-bottom: 0; border-radius: 14px 14px 0 0; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .tabbar, .back, .search, .filters { display: none; } body.has-nav { padding-bottom: 0; } }