/* ============================================================================
   TYPE SCALE v89 — loaded last.

   THE DIAGNOSIS (measured on the live app at v85):
     page title      24px / weight 600
     settings h2     18px / weight 670
     card title      14px / weight 660
     section label   11px / weight 680  (uppercase)

   Every level sits between 600 and 680. Weight therefore carries NO signal, and
   with the steps that close together a card title reads as loud as a page title.
   That is exactly "you can't tell what is a title and what is a header".

   Hierarchy needs CONTRAST, on more than one axis at once:
     - size steps that are obvious, not adjacent
     - weight that actually descends
     - colour: primary text for titles, muted for supporting levels
     - space: more room ABOVE a heading than below it, so a heading binds to the
       content it introduces instead of floating between two blocks
   ========================================================================== */

:root,body.light{
  --t-page:26px;      --t-page-w:720;
  --t-sec:19px;       --t-sec-w:660;
  --t-card:15px;      --t-card-w:620;
  --t-eyebrow:11px;   --t-eyebrow-w:700;
  --t-body:13.5px;
  --t-small:12.5px;
}

/* ── L1 · PAGE TITLE — one per screen, the loudest thing on it ───────────── */
body .page-head h1,body .detail-title,body .page-head-tx h1,body h1.page-title{
  font-size:var(--t-page);line-height:1.2;font-weight:var(--t-page-w);
  letter-spacing:-.018em;color:var(--fg);margin:0}
body .page-head p,body .detail-sub,body .page-head-tx p{
  font-size:var(--t-body);line-height:1.5;font-weight:450;
  color:var(--muted);margin:5px 0 0;max-width:74ch}
body .page-head,body .detail-head{margin:0 0 22px}

/* ── L2 · SECTION HEADING — divides a page into parts ───────────────────── */
body .set-sec-head h2,body h2.sec-title,body .sec-head h2{
  font-size:var(--t-sec);line-height:1.3;font-weight:var(--t-sec-w);
  letter-spacing:-.01em;color:var(--fg);margin:0}
body .set-sec-head p,body .sec-head p{
  font-size:var(--t-small);line-height:1.5;font-weight:450;
  color:var(--muted);margin:4px 0 0;max-width:74ch}
body .set-sec-head{margin:0 0 18px}

/* ── L3 · CARD TITLE — names one box, must NOT compete with L1 ──────────── */
body .card-head h3,body .fc-top h3,body .vfs-head9 h3,body .card>h3{
  font-size:var(--t-card);line-height:1.35;font-weight:var(--t-card-w);
  letter-spacing:-.004em;color:var(--fg);margin:0;text-transform:none}
body .vfs-head9 p,body .card-head p{
  font-size:var(--t-small);line-height:1.5;font-weight:450;color:var(--muted);margin:3px 0 0}

/* ── L4 · EYEBROW — a group label inside a card. Smallest, tracked, muted.
   Uppercase is what separates it from a card title at a glance; it must never
   also be large, or it competes with the thing it sits under. ───────────── */
body .section-label,body .eyebrow9,body .dw h3,body .dw-card h3,body .dw-title{
  font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--t-eyebrow-w);
  letter-spacing:.075em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px}
body .section-label:first-child,body .vfs-body9>.section-label:first-child,
body .card-body>.section-label:first-child{margin-top:0}
/* widget titles are eyebrows but live in a fixed header slot */
body .dw h3,body .dw-card h3,body .dw-title{margin:0;min-height:2.6em;
  display:flex;align-items:flex-start;overflow-wrap:anywhere}

/* ── L5 · FIELD LABEL — names one control. Sentence case, near-body size, so
   it never reads as a heading. This is the level that was being confused with
   L4 because both were competing for the same visual weight. ────────────── */
body .field-label,body label.field-label,body .field-wrap>.field-label{
  font-size:var(--t-small);line-height:1.35;font-weight:560;
  letter-spacing:0;text-transform:none;color:var(--fg);
  display:block;margin:0 0 6px}

/* ── BODY, HINTS, NUMBERS ───────────────────────────────────────────────── */
body,body .input,body select,body textarea{font-size:var(--t-body)}
body .field-hint,body p.field-hint,body .row-sub,body .muted,body small{
  font-size:var(--t-small);line-height:1.5;color:var(--muted)}
body .dw-num,body .kpi-v,body .metric-v{
  font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--fg);
  font-variant-numeric:tabular-nums}
body .dtd,body .dth{font-variant-numeric:tabular-nums}
body .dth{font-size:11px;font-weight:680;letter-spacing:.05em;color:var(--muted)}
body .dtd{font-size:13px}

/* ── VERTICAL RHYTHM ─────────────────────────────────────────────────────
   A heading belongs to what FOLLOWS it, so the gap above is always larger than
   the gap below. Without this every heading floats midway between two blocks
   and the page reads as one undifferentiated column. */
body .card+.card,body .page>.card+.card{margin-top:18px}
body .card-body,body .vfs-body9{padding:18px}
body .card-head,body .vfs-head9{padding:15px 18px 13px}
body h2+*,body h3+*{margin-top:0}
body .form-grid{gap:16px 16px}
body .field-wrap+.field-wrap{margin-top:16px}

@media (max-width:640px){
  :root,body.light{--t-page:21px;--t-sec:17px;--t-card:14.5px}
  body .page-head,body .detail-head{margin:0 0 16px}
  body .card-body,body .vfs-body9{padding:14px}
  body .card-head,body .vfs-head9{padding:13px 14px 11px}
}

/* ── MOBILE: WIDGETS AND MAP ─────────────────────────────────────────────
   .dash-grid is a 12-track grid. On a phone every tile must take the full row —
   a 3-track tile inside a 375px viewport is ~70px wide, which is the broken
   widget. Charts keep their height so they stay readable. */
@media (max-width:720px){
  body .dash-grid{grid-template-columns:1fr;gap:12px}
  body .dash-grid>.dw,body .dash-grid>.card{grid-column:1/-1!important;width:auto}
  body .dash-grid>.dw:has(.pie) .pie{width:min(180px,50vw);height:min(180px,50vw)}
  body .dash-grid>.dw:has(.pie) .pie-row{justify-content:flex-start;gap:16px}
  body .dw-body>.chart,body .dw-body>.dw-cost-chart{min-height:200px}

  /* Live map controls moved to css/map-mobile-v102.css - the rules here were
     written against a guessed structure and pinned the search bar ON TOP of the
     pill row. See that file for the measured layout. */

}

/* ── SPECIFICITY: the type scale is the final word on type ────────────────
   Measured after linking this file: the page title still computed 24px/600,
   because per-page rules like `.settings-enterprise .page-head h1` carry more
   classes than anything reasonable here. Out-classing every one of them would
   mean guessing at page-specific selectors forever.
   !important is used ONLY on the size/weight/tracking of the five heading
   levels. That is what this file exists to decide, and nothing else should be
   overriding it — colour, spacing and layout stay unforced above. */
body .page-head h1,body .detail-title,body .page-head-tx h1{
  font-size:var(--t-page)!important;font-weight:var(--t-page-w)!important;
  letter-spacing:-.018em!important;line-height:1.2!important}
body .set-sec-head h2,body h2.sec-title{
  font-size:var(--t-sec)!important;font-weight:var(--t-sec-w)!important;line-height:1.3!important}
body .card-head h3,body .fc-top h3,body .vfs-head9 h3{
  font-size:var(--t-card)!important;font-weight:var(--t-card-w)!important;
  text-transform:none!important;letter-spacing:-.004em!important}
body .section-label{
  font-size:var(--t-eyebrow)!important;font-weight:var(--t-eyebrow-w)!important;
  letter-spacing:.075em!important;text-transform:uppercase!important}
body .field-label{
  font-size:var(--t-small)!important;font-weight:560!important;
  text-transform:none!important;letter-spacing:0!important}
@media (max-width:640px){
  body .page-head h1,body .detail-title{font-size:var(--t-page)!important}
}