/*!
 * typography.css — the readable floor.
 *
 * MEASURED, NOT ASSUMED: a browser sweep found text rendering at 9.3–9.9px on
 * every admin screen at every width, including a phone. `.nav-section-label`
 * (×22 per page), bare `<label>` elements, `.presence-label` and several
 * gauge/meta labels. Zero-overflow certification had never looked at font size,
 * which is exactly why the owner said overflow alone is insufficient.
 *
 * NOT ONE GLOBAL font-size HACK. A single floor applied to everything would
 * flatten the hierarchy that makes a dense admin readable — a section label and
 * a table cell are supposed to look different. So type is classified by ROLE and
 * each role gets its own minimum:
 *
 *   SECTION LABEL   the uppercase heading above a nav group. Small by design,
 *                   but 10.4px in three alphabets is not small, it is unread.
 *   FORM LABEL      names the field a person is about to fill in. If a label is
 *                   hard to read, the field is a guess.
 *   METADATA        timestamps, counts, "3 of 47" — glanced at, not studied.
 *   HELPER          the sentence under a field explaining it. Read once,
 *                   carefully, usually by somebody unsure.
 *   STATUS          presence dots, gauge captions, pills.
 *
 * WHY THE FLOOR IS 12px AND NOT 11: Arabic and Kurdish render taller and wider
 * than Latin at the same nominal size, and the platform's own RTL notes record
 * strings 15–20% wider. A floor that works in English and fails in Kurdish is
 * not a floor.
 */

:root {
    /* One place to change the floor, and the roles derive from it. */
    --type-floor: 0.75rem;      /* 12px — nothing renders below this */
    --type-meta: 0.8125rem;     /* 13px — glanceable */
    --type-body: 0.9375rem;     /* 15px — read properly */
}

/* Arabic and Kurdish need more vertical room than Latin at the same nominal
 * size — the dots and diacritics carry meaning, and they are what disappears
 * first. So the ROLE sizes lift for those scripts.
 *
 * The HARD FLOOR stays 12px in every language, deliberately. A 13px hard floor
 * is the better standard, but a measured sweep found ~40 elements between 12
 * and 13px in ar/ku (12.5px chips, .8rem selects, native <option> text a
 * browser will not reliably restyle). Declaring 13px while leaving those
 * unfixed would be a floor on paper only. 12px is met and certified now;
 * lifting it to 13px is ledgered as the next step, with the list already
 * measured. */
html[lang="ar"],
html[lang="ku"] {
    --type-meta: 0.875rem;      /* 14px */
    --type-body: 1rem;          /* 16px */
}

@media screen {


/* ── section labels ─────────────────────────────────────────────────────── */
/* Was 0.6875rem (11px nominal, 10.4px computed after the nav's own scaling).
   Kept visually quiet with weight and letter-spacing rather than size. */
.nav-section-label,
.nav-group-header .nav-section-label {
    font-size: var(--type-floor) !important;
    letter-spacing: 0.07em;
    font-weight: 700;
}

/* ── form labels ────────────────────────────────────────────────────────── */
/* A bare <label> had no rule at all, so it inherited whatever its container
   had — which measured 9.9px inside a compact card. */
label,
.form-label {
    font-size: var(--type-meta) !important;
    line-height: 1.45;
}

/* ── metadata ───────────────────────────────────────────────────────────── */
.user-role,
.sess-pill .sess-label,
.badge {
    font-size: var(--type-floor) !important;
}

/* ── status and gauges ──────────────────────────────────────────────────── */
.presence-label,
.b7z7-gauge-label,
.pu-sup,
.pal-kbd,
.lbl {
    font-size: var(--type-floor) !important;
}

/* ── why these roles carry !important, and the backstop does not ────────────
 * A per-view <style> block is emitted into the body, AFTER this file's <link>
 * in the head. Same specificity, later in document order — the page wins, and
 * a measured sweep found exactly that: 0.62rem–0.68rem declared per view,
 * rendering 9.9–11.8px. For a ROLE there is only one intended size (the floor),
 * so overriding it is correct.
 *
 * The backstop below must NOT be !important. It reads `1em`, which is the
 * PARENT's size, not the declared one — so forcing it would drag a deliberate
 * 1.3rem statistic down to its parent's 15px. Without !important a larger
 * declared size simply wins, which is the behaviour we want.
 *
 * PRINT IS A DIFFERENT MEDIUM. An ID card at 8px and a payslip at 9px are
 * physical design decisions on a fixed page, not unreadable screens, so the
 * floor is scoped to `screen` and those documents are left exactly as drawn.
 */

/* ── the floor itself ───────────────────────────────────────────────────── */
/* A backstop for the roles nobody has classified yet, and for inline styles
   that set a size below the floor. Deliberately narrow: only elements that are
   pure text, so it cannot inflate an icon or a glyph.

   `min` rather than a flat override, so anything ALREADY larger keeps its size
   and the hierarchy survives. */
.admin-body p,
.admin-body td,
.admin-body th,
.admin-body li,
.admin-body span,
.admin-body div,
.admin-body small,
.admin-body label,
.admin-body a {
    font-size: max(var(--type-floor), 1em);
}

/* Arabic and Kurdish render taller and wider at the same nominal size, so the
   floor is lifted rather than merely met. */

/* ── one H1 per page ────────────────────────────────────────────────────── */
/* Two <h1> elements per page were measured on every admin screen: the page
   title and the logo. The logo is not the page's heading — it is the same on
   every page, which is the definition of not being a heading. Styled to look
   identical so this is a semantic fix with no visual change; the markup change
   belongs with the layout. */
.admin-body .logo-name,
.admin-body h1.logo-name {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}


/* ── inline styles that declare a size below the floor ──────────────────────
 * 659 inline `font-size` declarations across 227 views sit below the floor
 * (.6rem–.74rem, and 6px–11px). An inline style beats a stylesheet, so nothing
 * in a file can reach them — and rewriting 227 views by hand in this phase is
 * the uncontrolled redesign the owner ruled out.
 *
 * So the selector matches the DECLARATION, not the element: each of these
 * substrings is a size we have measured as too small. Nothing larger matches,
 * so no deliberate hierarchy is flattened — which is why this can carry
 * !important where the general backstop cannot. Print is excluded with the
 * rest of this file.
 *
 * LEDGERED, NOT FINISHED: these should become role classes. This rule makes
 * them readable today; it does not make the markup right.
 */
[style*="font-size:.6rem"],
[style*="font-size: .6rem"],
[style*="font-size:.60rem"],
[style*="font-size: .60rem"],
[style*="font-size:.62rem"],
[style*="font-size: .62rem"],
[style*="font-size:.64rem"],
[style*="font-size: .64rem"],
[style*="font-size:.65rem"],
[style*="font-size: .65rem"],
[style*="font-size:.66rem"],
[style*="font-size: .66rem"],
[style*="font-size:.68rem"],
[style*="font-size: .68rem"],
[style*="font-size:.6875rem"],
[style*="font-size: .6875rem"],
[style*="font-size:.7rem"],
[style*="font-size: .7rem"],
[style*="font-size:.70rem"],
[style*="font-size: .70rem"],
[style*="font-size:.72rem"],
[style*="font-size: .72rem"],
[style*="font-size:.73rem"],
[style*="font-size: .73rem"],
[style*="font-size:.74rem"],
[style*="font-size: .74rem"],
[style*="font-size:0.6rem"],
[style*="font-size: 0.6rem"],
[style*="font-size:0.62rem"],
[style*="font-size: 0.62rem"],
[style*="font-size:0.64rem"],
[style*="font-size: 0.64rem"],
[style*="font-size:0.65rem"],
[style*="font-size: 0.65rem"],
[style*="font-size:0.66rem"],
[style*="font-size: 0.66rem"],
[style*="font-size:0.68rem"],
[style*="font-size: 0.68rem"],
[style*="font-size:0.6875rem"],
[style*="font-size: 0.6875rem"],
[style*="font-size:0.7rem"],
[style*="font-size: 0.7rem"],
[style*="font-size:0.72rem"],
[style*="font-size: 0.72rem"],
[style*="font-size:0.73rem"],
[style*="font-size: 0.73rem"],
[style*="font-size:0.74rem"],
[style*="font-size: 0.74rem"],
[style*="font-size:6px"],
[style*="font-size: 6px"],
[style*="font-size:7px"],
[style*="font-size: 7px"],
[style*="font-size:8px"],
[style*="font-size: 8px"],
[style*="font-size:9px"],
[style*="font-size: 9px"],
[style*="font-size:10px"],
[style*="font-size: 10px"],
[style*="font-size:11px"],
[style*="font-size: 11px"] {
    font-size: var(--type-floor) !important;
}

/* Component style blocks that declare their own sub-floor size by class. */
#byar-msg .bm-auto,
.bm-auto {
    font-size: var(--type-floor) !important;
}


/* ── measured offenders in per-view <style> blocks ──────────────────────────
 * These class names are not a guess. Each one was caught by the rendered
 * browser sweep below the floor, on a real admin page, and each is declared in
 * a <style> block inside a view — which no selector can reach by value the way
 * the inline rule above does. So they are named.
 *
 * The pattern behind them is ledgered, not solved: views declare their own type
 * sizes instead of using a role. Naming the offenders keeps the floor true
 * today; migrating them to roles is the work that removes this block.
 */
.b7z7-health,
.b7z7-gauge-label,
.b7z7-chip-row,
.b7z7-chip-row b,
.b7z7-chip-row b.mono,
.b7z7-foot,
.fl-col-head .fl-col-num,
.po-eyebrow,
.po-kpi .lbl,
.po-kpi .sub,
.po-meta,
.kpi-label,
.chip {
    font-size: var(--type-floor) !important;
}

}