:root{
  --bg:#faf9f5;--surface:#ffffff;--paper:#faf9f5;--panel:#ffffff;
  --ink:#111214;--ink-2:#101114;--text:#111214;
  --mut:#6b6f76;--muted:#6b6f76;
  --line:#e9e4d6;--border:#e9e4d6;
  --gold:#c69a2e;--gold-deep:#7a5e1b;--gold-pale:#f7efdc;--gold-hi:#e3b84f;
  --accent:#c69a2e;--accent-text:#7a5e1b;
  --green:#1e7c4a;--red:#a33d2c;--blue:#2e5f8a;
  --header-bg:#101114;--header-text:#f5f3ec;--header-mut:#a7abb5;
  --shadow:0 1px 2px rgba(16,17,20,.04),0 10px 28px -18px rgba(16,17,20,.18);
  --shadow-lift:0 2px 5px rgba(16,17,20,.06),0 18px 38px -20px rgba(16,17,20,.28);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-text)}
h1,h2,h3{font-weight:800;text-transform:uppercase;letter-spacing:.3px;line-height:1.15}
h1{font-size:clamp(24px,4vw,34px)}h2{font-size:clamp(18px,3vw,24px)}h3{font-size:15px}
.kicker{font-size:12.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--accent-text)}
.rule{width:58px;height:4px;background:var(--gold);margin:14px 0 20px}
.mut{color:var(--muted)}.money{font-variant-numeric:tabular-nums}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap.wide{max-width:1280px}
@media(max-width:640px){.wrap{padding:0 16px}}

/* ---- command header: solid black bar, 3px gold rule ---- */
header.site{position:sticky;top:0;z-index:50;height:auto;min-height:58px;
  background:var(--header-bg);border-bottom:3px solid var(--gold)}
header.site .bar{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap;padding:7px 0}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  font-size:17px;color:var(--header-text);text-decoration:none;white-space:nowrap}
.brand .brandmark{width:34px;height:34px;flex:none}
.brand .brandwm span{color:var(--gold-hi)}
header.site .mut{color:var(--header-mut)}
header.site .btn-outline{color:var(--header-text);border-color:var(--header-mut)}
header.site .btn-outline:hover{background:var(--header-text);color:var(--ink-2)}
/* The hub nav gets its own row. Squeezed in beside the brand, the Test Hub /
   Customer Site buttons and the user chip it had ~260px to hold eleven hubs, so
   it clipped mid-word — "…TREASURY B" — with Board, Reports, Content, Forms,
   Audit and Admin scrolled out of sight behind a scrollbar desktop browsers do
   not draw. Eleven hubs are never going to fit on one line next to all that, so
   the nav wraps to as many rows as it needs and every hub stays visible.
   Narrow screens keep the horizontal scroller (see the 640px block) — that is a
   familiar phone pattern and the row is full-width there anyway. */
nav.tabs{display:flex;flex-wrap:wrap;gap:4px;order:3;flex:1 0 100%;padding-top:2px;scrollbar-width:thin}
nav.tabs a{padding:9px 12px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;text-decoration:none;color:var(--header-mut);white-space:nowrap;transition:.15s}
nav.tabs a.on{background:rgba(198,154,46,.18);color:#f6d489}
nav.tabs a:hover{color:var(--header-text)}
/* Pushed right so the top row reads brand … | … account. The hub nav used to
   do this by absorbing the free space between them; now that it sits on its own
   row, without this the brand, both preview buttons and the user chip huddle at
   the left with the rest of the bar empty. */
.previewtools{display:flex;align-items:center;gap:8px;margin-left:auto}
.userchip{display:flex;align-items:center;gap:10px;margin:0}
/* When the preview buttons are hidden the chip has to take over the job. */
@media(max-width:900px){.previewtools{display:none}.userchip{margin-left:auto}}
.userchip .who{line-height:1.2;text-align:right;min-width:0;text-decoration:none}
.userchip .who b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.4px;color:var(--header-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.userchip .who i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--header-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
@media(max-width:640px){
  nav.tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px}
  nav.tabs a{padding:11px 12px}
  .userchip{margin-left:auto}
}
main{padding:26px 0 60px}

/* ---- grids ---- */
.g2,.g3,.g4{display:grid;gap:14px;margin:14px 0}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---- cards + KPIs ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;
  box-shadow:var(--shadow);transition:border-color .15s}
.card:hover{border-color:color-mix(in srgb,var(--gold) 40%,var(--border))}
.card.goldtop{border-top:4px solid var(--gold)}
.kpi .num{font-size:28px;font-weight:800;color:var(--accent-text);line-height:1.2}
.kpi .lbl{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi.good .num{color:var(--green)}.kpi.warn .num{color:var(--accent-text)}.kpi.bad .num{color:var(--red)}
.kpi a{text-decoration:none}

/* ---- hub card (command-center tile) ---- */
.hubgrid{display:grid;gap:16px;margin:18px 0;grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.hubgrid{grid-template-columns:1fr}}
@media(min-width:1440px){.hubgrid{grid-template-columns:repeat(3,1fr)}}
a.hubcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow);text-decoration:none;color:var(--text);overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s}
a.hubcard:hover,a.hubcard:focus-visible{border-color:var(--gold);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
/* gold corner-bracket, revealed on hover */
.hubcard__bracket{position:absolute;top:13px;right:13px;width:13px;height:13px;border-top:2px solid var(--gold);
  border-right:2px solid var(--gold);border-top-right-radius:4px;opacity:0;transition:opacity .18s;pointer-events:none;z-index:1}
a.hubcard:hover .hubcard__bracket,a.hubcard:focus-visible .hubcard__bracket{opacity:1}
/* EP4 Command card anatomy: accent chip on its own row, name, purpose line,
   then a baseline row with the live metric left and OPEN right. */
.hubcard .hubbody{display:block;padding:26px 26px 20px}
.hubcard .tile{width:46px;height:46px;border-radius:12px;background:var(--gold-pale);
  border:1px solid rgba(198,154,46,.45);display:flex;align-items:center;justify-content:center;
  font-size:21px;line-height:1;color:var(--accent-text)}
/* per-hub accent chip: white line-icon on a jewel fill */
.hubcard .tile--accent{border:0;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hubcard .tile--accent svg{width:23px;height:23px;display:block}
.hubcard h3{margin:19px 0 0;font-size:19px;font-weight:800;letter-spacing:.2px;text-transform:none}
.hubcard .desc{display:block;margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
.hubcard div.attn{display:block;margin-top:14px}
.hubcard .open{margin-top:auto;padding:16px 26px 22px;display:flex;gap:12px;
  align-items:baseline;justify-content:space-between;
  font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-text)}
.hubcard .open .metric{font-variant-numeric:tabular-nums;min-width:0}
.hubcard .open .go{white-space:nowrap;margin-left:auto;letter-spacing:2px;transition:color .18s}
.hubcard .open .go i{font-style:normal;display:inline-block;transition:transform .18s}
a.hubcard:hover .open .go i{transform:translateX(3px)}

/* ---- hub shell: breadcrumb, sub-nav, action center, empty state ---- */
nav.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 8px;
  font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
nav.crumbs a{color:var(--accent-text);text-decoration:none}
nav.crumbs a:hover{text-decoration:underline}
nav.crumbs .sep{color:var(--gold);font-weight:700}
nav.subnav{display:flex;gap:8px;overflow-x:auto;margin:14px 0 18px;padding-bottom:4px;scrollbar-width:thin}
nav.subnav a{white-space:nowrap;padding:9px 14px;border-radius:99px;border:1px solid var(--border);
  background:var(--surface);text-decoration:none;color:var(--muted);transition:.15s;
  font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
nav.subnav a:hover{border-color:var(--gold);color:var(--text)}
nav.subnav a.on{background:var(--ink-2);border-color:var(--ink-2);color:var(--gold-hi)}
@media(max-width:640px){nav.subnav{margin-left:-16px;margin-right:-16px;padding:0 16px 6px}}
.actioncenter{background:rgba(163,61,44,.05);border:1px solid rgba(163,61,44,.32);border-radius:14px;
  padding:16px 18px;margin:16px 0}
.actioncenter h2{margin:0;font-size:13px;letter-spacing:1.8px;color:var(--red)}
.actioncenter .lead{margin:4px 0 8px;font-size:12.5px;color:var(--muted)}
.actioncenter ul{list-style:none;margin:0;padding:0}
.actioncenter li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid rgba(163,61,44,.18)}
.actioncenter li:first-child{border-top:0}
.actioncenter .what{font-size:13.5px;min-width:0}
.actioncenter .what small{display:block;color:var(--muted);font-size:12px}
.actioncenter a.go{white-space:nowrap;text-decoration:none;color:var(--accent-text);
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.actioncenter a.go:hover{text-decoration:underline}
.emptystate{text-align:center;padding:32px 20px;color:var(--muted)}
.emptystate .ic{font-size:30px;line-height:1;margin-bottom:10px}
.emptystate p{margin:0 0 14px;font-size:14px}

/* ---- pills, bars, buttons ---- */
/* Child combinator, not descendant: header.site .bar is the masthead flex row,
   and a bare ".bar i" painted the meter fill behind the user chip's role line. */
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:99px}
main .bar,.card .bar{height:9px;background:color-mix(in srgb,var(--border) 60%,transparent);
  border-radius:99px;overflow:hidden;margin-top:8px}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.p-green{background:rgba(79,191,130,.14);color:var(--green);border:1px solid rgba(79,191,130,.4)}
.p-gold{background:var(--gold-pale);color:var(--accent-text);border:1px solid rgba(198,154,46,.45)}
.p-red{background:rgba(224,106,90,.12);color:var(--red);border:1px solid rgba(224,106,90,.4)}
.p-blue{background:rgba(90,162,224,.12);color:var(--blue);border:1px solid rgba(90,162,224,.4)}
.p-mut{background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--muted);border:1px solid color-mix(in srgb,var(--muted) 35%,transparent)}
.pill.attn{font-weight:800;letter-spacing:.8px;text-transform:uppercase;font-size:10.5px}
.btn{display:inline-block;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px;
  padding:11px 20px;border-radius:8px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.18s}
.btn-gold{background:var(--gold);color:#141005;border-color:var(--gold);box-shadow:0 4px 14px -6px rgba(198,154,46,.55)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--text)}
.btn-outline:hover{background:var(--text);color:var(--bg)}
.btn-danger{background:transparent;color:var(--red);border-color:var(--red)}
.btn.sm{padding:7px 14px;font-size:12px}
@media(max-width:640px){.btn.sm{padding:9px 14px}}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:3px solid var(--accent-text);outline-offset:2px}

/* ---- forms ---- */
label{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:12px 0 5px}
input,select,textarea{width:100%;border-radius:8px;padding:11px 13px;font-size:15px;font-family:inherit;
  background:var(--surface);border:1px solid var(--border);color:var(--text);transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--border))}
summary{color:var(--accent-text);font-size:12.5px;cursor:pointer}
summary:hover{color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold);display:inline;vertical-align:middle}
.chkrow{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:8px;margin:8px 0}
.chkrow label{margin:0;text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;color:var(--text)}

/* ---- form builder: repeatable sections + flagged corrections ---- */
/* A repeatable section renders one fieldset per entry ("Guardian 1", "Guardian
   2"). A question flagged by a correction request gets a red rail so the
   respondent's eye lands on exactly what staff asked about. */
fieldset.repeat{border:1px solid var(--border);border-radius:10px;padding:6px 14px 14px;margin:14px 0}
fieldset.repeat>legend{padding:0 8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text)}
.qblock.flagged{border-left:3px solid var(--red);padding-left:12px;background:rgba(224,106,90,.05);border-radius:0 8px 8px 0}
.qblock[hidden]{display:none}
details.logic>summary{font-size:13px}

/* ---- tables ---- */
.tablewrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow-x:auto;margin:14px 0;
  box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:700px;font-size:13.5px}
th{background:var(--ink-2);color:var(--gold-hi);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  text-align:left;padding:11px 14px}
td{padding:11px 14px;border-top:1px solid var(--border);vertical-align:top}
td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--gold-pale)}
.tablewrap.kv table{min-width:0}
.tablewrap.kv th{background:var(--gold-pale);color:var(--accent-text);width:34%;white-space:nowrap;
  border-top:1px solid var(--border)}
.tablewrap.kv tr:first-child th,.tablewrap.kv tr:first-child td{border-top:0}
/* Phone fallback: each row becomes a stacked card labelled from data-label. */
@media(max-width:640px){
  .tablewrap.cards{background:transparent;border:0;box-shadow:none;overflow-x:visible}
  .tablewrap.cards table{min-width:0;display:block}
  .tablewrap.cards thead{display:none}
  .tablewrap.cards tbody{display:block}
  .tablewrap.cards tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);margin:0 0 10px;padding:2px 0}
  .tablewrap.cards tbody tr:hover{background:var(--surface)}
  .tablewrap.cards td{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
    border-top:1px solid var(--border);padding:9px 14px;text-align:left}
  .tablewrap.cards tr td:first-child{border-top:0;font-weight:700}
  .tablewrap.cards td::before{content:attr(data-label);flex:0 0 38%;color:var(--muted);
    font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;line-height:1.7}
  .tablewrap.kv table,.tablewrap.kv tbody,.tablewrap.kv tr,.tablewrap.kv th,.tablewrap.kv td{display:block;width:auto}
  .tablewrap.kv th{background:transparent;color:var(--muted);padding:10px 14px 0;border-top:1px solid var(--border)}
  .tablewrap.kv td{border-top:0;padding:2px 14px 10px}
  .tablewrap.kv tr:first-child th{border-top:0}
}

/* ---- notes, banners, timeline, flashes, footer ---- */
.note{background:var(--gold-pale);border:1px solid rgba(198,154,46,.4);border-radius:10px;padding:12px 14px;font-size:13.5px;margin:12px 0}
.note.danger{background:rgba(224,106,90,.08);border-color:rgba(224,106,90,.4)}
.banner-staging{background:var(--red);color:#fff;text-align:center;font-size:12px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;padding:6px 10px}
.timeline{list-style:none;margin:14px 0;padding:0}
.timeline li{position:relative;padding:10px 0 10px 22px;border-left:3px solid var(--border)}
.timeline li.done{border-left-color:var(--green)}
.timeline li.now{border-left-color:var(--gold)}
.timeline li::before{content:"\25C6";position:absolute;left:-8px;top:12px;font-size:11px;color:var(--muted);background:var(--bg)}
.timeline li.done::before{color:var(--green)}
.timeline li.now::before{color:var(--gold)}
ul.diamond{list-style:none;padding-left:0}
ul.diamond li{padding-left:20px;position:relative}
ul.diamond li::before{content:"\25C6";position:absolute;left:0;color:var(--accent-text);font-size:10px;top:5px}
.flash{border-radius:10px;padding:12px 14px;margin:12px 0;font-size:14px}
.flash.ok{background:rgba(30,124,74,.1);border:1px solid rgba(30,124,74,.35);color:var(--green)}
.flash.err{background:rgba(163,61,44,.08);border:1px solid rgba(163,61,44,.35);color:var(--red)}
footer.site{border-top:3px solid var(--gold);padding:26px 0;margin-top:40px;font-size:13px;color:var(--muted)}
footer.site .motto{color:var(--accent-text);font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#141005;padding:10px 16px;z-index:100;font-weight:800}
.skip:focus{left:12px;top:12px}

/* ---- command-center masthead: kicker, name, rule, lead, action row ---- */
.cchero{margin:2px 0 4px}
.cchero .lead{margin:0;max-width:52ch;color:var(--muted);font-size:15px}
.ccactions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
@media(max-width:640px){.ccactions .btn{flex:1 1 100%;text-align:center}}

/* ===========================================================================
   EP4 COMMAND SKIN  —  page({ skin: 'ep4' })
   ---------------------------------------------------------------------------
   The Command Center is the staff front door, and staff reach it from the same
   desk as EP4 Command (dashboard.ep4datacenter.com). It borrows that board's
   CARD SYSTEM — accent chip on its own row, sentence-case hub names, flat
   panels with no footer strip, a gold metric/OPEN baseline, and the two-weight
   gold button set — and renders it on the platform's own white ground rather
   than EP4's black one.

   That means this skin carries no palette of its own: it inherits :root, so
   the contrast rule at the top of this file still holds (gold fills carry
   near-black text, gold TEXT is always --accent-text). What it does change is
   scale and rhythm — a bigger masthead and roomier cards than a hub interior
   wants. Scoped to [data-skin="ep4"]; no other page picks any of it up.
   =========================================================================== */

/* Masthead: oversized heading over a short gold rule, EP4's hero proportions. */
[data-skin="ep4"] .cchero h1{font-size:clamp(34px,5.6vw,54px);letter-spacing:-.4px;line-height:1.05}
[data-skin="ep4"] .cchero .rule{width:64px;height:3px;margin:16px 0 18px}

/* Hub cards: roomier than the base tile, with a warm hover wash. */
[data-skin="ep4"] .hubgrid{gap:20px}
[data-skin="ep4"] a.hubcard{border-radius:16px}
[data-skin="ep4"] a.hubcard:hover,[data-skin="ep4"] a.hubcard:focus-visible{background:#fefdfa}
[data-skin="ep4"] .hubcard .hubbody{padding:28px 28px 4px}
[data-skin="ep4"] .hubcard .tile{width:44px;height:44px;border-radius:11px}
[data-skin="ep4"] .hubcard h3{margin:22px 0 0;font-size:21px;letter-spacing:-.1px}
[data-skin="ep4"] .hubcard .open{padding:22px 28px 26px}
[data-skin="ep4"] .hubcard div.attn{margin-top:16px}
[data-skin="ep4"] .actioncenter{border-radius:16px;padding:20px 22px}

/* EP4's button pair, scoped to the hero row so the black masthead's own
   outline buttons keep their light-on-black treatment. */
.ccactions .btn{border-width:1px;border-radius:6px;font-size:12px;letter-spacing:1.6px;padding:12px 20px}
.ccactions .btn-gold{box-shadow:none}
.ccactions .btn-gold:hover{transform:none}
.ccactions .btn-outline{background:transparent;color:var(--accent-text);border-color:rgba(198,154,46,.7)}
.ccactions .btn-outline:hover{background:var(--gold-pale);color:var(--accent-text);border-color:var(--gold)}

@media print{header.site,.banner-staging,.btn,.no-print,.noprint,nav.subnav,nav.crumbs{display:none}}