/* Charts: the Overview's headline and tiles, legends and keys, stacked bars, bar lists, histograms,
   the Charts pages' layout, the treemap, the roles grid, the Data overlay, compare-mode pairs,
   dumbbells, delta bars, Sankey, sparkline, bridge and the +/~/− bar. The level and heat fills are
   in base.css. */

/* Overview (point in time): headline figure and tiles on top, three P·P·T cards fill the rest */
#view-overview{gap:var(--gap-card)}
.hero-row{flex:none;display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:var(--gap-card)}
.hero{display:flex;flex-direction:column;justify-content:center;gap:calc(0.375rem * var(--dz))}
.hero .value{font-size:var(--fs-6xl);line-height:1;font-weight:var(--fw-strong);letter-spacing:-.02em}
.hero .label{font-size:var(--fs-md);color:var(--ink-2);line-height:1.35}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-tile)}
/* A KPI tile (also the Documents and part pages' tiles): label, value, note */
.tile{padding:calc(0.5625rem * var(--dz)) var(--space-3)}
.tile[data-tip]{cursor:help}
.tile .label{margin:0;font-size:var(--fs-xs-plus);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .value{margin:calc(0.125rem * var(--dz)) 0 0;font-size:var(--fs-3xl);font-weight:var(--fw-strong);line-height:1.1}
.tile .note{margin:calc(0.125rem * var(--dz)) 0 0;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppt-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card)}
.ppt-grid .card{overflow:auto}
.ppt-grid h3{margin-bottom:var(--space-2)}
.ppt-grid .bars{gap:var(--space-1) var(--space-3)}
.meter{height:10px;border-radius:var(--radius-pill);background:var(--series-track);overflow:hidden;margin:calc(0.625rem * var(--dz)) 0 calc(0.375rem * var(--dz))}
.meter span{display:block;height:100%;background:var(--series);border-radius:0 var(--radius-3) var(--radius-3) 0}
.big-figure{font-size:var(--fs-4xl);font-weight:var(--fw-strong);line-height:1;margin:calc(0.375rem * var(--dz)) 0 var(--space-1)}

/* Legend: swatch + name per series */
.legend{display:flex;flex-wrap:wrap;gap:calc(0.375rem * var(--dz)) var(--space-4);margin:0 0 var(--space-3);font-size:var(--fs-md);color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:calc(0.375rem * var(--dz))}
.legend span[data-tip]{cursor:help}
.card .legend{gap:var(--space-1) calc(0.625rem * var(--dz));font-size:var(--fs-sm);margin:var(--space-2) 0 0}
.card .legend .swatch{width:10px;height:10px}
/* Small key row above or under a chart: a mark and a word per item (From / Now, directions, ramps) */
.pair-key{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);font-size:var(--fs-xs);color:var(--muted)}
/* Each key item wraps as a whole, never inside its label */
.pair-key span,.ovg-key span{display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap}
.pair-key i{display:inline-block;width:14px;height:6px;border-radius:var(--radius-1);background:var(--m-hybrid)}
.pair-key .key-from{opacity:var(--from-fade)}
.pair-key .db-key-from,.pair-key .db-key-to,.pair-key .db-key-up,.pair-key .db-key-down,.pair-key .db-key-flat{width:10px;height:10px;border-radius:var(--radius-round)}
.pair-key .db-key-from{background:var(--surface-2);border:2px solid var(--muted)}
.pair-key .db-key-to{background:var(--m-system)}
.pair-key .dl-key-now{background:var(--series)}
.pair-key .dl-key-from{width:2px;height:12px;background:var(--ink);border-radius:0}

/* 100% stacked bar */
.stack{display:flex;gap:calc(0.125rem * var(--dz));height:var(--stack-h);background:var(--surface);border-radius:0 var(--radius-3) var(--radius-3) 0;min-width:0}
.stack.thin{height:var(--stack-thin)}
.seg{position:relative;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-strong);min-width:0;cursor:default;white-space:nowrap;overflow:hidden}
.seg:last-child{border-radius:0 var(--radius-3) var(--radius-3) 0}
.stack-rows{display:grid;grid-template-columns:minmax(90px,170px) 1fr auto;gap:var(--space-2) var(--space-3);align-items:center}
.stack-rows.dense{gap:calc(0.125rem * var(--dz)) calc(0.625rem * var(--dz))}
.stack-rows.dense .name,.stack-rows.dense .n{font-size:var(--fs-sm);line-height:1.3}
.stack-rows.dense .stack.thin{height:calc(0.625rem * var(--dz))}
.stack-rows .name{font-size:var(--fs-md);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack-rows .n{font-size:var(--fs-sm);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

/* Bar list (single series) */
.bars{display:grid;grid-template-columns:minmax(100px,190px) 1fr;gap:var(--gap-row) var(--space-3);align-items:center}
.bars .name{font-size:var(--fs-md);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .track{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.bars .fill{height:var(--bar-h-fill);background:var(--series);border-radius:0 var(--radius-3) var(--radius-3) 0;min-width:2px}
.bars .val{font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Column histogram */
.cols{display:flex;align-items:flex-end;gap:calc(0.625rem * var(--dz));flex:1;min-height:50px;border-bottom:1px solid var(--grid);padding-top:var(--space-4)}
.col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.col .v{font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--space-1);font-variant-numeric:tabular-nums}
.col .b{width:100%;max-width:24px;background:var(--series);border-radius:var(--radius-3) var(--radius-3) 0 0;min-height:2px}
.col-labels{display:flex;gap:calc(0.625rem * var(--dz));margin-top:calc(0.375rem * var(--dz))}
.col-labels span{flex:1;text-align:center;font-size:var(--fs-sm);color:var(--muted)}

/* Dashboards: the Charts pages (.msec), Documents (.dk) and the part pages (.pk) are a grid of cards
   sized to the viewport; only the cards scroll. Each page places its own cards. */
.msec,.dk,.pk{height:100%;display:grid;gap:calc(0.625rem * var(--dz))}
.msec .card,.dk > .card,.pk > .card{overflow:auto;display:flex;flex-direction:column}
.dk-tiles,.pk-tiles{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-tile)}

/* Charts pages (Process, Systems, People): one section at a time */
#metrics-body{flex:1;min-height:0}
.msec .bars{gap:calc(0.125rem * var(--dz)) var(--space-3)}
.msec .bars .name,.msec .bars .val{line-height:1.35}
.msec .stack-rows:not(.dense){gap:calc(0.375rem * var(--dz)) var(--space-3)}
.lv-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2)}
.lv-ctrls .tool-view,.lv-ctrls .pair-key{margin:0}
.lv-ctrls details.data{position:static;margin-left:auto}
/* A narrow column of summary cards on the left, one big card on the right */
.msec-side{grid-template-columns:minmax(230px,1.15fr) 4fr;grid-template-rows:auto auto minmax(0,1fr)}
.msec-side > .c-tools{grid-column:2;grid-row:1 / -1}
.msec-people{grid-template-rows:minmax(0,1fr) auto auto}
/* People per step and departments per process share a card, one at a time */
.c-hist .cols{flex:none;height:6rem}
/* Narrow cards: the names take only what they need, so the bars keep their width */
.msec-side > .card:not(.c-tools) .stack-rows{grid-template-columns:minmax(0,max-content) minmax(3rem,1fr) auto;column-gap:var(--space-2)}
.msec-side > .card:not(.c-tools) .legend{font-size:var(--fs-xs);gap:calc(0.125rem * var(--dz)) var(--space-2)}
/* The big card's switch has four views (Shift · Flows · Treemap · Bars) */
.c-big > h3:has(+ .tool-view){padding-right:16rem}
.c-big > .sub,.c-big > .lv-strip{margin-bottom:var(--space-2)}
.c-big .stack-rows{grid-template-columns:minmax(90px,220px) 1fr auto}
.sk-fit{display:flex;flex-direction:column}
.sk-fit .muted{margin:0;font-size:var(--fs-sm)}
/* A list inside a narrow card scrolls under its fixed heading */
.c-scroll{flex:1;min-height:0;overflow:auto}
.c-touch > .tool-view,.c-hist > .tool-view{margin:var(--space-1) 0 var(--space-2)}
.c-tools{overflow:hidden !important}
.c-tools .tool-panel{flex:1;min-height:0;overflow:auto}
.pk-main{position:relative}
.pk-main > .tool-view{margin:0 0 var(--space-2)}
/* Controls pinned to a big card's top-right corner, beside its title (Shift / Flows / Treemap; the matrix's) */
.c-tools > .tool-view,.mx-ctrls{position:absolute;top:8px;right:14px}
.c-tools > .tool-view{margin:0}
.c-tools > h3:has(+ .tool-view){padding-right:calc(13.75rem * var(--dz))}

/* Tools treemap: category boxes containing tool tiles, filling the card */
.tm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:calc(0.125rem * var(--dz)) var(--space-1);margin:var(--space-1) 0 calc(0.375rem * var(--dz));font-size:var(--fs-sm);min-height:22px}
.crumb{font:inherit;font-size:var(--fs-sm);color:var(--accent-ink);background:none;border:0;padding:calc(0.125rem * var(--dz)) calc(0.375rem * var(--dz));border-radius:var(--radius-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.crumb[aria-current="page"]{color:var(--ink);font-weight:var(--fw-bold);text-decoration:none;cursor:default}
.tm-crumbs .sep{color:var(--muted)}
.tm-wrap{flex:1;min-height:0;display:flex;gap:calc(0.625rem * var(--dz))}
.treemap{position:relative;flex:1;min-width:0;min-height:160px}
.tm-aside{width:260px;flex:none;overflow-y:auto;border-left:1px solid var(--grid);padding:0 calc(0.125rem * var(--dz)) 0 var(--space-3);font-size:var(--fs-sm)}
.tm-sum{margin:0 0 var(--space-2);color:var(--ink-2)}
.tm-aside h4{margin:var(--space-3) 0 calc(0.375rem * var(--dz));font-size:var(--fs-xs);color:var(--accent-ink)}
.tm-aside h4:first-of-type{margin-top:var(--space-1)}
.tm-aside .bars{grid-template-columns:minmax(80px,120px) 1fr;gap:calc(0.1875rem * var(--dz)) var(--space-2)}
.tm-procs{list-style:none;margin:0;padding:0}
.tm-procs > li{padding:calc(0.3125rem * var(--dz)) 0;border-top:1px solid var(--grid);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(0.125rem * var(--dz)) var(--space-2)}
.tm-procs > li:first-child{border-top:0}
.tm-procs a{text-decoration:none;color:var(--ink);line-height:1.3}
.tm-procs a:hover{text-decoration:underline}
.tm-procs a b{color:var(--muted);font-weight:var(--fw-bold)}
.tm-procs .n{color:var(--muted);font-variant-numeric:tabular-nums}
.tm-procs ol{grid-column:1 / -1;list-style:none;margin:calc(0.125rem * var(--dz)) 0 0;padding:0;color:var(--ink-2)}
.tm-procs ol li{display:flex;gap:calc(0.375rem * var(--dz));line-height:1.35;padding:calc(0.0625rem * var(--dz)) 0}
.sid{color:var(--muted);font-variant-numeric:tabular-nums;min-width:18px}
.tm-cat{position:absolute;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.tm-cat header{position:absolute;left:0;right:0;top:0;height:22px;display:flex;align-items:center;gap:calc(0.375rem * var(--dz));padding:0 calc(0.4375rem * var(--dz));font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink);cursor:help}
.tm-cat header.act{cursor:zoom-in}
.tm-cat header.act:hover,.tm-cat header.act:focus-visible{background:var(--accent-wash)}
.tm-zoom{width:10px;height:10px;flex:none;border:1.5px solid var(--muted);border-radius:var(--radius-1);opacity:0;transition:opacity .12s}
.tm-cat header.act:hover .tm-zoom,.tm-cat header.act:focus-visible .tm-zoom{opacity:1}
.tm-cn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-cat header .swatch,.tm-crumbs .swatch{flex:none;margin-right:var(--space-1)}
.tm-empty{margin:var(--space-3)}
.tm-cat header b{font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.tm-body{position:absolute;left:3px;right:3px;bottom:3px}
.tm-tile{position:absolute;border-radius:var(--radius-xs);overflow:hidden;padding:var(--space-1) calc(0.375rem * var(--dz));animation:tm-in .18s ease;display:flex;flex-direction:column;justify-content:flex-start;gap:calc(0.0625rem * var(--dz));cursor:default;
  background:color-mix(in srgb,var(--tc,var(--series)) var(--mix),var(--surface));color:var(--ink);transition:filter .12s}
.tm-tile.hi{color:var(--tc-on,var(--on-strong))}
.tm-tile.act{cursor:zoom-in}
.tm-tile:hover,.tm-tile:focus-visible{filter:brightness(1.08) saturate(1.1);outline:2px solid var(--ink);outline-offset:-2px}
.tm-n{font-size:var(--fs-xs-plus);font-weight:var(--fw-semibold);line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;hyphens:auto;overflow-wrap:break-word}
.tm-v{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;opacity:.85}
.tm-tile.short .tm-n{-webkit-line-clamp:1;display:block;white-space:nowrap;text-overflow:ellipsis}
@keyframes tm-in{from{opacity:.4;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.tm-tile{animation:none}}
.tm-summary{cursor:zoom-in;padding:calc(0.375rem * var(--dz)) var(--space-2);gap:var(--space-1)}
.tm-summary .tm-n{-webkit-line-clamp:1;display:block;white-space:nowrap;text-overflow:ellipsis;hyphens:none}
.tm-summary ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(0.0625rem * var(--dz));overflow:hidden;min-height:0}
.tm-summary li{display:flex;justify-content:space-between;gap:calc(0.375rem * var(--dz));font-size:var(--fs-xs);line-height:15px;white-space:nowrap}
.tm-summary li span{overflow:hidden;text-overflow:ellipsis}
.tm-summary li b{font-weight:var(--fw-medium);opacity:.8;font-variant-numeric:tabular-nums}
.tm-summary li.more{color:var(--muted)}
.tm-tile.sm{padding:calc(0.125rem * var(--dz)) var(--space-1)}
.tm-tile.sm .tm-n{display:block;font-size:var(--fs-2xs);white-space:nowrap;text-overflow:ellipsis}
.tm-tile.sm .tm-v{display:none}
.tm-tile.xs{padding:0}
.tm-tile.xs span{display:none}

/* People-touches in the narrow column: drop the change bar, and headcount (it stays in Data) */
.c-touch{container-type:inline-size}
@container (max-width:26rem){
  .c-touch .dbars{grid-template-columns:minmax(0,1.3fr) minmax(2.5rem,1fr) auto auto;font-size:var(--fs-sm)}
  .c-touch .dl-change,.c-touch .pair-key span:last-child{display:none}
  .c-touch .bars{grid-template-columns:minmax(70px,120px) minmax(0,1fr)}
  .c-touch .bars .fill{max-width:calc(100% - 5.5rem)}
  .c-touch .rg-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-2)}
  .c-touch .rg-row > :nth-child(4){display:none}
}
/* Roles card: touches, FTE demand, headcount */
.role-grid{display:flex;flex-direction:column;font-size:var(--fs-sm);min-height:0}
.rg-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(70px,1fr) 70px 64px;gap:var(--space-2);align-items:center;padding:calc(0.125rem * var(--dz)) 0}
.rg-head{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-semibold);border-bottom:1px solid var(--grid);padding-bottom:var(--space-1);margin-bottom:calc(0.125rem * var(--dz))}
.rg-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.rg-bar{display:flex;align-items:center;gap:calc(0.375rem * var(--dz));min-width:0}
.rg-bar i{display:block;height:10px;min-width:2px;background:var(--series);border-radius:0 var(--radius-2) var(--radius-2) 0}
.rg-bar b{font-weight:var(--fw-medium);color:var(--ink-2);font-variant-numeric:tabular-nums}
.rg-bar .delta{margin-left:var(--space-1);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.rg-row .num{text-align:right;font-variant-numeric:tabular-nums}
.rg-row .blank{color:var(--muted)}

/* "Data" opens as an overlay inside its card so the layout never shifts */
details.data{position:absolute;top:10px;right:10px;font-size:var(--fs-sm)}
details.data summary{cursor:pointer;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-5);padding:calc(0.0625rem * var(--dz)) calc(0.4375rem * var(--dz));background:var(--surface-2)}
details.data[open] summary{color:var(--ink);border-color:var(--ink-2)}
details.data .data-body{position:fixed;z-index:var(--z-pop);right:24px;top:calc(var(--bar-h) + 12px);bottom:16px;width:min(var(--w-data),calc(100vw - 3rem));display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-overlay)}
.data-head{gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) calc(0.875rem * var(--dz));border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.data-scroll{flex:1;min-height:0;overflow:auto}

/* Compare mode: the From version drawn faded next to the current one */
.pair{display:flex;flex-direction:column;gap:calc(0.125rem * var(--dz));min-width:0}
.pair-from .stack{opacity:var(--from-fade)}
.stack-rows.paired{row-gap:var(--space-2)}
.pbars .pb{display:flex;flex-direction:column;gap:calc(0.125rem * var(--dz));flex:1;min-width:0}
.pbars .fill-from{opacity:var(--from-fade);height:5px}
.meter-from{margin-bottom:calc(0.1875rem * var(--dz))}
.meter-from span{opacity:var(--from-fade)}
/* Paired histogram */
.pcols .pb2{display:flex;align-items:flex-end;gap:calc(0.125rem * var(--dz));height:100%;width:100%;justify-content:center}
.pcols .pb2 .b{flex:0 1 40%}
.pcols .b-from{opacity:var(--from-fade)}
.pcols .v small{font-size:var(--fs-2xs)}

/* Change tones. up / down: grew or shrank (no polarity); good / bad / flat: towards a goal or not.
   One rule per tone for marks (fills) and one for figures (text). */
.db-seg.db-up,.db-seg.db-good,.db-to.db-up,.db-to.db-good,.dl-bar.db-up,.dl-bar.db-good,.pair-key .db-key-up{background:var(--pos)}
.db-seg.db-down,.db-seg.db-bad,.db-to.db-down,.db-to.db-bad,.dl-bar.db-down,.dl-bar.db-bad,.pair-key .db-key-down{background:var(--neg)}
.db-to.db-flat,.dl-bar.db-flat,.pair-key .db-key-flat{background:var(--ink-2)}

/* From → Now values: the figures beside a dumbbell, ladder row, key or bridge row */
.db-val,.ld-val,.dk-kval,.br-val{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.db-delta{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);white-space:nowrap;text-align:right;min-width:4.5em;color:var(--muted)}
.db-delta .db-sub{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);line-height:1.1;color:var(--muted)}
.db-delta.db-up,.db-delta.db-good,.db-delta .db-sub.db-up,.db-delta .db-sub.db-good,.rg-bar .delta.pos,.br-val.br-up{color:var(--pos)}
.db-delta.db-down,.db-delta.db-bad,.db-delta .db-sub.db-down,.db-delta .db-sub.db-bad,.rg-bar .delta.neg,.br-val.br-down{color:var(--neg)}
.db-delta.db-flat,.db-delta .db-sub.db-flat{color:var(--ink-2)}
/* A change figure inside a value line takes only its own width */
.ld-val .db-delta,.lv-val .db-delta,.dk-tile .value .db-delta{min-width:0}

/* Dumbbells: From (hollow) → To (solid) on one axis, coloured by direction */
.dumbbells{display:grid;grid-template-columns:minmax(120px,210px) minmax(80px,1fr) auto auto;gap:calc(0.375rem * var(--dz)) var(--space-3);align-items:center;font-size:var(--fs-md)}
.db-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:var(--space-3)}
.db-name.db-group{padding-left:0;font-weight:var(--fw-bold);margin-top:var(--space-2)}
.db-group + .db-track{margin-top:var(--space-2)}
.db-track{--gap:8px;position:relative;height:14px;border-radius:var(--radius-pill);background:linear-gradient(var(--grid),var(--grid)) center/100% 2px no-repeat}
.db-seg{position:absolute;top:5px;height:4px;border-radius:var(--radius-pill);background:var(--muted);left:var(--lo);width:calc(var(--hi) - var(--lo))}
.db-dot{position:absolute;top:1px;width:12px;height:12px;margin-left:calc(-0.375rem * var(--dz));border-radius:var(--radius-round)}
.db-from{background:var(--surface-2);border:2px solid var(--muted)}
.db-to{background:var(--m-system);border:2px solid var(--surface-2)}
/* Shift accordion: a row per category (the summary) with its tools inside; fixed value columns keep every group aligned */
.db-tools-lbl{font-size:var(--fs-sm);color:var(--muted)}
.db-acc{display:flex;flex-direction:column}
/* Tools card: closed categories share the card's spare height; open ones keep their natural size */
.c-tools .tool-panel:has(> .db-acc),.pk-main .tool-panel:has(> .db-acc){display:flex;flex-direction:column}
.c-tools .db-acc,.pk-main .db-acc{flex:1 0 auto}
.db-acc .dumbbells{grid-template-columns:minmax(160px,290px) minmax(80px,1fr) 9em 5.5em}
/* Labelled dumbbells: a value beside each dot and the scale's ends on top; the track keeps room
   at both ends for the labels. */
.db-acc.labelled .db-track,.db-scale{margin:0 calc(3rem * var(--dz))}
.db-lab{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;line-height:1}
.db-lab.now{color:var(--ink);font-weight:var(--fw-semibold)}
.db-lab-lo{right:calc(100% - var(--lo) + 10px)}
.db-lab-hi{left:calc(var(--hi) + 10px)}
.db-axis{align-items:end;padding:0 0 var(--space-1);border-bottom:1px solid var(--grid);font-size:var(--fs-xs);color:var(--muted)}
.db-axis .db-val,.db-head{font-weight:var(--fw-semibold);text-align:right}
.db-namehead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding-left:calc(0.125rem * var(--dz))}
.db-fromnow{display:block;font-weight:var(--fw-medium)}
/* Sortable headings: the active one shows its direction; the rest a faint ↕ */
.db-sh{font:inherit;font-weight:var(--fw-semibold);color:var(--muted);background:none;border:0;padding:calc(0.125rem * var(--dz)) var(--space-1);margin:0 calc(-0.25rem * var(--dz));border-radius:var(--radius-xs);cursor:pointer;display:inline-flex;align-items:center;gap:calc(0.1875rem * var(--dz));white-space:nowrap}
.db-sh:hover,.db-sh.on{color:var(--ink)}
.db-arr{font-size:var(--fs-xs);opacity:.45}
.db-sh.on .db-arr{opacity:1}
.db-scale{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.db-scale span:first-child{transform:translateX(-50%)}
.db-scale span:last-child{transform:translateX(50%)}
.db-grp{border-top:1px solid var(--grid)}
.db-grp:first-child{border-top:0}
.db-grp > summary{cursor:pointer;padding:calc(0.375rem * var(--dz)) 0;border-radius:var(--radius-5)}
.db-grp > summary .db-name.db-group{margin-top:0;display:flex;align-items:center;gap:calc(0.375rem * var(--dz));padding-left:calc(0.125rem * var(--dz))}
.db-grp > summary .db-group + .db-track{margin-top:0}
.db-kids{display:flex;flex-direction:column;gap:calc(0.375rem * var(--dz));padding:calc(0.125rem * var(--dz)) 0 var(--space-2)}
/* Narrow cards (e.g. People › What people do): a tighter Shift */
.tool-panel{container-type:inline-size}
@container (max-width:34rem){
  .db-acc .dumbbells{grid-template-columns:minmax(80px,1fr) minmax(50px,1.1fr) 6em 4.8em;column-gap:var(--space-2);font-size:var(--fs-sm)}
  .db-acc .db-delta{min-width:0}
  .db-lab:not(.now){display:none}
  .db-acc.labelled .db-track,.db-acc .db-scale{margin:0 calc(1.875rem * var(--dz))}
  .db-lab{font-size:var(--fs-2xs)}
  .db-fromnow{display:none}
}
/* Very narrow: no value labels beside the dots, a smaller scale */
@container (max-width:26rem){
  .db-acc .dumbbells{grid-template-columns:minmax(80px,1.2fr) minmax(40px,1fr) 4.8em;column-gap:var(--space-2)}
  .db-acc .db-val{display:none}
  .db-acc.labelled .db-track,.db-acc .db-scale{margin:0 calc(0.375rem * var(--dz))}
  .db-lab,.db-scale > span:not(:has(button)){display:none}
}
.db-kids > .dumbbells .db-name{padding-left:calc(var(--depth,1) * 18px + var(--space-3))}
.db-grp.db-sub{border-top:0}
.db-grp.db-sub > summary{padding:calc(0.125rem * var(--dz)) 0}
.db-grp.db-sub > summary .db-name.db-group{padding-left:calc(var(--depth,1) * 18px + 2px);font-weight:var(--fw-semibold)}
.db-grp.db-sub > .db-kids{padding-bottom:var(--space-1)}
.db-more{margin:0;padding-left:calc(var(--depth,1) * 18px + var(--space-3));font-size:var(--fs-xs);color:var(--muted)}
.db-name .swatch{flex:none}
.db-group ~ .db-val,.db-group ~ .db-delta{font-weight:var(--fw-bold)}

/* Sankey */
.sankey{width:100%;height:auto;display:block}
.sk-band{fill:none;stroke-opacity:var(--band-fade);transition:stroke-opacity .12s}
.sk-band:hover{stroke-opacity:var(--band-hover)}
@media (prefers-reduced-motion:reduce){.sk-band{transition:none}}
.sk-band.sk-move{stroke:var(--m-hybrid)}
.sk-band.sk-new{stroke:var(--pos)}
.sk-band.sk-gone{stroke:var(--neg)}
.sk-node.sk-tool{fill:var(--m-system)}
.sk-node.sk-new{fill:var(--pos)}
.sk-node.sk-gone{fill:var(--neg)}
.sk-label{font-size:var(--fs-xs);fill:var(--ink-2)}
.sk-num{fill:var(--muted);font-weight:var(--fw-bold)}
.sk-head{font-size:var(--fs-2xs);font-weight:var(--fw-bold);fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* Nodes and bands coloured by level */
.sk-node.sk-mode-manual{fill:var(--m-manual)} .sk-node.sk-mode-hybrid{fill:var(--m-hybrid)} .sk-node.sk-mode-system{fill:var(--m-system)} .sk-node.sk-mode-automated{fill:var(--m-automated)}
.sk-node.sk-mode-unrated{fill:var(--m-unrated)} .sk-band.sk-mode-unrated{stroke:var(--m-unrated)}
.sk-band.sk-mode-manual{stroke:var(--m-manual)} .sk-band.sk-mode-hybrid{stroke:var(--m-hybrid)} .sk-band.sk-mode-system{stroke:var(--m-system)} .sk-band.sk-mode-automated{stroke:var(--m-automated)}
.sk-band.sk-stay{stroke:var(--line);stroke-opacity:var(--band-hover)}

/* Delta bars */
.dbars{display:grid;grid-template-columns:minmax(110px,190px) minmax(60px,1fr) auto minmax(60px,110px) auto;gap:calc(0.375rem * var(--dz)) var(--space-2);align-items:center;font-size:var(--fs-md)}
.dl-track{position:relative;height:10px;background:var(--grid);border-radius:var(--radius-pill)}
.dl-now{position:absolute;left:0;top:0;bottom:0;background:var(--series);border-radius:var(--radius-pill)}
.dl-from{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:calc(-0.0625rem * var(--dz));background:var(--ink)}
.dl-change{position:relative;height:10px;background:linear-gradient(var(--muted),var(--muted)) center/1px 100% no-repeat}
.dl-bar{position:absolute;top:0;bottom:0;border-radius:var(--radius-1);background:var(--muted)}

/* Sparkline (charts.js sparkline()) */
.spark{width:100%;height:36px;display:block}
.spark polyline{fill:none;stroke:var(--muted);stroke-width:1.5;vector-effect:non-scaling-stroke}
.spark circle{fill:var(--muted)}
.spark-up polyline{stroke:var(--pos)} .spark-up circle{fill:var(--pos)}
.spark-down polyline{stroke:var(--neg)} .spark-down circle{fill:var(--neg)}

/* Bridge (waterfall) */
.bridge{display:grid;grid-template-columns:minmax(120px,200px) minmax(120px,1fr) auto;gap:calc(0.375rem * var(--dz)) var(--space-3);align-items:center;font-size:var(--fs-md)}
.br-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-track{position:relative;height:16px;background:linear-gradient(var(--grid),var(--grid)) center/100% 1px no-repeat}
.br-bar{position:absolute;top:0;bottom:0;border-radius:var(--radius-1)}
.br-total{background:var(--m-hybrid)}
.br-now{background:var(--m-system)}
.br-up{background:var(--pos)}
.br-down{background:var(--neg)}
.br-val{font-weight:var(--fw-bold);background:none}
.br-val.br-total{color:var(--ink)}

/* Stacked +/~/− bar */
.cbar3{display:flex;height:10px;min-width:0;border-radius:var(--radius-1);overflow:hidden;background:var(--grid)}
.cb3-added{background:var(--chg-add)}
.cb3-edited{background:var(--chg-edit)}
.cb3-deleted{background:var(--chg-del)}