/* ============================================================
   NOVERA.Software — Mobile-First Design Tokens
   Round 5 candidate — edit this file to produce the LOCKED spec.
   ------------------------------------------------------------
   HOW TO USE
   1. Open index.html in a browser (shows all 5 screens).
   2. Edit values below, save, refresh (F5).
   3. When happy, this file IS the locked design system —
      hand it back and all future screens will be built on it.
   Screen-specific LAYOUT lives in each HTML's small <style>
   block; brand/styling decisions all live here.
   ============================================================ */

/* ---- Fonts (local, no CDN dependency) ---- */
/* v11.2 (batch58, owner: "the mock enforces Poppins 200 — our build applies a
   different font") — the family was always Poppins, but only the 400–700
   faces were on disk, so every font-weight:100/200/300 rule silently fell
   back to the 400 face and rendered heavier than the mocks. These light
   faces restore the mock's thin look app-wide. */
@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-100-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-200-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-100-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-200-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-300-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/*  ══════════════════════════════════════════════════════════════════════════
    NOTO COLOR EMOJI — v31.500 (owner, 7 Nov 2026: "for Emojis please use Noto
    Color — one font file").

    Self-hosted beside Poppins and Inter, no CDN, exactly as every other face
    in this file. Eleven unicode-range subsets rather than the one 5.5 MB file
    the package also ships: a page showing three emoji fetches only the subsets
    those three live in, and most pages fetch none at all. All eleven together
    are 3.8 MB, of which 1.1 MB is subset 0 — the regional-indicator letters,
    which is to say the flags, and which is the whole reason this is here.
    Source: @fontsource/noto-color-emoji 5.3.2 (Noto Color Emoji, Google).
    Licence: SIL Open Font License 1.1 — bundling is permitted and no
    attribution is required in the interface.

    ⚠⚠⚠ THIS FAMILY MUST NEVER BE PUT AHEAD OF THE TEXT FACE, AND THE REASON
    IS NOT OBVIOUS. Subset 2 declares `U+23, U+2a, U+30-39` — hash, asterisk
    and EVERY ASCII DIGIT — because those are the base characters of the keycap
    emoji (0️⃣ is 0 + FE0F + 20E3). A stack with 'Noto Color Emoji' in front of
    'Poppins' therefore hands every figure in this application to the emoji
    font. On an accounting screen that is not a cosmetic difference: it would
    take the digits out of the family the tabular-numeral alignment depends on.

    So the rule, which quick500 arm 5 enforces: the family goes at the END of
    a text stack, where it is reached only for characters Poppins does not
    have — which is the emoji and nothing else — and FIRST only where the
    element draws an emoji and never a figure, such as the picker's cells.

    ⚠⚠ AND IT CHANGES WHAT THE TOFU GATE IS MEASURING. `nv-emoji.js` decided
    what to offer by drawing each Unicode version's probe into a canvas in
    `32px sans-serif` — the OPERATING SYSTEM's font. With this loaded that is
    the wrong question in both directions, so the gate now loads the probes in
    this family and measures that; see the comment block there.

    ⚠ Apple devices already draw emoji well and Safari may decline a colour
    webfont; it then falls back to Apple Color Emoji, which is the outcome we
    would have chosen anyway. The readers this is for are on Windows, where
    about 160 of the 1,906 draw as empty boxes and all 270 flags draw as pairs
    of letters.
    ══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-0-400-normal.woff2') format('woff2');  /* 1151 KB */
    unicode-range: U+1f1e6-1f1ff;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-1-400-normal.woff2') format('woff2');  /* 33 KB */
    unicode-range: U+200d,U+2620,U+26a7,U+fe0f,U+1f308,U+1f38c,U+1f3c1,U+1f3f3-1f3f4,U+1f6a9,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-2-400-normal.woff2') format('woff2');  /* 126 KB */
    unicode-range: U+23,U+2a,U+30-39,U+a9,U+ae,U+200d,U+203c,U+2049,U+20e3,U+2122,U+2139,U+2194-2199,U+21a9-21aa,U+23cf,U+23e9-23ef,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2611,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638,U+2640,U+2642,U+2648-2653,U+2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2695,U+269b-269c,U+26a0,U+26a7,U+26aa-26ab,U+26ce,U+26d4,U+2705,U+2714,U+2716,U+271d,U+2721,U+2733-2734,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b55,U+3030,U+303d,U+3297,U+3299,U+fe0f,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f310,U+1f3a6,U+1f3b5-1f3b6,U+1f3bc,U+1f3e7,U+1f441,U+1f499-1f49c,U+1f49f-1f4a0,U+1f4ac-1f4ad,U+1f4b1-1f4b2,U+1f4b9,U+1f4db,U+1f4f2-1f4f6,U+1f500-1f507,U+1f515,U+1f518-1f524,U+1f52f-1f53d,U+1f549,U+1f54e,U+1f5a4,U+1f5e8,U+1f5ef,U+1f6ab,U+1f6ad-1f6b1,U+1f6b3,U+1f6b7-1f6bc,U+1f6be,U+1f6c2-1f6c5,U+1f6d0-1f6d1,U+1f6d7,U+1f6dc,U+1f7e0-1f7eb,U+1f7f0,U+1f90d-1f90e,U+1f9d1-1f9d2,U+1f9e1,U+1fa75-1fa77,U+1faaf;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-3-400-normal.woff2') format('woff2');  /* 323 KB */
    unicode-range: U+200d,U+231a-231b,U+2328,U+23f0-23f3,U+2602,U+260e,U+2692,U+2694,U+2696-2697,U+2699,U+26b0-26b1,U+26cf,U+26d1,U+26d3,U+2702,U+2709,U+270f,U+2712,U+fe0f,U+1f302,U+1f321,U+1f392-1f393,U+1f3a9,U+1f3bd,U+1f3ee,U+1f3f7,U+1f3fa,U+1f451-1f462,U+1f484,U+1f489-1f48a,U+1f48c-1f48e,U+1f4a1,U+1f4a3,U+1f4a5,U+1f4b0,U+1f4b3-1f4b8,U+1f4bb-1f4da,U+1f4dc-1f4f1,U+1f4ff,U+1f508-1f514,U+1f516-1f517,U+1f526-1f529,U+1f52c-1f52e,U+1f550-1f567,U+1f56f-1f570,U+1f576,U+1f587,U+1f58a-1f58d,U+1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5f3,U+1f6aa,U+1f6ac,U+1f6bd,U+1f6bf,U+1f6c1,U+1f6cb,U+1f6cd-1f6cf,U+1f6d2,U+1f6e0-1f6e1,U+1f6f0,U+1f97b-1f97f,U+1f9af,U+1f9ba,U+1f9e2-1f9e6,U+1f9ea-1f9ec,U+1f9ee-1f9f4,U+1f9f7-1f9ff,U+1fa71-1fa74,U+1fa79-1fa7b,U+1fa86,U+1fa8e-1fa8f,U+1fa91-1fa93,U+1fa96,U+1fa99-1faa0,U+1faa2-1faa7,U+1faaa-1faae;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-4-400-normal.woff2') format('woff2');  /* 214 KB */
    unicode-range: U+265f,U+26bd-26be,U+26f3,U+26f8,U+fe0f,U+1f004,U+1f0cf,U+1f380-1f384,U+1f386-1f38b,U+1f38d-1f391,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f39f,U+1f3a3-1f3a5,U+1f3a7-1f3a9,U+1f3ab-1f3b4,U+1f3b7-1f3bb,U+1f3bd-1f3c0,U+1f3c5-1f3c6,U+1f3c8-1f3c9,U+1f3cf-1f3d3,U+1f3f8-1f3f9,U+1f47e,U+1f4e2,U+1f4f7-1f4fd,U+1f52b,U+1f579,U+1f58c-1f58d,U+1f5bc,U+1f6f7,U+1f6f9,U+1f6fc,U+1f93f,U+1f941,U+1f945,U+1f947-1f94f,U+1f9e7-1f9e9,U+1f9f5-1f9f6,U+1fa70-1fa71,U+1fa80-1fa81,U+1fa83-1fa85,U+1fa87-1fa8a,U+1fa94-1fa95,U+1fa97-1fa98,U+1faa1,U+1faa9,U+1fadf;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-5-400-normal.woff2') format('woff2');  /* 246 KB */
    unicode-range: U+2693,U+26e9-26ea,U+26f1-26f2,U+26f4-26f5,U+26fa,U+26fd,U+2708,U+fe0f,U+1f301,U+1f303,U+1f306-1f307,U+1f309,U+1f310,U+1f3a0-1f3a2,U+1f3aa,U+1f3cd-1f3ce,U+1f3d5,U+1f3d7-1f3db,U+1f3df-1f3e6,U+1f3e8-1f3ed,U+1f3ef-1f3f0,U+1f488,U+1f492,U+1f4ba,U+1f54b-1f54d,U+1f5fa-1f5ff,U+1f680-1f6a2,U+1f6a4-1f6a8,U+1f6b2,U+1f6d1,U+1f6d5-1f6d6,U+1f6dd-1f6df,U+1f6e2-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f3-1f6f6,U+1f6f8,U+1f6fa-1f6fb,U+1f9bc-1f9bd,U+1f9ed,U+1f9f3,U+1fa7c;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-6-400-normal.woff2') format('woff2');  /* 281 KB */
    unicode-range: U+200d,U+2615,U+fe0f,U+1f32d-1f330,U+1f336,U+1f33d,U+1f344-1f37f,U+1f382,U+1f52a,U+1f7e9,U+1f7eb,U+1f942-1f944,U+1f950-1f96f,U+1f99e,U+1f9aa,U+1f9c0-1f9cb,U+1fad0-1fadc;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-7-400-normal.woff2') format('woff2');  /* 484 KB */
    unicode-range: U+200d,U+2600-2601,U+2603-2604,U+2614,U+2618,U+26a1,U+26c4-26c5,U+26c8,U+26f0,U+2728,U+2744,U+2b1b,U+2b50,U+fe0f,U+1f300,U+1f304-1f305,U+1f308,U+1f30a-1f30f,U+1f311-1f321,U+1f324-1f32c,U+1f331-1f335,U+1f337-1f33c,U+1f33e-1f344,U+1f3d4,U+1f3d6,U+1f3dc-1f3de,U+1f3f5,U+1f400-1f43f,U+1f490,U+1f4a7,U+1f4ae,U+1f525,U+1f54a,U+1f573,U+1f577-1f578,U+1f648-1f64a,U+1f6d8,U+1f940,U+1f980-1f9ae,U+1f9ba,U+1fa90,U+1faa8,U+1fab0-1fabf,U+1facd-1facf,U+1fae7;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-8-400-normal.woff2') format('woff2');  /* 693 KB */
    unicode-range: U+200d,U+2640,U+2642,U+2695-2696,U+26f7,U+26f9,U+2708,U+2764,U+27a1,U+fe0f,U+1f33e,U+1f373,U+1f37c,U+1f384-1f385,U+1f393,U+1f3a4,U+1f3a8,U+1f3c2-1f3c4,U+1f3c7,U+1f3ca-1f3cc,U+1f3eb,U+1f3ed,U+1f3fb-1f3ff,U+1f430,U+1f466-1f469,U+1f46b-1f478,U+1f47c,U+1f481-1f483,U+1f486-1f487,U+1f48b,U+1f48f,U+1f491,U+1f4bb-1f4bc,U+1f527,U+1f52c,U+1f574-1f575,U+1f57a,U+1f645-1f647,U+1f64b,U+1f64d-1f64e,U+1f680,U+1f692,U+1f6a3,U+1f6b4-1f6b6,U+1f6c0,U+1f6cc,U+1f91d,U+1f926,U+1f930-1f931,U+1f934-1f93a,U+1f93c-1f93e,U+1f977,U+1f9af-1f9b3,U+1f9b8-1f9b9,U+1f9bc-1f9bd,U+1f9cc-1f9cf,U+1f9d1-1f9df,U+1fa70,U+1fa82,U+1fac3-1fac5,U+1fac8,U+1faef;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-9-400-normal.woff2') format('woff2');  /* 289 KB */
    unicode-range: U+200d,U+2194-2195,U+2603,U+261d,U+2620,U+2639-263a,U+2665,U+26a1,U+26c4,U+270a-270d,U+2728,U+2763-2764,U+2b50,U+fe0f,U+1f31a-1f31f,U+1f32b,U+1f389-1f38a,U+1f3fb-1f3ff,U+1f440-1f450,U+1f463-1f465,U+1f479-1f47b,U+1f47d-1f480,U+1f485,U+1f48b-1f48c,U+1f493-1f49f,U+1f4a2,U+1f4a4-1f4a6,U+1f4a8-1f4ab,U+1f4af,U+1f525,U+1f573,U+1f590,U+1f595-1f596,U+1f5a4,U+1f5e3,U+1f600-1f644,U+1f648-1f64a,U+1f64c,U+1f64f,U+1f90c-1f925,U+1f927-1f92f,U+1f932-1f933,U+1f970-1f976,U+1f978-1f97a,U+1f9a0,U+1f9b4-1f9b7,U+1f9bb,U+1f9be-1f9bf,U+1f9d0,U+1f9e0-1f9e1,U+1fa75-1fa79,U+1fac0-1fac2,U+1fac6,U+1fae0-1fae6,U+1fae8-1faea,U+1faef-1fafa;
}

@font-face {
    font-family: 'Noto Color Emoji';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/noto-color-emoji-10-400-normal.woff2') format('woff2');  /* 19 KB */
    unicode-range: U+1f6d9,U+1fa8b-1fa8d,U+1facc,U+1fadd,U+1faeb;
}

:root {
    /* ---- Brand color tokens (carried over from v2.0) ---- */
    --nv-bg-deep: #050912; /* page background            */
    --nv-bg: #0b1020; /* app background             */
    --nv-surface: #101a30; /* card surface               */
    --nv-surface-2: #16213c; /* raised surface / sheet     */
    --nv-surface-3: #1d2a4a; /* pressed / input fill       */

    --nv-gold: #e8a75c; /* brand gold                 */
    --nv-gold-bright: #f2bc74;
    --nv-gold-dim: #a97b46;
    --nv-blue: #2f7fd6; /* brand blue                 */
    --nv-blue-bright: #4a92dd;
    --nv-blue-glow: rgba(47,127,214,.45);
    --nv-red: #c04848; /* circle-motif red           */

    --nv-ink: #f1f3f9; /* primary text               */
    --nv-ink-2: #aab3c8; /* secondary text             */
    --nv-ink-3: #6b7690; /* muted / captions           */
    /* Chart series — CVD-validated on dark surface */
    --nv-s1: #4a92dd; /* Revenue  (brand blue)      */
    --nv-s2: #b8802f; /* Expenses (brand gold step) */
    --nv-s3: #b06fd4; /* Income   (violet)          */

    --nv-good: #58b368;
    --nv-warn: #d9a13b;
    --nv-danger: #d96565;
    --acc-green: #3fca85;
    --acc-blue: #57a4f0;
    --acc-gold: #e8a75c;
    --acc-purple: #b184e6;
    --acc-pink: #e07bb4;
    /* ---- Type scale (mobile-first) ---- */
    --fs-display: 36px; /* screen headers       */
    --fs-h2: 23px; /* section titles       */
    --fs-body: 18px; /* normal text          */
    --fs-caption: 16px; /* captions — minimum   */
    /* ---- Space & shape ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --r-card: 6px;
    --r-input: 6px;
    --r-pill: 5px; /* v7.6 (owner) — squared-off pills, was 999px */
    --touch: 48px; /* minimum touch target       */
    --border-subtle: 1px solid rgba(232,167,92,.10);
    --shadow-card: 0 8px 24px rgba(0,0,0,.35);
}

/* ---- Base ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html, body {
    background: var(--nv-bg-deep);
}

body {
    /*  ⚠ 'Noto Color Emoji' is LAST on purpose — see the block above. Poppins answers every latin
        character and every digit, so the emoji family is reached only for the codepoints Poppins
        does not have, which is the emoji. Neither 'Segoe UI Emoji' nor 'Apple Color Emoji' is named
        here, so on a machine that has loaded the webfont Noto is what draws them. */
    font-family: 'Poppins',-apple-system,'Segoe UI','Noto Color Emoji',sans-serif;
    color: var(--nv-ink);
    font-size: var(--fs-body);
    line-height: 1.5;
}

/* ---- Phone canvas ---- */
.phone {
    position: relative;
    width: 390px;
    height: 844px;
    margin: 0 auto;
    overflow: hidden;
    background: radial-gradient(120% 60% at 72% -15%, rgba(47,111,200,.34), transparent 62%), radial-gradient(90% 45% at 6% 6%, rgba(64,120,255,.15), transparent 60%), radial-gradient(80% 40% at 108% 52%, rgba(80,110,220,.13), transparent 65%), radial-gradient(100% 50% at 50% 115%, rgba(47,127,214,.15), transparent 62%), linear-gradient(180deg,#0b1326,#0a0f1e);
    display: flex;
    flex-direction: column;
}

/* Subtle starfield */
.stars, .stars::before, .stars::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: '';
}

    .stars::before {
        background-image: radial-gradient(1.2px 1.2px at 30px 90px, rgba(255,255,255,.55), transparent 60%), radial-gradient(1px 1px at 120px 40px, rgba(255,255,255,.35), transparent 60%), radial-gradient(1.4px 1.4px at 210px 130px,rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 300px 70px, rgba(255,255,255,.30), transparent 60%), radial-gradient(1.2px 1.2px at 355px 180px,rgba(255,255,255,.40), transparent 60%), radial-gradient(1px 1px at 70px 220px, rgba(255,255,255,.28), transparent 60%), radial-gradient(1.3px 1.3px at 160px 300px,rgba(255,255,255,.35), transparent 60%), radial-gradient(1px 1px at 250px 250px, rgba(255,255,255,.25), transparent 60%), radial-gradient(1.2px 1.2px at 340px 330px,rgba(255,255,255,.30), transparent 60%), radial-gradient(1px 1px at 40px 400px, rgba(255,255,255,.22), transparent 60%), radial-gradient(1.2px 1.2px at 190px 460px,rgba(255,255,255,.26), transparent 60%), radial-gradient(1px 1px at 310px 430px, rgba(255,255,255,.20), transparent 60%), radial-gradient(1.2px 1.2px at 90px 560px, rgba(255,255,255,.22), transparent 60%), radial-gradient(1px 1px at 260px 600px, rgba(255,255,255,.18), transparent 60%), radial-gradient(1.2px 1.2px at 350px 660px,rgba(255,255,255,.20), transparent 60%), radial-gradient(1px 1px at 150px 720px, rgba(255,255,255,.16), transparent 60%);
    }

/* ---- Status bar ---- */
.statusbar {
    position: relative;
    z-index: 3;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 0;
}

    .statusbar .time {
        font-size: 15px;
        font-weight: 200;
        letter-spacing: .02em;
    }

    .statusbar svg {
        display: block;
    }

/* ---- Screen header ---- */
/* Toolkit rule (owner, 2026-08-06): every h1 is compact — smaller and
   lighter buys page space and reads better. font-size 24, weight 100. */
h1 {
    font-size: 24px;
    font-weight: 100;
}

.screen-head {
    position: sticky;
    top: 0;
    z-index: 20;
    /* owner (2026-08-09): header bottom padding is ALWAYS at least 10px */
    padding: 10px 20px 10px;
    background: linear-gradient(180deg, rgba(8,12,24,.94), rgba(8,12,24,.80));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

    .screen-head h1 {
        font-size: 24px;
        font-weight: 300; /* owner (2026-08-11 v10) */
        line-height: 1.15;
        color: var(--nv-ink);
    }

        .screen-head h1 .dot {
            color: var(--nv-gold);
        }

    .screen-head .sub {
        font-size: var(--fs-caption);
        color: var(--nv-ink-2);
        margin-top: 2px;
    }

h2.section {
    font-size: 20px; /* owner (2026-08-11 v10) */
    font-weight: 300; /* owner (2026-08-11 v10) */
    color: var(--nv-gold);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    /*  ⚠⚠⚠ v31.163 (owner) — THE GOLD FULL STOP SITS BESIDE ITS LABEL.
        Owner: *"The gold full stop `<span class="gold">.</span>` has too much
        spacing before it. This appears across all pages."*

        THE CAUSE IS THE RULE DIRECTLY ABOVE, not the dot. `h2.section` is a
        FLEX ROW with `justify-content: space-between`, and the space-between
        is there so a `.more` link can sit at the right end. In the common
        heading there is no `.more` — there is a label span and a dot span, so
        the two flex items ARE the two ends, and the browser pushed the full
        stop to the far edge of the card. The gap was the card's whole width
        minus the label; nothing set a margin, so nothing could be found by
        looking for one.

        ⚠ WHY IT LOOKED FINE ON SOME PAGES. Reports and Workspace write the
        heading as `<span><span>Label</span><span class="gold">.</span></span>`
        — ONE flex item, so there is nothing for space-between to split. That
        extra wrapper was a per-page workaround for this rule, applied where
        someone noticed and absent everywhere else. It is left in place: it
        still renders correctly and rewriting a dozen headings to prove a
        point would touch a dozen verified surfaces for no gain.

        ⚠⚠ THE FIX IS `margin-right: auto` ON THE DOT, NOT A GAP OR A NEGATIVE
        MARGIN. The auto margin absorbs ALL the free space, which leaves
        space-between with nothing to distribute — so the label and the dot
        pack together at the start, and a `.more` (or any later child) still
        lands hard right, exactly as it does today. A `justify-content:
        flex-start` here would have taken the `.more` slot away from every
        heading in the app.
        ⚠ It matches `> .gold` ONLY as a DIRECT child, so the wrapped shape
        above is untouched, and a `.gold` used inside a heading's text is
        untouched. `h1` is not a flex row, so its dots were never affected. */
    h2.section > .gold {
        margin-right: auto;
    }

    h2.section .more {
        font-size: var(--fs-caption);
        font-weight: 200;
        /*  ⚠ v31.158 — completing the owner's v29.6 ruling made on `.chip`:
            "a chip is often an <a>; nothing here is ever underlined". `.more`
            is often an <a> too — on /notes it is the "Edit" link — and it had
            been picking up the UA underline everywhere it was one. Harmless on
            a <span>, which is the other half of its usage. */
        text-decoration: none;
        color: var(--nv-ink-2);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: var(--touch);
        padding: 0 4px;
    }

/* ---- Scroll body ---- */
    .scroll {
        position: relative;
        z-index: 2;
        flex: 1;
        overflow: hidden;
        padding: 8px 20px 0px;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }
    /* ---- Cards ---- */
    .card {
        /*  background: linear-gradient(160deg,rgba(120,165,240,.09),rgba(255,255,255,.015) 55%),rgba(13,22,42,.30);
    backdrop-filter: blur(20px) saturate(150%);*/ /* owner */
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid rgba(104,152,232,.22);
        border-radius: var(--r-card);
        padding: var(--sp-5);
        box-shadow: inset 0 1px 0 rgba(140,180,245,.10), var(--shadow-card);
    }

        .card.tight {
            padding: var(--sp-3) var(--sp-4);
        }
    /* ---- List rows (48px+ targets) ---- */
    .row {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        min-height: 56px;
        padding: 6px 0;
    }

        .row + .row {
            border-top: 1px solid rgba(104,152,232,.13);
        }

        .row .ic {
            flex: 0 0 46px;
            height: 46px;
            /*border-radius: 13px;*/
            background: rgba(18,30,56,.28);
            /*border: 1px solid rgba(232,167,92,.26);*/
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--nv-gold);
        }

    .tint-blue {
        background: rgba(87,164,240,.07) !important;
        border-color: rgba(87,164,240,.42) !important;
        color: var(--acc-blue) !important;
    }

    .tint-green {
        background: rgba(63,202,133,.07) !important;
        border-color: rgba(63,202,133,.42) !important;
        color: var(--acc-green) !important;
    }

    .tint-gold {
        background: rgba(232,167,92,.07) !important;
        border-color: rgba(232,167,92,.42) !important;
        color: var(--acc-gold) !important;
    }

    .tint-purple {
        background: rgba(177,132,230,.07) !important;
        border-color: rgba(177,132,230,.42) !important;
        color: var(--acc-purple) !important;
    }

    .tint-pink {
        background: rgba(224,123,180,.07) !important;
        border-color: rgba(224,123,180,.42) !important;
        color: var(--acc-pink) !important;
    }

    .row .txt {
        flex: 1;
        min-width: 0;
    }

        .row .txt .t {
            font-size: var(--fs-body);
            font-weight: 300;
            color: var(--nv-ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .row .txt .s {
            font-size: var(--fs-caption);
            color: var(--nv-ink-3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .row .end {
        flex: 0 0 auto;
        color: var(--nv-ink-3);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .badge {
        min-width: 28px;
        height: 28px;
        padding: 0 9px;
        border-radius: var(--r-pill);
        background: rgba(47,127,214,.28);
        color: #9ecaf4;
        font-size: 15px;
        font-weight: 200;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .badge.gold {
            /*background: rgba(232,167,92,.16);*/
            color: var(--nv-gold-bright);
            border: 1px solid var(--nv-blue-glow);
            background: transparent;
            width: 65px;
        }
    /* ---- Chips ---- */
    .chips {
        display: flex;
        gap: var(--sp-2);
    }

    .chip {
        height: 32px; /* owner */
        /* v29.6 (owner) - a chip is often an <a>; nothing here is ever
           underlined, on any of the three controls */
        text-decoration: none;
        padding: 0 13px;
        border-radius: var(--r-pill);
        border: 1px solid rgba(104,152,232,.28);
        color: var(--nv-ink-2);
        font-size: var(--fs-caption);
        font-weight: 200;
        background: linear-gradient(160deg,rgba(120,165,240,.08),rgba(255,255,255,.02));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: inherit;
    }

        .chip.on {
            background: rgba(232,167,92,.14);
            border-color: rgba(232,167,92,.45);
            color: var(--nv-gold-bright);
        }
    /* Chips inside a .chips row share the full width equally, whatever the count. */
    .chips > .chip {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 0 10px;
    }
    /* ---- Inputs ---- */
    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

        .field label {
            font-size: var(--fs-caption);
            font-weight: 200;
            color: var(--nv-ink-2);
        }

.input {
    height: 36px; /* owner (2026-08-14 batch82): inputs 36px system-wide (32 was too far) */
    border-radius: var(--r-input);
    background: linear-gradient(160deg,rgba(120,165,240,.07),rgba(255,255,255,.01));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(112,160,238,.30);
    color: var(--nv-ink);
    font-size: var(--fs-body);
    font-family: inherit;
    font-weight: 200;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-shadow: inset 0 1px 0 rgba(140,180,245,.10), 0 4px 14px rgba(0,0,0,.20);
}

        .input:focus-within, .input.focus {
            border-color: var(--nv-blue-bright);
            box-shadow: 0 0 0 3px rgba(47,127,214,.25);
        }

        .input .val {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .input .hint {
            color: var(--nv-ink-3);
        }

        .input svg {
            flex: 0 0 auto;
            color: var(--nv-ink-3);
        }
    /* ---- Buttons ---- */
    .btn {
        height: 51px; /* owner (2026-08-14 batch81): buttons 51px system-wide */
        border-radius: var(--r-input);
        border: 0;
        font-family: inherit;
        font-size: 19px;
        font-weight: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

        .btn.primary {
            /* owner (2026-08-14 batch81): 51px, matching .btn (was 52) */
            height: 51px;
            text-decoration: none; /* v29.6 (owner) */
            /*background: var(--nv-gold);*/
            background: linear-gradient(90deg, #042850, #017cba) !important;
            border: 2px solid #60a5fa;
            color: #a8b3d1;
            font-weight: 200;
            letter-spacing: .01em;
            box-shadow: 0 8px 22px rgba(232,167,92,.26);
        }

        .btn.ghost {
            text-decoration: none; /* v29.6 (owner) */
            background: linear-gradient(160deg,rgba(120,165,240,.07),rgba(255,255,255,.015));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(104,152,232,.28);
            color: var(--nv-ink-2);
            box-shadow: inset 0 1px 0 rgba(140,180,245,.08);
        }

    /* ═══ v28.9 (owner - THE UPGRADE LOOK, study B5 "conic halo") ═══════════
       A GRADIENT BORDER ON EVERY GHOST BUTTON. The gradient TURNS THE CORNER
       instead of crossing it, so all four sides carry light rather than one
       edge fading into three dead ones.

       ⚠ BORDER ONLY. Height, radius, type, label colour and the ghost
       background above are untouched - this adds an edge and nothing else.

       ⚠⚠ WHY NOT border-image, which is the obvious tool: IT IGNORES
       border-radius. Every 6px corner in the app would square off.

       ⚠⚠ WHY A MASKED RING rather than the padding-box/border-box background
       trick: this button already owns a background AND a backdrop-filter. A
       border-box layer would fight both. The ring paints the 1px edge and
       nothing else, so nothing underneath changes.

       ⚠⚠⚠ THE @supports GUARD IS LOAD-BEARING. Without mask-composite the
       ::before does not become a ring - it stays a filled rectangle covering
       the whole button. So the ring is only ever applied where the mask is
       supported, and the 1px solid border above remains the fallback: an old
       browser sees today's button, never a gold slab over the label. */
    @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
        .btn.ghost {
            border-color: transparent;
            position: relative;
            isolation: isolate;
        }

            .btn.ghost::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                padding: 1px;
                background: conic-gradient(from 210deg, rgba(232,167,92,.85), rgba(47,127,214,.55) 25%, rgba(104,152,232,.14) 50%, rgba(47,127,214,.55) 75%, rgba(232,167,92,.85));
                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
            }
        /* a disabled ghost keeps its shape but drops the light - the ring is
           an affordance, and an affordance on a dead control is a lie */
        .btn.ghost:disabled::before {
            opacity: .35;
        }
    }
    /* ---- FAB ---- */
    .fab {
        position: absolute;
        right: 20px;
        bottom: 118px;
        z-index: 6;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--nv-gold);
        color: #241706;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 22px rgba(232,167,92,.28);
    }
    /*  ══════════════════════════════════════════════════════════════════════
        v31.532 — `--nv-navh` IS THE NAV'S HEIGHT, not a copy of it.

        [stated] owner, 10 Nov 2026: *"Any Messages overlay/sheet should
        calculate its usable mobile height excluding the fixed bottom
        navigation... Do not fix these two screenshots with independent
        hard-coded heights if the same shared mobile overlay rule can resolve
        both."*

        ⚠⚠⚠ THE HEIGHT WAS COPIED INTO AN OVERLAY AS A LITERAL AND IT WAS
        ALREADY WRONG AT ONE BAND. `.msg-details` carried `padding-bottom:
        96px` under a comment reading *"the bottom nav (which is 86–110px
        tall)"* — the uncertainty is in the comment because the number is in
        two places. The nav is 96px at 01-Screen and **110px from 768**
        (responsive.css), so that padding under-cleared by 14px on every
        tablet, and nothing could notice.

        ⚠⚠ The token is declared HERE, beside the only rule that sets the
        height, and the height is then read FROM it. Changing one changes the
        other, because they are the same declaration. This is the `--sheet-gap`
        lesson above applied one level up — except that `--sheet-gap` had to be
        re-derived by hand at four breakpoints, which is the part worth not
        repeating.

        ⚠ `--nv-navclear` is what a sheet should actually reserve: the nav plus
        the device's own bottom inset. On a phone with a home indicator the
        nav's own padding sits inside its 96px, so a sheet stopping at the
        nav's top edge still clears the hardware.

        ⚠ Declared in their own `:root` block: the rules around here are
        TOP-LEVEL (their indentation is cosmetic, which is easy to misread),
        and a bare custom property between two rule blocks is invalid CSS —
        dropped silently, taking the overlay fix with it.                    */
:root {
    --nv-navh: 96px;
    --nv-navclear: calc(var(--nv-navh) + env(safe-area-inset-bottom, 0px));

    /*  ══════════════════════════════════════════════════════════════════════
        v31.533 — THE HOUSE PANEL GRADIENT, declared once.

        [stated] owner, 10 Nov 2026: *"Replace the current uniform dark
        background on the user/account information card with the subtle
        gradient background already used by V2 pop-up messages, keeping the
        existing content and controls unchanged."*

        ⚠ He is asking two surfaces to MATCH, so the value may not be copied
        from one to the other — that is how `padding-bottom: 96px` came to be
        wrong at one band two rounds ago. The pop-up box (`_NvMsg.cshtml`) and
        the account card now read the same declaration.

        ⚠ `.mail-sheet` carries the same three colours at different stops
        (-151% / 50% / 100% 100%) and is deliberately NOT folded in here: it is
        a taller surface and its ramp was tuned for that, so making them one
        token would change a sheet nobody asked about.                       */
    --nv-grad-panel: linear-gradient(145deg, #010107 0%, #1E1E1E 50%, #13294B 100%);
}

    /* ---- Bottom navigation (max 5 items, thumb-first) ---- */
    .bottomnav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        height: var(--nv-navh);
        padding: 10px 8px 26px;
        display: flex;
        background: linear-gradient(180deg,rgba(11,16,32,0) 0%,rgba(10,15,29,.72) 26%,rgba(8,12,24,.88) 60%);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
    }

        .bottomnav::before {
            content: '';
            position: absolute;
            top: 0;
            left: 20px;
            right: 20px;
            height: 1px;
            background: linear-gradient(90deg,transparent,rgba(232,167,92,.35),transparent);
        }

    .bnav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--touch);
        color: var(--nv-ink-3);
        position: relative;
        text-decoration: none;
    }

        .bnav-item .icw {
            position: relative;
            width: 52px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bnav-item.on {
            color: var(--nv-gold-bright);
        }

            .bnav-item.on .icw::before {
                content: '';
                position: absolute;
                inset: -4px 2px;
                border-radius: 50%;
                border: 1.5px solid var(--nv-red);
                opacity: .85;
                transform: rotate(-4deg);
            }

        .bnav-item .lbl {
            font-size: 15px;
            font-weight: 400; /* owner (2026-08-11 v10) */
            letter-spacing: .01em;
        }

        .bnav-item.on .lbl {
            font-weight: 400; /* owner (2026-08-11 v10) */
        }

    .home-indicator {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 5px;
        border-radius: 3px;
        background: rgba(255,255,255,.28);
        z-index: 6;
    }
    /* ---- Bottom sheet ---- */
    .scrim {
        position: absolute;
        inset: 0;
        z-index: 7;
        background: rgba(3,6,14,.62);
        backdrop-filter: blur(2px);
    }

    .sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8;
        background: linear-gradient(160deg,rgba(120,165,240,.10),rgba(255,255,255,.02) 40%),rgba(14,23,44,.80);
        backdrop-filter: blur(26px) saturate(140%);
        -webkit-backdrop-filter: blur(26px) saturate(140%);
        border-top: 1px solid rgba(104,152,232,.30);
        border-radius: 28px 28px 0 0;
        padding: 10px 20px 34px;
        box-shadow: inset 0 1px 0 rgba(140,180,245,.12), 0 -18px 48px rgba(0,0,0,.55);
    }

        .sheet .grab {
            width: 44px;
            height: 5px;
            border-radius: 3px;
            background: rgba(255,255,255,.22);
            margin: 4px auto 14px;
        }

        .sheet h2 {
            font-size: var(--fs-h2);
            font-weight: 200;
            color: var(--nv-gold);
            margin-bottom: 6px;
        }
    /* ---- NOVERA wordmark ---- */
    .wordmark {
        display: inline-block;
        border: 1.5px solid var(--nv-gold);
        border-radius: 4px;
        padding: 12px 26px;
        color: var(--nv-ink);
        font-weight: 200;
        letter-spacing: .42em;
        font-size: 22px;
        text-indent: .42em;
    }

        .wordmark .e {
            display: inline-block;
            transform: scaleX(-1);
        }
    /* Utility */
    .muted {
        color: var(--nv-ink-3);
        font-size: var(--fs-caption);
        /*  v31.31 (batch227, owner: "The muted ink should always have
            font-weight:100"). It belongs HERE, on the token, rather than as a
            sweep through the pages: muted is one idea used in 195 places and
            this is the one rule that defines it, so the weight cannot drift
            away from the colour it goes with.
            ⚠ 100 IS INSIDE THE LOCKED LADDER - the toolkit caps weight at 200
            and h1 is already 100, so this thins the quietest text to the same
            weight as the loudest and nothing new is invented.
            ⚠ A MORE SPECIFIC RULE STILL WINS, which is correct: where a page
            has deliberately set a weight on an element that also carries
            `.muted`, that intent survives. This sets the default, not a law. */
        font-weight: 100;
    }

    .gold {
        color: var(--nv-gold);
    }

    .spacer {
        flex: 1;
    }