/* Khulani Pole Register.
   Same industrial-catalog language as the Proof Pack and the Compliance Clock:
   a ruled lattice of hairlines that touch, monospace for every number, zero
   radius, uppercase labels tracked like stamped serials, green as structure
   only. Status colours are a separate functional system - a QC tool has to
   shout about a failing pole, and brand green cannot do that job.

   This register is almost entirely numerals, so tabular figures matter more
   here than anywhere else in the house tools. */

@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(assets/fonts/Montserrat-400.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(assets/fonts/Montserrat-500.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(assets/fonts/Montserrat-600.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(assets/fonts/Montserrat-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(assets/fonts/IBMPlexMono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(assets/fonts/IBMPlexMono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(assets/fonts/IBMPlexMono-600.woff2) format("woff2")}

:root{
  --ink:#111; --forest:#295A19; --mid:#43852C; --lime:#8DE867;
  --rule:#C9CEC5; --muted:#5E635A; --mist:#F3F5F1; --paper:#fff;
  --fail:#A3160B; --fail-bg:#FDF4F3;
  --warn:#B25A00; --warn-bg:#FEF9F3;
  --idle:#8B917F;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:14px/1.5 Montserrat,"Helvetica Neue",Arial,sans-serif;color:var(--ink);
  background:var(--mist);font-feature-settings:"tnum" 1,"kern" 1;min-height:100vh}
.num,.mono,code{font-family:var(--mono);font-feature-settings:"tnum" 1}
a{color:inherit}
button,input,select{font:inherit;color:inherit;border-radius:0}
:focus-visible{outline:2px solid var(--forest);outline-offset:1px}

/* ---------------------------------------------------------------- chrome */
.top{background:var(--paper);border-bottom:2px solid var(--forest);
  display:flex;align-items:stretch;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;padding:10px 16px;
  text-decoration:none;border-right:1px solid var(--rule)}
.brand img{height:26px;width:auto;display:block}
.brand b{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--forest);line-height:1.25}
.brand b span{display:block;color:var(--muted);font-weight:600}
nav{display:flex;flex-wrap:wrap}
nav a{display:flex;align-items:center;padding:0 16px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  border-right:1px solid var(--rule);min-height:46px}
nav a:hover{color:var(--ink);background:var(--mist)}
nav a[aria-current=page]{color:var(--forest);box-shadow:inset 0 -3px 0 var(--forest)}
.mode{margin-left:auto;display:flex;align-items:center;padding:0 16px;font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
.mode.live{color:var(--mid)}

main{max-width:1180px;margin:0 auto;padding:20px 16px 60px}

/* ------------------------------------------------------------------ type */
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid)}
h1{font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.015em;
  color:var(--forest);margin:4px 0 6px}
h1 .num{font-weight:600;letter-spacing:0}
h2{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--forest);border-bottom:1px solid var(--forest);padding-bottom:5px;
  margin:26px 0 0}
.lede{color:#2a2a2a;max-width:72ch}
.muted{color:var(--muted)}
.small{font-size:12px}

/* --------------------------------------------------------- the lattice */
.card{background:var(--paper);border:1px solid var(--rule)}
.lat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  background:var(--paper);border:1px solid var(--rule);border-top:0}
.lat>div{padding:10px 14px;border-top:1px solid var(--rule);border-right:1px solid var(--rule)}
.lat.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.lat.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.lat.six,.lat.five{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}}
.k{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
.v{font-family:var(--mono);font-size:15px;font-weight:500}
.v.big{font-size:26px;font-weight:600;color:var(--forest);line-height:1.1}
.v small{font-family:Montserrat,sans-serif;font-size:11px;color:var(--muted);font-weight:500}

table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule)}
th{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--rule);
  background:var(--mist);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
td.num{font-size:13.5px}
tbody tr[data-href]{cursor:pointer}
tbody tr[data-href]:hover td{background:var(--mist)}

/* status is a left flag on the row, never a fill across it */
tr[data-s]{box-shadow:inset 4px 0 0 transparent}
tr[data-s=fail]{box-shadow:inset 4px 0 0 var(--fail)}
tr[data-s=fail] td{background:var(--fail-bg)}
tr[data-s=warn]{box-shadow:inset 4px 0 0 var(--warn)}
tr[data-s=warn] td{background:var(--warn-bg)}

.tag{display:inline-block;font-family:Montserrat,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border:1px solid currentColor;
  white-space:nowrap;vertical-align:1px}
.tag.pass{color:var(--mid)} .tag.fail{color:var(--fail)} .tag.warn{color:var(--warn)}
.tag.idle{color:var(--idle)}

/* An unverified row must never be able to pass for a fact. */
.unverified{border:1px dashed var(--warn);background:var(--warn-bg);padding:8px 12px;
  font-size:12.5px;color:#5a3a00;margin:12px 0}
.unverified b{color:var(--warn)}

/* ---------------------------------------------------------------- search */
.search{display:flex;border:2px solid var(--forest);background:var(--paper);margin:14px 0 6px}
.search input{flex:1;min-width:0;border:0;padding:14px 16px;font-family:var(--mono);
  font-size:22px;font-weight:500;background:transparent;outline:none}
.search input::placeholder{color:#b3b8ad;font-weight:400}
.search button{border:0;border-left:2px solid var(--forest);background:var(--forest);
  color:#fff;padding:0 22px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.hint{font-size:12px;color:var(--muted)}
.hint code{background:var(--paper);border:1px solid var(--rule);padding:0 4px;font-size:11.5px}

/* ----------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  border:1px solid var(--rule);background:var(--paper);margin:14px 0}
.tile{padding:12px 14px;border-right:1px solid var(--rule)}
.tile:last-child{border-right:0}
.tile .v{font-size:24px;font-weight:600;color:var(--forest);line-height:1.15}
.tile .sub{font-size:11px;color:var(--muted);margin-top:2px}
.tile.fail .v{color:var(--fail)}

/* ---------------------------------------------------------- findings */
.finding{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule);
  background:var(--paper)}
.finding:last-child{border-bottom:0}
.finding .code{font-family:var(--mono);font-size:11px;font-weight:600;flex:0 0 150px}
.finding .what{flex:1;min-width:0;font-size:13px}
.finding .what .mono{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.finding[data-sev=blocker],.finding[data-sev=high]{box-shadow:inset 4px 0 0 var(--fail)}
.finding[data-sev=medium]{box-shadow:inset 4px 0 0 var(--warn)}
.finding[data-sev=info],.finding[data-status=accepted]{box-shadow:inset 4px 0 0 var(--rule)}
.finding[data-status=accepted] .what{color:var(--muted)}
.coverage{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);border-top:0}
.coverage span{font-size:11px;padding:6px 12px;border-right:1px solid var(--rule);
  background:var(--paper)}
.coverage span b{font-family:var(--mono)}

/* --------------------------------------------------------- sheet grid */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--rule);
  background:var(--paper);overflow-x:auto}
.gcol{border-right:1px solid var(--rule);min-width:128px}
.gcol:last-child{border-right:0}
.ghead{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:6px 8px;background:var(--mist);border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between}
.gseg{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--forest);padding:3px 8px;background:#eef3ea;border-bottom:1px solid var(--rule)}
.gseg.blank{background:var(--paper)}
.gcell{display:grid;grid-template-columns:1fr 34px;font-family:var(--mono);font-size:13px;
  border-bottom:1px solid #e6e9e2;min-height:25px;align-items:center}
.gcell>*{padding:2px 8px}
.gcell .pen{border-left:1px solid #e6e9e2;text-align:right}
.gcell a{text-decoration:none}
.gcell a:hover{text-decoration:underline}
.gcell.fail .pen{color:var(--fail);font-weight:600}
.gcell.flag{background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn)}
.gcell.void{color:var(--idle);font-style:italic;font-family:Montserrat,sans-serif;font-size:11px}
.gcell.empty{color:#d4d8cf}
.gcell .raw{color:var(--idle);font-size:10.5px}

/* ------------------------------------------------------------ bar chart */
.bars{display:grid;gap:0;border:1px solid var(--rule);background:var(--paper)}
.bar{display:grid;grid-template-columns:90px 1fr 70px;align-items:center;
  border-bottom:1px solid var(--rule);font-size:13px}
.bar:last-child{border-bottom:0}
.bar>*{padding:7px 12px}
.bar .lbl{font-family:var(--mono);border-right:1px solid var(--rule)}
.bar .track{position:relative;height:100%;min-height:30px;padding:0}
.bar .fill{position:absolute;inset:7px auto 7px 0;background:var(--mid)}
.bar .fill.at-min{background:var(--warn)}
.bar .val{font-family:var(--mono);text-align:right;border-left:1px solid var(--rule)}

/* --------------------------------------------------------------- capture */
.shoot{display:block;width:100%;border:2px solid var(--forest);background:var(--forest);
  color:#fff;padding:28px 16px;font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;text-align:center}
.shoot input{display:none}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);margin:14px 0}
.seg label{padding:14px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;background:var(--paper);color:var(--muted)}
.seg label+label{border-left:1px solid var(--rule)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{color:var(--forest)}
.seg label:has(input:checked){box-shadow:inset 0 -3px 0 var(--forest);color:var(--forest)}

.btn{border:1px solid var(--forest);background:var(--paper);color:var(--forest);
  padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.btn:hover{background:var(--mist)}
.btn.solid{background:var(--forest);color:#fff}
a.btn{display:inline-block;text-decoration:none}
.btn:disabled{opacity:.4;cursor:default}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

.empty-state{padding:30px 16px;text-align:center;color:var(--muted);background:var(--paper);
  border:1px solid var(--rule);font-size:13px}

footer.foot{max-width:1180px;margin:0 auto;padding:16px;border-top:1px solid var(--rule);
  font-size:11px;color:var(--muted)}

/* ---------------------------------------------------------------- verify
   The one screen with no precedent in the house tools. It keeps the
   lattice, but its job is different: the photo and the machine's read sit
   on the same row lines, so the eye moves sideways and never has to find
   its place again. Photo pixels are never recoloured or overlaid except by
   a single forest band marking the row in hand. */
main.wide{max-width:1480px}
.t-fail{color:var(--fail);font-weight:600}
.tile.warn .v{color:var(--warn)}
kbd{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;
  border:1px solid currentColor;padding:0 4px;opacity:.8;white-space:nowrap}
.btn kbd{margin-left:6px}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--forest);text-decoration:underline;cursor:pointer}

.vbar{display:flex;align-items:stretch;background:var(--paper);border:1px solid var(--rule);margin-bottom:14px}
.vtitle{padding:8px 16px;border-right:1px solid var(--rule);min-width:150px}
.vtitle b{font-size:22px;font-weight:600;color:var(--forest);line-height:1.1}
.vrail{display:flex;flex:1;list-style:none;overflow-x:auto}
.vrail li{flex:1;display:flex;border-right:1px solid var(--rule);min-width:62px}
.vrail li:last-child{border-right:0}
.vrail li>*{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--idle);
  border:0;background:none;white-space:nowrap;min-height:44px}
.vrail li>button{cursor:pointer;color:var(--muted)}
.vrail li>button:hover{background:var(--mist);color:var(--ink)}
.vrail li.done>*{color:var(--mid)}
.vrail li.done>*::before{content:"";width:6px;height:6px;background:var(--lime);flex:none}
.vrail li[aria-current=step]>*{color:var(--forest);box-shadow:inset 0 -3px 0 var(--forest)}
.vnote{margin:-6px 0 14px}

.vgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.vhead h2{margin-top:0}
.vhead p{margin:6px 0 0;max-width:80ch}
.vside{position:sticky;top:12px;display:grid;gap:12px}
.zoom{display:inline-flex}
.zoom .btn{padding:8px 11px;font-family:var(--mono);font-size:13px;line-height:1}
.zoom .btn+.btn{border-left:0}

/* photo crops: fixed-scale (background) for aligned work, fluid (img) for panes */
.ph{background-repeat:no-repeat;background-color:#fafaf8}
.crop{position:relative;overflow:hidden;border:1px solid var(--rule);background:#fafaf8}
.crop img{position:absolute;max-width:none;height:auto;display:block;user-select:none}

/* the aligned strip */
.strip{position:relative;background:var(--paper);border:1px solid var(--rule);margin-top:12px;
  --gut:30px;overflow-x:auto}
.strip .stripimg{position:absolute;left:var(--gut);top:0}
.vtop{display:grid;grid-template-columns:var(--gut) var(--W) 1fr;align-items:end;
  border-bottom:1px solid var(--forest)}
.colh{display:flex;flex-direction:column;gap:2px;padding:0 10px 6px}
.colh .vi{width:150px;height:28px}
.vrow{display:grid;grid-template-columns:var(--gut) var(--W) 116px 58px minmax(120px,1fr);
  height:var(--R);align-items:stretch;position:relative}
.vrow::after{content:"";position:absolute;left:calc(var(--gut) + var(--W));right:0;bottom:0;
  border-bottom:1px solid #eceee9;pointer-events:none}
.vrow .rn{font-family:var(--mono);font-size:10.5px;color:var(--idle);display:flex;
  align-items:center;justify-content:flex-end;padding-right:6px;background:var(--mist);
  border-right:1px solid var(--rule)}
.vrow .slot{pointer-events:none}
.vrow .vn{display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;
  white-space:nowrap;overflow:hidden}
.vrow.focus .slot{outline:2px solid var(--forest);outline-offset:-1px;
  box-shadow:inset 0 0 0 9999px rgba(141,232,103,.08);z-index:1}
.vrow.focus .rn{background:var(--forest);color:#fff}
.vrow.hold .rn{box-shadow:inset -3px 0 0 var(--warn)}
.was{font-family:var(--mono);color:var(--warn)}
.norm{font-family:var(--mono);color:var(--muted)}

.vi{font-family:var(--mono);font-size:16px;font-weight:500;border:1px solid transparent;
  background:transparent;padding:0 8px;min-width:0;width:100%;height:100%;outline:none}
.vi::placeholder{color:#d4d8cf}
.vi:hover{border-color:var(--rule)}
.vi:focus{border-color:var(--forest);background:#fff;box-shadow:inset 0 0 0 1px var(--forest)}
.vrow .vi{border-left:1px solid #eceee9}
.vrow .vi.pen{text-align:right}
.vrow.changed .vi{color:var(--forest);font-weight:600}
.vrow .vi.label{grid-column:span 2;background:#eef3ea;color:var(--forest);font-family:Montserrat,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vi[data-state]{color:var(--idle);text-decoration:line-through;background:repeating-linear-gradient(
  135deg,transparent 0 6px,#f1f2ee 6px 7px)}

/* side pane */
.thumb{position:relative;width:132px;border:1px solid var(--rule);background:#fafaf8}
.thumb i{position:absolute;outline:2px solid var(--forest);outline-offset:0}
.thumb b{position:absolute;background:var(--lime);opacity:.9}
.mag{border:1px solid var(--rule);background:var(--paper)}
.mag.empty{padding:14px}
.mag-img{position:relative}
.mag-img i,.xphoto i{position:absolute;left:0;right:0;outline:2px solid var(--forest);pointer-events:none}
.mag-cap{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-top:1px solid var(--rule);
  font-size:11px}
.facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);background:var(--paper)}
.facts>div{padding:8px 12px}
.facts>div+div{border-left:1px solid var(--rule)}
.facts .k{display:block}
.facts b{font-size:20px;font-weight:600;color:var(--forest);margin-right:4px}
.held{list-style:none;border:1px solid var(--rule);background:var(--paper);font-size:11.5px}
.held li{padding:5px 10px;border-bottom:1px solid var(--rule);box-shadow:inset 3px 0 0 var(--warn)}
.held.settled li{box-shadow:inset 3px 0 0 var(--rule);color:var(--muted)}
.held li:last-child{border-bottom:0}
.vhint{border:1px dashed var(--warn);background:var(--warn-bg);padding:8px 12px;font-size:12px;color:#5a3a00}
.vhint b{color:var(--warn)}
.legend{border:1px solid var(--rule);background:var(--paper);padding:8px 12px;font-size:11.5px}
.legend>div:not(.k){display:grid;grid-template-columns:96px 1fr;gap:8px;padding:2px 0}

/* header */
.hsplit{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;margin-top:12px;align-items:start}
.vpane{position:sticky;top:12px}
.hform{border:1px solid var(--rule);background:var(--paper)}
.hrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) 24px;gap:10px;
  padding:7px 12px;border-bottom:1px solid var(--rule);align-items:center}
.hrow label{display:flex;flex-direction:column}
.hrow label .k{margin:0}
.hrow .vi{height:34px;border-color:var(--rule);background:#fff}
.hrow select.vi{font-size:13px}
.hrow.ok{box-shadow:inset 3px 0 0 var(--mid)}
.hmeta{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:2px}
.tick{font-weight:700;color:var(--mid);text-align:center}
.hform .row-btns{padding:0 12px}

/* tallies */
.tallies{border:1px solid var(--rule);background:var(--paper)}
.trow{display:grid;grid-template-columns:64px 84px minmax(0,1fr) 20px;gap:8px 10px;
  padding:10px 12px;border-bottom:1px solid var(--rule);align-items:end}
.trow>div{grid-column:1 / 4;grid-row:1}
.trow .tick{grid-column:4;grid-row:1}
.trow label:nth-of-type(1){grid-column:1 / 5;grid-row:2}
.trow label:nth-of-type(4){grid-column:3 / 5}
.trow:last-child{border-bottom:0}
.trow label,.trow>div{display:flex;flex-direction:column;min-width:0}
.trow .vi{height:32px;border-color:var(--rule);background:#fff;font-size:14px}
.trow.ok{box-shadow:inset 3px 0 0 var(--mid)}

/* exceptions */
.xcase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;border:1px solid var(--rule);
  background:var(--paper);margin-top:12px}
.xcase.sheetlevel{grid-template-columns:1fr}
.xphoto{position:relative;border-right:1px solid var(--rule)}
.xform{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.xin{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:10px}
.xin label{display:flex;flex-direction:column}
.vi.big{font-size:30px;height:56px;border-color:var(--rule);background:#fff}
.vi.big.pen{text-align:right}
.xmeta{display:flex;flex-wrap:wrap;gap:6px}
.xwhy{margin-top:12px}
.xlist{list-style:none;border:1px solid var(--rule);background:var(--paper);max-height:46vh;overflow:auto}
.xlist li{border-bottom:1px solid var(--rule)}
.xlist li:last-child{border-bottom:0}
.xlist button{width:100%;display:grid;grid-template-columns:70px 1fr 64px;gap:6px;padding:6px 10px;
  border:0;background:none;cursor:pointer;text-align:left;font-size:11.5px}
.xlist button:hover{background:var(--mist)}
.xlist li.here button{box-shadow:inset 3px 0 0 var(--forest);background:#f6f9f4}
.xlist li.done{color:var(--muted)}
.xlist li.done span:last-child{color:var(--mid);font-weight:700}

@media (max-width:1000px){
  .vgrid{grid-template-columns:minmax(0,1fr)}
  .vside{position:static;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
  .hsplit{grid-template-columns:minmax(0,1fr)}
  .vpane{position:static}
}
@media (max-width:700px){
  .vbar{flex-direction:column}
  .vtitle{border-right:0;border-bottom:1px solid var(--rule)}
  .vrow{grid-template-columns:var(--gut) var(--W) 96px 48px 0}
  .vrow .vn{display:none}
  .xcase{grid-template-columns:1fr}
  .xphoto{border-right:0;border-bottom:1px solid var(--rule);overflow:hidden}
  .hrow{grid-template-columns:minmax(0,1fr) 20px}
  .hrow label{grid-column:1 / -1}
}

/* ----------------------------------------------------------- certificate
   The one document here a customer holds. It uses the Proof Pack's print
   language (proof-pack/src/proofpack/render.py) rather than the app's: A4,
   mm units, a masthead ruled in forest, a hairline lattice, mono figures.
   Green is structure only. The source column is the certificate's own
   detail: every figure names the page of the paper book it came from. */
.certgaps{border:1px solid var(--warn);border-left:4px solid var(--warn);background:var(--warn-bg);
  padding:10px 14px;font-size:12.5px;margin:12px 0}
.certgaps b{color:var(--warn)}
.certgaps ol{margin:6px 0 4px 18px}
.certgaps li{margin:3px 0}
.certgaps .mono{font-size:10.5px;color:var(--muted);margin-right:4px}
.certok{border:1px solid var(--mid);border-left:4px solid var(--mid);background:#f4f9f1;padding:10px 14px;
  font-size:12.5px;margin:12px 0}
.certok b{color:var(--forest)}
.certfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin-top:6px}
.certfields label{display:flex;flex-direction:column;gap:3px}
.certfields .vi{height:36px;border-color:var(--rule);background:#fff;font-size:14px}
.checkedby{display:flex;flex-direction:column;gap:3px;min-width:240px}
.checkedby .vi{height:36px;border-color:var(--rule);background:#fff;font-size:14px}
.certask{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.certlist{width:100%;font-family:var(--mono);font-size:15px;padding:10px 12px;border:1px solid var(--rule);
  margin-top:4px;resize:vertical;border-radius:0}

.cstack{overflow-x:auto;padding:14px 0 4px}
.cpage{width:210mm;height:297mm;margin:0 auto 14px;background:#fff;border:1px solid var(--rule);
  padding:13mm 13mm 10mm;display:flex;flex-direction:column;position:relative;overflow:hidden;
  font:8.2pt/1.45 Montserrat,sans-serif;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cpage .m{font-family:var(--mono);font-feature-settings:"tnum" 1}
.cwm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font:700 110pt/1 Montserrat,sans-serif;letter-spacing:.12em;color:rgba(163,22,11,.075);
  transform:rotate(-32deg);z-index:2}
.cmast{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1.6pt solid var(--forest);
  padding-bottom:2.5mm;margin-bottom:4mm;flex:none}
.cmast img{height:9mm;width:auto;display:block}
.cmeta{text-align:right;font-family:var(--mono);font-size:6.3pt;letter-spacing:.06em;color:var(--muted);
  line-height:1.5;text-transform:uppercase}
.cmeta b{color:var(--forest);font-weight:600}
.cbody{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ceyebrow{font-size:6.3pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.ch1{font-size:18pt;font-weight:600;line-height:1.05;letter-spacing:-.018em;color:var(--forest);margin:1.2mm 0 1.6mm}
.ch1 span{color:var(--muted);font-weight:500}
.clede{font-size:8.2pt;line-height:1.45;max-width:170mm;color:#1c1c1c;margin-bottom:2.6mm}
.cto{display:flex;gap:10mm;border-top:1pt solid var(--rule);border-bottom:1pt solid var(--rule);padding:1.6mm 0;
  margin-bottom:3mm;font-size:8.4pt}
.cto .ck{margin-right:2mm}
.cdraft{border:1pt solid var(--fail);border-left:2.4mm solid var(--fail);padding:1.6mm 3mm;margin-bottom:2.6mm;
  font-size:7.4pt;line-height:1.4;color:#3a0a05}
.cdraft b{color:var(--fail)}
.cdraft ol{margin:1mm 0 0 4.5mm}
.ccols{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-bottom:3mm}
.ct{font-family:Montserrat,sans-serif;font-size:7.4pt}
.ch2{font-size:8.4pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);
  padding-bottom:1.1mm;border-bottom:1pt solid var(--forest);margin-bottom:0}
.ch2 span{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted);font-size:7pt;margin-left:2mm}
.clat{border:1pt solid var(--rule);border-top:0}
.crow{display:grid;grid-template-columns:23.5mm 1fr 19.5mm;border-bottom:1pt solid var(--rule);min-height:5.8mm}
.crow:last-child{border-bottom:0}
.crow>div{padding:1mm 1.8mm;display:flex;align-items:center;flex-wrap:wrap;gap:0 1.6mm}
.ck{font-size:6pt;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.crow .ck{border-right:1pt solid var(--rule)}
.cv{font-family:var(--mono);font-size:7.8pt}
.cdim{font-family:Montserrat,sans-serif;font-size:6.4pt;color:var(--muted)}
.csrc{border-left:1pt solid var(--rule);font-family:var(--mono);font-size:6pt;color:var(--mid);
  letter-spacing:.02em;line-height:1.25}
.cmiss{font-family:Montserrat,sans-serif;font-size:6pt;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fail);border-bottom:1pt dashed currentColor}
.ctabh{margin-top:.5mm}
table.ctab{width:100%;border-collapse:collapse;border:0;background:none;font-size:7.4pt;margin:0;table-layout:fixed}
.ctab th{font-family:Montserrat,sans-serif;font-size:5.8pt;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--mist);padding:1.2mm 1.6mm;
  border:1pt solid var(--rule);white-space:nowrap;text-align:left}
.ctab td{padding:.75mm 1.1mm;border:1pt solid var(--rule);vertical-align:middle;white-space:nowrap;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.ctab th{overflow:hidden;text-overflow:clip}
.ctab .r{text-align:right}
.ctab .b{font-weight:600;color:var(--forest)}
.ctab .s{font-size:6.2pt;color:var(--muted)}
.ctab.g td:nth-child(4n+2){font-size:6.8pt}
.ctab.g th{letter-spacing:.04em;padding:1.1mm 1.1mm}
.ctab.small{font-size:7.2pt}
.ctab.auto{table-layout:auto}
.ctab.tight{font-size:6.6pt}
.ctab.tight td{padding:.7mm 1mm}
.ctab.g td:nth-child(4n+1):not(:first-child),.ctab.g th:nth-child(4n+1):not(:first-child){border-left:1.4pt solid var(--forest)}
.ctail{margin-top:auto;padding-top:2.5mm}
.cfine{display:grid;grid-template-columns:1fr 1fr;gap:5mm;border-top:1pt solid var(--rule);padding-top:1.6mm}
.cnote{font-size:6.8pt;line-height:1.4;color:#333;margin-bottom:2mm}
.csign{display:grid;grid-template-columns:1.4fr 1.4fr .8fr;gap:6mm;margin:1mm 0 2.4mm}
.csign>div{display:flex;flex-direction:column}
.cline{border-bottom:1pt solid #000;min-height:6mm;display:flex;align-items:flex-end;padding-bottom:.6mm;font-size:9pt}
.cunder{font-size:5.8pt;color:var(--muted);margin-top:.6mm}
.catt{align-items:center;justify-content:center;padding:2mm 0}
.catt img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.csig{max-height:11mm;max-width:100%;display:block;margin-bottom:-1mm}
/* The signature page, and the line it is checked on: the certificate's own
   signature block, at print size, on white. */
.sigstat{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);background:var(--paper);
  padding:8px 14px;margin:12px 0 4px;color:var(--ink);text-decoration:none;font-size:12.5px;flex-wrap:wrap}
.sigstat:hover{border-color:var(--forest)}
.sigstat img{height:26px;width:auto}
.sigstat span:not(.k){flex:1;min-width:200px}
.sigstat b{color:var(--forest);font-weight:600}
.sigwrap{overflow-x:auto;background:var(--paper);border:1px solid var(--rule)}
.sigsheet{width:184mm;padding:5mm 6mm 2mm;box-sizing:content-box}
.sigsteps{margin:4px 0 12px 20px;font-size:13px;line-height:1.55;max-width:62ch}
.sigpick{cursor:pointer}
.sigtwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px;margin-top:14px}
.sigtwo figure{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.sigtwo img#sig-orig{max-height:180px;width:auto;max-width:100%;object-fit:contain;border:1px solid var(--rule);background:var(--paper);align-self:flex-start}
.sigrange{display:flex;align-items:center;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.sigrange input{width:220px;accent-color:var(--forest)}
@media (max-width:700px){.sigtwo{grid-template-columns:1fr}}
/* The strip is a real 184 mm; on a phone, shrink it whole rather than hide the signature off to the side. */
@media (max-width:760px){.sigsheet{zoom:.46}}
.certattach{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px}
.ccert{font-size:6.3pt;line-height:1.4;color:#333}
.cverify{font-size:6.3pt;line-height:1.4;color:#333}
.cverify b{color:var(--forest)}
.cfoot{flex:none;margin-top:3mm;padding-top:2mm;border-top:1pt solid var(--forest);display:flex;
  justify-content:space-between;gap:6mm;font-size:6.1pt;line-height:1.4;color:var(--muted)}
.cfoot .cpg{white-space:nowrap}
.cfoot i,.cfoot u{font-style:normal;text-decoration:none}

/* A named page, so only certificate pages print edge to edge; the pole record
   keeps the browser's margins. */
@page cert{size:A4;margin:0}
@media print{
  .top,nav,footer.foot,.no-print{display:none!important}
  main,main.wide{max-width:none;padding:0;margin:0}
  body{background:#fff}
  .cstack{padding:0;overflow:visible}
  .cpage{margin:0;border:0;page:cert;page-break-after:always;break-after:page}
  .cpage:last-child{page-break-after:auto;break-after:auto}
}

/* ------------------------------------------------------ phone: cards */
@media (max-width:700px){
  h1{font-size:22px}
  .brand{border-right:0;width:100%;border-bottom:1px solid var(--rule)}
  nav{width:100%}
  nav{flex-wrap:nowrap}
  nav a{flex:1 1 auto;justify-content:center;padding:0 3px;font-size:9px;letter-spacing:.03em;min-width:0}
  .mode{display:none}
  .tile{border-right:0;border-bottom:1px solid var(--rule)}
  .tile:last-child{border-bottom:0}
  /* A wide table clips on a phone. Each row becomes a card with the column
     heading inline beside its value. */
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:auto}
  table.cards thead{display:none}
  table.cards tr{border-bottom:1px solid var(--rule);padding:4px 0 8px}
  /* Label pinned left, every part of the value kept together on the right -
     "122.3 kg/m3" must not split into two islands across the row. */
  table.cards td{border:0;padding:4px 12px;display:flex;justify-content:flex-end;
    align-items:baseline;gap:6px;flex-wrap:wrap;text-align:right}
  table.cards td[data-label]::before{content:attr(data-label);margin-right:auto;
    padding-right:14px;font-family:Montserrat,sans-serif;
    font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  table.cards td.n{text-align:right}
  .finding{flex-direction:column;gap:3px}
  .finding .code{flex:none}
  .search input{font-size:19px;padding:12px}
  .search button{padding:0 14px}
}

@media print{
  .top,nav,.row-btns,.search,.no-print{display:none!important}
  body{background:#fff}
  main{padding:0}
}

/* Typing a sheet in: the photo queue, and lining the grid up on a new photo.
   The overlay is the register's own grid, in forest; the edges heavier, the
   pole/pen split dotted, so the eye goes to the corners that decide it. */
.typethumb{height:54px;width:auto;border:1px solid var(--rule);display:block;background:var(--paper)}
.alignwrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.aimg{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--paper);flex:none}
.aimg .ph{position:absolute;left:0;top:0}
.aimg i{position:absolute;display:block;pointer-events:none}
.aimg .gh{height:0;border-top:1px solid rgba(41,90,25,.55)}
.aimg .gv{width:0;border-left:1px solid rgba(41,90,25,.55)}
.aimg .edge{border-color:var(--forest);border-width:2px}
.aimg .gv.split{border-left:1px dotted rgba(41,90,25,.5)}
.acorners{display:flex;flex-direction:column;gap:12px}
.acorner{margin:0;display:flex;flex-direction:column;gap:4px}
.anudge{display:flex;flex-direction:column;gap:6px}
.anudge .row-btns{margin:0}

/* Typing a CS1 charge sheet: the photo beside the form, in the paper's order.
   The photo stays in view while the form scrolls, so the eye moves across,
   not up and down. */
.cs1grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:18px;margin-top:14px;align-items:start}
.cs1photo{position:sticky;top:8px}
.cs1photo .row-btns{justify-content:space-between;margin:0 0 6px}
.cs1img{max-height:calc(100vh - 110px);overflow:auto;border:1px solid var(--rule);background:var(--paper)}
.cs1img img{display:block;max-width:none}
.cs1sec{border-top:2px solid var(--forest);padding:10px 0 14px}
.cs1sec h2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px;border:0;padding:0}
.cs1ok{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);display:flex;gap:6px;align-items:center}
.cs1fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px}
.cs1sums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px}
.cs1f{display:flex;flex-direction:column;gap:3px}
.cs1in{display:flex;align-items:center;gap:6px}
.cs1in .vi{height:34px;border-color:var(--rule);background:#fff;font-size:14px;flex:1;min-width:0}
.cs1in .u{font-size:11px;color:var(--muted);min-width:34px}
.cs1lines{width:100%;border-collapse:collapse;min-width:520px}
.cs1lines th{font-size:10px;text-align:left;padding:4px 6px}
.cs1lines td{padding:2px}
.cs1lines .vi{height:32px;width:100%;border-color:var(--rule);background:#fff;font-size:14px}
.cs1check{margin-top:10px}
.cs1check ol{margin:6px 0 4px 18px}
.cs1save{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.settle{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px 12px;background:var(--mist);border:1px solid var(--rule)}
.settle label{display:flex;flex-direction:column;gap:3px}
.settle .vi{border-color:var(--rule);background:#fff;font:inherit;font-size:13px;padding:6px 8px}
@media (max-width:860px){.cs1grid{grid-template-columns:1fr}.cs1photo{position:static}}

/* The sign-in password box: a visible edge, so it can be found. The shared
   .vi style is borderless for the verify grid. */
#si-pass{border:1px solid var(--rule);background:#fff;height:40px;padding:0 10px;width:100%;max-width:320px;margin:4px 0 12px}
#si-pass:focus{border-color:var(--forest)}