/* All documents: KPI tiles on top, five cards (six in compare mode) fill the viewport; only cards
   scroll. The dashboard grid, tiles and attention lists are shared (charts.css, layout.css).
   Origin and audience colours are aliases of existing tokens, set here for the legend. */
#view-documents{--o-made:var(--series);--o-procout:var(--h1);--o-received:var(--accent);--o-unused:var(--muted);--a-int:var(--series);--a-ext:var(--accent);--a-none:var(--grid)}
.seg-a-int{background:var(--a-int);color:var(--on-strong)}
.seg-a-ext{background:var(--a-ext);color:var(--on-accent)}
.seg-a-none{background:var(--a-none)}
.seg-o-made{background:var(--o-made);color:var(--on-strong)}
.seg-o-procout{background:var(--o-procout);color:var(--on-h1)}
.seg-o-received{background:var(--o-received);color:var(--on-accent)}
.seg-o-unused{background:var(--o-unused);color:var(--surface)}

#documents-body{flex:1;min-height:0}
.dk{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,1fr)}
.dk-tile .value{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.dk-tile .value .muted{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.dk-tile .value .db-delta{font-size:var(--fs-md)}
.dk-tile .label .i{vertical-align:0}
/* Point in time: origin and kind share column 1; handoffs above made-in in column 3.
   Compare: the mode-change Sankey takes made-in's place, which moves above the attention lists. */
.dk-origin{grid-column:1;grid-row:2}
.dk-kind{grid-column:1;grid-row:3}
.dk-dept{grid-column:2;grid-row:2 / 4}
.dk-hand{grid-column:3;grid-row:2}
.dk-madein{grid-column:3;grid-row:3}
.dk-att{grid-column:4;grid-row:2 / 4}
.dk-flow{grid-column:3;grid-row:3}
.dk.is-compare .dk-madein{grid-column:4;grid-row:2}
.dk.is-compare .dk-att{grid-row:3}
.dk-kind .stack-rows{grid-template-columns:minmax(80px,120px) 1fr auto}

/* Origin key: swatch, name, count and share (or From → Now and change) */
.dk-keys{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-3);font-size:var(--fs-sm)}
.dk-key{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);cursor:help}
.dk-kname{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-kval .db-delta{min-width:3em;display:inline-block}
.dk-origin .stack-rows{grid-template-columns:minmax(40px,90px) 1fr auto;gap:calc(0.375rem * var(--dz)) var(--space-2)}

.dk .stack-rows .dk-total{font-weight:var(--fw-bold);color:var(--ink)}
.dk-dept .stack-rows{grid-template-columns:minmax(80px,150px) 1fr auto}
.dk .bars{gap:calc(0.1875rem * var(--dz)) var(--space-3);grid-template-columns:minmax(90px,170px) 1fr}
.dk .bars .name,.dk .bars .val{font-size:var(--fs-sm);line-height:1.35}

/* Sankeys fill what their card leaves; fitDocs() draws them at this box's width */
.dk-sk{flex:1;min-height:0;display:flex}
.dk-sk .sankey{width:100%;height:100%}
.dk-sk .muted{margin:0;font-size:var(--fs-sm)}

/* Needs attention: three lists share the card's height; each trims to what fits */
.dk-att-sec{flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--grid);padding-top:var(--space-1);margin-top:var(--space-1)}
.dk-att-sec h4{margin:0 0 var(--space-1);font-weight:var(--fw-bold)}
.dk-att-sec h4 .i{margin-left:0}
.dk-list{flex:1;min-height:0;overflow:hidden}
.dk-list code{font-size:var(--fs-xs);color:var(--muted)}
.dk-more{flex:none;font-size:var(--fs-xs);color:var(--accent-ink);padding-top:var(--space-1)}

/* Narrow screens: one column, the page scrolls instead of the cards */
@media (max-width:64em){
  .dk{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .dk > .card,.dk.is-compare .dk-hand{grid-column:auto;grid-row:auto;min-height:18rem}
  .dk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}