/* FaceSheet review screen, laid out and coloured as the FaceSheetExtractor's patient record (header, upload card, patient
   strip, patient switcher, Patient / Insurance / Auth / Billing tabs, two-column field cards, Saved Records). Every colour is a
   token; the dark block redefines the same names and nothing else. The only stylesheet of the page ("default-src 'self'": no
   inline style, no web font fetched from elsewhere). */
:root{
  --primary:#0f6496; --primary-600:#0b4d74; --primary-50:#e9f2f8; --accent:#51afd4;
  --ink:#2a2a2a; --label:#404040; --muted:#7b858c; --border:#bdc2c5; --border-soft:#d0d0d0;
  --bg:#f0f0f0; --card:#ffffff; --danger:#d80000; --danger-2:#c0392b; --focus:rgba(15,100,150,.18);
  --header-bg:#0f6496; --on-primary:#ffffff; --brand-sub:#9bbdd2;
  --surface:#ffffff; --surface-2:#f7fafd; --surface-3:#eef4fb;
  --colon:#94a3b8; --placeholder:#9aa7b8; --disabled-bg:#f1f5f9; --disabled-ink:#8a97a8; --primary-border:#cbe1f2;
  --shadow-1:0 1px 2px rgba(16,24,40,.05); --shadow-2:0 18px 48px rgba(9,30,50,.35); --overlay:rgba(9,30,50,.45);
  --danger-bg:#fdeaea; --ok-bg:#e6f6ec; --ok-ink:#177245; --ok-border:#bfe5cd;
  --warn-bg:#fdf3dd; --warn-ink:#8a5d06; --warn-border:#f0dcab;
  --dot-h:#1a7f45; --dot-m:#c98a12; --dot-l:#c0392b; --sel-bg:#eef4fb;
  --arrow:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  color-scheme:light;
}
html[data-theme="dark"]{
  --primary:#4aa6d6; --primary-600:#6ec0e6; --primary-50:#17303e; --accent:#51afd4;
  --ink:#e7ecf1; --label:#c3ccd4; --muted:#8c98a4; --border:#3a444e; --border-soft:#2b343d;
  --bg:#11161b; --card:#1a2026; --danger:#ff6b6b; --danger-2:#e8705f; --focus:rgba(74,166,214,.25);
  --header-bg:#0c2b3f; --on-primary:#ffffff; --brand-sub:#8fb6cc;
  --surface:#1a2026; --surface-2:#212932; --surface-3:#1d2a35;
  --colon:#63707c; --placeholder:#6d7883; --disabled-bg:#232b33; --disabled-ink:#6d7883; --primary-border:#2c4d63;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 18px 48px rgba(0,0,0,.55); --overlay:rgba(3,10,16,.62);
  --danger-bg:#3a2325; --ok-bg:#16301f; --ok-ink:#7fd6a0; --ok-border:#27502f;
  --warn-bg:#352a12; --warn-ink:#e9c069; --warn-border:#54421a;
  --dot-h:#2e9e5b; --dot-m:#d9a12a; --dot-l:#e05c4a; --sel-bg:#1d2a35;
  --arrow:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a8b3bf' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.45}
input,select,button,textarea{font:inherit}

/* ---------- App header ---------- */
.app-header{background:var(--header-bg);border-bottom:3px solid var(--accent)}
.header-inner{max-width:none;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 24px;position:relative}
.logo{width:38px;height:38px;border-radius:9px;flex:none;background:linear-gradient(135deg,#1275ab,#51afd4);
  display:flex;align-items:center;justify-content:center}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--on-primary)}
.brand-sub{font-size:11.5px;color:var(--brand-sub);margin-top:1px}
/* the app's name, centred on the bar (below 1000 px it gets a row of its own under the bar's other items) */
.app-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.app-title-name{font-size:19px;font-weight:800;letter-spacing:1.6px;color:var(--on-primary)}
.app-title-sub{font-size:11px;color:var(--brand-sub);margin-top:2px;line-height:1.35}
.brand-line{display:block}
.app-title-sub b{font-weight:700;color:var(--on-primary)}
@media (max-width:1000px){
  .header-inner{flex-wrap:wrap}
  .app-title{position:static;transform:none;order:10;flex-basis:100%;white-space:normal}
}
.header-right{margin-left:auto;font-size:12px;color:var(--brand-sub);text-align:right}
.theme-toggle{appearance:none;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:7px;margin-left:16px;
  height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.30);
  font-size:12px;font-weight:600;letter-spacing:.2px}
.theme-toggle + .theme-toggle{margin-left:6px}
.theme-toggle:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.theme-toggle svg{width:15px;height:15px;flex:none}
.theme-sun{display:none}
html[data-theme="dark"] .theme-moon{display:none}
html[data-theme="dark"] .theme-sun{display:inline}

/* ---------- Log in ---------- */
.login-wrap{max-width:460px;margin:60px auto;padding:0 24px}
.login-card .f-row{grid-template-columns:110px 8px minmax(0,1fr)}
.login-actions{display:flex;justify-content:flex-end;margin-top:10px}
.bad-text{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:1em}

/* ---------- Upload ---------- */
.upload-wrap{max-width:none;margin:16px auto 0;padding:0 24px}
.upload-zone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:2px dashed var(--border);border-radius:10px;
  background:var(--surface);padding:16px 20px;transition:border-color .15s ease,background .15s ease}
.upload-zone.drag{border-color:var(--primary);background:var(--primary-50)}
.upload-icon{width:42px;height:42px;border-radius:10px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;flex:none}
.upload-icon svg{width:22px;height:22px;fill:var(--primary)}
.upload-text{min-width:0;flex:1 1 320px}
.upload-text b{font-size:14px}
.upload-text .note{margin-top:2px}
.upload-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.upload-status{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--label)}
.upload-status .bad{color:var(--danger)}
.upload-status .btn{height:28px;padding:0 12px;font-size:12px}
.mode-row{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:8px}
.mode-cap{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.in.level-select{width:auto;min-width:76px;height:28px}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--primary-50);border-top-color:var(--primary);
  animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spinner{animation:none} }

/* ---------- Patient strip ---------- */
.patient-strip{background:var(--primary-50);border-bottom:1px solid var(--border-soft);margin-top:16px}
/* one row of the same height for every patient: long text is cut with "…", review pills that do not fit are counted (fitStrip) */
.strip-inner{max-width:none;margin:0 auto;display:flex;align-items:center;gap:14px;padding:0 24px;height:60px;flex-wrap:nowrap}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);flex:none;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:.5px}
.strip-who{flex:1 1 auto;min-width:120px}
.strip-name{font-size:15px;font-weight:700;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-meta{font-size:12px;line-height:16px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conf-strip{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.conf-item{display:flex;align-items:baseline;gap:6px}
.conf-pct{font-size:19px;font-weight:700;line-height:1;letter-spacing:-.4px}
.conf-pct-h{color:var(--dot-h)} .conf-pct-m{color:var(--dot-m)} .conf-pct-l{color:var(--dot-l)}
.conf-pct-quiet{color:var(--muted);font-weight:600}
.conf-cap{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.conf-rule{width:1px;align-self:stretch;background:var(--border-soft)}
.pills{display:flex;gap:6px;flex:0 1 auto;min-width:0;overflow:hidden}
.pills:empty{display:none}
.pills-clipped{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.pill-more{flex:none;cursor:pointer;font:inherit;font-size:11px;font-weight:700;line-height:inherit}
.pill-more:hover,.pill-more[aria-expanded="true"]{background:var(--primary-50);border-color:var(--primary)}
.pill-more:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.pills [data-tag]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}   /* inside the pill: the clipped row cuts no ring */
.pills [data-tag]{cursor:help}
/* a review tag's meaning (hover or focus) and the list of every tag ("+N more"): drawn above the page, never clipped by the strip,
   and below every dialog (90 and up) */
.tag-tip{position:fixed;z-index:85;max-width:340px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-2);padding:10px 12px;font-size:12.5px;line-height:1.45;pointer-events:none}
.tag-tip .tip-name{display:block;font-weight:700;margin-bottom:3px}
.tag-tip .tip-do,.tag-list .tl-do{color:var(--label);margin-top:5px}
.tag-tip .tip-chosen{margin-top:5px;font-weight:600}
.tag-list{position:fixed;z-index:85;width:min(460px,calc(100vw - 32px));max-height:60vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-2);padding:4px 0}
.tag-list .tl-item{padding:10px 14px;border-bottom:1px solid var(--border-soft);font-size:12.5px;line-height:1.45;color:var(--ink)}
.tag-list .tl-item:last-child{border-bottom:0}
.tag-list .tl-item > span:first-child{display:inline-block;margin-bottom:5px}
.conf-strip[hidden] + .pills{margin-left:auto}
.pill{background:var(--ok-bg);color:var(--ok-ink);font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;
  border:1px solid var(--ok-border);white-space:nowrap;flex:none}
.conf-strip[hidden] ~ .pill{margin-left:auto}
.pill-warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-border);font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill-info{background:var(--surface);color:var(--primary);border:1px solid var(--primary-border);font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:999px;white-space:nowrap}

/* ---------- Patient switcher (documents with several patients) ---------- */
.patientbar{background:var(--surface-3);border-bottom:1px solid var(--border)}
.patientbar-inner{max-width:none;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex:none}
.pb-select{flex:1;min-width:0;max-width:420px}
.pb-pos{flex:none;white-space:nowrap;font-size:12px;color:var(--muted)}
.pb-step{appearance:none;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:6px;width:28px;height:28px;
  line-height:1;color:var(--label);flex:none}
.pb-step:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.pb-step:disabled{opacity:.4;cursor:default}

/* ---------- Tabs ---------- */
.tabbar{background:var(--surface);border-bottom:1px solid var(--border-soft)}
.tabs{max-width:none;margin:0 auto;display:flex;align-items:center;padding:0 24px;gap:4px;overflow-x:auto;overflow-y:hidden}
.tab{appearance:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:13px 18px;font-weight:600;
  font-size:13.5px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;flex:none}
.tab svg{width:16px;height:16px;fill:currentColor;flex:none}
.tab:hover{color:var(--primary)}
.tab[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary)}
.tab:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:6px}
.tab:disabled{cursor:default;opacity:.55}
.tab-n{background:var(--dot-l);color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;padding:0 6px;line-height:17px;min-width:17px;text-align:center}
.only{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--label);white-space:nowrap;padding-left:12px}
.only input{accent-color:var(--primary)}

/* ---------- Layout ---------- */
.panel{max-width:none;margin:18px auto 30px;padding:0 24px}
.card{background:var(--card);border:1px solid var(--border-soft);border-radius:10px;box-shadow:var(--shadow-1);overflow:hidden}
.card-head{padding:12px 18px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:10px}
.card-accent{width:4px;height:16px;border-radius:2px;background:var(--primary);flex:none}
.card-title{font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--primary)}
.card-body{padding:14px 18px 16px}
.card-foot{border-top:1px solid var(--border-soft);background:var(--surface-2);padding:13px 18px;display:flex;flex-direction:column;gap:10px}
.card-foot textarea.in{height:auto;padding:6px 10px;resize:vertical}
.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.actions .note{margin-right:auto}
#release-status{font-size:12.5px}
#release-status:empty{display:none}
#release-status.ok{color:var(--ok-ink);font-weight:600}
#release-status.bad{color:var(--danger)}
/* the blank form (no patient open): the full form, read-only */
.blank-note{margin-bottom:10px;padding:8px 14px;border:1px dashed var(--border);border-radius:8px;color:var(--muted);font-size:12.5px}
.f-row.blank-row .in:disabled{opacity:.75;cursor:not-allowed}
.f-row.add-row .in::placeholder{font-style:italic}
.act-add{height:26px}
.in.page-sel{width:auto;min-width:82px;margin-left:6px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px;align-items:start}
.col{min-width:0}
.type-row{margin-bottom:6px;padding-bottom:12px;border-bottom:1px dashed var(--border-soft);display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.type-row .f-label{min-width:203px}
.tier-opt{display:inline-flex;align-items:center;gap:6px;font-size:12.8px;color:var(--label);cursor:pointer;white-space:nowrap}
.tier-opt input{accent-color:var(--primary);width:14px;height:14px;cursor:pointer}
.billing-top{padding:6px 12px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:8px;margin-bottom:12px}
.editing-badge{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--primary-50);color:var(--primary);
  font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid var(--primary-border)}
.editing-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--primary)}
.empty-note{padding:14px 2px;color:var(--muted);font-style:italic}

/* ---------- Notices above the card ---------- */
.paused{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-ink);border-radius:8px;padding:10px 14px;margin-bottom:12px}
.paused-head{font-weight:700}
.paused-msg{font-size:12.5px}
.paused .btn{margin-top:8px}
.unit-notes{margin-bottom:12px}
.unit-notes .paused{margin-bottom:8px}
.lineage{font-size:12.5px;color:var(--muted);margin-bottom:4px}

/* ---------- Field rows ---------- */
.f-row{display:grid;grid-template-columns:195px 8px minmax(0,1fr);align-items:center;column-gap:8px;min-height:40px;padding:3px 6px;
  border-radius:6px}
.f-row.align-top{align-items:start}
.f-row.align-top > .f-label,.f-row.align-top > .f-colon{padding-top:8px}
.f-label{font-size:12.8px;color:var(--label);font-weight:500}
.f-colon{color:var(--colon);text-align:center}
.req::after{content:" *";color:var(--danger);font-weight:700}
/* a field flagged only by a review reason (a disputed one has its red border): the caption is underlined dotted in the label's
   own colour and its hover says why; the asterisk is left as it is */
.f-label.flagged{cursor:help}
.f-label.flagged > span:first-child{text-decoration:underline dotted var(--label);text-underline-offset:3px}
.f-label.flagged > .req::after{display:inline-block;white-space:pre}
/* text only a screen reader reads: a field's review reasons, the description of its control */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap}
.sub-note{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.f-row.sel{background:var(--sel-bg)}
.f-row.decided .in,.f-row.decided .race-box{border-color:var(--ok-border)}
.f-row.decided > .f-label::before{content:"\2713  ";color:var(--dot-h);font-weight:700}
/* blank (nothing printed) and can't read (sent for a rescan) leave an empty-looking box: the mark and the box tell them apart */
.f-row.decided.dec-blank > .f-label::before{content:"\2014  ";color:var(--muted)}
.f-row.decided.dec-cr > .f-label::before{content:"?  ";color:var(--warn-ink)}
.f-row.decided.dec-cr .in,.f-row.decided.dec-cr .race-box{border-color:var(--warn-border)}
.f-ctl{display:flex;flex-direction:column;gap:3px;min-width:0}
.fieldwrap{display:flex;align-items:center;gap:6px;min-width:0}
.fieldwrap > .in,.fieldwrap > .radios,.fieldwrap > .race-box{flex:1;min-width:0}
.acts{display:inline-flex;gap:4px;flex:none}
.act{appearance:none;cursor:pointer;height:28px;width:28px;padding:0;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--label);font-size:13px;font-weight:700;line-height:1}
.act:hover{border-color:var(--primary);color:var(--primary)}
.act.main{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.act.main:hover{background:var(--primary-600);color:var(--on-primary)}
.act:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.act.blank.on{background:var(--disabled-bg);border-color:var(--label);color:var(--ink)}
.act.cant{color:var(--warn-ink);border-color:var(--warn-border)}
.act.cant:hover,.act.cant.on{background:var(--warn-bg);border-color:var(--warn-ink);color:var(--warn-ink)}
.act.wrong{color:var(--danger-2);border-color:var(--danger-2);font-weight:700}
.act.wrong:hover,.act.wrong.on{background:var(--danger-2);border-color:var(--danger-2);color:#fff}
.notes{font-size:11px;color:var(--muted)}
.notes:empty{display:none}
.notes .reason{color:var(--warn-ink)}
.notes .answers{color:var(--label);font-weight:700}
.notes .st-ok{color:var(--ok-ink)}
.notes .st-bad{color:var(--danger)}
.notes .st-warn{color:var(--warn-ink)}
.cdot{flex:none;width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;
  font-weight:700;color:#fff;cursor:default;user-select:none;opacity:.85}
.cdot-h{background:var(--dot-h)} .cdot-m{background:var(--dot-m)} .cdot-l{background:var(--dot-l)}
.crop-img{max-width:100%;max-height:110px;border:1px solid var(--border);background:#fff;display:block;border-radius:4px}

/* ---------- Controls ---------- */
.in{width:100%;height:32px;border:1px solid var(--border);border-radius:6px;padding:0 10px;font-size:13px;color:var(--ink);background:var(--surface)}
.in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}
.in::placeholder{color:var(--placeholder)}
.in:disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
select.in{padding-right:28px;appearance:none;background-image:var(--arrow);background-repeat:no-repeat;background-position:right 10px center}
input[type="date"].in{padding-right:8px}
.in.edited,.radios.edited,.race-box.edited{border-color:var(--primary);font-weight:700}
.in.disputed,.radios.disputed,.race-box.disputed{border-color:var(--danger-2)}
.in.cr,.radios.cr,.race-box.cr{text-decoration:line-through;opacity:.55}
.radios{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:32px;border:1px solid transparent;border-radius:6px;padding:0 2px}
.radio,.check{display:inline-flex;align-items:center;gap:6px;font-size:12.8px;color:var(--label);cursor:pointer;white-space:nowrap}
.radio input,.check input{accent-color:var(--primary);width:14px;height:14px;cursor:pointer}
.race-box{border:1px solid var(--border);border-radius:6px;max-height:140px;overflow-y:auto;overflow-x:hidden;padding:8px 10px;display:flex;
  flex-direction:column;gap:7px;background:var(--surface)}
.race-box .check{white-space:normal;align-items:flex-start}

/* ---------- Buttons ---------- */
.btn{height:34px;padding:0 20px;border-radius:7px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--label)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-sm{height:28px;padding:0 12px;font-size:12px}
.btn-icon{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--primary);background:var(--surface);color:var(--primary);
  font-size:15px;line-height:1;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0}
.btn-icon:hover{background:var(--primary-50)}
.note{font-size:11.5px;color:var(--muted)}

/* ---------- Saved records / label proposals ---------- */
.modal-overlay{position:fixed;inset:0;z-index:90;background:var(--overlay);display:flex;align-items:flex-start;justify-content:center;
  padding:60px 16px 16px}
.modal{background:var(--surface);border-radius:10px;box-shadow:var(--shadow-2);width:min(760px,100%);max-height:80vh;display:flex;
  flex-direction:column;overflow:hidden}
.modal-wide{width:min(920px,100%)}
.modal-narrow{width:min(460px,100%)}
/* the not-a-facesheet pop-up comes when a refusal arrives, whatever dialog is open then: it is drawn above every other one */
#notice-modal{z-index:91}
.notice-msg{padding:16px 18px 6px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.notice-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.modal-title{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--primary)}
.modal-tools{display:flex;align-items:center;gap:8px}
.in.status-filter{width:auto;height:28px}
.modal-sub{padding:10px 18px;border-bottom:1px solid var(--border-soft);display:flex;flex-direction:column;gap:6px}
.modal-sub .f-row{grid-template-columns:90px 8px minmax(0,1fr)}
.modal-body{overflow-y:auto;padding:4px 0}
.rec-group{padding:9px 18px 5px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border-soft)}
.rec-group-warn{color:var(--warn-ink);background:var(--warn-bg)}
.rec-row{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--border-soft)}
.rec-row.current{background:var(--sel-bg)}
.rec-name{font-weight:600;font-size:13px;color:var(--ink)}
.rec-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.rec-actions{margin-left:auto;display:flex;gap:8px;flex:none}
.rec-reason{font-size:12px;color:var(--warn-ink);margin-top:3px}
.rec-group .btn{margin-left:10px;text-transform:none;letter-spacing:0}
#extract-rationale{height:auto;padding:6px 10px;resize:vertical}
.rec-empty{padding:22px 18px;font-size:12.5px;color:var(--muted);text-align:center}
.rec-note{padding:10px 18px;font-size:12.5px;color:var(--warn-ink);border-bottom:1px solid var(--border-soft)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
table.checks{width:100%;border-collapse:collapse;font-size:12.5px}
table.checks th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:8px 18px;
  border-bottom:1px solid var(--border-soft)}
table.checks td{padding:8px 18px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
table.checks td.act-cell{text-align:right;white-space:nowrap}
table.checks td.act-cell .btn + .btn{margin-left:6px}
.proposal{color:var(--warn-ink);margin-right:8px}
.payer-link{margin:4px 0 10px;font-size:12.5px;color:var(--muted)}
.payer-unknown{color:var(--warn-ink)}
.proposal .btn{margin-left:4px}
.charges{margin-top:14px;border:1px solid var(--border-soft);border-radius:6px;overflow-x:auto}
.charges-head{padding:8px 18px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--surface-2)}

/* ---------- Stage 12: the gold toward a fine-tune (Learning panel's bar; the L3 compact bar beside Learning) ----------
   A <progress> drawn by its pseudo-elements: no width is ever set from the script. Colour never says anything the text does not. */
.gold{padding:8px 18px}
.gold-state{font-weight:700;color:var(--primary);margin:2px 0 6px}
.gold-ready-to-fine-tune .gold-state,.gold-fine-tune-tested .gold-state{color:var(--ok-ink)}
.gold-bar{margin:4px 0 8px}
.gold-meter{-webkit-appearance:none;appearance:none;display:block;width:100%;height:10px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-2);overflow:hidden}
.gold-meter::-webkit-progress-bar{background:var(--surface-2);border-radius:999px}
.gold-meter::-webkit-progress-value{background:var(--primary);border-radius:999px}
.gold-meter::-moz-progress-bar{background:var(--primary);border-radius:999px}
.gold-ready-to-fine-tune .gold-meter::-webkit-progress-value,.gold-fine-tune-tested .gold-meter::-webkit-progress-value{background:var(--ok-ink)}
.gold-ready-to-fine-tune .gold-meter::-moz-progress-bar,.gold-fine-tune-tested .gold-meter::-moz-progress-bar{background:var(--ok-ink)}
.gold-next{font-size:12.5px;color:var(--label);margin-top:6px}
.gold-mini{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--label);white-space:nowrap}
.gold-mini .gold-bar{margin:0;width:90px}
.gold-mini .gold-meter{height:8px}
@media (forced-colors:active){.gold-meter{border-color:CanvasText}}

footer{max-width:none;margin:0 auto;padding:0 24px 26px;color:var(--muted);font-size:11.5px}
.kbd{display:inline-block;border:1px solid var(--border);border-radius:4px;padding:0 5px;font-size:11px;background:var(--surface)}

@media (max-width:1100px){
  .grid-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .conf-strip{display:none!important}      /* the strip keeps its one row; the decided count stays beside the form */
}
@media (max-width:760px){
  .strip-inner{padding:0 16px;gap:10px}
  .strip-who{min-width:90px}
}
@media (max-width:420px){
  .strip-inner .pills,.strip-inner .pill-more{display:none!important}   /* the lane and its reasons stay in the note above the form */
}
@media (max-width:560px){
  .tabs{padding:0 12px}
  .tab{padding:12px 12px;font-size:13px}
  .f-row{grid-template-columns:minmax(0,1fr);row-gap:2px;min-height:0;padding:6px 0}
  .f-colon{display:none}
  .header-right{display:none}
  .type-row .f-label{min-width:0}
  .gold-mini{white-space:normal}
  .gold-mini .gold-bar{width:60px;flex:none}
}