/* Phone-first. Every size below assumes a hand, a thumb and a stockroom.
   Touch targets are 44px minimum because that is the smallest thing a person
   hits reliably while holding a clipboard in the other hand. */
/* Two themes, one set of names. Every colour below is a token; no rule further
   down this file may hard-code a colour that differs between light and dark,
   because the one that does is the one that turns invisible on somebody's
   phone at seven in the morning. The light values are in the block at the end
   of this file. */
:root{
  --bg:#0b1420; --card:#12202f; --card2:#16283a; --ink:#eaf2fb; --mut:#8ea7c0;
  --line:#22374f; --acc:#34d399; --acc-ink:#04241a;
  --crit:#f87171; --major:#fbbf24; --minor:#7dd3fc; --ok:#34d399;
  --bar:rgba(11,20,32,.93);      /* sticky header and tab bar */
  --on-crit:#2b0707; --on-mut:#0b1420;
  --tint-good:#14402f; --line-good:#1d5c44;
  --tint-mid:#3d3416;  --line-mid:#5c4f22;
  --tint-bad:#42191c;  --line-bad:#63272b;
  --tint-info:#1d3b52; --ink-info:#7dd3fc;
  --bub-me:#0e5c46; --bub-me-ink:#eaf2fb; --bub-me-who:#8ff0d0;
  --bub-me-stamp:rgba(255,255,255,.6);
  --inset:rgba(0,0,0,.25); --shadow:rgba(0,0,0,.5);
  --r:14px; --nav:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc)}

/* -------------------------------------------------------------- structure */
.top{position:sticky;top:0;z-index:20;background:var(--bar);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.top-row{display:flex;align-items:center;gap:10px}
.top h1{font-size:1.05rem;margin:0;flex:1;font-weight:650;letter-spacing:-.01em}
/* The last card must clear the fixed bottom bar. Body padding alone was not
   enough: once the page is scrolled to the end, the final control lands
   underneath the navigation and simply cannot be tapped. Found by a test that
   tried to press Sign out and had its click swallowed by the nav. */
.wrap{padding:14px 14px calc(24px + var(--nav));max-width:640px;margin:0 auto}
.screen{display:none} .screen.on{display:block}

/* -------------------------------------------------------------------- nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--bar);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;background:none;border:0;padding:9px 2px 8px;color:var(--mut);
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;
  min-height:var(--nav);font-weight:600;letter-spacing:.02em}
/* An author `display` beats the browser's own [hidden]{display:none}, so a
   nav marked hidden stays laid out and keeps swallowing taps. The same bug
   shape hid a language menu on the marketing site this week; it is worth
   stating in one place that hiding something needs both. */
.nav[hidden]{display:none}
.nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9}
.nav button[aria-current="page"]{color:var(--acc)}
.nav .dot{position:absolute;transform:translate(13px,-4px);width:8px;height:8px;
  border-radius:50%;background:var(--crit)}

/* ------------------------------------------------------------------ cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:12px}
.card h2{font-size:.95rem;margin:0 0 10px;font-weight:650}
.mut{color:var(--mut)} .tiny{font-size:.78rem;line-height:1.45}
.rowb{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ------------------------------------------------------------------ score */
.score{display:flex;align-items:center;gap:14px}
.ring{width:74px;height:74px;flex:none;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;font-weight:700}
.band-good{color:var(--ok)} .band-mid{color:var(--major)} .band-bad{color:var(--crit)}

/* ----------------------------------------------------------------- alerts */
.alert{display:flex;gap:10px;padding:11px 12px;border-radius:11px;margin-bottom:8px;
  border:1px solid var(--line);background:var(--card2)}
.alert .bar{width:3px;border-radius:3px;flex:none}
.alert.crit .bar{background:var(--crit)} .alert.major .bar{background:var(--major)}
.alert.minor .bar{background:var(--minor)}
.alert b{display:block;font-size:.92rem;font-weight:650}
.alert span{display:block;color:var(--mut);font-size:.79rem}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 16px;border-radius:11px;border:1px solid var(--line);
  background:var(--card2);font-weight:650;width:100%;margin-top:8px}
.btn.go{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5}
.btn-row{display:flex;gap:8px} .btn-row .btn{margin-top:0}

/* ------------------------------------------------------------------ forms */
.field{margin-bottom:12px}
.field label{display:block;font-size:.79rem;color:var(--mut);margin-bottom:5px;font-weight:600}
.field input,.field textarea,.field select{width:100%;min-height:46px;padding:11px 13px;
  border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.field .hint{font-size:.73rem;color:var(--mut);margin-top:4px}
.field.bad input{border-color:var(--crit)}

/* ------------------------------------------------------------------ rules */
.rule{border-bottom:1px solid var(--line);padding:11px 0}
.rule:last-child{border-bottom:0}
.rule .name{font-size:.92rem;font-weight:600;margin-bottom:7px;display:flex;gap:7px;align-items:baseline}
.sev{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;flex:none}
.sev.crit{color:var(--crit)} .sev.major{color:var(--major)} .sev.minor{color:var(--minor)}
.seg{display:flex;gap:6px}
.seg button{flex:1;min-height:40px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--mut);font-size:.82rem;font-weight:650}
.seg button[aria-pressed="true"]{color:var(--acc-ink);background:var(--acc);border-color:transparent}
.seg button.f[aria-pressed="true"]{background:var(--crit);color:var(--on-crit)}
.seg button.n[aria-pressed="true"]{background:var(--mut);color:var(--on-mut)}

/* --------------------------------------------------------------- messages */
.thread{display:block;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.thread .s{font-weight:650;font-size:.93rem;display:flex;gap:8px;align-items:center}
.thread .p{color:var(--mut);font-size:.8rem;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{background:var(--crit);color:var(--on-crit);font-size:.68rem;font-weight:800;
  border-radius:999px;padding:1px 7px;flex:none}
.msg{max-width:86%;padding:10px 12px;border-radius:13px;margin-bottom:9px;font-size:.9rem}
.msg.them{background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{background:var(--acc);color:var(--acc-ink);margin-left:auto;border-bottom-right-radius:4px}
.msg .who{font-size:.7rem;opacity:.75;font-weight:700;margin-bottom:2px}

/* ------------------------------------------------------------------- scan */
.stage{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/3;margin-bottom:10px}
.stage video{width:100%;height:100%;object-fit:cover;display:block}
.band{position:absolute;left:6%;right:6%;top:26%;height:48%;border:2px solid var(--acc);
  border-radius:10px;box-shadow:0 0 0 100vmax rgba(0,0,0,.4);pointer-events:none}
.line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .n{flex:1;min-width:0}
.line .n b{display:block;font-size:.9rem;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line .n span{display:block;color:var(--mut);font-size:.74rem}
.line input{width:88px;text-align:right;min-height:44px;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:650}
.line.done input{border-color:var(--acc)}
.line.blank input{border-color:var(--major)}

/* ------------------------------------------------------------------ chips */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{font-size:.73rem;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--mut);background:var(--card)}
.chip.on{color:var(--acc);border-color:var(--acc)}
.chip.warn{color:var(--major);border-color:var(--major)}

/* ------------------------------------------------------------------- misc */
.toast{position:fixed;left:12px;right:12px;bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom));
  background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  z-index:60;font-size:.88rem;box-shadow:0 10px 30px var(--shadow)}
.toast.bad{border-color:var(--crit)}
.empty{text-align:center;color:var(--mut);padding:34px 16px;font-size:.9rem}
.sheet-head{position:sticky;top:0;background:var(--bg);padding-bottom:8px;z-index:5}

/* ============================================================ v2 additions */

.top-row select{max-width:60%;min-height:38px;padding:6px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.navbtn{width:auto;margin:0;padding:0 14px;min-height:38px;font-size:1.3rem;line-height:1}

/* role chips on the sign-in screen */
.userrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--card2);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;margin-bottom:8px;min-height:52px}
.userrow b{display:block;font-size:.92rem}
.userrow span{display:block;color:var(--mut);font-size:.75rem}
.rolebadge{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;flex:none}
.rolebadge.store{background:var(--tint-info);color:var(--ink-info)}
.rolebadge.entry{background:var(--tint-good);color:var(--acc)}
.rolebadge.viewer{background:var(--tint-mid);color:var(--major)}

/* read-only checks, for the roles that may not decide */
.rule.locked .seg button{opacity:.45}
.state-pill{font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut)}
.state-pill.pass{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.state-pill.fail{background:var(--crit);color:var(--on-crit);border-color:transparent}
.state-pill.na{background:var(--mut);color:var(--on-mut);border-color:transparent}

/* review queue */
.rev img{width:100%;border-radius:10px;display:block;margin-bottom:9px;background:#000}
.rev .noimg{height:150px;border-radius:10px;background:var(--card2);display:flex;
  align-items:center;justify-content:center;color:var(--mut);font-size:.8rem;margin-bottom:9px;
  border:1px dashed var(--line)}

/* calendar */
/* minmax(0,1fr), not 1fr: a 40px-square cell makes each track 40px wide at
   its minimum, and seven of those plus gaps is wider than a 320px phone.
   The column must be allowed to shrink below its content. */
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
#caldow{margin-bottom:6px;grid-template-columns:repeat(7,minmax(0,1fr))}
#caldow span{text-align:center;font-size:.66rem;color:var(--mut);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.cell{aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--card2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:.78rem;font-weight:650;color:var(--ink);padding:0;min-height:40px}
.cell.blank{border:0;background:none}
.cell .s{font-size:.58rem;font-weight:700;opacity:.9}
.cell.good{background:var(--tint-good);border-color:var(--line-good);color:var(--acc)}
.cell.mid{background:var(--tint-mid);border-color:var(--line-mid);color:var(--major)}
.cell.bad{background:var(--tint-bad);border-color:var(--line-bad);color:var(--crit)}
.cell.none{color:var(--mut)}
.cell.today{outline:2px solid var(--acc);outline-offset:1px}
.callegend{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:.72rem;color:var(--mut)}
.callegend span{display:flex;align-items:center;gap:5px}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.sw.good{background:var(--line-good)}.sw.mid{background:var(--line-mid)}
.sw.bad{background:var(--line-bad)}.sw.none{background:var(--card2);border:1px solid var(--line)}

/* ------------------------------------------------------------------ chat
   A conversation should look like the one app everybody already knows how to
   use. Bubbles, a day divider, a composer pinned to the bottom, and a mic that
   records while held. */
.chatscreen{display:none}
.chatscreen.on{display:flex;flex-direction:column;height:100dvh}
.chatlog{flex:1;overflow-y:auto;padding:14px 12px 6px;display:flex;flex-direction:column;gap:6px}
.daydiv{align-self:center;font-size:.7rem;color:var(--mut);background:var(--card2);
  border:1px solid var(--line);border-radius:999px;padding:3px 12px;margin:8px 0}
.bub{max-width:84%;padding:8px 11px 6px;border-radius:14px;font-size:.92rem;position:relative}
.bub.them{background:var(--card2);border:1px solid var(--line);align-self:flex-start;
  border-bottom-left-radius:5px}
.bub.me{background:var(--bub-me);color:var(--bub-me-ink);align-self:flex-end;border-bottom-right-radius:5px}
.bub .who{font-size:.7rem;font-weight:700;color:var(--acc);margin-bottom:2px}
.bub.me .who{color:var(--bub-me-who)}
.bub .stamp{font-size:.63rem;color:var(--mut);text-align:right;margin-top:3px}
.bub.me .stamp{color:var(--bub-me-stamp)}
.bub img{max-width:100%;border-radius:9px;display:block;margin:2px 0 4px}
.filechip{display:flex;align-items:center;gap:8px;background:var(--inset);
  border-radius:9px;padding:8px 10px;margin:2px 0 4px}
.filechip svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.filechip b{font-size:.82rem;display:block;word-break:break-all}
.filechip span{font-size:.7rem;color:var(--mut)}
.voice{display:flex;align-items:center;gap:9px;margin:2px 0 4px}
.voice button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.16);
  color:inherit;display:flex;align-items:center;justify-content:center;flex:none}
.voice svg{width:16px;height:16px;stroke:currentColor;fill:currentColor}
.wave{flex:1;height:22px;display:flex;align-items:center;gap:2px}
.wave i{flex:1;background:currentColor;opacity:.55;border-radius:2px}
.voice .len{font-size:.72rem;opacity:.8;flex:none}

.composer{display:flex;align-items:flex-end;gap:7px;padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--card)}
.composer textarea{flex:1;resize:none;max-height:120px;min-height:44px;padding:11px 13px;
  border-radius:22px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:.95rem;line-height:1.35}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card2);display:flex;align-items:center;justify-content:center;flex:none;padding:0}
.iconbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
.iconbtn.send{background:var(--acc);border-color:transparent;color:var(--acc-ink)}
.iconbtn.send svg{fill:currentColor;stroke:none}
.iconbtn.mic.rec{background:var(--crit);border-color:transparent;color:#fff;transform:scale(1.08)}
.reccard{position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));
  background:var(--card2);border:1px solid var(--crit);border-radius:12px;
  padding:11px 13px;display:flex;align-items:center;gap:10px;z-index:50}
.recdot{width:10px;height:10px;border-radius:50%;background:var(--crit);flex:none;
  animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* full-screen photo viewer */
.lightbox{position:fixed;inset:0;z-index:80;background:#000;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain}
.lbclose{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(0,0,0,.6);color:#fff;font-size:1.1rem}
.lbbar{position:absolute;left:0;right:0;bottom:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.lbbar .btn{margin-top:10px}

/* Inline rejection reason, inside the evidence card. */
.rejbox { margin-top: 10px; }
.rejbox textarea { width: 100%; font: inherit; padding: 10px;
  border: 1px solid var(--line, #d5d8dd); border-radius: 10px; resize: vertical; }
.rejbox .btn { margin-top: 8px; }

/* This one line closes a whole family of bugs. `hidden` is only a default
 * style, and any rule that sets display: on the same element beats it — which
 * is how the tab bar stayed tappable while hidden, and how the recording card
 * sat on screen when nothing was recording. Both were found by looking at a
 * screenshot, not by reading the code. Make hidden mean hidden. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------ light theme
   Set by a toggle on the Today screen and remembered. With no stored choice
   the phone decides, via prefers-color-scheme. Only the tokens change. */
:root[data-theme="light"]{
  --bg:#f2f6fb; --card:#ffffff; --card2:#eaf1f8; --ink:#0d1b2a; --mut:#5a7186;
  --line:#d6e0ea; --acc:#0d8f5b; --acc-ink:#ffffff;
  --crit:#d92d20; --major:#b45309; --minor:#0369a1; --ok:#0d8f5b;
  --bar:rgba(242,246,251,.93);
  --on-crit:#ffffff; --on-mut:#ffffff;
  --tint-good:#dcfce7; --line-good:#6ee7b7;
  --tint-mid:#fef3c7;  --line-mid:#fcd34d;
  --tint-bad:#fee2e2;  --line-bad:#fca5a5;
  --tint-info:#e0f2fe; --ink-info:#075985;
  --bub-me:#c9f2e0; --bub-me-ink:#08301f; --bub-me-who:#0f766e;
  --bub-me-stamp:rgba(8,48,31,.6);
  --inset:rgba(0,0,0,.06); --shadow:rgba(15,30,50,.18);
}
/* The camera stage and the lightbox stay black in both themes: a photograph
   is judged against black, not against the page. */

/* ------------------------------------------------------------ checks table
   One line per rule, columns aligned, so eleven rules read as a list rather
   than as four screens of cards. */
.sumcard { padding: 12px 14px; }
.sumcard .bar { display:flex; height:10px; border-radius:999px; overflow:hidden;
  background:var(--card2); border:1px solid var(--line) }
/* flex:none, or a percentage width is treated as a starting size and
   shrunk away to nothing — the bar renders empty and the summary lies. */
.sumcard .bar i { display:block; height:100%; flex:none }
.sumcard .bar i.pass { background:var(--acc) }
.sumcard .bar i.fail { background:var(--crit) }
.sumcard .bar i.na   { background:var(--mut) }
.tally { display:flex; gap:6px; margin-top:11px }
.tally .t { flex:1; text-align:center; background:var(--card2); border:1px solid var(--line);
  border-radius:10px; padding:7px 2px }
.tally .t b { display:block; font-size:1.05rem; font-weight:750; line-height:1.2 }
.tally .t span { display:block; font-size:.64rem; color:var(--mut); font-weight:650;
  text-transform:uppercase; letter-spacing:.04em }
.tally .t.pass b { color:var(--acc) }
.tally .t.fail b { color:var(--crit) }
.tally .t.todo b { color:var(--major) }

.filters { display:flex; gap:7px; overflow-x:auto; margin-bottom:12px;
  padding-bottom:2px; -webkit-overflow-scrolling:touch }
.fchip { flex:none; min-height:40px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--mut);
  font-size:.82rem; font-weight:650 }
.fchip.on { background:var(--acc); color:var(--acc-ink); border-color:transparent }

.tablecard { padding:0; overflow:hidden }
.chead { display:flex; justify-content:space-between; padding:9px 14px;
  background:var(--card2); border-bottom:1px solid var(--line);
  font-size:.66rem; font-weight:750; color:var(--mut);
  text-transform:uppercase; letter-spacing:.06em }
/* The row itself is the table. A real <table> cannot hold a control that
   spans a row without a second <tr>, and every selector then depends on the
   two staying in step. */
.rule { display:flex; align-items:center; gap:10px; padding:9px 12px 9px 14px;
  border-bottom:1px solid var(--line); border-left:3px solid transparent }
.rule:last-child { border-bottom:0 }
.rule.fail { border-left-color:var(--crit); background:var(--tint-bad) }
.rule.pass { border-left-color:var(--line-good) }
.rule.todo { border-left-color:var(--major) }
.rname { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.rname .n { font-size:.88rem; font-weight:620; line-height:1.3 }
.rname .sev { font-size:.6rem }
.seg.tri { flex:none; gap:4px }
.seg.tri button { flex:none; width:42px; min-height:42px; font-size:1rem; padding:0 }

/* ------------------------------------------------------- header controls
   A single icon button, the way the marketing site does it. The three-way
   control lives in Settings; the header is for the one thing people actually
   do, which is flip it. */
.hbtn { width:38px; height:38px; flex:none; border-radius:11px;
  border:1px solid var(--line); background:var(--card2); color:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:0 }
.hbtn svg { width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round }
.avatar { border-radius:50%; background:var(--acc); color:var(--acc-ink);
  font-size:.78rem; font-weight:750; letter-spacing:.02em; border:0 }
.avatar.big { width:52px; height:52px; font-size:1.05rem; display:flex;
  align-items:center; justify-content:center; flex:none }
.idrow { display:flex; align-items:center; gap:12px }

/* --------------------------------------------------------------- evidence */
.proof { display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--line) }
.proof:last-child { border-bottom:0 }
.proof .pl { flex:1; min-width:0 }
.proof .pt { display:flex; align-items:center; gap:7px; font-weight:620;
  font-size:.9rem; flex-wrap:wrap }
.proof .req { font-size:.6rem; font-weight:750; text-transform:uppercase;
  letter-spacing:.06em; color:var(--major) }
.proof.accepted .pt span:first-child { color:var(--acc) }
.proof.rejected .pt span:first-child { color:var(--crit) }
.btn.mini { width:auto; margin:0; padding:0 16px; min-height:40px; flex:none }
.btn.danger { background:var(--crit); color:var(--on-crit); border-color:transparent }
.delbox { margin-top:10px; padding:10px; border:1px solid var(--crit);
  border-radius:10px; background:var(--tint-bad) }
.delbox p { margin:0 0 8px }

/* --------------------------------------------------------- chat composer
   WhatsApp's arrangement: the paperclip lives INSIDE the text pill, and the
   round button outside it is mic-or-send. The send arrow points the way the
   message travels. */
.composer .pill { flex:1; display:flex; align-items:flex-end; gap:4px;
  background:var(--bg); border:1px solid var(--line); border-radius:22px;
  padding-right:4px; min-width:0 }
.composer .pill textarea { flex:1; border:0; background:none; border-radius:22px }
.pillbtn { width:40px; height:44px; flex:none; border:0; background:none;
  color:var(--mut); display:flex; align-items:center; justify-content:center; padding:0 }
.pillbtn svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.9 }

/* The action detail. The severity gets its own line: inline against the title
   it read as "MAJORDamage", because adjacent spans have no space between them. */
.tasktitle { font-size:1.02rem; font-weight:680; margin:4px 0 6px; line-height:1.3 }
#taskbody .sev { display:inline-block }

/* Nothing leaves the phone until this is pressed. */
.sendbar { display:flex; align-items:center; gap:12px; padding:12px 14px;
  margin-bottom:12px; border-radius:var(--r); background:var(--tint-mid);
  border:1px solid var(--line-mid) }
.sendbar > div { flex:1; min-width:0 }
.proof.draft .pt span:first-child { color:var(--major) }

/* Voice notes: the button that turns one into words. */
.trbtn { flex:none; border:1px solid currentColor; background:none; color:inherit;
  opacity:.75; border-radius:999px; font-size:.66rem; font-weight:700;
  padding:3px 9px; margin-left:6px }
.transcript { font-size:.86rem; opacity:.85; margin-top:5px; font-style:italic }