/* Footer, eyebrow rules, KPI sparklines, donuts and the lifecycle bar. */
/* ---------- footer ---------- */
footer.foot{ background:var(--blue-01); color:var(--on-brand-soft); padding:36px clamp(20px,4vw,60px) 44px; }
footer.foot .top{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; }
footer.foot .brand{ display:flex; align-items:center; gap:10px; color:var(--on-brand); }
footer.foot .brand svg{ width:20px; height:20px; }
footer.foot .note{ font-family:var(--mono); font-size:11px; line-height:1.7; max-width:640px; }
footer.foot .meta{ font-family:var(--mono); font-size:10.5px; color:var(--on-brand-faint); margin-top:24px; padding-top:18px; border-top:1px solid var(--on-brand-border); display:flex; gap:24px; flex-wrap:wrap; }


.seg-group{ display:flex; gap:8px; flex-wrap:wrap; }
.seg-btn{ height:36px; padding:0 15px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:var(--font-size-body); cursor:pointer; transition:background-color .2s,color .2s,border-color .2s; }
.seg-btn.on{ background:var(--blue-01); border-color:var(--blue-01); color:var(--on-brand); font-weight:400; }


/* ---------- eyebrow rule ---------- */
.eyebrow-rule{ display:flex; align-items:center; gap:16px; }
.eyebrow-rule::after{ content:""; flex:1; height:1px; background:var(--border-strong); }

/* ---------- kpi sparkline layout ---------- */
.kpi-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.kpi-spark{ width:60px; height:24px; flex:none; overflow:visible; margin-bottom:2px; }

/* ---------- card header actions (toggle-mini sits in .viz-card-actions) ---------- */
/* flex-wrap:wrap is a safety net, not the active fix: at every measured
   width (320-2560px, both card-head layouts) three buttons already fit
   beside the shrinking title text (.viz-card-head-text has min-width:0 and
   ellipsizes first). Left in so a longer future label set degrades to two
   rows instead of pushing the document wide again. */
.toggle-mini{ display:flex; gap:6px; flex:none; }
.toggle-mini button{ height:26px; padding:0 10px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); color:var(--text-secondary); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; }
.toggle-mini button.on{ background:var(--blue-01); border-color:var(--blue-01); color:var(--on-brand); }

/* ---------- donut + legend rows ---------- */
.donut-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:6px; }
/* Geometry from DONUT (js/tokens.js) via --donut-diameter/--donut-stroke -
   this used to be a bare 128px that agreed with the SVG's R=52/viewBox 128
   only by coincidence. Step 6: the SVG's own viewBox stays a fixed 176x176
   (donutSVG() computes its arc maths in JS against that number, and
   tests/test_tokens.py's GeometryMirror pins --donut-diameter to it) but the
   BOX the SVG is drawn into can still scale independently, the same way an
   `<img>`'s display size is independent of its intrinsic pixel size - the
   `viewBox` just rescales what is drawn inside whatever box CSS gives it.
   height:auto (rather than a second clamp()) is what keeps it square: SVG's
   viewBox gives the element a 1:1 intrinsic aspect ratio, so height follows
   width exactly like a raster image would. */
.donut-svg{ width:clamp(140px, 45cqw, 200px); height:auto; flex:none; }
.donut-center-n{ font-family:var(--sans); font-weight:300; font-variant-numeric:tabular-nums; }
.donut-center-label{ font-family:var(--mono); font-size:8.5px; text-transform:uppercase; letter-spacing:.03em; fill:var(--text-secondary); }
.legend-rows{ display:flex; flex-direction:column; gap:var(--space-2); flex:1; min-width:170px; }
/* A 3-column grid, not a flex row: the label track gets a real minmax(0,1fr)
   so long labels ("Artificial Intelligence (AI)") ellipsize instead of
   wrapping to a second line and shoving the value column around, and the
   value track sizes to its own content and never wraps. */
.legend-rows .lrow{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:9px; font-size:12.5px; }
.legend-rows .sw{ width:10px; height:10px; flex:none; }
.legend-rows .ltxt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); }
.legend-rows .lnum{ font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-secondary); white-space:nowrap; text-align:right; }

/* Below a 520px CONTAINER (the .viz-card, via container-type:inline-size in
   layout.css) the ring and its legend no longer fit side by side without
   squeezing the legend's label column - stack instead. Above 520px this is
   what the pre-existing flex-wrap:wrap on .donut-row already did
   approximately, keyed off .legend-rows' own min-width:170px; the
   @container rule pins it to one deliberate, testable number instead of
   wherever flex-wrap happened to give up. */
@container (max-width:520px){
  .donut-row{ flex-direction:column; align-items:stretch; }
  .legend-rows{ min-width:0; width:100%; }
}

/* ---------- lifecycle segmented bar ---------- */
.segbar{ height:34px; display:flex; overflow:hidden; border-radius:6px; }
.segbar .seg:first-child{ }
.seg-legend{ display:flex; gap:22px; margin-top:14px; flex-wrap:wrap; }
.seg-legend .li{ display:flex; align-items:center; gap:7px; font-size:12.5px; }
.seg-legend .sw{ width:10px; height:10px; flex:none; }
.seg-legend .li b{ font-family:var(--mono); font-weight:400; color:var(--text-secondary); }

/* ---------- misc ---------- */
.viz-empty{ font-family:var(--mono); font-size:var(--font-size-caption); color:var(--text-secondary); padding:20px 0; }