/* EPC-Covered · canonical components · single generation.
   Rule: environment → region → professional object. Two raised levels, then hairlines. */

/* ---------- layout ---------- */
.ec-wrap{max-width:var(--ec-max);margin:0 auto;padding:0 var(--ec-s7)}
@media(max-width:760px){.ec-wrap{padding:0 var(--ec-s4)}}
.ec-kicker{font:600 11px/1 var(--ec-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ec-muted)}
.ec-lede{max-width:74ch;font-size:16.5px;line-height:1.6}
.ec-muted{color:var(--ec-muted)}
.ec-measure{max-width:var(--ec-measure)}

/* ---------- shell · ONE canonical banner ----------
   Every page renders this and only this. The row's inventory never changes
   between pages: brand, workspace switch, four labelled destinations, Source
   Start. Only the active state and Source Start's destination vary — the CTA
   used to be conditional, which meant the available width, and therefore the
   whole composition, changed from page to page.

   Geometry is tokenised so sticky offsets, scroll padding and the rail all read
   the same number. */
:root{--ec-hdr-h:76px;--ec-hdr-ctl:44px;--ec-hdr-z:40}
html{scroll-padding-top:calc(var(--ec-hdr-h) + 18px)}
[id]{scroll-margin-top:calc(var(--ec-hdr-h) + 18px)}
.ec-shell-ground{padding:12px var(--ec-s4) 8px;position:sticky;top:0;z-index:var(--ec-hdr-z);
  background:linear-gradient(var(--ec-page) 78%,rgba(255,255,255,0))}
.ec-shell{position:relative;border-radius:19px;background:var(--ec-pine);
  box-shadow:0 1px 0 rgba(250,248,240,.09) inset,0 6px 22px -14px rgba(20,32,24,.5);
  border:1px solid rgba(250,248,240,.08)}
/* Only the row and the rail are clipped to the shell's radius. Clipping the
   shell itself also clipped the sheet, which hangs below it. */
.ec-shell-clip{border-radius:18px;overflow:clip}
/* One row, three functional groups, deliberate space between them. */
.ec-shell-row{display:flex;align-items:center;gap:10px;min-height:calc(var(--ec-hdr-h) - 5px);
  padding:0 14px;flex-wrap:nowrap}
.ec-shell-brand{display:inline-flex;align-items:center;gap:10px;flex:none;
  text-decoration:none;color:inherit;padding:4px 6px 4px 2px;border-radius:10px}
.ec-shell-brand:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.ec-shell-brand .ec-wordmark{height:17px;width:auto;display:block}

/* Mark animation. The four bars are the record building up in its own
   ascending order; the brackets close around it. Once on load, ~600ms, then
   still. Hover moves the bars by the micro distance and holds — a mark that
   acknowledges the pointer, not a loop that competes with the page. */
.ec-mark-svg{overflow:visible}
.ec-mark-svg .ec-mark-bar{transform-box:fill-box;transform-origin:left center;
  animation:ec-mark-extend var(--ec-motion-narrative) var(--ec-ease-narrative) both}
.ec-mark-svg .ec-mark-bar:nth-of-type(1){animation-delay:calc(var(--ec-stagger)*0)}
.ec-mark-svg .ec-mark-bar:nth-of-type(2){animation-delay:calc(var(--ec-stagger)*1)}
.ec-mark-svg .ec-mark-bar:nth-of-type(3){animation-delay:calc(var(--ec-stagger)*2)}
.ec-mark-svg .ec-mark-bar:nth-of-type(4){animation-delay:calc(var(--ec-stagger)*3)}
.ec-mark-svg .ec-mark-bracket{stroke-dasharray:64;
  animation:ec-mark-close var(--ec-motion-narrative) var(--ec-ease-narrative) both}
.ec-mark-svg .ec-mark-bracket:nth-of-type(2){animation-delay:calc(var(--ec-stagger)*2)}
@keyframes ec-mark-extend{from{transform:scaleX(.14);opacity:.4}to{transform:none;opacity:1}}
@keyframes ec-mark-close{from{stroke-dashoffset:64;opacity:.5}to{stroke-dashoffset:0;opacity:1}}
/* The load animation fills `both`, so a hover *transition* on transform could
   never win. Hover replaces the animation rather than fighting it. */
.ec-shell-brand:hover .ec-mark-bar,.ec-shell-brand:focus-visible .ec-mark-bar{
  animation:ec-mark-nudge var(--ec-motion-standard) var(--ec-ease-object) forwards}
.ec-shell-brand:hover .ec-mark-bar:nth-of-type(2){animation-delay:calc(var(--ec-stagger)/2)}
.ec-shell-brand:hover .ec-mark-bar:nth-of-type(3){animation-delay:var(--ec-stagger)}
.ec-shell-brand:hover .ec-mark-bar:nth-of-type(4){animation-delay:calc(var(--ec-stagger)*1.5)}
@keyframes ec-mark-nudge{from{transform:none}to{transform:translateX(var(--ec-motion-d-micro))}}

/* ---------- workspace switch ----------
   A recessed well inside the pine, not a third pill group: the two workspaces
   are the product, the four destinations are places you go while in one. */
.ec-packs{display:inline-flex;align-items:center;flex:none;gap:2px;padding:3px;
  border-radius:12px;background:rgba(12,22,16,.34);border:1px solid rgba(250,248,240,.07)}
.ec-pack{position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:var(--ec-hdr-ctl);padding:8px 12px;border-radius:9px;text-decoration:none;
  font:600 13.5px/1 var(--ec-sans);color:rgba(250,248,240,.72);white-space:nowrap;
  transition:background .16s ease,color .16s ease}
.ec-pack img:not(.ec-pack-mark){width:18px;height:18px;opacity:.72;transition:opacity .16s ease}
.ec-pack:hover{background:rgba(250,248,240,.07);color:var(--ec-rev-text)}
.ec-pack:hover img{opacity:1}
.ec-pack:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
/* Active: a filled well, full-strength label AND a tinted indicator — three
   signals, so colour is never carrying the state alone. */
.ec-pack[aria-current="page"]{background:rgba(250,248,240,.11);color:var(--ec-rev-text);font-weight:700}
.ec-pack[aria-current="page"] img{opacity:1}
.ec-pack[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;
  height:2px;border-radius:2px;background:var(--ec-tint)}
.ec-pack-short{display:none}

/* ---------- destinations ---------- */
.ec-shell-nav{display:flex;align-items:center;gap:1px;min-width:0;flex:0 1 auto;margin-left:auto}
.ec-shell-cta{margin-left:0}
.ec-navpill{position:relative;display:inline-flex;align-items:center;gap:7px;
  min-height:var(--ec-hdr-ctl);padding:11px 11px;border-radius:9px;text-decoration:none;
  font:600 13.5px/1 var(--ec-sans);color:rgba(250,248,240,.78);white-space:nowrap;
  transition:background .16s ease,color .16s ease}
.ec-navpill img,.ec-navpill svg{width:16px;height:16px;flex:none;opacity:.78;transition:opacity .16s ease}
.ec-navpill:hover{background:rgba(250,248,240,.08);color:var(--ec-rev-text)}
.ec-navpill:hover img,.ec-navpill:hover svg{opacity:1}
.ec-navpill:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
/* Current page: weight plus an inset marker, never colour alone. */
.ec-navpill[aria-current="page"]{color:var(--ec-rev-text);font-weight:700;background:rgba(250,248,240,.07)}
.ec-navpill[aria-current="page"] img,.ec-navpill[aria-current="page"] svg{opacity:1}
.ec-navpill[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;
  height:2px;border-radius:2px;background:var(--ec-gold)}

/* ---------- primary action ----------
   Present on every page. A controlled rectangle, not a capsule, and sized to
   sit level with the other controls rather than dominate them. */
.ec-shell-cta{display:inline-flex;align-items:center;gap:8px;flex:none;
  min-height:var(--ec-hdr-ctl);padding:11px 15px;border-radius:11px;
  background:var(--ec-gold);border:1px solid var(--ec-gold);color:var(--ec-ink);
  font:600 13.5px/1 var(--ec-sans);text-decoration:none;white-space:nowrap;
  transition:background .16s ease}
.ec-shell-cta:hover{background:#eec25e}
.ec-shell-cta:focus-visible{outline:2px solid var(--ec-rev-text);outline-offset:2px}
.ec-shell-cta svg{flex:none}

/* ---------- signature rule ----------
   Owned by the header, never redrawn by a page: the logo's four bars laid on
   their side in the mark's own ascending proportions. A brand signature, not a
   progress indicator. */
.ec-shell-rail{display:flex;height:3px}
.ec-shell-rail i{display:block}

/* ---------- compact control ---------- */
.ec-menu-btn{display:none;align-items:center;gap:8px;flex:none;min-height:var(--ec-hdr-ctl);
  padding:10px 13px;border-radius:11px;background:rgba(250,248,240,.08);
  border:1px solid rgba(250,248,240,.16);color:var(--ec-rev-text);
  font:600 13.5px/1 var(--ec-sans);cursor:pointer;white-space:nowrap}
.ec-menu-btn:hover{background:rgba(250,248,240,.14)}
.ec-menu-btn:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.ec-menu-here{padding-left:9px;margin-left:1px;border-left:1px solid rgba(250,248,240,.22);
  font-weight:400;color:rgba(250,248,240,.72);max-width:16ch;overflow:hidden;text-overflow:ellipsis}

/* ---------- the sheet ---------- */
.ec-sheet-scrim{position:fixed;inset:0;z-index:1;background:transparent}
.ec-shell-row{position:relative;z-index:3}
.ec-shell-sheet{z-index:2}
.ec-shell-sheet[hidden],.ec-sheet-scrim[hidden]{display:none!important}
.ec-shell-sheet{position:absolute;right:10px;left:auto;width:min(340px,calc(100vw - 32px));top:calc(100% + 6px);z-index:2;
  display:flex;flex-direction:column;gap:2px;padding:10px;
  border-radius:14px;background:var(--ec-pine);border:1px solid rgba(250,248,240,.14);
  box-shadow:0 18px 40px -18px rgba(16,24,18,.7);max-height:78vh;overflow-y:auto}
.ec-sheet-h{margin:6px 4px 2px;font:600 10px/1.4 var(--ec-sans);letter-spacing:.15em;
  text-transform:uppercase;color:rgba(250,248,240,.45)}
.ec-shell-sheet .ec-navpill{width:100%;min-height:46px;border-radius:10px}
.ec-shell-sheet .ec-navpill[aria-current="page"]::after{left:11px;right:auto;width:18px}
@media(max-width:719px){
  .ec-sheet-scrim{background:rgba(16,24,18,.5)}
  html.ec-sheet-open,html.ec-sheet-open body{overflow:hidden}
}

/* ---------- responsive ladder ----------
   Measured, not guessed: at each threshold the row loses the group whose
   absence costs the least, and the label is never shrunk to force a fit. */
@media(max-width:1279px){
  .ec-navpill{padding:11px 9px;gap:6px}
  .ec-pack{padding:8px 10px}
}
@media(max-width:1179px){
  /* Home has gone from the row and Certificate Portfolio is shortened to
     Portfolio there, so the three remaining destinations now fit at widths the
     old four could not. Below this the nav yields to the Follow dropdown, which
     carries the same destinations under "Go to" — never a row of bare glyphs.
     The workspace switch and Source Start stay at every width. */
  .ec-shell-nav{display:none}
  .ec-menu-btn{display:inline-flex;margin-left:auto}
}
@media(max-width:839px){
  .ec-pack:not([aria-current="page"]) .ec-pack-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media(max-width:855px){
  /* Short labels, not hidden ones: the current workspace must stay legible, and
     the full name is still the accessible name via title + the sheet. */
  .ec-pack-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-pack[aria-current="page"] .ec-pack-short{display:inline}
}
@media(max-width:719px){
  .ec-shell-ground{padding:8px 10px 6px}
  .ec-shell-row{gap:8px;padding:0 10px;min-height:64px}
  .ec-shell-brand .ec-wordmark{height:15px}
  .ec-menu-here{display:none}
  .ec-shell-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-shell-cta{padding:11px 13px}
  .ec-packs{padding:2px}
  .ec-pack{padding:8px 9px}
}
@media(max-width:519px){
  /* The mark alone: the wordmark is the first thing that can go without losing
     a destination. */
  .ec-shell-brand .ec-wordmark{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ec-pack,.ec-navpill,.ec-shell-cta,.ec-menu-btn{transition:none}
}

/* ---------- active job strip ---------- */
.ec-jobstrip-ground{padding-top:22px;padding-bottom:var(--ec-s4)}
.ec-jobstrip{position:relative;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:14px 18px 14px 20px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-strip);background:var(--ec-white);box-shadow:var(--ec-shadow-object)}
.ec-jobstrip::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:3px;border-radius:var(--ec-r-pill);background:var(--ec-accent,var(--ec-gold))}
.ec-jobstrip .ec-tile{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--ec-r-tile);background:var(--ec-pine-raised)}
.ec-jobstrip .ec-tile img{width:23px;height:23px}
.ec-jobstrip .ec-jobid{display:flex;align-items:center;gap:13px;min-width:0}
.ec-jobstrip .ec-ref{font:600 12.5px/1 var(--ec-mono);letter-spacing:.08em;color:var(--ec-muted)}
.ec-jobstrip .ec-addr{font-family:var(--ec-serif);font-size:18px;font-weight:600;color:var(--ec-heading)}
.ec-jobstrip .ec-jobmeta{margin-top:3px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;color:var(--ec-muted)}
.ec-jobstrip .ec-localdot{display:inline-flex;align-items:center;gap:6px}
.ec-jobstrip .ec-localdot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-gold)}
.ec-jobstrip .ec-jobactions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- buttons ---------- */
.ec-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:10px 14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);font:600 13px/1 var(--ec-sans);color:var(--ec-heading);text-decoration:none}
.ec-btn:hover{border-color:#8b9689}
.ec-btn svg{width:15px;height:15px}
.ec-btn-primary{border-color:var(--ec-gold);background:var(--ec-gold);color:var(--ec-ink)}
.ec-btn-primary:hover{border-color:var(--ec-gold);background:#eec25e;color:var(--ec-ink)}
.ec-btn-pine{border-color:var(--ec-pine);background:var(--ec-pine);color:var(--ec-rev-text)}
.ec-btn-pine:hover{background:var(--ec-pine-raised);color:var(--ec-rev-text)}
.ec-btn-quiet{background:var(--ec-cream-raised)}
.ec-btn-danger{border-color:var(--ec-coral);background:var(--ec-coral);color:#fff}
.ec-btn[disabled]{opacity:.55;cursor:not-allowed}
.ec-btn[disabled]:hover{border-color:var(--ec-rule)}

/* ---------- chips / state ---------- */
.ec-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--ec-r-chip);font:600 11.5px/1.3 var(--ec-sans);border:1px solid var(--ec-rule);background:var(--ec-cream-raised);color:var(--ec-muted)}
.ec-chip svg{width:12px;height:12px}
.ec-chip-gold{border-color:var(--ec-gold-line);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-chip-green{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-chip-coral{border-color:var(--ec-coral-line);background:var(--ec-coral-soft);color:var(--ec-coral-ink)}
.ec-chip-dashed{border-style:dashed}
.ec-idref{font:600 10.5px/1 var(--ec-mono);letter-spacing:.08em;padding:3px 5px;border-radius:var(--ec-r-chip);border:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised);color:var(--ec-muted)}
.ec-idref-gold{border-color:var(--ec-gold-line);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-idref-green{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-idref-coral{border-color:var(--ec-coral-line);background:var(--ec-coral-soft);color:var(--ec-coral-ink)}

/* ---------- regions & objects ---------- */
.ec-region{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-cream-raised)}
.ec-object{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);box-shadow:var(--ec-shadow-surface);overflow:clip}
.ec-object-head{padding:17px 20px 15px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-gold-ground)}
.ec-object-head.ec-retro{background:var(--ec-green-ground)}
.ec-block{padding:17px 20px;border-top:1px solid var(--ec-rule-soft)}
.ec-block:first-of-type{border-top:0}
.ec-block-q{font-family:var(--ec-serif);font-size:17px;font-weight:600;color:var(--ec-heading)}
.ec-block-label{font:600 10px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted)}
.ec-serifbody{max-width:70ch;font-family:var(--ec-serif);font-size:16.5px;line-height:1.6}
.ec-await{padding:12px 14px;border:1px dashed var(--ec-gold);border-radius:var(--ec-r-control);background:var(--ec-gold-soft);font:600 14.5px/1.5 var(--ec-sans);color:var(--ec-gold-deep)}
.ec-missing{padding:12px 14px;border:1px dashed var(--ec-coral);border-radius:var(--ec-r-control);background:var(--ec-coral-soft);font:600 14.5px/1.5 var(--ec-sans);color:var(--ec-coral-ink)}

/* ---------- spine ---------- */
.ec-spine-row{position:relative;width:calc(100% - 16px);margin:2px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 14px 12px 17px;text-align:left;border:0;border-radius:var(--ec-r-panel);background:transparent}
.ec-spine-row>*{align-self:flex-start}
.ec-spine-row:hover{background:var(--ec-hover)}
.ec-spine-row[aria-current="true"]{background:var(--ec-white);box-shadow:var(--ec-shadow-surface)}
.ec-spine-row[aria-current="true"]::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:3px;border-radius:var(--ec-r-pill);background:var(--ec-accent,var(--ec-gold))}

/* ---------- coach ---------- */
.ec-coach{display:flex;gap:11px;padding:12px 14px;border-radius:var(--ec-r-control);border:1px solid var(--ec-gold-line);border-left:4px solid var(--ec-gold);background:var(--ec-gold-soft)}
.ec-coach.ec-retro{border-color:var(--ec-green-line);border-left-color:var(--ec-green);background:var(--ec-green-soft)}
.ec-coach svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--ec-gold-ink)}
.ec-coach.ec-retro svg{color:var(--ec-green-ink)}
.ec-coach b.ec-coach-tag{display:block;margin-bottom:3px;font:600 10.5px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-gold-ink)}
.ec-coach.ec-retro b.ec-coach-tag{color:var(--ec-green-ink)}
.ec-coach p{font-size:13.5px;line-height:1.55}

/* ---------- counts ---------- */
.ec-counts{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline}
.ec-counts b{font:600 19px/1 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-counts span{font-size:13px;color:var(--ec-muted)}
.ec-counts-note{flex:1 1 100%;font-size:12px;line-height:1.5;color:var(--ec-muted)}

/* ---------- destination pill ---------- */
.ec-dest{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-pill);background:var(--ec-white);font-size:12.5px;color:var(--ec-ink)}
.ec-dest svg{width:15px;height:15px;color:var(--ec-muted)}

/* ---------- document ---------- */
.ec-doc{max-width:760px;margin:0 auto;background:var(--ec-white);border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);padding:40px 44px;box-shadow:var(--ec-shadow-doc)}
@media(max-width:520px){.ec-doc{padding:24px 20px}}
.ec-doc-masthead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:10px;border-bottom:2px solid var(--ec-pine)}
.ec-doc h3.ec-doc-title{font-size:21px}
/* Provenance grid: the facts a reader checks first (job, property, assessor,
   inspection date, revision, state), scannable rather than in a sentence. */
.ec-doc-prov{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px 18px;margin:14px 0 4px;padding:12px 0;border-top:1px solid var(--ec-rule);border-bottom:1px solid var(--ec-rule)}
.ec-doc-prov div{font:12px/1.5 var(--ec-sans)}
.ec-doc-prov b{display:block;font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted)}
.ec-doc-section{margin:20px 0 5px;font:600 10.5px/1 var(--ec-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ec-muted)}
.ec-doc-entry{padding-bottom:8px;border-bottom:1px solid var(--ec-pine);font-family:var(--ec-serif);font-size:18px;font-weight:600;color:var(--ec-heading)}
.ec-doc-body{margin:12px 0;font-size:12.5px;line-height:1.7;max-width:var(--ec-measure)}
.ec-doc-foot{padding-top:11px;border-top:1px solid var(--ec-rule);font-size:11px;line-height:1.6;color:var(--ec-muted)}
@media(max-width:640px){.ec-doc{padding:26px 20px}}

#ec-print-sheet{display:none}

/* ---------- print: the document, not the application ----------
   ec-shell.js clones the visible document surface into #ec-print-sheet and sets
   .ec-printing on <html>. Everything else in <body> is removed from the printed
   page. If no document surface exists (landing, library, trust) the class is
   never set and the page prints as it appears, minus shell chrome. */
@media print{
  @page{margin:16mm}
  html,body{background:#fff!important}
  body{padding:0!important}
  .ec-shell-ground,.ec-shell,.ec-footer,.ec-jobstrip-ground,
  .ec-tabs,.ec-menu-btn,.ec-sheet,.ec-overlay,#ec-sprite{display:none!important}
  a[href]::after{content:none!important}
  .ec-printing body>*{display:none!important}
  .ec-printing body>#ec-print-sheet{display:block!important}
  #ec-print-sheet .ec-doc{max-width:none;margin:0;border:0;border-radius:0;
    box-shadow:none;padding:0;background:#fff}
  .ec-doc,.ec-doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Provenance grid: the facts a reader checks first (job, property, assessor,
   inspection date, revision, state), scannable rather than in a sentence. */
.ec-doc-prov{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px 18px;margin:14px 0 4px;padding:12px 0;border-top:1px solid var(--ec-rule);border-bottom:1px solid var(--ec-rule)}
.ec-doc-prov div{font:12px/1.5 var(--ec-sans)}
.ec-doc-prov b{display:block;font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted)}
.ec-doc-section{break-after:avoid;page-break-after:avoid}
  .ec-doc-entry{break-after:avoid;page-break-after:avoid;break-inside:avoid}
  .ec-doc-body{orphans:2;widows:2}
  .ec-doc-foot{break-before:avoid;page-break-before:avoid}
}

/* ---------- exceptions ---------- */
.ec-exception{display:flex;flex-wrap:wrap;gap:11px;align-items:center;justify-content:space-between;padding:13px 16px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-control);background:var(--ec-gold-ground)}
.ec-exception.ec-needed{border-color:var(--ec-coral-line);background:var(--ec-coral-ground)}

/* ---------- forms ---------- */
.ec-field label{display:block;margin-bottom:6px;font-size:13px;color:var(--ec-muted)}
.ec-input,.ec-textarea{width:100%;padding:11px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);font:15px/1.5 var(--ec-sans)}
.ec-textarea{resize:vertical}
.ec-segbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:9px 12px;border-radius:var(--ec-r-control);border:1px solid var(--ec-rule);background:var(--ec-white);font:600 13px/1 var(--ec-sans);color:var(--ec-muted)}
.ec-segbtn[aria-pressed="true"]{border-color:var(--ec-gold-ink);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-segbtn.ec-retro[aria-pressed="true"]{border-color:var(--ec-green-ink);background:var(--ec-green-soft);color:var(--ec-green-ink)}

/* ---------- dialogs ---------- */
.ec-dialog{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);padding:0;max-width:520px;width:calc(100% - 32px);background:var(--ec-white);box-shadow:var(--ec-shadow-floating)}
.ec-dialog::backdrop{background:rgba(28,44,33,.45)}
.ec-dialog-head{padding:15px 18px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}
.ec-dialog-body{padding:16px 18px;font-size:14px;line-height:1.6}
.ec-dialog-foot{padding:13px 18px;border-top:1px solid var(--ec-rule-soft);display:flex;gap:9px;justify-content:flex-end;background:var(--ec-cream-raised)}

/* ---------- workspace macro ---------- */
/* 250 / flexible / 268 rather than 292 / flexible / 300: three regions now fit
   from 1080px, the same width the shell nav needs. At 1240 the third region was
   dropping to a full-width band under the object on the most common laptop
   widths, so the promised hierarchy almost never appeared. */
/* Named areas, so each pack can expose a different geometry from one system.
   Both packs previously used identical column widths with a Record Coach in the
   third slot — which is exactly "matching dashboards with different names". */
.ec-ws{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;
  grid-template-areas:"spine main decide";gap:0;
  border-top:1px solid var(--ec-rule);background:var(--ec-record);align-items:start}
/* align-self:start replaces min-height:540px. The rail was 540px tall whatever
   it held, so a two-matter record showed a column of dead cream below the list
   — the emptiness read as something missing rather than as a short record. */
.ec-ws-spine{grid-area:spine;border-right:1px solid var(--ec-rule);background:var(--ec-cream-raised);
  display:flex;flex-direction:column;align-self:start;position:sticky;top:0;max-height:100vh;overflow-y:auto}
.ec-ws-main{grid-area:main;padding:18px;min-width:0}
.ec-ws-decide{grid-area:decide;border-left:1px solid var(--ec-rule);background:var(--ec-cream-raised);
  align-self:start;position:sticky;top:0;max-height:100vh;overflow-y:auto}
.ec-ws-coach{grid-area:decide;border-left:1px solid var(--ec-rule);background:var(--ec-cream-raised)}

/* EPC is a LEDGER: a comparison that holds still while the reason is written.
   The strip sticks to the top of the working column, so the three accounts stay
   readable while the assessor types below them — the product's central use case
   stops depending on memory. */
body[data-ec-page="epc"] .ec-cmpstrip{position:sticky;top:8px;z-index:6;margin:0 0 14px;
  background:var(--ec-white);box-shadow:0 8px 18px -14px rgba(23,49,38,.55)}
/* The matter is the containing block, so the strip stays put through the source
   rows, the treatment field and the reason field — the comparison is readable
   for the whole time the assessor is deciding what to write. */
body[data-ec-page="epc"] .ec-object{position:relative}

/* Retrofit is a TRAIL: a narrower navigator, a wider dossier and a broader
   handover lane. Different proportions and a lane rule rather than a tint, so
   the two packs are told apart in greyscale with the labels removed. */
body[data-ec-page="retrofit"] .ec-ws{grid-template-columns:230px minmax(0,1fr) 330px}
body[data-ec-page="retrofit"] .ec-ws-decide{border-left:3px solid var(--ec-green-line);background:var(--ec-green-ground)}
body[data-ec-page="retrofit"] .ec-ws-main{padding:18px 18px 18px 22px;border-left:0}
/* The dossier reads as a sequence: each block hangs off one vertical trail. */
body[data-ec-page="retrofit"] .ec-object>.ec-block{border-left:2px solid var(--ec-rule-soft);margin-left:2px}
body[data-ec-page="retrofit"] .ec-object>.ec-block:hover{border-left-color:var(--ec-green-line)}

/* --- the destination pane: a projection, never a second narrative --- */
.ec-dest-pane{display:flex;flex-direction:column}
.ec-dest-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;
  padding:13px 15px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-dest-h h2{font-size:15px}
.ec-dest-b{padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.ec-dest-state{display:flex;flex-direction:column;gap:6px}
.ec-dest-line{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5}
.ec-dest-line svg{flex:none;margin-top:2px}
.ec-dest-line b{font-weight:600}
.ec-dest-ex{padding:11px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-dest-ex p.h{padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid var(--ec-pine);
  font-family:var(--ec-serif);font-weight:600;font-size:12.5px}
.ec-dest-ex p.t{font-size:12px;line-height:1.6}
.ec-dest-ex q{font-family:var(--ec-serif);font-size:13px;line-height:1.55;quotes:"“" "”"}
.ec-dest-none{padding:10px 12px;border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-panel);
  background:var(--ec-inset);font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
/* Coach is a contextual note under the destination, not a second panel of
   competing red banners. */
.ec-dest-coach{margin:0 15px 15px;padding:11px 12px;border-top:1px solid var(--ec-rule-soft)}
.ec-dest-coach p{font-size:12.5px;line-height:1.55;color:var(--ec-muted)}

@media(max-width:1279px){
  /* The destination pane folds under the working column before the navigator
     does: knowing WHERE a matter lands matters less than being able to work. */
  .ec-ws,body[data-ec-page="retrofit"] .ec-ws{grid-template-columns:230px minmax(0,1fr);
    grid-template-areas:"spine main" "spine decide"}
  .ec-ws-decide,.ec-ws-coach{border-left:0;border-top:1px solid var(--ec-rule)}
  body[data-ec-page="retrofit"] .ec-ws-decide{border-left:0;border-top:3px solid var(--ec-green-line)}
  .ec-ws-decide{position:static;max-height:none}
}
@media(max-width:859px){
  .ec-ws,body[data-ec-page="retrofit"] .ec-ws{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"spine" "main" "decide"}
  .ec-ws-spine{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--ec-rule)}
  body[data-ec-page="epc"] .ec-cmpstrip{position:static}
}

@media(max-width:1079px){
  .ec-ws{grid-template-columns:250px minmax(0,1fr)}
  .ec-ws-coach{grid-column:1/-1;border-left:0;border-top:1px solid var(--ec-rule)}
}
@media(max-width:899px){
  .ec-ws{grid-template-columns:minmax(0,1fr)}
  .ec-ws-spine{border-right:0;border-bottom:1px solid var(--ec-rule);min-height:0}
}



/* ================= POLISH PASS ================= */

/* ---------- sticky compact shell ----------
   Same colour, same geometry, less height. Strapline, feedback and the
   secondary CTA label drop; brand, destinations and Home survive. */
/* The banner keeps ONE height at every scroll position. Shrinking it on scroll
   moved every sticky offset on the page mid-interaction, and the rules below it
   referenced a strapline, a feedback link and a rail offset that the canonical
   component no longer has. Only the surround tightens. */
.ec-shell-ground{transition:padding .16s ease}
body.ec-scrolled .ec-shell-ground{padding-top:8px;padding-bottom:6px}
body.ec-scrolled .ec-shell{box-shadow:0 1px 0 rgba(250,248,240,.09) inset,0 10px 26px -16px rgba(20,32,24,.62)}

/* ---------- ledger (compact professional list) ----------
   Replaces card-per-row. One continuous surface, hairline separated. */
.ec-ledger{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden}
.ec-ledger-row .ec-ledger-sub{margin-top:0}
/* Two columns, not three: inside a 280px spine a third column crushes the
   title to one word per line. Identifier gutter, then everything else flows. */
.ec-ledger-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 11px;align-items:start;width:100%;padding:10px 13px;border:0;border-top:1px solid var(--ec-rule-soft);background:transparent;text-align:left}
.ec-ledger-row>code{margin-top:1px}
.ec-ledger-row .ec-ledger-meta{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ec-ledger-row:first-child{border-top:0}
.ec-ledger-row:hover{background:var(--ec-cream-raised)}
.ec-ledger-row[aria-current="true"]{background:var(--ec-cream-raised);box-shadow:inset 3px 0 0 var(--ec-accent,var(--ec-gold))}
.ec-ledger-row .ec-ledger-title{font-size:14px;line-height:1.35;color:var(--ec-ink)}
.ec-ledger-row[aria-current="true"] .ec-ledger-title{font-weight:600;color:var(--ec-heading)}
.ec-ledger-row .ec-ledger-sub{margin-top:2px;font-size:12px;color:var(--ec-muted)}
.ec-ledger-group{padding:9px 14px 7px;background:var(--ec-cream-raised);border-top:1px solid var(--ec-rule-soft);font:600 10px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted)}
.ec-ledger-group:first-child{border-top:0}

/* ---------- source row (role and relationship are different things) ---------- */
.ec-src{padding:13px 0;border-top:1px solid var(--ec-rule-soft)}
.ec-src-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:baseline}
.ec-src-value{font:600 16px/1 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.ec-src-facts{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--ec-muted)}
.ec-src-facts b{font-weight:600;color:var(--ec-ink)}
.ec-src-ctl{margin-top:10px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.ec-src-ctl>div{min-width:0}
.ec-src-ctl .ec-block-label{margin-bottom:5px;display:block}
.ec-rel{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--ec-r-pill);border:1px dashed var(--ec-gold-line);background:var(--ec-gold-soft);font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-rel svg{width:12px;height:12px}

/* ---------- authored-by-you field ---------- */
.ec-authored{padding:15px 16px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-panel);background:var(--ec-gold-ground)}
.ec-authored.ec-retro{border-color:var(--ec-green-line);background:var(--ec-green-ground)}
.ec-authored .ec-textarea{font-family:var(--ec-serif);font-size:16px;line-height:1.6;max-width:var(--ec-measure)}
.ec-yourwords{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;font:600 10px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-gold-ink)}
.ec-authored.ec-retro .ec-yourwords{color:var(--ec-green-ink)}
.ec-savestate{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ec-muted)}
.ec-savestate::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ec-glyph)}
.ec-savestate[data-state="saved"]::before{background:var(--ec-green)}
.ec-savestate[data-state="saving"]::before{background:var(--ec-gold)}

/* ---------- trust page section nav ---------- */
.ec-sectionnav{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--ec-rule)}
.ec-sectionnav a{padding:7px 12px;font-size:13px;color:var(--ec-muted);text-decoration:none;border-left:3px solid transparent;margin-left:-2px}
.ec-sectionnav a:hover{color:var(--ec-heading);background:var(--ec-cream-raised)}
.ec-sectionnav a[aria-current="true"]{color:var(--ec-heading);font-weight:600;border-left-color:var(--ec-gold)}
@media(max-width:899px){.ec-sectionnav{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;border-bottom:1px solid var(--ec-rule);padding-bottom:8px}.ec-sectionnav a{border-left:0;border-bottom:3px solid transparent;margin-left:0}.ec-sectionnav a[aria-current="true"]{border-left-color:transparent;border-bottom-color:var(--ec-gold)}}

/* ---------- instrument index row ----------
   Was five inline-styled columns: at tablet width the purpose text crushed the
   same way the spine ledger did. Two columns of contract, wrapping to one. */
.ec-inst-row{display:grid;grid-template-columns:44px minmax(0,1.5fr) minmax(0,1.6fr) auto;gap:8px 16px;align-items:start;width:100%;padding:14px 16px;border:0;border-top:1px solid var(--ec-rule-soft);background:var(--ec-panel);text-align:left}
.ec-inst-row:first-child{border-top:0}
.ec-inst-row:hover{background:var(--ec-hover)}
.ec-inst-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-tile);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-inst-mark.ec-retro{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-inst-mark.ec-admin{border-color:var(--ec-rule);background:var(--ec-cream-raised);color:var(--ec-muted);border-style:dashed}
.ec-inst-name{display:block;font-size:15px;font-weight:600;color:var(--ec-heading)}
.ec-inst-what{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ec-muted);max-width:44ch}
.ec-inst-contract{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px 16px}
.ec-inst-contract .ec-block-label{display:block;margin-bottom:3px}
.ec-inst-contract span.v{font-size:12.5px;line-height:1.45;color:var(--ec-ink)}
.ec-inst-go{display:flex;flex-direction:column;gap:7px;align-items:flex-end;white-space:nowrap}
.ec-inst-open{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ec-green-ink)}
@media(max-width:980px){
  .ec-inst-row{grid-template-columns:44px minmax(0,1fr)}
  .ec-inst-row .ec-inst-contract{grid-column:2}
  .ec-inst-row .ec-inst-go{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

/* Quiet destructive: a delete sitting at the same weight as "Open the
   workspace" invites the wrong click. Recedes until addressed, then commits
   to coral — colour is not carrying it alone, the dialog does. */
.ec-btn-danger-quiet{border-color:var(--ec-rule);background:var(--ec-cream-raised);color:var(--ec-muted)}
.ec-btn-danger-quiet:hover,.ec-btn-danger-quiet:focus-visible{border-color:var(--ec-coral);background:var(--ec-coral-soft);color:var(--ec-coral-ink)}

/* Artefact identity. The legacy desk said "F01 kept with this job" — a concrete
   reference answers "where did the result go?" better than prose alone. */
.ec-artefact{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 11.5px/1 var(--ec-mono);letter-spacing:.04em;color:var(--ec-green-ink)}
.ec-inst-row .ec-artefact svg{width:12px;height:12px;flex:none}

/* ---------- scope boundary table (landing) ---------- */
/* 4 columns, explicitly. auto-fit picked 3 for 4 items and orphaned the last
   one beside ~570px of blank cell — a column count must divide the item count. */
.ec-scope{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ec-rule);border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);overflow:hidden}
@media(max-width:1080px){.ec-scope{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ec-scope{grid-template-columns:1fr}}
.ec-scope-col{padding:18px 18px 16px;background:var(--ec-panel);display:flex;flex-direction:column;gap:10px}
.ec-scope-col .ec-block-label{display:flex;align-items:center;gap:8px}
.ec-scope-col ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5}
.ec-scope-col li::marker{color:var(--ec-rule)}
.ec-scope-note{margin-top:auto;padding-top:10px;border-top:1px solid var(--ec-rule-soft);font-size:12.5px;line-height:1.5;color:var(--ec-muted)}
/* Tone carries reinforcement only: the heading icon and wording already say it. */
.ec-scope-yes{background:var(--ec-green-ground)}
.ec-scope-yes .ec-block-label{color:var(--ec-green-ink)}
.ec-scope-no .ec-block-label{color:var(--ec-coral-ink)}


/* Skip link — visible only on focus, and it must not be the first thing a
   sighted user sees. */
.ec-skip{position:absolute;left:-9999px;top:0;z-index:60;padding:11px 16px;border-radius:0 0 var(--ec-r-control) 0;background:var(--ec-pine);color:var(--ec-rev-text);font:600 13.5px/1 var(--ec-sans);text-decoration:none}
.ec-skip:focus{left:0;color:var(--ec-rev-text)}

/* ---------- stage rail ----------
   Five stages, not nine. The rail is navigation WITHIN one job, so it sits
   under the job strip and never in the shell — a stage is not a destination. */
.ec-stagerail{display:flex;gap:2px;padding:0 var(--ec-s7);border-bottom:1px solid var(--ec-rule);background:var(--ec-cream-raised);overflow-x:auto;scrollbar-width:none}
.ec-stagerail::-webkit-scrollbar{display:none}
.ec-stagetab{position:relative;display:flex;align-items:center;gap:8px;min-height:46px;padding:12px 14px;border:0;background:transparent;font:600 13.5px/1 var(--ec-sans);color:var(--ec-muted);white-space:nowrap;cursor:pointer}
.ec-stagetab:hover{color:var(--ec-heading);background:var(--ec-white)}
.ec-stagetab[aria-selected="true"]{color:var(--ec-heading);background:var(--ec-white)}
.ec-stagetab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:var(--ec-r-pill) var(--ec-r-pill) 0 0;background:var(--ec-accent,var(--ec-gold))}
.ec-stagetab .ec-stagenum{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:var(--ec-r-chip);background:var(--ec-cream);font:600 11px/1 var(--ec-mono);color:var(--ec-muted)}
.ec-stagetab[aria-selected="true"] .ec-stagenum{background:var(--ec-accent-soft,var(--ec-gold-soft));color:var(--ec-accent-ink,var(--ec-gold-ink))}
.ec-stagetab .ec-stagecount{padding:2px 6px;border-radius:var(--ec-r-chip);background:var(--ec-coral-soft);font:600 11.5px/1.4 var(--ec-sans);color:var(--ec-coral-ink)}
.ec-stage[hidden]{display:none}
@media(max-width:639px){.ec-stagerail{padding:0 12px}.ec-stagetab{padding:12px 11px;font-size:12.5px}.ec-stagetab .ec-stagelabel{display:none}.ec-stagetab[aria-selected="true"] .ec-stagelabel{display:inline}}

/* ---------- register (sources / evidence as real record objects) ---------- */
.ec-reg{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden}
.ec-reg-row{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(0,1.4fr) auto;gap:12px 16px;padding:15px 18px;border-top:1px solid var(--ec-rule-soft);align-items:start}
.ec-reg-row:first-of-type{border-top:0}
.ec-reg-row:hover{background:var(--ec-cream-raised)}
.ec-reg-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.ec-reg-name{font-size:14.5px;font-weight:600;color:var(--ec-heading)}
.ec-reg-cap{font-size:13px;line-height:1.5;color:var(--ec-ink)}
.ec-reg-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ec-muted)}
.ec-reg-links{min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.ec-reg-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ec-reg-head{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(0,1.4fr) auto;gap:16px;padding:11px 18px;background:var(--ec-pine);color:var(--ec-rev-text)}
.ec-reg-head span{font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ec-rev-muted)}
@media(max-width:899px){
  .ec-reg-head{display:none}
  .ec-reg-row{grid-template-columns:auto minmax(0,1fr);gap:9px 12px}
  .ec-reg-links,.ec-reg-act{grid-column:2}
  .ec-reg-act{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}

/* A chip that DOES something carries the full target in its own box. Two
   cheaper tricks failed: an invisible ±5px extension left 42.5px because later
   siblings in the register row captured the last pixel, and enlarging it to ±6px
   with a z-index still lost the bottom row, because .ec-reg clips with
   overflow:hidden and a pseudo-element cannot escape a clip. A real 44px box is
   immune to both. Static chips are untouched. */
button.ec-chip{cursor:pointer;min-height:46px;padding:11px 13px}
button.ec-chip:hover{border-color:var(--ec-gold);background:var(--ec-gold-ground)}

/* file truthfulness — a reference is not an upload */
.ec-filestate{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--ec-r-chip);border:1px dashed var(--ec-rule);background:var(--ec-cream);font:600 11px/1.4 var(--ec-sans);color:var(--ec-muted)}

/* ---------- review groups (typed, not one flat list) ---------- */
.ec-revgroup{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden;margin-bottom:12px}
.ec-revgroup>h3{display:flex;align-items:center;gap:9px;padding:12px 16px;background:var(--ec-cream-raised);border-bottom:1px solid var(--ec-rule-soft);font-size:14.5px}
.ec-revgroup>h3 .ec-n{margin-left:auto;font:600 12px/1 var(--ec-mono);color:var(--ec-muted)}
.ec-revrow{display:flex;flex-wrap:wrap;gap:11px;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--ec-rule-soft)}
.ec-revrow:first-of-type{border-top:0}
.ec-revrow:hover{background:var(--ec-cream-raised)}

/* ---------- summary / handover ---------- */
.ec-sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;align-items:start}
.ec-sumcard{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);padding:17px 19px}
.ec-sumcard>h3{font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ec-sumlist{display:flex;flex-direction:column;gap:9px}
.ec-sumitem{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.ec-sumitem code{flex:none;margin-top:1px}

/* ---------- instrument bench (from → prepared → returns) ---------- */
.ec-instr{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);box-shadow:var(--ec-shadow-surface)}
.ec-instr-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}
.ec-instr-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);border-bottom:1px solid var(--ec-rule-soft)}
.ec-instr-cell{padding:15px 18px;border-left:1px solid var(--ec-rule-soft);min-width:0}
.ec-instr-cell:first-child{border-left:0}
.ec-instr-cell.ec-prep{background:var(--ec-cream-raised)}
.ec-instr-cell>.ec-block-label{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.ec-instr-body{padding:18px}
.ec-instr-foot{padding:13px 18px;border-top:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ec-muted)}
@media(max-width:849px){.ec-instr-flow{grid-template-columns:1fr}.ec-instr-cell{border-left:0;border-top:1px solid var(--ec-rule-soft)}.ec-instr-cell:first-child{border-top:0}}

/* comparison pane */
.ec-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1px;background:var(--ec-rule-soft);border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);overflow:hidden}
.ec-cmp-col{background:var(--ec-panel);padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.ec-cmp-val{font:600 26px/1.05 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums}

/* evidence thumb */
.ec-thumb{display:inline-flex;align-items:center;justify-content:center;width:52px;height:42px;flex:none;border:1px solid var(--ec-rule);border-radius:var(--ec-r-chip);background:var(--ec-cream);color:var(--ec-muted)}


/* ---------- hero ---------- */
/* Hero. Two rules do the work:
   - ONE measure for the text column. Previously the h1 carried max-width:24ch
     while the lede carried 74ch inside a wider column, giving three different
     right edges and a ragged block. The column itself is now the measure.
   - align-items:start; see the note below. */
/* Top-aligned. Centring looked balanced at 1200px, but on a wide monitor the
   record panel runs far taller than the copy and the leftover height opened as
   a ~250px void directly under the shell, above the kicker — the page appeared
   to start halfway down. Aligned to start, the copy meets the header like every
   other section and the difference falls below the buttons, where it reads as
   ordinary breathing room. */
.ec-hero{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:40px;align-items:start}
.ec-hero-copy{max-width:62ch}
.ec-hero-copy h1{max-width:none}
@media(max-width:1023px){
  /* Single column: the copy IS the row, so capping it narrow just moves the
     void to the right-hand side. Let kicker and headline fill the width and
     cap only the lede, which is the one part that needs a reading measure. */
  .ec-hero{grid-template-columns:1fr;gap:26px;align-items:start}
  .ec-hero-copy{max-width:none}
  .ec-hero-copy .ec-lede{max-width:64ch}
}

/* record thread — the hero proof device. Real record components, seeded data. */
.ec-thread{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-panel);overflow:hidden;box-shadow:var(--ec-shadow-surface)}
.ec-thread-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}

/* ---------- two-state problem ---------- */
.ec-twostate{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch}
.ec-twostate>div{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);padding:19px 21px;background:var(--ec-panel)}
.ec-twostate>div:last-child{background:var(--ec-cream-raised)}
.ec-twostate-arrow{display:flex;align-items:center;justify-content:center;color:var(--ec-glyph)}
.ec-twostate ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.ec-twostate li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.ec-twostate li svg{flex:none;margin-top:2px;width:15px;height:15px;color:var(--ec-glyph)}
@media(max-width:899px){
  .ec-twostate{grid-template-columns:1fr;gap:12px}
  .ec-twostate-arrow{transform:rotate(90deg);padding:2px 0}
}

/* ---------- output previews + readers ---------- */
.ec-outgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(370px,100%),1fr));gap:20px;align-items:start}
.ec-outcard{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden}
.ec-outcard-head{padding:15px 18px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}
.ec-outsheet{margin:16px 18px;padding:18px 20px;border:1px solid var(--ec-rule);background:var(--ec-white);border-radius:var(--ec-r-doc)}
.ec-readers{padding:14px 18px;border-top:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}
.ec-readers ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ec-readers li{padding:4px 9px;border-radius:var(--ec-r-pill);border:1px solid var(--ec-rule);background:var(--ec-white);font-size:12px;color:var(--ec-ink)}

/* ---------- source intake ---------- */
/* 5 steps is prime, so no even split exists below 5 columns: at 2 and 3 the
   last step spans the remainder rather than leaving a blank cell. */
.ec-intake{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ec-rule-soft);border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);overflow:hidden}
@media(max-width:1180px){.ec-intake{grid-template-columns:repeat(3,1fr)}.ec-intake>li:last-child{grid-column:2/-1}}
@media(max-width:820px){.ec-intake{grid-template-columns:1fr 1fr}.ec-intake>li:last-child{grid-column:1/-1}}
@media(max-width:560px){.ec-intake{grid-template-columns:1fr}.ec-intake>li:last-child{grid-column:auto}}
.ec-intake>li{list-style:none;background:var(--ec-panel);padding:16px 18px}
.ec-intake .ec-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--ec-r-chip);background:var(--ec-cream);font:600 12.5px/1 var(--ec-mono);color:var(--ec-muted);margin-bottom:8px}


/* ---------- Assessor Desk: record route ---------- */
/* A relationship route, not a progress bar. Each node is a real object count
   from the live record and opens the place it names. Horizontal on wide screens
   because the relationship IS sequential; vertical below 900px because a
   horizontally scrolling route is unusable on a phone. */
.ec-route{display:flex;flex-wrap:nowrap;gap:0;align-items:stretch;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden}
.ec-route-node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px;padding:13px 15px;border:0;border-left:1px solid var(--ec-rule-soft);background:transparent;text-align:left;font:inherit;cursor:pointer}
.ec-route-node:first-child{border-left:0}
.ec-route-node:hover{background:var(--ec-cream-raised)}
.ec-route-node[aria-current="true"]{background:var(--ec-gold-ground)}
.ec-route-node .ec-route-n{font:600 10px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ec-muted);display:flex;align-items:center;gap:6px}
.ec-route-node .ec-route-v{font-family:var(--ec-serif);font-size:15px;font-weight:600;color:var(--ec-heading);line-height:1.3}
.ec-route-node .ec-route-s{font-size:12px;color:var(--ec-muted)}
@media(max-width:899px){
  .ec-route{flex-direction:column}
  .ec-route-node{border-left:0;border-top:1px solid var(--ec-rule-soft)}
  .ec-route-node:first-child{border-top:0}
  }

/* ---------- Assessor Desk: bench + output desk composition ---------- */
.ec-desk{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media(min-width:1180px){
  .ec-desk{grid-template-columns:minmax(0,1.9fr) minmax(min(320px,100%),1fr)}
  .ec-outdesk-sticky{position:sticky;top:76px}
}

/* ---------- Output Desk ---------- */
.ec-outdesk{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden}
.ec-outdesk-head{padding:14px 16px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}
.ec-outrow{padding:15px 16px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-outrow:last-child{border-bottom:0}
.ec-outrow[aria-current="true"]{background:var(--ec-gold-ground)}
.ec-outname{display:flex;gap:10px;align-items:flex-start;margin-bottom:7px}
.ec-outname b{font-family:var(--ec-serif);font-size:16px;font-weight:600;color:var(--ec-heading);line-height:1.3}
.ec-outmeta{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ec-muted);margin-bottom:9px}
.ec-outmeta b{color:var(--ec-heading);font-weight:600}
.ec-outacts{display:flex;flex-wrap:wrap;gap:7px}
.ec-outacts .ec-btn{min-height:44px;padding:8px 11px;font-size:12.5px}
/* Why a control is unavailable is stated in text beside it, never in a tooltip
   alone — a tooltip is unreachable by touch and by keyboard. */
.ec-why{font-size:12px;line-height:1.5;color:var(--ec-muted);margin-top:7px;padding-left:11px;border-left:2px solid var(--ec-rule)}
/* Technical backup sits on its own ground. A backup is not a professional
   output, and the surface says so before the words do. */
.ec-outdesk-tech{padding:15px 16px;border-top:1px solid var(--ec-rule);background:var(--ec-inset)}

/* miniature output preview — the real renderer, scaled, never a fake thumbnail */
.ec-minidoc{border:1px solid var(--ec-rule);background:var(--ec-white);padding:14px 16px;max-height:230px;overflow:hidden;position:relative}
.ec-minidoc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,transparent,var(--ec-white))}
.ec-minidoc h4{font-family:var(--ec-serif);font-size:14px;font-weight:600;color:var(--ec-heading);padding-bottom:5px;border-bottom:2px solid var(--ec-pine);margin-bottom:6px}
.ec-minidoc p{font-size:11.5px;line-height:1.55;color:var(--ec-ink)}

/* receipt — states the objects changed and where they landed */
.ec-receipt{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--ec-green-line);border-radius:var(--ec-r-control);background:var(--ec-green-ground);font-size:13px;line-height:1.55}
.ec-receipt-when{font-size:11.5px;color:var(--ec-muted);margin-top:4px}


/* Visually hidden but reachable: file inputs sit inside their own label, so the
   label IS the control and the input must not be display:none (which removes it
   from the accessibility tree and from keyboard activation). */
.ec-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- files and references (one canonical register) ---------- */
.ec-fm{display:flex;flex-direction:column;gap:14px}
.ec-fm-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.ec-fm-filters{display:flex;flex-wrap:wrap;gap:5px}
.ec-fm-filter{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 11px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-chip);background:var(--ec-white);font:600 12.5px/1 var(--ec-sans);color:var(--ec-muted)}
.ec-fm-filter[aria-pressed="true"]{border-color:var(--ec-pine);background:var(--ec-pine);color:var(--ec-rev-text)}
.ec-fm-search{min-height:40px;padding:9px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);font:15px/1.4 var(--ec-sans);color:var(--ec-ink);min-width:min(280px,100%)}
.ec-fm-reg{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);overflow:hidden;background:var(--ec-panel)}
/* Three reading columns, then the actions on their own line. Six buttons in a
   fourth `auto` column took max-content and crushed the caption and facts
   columns into unreadable slivers at anything under a wide desktop. */
.ec-fm-row{display:grid;grid-template-columns:52px minmax(0,1.9fr) minmax(0,1fr);
  column-gap:14px;row-gap:12px;align-items:start;padding:14px 16px;border-top:1px solid var(--ec-rule-soft)}
.ec-fm-row>*:nth-child(1){grid-column:1;grid-row:1}
.ec-fm-row>*:nth-child(2){grid-column:2;grid-row:1}
.ec-fm-row>*:nth-child(3){grid-column:3;grid-row:1;align-items:flex-start}
.ec-fm-row>.ec-fm-acts{grid-column:2/-1;grid-row:2}
.ec-fm-row b,.ec-fm-meta span,.ec-fm-row code.ec-idref{overflow-wrap:anywhere}
.ec-fm-row:first-child{border-top:0}
.ec-fm-row:hover{background:var(--ec-hover)}
.ec-fm-thumb{width:52px;height:52px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-chip);background:var(--ec-cream);display:flex;align-items:center;justify-content:center;color:var(--ec-muted);overflow:hidden}
.ec-fm-thumb img{width:100%;height:100%;object-fit:cover}
.ec-fm-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;font-size:12.5px;color:var(--ec-muted)}
.ec-fm-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.ec-fm-acts .ec-btn{min-height:40px;padding:9px 11px;font-size:12.5px}
/* A destructive action never sits flush against the routine ones. */
.ec-fm-acts .ec-btn-danger{margin-left:12px;position:relative}
.ec-fm-acts .ec-btn-danger::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;
  width:1px;background:var(--ec-rule)}
.ec-fm-drop{border:2px dashed var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-inset);padding:22px;text-align:center}
.ec-fm-drop[data-over="true"]{border-color:var(--ec-gold);background:var(--ec-gold-ground)}
.ec-fm-pending{display:flex;flex-direction:column;gap:1px;background:var(--ec-rule-soft);border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);overflow:hidden}
.ec-fm-pend{background:var(--ec-panel);padding:14px 16px;display:grid;gap:11px}
.ec-fm-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:11px}
.ec-fm-field{display:flex;flex-direction:column;gap:5px}
.ec-fm-field label{font:600 12px/1.3 var(--ec-sans);color:var(--ec-muted)}
.ec-fm-field input,.ec-fm-field select,.ec-fm-field textarea{min-height:42px;padding:10px 11px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-panel);font:14.5px/1.45 var(--ec-sans);color:var(--ec-ink)}
.ec-fm-field textarea{min-height:70px;resize:vertical}
.ec-fm-preview{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-inset);padding:12px;display:flex;flex-direction:column;gap:10px}
.ec-fm-preview img{max-width:100%;max-height:60vh;object-fit:contain;background:var(--ec-panel);border:1px solid var(--ec-rule)}
.ec-fm-preview iframe{width:100%;height:60vh;border:1px solid var(--ec-rule);background:var(--ec-panel)}
.ec-fm-preview pre{max-height:50vh;overflow:auto;margin:0;padding:12px;background:var(--ec-panel);border:1px solid var(--ec-rule);font:12.5px/1.6 var(--ec-mono);white-space:pre-wrap}
.ec-storage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}
.ec-storage-cell{padding:13px 14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel)}
.ec-storage-n{font:600 21px/1.1 var(--ec-serif);color:var(--ec-ink);font-variant-numeric:tabular-nums}
.ec-dlg{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-white);padding:0;max-width:min(1100px,94vw);width:100%;box-shadow:var(--ec-shadow-floating),var(--ec-shadow-shell)}
.ec-dlg::backdrop{background:rgba(28,44,33,.5)}
.ec-dlg-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--ec-rule);background:var(--ec-panel)}
.ec-dlg-body{padding:18px 20px;max-height:74vh;overflow:auto}
@media(max-width:760px){
  .ec-fm-row{grid-template-columns:44px minmax(0,1fr)}
  .ec-fm-row>*:nth-child(3){grid-column:1/-1;grid-row:2}
  .ec-fm-row>.ec-fm-acts{grid-column:1/-1;grid-row:3}
  .ec-dlg-body{padding:14px}
}
@media(max-width:430px){.ec-fm-thumb{width:44px;height:44px}}

/* ---------- job entry ---------- */
.ec-entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.ec-entry-card{display:flex;flex-direction:column;gap:11px;padding:20px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-panel);box-shadow:var(--ec-shadow-object)}
.ec-entry-card[data-tone="example"]{border-color:var(--ec-gold-line);background:var(--ec-gold-ground)}
.ec-fict{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-chip);background:var(--ec-panel);font:600 11.5px/1 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-wiz-steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ec-wiz-step{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:9px 13px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-pill);background:var(--ec-panel);font:600 12.5px/1 var(--ec-sans);color:var(--ec-muted)}
.ec-wiz-step[aria-current="step"]{border-color:var(--ec-pine);background:var(--ec-pine);color:var(--ec-rev-text)}
.ec-wiz-step[data-done="true"]{border-color:var(--ec-green-line);background:var(--ec-green-ground);color:var(--ec-green-ink)}
.ec-req{color:var(--ec-coral-ink);font-weight:600}
.ec-fielderr{font-size:12.5px;color:var(--ec-coral-ink);font-weight:600}


/* ==================== MOTION LAYER ====================
   Additive: no existing rule is changed, only transitions added. Every duration
   and distance comes from a token, so the reduced-motion block in ec-tokens.css
   disables all of it at source. Nothing here carries information — every state
   already has an icon and a word.

   Rule: motion happens when something changes, and stops when nothing does.
   There is no looping, pulsing or breathing anything in this file, and there
   must never be. */

/* --- M1 micro response: controls acknowledge, they do not perform --- */
.ec-btn,.ec-navpill,.ec-fm-filter,.ec-segbtn,.ec-stagetab{
  transition:background-color var(--ec-motion-instant) var(--ec-ease-control),
             border-color var(--ec-motion-instant) var(--ec-ease-control),
             color var(--ec-motion-instant) var(--ec-ease-control),
             transform var(--ec-motion-instant) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control);
}
.ec-btn:hover{transform:translateY(calc(-1 * var(--ec-motion-d-micro)))}
.ec-btn:active{transform:none}
.ec-btn svg{transition:transform var(--ec-motion-instant) var(--ec-ease-control)}
.ec-btn:hover svg:last-child{transform:translateX(var(--ec-motion-d-micro))}
.ec-btn:disabled{transform:none}
/* Destructive gets no extra motion at all — a delete should feel deliberate,
   never energetic. */
.ec-btn-danger:hover{transform:none}

/* --- M2 object response: record objects register --- */
.ec-ledger-row,.ec-fm-row,.ec-reg-row,.ec-outrow{
  transition:background-color var(--ec-motion-standard) var(--ec-ease-object),
             box-shadow var(--ec-motion-standard) var(--ec-ease-object),
             transform var(--ec-motion-standard) var(--ec-ease-object);
}
.ec-ledger-row[aria-current="true"]{transform:translateX(var(--ec-motion-d-micro))}

/* An object entering the record moves ~5px into place and settles. The tone is
   "this has entered the record", not "a card appeared". */
@keyframes ec-object-enter{
  from{opacity:0;transform:translateY(var(--ec-motion-d-object))}
  to{opacity:1;transform:none}
}

/* The M3 relational trace block was removed: no page emitted .ec-trace or
   data-link-state, so it was dead CSS describing motion that never ran.
   §11 says wire it or remove it — this is the remove half. Re-add it only
   alongside the markup that uses it. */

/* --- stage switching: the rail holds still, the panel settles --- */
.ec-stage{animation:ec-object-enter var(--ec-motion-standard) var(--ec-ease-object) both}
.ec-stagetab[aria-current="true"],.ec-stagetab[aria-selected="true"]{
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}

/* --- file states: containment, never ascent --- */
[data-file-state]{transition:border-color var(--ec-motion-relation) var(--ec-ease-object),
  background-color var(--ec-motion-relation) var(--ec-ease-object),
  opacity var(--ec-motion-relation) var(--ec-ease-object)}
[data-file-state="selected"]{border-style:dashed}
[data-file-state="reference"]{border-style:dashed;background:transparent}
[data-file-state="missing"],[data-file-state="failed"]{opacity:.8}

/* --- dialogs and drawers: attached to their source, small travel --- */
@keyframes ec-dialog-in{
  from{opacity:0;transform:translateY(var(--ec-motion-d-section)) scale(.99)}
  to{opacity:1;transform:none}
}
.ec-dlg[open],dialog[open]{animation:ec-dialog-in var(--ec-motion-standard) var(--ec-ease-object) both}
.ec-dlg::backdrop,dialog::backdrop{animation:none}

/* --- idle: when nothing changes, everything is still. --- */
@media(prefers-reduced-motion:reduce){
  .ec-btn:hover,.ec-ledger-row[aria-current="true"],.ec-btn:hover svg:last-child{transform:none}
  .ec-stage,.ec-dlg[open],dialog[open]{animation:none}
}


/* ==================== COMPARISON LENS ====================
   Two accounts of the same thing in ONE visual plane. The rules that matter are
   the ones that make it a professional instrument rather than a verdict:
     · equal column width, equal type scale, equal ground — neither account may
       look preferred;
     · no arrow between them, because an arrow implies progression or correction;
     · the difference sits BETWEEN them and belongs to neither;
     · on mobile they stack, and the difference stacks WITH them rather than
       being separated to the foot of the panel. */
.ec-lens{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);overflow:hidden;background:var(--ec-panel)}
.ec-lens-col{padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ec-lens-col + .ec-lens-col{border-left:1px solid var(--ec-rule-soft)}
.ec-lens-val{font:600 30px/1.05 var(--ec-serif);color:var(--ec-ink);font-variant-numeric:tabular-nums}
.ec-lens-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 14px;border-left:1px solid var(--ec-rule-soft);border-right:1px solid var(--ec-rule-soft);
  background:var(--ec-inset);min-width:132px}
.ec-lens-diff{font:600 19px/1.1 var(--ec-serif);color:var(--ec-gold-ink);font-variant-numeric:tabular-nums;text-align:center}
.ec-lens-facts{display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.5;color:var(--ec-muted)}
.ec-lens-roles{display:flex;flex-wrap:wrap;gap:6px}
.ec-lens-note{margin-top:14px;padding:13px 15px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);
  background:var(--ec-inset);font-size:13px;line-height:1.6;color:var(--ec-muted)}
.ec-lens-context{margin-top:12px;padding:12px 14px;border:1px dashed var(--ec-rule);border-radius:var(--ec-r-control);
  background:transparent;font-size:13px;line-height:1.55;color:var(--ec-muted)}
@media(max-width:720px){
  .ec-lens{grid-template-columns:1fr}
  .ec-lens-col + .ec-lens-col{border-left:0;border-top:1px solid var(--ec-rule-soft)}
  /* The difference keeps its place between the two accounts when stacked —
     moving it to the foot would break the relationship it describes. */
  .ec-lens-mid{border-left:0;border-right:0;border-top:1px solid var(--ec-rule-soft);
    border-bottom:1px solid var(--ec-rule-soft);order:0;min-width:0;flex-direction:row;gap:12px}
}

/* Contextual instrument entry: sits on the object it acts on, never in a
   separate tool directory. */
.ec-inst-open{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:9px 12px;
  border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-control);background:var(--ec-gold-ground);
  font:600 12.5px/1 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-inst-open:hover{background:var(--ec-panel)}
.ec-inst-contract{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:0;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);overflow:hidden;background:var(--ec-panel);margin-bottom:16px}
.ec-inst-cell{padding:14px 16px}
.ec-inst-cell + .ec-inst-cell{border-left:1px solid var(--ec-rule-soft)}
@media(max-width:720px){.ec-inst-cell + .ec-inst-cell{border-left:0;border-top:1px solid var(--ec-rule-soft)}}


/* ==================== THE BENCH ====================
   The Assessor Desk's signature. Instead of describing what an instrument
   receives in prose, the job's real record objects are laid out as a tray of
   material, and opening an instrument lights the exact objects it consumes and
   draws a thread from the tray to it.

   This is what makes the Desk feel like a bench rather than a menu: the
   material is present before you choose the operation. */
.ec-bench{position:relative;border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);
  background:linear-gradient(var(--ec-cream-raised),var(--ec-cream));overflow:hidden}
.ec-bench-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-bench-tray{display:flex;flex-wrap:wrap;gap:9px;padding:16px 18px}
.ec-bench-tile{position:relative;display:flex;flex-direction:column;gap:5px;min-width:132px;flex:0 1 auto;
  padding:11px 13px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);
  background:var(--ec-panel);text-align:left;
  transition:border-color var(--ec-motion-standard) var(--ec-ease-object),
             background-color var(--ec-motion-standard) var(--ec-ease-object),
             transform var(--ec-motion-standard) var(--ec-ease-object),
             opacity var(--ec-motion-standard) var(--ec-ease-object)}
.ec-bench-tile:hover{border-color:var(--ec-muted)}
/* In use: the object this instrument actually consumes. Lifts, not glows. */
.ec-bench-tile[data-in-use="true"]{border-color:var(--ec-gold);background:var(--ec-gold-ground);
  transform:translateY(calc(-1 * var(--ec-motion-d-micro)))}
.ec-bench-tile[data-in-use="true"] .ec-bench-thread{transform:scaleY(1)}
/* Not-in-use is expressed through the CONTAINER, never by fading the text.
   Dimming the whole tile to .45 dropped body text to 2.67:1 and the identifier
   to 1.97:1, far below AA — and these tiles still hold record content the user
   is meant to read. The recessed state now comes from a flatter ground and a
   softer edge; every character stays at full contrast. */
.ec-bench[data-focused="true"] .ec-bench-tile[data-in-use="false"]{
  background:var(--ec-disabled);border-color:var(--ec-rule-soft);box-shadow:none}
.ec-bench-id{font:600 11px/1 var(--ec-mono);letter-spacing:.07em;color:var(--ec-muted)}
.ec-bench-what{font-size:12.5px;line-height:1.4;color:var(--ec-ink)}
/* The thread: drawn from the tile down toward the bench edge, so material
   visibly feeds the instrument below. Scale, not height, so it animates. */
.ec-bench-thread{position:absolute;left:50%;bottom:-17px;width:2px;height:17px;border-radius:2px;
  background:var(--ec-gold);transform-origin:top center;transform:scaleY(0);
  transition:transform var(--ec-motion-relation) var(--ec-ease-object)}
.ec-bench-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 18px;border-top:1px solid var(--ec-rule-soft);background:var(--ec-panel)}
@media(max-width:560px){.ec-bench-tile{min-width:0;flex:1 1 100%}.ec-bench-thread{display:none}}

/* ---------- Source Start ----------
   An evidence intake desk, not an upload wizard: a step rail on the left, the
   working surface beside it, and every state a document-like row rather than a
   card. Provenance is always adjacent to the value it belongs to. */
.ec-ss{display:grid;grid-template-columns:212px minmax(0,1fr);gap:22px;align-items:start}
.ec-ss-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:104px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-panel);padding:8px;overflow:hidden}
.ec-ss-railstep{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 11px;border:0;background:transparent;
  border-radius:var(--ec-r-control);font:600 13px/1.35 var(--ec-sans);color:var(--ec-muted);text-align:left;cursor:pointer;width:100%}
.ec-ss-railstep span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:50%;border:1px solid var(--ec-rule);font:600 11.5px/1 var(--ec-sans);background:var(--ec-cream)}
.ec-ss-railstep:hover{background:var(--ec-hover);color:var(--ec-ink)}
.ec-ss-railstep[aria-current="step"]{background:var(--ec-selected);color:var(--ec-heading);
  box-shadow:inset 3px 0 0 var(--ec-gold)}
.ec-ss-railstep[aria-current="step"] span{background:var(--ec-gold-soft);border-color:var(--ec-gold-line);color:var(--ec-gold-ink)}
.ec-ss-body{display:flex;flex-direction:column;gap:18px;min-width:0}
.ec-ss-step{display:flex;flex-direction:column;gap:12px}
.ec-ss-h{font-size:clamp(20px,2.4vw,26px)}
.ec-ss-intro{font-size:14px;line-height:1.6;color:var(--ec-muted);max-width:82ch}
.ec-ss-nav{display:flex;flex-wrap:wrap;gap:9px;padding-top:14px;border-top:1px solid var(--ec-rule-soft)}
.ec-ss-hint{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.55;color:var(--ec-muted);max-width:70ch}
.ec-ss-priv{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:80ch}

/* source categories: the gate that stops Source Start being a generic dropzone */
.ec-ss-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));gap:10px}
.ec-ss-cat{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:13px 14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);min-height:44px}
.ec-ss-cat:hover{border-color:var(--ec-gold-line);background:var(--ec-hover)}
.ec-ss-cat[aria-pressed="true"]{border-color:var(--ec-gold);background:var(--ec-gold-soft);box-shadow:inset 0 0 0 1px var(--ec-gold-line)}
.ec-ss-cat-h{display:flex;align-items:center;gap:8px;font:600 14px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-ss-cat-n{font-size:12.5px;line-height:1.5;color:var(--ec-ink)}
.ec-ss-cat-c{display:flex;gap:7px;font-size:12px;line-height:1.5;color:var(--ec-muted)}
.ec-ss-cat-f{font:600 10.5px/1 var(--ec-mono);letter-spacing:.08em;color:var(--ec-muted)}
.ec-ss-addbar{display:flex;flex-direction:column;gap:9px;padding:14px 16px;border:1px dashed var(--ec-rule);
  border-radius:var(--ec-r-panel);background:var(--ec-inset)}

.ec-ss-notes{display:flex;flex-direction:column;gap:7px}
.ec-ss-note{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:var(--ec-r-control);
  font-size:13px;line-height:1.55;border:1px solid var(--ec-rule)}
.ec-ss-note-coral{border-color:var(--ec-coral-line,#e3b7ad);background:var(--ec-coral-ground,#fbf0ec);color:var(--ec-coral-ink)}
.ec-ss-note-gold{border-color:var(--ec-gold-line);background:var(--ec-gold-ground);color:var(--ec-gold-ink)}

.ec-ss-pend{display:flex;flex-direction:column;gap:8px;padding:13px 15px;border:1px solid var(--ec-gold-line);
  border-radius:var(--ec-r-panel);background:var(--ec-gold-soft)}
.ec-ss-pendrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ec-ss-pendacts{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto}
.ec-ss-pendacts .ec-btn{min-height:40px;padding:9px 11px;font-size:12.5px}

.ec-ss-stack{display:flex;flex-direction:column;gap:0;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);
  background:var(--ec-panel);overflow:hidden}
.ec-ss-stack>.ec-block-label{padding:11px 14px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-cream-raised)}
.ec-ss-stackrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:11px 14px;border-top:1px solid var(--ec-rule-soft)}
.ec-ss-stacktitle{font-size:13.5px;font-weight:600;min-width:0}
.ec-ss-stackn{margin-left:auto;font-size:12px;color:var(--ec-muted)}

.ec-ss-src{display:flex;flex-direction:column;gap:11px;padding:15px 17px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-panel);background:var(--ec-panel)}
.ec-ss-src header{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.ec-ss-src header b{font-family:var(--ec-serif);font-size:16px}
.ec-ss-srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:11px}
.ec-ss-f{display:flex;flex-direction:column;gap:5px}
.ec-ss-f>span{font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-muted)}
.ec-ss-f input,.ec-ss-f select,.ec-ss-manualgrid input,.ec-ss-manualgrid select{min-height:42px;padding:9px 11px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-panel);
  font:14px/1.4 var(--ec-sans);color:var(--ec-ink)}
.ec-ss-srcmeta{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;line-height:1.5;color:var(--ec-muted);
  padding-top:9px;border-top:1px solid var(--ec-rule-soft)}
.ec-ss-srcfoot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ec-muted)}

.ec-ss-facts{display:flex;flex-direction:column;gap:14px}
.ec-ss-topic{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);overflow:hidden}
.ec-ss-topic-h{padding:10px 14px;background:var(--ec-cream-raised);border-bottom:1px solid var(--ec-rule-soft);
  font:600 12.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-ss-topic-h span{color:var(--ec-muted);font-weight:400}
/* The value column is BOUNDED. Authored as `auto` it absorbed a long address
   (“Basement Flat 32 Mount Ephraim Road…”) and floored the provenance track at
   0px, so the source id and page number wrapped one word per line and the state
   chip was pushed outside the row. A fact and where it came from must both keep
   real width — the provenance IS the point of the row. */
.ec-ss-fact{display:grid;grid-template-columns:minmax(96px,.9fr) minmax(0,1.6fr) auto;gap:10px 14px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--ec-rule-soft)}
.ec-ss-fact>*{min-width:0}
.ec-ss-fact-v{font-family:var(--ec-serif);font-size:19px;font-weight:600;color:var(--ec-heading);overflow-wrap:anywhere}
.ec-ss-fact-v i{font-size:13px;font-style:normal;color:var(--ec-muted)}
.ec-ss-fact-p{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--ec-muted);min-width:0;overflow-wrap:anywhere}
.ec-ss-fact-loc{display:inline-flex;align-items:center;gap:5px}
.ec-ss-fact-a{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px}
.ec-ss-fact-a .ec-btn{min-height:40px;padding:9px 11px;font-size:12.5px}
.ec-ss-manual{padding:14px 16px;border:1px dashed var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-inset)}
.ec-ss-manualgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px;align-items:end}
.ec-ss-manualgrid label{display:flex;flex-direction:column;gap:5px;font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-muted)}

/* the attention board: four lanes, no score, no rating */
.ec-ss-boardbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ec-ss-board{display:flex;flex-direction:column;gap:16px}
.ec-ss-lane{display:flex;flex-direction:column;gap:9px;padding:14px 15px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-region);background:var(--ec-record)}
.ec-ss-lane-h{display:flex;align-items:center;gap:9px;font:600 12px/1 var(--ec-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ec-muted)}
.ec-ss-lane-difference{box-shadow:inset 3px 0 0 var(--ec-gold)}
.ec-ss-lane-gap{box-shadow:inset 3px 0 0 var(--ec-green)}
.ec-ss-lane-unverified{box-shadow:inset 3px 0 0 var(--ec-coral)}
.ec-ss-lane-context{box-shadow:inset 3px 0 0 var(--ec-pine)}
.ec-ss-att{display:flex;flex-direction:column;gap:8px;padding:13px 14px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-ss-att-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-family:var(--ec-serif);font-size:15px}
.ec-ss-att-s{font-size:13.5px;line-height:1.6;max-width:82ch}
.ec-ss-att-w{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--ec-muted);max-width:82ch}
.ec-ss-att-a{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.ec-ss-att-a .ec-btn{min-height:40px;padding:9px 11px;font-size:12.5px}
.ec-ss-hist{display:flex;flex-direction:column;gap:7px;padding:13px 15px;border:1px dashed var(--ec-rule);
  border-radius:var(--ec-r-panel);background:var(--ec-inset)}
.ec-ss-histrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12.5px;line-height:1.5}
.ec-ss-histnote{font-family:var(--ec-serif);color:var(--ec-muted)}

.ec-ss-made{display:flex;flex-direction:column;gap:7px}
.ec-ss-maderow{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;padding:11px 13px;border:1px solid var(--ec-green-line);
  border-radius:var(--ec-r-control);background:var(--ec-green-ground);font-size:13.5px}
.ec-ss-maderow span{color:var(--ec-muted);font-size:12.5px}
.ec-ss-thread{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:13px 0}
.ec-ss-threadstep{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-chip);background:var(--ec-panel);font-size:12.5px;color:var(--ec-muted)}
.ec-ss-threadstep+.ec-ss-threadstep::before{content:"\2192";margin-right:9px;color:var(--ec-rule)}
.ec-ss-threaddone{border-color:var(--ec-gold-line);background:var(--ec-gold-soft);color:var(--ec-gold-ink);font-weight:600}
.ec-ss-handoff{display:flex;flex-wrap:wrap;gap:9px}
.ec-ss-empty{display:flex;flex-direction:column;gap:5px;padding:17px 19px;border:1px dashed var(--ec-rule);
  border-radius:var(--ec-r-panel);background:var(--ec-inset);max-width:78ch}
.ec-ss-empty b{font-family:var(--ec-serif);font-size:15.5px;color:var(--ec-heading)}
.ec-ss-empty span{font-size:13px;line-height:1.6;color:var(--ec-muted)}

/* Restrained motion: a surfaced item and a confirmed fact arrive rather than
   appear. Nothing loops, nothing celebrates. */
@keyframes ec-ss-arrive{from{opacity:0;transform:translateY(var(--ec-motion-d-object))}to{opacity:1;transform:none}}
.ec-ss-att,.ec-ss-maderow{animation:ec-ss-arrive var(--ec-motion-relation) var(--ec-ease-object) both}

@media(max-width:900px){
  .ec-ss{grid-template-columns:1fr}
  .ec-ss-rail{position:static;flex-direction:row;overflow-x:auto}
  .ec-ss-railstep{white-space:nowrap}
  .ec-ss-railstep[aria-current="step"]{box-shadow:inset 0 -3px 0 var(--ec-gold)}
  .ec-ss-fact{grid-template-columns:1fr}
}

/* ---------- evidence plates (the document's evidence index) ----------
   A reader checking whether a photograph supports a matter cannot do it from a
   filename, so the index shows the retained image itself. Every non-image case
   states what it is rather than showing a stand-in — an invented thumbnail in an
   evidence schedule would be the worst possible place for a decoration. */
.ec-doc-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:14px;margin:10px 0 6px}
.ec-plate{margin:0;display:flex;flex-direction:column;gap:8px;padding:10px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-panel);break-inside:avoid}
.ec-plate-img{position:relative;aspect-ratio:4/3;border-radius:var(--ec-r-control);overflow:hidden;
  background:var(--ec-cream-raised);border:1px solid var(--ec-rule-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:12px;text-align:center}
.ec-plate-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ec-plate-wait span,.ec-plate-none b,.ec-plate-none span{font-size:11.5px;line-height:1.45;color:var(--ec-muted)}
.ec-plate-none b{font:600 12px/1.35 var(--ec-sans);color:var(--ec-ink)}
.ec-plate-none{background:repeating-linear-gradient(135deg,var(--ec-cream-raised) 0 7px,var(--ec-cream) 7px 14px)}
.ec-plate figcaption{display:flex;flex-direction:column;gap:3px}
.ec-plate-h{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;font-family:var(--ec-serif);font-size:13.5px;font-weight:600}
.ec-plate-h code{font:600 10.5px/1 var(--ec-mono);letter-spacing:.04em;padding:3px 5px;border-radius:4px;
  background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-plate-cap{font-size:12.5px;line-height:1.5}
.ec-plate-meta{font-size:11px;line-height:1.45;color:var(--ec-muted)}

@media print{
  /* Plates print: the image IS the evidence. Three to a row on paper, never
     split across a page break. */
  .ec-doc-plates{grid-template-columns:repeat(3,1fr);gap:9px}
  .ec-plate{border-color:#c9c9c1;background:#fff;padding:7px}
  .ec-plate-img{aspect-ratio:4/3;background:#f4f4f0}
  .ec-plate-h code{background:#f0ece0;color:#3a3222}
}

/* print: the document is white */
@media print{
  html,body,main,.ec-doc,.ec-outsheet,.ec-minidoc{background:#fff!important}
  .ec-region,.ec-object,.ec-panel,.ec-ws,.ec-ws-spine{background:#fff!important}
}

/* Source Start intake: the ACTION is the biggest thing on the step. The previous
   five equal cards read as a catalogue of formats, so the assessor had to read
   five paragraphs before finding the button. */
.ec-ss-intake{padding:16px 18px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-record)}
.ec-ss-catrow{display:flex;flex-wrap:wrap;gap:7px}
.ec-ss-catbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 13px;cursor:pointer;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);
  font:600 13px/1.3 var(--ec-sans);color:var(--ec-ink)}
.ec-ss-catbtn:hover{border-color:var(--ec-gold-line);background:var(--ec-hover)}
.ec-ss-catbtn[aria-pressed="true"]{border-color:var(--ec-gold);background:var(--ec-selected);color:var(--ec-gold-ink)}
.ec-ss-drop{margin-top:13px;padding:22px 20px;border:2px dashed var(--ec-rule);border-radius:var(--ec-r-panel);
  background:var(--ec-white);display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.ec-ss-drop[data-over="true"]{border-color:var(--ec-gold);background:var(--ec-selected)}
.ec-ss-choose{cursor:pointer;min-height:46px;font-size:14.5px}
.ec-ss-dropnote{font-size:13px;color:var(--ec-muted)}
.ec-ss-fmt{display:flex;gap:8px;align-items:flex-start;max-width:74ch;font-size:12.5px;line-height:1.55;color:var(--ec-muted);text-align:left}
.ec-ss-disclose{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-ss-disclose>summary{cursor:pointer;padding:12px 15px;min-height:44px;display:flex;align-items:center;
  font:600 13px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-ss-fmtgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;padding:0 15px 15px}
.ec-ss-fmth{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:4px}
.ec-ss-fmtn{font-size:12.5px;line-height:1.5;color:var(--ec-muted);margin-bottom:4px}

/* The closed instrument's one-line contract: what it takes from the job, what it
   returns. Enough to choose it without printing the full four-cell explanation
   six times over. */
.ec-instr-line{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 20px 15px;
  font-size:12.5px;line-height:1.5;color:var(--ec-muted)}
.ec-instr-line svg{flex:none;color:var(--ec-glyph)}
.ec-instr-line span{min-width:0}
.ec-instr-line span:first-of-type::after{content:"\2192";margin-left:7px;color:var(--ec-rule-strong)}

/* ---------- instrument console (Assessor Desk) ----------
   The Desk is a console, not a page about tools: context, one grouped selector,
   one instrument. Every instrument uses identical anatomy, because a different
   shape per tool is how a console becomes six pages again. */
.ec-console{margin-top:6px}
.ec-conbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 14px;margin-bottom:16px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-record)}
.ec-congroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;min-width:0}
.ec-congroup-h{font:600 10px/1.3 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted)}
.ec-conpills{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:var(--ec-r-pill);background:var(--ec-recessed)}
/* The quiet group is visibly subordinate: business utilities are not record work. */
.ec-congroup-quiet .ec-conpills{background:transparent;border:1px dashed var(--ec-rule)}
.ec-conpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--ec-r-pill);background:transparent;
  font:600 13.5px/1.2 var(--ec-sans);color:var(--ec-ink);text-decoration:none;
  transition:background var(--ec-t-quick),color var(--ec-t-quick),border-color var(--ec-t-quick)}
.ec-conpill svg{flex:none;color:currentColor;opacity:.75}
.ec-conpill:hover{background:var(--ec-white);border-color:var(--ec-rule)}
/* Active: pine fill, one restrained gold ring. Never colour alone — the active
   pill also carries aria-selected and sits at full weight. */
.ec-conpill[aria-selected="true"]{background:var(--ec-pine);border-color:var(--ec-gold);color:var(--ec-rev-text);
  box-shadow:0 0 0 2px var(--ec-gold-soft)}
.ec-conpill[aria-selected="true"] svg{opacity:1;color:var(--ec-gold)}
.ec-conpill[disabled]{cursor:not-allowed;color:var(--ec-muted);opacity:.6}
.ec-pillstate{font:600 10px/1 var(--ec-sans);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 7px;border-radius:var(--ec-r-chip);background:var(--ec-white);color:var(--ec-muted);border:1px solid var(--ec-rule-soft)}
.ec-conpill[aria-selected="true"] .ec-pillstate{background:rgba(250,248,240,.14);border-color:rgba(250,248,240,.28);color:var(--ec-rev-text)}

/* No overflow clipping here: any non-visible overflow on an ancestor disables
   position:sticky for the apply bar inside, which made Discard unreachable. */
.ec-conpanel .ec-instr{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-record)}
.ec-conpanel .ec-instr:focus-visible{outline:2px solid var(--ec-gold);outline-offset:3px}
.ec-instr-top{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:baseline;justify-content:space-between;padding:20px 22px 16px}
.ec-instr-eyebrow{display:flex;align-items:center;gap:9px;flex:1 1 100%;
  font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-gold-ink)}
.ec-instr-eyebrow svg{color:var(--ec-gold-ink)}
.ec-instr-q{flex:1 1 420px;font-family:var(--ec-serif);font-size:clamp(21px,2.3vw,27px);font-weight:600;
  line-height:1.2;color:var(--ec-heading);text-wrap:pretty;margin:0}
/* Three-part strip: recessed, because it is orientation rather than content. */
.ec-instr-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;padding:0;list-style:none;
  background:var(--ec-rule-soft);border-top:1px solid var(--ec-rule);border-bottom:1px solid var(--ec-rule)}
.ec-instr-cell{padding:14px 18px;background:var(--ec-recessed)}
.ec-instr-cell.ec-prep{background:var(--ec-white)}
.ec-instr-cell p{font-size:13.5px;line-height:1.5;margin:0}
.ec-instr-notice{display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 22px;
  font-size:13px;line-height:1.55;color:var(--ec-muted);border-left:3px solid var(--ec-rule)}
.ec-instr-notice:first-of-type{margin-top:14px}
.ec-instr-notice svg{flex:none;margin-top:2px;color:var(--ec-glyph)}
.ec-instr-notice-bound{border-left-color:var(--ec-gold);margin-bottom:6px}
.ec-instr-body{padding:16px 22px 22px}
/* Working area: assessor interaction left, live consequence right. */
.ec-instr-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.ec-route-tall{display:flex;flex-direction:column;gap:8px}
.ec-route-tall 
@media(max-width:1080px){
  .ec-instr-two{grid-template-columns:1fr}
  .ec-instr-flow{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* Groups scroll rather than wrap into an unreadable stack, and no instrument
     name is truncated. */
  .ec-conbar{flex-direction:column;align-items:stretch;gap:12px}
  .ec-congroup{flex-direction:column;align-items:flex-start}
  .ec-conpills{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .ec-conpill{white-space:nowrap;min-height:46px}
  .ec-instr-top{padding:16px 16px 13px}
  .ec-instr-notice{padding:11px 16px}
  .ec-instr-body{padding:14px 16px 18px}
}
@media print{.ec-conbar{display:none}}

/* Inside the console the Output Desk's own section labels sit in a panel with
   different padding; the label's icon must align to its text baseline rather
   than stack above it. */
.ec-outdesk-head .ec-block-label{display:flex;align-items:center;gap:8px}

/* ---------- Certificate Portfolio ----------
   Owner-facing. The visual identity comes from the timeline, the recorded-rating
   scale and the property rows — not from decoration. The grid treatment is
   confined to the Horizon panel and never spreads across the page. */
.ec-pf-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:22px;align-items:start}
.ec-pf-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-rule-soft);overflow:hidden}
.ec-sumcell{padding:13px 15px;background:var(--ec-white);display:flex;flex-direction:column;gap:2px}
.ec-sumcell b{font-family:var(--ec-serif);font-size:25px;font-weight:600;line-height:1;color:var(--ec-heading)}
.ec-sumcell span{font-size:12px;line-height:1.4;color:var(--ec-muted)}
/* Tone marks a count worth looking at. It never means pass or fail, and the
   label always says what the number counts. */
.ec-sumcell-gold{background:var(--ec-gold-ground)}
.ec-sumcell-gold b{color:var(--ec-gold-ink)}
.ec-sumcell-coral{background:var(--ec-coral-ground)}
.ec-sumcell-coral b{color:var(--ec-coral-ink)}
.ec-sumnote{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;padding:10px 15px;
  background:var(--ec-recessed);font-size:11.5px;line-height:1.45;color:var(--ec-muted)}
.ec-sumnote svg{flex:none;margin-top:1px;color:var(--ec-glyph)}

.ec-pf-hz{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-record);overflow:hidden}
.ec-pf-hzhead{padding:18px 20px 12px}
.ec-pf-hzbody{padding:4px 20px 18px}
.ec-pfctl{display:flex;flex-wrap:wrap;gap:14px 26px;padding:0 20px 12px}
.ec-pfctl-g{display:flex;flex-direction:column;gap:6px;min-width:0}
.ec-segrow{display:flex;flex-wrap:wrap;gap:6px}
.ec-pffilt{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:12px 20px;
  border-top:1px solid var(--ec-rule-soft);border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-recessed)}
.ec-pffilt input[type=search],.ec-pffilt select{min-height:44px;padding:10px 12px;font:400 13.5px/1.2 var(--ec-sans);
  color:var(--ec-ink);border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white)}
.ec-pffilt-s input{min-width:230px}
.ec-pffilt-c{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--ec-ink)}
.ec-pffilt-c input{width:17px;height:17px;accent-color:var(--ec-pine)}

/* the timeline */
.ec-hz{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);overflow:hidden}
.ec-hz-head{display:grid;grid-template-columns:230px minmax(0,1fr);border-bottom:1px solid var(--ec-rule)}
.ec-hz-corner{padding:9px 13px;font:600 10px/1.3 var(--ec-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ec-muted);border-right:1px solid var(--ec-rule)}
.ec-hz-axis{position:relative;height:34px}
.ec-hz-tick{position:absolute;top:9px;transform:translateX(-50%);font:600 10.5px/1 var(--ec-mono);
  letter-spacing:.04em;color:var(--ec-muted);white-space:nowrap}
.ec-hz-today{position:absolute;top:0;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.ec-hz-today i{width:2px;flex:1;background:var(--ec-pine)}
/* Width is fixed because the clamp above subtracts half of it. */
.ec-hz-todaylab{position:absolute;top:8px;width:44px;box-sizing:border-box;text-align:center;
  padding:2px 0;border-radius:var(--ec-r-chip);background:var(--ec-pine);
  color:var(--ec-rev-text);font:600 9.5px/1.2 var(--ec-sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ec-hz-row{display:grid;grid-template-columns:230px minmax(0,1fr);border-top:1px solid var(--ec-rule-soft);min-height:56px}
.ec-hz-row-fict{background:var(--ec-recessed)}
.ec-hz-label{padding:10px 13px;border-right:1px solid var(--ec-rule-soft);display:flex;flex-direction:column;gap:5px;min-width:0}
.ec-hz-open{text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading);text-decoration:underline;text-decoration-color:var(--ec-rule-strong);text-underline-offset:2px}
.ec-hz-open:hover{text-decoration-color:var(--ec-gold)}
.ec-hz-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
/* The recessed band the markers sit in: a light month grid, confined here. */
.ec-hz-track{position:relative;background:var(--ec-inset)}
.ec-hz-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--ec-rule-soft)}
.ec-hz-nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--ec-pine);opacity:.5}
.ec-hz-span{position:absolute;top:calc(50% - 1px);height:2px;background:var(--ec-rule-strong)}
.ec-hz-mark{position:absolute;top:50%;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;cursor:pointer;
  border-radius:50%;border:2px solid var(--ec-white);background:var(--ec-muted)}
.ec-hz-mark:focus-visible{outline:2px solid var(--ec-gold);outline-offset:3px}
/* State is carried by shape as well as colour: a passed date is a square, the
   attention window a diamond, later a circle — so the line reads in greyscale. */
.ec-hz-coral{background:var(--ec-coral);border-radius:3px}
.ec-hz-gold{background:var(--ec-gold);border-radius:3px;transform:rotate(45deg)}
.ec-hz-green{background:var(--ec-green)}
.ec-hz-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:5;
  display:none;padding:6px 9px;border-radius:var(--ec-r-chip);background:var(--ec-pine);color:var(--ec-rev-text);
  font:600 11.5px/1.3 var(--ec-sans);white-space:nowrap;pointer-events:none}
.ec-hz-gold .ec-hz-tip{transform:translateX(-50%) rotate(-45deg)}
.ec-hz-mark:hover .ec-hz-tip,.ec-hz-mark:focus-visible .ec-hz-tip{display:block}
.ec-hz-nodate{position:absolute;left:12px;top:50%;transform:translateY(-50%);padding:4px 9px;
  border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-chip);background:var(--ec-white);
  font-size:11.5px;color:var(--ec-muted)}
.ec-hz-qual{display:flex;gap:9px;align-items:flex-start;margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-hz-qual svg{flex:none;margin-top:2px;color:var(--ec-glyph)}
.ec-hz-blank{padding:15px 2px 0}
.ec-hz-blank p{font-size:13.5px;line-height:1.6;color:var(--ec-muted);max-width:76ch}
.ec-hz-blankacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

/* The mobile sequence — same order, same information, no squeezed chart. */
.ec-hz-list{display:none;flex-direction:column;gap:10px}
.ec-hzl{padding:13px 15px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-hzl-fict{background:var(--ec-recessed)}
.ec-hzl-date{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:5px}
.ec-hzl-date b{font-family:var(--ec-serif);font-size:15px;font-weight:600;color:var(--ec-heading)}
.ec-hzl-date span{font-size:12.5px;color:var(--ec-muted)}
.ec-hzl-addr{font:600 14px/1.4 var(--ec-sans);margin-bottom:5px}
.ec-hzl-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:7px}
.ec-hzl-meta code{font:600 11px/1 var(--ec-mono);color:var(--ec-muted)}
.ec-hzl-state{margin-bottom:9px}

/* recorded rating: stepped A–G, readable without colour */
.ec-rate{display:inline-flex;gap:2px;align-items:flex-end}
.ec-rate-step{width:9px;height:11px;border:1px solid var(--ec-rule);border-radius:2px;background:var(--ec-recessed);
  font-style:normal;font:600 8px/9px var(--ec-sans);text-align:center;color:transparent}
.ec-rate-step:nth-child(2){height:13px}.ec-rate-step:nth-child(3){height:15px}
.ec-rate-step:nth-child(4){height:17px}.ec-rate-step:nth-child(5){height:19px}
.ec-rate-step:nth-child(6){height:21px}.ec-rate-step:nth-child(7){height:23px}
.ec-rate-on{background:var(--ec-pine);border-color:var(--ec-pine);color:var(--ec-rev-text);
  display:flex;align-items:center;justify-content:center}
.ec-rate-lg .ec-rate-step{width:22px;height:22px;font-size:12px;line-height:22px}
.ec-rate-lg .ec-rate-step:nth-child(2){height:26px}.ec-rate-lg .ec-rate-step:nth-child(3){height:30px}
.ec-rate-lg .ec-rate-step:nth-child(4){height:34px}.ec-rate-lg .ec-rate-step:nth-child(5){height:38px}
.ec-rate-lg .ec-rate-step:nth-child(6){height:42px}.ec-rate-lg .ec-rate-step:nth-child(7){height:46px}
.ec-rate-cap{display:block;margin-top:7px;font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-muted)}

/* attention */
.ec-att-head{padding:14px 16px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-att-sub{margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:78ch}
.ec-att-list{display:flex;flex-direction:column}
.ec-att-row{display:flex;flex-wrap:wrap;gap:11px;align-items:center;justify-content:space-between;
  padding:12px 16px;border-top:1px solid var(--ec-rule-soft);background:var(--ec-white)}
.ec-att-gold{background:var(--ec-gold-ground)}
.ec-att-coral{background:var(--ec-coral-ground)}
.ec-att-why{flex:1 1 300px;min-width:0;font-size:13px;line-height:1.5}
.ec-att-acts{display:flex;flex-wrap:wrap;gap:8px}
.ec-att-more{padding:10px 16px;font-size:12.5px;color:var(--ec-muted);border-top:1px solid var(--ec-rule-soft)}

/* the collection */
.ec-pf-listhead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.ec-pf-count{font-size:12.5px;color:var(--ec-muted)}
.ec-pf-list{display:flex;flex-direction:column;gap:9px}
.ec-pfrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(180px,auto) auto;gap:16px;align-items:center;
  padding:13px 16px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-pfrow-fict{background:var(--ec-recessed);border-style:dashed}
.ec-pfrow-main{min-width:0}
.ec-pfrow-addr{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:4px}
.ec-pf-open{text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--ec-serif);font-size:16px;font-weight:600;color:var(--ec-heading);
  text-decoration:underline;text-decoration-color:var(--ec-rule-strong);text-underline-offset:3px}
.ec-pf-open:hover{text-decoration-color:var(--ec-gold)}
.ec-pfrow-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:11.5px;color:var(--ec-muted)}
.ec-pfrow-meta code{font:600 11px/1 var(--ec-mono)}
.ec-pfrow-note{margin-top:5px;font-size:13px;line-height:1.5;max-width:70ch}
.ec-pfrow-miss{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ec-pfrow-miss span{padding:3px 7px;border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-chip);
  font-size:11px;color:var(--ec-muted);background:var(--ec-white)}
.ec-pfrow-dates{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.ec-pfrow-exp b{display:block;font-family:var(--ec-serif);font-size:14.5px;font-weight:600;color:var(--ec-heading)}
.ec-pfrow-exp span{font-size:11.5px;color:var(--ec-muted)}
.ec-pfrow-acts{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.ec-pfrow-acts .ec-btn{min-height:40px;padding:9px 11px;font-size:12.5px}
.ec-pf-none{padding:20px 16px;border:1px dashed var(--ec-rule);border-radius:var(--ec-r-panel);
  background:var(--ec-inset);font-size:13.5px;line-height:1.6;color:var(--ec-muted)}

/* detail drawer */
.ec-dwr-wrap{position:fixed;inset:0;z-index:80;background:rgba(28,43,32,.34);display:flex;justify-content:flex-end}
.ec-dwr-wrap[hidden]{display:none}
.ec-dwr{width:min(560px,100%);height:100%;display:flex;flex-direction:column;background:var(--ec-white);
  border-left:1px solid var(--ec-rule);box-shadow:var(--ec-shadow-floating)}
.ec-dwr-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--ec-rule)}
.ec-dwr-head h2{font-size:20px;margin-top:3px}
.ec-dwr-fict{margin-top:6px;font-size:12px;line-height:1.5;color:var(--ec-muted)}
.ec-dwr-body{flex:1;overflow-y:auto;padding:16px 20px}
.ec-dwr-foot{display:flex;flex-wrap:wrap;gap:9px;padding:14px 20px;border-top:1px solid var(--ec-rule);background:var(--ec-record)}
.ec-dtl-rate{padding:14px 16px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-recessed)}
.ec-dtl-row{display:grid;grid-template-columns:minmax(140px,38%) minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--ec-rule-soft)}
.ec-dtl-l{font:600 12px/1.45 var(--ec-sans);color:var(--ec-muted)}
.ec-dtl-v{font-size:13.5px;line-height:1.5}
.ec-dtl-v i{color:var(--ec-muted)}
.ec-dtl-n{display:block;margin-top:2px;font-size:11.5px;color:var(--ec-muted)}
.ec-dtl-note{padding:11px 13px;border:1px solid var(--ec-rule-soft);border-radius:var(--ec-r-panel);
  background:var(--ec-recessed);font-size:13.5px;line-height:1.6}
.ec-dtl-job,.ec-dtl-bound{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-dtl-job svg,.ec-dtl-bound svg{flex:none;margin-top:2px;color:var(--ec-glyph)}
.ec-dtl-bound{padding-top:11px;border-top:1px solid var(--ec-rule-soft)}

@media(max-width:1100px){
  .ec-pf-hero{grid-template-columns:1fr}
  /* One packed row rather than a grid: the record takes the space it needs and
     rating, date and actions pack to the right, wrapping only when they must.
     Stacking them in a right-hand column made the COLUMN the height driver —
     three blocks with gaps, 187px for a three-line record. */
  .ec-pfrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .ec-pfrow-main{flex:1 1 320px;min-width:0}
  .ec-pfrow-rate{flex:0 0 auto;margin-left:auto}
  .ec-pfrow-dates{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;text-align:left}
  .ec-pfrow-exp b{display:inline}
  .ec-pfrow-exp span{margin-left:5px}
  .ec-pfrow-acts{flex:0 0 auto;justify-content:flex-end}
}
@media(max-width:700px){
  /* Only now does stacking earn its place. */
  .ec-pfrow-main{flex:1 1 100%}
  .ec-pfrow-rate{margin-left:0}
  .ec-pfrow-rate,.ec-pfrow-dates,.ec-pfrow-acts{flex:1 1 100%;justify-content:flex-start}
}
@media(max-width:768px){
  /* The chart is replaced, not squeezed: below this width the same rows read as
     a chronological sequence in the same order. */
  .ec-hz,.ec-hz-qual:last-of-type{display:none}
  .ec-hz-list{display:flex}
  .ec-hz-empty{display:block}
  .ec-pf-sum{grid-template-columns:1fr}
  .ec-pfctl,.ec-pffilt,.ec-pf-hzhead,.ec-pf-hzbody{padding-left:15px;padding-right:15px}
  .ec-pffilt-s input{min-width:0;width:100%}
  .ec-pffilt label{flex:1 1 100%}
  .ec-dwr{width:100%}
  .ec-btn{min-height:46px}
}
@media(prefers-reduced-motion:reduce){.ec-hz-mark{transition:none}}

/* A date beyond the shown window states itself in words rather than clamping to
   the edge and implying a position it does not have. */
.ec-hz-past{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;
  min-height:32px;padding:6px 10px;cursor:pointer;border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-chip);
  background:var(--ec-white);font:600 11.5px/1.2 var(--ec-sans);color:var(--ec-muted)}
.ec-hz-past:hover{border-color:var(--ec-gold);color:var(--ec-gold-ink)}
.ec-hz-past svg{flex:none;opacity:.7}

/* ---------- Quote & Invoice builder ----------
   Split composition: controls left, live white document right. The sheet is the
   only pure-white surface here, because it is the only thing that prints. */
.ec-q-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.ec-q-ctl{display:flex;flex-direction:column;gap:12px;min-width:0}
.ec-q-seg{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.ec-q-status{margin-left:auto;min-width:170px}
.ec-q-sect{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-q-sect>summary{cursor:pointer;padding:12px 14px;min-height:44px;display:flex;align-items:center;gap:9px;
  font:600 13.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-q-sect-open{padding:13px 14px}
.ec-q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px;padding:0 14px 14px}
.ec-q-sect-open .ec-q-grid,.ec-q-sect-open>.ec-q-grid{padding:0}
.ec-q-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.ec-q-f-wide{grid-column:1/-1}
.ec-q-f>span{font:600 11.5px/1.35 var(--ec-sans);color:var(--ec-muted)}
.ec-q-f input,.ec-q-f select,.ec-q-f textarea{min-height:44px;padding:10px 11px;font:400 13.5px/1.35 var(--ec-sans);
  color:var(--ec-ink);border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);width:100%}
.ec-q-f textarea{min-height:auto;resize:vertical}
.ec-q-cur{font:600 10.5px/1 var(--ec-mono);color:var(--ec-muted);letter-spacing:.04em}
.ec-q-help,.ec-q-note{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--ec-muted)}
.ec-q-note{display:flex;gap:7px;align-items:flex-start;margin-top:9px;padding:0 14px 12px}
.ec-q-sect-open .ec-q-note{padding:0}
.ec-q-note svg{flex:none;margin-top:2px;color:var(--ec-glyph)}

.ec-q-tablewrap{overflow-x:auto;margin-bottom:11px}
.ec-q-lines{width:100%;border-collapse:collapse;min-width:640px}
.ec-q-lines th{padding:7px 6px;text-align:left;font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ec-muted);border-bottom:1px solid var(--ec-rule)}
.ec-q-lines td{padding:5px 4px;border-bottom:1px solid var(--ec-rule-soft);vertical-align:middle}
.ec-q-lines input,.ec-q-lines select{width:100%;min-height:44px;padding:9px 10px;font:400 13px/1.3 var(--ec-sans);
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);color:var(--ec-ink)}
.ec-q-lines .ec-q-sm{max-width:96px;text-align:right}
.ec-q-num{text-align:right;font-variant-numeric:tabular-nums}
.ec-q-lacts{display:flex;gap:3px;white-space:nowrap}
.ec-q-lacts button{min-width:32px;min-height:44px;cursor:pointer;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-chip);background:var(--ec-white);color:var(--ec-muted);font-size:12px}
.ec-q-lacts button:hover:not(:disabled){border-color:var(--ec-gold-line);color:var(--ec-gold-ink)}
.ec-q-lacts button:disabled{opacity:.4;cursor:not-allowed}
.ec-q-sum{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-top:12px;padding:11px 13px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-recessed);font-size:12.5px;color:var(--ec-muted)}
.ec-q-sum b{font-family:var(--ec-serif);font-size:15px;color:var(--ec-heading);margin-left:5px;font-variant-numeric:tabular-nums}
.ec-q-sumtot b{font-size:18px}
.ec-q-acts{display:flex;flex-wrap:wrap;gap:8px}

/* the document sheet */
.ec-q-prev{min-width:0}
.ec-q-prevnote{font-size:11.5px;color:var(--ec-muted);margin-bottom:8px}
.ec-q-sheet{padding:26px 28px;background:#fff;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  box-shadow:var(--ec-shadow-surface);font-size:12.5px;line-height:1.55;color:var(--ec-ink)}
.ec-q-sheethead{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  padding-bottom:16px;border-bottom:2px solid var(--ec-pine)}
.ec-q-logo{max-width:150px;max-height:52px;display:block;margin-bottom:8px}
.ec-q-firmname{font-family:var(--ec-serif);font-size:17px;font-weight:600;color:var(--ec-heading)}
.ec-q-firmline{font-size:11.5px;color:var(--ec-muted);white-space:pre-line}
.ec-q-title{text-align:right}
.ec-q-kind{font:600 11px/1 var(--ec-sans);letter-spacing:.2em;color:var(--ec-gold-ink)}
.ec-q-no{font-family:var(--ec-serif);font-size:20px;font-weight:600;margin:3px 0 7px}
.ec-q-dates{margin-left:auto;font-size:11.5px;border-collapse:collapse}
.ec-q-dates th{text-align:right;padding:1px 9px 1px 0;font-weight:400;color:var(--ec-muted)}
.ec-q-dates td{text-align:right;font-weight:600}
.ec-q-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:16px;padding:15px 0;
  border-bottom:1px solid var(--ec-rule-soft)}
.ec-q-plabel{font:600 9.5px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted);margin-bottom:5px}
.ec-q-pv{font-size:12.5px;white-space:pre-line}
.ec-q-items{width:100%;border-collapse:collapse;margin:15px 0 0}
.ec-q-items th{padding:6px 7px;text-align:left;font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ec-muted);border-bottom:1px solid var(--ec-pine)}
.ec-q-items td{padding:8px 7px;border-bottom:1px solid var(--ec-rule-soft);font-size:12.5px;font-variant-numeric:tabular-nums}
.ec-q-items i{color:var(--ec-muted)}
.ec-q-totals{display:flex;justify-content:flex-end;margin-top:13px}
.ec-q-totals table{border-collapse:collapse;min-width:240px}
.ec-q-totals th{text-align:left;padding:5px 18px 5px 0;font:400 12px/1.4 var(--ec-sans);color:var(--ec-muted)}
.ec-q-totals th span{display:block;font-size:10px}
.ec-q-totals td{text-align:right;padding:5px 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ec-q-grand th,.ec-q-grand td{border-top:1px solid var(--ec-pine);padding-top:8px;font-family:var(--ec-serif);font-size:16px;color:var(--ec-heading)}
.ec-q-notes{margin-top:18px;padding-top:13px;border-top:1px solid var(--ec-rule-soft)}
.ec-q-notes p{font-size:11.5px;line-height:1.6;margin-bottom:5px;color:var(--ec-muted)}
.ec-q-notes b{color:var(--ec-ink)}
.ec-q-pay{margin-top:13px;padding:11px 13px;background:var(--ec-recessed);border-radius:var(--ec-r-control)}
.ec-q-pay p{font-size:11.5px;white-space:pre-line}
.ec-q-foot{margin-top:18px;padding-top:11px;border-top:1px solid var(--ec-rule-soft);
  font-size:10.5px;line-height:1.5;color:var(--ec-muted)}

/* the register */
.ec-q-reg{margin-top:18px;padding-top:15px;border-top:1px solid var(--ec-rule)}
.ec-q-regrows{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.ec-q-regrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:10px 13px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);font-size:12.5px}
.ec-q-regrow-on{border-color:var(--ec-gold);background:var(--ec-selected)}
.ec-q-regk{font:600 10px/1 var(--ec-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ec-muted)}
.ec-q-regrow code{font:600 11.5px/1 var(--ec-mono)}
.ec-q-regc{flex:1 1 130px;min-width:0;color:var(--ec-muted)}
.ec-q-regrow b{font-family:var(--ec-serif);font-size:14px;font-variant-numeric:tabular-nums}
.ec-q-regd{font-size:11px;color:var(--ec-muted)}
.ec-q-regacts{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}
.ec-q-regacts button{min-height:40px;padding:9px 10px;cursor:pointer;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-chip);background:var(--ec-white);font:600 11.5px/1 var(--ec-sans);color:var(--ec-ink)}
.ec-q-regacts button:hover{border-color:var(--ec-gold-line);color:var(--ec-gold-ink)}
.ec-q-regdel:hover{border-color:var(--ec-coral-line)!important;color:var(--ec-coral-ink)!important}

/* ---------- Job Cost & Margin ---------- */
.ec-cost{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start}
.ec-cost-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
.ec-cost-f{display:flex;flex-direction:column;gap:4px}
.ec-cost-f>span{font:600 11.5px/1.35 var(--ec-sans);color:var(--ec-muted)}
.ec-cost-f input{min-height:44px;padding:10px 11px;text-align:right;font-variant-numeric:tabular-nums;
  font:400 13.5px/1.3 var(--ec-sans);border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);color:var(--ec-ink)}
.ec-cost-out{display:flex;flex-direction:column;gap:14px;min-width:0}
.ec-cost-rail{padding:14px 16px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-cost-raillab{display:flex;justify-content:space-between;align-items:baseline;
  font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-muted);margin:0 0 5px}
.ec-cost-raillab b{font-family:var(--ec-serif);font-size:15px;color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-cost-raillab:not(:first-child){margin-top:13px}
.ec-cost-bar{display:flex;height:15px;border-radius:3px;overflow:hidden;background:var(--ec-recessed)}
.ec-cost-bar i{display:block;height:100%}
.ec-cost-fee{background:var(--ec-pine)}
.ec-cost-pine{background:var(--ec-pine)}
.ec-cost-green{background:var(--ec-green)}
.ec-cost-gold{background:var(--ec-gold)}
.ec-cost-coral{background:var(--ec-coral)}
.ec-cost-muted{background:#8d9585}
.ec-cost-muted2{background:#b9bfae}
.ec-cost-empty{background:repeating-linear-gradient(135deg,var(--ec-recessed) 0 5px,var(--ec-inset) 5px 10px)}
.ec-cost-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;font-size:11.5px;color:var(--ec-muted)}
.ec-cost-key li{display:flex;align-items:center;gap:6px}
.ec-cost-key i{width:9px;height:9px;border-radius:2px;flex:none}
.ec-cost-key b{color:var(--ec-ink);font-variant-numeric:tabular-nums}
.ec-cost-none{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--ec-muted)}
.ec-cost-fig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:11px}
.ec-cost-big{padding:12px 14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white)}
.ec-cost-big span{display:block;font:600 11px/1.3 var(--ec-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ec-muted)}
.ec-cost-big b{display:block;margin:3px 0 2px;font-family:var(--ec-serif);font-size:23px;font-weight:600;
  color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-cost-big i{font-style:normal;font-size:11px;color:var(--ec-muted)}
.ec-cost-neg b{color:var(--ec-coral-ink)}
.ec-cost-acts{display:flex;flex-wrap:wrap;gap:8px}

/* Portfolio as a link, visibly not an instrument. */
.ec-conlink{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 11px;
  font:600 12px/1.2 var(--ec-sans);color:var(--ec-muted);text-decoration:none;border-radius:var(--ec-r-control)}
.ec-conlink:hover{color:var(--ec-gold-ink);background:var(--ec-hover)}
.ec-conlink:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}

@media(max-width:1080px){
  .ec-q-split,.ec-cost{grid-template-columns:minmax(0,1fr)}
  /* Preview below the builder, never a squeezed column beside it. */
  .ec-q-prev{order:2}
}
@media(max-width:768px){
  .ec-q-status{margin-left:0;width:100%}
  .ec-q-sheet{padding:18px 16px}
  .ec-q-title{text-align:left}
  .ec-q-dates{margin-left:0}
  .ec-q-dates th,.ec-q-dates td{text-align:left}
  .ec-q-regacts{margin-left:0;width:100%}
}
@media print{
  /* Only the sheet prints. */
  body>*{display:none!important}
  .ec-q-sheet{display:block!important;border:0;box-shadow:none;padding:0}
}

/* ---- density + sharpness pass ----
   Both consoles were correct and too loose: generous padding, one control per
   row, and a soft corner on things that are really instrument chrome. Sharper
   corners here mean "this is an instrument surface", against the softer corners
   the editable record objects keep. Nothing is hidden — the same controls, at a
   working density. */

/* Portfolio: summary becomes one tight rail, not five stacked cells. */
.ec-pf-hero{gap:18px}
.ec-pf-sum{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:6px}
.ec-sumcell{padding:10px 12px;gap:1px}
.ec-sumcell b{font-size:21px}
.ec-sumcell span{font-size:11px;line-height:1.3}
.ec-sumnote{padding:8px 12px;font-size:11px}
.ec-pf-hz{border-radius:8px}
.ec-pf-hzhead{padding:14px 16px 9px}
.ec-pf-hzbody{padding:2px 16px 14px}
.ec-pfctl{gap:10px 20px;padding:0 16px 9px}
.ec-pffilt{gap:7px;padding:9px 16px}
.ec-pffilt input[type=search],.ec-pffilt select{min-height:38px;padding:8px 10px;font-size:13px;border-radius:6px}
.ec-pffilt-s input{min-width:190px}
.ec-pffilt-c{min-height:38px;font-size:12.5px}
.ec-segrow{gap:5px}
.ec-hz{border-radius:6px}
.ec-hz-head{grid-template-columns:206px minmax(0,1fr)}
.ec-hz-row{grid-template-columns:206px minmax(0,1fr);min-height:48px}
.ec-hz-label{padding:8px 11px;gap:4px}
.ec-hz-corner{padding:7px 11px}
.ec-hz-axis{height:29px}
.ec-hz-qual{margin-top:8px;font-size:12px}

/* The property row: four columns become a tight two-line record, so several
   properties are legible at once instead of two filling the viewport. */
.ec-pf-list{gap:6px}
.ec-pfrow{grid-template-columns:minmax(0,1fr) auto minmax(150px,auto) auto;gap:12px;padding:10px 13px;border-radius:7px}
.ec-pf-open{font-size:15px}
.ec-pfrow-addr{gap:7px;margin-bottom:3px}
.ec-pfrow-meta{gap:7px;font-size:11px}
.ec-pfrow-note{margin-top:4px;font-size:12.5px}
.ec-pfrow-miss{margin-top:4px;gap:5px}
.ec-pfrow-miss span{padding:2px 6px;font-size:10.5px;border-radius:4px}
.ec-pfrow-exp b{font-size:13.5px}
.ec-pfrow-acts{gap:5px}
.ec-pfrow-acts .ec-btn{min-height:36px;padding:8px 10px;font-size:12px;border-radius:6px}

/* Desk: the dock is chrome, so it reads as one tight instrument strip. */
.ec-conbar{gap:2px}
.ec-congroup{padding:6px 10px}
.ec-conpills{gap:4px}
.ec-conpill{min-height:38px;padding:9px 11px;font-size:12.5px;border-radius:6px}
.ec-conpill-state{font-size:9.5px;padding:2px 5px;border-radius:4px}
.ec-congroup-h{font-size:9.5px;letter-spacing:.13em}
.ec-conlink{min-height:38px;padding:8px 10px;font-size:11.5px;border-radius:6px}
.ec-instr{border-radius:8px}
.ec-instr-top{padding:14px 16px 11px}
.ec-instr-q{font-size:19px}
.ec-instr-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
.ec-instr-cell{padding:9px 13px}
.ec-instr-notice{padding:9px 13px;font-size:12px}
.ec-instr-body{padding:14px 16px}
.ec-route{gap:3px}
.ec-route-node{padding:8px 10px;border-radius:6px}

/* Builder: two form columns instead of one, tighter fields, sharper corners. */
.ec-q-split{gap:14px}
.ec-q-ctl{gap:9px}
.ec-q-sect{border-radius:7px}
.ec-q-sect>summary{padding:10px 12px;min-height:40px;font-size:13px}
.ec-q-sect-open{padding:11px 12px}
.ec-q-grid{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:8px;padding:0 12px 12px}
.ec-q-f>span{font-size:11px}
.ec-q-f input,.ec-q-f select,.ec-q-f textarea{min-height:38px;padding:8px 10px;font-size:13px;border-radius:6px}
.ec-q-lines th{padding:6px 5px;font-size:10px}
.ec-q-lines td{padding:4px 3px}
.ec-q-lines input,.ec-q-lines select{min-height:38px;padding:8px 9px;font-size:12.5px;border-radius:6px}
.ec-q-lacts button{min-height:38px;min-width:29px;border-radius:5px}
.ec-q-sum{padding:9px 12px;gap:6px 15px;border-radius:7px}
.ec-q-acts{gap:6px}
.ec-q-acts .ec-btn{min-height:40px;padding:9px 12px;font-size:12.5px;border-radius:6px}
.ec-q-sheet{padding:22px 24px}
.ec-q-reg{margin-top:14px;padding-top:12px}
.ec-q-regrow{padding:8px 11px;gap:5px 10px;border-radius:6px;font-size:12px}
.ec-q-regacts button{min-height:36px;padding:8px 9px;font-size:11px;border-radius:5px}

/* Cost: inputs two-up, rail tighter, figures side by side. */
.ec-cost{gap:14px}
.ec-cost-in{grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr));gap:8px}
.ec-cost-f>span{font-size:11px}
.ec-cost-f input{min-height:38px;padding:8px 10px;font-size:13px;border-radius:6px}
.ec-cost-out{gap:11px}
.ec-cost-rail{padding:12px 14px;border-radius:7px}
.ec-cost-big{padding:10px 12px;border-radius:7px}
.ec-cost-big b{font-size:21px}
.ec-cost-acts .ec-btn{min-height:40px;padding:9px 12px;font-size:12.5px;border-radius:6px}

/* Below 768 the 38px controls go back to 44: density is a pointer affordance,
   and a thumb needs the target whatever the layout is doing. */
@media(max-width:768px){
  .ec-pffilt input[type=search],.ec-pffilt select,.ec-pffilt-c,
  .ec-q-f input,.ec-q-f select,.ec-q-f textarea,.ec-q-lines input,.ec-q-lines select,
  .ec-q-lacts button,.ec-cost-f input,.ec-conpill,.ec-conlink,
  .ec-pfrow-acts .ec-btn,.ec-q-acts .ec-btn,.ec-q-regacts button,.ec-cost-acts .ec-btn{min-height:44px}
  .ec-pf-sum{grid-template-columns:1fr}
}

/* EPC band colours. Confined to the rating instrument and the band rail — they
   appear nowhere else in the product, so they always mean "recorded rating" and
   never status. Every band also carries its letter, so this is never colour-only. */
.ec-band-A{background:#008054;border-color:#008054;color:#fff}
.ec-band-B{background:#19b459;border-color:#19b459;color:#fff}
.ec-band-C{background:#8dce46;border-color:#8dce46;color:#1c2b20}
.ec-band-D{background:#ffd500;border-color:#e6c000;color:#1c2b20}
.ec-band-E{background:#fcaa65;border-color:#f09a4f;color:#1c2b20}
.ec-band-F{background:#ef8023;border-color:#ef8023;color:#fff}
.ec-band-G{background:#e9153b;border-color:#e9153b;color:#fff}
.ec-band-none{background:repeating-linear-gradient(135deg,#e2e0d6 0 5px,#eeece2 5px 10px);color:var(--ec-muted)}
/* Unrecorded bands are ghosted, so the recorded one is unmistakable while the
   whole A–G hierarchy stays visible. */
.ec-rate-step{opacity:.26;filter:saturate(.5)}
.ec-rate-on{opacity:1;filter:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1.5px var(--ec-ink)}
.ec-rate-lg .ec-rate-on{box-shadow:0 0 0 2px var(--ec-ink)}

.ec-sumbands{grid-column:1/-1;padding:11px 12px;background:var(--ec-white);border-top:1px solid var(--ec-rule-soft)}
.ec-sumbands-h{font:600 9.5px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted);margin-bottom:6px}
.ec-sumbands-bar{display:flex;height:20px;border-radius:4px;overflow:hidden;border:1px solid var(--ec-rule)}
.ec-sumbands-bar i{display:flex;align-items:center;justify-content:center;min-width:15px;border:0}
.ec-sumbands-bar span{font:600 10.5px/1 var(--ec-sans)}
.ec-sumbands-k{display:flex;flex-wrap:wrap;gap:4px 11px;margin-top:6px;font-size:10.5px;color:var(--ec-muted)}
.ec-sumbands-k b{color:var(--ec-ink)}

/* The attention window, drawn on the track behind the markers. */
.ec-hz-window{position:absolute;top:0;bottom:0;background:var(--ec-gold-ground);
  border-right:1px dashed var(--ec-gold-line)}

/* ---- route as a rail ----
   The route was six buttons with arrows between them, which read as a toolbar.
   One continuous rail with a spine reads as what it is: a record moving through
   its stages. The rail is drawn behind the nodes, so it survives wrapping. */
.ec-route{position:relative;flex-wrap:wrap;align-items:stretch}
@supports (grid-template-rows: subgrid){
  .ec-route:not(.ec-route-tall){display:grid;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .ec-route:not(.ec-route-tall) .ec-route-node{display:grid;grid-row:1/-1;
    grid-template-rows:subgrid;align-content:start}
  .ec-route:not(.ec-route-tall) .ec-route-n{min-height:0}
}
.ec-route-node{position:relative;flex:1 1 132px;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:9px 11px 9px 13px;text-align:left;background:var(--ec-white);
  border:1px solid var(--ec-rule);border-radius:0;cursor:pointer}
.ec-route-node:first-of-type{border-radius:7px 0 0 7px}
.ec-route-node:last-of-type{border-radius:0 7px 7px 0}
.ec-route-node+.ec-route-node{border-left:0}
/* A notch between stages: the record passes from one to the next, and the shape
   says so without an arrow glyph between every pair. */
.ec-route-node+.ec-route-node::before{content:"";position:absolute;left:-1px;top:50%;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--ec-white);
  border-right:1px solid var(--ec-rule);border-top:1px solid var(--ec-rule);z-index:2}
.ec-route-node:hover{background:var(--ec-hover);z-index:3}
.ec-route-node:hover::before{background:var(--ec-hover)}
.ec-route-node[aria-current="true"]{background:var(--ec-pine);border-color:var(--ec-pine);z-index:3}
.ec-route-node[aria-current="true"] .ec-route-n{color:var(--ec-gold)}
.ec-route-node[aria-current="true"] .ec-route-s{color:rgba(255,255,255,.72)}
.ec-route-node[aria-current="true"] .ec-route-v{color:var(--ec-rev-text)}
.ec-route-node[aria-current="true"]::before{background:var(--ec-pine);border-color:var(--ec-pine)}
.ec-route-n{display:flex;align-items:flex-start;gap:5px;font:600 9.5px/1.2 var(--ec-sans);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ec-muted);
  min-height:calc(2 * 1.2em)}
.ec-route-n svg{flex:none;margin-top:-1px}
.ec-route-v{font-family:var(--ec-serif);font-size:13.5px;font-weight:600;color:var(--ec-heading);line-height:1.25}
.ec-route-s{font-size:10.5px;line-height:1.35;color:var(--ec-muted)}
/* .ec-route-arrow is gone from the markup, not merely hidden: a hidden sibling
   between the nodes broke the adjacent-sibling selector the notch depends on. */
@media(max-width:768px){
  .ec-route-node{flex:1 1 100%;border-left:1px solid var(--ec-rule)!important;border-radius:7px!important}
  .ec-route-node+.ec-route-node{border-top:0;margin-top:-1px}
  .ec-route-node+.ec-route-node::before{display:none}
}

.ec-routewrap{max-width:var(--ec-max);margin:0 auto 12px;padding:0 var(--ec-s4)}
.ec-routewrap-h{font:600 9.5px/1 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:6px}
/* Readiness shows the same route vertically, so the rail rules must not fight it. */
.ec-route-tall{flex-direction:column;flex-wrap:nowrap}
.ec-route-tall .ec-route-node{flex:0 0 auto;border-left:1px solid var(--ec-rule)!important;border-radius:7px!important}
.ec-route-tall .ec-route-node+.ec-route-node{border-top:0;margin-top:-1px}
.ec-route-tall .ec-route-node+.ec-route-node::before{display:none}
/* Full-width nodes: the labels cannot wrap, so the two-line floor would only
   add dead space. */
.ec-route-tall .ec-route-n{min-height:0}

/* The note is detail, available in full in the drawer; the missing-field chips
   are the useful thing for an owner scanning a portfolio. So the note gets one
   line and the chips share the meta row rather than claiming their own. */
.ec-pfrow-note{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}
.ec-pfrow-miss{margin-top:4px}
.ec-pfrow-addr .ec-fict{order:9}

/* The label chips and the fictional marker sit on the address line rather than
   claiming one of their own. */
.ec-pfrow-miss{flex-wrap:nowrap;overflow:hidden}

/* The record column takes the slack; the date block is now just a date. */
@media(min-width:701px) and (max-width:1100px){
  .ec-pfrow-main{flex:1 1 260px}
  .ec-pfrow-dates{max-width:200px}
}
.ec-pfrow-addr{align-items:center}

/* ---------- Job Library: maintenance disclosure, danger zone, job menu ----------
   The page leads with work. Storage and backups are necessary but are not why
   anyone opens a Job Library, so they sit behind one disclosure; the one
   irreversible action sits in its own region, away from everything routine. */
.ec-maint{margin-top:26px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-record)}
.ec-maint>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline;justify-content:space-between;
  padding:14px 18px;min-height:48px;font:600 15px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-maint>summary::marker{color:var(--ec-glyph)}
.ec-maint-state{font:400 12.5px/1.4 var(--ec-sans);color:var(--ec-muted)}
.ec-maint-body{padding:0 18px 18px}
.ec-maint-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;align-items:start}

/* Repeated-field comparison belongs in a table, not two prose cards. */
.ec-ctable{width:100%;border-collapse:collapse;font-size:13px}
.ec-ctable th,.ec-ctable td{padding:7px 9px;border-bottom:1px solid var(--ec-rule-soft);text-align:left;vertical-align:top}
.ec-ctable thead th{font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-muted);
  border-bottom:1px solid var(--ec-rule)}
.ec-ctable tbody th{font-weight:400;color:var(--ec-muted);width:42%}
.ec-ctable td{font-weight:600;color:var(--ec-heading)}
.ec-ctable-no{color:var(--ec-coral-ink)}

.ec-danger{margin-top:26px;padding:18px 20px;border:1px solid var(--ec-coral-line);border-left:4px solid var(--ec-coral);
  border-radius:var(--ec-r-region);background:var(--ec-coral-ground)}
.ec-danger-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;color:var(--ec-coral-ink)}
.ec-danger-head h2{font-size:16px;color:var(--ec-coral-ink)}
.ec-danger-lede{font-size:13px;line-height:1.6;color:var(--ec-muted);max-width:74ch;margin-bottom:12px}
.ec-danger-inv{font-size:13.5px;line-height:1.65;max-width:78ch;margin-bottom:12px}

.ec-dlg-list{margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.65}
.ec-dlg-list li{margin-bottom:4px}
.ec-dlg-note{padding:10px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);
  background:var(--ec-recessed);font-size:13px;line-height:1.55}
.ec-dlg-warn{border-color:var(--ec-coral-line);background:var(--ec-coral-ground);color:var(--ec-coral-ink)}

/* The next-action line is the card's headline, so it outranks the counts. */
.ec-jobnext{display:flex;gap:8px;align-items:flex-start;margin:5px 0 4px;font-size:13.5px;line-height:1.5;max-width:72ch}
.ec-jobnext svg{flex:none;margin-top:2px}
.ec-jobnext-coral{color:var(--ec-coral-ink)}
.ec-jobnext-gold{color:var(--ec-gold-ink)}
.ec-jobnext-green,.ec-jobnext-plain{color:var(--ec-muted)}

.ec-jobmenu{position:relative}
.ec-jobmenu-pop{position:absolute;right:0;top:calc(100% + 5px);z-index:20;min-width:210px;display:flex;flex-direction:column;
  padding:5px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);
  box-shadow:var(--ec-shadow-floating)}
.ec-jobmenu-pop[hidden]{display:none}
.ec-jobmenu-pop>a,.ec-jobmenu-pop>button{display:block;width:100%;text-align:left;min-height:40px;padding:10px 11px;
  border:0;border-radius:var(--ec-r-control);background:none;cursor:pointer;
  font:400 13.5px/1.35 var(--ec-sans);color:var(--ec-ink);text-decoration:none}
.ec-jobmenu-pop>a:hover,.ec-jobmenu-pop>button:hover{background:var(--ec-hover)}
.ec-jobmenu-danger{color:var(--ec-coral-ink)!important;border-top:1px solid var(--ec-rule-soft)!important;
  border-radius:0 0 var(--ec-r-control) var(--ec-r-control)!important;margin-top:4px}
.ec-jobmenu-danger:hover{background:var(--ec-coral-ground)!important}

/* ---------- Trust: the short answers ----------
   A trust page nobody can scan is not a trust page. Repeated-field comparison in
   a table, and a status vocabulary of exactly three values so "we tested it" can
   never be confused with "it should work". */
.ec-truth{margin-bottom:30px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-white);overflow:hidden}
.ec-truth-head{padding:16px 18px;background:var(--ec-record);border-bottom:1px solid var(--ec-rule)}
.ec-truth-head h2{font-size:18px;margin-bottom:5px}
.ec-truth-head p{font-size:13px;line-height:1.6;color:var(--ec-muted);max-width:82ch}
.ec-truth-date{margin-top:6px;font:600 11.5px/1.4 var(--ec-sans);color:var(--ec-muted)}
.ec-truth-t{width:100%;border-collapse:collapse;font-size:13.5px}
.ec-truth-t thead th{padding:9px 14px;font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ec-muted);text-align:left;border-bottom:1px solid var(--ec-rule);background:var(--ec-recessed)}
.ec-truth-t tbody th,.ec-truth-t tbody td{padding:11px 14px;border-bottom:1px solid var(--ec-rule-soft);
  text-align:left;vertical-align:top;line-height:1.55}
.ec-truth-t tbody th{font-weight:600;width:26%}
.ec-truth-t tbody th a{color:var(--ec-heading);text-decoration-color:var(--ec-rule-strong);text-underline-offset:2px}
.ec-truth-t tbody td:last-child{width:150px}
.ec-truth-t tbody tr:last-child th,.ec-truth-t tbody tr:last-child td{border-bottom:0}
/* Status carries a word, not only a colour. */
.ec-tst{display:inline-block;padding:3px 8px;border-radius:var(--ec-r-chip);font:600 11.5px/1.4 var(--ec-sans);white-space:nowrap}
.ec-tst-ok{border:1px solid var(--ec-green-line);background:var(--ec-green-ground);color:var(--ec-green-ink)}
.ec-tst-lim{border:1px solid var(--ec-gold-line);background:var(--ec-gold-ground);color:var(--ec-gold-ink)}
.ec-tst-no{border:1px solid var(--ec-coral-line);background:var(--ec-coral-ground);color:var(--ec-coral-ink)}
@media(max-width:768px){
  /* The table becomes stacked rows rather than three crushed columns. */
  .ec-truth-t thead{display:none}
  .ec-truth-t tbody tr{display:block;border-bottom:1px solid var(--ec-rule);padding:11px 14px}
  .ec-truth-t tbody th,.ec-truth-t tbody td{display:block;width:auto;padding:0 0 5px;border:0}
}

/* Example view is a MODE with a banner and a way out, not a checkbox whose
   effect a reader has to infer from a contradiction between a zero and a list. */
.ec-modebar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:20px;padding:14px 17px;border:1px solid var(--ec-gold);border-left:4px solid var(--ec-gold);
  border-radius:var(--ec-r-region);background:var(--ec-gold-ground)}
.ec-modebar-t{display:flex;gap:11px;align-items:flex-start;min-width:0}
.ec-modebar-t svg{flex:none;margin-top:2px;color:var(--ec-gold-ink)}
.ec-modebar-t b{display:block;font:600 14.5px/1.4 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-modebar-t span{display:block;margin-top:3px;font-size:13px;line-height:1.55;color:var(--ec-ink);max-width:78ch}
.ec-sumhead{grid-column:1/-1;padding:9px 15px;background:var(--ec-gold-ground);border-bottom:1px solid var(--ec-gold-line);
  font:600 12px/1.4 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-sumempty{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;padding:12px 15px;
  background:var(--ec-white);font-size:13px;line-height:1.55;color:var(--ec-ink)}
.ec-sumempty svg{flex:none;margin-top:2px;color:var(--ec-gold-ink)}

/* Advanced filtering behind one control, so the timeline is the first thing
   seen rather than the ninth. */
.ec-pffilt-d{border-top:1px solid var(--ec-rule-soft);background:var(--ec-recessed)}
.ec-pffilt-d>summary{cursor:pointer;display:flex;align-items:center;gap:9px;padding:12px 20px;min-height:46px;
  font:600 13.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-pffilt-d[open]>summary{border-bottom:1px solid var(--ec-rule-soft)}
/* Markers large enough to carry urgency, and the row states it in words too. */
.ec-hz-mark{width:26px;height:26px;margin:-13px 0 0 -13px;border-width:3px}
.ec-hz-row{min-height:66px}
.ec-rate-step{width:11px}
.ec-rate-on{box-shadow:0 0 0 1px var(--ec-pine)}

/* One dominant action. The alternatives are real routes, not decoration, so they
   stay on the page — behind a named disclosure instead of competing with the
   thing most first-time readers should do. */
.ec-cta-lg{min-height:52px;padding:15px 20px;font-size:16px}
.ec-otherways{margin-top:16px;max-width:60ch}
.ec-otherways>summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 2px;
  font:600 14px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-otherways-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:9px;padding-top:4px}
.ec-otherways-b a{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);text-decoration:none}
.ec-otherways-b a:hover{border-color:var(--ec-gold-line);background:var(--ec-hover)}
.ec-otherways-b img,.ec-otherways-b svg{flex:none;margin-top:1px;color:var(--ec-glyph)}
.ec-otherways-b b{display:block;font-size:14px;color:var(--ec-heading);margin-bottom:2px}
.ec-otherways-b span{font-size:12.5px;line-height:1.5;color:var(--ec-muted)}

/* ---------- the comparison the product exists for ----------
   Three recorded values in one row instead of three prose blocks a screen apart.
   Deliberately NOT sorted, ranked, or coloured by plausibility: order is the
   order the assessor recorded, and no cell is styled as the right answer. */
.ec-cmpstrip{margin:10px 0 14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);
  background:var(--ec-white);overflow:hidden}
.ec-cmpstrip-h{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;justify-content:space-between;
  padding:10px 13px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-recessed)}
.ec-cmpstrip-sp{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid var(--ec-gold-line);
  border-radius:var(--ec-r-chip);background:var(--ec-gold-ground);font:600 12.5px/1.3 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-cmpstrip-r{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ec-cmpcell{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:13px 14px;border:0;border-left:1px solid var(--ec-rule-soft);background:none;min-width:0}
.ec-cmpcell:first-child{border-left:0}
.ec-cmpcell:hover{background:var(--ec-hover)}
.ec-cmpcell:focus-visible{outline:2px solid var(--ec-gold);outline-offset:-2px}
.ec-cmpcell-id{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;font-size:11.5px;color:var(--ec-muted)}
.ec-cmpcell-id code{font:600 10.5px/1 var(--ec-mono);padding:3px 5px;border-radius:4px;
  background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-cmpcell-v{font-family:var(--ec-serif);font-size:26px;font-weight:600;line-height:1.05;color:var(--ec-heading)}
.ec-cmpcell-m{font-size:12.5px;line-height:1.45;color:var(--ec-muted)}
.ec-cmpcell-role{margin-top:3px;padding:3px 8px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-chip);
  font:600 11.5px/1.35 var(--ec-sans);color:var(--ec-ink);background:var(--ec-recessed)}
.ec-cmpcell-norole{border-style:dashed;color:var(--ec-muted)}
.ec-cmpstrip-f{display:flex;gap:8px;align-items:flex-start;padding:10px 13px;border-top:1px solid var(--ec-rule-soft);
  font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-cmpstrip-f svg{flex:none;margin-top:2px}
.ec-cmp1{display:flex;gap:9px;align-items:flex-start;margin:10px 0 12px;padding:11px 13px;
  border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-panel);background:var(--ec-inset);
  font-size:13px;line-height:1.55;color:var(--ec-muted)}
.ec-cmp1 svg{flex:none;margin-top:2px}
@media(max-width:820px){
  .ec-cmpstrip-r{grid-auto-flow:row;grid-auto-columns:auto}
  .ec-cmpcell{border-left:0;border-top:1px solid var(--ec-rule-soft)}
  .ec-cmpcell:first-child{border-top:0}
}

/* Confirms the link between a comparison cell and its source row. Motion is a
   relationship cue here, so reduced-motion keeps the outline and drops the fade. */
.ec-src-lit{outline:2px solid var(--ec-gold);outline-offset:3px;transition:outline-color var(--ec-t-slow,.4s) ease}
.ec-src:focus-visible{outline:2px solid var(--ec-gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ec-src-lit{transition:none}}

/* ---------- the carry-forward decision ----------
   Two outcomes, each stating the destination that follows from it, at a weight
   that matches the consequence. Selection is carried by fill, border, a mark and
   the word itself — not by a 1px border difference. */
.ec-decide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px;margin-bottom:12px}
.ec-decide-o{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;cursor:pointer;
  padding:14px 15px;min-height:76px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);
  background:var(--ec-white)}
.ec-decide-o:hover{border-color:var(--ec-green-line);background:var(--ec-hover)}
.ec-decide-o:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.ec-decide-t{display:flex;align-items:center;gap:9px;font:600 14.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-decide-t svg{flex:none;color:var(--ec-glyph)}
.ec-decide-d{font-size:12.5px;line-height:1.5;color:var(--ec-muted)}
.ec-decide-o[aria-pressed="true"]{border-color:var(--ec-green);border-width:2px;padding:13px 14px;
  background:var(--ec-green-ground);box-shadow:inset 3px 0 0 var(--ec-green)}
.ec-decide-o[aria-pressed="true"] .ec-decide-t{color:var(--ec-green-ink)}
.ec-decide-o[aria-pressed="true"] .ec-decide-t svg{color:var(--ec-green)}
.ec-decide-o[aria-pressed="true"] .ec-decide-d{color:var(--ec-ink)}

/* ---------- Source Start value panel ----------
   The entry screen used to be a record chooser with the explanation hidden. The
   path, the worked difference and the format contract now sit above the chooser,
   so the reason to use the feature arrives before the question about which
   record to use it on. */
.ec-ssv{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-record);overflow:hidden}
.ec-ssv-path{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--ec-rule)}
.ec-ssv-path>div{padding:13px 14px;border-left:1px solid var(--ec-rule-soft);background:var(--ec-white);min-width:0}
.ec-ssv-path>div:first-child{border-left:0}
.ec-ssv-path span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-bottom:6px;
  border-radius:50%;background:var(--ec-gold-soft);color:var(--ec-gold-ink);font:600 11.5px/1 var(--ec-sans)}
.ec-ssv-path b{display:block;font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading)}
.ec-ssv-path i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ec-muted)}
.ec-ssv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:22px;padding:17px 18px}
.ec-ssv-ex{border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);overflow:hidden}
.ec-ssv-exr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}
.ec-ssv-exr>div{padding:12px 13px;border-left:1px solid var(--ec-rule-soft)}
.ec-ssv-exr>div:first-child{border-left:0}
.ec-ssv-exr code{display:inline-block;margin-bottom:4px;padding:3px 5px;border-radius:4px;
  background:var(--ec-gold-soft);color:var(--ec-gold-ink);font:600 10.5px/1 var(--ec-mono)}
.ec-ssv-exr span{display:block;font-size:11.5px;line-height:1.4;color:var(--ec-muted)}
.ec-ssv-exr b{display:block;margin-top:4px;font-family:var(--ec-serif);font-size:23px;font-weight:600;color:var(--ec-heading)}
.ec-ssv-exd{padding:8px 13px;border-top:1px solid var(--ec-rule-soft);border-bottom:1px solid var(--ec-rule-soft);
  background:var(--ec-gold-ground);font:600 13px/1.4 var(--ec-sans);color:var(--ec-gold-ink)}
.ec-ssv-exn{padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-ssv-priv{display:flex;gap:8px;align-items:center;margin-top:11px;padding:9px 11px;
  border:1px solid var(--ec-green-line);border-radius:var(--ec-r-control);background:var(--ec-green-ground);
  font:600 12.5px/1.4 var(--ec-sans);color:var(--ec-green-ink)}
.ec-ssv-priv svg{flex:none}
@media(max-width:880px){
  .ec-ssv-path{grid-auto-flow:row;grid-auto-columns:auto}
  .ec-ssv-path>div{border-left:0;border-top:1px solid var(--ec-rule-soft);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
  .ec-ssv-path>div:first-child{border-top:0}
  .ec-ssv-path span{margin-bottom:0}
  .ec-ssv-path i{flex:1 1 100%}
}

/* A state word inside a strip control, quieter than its label. */
.ec-btn-sub{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:var(--ec-r-chip);
  background:var(--ec-recessed);font:600 11px/1.4 var(--ec-sans);color:var(--ec-muted)}

/* ---------- hero signature scene ----------
   The comparison field is the visual reason to believe the proposition, so it
   is a real instrument, not a screenshot: three sources on ONE scale, where
   the misalignment IS the difference. Neither end of the axis is styled as
   correct, because the product does not know which is.

   Namespaced ec-hf-* deliberately: .ec-cmp was already claimed twice. */
.ec-hero-bound{margin-top:12px;padding-left:13px;border-left:3px solid var(--ec-gold);
  font:600 15.5px/1.55 var(--ec-sans);color:var(--ec-heading)}
.ec-hero-acts{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:20px}
.ec-hero-tert{margin-top:12px;font-size:14.5px;color:var(--ec-muted)}
.ec-hero-tert a{color:var(--ec-ink)}

.ec-hf{padding:15px 16px 13px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-white)}
.ec-hf-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  font-family:var(--ec-serif);font-size:16px;font-weight:600;color:var(--ec-heading);margin-bottom:15px}
.ec-hf-topic{font:600 11px/1.4 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-muted)}
.ec-hf-field{position:relative;display:flex;flex-direction:column;gap:11px;padding-bottom:22px}
.ec-hf-row{display:grid;grid-template-columns:minmax(118px,146px) minmax(0,1fr);gap:12px;align-items:center}
.ec-hf-src{display:flex;gap:7px;align-items:flex-start;min-width:0}
.ec-hf-src code{white-space:nowrap;flex:none}
.ec-hf-name{font:600 12px/1.35 var(--ec-sans);color:var(--ec-ink);min-width:0}
.ec-hf-name i{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--ec-muted)}
/* One shared track per row: each bar is the value's distance along the scale,
   so three unequal bars read as one disagreement without arithmetic. */
.ec-hf-track{position:relative;height:26px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-hf-bar{position:absolute;left:0;bottom:-1px;height:3px;background:var(--ec-rule-strong);border-radius:2px}
.ec-hf-mark{position:absolute;bottom:-5px;width:11px;height:11px;margin-left:-5px;border-radius:50%;
  border:2px solid var(--ec-white);background:var(--ec-glyph)}
/* Colour and shape carry the KNOWLEDGE BASIS — measured, documentary, context
   only — never correctness, and the field reads in greyscale. */
.ec-hf-mark[data-tone="measured"]{background:var(--ec-green)}
.ec-hf-mark[data-tone="documentary"]{background:var(--ec-gold);border-radius:2px}
.ec-hf-mark[data-tone="context"]{background:var(--ec-white);border-color:var(--ec-glyph);border-radius:2px;transform:rotate(45deg)}
.ec-hf-val{position:absolute;bottom:5px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--ec-serif);font-size:16px;font-weight:600;color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-hf-scale{position:absolute;left:158px;right:0;bottom:0;height:14px}
.ec-hf-scale span{position:absolute;transform:translateX(-50%);font:600 10px/1 var(--ec-mono);color:var(--ec-glyph)}
/* The span is the point: a measured distance, labelled, owned by neither end. */
/* The overlay carries the tracks' geometry so the span's percentages resolve
   against the same axis the markers do. Percentages of the whole field put the
   bracket past the markers it joins. */
.ec-hf-spanwrap{position:absolute;left:158px;right:0;top:-5px;bottom:17px;pointer-events:none}
.ec-hf-span{position:absolute;top:0;bottom:0;
  border-left:1px dashed var(--ec-gold-line);border-right:1px dashed var(--ec-gold-line);
  background:var(--ec-gold-ground)}
.ec-hf-spanlabel{position:absolute;top:-1px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:3px 8px;border-radius:var(--ec-r-chip);background:var(--ec-gold);color:var(--ec-ink);
  font:600 11.5px/1.3 var(--ec-sans)}
.ec-hf-note{margin-top:3px;font-size:13px;line-height:1.5;color:var(--ec-muted)}

/* Retrofit's field is a lane, not an axis — the geometries differ because the
   work does, which is the claim the page has to make visible. */
.ec-hf-lane{display:flex;flex-direction:column;gap:8px;padding-left:14px;border-left:2px solid var(--ec-green-line)}
.ec-hf-lrow{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ec-hf-what{flex:1 1 190px;min-width:0;font-size:13px;line-height:1.5;color:var(--ec-ink)}
.ec-hf-lgap{padding-top:8px;border-top:1px dashed var(--ec-rule)}

/* The assessor's node is marked, because the product's whole claim is that this
   step is not automated. */

@media(max-width:1080px){
  .ec-hf-row{grid-template-columns:minmax(108px,128px) minmax(0,1fr)}
  .ec-hf-scale,.ec-hf-spanwrap{left:140px}
}
@media(max-width:560px){
  /* Stacks rather than compressing: the source label sits above its own track,
     so neither is squeezed past reading. */
  .ec-hf-row{grid-template-columns:1fr;gap:4px}
  .ec-hf-scale,.ec-hf-spanwrap{left:0}
  .ec-hf-val{font-size:14.5px}
}

/* At the stacked width the signature instrument is what must not fall below the
   fold, so the copy column takes the full measure and the vertical spend between
   its parts tightens. The instrument stays second in reading order — the copy
   still leads — it simply starts sooner. */
@media(max-width:1080px){
  .ec-hero{gap:22px}
  .ec-hero-copy{max-width:none}
  .ec-hero-copy .ec-lede{max-width:88ch;font-size:16px}
  .ec-hero-bound{margin-top:10px}
  .ec-hero-acts{margin-top:15px}
  .ec-hero-tert{margin-top:9px}
}

/* ---------- Evidence Desk · master / detail ----------
   list · one editor · live destination. The previous stack rendered a full
   editor per reference, so the assessor scrolled past four to reach the fifth
   and could never see the rendered index at the same time. */
.ec-evdesk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:0;border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);overflow:clip}
.ec-evlist{display:flex;flex-direction:column;border-right:1px solid var(--ec-rule);
  background:var(--ec-recessed);max-height:520px;overflow-y:auto}
.ec-evitem{position:relative;display:flex;gap:10px;align-items:flex-start;width:100%;
  padding:12px 13px;min-height:44px;cursor:pointer;text-align:left;border:0;
  border-bottom:1px solid var(--ec-rule-soft);background:transparent}
.ec-evitem:hover{background:var(--ec-hover)}
/* Selected is carried by fill, a left bar AND weight — never colour alone. */
.ec-evitem[aria-selected="true"]{background:var(--ec-white);box-shadow:inset 3px 0 0 var(--ec-gold)}
.ec-evitem[aria-selected="true"] .ec-evitem-t{color:var(--ec-heading)}
.ec-evitem-i{flex:none;margin-top:1px;color:var(--ec-glyph)}
.ec-evitem-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.ec-evitem-t{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;font:600 13px/1.35 var(--ec-sans)}
.ec-evitem-t code{font:600 10.5px/1 var(--ec-mono);letter-spacing:.04em;padding:3px 5px;
  border-radius:4px;background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-evitem-m{font-size:11.5px;line-height:1.45;color:var(--ec-muted)}
/* A shape, not just a hue: the flag marks a reference still needing a caption. */
.ec-evitem-flag{flex:none;width:7px;height:7px;margin-top:5px;border-radius:2px;
  background:var(--ec-coral);transform:rotate(45deg)}
.ec-evedit{padding:15px 16px;display:flex;flex-direction:column;gap:11px;min-width:0}
.ec-evedit-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-family:var(--ec-serif);font-size:16.5px;font-weight:600}
.ec-evedit-f{font:400 11.5px/1.5 var(--ec-mono);color:var(--ec-muted);word-break:break-word}
.ec-evedit-n{font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-evsegs{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.ec-evdest{padding:15px 16px;border-left:1px solid var(--ec-rule);background:var(--ec-inset);min-width:0}
/* The row being edited is marked in the destination, so "where does this land"
   is answered without hunting for it. */
.ec-minidoc-hi{background:var(--ec-selected);box-shadow:inset 2px 0 0 var(--ec-gold);
  padding-left:7px;margin-left:-7px;border-radius:0 3px 3px 0}
.ec-instr-empty{padding:18px 16px;border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-panel);
  background:var(--ec-inset);font-size:13.5px;line-height:1.6;color:var(--ec-muted)}
@media(max-width:1179px){
  /* The destination drops below first: editing must stay possible before
     previewing does. */
  .ec-evdesk{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
  .ec-evdest{grid-column:1/-1;border-left:0;border-top:1px solid var(--ec-rule)}
}
@media(max-width:767px){
  .ec-evdesk{grid-template-columns:minmax(0,1fr)}
  .ec-evlist{border-right:0;border-bottom:1px solid var(--ec-rule);max-height:250px}
}

/* ---------- work queue ----------
   The first thing under the job strip: what needs attention, and the one control
   that opens the instrument able to resolve it. Rows, not cards — a queue is a
   list of work, and six rounded cards would read as six features. */
.ec-queue{margin-bottom:var(--ec-s4);border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);
  background:var(--ec-white);overflow:clip}
.ec-qhead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;justify-content:space-between;
  padding:12px 15px;border-bottom:1px solid var(--ec-rule-soft);background:var(--ec-record)}
.ec-qcount{font-size:12px;color:var(--ec-muted)}
.ec-qlist{display:flex;flex-direction:column}
.ec-qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 15px;border-top:1px solid var(--ec-rule-soft)}
.ec-qrow:first-child{border-top:0}
/* Tone marks urgency of KIND, never a ranking: coral is a gap the document will
   print as missing, gold is something waiting on a decision. A left rule as
   well as a tint, so the distinction survives greyscale. */
.ec-qrow-coral{background:var(--ec-coral-ground);box-shadow:inset 3px 0 0 var(--ec-coral)}
.ec-qrow-gold{background:var(--ec-gold-ground);box-shadow:inset 3px 0 0 var(--ec-gold)}
.ec-qwhy{font-size:13px;line-height:1.5;min-width:0}
.ec-qact{flex:none;min-height:40px;padding:9px 12px;font-size:12.5px;white-space:nowrap}
.ec-qmore{padding:9px 15px;border-top:1px solid var(--ec-rule-soft);font-size:12.5px;color:var(--ec-muted)}
.ec-qnone{padding:14px 15px;font-size:13px;line-height:1.6;color:var(--ec-muted);max-width:82ch}
@media(max-width:639px){
  .ec-qrow{grid-template-columns:auto minmax(0,1fr)}
  .ec-qact{grid-column:1/-1;justify-self:start}
}

/* ---------- portfolio mode switch ----------
   Two exclusive views, both always visible. It replaced a checkbox inside the
   filter drawer, which is where the "0 properties recorded above three fictional
   rows" defect came from: a hidden toggle that ADDED invented rows to real ones. */
.ec-modeswitch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ec-modeseg{display:inline-flex;gap:9px;align-items:flex-start;min-height:44px;padding:11px 14px;cursor:pointer;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);text-align:left}
.ec-modeseg svg{flex:none;margin-top:2px;color:var(--ec-glyph)}
.ec-modeseg span{display:flex;flex-direction:column;gap:1px}
.ec-modeseg b{font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-ink)}
.ec-modeseg i{font-style:normal;font-size:11.5px;line-height:1.4;color:var(--ec-muted)}
.ec-modeseg:hover{border-color:var(--ec-gold-line);background:var(--ec-hover)}
/* Selected carries a fill, a heavier border AND an underline — not colour alone. */
.ec-modeseg[aria-pressed="true"]{border-color:var(--ec-pine);background:var(--ec-selected);
  box-shadow:inset 0 -3px 0 var(--ec-gold)}
.ec-modeseg[aria-pressed="true"] b{color:var(--ec-heading)}
.ec-modeseg[aria-pressed="true"] svg{color:var(--ec-gold-ink)}
.ec-sumhead{grid-column:1/-1;padding:9px 15px;background:var(--ec-gold-ground);
  border-bottom:1px solid var(--ec-gold-line);font-size:12.5px;line-height:1.5;color:var(--ec-gold-ink)}


/* ================= WORKSPACE GEOMETRY v3 =================
   One shared grid system, two exposed geometries. This block is last in the
   file, so it is the single owner of the workspace breakpoint ladder: the
   earlier 1279/1079/899/859 rules disagreed with each other (a single-column
   rule that never reset grid-template-areas left a squeezed two-column layout
   between 860 and 899px). Named areas, one collapse story, no fixed desktop
   widths. */
.ec-ws{grid-template-columns:266px minmax(0,1fr) 392px;grid-template-areas:"spine main decide"}
body[data-ec-page="retrofit"] .ec-ws{grid-template-columns:250px minmax(0,1fr) 372px}
.ec-ws-spine,.ec-ws-decide{scrollbar-width:thin}
/* Sticky regions stop at the end of the grid, which ends above the footer. */
.ec-ws-spine{top:0;max-height:100vh}
.ec-ws-decide{top:0;max-height:100vh}

@media(max-width:1279px){
  /* Rail survives; comparison and decision stack with a sticky switcher. */
  .ec-ws,body[data-ec-page="retrofit"] .ec-ws{grid-template-columns:250px minmax(0,1fr);
    grid-template-areas:"spine main" "spine decide"}
  .ec-ws-decide,.ec-ws-coach{border-left:0;border-top:1px solid var(--ec-rule);position:static;max-height:none}
  body[data-ec-page="retrofit"] .ec-ws-decide{border-left:0;border-top:3px solid var(--ec-green-line)}
}
@media(max-width:1023px){
  .ec-ws,body[data-ec-page="retrofit"] .ec-ws{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"spine" "main" "decide"}
  .ec-ws-spine{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--ec-rule)}
  body[data-ec-page="epc"] .ec-cmpstrip{position:static}
}


/* ---------- output stage: never a fixed sidebar ---------- */
.ec-docgrid{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:18px;align-items:start}
@media(max-width:1023px){.ec-docgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- stage counts carry a unit ---------- */
.ec-stagecount .ec-stageunit{font-weight:600;letter-spacing:.02em;margin-left:3px;text-transform:none}
@media(max-width:719px){.ec-stagecount .ec-stageunit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* =========================================================
   EPC · THE JUDGEMENT LEDGER
   Aligned accounts in one ruled field. No card per source, no memory-heavy
   scroll between an account and the field where the reason is written.
   ========================================================= */
.ec-acct{border:1px solid var(--ec-rule-strong);border-radius:var(--ec-r-doc);background:var(--ec-white)}
.ec-acct-h{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:space-between;
  padding:12px 16px;border-bottom:2px solid var(--ec-pine);background:var(--ec-cream)}
.ec-acct-h h4{font:600 15px/1.3 var(--ec-serif);color:var(--ec-heading);margin:0}
.ec-acct-diff{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid var(--ec-gold-line);
  border-radius:var(--ec-r-chip);background:var(--ec-gold-soft);font:600 13px/1 var(--ec-sans);color:var(--ec-gold-ink);
  font-variant-numeric:tabular-nums}

@media(max-width:1023px){
  .ec-acct-colh{display:none}
  .ec-acct-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:14px 15px}
  .ec-acct-acct{grid-column:1}
  .ec-acct-val{grid-column:2;text-align:right}
  .ec-acct-basis,.ec-acct-dec{grid-column:1/-1}
}

/* The relationship lane: what qualifies this matter, connected and named. */
.ec-lane{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr));gap:1px;background:var(--ec-rule-soft);
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc)}
.ec-lane-cell{padding:12px 14px;background:var(--ec-white)}
.ec-lane-cell.ec-coral{background:var(--ec-coral-ground)}
.ec-lane-cell.ec-gold{background:var(--ec-gold-ground)}
.ec-lane-cell>.ec-block-label{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.ec-lane-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 9px;padding:7px 0;
  border-top:1px solid var(--ec-rule-soft);font-size:13px;line-height:1.5}
.ec-lane-item:first-of-type{border-top:0}
.ec-lane-scope{grid-column:2;font-size:11.5px;color:var(--ec-muted)}
.ec-lane-none{font-size:12.5px;line-height:1.5;color:var(--ec-muted)}

/* Decision pane: the fields themselves, beside the accounts. */
.ec-judge{display:flex;flex-direction:column;gap:13px}
.ec-judge-f{padding:13px 14px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-panel);background:var(--ec-gold-ground)}
body[data-ec-page="retrofit"] .ec-judge-f{border-color:var(--ec-green-line);background:var(--ec-green-ground)}
.ec-judge-f>label{display:block;font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading);margin-bottom:3px}
.ec-judge-f>p.hint{font-size:12px;line-height:1.5;color:var(--ec-muted);margin-bottom:8px}
.ec-judge-f .ec-textarea{font-family:var(--ec-serif);font-size:15px;line-height:1.6}
.ec-fielderr{display:flex;gap:7px;align-items:flex-start;margin-top:7px;font:600 12.5px/1.45 var(--ec-sans);color:var(--ec-coral-ink)}
.ec-fielderr svg{width:13px;height:13px;flex:none;margin-top:2px}
.ec-judge-state{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ec-statechip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--ec-r-chip);
  border:1px solid var(--ec-rule);background:var(--ec-white);font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-muted)}
.ec-statechip[data-tone="saved"]{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-statechip[data-tone="pending"]{border-color:var(--ec-gold-line);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-statechip[data-tone="stale"]{border-color:var(--ec-gold-line);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-statechip svg{width:12px;height:12px}
/* Visibility is owned by the min-width rule below, not by a base display that
   a later cascade order could flip. The echo exists only where the decision
   fields are NOT beside the comparison field. */
.ec-wsswitch{display:flex;flex-wrap:wrap;gap:7px;padding:10px 15px;border-bottom:1px solid var(--ec-rule-soft);
  position:sticky;top:0;z-index:4;background:var(--ec-cream-raised)}
@media(min-width:1280px){.ec-wsswitch{display:none}}

/* =========================================================
   RETROFIT · THE EVIDENCE TRAIL
   Location hierarchy, evidence plates, a limitation lane and a handover band.
   Structurally unlike the EPC ledger in greyscale: plates and a decision band
   instead of an aligned numeric field.
   ========================================================= */
.ec-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-muted)}
.ec-crumb li{display:flex;align-items:center;gap:6px;list-style:none}
.ec-crumb li+li::before{content:"›";color:var(--ec-glyph)}
.ec-crumb ol,.ec-crumb ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.ec-loc-group{padding:9px 14px 6px;background:var(--ec-green-ground);border-top:1px solid var(--ec-rule-soft);
  display:flex;align-items:center;gap:7px;font:600 10px/1.2 var(--ec-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ec-green-ink)}
.ec-loc-group:first-child{border-top:0}
.ec-loc-group svg{width:12px;height:12px}
.ec-obs{padding:14px 0;border-top:1px solid var(--ec-rule-soft)}
.ec-obs:first-of-type{border-top:0}
.ec-obs-t{font-family:var(--ec-serif);font-size:16.5px;line-height:1.6;max-width:66ch;color:var(--ec-ink)}
.ec-obs-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:9px}
.ec-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));gap:12px;margin-top:11px}
.ec-evplate{margin:0;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);background:var(--ec-white);overflow:clip}
.ec-evplate .ec-plate-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--ec-inset);border-bottom:1px solid var(--ec-rule-soft);overflow:hidden}
.ec-evplate .ec-plate-img img{width:100%;height:100%;object-fit:cover}
.ec-evplate .ec-plate-img span{padding:10px;font:600 11.5px/1.4 var(--ec-sans);color:var(--ec-muted);text-align:center}
.ec-evplate figcaption{padding:9px 11px;display:flex;flex-direction:column;gap:5px}
.ec-evplate .ec-plate-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:600 12.5px/1.35 var(--ec-sans);color:var(--ec-heading)}
.ec-evplate .ec-plate-cap{font-size:12.5px;line-height:1.5;color:var(--ec-ink)}
.ec-evplate .ec-plate-meta{font-size:11px;line-height:1.45;color:var(--ec-muted)}
.ec-evnone{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;
  border:1px dashed var(--ec-coral-line);border-radius:var(--ec-r-control);background:var(--ec-coral-ground);
  font-size:12.5px;line-height:1.5;color:var(--ec-coral-ink)}
.ec-evnone svg{width:14px;height:14px;flex:none;margin-top:2px}
/* One limitation lane, unmistakable but not louder than the observation. */
.ec-limlane{border:1px solid var(--ec-coral-line);border-left:4px solid var(--ec-coral);border-radius:var(--ec-r-doc);
  background:var(--ec-coral-ground);padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.ec-limlane .ec-block-label{color:var(--ec-coral-ink)}
.ec-limrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 9px;font-size:13.5px;line-height:1.55}
/* The handover band: a decision, not a checkbox. */
.ec-band{border:1px solid var(--ec-green-line);border-radius:var(--ec-r-doc);background:var(--ec-white);overflow:clip}
.ec-band-h{padding:11px 15px;border-bottom:1px solid var(--ec-green-line);background:var(--ec-green-ground);
  display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;justify-content:space-between}
.ec-band-h h4{font:600 15px/1.3 var(--ec-serif);margin:0;color:var(--ec-heading)}
.ec-band-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:var(--ec-rule-soft)}
.ec-band-b{display:flex;flex-direction:column;gap:6px;padding:14px 15px;border:0;background:var(--ec-white);text-align:left}
.ec-band-b:hover{background:var(--ec-hover)}
.ec-band-b[aria-pressed="true"]{background:var(--ec-green-soft);box-shadow:inset 0 -3px 0 var(--ec-green)}
.ec-band-t{display:flex;align-items:center;gap:8px;font:600 14.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-band-t svg{width:16px;height:16px;flex:none;color:var(--ec-green-ink)}
.ec-band-d{font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-band-b[aria-pressed="true"] .ec-band-d{color:var(--ec-green-ink)}
.ec-band-q{padding:14px 15px;border-top:1px solid var(--ec-rule-soft);display:flex;flex-direction:column;gap:9px}
@media(max-width:719px){.ec-acct-row,.ec-acct-h,.ec-acct-colh{padding-left:13px;padding-right:13px}
  .ec-plates{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))}}

/* ---------- the rail as a collapsible region (one control at every width) ---------- */
.ec-rail{display:flex;flex-direction:column;min-height:0}
.ec-rail>summary{list-style:none;cursor:pointer;padding:13px 16px;border-bottom:1px solid var(--ec-rule-soft);
  display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.ec-rail>summary::-webkit-details-marker{display:none}
.ec-rail>summary h2{font-size:15.5px}
.ec-rail-sub{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ec-muted)}
.ec-rail-toggle{padding-top:3px;font:600 10.5px/1 var(--ec-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ec-muted);white-space:nowrap}
.ec-rail[open] .ec-rail-toggle::after{content:"Hide"}
.ec-rail:not([open]) .ec-rail-toggle::after{content:"Show"}
.ec-rail:not([open])>summary{border-bottom:0}
.ec-rail-foot{padding:12px 16px;border-top:1px solid var(--ec-rule-soft)}
.ec-rail-body{overflow-y:auto;min-height:0}

.ec-acct-acct .ec-inst-open{align-self:flex-start;text-align:left}
.ec-wsswitch .ec-statechip{cursor:pointer;font-variant-numeric:tabular-nums}
.ec-wsswitch .ec-statechip b{color:var(--ec-ink);font-family:var(--ec-mono);font-size:11px;letter-spacing:.06em}

/* The workspace head is one connected object: masthead → job strip → stage
   tabs, with the deliberate gap BELOW the tab system rather than inside it. */
body[data-ec-page="epc"] .ec-jobstrip-ground,
body[data-ec-page="retrofit"] .ec-jobstrip-ground{padding-top:12px;padding-bottom:10px}


/* ================= ASSESSOR DESK · CONSOLE HEAD =================
   The first viewport must answer five questions in order: which job, what
   needs attention, which instrument, has the output gone stale, where are the
   commercial documents. The queue answers two of them; these two cards answer
   the others without pushing the switcher below the fold. */
.ec-deskhead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:var(--ec-s4)}
.ec-deskhead .ec-queue{margin-bottom:0}
.ec-headcards{display:flex;flex-direction:column;gap:12px}
.ec-statuscard{border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);background:var(--ec-white);overflow:clip}
.ec-statuscard[data-tone="gold"]{border-color:var(--ec-gold-line)}
.ec-statuscard[data-tone="coral"]{border-color:var(--ec-coral-line)}
.ec-statuscard-h{display:flex;gap:9px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--ec-rule-soft);
  background:var(--ec-cream-raised);font:600 12.5px/1.2 var(--ec-sans);letter-spacing:.02em;color:var(--ec-heading)}
.ec-statuscard-h svg{flex:none;width:15px;height:15px;color:var(--ec-muted)}
.ec-statuscard-b{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.ec-statuscard-v{font-family:var(--ec-serif);font-size:16.5px;font-weight:600;line-height:1.25;color:var(--ec-heading)}
.ec-statuscard-m{font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-statuscard-a{display:flex;flex-wrap:wrap;gap:7px}
.ec-statuscard-a .ec-btn{min-height:42px;padding:9px 12px;font-size:12.5px}
@media(max-width:1023px){
  /* Stacked, the two status cards come FIRST and sit side by side: the first
     viewport has to answer "has the output gone stale" and "is there a quote"
     without scrolling past a six-row queue to reach them. */
  .ec-deskhead{grid-template-columns:minmax(0,1fr)}
  .ec-headcards{order:-1;flex-direction:row;flex-wrap:wrap}
  .ec-headcards>.ec-statuscard{flex:1 1 300px;min-width:0}
}
@media(max-width:639px){.ec-headcards{flex-direction:column}}

/* Evidence Desk: filter by the object the reference supports, and an apply bar
   that stays reachable while the list is being worked through. */
.ec-evfilter{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:12px}
.ec-evfilter .ec-segbtn{min-height:36px;padding:7px 10px;font-size:12.5px}
.ec-evfilter-l{font:600 10px/1.2 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted);margin-right:2px}
.ec-applybar{position:sticky;bottom:0;z-index:5;margin-top:14px;box-shadow:0 -10px 20px -18px rgba(23,49,38,.7)}
.ec-applybar-n{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:var(--ec-r-chip);
  background:rgba(250,248,240,.14);font:600 11.5px/1.3 var(--ec-sans);color:var(--ec-rev-text)}

/* Output Desk: the document is the subject, so the preview is a document — not
   a thumbnail. Same section structure the renderer prints, at reading size. */
.ec-outpreview{border:1px solid var(--ec-rule);background:var(--ec-white);padding:22px 24px;margin-bottom:14px}
.ec-outpreview h4{font-family:var(--ec-serif);font-size:16px;font-weight:600;color:var(--ec-heading);
  padding-bottom:7px;border-bottom:2px solid var(--ec-pine);margin-bottom:10px}
.ec-outpreview .s{font:600 10px/1.2 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-muted);margin:14px 0 6px}
.ec-outpreview p.l{font-size:13px;line-height:1.65;color:var(--ec-ink);max-width:74ch}
.ec-outpreview p.l b{font-weight:600}
.ec-outpreview p.g{font-size:13px;line-height:1.65;color:var(--ec-coral-ink);font-weight:600}
.ec-outpreview .f{margin-top:16px;padding-top:10px;border-top:1px solid var(--ec-rule);font-size:11.5px;line-height:1.55;color:var(--ec-muted)}


/* ================= CERTIFICATE PORTFOLIO v2 =================
   The horizon is the instrument; the empty state is a sentence, not a wall of
   noughts; and the zones are readable by shape as well as by colour. */
.ec-pf-sumempty{padding:16px 18px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);
  background:var(--ec-record);display:flex;flex-direction:column;gap:9px}
.ec-pf-sumempty-h{font:600 16px/1.3 var(--ec-serif);color:var(--ec-heading)}
.ec-pf-sumempty p{font-size:13.5px;line-height:1.6;color:var(--ec-muted)}
.ec-pf-sumempty-n{display:flex;gap:8px;align-items:flex-start;padding-top:9px;border-top:1px solid var(--ec-rule-soft);font-size:12.5px}
.ec-pf-sumempty-n svg{flex:none;width:13px;height:13px;margin-top:3px;color:var(--ec-glyph)}

/* Zone legend: count, shape and words. Nothing on the line is colour-only. */
.ec-hz-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:0 0 12px}
.ec-hz-lg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.4;color:var(--ec-muted)}
.ec-hz-lg b{font-family:var(--ec-serif);font-size:15px;font-weight:600;color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-hz-lgm{flex:none;width:14px;height:14px;border:2px solid var(--ec-glyph);background:var(--ec-white)}
.ec-hz-lgm-passed{border-color:var(--ec-coral);background:var(--ec-coral-soft);border-radius:2px}
.ec-hz-lgm-window{border-color:var(--ec-gold);background:var(--ec-gold-soft);border-radius:50%}
.ec-hz-lgm-later{border-color:var(--ec-green);background:var(--ec-white);border-radius:50%}
.ec-hz-lgm-none{border-style:dashed;border-radius:2px;background:var(--ec-inset)}

/* Marker shape carries the zone: a passed date is square, an approaching date
   is a filled disc, a later date is an open disc. */
.ec-hz-mark.ec-hz-coral{border-radius:3px}
.ec-hz-mark.ec-hz-gold{border-radius:50%}
.ec-hz-mark.ec-hz-green{border-radius:50%;background:var(--ec-white)}
.ec-hz-mark.ec-hz-coral::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:8px;
  transform:translate(-50%,-50%);background:var(--ec-coral-ink)}
.ec-hz-mark.ec-hz-gold::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--ec-gold-deep)}

/* The filter disclosure sits beside the one visible control, not above the chart. */
.ec-pfctl{align-items:flex-end}
.ec-pffilt-d{flex:1 1 260px;min-width:0}
.ec-pffilt-d>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:9px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);
  background:var(--ec-white);font:600 13px/1 var(--ec-sans);color:var(--ec-heading)}
.ec-pffilt-d>summary::-webkit-details-marker{display:none}
.ec-pffilt-d>summary svg{flex:none;color:var(--ec-muted)}
.ec-pffilt-d[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.ec-pffilt-d .ec-pffilt{padding:12px 14px;border:1px solid var(--ec-rule);border-top:0;
  border-bottom-left-radius:var(--ec-r-control);border-bottom-right-radius:var(--ec-r-control);background:var(--ec-record)}



/* ---------- portfolio: the empty summary is one panel, not a grid cell ----------
   .ec-pf-sum is a two-column grid with a rule-coloured background showing
   through its gaps. The empty-state panel was landing in ONE of those cells, so
   it wrapped two words per line beside an empty grey block. */
.ec-pf-sum-empty{display:block;border:0;background:none;overflow:visible}




/* ================= FOOTER · one component, three variants =================
   Density is the point: every essential beta route survives, and height comes
   down through hierarchy and grouping rather than deletion. The page-specific
   orientation strip has been removed from the footer system entirely — it was
   Assessor Desk content wearing the global footer's surface, and the two dark
   regions read as one enormous footer. */
.ec-footer{margin-top:var(--ec-s6)}
.ec-footer a{color:rgba(250,248,240,.86);text-decoration:none}
.ec-footer a:hover,.ec-footer a:focus-visible{color:var(--ec-rev-text);text-decoration:underline;text-underline-offset:3px}

/* --- brand zone --- */
.ec-fbrand{display:flex;flex-direction:column;gap:6px;max-width:40ch}
.ec-fbrand-a{display:inline-flex;align-items:center;gap:10px;margin:0}
.ec-fstate{font-size:13px;line-height:1.45;color:rgba(250,248,240,.8);max-width:34ch;margin:0}
.ec-fbound{margin:0;font-size:13px;line-height:1.5;color:rgba(250,248,240,.72);max-width:44ch}
.ec-fbound-q{font-size:12px;color:rgba(250,248,240,.52)}

/* --- link groups --- */
.ec-fgroup h4{margin:0 0 8px;font:600 10.5px/1.2 var(--ec-sans);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(250,248,240,.5)}
.ec-fgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ec-fgroup li{font-size:13.5px;line-height:1.35}





/* --- contact --- */
.ec-fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;
  border-radius:var(--ec-r-control);background:var(--ec-gold);color:var(--ec-ink);
  font:600 13.5px/1 var(--ec-sans);text-decoration:none;border:1px solid var(--ec-gold)}
.ec-fbtn:hover,.ec-fbtn:focus-visible{background:#eec25e;color:var(--ec-ink);text-decoration:none}
.ec-fbtn-lg{min-height:46px;padding:12px 17px;font-size:14.5px}
.ec-fbtn-quiet{display:inline-flex;align-items:center;min-height:40px;font-size:13.5px;
  color:rgba(250,248,240,.8);text-decoration:underline;text-underline-offset:3px}

/* --- working: three zones, one row --- */
/* Every track is bounded. An `auto` track here resolved to max-content, took
   662px of a 1440px footer and squeezed the link runs into a 325px column that
   wrapped three lines deep — at 768px it collapsed the brand track to 0px. */
/* Two rows, not three columns. The contact zone is the tallest thing in the
   footer when it stacks, so it becomes one inline row of its own underneath —
   which is also the reading order a reader mid-task expects: who we are, where
   to go, how to tell us something. */
.ec-fwork{max-width:var(--ec-max);margin:0 auto;padding:12px 26px;
  display:grid;grid-template-columns:minmax(160px,195px) minmax(0,1fr) minmax(0,345px);
  gap:12px 24px;align-items:start}
.ec-fwork>.ec-fbrand{grid-column:1;grid-row:1}
.ec-fwork>.ec-fdisc{grid-column:2;grid-row:1}
.ec-fwork>.ec-fwork-contact{grid-column:3;grid-row:1}
@media(max-width:899px){
  /* Contact becomes one inline row beneath brand and links. */
  .ec-fwork{grid-template-columns:minmax(180px,230px) minmax(0,1fr)}
  .ec-fwork>.ec-fwork-contact{grid-column:1/-1;grid-row:2;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:8px 18px;padding-top:10px;border-top:1px solid rgba(250,248,240,.1)}
}
.ec-fwork-nav{display:flex;flex-direction:column;gap:6px;min-width:0}
/* The contact zone is a row, not a column: stacked, it was the tallest thing in
   the footer and set the height of everything beside it. */
.ec-fwork-contact{display:flex;flex-direction:column;gap:7px;align-items:flex-start;max-width:none}
/* Address and purpose on one line each, so the zone is three short rows. */
.ec-fwork .ec-fbrand{gap:6px}
.ec-fwork .ec-fbound{font-size:12.5px;line-height:1.45}

/* --- full: capstone, pathway, four columns --- */
.ec-fcap{max-width:var(--ec-max);margin:0 auto;padding:14px 26px 8px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,auto);gap:12px 32px;align-items:center}
.ec-fcap-h{margin:0;font:600 17px/1.3 var(--ec-serif);color:var(--ec-rev-text);max-width:52ch}
.ec-fcap-p{margin:4px 0 0;font-size:13px;line-height:1.45;color:rgba(250,248,240,.7);max-width:104ch}
.ec-fcap-acts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-self:end}
/* One line, labels only: the notes doubled the strip's height for a reading
   the labels already give, and the text equivalent carries the full sentence. */
.ec-fpath{list-style:none;max-width:var(--ec-max);margin:0 auto;padding:0 26px 10px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.ec-fpath-n{position:relative;padding:6px 10px;border:1px solid rgba(250,248,240,.16);
  border-radius:var(--ec-r-chip);min-width:0;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.ec-fpath-note{display:none}
.ec-fpath-n+.ec-fpath-n::before{content:"";position:absolute;left:-7px;top:50%;width:6px;height:1px;
  background:rgba(250,248,240,.3)}
.ec-fpath-l{font:600 11.5px/1.45 var(--ec-sans);color:var(--ec-rev-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ec-fpath-note{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:rgba(250,248,240,.52)}
.ec-fpath-you{border-color:var(--ec-gold);box-shadow:inset 3px 0 0 var(--ec-gold)}
.ec-fpath-tag{display:inline-block;font:600 9px/1.4 var(--ec-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ec-gold)}
.ec-footer-top{max-width:var(--ec-max);margin:0 auto;padding:14px 26px;
  display:grid;
  gap:14px 30px;border-top:1px solid rgba(250,248,240,.13)}

/* --- minimal: one row --- */
.ec-fmin{max-width:var(--ec-max);margin:0 auto;padding:20px 26px;
  display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;justify-content:space-between}
.ec-fmin-contact{flex-direction:row;flex-wrap:wrap;gap:6px 26px}
.ec-fmin-acts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}

/* --- bottom bar: one line, three regions --- */
.ec-footer-bar{max-width:var(--ec-max);margin:0 auto;padding:9px 26px;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(250,248,240,.13)}
.ec-fbeta{margin:0;flex:1 1 460px;min-width:0;font-size:12.5px;line-height:1.5;color:rgba(250,248,240,.56);max-width:none}
/* Copyright and Back to top travel together, so the bar is the beta line plus
   one row of utilities — never three rows. */
.ec-fbar-end{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between}
.ec-fbeta a{font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.ec-fcopy{font-size:12.5px;color:rgba(250,248,240,.48);white-space:nowrap}
.ec-ftop{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.ec-ftop svg{flex:none}

@media(max-width:1023px){
  /* .ec-fwork is NOT touched here — the 899px block owns that band, and the two
     rules disagreed about how many tracks exist. */
  .ec-fcap{grid-template-columns:minmax(0,1fr);padding:22px 20px 12px}
  .ec-fcap-acts{justify-self:start}
  .ec-fpath{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 20px 16px}
  .ec-fpath-n+.ec-fpath-n::before{display:none}
  .ec-fwork,.ec-footer-bar{padding-left:20px;padding-right:20px}
}
@media(max-width:719px){
  .ec-fwork{grid-template-columns:minmax(0,1fr);padding:18px 15px}
  .ec-fwork>.ec-fbrand{max-width:none}

  .ec-fwork-contact{max-width:none}
  .ec-fpath{grid-template-columns:minmax(0,1fr);gap:6px;padding:0 15px 14px}
  .ec-footer-top{padding:18px 15px}
  .ec-fmin{padding:18px 15px;gap:14px}
  .ec-fmin-contact{flex-direction:column;gap:8px}
  .ec-footer-bar{padding:13px 15px;gap:8px 18px}
  .ec-fbtn,.ec-fbtn-lg{width:100%;justify-content:center}
}
@media print{.ec-footer{display:none!important}}

/* --- the footer disclosure --- */
.ec-fdisc{min-width:0}
.ec-fdisc>summary{list-style:none;cursor:pointer;display:none}
.ec-fdisc>summary::-webkit-details-marker{display:none}
.ec-fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 26px}

@media(max-width:719px){
  .ec-fwork{grid-template-columns:minmax(0,1fr)}
  .ec-fwork>.ec-fbrand,.ec-fwork>.ec-fdisc,.ec-fwork>.ec-fwork-contact{grid-column:1;grid-row:auto}
  .ec-fdisc>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:44px;padding:10px 0;font:600 13px/1.2 var(--ec-sans);color:var(--ec-rev-text);
    border-top:1px solid rgba(250,248,240,.13);border-bottom:1px solid rgba(250,248,240,.13)}
  .ec-fdisc>summary::after{content:"+";font:400 17px/1 var(--ec-sans);color:rgba(250,248,240,.6)}
  .ec-fdisc[open]>summary::after{content:"\2212"}
  .ec-fdisc-b{padding:12px 0 4px}
  .ec-fcols{grid-template-columns:minmax(0,1fr);gap:14px}
  /* The pathway is decorative sequence; its text equivalent stays for AT. */
  .ec-fpath{display:none}
  .ec-footer-bar{gap:6px 14px;padding:12px 15px}
  .ec-fbeta,.ec-fcopy,.ec-ftop{font-size:12px}
}

.ec-fact-row{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center}
@media(max-width:1023px){
  .ec-footer-top{}
  .ec-fcols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:719px){
}


/* ---------- overflow fixes found by measurement ----------
   Assessor Desk at 390px: the instrument switcher was one 1014px-wide row, so
   the page scrolled sideways by 655px. The pills wrap instead — every
   instrument name stays visible, which an icon-only rail or a scroller would
   not guarantee. */
@media(max-width:719px){
  .ec-conbar{flex-direction:column;align-items:stretch;gap:12px}
  .ec-congroup{min-width:0}
  .ec-conpills{flex-wrap:wrap;width:100%}
  .ec-conpills>.ec-conpill{flex:1 1 46%;min-width:0;justify-content:flex-start}
  .ec-conpill>span{min-width:0;overflow-wrap:anywhere}
}
/* Landing at 1280px: the shell slogan reappeared at 1240px while the nav was
   still shown, and the row overflowed by 64px. The slogan now waits until the
   row genuinely has room for it. */


/* ---------- 44px targets in the footer at phone widths ----------
   Every footer route was a bare inline anchor: nine site links at 21px, the two
   mailboxes at 18px, socials at 20px. Font size alone is not a tap target. */
@media(max-width:719px){
  /* The routes become a two-column pad rather than a 44px-tall list nine deep. */



  .ec-fgroup ul{gap:0 14px}
  /* Recovering the height those targets cost: the brand statement is already in
     the bottom bar, and the disclosure summaries carry the section names. */
  .ec-fwork .ec-fbrand{gap:2px}
  .ec-fwork{padding:10px 15px;gap:8px}
  .ec-footer-bar{padding:8px 15px}
}

@media(max-width:719px){
  .ec-fbtn-quiet{min-height:44px}
}

@media(max-width:719px){
  /* The contact detail was 239px of the 390px footer: two mailboxes and two
     socials, each now a 44px target with its purpose label on its own line. It
     goes behind a disclosure; the feedback action stays out in the open. */
  .ec-fbeta{flex:1 1 100%;font-size:12px;line-height:1.45}
  .ec-footer-bar{padding:6px 15px;gap:2px 18px}
  .ec-fcap{padding:12px 15px 8px;gap:10px}
  .ec-fcap-h{font-size:16px}
  .ec-fcap-p{font-size:12.5px}
  .ec-footer-top{padding:12px 15px;gap:8px}
}

@media(max-width:719px){
  .ec-fmin{padding:12px 15px;gap:8px}
  .ec-fmin>.ec-fdisc{width:100%}
  /* Home is already the logo; a second link to it is a row of pure duplication. */
  .ec-fmin-acts{width:100%;gap:0}
  .ec-fmin-acts>.ec-fbtn-quiet{display:none}
}


/* ---------- working footer: one aligned row ----------
   The three zones were 111 / 75 / 154px tall, so the band had a ragged bottom
   edge and a hole under the links. The contact zone was the culprit: the social
   links took a row of their own and a mailbox purpose wrapped under its
   address. Action and socials now share the first line, each mailbox is one
   line, and the group labels sit on their first link's baseline. */
.ec-fwork>.ec-fwork-contact{display:flex;flex-direction:column;gap:9px}

@media(min-width:720px){
  /* Action and socials on one line. */
  .ec-fwork>.ec-fwork-contact{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:9px 15px;align-items:center}
  .ec-fwork>.ec-fwork-contact>.ec-fbtn{grid-column:1;grid-row:1}
  .ec-fwork>.ec-fwork-contact>.ec-fdisc{grid-column:1/-1;grid-row:2}
}

@media(min-width:720px){
  /* Mailboxes on the left of the disclosure body, socials on its right: two
     rows in the contact zone instead of four, with one set of anchors. */
  .ec-fwork .ec-fdisc-b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start}
}

/* Every link run starts at the same left edge: with flex, the first link sat
   directly after its label, so WORK / MANAGE / TRUST produced three different
   indents. A fixed label column aligns them. */



@media(max-width:719px){

}

@media(max-width:899px) and (min-width:720px){
  /* Equal columns starved the link runs into extra rows; the brand needs far
     less width than the links do. */
  .ec-fwork{grid-template-columns:minmax(150px,185px) minmax(0,1fr)}

}


/* ---------- footer · surface and hover states ----------
   Carried over when the pre-rebuild footer block was deleted. That block was
   8,000 characters of superseded rules: my earlier regex cleanup only removed
   rules whose selector text mentioned three retired class names, so every other
   stale rule survived — including a `@media(max-width:1023px)` pair declaring
   two grid tracks while the current base rules still assign a third. Between
   900 and 1023px that collapsed track one to 0px and `grid-column:1/-1` painted
   the brand block on top of the link runs. */
.ec-footer{background:var(--ec-pine);color:var(--ec-rev-text)}
.ec-fbtn svg,.ec-fbtn-quiet svg{flex:none}
.ec-fbtn-quiet:hover{color:var(--ec-rev-text)}
.ec-fbeta b{color:var(--ec-rev-text)}
.ec-fbeta a:hover{text-decoration-color:var(--ec-gold)}
.ec-ftop:hover{color:var(--ec-rev-text);text-decoration-color:var(--ec-gold)}
.ec-ftop svg{opacity:.85}
.ec-fmin .ec-fbrand-a{margin-bottom:0}
.ec-fmin-contact a{word-break:break-word}
.ec-footer-full .ec-footer-top{border-top-color:rgba(250,248,240,.16)}
/* The pathway is a row of nodes, not a bulleted list with a rule behind it. */
.ec-fpath::before,.ec-fpath-you::before{content:none}


/* ---------- the disclosure must actually collapse ----------
   Measured at 390px: `open=false` yet the body still had a 284px box and a
   computed `display:block`. This engine hides closed `<details>` content on a
   `::details-content` wrapper rather than with the old
   `details:not([open])>*:not(summary){display:none}` UA rule, so the child div
   kept its layout box — the phone footer was showing every route AND a "+"
   toggle, with the routes painting over the feedback button. Scoped to phone
   widths only, so a JS failure at desk width can never hide the routes. */
@media(max-width:719px){
  .ec-fdisc:not([open])>.ec-fdisc-b{display:none}
}


/* ---------- phone widths: the last word on footer grids ----------
   Source order, not specificity, was deciding these. A `max-width:1023px` rule
   declaring two tracks sat AFTER the `max-width:719px` rule declaring one, and
   both match at 390px — so the landing footer resolved to "250px 102px" on a
   phone. This block is last in the file and owns the collapse for all three
   variants. */
@media(max-width:719px){
  .ec-fwork,.ec-footer-top{}
  .ec-fwork>.ec-fbrand,.ec-fwork>.ec-fdisc,.ec-fwork>.ec-fwork-contact,
  .ec-fcols{grid-template-columns:minmax(0,1fr)}
}


/* ---------- landing footer: earning the height budget ----------
   Bands measured at 1440: capstone 89 + pathway 55 + link grid 157 + bar 38 =
   340 against 320; at 924: 159 + 100 + 287 + 38 = 584 against 360. Four
   changes, none of which deletes a route. */

/* 1 · The capstone is one row wherever there is room for one: the proposition
      and its supporting line on the left, both actions on the right. */
@media(min-width:640px){
  .ec-fcap{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px 26px 8px}
  .ec-fcap-acts{flex-wrap:nowrap}
}
/* 2 · The pathway stays five nodes wide down to 768 rather than wrapping to
      three rows: at 924 the wrap cost 100px for the same five labels. */
@media(min-width:768px) and (max-width:1023px){
  .ec-fpath{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0 20px 10px}
  .ec-fpath-l{font-size:10.5px;letter-spacing:-.01em}
  .ec-fpath-n{padding:5px 8px}
  .ec-fpath-tag{display:none}
  .ec-fpath-n+.ec-fpath-n::before{display:block}
}
/* 3 · Three zones at 900-1023, as the working footer already does: stacking
      contact under the brand cost 127px for no gain in legibility. */
@media(min-width:720px) and (max-width:1023px){
  .ec-footer-top{
    gap:12px 22px;padding:12px 20px}
  .ec-fcols{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px}
}
/* 4 · On a phone the brand statement goes: the bottom bar already carries the
      boundary, and the disclosure summaries carry the section names. */
@media(max-width:719px){
  .ec-footer-top .ec-fbrand{gap:3px}
  .ec-fcap{padding:10px 15px 6px}
  .ec-fcap-h{font-size:15.5px}
  .ec-fcap-acts{gap:6px 10px}
  .ec-fbeta{font-size:11.5px}
}

/* The last 12-20px at desk widths, and the phone capstone's stacked actions. */
@media(min-width:1024px){
  .ec-fcap{padding:10px 26px 6px}
  .ec-fcap-h{font-size:16.5px}
  .ec-fpath{padding:0 26px 8px;gap:6px}
  .ec-fpath-n{padding:5px 10px}
  .ec-fpath-l{font-size:11px}
  .ec-footer-top{padding:12px 26px}
  .ec-footer-bar{padding:8px 26px}
}
@media(min-width:720px) and (max-width:1023px){
  .ec-fcap{padding:10px 20px 6px}
  .ec-fcap-h{font-size:15.5px}
  .ec-fcap-p{font-size:12.5px}
  .ec-fcols{gap:8px 16px}
}
@media(max-width:719px){
  /* Two 44px actions side by side rather than stacked full-width. */
  .ec-fcap-acts{flex-wrap:wrap}
  .ec-fcap .ec-fbtn,.ec-fcap .ec-fbtn-lg{width:auto;flex:1 1 auto;justify-content:center}
  .ec-fcap-p{font-size:12px;line-height:1.4}
}

/* The last three cells: 1440 by 3px, 924 by 29, 390 by 19. */
@media(min-width:1024px){
  .ec-fpath{padding-bottom:5px}
  .ec-footer-bar{padding:7px 26px}
}
@media(min-width:720px) and (max-width:1023px){
  .ec-fpath{padding-bottom:5px;gap:5px}
  .ec-fpath-n{padding:4px 8px}
  .ec-fpath-l{font-size:10px}
  .ec-fcap{padding:8px 20px 4px}
  .ec-fcap-p{line-height:1.4}
  .ec-footer-top{padding:10px 20px}
  .ec-footer-bar{padding:7px 20px}
  .ec-fgroup h4{margin-bottom:5px}
  .ec-fgroup ul{gap:3px}
}
@media(max-width:719px){
  .ec-fcap{padding:8px 15px 4px}
  .ec-footer-top{padding:10px 15px}
  .ec-footer-bar{padding:6px 15px}
}

/* 390 by 5px, 924 by 8px. */
@media(min-width:720px) and (max-width:1023px){
  .ec-fcap-h{font-size:15px;line-height:1.28}
  .ec-fcap-p{font-size:12px;margin-top:3px}
  .ec-fcap{gap:8px 22px}
}
@media(max-width:719px){
  .ec-fcap-h{font-size:15px;line-height:1.3}
  .ec-fcap{gap:8px}
}

/* 390 by 1px, 924 by 4px — the rounding boundary. */
@media(min-width:720px) and (max-width:1023px){
  .ec-fcap{padding-bottom:2px}
  .ec-footer-top{padding:8px 20px}
}
@media(max-width:719px){
  .ec-footer-top{padding:8px 15px}
}

/* Back to top lost its height when the pre-rebuild block (which carried
   min-height:44px) was deleted. It is a utility, but it is still a target. */
/* 44px is the phone requirement; an unmedia'd min-height here added ~25px to
   every variant at every width. */
@media(max-width:719px){.ec-ftop,.ec-footer .ec-fbrand-a{min-height:44px}}
@media(min-width:720px){.ec-ftop{min-height:32px;padding:6px 2px}}

/* Landing at 390 after the tap-target fix: 589 against 560. Trimmed from type
   and gaps only — no target below 44px, no mandated copy removed. */
@media(max-width:719px){
  .ec-footer-full .ec-fcap-h{font-size:14.5px;line-height:1.32}
  .ec-footer-full .ec-fcap-p{font-size:11.5px;line-height:1.38;margin-top:3px}
  .ec-footer-full .ec-fcap{gap:7px;padding:7px 15px 3px}
  .ec-footer-full .ec-footer-top{padding:7px 15px;gap:7px}
  .ec-footer-full .ec-fbeta{font-size:11px;line-height:1.4}
  .ec-footer-full .ec-footer-bar{padding:5px 15px;gap:0 16px}
}


/* ---------- the pathway as one line, inside the capstone's budget ----------
   As a grid of bordered nodes it was a 50px band of its own, which put the
   capstone (89) plus pathway (50) at 139px against the brief's 92px limit. As a
   single ruled line with › separators it reads the same sequence, keeps the
   assessor's node distinct in gold and in words, and costs ~22px. */
@media(min-width:720px){
  .ec-fpath{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:0 26px 8px}
  .ec-fpath-n{border:0;border-radius:0;padding:0;display:inline-flex;align-items:baseline;gap:6px}
  .ec-fpath-n+.ec-fpath-n::before{content:"\203a";position:static;width:auto;height:auto;
    background:none;color:rgba(250,248,240,.4);font-size:13px;display:inline;margin-right:4px}
  .ec-fpath-l{font-size:11.5px;white-space:nowrap;letter-spacing:0}
  .ec-fpath-you{box-shadow:none}
  .ec-fpath-you .ec-fpath-l{color:var(--ec-gold)}
  .ec-fpath-tag{display:inline;margin:0;font-size:9px;color:var(--ec-gold)}
}
@media(min-width:720px) and (max-width:1023px){
  .ec-fpath{padding:0 20px 6px;gap:2px 5px}
  .ec-fpath-l{font-size:10.5px}
  .ec-fpath-tag{display:none}
}

/* Landing: 390 by 13px, 924 by 11px. */
@media(min-width:720px) and (max-width:1023px){
  .ec-footer-full .ec-footer-top{padding:6px 20px;gap:8px 20px}
  .ec-footer-full .ec-fgroup h4{margin-bottom:4px}
  .ec-footer-full .ec-fgroup ul{gap:2px}
  .ec-footer-full .ec-fgroup li{font-size:13px}
  .ec-footer-full .ec-footer-bar{padding:5px 20px}
}
@media(max-width:719px){
  .ec-footer-full .ec-fbrand{gap:2px}
  .ec-footer-full .ec-fbound-q{font-size:11px;line-height:1.4}
  .ec-footer-full .ec-fdisc>summary{min-height:44px;padding:8px 0}
}

@media(max-width:719px){
  /* The last 7px, taken from leading rather than from a target or a route. */
  .ec-footer-full .ec-footer-bar{padding:4px 15px;gap:0 14px}
  .ec-footer-full .ec-fcap{padding-bottom:2px}
  .ec-footer-full .ec-footer-top{padding:6px 15px}
}

@media(max-width:719px){.ec-footer-full .ec-fdisc>summary{padding:6px 0}}


/* ================= RECORD GATEWAY =================
   Three routes that are not equivalent. The old screen was three equal cards in
   an `auto-fit, minmax(min(320px,100%),1fr)` row, so the exception (a fictional demo) had
   the same weight as the assessor's own work — and the middle card was nearly
   empty while its CTA sat pinned to the bottom. This is a lead/side composition
   whose lead is chosen by the record state, not by source order. */
.ec-gate{max-width:1180px;margin:0 auto;padding:8px 0 10px;
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  grid-template-areas:"head head" "lead side" "trust trust" "slot slot";
  gap:18px 26px;align-items:start}
.ec-gate-head{grid-area:head;max-width:74ch}
.ec-gate-lead{grid-area:lead}
/* ONE child per area. Two sections previously shared grid-area:side and the
   browser stacked them, printing one heading through the other. */
.ec-gate-col{grid-area:side;display:flex;flex-direction:column;gap:16px;min-width:0}
.ec-gate-slot{grid-area:slot;min-width:0}

/* The lead route owns the only major border on the row. */
.ec-gate-lead{padding:16px 18px;border:1px solid var(--ec-rule);border-top:3px solid var(--ec-pine);
  border-radius:0;background:var(--ec-panel)}
.ec-gate-panel{padding:15px 17px;border:1px solid var(--ec-rule-soft);background:transparent}

/* A ledger, not a stack of cards: one surface, hairline separated. */
.ec-gate-ledger{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--ec-rule);background:var(--ec-rule-soft)}
.ec-gate-ledger>li>button{min-height:56px;cursor:pointer}
.ec-gate-ledger>li>button:hover{background:var(--ec-hover)}
.ec-gate-ledger>li>button:focus-visible{outline:3px solid var(--ec-pine);outline-offset:-3px}

/* The route chain: what this path records, in order. Text, not decoration. */
.ec-gate-chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.ec-gate-chain li{display:flex;align-items:center;gap:6px;font:600 11.5px/1.4 var(--ec-sans);color:var(--ec-ink)}
.ec-gate-chain li+li::before{content:"\203a";color:var(--ec-glyph);font-weight:400}

.ec-gate-trust{grid-area:trust;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;
  padding:11px 0 0;margin:0;border-top:1px solid var(--ec-rule-soft);font-size:12.5px;color:var(--ec-muted)}
.ec-gate-trust>span{display:inline-flex;align-items:center;gap:7px}
.ec-gate-trust>span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ec-glyph)}
.ec-gate-trust>a{min-height:44px;display:inline-flex;align-items:center;font-size:12.5px}

/* The fictional mark is a real diagonal stamp on the preview sheet, so it cannot
   be read as a small status badge on a real job. */
.ec-fict{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--ec-coral-line);
  border-radius:var(--ec-r-chip);background:var(--ec-coral-soft);font:600 11px/1.3 var(--ec-sans);color:var(--ec-coral-ink)}

@media(max-width:1023px){
  .ec-gate{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "lead" "side" "trust" "slot"}
}
@media(max-width:719px){
  .ec-gate{gap:14px}
  .ec-gate-lead,.ec-gate-panel{padding:13px 14px}
  .ec-gate-chain{flex-direction:column;align-items:flex-start;gap:2px}
  .ec-gate-chain li+li::before{content:"\2193"}
  .ec-gate-ledger>li>button{min-height:64px}
  .ec-gate .ec-btn{width:100%;justify-content:center}
}

/* Measured on the gateway: five controls sat between 32 and 40px — the reset
   button, the disclosure summary and the trust link among them. A gateway is
   nothing but targets. */
.ec-gate .ec-btn,.ec-gate summary,.ec-gate-trust>a,.ec-gate a.ec-btn{min-height:44px}
.ec-gate summary{padding:6px 0}

/* Every gateway control carries a real target height. */
.ec-gate .ec-btn,.ec-gate summary,.ec-gate-trust>a{min-height:44px}
.ec-gate .ec-gate-ledger>li>button{min-height:56px}

/* The disclosure inside the example panel grows the panel, not the row: without
   this the expanded text ran over the trust rail beneath it. */
.ec-gate-panel details{min-width:0}
.ec-gate-panel details>div{overflow-wrap:anywhere}
.ec-gate-trust{position:relative;z-index:1;background:var(--ec-page)}

/* ---------- closed <details> must take no space ----------
   This engine keeps a layout box on the content of a closed <details> instead of
   applying the UA's display:none, so collapsed panels overlapped whatever sat
   beneath them. Measured twice now: the footer disclosure at phone widths, and
   the gateway's "How fictional records are kept separate" printing over the
   trust rail. Stated once, for every disclosure on the site. */
details:not([open])>*:not(summary){display:none!important}


/* ================= GATEWAY · pack-specific material =================
   Concept 17B's finding applied to production: the two packs must not share one
   tinted rectangle. Judgement narrows against ruled fields; handover descends a
   located rail and exits sideways. */
.ec-gate-route{padding:14px 16px;border:1px solid var(--ec-rule)}
.ec-gate-route[data-pack="epc"]{border-left:3px solid var(--ec-gold);background:var(--ec-gold-ground);
  background-image:repeating-linear-gradient(var(--ec-rule-soft) 0 1px,transparent 1px 30px)}
.ec-gate-route[data-pack="retrofit"]{border-left:3px solid var(--ec-green);background:var(--ec-green-ground)}

/* EPC: steps that genuinely narrow. */

/* Retrofit: a rail with a stop per stage, exiting at the handover. */
@media(max-width:719px){
  .ec-gate-funnel li{width:100%!important}
}


/* ================= THE ACCOUNTS FIELD · material, not a table =================
   A table of sources is indistinguishable from the assessment form the assessor
   has just left. Each account is now printed on the stock its provenance
   implies, and the values sit on one baseline so they stay comparable at a
   glance — which is the only reason the field exists. */
.ec-srcfield{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(226px,100%),1fr));
  gap:12px;padding:15px 16px;align-items:stretch}
.ec-srcdoc{position:relative;display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--ec-rule-strong);background:var(--ec-white);
  box-shadow:0 10px 22px -18px rgba(23,49,38,.45);
  transition:box-shadow var(--ec-motion-relation) var(--ec-ease-object)}
.ec-srcdoc:focus-visible{outline:3px solid var(--ec-pine);outline-offset:2px}

/* --- the stocks --- */
.ec-srcdoc[data-stock="measured"]{
  background:repeating-linear-gradient(var(--ec-graph,#e7ecdf) 0 1px,transparent 1px 13px),
             repeating-linear-gradient(90deg,var(--ec-graph,#e7ecdf) 0 1px,transparent 1px 13px),var(--ec-white)}
.ec-srcdoc[data-stock="documentary"]{background:#f7f3e6;border-color:#d8cfb4}
.ec-srcdoc[data-stock="documentary"]::after{content:"";display:block;height:14px;flex:none;
  background:repeating-linear-gradient(90deg,#e3d9bd 0 6px,transparent 6px 12px)}
/* One fixed band on every plate, so every value lands on the same baseline. */
.ec-srcdoc-band{flex:none;height:28px;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--ec-rule-soft)}
.ec-srcdoc[data-stock="documentary"] .ec-srcdoc-band{background:#efe7d2;border-bottom-color:#d8cfb4}
.ec-srcdoc[data-stock="plan"] .ec-srcdoc-band{background:#f6f7f1;color:var(--ec-glyph)}
.ec-srcdoc-masthead{padding:0 12px;font:400 8.5px/1.4 var(--ec-mono);letter-spacing:.11em;color:#7a6b45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-srcdoc-plan{width:100%;height:26px}
.ec-srcdoc-howband{display:flex;align-items:center;gap:6px;padding:0 12px;
  font:600 9.5px/1 var(--ec-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ec-muted)}
.ec-srcdoc-howband svg{flex:none}
/* Reliance as a corner tab, outside the flow: as a ribbon it pushed the value
   down 28px on exactly the plate the assessor most wants to compare. */
.ec-srcdoc-tab{position:absolute;top:-1px;right:-1px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;background:var(--ec-gold);font:700 8.5px/1.35 var(--ec-sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ec-ink)}
.ec-srcdoc-tab svg{flex:none}
.ec-srcdoc[data-stock="reported"]{background:var(--ec-white)}
.ec-srcdoc[data-stock="reported"] .ec-srcdoc-body::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--ec-rule)}

/* Reviewed-not-used and context stay fully legible: unused evidence must never
   look deleted. Dimming is limited to the surround, never the value. */
.ec-srcdoc[data-role="reviewed"],.ec-srcdoc[data-role="context"]{box-shadow:none;border-style:dashed}
/* The assessor's own reliance is the one emphasis in the field. */
.ec-srcdoc[data-role="relied"]{border:2px solid var(--ec-gold);box-shadow:0 14px 28px -18px rgba(122,92,15,.5)}
.ec-srcdoc-ribbon{flex:none;display:flex;align-items:center;gap:7px;padding:6px 12px;background:var(--ec-gold);
  font:700 8.5px/1.35 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ec-ink)}
.ec-srcdoc-ribbon svg{flex:none}

.ec-srcdoc-body{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:5px;padding:12px 13px}
.ec-srcdoc-id{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;min-width:0}
.ec-srcdoc-name{font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading)}
/* The comparable number, large and on one baseline across the row. */
.ec-srcdoc-val{margin-top:1px;font:600 27px/1 var(--ec-serif);color:var(--ec-heading);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.ec-srcdoc-val.ec-none{font-size:14px;line-height:1.4;color:var(--ec-muted)}
.ec-srcdoc-how{display:flex;align-items:center;gap:6px;font:600 11px/1.3 var(--ec-sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ec-muted)}
.ec-srcdoc-detail{font-size:12.5px;line-height:1.5;color:var(--ec-ink)}
.ec-srcdoc-prov{font:400 11px/1.4 var(--ec-mono);color:var(--ec-muted)}
.ec-srcdoc-rel{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;
  min-height:44px;padding:6px 9px;border:1px dashed var(--ec-gold-line);background:var(--ec-gold-soft);
  font:600 11px/1.35 var(--ec-sans);color:var(--ec-gold-ink);text-align:left;cursor:pointer}
.ec-srcdoc-rel svg{flex:none}

.ec-srcdoc-foot{flex:none;display:flex;flex-direction:column;gap:6px;padding:10px 12px 11px;
  border-top:1px solid var(--ec-rule-soft);background:rgba(255,255,255,.55)}
.ec-srcdoc-roles{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ec-srcdoc-roles .ec-segbtn{min-height:44px;padding:8px;font-size:11.5px;justify-content:center}
.ec-srcdoc-norole{display:flex;gap:6px;align-items:flex-start;font:600 11px/1.35 var(--ec-sans);color:var(--ec-coral-ink)}
.ec-srcdoc-norole svg{flex:none;margin-top:1px}
.ec-srcdoc-foot .ec-inst-open{align-self:flex-start;font-size:11.5px;min-height:44px}
.ec-srcdoc.ec-src-lit{box-shadow:0 0 0 3px var(--ec-gold-soft),0 14px 28px -18px rgba(122,92,15,.5)}

/* --- the convergence rule: the difference, stated once, beneath its accounts --- */
.ec-conv{position:relative;padding:0 16px 13px;border-top:1px solid var(--ec-rule)}
.ec-conv-threads{display:block;width:100%;height:22px;fill:none;stroke:var(--ec-gold-line);stroke-width:1.3}
.ec-conv-say{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;
  border-left:3px solid var(--ec-gold);background:var(--ec-gold-ground);
  font-size:12.5px;line-height:1.55;color:var(--ec-gold-ink)}
.ec-conv-say svg{flex:none;margin-top:2px}
.ec-conv-say b{font-weight:600}

@media(max-width:719px){
  .ec-srcfield{grid-template-columns:minmax(0,1fr);padding:13px 13px}
  .ec-srcdoc-val{font-size:24px}
  .ec-conv{padding:0 13px 12px}
}


/* ================= LANDING · chapter grounds and pack identity =================
   The concept boards' record patterns, used semantically: each ground marks a
   change in professional meaning, never decoration. Patterns stay out of dense
   working areas — they sit behind the chapter, at low opacity, beneath content. */
.ec-chap{position:relative;isolation:isolate}
.ec-chap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-position:right top;background-size:contain;opacity:.5}
.ec-chap-hero::before{background-image:url('../backgrounds/record-thread-light.svg');
  background-position:right -40px top -20px;opacity:.55}
.ec-chap-problem::before{background-image:url('../backgrounds/quiet-record-light.svg');
  background-position:left -60px top;opacity:.4}
.ec-chap-packs::before{background-image:url('../backgrounds/epc-judgement-light.svg');
  background-position:right -70px center;opacity:.35}
.ec-chap-intake::before{background-image:url('../backgrounds/field-record-light.svg');
  background-position:left top -30px;opacity:.32}
.ec-chap-output::before{background-image:url('../backgrounds/quiet-record-light.svg');
  background-position:right -50px bottom;opacity:.38}
.ec-chap-scope::before{background-image:url('../backgrounds/retrofit-evidence-light.svg');
  background-position:left -40px bottom;opacity:.3}
@media(prefers-reduced-motion:no-preference){.ec-chap::before{transition:opacity .3s ease}}

/* ---------- the pack crest ---------- */
.ec-crest{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  margin-top:15px;padding:12px 14px;border-radius:14px;border:1px solid var(--ec-rule);background:var(--ec-white)}
.ec-crest[data-pack="epc"]{border-color:var(--ec-gold-line);
  background:linear-gradient(135deg,var(--ec-gold-ground),var(--ec-white))}
.ec-crest[data-pack="retrofit"]{border-color:var(--ec-green-line);
  background:linear-gradient(135deg,var(--ec-green-ground),var(--ec-white))}
.ec-crest-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:50%;background:var(--ec-white);border:1px solid var(--ec-rule)}
.ec-crest[data-pack="epc"] .ec-crest-mark{border-color:var(--ec-gold-line)}
.ec-crest[data-pack="retrofit"] .ec-crest-mark{border-color:var(--ec-green-line)}
.ec-crest-lab{display:block;font:600 9px/1.4 var(--ec-sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ec-muted)}
.ec-crest-say{display:block;margin-top:3px;font:600 15.5px/1.3 var(--ec-serif);color:var(--ec-heading)}

/* ---------- pack tabs · marks, pack colour, rounder ----------
   Never colour alone: the mark brightens, the label gains weight, and
   aria-pressed carries the state for assistive technology. */
.ec-modeset{display:inline-flex;padding:4px;gap:4px;border:1px solid var(--ec-rule);
  border-radius:16px;background:var(--ec-cream)}
.ec-modetab{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  gap:1px 9px;align-items:center;min-height:50px;padding:8px 14px;border:1px solid transparent;
  border-radius:12px;background:transparent;text-align:left;cursor:pointer;
  transition:background .16s ease,border-color .16s ease}
.ec-modetab img{grid-row:1/3;width:18px;height:18px;opacity:.5;transition:opacity .16s ease}
.ec-modetab>span:first-of-type{font:600 13px/1.2 var(--ec-sans);color:var(--ec-muted)}
.ec-modetab-sub{font:400 10px/1.3 var(--ec-sans);color:var(--ec-glyph)}
.ec-modetab:hover{background:rgba(255,255,255,.7)}
.ec-modetab:focus-visible{outline:3px solid var(--ec-pine);outline-offset:2px}
.ec-modetab[aria-pressed="true"]{background:var(--ec-white);border-color:var(--ec-rule-strong)}
.ec-modetab[aria-pressed="true"] img{opacity:1}
.ec-modetab[aria-pressed="true"]>span:first-of-type{color:var(--ec-heading);font-weight:700}
.ec-modetab[data-pack="epc"][aria-pressed="true"]{border-color:var(--ec-gold);background:var(--ec-gold-ground)}
.ec-modetab[data-pack="epc"][aria-pressed="true"] .ec-modetab-sub{color:var(--ec-gold-ink)}
.ec-modetab[data-pack="retrofit"][aria-pressed="true"]{border-color:var(--ec-green);background:var(--ec-green-ground)}
.ec-modetab[data-pack="retrofit"][aria-pressed="true"] .ec-modetab-sub{color:var(--ec-green-ink)}

/* ---------- the route · symbol-led pills ---------- */
.ec-routestrip{list-style:none;display:flex;flex-wrap:wrap;gap:5px;padding:0;margin:0}
.ec-routestrip li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--ec-rule);background:var(--ec-white);
  font:600 10.5px/1.3 var(--ec-sans);color:var(--ec-muted)}
.ec-routestrip li svg{flex:none;opacity:.75}
.ec-routestrip[data-pack="epc"] li:last-child{border-color:var(--ec-gold);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-routestrip[data-pack="retrofit"] li:last-child{border-color:var(--ec-green);background:var(--ec-green-soft);color:var(--ec-green-ink)}

/* Rounder surfaces so the page reads as one system. */
.ec-thread{border-radius:16px;overflow:clip}
.ec-thread-head{flex-wrap:wrap;gap:12px}
@media(max-width:519px){
  .ec-modeset{flex-direction:column;width:100%}
  .ec-modetab{width:100%}
  .ec-chap::before{opacity:.22!important}
}

main .ec-btn{min-height:44px}


/* ================= FOOTER v3 · three levels, one design =================
   Level 1 closing band · level 2 product navigation · level 3 utility strip.
   One implementation for every page; only the variant's inclusions differ. */

/* --- level 1 · the closing band ---
   Quieter than any page hero by construction: sans-serif proposition, no
   full-bleed gold field, and it sits on the cream surface above the pine. */
.ec-fclose{max-width:var(--ec-max);margin:0 auto;padding:20px 26px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 34px;align-items:center}
.ec-fclose-h{margin:0;font:600 17px/1.3 var(--ec-serif);color:var(--ec-rev-text);max-width:34ch}
.ec-fclose-p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:rgba(250,248,240,.66);max-width:52ch}
.ec-fclose-acts{display:flex;flex-wrap:wrap;gap:9px 12px;align-items:center;justify-self:end}

/* --- shared action controls: every one carries a symbol and a 44px target --- */
.ec-fact{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  color:rgba(250,248,240,.86);text-decoration:none;font-size:13px}
.ec-fact:hover,.ec-fact:focus-visible{color:var(--ec-rev-text)}
.ec-fact:hover span{text-decoration:underline;text-underline-offset:3px}
.ec-fact svg{flex:none;opacity:.7}
.ec-fact:hover svg{opacity:1}
.ec-fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 15px;
  border-radius:11px;background:var(--ec-gold);border:1px solid var(--ec-gold);color:var(--ec-ink);
  font:600 13.5px/1 var(--ec-sans);text-decoration:none;transition:background .16s ease}
.ec-fbtn:hover{background:#eec25e;color:var(--ec-ink)}
.ec-fbtn:focus-visible{outline:3px solid var(--ec-rev-text);outline-offset:2px}
.ec-fbtn svg{flex:none;opacity:1}
.ec-fbtn-lg{min-height:46px;padding:12px 18px;font-size:14.5px}
.ec-fbtn-quiet{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px;
  color:rgba(250,248,240,.82);font:600 13px/1 var(--ec-sans);
  text-decoration:underline;text-underline-offset:3px}
.ec-fbtn-quiet:hover{color:var(--ec-rev-text)}
.ec-fbtn-quiet svg{flex:none;opacity:.7}

/* --- level 2 · product navigation regions --- */
.ec-footer-top{
  gap:20px 30px;padding:18px 26px;align-items:start}
.ec-fgroup h4{display:flex;align-items:center;gap:7px;margin:0 0 10px;
  font:600 10px/1.3 var(--ec-sans);letter-spacing:.15em;text-transform:uppercase;color:rgba(250,248,240,.56)}
.ec-fgroup h4 svg{flex:none;opacity:.55}
.ec-fgroup ul{gap:2px}
.ec-fgroup li a{display:inline-flex;align-items:center;font-size:13.5px;
  color:rgba(250,248,240,.86);text-decoration:none}
.ec-fgroup li a:hover{color:var(--ec-rev-text);text-decoration:underline;text-underline-offset:3px}

/* --- level 3 · the utility strip, subordinate but readable --- */
.ec-footer-bar{padding:10px 26px}
.ec-fbeta{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;flex:1 1 auto;
  font-size:12px;line-height:1.5;color:rgba(250,248,240,.56)}
.ec-fbeta>span{display:inline-flex;align-items:center;gap:8px}
.ec-fbeta>span+span::before{content:"";width:3px;height:3px;border-radius:50%;
  background:rgba(250,248,240,.34);flex:none}
.ec-fwhat{display:inline-flex;align-items:center;gap:6px;min-height:40px;
  color:rgba(250,248,240,.72);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.ec-fwhat:hover{color:var(--ec-rev-text)}
.ec-fwhat svg{flex:none;opacity:.6}

@media(max-width:1119px){
  .ec-footer-top{}
}
@media(max-width:719px){
  /* Logical stacked groups, not five thin columns. */
  .ec-fclose{grid-template-columns:minmax(0,1fr);padding:16px 15px}
  .ec-fclose-acts{justify-self:stretch}
  .ec-fclose-acts .ec-fbtn{width:100%;justify-content:center}
  .ec-footer-top{gap:14px;padding:14px 15px}
  .ec-footer-bar{padding:9px 15px}
  .ec-fbeta{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.ec-fbtn,.ec-fact,.ec-fgroup li a{transition:none}}

.ec-footer .ec-fbrand-a{min-height:44px}
.ec-footer .ec-ftop{min-height:44px;padding:6px 2px}

/* Every footer destination carries its symbol; the group heading's own symbol
   drops to a quieter weight so the two levels stay distinguishable. */
.ec-flink{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  color:rgba(250,248,240,.86);text-decoration:none}
.ec-flink svg{flex:none;opacity:.55;transition:opacity .16s ease}
.ec-flink:hover,.ec-flink:focus-visible{color:var(--ec-rev-text)}
.ec-flink:hover svg{opacity:1}
.ec-flink:hover span{text-decoration:underline;text-underline-offset:3px}
.ec-fgroup h4 svg{opacity:.4}
@media(max-width:719px){.ec-flink{}}


/* ================= SWITCHBOARD · rounder, with the mark as signature =========
   The entry cards were rectangles inside a rectangle. Pill/near-pill geometry
   and the token radii bring the switchboard into the same system as the rest of
   the controls, and the EPC-Covered mark moves to the foot as a quiet signature
   rather than the first object competing with the workspace choices. */
.ec-gate-route{border-radius:14px}
.ec-gate-panel{border-radius:14px}
.ec-gate-lead{border-radius:14px;border-top-width:3px}
.ec-gate-ledger{border-radius:12px;overflow:clip}
.ec-gate .ec-btn{border-radius:11px}
.ec-entry-card{border-radius:14px;transition:border-color var(--ec-motion-control,140ms) var(--ec-ease-object,cubic-bezier(.22,.61,.36,1)),
  box-shadow var(--ec-motion-control,140ms) var(--ec-ease-object,cubic-bezier(.22,.61,.36,1))}
.ec-entry-card:hover{border-color:var(--ec-rule-strong)}
.ec-wiz-step{border-radius:999px}

/* The switchboard signature: mark, line, nothing else. */
.ec-gate-sig{grid-area:sig;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--ec-rule-soft)}
.ec-gate-sig img{height:15px;width:auto;opacity:.75}
.ec-gate-sig span{font:600 12px/1.4 var(--ec-serif);color:var(--ec-muted)}
.ec-gate{grid-template-areas:"head head" "lead side" "trust trust" "slot slot" "sig sig"}
@media(max-width:1023px){
  .ec-gate{grid-template-areas:"head" "lead" "side" "trust" "slot" "sig"}
}
@media(prefers-reduced-motion:reduce){.ec-entry-card{transition:none}}

/* The pack banner: the switchboard's decision, stated rather than re-asked. */
.ec-wiz-pack{display:flex;flex-wrap:wrap;gap:10px 13px;align-items:center;margin:0 0 15px;
  padding:11px 14px;border-radius:12px;border:1px solid var(--ec-rule)}
.ec-wiz-pack[data-pack="epc"]{border-color:var(--ec-gold-line);background:var(--ec-gold-ground)}
.ec-wiz-pack[data-pack="retrofit"]{border-color:var(--ec-green-line);background:var(--ec-green-ground)}
.ec-wiz-pack img{flex:none}
.ec-wiz-pack>span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.ec-wiz-pack b{font:600 14px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-wiz-pack>span>span{font-size:12.5px;line-height:1.5;color:var(--ec-muted)}
.ec-wiz-pack a{min-height:44px;display:inline-flex;align-items:center;font-size:12.5px;white-space:nowrap}


/* ================= MOTION SYSTEM ==================================
   Built on the tokens that already exist in ec-tokens.css, which the
   reduced-motion block there collapses to 1ms — so honouring the tokens is
   how a control honours the preference. Nothing loops, nothing bobs, and
   nothing moves further than 3px. */
.ec-btn,.ec-conpill,.ec-modetab,.ec-stagetab,.ec-segbtn,.ec-pack,.ec-navpill,
.ec-fbtn,.ec-flink,.ec-entry-card,.ec-ledger-row,.ec-gate-ledger>li>button{
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             border-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control),
             transform var(--ec-motion-instant) var(--ec-ease-control)}
/* Pressed reads immediately; 1px, never a bounce. */
.ec-btn:active,.ec-fbtn:active,.ec-modetab:active,.ec-conpill:active,.ec-segbtn:active{
  transform:translateY(1px)}
.ec-btn-primary:hover,.ec-fbtn:hover{box-shadow:0 2px 10px -4px rgba(122,92,15,.45)}

/* Icons respond with their control, in the direction they mean. */
.ec-btn svg,.ec-fbtn svg,.ec-flink svg,.ec-navpill svg,.ec-conpill svg{
  transition:transform var(--ec-motion-fast) var(--ec-ease-control),
             opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-btn:hover svg[data-dir="right"],.ec-flink:hover svg{transform:translateX(2px)}
.ec-btn:hover svg[data-dir="down"]{transform:translateY(2px)}
.ec-btn:hover svg[data-dir="up"],.ec-ftop:hover svg{transform:translateY(-2px)}
.ec-ftop svg{transition:transform var(--ec-motion-fast) var(--ec-ease-control)}
details>summary svg[data-dir="chev"]{transition:transform var(--ec-motion-standard) var(--ec-ease-control)}
details[open]>summary svg[data-dir="chev"]{transform:rotate(180deg)}

/* Section entrance: fade + rise, once, when the section first arrives. */
@media(prefers-reduced-motion:no-preference){
  .ec-enter{opacity:0;transform:translateY(var(--ec-motion-d-section))}
  .ec-enter[data-seen="1"]{opacity:1;transform:none;
    transition:opacity var(--ec-motion-narrative) var(--ec-ease-object),
               transform var(--ec-motion-narrative) var(--ec-ease-object)}
}

/* ================= BACKGROUND SYSTEM ==============================
   The approved record motifs, used as a page-level ground with quiet
   variation per surface. Low contrast, behind content, hidden from assistive
   technology, and removed entirely for print so nothing reaches an output. */
body[data-ec-page]{position:relative}









/* A second, fainter corner motif so the ground is not one flat stamp. */

body[data-ec-page="home"]::after{opacity:.2}
/* Working surfaces stay clean: records, forms and documents sit on white. */
.ec-object,.ec-surf,.lz-surf,.ec-doc,.ec-region,.ec-fm-fields{background-color:var(--ec-white)}
@media print{
  body[data-ec-page]::before,
}

/* ================= HERO TAB · depth, not perpetual motion ==========
   The landing instrument sits above the hero ground: rounded, bordered, lifted
   and overlapping the composition rather than embedded flat in it. */
.ec-thread,.lz-surf{position:relative;z-index:1;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 2px 5px -2px rgba(23,49,38,.12),
             0 22px 48px -30px rgba(23,49,38,.5)}
.ec-thread::before,.lz-surf::before{content:"";position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;background:linear-gradient(var(--ec-white),var(--ec-cream));opacity:.6}
@media(min-width:1024px){
  /* A controlled overlap with the hero copy column, so it reads as a working
     document laid over the page. */
  .ec-thread,.lz-surf{margin-left:-14px}
}
@media(prefers-reduced-motion:no-preference){
  .ec-thread,.lz-surf{animation:ec-tab-in var(--ec-motion-narrative) var(--ec-ease-object) both}
}
@keyframes ec-tab-in{from{opacity:0;transform:translateY(var(--ec-motion-d-object))}to{opacity:1;transform:none}}

/* The document signature: the mark closes the record rather than heading it.
   A reader's first line should be what the document IS. */
.ec-doc-sig{display:flex;flex-wrap:wrap;gap:9px 12px;align-items:center;
  margin-top:26px;padding-top:14px;border-top:1px solid var(--ec-rule)}
.ec-doc-sig img{height:14px;width:auto;opacity:.8}
.ec-doc-sig span{font:600 11.5px/1.4 var(--ec-serif);color:var(--ec-muted)}
.ec-doc-foot{margin-top:8px}
@media print{.ec-doc-sig{break-inside:avoid}}

/* The signature rail: the banner's four-bar rule, closing the footer. */
/* The banner closes with this rule; the footer opens with it. Same four bars,
   same ascending proportions, so the two dark surfaces bracket the page. */
.ec-footer-rail{display:flex;height:3px;margin:0}
.ec-footer-rail i{display:block}


/* The rail is the footer's own top edge. The pine surface starts AT the rail,
   so the footer's rounded/overflow context must not clip it and nothing may
   sit above it. */
.ec-footer{overflow:clip}
.ec-footer>.ec-footer-rail:first-child{margin:0;width:100%}

/* ================= HERO INSTRUMENT · lifted and answerable =========
   Depth first: the tab sits above the hero ground on a real contact shadow,
   with a hairline top light. Then it ANSWERS — every source row, tab and
   registration chip responds to pointer and keyboard alike. */
.ec-thread,.lz-surf{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
             0 1px 2px rgba(23,49,38,.06),
             0 4px 8px -3px rgba(23,49,38,.10),
             0 26px 56px -28px rgba(23,49,38,.42);
  transition:box-shadow var(--ec-motion-standard) var(--ec-ease-object)}
.ec-thread:hover,.lz-surf:hover,
.ec-thread:focus-within,.lz-surf:focus-within{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
             0 2px 4px rgba(23,49,38,.07),
             0 8px 16px -4px rgba(23,49,38,.13),
             0 34px 66px -28px rgba(23,49,38,.48)}

/* Source objects are controls, so they must feel like controls. */
.lz-src,.ec-src,.ec-acct-row[data-srcrow]{
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             background-color var(--ec-motion-fast) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control),
             transform var(--ec-motion-instant) var(--ec-ease-control)}
.lz-src:hover,.ec-src:hover{border-color:var(--ec-rule-strong);
  box-shadow:0 3px 10px -5px rgba(23,49,38,.32)}
.lz-src:active{transform:translateY(1px)}
.lz-src:focus-visible{outline:3px solid var(--ec-pine);outline-offset:2px}
/* The lit account lifts clear of the others — the relationship, made physical. */
.lz-src[data-lit="1"]{box-shadow:0 0 0 3px var(--ec-gold-soft),0 6px 16px -6px rgba(122,92,15,.4)}
.lz-reg span{transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
  background-color var(--ec-motion-fast) var(--ec-ease-control),
  color var(--ec-motion-fast) var(--ec-ease-control)}

/* The pack tabs read as a raised selector, and the chosen one comes forward. */
.ec-modeset,.modeset{box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 1px 3px -1px rgba(23,49,38,.1)}
.ec-modetab[aria-pressed="true"],.modetab[aria-pressed="true"]{
  box-shadow:0 2px 8px -3px rgba(23,49,38,.26)}
.ec-modetab:not([aria-pressed="true"]):hover,.modetab:not([aria-pressed="true"]):hover{
  transform:translateY(-1px)}
.ec-modetab:active,.modetab:active{transform:translateY(1px)}
.ec-modetab img,.modetab img{transition:opacity var(--ec-motion-fast) var(--ec-ease-control),
  transform var(--ec-motion-fast) var(--ec-ease-control)}
.ec-modetab:hover img,.modetab:hover img{opacity:.85;transform:scale(1.04)}
.ec-modetab[aria-pressed="true"] img,.modetab[aria-pressed="true"] img{opacity:1;transform:none}

/* Route pills answer the pointer without becoming buttons. */
.ec-routestrip li,.route li{transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
  background-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-routestrip:hover li,.route:hover li{border-color:var(--ec-rule-strong)}

@media(prefers-reduced-motion:reduce){
  .ec-thread,.lz-surf,.lz-src,.ec-src,.ec-modetab,.modetab,.ec-routestrip li,.route li{transition:none}
  .ec-modetab:hover,.modetab:hover,.lz-src:active,.ec-modetab:active,.modetab:active{transform:none}
}


/* ---------- the pattern is a GROUND: everything sits above it ----------
   The motif is fixed at z-index:-2 on the root. Content needs a positive
   context of its own, or a section's own background paints across it. */
/* The banner and job strip keep their own sticky layers; only ordinary page
   surfaces get a floor above the background motif. */
#main{position:relative}
footer.ec-footer{position:relative;z-index:0}
header.ec-shell{position:relative}
.ec-thread,.lz-surf,.ec-object,.ec-doc,.ec-region,.ec-gate{position:relative;z-index:1}
/* Chapter grounds were a second pattern layer competing with the page motif.
   The body motif is now the single ground; chapters keep only their tint. */
.ec-chap::before{display:none}


/* ================= THE JUDGEMENT TRAIL ============================
   A decision spine, not three lists side by side. Each stage hangs off one
   vertical rule, its state visible AT the stage rather than summarised below,
   and the endpoint is open or closed by the record's real state. */
.ec-trail{padding:14px 16px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  background:var(--ec-white)}
.ec-trail-spine{list-style:none;margin:0;padding:0 0 0 30px;position:relative;
  display:flex;flex-direction:column;gap:2px}
.ec-trail-spine::before{content:"";position:absolute;left:11px;top:12px;bottom:14px;width:2px;
  background:linear-gradient(var(--ec-rule) 0 60%,var(--ec-gold-line) 60% 100%)}
.ec-trail-node,.ec-trail-open,.ec-trail-closed{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:11px;padding:9px 0}
.ec-trail-node+.ec-trail-node{border-top:1px solid var(--ec-rule-soft)}
.ec-trail-dot{position:absolute;left:-30px;top:9px;width:24px;height:24px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;background:var(--ec-white);
  border:1px solid var(--ec-rule);color:var(--ec-glyph)}
.ec-trail-node[data-tone="green"] .ec-trail-dot{border-color:var(--ec-green-line);color:var(--ec-green-ink);
  background:var(--ec-green-ground)}
.ec-trail-node[data-tone="gold"] .ec-trail-dot{border-color:var(--ec-gold);color:var(--ec-gold-ink);
  background:var(--ec-gold-soft)}
.ec-trail-node[data-gap="1"] .ec-trail-dot{border-color:var(--ec-coral-line);color:var(--ec-coral-ink);
  background:var(--ec-coral-ground)}
.ec-trail-body{grid-column:2;display:flex;flex-direction:column;gap:4px;min-width:0}
.ec-trail-lab{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-muted)}
.ec-trail-node[data-tone="gold"] .ec-trail-lab{color:var(--ec-gold-ink)}
.ec-trail-node[data-tone="green"] .ec-trail-lab{color:var(--ec-green-ink)}
.ec-trail-say{font-size:13px;line-height:1.55;color:var(--ec-ink)}
.ec-trail-quote{font:italic 400 14px/1.6 var(--ec-serif);color:var(--ec-ink)}
.ec-trail-gap{color:var(--ec-coral-ink);font-weight:600;font-size:12.5px}
.ec-trail-dest{display:block;margin-top:5px;font:400 9.5px/1.4 var(--ec-mono);
  letter-spacing:.09em;color:var(--ec-muted)}
.ec-trail-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.ec-trail-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:5px 9px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-chip);background:var(--ec-white);
  font:600 11px/1.3 var(--ec-sans);color:var(--ec-muted);cursor:default;
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             background-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-trail-chip[data-tone="green"]{border-color:var(--ec-green-line);background:var(--ec-green-ground);color:var(--ec-green-ink)}
.ec-trail-chip[data-tone="coral"]{border-color:var(--ec-coral-line);background:var(--ec-coral-ground);color:var(--ec-coral-ink)}
.ec-trail-chip:hover{border-color:var(--ec-rule-strong)}
/* The endpoint: open questions leave the spine unterminated; a closed trail
   ends on a plain mark. Never colour alone — both carry words. */
.ec-trail-open{margin-top:4px;padding:10px 12px;border:1px solid var(--ec-gold-line);
  border-left:3px solid var(--ec-gold);border-radius:var(--ec-r-control);background:var(--ec-gold-ground)}
.ec-trail-open .ec-trail-dot{border-color:var(--ec-gold);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-trail-open .ec-trail-lab{color:var(--ec-gold-ink)}
.ec-trail-closed{padding-top:10px}
.ec-trail-closed .ec-trail-dot{border-color:var(--ec-green-line);background:var(--ec-green-ground);color:var(--ec-green-ink)}
.ec-trail-closed .ec-trail-say{color:var(--ec-muted);font-size:12.5px}
@media(max-width:719px){
  .ec-trail{padding:12px 13px}
  .ec-trail-spine{padding-left:26px}
  .ec-trail-spine::before{left:9px}
  .ec-trail-dot{left:-26px;width:20px;height:20px}
}
@media print{
  /* The trail is record material, so it prints — flat, no tints that cost ink. */
  .ec-trail{border-color:#000;break-inside:avoid}
  .ec-trail-chip,.ec-trail-open{background:none!important}
}


/* ================= FOOTER · 2020s composition pass ==================
   Same architecture, better composed: the brand block carries more presence
   than the link columns, icons are legible against pine instead of nearly
   invisible, and the status band closes on dot separators rather than a rule. */

/* --- brand block leads --- */
.ec-footer-top{
  gap:26px 34px;padding:24px 26px}
.ec-footer .ec-fbrand{gap:9px;max-width:38ch}
.ec-footer .ec-fbrand-a{margin-bottom:2px}
.ec-footer .ec-fstate{font:600 14px/1.45 var(--ec-serif);color:rgba(250,248,240,.9);max-width:32ch}
.ec-footer .ec-fbound{font-size:12.5px;line-height:1.55;color:rgba(250,248,240,.62)}
.ec-footer .ec-fbound-q{font-size:11.5px;color:rgba(250,248,240,.46)}

/* --- icons legible on pine. .55 read as a smudge at 13px. --- */
.ec-fgroup h4{margin-bottom:11px;color:rgba(250,248,240,.62)}
.ec-fgroup h4 svg{opacity:.62}
.ec-flink{gap:10px;}
.ec-flink svg{opacity:.72}
.ec-flink:hover svg{opacity:1;transform:translateX(1px)}
.ec-fgroup ul{gap:1px}

/* --- contact: distinct without becoming a card --- */
/* The purpose line sits under the address, indented to the icon's text edge. */

/* --- the beta action: its own symbol, its own presence --- */

/* --- social: recognised marks, muted, no brand colour --- */

/* --- status band: dots, not dividers --- */
.ec-footer-bar{padding:12px 26px;gap:8px 24px;border-top-color:rgba(250,248,240,.1)}
.ec-fbeta{gap:5px 14px;font-size:12px;color:rgba(250,248,240,.52)}
.ec-fbeta>span+span::before{width:3px;height:3px;background:rgba(250,248,240,.3)}
.ec-fcopy{font-size:12px;color:rgba(250,248,240,.44)}
.ec-fbar-end{gap:8px 22px}

@media(max-width:1119px){
}
@media(max-width:719px){
  .ec-footer-top{gap:20px;padding:18px 15px}
  .ec-footer .ec-fbrand{max-width:none}
  /* Addresses must never overflow their column. */
  .ec-fbeta{gap:4px 12px}
}
@media(prefers-reduced-motion:reduce){
}


/* ---------- footer grid: ONE owner, last in the file ----------
   Two generations of rules were fighting. `.ec-fbrand` and `.ec-fcontact` were
   both resolving to `grid-column:1/-1; grid-row:1` — the same cell — so the
   brand block, the beta button, both addresses and the social links painted on
   top of each other. And the newest base rule (five tracks) was declared after
   the old 1119px query, so a 924px viewport kept five tracks with three 104px
   columns. Placement is reset explicitly here and the ladder is stated after
   the base rule, so source order cannot decide it again. */
.ec-footer-top>*{grid-column:auto;grid-row:auto}
@media(min-width:1120px){
  .ec-footer-top{}
}
@media(max-width:1119px){
  /* Brand across the top, three link groups beneath, contact closing. */
  .ec-footer-top{gap:20px 28px}
}
@media(max-width:767px){
  .ec-footer-top{}
}
@media(max-width:519px){
  .ec-footer-top{}
}

/* Placement, stated once. Brand opens the row-set, contact closes it. */
@media(max-width:1119px){
  .ec-footer-top>.ec-fbrand{}
}


/* ---------- banner feedback route ----------
   An outlined pill, so it reads as a distinct route rather than a nav link,
   while the gold Source Start stays the only filled action in the row. */
.ec-shell-feedback{display:inline-flex;align-items:center;gap:7px;flex:none;
  min-height:var(--ec-hdr-ctl);padding:10px 14px;border-radius:999px;
  background:transparent;border:1px solid rgba(250,248,240,.28);color:rgba(250,248,240,.88);
  font:600 13px/1 var(--ec-sans);text-decoration:none;white-space:nowrap;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             border-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-shell-feedback svg{flex:none;opacity:.72;
  transition:opacity var(--ec-motion-fast) var(--ec-ease-control),
             transform var(--ec-motion-fast) var(--ec-ease-control)}
.ec-shell-feedback:hover{background:rgba(250,248,240,.1);border-color:rgba(250,248,240,.45);
  color:var(--ec-rev-text)}
.ec-shell-feedback:hover svg{opacity:1}
.ec-shell-feedback:hover svg:last-child{transform:translateX(2px)}
.ec-shell-feedback:active{transform:translateY(1px)}
.ec-shell-feedback:focus-visible{outline:3px solid var(--ec-gold);outline-offset:2px}
/* The chevron is the first thing to go, then the label: the icon alone still
   reads, and the control keeps its 44px target at every width. */
@media(max-width:1399px){.ec-shell-feedback svg:last-child{display:none}}
@media(max-width:1023px){
  .ec-shell-feedback span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-shell-feedback{padding:10px 12px}
}
@media(max-width:519px){.ec-shell-feedback{display:none}}
@media(prefers-reduced-motion:reduce){
  .ec-shell-feedback,.ec-shell-feedback svg{transition:none}
  .ec-shell-feedback:active{transform:none}
  .ec-shell-feedback:hover svg:last-child{transform:none}
}

/* The brand line, in the same serif signature the switchboard and document
   signatures use, so one line closes the product wherever it appears. */
.ec-fline{margin:0;font:600 15px/1.35 var(--ec-serif);color:var(--ec-rev-text)}
.ec-footer .ec-fstate{font:400 13px/1.5 var(--ec-sans);color:rgba(250,248,240,.68);max-width:34ch}

/* ---------- matter examples: starting points, offered before the blank field ---------- */
.ec-exlist{margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid var(--ec-rule)}
.ec-exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(228px,100%),1fr));gap:7px}
.ec-ex{display:flex;flex-direction:column;gap:3px;padding:10px 12px;text-align:left;cursor:pointer;
  border:1px solid var(--ec-rule);border-left:3px solid var(--ec-rule-strong);
  border-radius:var(--ec-r-control);background:var(--ec-white);min-height:44px;
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             background-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-ex b{font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading)}
.ec-ex span{font-size:11.5px;line-height:1.5;color:var(--ec-muted)}
.ec-ex:hover{border-color:var(--ec-gold-line);border-left-color:var(--ec-gold);background:var(--ec-gold-ground)}
.ec-ex:focus-visible{outline:3px solid var(--ec-pine);outline-offset:2px}
/* Chosen, not confirmed: it has filled the fields, nothing more. */
.ec-ex[aria-pressed="true"]{border-color:var(--ec-gold);border-left-color:var(--ec-gold);
  background:var(--ec-gold-soft)}
.ec-ex[aria-pressed="true"] b{color:var(--ec-gold-ink)}
.ec-exnote{margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--ec-muted);max-width:70ch}
@media(prefers-reduced-motion:reduce){.ec-ex{transition:none}}


/* ---------- the hero instrument, genuinely lifted ----------
   It sat flat against the hero copy. It now overlaps the composition above and
   to the left, carries a paper edge, and casts onto the page — a working
   document laid over the hero rather than a panel embedded in it. */
@media(min-width:1024px){
  .ec-thread,.lz-surf{margin-left:-26px;margin-top:-14px;margin-right:-10px}
  /* A second sheet behind it, cropped and rotated: the tab has something to
     sit ON, which is what makes a lift read. */
  .ec-thread::after,.lz-surf::after{content:"";position:absolute;z-index:-1;
    left:14px;right:-9px;top:11px;bottom:-11px;border-radius:inherit;
    background:var(--ec-cream);border:1px solid var(--ec-rule);
    transform:rotate(.45deg);opacity:.85}
}
.ec-thread,.lz-surf{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
             0 1px 2px rgba(23,49,38,.07),
             0 6px 12px -4px rgba(23,49,38,.13),
             0 30px 64px -26px rgba(23,49,38,.5)}
.ec-thread:hover,.lz-surf:hover,.ec-thread:focus-within,.lz-surf:focus-within{
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
             0 2px 5px rgba(23,49,38,.09),
             0 12px 24px -6px rgba(23,49,38,.17),
             0 40px 78px -26px rgba(23,49,38,.55)}
@media(max-width:1023px){
  /* No overlap where the hero stacks — it would only clip. */
  .ec-thread,.lz-surf{margin:0}
  .ec-thread::after,.lz-surf::after{display:none}
}


/* ================= HERO TAB · float + one-off arrival ==============
   The lift was gated at min-width:1024, so at 924 — a common laptop width and
   the one this build is checked at — the tab sat flat with no sheet behind it.
   The float now scales with the width instead of switching off, and the arrival
   is staged: the paper sheet settles, then the tab, then its contents. Once,
   on load, never on scroll, and nothing moves after it lands. */
.ec-thread,.lz-surf{position:relative}
.ec-thread::after,.lz-surf::after{content:"";position:absolute;z-index:-1;
  border-radius:inherit;background:var(--ec-cream);border:1px solid var(--ec-rule);
  left:10px;right:-7px;top:8px;bottom:-8px;transform:rotate(.4deg);opacity:.8;display:block}
@media(min-width:1240px){
  .ec-thread,.lz-surf{margin-left:-26px;margin-top:-14px;margin-right:-10px}
  .ec-thread::after,.lz-surf::after{left:14px;right:-9px;top:11px;bottom:-11px;transform:rotate(.45deg)}
}
@media(min-width:860px) and (max-width:1239px){
  /* Still lifted, just a shorter reach. */
  .ec-thread,.lz-surf{margin-left:-12px;margin-top:-8px;margin-right:-4px}
}
@media(max-width:859px){
  .ec-thread,.lz-surf{margin:0}
  .ec-thread::after,.lz-surf::after{left:6px;right:-4px;top:5px;bottom:-5px;transform:rotate(.3deg);opacity:.7}
}
@media(max-width:519px){
  .ec-thread::after,.lz-surf::after{display:none}
}

@media(prefers-reduced-motion:no-preference){
  /* Staged arrival. The sheet arrives first so the tab has something to land
     on — that is what reads as depth rather than as a drop shadow. */
  .ec-thread,.lz-surf{animation:ec-tab-in 520ms var(--ec-ease-object) both}
  .ec-thread::after,.lz-surf::after{animation:ec-sheet-in 620ms var(--ec-ease-object) both}
  .ec-thread>*,.lz-surf>*{animation:ec-tab-content 420ms var(--ec-ease-object) both;animation-delay:180ms}
  .ec-thread>*:nth-child(2),.lz-surf>*:nth-child(2){animation-delay:240ms}
  .ec-thread>*:nth-child(3),.lz-surf>*:nth-child(3){animation-delay:300ms}
  .ec-thread>*:nth-child(4),.lz-surf>*:nth-child(4){animation-delay:360ms}
}
@keyframes ec-tab-in{
  from{opacity:0;transform:translateY(14px) scale(.994)}
  to{opacity:1;transform:none}}
@keyframes ec-sheet-in{
  from{opacity:0;transform:rotate(0deg) translateY(10px)}
  to{opacity:.8;transform:rotate(.4deg)}}
@keyframes ec-tab-content{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ec-thread,.lz-surf,.ec-thread::after,.lz-surf::after,.ec-thread>*,.lz-surf>*{animation:none}
}


/* ---------- the arrival, made observable ----------
   It was firing on parse, so it had finished before the fonts loaded and the
   page settled — running, but never seen. It now waits for a class the shell
   sets after mount, and the tab holds its pre-arrival state until then. */
@media(prefers-reduced-motion:no-preference){
  .ec-thread,.lz-surf{animation:none;opacity:0;transform:translateY(18px) scale(.99)}
  .ec-thread::after,.lz-surf::after{animation:none;opacity:0;transform:rotate(0deg) translateY(12px)}
  .ec-thread>*,.lz-surf>*{animation:none;opacity:0;transform:translateY(8px)}

  .ec-arrived.ec-thread,.ec-arrived.lz-surf{
    opacity:1;transform:none;
    transition:opacity 560ms var(--ec-ease-object) 120ms,
               transform 560ms var(--ec-ease-object) 120ms}
  .ec-arrived.ec-thread::after,.ec-arrived.lz-surf::after{
    opacity:.8;transform:rotate(.4deg);
    transition:opacity 640ms var(--ec-ease-object),transform 640ms var(--ec-ease-object)}
  .ec-arrived.ec-thread>*,.ec-arrived.lz-surf>*{
    opacity:1;transform:none;
    transition:opacity 420ms var(--ec-ease-object) var(--d,320ms),
               transform 420ms var(--ec-ease-object) var(--d,320ms)}
  .ec-arrived.ec-thread>*:nth-child(1),.ec-arrived.lz-surf>*:nth-child(1){--d:320ms}
  .ec-arrived.ec-thread>*:nth-child(2),.ec-arrived.lz-surf>*:nth-child(2){--d:400ms}
  .ec-arrived.ec-thread>*:nth-child(3),.ec-arrived.lz-surf>*:nth-child(3){--d:480ms}
  .ec-arrived.ec-thread>*:nth-child(4),.ec-arrived.lz-surf>*:nth-child(4){--d:560ms}
}
/* Without the preference, and if JS never runs, everything is simply present. */
@media(prefers-reduced-motion:reduce){
  .ec-thread,.lz-surf,.ec-thread::after,.lz-surf::after,.ec-thread>*,.lz-surf>*{
    opacity:1;transform:none;animation:none;transition:none}
  .ec-thread::after,.lz-surf::after{opacity:.8;transform:rotate(.4deg)}
}


/* ---------- background motif: visible, and behind everything ---------- */
html{background:var(--ec-page)}
body{background:transparent}
/* Above the banner's sticky layer, so the sheet is never trapped behind
   content that comes later in the document. */
.ec-shell-sheet{z-index:60}
.ec-sheet-scrim{z-index:55}


/* ================= BACKGROUND MOTIF · every page ==================
   Painted on `body` itself, following Concept 2, which puts the motif on the
   cream working field rather than on a layer behind it. A body background
   cannot be covered by a descendant stacking context, which is exactly what
   broke the previous pseudo-element approach.

   Two layers: the page motif top-right, and a quieter corner mark bottom-left,
   as Concept 8 does with record-thread. Scale and offsets follow the concepts
   (1000-1500px, pulled off-canvas so only the quiet part of the drawing shows). */
html{background:var(--ec-page)}
body[data-ec-page]{
  background-color:var(--ec-page);
  background-repeat:no-repeat,no-repeat;
  background-attachment:fixed,fixed;
  background-position:right -180px top -40px, left -260px bottom -200px;
  background-size:1000px auto, 760px auto;
  background-image:
    url('../backgrounds/quiet-record-light.svg'),
    url('../backgrounds/quiet-record-light.svg')}

/* Per page, as the concepts assign them. */
body[data-ec-page="home"]{background-image:
  url('../backgrounds/record-thread-light.svg'),
  url('../backgrounds/quiet-record-light.svg')}
body[data-ec-page="source"]{background-image:
  url('../backgrounds/field-record-light.svg'),
  url('../backgrounds/quiet-record-light.svg')}
body[data-ec-page="epc"]{background-image:
  url('../backgrounds/epc-judgement-light.svg'),
  url('../backgrounds/quiet-record-light.svg')}
body[data-ec-page="retrofit"]{background-image:
  url('../backgrounds/retrofit-evidence-light.svg'),
  url('../backgrounds/quiet-record-light.svg')}
body[data-ec-page="desk"]{background-image:
  url('../backgrounds/quiet-record-light.svg'),
  url('../backgrounds/field-record-light.svg')}
body[data-ec-page="library"]{background-image:
  url('../backgrounds/record-thread-light.svg'),
  url('../backgrounds/quiet-record-light.svg')}
body[data-ec-page="portfolio"]{background-image:
  url('../backgrounds/quiet-record-light.svg'),
  url('../backgrounds/record-thread-light.svg')}
body[data-ec-page="trust"]{background-image:
  url('../backgrounds/quiet-record-light.svg'),
  url('../backgrounds/quiet-record-light.svg')}

/* The wrappers must not paint over it. Working surfaces still do — records,
   documents and forms sit on white, as the concepts show. */
body[data-ec-page] #main,
body[data-ec-page] .ec-main,
body[data-ec-page] .ec-chap,
body[data-ec-page] .ec-wrap{background-color:transparent}
.ec-chap::before{display:none}

@media(max-width:719px){
  body[data-ec-page]{background-size:150vw auto,120vw auto;
    background-position:right -90px top -30px, left -150px bottom -140px}
}
@media print{
  /* Nothing patterned may reach an output document. */
  body[data-ec-page]{background-image:none!important;background-color:#fff!important}
}

/* ---------- menu sheet above the banner controls ----------
   The sheet is opened BY a control in the banner, so it must sit above the
   banner's own stacking layer — otherwise the pills it should cover paint on
   top of it. */
.ec-shell{z-index:40}
.ec-sheet-scrim{z-index:1200}
.ec-shell-sheet{z-index:1210}
.ec-menu-pop{z-index:1210}


/* ---------- banner row: the CTA must never be clipped ----------
   The Feedback pill pushed .ec-shell-row to 906px inside an 890px clip at
   924px, and because the row is nowrap with every child flex:0 0 auto, the
   overflow landed silently on the last child — the primary action, cut
   mid-word. Two changes: Feedback stands down earlier (the footer keeps a
   feedback route at every width, so nothing is lost), and the CTA is made
   unshrinkable while the menu control may give up space, so the primary
   action can never be the thing that loses. */
.ec-shell-cta{flex:0 0 auto!important}
.ec-menu-btn{min-width:0}
@media(max-width:1199px){
  /* Icon-only: still 44px, accessible name preserved by the label. */
  .ec-shell-feedback span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-shell-feedback{padding:10px 12px}
  .ec-shell-feedback svg:last-child{display:none}
}
@media(max-width:1023px){
  /* No room for it beside the pack switch and the CTA. The footer's
     'Send beta feedback' is the route at these widths. */
  .ec-shell-feedback{display:none}
}


/* ---------- the hero tab drifts on its own ----------
   Until now it arrived and then sat still. It should read as a working document
   resting on the page rather than something printed onto it, so it drifts —
   very slightly, and slowly: 5px of travel and a quarter-degree of rotation
   over 14s, with the paper sheet beneath moving on a longer cycle so the two
   never lock together (that mismatch is what makes it read as two objects).
   Pauses on hover and focus so it is never moving while being read, and stops
   entirely under prefers-reduced-motion. */
@media(prefers-reduced-motion:no-preference){
  .ec-arrived.ec-thread,.ec-arrived.lz-surf{
    animation:ec-tab-drift 14s var(--ec-ease-inout,ease-in-out) 1.2s infinite}
  .ec-arrived.ec-thread::after,.ec-arrived.lz-surf::after{
    animation:ec-sheet-drift 19s var(--ec-ease-inout,ease-in-out) 1.2s infinite}
  /* Never in motion while someone is reading or typing in it. */
  .ec-arrived.ec-thread:hover,.ec-arrived.lz-surf:hover,
  .ec-arrived.ec-thread:focus-within,.ec-arrived.lz-surf:focus-within{
    animation-play-state:paused}
  .ec-arrived.ec-thread:hover::after,.ec-arrived.lz-surf:hover::after,
  .ec-arrived.ec-thread:focus-within::after,.ec-arrived.lz-surf:focus-within::after{
    animation-play-state:paused}
}
@keyframes ec-tab-drift{
   0%  {transform:translate3d(0,0,0) rotate(0deg)}
  28%  {transform:translate3d(-2px,-5px,0) rotate(-.22deg)}
  55%  {transform:translate3d(1px,-2.5px,0) rotate(.14deg)}
  78%  {transform:translate3d(2px,-4px,0) rotate(.2deg)}
 100%  {transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes ec-sheet-drift{
   0%  {transform:rotate(.4deg) translate3d(0,0,0)}
  34%  {transform:rotate(.66deg) translate3d(2px,2px,0)}
  67%  {transform:rotate(.24deg) translate3d(-1px,3px,0)}
 100%  {transform:rotate(.4deg) translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .ec-arrived.ec-thread,.ec-arrived.lz-surf,
  .ec-arrived.ec-thread::after,.ec-arrived.lz-surf::after{animation:none}
}


/* ================= HERO INSTRUMENTS · the full chain ==============
   Both fields used to stop at the product's first move — sources compared, or
   evidence listed — which is why they read as showcase tiles. They now carry
   the whole workflow, and the two geometries stay genuinely different: EPC
   converges on one axis toward a value the assessor selects; Retrofit
   accumulates against a place and travels outward to another role. */

/* ---------- stage spine, shared ---------- */
.ec-stg{display:flex;flex-wrap:wrap;gap:2px 0;margin:0 0 13px;padding:0;list-style:none;
  border-top:1px solid var(--ec-rule-soft);border-bottom:1px solid var(--ec-rule-soft);
  padding-top:8px;padding-bottom:8px}
.ec-stg-i{display:flex;align-items:center;gap:6px;padding-right:13px;
  font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-glyph)}
.ec-stg-d{width:6px;height:6px;flex:none;border-radius:50%;border:1.5px solid var(--ec-rule-strong);background:var(--ec-white)}
/* Established by the product. */
.ec-stg-i[data-state="done"]{color:var(--ec-muted)}
.ec-stg-i[data-state="done"] .ec-stg-d{background:var(--ec-pine);border-color:var(--ec-pine)}
/* Written by the assessor — the distinction the whole product rests on. */
.ec-stg-i[data-state="you"]{color:var(--ec-gold-ink)}
.ec-stg-i[data-state="you"] .ec-stg-d{background:var(--ec-gold);border-color:var(--ec-gold)}
.ec-stg-i[data-state="out"]{color:var(--ec-heading)}
.ec-stg-i[data-state="out"] .ec-stg-d{background:var(--ec-white);border-color:var(--ec-pine);
  border-radius:1px;transform:rotate(45deg)}
body[data-ec-page] .ec-hf[data-mode="retrofit"] .ec-stg-i[data-state="you"]{color:var(--ec-green-ink)}

/* ================= EPC · the gate and what follows ================ */
.ec-jgate{display:flex;align-items:center;gap:11px;margin:15px 0 0}
.ec-jgate-r{flex:1 1 auto;height:1px;background:linear-gradient(90deg,transparent,var(--ec-gold-line),transparent)}
.ec-jgate-t{display:inline-flex;align-items:center;gap:7px;flex:none;padding:5px 11px;
  border:1px solid var(--ec-gold);border-radius:var(--ec-r-pill);background:var(--ec-gold-soft);
  font:600 11px/1.3 var(--ec-sans);color:var(--ec-gold-ink);letter-spacing:.01em}
.ec-jgate-t svg{flex:none}
.ec-jgate-t code{margin-left:2px}

.ec-jrec{display:flex;flex-direction:column;gap:0;margin-top:12px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);background:var(--ec-white);overflow:clip}
.ec-jrec-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 13px;
  padding:10px 13px;border-top:1px solid var(--ec-rule-soft);margin:0}
.ec-jrec-row:first-child{border-top:0}
.ec-jrec-row[data-k="reason"]{background:var(--ec-gold-ground)}
.ec-jrec-row[data-k="lim"]{background:var(--ec-coral-ground)}
.ec-jrec-k{font:600 9.5px/1.5 var(--ec-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ec-muted)}
.ec-jrec-row[data-k="reason"] .ec-jrec-k{color:var(--ec-gold-ink)}
.ec-jrec-row[data-k="lim"] .ec-jrec-k{color:var(--ec-coral-ink)}
.ec-jrec-v{font-size:12.5px;line-height:1.5;color:var(--ec-ink);min-width:0}
.ec-jrec-v code{margin-right:5px}
.ec-jrec-v i{display:block;margin-top:3px;font:400 11px/1.45 var(--ec-sans);font-style:normal;color:var(--ec-muted)}
.ec-jrec-v q{font:italic 400 13px/1.6 var(--ec-serif);color:var(--ec-ink)}

/* Registration: the output aligns with what produced it. */
.ec-jout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  margin-top:11px;padding:11px 13px;border:1px solid var(--ec-pine);border-radius:var(--ec-r-doc);
  background:var(--ec-cream-raised)}
.ec-jout-tick{width:9px;height:9px;margin-top:4px;border-left:1.5px solid var(--ec-pine);
  border-top:1.5px solid var(--ec-pine)}
.ec-jout-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.ec-jout-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font:600 11.5px/1.35 var(--ec-mono);letter-spacing:.04em;color:var(--ec-heading)}
.ec-jout-rev{padding:1px 6px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-chip);
  background:var(--ec-white);font-size:10px;color:var(--ec-muted)}
.ec-jout-s{font-size:11.5px;line-height:1.5;color:var(--ec-muted)}

/* ================= RETROFIT · place, evidence, limit, handover ==== */
.ec-ev{display:flex;flex-direction:column;gap:0}
.ec-ev-place{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  padding:11px 13px;border:1px solid var(--ec-green-line);border-radius:var(--ec-r-doc) var(--ec-r-doc) 0 0;
  background:var(--ec-green-ground);color:var(--ec-green-ink)}
.ec-ev-place svg{margin-top:2px;flex:none}
.ec-ev-place b{display:block;font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading)}
.ec-ev-place i{display:block;margin-top:2px;font:400 11.5px/1.5 var(--ec-sans);font-style:normal;color:var(--ec-green-ink)}

/* Evidence hangs OFF the place — the join is drawn, not implied. */
.ec-ev-lane{border:1px solid var(--ec-rule);border-top:0;background:var(--ec-white);
  padding:2px 13px 4px 26px;position:relative}
.ec-ev-lane::before{content:"";position:absolute;left:15px;top:0;bottom:16px;width:1px;background:var(--ec-green-line)}
.ec-ev-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 9px;align-items:center;
  padding:9px 0;border-top:1px solid var(--ec-rule-soft);position:relative}
.ec-ev-row:first-child{border-top:0}
.ec-ev-join{position:absolute;left:-11px;width:9px;height:1px;background:var(--ec-green-line)}
.ec-ev-what{font-size:12.5px;line-height:1.5;color:var(--ec-ink);min-width:0}
.ec-ev-how{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--ec-r-chip);
  border:1px solid var(--ec-rule);background:var(--ec-cream);white-space:nowrap;
  font:600 10px/1.3 var(--ec-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ec-muted)}
.ec-ev-how[data-how="measured"]{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}

/* The limitation interrupts. */
.ec-ev-lim{position:relative;border:1px solid var(--ec-coral-line);border-top:0;
  background:var(--ec-coral-ground);padding:11px 13px}
.ec-ev-limr{position:absolute;left:0;right:0;top:-1px;height:2px;
  background:repeating-linear-gradient(90deg,var(--ec-coral) 0 7px,transparent 7px 13px)}
.ec-ev-lim p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0}
.ec-ev-lim svg{margin-top:2px;flex:none;color:var(--ec-coral-ink)}
.ec-ev-lim b{display:block;font:600 12.5px/1.4 var(--ec-sans);color:var(--ec-coral-ink)}
.ec-ev-lim i{display:block;margin-top:3px;font:400 11.5px/1.5 var(--ec-sans);font-style:normal;color:var(--ec-coral-ink)}

/* And the question leaves the record. */
.ec-ev-q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  padding:11px 13px;border:1px solid var(--ec-gold-line);border-top:0;
  border-radius:0 0 var(--ec-r-doc) var(--ec-r-doc);background:var(--ec-gold-ground)}
.ec-ev-qarrow{width:0;height:0;margin-top:5px;border-top:5px solid transparent;
  border-bottom:5px solid transparent;border-left:8px solid var(--ec-gold)}
.ec-ev-qb{display:flex;flex-direction:column;gap:5px;min-width:0}
.ec-ev-qh{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  font:600 11px/1.3 var(--ec-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ec-gold-ink)}
.ec-ev-qb q{font:italic 400 13px/1.6 var(--ec-serif);color:var(--ec-ink)}
.ec-ev-qb i{font:400 11px/1.5 var(--ec-sans);font-style:normal;color:var(--ec-muted)}

@media(max-width:719px){
  .ec-jrec-row{grid-template-columns:minmax(0,1fr)}
  .ec-jrec-k{letter-spacing:.09em}
  .ec-ev-row{grid-template-columns:auto minmax(0,1fr)}
  .ec-ev-how{grid-column:2}
  .ec-stg-i{padding-right:10px}
}

/* The instrument's caption: which seeded record is being shown. */
.ec-thread-foot{padding:11px 16px;border-top:1px solid var(--ec-rule-soft);
  background:var(--ec-cream-raised);font-size:11.5px;line-height:1.5;color:var(--ec-muted)}


/* ================= ICON RESPONSE · one system ======================
   Icons were animating only where a rule happened to name them (footer links,
   two directional cases). Every icon inside an interactive control now responds
   to hover and to keyboard focus alike, on the approved tokens, and the
   movement carries the control's MEANING rather than being decoration:
   directional icons travel, disclosures rotate, marks lift, destructive ones
   stay still. Nothing exceeds 2px. */
:is(button,a,summary,[role="button"],label) svg{
  transition:transform var(--ec-motion-fast) var(--ec-ease-control),
             opacity var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}

/* The default: a small lift, so the icon acknowledges the pointer. */
:is(button,a,summary,[role="button"]):hover > svg,
:is(button,a,summary,[role="button"]):focus-visible > svg{transform:translateY(-1px)}

/* Directional meaning wins over the default. */
:is(button,a):hover svg[data-dir="right"]{transform:translateX(2px)}
:is(button,a):hover svg[data-dir="left"]{transform:translateX(-2px)}
:is(button,a):hover svg[data-dir="up"]{transform:translateY(-2px)}
:is(button,a):hover svg[data-dir="down"]{transform:translateY(2px)}

/* Icons whose symbol names an action get that action's gesture. */
:is(button,a):hover svg:has(use[href="#ec-import"]){transform:translateY(-2px)}
:is(button,a):hover svg:has(use[href="#ec-export-backup"]){transform:translateY(2px)}
:is(button,a):hover svg:has(use[href="#restore"]),
:is(button,a):hover svg:has(use[href="#action-undo"]){transform:rotate(-14deg)}
:is(button,a):hover svg:has(use[href="#ec-print"]){transform:translateY(1px) scale(1.04)}
:is(button,a):hover svg:has(use[href="#action-edit"]){transform:translate(1px,-1px) rotate(-8deg)}
:is(button,a):hover svg:has(use[href="#ec-question"]){transform:scale(1.1)}
:is(button,a):hover svg:has(use[href="#thread-destination"]){transform:translateX(2px)}
:is(button,a):hover svg:has(use[href="#ec-external"]){transform:translate(1px,-1px)}
:is(button,a):hover svg:has(use[href="#ec-mail"]){transform:translateY(-1px) scale(1.05)}
:is(button,a):hover svg:has(use[href="#ec-beta-feedback"]){transform:scale(1.07) rotate(-4deg)}
/* A limitation is a professional boundary, not an error — it does not jitter.
   Destructive controls hold still too: movement there reads as encouragement. */
:is(button,a):hover svg:has(use[href="#ec-limitation-boundary"]),
:is(button,a):hover svg:has(use[href="#action-delete"]),
:is(button,a):hover svg:has(use[href="#ec-review-required"]){transform:none;opacity:1}

/* Disclosures rotate to show direction of travel. */
details > summary svg:has(use[href="#ec-chevron"]),
details > summary svg[data-dir="chev"]{transition:transform var(--ec-motion-standard) var(--ec-ease-control)}
details[open] > summary svg:has(use[href="#ec-chevron"]),
details[open] > summary svg[data-dir="chev"]{transform:rotate(180deg)}

/* Product marks are images, not sprite symbols, so they need their own rule. */
:is(button,a):hover img[src*="-mark.svg"]{transform:scale(1.05)}
:is(button,a) img[src*="-mark.svg"]{transition:transform var(--ec-motion-fast) var(--ec-ease-control)}
/* The approved logo never animates. */
.ec-shell-brand img,.ec-fbrand img,.ec-doc-sig img{transition:none!important;transform:none!important}

@media(prefers-reduced-motion:reduce){
  :is(button,a,summary,[role="button"],label) svg,
  :is(button,a) img[src*="-mark.svg"]{transition:none!important;transform:none!important}
}


/* ================= STAGE SURFACES · a quiet ground =================
   The five stage panels were flat cream while the page behind them carried the
   record motif — so the largest surfaces in the product were the only ones with
   no identity. Each stage now takes a faint motif of its own, keyed to the pack,
   at a lower intensity than the page so it reads as the same material rather
   than a second pattern competing with it. */
.ec-stage{position:relative;background-repeat:no-repeat;
  background-position:right -140px top -70px;background-size:820px auto}
body[data-ec-page="epc"] .ec-stage{background-image:url('../backgrounds/epc-judgement-light.svg')}
body[data-ec-page="retrofit"] .ec-stage{background-image:url('../backgrounds/retrofit-evidence-light.svg')}
body[data-ec-page="desk"] .ec-stage,
body[data-ec-page="source"] .ec-stage{background-image:url('../backgrounds/field-record-light.svg')}

/* The stage rail itself: the motif runs behind the tabs so the head of the
   workspace and its body read as one object. */
.ec-stagerail{position:relative;background-repeat:no-repeat;
  background-position:right -90px bottom -150px;background-size:640px auto}
body[data-ec-page="epc"] .ec-stagerail{background-image:url('../backgrounds/epc-judgement-light.svg')}
body[data-ec-page="retrofit"] .ec-stagerail{background-image:url('../backgrounds/retrofit-evidence-light.svg')}

/* The selected tab lifts clear of that ground on plain white, so the pattern
   never sits behind the label a reader is trying to read. */
.ec-stagetab[aria-selected="true"]{background:var(--ec-white)}

/* Working surfaces stay clean: nothing patterned behind a record, a document,
   a form or an evidence plate. */
.ec-stage :is(.ec-object,.ec-doc,.ec-region,.ec-acct,.ec-trail,.ec-evplate,
  .ec-fm-fields,.ec-band,.ec-limlane,.ec-srcfield,.ec-ledger){background-color:var(--ec-white)}

@media(max-width:719px){
  .ec-stage{background-size:150vw auto;background-position:right -40px top -30px}
  .ec-stagerail{background-image:none}
}
@media print{
  .ec-stage,.ec-stagerail{background-image:none!important}
}


/* ================= NARROW-WIDTH OVERFLOW GUARD ====================
   Found by measurement, not by eye: the sweep caught 66px of horizontal
   overflow on the landing page at 320px and 23px on the Assessor Desk. The
   cause in every case was a fixed minimum wider than the viewport — a grid
   track, a min-width, or an unbreakable string. A phone must never scroll
   sideways, so every fixed minimum is capped at the available width. */
@media(max-width:479px){
  /* Any auto-fit grid track wider than the screen collapses to one column. */
  .ec-outgrid,.ec-docgrid,.ec-lane,.ec-plates,.ec-band-o,.ec-exgrid,
  .ec-intake,.ec-sumgrid,.ec-revgroup{grid-template-columns:minmax(0,1fr)!important}
  /* Long unbroken strings — addresses, filenames, emails, URLs — must wrap. */
  .ec-fact,.ec-fmail,.ec-idref,.ec-reg-row,.ec-fm-row,.ec-ledger-title,
  .ec-jout-h,.ec-obs-t,.ec-trail-say{overflow-wrap:anywhere}
  /* Nothing may impose a width the screen cannot give. */
  .ec-wrap>*,.ec-stage>*{max-width:100%}
}
/* A final backstop at every width: the page itself cannot scroll sideways.
   Applied to the element that owns the page box, not to descendants, so no
   sticky or overflowing child is silently clipped. */
html{overflow-x:hidden}


/* ---------- Assessor Desk instrument dock at phone widths ----------
   Measured, not guessed: at 320px `.ec-congroup` rendered 312px inside a 290px
   column — its own 20px padding plus the pill row's intrinsic minimum. Two
   competing 719px rules also disagreed (one `flex-wrap:nowrap` with a
   horizontal scroller, one `flex-wrap:wrap`), so the dock's behaviour depended
   on source order. Settled here, last in the file: the dock wraps, every part
   may shrink, and the route labels break rather than push the page sideways. */
@media(max-width:479px){
  .ec-conbar{padding:10px;gap:10px}
  .ec-congroup{padding:0;min-width:0;width:100%;flex-wrap:wrap}
  .ec-conpills{flex-wrap:wrap;width:100%;min-width:0;padding:3px;overflow-x:visible}
  .ec-conpills>.ec-conpill{flex:1 1 100%;min-width:0}
  .ec-conpill>span{min-width:0;overflow-wrap:anywhere}
  .ec-route-n,.ec-route-v,.ec-route-s{min-width:0;overflow-wrap:anywhere}
}

/* A refused write is not a saved state and must never look like one. */
.ec-savestate[data-state="failed"]{border-color:var(--ec-coral-line);
  background:var(--ec-coral-ground);color:var(--ec-coral-ink);font-weight:600}


/* ================= WORKSPACE IDENTITY BLOCK ========================
   The gateway assumed the visitor already knew which profession a workspace
   serves. Mark, name, audience and purpose now sit above the heading, with the
   boundary alongside — so a DEA or a Retrofit Assessor knows within a second
   whether this workspace is theirs. The two marks are siblings: identical
   bounding geometry and optical weight, differing by what the geometry means. */
.ec-wsid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 15px;
  align-items:start;margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid var(--ec-rule)}
.ec-wsid-mark{grid-row:span 2;flex:none;margin-top:2px}
.ec-wsid-b{min-width:0}
.ec-wsid-n{font:600 19px/1.2 var(--ec-serif);color:var(--ec-heading)}
/* The audience is the orientation fact, so it is set in the pack's own accent
   and never allowed to drop out responsively. */
.ec-wsid-a{margin-top:3px;font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.14em;
  text-transform:uppercase}
.ec-wsid[data-pack="epc"] .ec-wsid-a{color:var(--ec-gold-ink)}
.ec-wsid[data-pack="retrofit"] .ec-wsid-a{color:var(--ec-green-ink)}
.ec-wsid-p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ec-ink);max-width:52ch}
/* The boundary: present, but subordinate to the audience rather than a banner. */
.ec-wsid-bound{grid-column:2;display:flex;gap:8px;align-items:flex-start;
  margin-top:2px;padding:8px 11px;border-radius:8px;
  font-size:12px;line-height:1.5;max-width:64ch}
.ec-wsid[data-pack="epc"] .ec-wsid-bound{background:var(--ec-gold-ground);
  border:1px solid var(--ec-gold-line);color:var(--ec-gold-ink)}
.ec-wsid[data-pack="retrofit"] .ec-wsid-bound{background:var(--ec-green-ground);
  border:1px solid var(--ec-green-line);color:var(--ec-green-ink)}
@media(max-width:719px){
  .ec-wsid{grid-template-columns:auto minmax(0,1fr);gap:5px 12px}
  .ec-wsid-mark{width:28px;height:28px}
  .ec-wsid-n{font-size:17px}
  /* The audience label survives every width — it is core orientation. */
  .ec-wsid-a{letter-spacing:.12em}
  .ec-wsid-bound{grid-column:1/-1}
}

/* The fictional example names the profession it demonstrates, in that pack's
   accent, so the label reads as orientation rather than a generic demo tag. */
.ec-gate-exk[data-pack="epc"]{color:var(--ec-gold-ink)}
.ec-gate-exk[data-pack="retrofit"]{color:var(--ec-green-ink)}


/* ---------- commercial document: logo, and the owner-facing note ----------
   The logo picker is a real file input, so the assessor's own mark can go on a
   quote or invoice without hunting for a data URL. The portfolio note appears
   on invoices only, framed as a note-keeping aid — never as compliance. */
.ec-q-logopick{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-bottom:8px}
.ec-q-logoprev{max-height:44px;max-width:180px;width:auto;height:auto;
  border:1px solid var(--ec-rule);border-radius:6px;background:var(--ec-white);padding:4px}
.ec-q-f input[type="file"]{font:400 12.5px/1.4 var(--ec-sans);color:var(--ec-ink);
  padding:9px 10px;border:1px dashed var(--ec-rule-strong);border-radius:8px;
  background:var(--ec-inset);width:100%;min-height:44px}
.ec-q-help{display:block;margin-top:5px;font-size:11.5px;line-height:1.5;color:var(--ec-muted)}

/* On the sheet itself the logo sits above the firm name, capped so a large
   image cannot dominate the document. */
.ec-q-logo{max-height:46px;max-width:190px;width:auto;height:auto;margin-bottom:7px;display:block}

/* The owner-facing note: quiet, clearly separate from the fee, and visibly not
   part of the assessor's professional record. */
.ec-q-portfolio{margin-top:16px;padding:12px 14px;border:1px dashed var(--ec-rule-strong);
  border-radius:8px;background:var(--ec-inset)}
.ec-q-portfolio p{font-size:11.5px;line-height:1.6;color:var(--ec-muted);max-width:74ch}
.ec-q-portfolio .ec-q-plabel{font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ec-heading);margin-bottom:5px}
.ec-q-plink{margin-top:5px;font:400 11px/1.4 var(--ec-mono);letter-spacing:.04em;color:var(--ec-ink)}
.ec-q-foot b{color:var(--ec-heading)}
@media print{
  .ec-q-portfolio{border-color:#999;background:none}
}


/* ---------- Home as a first-class tab, in the master brand ----------
   Same geometry and optical weight as the pack tabs, so it reads as a peer —
   but neutral cream/pine rather than gold or green, because Home is the master
   product story, not a third workspace. */
/* The active pack tabs carry their own tint; Home carries the brand's own
   cream, which is what distinguishes master from workspace at a glance. */


/* ================= LANDING · folder → record, one transformation ==========
   Merged from the Concept 17B landing page, which handled this better than the
   two-column question list it replaces. A dark field so the chapter change
   carries meaning, and one continuous movement rather than three columns. */
.ec-bridge{padding-top:30px;padding-bottom:22px}
.ec-bridge p{display:flex;align-items:center;gap:14px;margin:0;
  font:italic 400 15px/1.5 var(--ec-serif);color:var(--ec-glyph);max-width:70ch}
.ec-bridge span{flex:none;width:30px;height:1px;background:var(--ec-rule-strong)}

.ec-chap-fold{background:var(--ec-pine);color:var(--ec-rev-text);padding:40px 0 44px;margin-bottom:8px}
.ec-chap-fold::before,.ec-chap-fold::after{display:none!important}
.ec-fold-h{font:600 clamp(20px,2.2vw,27px)/1.18 var(--ec-serif);color:var(--ec-rev-text);max-width:32ch}
.ec-fold-lede{margin-top:9px;font-size:13.5px;line-height:1.6;color:rgba(250,248,240,.62);max-width:62ch}

.ec-fold{display:grid;grid-template-columns:minmax(0,.82fr) 34px minmax(0,1.25fr) 34px minmax(0,1.1fr);
  align-items:center;margin-top:26px}
.ec-fold-stage{min-width:0}
.ec-fold-lab{font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.15em;text-transform:uppercase;
  color:rgba(250,248,240,.5);margin-bottom:11px}
.ec-fold-lab[data-tone="gold"]{color:var(--ec-gold)}
/* Stage 1 · loose material, visibly not a record. */
.ec-fold-slips{display:flex;flex-direction:column;gap:7px;padding:13px;
  border:1px solid rgba(250,248,240,.16);border-radius:12px;background:rgba(250,248,240,.04)}
.ec-slip{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  background:rgba(250,248,240,.07);border:1px solid rgba(250,248,240,.1);
  font:400 12px/1.3 var(--ec-mono);color:rgba(250,248,240,.86);transform:rotate(var(--r,0deg))}
.ec-slip svg{flex:none;opacity:.6}
.ec-fold-note{margin-top:9px;font-size:11.5px;line-height:1.5;color:rgba(250,248,240,.4)}
/* The connectors: one thread converging, so it reads as movement. */
.ec-fold-join{position:relative;height:100%;min-height:70px}
.ec-fold-join::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(250,248,240,.14),rgba(229,179,66,.55))}
/* Stage 2 · the same facts, now comparable, with roles. */
.ec-fold-rows{display:flex;flex-direction:column}
.ec-fold-row{display:grid;grid-template-columns:58px 88px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:10px 0;border-top:1px solid rgba(250,248,240,.12);background:none;border-left:0;
  border-right:0;border-bottom:0;text-align:left;cursor:default;width:100%;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-fold-row:first-child{border-top:0}
.ec-fold-row code{font:400 11px/1 var(--ec-mono);letter-spacing:.06em;color:rgba(250,248,240,.62)}
.ec-fold-row b{font:600 17px/1 var(--ec-serif);color:var(--ec-rev-text);font-variant-numeric:tabular-nums}
.ec-fold-row span{font-size:12px;line-height:1.4;color:rgba(250,248,240,.6)}
.ec-fold-row[data-relied="1"] b{color:var(--ec-gold)}
.ec-fold-row[data-relied="1"] span{color:var(--ec-gold)}
/* Lighting one account is how the page answers "where did this come from?". */
.ec-fold[data-lit]:not([data-lit=""]) .ec-fold-row{opacity:.4}
.ec-fold[data-lit]:not([data-lit=""]) .ec-fold-row:hover,
.ec-fold[data-lit]:not([data-lit=""]) .ec-fold-row:focus-visible{opacity:1;background:rgba(250,248,240,.06)}
.ec-fold-row:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.ec-fold-diff{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;
  border-left:3px solid var(--ec-gold);border-radius:0 8px 8px 0;background:rgba(229,179,66,.11);
  font-size:12.5px;line-height:1.55;color:rgba(250,248,240,.9)}
.ec-fold-diff svg{flex:none;margin-top:2px;color:var(--ec-gold)}
.ec-fold-diff b{color:var(--ec-gold)}
/* Stage 3 · the assessor's own record, on white: it is a document now. */
.ec-fold-rec{margin:0;padding:14px 16px;background:var(--ec-white);color:var(--ec-ink);
  border-left:3px solid var(--ec-gold);border-radius:0 10px 10px 0;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.6)}
.ec-fold-quote{font:italic 400 14px/1.6 var(--ec-serif);color:var(--ec-ink)}
.ec-fold-quote.ec-fold-empty{font-style:normal;font-size:12.5px;color:var(--ec-muted)}
.ec-fold-dest{margin-top:10px;padding-top:9px;border-top:1px solid var(--ec-rule);
  font:400 9.5px/1.4 var(--ec-mono);letter-spacing:.09em;color:var(--ec-muted)}
.ec-fold-qual{display:flex;align-items:center;gap:6px;margin-top:5px;
  font:600 11px/1.4 var(--ec-sans);color:var(--ec-coral-ink)}

@media(max-width:1023px){
  /* Vertical, and the joins become downward threads: the relationship survives
     even though the geometry does not. */
  .ec-fold{grid-template-columns:minmax(0,1fr);gap:0}
  .ec-fold-join{min-height:26px;height:26px;justify-self:start;width:1px;margin-left:17px}
  .ec-fold-join::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(250,248,240,.14),rgba(229,179,66,.55))}
  .ec-fold-stage{padding:4px 0}
}
@media(max-width:719px){
  .ec-chap-fold{padding:30px 0 34px}
  .ec-fold-row{grid-template-columns:52px minmax(0,1fr);gap:4px 10px}
  .ec-fold-row span{grid-column:2}
}
@media(prefers-reduced-motion:reduce){.ec-fold-row{transition:none}}


/* ================= LANDING · boundary as a diagram ==================
   Merged from Concept 17B, replacing the four-column scope matrix. Two
   territories, the relationship named ON the rule between them, and neither
   side subordinate: same type scale and ground weight on both. */
.ec-bd{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;
  border-top:1px solid var(--ec-rule);border-bottom:1px solid var(--ec-rule)}
.ec-bd-zone{padding:20px 26px 18px;display:flex;flex-direction:column;gap:12px;
  transition:background-color var(--ec-motion-standard) var(--ec-ease-control)}
.ec-bd-zone[data-zone="official"]{padding-left:0}
.ec-bd-zone[data-zone="ours"]{padding-right:0;
  background:linear-gradient(180deg,var(--ec-gold-ground),transparent 72%)}
/* Hovering a territory brings its own track forward — the one interaction that
   makes "two independent systems" legible before the paragraph is read. */
.ec-bd:hover .ec-bd-zone{opacity:.55}
.ec-bd .ec-bd-zone:hover{opacity:1}
.ec-bd-lab{font:600 10px/1.3 var(--ec-sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ec-muted)}
.ec-bd-zone[data-zone="ours"] .ec-bd-lab{color:var(--ec-gold-ink)}
.ec-bd-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:s}
.ec-bd-flow li{counter-increment:s;display:flex;align-items:center;gap:9px;padding:9px 0;
  border-top:1px solid var(--ec-rule-soft);font:400 14px/1.4 var(--ec-sans);color:var(--ec-ink)}
.ec-bd-flow li:first-child{border-top:0}
.ec-bd-flow li::before{content:counter(s);flex:none;width:16px;
  font:400 9.5px/1 var(--ec-mono);letter-spacing:.04em;color:var(--ec-glyph)}
.ec-bd-flow li svg{flex:none;color:var(--ec-gold-ink);opacity:.75}
.ec-bd-note{margin-top:auto;padding-top:4px;font:italic 400 12px/1.55 var(--ec-serif);
  color:var(--ec-glyph);max-width:36ch}
.ec-bd-line{position:relative;width:1px;background:var(--ec-pine);
  display:flex;align-items:center;justify-content:center}
.ec-bd-word{position:absolute;padding:5px 11px;background:var(--ec-page);
  border:1px solid var(--ec-pine);border-radius:var(--ec-r-pill);
  font:600 10px/1 var(--ec-sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ec-heading);white-space:nowrap}
.ec-bd-sub{position:absolute;top:calc(50% + 24px);padding:0 8px;background:var(--ec-page);
  font:400 9.5px/1.3 var(--ec-sans);letter-spacing:.05em;color:var(--ec-muted);white-space:nowrap}
.ec-bd-resp{margin-top:16px;padding-left:15px;border-left:3px solid var(--ec-pine);
  font-size:12.5px;line-height:1.65;max-width:88ch;color:var(--ec-ink)}
@media(max-width:859px){
  .ec-bd{grid-template-columns:minmax(0,1fr)}
  .ec-bd-zone,.ec-bd-zone[data-zone="official"],.ec-bd-zone[data-zone="ours"]{padding:18px 0}
  .ec-bd-line{width:auto;height:1px;justify-content:flex-start}
  .ec-bd-word{position:relative}
  .ec-bd-sub{display:none}
  .ec-bd:hover .ec-bd-zone{opacity:1}
}

/* ================= LANDING · the durable record ===================== */
.ec-after{margin-top:26px;padding-top:24px;border-top:1px solid var(--ec-rule)}
.ec-after-h{font:600 clamp(19px,2vw,25px)/1.22 var(--ec-serif);margin-bottom:6px}
.ec-after-lede{max-width:62ch;font-size:13.5px;line-height:1.6;color:var(--ec-muted);margin-bottom:22px}
.ec-after-grid{display:grid;grid-template-columns:minmax(0,.8fr) 34px minmax(0,1.2fr);align-items:start}
.ec-job{background:var(--ec-white);border:1px solid var(--ec-rule-strong);
  border-left:3px solid var(--ec-pine);border-radius:12px;padding:16px 18px}
.ec-job-id{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ec-job-id code{font:400 10px/1.3 var(--ec-mono);letter-spacing:.1em;color:var(--ec-muted)}
.ec-job-rev{padding:2px 7px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-chip);
  background:var(--ec-gold-soft);font:400 9.5px/1.4 var(--ec-mono);color:var(--ec-gold-ink)}
.ec-job-addr{margin-top:6px;font:600 16px/1.3 var(--ec-serif);color:var(--ec-heading)}
.ec-job-state{margin:13px 0 0;display:flex;flex-direction:column}
.ec-job-state>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-top:1px solid var(--ec-rule-soft)}
.ec-job-state>div:first-child{border-top:0}
.ec-job-state dt{font-size:12.5px;line-height:1.4;color:var(--ec-muted)}
.ec-job-state dd{margin:0;font:600 15px/1 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-job-where{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--ec-rule);font-size:11px;line-height:1.4;color:var(--ec-muted)}
.ec-job-where svg{flex:none;color:var(--ec-glyph)}
/* The branch: drawn, so the job is visibly the origin. */
.ec-after-branch{position:relative;align-self:stretch;min-height:130px}
.ec-after-branch::before{content:"";position:absolute;left:0;top:28px;width:17px;height:1px;background:var(--ec-rule-strong)}
.ec-after-branch::after{content:"";position:absolute;left:17px;top:28px;height:calc(100% - 64px);width:1px;background:var(--ec-rule-strong)}
.ec-after-dests{display:flex;flex-direction:column;gap:10px}
.ec-dest{position:relative;display:flex;flex-direction:column;gap:9px;padding:14px 16px;
  background:var(--ec-white);border:1px solid var(--ec-rule);border-radius:12px;
  text-decoration:none;color:inherit;min-height:44px;
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control)}
.ec-dest[data-d="library"]{border-left:3px solid var(--ec-pine)}
.ec-dest[data-d="desk"]{border-left:3px solid var(--ec-gold)}
.ec-dest::before{content:"";position:absolute;left:-17px;top:28px;width:17px;height:1px;background:var(--ec-rule-strong)}
.ec-dest:hover{border-color:var(--ec-rule-strong);box-shadow:0 4px 14px -8px rgba(23,49,38,.32)}
.ec-dest-h{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ec-dest-h b{font:600 15px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-dest-w{font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-left:auto}
.ec-dest-p{font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:58ch}
/* A compressed view of the real Job Library. */
.ec-mini{display:flex;flex-direction:column;border:1px solid var(--ec-rule-soft);
  border-radius:8px;background:var(--ec-cream-raised);overflow:clip}
.ec-mini-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:6px 9px;border-top:1px solid var(--ec-rule-soft)}
.ec-mini-r:first-child{border-top:0}
.ec-mini-r[data-cur="1"]{background:var(--ec-selected);box-shadow:inset 2px 0 0 var(--ec-pine)}
.ec-mini-r code{font:400 9.5px/1 var(--ec-mono);letter-spacing:.05em;color:var(--ec-ink)}
.ec-mini-r i{font-style:normal;font-size:11px;color:var(--ec-muted);overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.ec-mini-r em{font-style:normal;font:600 8.5px/1 var(--ec-sans);letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;border-radius:var(--ec-r-chip)}
.ec-mini-r em[data-t="epc"]{background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-mini-r em[data-t="ret"]{background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-mini-r s{text-decoration:none;font-size:10px;color:var(--ec-muted);white-space:nowrap}
/* One real transformation, not four instrument names. */
.ec-inst-flow{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:9px 10px;
  border:1px solid var(--ec-rule-soft);border-radius:8px;background:var(--ec-cream-raised)}
.ec-if-n{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:6px;
  background:var(--ec-white);border:1px solid var(--ec-rule);
  font:600 10.5px/1.3 var(--ec-sans);color:var(--ec-ink);white-space:nowrap}
.ec-if-n code{font:400 9.5px/1 var(--ec-mono);color:var(--ec-muted)}
.ec-if-n b{font-variant-numeric:tabular-nums;color:var(--ec-gold-ink)}
.ec-if-n[data-tone="gold"]{border-color:var(--ec-gold-line);background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-if-n[data-tone="back"]{border-style:dashed}
.ec-if-n svg{flex:none}
.ec-if-a{width:11px;height:1px;background:var(--ec-rule-strong);flex:none}
/* The owner surface: outside the branch, with its own instrument. */
.ec-owner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  margin-top:22px;padding:16px 18px;border:1px dashed var(--ec-rule-strong);border-radius:12px;
  background:var(--ec-inset);text-decoration:none;color:inherit;
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-owner:hover{border-color:var(--ec-glyph)}
.ec-owner-b b{display:block;margin:3px 0 4px;font:600 15px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-owner-b>span:nth-of-type(2){display:block;font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:66ch}
.ec-owner-ics{display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font:600 11.5px/1.4 var(--ec-sans);color:var(--ec-green-ink);opacity:0;
  transition:opacity var(--ec-motion-standard) var(--ec-ease-control)}
.ec-owner:hover .ec-owner-ics,.ec-owner:focus-visible .ec-owner-ics{opacity:1}
.ec-owner-h{position:relative;width:296px;height:82px;flex:none}
/* The axis is a block spanning the field — inline collapses to nothing. */
.ec-owner-h u{display:block;position:absolute;left:0;right:0;top:38px;height:1px;
  background:var(--ec-rule-strong)}
/* Year gridlines hang from the field, not from the axis line. */
.ec-owner-h::after{content:"";position:absolute;left:0;right:0;top:32px;height:13px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--ec-rule) 0 1px,transparent 1px 33.34%)}
.ec-owner-h i{position:absolute;left:var(--p);top:38px;width:9px;height:9px;margin:-5px 0 0 -4.5px;
  border-radius:50%;background:var(--ec-white);border:1.5px solid var(--ec-glyph)}
.ec-owner-h i[data-near="1"]{border-color:var(--ec-coral);background:var(--ec-coral-soft)}
.ec-owner-h em{position:absolute;left:var(--p);top:48px;transform:translateX(-50%);
  font:600 10px/1.3 var(--ec-sans);letter-spacing:.05em;color:var(--ec-coral-ink);white-space:nowrap}
@media(max-width:919px){
  .ec-after-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ec-after-branch{display:none}
  .ec-dest::before{display:none}
  .ec-owner{grid-template-columns:minmax(0,1fr)}
  .ec-owner-h{width:100%}
  .ec-owner-ics{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .ec-bd:hover .ec-bd-zone{opacity:1}
  .ec-owner-ics{opacity:1;transition:none}
}


/* ---------- the dark chapter must win ----------
   `body[data-ec-page] .ec-chap{background-color:transparent}` was added so the
   page motif could show through ordinary sections, and it outranked
   `.ec-chap-fold`'s pine field on specificity — so the folder scene rendered
   as pale text on cream, nearly invisible. Stated at equal weight here, last in
   the file, and the motif is suppressed inside it because the section IS the
   ground. */
body[data-ec-page] .ec-chap-fold{background-color:var(--ec-pine);background-image:none}
body[data-ec-page] .ec-chap-fold .ec-wrap{background-color:transparent}
/* Reversed type inside, so nothing inherits the light-ground colours. */
.ec-chap-fold,.ec-chap-fold p,.ec-chap-fold h2{color:var(--ec-rev-text)}
.ec-chap-fold .ec-fold-note,.ec-chap-fold .ec-fold-lede{color:rgba(250,248,240,.62)}
.ec-chap-fold .ec-fold-rec,.ec-chap-fold .ec-fold-rec p{color:var(--ec-ink)}
.ec-chap-fold .ec-fold-quote.ec-fold-empty{color:var(--ec-muted)}
.ec-chap-fold .ec-fold-dest{color:var(--ec-muted)}
.ec-chap-fold .ec-fold-qual{color:var(--ec-coral-ink)}
/* The slips carry filenames, so the label must not be hidden by an icon rule. */
.ec-slip{color:rgba(250,248,240,.86)}


/* ---------- the motif must never cross live type ----------
   The identifiers and threads are texture, and texture behind a headline reads
   as debris. The hero keeps a clean field; the motif resumes below it. */
body[data-ec-page="home"] .ec-chap-hero{position:relative;z-index:1}
body[data-ec-page="home"] .ec-chap-hero::after{content:"";position:absolute;
  inset:-10px -40px 0 -40px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ec-page) 0 46%,rgba(247,246,238,.86) 62%,transparent 88%)}
@media(max-width:1023px){
  body[data-ec-page="home"] .ec-chap-hero::after{background:var(--ec-page)}
}
/* The paragraph gets a measure; the display line uses the width it has. */
.ec-hero-copy .ec-lede{max-width:52ch}


/* ================= TRUST, DATA & BETA ============================
   Trust shown as system boundaries, not reassurance cards. No shields, no
   padlocks, no seals: a device boundary you can see records sitting inside,
   a file lifecycle that branches, and a backup comparison where the difference
   is the point. */

.tdb-status{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:15px}
.tdb-status span{display:inline-flex;align-items:center;font:600 11px/1.4 var(--ec-sans);
  letter-spacing:.05em;color:var(--ec-muted)}
.tdb-status span+span::before{content:"";width:3px;height:3px;margin:0 11px;border-radius:50%;
  background:var(--ec-glyph)}

/* ---------- A · what leaves this browser ---------- */
.tdb-bx{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;margin-top:16px;
  align-items:stretch}
.tdb-bx-in{position:relative;padding:15px 17px 22px;border:2px solid var(--ec-pine);
  border-radius:var(--ec-r-doc);background:var(--ec-white);z-index:1}
.tdb-bx-lab{font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-pine);margin-bottom:11px}
.tdb-bx-lab[data-tone="out"]{color:var(--ec-gold-ink)}
.tdb-bx-edge{position:absolute;right:12px;bottom:7px;font:600 9px/1 var(--ec-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ec-glyph)}
.tdb-objs{display:flex;flex-direction:column;gap:9px}
.tdb-obj{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  padding:10px 12px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);
  background:var(--ec-cream-raised)}
.tdb-obj[data-kind="record"]{border-left:3px solid var(--ec-gold)}
.tdb-obj[data-kind="file"]{border-left:3px solid var(--ec-green)}
.tdb-obj[data-kind="portfolio"]{border-left:3px solid var(--ec-pine)}
.tdb-obj-i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:var(--ec-r-chip);background:var(--ec-white);border:1px solid var(--ec-rule);
  color:var(--ec-muted)}
.tdb-obj b{display:block;font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading)}
.tdb-obj i{display:block;margin-top:2px;font:400 12px/1.5 var(--ec-sans);font-style:normal;
  color:var(--ec-muted)}
.tdb-bx-out{padding:15px 17px 15px 30px;margin-left:-14px;border:1px solid var(--ec-gold-line);
  border-left:0;border-radius:0 var(--ec-r-doc) var(--ec-r-doc) 0;background:var(--ec-gold-ground)}
.tdb-exports{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tdb-exports li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
/* Each export crosses the boundary — the arrow is the crossing. */
.tdb-arrow{position:relative;width:22px;height:9px;margin-top:4px;flex:none}
.tdb-arrow::before{content:"";position:absolute;left:0;top:4px;width:15px;height:1.5px;
  background:var(--ec-gold)}
.tdb-arrow::after{content:"";position:absolute;left:13px;top:0;border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;border-left:7px solid var(--ec-gold)}
.tdb-exports b{display:block;font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading)}
.tdb-exports i{display:block;margin-top:2px;font:400 11.5px/1.5 var(--ec-sans);font-style:normal;
  color:var(--ec-gold-ink)}
.tdb-exports code{font:400 10.5px/1 var(--ec-mono);padding:1px 4px;border-radius:3px;
  background:var(--ec-white);border:1px solid var(--ec-gold-line)}
.tdb-ordinary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  margin-top:14px;padding:12px 14px;border:1px dashed var(--ec-rule-strong);
  border-radius:var(--ec-r-control);background:var(--ec-inset);
  font-size:13px;line-height:1.6;color:var(--ec-ink);max-width:none}
.tdb-ordinary svg{margin-top:2px;color:var(--ec-muted)}
@media(max-width:859px){
  .tdb-bx{grid-template-columns:minmax(0,1fr)}
  .tdb-bx-out{margin-left:0;margin-top:-14px;padding:26px 15px 15px;border-left:1px solid var(--ec-gold-line);
    border-top:0;border-radius:0 0 var(--ec-r-doc) var(--ec-r-doc)}
  .tdb-arrow{transform:rotate(90deg)}
}

/* ---------- B · trust ledger ---------- */
.tdb-ledger{margin-top:14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  background:var(--ec-white);overflow:clip}
.tdb-lrow{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(150px,.9fr) minmax(0,2fr);
  gap:6px 20px;padding:13px 16px;border-top:1px solid var(--ec-rule-soft);align-items:baseline}
.tdb-lrow:first-child{border-top:0}
.tdb-lrow[data-accent="gold"]{background:var(--ec-gold-ground)}
.tdb-lk{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted)}
.tdb-lv{font:600 14px/1.4 var(--ec-serif);color:var(--ec-heading)}
.tdb-ld{font-size:13px;line-height:1.55;color:var(--ec-muted)}
.tdb-lrow[data-accent="gold"] .tdb-lk{color:var(--ec-gold-ink)}
.tdb-lrow[data-accent="gold"] .tdb-ld{color:var(--ec-gold-ink)}
@media(max-width:719px){.tdb-lrow{grid-template-columns:minmax(0,1fr);gap:3px}}

/* ---------- 01 · storage paths ---------- */
.tdb-store{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:11px;margin-top:15px}
.tdb-store-p{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:11px;align-items:center;
  padding:12px 14px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  background:var(--ec-white)}
.tdb-store-o{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1.3 var(--ec-sans);
  color:var(--ec-heading);white-space:nowrap}
.tdb-store-o svg{color:var(--ec-muted)}
.tdb-store-ar{position:relative;width:26px;height:9px}
.tdb-store-ar::before{content:"";position:absolute;left:0;top:4px;width:19px;height:1.5px;background:var(--ec-rule-strong)}
.tdb-store-ar::after{content:"";position:absolute;left:17px;top:0;border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;border-left:7px solid var(--ec-rule-strong)}
.tdb-store-t{font:600 12.5px/1.3 var(--ec-sans);color:var(--ec-heading);min-width:0}
.tdb-store-t i{display:block;margin-top:2px;font:400 10.5px/1.45 var(--ec-mono);font-style:normal;
  letter-spacing:.03em;color:var(--ec-muted)}
.tdb-store-t code{font-family:var(--ec-mono)}
.tdb-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:1px;margin-top:13px;background:var(--ec-rule-soft);border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-doc);overflow:clip}
.tdb-con{padding:12px 14px;background:var(--ec-white)}
.tdb-con b{display:block;font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading);margin-bottom:4px}
.tdb-con span{font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
/* A retention limitation, in the product's own limitation language — a
   professional boundary, never an alarm. */
.tdb-band{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  margin-top:14px;padding:13px 15px;border:1px solid var(--ec-coral-line);
  border-left:4px solid var(--ec-coral);border-radius:var(--ec-r-doc);
  background:var(--ec-coral-ground);max-width:none;font-size:13.5px;line-height:1.6}
.tdb-band svg{margin-top:2px;color:var(--ec-coral-ink)}
.tdb-band b{color:var(--ec-coral-ink)}

/* ---------- 02 · file lifecycle, branching ---------- */
.tdb-life{margin-top:16px}
.tdb-life-s{position:relative;padding:12px 14px 12px 44px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-doc);background:var(--ec-white)}
.tdb-life-s b{display:block;font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading);margin-bottom:4px}
.tdb-life-s>span:not(.tdb-life-n){display:block;font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.tdb-life-n{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;
  justify-content:center;min-width:22px;height:22px;padding:0 5px;border-radius:var(--ec-r-chip);
  border:1px solid var(--ec-rule-strong);background:var(--ec-cream);
  font:600 10px/1 var(--ec-mono);letter-spacing:.04em;color:var(--ec-muted)}
.tdb-life-s[data-s="2a"]{border-color:var(--ec-rule-strong);border-style:dashed}
.tdb-life-s[data-s="2b"]{border-color:var(--ec-green-line);background:var(--ec-green-ground)}
.tdb-life-s[data-s="2b"]>b{color:var(--ec-green-ink)}
.tdb-life-s[data-s="2b"]>.tdb-life-n{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}
.tdb-life-s[data-s="3"]{border-color:var(--ec-coral-line);background:var(--ec-coral-ground);margin-top:0}
.tdb-life-s[data-s="3"]>b{color:var(--ec-coral-ink)}
.tdb-life-s[data-s="3"]>.tdb-life-n{border-color:var(--ec-coral-line);background:var(--ec-coral-soft);color:var(--ec-coral-ink)}
/* The branch: one state becomes two, and the drawing says so. */
.tdb-life-br{position:relative;height:26px}
.tdb-life-br span:first-child{position:absolute;left:50%;top:0;width:1.5px;height:11px;background:var(--ec-rule-strong)}
.tdb-life-br span:last-child{position:absolute;left:25%;right:25%;top:11px;height:1.5px;
  background:var(--ec-rule-strong);border-left:1.5px solid var(--ec-rule-strong);
  border-right:1.5px solid var(--ec-rule-strong);box-sizing:content-box;height:15px;
  border-top:1.5px solid var(--ec-rule-strong);background:none}
.tdb-life-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;align-items:start}
.tdb-life-then{position:relative;display:block;height:22px;margin:0}
.tdb-life-then::before{content:"";position:absolute;left:20px;top:4px;width:1.5px;height:14px;
  background:repeating-linear-gradient(var(--ec-coral-line) 0 3px,transparent 3px 6px)}
.tdb-life-then::after{content:"may later become";position:absolute;left:31px;top:4px;
  font:600 9px/1.5 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-coral-ink)}
.tdb-life-s[data-s="2b"]>.tdb-life-s{margin-top:0}

/* ---------- format matrix ---------- */
.tdb-fmt{display:grid;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);
  background:var(--ec-white);overflow:clip}
.tdb-fmt-h,.tdb-fmt-r{display:grid;grid-template-columns:minmax(120px,1.6fr) repeat(4,minmax(56px,.75fr));
  gap:8px 10px;padding:9px 12px;align-items:center}
.tdb-fmt-h{background:var(--ec-cream-raised);border-bottom:1px solid var(--ec-rule)}
.tdb-fmt-h span{font:600 9px/1.3 var(--ec-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ec-muted)}
.tdb-fmt-r{border-top:1px solid var(--ec-rule-soft);font-size:12.5px;line-height:1.45}
.tdb-fmt-r span:first-child{font-weight:600;color:var(--ec-heading)}
.tdb-fmt-r span[data-y="1"]{color:var(--ec-green-ink);font-weight:600}
.tdb-fmt-r span[data-y="0"]{color:var(--ec-muted)}
@media(max-width:639px){
  .tdb-fmt-h{display:none}
  .tdb-fmt-r{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .tdb-fmt-r span:first-child{grid-column:1/-1}
  .tdb-fmt-r span:not(:first-child)::before{font:600 9px/1 var(--ec-sans);letter-spacing:.1em;
    text-transform:uppercase;color:var(--ec-glyph);margin-right:6px}
  .tdb-fmt-r span:nth-child(2)::before{content:"select"}
  .tdb-fmt-r span:nth-child(3)::before{content:"retain"}
  .tdb-fmt-r span:nth-child(4)::before{content:"extract"}
  .tdb-fmt-r span:nth-child(5)::before{content:"preview"}
}

/* ---------- 03 · backup comparison ---------- */
.tdb-bks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:14px;margin-top:16px;align-items:start}
.tdb-bk{border:1px solid var(--ec-rule-strong);border-radius:var(--ec-r-doc);background:var(--ec-white);
  padding:14px 16px}
.tdb-bk-h{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;justify-content:space-between;
  padding-bottom:10px;margin-bottom:11px;border-bottom:2px solid var(--ec-pine)}
.tdb-bk-h span{font:600 15px/1.3 var(--ec-serif);color:var(--ec-heading)}
.tdb-bk-h code{font:600 11px/1 var(--ec-mono);padding:3px 7px;border-radius:var(--ec-r-chip);
  background:var(--ec-cream);border:1px solid var(--ec-rule);color:var(--ec-muted)}
.tdb-bk-l{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-green-ink);margin-bottom:6px}
.tdb-bk-l[data-tone="no"]{color:var(--ec-coral-ink);margin-top:12px}
.tdb-bk-y,.tdb-bk-n{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tdb-bk-y li,.tdb-bk-n li{position:relative;padding-left:17px;font-size:13px;line-height:1.5;
  color:var(--ec-ink);max-width:none}
.tdb-bk-y li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:1.5px;background:var(--ec-green)}
.tdb-bk-n li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:1.5px;background:var(--ec-coral)}
.tdb-bk-f{margin-top:13px;padding-top:11px;border-top:1px solid var(--ec-rule-soft);
  font:600 12.5px/1.5 var(--ec-sans);color:var(--ec-heading)}
/* And the thing that is not a backup at all. */
.tdb-notbk{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:14px 18px;align-items:center;
  margin-top:14px;padding:14px 16px;border:2px solid var(--ec-coral);border-radius:var(--ec-r-doc);
  background:var(--ec-coral-ground)}
.tdb-notbk-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  padding:10px 13px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white)}
.tdb-notbk-d svg{color:var(--ec-muted)}
.tdb-notbk-d b{display:block;font:600 13px/1.3 var(--ec-sans);color:var(--ec-heading)}
.tdb-notbk-d i{display:block;margin-top:2px;font:400 11.5px/1.4 var(--ec-sans);font-style:normal;color:var(--ec-muted)}
.tdb-notbk-s{font:600 clamp(15px,2vw,19px)/1.25 var(--ec-serif);color:var(--ec-coral-ink);white-space:nowrap}
.tdb-notbk-w{font-size:12.5px;line-height:1.55;color:var(--ec-coral-ink);max-width:44ch}
@media(max-width:859px){
  .tdb-notbk{grid-template-columns:minmax(0,1fr);gap:11px}
  .tdb-notbk-s{white-space:normal}
}

/* ---------- 04 · the two professional paths ---------- */
.tdb-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:16px;margin-top:16px;align-items:start}
.tdb-path{border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);background:var(--ec-white);
  padding:15px 17px}
.tdb-path[data-pack="epc"]{border-top:3px solid var(--ec-gold)}
.tdb-path[data-pack="retrofit"]{border-top:3px solid var(--ec-green)}
.tdb-path-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  margin-bottom:11px}
.tdb-path-h b{display:block;font:600 16px/1.25 var(--ec-serif);color:var(--ec-heading)}
.tdb-path-h i{display:block;margin-top:2px;font:600 10px/1.3 var(--ec-sans);font-style:normal;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ec-muted)}
.tdb-path-p{font-size:13.5px;line-height:1.6;color:var(--ec-ink);max-width:none;
  padding-bottom:12px;border-bottom:1px solid var(--ec-rule-soft)}
.tdb-path-l{margin-top:12px;margin-bottom:7px;font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ec-green-ink)}
.tdb-path-l[data-tone="no"]{color:var(--ec-coral-ink)}
.tdb-can,.tdb-cant{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.tdb-can li,.tdb-cant li{font-size:12px;line-height:1.4;padding:4px 9px;border-radius:var(--ec-r-chip);
  max-width:none}
.tdb-can li{border:1px solid var(--ec-green-line);background:var(--ec-green-ground);color:var(--ec-green-ink)}
/* Struck through, so "does not" cannot be misread at a glance. */
.tdb-cant li{border:1px solid var(--ec-coral-line);background:var(--ec-coral-ground);
  color:var(--ec-coral-ink);text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:rgba(191,80,60,.5)}
.tdb-path-f{margin-top:13px;padding-top:11px;border-top:1px solid var(--ec-rule-soft);
  font:600 12.5px/1.55 var(--ec-sans);color:var(--ec-heading);max-width:none}

/* ---------- the beside diagram ---------- */
.tdb-bd{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;
  margin-top:18px;align-items:stretch}
.tdb-bd-z{padding:15px 17px}
.tdb-bd-z[data-z="official"]{border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc) 0 0 var(--ec-r-doc);
  background:var(--ec-inset)}
.tdb-bd-z[data-z="ec"]{border:1px solid var(--ec-pine);border-left:0;
  border-radius:0 var(--ec-r-doc) var(--ec-r-doc) 0;background:var(--ec-white)}
.tdb-bd-k{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:11px}
.tdb-bd-z[data-z="ec"] .tdb-bd-k{color:var(--ec-pine)}
.tdb-bd-tr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.tdb-bd-tr li{position:relative;padding:7px 0 7px 20px;font-size:13px;line-height:1.4;
  color:var(--ec-ink);max-width:none}
.tdb-bd-tr li::before{content:"";position:absolute;left:4px;top:13px;width:7px;height:7px;
  border-radius:50%;border:1.5px solid var(--ec-rule-strong);background:var(--ec-white)}
.tdb-bd-tr li:not(:last-child)::after{content:"";position:absolute;left:7.25px;top:20px;bottom:0;
  width:1.5px;background:var(--ec-rule)}
.tdb-bd-z[data-z="ec"] .tdb-bd-tr li::before{border-color:var(--ec-pine)}
.tdb-bd-z[data-z="ec"] .tdb-bd-tr li:not(:last-child)::after{background:var(--ec-pine);opacity:.35}
/* The word sits ON the rule between the territories. */
.tdb-bd-r{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;width:118px;background:var(--ec-cream)}
.tdb-bd-r::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-50%);background:var(--ec-pine)}
.tdb-bd-w{position:relative;z-index:1;padding:5px 12px;border-radius:var(--ec-r-pill);
  background:var(--ec-pine);color:var(--ec-rev-text);
  font:600 10px/1 var(--ec-sans);letter-spacing:.16em;text-transform:uppercase}
.tdb-bd-s{position:relative;z-index:1;padding:2px 8px;border-radius:var(--ec-r-chip);
  background:var(--ec-cream);font:400 9.5px/1.3 var(--ec-sans);color:var(--ec-muted);text-align:center}
@media(max-width:859px){
  .tdb-bd{grid-template-columns:minmax(0,1fr)}
  .tdb-bd-z[data-z="official"]{border-radius:var(--ec-r-doc) var(--ec-r-doc) 0 0}
  .tdb-bd-z[data-z="ec"]{border-left:1px solid var(--ec-pine);border-top:0;
    border-radius:0 0 var(--ec-r-doc) var(--ec-r-doc)}
  .tdb-bd-r{width:auto;flex-direction:row;padding:9px 0;border-left:1px solid var(--ec-rule);
    border-right:1px solid var(--ec-rule)}
  .tdb-bd-r::before{top:50%;left:0;right:0;bottom:auto;width:auto;height:2px;transform:translateY(-50%)}
}

/* ---------- 05 · privacy layers ---------- */
.tdb-lay{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:1px;margin-top:15px;background:var(--ec-rule-soft);border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-doc);overflow:clip}
.tdb-lay-i{padding:13px 15px;background:var(--ec-white)}
.tdb-lay-k{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:7px}
.tdb-lay-i p:not(.tdb-lay-k){font-size:12.5px;line-height:1.6;color:var(--ec-ink);max-width:none}
.tdb-recv{margin-top:14px;padding:14px 16px;border:1px solid var(--ec-rule-strong);
  border-radius:var(--ec-r-doc);background:var(--ec-cream-raised)}
.tdb-recv-h{font:600 15px/1.35 var(--ec-serif);color:var(--ec-heading);margin-bottom:8px}
.tdb-recv p{font-size:13.5px;line-height:1.6;max-width:none}
.tdb-recv-w{margin-top:10px;padding-top:10px;border-top:1px solid var(--ec-rule);
  font-weight:600;color:var(--ec-coral-ink)}

/* ---------- 06 · beta ---------- */
.tdb-beta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:14px;margin-top:16px;align-items:start}
.tdb-beta-c{padding:14px 16px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  background:var(--ec-white)}
.tdb-beta-c[data-c="in"]{border-top:3px solid var(--ec-green)}
.tdb-beta-c[data-c="out"]{border-top:3px solid var(--ec-coral)}
.tdb-beta-c[data-c="means"]{border-top:3px solid var(--ec-gold);background:var(--ec-gold-ground)}
.tdb-beta-k{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:9px}
.tdb-beta-c[data-c="in"] .tdb-beta-k{color:var(--ec-green-ink)}
.tdb-beta-c[data-c="out"] .tdb-beta-k{color:var(--ec-coral-ink)}
.tdb-beta-c[data-c="means"] .tdb-beta-k{color:var(--ec-gold-ink)}
.tdb-beta-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tdb-beta-c li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.5;max-width:none}
.tdb-beta-c[data-c="in"] li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:1.5px;background:var(--ec-green)}
.tdb-beta-c[data-c="out"] li{color:var(--ec-muted);text-decoration:line-through;
  text-decoration-thickness:1px;text-decoration-color:rgba(191,80,60,.45)}
.tdb-beta-c[data-c="out"] li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:1.5px;background:var(--ec-coral)}
.tdb-beta-c[data-c="means"] p{font-size:13px;line-height:1.6;color:var(--ec-ink);max-width:none}
.tdb-beta-f{margin-top:10px;padding-top:10px;border-top:1px solid var(--ec-gold-line);
  font-weight:600;color:var(--ec-gold-ink)}

/* ---------- 07 · contact ---------- */
.tdb-cts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:14px;margin-top:16px;align-items:stretch}
.tdb-ct{display:flex;flex-direction:column;gap:6px;padding:15px 16px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-doc);background:var(--ec-white)}
.tdb-ct[data-primary="1"]{border-color:var(--ec-pine);background:var(--ec-cream-raised)}
.tdb-ct-k{display:flex;align-items:center;gap:8px;font:600 9.5px/1.4 var(--ec-sans);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ec-muted)}
.tdb-ct-a{font:600 14px/1.4 var(--ec-mono);letter-spacing:.01em;color:var(--ec-heading);
  overflow-wrap:anywhere}
.tdb-ct[data-primary="1"] .tdb-ct-a{font-family:var(--ec-serif);font-size:15.5px}
.tdb-ct-d{font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:none;flex:1 1 auto}
.tdb-ct .ec-btn{margin-top:4px;justify-content:center}

/* ---------- terms ---------- */
.tdb-terms{margin-top:15px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  background:var(--ec-white);overflow:clip}
.tdb-term{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,2.4fr);gap:6px 20px;
  padding:13px 16px;border-top:1px solid var(--ec-rule-soft);align-items:baseline}
.tdb-term:first-child{border-top:0}
.tdb-term b{font:600 13.5px/1.4 var(--ec-sans);color:var(--ec-heading)}
.tdb-term span{font-size:13px;line-height:1.6;color:var(--ec-muted)}
@media(max-width:719px){.tdb-term{grid-template-columns:minmax(0,1fr);gap:3px}}

/* ---------- progressive disclosure ---------- */
.tdb-det{margin-top:16px;border:1px solid var(--ec-rule);border-radius:var(--ec-r-doc);
  background:var(--ec-white);overflow:clip}
.tdb-det>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 16px;min-height:48px;font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading)}
.tdb-det>summary::-webkit-details-marker{display:none}
.tdb-det>summary::before{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid var(--ec-muted);
  border-bottom:1.5px solid var(--ec-muted);transform:rotate(-45deg);
  transition:transform var(--ec-motion-standard) var(--ec-ease-control)}
.tdb-det[open]>summary::before{transform:rotate(45deg)}
.tdb-det>summary:hover{background:var(--ec-hover)}
.tdb-det>summary:focus-visible{outline:3px solid var(--ec-gold);outline-offset:-3px}
.tdb-det-b{padding:0 16px 16px;border-top:1px solid var(--ec-rule-soft);padding-top:14px}
.tdb-det-b p{font-size:13.5px;line-height:1.65;max-width:66ch}
@media(prefers-reduced-motion:reduce){.tdb-det>summary::before{transition:none}}


/* ================= LANDING · CONDENSATION PASS ====================
   Four chapters replaced by four tighter instruments. Each has its own visual
   grammar, so no two sections read as the same module. */


/* ---------- Source Start: one workbench ---------- */
.lz-bench{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:0;
  border:1px solid var(--ec-rule-strong);border-radius:var(--ec-r-doc);overflow:clip;
  background:var(--ec-white);align-items:stretch}
.lz-bench-c{padding:14px 15px;position:relative}
.lz-bench-c+.lz-bench-c{border-left:1px solid var(--ec-rule)}
/* Each column feeds the next — the chevron is the flow. */
.lz-bench-c:not(:last-child)::after{content:"";position:absolute;right:-6px;top:50%;z-index:2;
  width:11px;height:11px;transform:translateY(-50%) rotate(45deg);
  border-top:1.5px solid var(--ec-rule-strong);border-right:1.5px solid var(--ec-rule-strong);
  background:var(--ec-white)}
.lz-bench-c[data-c="you"]{background:var(--ec-gold-ground)}
.lz-bench-k{font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:11px}
.lz-bench-k[data-tone="you"]{color:var(--ec-gold-ink)}
.lz-bench-l,.lz-bench-s,.lz-bench-v{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.lz-bench-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;
  font:600 12.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.lz-bench-l li code{grid-row:span 2;align-self:start}
.lz-bench-l li i{font:400 10.5px/1.4 var(--ec-sans);font-style:normal;color:var(--ec-muted)}
.lz-bench-s li{display:flex;justify-content:space-between;gap:9px;align-items:baseline;
  padding-bottom:6px;border-bottom:1px solid var(--ec-rule-soft);
  font-size:12px;line-height:1.35;color:var(--ec-muted)}
.lz-bench-s li:last-child{border-bottom:0}
.lz-bench-s li span{font:400 10.5px/1.3 var(--ec-mono);color:var(--ec-glyph);white-space:nowrap}
/* The one input with something to compare is the one the page is about. */
.lz-bench-s li[data-f="1"]{color:var(--ec-heading);font-weight:600}
.lz-bench-s li[data-f="1"] span{color:var(--ec-gold-ink);font-weight:600}
.lz-bench-v li{display:flex;align-items:baseline;gap:6px}
.lz-bench-v b{font:600 19px/1 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums}
.lz-bench-v span{font-size:11px;color:var(--ec-muted)}
.lz-bench-v i{margin-left:auto;font:400 10px/1 var(--ec-mono);font-style:normal;color:var(--ec-glyph)}
.lz-bench-sp{margin-top:10px;padding-top:9px;border-top:1px dashed var(--ec-gold-line);
  font:600 12px/1.3 var(--ec-sans);color:var(--ec-gold-ink)}
.lz-bench-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--ec-r-pill);
  background:var(--ec-gold);border:1px solid var(--ec-gold-line);
  font:600 12.5px/1 var(--ec-sans);color:var(--ec-ink)}
.lz-bench-alt{margin-top:8px;font-size:11.5px;color:var(--ec-gold-ink)}
.lz-bench-n{margin-top:11px;padding-top:9px;border-top:1px solid var(--ec-gold-line);
  font-size:11px;line-height:1.5;color:var(--ec-gold-ink)}
@media(max-width:759px){
  .lz-bench-c+.lz-bench-c{border-left:0;border-top:1px solid var(--ec-rule)}
  .lz-bench-c:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-6px;
    transform:translateX(-50%) rotate(135deg)}
}

/* ---------- output: record becomes document ---------- */
.lz-out-h{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;
  justify-content:space-between;margin-bottom:18px}
.lz-out-sw .ec-modetab{min-height:40px;padding:8px 16px;display:block;
  font:600 13px/1 var(--ec-sans)}
.lz-out{display:grid;grid-template-columns:minmax(0,.85fr) auto minmax(0,1.15fr);
  gap:0;align-items:stretch}
.lz-out-rec{padding:16px 18px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-doc) 0 0 var(--ec-r-doc);background:var(--ec-cream-raised)}
.lz-or-k{font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:12px}
.lz-or{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;
  padding:8px 0;border-top:1px solid var(--ec-rule-soft)}
.lz-or:first-of-type{border-top:0}
.lz-or span{font:600 9px/1.5 var(--ec-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ec-glyph)}
.lz-or b{font:600 12.5px/1.45 var(--ec-sans);color:var(--ec-ink);min-width:0}
.lz-or b code{margin-right:5px}
/* The transformation itself. */
.lz-out-ar{position:relative;width:46px;background:var(--ec-cream)}
.lz-out-ar::before{content:"";position:absolute;left:6px;right:14px;top:50%;height:1.5px;
  background:var(--ec-pine)}
.lz-out-ar::after{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--ec-pine)}
/* The document sheet overlaps its own frame slightly — paper, not a panel. */
.lz-out-doc{padding:18px 20px 20px;border:1px solid var(--ec-pine);
  border-radius:0 var(--ec-r-doc) var(--ec-r-doc) 0;background:var(--ec-white);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -22px rgba(23,49,38,.4)}
.lz-od-t{padding-bottom:7px;border-bottom:2px solid var(--ec-pine);
  font:600 15.5px/1.3 var(--ec-serif);color:var(--ec-heading)}
.lz-od-m{margin-top:5px;font:400 10.5px/1.4 var(--ec-mono);color:var(--ec-muted)}
.lz-od-s{margin-top:14px;font:600 9px/1 var(--ec-sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ec-muted)}
.lz-od-h{margin-top:6px;padding-bottom:6px;border-bottom:1px solid var(--ec-pine);
  font:600 13.5px/1.35 var(--ec-serif);color:var(--ec-heading)}
.lz-od-b{margin-top:9px;font-size:12.5px;line-height:1.65;color:var(--ec-ink);max-width:52ch}
.lz-od-f{margin-top:12px;padding-top:9px;border-top:1px solid var(--ec-rule-soft);
  font:600 9.5px/1.3 var(--ec-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ec-glyph)}
.lz-out-not{margin-top:14px;padding-top:13px;border-top:1px solid var(--ec-rule);
  font:600 14px/1.5 var(--ec-serif);color:var(--ec-heading)}
.lz-out-not b{color:var(--ec-coral-ink);font-family:var(--ec-sans)}
@media(max-width:859px){
  .lz-out{grid-template-columns:minmax(0,1fr)}
  .lz-out-rec{border-radius:var(--ec-r-doc) var(--ec-r-doc) 0 0}
  .lz-out-doc{border-radius:0 0 var(--ec-r-doc) var(--ec-r-doc);border-top:0}
  .lz-out-ar{width:auto;height:34px}
  .lz-out-ar::before{left:50%;top:4px;bottom:12px;right:auto;width:1.5px;height:auto}
  .lz-out-ar::after{left:50%;right:auto;bottom:4px;top:auto;transform:translateX(-50%);
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:9px solid var(--ec-pine);border-bottom:0}
}

/* ---------- boundary + trust: parallel rails, one strip ---------- */
/* No panel treatment: two processes running alongside each other, each on its
   own rule. Boxing them implies containment, which is the opposite of the
   point — they never merge. */
/* An open mark on the page ground, not a filled pill: this is where two
   processes run alongside each other, not a badge. */
/* One trust strip. The Trust page owns the detail. */

/* The skip link must not create scrollable width. Clipped rather than parked
   off-canvas at a negative offset. */
.ec-skip:not(:focus):not(:active){position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;left:auto;top:auto}

/* The float overlaps leftward only — the right edge has no gutter to give. */
.ec-thread,.lz-surf{margin-right:0!important}
.ec-thread::after,.lz-surf::after{right:0!important}
/* And the hero chapter clips whatever a sub-pixel transform still adds, so a
   drifting tab can never produce a horizontal scrollbar. */
.ec-chap-hero{overflow-x:clip}

/* ---------- pack tabs: pill geometry, per Concept 8.5 / 16 ----------
   The well and its tabs were at 12px/9px, which on a 44px control reads as a
   rectangle. Both go to a true pill so the switcher belongs to the same family
   as every other rounded control in the product. */
.ec-packs{border-radius:999px;padding:3px;gap:3px}
.ec-pack{border-radius:999px;padding:8px 14px}
/* The approved pack mark, big enough for its accent to read. The two marks
   share a document body and differ only in one coloured element, so at 18px
   they collapse into the same glyph. */
.ec-pack-mark{width:20px;height:20px;flex:none;
  transition:transform var(--ec-motion-fast) var(--ec-ease-control),
             opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-pack:not([aria-current="page"]) .ec-pack-mark{opacity:.78}
.ec-pack:hover .ec-pack-mark{opacity:1;transform:scale(1.04)}
.ec-pack[aria-current="page"] .ec-pack-mark{opacity:1}
/* The active tab is a filled pill, not an underline on a square. */
.ec-pack[aria-current="page"]{background:rgba(250,248,240,.13);
  box-shadow:inset 0 0 0 1px rgba(250,248,240,.16)}
.ec-pack[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;
  height:2px;border-radius:2px;background:var(--ec-tint,var(--ec-gold))}
@media(max-width:719px){
  .ec-pack{padding:8px 12px}
  .ec-pack-mark{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){.ec-pack:hover .ec-pack-mark{transform:none}}


/* ---------- Evidence Desk apply bar: responsive ----------
   The bar was inline-styled with flex-wrap only, so at phone widths the
   destination line, the change counter and two buttons wrapped into a cramped
   stack with sub-44px targets and the labels truncating. It is the control that
   commits work to the record, so it must stay unambiguous at every width. */
.ec-applybar{gap:12px 14px}
.ec-applybar>span:last-child{flex:0 1 auto;justify-content:flex-end}
.ec-applybar .ec-btn{min-height:44px;white-space:nowrap}
@media(max-width:859px){
  /* Destination first, on its own line; the actions form a full-width row. */
  .ec-applybar{flex-direction:column;align-items:stretch}
  .ec-applybar>p{width:100%}
  .ec-applybar>span:last-child{width:100%;justify-content:flex-start}
  .ec-applybar-n{order:-1;width:100%;justify-content:center}
}
@media(max-width:519px){
  /* Stacked, full width. The gold Apply sits last so it reads as the
     conclusion, and Discard can never be mistaken for it. */
  .ec-applybar>span:last-child{flex-direction:column-reverse}
  .ec-applybar .ec-btn{width:100%;justify-content:center}
  .ec-applybar{padding:13px 14px}
}


/* ---------- the apply bar must actually stick ----------
   `.ec-instr` carried `overflow:hidden` (for its rounded corners), and an
   ancestor with any non-visible overflow silently disables `position:sticky`
   for every descendant. So the bar scrolled away with the content and could
   never be reached — measured at document y=2311 in a 540px viewport, and still
   off-screen after scrolling to the bottom. That is why Discard "did nothing":
   it was unreachable, not unwired.

   The panel keeps its rounded appearance by clipping its own header and footer
   instead of the whole scroll region. */
.ec-instr,.ec-conpanel .ec-instr,.ec-instr-body{overflow:visible}
/* Sticky needs a bottom offset that clears nothing else; the bar is the last
   thing in the panel, so it pins to the viewport foot while the panel is in
   view and releases with it. */
.ec-applybar{position:sticky;bottom:12px;z-index:6}
@media(max-width:719px){.ec-applybar{bottom:0}}


/* ---------- Job Cost & Margin · assessor-owned cost lines ----------
   Replaces five fixed boxes. Each line is a named amount the assessor added and
   can remove, laid out as a ledger row rather than a form field. */
.ec-costlines{margin-top:16px;padding-top:14px;border-top:1px solid var(--ec-rule)}
.ec-costline{display:grid;grid-template-columns:minmax(0,1fr) 120px 44px;gap:8px;
  align-items:center;padding:5px 0}
.ec-costline-l{min-height:44px;padding:9px 11px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-control);background:var(--ec-white);font:400 13.5px/1.4 var(--ec-sans);
  color:var(--ec-ink);min-width:0}
.ec-costline-l:focus-visible{outline:2px solid var(--ec-gold);outline-offset:1px}
.ec-costline-a{display:flex;align-items:center;gap:0;min-height:44px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);background:var(--ec-white);
  overflow:hidden}
.ec-costline-a i{padding:0 2px 0 10px;font:400 13px/1 var(--ec-sans);color:var(--ec-muted);font-style:normal}
.ec-costline-a input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:9px 10px 9px 2px;
  font:600 13.5px/1.4 var(--ec-mono);color:var(--ec-ink);text-align:right;font-variant-numeric:tabular-nums}
.ec-costline-a input:focus{outline:0}
.ec-costline-a:focus-within{border-color:var(--ec-gold);box-shadow:0 0 0 2px var(--ec-gold-soft)}
/* Removal is deliberately quiet until reached — a destructive control should not
   be the most prominent thing in a row of figures. */
.ec-costline-x{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border:1px solid transparent;border-radius:var(--ec-r-control);
  background:transparent;color:var(--ec-glyph);cursor:pointer;
  transition:color var(--ec-motion-fast) var(--ec-ease-control),
             background-color var(--ec-motion-fast) var(--ec-ease-control),
             border-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-costline-x:hover{color:var(--ec-coral-ink);background:var(--ec-coral-ground);border-color:var(--ec-coral-line)}
.ec-costline-x:focus-visible{outline:2px solid var(--ec-coral);outline-offset:1px}
.ec-costlines-none{font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:56ch;margin-bottom:4px}
.ec-costlines-add{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:11px}
.ec-costlines-sug{display:flex;flex-wrap:wrap;gap:6px}
.ec-costsug{min-height:34px;padding:6px 10px;border:1px dashed var(--ec-rule-strong);
  border-radius:var(--ec-r-pill);background:transparent;font:600 11.5px/1.3 var(--ec-sans);
  color:var(--ec-muted);cursor:pointer;
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control),
             background-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-costsug:hover{border-style:solid;border-color:var(--ec-gold-line);
  background:var(--ec-gold-ground);color:var(--ec-gold-ink)}
.ec-costsug:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
@media(max-width:519px){
  .ec-costline{grid-template-columns:minmax(0,1fr) 44px;gap:6px 8px}
  .ec-costline-l{grid-column:1/-1}
  .ec-costlines-sug{width:100%}
}


/* ================= AFTER THE RECORD · lifecycle instrument =========
   Replaces a left-card / right-cards grid. One record object holds the centre
   of an asymmetric field; four actions branch off it at different points, and
   only backup is drawn crossing the browser-local boundary. The record is the
   largest object throughout, because it is the thing that persists. */
.ec-life{position:relative;display:grid;gap:14px;margin-top:24px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr);
  grid-template-areas:"lib lib" "rec desk" "rec out" "bk bk";
  align-items:start}
@media(min-width:1100px){
  .ec-life{grid-template-columns:minmax(320px,1fr) minmax(0,1.35fr);
    grid-template-areas:"lib lib" "rec desk" "rec out" "rec bk"}
}
@media(max-width:719px){
  .ec-life{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"rec" "lib" "desk" "out" "bk"}
}

/* The boundary: a hairline enclosing the record and the three instruments that
   act on it inside this browser. Deliberately faint — a boundary, not a badge. */
.ec-life-bound{position:absolute;inset:-10px 34% -74px -10px;pointer-events:none;
  border:1px dashed var(--ec-rule-strong);border-radius:16px;opacity:.55}
.ec-life-bound em{position:absolute;left:14px;top:-9px;padding:1px 8px;
  background:var(--ec-page);font:600 9px/1.6 var(--ec-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ec-muted);font-style:normal}
@media(max-width:1099px){.ec-life-bound{display:none}}

/* ---------- the durable record ---------- */
.ec-life-rec{grid-area:rec;position:relative;padding:20px 22px 16px 30px;
  border:1px solid var(--ec-rule-strong);border-left:0;border-radius:var(--ec-r-doc);
  background:var(--ec-white);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 32px -22px rgba(23,49,38,.4)}
/* The binding edge, with registration notches: this is a filed object. */
.ec-rec-edge{position:absolute;left:0;top:0;bottom:0;width:9px;
  background:var(--ec-pine);border-radius:3px 0 0 3px;
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.ec-rec-edge i{display:block;width:3px;height:3px;border-radius:50%;background:rgba(250,248,240,.5)}
.ec-rec-tab{position:absolute;right:-1px;top:-1px;padding:4px 11px;
  border:1px solid var(--ec-gold-line);border-top:0;border-right:0;
  border-radius:0 var(--ec-r-doc) 0 10px;background:var(--ec-gold-soft);
  font:600 9.5px/1.5 var(--ec-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ec-gold-ink)}
.ec-rec-id{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:14px 0 0}
.ec-rec-id code{font:600 13px/1 var(--ec-mono);letter-spacing:.06em;color:var(--ec-heading)}
.ec-rec-rev{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:var(--ec-r-chip);border:1px solid var(--ec-rule);background:var(--ec-cream);
  font:600 10.5px/1.4 var(--ec-mono);color:var(--ec-muted)}
.ec-rec-rev[data-has="1"]{border-color:var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-rec-addr{margin:7px 0 0;font:600 22px/1.25 var(--ec-serif);color:var(--ec-heading);max-width:22ch}
/* Ruled ledger: figure first, label beneath, so the numbers read as a column. */
.ec-rec-state{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:16px 0 0;
  border-top:1px solid var(--ec-rule)}
.ec-rec-state>div{padding:10px 12px 9px 0;border-bottom:1px solid var(--ec-rule-soft)}
.ec-rec-state>div:nth-child(odd){border-right:1px solid var(--ec-rule-soft);padding-right:12px}
.ec-rec-state>div:nth-child(even){padding-left:12px}
.ec-rec-state>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.ec-rec-state dd{margin:0;font:600 19px/1 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-rec-state dt{margin-top:3px;font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ec-muted)}
.ec-rec-state>div[data-tone="coral"] dd{color:var(--ec-coral-ink)}
.ec-rec-state>div[data-tone="gold"] dd{color:var(--ec-gold-ink)}
.ec-rec-where{display:flex;align-items:center;gap:7px;margin:13px 0 0;
  font-size:11.5px;line-height:1.5;color:var(--ec-muted)}

/* ---------- shared branch heading ---------- */
.ec-life-h{display:flex;flex-wrap:wrap;gap:7px 9px;align-items:baseline;margin-bottom:10px}
.ec-life-h img,.ec-life-h svg{flex:none;align-self:center}
.ec-life-h b{font:600 14.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.ec-life-h>span{font:600 9.5px/1.5 var(--ec-sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ec-muted)}
.ec-life-p{display:block;margin-top:9px;font-size:12px;line-height:1.55;color:var(--ec-muted);max-width:46ch}

/* Every branch is a document surface, not a card: one hairline, square-ish, and
   a bracket connector on the edge that faces the record. */
.ec-life-lib,.ec-life-desk,.ec-life-out,.ec-life-bk{
  position:relative;display:block;padding:15px 17px;text-decoration:none;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control)}
.ec-life-lib:hover,.ec-life-desk:hover,.ec-life-out:hover,.ec-life-bk:hover{
  border-color:var(--ec-rule-strong);box-shadow:0 8px 22px -16px rgba(23,49,38,.45)}
.ec-life-lib:focus-visible,.ec-life-desk:focus-visible,.ec-life-out:focus-visible,
.ec-life-bk:focus-visible{outline:3px solid var(--ec-gold);outline-offset:2px}
/* The connector: a bracket reaching back toward the record, not an arrow. */
.ec-life-desk::before,.ec-life-out::before{content:"";position:absolute;
  left:-15px;top:26px;width:15px;height:1px;background:var(--ec-rule-strong)}
.ec-life-desk::after,.ec-life-out::after{content:"";position:absolute;
  left:-18px;top:23px;width:6px;height:6px;border-radius:50%;
  border:1px solid var(--ec-rule-strong);background:var(--ec-page)}
@media(max-width:719px){
  .ec-life-desk::before,.ec-life-out::before,.ec-life-desk::after,.ec-life-out::after{display:none}
}

/* ---------- Job Library strip ---------- */
.ec-life-lib{grid-area:lib}
.ec-mini{display:grid;gap:1px;background:var(--ec-rule-soft);
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);overflow:hidden}
.ec-mini-r{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:9px;align-items:center;padding:8px 11px;background:var(--ec-white)}
.ec-mini-r[data-cur="1"]{background:var(--ec-gold-ground);box-shadow:inset 2px 0 0 var(--ec-gold)}
.ec-mini-r code{font:600 10.5px/1 var(--ec-mono);letter-spacing:.05em;color:var(--ec-heading)}
.ec-mini-r i{font-style:normal;font-size:12px;color:var(--ec-ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ec-mini-r em{font-style:normal;font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.06em;
  padding:2px 7px;border-radius:var(--ec-r-chip);white-space:nowrap}
.ec-mini-r em[data-t="epc"]{background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-mini-r em[data-t="ret"]{background:var(--ec-green-soft);color:var(--ec-green-ink)}
.ec-mini-r s{text-decoration:none;font:600 10px/1.4 var(--ec-mono);color:var(--ec-muted);white-space:nowrap}
@media(max-width:639px){
  .ec-mini-r{grid-template-columns:auto auto minmax(0,1fr);gap:6px 8px}
  .ec-mini-r em,.ec-mini-r s{grid-column:span 2;justify-self:start}
}

/* ---------- Assessor Desk · the instrument scene ---------- */
.ec-life-desk{grid-area:desk}
.ec-lens{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.ec-lens-out,.ec-lens-back{display:flex;align-items:center;gap:9px;
  font:600 10.5px/1.5 var(--ec-sans);letter-spacing:.02em;color:var(--ec-muted);padding:0}
.ec-lens-out code,.ec-lens-back code{font-family:var(--ec-mono);font-size:10.5px;
  padding:1px 6px;border-radius:3px;background:var(--ec-cream);color:var(--ec-heading)}
/* The object leaves and returns on the same rail — the point of the scene. */
.ec-lens-out::after,.ec-lens-back::before{content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,var(--ec-rule-strong),transparent)}
.ec-lens-back::before{background:linear-gradient(90deg,transparent,var(--ec-green-line))}
.ec-lens-back{color:var(--ec-green-ink);flex-direction:row-reverse}
.ec-lens-body{border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-control);
  background:var(--ec-gold-ground);padding:13px 15px 12px}
.ec-lens-t{display:block;font:600 9.5px/1.5 var(--ec-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ec-gold-ink);margin-bottom:10px}
.ec-lens-vs{display:flex;align-items:baseline;gap:13px}
.ec-lens-vs>span{display:flex;flex-direction:column;gap:3px;flex:none}
.ec-lens-vs b{font:600 20px/1 var(--ec-serif);color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-lens-vs i{font-style:normal;font:400 9.5px/1.4 var(--ec-mono);letter-spacing:.04em;color:var(--ec-muted)}
.ec-lens-gap{flex:1 1 auto;min-width:22px;height:1px;align-self:center;margin-top:-6px;
  background:repeating-linear-gradient(90deg,var(--ec-gold) 0 4px,transparent 4px 8px)}
.ec-lens-r{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--ec-gold-line);
  font:600 11.5px/1.45 var(--ec-sans);color:var(--ec-gold-ink)}

/* ---------- Output Desk · a rendered view of the record ---------- */
.ec-life-out{grid-area:out}
.ec-revline{display:flex;align-items:center;gap:9px}
.ec-rev-s{flex:none;padding:6px 11px;border-radius:var(--ec-r-control);
  font:600 12px/1.3 var(--ec-mono);letter-spacing:.05em}
.ec-rev-s[data-s="old"]{border:1px solid var(--ec-rule);background:var(--ec-cream);color:var(--ec-muted)}
.ec-rev-s[data-s="new"]{border:1px solid var(--ec-pine);background:var(--ec-white);color:var(--ec-heading);
  box-shadow:0 2px 0 var(--ec-pine)}
.ec-rev-c{flex:1 1 auto;position:relative;text-align:center;
  font:600 9.5px/1.5 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-gold-ink)}
.ec-rev-c::before,.ec-rev-c::after{content:"";position:absolute;top:50%;width:calc(50% - 42px);height:1px;
  background:var(--ec-gold-line)}
.ec-rev-c::before{left:0}
.ec-rev-c::after{right:0}

/* ---------- Backup · the branch that crosses the boundary ---------- */
.ec-life-bk{grid-area:bk;border-style:dashed;background:var(--ec-cream)}
.ec-bk-out{display:flex;flex-wrap:wrap;gap:8px}
.ec-bk-f{display:flex;flex-direction:column;gap:1px;padding:8px 12px;
  border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-control);background:var(--ec-white);
  font:600 12.5px/1.3 var(--ec-mono);color:var(--ec-heading)}
.ec-bk-f i{font-style:normal;font:400 10px/1.4 var(--ec-sans);color:var(--ec-muted)}

/* ---------- entry motion: the record first, then the branches ---------- */
@media(prefers-reduced-motion:no-preference){
  .ec-chap-after[data-seen="1"] .ec-life-rec{animation:ec-life-in 480ms var(--ec-ease-object) both}
  .ec-chap-after[data-seen="1"] .ec-life-lib{animation:ec-life-in 420ms var(--ec-ease-object) 180ms both}
  .ec-chap-after[data-seen="1"] .ec-life-desk{animation:ec-life-in 420ms var(--ec-ease-object) 280ms both}
  .ec-chap-after[data-seen="1"] .ec-life-out{animation:ec-life-in 420ms var(--ec-ease-object) 360ms both}
  .ec-chap-after[data-seen="1"] .ec-life-bk{animation:ec-life-in 420ms var(--ec-ease-object) 440ms both}
  .ec-chap-after[data-seen="1"] .ec-life-bound{animation:ec-life-fade 600ms var(--ec-ease-object) 520ms both}
}
@keyframes ec-life-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ec-life-fade{from{opacity:0}to{opacity:.55}}
@media(prefers-reduced-motion:reduce){
  .ec-life-rec,.ec-life-lib,.ec-life-desk,.ec-life-out,.ec-life-bk,.ec-life-bound{animation:none}
}


/* ---------- hover / focus: show the relationship, not just the target ----------
   Each branch lights the part of itself that connects back to the record, so
   the composition explains itself on interaction rather than needing a caption. */
.ec-life-lib:hover .ec-mini-r[data-cur="1"],.ec-life-lib:focus-visible .ec-mini-r[data-cur="1"]{
  background:var(--ec-gold-soft);box-shadow:inset 3px 0 0 var(--ec-gold)}
.ec-life-desk:hover .ec-lens-body,.ec-life-desk:focus-visible .ec-lens-body{
  border-color:var(--ec-gold);background:var(--ec-gold-soft)}
.ec-life-desk:hover .ec-lens-back,.ec-life-desk:focus-visible .ec-lens-back{color:var(--ec-green)}
.ec-life-out:hover .ec-rev-s[data-s="new"],.ec-life-out:focus-visible .ec-rev-s[data-s="new"]{
  background:var(--ec-cream-raised);box-shadow:0 3px 0 var(--ec-pine)}
.ec-life-bk:hover,.ec-life-bk:focus-visible{border-color:var(--ec-pine);background:var(--ec-white)}
.ec-life-bk:hover .ec-bk-f,.ec-life-bk:focus-visible .ec-bk-f{border-color:var(--ec-pine)}
/* The record answers when any branch is reached: it is what they act on. */
.ec-life:has(.ec-life-lib:hover) .ec-life-rec,
.ec-life:has(.ec-life-desk:hover) .ec-life-rec,
.ec-life:has(.ec-life-out:hover) .ec-life-rec,
.ec-life:has(.ec-life-bk:hover) .ec-life-rec{border-color:var(--ec-rule-strong)}
.ec-life:has(.ec-life-lib:hover) .ec-rec-edge,
.ec-life:has(.ec-life-desk:hover) .ec-rec-edge,
.ec-life:has(.ec-life-out:hover) .ec-rec-edge,
.ec-life:has(.ec-life-bk:hover) .ec-rec-edge{background:var(--ec-gold)}
.ec-rec-edge{transition:background-color var(--ec-motion-standard) var(--ec-ease-control)}

/* ---------- Certificate Portfolio · outside the lifecycle ----------
   A deliberate spatial break and a rule, because it is a different audience and
   not a fourth destination of the assessor record. */
.ec-owner{margin-top:44px;padding:22px 20px;border-top:1px solid var(--ec-rule);
  border-radius:var(--ec-r-panel);background:transparent}
.ec-owner::before{content:"";position:absolute;left:20px;top:-1px;width:64px;height:3px;
  border-radius:0 0 2px 2px;
  background:var(--ec-green)}
@media(prefers-reduced-motion:reduce){.ec-rec-edge{transition:none}}


/* ================= SOURCE START · Assessment Input Snapshot ========
   What a source was found to contain, on the source's own card. Headline facts
   first, then coverage by family, then every input with its provenance behind a
   disclosure — inspection is optional, not a form to complete. */
.ec-snap{margin-top:12px;padding-top:12px;border-top:1px solid var(--ec-rule)}
.ec-snap-none{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;
  border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-control);
  background:var(--ec-cream);font-size:12.5px;line-height:1.55;color:var(--ec-muted)}
.ec-snap-none svg{flex:none;margin-top:2px}
.ec-snap-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font:600 10px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:11px}
.ec-snap-h>span{padding:2px 8px;border-radius:var(--ec-r-chip);background:var(--ec-cream);
  letter-spacing:.04em;text-transform:none;font-size:10.5px;color:var(--ec-ink)}

/* Headline facts: the figures an assessor looks for first. */
.ec-snap-big{display:flex;flex-wrap:wrap;gap:1px;background:var(--ec-rule-soft);
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-control);overflow:hidden}
.ec-snap-b{flex:1 1 130px;display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;background:var(--ec-white);min-width:0}
.ec-snap-b b{font:600 17px/1.15 var(--ec-serif);color:var(--ec-heading);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ec-snap-b b i{font-style:normal;font-size:11.5px;color:var(--ec-muted);margin-left:2px}
.ec-snap-b em{font-style:normal;font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ec-muted)}

/* A rating in the source is the source's claim, and is labelled as such. */
.ec-snap-rate{display:flex;gap:9px;align-items:flex-start;margin-top:10px;
  padding:9px 12px;border:1px solid var(--ec-gold-line);border-radius:var(--ec-r-control);
  background:var(--ec-gold-ground);font-size:12px;line-height:1.55;color:var(--ec-gold-ink)}
.ec-snap-rate svg{flex:none;margin-top:2px}

/* Coverage by family — reach, never a score. */
.ec-snap-cov{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.ec-snap-y,.ec-snap-n{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
  border-radius:var(--ec-r-chip);font:600 11px/1.35 var(--ec-sans)}
.ec-snap-y{border:1px solid var(--ec-green-line);background:var(--ec-green-soft);color:var(--ec-green-ink);cursor:help}
.ec-snap-y i{font-style:normal;padding:0 5px;border-radius:8px;background:rgba(98,133,79,.18);font-size:10px}
.ec-snap-n{border:1px dashed var(--ec-rule);background:transparent;color:var(--ec-glyph)}
.ec-snap-n i{font-style:normal;font-weight:400;font-size:10px;opacity:.85}

/* §5 · the full input table. */
.ec-snap-all{margin-top:12px}
.ec-snap-all>summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  min-height:38px;padding:8px 11px;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-control);background:var(--ec-cream);
  font:600 12.5px/1.3 var(--ec-sans);color:var(--ec-heading);list-style:none}
.ec-snap-all>summary::-webkit-details-marker{display:none}
.ec-snap-all>summary:hover{border-color:var(--ec-rule-strong);background:var(--ec-cream-raised)}
.ec-snap-all>summary:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.ec-snap-tw{margin-top:9px;overflow-x:auto;border:1px solid var(--ec-rule);
  border-radius:var(--ec-r-control);background:var(--ec-white)}
.ec-snap-t{width:100%;border-collapse:collapse;font-size:12px}
.ec-snap-t th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--ec-rule);
  background:var(--ec-cream-raised);font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ec-muted);white-space:nowrap}
.ec-snap-t td{padding:8px 10px;border-bottom:1px solid var(--ec-rule-soft);
  line-height:1.5;color:var(--ec-ink);vertical-align:top}
.ec-snap-t tr:last-child td{border-bottom:0}
.ec-snap-t .ec-snap-v{font-weight:600;color:var(--ec-heading);font-variant-numeric:tabular-nums}
.ec-snap-t .ec-snap-p{font-family:var(--ec-mono);font-size:10.5px;color:var(--ec-muted)}
.ec-snap-note{display:flex;gap:8px;align-items:flex-start;margin-top:9px;
  font-size:11.5px;line-height:1.55;color:var(--ec-muted);max-width:74ch}
.ec-snap-note svg{flex:none;margin-top:2px}
@media(max-width:639px){
  .ec-snap-b{flex:1 1 100%}
  .ec-snap-t th,.ec-snap-t td{padding:7px 9px}
}


/* ================= FOLD SCENE · Source says → surfaces → records =====
   The three-stage boundary made explicit. Composition, palette and left-to-right
   structure are unchanged; what changed is that each stage now shows the real
   object at that state — identified source, comparable fact, record entry — and
   one source can be followed across all three. */

/* Stage labels are the professional boundary, so they stay tiny and factual. */
.ec-fold-lab{font-size:9px;letter-spacing:.16em}

/* ---------- stage 1 · identified sources ----------
   A quiet structural bracket rather than another container: the slips hang off
   one rule, so this reads as filed material, not a card stack. */
.ec-fold-slips{position:relative;padding-left:13px;display:flex;flex-direction:column;gap:7px}
.ec-fold-slips::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:rgba(250,248,240,.22)}
.ec-fold .ec-slip{position:relative;display:flex;flex-direction:column;gap:3px;
  padding:8px 11px;text-align:left;cursor:default;
  border:1px solid rgba(250,248,240,.16);border-radius:3px;
  background:rgba(250,248,240,.05);transform:rotate(var(--r,0deg));
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             background-color var(--ec-motion-fast) var(--ec-ease-control)}
/* The bracket tick that ties each slip to the rail. */
.ec-fold .ec-slip::before{content:"";position:absolute;left:-13px;top:15px;width:9px;height:1px;
  background:rgba(250,248,240,.22)}
.ec-slip-t{display:flex;align-items:center;gap:7px;font:400 11.5px/1.35 var(--ec-mono);
  color:rgba(250,248,240,.9)}
.ec-slip-t code{font-family:var(--ec-mono);font-weight:600;font-size:10.5px;
  padding:1px 5px;border-radius:2px;background:rgba(238,190,77,.16);color:var(--ec-gold)}
.ec-slip-t svg{flex:none;opacity:.6}
.ec-slip-p{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,248,240,.5);padding-left:19px}

/* ---------- stage 2 · the Compare Sources instrument ---------- */
.ec-fold-topic{font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ec-gold);margin-bottom:9px;padding-bottom:7px;
  border-bottom:1px solid rgba(238,190,77,.28)}
/* Accounts share one baseline grid, so the values line up as a column. */
.ec-fold-rows{display:flex;flex-direction:column;gap:1px}
.ec-fold .ec-fold-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:3px 10px;align-items:baseline;padding:8px 10px;text-align:left;cursor:default;
  border:0;border-radius:3px;background:transparent;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-fold .ec-fold-row code{font:600 10px/1.4 var(--ec-mono);color:rgba(250,248,240,.55)}
.ec-fold-who{font:400 11.5px/1.4 var(--ec-sans);color:rgba(250,248,240,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-fold .ec-fold-row b{font:600 17px/1.1 var(--ec-serif);color:var(--ec-rev-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;justify-self:end}
.ec-fold-role{grid-column:2/-1;font:600 9px/1.4 var(--ec-sans);letter-spacing:.11em;
  text-transform:uppercase;color:rgba(250,248,240,.45)}
/* Relied-on is the assessor's own selection, so it is the one marked. */
.ec-fold .ec-fold-row[data-relied="1"]{box-shadow:inset 2px 0 0 var(--ec-gold)}
.ec-fold .ec-fold-row[data-relied="1"] .ec-fold-role{color:var(--ec-gold)}
.ec-fold-bound{margin-top:7px;font:400 10.5px/1.5 var(--ec-sans);color:rgba(250,248,240,.5)}
.ec-fold-topic2{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin-top:13px;
  padding-top:10px;border-top:1px solid rgba(250,248,240,.14);
  font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,248,240,.6)}
.ec-fold-topic2 span{letter-spacing:.02em;text-transform:none;font-size:11px;
  color:rgba(250,248,240,.5)}

/* ---------- stage 3 · the record entry ----------
   A sheet emerging from the comparison: square top-left corner where the gold
   threshold meets it, so it reads as produced by what precedes it. */
.ec-fold .ec-fold-rec{padding:15px 17px;border:0;border-radius:0 var(--ec-r-doc) var(--ec-r-doc) 0;
  background:var(--ec-white);box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
  border-left:3px solid var(--ec-gold)}
.ec-recx-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  font:600 13.5px/1.35 var(--ec-sans);color:var(--ec-heading);
  padding-bottom:9px;border-bottom:1px solid var(--ec-rule)}
.ec-recx-h code{font:600 10.5px/1 var(--ec-mono);padding:2px 6px;border-radius:2px;
  background:var(--ec-gold-soft);color:var(--ec-gold-ink)}
.ec-recx-l{margin:10px 0 0;display:flex;flex-direction:column;gap:7px}
.ec-recx-l>div{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;align-items:baseline}
.ec-recx-l dt{font:600 9px/1.5 var(--ec-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ec-muted)}
.ec-recx-l dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ec-ink);
  display:flex;flex-wrap:wrap;gap:4px}
.ec-recx-l dd[data-empty="1"]{color:var(--ec-coral-ink);font-weight:600}
.ec-recx-s{font:600 10px/1.4 var(--ec-mono);padding:2px 6px;border-radius:2px;
  background:var(--ec-cream);color:var(--ec-ink);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}
/* The reason: visibly the assessor's, and visibly empty. */
.ec-recx-r{margin-top:11px;padding:10px 12px;border-radius:var(--ec-r-control);
  background:var(--ec-gold-ground);border:1px solid var(--ec-gold-line)}
.ec-recx-r[data-empty="1"]{background:var(--ec-cream);border-style:dashed;border-color:var(--ec-rule-strong)}
.ec-recx-rl{font:600 9px/1.5 var(--ec-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ec-gold-ink);margin-bottom:4px}
.ec-recx-r[data-empty="1"] .ec-recx-rl{color:var(--ec-muted)}
.ec-recx-rt{font:italic 400 13px/1.55 var(--ec-serif);color:var(--ec-ink)}
.ec-recx-r[data-empty="1"] .ec-recx-rt{font-style:normal;font-family:var(--ec-sans);
  font-size:11.5px;color:var(--ec-muted)}
.ec-recx-q{display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;margin-top:10px;
  font:600 10.5px/1.4 var(--ec-sans);color:var(--ec-coral-ink)}
.ec-recx-q svg{flex:none}
.ec-recx-q i{color:var(--ec-glyph);font-style:normal}
.ec-recx-d{margin-top:9px;padding-top:8px;border-top:1px solid var(--ec-rule-soft);
  font:400 9.5px/1.5 var(--ec-mono);letter-spacing:.05em;color:var(--ec-muted)}

/* ---------- provenance: follow one source across all three stages ---------- */
.ec-fold[data-lit] .ec-slip,
.ec-fold[data-lit] .ec-fold-row,
.ec-fold[data-lit] .ec-recx-s{opacity:.42}
.ec-fold[data-lit] .ec-slip[data-src],
.ec-fold[data-lit] .ec-fold-row[data-src],
.ec-fold[data-lit] .ec-recx-s[data-src]{transition:opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-fold[data-lit=""] .ec-slip,
.ec-fold[data-lit=""] .ec-fold-row,
.ec-fold[data-lit=""] .ec-recx-s{opacity:1}
.ec-fold-lit{opacity:1!important}
.ec-fold .ec-slip.ec-fold-lit{border-color:var(--ec-gold);background:rgba(238,190,77,.12)}
.ec-fold .ec-fold-row.ec-fold-lit{background:rgba(238,190,77,.14)}
.ec-recx-s.ec-fold-lit{background:var(--ec-gold);color:var(--ec-ink)}
.ec-fold .ec-slip:focus-visible,.ec-fold .ec-fold-row:focus-visible{
  outline:2px solid var(--ec-gold);outline-offset:2px}
@media(max-width:719px){
  .ec-fold .ec-slip{transform:none}
  .ec-recx-l>div{grid-template-columns:minmax(0,1fr)}
}


/* ================= SOURCE START BENCH · unequal by intent =============
   Four equal columns explained the workflow but flattened its meaning. The
   value is in the middle — identify, then compare — so the middle takes the
   width, and the decision on the right is a threshold rather than a fourth
   data column. */
.lz-bench{display:grid;gap:0;align-items:stretch;
  border:1px solid var(--ec-rule-strong);border-radius:var(--ec-r-region);overflow:clip;
  background:var(--ec-white);
  grid-template-columns:minmax(150px,0.72fr) minmax(0,2.5fr) minmax(190px,0.95fr)}
@media(max-width:859px){.lz-bench{grid-template-columns:minmax(0,1fr)}}
@media(min-width:860px) and (max-width:1099px){
  /* Tighter rails, so the middle keeps the width that carries the meaning. */
  .lz-bench{grid-template-columns:minmax(124px,0.6fr) minmax(0,2.3fr) minmax(158px,0.8fr)}
  .lz-mid{grid-template-columns:minmax(126px,0.7fr) minmax(0,1.9fr)}
  .lz-mid-cmp{padding-left:13px}
}
.lz-bench-c[data-c="src"]{border-right:1px solid var(--ec-rule)}
/* The judgement threshold: a heavier rule than any other in the scene. */
.lz-bench-c[data-c="you"]{border-left:2px solid var(--ec-gold);background:var(--ec-gold-ground)}
@media(max-width:859px){
  .lz-bench-c[data-c="src"]{border-right:0;border-bottom:1px solid var(--ec-rule)}
  .lz-bench-c[data-c="you"]{border-left:0;border-top:2px solid var(--ec-gold)}
}

/* ---------- the source rail ---------- */
.lz-bench-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lz-bench-l li{border-top:1px solid var(--ec-rule-soft)}
.lz-bench-l li:first-child{border-top:0}
.lz-bench-l button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:10px 12px 10px 0;border:0;background:transparent;cursor:default;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-s-id{display:flex;align-items:center;gap:7px}
.lz-s-st{font:600 8.5px/1.4 var(--ec-sans);letter-spacing:.1em;text-transform:uppercase;
  padding:1px 5px;border-radius:2px;border:1px dashed var(--ec-rule-strong);color:var(--ec-muted)}
.lz-bench-l b{font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading);margin-top:2px}
.lz-bench-l i{font-style:normal;font:600 9.5px/1.4 var(--ec-sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ec-muted)}
.lz-bench-l em{font-style:normal;font:400 10.5px/1.4 var(--ec-mono);color:var(--ec-glyph)}

/* ---------- the middle: inspector + comparison as one instrument ---------- */
.lz-mid{display:grid;grid-template-columns:minmax(160px,0.8fr) minmax(0,1.7fr);
  gap:0;padding-left:16px}
@media(max-width:719px){.lz-mid{grid-template-columns:minmax(0,1fr);padding-left:0}}
.lz-mid-sum{padding-right:16px;border-right:1px solid var(--ec-rule-soft)}
@media(max-width:719px){.lz-mid-sum{padding-right:0;border-right:0;
  border-bottom:1px solid var(--ec-rule-soft);padding-bottom:14px;margin-bottom:14px}}
.lz-mid-cmp{padding-left:18px}
@media(max-width:719px){.lz-mid-cmp{padding-left:0}}
.lz-fam{margin-bottom:10px}
.lz-fam-h{font:600 8.5px/1.5 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-glyph);margin-bottom:3px}
.lz-fam-r{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;
  min-height:44px;padding:8px 10px;border:0;border-radius:var(--ec-r-control);background:transparent;cursor:pointer;
  text-align:left;font:400 12.5px/1.4 var(--ec-sans);color:var(--ec-ink);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-fam-r i{font-style:normal;font-size:10.5px;color:var(--ec-muted);white-space:nowrap}
.lz-fam-r:hover{background:var(--ec-hover)}
/* Only one comparison is being explored at a time — the point of an inspector. */
.lz-fam-r[aria-current="true"]{background:var(--ec-gold-soft);color:var(--ec-gold-ink);
  font-weight:600;box-shadow:inset 2px 0 0 var(--ec-gold)}
.lz-fam-r[aria-current="true"] i{color:var(--ec-gold-ink)}
.lz-fam-r:focus-visible{outline:2px solid var(--ec-gold);outline-offset:1px}

/* The axis. Every account sits at its own position; no end is the correct one. */
.lz-axis{position:relative;height:44px;margin:4px 0 12px}
.lz-axis-rule{position:absolute;left:0;right:0;top:28px;height:1px;background:var(--ec-rule-strong)}
.lz-axis-t{position:absolute;top:22px;width:1px;height:13px;background:var(--ec-pine);
  transform:translateX(-.5px);transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-axis-t::after{content:"";position:absolute;left:-3px;top:-4px;width:7px;height:7px;
  border-radius:50%;background:var(--ec-white);border:1.5px solid var(--ec-pine)}
.lz-axis-span{position:absolute;top:6px;height:14px;border-left:1px solid var(--ec-gold);
  border-right:1px solid var(--ec-gold);border-top:1px solid var(--ec-gold)}
.lz-axis-span b{position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  white-space:nowrap;padding:1px 7px;background:var(--ec-page);
  font:600 10.5px/1.5 var(--ec-sans);color:var(--ec-gold-ink)}
.lz-acc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lz-acc li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 10px;
  align-items:baseline;padding:7px 8px;border-top:1px solid var(--ec-rule-soft);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-acc li:first-child{border-top:0}
.lz-acc span{font-size:12px;color:var(--ec-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lz-acc b{font:600 16px/1.1 var(--ec-serif);color:var(--ec-heading);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lz-acc i{grid-column:2/-1;font-style:normal;font:600 9px/1.4 var(--ec-sans);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ec-glyph)}
.lz-cmp-f{margin-top:9px;font:600 11.5px/1.5 var(--ec-sans);color:var(--ec-gold-ink)}
.lz-cmp-one{display:flex;gap:8px;align-items:flex-start;padding:10px 0;
  font-size:12px;line-height:1.55;color:var(--ec-muted)}
.lz-cmp-one svg{flex:none;margin-top:2px}

/* ---------- the decision ---------- */
.lz-you-act{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:11px 13px;border:1px solid var(--ec-gold);border-radius:3px;
  background:var(--ec-white);cursor:pointer;
  font:600 13px/1.3 var(--ec-sans);color:var(--ec-heading);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-you-act:hover{background:var(--ec-gold-soft)}
.lz-you-act:focus-visible{outline:2px solid var(--ec-gold);outline-offset:2px}
.lz-you-plus{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  flex:none;border-radius:2px;background:var(--ec-gold);color:var(--ec-ink);
  font:600 14px/1 var(--ec-sans)}
.lz-you-sub{margin-top:8px;font-size:11px;line-height:1.5;color:var(--ec-gold-ink)}
.lz-you-alt{margin-top:10px;padding-top:9px;border-top:1px dashed var(--ec-gold-line);
  font-size:11px;line-height:1.5;color:var(--ec-muted)}
.lz-you-done{display:flex;flex-direction:column;gap:6px}
.lz-you-id{display:flex;align-items:center;gap:8px;font:600 12.5px/1.3 var(--ec-sans);color:var(--ec-heading)}
.lz-you-att{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;color:var(--ec-muted)}
.lz-you-att span{font:600 10px/1.4 var(--ec-mono);padding:2px 6px;border-radius:2px;
  background:var(--ec-white);border:1px solid var(--ec-gold-line);color:var(--ec-gold-ink);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-you-r{font-size:11.5px;color:var(--ec-muted)}
.lz-you-r b{color:var(--ec-coral-ink)}
.lz-you-undo{align-self:flex-start;margin-top:4px;min-height:32px;padding:6px 10px;
  border:0;background:transparent;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;font:400 11px/1.3 var(--ec-sans);color:var(--ec-muted)}

/* ---------- follow one source across the bench ---------- */
.lz-bench[data-lit]:not([data-lit=""]) .lz-bench-l button,
.lz-bench[data-lit]:not([data-lit=""]) .lz-acc li,
.lz-bench[data-lit]:not([data-lit=""]) .lz-you-att span{opacity:.4}
.lz-bench[data-lit]:not([data-lit=""]) .lz-axis-t{background:var(--ec-rule-strong)}
.lz-lit{opacity:1!important}
.lz-bench-l button.lz-lit{background:var(--ec-gold-soft)}
.lz-acc li.lz-lit{background:var(--ec-gold-soft)}
.lz-axis-t.lz-lit{background:var(--ec-gold)!important}
.lz-axis-t.lz-lit::after{border-color:var(--ec-gold);background:var(--ec-gold)}
.lz-you-att span.lz-lit{background:var(--ec-gold);color:var(--ec-ink)}


/* ================= OUTPUT · one record, rendered ======================
   Two panels with an arrow between them read as two objects. The working record
   is now the ground and the document sheet lifts off it and overlaps it, so the
   sheet is visibly a VIEW of the record. Identifiers hold the same rows across
   the seam, and hovering one lights its twin. */
.lz-out{position:relative;display:grid;align-items:start;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-region);overflow:clip;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
@media(max-width:859px){.lz-out{grid-template-columns:minmax(0,1fr);gap:0}}

/* The record ground: recessed, squared, and continuing under the sheet. */
.lz-out-rec{position:relative;z-index:0;padding:16px 34px 20px 18px;
  border:1px solid var(--ec-rule);border-right:0;border-radius:var(--ec-r-panel) 0 0 var(--ec-r-panel);
  background:var(--ec-cream)}
@media(max-width:859px){
  .lz-out-rec{border-right:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);padding-right:18px}
}
.lz-or-k{font:600 9px/1.5 var(--ec-sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ec-muted);margin-bottom:10px}
.lz-or{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:7px 0;
  border-top:1px solid var(--ec-rule-soft);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-or:first-of-type{border-top:0}
.lz-or>span{font:600 8.5px/1.5 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ec-glyph)}
.lz-or>b{font:400 12.5px/1.5 var(--ec-sans);color:var(--ec-ink);font-weight:400}

/* The rendered sheet: taller proportion, real paper edge, lifted and overlapping. */
.lz-out-doc{position:relative;z-index:1;margin-left:-26px;margin-top:14px;
  padding:20px 22px 22px;min-height:270px;
  border:1px solid var(--ec-rule-strong);border-radius:2px;background:var(--ec-white);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 2px 4px rgba(23,49,38,.06),
             0 22px 44px -26px rgba(23,49,38,.45)}
@media(max-width:859px){.lz-out-doc{margin-left:0;margin-top:-8px}}
/* A paper edge on the binding side, and section registration ticks. */
.lz-od-edge{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ec-pine)}
.lz-out-doc::after{content:"";position:absolute;right:0;top:22px;bottom:22px;width:1px;
  background:repeating-linear-gradient(var(--ec-rule) 0 5px,transparent 5px 13px)}
.lz-od-t{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;
  font:600 15px/1.3 var(--ec-serif);color:var(--ec-heading);padding-bottom:8px;
  border-bottom:2px solid var(--ec-pine)}
.lz-od-t i{font-style:normal;font:400 9.5px/1.4 var(--ec-mono);letter-spacing:.06em;
  padding:1px 6px;border:1px solid var(--ec-rule);border-radius:2px;color:var(--ec-muted)}
.lz-od-m{margin-top:7px;font:400 10.5px/1.5 var(--ec-mono);color:var(--ec-muted)}
.lz-od-s{margin-top:14px;font:600 8.5px/1.5 var(--ec-sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ec-glyph)}
.lz-od-h{margin-top:5px;font:600 13.5px/1.4 var(--ec-sans);color:var(--ec-heading);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-od-b,.lz-od-q{margin-top:8px;font-size:12px;line-height:1.6;color:var(--ec-ink);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-od-q{font-family:var(--ec-serif);font-style:italic;color:var(--ec-muted)}
/* A limitation stays attached to what it qualifies; an open question stays open. */
.lz-od-l{margin-top:12px;padding:6px 10px;border-left:3px solid var(--ec-coral);
  background:var(--ec-coral-ground);font:600 11px/1.5 var(--ec-sans);color:var(--ec-coral-ink);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-od-o{margin-top:6px;padding:6px 10px;border-left:3px solid var(--ec-gold);
  background:var(--ec-gold-ground);font:600 11px/1.5 var(--ec-sans);color:var(--ec-gold-ink);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}

/* Registration: the same identifier, both sides of the seam. */
.lz-reg-lit{background:var(--ec-selected)!important}
.lz-out-rec .lz-reg-lit{box-shadow:inset 2px 0 0 var(--ec-gold)}
.lz-out-doc .lz-od-l.lz-reg-lit{background:var(--ec-coral-soft)!important}
.lz-out-doc .lz-od-o.lz-reg-lit{background:var(--ec-gold-soft)!important}

/* ---------- the boundary as two parallel rails ---------- */
/* One continuous rail per process — they run alongside and never merge. */

/* ---------- the trust strip: working architecture, not reassurance ---------- */

/* DEFECT 2 · the routes grid used auto-fit with a 250px minimum, so an 858px
   container produced THREE tracks for two routes — squeezing the reader chain
   into 268px when it needs ~330px, and orphaning "reader" on its own line while
   the recovery route stayed on one. Two explicit tracks. */

/* A faint record line leads into the next chapter rather than a pale gap. */
.ec-chap-line{padding-bottom:6px}
.ec-chap-after{position:relative}
.ec-chap-after::before{content:"";position:absolute;left:50%;top:0;width:1px;height:26px;
  transform:translateX(-50%);
  background:linear-gradient(var(--ec-rule-strong),transparent)}


/* ================= BOUNDARY RAILS · fixed geometry ====================
   The wrapping flex row was the root of three separate defects: the rail broke
   into two lines, and each item's marker — positioned at a fixed -15px — landed
   on the PREVIOUS row's text, stamping circles over readable copy.

   Each item is now its own grid cell carrying its own rule segment and its own
   marker, so a marker can only ever sit on its own item's line and wrapping is
   structural rather than accidental. */
/* Each cell carries its own segment of the rail. */
/* And its own marker, on its own line — never on the row above. */

/* The boundary marker: no panel behind it. The user asked for a registration
   mark, and a filled box made it read as a third rail. */

/* The official rail keeps its four full labels, so it needs the width its
   content asks for rather than an arbitrary 0.85fr. */


/* ---------- the boundary, as one light strip ----------
   Replaces a whole chapter. Three ruled lines and a small marker: the reader has
   already met this boundary in the hero, in Source Start, in both workspaces and
   in the output scene, so it only needs stating once more, quietly, at the point
   the output appears. The full explanation lives on Trust, Data & Beta. */
/* The record line is the product's own, so it carries the record colour. */
/* The marker sits between the two lines, aligned to the label column. */

/* ---------- the one boundary statement that stays ----------
   Everything else in this area was explaining what the page had already shown,
   or what Trust, Data & Beta owns properly. This is the single line a reader
   arriving at the output still needs. */
.lz-out-not{margin-top:18px;padding-top:13px;border-top:1px solid var(--ec-rule);
  font:600 13px/1.5 var(--ec-sans);color:var(--ec-heading)}
.lz-out-not b{font-family:var(--ec-serif);font-size:15px;color:var(--ec-gold-ink);
  padding:0 3px}
.lz-out-not span{display:block;margin-top:4px;font:400 12px/1.55 var(--ec-sans);
  color:var(--ec-muted)}


/* ---------- the destination control ----------
   The professional distinction, placed where it changes behaviour rather than
   where it explains itself: choosing a destination decides what the action at
   the far right of the bench actually does, and what it is called. */
.lz-dest{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;margin-bottom:18px;
  padding-bottom:15px;border-bottom:1px solid var(--ec-rule)}
.lz-dest-k{font:600 9px/1.5 var(--ec-sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ec-muted)}
.lz-dest-set{display:inline-flex}
.lz-dest-set .ec-modetab{min-height:44px;padding:10px 14px;font-size:12.5px}
/* The record shape is named by its own colour, as everywhere else. */
.lz-bench[data-dest="retrofit"] .lz-bench-c[data-c="you"]{border-left-color:var(--ec-green);
  background:var(--ec-green-ground)}
.lz-bench[data-dest="retrofit"] .lz-you-act{border-color:var(--ec-green)}
.lz-bench[data-dest="retrofit"] .lz-you-act:hover{background:var(--ec-green-soft)}
.lz-bench[data-dest="retrofit"] .lz-you-plus{background:var(--ec-green);color:var(--ec-rev-text)}
.lz-bench[data-dest="retrofit"] .lz-you-sub{color:var(--ec-green-ink)}
.lz-bench[data-dest="retrofit"] .lz-you-alt{border-top-color:var(--ec-green-line)}
.lz-bench[data-dest="retrofit"] .lz-you-att span{border-color:var(--ec-green-line);color:var(--ec-green-ink)}
.lz-you-where{margin-top:9px;font-size:11px;line-height:1.5;color:var(--ec-green-ink)}
.lz-you-where span{display:block;font:600 8.5px/1.6 var(--ec-sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ec-glyph)}

/* ---------- the dark scene continues into Source Start ----------
   One provenance rail carries D-01/D-02/D-03 out of the dark chapter and into
   the source rail below, so the reader zooms into the workflow rather than
   arriving at another homepage module. */
.ec-chap-fold{position:relative}
.ec-chap-fold::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:26px;
  pointer-events:none;
  background:linear-gradient(var(--ec-pine),transparent);opacity:.14}
.ec-chap-bench{position:relative}
.ec-chap-bench::before{content:"";position:absolute;left:calc(var(--ec-s7,22px) + 6px);top:-26px;
  width:1px;height:26px;background:linear-gradient(var(--ec-pine),var(--ec-rule-strong));opacity:.5}
@media(max-width:719px){.ec-chap-bench::before{display:none}}


/* ================= CONTROL SYSTEM · one radius ladder ================
   The audit found five different radii on controls doing the same job — pack
   tabs 999, nav pills 9/10, mode tabs 12, buttons 9, footer actions 11/999 —
   and mode-tab heights of 50/44/40. A control's shape should say what kind of
   control it is, not which turn it was written in.

   The ladder: a control you PRESS is a pill; a control that is part of a
   document surface keeps the document's square edge. Nothing between. */

/* --- pills: anything pressed, switched or navigated --- */
.ec-navpill,.ec-modetab,.ec-conpill,.ec-stagetab,.ec-fbtn,
.ec-btn:not(.ec-btn-square),.ec-segbtn{border-radius:999px}
/* The wells that hold them follow their contents. */
.ec-modeset,.ec-navpills,.ec-conpills{border-radius:999px}

/* --- one height for every primary control --- */
.ec-navpill,.ec-modetab,.ec-conpill,.ec-fbtn,.ec-btn:not(.ec-btn-sm){min-height:44px}
.ec-segbtn{min-height:40px}

/* --- one icon size and gap, everywhere --- */
.ec-navpill,.ec-modetab,.ec-conpill,.ec-stagetab,.ec-fbtn,.ec-btn,.ec-segbtn,.ec-flink{
  display:inline-flex;align-items:center;gap:8px}
.ec-navpill>svg,.ec-modetab>svg,.ec-conpill>svg,.ec-btn>svg,.ec-fbtn>svg{
  width:15px;height:15px;flex:none}
.ec-flink>svg{width:15px;height:15px;flex:none}

/* --- active emphasis: never colour alone --- */
.ec-navpill[aria-current="page"],.ec-conpill[aria-selected="true"]{font-weight:600}
.ec-modetab[aria-pressed="true"]{font-weight:600}
/* The record shape names itself by colour AND by an edge. */
.ec-modetab[aria-pressed="true"][data-pack="epc"],
.ec-modeset[data-pack="epc"] .ec-modetab[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--ec-gold)}
.ec-modetab[aria-pressed="true"][data-pack="retrofit"],
.ec-modeset[data-pack="retrofit"] .ec-modetab[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--ec-green)}

/* --- one disabled treatment --- */
.ec-navpill[disabled],.ec-modetab[disabled],.ec-conpill[disabled],
.ec-btn[disabled],.ec-segbtn[disabled],.ec-fbtn[disabled]{
  opacity:.45;cursor:not-allowed;box-shadow:none}
.ec-navpill[disabled]:hover,.ec-modetab[disabled]:hover,.ec-conpill[disabled]:hover,
.ec-btn[disabled]:hover,.ec-segbtn[disabled]:hover{transform:none;background:inherit}

/* --- one focus ring --- */
.ec-navpill:focus-visible,.ec-modetab:focus-visible,.ec-conpill:focus-visible,
.ec-stagetab:focus-visible,.ec-btn:focus-visible,.ec-segbtn:focus-visible,
.ec-fbtn:focus-visible,.ec-flink:focus-visible{
  outline:3px solid var(--ec-gold);outline-offset:2px}

/* --- document surfaces keep their square edge: a sheet is not a control --- */
.ec-doc,.ec-out-sheet,.lz-out-doc,.ec-q-sheet{border-radius:2px}

/* --- mobile: the pill ladder holds, only the padding tightens --- */
@media(max-width:719px){
  .ec-navpill,.ec-modetab,.ec-conpill,.ec-fbtn{padding-left:13px;padding-right:13px}
  .ec-segbtn{min-height:44px}
}

/* A workspace mark inside a control sits at the icon size, never larger than
   the label it belongs to. */
.ec-modetab>img{width:16px;height:16px;flex:none}
.ec-modetab[aria-pressed="false"]>img{opacity:.6}
.ec-modetab[aria-pressed="true"]>img{opacity:1}
.ec-modetab>img{transition:opacity var(--ec-motion-fast) var(--ec-ease-control)}

.ec-shell-sheet .ec-navpill,.ec-menu-pop .ec-navpill,.ec-navpill{border-radius:999px}
.ec-pack>img{width:16px;height:16px}


/* ================= RETROFIT · the evidence spine ======================
   Not the comparison instrument recoloured. EPC converges on one axis toward a
   selected value; Retrofit accumulates against a PLACE and travels outward to a
   handover. Different structure, so it survives greyscale. */
.lz-ev{display:flex;flex-direction:column;gap:0;padding-left:16px}
@media(max-width:719px){.lz-ev{padding-left:0}}
.lz-ev-place{padding-bottom:12px;border-bottom:1px solid var(--ec-rule)}
.lz-ev-crumb{display:flex;gap:9px;align-items:baseline}
.lz-ev-crumb svg{flex:none;margin-top:2px;color:var(--ec-green-ink)}
.lz-ev-crumb>span{font:400 14px/1.4 var(--ec-serif);color:var(--ec-ink)}
.lz-ev-crumb i{font-style:normal;padding:0 7px;color:var(--ec-glyph)}
.lz-ev-crumb b{font-weight:600;color:var(--ec-heading)}

/* Observations hang off the place on a single rail — accumulation, not
   alignment. There is no axis here because there is nothing to compare. */
.lz-ev-obs{padding:13px 0 0}
.lz-ev-list{list-style:none;margin:9px 0 0;padding:0 0 0 15px;position:relative}
.lz-ev-list::before{content:"";position:absolute;left:3px;top:4px;bottom:12px;width:1px;
  background:var(--ec-green-line)}
.lz-ev-list li{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;gap:4px 9px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--ec-rule-soft);
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control)}
.lz-ev-list li:first-child{border-top:0}
.lz-ev-dot{position:absolute;left:-15px;top:13px;width:7px;height:7px;border-radius:50%;
  background:var(--ec-page);border:1.5px solid var(--ec-green)}
.lz-ev-t{font-size:12.5px;line-height:1.5;color:var(--ec-ink)}
.lz-ev-how{font:600 9px/1.4 var(--ec-sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ec-glyph);white-space:nowrap}
/* The limitation crosses the spine, as it does in the workspace. */
.lz-ev-lim{margin-top:13px;padding:11px 13px;border-left:3px solid var(--ec-coral);
  background:var(--ec-coral-ground)}
.lz-ev-limt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start}
.lz-ev-limt svg{margin-top:2px;color:var(--ec-coral-ink)}
.lz-ev-limt>span{font-size:12px;line-height:1.55;color:var(--ec-coral-ink)}
.lz-ev-limt code{margin-right:7px}
.lz-bench-k[data-tone="coral"]{color:var(--ec-coral-ink)}
.lz-ev .lz-bench-n{margin-top:12px}
/* The green source id sits in the rail on Retrofit. */
.lz-bench[data-dest="retrofit"] .lz-bench-l button.lz-lit{background:var(--ec-green-soft)}
.lz-bench[data-dest="retrofit"] .lz-ev-list li.lz-lit{background:var(--ec-green-soft)}

/* --- the marks must be recognisable at control size --- */
.ec-modetab>img{width:19px;height:19px}
.lz-dest-set .ec-modetab{padding:9px 15px 9px 13px;gap:9px}
/* An unselected workspace keeps its own identity — dimmed, never greyed to a
   generic glyph. */
.ec-modetab[aria-pressed="false"]>img{opacity:.75;filter:saturate(.65)}
.ec-modetab[aria-pressed="true"]>img{opacity:1;filter:none}


/* ================= LIFECYCLE · feature miniatures =====================
   Six capabilities around one record, each with its own compact geometry so the
   set reads as a connected environment rather than six generic utilities: a
   list strip, a source stack, an instrument, record flags, a document family,
   export objects. */
.ec-life{grid-template-areas:"lib lib" "rec desk" "rec src" "rec rev" "rec out" "bk bk"}
@media(min-width:1100px){
  .ec-life{grid-template-columns:minmax(300px,1fr) minmax(0,1.3fr);
    grid-template-areas:"lib lib" "rec desk" "rec src" "rec rev" "rec out" "rec bk"}
}
@media(max-width:719px){
  .ec-life{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"rec" "lib" "src" "desk" "rev" "out" "bk"}
}
.ec-life-src{grid-area:src}
.ec-life-rev{grid-area:rev}
.ec-life-src,.ec-life-rev{position:relative;display:block;padding:15px 17px;text-decoration:none;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-white);
  transition:border-color var(--ec-motion-fast) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control)}
.ec-life-src:hover,.ec-life-rev:hover{border-color:var(--ec-rule-strong);
  box-shadow:0 8px 22px -16px rgba(23,49,38,.45)}
.ec-life-src:focus-visible,.ec-life-rev:focus-visible{outline:3px solid var(--ec-gold);outline-offset:2px}
.ec-life-src::before,.ec-life-rev::before{content:"";position:absolute;
  left:-15px;top:26px;width:15px;height:1px;background:var(--ec-rule-strong)}
.ec-life-src::after,.ec-life-rev::after{content:"";position:absolute;
  left:-18px;top:23px;width:6px;height:6px;border-radius:50%;
  border:1px solid var(--ec-rule-strong);background:var(--ec-page)}
@media(max-width:719px){
  .ec-life-src::before,.ec-life-rev::before,.ec-life-src::after,.ec-life-rev::after{display:none}
}

/* --- sources: a stack, because that is what a register is --- */
.ec-srcstack{display:flex;flex-direction:column;gap:3px}
.ec-srcst-r{display:flex;align-items:center;gap:8px;padding:6px 10px;
  border:1px solid var(--ec-rule);border-radius:3px;background:var(--ec-white);
  font-size:11.5px;color:var(--ec-ink);
  margin-left:calc(var(--i) * 7px);box-shadow:0 1px 0 var(--ec-rule-soft)}
.ec-srcst-r code{font:600 9.5px/1.4 var(--ec-mono);color:var(--ec-muted)}
.ec-srcst-a{margin-top:5px;font:600 9px/1.5 var(--ec-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ec-glyph)}

/* --- review: record flags, never approvals --- */
.ec-flags{display:flex;flex-direction:column;gap:4px}
.ec-flag{display:flex;align-items:baseline;gap:8px;padding:5px 9px;border-radius:3px;
  font-size:11.5px;line-height:1.45;border-left:3px solid var(--ec-rule-strong);
  background:var(--ec-cream)}
.ec-flag code{font:600 9.5px/1.4 var(--ec-mono);flex:none}
.ec-flag[data-lvl="need"]{border-left-color:var(--ec-coral);background:var(--ec-coral-ground);
  color:var(--ec-coral-ink)}
.ec-flag[data-lvl="check"]{border-left-color:var(--ec-gold);background:var(--ec-gold-ground);
  color:var(--ec-gold-ink)}
.ec-flag[data-lvl="ok"]{border-left-color:var(--ec-green);background:var(--ec-green-ground);
  color:var(--ec-green-ink)}
.ec-flag[data-lvl="note"]{border-left-color:var(--ec-rule-strong);color:var(--ec-muted);
  font-weight:600}

/* --- the wider instrument set, and the output family --- */
.ec-instr-strip{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--ec-rule-soft)}
.ec-instr-strip>span{display:block;font:600 8.5px/1.5 var(--ec-sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ec-glyph)}
.ec-instr-strip>i{font-style:normal;font-size:11px;line-height:1.5;color:var(--ec-muted)}
.ec-outfam{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:10px}
.ec-outfam i{display:inline-flex;align-items:center;gap:6px;font-style:normal;
  font-size:11px;color:var(--ec-muted)}
.ec-outfam i svg{flex:none;opacity:.6}

/* --- backup: two labelled export objects --- */
.ec-bk-f{position:relative}
.ec-bk-f b{display:block;font:600 8.5px/1.5 var(--ec-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ec-muted)}

/* --- the small print that is still a capability list --- */
.ec-life-also{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px 11px;align-items:baseline;
  margin-top:6px;padding-top:11px;border-top:1px solid var(--ec-rule)}
.ec-life-also>span{font:600 8.5px/1.5 var(--ec-sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ec-glyph)}
.ec-life-also>i{font-style:normal;font-size:11px;line-height:1.5;color:var(--ec-muted)}


/* ---------- lifecycle · rendered-view corrections ----------
   Found by looking at the section rather than by probing it. */

/* The record card was clipping at its foot: the pine binding edge ran the full
   height while the white surface stopped short, leaving a hard seam. */
.ec-life-rec{overflow:hidden;padding-bottom:18px;border-radius:var(--ec-r-region)}
.ec-rec-edge{border-radius:var(--ec-r-region) 0 0 var(--ec-r-region)}

/* The state ledger left a dead half-cell: five rows in a two-column grid put
   "Outputs rendered" alone with a border-right into empty space. */
.ec-rec-state>div:last-child{border-bottom:0}
.ec-rec-state>div:last-child:nth-child(odd){border-right:0;padding-right:0}
.ec-rec-state>div:nth-child(5){display:flex;gap:14px;align-items:baseline}
.ec-rec-state>div:nth-child(5) dd{font-size:17px}
.ec-rec-state>div:nth-child(5) dt{margin-top:0}

/* The pack tab overlapped the card's own corner radius. */
.ec-rec-tab{display:inline-flex;align-items:center;gap:7px;top:0;right:0;
  border-radius:0 var(--ec-r-doc) 0 10px}
.ec-rec-tab img{flex:none}

/* Job Library rows: the pack chip and state were crushed against the right
   edge with no breathing room, and the chip carried more weight than the job
   reference it describes. */
.ec-mini-r{grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:11px;padding:9px 12px}
.ec-mini-r em{font-size:9px;letter-spacing:.09em;padding:2px 6px;font-weight:600}
.ec-mini-r s{padding-left:2px}
.ec-life-lib .ec-mini{margin-top:2px}

/* The source stack's offset made the rows look misaligned rather than stacked;
   a shallower step reads as a register. */
.ec-srcst-r{margin-left:calc(var(--i) * 5px)}

/* The output/backup statement belonged to the section above it, but its rule
   read as the start of this one. */
.lz-out-not{margin-bottom:4px}


/* ---------- Certificate Portfolio · its own product identity ----------
   Neutral pine base, not judgement gold — this is an owner/agent surface, not a
   third assessor workspace. Its identity comes from the approved mark and from
   dated-horizon geometry, so the mark and timeline alone read as a distinct
   EPC-Covered product even with the heading hidden. */
.ec-owner{border-left:3px solid var(--ec-pine);background:var(--ec-white)}
.ec-owner:hover{border-left-color:var(--ec-heading)}
.ec-owner-b>b{display:flex;align-items:center;gap:10px;font:600 17px/1.3 var(--ec-serif);
  color:var(--ec-heading)}
.ec-owner-b>b img{flex:none;opacity:.92;
  transition:opacity var(--ec-motion-fast) var(--ec-ease-control),
             transform var(--ec-motion-fast) var(--ec-ease-control)}
.ec-owner:hover .ec-owner-b>b img{opacity:1;transform:translateY(-1px)}
.ec-owner-ics{color:var(--ec-heading);font-weight:600}
.ec-owner-ics svg{color:var(--ec-pine);opacity:.75}



/* ---------- the date horizon, as a measured axis ----------
   Four bands with room of their own: kicker, axis, the near-window callout, and
   the year scale. Registration text at the project's 10px floor, in --ec-muted
   so it clears 4.5:1 rather than the 3.08:1 --ec-glyph gave at 9px. */
.ec-owner-hk{position:absolute;top:0;left:0;font:600 10px/1.3 var(--ec-sans);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ec-muted)}
.ec-owner-hs{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between}
.ec-owner-hs b{font:400 10px/1 var(--ec-mono);letter-spacing:.04em;color:var(--ec-muted)}
@media(max-width:919px){
  .ec-owner-h{width:100%;height:88px}
}

/* ---------- footer product marks ----------
   A workspace mark is multicolour artwork, not a glyph, so it does not take the
   link's currentColor or the sprite's opacity ramp. It sits slightly larger
   than a 15px glyph to stay legible on the pine ground. */
.ec-flink-mark img{width:17px;height:17px;flex:none;opacity:.9;
  transition:opacity var(--ec-motion-fast) var(--ec-ease-control),
             transform var(--ec-motion-fast) var(--ec-ease-control)}
.ec-flink-mark:hover img,.ec-flink-mark:focus-visible img{opacity:1;transform:translateX(1px)}
@media(prefers-reduced-motion:reduce){
  .ec-flink-mark:hover img,.ec-flink-mark:focus-visible img{transform:none}
}

/* ---------- banner social set ----------
   Icon-only and quiet: three destinations that must be reachable without
   competing with Source Start. Each carries an accessible name, so nothing
   depends on the glyph being recognised. */

/* Three icon-only destinations must not cost the row its primary action.
   The social block gives up its own spacing first; below 860px it stands down
   entirely and the footer carries all three. */

@media(max-width:1023px){
  .ec-menu-btn{padding-left:11px;padding-right:11px}
  .ec-shell-row{gap:9px}
}


/* ================= LIVE POLISH · banner + footer ==================
   Found on the deployed site, not in the workspace.

   1 · The three social links sat as bare 12px glyphs between Certificate
       Portfolio and Feedback with gap:0 and no ground — they read as debris
       between two controls rather than as a set. They now sit in their own
       recessed well, separated from the destinations by a rule, which is the
       same device the destination well already uses.
   2 · The footer's contact column resolved to 248px against 128px link
       columns, so the row left ~120px of dead space under the three nav
       groups. The column is tightened at source rather than padded around. */

/* --- banner: the social set --- */

/* --- footer: close the void under the link columns --- */
/* Address and purpose on one stacked pair, tighter than two full rows. */
/* The social row closes the column instead of adding a third block. */
/* Link columns carry their own rhythm so short columns do not read as gaps. */
.ec-footer .ec-fgroup ul{gap:0}
.ec-footer .ec-flink{}
.ec-footer-top{align-items:stretch}
.ec-footer .ec-fgroup{display:flex;flex-direction:column}


/* --- corrections from the measured pass ---
   The social well pushed the banner row 119px over its clip. Reclaimed by
   standing the set down below 1120px rather than 860px: the footer carries all
   three at every width, so nothing is lost, and the primary action keeps its
   room. The footer's dead space is closed by removing the email purpose
   sub-labels — an address is self-describing, and Trust already explains the
   difference — rather than by padding the short columns. */



/* The destinations now close the bottom bar rather than lengthening the
   contact column. Sits between the beta strip and the copyright, wrapping
   before either at narrow widths. */
@media(max-width:719px){.ec-footer-bar .ec-fsocial{order:3;width:100%;gap:4px 14px}}


/* ---------- follow row · landing page only ----------
   Named links on a rule, not a control group: this is a quiet aside at the end
   of the story, not a fourth call to action. Sits above the closing band, so
   the last thing read is still Start from source files. */}}

/* External destinations in the sheet: same pill, quieter, with the outbound
   mark trailing so it never reads as a product page. */
.ec-shell-sheet .ec-navpill-ext{color:rgba(250,248,240,.72)}
.ec-shell-sheet .ec-navpill-ext svg:last-child{margin-left:auto;opacity:.5}
.ec-shell-sheet .ec-navpill-ext:hover{color:var(--ec-rev-text)}
.ec-shell-sheet .ec-navpill-ext:hover svg:last-child{opacity:.9}

/* The Follow trigger: a dropdown, so it says so. */
.ec-menu-caret{flex:none;opacity:.6;transition:transform var(--ec-motion-fast) var(--ec-ease-control)}
.ec-menu-btn[aria-expanded="true"] .ec-menu-caret{transform:rotate(180deg);opacity:1}

/* Feedback yields its label before any destination yields its place. */
@media(max-width:1319px){
  .ec-shell-feedback span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-shell-feedback{padding:10px 12px}
  .ec-shell-feedback svg:last-child{display:none}
}


/* ================= AFTER THE RECORD · three rows, not five ==========
   The grid ran "rec desk" / "rec src" / "rec rev" / "rec out" / "bk bk" —
   five capability rows stacked in one narrow column. The section became a
   long ribbon of near-identical panels, and because the record card is far
   shorter than five stacked panels it left a large void beneath itself.

   Same six objects, arranged as a real field: the record holds a full-height
   column of its own, Assessor Desk keeps a wide row because it carries a
   working instrument, and the four compact capabilities pair up beneath it.
   Three content rows instead of five. */
@media(min-width:1100px){
  .ec-life{grid-template-columns:minmax(292px,.95fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "lib  lib  lib"
      "rec  desk desk"
      "rec  src  rev"
      "rec  out  bk";
    gap:13px}
  /* The record travels with the capabilities that act on it. */
  .ec-life-rec{position:sticky;top:96px;align-self:start}
}
@media(min-width:720px) and (max-width:1099px){
  .ec-life{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "lib  lib"
      "rec  desk"
      "src  rev"
      "out  bk";
    gap:12px}
}

/* The compact four read as one family: same internal rhythm, so the eye
   groups them instead of treating each as another announcement. */
.ec-life-src,.ec-life-rev,.ec-life-out,.ec-life-bk{padding:13px 15px}
.ec-life-src .ec-life-h,.ec-life-rev .ec-life-h,
.ec-life-out .ec-life-h,.ec-life-bk .ec-life-h{margin-bottom:9px}
/* Two of the four carried a closing sentence and two did not, which made the
   row heights disagree. The prose drops to a single line at these sizes. */
.ec-life-src .ec-life-p,.ec-life-rev .ec-life-p,
.ec-life-out .ec-life-p,.ec-life-bk .ec-life-p{font-size:11.5px;line-height:1.45;margin-top:9px}
.ec-life-out .ec-outfam{gap:4px 10px}
.ec-life-out .ec-outfam i{font-size:10.5px}
.ec-life-bk .ec-bk-out{gap:8px}

/* Backup is no longer a full-width band, so its outward trajectory is drawn
   on its own edge rather than across the section. */
@media(min-width:720px){
  .ec-life-bk{border-style:dashed}
}

/* ---------- landing radii, reconciled with the hero ----------
   The destination row and the Job Library rows are the last square surfaces
   on the page. Rows inside a clipped container inherit the parent's corners,
   so only the first and last need shaping. */
.lz-dest{padding:12px 14px;border:1px solid var(--ec-rule-soft);border-radius:var(--ec-r-panel);
  background:var(--ec-cream-raised);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-mini{border-radius:var(--ec-r-panel)}
.ec-mini-r:first-child{border-radius:var(--ec-r-panel) var(--ec-r-panel) 0 0}
.ec-mini-r:last-child{border-radius:0 0 var(--ec-r-panel) var(--ec-r-panel)}
/* The bench's own regions must not re-square the container they sit in. */
.lz-bench>*:first-child{border-radius:var(--ec-r-region) 0 0 var(--ec-r-region)}
.lz-bench>*:last-child{border-radius:0 var(--ec-r-region) var(--ec-r-region) 0}
@media(max-width:859px){
  .lz-bench>*:first-child{border-radius:var(--ec-r-region) var(--ec-r-region) 0 0}
  .lz-bench>*:last-child{border-radius:0 0 var(--ec-r-region) var(--ec-r-region)}
}

/* The record spine follows the card it binds. */
.ec-life-rec .ec-rec-edge{border-radius:var(--ec-r-region) 0 0 var(--ec-r-region)}
/* Landing surfaces that were still square, brought onto the panel radius. */
.lz-surf,.ec-acct,.ec-band{border-radius:var(--ec-r-region)}
/* The rendered sheet stays square: it is paper, not interface. */
.lz-out-doc{border-radius:2px}


/* ---------- hero audience tag ----------
   The audience was a plain uppercase kicker floating above the headline. As a
   bordered tag it becomes an object on the page, and the two marks at its end
   tie each profession to its workspace without another sentence. Sentence case
   with the roles in weight, so the professional titles carry the emphasis
   rather than the whole line shouting. */
.ec-aud{display:inline-flex;align-items:center;gap:12px;margin:0 0 13px;padding:7px 8px 7px 15px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-pill);background:var(--ec-white);
  font:400 13px/1.35 var(--ec-sans);color:var(--ec-muted);max-width:100%}
.ec-aud b{font-weight:600;color:var(--ec-heading)}
.ec-aud-marks{display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:4px 9px;border-radius:var(--ec-r-pill);background:var(--ec-cream)}
.ec-aud-marks img{display:block;flex:none}
.ec-aud-marks i{width:1px;height:13px;background:var(--ec-rule)}
@media(max-width:719px){
  .ec-aud{gap:9px;padding-left:13px;font-size:12.5px}
  .ec-aud-marks{padding:3px 7px}
}


/* ================= FOOTER · final refinement ======================
   Three levels that no longer weigh the same. The closing action leads, the
   navigation supports it, the utility strip recedes. Height comes down by
   tightening the rhythm rather than by removing routes. */

/* --- 1 · density --- */
.ec-footer-top{padding:22px 26px 20px;gap:22px 32px}
.ec-footer .ec-fbrand{gap:7px}
.ec-footer .ec-fbrand-a{margin-bottom:1px}
.ec-fline{font:600 14.5px/1.3 var(--ec-serif)}
.ec-footer .ec-fstate{font:400 13px/1.5 var(--ec-sans);max-width:30ch}
.ec-footer .ec-fbound-q{font-size:11px;line-height:1.45}
.ec-fgroup h4{margin-bottom:9px}
.ec-fgroup ul{gap:0}
.ec-flink{font-size:13.5px}
.ec-fclose{padding:20px 26px 18px}
.ec-fclose-h{font-size:19px;line-height:1.3}
.ec-fclose-p{margin-top:5px;font-size:12.5px;max-width:46ch}

/* --- 2, 3 · the closing action leads --- */
.ec-fclose-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Secondary: outlined, never a second gold field. */
.ec-fbtn-second{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 17px;
  border-radius:999px;border:1px solid rgba(250,248,240,.3);background:transparent;
  font:600 13.5px/1 var(--ec-sans);color:rgba(250,248,240,.9);text-decoration:none;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             border-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-fbtn-second svg{opacity:.7;transition:opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-fbtn-second:hover{background:rgba(250,248,240,.09);border-color:rgba(250,248,240,.48);color:var(--ec-rev-text)}
.ec-fbtn-second:hover svg{opacity:1}
.ec-fbtn-second:focus-visible{outline:3px solid var(--ec-gold);outline-offset:2px}

/* --- 8 · the beta action steps down to outlined gold --- */

/* --- 9 · addresses labelled by purpose, not repeated as identical rows --- */

/* --- 10 · Follow, grouped and named --- */

/* --- 11 · the utility strip recedes --- */
.ec-footer-bar{padding:11px 26px;gap:6px 22px}
.ec-fbeta{font-size:11.5px;gap:4px 13px}
.ec-fcopy{font-size:11.5px}

/* --- 12 · pack accent, on hover only --- */
.ec-flink[data-pack="epc"]:hover{color:#EEBE4D}
.ec-flink[data-pack="retrofit"]:hover{color:#7DA960}

@media(prefers-reduced-motion:reduce){
}
@media(max-width:719px){
  .ec-footer-top{padding:18px 15px 16px;gap:18px}
  .ec-fclose{padding:18px 15px 16px}
}


/* --- 1 · contact spans the full width below 1120px, so it should use that
   width rather than stacking into a tall column. Beta action, the two
   addresses and Follow sit as one row; the region stops being the tallest
   thing in the footer. --- */
@media(max-width:1119px){
  
}
@media(max-width:767px){
}


/* ================= FOOTER · density pass ==========================
   Measured cause, not guessed: at 924px the nav grid is three columns with
   five children, so brand and contact each take a full row of their own —
   157 + 113 + 111 plus gaps = 410px. The fix is horizontal, not smaller type:
   contact becomes one line instead of five stacked bands, brand and the link
   lists tighten their internal rhythm, and above 1200px all five columns share
   a single row. Type sizes are unchanged throughout. */

/* --- contact as one horizontal unit --- */

/* --- brand: same content, tighter rhythm --- */
.ec-footer .ec-fbrand{gap:6px}
.ec-footer .ec-fbrand-a{margin-bottom:0}
.ec-footer .ec-fline{font-size:14.5px}
.ec-footer .ec-fstate{font-size:12.5px;line-height:1.45;max-width:38ch}
.ec-footer .ec-fbound{font-size:12px;line-height:1.45}

/* --- link lists: a refined index, not a mobile menu --- */
.ec-fgroup h4{margin-bottom:7px}
.ec-fgroup ul{gap:0}
.ec-flink{font-size:13px}

/* --- closing band --- */
.ec-fclose{padding-top:18px;padding-bottom:16px;gap:14px 30px}
.ec-fclose-h{margin-bottom:5px}
.ec-fclose-say p{margin-bottom:0}

/* --- the grid itself --- */
.ec-footer-top{padding:14px 20px;gap:14px 26px}
@media(min-width:1200px){
  /* Five columns, one row: nothing spans, so no column can force a new band. */
  .ec-footer-top{}
}
@media(max-width:1199px){
  /* Contact keeps its single line across the full width it already has. */
}
@media(max-width:719px){
  .ec-flink{}
}

/* Closing band: the proposition and both actions belong on one principal row,
   with the trace immediately beneath rather than a band of its own. */
.ec-fclose{padding-top:14px;padding-bottom:12px;gap:10px 30px;align-items:center}
.ec-fclose-say{max-width:52ch}
.ec-fclose-h{font-size:19px;line-height:1.25;margin-bottom:4px}
.ec-fclose-say p{font-size:12.5px;line-height:1.5}
.ec-fclose-do{gap:10px}
.ec-fpath{padding-top:9px;margin-top:10px}
.ec-footer-bar{padding:11px 20px}

/* Between 900 and 1199px the brand column sits beside the three link lists
   rather than taking a band of its own — the width is there, and stacking it
   was costing a full 134px row for content 240px wide. */
@media(min-width:900px) and (max-width:1199px){
  .ec-footer-top{}
  .ec-footer-top>.ec-fbrand{}
}


/* ---------- footer control sizing · ONE owner ----------
   Declared last, so no earlier generation can win by source order. Desktop
   keeps the footer dense; touch widths give every control a real 44px target,
   which is what the brief asks for and what an earlier rule already had right
   before this pass overrode it downward. */
.ec-flink,
.ec-fgroup li a,
.ec-fmail .ec-fact,
.ec-fcontact .ec-fmail .ec-fact,
.ec-fsocial a,
@media(max-width:719px){
  .ec-flink,
  .ec-fgroup li a,
  .ec-fmail .ec-fact,
  .ec-fcontact .ec-fmail .ec-fact,
  .ec-fsocial a,
}
/* The Follow label: visible grouping in the contact row, so the three marks are
   never orphaned under a "Contact" heading. */
@media(max-width:719px){.ec-ffollow-l{display:block;width:100%;padding:2px 0 0}}


/* ================= FOOTER LAYOUT · THE SINGLE OWNER =================
   Declared last and never duplicated. Five groups, one row, from 1100px —
   Contact is a column, not a band. Below that the collapse is deliberate
   rather than whatever auto-placement decides. */
.ec-footer-top{
  display:grid;
  grid-template-columns:minmax(210px,1.3fr) minmax(0,.82fr) minmax(0,.82fr) minmax(0,.82fr) minmax(200px,1.25fr);
  gap:14px 26px;
  padding:16px 26px;
  align-items:start}
.ec-footer-top>*{grid-column:auto;grid-row:auto}

/* Contact as a column: action, both addresses, then the three marks on one
   line. No micro-headings — the addresses and the button name themselves. */

@media(max-width:899px){
  /* Brand leads the row; the three lists and contact share the second. */
  .ec-footer-top{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 22px}
  .ec-footer-top>.ec-fbrand{grid-column:1/-1;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
    padding-bottom:12px;border-bottom:1px solid rgba(250,248,240,.1)}
  .ec-footer-top>.ec-fbrand .ec-fstate{max-width:46ch}
}
@media(max-width:767px){
  .ec-footer-top{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 15px}
}
@media(max-width:479px){
  .ec-footer-top{grid-template-columns:minmax(0,1fr)}
  .ec-footer-top>.ec-fbrand{flex-direction:column}
}

/* Closing band and utility rail: shallower by padding, not by type size. */
.ec-fclose{padding:16px 26px 14px;gap:14px 32px}

.ec-footer-bar{padding:10px 26px;gap:6px 22px}
@media(max-width:767px){
  .ec-fclose{padding:15px 15px 13px}

}


/* ---------- one row further down, and shallower ----------
   The five columns fit to 900px on measured minimums, so Contact stays a
   column at laptop widths instead of becoming a band. Below 1100 the tracks
   tighten rather than the layout collapsing. */
@media(min-width:900px) and (max-width:1199px){
  .ec-footer-top{
    grid-template-columns:minmax(180px,1.2fr) repeat(3,minmax(76px,.76fr)) minmax(178px,1.15fr);
    gap:12px 20px;padding:14px 20px}
}
/* The brand column set the row's height with four stacked lines. The mark and
   the brand line now share a line, and the boundary note joins the statement. */
@media(min-width:900px){
  .ec-footer-top>.ec-fbrand{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:2px 11px;align-items:center}
  .ec-footer-top>.ec-fbrand .ec-fbrand-a{grid-row:1;grid-column:1}
  .ec-footer-top>.ec-fbrand .ec-fline{grid-row:1;grid-column:2;margin:0}
  .ec-footer-top>.ec-fbrand .ec-fstate{grid-column:1/-1;margin-top:5px}
  .ec-footer-top>.ec-fbrand .ec-fbound{grid-column:1/-1}
}
/* Closing band and rail to their targets, by padding only. */
.ec-fclose{padding:13px 26px 11px;gap:12px 30px}

.ec-footer-bar{padding:8px 26px;gap:5px 20px}
.ec-footer-top{padding:13px 26px;gap:12px 24px}


/* ---------- last of the height, from the tallest column ----------
   Contact sets the row: beta action, two addresses, a bordered social line.
   Each gap gives a little, none of the type does. */
@media(min-width:900px){
  .ec-flink,.ec-fgroup li a,.ec-fmail .ec-fact,
  .ec-fcontact .ec-fmail .ec-fact,.ec-fsocial a,
  .ec-fgroup h4{margin-bottom:6px}
  .ec-fgroup ul{gap:0}
  .ec-footer-top{padding:11px 26px}
  .ec-fclose{padding:11px 26px 9px}
  .ec-footer-bar{padding:6px 26px}

}


/* ================= FOOTER · contact column, stated once =================
   One owner for the whole column, at a specificity nothing else reaches, so
   the next edit cannot silently lose. The button keeps its outlined-gold
   treatment (§9) but stops being the tallest object in the row: at desk widths
   it is a 32px control among 27px rows, and only below 720px does it grow back
   to a 44px touch target. */
.ec-footer .ec-fcontact{display:flex;flex-direction:column;gap:5px;
  padding:8px 0 0 20px;border-left:1px solid rgba(250,248,240,.07)}
.ec-footer .ec-fcontact h4{margin:0 0 2px}

.ec-footer .ec-fcontact .ec-fbtn-beta{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;align-self:flex-start;min-height:32px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--ec-gold);background:rgba(229,179,66,.09);
  font:600 12.5px/1 var(--ec-sans);color:var(--ec-gold);text-decoration:none;box-shadow:none;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-footer .ec-fcontact .ec-fbtn-beta:hover{background:rgba(229,179,66,.17);color:#f6dc9a}
.ec-footer .ec-fcontact .ec-fbtn-beta svg{flex:none;opacity:.85}

.ec-footer .ec-fcontact .ec-fmail{display:flex;flex-direction:column;gap:1px;margin:1px 0 0}
.ec-footer .ec-fcontact .ec-fmail .ec-fact{display:inline-flex;align-items:center;gap:8px;
  min-height:25px;font:400 13px/1.3 var(--ec-sans);color:rgba(250,248,240,.78);text-decoration:none}
.ec-footer .ec-fcontact .ec-fmail .ec-fact:hover{color:var(--ec-rev-text)}
.ec-footer .ec-fcontact .ec-fmail .ec-fact:hover span{text-decoration:underline;text-underline-offset:3px}
.ec-footer .ec-fcontact .ec-fmail .ec-fact svg{flex:none;opacity:.6}
.ec-footer .ec-fcontact .ec-fmail i{display:none}

.ec-footer .ec-fcontact .ec-ffollow{display:flex;align-items:center;gap:9px;margin-top:2px}
.ec-footer .ec-fcontact .ec-ffollow-l{font:600 10px/1 var(--ec-sans);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(250,248,240,.42)}
.ec-footer .ec-fcontact .ec-fsocial{display:flex;align-items:center;gap:5px}
.ec-footer .ec-fcontact .ec-fsocial a{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;color:rgba(250,248,240,.66);text-decoration:none;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             color var(--ec-motion-fast) var(--ec-ease-control)}
.ec-footer .ec-fcontact .ec-fsocial a:hover{background:rgba(250,248,240,.09);color:var(--ec-rev-text)}
.ec-footer .ec-fcontact .ec-fsocial a svg{flex:none}

/* Phones: every contact control becomes a real touch target again. */
@media(max-width:719px){
  .ec-footer .ec-fcontact{padding:14px 0 0;border-left:0;border-top:1px solid rgba(250,248,240,.1);gap:7px}
  .ec-footer .ec-fcontact .ec-fbtn-beta{min-height:44px;padding:11px 16px;width:100%;font-size:13.5px}
  .ec-footer .ec-fcontact .ec-fmail .ec-fact{min-height:44px;font-size:13.5px}
  .ec-footer .ec-fcontact .ec-fsocial a{width:44px;height:44px}
}

/* ---------- closing band and utility rail: shallower, quieter ---------- */
.ec-footer .ec-fclose{padding:16px 26px 14px}
.ec-footer .ec-fclose-h{margin-bottom:3px}

.ec-footer .ec-footer-top{padding:16px 26px 18px}
.ec-footer .ec-footer-bar{padding:10px 26px;border-top-color:rgba(250,248,240,.07)}
/* §13 — one weight of rule, not three. */
.ec-footer .ec-fclose{border-bottom-color:rgba(250,248,240,.07)}


/* ================= FOOTER · final proportions, one owner ================
   Measured, not nudged: brand is the tallest legitimate column at 138px, so
   contact is composed to land beside it rather than 46px past it. */
footer.ec-footer .ec-fclose{padding:14px 26px 12px}
footer.ec-footer .ec-fclose-h{margin:0 0 3px;font-size:18.5px;line-height:1.3}
footer.ec-footer .ec-fclose-say p{margin:0;font-size:12.5px;line-height:1.5}

footer.ec-footer .ec-footer-top{padding:14px 26px 14px}
footer.ec-footer .ec-footer-bar{padding:9px 26px;min-height:0}

footer.ec-footer .ec-fcontact{gap:4px;padding:6px 0 0 20px}
footer.ec-footer .ec-fcontact h4{margin:0 0 3px}
footer.ec-footer .ec-fcontact .ec-fbtn-beta{min-height:30px;height:30px;padding:0 13px;
  font-size:12.5px;line-height:1}
footer.ec-footer .ec-fcontact .ec-fbtn-beta svg{width:13px;height:13px}
footer.ec-footer .ec-fmail{display:flex;flex-direction:column;gap:0;margin:2px 0 0}
footer.ec-footer .ec-fmail .ec-fact{min-height:24px;height:24px;font-size:13px;line-height:1}
footer.ec-footer .ec-fmail .ec-fact svg{width:14px;height:14px}
footer.ec-footer .ec-fmail i{display:none}
footer.ec-footer .ec-fsocial{display:flex;align-items:center;gap:4px;margin-top:3px}
footer.ec-footer .ec-fsocial a{width:26px;height:26px;min-height:0}
footer.ec-footer .ec-ffollow-l{margin-right:3px}

/* Nav lists: a refined index, not a mobile menu. */
footer.ec-footer .ec-fgroup h4{margin-bottom:7px}
footer.ec-footer .ec-fgroup ul{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
footer.ec-footer .ec-fgroup li{margin:0}
footer.ec-footer .ec-flink{min-height:25px;font-size:13px;line-height:1.2}
footer.ec-footer .ec-fbrand{gap:5px}
footer.ec-footer .ec-fbrand-a{margin-bottom:0}

/* Phones keep real touch targets — desk compactness must not reach them. */
@media(max-width:719px){
  footer.ec-footer .ec-fcontact{gap:6px;padding:14px 0 0;border-left:0;
    border-top:1px solid rgba(250,248,240,.1)}
  footer.ec-footer .ec-fcontact .ec-fbtn-beta{min-height:44px;height:auto;padding:11px 16px;
    width:100%;font-size:13.5px}
  footer.ec-footer .ec-fmail .ec-fact{min-height:44px;height:auto;font-size:13.5px}
  footer.ec-footer .ec-fsocial a{width:44px;height:44px}
  footer.ec-footer .ec-flink{min-height:44px}
}


/* ---------- footer · final density, one owner ----------
   Written after probing the live DOM. The contact column was driving the row
   height: its two address rows resolved to 63px for 50px of content, and the
   social row still reserved space for labels that are now hidden. */

/* 1 · The social anchors are icon-only, so their labels must not occupy width.
   Hidden visually, not semantically — each anchor keeps its aria-label, so
   assistive technology still announces "EPC-Covered on LinkedIn". */
footer.ec-footer .ec-fsocial a > span{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer.ec-footer .ec-fsocial{gap:6px}
footer.ec-footer .ec-fsocial a{width:26px;height:26px;min-height:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden}

/* 2 · The workflow trace, targeted at the class that actually exists. */
footer.ec-footer .ec-fpath{padding:7px 20px 6px}

/* 3 · The address rows carried unaccounted margin: two 25px rows inside a
   63px block. Stated once so the block equals its content. */
footer.ec-footer .ec-fmail{gap:2px}
footer.ec-footer .ec-fmail > .ec-fact{margin:0;min-height:21px;height:21px;padding:0}

/* 4 · Contact no longer sets the row's height. */
footer.ec-footer .ec-fcontact{gap:5px;padding-top:5px}
footer.ec-footer .ec-fbtn-beta{min-height:28px;padding:5px 12px}

/* 5 · Closing band and utility rail, both above target. */
footer.ec-footer .ec-fclose{padding:16px 20px 14px}
footer.ec-footer .ec-footer-bar{padding:11px 20px;min-height:0}

/* Touch targets return at phone widths, where they are actually touched. */
@media(max-width:719px){
  footer.ec-footer .ec-fsocial a{width:44px;height:44px}
  footer.ec-footer .ec-fmail > .ec-fact{min-height:44px;height:auto}
  footer.ec-footer .ec-fbtn-beta{min-height:44px}
}


/* ---------- Follow trigger: the marks it opens, fanned ----------
   Showing the three platform marks removes any need to interpret a glyph, and
   the slight overlap keeps the trigger no wider than a single 15px icon plus a
   few pixels. */
footer.ec-footer + *, .ec-menu-fan{display:inline-flex;align-items:center}
.ec-menu-fan{flex:none;gap:5px;padding-right:2px}
.ec-menu-fan svg{flex:none;opacity:.9;padding:3px;border-radius:5px;box-sizing:content-box;
  background:rgba(250,248,240,.07);box-shadow:inset 0 0 0 1px rgba(250,248,240,.14);
  transition:background var(--ec-motion-fast) var(--ec-ease-control),
             opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-menu-btn:hover .ec-menu-fan svg,
.ec-menu-btn[aria-expanded="true"] .ec-menu-fan svg{opacity:1;background:rgba(250,248,240,.15)}
.ec-menu-btn:hover .ec-menu-fan svg,
.ec-menu-btn[aria-expanded="true"] .ec-menu-fan svg{opacity:1}

/* The sheet holds three links now, so it should sit like a small popover
   rather than a full destination list. */
.ec-shell-sheet{min-width:212px;padding:8px}
.ec-shell-sheet .ec-navpill{min-height:44px}

/* ---------- destinations must survive the sheet losing them ----------
   The sheet used to be their narrow-width fallback. It is social only now, so
   below 1180px they drop their labels instead of disappearing — the accessible
   name stays on the anchor, and title gives pointer users the same words. */
@media(max-width:1179px){
  footer.ec-footer ~ *, .ec-shell-nav{display:flex}
  .ec-shell-nav .ec-navpill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-shell-nav .ec-navpill{padding:9px 11px;gap:0}
}
@media(max-width:859px){
  /* Below this the row genuinely cannot hold them; the footer carries every
     route, and the workspaces stay in the row. */
  .ec-shell-nav{display:none}
}


/* ---------- destinations: a grouped set, not three stray glyphs ---------- */
.ec-shell-nav{gap:2px;padding:3px;border-radius:999px;
  background:rgba(0,0,0,.17);box-shadow:inset 0 1px 0 rgba(0,0,0,.2)}
.ec-shell-nav .ec-navpill{border-radius:999px;padding:9px 12px;min-height:38px}
.ec-shell-nav .ec-navpill:hover{background:rgba(250,248,240,.1)}
.ec-shell-nav .ec-navpill[aria-current="page"]{background:rgba(250,248,240,.11)}
/* Inside a pill the underline reads as a stray rule; a dot is quieter and
   survives the icon-only state where there is no label to underline. */
.ec-shell-nav .ec-navpill[aria-current="page"]::after{
  left:50%;right:auto;bottom:4px;width:4px;height:4px;border-radius:50%;
  transform:translateX(-50%);background:var(--ec-gold)}

/* Icon-only state: keep the group, keep the tile, drop only the word. */
@media(max-width:1179px){
  .ec-shell-nav .ec-navpill{padding:9px;width:38px;justify-content:center}
  .ec-shell-nav .ec-navpill img,.ec-shell-nav .ec-navpill svg{width:17px;height:17px}
}
@media(prefers-reduced-motion:reduce){.ec-shell-nav .ec-navpill{transition:none}}


/* ---------- chapter tag: an outlined marker, not a filing label ----------
   Same object as the hero's audience tag, so a reader meets one section-marker
   pattern down the whole page. The symbol names the kind of work the chapter
   describes; the outline gives it edges a bare uppercase line never had. */
.ec-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 13px 6px 10px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-pill);background:var(--ec-white);
  font:600 10.5px/1.3 var(--ec-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ec-muted);white-space:nowrap}
.ec-tag svg{flex:none;color:var(--ec-glyph)}
/* On the pine chapter the same object reverses rather than becoming a
   different component. */
.ec-tag-rev{border-color:rgba(250,248,240,.22);background:rgba(250,248,240,.05);
  color:rgba(250,248,240,.78)}
.ec-tag-rev svg{color:rgba(250,248,240,.6)}
/* The owner surface is deliberately outside the assessor record, so its marker
   is dashed — the same device the surface itself uses. */
.ec-tag-sep{border-style:dashed;background:transparent}
@media(max-width:519px){
  .ec-tag{white-space:normal;text-align:left}
}


/* ---------- page head: a page names itself before its furniture ----------
   Shared by the working pages so a first-time visitor always meets the product
   name, the page's purpose and its boundary before any control. */
.ec-pagehead{padding:22px 0 20px;margin-bottom:4px;border-bottom:1px solid var(--ec-rule-soft)}
.ec-pagehead .ec-tag{margin-bottom:11px}
.ec-pagehead h1{font:600 clamp(24px,3vw,31px)/1.2 var(--ec-serif);letter-spacing:-.012em;
  color:var(--ec-heading);max-width:26ch;margin:0 0 8px}
.ec-pagehead .ec-lede{font:400 14.5px/1.6 var(--ec-sans);color:var(--ec-muted);max-width:72ch;margin:0}
@media(max-width:719px){.ec-pagehead{padding:16px 0 15px}}


/* ---------- Source Start tag: the act, then the destination pack ----------
   The separator is a real rule rather than a middle dot, so the two halves
   read as "what this page does" and "which record it feeds" rather than as
   one run-on label. The pack's own accent tints the border, which is the
   quietest way to say the page is currently working for that pack. */
.ec-tag[data-pack] img{flex:none;margin-left:1px}
.ec-tag-sep{width:1px;height:12px;background:var(--ec-rule);flex:none;margin:0 2px}
.ec-tag[data-pack="epc"]{border-color:var(--ec-gold-line);background:var(--ec-gold-ground)}
.ec-tag[data-pack="epc"] .ec-tag-sep{background:var(--ec-gold-line)}
.ec-tag[data-pack="retrofit"]{border-color:var(--ec-green-line);background:var(--ec-green-ground)}
.ec-tag[data-pack="retrofit"] .ec-tag-sep{background:var(--ec-green-line)}


/* ---------- product marks respond like sprite symbols ----------
   Assessor Desk and Job Library render their identity as <img> product marks,
   Certificate Portfolio as an <svg><use> sprite symbol. Every hover rule in
   this sheet names `svg` only, so the two <img> marks were inert while the
   sprite one lifted — same control, different response, purely because of the
   element the mark happens to be. Marks answer as one family from here. */
.ec-navpill img,.ec-pack img,.ec-flink img,.ec-modetab img,.ec-btn img{
  transition:transform var(--ec-motion-fast) var(--ec-ease-control),
             opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-navpill:hover img,.ec-navpill:focus-visible img,
.ec-flink:hover img,.ec-flink:focus-visible img{transform:translateY(-1px);opacity:1}
.ec-navpill:active img{transform:translateY(0)}
/* Icon-only destinations: the mark is the whole control, so it carries the
   whole response. */
@media(max-width:1319px){
  .ec-shell-nav a:hover img,.ec-shell-nav a:focus-visible img,
  .ec-shell-nav a:hover svg,.ec-shell-nav a:focus-visible svg{transform:scale(1.08);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .ec-navpill img,.ec-pack img,.ec-flink img,.ec-modetab img,.ec-btn img,
  .ec-shell-nav a img,.ec-shell-nav a svg{transition:none;transform:none!important}
}

/* The Follow trigger's three platform marks brightened but never moved — the
   last inert icons in the shell. They lift as one group, since they name one
   control rather than three. */
.ec-menu-fan svg{transition:transform var(--ec-motion-fast) var(--ec-ease-control),
                            opacity var(--ec-motion-fast) var(--ec-ease-control)}
.ec-menu-btn:hover .ec-menu-fan svg,
.ec-menu-btn:focus-visible .ec-menu-fan svg,
.ec-menu-btn[aria-expanded="true"] .ec-menu-fan svg{transform:translateY(-1px)}
.ec-menu-btn:active .ec-menu-fan svg{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .ec-menu-fan svg{transition:none;transform:none!important}
}


/* ---------- portfolio mode switch: one recessed well, two states ----------
   It read as two loose cards because each segment carried its own border on
   the page ground, so neither looked chosen and the pair did not look like one
   control. They now sit in a well, the way the shell's destination group and
   the workspace pills already do, with the chosen segment lifted onto white. */
.ec-modeswitch-l{display:flex;align-items:center;gap:8px;margin-bottom:7px;
  font:600 10px/1.2 var(--ec-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ec-muted)}
.ec-modeswitch-l::after{content:"";flex:1 1 auto;height:1px;background:var(--ec-rule-soft)}

.ec-modeswitch{display:inline-flex;flex-wrap:wrap;gap:3px;margin-bottom:14px;padding:3px;
  border:1px solid var(--ec-rule);border-radius:var(--ec-r-panel);background:var(--ec-inset)}
.ec-modeseg{display:inline-flex;gap:10px;align-items:center;min-height:44px;padding:8px 14px;cursor:pointer;
  border:1px solid transparent;border-radius:7px;background:transparent;text-align:left;
  transition:background-color var(--ec-motion-fast) var(--ec-ease-control),
             border-color var(--ec-motion-fast) var(--ec-ease-control),
             box-shadow var(--ec-motion-fast) var(--ec-ease-control)}
.ec-modeseg svg{flex:none;margin-top:0;opacity:.6;
  transition:opacity var(--ec-motion-fast) var(--ec-ease-control),
             transform var(--ec-motion-fast) var(--ec-ease-control)}
.ec-modeseg span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ec-modeseg b{font:600 13.5px/1.25 var(--ec-sans);color:var(--ec-muted)}
.ec-modeseg i{font:400 11px/1.3 var(--ec-sans);font-style:normal;color:var(--ec-glyph)}
.ec-modeseg:hover{background:rgba(255,255,255,.55)}
.ec-modeseg:hover svg{opacity:.85;transform:translateY(-1px)}
.ec-modeseg:focus-visible{outline:3px solid var(--ec-pine);outline-offset:2px}

/* Chosen: lifted onto white and tinted by what it holds — gold for the record
   you own, a plain surface for the invented one, so the fictional state can
   never borrow the authority of the real. */
.ec-modeseg[aria-pressed="true"]{background:var(--ec-white);border-color:var(--ec-rule);
  box-shadow:0 1px 2px rgba(23,49,38,.07)}
.ec-modeseg[aria-pressed="true"] b{color:var(--ec-heading)}
.ec-modeseg[aria-pressed="true"] i{color:var(--ec-muted)}
.ec-modeseg[aria-pressed="true"] svg{opacity:1}
.ec-modeseg[data-mode="mine"][aria-pressed="true"]{border-color:var(--ec-gold-line);background:var(--ec-gold-soft)}
.ec-modeseg[data-mode="mine"][aria-pressed="true"] svg{color:var(--ec-gold-ink)}
.ec-modeseg[data-mode="example"][aria-pressed="true"]{border-style:dashed;border-color:var(--ec-rule-strong)}
@media(max-width:519px){
  .ec-modeswitch{display:flex;width:100%}
  .ec-modeseg{flex:1 1 0;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .ec-modeseg,.ec-modeseg svg{transition:none}
  .ec-modeseg:hover svg{transform:none}
}

/* ---------- destination group: never silently crushed ---------- */
.ec-shell-nav{flex:0 0 auto;min-width:max-content}

/* Follow sheds its label before any destination sheds its place. */
@media(max-width:1179px){
  .ec-menu-btn .ec-menu-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-menu-btn{padding-left:10px;padding-right:10px}
}
/* Below this the row cannot hold the destinations at any label length; the
   footer carries all three, as it does for every other route. */
@media(max-width:999px){
  .ec-shell-nav{display:none}
}


/* ================= GATE · the route, drawn ==========================
   Both packs share one component and differ in geometry, which is the
   product's own distinction: EPC converges on a single selected matter;
   Retrofit accumulates against a place and then leaves the record. */
.ec-gate-trail{list-style:none;margin:0 0 12px;padding:0;position:relative}
.ec-gate-trail li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);
  gap:0 11px;align-items:start;padding:7px 0}
/* One spine, interrupted where a limitation qualifies the record. */
.ec-gate-trail li::before{content:"";position:absolute;left:10px;top:19px;bottom:-7px;width:1px;
  background:var(--ec-rule)}
.ec-gate-trail li:last-child::before{display:none}
.ec-gate-trail li[data-role="lim"]::before{
  background:repeating-linear-gradient(var(--ec-coral-line) 0 3px,transparent 3px 7px)}
.ec-trailnode{width:11px;height:11px;margin:4px 0 0 5px;border-radius:50%;
  border:1.5px solid var(--ec-rule-strong);background:var(--ec-white)}
.ec-trailtext{display:flex;flex-direction:column;gap:1px;min-width:0}
.ec-trailtext b{font:600 13px/1.35 var(--ec-sans);color:var(--ec-heading)}
.ec-trailtext i{font:400 11.5px/1.4 var(--ec-sans);font-style:normal;color:var(--ec-muted)}

/* EPC — the rows narrow, and the assessor's gate is the only gold. */
.ec-gate-trail[data-pack="epc"] li{width:var(--w,100%);
  transition:width var(--ec-motion-standard) var(--ec-ease-object)}
.ec-gate-trail[data-pack="epc"] li[data-role="gate"] .ec-trailnode{
  width:13px;height:13px;margin-left:4px;border-color:var(--ec-gold);background:var(--ec-gold-soft)}
.ec-gate-trail[data-pack="epc"] li[data-role="gate"] b{color:var(--ec-gold-ink)}
.ec-gate-trail[data-pack="epc"] li[data-role="gate"]::before{background:var(--ec-gold-line)}
/* The recorded reason closes the route: a square, not a dot. */
.ec-gate-trail[data-pack="epc"] li[data-role="own"] .ec-trailnode{
  border-radius:2px;border-color:var(--ec-pine);background:var(--ec-cream)}

/* Retrofit — the place anchors it, evidence accumulates, then it exits. */
.ec-gate-trail[data-pack="retrofit"] li[data-role="place"] .ec-trailnode{
  border-radius:3px 3px 3px 0;border-color:var(--ec-green);background:var(--ec-green-soft)}
.ec-gate-trail[data-pack="retrofit"] li[data-role="acc"] .ec-trailnode{
  border-color:var(--ec-green-line);background:var(--ec-green-ground)}
/* Accumulation reads as spread: each step steps outward, the opposite of EPC. */
.ec-gate-trail[data-pack="retrofit"] li[data-role="acc"]:nth-of-type(3){padding-left:9px}
.ec-gate-trail[data-pack="retrofit"] li[data-role="acc"]:nth-of-type(3)::before{left:19px}
.ec-gate-trail[data-pack="retrofit"] li[data-role="lim"] .ec-trailnode{
  border-color:var(--ec-coral-line);background:var(--ec-coral-ground)}
.ec-gate-trail[data-pack="retrofit"] li[data-role="lim"] b{color:var(--ec-coral-ink)}
/* The handover leaves: an arrow, not another node on the spine. */
.ec-gate-trail[data-pack="retrofit"] li[data-role="out"] .ec-trailnode{
  width:0;height:0;margin:5px 0 0 7px;border-radius:0;background:none;
  border:5px solid transparent;border-left:8px solid var(--ec-green)}
.ec-gate-trail[data-pack="retrofit"] li[data-role="out"] b{color:var(--ec-green-ink)}
@media(prefers-reduced-motion:reduce){.ec-gate-trail[data-pack="epc"] li{transition:none}}

/* Source Start, seen from inside Source Start: a statement of where you are,
   not a button back to here. */
.ec-gate-here{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 13px;
  border:1px dashed var(--ec-rule-strong);border-radius:var(--ec-r-control);
  background:var(--ec-cream-raised);font-size:12.5px;line-height:1.55;color:var(--ec-muted);max-width:56ch}
.ec-gate-here svg{flex:none;margin-top:1px;color:var(--ec-glyph)}

/* A reference-only plate reserved a full 4:3 image well — 182×137 of empty
   ground per file — to say a copy was NOT kept. Three of them stacked read as
   a wall of dead space. The negative state collapses to a line: the caption
   below still carries the file's identity, so nothing is lost. */
.ec-evplate .ec-plate-img.ec-plate-none{aspect-ratio:auto;min-height:0;padding:9px 11px;
  flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;text-align:left;
  background:var(--ec-cream);border-bottom:1px dashed var(--ec-rule)}
.ec-evplate .ec-plate-none b{font:600 11px/1.3 var(--ec-sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ec-muted);white-space:nowrap}
.ec-evplate .ec-plate-none span{font:400 11px/1.4 var(--ec-sans);color:var(--ec-glyph);
  text-align:left;padding:0}

/* Selecting an item scrolled its heading under the job strip. */
.ec-object{scroll-margin-top:96px}