/* CAR-MNH · LR capture — built for a mid-range Android phone held in one hand
   in a labour room. Large targets, high contrast, no hover-dependent anything. */
:root{
  --navy:#12304F; --navy-2:#1B4570; --ink:#101828; --ink-2:#5A6B7B;
  --line:#E1E6EB; --bg:#F5F7F9; --card:#FFFFFF;
  --good:#0E7C5A; --good-bg:#E3F5EE;
  --amber:#8A5A00; --amber-bg:#FFF4DA;
  --bad:#9B1C1C; --bad-bg:#FDECEC; --bad-line:#F1A9A9;
  --tap:52px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari",sans-serif;
  font-size:16px; line-height:1.45; overscroll-behavior-y:none;}

/* ---------- chrome ---------- */
.netbar{
  position:sticky; top:0; z-index:40; padding:7px 14px; font-size:13px; font-weight:700;
  text-align:center; color:#fff; background:var(--amber);
}
.netbar.offline{background:#6B4A00;}
.netbar.syncing{background:var(--navy-2);}
.appbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:11px 14px calc(11px + env(safe-area-inset-top,0)); background:var(--navy); color:#fff;
}
.netbar:not([hidden]) + .appbar{top:31px;}
.appbar .title{font-size:15px; font-weight:800; letter-spacing:.2px;}
.appbar .sub{font-size:11px; opacity:.75; margin-top:1px;}
.appbar-r{display:flex; align-items:center; gap:10px;}
.who{font-size:11px; text-align:right; opacity:.9; max-width:110px;}
.iconbtn{
  min-width:52px; height:36px; border-radius:9px; border:0; background:rgba(255,255,255,.16);
  color:#fff; font-size:13px; font-weight:800; cursor:pointer;
}
.iconbtn.cancelreg{ background:rgba(255,255,255,.22); }
.iconbtn.cancelreg:hover{ background:rgba(255,255,255,.32); }
main{padding:16px 14px calc(28px + env(safe-area-inset-bottom,0)); max-width:560px; margin:0 auto;}

/* ---------- type ---------- */
h1.screen-title{font-size:20px; font-weight:800; margin:2px 0 6px;}
p.hint{font-size:14px; color:var(--ink-2); margin:0 0 16px;}
label{display:block; font-size:13px; font-weight:700; color:var(--ink-2);
  margin:16px 0 6px; text-transform:uppercase; letter-spacing:.4px;}
input[type=text],input[type=tel],input[type=search]{
  width:100%; height:var(--tap); border:1.5px solid var(--line); border-radius:11px;
  padding:0 14px; font-size:17px; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus{outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(27,69,112,.12);}

/* SELECTS MUST MATCH THE INPUTS.
 *
 * They had no styling at all, so they fell back to the browser default — which
 * on a phone is a control a few millimetres tall, next to text inputs sized for
 * a thumb. The address cascade is nothing but selects, so the one screen built
 * for a ward was the one screen nobody could use.
 *
 * `appearance:none` is needed to control height on iOS, and it also removes the
 * native arrow, so the arrow is drawn back as a background SVG — inline, since
 * this app fetches nothing it does not have to. 17px, like the inputs: under
 * 16px, iOS zooms the page on focus and the operator loses her place. */
select{
  width:100%; height:var(--tap); border:1.5px solid var(--line); border-radius:11px;
  padding:0 42px 0 14px; font-size:17px; font-family:inherit;
  background:#fff; color:var(--ink); cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
select:focus{outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(27,69,112,.12);}
/* An unchosen select should not look the same as a chosen one. */
select:invalid, select.empty{color:var(--ink-2);}

/* ---------- buttons ---------- */
.btn{
  display:block; width:100%; min-height:var(--tap); margin-top:12px; border:0; border-radius:12px;
  font-size:16px; font-weight:800; font-family:inherit; cursor:pointer; padding:12px 16px;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:disabled{background:#9BA8B4;}
.btn-ghost{background:#fff; color:var(--navy); border:1.5px solid var(--line);}
.btn-danger{background:var(--bad); color:#fff;}
.btn-link{background:none; color:var(--navy); text-decoration:underline; font-weight:700; min-height:44px;}

/* ---------- cards, banners ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:14px;}
.banner{border-radius:11px; padding:11px 13px; font-size:14px; margin-top:14px; line-height:1.45;}
.banner.good{background:var(--good-bg); color:#0B4D3F; font-weight:700;}
.banner.warn{background:var(--amber-bg); color:#7A4C07; font-weight:700;}
.banner.info{background:#EAF1F8; color:#1B4570;}
.banner.bad{background:var(--bad-bg); color:var(--bad); border:1.5px solid var(--bad-line); font-weight:700;}
.banner.bad span, .banner.warn span, .banner.good span, .banner.info span{
  display:block; font-weight:500; margin-top:6px;}

table.kv{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:12px;}
table.kv td{padding:9px 2px; border-bottom:1px solid var(--line); vertical-align:top;}
table.kv td:first-child{color:var(--ink-2); width:44%;}
table.kv td:last-child{font-weight:700; text-align:right;}
table.kv tr.bad td:last-child{color:var(--bad);}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.4px;}

.pill{display:inline-block; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.4px;}
.pill.none{background:#EEF1F4; color:var(--ink-2);}
.pill.queued{background:var(--amber-bg); color:var(--amber);}
.pill.captured{background:#EAF1F8; color:var(--navy-2);}
.pill.filed{background:var(--good-bg); color:var(--good);}

/* ---------- result list ---------- */
.rowbtn{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  margin-top:10px; text-align:left; font-family:inherit; font-size:15px; cursor:pointer;
}
.rowbtn b{display:block; font-size:16px;}
.rowbtn small{display:block; color:var(--ink-2); font-size:12.5px; margin-top:2px;}

/* ---------- steps ---------- */
.steps{display:flex; gap:6px; margin:0 0 14px;}
.steps i{flex:1; height:4px; border-radius:2px; background:var(--line);}
.steps i.active{background:var(--navy);}
.steps i.done{background:var(--good);}

/* ---------- camera ---------- */
.viewport{
  position:relative; width:100%; aspect-ratio:2/3; background:#0D1622; border-radius:14px;
  overflow:hidden; margin-top:14px;
}
.viewport video, .viewport canvas.preview{width:100%; height:100%; object-fit:cover; display:block;}
.guides{position:absolute; inset:0; pointer-events:none;}
.guides .corner{position:absolute; width:34px; height:34px; border:3px solid rgba(255,255,255,.85);}
.guides.locked .corner{border-color:#3DDC97;}
.guides .lab{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px; color:#fff;
  background:rgba(0,0,0,.55); padding:6px 12px; border-radius:99px; font-size:12.5px; font-weight:700;
}
.shutter{
  width:100%; min-height:58px; margin-top:12px; border:0; border-radius:14px;
  background:var(--navy); color:#fff; font-size:17px; font-weight:800; cursor:pointer;
}
.shutter:disabled{background:#9BA8B4;}

/* ---------- verify ---------- */
.vsec{margin-top:18px;}
.vsec h4{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-2);
  margin:0 0 6px; padding-bottom:5px; border-bottom:1.5px solid var(--line);}
.vrow{display:grid; grid-template-columns:52px 1fr 40%; gap:8px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;}
.vrow .code{font-size:11px; color:var(--ink-2); font-family:ui-monospace,monospace;}
.vrow .val{font-weight:700; text-align:right;}
.vrow.low{background:var(--amber-bg); margin:0 -8px; padding:9px 8px; border-radius:8px;}
.vrow.low input{width:100%; height:40px; border:1.5px solid var(--amber); border-radius:8px;
  padding:0 9px; font-size:15px; font-family:inherit; background:#fff;}

/* ---------- misc ---------- */
.rejectmark{width:56px; height:56px; border-radius:50%; background:var(--bad-bg); color:var(--bad);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; margin:8px auto 12px;}
.okmark{width:56px; height:56px; border-radius:50%; background:var(--good-bg); color:var(--good);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; margin:8px auto 12px;}
.center{text-align:center;}
.foot{font-size:12.5px; color:var(--ink-2); margin-top:18px; line-height:1.5;}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
  background:#101828; color:#fff; padding:11px 16px; border-radius:11px; font-size:14px;
  font-weight:700; max-width:88vw; text-align:center; box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.qitem{display:flex; justify-content:space-between; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14px;}
.qitem small{display:block; color:var(--ink-2); font-size:12px;}

/* field-source notes on the verify screen */
.srcnote{display:block; font-size:11px; margin-top:1px; line-height:1.3;}
.srcnote.record{color:var(--navy-2);}
.srcnote.derived{color:#0B6E4F;font-weight:600;}
.srcnote.list{color:#7A5B00;}
.srcnote.human{color:var(--amber);}
.vrow.fromrec{background:#F3F7FB; margin:0 -8px; padding:9px 8px; border-radius:8px;}
.vrow input{width:100%; height:40px; border:1.5px solid var(--line); border-radius:8px;
  padding:0 9px; font-size:15px; font-family:inherit; background:#fff;}
.vrow.low input{border-color:var(--amber);}

/* ---------- collapsible help ---------- */
details.help{background:#fff; border:1px solid var(--line); border-radius:12px;
  margin-top:14px; padding:0 14px;}
details.help summary{cursor:pointer; font-weight:800; font-size:14.5px; padding:13px 0;
  color:var(--navy); list-style:none;}
details.help summary::-webkit-details-marker{display:none;}
details.help summary::after{content:' ▾'; color:var(--ink-2);}
details.help[open] summary::after{content:' ▴';}
details.help > div{padding-bottom:12px; font-size:13.5px; color:var(--ink-2); line-height:1.55;}
details.help ul{padding-left:18px; margin:8px 0;}
details.help li{margin-bottom:6px;}
details.help p{margin:8px 0;}

/* ---------- verify: fill what is known, colour what is not ---------- */
.fillbar{background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-top:14px;}
.fillbar-num{font-size:15px; color:var(--ink-2);}
.fillbar-num b{font-size:22px; color:var(--ink); font-weight:800;}
.fillbar-track{height:8px; border-radius:4px; background:var(--amber-bg); overflow:hidden; margin:9px 0 8px;}
.fillbar-track i{display:block; height:100%; background:var(--good); border-radius:4px;}
.fillbar-gap{font-size:13.5px; color:var(--ink-2);}
.fillbar-gap b{color:var(--amber);}
.gapchip{background:var(--amber-bg); border:1.5px solid var(--amber); color:var(--amber);
  border-radius:4px; padding:0 5px; font-weight:800;}

.vrow2{padding:11px 0; border-bottom:1px solid var(--line);}
.vrow2.needy{background:#FFFBF2; margin:0 -10px; padding:11px 10px; border-radius:9px;
  border-bottom:1px solid #F0E2C4;}
.vhead{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.vhead .code{font-size:11px; color:var(--ink-2); font-family:ui-monospace,monospace; flex:none;}
.vhead .vlab{font-size:14.5px; font-weight:600;}
.vbody{margin-top:7px;}

/* comb grid — mirrors the printed boxes, so box 7 on screen is box 7 on paper */
.comb{display:flex; gap:3px; flex-wrap:wrap;}
.comb i, .comb input.cell{
  width:30px; height:38px; border:1.5px solid var(--line); border-radius:6px;
  text-align:center; font-size:18px; font-weight:700; font-family:ui-monospace,Menlo,monospace;
  background:#fff; color:var(--ink); padding:0; font-style:normal;
  display:flex; align-items:center; justify-content:center;
}
.comb input.cell{display:block; line-height:36px;}
.comb i.fx{background:#F4F6F8; color:var(--ink-2); border-style:dashed;}
/* the only colour on the screen: a box the reader could not call */
.comb input.cell.gap{background:var(--amber-bg); border-color:var(--amber); border-width:2px;}
.comb input.cell.gap:focus{background:#fff; border-color:var(--navy-2);
  box-shadow:0 0 0 3px rgba(27,69,112,.14);}
.comb input.cell:focus{outline:none;}

input.free{width:100%; height:42px; border:1.5px solid var(--line); border-radius:9px;
  padding:0 11px; font-size:15.5px; font-family:inherit; background:#fff;}
input.free.gap{background:var(--amber-bg); border-color:var(--amber); border-width:2px;}
input.free:focus{outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(27,69,112,.14);}


/* Reading a sheet takes about a second of solid arithmetic. A progress bar is
   the difference between "working" and "crashed" to someone holding the phone. */
.progress{height:8px;border-radius:99px;background:#e6e8ec;overflow:hidden;margin:18px 0 14px}
.progress i{display:block;height:100%;background:#1a7f5a;transition:width .18s ease}


/* A box the reader could NOT identify is not the same as a box the sheet leaves
   empty. The first is a question and blocks filing; the second is an answer. */
input.cell.mustfix, input.free.mustfix{border-color:#C0392B;background:#FDF2F0;}
input.cell.mustfix:focus, input.free.mustfix:focus{outline:2px solid #C0392B;}
input.cell.blank{background:#fff;border-color:#d8dce2;}
.btn-blocked{background:#8b96a5;}


/* The standalone build has no live viewport — it asks the phone's own camera app
   for a picture. This is the thing you tap to do that. */
.shotcard{display:block;border:2px dashed #9aa3ae;border-radius:14px;padding:26px 18px;
  text-align:center;cursor:pointer;background:#f7f9fb;margin:6px 0 12px}
.shotcard:active{background:#eef2f6}
.shotcard-i{font-size:40px;line-height:1}
.shotcard-t{font-weight:700;font-size:17px;margin-top:8px}
.shotcard-s{font-size:13px;color:#5a6472;margin-top:6px;line-height:1.45}

/* Chips for the registration flow: mode of admission, booking status, and the
   same-address question. Big targets — these are pressed with one thumb, in a
   ward, often while holding something else. */
.choicerow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
/* Three options with sentence-length labels wrap into a ragged 1 + 2, which
   reads as a mistake. Stack them. Two short options stay side by side. */
.choicerow.stack .chip { flex: 1 1 100%; min-width: 0; }
.choicerow .chip {
  flex: 1 1 auto; min-width: 44%; padding: 13px 12px; font: inherit; font-weight: 600;
  border: 1.5px solid var(--line, #c9ced6); border-radius: 11px;
  background: transparent; color: inherit; cursor: pointer; text-align: center;
}
.choicerow .chip.sel {
  border-color: var(--accent, #0a58ca); background: var(--accent, #0a58ca); color: #fff;
}
label.checkline { display: flex; align-items: center; gap: 9px; font-weight: 600;
  margin: 10px 0 4px; }
label.checkline input { width: 20px; height: 20px; }

/* ---------- verify: confirm by exception ----------
   Every field is on this screen, so the default state has to be silent. A row
   that is right should cost nothing to skip: no colour, no chrome, no target.
   Only the two states that need her — "could not read" and "not sure" — earn a
   tint, and only "Fix it" is tappable. */
.vguide{background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 13px; font-size:13.5px; color:var(--ink-2); margin:0 0 14px;}
.vguide b{color:var(--ink);}
.vguide .vwarn{display:block; margin-top:7px; color:var(--bad); font-weight:700;}

.vfield{padding:11px 0 12px; border-bottom:1px solid var(--line); position:relative;}
.vfield.st-check{background:var(--amber-bg); margin:0 -10px; padding:11px 10px 12px;
  border-radius:9px; border-bottom-color:transparent;}
.vfield.st-criticalBlank{background:var(--bad-bg); margin:0 -10px; padding:11px 10px 12px;
  border-left:4px solid var(--bad); border-radius:0 4px 4px 0;}
.vfield.st-criticalBlank .vst{color:var(--bad);}
.vfield.st-unread{background:var(--bad-bg); margin:0 -10px; padding:11px 10px 12px;
  border-radius:9px; border:1px solid var(--bad-line);}
.vfield.edited{background:var(--good-bg); margin:0 -10px; padding:11px 10px 12px;
  border-radius:9px; border-bottom-color:transparent;}
.vfield .vhead{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.vfield .code{font-size:11px; font-weight:800; color:#fff; background:var(--navy-2);
  border-radius:4px; padding:1px 5px; font-variant-numeric:tabular-nums;}
.vfield .vlab{font-size:13.5px; color:var(--ink-2); flex:1 1 55%; min-width:55%;
  padding-right:6px;}
.vfield .vst{font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; color:var(--amber); flex:0 1 auto;}
.vfield.st-unread .vst{color:var(--bad);}
.vfield .vst.fixedby{color:var(--good);}
.vfield .vbody{display:flex; align-items:center; gap:12px; margin-top:7px; flex-wrap:wrap;}
/* The ink itself, at the size it was printed. This is the thing she is checking
   against; the transcription beside it is the claim. */
.vfield .vink{display:flex; align-items:center; gap:1px; background:#fff;
  border:1px solid var(--line); border-radius:6px; padding:3px 4px;
  /* min-width:0 or a long comb pushes the row wider than the phone and the
     whole screen scrolls sideways */
  flex:1 1 auto; min-width:0; max-width:100%; overflow-x:auto;}
.vfield img.ink{display:block; image-rendering:auto;}
.vfield .vval{font-size:21px; font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:.5px;}
.vfield .vnote{font-size:12.5px; color:var(--ink-2); margin-top:5px;}

.fixit{margin-top:9px; min-height:38px; padding:0 15px; border-radius:9px;
  border:1px solid var(--line); background:#fff; color:var(--navy-2);
  font-size:13.5px; font-weight:800; cursor:pointer;}
.fixit.urgent{border-color:var(--bad); color:var(--bad); background:#fff;}

.veditor{margin-top:11px; min-width:0; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:11px;}
.veditor .edhint{font-size:12.5px; color:var(--ink-2); margin-bottom:9px;}

/* one target per character: the ink on top, what the reader called underneath */
.boxrow{display:flex; align-items:flex-end; gap:4px; flex-wrap:wrap; min-width:0;}
.boxrow .boxsep{font-size:19px; font-weight:800; color:var(--ink-2); padding:0 1px 14px;}
.box{display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:4px 3px 2px; border:2px solid var(--line); border-radius:8px;
  background:#fff; cursor:pointer; min-width:34px;}
.box i{font-style:normal; font-size:17px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;}
.box.on{border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(27,69,112,.14);}
.box.typed{border-color:var(--good); background:var(--good-bg);}
.box.typed i{color:var(--good);}
.box.urgent{border-color:var(--bad); background:#fff;}
.box.urgent i{color:var(--bad);}

.pad{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
.pad .key{min-width:var(--tap); height:var(--tap); border-radius:10px;
  border:1px solid var(--line); background:#fff; font-size:19px; font-weight:800;
  cursor:pointer;}
.pad .key.wide{min-width:96px; font-size:14px; color:var(--ink-2);}
.pad .key:active{background:var(--bg);}

.opts{display:flex; flex-direction:column; gap:7px;}
.opt{display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  min-height:var(--tap); padding:6px 10px; border:2px solid var(--line);
  border-radius:10px; background:#fff; font-size:15px; cursor:pointer;}
.opt.on{border-color:var(--good); background:var(--good-bg); font-weight:800;}

.veditor input.free{width:100%; min-height:var(--tap); font-size:16px;
  padding:0 11px; border:2px solid var(--line); border-radius:10px;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
.chip{min-height:38px; padding:0 12px; border-radius:19px; border:1px solid var(--line);
  background:var(--bg); font-size:13.5px; cursor:pointer;}

/* ---------- village lookup ----------
   These rules were sitting AFTER </html> in index.html, which a browser
   renders as text: a paragraph of CSS was printed at the bottom of every
   screen in the app. Moved here. */
/* the village lookup: a list of what she typed, not a cascade */
    .hits { display:flex; flex-direction:column; gap:2px; margin:4px 0 0; }
    .hits .hit { text-align:left; background:#fff; border:1px solid var(--line,#d5d8dd);
                 border-radius:8px; padding:9px 11px; font-size:15px; cursor:pointer; }
    .hits .hit:active { background:#eef2f7; }
    .hits .hit span { display:block; font-size:12.5px; color:#666; margin-top:2px; }
    .hits .none { font-size:13px; color:#666; padding:7px 2px; }
    .chosen { margin-top:6px; font-size:14px; }
    .chosen span { color:#666; }

/* Picklist rows — used by the ASHA and referral pickers. Each row is a
   full-width button with a bold main line and a small subline; visually
   a step down from the primary buttons. */
.picklist{display:block;width:100%;text-align:left;padding:8px 12px;margin:4px 0;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);cursor:pointer;font:inherit;}
.picklist:active{background:var(--teal-light);}
.picklist b{display:block;font-weight:700;color:var(--navy-ink);}
.picklist span{display:block;font-size:12px;color:var(--ink-2);}
.vnote{display:block;margin-top:8px;font-size:13px;color:var(--ink-2);}
.vnote a{color:var(--teal,#0e6e5b);}

/* Date-of-birth picker: three selects (Day / Month / Year) sitting under
   the masked text input. Year first in the list because that is what a
   30+ year-old birthdate needs and the native calendar cannot jump. */
.dob-pick{display:flex;align-items:center;gap:8px;margin:6px 0 4px;flex-wrap:wrap;}
.dob-pick .hint{margin:0;font-size:12.5px;color:var(--ink-2);}
.dob-pick select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:var(--ink);font:inherit;min-width:70px;}

/* Cross-field derivation hints (GA from LMP, EDD from LMP). Sit under the
   read value, above the Fix-it button. Visually distinct from the reader's
   own notes: teal border on the left, small type. */
.vhint{margin:6px 0 4px;padding:6px 10px;border-left:3px solid var(--teal,#0e6e5b);
  background:var(--teal-light,#e4f3ef);font-size:12.5px;color:var(--ink-2);border-radius:0 6px 6px 0;}

/* File-anyway button in demo mode: not blocked, but marked amber to say
   "you are proceeding past a real safeguard." */
.btn-warn{background:var(--amber-bg,#fcf3e3);color:var(--amber,#b4740e);
  border:1px solid var(--amber,#b4740e);}
.btn-warn:active{background:#f7e5b8;}