/* ============================================================
   SKELETON — the InRoots redesign pass (design handoff 2026-09).
   ------------------------------------------------------------
   One skeleton for every tab: calm ruled section headers, upright
   Inter Tight titles, 10px radii, soft density. This sheet spells
   NO colours — every value is a token from styles-inroots.css
   (scripts/check_brand.py enforces that split).

   Load order: LAST. Editorial re-specifies .sh/.ph at
   html[data-aesthetic="editorial"] (and again with
   [data-density="dense"]), refined-dark at html[data-theme="dark"].
   Every block below therefore repeats its selector at those
   specificities — shrink this file and the italic display titles
   quietly come back (the styles-glass lesson).
   ============================================================ */

/* ── Section header: 14.5px upright title · muted right note · solid rule ── */
.sh,
html[data-aesthetic="editorial"] .sh,
html[data-aesthetic="editorial"] .section-header,
html[data-aesthetic="editorial"][data-density="dense"] .sh {
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.sh-title,
.sh h2,
.section-header .sh-title,
html[data-theme="dark"] .sh-title,
html[data-theme="light"] .sh-title,
html[data-aesthetic="editorial"] .sh-title,
html[data-aesthetic="editorial"] .sh h2,
html[data-aesthetic="editorial"] .section-header .sh-title,
html[data-aesthetic="editorial"] .section-header h2,
html[data-aesthetic="editorial"] .section-header h3,
html[data-aesthetic="editorial"][data-density="dense"] .sh-title,
html[data-theme="dark"][data-density="dense"] .sh-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sh-sub,
.sh .sh-sub,
html[data-aesthetic="editorial"] .sh .sh-sub,
html[data-aesthetic="editorial"] .section-header .sh-sub,
html[data-aesthetic="editorial"][data-density="dense"] .sh .sh-sub {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  margin-top: 3px;
}

/* The right-hand note/actions sit on the same baseline, muted. */
.sh .right,
html[data-aesthetic="editorial"] .sh .right {
  font-size: 11.5px;
  color: var(--text-3);
}

/* ── Page header: 21px/700 upright, tight ── */
.ph h2,
html[data-theme="dark"] .ph h2,
html[data-aesthetic="editorial"] .ph h2,
html[data-aesthetic="editorial"] .ph h1,
html[data-aesthetic="editorial"][data-density="dense"] .ph h2 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── Cards: 10px radii, hairline depth ── */
.card,
html[data-aesthetic="editorial"] .card,
html[data-aesthetic="editorial"][data-density="dense"] .card {
  border-radius: 10px;
}

/* ── Tables shrink instead of collapsing ──
   Real <table> elements: let long cells wrap anywhere so the page
   never scrolls horizontally at ≥900px. Headers stay mono-caps. */
.card table td,
.card table th,
html[data-aesthetic="editorial"] .card table td,
html[data-aesthetic="editorial"] .card table th {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Numerals in tables and KPIs read tabular. */
.card table td,
.kpi-value,
.stat-band-figs {
  font-variant-numeric: tabular-nums;
}

/* ── Demo-box truth chip (Server → Connectivity) ──
   Dashboard-only mode has no chat server; the tab says so instead
   of hiding it. Styled like the existing soft pills. */
.demo-bydesign {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--bg-elev-2);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}