/* ============================================================
   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;
}

: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 {
    font-family: 'Poppins',-apple-system,'Segoe UI',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);
    }
    /* ---- Bottom navigation (max 5 items, thumb-first) ---- */
    .bottomnav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        height: 96px;
        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;
    }