/* ===== Performance ===== */
  #viewPerf{display:none;flex-direction:column;min-height:0}
  .pf-subnav{display:flex;align-items:center;gap:2px;padding:8px 18px;border-bottom:1px solid var(--line);background:var(--panel-2);flex:0 0 auto}
  .pf-sb{font-size:12px;font-weight:600;color:var(--ink-dim);padding:6px 14px;border-radius:7px;cursor:pointer;user-select:none;border:1px solid transparent}
  .pf-sb.on{background:var(--panel);border-color:var(--line);color:var(--brand)}
  .pf-subnav .sp{flex:1}
  .pf-subnav .lv{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-faint);font-family:var(--mono)}
  .pf-subnav .lv i{width:6px;height:6px;border-radius:50%;background:var(--avail);animation:pulse 1.5s infinite}
  #perfBoard{flex:1 1 auto;overflow-y:auto;padding:14px 18px;min-height:0;display:block}
  #viewPerf{flex:1 1 auto}
  .pf-dl{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-faint)}
  .pf-date{background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--ink);font-size:11.5px;padding:5px 8px;font-family:var(--sans)}
  .pf-h{display:flex;align-items:center;gap:9px;margin:18px 0 9px}
  .pf-h:first-child{margin-top:0}
  .pf-h h3{margin:0;font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
  .pf-h .ln{flex:1;height:1px;background:var(--line)}
  .pf-h .tag{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint)}
  .pf-top{display:flex;flex-wrap:wrap;gap:11px}
  .pf-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;min-height:0}
  .pf-card .ct{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint)}
  .pf-card .cs{font-size:9.5px;color:var(--ink-faint);opacity:.75}
  .pf-big{font-family:var(--mono);font-size:26px;font-weight:700;margin-top:5px;line-height:1}
  .pf-big.g{color:var(--pass)} .pf-big.o{color:var(--brand)}
  .pf-dn{display:flex;align-items:center;gap:13px;margin-top:6px}
  .pf-leg{flex:1;min-width:0}
  .pf-lr{display:flex;align-items:center;gap:7px;font-size:10.5px;padding:2px 0}
  .pf-lr i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
  .pf-lr .n{color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-lr .v{margin-left:auto;font-family:var(--mono);color:var(--ink);white-space:nowrap}
  .pf-lr .p{font-family:var(--mono);color:var(--ink-faint);font-size:9.5px;width:32px;text-align:right}
  .pf-bar{height:5px;border-radius:5px;background:#232c3a;overflow:hidden;margin-top:7px}
  .pf-bar i{display:block;height:100%;background:var(--brand)}
  .pf-bar.g i{background:var(--pass)}
  .pf-goal{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);margin-top:4px}
  .pf-rows{margin-top:7px}
  .pf-row2{display:flex;align-items:center;gap:8px;font-size:11px;padding:3px 0;border-bottom:1px solid var(--line-soft)}
  .pf-row2:last-child{border-bottom:none}
  .pf-row2 .n{color:var(--ink-dim)} .pf-row2 .v{margin-left:auto;font-family:var(--mono);color:var(--ink)}
  .pf-row2 .v.dim{color:var(--ink-faint)}
  /* funnel */
  .pf-funnel{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
  .pf-fs{padding:12px 14px;position:relative;border-right:1px solid var(--line)}
  .pf-fs .k{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint)}
  .pf-fs .v{font-family:var(--mono);font-size:24px;font-weight:700;margin-top:3px;line-height:1}
  .pf-fs .cv{font-family:var(--mono);font-size:10px;color:var(--brand);margin-top:5px}
  .pf-fs .cv.dim{color:var(--ink-faint)}
  .pf-fend{padding:12px 16px;background:var(--panel-2);display:flex;flex-direction:column;justify-content:center;min-width:118px}
  .pf-fend .k{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint)}
  .pf-fend .v{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--pass);margin-top:3px;line-height:1}
  /* tables */
  .pf-tw{border:1px solid var(--line);border-radius:11px;overflow:auto}
  .pf-t{width:100%;border-collapse:collapse;font-size:11.5px;min-width:940px}
  .pf-t th{text-align:right;font-size:9px;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-faint);padding:8px 9px;background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
  .pf-t th:first-child,.pf-t th.l{text-align:left}
  .pf-t td{padding:7px 9px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap;background:var(--panel)}
  .pf-t td:first-child,.pf-t td.l{text-align:left}
  .pf-t tr:last-child td{border-bottom:none}
  /* ROW HOVER (owner 2026-07-29: "when the mouse hovers over a row and the
     highlighter is black it should be some grey of the white, and also it
     doesn't highlight the whole row").
     Two bugs, one rule. The colour was hard-coded #141a26 — a near-black navy
     left over from the dark theme, which reads as a black bar on the white
     board. And the row never highlighted end to end: every td sets its own
     background:var(--panel), so the tr-level :hover rules below paint
     UNDERNEATH the cells and only show through the gaps. So the hover colour
     has to land on the CELLS, from a theme variable. */
  .pf-t tbody tr:hover td{background:var(--row-hover)}
  .pf-t td.nm{font-family:var(--sans);font-weight:600}
  .pf-t td.bad{color:var(--fail);font-weight:700} .pf-t td.good{color:var(--pass)} .pf-t td.warn{color:var(--brand)}
  .pf-t td.dim{color:var(--ink-faint)}
  /* checkpoint tables (QC cards): wrap so they fit any card width — never force a
     horizontal scroll (owner 2026-07-22). Full-width, no 940px floor. */
  .pf-t.chk{min-width:0}
  .pf-t.chk td,.pf-t.chk th{white-space:normal;word-break:break-word}
  .pf-t.chk td.nm{max-width:none}
  .pf-t tfoot td{background:var(--panel-2);border-top:1px solid var(--line);font-weight:700;border-bottom:none}
  .pf-t .rk{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;font-size:9.5px;font-weight:800;background:#232c3a;color:var(--ink-dim);margin-right:7px}
  .pf-t .rk.t1{background:var(--brand);color:#1a1205} .pf-t .rk.t2{background:#3A4557;color:var(--ink)} .pf-t .rk.t3{background:#2C3444;color:var(--ink-dim)}
  .pf-flag{display:inline-block;font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:4px;background:rgba(239,68,68,.14);color:#F3B4B4;margin-left:3px}
  .pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .pf-cols3{display:flex;flex-wrap:wrap;gap:11px}
  /* ticker */
  .pf-tick{border:1px solid var(--line);border-radius:11px;background:var(--panel);max-height:186px;overflow-y:auto}
  .pf-te{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-soft)} /* no entrance anim — renderPerf rebuilds this list every 2.6s tick */
  .pf-te:last-child{border-bottom:none}
  .pf-te .ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#0A0D13;background:var(--pass)}
  .pf-te .nm{font-size:12px;font-weight:700}
  .pf-te .sb{font-size:10px;color:var(--ink-faint);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .pf-te .rev{text-align:right}
  .pf-te .rev .v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--pass)}
  .pf-te .rev .k{font-size:9px;color:var(--ink-faint)}
  .pf-pg{font-size:8.5px;font-weight:700;padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
  .pf-pg.affiliate{color:#CBBEFB;background:rgba(167,139,250,.14)}
  .pf-pg.inhouse{color:#8BE9B2;background:rgba(34,197,94,.12)}
  .pf-pg.finance{color:#F5C97A;background:rgba(245,166,35,.13)}
  .pf-exc{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:12px 13px}
  .pf-exc h4{margin:0 0 8px;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;gap:7px}
  .pf-exc h4 .c{font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:5px;background:rgba(239,68,68,.14);color:#F3B4B4}
  .pf-exc h4 .c.ok{background:rgba(34,197,94,.12);color:#8BE9B2}
  .pf-el{font-size:11px;padding:5px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:8px;align-items:baseline}
  .pf-el:last-child{border-bottom:none}
  .pf-el .who{font-weight:600} .pf-el .mt{margin-left:auto;font-family:var(--mono);color:var(--fail)}
  .pf-el .cl{font-size:10px;color:var(--ink-faint)}
  .pf-note{font-size:10.5px;color:var(--ink-faint);margin-top:9px;line-height:1.55}
  .pf-note b{color:var(--ink-dim)}
  @media (max-width:1400px){.pf-top>*{flex:1 1 46%}.pf-cols,.pf-cols3{grid-template-columns:1fr}.pf-funnel{grid-template-columns:1fr 1fr}}
  .sc-badge{font-family:var(--mono);font-weight:700;font-size:11px;padding:2px 7px;border-radius:5px}
  .fcall .haley-strip .ht{font-size:11px;line-height:1.5}
  .nv{flex:1 1 auto;display:none;flex-direction:column;min-height:0;overflow-y:auto;padding:14px 18px}
  .nv > *{flex-shrink:0}   /* never let a table get squeezed — the container scrolls instead */
  #perfBoard .pf-t tbody tr{cursor:pointer}
  /* tr-level hover retired — it painted under the td backgrounds and never
     showed. The one live rule is .pf-t tbody tr:hover td above. */
  .sc-sum > div:hover{background:rgba(245,166,35,.08);border-radius:5px}
  .dept-head:hover .name{color:var(--brand)}
  .rep:hover{background:rgba(245,166,35,.06)}
  .wire:hover{background:rgba(245,166,35,.05)}
  .kpi:hover{background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.35)}
  .pf-card{cursor:pointer}
  .pf-card:hover{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.04)}
  /* (same — retired; see .pf-t tbody tr:hover td) */
  .fcall[onclick]:hover{background:rgba(245,166,35,.05)}
  #pfKpis{background:transparent;border-bottom:0;gap:8px;padding:0 0 12px!important}
  #pfKpis .kpi{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);flex:1 1 132px}
  #pfKpis .kpi:hover{border-color:rgba(245,166,35,.4)}
  @media (max-width:760px){ .kpi{flex:1 1 44%;min-width:44%} #pfKpis .kpi{flex:1 1 44%} }
  /* nothing here uses a fixed column count — cells stretch to fill the last row,
     so adding a metric can never leave a dead cell again */
  .sc-metrics > *{flex:1 1 31%;min-width:92px}
  .pf-top > *{flex:1 1 210px;min-width:170px}
  .pf-cols3 > *{flex:1 1 30%;min-width:220px}
  .lgl-kpis > *{flex:1 1 16%;min-width:110px}
  @media (max-width:760px){
    .sc-metrics > *{flex:1 1 48%;min-width:48%}
    .pf-top > *{flex:1 1 100%;min-width:0}
    .pf-cols3 > *{flex:1 1 100%;min-width:0}
    .lgl-kpis > *{flex:1 1 48%}
  }
  @media (max-width:1300px){#viewBoard{grid-template-columns:1fr}.kpi:nth-child(n+5){border-top:1px solid var(--line)}.ac-wrap{grid-template-columns:1fr}.rp-cols{grid-template-columns:1fr}}

/* ===== accent borders on the top KPI cards (owner 2026-07-26, Haley-view
   style: colored 2px frames so the main cards pop — semantic, not decorative:
   green=good/healthy, red=penalty/missed, yellow=watch, blue=volume/live,
   cyan=queue, purple=queue-cap). Padding drops 1px so 2px borders don't shift
   the grid. Hover keeps each card's own color (bg tint still signals click). */
.pf-card.acc-g,.pf-card.acc-r,.pf-card.acc-y,.pf-card.acc-b,.pf-card.acc-c,.pf-card.acc-p{border-width:2px;padding:11px 13px}
.pf-card.acc-g,.pf-card.acc-g:hover{border-color:var(--pass)}
.pf-card.acc-r,.pf-card.acc-r:hover{border-color:var(--fail)}
.pf-card.acc-y,.pf-card.acc-y:hover{border-color:var(--warn)}
.pf-card.acc-b,.pf-card.acc-b:hover{border-color:var(--oncall)}
.pf-card.acc-c,.pf-card.acc-c:hover{border-color:var(--ring)}
.pf-card.acc-p,.pf-card.acc-p:hover{border-color:var(--haley)}

/* ===== TV scale-up (owner 2026-07-26): on the wall TVs (zoomed out = wide
   viewport) the Today row — donut, Total Approved Deals, Avg Enrolled — reads
   too small. Laptop screens (~1500-1750px) stay as-is; only genuinely wide
   viewports get the bump. Inline sizes on these cards need !important. */
@media (min-width:1900px){
  .pf-today .pf-big.o{font-size:112px!important}
  .pf-today .pf-big:not(.o){font-size:42px!important}
  .pf-today svg{width:210px!important;height:210px!important}
  .pf-today .ct{font-size:20px!important}
  .pf-today .cs{font-size:13px!important}
  .pf-today .pf-lr .n,.pf-today .pf-lr .v,.pf-today .pf-lr .p{font-size:16px}
  .pf-today .pf-row2 .n,.pf-today .pf-row2 .v{font-size:15px}
  .pf-today .pf-goal span{font-size:14px}
}