/* REN Data dashboards. Load after styles.css. Built on the dashboard grid and status tokens.
   The same parts exist as a Power BI theme (dashboards/powerbi/ren-data.theme.json); see site/dashboards.html. */

/* Canvas: 1920 × 1080. Header band, then content from y 120 to 1016, then the footer at y 1032. */
.dash{width:var(--dash-w);height:var(--dash-h);background:var(--dash-canvas);color:var(--ink);font:16px/1.4 var(--font-sans);font-variant-numeric:tabular-nums;position:relative;overflow:hidden}
.dash-grid{position:absolute;left:var(--dash-margin);right:var(--dash-margin);top:120px;bottom:64px;display:grid;grid-template-columns:repeat(16,var(--dash-col));gap:var(--dash-gutter);grid-template-rows:var(--dash-kpi) 424px minmax(0,1fr)}
.dash-grid--detail{top:200px;grid-template-rows:var(--dash-kpi) 376px minmax(0,1fr)}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-10{grid-column:span 10}.span-12{grid-column:span 12}.span-16{grid-column:span 16}
.rows-all{grid-row:1 / -1}

/* Header: no coloured band. Title, page tabs and the period line sit on the canvas, above a hairline. */
.dash-head{position:absolute;left:0;right:0;top:0;height:var(--dash-header);padding:0 var(--dash-margin);display:grid;grid-template-columns:1fr auto;align-items:end;border-bottom:1px solid var(--line)}
.dash-head__title{margin:0 0 12px;font:700 32px/1.1 var(--font-sans);letter-spacing:var(--tracking-ui);color:var(--heading)}
.dash-head__kicker{display:block;margin:0 0 6px;font:13px var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--link)}
.dash-head__meta{margin:0;font:14px var(--font-mono);color:var(--muted);text-align:right}
.dash-head__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;height:100%;padding-top:20px}

/* Page tabs: the Chip underline tab, sized for a canvas. */
.dash-tabs{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.dash-tabs a{display:block;padding:0 0 10px;font:15px var(--font-sans);color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.dash-tabs a:hover{color:var(--ink)}
.dash-tabs a[aria-current]{color:var(--heading);font-weight:600;border-bottom-color:var(--accent)}

/* Tile: every visual sits on one. White, 1px hairline, 3px corners, no shadow. */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--dash-tile-pad);min-width:0;min-height:0;display:flex;flex-direction:column;gap:4px}
.tile--flush{padding:0}
.tile__title{margin:0;font:600 20px/1.25 var(--font-sans);color:var(--heading)}
.tile__sub{margin:0 0 8px;font-size:14px;color:var(--muted)}
.tile__body{flex:1;min-height:0;position:relative}

/* KPI tile: the BigNumber card. Teal top rule; the status colour when the tile carries a status. */
.kpi{border-top:4px solid var(--link);gap:6px}
.kpi__label{font-size:14px;color:var(--muted)}
.kpi__value{font:700 48px/1 var(--font-sans);letter-spacing:-0.02em;color:var(--heading)}
.kpi__value small{font-size:20px;font-weight:400;letter-spacing:0;color:var(--muted)}
.kpi__context{font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.kpi--on-track{border-top-color:var(--status-on-track)}.kpi--watch{border-top-color:var(--status-watch)}.kpi--off-track{border-top-color:var(--status-off-track)}.kpi--done{border-top-color:var(--status-done)}.kpi--none{border-top-color:var(--status-none)}
.kpi__bar{height:8px;background:var(--ren-platinum);margin-top:auto}
.kpi__bar>span{display:block;height:100%;background:var(--data-1)}

/* Status: a square marker with a sign in it, then a word. Never the colour alone. */
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);white-space:nowrap}
.status::before{content:"–";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--radius-mark);font:700 12px/1 var(--font-sans);background:var(--status-none);color:var(--status-none-ink)}
.status--on-track::before{content:"✓";background:var(--status-on-track);color:var(--status-on-track-ink)}
.status--watch::before{content:"!";background:var(--status-watch);color:var(--status-watch-ink)}
.status--off-track::before{content:"✕";background:var(--status-off-track);color:var(--status-off-track-ink)}
.status--done::before{content:"◍";background:var(--status-done);color:var(--status-done-ink)}
.status--cell{display:flex;padding:2px 8px;border-radius:var(--radius-mark)}
.status--cell.status--on-track{background:var(--status-on-track-bg)}.status--cell.status--watch{background:var(--status-watch-bg)}.status--cell.status--off-track{background:var(--status-off-track-bg)}.status--cell.status--done{background:var(--status-done-bg)}.status--cell.status--none{background:var(--status-none-bg)}

/* Filter rail: left, 4 columns, at most three filters, Apply and Clear, and the note. */
.rail{display:flex;flex-direction:column;gap:16px}
.rail__head{margin:0;font:13px var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font:600 14px var(--font-sans);color:var(--heading)}
.field select{font:15px var(--font-sans);padding:9px 32px 9px 12px;border:1px solid var(--muted);border-radius:var(--radius-code);color:var(--ink);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235C6B68'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none}
.checks{display:flex;flex-direction:column;gap:6px;font-size:15px}
.checks label{display:flex;gap:10px;align-items:center}
.checks input{accent-color:var(--link);width:16px;height:16px;margin:0}
.rail__actions{margin-top:auto;display:grid;gap:8px}
.dbtn{height:40px;display:flex;align-items:center;justify-content:center;font:600 15px var(--font-sans);border:0;border-radius:var(--radius-button);cursor:pointer}
.dbtn--primary{background:var(--accent);color:var(--accent-ink)}.dbtn--primary:hover{background:var(--accent-hover)}
.dbtn--outline{background:transparent;color:var(--link);box-shadow:inset 0 0 0 1.5px var(--link)}.dbtn--outline:hover{box-shadow:inset 0 0 0 2px var(--link)}

/* Note: "What changed", explanations and warnings. The Callout pattern: a rule above, a mono key with a square. */
.note{display:grid;gap:6px;padding:12px 0 0;border-top:1px solid var(--line-strong);font-size:14px;line-height:1.5;color:var(--ink)}
.note__key{display:flex;align-items:center;gap:8px;font:12px var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow)}
.note__key::before{content:"";width:8px;height:8px;background:var(--data-1)}
.note--watch .note__key::before{background:var(--status-watch)}
.note--error .note__key::before{background:var(--status-off-track)}

/* Empty and error states. The tile keeps its title; the message replaces the chart. */
.empty{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;border-top:1px dashed var(--line-strong);padding:20px 0}
.empty__msg{margin:0;font:600 18px/1.3 var(--font-sans);color:var(--muted)}
.empty__why{margin:0;font-size:14px;color:var(--muted)}
.empty--error{border:0;padding:16px;background:repeating-linear-gradient(135deg,var(--danger-bg) 0 10px,var(--surface) 10px 20px)}
.empty--error .empty__msg{color:var(--danger)}
.empty--error .empty__why{color:var(--ink)}

/* Subject bar, detail pages: which item this page is about, and the picker for the next one. */
.subject{position:absolute;left:var(--dash-margin);right:var(--dash-margin);top:120px;height:64px;padding:0 16px;display:flex;align-items:center;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.subject__title{margin:0;font:700 28px/1 var(--font-sans);color:var(--heading)}
.subject__pos{font:14px var(--font-mono);color:var(--muted)}
.subject select{margin-left:auto}

/* Table: ruled, not filled. Bold header over a dark rule, hairlines between rows, a 2px rule over the total. */
.dt{width:100%;border-collapse:collapse;font-size:15px}
.dt th{text-align:left;font:600 14px var(--font-sans);color:var(--heading);padding:8px 12px;border-bottom:1px solid var(--ink);vertical-align:bottom}
.dt td{padding:7px 12px;border-bottom:1px solid var(--rule-data)}
.dt .num{text-align:right}
.dt tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.dt .muted{color:var(--muted)}

/* Footer: one line, from the data. Source, data as of, refreshed. */
.dash-foot{position:absolute;left:var(--dash-margin);right:var(--dash-margin);bottom:24px;height:24px;display:flex;justify-content:space-between;align-items:center;font:13px var(--font-mono);color:var(--muted)}

/* Chart text inside SVG */
.chart text{font:14px var(--font-sans);fill:var(--muted)}
.chart .lbl{fill:var(--ink);font-weight:600}