/* Tech spend: one look for /spend in the back office and for the shared snapshot (export.py). Uses the back office's
   tokens (--card, --line, --ink, ...); the snapshot defines the same ones. Everything is under .sv. */
:root{--c-cloud:#2f6fdb;--c-ai:#7b4fe0;--c-seats:#d9822b;--c-comms:#13998a;--sv-track:#e9ecf1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-cloud:#6ea2ff;--c-ai:#b49bff;--c-seats:#f1a65a;--c-comms:#4fd0bf;--sv-track:#262b36}}
:root[data-theme="dark"]{--c-cloud:#6ea2ff;--c-ai:#b49bff;--c-seats:#f1a65a;--c-comms:#4fd0bf;--sv-track:#262b36}

.sv{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;font-variant-numeric:tabular-nums}
.sv *{box-sizing:border-box}
.sv h1{font-size:22px;font-weight:700;margin:0;line-height:1.2}
.sv h2{font-size:15px;font-weight:700;margin:0}
.sv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.sv-upd{font-size:12.5px;color:var(--faint)}
.sv-card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.sv-pad{padding:16px 18px}
.sv-k{font-size:13.5px;color:var(--muted);font-weight:500}
.sv-big{font-size:46px;font-weight:760;letter-spacing:-.025em;line-height:1.05;margin-top:2px}
.sv-mid{font-size:24px;font-weight:720;letter-spacing:-.01em;line-height:1.15}
.sv-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;color:var(--muted);font-size:14.5px}
.sv-row b{color:var(--ink)}
.sv-fine{font-size:12.5px;color:var(--faint);margin:10px 0 0;line-height:1.45}
.sv-muted{color:var(--muted)}.sv-faint{color:var(--faint)}.sv-small{font-size:13px}
.sv-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;background:var(--gray-bg);color:var(--muted);white-space:nowrap}
.sv-chip.up{background:var(--amber-bg);color:var(--amber)}.sv-chip.down{background:var(--green-bg);color:var(--green)}
.sv-chip.red{background:var(--red-bg);color:var(--red)}.sv-chip.amber{background:var(--amber-bg);color:var(--amber)}.sv-chip.green{background:var(--green-bg);color:var(--green)}

/* the budget meter: spent so far (solid), the rest of the forecast (light), the budget as a line */
.sv-meter{position:relative;height:12px;border-radius:99px;background:var(--sv-track);margin-top:16px}
.sv-meter i{position:absolute;inset-block:0;border-radius:99px}
.sv-meter .m{background:var(--ink);opacity:.85}
.sv-meter .f{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--ink) 30%,transparent) 0 4px,color-mix(in srgb,var(--ink) 14%,transparent) 4px 8px)}
.sv-meter .f.over{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--red) 70%,transparent) 0 4px,color-mix(in srgb,var(--red) 35%,transparent) 4px 8px)}
.sv-meter .b{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);border-radius:2px}
.sv-mlab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin-top:8px;font-size:13.5px;color:var(--muted)}
.sv-mlab b{color:var(--ink)}

/* what needs attention */
.sv-att{padding:4px 0}
.sv-att h2{padding:12px 18px 4px}
.sv-ai{display:flex;gap:12px;padding:10px 18px;align-items:flex-start}
.sv-ai+.sv-ai{border-top:1px solid var(--line)}
.sv-ai .ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:14px;font-weight:800}
.sv-ai.red .ic{background:var(--red-bg);color:var(--red)}.sv-ai.amber .ic{background:var(--amber-bg);color:var(--amber)}
.sv-ai.violet .ic{background:color-mix(in srgb,var(--c-ai) 16%,transparent);color:var(--c-ai)}.sv-ai.gray .ic{background:var(--gray-bg);color:var(--muted)}
.sv-ai .t{font-weight:600;line-height:1.4}.sv-ai .s{font-size:13px;color:var(--muted);margin-top:1px;line-height:1.45}
.sv-ai .grow{flex:1;min-width:0}
.sv-ai .go{font-size:13px;color:var(--accent);text-decoration:none;white-space:nowrap;margin-top:2px;font-weight:600}
.sv-ai .go::after{content:" ‹"}

/* categories */
.sv-cdot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.sv-cico{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center}
.sv-cico svg{width:19px;height:19px}
.cloud .sv-cico{background:color-mix(in srgb,var(--c-cloud) 14%,transparent);color:var(--c-cloud)}.cloud .sv-cdot,.sv-cdot.cloud{background:var(--c-cloud)}
.ai .sv-cico{background:color-mix(in srgb,var(--c-ai) 14%,transparent);color:var(--c-ai)}.ai .sv-cdot,.sv-cdot.ai{background:var(--c-ai)}
.seats .sv-cico{background:color-mix(in srgb,var(--c-seats) 16%,transparent);color:var(--c-seats)}.seats .sv-cdot,.sv-cdot.seats{background:var(--c-seats)}
.comms .sv-cico{background:color-mix(in srgb,var(--c-comms) 14%,transparent);color:var(--c-comms)}.comms .sv-cdot,.sv-cdot.comms{background:var(--c-comms)}
.sv-stack{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--sv-track);gap:2px}
.sv-stack i{display:block;height:100%}
.sv-stack .cloud{background:var(--c-cloud)}.sv-stack .ai{background:var(--c-ai)}.sv-stack .seats{background:var(--c-seats)}.sv-stack .comms{background:var(--c-comms)}
.sv-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--muted);margin-top:10px}
.sv-legend span{display:inline-flex;gap:6px;align-items:center}.sv-legend b{color:var(--ink)}

/* the categories: rows that open in place */
.sv-rows>details+details{border-top:1px solid var(--line)}
.sv-rows>details>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;gap:12px}
.sv-rows summary::-webkit-details-marker,.sv-panel summary::-webkit-details-marker{display:none}
.sv-rows summary:focus-visible,.sv-panel summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.sv-rows .grow{flex:1;min-width:0}
.sv-rows .nm{font-weight:650}
.sv-rows .sub{font-size:12.5px;color:var(--muted)}
.sv-rows .amt{font-weight:720;font-size:18px;white-space:nowrap}
.sv-chev{width:16px;height:16px;color:var(--faint);flex:none;transition:transform .15s}
details[open]>summary .sv-chev{transform:rotate(-90deg)}
.sv-rows>details[open]>summary{background:color-mix(in srgb,var(--ink) 3%,transparent)}

/* the detail inside a category */
.sv-panel{padding:4px 18px 14px}
.sv-panel .part{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card);scroll-margin-top:72px}
.sv-panel .part>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;align-items:center;gap:10px}
.sv-panel .part[open]>summary{border-bottom:1px solid var(--line)}
.sv-panel .part .pn{flex:1;min-width:0;font-weight:600}
.sv-panel .part .pv{font-weight:700;white-space:nowrap}
.sv-panel .pbody{padding:8px 14px 12px}
.sv-panel .note{font-size:12.5px;color:var(--faint);margin:0 0 8px;line-height:1.45}
.sv-panel .flat{display:flex;gap:10px;align-items:center;padding:11px 14px}
.sv-split{margin-top:12px}
.sv-split .sv-stack{height:10px}
.sv-split .s0{background:var(--c-ai)}.sv-split .s1{background:color-mix(in srgb,var(--c-ai) 55%,transparent)}
.sv-split .s2{background:color-mix(in srgb,var(--c-ai) 25%,transparent)}.sv-split .s3{background:var(--c-cloud)}
.sv-split .sv-cdot.s0{background:var(--c-ai)}.sv-split .sv-cdot.s1{background:color-mix(in srgb,var(--c-ai) 55%,transparent)}
.sv-split .sv-cdot.s2{background:color-mix(in srgb,var(--c-ai) 25%,transparent)}.sv-split .sv-cdot.s3{background:var(--c-cloud)}
.sv-miss{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;margin-top:10px}
.sv-miss .t{font-weight:600}.sv-miss .s{font-size:12.5px;color:var(--muted)}

.sv-tree{list-style:none;margin:0;padding:0}
.sv-tree .sv-tree{padding-inline-start:14px;border-inline-start:2px solid var(--line);margin:2px 0 6px}
.sv-tree li{padding:3px 0}
.sv-tree summary,.sv-tree .leaf{display:flex;gap:10px;align-items:baseline;font-size:14px}
.sv-tree summary{cursor:pointer;list-style:none}
.sv-tree summary::-webkit-details-marker{display:none}
.sv-tree summary::before{content:"+";color:var(--faint);width:12px;flex:none}
.sv-tree details[open]>summary::before{content:"−"}
.sv-tree .leaf{padding-inline-start:22px;color:var(--muted)}
.sv-tree .tn{flex:1;min-width:0;overflow-wrap:anywhere}.sv-tree .tv{white-space:nowrap}
.sv-tree .miss{padding-inline-start:22px;font-size:13.5px}
.sv-foot{font-size:12.5px;color:var(--faint);line-height:1.55;padding:0 4px}
.sv-foot p{margin:0 0 4px}

@media (max-width:420px){
  .sv-big{font-size:42px}
  .sv-pad{padding:14px 16px}
}