/* static/dashboard/dashboard.css · D-243 — the Dashboard wears the Concreet look, scoped.
 *
 * Two parts:
 *   1. The Concreet skin, scoped to `.db-skin` — the same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15),
 *      Performance → SEO, Strategy and Setup. The class sits on `#dashShell`,
 *      the Dashboard's own content box: the tab has no nav tray, and the app
 *      shell (icon rail, operator bar, toasts) is outside it. The token block
 *      is the only place in this file a colour literal may appear.
 *   2. The Dashboard's existing components restyled on those tokens. No markup
 *      was rewritten: every rule below targets a class renderDashboard() already
 *      writes, and none changes the shell's measure or gutter.
 *
 * Board: docs/design/mocks/2026-10-10-dashboard-analytics-concreet-board.html
 * (built on Alex's request of 2026-10-10; he has not walked the board itself).
 */

/* db-skin-tokens:start */
.db-skin {
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Archivo", "Arial Narrow", Arial, sans-serif;
  --paper-0: #FFFFFF; --paper-1: #F1F0EC; --paper-2: #E6E4DE; --paper-3: #C9C6BE; --paper-4: #B3B0A8;
  --ink-0: #0D0D0B; --ink-1: #2E2D2A; --ink-2: #3A3935; --ink-3: #65635D; --ink-4: #6E6C66; --ink-5: #8F8D86;
  --accent: #0D0D0B;
  --concreet: #17B26F; --concreet-deep: #0B7A4A; --concreet-ink: #0B7A4A; --concreet-soft: #DDF3E8;
  --good: #0B7A4A; --good-soft: #DDF3E8; --kpi-tint: #FFFFFF;
  --db-slab-shadow: 6px 6px 0 var(--paper-3);
  --db-slab-shadow-hover: 8px 8px 0 var(--paper-4);
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* db-skin-tokens:end */

/* ── the four triage tiles are links to the Pipeline, so they are the clickable
   card of §7.15 rule 2: white, 1px ink, the offset shadow, deeper on hover.
   The lift (`transform`) goes: the shadow is the affordance. */
.db-skin .dash-stat {
  background: var(--paper-0); border: 1px solid var(--ink-0); border-radius: 0; box-shadow: var(--db-slab-shadow);
  font-family: var(--sans);
}
.db-skin .dash-stat:hover { background: var(--paper-0); border-color: var(--ink-0); box-shadow: var(--db-slab-shadow-hover); transform: none; }
/* the tile's border is already ink at rest and the slab covers a ring on two sides,
   so keyboard focus is an ink outline outside the box (judge J.6) */
.db-skin .dash-stat:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; box-shadow: var(--db-slab-shadow); }

/* ── labels: uppercase, letter-spaced, Archivo 700 at --fs-meta (§7.15 rule 3) */
.db-skin .dash-stat-label, .db-skin .dash-section-meta, .db-skin .pipeline-health-label, .db-skin .dash-triage-cta {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
}
.db-skin .dash-stat-label, .db-skin .dash-section-meta, .db-skin .pipeline-health-label { color: var(--ink-3); }
.db-skin .dash-triage-cta { color: var(--ink-0); }

/* ── headline numbers: Archivo 800, -.02em */
.db-skin .dash-stat-num, .db-skin .pipeline-health-value {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--ink-0);
}
.db-skin .dash-stat-num { font-size: 36px; }
.db-skin .dash-stat.attention .dash-stat-num { font-weight: 800; }
.db-skin .dash-stat.danger .dash-stat-num { color: var(--bad); }
.db-skin .dash-stat-hint, .db-skin .pipeline-health-sub, .db-skin .dash-triage-reason { color: var(--ink-3); }

/* ── section headings: Archivo 800 uppercase */
.db-skin .dash-section-title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 20px; line-height: 1.15; color: var(--ink-0);
}

/* ── flat panels: white, a --paper-3 hairline, square, no shadow. A triage row
   is a click target inside the panel; it keeps its hover tint. */
.db-skin .dash-triage, .db-skin .pipeline-health { background: var(--paper-0); border: 1px solid var(--paper-3); border-radius: 0; box-shadow: none; }
.db-skin .dash-triage-row { border-bottom-color: var(--paper-2); }
.db-skin .dash-triage-row:hover { background: var(--paper-1); }
.db-skin .dash-triage-icon { border-radius: 0; }
.db-skin .dash-triage-row.attention .dash-triage-icon { background: var(--paper-2); color: var(--ink-0); }
.db-skin .dash-triage-stage { font-family: var(--mono); color: var(--ink-2); }
.db-skin .dash-triage-empty { font-style: normal; color: var(--ink-3); }

@media (max-width: 767px) {
  .db-skin .dash-section-title { font-size: 18px; }
}