:root { --link:#1651a8; --navy:#0A1628; --red:#C8102E; --ink:#18212f; --mut:#5b6678; --line:#d9dee7; --bg:#f6f7f9; --card:#fff; --ok:#1e7a46; }
@media (prefers-color-scheme: dark) { :root { --link:#8fbaff; --ink:#e8edf5; --mut:#9aa6ba; --line:#2a3445; --bg:#0d1420; --card:#141d2c; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
.bar { display:flex; align-items:center; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-top)) 16px; background:var(--navy); color:#fff; position:sticky; top:0; z-index:5; }
.bar .brand { color:#fff; font-weight:700; text-decoration:none; letter-spacing:.02em; white-space:nowrap; flex:none; }
.bar .sub { color:#c9d3e3; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
main { max-width:760px; margin:0 auto; padding:16px 16px 80px; }
.btn { display:inline-block; font:inherit; font-weight:600; padding:11px 16px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); text-decoration:none; cursor:pointer; margin:4px 6px 4px 0; }
.btn.primary { background:var(--red); border-color:var(--red); color:#fff; }
.btn.small { padding:7px 12px; font-size:14px; }
.btn:disabled { opacity:.6; }
.link { font:inherit; background:none; border:0; color:var(--red); text-decoration:underline; cursor:pointer; padding:6px 0; }
.in { width:100%; font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); }
.lbl { font-weight:650; margin-top:14px; display:block; }
.list { list-style:none; padding:0; margin:16px 0; }
.list li a { display:block; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; text-decoration:none; color:var(--ink); }
.list li a span { display:block; color:var(--mut); font-size:14px; }
.empty { color:var(--mut); }
.backup { margin-top:28px; padding:14px; border:1px dashed var(--line); border-radius:12px; }
.backup h3 { margin:0 0 4px; font-size:16px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.status { color:var(--mut); font-size:14px; }
.pdflink { margin:6px 0 14px; }
.sec { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:6px 14px 14px; margin:14px 0; }
.sec h2 { font-size:17px; margin:12px 0 4px; color:var(--navy); }
@media (prefers-color-scheme: dark) { .sec h2 { color:#fff; } }
.field { margin-top:14px; }
.field[hidden] { display:none; }
.field .lbl { margin-top:0; }
.guide, .note, .statement { color:var(--mut); font-size:14px; margin:2px 0 6px; }
.note:empty { display:none; }
.opts { display:grid; gap:6px; }
.opt { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.opt input { margin-top:5px; flex:none; }
.opt:has(input:checked) { border-color:var(--red); background:color-mix(in srgb, var(--red) 8%, transparent); }
.trow { display:grid; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.cell { display:grid; gap:3px; font-size:14px; color:var(--mut); }
.cell.wide { margin-bottom:8px; }
.derived { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb, var(--ink) 4%, transparent); font-weight:650; }
.err { color:#b3261e; font-size:14px; margin:4px 0; }

.cell input[type=checkbox] { justify-self:start; width:22px; height:22px; }
.trow .link { justify-self:start; }

.photos { margin-top:10px; display:grid; gap:10px; }
.slot { border:1px dashed var(--line); border-radius:10px; padding:10px; }
.slothead { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.slothead .need { color:#b3261e; font-weight:650; }
.slothead .ok { color:var(--ok); font-weight:650; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.thumbs figure { margin:0; width:92px; text-align:center; }
.thumbs img { width:92px; height:92px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; }
.photosum { margin:6px 0 10px; padding:9px 12px; border-radius:10px; font-size:14px; border:1px solid var(--line); }
.photosum.need { border-color:#e0a39d; color:#8a2b24; background:color-mix(in srgb, #b3261e 7%, transparent); }
.photosum.ok { color:var(--ok); }

.sigpad { width:100%; height:auto; aspect-ratio:3/1; background:#fff; border:1.5px dashed var(--line); border-radius:10px; touch-action:none; display:block; }
.sigview { max-width:100%; max-height:120px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px; display:block; }
dialog { max-width:min(92vw,520px); border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); padding:18px; }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog h3 { margin:0 0 8px; }
dialog ul { padding-left:20px; margin:8px 0; }
.finishbox { margin:8px 0 12px; padding:10px 12px; border:1px solid #e0a39d; border-radius:10px; background:color-mix(in srgb, #b3261e 7%, transparent); font-size:14px; }
.finishbox ul { margin:6px 0 0; padding-left:20px; }
.finalbadge { display:inline-block; padding:2px 10px; border-radius:999px; background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); font-weight:650; font-size:13px; }

.waiver { display:block; margin:8px 0 12px; }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.chip { border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:14px; cursor:pointer; }
.chip.on { border-color:var(--navy, #10203F); background:color-mix(in srgb, var(--navy, #10203F) 12%, transparent); font-weight:650; }
.findings { margin-top:14px; padding-top:10px; border-top:1px dashed var(--line); }
.findings h3 { margin:0 0 8px; font-size:16px; }
.fcard, .frow { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; background:var(--card); }
.fcard .in { display:block; width:100%; margin:6px 0; box-sizing:border-box; }
.frow.safety { border-left:5px solid #b3261e; } .frow.major { border-left:5px solid #c77700; } .frow.minor { border-left:5px solid #8a8f98; }
.fhead { display:flex; gap:10px; align-items:baseline; } .fmeta { font-size:13px; color:var(--mut, #667); }
.fobs { margin:2px 0; } .fwhy { font-size:14px; color:var(--mut, #667); }
.note.warn { color:#9a5b00; font-weight:600; }
.about h2{margin:0 0 6px} .about h3{margin:14px 0 4px;font-size:16px} .about ul{padding-left:20px;margin:4px 0}

.trialbar { background:#fff4d6; color:#3b2f00; border:1px solid #e3c36b; border-radius:10px; padding:8px 12px; margin:0 0 12px; font-size:14px; }
.trialbar a { color:#9b1c2e; font-weight:650; }
/* The status line has its own row, so its text changing ("Saving…" / "Saved…") can never move the buttons under a tapping finger. */
.toolbar > .status { flex: 1 0 100%; min-height: 1.3em; }

.bar .brand img { display:block; height:26px; width:auto; }

.help h2 { margin:18px 0 6px; font-size:18px; } .faq { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:var(--card); }
.faq summary { cursor:pointer; font-weight:650; } .faq p { margin:8px 0 0; line-height:1.5; }

.thumb-wrap { position:relative; display:inline-block; } .thumb-wrap img { display:block; }
.thumb-marks { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
dialog.annot { width:min(96vw,720px); max-height:94vh; overflow:auto; }
.annot-stage { position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; }
.annot-img { display:block; max-width:100%; max-height:58vh; }
.annot-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }

.tray { border:1.5px dashed var(--line); border-radius:12px; padding:10px 12px; margin:8px 0 12px; background:var(--card); }
.trayhead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .tray .in { margin:6px 0; max-width:240px; }

.mine { display:inline-flex; align-items:center; } .chipx { border:0; background:none; color:var(--mut); cursor:pointer; padding:4px 6px; font-size:13px; }
.savewording { margin:4px 0; } .savewording .in { display:inline-block; width:auto; max-width:60%; }

@media (prefers-color-scheme: dark) { .note.warn { color:#f0c46a; } }

/* Links take a colour from the theme; the browser's default blue is unreadable on the dark theme. Buttons, the header and the sales page set their own. */
a { color:var(--link); }

/* dark theme: status colours chosen for the dark ground (the light-theme reds and greens are too dim on it) */
@media (prefers-color-scheme: dark) {
  :root { --ok:#52d38c; }
  .err, .slothead .need { color:#ff8f9a; }
  .photosum.need { color:#ffb3ba; border-color:#7a3a40; }
  .fobs, .fwhy { color:inherit; }
}

.endbar { margin:22px 0 8px; padding-top:14px; border-top:2px solid var(--line); }
.other-text { margin-top:8px; }

.sechead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sechead h2 { margin:0; } .cam { display:inline-flex; align-items:center; gap:6px; margin:0; }
.secphotos { margin-top:12px; } .secphotos .lbl { margin-bottom:4px; }
.nextsec { margin-top:14px; text-align:right; }
select.in.move { margin-top:6px; max-width:100%; font-size:13px; padding:6px 8px; }
.covercard { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0 12px; background:var(--card); }
.coverframe { width:100%; max-width:340px; aspect-ratio:612/267; border:1px solid var(--line); border-radius:6px; background-size:cover; background-repeat:no-repeat; margin:6px 0; }
.covercard .slide { display:block; max-width:340px; } .covercard input[type=range] { width:100%; }
.jumpfab { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:20; border:0; border-radius:999px; padding:12px 18px; font:inherit; font-weight:700; background:var(--navy); color:#fff; box-shadow:0 6px 18px #0006; cursor:pointer; }
.jumpdlg .jumplist { display:grid; gap:6px; max-height:60vh; overflow:auto; margin:8px 0 12px; } .jumpdlg .btn { margin:0; text-align:left; }

.branding { margin:18px 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.branding h3 { margin:0 0 4px; } .logorow { margin:12px 0; }
.logoprev { display:block; max-width:260px; max-height:90px; margin:8px 0; padding:8px; border:1px solid var(--line); border-radius:8px; }
.logoprev.ondark { background:#0A1628; } .logoprev.onlight { background:#fff; }
.colors { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.colorpick { display:grid; gap:4px; } .colorpick input { width:64px; height:40px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--card); }

.nextsec { margin:2px 0 10px; text-align:left; } .nextsec .link { font-size:14px; }

.thumbs figure[draggable="true"] { cursor:grab; } .thumbs figure.dragging { opacity:.4; }
.slot.dropping, .tray.dropping { outline:2px solid var(--link, #1d5fb4); outline-offset:2px; background:color-mix(in srgb, var(--link, #1d5fb4) 8%, transparent); }