/* =====================================================================
   BRG Skin theme
   Colors: brgskin.com theme settings (cream #F4F1EC, off-white #FFFCF7,
   deep navy #003057, logo navy #1F3A5F, accent blue #2F5C8A,
   rosé #964D48, border #CDC8BE).
   Type and layout: Bebas Neue display + DM Sans text, outlined section
   numbers, tracked-caps labels, large numbers with small units.
   Loaded after dashboard.css and app.css.
   ===================================================================== */

:root{
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bebas Neue","Oswald","Arial Narrow",sans-serif;

  --bg:#f4f1ec; --surface:#fffcf7; --surface-2:#eee9e1; --track:#e4dfd5;
  --line:rgba(0,48,87,.11); --line-2:#e8e2d8; --rule:#cdc8be;
  --ink:#003057; --ink-2:#335977; --muted:#4d6d87; --axis:#cdc8be; --outline:#b9b3a8;
  --c1:#1f3a5f; --link:#2f5c8a;
  --rose:#964d48; --rose-ink:#7d3a36; --blush:#eee0db; --blush-2:#f6ece8;
  --good:#17713a; --bad:#b3261e; --warn:#d99a1c;
  --brand:#003057; --nav-on-bg:#003057; --nav-on-ink:#fffcf7; --focus:#2f5c8a;
  --snap-bg:#1f3a5f; --snap-ink:#f4f1ec; --snap-ink-2:#d4d6d7; --snap-muted:#b8bec5;
  --snap-line:rgba(244,241,236,.14); --snap-chip:rgba(244,241,236,.08); --snap-chip-on:#f4f1ec; --snap-chip-on-ink:#003057;
  --snap-bar:#e3b5ab; --snap-bar-hi:#f2d6cf; --snap-good:#8fe0b0; --snap-bad:#ffaaa2;
  --f1:#8fa8c2; --f2:#6a8aad; --f3:#4a6f97; --f4:#2f5c8a; --f5:#003057;
  --heat-lo:#e9edf1; --heat-hi:#7f9bba; --heat-ink:#003057;
  --tip-bg:#003057; --tip-ink:#fffcf7;
  --logo:#1f3a5f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1726; --surface:#102136; --surface-2:#172b44; --track:#20354f;
    --line:rgba(244,241,236,.10); --line-2:#1d324c; --rule:#2c4361;
    --ink:#f4f1ec; --ink-2:#c8cdd3; --muted:#9eabb9; --axis:#2c4361; --outline:#3b5574;
    --c1:#9db5d0; --link:#9db5d0;
    --rose:#e3b5ab; --rose-ink:#f2d6cf; --blush:rgba(227,181,171,.16); --blush-2:rgba(227,181,171,.08);
    --good:#5fcf8a; --bad:#f39389; --warn:#e8b14a;
    --brand:#f4f1ec; --nav-on-bg:#f4f1ec; --nav-on-ink:#003057; --focus:#9db5d0;
    --snap-bg:#17314f;
    --f1:#2f4d70; --f2:#3f6590; --f3:#5a82ae; --f4:#86a5c8; --f5:#b9cce0;
    --heat-lo:#1a2b40; --heat-hi:#45678c; --heat-ink:#f4f1ec;
    --tip-bg:#f4f1ec; --tip-ink:#003057;
    --logo:#f4f1ec;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1726; --surface:#102136; --surface-2:#172b44; --track:#20354f;
  --line:rgba(244,241,236,.10); --line-2:#1d324c; --rule:#2c4361;
  --ink:#f4f1ec; --ink-2:#c8cdd3; --muted:#9eabb9; --axis:#2c4361; --outline:#3b5574;
  --c1:#9db5d0; --link:#9db5d0;
  --rose:#e3b5ab; --rose-ink:#f2d6cf; --blush:rgba(227,181,171,.16); --blush-2:rgba(227,181,171,.08);
  --good:#5fcf8a; --bad:#f39389; --warn:#e8b14a;
  --brand:#f4f1ec; --nav-on-bg:#f4f1ec; --nav-on-ink:#003057; --focus:#9db5d0;
  --snap-bg:#17314f;
  --f1:#2f4d70; --f2:#3f6590; --f3:#5a82ae; --f4:#86a5c8; --f5:#b9cce0;
  --heat-lo:#1a2b40; --heat-hi:#45678c; --heat-ink:#f4f1ec;
  --tip-bg:#f4f1ec; --tip-ink:#003057;
  --logo:#f4f1ec;
  color-scheme:dark;
}

/* ---------- base type ---------- */
body{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg)}
.eyebrow,.brand-dept,.nav-label,.hero-l,.mini .l,.stat .l,.kpi h3,.card h3,.t th,.heat th,.tview th,
.ai .act b,.crumb,.pagefoot{font-family:var(--font);text-transform:uppercase;letter-spacing:.2em;font-weight:600}
.eyebrow{font-size:10.5px;color:var(--muted);margin-bottom:4px}

/* ---------- sidebar ---------- */
.side{background:var(--surface);border-right:1px solid var(--line)}
.brand-dept{font-size:9.5px;letter-spacing:.24em;color:var(--muted)}
.hello{font-size:13px}
.nav-label{font-size:9.5px;letter-spacing:.24em;padding-bottom:8px}
.nav a,.nav-btn{border-radius:999px;font-size:13.5px;color:var(--ink-2)}
.nav a[aria-current="true"]{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:600}
.nav a:hover,.nav-btn:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="true"]:hover{background:var(--nav-on-bg);color:var(--nav-on-ink)}
.user{border-radius:14px;background:var(--bg)}
.avatar{background:var(--brand);color:var(--surface);font-family:var(--display);font-size:16px;letter-spacing:.04em;font-weight:400}

/* ---------- page header ---------- */
.top{align-items:flex-end;padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--rule)}
.top h1,.page-title{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,64px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.page-title{font-size:clamp(40px,5vw,54px)}
.chain{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.chain i{color:var(--rose)}
.badge{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:11px;letter-spacing:.06em;font-weight:600;padding:7px 14px}

/* ---------- sections: outlined number, eyebrow, display title ---------- */
.view{counter-reset:sec}
.sec{margin-top:52px}
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px;align-items:start;margin-bottom:18px}
.sec-head::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);font-family:var(--display);font-size:76px;line-height:.78;
  color:transparent;-webkit-text-stroke:1.2px var(--outline);letter-spacing:.02em;padding-top:2px}
@supports not (-webkit-text-stroke:1px black){.sec-head::before{color:var(--line-2)}}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,42px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.sowhat{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:72ch}
.tag{align-self:start;border:0;background:var(--blush);color:var(--rose-ink);font-size:11.5px;font-weight:700;padding:4px 12px;margin-top:6px}
@media (max-width:640px){
  .sec-head{grid-template-columns:auto minmax(0,1fr);column-gap:14px}
  .sec-head::before{font-size:52px}
  .sec-head .tag{grid-column:2;justify-self:start;margin-top:10px}
}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.card h3{font-size:10.5px;color:var(--ink-2);letter-spacing:.2em}
.card .sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.note{font-size:12px;color:var(--muted)}
.grid-2,.stack,.two{gap:16px}

/* ---------- executive snapshot: the dark "results at a glance" band ---------- */
.snap{background:var(--snap-bg);border-radius:20px;padding:24px}
.snap-head h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.snap-range{font-size:12.5px}
.seg{background:var(--snap-chip)}
.seg button{font-size:12px;letter-spacing:.04em}
.hero-l{font-size:10.5px;color:var(--snap-muted)}
.hero-v{font-family:var(--display);font-weight:400;font-size:clamp(64px,8vw,92px);line-height:.88;letter-spacing:.01em;margin-top:8px}
.mini{border-radius:16px;padding:16px;background:var(--snap-chip);border:1px solid var(--snap-line)}
.mini .l{font-size:9.5px;letter-spacing:.22em}
.mini .v{font-family:var(--display);font-weight:400;font-size:44px;line-height:.95;letter-spacing:.01em;margin-top:8px}
.mini .s{font-size:12px}
.share{background:rgba(244,241,236,.16)}
.link-btn{border-radius:999px;padding:5px 12px}

/* KPI tiles: label, big number, small unit, definition */
.kpis{gap:14px;margin-top:16px}
.kpi{border-radius:18px;padding:18px 18px 16px;background:var(--surface);border:1px solid var(--line)}
.kpi h3{font-size:9.5px;letter-spacing:.22em;color:var(--ink-2)}
.kpi .v{font-family:var(--display);font-weight:400;font-size:50px;line-height:.92;letter-spacing:.01em;margin-top:14px;color:var(--ink)}
.kpi .d{margin-top:10px;font-size:12px}
.kpi .def{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px}
.stat{border-radius:14px;padding:14px;background:var(--bg);border:1px solid var(--line)}
.stat .l{font-size:9.5px;letter-spacing:.2em;color:var(--ink-2)}
.stat .v{font-family:var(--display);font-weight:400;font-size:38px;line-height:.95;letter-spacing:.01em;margin-top:8px}
.stat .s{font-size:12px;margin-top:4px}

/* units drawn smaller, as in "64%" and "$7.8M" (wrapped by dashboard.js) */
.u{font-size:.5em;margin-left:.05em;letter-spacing:.02em;opacity:.78}
.u-pre{font-size:.56em;vertical-align:.5em;margin-right:.03em;opacity:.85}

/* ---------- deltas ---------- */
.delta{font-size:12px}

/* ---------- tables ---------- */
.t caption{font-size:12px;color:var(--muted)}
.t th{font-size:9.5px;letter-spacing:.18em;color:var(--ink-2);border-bottom:1px solid var(--rule);padding:10px}
.t td{border-bottom:1px solid var(--line-2);padding:11px 10px}
.t td:first-child{color:var(--ink)}
.t tbody tr:hover td{background:var(--blush-2)}
.t tfoot td{border-top:1px solid var(--rule)}
.t tr.sel td{background:var(--nav-on-bg);color:var(--nav-on-ink)}
.t tr.grp td{font-size:9.5px;letter-spacing:.2em;color:var(--rose-ink)}

/* thin bars: navy for now, track for the base, rosé tick for the target */
.mbar .track,.dev-r .tr,.fr .tr,.br .tr{background:var(--track)}
.mbar .fill,.dev-r .fb,.br .fb{background:var(--c1)}
.br .fb.tot{background:var(--rose)}
.mbar .tick,.legend .tick-s{background:var(--rose);opacity:1}
.fr .n{font-weight:600}

/* ---------- pills, callouts, highlights ---------- */
.pill{border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:11.5px}
.pill.run{background:var(--blush);color:var(--rose-ink);border-color:transparent}
.pill.good{border-color:currentColor}
.callout{border-left:3px solid var(--rose);background:var(--blush-2);border-radius:0 14px 14px 0;color:var(--ink-2)}
.callout svg{stroke:var(--rose)}
.goto,.field small a{color:var(--link)}
mark,.hl{background:var(--blush);color:inherit;padding:0 .18em;border-radius:3px}
.flag svg{fill:var(--warn)}

/* ---------- AI insight cards ---------- */
.ai{position:relative;padding-top:24px}
.ai::before{content:"";position:absolute;left:20px;top:0;width:44px;height:3px;background:var(--rose);border-radius:0 0 2px 2px}
.ai h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.ai p{font-size:13.5px}
.ai .act b{font-size:9.5px;letter-spacing:.2em;color:var(--rose-ink)}

/* ---------- projection ---------- */
.steps li{border-radius:16px;background:var(--bg)}
.steps li::before{width:auto;height:auto;border-radius:0;background:none;color:transparent;-webkit-text-stroke:1px var(--outline);
  font-family:var(--display);font-weight:400;font-size:44px;line-height:.85;content:counter(step,decimal-leading-zero);display:block}
.steps h3{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.seg2 button[aria-pressed="true"]{background:var(--brand);color:var(--surface);box-shadow:none}

/* ---------- definitions, footer ---------- */
.defs summary{border-radius:999px;font-size:13px}
.foot{margin-top:28px;font-size:12px;color:var(--muted);max-width:80ch}
.pagefoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.22em;color:var(--muted)}

/* ---------- forms and settings ---------- */
.btn{border-radius:999px;font-size:13px;letter-spacing:.01em}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--surface)}
.field>span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.field small{text-transform:none;letter-spacing:0;font-size:11.5px}
.field input,.field select{border-radius:12px;background:var(--surface);border-color:var(--rule)}
.page-head{padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--rule);align-items:flex-end}
.page-sub{margin-top:10px}
.crumb{font-size:10px;letter-spacing:.2em;margin-bottom:6px}
.card-title{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1;margin-bottom:16px}
.flash{border-radius:14px}

/* ---------- sign-in ---------- */
.auth-card{border-radius:20px;padding:30px 28px;border-color:var(--line);background:var(--surface)}
.auth-title{font-family:var(--display);font-weight:400;font-size:46px;line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.auth-sub{margin:10px 0 22px}
.auth-card .page-title{font-size:40px}

/* ---------- tooltip ---------- */
.tip{border-radius:10px;font-family:var(--font)}

@media (max-width:880px){
  .nav a,.nav-btn{border:1px solid var(--line)}
  .nav a[aria-current="true"]{border-color:var(--nav-on-bg)}
  .top{margin-bottom:20px}
  .sec{margin-top:40px}
}
@media (forced-colors: active){.sec-head::before,.steps li::before{color:CanvasText;-webkit-text-stroke:0}}

/* ---------- layout fixes after review ---------- */
#t-tests{min-width:0}
#t-tests td:first-child{white-space:normal}
.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.ai-grid{grid-template-columns:minmax(0,1fr)}}
.ai h3{font-family:var(--font);font-weight:700;font-size:17px;line-height:1.35;letter-spacing:0;text-transform:none}