/* =========================================================
   Precursor � design system
   ========================================================= */

/* Fraunces restricted to numerals, currency and numeric separators.
   Listed before Playfair Display so the browser only pulls these
   glyphs from Fraunces and renders everything else in Playfair. */
@font-face {
    font-family: 'FrauncesNumerals';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
    unicode-range: U+0024, U+002C, U+002E, U+0030-0039, U+0025, U+002B, U+002D, U+00A2-00A5, U+20AC;
}

:root {
    --bg: #F7F5F0;
    --surface: #FFFFFF;
    --surface-2: #FBFAF6;
    --border: #E8E3D8;
    --border-strong: #D8D2C2;

    --ink: #15202B;
    --ink-2: #2B3744;
    --muted: #6B7480;
    --muted-2: #8A93A0;

    --brand: #15202B;
    --accent: #5E6B64;
    --accent-2: #48544D;
    --accent-soft: #EAEEEB;

    --gold: #B8924A;
    --gold-soft: #F2EAD6;

    --optimal: #2A8068;
    --optimal-soft: #DBEEE6;
    --inrange: #4A7BA1;
    --inrange-soft: #DEE9F2;
    --watch: #B8762D;
    --watch-soft: #F4E6CD;
    --alert: #B5483A;
    --alert-soft: #F4DDD8;

    --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.03);
    --shadow-md: 0 2px 6px rgba(20, 30, 40, 0.04), 0 1px 2px rgba(20, 30, 40, 0.03);
    --shadow-lg: 0 4px 14px rgba(20, 30, 40, 0.05), 0 1px 3px rgba(20, 30, 40, 0.03);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;

    --sidebar-w: 260px;
    --topbar-h: 64px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'FrauncesNumerals', 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Bone-white film-grain overlay � tunable config */
    --grain-base: #FAFAFA;
    --grain-opacity: 0.1;
    --grain-frequency: 0.85;
    --grain-tile: 120px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--grain-base);
    color: var(--ink);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5rem; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
h4 { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

p { margin: 0 0 1rem; color: var(--ink-2); }

/* App shell */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* =========================================================
   Bone-white film-grain overlay
   Reusable: drop `.grain-surface` on any page-level container.
   Tune via --grain-base / --grain-opacity / --grain-frequency
   / --grain-tile (declared in :root). Note: baseFrequency is
   baked into the inline SVG below; keep it in sync with
   --grain-frequency if you change it.
   ========================================================= */
.grain-surface {
    position: relative;
    background-color: var(--grain-base);
}

.grain-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: var(--grain-tile) var(--grain-tile);
}

/* Keep real content above the grain overlay */
.grain-surface > * {
    position: relative;
    z-index: 1;
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem .75rem 1.5rem;
    text-decoration: none;
    color: var(--ink);
}
.brand:hover { text-decoration: none; }

.brand-mark {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #15202B 0%, #5E6B64 100%);
    display: grid; place-items: center;
    color: white; font-weight: 700; font-size: 0.95rem;
    letter-spacing: -0.04em;
    box-shadow: var(--shadow-sm);
}

.brand-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.brand-logo {
    height: 32px;
    width: auto;
    display: block;
}

.nav-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: .85rem .85rem .4rem;
}

/* Collapsible nav group (e.g. the Admin section, collapsed by default). */
.nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: .85rem .85rem .4rem;
    background: none; border: 0; cursor: pointer; text-align: left;
}
.nav-group-toggle:hover { color: var(--ink-2); }
.nav-group-toggle svg { transition: transform 140ms ease; flex-shrink: 0; }
.nav-group-toggle.open svg { transform: rotate(180deg); }
.nav-group-items[hidden] { display: none; }

.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    margin: .15rem 0;
    border-radius: 10px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.93rem;
    transition: background 120ms ease, color 120ms ease;
}
.nav-item:hover {
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}
.nav-item.active {
    background: var(--accent-soft);
    color: var(--ink);
}
.nav-item .nav-icon {
    width: 18px; height: 18px;
    color: currentColor;
    flex-shrink: 0;
}

.sidebar-footer {
    margin-top: auto;
    padding: .75rem .25rem .25rem;
    border-top: 1px solid var(--border);
}

.user-chip {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    color: var(--ink-2);
    text-decoration: none;
}
.user-chip:hover { background: var(--surface-2); text-decoration: none; }

.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5E6B64, #48544D);
    color: white;
    display: grid; place-items: center;
    font-weight: 600; font-size: 0.85rem;
    flex-shrink: 0;
}
.avatar.lg { width: 72px; height: 72px; font-size: 1.4rem; }

.user-meta { line-height: 1.15; min-width: 0; }
.user-meta .name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.user-meta .sub { font-size: 0.78rem; color: var(--muted); }

/* Main */
.main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid transparent;
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--grain-base) 85%, transparent) 0%,
        color-mix(in srgb, var(--grain-base) 70%, transparent) 35%,
        color-mix(in srgb, var(--grain-base) 40%, transparent) 70%,
        transparent 100%
    );
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
}

.topbar-left { display: flex; align-items: center; gap: 1rem; }
.menu-btn {
    display: none;
    background: none; border: none;
    color: var(--ink); padding: 6px; border-radius: 8px;
    cursor: pointer;
}
.menu-btn:hover { background: var(--surface-2); }

.topbar-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: .45rem .75rem;
    border-radius: 14px;
    width: 280px;
    color: var(--muted);
    font-size: 0.88rem;
}
.topbar-search input {
    background: transparent; border: 0; outline: 0;
    color: var(--ink); font-size: 0.9rem; width: 100%;
    font-family: inherit;
}

.topbar-right { display: flex; align-items: center; gap: .5rem; }

/* "Complete onboarding" pill in the topbar */
.topbar-onboard-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem .35rem .65rem;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.topbar-onboard-btn:hover {
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--accent) 10%);
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}
.topbar-onboard-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: ob-pulse 2s ease-in-out infinite;
}
@keyframes ob-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.75); }
}
.icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink-2);
    cursor: pointer;
    transition: background 120ms ease;
    position: relative;
    text-decoration: none;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .icon-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 14px;
    background: var(--alert);
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid var(--bg);
    line-height: 1;
}

/* Hover dropdowns */
.dropdown-wrap {
    position: relative;
}
.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 60;
}
/* Bridge so cursor can move from button into dropdown without losing hover */
.dropdown::before {
    content: "";
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}
.dropdown-wrap:hover .dropdown,
.dropdown-wrap:focus-within .dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.dropdown-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .65rem .65rem;
}
.dropdown-head strong { font-size: 0.95rem; color: var(--ink); }
.dropdown-head a { color: var(--accent); font-weight: 600; }

.dropdown-item {
    display: flex; align-items: center; gap: .65rem;
    width: 100%;
    padding: .65rem .75rem;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.dropdown-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.dropdown-item-danger { color: var(--alert); }
.dropdown-item-danger:hover { background: var(--alert-soft); color: var(--alert); }

.dropdown-foot {
    border-top: 1px solid var(--border);
    padding: .5rem .65rem .25rem;
    text-align: center;
}
.dropdown-foot a { color: var(--accent); font-weight: 600; }

.user-dropdown { min-width: 280px; }
.user-dropdown-head {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .75rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .85rem;
}
.user-dropdown-head .user-meta .name { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.user-dropdown-head .user-meta .sub { font-size: 0.78rem; color: var(--muted); }

.notif-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 360px;
    overflow-y: auto;
}
.notif-empty { padding: .85rem .75rem; }
/* Unread items reserve the dot's width so read items still line up. */
.notif-item:not(.unread) .notif-body { margin-left: 1.1rem; }
a.notif-title { color: inherit; display: block; }
a.notif-title:hover { color: var(--accent); }
.notif-item {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .65rem .75rem;
    border-radius: 10px;
    cursor: pointer;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread .notif-title { color: var(--ink); font-weight: 600; }
.notif-dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
}
.notif-item:not(.unread) .notif-body { padding-left: 16px; }
.notif-body { min-width: 0; flex: 1; }
.notif-title { font-size: 0.9rem; color: var(--ink-2); line-height: 1.3; }
.notif-meta { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* Mobile-only brand inside topbar */
.brand-mobile { display: none; padding: 0; }

.content {
    padding: 1.5rem 2rem 6rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* Cards & primitives */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow:
        0 1px 2px rgba(20, 30, 40, 0.03),
        0 4px 10px -6px rgba(20, 30, 40, 0.05);
}
.card-pad-lg { padding: 1.75rem; }
.card-tight { padding: 1rem; }

.card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.card-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--ink); }
.card-sub { font-size: 0.85rem; color: var(--muted); margin: .15rem 0 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: .75rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.divider { height: 1px; background: var(--border); margin: 1rem 0; border: 0; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.xsmall { font-size: 0.78rem; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem 1.1rem;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform 80ms ease, background 120ms ease, color 120ms ease;
    line-height: 1;
    font-family: inherit;
}
.btn:hover { background: #0B141C; color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.btn-accent { background: var(--accent); }
.btn.btn-accent:hover { background: var(--accent-2); }
.btn.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--border-strong);
}
.btn.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.btn-soft {
    background: var(--accent-soft);
    color: var(--accent);
}
.btn.btn-soft:hover { background: #D6E7DF; color: var(--accent); }
.btn.btn-sm { padding: .4rem .85rem; font-size: 0.8rem; border-radius: 10px; }
.btn.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Status pills */
.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pill.optimal { background: var(--optimal-soft); color: var(--optimal); border-color: transparent; }
.pill.optimal .dot { background: var(--optimal); }
.pill.inrange { background: var(--inrange-soft); color: var(--inrange); border-color: transparent; }
.pill.inrange .dot { background: var(--inrange); }
.pill.watch { background: var(--watch-soft); color: var(--watch); border-color: transparent; }
.pill.watch .dot { background: var(--watch); }
.pill.alert { background: var(--alert-soft); color: var(--alert); border-color: transparent; }
.pill.alert .dot { background: var(--alert); }
.pill.gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.pill.gold .dot { background: var(--gold); }

.priority-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.priority-high { background: var(--alert-soft); color: var(--alert); }
.priority-medium { background: var(--watch-soft); color: var(--watch); }
.priority-low { background: var(--inrange-soft); color: var(--inrange); }

/* Inputs */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field[hidden] { display: none; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.field:has(> :is(input, select, textarea)[required]) > label::after {
    content: " *";
    color: var(--alert);
    font-weight: 700;
}
.input, .select, .textarea {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: .65rem .85rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    width: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, .select:focus, .textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .select:disabled, .textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.textarea { min-height: 100px; resize: vertical; }

/* Address autocomplete suggestion dropdown */
.address-autocomplete { position: relative; }
.address-suggestions {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
}
.address-suggestion {
    padding: .55rem .65rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--ink-1);
}
.address-suggestion:hover,
.address-suggestion.is-active {
    background: var(--accent-soft);
}

/* Input group (e.g. phone with country prefix) */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-group-prefix {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .75rem;
    border-right: 1px solid var(--border-strong);
    color: var(--ink-2);
    font-size: 0.95rem;
    font-weight: 500;
    user-select: none;
    white-space: nowrap;
}
.input-group-prefix .flag-au {
    display: inline-flex;
    line-height: 0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.input-group-prefix .dial-code { color: var(--ink); }
.input-group .input-with-prefix {
    border: 0;
    border-radius: 0 10px 10px 0;
    box-shadow: none;
    background: transparent;
    flex: 1;
    min-width: 0;
}
.input-group .input-with-prefix:focus {
    outline: 0;
    box-shadow: none;
    border-color: transparent;
}

/* One-time code input */
.otp-input {
    letter-spacing: 0.6em;
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    text-align: center;
}

/* Inline "link" styled submit button (used for resend) */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.link-button:hover { opacity: 0.85; }

.toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border-strong); border-radius: 14px;
    transition: background 160ms ease;
}
.toggle .track::before {
    content: ""; position: absolute; height: 18px; width: 18px;
    left: 3px; top: 3px; background: white; border-radius: 50%;
    transition: transform 160ms ease;
    box-shadow: var(--shadow-sm);
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::before { transform: translateX(18px); }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: .35rem;
}
/* Nested "pill inside a pill" marker before the label:
   a dark pill encased by a light pill with equal padding all around. */
.section-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: .875rem;
    height: .55rem;
    border-radius: 999px;
    background: #1B1B1D;
    background-clip: padding-box;
    border: .28rem solid rgba(0, 0, 0, 0.1);
}

/* Mobile bottom nav */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--border);
    padding: 8px 4px max(8px, env(safe-area-inset-bottom));
    z-index: 30;
    justify-content: space-around;
}
.bottom-nav .b-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    flex: 1;
    border-radius: 8px;
    text-align: center;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.1;
}
.bottom-nav .b-item.active { color: var(--ink); }
.bottom-nav .b-item svg { width: 22px; height: 22px; }

/* More sheet */
.more-sheet {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    padding: .5rem 1rem max(1.25rem, env(safe-area-inset-bottom)) 1rem;
    z-index: 55;
    box-shadow: 0 -16px 40px rgba(20, 30, 40, 0.18);
    transform: translateY(100%);
    transition: transform 220ms ease;
}
.more-sheet.open { display: block; transform: translateY(0); }
.more-sheet-grabber {
    width: 38px; height: 4px;
    background: var(--border-strong);
    border-radius: 14px;
    margin: 8px auto 12px;
}
.more-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .25rem 0 .85rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .35rem;
}
.more-sheet .user-meta .name { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.more-sheet .user-meta .sub { font-size: 0.78rem; color: var(--muted); }

.more-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem .5rem;
    border-radius: 10px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.more-item:hover, .more-item:active { background: var(--surface-2); text-decoration: none; }
.more-item.active { color: var(--ink); background: var(--accent-soft); }
.more-item-danger { color: var(--alert); }
.more-item-danger:hover { background: var(--alert-soft); }
#bt-more-scrim.show { display: block; }

/* Mobile sidebar overlay */
.scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20, 30, 40, 0.4);
    z-index: 40;
}
.scrim.show { display: block; }

/* Overview */
.greeting-card {
    background:
        linear-gradient(135deg, rgba(21,32,43,0.72) 0%, rgba(27,45,61,0.55) 100%),
        url('/images/webapp/herobanners/blue-astro-wide.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.greeting-card h1 { color: white; margin-bottom: .35rem; }
.greeting-card .lede { color: #ced8e4; max-width: 60ch; margin: 0; }
.greeting-card .meta-row {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    margin-top: 1.5rem;
}
.greeting-card .meta { display: flex; flex-direction: column; gap: 2px; }
.greeting-card .meta .label {
    font-size: 0.72rem; font-weight: 600;
    color: #8A99AC; text-transform: uppercase; letter-spacing: 0.08em;
}
.greeting-card .meta .value {
    font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
    color: white;
    letter-spacing: -0.01em;
}

.score-ring-wrap { display: flex; align-items: center; gap: 1.5rem; background: transparent; }
.score-ring {
    --p: 78;
    --size: 132px;
    width: var(--size); height: var(--size);
    display: grid; place-items: center;
    position: relative;
    flex-shrink: 0;
    background: transparent;
}
.score-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.score-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}
.score-ring-progress {
    fill: none;
    stroke: url(#scoreRingGradient);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}
.score-ring .score-text {
    position: relative; text-align: center;
}
.score-ring .score-text .num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2.4rem;
    color: white;
    line-height: 1;
}
.score-ring .score-text .label {
    font-size: 0.62rem;
    color: #8A99AC;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* Overview hero: one photographic stage holds the greeting, the single next
   step, and the member's headline numbers as glass tiles over the image. */
.overview-hero {
    position: relative;
    margin-bottom: 1.5rem;
}
.overview-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
    /* The greeting anchors to the top of the stage rather than floating in
       the middle of it; the stats column stretches to match. */
    align-items: stretch;
    padding: 2.15rem 2.5rem;
    /* The tasks card tucks in behind this one, so the stage keeps the higher
       layer and casts the shadow that sells the fold. */
    margin-bottom: 0;
    z-index: 2;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 22px 44px -30px rgba(6,26,31,0.7);
    /* The gradient runs dark-to-clear across the image so the copy on the
       left keeps its contrast while the water stays visible on the right. */
    background:
        linear-gradient(100deg, rgba(6,26,31,0.92) 0%, rgba(6,26,31,0.74) 34%, rgba(6,26,31,0.34) 62%, rgba(6,26,31,0.48) 100%),
        url('/images/webapp/herobanners/overview-hero-coast.webp') center/cover no-repeat,
        #0b2a31;
}
/* Fine grain so the flat areas of the gradient don't band on wide screens. */
.overview-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.overview-stage-copy,
.overview-stage-stats { position: relative; z-index: 1; min-width: 0; }
.overview-stage-copy { display: flex; flex-direction: column; align-items: flex-start; }
.overview-stage h1 {
    color: #fff;
    /* 400 is the lightest the variable face carries (it ships 400–600). */
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 3rem);
    margin-bottom: .4rem;
}
.overview-stage h1 .greeting-name { color: #fff; }
.overview-stage .lede { color: rgba(255,255,255,0.8); max-width: 46ch; margin: 0; }

/* The one thing we want the member to do next, sitting roughly a tenth of
   the stage's height below the greeting. */
.overview-next { margin-top: 5.25rem; }
.overview-next-label {
    display: block;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.72);
    margin-bottom: .8rem;
}
.overview-next-cta {
    display: inline-flex; align-items: center; gap: .9rem;
    padding: 1rem 1.6rem;
    border-radius: 14px;
    background: rgba(9,32,38,0.5);
    border: 1px solid rgba(255,255,255,0.28);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff; text-decoration: none;
    font-weight: 600; font-size: 1.15rem;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.overview-next-cta:hover {
    background: rgba(9,32,38,0.72);
    border-color: rgba(255,255,255,0.48);
    transform: translateY(-1px);
}
.overview-next-static {
    margin: 0;
    font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
}
.overview-next-summary {
    margin: .9rem 0 0;
    max-width: 44ch;
    color: rgba(255,255,255,0.72);
    font-size: .9rem;
}

/* Headline numbers: the ring sits top right, with the two figure tiles
   beneath it, mirroring the stage's own right-hand weighting. */
.overview-stage-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Equal rows and columns keep all three tiles the same size whatever
       they contain — the ring is sized to fit rather than to stretch. */
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        ".       profile"
        "markers bioage";
    gap: 1.4rem;
    min-height: 340px;
}
.stat-tile-profile { grid-area: profile; }
.stat-tile-markers { grid-area: markers; }
.stat-tile-bioage { grid-area: bioage; }
.stat-tile {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: 1.15rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.stat-tile .kpi-label {
    color: rgba(255,255,255,0.86);
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    text-align: left;
}
/* Glass tiles carry UI numbers, not display copy, so they stay in the sans
   face; Playfair is reserved for headings on the page itself. */
.stat-tile .stat-value,
.stat-tile .score-ring .score-text .num {
    font-family: var(--font-sans);
}
.stat-tile .stat-value {
    font-weight: 500;
    font-size: 2.4rem; line-height: 1; color: #fff;
}
.stat-tile .stat-value-lg { font-size: 2.8rem; }
.stat-tile .stat-value-empty { color: rgba(255,255,255,0.55); }
.stat-tile .stat-note {
    margin: 0;
    font-size: .82rem; line-height: 1.4;
    color: rgba(255,255,255,0.74);
}
.stat-tile .stat-link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 600;
    color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    align-self: flex-start;
}
/* The ring centres inside the tile without changing the tile's size. */
.stat-tile-profile .score-ring { --size: 104px; margin: auto; }
.stat-tile-profile .score-ring .score-text .num { font-size: 1.5rem; font-weight: 500; }
.stat-tile-bioage { align-items: stretch; }

/* Compass page: the member's goals on an image stage, in the overview hero's
   glass tiles. The stage reuses the overview's grain; the tiles are .stat-tile. */
.compass-stage {
    position: relative;
    isolation: isolate;
    padding: 2rem 2.25rem;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 22px 44px -30px rgba(10,20,30,0.7);
    /* The coast photo is pale, so a cool tint (heavier at the bottom, over the
       sand) keeps white text and the glass tiles legible. */
    background:
        linear-gradient(180deg, rgba(12,20,28,0.42) 0%, rgba(12,20,28,0.58) 100%),
        url('/images/webapp/herobanners/compass-goals-gc.webp') center 60%/cover no-repeat,
        #5d6770;
}
.compass-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.compass-stage > * { position: relative; z-index: 1; }
.compass-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.compass-stage-meta { margin: 0; color: rgba(255,255,255,0.8); font-size: .9rem; }
.compass-stage-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.32);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font: inherit; font-weight: 600; font-size: .9rem;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.compass-stage-cta:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.5); }
.compass-stage-progress {
    height: 4px;
    margin-top: 1.1rem;
    border-radius: 999px;
    /* Track and fill both fade out at their ends rather than stopping hard. */
    background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12) 70%, rgba(255,255,255,0));
    overflow: hidden;
}
.compass-stage-progress > div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff 0%, #fff 60%, rgba(255,255,255,0) 100%);
}
/* Status chip under the progress line, in the tiles' glass. */
.compass-stage-chip {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    margin-left: auto;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}
.compass-stage-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.compass-stage-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    margin-top: 1.25rem;
}
.compass-tile { gap: .85rem; }
.compass-tile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.compass-tile-list li { color: #fff; font-size: .98rem; line-height: 1.35; }
.compass-stage-note { margin: 1.25rem 0 0; color: rgba(255,255,255,0.7); font-size: .78rem; }
@media (max-width: 900px) {
    .compass-stage { padding: 1.5rem 1.35rem; }
    .compass-stage-tiles { grid-template-columns: 1fr; gap: 1rem; }
}

/* Biological age. Nothing measures one yet, so the tile carries a line of
   copy until a panel produces a number. */
.bioage-empty {
    margin: 0;
    font-size: .85rem; line-height: 1.4;
    color: rgba(255,255,255,0.74);
}
/* A hairline that fades out at both ends rather than stopping abruptly.
   The auto margin below lets it sit around the middle of the tile instead
   of hugging the foot. */
.bioage-rule {
    height: 2px;
    margin-top: 1.45rem;
    margin-bottom: auto;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0) 100%);
}

/* Upcoming tasks sits behind the stage and emerges from under it, like a
   second folded card. It grows downward with the rows the member has. */
/* Doubled with .card so the narrow-screen .card-pad-lg padding reset can't
   drop the fold compensation and slide the heading under the stage. */
.card.overview-tasks-card {
    /* Deep enough that this card's own top corners sit well behind the
       stage's opaque body, so the fold reads as one sheet lying on another
       rather than two cards with peeking corners. */
    --fold: 72px;
    position: relative;
    z-index: 1;
    margin-top: calc(var(--fold) * -1);
    padding-top: calc(1.75rem + var(--fold));
}

/* Subscription hero: the two tiles render straight onto the page, sharing
   one continuous background image. */
.subscription-hero-grid {
    --tile-gap: 1.25rem;
    --tile-image: url('/images/webapp/herobanners/leaf-unfurl-bg.webp');
    --tile-scrim: linear-gradient(180deg, rgba(15,28,38,0.28) 0%, rgba(15,28,38,0.62) 100%);
    grid-template-columns: 2fr 1fr;
    gap: var(--tile-gap);
    align-items: stretch;
}
/* Each tile scales the image to the full row width so the artwork stays
   continuous. Percentages resolve against the tile's own box, so the
   2/3 and 1/3 tiles need different multipliers. */
.subscription-hero-grid > .card {
    background-color: transparent;
    background-image: var(--tile-scrim), var(--tile-image);
    background-repeat: no-repeat, no-repeat;
    background-origin: border-box;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
}
.subscription-hero-grid > .card:first-child {
    background-size: 100% 100%, calc(150% + var(--tile-gap)) 100%;
    background-position: center, left center;
}
.subscription-hero-grid > .card:last-child {
    background-size: 100% 100%, calc(300% + var(--tile-gap)) 100%;
    background-position: center, right center;
}

/* Frosted-glass treatment for cards laid over the hero image. */
.glass-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 12px 32px rgba(10,20,30,0.22);
    color: #fff;
}
/* Reusable staging panel that paints the same hero background so any
   .glass-card placed inside gets the frosted effect (e.g. Subscription). */
.glass-stage {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(15,28,38,0.28) 0%, rgba(15,28,38,0.62) 100%),
        url('/images/webapp/herobanners/sage-organic-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        0 1px 2px rgba(20, 30, 40, 0.03),
        0 4px 12px -6px rgba(20, 30, 40, 0.06);
}
/* Subscription & billing stage uses the blue backdrop. */
.glass-stage-blue {
    background: linear-gradient(180deg, rgba(15,28,38,0.28) 0%, rgba(15,28,38,0.62) 100%), url('/images/webapp/herobanners/orange-flower-blue-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 2px rgba(20, 30, 40, 0.03), 0 4px 12px -6px rgba(20, 30, 40, 0.06);
}

/* Inset stat tiles inside a glass card. Frosted so the tile's background
   image reads through, blurred, for a true glassmorphism effect. */
.glass-inset {
    background: rgba(255,255,255,0.14);
    border: 0.5px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: none;
    color: #fff;
}
/* Text legibility for standard card elements placed on glass. */
.glass-card .card-title,
.glass-card .section-eyebrow,
.glass-card .plan-features li { color: #fff; }
.glass-card .card-sub { color: rgba(255,255,255,0.78); }
.glass-card .plan-features li { border-color: rgba(255,255,255,0.14); }
.glass-card .plan-features li svg { color: #fff; }
.glass-card .kpi-label,
.glass-card .bioage-value,
.glass-card .bioage-note,
.glass-card .rec-key-title,
.glass-card .rec-key-summary,
.glass-card .rec-key-outcome-value,
.glass-card .score-text .num {
    color: #fff;
}
/* Card heading: uppercase eyebrow. Extra breathing room below so it reads
   as a distinct label rather than running into the value beneath it. */
.glass-card .kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: .6rem;
}
/* Subtext directly under the heading (e.g. "Not yet computed",
   "Book a doctor consult"): sans-serif, muted white, never larger
   than the heading. */
.glass-card .bioage-value,
.glass-card .rec-key-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.9);
    margin-top: 0;
}
/* Body copy inside glass cards: slightly muted but still comfortable. */
.glass-card .bioage-value.bioage-pending,
.glass-card .bioage-note,
.glass-card .rec-key-summary,
.glass-card .rec-key-outcome-value {
    color: rgba(255,255,255,0.82);
    font-size: 1rem;
    line-height: 1.5;
}
.glass-card .bioage-value.bioage-pending {
    font-size: 1.4rem;
}
.glass-card .rec-key-summary {
    margin-top: .9rem;
}
.glass-card .rec-key-outcome {
    background: rgba(255,255,255,0.14);
    border: 0.5px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: none;
    padding: .8rem .9rem;
    gap: .4rem;
}
.glass-card .rec-key-outcome-label {
    color: rgba(255,255,255,0.9);
}
/* Buttons over the image tiles: frosted glass with a white tint so the
   call to action reads clearly against the artwork. */
.glass-card .btn.btn-soft {
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.38);
    color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 2px 10px rgba(15,28,38,0.18);
}
.glass-card .btn.btn-soft:hover {
    background: rgba(255,255,255,0.34);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}
/* Status pills over the artwork get the same frosted treatment. */
.glass-card .pill {
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.38);
    color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 2px 10px rgba(15,28,38,0.18);
}
.glass-card .pill .dot { background: #fff; }
/* Higher specificity so the glass title styling wins over the later
   .rec-key-card .rec-key-title rule (keeps it white + sans, not dark serif). */
.glass-card.rec-key-card .rec-key-title {
    color: rgba(255,255,255,0.9);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0;
}
.glass-card .score-text .label {
    color: rgba(255,255,255,0.72);
}
@media (max-width: 900px) {
    /* The stage stacks: copy first, then the numbers as a full-width row. */
    .overview-stage {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.35rem;
    }
    .overview-stage-stats {
        grid-template-areas:
            "profile profile"
            "markers bioage";
    }
    /* Shallower fold and the narrow-screen card padding. */
    .card.overview-tasks-card {
        --fold: 52px;
        padding-top: calc(1.15rem + var(--fold));
    }
    .subscription-hero-grid { grid-template-columns: 1fr !important; }
    .subscription-hero-grid > .card {
        background-size: 100% 100%, cover !important;
        background-position: center, center !important;
    }
}

@media (max-width: 560px) {
    /* Profile and the biomarker count read as a pair of squares on one
       line, with biological age running full width beneath them. */
    .overview-stage-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
        grid-template-areas:
            "profile markers"
            "bioage  bioage";
        min-height: 0;
        gap: 1rem;
    }
    /* A square is a tight box, so the contents step down to match it. */
    .stat-tile-profile,
    .stat-tile-markers {
        aspect-ratio: 1 / 1;
        padding: .9rem;
        gap: .35rem;
        overflow: hidden;
    }
    /* The ring is the whole point of this tile, so it takes the room the
       tighter padding frees up. */
    .stat-tile-profile { padding: .7rem; }
    .stat-tile-profile .score-ring { --size: 78px; }
    .stat-tile-profile .score-ring .score-text .num { font-size: 1.25rem; }
    .stat-tile-profile .kpi-label,
    .stat-tile-markers .kpi-label { font-size: .62rem; }
    .stat-tile-markers .stat-value { font-size: 1.6rem; }
    .stat-tile-markers .stat-note { font-size: .7rem; line-height: 1.3; }
    /* The phone's bio-age tile is short, so the rule keeps the tighter gap. */
    .bioage-rule { margin-top: 1rem; }
    /* Less air between the greeting and the one action below it. */
    .overview-next { margin-top: 1.75rem; }
    .overview-next-cta {
        padding: .8rem 1.2rem;
        font-size: 1rem;
        gap: .6rem;
    }
}

.kpi { display: flex; flex-direction: column; gap: .35rem; }
.kpi .kpi-label {
    font-size: 0.78rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.kpi .kpi-value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.8rem;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.kpi .kpi-value .unit {
    font-size: 1rem;
    color: var(--muted);
    font-family: var(--font-sans);
    font-weight: 500;
    margin-left: 4px;
}
.kpi .kpi-trend {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.82rem; font-weight: 600;
}
.kpi .kpi-trend.up { color: var(--optimal); }
.kpi .kpi-trend.down { color: var(--alert); }
.kpi .kpi-trend.flat { color: var(--muted); }

/* Biomarker row */
.bm-row {
    display: grid;
    grid-template-columns: 1.6fr 1.4fr 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
}
.bm-row:last-child { border-bottom: 0; }
.bm-row a.bm-name { color: var(--ink); }
.bm-row a.bm-name:hover { color: var(--accent); text-decoration: none; }
.bm-name { font-weight: 600; }
.bm-cat { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.bm-row.selected {
    background: var(--accent-soft);
    border-radius: 10px;
    border-bottom-color: transparent;
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: .9rem;
    padding-right: .9rem;
    margin-left: -.9rem;
    margin-right: -.9rem;
}
.bm-row.selected + .bm-row { border-top: 1px solid var(--border); }
.bm-row.selected a.bm-name,
.bm-row.selected .bm-name { color: var(--accent); }

/* Floating detail card that follows scroll, sized to its content */
.bm-detail {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    align-self: start;
}
/* Detail card category heading: plain uppercase label, no eyebrow dot. */
.bm-detail-cat {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: .15rem;
}

@media (max-width: 768px) {
    .bm-detail { position: static; }
}

.range-bar {
    position: relative; height: 8px;
    background: linear-gradient(to right,
        var(--alert-soft) 0%, var(--alert-soft) 12%,
        var(--watch-soft) 12%, var(--watch-soft) 28%,
        var(--optimal-soft) 28%, var(--optimal-soft) 72%,
        var(--watch-soft) 72%, var(--watch-soft) 88%,
        var(--alert-soft) 88%, var(--alert-soft) 100%);
    border-radius: 14px;
}
.range-bar .marker {
    position: absolute; top: -4px;
    width: 16px; height: 16px;
    background: var(--ink);
    border: 3px solid var(--surface);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transform: translateX(-50%);
}
.range-labels {
    display: flex; justify-content: space-between;
    font-size: 0.7rem; color: var(--muted);
    margin-top: 4px;
}

.bm-value-cell { text-align: right; }
.bm-value { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.bm-unit { font-size: 0.78rem; color: var(--muted); }

.trend-arrow {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.8rem; font-weight: 600;
}
.trend-arrow.improving { color: var(--optimal); }
.trend-arrow.declining { color: var(--alert); }
.trend-arrow.stable { color: var(--muted); }

/* Recommendations */
.rec-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 1rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rec-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.rec-card.accepted {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 30%);
}
.rec-card .rec-cat {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: 0.72rem; font-weight: 600;
    color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em;
}
.rec-card .rec-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.rec-card .rec-summary { color: var(--ink-2); margin: 0; }

.steps-list {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: .5rem;
}
.steps-list li {
    display: flex; gap: .65rem; align-items: flex-start;
    font-size: 0.92rem; color: var(--ink-2);
}
.steps-list li::before {
    content: ""; flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 8px;
}

.rec-dismiss {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rec-dismiss:hover {
    background: var(--alert-soft);
    color: var(--alert);
    border-color: transparent;
}

.rec-card.dismissed {
    opacity: 0.65;
    background: var(--surface-2);
}
.rec-card.dismissed .rec-title { color: var(--muted); }

.expected-outcome {
    background: var(--accent-soft);
    border-radius: 10px;
    padding: .65rem .85rem;
    color: var(--ink);
}

.dismissed-bar {
    margin-top: 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1rem;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
}

/* Timeline � 3-column grid: date | rail | cards */
.timeline {
    --tl-date-w: 96px;
    --tl-rail-w: 28px;
    position: relative;
}
.timeline-now,
.timeline-row {
    display: grid;
    grid-template-columns: var(--tl-date-w) var(--tl-rail-w) 1fr;
    gap: 0;
    align-items: flex-start;
    position: relative;
}
.timeline-now { margin-bottom: 1rem; align-items: center; }
.timeline-row { margin-bottom: 1.5rem; }

.timeline-date {
    text-align: right;
    padding-right: .75rem;
    padding-top: 4px;
}
.timeline-date-main {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.timeline-date-sub {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.3;
}

.timeline-rail {
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
}
.timeline-rail::before {
    content: "";
    position: absolute;
    top: 0; bottom: -1.5rem;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--border);
}
.timeline-now .timeline-rail::before {
    background: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 50%, var(--border) 50%);
}
.timeline-row:last-child .timeline-rail::before { bottom: 0; }
.timeline-dot {
    position: relative;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px var(--bg);
    margin-top: 8px;
    z-index: 2;
}
.timeline-now .timeline-dot {
    background: var(--accent);
    margin-top: 0;
    width: 16px; height: 16px;
}

.timeline-cards {
    display: flex; flex-direction: column;
    gap: .75rem;
    padding-left: .85rem;
    min-width: 0;
}
.timeline-now-text { padding-left: .85rem; }

.milestone-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow-sm);
}
.milestone-card.pending { opacity: 0.78; }
.milestone-card.ms-signal { border-left-color: var(--accent-2); }
.milestone-card.ms-benefit { border-left-color: var(--accent); }
.milestone-card.ms-retest { border-left-color: var(--gold); }

.ms-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 .35rem;
}
.ms-desc {
    font-size: 0.88rem;
    color: var(--ink-2);
    margin: 0 0 .65rem;
}
.ms-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ms-tag.ms-signal { background: var(--accent-soft); color: var(--accent); }
.ms-tag.ms-benefit { background: var(--optimal-soft); color: var(--optimal); }
.ms-tag.ms-retest { background: var(--gold-soft); color: var(--gold); }

.ms-bio-row {
    margin-top: .25rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--border);
}
.bio-chip {
    display: inline-flex;
    padding: 3px 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.bio-chip:hover { background: var(--ink); color: white; text-decoration: none; }

@media (max-width: 768px) {
    .timeline { --tl-date-w: 70px; --tl-rail-w: 22px; }
    .timeline-date { padding-right: .5rem; }
    .timeline-date-main { font-size: 0.92rem; }
    .timeline-date-sub { font-size: 0.65rem; }
    .timeline-cards { padding-left: .65rem; }
    .timeline-now-text { padding-left: .65rem; }
    .milestone-card { padding: .85rem 1rem; }
    .ms-title { font-size: 0.95rem; }
    .ms-desc { font-size: 0.85rem; }
}

/* Services */
.svc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: transform 160ms ease, box-shadow 160ms ease;
    padding: .6rem;
}
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.svc-cover {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #1B2D3D, #5E6B64);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: .5rem;
    padding: .85rem;
    overflow: hidden;
    border-radius: var(--radius);
}
.svc-cover::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(800px 200px at 100% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.svc-cover-tag {
    position: relative;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 4px 11px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.svc-body {
    padding: 1rem .65rem 1.6rem;
    display: flex; flex-direction: column; gap: .6rem;
    flex: 1;
    position: relative;
}
.svc-duration {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-soft, rgba(20,30,40,0.05));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 3px 10px;
}
.svc-cat {
    align-self: flex-start;
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 9px;
    border-radius: 14px;
}
.svc-name {
    font-family: var(--font-display);
    font-size: 1.2rem; font-weight: 500;
    color: var(--ink); margin: 0;
    letter-spacing: -0.01em;
}
.svc-tagline { color: var(--ink-2); margin: 0; font-size: 0.83rem; line-height: 1.5; }
.svc-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.svc-foot {
    margin-top: auto;
    padding-top: 3.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap;
}

/* Price + Learn more + gate CTA share one line: labels never wrap inside
   their buttons, and the longer CTAs ("Requires membership") get slightly
   tighter metrics so the row fits the landscape card's text column. */
.svc-foot .svc-price .price { white-space: nowrap; }
.svc-foot .btn-sm {
    white-space: nowrap;
    padding: .4rem .65rem;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
}

/* Landscape variant: image left, content right. */
.svc-card-land {
    flex-direction: row;
    align-items: stretch;
    gap: .6rem;
}
.svc-card-land .svc-cover {
    aspect-ratio: auto;
    flex: 0 0 40%;
    max-width: 40%;
    align-self: stretch;
}
.svc-card-land .svc-body {
    flex: 1;
    padding: .35rem .65rem .35rem .35rem;
    min-width: 0;
}
@media (max-width: 720px) {
    .svc-card-land { flex-direction: column; }
    .svc-card-land .svc-cover {
        flex-basis: auto;
        max-width: none;
        aspect-ratio: 16 / 10;
    }
    .svc-card-land .svc-body { padding: 1rem .65rem .65rem; }
}
.svc-price { display: flex; flex-direction: column; line-height: 1.1; gap: 0; }
.svc-price .price {
    font-family: var(--font-display);
    font-weight: 500; font-size: 1.19rem; color: var(--ink);
    line-height: 1.1;
    margin: 0;
}
.svc-price .strike {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.1;
    margin: 0;
}
.svc-price .member { font-size: 0.75rem; color: var(--accent); font-weight: 600; line-height: 1.1; margin-top: 1px; }

/* Plans */
.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex; flex-direction: column; gap: 1rem;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.plan-card.popular {
    border: 2px solid var(--accent);
    box-shadow: 0 14px 40px rgba(94,107,100,0.14);
}
.plan-card.current {
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 30%);
}
.plan-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--accent);
    color: white;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 14px;
}
/* The member's own recommendation carries a longer label, so it steps down a
   size and wraps inside the card rather than running past its edges. */
.plan-badge-compass {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    max-width: calc(100% - 1.5rem);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}
.plan-name {
    font-family: var(--font-display);
    font-weight: 500; font-size: 1.5rem;
    margin: 0;
}
.plan-price { display: flex; align-items: baseline; gap: .35rem; }
.plan-price .num {
    font-family: var(--font-display);
    font-size: 2.6rem; font-weight: 500;
    color: var(--ink); line-height: 1;
    letter-spacing: -0.02em;
}
.plan-price .per { color: var(--muted); font-size: 0.9rem; }

.plan-features {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .5rem;
    flex: 1;
}
.plan-features li {
    display: flex; gap: .55rem; align-items: flex-start;
    color: var(--ink-2); font-size: 0.92rem;
}
.plan-features li svg {
    color: var(--accent); flex-shrink: 0; margin-top: 2px;
}

/* Tabs */
.tabs {
    display: inline-flex; padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    gap: 2px;
}
.tab-btn {
    padding: .5rem 1rem;
    border-radius: 14px;
    background: transparent; border: 0;
    font-size: 0.85rem; font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem;
}
.tab-btn:hover { color: var(--ink); text-decoration: none; }
.tab-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Filter chips */
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 768px) {
    .chip-group { display: none; }
}
.chip {
    padding: .35rem .8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.chip:hover { background: var(--surface-2); text-decoration: none; }
.chip.active { background: var(--ink); color: white; border-color: transparent; }

/* Records � report strip */
.report-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.report-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    color: white;
    transition: transform 160ms ease, box-shadow 160ms ease;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.report-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,16,22,0.15) 0%, rgba(10,16,22,0.78) 100%);
}
.report-card.cover-scan { background-image: linear-gradient(135deg, #1B2D3D 0%, #34506A 100%); }
.report-card.cover-video { background-image: linear-gradient(135deg, #5E6B64 0%, #48544D 100%); }
.report-card.cover-brand { background-image: linear-gradient(135deg, #15202B 0%, #2B3744 100%); }
.report-date {
    position: absolute; top: 12px; left: 12px;
    z-index: 1;
    font-size: 0.72rem; font-weight: 600;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(4px);
    padding: 3px 9px; border-radius: 14px;
}
.report-play {
    position: absolute; inset: 0; margin: auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    z-index: 1;
}
.report-foot {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: .65rem;
}
.report-foot .avatar { background: rgba(255,255,255,0.2); }
.report-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.report-clinician { font-size: 0.78rem; opacity: 0.85; }

.record-group-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0 .65rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.record-group-head:not(:first-child) { margin-top: 1rem; }
.record-link {
    background: none; border: 0; cursor: pointer;
    color: var(--accent-2); font-weight: 600; font-size: 0.82rem;
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: inherit;
}
.record-link:hover { color: var(--accent); }
.record-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--border);
}
.record-row:last-child { border-bottom: 0; }
.record-main { min-width: 0; }
.record-name { font-weight: 600; color: var(--ink); }
.record-meta { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 768px) {
    .report-strip { grid-template-columns: 1fr; }
}

/* Bookings */
.booking-card { display: flex; flex-direction: column; }
.booking-card.needs { border-left: 3px solid var(--watch); }
.booking-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--ink);
    margin: .15rem 0 .65rem;
    letter-spacing: -0.01em;
}
.booking-meta {
    display: flex; flex-direction: column; gap: .35rem;
    font-size: 0.88rem; color: var(--ink-2);
}
.booking-meta svg { color: var(--muted); flex-shrink: 0; }

.booking-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
}
.booking-row:last-child { border-bottom: 0; }
.booking-date {
    width: 52px; flex-shrink: 0;
    text-align: center;
    background: var(--accent-soft);
    border-radius: 10px;
    padding: .45rem 0;
    line-height: 1.1;
}
.booking-date.muted-date { background: var(--surface-2); }
.booking-date .bd-day {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.25rem; color: var(--accent);
}
.booking-date.muted-date .bd-day { color: var(--muted); }
.booking-date .bd-mon {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent-2);
}
.booking-date.muted-date .bd-mon { color: var(--muted); }
.booking-main { flex: 1; min-width: 0; }
.booking-name { font-weight: 600; color: var(--ink); }

@media (max-width: 768px) {
    .booking-row { flex-wrap: wrap; }
    .booking-row > .row { width: 100%; justify-content: space-between; }
}

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left; padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.table th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 600;
}
.table tr:last-child td { border-bottom: 0; }

/* Profile detail layout */
.detail-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
}
@media (max-width: 960px) {
    .detail-grid { grid-template-columns: 1fr; }
}

/* Settings list */
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}
.setting-row:last-child { border-bottom: 0; }
.setting-row .info { min-width: 0; }
.setting-row .info .title { font-weight: 600; color: var(--ink); }
.setting-row .info .desc { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

/* Responsive */
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar-search { display: none; }
}

@media (max-width: 768px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .menu-btn { display: none; }
    .brand-mobile { display: flex; }
    .brand-mobile .brand-name { font-size: 1.05rem; }

    .topbar {
        padding: 0 .85rem;
        height: 56px;
        border-bottom: 1px solid var(--border);
    }
    .topbar-left { gap: .5rem; }
    .topbar-right { display: none; }

    .content { padding: .85rem .85rem 6rem; }
    .bottom-nav { display: flex; }

    /* Stack overview's two-column grid on mobile */
    .content > section.grid[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
    .content > div.grid[style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }
    .content > section.grid[style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Full-width spanners must not create wide implicit columns once the
       grid collapses to a single column (caused horizontal overflow on
       Overview, which in turn broke the fixed bottom nav). */
    .grid > [style*="grid-column: span 3"],
    .grid > [style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }

    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }

    /* Tighter cards */
    .card { padding: 1rem; border-radius: 12px; }
    .card-pad-lg { padding: 1.15rem; }

    /* Condensed section headers */
    .section-head { gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
    .section-head h1 { font-size: 1.5rem; }
    .section-eyebrow { font-size: 0.68rem; margin-bottom: .15rem; }

    /* Greeting card: ring inline, lede hidden, fewer metas */
    .greeting-card {
        padding: 1.15rem;
        border-radius: 18px;
    }
    .greeting-card h1 { font-size: 1.5rem; }
    .greeting-card .lede { display: none; }
    .greeting-card .meta-row { margin-top: 1rem; gap: 1rem; }
    .greeting-card .meta:nth-child(3) { display: none; }
    .greeting-card .meta .value { font-size: 1.05rem; }
    .greeting-card > div[style*="grid-template-columns: 1fr auto"] {
        grid-template-columns: 1fr auto !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
    .score-ring { --size: 100px; }
    .score-ring .score-text .num { font-size: 1.7rem; }
    .score-ring .score-text .label { font-size: 0.52rem; max-width: 4.5em; text-align: center; margin-inline: auto; }
    .score-ring-wrap { gap: .75rem; }

    /* KPI tiles: tighter */
    .kpi .kpi-value { font-size: 1.3rem; }
    .kpi .kpi-value .unit { font-size: 0.78rem; }
    .kpi .kpi-label { font-size: 0.65rem; }
    .kpi .kpi-trend { font-size: 0.72rem; }

    /* Hide secondary text on biomarker rows + tighter layout */
    .bm-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name value"
            "bar bar";
        gap: .35rem;
        padding: .75rem 0;
    }
    .bm-row > .name-cell { grid-area: name; min-width: 0; }
    .bm-row > .bar-cell { grid-area: bar; }
    .bm-row > .bm-value-cell { grid-area: value; text-align: right; }
    .bm-row > .trend-cell { display: none; }
    .bm-name { font-size: 0.92rem; }
    .bm-cat { display: none; }
    .bm-value { font-size: 1rem; }
    .range-labels { display: none; }

    /* Recommendation cards: trim less-essential bits */
    .rec-card { padding: 1.15rem; gap: .75rem; }
    .rec-card .rec-title { font-size: 1.1rem; }
    .rec-card .rec-summary { font-size: .9rem; }

    /* Service cards: compact */
    .svc-cover { aspect-ratio: 21 / 9; padding: .65rem; }
    .svc-cover .cover-icon { width: 44px; height: 44px; border-radius: 10px; }
    .svc-cover .cover-icon svg { width: 22px; height: 22px; }
    .svc-body { padding: 1rem; gap: .55rem; }
    .svc-name { font-size: 1.1rem; }
    .svc-tagline { font-size: 0.88rem; }
    .svc-price .price { font-size: 1.2rem; }

    /* Plans: tighter */
    .plan-card { padding: 1.25rem; }
    .plan-price .num { font-size: 2rem; }

    /* Profile detail: stack and tighten */
    .detail-grid { gap: 1rem; }
    .avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }

    /* Settings rows */
    .setting-row { padding: .85rem 0; gap: .75rem; }
    .setting-row .info .desc { font-size: 0.78rem; }

    /* Tabs: shrink */
    .tabs .tab-btn { padding: .4rem .8rem; font-size: 0.8rem; }

    /* Tables: compact and let small content scroll if needed */
    .table th, .table td { padding: .55rem 0; font-size: 0.85rem; }

    /* Hide chart Y-axis labels squeezing on tiny screens � bands still draw */
    [data-chart] { height: 180px !important; }
}

@media (max-width: 480px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    h1 { font-size: 1.4rem; }
    .greeting-card h1 { font-size: 1.3rem; }
    .greeting-card .meta .value { font-size: 0.95rem; }
    .greeting-card .meta .label { font-size: 0.62rem; }
    .score-ring { --size: 86px; }
    .score-ring .score-text .num { font-size: 1.55rem; }
    .score-ring .score-text .label { max-width: 4.5em; text-align: center; margin-inline: auto; margin-top: 0px; }
    .greeting-card > div[style*="grid-template-columns: 1fr auto"] { gap: .75rem !important; }
}

/* =========================================================
   Auth (Signup) � standalone split layout
   ========================================================= */
.auth-body {
    /* Shared top offset so the aside copy lines up with the card's first line. */
    --auth-top-offset: max(4.5rem, min(calc((100vh - 640px) / 2 + 7vh), 24vh));
    /* Matching breathing room either side of the centre split. */
    --auth-gutter: 3.5rem;
    background: var(--grain-base);
    min-height: 100vh;
}
.auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.auth-aside {
    background:
        linear-gradient(140deg, rgba(21,32,43,0.50) 0%, rgba(94,107,100,0.42) 100%),
        url('/images/webapp/herobanners/leaf-unfurl-bg.webp');
    background-size: cover;
    background-position: center;
    color: white;
    padding: calc(var(--auth-top-offset) + 2.25rem) var(--auth-gutter) 2.5rem;
    display: flex; flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.auth-aside .brand {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
}
.auth-aside .brand .brand-mark { background: rgba(255,255,255,0.16); }
.auth-aside-inner {
    max-width: 460px;
}
/* No eyebrow pill marker on the aside copy. */
.auth-aside .section-eyebrow::before { content: none; }
.auth-aside h1 {
    color: white;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: .85rem;
}
.auth-bullets {
    list-style: none; margin: 1.75rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .6rem;
    color: #d8e3ec;
    font-size: 0.95rem;
}
.auth-bullets li { display: flex; align-items: center; gap: .65rem; }
.auth-bullet-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ffffff; flex-shrink: 0;
}
.auth-main {
    padding: var(--auth-top-offset) var(--auth-gutter) 3rem;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
}
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.25rem;
    width: 100%;
    max-width: 480px;
    position: relative;
}
.auth-method-tabs-float {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
}
.auth-card h2 { margin: .35rem 0 0; }
.auth-card .btn-accent {
    background: #1B1B1D;
    border-color: #1B1B1D;
    color: #ffffff;
}
.auth-card .btn-accent:hover {
    background: #000000;
    border-color: #000000;
}
.auth-alert {
    background: var(--alert-soft);
    color: var(--alert);
    border-radius: 10px;
    padding: .65rem .85rem;
    font-size: 0.88rem;
    font-weight: 500;
}
/* Same box, confirming rather than warning. */
.auth-alert.auth-alert-success { background: var(--optimal-soft); color: var(--optimal); }
.auth-consent {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: 0.85rem; color: var(--ink-2);
}
.auth-consent input { margin-top: 3px; }
.auth-divider {
    display: flex; align-items: center; gap: .65rem;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-fineprint { max-width: 480px; text-align: center; }
.auth-brand-mobile { display: none; }

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-main {
        padding: 1.25rem 1rem 2.5rem;
        gap: 1rem;
        align-items: center;
        justify-content: flex-start;
    }
    .auth-card { padding: 1.5rem; border-radius: 18px; }
    /* Make room for the floated Email/Mobile pill on the sign-in card. */
    .auth-card .section-eyebrow { margin-top: 0.5rem; }
    .auth-card h2 { margin-top: 1rem; }
    .auth-brand-mobile {
        display: inline-flex;
        align-self: center;
        padding: .25rem 0 .5rem;
        text-decoration: none;
    }
    .auth-brand-mobile .brand-mark { background: linear-gradient(135deg, #15202B 0%, #5E6B64 100%); color: white; }
    .auth-brand-mobile .brand-name { color: var(--ink); }
}

/* Required-field marker */
.req { color: var(--alert); font-weight: 600; }

/* Grouped checkbox sets for onboarding intake */
.ob-fieldset {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
    margin: 0;
}
.ob-fieldset > legend {
    padding: 0 .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-2, var(--text));
    letter-spacing: .01em;
}

/* Collapsible grouped checkbox sets */
.ob-collapse {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.ob-collapse > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ob-collapse > summary::-webkit-details-marker { display: none; }
.ob-collapse > summary:hover { background: var(--surface-2); }
.ob-collapse-chevron {
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--text-2, var(--ink-2));
    border-bottom: 2px solid var(--text-2, var(--ink-2));
    transform: rotate(45deg);
    transition: transform 180ms ease;
    flex: 0 0 auto;
    margin-top: -.2rem;
}
.ob-collapse[open] > summary {
    border-bottom: 1px solid var(--border);
}
.ob-collapse[open] .ob-collapse-chevron {
    transform: rotate(-135deg);
    margin-top: .2rem;
}
.ob-collapse > .ob-check-grid {
    padding: 1rem 1.1rem 1.1rem;
    margin-top: 0;
}
.ob-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .55rem .9rem;
    margin-top: .4rem;
}
.ob-check-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ob-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .92rem;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}
.ob-check input[type="checkbox"] {
    margin-top: .15rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

/* Collapsible Profile sections */
.profile-section {
    overflow: hidden;
}
.profile-section > summary.profile-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.profile-section > summary.profile-section-summary::-webkit-details-marker { display: none; }
.profile-section > summary.profile-section-summary > .card-title {
    margin: 0;
}
.profile-section > summary.profile-section-summary > .ob-collapse-chevron {
    margin-top: 0;
    border-right: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transition: transform 180ms ease;
}
.profile-section[open] > summary.profile-section-summary > .ob-collapse-chevron {
    transform: rotate(-135deg);
}

/* Top-right toast notifications */
.bt-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    pointer-events: none;
}
.bt-toast {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 220px;
    max-width: 360px;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    color: var(--ink);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.bt-toast.show {
    opacity: 1;
    transform: translateX(0);
}
.bt-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.bt-toast-success .bt-toast-icon { background: var(--accent, #2e7d5b); }
.bt-toast-error .bt-toast-icon { background: var(--alert, #c0392b); }
.bt-toast-success { border-color: color-mix(in srgb, var(--accent, #2e7d5b) 40%, var(--border)); }
.bt-toast-error { border-color: color-mix(in srgb, var(--alert, #c0392b) 40%, var(--border)); }
.bt-toast-text { line-height: 1.3; }

/* Invalid input highlight + styled validation tooltip (project-wide) */
.input-invalid,
.input.input-invalid,
.select.input-invalid,
.textarea.input-invalid {
    border-color: var(--alert) !important;
    box-shadow: 0 0 0 3px var(--alert-soft) !important;
}
.bt-tooltip {
    position: absolute;
    /* Above modal overlays (admin-modal: 90, pt-confirm: 120) so field
       validation shown for forms inside modals stays visible. */
    z-index: 150;
    display: flex; align-items: center; gap: .5rem;
    max-width: 320px;
    padding: .55rem .75rem;
    background: var(--ink);
    color: white;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}
.bt-tooltip.show { opacity: 1; transform: translateY(0); }
.bt-tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: var(--ink);
    border-radius: 2px;
}
.bt-tooltip-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--alert);
    color: white;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: var(--font-display);
}
.bt-tooltip-text { min-width: 0; }

@media (max-width: 900px) {
    .onboard-shell { grid-template-columns: 1fr; padding: 1.25rem 1rem 3rem; gap: 1.25rem; }
    .onboard-stepper { position: static; }
    .ob-steps-list { display: none; }
    .onboard-card { padding: 1.5rem; border-radius: 18px; min-height: 0; }
    .ob-actions { flex-direction: column; gap: .75rem; }
    .ob-actions .btn { width: 100%; }
    .ob-actions .ob-progress { order: -1; width: 100%; flex: none; }
    .onboard-header { padding: .85rem 1rem; }
    .topbar-onboard-btn span { display: none; }
}

/* Service detail modal */

.svc-card .svc-actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }

.svc-modal[hidden] { display: none; }
.svc-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center;
    padding: 1.25rem;
}
.svc-modal-scrim {
    position: absolute; inset: 0;
    background: rgba(13, 25, 35, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: svcModalFade 140ms ease-out;
}
.svc-modal-card {
    position: relative;
    background: var(--surface);
    color: var(--ink);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    width: min(820px, 100%);
    max-height: calc(100vh - 2.5rem);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: svcModalPop 180ms ease-out;
}
@keyframes svcModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes svcModalPop {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.svc-modal-close {
    position: absolute; top: .75rem; right: .75rem; z-index: 2;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.svc-modal-close:hover { background: #fff; transform: scale(1.04); }
.svc-modal-head {
    padding: 1.75rem 1.5rem 1.25rem;
    background-image: linear-gradient(135deg, rgba(15, 28, 48, 0.55), rgba(15, 28, 48, 0.35)), url('/images/webapp/herobanners/blue-astro-wide.webp');
    background-size: cover;
    background-position: center;
    color: #fff;
}
.svc-modal-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    opacity: .85;
    margin-bottom: .35rem;
}
.svc-modal-head h2 {
    margin: 0 0 .35rem;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #fff;
}
.svc-modal-tagline {
    margin: 0;

    max-width: 56ch;
    color: #ced8e4;
}
.svc-modal-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.svc-modal-meta .pill {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: transparent;
}
.svc-modal-meta .pill .dot { background: #fff; }
.svc-modal-meta .pill.gold {
    background: var(--gold-soft);
    color: var(--gold);
}
.svc-modal-meta .pill.gold .dot { background: var(--gold); }
.svc-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.svc-modal-section h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    color: var(--ink);
}
.svc-modal-section p { margin: 0; color: var(--ink); }
.svc-modal-list {
    margin: .25rem 0 0;
    padding-left: 1.15rem;
    color: var(--ink);
}
.svc-modal-list li { margin-bottom: .25rem; }
.svc-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.svc-modal-tile {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .85rem .95rem;
}
.svc-modal-tile-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
    color: var(--muted);
    margin-bottom: .3rem;
}
.svc-modal-tile-value { font-weight: 600; color: var(--ink); }
.svc-modal-tile-sub { margin: .25rem 0 0; font-size: .85rem; }
.svc-modal-tile-list {
    margin: .15rem 0 0;
    padding-left: 1.1rem;
    color: var(--ink);
}
.svc-modal-tile-list li { margin-bottom: .2rem; }
.svc-modal-cities {
    display: flex; flex-wrap: wrap; gap: .3rem;
    margin-top: .45rem;
}
.chip-static {
    display: inline-flex; align-items: center;
    padding: .25rem .55rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .78rem;
    color: var(--ink);
}
.svc-modal-safety {
    background: var(--watch-soft);
    border-radius: 14px;
    padding: .85rem 1rem;
}
.svc-modal-safety h3 { color: var(--watch); }
.svc-modal-safety p { color: var(--watch); }
.svc-modal-foot {
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    background: var(--surface);
}
.svc-modal-price { display: flex; flex-direction: column; line-height: 1.1; }
.svc-modal-price .price { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.svc-modal-price .member { font-size: .8rem; color: var(--muted); }
.svc-modal-actions { display: flex; gap: .5rem; }
body.svc-modal-open { overflow: hidden; }

/* The Health Map upsell modal wears the biological-age tile's artwork (the
   overview's yellow floral under a dark scrim) as one continuous backdrop, so
   the head keeps no artwork of its own and the foot stays transparent. The
   scrim runs a touch darker than the tile's so the fine print stays legible. */
#hm-upsell .svc-modal-card {
    background-color: transparent;
    background-image:
        linear-gradient(180deg, rgba(15,28,38,0.38) 0%, rgba(15,28,38,0.72) 100%),
        url('/images/webapp/herobanners/yellow-floral-bg.webp');
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-origin: border-box;
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}
#hm-upsell .svc-modal-head { background-image: none; }
#hm-upsell .svc-modal-foot {
    background: transparent;
    border-top-color: rgba(255,255,255,0.16);
}
#hm-upsell .svc-modal-section h3,
#hm-upsell .svc-modal-section p,
#hm-upsell .plan-features li { color: #fff; }
#hm-upsell .plan-features li svg { color: #fff; }
#hm-upsell .muted { color: rgba(255,255,255,0.78); }
#hm-upsell .btn.btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}
#hm-upsell .btn.btn-ghost:hover { background: rgba(255,255,255,0.14); color: #fff; }
@media (max-width: 640px) {
    .svc-modal { padding: 0; }
    .svc-modal-card { max-height: 100vh; border-radius: 0; width: 100%; }
    .svc-modal-grid { grid-template-columns: 1fr; }
    .svc-modal-head { padding: 1.5rem 1.25rem 1rem; }
    .svc-modal-body { padding: 1rem 1.25rem; }
    .svc-modal-foot { padding: .85rem 1rem; }
}

/* Service walkthrough video card (fslightbox trigger) */
.svc-video-card {
    position: relative;
    display: block;
    width: 100%;
    height: 160px;
    min-height: 160px;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 140ms ease, box-shadow 140ms ease;
    isolation: isolate;
    background: var(--surface-2);
}
.svc-video-image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 280ms ease;
}
.svc-video-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,28,48,.25) 0%, rgba(15,28,48,.55) 100%);
    z-index: 1;
}
.svc-video-card:hover,
.svc-video-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: #fff;
    text-decoration: none;
}
.svc-video-card:hover .svc-video-image { transform: scale(1.03); }
.svc-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent);
    display: grid; place-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: transform 140ms ease, background 140ms ease;
}
.svc-video-card:hover .svc-video-play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.svc-video-play svg { margin-left: 3px; }
.svc-video-text {
    position: absolute;
    left: 1rem; bottom: .75rem;
    z-index: 2;
}
.svc-video-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(15, 28, 48, 0.55);
    padding: .3rem .6rem;
    border-radius: 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Welcome popup (first visit after signup) */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(20, 30, 40, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: welcomeFade 160ms ease;
}
.welcome-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    animation: welcomeRise 200ms ease;
}
.welcome-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.welcome-close:hover { background: var(--border); color: var(--ink); }
.welcome-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent-2);
    margin-bottom: .35rem;
}
.welcome-heading {
    font-family: var(--font-display);
    font-weight: 500;
    margin: 0 0 .5rem;
}
.welcome-lede {
    color: var(--muted);
    margin: 0 0 1.25rem;
}
.welcome-steps {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.welcome-steps li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}
.welcome-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-size: .85rem;
}
.welcome-steps strong { display: block; color: var(--ink); margin-bottom: .15rem; }
.welcome-steps p { margin: 0; color: var(--muted); font-size: .9rem; }
.welcome-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
}
@keyframes welcomeFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes welcomeRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Biological age card (Overview) */
.bioage-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bioage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.bioage-value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2.1rem;
    color: var(--ink);
    line-height: 1.1;
}
.bioage-value .unit {
    font-size: 0.95rem;
    color: var(--muted);
    font-family: var(--font-sans);
    margin-left: .25rem;
}
/* Placeholder shown before a biological age can be calculated. */
.bioage-value.bioage-pending {
    font-size: 1.25rem;
    color: var(--muted);
}

/* Onboarding wizard modal.
   Prefixed obw- rather than ob-, which the full-page onboarding flow above
   already owns (.ob-step, .ob-actions, .ob-progress). */
.obw-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 16, 22, 0.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 1rem 2rem; overflow-y: auto;
}
.obw-overlay[hidden] { display: none; }
.obw-dialog { width: min(620px, 100%); padding: 1.6rem 1.7rem 1.5rem; }
.obw-step[hidden] { display: none; }
.obw-progress {
    height: 6px; border-radius: 14px; background: var(--surface-2);
    overflow: hidden;
}
.obw-progress-fill {
    height: 100%; border-radius: 14px; background: var(--accent);
    transition: width 240ms ease;
}
.obw-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-top: 1.3rem;
}
.obw-choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.obw-choice {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .8rem; border-radius: 14px;
    border: 1px solid var(--border-strong); background: var(--surface);
    font-size: .86rem; cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.obw-choice:hover { background: var(--surface-2); }
.obw-choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong, var(--accent));
    font-weight: 600;
}
.obw-choice input { accent-color: var(--accent); }
.obw-done { text-align: center; padding: 1.5rem 0 .5rem; }
.obw-done-mark {
    width: 62px; height: 62px; border-radius: 50%;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.bioage-delta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem .7rem;
    border-radius: 14px;
}
.bioage-delta.younger { color: var(--optimal); background: var(--optimal-soft); }
.bioage-delta.older { color: var(--alert); background: var(--alert-soft); }

.bioage-track-wrap { margin-top: .25rem; }
.bioage-track {
    position: relative;
    height: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.bioage-fill {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: linear-gradient(to right, var(--accent-soft), var(--accent-2));
    border-radius: 14px;
}
.bioage-marker {
    position: absolute; top: -4px;
    width: 16px; height: 16px;
    background: var(--accent);
    border: 3px solid var(--surface);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transform: translateX(-50%);
    z-index: 2;
}
.bioage-tick {
    position: absolute; top: -3px;
    width: 2px; height: 14px;
    background: var(--ink);
    transform: translateX(-50%);
    z-index: 1;
}
.bioage-tick-label {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
}
.bioage-note {
    margin: 0;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Key recommendation card (sits beside biological age) */
.rec-key-card {
    gap: .55rem;
}
.rec-key-card .rec-key-title {
    margin: .15rem 0 0;
    font-size: 1.1rem;
    color: var(--ink);
}
.rec-key-card .rec-cat {
    align-self: flex-start;
}
.rec-key-summary {
    margin: 0;
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.45;
}
.rec-key-outcome {
    margin-top: auto;
    padding: .6rem .75rem;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.rec-key-outcome-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
}
.rec-key-outcome-value {
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.rec-key-cta {
    align-self: flex-start;
    margin-top: auto;
}

/* Upcoming tasks (Overview) */
.task-list {
    display: flex;
    flex-direction: column;
}
.task-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: 0; }
.task-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
}
.task-icon.warn { background: var(--watch-soft); color: var(--watch); }
.task-icon.ok { background: var(--optimal-soft); color: var(--optimal); }
.task-main { flex: 1 1 auto; min-width: 0; }
.task-title { font-weight: 600; color: var(--ink); }
.task-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.task-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.task-empty {
    text-align: center;
    padding: 1.5rem 1rem .5rem;
}
@media (max-width: 640px) {
    .task-action .pill { display: none; }
}

/* Responsive button labels (full on desktop, short on mobile) */
.label-short { display: none; }
@media (max-width: 640px) {
    .bioage-row { grid-template-columns: 1fr !important; }
    .label-full { display: none; }
    .label-short { display: inline; }
}



/* ============================== Admin panel ============================== */
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th {
    text-align: left; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
    padding: .6rem .75rem; border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
.admin-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table-wrap { overflow-x: auto; }

.btn.btn-danger { background: var(--alert); color: #fff; }
.btn.btn-danger:hover { background: #9C2B27; color: #fff; }
.btn.btn-danger-ghost { background: transparent; color: var(--alert); border-color: var(--alert); }
.btn.btn-danger-ghost:hover { background: var(--alert-soft); color: var(--alert); }

/* Simple centred modal (delete confirmations, booking scheduling) */
.admin-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.admin-modal[hidden] { display: none; }
.admin-modal-scrim { position: absolute; inset: 0; background: rgba(10, 16, 22, 0.55); }
.admin-modal-card {
    position: relative; width: 100%; max-width: 480px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 1.5rem; max-height: 90vh; overflow-y: auto;
}

/* SweetAlert-style confirmation dialog (ptConfirm in site.js). */
html.pt-confirm-open { overflow: hidden; }
.pt-confirm-overlay {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(10, 16, 22, 0.55);
    opacity: 0;
    transition: opacity 180ms ease;
}
.pt-confirm-overlay.show { opacity: 1; }
.pt-confirm {
    width: min(420px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.9rem 1.75rem 1.55rem;
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 180ms ease;
}
.pt-confirm-overlay.show .pt-confirm { opacity: 1; transform: none; }
.pt-confirm-icon {
    width: 64px; height: 64px; border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.pt-confirm-danger .pt-confirm-icon { background: var(--alert-soft); color: var(--alert); }
.pt-confirm-icon svg { width: 30px; height: 30px; }
.pt-confirm-title { margin: 0 0 .4rem; font-size: 1.3rem; }
.pt-confirm-message { margin: 0 auto; max-width: 34ch; color: var(--muted); font-size: 0.94rem; line-height: 1.55; overflow-wrap: anywhere; }
.pt-confirm-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.pt-confirm-actions .btn { min-width: 116px; justify-content: center; }

/* Admin detail page tabs */
.admin-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.admin-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border-radius: 14px; cursor: pointer;
    font-weight: 600; font-size: 0.86rem; font-family: inherit;
    background: var(--surface); color: var(--ink-2);
    border: 1px solid var(--border-strong);
    transition: background 120ms ease, color 120ms ease;
}
.admin-tab:hover { background: var(--surface-2); }
.admin-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The provider form's per-service requirement blocks use the hidden attribute,
   which .grid's display:grid would otherwise override. */
[data-svc-reqs][hidden] { display: none; }

.admin-kv { display: grid; grid-template-columns: 160px 1fr; gap: .35rem .75rem; font-size: 0.92rem; }
.admin-kv dt { color: var(--muted); font-weight: 600; }
.admin-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 720px) {
    .admin-kv { grid-template-columns: 1fr; gap: .1rem; }
    .admin-kv dt { margin-top: .5rem; }
}

/* ========================= Precursor DICOM viewer ========================= */
.pdv-modal {
    --pdv-bg: #0D141B;
    --pdv-surface: #15202B;
    --pdv-border: rgba(255, 255, 255, 0.09);
    --pdv-ink: #E9EEF4;
    --pdv-muted: #93A3B4;
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.pdv-modal[hidden] { display: none; }
body.pdv-open { overflow: hidden; }

.pdv-scrim { position: absolute; inset: 0; background: rgba(8, 12, 17, 0.72); backdrop-filter: blur(2px); }

.pdv-card {
    position: relative; display: flex; flex-direction: column;
    width: min(1180px, 100%); height: min(92vh, 100%);
    background: var(--pdv-surface); color: var(--pdv-ink);
    border: 1px solid var(--pdv-border); border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.pdv-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--pdv-border);
}
.pdv-eyebrow {
    font-size: .7rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent, #2E7D5B);
    filter: brightness(1.5);
}
.pdv-title { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 600; color: var(--pdv-ink); }
.pdv-meta { margin-top: .15rem; font-size: .8rem; color: var(--pdv-muted); }
.pdv-head-actions { display: flex; gap: .5rem; flex-shrink: 0; }

.pdv-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 14px;
    font-size: .82rem; font-weight: 600; font-family: inherit;
    color: var(--pdv-ink); background: transparent;
    border: 1px solid var(--pdv-border); cursor: pointer; text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}
.pdv-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--pdv-ink); text-decoration: none; }
.pdv-close { padding: .45rem .55rem; }

.pdv-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--pdv-border);
    background: rgba(255, 255, 255, 0.02);
}
.pdv-tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.pdv-tool {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .9rem; border-radius: 14px;
    font-size: .82rem; font-weight: 600; font-family: inherit;
    color: var(--pdv-muted); background: transparent;
    border: 1px solid var(--pdv-border); cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.pdv-tool:hover { color: var(--pdv-ink); background: rgba(255, 255, 255, 0.06); }
.pdv-tool.active { background: var(--accent, #2E7D5B); border-color: transparent; color: #fff; }

.pdv-toolbar-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pdv-toolbar-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pdv-muted); }
.pdv-wl-wrap { display: inline-flex; align-items: center; gap: .4rem; }
.pdv-wl-wrap[hidden] { display: none; }
.pdv-wl-input {
    width: 76px; background: var(--pdv-bg); color: var(--pdv-ink);
    border: 1px solid var(--pdv-border); border-radius: 8px;
    font-family: inherit; font-size: .82rem; padding: .3rem .5rem;
    font-variant-numeric: tabular-nums;
}
.pdv-wl-input:focus { outline: 0; border-color: var(--accent, #2E7D5B); }

.pdv-preset-wrap { display: inline-flex; align-items: center; gap: .5rem; }
.pdv-preset {
    background: var(--pdv-bg); color: var(--pdv-ink);
    border: 1px solid var(--pdv-border); border-radius: 8px;
    font-family: inherit; font-size: .82rem; padding: .3rem .5rem;
}

.pdv-slice-wrap { display: inline-flex; align-items: center; gap: .6rem; }
.pdv-slice { width: 160px; accent-color: var(--accent, #2E7D5B); }
.pdv-slice-indicator { font-size: .8rem; color: var(--pdv-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pdv-stage-wrap { position: relative; flex: 1; min-height: 320px; background: var(--pdv-bg); overflow: hidden; }
.pdv-stage { position: absolute; inset: 0; }
.pdv-stage canvas { cursor: crosshair; }

.pdv-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .85rem; text-align: center; padding: 2rem;
    background: var(--pdv-bg); color: var(--pdv-muted); font-size: .9rem;
}
.pdv-overlay[hidden] { display: none; }
.pdv-overlay p { margin: 0; max-width: 44ch; }
.pdv-error-hint { font-size: .8rem; opacity: .75; }

.pdv-progress {
    width: min(320px, 70%); height: 6px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.pdv-progress-bar {
    height: 100%; width: 0; border-radius: 14px;
    background: var(--accent, #2E7D5B);
    transition: width 200ms ease;
}

.pdv-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .6rem 1.25rem;
    border-top: 1px solid var(--pdv-border);
}
.pdv-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.pdv-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .25rem .7rem; border-radius: 14px;
    border: 1px solid var(--pdv-border); font-size: .75rem;
}
.pdv-chip-label { color: var(--pdv-muted); font-weight: 600; }
.pdv-chip-value { color: var(--pdv-ink); }
.pdv-hint { font-size: .72rem; color: var(--pdv-muted); white-space: nowrap; }

@media (max-width: 720px) {
    .pdv-modal { padding: 0; }
    .pdv-card { width: 100%; height: 100%; border-radius: 0; border: 0; }
    .pdv-slice { width: 110px; }
    .pdv-hint { display: none; }
}

/* ================= Hover tooltip ([data-tip], project-wide) =================
   The bubble is appended to <body> and positioned fixed by site.js, so a
   scrolling ancestor (e.g. .admin-table-wrap) can't clip it. Distinct from
   .bt-tooltip, which is the form-validation bubble. */
.bt-tip {
    position: fixed;
    z-index: 200;
    max-width: 320px;
    padding: .5rem .7rem;
    background: var(--ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.45;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    /* Honour newlines in the tip text without needing markup. */
    white-space: pre-line;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
}
.bt-tip.show { opacity: 1; transform: translateY(0); }
.bt-tip::after {
    content: "";
    position: absolute;
    /* site.js points the arrow at the trigger, even when the bubble is
       clamped away from the viewport edge. */
    left: var(--tip-arrow-x, 50%);
    margin-left: -5px;
    width: 10px; height: 10px;
    background: var(--ink);
    border-radius: 2px;
    transform: rotate(45deg);
    bottom: -4px;
}
.bt-tip.bt-tip-below::after { bottom: auto; top: -4px; }
[data-tip] { cursor: help; }

/* ========================= Patient journey =========================
   Shared by the provider portal's patient modal and the admin user page. */
.pj-plan { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.pj-lane { margin-top: 1rem; }
.pj-lane h5 {
    display: flex; align-items: center; gap: .45rem;
    margin: 0 0 .5rem; font-size: .8rem;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.pj-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4em; padding: 0 .35em;
    border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .72rem; letter-spacing: 0; color: var(--ink-2);
}
.pj-item {
    border: 1px solid var(--border); border-radius: 10px;
    padding: .55rem .7rem; background: var(--surface);
}
.pj-item + .pj-item { margin-top: .4rem; }
.pj-item-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap;
}
.pj-when { font-size: .85rem; color: var(--ink); margin-top: .1rem; }

/* ========================= Precursor record viewer =========================
   PDFs and images in a popup — the DICOM viewer's lighter sibling, sharing
   its dark visual language. z-index sits with .pdv-modal, above the vendor
   patient modal (.admin-modal, z-90) it can be opened from. */
.prv-modal {
    --prv-bg: #0D141B;
    --prv-surface: #15202B;
    --prv-border: rgba(233, 238, 244, 0.14);
    --prv-ink: #E9EEF4;
    --prv-muted: #93A3B4;
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.prv-modal[hidden] { display: none; }
body.prv-open { overflow: hidden; }
.prv-scrim {
    position: absolute; inset: 0;
    background: rgba(8, 12, 17, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.prv-card {
    position: relative;
    width: min(1100px, 100%); height: min(92vh, 100%);
    display: flex; flex-direction: column;
    background: var(--prv-surface);
    border: 1px solid var(--prv-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: var(--prv-ink);
}
.prv-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--prv-border);
}
.prv-eyebrow {
    text-transform: uppercase; letter-spacing: .08em;
    font-size: .68rem; color: var(--prv-muted); margin-bottom: .2rem;
}
.prv-title { margin: 0; font-size: 1.15rem; line-height: 1.25; color: var(--prv-ink); }
.prv-meta { font-size: .78rem; color: var(--prv-muted); margin-top: .2rem; }
.prv-head-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.prv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 10px;
    border: 1px solid var(--prv-border);
    background: transparent; color: var(--prv-ink);
    font-size: .8rem; font-weight: 600; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: background 120ms ease;
}
.prv-btn:hover { background: rgba(233, 238, 244, 0.08); color: var(--prv-ink); }
.prv-stage-wrap { position: relative; flex: 1; min-height: 320px; background: var(--prv-bg); }
.prv-stage { position: absolute; inset: 0; display: flex; }
.prv-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.prv-stage.prv-stage-image { align-items: center; justify-content: center; padding: 1rem; }
.prv-stage.prv-stage-image img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: 6px;
}
.prv-overlay {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; text-align: center; padding: 1rem;
    background: var(--prv-bg);
}
.prv-overlay[hidden] { display: none; }
.prv-overlay-text { font-size: .9rem; color: var(--prv-ink); }
.prv-overlay-hint { font-size: .76rem; color: var(--prv-muted); }
.prv-foot {
    display: flex; justify-content: flex-end;
    padding: .5rem 1.25rem;
    border-top: 1px solid var(--prv-border);
}
.prv-hint { font-size: .72rem; color: var(--prv-muted); }
@media (max-width: 720px) {
    .prv-modal { padding: 0; }
    .prv-card { width: 100%; height: 100%; border-radius: 0; border: 0; }
    .prv-hint { display: none; }
}

/* ========================= City multi-select ========================= */
.city-select { position: relative; }
.city-select-btn {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; text-align: left;
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--border-strong); border-radius: 10px;
    padding: .55rem .85rem; font-family: inherit; font-size: .9rem;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.city-select-btn.has-value { color: var(--ink); }
.city-select-btn:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.city-select-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.city-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.city-select-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: .5rem;
}
.city-select-panel[hidden] { display: none; }
.city-select-filter {
    width: 100%; margin-bottom: .4rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 8px;
    padding: .4rem .6rem; font-family: inherit; font-size: .85rem;
}
.city-select-filter:focus { outline: 0; border-color: var(--accent); }
.city-select-list { max-height: 240px; overflow-y: auto; }
.city-select-group {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
    padding: .45rem .5rem .2rem;
}
.city-select-option {
    display: flex; align-items: center; gap: .55rem;
    padding: .32rem .5rem; border-radius: 7px;
    font-size: .88rem; color: var(--ink); cursor: pointer;
}
.city-select-option:hover { background: var(--accent-soft); }
.city-select-option[hidden] { display: none; }
.city-select-option input { accent-color: var(--accent); }

/* Provider service-location rows: line 1 is the address, line 2 the contact. */
.loc-row {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr .9fr .55fr .65fr auto;
    gap: .4rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .5rem;
}
.loc-row .loc-email { grid-column: 1 / span 3; }
.loc-row .loc-phone { grid-column: 4 / span 2; }
@media (max-width: 900px) {
    .loc-row { grid-template-columns: 1fr 1fr; }
    .loc-row .loc-email { grid-column: span 2; }
    .loc-row .loc-phone { grid-column: span 2; }
    .loc-row .btn { justify-self: end; }
}

/* Provider booking-window rows */
.bw-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    border: 1px solid var(--border); border-radius: 10px; padding: .45rem .55rem;
}
.bw-days { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.bw-day { position: relative; cursor: pointer; }
.bw-day input { position: absolute; opacity: 0; pointer-events: none; }
.bw-day span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; padding: .3rem .45rem;
    border: 1px solid var(--border-strong); border-radius: 14px;
    font-size: .74rem; font-weight: 600; color: var(--muted);
    transition: background 100ms ease, color 100ms ease;
}
.bw-day:hover span { background: var(--surface-2); }
.bw-day:has(input:checked) span {
    background: var(--accent); border-color: transparent; color: #fff;
}
.bw-day:has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--accent-soft); }
.bw-time { width: 108px; flex: 0 0 auto; }
/* Typed pathology results: compact, operational extensions of the incumbent shell. */
.result-admin-head { align-items:flex-start; }
.result-admin-head .back-link { display:inline-block; margin-bottom:.55rem; font-size:.86rem; font-weight:600; }
.result-admin-head h1 { margin-bottom:.3rem; }
.result-target { display:inline-block; max-width:min(60vw, 42rem); overflow-wrap:anywhere; padding:.28rem .5rem; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink-2); font-size:.76rem; }
.result-entry-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:1.25rem; align-items:start; }
.result-form { display:grid; gap:1rem; margin-top:1.25rem; }
.result-form label { display:grid; gap:.38rem; font-size:.84rem; font-weight:650; color:var(--ink-2); }
.result-form .required-marker { color:var(--alert); }
.result-form input, .result-form select, .result-form textarea { width:100%; min-height:44px; padding:.65rem .72rem; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; transition:border-color 120ms ease, box-shadow 120ms ease; }
.result-form textarea { min-height:190px; resize:vertical; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; line-height:1.5; }
.result-form :is(input, select, textarea):focus-visible, .result-catalogue-row summary:focus-visible { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.result-fieldset { min-width:0; margin:0; padding:0; border:0; }
.result-fieldset + .result-fieldset { padding-top:1rem; border-top:1px solid var(--border); }
.result-fieldset legend { padding:0; color:var(--ink); font-size:.95rem; font-weight:650; }
.result-fieldset-help { margin:.18rem 0 .8rem; color:var(--muted); font-size:.8rem; }
.result-fieldset > label + .form-grid-2, .result-fieldset > .form-grid-2, .result-fieldset > label:last-child { margin-top:.85rem; }
.form-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.result-span-2 { grid-column:1 / -1; }
.result-submit { justify-self:start; min-height:44px; }
.result-or { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.result-or::before,.result-or::after { content:""; height:1px; flex:1; background:var(--border); }
.result-schema { margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; }
.result-schema summary,.result-history summary,.result-catalogue-row summary { cursor:pointer; font-weight:650; }
.result-schema summary { min-height:44px; display:flex; align-items:center; }
.result-schema code { display:block; overflow:auto; white-space:normal; overflow-wrap:anywhere; font-size:.72rem; line-height:1.6; padding:.65rem; border-radius:var(--radius-sm); background:var(--surface-2); }
.result-preview { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; margin:0 0 1.25rem; padding:1.25rem; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:var(--radius); background:var(--accent-soft); box-shadow:var(--shadow-md); }
.result-preview h2,.result-preview p { margin:.1rem 0; }
.result-preview-rows { grid-column:1/-1; display:grid; gap:.4rem; max-height:210px; overflow:auto; padding-top:.75rem; border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
.result-preview-rows div { display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; }
.result-tile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1rem; }
.result-tile { padding:1.2rem; border-radius:14px; background:var(--surface); box-shadow:0 8px 26px rgba(20,30,38,.08); }
.result-tile header { display:flex; align-items:start; justify-content:space-between; gap:.8rem; }
.result-tile h2 { margin:0; font-size:1.05rem; }
.result-tile header p { margin:.2rem 0 0; color:var(--muted); font-size:.74rem; overflow-wrap:anywhere; }
.result-status,.result-known,.result-unknown { display:inline-flex; padding:.24rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:capitalize; background:var(--surface-2); color:var(--ink-2); }
.result-representations { display:grid; gap:.75rem; margin:1rem 0 0; }
.result-representation { padding:.8rem; border-radius:12px; background:var(--surface-2); }
.result-representation-head { display:flex; justify-content:space-between; align-items:start; gap:.75rem; }
.result-current { display:flex; align-items:baseline; gap:.45rem; }
.result-current strong { font-family:var(--font-display); font-size:2rem; font-variant-numeric:tabular-nums; }
.result-current span { color:var(--muted); }
.result-context { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0; }
.result-context div { min-width:0; }
.result-context dt,.result-definition-body dt { color:var(--muted); font-size:.72rem; font-weight:650; }
.result-context dd,.result-definition-body dd { margin:.12rem 0 0; overflow-wrap:anywhere; font-size:.84rem; }
.result-history { margin-top:1rem; border-top:1px solid var(--border); padding-top:.8rem; }
.result-history ol { margin:.7rem 0 0; padding:0; list-style:none; }
.result-history li { display:grid; grid-template-columns:7rem 1fr; gap:.15rem .7rem; padding:.55rem 0; border-top:1px solid var(--border); font-size:.82rem; }
.result-history li small { grid-column:2; color:var(--muted); overflow-wrap:anywhere; }
.result-history li.superseded { opacity:.62; }
.result-empty { max-width:68ch; margin-bottom:1.5rem; padding:1.5rem; border-radius:14px; background:var(--surface-2); }
.result-empty h2 { margin-top:0; }
.result-catalogue { margin-top:2rem; }
.result-catalogue-list { border-top:1px solid var(--border); }
.result-catalogue-row { border-bottom:1px solid var(--border); }
.result-catalogue-row > summary { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.9rem .25rem; list-style-position:outside; }
.result-catalogue-row summary > span:first-child { display:grid; gap:.18rem; }
.result-catalogue-row summary small { color:var(--muted); overflow-wrap:anywhere; }
.result-known { background:var(--success-soft); color:var(--success); }
.result-unknown { white-space:nowrap; }
.result-definition-body { padding:0 .25rem 1rem; }
.result-definition-body dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:.6rem 0 0; padding:.8rem; border-radius:12px; background:var(--surface-2); }
.result-definition-body dl > div { min-width:0; }

@media (max-width: 820px) {
    .result-entry-grid { grid-template-columns:1fr; }
    .result-preview { grid-template-columns:1fr; }
    .result-preview-rows { grid-column:1; }
    .result-definition-body dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
    .form-grid-2,.result-context { grid-template-columns:1fr; }
    .result-span-2 { grid-column:auto; }
    .result-preview-rows div { display:grid; gap:.15rem; }
    .result-definition-body dl { grid-template-columns:1fr; }
}