: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)}
/* Vertical padding only: the horizontal padding belongs to .wrap, and the
   shorthand used to overwrite it (this rule out-specifies .wrap), so the
   brand sat flush against the left edge of a phone screen and the hub nav's
   full-bleed negative margins overhung the viewport by 16px on every page. */
header.site .bar{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap;
  padding-top:7px;padding-bottom:7px}
.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}
  /* The chip has the row to itself once the nav wraps below it, so the name and
     role no longer need to be clipped to a third of the screen — a board member
     was reading "BOARD MEMBER · …" where the second role should be. */
  .userchip .who b,.userchip .who i{max-width:52vw}
}
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)}
/* A grid track is min-width:auto by default, so one unshrinkable child — a card
   holding a 700px-min-width table — stretched the track and with it the whole
   page: /applications and /treasury scrolled 370px sideways on a phone. With
   min-width:0 the track holds its share and the table scrolls inside its own
   card, which is what .tablewrap is for. */
.g2>*,.g3>*,.g4>*,.hubgrid>*{min-width:0}
@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}}
/* Jump links to the sections of a long record (application detail, athlete
   record). These used to reuse nav.tabs, which is styled for the black
   masthead: light-grey-on-warm-white at roughly 2:1 contrast, plus the header's
   flex:1 0 100% and full-bleed margins applied inside a card-width column.
   Same pill language as the sub-nav, on ground it was designed for. */
nav.sections{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
nav.sections a{padding:8px 13px;border-radius:99px;border:1px solid var(--border);background:var(--surface);
  text-decoration:none;color:var(--accent-text);white-space:nowrap;transition:.15s;
  font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}
nav.sections a:hover,nav.sections a:focus-visible{border-color:var(--gold);background:var(--gold-pale)}
/* Nine to eleven jump links wrap to four rows on a phone, pushing the record
   itself below the fold. One swipeable row instead — the same shape the hub
   sub-nav takes at this width. */
@media(max-width:640px){
  nav.sections{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;
    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}

/* ---- filter panel above a list (filterPanel() in ui/layout.ts) ----
   Open on a desktop with no disclosure showing at all, so the card reads as it
   always has; on a phone the summary becomes the tap target that opens it. */
details.filters{margin-top:14px}
details.filters>summary{list-style:none;cursor:pointer;display:none;align-items:center;gap:10px;
  font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-text)}
details.filters>summary::-webkit-details-marker{display:none}
details.filters>summary::after{content:"";width:7px;height:7px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
details.filters[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.filters[open]>summary{margin-bottom:6px}
details.filters>summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
@media(max-width:640px){details.filters>summary{display:flex}}

/* ---- 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)}
/* ---- key/value tables ----
   A row that opens with a <th> is a row HEADER, not a column header, so it gets
   the pale label treatment and no 700px floor — whether or not the call site
   remembered .kv. th alone carries the black column-header look, which on a
   narrow screen filled the viewport with labels and pushed every value out of
   reach; matching on shape rather than on a modifier means no page can lose its
   data to a forgotten class again. */
.tablewrap.kv table,.tablewrap:has(tbody>tr>th:first-child) table{min-width:0}
.tablewrap.kv th,.tablewrap tbody>tr>th:first-child{background:var(--gold-pale);color:var(--accent-text);
  width:34%;border-top:1px solid var(--border);vertical-align:top;text-align:left}
.tablewrap.kv tr:first-child th,.tablewrap.kv tr:first-child td,
.tablewrap tbody>tr:first-child>th:first-child{border-top:0}
/* Phone fallback: each row becomes a stacked card labelled from data-label. */
@media(max-width:640px){
  /* Label over value, full width, so the value is never off to the right. */
  :is(.tablewrap.kv,.tablewrap:has(tbody>tr>th:first-child)) :is(table,tbody,tr,th,td){display:block;width:auto}
  :is(.tablewrap.kv,.tablewrap:has(tbody>tr>th:first-child)) th{background:transparent;color:var(--muted);
    padding:10px 14px 0;border-top:1px solid var(--border);white-space:normal;
    font-size:10.5px;letter-spacing:1.1px}
  :is(.tablewrap.kv,.tablewrap:has(tbody>tr>th:first-child)) td{border-top:0;padding:2px 14px 10px}
  :is(.tablewrap.kv,.tablewrap:has(tbody>tr>th:first-child)) tr:first-child th{border-top:0}
  /* Two or three columns fit a phone if we let them, so drop the desktop 700px
     floor and let the cells wrap — a consent list read "Consent | Status" with
     the status half off-screen purely because every table carries that floor.
     Four columns or more genuinely need the scroller or the card fallback. */
  .tablewrap:not(.cards):has(thead):not(:has(thead th:nth-child(4))) table{min-width:0}
  .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;
    flex-wrap:wrap;overflow-wrap:anywhere;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}
  /* An action / icon column has no name to print — give the cell the full row
     instead of a 38% gutter of empty space. */
  .tablewrap.cards td:not([data-label]),.tablewrap.cards td[data-label=""]{display:block}
  .tablewrap.cards td:not([data-label])::before,.tablewrap.cards td[data-label=""]::before{content:none}
}

/* ---- 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)}

/* ---- floating preview pills (previewbar.ts: the enter chip + the minimized
   toolbar handle) ----
   Both are position:fixed over the page content on every screen an admin with
   cms:edit sees, including a phone mid-scroll. Their label+dot footprint was
   wide enough to sit across a whole field row on an application record — this
   is not hypothetical, it was seen live on 360eliteperformance.org. Below
   640px the label disappears and the pill becomes a plain 44px circle (the
   standard minimum tap target), so on a phone it only ever covers a corner. */
.pv360fabwrap{position:fixed;bottom:14px;z-index:9998;margin:0}
.pv360fabwrap--right{right:14px}
.pv360fab{display:flex;align-items:center;gap:7px;border:1px solid #3d3d3d;border-radius:99px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);padding:9px 16px;cursor:pointer;
  font:800 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:1px}
.pv360fab--dark{background:#1a1a1a;color:#e8b64c}
.pv360fab--gold{background:#e8b64c;color:#141005;border-color:#e8b64c}
.pv360fab .dot{width:7px;height:7px;border-radius:99px;background:currentColor;display:inline-block;flex:none}
.pv360handle{position:fixed;left:14px;bottom:14px;z-index:9999}
@media(max-width:640px){
  .pv360fab{padding:0;width:44px;height:44px;justify-content:center;gap:0}
  .pv360fab .label{display:none}
}

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