/* DataDash "At a glance": picture-first summaries at the top of each dashboard.
   Pictograms, area-true squares, waffles, dials and bubbles drawn by /assets/glance.js.
   Colours follow the dataviz reference palette (slots 1–5, light and dark steps) plus one muted grey. */
:root{
  --g1:#2a78d6; --g2:#eb6834; --g3:#1baf7a; --g4:#eda100; --g5:#e87ba4;
  --gm:#a9b3b0; --g-track:#e1e8e5; --g-surface:var(--sheet,#F7F9F8);
}
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])){
  --g1:#3987e5; --g2:#d95926; --g3:#199e70; --g4:#c98500; --g5:#d55181;
  --gm:#5d6b75; --g-track:#22394b}}
:root[data-theme="dark"]{
  --g1:#3987e5; --g2:#d95926; --g3:#199e70; --g4:#c98500; --g5:#d55181;
  --gm:#5d6b75; --g-track:#22394b}

.glance{padding:30px 0 4px;border-top:2px solid var(--ink);margin-top:32px;scroll-margin-top:12px}
.glance-head{display:flex;flex-direction:column;gap:6px}
.glance-head h2{font-size:clamp(28px,4vw,40px);font-weight:850;letter-spacing:-.02em;font-variation-settings:"wdth" 118}
.glance-head p{font-size:17px;color:var(--slate);max-width:62ch}
.glance-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:18px}
.gcard{grid-column:span 3;min-width:0;background:var(--sheet);border:1px solid var(--rule);border-radius:4px 16px 4px 16px;
  padding:18px 18px 14px;display:flex;flex-direction:column;gap:12px;position:relative}
.gcard.wide{grid-column:span 6}
.gcard.third{grid-column:span 2}
.gcard.two-thirds{grid-column:span 4}
@media (max-width:860px){.gcard,.gcard.third,.gcard.two-thirds{grid-column:span 6}}
.gcard .kick{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.gcard .kick svg{width:18px;height:18px;color:var(--ink)}
.gcard h3{font-size:clamp(20px,2.2vw,25px);line-height:1.18;font-weight:850;letter-spacing:-.015em;font-variation-settings:"wdth" 108;max-width:34ch}
.gcard.wide h3{max-width:48ch}
.gcard .viz{min-width:0}
.gcard .key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--slate);line-height:1.35}
.gcard .key span{display:inline-flex;align-items:center;gap:6px}
.gcard .key i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.gcard .key svg{width:16px;height:16px;flex:none}
.gcard .foot{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;font-size:13px;color:var(--slate)}
.gcard .foot a{color:var(--slate)}
.gcard .foot a.more{color:var(--kelp);font-weight:700;text-decoration:none;white-space:nowrap}
.gcard .foot a.more:hover{text-decoration:underline}
.g-num{font-variant-numeric:tabular-nums}

/* Shared tooltip */
.g-tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--sheet);font-size:13px;line-height:1.35;
  padding:6px 10px;border-radius:6px;max-width:260px;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;transition:opacity .12s}
.g-tip.on{opacity:1}
[data-tip]{cursor:default}
[data-tip]:focus-visible{outline:3px solid var(--hl);outline-offset:2px}

/* Pictogram rows: each icon stands for a fixed amount */
.g-picto{display:grid;grid-template-columns:minmax(92px,max-content) minmax(0,1fr);gap:14px 16px;align-items:center}
.g-prow{display:contents}
.g-prow .lab{max-width:190px}
.g-prow .lab{display:flex;flex-direction:column;line-height:1.15}
.g-prow .lab b{font-size:19px;font-weight:850;font-variation-settings:"wdth" 106;font-variant-numeric:tabular-nums}
.g-prow .lab span{font-size:13px;color:var(--slate)}
.g-icons{display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start}
.g-ic{display:inline-block;width:var(--s,16px);height:var(--s,16px);overflow:hidden;flex:none;color:var(--c,var(--g1))}
.g-ic svg{width:var(--s,16px);height:var(--s,16px);display:block}
.g-ic.part{width:calc(var(--s,16px) * var(--f,1))}
.g-ic.out{color:var(--gm)}
@media (max-width:520px){.g-picto{grid-template-columns:1fr;gap:6px}.g-prow .g-icons{margin-bottom:8px}.g-prow .lab{max-width:none}}

/* Columns of stacked icons (coins, blocks) */
.g-stacks{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding-bottom:2px}
.g-stack{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 0 46px;min-width:46px}
.g-stack .pile{display:flex;flex-direction:column-reverse;align-items:center;gap:1px}
.g-stack .pile .g-ic{width:var(--s,18px)}
.g-stack b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.g-stack span{font-size:12px;color:var(--slate);text-align:center;line-height:1.2}

/* Area-true squares, bubbles, dials, treemap, waffle, dots: SVG text */
.g-svg{width:100%;height:auto;display:block;overflow:visible}
.g-svg text{fill:var(--ink);font-family:var(--font,inherit)}
.g-svg .t-big{font-size:17px;font-weight:850;font-variant-numeric:tabular-nums}
.g-svg .t-sm{font-size:12.5px;fill:var(--slate)}
.g-svg .t-in{fill:#fff;font-weight:800}
.g-svg .muted{fill:var(--gm)}
.g-svg .track{fill:var(--g-track)}
.g-svg .ring{fill:none;stroke:var(--rule);stroke-width:1.5}
.g-svg .tick{stroke:var(--slate);stroke-width:1.5;stroke-linecap:round}
.g-svg .hand{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.g-svg [data-tip]{transition:opacity .15s}
.g-svg:hover [data-tip]:not(:hover){opacity:.75}

/* Row of shapes on one scale (squares, bubbles, dials): wraps, bottom-aligned */
.g-shapes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 22px}
.g-shape{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px;text-align:center}
.g-shape svg.g-svg{width:auto;height:auto;max-width:100%;margin-bottom:6px;overflow:visible}
.g-shape b{font-size:17px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.15}
.g-shape span{font-size:12.5px;color:var(--slate);line-height:1.25;max-width:150px}
@media (max-width:560px){.g-shapes{gap:16px 12px}.g-shape{min-width:0;flex:1 1 40%}}

/* Highlighter in dark mode: keep the stroke low so light text stays readable */
@media (prefers-color-scheme: dark){:root:where(:not([data-theme="light"])) .gcard .hl{background-position:0 96%;background-size:100% .26em}}
:root[data-theme="dark"] .gcard .hl{background-position:0 96%;background-size:100% .26em}

/* Waffle and dot fields are HTML grids for crisp wrapping */
.g-waffle{display:grid;grid-template-columns:repeat(var(--cols,10),minmax(0,1fr));gap:3px;max-width:var(--max,300px);width:100%}
.g-waffle i{aspect-ratio:1;border-radius:3px;background:var(--c,var(--gm));display:block}
.g-waffle.icons i{background:none;color:var(--c,var(--gm));border-radius:0}
.g-waffle.icons i svg{width:100%;height:100%;display:block}
.g-wrow{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.g-legend{display:flex;flex-direction:column;gap:8px;font-size:14px;min-width:180px;flex:1}
.g-legend div{display:grid;grid-template-columns:14px auto 1fr;gap:4px 8px;align-items:baseline}
.g-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;transform:translateY(1px)}
.g-legend b{font-variant-numeric:tabular-nums;font-weight:800}
.g-legend span{color:var(--slate)}
.g-dots{display:grid;grid-template-columns:repeat(var(--cols,25),minmax(0,1fr));gap:3px;max-width:var(--max,520px);width:100%}
.g-dots i{aspect-ratio:1;border-radius:50%;background:var(--c,var(--gm));display:block}

/* 100% bar with labels underneath */
.g-split{display:flex;height:34px;border-radius:6px;overflow:hidden;gap:2px;background:var(--sheet)}
.g-split i{display:block;height:100%;background:var(--c);min-width:2px}
.g-splitkey{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 16px;margin-top:10px;font-size:13.5px}
.g-splitkey div{display:flex;gap:8px;align-items:baseline}
.g-splitkey i{width:12px;height:12px;border-radius:3px;flex:none;transform:translateY(1px)}
.g-splitkey b{font-variant-numeric:tabular-nums}
.g-splitkey span{color:var(--slate)}

/* Big comparison numbers */
.g-vs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 22px}
.g-vs div{display:flex;flex-direction:column}
.g-vs b{font-size:clamp(30px,4vw,44px);line-height:1;font-weight:900;letter-spacing:-.02em;font-variation-settings:"wdth" 112;font-variant-numeric:tabular-nums}
.g-vs span{font-size:13px;color:var(--slate)}
.g-vs .arrow{font-size:26px;color:var(--slate);align-self:center}

/* Entrance: icons and shapes grow in when the card scrolls into view */
@media (prefers-reduced-motion: no-preference){
  .gcard .g-ic,.gcard .g-waffle i,.gcard .g-dots i{opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.3);transition-delay:calc(var(--i,0) * 9ms)}
  .gcard.in .g-ic,.gcard.in .g-waffle i,.gcard.in .g-dots i{opacity:1;transform:none}
  .gcard .grow{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.05);transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 120ms)}
  .gcard .grow.c{transform-origin:50% 50%}
  .gcard.in .grow{transform:none}
  .gcard .sweep{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 150ms)}
  .gcard .g-split i{transform:scaleX(0);transform-origin:left;transition:transform .6s ease;transition-delay:calc(var(--i,0) * 80ms)}
  .gcard.in .g-split i{transform:none}
}
@media print{.gcard .g-ic,.gcard .g-waffle i,.gcard .g-dots i,.gcard .grow,.gcard .g-split i{opacity:1!important;transform:none!important}}
@media (forced-colors: active){.g-waffle i,.g-dots i,.g-split i{forced-color-adjust:none}}