/* ---- Heat-map, donut, bars, scenario cards, flow strip (New Ballast, mockup structure) ---- */
table.heat th, table.heat td { padding: 6px 8px; text-align: center; border: 2px solid var(--panel); }
table.heat th { font-size: 12px; color: var(--muted); }
table.heat td.hm { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 52px; }
.donut { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.donut svg { width: 150px; height: 150px; flex: none; }
.donut ul { list-style: none; margin: 0; padding: 0; font-size: 13px; flex: 1; min-width: 160px; }
.donut li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.donut li i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.hb { display: grid; grid-template-columns: 110px 1fr 54px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.hb .ht { height: 8px; background: var(--line); border-radius: 4px; position: relative; display: block; }
.hb .ht i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--sea); }
.hb.on .hl { font-weight: 700; } .hb.on .ht i { background: var(--b2); }
.hb .hv { text-align: right; font-variant-numeric: tabular-nums; }
.dd-svg .dots circle { fill: var(--muted); opacity: .55; }
.dd-svg .mk { stroke: var(--b3); stroke-dasharray: 3 3; stroke-width: 1; }
.dd-svg .you { stroke: var(--sea); stroke-width: 2; } .dd-svg .you-t { font-size: 11px; font-weight: 700; fill: var(--sea); }
.scn { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.scn .opt b { font-size: 16px; }
.light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.light.green { background: var(--b0); } .light.amber { background: var(--b2); } .light.red { background: var(--b4); }
.flow4 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.flow4 > div { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--panel); }
.flow4 > div b { display: block; } .flow4 .done { border-color: var(--sea); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.chips .opt { padding: 6px 14px; } .chips .opt b { font-size: 15px; }
.profile { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; display: inline-flex; gap: 14px; flex-wrap: wrap; background: var(--panel); margin-bottom: 12px; }
.profile b { color: var(--ink); }
.cols2 { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; } }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--sea); }
.stars { letter-spacing: 2px; color: var(--b2); }
.lights { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lights div { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.sub-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.sub-nav a { font-size: 14px; }