/* ============================================================
Self-hosted fonts (Phase 4 Step 3) — no external font hosts.
Plex Sans + Space Grotesk ship as VARIABLE fonts (one file, all
weights); Mono/Serif are static per-weight; Material Symbols is the
variable icon font the whole admin UI uses.
============================================================ */
@font-face{font-family:'IBM Plex Sans';src:url("/fonts/plex-sans-var.woff2") format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("/fonts/plex-mono-400.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("/fonts/plex-mono-500.woff2") format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url("/fonts/plex-mono-600.woff2") format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Serif';src:url("/fonts/plex-serif-400.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Serif';src:url("/fonts/plex-serif-600.woff2") format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url("/fonts/space-grotesk-var.woff2") format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Material Symbols Outlined';src:url("/fonts/material-symbols-outlined-var.woff2") format('woff2');font-weight:100 700;font-style:normal;font-display:block}
/* ============================================================
Pluvoir — analytics workbench
Tableau / Power BI inspired: light application chrome,
square edges, dense panels, data-coloured field semantics.
============================================================ */
/* ONE merged :root — the two historical token blocks (workbench + "Sample BI
shell") collided at equal specificity with the later block winning; this is
the effective union, byte-equivalent in computed values. Phase 4 Step 1. */
:root{
--app-bg:#f7f9fb;
--chrome:#ffffff;
--chrome-2:#f2f4f6;
--surface:#ffffff;
--surface-2:#f2f4f6;
--border:#e0e3e5;
--border-2:#eceef0;
--ink:#191c1e;
--ink-2:#45464d;
--muted:#76777d;
--violet:#0051d5;
--violet-2:#0051d5;
--violet-bg:#eaf1ff;
--violet-line:#c8d8ff;
--dim:#0051d5;
--dim-bg:#eaf1ff;
--dim-line:#c8d8ff;
--mea:#16884a;
--mea-bg:#eaf7ef;
--mea-line:#c6e6d2;
--ok:#16884a;
--warn:#b7791f;
--bad:#dc2626;
--ui:'IBM Plex Sans','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
--pv-chart-1:#2f6fb0;
--pv-chart-2:#1f9e7a;
--pv-chart-3:#b07c1e;
--pv-chart-4:#c25f45;
--pv-chart-5:#6a5fb0;
--pv-chart-6:#5f8f3a;
--pv-chart-7:#a85b93;
--pv-chart-8:#4a93c4;
--pv-chart-9:#a55f16;
--pv-chart-10:#7a5cc0;
--pv-chart-ink:#1a1d24;
--pv-chart-mute:#8a92a0;
--pv-chart-grid:#edeef1;
--pv-chart-axis:#d7dadf;
--surface-low:#f7f9fb;
--primary:#0051d5;
--secondary:#316bf3;
--navy:#0b1c30;
--navy-muted:#bec6e0;
--shadow:0 1px 2px rgba(0,0,0,.05);
/* Semantic status tokens — initialized to the legacy renderer hexes;
the v2 renderer consumes these (nothing reads them yet). */
--pv-good:#3AAA35;
--pv-warn:#ED8B00;
--pv-bad:#ED1C24;
--pv-refline:#534ab7;
--pv-target:#4f46e5;
--pv-track:#eceae3;
/* Two-slot card accent. --pv-head-accent paints CARD CHROME (the tile top
rail and the tint/gradient/solid headers); --pv-accent paints GRAPHICS
(the single-series mark and the chart-content tints), and is deliberately
left undefined so it falls through to the header accent until a board
theme sets it. A theme can therefore pair a dark header with a light
graph colour. A card's authored options.color still wins over both via
the inline --tile-accent it emits. */
--pv-head-accent:var(--brand-primary,#2f64d6);
/* Data-numeral display face (design decision D4: Space Grotesk). Consumed
via .pv-num and by the v2 renderer's value text. */
--display:'Space Grotesk','IBM Plex Sans','Segoe UI',sans-serif;
}
/* Data numerals: the display face + tabular figures so columns align and
values don't jiggle between reloads. Apply to KPI values, table figures,
axis ticks — anything numeric. */
.pv-num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-0.015em}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:var(--ui);
font-size:15px;
line-height:1.45;
color:var(--ink);
background:var(--app-bg);
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{display:block}
.num,.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
::selection{background:var(--violet);color:#fff}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-thumb{background:#c4c4ca;border:4px solid transparent;background-clip:padding-box;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#aeaeb6;background-clip:padding-box}
/* ====================== GATE / LAUNCH ====================== */
.gate-body{
height:100vh;display:flex;align-items:center;justify-content:center;
background:var(--app-bg);
background-image:linear-gradient(var(--border-2) 1px,transparent 1px),
linear-gradient(90deg,var(--border-2) 1px,transparent 1px);
background-size:46px 46px;
}
.launch{
width:560px;background:var(--surface);
border:1px solid var(--border);
box-shadow:0 1px 0 rgba(0,0,0,.02),0 18px 50px -12px rgba(20,20,30,.28);
}
.launch-bar{
height:46px;display:flex;align-items:center;gap:9px;padding:0 16px;
background:var(--chrome-2);border-bottom:1px solid var(--border);
}
.launch-bar .dotset{display:flex;gap:6px;margin-left:auto}
.launch-bar .dotset i{width:9px;height:9px;border-radius:50%;background:#d3d3d8;display:block}
.launch-logo{
width:24px;height:24px;background:var(--violet);border-radius:5px;
display:flex;align-items:center;justify-content:center;
}
.launch-brand{font-weight:700;font-size:15px;letter-spacing:-.01em}
/* minimal sign-in card (logo + Pluvoir + email/password) */
.login-card{width:400px}
.login-brand{display:flex;align-items:center;gap:10px;padding:26px 32px 2px}
.launch-logo .material-symbols-outlined{color:#fff;font-size:16px}
.launch-logo-img{width:auto;height:30px;background:transparent;border-radius:0}
.launch-logo-img img{height:30px;width:auto;display:block;border-radius:5px}
.login-body{padding:4px 32px 30px}
.login-h{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:16px 0 2px}
.launch-body{padding:30px 34px 28px}
.launch-eyebrow{
font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--violet-2);
}
.launch h1{
font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.18;
margin:9px 0 4px;
}
.launch .lead{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-top:8px}
.launch-facts{
display:flex;border:1px solid var(--border-2);
margin:22px 0;background:var(--surface-2);
}
.launch-facts div{flex:1;padding:12px 14px;border-right:1px solid var(--border-2)}
.launch-facts div:last-child{border-right:none}
.launch-facts .fnum{font-size:21px;font-weight:700;letter-spacing:-.02em}
.launch-facts .flabel{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.btn-launch{
width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--violet);color:#fff;font-size:15px;font-weight:600;
padding:13px;border-radius:3px;transition:background .14s;
}
.btn-launch:hover{background:var(--violet-2)}
.launch-foot{
display:flex;justify-content:space-between;
padding:13px 16px;border-top:1px solid var(--border-2);
background:var(--surface-2);font-size:12px;color:var(--muted);
}
.gate-body form{margin:0}
/* Google SSO on the sign-in card */
.login-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:12px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--border-2)}
.btn-google{
width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;
padding:12px;border:1px solid var(--border-2);border-radius:3px;cursor:pointer;transition:border-color .14s,background .14s;
}
.btn-google:hover{border-color:var(--violet);background:var(--surface-2)}
/* sign-in form */
.launch-form{display:flex;flex-direction:column;gap:14px;margin:20px 0 4px}
.launch-field{display:flex;flex-direction:column;gap:6px}
.launch-label{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.launch-input{width:100%;padding:11px 12px;border:1px solid var(--border-2);border-radius:3px;font-size:14.5px;background:var(--surface);transition:border-color .14s,box-shadow .14s}
.launch-input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 18%,transparent)}
.launch-remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);user-select:none}
.launch-remember input{width:15px;height:15px;accent-color:var(--violet)}
.launch-flash{padding:10px 12px;border-radius:3px;font-size:13px;margin-bottom:4px}
.launch-flash-alert{background:#fcebeb;color:#a32d2d;border:1px solid #f3b9b9}
.launch-flash-notice{background:#e7f3ee;color:#0f6e56;border:1px solid #abdcc9}
/* Branded account access */
.gate-body.auth-page{min-height:100%;height:auto;display:flex;align-items:center;justify-content:center;padding:34px;
background:#e7e9e6;background-image:linear-gradient(rgba(39,53,58,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(39,53,58,.045) 1px,transparent 1px);
background-size:48px 48px;overflow:auto;color:#20282c}
.auth-shell{width:min(1160px,100%);min-height:680px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr);
background:#fff;border:1px solid #cfd4d1;border-top:3px solid var(--brand-primary,#2f6f89);border-radius:5px;
box-shadow:0 28px 80px rgba(30,42,47,.16);overflow:hidden}
.auth-story{position:relative;display:flex;min-width:0;flex-direction:column;padding:42px 48px 34px;background:#eef1ed;overflow:hidden}
.auth-story-grid{position:absolute;inset:0;background:linear-gradient(rgba(34,54,59,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(34,54,59,.04) 1px,transparent 1px);
background-size:38px 38px;mask-image:linear-gradient(135deg,#000,transparent 78%);pointer-events:none}
.auth-lockup,.auth-story-copy,.auth-story-foot{position:relative}
.auth-lockup{display:flex;align-items:center;gap:16px;min-height:54px}
.auth-district-brand{display:flex;align-items:center;gap:10px;min-width:0;max-width:250px;color:#293438}
.auth-district-brand img{display:block;max-width:230px;max-height:54px;width:auto;height:auto;object-fit:contain}
.auth-district-brand strong{font-size:15px;line-height:1.2}
.auth-district-mark{display:grid;place-items:center;width:35px;height:35px;color:var(--brand-primary,#2f6f89);font-size:25px}
.auth-story-copy{max-width:530px;margin-top:132px}
.auth-story-copy h1{max-width:500px;font:600 clamp(38px,4.2vw,54px)/1.02 var(--ui);letter-spacing:-.045em;color:#1e292d}
.auth-story-copy p{max-width:480px;margin-top:22px;font-size:16px;line-height:1.65;color:#5e6b70}
.auth-story-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:30px;color:#7a8589;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.auth-story-foot img{display:block;width:auto;height:25px;max-width:120px;object-fit:contain}
.auth-access{display:flex;align-items:center;background:#fff;border-left:1px solid #d8ddda}
.auth-access-inner{width:100%;max-width:430px;margin:auto;padding:48px 46px}
.auth-mobile-brand{display:none}
.auth-access-head{margin-bottom:28px}
.auth-access-head h2{font-size:31px;line-height:1.1;font-weight:600;letter-spacing:-.035em;color:#20292d}
.auth-access-head p{margin-top:9px;font-size:13.5px;color:#747e82}
.auth-flash{display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;padding:11px 12px;border:1px solid;font-size:12px;line-height:1.45}
.auth-flash .material-symbols-outlined{font-size:17px;flex:0 0 auto}.auth-flash-alert{background:#fff3f1;color:#9d392d;border-color:#ecc7c1}
.auth-flash-notice{background:#edf7f1;color:#28715b;border-color:#bfdecf}
.auth-google-form{margin:0}.auth-google{position:relative;width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:11px;padding:0 46px;
border:1px solid #cbd1ce;border-radius:3px;background:#fff;color:#293337;font-size:13px;font-weight:600;transition:border-color .14s,background .14s,box-shadow .14s}
.auth-google:hover{border-color:var(--brand-primary,#2f6f89);background:#f8faf8;box-shadow:0 2px 8px rgba(30,50,56,.07)}
.auth-button-arrow{position:absolute;right:15px;font-size:17px;color:#879195}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:#929a9d;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:#e0e3e1}
.auth-form{display:flex;flex-direction:column;gap:16px;margin:0}
.auth-field{display:flex;flex-direction:column;gap:7px}.auth-field>span{font-size:11px;font-weight:700;color:#445055}
.auth-input{width:100%;height:44px;padding:0 12px;border:1px solid #cfd4d1;border-radius:3px;background:#fafbf9;color:#20292d;font:500 13.5px var(--ui);
outline:none;transition:border-color .14s,box-shadow .14s,background .14s}
.auth-input::placeholder{color:#a1a8aa;font-weight:400}.auth-input:hover{border-color:#aeb7b3;background:#fff}
.auth-input:focus{border-color:var(--brand-primary,#2f6f89);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary,#2f6f89) 13%,transparent)}
.auth-remember{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#687378;user-select:none;cursor:pointer}
.auth-remember input{width:15px;height:15px;margin:0;accent-color:var(--brand-primary,#2f6f89)}
.auth-submit{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;border:0;border-radius:3px;
background:#25343a;color:#fff;font:600 13px var(--ui);cursor:pointer;transition:background .14s,transform .14s}
.auth-submit:hover{background:var(--brand-primary,#2f6f89)}.auth-submit:active{transform:translateY(1px)}.auth-submit .material-symbols-outlined{font-size:18px}
.auth-access-note{display:flex;align-items:flex-start;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid #e2e5e3;color:#7c8589}
.auth-access-note>.material-symbols-outlined{font-size:18px;color:var(--brand-primary,#2f6f89)}
.auth-access-note p{font-size:10.5px;line-height:1.55}.auth-access-note strong{color:#4e5a5f}
@media(max-width:900px){
.gate-body.auth-page{padding:20px}.auth-shell{min-height:0;grid-template-columns:1fr;max-width:540px}
.auth-story{display:none}.auth-access{border-left:0}.auth-access-inner{max-width:none;padding:42px}
.auth-mobile-brand{display:flex;align-items:center;min-height:50px;margin-bottom:44px}
.auth-mobile-brand img{display:block;max-width:190px;max-height:50px;width:auto;height:auto;object-fit:contain}
}
@media(max-width:520px){
.gate-body.auth-page{align-items:flex-start;padding:0;background:#fff}.auth-shell{min-height:100vh;border:0;border-top:3px solid var(--brand-primary,#2f6f89);border-radius:0;box-shadow:none}
.auth-access-inner{padding:32px 24px}.auth-mobile-brand{margin-bottom:38px}.auth-access-head h2{font-size:28px}
}
/* ====================== WORKBENCH SHELL ====================== */
.wb{display:grid;grid-template-rows:38px 1fr 28px;height:100vh;overflow:hidden}
/* --- title bar --- */
.titlebar{
display:flex;align-items:center;gap:11px;padding:0 12px;
background:var(--chrome-2);border-bottom:1px solid var(--border);
}
.tb-brand{display:flex;align-items:center;gap:8px}
.tb-logo{
width:23px;height:23px;background:var(--violet);border-radius:5px;
display:flex;align-items:center;justify-content:center;
}
.tb-wordmark{font-weight:700;font-size:15px;letter-spacing:-.01em}
.tb-vsep{width:1px;height:18px;background:var(--border)}
.tb-workbook{display:flex;flex-direction:column;line-height:1.15}
.tb-wb-name{font-size:13px;font-weight:600}
.tb-wb-kind{font-size:10.5px;color:var(--muted)}
.tb-grow{flex:1}
.tb-sync{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.tb-led{width:7px;height:7px;border-radius:50%;background:var(--ok);
box-shadow:0 0 0 3px rgba(63,138,79,.16)}
.tb-btn{
font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:3px;
border:1px solid var(--border);background:var(--surface);color:var(--ink-2);
}
.tb-btn:hover{background:var(--surface-2);border-color:#bdbdc4}
.titlebar form{margin:0}
.tb-user{
width:27px;height:27px;border-radius:50%;background:var(--violet);
color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
/* --- main split --- */
.wb-main{display:grid;grid-template-columns:206px 1fr;min-height:0}
/* --- rail --- */
.rail{
background:var(--chrome);border-right:1px solid var(--border);
display:flex;flex-direction:column;padding:12px 0;overflow-y:auto;
}
.rail-section{margin-bottom:14px}
.rail-head{
font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--muted);padding:0 16px 7px;
}
.rail-item{
display:flex;align-items:center;gap:10px;
padding:8px 16px;font-size:14px;font-weight:500;color:var(--ink-2);
border-left:3px solid transparent;
}
.rail-ic{width:18px;height:18px;stroke-width:1.65;flex-shrink:0;color:var(--muted)}
.rail-item:hover{background:#e9e9ec;color:var(--ink)}
.rail-item.active{
background:var(--surface);color:var(--violet-2);font-weight:600;
border-left-color:var(--violet);
}
.rail-item.active .rail-ic{color:var(--violet)}
.rail-grow{flex:1}
.rail-foot{padding:11px 16px;border-top:1px solid var(--border-2);margin:0 0 -12px}
.rail-foot-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.rail-foot-v{font-size:12.5px;color:var(--ink-2);margin-top:2px}
/* --- work area --- */
.workarea{display:grid;grid-template-rows:48px 1fr;min-height:0;min-width:0}
.toolbar{
display:flex;align-items:center;gap:10px;padding:0 16px;
background:var(--surface);border-bottom:1px solid var(--border);
}
.view-title{font-size:19px;font-weight:700;letter-spacing:-.02em}
.toolbar-tools{display:flex;align-items:center;gap:7px}
.viewport{overflow:auto;min-height:0;background:var(--app-bg)}
.viewport-fill{overflow:hidden}
/* --- status bar --- */
.statusbar{
display:flex;align-items:center;gap:0;padding:0 4px;
background:var(--chrome-2);border-top:1px solid var(--border);
font-size:12.5px;color:var(--ink-2);
}
.sb-item{display:flex;align-items:center;gap:6px;padding:0 13px;
border-right:1px solid var(--border)}
.sb-item:first-child{border-left:1px solid var(--border)}
.sb-grow{flex:1}
.sb-led{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.sb-led.ok{background:var(--ok)}
.sb-demo{color:var(--violet-2);font-weight:600}
/* ====================== BUTTONS / CONTROLS ====================== */
.btn{
display:inline-flex;align-items:center;gap:7px;
font-size:13px;font-weight:500;padding:6px 11px;border-radius:3px;
border:1px solid var(--border);background:var(--surface);color:var(--ink-2);
transition:background .12s,border-color .12s;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:#bcbcc3}
.btn svg{width:14px;height:14px}
.btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.primary:hover{background:var(--violet-2);border-color:var(--violet-2)}
.btn.icon{padding:6px;width:30px;height:30px;justify-content:center}
.btn-sep{width:1px;height:22px;background:var(--border);margin:0 3px}
.slicer{
display:flex;align-items:center;gap:8px;
border:1px solid var(--border);background:var(--surface);
padding:5px 9px;border-radius:3px;font-size:13px;
}
.slicer .sl-key{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);font-weight:600}
.slicer .sl-val{font-weight:600;color:var(--ink)}
.slicer .sl-caret{color:var(--muted)}
.slicer:hover{border-color:#bcbcc3}
/* ====================== DASHBOARD ====================== */
.slicers{
position:sticky;top:0;z-index:5;
display:flex;align-items:center;gap:9px;
padding:9px 16px;background:var(--surface);
border-bottom:1px solid var(--border);
}
.slicers .sl-lead{font-size:12px;font-weight:600;color:var(--muted);
text-transform:uppercase;letter-spacing:.07em;margin-right:2px}
.tile-grid{
display:grid;grid-template-columns:repeat(12,1fr);gap:10px;
padding:14px 16px 28px;
}
.tile{
background:var(--surface);border:1px solid var(--border);
display:flex;flex-direction:column;min-width:0;
}
.tile-head{
display:flex;align-items:center;gap:8px;height:36px;flex-shrink:0;
padding:0 12px;border-bottom:1px solid var(--border-2);
}
.tile-title{font-size:14px;font-weight:600;letter-spacing:-.005em}
.tile-sub{font-size:11.5px;color:var(--muted)}
.tile-menu{margin-left:auto;color:var(--muted);font-weight:700;letter-spacing:1px;
font-size:15px;line-height:1}
.tile-body{padding:14px;flex:1;min-width:0}
/* KPI / BAN tiles */
.kpi-value{
font-size:37px;font-weight:700;letter-spacing:-.03em;line-height:1;
display:flex;align-items:baseline;gap:2px;
}
.kpi-value .unit{font-size:19px;font-weight:600;color:var(--muted)}
.kpi-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:13px}
.kpi-delta{font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px}
.kpi-delta .arrow{font-size:11px}
.kpi-delta.good{color:var(--ok)}
.kpi-delta.bad{color:var(--bad)}
.kpi-delta .vs{color:var(--muted);font-weight:400}
.spark{display:block}
/* charts */
.chart-svg{display:block;width:100%;height:auto}
.cg{stroke:#ebebee;stroke-width:1}
.caxis,.cg{display:none}
.cax{fill:var(--muted);font-size:11px;font-family:var(--ui)}
.ctarget{stroke:#d99a31;stroke-width:1.3;stroke-dasharray:5 3}
.ctarget-lbl{fill:#b07d1c;font-size:10.5px;font-family:var(--ui);font-weight:600}
.carea{fill:rgba(78,121,167,.13)}
.cline{fill:none;stroke:#4e79a7;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.cdot{fill:#fff;stroke:#4e79a7;stroke-width:2}
.legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:4px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.legend-sw{width:11px;height:11px;border-radius:2px;flex-shrink:0}
.legend-sw.line{height:3px;width:16px}
/* heatmap */
.heatmap{border:1px solid var(--border-2);margin-top:2px}
.hm-row{display:grid;grid-template-columns:150px repeat(4,1fr)}
.hm-row + .hm-row .hm-cell,.hm-row + .hm-row .hm-rl{border-top:1px solid #fff}
.hm-h{
background:var(--surface-2);padding:8px 11px;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);border-bottom:1px solid var(--border-2);
}
.hm-h.corner{text-align:left}
.hm-rl{padding:10px 11px;font-size:13.5px;font-weight:600;color:var(--ink-2);
background:var(--surface);display:flex;align-items:center}
.hm-cell{
padding:10px 11px;display:flex;align-items:center;justify-content:space-between;
font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
}
.hm-cell .pct{font-size:10px;font-weight:600;opacity:.5}
/* horizontal bars (enrollment) */
.hbars{display:flex;flex-direction:column;gap:11px;margin-top:3px}
.hbar{display:flex;align-items:center;gap:11px}
.hbar-name{width:118px;flex-shrink:0;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.hbar-track{flex:1;height:22px;background:var(--surface-2);
border:1px solid var(--border-2);position:relative}
.hbar-fill{height:100%;background:#5b8cb8}
.hbar-val{width:54px;text-align:right;font-size:14px;font-weight:700;
font-variant-numeric:tabular-nums;flex-shrink:0}
/* ====================== EXPLORE ====================== */
.explore{height:100%;display:grid;grid-template-columns:254px 1fr 218px;min-height:0}
.ex-left{display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0}
.ex-center{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface)}
.ex-right{border-left:1px solid var(--border);background:var(--chrome);
display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.pane-head{
height:33px;flex-shrink:0;display:flex;align-items:center;gap:7px;
padding:0 12px;background:var(--chrome-2);border-bottom:1px solid var(--border);
font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-2);
}
.pane-head .ph-count{margin-left:auto;color:var(--muted);font-weight:600;
letter-spacing:0}
/* data pane */
.data-pane{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--surface)}
.sv-select{
margin:10px;display:flex;align-items:center;gap:9px;
border:1px solid var(--border);background:var(--surface-2);
padding:8px 10px;border-radius:3px;
}
.sv-ic{width:26px;height:26px;border-radius:4px;background:var(--violet-bg);
color:var(--violet-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sv-meta{min-width:0;flex:1}
.sv-meta b{font-size:13.5px;font-weight:600;display:block}
.sv-meta small{font-size:11px;color:var(--muted)}
.sv-select .caret{color:var(--muted);flex-shrink:0}
.field-list{flex:1;overflow-y:auto;padding:4px 8px 12px}
.field-group{
display:flex;align-items:center;justify-content:space-between;
padding:9px 7px 5px;font-size:11px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;
}
.field-group.dim{color:var(--dim)}
.field-group.mea{color:var(--mea)}
.field-group .fg-count{color:var(--muted);font-weight:600}
.field{
display:flex;align-items:center;gap:9px;padding:6px 7px;
font-size:14px;color:var(--ink);cursor:pointer;user-select:none;
}
.field:hover{background:var(--surface-2)}
.field.selected{background:var(--violet-bg)}
.field-ic{
width:19px;height:19px;border-radius:3px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.field-ic svg{width:13px;height:13px}
.field.dim .field-ic{background:var(--dim-bg);color:var(--dim)}
.field.mea .field-ic{background:var(--mea-bg);color:var(--mea)}
.field-grip{margin-left:auto;color:#cfcfd5;font-size:13px;letter-spacing:-3px}
/* marks card */
.marks-card{border-top:1px solid var(--border);background:var(--chrome);flex-shrink:0}
.marks-body{padding:10px 11px}
.mark-type{
display:flex;align-items:center;justify-content:space-between;
border:1px solid var(--border);background:var(--surface);
padding:6px 9px;font-size:13px;font-weight:600;border-radius:3px;margin-bottom:9px;
}
.mark-type .caret{color:var(--muted)}
.mark-well{
display:flex;align-items:center;gap:8px;padding:5px 0;
}
.mark-well .mw-ic{width:20px;height:20px;flex-shrink:0;color:var(--muted);
display:flex;align-items:center;justify-content:center}
.mark-well .mw-key{font-size:12.5px;color:var(--ink-2);width:50px;flex-shrink:0}
.mark-well .mw-drop{
flex:1;min-height:26px;border:1px solid var(--border);background:var(--surface);
display:flex;align-items:center;padding:3px 4px;
}
.mark-well .mw-drop.empty{border-style:dashed;background:transparent}
/* shelves */
.shelf-bar{flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);
padding:8px 12px;display:flex;flex-direction:column;gap:7px}
.shelf{display:flex;align-items:center;gap:9px}
.shelf-key{
width:62px;flex-shrink:0;font-size:11px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.shelf-drop{
flex:1;min-height:31px;border:1px dashed var(--border);
display:flex;align-items:center;gap:6px;padding:3px 5px;
}
.shelf-drop.filled{border-style:solid;background:var(--surface-2)}
/* pills */
.pill{
display:inline-flex;align-items:center;gap:6px;
font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:2px;
white-space:nowrap;
}
.pill.dim{background:var(--dim-bg);border:1px solid var(--dim-line);color:var(--dim)}
.pill.mea{background:var(--mea-bg);border:1px solid var(--mea-line);color:var(--mea)}
.pill .pill-x{opacity:.55;font-weight:500}
.pill .pill-ic{width:11px;height:11px}
/* canvas */
.ex-canvas{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--app-bg);padding:14px}
.canvas-sheet{
flex:1;background:var(--surface);border:1px solid var(--border);
display:flex;flex-direction:column;min-height:0;
}
.canvas-top{display:flex;justify-content:space-between;align-items:flex-start;
padding:14px 16px 8px}
.canvas-h{font-size:15px;font-weight:700;letter-spacing:-.01em}
.canvas-sub{font-size:12px;color:var(--muted);margin-top:1px}
.canvas-plot{flex:1;padding:6px 16px 14px;min-height:0;display:flex;align-items:center;justify-content:center}
.canvas-plot .chart-svg{max-height:100%}
.canvas-foot{
display:flex;justify-content:space-between;align-items:center;
padding:7px 14px;border-top:1px solid var(--border-2);
font-size:11.5px;color:var(--muted);
}
/* sheet tabs */
.sheet-tabs{
flex-shrink:0;display:flex;align-items:stretch;height:32px;
background:var(--chrome-2);border-top:1px solid var(--border);padding-left:6px;
}
.sheet-tab{
display:flex;align-items:center;gap:7px;padding:0 14px;font-size:12.5px;
color:var(--ink-2);border-right:1px solid var(--border);
}
.sheet-tab.active{background:var(--surface);font-weight:600;
box-shadow:inset 0 2px 0 var(--violet)}
.sheet-tab.add{color:var(--muted);font-weight:600}
.sheet-tab .st-ic{width:13px;height:13px;color:var(--muted)}
/* show me */
.showme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:11px}
.showme-cell{
aspect-ratio:1;border:1px solid var(--border);background:var(--surface);
display:flex;align-items:center;justify-content:center;color:var(--ink-2);
}
.showme-cell:hover{border-color:#b3b3bb;background:var(--surface-2)}
.showme-cell.active{background:var(--violet);border-color:var(--violet);color:#fff}
.showme-cell svg{width:21px;height:21px}
.fmt-block{padding:11px 12px;border-top:1px solid var(--border)}
.fmt-block .fb-head{font-size:11px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.fmt-row{display:flex;align-items:center;justify-content:space-between;
font-size:13px;color:var(--ink-2);padding:5px 0}
.toggle{width:32px;height:18px;border-radius:9px;background:#c9c9d0;
position:relative;flex-shrink:0;transition:background .14s}
.toggle::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;
background:#fff;top:2px;left:2px;transition:left .14s}
.toggle.on{background:var(--violet)}
.toggle.on::after{left:16px}
.fmt-swatches{display:flex;gap:6px}
.fmt-swatches i{width:22px;height:22px;border-radius:3px;display:block;cursor:pointer;
border:2px solid transparent;outline:1px solid var(--border)}
.fmt-swatches i.on{border-color:#fff;outline-color:var(--ink)}
/* ====================== CONNECTORS ====================== */
.pad{padding:14px 16px 26px}
.alert{
display:flex;align-items:center;gap:10px;
background:#fbf3df;border:1px solid #ecdcab;
padding:10px 13px;margin-bottom:13px;font-size:13.5px;color:#785a16;
}
.alert svg{flex-shrink:0;color:var(--warn);width:17px;height:17px}
.alert b{font-weight:700}
.alert .alert-act{margin-left:auto;font-weight:600;color:var(--violet-2);white-space:nowrap}
.dgrid{background:var(--surface);border:1px solid var(--border)}
.dgrid-head,.dgrid-row{
display:grid;
grid-template-columns:2.5fr 1.35fr .85fr .85fr 1.25fr 1.15fr 30px;
align-items:center;
}
.dgrid-head{
background:var(--surface-2);border-bottom:1px solid var(--border);
padding:0 14px;height:34px;
}
.dgrid-head div{font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.conn{border-bottom:1px solid var(--border-2)}
.conn:last-child{border-bottom:none}
.dgrid-row{padding:13px 14px;cursor:pointer;transition:background .1s}
.conn:hover .dgrid-row{background:var(--surface-2)}
.conn.open .dgrid-row{background:var(--violet-bg)}
.cell-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.cell-name .cn-top{display:flex;align-items:center;gap:9px}
.cn-name{font-size:14.5px;font-weight:600}
.cn-desc{font-size:12px;color:var(--muted)}
.cell-k{font-size:14px;color:var(--ink-2)}
.cell-k .mono{font-size:13px;color:var(--ink-2)}
.cell-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.tag{
font-family:var(--mono);font-size:11px;font-weight:500;
padding:1px 7px;border:1px solid var(--border);border-radius:3px;
color:var(--ink-2);background:var(--surface-2);
}
.tag.bigquery{
display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 5px;
color:var(--dim);background:var(--dim-bg);border-color:var(--dim-line);
}
.tag.bigquery .tag-logo{height:11px;width:auto;display:block}
.ctype-name{display:inline-flex;align-items:center;gap:6px}
.ctype-logo{height:13px;width:auto;display:block}
.type-name{display:inline-flex;align-items:center;gap:6px}
.type-card-logo{height:14px;width:auto;display:block}
.ctx-logo{height:13px;width:auto;display:block}
.bc-logo{height:13px;width:auto;display:block}
.tag.postgres{color:var(--violet-2);background:var(--violet-bg);border-color:var(--violet-line)}
.tag.csv{color:#9a6a14;background:#fbf2dd;border-color:#ecd9ab}
.stat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
padding:2px 9px;border-radius:11px}
.stat .sdot{width:7px;height:7px;border-radius:50%}
.stat.ok{background:#e7f3ea;color:var(--ok)}
.stat.ok .sdot{background:var(--ok)}
.stat.warn{background:#fbf1da;color:var(--warn)}
.stat.warn .sdot{background:var(--warn)}
.conn-caret{justify-self:center;color:var(--muted);transition:transform .16s}
.conn.open .conn-caret{transform:rotate(90deg)}
.conn-detail{display:none;background:var(--surface-2);
border-top:1px solid var(--border-2);padding:14px}
.conn.open .conn-detail{display:block}
.detail-label{font-size:11px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.entity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.entity{border:1px solid var(--border);background:var(--surface);padding:9px 11px}
.entity .e-name{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink)}
.entity .e-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.add-row{
display:flex;align-items:center;justify-content:center;gap:9px;
margin-top:11px;padding:13px;border:1.5px dashed var(--border);
background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:600;
}
.add-row:hover{border-color:var(--violet);color:var(--violet-2);background:var(--violet-bg)}
/* ====================== SEMANTIC MODEL ====================== */
.model-wrap{display:grid;grid-template-columns:304px 1fr;gap:13px;padding:14px 16px 26px}
.concept-col .col-head{
font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);margin-bottom:9px;
}
.concept{
background:var(--surface);border:1px solid var(--border);
padding:11px 13px;margin-bottom:8px;
}
.concept.empty{opacity:.62}
.concept-top{display:flex;align-items:center;justify-content:space-between}
.concept-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.concept-ic{width:22px;height:22px;border-radius:4px;background:var(--violet-bg);
color:var(--violet-2);display:flex;align-items:center;justify-content:center}
.concept-ic svg{width:13px;height:13px}
.coverage{font-size:12px;font-weight:600;color:var(--muted)}
.coverage.full{color:var(--ok)}
.meter{display:flex;gap:3px;margin-top:9px}
.meter i{height:5px;flex:1;background:var(--border-2)}
.meter i.f{background:var(--violet)}
.meter i.p{background:#d99a31}
.concept-fields{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:8px}
.map-grid{background:var(--surface);border:1px solid var(--border)}
.map-head,.map-row{
display:grid;grid-template-columns:1.5fr 34px 1.45fr 150px;align-items:center;
}
.map-head{background:var(--surface-2);border-bottom:1px solid var(--border);
padding:0 16px;height:34px}
.map-head div{font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.map-row{padding:12px 16px;border-bottom:1px solid var(--border-2)}
.map-row:last-child{border-bottom:none}
.map-row:hover{background:var(--surface-2)}
.src-field{display:flex;align-items:center;gap:9px;min-width:0}
.src-badge{font-family:var(--mono);font-size:10px;font-weight:500;
padding:2px 6px;border:1px solid var(--border);border-radius:3px;
color:var(--muted);background:var(--surface-2);flex-shrink:0}
.src-field code{font-family:var(--mono);font-size:13px;color:var(--ink)}
.map-arrow{display:flex;justify-content:center;color:var(--violet)}
.map-target b{font-size:14px;font-weight:700}
.map-target span{font-size:13px;color:var(--ink-2)}
.semtype{
justify-self:start;font-family:var(--mono);font-size:11.5px;font-weight:500;
padding:3px 9px;border-radius:3px;background:var(--mea-bg);
color:var(--mea);border:1px solid var(--mea-line);
}
.semtype.ref{background:var(--dim-bg);color:var(--dim);border-color:var(--dim-line)}
/* --- component icon sizing & chart fit --- */
.caret,.sl-caret{width:12px;height:12px;flex-shrink:0;color:var(--muted)}
.pill svg{width:12px;height:12px;flex-shrink:0}
.sv-ic svg{width:15px;height:15px}
.mw-ic svg{width:15px;height:15px}
.concept-ic svg{width:13px;height:13px}
.field-ic svg{width:13px;height:13px}
.btn svg,.alert svg,.st-ic,.tile-menu{flex-shrink:0}
.canvas-plot{overflow:hidden}
.canvas-plot .chart-svg{width:100%;height:100%}
/* ============ CONNECTOR CATALOG (slide 2) ============ */
/* Advanced workbook: in-page sheet tabs (replaces the old side panel links) */
.dh-sheettabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.dh-sheettab{font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:6px 12px;
border:1px solid var(--border);border-radius:5px;background:var(--surface);transition:color .12s,border-color .12s}
.dh-sheettab:hover{color:var(--ink);border-color:var(--ink-2)}
.dh-sheettab.active{color:var(--secondary);border-color:var(--secondary);background:rgba(49,107,243,.07)}
/* cross-filter breadcrumb chip (set by clicking a chart element) */
.fchip-cross{border-left:3px solid var(--brand-primary,#2f64d6)}
.fchip-cross .fchip-k{color:var(--brand-primary,#2f64d6)}
/* ---- Crosstab / pivot matrix (Cut two ways) ---- */
.pc-xt-wrap{flex:1;overflow:auto;min-height:0}
.pc-xt{width:100%;border-collapse:collapse;font-size:12px}
.pc-xt th,.pc-xt td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--c-line2,#edeef1);white-space:nowrap}
.pc-xt thead th{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted,#6b7280);background:#fafbfc;text-align:right}
.pc-xt-rh,.pc-xt-corner{text-align:left !important;font-weight:600;color:var(--c-ink,#1a1d24)}
.pc-xt td i{font-style:normal;color:var(--c-faint,#9aa1ad);font-size:10px;margin-left:3px}
.pc-xt-tot{font-weight:700;color:var(--c-ink,#1a1d24);background:#fafbfc}
.pc-xt-foot th,.pc-xt-foot td{border-top:2px solid var(--c-line,#e3e5e9);font-weight:700;color:var(--c-ink,#1a1d24)}
/* ---- Admin Home ---- */
.home-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
background:var(--surface);border:1px solid var(--border);padding:16px 18px;margin-bottom:13px}
.home-strip-id{display:flex;align-items:center;gap:13px;min-width:0}
.home-logo{height:34px;width:auto;max-width:120px;object-fit:contain}
.home-org{font-size:16px;font-weight:700;color:var(--ink)}
.home-org-sub{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.home-org-sub a{color:var(--secondary);font-weight:600}
.home-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.home-dot.ok{background:#2d7d46;box-shadow:0 0 0 3px rgba(45,125,70,.14)}
.home-dot.warm{background:#e8a13a;box-shadow:0 0 0 3px rgba(232,161,58,.16)}
.home-strip-actions{display:flex;gap:8px;align-items:center}
.home-strip-actions form{display:inline}
.home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:13px}
.home-stat{display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--border);
padding:14px 16px;text-decoration:none;transition:border-color .12s}
.home-stat:hover{border-color:var(--ink-2)}
.home-stat-n{font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.home-stat-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.home-stat-s{font-size:11.5px;color:var(--muted);margin-top:3px}
.home-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:13px;align-items:start}
@media(max-width:980px){.home-cols{grid-template-columns:1fr}}
.home-panel{background:var(--surface);border:1px solid var(--border)}
.home-panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;
border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.home-panel-acts{display:flex;gap:14px}
.home-panel-act{font-size:11px;font-weight:700;color:var(--secondary);text-decoration:none;text-transform:none;letter-spacing:0}
.home-panel-act:hover{text-decoration:underline}
.home-site{padding:8px 0}
.home-site-row{display:flex;align-items:center;gap:9px;padding:7px 16px;font-size:12.5px;color:var(--ink);min-width:0}
.home-site-row .material-symbols-outlined{font-size:16px;color:var(--ink-2);flex:none}
.home-site-menu{font-weight:700;margin-top:4px}
.home-site-sub{padding-left:28px}
.home-site-cat{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
background:var(--surface-2);border:1px solid var(--border);border-radius:3px;padding:1px 6px;flex:none}
.home-site-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.home-site-home{font-size:9.5px;font-weight:700;color:#2d7d46;background:rgba(45,125,70,.1);border-radius:3px;padding:1px 5px;margin-left:6px;text-transform:uppercase;letter-spacing:.04em}
.home-site-acts{display:flex;gap:10px;flex:none}
.home-site-acts a{font-size:11px;font-weight:700;color:var(--secondary);text-decoration:none}
.home-site-acts a:hover{text-decoration:underline}
.home-boards{display:flex;flex-direction:column}
.home-board{display:flex;align-items:baseline;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);
text-decoration:none;min-width:0;transition:background .12s}
.home-board:last-child{border-bottom:none}
.home-board:hover{background:var(--surface-2)}
.home-board-t{font-size:13px;font-weight:600;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-board-meta{font-size:11px;color:var(--muted);flex:none}
.home-board-badge{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:3px;padding:2px 6px;flex:none}
.home-board-badge.pub{color:#2d7d46;background:rgba(45,125,70,.1)}
.home-board-badge.draft{color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.home-empty{padding:18px 16px;font-size:12.5px;color:var(--muted)}
.home-empty a{color:var(--secondary);font-weight:600}
/* ---- Local data mirror panel (connectors page) ---- */
.mirror-panel{background:var(--surface);border:1px solid var(--border);border-left:3px solid #9aa1ad;padding:14px 16px;margin-bottom:13px}
.mirror-panel.is-on{border-left-color:#2d7d46}
.mirror-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mirror-title-wrap{display:flex;align-items:flex-start;gap:10px}
.mirror-status-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.mirror-status-dot.on{background:#2d7d46;box-shadow:0 0 0 3px rgba(45,125,70,.15)}
.mirror-status-dot.off{background:#aab1bf}
.mirror-title{font-size:14px;font-weight:700;color:var(--ink)}
.mirror-sub{font-size:12px;color:var(--muted);margin-top:1px;max-width:62ch}
.mirror-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mirror-actions form{display:inline}
.mirror-meta{display:flex;gap:22px;font-size:12px;color:var(--muted);margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
.mirror-meta b{color:var(--ink);font-weight:700}
.mirror-details{margin-top:8px}
.mirror-details summary{font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.mirror-grid{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:4px 22px}
.mirror-row{display:flex;align-items:baseline;gap:8px;font-size:12px;padding:3px 0;border-bottom:1px dashed var(--border)}
.mirror-name{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mirror-rows{color:var(--muted)}
.mirror-when{color:var(--faint,#9aa1ad);font-size:11px;white-space:nowrap}
.catalog{background:var(--surface);border:1px solid var(--border);margin-bottom:13px}
.catalog-head{
display:flex;justify-content:space-between;align-items:baseline;
padding:10px 14px;border-bottom:1px solid var(--border-2);font-size:13px;font-weight:700;
}
.catalog-head span{font-size:12px;font-weight:500;color:var(--muted)}
.catalog-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.ctype{padding:11px 13px;border-right:1px solid var(--border-2)}
.ctype:last-child{border-right:none}
.ctype.implementing{background:var(--surface-2)}
.ctype-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ctype-name{font-size:13px;font-weight:600}
.ctype.implementing .ctype-name{color:var(--ink-2)}
.ctype-flag{
font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:2px 6px;border-radius:9px;flex-shrink:0;
}
.ctype-flag.available{background:#e7f3ea;color:var(--ok)}
.ctype-flag.implementing{background:#eceef0;color:var(--muted)}
.ctype-by{font-size:10.5px;color:var(--muted);margin-top:6px;font-family:var(--mono)}
.tag.sql{color:var(--violet-2);background:var(--violet-bg);border-color:var(--violet-line)}
.tag.api{color:#0c7a87;background:#e2f1f2;border-color:#b9dde0}
.detail-cols{display:grid;grid-template-columns:1fr 252px;gap:18px}
.settings-block{border-left:1px solid var(--border-2);padding-left:18px}
.kv{
display:flex;justify-content:space-between;align-items:center;
font-size:13px;padding:5px 0;border-bottom:1px solid var(--border-2);
}
.kv:last-child{border-bottom:none}
.kv span{color:var(--muted)}
.kv b{font-weight:600;color:var(--ink)}
.kv b.mono{font-family:var(--mono);font-size:11.5px;color:var(--violet-2)}
/* ============ METRIC DATA (slide 5) ============ */
.metric-top{display:grid;grid-template-columns:1fr 1.32fr;gap:13px;margin-bottom:13px}
.schema-list{display:flex;flex-direction:column}
.schema-field{padding:9px 2px;border-bottom:1px solid var(--border-2)}
.schema-field:last-child{border-bottom:none}
.schema-field.expand{background:var(--violet-bg);margin:0 -14px;padding:9px 14px;border-bottom:none}
.sf-top{display:flex;align-items:center;gap:9px}
.sf-top code{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:500}
.sf-type{font-size:11px;color:var(--muted);font-family:var(--mono)}
.sf-note{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.sf-note strong{font-weight:600;color:var(--ink)}
.flow-label{
font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin:2px 0 7px;
}
.flow{display:flex;align-items:stretch;margin-bottom:15px}
.flow-step{
flex:1;border:1px solid var(--border);background:var(--surface-2);
padding:8px 6px;text-align:center;
}
.flow-step b{display:block;font-size:12.5px;font-weight:600}
.flow-step span{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.flow-arr{display:flex;align-items:center;padding:0 6px;color:var(--violet);font-weight:700}
.flow-note{
font-size:12px;color:var(--ink-2);background:var(--surface-2);
border:1px solid var(--border-2);padding:9px 11px;line-height:1.5;
}
.mtable-head,.mtable-row{
display:grid;grid-template-columns:1.2fr 1.5fr 1fr .8fr .85fr 2.1fr;align-items:center;
}
.mtable-head{
padding:0 14px;height:33px;background:var(--surface-2);
border-top:1px solid var(--border-2);border-bottom:1px solid var(--border);
}
.mtable-head div{
font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.mtable-row{padding:11px 14px;border-bottom:1px solid var(--border-2);font-size:13.5px}
.mtable-row:last-child{border-bottom:none}
.mtable-row:hover{background:var(--surface-2)}
.mt-user{font-weight:600}
.mt-name{color:var(--ink-2)}
.mt-dim{color:var(--muted);font-size:12.5px}
.mt-val{font-weight:700;font-variant-numeric:tabular-nums}
.vtype{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:3px}
.vtype.percentage{background:var(--dim-bg);color:var(--dim)}
.vtype.numeric{background:var(--mea-bg);color:var(--mea)}
.mt-extra{display:flex;flex-wrap:wrap;gap:4px}
.xchip{
font-family:var(--mono);font-size:10.5px;background:var(--surface-2);
border:1px solid var(--border-2);border-radius:3px;padding:1px 6px;color:var(--ink-2);
}
/* ============ FLASH / STATUS EXTRAS ============ */
.flash{
display:flex;align-items:center;gap:9px;padding:10px 13px;margin-bottom:13px;
font-size:13.5px;border:1px solid;
}
.flash svg{flex-shrink:0}
.flash-ok{background:#e7f3ea;border-color:#bcdfcd;color:#1f6b3a}
.stat.idle{background:#eceef0;color:var(--muted)}
.stat.idle .sdot{background:var(--muted)}
.entity-empty{font-size:12.5px;color:var(--muted);padding:8px 2px}
/* ============ NEW CONNECTION WIZARD ============ */
.wizard{max-width:880px;margin:0 auto;padding:18px 18px 46px}
.wstep{background:var(--surface);border:1px solid var(--border);margin-bottom:12px}
.wstep-head{
display:flex;gap:12px;align-items:flex-start;
padding:13px 16px;border-bottom:1px solid var(--border-2);
}
.wnum{
width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;
font-size:13px;font-weight:700;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.wstep-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.wstep-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.wstep-body{padding:16px}
.type-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.type-card{
position:relative;display:block;border:1.5px solid var(--border);
background:var(--surface);padding:12px 13px;cursor:pointer;
transition:border-color .12s,background .12s;
}
.type-card:hover{border-color:#aeaeb6}
.type-radio{position:absolute;opacity:0;pointer-events:none}
.type-card:has(.type-radio:checked){border-color:var(--violet);background:var(--violet-bg)}
.type-card.implementing{opacity:.6;cursor:not-allowed;background:var(--surface-2)}
.type-card.implementing:hover{border-color:var(--border)}
.type-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.type-name{font-size:13.5px;font-weight:600}
.type-flag{
font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
background:#eceef0;color:var(--muted);padding:2px 6px;border-radius:9px;
}
.type-by{display:block;font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-top:6px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.field-grid.three{grid-template-columns:1fr 1fr 1fr}
.field-grid:last-child{margin-bottom:0}
.wz-field{display:flex;flex-direction:column;gap:5px}
.field-label{font-size:12px;font-weight:600;color:var(--ink-2)}
.winput{
width:100%;border:1px solid var(--border);background:var(--surface);
padding:8px 10px;font-size:14px;font-family:var(--ui);color:var(--ink);border-radius:3px;
}
.winput:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-bg)}
.wtext{min-height:62px;resize:vertical;font-family:var(--mono);font-size:12px}
select.winput{cursor:pointer}
.conn-fields{border-top:1px solid var(--border-2);padding-top:14px;margin-top:3px}
.cf-label{
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--violet-2);margin-bottom:11px;
}
.file-drop{
border:1.5px dashed var(--border);background:var(--surface-2);
padding:20px;text-align:center;font-size:13px;color:var(--ink-2);margin-bottom:13px;
}
.file-link{color:var(--violet-2);font-weight:600}
.file-hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.test-row{display:flex;align-items:center;gap:13px;margin-top:14px;flex-wrap:wrap}
.test-result{font-size:13px;font-weight:600;color:var(--muted);flex:1;min-width:0}
.test-result.ok{color:var(--ok)}
.test-result.err{color:var(--bad)}
.setting-row{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:13px 0;border-bottom:1px solid var(--border-2);
}
.setting-row:first-child{padding-top:0}
.setting-row:last-child{border-bottom:none;padding-bottom:0}
.setting-text b{display:block;font-size:14px;font-weight:600}
.setting-text span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.interval{display:flex;gap:7px;flex-shrink:0}
.interval input.winput{width:80px}
.interval select.winput{width:118px}
.setting-row > select.winput{width:230px;flex-shrink:0}
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch-track{
position:absolute;inset:0;background:#c9c9d0;border-radius:11px;transition:background .14s;
}
.switch-track::after{
content:"";position:absolute;width:16px;height:16px;border-radius:50%;
background:#fff;top:3px;left:3px;transition:left .14s;
}
.switch input:checked + .switch-track{background:var(--violet)}
.switch input:checked + .switch-track::after{left:21px}
.wizard-foot{display:flex;justify-content:flex-end;gap:9px;padding:14px 2px 0}
.wizard-foot .btn{padding:9px 18px;font-size:13.5px}
.wizard-note{font-size:11.5px;color:var(--muted);margin-top:14px;text-align:center}
/* ============ DASHBOARD INTERACTIVITY ============ */
[hidden]{display:none !important}
.is-hidden{display:none !important}
.slicer{position:relative;display:inline-block;border:none;padding:0;background:none}
.slicer-btn{
display:flex;align-items:center;gap:8px;
border:1px solid var(--border);background:var(--surface);
padding:6px 10px;border-radius:3px;font-size:13px;cursor:pointer;color:var(--ink);
}
.slicer-btn:hover{border-color:#bcbcc3}
.slicer.open .slicer-btn{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-bg)}
.slicer-menu{
position:absolute;top:calc(100% + 4px);left:0;z-index:30;
min-width:180px;background:var(--surface);
border:1px solid var(--border);box-shadow:var(--shadow);padding:4px;
}
.sl-opt{
display:block;width:100%;text-align:left;
padding:7px 9px;font-size:13px;border-radius:3px;cursor:pointer;color:var(--ink-2);
}
.sl-opt:hover{background:var(--surface-2)}
.sl-opt.selected{background:var(--violet-bg);color:var(--violet-2);font-weight:600}
.sl-check{
display:flex;align-items:center;gap:8px;
padding:6px 9px;font-size:13px;cursor:pointer;border-radius:3px;color:var(--ink);
}
.sl-check:hover{background:var(--surface-2)}
.sl-check input{accent-color:var(--violet);width:14px;height:14px;cursor:pointer}
.slicer-hint{font-size:12px;color:var(--violet-2);font-weight:600}
.tile-head{position:relative}
.tile-menu{
margin-left:auto;cursor:pointer;color:var(--muted);
font-size:17px;line-height:1;letter-spacing:1px;font-weight:700;
padding:1px 7px;border-radius:3px;
}
.tile-menu:hover{background:var(--surface-2);color:var(--ink)}
.tile-pop{
position:absolute;top:calc(100% + 2px);right:6px;z-index:25;
min-width:184px;background:var(--surface);
border:1px solid var(--border);box-shadow:var(--shadow);padding:4px;
}
.tp-act{
display:block;width:100%;text-align:left;
padding:7px 9px;font-size:13px;border-radius:3px;cursor:pointer;color:var(--ink-2);
}
.tp-act:hover{background:var(--surface-2)}
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{
text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muted);
padding:6px 10px;border-bottom:1px solid var(--border);
}
.dtable td{padding:7px 10px;border-bottom:1px solid var(--border-2);color:var(--ink-2)}
.dtable tr:last-child td{border-bottom:none}
.dtable .dt-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.dtable tbody tr:hover{background:var(--surface-2)}
.hm-cell[data-drill]{cursor:pointer}
.hm-cell[data-drill]:hover{box-shadow:inset 0 0 0 2px var(--violet)}
.cbar,.cdot{cursor:pointer;transition:opacity .1s}
.cbar:hover,.cdot:hover{opacity:.78}
.chart-tip{
position:fixed;z-index:70;pointer-events:none;
background:var(--ink);color:#fff;font-size:11.5px;font-weight:500;
padding:4px 9px;border-radius:3px;white-space:nowrap;
opacity:0;transition:opacity .1s;
}
.chart-tip.show{opacity:1}
.drill-pop{
position:fixed;z-index:60;width:228px;
background:var(--surface);border:1px solid var(--border);
box-shadow:var(--shadow);padding:13px 14px;
}
.drill-pop .dp-title{font-size:14px;font-weight:700}
.drill-pop .dp-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.drill-pop .dp-big{font-size:27px;font-weight:700;letter-spacing:-.02em;margin:9px 0 7px}
.drill-pop .dp-row{
display:flex;justify-content:space-between;font-size:12.5px;
padding:5px 0;border-top:1px solid var(--border-2);color:var(--muted);
}
.drill-pop .dp-row b{font-weight:700;color:var(--ink)}
.drill-pop .dp-row b.pos{color:var(--ok)}
.drill-pop .dp-row b.neg{color:var(--bad)}
/* ============ EXPLORE CHART BUILDER ============ */
#chart-canvas{width:100%;height:100%;overflow:auto}
#chart-canvas .ex-chart{width:100%;height:auto;display:block}
#chart-canvas .dtable{font-size:13.5px}
.cval{fill:var(--ink-2);font-size:10.5px;font-weight:600;font-family:var(--ui)}
.cslice{cursor:pointer;transition:opacity .12s}
.cslice:hover{opacity:.82}
.field[data-field]{cursor:pointer}
.showme-cell[data-type]{cursor:pointer}
/* ============ CONNECTOR INDEX — clickable row wrapper + empty state ============ */
.conn-link{display:block;color:inherit;text-decoration:none}
.conn-link .dgrid-row{cursor:pointer;border-bottom:1px solid var(--border-2)}
.conn-link:last-child .dgrid-row{border-bottom:none}
.conn-link:hover .dgrid-row{background:var(--surface-2)}
.cnx-empty{
background:var(--surface);border:1px solid var(--border);
padding:44px 30px;text-align:center;
}
.cnx-empty-title{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* A teaching empty state is a paragraph, not a caption: it needs a measure to
read at and room to breathe. */
.cnx-empty-sub{font-size:13.5px;line-height:1.65;color:var(--muted);margin:8px auto 20px;max-width:52ch}
.cnx-empty-sub strong{color:var(--ink-2);font-weight:600}
/* ============ CONNECTOR DETAIL ============ */
.cdtl-title{display:flex;align-items:center;gap:11px;min-width:0}
.cdtl-title h1{font-size:18px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.cdtl-back{
width:26px;height:26px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);background:var(--surface);border-radius:3px;color:var(--ink-2);
flex-shrink:0;
}
.cdtl-back:hover{background:var(--surface-2);border-color:#b3b3bb}
.cdtl{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface)}
/* Destructive separation on a page with no bottom of its own: a strip at the
foot of the column, in its own tier, nowhere near a constructive control.
Quiet at rest — this is a page people browse, not a warning they need. */
.cdtl-danger{
flex:none;display:flex;align-items:center;gap:16px;padding:9px 16px;
background:var(--danger-bg);border-top:1px solid var(--danger-line);
}
.cdtl-danger-b{flex:1;min-width:0;font-size:12px;line-height:1.5;color:var(--danger-ink)}
.cdtl-danger-b b{display:block;font-weight:700}
.cdtl-danger form{margin:0}
.cdtl-danger .btn.danger{
background:#fff;border:1px solid var(--danger-line);color:var(--danger-ink);
font-weight:700;white-space:nowrap;
}
.cdtl-danger .btn.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
/* Compact context bar — breadcrumb-style metadata on one line */
.cdtl-context{
display:flex;align-items:center;gap:6px;flex-shrink:0;
padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);
font-size:12.5px;color:var(--ink-2);
}
.cdtl-context .ctx-icon{color:var(--violet);display:flex;align-items:center;margin-right:2px}
.cdtl-context .ctx-crumb{color:var(--ink);font-weight:500}
.cdtl-context .ctx-crumb.mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cdtl-context .ctx-arrow{color:var(--muted);font-weight:600;margin:0 1px}
.cdtl-context .ctx-sep{
display:inline-block;width:3px;height:3px;border-radius:50%;
background:#cdced3;margin:0 7px;flex-shrink:0;
}
.cdtl-context .ctx-fact{color:var(--muted);font-size:12px;white-space:nowrap}
.cdtl-context .ctx-fact b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.cdtl-context .ctx-grow{flex:1}
/* Bindings strip — semantic connections, always above the workbench */
.cdtl-bindings{
display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;
padding:9px 16px;background:#faf7ec;border-bottom:1px solid #ecdfb9;
}
.cb-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5a14;margin-right:4px}
.cb-chip{
display:inline-flex;align-items:stretch;
background:var(--surface);border:1px solid var(--border);
border-radius:3px;font-size:12px;overflow:hidden;
}
.cb-chip > .cb-concept,
.cb-chip > .cb-stat{padding:4px 10px;display:inline-flex;align-items:center}
.cb-concept{font-weight:600;color:var(--violet-2)}
.cb-stat{color:var(--muted);font-size:11.5px;border-left:1px solid var(--border-2)}
.cb-stat-pending{color:var(--warn)}
.cb-chip form{margin:0;display:inline-flex}
.cb-chip .cb-run,.cb-chip .cb-del{
background:none;border:none;padding:3px 9px;cursor:pointer;
font-size:11px;font-weight:600;color:var(--ink-2);
display:inline-flex;align-items:center;gap:4px;border-left:1px solid var(--border-2);
}
.cb-chip .cb-run svg{flex-shrink:0}
.cb-chip .cb-run:hover{color:var(--violet-2);background:var(--surface-2)}
.cb-chip .cb-del{color:var(--muted);font-size:15px;line-height:.9;padding:0 10px}
.cb-chip .cb-del:hover{color:var(--bad);background:#fff0ed}
/* Tree — search + grouped sections */
.cdtl-tree-search{
display:flex;align-items:center;gap:8px;flex-shrink:0;
padding:9px 12px;border-bottom:1px solid var(--border);background:var(--chrome);
}
.cdtl-tree-search svg{color:var(--muted);flex-shrink:0}
.cdtl-tree-search input{
flex:1;width:100%;border:1px solid var(--border);background:var(--surface);
padding:5px 8px;font-size:12.5px;color:var(--ink);
border-radius:3px;font-family:var(--ui);outline:none;min-width:0;
}
.cdtl-tree-search input:focus{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet-bg)}
.cdtl-tree-group{
padding:11px 14px 5px;
font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
display:flex;justify-content:space-between;align-items:center;
}
.cdtl-tree-group span{color:var(--faint);font-weight:600;font-size:10px}
.cdtl-tbl.is-filtered,.cdtl-tree-group.is-filtered{display:none}
/* Tab strip — leave room for a right-aligned action link */
.cdtl-tab-grow{flex:1}
.cdtl-tab-act{
display:inline-flex;align-items:center;
padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--violet-2);
text-decoration:none;border-left:1px solid var(--border-2);
}
.cdtl-tab-act:hover{background:var(--surface)}
/* Schema: Tableau-style coloured type pills */
.cdtl-grid .ftype-icon{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:18px;border-radius:3px;
font-family:var(--mono);font-size:9.5px;font-weight:700;
margin-right:10px;vertical-align:middle;
}
.ftype-dim{background:var(--dim-bg);color:var(--dim);border:1px solid var(--dim-line)}
.ftype-mea{background:var(--mea-bg);color:var(--mea);border:1px solid var(--mea-line)}
.ftype-date{background:#fbf2dd;color:#9a6a14;border:1px solid #ecdcab;font-size:11px}
.ftype-rec{background:#ece9f5;color:#6f5392;border:1px solid #d4cae6;font-size:11px}
.cdtl-grid .schema-name{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:500}
.cdtl-grid .schema-mode{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.04em}
.type-pill.mea{background:var(--mea-bg);color:var(--mea);border-color:var(--mea-line)}
.type-pill.date{background:#fbf2dd;color:#9a6a14;border-color:#ecdcab}
/* Binding form — context strip + preview */
.binding-context{
display:flex;align-items:center;gap:8px;
padding:9px 14px;background:var(--surface-2);border:1px solid var(--border-2);
margin-bottom:14px;font-size:12.5px;
}
.bc-icon{color:var(--violet);display:flex;align-items:center}
.bc-name{font-weight:700;color:var(--ink)}
.bc-meta.mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.binding-preview{
background:var(--surface);border:1px solid var(--border);
margin-top:12px;max-height:300px;overflow:auto;
}
.binding-preview-cols{
padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border-2);
font-size:11.5px;color:var(--muted);
}
.binding-preview-cols b{
color:var(--violet-2);font-family:var(--mono);font-size:11.5px;
margin-right:10px;font-weight:600;
}
.winput.mono{font-family:var(--mono);font-size:12.5px}
/* Binding form — column chips + per-field source/expression mapping */
.binding-cols-hint{
display:flex;align-items:center;flex-wrap:wrap;gap:5px;
padding:9px 12px;background:var(--surface-2);border:1px solid var(--border-2);
font-size:12px;color:var(--muted);
}
.binding-cols-hint b{font-weight:700;color:var(--ink-2);margin-right:4px}
.col-chip{
font-family:var(--mono);font-size:11px;color:var(--dim);
background:var(--dim-bg);border:1px solid var(--dim-line);
padding:1px 7px;border-radius:3px;
}
.col-chip.more{background:var(--surface-2);color:var(--muted);border-color:var(--border-2)}
.binding-fields{display:flex;flex-direction:column;gap:11px}
.bfld{
border:1px solid var(--border-2);background:var(--surface);
padding:11px 13px;border-radius:3px;
}
.bfld-meta{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.bfld-name{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink)}
.bfld-req{
font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--bad);background:#fee9e5;padding:1px 6px;border-radius:9px;
}
.bfld-hint{font-size:11.5px;color:var(--muted);margin-bottom:7px}
.bfld-row{display:flex;align-items:stretch;gap:7px}
.bfld-pick,.bfld-expr{flex:1}
.bfld-pick .winput,.bfld-expr .winput{width:100%}
.bfld.expr .bfld-pick{display:none}
.bfld:not(.expr) .bfld-expr{display:none}
.bfld-fx{
flex-shrink:0;border:1px solid var(--border);background:var(--surface-2);
padding:0 11px;font-family:var(--mono);font-size:11px;font-weight:600;
color:var(--violet-2);border-radius:3px;cursor:pointer;min-width:42px;
}
.bfld-fx:hover{background:var(--violet-bg)}
.bfld .fx-off{display:none}
.bfld.expr .fx-on{display:none}
.bfld.expr .fx-off{display:inline}
/* Extras section — district-specific fields stored in JSON */
.bfld-extra .bfld-meta{gap:8px}
.bfld-extra .extra-key{flex:1;max-width:380px}
.bfld-extra .extra-remove{
background:none;border:none;color:var(--muted);cursor:pointer;
font-size:18px;line-height:1;padding:0 8px;flex-shrink:0;
}
.bfld-extra .extra-remove:hover{color:var(--bad)}
.add-extra-btn{margin-top:9px;display:inline-flex;align-items:center;gap:7px}
.add-extra-btn .ae-plus{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:50%;
background:var(--violet);color:#fff;font-weight:700;font-size:11px;line-height:1;
}
.wstep-flag{
display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
background:var(--violet-bg);color:var(--violet-2);padding:2px 7px;border-radius:9px;margin-left:6px;
vertical-align:middle;
}
/* Concept builder — field rows */
.concept-fields{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.cf-row{
display:flex;align-items:center;gap:9px;
background:var(--surface);border:1px solid var(--border-2);
padding:8px 11px;border-radius:3px;
}
.cf-req{
display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);cursor:pointer;
}
.cf-req input{accent-color:var(--violet)}
.cf-rm{
background:none;border:none;color:var(--muted);cursor:pointer;
font-size:17px;line-height:1;padding:0 8px;
}
.cf-rm:hover{color:var(--bad)}
/* Semantic Model — user-defined concept badge + section header */
.cr-custom{
display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
background:#fbf2dd;color:#9a6a14;border:1px solid #ecdcab;
padding:1px 7px;border-radius:9px;margin-left:7px;
}
.concept-section-head{
font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
margin:18px 0 -2px;padding-left:2px;
}
.cr-concept-del{background:none !important;border:none !important;padding:0 !important;justify-content:flex-end}
.cr-custom-row{background:#fefcf6 !important}
/* Explore — dataset toggle in the data pane header */
.pane-head{justify-content:space-between}
.ph-mode{display:inline-flex;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.dm-opt{
padding:3px 9px;font-size:11px;font-weight:600;cursor:pointer;
background:var(--surface);color:var(--ink-2);border:none;letter-spacing:.03em;
}
.dm-opt.active{background:var(--violet);color:#fff}
.dm-opt:disabled,.dm-opt.is-disabled{opacity:.45;cursor:not-allowed}
.dm-opt + .dm-opt{border-left:1px solid var(--border)}
/* Semantic Model — concepts + their bindings */
.model-intro{padding-bottom:8px;border-bottom:1px solid var(--border-2);margin-bottom:14px}
.mh-title{font-size:18px;font-weight:700;letter-spacing:-.015em}
.mh-sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.concept-rows{display:flex;flex-direction:column;gap:8px}
.concept-row{
background:var(--surface);border:1px solid var(--border);
}
.cr-head{
display:grid;grid-template-columns:46px 1fr 120px 220px 18px;
align-items:center;gap:14px;padding:13px 16px;cursor:pointer;
user-select:none;
}
.cr-head:hover{background:var(--surface-2)}
.concept-row.expanded .cr-head{background:var(--surface-2);border-bottom:1px solid var(--border-2)}
.cr-caret{color:var(--muted);transition:transform .18s;flex-shrink:0}
.concept-row.expanded .cr-caret{transform:rotate(180deg);color:var(--violet)}
.cr-field-more{font-size:10.5px;color:var(--muted);padding:1px 6px}
/* Collapsed summary on the right of cr-head */
.cr-summary{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.cr-bcount{font-size:12px;color:var(--ink-2);font-weight:600}
.cr-bmodes{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* Mode pills used in cr-head summary and inside binding cards */
.mode-pill{
display:inline-flex;align-items:center;
font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:2px 8px;border-radius:9px;
}
.mode-pill.live{background:var(--violet-bg);color:var(--violet-2)}
.mode-pill.mat{background:#e7f4ea;color:var(--ok)}
.mode-pill.small{font-size:9px;padding:1px 6px}
.cb-time{color:var(--muted);font-size:11px}
/* Expanded detail */
.cr-detail{padding:0}
.cr-section{padding:14px 16px;border-top:1px solid var(--border-2)}
.cr-section:first-child{border-top:none}
.cr-section-head{
display:flex;align-items:center;justify-content:space-between;
font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
margin-bottom:10px;
}
.cr-add-binding{
font-size:12px;font-weight:600;color:var(--violet-2);text-decoration:none;letter-spacing:0;text-transform:none;
}
.cr-add-binding:hover{text-decoration:underline}
.cr-fields-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.cr-fdef{
background:var(--surface);border:1px solid var(--border-2);
padding:7px 10px;border-radius:3px;font-size:12px;
}
.cr-fdef-key{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:12px}
.cr-fdef-req{
display:inline-block;background:var(--violet-bg);color:var(--violet-2);
padding:1px 6px;border-radius:9px;font-size:9px;font-weight:700;margin-left:5px;letter-spacing:.04em;text-transform:uppercase;
}
.cr-fdef-hint{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.cr-fields-note{font-size:11.5px;color:var(--muted);margin:10px 0 0}
.cr-fields-note code{font-family:var(--mono);font-size:11px;background:var(--surface-2);padding:1px 5px;border-radius:3px}
/* Binding card inside expanded detail */
.cr-bind{
background:var(--surface-2);border:1px solid var(--border-2);
border-radius:3px;padding:10px 13px;margin-bottom:8px;
}
.cr-bind:last-child{margin-bottom:0}
.cr-bind-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cr-bind-from code{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:600}
.cr-bind-via{color:var(--muted);font-size:12px}
.cr-bind-time{color:var(--muted);font-size:11.5px}
.cr-bind-acts{margin-left:auto;display:inline-flex;gap:0;background:var(--surface);border:1px solid var(--border-2);border-radius:3px;overflow:hidden}
.cr-bact{
background:none;border:none;padding:5px 11px;font-size:11.5px;font-weight:600;
color:var(--ink-2);cursor:pointer;border-right:1px solid var(--border-2);
text-decoration:none;display:inline-flex;align-items:center;
}
.cr-bact:last-child{border-right:none}
.cr-bact:hover{color:var(--violet-2);background:var(--violet-bg)}
.cr-bact-del{color:var(--muted)}
.cr-bact-del:hover{color:var(--bad);background:#fff0ed}
.cr-bact[disabled]{opacity:.5;cursor:wait}
.cr-bind-sql{
font-family:var(--mono);font-size:11.5px;line-height:1.5;
background:var(--ink);color:#cbd5e1;padding:10px 12px;border-radius:3px;
margin:9px 0 0;overflow-x:auto;white-space:pre-wrap;word-break:break-all;
}
.cr-bind-preview{
background:var(--surface);border:1px solid var(--border);
margin-top:9px;max-height:340px;overflow:auto;border-radius:3px;
}
.cr-preview-meta{
padding:7px 11px;background:var(--surface-2);border-bottom:1px solid var(--border-2);
font-size:11.5px;color:var(--muted);
}
.cr-bind-status{font-size:12px;margin-top:7px;color:var(--muted)}
.cr-bind-status.ok{color:var(--ok);font-weight:500}
.cr-bind-status.err{color:var(--bad)}
.cr-empty-block{
padding:18px;text-align:center;background:var(--surface);
border:1px dashed var(--border);font-size:13px;color:var(--muted);
}
.cr-section-danger{background:#fef6f3;border-top:1px solid #f0d4cc}
.cb-mini-del-btn{color:var(--bad);border-color:#f0c0b6}
.wizard-mode-hint{flex:1;font-size:12px;color:var(--muted);line-height:1.5}
.wizard-mode-hint strong{color:var(--ink);font-weight:600}
.cr-icon{
display:flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:5px;
background:var(--violet-bg);color:var(--violet-2);
font-family:var(--display,'IBM Plex Sans');font-weight:700;font-size:17px;
}
.cr-info .cr-name{font-size:14.5px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.cr-info .cr-desc{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.cr-field{
font-family:var(--mono);font-size:10.5px;color:var(--ink-2);
background:var(--surface-2);border:1px solid var(--border-2);
padding:1px 6px;border-radius:3px;
}
.cr-field.req{color:var(--violet-2);background:var(--violet-bg);border-color:var(--violet-line);font-weight:600}
.cr-count{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.cr-num{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.cr-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:4px}
.cr-bindings{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.cr-binding{
display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
background:var(--surface-2);border:1px solid var(--border-2);padding:4px 6px 4px 9px;border-radius:3px;
}
.cb-from{color:var(--ink)}
.cb-from code{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.cb-via{color:var(--muted);font-size:11.5px}
.cb-stat{color:var(--muted);font-size:11.5px}
.cb-stat strong{color:var(--ink);font-weight:600}
.cb-stat-pending{color:var(--warn)}
.cr-binding-acts{display:inline-flex;gap:0;margin-left:auto}
.cb-mini{
border:none;background:none;font-size:11px;font-weight:600;color:var(--violet-2);
padding:2px 8px;cursor:pointer;border-radius:3px;
}
.cb-mini:hover{background:var(--violet-bg)}
.cb-mini-del{color:var(--muted);font-size:14px;line-height:1;padding:1px 9px}
.cb-mini-del:hover{color:var(--bad);background:#fff0ed}
.cb-mini form{margin:0;display:inline}
.cr-empty{font-size:12.5px;color:var(--muted);font-style:italic}
.cr-empty-link{color:var(--violet-2);font-weight:600;font-style:normal}
.cdtl-error{
background:#fbeae7;border-bottom:1px solid #e9c0b6;color:#7a3022;
padding:10px 16px;font-size:13px;flex-shrink:0;
}
.cdtl-body{flex:1;display:grid;grid-template-columns:288px 1fr;min-height:0}
.cdtl-tree{
display:flex;flex-direction:column;min-height:0;
border-right:1px solid var(--border);background:var(--chrome);
}
.cdtl-tree-head{
padding:10px 14px;border-bottom:1px solid var(--border);
font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
}
.cdtl-tree-head span{color:var(--faint);font-weight:600;font-size:11px}
.cdtl-tree-list{flex:1;overflow-y:auto;padding:3px 0;min-height:0}
.cdtl-tbl{
display:flex;align-items:center;gap:9px;padding:6px 12px 6px 11px;cursor:pointer;
font-size:13px;border-left:3px solid transparent;color:var(--ink-2);
}
.cdtl-tbl:hover{background:var(--surface-2);color:var(--ink)}
.cdtl-tbl.active{background:var(--surface);border-left-color:var(--violet);color:var(--ink);font-weight:600}
.cdtl-tbl .ttype{
width:16px;height:16px;border-radius:3px;flex-shrink:0;
background:var(--dim-bg);color:var(--dim);
font-family:var(--mono);font-size:9.5px;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
.cdtl-tbl .ttype.view{background:#fbf2dd;color:#9a6a14}
.cdtl-tbl .ttype.mview{background:#e7eefb;color:#3358d4}
/* Dataset switcher in the context bar */
.ctx-dataset{
font-family:var(--mono);font-size:12px;
padding:2px 22px 2px 8px;border:1px solid var(--border-2);border-radius:4px;
background:#fff url("data:image/svg+xml;utf8,") no-repeat right 7px center;
color:var(--ink);cursor:pointer;appearance:none;
}
.ctx-dataset:hover{border-color:#3358d4}
.ctx-dataset:focus{outline:none;border-color:#3358d4;box-shadow:0 0 0 3px rgba(51,88,212,.12)}
.ctx-tag-helper{
margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:2px 7px;border-radius:9px;background:#fbf2dd;color:#9a6a14;
}
.cdtl-tbl .tcount.view{font-style:italic;color:var(--faint)}
.cdtl-tbl .tname{flex:1;font-family:var(--mono);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdtl-tbl .tcount{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.cdtl-main{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface)}
.cdtl-tabs{
display:flex;flex-shrink:0;
border-bottom:1px solid var(--border);background:var(--surface-2);
}
.cdtl-tab{
padding:9px 18px;font-size:13px;color:var(--ink-2);cursor:pointer;
border-right:1px solid var(--border-2);
border-bottom:2px solid transparent;
user-select:none;
}
.cdtl-tab:hover{background:var(--surface)}
.cdtl-tab.active{background:var(--surface);color:var(--ink);font-weight:600;border-bottom-color:var(--violet)}
.cdtl-pane{flex:1;overflow:auto;min-height:0}
.cdtl-pane.cdtl-query{display:flex;flex-direction:column;overflow:hidden}
/* Preview pane: scrollable grid + sticky pager footer */
.cdtl-pane.cdtl-preview-pane{display:flex;flex-direction:column;overflow:hidden;padding:0}
.cdtl-preview-scroll{flex:1;overflow:auto;min-height:0;padding:14px}
.cdtl-pager{
flex-shrink:0;display:flex;align-items:center;gap:12px;
padding:8px 14px;border-top:1px solid var(--border);
background:var(--surface-2);font-size:12.5px;
}
.cdtl-pager-btn{
font-family:inherit;font-size:12.5px;font-weight:500;
padding:5px 12px;border:1px solid var(--border-2);border-radius:4px;
background:#fff;color:var(--ink-2);cursor:pointer;
}
.cdtl-pager-btn:hover:not(:disabled){border-color:#3358d4;color:#3358d4}
.cdtl-pager-btn:disabled{opacity:.45;cursor:default}
.cdtl-pager-range{font-variant-numeric:tabular-nums;color:var(--ink-2);font-family:var(--mono);font-size:12px}
.cdtl-pager-size{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted)}
.cdtl-pager-size label{font-size:11px}
.cdtl-pager-size select{
font-family:inherit;font-size:12px;padding:3px 6px;
border:1px solid var(--border-2);border-radius:4px;background:#fff;color:var(--ink);cursor:pointer;
}
.cdtl-empty{padding:36px;text-align:center;color:var(--muted);font-size:13.5px}
.cdtl-empty.err{color:var(--bad)}
/* schema / preview / results grid */
.cdtl-grid{width:100%;border-collapse:collapse;font-size:12.5px}
.cdtl-grid th{
text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
padding:8px 13px;border-bottom:1px solid var(--border);background:var(--surface-2);
position:sticky;top:0;z-index:1;white-space:nowrap;
}
.cdtl-grid td{
padding:6px 13px;border-bottom:1px solid var(--border-2);color:var(--ink-2);vertical-align:top;
white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis;
}
.cdtl-grid .mono{font-family:var(--mono);font-size:12px;color:var(--ink)}
.cdtl-grid tr:hover td{background:var(--surface-2)}
.type-pill{
display:inline-block;font-family:var(--mono);font-size:10.5px;
padding:1px 7px;border-radius:3px;
background:var(--dim-bg);color:var(--dim);border:1px solid var(--dim-line);
}
/* query editor */
.cdtl-editor{border-bottom:1px solid var(--border);flex-shrink:0}
.cdtl-editor textarea{
width:100%;min-height:170px;resize:vertical;
border:none;padding:14px 16px;
font-family:var(--mono);font-size:13px;line-height:1.55;
color:var(--ink);background:var(--surface);outline:none;display:block;
}
.cdtl-query-bar{
display:flex;align-items:center;gap:13px;
padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);
font-size:12.5px;color:var(--muted);flex-shrink:0;
}
.cdtl-shortcut{
font-family:var(--mono);font-size:11px;background:var(--surface);
border:1px solid var(--border);padding:1px 7px;border-radius:3px;color:var(--ink-2);
}
.cdtl-meta{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}
.cdtl-meta.err{color:var(--bad)}
.cdtl-query-results{flex:1;overflow:auto;min-height:0}
/* =================================================================
District Analytics — sheet-based workbook
================================================================= */
/* Canvas: warm gray, cards float on it */
.dh-empty-state{
padding:60px 40px;text-align:center;background:#fff;
border:1px solid #ecedf0;max-width:560px;margin:40px auto;border-radius:6px;
}
.dh-empty-state h2{font-size:18px;margin:0 0 10px;color:var(--ink);font-weight:600}
.dh-empty-state p{color:var(--muted);font-size:14px;margin-bottom:20px}
/* When dashboard is rendered, viewport scrolls; keep filterbar + tabs sticky */
.viewport:has(#dh-filters){background:#f4f5f7;padding:0}
#dh-filters{position:sticky;top:0;z-index:8}
.viewport:has(#dh-filters) .dh-sheets{position:sticky;top:53px;z-index:7}
/* ===== Filter strip ===== */
.dh-filterbar{
display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
padding:14px 26px 14px;background:#fff;
border-bottom:1px solid #ecedf0;
}
.dh-filter{display:flex;flex-direction:column;gap:6px;min-width:0}
.dh-filter label{
font-size:10px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:#8a92a0;
}
.dh-input{
font-family:inherit;font-size:13px;
padding:6px 28px 6px 11px;background:#fff;
border:1px solid #d9dde3;border-radius:4px;color:var(--ink);
min-width:180px;cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-position:right 10px center;background-repeat:no-repeat;
}
.dh-input:focus{outline:none;border-color:#4338ca;box-shadow:0 0 0 3px rgba(67,56,202,.12)}
.dh-meta{
margin-left:auto;display:flex;align-items:center;gap:8px;
font-size:12px;color:var(--muted);padding-bottom:6px;
}
.dh-meta-k{color:#8a92a0;font-weight:500}
.dh-meta-v{color:var(--ink);font-weight:500;text-decoration:none}
a.dh-meta-v:hover{color:#4338ca;text-decoration:underline}
.dh-meta-sep{color:#d9dde3}
.dh-refresh{
padding:4px 8px;display:inline-flex;align-items:center;justify-content:center;
}
.btn-ghost{background:#fff;border:1px solid #d9dde3;color:#525a6b}
.btn-ghost:hover{background:#fafbfc;color:#4338ca;border-color:#c5cdd7}
/* ===== Sheet tabs ===== */
.dh-sheets{
display:flex;align-items:center;
padding:0 26px;background:#fff;
border-bottom:1px solid #ecedf0;
}
.dh-sheet-tab{
padding:13px 0;margin-right:24px;
font-size:13px;font-weight:500;color:#8a92a0;
text-decoration:none;
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:color .12s, border-color .12s;
letter-spacing:0;
}
.dh-sheet-tab:hover{color:var(--ink)}
.dh-sheet-tab.active{
color:var(--ink);
border-bottom-color:#4338ca;
font-weight:600;
}
.dh-sheets-grow{flex:1}
.dh-sheets-meta{
font-size:10.5px;color:#8a92a0;
letter-spacing:.04em;text-transform:uppercase;font-weight:500;
}
/* ===== Sheet body ===== */
.sh-body{padding:24px 26px 32px;background:#f4f5f7}
.sh-row{display:grid;gap:18px;margin-bottom:18px}
.sh-row:last-child{margin-bottom:0}
.sh-row-1{grid-template-columns:1fr}
.sh-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sh-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ===== KPI strip ===== */
.kpi-strip{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:14px;margin-bottom:20px;
}
.kpi-strip:has(.kpi-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-card{
position:relative;background:#fff;
padding:18px 20px 16px;border-radius:6px;
box-shadow:0 1px 2px rgba(20,25,40,.04);
border:1px solid #ecedf0;
display:flex;flex-direction:column;gap:5px;
overflow:hidden;
}
.kpi-accent{
position:absolute;top:0;left:0;right:0;height:2.5px;
}
.kpi-label{
font-size:10.5px;font-weight:600;letter-spacing:.07em;
text-transform:uppercase;color:#8a92a0;
}
.kpi-value{
font-size:32px;font-weight:600;color:#0f1115;
font-variant-numeric:tabular-nums;
line-height:1.05;letter-spacing:-.018em;
margin-top:2px;
}
.kpi-foot{
font-size:11.5px;color:#8a92a0;font-weight:500;
min-height:14px;
}
.dh-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600}
.dh-delta.delta-up{color:#3d8b3d}
.dh-delta.delta-dn{color:#c44b3e}
/* ===== Chart tile ===== */
.tile{
background:#fff;border-radius:6px;
box-shadow:0 1px 2px rgba(20,25,40,.04);
border:1px solid #ecedf0;
display:flex;flex-direction:column;min-width:0;
}
.tile-feature{border-color:#dfe2e9}
.tile-head{
padding:18px 22px 4px;
}
.tile-head h3{
font-size:14px;font-weight:600;color:#0f1115;margin:0 0 3px;
letter-spacing:-.005em;
}
.tile-sub{
font-size:11.5px;color:#8a92a0;font-weight:500;
}
.tile-body{padding:14px 22px 22px;min-width:0;overflow:hidden}
/* ===== Horizontal bar list ===== */
.hbar-chart{display:flex;flex-direction:column;gap:5px}
.hb-row{
display:grid;grid-template-columns:minmax(90px, 38%) 1fr 56px;
align-items:center;gap:12px;
font-size:12px;line-height:1.3;min-height:18px;
}
.hb-label{
color:#525a6b;font-weight:500;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:11.5px;
}
.hb-track{
background:#f1f2f5;height:7px;border-radius:1.5px;
position:relative;overflow:hidden;
}
.hb-track-pct{background:#f4f5f7;position:relative}
.hb-track-pct::after{
content:'';position:absolute;left:0;top:0;bottom:0;width:100%;
background-image:linear-gradient(90deg,#e8eaef 0 1px,transparent 1px);
background-size:25% 100%;background-repeat:repeat-x;pointer-events:none;
}
.hb-fill{display:block;height:100%;border-radius:1.5px;transition:width .25s}
.hb-value{
text-align:right;font-variant-numeric:tabular-nums;
font-weight:500;color:#0f1115;font-size:11.5px;font-family:var(--mono);
}
/* Chart inside tile — constrain to comfortable height */
.tile-body .chart-svg{max-height:240px}
.tile-feature .tile-body .chart-svg{max-height:280px}
.donut-wrap .chart-svg{max-height:180px;width:180px;flex-shrink:0}
/* ===== Empty / error ===== */
.dh-empty{
padding:32px 18px;text-align:center;color:#8a92a0;font-size:12.5px;
background:#fafbfc;border:1px dashed #dfe2e9;border-radius:4px;
}
.dh-fatal{
background:#fff5f3;border:1px solid #f4c8be;
padding:14px 18px;margin:18px 26px;color:#9a3923;
font-size:13px;border-radius:4px;
}
/* ===== SVG charts ===== */
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.dh-line text, .dh-col text, .dh-multiline text{font-family:var(--ui)}
/* ===== Donut chart ===== */
.donut-wrap{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.donut-wrap .dh-donut{width:200px;height:200px}
.donut-legend{display:flex;flex-direction:column;gap:6px;font-size:12px;min-width:0}
.dn-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px}
.dn-sw{width:11px;height:11px;border-radius:2px;display:inline-block}
.dn-l{color:#525a6b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-v{font-variant-numeric:tabular-nums;color:#0f1115;font-weight:600;font-family:var(--mono);font-size:11.5px}
/* ===== Responsiveness ===== */
@media (max-width: 1200px){
.kpi-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.sh-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.sh-row-2,.sh-row-3{grid-template-columns:1fr}
.hb-row{grid-template-columns:90px 1fr 50px}
.sh-body{padding:18px 14px}
.donut-wrap{grid-template-columns:1fr;text-align:center}
.dh-sheets{padding:0 14px;overflow-x:auto}
}
/* ===== Cross-filter chips (Tableau marks-filter feel) ===== */
.dh-chips-bar{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:10px 26px;background:#fbfaf4;
border-bottom:1px solid #f0ead8;
}
.dh-chips-prelabel{
font-size:9.5px;font-weight:700;letter-spacing:.1em;
color:#8a7d4d;margin-right:4px;
}
.dh-chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 4px 4px 10px;background:#fff;
border:1px solid #e0d9b8;border-radius:14px;
font-size:11.5px;color:#1a1d24;text-decoration:none;
transition:border-color .12s, background .12s;
}
.dh-chip:hover{border-color:#c4b885;background:#fbf6e3}
.dh-chip-k{color:#8a7d4d;font-weight:500}
.dh-chip-v{font-weight:600;color:#0f1115}
.dh-chip-x{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:50%;background:#f0ead8;
color:#6a5e35;font-size:9px;margin-left:4px;
}
.dh-chip:hover .dh-chip-x{background:#c4b885;color:#fff}
.dh-chips-clear{
margin-left:6px;font-size:11.5px;font-weight:500;color:#5b6273;
text-decoration:underline;
}
/* ===== Clickable bar rows ===== */
.hb-clickable{
text-decoration:none;color:inherit;
padding:2px 0;margin:-2px 0;border-radius:3px;
transition:background .1s;cursor:pointer;
position:relative;
}
.hb-clickable:hover{background:#f4f5f7}
.hb-clickable:hover .hb-label{color:#3358d4}
.hb-clickable:hover .hb-fill{filter:brightness(1.08)}
.dn-clickable{
text-decoration:none;color:inherit;
padding:3px 5px;margin:-3px -5px;border-radius:3px;
transition:background .1s;
}
.dn-clickable:hover{background:#f4f5f7}
.dh-donut a{cursor:pointer}
.dh-donut a:hover path{filter:brightness(1.06)}
/* ===== Heatmap / highlight table (CSS-grid based, Tableau-style) ===== */
.heatmap-wrap{display:flex;flex-direction:column;gap:12px;overflow-x:auto}
.heatmap-grid{
display:grid;gap:3px;
align-items:stretch;
}
/* Empty corner (top-left) */
.hm-corner{background:transparent}
/* Column headers (top row, after corner) */
.hm-colhead{
background:#f4f5f7;border-radius:2px;
font-family:var(--ui);
font-size:10.5px;font-weight:600;letter-spacing:.04em;
color:#5b6273;text-transform:uppercase;
display:flex;align-items:center;justify-content:center;
padding:7px 4px;min-height:30px;
}
/* Row label (first column of each body row) */
.hm-rowhead{
display:flex;align-items:center;justify-content:flex-end;
padding:0 12px 0 0;
font-family:var(--ui);
font-size:12px;font-weight:600;color:#0f1115;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Data cells */
.hm-cell{
display:flex;align-items:center;justify-content:center;
height:40px;border-radius:2px;
font-family:var(--mono);font-weight:600;font-size:12px;
font-variant-numeric:tabular-nums;
color:inherit;text-decoration:none;
transition:transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.hm-cell.hm-light{color:#ffffff}
.hm-cell.hm-dark{color:#0f1115}
.hm-cell.hm-empty{
background:#fafafa;color:#c0c5cf;font-weight:400;
border:1px dashed #ecedf0;
}
.hm-cell.hm-clickable{cursor:pointer}
.hm-cell.hm-clickable:hover{
filter:brightness(1.08);
box-shadow:0 0 0 2px #0f1115 inset, 0 4px 12px rgba(20,25,40,.15);
z-index:2;position:relative;
}
/* Legend below */
.heatmap-legend{
display:flex;align-items:center;gap:10px;
font-size:10.5px;font-family:var(--mono);
color:#5b6273;font-weight:500;
align-self:flex-start;
}
.hm-leg-bar{
width:160px;height:9px;border-radius:1.5px;display:inline-block;
background:linear-gradient(to right,
rgb(247,251,255) 0%,
rgb(198,219,239) 25%,
rgb(107,174,214) 50%,
rgb(33,113,181) 75%,
rgb(8,48,107) 100%);
}
.hm-leg-lo,.hm-leg-hi{font-variant-numeric:tabular-nums}
/* =================================================================
Data Models — index + editor
================================================================= */
.dm-empty{
max-width:520px;margin:48px auto;text-align:center;
background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--c-radius);padding:44px 36px;
}
.dm-empty .material-symbols-outlined{font-size:40px;color:var(--c-faint)}
.dm-empty h2{font-size:var(--t-head);font-weight:600;letter-spacing:-.014em;margin:12px 0 8px;color:var(--c-ink)}
.dm-empty p{color:var(--c-ink2);font-size:var(--t-body);line-height:1.65;margin-bottom:20px}
.dm-empty strong{color:var(--c-ink);font-weight:600}
.dm-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:16px;
}
/* R10: a card at rest is a border. Hover firms the border and lifts it a
little — it does not slide upward under the cursor. */
.dm-card{
display:block;background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--c-radius);
padding:18px 20px;text-decoration:none;color:inherit;
transition:border-color .15s, box-shadow .15s;
}
.dm-card:hover{border-color:var(--s-8);box-shadow:var(--elev-1)}
.dm-card-head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.dm-card-name{font-size:var(--t-title);font-weight:600;color:var(--c-ink);letter-spacing:-.012em}
.dm-card-src{font-size:var(--t-meta);color:var(--c-muted)}
.dm-card-stats{display:flex;align-items:center;gap:8px;font-size:var(--t-meta);color:var(--c-muted);margin-bottom:12px;
font-variant-numeric:tabular-nums}
.dm-card-stats b{color:var(--c-ink);font-weight:600}
.dm-dot{color:var(--c-line3)}
.dm-card-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--c-line2);padding-top:11px}
.dm-chip{
width:20px;height:18px;border-radius:var(--r-1);display:inline-flex;align-items:center;justify-content:center;
font-size:var(--t-micro);font-weight:600;font-family:var(--mono);
}
.dm-chip.dim{background:var(--c-dim-bg);color:var(--c-dim)}
/* R5: a composite is authored rather than discovered, so it wears the same
accent that marks every other authored thing on these pages. */
.dm-chip.fx{background:var(--c-accent-3);color:var(--c-accent-2);border:1px solid var(--i-6)}
.dm-fname{font-size:var(--t-meta);color:var(--c-ink2)}
.dm-more{font-size:var(--t-micro);font-weight:600;color:var(--c-muted)}
/* Freshness: whether there is a local copy, how old it is, and how big. */
.dm-card-sync{display:flex;align-items:center;gap:7px;font-size:var(--t-meta);color:var(--c-muted);
margin-bottom:12px;font-variant-numeric:tabular-nums}
.dm-card-dot{width:7px;height:7px;border-radius:var(--r-full);background:var(--c-ok);flex:none}
.dm-card-dot.is-cold{background:var(--c-warn)}
/* ---- Editor ---- */
/* This one lives in the top bar, OUTSIDE .wb, so it reads the global tokens. */
.dm-back{display:inline-flex;align-items:center;color:var(--muted);margin-right:4px;vertical-align:-2px}
.dm-back:hover{color:var(--primary)}
/* Composition summary — a composite model's read-only account of itself. */
.dm-comp{padding:16px 24px;background:var(--c-panel);border-bottom:1px solid var(--c-line)}
.dm-comp-h{margin-bottom:10px}
.dm-comp-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.dm-comp-primary,.dm-comp-join{display:flex;flex-direction:column;gap:2px;padding:9px 14px;
border:1px solid var(--c-line);border-radius:var(--c-radius);background:var(--c-panel);min-width:0}
/* R5: the primary is marked by an accent rule, not an accent wash. */
.dm-comp-primary{border-left:3px solid var(--c-accent);padding-left:12px}
.dm-comp-tag{font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.dm-comp-model{font-size:var(--t-body);font-weight:600;color:var(--c-ink)}
.dm-comp-count{font-size:var(--t-meta);color:var(--c-muted);font-variant-numeric:tabular-nums}
.dm-comp-join-sql{font-size:var(--t-data);color:var(--c-ink)}
.dm-comp-join-plain{font-size:var(--t-meta);color:var(--c-muted)}
/* The source stopped providing a column this model still names. */
.dm-drift{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;padding:11px 13px;
border:1px solid var(--c-danger-line);border-radius:var(--c-radius);background:var(--c-danger-bg);color:var(--c-danger-ink)}
.dm-drift .material-symbols-outlined{font-size:19px;flex:none;color:var(--c-danger)}
.dm-drift-body{min-width:0}
.dm-drift-body p{margin:0 0 6px;font-size:var(--t-meta);line-height:1.55;max-width:80ch}
.dm-drift-what{opacity:.9}
.dm-drift form{margin-top:2px}
/* A combined model whose member is gone: it can never be rebuilt. */
.dm-comp-frozen{display:flex;gap:7px;align-items:flex-start;margin-top:10px;padding:9px 12px;
border:1px solid var(--c-warn-line);border-radius:var(--r-1);background:var(--c-warn-bg);color:var(--c-warn-ink);
font-size:var(--t-meta);line-height:1.55;max-width:80ch}
.dm-comp-frozen .material-symbols-outlined{font-size:17px;flex:none;color:var(--c-warn)}
.dm-comp-fresh{margin-top:10px;font-size:var(--t-meta);color:var(--c-muted);font-variant-numeric:tabular-nums}
.dm-comp-fresh b{color:var(--c-ink);font-weight:600}
.dm-comp-note{margin:8px 0 0;font-size:var(--t-meta);line-height:1.55;color:var(--c-muted);max-width:70ch}
/* =================================================================
Charting system — renderer primitives + snapshot board + generator
================================================================= */
:root{ --pc-ink:#1a1d24; --pc-mute:#8a92a0; --pc-line:#e7e9ee; --pc-bg:#f6f7f9; }
/* ---- Renderer primitives (used by charts.js) ---- */
.pc-host{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}
/* Facet grid — small multiples. Each panel gets a definite height so Apex mounts. */
.pc-facet-grid{display:grid;gap:10px 12px;width:100%;height:100%;overflow-y:auto;align-content:start;padding:2px}
.pc-facet-cell{min-width:0;display:flex;flex-direction:column;border:1px solid var(--pc-grid,#e7e9ef);border-radius:8px;padding:8px 10px 4px;background:var(--pc-surface,#fff)}
.pc-facet-h{font-size:11.5px;font-weight:650;color:var(--pc-ink,#21252b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.pc-facet-box{flex:1;min-height:150px;min-width:0}
.pc-facet-note{grid-column:1/-1;font-size:11.5px;color:var(--pc-mute,#6b7280);padding:2px 4px}
.pc-svg{flex:1;min-height:0;display:block}
.pc-svg text.pc-ax{font-family:var(--mono);font-size:13.5px;fill:var(--pc-mute)}
.pc-svg text.pc-val{font-family:var(--mono);font-size:13px;fill:#3a3f4a;font-weight:600}
.pc-svg text.pc-val-on{font-family:var(--mono);font-size:12px;fill:#fff;font-weight:700;text-anchor:middle}
.pc-svg text.pc-axtitle{font-family:var(--ui,"IBM Plex Sans");font-size:13.5px;fill:#697086;font-weight:600;letter-spacing:.02em}
.pc-svg text.pc-axlabel{font-family:var(--ui);font-size:11px;fill:var(--pc-mute)}
.pc-svg text.pc-donut-total{font-family:var(--ui);font-size:22px;font-weight:600;fill:var(--pc-ink);text-anchor:middle}
.pc-svg text.pc-donut-cap{font-family:var(--mono);font-size:9.5px;fill:var(--pc-mute);letter-spacing:.08em;text-anchor:middle}
.pc-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--pc-mute);font-size:12.5px;padding:24px;text-align:center}
.pc-empty.err{color:#c0392b}
.pc-data-notice{flex:none;margin:0 0 8px;padding:7px 10px;border-left:3px solid var(--tile-accent,var(--pv-accent,var(--pv-head-accent)));
background:color-mix(in srgb,var(--tile-accent,var(--pv-accent,var(--pv-head-accent))) 7%,#fff);color:var(--pc-ink,#252833);
font-size:11.5px;font-weight:550;line-height:1.35}
.pc-data-plot{display:flex;flex:1;flex-direction:column;width:100%;min-width:0;min-height:0}
.pc-legend{display:flex;flex-wrap:wrap;gap:5px 14px;padding:4px 6px 10px;font-size:12px;color:#3a3f4a;font-weight:500}
.pc-leg-item{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:220px}
.pc-leg-sw{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
.pc-leg-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* KPI + Trend card (big number · year bars · trend line) */
.pc-kt{flex:1;display:grid;grid-template-columns:minmax(96px,auto) 1fr 1.4fr;align-items:stretch;gap:20px;min-height:0}
.pc-kt-ban{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.pc-kt-colh{font-size:11.5px;color:#7a8294;font-weight:600;line-height:1.25;letter-spacing:.005em}
.pc-kt-yr{color:#aab1bf;font-weight:500}
.pc-kt-num{font-size:46px;font-weight:600;color:#0f1115;line-height:.98;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.pc-kt-col{min-width:0;display:flex;flex-direction:column;min-height:0}
.pc-kt-thead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px;height:16px}
.pc-kt-tl{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:#aeb4be;font-weight:700}
.pc-kt-col .pc-svg{flex:1;min-height:0}
/* Board setup: structured tabs editor + version history */
.bs-tab-rows{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.bs-tab-row{display:flex;gap:6px;align-items:center}
.bs-tab-row input{flex:1;min-width:0;border:1px solid var(--border-2,#e2e2e6);padding:4px 7px;font-size:12.5px;border-radius:3px}
.bs-tabs-json{margin-top:4px}
.bs-tabs-json summary{font-size:11.5px;color:var(--muted,#83838c);cursor:pointer}
.bs-tabs-json textarea{width:100%;font-family:var(--mono);font-size:11.5px;margin-top:4px}
.bs-history{border-top:1px solid var(--border-2,#e2e2e6);margin-top:12px;padding-top:10px}
.bs-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.bs-history-name{display:flex;gap:6px;align-items:center}
.bs-history-name input{border:1px solid var(--border-2,#e2e2e6);padding:4px 7px;font-size:12.5px;border-radius:3px;width:180px}
.bs-history-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.bs-ver-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 7px;border:1px solid var(--border-2,#e2e2e6);border-radius:4px;background:var(--surface-2,#f7f7f8)}
.bs-ver-main{display:flex;flex-direction:column;min-width:0}
.bs-ver-label{font-size:12.5px}
.bs-ver-auto{font-size:11px;color:var(--muted,#83838c);text-transform:uppercase;letter-spacing:.04em}
.bs-ver-meta{font-size:11px;color:var(--muted,#83838c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-ver-restore{font-size:11.5px;padding:3px 9px}
/* Per-filter config tools (multi toggle + default pin) in the admin filter panel */
.fctl-tools{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.fctl-tool{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-2,#52525a)}
.fctl-tool-btn{border:1px solid var(--border-2,#e2e2e6);background:var(--surface,#fff);font-size:11px;
padding:2px 8px;border-radius:3px;cursor:pointer;color:var(--ink-2,#52525a)}
.fctl-tool-btn:hover{border-color:var(--violet-line,#d6c7f5);color:var(--violet,#7c3aed)}
/* Hierarchy drill breadcrumbs — sit inside the tile header, one crumb per
walked level; the trailing crumb is the current position. */
.pc-drillcrumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:11px;margin-top:2px;width:100%}
.pc-crumb{border:0;background:none;padding:1px 4px;font-size:11px;color:var(--violet,#7c3aed);cursor:pointer;border-radius:3px}
.pc-crumb:hover{background:var(--violet-bg,#f0eafd)}
.pc-crumb:last-child{color:var(--ink,#1d1d21);font-weight:600;cursor:default}
.pc-crumb:last-child:hover{background:none}
.pc-crumb-sep{color:#b9bec9}
/* Apex sparkline host inside a kpi_trend panel + its first/last-category caption
row (sparkline mode hides Apex's own axes). */
.pc-kt-mini{width:100%;min-height:0;flex:1}
.pc-kt-mini .apexcharts-canvas{margin:0 auto}
.pc-kt-current-col{justify-content:flex-start}
.pc-kt-current{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:88px;padding:8px 6px 4px}
.pc-kt-progress-track{height:8px;overflow:hidden;border-radius:999px;background:var(--c-line,#e3e5e9)}
.pc-kt-progress-track i{display:block;height:100%;min-width:2px;border-radius:inherit}
.pc-kt-current-reading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--c-ink,#1a1d24)}
.pc-kt-current-reading span{font-size:11.5px;font-weight:650;color:var(--c-muted,#6b7280)}
.pc-kt-current-reading b{font:650 18px/1 var(--display,var(--ui));font-variant-numeric:tabular-nums}
.pc-kt-current p{margin:0;max-width:300px;font-size:11px;line-height:1.4;color:var(--c-faint,#8b94a3)}
.pc-kt-yearswitch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px;margin:0 4px 4px;padding:3px;
border:1px solid var(--c-line,#e3e5e9);border-radius:8px;background:#f3f5f8}
.pc-kt-yearswitch button{min-width:0;padding:5px 9px;border:0;border-radius:5px;background:transparent;color:var(--c-muted,#6b7280);
font:inherit;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.pc-kt-yearswitch button:last-child{text-align:right}
.pc-kt-yearswitch button:hover{color:var(--c-ink,#1a1d24)}
.pc-kt-yearswitch button.on{background:#fff;color:var(--c-ink,#1a1d24);box-shadow:0 1px 3px rgba(25,35,50,.12)}
.pc-kt-yearswitch b,.pc-kt-yearswitch small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-kt-yearswitch b{font-size:10px;font-weight:750}
.pc-kt-yearswitch small{margin-top:2px;font-size:9px;color:var(--c-faint,#8b94a3)}
.pc-kt-yearswitch button.is-empty small{font-style:italic}
.pc-kt-caps{display:flex;justify-content:space-between;gap:8px;padding:0 4px;
font-size:10px;color:#9aa1ad;line-height:1.2}
/* Year-over-year arrow — sits in the trend header, right above the chart.
Squared (no pill), tinted block. */
.pc-kt-delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;white-space:nowrap;
padding:2px 7px;border-radius:0}
.pc-kt-delta.up{color:#2d7d46;background:rgba(45,125,70,.1);border-left:2px solid #2d7d46}
.pc-kt-delta.dn{color:#c0392b;background:rgba(192,57,43,.09);border-left:2px solid #c0392b}
.pc-kt-delta i{color:#9aa1ad;font-style:normal;font-weight:500;font-size:11px}
.pc-kt-deltawrap{display:flex;align-items:flex-end}
.pc-kt-trend{position:relative}
/* ---- KPI spine: full-height column fused to the card's left edge — a quiet
accent wash carrying the number, the change, and the comparison ledger.
The gradient header holds the color identity; the spine stays calm. ---- */
.tile-body:has(> .pc-kt .pc-kt-spine){padding:0}
.tile-body:has(> .pc-kt .pc-kt-spine) > .pc-kt{gap:18px;padding-right:15px}
.tile-body:has(> .pc-kt .pc-kt-spine) .pc-kt-col{padding:12px 0 14px}
/* ---- Report-card ledger KPI spine ---- top-aligned: eyebrow → hero number →
one accent hairline → aligned comparison rows (Last year · Change · Goal). */
.pc-kt-spine{
display:flex;flex-direction:column;min-width:0;justify-content:flex-start;
padding:16px 18px 15px;
background:color-mix(in srgb, var(--tile-accent,var(--pv-accent,var(--pv-head-accent))) 3%, #fff);
border-right:1px solid var(--c-line,#e3e5e9);
}
/* eyebrow: the metric name as a quiet brand-tinted label */
.pc-kt-spine .pc-kt-colh{
font-size:10px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;line-height:1.3;
color:color-mix(in srgb, var(--tile-accent,var(--pv-accent,var(--pv-head-accent))) 58%, var(--c-muted,#6b7280));
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* hero number — no orphan underline */
.pc-kt-spine .pc-kt-num{
color:var(--c-ink,#1a1d24);font-size:40px;font-weight:650;letter-spacing:-.022em;line-height:1;
margin-top:7px;font-variant-numeric:tabular-nums;
}
.pc-kt-spine .pc-kt-hasnote{border-bottom-color:rgba(120,128,144,.4)}
.pc-kt-bdelta{display:none} /* delta now lives in the ledger as the Change row */
.pc-kt-rows{margin-top:13px;padding-top:9px;display:flex;flex-direction:column;gap:6px;
border-top:2px solid color-mix(in srgb, var(--tile-accent,var(--pv-accent,var(--pv-head-accent))) 55%, transparent)}
.pc-kt-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.pc-kt-row-l{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint,#9aa1ad);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-kt-row-l em{font-style:normal;color:#c0c5cd;margin-left:3px}
.pc-kt-row b{font-size:13px;font-weight:700;color:var(--c-ink,#1a1d24);font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.pc-kt-rowd.up{color:#2d7d46}
.pc-kt-rowd.dn{color:#c0392b}
.pc-kt-met-dot{width:8px;height:8px;border-radius:50%;align-self:center;flex:none}
.pc-kt-met-dot.y{background:#3f8a5e;box-shadow:0 0 0 2.5px rgba(63,138,94,.18)}
.pc-kt-met-dot.n{background:transparent;border:2px solid #c9a35c}
/* flat (panel-less) KPI tile: label, then number + arrow on one line */
.pc-kt-flat{gap:2px;justify-content:center;min-height:0}
.pc-kt-numrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.pc-kt-flat .pc-kt-num{font-size:25px;line-height:1.05}
.pc-kt-flat .pc-kt-colh{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-kt-numrow .pc-kt-delta{font-size:11px;padding:1px 6px}
.pc-kt-numrow .pc-kt-delta i{font-size:10px}
.pc-kt-hasnote{cursor:help;border-bottom:2px dotted rgba(120,128,144,.45);padding-bottom:1px;align-self:flex-start}
/* Phone: stack the KPI number + each chart panel vertically (don't hide them);
panels get an explicit height since the scaling SVGs need a box to fit into. */
@media (max-width:560px){
.pc-kt{grid-template-columns:1fr!important;gap:14px}
.pc-kt-ban{align-items:flex-start}
.pc-kt-num{font-size:40px}
.pc-kt-col,.pc-kt-trend{display:flex!important;height:188px}
}
.pc-kpi{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 6px;gap:6px;min-width:0;overflow:hidden}
.pc-kpi-value{font-size:42px;font-weight:600;color:var(--pc-ink);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc-kpi-label{font-size:12px;color:var(--pc-mute);font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* compact KPI rail tiles — smaller number so nothing clips */
.pc-kpi-sm{padding:2px 4px;gap:3px}
.pc-kpi-sm .pc-kpi-value{font-size:27px}
.pc-kpi-sm .pc-kpi-label{font-size:11px}
/* KPI group — several "At a glance" tiles stacked in one card */
.pc-kpig{display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center}
.pc-kpig-tile{background:var(--pc-surface2,#f1efe8);border-radius:8px;padding:8px 11px}
.pc-kpig-l{font-size:11px;color:var(--pc-mute);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-kpig-v{font-size:23px;font-weight:600;color:var(--pc-ink);line-height:1.15;font-variant-numeric:tabular-nums}
/* Controls card — color-scale legend that accompanies a linked chart */
.pc-ctlcard{display:flex;flex-direction:column;gap:6px;justify-content:flex-end;height:100%;padding-top:6px}
.pc-ctlcard-l{font-size:11px;color:var(--pc-mute)}
/* Legend ramp derives from the theme's "bad" token (defaults to the historical
red) instead of a fixed palette, so themed boards keep one color system. */
.pc-ctlcard-grad{height:12px;border-radius:3px;background:linear-gradient(90deg,
color-mix(in srgb, var(--pv-bad,#e24b4a) 8%, #fff),
color-mix(in srgb, var(--pv-bad,#e24b4a) 55%, #fff),
var(--pv-bad,#e24b4a),
color-mix(in srgb, var(--pv-bad,#e24b4a) 72%, #000))}
.pc-ctlcard-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--pc-mute)}
.pc-table-scroll{flex:1;overflow:auto;min-height:0}
.pv-table-top-scroll{
display:none;flex:0 0 auto;width:100%;height:16px;overflow-x:auto;overflow-y:hidden;
margin:0 0 4px;border:1px solid var(--c-line2,#e2e5ea);border-width:1px 0;
background:var(--c-canvas,#fafbfc);scrollbar-color:var(--c-muted,#8a92a0) transparent;
scrollbar-width:auto
}
.pv-table-top-scroll.is-scrollable{display:block}
.pv-table-top-scroll-space{height:1px}
.pv-table-top-scroll::-webkit-scrollbar{height:12px}
.pv-table-top-scroll::-webkit-scrollbar-track{background:var(--c-canvas,#fafbfc)}
.pv-table-top-scroll::-webkit-scrollbar-thumb{
background:var(--c-muted,#8a92a0);border:3px solid var(--c-canvas,#fafbfc);border-radius:0
}
.pc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.pc-table th{position:sticky;top:0;background:#fafbfc;text-align:left;padding:9px 14px;font-weight:700;font-size:9.5px;
letter-spacing:.06em;text-transform:uppercase;color:#8a92a0;border-bottom:1.5px solid #e2e5ea;white-space:nowrap}
.pc-table th[data-pc-sort]{cursor:pointer;user-select:none}
.pc-table th[data-pc-sort]::after{content:"";display:inline-block;width:0;margin-left:6px;color:#a5adba}
.pc-table th[data-sort-dir="asc"]::after{content:"▲"}
.pc-table th[data-sort-dir="desc"]::after{content:"▼"}
.pc-table td{padding:8px 14px;border-bottom:1px solid #f1f2f5;color:var(--pc-ink);white-space:nowrap}
.pc-table td:first-child{font-weight:600;color:#23262e}
.pc-table-click tbody tr{cursor:pointer}
.pc-table-click tbody tr:hover td{background:#f4f7fb}
.pc-table tbody tr.pc-student-row{cursor:pointer}
.pc-table tbody tr.pc-student-row:hover td{background:var(--c-accent-bg,#eef4ff)}
.pc-table tbody tr.pc-student-row:focus{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:-2px}
.pc-student-link{color:var(--brand-primary,#2f64d6);font-weight:650;text-decoration:none}
.pc-student-link:hover{text-decoration:underline}
.pc-td-num{text-align:right}
.pc-table td.pc-td-num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#3a3f4a}
.pc-table tbody tr:last-child td{border-bottom:none}
.pc-table tbody tr:hover td{background:#fafbfc}
/* E6 rich cells: heat fill, in-cell bar, sparkline */
.pc-table td.pc-td-heat{color:#3a3f4a;font-weight:600;transition:none}
.pc-table tbody tr:hover td.pc-td-heat{filter:brightness(.97)}
.pc-table td.pc-td-bar{position:relative;overflow:hidden}
.pc-td-bar .pc-cellbar{position:absolute;left:0;top:50%;transform:translateY(-50%);height:62%;
background:var(--pv-chart-1,#534ab7);opacity:.16;border-radius:0 2px 2px 0;pointer-events:none}
.pc-td-bar .pc-cellbar-v{position:relative}
.pc-pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
line-height:1.55;letter-spacing:.01em;white-space:nowrap}
.pc-table td.pc-td-spark{padding:2px 12px;vertical-align:middle}
.pc-spark{display:block;overflow:visible}
/* Static text / explanatory tile */
.pc-text{font-size:13.5px;line-height:1.62;color:var(--pc-ink,#1a1d24);max-width:74ch}
.pc-text p{margin:0 0 9px}
.pc-text p:last-child{margin-bottom:0}
.pc-text strong{font-weight:600;color:#11131a}
.pc-text em{font-style:italic}
/* Text tile = clean editorial callout (no chart chrome); prose flows in columns when wide */
.tile-text{display:block;background:linear-gradient(165deg,
color-mix(in srgb, var(--brand-primary,#2f64d6) 5%, #fdfdfc) 0%, #fdfdfc 45%);
border:1px solid var(--c-line);border-left:3px solid var(--brand-primary,#2f64d6);
border-top:1px solid var(--c-line);border-radius:5px;box-shadow:0 1px 2px rgba(20,25,40,.04);overflow:hidden}
.tile-text .tile-body{display:block;flex:none;padding:0;min-height:0}
.tile-text-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--brand-primary,#2f64d6);padding:16px 24px 0;display:flex;align-items:center;gap:10px}
.tile-text-h::after{content:"";flex:1;height:1px;background:var(--c-line)}
.tile-text .pc-text{max-width:none;padding:10px 24px 18px;font-size:13.5px;color:var(--c-ink2);column-width:380px;column-gap:46px}
.tile-text .pc-text p{break-inside:avoid}
.tile-text .pc-text p:first-child{font-family:var(--serif,Georgia,serif);font-size:15px;line-height:1.6;color:var(--c-ink);column-span:all;margin-bottom:11px}
.tile-text .pc-text strong{color:var(--c-ink)}
.tile-text .pc-text a{color:var(--brand-primary,#2f64d6);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--brand-primary,#2f64d6) 40%, #fff)}
/* SECTION SEPARATOR — full-width text tiles that head a card group (data-section).
Not a boxed callout: a clean brand eyebrow + a hairline rule across the row.
The body text just repeats the label, so it's suppressed; the title carries it.
Scoped to [data-section] so standalone text callouts keep their card style. */
.tile-text[data-section]{background:none;border:none;box-shadow:none;border-radius:0;overflow:visible}
.tile-text[data-section] .tile-body{padding:0}
.tile-text[data-section] .tile-text-h{
padding:14px 2px 4px;font-size:11px;font-weight:700;letter-spacing:.13em;gap:14px;
color:color-mix(in srgb, var(--brand-primary,#2f64d6) 78%, var(--c-ink2,#3a3f4a));
}
.tile-text[data-section] .tile-text-h::after{height:1px;background:var(--c-line,#e3e5e9);align-self:center}
.tile-text[data-section] .pc-text{display:none}
.tile-text .pc-text a:hover{border-bottom-color:var(--brand-primary,#2f64d6)}
/* ===== Family progress report (plain-language PDF variant) ===== */
.prxf{font-size:11.5px;line-height:1.55}
.prx-copytag{font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
border:1.5px solid currentColor;padding:2px 7px 1px;color:#41454e}
.prx-copytag.family{color:#2f7d52}
.prx-copytag.staff{color:#41454e}
.prxf-intro{font-size:11px;color:#41454e;line-height:1.6;margin:12px 0 0;max-width:64ch}
.prxf-intro b{color:#16181d}
.prxf-subj{border-left:3px solid #d9dce1;padding:7px 0 8px 13px;margin-bottom:9px}
.prxf-subj.tone-good{border-left-color:#2f7d52}
.prxf-subj.tone-ok{border-left-color:#9a7b2e}
.prxf-subj.tone-warn{border-left-color:#b0573a}
.prxf-subj.tone-bad{border-left-color:#9a3f33}
.prxf-subj-head{display:flex;align-items:baseline;gap:12px}
.prxf-subj-head b{font-family:var(--serif,Georgia,serif);font-size:13px;font-weight:600}
.prxf-verdict{font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.prxf-verdict.v-good{color:#2f7d52}.prxf-verdict.v-ok{color:#9a7b2e}
.prxf-verdict.v-warn{color:#b0573a}.prxf-verdict.v-bad{color:#9a3f33}
.prxf-subj-line{font-size:10.5px;color:#41454e;margin:3px 0 0;max-width:70ch}
.prxf-terms{display:flex;align-items:baseline;gap:16px;margin-top:6px}
.prxf-term{display:inline-flex;align-items:baseline;gap:5px}
.prxf-term i{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8f99}
.prxf-term b{font-family:var(--mono);font-size:11px;font-weight:600}
.prxf-term-cap{font-size:8px;color:#9aa0aa;font-style:italic;margin-left:4px}
.prxf-line{font-size:11px;color:#2c2f36;margin:2px 0 0;max-width:72ch;line-height:1.6}
.prxf-good{color:#2f7d52;font-weight:600}
.prxf-soft{color:#5d626c;font-size:10px;margin-top:5px}
.prxf-goal{margin-top:18px;max-width:430px}
.prxf-goal-track{position:relative;height:13px;background:#eef0f3;border:1px solid #d9dce1}
.prxf-goal-fill{height:100%}
.prxf-goal-fill.t-good{background:#2f7d52}.prxf-goal-fill.t-ok{background:#9a7b2e}.prxf-goal-fill.t-warn{background:#b0573a}
.prxf-goal-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:#16181d}
.prxf-goal-mark span{position:absolute;top:-12px;left:-22px;font-size:7.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:#16181d;white-space:nowrap}
.prxf-goal-axis{display:flex;justify-content:space-between;font-size:7.5px;color:#9aa0aa;margin-top:3px}
.prxf-t td,.prxf-t th{padding:4.5px 8px}
.prxf-contact{margin-top:16px;border:1px solid #d9dce1;border-left:3px solid var(--brand-primary,#2f64d6);
background:#fcfcfb;padding:9px 13px;font-size:10.5px;color:#41454e}
.prxf-contact b{color:#16181d}
.prxf-chart-card{border:1px solid #d9dce1;background:#fcfcfb;border-left:3px solid var(--brand-primary,#2f64d6);
padding:8px 10px 4px;margin:0 0 10px;break-inside:avoid;page-break-inside:avoid}
.prxf-chart-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.prxf-chart-card b{font-family:var(--serif,Georgia,serif);font-size:12px;font-weight:600;color:#16181d}
.prxf-chart-card span{font-size:7.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a8f99}
.prxf-chart{height:132px;width:100%;min-width:0;overflow:hidden}
/* ===== Export-record modal — a document-preparation slip ===== */
.xpm-scrim{position:fixed;inset:0;z-index:90;background:rgba(16,18,24,.46);backdrop-filter:blur(2px);
animation:xpmFade .16s ease-out}
.xpm{position:fixed;z-index:95;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(480px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;
background:#fdfdfc;border:1px solid var(--c-line);border-radius:2px;
box-shadow:0 6px 16px rgba(16,18,24,.14),0 28px 70px rgba(16,18,24,.3);
animation:xpmRise .2s ease-out}
@keyframes xpmFade{from{opacity:0}}
@keyframes xpmRise{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}}
body.xpm-open{overflow:hidden}
/* double rule across the top — same anatomy as the record masthead */
.xpm-rule{height:5px;border-top:2.5px solid var(--c-ink);border-bottom:1px solid var(--c-ink);margin:14px 22px 0}
.xpm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 22px 0}
.xpm-eyebrow{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-primary,#2f64d6)}
.xpm-title{font-family:var(--serif,Georgia,serif);font-size:19px;font-weight:600;color:var(--c-ink);margin:5px 0 3px;letter-spacing:-.01em}
.xpm-sub{font-size:11.5px;color:var(--c-muted)}
.xpm-sub .mono{font-family:var(--mono)}
.xpm-x{font:inherit;font-size:13px;color:var(--c-faint);background:none;border:none;cursor:pointer;padding:4px 6px;line-height:1}
.xpm-x:hover{color:var(--c-ink)}
.xpm-body{padding:6px 22px 4px}
.xpm-cap{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-faint);
margin:16px 0 8px;display:flex;align-items:center;gap:10px}
.xpm-cap::after{content:"";flex:1;height:1px;background:var(--c-line2)}
/* audience: two stamped document copies */
.xpm-aud{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xpm-copy{position:relative;border:1px solid var(--c-line);background:#fff;padding:12px 13px 11px;cursor:pointer;
display:flex;flex-direction:column;gap:6px;transition:border-color .12s}
.xpm-copy input{position:absolute;opacity:0;pointer-events:none}
.xpm-copy:hover{border-color:var(--c-ink2)}
.xpm-copy.is-on{border-color:var(--c-ink);border-left:3px solid var(--brand-primary,#2f64d6);
padding-left:11px;background:#fcfcfb}
.xpm-stamp{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--c-ink2);border:1.5px solid currentColor;padding:3px 8px 2px}
.xpm-copy.is-on .xpm-stamp{color:var(--brand-primary,#2f64d6)}
.xpm-copy-d{font-size:11px;color:var(--c-muted);line-height:1.5}
/* sections: the document's own table of contents */
.xpm-list{display:flex;flex-direction:column}
.xpm-row{display:flex;align-items:baseline;gap:11px;padding:9px 2px;border-bottom:1px solid var(--c-line2);
cursor:pointer;min-width:0}
.xpm-row:last-child{border-bottom:none}
.xpm-row input{position:absolute;opacity:0;pointer-events:none}
.xpm-tick{flex:0 0 auto;width:15px;height:15px;border:1.5px solid var(--c-ink2);background:#fff;position:relative;
align-self:center;transition:background .1s,border-color .1s}
.xpm-row input:checked ~ .xpm-tick{background:var(--c-ink);border-color:var(--c-ink)}
.xpm-row input:checked ~ .xpm-tick::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.xpm-n{flex:0 0 auto;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--brand-primary,#2f64d6);letter-spacing:.05em}
.xpm-name{font-size:13px;font-weight:600;color:var(--c-ink);white-space:nowrap}
.xpm-hint{margin-left:auto;font-size:10px;color:var(--c-faint);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xpm-hint-staff{color:#9a5230;font-weight:600;letter-spacing:.03em}
.xpm-row.is-locked{opacity:.45;cursor:not-allowed}
.xpm-row.is-locked .xpm-name{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--c-faint)}
.xpm-foot{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:16px 22px 18px;margin-top:10px;
border-top:1px solid var(--c-line)}
.xpm-cancel{font:inherit;font-size:12px;font-weight:600;color:var(--c-muted);background:none;border:none;cursor:pointer;padding:6px 2px}
.xpm-cancel:hover{color:var(--c-ink)}
.xpm-go{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#fff;
background:var(--c-ink);padding:9px 18px;text-decoration:none;letter-spacing:.01em;transition:background .12s}
.xpm-go:hover{background:var(--brand-primary,#2f64d6)}
.xpm-go.is-off{opacity:.35;cursor:not-allowed}
@media print{.xpm,.xpm-scrim{display:none !important}}
/* ===== Student record PDF handout (dedicated template, US Letter) ===== */
.prx-body{background:#fff;margin:0;font-family:var(--ui,-apple-system,sans-serif)}
.prx{color:#16181d;font-size:10.5px;line-height:1.45}
.prx .mono{font-family:var(--mono);font-size:9.5px}
.prx-orgrow{display:flex;align-items:baseline;gap:14px;padding-bottom:7px;border-bottom:2.5px solid #16181d;position:relative;margin-bottom:1px}
.prx-orgrow::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#16181d}
.prx-org{font-size:10.5px;font-weight:700}
.prx-doc{flex:1;text-align:center;font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#41454e}
.prx-gen{font-family:var(--mono);font-size:8.5px;color:#8a8f99}
.prx-idrow{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:14px}
.prx-name{font-family:var(--serif,Georgia,serif);font-size:23px;font-weight:600;margin:0;line-height:1.05;letter-spacing:-.01em}
.prx-sub{font-size:10px;color:#5d626c;margin:4px 0 0}
.prx-idbox{flex:0 0 auto;text-align:right;border:1px solid #d9dce1;border-left:3px solid var(--brand-primary,#2f64d6);padding:6px 10px;display:flex;flex-direction:column;gap:1px;background:#fcfcfb}
.prx-idbox span{font-size:7px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a8f99}
.prx-idbox b{font-family:var(--mono);font-size:13px;font-weight:600}
.prx-idbox i{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5d626c}
.prx-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px 28px;margin:11px 0 0}
.prx-meta div{display:flex;align-items:baseline;gap:8px;min-width:0}
.prx-meta dt{flex:0 0 auto;font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a8f99}
.prx-meta div::after{content:"";flex:1;order:1;border-bottom:1px dotted #c6cbd4;transform:translateY(-2px);min-width:10px}
.prx-meta dd{order:2;margin:0;font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prx-band{display:flex;align-items:baseline;gap:26px;margin:12px 0 0;border-top:2px solid #16181d;border-bottom:1px solid #d9dce1;padding:7px 0 8px}
.prx-cap{font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a8f99}
.prx-stat{display:inline-flex;align-items:baseline;gap:7px}
.prx-stat i{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a8f99}
.prx-stat b{font-family:var(--mono);font-size:14px;font-weight:600}
.prx-sec{margin-top:14px;break-inside:avoid;page-break-inside:avoid}
.prx-sec-academics{break-inside:auto;page-break-inside:auto}
.prx-sec h2{display:flex;align-items:baseline;gap:8px;font-family:var(--serif,Georgia,serif);font-size:12px;font-weight:600;margin:0 0 7px;padding-bottom:4px;border-bottom:1px solid #d9dce1;position:relative}
.prx-sec h2::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;background:#16181d}
.prx-sec h2 span{font-family:var(--mono);font-size:8px;font-weight:600;color:var(--brand-primary,#2f64d6);letter-spacing:.06em}
.prx-sec h2 em{margin-left:auto;font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a8f99}
.prx-t{width:100%;border-collapse:collapse;font-size:9.5px}
.prx-t th{font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5d626c;text-align:center;padding:3px 6px;border-bottom:1px solid #b9bec7;background:#fafaf9}
.prx-t td{text-align:center;padding:3.5px 6px;border-bottom:1px solid #e7e9ed;vertical-align:baseline}
.prx-t .l{text-align:left}
.prx-t .b{font-weight:600}
.prx-t .muted{color:#5d626c}
.prx-t td i{font-style:normal;font-size:8px;color:#8a8f99}
.prx-ac-snap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #d9dce1;border-left:3px solid var(--brand-primary,#2f64d6);
background:#fcfcfb;margin:0 0 8px;break-inside:avoid;page-break-inside:avoid}
.prx-ac-snap span{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-left:1px solid #e7e9ed;min-width:0}
.prx-ac-snap span:first-child{border-left:none}
.prx-ac-snap i,.prx-ac-snap em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prx-ac-snap i{font-size:7px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a8f99}
.prx-ac-snap b{font-family:var(--mono);font-size:13px;font-weight:600;color:#16181d;line-height:1.1}
.prx-ac-snap em{font-size:7.5px;color:#8a8f99}
.prx-ac-charts{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 10px}
.prx-ac-card{border:1px solid #d9dce1;border-top:2px solid var(--brand-primary,#2f64d6);background:#fff;padding:7px 10px 5px;
min-width:0;break-inside:avoid;page-break-inside:avoid}
.prx-ac-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:3px;border-bottom:1px solid #eceef1}
.prx-ac-card-h b{font-family:var(--serif,Georgia,serif);font-size:11px;font-weight:600;color:#16181d}
.prx-ac-card-h span{font-size:7.5px;color:#7b818c;text-align:right}
.prx-ac-chart{height:158px;width:100%;min-width:0;overflow:visible}
.prx-ledger{margin-top:8px}
.prx-note{font-size:8.5px;color:#8a8f99;margin:4px 0 0;font-style:italic}
.prx-none{font-size:9.5px;color:#8a8f99;font-style:italic;margin:2px 0}
.prx-duo{display:block}
.prx-duo>.prx-sec{break-inside:avoid;page-break-inside:avoid}
.prx-att{display:grid;grid-template-columns:135px minmax(0,1fr);gap:14px;align-items:center}
.prx-att-fig b{font-family:var(--mono);font-size:21px;font-weight:600;display:block;line-height:1}
.prx-att-fig b small{font-size:11px;color:#8a8f99}
.prx-att-fig i{font-style:normal;font-size:8.5px;color:#5d626c;display:block;margin-top:2px}
.prx-att-chart{height:128px;min-width:0;overflow:visible}
.prx-beh{display:flex;gap:18px}
.prx-beh span{display:flex;flex-direction:column;gap:1px}
.prx-beh i{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a8f99}
.prx-beh b{font-family:var(--mono);font-size:14px;font-weight:600}
.prx-ok{font-size:9.5px;color:#2f7d52;font-weight:600;margin:2px 0}
.prx-flag{font-size:9px;color:#9a5230;font-weight:500;margin:5px 0 0}
.prx-noteline{font-size:9.5px;line-height:1.5;margin:0 0 4px;color:#2c2f36}
.prx-noteline b{font-weight:700}
.prx-noteline i{font-style:normal;color:#8a8f99;font-size:8.5px}
.prx-foot{display:flex;justify-content:space-between;margin-top:16px;padding-top:6px;border-top:1px solid #d9dce1;font-size:7.5px;letter-spacing:.05em;text-transform:uppercase;color:#9aa0aa}
.prx .sr-lvl{font-size:9px}
.prx .stu-ch-x{font-size:8px}
.prx .stu-ch-v{font-size:8px}
/* the board print block declares a global landscape @page — the handout pins
its own named page so it always prints US Letter portrait */
.prx{page:prx-letter}
@page prx-letter { size: 8.5in 11in; margin: 0.5in 0.45in; }
@media print{ .prx-body{-webkit-print-color-adjust:exact;print-color-adjust:exact} }
/* Chart tooltip — white card, consistent 12px gutters, viewport-clamped (JS) */
.pc-tip{
position:fixed;z-index:9999;pointer-events:none;opacity:0;transition:opacity .09s ease-out;
background:#fff;color:#1a1d24;font-size:12px;line-height:1.5;
padding:0 0 6px;border-radius:6px;max-width:300px;min-width:148px;
box-shadow:0 3px 8px rgba(20,25,40,.1),0 14px 38px rgba(20,25,40,.18);overflow:hidden;
border:1px solid #e0e3e8;
}
.pc-tip.show{opacity:1}
.pc-tip b{font-weight:600}
.pc-tip-t{
font-weight:700;font-size:11.5px;color:#1a1d24;padding:8px 12px;margin-bottom:4px;
border-bottom:1px solid #e8eaee;
background:#f7f8f9;letter-spacing:.01em;
}
.pc-tip-r{
display:flex;align-items:baseline;justify-content:space-between;gap:22px;
padding:3px 12px;
}
.pc-tip-r span{color:#6b7280;display:flex;align-items:center;gap:7px;min-width:0}
.pc-tip-r b{font-variant-numeric:tabular-nums;font-weight:700;color:#1a1d24;white-space:nowrap;text-align:right}
.pc-tip-sw{width:9px;height:9px;border-radius:2px;flex:0 0 auto;display:inline-block;align-self:center}
/* rich tooltip extras */
.pc-tip-sub span,.pc-tip-mut{color:#9aa1ad;font-size:11px}
.pc-tip-sub b{font-weight:600;font-size:11.5px;color:#41454e}
.pc-tip-sep{height:1px;background:#edeef1;margin:6px 12px}
.pc-tip-leg{padding:3px 12px}
.pc-tip-leg span{color:#6b7280;font-size:11.5px}
.pc-tip-leg.on{background:#f2f4f7}
.pc-tip-leg.on span{color:#1a1d24}
.pc-tip-leg.on b{color:#1a1d24}
.pc-tip-note{max-width:264px;font-size:11.5px;line-height:1.55;color:#41454e;padding:3px 12px 2px;white-space:normal}
.pc-up{color:#2d7d46;font-weight:700}
.pc-dn{color:#c0392b;font-weight:700}
/* ---- Snapshots index cards ---- */
.snap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.snap-card-wrap{position:relative}
.snap-add-menu{position:absolute;top:10px;right:10px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid #e2e5ea;background:#fff;color:#6b7280;border-radius:6px;cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s}
.snap-add-menu .material-symbols-outlined{font-size:17px}
.snap-card-wrap:hover .snap-add-menu{opacity:1}
.snap-add-menu:hover{color:var(--brand-primary,#2f64d6);border-color:var(--brand-primary,#2f64d6)}
.snap-card{display:block;background:#fff;border:1px solid #ecedf0;border-radius:8px;padding:18px 20px;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.snap-card:hover{border-color:#c7d2f0;box-shadow:0 4px 16px rgba(20,25,40,.07);transform:translateY(-1px)}
.snap-card-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.snap-card-head .material-symbols-outlined{font-size:20px;color:#4269d0}
.snap-card-title{font-size:15px;font-weight:600;color:#0f1115}
.snap-card-desc{font-size:12.5px;color:#6b7280;margin:0 0 10px;line-height:1.5}
.snap-card-foot{font-size:12px;color:#8a92a0}
.snap-card-foot b{color:#0f1115}
.snap-warn{font-size:12.5px;color:#9a6a14;margin-top:8px}
/* ---- Snapshot board ---- */
.snap-board{padding:20px 24px 40px;background:var(--pc-bg);min-height:100%}
.snap-title-text{font-weight:600}
.snap-board-empty{max-width:460px;margin:60px auto;text-align:center;background:#fff;border:1px solid #ecedf0;border-radius:10px;padding:44px 36px}
.snap-board-empty .material-symbols-outlined{font-size:42px;color:#aab2c0}
.snap-board-empty h2{font-size:18px;margin:12px 0 8px;color:#0f1115}
.snap-board-empty p{color:#6b7280;font-size:13.5px;line-height:1.6;margin-bottom:20px}
.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chart-tile{
background:#fff;border:1px solid #e7e9ee;border-radius:8px;
display:flex;flex-direction:column;min-width:0;min-height:300px;
box-shadow:0 1px 2px rgba(20,25,40,.04);
}
.chart-tile.span-1{grid-column:span 1}
.chart-tile.span-2{grid-column:span 2}
.chart-tile.span-3{grid-column:span 3}
.chart-tile-head{display:flex;align-items:center;gap:8px;padding:13px 16px 11px;border-bottom:1px solid #f1f2f5}
.chart-tile-title{font-size:13.5px;font-weight:600;color:#0f1115;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-tile-src{font-size:10.5px;color:#9aa3b2;font-family:var(--mono);margin-left:2px;flex-shrink:0}
.chart-tile-acts{margin-left:auto;display:inline-flex;gap:2px;opacity:0;transition:opacity .12s}
.chart-tile:hover .chart-tile-acts{opacity:1}
.ct-act{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:none;border-radius:5px;cursor:pointer;color:#8a92a0}
.ct-act .material-symbols-outlined{font-size:17px}
.ct-act:hover{background:#f1f2f5;color:#4269d0}
.ct-act.ct-del:hover{background:#fdecea;color:#c0392b}
.chart-tile-body{flex:1;padding:12px 14px;min-height:0;display:flex;flex-direction:column}
@media (max-width:1100px){ .chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .chart-tile.span-3{grid-column:span 2} }
@media (max-width:720px){ .chart-grid{grid-template-columns:1fr} .chart-tile.span-2,.chart-tile.span-3{grid-column:span 1} }
/* (The old Tableau-clone chart editor — .vz-* — was replaced by the .st-*
studio; its styles are gone. body.vz-open lives with the studio block.) */
/* ---- Sharper corners: match the app's 3px application feel (not rounded cards) ---- */
.chart-tile,.snap-card,.dm-card,.cb-preview,
.dm-empty,.snap-board-empty,.dm-empty-state,
.kpi-card,.tile{border-radius:10px}
.ct-act,
.dh-chip,.dm-chip{border-radius:3px}
/* Turbo Drive progress bar */
.turbo-progress-bar{background:#3358d4;height:2.5px}
/* Create-model action in connector tab bar */
.cdtl-tab-act.primary{color:#3358d4;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.cdtl-tab-act.primary:hover{background:#eef2fb}
/* Explore — model data-source picker + measure aggregation badge */
.sv-picker{cursor:pointer}
.sv-source-select{
flex:1;border:none;background:transparent;font-family:inherit;font-size:13px;
font-weight:600;color:#0f1115;cursor:pointer;appearance:none;min-width:0;
}
.sv-source-select:focus{outline:none}
.ph-live-tag{
font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:2px 8px;border-radius:9px;background:#e7f1ec;color:#2c7a52;
}
.field .field-agg{
margin-left:auto;font-size:9.5px;font-family:var(--mono);color:#8a92a0;
background:#eef0f3;padding:1px 6px;border-radius:8px;text-transform:lowercase;
}
/* =================================================================
District Analytics — redesign
================================================================= */
.viewport:has(#dh-filters){background:#edf1f5;padding:0}
#dh-filters{position:sticky;top:0;z-index:18}
.viewport:has(#dh-filters) .dh-sheets{position:sticky;top:94px;z-index:17}
.dh-toolbar{
display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
padding:18px 28px;background:linear-gradient(180deg,#f9fbfc 0%,#f3f6f9 100%);
border-bottom:1px solid #d8e0e8;
}
.dh-toolbar-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;flex:1}
.dh-filter{display:flex;flex-direction:column;gap:7px;min-width:0}
.dh-filter label,.dh-kpi-label,.dh-eyebrow,.dh-note-k,.dh-toolbar-k,.dh-chips-prelabel{
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a7685;
}
.dh-input{
min-width:0;padding:11px 36px 11px 13px;border-radius:10px;border:1px solid #cad4de;
background-color:#fff;font-size:14px;color:#162130;box-shadow:0 1px 0 rgba(12,20,32,.03);
}
.dh-input:focus{outline:none;border-color:#1f4e79;box-shadow:0 0 0 3px rgba(31,78,121,.14)}
.dh-toolbar-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.dh-toolbar-chip{
display:flex;flex-direction:column;gap:4px;padding:11px 13px;border-radius:12px;
border:1px solid #d7dfe7;background:#fff;min-width:136px;
}
.dh-toolbar-v,.dh-note-v{font-size:14px;font-weight:600;color:#182433;text-decoration:none}
.dh-toolbar-v:hover{color:#1f4e79}
.dh-refresh{padding:9px 11px;border-radius:10px}
.dh-hero{
display:flex;justify-content:space-between;gap:22px;align-items:flex-start;
padding:28px 28px 20px;background:linear-gradient(180deg,#f7f9fb 0%,#eef3f7 100%);
border-bottom:1px solid #dce4eb;
}
.dh-hero-copy h1{margin:6px 0 10px;font-size:38px;line-height:1;letter-spacing:-.04em;color:#0f1a28;font-weight:700}
.dh-hero-copy p{margin:0;font-size:16px;color:#546172;max-width:720px;line-height:1.45}
.dh-hero-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:360px}
.dh-hero-note{
padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.82);border:1px solid #dbe3eb;
box-shadow:0 10px 24px rgba(15,26,40,.05);
}
.dh-sheets{
display:flex;align-items:center;gap:22px;padding:0 28px;background:#fff;border-bottom:1px solid #dce4eb;
}
.dh-sheet-tab{
padding:15px 0;text-decoration:none;color:#657183;font-size:14px;font-weight:600;
border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.dh-sheet-tab:hover{color:#182433}
.dh-sheet-tab.active{color:#0f1a28;border-bottom-color:#1f4e79}
.dh-sheets-grow{flex:1}
.dh-sheets-meta{font-size:12px;color:#6c7785;font-weight:500}
.dh-chips-bar{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 28px;background:#f7f2e8;border-bottom:1px solid #eadfc9;
}
.dh-chip{
display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;border:1px solid #d9c9a7;
background:#fff;color:#1d2733;text-decoration:none;font-size:12px;font-weight:600;
}
.dh-chip-k{color:#8a6a2b}
.dh-chip-x{
display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;
background:#f1e6d0;color:#7f6528;font-size:10px;
}
.dh-chips-clear{font-size:12px;font-weight:600;color:#526072;text-decoration:underline}
.dh-page{padding:28px 28px 38px}
.dh-grid{display:grid;gap:18px;margin-top:18px}
.dh-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dh-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-grid-feature{align-items:stretch}
.dh-kpi-grid{display:grid;gap:14px}
.dh-kpi-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dh-kpi-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dh-kpi-card{
display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:18px;background:#fff;
border:1px solid #dbe3eb;box-shadow:0 16px 36px rgba(15,26,40,.06);
}
.dh-kpi-value{font-size:42px;line-height:.98;font-weight:700;letter-spacing:-.045em;color:#0f1a28}
.dh-kpi-foot{font-size:13px;font-weight:500;color:#627082;min-height:18px}
.dh-delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700}
.dh-delta.delta-up{color:#246241}.dh-delta.delta-dn{color:#a2463d}
.dh-card{
background:#fff;border:1px solid #dbe3eb;border-radius:18px;box-shadow:0 16px 34px rgba(15,26,40,.05);
overflow:hidden;min-width:0;
}
.dh-card-full{margin-top:18px}
.dh-card-head{
display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:20px 22px 12px;border-bottom:1px solid #edf1f4;
}
.dh-card-head h3{margin:0;font-size:20px;line-height:1.1;letter-spacing:-.02em;color:#0f1a28}
.dh-card-head p{margin:6px 0 0;font-size:13px;color:#627082;line-height:1.4}
.dh-card-tag{
padding:7px 10px;border-radius:999px;background:#eef5fb;color:#1f4e79;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.dh-viz{padding:16px 22px 24px}
.dh-viz-tall{min-height:360px}
.dh-empty{
margin:16px 22px 22px;padding:32px 20px;text-align:center;border:1px dashed #d7e0e8;border-radius:14px;
background:#f8fafb;color:#627082;font-size:13px;
}
.dh-fatal{
background:#fff3f1;border:1px solid #f0c7c0;padding:16px 18px;margin:18px 28px;color:#9a3923;border-radius:14px;font-size:14px;
}
.dt-wrap{overflow:auto;padding:0 8px 8px}
.dt-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.dt-table thead th{
position:sticky;top:0;background:#fff;padding:14px 14px 12px;border-bottom:1px solid #e6edf3;
text-align:left;color:#667283;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.dt-table tbody td{padding:14px;border-bottom:1px solid #edf1f4;vertical-align:middle}
.dt-row:last-child td{border-bottom:none}
.dt-row-link{cursor:pointer;transition:background .12s}
.dt-row-link:hover,.dt-row-link:focus{background:#f5f9fc;outline:none}
.dt-row-link:hover .dt-label,.dt-row-link:focus .dt-label{color:#1f4e79}
.dt-label{font-size:14px;font-weight:600;color:#162130}
.dt-metric{display:flex;align-items:center;gap:10px;min-width:150px}
.dt-value{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:#162130}
.dt-secondary{font-size:12px;color:#6b7786}
.dt-meter{display:block;flex:1;min-width:72px;height:8px;border-radius:999px;background:#edf2f6;overflow:hidden}
.dt-meter-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5c88b0 0%,#1f4e79 100%)}
.dt-cell.is-numeric{text-align:left}.dt-cell.is-primary{min-width:160px}
.hbar-chart{display:flex;flex-direction:column;gap:8px;padding:0 22px 22px}
.hb-row{display:grid;grid-template-columns:minmax(120px,40%) 1fr 64px;gap:12px;align-items:center;text-decoration:none;color:inherit}
.hb-label{font-size:13px;font-weight:600;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-track{height:10px;border-radius:999px;background:#edf2f6;overflow:hidden;position:relative}
.hb-track-pct::after{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,#dfe7ef 0 1px,transparent 1px);background-size:25% 100%}
.hb-fill{display:block;height:100%;border-radius:999px}
.hb-value{font-size:13px;font-weight:700;text-align:right;color:#162130;font-variant-numeric:tabular-nums}
.hb-clickable:hover .hb-label{color:#1f4e79}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.tile-body .chart-svg,.dh-viz .chart-svg{max-height:320px}
.dh-donut a,.chart-svg a{cursor:pointer}
.heatmap-wrap{padding:0 22px 22px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.heatmap-grid{display:grid;gap:4px;align-items:stretch}
.hm-colhead,.hm-rowhead{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7786}
.hm-colhead{display:flex;align-items:center;justify-content:center;padding:10px 6px;background:#f4f7fa;border-radius:8px}
.hm-rowhead{display:flex;align-items:center;justify-content:flex-end;padding-right:12px;white-space:nowrap}
.hm-cell{display:flex;align-items:center;justify-content:center;height:52px;border-radius:10px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none;color:inherit}
.hm-cell.hm-empty{background:#f8fafb;border:1px dashed #e0e6ec;color:#a0aab7}
.hm-cell.hm-clickable:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,26,40,.16)}
.hm-light{color:#fff}.hm-dark{color:#102133}
.heatmap-legend{display:flex;align-items:center;gap:10px;font-size:12px;color:#667283;font-weight:600}
.hm-leg-bar{flex:1;height:8px;border-radius:999px;background:linear-gradient(90deg,#f8fafc 0%,#d6e3ef 40%,#1f4e79 100%)}
.donut-wrap{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:0 22px 22px}
.donut-legend{display:flex;flex-direction:column;gap:8px}
.dn-row{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;text-decoration:none;color:inherit}
.dn-sw{width:12px;height:12px;border-radius:3px}.dn-l{font-size:13px;font-weight:600;color:#334155}.dn-v{font-size:13px;font-weight:700;color:#162130}
.dn-clickable:hover .dn-l{color:#1f4e79}
.chart-tip{
position:fixed;pointer-events:none;z-index:60;padding:7px 9px;border-radius:8px;background:#0f1721;color:#fff;font-size:12px;
box-shadow:0 8px 20px rgba(15,23,33,.22);opacity:0;transition:opacity .1s;
}
.chart-tip.show{opacity:1}
body.dh-modal-open{overflow:hidden}
.dh-modal-backdrop{
position:fixed;inset:0;background:rgba(12,18,28,.42);display:none;align-items:center;justify-content:center;
z-index:90;padding:26px;
}
.dh-modal-backdrop.show{display:flex}
.dh-modal{
width:min(1180px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;background:#fff;border-radius:22px;
box-shadow:0 28px 80px rgba(12,18,28,.35);overflow:hidden;
}
.dh-modal-head{
display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:22px 24px 18px;border-bottom:1px solid #e8edf2;
}
.dh-modal-head h2{margin:4px 0 0;font-size:26px;line-height:1.05;letter-spacing:-.03em;color:#0f1a28}
.dh-modal-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a7685}
.dh-modal-close{border:none;background:#f2f5f8;color:#1c2835;width:40px;height:40px;border-radius:999px;font-size:26px;cursor:pointer}
.dh-modal-body{padding:20px 24px 24px;overflow:auto}
.dh-modal-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.dh-modal-pill{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border-radius:999px;background:#f4f7fa;border:1px solid #dde5ed}
.dh-modal-pill span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6a7685}
.dh-modal-pill strong{font-size:14px;color:#0f1a28}
.dh-modal-loading,.dh-modal-empty{padding:32px 0;color:#627082;font-size:14px}
.dh-modal-table-wrap{overflow:auto;border:1px solid #e5ebf1;border-radius:16px}
.dh-modal-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.dh-modal-table thead th{position:sticky;top:0;background:#f8fafc;padding:12px 14px;border-bottom:1px solid #e5ebf1;text-align:left;color:#667283;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dh-modal-table tbody td{padding:11px 14px;border-bottom:1px solid #eef2f6;color:#162130;white-space:nowrap}
.dh-modal-table tbody tr:nth-child(even){background:#fbfcfd}
.dh-modal-sql{margin-top:16px}
.dh-modal-sql summary{cursor:pointer;font-size:13px;font-weight:700;color:#1f4e79}
.dh-modal-sql pre{margin:10px 0 0;padding:14px;border-radius:14px;background:#0f1721;color:#dce7f3;overflow:auto;font-size:12px;line-height:1.5}
@media (max-width: 1200px){
.dh-toolbar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dh-hero{flex-direction:column}
.dh-hero-notes{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;width:100%}
.dh-kpi-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 840px){
.dh-toolbar{padding:16px 16px 18px}.dh-toolbar-grid{grid-template-columns:1fr}
.dh-toolbar-meta{justify-content:flex-start}.dh-hero,.dh-page{padding-left:16px;padding-right:16px}
.dh-kpi-grid-4,.dh-kpi-grid-5,.dh-grid-2,.dh-grid-3,.dh-hero-notes{grid-template-columns:1fr}
.dh-hero-copy h1{font-size:32px}.dh-kpi-value{font-size:34px}.dt-wrap{padding:0}
.donut-wrap{grid-template-columns:1fr}.dh-sheets{padding:0 16px;overflow:auto}.dh-chips-bar{padding-left:16px;padding-right:16px}
.viewport:has(#dh-filters) .dh-sheets{top:204px}
}
/* =================================================================
Sample BI shell and dashboard visual system
================================================================= */
/* (tokens merged into the single :root at the top of the file) */
body{
font-family:var(--ui);
background:var(--app-bg);
color:var(--ink);
font-size:14px;
}
.material-symbols-outlined{
font-family:'Material Symbols Outlined';
font-weight:normal;
font-style:normal;
font-size:20px;
line-height:1;
letter-spacing:0;
text-transform:none;
display:inline-block;
white-space:nowrap;
word-wrap:normal;
direction:ltr;
-webkit-font-feature-settings:'liga';
-webkit-font-smoothing:antialiased;
font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;
vertical-align:middle;
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d8dadc;border:0;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#bec6e0}
.admin-shell-body{overflow:hidden}
/* The shell's two fixed edges, published as tokens: anything pinned to the
window (the workbench's lifecycle bar) has to know where the sidenav ends
and the footer begins, and re-measuring them in JS would go stale the
moment the breakpoint moved them. */
:root{--wb-side:198px;--wb-foot:40px}
.bi-app-shell{display:flex;height:100vh;overflow:hidden;background:var(--app-bg)}
/* ---- Sidenav: single labeled navigation column ---- */
.bi-sidenav{
width:var(--wb-side);background:var(--navy);display:flex;flex-direction:column;
padding:14px 10px 12px;flex-shrink:0;z-index:50;
}
.bi-side-brand{display:flex;align-items:center;gap:9px;color:#fff;padding:2px 8px 16px;min-width:0}
.bi-side-brand img{height:22px;width:auto;max-width:26px;object-fit:contain;border-radius:3px}
.bi-side-brand .material-symbols-outlined{font-size:22px}
.bi-side-brand-name{font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-side-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;min-height:0}
.bi-side-group{
font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.34);padding:14px 8px 4px;
}
.bi-side-link{
display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:5px;text-decoration:none;
color:rgba(255,255,255,.62);font-size:12.5px;font-weight:600;transition:color .12s,background .12s;min-width:0;
}
.bi-side-link .material-symbols-outlined{font-size:18px;flex:none}
.bi-side-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-side-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.bi-side-link.active{color:#fff;background:rgba(255,255,255,.12)}
.bi-side-link.dim{color:rgba(255,255,255,.38);font-weight:500}
.bi-side-link.dim:hover,.bi-side-link.dim.active{color:rgba(255,255,255,.85)}
.bi-side-bottom{display:flex;align-items:center;gap:9px;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.1)}
.bi-side-user{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi-user-avatar{
width:28px;height:28px;border-radius:999px;background:var(--secondary);color:#fff;display:flex;
align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;
}
.bi-viewsite{
display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);
text-decoration:none;padding:6px 11px;border:1px solid var(--border);border-radius:5px;transition:color .12s,border-color .12s;
}
.bi-viewsite .material-symbols-outlined{font-size:15px}
.bi-viewsite:hover{color:var(--ink);border-color:var(--ink-2)}
.bi-live-dot.warm{background:#e8a13a}
.bi-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.bi-topbar{
height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;
justify-content:space-between;gap:18px;padding:0 24px;flex-shrink:0;
}
.bi-view-heading{display:flex;align-items:baseline;gap:12px;min-width:0}
.bi-view-heading .bi-view-title{font-size:15px;font-weight:700;color:var(--ink);margin:0;letter-spacing:0;white-space:nowrap}
.bi-view-heading span{font-size:11px;color:var(--ink-2);font-weight:600;text-transform:uppercase;letter-spacing:0}
.bi-topbar-tools{display:flex;align-items:center;gap:6px;min-width:0}
.bi-topbar-tools .btn{height:32px}
.bi-topbar-tools form{margin:0;display:flex}
.bi-icon-button{
width:34px;height:34px;border-radius:4px;display:flex;align-items:center;justify-content:center;
color:var(--ink-2);background:transparent;border:0;
}
.bi-icon-button:hover{background:var(--surface-2);color:var(--secondary)}
.viewport{flex:1;overflow:auto;min-height:0;background:var(--app-bg)}
.bi-footerbar{
height:40px;background:var(--navy);color:var(--navy-muted);display:flex;align-items:center;
justify-content:space-between;gap:24px;padding:0 24px;font-size:10px;font-weight:600;flex-shrink:0;
}
.bi-footerbar div{display:flex;align-items:center;gap:14px;min-width:0}
.bi-footerbar strong{color:#fff;font-weight:700}
.bi-footerbar .material-symbols-outlined{font-size:14px;color:var(--secondary)}
.bi-live-dot{width:6px;height:6px;background:var(--secondary);border-radius:999px;display:inline-block}
.btn,.tb-btn{
border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--ink-2);
font-size:12px;font-weight:700;padding:7px 11px;box-shadow:none;
}
.btn:hover,.tb-btn:hover{background:var(--surface-2);border-color:#cfd5db;color:var(--ink)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:#003fa6;border-color:#003fa6}
.winput{
border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--ink);
font-family:var(--ui);font-size:12px;padding:8px 10px;
}
.winput:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,81,213,.12);outline:none}
.pad,.wizard,.model-wrap{padding:24px}
.dgrid,.catalog,.wstep,.map-grid,.cnx-empty,.cdtl,.metric-top > *, .concept, .tile, .canvas-sheet{
border-color:var(--border);border-radius:4px;box-shadow:var(--shadow);background:#fff;
}
#dh-filters{position:sticky;top:0;z-index:18}
.viewport:has(#dh-filters){background:var(--app-bg);padding:0}
.dh-toolbar{
min-height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;
gap:20px;padding:10px 24px;box-shadow:none;
}
.dh-toolbar-grid{display:flex;align-items:center;gap:24px;flex:1;min-width:0}
.dh-filter{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0}
.dh-filter label{
font-size:12px;font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0;white-space:nowrap;
}
.dh-input{
min-width:138px;width:auto;border:0;background:var(--surface-2);border-radius:4px;padding:7px 30px 7px 11px;
font-size:12px;font-weight:700;color:var(--ink);box-shadow:none;
}
.dh-input:focus{box-shadow:0 0 0 3px rgba(0,81,213,.12);outline:none}
.dh-toolbar-meta{display:flex;align-items:center;gap:8px;margin-left:auto}
.dh-toolbar-chip{
display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;background:var(--surface-2);
border:0;border-radius:4px;padding:7px 10px;
}
.dh-toolbar-k{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.dh-toolbar-v{font-size:11px;font-weight:700;color:var(--ink)}
.dh-refresh{width:34px;height:34px;padding:0;border-radius:4px;justify-content:center}
.dh-chips-bar{
padding:8px 24px;background:#fff;border-bottom:1px solid var(--border);gap:8px;
}
.dh-chips-prelabel{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:0}
.dh-chip{
border-radius:4px;background:var(--surface-2);border:1px solid var(--border);padding:5px 8px;
font-size:11px;font-weight:700;color:var(--ink);
}
.dh-chip-k{color:var(--ink-2)}
.dh-chip-x{width:16px;height:16px;border-radius:4px;background:#e5e7eb;color:var(--ink-2)}
.dh-page{padding:24px;display:flex;flex-direction:column;gap:24px}
.dh-grid{display:grid;gap:24px;margin:0}
.dh-grid-2{grid-template-columns:minmax(0,2fr) minmax(320px,1fr)}
.dh-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-kpi-grid{display:grid;gap:16px}
.dh-kpi-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dh-kpi-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dh-kpi-card{
background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow);
padding:16px;gap:8px;transition:box-shadow .2s ease;
}
.dh-kpi-card:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.dh-kpi-label{
font-size:10px;font-weight:700;color:rgba(69,70,77,.62);text-transform:uppercase;letter-spacing:0;
}
.dh-kpi-value{
font-family:var(--mono);font-size:30px;line-height:1.1;font-weight:700;color:var(--ink);letter-spacing:-0.02em;
}
.dh-kpi-foot{font-size:10px;color:rgba(69,70,77,.62);font-weight:600;min-height:0}
.dh-delta{font-size:11px;font-weight:700;letter-spacing:0}
.dh-delta.delta-up{color:#16a34a}.dh-delta.delta-dn{color:#ef4444}
.dh-card{
background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow);overflow:hidden;
}
.dh-card:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.dh-card-full{margin:0}
.dh-card-head{
min-height:58px;padding:16px;border-bottom:1px solid var(--border);
background:#fbfcfe;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.dh-card-head h3{font-size:14px;font-weight:700;color:var(--ink);margin:0;letter-spacing:0;line-height:1.2}
.dh-card-head p{font-size:11px;color:var(--ink-2);margin:3px 0 0;line-height:1.3}
.dh-card-body{padding:16px}
.dh-card-tag{
border-radius:4px;background:var(--surface-2);color:var(--ink-2);padding:5px 8px;
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0;
}
.dh-viz{padding:24px}
.dh-viz-tall{min-height:300px}
.dh-grid-feature > .dh-card{min-height:100%}
.dh-stat-strip{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
margin-bottom:18px;
}
.dh-stat-chip{
border:0;
border-radius:0;
background:transparent;
padding:0;
min-height:0;
}
.dh-stat-chip-k{
display:block;
font-size:9px;
font-weight:800;
color:rgba(69,70,77,.55);
text-transform:uppercase;
letter-spacing:0;
margin-bottom:6px;
}
.dh-stat-chip-v{
display:block;
color:var(--ink);
font-family:var(--mono);
font-size:22px;
font-weight:700;
line-height:1.1;
letter-spacing:-0.02em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.dh-empty{
margin:16px;padding:28px 16px;border:1px dashed var(--border);border-radius:4px;background:var(--surface-low);
color:var(--ink-2);font-size:12px;
}
.dt-wrap{padding:0;overflow:auto}
.dt-table{width:100%;border-collapse:collapse;font-size:12px}
.dt-table thead th{
padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--border-2);
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0;color:var(--muted);text-align:left;
}
.dt-table tbody td{padding:8px 12px;border-bottom:1px solid var(--border-2);vertical-align:middle}
.dt-table tbody tr:last-child td{border-bottom:none}
.dt-row-link:hover,.dt-row-link:focus{background:#f7f9fb}
.dt-label{font-size:12px;font-weight:700;color:var(--ink)}
.dt-value{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink)}
.dt-secondary{font-size:10px;color:var(--muted)}
.dt-metric{gap:8px;min-width:120px}
.dt-meter{height:6px;min-width:56px;border-radius:2px;background:var(--surface-2)}
.dt-meter-fill{border-radius:2px;background:var(--secondary)}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.dh-viz .chart-svg{max-height:300px}
.dh-line polyline,.dh-multiline polyline{stroke-width:3}
.dh-col rect{rx:2;ry:2}
.heatmap-wrap{padding:0 16px 16px;gap:8px}
.heatmap-grid{gap:2px}
.hm-colhead{
background:var(--surface-2);border-radius:2px;padding:8px 6px;font-size:10px;font-weight:700;
color:var(--muted);letter-spacing:0;
}
.hm-rowhead{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:0}
.hm-cell{height:40px;border-radius:2px;font-size:12px;font-family:var(--mono)}
.hm-cell.hm-clickable:hover{box-shadow:inset 0 0 0 2px var(--secondary);transform:none}
.hm-leg-bar{height:6px;border-radius:2px;background:linear-gradient(90deg,#f8fafc 0%,#c8d8ff 45%,#0051d5 100%)}
.donut-wrap{padding:0 16px 16px;gap:16px}
.dn-l,.dn-v{font-size:12px}
.hbar-chart{padding:0 16px 16px;gap:7px}
.hb-row{grid-template-columns:minmax(116px,40%) 1fr 58px;gap:10px}
.hb-label,.hb-value{font-size:12px}
.hb-track{height:8px;border-radius:2px}
.hb-fill{border-radius:2px}
.dh-modal-backdrop{background:rgba(11,28,48,.5);z-index:90}
.dh-modal{border-radius:4px;box-shadow:0 16px 40px rgba(0,0,0,.26)}
.dh-modal-head{padding:16px;border-bottom:1px solid var(--border)}
.dh-modal-head h2{font-size:18px;font-weight:700;letter-spacing:0;color:var(--ink)}
.dh-modal-eyebrow{font-size:10px;font-weight:700;letter-spacing:0;color:var(--muted)}
.dh-modal-close{width:32px;height:32px;border-radius:4px;background:var(--surface-2);font-size:22px}
.dh-modal-body{padding:16px}
.dh-modal-pill{border-radius:4px;background:var(--surface-2);border:1px solid var(--border);padding:7px 10px}
.dh-modal-pill span{font-size:10px;letter-spacing:0}
.dh-modal-table-wrap{border-radius:4px;border:1px solid var(--border)}
.dh-modal-table{font-size:12px;border-collapse:collapse}
.dh-modal-table thead th{background:var(--surface-2);letter-spacing:0}
.dh-modal-sql pre{border-radius:4px;background:var(--navy)}
.chart-tip{background:var(--navy);border-radius:4px;font-size:11px}
@media (max-width: 1100px){
.dh-kpi-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.dh-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.dh-grid-2{grid-template-columns:1fr}
}
@media (max-width: 760px){
:root{--wb-side:54px}
.bi-sidenav{padding:14px 7px 12px}
.bi-side-brand-name,.bi-side-label,.bi-side-group,.bi-side-user{display:none}
.bi-side-link{justify-content:center}
.bi-topbar{padding:0 12px}
.bi-view-heading span{display:none}
.bi-topbar-tools{gap:2px}
.dh-toolbar{align-items:flex-start;flex-direction:column;padding:12px}
.dh-toolbar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.dh-filter{flex-direction:column;align-items:flex-start;gap:5px}
.dh-input{width:100%;min-width:0}
.dh-toolbar-meta{display:none}
.dh-page{padding:16px;gap:16px}
.dh-kpi-grid-4,.dh-kpi-grid-5,.dh-grid-2,.dh-grid-3{grid-template-columns:1fr}
.dh-card-head{align-items:flex-start;flex-direction:column}
.bi-footerbar{padding:0 12px}
.bi-footerbar div:last-child{display:none}
}
/* =================================================================
Cohesive BI page interiors
================================================================= */
.bi-app-shell *,
.gate-body *{letter-spacing:0}
.pad,
.wizard,
.cdtl,
.explore,
.model-wrap{
color:var(--ink);
font-family:var(--ui);
}
.pad{padding:24px;display:flex;flex-direction:column;gap:18px}
.catalog,
.dgrid,
.wstep,
.tile,
.model-intro,
.concept-row,
.cdtl-context,
.cdtl-tree,
.cdtl-main,
.data-pane,
.marks-card,
.canvas-sheet,
.ex-right,
.cnx-empty{
background:#fff;
border:1px solid var(--border);
border-radius:4px;
box-shadow:var(--shadow);
}
.catalog-head,
.dgrid-head,
.tile-head,
.wstep-head,
.pane-head,
.cdtl-tabs,
.model-intro,
.cr-head{
background:#fff;
border-bottom:1px solid var(--border);
}
.catalog-head h1,
.mh-title,
.tile-title,
.wstep-title,
.cr-name,
.cdtl-title h1{
color:var(--ink);
font-size:15px;
font-weight:800;
line-height:1.2;
}
.catalog-head p,
.mh-sub,
.tile-sub,
.wstep-sub,
.cr-desc,
.field-label,
.cdtl-empty{
color:var(--ink-2);
font-size:12px;
line-height:1.35;
}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:16px}
.ctype,
.type-card{
border:1px solid var(--border);
border-radius:4px;
background:#fff;
box-shadow:none;
transition:border-color .14s,background .14s;
}
.ctype:hover,
.type-card:hover{border-color:#c7d7ff;background:#fbfcff;transform:none}
.type-radio:checked + .type-card-top,
.type-card:has(.type-radio:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.dgrid{overflow:hidden}
.dgrid-head,
.dgrid-row{
display:grid;
align-items:center;
gap:12px;
}
.dgrid-head{
min-height:38px;
padding:0 14px;
color:var(--muted);
font-size:11px;
font-weight:800;
text-transform:uppercase;
background:var(--surface-2);
}
.dgrid-row{
min-height:46px;
padding:8px 14px;
border-bottom:1px solid var(--border-2);
color:var(--ink);
font-size:12px;
}
.dgrid-row:last-child{border-bottom:0}
.dgrid-row:hover{background:#f7f9fb}
.conn-link{color:var(--primary);font-weight:800;text-decoration:none}
.tag,
.stat,
.mode-pill,
.type-flag{
border-radius:4px;
border:1px solid var(--border);
background:var(--surface-2);
color:var(--ink-2);
font-size:10px;
font-weight:800;
text-transform:uppercase;
}
.tag.bigquery,
.mode-pill.live,
.stat.ok{background:#eef6ff;border-color:#c7d7ff;color:var(--primary)}
.mode-pill.mat{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.wizard{max-width:1040px;margin:0 auto;gap:16px}
.wstep{overflow:hidden}
.wstep-head{display:flex;gap:12px;align-items:flex-start;padding:16px}
.wnum{
width:24px;height:24px;border-radius:4px;background:var(--primary);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.wstep-body{padding:16px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.wz-field{display:flex;flex-direction:column;gap:6px}
.field-label,.cf-label{font-size:11px;font-weight:800;color:var(--ink-2)}
.wtext{min-height:132px;font-family:var(--mono);line-height:1.45}
.setting-row,
.test-row,
.wizard-foot{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:12px 0;border-top:1px solid var(--border-2);
}
.setting-text b{display:block;font-size:13px;color:var(--ink)}
.setting-text span{display:block;font-size:12px;color:var(--ink-2);margin-top:3px}
.metric-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.metric-top > *{padding:16px}
.metric-top .tile{padding:16px}
.metric-top .tile-head{margin:-16px -16px 14px;padding:14px 16px}
.tile-body,
.schema-list,
.flow,
.mtable{font-size:12px;color:var(--ink)}
.mtable{width:100%;border-collapse:collapse}
.mtable th{
background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:800;
text-transform:uppercase;padding:9px 10px;text-align:left;border-bottom:1px solid var(--border);
}
.mtable td{padding:8px 10px;border-bottom:1px solid var(--border-2)}
.model-intro{padding:18px;margin-bottom:16px}
.concept-rows{display:flex;flex-direction:column;gap:10px}
.concept-row{overflow:hidden}
.cr-head{display:grid;grid-template-columns:auto minmax(260px,1fr) minmax(110px,auto) minmax(180px,auto) auto;gap:14px;padding:13px 14px;cursor:pointer}
.cr-icon{
width:28px;height:28px;border-radius:4px;background:rgba(49,107,243,.1);color:var(--secondary);
display:flex;align-items:center;justify-content:center;font-weight:800;
}
.cr-count{text-align:right}
.cr-num{display:block;font-family:var(--mono);font-size:16px;font-weight:800;color:var(--ink)}
.cr-label{display:block;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase}
.cr-field,
.cr-field-more,
.cr-custom{
display:inline-flex;align-items:center;border-radius:3px;background:var(--surface-2);
padding:3px 6px;margin:2px 3px 0 0;color:var(--ink-2);font-size:10px;font-weight:700;
}
.cr-field.req{background:#eef6ff;color:var(--primary)}
.cr-detail{padding:16px;background:#fbfcfd}
.cr-section{background:#fff;border:1px solid var(--border);border-radius:4px;padding:14px;margin-bottom:12px}
.cr-section-head{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:10px}
.cr-bind{border:1px solid var(--border);border-radius:4px;background:#fff;padding:12px;margin-top:8px}
.cr-bact,
.cr-add-binding{border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--ink-2);font-size:11px;font-weight:800;padding:5px 8px;text-decoration:none}
.cdtl{padding:24px;background:transparent;border:0;box-shadow:none}
.cdtl-context{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:14px}
.ctx-crumb,
.ctx-fact{font-size:12px;color:var(--ink-2)}
.ctx-fact b{color:var(--ink)}
.cdtl-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;min-height:560px}
.cdtl-tree{overflow:hidden}
.cdtl-tree-search{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--border)}
.cdtl-tree-search input{border:0;background:var(--surface-2);border-radius:4px;padding:8px;width:100%;font-size:12px}
.cdtl-tree-group{display:flex;justify-content:space-between;padding:12px 10px 6px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.cdtl-tbl{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;font-size:12px;cursor:pointer}
.cdtl-tbl:hover,.cdtl-tbl.active{background:#eef6ff;color:var(--primary)}
.ttype{width:18px;height:18px;border-radius:3px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.cdtl-main{overflow:hidden}
.cdtl-tabs{display:flex;align-items:center;gap:4px;padding:8px}
.cdtl-tab,.cdtl-tab-act{
border-radius:4px;padding:7px 10px;color:var(--ink-2);font-size:12px;font-weight:800;text-decoration:none;
}
.cdtl-tab.active,.cdtl-tab:hover,.cdtl-tab-act{background:rgba(49,107,243,.1);color:var(--secondary)}
.cdtl-pane{padding:16px}
.cdtl-editor textarea{width:100%;min-height:220px;border:1px solid var(--border);border-radius:4px;background:#0b1c30;color:#dbeafe;font-family:var(--mono);font-size:12px;padding:12px}
.explore{height:100%;display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:0;background:var(--app-bg);border:0;box-shadow:none}
.ex-left,.ex-right{min-height:0;overflow:auto;background:#fff;border-right:1px solid var(--border)}
.ex-right{border-right:0;border-left:1px solid var(--border);border-radius:0;box-shadow:none}
.data-pane,.marks-card{border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none}
.pane-head{padding:12px 14px}
.sv-select{border:1px solid var(--border);border-radius:4px;background:#fff;padding:7px 9px;font-size:12px}
.field-list{padding:8px}
.field{border-radius:4px;padding:7px 8px;font-size:12px}
.field:hover,.field.selected{background:#eef6ff;color:var(--primary)}
.shelf-bar{background:#fff;border-bottom:1px solid var(--border);padding:10px 14px}
.ex-canvas{background:var(--app-bg);padding:24px}
.canvas-sheet{min-height:520px;overflow:hidden}
.sheet-tabs{background:#fff;border-top:1px solid var(--border);padding:8px 12px}
.chart-svg text{font-family:Inter, Arial, sans-serif}
.chart-bar rect,
.chart-point circle:last-child{transition:opacity .14s,stroke-width .14s,filter .14s}
.chart-bar:hover rect{opacity:.82;filter:drop-shadow(0 2px 4px rgba(0,81,213,.18))}
.chart-point:hover circle:last-child{stroke-width:3}
.dh-donut path{stroke:#fff;stroke-width:2;transition:opacity .14s}
.dh-donut path:hover{opacity:.84}
.dt-table thead th.is-primary,
.dt-table tbody td.is-primary{width:52%}
.dt-metric{
min-width:0;
justify-content:flex-start;
}
.dt-metric-bubble{
display:inline-flex;
align-items:center;
gap:10px;
min-width:84px;
}
.dt-bubble{
width:30px;
height:30px;
flex:0 0 30px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(0,81,213,.06);
position:relative;
}
.dt-bubble::after{
content:"";
width:var(--bubble-size);
height:var(--bubble-size);
border-radius:999px;
background:rgba(0,81,213,var(--bubble-alpha));
box-shadow:inset 0 0 0 1px rgba(0,81,213,.18);
}
.dt-meter,
.dt-meter-fill{display:none}
.rank-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
padding:0 16px 16px;
}
.rank-card{
min-height:74px;
display:grid;
grid-template-columns:auto auto minmax(0,1fr);
align-items:center;
gap:11px;
padding:12px;
border:1px solid var(--border);
border-radius:4px;
background:#fff;
color:inherit;
text-decoration:none;
}
.rank-clickable:hover{
border-color:#c7d7ff;
background:#fbfcff;
}
.rank-index{
color:var(--muted);
font-family:var(--mono);
font-size:11px;
font-weight:800;
}
.rank-orb{
width:42px;
height:42px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at center,#fff 0 54%,transparent 55%),
conic-gradient(var(--rank-color) 0 var(--rank-pct),#eef1f4 var(--rank-pct) 100%);
}
.rank-orb-label{
color:var(--ink-2);
font-family:var(--mono);
font-size:9px;
font-weight:800;
}
.rank-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.rank-label{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--ink);
font-size:12px;
font-weight:800;
}
.rank-value{
color:var(--ink-2);
font-family:var(--mono);
font-size:13px;
font-weight:800;
}
.lb-list{
display:flex;
flex-direction:column;
gap:10px;
}
.lb-item{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
padding:12px;
border:1px solid var(--border);
border-radius:4px;
background:#fff;
color:inherit;
text-decoration:none;
transition:border-color .14s, background .14s, box-shadow .14s;
}
.lb-item:hover{
border-color:#c7d7ff;
background:#fbfcff;
box-shadow:0 2px 6px rgba(0,81,213,.08);
}
.lb-rank{
width:28px;
height:28px;
border-radius:4px;
background:#f2f4f6;
color:var(--muted);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--mono);
font-size:10px;
font-weight:800;
}
.lb-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:6px;
}
.lb-label{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--ink);
font-size:12px;
font-weight:800;
}
.lb-secondary{
color:var(--ink-2);
font-size:11px;
font-weight:600;
}
.lb-track{
height:8px;
border-radius:999px;
background:#eef1f4;
overflow:hidden;
}
.lb-fill{
display:block;
height:100%;
border-radius:999px;
}
.lb-metric{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:3px;
}
.lb-value{
color:var(--ink);
font-family:var(--mono);
font-size:16px;
font-weight:800;
}
.lb-share{
color:var(--ink-2);
font-size:10px;
font-weight:800;
text-transform:uppercase;
}
.dist-list{
display:flex;
flex-direction:column;
gap:14px;
}
.dist-item{
display:block;
color:inherit;
text-decoration:none;
}
.dist-item:hover .dist-label,
.dist-item:hover .dist-value{color:var(--primary)}
.dist-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:6px;
}
.dist-label{
color:var(--ink-2);
font-size:10px;
font-weight:800;
text-transform:uppercase;
}
.dist-value{
color:var(--ink);
font-size:11px;
font-weight:800;
font-family:var(--mono);
}
.dist-bar{
height:20px;
border-radius:2px;
background:#eef1f4;
overflow:hidden;
}
.dist-fill{
display:block;
height:100%;
border-radius:2px;
}
@media (max-width: 1180px){
.metric-top{grid-template-columns:1fr}
.explore{grid-template-columns:240px minmax(0,1fr)}
.explore .ex-right{display:none}
}
@media (max-width: 900px){
.field-grid,.field-grid.three,.cdtl-body{grid-template-columns:1fr}
.cr-head{grid-template-columns:auto minmax(0,1fr) auto}
.cr-summary{display:none}
.explore{grid-template-columns:1fr}
.ex-left{display:none}
.dh-stat-strip{grid-template-columns:1fr}
.lb-item{grid-template-columns:auto minmax(0,1fr)}
.lb-metric{align-items:flex-start}
}
/* =================================================================
Chart Studio + Board — modern light data-app (Sigma/Hex register)
================================================================= */
:root{
/* Studio "workbench" surfaces — a cool slate frame so the white work panels
float on it with real elevation, instead of flat panels split by hairlines. */
--c-frame:#dcdfe8; /* deep frame behind the floating panels */
--c-canvas:#eceef4; /* the plot canvas (inset, slightly lighter than frame) */
--c-panel:#ffffff; --c-panel-2:#f6f7fb; /* work surface + inset wells */
--c-line:#e4e7ee; --c-line2:#eef0f5;
--c-ink:#171a21; --c-ink2:#3a3f4a; --c-muted:#666e7e; --c-faint:#9aa1ad;
--c-accent:#6d28d9; --c-accent-2:#5b21b6; /* brand-tintable (org branding overrides at :root) */
--c-accent-bg:#f2ecfd; --c-accent-line:#d9c9f6;
/* Studio CHROME accent — fixed, always high-contrast. Kept separate from the
brand-driven --c-accent so a low-contrast brand colour (e.g. a lime green)
never lands as white-on-bright active states or unreadable tab labels.
Branding does not override these — the builder's own furniture stays legible. */
--st-accent:#6d28d9; --st-accent-2:#5b21b6; --st-accent-bg:#f2ecfd; --st-accent-line:#d9c9f6;
--c-shadow:0 1px 2px rgba(20,22,40,.05), 0 6px 16px -4px rgba(20,22,40,.10);
--c-shadow-sm:0 1px 2px rgba(20,22,40,.06);
--c-shadow-pop:0 4px 12px -2px rgba(20,22,40,.12), 0 12px 32px -6px rgba(20,22,40,.16);
--c-radius:9px; --c-radius-sm:6px;
}
/* ---------- Board ---------- */
.board{position:relative;min-height:100%;background:var(--c-canvas);padding:16px}
/* Public board masthead (title + subtitle) */
.board-mast{margin:2px 2px 16px}
.board-title{font-size:22px;font-weight:600;color:var(--c-ink);letter-spacing:-.012em;margin:0;line-height:1.1}
.board-sub{font-size:13.5px;color:var(--c-muted);margin:6px 0 0;max-width:90ch;line-height:1.5}
/* Public (published) snapshot page */
/* Public board scrolls on the window; body must grow with content (NOT height:100%)
or the sticky brand header can only stick within a viewport-tall body and scrolls
away on long boards — which left the left sidebar floating under an empty strip. */
body.pub{background:var(--c-canvas);height:auto;min-height:100vh}
.pub-wrap{max-width:1280px;margin:0 auto;padding:22px 22px 48px}
.pub-no-boards{display:grid;place-items:center;min-height:calc(100vh - 84px)}
.pub-no-boards-card{width:min(100%,560px);padding:40px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-panel);text-align:center;box-shadow:0 10px 30px rgba(20,25,40,.06)}
.pub-no-boards-card>.material-symbols-outlined{font-size:34px;color:var(--c-muted);margin-bottom:14px}
.pub-no-boards-card h1{margin:0 0 10px;font:650 26px/1.2 var(--font-display)}
.pub-no-boards-card p{max-width:470px;margin:0 auto 18px;color:var(--c-muted);font-size:14px;line-height:1.6}
.pub-no-boards-card small{color:var(--c-muted);overflow-wrap:anywhere}
@media(max-width:600px){.pub-no-boards{min-height:calc(100vh - 72px);padding:18px}.pub-no-boards-card{padding:30px 22px}}
/* Full-width top bar with a centered, content-aligned inner row */
.pub-head{background:var(--c-panel);border-bottom:1px solid var(--c-line);box-shadow:0 1px 3px rgba(20,25,40,.05)}
/* Keep the global header and its dropdowns above every sticky board-navigation
layer (the shelf top-dock reaches z-index 55), but below modal overlays. */
@media(min-width:761px){.pub-head{position:sticky;top:0;z-index:80}}
.pub-head-in{max-width:1280px;margin:0 auto;padding:9px 22px;min-height:62px;
display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;row-gap:6px}
.pub-subwrap{max-width:1280px;margin:0 auto;padding:16px 22px 0}
.pub-brand{display:inline-flex;align-items:center;gap:7px;margin-right:4px}
.pub-logo{width:24px;height:24px;border-radius:5px;background:var(--c-accent);display:inline-flex;align-items:center;justify-content:center}
.pub-logo .material-symbols-outlined{font-size:15px;color:#fff}
.pub-word{font-size:13px;font-weight:700;color:var(--c-ink);letter-spacing:.01em}
.pub-title{font-size:18px;font-weight:600;color:var(--c-ink);margin:0 0 0 6px}
.pub-subline{margin:0;font-size:13px;color:var(--c-muted)}
/* Header nav (Snapshot · In Depth Views ▾ · Student Data)
Footer-toned: text links, color-only hover, thin brand underline for active. */
.pub-nav{display:flex;align-items:center;gap:10px;margin-left:16px;flex-wrap:wrap}
.pub-nav-item{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;
color:var(--c-ink2);text-decoration:none;padding:9px 12px;border:none;background:none;cursor:pointer;white-space:nowrap;
border-bottom:2px solid transparent;transition:color .12s}
.pub-nav-item:hover{color:var(--brand-primary,#2f64d6)}
.pub-nav-item.is-active{color:var(--brand-primary,#2f64d6);border-bottom-color:var(--brand-primary,#2f64d6);cursor:default}
.pub-nav-drop{position:relative}
.pub-nav-chev{transition:transform .15s ease}
.pub-nav-drop.open .pub-nav-chev{transform:rotate(180deg)}
.pub-nav-drop.open .pub-nav-toggle{color:var(--brand-primary,#2f64d6)}
.pub-nav-menu{position:absolute;top:calc(100% + 9px);left:0;z-index:50;min-width:230px;max-height:340px;overflow-y:auto;
background:#fff;border:1px solid var(--c-line);border-radius:7px;box-shadow:0 10px 30px rgba(20,25,40,.13);padding:6px}
.pub-nav-menu a{display:block;font-size:13px;font-weight:500;color:var(--c-ink2);text-decoration:none;padding:7px 10px;white-space:nowrap;transition:color .12s}
.pub-nav-menu a:hover{color:var(--brand-primary,#2f64d6)}
/* My Views — personal boards first, management kept as a distinct final action. */
.pub-my-views-menu{width:min(300px,calc(100vw - 32px));min-width:250px;padding:6px}
.pub-my-views-list{display:grid;gap:2px}
.pub-nav-menu .pub-my-view-link,.pub-nav-menu .pub-my-views-manage{
display:flex;align-items:center;gap:9px;border-radius:5px;padding:8px 9px;min-width:0}
.pub-my-view-link .material-symbols-outlined,.pub-my-views-manage .material-symbols-outlined{
flex:0 0 auto;font-size:17px;color:var(--c-muted)}
.pub-my-view-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-nav-menu .pub-my-view-link.is-active{color:var(--brand-primary,#2f64d6);background:var(--c-accent-bg)}
.pub-nav-menu .pub-my-view-link:hover,.pub-nav-menu .pub-my-views-manage:hover{background:var(--c-bg)}
.pub-my-views-empty{padding:10px 9px;font-size:12.5px;color:var(--c-muted)}
.pub-my-views-separator{height:1px;margin:6px 4px;background:var(--c-line)}
.pub-nav-menu .pub-my-views-manage{font-weight:650;color:var(--c-ink)}
.pub-nav-menu .pub-my-views-manage .material-symbols-outlined{color:var(--brand-primary,#2f64d6)}
/* In Depth Views — categorized mega menu */
.pub-mega{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:18px 28px;
width:min(500px,calc(100vw - 32px));max-height:none;padding:18px 20px}
.pub-mega-col{min-width:0}
.pub-mega-h{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--brand-primary,#2f64d6);padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--c-line2)}
.pub-mega-h .material-symbols-outlined{font-size:16px}
.pub-mega-col ul{list-style:none;margin:0;padding:0}
.pub-mega-col li{margin:0}
.pub-mega-col a{display:block;font-size:13px;font-weight:500;color:var(--c-ink2);text-decoration:none;
padding:7px 2px;white-space:normal;transition:color .12s}
.pub-mega-col a:hover{color:var(--brand-primary,#2f64d6)}
@media(max-width:520px){ .pub-mega{grid-template-columns:1fr 1fr;gap:4px 16px;padding:14px} }
.pub-org{margin-left:auto;font-size:12.5px;color:var(--c-muted);font-weight:500}
.pub-foot{margin-top:22px;text-align:center;font-size:11px;color:var(--c-faint);letter-spacing:.02em}
.pub-foot-mark{opacity:.85}
/* ---------- Student Data ---------- */
.stu-head{display:flex;align-items:baseline;gap:12px;margin:2px 2px 14px}
.stu-h1{font-size:20px;font-weight:600;color:var(--c-ink);margin:0}
.stu-count{font-size:13px;color:var(--c-muted);font-weight:500}
.stu-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.stu-search{position:relative;flex:1;min-width:240px;max-width:520px}
.stu-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--c-faint)}
.stu-search input{width:100%;font:inherit;font-size:13.5px;color:var(--c-ink);background:var(--c-panel);
border:1px solid var(--c-line);border-radius:7px;padding:10px 12px 10px 34px;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.stu-search input:focus{outline:none;border-color:var(--brand-primary,#2f64d6);box-shadow:0 0 0 2px var(--c-accent-bg)}
.stu-search-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stu-search-error{flex:1 0 100%;margin-top:-7px;color:var(--c-ink2);font-size:12px;font-weight:600}
/* Live-search busy state: dim the results in place. The delay keeps fast
responses from flashing at all; the full-screen overlay is never used here. */
[data-students] [data-stu-rows]{transition:opacity .15s ease .12s}
[data-students].stu-busy [data-stu-rows]{opacity:.5;pointer-events:none}
.stu-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;flex:0 0 auto}
.stu-toggle input{position:absolute;opacity:0;width:0;height:0}
.stu-toggle-track{position:relative;width:34px;height:19px;border-radius:20px;background:var(--c-line);transition:background .15s;flex:0 0 auto}
.stu-toggle-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,25,40,.25);transition:transform .15s}
.stu-toggle input:checked + .stu-toggle-track{background:var(--brand-primary,#2f64d6)}
.stu-toggle input:checked + .stu-toggle-track .stu-toggle-knob{transform:translateX(15px)}
.stu-toggle input:focus-visible + .stu-toggle-track{box-shadow:0 0 0 2px var(--c-accent-bg)}
.stu-toggle-label{font-size:12.5px;font-weight:500;color:var(--c-ink2);white-space:nowrap}
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:4px}
.stu-card{display:flex;align-items:center;gap:13px;background:var(--c-panel);border:1px solid var(--c-line);
border-radius:8px;padding:13px 14px;text-decoration:none;box-shadow:0 1px 2px rgba(20,25,40,.04);transition:border-color .12s,box-shadow .12s}
.stu-card:hover{border-color:var(--brand-primary,#2f64d6);box-shadow:0 3px 10px rgba(20,25,40,.08)}
.stu-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;color:#fff;background:color-mix(in srgb,var(--brand-primary,#2f64d6) 80%,#14161b);letter-spacing:.02em}
.stu-card-main{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.stu-name{font-size:14px;font-weight:600;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stu-id{font-size:11px;color:var(--c-faint);font-family:var(--mono,ui-monospace,monospace);letter-spacing:.02em}
.stu-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.stu-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--c-ink2);background:var(--c-canvas);
border:1px solid var(--c-line2);border-radius:4px;padding:2px 7px}
.stu-chip i{font-style:normal;color:var(--c-faint);text-transform:uppercase;letter-spacing:.04em;font-size:9px;font-weight:700}
.stu-go{flex:0 0 auto;color:var(--c-faint)}
.stu-card:hover .stu-go{color:var(--brand-primary,#2f64d6)}
.stu-none{grid-column:1/-1;padding:40px;text-align:center;color:var(--c-muted);font-size:13.5px;
background:var(--c-panel);border:1px dashed var(--c-line);border-radius:8px}
.stu-column-tools{display:flex;justify-content:flex-end;margin:0 0 10px;position:relative;z-index:12}
.stu-column-picker{position:relative}
.stu-column-picker summary{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid var(--c-line);border-radius:4px;
background:var(--c-panel);color:var(--c-ink);font-size:11px;font-weight:700;cursor:pointer;list-style:none}
.stu-column-picker summary::-webkit-details-marker{display:none}
.stu-column-picker summary:hover,.stu-column-picker[open] summary{border-color:var(--c-ink)}
.stu-column-picker summary .material-symbols-outlined{font-size:17px;color:var(--c-muted)}
.stu-column-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;background:var(--c-ink);color:#fff;border-radius:9px;font-size:9px}
.stu-column-menu{position:absolute;right:0;top:calc(100% + 6px);width:min(340px,calc(100vw - 32px));padding:14px;border:1px solid var(--c-line);
border-radius:5px;background:var(--c-panel);box-shadow:0 14px 35px rgba(22,30,45,.16)}
.stu-column-menu-head{display:flex;flex-direction:column;gap:3px;padding:0 2px 10px;border-bottom:1px solid var(--c-line)}
.stu-column-menu-head strong{font-size:12px;color:var(--c-ink)}
.stu-column-menu-head span{font-size:10.5px;color:var(--c-muted)}
.stu-column-options{display:grid;grid-template-columns:1fr;gap:2px;max-height:290px;overflow-y:auto;padding:8px 0}
.stu-column-option{display:flex;align-items:center;gap:9px;padding:8px;border-radius:3px;color:var(--c-ink);font-size:11.5px;cursor:pointer}
.stu-column-option:hover{background:var(--c-soft)}
.stu-column-option input{width:15px;height:15px;margin:0;accent-color:var(--c-ink)}
.stu-column-empty{margin:8px 2px;color:var(--c-muted);font-size:11px}
.stu-column-apply{width:100%;height:34px;border:1px solid var(--c-ink);border-radius:3px;background:var(--c-ink);color:#fff;
font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.stu-column-apply:hover{opacity:.88}
.stu-roster-scroll{overflow-x:auto;overscroll-behavior-inline:contain}
.stu-roster{width:max-content;min-width:100%}
.stu-roster th,.stu-roster td{min-width:138px;white-space:nowrap}
.stu-roster th:first-child,.stu-roster td:first-child{min-width:210px}
.stu-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 4px}
.stu-page-pages{display:flex;align-items:center;gap:4px}
.stu-page-btn,.stu-page-number{height:34px;min-width:34px;padding:0 10px;border:1px solid var(--c-line);border-radius:3px;
background:var(--c-panel);color:var(--c-ink);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.stu-page-btn:hover,.stu-page-number:hover{border-color:var(--c-ink)}
.stu-page-number.is-current{border-color:var(--c-ink);background:var(--c-ink);color:#fff}
.stu-page-btn:disabled{opacity:.35;cursor:not-allowed}
.stu-page-gap{min-width:24px;text-align:center;color:var(--c-muted)}
.stu-page-summary{margin-left:8px;font-size:11px;color:var(--c-muted)}
@media(max-width:640px){.stu-pagination{flex-wrap:wrap}.stu-page-summary{flex-basis:100%;margin:4px 0 0;text-align:center}}
.stu-empty{max-width:460px;margin:60px auto;text-align:center;background:var(--c-panel);border:1px solid var(--c-line);border-radius:10px;padding:40px 32px}
.stu-empty .material-symbols-outlined{font-size:38px;color:var(--c-faint)}
.stu-empty h1{font-size:17px;color:var(--c-ink);margin:12px 0 6px}
.stu-empty p{font-size:13px;color:var(--c-muted);line-height:1.55;margin:0 0 18px}
.stu-empty-btn{display:inline-block;font-size:12.5px;font-weight:600;color:#fff;background:var(--brand-primary,#2f64d6);
border-radius:6px;padding:9px 18px;text-decoration:none}
/* Student detail */
.stu-back{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--c-muted);
text-decoration:none;margin:2px 0 14px}
.stu-back:hover{color:var(--brand-primary,#2f64d6)}
.stu-profile{display:flex;align-items:center;gap:18px;background:var(--c-panel);border:1px solid var(--c-line);
border-top:3px solid var(--brand-primary,#2f64d6);border-radius:8px;padding:20px 22px;margin-bottom:18px;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.stu-avatar-lg{width:60px;height:60px;font-size:19px}
.stu-profile-main{min-width:0;flex:1}
.stu-name-lg{font-size:21px;font-weight:600;color:var(--c-ink);margin:0}
.stu-id-lg{font-size:12px;color:var(--c-faint);font-family:var(--mono,ui-monospace,monospace)}
.stu-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:12px}
.stu-fact{display:flex;flex-direction:column;gap:2px}
.stu-fact-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-faint)}
.stu-fact-v{font-size:13.5px;color:var(--c-ink);font-weight:500}
.stu-section{background:var(--c-panel);border:1px solid var(--c-line);border-radius:8px;margin-bottom:14px;overflow:hidden;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.stu-section-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--c-line2)}
.stu-section-h{font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--c-ink);margin:0}
.stu-section-n{font-size:11px;font-weight:700;color:var(--brand-primary,#2f64d6);background:var(--c-accent-bg);border-radius:9px;padding:1px 8px}
.stu-section-empty{padding:16px;color:var(--c-muted);font-size:13px;margin:0}
.stu-chart{padding:14px 16px 6px;border-bottom:1px solid var(--c-line2)}
.stu-chart-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);margin-bottom:6px}
.stu-chart-svg{width:100%}
.stu-ch-svg{width:100%;height:auto;display:block;max-height:170px}
.stu-ch-x{font-size:10px;fill:var(--c-faint);font-family:var(--ui,inherit)}
.stu-ch-v{font-size:10px;font-weight:700;fill:var(--c-ink2);font-family:var(--ui,inherit)}
.stu-table-wrap{overflow-x:auto}
.stu-table{width:100%;border-collapse:collapse;font-size:12.5px}
.stu-table th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);
padding:9px 14px;border-bottom:1px solid var(--c-line2);white-space:nowrap;background:var(--c-canvas)}
.stu-table td{padding:9px 14px;border-bottom:1px solid var(--c-line2);color:var(--c-ink2);white-space:nowrap}
.stu-table tbody tr:last-child td{border-bottom:none}
.stu-table tbody tr:hover td{background:var(--c-canvas)}
/* Roster table (index) */
.stu-roster-wrap{background:var(--c-panel);border:1px solid var(--c-line);border-radius:8px;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.stu-roster td{padding:10px 14px;white-space:nowrap}
.stu-roster tbody .stu-row{cursor:pointer}
.stu-roster tbody .stu-row:hover td{background:var(--c-accent-bg)}
.stu-row:focus{outline:none}
.stu-row:focus td{background:var(--c-accent-bg);box-shadow:inset 0 0 0 1px var(--brand-primary,#2f64d6)}
.stu-c-name{display:flex;align-items:center;gap:10px}
.stu-c-nm{font-weight:600;color:var(--c-ink)}
.stu-avatar-sm{width:28px;height:28px;font-size:10px}
.stu-c-id{font-family:var(--mono,ui-monospace,monospace);color:var(--c-faint);font-size:11.5px}
.stu-none-row td{padding:34px!important;text-align:center;color:var(--c-muted);white-space:normal}
/* ---------- Student report ---------- */
.pub-wrap.sr{max-width:940px}
.pub-wrap.sr{max-width:1010px}
.sr-sheet{background:#fff;border:1px solid var(--c-line);
border-radius:2px;padding:42px 52px 48px;max-width:940px;margin:0 auto;
box-shadow:0 1px 2px rgba(20,25,40,.05),0 18px 48px rgba(20,25,40,.08);
counter-reset:srsec}
.sr-topbar{max-width:940px;margin:0 auto 14px}
@media(max-width:680px){.sr-sheet{padding:26px 20px 30px}}
/* masthead */
.sr-mast{border-bottom:1px solid var(--c-line);padding-bottom:22px}
.sr-orgrow{display:flex;align-items:baseline;gap:18px;padding-bottom:10px;
border-bottom:2.5px solid var(--c-ink);position:relative;margin-bottom:1px}
.sr-orgrow::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--c-ink)}
.sr-org{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--c-ink);letter-spacing:.02em}
.sr-org img{height:18px;width:auto;max-width:22px;object-fit:contain}
.sr-eyebrow{flex:1;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink2)}
.sr-gen{font-family:var(--mono);font-size:10.5px;color:var(--c-faint);letter-spacing:.02em}
.sr-idrow{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;margin-top:24px}
.sr-naming{min-width:0}
.sr-name{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--c-ink);line-height:1.04;margin:0;letter-spacing:-.012em}
.sr-sub{font-size:13.5px;color:var(--c-muted);margin:9px 0 0}
.sr-idbox{flex:0 0 auto;text-align:right;border:1px solid var(--c-line);border-left:3px solid var(--brand-primary,#2f64d6);
padding:9px 14px 10px;display:flex;flex-direction:column;gap:2px;background:#fcfcfb}
.sr-idbox span{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-faint)}
.sr-idbox b{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--c-ink);letter-spacing:.01em}
.sr-idbox i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
.sr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sr-tag{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink2);border-radius:2px;
border:1px solid var(--c-line);border-radius:2px;padding:2px 7px;background:#fff}
.sr-tag-info{color:#3a6286;border-color:#bcd0e4}
.sr-tag-warn{color:#9a5230;border-color:#e3c3b1}
.sr-tag-muted{color:var(--c-muted)}
.sr-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 56px;margin:22px 0 0}
@media(max-width:640px){.sr-meta{grid-template-columns:1fr}}
.sr-meta div{display:flex;align-items:baseline;gap:12px;min-width:0}
.sr-meta dt{flex:0 0 auto;display:flex;align-items:baseline;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-faint)}
.sr-meta div::before{display:none}
.sr-meta dt::after{content:""}
.sr-meta div{position:relative}
.sr-meta div::after{content:"";flex:1;order:1;border-bottom:1px dotted #c6cbd4;transform:translateY(-3px);min-width:24px}
.sr-meta dd{order:2;margin:0;font-size:13px;color:var(--c-ink);font-weight:500;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* summary stat line */
.sr-band{margin:24px 0 2px;border-top:2px solid var(--c-ink);border-bottom:1px solid var(--c-line);padding:11px 0 13px}
.sr-band-cap{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-faint);margin-bottom:10px}
.sr-band .sr-stats{margin:0}
.sr-stats{display:flex;flex-wrap:wrap;gap:14px 0;margin:22px 0 2px}
.sr-stats-tight{margin:2px 0}
.sr-stat{display:flex;flex-direction:column;gap:4px;padding:1px 22px;border-left:1px solid var(--c-line2)}
.sr-stat:first-child{border-left:none;padding-left:0}
.sr-stat-l{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-faint)}
.sr-stat-v{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--c-ink);line-height:1;letter-spacing:-.01em}
.sr-v-good{color:#2f7d52}.sr-v-ok{color:#9a7b2e}.sr-v-warn{color:#b0573a}.sr-v-bad{color:#9a3f33}
/* sections */
.sr-sec{margin-top:36px}
.sr-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--c-line);padding-bottom:8px;margin-bottom:16px;position:relative}
.sr-sec-h::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--c-ink)}
.sr-sec-h h2{font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--c-ink);margin:0}
.sr-sec-h h2::before{counter-increment:srsec;content:counter(srsec,decimal-leading-zero);
font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--brand-primary,#2f64d6);
margin-right:11px;letter-spacing:.06em;vertical-align:3px}
.sr-sec-meta{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-faint)}
/* score matrix */
.sr-matrix{width:100%;border-collapse:collapse;font-size:13px}
.sr-matrix thead th{border-top:2px solid var(--c-ink)}
.sr-matrix th{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);background:#fbfbfa;
text-align:center;padding:0 10px 8px;border-bottom:1.5px solid var(--c-ink2)}
.sr-matrix th.sr-col-l,.sr-matrix td.sr-col-l{text-align:left}
.sr-matrix td{text-align:center;padding:11px 10px;border-bottom:1px solid var(--c-line2);vertical-align:middle}
.sr-matrix tbody tr:last-child td{border-bottom:none}
.sr-mx-subj{font-weight:600;color:var(--c-ink);font-size:13.5px}
.sr-rit{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--c-ink);line-height:1.1}
.sr-pct{display:block;font-size:10.5px;color:var(--c-faint);margin-top:1px}
.sr-na{color:var(--c-faint)}
.sr-mx-growth{color:var(--c-muted);font-size:12px}
.sr-lvl{font-size:11px;font-weight:700;letter-spacing:.02em}
.sr-lvl::before{content:"\25A0";font-size:7px;margin-right:5px;vertical-align:2px}
.sr-lvl-plain::before{content:""}
.sr-lvl-good{color:#2f7d52}.sr-lvl-ok{color:#9a7b2e}.sr-lvl-warn{color:#b0573a}.sr-lvl-bad{color:#9a3f33}.sr-lvl-plain{color:var(--c-muted)}
.sr-matrix-cap{font-size:10.5px;color:var(--c-faint);margin:9px 0 0;font-style:italic}
.sr-ac-snap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--c-line);border-left:3px solid var(--brand-primary,#2f64d6);
background:#fcfcfb;margin:0 0 18px}
.sr-ac-stat{min-width:0;padding:13px 16px;border-left:1px solid var(--c-line2);display:flex;flex-direction:column;gap:4px}
.sr-ac-stat:first-child{border-left:none}
.sr-ac-stat span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-ac-stat b{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--c-ink);line-height:1}
.sr-ac-stat i{font-style:normal;font-size:11px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Academic charts: one lead trend followed by readable two-column details. */
.sr-ac-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 24px}
.sr-ac-card-wide{grid-column:1 / -1}
.sr-ac-card{position:relative;min-width:0;border:1px solid var(--c-line);border-radius:4px;background:#fff;
box-shadow:0 8px 24px rgba(20,25,40,.055);padding:0 18px 14px;overflow:visible}
.sr-ac-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--brand-primary,#2f64d6)}
.sr-ac-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:17px 0 12px;border-bottom:1px solid var(--c-line2)}
.sr-ac-card-h>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sr-ac-card-h b{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--c-ink);line-height:1.2}
.sr-ac-card-h span{font-size:10.5px;color:var(--c-muted);line-height:1.35}
.sr-ac-card-h i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-primary,#2f64d6);
border:1px solid var(--c-line);padding:4px 7px;white-space:nowrap}
.sr-ac-chart{height:270px;width:100%;min-width:0;margin-top:8px;overflow:visible}
.sr-ac-card-wide .sr-ac-chart{height:330px}
.sr-ac-chart .apexcharts-tooltip{border:1px solid var(--c-line)!important;box-shadow:0 12px 28px rgba(20,25,40,.15)!important}
.sr .apexcharts-gridline,.prx .apexcharts-gridline{display:none!important}
.sr-ac-chart .apexcharts-canvas,.sr-ac-chart .apexcharts-svg,
.prx-ac-chart .apexcharts-canvas,.prx-ac-chart .apexcharts-svg,
.prxf-chart .apexcharts-canvas,.prxf-chart .apexcharts-svg,
.sr-att-chart .apexcharts-canvas,.sr-att-chart .apexcharts-svg,
.prx-att-chart .apexcharts-canvas,.prx-att-chart .apexcharts-svg{width:100%!important;max-width:100%!important;overflow:visible!important}
@media(max-width:1050px){ .sr-ac-charts{grid-template-columns:1fr} .sr-ac-card-wide{grid-column:auto} }
@media(max-width:760px){
.sr-ac-snap{grid-template-columns:1fr 1fr}
.sr-ac-stat:nth-child(odd){border-left:none}
.sr-ac-card{padding:0 12px 10px}
.sr-ac-card-h{padding-top:14px}
.sr-ac-chart,.sr-ac-card-wide .sr-ac-chart{height:270px}
}
/* ledger / tables */
.sr-ledger{margin-top:18px;border-top:1px solid var(--c-line2)}
.sr-ledger summary{cursor:pointer;padding:11px 0 0;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);list-style:none}
.sr-ledger summary::-webkit-details-marker{display:none}
.sr-ledger summary::before{content:"+ ";font-family:var(--mono);color:var(--c-faint)}
.sr-ledger[open] summary::before{content:"– "}
.sr-scroll{max-height:340px;overflow:auto;margin-top:11px;border:1px solid var(--c-line2);border-radius:3px}
.sr-table{width:100%;border-collapse:collapse;font-size:12px}
.sr-table th{position:sticky;top:0;background:var(--c-canvas);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--c-muted);text-align:center;padding:8px 12px;border-bottom:1px solid var(--c-line)}
.sr-table th.sr-col-l,.sr-table td.sr-col-l{text-align:left}
.sr-table td{text-align:center;padding:7px 12px;border-bottom:1px solid var(--c-line2);color:var(--c-ink2);white-space:nowrap}
.sr-table td.mono{font-family:var(--mono);font-size:11.5px}
.sr-table tbody tr:last-child td{border-bottom:none}
.sr-enr{font-size:12.5px}
.sr-enr td{padding:9px 12px}
/* attendance */
.sr-att{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:stretch}
@media(max-width:600px){.sr-att{flex-direction:column;gap:14px}}
.sr-att-fig{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:20px;border:1px solid var(--c-line);
border-left:3px solid var(--brand-primary,#2f64d6);background:#fcfcfb}
.sr-att-rate{font-family:var(--mono);font-size:38px;font-weight:600;color:var(--c-ink);line-height:1;letter-spacing:-.02em}
.sr-att-rate small{font-size:18px;font-weight:500;color:var(--c-faint);margin-left:1px}
.sr-att-cap{font-size:12px;color:var(--c-muted)}
.sr-att-chart-card{min-width:0;border:1px solid var(--c-line);background:#fff;padding:13px 16px 8px}
.sr-att-chart-title{display:block;font-family:var(--serif);font-size:14px;font-weight:600;color:var(--c-ink);padding-bottom:8px;border-bottom:1px solid var(--c-line2)}
.sr-att-chart{height:210px;min-width:0;margin-top:4px;overflow:visible}
.sr-att-chart .stu-ch-svg{width:100%;height:122px}
@media(max-width:600px){.sr-att{display:flex;flex-direction:column}.sr-att-chart{height:230px}}
/* behavior */
.sr-quiet{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#2f7d52;font-weight:500;margin:2px 0}
.sr-flag{font-size:12.5px;color:#9a5230;margin:13px 0 0;font-weight:500}
/* empty / chart text */
.sr-none{font-size:13px;color:var(--c-faint);font-style:italic;margin:2px 0}
/* topbar: back link + export action */
.sr-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sr-topbar .stu-back{margin-bottom:0}
.sr-print-btn{gap:6px}
/* notes & observations */
.sr-note-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.sr-note{border:1px solid var(--c-line);border-left:3px solid var(--brand-primary,#2f64d6);border-radius:3px;
background:#fbfbfc;padding:10px 14px 11px}
.sr-note-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.sr-note-author{font-size:12px;font-weight:700;color:var(--c-ink)}
.sr-note-date{font-size:11px;color:var(--c-faint)}
.sr-note-del-f{margin-left:auto}
.sr-note-del{font:inherit;font-size:11px;font-weight:600;color:var(--c-faint);background:none;border:none;cursor:pointer;padding:0}
.sr-note-del:hover{color:#c0392b}
.sr-note-body{font-size:13px;color:var(--c-ink2);line-height:1.55}
.sr-note-body p{margin:0 0 6px}
.sr-note-body p:last-child{margin-bottom:0}
.sr-note-form textarea{width:100%;font:inherit;font-size:13px;line-height:1.5;color:var(--c-ink);
border:1px solid var(--c-line);border-radius:3px;padding:10px 12px;resize:vertical;background:#fff}
.sr-note-form textarea:focus{outline:none;border-color:var(--brand-primary,#2f64d6)}
.sr-note-actions{display:flex;justify-content:flex-end;margin-top:8px}
.sr .stu-ch-v{font-family:var(--mono);fill:var(--c-ink2);font-weight:600;font-size:10px}
.sr .stu-ch-x{fill:var(--c-faint);font-size:10px}
.stu-ch-ref{stroke:var(--c-faint);stroke-width:1;stroke-dasharray:3 3}
.stu-ch-reflbl{font-size:8.5px;fill:var(--c-faint);font-family:var(--ui)}
/* ---------- Public board footer ---------- */
.pub-footer{margin-top:40px;border-top:3px solid var(--brand-primary,#2f64d6);background:var(--c-panel);
border-radius:5px;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.pub-footer-main{display:grid;grid-template-columns:1.4fr 2.4fr;gap:36px;padding:28px 30px 26px}
@media(max-width:760px){.pub-footer-main{grid-template-columns:1fr;gap:26px}}
.pub-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pub-footer-logo{height:40px;width:auto;object-fit:contain}
.pub-footer-word{font-size:16px;font-weight:700;color:var(--c-ink)}
.pub-footer-blurb{margin:0;font-size:12.5px;line-height:1.55;color:var(--c-muted);max-width:30ch}
.pub-footer-site{font-size:14px;font-weight:700;letter-spacing:.005em;color:#0a3d62;text-decoration:none}
.pub-footer-site:hover{color:#072b46}
.pub-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:480px){.pub-footer-cols{grid-template-columns:1fr 1fr}}
.pub-footer-col h4{margin:0 0 11px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-primary,#2f64d6)}
.pub-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pub-footer-col a{font-size:12.5px;color:var(--c-ink2);text-decoration:none;transition:color .12s}
.pub-footer-col a:hover{color:var(--brand-primary,#2f64d6)}
.pub-footer-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;
padding:13px 30px;border-top:1px solid var(--c-line2);font-size:11.5px;color:var(--c-faint)}
.pub-footer-meta{letter-spacing:.01em}
.pub-logo-img{background:transparent;width:auto;height:46px;border-radius:5px;overflow:hidden}
.pub-logo-img img{height:46px;width:auto;display:block;object-fit:contain}
.pub-site{margin-left:auto;font-size:16px;font-weight:700;letter-spacing:.005em;color:#0a3d62;text-decoration:none}
.pub-site:hover{color:#072b46}
.pub-headings{display:flex;flex-direction:column;gap:1px;margin-left:6px}
.pub-headings .pub-title{margin:0}
.pub-tagline{font-size:12px;color:var(--c-muted);font-weight:500}
/* ---------- Site settings ---------- */
.set-wrap{max-width:760px;margin:0 auto;padding:6px 4px 60px}
.set-flash{padding:9px 13px;border-radius:4px;font-size:13px;font-weight:500;margin-bottom:16px}
.set-flash.ok{background:color-mix(in srgb,#1f9d57 12%,#fff);color:#157a42;border:1px solid color-mix(in srgb,#1f9d57 28%,#fff)}
.set-flash.err{background:color-mix(in srgb,#d64545 12%,#fff);color:#b53030;border:1px solid color-mix(in srgb,#d64545 28%,#fff)}
.set-head{margin:4px 0 20px}
.set-head h1{font-size:20px;font-weight:600;color:var(--c-ink);margin:0 0 4px}
.set-head p{font-size:13px;color:var(--c-muted);margin:0}
.set-card{background:var(--c-panel);border:1px solid var(--c-line);border-radius:5px;margin-bottom:16px;overflow:hidden}
.set-card-head{padding:14px 18px;border-bottom:1px solid var(--c-line2)}
.set-card-head h2{font-size:14px;font-weight:600;color:var(--c-ink);margin:0 0 3px}
.set-card-head p{font-size:12.5px;color:var(--c-muted);margin:0}
.set-card-body{padding:18px}
.set-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.set-grid2{grid-template-columns:1fr}}
.set-field{display:flex;flex-direction:column;gap:6px}
.set-field>span{font-size:12px;font-weight:600;color:var(--c-ink2)}
.set-field em{font-style:normal;font-weight:400;color:var(--c-faint)}
.set-input{font:inherit;font-size:13px;color:var(--c-ink);background:#fff;border:1px solid var(--c-line);border-radius:3px;padding:8px 10px;width:100%}
.set-input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-bg)}
.set-logo-row{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px}
.set-logo-preview{width:76px;height:76px;border:1px solid var(--c-line);border-radius:5px;background:var(--c-canvas);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.set-logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.set-logo-preview .material-symbols-outlined{font-size:30px;color:var(--c-faint)}
.set-logo-controls{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.set-file{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--c-accent);border:1px solid var(--c-accent-line);background:var(--c-accent-bg);border-radius:3px;padding:7px 12px;width:max-content}
.set-file:hover{filter:brightness(.98)}
.set-file .material-symbols-outlined{font-size:16px}
.set-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.set-hint{font-size:11.5px;color:var(--c-faint);margin:0}
.set-link-btn,.set-link-btn button{background:none;border:none;color:#b53030;font:inherit;font-size:12px;font-weight:500;cursor:pointer;padding:0;text-align:left}
.set-link-btn:hover{text-decoration:underline}
.set-color{display:flex;align-items:center;gap:8px}
.set-color-swatch{width:38px;height:36px;padding:0;border:1px solid var(--c-line);border-radius:3px;background:none;cursor:pointer;flex:0 0 auto}
.set-color-hex{font-family:var(--mono,ui-monospace,monospace);text-transform:lowercase}
.set-check{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--c-ink2);cursor:pointer}
.set-check input[type=checkbox]{accent-color:var(--c-accent);width:15px;height:15px}
.set-actions{display:flex;justify-content:flex-end;margin-top:4px}
.set-save{font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--c-accent);border:none;border-radius:3px;padding:9px 20px;cursor:pointer}
.set-save:hover{filter:brightness(.96)}
/* Users admin page */
.usr-add{display:grid;grid-template-columns:2fr 1.4fr 1.6fr 1.4fr auto;gap:12px;align-items:end}
@media(max-width:900px){.usr-add{grid-template-columns:1fr 1fr}}
.usr-add-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--c-accent);border:none;border-radius:3px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.usr-add-btn:hover{filter:brightness(.96)}
.usr-add-btn .material-symbols-outlined{font-size:17px}
.usr-table{width:100%;border-collapse:collapse;font-size:13px}
.usr-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-faint);padding:6px 10px;border-bottom:1px solid var(--c-line)}
.usr-table td{padding:10px;border-bottom:1px solid var(--c-line);vertical-align:middle}
.usr-table tr:last-child td{border-bottom:none}
.usr-id{display:flex;align-items:center;gap:10px}
.usr-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--c-accent-bg);color:var(--c-accent);font-size:11px;font-weight:700;flex:none}
.usr-name{font-weight:600;color:var(--c-ink)}
.usr-you{margin-left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-accent);background:var(--c-accent-bg);border-radius:8px;padding:1px 7px}
.usr-email{color:var(--c-faint);font-size:12px}
.usr-role{width:auto;min-width:110px}
.usr-reset{display:flex;gap:6px;max-width:230px}
.usr-mini-btn{font:inherit;font-size:12px;font-weight:600;color:var(--c-ink2);background:#fff;border:1px solid var(--c-line);border-radius:3px;padding:0 12px;cursor:pointer}
.usr-mini-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}
.usr-actions{text-align:right}
.usr-del{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--c-faint);background:none;border:none;border-radius:3px;cursor:pointer}
.usr-del:hover{color:#c62828;background:#fdecea}
.usr-del .material-symbols-outlined{font-size:18px}
/* Student Data admin config */
.sv-wrap{max-width:860px}
.sv-init{background:var(--c-ink)}
.sv-fieldsets{display:flex;flex-direction:column;gap:18px}
.sv-fieldset-h{font-size:12px;font-weight:700;color:var(--c-ink2);margin-bottom:8px}
.sv-fieldset-h em{font-style:normal;font-weight:400;color:var(--c-faint);margin-left:6px}
.sv-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px}
.sv-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--c-ink2);cursor:pointer}
.sv-check input{accent-color:var(--c-accent)}
.sv-sections{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.sv-row{border:1px solid var(--c-line);border-radius:6px;padding:14px;background:var(--c-canvas)}
.sv-row-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.sv-row-label{font-weight:600}
.sv-row-x{flex:0 0 auto;border:none;background:none;color:var(--c-faint);font-size:14px;cursor:pointer;width:30px;height:30px;border-radius:4px}
.sv-row-x:hover{background:#f0d7d7;color:#b53030}
.sv-row-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
@media(max-width:680px){.sv-row-grid{grid-template-columns:1fr 1fr}}
/* Navigation builder */
.nb-wrap{max-width:880px}
.nb-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.nb-spacer{flex:1}
.nb-items{display:flex;flex-direction:column;gap:10px;min-height:44px}
.nb-row{background:var(--c-panel);border:1px solid var(--c-line);border-radius:7px;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.nb-page,.nb-link{display:flex;align-items:center;gap:10px;padding:10px 12px}
.nb-menu{padding:10px 12px}
.nb-menu-head{display:flex;align-items:center;gap:10px}
.nb-grip{cursor:grab;color:var(--c-faint);font-size:15px;user-select:none;flex:0 0 auto;line-height:1}
.nb-badge{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);background:var(--c-canvas);border:1px solid var(--c-line2);border-radius:3px;padding:3px 7px;flex:0 0 auto;white-space:nowrap}
.nb-badge-menu{color:var(--brand-primary,#2f64d6);border-color:var(--c-accent-line)}
.nb-input{font:inherit;font-size:13px;color:var(--c-ink);background:#fff;border:1px solid var(--c-line);border-radius:4px;padding:6px 9px}
.nb-input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-bg)}
.nb-label{flex:1;min-width:80px}
.nb-snap{flex:1;min-width:130px;max-width:280px}
.nb-icon{width:96px;flex:0 0 auto;font-family:var(--mono)}
.nb-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--c-muted);white-space:nowrap}
.nb-check input{accent-color:var(--c-accent)}
.nb-route{font-family:var(--mono);font-size:11px;color:var(--c-faint)}
.nb-del{flex:0 0 auto;border:none;background:none;color:var(--c-faint);font-size:13px;cursor:pointer;width:26px;height:26px;border-radius:4px}
.nb-del:hover{background:#f0d7d7;color:#b53030}
.nb-cats{display:flex;flex-direction:column;gap:8px;margin:10px 0 0;padding:10px 0 0 8px;border-top:1px dashed var(--c-line)}
.nb-cat{background:var(--c-canvas);border:1px solid var(--c-line2);border-radius:6px;padding:9px 10px}
.nb-cat-head{display:flex;align-items:center;gap:8px}
.nb-pages{display:flex;flex-direction:column;gap:6px;margin:8px 0 0;padding:8px 0 0 8px;border-top:1px dashed var(--c-line2)}
.nb-subpage{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--c-line2);border-radius:5px;padding:6px 8px}
.nb-add-sm{margin-top:8px;font:inherit;font-size:11.5px;font-weight:600;color:var(--c-accent);background:none;border:1px dashed var(--c-accent-line);border-radius:4px;padding:5px 10px;cursor:pointer}
.nb-add-sm:hover{background:var(--c-accent-bg)}
.nb-dragging{opacity:.45;outline:1.5px dashed var(--c-accent)}
.nb-cats:empty,.nb-pages:empty{min-height:30px}
.nb-cats:empty::after{content:"Drag a category here or click + Category";display:block;font-size:11px;color:var(--c-faint);padding:6px 2px}
.nb-pages:empty::after{content:"Drag a page here or click + Page";display:block;font-size:11px;color:var(--c-faint);padding:4px 2px}
.pub-grid .tile-resize{display:none}
/* Rows are assigned per tile by pubPackRows (pluvoir.js), which re-packs hidden
empties within their own section. `dense` auto-flow must NOT be used here: it
would lift a later card into any hole above it, across section headers. */
.pub-grid{grid-auto-flow:row}
/* Full-page loading overlay. Server-rendered so incomplete chart geometry is
never exposed while fonts and the first data request are settling. */
.pv-load{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;
background:#f2f3f0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;
transition:opacity .24s ease,visibility 0s linear .24s}
.pv-load.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s ease}
.pv-load-atmosphere{position:absolute;inset:0;background:
radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--brand-primary,#2f6f89) 11%,transparent) 0,transparent 34%),
radial-gradient(circle at 82% 74%,rgba(192,109,58,.09) 0,transparent 32%),
linear-gradient(rgba(35,49,58,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(35,49,58,.035) 1px,transparent 1px);
background-size:auto,auto,44px 44px,44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.pv-load-panel{position:relative;width:min(560px,100%);padding:38px 42px 34px;background:rgba(255,255,253,.94);
border:1px solid rgba(43,55,62,.16);border-top:3px solid var(--brand-primary,#2f6f89);border-radius:5px;
box-shadow:0 24px 70px rgba(31,42,49,.13);animation:pv-rise .32s ease-out both}
.pv-load-brands{min-height:64px;display:flex;align-items:center;justify-content:center;gap:28px}
.pv-load-district{min-width:0;max-width:210px;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.pv-load-district img{display:block;max-width:210px;max-height:62px;width:auto;height:auto;object-fit:contain}
.pv-load-district-mark{display:grid;place-items:center;width:38px;height:38px;color:var(--brand-primary,#2f6f89);font-size:25px}
.pv-load-district-name{font:700 16px/1.2 var(--ui,"IBM Plex Sans");color:#252d31;overflow-wrap:anywhere}
.pv-load-brand-divider{width:1px;height:52px;background:#d8dcd9;flex:0 0 auto}
.pv-load-pluvoir{display:block;max-width:168px;max-height:52px;width:auto;height:auto;object-fit:contain}
.pv-load-copy{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.pv-load-copy strong{font:600 20px/1.25 var(--ui,"IBM Plex Sans");letter-spacing:-.015em;color:#20282d}
.pv-load-msg{font-family:var(--ui,"IBM Plex Sans");font-size:13px;font-weight:450;color:#687278;letter-spacing:.005em}
.pv-load-progress{position:relative;height:2px;margin-top:24px;background:#e2e5e2;overflow:hidden}
.pv-load-progress span{position:absolute;inset:0 auto 0 0;width:42%;background:var(--brand-primary,#2f6f89);animation:pv-progress 1.35s ease-in-out infinite}
@keyframes pv-progress{0%{transform:translateX(-110%)}55%{transform:translateX(115%)}100%{transform:translateX(245%)}}
.pv-load-box{display:flex;flex-direction:column;align-items:center;gap:18px;animation:pv-rise .28s ease-out both}
.pv-spinner{display:flex;gap:9px}
.pv-spinner span{width:13px;height:13px;border-radius:50%;background:var(--c-accent,#2f64d6);
animation:pv-bounce 1.05s infinite ease-in-out both}
.pv-spinner span:nth-child(1){animation-delay:-.24s}
.pv-spinner span:nth-child(2){animation-delay:-.12s;background:#3ca951}
.pv-spinner span:nth-child(3){background:#efb118}
@keyframes pv-bounce{0%,80%,100%{transform:scale(.35);opacity:.45}40%{transform:scale(1);opacity:1}}
@keyframes pv-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:560px){
.pv-load-panel{padding:30px 22px 28px}.pv-load-brands{gap:18px}.pv-load-brand-divider{height:44px}
.pv-load-district img{max-width:130px;max-height:52px}.pv-load-pluvoir{max-width:125px;max-height:44px}
.pv-load-district-name{font-size:13px}.pv-load-copy strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.pv-load-panel,.pv-load-progress span,.pv-spinner span{animation:none}.pv-load-progress span{width:100%}}
/* Published-board entrance: same soft, data-loading feel as the wireframe. */
.pub-wrap[data-pub-board] .board-mast,
.pub-wrap[data-pub-board] .board-topdock,
.pub-wrap[data-pub-board] .board-filterbar,
.pub-wrap[data-pub-board] .board-tabs,
.pub-wrap[data-pub-board] .board-subnav,
.pub-wrap[data-pub-board] .board-spy,
.pub-wrap[data-pub-board] .tile{
/* fill must stay `backwards`: `both` would pin the keyframe's opacity:1 on
the tile forever (animations beat normal declarations), silently killing
the .pv-gf-quiet relevance fade. */
animation:pv-board-in .42s ease-out backwards;
}
.pub-wrap[data-pub-board] .tile:nth-child(2n){animation-delay:.025s}
.pub-wrap[data-pub-board] .tile:nth-child(3n){animation-delay:.05s}
.pub-wrap[data-pub-board] .tile:nth-child(5n){animation-delay:.075s}
@keyframes pv-board-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Import snapshot page */
.imp-wrap{display:flex;justify-content:center;padding:32px 20px}
.imp-card{width:100%;max-width:640px;background:#fff;border:1px solid var(--c-line);border-radius:5px;padding:24px 26px;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.imp-h{font-size:18px;font-weight:700;color:var(--c-ink);margin:0 0 6px}
.imp-sub{font-size:13px;color:var(--c-muted);line-height:1.55;margin:0 0 18px}
.imp-sub code{font-family:var(--mono);font-size:12px;background:#f1f2f5;padding:1px 5px;border-radius:3px;color:var(--c-ink)}
.imp-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--c-muted);margin-bottom:14px}
.imp-field input[type=file]{font:inherit;font-size:13px;color:var(--c-ink)}
.imp-or{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);margin:6px 0 8px}
.imp-textarea{width:100%;font-family:var(--mono);font-size:12px;line-height:1.5;padding:11px 12px;border:1px solid var(--c-line);border-radius:4px;background:#fafbfc;color:var(--c-ink);resize:vertical}
.imp-textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-bg);background:#fff}
.imp-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
/* Dashboard header + section tabs */
.dash-head{margin-bottom:16px;border-bottom:1px solid var(--c-line)}
.dash-titlewrap{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dash-mark{font-size:22px;color:var(--c-accent)}
.dash-h1{font-size:20px;font-weight:700;color:var(--c-ink);letter-spacing:-.01em;margin:0;line-height:1.1}
.dash-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dash-title-in{font:inherit;font-size:19px;font-weight:700;color:var(--c-ink);letter-spacing:-.01em;border:1px solid transparent;background:none;border-radius:5px;padding:2px 6px;margin:0 -6px}
.dash-title-in:hover{border-color:var(--c-line)}
.dash-title-in:focus{outline:none;border-color:var(--c-accent);background:#fff;box-shadow:0 0 0 2px var(--c-accent-bg)}
.dash-sub-in{font:inherit;font-size:12.5px;color:var(--c-muted);border:1px solid transparent;background:none;border-radius:5px;padding:3px 6px;margin:0 -6px;width:520px;max-width:60vw}
.dash-sub-in:hover{border-color:var(--c-line)}
.dash-sub-in:focus{outline:none;border-color:var(--c-accent);background:#fff;box-shadow:0 0 0 2px var(--c-accent-bg)}
.dash-tabs{display:flex;align-items:flex-end;gap:2px;overflow-x:auto}
.dash-tab{position:relative;font-size:13px;font-weight:600;color:var(--c-muted);padding:9px 15px;cursor:default;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.dash-tab.is-active{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.dash-tab-btn{border:0;background:none;font:inherit;cursor:pointer}
.dash-tab-btn:hover{color:var(--c-ink)}
.dash-tab.is-soon{color:#b7bdc8;cursor:not-allowed}
.dash-tab.is-soon:hover{color:#9aa1ad}
.board-settings-pop{
position:relative;z-index:11;margin:-8px 0 16px;background:#fff;border:1px solid var(--c-line);
border-radius:14px;box-shadow:0 18px 50px rgba(20,25,40,.14);padding:16px
}
.board-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.board-settings-head strong{display:block;font-size:15px;color:var(--c-ink);margin-bottom:2px}
.board-settings-head span{display:block;font-size:12px;color:var(--c-muted)}
.board-settings-x{border:0;background:none;color:var(--c-muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
.board-settings-x:hover{color:var(--c-ink)}
.board-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px}
.board-settings-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--c-muted)}
.board-settings-grid select,.board-settings-grid textarea{
width:100%;border:1px solid var(--c-line);border-radius:8px;background:#fff;color:var(--c-ink);
font:inherit;font-size:13px;font-weight:500;padding:8px 10px
}
.board-settings-tabs{grid-column:1 / -1}
.board-settings-tabs textarea{font-family:var(--mono);font-size:12px;line-height:1.45;resize:vertical}
.board-settings-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px}
.board-settings-actions span{font-size:12px;color:var(--c-muted)}
.board-lock-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 7px;border-radius:999px;background:#eef1f5;color:#667284;font-size:11px;font-weight:650;vertical-align:2px}
.board-lock-badge .material-symbols-outlined{font-size:13px}
.board-editability{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:14px 15px;border:1px solid var(--c-line);border-radius:8px;background:#f8fafc}
.board-editability>div{display:flex;align-items:flex-start;gap:10px;min-width:0}
.board-editability>div>.material-symbols-outlined{margin-top:1px;color:var(--c-accent);font-size:19px}
.board-editability strong,.board-editability small{display:block}
.board-editability strong{color:var(--c-ink);font-size:13px}
.board-editability small{margin-top:2px;color:var(--c-muted);font-size:11px;font-weight:400}
.board-editability-switch{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer}
.board-editability-switch input{position:absolute;opacity:0;pointer-events:none}
.board-editability-switch>span[aria-hidden]{position:relative;width:38px;height:22px;border-radius:999px;background:#b8c0cc;transition:background .15s ease}
.board-editability-switch>span[aria-hidden]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / 22%);transition:transform .15s ease}
.board-editability-switch input:checked+span{background:var(--c-accent)}
.board-editability-switch input:checked+span::after{transform:translateX(16px)}
.board-editability-switch input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--c-accent) 24%,transparent);outline-offset:2px}
.board-locked-note{display:flex;align-items:flex-start;gap:10px;padding:14px 15px;border:1px solid var(--c-line);border-radius:8px;color:var(--c-muted)}
.board-locked-note>.material-symbols-outlined{font-size:19px}
.board-locked-note strong{display:block;color:var(--c-ink);font-size:13px}
.board-locked-note p{margin:3px 0 0;font-size:12px}
.board-is-locked .dash-title-in,.board-is-locked .dash-sub-in{cursor:default}
/* Global filter bar */
/* ---- Filter bar trigger + slide-out panel (Fluent-ish, square) ---- */
.board-filterbar{display:flex;align-items:flex-end;gap:0;row-gap:10px;flex-wrap:wrap;margin-bottom:16px}
/* ===== Filter groups: the bar/shelf reads who → when → what → chips. =====
Groups are hairline-separated clusters sharing one control anatomy: an
11px uppercase label row over a 34px control row, baselines aligned. */
.bfg{display:flex;align-items:flex-start;gap:14px;padding:0 16px;border-left:1px solid var(--c-line,#dfe3e9);min-width:0;flex:0 0 auto}
.board-filterbar .bfg:first-child,.board-filter-shelf-controls .bfg:first-child{padding-left:0;border-left:0}
.bfg .fctl{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0}
.bfg .fdate-input{width:9.5em}
.bfg .frange-input{width:8.5em}
.bfg .fctl-head{min-height:18px;display:flex;align-items:center;justify-content:flex-start;gap:6px;text-align:left}
.bfg .fctl-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink2,#5b6472)}
/* Every control is exactly label row (18px) + control row (34px); the Filters
button and the chips have no label, so they offset onto the control row. */
.bfg .fdate-input,.bfg .fdate-latest,.bfg .fcombo-btn,.bfg .fgrp-btn,.bfg-btn .fbtn{min-height:34px}
.bfg-btn{align-self:flex-start;padding-top:23px}
.bfg .frange-btn{white-space:nowrap}
.frange-pop{min-width:290px;padding:12px;display:grid;gap:12px}
.frange-pop .frange-pair{display:flex;align-items:center;gap:6px}
.frange-pop .frange-input{min-height:32px;flex:1 1 auto}
.frange-foot{display:flex;justify-content:flex-end}
.frange-reset{border:1px solid var(--c-line,#dfe3e9);background:transparent;border-radius:6px;
padding:5px 12px;font:inherit;font-size:12px;font-weight:600;color:var(--c-ink2,#5b6472);cursor:pointer}
.frange-reset:hover{color:var(--c-ink,#1d2433);border-color:var(--c-ink2,#5b6472)}
.board-filterbar .fchips{margin-left:auto;align-self:flex-start;margin-top:23px;min-height:34px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
@media (max-width:760px){
.bfg{padding:0 10px;gap:10px}
.board-filterbar .fchips{margin-left:0;margin-top:0;flex-basis:100%}
}
/* PERMANENT left section sidebar on in-depth boards (built in pluvoir.js from the
board's section tiles). Squared full-height rail flush to the left edge; the
board content is shifted beside it via body.has-siderail. The old top section
strip is retired. --railw is the single source of truth for the offset. */
:root{ --railw:230px; }
.board-siderail{position:fixed;left:0;top:var(--pub-head-h,62px);bottom:48px;z-index:34;width:var(--railw);
display:flex;flex-direction:column;gap:1px;padding:20px 12px 16px;overflow-y:auto;
background:var(--c-panel);border-right:1px solid var(--c-line)}
.siderail-head{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--c-faint,#9aa1ad);padding:0 12px 10px}
.siderail-link{position:relative;font:inherit;font-size:12.5px;font-weight:600;color:var(--c-ink2,#3a3f4a);text-decoration:none;
padding:9px 13px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .12s,background .12s}
.siderail-link:hover{color:var(--brand-primary,#2f64d6);background:var(--c-canvas)}
.siderail-link.is-active{color:var(--brand-primary,#2f64d6);font-weight:700;
background:color-mix(in srgb, var(--brand-primary,#2f64d6) 9%, transparent)}
.siderail-link.is-active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
border-radius:0 2px 2px 0;background:var(--brand-primary,#2f64d6)}
.siderail-sep{height:1px;background:var(--c-line);margin:12px 8px 12px}
.siderail-filters{display:flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;
background:var(--brand-primary,#2f64d6);color:#fff;border:none;border-radius:6px;padding:11px 12px;
font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.siderail-filters:hover{filter:brightness(1.07)}
.siderail-filters .pft-n{background:#fff;color:var(--brand-primary,#2f64d6);border-radius:9px;min-width:17px;height:17px;
display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:0 4px;letter-spacing:0}
/* shift the board content beside the permanent rail (header stays full-width) */
body.pub.has-siderail .pub-wrap{margin-left:var(--railw)}
body.pub.has-siderail .board-subnav{display:none}
@media(max-width:760px){
.board-siderail{display:none!important}
body.pub.has-siderail .pub-wrap{margin-left:0}
}
.fbtn{display:inline-flex;align-items:center;gap:8px;background:var(--c-panel);border:1px solid var(--c-line);border-radius:6px;
padding:9px 15px;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink2);
cursor:pointer;box-shadow:0 1px 2px rgba(20,25,40,.04);transition:border-color .12s,color .12s}
.fbtn:hover{border-color:var(--brand-primary,#2f64d6);color:var(--brand-primary,#2f64d6)}
.fbtn:hover svg{color:var(--brand-primary,#2f64d6)}
.fbtn svg{color:var(--c-muted);transition:color .12s}
.fbtn-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
background:var(--brand-primary,#2f64d6);color:#fff;font-size:11px;font-weight:700;letter-spacing:0}
.fbar-sep{width:1px;align-self:stretch;background:var(--c-line);margin:2px 0}
.fchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fchip{display:inline-flex;align-items:center;gap:8px;background:var(--c-panel);border:1px solid var(--c-line);border-radius:6px;
padding:5px 6px 5px 11px;box-shadow:0 1px 2px rgba(20,25,40,.03)}
.fchip-k{color:var(--c-muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:10px}
.fchip-v{color:var(--c-ink);font-weight:600;font-size:12.5px;line-height:1}
.fchip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;border-radius:4px;
background:none;color:var(--c-faint);cursor:pointer;padding:0;transition:background .12s,color .12s}
.fchip-x:hover{background:var(--c-line2);color:var(--brand-primary,#2f64d6)}
.fchip-clear{font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);
background:none;border:none;cursor:pointer;padding:4px 6px;transition:color .12s}
.fchip-clear:hover{color:var(--brand-primary,#2f64d6)}
.fpanel-scrim{position:fixed;inset:0;z-index:90;background:rgba(20,25,40,.28)}
.fpanel{position:fixed;top:0;right:0;bottom:0;z-index:91;width:340px;max-width:88vw;background:#fff;
border-left:1px solid var(--c-line);box-shadow:-12px 0 36px rgba(20,25,40,.16);display:flex;flex-direction:column;
animation:fpanel-in .16s ease-out}
@keyframes fpanel-in{from{transform:translateX(14px);opacity:.6}to{transform:none;opacity:1}}
.fpanel-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--c-line)}
.fpanel-title{font-size:15px;font-weight:700;color:var(--c-ink)}
.fpanel-x{border:none;background:none;font-size:15px;color:var(--c-muted);cursor:pointer;width:28px;height:28px;border-radius:2px}
.fpanel-x:hover{background:var(--c-line2);color:var(--c-ink)}
.fpanel-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.fpanel-foot{border-top:1px solid var(--c-line);padding:12px 16px}
.fctl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.fctl-label{font-size:12px;font-weight:600;color:var(--c-ink)}
/* Board "As of" date cursor (kind:"date" global) — date input + Latest reset. */
.fdate{display:flex;align-items:stretch;gap:6px}
.fdate-input{flex:1 1 auto;min-width:0;background:#fff;border:1px solid #c6ccd6;border-radius:2px;
padding:8px 10px;font:inherit;font-size:13.5px;color:var(--c-ink);cursor:pointer}
.fdate-input:focus{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:-1px}
.fdate-latest{flex:0 0 auto;background:#fff;border:1px solid #c6ccd6;border-radius:2px;padding:0 10px;
font:inherit;font-size:12.5px;font-weight:600;color:var(--c-mute,#5b6472);cursor:pointer}
.fdate-latest:hover{border-color:var(--brand-primary,#2f64d6);color:var(--brand-primary,#2f64d6)}
.fctl-date.is-set .fdate-input{border-color:var(--brand-primary,#2f64d6);font-weight:600}
/* Board date window (kind:"date_range") — from/to calendars plus an optional
hand-rolled dual-thumb slider (two overlaid range inputs over one track). */
.frange{display:flex;flex-direction:column;gap:8px}
.frange-pair{display:flex;align-items:center;gap:6px}
.frange-input{flex:1 1 0;min-width:0;background:#fff;border:1px solid #c6ccd6;border-radius:2px;
padding:8px 10px;font:inherit;font-size:13px;color:var(--c-ink);cursor:pointer}
.frange-input:focus{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:-1px}
.frange-sep{flex:0 0 auto;color:var(--c-mute,#5b6472);font-size:12px}
.frange-reset{align-self:flex-start;background:#fff;border:1px solid #c6ccd6;border-radius:2px;padding:4px 10px;
font:inherit;font-size:12.5px;font-weight:600;color:var(--c-mute,#5b6472);cursor:pointer}
.frange-reset:hover{border-color:var(--brand-primary,#2f64d6);color:var(--brand-primary,#2f64d6)}
.frange-slider{position:relative;height:26px;margin:0 2px}
.frange-track{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:999px;background:#dfe3ea}
.frange-fill{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--brand-primary,#2f64d6)}
.frange-thumb{position:absolute;left:0;top:0;width:100%;height:26px;margin:0;background:none;
pointer-events:none;-webkit-appearance:none;appearance:none}
.frange-thumb:focus{outline:none}
.frange-thumb::-webkit-slider-runnable-track{height:26px;background:none}
.frange-thumb::-moz-range-track{height:26px;background:none}
.frange-thumb::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:15px;height:15px;
margin-top:5px;border-radius:50%;background:#fff;border:2px solid var(--brand-primary,#2f64d6);cursor:pointer;
box-shadow:0 1px 3px rgba(15,20,30,.28)}
.frange-thumb::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;background:#fff;
border:2px solid var(--brand-primary,#2f64d6);cursor:pointer;box-shadow:0 1px 3px rgba(15,20,30,.28)}
.frange-thumb:focus-visible::-webkit-slider-thumb{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:2px}
.frange-thumb:focus-visible::-moz-range-thumb{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:2px}
.frange-read{font-size:12px;color:var(--c-mute,#5b6472);font-variant-numeric:tabular-nums}
.fctl-range.is-set .frange-input{border-color:var(--brand-primary,#2f64d6);font-weight:600}
/* The same window authored on a card: it renders as one section of that card's
own filter menu, so it needs no trigger of its own — the menu is already open.
The resolved window reads out beside the label, where the bar's version shows
it on the button face. */
.fctl-range-card{display:flex;flex-direction:column;gap:7px}
.fctl-range-card .fctl-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fctl-read{font-size:11.5px;color:var(--c-mute,#5b6472);font-variant-numeric:tabular-nums;text-align:right}
.fctl-rm{border:none;background:none;color:var(--c-faint);cursor:pointer;font-size:12px;width:20px;height:20px;border-radius:2px}
/* ---- fused "Groups" filter (race + program popover) ---- */
.fgrp-btn{width:100%;display:flex;align-items:center;background:#fff;border:1px solid #c6ccd6;border-radius:999px;
padding:8px 14px;font:inherit;font-size:13px;font-weight:500;color:var(--c-ink);cursor:pointer;text-align:left;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgrp-btn:hover{border-color:#9aa3b2}
.fctl-groups.is-set .fgrp-btn{border-color:var(--c-accent);background:var(--c-accent-bg,#eaf3fb);font-weight:600}
.fgrp-overlay{position:fixed;inset:0;z-index:92;background:rgba(23,28,36,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.fgrp-dialog{background:#fff;border-radius:10px;box-shadow:0 18px 50px rgba(15,20,30,.28);width:min(440px,94vw);
max-height:86vh;overflow:auto;padding:16px 18px 14px}
.fgrp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.fgrp-title{font-size:14.5px;font-weight:700;color:var(--c-ink)}
.fgrp-x{border:none;background:none;color:var(--c-mute,#5b6472);cursor:pointer;width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center}
.fgrp-x:hover{background:#eef1f5;color:var(--c-ink)}
.fgrp-sub{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-mute,#5b6472);margin:12px 0 7px}
.fgrp-grid{display:flex;flex-wrap:wrap;gap:7px}
.fgrp-chk{border:1px solid #c6ccd6;background:#fff;border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;
font-weight:500;color:var(--c-ink);cursor:pointer;transition:background .1s,border-color .1s}
.fgrp-chk:hover{border-color:#9aa3b2}
.fgrp-chk.on{background:#CDEBF9;border-color:#8fc7e8;font-weight:600}
.fgrp-empty{font-size:12.5px;color:var(--c-mute,#5b6472);padding:4px 2px}
.fgrp-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.fgrp-reset,.fgrp-apply{border-radius:999px;padding:8px 18px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fgrp-reset{border:1px solid #c6ccd6;background:#fff;color:var(--c-ink)}
.fgrp-reset:hover{border-color:#9aa3b2}
.fgrp-apply{border:none;background:var(--brand-primary,#2f64d6);color:#fff}
.fgrp-apply:hover{filter:brightness(1.07)}
.fctl-rm:hover{background:#fdeceb;color:#c0392b}
.fcombo{position:relative}
.fcombo-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
background:#fff;border:1px solid #c6ccd6;border-radius:2px;padding:9px 11px;font:inherit;font-size:13.5px;color:var(--c-ink);cursor:pointer;text-align:left}
.fcombo-btn:hover{border-color:#9aa3b2}
.fctl.open .fcombo-btn,.fcombo-btn:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-bg)}
.fctl.is-set .fcombo-btn{border-color:var(--c-accent)}
.fcombo-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.fctl.is-set .fcombo-val{font-weight:600}
.fcombo-chev{color:var(--c-muted);flex:0 0 auto}
.fcombo-pop{position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:5;background:#fff;border:1px solid var(--c-line);
border-radius:2px;box-shadow:0 8px 24px rgba(20,25,40,.18);overflow:hidden}
.fcombo-search-wrap{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--c-line2);color:var(--c-faint)}
.fcombo-search{flex:1;border:none;background:none;font:inherit;font-size:13px;color:var(--c-ink)}
.fcombo-search:focus{outline:none}
.fcombo-search:disabled{cursor:wait;color:var(--c-faint)}
.fcombo-list{max-height:240px;overflow-y:auto;padding:4px}
.fcombo-opt{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;color:var(--c-ink);
padding:7px 9px;border-radius:2px;cursor:pointer;overflow-wrap:break-word;word-break:break-word}
.fcombo-opt:hover{background:var(--c-accent-bg)}
.fcombo-opt.sel{background:var(--c-accent-bg);color:var(--c-accent);font-weight:600}
.fcombo-check{width:14px;height:14px;flex:0 0 auto;border:1.5px solid #c6ccd6;border-radius:3px;position:relative;background:#fff}
.fcombo-check.on{background:var(--c-accent);border-color:var(--c-accent)}
.fcombo-check.on::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fcombo-empty{padding:10px;font-size:12.5px;color:var(--c-faint);text-align:center}
.fcombo-loading,.fcombo-error{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;font-size:12.5px;color:var(--c-muted);text-align:center}
.fcombo-spinner{width:14px;height:14px;flex:0 0 auto;border:2px solid var(--c-line);border-top-color:var(--c-accent);border-radius:50%;animation:fcombo-spin .7s linear infinite}
.fcombo-error{flex-direction:column;color:var(--c-muted)}
.fcombo-retry{border:1px solid var(--c-line);background:#fff;border-radius:3px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;color:var(--c-accent);cursor:pointer}
.fcombo-retry:hover{background:var(--c-accent-bg);border-color:var(--c-accent)}
@keyframes fcombo-spin{to{transform:rotate(360deg)}}
.fbtn-add{width:100%;justify-content:center;border-style:dashed;color:var(--c-accent)}
.fpanel-foot .bf-add{position:relative}
.fpanel-foot .bf-pop{position:absolute;bottom:calc(100% + 8px);top:auto;left:0;right:0;width:auto}
.board-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bf{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--c-line);border-radius:3px;padding:3px 4px 3px 10px}
.bf-label{font-size:11px;font-weight:600;color:var(--c-muted);letter-spacing:.01em}
.bf-select{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--c-ink);cursor:pointer;max-width:200px}
.bf-select:focus{outline:none}
.bf-x{border:none;background:none;color:var(--c-faint);cursor:pointer;font-size:13px;width:18px;height:18px;border-radius:3px;line-height:1}
.bf-x:hover{background:#fdeceb;color:#c0392b}
.bf-add{position:relative}
.bf-add-btn{display:inline-flex;align-items:center;gap:5px;border:1px dashed #c8cfdb;background:none;color:var(--c-accent);font-family:inherit;font-size:12px;font-weight:600;padding:5px 10px;border-radius:3px;cursor:pointer}
.bf-add-btn:hover{background:var(--c-accent-bg);border-color:var(--c-accent)}
.bf-add-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);padding:2px 2px 8px}
/* Add-filter popover (field + optional lookup join) */
.bf-pop{position:absolute;top:100%;left:0;margin-top:5px;z-index:30;background:#fff;border:1px solid var(--c-line);border-radius:5px;box-shadow:0 10px 30px rgba(20,25,40,.18);width:280px;padding:11px 12px}
.bf-frow{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11.5px;color:var(--c-muted)}
.bf-frow>span{flex:0 0 58px;font-weight:600}
.bf-frow select,.bf-frow input{flex:1;min-width:0;font:inherit;font-size:12px;padding:5px 6px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink)}
.bf-fcheck{display:flex;align-items:flex-start;gap:7px;margin:9px 0 4px;font-size:11.5px;color:var(--c-ink);cursor:pointer;line-height:1.35}
.bf-fcheck input{accent-color:var(--c-accent);margin-top:1px}
.bf-lookup{border-left:2px solid var(--c-accent-bg);padding-left:9px;margin:6px 0 2px}
.bf-lk-hint{font-size:10px;color:var(--c-faint);line-height:1.4;margin-top:2px}
.bf-pop-actions{margin-top:10px;display:flex;justify-content:flex-end}
.bf-pop-add{padding:6px 14px;font-size:12px}
.board-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:38px;gap:12px}
/* Let tiles SHRINK below their content: a grid item's implicit min-height is
its content height, so a tall chart canvas would otherwise prop the tile
open — dragging a tile shorter did nothing (the resize observer never fired
because the box never actually shrank). With min-height:0 the row-span wins,
the observer fires, and the chart refits down a debounce later. */
.board-grid .tile{min-height:0}
.board-grid .tile-body{min-height:0}
.tile{background:var(--c-panel);border:1px solid var(--c-line);border-top:3px solid var(--tile-accent,var(--pv-head-accent));border-radius:10px;display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;box-shadow:0 1px 2px rgba(20,25,40,.04)}
.board-grid .tile:not(.tile-text){overflow:visible}
.board-grid .tile:not(.tile-text):hover,
.board-grid .tile:not(.tile-text):focus-within{z-index:35}
.tile.is-dragging,.tile.is-resizing{z-index:40;box-shadow:0 10px 28px rgba(20,25,40,.18);outline:1px solid var(--c-accent)}
/* Global-filter drift (snapshot page): when a board global changes, the tiles
it cannot reach sit back for a beat so the viewer's eye lands on the cards
that actually moved. Applied and removed by pubPulseUnaffected. */
[data-pub-tile]{transition:opacity .45s ease}
[data-pub-tile].pv-gf-quiet{opacity:.55}
.tile.is-dragging{opacity:.94;cursor:grabbing;will-change:transform}
/* dashed drop-target that snaps cell-by-cell while the tile floats free */
.tile-ghost{border:1.5px dashed var(--c-accent);border-radius:10px;background:color-mix(in srgb, var(--c-accent) 7%, transparent);pointer-events:none;z-index:5}
/* live "cols × rows" readout while resizing */
.tile-size-badge{position:absolute;right:10px;bottom:10px;background:var(--c-ink,#21252b);color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;z-index:41;pointer-events:none;font-variant-numeric:tabular-nums}
.st-color{width:40px;height:24px;padding:0;border:1px solid var(--c-line);border-radius:3px;background:none;cursor:pointer}
.tile-head{flex:0 0 auto;height:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 14px 10px;border-bottom:1px solid var(--c-line2);user-select:none}
.tile-head[data-tile-move]{cursor:move}
/* Drag handles own the gesture — stop the browser turning a touch-drag into a
scroll, which would fire pointercancel mid-drag. */
[data-tile-move],[data-tile-resize]{touch-action:none}
.tile-titles{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
/* Per-card interactive filter (public board): button in the header + popover */
.tile-cf-btn{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:none;background:none;cursor:pointer;
color:var(--c-ink2);opacity:.85;padding:4px 6px;border-radius:5px}
.tile-cf-btn:hover,.tile-cf-btn.active{opacity:1;background:rgba(128,132,140,.16)}
.tile-cf-label{font-size:11px;font-weight:700;line-height:1}
.tile.hdr-gradient .tile-cf-btn,.tile.hdr-solid .tile-cf-btn{color:#fff}
.tile.hdr-gradient .tile-cf-btn:hover,.tile.hdr-solid .tile-cf-btn:hover,
.tile.hdr-gradient .tile-cf-btn.active,.tile.hdr-solid .tile-cf-btn.active{background:rgba(255,255,255,.2)}
.tile-cf-n{font-size:10px;font-weight:700;background:#fff;color:var(--tile-accent,var(--pv-head-accent));border-radius:9px;padding:0 5px;min-width:14px;text-align:center;line-height:15px}
/* portaled to (absolute) so it escapes the tile's overflow AND scrolls with the page */
.tile-cf-pop{position:absolute;z-index:92;width:236px;background:#fff;border:1px solid var(--c-line);border-radius:8px;box-shadow:0 14px 38px rgba(20,25,40,.2);padding:14px;cursor:default}
.tile-cf-scrim{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.34);backdrop-filter:blur(1px)}
.tile-cf-pop[data-cf-dialog]{
position:fixed;z-index:92;top:0;right:0;bottom:0;left:auto;transform:none;
width:min(420px,calc(100vw - 24px));height:100dvh;max-height:none;overflow:auto;
border-width:0 0 0 1px;border-radius:0;padding:24px 20px;
box-shadow:-18px 0 54px rgba(15,23,42,.24);animation:tile-cf-drawer-in .18s ease-out
}
body.tile-cf-open{overflow:hidden}
@keyframes tile-cf-drawer-in{from{transform:translateX(24px);opacity:.7}to{transform:translateX(0);opacity:1}}
@media(max-width:560px){.tile-cf-pop[data-cf-dialog]{width:100vw;padding:20px 16px}}
.tile-cf-h{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted);margin-bottom:10px}
.tile-cf-pop .fctl{margin-bottom:10px}
.tile-cf-pop[data-cf-dialog] .fctl{margin-bottom:14px}
.tile-cf-pop[data-cf-dialog] .fcombo-pop{position:static;width:100%;margin-top:6px;max-height:260px;overflow:hidden;
border:1px solid var(--c-line);border-radius:6px;box-shadow:0 8px 22px rgba(20,25,40,.10)}
.tile-cf-pop[data-cf-dialog] .fcombo-list{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:4px}
.tile-cf-pop[data-cf-dialog] .fcombo-opt{width:100%;min-height:34px;border:0;border-radius:4px;padding:7px 9px;justify-content:flex-start}
.tile-cf-foot{margin-top:2px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tile-cf-clear{font:inherit;font-size:11px;font-weight:600;color:var(--c-muted);background:none;border:none;cursor:pointer;padding:2px 0}
.tile-cf-clear:hover{color:var(--brand-primary,#2f64d6)}
.tile-cf-apply{border:0;border-radius:999px;background:var(--brand-primary,#2f64d6);color:#fff;font:inherit;font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer}
.tile-cf-apply:hover{filter:brightness(.96)}
.tile-title{max-width:100%;font-size:14px;font-weight:600;color:var(--c-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-sub{display:block;width:100%;font-size:11px;color:var(--c-muted);line-height:1.35;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* View controls (spec.metric_modes / spec.controls) — in the card's filter
popover, or inline on the card face when options.controls_inline is set */
.tile-cf-pop .cf-mode-sel{width:100%;font:inherit;font-size:12px;font-weight:600;color:var(--c-ink);
padding:7px 9px;border:1px solid var(--c-line);border-radius:4px;background:#fff;cursor:pointer}
.tile-cf-pop .cf-mode-sel:focus{outline:none;border-color:var(--brand-primary,#2f64d6)}
.ctl-fcombo .fcombo-pop{top:calc(100% + 4px);left:0;right:0;z-index:4}
.ctl-fcombo .fcombo-opt{align-items:center;justify-content:space-between}
.ctl-fcombo-check{visibility:hidden;flex:0 0 auto;color:var(--brand-primary,#2f64d6)}
.ctl-fcombo .fcombo-opt.sel .ctl-fcombo-check{visibility:visible}
.tile-ctlrow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:7px 14px;
border-bottom:1px solid var(--c-line2);background:color-mix(in srgb, var(--c-panel) 55%, #f4f5f7)}
.tile-ctl{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--c-muted)}
.tile-ctl-l{font-weight:600;letter-spacing:.02em}
.tile-ctl-sel{font:inherit;font-size:11.5px;font-weight:600;color:var(--c-ink);background:#fff;
border:1px solid var(--c-line);border-radius:4px;padding:3px 6px;cursor:pointer;max-width:200px}
.tile-ctl-sel:focus{outline:none;border-color:var(--brand-primary,#2f64d6)}
.tile-controls-compact .tile-head-controls .tile-ctl{gap:0}
.tile-controls-compact .tile-head-controls .tile-ctl-l{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.tile-controls-compact .tile-head-controls .tile-ctl-sel{
max-width:108px;border-radius:999px;padding:4px 22px 4px 9px;font-size:11px
}
.tile-ctl-menu{
position:relative;display:inline-flex;align-items:center;height:28px;color:var(--c-ink2)
}
.tile-head-controls{display:flex;align-items:center;gap:4px;flex:0 0 auto;align-self:flex-start}
.tile-head-controls + .tile-cf-btn{margin-left:0}
.tile-ctl-menu-trigger{
appearance:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:4px 6px;border:0;border-radius:5px;
background:none;color:inherit;opacity:.85;font:inherit;cursor:pointer;box-sizing:border-box;transition:background .12s,opacity .12s
}
.tile-ctl-menu-trigger:hover,.tile-ctl-menu-trigger[aria-expanded="true"]{background:rgba(128,132,140,.16);opacity:1}
.tile-ctl-menu-text{font-size:11px;font-weight:700;letter-spacing:.025em;color:currentColor}
.tile-ctl-menu-icon,.tile-ctl-menu-chev{flex:0 0 auto;color:currentColor;pointer-events:none}
.tile-ctl-menu-chev{opacity:.7}
.tile.hdr-gradient .tile-ctl-menu,.tile.hdr-solid .tile-ctl-menu{color:#fff}
.tile.hdr-gradient .tile-ctl-menu-trigger:hover,.tile.hdr-solid .tile-ctl-menu-trigger:hover,
.tile.hdr-gradient .tile-ctl-menu-trigger[aria-expanded="true"],.tile.hdr-solid .tile-ctl-menu-trigger[aria-expanded="true"]{
background:rgba(255,255,255,.2)
}
.tile-ctl-menu-pop{
position:fixed;z-index:65;width:196px;padding:5px;background:#fff;border:1px solid var(--c-line,#d7dbe3);
border-radius:6px;box-shadow:0 12px 30px rgba(20,25,40,.18)
}
.tile-ctl-menu-pop[hidden]{display:none}
.tile-ctl-menu-opt{
appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 9px;
border:0;border-radius:3px;background:transparent;color:var(--c-ink2,#3a3f4a);font:inherit;font-size:12px;font-weight:500;
text-align:left;cursor:pointer
}
.tile-ctl-menu-opt:hover{background:var(--c-line2,#f0f2f5);color:var(--c-ink,#1a1d24)}
.tile-ctl-menu-opt svg{visibility:hidden;color:var(--brand-primary,#2f64d6);flex:0 0 auto}
.tile-ctl-menu-opt.on{background:var(--c-accent-bg,#eef3ff);color:var(--brand-primary,#2f64d6);font-weight:650}
.tile-ctl-menu-opt.on svg{visibility:visible}
.tile-head > .tile-cf-btn{height:28px;box-sizing:border-box;align-self:flex-start}
.tile-ctl-seg{gap:8px}
/* MD3 segmented control (matches the prototypes' .seg): joined buttons inside a
full-round outline, hairline dividers, active = secondary container. */
.tile-seg{display:inline-flex;align-items:stretch;border:1px solid #a9adb5;border-radius:999px;overflow:hidden;background:#fff}
.tile-seg button{
appearance:none;border:0;background:transparent;color:var(--c-muted);font:inherit;font-size:12px;font-weight:500;
padding:6px 13px;line-height:1;cursor:pointer;border-right:1px solid #dfe3ea;transition:background .12s,color .12s
}
.tile-seg button:last-child{border-right:0}
.tile-seg button:hover{background:#f2f5f9;color:var(--c-ink)}
.tile-seg button.on{background:#CDEBF9;color:#123249;font-weight:600}
/* CR: card title → in-depth board (options.detail_target). Title becomes a
link with a subtle "open" glyph; color cascades from the tile accent. */
.tile-title-link{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;cursor:pointer;max-width:100%}
.tile-title-link .tile-title-go{flex:0 0 auto;color:var(--c-faint);opacity:.7;transition:color .12s,opacity .12s,transform .12s}
.tile-title-link:hover{color:var(--tile-accent,var(--pv-head-accent))}
.tile-title-link:hover .tile-title-go{color:var(--tile-accent,var(--pv-head-accent));opacity:1;transform:translate(1px,-1px)}
.tile.hdr-gradient .tile-title-link:hover,.tile.hdr-solid .tile-title-link:hover{color:#fff}
.tile.hdr-gradient .tile-title-link .tile-title-go,.tile.hdr-solid .tile-title-link .tile-title-go{color:rgba(255,255,255,.8)}
/* CR: "?" help icon + definitions popover (portaled to ). */
.tile-help-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
border:none;background:none;cursor:pointer;color:var(--c-ink2);opacity:.75;padding:0;border-radius:5px;transition:opacity .12s,background .12s}
.tile-help-btn:hover,.tile-help-btn.active{opacity:1;background:rgba(128,132,140,.16)}
.tile.hdr-gradient .tile-help-btn,.tile.hdr-solid .tile-help-btn{color:#fff}
.tile.hdr-gradient .tile-help-btn:hover,.tile.hdr-solid .tile-help-btn:hover,
.tile.hdr-gradient .tile-help-btn.active,.tile.hdr-solid .tile-help-btn.active{background:rgba(255,255,255,.2)}
.tile-help-pop{position:absolute;z-index:62;width:270px;background:#fff;border:1px solid var(--c-line);border-radius:8px;
box-shadow:0 14px 38px rgba(20,25,40,.2);padding:13px 14px;cursor:default;
border-top:3px solid var(--tile-accent,var(--pv-head-accent))}
.tile-help-text{margin:0;font-size:12.5px;line-height:1.5;color:var(--c-ink2)}
.tile-help-defs{margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--c-line2);display:grid;gap:7px}
.tile-help-defs dt{font-size:11.5px;font-weight:700;color:var(--c-ink)}
.tile-help-defs dd{margin:1px 0 0;font-size:11.5px;line-height:1.45;color:var(--c-muted)}
/* Admin chart inspector — the icon is intentionally quiet in a card header;
the dialog favors readable lineage and SQL over dashboard decoration. */
.tile-query-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
border:0;background:none;color:var(--c-ink2);opacity:.72;padding:0;border-radius:5px;cursor:pointer;transition:opacity .12s,background .12s}
.tile-query-btn:hover,.tile-query-btn:focus-visible{opacity:1;background:rgba(128,132,140,.16);outline:none}
.tile.hdr-gradient .tile-query-btn,.tile.hdr-solid .tile-query-btn{color:#fff}
.tile.hdr-gradient .tile-query-btn:hover,.tile.hdr-solid .tile-query-btn:hover,
.tile.hdr-gradient .tile-query-btn:focus-visible,.tile.hdr-solid .tile-query-btn:focus-visible{background:rgba(255,255,255,.2)}
body.query-inspector-open{overflow:hidden}
.query-inspector-backdrop{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:24px;
background:rgba(12,20,30,.56);backdrop-filter:blur(2px)}
.query-inspector-backdrop[hidden]{display:none}
.query-inspector{width:min(1040px,100%);max-height:min(90vh,900px);display:flex;flex-direction:column;overflow:hidden;
background:#fff;border:1px solid #dbe1e8;border-radius:10px;box-shadow:0 28px 80px rgba(9,17,28,.34)}
.query-inspector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 17px;border-bottom:1px solid #e7ebf0}
.query-inspector-head p{margin:0 0 4px;font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:#778293}
.query-inspector-head h2{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.015em;color:#17202b}
.query-inspector-close{width:34px;height:34px;border:1px solid #dde3ea;border-radius:6px;background:#f7f8fa;color:#263342;
font:400 24px/1 var(--ui);cursor:pointer}
.query-inspector-close:hover{background:#eef1f5}
.query-inspector-body{padding:20px 22px 24px;overflow:auto;color:#1c2734}
.query-inspector-loading,.query-inspector-error{padding:36px 4px;color:#687486;font-size:13px}
.query-inspector-error{color:#a63b32}
.query-inspector-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.query-inspector-fact{min-width:0;padding:11px 12px;border:1px solid #e2e7ed;border-radius:6px;background:#fafbfc}
.query-inspector-fact span{display:block;margin-bottom:4px;font-size:9.5px;font-weight:750;letter-spacing:.075em;text-transform:uppercase;color:#7d8796}
.query-inspector-fact strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:#202b38;white-space:nowrap}
.query-inspector-section{margin-top:18px}
.query-inspector-section>h3{margin:0 0 9px;font-size:12px;font-weight:750;color:#263241}
.query-inspector-chips{display:flex;flex-wrap:wrap;gap:6px}
.query-inspector-chip{display:inline-flex;gap:6px;align-items:baseline;padding:5px 8px;border:1px solid #dde3ea;border-radius:4px;
background:#f7f9fb;font-size:11px;color:#596678}
.query-inspector-chip b{color:#202b38;font-weight:650}
.query-inspector-query{margin-top:10px;border:1px solid #dfe5eb;border-radius:7px;overflow:hidden;background:#fff}
.query-inspector-query summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
cursor:pointer;list-style:none;background:#f8fafb}
.query-inspector-query summary::-webkit-details-marker{display:none}
.query-inspector-query-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.query-inspector-query-title strong{font-size:12px;color:#202b38}
.query-inspector-query-title small{font-size:10.5px;color:#7a8594;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.query-inspector-path{flex:0 0 auto;padding:3px 6px;border-radius:3px;background:#e8f2ed;color:#2c684b;font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.query-inspector-path.is-warehouse{background:#eaf0fa;color:#355f93}
.query-inspector-code-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 0}
.query-inspector-code-head span{font-size:10px;font-weight:700;color:#6f7a89;text-transform:uppercase;letter-spacing:.06em}
.query-inspector-copy{border:0;background:none;color:#315f91;font:600 11px var(--ui);cursor:pointer;padding:3px}
.query-inspector-copy:hover{text-decoration:underline}
.query-inspector-query pre,.query-inspector-json{margin:8px 12px 12px;padding:13px 14px;max-height:360px;overflow:auto;border-radius:5px;
background:#111a24;color:#dce6f0;font:11.5px/1.55 var(--mono);white-space:pre;tab-size:2}
.query-inspector-mirror{margin:0 12px 12px}
.query-inspector-mirror summary{display:block;padding:0;background:none;color:#657284;font-size:11px;font-weight:650}
.query-inspector-mirror pre{margin:8px 0 0}
.query-inspector-spec{border:1px solid #dfe5eb;border-radius:7px;overflow:hidden}
.query-inspector-spec>summary{padding:10px 12px;cursor:pointer;background:#f8fafb;font-size:12px;font-weight:700;color:#263241}
.query-inspector-json{margin:0;border-radius:0;max-height:420px}
@media(max-width:700px){
.query-inspector-backdrop{padding:0;align-items:stretch}
.query-inspector{max-height:100dvh;border:0;border-radius:0}
.query-inspector-head{padding:16px}.query-inspector-body{padding:16px}
.query-inspector-summary{grid-template-columns:1fr}
}
/* CR: section subnav (jump-nav) on in-depth boards — sticky strip under the
filter shelf, scroll-spy highlight. Colors cascade from the brand. */
.board-subnav{position:static;
margin:-4px -22px 18px;padding:0 14px;background:var(--c-canvas);
border-bottom:1px solid var(--c-line);box-shadow:0 1px 3px rgba(20,25,40,.04)}
.subnav-track{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:1280px;margin:0 auto}
.subnav-track::-webkit-scrollbar{display:none}
.subnav-link{flex:0 0 auto;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--c-muted);text-decoration:none;padding:13px 14px;white-space:nowrap;
border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.subnav-link:hover{color:var(--brand-primary,#2f64d6)}
.subnav-link.is-active{color:var(--brand-primary,#2f64d6);border-bottom-color:var(--brand-primary,#2f64d6)}
@media(max-width:760px){
.board-subnav{position:static;margin:0 -16px 14px;top:auto}
}
/* Heatmap (risk matrix) */
.pc-hm{display:grid;gap:3px;flex:1;align-content:stretch;min-height:0}
.pc-hm-corner{}
.pc-hm-ch{font-size:9.5px;font-weight:700;color:var(--c-muted);text-align:center;align-self:end;padding-bottom:3px;
letter-spacing:.03em;text-transform:uppercase;line-height:1.2;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pc-hm-rh{font-size:11px;font-weight:600;color:var(--c-muted);display:flex;align-items:center;justify-content:flex-end;
padding-right:8px;white-space:nowrap}
.pc-hm-cell{border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;
font-size:12.5px;font-weight:700;color:#501313;min-height:42px;cursor:default;line-height:1.1}
.pc-hm-cell.pc-hm-dark{color:#fff}
.pc-hm-cell.pc-hm-dark .pc-hm-n{color:rgba(255,255,255,.8)}
.pc-hm-n{font-size:9px;font-weight:600;color:rgba(80,19,19,.65);margin-top:1px}
.pc-hm-nil,.pc-hm-sup{background:#f1f2f4;color:var(--c-faint);font-weight:600}
.pc-hm-sup .pc-hm-n{color:var(--c-faint)}
.pc-hm-leg{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--c-muted);margin-top:8px}
.pc-hm-grad{flex:0 0 120px;height:8px;border-radius:3px;background:linear-gradient(90deg,#fcebeb,#f7c1c1,#f09595,#e24b4a,#a32d2d)}
.pc-hm-leglab{margin-left:auto;font-weight:600}
.tile-acts{display:inline-flex;gap:1px;flex-shrink:0}
.tile-act{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:var(--c-faint);cursor:pointer;border-radius:3px;transition:color .12s,background .12s}
.tile-act .material-symbols-outlined{font-size:15px}
.tile-open{color:#e8833a}
.tile-open:hover{background:#fdf0e6;color:#d9701f}
.tile-del{opacity:0;transition:opacity .12s}
.tile:hover .tile-del{opacity:1}
.tile-del:hover{background:#fdeceb;color:#c0392b}
/* ---- Card header styles (derived from the card accent) ---- */
/* Gradient/solid headers own the complete top edge. The generic tile accent
rail otherwise sits above them as a second, differently coloured strip. */
.tile.hdr-gradient,.tile.hdr-solid{border-top-width:1px;border-top-color:transparent}
.tile.hdr-gradient .tile-head,.tile.hdr-solid .tile-head{
margin:-1px -1px 0;border-radius:10px 10px 0 0;overflow:hidden
}
/* Tinted: light wash, dark text */
.tile.hdr-tint .tile-head{
background:color-mix(in srgb, var(--tile-accent,var(--pv-head-accent)) 14%, #fff);
border-bottom-color:color-mix(in srgb, var(--tile-accent,var(--pv-head-accent)) 26%, #fff);
}
/* Gradient + Bold: rich dark accent ramp, white text — darkened toward ink so it
stays readable on any accent (incl. light amber/coral). */
.tile.hdr-gradient .tile-head,
.tile.hdr-solid .tile-head{
border-bottom-color:transparent;
}
.tile.hdr-gradient .tile-head{
background:linear-gradient(118deg,
color-mix(in srgb, var(--tile-accent,var(--pv-head-accent)) 74%, #14161b) 0%,
color-mix(in srgb, var(--tile-accent,var(--pv-head-accent)) 44%, #14161b) 100%);
}
.tile.hdr-solid .tile-head{
background:color-mix(in srgb, var(--tile-accent,var(--pv-head-accent)) 80%, #14161b);
}
.tile.hdr-gradient .tile-title,.tile.hdr-solid .tile-title{color:#fff;letter-spacing:.005em}
.tile.hdr-gradient .tile-sub,.tile.hdr-solid .tile-sub{color:rgba(255,255,255,.82)}
.tile.hdr-gradient .tile-open,.tile.hdr-solid .tile-open{color:rgba(255,255,255,.9)}
.tile.hdr-gradient .tile-open:hover,.tile.hdr-solid .tile-open:hover,
.tile.hdr-gradient .tile-del:hover,.tile.hdr-solid .tile-del:hover{background:rgba(255,255,255,.18);color:#fff}
.tile.hdr-gradient .tile-del,.tile.hdr-solid .tile-del{color:rgba(255,255,255,.82)}
.tile-body{flex:1;padding:12px 15px 14px;min-height:0;display:flex;flex-direction:column}
.tile-body,.tile-chartbox,.pc-host,.apexcharts-canvas{overflow:visible!important}
/* Per-card freshness stamp — a quiet provenance line, never competing with the
card's own numbers. Sits in the same bottom slot as the authored footnote. */
.tile-datastamp{
flex:0 0 auto;padding:0 15px 10px;font-size:10.5px;line-height:1.35;letter-spacing:.01em;
color:var(--c-faint,#8a8f98);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.tile-stamp + .tile-datastamp{padding-top:0}
/* Population-independence hint — a declared non-student aggregate says so on
the card while the restrictive cohort is selected, so a goals tile never
silently reads as filtered. Deliberately as quiet as the provenance line. */
.tile-pop-exempt{
flex:0 0 auto;padding:0 15px 6px;font-size:10.5px;line-height:1.35;letter-spacing:.01em;
color:var(--c-faint,#8a8f98);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-style:italic;cursor:help
}
.tile-pop-exempt + .tile-datastamp{padding-top:0}
[class*="board-theme-md3"] .tile-pop-exempt{font-size:10.5px;color:#73777F;padding:0 16px 6px}
.pc-drill-target{cursor:pointer}
.pc-drill-target:focus-visible{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:3px;border-radius:4px}
.apexcharts-tooltip{
z-index:80!important;pointer-events:none;white-space:nowrap!important;
width:max-content!important;max-width:min(380px,calc(100vw - 20px))!important;
overflow:hidden!important
}
.apexcharts-tooltip .pc-tip{
position:static;inset:auto;opacity:1;width:max-content;min-width:180px;
max-width:min(360px,calc(100vw - 24px));box-sizing:border-box;
border:0;border-radius:6px;box-shadow:none
}
.apexcharts-tooltip-title{
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis;
max-width:360px
}
.apexcharts-tooltip-series-group{align-items:center!important;white-space:nowrap!important}
.pc-tip-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.pc-tip-r{align-items:center;white-space:nowrap}
.pc-tip-r>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
.tile-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;opacity:0;transition:opacity .12s}
.tile-resize::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;border-right:2px solid var(--c-faint);border-bottom:2px solid var(--c-faint)}
.tile:hover .tile-resize{opacity:1}
.board-empty{display:flex;justify-content:center;padding:64px 20px}
.board-empty-card{max-width:460px;text-align:center;background:#fff;border:1px solid var(--c-line);border-radius:4px;padding:36px}
.board-empty-card h2{font-size:17px;margin:0 0 8px;color:var(--c-ink)}
.board-empty-card p{color:var(--c-muted);font-size:13px;line-height:1.6;margin-bottom:18px}
.board-empty-warn{color:#9a6a14}
/* Phone: drop the 12-col grid for a simple stacked column so every tile sizes
to its content (the fixed grid-row spans would otherwise clip stacked charts). */
@media (max-width:760px){
.board-grid{display:block}
.board-grid .tile{grid-column:auto!important;grid-row:auto!important;width:100%;margin:0 0 12px;min-height:0}
.board-grid .tile-body{height:auto}
/* In block mode nothing gives a chart tile a height, so an Apex host would
collapse to ~0 and render a sliver. DOM tiles (kpi/table/text) still size
to content because min-height only sets a floor. */
.board-grid .tile:not(.tile-text) .tile-body{min-height:240px}
}
/* ---------- Studio ---------- */
body.vz-open{overflow:hidden}
.st{position:fixed;inset:0;z-index:60;background:var(--c-frame);display:flex;flex-direction:column;font-family:var(--ui)}
.st-bar{display:flex;align-items:center;gap:11px;height:52px;flex-shrink:0;padding:0 16px;background:var(--c-panel);
border-bottom:1px solid var(--c-line);box-shadow:0 1px 0 rgba(20,22,40,.03),0 2px 6px -3px rgba(20,22,40,.10);position:relative;z-index:2}
.st-back{display:inline-flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--c-ink)}
.st-back svg{color:var(--c-faint)}
.st-back:hover svg{color:var(--c-accent)}
.st-sep{width:1px;height:20px;background:var(--c-line)}
.st-model{display:inline-flex;align-items:center;gap:6px;background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:var(--c-radius-sm);padding:0 8px 0 10px;transition:border-color .12s}
.st-model:hover{border-color:var(--st-accent-line)}
.st-model-ic{color:var(--st-accent);font-size:13px}
.st-model select{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--c-ink);padding:7px 2px;cursor:pointer}
.st-model select:focus{outline:none}
.st-title-in{font:inherit;font-size:13.5px;font-weight:550;color:var(--c-ink);border:1px solid transparent;background:none;padding:7px 9px;border-radius:var(--c-radius-sm);min-width:180px}
.st-title-in::placeholder{color:var(--c-faint);font-weight:400}
.st-title-in:hover{background:var(--c-panel-2)}
.st-title-in:focus{outline:none;border-color:var(--st-accent-line);box-shadow:0 0 0 3px var(--st-accent-bg);background:var(--c-panel)}
.st-grow{flex:1}
.st-status{font-size:11px;font-weight:600;color:#2d7d46;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
/* Studio's Save uses the fixed chrome accent so the primary action stays
readable regardless of the org brand colour. */
.st-bar .btn.primary{background:var(--st-accent);border-color:var(--st-accent)}
.st-bar .btn.primary:hover{background:var(--st-accent-2);border-color:var(--st-accent-2)}
/* Three floating work panels on the slate frame — depth via elevation, not
hairline borders. */
.st-body{flex:1;display:grid;grid-template-columns:248px 1fr 372px;gap:12px;padding:12px;min-height:0}
.st-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint)}
.st-data{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--c-radius);box-shadow:var(--c-shadow);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.st-data-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px}
.st-fx{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--st-accent-line);background:var(--st-accent-bg);border-radius:var(--c-radius-sm);padding:4px 9px;font:inherit;font-size:11.5px;font-weight:600;color:var(--st-accent);cursor:pointer;transition:background .12s}
.st-fx:hover{background:var(--st-accent);color:#fff;border-color:transparent}
.st-fx:hover .st-fx-ic{color:#fff}
.st-fx-ic{font-family:var(--mono);font-weight:700}
.st-search{display:flex;align-items:center;gap:6px;margin:0 12px 8px;padding:6px 9px;border:1px solid var(--c-line);border-radius:var(--c-radius-sm);background:var(--c-panel-2);color:var(--c-faint);transition:border-color .12s,box-shadow .12s}
.st-search:focus-within{border-color:var(--st-accent-line);box-shadow:0 0 0 3px var(--st-accent-bg);background:var(--c-panel)}
.st-search input{flex:1;border:none;background:none;font:inherit;font-size:12.5px;color:var(--c-ink)}
.st-search input:focus{outline:none}
.st-fields{flex:1;overflow-y:auto;padding:2px 8px 14px;min-height:0}
.st-fgroup{display:flex;gap:6px;padding:11px 4px 5px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint)}
.st-fgroup span{color:#c2c8d0}
/* Field rows: the type glyph rides in a tinted rounded chip (dimension-blue /
measure-green) — the data-semantic signature, and a tactile drag handle. */
.st-field{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--c-radius-sm);cursor:grab;font-size:12.5px;color:var(--c-ink2);user-select:none;border:1px solid transparent;transition:background .1s,border-color .1s,box-shadow .1s}
.st-field:hover{background:var(--c-panel);border-color:var(--c-line);box-shadow:var(--c-shadow-sm)}
.st-field:active{cursor:grabbing}
.st-field.drag{opacity:.4}
.st-fic{width:22px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;font-weight:700;font-style:normal;border-radius:4px;letter-spacing:-.02em}
.st-field.measure .st-fic{color:var(--mea);background:var(--mea-bg)}
.st-field.dimension .st-fic{color:var(--dim);background:var(--dim-bg)}
.st-fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-fcalc{font-family:var(--mono);color:var(--c-accent);font-weight:700}
.st-calc{border-top:1px solid var(--c-line);background:#fafbfc;padding:11px 12px}
.st-calc-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);margin-bottom:8px}
.st-calc-x{border:none;background:none;cursor:pointer;color:var(--c-faint);font-size:12px}
.st-canvas{display:flex;flex-direction:column;min-width:0}
.st-card{flex:1;display:flex;flex-direction:column;background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--c-radius);min-height:0;box-shadow:var(--c-shadow)}
.st-card-title{padding:16px 20px 0;font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--c-ink)}
.st-card-plot{flex:1;display:flex;flex-direction:column;padding:12px 18px 18px;min-height:0}
/* Inspector: a pinned chart-type gallery + tab strip, then ONE scrollable panel.
Splitting the old 2,700px scroll into Encode/Data/Format/Interact/Advanced is
what makes it scannable. */
.st-enc{background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--c-radius);box-shadow:var(--c-shadow);min-height:0;display:flex;flex-direction:column}
.st-typebar{padding:12px 12px 10px;border-bottom:1px solid var(--c-line2);flex:0 0 auto;position:relative}
.st-typebar-h{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);margin-bottom:6px}
/* the picker button — shows the current type, opens the grouped menu */
.st-typebtn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:1px solid var(--c-line);
border-radius:var(--c-radius-sm);background:var(--c-panel);cursor:pointer;font:inherit;text-align:left;transition:border-color .12s,box-shadow .12s}
.st-typebtn:hover{border-color:var(--st-accent-line);box-shadow:var(--c-shadow-sm)}
.st-typebtn-ic{font-size:19px;color:var(--st-accent)}
.st-typebtn-name{flex:1;font-size:13px;font-weight:600;color:var(--c-ink)}
.st-typebtn-chev{font-size:18px;color:var(--c-faint)}
/* the flyout menu — grouped, labelled, described */
.st-typemenu{position:absolute;left:12px;right:12px;top:calc(100% - 4px);z-index:20;background:var(--c-panel);
border:1px solid var(--c-line);border-radius:var(--c-radius);box-shadow:var(--c-shadow-pop);
max-height:min(560px,72vh);overflow-y:auto;padding:6px}
.st-enc-types{display:flex;flex-direction:column;gap:1px}
.st-typegrp{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint);padding:11px 8px 4px}
.st-typegrp:first-child{padding-top:4px}
.st-type{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;background:none;border-radius:var(--c-radius-sm);cursor:pointer;text-align:left;transition:background .1s}
.st-type-ic{font-size:19px;color:var(--c-muted);width:22px;text-align:center;flex-shrink:0}
.st-type-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.st-type-name{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.st-type-desc{font-size:11px;color:var(--c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-type:hover{background:var(--st-accent-bg)}
.st-type:hover .st-type-ic{color:var(--st-accent)}
.st-type.active{background:var(--st-accent-bg)}
.st-type.active .st-type-ic,.st-type.active .st-type-name{color:var(--st-accent)}
.st-type.active .st-type-name::after{content:"✓";margin-left:6px;font-weight:700}
/* tab strip */
.st-tabs{display:flex;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--c-line);flex:0 0 auto}
.st-tab{flex:1;border:0;background:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--c-muted);
padding:7px 4px 8px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:4px 4px 0 0}
.st-tab:hover{color:var(--c-ink);background:var(--st-accent-bg)}
.st-tab.is-active{color:var(--st-accent);border-bottom-color:var(--st-accent)}
/* scrollable panel body — exactly one panel visible at a time */
.st-panels{flex:1;min-height:0;overflow-y:auto;padding:12px}
.st-panel{display:none;flex-direction:column}
.st-panel.is-active{display:flex}
.st-panel>.st-opts:first-child{border-top:0;padding-top:0}
.st-panel>.st-shelf:first-child{margin-top:2px}
.st-opt-full{flex:1}
.st-adv{font-family:var(--mono);font-size:11.5px;line-height:1.5;resize:vertical}
.st-shelf{margin-bottom:14px}
.st-shelf-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);margin-bottom:6px}
.st-mini{margin-left:auto;width:18px;height:18px;border:1px solid var(--c-line);background:#fff;border-radius:3px;cursor:pointer;color:var(--c-muted);line-height:1;font-size:13px}
/* Drop shelves: an inset "well" so dropping a field feels tactile. */
.st-drop{display:flex;flex-wrap:wrap;gap:5px;min-height:36px;padding:7px;border:1px solid var(--c-line);border-radius:var(--c-radius-sm);background:var(--c-panel-2);box-shadow:inset 0 1px 2px rgba(20,22,40,.04);align-content:flex-start;transition:border-color .12s,box-shadow .12s,background .12s}
.st-drop.st-drop-col{flex-direction:column}
.st-drop.over{border-color:var(--st-accent);background:var(--st-accent-bg);box-shadow:0 0 0 3px var(--st-accent-bg)}
.st-drop-empty{font-size:11.5px;color:#aeb4c2;font-style:italic;padding:3px}
.st-drop-empty.muted{color:#cfd3db}
/* Field pills carry a slight lift so they read as objects you can grab. */
.st-pill{display:inline-flex;align-items:center;gap:4px;height:25px;padding:0 5px 0 9px;border-radius:5px;font-size:11.5px;font-weight:550;border:1px solid;max-width:100%;box-shadow:var(--c-shadow-sm)}
.st-pill.dim{background:var(--dim-bg);color:var(--dim);border-color:var(--dim-line)}
.st-pill.mea{background:var(--mea-bg);color:var(--mea);border-color:var(--mea-line)}
.st-pill-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pill-agg,.st-pill-fmt,.st-pill-calc{border:none;background:rgba(255,255,255,.6);border-radius:2px;font-family:var(--mono);font-size:9.5px;font-weight:700;color:inherit;cursor:pointer;padding:1px 2px}
.st-pill-calc{max-width:96px}
/* Reference-band editor: from / to / colour / label rows */
.st-bands{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.st-band-row{display:grid;grid-template-columns:1fr 1fr 26px 1.4fr 18px;gap:4px;align-items:center}
.st-band-row input[type=number],.st-band-row input[type=text]{font:inherit;font-size:11px;padding:3px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-band-row input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--c-line);border-radius:3px;background:#fff}
.st-group-row{display:grid;grid-template-columns:1fr 1.7fr 18px;gap:4px;align-items:center}
.st-group-row input[type=text]{font:inherit;font-size:11px;padding:3px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-cell-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 18px;gap:4px;align-items:center}
.st-cell-row input[type=text],.st-cell-row select{font:inherit;font-size:11px;padding:3px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-anno-row{display:grid;grid-template-columns:1fr 1.4fr 26px 18px;gap:4px;align-items:center}
.st-anno-row input[type=text]{font:inherit;font-size:11px;padding:3px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-anno-row input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--c-line);border-radius:3px;background:#fff}
.st-order{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.st-ord-chips{display:flex;flex-direction:column;gap:3px}
.st-ord-chip{display:flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--c-line);border-radius:4px;padding:2px 4px;font-size:11.5px}
.st-ord-chip .st-ord-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ink)}
.st-ord-mv{border:none;background:none;cursor:pointer;color:var(--c-ink2);font-size:11px;width:16px;height:16px;border-radius:2px;line-height:1}
.st-ord-mv:hover{background:rgba(0,0,0,.08);color:var(--c-ink)}
.st-ord-add{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.st-ord-add select,.st-ord-add input{font:inherit;font-size:11px;padding:3px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-opt-lbl{display:block;font-size:11.5px;color:var(--c-ink2);margin-bottom:1px}
.st-pill-agg:focus,.st-pill-fmt:focus{outline:none}
.st-pill-x{border:none;background:none;cursor:pointer;color:inherit;opacity:.5;font-size:10px;width:15px;height:15px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center}
.st-pill-x:hover{opacity:1;background:rgba(0,0,0,.1)}
.st-filters{display:flex;flex-direction:column;gap:5px}
.st-filter{display:grid;grid-template-columns:1fr .7fr 1fr 18px;gap:3px;align-items:center}
.st-filter select,.st-filter input{font:inherit;font-size:11px;padding:4px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-filter select:focus,.st-filter input:focus{outline:none;border-color:var(--c-accent)}
/* Each option group is a clearly delimited card (Tableau/Power-BI format cards)
— a titled block on the tinted panel, so groups never bleed together. */
.st-opts{display:flex;flex-direction:column;gap:10px;background:var(--c-panel-2);border:1px solid var(--c-line);
border-radius:var(--c-radius-sm);padding:11px 12px;margin-bottom:2px}
.st-opts .st-tip-in,.st-opts select,.st-opts input[type=number]{background:var(--c-panel)}
.st-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--c-muted)}
.st-opt select,.st-opt input[type=number]{font:inherit;font-size:11.5px;padding:4px 6px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);width:96px}
.st-opt-check{justify-content:flex-start;gap:7px;cursor:pointer}
.st-opt-check input{accent-color:var(--c-accent)}
.st-opt-tip{flex-direction:column;align-items:stretch;gap:5px}
.st-opt-tip>span{font-weight:600;color:var(--c-ink)}
.st-limit{display:inline-flex;gap:4px}
.st-limit select{width:74px}
.st-limit input[type=number]{width:60px}
.st-tip-in{font:inherit;font-size:11.5px;line-height:1.5;padding:6px 8px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);resize:vertical;min-height:38px;width:100%}
.st-tip-in:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-bg)}
.st-tip-hint{font-size:10.5px;color:var(--c-muted);line-height:1.5;margin:3px 0 2px}
.st-tip-hint-tight{margin:-3px 0 4px 24px}
.st-tip-hint code{font-family:var(--mono);font-size:10px;background:#f1f2f5;padding:1px 4px;border-radius:2px;color:var(--c-ink)}
/* Sub-section header — the title that sits directly above its option card. */
.st-substep{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);
margin:14px 2px 6px}
.st-substep:first-child{margin-top:0}
/* Inline "what goes here" hint beside a shelf header */
.st-shelf-hint{margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--c-faint);cursor:help}
/* ---------- Studio: structural spec editors (KPI composer, viewer controls, drill) ---------- */
.st-gap{margin-top:14px}
.st-sub{margin-top:8px}
.st-err{border-color:#c0392b !important;box-shadow:0 0 0 2px rgba(192,57,43,.12) !important}
.st-pill-extra{font-family:var(--mono);font-size:9px;font-weight:700;background:rgba(255,255,255,.7);border-radius:2px;padding:1px 4px;cursor:default}
.st-mini.st-mini-w{width:auto;padding:0 6px;font-size:10px;font-family:var(--mono)}
.st-mini.on{background:var(--c-accent-bg);border-color:var(--c-accent-line);color:var(--c-accent)}
.st-kpicomp{display:flex;flex-direction:column;gap:5px}
.st-kpicomp:not(:empty){margin-top:6px}
.st-tile{border:1px solid var(--c-line);border-radius:3px;background:#fff}
.st-tile-h{display:flex;align-items:center;gap:6px;width:100%;border:none;background:none;padding:6px 8px;font:inherit;font-size:11.5px;font-weight:600;color:var(--c-ink2);cursor:pointer;text-align:left}
.st-tile-h:hover{background:var(--c-accent-bg)}
.st-tile-car{font-size:9px;color:var(--c-muted);width:10px;flex-shrink:0}
.st-tile-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-tile-n{font-family:var(--mono);font-size:9.5px;color:var(--c-faint);flex-shrink:0}
.st-tile-b{display:flex;flex-direction:column;gap:8px;padding:8px;border-top:1px solid var(--c-line2);background:#fafbfc}
.st-tile-tools{display:flex;justify-content:flex-end;margin-bottom:-2px}
.st-color-row{display:inline-flex;align-items:center;gap:5px}
.st-ctl{border:1px solid var(--c-line);border-radius:3px;background:#fafbfc;padding:7px 8px;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.st-ctl-row{display:flex;align-items:center;gap:4px;margin-top:4px}
.st-ctl-row input[type=text],.st-ctl-row select{font:inherit;font-size:11px;padding:4px 5px;border:1px solid var(--c-line);border-radius:3px;background:#fff;color:var(--c-ink);min-width:0}
.st-ctl-row input[type=text]{flex:1;width:auto}
.st-ctl-row input[type=text]:focus,.st-ctl-row select:focus{outline:none;border-color:var(--c-accent)}
.st-ctl-opts{display:flex;flex-direction:column;gap:2px}
.st-cf-multi{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--c-muted);flex-shrink:0}
.st-patch-json{font-family:var(--mono);font-size:10.5px;margin-top:3px}
.st-drillpath{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}
.st-xf-targets{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 2px;max-height:180px;overflow-y:auto}
/* Narrow screens: shrink the side panes first, then stack. Below 860px the
three-pane grid physically can't fit usable controls, so the studio becomes
one scrolling column — preview first, inspector next, field list last. */
@media (max-width:1180px){ .st-body{grid-template-columns:210px 1fr 320px} }
@media (max-width:980px){ .st-body{grid-template-columns:190px 1fr 280px} }
@media (max-width:860px){
.st-body{display:flex;flex-direction:column;overflow-y:auto}
.st-canvas{order:1;flex:0 0 auto}
.st-card{min-height:340px}
.st-enc{order:2;flex:0 0 auto}
.st-panels{max-height:60vh}
.st-data{order:3;flex:0 0 auto;max-height:45vh}
}
/* ---------- Shared formula widget ----------
Mounted in three places (chart studio, model page, workbench creator), so
every colour comes from a token: the studio's :root palette outside .wbench,
the R1 ladder inside it, with no rule needing to know which. */
.fx{display:flex;flex-direction:column;gap:9px}
.fx-row{display:grid;grid-template-columns:1fr 112px;gap:6px}
.fx-name,.fx-role{font:inherit;font-size:var(--t-body);padding:6px 9px;border:1px solid var(--c-line);
border-radius:var(--r-1);background:var(--c-panel);color:var(--c-ink)}
.fx-name:focus,.fx-role:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
.fx-modes{display:flex;align-items:center;gap:4px}
.fx-mode{border:1px solid var(--c-line);background:var(--c-panel);border-radius:var(--r-1);padding:4px 10px;
font:inherit;font-size:var(--t-meta);font-weight:600;color:var(--c-muted);cursor:pointer}
.fx-mode.on{background:var(--c-accent-bg);border-color:var(--c-accent-line);color:var(--c-accent)}
.fx-fmt-wrap{margin-left:auto;font-size:var(--t-micro);color:var(--c-muted);display:inline-flex;align-items:center;gap:4px}
.fx-fmt{font:inherit;font-size:var(--t-micro);padding:2px 4px;border:1px solid var(--c-line);
border-radius:var(--r-1);background:var(--c-panel)}
/* The expression and its evidence on the left; what can go INTO it on the
right. The side panel wraps under on a narrow mount rather than squeezing
the thing being written. */
.fx-main{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.fx-work{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:7px}
.fx-editor{position:relative}
.fx-expr{width:100%;font-family:var(--mono);font-size:var(--t-data);line-height:1.7;padding:10px 12px;
border:1px solid var(--c-line);border-radius:var(--r-1);background:var(--c-panel);color:var(--c-ink);
resize:vertical;font-variant-numeric:slashed-zero tabular-nums}
.fx-expr:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
.fx-expr::placeholder{color:var(--c-faint)}
/* The signature of the function the caret is inside. */
.fx-sig:empty{display:none}
.fx-sig{display:flex;align-items:baseline;gap:8px;font-size:var(--t-micro);color:var(--c-muted);
min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fx-sig-in{font-family:var(--mono);color:var(--c-ink2);flex:none}
.fx-status:empty{display:none}
.fx-status{font-size:var(--t-meta);line-height:1.5}
.fx-status.is-idle,.fx-status.is-busy{color:var(--c-muted)}
.fx-status.is-ok{color:var(--c-ok)}
.fx-status.is-err{color:var(--c-danger)}
.fx-status code{font-family:var(--mono);background:var(--c-panel-2);border:1px solid var(--c-line);
border-radius:2px;padding:0 4px}
/* Live computed values. Ten real results beside the expression say what
"valid" cannot: whether the formula is RIGHT. */
.fx-vals:empty{display:none}
.fx-vals{border:1px solid var(--c-line);border-radius:var(--r-1);background:var(--c-panel);overflow:hidden}
.fx-vals-h{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-bottom:1px solid var(--c-line);
background:var(--c-panel-2);font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--c-muted)}
.fx-vals-sub{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;font-size:var(--t-micro)}
.fx-vals-none{padding:12px 10px;font-size:var(--t-meta);color:var(--c-muted);line-height:1.55}
.fx-agg{padding:12px 10px;font-size:var(--t-head);font-variant-numeric:tabular-nums slashed-zero;color:var(--c-ink)}
.fx-vtbl{width:100%;border-collapse:collapse;font-size:var(--t-data)}
.fx-vtbl th{text-align:left;padding:5px 10px;font-size:var(--t-micro);font-weight:600;color:var(--c-muted);
border-bottom:1px solid var(--c-line);white-space:nowrap}
.fx-vtbl td{padding:4px 10px;border-bottom:1px solid var(--c-line2);color:var(--c-ink);
max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-vtbl tr:last-child td{border-bottom:0}
.fx-vtbl td.k{color:var(--c-ink2)}
.fx-vtbl td.v{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero}
.fx-vtbl td.v.is-na{font-family:inherit;color:var(--c-faint);font-style:italic}
/* Reference autocomplete — every entry names the source it came from. */
.fx-ac{position:absolute;left:8px;top:100%;margin-top:-2px;z-index:5;background:var(--c-panel);
border:1px solid var(--c-line);border-radius:var(--r-2);box-shadow:var(--c-shadow-pop,0 6px 20px rgba(20,25,40,.14));
min-width:230px;max-width:340px;max-height:240px;overflow:auto}
.fx-ac-i{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;
padding:6px 10px;font:inherit;font-size:var(--t-data);color:var(--c-ink);cursor:pointer}
.fx-ac-i:hover,.fx-ac-i.is-active{background:var(--c-accent-bg)}
.fx-ac-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.fx-ac-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-ac-s{font-size:var(--t-micro);color:var(--c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-ac-dup{color:var(--c-warn)}
.fx-ac-none{padding:8px 10px;font-size:var(--t-meta);color:var(--c-muted)}
.fx-ac-hint{position:sticky;bottom:0;padding:5px 10px;border-top:1px solid var(--c-line);
background:var(--c-panel-2);font-size:var(--t-micro);color:var(--c-faint)}
.fx-ac-k,.fx-k{font-family:var(--mono);font-size:var(--t-micro);font-weight:700;width:26px;flex:none;text-align:left}
.fx-ac-k.measure,.fx-k.measure{color:var(--c-mea,#2d7d46)}
.fx-ac-k.dimension,.fx-k.dimension{color:var(--c-dim,#2c5fb3)}
/* The side panel: what can go into the expression. */
.fx-side{flex:1 1 200px;max-width:100%;display:flex;flex-direction:column;min-width:0;
border:1px solid var(--c-line);border-radius:var(--r-1);background:var(--c-panel);
max-height:300px;overflow:hidden}
.fx-side-tabs{display:flex;flex:none;border-bottom:1px solid var(--c-line);background:var(--c-panel-2)}
.fx-side-tabs button{flex:1;font:inherit;font-size:var(--t-micro);font-weight:600;padding:6px 8px;
border:0;background:none;color:var(--c-muted);cursor:pointer;border-bottom:2px solid transparent}
.fx-side-tabs button[aria-pressed="true"]{color:var(--c-accent);border-bottom-color:var(--c-accent);background:var(--c-panel)}
.fx-side-body{overflow:auto;padding:6px}
.fx-side-intro{padding:4px 4px 7px;font-size:var(--t-micro);color:var(--c-muted);line-height:1.5}
.fx-side-none{padding:10px 4px;font-size:var(--t-meta);color:var(--c-muted)}
.fx-side-search{padding:0 2px 6px}
.fx-fn-q{width:100%;font:inherit;font-size:var(--t-meta);padding:5px 8px;border:1px solid var(--c-line);
border-radius:var(--r-1);background:var(--c-panel);color:var(--c-ink)}
.fx-fn-q:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
/* One group per source, each row repeating it quietly so a row stays readable
once it has been scrolled away from its header. */
.fx-group{position:sticky;top:0;z-index:1;padding:6px 4px 3px;background:var(--c-panel);
font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-flist{display:flex;flex-direction:column}
.fx-fitem{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;background:none;
padding:4px 6px;border-radius:var(--r-1);font:inherit;font-size:var(--t-data);color:var(--c-ink);cursor:pointer}
.fx-fitem:hover{background:var(--c-accent-bg)}
.fx-fitem-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.fx-fitem-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-fitem-s{font-size:var(--t-micro);color:var(--c-muted);font-family:var(--mono);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Functions, with the one line of documentation each actually needs. */
.fx-fnlist{display:flex;flex-direction:column;gap:1px}
.fx-fn{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:0;background:none;
padding:5px 6px;border-radius:var(--r-1);font:inherit;color:var(--c-ink);cursor:pointer}
.fx-fn:hover{background:var(--c-accent-bg)}
.fx-fn-sig{font-family:var(--mono);font-size:var(--t-meta);color:var(--c-ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-fn-doc{font-size:var(--t-micro);color:var(--c-muted);line-height:1.45}
.fx-foot{display:flex;align-items:center;gap:8px}
.mwb-fx-panel .fx-foot{position:sticky;bottom:0;background:var(--c-panel);padding:8px 0 2px;z-index:2}
.fx-grow{flex:1}
.fx-tomodel{font-size:var(--t-micro);color:var(--c-muted);display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.fx-hint{font-size:var(--t-micro);color:var(--c-faint);line-height:1.5}
.fx-hint code{font-family:var(--mono);background:var(--c-panel-2);color:var(--c-accent);padding:0 4px;border-radius:2px}
/* Inside the workbench the widget reads the R1 ladder like everything around
it; outside, the studio palette above already fits. */
.wbench .fx-name,.wbench .fx-role,.wbench .fx-expr,.wbench .fx-fn-q{border-color:var(--c-line3)}
.wbench .fx-mode{border-color:var(--c-line3)}
.wbench .fx-mode.on{background:var(--c-accent-3);border-color:var(--i-6);color:var(--c-accent-2)}
.wbench .fx-expr{font-size:var(--t-body);padding:11px 13px}
.wbench .fx-ac{border-color:var(--c-line3);box-shadow:var(--elev-1)}
.wbench .fx-ac-i{font-size:var(--t-body);border-radius:var(--r-1)}
.wbench .fx-ac-i:hover,.wbench .fx-ac-i.is-active{background:var(--c-panel-3)}
.wbench .fx-fitem:hover,.wbench .fx-fn:hover{background:var(--c-panel-3)}
.wbench .fx-status.is-err{color:var(--c-danger)}
.wbench .fx-hint code{background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-ink2);border-radius:2px;padding:1px 4px}
/* =================================================================
MODEL WORKBENCH VISUAL SYSTEM
Spec of record: docs/design/workbench_redesign/ (variant-a.html +
mock.css). mock.css's header states the twelve rules and their
sources; the short form, because these are decisions and not
defaults:
R1 Body copy is 14px and there is exactly one of it.
R2 Seven type steps, real jumps, no half-pixels (the sheet this
replaces nudged between 9px and 26px in 0.5px steps).
R3 Hierarchy comes from weight and colour before size.
R4 Text is darker: Radix reserves 11–12 for text and 9–10 for
solids, so nothing at step 9 or 10 carries words.
R5 One accent, rationed — primary button, include checkbox,
focus, links, authored (computed) fields, the hover binding.
R6 Colour comes off Radix Slate + Radix Indigo at the steps Radix
assigns: 1–2 surfaces, 3–5 fills, 6–8 borders, 9–10 solids,
11–12 text. The app's own #3358d4 is indigo-10.
R7 Digits in a column get tabular figures; identifiers get a
slashed zero — this screen's whole join argument is that
S0087 and S87 are different strings.
R8 Focus is a 2px solid ring at full accent, offset. The 3px
rgba(51,88,212,.12) glow this replaces was ~1.1:1 and failed
WCAG 2.2.
R9 Three radii, each meaning something: 3px controls, 6px
containers, round only for genuinely circular things. Data
cells get none — a table is a grid, not a stack of cards.
R10 Surfaces at rest have a border, not a shadow. Elevation is for
things that actually float, and it falls downward.
R11 Space is spent where it separates groups, not uniformly.
R12 Boldness is spent in one place: the binding — hover a field
row and its column lights up in the preview.
The ladders and the scale are declared globally because they are
just values; the --c- REMAP is scoped to .wbench so the chart studio
and the public board, which share those names, are untouched.
================================================================= */
:root{
/* R6: Radix Slate, at the steps Radix assigns them. */
--s-1:#fcfcfd; /* app background */
--s-2:#f8f8fa; /* subtle fill — sparingly */
--s-3:#f0f0f3; /* component rest / row hover */
--s-4:#e8e8ec; /* component hover */
--s-5:#e0e1e6; /* component pressed */
--s-6:#d9d9e0; /* border, non-interactive */
--s-7:#cdced6; /* border, interactive */
--s-8:#b9bbc6; /* strong border */
--s-9:#8b8d98; /* solid — NEVER text */
--s-10:#80838d; /* solid hover — icons only */
--s-11:#60646c; /* low-contrast TEXT */
--s-12:#1c2024; /* high-contrast TEXT — ink */
/* R6: Radix Indigo. */
--i-1:#fdfdfe; --i-2:#f7f9ff; --i-3:#edf2fe; --i-4:#e1e9ff;
--i-5:#d2deff; --i-6:#c1d0ff; --i-7:#abbdf9; --i-8:#8da4ef;
--i-9:#3e63dd; --i-10:#3358d4; --i-11:#3a5bc7; --i-12:#1f2d5c;
/* R1/R2: seven steps. No halves. Every jump is deliberate. */
--t-micro:11px; /* uppercase labels only, +tracking, 600 */
--t-meta:12px; /* secondary metadata, warehouse identifiers */
--t-data:13px; /* dense table cells */
--t-body:14px; /* BASE — body, controls, field names */
--t-title:16px; /* panel and section titles */
--t-head:20px; /* sub-heads: join panel, formula editor */
--t-page:26px; /* the one H1 on the page */
/* R9: three radii, each with a job. */
--r-1:3px; /* controls, inputs, chips, tags */
--r-2:6px; /* panels, cards, popovers, modals */
--r-full:999px; /* only genuinely circular things */
/* R10: elevation only for things that float, falling downward. */
--elev-1:0 1px 2px rgba(28,32,36,.06), 0 6px 16px -6px rgba(28,32,36,.14);
--elev-2:0 2px 6px rgba(28,32,36,.07), 0 18px 44px -14px rgba(28,32,36,.26);
/* The semantic tier, global for the same reason the ladders are: it is just
values. `.wbench` remaps it onto --c-*; surfaces outside that scope — the
connector page's danger strip — read it directly rather than inventing a
fourth red. */
--danger:#ce2c31; --danger-bg:#fff7f7; --danger-line:#f4a9aa; --danger-ink:#8f2226;
}
/* The workbench scope: the models index, the model page, the creator
and the combine page. Everything inside reads the remapped --c-
tokens, so the mwb, cmb and dm families move onto the ladder
without a single rule of the studio or the board changing colour.
NB: never write a class glob ending in a star immediately before a
slash in here — it closes the comment and eats the next rule. */
.wbench{
--c-panel:#ffffff; --c-panel-2:var(--s-2); --c-panel-3:var(--s-3);
--c-line:var(--s-6); --c-line2:var(--s-4); --c-line3:var(--s-7);
/* R4: --c-muted is step 11 (4.9:1 on white) and is real text;
--c-faint is step 10 and draws icons and rules, never prose. */
--c-ink:var(--s-12); --c-ink2:#3d4149; --c-muted:var(--s-11); --c-faint:var(--s-10);
/* R5: one accent, and it is the system's indigo rather than the tenant's
brand colour. Same call the studio already makes with --st-accent: this
is Pluvoir's own admin furniture, and a low-contrast brand colour must
not land on the include checkbox or the focus ring. Customer branding
lives on the public site. */
--c-accent:var(--i-10); --c-accent-2:var(--i-11); --c-accent-3:var(--i-3);
--c-accent-bg:var(--i-4); --c-accent-line:var(--i-7);
--c-accent-soft:var(--i-2); --c-accent-ink:var(--i-12);
/* Role semantics: a dimension is the accent read quietly, a measure green. */
--c-dim:var(--i-11); --c-dim-bg:var(--i-3); --c-dim-line:var(--i-7);
--c-mea:#218358; --c-mea-bg:#e6f6eb; --c-mea-line:#8eceaa;
/* The semantic tier the old sheet never had — every warning and
every refusal in here was its own one-off hex. */
--c-ok:#218358; --c-ok-bg:#e6f6eb; --c-ok-line:#8eceaa; --c-ok-ink:#1d6b41;
--c-warn:#a15c00; --c-warn-bg:#fef6e4; --c-warn-line:#e9c162; --c-warn-ink:#7a4a06;
--c-danger:var(--danger); --c-danger-bg:var(--danger-bg);
--c-danger-line:var(--danger-line); --c-danger-ink:var(--danger-ink);
--c-radius:var(--r-2); --c-radius-sm:var(--r-1);
/* R10: nothing at rest casts a shadow; --c-shadow is left for the
things that genuinely float (the picker menu, popovers). */
--c-shadow:var(--elev-1); --c-shadow-sm:none; --c-shadow-pop:var(--elev-2);
font-size:var(--t-body);
line-height:1.5;
color:var(--c-ink);
}
/* R8: one focus treatment, everywhere in here, 2px solid at full accent. */
.wbench :where(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:2px solid var(--c-accent);outline-offset:2px;
}
/* R7: identifiers in mono get tabular figures AND a slashed zero. */
/* Only things that ARE identifiers: `.dm-card-src` and `.mwb-col` carry
`.mono` themselves where they hold one, and prose ("combined from 2
models") must not be dressed up as a warehouse name. */
.wbench code,.wbench .mono,.wbench .dm-fname{
font-family:var(--mono);
font-variant-numeric:slashed-zero tabular-nums;
font-feature-settings:'zero' 1,'tnum' 1;
}
/* One label treatment for the whole system (R2/R4): 11px, 600,
tracked, and in step-11 ink so it is genuinely readable. */
.wbench .dm-comp-h,.wbench .mwb-row-h,.wbench .mwb-suggested-h,.wbench .cmb-lbl,
.wbench .cmb-fgroup-tag,.wbench .cmb-badge-cap{
font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--c-muted);
}
/* .btn is the app-wide control; inside the workbench it reads the ladder and
the 3px control radius so it sits beside .mwb-create rather than beside the
chrome of another page. R5: exactly one filled primary per screen. */
.wbench .btn{
height:34px;padding:0 13px;font-size:var(--t-body);font-weight:500;border-radius:var(--r-1);
border-color:var(--c-line3);background:var(--c-panel);color:var(--c-ink2);line-height:1;
}
.wbench .btn:hover{background:var(--c-panel-3);border-color:var(--s-8);color:var(--c-ink)}
.wbench .btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff;font-weight:600}
.wbench .btn.primary:hover{background:var(--c-accent-2);border-color:var(--c-accent-2)}
/* R11: the page heading and its breadcrumb — what you are making, and what
you would go back to. The creator opened with an editable name as its only
heading, so it never said whether you were creating or editing. */
.wbench-crumb{display:flex;align-items:center;gap:6px;font-size:var(--t-meta);color:var(--c-muted);margin-bottom:12px}
.wbench-crumb a{color:var(--c-muted);font-weight:500;border-radius:var(--r-1)}
.wbench-crumb a:hover{color:var(--c-accent);text-decoration:underline}
.wbench-crumb .material-symbols-outlined{font-size:16px;color:var(--c-faint)}
.wbench-crumb b{color:var(--c-ink2);font-weight:600}
.wbench-crumb code{font-size:var(--t-meta)}
.wbench-eyebrow{font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);
display:block;margin-bottom:4px}
/* The model page's preview reuses the connector-detail grid. Inside the
workbench it reads the same steps as the creator's preview, so the two
previews are recognisably one table. */
.wbench .cdtl-grid{font-size:var(--t-data);border-collapse:separate;border-spacing:0}
.wbench .cdtl-grid th{font-size:var(--t-micro);letter-spacing:.06em;font-weight:600;color:var(--c-muted);
padding:8px 14px;border-bottom:1px solid var(--c-line);background:var(--c-panel-2)}
.wbench .cdtl-grid td{padding:8px 14px;border-bottom:1px solid var(--c-line2);color:var(--c-ink2);
font-variant-numeric:tabular-nums}
.wbench .cdtl-grid .mono{font-size:var(--t-data);color:var(--c-ink)}
.wbench .cdtl-grid tr:hover td{background:var(--c-panel-2)}
.wbench .cdtl-empty{font-size:var(--t-body);color:var(--c-muted)}
.wbench .cdtl-empty.err{color:var(--c-danger)}
.wbench .cr-preview-meta{font-size:var(--t-meta);color:var(--c-muted);font-variant-numeric:tabular-nums}
/* R10: a flash is a message on the page, not a floating card. */
.wbench .flash{font-size:var(--t-body);border-radius:var(--r-1)}
/* ---------- Model Workbench (draft) ---------- */
.mwb{display:flex;flex-direction:column;gap:14px;padding:18px 22px;max-width:1200px;margin:0 auto}
.mwb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
/* R11: the name is the heading; what it is made of reads beneath it, not
beside it competing for the same line. */
.mwb-head-l{display:flex;flex-direction:column;gap:0;min-width:0;flex:1}
.mwb-head-r{padding-top:6px}
.mwb-sep{color:var(--c-line3)}
/* R2/R3: the one big thing on the page, tracked the way only large type
should be. It is an input because the name is authored here. */
.mwb-name{font:inherit;font-size:var(--t-page);font-weight:600;letter-spacing:-.021em;line-height:1.2;
border:1px solid transparent;border-radius:var(--r-1);padding:4px 9px;margin-left:-9px;
min-width:280px;max-width:560px;color:var(--c-ink);background:transparent}
.mwb-name:hover{border-color:var(--c-line)}
.mwb-name:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent);background:var(--c-panel)}
.mwb-src{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--t-meta);color:var(--c-muted);
font-variant-numeric:tabular-nums;margin-top:7px;padding-left:1px}
.mwb-src .material-symbols-outlined{font-size:16px;color:var(--c-faint)}
.mwb-head-r{display:flex;align-items:center;gap:8px}
.mwb-cancel{font-size:var(--t-body);color:var(--c-muted);text-decoration:none;border-radius:var(--r-1);padding:0 4px}
.mwb-cancel:hover{color:var(--c-ink)}
/* R5: the one filled primary on the screen. */
.mwb-create{font:inherit;font-size:var(--t-body);font-weight:600;padding:0 13px;height:34px;border-radius:var(--r-1);
border:1px solid var(--c-accent);cursor:pointer;background:var(--c-accent);color:#fff;line-height:1}
.mwb-create:hover:not(:disabled){background:var(--c-accent-2);border-color:var(--c-accent-2)}
/* A button that cannot be pressed has to look like it: its `title` carries the
reason, and hovering for that reason only happens if it reads as blocked. */
.mwb-create:disabled{background:var(--i-8);border-color:var(--i-8);cursor:not-allowed}
/* R10: a border at rest, no shadow. */
.mwb-grid{border:1px solid var(--c-line);border-radius:var(--c-radius);overflow:hidden;background:var(--c-panel)}
/* Include · type · name (with its warehouse column beside it) · role · agg ·
what the sample says · row action. The old grid put COLUMN and DISPLAY NAME
380px apart, so the two halves of one fact were never in the same glance. */
/* The action column is 54px rather than the mock's 34px: a computed row here
carries both "edit formula" and "remove", which the mock (whose removals go
through the undo stack) did not have to fit. */
.mwb-row{display:grid;grid-template-columns:38px 24px minmax(258px,1.35fr) 122px 86px minmax(214px,1fr) 54px;
align-items:center;gap:12px;height:42px;padding:0 16px;border-bottom:1px solid var(--c-line2);
font-size:var(--t-body);position:relative;transition:background .1s}
.mwb-row:last-child{border-bottom:0}
.mwb-row-h{height:34px;background:var(--c-panel-2);border-bottom:1px solid var(--c-line)}
/* The editable display name leads; the immutable warehouse column trails it in
mono — and disappears entirely while the two are identical, so there is no
noise until there is something to say. */
.mwb-namepair{display:flex;align-items:baseline;gap:9px;min-width:0}
.mwb-namepair .mwb-fname{flex:0 1 auto;width:172px}
.mwb-namepair .mwb-col{flex:0 1 auto}
.mwb-col.is-same{visibility:hidden}
/* A dead cell is empty. Rendering a disabled "none" dropdown on every
dimension spent a column of every row saying nothing. */
.mwb-cell-dead{visibility:hidden}
/* A row the search or the source filter is not showing. It stays in the DOM
and still serializes — filtering changes what you are reading, never what
the model will contain. */
.mwb-row.is-filtered{display:none}
/* ---- bulk bar ---- */
.mwb-bulk{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--c-line2);
background:var(--c-panel);flex-wrap:wrap}
.mwb-bulk-grow{flex:1}
.mwb-search{position:relative;display:inline-flex;align-items:center}
.mwb-search .material-symbols-outlined{position:absolute;left:9px;font-size:18px;color:var(--c-faint);pointer-events:none}
.mwb-search-in{font:inherit;font-size:var(--t-body);height:32px;width:236px;padding:0 9px 0 32px;
border:1px solid var(--c-line3);border-radius:var(--r-1);background:var(--c-panel);color:var(--c-ink)}
.mwb-search-in:hover{border-color:var(--s-8)}
.mwb-search-in:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
.mwb-search-in::placeholder{color:var(--c-faint)}
/* R10: the selected segment is a plain white surface with a border, not a
floating card. Nothing at rest casts a shadow. */
.mwb-srcseg{display:inline-flex;background:var(--c-panel-3);border:1px solid var(--c-line);
border-radius:var(--r-1);padding:2px;gap:2px}
.mwb-srcseg[hidden]{display:none}
.mwb-srcseg button{font:inherit;height:28px;padding:0 12px;border:0;background:transparent;border-radius:2px;
font-size:var(--t-meta);font-weight:500;color:var(--c-muted);cursor:pointer;white-space:nowrap;line-height:1}
.mwb-srcseg button:hover{color:var(--c-ink)}
.mwb-srcseg button[aria-pressed="true"]{background:var(--c-panel);color:var(--c-ink);font-weight:600;
box-shadow:inset 0 0 0 1px var(--c-line)}
.mwb-bulk-count{font-size:var(--t-meta);color:var(--c-muted);font-variant-numeric:tabular-nums}
.mwb-bulk-count b{color:var(--c-ink);font-weight:600}
.mwb-bulk-sep{color:var(--c-line3)}
.mwb-linkbtn{border:0;background:none;padding:0;font:inherit;font-size:var(--t-meta);font-weight:600;
color:var(--c-accent);cursor:pointer;border-radius:var(--r-1)}
.mwb-linkbtn:hover{text-decoration:underline}
.mwb-linkbtn.is-muted{color:var(--c-muted)}
/* ---- per-row profile, read off the preview sample ---- */
.mwb-spark{display:flex;height:16px;width:86px;flex:none;border-radius:var(--r-1);overflow:hidden;
background:var(--c-line2);gap:1px}
.mwb-spark i{display:block;height:100%;background:var(--i-6)}
.mwb-spark i:nth-child(1){background:var(--i-9)}
.mwb-spark i:nth-child(2){background:var(--i-8)}
.mwb-spark i.rest{background:var(--s-5)}
.mwb-spark.is-mea i{background:#adddc0}
.mwb-spark.is-mea i:nth-child(1){background:#2b9a66}
.mwb-spark.is-mea i:nth-child(2){background:#5bb98b}
.mwb-prof-txt{font-size:var(--t-meta);color:var(--c-muted);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mwb-prof-txt b{font-weight:600;color:var(--c-ink2)}
.mwb-prof-null{color:var(--c-warn);font-weight:600}
.mwb-foot-note{font-size:var(--t-meta);color:var(--c-muted);line-height:1.45}
/* Nothing matched the search: say so where the rows would have been. */
.mwb-nomatch{padding:22px 16px;font-size:var(--t-body);line-height:1.6;color:var(--c-muted);max-width:70ch}
.mwb-nomatch[hidden]{display:none}
/* R5: row hover is NEUTRAL. Blue is not a hover colour, it is a meaning. */
.mwb-row:not(.mwb-row-h):hover{background:var(--c-panel-2)}
.mwb-row-off{background:var(--c-panel-2)}
.mwb-row-off .mwb-col,.mwb-row-off .mwb-fname,.mwb-row-off .mwb-ticon{opacity:.5}
.mwb-row-off:hover{background:var(--c-panel-3)}
/* One type-glyph vocabulary: # Abc date toggle fx */
.mwb-ticon{display:inline-grid;place-items:center;width:22px;height:20px;font-family:var(--mono);
font-size:var(--t-micro);font-weight:600;color:var(--c-muted);letter-spacing:.01em}
.mwb-ticon-date,.mwb-ticon-boolean{font-family:'Material Symbols Outlined';font-weight:400;font-size:17px;color:var(--c-faint)}
.mwb-col{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ink2);font-size:var(--t-meta)}
.mwb-fname{font:inherit;font-size:var(--t-body);font-weight:500;border:1px solid transparent;border-radius:var(--r-1);
padding:4px 7px;min-width:0;color:var(--c-ink);background:transparent;transition:border-color .12s,background .12s}
.mwb-fname:hover{border-color:var(--c-line);background:var(--c-panel)}
.mwb-fname:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent);background:var(--c-panel)}
/* R9: a segmented control is a control, not a lozenge. R5/R11: at rest only
the answer is drawn — fifteen bordered boxes down a fifteen-row grid is
chrome competing with the data it describes, so the control's own frame
arrives on hover, when you might use it. */
.mwb-role{display:inline-flex;align-items:center;gap:2px;border:1px solid transparent;border-radius:var(--r-1);
padding:2px;background:transparent;transition:border-color .12s,background .12s}
.mwb-row:hover .mwb-role,.mwb-role:focus-within{border-color:var(--c-line);background:var(--c-panel)}
.mwb-role button{font:inherit;font-size:var(--t-meta);padding:2px 10px;border:0;background:transparent;
cursor:pointer;border-radius:2px;color:var(--c-muted);font-weight:500;line-height:18px}
.mwb-role button:hover{color:var(--c-ink)}
.mwb-role[data-mwb-role="dimension"] [data-mwb-role-opt="dimension"]{background:var(--c-dim-bg);color:var(--c-dim);font-weight:600}
.mwb-role[data-mwb-role="measure"] [data-mwb-role-opt="measure"]{background:var(--c-mea-bg);color:var(--c-mea);font-weight:600}
/* Only a row the inference actually moved carries this. Every column starts a
dimension, so "auto" on a dimension says nothing; on a measure it says
"I guessed — check me". */
.mwb-badge-auto{font-size:var(--t-micro);font-weight:600;letter-spacing:.01em;color:var(--c-muted);
border:1px solid var(--c-line);border-radius:var(--r-1);padding:1px 6px;line-height:16px;margin-left:2px}
.mwb-agg{font:inherit;font-size:var(--t-meta);height:28px;border:1px solid var(--c-line3);border-radius:var(--r-1);
padding:0 5px;background:var(--c-panel);color:var(--c-ink2);max-width:100%}
.mwb-agg:hover{border-color:var(--s-8)}
.mwb-agg:disabled{opacity:.35}
/* R5: the include control is one of the few things allowed to be blue. */
.mwb-inc{width:20px;height:20px;border:1px solid var(--c-line3);border-radius:var(--r-1);background:var(--c-panel);
display:grid;place-items:center;cursor:pointer;color:transparent;padding:0;transition:background .1s,border-color .1s}
.mwb-inc:hover{border-color:var(--s-9)}
.mwb-inc[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.mwb-inc[aria-pressed="true"]:hover{background:var(--c-accent-2);border-color:var(--c-accent-2)}
.mwb-inc .material-symbols-outlined{font-size:16px;font-variation-settings:'wght' 600}
.mwb-chip-fx{font-family:var(--mono);font-size:var(--t-micro);color:var(--c-muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Computed field rows: same grid, formula where the column would be and
edit/remove where the aggregation would be. */
/* R5: accent as authorship. fx means "you wrote this", and that is one of the
few things allowed to be blue. */
.mwb-ticon-fx{font-family:var(--mono);font-style:italic;font-weight:600;font-size:var(--t-meta);color:var(--c-accent)}
/* R5/R12: an authored field is marked with an accent rule, not a wash. */
.mwb-row-fx{box-shadow:inset 3px 0 0 var(--i-7)}
.mwb-fx-acts{display:inline-flex;align-items:center;gap:2px;justify-self:end}
.mwb-fx-act{border:0;background:none;cursor:pointer;color:var(--c-faint);display:grid;place-items:center;padding:3px;border-radius:var(--r-1);opacity:0;transition:opacity .1s}
.mwb-row:hover .mwb-fx-act,.mwb-fx-act:focus-visible{opacity:1}
.mwb-fx-act:hover{color:var(--c-accent);background:var(--c-accent-3)}
.mwb-fx-act .material-symbols-outlined{font-size:18px}
/* A column that came from a joined source: same row, same controls. R5:
provenance is quiet metadata, never a badge — the warehouse column beside
the name simply arrives qualified by the source it came from. */
.mwb-row-joined{background:var(--c-panel)}
/* The formula of a computed row reads where the sample profile would be: it
IS what that column is, so it belongs in the column that says so. */
.mwb-prof{display:flex;align-items:center;gap:10px;min-width:0}
.mwb-prof-fx{font-family:var(--mono);font-size:var(--t-micro);color:var(--c-muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mwb-row.is-stale .mwb-prof-fx{color:var(--c-danger);text-decoration:underline wavy var(--c-danger)}
.mwb-rowact{border:0;background:none;cursor:pointer;color:var(--c-faint);display:grid;place-items:center;
border-radius:var(--r-1);padding:3px;opacity:0;transition:opacity .1s}
.mwb-row:hover .mwb-rowact,.mwb-rowact:focus-visible{opacity:1}
.mwb-rowact:hover{color:var(--c-accent);background:var(--c-accent-3)}
.mwb-rowact .material-symbols-outlined{font-size:18px}
.mwb-row.is-clash{background:var(--c-danger-bg)}
.mwb-row.is-clash .mwb-fname{border-color:var(--c-danger)}
/* A computed row whose formula names something the grid no longer has. */
.mwb-row.is-stale{background:var(--c-danger-bg)}
/* Why Create cannot be pressed yet, next to the button that cannot be pressed. */
.mwb-blocked{font-size:var(--t-meta);color:var(--c-warn-ink);max-width:420px;text-align:right;display:none;line-height:1.45}
.mwb-blocked.is-on{display:block}
/* The creator's source strip sits above the grid it feeds. */
.mwb-sources{margin-bottom:2px}
/* The one action that gives a table a local copy — always a press, never a
consequence of browsing. */
.cmb-sync-btn{align-self:flex-start;margin-top:5px;font:inherit;font-size:var(--t-meta);font-weight:600;
border:1px solid var(--c-accent-line);background:var(--c-accent-3);color:var(--c-accent-2);
border-radius:var(--r-1);padding:5px 11px;cursor:pointer}
.cmb-sync-btn:hover:not(:disabled){border-color:var(--c-accent)}
.cmb-sync-btn:disabled{opacity:.6;cursor:progress}
.mwb-foot{display:flex;align-items:center;gap:16px;min-height:42px;padding:8px 16px;background:var(--c-panel-2);border-top:1px solid var(--c-line)}
.mwb-fx-add{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:var(--t-body);font-weight:600;border:0;background:none;padding:0;cursor:pointer;color:var(--c-accent)}
.mwb-fx-add .material-symbols-outlined{font-size:18px}
.mwb-fx-add:hover{text-decoration:underline}
/* R10: the formula editor floats over the grid it references, so it is one of
the few things in here that earns elevation. */
.mwb-fx-panel{margin-top:10px;border:1px solid var(--c-line3);border-radius:var(--c-radius);background:var(--c-panel);
padding:14px 16px 16px;box-shadow:var(--elev-1)}
.mwb-fx-panel-h{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-title);font-weight:600;
color:var(--c-ink);letter-spacing:-.012em;margin-bottom:10px}
.mwb-fx-close{border:0;background:none;cursor:pointer;color:var(--c-faint);display:grid;place-items:center;border-radius:var(--r-1);padding:2px}
.mwb-fx-close:hover{color:var(--c-ink)}
.mwb-fx-close .material-symbols-outlined{font-size:18px}
.mwb-suggested{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:10px}
.mwb-chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--t-meta);border:1px solid var(--c-line);
background:var(--c-panel);border-radius:var(--r-1);padding:5px 11px 5px 9px;cursor:pointer;color:var(--c-ink2);
transition:border-color .12s,background .12s}
.mwb-chip .material-symbols-outlined{font-size:16px;color:var(--c-faint)}
.mwb-chip:hover{border-color:var(--s-8);background:var(--c-panel-2)}
.mwb-chip.is-on{background:var(--c-accent-3);border-color:var(--i-6);color:var(--c-accent-ink)}
.mwb-chip.is-on .material-symbols-outlined{color:var(--c-accent)}
.mwb-chip.is-on .mwb-chip-fx{color:var(--c-accent-2)}
.mwb-preview{border:1px solid var(--c-line);border-radius:var(--c-radius);overflow:hidden;background:var(--c-panel)}
.mwb-preview-h{display:flex;gap:12px;align-items:baseline;min-height:48px;padding:0 16px;font-size:var(--t-title);
font-weight:600;border-bottom:1px solid var(--c-line);color:var(--c-ink);letter-spacing:-.012em}
.mwb-preview-note{font-size:var(--t-meta);font-weight:400;color:var(--c-muted);font-variant-numeric:tabular-nums;letter-spacing:0}
.mwb-preview-scroll{overflow:auto;max-height:390px}
/* R9: no radius on data cells — a table is a grid, not a stack of cards. */
.mwb-preview-tbl{border-collapse:separate;border-spacing:0;font-size:var(--t-data);width:100%}
.mwb-preview-tbl th{position:sticky;top:0;z-index:2;background:var(--c-panel-2);text-align:left;padding:8px 14px;
border-bottom:1px solid var(--c-line);white-space:nowrap;color:var(--c-ink);font-weight:600;vertical-align:bottom}
.mwb-preview-tbl td{padding:8px 14px;border-bottom:1px solid var(--c-line2);white-space:nowrap;color:var(--c-ink2);
font-variant-numeric:tabular-nums}
.mwb-preview-tbl tr:last-child td{border-bottom:0}
.mwb-preview-note.is-err{color:var(--c-danger);font-weight:600}
/* A source with no rows is a fact, not a failure: it reads as prose in the
table's own body rather than as an error over it. */
.mwb-pv-empty{padding:26px 18px;font-size:var(--t-body);line-height:1.65;color:var(--c-muted);max-width:80ch}
.mwb-preview-note .mwb-linkbtn{margin-left:6px}
/* ---- the preview as a live projection of the model being authored ---- */
.mwb-pv-h{display:flex;flex-direction:column;gap:2px}
.mwb-pv-name{font-size:var(--t-data);font-weight:600;color:var(--c-ink);display:flex;align-items:center;gap:6px}
.mwb-pv-src{font-size:var(--t-micro);font-weight:400;color:var(--c-muted)}
.mwb-pv-src.is-same{visibility:hidden}
.mwb-pv-off{font-size:15px;color:var(--c-faint)}
/* An excluded column is GREYED IN PLACE, never dropped: you can see what you
gave up, and putting it back is one click away in the row it came from. */
.mwb-preview-tbl td.is-off{background:var(--c-panel-2);color:var(--c-faint)}
.mwb-preview-tbl th.is-off{background:var(--c-panel-3)}
.mwb-preview-tbl th.is-off .mwb-pv-name{color:var(--c-muted);font-weight:500;
text-decoration:line-through;text-decoration-color:var(--s-8)}
/* Authored columns are appended and read as authored (R5: fx is blue). */
.mwb-preview-tbl td.is-fx{background:var(--c-accent-soft)}
.mwb-preview-tbl th.is-fx{background:var(--c-accent-3)}
.mwb-preview-tbl th.is-fx .mwb-pv-name{color:var(--c-accent-ink)}
.mwb-preview-tbl td.is-null{color:var(--c-faint);font-style:italic}
.mwb-preview-tbl td.is-nodata{color:var(--c-faint)}
/* R12: THE BINDING — the one loud thing on this page. Hover a field row and
its column lights up here; hover a column header and its row lights up
there. It is what makes the grid and the projection one object. */
.mwb-preview-tbl td{transition:background .1s}
.mwb-preview-tbl td.is-hot{background:var(--c-accent-3)}
.mwb-preview-tbl th.is-hot{background:var(--c-accent-bg);box-shadow:inset 0 -3px 0 var(--c-accent)}
.mwb-preview-tbl th.is-hot .mwb-pv-name{color:var(--c-accent-ink)}
.mwb-row.is-hot{background:var(--c-accent-3)}
.mwb-row.is-hot::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-accent)}
.mwb-row.is-hot .mwb-fname{color:var(--c-accent-ink);font-weight:600}
.mwb-row.is-hot.mwb-row-fx{box-shadow:none}
/* ===== The edit state of the grid ===================================== */
/* Room at the foot of every workbench page for the lifecycle bar to slide
over without covering the last thing on it — on the model page, that last
thing is the delete. */
.mwb{padding-bottom:86px}
/* What reads this model, said before anything here is renamed or hidden.
R5: neutral surface, accent icon — this is context, not a warning. */
.dm-usedby{display:flex;align-items:center;gap:10px;font-size:var(--t-meta);color:var(--c-ink2);
background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:var(--r-1);padding:10px 13px}
.dm-usedby .material-symbols-outlined{font-size:18px;color:var(--c-accent);flex:none}
.dm-usedby b{font-weight:600;color:var(--c-ink)}
/* Columns a composite's definition owns: locked, and told why. The lock is
quiet — this is not a refusal, it is a fact about where the name lives. */
.mwb-managed-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 16px;
font-size:var(--t-meta);line-height:1.5;color:var(--c-ink2);background:var(--c-panel-2);
border-bottom:1px solid var(--c-line)}
.mwb-managed-note .material-symbols-outlined{font-size:16px;color:var(--c-faint);flex:none;margin-top:1px}
.mwb-managed-note b{color:var(--c-ink);font-weight:600}
.mwb-row.is-managed .mwb-fname{background:transparent;border-color:transparent;color:var(--c-ink2);cursor:default}
.mwb-row.is-managed .mwb-fname:hover{border-color:transparent}
.mwb-role.is-locked{display:inline-flex;align-items:center;gap:6px;border-color:transparent;padding:2px}
.mwb-role-fixed{font-size:var(--t-meta);color:var(--c-muted);padding:2px 8px;border-radius:var(--r-1);
background:var(--c-panel-3)}
.mwb-role[data-mwb-role="dimension"] .mwb-role-fixed{background:var(--c-dim-bg);color:var(--c-dim)}
.mwb-role[data-mwb-role="measure"] .mwb-role-fixed{background:var(--c-mea-bg);color:var(--c-mea)}
.mwb-lock{font-size:14px;color:var(--c-faint)}
.mwb-agg-fixed{font-size:var(--t-meta);color:var(--c-muted);padding-left:2px}
/* Destructive acts are separated. Delete used to sit in the top bar one button
away from Save, styled identically; here it is at the bottom of the page in
its own tier, with the blast radius stated before the press. */
.dm-danger{margin-top:14px;border:1px solid var(--c-danger-line);border-radius:var(--c-radius);
background:var(--c-danger-bg);padding:14px 16px;display:flex;align-items:center;gap:16px}
.dm-danger-b{flex:1;min-width:0}
.dm-danger h4{margin:0 0 3px;font-size:var(--t-body);font-weight:600;color:var(--c-danger-ink)}
.dm-danger p{margin:0;font-size:var(--t-meta);color:var(--c-danger-ink);opacity:.92;line-height:1.5}
.dm-danger form{margin:0}
.wbench .btn.danger{background:var(--c-panel);border-color:var(--c-danger-line);color:var(--c-danger-ink);
display:inline-flex;align-items:center;gap:6px;font-weight:600}
.wbench .btn.danger:hover{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
.wbench .btn.danger .material-symbols-outlined{font-size:17px}
/* ===== The lifecycle bar — what is pending, and how to take it back =====
R10 said nothing at rest casts a shadow. This is the sanctioned exception:
the bar floats over the page it is counting, so it has to read as floating,
and the shadow falls UPWARD because the light it interrupts is below it.
It is off-screen (translated, not display:none) until there is something to
say, so it slides in rather than appearing. */
.mwb-dirty{
position:fixed;left:var(--wb-side,198px);right:0;bottom:var(--wb-foot,40px);z-index:40;
display:flex;align-items:center;gap:16px;height:58px;padding:0 24px;
background:var(--c-panel);border-top:1px solid var(--c-line3);
box-shadow:0 -8px 24px -14px rgba(28,32,36,.28);
transform:translateY(calc(100% + var(--wb-foot,40px)));transition:transform .18s ease;
}
.mwb-dirty.is-on{transform:none}
.mwb-dirty-grow{flex:1}
/* The one warm dot in the workbench: pending is not an error and not a
success, and the semantic tier has a step for exactly that. */
.mwb-dirty-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--c-warn-line);
border:1px solid var(--c-warn);flex:none}
.mwb-dirty-txt{font-size:var(--t-body);color:var(--c-ink)}
.mwb-dirty-txt b{font-weight:600;font-variant-numeric:tabular-nums}
.mwb-dirty-list{
position:absolute;bottom:calc(100% + 10px);left:24px;width:420px;max-height:290px;overflow:auto;
background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r-2);
box-shadow:var(--c-shadow-pop);padding:8px;
}
.mwb-dirty-list[hidden]{display:none}
.mwb-dirty-list h4{margin:0 0 6px;padding:4px 6px;font-size:var(--t-micro);font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.mwb-dirty-list ul{margin:0;padding:0}
.mwb-dirty-list li{list-style:none;font-size:var(--t-meta);color:var(--c-ink2);padding:6px;
border-radius:var(--r-1);line-height:1.45}
.mwb-dirty-list li:nth-child(odd){background:var(--c-panel-2)}
.mwb-dirty-list li b{color:var(--c-ink);font-weight:600}
.mwb-dirty-list li code{font-size:var(--t-meta);color:var(--c-ink)}
/* The guard: the only modal in the workbench, and it exists because the
alternative is losing the work silently. */
.mwb-guard-back{position:fixed;inset:0;background:rgba(22,27,38,.4);z-index:100;display:grid;place-items:center}
.mwb-guard-back[hidden]{display:none}
.mwb-guard{width:440px;max-width:calc(100vw - 32px);background:var(--c-panel);border-radius:var(--r-2);
box-shadow:var(--c-shadow-pop);padding:22px 24px}
.mwb-guard h3{margin:0 0 10px;font-size:var(--t-head);font-weight:600;letter-spacing:-.014em;color:var(--c-ink)}
.mwb-guard p{margin:0 0 20px;font-size:var(--t-body);line-height:1.55;color:var(--c-ink2)}
.mwb-guard p b{font-variant-numeric:tabular-nums}
.mwb-guard-acts{display:flex;gap:8px;justify-content:flex-end}
/* ===== Combine workbench (composite models) — the .mwb-* family ===== */
/* The strip reads left-to-right as the join itself, so it scrolls rather than
wrapping: a wrapped strip would put "A ⋈ B" on two lines and lose the shape. */
.cmb-strip-wrap{overflow:visible;padding:2px}
.cmb-strip{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;min-height:56px}
.cmb-chip{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;padding:9px 14px;border:1px solid var(--c-line);
border-radius:var(--c-radius);background:var(--c-panel);text-align:left}
.cmb-chip-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmb-chip-name{font-size:var(--t-body);font-weight:600;color:var(--c-ink);white-space:nowrap;line-height:1.25}
.cmb-chip-sub{font-size:var(--t-meta);color:var(--c-muted);white-space:nowrap;line-height:1.3;font-variant-numeric:tabular-nums}
/* R5: the primary source is marked by an accent RULE, not an accent wash. */
.cmb-chip-primary{border-left:3px solid var(--c-accent);padding-left:12px}
.cmb-chip-joined{cursor:pointer;transition:border-color .12s,background .12s}
.cmb-chip-joined:hover{border-color:var(--s-8);background:var(--c-panel-2)}
.cmb-chip.is-editing{border-color:var(--c-accent);box-shadow:inset 0 0 0 1px var(--c-accent)}
/* A member the composition still names but the server will not accept. */
.cmb-chip.is-stale{border-color:var(--c-warn-line);background:var(--c-warn-bg)}
.cmb-chip.is-stale .cmb-chip-name{color:var(--c-ink)}
.cmb-chip.is-stale .cmb-chip-sub{color:var(--c-warn-ink)}
.cmb-chip-empty{border-style:dashed;gap:12px}
.cmb-chip-ghost{border-style:dashed;opacity:.7}
.cmb-chip-act{border:0;background:none;cursor:pointer;color:var(--c-faint);display:grid;place-items:center;padding:3px;border-radius:var(--r-1)}
.cmb-chip-act:hover{color:var(--c-accent);background:var(--c-accent-3)}
.cmb-chip-act .material-symbols-outlined{font-size:16px}
.cmb-chip-add{font:inherit;font-size:var(--t-body);font-weight:500;color:var(--c-muted);border-style:dashed;
border-color:var(--c-line3);background:transparent;cursor:pointer;gap:4px}
.cmb-chip-add:hover:not(:disabled){border-color:var(--s-8);background:var(--c-panel-2);color:var(--c-ink)}
.cmb-chip-add:disabled{color:var(--c-faint);cursor:not-allowed}
.cmb-chip-add .material-symbols-outlined{font-size:18px}
/* The ⋈ badge is the join: type, keys and match live in its caption + title. */
.cmb-badge{align-self:center;flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:3px;
font:inherit;border:0;background:none;cursor:pointer;color:var(--c-muted);padding:0 4px}
.cmb-badge-glyph{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--c-line);border-radius:var(--r-full);
background:var(--c-panel);font-size:var(--t-data);line-height:1}
.cmb-badge:hover .cmb-badge-glyph{border-color:var(--c-accent);color:var(--c-accent)}
.cmb-badge:hover .cmb-badge-cap{color:var(--c-accent)}
.cmb-badge-cap{letter-spacing:.05em}
.cmb-badge.is-unset .cmb-badge-glyph{border-style:dashed;color:var(--c-warn);border-color:var(--c-warn-line)}
.cmb-badge.is-unset .cmb-badge-cap{color:var(--c-warn-ink)}
.cmb-badge.is-weak .cmb-badge-glyph{border-color:var(--c-warn-line);color:var(--c-warn)}
/* Join panel — same shell as the formula editor's inline panel. */
.cmb-panel{margin-top:10px;border:1px solid var(--c-line3);border-radius:var(--c-radius);background:var(--c-panel);
padding:14px 16px 16px;box-shadow:var(--elev-1)}
/* Decisions left, the evidence they rest on right — read together, and the
panel stays short enough that its primary action is still on screen. Below
about 700px the two columns become one, with no media query to keep in sync
(the panel's width is not the viewport's). */
.cmb-panel-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:9px 20px;align-items:start}
.cmb-panel-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.cmb-panel-f{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--c-line)}
.cmb-grow{flex:1 1 auto}
/* R10/destructive separation: the remove is danger-tiered, never a default button. */
.cmb-remove{font:inherit;font-size:var(--t-body);border:1px solid var(--c-danger-line);background:var(--c-panel);
border-radius:var(--r-1);height:34px;padding:0 13px;cursor:pointer;color:var(--c-danger)}
.cmb-remove:hover{border-color:var(--c-danger);background:var(--c-danger-bg)}
.cmb-lbl{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.cmb-lbl-note{text-transform:none;letter-spacing:0;font-size:var(--t-meta);font-weight:400;color:var(--c-muted)}
.cmb-keys{display:flex;flex-direction:column;gap:6px}
.cmb-key{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 30px;align-items:center;gap:8px}
.cmb-key-sel{font:inherit;font-size:var(--t-body);height:34px;border:1px solid var(--c-line3);border-radius:var(--r-1);
padding:0 8px;background:var(--c-panel);color:var(--c-ink);min-width:0}
.cmb-key-sel:hover:not(:disabled){border-color:var(--s-8)}
.cmb-key-sel:disabled{opacity:.4}
.cmb-key-eq{text-align:center;color:var(--c-faint);font-size:var(--t-body)}
.cmb-key-x{border:0;background:none;cursor:pointer;color:var(--c-faint);display:grid;place-items:center;border-radius:var(--r-1);padding:3px}
.cmb-key-x:hover:not(:disabled){color:var(--c-danger);background:var(--c-danger-bg)}
.cmb-key-x:disabled{opacity:.25;cursor:not-allowed}
.cmb-key-x .material-symbols-outlined{font-size:16px}
/* Match evidence: the number, then how it was measured, then the caveat. */
.cmb-stat-wrap{margin:0}
.cmb-stat{display:flex;flex-direction:column;gap:3px;font-size:var(--t-meta);color:var(--c-ink2);line-height:1.5}
.cmb-stat.is-idle,.cmb-stat.is-idle .cmb-stat-line{color:var(--c-muted)}
.cmb-stat code{font-family:var(--mono);font-size:var(--t-meta);background:var(--c-panel-2);border:1px solid var(--c-line);
border-radius:2px;padding:0 4px}
.cmb-stat-note{font-size:var(--t-meta);color:var(--c-muted)}
.cmb-stat.is-ok .cmb-stat-line b{color:var(--c-ok)}
.cmb-stat.is-weak .cmb-stat-line b{color:var(--c-warn)}
.cmb-stat-warn{font-size:var(--t-meta);color:var(--c-warn-ink);line-height:1.5}
.cmb-stat.is-err{color:var(--c-danger)}
.cmb-stat .fcombo-spinner{display:inline-block;vertical-align:-2px;margin-right:5px}
/* ---- Join evidence v2 -------------------------------------------------
Three blocks, in the order the questions occur to an author: how much
matched on EACH side, which values missed, and what the join does to
the row count. Bordered at rest like every other workbench surface. */
.cmb-ev{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.cmb-ev-block{display:flex;flex-direction:column;gap:7px}
.cmb-ev-h{font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.cmb-sides{display:flex;flex-direction:column;gap:9px}
.cmb-side{display:flex;flex-direction:column;gap:4px}
.cmb-side-top{display:flex;align-items:baseline;gap:10px;font-size:var(--t-meta);color:var(--c-ink2)}
.cmb-side-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmb-side-name code{font-family:var(--mono);font-size:var(--t-meta);font-variant-numeric:slashed-zero;
background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:var(--r-1);padding:0 4px}
.cmb-side-num{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;color:var(--c-muted)}
.cmb-side-num b{color:var(--c-ink)}
.cmb-bar{display:flex;height:8px;border-radius:var(--r-full);overflow:hidden;background:var(--c-panel-2)}
.cmb-bar-m{background:var(--c-accent)}
.cmb-bar-b .cmb-bar-m{background:var(--i-8)}
.cmb-bar-u{background:var(--c-warn-line)}
.cmb-bar-key{display:flex;align-items:center;gap:12px;font-size:var(--t-micro);color:var(--c-muted)}
.cmb-bar-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.cmb-sw-m{background:var(--c-accent)}
.cmb-sw-u{background:var(--c-warn-line)}
.cmb-bar-note{margin-left:auto;text-align:right}
/* The values that missed. Mono with slashed zeros because telling S0087
from S87 — and 0 from O — is the entire reason this block exists. */
.cmb-unm{border:1px solid var(--c-warn-line);border-radius:var(--r-1);background:var(--c-warn-bg);padding:11px 12px}
.cmb-unm.is-ok{display:flex;align-items:center;gap:8px;border-color:var(--c-ok-line);background:var(--c-ok-bg);
color:var(--c-ok-ink);font-size:var(--t-meta)}
.cmb-unm.is-ok .material-symbols-outlined{font-size:17px;color:var(--c-ok);flex:none}
.cmb-unm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmb-unm-side{min-width:0}
.cmb-unm-side h5{margin:0 0 6px;font-size:var(--t-micro);font-weight:600;color:var(--c-warn-ink);
font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmb-unm-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.cmb-unm-side li{font-family:var(--mono);font-size:var(--t-data);font-variant-numeric:slashed-zero tabular-nums;
color:var(--c-ink);background:var(--c-panel);border:1px solid var(--c-warn-line);border-radius:var(--r-1);
padding:2px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmb-unm-blank{color:var(--c-muted);font-style:italic}
.cmb-unm-none{margin:0;font-size:var(--t-meta);color:var(--c-muted)}
/* What the join does to the row count. */
.cmb-fan{display:flex;align-items:flex-start;gap:9px;font-size:var(--t-meta);line-height:1.55;
border:1px solid var(--c-line);border-radius:var(--r-1);padding:10px 12px}
.cmb-fan .material-symbols-outlined{font-size:18px;flex:none}
.cmb-fan.is-ok{border-color:var(--c-ok-line);background:var(--c-ok-bg);color:var(--c-ok-ink)}
.cmb-fan.is-ok .material-symbols-outlined{color:var(--c-ok)}
.cmb-fan.is-bad{border-color:var(--c-danger-line);background:var(--c-danger-bg);color:var(--c-danger-ink)}
.cmb-fan.is-bad .material-symbols-outlined{color:var(--c-danger)}
.cmb-fan code{font-family:var(--mono);font-size:var(--t-meta);font-variant-numeric:slashed-zero}
.cmb-fan-num{display:block;font-size:var(--t-body);font-variant-numeric:tabular-nums;margin-bottom:3px}
.cmb-fan-num s{color:var(--c-muted)}
.cmb-fan b,.cmb-fan-num b{font-variant-numeric:tabular-nums}
/* ---- Ranked key suggestions -------------------------------------------
The two-dropdown guessing game, replaced by three measured chips. */
.cmb-sug-wrap{display:flex;flex-direction:column;gap:6px}
.cmb-sug{display:flex;flex-direction:column;gap:5px}
.cmb-sug-i{display:flex;align-items:center;gap:10px;width:100%;font:inherit;text-align:left;cursor:pointer;
border:1px solid var(--c-line);border-radius:var(--r-1);background:var(--c-panel);padding:8px 10px;
color:var(--c-ink2);transition:border-color .12s,background .12s}
.cmb-sug-i:hover{border-color:var(--s-8);background:var(--c-panel-2)}
.cmb-sug-i.is-on{border-color:var(--c-accent);background:var(--c-accent-3);box-shadow:inset 0 0 0 1px var(--c-accent)}
.cmb-sug-rank{flex:none;width:20px;height:20px;border-radius:var(--r-full);display:grid;place-items:center;
font-size:var(--t-micro);font-weight:600;font-variant-numeric:tabular-nums;
background:var(--c-panel-2);border:1px solid var(--c-line);color:var(--c-muted)}
.cmb-sug-i.is-on .cmb-sug-rank{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.cmb-sug-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.cmb-sug-keys{font-family:var(--mono);font-size:var(--t-data);font-variant-numeric:slashed-zero;color:var(--c-ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmb-sug-keys em{font-style:normal;color:var(--c-faint);margin:0 6px}
.cmb-sug-meta{font-size:var(--t-micro);color:var(--c-muted);font-variant-numeric:tabular-nums}
.cmb-sug-fan{color:var(--c-danger);font-weight:600}
.cmb-sug-pct{flex:none;font-size:var(--t-meta);font-weight:600;font-variant-numeric:tabular-nums}
.cmb-sug-pct.is-ok{color:var(--c-ok)}
.cmb-sug-pct.is-weak{color:var(--c-warn)}
/* Join type as two venns with plain-language captions. */
.cmb-jtypes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cmb-jt{display:flex;align-items:center;gap:12px;font:inherit;font-size:var(--t-meta);text-align:left;cursor:pointer;
border:1px solid var(--c-line);border-radius:var(--r-1);background:var(--c-panel);padding:12px 14px;color:var(--c-ink2);
transition:border-color .12s,background .12s}
.cmb-jt:hover{border-color:var(--s-8);background:var(--c-panel-2)}
.cmb-jt.is-on{border-color:var(--c-accent);background:var(--c-accent-3);box-shadow:inset 0 0 0 1px var(--c-accent)}
.cmb-jt-cap{line-height:1.55}
.cmb-venn{width:34px;height:21px;flex:0 0 auto}
.cmb-venn-o{fill:none;stroke:var(--s-9);stroke-width:1.5}
.cmb-venn-fill{fill:var(--s-9);opacity:.28}
.cmb-jt.is-on .cmb-venn-o{stroke:var(--c-accent)}
.cmb-jt.is-on .cmb-venn-fill{fill:var(--c-accent);opacity:.3}
/* Fields region — one group per member, primary first. */
.cmb-fields{display:flex;flex-direction:column;gap:14px}
.cmb-fields-empty{border:1px dashed var(--c-line3);border-radius:var(--c-radius);padding:20px;font-size:var(--t-body);
line-height:1.6;color:var(--c-muted);background:var(--c-panel)}
.cmb-fgroup{border:1px solid var(--c-line);border-radius:var(--c-radius);overflow:hidden;background:var(--c-panel)}
.cmb-fgroup-h{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 16px;background:var(--c-panel);
border-bottom:1px solid var(--c-line)}
.cmb-fgroup-name{font-size:var(--t-title);font-weight:600;color:var(--c-ink);letter-spacing:-.012em}
.cmb-fgroup-tag{border:1px solid var(--c-line);border-radius:var(--r-1);padding:1px 6px;line-height:16px}
.cmb-fgroup-count{font-size:var(--t-meta);color:var(--c-muted);font-variant-numeric:tabular-nums}
.cmb-fgroup-all{font:inherit;font-size:var(--t-meta);font-weight:600;border:0;background:none;cursor:pointer;color:var(--c-accent);padding:0}
.cmb-fgroup-all:hover{text-decoration:underline}
.cmb-frow{display:grid;grid-template-columns:34px 22px minmax(110px,1fr) 16px minmax(120px,1fr) minmax(0,1.1fr);
align-items:center;gap:8px;height:42px;padding:0 16px;border-bottom:1px solid var(--c-line2);font-size:var(--t-body)}
.cmb-frow:last-child{border-bottom:0}
.cmb-frow:hover{background:var(--c-panel-2)}
.cmb-frow.is-off{background:var(--c-panel-2)}
.cmb-frow.is-off .cmb-fname,.cmb-frow.is-off .mwb-ticon{opacity:.5}
.cmb-fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ink2);font-size:var(--t-meta)}
.cmb-arrow{color:var(--c-faint);font-size:var(--t-meta);text-align:center}
.cmb-frow.is-clash .mwb-fname{border-color:var(--c-danger);background:var(--c-danger-bg)}
.cmb-ferr{font-size:var(--t-meta);color:var(--c-danger);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The known-option picker: fcombo chrome, sized for this page. */
.cmb-pick{min-width:220px}
.cmb-pick .fcombo-btn{padding:0 9px;height:34px;font-size:var(--t-body);border-radius:var(--r-1)}
.cmb-opt-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.cmb-opt-sub{font-size:var(--t-meta);color:var(--c-muted);font-weight:400}
/* ===== Print / Export-to-PDF (snapshot board) ===== */
@media print {
@page { size: A4 landscape; margin: 11mm; }
html, body { background: #fff !important; }
body.admin-shell-body { overflow: visible !important; }
/* keep colors/gradients in the PDF */
body, .tile, .tile-head, .pc-svg, .board, .board-grid { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* hide the app chrome */
.bi-sidenav, .bi-topbar, .bi-footerbar { display: none !important; }
.mwb-dirty, .mwb-guard-back { display: none !important; }
.bi-app-shell, .bi-main { display: block !important; height: auto !important; overflow: visible !important; }
.viewport { overflow: visible !important; padding: 0 !important; height: auto !important; }
/* board: hide interactive-only bits */
.fpanel, .fpanel-scrim, .st, .pv-load, .bf-add, .fbtn { display: none !important; }
.tile-acts, .tile-resize { display: none !important; }
.dash-tabs { display: none !important; }
.dash-head { border-bottom: 2px solid var(--c-ink); margin-bottom: 12px; }
/* keep a compact active-filter summary */
.board-filterbar { display: flex !important; margin-bottom: 12px; }
.fchips { display: flex !important; }
/* tiles: no shadow, never split across pages */
.tile { box-shadow: none !important; border: 1px solid #d7dadf !important; break-inside: avoid; page-break-inside: avoid; }
.board-grid { gap: 9px !important; }
/* ---- Student record → PDF (its own portrait page) ---- */
.sr { page: student; }
.pub-head, .pub-footer, .sr-topbar, .sr-note-form, .sr-note-del-f, .sr-noprint { display: none !important; }
.pub-wrap.sr { padding: 0 !important; max-width: none !important; }
.sr-sheet { box-shadow: none !important; border: none !important; padding: 0 !important; }
.sr-sec, .sr-note { break-inside: avoid; page-break-inside: avoid; }
.sr-ledger summary { list-style: none; }
.sr-scroll { max-height: none !important; overflow: visible !important; border: none !important; }
.sr-mast, .sr-tag, .sr-stat, .sr-lvl { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page student { size: letter portrait; margin: 0.5in 0.45in; }
/* ===== CR student-data ===== */
/* Horizontal-scroll roster table with sticky first column */
.stu-roster-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.stu-roster-scroll .stu-table{width:max-content;min-width:100%}
/* Sticky student-name column */
.stu-roster-scroll .stu-table th.stu-th-sticky,
.stu-roster-scroll .stu-table td:first-child{
position:sticky;left:0;z-index:2;
background:var(--c-canvas);
}
.stu-roster-scroll .stu-table tbody tr:hover td:first-child,
.stu-roster-scroll .stu-table tbody .stu-row:hover td:first-child{
background:var(--c-accent-bg);
}
.stu-roster-scroll .stu-table tbody .stu-row:focus td:first-child{
background:var(--c-accent-bg);
box-shadow:inset 0 0 0 1px var(--brand-primary,#2f64d6);
}
/* Sticky header stays above sticky cells */
.stu-roster-scroll .stu-table th.stu-th-sticky{z-index:3}
/* Sort link — inherits header style, no underline */
.stu-sort-link{
color:inherit;text-decoration:none;display:inline-flex;align-items:center;
gap:3px;white-space:nowrap;cursor:pointer;
}
.stu-sort-link:hover{color:var(--brand-primary,#2f64d6)}
/* Active sort column header highlight */
.stu-table th.stu-th-sorted{color:var(--brand-primary,#2f64d6)}
.stu-table th.stu-th-sorted .stu-sort-link{color:var(--brand-primary,#2f64d6)}
/* Metric columns — right-align numbers, slight visual separation */
.stu-table th.stu-th-metric{
text-align:right;border-left:1px solid var(--c-line2);
background:var(--c-canvas);
}
.stu-table td.stu-td-metric{
text-align:right;border-left:1px solid var(--c-line2);
font-family:var(--mono,ui-monospace,monospace);font-size:12px;
color:var(--c-ink2);
}
/* ===== CR wave2 · board ===== */
/* Item 1 (gid 1215798189858884) — data-last-updated stamp. An unobtrusive
footer on each metric card showing when Pluvoir last pulled its data. */
.tile-foot{
flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;
padding:3px 12px 4px;border-top:1px solid var(--border-2,#e2e2e6);
}
.tile-updated{
display:inline-flex;align-items:center;gap:4px;
font-size:10px;line-height:1;letter-spacing:.01em;color:var(--muted,#83838c);
font-variant-numeric:tabular-nums;cursor:default;white-space:nowrap;
}
.tile-updated svg{opacity:.68;flex-shrink:0}
.tile-section-marker{display:none!important}
/* ===== Board metadata primitives: tabbed + MD3-style published boards ===== */
.board-topdock{
position:sticky;top:var(--pub-head-h,0px);z-index:50;background:var(--c-bg,#fafbfe);padding-top:8px
}
.board-topdock .board-filter-shelf,.board-topdock .board-filterbar,.board-topdock .board-tabs{
position:static;top:auto;z-index:auto
}
/* Panel-style filters become a compact sticky toolbar. Remove the original
page-flow margin from inside the dock and give the pinned region balanced
breathing room plus an opaque surface over scrolling cards. */
.pub-wrap[data-filter-style="panel"] .board-topdock{
padding:7px 0 9px;margin:0 0 14px;
background:color-mix(in srgb,var(--c-canvas,#f7f8fa) 96%,#fff);
box-shadow:0 10px 14px -16px rgba(20,25,40,.42)
}
.pub-wrap[data-filter-style="panel"] .board-filterbar{
min-height:44px;margin:0;padding:6px 8px;gap:8px;
background:var(--c-panel,#fff);border:1px solid var(--c-line,#dfe3e9);border-radius:8px;
box-shadow:0 1px 2px rgba(20,25,40,.04)
}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fbtn{
flex:0 0 auto;min-height:34px;padding:7px 12px;box-shadow:none
}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fchips{
flex:1;min-width:0;gap:6px
}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fchip{
min-height:32px;padding:5px 5px 5px 10px;box-shadow:none;
background:color-mix(in srgb,var(--brand-primary,#2f64d6) 4%,#fff)
}
.pub-wrap[data-filter-style="panel"] .board-topdock:has(.board-tabs){padding-bottom:0}
.pub-wrap[data-filter-style="panel"] .board-topdock .board-tabs{margin-top:8px}
@media(max-width:760px){
.pub-wrap[data-filter-style="panel"] .board-topdock{padding:5px 0 7px;margin-bottom:10px}
.pub-wrap[data-filter-style="panel"] .board-filterbar{min-height:42px;padding:5px 6px;flex-wrap:nowrap}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fchips{
flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:1px 0
}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fchips::-webkit-scrollbar{display:none}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fchip{flex:0 0 auto}
}
.board-tabs{
display:flex;gap:0;border-bottom:1px solid var(--c-line,#e3e5e9);margin:12px 0 0;
position:sticky;top:var(--pub-head-h,0px);z-index:28;background:var(--c-bg,#fafbfe);padding-top:4px
}
.board-tab{
flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:160px;
border:0;background:transparent;color:var(--c-muted,#6b7280);cursor:pointer;
padding:12px 22px 14px;border-radius:12px 12px 0 0;position:relative;font:inherit
}
.board-tab:hover{background:rgba(47,100,214,.07)}
.board-tab b{font-size:15px;font-weight:600;line-height:1.15}
.board-tab span{font-size:12px;line-height:1.2}
.board-tab.on{color:var(--brand-primary,#2f64d6)}
.board-tab.on::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand-primary,#2f64d6)}
.board-spy{
position:sticky;top:calc(var(--pub-head-h,0px) + var(--board-dock-h,58px));z-index:40;background:var(--c-bg,#fafbfe);
display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 12px;box-shadow:0 8px 8px -8px rgba(16,24,40,.10)
}
.board-spy[hidden]{display:none}
.board-spy a{
font-size:13px;font-weight:500;color:var(--c-muted,#6b7280);padding:8px 16px;border-radius:8px;
border:1px solid var(--c-line,#e3e5e9);background:#fff;text-decoration:none;transition:all .12s
}
.board-spy a:hover{background:rgba(47,100,214,.07);color:var(--brand-primary,#2f64d6)}
.board-spy a.on{background:var(--brand-primary,#2f64d6);color:#fff;border-color:var(--brand-primary,#2f64d6);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.board-filter-shelf{
display:flex;flex-direction:column;gap:0;position:sticky;top:var(--pub-head-h,0px);z-index:30
}
.board-filter-shelf-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.board-filter-shelf-head>span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted,#6b7280)}
.board-filter-shelf-controls{display:flex;gap:0;row-gap:12px;align-items:flex-end;flex-wrap:wrap}
.board-filter-shelf .fchips{justify-content:flex-end}
.board-filter-shelf-chips{
width:100%;justify-content:flex-start!important;margin-top:9px;padding-top:9px;
border-top:1px solid var(--c-line2,#e8ebf0)
}
.board-filter-shelf .fctl{min-width:0;display:flex;align-items:center;gap:8px}
.board-filter-shelf .fctl-head{margin:0}
.board-filter-shelf .fcombo-pop{z-index:45}
.board-filter-hint{font-size:12px;color:var(--c-muted,#43474E);margin-left:auto;max-width:320px;line-height:1.45}
/* In-depth shelf boards keep the full controls and tabs in normal document flow.
Only active filters get a compact sticky summary, preserving chart viewport. */
.pub-wrap[data-filter-style="shelf"] .board-topdock{
position:relative;top:auto;z-index:55;overflow:visible
}
.pub-wrap[data-filter-style="shelf"] .board-filter-shelf,
.pub-wrap[data-filter-style="shelf"] .board-filter-shelf-controls{overflow:visible}
.board-sticky-filters{
position:sticky;top:var(--pub-head-h,0px);z-index:50;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
margin:0 0 10px;padding:8px 12px;
background:#F3F5F9;border:1px solid #C7CBD2;border-radius:16px;
box-shadow:0 4px 10px rgba(16,24,40,.08);
animation:board-sticky-in .16s ease-out both
}
.board-sticky-filters[hidden]{display:none}
@keyframes board-sticky-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.board-sticky-view{min-width:190px;padding-right:12px;border-right:1px solid #C7CBD2;display:flex;flex-direction:column;gap:3px}
.board-sticky-view span,.board-sticky-filter-label{
font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-primary,#1C75BC);white-space:nowrap
}
.board-sticky-view strong{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:#1A1C1E}
.board-sticky-tab-select{position:relative;min-width:0}
.board-sticky-tab-toggle{
display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:32px;
padding:5px 8px 5px 10px;border:1px solid #C7CBD2;border-radius:7px;background:#fff;color:#1A1C1E;
font:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.04)
}
.board-sticky-tab-toggle:hover,.board-sticky-tab-toggle[aria-expanded="true"]{border-color:var(--brand-primary,#1C75BC);background:#F8FCFE}
.board-sticky-tab-toggle svg{flex:none;color:var(--brand-primary,#1C75BC);transition:transform .14s ease}
.board-sticky-tab-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.board-sticky-tab-menu{
position:absolute;top:calc(100% + 6px);left:0;z-index:3;width:max-content;min-width:100%;max-width:300px;
padding:5px;border:1px solid #C7CBD2;border-radius:8px;background:#fff;
box-shadow:0 10px 28px rgba(16,24,40,.16)
}
.board-sticky-tab-menu[hidden]{display:none}
.board-sticky-tab-option{
position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
padding:8px 30px 8px 10px;border:0;border-radius:5px;background:transparent;color:#43474E;
font:inherit;text-align:left;white-space:nowrap;cursor:pointer
}
.board-sticky-tab-option>span{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:inherit}
.board-sticky-tab-option small{font-size:10.5px;font-weight:400;color:#73777F}
.board-sticky-tab-option:hover{background:#F3F5F9;color:var(--brand-primary,#1C75BC)}
.board-sticky-tab-option.is-active{background:#CDEBF9;color:#06384B}
.board-sticky-tab-option.is-active::after{content:"✓";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:var(--brand-primary,#1C75BC)}
.board-sticky-selection{min-width:0;display:flex;align-items:center;gap:8px}
.board-sticky-empty{font-size:12px;color:#73777F;white-space:nowrap}
.board-sticky-filters .fchips{
flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:0 2px
}
.board-sticky-filters .fchips::-webkit-scrollbar{display:none}
.board-sticky-filters .fchip{
flex:0 0 auto;min-height:34px;padding:5px 5px 5px 10px;border-radius:8px;box-shadow:none;
border-color:transparent;background:#CDEBF9;color:#06384B
}
.board-sticky-filters .fchip-k{color:var(--brand-primary,#1C75BC)}
.board-sticky-edit{
display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 12px;border-radius:8px;
border:1px solid #73777F;background:transparent;color:var(--brand-primary,#1C75BC);
font:inherit;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer
}
.board-sticky-edit:hover{background:rgba(28,117,188,.06);border-color:var(--brand-primary,#1C75BC)}
/* While scrolled, active filters + section navigation read as one MD3 shelf.
The only strong separation is beneath the navigation, where content begins. */
.pub-wrap[data-filter-style="shelf"].sticky-context-active:has(.board-spy:not([hidden])) .board-sticky-filters{
margin-bottom:0;border-bottom:0;border-radius:0;box-shadow:none
}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy{
z-index:49;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;overflow-x:auto;
margin:0 0 14px;padding:7px 10px 9px;
background:#F3F5F9;border:1px solid #C7CBD2;border-top:1px solid #E6EAF0;border-radius:0 0 16px 16px;
box-shadow:0 12px 20px -14px rgba(16,24,40,.52);scrollbar-width:none
}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy::-webkit-scrollbar{display:none}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy::before{
content:"Board navigation";flex:0 0 auto;margin-right:7px;padding-right:11px;border-right:1px solid #C7CBD2;
font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-primary,#1C75BC);white-space:nowrap
}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy a{
flex:0 0 auto;border:0;border-radius:8px;background:transparent;padding:7px 11px;
color:#43474E;font-size:12px;font-weight:500;box-shadow:none
}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy a:hover{
background:rgba(28,117,188,.06);color:var(--brand-primary,#1C75BC)
}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy a.on{
background:#CDEBF9;color:#06384B;font-weight:600;box-shadow:none
}
@media(max-width:760px){
.board-sticky-filters{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:7px 8px}
.board-sticky-view{min-width:0;border-right:0;padding-right:0}
.board-sticky-view strong{max-width:none}
.board-sticky-selection{grid-column:1/-1;order:3}
.board-sticky-filter-label{display:none}
.pub-wrap[data-filter-style="shelf"].sticky-context-active .board-spy::before{display:none}
}
/* .fchips is display:flex, which beats the UA [hidden] rule — so make the hidden
attribute authoritative. JS (pubSummary) toggles it to reveal the cross-filter
breadcrumb strip (incl. the shelf strip, hidden by default) when chips exist. */
.fchips[hidden]{display:none}
.board-xfchips-bar{max-width:var(--board-max,1400px);margin:0 auto;padding:0 var(--board-pad,24px)}
.board-xfchips-bar .fchips{margin:10px 0 0}
.board-filter-divider{display:none}
.bf-chipset{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bf-chip{
border:1px solid var(--c-line,#d7dbe3);background:#fff;color:var(--c-ink2,#43474e);
border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
transition:background .12s,border-color .12s,color .12s,box-shadow .12s
}
.bf-chip-check{display:none}
.bf-chip:hover{background:rgba(47,100,214,.07);border-color:var(--brand-primary,#2f64d6)}
.bf-chip.on{background:var(--brand-primary,#2f64d6);border-color:var(--brand-primary,#2f64d6);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.10)}
.bf-chip.on .bf-chip-check{display:inline-block}
/* Student population: a two-position sliding toggle, not a chipset. Both
authored labels stay legible because the cohort a board reports is a
declaration a viewer must be able to read, not a value hidden in a panel.
It carries its own classes so no theme's chip overrides reach it. */
.fctl-population{display:flex;align-items:center;gap:8px;min-width:0;flex:0 0 auto}
.fctl-population .fctl-head{margin:0}
.bf-switch{
position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
flex:0 0 auto;padding:3px;border:1px solid var(--c-line,#d7dbe3);border-radius:999px;
background:var(--c-panel,#fff)
}
.bf-switch-opt{
position:relative;z-index:1;appearance:none;border:0;background:transparent;
color:var(--c-muted,#6b7280);font:inherit;font-size:13px;font-weight:600;line-height:1;
padding:8px 14px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:color .16s ease
}
.bf-switch-opt:hover{color:var(--c-ink,#1a1c1e)}
.bf-switch-opt.on{color:#fff}
.bf-switch-opt:focus-visible{outline:2px solid var(--brand-primary,#2f64d6);outline-offset:2px}
.bf-switch-thumb{
position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;
background:var(--brand-primary,#2f64d6);box-shadow:0 1px 2px rgba(16,24,40,.16);
opacity:0;transition:transform .18s cubic-bezier(.2,.7,.3,1),opacity .12s ease
}
/* No :has() dependency: the thumb only appears once JS has marked a side, so
the pre-script paint is a plain unselected track rather than a mismatch. */
.bf-switch-opt.on ~ .bf-switch-thumb{opacity:1}
.bf-switch-opt:nth-child(2).on ~ .bf-switch-thumb{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.bf-switch-thumb{transition:none}}
/* On a narrow published bar the group's aria-label still names the control, so
the visible caption goes before the toggle itself is allowed to shrink. The
builder keeps its caption — that row also holds the remove button. */
@media(max-width:760px){
.bf-switch-opt{padding:7px 11px;font-size:12px}
.pub-wrap[data-filter-style="panel"] .board-filterbar .fctl-population .fctl-head{display:none}
}
/* MD3 board chrome — one tenant-neutral hook. [class*="board-theme-md3"]
matches the canonical .board-theme-md3 class and, at the same (0,1,0)
specificity as a class selector, the legacy board-theme-md3-* class
names still emitted by not-yet-synced built-in rows, org duplicates of
the md3 themes, and the key-derived fallback class — so boards keep
this chrome across the css_class rollout. The token values below are
the product defaults for the md3 look; a board's BoardTheme row tokens
(board_theme_style_tag) override them at render time. */
[class*="board-theme-md3"]{
--ui:'Roboto','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,Helvetica,Arial,sans-serif;
--brand-primary:#1C75BC;
--brand-accent:#29ABE2;
--c-bg:#FAFBFD;
--c-panel:#ffffff;
--c-line:#C7CBD2;
--c-line2:#E6EAF0;
--c-ink:#1A1C1E;
--c-ink2:#43474E;
--c-muted:#43474E;
--tile-radius:16px;
font-family:var(--ui);
max-width:1320px;
padding-top:18px;
}
[class*="board-theme-md3"] .board-title{font-size:24px;font-weight:500;letter-spacing:0;margin-bottom:2px}
[class*="board-theme-md3"] .board-sub{font-size:14px;color:#43474E;max-width:780px}
[class*="board-theme-md3"] .board-topdock{
position:sticky;top:var(--pub-head-h,0px);z-index:50;
background:#F3F5F9;border:1px solid #C7CBD2;border-radius:12px;
padding:12px 16px 0;margin-bottom:24px
}
[class*="board-theme-md3"] .pub-filterbar{
background:transparent;border:0;border-radius:0;padding:0 0 10px;margin:0
}
[class*="board-theme-md3"] .board-tabs{
display:flex;gap:0;border-bottom:1px solid #C7CBD2;margin:0;padding-top:0;
position:static;top:auto;z-index:auto;background:#F3F5F9
}
[class*="board-theme-md3"].pub-wrap:not(.sticky-context-active) .board-topdock:has(~ .board-spy:not([hidden])){
margin-bottom:0;border-bottom:0;border-radius:12px 12px 0 0
}
[class*="board-theme-md3"].pub-wrap:not(.sticky-context-active) .board-spy:not([hidden]){
display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;
margin:0 0 28px;padding:8px 16px 12px;
background:#F3F5F9;border:1px solid #C7CBD2;border-top:0;border-radius:0 0 12px 12px;
box-shadow:none;scrollbar-width:none
}
[class*="board-theme-md3"].pub-wrap:not(.sticky-context-active) .board-spy::-webkit-scrollbar{display:none}
[class*="board-theme-md3"].pub-wrap:not(.sticky-context-active) .board-spy a{
flex:0 0 auto;padding:7px 11px;border:0;border-radius:6px;background:transparent;
color:#43474E;box-shadow:none
}
[class*="board-theme-md3"].pub-wrap:not(.sticky-context-active) .board-spy a:hover{
background:rgba(28,117,188,.06);color:var(--brand-primary,#1C75BC)
}
[class*="board-theme-md3"].pub-wrap:not(.sticky-context-active) .board-spy a.on{
background:#CDEBF9;color:#06384B;font-weight:600;box-shadow:none
}
[class*="board-theme-md3"] .board-tab{
appearance:none;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:160px;
border:0;background:transparent;color:#43474E;cursor:pointer;padding:12px 22px 14px;
border-radius:12px 12px 0 0;position:relative;font-family:inherit;text-align:left
}
[class*="board-theme-md3"] .board-tab:hover{
background:rgba(28,117,188,.06)
}
[class*="board-theme-md3"] .board-tab b{
font-size:15px;font-weight:600;line-height:normal
}
[class*="board-theme-md3"] .board-tab span{
font-size:12px;line-height:normal
}
[class*="board-theme-md3"] .board-tab.on{
color:var(--brand-primary,#1C75BC)
}
[class*="board-theme-md3"] .board-tab.on::after{
content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand-primary,#1C75BC)
}
[class*="board-theme-md3"] .board-filter-shelf{
box-shadow:none
}
[class*="board-theme-md3"] .board-filter-shelf-controls{
gap:14px
}
[class*="board-theme-md3"] .board-filter-shelf .fctl{
display:flex;align-items:center;gap:8px;min-width:0
}
[class*="board-theme-md3"] .board-filter-shelf .fctl-head{
margin:0;line-height:1
}
[class*="board-theme-md3"] .board-filter-shelf .fctl-label{
color:var(--brand-primary,#1C75BC);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1
}
[class*="board-theme-md3"] .board-filter-divider{
display:block;width:1px;height:24px;background:#C7CBD2;flex:0 0 auto
}
[class*="board-theme-md3"] .board-filter-shelf .bf-chipset{
display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
[class*="board-theme-md3"] .board-filter-shelf .bf-chip{
display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;
border:1px solid #73777F;background:transparent;color:#43474E;font:inherit;font-size:13px;font-weight:500;line-height:1;
box-shadow:none;cursor:pointer;transition:background .12s,border-color .12s
}
[class*="board-theme-md3"] .board-filter-shelf .bf-chip:hover{
background:rgba(28,117,188,.06);border-color:#73777F;color:#43474E
}
[class*="board-theme-md3"] .board-filter-shelf .bf-chip.on{
background:#CDEBF9;border-color:transparent;color:#06384B;box-shadow:none
}
[class*="board-theme-md3"] .board-filter-shelf .bf-chip-check{
width:16px;height:16px;flex:0 0 auto;display:none
}
[class*="board-theme-md3"] .board-filter-shelf .bf-chip.on .bf-chip-check{
display:inline-block
}
/* The population toggle in MD3's control language: the theme's own outline and
radius, its brand token still driving the thumb. */
[class*="board-theme-md3"] .bf-switch{border-radius:10px;border-color:#73777F}
[class*="board-theme-md3"] .bf-switch-opt{border-radius:8px;font-weight:500}
[class*="board-theme-md3"] .bf-switch-thumb{border-radius:8px;box-shadow:none}
[class*="board-theme-md3"] .board-filter-shelf .fcombo{
min-width:220px;position:relative
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-btn{
height:34px;min-height:34px;border:1px solid #73777F;border-radius:8px;background:#fff;color:#1A1C1E;
padding:7px 30px 7px 12px;font:inherit;font-size:13px;font-weight:500;line-height:18px;box-shadow:none
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-btn:hover{
border-color:#73777F;background:#fff
}
[class*="board-theme-md3"] .board-filter-shelf .fctl.open .fcombo-btn,
[class*="board-theme-md3"] .board-filter-shelf .fcombo-btn:focus{
outline:none;border-color:var(--brand-primary,#1C75BC);box-shadow:0 0 0 2px rgba(28,117,188,.14)
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-val{
font-weight:500
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-chev{
position:absolute;right:12px;color:#43474E;pointer-events:none
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-pop{
top:calc(100% + 6px);right:auto;width:280px;border:1px solid #C7CBD2;border-radius:12px;
box-shadow:0 4px 8px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.06)
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-search-wrap{
padding:9px 12px;border-bottom:1px solid #E6EAF0;color:#73777F
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-opt{
border-radius:8px;padding:8px 10px;color:#1A1C1E;font-size:13px;font-weight:400
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-opt:hover,
[class*="board-theme-md3"] .board-filter-shelf .fcombo-opt.sel{
background:rgba(28,117,188,.06);color:#1A1C1E
}
[class*="board-theme-md3"] .board-filter-shelf .fcombo-check.on{
background:var(--brand-primary,#1C75BC);border-color:var(--brand-primary,#1C75BC)
}
[class*="board-theme-md3"] .board-filter-hint{
color:#43474E;font-size:12px;margin-left:auto;max-width:320px;line-height:1.45
}
[class*="board-theme-md3"] .tile{
border-radius:16px;border:1px solid #C7CBD2;border-top:0;box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.10);
background:#fff
}
[class*="board-theme-md3"] .tile:not(.tile-text)::before{
content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--tile-accent,var(--pv-head-accent));z-index:1
}
[class*="board-theme-md3"] .board-grid{gap:16px}
[class*="board-theme-md3"] .tile-wireframe-card{
border-top:1px solid #C7CBD2;box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.10)
}
[class*="board-theme-md3"] .tile-wireframe-card::before{display:none}
[class*="board-theme-md3"] .tile-head{padding:14px 16px 6px;border-bottom:0}
[class*="board-theme-md3"] .tile-head-controls{
margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
[class*="board-theme-md3"] .tile-title{font-size:16px;font-weight:600;color:#1A1C1E}
[class*="board-theme-md3"] .tile-sub{font-size:12px;color:#43474E}
[class*="board-theme-md3"] .tile-body{padding:6px 16px 16px}
[class*="board-theme-md3"] .tile-chartbox{width:100%;min-height:0;flex:1}
[class*="board-theme-md3"] .tile-body-ctlrow{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;padding:0;border:0;background:transparent
}
[class*="board-theme-md3"] .tile-wireframe-card .tile-ctl-l{
font-size:12px;color:#43474E;font-weight:500;letter-spacing:0
}
[class*="board-theme-md3"] .tile-wireframe-card .tile-ctl-sel{
font-size:13px;font-weight:500;border:1px solid #73777F;border-radius:8px;padding:7px 30px 7px 12px;
background:#fff;color:#1A1C1E;max-width:220px
}
[class*="board-theme-md3"] .tile-controls-compact .tile-body-ctlrow{
flex-wrap:wrap;gap:10px;margin:6px 0 8px;overflow:visible
}
[class*="board-theme-md3"] .tile-controls-compact .tile-ctl{
display:inline-grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;
gap:6px;flex:1 0 auto;min-width:0;max-width:100%
}
[class*="board-theme-md3"] .tile-controls-compact .tile-ctl-l{
white-space:nowrap
}
[class*="board-theme-md3"] .tile-controls-compact .tile-ctl-sel{
width:100%;min-width:0;max-width:100%
}
[class*="board-theme-md3"] .tile-wireframe-card .tile-seg{
display:inline-flex;border:1px solid #73777F;border-radius:999px;overflow:hidden;padding:0;background:transparent;gap:0
}
[class*="board-theme-md3"] .tile-wireframe-card .tile-seg button{
border-right:1px solid #C7CBD2;border-radius:0;background:transparent;font-size:12px;font-weight:500;
padding:8px 14px;color:#43474E;box-shadow:none
}
[class*="board-theme-md3"] .tile-wireframe-card .tile-seg button:last-child{border-right:0}
[class*="board-theme-md3"] .tile-wireframe-card .tile-seg button.on{
background:#D8E2FF;color:#001A41;box-shadow:none
}
[class*="board-theme-md3"] .tile-note{
font-size:12px;color:#43474E;margin-top:6px;line-height:1.45
}
[class*="board-theme-md3"] .tile-stamp{
font-size:11px;color:#43474E;padding:10px 16px;border-top:1px solid #C7CBD2;background:#F8FAFD
}
[class*="board-theme-md3"] .tile-datastamp{
font-size:10.5px;color:#73777F;padding:0 16px 12px
}
[class*="board-theme-md3"] .tile-summary-kpi{
border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#F8FAFD
}
[class*="board-theme-md3"] .tile-summary-l{font-size:12px;color:#43474E}
[class*="board-theme-md3"] .tile-summary-v{
font-size:28px;font-weight:600;color:#1A1C1E;line-height:1.1;margin-top:2px;letter-spacing:-.5px
}
[class*="board-theme-md3"] .tile-summary-delta{
font-size:12.5px;font-weight:600;margin-top:2px;color:#43474E
}
[class*="board-theme-md3"] .tile-summary-delta.up{color:var(--pv-good,#3AAA35)}
[class*="board-theme-md3"] .tile-summary-delta.down{color:var(--pv-bad,#ED1C24)}
[class*="board-theme-md3"] .tile-text[data-section]{box-shadow:none}
[class*="board-theme-md3"] .tile-text[data-section] .tile-text-h{
color:#43474E;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase
}
[class*="board-theme-md3"] .pc-kpig{gap:12px}
[class*="board-theme-md3"] .pc-kpig-tile{border-radius:12px;background:#F3F5F9;border:0;border-left:0;padding:14px 16px}
[class*="board-theme-md3"] .pc-kpig-l{font-size:12px;color:#43474E}
[class*="board-theme-md3"] .pc-kpig-v{font-size:28px;font-weight:600;color:#1A1C1E}
.pc-prows{display:flex;flex-direction:column;gap:13px;padding:4px 0 2px}
.pc-prow{appearance:none;border:0;background:transparent;text-align:left;padding:0;display:block;width:100%;font:inherit;color:inherit;cursor:pointer}
.pc-prow:focus-visible{outline:2px solid #4f46e5;outline-offset:4px;border-radius:8px}
.pc-prow-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:12px;color:#43474E}
.pc-prow-l{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-prow-top b{font-size:12.5px;font-weight:700;color:#1A1C1E;font-variant-numeric:tabular-nums}
.pc-prow-track{display:block;height:9px;border-radius:999px;background:#ECEAE3;overflow:hidden}
.pc-prow-fill{display:block;height:100%;border-radius:999px;transition:width .55s ease-in-out}
[class*="board-theme-md3"] .tile-headline-bans{
background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible
}
[class*="board-theme-md3"] .tile-headline-bans::before{display:none}
[class*="board-theme-md3"] .tile-headline-bans .tile-head{display:none}
[class*="board-theme-md3"] .tile-headline-bans .tile-body{padding:0}
.pc-ban-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px;height:auto}
@media(max-width:1000px){.pc-ban-group{grid-template-columns:repeat(2,1fr)}}
.pc-ban{
--ban-accent:var(--brand-primary,#1C75BC);
position:relative;border-radius:16px;padding:18px 16px 14px;overflow:hidden;
box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.10);
background:#fff;border:1px solid #C7CBD2
}
.pc-ban::before{
content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:16px 16px 0 0;background:var(--ban-accent)
}
.pc-ban-positive{--ban-accent:var(--pv-good,#3AAA35)}.pc-ban-warning{--ban-accent:var(--pv-warn,#ED8B00)}.pc-ban-negative{--ban-accent:var(--pv-bad,#ED1C24)}
.pc-ban-info{--ban-accent:var(--brand-accent,#29ABE2)}.pc-ban-neutral{--ban-accent:var(--brand-primary,#1C75BC)}.pc-ban-indigo{--ban-accent:#4f46e5}
.pc-ban-top{display:flex;align-items:flex-start;gap:8px;min-height:30px}
.pc-ban-label{flex:1;min-width:0;font-size:11.5px;color:#43474E;font-weight:500}
.pc-ban-help{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:19px;height:19px;
padding:0;border:1px solid #AEB4BD;border-radius:50%;background:transparent;color:#5F6670;
font:600 11px/1 var(--ui);cursor:help
}
.pc-ban-help:hover,.pc-ban-help:focus-visible{border-color:var(--brand-primary,#1C75BC);background:#EAF5FA;color:var(--brand-primary,#1C75BC);outline:none}
.pc-tip .pc-ban-help-copy{max-width:280px;padding:8px 10px 10px;white-space:normal;line-height:1.45;color:#43474E}
.pc-ban-value{font-size:30px;font-weight:600;color:#1A1C1E;line-height:1.05;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pc-ban-delta{font-size:11.5px;font-weight:600;margin-top:3px;color:#58595B}
/* Authored-tone delta text darkens the status token so small type keeps its
contrast; computed-goodness deltas get the same tokens inline from the
renderer, so both paths cascade from one theme setting. */
.pc-ban-delta-up,.pc-ban-delta-positive{color:color-mix(in srgb, var(--pv-good,#3AAA35) 85%, #000)}
.pc-ban-delta-down,.pc-ban-delta-negative{color:color-mix(in srgb, var(--pv-bad,#ED1C24) 85%, #000)}
.pc-ban-delta-indigo{color:#4f46e5}.pc-ban-delta-muted,.pc-ban-delta-neutral,.pc-ban-delta-info{color:#43474E}
/* Item 3 (gid 1215798121912267) — student-rows drill modal. Hosts the board's
own roster card (real underlying rows) inside the shared drill modal shell. */
.pvd-host{min-height:60px}
.pvd-host .pc-table-scroll{
max-height:60vh;overflow:auto;
border:1px solid var(--border-2,#e2e2e6);border-radius:10px;
}
.pvd-note{margin:12px 2px 0;font-size:12px;color:var(--muted,#83838c)}
.dh-modal-export{
margin-left:auto;border:1px solid var(--brand-primary,#1C75BC);background:var(--brand-primary,#1C75BC);color:#fff;
border-radius:999px;padding:7px 14px;font:inherit;font-size:12px;font-weight:700;cursor:pointer
}
.dh-modal-export:hover{filter:brightness(.96)}
/* ===== CR wave2 · student ===== */
/* Attendance → per-date absence log (dates absent + absence code) */
.sr-abs{margin-top:24px;border-top:1px solid var(--c-line2);padding-top:16px}
.sr-abs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.sr-abs-cap{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint)}
.sr-abs-count{font-size:11px;font-weight:600;color:var(--c-muted)}
.sr-abs-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin:0 0 12px}
.sr-abs-key{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--c-muted)}
.sr-abs-scroll{max-height:300px}
.sr-abs-table{font-size:12px}
.sr-abs-table td{padding:6px 12px}
.sr-abs-code{display:inline-block;min-width:34px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;
text-align:center;padding:2px 7px;border-radius:3px;border:1px solid var(--c-line);background:#fff;color:var(--c-ink2)}
.sr-abs-code-bad{color:#9a3f33;border-color:#e0bcb4;background:#fbf3f1}
.sr-abs-code-warn{color:#9a5230;border-color:#e3c3b1;background:#fcf5f0}
.sr-abs-code-ok{color:#3a6286;border-color:#bcd0e4;background:#f3f7fb}
.sr-abs-code-plain{color:var(--c-muted)}
/* Named student tracking cohorts */
.stu-group-filter{display:flex;align-items:center;gap:8px;position:relative}
.stu-group-filter-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-faint);white-space:nowrap}
.stu-group-combo{width:220px}
.stu-group-combo .fcombo-btn{height:34px;background:#fff}
.stu-group-pop{left:auto;right:0;width:280px;z-index:90}
.stu-group-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid var(--c-line2);background:#fff;padding:9px 11px;text-align:left;cursor:pointer}
.stu-group-option:last-child{border-bottom:0}
.stu-group-option:hover{background:var(--c-canvas)}
.stu-group-option.is-selected{box-shadow:inset 3px 0 0 var(--brand-primary,#2f64d6);background:color-mix(in srgb,var(--brand-primary,#2f64d6) 5%,#fff)}
.stu-group-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--c-ink);text-transform:none;letter-spacing:0}
.stu-group-option small{flex:0 0 auto;font-size:10px;font-weight:600;color:var(--c-faint)}
.sr-top-actions{display:flex;align-items:center;gap:8px}
.sr-track-menu{position:relative}
.sr-track-menu>summary{list-style:none;cursor:pointer}
.sr-track-menu>summary::-webkit-details-marker{display:none}
.sr-track-count{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;background:var(--brand-primary,#2f64d6);color:#fff;font-size:9px;font-weight:700}
.sr-track-pop{position:absolute;z-index:80;right:0;top:calc(100% + 7px);width:330px;border:1px solid var(--c-line);background:#fff;box-shadow:0 16px 38px rgba(20,25,40,.16)}
.sr-track-head{display:flex;flex-direction:column;gap:3px;padding:14px 16px 12px;border-bottom:1px solid var(--c-line2)}
.sr-track-head b{font-size:13px;color:var(--c-ink)}
.sr-track-head span,.sr-track-empty{font-size:11px;color:var(--c-muted)}
.sr-track-empty{margin:0;padding:14px 16px}
.sr-track-list{max-height:250px;overflow:auto}
.sr-track-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid var(--c-line2)}
.sr-track-row>span{display:flex;min-width:0;flex-direction:column;gap:2px}
.sr-track-row b{font-size:12px;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-track-row small{font-size:10px;color:var(--c-faint)}
.sr-track-row form{margin:0}
.sr-track-add,.sr-track-remove{border:0;background:none;font:inherit;font-size:10.5px;font-weight:700;cursor:pointer;padding:4px 0}
.sr-track-add{color:var(--brand-primary,#2f64d6)}
.sr-track-remove{color:var(--c-faint)}
.sr-track-new{display:flex;gap:7px;padding:12px 16px;background:var(--c-canvas);border-top:1px solid var(--c-line)}
.sr-track-new input{min-width:0;flex:1;border:1px solid var(--c-line);background:#fff;padding:7px 8px;font:inherit;font-size:11.5px;outline:none}
.sr-track-new input:focus{border-color:var(--brand-primary,#2f64d6)}
.sr-track-new button{border:0;background:var(--c-ink);color:#fff;padding:7px 10px;font:inherit;font-size:10.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.sr-tag-track{color:var(--brand-primary,#2f64d6);border-color:color-mix(in srgb,var(--brand-primary,#2f64d6) 35%,#fff);background:color-mix(in srgb,var(--brand-primary,#2f64d6) 6%,#fff)}
@media(max-width:640px){.sr-track-pop{position:fixed;left:12px;right:12px;top:72px;width:auto}.stu-group-filter{order:5;width:100%}.stu-group-combo{flex:1;width:auto}.stu-group-pop{left:0;right:0;width:auto}}
/* Staff PDF → absence dates (compact, fits the attendance half-column) */
.prx-abs-cap{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5d626c;margin:9px 0 3px}
.prx-abs{font-size:9px}
.prx-abs td{padding:2.5px 6px}
/* ===== CR wave2 · chrome ===== */
/* --- CR item 3: Larger brand logo in the public header --- */
/* Custom-logo (image) path: was 46px, now 60px */
.pub-logo-img{height:var(--brand-logo-height,60px)}
.pub-logo-img img{height:var(--brand-logo-height,60px)}
/* Icon/glyph fallback logo: was 24x24, now 32x32 */
.pub-logo:not(.pub-logo-img){width:32px;height:32px;border-radius:6px}
.pub-logo:not(.pub-logo-img) .material-symbols-outlined{font-size:20px}
/* Login screen custom-logo: was 30px, now 40px — keeps the card proportional */
.launch-logo-img{height:40px}
.launch-logo-img img{height:40px}
/* --- CR item 2: Nav-button subtitles --- */
/* Nav items flex column when a subtitle is present so the subtitle sits below the label */
.pub-nav-item{align-items:center;flex-direction:row;flex-wrap:nowrap}
.pub-nav-item:has(.pub-nav-sub){flex-direction:column;align-items:flex-start;gap:0;line-height:1.1;padding-top:6px;padding-bottom:6px}
/* A dropdown toggle keeps its chevron beside the stacked label + subtitle. */
.pub-nav-toggle:has(.pub-nav-sub){flex-direction:row;align-items:center;gap:6px}
.pub-nav-texts{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.1}
.pub-nav-label{display:block}
.pub-nav-sub{display:block;font-size:10px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--c-muted);line-height:1.3;margin-top:1px}
.pub-nav-item.is-active .pub-nav-sub{color:color-mix(in srgb,var(--brand-primary,#2f64d6) 65%,var(--c-muted))}
/* --- CR item 1: User-account dropdown in the public header --- */
/* Right-end wrapper that groups pluvoir.com + user avatar */
.pub-head-end{margin-left:auto;display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
/* Remove margin-left:auto from .pub-site now that the wrapper provides it */
.pub-head-end .pub-site{margin-left:0}
/* Avatar button */
.pub-user-drop{position:relative}
.pub-user-btn{
width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
background:var(--brand-primary,#1c75bc);color:#fff;
font-size:11px;font-weight:700;letter-spacing:.03em;
display:inline-flex;align-items:center;justify-content:center;
transition:opacity .12s,box-shadow .12s;
box-shadow:0 1px 3px rgba(20,25,40,.22);
}
.pub-user-btn:hover{opacity:.88;box-shadow:0 2px 6px rgba(20,25,40,.28)}
.pub-user-btn:focus-visible{outline:2px solid var(--brand-primary,#1c75bc);outline-offset:2px}
.pub-user-init{line-height:1;user-select:none}
/* Dropdown panel */
.pub-user-menu{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;
min-width:220px;background:#fff;
border:1px solid var(--c-line);border-radius:8px;
box-shadow:0 10px 30px rgba(20,25,40,.14);
padding:4px 0;
}
.pub-user-email{
padding:11px 14px 9px;font-size:12px;color:var(--c-muted);
font-weight:500;word-break:break-all;
border-bottom:none;
}
.pub-user-divider{height:1px;background:var(--c-line);margin:0 0 4px}
.pub-user-divider-after-admin{margin:4px 0}
.pub-user-admin{
display:flex;align-items:center;gap:9px;padding:8px 14px;
color:var(--c-ink2);text-decoration:none;font-size:13px;font-weight:550;
transition:color .12s,background .12s;
}
.pub-user-admin .material-symbols-outlined{font-size:17px;color:var(--brand-primary,#1c75bc)}
.pub-user-admin:hover{color:var(--brand-primary,#1c75bc);background:var(--c-accent-bg,#eef4ff)}
.pub-user-signout{
display:block;width:100%;text-align:left;
background:none;border:none;cursor:pointer;
font:inherit;font-size:13px;font-weight:500;color:var(--c-ink2);
padding:7px 14px;transition:color .12s,background .12s;
}
.pub-user-signout:hover{color:var(--brand-primary,#1c75bc);background:var(--c-accent-bg,#eef4ff)}
/* The button_to helper wraps in a form — strip form chrome */
.pub-user-menu form{margin:0;padding:0}
/* --- CR item 4: Colored filter-panel header --- */
.fpanel-head{
background:var(--brand-primary,#1c75bc);
border-bottom-color:color-mix(in srgb,var(--brand-primary,#1c75bc) 70%,#000);
}
.fpanel-title{color:#fff}
.fpanel-x{color:rgba(255,255,255,.75)}
.fpanel-x:hover{background:rgba(255,255,255,.15);color:#fff}
/* ===== CR wave2 · glance ===== */
/* "At a glance" kpi_group tiles, polished: a quiet brand-accent rail + tinted
surface, an uppercase eyebrow label, a tabular figure, and a prior-year delta
chip on the baseline (reusing the metric cards' .pc-kt-delta up/dn language).
These rules sit after the originals (lines ~2128) and refine them; the base
markup still degrades to a plain stacked tile if a delta isn't present. */
.pc-kpig{gap:10px}
.pc-kpig-tile{
position:relative;
background:color-mix(in srgb, var(--tile-accent,var(--pv-accent,var(--pv-head-accent))) 4%, #fff);
border:1px solid color-mix(in srgb, var(--tile-accent,var(--pv-accent,var(--pv-head-accent))) 14%, var(--pc-line,#e7e9ee));
border-left:3px solid var(--tile-accent,var(--pv-accent,var(--pv-head-accent)));
border-radius:9px;
padding:8px 13px 9px;
}
.pc-kpig-l{
font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--pc-mute,#8a92a0);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pc-kpig-val{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:3px;min-width:0}
.pc-kpig-v{
font-size:26px;font-weight:650;letter-spacing:-.015em;line-height:1.08;
color:var(--pc-ink,#1a1d24);font-variant-numeric:tabular-nums;min-width:0;
}
/* the prior-year chip: same green/red block as the metric cards, sized for the tile */
.pc-kpig .pc-kt-delta{flex:none;align-self:center;font-size:11px;padding:2px 7px}
.pc-kpig .pc-kt-delta i{font-size:10px}
@media (max-width:560px){
.pc-kpig-val{flex-wrap:wrap;gap:4px 10px}
}
/* Structural board heading: a real title/subtitle element, not chart chrome. */
.tile-section-header{
display:block;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;min-height:0
}
.tile-section-header::before{display:none}
.tile-section-header .tile-body{display:none}
.tile-section-header .section-header-content{
height:100%;min-height:0;padding:8px 2px 10px;display:flex;align-items:flex-end;gap:20px;
border-bottom:1px solid var(--c-line,#dfe2e7)
}
.section-header-copy{min-width:0;max-width:min(760px,82%)}
.section-header-copy h2,.tile-section-header .tile-title{
margin:0;color:var(--c-ink,#1a1d24);font-size:20px;font-weight:650;line-height:1.15;letter-spacing:-.025em
}
.section-header-copy p,.tile-section-header .tile-sub{
display:block;margin:4px 0 0;color:var(--c-muted,#68707c);font-size:12.5px;line-height:1.35;white-space:normal
}
.section-header-rule{height:3px;width:42px;margin-left:auto;margin-bottom:3px;border-radius:2px;background:var(--tile-accent,var(--pv-head-accent));flex:0 0 auto}
.tile-section-header .tile-head{height:100%;padding:8px 2px 10px;align-items:flex-end;border-bottom:1px solid var(--c-line,#dfe2e7)}
.tile-section-header .tile-titles{gap:0;max-width:min(760px,82%)}
.tile-section-header .tile-acts{align-self:center;opacity:.18;transition:opacity .12s}
.tile-section-header:hover .tile-acts{opacity:1}
.tile-section-header .tile-resize{opacity:.18}
.board-grid .tile.tile-section-header,
[class*="board-theme-md3"] .tile.tile-section-header{
display:block;background:linear-gradient(90deg,
color-mix(in srgb,var(--tile-accent,var(--pv-head-accent)) 8%,#fff) 0%,
rgba(255,255,255,.72) 48%,transparent 100%);
border:0;border-left:3px solid var(--tile-accent,var(--pv-head-accent));
border-radius:0;box-shadow:none;overflow:visible
}
.board-grid .tile.tile-section-header::before,
[class*="board-theme-md3"] .tile.tile-section-header::before{display:none}
.board-grid .tile.tile-section-header .section-header-content,
[class*="board-theme-md3"] .tile.tile-section-header .section-header-content{
padding:14px 18px 13px;border-bottom:1px solid color-mix(in srgb,var(--tile-accent,var(--pv-head-accent)) 22%,#dfe2e7)
}
.board-grid .tile.tile-section-header .tile-head,
[class*="board-theme-md3"] .tile.tile-section-header .tile-head{
height:100%;padding:14px 18px 13px;border-bottom:1px solid color-mix(in srgb,var(--tile-accent,var(--pv-head-accent)) 22%,#dfe2e7)
}
.board-grid .tile.tile-section-header .tile-body,
[class*="board-theme-md3"] .tile.tile-section-header .tile-body{display:none}
.pc-section-header,.st-section-preview{
width:100%;padding:18px 4px 12px;border-bottom:1px solid var(--c-line,#dfe2e7);display:flex;flex-direction:column;gap:4px;text-align:left
}
.pc-section-header strong,.st-section-preview strong{font-size:20px;line-height:1.15;letter-spacing:-.025em}
.pc-section-header span,.st-section-preview span{font-size:12.5px;color:var(--c-muted,#68707c)}
/* Headline KPI groups read as one metric strip instead of disconnected mini-cards. */
.tile-headline-bans .pc-ban-group{
grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:1px;margin:0;
background:var(--c-line,#dfe2e7);border:1px solid var(--c-line,#dfe2e7);border-radius:10px;overflow:hidden
}
.tile-headline-bans .pc-ban{
min-width:0;border:0;border-radius:0;box-shadow:none;background:#fff;padding:17px 15px 15px;overflow:visible
}
.tile-headline-bans .pc-ban::before{
top:0;left:15px;right:auto;width:28px;height:3px;border-radius:0 0 3px 3px
}
.tile-headline-bans .pc-ban-top{align-items:center;min-height:31px;gap:6px}
.tile-headline-bans .pc-ban-label{font-size:11px;font-weight:600;line-height:1.25;color:#555d68}
.tile-headline-bans .pc-ban-value{font-size:28px;font-weight:650;letter-spacing:-.035em}
.tile-headline-bans .pc-ban-help{width:17px;height:17px;font-size:10px;border-color:#c7cbd2}
.tile-headline-bans .pc-ban-delta{margin-top:5px;font-size:10.5px;font-weight:600}
@media(max-width:700px){
.tile-headline-bans .pc-ban-group{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-header-copy{max-width:88%}
}
/* ===== CR wave2 fix · header layout + bottom freshness bar ===== */
/* Keep the header on one row at desktop: the nav takes the middle and shrinks/
scrolls if needed, so the right-end (pluvoir.com + user avatar) never wraps. */
@media(min-width:761px){
/* one row: brand | nav | end. The nav flexes/shrinks and (only if truly needed)
wraps its own items to a second line — NO overflow clip, so the In-Depth-Views
dropdown and user menu render fully. The right-end never wraps to a new row. */
.pub-head-in{flex-wrap:nowrap;align-items:center}
.pub-nav{flex:1 1 auto;min-width:0;flex-wrap:wrap}
.pub-head-end{flex:0 0 auto}
}
/* A dropdown toggle that ALSO has a subtitle: title + chevron share the TOP line,
subtitle sits on the line below, left-aligned with the title. */
.pub-nav-toggle:has(.pub-nav-sub){display:grid;grid-template-columns:max-content auto;align-items:center;column-gap:6px;row-gap:0}
.pub-nav-toggle:has(.pub-nav-sub) .pub-nav-label{grid-column:1;grid-row:1}
.pub-nav-toggle:has(.pub-nav-sub) .pub-nav-chev{grid-column:2;grid-row:1;justify-self:start;align-self:center;margin:0}
.pub-nav-toggle:has(.pub-nav-sub) .pub-nav-sub{grid-column:1 / span 2;grid-row:2;justify-self:start}
/* Bottom freshness/stats bar — FIXED, always-visible, full-viewport-width status
strip (Tableau-style): data recency + district-scale stats. Inner row is
max-width-centered to align with the board content. */
.pub-freshbar{position:fixed;left:0;right:0;bottom:0;z-index:38;
border-top:1px solid var(--c-line);box-shadow:0 -2px 8px rgba(20,25,40,.06);
background:color-mix(in srgb,var(--brand-primary,#1c75bc) 6%,var(--c-panel))}
.pf-in{max-width:1280px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;
flex-wrap:nowrap;gap:0 18px;overflow-x:auto;scrollbar-width:none;font-size:12px;color:var(--c-muted)}
.pf-in::-webkit-scrollbar{display:none}
.pf-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.pf-item b{color:var(--c-ink);font-weight:700;font-variant-numeric:tabular-nums}
.pf-updated{color:var(--c-ink2)}
.pf-updated svg{color:var(--brand-primary,#1c75bc);opacity:.85}
.pf-dot{width:3px;height:3px;border-radius:50%;background:var(--c-faint);flex:none}
/* reserve space so the fixed bar never covers the footer; keep the side rail clear of it */
body.pub{padding-bottom:48px}
.board-siderail{bottom:48px}
@media(max-width:760px){.pf-in{padding:10px 16px;gap:0 13px}}
/* ===== calendar chart (GitHub-contributions-style heatmap) ===== */
.pc-cal{display:flex;flex-direction:column;height:100%;min-height:0;gap:10px;font-family:var(--ui)}
.pc-cal-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
font-size:11px;color:var(--c-muted,#697086);font-weight:600;font-variant-numeric:tabular-nums}
.pc-cal-leg{display:flex;align-items:center;gap:8px;min-width:0}
.pc-cal-grad{flex:0 0 130px;height:8px;border-radius:4px}
.pc-cal-leglab{color:var(--c-ink2,#3a3f4a);font-weight:600}
.pc-cal-zoom{display:inline-flex;gap:4px;flex:none}
.pc-cal-zb{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--border-2,#e2e2e6);border-radius:5px;background:var(--surface,#fff);
color:var(--c-ink2,#3a3f4a);font-size:14px;line-height:1;font-weight:700;cursor:pointer;
transition:background .12s,border-color .12s}
.pc-cal-zb:hover{background:var(--surface-2,#f7f7f8);border-color:#bdbdc4}
.pc-cal-body{display:flex;align-items:flex-start;gap:6px;flex:1;min-height:0}
.pc-cal-side{display:grid;grid-auto-flow:row;row-gap:var(--cal-gap,3px);flex:0 0 auto;
position:sticky;left:0;z-index:2;background:var(--surface,#fff)}
.pc-cal-corner{height:var(--cal-month,18px)}
.pc-cal-rh{height:var(--cal-cell,15px);display:flex;align-items:center;justify-content:flex-end;
padding-right:8px;font-size:10.5px;font-weight:600;color:var(--c-muted,#697086);white-space:nowrap;line-height:1}
.pc-cal-scroll{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:5px}
.pc-cal-grid{display:grid;grid-auto-flow:row;column-gap:var(--cal-gap,3px);row-gap:var(--cal-gap,3px);width:max-content}
.pc-cal-mon{height:var(--cal-month,18px);position:relative;overflow:visible;font-size:10px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;color:var(--c-muted,#697086)}
.pc-cal-mon span{position:absolute;left:0;bottom:1px;white-space:nowrap}
.pc-cal-cell{width:var(--cal-cw,var(--cal-cell,15px));height:var(--cal-ch,var(--cal-cell,15px));border-radius:3px;background:transparent;
box-shadow:inset 0 0 0 1px rgba(27,31,35,.05);transition:box-shadow .1s}
.pc-cal-cell:not(.pc-cal-nil):hover{box-shadow:inset 0 0 0 1.5px rgba(20,24,31,.45)}
.pc-cal-nil{background:#f1f2f4;box-shadow:none}
.pc-cal-sup{background:repeating-linear-gradient(45deg,#e7e9ec,#e7e9ec 2px,#f4f5f7 2px,#f4f5f7 4px);box-shadow:none}
.pc-cal-scroll::-webkit-scrollbar{height:9px}
.pc-cal-scroll::-webkit-scrollbar-thumb{background:var(--c-line,#e6e8ec);border-radius:6px}
.pc-cal-scroll::-webkit-scrollbar-thumb:hover{background:#cdced3}
/* =================================================================
The Stage — registry-driven chart studio (Phase 5)
================================================================= */
.st2-body{margin:0;background:var(--app-bg,#f7f9fb);font-family:var(--ui);color:var(--ink,#191c1e);font-size:14px}
.st2{display:flex;flex-direction:column;height:100vh}
.st2-top{display:flex;align-items:center;gap:12px;background:var(--chrome,#fff);border-bottom:1px solid var(--border,#e0e3e5);padding:10px 16px}
.st2-back{font-size:17px;text-decoration:none;color:var(--ink-2,#45464d);padding:4px 10px;border-radius:6px}
.st2-back:hover{background:var(--surface-2,#f2f4f6)}
.st2-title{flex:0 1 380px;padding:7px 11px;border:1px solid var(--border,#e0e3e5);border-radius:7px;font-size:14px;font-weight:600}
.st2-type{font-size:11.5px;color:var(--muted,#76777d);letter-spacing:.03em}
.st2-top-acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.st2-status{font-size:12.5px;color:var(--muted,#76777d)}
.st2-status.ok{color:var(--ok,#16884a)} .st2-status.err{color:var(--bad,#dc2626)}
.st2-zones{display:grid;grid-template-columns:280px minmax(0,1fr) 340px;flex:1;min-height:0}
.st2-left{background:var(--surface,#fff);border-right:1px solid var(--border,#e0e3e5);display:flex;flex-direction:column;min-height:0;padding:12px}
.st2-model-pick{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#76777d)}
.st2-model-pick select{display:block;width:100%;margin-top:5px;padding:7px 9px;border:1px solid var(--border,#e0e3e5);border-radius:7px;font-size:13px}
.st2-field-search{margin:10px 0 8px;padding:6px 10px;border:1px solid var(--border,#e0e3e5);border-radius:7px;font-size:12.5px}
.st2-fields{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:2px}
.st2-field{display:flex;align-items:center;gap:7px;border:0;background:none;text-align:left;padding:5px 7px;border-radius:6px;font-size:12.5px;cursor:pointer;color:var(--ink,#191c1e)}
.st2-field:hover{background:var(--surface-2,#f2f4f6)}
.st2-field-k{font-size:9.5px;font-weight:700;border-radius:4px;padding:1px 5px}
.st2-field-dimension .st2-field-k{background:var(--dim-bg,#eaf1ff);color:var(--dim,#0051d5)}
.st2-field-measure .st2-field-k{background:var(--mea-bg,#eaf7ef);color:var(--mea,#16884a)}
.st2-shelves{border-top:1px solid var(--border-2,#eceef0);padding-top:10px;margin-top:8px;display:flex;flex-direction:column;gap:10px}
.st2-shelf-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#76777d);margin-bottom:5px}
.st2-shelf-l small{font-weight:500;text-transform:none;letter-spacing:0}
.st2-shelf-hint{font-size:11.5px;color:var(--muted,#9a9ba1);font-style:italic}
.st2-chip{display:inline-flex;align-items:center;gap:6px;background:var(--violet-bg,#eaf1ff);color:var(--violet,#0051d5);border:1px solid var(--violet-line,#c8d8ff);border-radius:7px;padding:4px 8px;font-size:12.5px;font-weight:600;margin:0 6px 6px 0}
.st2-chip-x{border:0;background:none;cursor:pointer;color:inherit;font-size:13px;padding:0 2px;opacity:.7}
.st2-chip-x:hover{opacity:1}
.st2-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:22px;gap:10px}
.st2-stage-surface{display:flex;align-items:center;justify-content:center;background:var(--c-bg,#f5f6f8);border:1px solid var(--border,#e0e3e5);border-radius:14px;padding:28px;max-width:100%;overflow:auto}
.st2-preview-tile{flex:none}
.st2-stage-meta{font-size:11.5px;color:var(--muted,#76777d);display:flex;gap:14px}
.st2-right{background:var(--surface,#fff);border-left:1px solid var(--border,#e0e3e5);display:flex;flex-direction:column;min-height:0}
.st2-tabs{display:flex;border-bottom:1px solid var(--border,#e0e3e5)}
.st2-tab{flex:1;border:0;background:none;padding:11px 8px;font-size:12.5px;font-weight:600;color:var(--muted,#76777d);cursor:pointer;border-bottom:2px solid transparent}
.st2-tab.on{color:var(--brand-primary,#2f64d6);border-bottom-color:var(--brand-primary,#2f64d6)}
.st2-tab-json{flex:0 0 52px;font-family:var(--mono)}
.st2-opt-search{margin:10px 12px 4px;padding:6px 10px;border:1px solid var(--border,#e0e3e5);border-radius:7px;font-size:12.5px}
.st2-panel{flex:1;overflow:auto;min-height:0;padding:6px 12px 20px}
.st2-group{border-bottom:1px solid var(--border-2,#eceef0);padding:4px 0}
.st2-group summary{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,#45464d);cursor:pointer;padding:7px 2px;user-select:none}
.st2-group summary small{font-weight:500}
.st2-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 2px;font-size:12.5px}
.st2-opt-l{color:var(--ink-2,#45464d);text-transform:capitalize}
.st2-opt select,.st2-opt input[type=text],.st2-opt input[type=number]{width:150px;padding:5px 8px;border:1px solid var(--border,#e0e3e5);border-radius:6px;font-size:12.5px}
.st2-opt input[type=color]{width:44px;height:26px;padding:1px;border:1px solid var(--border,#e0e3e5);border-radius:6px;background:#fff}
.st2-opt textarea{width:150px;font-size:11px;font-family:var(--mono);border:1px solid var(--border,#e0e3e5);border-radius:6px;padding:4px 6px}
.st2-color-wrap{display:flex;align-items:center;gap:6px}
.st2-unset{font-size:10.5px;color:var(--muted,#9a9ba1);font-style:normal}
.st2-filter-row{font-size:12px;padding:4px 2px;color:var(--ink-2,#45464d);font-family:var(--mono)}
.st2-panel-json{display:flex;flex-direction:column;padding:12px}
.st2-panel-json textarea{flex:1;font-family:var(--mono);font-size:11.5px;border:1px solid var(--border,#e0e3e5);border-radius:8px;padding:10px;resize:none}
.st2-json-status{font-size:12px;padding:6px 2px;min-height:24px}
.st2-json-status.ok{color:var(--ok,#16884a)} .st2-json-status.err{color:var(--bad,#dc2626)}
.st2-none{font-size:12px;color:var(--muted,#9a9ba1);padding:8px}
.st2-step{border:1px solid var(--border,#e0e3e5);background:var(--surface,#fff);border-radius:5px;width:20px;height:20px;line-height:1;cursor:pointer;font-size:13px;color:var(--ink-2,#45464d);margin:0 3px}
.st2-step:hover{background:var(--surface-2,#f2f4f6)}
.st2-stage-meta b{font-size:13px;margin:0 1px}
.st2-type{display:flex;align-items:center;gap:6px;border:1px solid var(--border,#e0e3e5);background:var(--surface,#fff);border-radius:7px;padding:6px 11px;font-size:12px;color:var(--ink-2,#45464d);cursor:pointer}
.st2-type:hover{background:var(--surface-2,#f2f4f6)}
.st2-type-chev{font-size:9px;opacity:.6}
.st2-gal-scrim{position:fixed;inset:0;background:rgba(15,20,30,.42);z-index:90}
.st2-gal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:91;width:min(860px,94vw);max-height:86vh;overflow:auto;background:var(--surface,#fff);border:1px solid var(--border,#e0e3e5);border-radius:14px;box-shadow:0 18px 60px rgba(10,15,30,.25);padding:18px 20px}
.st2-gal-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.st2-gal-head h2{font-size:16px;margin:0}
.st2-gal-hint{font-size:11.5px;color:var(--muted,#76777d)}
.st2-gal-x{margin-left:auto;border:0;background:none;font-size:15px;cursor:pointer;color:var(--muted,#777);padding:4px 8px;border-radius:6px}
.st2-gal-fam{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#76777d);margin:14px 0 7px}
.st2-gal-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.st2-preset{border:1.5px solid var(--border,#e0e3e5);background:var(--surface,#fff);border-radius:10px;padding:8px;cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.st2-preset:hover{border-color:var(--brand-primary,#2f64d6)}
.st2-preset-fam{border-style:solid;border-color:color-mix(in srgb, var(--brand-primary,#2f64d6) 45%, #fff)}
.st2-preset-prev{display:flex;align-items:center;justify-content:center;width:100%;height:74px;flex:none;overflow:hidden;position:relative;background:var(--surface-2,#f7f8fa);border-radius:7px;color:var(--muted,#9aa);pointer-events:none}
.st2-preset-prev > *{max-height:74px}
.st2-preset-prev .material-symbols-outlined{font-size:30px}
.st2-preset-live{overflow:hidden}
.st2-preset-name{font-size:12px;font-weight:600;color:var(--ink,#191c1e)}
.st2-preset-drop{font-size:10px;color:var(--warn,#b7791f)}
.st2-gal-search{margin-left:auto;padding:6px 10px;border:1px solid var(--border,#e0e3e5);border-radius:7px;font-size:12.5px;width:180px}
.st2-gal-x{margin-left:0}
.st2-preset{position:relative}
.st2-preset-current{border-color:var(--brand-primary,#2f64d6);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary,#2f64d6) 15%, transparent)}
.st2-preset-cur{position:absolute;top:6px;right:6px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--brand-primary,#2f64d6);color:#fff;border-radius:99px;padding:2px 7px;z-index:1}
.st2-thumb{width:100%;height:100%;display:block;padding:4px;box-sizing:border-box}
/* =================================================================
BOARD CHROME v2 — designed baseline for NON-md3 public boards
(Blank/default + org themes without a css_class hook).
Token vocabulary (all overridable per theme via the board_theme
style tag on [data-board-theme-root]; every value passes
BoardTheme::TOKEN_VALUE — colors, px/rem sizes, bare numbers,
quoted font stacks only):
--pv-board-font-title masthead title font stack
--pv-title-size masthead title size (default 26px)
--pv-title-weight masthead title weight (default 650)
--pv-sub-color masthead subtitle color
--pv-topdock-bg filter/tab dock surface
--pv-topdock-border dock border color
--pv-topdock-radius dock corner radius (default 14px)
--pv-tab-active active tab color (default brand)
--pv-tab-style 0 underline · 1 pills · 2 solid (select;
consumed via @container style() with the
underline treatment as universal fallback)
--pv-shelf-bg filter-shelf surface inside the dock
--pv-chip-radius filter-chip radius (default pill)
--pv-tile-elevation 0 flat · 1 raised · 2 floating (select;
drives a calc()-scaled shadow recipe)
--pv-density 0 compact · 1 comfortable · 2 airy
(spacing scale via calc())
Scoping law: every rule is gated on
.pub-wrap[data-pub-board]:not([class*="board-theme-md3"])
so the raw md3 blocks stay pixel-untouched. The :not() sits inside
:where() to keep specificity at .pub-wrap[data-pub-board] (0,2,0) —
low enough that per-variant tile rules (.tile.hdr-*, .tile-text
[data-section], .tile-headline-bans …) keep winning where they
should; tile-internal typography drops to (0,0,0) via a full
:where() gate so card variants always outrank it.
================================================================= */
/* Derived knobs — themes set --pv-*; CSS consumes the --pvx-* copies. */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])){
--pvx-density:var(--pv-density,1);
--pvx-elev:var(--pv-tile-elevation,1);
--pvx-accent:var(--pv-tab-active,var(--brand-primary,#2f64d6));
--pvx-dock-r:var(--pv-topdock-radius,14px);
}
/* --- Masthead: a real title, not a leftover heading --- */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-mast{
position:relative;margin:8px 2px calc(11px + var(--pvx-density)*5px);padding-bottom:13px
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-mast::after{
content:"";position:absolute;left:1px;bottom:0;width:44px;height:3px;border-radius:2px;
background:var(--pvx-accent);opacity:.9
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-title{
font-family:var(--pv-board-font-title,var(--display,'Space Grotesk','IBM Plex Sans',sans-serif));
font-size:var(--pv-title-size,26px);font-weight:var(--pv-title-weight,650);
letter-spacing:-.018em;line-height:1.14
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-sub{
font-size:13.5px;color:var(--pv-sub-color,var(--c-muted,#6b7280));margin:7px 0 0;max-width:88ch;line-height:1.55
}
/* --- Top dock: filters + tabs live on ONE intentional surface ---
Positioning (sticky vs flow) stays with the base/state rules; this
only dresses the box. */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-topdock{
background:var(--pv-topdock-bg,var(--c-panel,#fff));
border:1px solid var(--pv-topdock-border,var(--c-line,#dfe3e9));
border-radius:var(--pvx-dock-r);
padding:calc(7px + var(--pvx-density)*4px) calc(9px + var(--pvx-density)*5px);
margin:0 0 calc(11px + var(--pvx-density)*6px);
box-shadow:0 1px 2px rgba(18,24,40,.04),0 12px 26px -22px rgba(18,24,40,.30)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-topdock:has(.board-tabs){
padding-bottom:0
}
/* the inner filterbar card dissolves into the dock (no card-in-card) */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-filterbar{
margin:0;padding:2px 0;background:transparent;border:0;border-radius:0;box-shadow:none;min-height:0;gap:10px
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .fbtn{
border-radius:9px;box-shadow:none
}
/* chips: quiet pills (or whatever radius the theme asks for) */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .fchip{
border-radius:var(--pv-chip-radius,999px)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .fchip-x{
border-radius:50%
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .bf-chip{
border-radius:var(--pv-chip-radius,999px)
}
/* the population toggle speaks each theme's radius too — track, options and the
sliding thumb have to move together or the thumb stops fitting its track */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .bf-switch,
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .bf-switch-opt,
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .bf-switch-thumb{
border-radius:var(--pv-chip-radius,999px)
}
/* --- Filter shelf (inline controls inside the dock) --- */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-filter-shelf{
background:var(--pv-shelf-bg,transparent);
border-radius:calc(var(--pvx-dock-r) - 6px);
padding:2px 2px calc(6px + var(--pvx-density)*3px);box-shadow:none
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-filter-shelf-controls{
gap:calc(8px + var(--pvx-density)*3px) calc(10px + var(--pvx-density)*5px)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-filter-shelf .fctl-label{
font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted,#6b7280)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-filter-shelf .fcombo-btn{
border-radius:9px;border-color:var(--c-line,#d7dbe3)
}
/* --- Tabs: underline treatment is the class-driven baseline --- */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-topdock .board-tabs{
background:transparent;border-bottom:1px solid var(--c-line2,#e8ebf0);
margin:calc(2px + var(--pvx-density)*2px) 0 0;padding-top:0
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab{
color:var(--c-muted,#6b7280);min-width:150px;
padding:calc(8px + var(--pvx-density)*3px) 20px calc(9px + var(--pvx-density)*3px);
border-radius:10px 10px 0 0
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab:hover{
background:color-mix(in srgb,var(--pvx-accent) 7%,transparent)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab b{
font-size:14.5px;font-weight:650;letter-spacing:-.008em
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab span{
font-size:11.5px
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on{
color:var(--pvx-accent)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on::after{
left:14px;right:14px;height:3px;border-radius:3px 3px 0 0;background:var(--pvx-accent)
}
/* --pv-tab-style 1: soft pills. Style queries are unsupported ⇒ the
underline baseline above stands (graceful fallback, no broken state). */
@container style(--pv-tab-style: 1){
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-topdock .board-tabs{
border-bottom:0;gap:6px;padding-bottom:calc(6px + var(--pvx-density)*3px)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab{
border-radius:999px;min-width:0;padding:8px 16px 9px
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on{
background:color-mix(in srgb,var(--pvx-accent) 12%,transparent)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on::after{
display:none
}
}
/* --pv-tab-style 2: solid contained tabs */
@container style(--pv-tab-style: 2){
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-topdock .board-tabs{
border-bottom:0;gap:6px;padding-bottom:calc(6px + var(--pvx-density)*3px)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab{
border-radius:10px;min-width:0;padding:8px 16px 9px
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on{
background:var(--pvx-accent);color:#fff
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on span{
color:rgba(255,255,255,.82)
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-tab.on::after{
display:none
}
}
/* --- Tiles: radius + elevation recipe (0 ⇒ every term collapses to
nothing; 2 ⇒ floatier). Text/section tiles keep their own chrome. --- */
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .tile:not(.tile-text):not(.tile-section-header){
border-radius:var(--tile-radius,12px);
box-shadow:0 1px 2px rgba(18,24,40,calc(.05*var(--pvx-elev))),
0 calc(var(--pvx-elev)*6px) calc(var(--pvx-elev)*16px) calc(var(--pvx-elev)*-9px) rgba(18,24,40,calc(.09*var(--pvx-elev)))
}
.pub-wrap[data-pub-board]:where(:not([class*="board-theme-md3"])) .board-grid{
gap:calc(7px + var(--pvx-density)*5px)
}
/* --- Tile header polish: zero-specificity gate so hdr-tint/gradient/
solid variants and special tiles always outrank it. --- */
:where(.pub-wrap[data-pub-board]:not([class*="board-theme-md3"])) .tile-title{
font-weight:650;letter-spacing:-.01em
}
:where(.pub-wrap[data-pub-board]:not([class*="board-theme-md3"])) .tile-sub{
color:var(--pv-sub-color,var(--c-muted,#6b7280))
}
:where(.pub-wrap[data-pub-board]:not([class*="board-theme-md3"])) .tile-head{
padding:calc(8px + var(--pvx-density)*3px) 14px calc(7px + var(--pvx-density)*3px)
}
:where(.pub-wrap[data-pub-board]:not([class*="board-theme-md3"])) .tile-body{
padding:calc(9px + var(--pvx-density)*3px) 15px calc(11px + var(--pvx-density)*3px)
}
/* ============ Board theme preview card (themes gallery + editor) ============
Mini board driven by the same tokens the Board Chrome v2 baseline consumes;
previously duplicated in board_themes/index + edit