:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --border: #d7e0ea;
  --ink: #142F43;
  --muted: #5c6a82;
  --navy: #1E4561;
  --navy-deep: #002549;
  --accent: #00AEEF;
  --accent-ink: #ffffff;
  --gold: #C3986B;
  --danger: #c0392b;
  --good: #127a5c;
  --radius: 14px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1420; --surface: #131e2e; --surface-2: #101928; --border: #233448;
    --ink: #eef3f8; --muted: #93a4bb; --navy: #24486b; --navy-deep: #06111f;
    --accent: #4fd1ff; --accent-ink: #06111f; --gold: #e6c98a;
  }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
/* Anything iOS leaves below the app shell shows the page canvas: make it the tab bar's color. */
html { background: var(--surface); }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Jost", -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; }

/* ---------- boot / PIN ---------- */
.boot {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--navy-deep); color: #fff; gap: 18px; z-index: 100;
  padding: max(24px, var(--safe-t)) max(24px, var(--safe-r)) max(24px, var(--safe-b)) max(24px, var(--safe-l));
}
.boot-logo { background: #fff; border-radius: 14px; padding: 14px 20px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.boot-logo img { display: block; height: 34px; width: auto; }
.boot-mark { font-size: 16px; font-weight: 600; letter-spacing: .04em; opacity: .85; text-transform: uppercase; }
.pin-box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(280px, 80vw); }
.pin-label { margin: 0; font-size: 13px; color: #cfe3f5; }
.pin-input {
  width: 100%; text-align: center; font-size: 22px; letter-spacing: .3em; padding: 12px;
  border-radius: 10px; border: 1px solid #2c4a68; background: #0f2740; color: #fff;
}
.pin-error { color: #ff9d8a; font-size: 13px; margin: 0; }

/* ---------- app shell (fixed chrome, scrolling content) ---------- */
/* Pinned to the viewport edges, never taller. In an installed iPhone app iOS can
   lay the page out one status-bar height short of the screen and then draws none
   of the page past that line (only the html background): stretching the shell to
   the screen cut the tab bar off (device proof 2026-10-06). See html.ios-short. */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; }
/* The short-viewport quirk (fitStandaloneShell in app.js sets the class only when
   the window is exactly one top inset short of the screen). The band below the
   viewport shows the html background, already the tab bar's --surface, and the
   home indicator sits in it, so the tab bar needs no inset padding of its own.
   While the boot/PIN screen is up, the band takes its navy instead. */
html.ios-short .tabbar { padding-bottom: 0; }
html.ios-short .view { padding-bottom: 14px; }
html.ios-short .boot { padding-bottom: 24px; }
html.ios-short:has(#boot:not([hidden])) { background: var(--navy-deep); }
#statusfill {
  position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: var(--navy); z-index: 90;   /* under the boot/PIN screen (100), which is then the solid box */
  pointer-events: none;
}
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff;
  /* the right padding leaves room for the version badge */
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(max(16px, env(safe-area-inset-right, 0px)) + 24px) 8px max(16px, env(safe-area-inset-left, 0px));
}
/* Build number in the top-right corner of every screen (boot, PIN, app), in the topbar's
   reserved right padding. Light text on the navy boot and topbar, measured: #cfe3f5 is
   7.68:1 on #1E4561 and 11.73:1 on #002549 (light), 7.21:1 on #24486b and 14.41:1 on
   #06111f (dark). The failure pink #ffb4a6 is 5.93:1 / 9.06:1 light, 5.57:1 / 11.13:1 dark. */
.app-version {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 2px); right: calc(env(safe-area-inset-right, 0px) + 6px);
  z-index: 200;   /* above the boot/PIN screen (100) and toasts (50) */
  font: 500 9px/9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px; color: #cfe3f5; white-space: nowrap; pointer-events: none; user-select: none;
}
/* Installed app on a phone: the status-bar blur reaches ~10px past the inset, so
   the header text and the badge get 14px more clearance. A media query, not a
   custom property, because env() inside a custom property is 0 on iOS. */
@media (display-mode: standalone) and (max-width: 699px) {
  .topbar { padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
  .app-version { top: calc(env(safe-area-inset-top, 0px) + 16px); }
}
.app-version.fail { color: #ffb4a6; font-weight: 700; }
.topbar-logo { background: #fff; border-radius: 8px; padding: 4px 8px; line-height: 0; flex: 0 0 auto; }
.topbar-logo img { display: block; height: 18px; width: auto; }
.topbar > div:not(.topbar-logo) { min-width: 0; }
.topbar-title { font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { font-size: 12px; color: #cfe3f5; opacity: .85; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.views { flex: 1 1 auto; min-height: 0; position: relative; }
.view {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  /* Full-bleed up to 1500px, then centres so an ultra-wide monitor doesn't
     stretch content into a single absurd line. No wrapper element needed. */
  padding-top: 14px;
  padding-bottom: calc(14px + var(--safe-b));
  padding-left: max(14px, var(--safe-l), calc((100% - 1500px) / 2));
  padding-right: max(14px, var(--safe-r), calc((100% - 1500px) / 2));
  display: none;
}
.view.active { display: block; }

.tabbar {
  flex: 0 0 auto; display: flex; background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px; background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer;
}
.tab-icon { font-size: 19px; }
.tab.active { color: var(--navy); font-weight: 600; }
@media (prefers-color-scheme: dark) { .tab.active { color: var(--accent); } }

/* ---------- generic layout ---------- */
.section-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.section-title:first-child { margin-top: 0; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
/* Text beside a chip must be allowed to shrink, or it forces a wrap that
   strands the chip alone on the next line (measured: 306px text + 91px chip
   in a 306px row). Chips/controls never shrink. */
.row > * { min-width: 0; }
.row > .chip, .row > select, .row > .btn { flex-shrink: 0; }
.row.between > .chip { align-self: flex-start; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* Action-button groups: buttons share each line evenly instead of wrapping
   ragged at their natural widths (measured: 192/128/218/140 on a 375px screen). */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.btn-row > .btn { flex: 1 1 auto; min-width: 150px; }
@media (min-width: 700px) { .btn-row > .btn { flex: 0 1 auto; } }

/* Responsive card/list grids — fill a wide window with columns rather than
   one stretched column, collapse to a single column on iPhone. */
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 8px; align-items: start; }
.list-grid > .list-item {
  border: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; background: var(--surface);
}
.list-grid > .list-item:hover { border-color: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; }
.card-grid > .card { margin-bottom: 0; }

/* Detail views: readable prose measure on the left, everything else using the
   remaining width — no stranded margin, no 200-character lines. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
/* 1000px so iPad landscape (1024) gets the two-column layout too. */
@media (min-width: 1000px) {
  .detail-grid { grid-template-columns: minmax(0, 72ch) minmax(280px, 1fr); }
}
.detail-side > .card:last-child, .detail-main > .card:last-child { margin-bottom: 0; }
/* Review: on a phone or narrow window the review panel comes first and the
   submission's text after it; side by side from 1000px, text on the left. */
@media (max-width: 999px) { .review-grid > .detail-side { order: -1; } }
/* The review panel is where the work happens, so it gets half the width, not the leftovers. */
@media (min-width: 1000px) { .detail-grid.review-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); } }
.feedback-text { width: 100%; margin-top: 8px; min-height: 160px; font-size: 14px; line-height: 1.5; resize: vertical; overflow: hidden; }
.rv-finding { padding: 10px 0; border-bottom: 1px solid var(--border); }
.rv-finding:last-child { border-bottom: none; padding-bottom: 0; }
.rv-finding:first-child { padding-top: 0; }
.rv-out > :not(.row) { opacity: .6; }
.rv-toggle { min-width: 0; }
.rv-toggle.rv-in { background: var(--good); color: #fff; border-color: transparent; }
@media (prefers-color-scheme: dark) { .rv-toggle.rv-in { background: #127a5c; color: #fff; } }
.rv-group > summary { list-style-position: inside; }

.btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  border-radius: 10px; padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-navy { background: var(--navy); color: #fff; border-color: transparent; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-block { width: 100%; }
/* Touch devices: honour the 44pt minimum tap target. Measured 29px on
   iPhone before this, which is well under the iOS guideline. */
@media (pointer: coarse), (max-width: 700px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 8px 12px; }
  .tab { min-height: 48px; }
  .detail-back { min-height: 44px; }
  select, input[type=text], input[type=number], input[type=date] { min-height: 44px; }
  /* Only CHIPS THAT ARE BUTTONS (filters) are tap targets — status-label
     chips are spans and must stay compact. */
  button.chip { min-height: 40px; padding: 6px 14px; }
}

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.chip-gold { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); border-color: transparent; }
.chip-accent { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--navy); border-color: transparent; }
@media (prefers-color-scheme: dark) { .chip-accent { color: var(--accent); } }
.chip-good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); border-color: transparent; }
.chip-bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border-color: transparent; }

input[type=text], input[type=number], input[type=date], textarea, select {
  width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: 14.5px;
}
textarea { resize: vertical; min-height: 70px; }
label.field { display: block; margin-bottom: 10px; }
label.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }

.empty { color: var(--muted); font-size: 14px; padding: 30px 8px; text-align: center; }
.toast {
  position: fixed; left: 50%; bottom: calc(80px + var(--safe-b)); transform: translateX(-50%);
  background: var(--navy-deep); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13.5px;
  z-index: 50; max-width: 86vw; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ---------- idea / draft cards ---------- */
.idea-card { border-left: 3px solid var(--accent); }
.idea-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.idea-rationale { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; }
.source-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.source-pill { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; text-decoration: none; }
.source-pill:hover { border-color: var(--accent); }

/* Readable measure even in the single-column band (768–1080px), where the
   grid hasn't split yet and prose would otherwise reach ~1050px. */
/* ---------- coverage, compact ---------- */
/* Fresh-ground picks: two per row on a phone, each a full tap target but only
   two short lines tall. Text colors on their fills, measured: #0b5c44 on #dff3ea
   is 6.9:1 and #7a4b12 on #fbeedd is 6.5:1 (light); #bfeedd on #173a2f is 9.8:1
   and #f6d8ae on #3d2c14 is 9.8:1 (dark). */
.cov-fresh { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0 0; }
.cov-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 6px 10px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-align: left; font: inherit; }
.cov-pick-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.cov-pick-when { font-size: 11px; line-height: 1.2; opacity: .85; }
.cov-new { background: #dff3ea; color: #0b5c44; }
.cov-stale { background: #fbeedd; color: #7a4b12; }
@media (prefers-color-scheme: dark) {
  .cov-new { background: #173a2f; color: #bfeedd; }
  .cov-stale { background: #3d2c14; color: #f6d8ae; }
}
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.field-pair > .field { min-width: 0; }
.cov-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 16px; margin-top: 8px; }
.cov-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.cov-row .cov-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.cov-row .cov-last { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-row .cov-meta { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.cov-row .chip { font-size: 11px; padding: 2px 7px; }
.cov-aim { min-width: 0; padding: 3px 8px; font-size: 12px; }
.draft-body { white-space: pre-wrap; line-height: 1.6; font-size: 15px; overflow-wrap: break-word; max-width: 78ch; }
/* Final-formatting elements: title/headers with no markdown markers visible,
   and label items indented as whole paragraphs. inline-block inside pre-wrap
   keeps each on its own line while letting long text wrap within the indent. */
.draft-body .col-title { font-weight: 700; font-size: 17px; }
.draft-body .col-header { font-weight: 700; text-decoration: underline; }
.draft-body .col-indent { display: inline-block; margin-left: 2em; }
.editor-card { max-width: 78ch; }
/* ---------- version history ---------- */
.version-history { max-width: 78ch; }
.version-history > summary { cursor: pointer; list-style-position: inside; }
.ver-list { margin-top: 10px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.ver-row { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); }
.ver-current { border-color: var(--accent); }
.ver-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.ver-n { font-weight: 700; }
.ver-label { font-weight: 600; font-size: 13.5px; }
.ver-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ver-panel { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.ver-body { max-height: 55vh; overflow-y: auto; background: var(--surface); border-radius: 8px; padding: 10px; font-size: 14.5px; }
.diff-body ins { background: #d9f2e4; color: #0d3b27; text-decoration: none; border-radius: 3px; }
.diff-body del, .ver-panel .small del { background: #fbe0dc; color: #8a1f11; border-radius: 3px; }
.ver-panel .small ins { background: #d9f2e4; color: #0d3b27; text-decoration: none; border-radius: 3px; }
.diff-fold { color: var(--muted); font-style: italic; }
@media (prefers-color-scheme: dark) {
  .diff-body ins, .ver-panel .small ins { background: #16402c; color: #d8f5e6; }
  .diff-body del, .ver-panel .small del { background: #4a1d18; color: #ffc8bf; }
}
/* Toolbar and Save stay in reach while scrolling through a long column. */
/* One row each: the toolbar scrolls sideways inside itself on a narrow phone.
   The upward/downward shadow in the card color covers the view's padding, so
   no text peeks out above the toolbar or below the Save row. */
.editor-toolbar {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: -4px -4px 8px; padding: 4px;
  position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: 0 -24px 0 var(--surface);
  scrollbar-width: none;
}
.editor-toolbar::-webkit-scrollbar { display: none; }
.editor-toolbar > .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.editor-actions {
  display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; align-items: center;
  margin: 10px -4px 0; padding: 8px 4px;
  position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 24px 0 var(--surface);
}
.editor-actions > .small { min-width: 0; line-height: 1.3; }
.editor-actions .btn-row { flex-wrap: nowrap; flex: 0 0 auto; }
.editor-actions .btn-row > .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.draft-editor {
  display: block; width: 100%; min-height: 60vh; resize: none; overflow: hidden;
  font-size: 16px; line-height: 1.6; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.draft-editor:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor-warn { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: #fff4d6; color: #5a4200; }
@media (prefers-color-scheme: dark) { .editor-warn { background: #3a2f10; color: #ffe4a0; } }
.draft-body ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* Long citations/URLs must break rather than push the page sideways. */
.source-pill, .cite-item, .claim-item, .ann-quote, .list-title, .list-meta { overflow-wrap: anywhere; }
.card a, .cite-item a, .claim-item a { overflow-wrap: anywhere; }
.ann-popover {
  position: fixed; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.22); padding: 10px; width: min(300px, 88vw);
}
.ann-item { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; font-size: 13px; }
.ann-quote { font-style: italic; color: var(--muted); }

.claim-item, .cite-item { border-top: 1px solid var(--border); padding: 8px 0; font-size: 13.5px; }
.claim-item:first-child, .cite-item:first-child { border-top: none; padding-top: 0; }

.list-item { border-bottom: 1px solid var(--border); padding: 10px 0; cursor: pointer; }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-2); }
.list-title { font-weight: 600; font-size: 14.5px; }
.list-meta { font-size: 12px; color: var(--muted); }

.detail-back { background: none; border: none; color: var(--navy); font-weight: 600; font-size: 14px; padding: 4px 0 10px; cursor: pointer; }
@media (prefers-color-scheme: dark) { .detail-back { color: var(--accent); } }

.upload-drop {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 22px 14px; text-align: center;
  color: var(--muted); font-size: 13.5px; margin-bottom: 12px;
}
.upload-drop.drag { border-color: var(--accent); color: var(--accent); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* Check-progress bar. The percentage is computed from items actually
   verified, never animated, so it never claims progress that hasn't happened. */
.progress-track {
  width: 100%; height: 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  overflow: hidden; margin: 8px 0 6px;
}
.progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--accent, #00AEEF);
  transition: width .35s ease;
}
.progress-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.progress-pct { font-weight: 700; font-variant-numeric: tabular-nums; }