/* 300 Phase 0, the platform sheet: the one sheet every dashboard view loads after the WC console library, before its own app sheet.
   Library tokens only (contract.mjs checkSheet): no colour, and no length beyond a 1px hairline, of its own. It shapes the card
   frame, the "as of" stamp, the compact state, the visually hidden text, the data table every chart carries, the focus mark for chart
   marks, and the drill region. */

/* the library has one look, light; a dark operating system must not invert it */
:root { color-scheme: light; }
html, body { height: var(--fill); background-color: var(--canvas); }

/* the card: the whole frame, nothing outside it */
.dash-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background-color: var(--canvas); color: var(--charcoal); }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--len-12); padding: var(--len-8) var(--len-12); }
.dash-title { font-family: var(--font-display); font-size: var(--fs-14); font-weight: var(--weight-semibold); line-height: var(--lh-13); }
.dash-asof { font-size: var(--fs-11); color: var(--ds-secondary); white-space: nowrap; }
.dash-tools { display: flex; align-items: center; gap: var(--len-8); padding: 0 var(--len-12); }
.dash-body { position: relative; flex: 1; min-height: 0; min-width: 0; }
.dash-body > svg, .dash-body > canvas { display: block; }
.dash-compact { padding: var(--len-16); color: var(--ds-secondary); font-size: var(--fs-13); }

/* text only a screen reader reads */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* every chart carries its data as a table (a11y.js describeChart) */
.dash-data { padding: var(--len-4) var(--len-12) var(--len-8); font-size: var(--fs-12); }
.dash-data > summary { cursor: pointer; color: var(--navy); font-weight: var(--weight-semibold); width: max-content; }
.dash-data table { border-collapse: collapse; margin-top: var(--len-6); }
.dash-data caption { text-align: left; color: var(--ds-secondary); padding-bottom: var(--len-4); }
.dash-data th, .dash-data td { padding: var(--len-4) var(--len-8); border-bottom: 1px solid var(--line); text-align: left; }
.dash-data td.num, .dash-data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* chart marks a keyboard can reach (a11y.js markKeys): the focus mark is the library's focus colour */
.dash-mark { cursor: pointer; }
.dash-mark:focus { outline: none; }
.dash-mark:focus-visible { stroke: var(--ogblue); stroke-width: var(--len-2); outline: var(--len-2) solid var(--ogblue); }

/* what a selected mark opens, inside the card (route A cannot open a tab) */
.dash-drill { padding: var(--len-8) var(--len-12); border-top: 1px solid var(--line); font-size: var(--fs-12); overflow: auto; max-height: var(--half); }
.dash-drill:empty { display: none; }

/* the filter notice (a11y.js/filters.js) and the export format prompt (export.js) */
.dash-banner { margin: 0 var(--len-12); display: flex; align-items: center; gap: var(--len-8); padding: var(--len-6) var(--len-12); border-radius: var(--len-8); background-color: var(--ds-blue-lightest); color: var(--charcoal); font-weight: var(--weight-semibold); font-size: var(--fs-12); line-height: var(--lh-14); }
.dash-banner-icon { width: var(--len-16); height: var(--len-16); flex-shrink: 0; color: var(--ogblue); }
.export-menu { display: flex; flex-direction: column; gap: var(--len-8); min-width: var(--len-288); }
.export-format { display: flex; flex-direction: column; align-items: flex-start; gap: var(--len-2); padding: var(--len-8) var(--len-12); border: 1px solid var(--line); border-radius: var(--len-8); background-color: var(--white); text-align: left; cursor: pointer; }
.export-format:hover { background-color: var(--ds-overlay-hover); }
.export-format-label { font-weight: var(--weight-semibold); color: var(--charcoal); }
.export-format-sub { font-size: var(--fs-12); color: var(--ds-secondary); }
.export-status { margin: 0; min-height: var(--len-16); font-size: var(--fs-12); color: var(--ds-secondary); }