/* =========================================================================
   public/css/record.css — v4.0.0 (owner A7). The resident record: header, five-step stepper,
   stage panel, and the record-screen primitives every stage uses (Stage 6 included — A6's
   s6.js uses .stagestatus, .stacktable, .docrow, .stamp and .sectionbar from here).
   CONTRACTS.md §13: this file owns .stacktable(/.stack-lg/.stack-sm), .stagestatus, .reqgroup,
   .docrow/.doclist, .stamp, .sectionbar, .sumtiles/.sumtile and the stepper/header additions.
   Tokens only (index.html defines them); no :root here. Every responsive block is
   `@media screen and (…)` — an unscoped max-width block would fire on paper.
   ========================================================================= */

/* ---- record header ----------------------------------------------------------------------- */
.recordhead{display:flex;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-2)}
.recordhead .rh-main{flex:1 1 20rem;min-width:0}
.recordhead h1{overflow-wrap:anywhere}
.recordhead .metaline{overflow-wrap:anywhere}
.recordhead .rh-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);min-width:0}
.recordhead .rh-links{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.recordhead #lastUpdated{margin-top:2px}
.flagctl label{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600}
.recordnotice{margin:var(--space-2) 0 var(--space-3)}

/* ---- five-step stepper ---------------------------------------------------------------------
   index.html styles .step for the v3 <button>; v4 steps are <a href> so a stage opens in a new
   tab too. Five steps: they share the row above 600 px and wrap 3 + 2 on a phone. */
a.step{text-decoration:none;color:var(--text)}
a.step:hover{color:var(--text)}
a.step:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.stepper .step .sstatus{overflow-wrap:anywhere}
.stepper .step .stitle{overflow-wrap:anywhere}

/* ---- the stage panel ---------------------------------------------------------------------- */
.stagepanel > h2{font-size:var(--fs-lg)}
.stagepanel .purpose{margin-top:var(--space-1)}
.stagepanel .loadfail{margin-top:var(--space-3)}

/* ---- section banners (the mockups' dark "A. …" bars) ----------------------------------------
   Brand navy in both themes (the brand tokens do not change with the scheme), white text: 10.9:1.
   A button inside reads as a white chip on the bar, never blue-on-navy. */
.sectionbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin:var(--space-6) 0 0;padding:var(--space-3) var(--space-4);
  background:var(--brand-primary-2);color:var(--on-brand);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.sectionbar h3{margin:0;font-size:var(--fs-md);font-weight:600;line-height:1.35;color:var(--on-brand);flex:1 1 16rem;min-width:0}
.sectionbar .barnote{font-size:var(--fs-sm);color:var(--on-brand);line-height:1.45}
.sectionbar .chip{margin-left:0}
/* Only the brand tokens here: they do not change with the colour scheme, so the chip, its hover and
   its focus ring keep their contrast on the navy bar in light and dark alike (--tint is dark in dark
   mode — a hover that used it measured 1.36:1). White chip 10.9:1; hover/pressed = white text on
   brand blue 7.6:1; the focus ring is white on navy. */
.sectionbar button,.sectionbar a.btnlink{background:var(--on-brand);color:var(--brand-primary-2);border-color:var(--on-brand)}
.sectionbar button:hover,.sectionbar a.btnlink:hover,
.sectionbar button[aria-expanded="true"]{background:var(--brand-primary);color:var(--on-brand);border-color:var(--on-brand)}
.sectionbar button:focus-visible,.sectionbar a.btnlink:focus-visible{outline-color:var(--on-brand)}
.sectionbody{border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:var(--surface);overflow:hidden}
.sectionbody > .tablewrap{border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* ---- tables that become cards (.stacktable) -------------------------------------------------
   One table model for every record screen. Wide on a desktop; below 900 px (.stack-lg: 1200 px,
   .stack-sm: 600 px) each row becomes a card and each cell is labelled by its td[data-label]. */
/* .rtable is the look alone (a table that never stacks, or stacks its own way — the Xi list);
   .stacktable is the look plus the card stacking below. */
:is(table.rtable,table.stacktable){width:100%;border-collapse:collapse;background:var(--surface);font-variant-numeric:tabular-nums}
:is(table.rtable,table.stacktable) th{text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--text);
  padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-strong);background:var(--surface-2);vertical-align:bottom}
:is(table.rtable,table.stacktable) td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:break-word}
:is(table.rtable,table.stacktable) tbody tr:last-child td{border-bottom:none}
:is(table.rtable,table.stacktable) :is(td,th).rownum{width:3rem;text-align:center;color:var(--text-muted);white-space:nowrap}
:is(table.rtable,table.stacktable) td .cellactions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-1)}
:is(table.rtable,table.stacktable) tr.placeholder td{color:var(--text-muted)}
:is(table.rtable,table.stacktable) tr.deepfocus td{background:var(--tint)}

/* the stacked card, written once and applied at three widths */
@media screen and (max-width:899.98px){
  table.stacktable:not(.stack-sm){display:block}
  table.stacktable:not(.stack-sm) thead{display:none}
  table.stacktable:not(.stack-sm) tbody{display:block;padding:var(--space-2)}
  table.stacktable:not(.stack-sm) tr{display:block;border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface-2);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
  table.stacktable:not(.stack-sm) tr:last-child{margin-bottom:0}
  table.stacktable:not(.stack-sm) td{display:block;border:0;padding:var(--space-1) 0;min-width:0;text-align:left;width:auto;overflow-wrap:anywhere}
  table.stacktable:not(.stack-sm) td.rownum{display:inline-block;width:auto;text-align:left;font-size:var(--fs-xs);font-weight:600}
  table.stacktable:not(.stack-sm) td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-2xs);
    font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:1px}
  table.stacktable:not(.stack-sm) td:empty{display:none}
}
@media screen and (min-width:900px) and (max-width:1199.98px){
  table.stacktable.stack-lg{display:block}
  table.stacktable.stack-lg thead{display:none}
  table.stacktable.stack-lg tbody{display:block;padding:var(--space-2)}
  table.stacktable.stack-lg tr{display:block;border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface-2);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
  table.stacktable.stack-lg tr:last-child{margin-bottom:0}
  table.stacktable.stack-lg td{display:block;border:0;padding:var(--space-1) 0;min-width:0;text-align:left;width:auto;overflow-wrap:anywhere}
  table.stacktable.stack-lg td.rownum{display:inline-block;width:auto;text-align:left;font-size:var(--fs-xs);font-weight:600}
  table.stacktable.stack-lg td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-2xs);
    font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:1px}
  table.stacktable.stack-lg td:empty{display:none}
}
@media screen and (max-width:599.98px){
  table.stacktable.stack-sm{display:block}
  table.stacktable.stack-sm thead{display:none}
  table.stacktable.stack-sm tbody{display:block;padding:var(--space-2)}
  table.stacktable.stack-sm tr{display:block;border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface-2);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
  table.stacktable.stack-sm tr:last-child{margin-bottom:0}
  table.stacktable.stack-sm td{display:block;border:0;padding:var(--space-1) 0;min-width:0;text-align:left;width:auto;overflow-wrap:anywhere}
  table.stacktable.stack-sm td.rownum{display:inline-block;width:auto;text-align:left;font-size:var(--fs-xs);font-weight:600}
  table.stacktable.stack-sm td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-2xs);
    font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:1px}
  table.stacktable.stack-sm td:empty{display:none}
}

/* ---- the status / criteria box (.stagestatus) ----------------------------------------------
   Same anatomy as v3's .criteria: computed status, never a control. The ●/○ list is the
   index.html .gatelist (glyph + colour, survives greyscale and print). */
.stagestatus{margin-top:var(--space-6);border-radius:var(--radius-lg);padding:var(--space-4);
  border:1px solid var(--border);border-left:4px solid var(--border-strong);background:var(--surface-2)}
.stagestatus.complete{background:var(--success-bg);border-color:var(--success);border-left-color:var(--success)}
.stagestatus.ready{border-left-color:var(--primary)}
.stagestatus h3{margin:0 0 var(--space-1);font-size:var(--fs-md);font-weight:600}
.stagestatus .statusline{font-size:var(--fs-base);font-weight:600;margin:0 0 var(--space-1)}
.stagestatus .gatelist + .statusline{margin-top:var(--space-3)}
.stagestatus.complete .statusline,.stagestatus.complete h3{color:var(--success)}
.stagestatus .statusnote{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--space-2) 0 0}
.stagestatus.complete .statusnote{color:var(--success)}
.stagestatus .gatelist{margin-top:var(--space-2)}
.stagestatus .gatelist li{color:var(--text)}
.stagestatus .gatelist li::before{color:var(--text-muted)}
.stagestatus .gatelist li.ok{color:var(--success)}
.stagestatus .twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--space-4);align-items:start}

/* ---- requirement groups, documents, stamps -------------------------------------------------- */
.reqgroup{margin-top:var(--space-5)}
.reqgroup > h3{font-size:var(--fs-md);font-weight:600;margin:0 0 var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}
.reqgroup > h3 .count{font-size:var(--fs-sm);color:var(--text-muted);margin-left:var(--space-2)}
.reqgroup .groupnote{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--space-2) 0 0;max-width:52rem}
.doclist{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.docrow{display:flex;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;
  padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2)}
.docrow .docname{font-weight:600;flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
.docrow .docdate,.docrow .docmeta{font-size:var(--fs-sm);color:var(--text-muted)}
.docrow .docactions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-left:auto}
.docrow .docnote{flex:1 1 100%;font-size:var(--fs-sm)}
.docrow.withdrawn .docname{text-decoration:line-through;text-decoration-color:var(--border-strong);color:var(--text-muted)}
.stamp{display:block;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5;overflow-wrap:anywhere}
.stamp b{color:var(--text);font-weight:600}
.reasonnote{display:block;font-size:var(--fs-sm);color:var(--text);line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.reasonnote .rl{font-weight:600}

/* ---- inline forms (a <div role=group>, never a <form>: Enter must not submit-navigate) ------ */
.inlineform{margin-top:var(--space-3);padding:var(--space-4);border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--surface-2);max-width:52rem}
.inlineform .field{margin-bottom:var(--space-3)}
.inlineform .field input,.inlineform .field select,.inlineform .field textarea{max-width:none;width:100%}
.inlineform .formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:0 var(--space-4)}
.inlineform .row{margin-top:var(--space-2)}
.inlineform .formerr{margin:0 0 var(--space-3)}
.field .hint{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400}

/* ---- summary tiles (Stage 3 / Stage 5) ------------------------------------------------------ */
.sumtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--space-3);margin:var(--space-2) 0 var(--space-2)}
.sumtile{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--surface);box-shadow:var(--shadow-1);min-width:0}
.sumtile h3{margin:0 0 var(--space-3);font-size:var(--fs-md);font-weight:600}
.sumtile .sumcount{margin:var(--space-2) 0 0;text-align:right;font-weight:600;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.sumtile .sumbig{margin:0;font-size:var(--fs-2xl);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.sumtile .sumnote{margin:var(--space-2) 0 0;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.sumtile.statustile{background:var(--surface-2)}
.sumbar{display:block;height:12px;border-radius:var(--radius-pill);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border-strong);overflow:hidden}
.sumbar > span{display:block;height:100%;background:var(--success);border-radius:var(--radius-pill)}
.statusword{display:inline-block;font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);background:var(--warning-bg);color:var(--warning)}
.statusword.complete{background:var(--success-bg);color:var(--success)}

/* ---- status words in cells (glyph + text, never colour alone) -------------------------------- */
.stword{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:600;font-size:var(--fs-sm);line-height:1.4}
.stword.ok{color:var(--success)}
.stword.wait{color:var(--text)}
.stword.none{color:var(--text-muted);font-weight:500}
.stword .glyph{font-weight:700}

/* ---- deep-item focus: the row or card a link pointed at -------------------------------------- */
.deepfocus{box-shadow:0 0 0 2px var(--focus-ring)}

@media screen and (max-width:599.98px){
  /* 3 + 2 on a phone: three equal steps on the first row, the last two share the second */
  .stepper .step{flex:1 1 calc((100% - 2 * var(--space-2)) / 3);min-width:0;padding:var(--space-2)}
  .recordhead .rh-side{align-items:flex-start}
  .sectionbar{padding:var(--space-3)}
  .sectionbar > button,.sectionbar > a.btnlink{flex:1 1 100%}
}
@media (forced-colors:active){
  .sectionbar{border:1px solid CanvasText}
  .stagestatus,.sumtile,.docrow,.inlineform{border:1px solid CanvasText}
  .sumbar{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
  .sumbar > span{background:Highlight}
}
@media print{
  /* the navy bars would print as white text on no background: ink on paper instead */
  .sectionbar{background:transparent!important;color:var(--text)!important;border:0;border-bottom:2px solid var(--text);
    border-radius:0;padding:0 0 4pt;margin-top:12pt;break-after:avoid}
  .sectionbar h3,.sectionbar .barnote{color:var(--text)!important}
  .sectionbody{border:0;overflow:visible}
  .sumtile,.stagestatus,.docrow{break-inside:avoid}
  .sumbar,.statusword{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .inlineform{display:none!important}
  .recordhead .rh-links a{color:var(--text)!important}
}