/* ============================================================
   Cloud Cost Analytics — Design System
   Server-rendered, token-driven, accessible.

   Inherited wholesale from the sibling POAnalyzer design system, with the
   brand hue re-pitched and nothing else touched. The categorical --series-*
   slots in particular are left exactly as they were: their ordering is a
   validated colour-vision-deficiency safety mechanism, not decoration, and
   re-picking them to "match the brand" would quietly invalidate it.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700;800&display=swap');

:root {
  /* Brand — plum/cyan. The three siblings already hold violet (ITSM), indigo
     (Incident) and teal (PO), and the whole point of differentiating is that
     nobody opens the wrong dashboard and reads the wrong numbers. Plum is the
     nearest hue family none of them occupy, and it stays clear of all four
     semantic colours (good green, warn amber, bad red, info blue) so a brand
     surface is never mistaken for a status one. */
  --primary:#a21caf; --primary-hover:#86198f; --primary-soft:#fae8ff;
  --accent:#0891b2; --accent-2:#f59e0b;
  /* Neutrals (slate) */
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0; --g300:#cbd5e1; --g400:#94a3b8;
  --g500:#64748b; --g600:#475569; --g700:#334155; --g800:#1e293b; --g900:#0f172a;
  /* Semantic */
  --good:#16a34a; --good-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7;
  --bad:#dc2626; --bad-bg:#fee2e2; --info:#0369a1; --info-bg:#e0f2fe;
  /* Surfaces */
  --bg:#faf7fb; --surface:#fff; --surface-2:#f8fafc; --border:#e2e8f0; --border-strong:#cbd5e1;
  --text:#0f172a; --text-muted:#475569; --text-subtle:#64748b;
  /* ---- Data-viz -------------------------------------------------------
     Categorical slots are assigned in fixed order and never cycled; a 9th
     series folds into "All other". This ordering is the CVD-safety
     mechanism, not cosmetics — re-ordering invalidates it. Validated in both
     modes against this app's own surfaces (#fff / #0f172a). Light slots 3/4/5
     sit under 3:1 on white, so charts using them ship direct labels or the
     table view (the relief rule). */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
  /* Sequential (magnitude, one hue light->dark). Ordinal marks start at 250. */
  --seq-250:#eab8f0; --seq-350:#dc8fe4; --seq-450:#c44bd0; --seq-550:#a21caf; --seq-650:#76207e;
  /* Chart chrome — recessive by design */
  --viz-grid:#e1e0d9; --viz-axis:#c3c2b7; --viz-ink:#0b0b0b; --viz-ink-2:#52514e; --viz-muted:#898781;
  /* Projected/estimated marks: same hue, reduced presence + a legend entry */
  --viz-estimate:#ddb3e2;
  /* Radius / shadow / motion */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --sh:0 2px 4px rgba(16,24,40,.06),0 4px 8px rgba(16,24,40,.08),0 12px 24px rgba(16,24,40,.06);
  --sh-lg:0 12px 24px rgba(16,24,40,.10),0 24px 48px rgba(16,24,40,.12);
  --ring:0 0 0 1px rgba(16,24,40,.06);
  --focus:#a21caf;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.05,.7,.1,1);
  --font:'Inter',system-ui,sans-serif; --font-display:'Space Grotesk',var(--font); --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --sidebar-w:248px; --topbar-h:64px;
}
/* Dark mode is *selected*, not an automatic flip: the series hues below are
   the same eight, re-stepped for the dark surface and validated as a set.
   The token list is duplicated across two scopes on purpose — the media query
   honours the OS setting, the attribute selector honours the in-app toggle,
   and the toggle must win in BOTH directions (hence :not([data-theme="light"])
   so an explicit light choice beats OS dark). Keep the two blocks in sync. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#140a14; --surface:#1e0f1e; --surface-2:#281528; --border:#351e35; --border-strong:#4d2f4d;
    --text:#e2e8f0; --text-muted:#94a3b8; --text-subtle:#64748b;
    --primary:#e879f9; --primary-hover:#d946ef; --primary-soft:#3b1539;
    --good-bg:#052e1a; --warn-bg:#3a2a06; --bad-bg:#3a0f0f; --info-bg:#082f44;
    --ring:0 0 0 1px rgba(255,255,255,.06); --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh:0 6px 18px -4px rgba(0,0,0,.55); --sh-lg:0 22px 50px -12px rgba(0,0,0,.7);
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
    --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
    --seq-250:#76207e; --seq-350:#a21caf; --seq-450:#c44bd0; --seq-550:#dc8fe4; --seq-650:#eab8f0;
    --viz-grid:#2c2c2a; --viz-axis:#383835; --viz-ink:#fff; --viz-ink-2:#c3c2b7; --viz-muted:#898781;
    --viz-estimate:#a21caf;
  }
}
[data-theme="dark"]{
  --bg:#140a14; --surface:#1e0f1e; --surface-2:#281528; --border:#351e35; --border-strong:#4d2f4d;
  --text:#e2e8f0; --text-muted:#94a3b8; --text-subtle:#64748b;
  --primary:#e879f9; --primary-hover:#d946ef; --primary-soft:#3b1539;
  --good-bg:#052e1a; --warn-bg:#3a2a06; --bad-bg:#3a0f0f; --info-bg:#082f44;
  --ring:0 0 0 1px rgba(255,255,255,.06); --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh:0 6px 18px -4px rgba(0,0,0,.55); --sh-lg:0 22px 50px -12px rgba(0,0,0,.7);
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
  --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
  --seq-250:#76207e; --seq-350:#a21caf; --seq-450:#c44bd0; --seq-550:#dc8fe4; --seq-650:#eab8f0;
  --viz-grid:#2c2c2a; --viz-axis:#383835; --viz-ink:#fff; --viz-ink-2:#c3c2b7; --viz-muted:#898781;
  --viz-estimate:#a21caf;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.025em;line-height:1.1}
.tnum{font-variant-numeric:tabular-nums}

/* A11y */
.skip-link{position:absolute;left:12px;top:-48px;z-index:2000;background:var(--primary);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:600;transition:top .18s}
.skip-link:focus{top:0}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
::selection{background:rgba(162,28,175,.22)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---- App shell ---- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;z-index:100;overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.sb-brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;flex-shrink:0}
.sb-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);font-weight:600;padding:14px 12px 6px}
.sb-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--text-muted);font-weight:500;font-size:.9rem;transition:background .15s,color .15s}
.sb-link svg{width:18px;height:18px;flex-shrink:0}
.sb-link:hover{background:var(--surface-2);color:var(--text)}
.sb-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sb-foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--border);font-size:.8rem;color:var(--text-subtle);display:flex;align-items:center;gap:10px;justify-content:space-between}
.main{grid-column:2;display:flex;flex-direction:column;min-width:0}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;height:var(--topbar-h);z-index:90;display:flex;align-items:center;gap:16px;padding:0 28px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.topbar h1{font-size:1.25rem;font-weight:700;margin-right:auto}
.tb-control{display:flex;align-items:center;gap:8px}
.select,.btn{font-family:var(--font);font-size:.85rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.select:hover,.btn:hover{border-color:var(--border-strong)}
.btn-primary{background:var(--primary);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 4px 12px rgba(162,28,175,.22)}
.btn-primary:hover{background:var(--primary-hover)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer}
.icon-btn svg{width:18px;height:18px}

/* ---- Content ---- */
.content{padding:28px;max-width:1320px;width:100%}
.page-intro{color:var(--text-muted);font-size:.92rem;margin-bottom:24px;max-width:70ch}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px}
.sec-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);font-weight:600}
.sec-head h2{font-size:1.4rem;font-weight:700}
.sec-head a{font-size:.82rem;color:var(--primary);font-weight:600}

/* ---- Cards ---- */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);padding:22px}
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)}
/* 200px rather than 220px so a five-KPI row fits across at 1440px instead of
   wrapping one card onto a line of its own. */
.cols-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:1000px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* ---- KPI ---- */
.kpi{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);padding:20px 22px;overflow:hidden;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--ring),var(--sh)}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent-bar,var(--g300))}
.kpi.good::before{background:var(--good)} .kpi.warn::before{background:var(--warn)} .kpi.bad::before{background:var(--bad)} .kpi.brand::before{background:linear-gradient(90deg,var(--primary),var(--accent))}
.kpi .k-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-subtle);font-weight:600}
.kpi .k-value{font-family:var(--font-mono);font-size:clamp(1.45rem,2.1vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .k-sub{font-size:.78rem;color:var(--text-subtle)}
.delta{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;width:fit-content}
.delta.up{background:var(--bad-bg);color:var(--bad)} .delta.down{background:var(--good-bg);color:var(--good)} .delta.flat{background:var(--g100);color:var(--text-subtle)}
.delta.good{background:var(--good-bg);color:var(--good)} .delta.bad{background:var(--bad-bg);color:var(--bad)}

/* ---- Insight & alert cards ---- */
.insight{display:flex;gap:14px;padding:16px 18px;background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);border-left:4px solid var(--info)}
.insight.good{border-left-color:var(--good)} .insight.warn{border-left-color:var(--warn)} .insight.bad{border-left-color:var(--bad)} .insight.brand{border-left-color:var(--primary)}
.insight .i-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--info-bg);color:var(--info)}
.insight.good .i-icon{background:var(--good-bg);color:var(--good)} .insight.warn .i-icon{background:var(--warn-bg);color:var(--warn)} .insight.bad .i-icon{background:var(--bad-bg);color:var(--bad)} .insight.brand .i-icon{background:var(--primary-soft);color:var(--primary)}
.insight h3{font-family:var(--font);font-size:.95rem;font-weight:700;margin-bottom:3px}
.insight p{font-size:.85rem;color:var(--text-muted);line-height:1.5}
.insight .i-action{font-size:.82rem;color:var(--primary);font-weight:600;margin-top:6px;display:inline-block}
.insight .i-body{min-width:0}
.i-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* ---- Opportunity band ---- */
.opp{background:radial-gradient(circle at 0% 0%,rgba(162,28,175,.22),transparent 45%),radial-gradient(circle at 100% 0%,rgba(245,158,11,.16),transparent 50%),linear-gradient(135deg,#a21caf,#7e22ce 55%,#0891b2 145%);color:#fff;border-radius:var(--r-lg);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:0 10px 28px rgba(162,28,175,.28)}
.opp .o-fig{font-family:var(--font-mono);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.opp .o-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-bottom:6px}
.opp .o-note{font-size:.82rem;opacity:.92;max-width:440px;line-height:1.45}

/* ---- Badges, chart cards, tables ---- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:.74rem;font-weight:600}
.badge.good{background:var(--good-bg);color:var(--good)} .badge.warn{background:var(--warn-bg);color:var(--warn)} .badge.bad{background:var(--bad-bg);color:var(--bad)} .badge.neutral{background:var(--g100);color:var(--text-muted)}
[data-theme="dark"] .badge.neutral{background:var(--surface-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge.neutral{background:var(--surface-2)}}
.chart-card h2{font-family:var(--font);font-size:1rem;font-weight:700;margin-bottom:2px}
.chart-card .c-note{font-size:.76rem;color:var(--text-subtle);margin-bottom:12px}
.chart-card figcaption{margin-bottom:14px}
.plot{width:100%;height:300px}
.chart-note{font-size:.78rem;color:var(--text-subtle);margin-top:10px}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
table.tbl th{text-align:left;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--surface-2)}
.muted{color:var(--text-subtle)} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- Sidebar nav list ---- */
.sb-nav ul{list-style:none}
.sb-nav + .sb-nav{margin-top:2px}
.sb-user{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-sm{padding:5px 11px;font-size:.78rem}

/* ---- Provenance strip ----
   Where the numbers come from, kept adjacent to them rather than footnoted. */
.prov{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.79rem;color:var(--text-subtle);
      background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
      padding:9px 14px;margin-bottom:20px}
.prov strong{color:var(--text-muted);font-weight:600}
.prov-sep{opacity:.5}
.prov-flag{color:var(--warn);font-weight:600}

/* ---- The answer block ----
   Each section leads with its conclusion, not its charts. */
.answer{border-radius:var(--r-lg);padding:24px 28px;margin-bottom:24px;background:var(--surface);
        box-shadow:var(--ring),var(--sh-sm);border-left:5px solid var(--info)}
.answer-good{border-left-color:var(--good)} .answer-warn{border-left-color:var(--warn)}
.answer-bad{border-left-color:var(--bad)} .answer-info{border-left-color:var(--info)}
/* An opportunity, not a fault — brand rather than a status colour, so it is
   never mistaken for something going wrong. */
.answer-brand{border-left-color:var(--primary)}
.answer .a-text{font-family:var(--font-display);font-size:clamp(1.35rem,2.6vw,1.9rem);
                font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--text)}
.answer .a-detail{margin-top:8px;font-size:.94rem;color:var(--text-muted);max-width:74ch}

/* ---- KPI extras ---- */
.k-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:22px}
/* The confidence sentence under a duration KPI. Small on purpose — it is the
   qualifier on the headline number, not a competing headline. */
.kpi .k-ci{font-size:.74rem;color:var(--text-subtle);line-height:1.45;
           border-top:1px solid var(--border);padding-top:7px;margin-top:3px}

/* ---- Recommended actions ---- */
.actions{list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:act}
.act{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
     background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);padding:18px 22px}
.act::before{counter-increment:act;content:counter(act);flex-shrink:0;width:28px;height:28px;
             border-radius:50%;background:var(--primary-soft);color:var(--primary);
             display:grid;place-items:center;font-size:.82rem;font-weight:700;font-family:var(--font-mono)}
.act-body{flex:1;min-width:min(100%,320px)}
.act-body h3{font-family:var(--font);font-size:.95rem;font-weight:700;margin-bottom:3px}
.act-body p{font-size:.86rem;color:var(--text-muted);line-height:1.5}
.act-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Table view — the accessibility fallback under every chart, and the relief
   for palette slots that sit under 3:1 on the light surface. */
.tbl-view{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.tbl-view summary{font-size:.8rem;color:var(--primary);font-weight:600;cursor:pointer;
                  padding:4px 2px;border-radius:6px;width:fit-content}
.tbl-view summary:hover{text-decoration:underline}
.tbl-view[open] summary{margin-bottom:8px}
.tbl-scroll{overflow-x:auto;max-height:340px;overflow-y:auto}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}

/* ---- Savings levers ----
   Each lever shows its own arithmetic, because a savings total nobody can
   take apart is a savings total nobody believes. */
.levers{display:flex;flex-direction:column;gap:14px}
.lever{background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);
       padding:18px 22px;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start}
.lever h3{font-family:var(--font);font-size:.98rem;font-weight:700}
.lever .l-basis{font-size:.84rem;color:var(--text-muted);line-height:1.5;grid-column:1}
.lever .l-assume{font-size:.78rem;color:var(--text-subtle);grid-column:1;margin-top:2px}
.lever .l-figs{grid-row:1 / span 3;text-align:right;display:flex;flex-direction:column;gap:2px}
.lever .l-annual{font-family:var(--font-mono);font-size:1.35rem;font-weight:800;
                 letter-spacing:-.02em;color:var(--primary)}
.lever .l-measured{font-size:.76rem;color:var(--text-subtle)}
.lever-total{display:flex;justify-content:space-between;align-items:center;gap:18px;
             padding:18px 22px;background:var(--surface);border-radius:var(--r);
             box-shadow:var(--ring),var(--sh-sm);border-top:3px solid var(--primary);
             font-size:.9rem;color:var(--text-muted);flex-wrap:wrap}
.lever-total strong{font-family:var(--font-mono);font-size:clamp(1.4rem,2.6vw,1.9rem);
                    color:var(--primary);letter-spacing:-.02em}
@media(max-width:760px){
  .lever{grid-template-columns:1fr}
  .lever .l-figs{grid-row:auto;text-align:left}
}

/* ---- State cards (Overview) ----
   One per section, each showing that section's own headline so the roll-up
   and the detail page can never disagree. */
.state-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--surface);
            border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);
            border-left:5px solid var(--info);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.state-card:hover{transform:translateY(-3px);box-shadow:var(--ring),var(--sh)}
.state-good{border-left-color:var(--good)} .state-warn{border-left-color:var(--warn)}
.state-bad{border-left-color:var(--bad)} .state-info{border-left-color:var(--info)}
.state-brand{border-left-color:var(--primary)}
.state-card .s-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
                     color:var(--text-subtle);font-weight:600}
.state-card .s-answer{font-family:var(--font-display);font-size:1.05rem;font-weight:700;
                      line-height:1.25;letter-spacing:-.015em}
.state-card .s-detail{font-size:.84rem;color:var(--text-muted);line-height:1.5}
.state-card .s-go{font-size:.8rem;color:var(--primary);font-weight:600;margin-top:4px}

/* ---- Export cards (Executive) ---- */
.exports{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.export-card{display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:var(--surface);
             border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm)}
.export-card h3{font-family:var(--font);font-size:.98rem;font-weight:700}
.export-card p{font-size:.84rem;color:var(--text-muted);line-height:1.5;flex:1}
.export-card .btn{width:fit-content;margin-top:4px}
.cost-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cost-item{padding:16px 18px;background:var(--surface-2);border-radius:var(--r-sm)}
.cost-item dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
              color:var(--text-subtle);font-weight:600;margin-bottom:4px}
.cost-item dd{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.cost-item .src{font-size:.74rem;color:var(--text-subtle);font-family:var(--font);
                font-weight:400;letter-spacing:0;display:block;margin-top:4px;line-height:1.45}

/* ---- Explorer filters ----
   One block above the results, not a sidebar: filters are read left-to-right
   before the data, and a form post keeps every selection shareable as a URL. */
.filters{background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);
         padding:18px 20px;margin-bottom:20px;display:flex;flex-direction:column;gap:14px}
.filter-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;min-width:160px;flex:1}
.field-wide{flex:2.4;min-width:260px}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
             color:var(--text-subtle);font-weight:600}
.field input,.field select{font-family:var(--font);font-size:.86rem;padding:9px 11px;
                           border-radius:var(--r-sm);border:1px solid var(--border);
                           background:var(--surface);color:var(--text);width:100%}
.field input:hover,.field select:hover{border-color:var(--border-strong)}
.field-actions{flex-direction:row;gap:8px;align-items:center;flex:0 0 auto;min-width:0}

.results-head{display:flex;justify-content:space-between;align-items:flex-end;
              gap:16px;flex-wrap:wrap;margin-bottom:16px}
.results-count{font-size:.95rem}
.results-count strong{font-family:var(--font-mono);font-size:1.25rem;color:var(--text)}

.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;
       flex-wrap:wrap;padding-top:14px;margin-top:4px;border-top:1px solid var(--border);
       font-size:.82rem}
.pager-controls{display:flex;align-items:center;gap:12px}

.empty{text-align:center;padding:48px 20px;display:flex;flex-direction:column;
       align-items:center;gap:10px}
.empty h3{font-size:1.05rem}

/* ---- Auth screens ----
   No app shell: there is nothing to navigate to until you are signed in. */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:24px;
           background:radial-gradient(circle at 15% 0%,rgba(162,28,175,.16),transparent 45%),
                      radial-gradient(circle at 85% 100%,rgba(245,158,11,.12),transparent 45%),
                      var(--bg)}
.auth-shell{width:100%;max-width:420px;display:flex;flex-direction:column;gap:16px}
.auth-card{background:var(--surface);border-radius:var(--r-lg);padding:32px;
           box-shadow:var(--ring),var(--sh-lg);display:flex;flex-direction:column;gap:6px}
.auth-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
            font-weight:700;font-size:1.05rem;margin-bottom:14px}
.auth-brand .logo{width:34px;height:34px;border-radius:10px;
                  background:linear-gradient(135deg,var(--primary),var(--accent));
                  display:grid;place-items:center;color:#fff;flex-shrink:0}
.auth-card h1{font-size:1.5rem}
.auth-sub{font-size:.88rem;color:var(--text-muted);margin-bottom:18px;line-height:1.5}
.auth-form{display:flex;flex-direction:column;gap:14px;margin-bottom:10px}
.auth-flash{padding:11px 14px;border-radius:var(--r-sm);font-size:.85rem;margin-bottom:14px}
.auth-flash.bad{background:var(--bad-bg);color:var(--bad)}
.auth-flash.good{background:var(--good-bg);color:var(--good)}
.auth-foot{text-align:center;font-size:.85rem;color:var(--text-muted)}
.auth-foot a{color:var(--primary);font-weight:600}
.field-hint{font-size:.76rem;color:var(--text-subtle)}
.field-inline{font-family:var(--font);font-size:.82rem;padding:5px 9px;border-radius:8px;
              border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn-block{width:100%;justify-content:center;text-align:center;padding:11px 16px;font-size:.92rem}
.btn-quiet{margin-top:2px;background:transparent;border-style:dashed}

/* ---- Upload ---- */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--r);padding:34px 20px;
          text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;
          gap:10px;color:var(--text-muted);transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--primary);background:var(--primary-soft)}
.dropzone p{font-size:.9rem;line-height:1.5}
.upload-progress{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.upload-progress .bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.upload-progress .bar-fill{height:100%;width:0;border-radius:999px;
                           background:linear-gradient(90deg,var(--primary),var(--accent));
                           transition:width .4s var(--ease)}
#upload-result{margin-top:14px}

/* ---- Target attainment ----
   Replaces single-month RAG. The tick strip is the point: it shows how many of
   the last twelve months hit the target, which a colour dot cannot. */
.attain{background:var(--surface);border-radius:var(--r);box-shadow:var(--ring),var(--sh-sm);
        padding:18px 20px;border-left:5px solid var(--info);display:flex;
        flex-direction:column;gap:6px}
.attain-good{border-left-color:var(--good)} .attain-warn{border-left-color:var(--warn)}
.attain-bad{border-left-color:var(--bad)}
.attain .a-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.attain .a-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;
                 color:var(--text-subtle);font-weight:600}
.attain .a-level{font-family:var(--font-display);font-size:1.05rem;font-weight:700;
                 letter-spacing:-.015em}
.attain .a-bar{display:flex;gap:3px;margin:6px 0 2px}
.attain .a-tick{flex:1;height:8px;border-radius:3px;background:var(--g200);min-width:6px}
.attain .a-tick.met{background:var(--good)}
[data-theme="dark"] .attain .a-tick{background:var(--border-strong)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .attain .a-tick{background:var(--border-strong)}}
.attain .a-summary{font-size:.86rem;color:var(--text-muted);line-height:1.5}
.attain .a-meta{font-size:.8rem;color:var(--text-subtle)}
.attain .a-std{font-size:.74rem;color:var(--text-subtle);opacity:.85;line-height:1.45}

/* ---- Screen-reader only ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Responsive ---- */
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sh-lg)}
  .sidebar.open{transform:none}
  .main{grid-column:1}
  .menu-btn{display:grid!important}
  .content{padding:20px 16px}
  .answer{padding:20px}
}
.menu-btn{display:none}

/* ---- Interactive layer ----------------------------------------------------
   Controls sit *above* the chart they change, and the active-filter chips sit
   above everything: a filter you cannot see is a filter that silently makes
   every number on the page wrong for somebody. */
.filter-bar-host{margin-bottom:14px}
.ifilters{gap:12px}
.ifilters-foot{display:flex;justify-content:space-between;align-items:center;
               gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);
               padding-top:12px;margin-top:2px}
.ifilters-summary{font-size:.84rem;color:var(--text-muted);
                  font-variant-numeric:tabular-nums;margin:0}
.ifilters-actions{display:flex;gap:8px;align-items:center}

/* Active filter chips — each one removable, so undoing a slice is one click. */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.chips-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
             color:var(--text-subtle);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
      border-radius:var(--r-pill);border:1px solid var(--primary);
      background:var(--primary-soft);color:var(--primary);
      font-size:.78rem;font-weight:600;font-family:var(--font);cursor:pointer;
      transition:background .15s,border-color .15s}
.chip:hover{background:var(--primary);color:#fff}
.chip-x{font-size:1rem;line-height:1;opacity:.8}

/* Per-chart controls. Deliberately quiet — they are instruments, not content,
   and should not compete with the chart for attention. */
.chart-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
                padding:12px 14px;margin-bottom:14px;border-radius:var(--r-sm);
                background:var(--surface-2);border:1px solid var(--border)}
.chart-controls .field{min-width:120px;flex:0 1 auto;gap:4px}
.chart-controls .field label{font-size:.66rem;letter-spacing:.05em}
.chart-controls .field select{font-size:.8rem;padding:6px 9px}

.chart-status{font-variant-numeric:tabular-nums;min-height:1.2em}

/* A chart mid-fetch fades rather than blanking, so the page does not jump and
   the previous answer stays readable until the new one arrives. */
.plot.loading{opacity:.45;transition:opacity .15s}

@media(max-width:760px){
  .chart-controls .field{min-width:calc(50% - 6px)}
  .ifilters-foot{flex-direction:column;align-items:flex-start}
}

/* A chart that could not load says so, in the space it would have occupied.
   The table underneath is server-rendered, so the numbers are never lost with
   the picture. */
.plot-fallback{display:flex;align-items:center;justify-content:center;height:100%;
               padding:20px;text-align:center;font-size:.86rem;
               color:var(--text-subtle);background:var(--surface-2);
               border:1px dashed var(--border-strong);border-radius:var(--r-sm)}

/* ---- Cloud Cost additions -------------------------------------------------
   Two components the sibling design system had no equivalent of. Appended
   rather than woven in, so a future update to the shared stylesheet can be
   diffed against POAnalyzer's without this block getting in the way. */

/* A savings lever's header: the label and the measured/modelled badge, which
   is the most important word on the card. */
.l-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.l-head h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em}

/* "What this analysis cannot tell you." A definition list rather than a table:
   these are questions and answers, not rows and columns. */
.limits{display:grid;gap:14px}
.limits dt{font-weight:700;font-size:.94rem;color:var(--text)}
.limits dt::before{content:'?';display:inline-grid;place-items:center;width:20px;height:20px;
  margin-right:8px;border-radius:50%;background:var(--warn-bg);color:var(--warn);
  font-size:.72rem;font-weight:800;vertical-align:1px}
.limits dd{font-size:.88rem;color:var(--text-muted);line-height:1.6;padding-left:28px}

/* The movement waterfall on Trends. Four buckets that must add to the net
   change; the colour says which direction, the sign says how much. */
.moves{display:grid;gap:8px}
.move{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--border)}
.move-name{font-weight:600;font-size:.88rem}
.move-meta{font-size:.76rem;color:var(--text-subtle)}
.move-val{font-family:var(--font-mono);font-weight:700;font-size:.9rem;white-space:nowrap}
.move.grew .move-val,.move.arrived .move-val{color:var(--bad)}
.move.shrank .move-val,.move.departed .move-val{color:var(--good)}

/* Explorer paging. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.pager .muted{font-size:.84rem}

/* Upload and refresh, on the admin surface. */
.upload-zone{border:2px dashed var(--border-strong);border-radius:var(--r);padding:28px;
  text-align:center;transition:border-color .15s,background .15s;background:var(--surface-2)}
.upload-zone.over{border-color:var(--primary);background:var(--primary-soft)}
.prog{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;
  border:1px solid var(--border)}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .3s var(--ease)}

/* Segmented control in the topbar — the Overview role switch, the export pair. */
.role-toggle{display:flex;gap:6px;margin-left:auto;margin-right:8px}
@media (max-width:720px){.role-toggle{display:none}}

/* ---- Recommendations -----------------------------------------------------
   Deliberately the loudest thing on any screen it appears on.

   A finding tells a reader something; a recommendation asks them to do
   something. Before this existed the two rendered almost identically and the
   asks disappeared into the evidence around them. The highlight is not
   decoration — it is the difference between a page that informs and a page
   that is actionable.

   Colour is not doing the work alone: there is a numbered marker, a heavier
   left edge, an uppercase eyebrow and a raised surface, so the block still
   reads as "act on this" in greyscale, in print, and under any CVD. */
.recs{display:grid;gap:14px;counter-reset:rec}
.rec{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:16px;
  align-items:start;padding:20px 22px 20px 20px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--primary-soft),var(--surface) 62%);
  border:1px solid var(--border);border-left:5px solid var(--primary);
  box-shadow:var(--sh-sm)}
.rec::before{counter-increment:rec;content:counter(rec);
  display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;
  border-radius:50%;background:var(--primary);color:#fff;
  font-family:var(--font-mono);font-size:.9rem;font-weight:800}
.rec-body{min-width:0}
.rec-eyebrow{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--primary);font-weight:800;margin-bottom:4px}
.rec-title{font-family:var(--font-display);font-size:1.06rem;font-weight:700;
  letter-spacing:-.01em;line-height:1.3;margin-bottom:6px}
.rec-detail{font-size:.9rem;color:var(--text-muted);line-height:1.6}
.rec-evidence{font-size:.84rem;color:var(--text-subtle);line-height:1.55;
  margin-top:8px;padding-left:12px;border-left:2px solid var(--border-strong)}
/* The condition is the part that decides whether the money exists at all.
   Amber, not grey: a reader who skims past it books a saving they may not have. */
.rec-condition{font-size:.84rem;line-height:1.55;margin-top:10px;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn);font-weight:500}
.rec-condition strong{font-weight:800}
.rec-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  text-align:right;flex-shrink:0}
.rec-impact{font-family:var(--font-mono);font-size:1.14rem;font-weight:800;
  color:var(--primary);white-space:nowrap;line-height:1.1}
.rec-impact.soft{color:var(--text-muted);font-size:.98rem}
.rec-basis{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.rec-basis.measured{color:var(--good)} .rec-basis.modelled{color:var(--info)}
.rec-basis.conditional{color:var(--warn)}
@media (max-width:860px){
  .rec{grid-template-columns:auto 1fr;padding:16px}
  .rec-meta{grid-column:1/-1;flex-direction:row;align-items:center;
    justify-content:space-between;text-align:left;width:100%;
    padding-top:10px;border-top:1px solid var(--border)}
}
/* A banner above the list, so the total is impossible to miss. */
.rec-total{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:16px;border-radius:var(--r);
  background:var(--primary);color:#fff;box-shadow:var(--sh)}
.rec-total .n{font-family:var(--font-mono);font-size:1.7rem;font-weight:800;line-height:1}
.rec-total .t{font-size:.92rem;opacity:.92}