/* ==========================================================================
   Bvsoft design system
   --------------------------------------------------------------------------
   Shared by every end-user facing screen (login, profile, sports). Colours are
   taken from the Bvsoft logo: navy ink, forest green, olive, ochre, burgundy.

   Sections
     1. Tokens (light / dark)
     2. Legacy --md-sys-* aliases (pages that are not redesigned yet)
     3. Base & typography
     4. App shell (rail, top bar, tab bar)
     5. Components
     6. Page patterns (page header, sub-nav, grids)
     7. Utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
    color-scheme: light;

    --bv-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Brand */
    --bv-navy:     #1F2A4D;
    --bv-forest:   #1F6B3A;
    --bv-olive:    #7A7D35;
    --bv-ochre:    #C8962E;
    --bv-burgundy: #7A1E3A;

    /* Surfaces & text */
    --bv-bg:            #F6F4EE;
    --bv-surface:       #FFFFFF;
    --bv-surface-2:     #F1EEE6;
    --bv-surface-3:     #E7E2D6;
    --bv-border:        #E4DFD3;
    --bv-border-strong: #CDC6B5;
    --bv-text:          #1B2340;
    --bv-text-muted:    #575E75;
    --bv-text-subtle:   #7E8497;
    --bv-overlay:       rgba(17, 22, 40, .48);

    /* Roles */
    --bv-primary:        var(--bv-forest);
    --bv-primary-strong: #17532D;
    --bv-on-primary:     #FFFFFF;
    --bv-primary-soft:   #E1EFE5;
    --bv-on-primary-soft:#134325;

    --bv-accent:         var(--bv-ochre);
    --bv-accent-soft:    #FAEFD6;
    --bv-on-accent-soft: #6A4A0C;

    /* Good news (income, gains, weight loss…), independent of each app's primary */
    --bv-success:         var(--bv-forest);
    --bv-success-soft:    #E1EFE5;
    --bv-on-success-soft: #134325;

    --bv-danger:         #A3264A;
    --bv-danger-strong:  #7A1E3A;
    --bv-on-danger:      #FFFFFF;
    --bv-danger-soft:    #F8E3E9;
    --bv-on-danger-soft: #6E1030;

    --bv-info-soft:      #E3EAF7;
    --bv-on-info-soft:   #1F3E78;

    --bv-focus: 0 0 0 3px color-mix(in srgb, var(--bv-primary) 35%, transparent);

    /* Shape & depth */
    --bv-radius-xs:   6px;
    --bv-radius-sm:  10px;
    --bv-radius-md:  14px;
    --bv-radius-lg:  20px;
    --bv-radius-xl:  28px;
    --bv-radius-full: 999px;

    --bv-shadow-sm: 0 1px 2px rgba(27, 35, 64, .06), 0 1px 1px rgba(27, 35, 64, .04);
    --bv-shadow-md: 0 6px 18px -6px rgba(27, 35, 64, .16), 0 2px 4px rgba(27, 35, 64, .05);
    --bv-shadow-lg: 0 24px 48px -16px rgba(27, 35, 64, .28);

    /* Layout */
    --bv-rail-width: 256px;
    --bv-topbar-height: 64px;
    --bv-tabbar-height: 68px;
    --bv-page-max: 1180px;

    --bv-ease: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not(.bv-light-only) {
        color-scheme: dark;

        --bv-bg:            #0E1322;
        --bv-surface:       #151B2E;
        --bv-surface-2:     #1C2339;
        --bv-surface-3:     #252D47;
        --bv-border:        #29314D;
        --bv-border-strong: #3A4364;
        --bv-text:          #EDEFF6;
        --bv-text-muted:    #A9AFC4;
        --bv-text-subtle:   #7F869D;
        --bv-overlay:       rgba(3, 6, 14, .66);

        --bv-primary:        #5BC285;
        --bv-primary-strong: #82D7A3;
        --bv-on-primary:     #06210F;
        --bv-primary-soft:   #173424;
        --bv-on-primary-soft:#BFEBD0;

        --bv-accent:         #E2B65A;
        --bv-accent-soft:    #372B12;
        --bv-on-accent-soft: #F5DDA6;

        --bv-success:         #5BC285;
        --bv-success-soft:    #173424;
        --bv-on-success-soft: #BFEBD0;

        --bv-danger:         #F08AA5;
        --bv-danger-strong:  #F7AFC2;
        --bv-on-danger:      #3A0A19;
        --bv-danger-soft:    #3B1626;
        --bv-on-danger-soft: #FFC9D6;

        --bv-info-soft:      #1B2A4A;
        --bv-on-info-soft:   #BCD0F5;

        --bv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --bv-shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .6);
        --bv-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, .75);
    }
}

/* 1b. App themes ----------------------------------------------------------
   Sports keeps the default forest green. Finance is navy + gold: the logo's
   navy as primary and its ochre as the highlight for figures that matter. */

:root[data-app="finance"] {
    --bv-primary:        #1F3A6E;
    --bv-primary-strong: #172C54;
    --bv-on-primary:     #FFFFFF;
    --bv-primary-soft:   #E3E9F5;
    --bv-on-primary-soft:#15284D;
    --bv-bg:             #F5F6F8;
    --bv-surface-2:      #EEF1F5;
    --bv-surface-3:      #E2E7EF;
    --bv-border:         #DFE4EC;
    --bv-border-strong:  #C5CDDA;
}

@media (prefers-color-scheme: dark) {
    :root[data-app="finance"]:not(.bv-light-only) {
        --bv-primary:        #8FB0F0;
        --bv-primary-strong: #B3CBF7;
        --bv-on-primary:     #0A1730;
        --bv-primary-soft:   #1B2A4A;
        --bv-on-primary-soft:#C9D8F7;
        --bv-bg:             #0C111E;
        --bv-surface:        #131A2C;
        --bv-surface-2:      #1A2238;
        --bv-surface-3:      #232C46;
        --bv-border:         #283150;
        --bv-border-strong:  #394366;
    }
}

/* 2. Legacy aliases -------------------------------------------------------
   Pages that still ship their own CSS (pure admin screens) keep working on
   top of the new palette. Do not use these in new code. */

:root {
    --md-sys-color-primary: var(--bv-primary);
    --md-sys-color-on-primary: var(--bv-on-primary);
    --md-sys-color-primary-container: var(--bv-primary-soft);
    --md-sys-color-on-primary-container: var(--bv-on-primary-soft);
    --md-sys-color-secondary: var(--bv-text-muted);
    --md-sys-color-on-secondary: var(--bv-surface);
    --md-sys-color-secondary-container: var(--bv-primary-soft);
    --md-sys-color-on-secondary-container: var(--bv-on-primary-soft);
    --md-sys-color-tertiary: var(--bv-accent);
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: var(--bv-accent-soft);
    --md-sys-color-on-tertiary-container: var(--bv-on-accent-soft);
    --md-sys-color-error: var(--bv-danger);
    --md-sys-color-on-error: var(--bv-on-danger);
    --md-sys-color-error-container: var(--bv-danger-soft);
    --md-sys-color-on-error-container: var(--bv-on-danger-soft);
    --md-sys-color-background: var(--bv-bg);
    --md-sys-color-on-background: var(--bv-text);
    --md-sys-color-surface: var(--bv-surface);
    --md-sys-color-on-surface: var(--bv-text);
    --md-sys-color-surface-variant: var(--bv-surface-2);
    --md-sys-color-on-surface-variant: var(--bv-text-muted);
    --md-sys-color-outline: var(--bv-text-subtle);
    --md-sys-color-outline-variant: var(--bv-border);
    --md-sys-color-surface-container-lowest: var(--bv-surface);
    --md-sys-color-surface-container-low: var(--bv-surface);
    --md-sys-color-surface-container: var(--bv-surface-2);
    --md-sys-color-surface-container-high: var(--bv-surface-2);
    --md-sys-color-surface-container-highest: var(--bv-surface-3);
    --md-sys-color-inverse-surface: var(--bv-navy);
    --md-sys-color-inverse-on-surface: #F4F2EC;
    --md-sys-color-inverse-primary: #8FD3A8;

    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-small-size: 11px;

    --md-sys-elevation-1: var(--bv-shadow-sm);
    --md-sys-elevation-2: var(--bv-shadow-md);
    --md-sys-elevation-3: var(--bv-shadow-lg);

    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
}

/* 3. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--bv-font);
    font-size: 15px;
    line-height: 1.5;
    background: var(--bv-bg);
    color: var(--bv-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--bv-focus); border-radius: var(--bv-radius-xs); }

::selection { background: color-mix(in srgb, var(--bv-primary) 25%, transparent); }

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    flex-shrink: 0;
}
.material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.num { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 1000;
    background: var(--bv-navy); color: #fff; padding: 10px 16px;
    border-radius: var(--bv-radius-sm); text-decoration: none; font-weight: 600;
    transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* 4. App shell ------------------------------------------------------------- */

.shell { min-height: 100vh; min-height: 100dvh; }

.rail {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: var(--bv-rail-width);
    display: flex; flex-direction: column;
    background: var(--bv-surface);
    border-right: 1px solid var(--bv-border);
    padding: 18px 14px 14px;
}

.rail__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 20px; text-decoration: none;
}
.rail__brand-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.rail__brand-app {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bv-primary); background: var(--bv-primary-soft);
    padding: 2px 8px; border-radius: var(--bv-radius-full);
}

.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }

.rail__scroll { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; }

.rail__section {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bv-text-subtle); padding: 18px 12px 6px;
}

.rail__list { list-style: none; display: grid; gap: 2px; }

.rail__link {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px;
    border-radius: var(--bv-radius-sm);
    text-decoration: none; font-weight: 600; font-size: 14.5px;
    color: var(--bv-text-muted);
    transition: background-color .15s, color .15s;
}
.rail__link:hover { background: var(--bv-surface-2); color: var(--bv-text); }
.rail__link[aria-current="page"] {
    background: var(--bv-primary-soft); color: var(--bv-on-primary-soft);
}
.rail__link[aria-current="page"] .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

.rail__link--sub { min-height: 38px; padding-left: 46px; font-size: 14px; font-weight: 500; }
.rail__link--sub::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .35; margin-left: -20px; margin-right: 8px;
}
.rail__link--sub[aria-current="page"]::before { opacity: 1; }

.rail__footer { border-top: 1px solid var(--bv-border); padding-top: 12px; margin-top: 8px; }

.shell__main {
    margin-left: var(--bv-rail-width);
    min-width: 0;
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}

.topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--bv-topbar-height);
    display: flex; align-items: center; gap: 12px;
    padding: 0 max(24px, calc((100% - var(--bv-page-max)) / 2));
    background: color-mix(in srgb, var(--bv-bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.topbar.is-scrolled { border-bottom-color: var(--bv-border); }

.topbar__brand { display: none; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; }
.topbar__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--bv-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { display: flex; align-items: center; gap: 6px; }

.page {
    flex: 1;
    width: 100%; max-width: calc(var(--bv-page-max) + 48px);
    margin: 0 auto;
    padding: 8px 24px 48px;
}

.site-footer {
    width: 100%; max-width: calc(var(--bv-page-max) + 48px); margin: 0 auto;
    padding: 20px 24px 32px;
    display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
    font-size: 13px; color: var(--bv-text-subtle);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--bv-text); text-decoration: underline; }

.tabbar { display: none; }

@media (max-width: 899px) {
    .rail { display: none; }
    .shell__main { margin-left: 0; }
    .topbar { padding: 0 12px 0 16px; }
    .topbar__brand { display: inline-flex; }
    .topbar__title { font-size: 16px; color: var(--bv-text); font-weight: 700; }
    .page { padding: 4px 16px calc(var(--bv-tabbar-height) + 88px); }
    .site-footer { padding-bottom: calc(var(--bv-tabbar-height) + 24px); }

    .tabbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        height: calc(var(--bv-tabbar-height) + env(safe-area-inset-bottom));
        padding: 6px 6px env(safe-area-inset-bottom);
        background: color-mix(in srgb, var(--bv-surface) 92%, transparent);
        backdrop-filter: saturate(160%) blur(16px);
        -webkit-backdrop-filter: saturate(160%) blur(16px);
        border-top: 1px solid var(--bv-border);
    }
    .tabbar__link {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        text-decoration: none; font-size: 11.5px; font-weight: 600;
        color: var(--bv-text-subtle); border-radius: var(--bv-radius-md);
    }
    .tabbar__icon {
        display: grid; place-items: center; width: 56px; height: 30px;
        border-radius: var(--bv-radius-full); transition: background-color .2s;
    }
    .tabbar__link[aria-current="page"] { color: var(--bv-text); }
    .tabbar__link[aria-current="page"] .tabbar__icon { background: var(--bv-primary-soft); color: var(--bv-on-primary-soft); }
    .tabbar__link[aria-current="page"] .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
}

/* 5. Components ------------------------------------------------------------ */

/* Buttons */
.btn {
    --btn-bg: var(--bv-surface);
    --btn-fg: var(--bv-text);
    --btn-border: var(--bv-border-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 18px;
    border-radius: var(--bv-radius-full);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: 14.5px; font-weight: 700; letter-spacing: -.005em;
    text-decoration: none; white-space: nowrap;
    transition: background-color .15s, border-color .15s, transform .1s, box-shadow .15s, filter .15s;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: scale(.98); }
.btn .material-symbols-rounded { font-size: 20px; margin-left: -4px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--primary { --btn-bg: var(--bv-primary); --btn-fg: var(--bv-on-primary); --btn-border: transparent; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--bv-primary) 70%, transparent); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--tonal { --btn-bg: var(--bv-primary-soft); --btn-fg: var(--bv-on-primary-soft); --btn-border: transparent; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--bv-text-muted); --btn-border: transparent; }
.btn--ghost:hover { --btn-bg: var(--bv-surface-2); --btn-fg: var(--bv-text); filter: none; }
.btn--danger { --btn-bg: var(--bv-danger); --btn-fg: var(--bv-on-danger); --btn-border: transparent; }
.btn--danger-soft { --btn-bg: var(--bv-danger-soft); --btn-fg: var(--bv-on-danger-soft); --btn-border: transparent; }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn--lg { min-height: 50px; padding: 0 24px; font-size: 15.5px; }

.icon-btn {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--bv-radius-full);
    border: 0; background: transparent; color: var(--bv-text-muted);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--bv-surface-2); color: var(--bv-text); }
.icon-btn--sm { width: 34px; height: 34px; }
.icon-btn--sm .material-symbols-rounded { font-size: 19px; }
.icon-btn--danger:hover { background: var(--bv-danger-soft); color: var(--bv-on-danger-soft); }

.avatar {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--bv-radius-full);
    background: linear-gradient(135deg, var(--bv-forest), var(--bv-navy));
    color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em;
    border: 2px solid var(--bv-surface);
    box-shadow: 0 0 0 1px var(--bv-border);
}
.avatar--lg { width: 72px; height: 72px; font-size: 26px; }
button.avatar { cursor: pointer; }

/* Menus (popovers) */
.menu { position: relative; }
.menu__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    min-width: 240px; padding: 6px;
    background: var(--bv-surface); color: var(--bv-text);
    border: 1px solid var(--bv-border); border-radius: var(--bv-radius-md);
    box-shadow: var(--bv-shadow-lg);
    transform-origin: top right;
    animation: bv-pop .14s var(--bv-ease);
}
.menu__panel[hidden] { display: none; }
.menu__header { padding: 10px 12px 12px; border-bottom: 1px solid var(--bv-border); margin-bottom: 6px; }
.menu__name { font-weight: 700; }
.menu__meta { font-size: 13px; color: var(--bv-text-muted); overflow: hidden; text-overflow: ellipsis; }
.menu__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bv-text-subtle); padding: 10px 12px 4px; }
.menu__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; background: none; text-align: left;
    border-radius: var(--bv-radius-sm); text-decoration: none; font-size: 14.5px; font-weight: 500;
    font-family: inherit; color: inherit; cursor: pointer; /* also used on <button> (logout) */
}
.menu__item:hover { background: var(--bv-surface-2); }
.menu__item .material-symbols-rounded { color: var(--bv-text-muted); font-size: 20px; }
.menu__item[aria-current="true"] { color: var(--bv-primary); font-weight: 700; }
.menu__item[aria-current="true"] .material-symbols-rounded { color: var(--bv-primary); }
.menu__item--danger { color: var(--bv-danger); }
.menu__item--danger .material-symbols-rounded { color: var(--bv-danger); }
.menu__divider { height: 1px; background: var(--bv-border); margin: 6px 4px; }

@keyframes bv-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* Cards */
.card {
    background: var(--bv-surface);
    border: 1px solid var(--bv-border);
    border-radius: var(--bv-radius-lg);
    box-shadow: var(--bv-shadow-sm);
    min-width: 0;
}
.card__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px 0;
}
.card__title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card__title .material-symbols-rounded { font-size: 20px; color: var(--bv-primary); }
.card__link {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 13.5px; font-weight: 700; color: var(--bv-primary); text-decoration: none;
    background: none; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: var(--bv-radius-xs);
}
.card__link:hover { text-decoration: underline; }
.card__link .material-symbols-rounded { font-size: 18px; }
.card__body { padding: 16px 20px 20px; }
.card__body--flush { padding: 8px 0 0; }
.card--pad { padding: 20px; }

/* Stat tiles */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__label { font-size: 13px; font-weight: 600; color: var(--bv-text-muted); }
.stat__value { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat__unit { font-size: 16px; font-weight: 600; color: var(--bv-text-muted); margin-left: 2px; letter-spacing: 0; }
.stat__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--bv-text-muted); }

.icon-bubble {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--bv-radius-md);
    background: var(--bv-primary-soft); color: var(--bv-on-primary-soft);
}
.icon-bubble--accent { background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); }
.icon-bubble--info { background: var(--bv-info-soft); color: var(--bv-on-info-soft); }
.icon-bubble--danger { background: var(--bv-danger-soft); color: var(--bv-on-danger-soft); }
.icon-bubble--sm { width: 36px; height: 36px; border-radius: var(--bv-radius-sm); }
.icon-bubble--sm .material-symbols-rounded { font-size: 20px; }

/* Chips & badges */
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 26px; padding: 0 10px;
    border-radius: var(--bv-radius-full);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--bv-surface-2); color: var(--bv-text-muted);
    text-decoration: none;
}
.chip .material-symbols-rounded { font-size: 15px; margin-left: -2px; }
.chip--positive { background: var(--bv-success-soft); color: var(--bv-on-success-soft); }
.chip--negative { background: var(--bv-danger-soft); color: var(--bv-on-danger-soft); }
.chip--accent   { background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); }
.chip--info     { background: var(--bv-info-soft); color: var(--bv-on-info-soft); }
.chip--neutral  { background: var(--bv-surface-2); color: var(--bv-text-muted); }
.chip--outline  { background: transparent; box-shadow: inset 0 0 0 1px var(--bv-border-strong); }
/* Chip whose dynamic text (e.g. a recipe name) wraps inside its container instead of overflowing it */
.chip--wrap {
    height: auto; min-height: 26px; padding: 4px 10px; max-width: 100%;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
    border-radius: var(--bv-radius-md);
}
a.chip:hover { filter: brightness(.96); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--pending, .status--planned { color: var(--bv-accent); }
.status--active { color: var(--bv-primary); }
.status--completed { color: var(--bv-primary); }
.status--skipped, .status--cancelled { color: var(--bv-text-subtle); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 13.5px; font-weight: 700; color: var(--bv-text); display: flex; align-items: center; gap: 6px; }
.field__label .material-symbols-rounded { font-size: 17px; color: var(--bv-text-muted); }
.field__optional { font-weight: 500; color: var(--bv-text-subtle); }
.field__hint { font-size: 12.5px; color: var(--bv-text-subtle); }
.field__error { font-size: 12.5px; color: var(--bv-danger); font-weight: 600; }

/* :where() keeps these at class-level specificity so components (e.g. .recipe-picker__input) can override them. */
.input, .field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    width: 100%; min-height: 46px;
    padding: 10px 14px;
    background: var(--bv-surface);
    border: 1px solid var(--bv-border-strong);
    border-radius: var(--bv-radius-sm);
    color: var(--bv-text);
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field input[type="number"]::-webkit-inner-spin-button, .field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field :where(textarea) { min-height: 96px; resize: vertical; line-height: 1.5; }
.field :where(select) {
    appearance: none; -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237E8497' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--bv-text-subtle); }
.input:hover, .field :where(input, select, textarea):hover { border-color: var(--bv-text-subtle); }
.input:focus, .field :where(input, select, textarea):focus {
    outline: none; border-color: var(--bv-primary); box-shadow: var(--bv-focus);
}
.field :where(input, select):disabled { background: var(--bv-surface-2); color: var(--bv-text-muted); cursor: not-allowed; }
.field input[aria-invalid="true"], .field.is-invalid input { border-color: var(--bv-danger); }

.input-group { position: relative; }
.input-group > input { padding-right: 48px !important; }
.input-group__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.input-group__suffix {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 14px; font-weight: 600; color: var(--bv-text-subtle); pointer-events: none;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > .field--full { grid-column: 1 / -1; }
.form-stack { display: grid; gap: 16px; }
.form-section { display: grid; gap: 14px; }
.form-section + .form-section { border-top: 1px solid var(--bv-border); padding-top: 18px; }
.form-section__title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bv-text-subtle); display: flex; align-items: center; gap: 6px; }
.form-section__title .material-symbols-rounded { font-size: 17px; }

@media (max-width: 599px) {
    .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Disclosure (native <details>) */
.disclosure { border: 1px solid var(--bv-border); border-radius: var(--bv-radius-md); background: var(--bv-surface); }
.disclosure > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; font-weight: 700; font-size: 14.5px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
    content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 22px;
    margin-left: auto; color: var(--bv-text-muted); transition: transform .2s var(--bv-ease);
}
.disclosure[open] > summary::after { transform: rotate(180deg); }
.disclosure > summary .material-symbols-rounded { color: var(--bv-primary); font-size: 20px; }
.disclosure__body { padding: 4px 16px 18px; display: grid; gap: 18px; }

/* Alerts (inline) & toasts */
.alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border-radius: var(--bv-radius-md);
    font-size: 14px; font-weight: 500;
    background: var(--bv-info-soft); color: var(--bv-on-info-soft);
}
.alert .material-symbols-rounded { font-size: 20px; margin-top: 1px; }
.alert--success { background: var(--bv-success-soft); color: var(--bv-on-success-soft); }
.alert--error   { background: var(--bv-danger-soft); color: var(--bv-on-danger-soft); }
.alert--warning { background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); }
.alert__text { flex: 1; min-width: 0; }
.alert__close { margin: -6px -6px -6px 0; color: inherit; }
.alert__close:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }

.toasts {
    position: fixed; z-index: 90;
    top: calc(var(--bv-topbar-height) + 8px); right: 20px;
    width: min(420px, calc(100vw - 32px));
    display: grid; gap: 10px;
    pointer-events: none;
}
.toasts .alert { pointer-events: auto; box-shadow: var(--bv-shadow-lg); border: 1px solid color-mix(in srgb, currentColor 14%, transparent); animation: bv-toast-in .28s var(--bv-ease); }
.toasts .alert.is-leaving { animation: bv-toast-out .22s var(--bv-ease) forwards; }
@keyframes bv-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes bv-toast-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }

@media (max-width: 899px) {
    .toasts { top: auto; right: 16px; left: 16px; width: auto; bottom: calc(var(--bv-tabbar-height) + 16px + env(safe-area-inset-bottom)); }
}

/* Dialogs & bottom sheets (native <dialog>) */
.dialog {
    margin: auto; padding: 0; border: 0;
    width: min(560px, calc(100vw - 32px));
    max-height: min(88vh, 860px);
    background: var(--bv-surface); color: var(--bv-text);
    border-radius: var(--bv-radius-xl);
    box-shadow: var(--bv-shadow-lg);
    overflow: hidden;
}
.dialog--wide { width: min(760px, calc(100vw - 32px)); }
.dialog[open] { display: flex; flex-direction: column; animation: bv-dialog-in .22s var(--bv-ease); }
.dialog::backdrop { background: var(--bv-overlay); backdrop-filter: blur(3px); animation: bv-fade .2s; }
.dialog > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dialog__header { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 8px; }
.dialog__title { flex: 1; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.dialog__subtitle { font-size: 14px; color: var(--bv-text-muted); margin-top: 4px; font-weight: 500; letter-spacing: 0; }
.dialog__body { padding: 12px 24px 20px; overflow-y: auto; flex: 1; min-height: 0; display: grid; gap: 16px; align-content: start; }
.dialog__footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px 20px; border-top: 1px solid var(--bv-border);
    background: var(--bv-surface);
}
.dialog__grabber { display: none; }

@keyframes bv-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes bv-fade { from { opacity: 0; } }

@media (max-width: 599px) {
    .dialog, .dialog--wide {
        width: 100%; max-width: 100%;
        margin: auto 0 0; max-height: 92dvh;
        border-radius: var(--bv-radius-xl) var(--bv-radius-xl) 0 0;
    }
    .dialog[open] { animation: bv-sheet-in .28s var(--bv-ease); }
    .dialog__grabber { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--bv-border-strong); margin: 10px auto 0; }
    .dialog__header { padding-top: 14px; }
    .dialog__footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .dialog__footer .btn { flex: 1; }
}
@keyframes bv-sheet-in { from { transform: translateY(100%); } }

/* Details (definition lists inside view dialogs) */
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.details__item { background: var(--bv-surface-2); border-radius: var(--bv-radius-md); padding: 12px 14px; min-width: 0; }
.details__item--full { grid-column: 1 / -1; }
.details__label { font-size: 12px; font-weight: 700; color: var(--bv-text-subtle); text-transform: uppercase; letter-spacing: .06em; }
.details__value { font-size: 15px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }

/* Lists of entries (cards on mobile, rows on desktop) */
.entries { list-style: none; display: grid; }
.entry {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--bv-border);
    min-width: 0;
}
.entries > .entry:first-child { border-top: 0; }
.entry__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.entry__title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; color: var(--bv-text-muted); }
.entry__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.entry__meta .material-symbols-rounded { font-size: 16px; }
.entry__side { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.entry__value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; }
.entry__value small { font-size: 13px; font-weight: 600; color: var(--bv-text-muted); }

.date-tile {
    display: grid; place-items: center; align-content: center;
    width: 50px; height: 54px; flex-shrink: 0;
    border-radius: var(--bv-radius-md);
    background: var(--bv-surface-2);
    line-height: 1.05;
}
.date-tile__day { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.date-tile__month { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bv-text-muted); }
.date-tile--today { background: var(--bv-primary); color: var(--bv-on-primary); }
.date-tile--today .date-tile__month { color: inherit; opacity: .85; }

.list-group__label {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--bv-text-subtle); padding: 18px 20px 8px;
    border-top: 1px solid var(--bv-border);
}
.card > .list-group__label:first-child, .card__body--flush > .list-group__label:first-child { border-top: 0; padding-top: 6px; }

@media (max-width: 599px) {
    .entry { padding: 14px 16px; align-items: flex-start; }
    .entry__side .icon-btn { width: 36px; height: 36px; }
}

/* Data table (dense, wide data such as body composition history) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bv-text-subtle); padding: 10px 16px; white-space: nowrap;
    border-bottom: 1px solid var(--bv-border);
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--bv-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--bv-surface-2) 60%, transparent); }
.table .is-num { text-align: right; }

/* Empty states */
.empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 44px 24px;
}
.empty-state__art {
    position: relative; width: 84px; height: 84px; margin-bottom: 10px;
    display: grid; place-items: center;
    border-radius: 28px;
    background: var(--bv-primary-soft); color: var(--bv-on-primary-soft);
    transform: rotate(-6deg);
}
.empty-state__art::after {
    content: ''; position: absolute; inset: -8px -10px auto auto; width: 22px; height: 22px;
    border-radius: 8px; background: var(--bv-accent-soft); transform: rotate(18deg);
}
.empty-state__art .material-symbols-rounded { font-size: 40px; transform: rotate(6deg); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40; }
.empty-state__label { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.empty-state__sub { font-size: 14.5px; color: var(--bv-text-muted); max-width: 380px; }
.empty-state .btn { margin-top: 14px; }
.empty-state--compact { padding: 24px 16px; }
.empty-state--compact .empty-state__art { width: 56px; height: 56px; border-radius: 18px; }
.empty-state--compact .empty-state__art .material-symbols-rounded { font-size: 28px; }
.empty-state--compact .empty-state__art::after { width: 14px; height: 14px; border-radius: 5px; inset: -5px -6px auto auto; }

/* Pagination */
.pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--bv-border);
    font-size: 14px; color: var(--bv-text-muted);
}
.pagination__pages { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Progress ring (countdown) */
.ring { --value: 0; --size: 88px; --track: var(--bv-surface-2); --fill: var(--bv-accent);
    width: var(--size); height: var(--size); flex-shrink: 0; border-radius: 50%;
    background: conic-gradient(var(--fill) calc(var(--value) * 1%), var(--track) 0);
    display: grid; place-items: center;
}
.ring::before { content: ''; grid-area: 1 / 1; width: calc(var(--size) - 16px); height: calc(var(--size) - 16px); border-radius: 50%; background: var(--bv-surface); }
.ring__label { grid-area: 1 / 1; z-index: 1; text-align: center; line-height: 1; }
.ring__value { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ring__unit { display: block; font-size: 11px; font-weight: 700; color: var(--bv-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

/* Segmented control (sub-navigation inside a section) */
.segmented {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--bv-surface-2); border-radius: var(--bv-radius-full);
    max-width: 100%; overflow-x: auto;
}
.segmented__item {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 16px; border-radius: var(--bv-radius-full);
    font-size: 14px; font-weight: 700; color: var(--bv-text-muted); text-decoration: none; white-space: nowrap;
}
.segmented__item .material-symbols-rounded { font-size: 18px; }
.segmented__item:hover { color: var(--bv-text); }
.segmented__item[aria-current="page"] { background: var(--bv-surface); color: var(--bv-text); box-shadow: var(--bv-shadow-sm); }

/* Rich text rendered from Trix */
.rich-text { font-size: 14.5px; line-height: 1.6; color: var(--bv-text); overflow-wrap: anywhere; }
.rich-text ul, .rich-text ol { padding-left: 1.3em; }
.rich-text a { color: var(--bv-primary); }

/* 6. Page patterns --------------------------------------------------------- */

.page-header {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
    gap: 16px; padding: 20px 0 22px;
}
.page-header__eyebrow { font-size: 13px; font-weight: 700; color: var(--bv-primary); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.page-header__title { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.page-header__sub { font-size: 15px; color: var(--bv-text-muted); margin-top: 6px; max-width: 620px; }
.page-header__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page-header + .segmented { margin: -6px 0 20px; }

/* On phones the page's main "create" action floats above the tab bar. */
@media (max-width: 899px) {
    .page-header { padding: 12px 0 18px; }
    .page-header__actions [data-fab] {
        position: fixed; z-index: 44;
        right: 16px; bottom: calc(var(--bv-tabbar-height) + 16px + env(safe-area-inset-bottom));
        min-height: 54px; padding: 0 22px 0 18px;
        border-radius: 18px;
        box-shadow: var(--bv-shadow-lg);
    }
}

.stack { display: grid; gap: 20px; }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }

@media (max-width: 1099px) {
    .grid--dash > * { grid-column: span 6; }
    .grid--dash > .span-12, .grid--dash > .span-8, .grid--dash > .span-7 { grid-column: 1 / -1; }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
    .grid--dash > *, .grid--2, .grid--3 { grid-column: 1 / -1; }
    .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
    .grid, .stack { gap: 14px; }
}

/* Standalone pages (login, no-app landing) */
.auth {
    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--bv-surface);
}
.auth__brand {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px 56px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(200, 150, 46, .28), transparent 55%),
        radial-gradient(90% 80% at 0% 100%, rgba(31, 107, 58, .55), transparent 60%),
        var(--bv-navy);
    color: #F4F2EC;
    isolation: isolate;
}
.auth__stripes { position: absolute; right: -80px; bottom: -40px; width: 520px; height: 520px; z-index: -1; opacity: .9; }
.auth__logo { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.auth__logo .brand-mark { width: 40px; height: 40px; }
.auth__pitch { max-width: 460px; }
.auth__headline { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.auth__headline em { font-style: normal; color: #F0C66C; }
.auth__lead { font-size: 17px; line-height: 1.55; opacity: .86; margin-top: 18px; }
.auth__features { list-style: none; display: grid; gap: 12px; margin-top: 32px; }
.auth__features li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.auth__features .material-symbols-rounded {
    width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px;
    border-radius: 12px; background: rgba(255, 255, 255, .1); color: #F0C66C;
}
.auth__legal { font-size: 13px; opacity: .6; }

.auth__panel { display: grid; place-items: center; padding: 48px 24px; background: var(--bv-bg); }
.auth__form { width: 100%; max-width: 400px; display: grid; gap: 18px; }
.auth__title { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.auth__subtitle { font-size: 15.5px; color: var(--bv-text-muted); margin-top: -10px; }
.auth__footer { font-size: 14.5px; color: var(--bv-text-muted); text-align: center; margin-top: 6px; }
.auth__footer a { color: var(--bv-primary); font-weight: 700; text-decoration: none; }
.auth__footer a:hover { text-decoration: underline; }
.auth__mobile-logo { display: none; }

@media (max-width: 899px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__brand { display: none; }
    .auth__panel { align-items: start; padding-top: 12vh; }
    .auth__mobile-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; margin-bottom: 8px; }
}

.centered-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.centered-page__card { width: 100%; max-width: 480px; text-align: center; }

/* Onboarding checklist */
.checklist { list-style: none; display: grid; gap: 10px; }
.checklist__item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--bv-radius-md);
    background: var(--bv-surface-2); text-decoration: none;
    transition: transform .15s var(--bv-ease), background-color .15s;
}
a.checklist__item:hover { transform: translateX(3px); background: var(--bv-surface-3); }
.checklist__check {
    display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%; border: 2px dashed var(--bv-border-strong); color: transparent;
}
.checklist__item--done .checklist__check { border: 0; background: var(--bv-primary); color: var(--bv-on-primary); }
.checklist__item--done .checklist__title { text-decoration: line-through; color: var(--bv-text-muted); }
.checklist__check .material-symbols-rounded { font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20; }
.checklist__text { flex: 1; min-width: 0; }
.checklist__title { font-weight: 700; }
.checklist__sub { font-size: 13.5px; color: var(--bv-text-muted); }
.checklist__item .material-symbols-rounded.chev { color: var(--bv-text-subtle); }

.progress { height: 8px; border-radius: 8px; background: var(--bv-surface-2); overflow: hidden; }
.progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bv-forest), var(--bv-olive), var(--bv-ochre)); transition: width .4s var(--bv-ease); }

/* 7. Utilities ------------------------------------------------------------- */

.muted { color: var(--bv-text-muted); }
.subtle { color: var(--bv-text-subtle); }
.text-sm { font-size: 13.5px; }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.hide-mobile { }
@media (max-width: 599px) { .hide-mobile { display: none !important; } }
@media (min-width: 600px) { .only-mobile { display: none !important; } }
@media (min-width: 900px) { .only-compact { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 8. Sports patterns ------------------------------------------------------- */

.today-hero .page-header__title { font-size: clamp(28px, 4vw, 40px); }
.today-hero strong { color: var(--bv-text); font-weight: 700; }

.onboarding[hidden] { display: none; }
.onboarding { background: linear-gradient(135deg, var(--bv-surface) 60%, color-mix(in srgb, var(--bv-accent-soft) 70%, var(--bv-surface))); }

.sparkline { width: 100%; height: 64px; margin-top: 16px; color: var(--bv-primary); overflow: visible; }

.mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mini-metrics > div { background: var(--bv-surface-2); border-radius: var(--bv-radius-sm); padding: 8px 12px; }
.mini-metrics__label { display: block; font-size: 12px; font-weight: 700; color: var(--bv-text-subtle); }
.mini-metrics__value { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

.competition-card__name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--bv-text); }
.competition-card .ring { --size: 104px; }
.competition-card .ring__value { font-size: 30px; }

.chart { min-height: 300px; margin: 0 -8px; }
.chart-placeholder { display: grid; place-items: center; min-height: 220px; }

.meal-timeline { list-style: none; display: grid; position: relative; }
.meal-timeline::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--bv-border); }
.meal-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.meal-row__icon {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; background: var(--bv-primary-soft); color: var(--bv-on-primary-soft);
    box-shadow: 0 0 0 4px var(--bv-surface);
}
.meal-row__icon .material-symbols-rounded { font-size: 20px; }
.meal-row--empty .meal-row__icon { background: var(--bv-surface-2); color: var(--bv-text-subtle); }
.meal-row__content { flex: 1; min-width: 0; display: grid; }
.meal-row__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bv-text-subtle); }
.meal-row__value { font-weight: 600; overflow-wrap: anywhere; }
.meal-row--empty .meal-row__value { color: var(--bv-text-subtle); font-weight: 500; font-style: italic; }

.training-list { display: grid; gap: 12px; }
.training-item { display: grid; gap: 10px; padding: 14px; border-radius: var(--bv-radius-md); background: var(--bv-surface-2); }
.training-item__type { font-weight: 800; }
.training-item__description { font-size: 14px; color: var(--bv-text-muted); max-height: 7.5em; overflow: hidden; }

.recipe-ingredients { list-style: none; display: grid; gap: 6px; }
.recipe-ingredients li { display: flex; gap: 12px; padding: 8px 12px; border-radius: var(--bv-radius-sm); background: var(--bv-surface-2); }
.recipe-ingredients__qty { min-width: 88px; font-weight: 700; color: var(--bv-primary); font-variant-numeric: tabular-nums; }
.recipe-steps { list-style: none; counter-reset: step; display: grid; gap: 14px; }
.recipe-steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.recipe-steps > li::before {
    content: counter(step); position: absolute; left: 0; top: -2px;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); font-weight: 800; font-size: 14px;
}

.entry--stack { flex-wrap: wrap; }
.entry__details { flex-basis: 100%; min-width: 0; padding: 4px 0 4px 64px; }
.list-group__label + .entry { border-top: 0; }
.is-rotated .material-symbols-rounded { transform: rotate(180deg); }
.icon-btn .material-symbols-rounded { transition: transform .2s var(--bv-ease); }
.entry__side form { display: contents; }
@media (max-width: 599px) { .entry__details { padding-left: 0; } }
.entry__details .details { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.detail-meal-card__recipe-link { margin-top: 8px; }

.section-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bv-text-subtle); margin: 4px 0 12px; }

.check { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 6px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--bv-primary); flex-shrink: 0; }
.form-grid > .check.field--full { grid-column: 1 / -1; }

.date-tile--lg { width: 60px; height: 64px; }
.date-tile--lg .date-tile__day { font-size: 24px; }

.race-card { display: grid; gap: 14px; padding: 18px; position: relative; overflow: hidden; }
.race-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--bv-forest), var(--bv-olive), var(--bv-ochre)); }
.race-card__top { display: flex; gap: 14px; align-items: flex-start; }
.race-card__name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.race-card__top .muted .material-symbols-rounded { font-size: 16px; }
.race-card__countdown {
    display: grid; justify-items: center; flex-shrink: 0; min-width: 64px; padding: 6px 10px;
    border-radius: var(--bv-radius-md); background: var(--bv-accent-soft); color: var(--bv-on-accent-soft);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1;
}
.race-card__countdown .num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.race-card__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--bv-border); padding-top: 12px; }
.race-card__footer form { display: contents; }

.plan-card { display: grid; gap: 14px; padding: 18px; align-content: start; }
.plan-card__name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.plan-card__notes { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.plan-card .race-card__footer form { display: contents; }

/* Week planner */
.week-grid { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week-grid__day {
    display: flex; flex-direction: column; gap: 8px; min-height: 150px; min-width: 0;
    padding: 10px; border-radius: var(--bv-radius-md); background: var(--bv-surface-2);
}
.week-grid__day--today { background: var(--bv-primary-soft); box-shadow: inset 0 0 0 2px var(--bv-primary); }
.week-grid__head { display: flex; align-items: baseline; gap: 6px; }
.week-grid__name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bv-text-subtle); }
.week-grid__number { font-size: 20px; font-weight: 800; }
.week-grid__day--today .week-grid__name, .week-grid__day--today .week-grid__number { color: var(--bv-on-primary-soft); }
.week-grid__add { margin-left: auto; opacity: 0; transition: opacity .15s; }
.week-grid__day:hover .week-grid__add, .week-grid__add:focus-visible { opacity: 1; }
.week-grid__items { display: grid; gap: 6px; }
.week-grid__empty-day { font-size: 12.5px; color: var(--bv-text-subtle); font-style: italic; }

.training-chip {
    display: grid; gap: 2px; padding: 8px 10px; text-decoration: none; min-width: 0;
    border-radius: var(--bv-radius-sm); background: var(--bv-surface);
    border-left: 3px solid var(--bv-accent); box-shadow: var(--bv-shadow-sm);
    transition: transform .15s var(--bv-ease), box-shadow .15s;
}
.training-chip:hover { transform: translateY(-1px); box-shadow: var(--bv-shadow-md); }
.training-chip--completed { border-left-color: var(--bv-primary); }
.training-chip--skipped { border-left-color: var(--bv-text-subtle); opacity: .75; }
.training-chip__label { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-chip__sub { font-size: 12px; color: var(--bv-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-chip__status .status { font-size: 11.5px; }

@media (max-width: 899px) {
    .week-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .week-grid__day { flex-direction: row; align-items: flex-start; min-height: 0; gap: 12px; }
    .week-grid__head { flex-direction: column; align-items: center; gap: 0; width: 40px; flex-shrink: 0; }
    .week-grid__add { order: 3; opacity: 1; margin: 2px 0 0; }
    .week-grid__items { flex: 1; }
    .week-grid__empty-day { padding-top: 8px; }
}

/* Rich text editor (Trix) */
trix-toolbar .trix-button-row { flex-wrap: wrap; gap: 4px; }
trix-toolbar .trix-button-group { border-color: var(--bv-border-strong); border-radius: var(--bv-radius-sm); margin-bottom: 6px; }
trix-toolbar .trix-button { border-color: var(--bv-border); }
trix-toolbar .trix-button--icon-attach, trix-toolbar .trix-button-group--file-tools { display: none; }
trix-editor.rich-editor {
    min-height: 110px; padding: 10px 14px; border: 1px solid var(--bv-border-strong);
    border-radius: var(--bv-radius-sm); background: var(--bv-surface); color: var(--bv-text);
}
trix-editor.rich-editor:focus { outline: none; border-color: var(--bv-primary); box-shadow: var(--bv-focus); }
@media (prefers-color-scheme: dark) {
    :root:not(.bv-light-only) trix-toolbar .trix-button { background: var(--bv-surface-3); filter: invert(.9) hue-rotate(180deg); }
}

.form-section--dimmed { opacity: .6; }
.form-section--dimmed:focus-within { opacity: 1; }
.dialog__header:has(+ .dialog__body[hidden]) { padding-bottom: 18px; }

/* Weekly menu */
.week-grid--meals .week-grid__day { min-height: 220px; }
.week-grid__day--empty { background: transparent; border: 1.5px dashed var(--bv-border-strong); }
.week-grid__day--empty.week-grid__day--today { border: 2px dashed var(--bv-primary); box-shadow: none; background: color-mix(in srgb, var(--bv-primary-soft) 50%, transparent); }
.week-grid__plan {
    flex: 1; display: grid; place-items: center; align-content: center; gap: 4px;
    border: 0; background: none; border-radius: var(--bv-radius-sm);
    color: var(--bv-text-subtle); font-size: 13px; font-weight: 700;
}
.week-grid__plan:hover { background: var(--bv-surface-2); color: var(--bv-primary); }
.meal-chip { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.35; min-width: 0; }
.meal-chip__icon { font-size: 16px !important; color: var(--bv-primary); margin-top: 1px; }
.meal-chip--empty { color: var(--bv-text-subtle); }
.meal-chip--empty .meal-chip__icon { color: var(--bv-text-subtle); opacity: .6; }
.meal-chip__value { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.meal-chip__recipe { color: var(--bv-accent); display: inline-grid; }
.meal-chip__recipe .material-symbols-rounded { font-size: 16px; }

@media (max-width: 899px) {
    .week-grid--meals .week-grid__day { min-height: 0; }
    .week-grid__plan { justify-content: start; grid-auto-flow: column; padding: 8px 0; }
}

.meal-dots { display: inline-flex; gap: 3px; }
.meal-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bv-surface-2); color: var(--bv-text-subtle); }
.meal-dot .material-symbols-rounded { font-size: 13px !important; }
.meal-dot--filled { background: var(--bv-primary-soft); color: var(--bv-on-primary-soft); }

.meal-field { display: flex; gap: 14px; align-items: flex-start; }
.meal-field .meal-row__icon { margin-top: 26px; box-shadow: none; }
@media (max-width: 599px) { .meal-field .meal-row__icon { display: none; } }

/* Recipe type-ahead */
.recipe-picker { position: relative; }
.recipe-picker__search-wrapper { position: relative; display: flex; align-items: center; }
.recipe-picker__icon { position: absolute; left: 12px; font-size: 18px !important; color: var(--bv-text-subtle); pointer-events: none; }
.recipe-picker__input {
    min-height: 38px; padding: 6px 40px 6px 38px; font-size: 14px;
    background: var(--bv-surface-2); border-color: transparent; border-radius: var(--bv-radius-full);
}
.recipe-picker--linked .recipe-picker__input { background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); font-weight: 700; }
.recipe-picker--linked .recipe-picker__icon { color: var(--bv-on-accent-soft); }
.recipe-picker__clear { position: absolute; right: 2px; }
.recipe-picker__results {
    display: none; position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
    list-style: none; padding: 6px; max-height: 240px; overflow-y: auto;
    background: var(--bv-surface); border: 1px solid var(--bv-border); border-radius: var(--bv-radius-md); box-shadow: var(--bv-shadow-lg);
}
.recipe-picker__results.active { display: block; }
.recipe-picker__result { padding: 9px 12px; border-radius: var(--bv-radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; }
.recipe-picker__result:hover { background: var(--bv-surface-2); }
.recipe-picker__no-results { padding: 9px 12px; font-size: 14px; color: var(--bv-text-subtle); }

.meal-field textarea { min-height: 60px; }

/* Recipes */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filters__search { position: relative; flex: 1 1 260px; }
.filters__search .material-symbols-rounded { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bv-text-subtle); pointer-events: none; }
.filters input, .filters select {
    min-height: 42px; border-radius: var(--bv-radius-full); border: 1px solid var(--bv-border-strong);
    background: var(--bv-surface); padding: 0 16px; font-size: 14.5px;
}
.filters__search input { width: 100%; padding-left: 44px; }
.filters select {
    appearance: none; -webkit-appearance: none; padding-right: 38px; font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237E8497' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.filters input:focus, .filters select:focus { outline: none; border-color: var(--bv-primary); box-shadow: var(--bv-focus); }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.recipe-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .2s var(--bv-ease), box-shadow .2s; }
.recipe-card:hover { transform: translateY(-2px); box-shadow: var(--bv-shadow-md); }
.recipe-card__cover {
    --cover-a: var(--bv-primary-soft); --cover-b: var(--bv-accent-soft);
    position: relative; display: grid; place-items: center; height: 120px; text-decoration: none;
    background: radial-gradient(circle at 20% 20%, var(--cover-b), transparent 60%), var(--cover-a);
    color: var(--bv-on-primary-soft);
}
.recipe-card__cover .material-symbols-rounded { font-size: 48px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48; transition: transform .25s var(--bv-ease); }
.recipe-card:hover .recipe-card__cover .material-symbols-rounded { transform: scale(1.08) rotate(-4deg); }
.recipe-card--breakfast .recipe-card__cover, .recipe-card--snack .recipe-card__cover { --cover-a: var(--bv-accent-soft); --cover-b: var(--bv-primary-soft); color: var(--bv-on-accent-soft); }
.recipe-card--dessert .recipe-card__cover { --cover-a: var(--bv-danger-soft); --cover-b: var(--bv-accent-soft); color: var(--bv-on-danger-soft); }
.recipe-card--dinner .recipe-card__cover { --cover-a: var(--bv-info-soft); --cover-b: var(--bv-primary-soft); color: var(--bv-on-info-soft); }
.recipe-card__mine {
    position: absolute; top: 10px; right: 10px; padding: 2px 10px; border-radius: var(--bv-radius-full);
    background: var(--bv-surface); color: var(--bv-text); font-size: 12px; font-weight: 800; box-shadow: var(--bv-shadow-sm);
}
.recipe-card__body { padding: 16px 16px 8px; display: grid; gap: 10px; flex: 1; align-content: start; }
.recipe-card__title { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.recipe-card__actions { display: flex; align-items: center; gap: 4px; padding: 8px 12px 14px 16px; }
.recipe-card__actions form { display: contents; }

.time-group { display: flex; gap: 8px; }
.time-group input { flex: 1; min-width: 0; }
.time-group select { width: 92px; flex-shrink: 0; }

.dynamic-list { display: grid; gap: 10px; }
.dynamic-list:empty { display: none; }
.dynamic-row {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end;
    padding: 12px; border-radius: var(--bv-radius-md); background: var(--bv-surface-2);
}
.dynamic-row--step { grid-template-columns: minmax(0, 1fr); }
.dynamic-row__step-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.dynamic-row__step-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dynamic-row__controls { display: flex; gap: 2px; padding-bottom: 4px; }
.dynamic-row__step-top .dynamic-row__controls { padding-top: 24px; }
.dynamic-row .field :where(input, select, textarea) { background: var(--bv-surface); }
.dynamic-list--steps { counter-reset: step; }
.dynamic-list--steps .dynamic-row__step-text .field__label::after { counter-increment: step; content: ' ' counter(step); }
.form-section-add { justify-self: start; }
@media (max-width: 599px) {
    .dynamic-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dynamic-row__ingredient { grid-column: 1 / -1; }
    .dynamic-row__controls { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Profile */
.profile-hero { display: flex; align-items: center; gap: 20px; padding: 24px 0 28px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.profile-grid__wide { grid-column: 1 / -1; }
.danger-card { border-color: color-mix(in srgb, var(--bv-danger) 30%, var(--bv-border)); }
.danger-card .card__title .material-symbols-rounded { color: var(--bv-danger); }
.entry > form { flex-shrink: 0; }
@media (max-width: 799px) {
    .profile-grid { grid-template-columns: minmax(0, 1fr); }
    .profile-hero { gap: 14px; padding-top: 12px; }
    .profile-hero .avatar--lg { width: 60px; height: 60px; font-size: 22px; }
}
.training-chip__description { font-size: 12px; color: var(--bv-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.week-grid__day--empty .week-grid__add { display: none; }

/* 9. Finance patterns ------------------------------------------------------
   Money goes green when it comes in, burgundy when it goes out and gold when
   it is the figure that matters (net worth, savings). */

[data-app="finance"] .avatar { background: linear-gradient(135deg, var(--bv-ochre), #1F3A6E); }

.amount { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.amount--in  { color: var(--bv-success); }
.amount--out { color: var(--bv-danger); }
.amount--muted { color: var(--bv-text-muted); font-weight: 700; }

/* Net-worth hero: a navy "private banking" card with a gold hairline */
.wealth-card {
    position: relative; overflow: hidden;
    color: #F4F1E8;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(200, 150, 46, .28) 0%, transparent 55%),
        linear-gradient(150deg, #1F3A6E 0%, #16294F 55%, #0F1D3A 100%);
    border: 0;
    box-shadow: var(--bv-shadow-md);
}
.wealth-card::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 3px;
    background: linear-gradient(90deg, transparent, var(--bv-ochre), transparent);
}
.wealth-card .card__title, .wealth-card .card__title .material-symbols-rounded { color: #F4F1E8; }
.wealth-card .card__link { color: #F2D48E; }
.wealth-card__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F2D48E; }
.wealth-card__value { font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 6px; }
.wealth-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: rgba(244, 241, 232, .78); }
.wealth-card .chip--positive { background: rgba(91, 194, 133, .2); color: #BFEBD0; }
.wealth-card .chip--negative { background: rgba(240, 138, 165, .2); color: #FFC9D6; }
.wealth-card .chip--neutral { background: rgba(255, 255, 255, .12); color: #F4F1E8; }
.wealth-card .amount--in { color: #9BE3B5; }
.wealth-card .amount--out { color: #FFB3C4; }
.wealth-card__split dd small { font-size: 12.5px; font-weight: 700; opacity: .8; }
.wealth-card__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 18px; }
.wealth-card__split > div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--bv-radius-md); padding: 10px 14px; }
.wealth-card__split dt { font-size: 12px; font-weight: 700; color: rgba(244, 241, 232, .7); }
.wealth-card__split dd { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.wealth-card .chart { margin: 8px -8px -8px; }
.wealth-card .empty-state__label, .wealth-card .empty-state__sub { color: rgba(244, 241, 232, .8); }
.wealth-card .empty-state__art { background: rgba(255, 255, 255, .1); color: #F2D48E; }
@media (prefers-color-scheme: dark) {
    :root:not(.bv-light-only) .wealth-card {
        background:
            radial-gradient(120% 90% at 100% 0%, rgba(226, 182, 90, .22) 0%, transparent 55%),
            linear-gradient(150deg, #1A2D55 0%, #121F3E 60%, #0B1428 100%);
        box-shadow: 0 0 0 1px var(--bv-border), var(--bv-shadow-md);
    }
}

/* Month at a glance: income / expenses / savings */
.kpis { display: grid; gap: 4px; }
.kpi { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--bv-border); }
.kpi:first-child { border-top: 0; padding-top: 0; }
.kpi__main { flex: 1; min-width: 0; }
.kpi__label { font-size: 13px; font-weight: 700; color: var(--bv-text-muted); }
.kpi__value { font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bv-text-subtle); margin-top: 4px; }
.icon-bubble--success { background: var(--bv-success-soft); color: var(--bv-on-success-soft); }
.savings-rate { margin-top: 14px; padding: 14px; border-radius: var(--bv-radius-md); background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); }
.savings-rate__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.savings-rate__head strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.savings-rate .progress { background: color-mix(in srgb, var(--bv-surface) 65%, transparent); }

.progress__bar--gold { background: linear-gradient(90deg, var(--bv-ochre), #E2B65A); }
.progress__bar--primary { background: var(--bv-primary); }
.progress__bar--in { background: var(--bv-success); }
.progress__bar--out { background: var(--bv-danger); }

/* Budget bars: spent vs. estimated, with a tick where the estimate sits */
.budget { list-style: none; display: grid; gap: 16px; }
.budget__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.budget__name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget__figures { font-size: 13.5px; color: var(--bv-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.budget__figures strong { color: var(--bv-text); font-weight: 800; }
.budget__track { position: relative; height: 10px; border-radius: 10px; background: var(--bv-surface-2); }
.budget__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--bv-primary); max-width: 100%; transition: width .4s var(--bv-ease); }
.budget--in .budget__fill { background: var(--bv-success); }
.budget__item--over .budget__fill { background: var(--bv-danger); }
.budget__target { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--bv-accent); }
.budget__note { font-size: 12.5px; color: var(--bv-text-subtle); margin-top: 4px; }
.budget__item--over .budget__note { color: var(--bv-danger); font-weight: 700; }

/* Donut legend */
.legend { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: var(--dot, var(--bv-primary)); }
.legend__label { flex: 1; min-width: 0; color: var(--bv-text-muted); font-weight: 600; }

/* Accounts */
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.account-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 14px; transition: box-shadow .2s var(--bv-ease), transform .2s var(--bv-ease); }
.account-card__top { display: flex; align-items: flex-start; gap: 12px; }
.account-card__name { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.account-card__type { font-size: 13px; color: var(--bv-text-muted); font-weight: 600; }
.account-card__balance { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.account-card__foot { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bv-border); }
.account-card--hidden { opacity: .62; background: var(--bv-surface-2); box-shadow: none; }
.account-card.is-dragging { opacity: .5; }
.account-card.is-drop-target { box-shadow: 0 0 0 2px var(--bv-primary), var(--bv-shadow-md); transform: translateY(-2px); }
.drag-handle { cursor: grab; color: var(--bv-text-subtle); touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.icon-bubble--gold { background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); }

/* Signed movement list */
.entry__value.amount--in, .entry__value.amount--out { font-size: 16px; }
.day-total { font-size: 12.5px; font-weight: 700; color: var(--bv-text-subtle); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.list-group__label.row { display: flex; }

/* Chip filters (type switch, period) */
.chip-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-filters .chip { height: 34px; padding: 0 14px; font-size: 13.5px; border: 1px solid var(--bv-border); background: var(--bv-surface); color: var(--bv-text-muted); }
.chip-filters .chip[aria-current="true"], .chip-filters .chip[aria-pressed="true"] { background: var(--bv-primary); color: var(--bv-on-primary); border-color: var(--bv-primary); }

/* Investments */
.position-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.position-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.position-card__top { display: flex; align-items: center; gap: 12px; }
.ticker {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; flex-shrink: 0;
    border-radius: var(--bv-radius-md); background: var(--bv-primary-soft); color: var(--bv-on-primary-soft);
    font-weight: 800; font-size: 12.5px; letter-spacing: .02em;
}
.ticker--crypto { background: var(--bv-accent-soft); color: var(--bv-on-accent-soft); }
.position-card__name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.position-card__value { font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.position-card .sparkline { height: 48px; margin-top: 0; }
.position-card .sparkline--down { color: var(--bv-danger); }
.position-card .sparkline--up { color: var(--bv-success); }

/* Timeline (debt operations) */
.timeline { list-style: none; position: relative; display: grid; }
.timeline::before { content: ''; position: absolute; left: 37px; top: 8px; bottom: 8px; width: 2px; background: var(--bv-border); }
.timeline .entry { border-top: 0; position: relative; }
.timeline .icon-bubble { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bv-surface); }
@media (max-width: 599px) { .timeline::before { left: 33px; } }

.field__error[hidden] { display: none; }
.field--invalid :where(input, select) { border-color: var(--bv-danger); }

/* Budget tree (finance categories) */
.group-tree { list-style: none; }
.group-tree .group-tree { border-top: 1px solid var(--bv-border); background: color-mix(in srgb, var(--bv-surface-2) 45%, transparent); }
.group-node + .group-node { border-top: 1px solid var(--bv-border); }
.group-row { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 14px 12px; }
.group-node[data-depth="1"] > .group-row { padding-left: 40px; }
.group-node[data-depth="2"] > .group-row { padding-left: 68px; }
.group-row__main { flex: 1; min-width: 0; }
.group-row__spacer { width: 32px; flex-shrink: 0; }
.group-row__toggle .material-symbols-rounded { transition: transform .2s var(--bv-ease); }
.group-row__toggle[aria-expanded="true"] .material-symbols-rounded { transform: rotate(90deg); }
.budget-total { padding: 18px 20px; border-bottom: 1px solid var(--bv-border); background: var(--bv-accent-soft); }
.budget-total .budget__track { background: color-mix(in srgb, var(--bv-surface) 70%, transparent); }
.budget--in .budget__fill, .budget-total.budget--in .budget__fill { background: var(--bv-success); }
.budget__item--over > .group-row__main .budget__fill, .budget-total.budget__item--over .budget__fill { background: var(--bv-danger); }
.group-row.budget__item--over .budget__note { color: var(--bv-danger); font-weight: 700; }
.menu__item[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.menu form { display: contents; }
@media (max-width: 599px) {
    .group-node[data-depth="1"] > .group-row { padding-left: 24px; }
    .group-node[data-depth="2"] > .group-row { padding-left: 36px; }
}
@media (max-width: 599px) {
    /* Three options (Gastos · Ingresos · Transferencias) must fit a phone without scrolling. */
    [data-app="finance"] .segmented { display: flex; }
    [data-app="finance"] .segmented__item { flex: 1 1 0; justify-content: center; padding-inline: 8px; }
    [data-app="finance"] .segmented__item .material-symbols-rounded { display: none; }
}
@media (max-width: 599px) {
    /* Rows with an amount plus actions: give the text the full width, figures go below. */
    .entries--wrap .entry { flex-wrap: wrap; row-gap: 6px; }
    .entries--wrap .entry__main { flex: 1 1 calc(100% - 52px); }
    .entries--wrap .entry__side { flex: 1 1 100%; padding-left: 50px; }
    .entries--wrap .entry__side .entry__value { margin-right: auto; text-align: left; }
}