@font-face {
    font-family: 'Canela';
    src: url('/Canela-Medium-Web.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Canela';
    src: url('/Canela-RegularItalic-Web.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ─── Design tokens ──────────────────────────────────────── */

:root {
    /* Brand + semantic colors — identical in both themes */
    --vith-cream:      #F7F4EE;
    --vith-white:      #FDFCFA;
    --vith-navy:       #0F1E33;
    --vith-navy-mid:   #1A2E4A;
    --vith-gold:       #C9A84C;
    --vith-gold-pale:  #F5E9C8;
    --vith-cream-warm: #EDE8DF;

    --vith-success:    #2D6A4F;
    --vith-alert:      #B45309;
    --vith-danger:     #991B1B;
    --vith-info:       #1E40AF;
    --vith-neutral:    #6B7280;

    --radius-badge:    3px;
    --radius-btn:      4px;
    --radius-card:     8px;
    --radius-feature:  12px;
    --radius-pill:     9999px;

    --border-hairline: 0.5px solid var(--vith-border);

    --shadow-sm:  0 2px 8px rgba(15, 30, 51, 0.04);
    --shadow-md:  0 4px 16px rgba(15, 30, 51, 0.06);
    --shadow-lg:  0 12px 32px rgba(15, 30, 51, 0.08);

    --transition: 200ms ease;

    /* Motion tokens (Layer 1) — one rhythm across the app. ≤300ms for interactive
       feedback per VIT-82; --duration-crawl is for reveal animations only. */
    --ease-out-cubic: cubic-bezier(0.2, 0, 0, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:  120ms;
    --duration-base:  200ms;
    --duration-slow:  300ms;
    --duration-crawl: 900ms;

    /* 8pt spacing scale (Layer 1) — new layout references these, not raw px. */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs:  12px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Radius aliases (Layer 1) — semantic names alongside the existing scale. */
    --radius-sm: var(--radius-btn);
    --radius-md: var(--radius-card);
    --radius-lg: var(--radius-feature);

    --font-display: 'Canela', 'Cormorant Garamond', 'Iowan Old Style', Baskerville, serif;
    --font-body:    'Geist', -apple-system, 'Helvetica Neue', sans-serif;
    --font-mono:    'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ─── Theme tokens (dark-first, VITH-STYLE locked 2026-05-20) ──
   Every component references these role tokens, never raw hex, so
   switching data-theme requires no component changes. Gold and the
   semantic colors above never change between modes.                */

:root,
[data-theme="dark"] {
    --vith-bg:         #0F1E33;
    --vith-surface:    #1A2E4A;
    --vith-spotlight:  #1A2E4A; /* elevated navy chrome (nav, decision card) */
    --vith-text:       #F7F4EE;
    --vith-text-muted: rgba(247, 244, 238, 0.6);
    --vith-border:     rgba(247, 244, 238, 0.1);
}

[data-theme="light"] {
    --vith-bg:         #F7F4EE;
    --vith-surface:    #FDFCFA;
    --vith-spotlight:  #0F1E33; /* navy chrome on a light page */
    --vith-text:       #0F1E33;
    --vith-text-muted: #6B7280;
    --vith-border:     #EDE8DF;
}

/* ─── Reset ──────────────────────────────────────────────── */

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

/* ─── Base ───────────────────────────────────────────────── */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: var(--vith-text);
    background-color: var(--vith-bg);
    overflow-x: hidden;
}

/* ─── Type scale ─────────────────────────────────────────── */

.t-display {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.t-display-italic {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 42px;
    line-height: 1.1;
}

h1, .t-h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h2, .t-h2 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
}

h3, .t-h3 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
}

.t-body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
}

.t-ui {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
}

.t-caption {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: var(--vith-text-muted);
}

.t-eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.t-mono {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 13px;
}

/* ─── Layout ─────────────────────────────────────────────── */

.vith-page {
    min-height: 100vh;
    background-color: var(--vith-bg);
}

.vith-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ─── Cards ──────────────────────────────────────────────── */

.vith-card {
    background-color: var(--vith-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-card);
    padding: 20px;
}

.vith-card-feature {
    background-color: var(--vith-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-feature);
    padding: 20px;
}

/* ─── Metric cards ───────────────────────────────────────── */

.vith-metric {
    background-color: var(--vith-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-card);
    padding: 20px;
}

.vith-metric-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vith-text-muted);
    margin-bottom: 8px;
}

.vith-metric-value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    color: var(--vith-text);
}

.vith-metric-delta-positive {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--vith-success);
}

.vith-metric-delta-negative {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--vith-neutral);
}

/* ─── Buttons ────────────────────────────────────────────── */

.vith-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    border: var(--border-hairline);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.vith-btn-primary {
    background-color: var(--vith-text);
    color: var(--vith-bg);
    border-color: var(--vith-text);
    transition: opacity var(--transition);
}

.vith-btn-primary:hover {
    opacity: 0.88;
}

.vith-btn-ghost {
    background-color: transparent;
    color: var(--vith-text);
    border-color: var(--vith-border);
}

.vith-btn-ghost:hover {
    background-color: var(--vith-border);
}

.vith-btn-gold {
    background-color: var(--vith-gold);
    color: var(--vith-navy);
    border-color: var(--vith-gold);
}

.vith-btn-gold:hover {
    background-color: #B8943E;
    border-color: #B8943E;
}

/* ─── Nav ────────────────────────────────────────────────── */

.vith-nav {
    background-color: var(--vith-spotlight);
    border-bottom: 0.5px solid var(--vith-border);
    height: 60px;
    display: flex;
    align-items: center;
}

.vith-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.vith-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.vith-nav-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(247, 244, 238, 0.6);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-btn);
    transition: color var(--transition), background-color var(--transition);
}

.vith-nav-link:hover {
    color: var(--vith-cream);
    background-color: rgba(247, 244, 238, 0.06);
}

.vith-nav-link.active {
    color: var(--vith-cream);
    background-color: rgba(247, 244, 238, 0.1);
}

/* ─── Badges ─────────────────────────────────────────────── */

.vith-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-badge);
}

.vith-badge-gold {
    background-color: var(--vith-gold-pale);
    color: var(--vith-navy);
}

.vith-badge-success {
    background-color: #D1FAE5;
    color: var(--vith-success);
}

.vith-badge-alert {
    background-color: #FEF3C7;
    color: var(--vith-alert);
}

/* ─── Dividers ───────────────────────────────────────────── */

.vith-divider {
    border: none;
    border-top: var(--border-hairline);
    margin: 20px 0;
}

/* ─── Loading ────────────────────────────────────────────── */

.vith-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 0;
}

.vith-loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--vith-gold);
    animation: vith-pulse 1.2s ease infinite;
}

.vith-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.vith-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes vith-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40%           { opacity: 1;    transform: scale(1);   }
}

/* ─── Inputs ─────────────────────────────────────────────── */

.vith-input {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 15px;
    color: var(--vith-text);
    background-color: var(--vith-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-btn);
    padding: 10px 14px;
    width: 100%;
    outline: none;
    transition: border-color var(--transition);
}

.vith-input:focus {
    border-color: var(--vith-text);
}

.vith-input::placeholder {
    color: var(--vith-text-muted);
    font-weight: 300;
}

/* ─── Utilities ──────────────────────────────────────────── */

.vith-gold  { color: var(--vith-gold); }
.vith-muted { color: var(--vith-text-muted); }

.vith-surface-dark {
    background-color: var(--vith-spotlight);
    color: var(--vith-cream);
}

.vith-surface-dark .t-eyebrow {
    color: var(--vith-gold);
}


#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--vith-danger);
    color: var(--vith-white);
    padding: 12px 32px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    z-index: 9999;
}

#blazor-error-ui a.reload {
    color: var(--vith-gold-pale);
    margin-left: 8px;
}
/* ─── Launch splash (WASM boot + every auth-redirect step) ───────────────
   Spark lockup per native/reference. Wordmark fades in, spark ignites
   (scale + counter-rotate), rays shimmer with staggered delays, core
   breathes, gold sweep on the loading rail. Safe-area aware for iOS.
   Reduced-motion override at the bottom freezes everything but the rail. */

.vith-launch {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding:
        calc(env(safe-area-inset-top) + 8px)
        env(safe-area-inset-right)
        calc(env(safe-area-inset-bottom) + 8px)
        env(safe-area-inset-left);
    background:
        radial-gradient(70vmin 52vmin at 50% 40%, rgba(201,168,76,0.12), transparent 64%),
        radial-gradient(120vmin 80vmin at 50% 122%, rgba(201,168,76,0.06), transparent 70%),
        #0F1E33;
    overflow: hidden;
    z-index: 9999;
    -webkit-font-smoothing: antialiased;
}

.vith-launch-word {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 8.6vmin, 46px);
    letter-spacing: 0.40em;
    text-indent: 0.40em;
    color: #F7F4EE;
    line-height: 1;
    animation: vith-word-in 1.1s cubic-bezier(.2,.7,.2,1) 0.5s backwards;
}

.vith-launch-spark {
    width: clamp(150px, 42vmin, 250px);
    height: clamp(150px, 42vmin, 250px);
    margin-top: 3vmin;
    display: block;
}
.vith-launch-spark svg { width: 100%; height: 100%; display: block; }

.vith-launch-spark .spark-grp {
    transform-origin: 50px 50px;
    animation: vith-spark-in 1.15s cubic-bezier(.18,.75,.2,1) backwards;
}
.vith-launch-spark .spark-rays {
    transform-origin: 50px 50px;
    animation: vith-spark-spin 70s linear infinite;
}
.vith-launch-spark .ray {
    transform-origin: 50px 50px;
    animation: vith-spark-shimmer 4.6s ease-in-out infinite;
}
.vith-launch-spark .core {
    transform-origin: 50px 50px;
    animation: vith-spark-breathe 3.4s ease-in-out infinite;
}

.vith-launch-tagline {
    margin-top: 3vmin;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 4.4vmin, 21px);
    letter-spacing: 0.01em;
    color: rgba(247,244,238,0.78);
    line-height: 1;
    animation: vith-fade-up 1s cubic-bezier(.2,.7,.2,1) 0.9s backwards;
}

.vith-launch-load {
    margin-top: clamp(28px, 6vmin, 44px);
    width: clamp(140px, 44vmin, 210px);
    height: 2px;
    border-radius: 2px;
    background: rgba(247,244,238,0.12);
    overflow: hidden;
    animation: vith-fade-up 0.8s ease 1.1s backwards;
}
.vith-launch-load i {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #C9A84C 40%, #F0CE72 50%, #C9A84C 60%, transparent);
    transform: translateX(-120%);
    animation: vith-spark-sweep 1.5s cubic-bezier(.5,.05,.3,1) 1.2s infinite;
}

@keyframes vith-word-in {
    from { opacity: 0; transform: translateY(6px); letter-spacing: 0.58em; }
    to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.40em; }
}
@keyframes vith-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes vith-spark-in {
    0%   { opacity: 0; transform: scale(1.32) rotate(-9deg); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes vith-spark-spin { to { transform: rotate(360deg); } }
@keyframes vith-spark-shimmer {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}
@keyframes vith-spark-breathe {
    0%, 100% { opacity: .8;  transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes vith-spark-sweep {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
    .vith-launch-word,
    .vith-launch-tagline,
    .vith-launch-load,
    .vith-launch-caption {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .vith-launch-word { letter-spacing: 0.40em; }
    .vith-launch-spark .spark-grp,
    .vith-launch-spark .spark-rays,
    .vith-launch-spark .ray,
    .vith-launch-spark .core {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .vith-launch-load i { animation: vith-spark-sweep 1.6s linear infinite; }
}

.vith-onboarding{max-width:640px;margin:0 auto;padding:60px 32px 100px}
.vith-progress-track{height:2px;background:var(--vith-cream-warm);border-radius:1px;margin-top:8px}
.vith-progress-fill{height:2px;background:var(--vith-gold);border-radius:1px;transition:width 400ms ease}
.vith-onboarding-step{min-height:360px}
.vith-onboarding-nav{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:0.5px solid var(--vith-cream-warm)}
.vith-priority-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.vith-priority-card{padding:16px 20px;border:0.5px solid var(--vith-cream-warm);border-radius:var(--radius-card);cursor:pointer;transition:200ms ease;background:var(--vith-white)}
.vith-priority-card:hover{border-color:var(--vith-gold)}
.vith-priority-card.selected{border-color:var(--vith-gold);background:var(--vith-gold-pale)}
.vith-upload-area{border:0.5px dashed var(--vith-gold);border-radius:var(--radius-card);padding:40px 24px;text-align:center;background:var(--vith-white);transition:200ms ease}
.vith-upload-area:hover{background:var(--vith-gold-pale)}

.vith-onboarding-wrap{background:#0F1E33;min-height:100vh;padding:0}
.vith-onboarding{max-width:640px;margin:0 auto;padding:60px 32px 100px}
.vith-onboarding h1{font-family:var(--font-display);font-weight:500;font-size:38px;line-height:1.15;color:#F7F4EE;margin-top:16px}
.vith-onboarding .ob-body{font-family:var(--font-body);font-weight:300;font-size:18px;line-height:1.7;color:rgba(247,244,238,0.65);margin-top:20px;max-width:480px}
.vith-onboarding .ob-caption{font-family:var(--font-mono);font-size:12px;color:rgba(247,244,238,0.4);margin-top:28px}
.vith-progress-track{height:2px;background:rgba(247,244,238,0.1);border-radius:1px;margin-top:8px}
.vith-progress-fill{height:2px;background:var(--vith-gold);border-radius:1px;transition:width 400ms ease}
.vith-onboarding-step{min-height:380px}
.vith-onboarding-nav{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:0.5px solid rgba(247,244,238,0.1)}
.vith-security-block{display:flex;flex-direction:column;gap:0;margin-top:36px}
.vith-security-item{padding:20px 0;border-bottom:0.5px solid rgba(247,244,238,0.1)}
.vith-security-item:last-child{border-bottom:none}
.vith-security-item h3{font-family:var(--font-body);font-weight:500;font-size:16px;color:#F7F4EE}
.vith-security-item p{font-family:var(--font-body);font-weight:300;font-size:16px;color:rgba(247,244,238,0.6);margin-top:6px;line-height:1.6}
.vith-doc-list{margin-top:32px;display:flex;flex-direction:column;gap:0}
.vith-doc-item{display:flex;align-items:baseline;gap:20px;padding:14px 0;border-bottom:0.5px solid rgba(247,244,238,0.08)}
.vith-doc-item:last-child{border-bottom:none}
.vith-doc-label{font-family:var(--font-mono);font-size:11px;min-width:64px;color:var(--vith-gold)}
.vith-doc-label.optional{color:rgba(247,244,238,0.35)}
.vith-doc-name{font-family:var(--font-body);font-weight:300;font-size:16px;color:rgba(247,244,238,0.8)}
.vith-upload-area{border:0.5px dashed rgba(201,168,76,0.5);border-radius:var(--radius-card);padding:48px 32px;text-align:center;background:rgba(247,244,238,0.03);transition:200ms ease;cursor:pointer}
.vith-upload-area:hover{background:rgba(201,168,76,0.06);border-color:var(--vith-gold)}
/* Drop zone: the file input overlays the whole area (opacity 0) so a dropped PDF
   lands on the native input and uploads, instead of the browser opening it in a
   new tab (which is what happened when the input was display:none). */
.vith-drop{position:relative;display:block;cursor:pointer}
.vith-drop-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vith-drop:hover .vith-upload-area{background:rgba(201,168,76,0.06);border-color:var(--vith-gold)}
.vith-drop:hover .vith-upload-area-light{background:var(--vith-gold-pale);border-color:var(--vith-gold)}
.vith-upload-title{font-family:var(--font-body);font-weight:400;font-size:18px;color:#F7F4EE}
.vith-upload-sub{font-family:var(--font-mono);font-size:12px;color:rgba(247,244,238,0.35);margin-top:8px}
.vith-file-list{margin-top:24px;display:flex;flex-direction:column;gap:10px;text-align:left}
.vith-file-item{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:14px;color:rgba(247,244,238,0.7)}
.vith-skip{background:none;border:none;cursor:pointer;color:rgba(247,244,238,0.35);font-family:var(--font-body);font-size:14px;text-decoration:underline;padding:0;margin-top:20px;display:block}
.vith-priority-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.vith-priority-card{padding:20px;border:0.5px solid rgba(247,244,238,0.1);border-radius:var(--radius-card);cursor:pointer;transition:200ms ease;background:rgba(247,244,238,0.03)}
.vith-priority-card:hover{border-color:rgba(201,168,76,0.5);background:rgba(201,168,76,0.05)}
.vith-priority-card.selected{border-color:var(--vith-gold);background:rgba(201,168,76,0.12)}
.vith-priority-card span{font-family:var(--font-body);font-weight:300;font-size:15px;color:rgba(247,244,238,0.85);line-height:1.5}
.vith-priority-card.selected span{color:#F7F4EE}
.vith-founding-quote{margin-top:36px;padding:20px 24px;border-left:2px solid var(--vith-gold);background:rgba(201,168,76,0.06);border-radius:0 4px 4px 0}
.vith-founding-quote p{font-family:var(--font-body);font-weight:300;font-size:15px;color:rgba(247,244,238,0.6);font-style:italic;line-height:1.6}
.vith-founding-quote cite{font-family:var(--font-mono);font-size:11px;color:rgba(247,244,238,0.3);margin-top:8px;display:block}
.ob-btn-primary{background:var(--vith-gold);color:#0F1E33;font-family:var(--font-body);font-weight:500;font-size:14px;padding:12px 28px;border:none;border-radius:var(--radius-btn);cursor:pointer;transition:200ms ease}
.ob-btn-primary:hover{background:#E0BC55}
.ob-btn-primary:disabled{opacity:0.4;cursor:not-allowed}
.ob-btn-ghost{background:none;color:rgba(247,244,238,0.5);font-family:var(--font-body);font-weight:400;font-size:14px;padding:12px 20px;border:0.5px solid rgba(247,244,238,0.15);border-radius:var(--radius-btn);cursor:pointer;transition:200ms ease}
.ob-btn-ghost:hover{color:#F7F4EE;border-color:rgba(247,244,238,0.3)}

/* ─── Launch screen caption ──────────────────────────────── */

.vith-launch-caption{margin-top:18px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:rgba(247,244,238,0.45);animation:vith-fade-up 0.8s ease 1.3s backwards}

/* ─── Auth failure ───────────────────────────────────────── */

.vith-auth-error{max-width:420px;text-align:center;padding:0 24px}
.vith-auth-error h1{color:#F7F4EE;margin-top:12px}
.vith-auth-error-sub{font-family:var(--font-body);font-weight:300;font-size:15px;color:rgba(247,244,238,0.6);margin-top:14px;line-height:1.6}

/* ─── Dashboard ──────────────────────────────────────────── */

.vith-dash{max-width:none;margin:0}
/* generic row list — Recent activity (transactions) + Accounts; reusable */
.vith-rowlist{display:flex;flex-direction:column}
.vith-rowlist-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:0.5px solid var(--vith-border)}
.vith-rowlist-row:last-child{border-bottom:none}
.vith-rowlist-date{flex:0 0 auto;width:92px;font-family:var(--font-mono);font-size:12px;color:var(--vith-text-muted)}
.vith-rowlist-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.vith-rowlist-title{font-family:var(--font-body);font-size:14px;color:var(--vith-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vith-rowlist-sub{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-rowlist-amount{flex:0 0 auto;font-family:var(--font-mono);font-size:14px;color:var(--vith-text);white-space:nowrap}
.vith-field{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}
.vith-dash-title{font-size:30px;margin-top:8px}

.vith-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.vith-dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px;align-items:start}

/* ─── Today V2 (VIT-232, Design/01-today.jsx) ──────────────
   Dense single-screen landing: LFD hero + 3-goal strip / 6-metric strip /
   focus + sleep↔spend + recent. Token-only; mobile-first stacking, side-by-side
   at desktop. Data-needed cards are visible (sparkline, LFD delta, goal pace,
   buffer, sleep correlation) — see Functions handoff for the backend asks. */
.vith-today{max-width:none;margin:0;display:flex;flex-direction:column;gap:12px}
.vith-today-row{display:flex;flex-direction:column;gap:12px}

@media (min-width:960px){
  .vith-today-row-hero{flex-direction:row;align-items:stretch}
  .vith-today-row-hero > .vith-today-hero{flex:1.3 1 0}
  .vith-today-row-hero > .vith-today-goals{flex:1 1 0;min-width:0}
  .vith-today-row-three{flex-direction:row;align-items:stretch}
  .vith-today-row-three > section{flex:1 1 0;min-width:0}
}

/* Live Funded hero — FundedScoreRing on top-left, funded month on top-right,
   sparkline underneath. Score from /api/funded_score, month from /api/funded. */
.vith-today-hero{display:flex;flex-direction:column;gap:8px}
.vith-today-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.vith-today-hero-left{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.vith-today-hero-right{flex:0 1 auto;min-width:0;text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.vith-today-hero-delta{font-family:var(--font-mono);font-size:11px;margin:0;color:var(--vith-text-muted);text-align:center}
.vith-today-hero-month{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.15;color:var(--vith-text);margin:0}
.vith-today-hero-month-sub{font-family:var(--font-mono);font-size:10px;color:var(--vith-text-muted);margin:0;letter-spacing:0.04em;text-transform:lowercase}
.vith-today-hero-spark{margin-top:6px;color:var(--vith-text-muted)}
/* Empty/Data-needed score: keep the layout, mute the centre glyph. */
.vith-fund-value-empty{color:var(--vith-text-muted);text-shadow:none}

/* Goals strip */
.vith-today-goals{display:flex;flex-direction:column;gap:8px;min-width:0}
.vith-today-goals-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vith-today-link{font-family:var(--font-body);font-size:12px;color:var(--vith-text-muted);text-decoration:none;white-space:nowrap}
.vith-today-link:hover{color:var(--vith-gold)}
.vith-today-goal-list{display:flex;flex-direction:column;margin-top:4px}
.vith-today-goal-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:0.5px solid var(--vith-border);text-decoration:none;color:var(--vith-text);transition:background-color var(--transition)}
.vith-today-goal-row:first-child{border-top:none}
.vith-today-goal-row:hover{background:rgba(201,168,76,0.04)}
.vith-today-goal-swatch{flex:0 0 auto;width:12px;height:12px;border-radius:2px;background:var(--vith-text-muted)}
.vith-today-goal-row[data-cat="asset"] .vith-today-goal-swatch{background:var(--vith-success)}
.vith-today-goal-row[data-cat="lifestyle"] .vith-today-goal-swatch{background:var(--vith-gold)}
.vith-today-goal-row[data-cat="debt_payoff"] .vith-today-goal-swatch{background:var(--vith-text-muted)}
.vith-today-goal-row[data-cat="big_purchase"] .vith-today-goal-swatch{background:var(--vith-neutral)}
.vith-today-goal-rank{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;color:var(--vith-text-muted);width:22px;text-align:center}
.vith-today-goal-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.vith-today-goal-name{font-family:var(--font-display);font-size:14px;color:var(--vith-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vith-today-goal-cat{font-family:var(--font-mono);font-size:10px;color:var(--vith-text-muted)}
.vith-today-goal-progress{flex:0 0 auto;display:flex;flex-direction:column;gap:3px;width:96px}
.vith-today-goal-bar{display:block;height:4px;background:var(--vith-border);border-radius:2px;overflow:hidden}
.vith-today-goal-bar > span{display:block;height:100%;background:var(--vith-gold);border-radius:2px}
.vith-today-goal-row[data-cat="asset"] .vith-today-goal-bar > span{background:var(--vith-success)}
.vith-today-goal-row[data-cat="debt_payoff"] .vith-today-goal-bar > span{background:var(--vith-text-muted)}
.vith-today-goal-row[data-cat="big_purchase"] .vith-today-goal-bar > span{background:var(--vith-neutral)}
.vith-today-goal-pct{font-family:var(--font-mono);font-size:10px;color:var(--vith-text-muted);text-align:right}
.vith-today-goal-amts{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted);white-space:nowrap}
.vith-today-goal-impact{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;width:48px;text-align:right}
.vith-today-goal-chev{flex:0 0 auto;color:var(--vith-text-muted);font-size:14px;line-height:1}
@media (max-width:560px){
  .vith-today-goal-progress{width:64px}
  .vith-today-goal-amts{display:none}
  .vith-today-goal-impact{display:none}
}

/* Standing metrics */
.vith-today-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:720px){.vith-today-metrics{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){.vith-today-metrics{grid-template-columns:repeat(7,1fr)}}
.vith-today-metric{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);min-width:0}
.vith-today-metric-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--vith-text-muted);text-transform:lowercase}
.vith-today-metric-value{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.1;color:var(--vith-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vith-today-metric-sub{font-family:var(--font-mono);font-size:10px;color:var(--vith-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Row 3 cards */
.vith-today-focus{display:flex;flex-direction:column;gap:6px}
.vith-today-focus-headline{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.3;color:var(--vith-text);margin:8px 0 4px}
.vith-today-sleep{display:flex;flex-direction:column;gap:6px}
.vith-today-sleep-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;color:var(--vith-text-muted)}
.vith-today-recent{display:flex;flex-direction:column;gap:6px}
.vith-today-recent-list{display:flex;flex-direction:column;margin-top:6px}
.vith-today-recent-row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:0.5px solid var(--vith-border);font-family:var(--font-mono);font-size:12px;color:var(--vith-text)}
.vith-today-recent-row:first-child{border-top:none}
.vith-today-recent-date{flex:0 0 auto;width:54px;color:var(--vith-text-muted)}
.vith-today-recent-merch{flex:1 1 auto;min-width:0;font-family:var(--font-body);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vith-today-recent-amt{flex:0 0 auto;text-align:right}

/* Sparkline (V1 stub) */
.vith-spark{display:flex;align-items:center;gap:8px;width:100%;height:30px}
.vith-spark svg{flex:1 1 auto;width:100%;height:100%;display:block}
.vith-spark-missing{color:var(--vith-text-muted)}
.vith-spark-trend{color:var(--vith-gold)}
.vith-spark-label{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;color:var(--vith-text-muted);white-space:nowrap}

/* Weekly report card */
.vith-report-card{display:flex;flex-direction:column}
.vith-report-head{display:flex;align-items:center;justify-content:space-between}
.vith-report-link{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--vith-text);text-decoration:none}
.vith-report-link:hover{color:var(--vith-gold)}
.vith-report-headline{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.25;color:var(--vith-text);margin:14px 0 18px}
.vith-report-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.vith-report-row{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-body);font-weight:300;font-size:14px;color:var(--vith-text);line-height:1.5}
.vith-report-dot{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:0 0 auto}
.vith-report-dot.good{background:var(--vith-success)}
.vith-report-dot.watch{background:var(--vith-alert)}

/* Mobile-first decision / prompt card */
.vith-decision-card{background:var(--vith-spotlight);color:var(--vith-cream);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);padding:24px}
.vith-decision-card .t-eyebrow{color:var(--vith-gold)}
.vith-decision-q{font-family:var(--font-body);font-weight:400;font-size:15px;color:rgba(247,244,238,0.75);margin-top:10px;line-height:1.5}
.vith-decision-amount{font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1;color:#F7F4EE;margin:10px 0 6px}
.vith-decision-sub{font-family:var(--font-body);font-weight:300;font-size:13px;color:rgba(247,244,238,0.5);line-height:1.5}
.vith-decision-options{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.vith-decision-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;padding:14px 16px;border-radius:var(--radius-card);border:0.5px solid rgba(247,244,238,0.18);background:rgba(247,244,238,0.04);cursor:pointer;transition:200ms ease}
.vith-decision-btn:hover{border-color:var(--vith-gold);background:rgba(201,168,76,0.08)}
.vith-decision-btn.selected{border-color:var(--vith-gold);background:rgba(201,168,76,0.16)}
.vith-decision-btn-title{font-family:var(--font-body);font-weight:500;font-size:15px;color:#F7F4EE}
.vith-decision-btn-meta{font-family:var(--font-mono);font-size:11px;color:rgba(247,244,238,0.5)}
.vith-decision-confirm{font-family:var(--font-body);font-size:13px;color:var(--vith-gold-pale);margin-top:16px;line-height:1.5}

/* Cross-domain insight */
.vith-insight-card{margin-top:16px;padding:24px;border-radius:var(--radius-feature);border:0.5px solid var(--vith-border);background:var(--vith-surface)}
.vith-insight-text{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:18px;line-height:1.5;color:var(--vith-text);margin-top:10px;max-width:760px}
.vith-insight-text strong{font-style:normal;font-weight:500;color:var(--vith-gold)}

/* Archive */
.vith-report-archive{display:flex;flex-direction:column;border-top:var(--border-hairline);margin-top:20px}
.vith-archive-row{display:flex;align-items:center;gap:20px;padding:20px 4px;border-bottom:var(--border-hairline);text-decoration:none;transition:background-color 200ms ease}
.vith-archive-row:hover{background:var(--vith-surface)}
.vith-archive-when{flex:0 0 64px;display:flex;flex-direction:column}
.vith-archive-date{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--vith-text)}
.vith-archive-year{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-archive-body{flex:1 1 auto}
.vith-archive-headline{font-family:var(--font-body);font-weight:400;font-size:15px;color:var(--vith-text);line-height:1.4}
.vith-archive-meta{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted);margin-top:4px}

.vith-upload-area-light{border-color:rgba(201,168,76,0.6);background:var(--vith-surface)}
.vith-upload-area-light:hover{background:var(--vith-gold-pale);border-color:var(--vith-gold)}

/* ─── Funded score hero + ring ───────────────────────────── */

.vith-hero{display:flex;align-items:center;gap:32px;padding:28px;border-radius:var(--radius-feature);border:0.5px solid var(--vith-border);background:var(--vith-surface);margin-bottom:16px}
.vith-hero-story{flex:1 1 auto}
.vith-hero-headline{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;color:var(--vith-text);margin:8px 0 10px}

/* ── Live Funded Score ring (FundedScoreRing) ──────────────────
   Marketing-hero treatment: solid gold arc + glow, italic display number,
   soft gold halo, and a slowly orbiting gold dot. Own `vith-fund-*` namespace
   so it never collides with the portable `.vith-ring` library block below.
   Gold is mode-invariant; text/track use role tokens → reads in dark + light. */
.vith-fund-ring{position:relative;flex:0 0 auto;width:var(--ring-size,168px);height:var(--ring-size,168px);display:flex;align-items:center;justify-content:center}
.vith-fund-halo{position:absolute;top:50%;left:50%;width:165%;height:165%;transform:translate(-50%,-50%);background:radial-gradient(circle at center,rgba(201,168,76,0.34) 0%,rgba(201,168,76,0.16) 18%,rgba(201,168,76,0.05) 38%,transparent 62%);filter:blur(2px);pointer-events:none;z-index:0}
.vith-fund-outer{position:absolute;inset:-8%;border:1px solid rgba(201,168,76,0.28);border-radius:50%;pointer-events:none;animation:vith-fund-rotate 24s linear infinite}
.vith-fund-outer::before{content:"";position:absolute;top:-3.5px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--vith-gold);opacity:0.95;transform:translateX(-50%);box-shadow:0 0 10px rgba(201,168,76,0.85)}
@keyframes vith-fund-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.vith-fund-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;z-index:1}
.vith-fund-track{fill:none;stroke:var(--vith-border);stroke-width:3}
.vith-fund-inner{fill:none;stroke:rgba(201,168,76,0.06);stroke-width:0.5}
.vith-fund-arc{fill:none;stroke:var(--vith-gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:339.292;transition:stroke-dashoffset 900ms cubic-bezier(0.33,1,0.68,1);filter:drop-shadow(0 0 12px rgba(201,168,76,0.55))}
.vith-fund-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.vith-fund-value{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:calc(var(--ring-size,168px) * 0.4);line-height:1;letter-spacing:-0.025em;color:var(--vith-text);text-shadow:0 0 30px rgba(201,168,76,0.18)}
.vith-fund-denom{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;color:var(--vith-text-muted);margin-top:10px;padding-top:7px;border-top:0.5px solid var(--vith-border);min-width:64px;text-align:center}
.vith-fund-delta{text-align:center;margin-top:14px;font-family:var(--font-body);font-weight:500;font-size:15px;letter-spacing:0.04em;color:var(--vith-gold)}
.vith-fund-delta.setback{color:var(--vith-neutral)}

@media (prefers-reduced-motion: reduce){
    .vith-fund-arc{transition:none}
    .vith-fund-outer{animation:none}
}

/* ── Cole — conversational document intake ─────────────────────
   Token-driven (dark + light). Thread of Cole bubbles + user attachment
   chips + result cards, with a paperclip composer for the native PDF picker. */
.vith-cole-page{padding:24px 16px 48px}
.vith-cole{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:0;background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);overflow:hidden}
.vith-cole-thread{display:flex;flex-direction:column;gap:14px;padding:24px;min-height:320px;max-height:60vh;overflow-y:auto}
.vith-cole-row{display:flex;gap:10px;align-items:flex-start}
.vith-cole-row.user{justify-content:flex-end}
.vith-cole-avatar{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--vith-gold);color:var(--vith-navy);font-family:var(--font-display);font-size:14px;font-weight:500}
.vith-cole-bubble{max-width:80%;background:var(--vith-bg);border:0.5px solid var(--vith-border);border-radius:14px;padding:12px 16px;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--vith-text)}
.vith-cole-card{max-width:80%;display:flex;align-items:center;gap:10px;background:rgba(201,168,76,0.08);border:0.5px solid var(--vith-gold);border-radius:14px;padding:12px 16px;font-family:var(--font-body);font-size:14px;color:var(--vith-text)}
.vith-cole-card-check{color:var(--vith-gold);font-weight:600}
.vith-cole-attach{display:inline-flex;align-items:center;gap:10px;background:var(--vith-bg);border:0.5px solid var(--vith-border);border-radius:12px;padding:10px 14px;max-width:80%}
.vith-cole-attach-icon{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;font-weight:600;color:var(--vith-gold);border:1px solid var(--vith-gold);border-radius:4px;padding:2px 5px}
.vith-cole-attach-name{font-family:var(--font-body);font-size:14px;color:var(--vith-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.vith-cole-attach-status{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em}
.vith-cole-attach-status.pending,.vith-cole-attach-status.ok:not(.fail){color:var(--vith-text-muted)}
.vith-cole-attach-status.ok{color:var(--vith-success)}
.vith-cole-attach-status.fail{color:var(--vith-neutral)}
.vith-cole-typing{display:inline-flex;gap:4px;align-items:center}
.vith-cole-typing span{width:6px;height:6px;border-radius:50%;background:var(--vith-text-muted);opacity:0.5;animation:vith-cole-blink 1.2s infinite ease-in-out}
.vith-cole-typing span:nth-child(2){animation-delay:0.2s}
.vith-cole-typing span:nth-child(3){animation-delay:0.4s}
@keyframes vith-cole-blink{0%,80%,100%{opacity:0.25}40%{opacity:0.9}}
.vith-cole-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 8px}
.vith-cole-chip{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--vith-text);background:transparent;border:0.5px solid var(--vith-border);border-radius:var(--radius-pill);padding:8px 16px;cursor:pointer;transition:border-color var(--transition),background-color var(--transition)}
.vith-cole-chip:hover{border-color:var(--vith-gold);background:rgba(201,168,76,0.06)}
.vith-cole-composer{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:0.5px solid var(--vith-border);background:var(--vith-bg)}
.vith-cole-clip{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0.5px solid var(--vith-border);color:var(--vith-gold);cursor:pointer;transition:border-color var(--transition),background-color var(--transition)}
.vith-cole-clip:hover{border-color:var(--vith-gold);background:rgba(201,168,76,0.06)}
.vith-cole-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.vith-cole-clip:has(.vith-cole-file:disabled){opacity:0.45;pointer-events:none}
.vith-cole-input{flex:1 1 auto;min-width:0;background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:var(--radius-pill);padding:11px 16px;font-family:var(--font-body);font-size:15px;color:var(--vith-text);outline:none;transition:border-color var(--transition)}
.vith-cole-input:focus{border-color:var(--vith-gold)}
.vith-cole-input::placeholder{color:var(--vith-text-muted)}
.vith-cole-send{flex:0 0 auto;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--vith-navy);background:var(--vith-gold);border:none;border-radius:var(--radius-pill);padding:11px 18px;cursor:pointer;transition:opacity var(--transition)}
.vith-cole-send:disabled{opacity:0.4;cursor:default}
.vith-cole-bubble.user{background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.3);color:var(--vith-text)}
.vith-cole-hint{font-family:var(--font-mono);font-size:11px;line-height:1.4;color:var(--vith-text-muted);text-align:center;padding:8px 18px 14px}

/* ── Cole page (/cole): intro + inline suggested-prompt cards + gold-framed chat ── */
.vith-cole-intro{max-width:680px;margin:0 auto 18px}
.vith-cole-intro .vith-dash-title{margin:6px 0 8px}
/* Suggested prompts render inline in the thread as distinguished Cole-side cards
   (stacked, full-width, gold chevron), not small pills (see ColeIntake). */
.vith-cole-suggest{display:flex;flex-direction:column;gap:8px;max-width:82%}
.vith-cole-suggest-chip{display:flex;align-items:center;gap:10px;width:100%;font-family:var(--font-body);font-size:14px;line-height:1.35;color:var(--vith-text);background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:14px;padding:13px 16px;cursor:pointer;text-align:left;transition:border-color var(--transition),background-color var(--transition),transform var(--transition)}
.vith-cole-suggest-chip::after{content:"\203A";margin-left:auto;color:var(--vith-gold);font-size:18px;line-height:1}
.vith-cole-suggest-chip:hover{border-color:var(--vith-gold);background:rgba(201,168,76,0.06);transform:translateX(2px)}
/* Cole inline form card (VIT-244 structured input): one card, all fields, one submit. */
.vith-cole-form{background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:14px;padding:16px;max-width:540px}
.vith-cole-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px}
.vith-cole-form-field{display:flex;flex-direction:column;gap:5px}
.vith-cole-form-field label{font-family:var(--font-body);font-size:12px;color:var(--vith-text-muted)}
.vith-cole-form-check{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13px;color:var(--vith-text)}
@media (max-width:560px){.vith-cole-form-grid{grid-template-columns:1fr}}
/* "What's missing" affordance (VIT-244): a collapsed "+ Add details" entry under the
   chat that opens the list of not-yet-provided doctypes (RecordsToAdd). */
.vith-records-add{max-width:680px;margin:14px auto 0}
.vith-records-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--vith-text);background:transparent;border:0.5px solid var(--vith-border);border-radius:var(--radius-pill);padding:9px 16px;cursor:pointer;transition:border-color var(--transition),background-color var(--transition)}
.vith-records-toggle:hover,.vith-records-toggle.open{border-color:var(--vith-gold);background:rgba(201,168,76,0.06)}
.vith-records-toggle-mark{color:var(--vith-gold);font-weight:600;font-size:15px;line-height:1}
.vith-records-toggle-count{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted);background:var(--vith-bg);border-radius:var(--radius-pill);padding:1px 7px}
.vith-records-panel{margin-top:10px;background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:14px;padding:6px 16px 10px}
.vith-records-row{padding:14px 0;border-top:0.5px solid var(--vith-border)}
.vith-records-row:first-of-type{border-top:none}
.vith-records-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vith-records-label{font-family:var(--font-body);font-size:15px;color:var(--vith-text)}
.vith-records-action{flex:0 0 auto;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--vith-gold);background:transparent;border:none;padding:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:opacity var(--transition)}
.vith-records-action:hover{opacity:0.82}
.vith-records-scan{display:inline-block;margin-top:4px;font-family:var(--font-body);font-size:12px;color:var(--vith-text-muted);text-decoration:none}
.vith-records-scan:hover{color:var(--vith-text);text-decoration:underline}
/* Gold frame + page-colour blend, scoped to the standalone /cole chat — the
   onboarding/widget variants render their own chrome and are left untouched. */
.vith-cole:not([data-variant]){background:var(--vith-bg);border:1px solid var(--vith-gold)}
.vith-cole:not([data-variant]) .vith-cole-bubble{background:var(--vith-surface);border-color:var(--vith-border)}
.vith-cole:not([data-variant]) .vith-cole-attach{background:var(--vith-surface)}
.vith-cole:not([data-variant]) .vith-cole-composer{background:transparent}
/* Gold-on-navy scrollbar, replacing the default white one. */
.vith-cole-thread{scrollbar-width:thin;scrollbar-color:var(--vith-gold) transparent}
.vith-cole-thread::-webkit-scrollbar{width:10px}
.vith-cole-thread::-webkit-scrollbar-track{background:transparent}
.vith-cole-thread::-webkit-scrollbar-thumb{background:var(--vith-gold);border-radius:8px;border:2px solid var(--vith-bg)}
.vith-cole-thread::-webkit-scrollbar-thumb:hover{background:var(--vith-gold-pale)}

/* ── Cole as a floating widget on every authed page (VIT-204) ──
   FAB = navy chrome orb + gold monogram; panel = elevated surface with a navy
   header. Token-driven; ColeIntake renders inside via data-variant="widget" so
   the same persisted conversation continues everywhere it appears. */
.vith-cole-fab-wrap{position:fixed;right:16px;bottom:16px;z-index:880;display:flex;flex-direction:column;align-items:flex-end}
.vith-cole-fab{position:relative;width:66px;height:66px;border:none;background:transparent;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--transition)}
.vith-cole-fab:hover{transform:translateY(-1px)}
.vith-cole-fab:focus-visible{outline:2px solid var(--vith-gold);outline-offset:4px}
/* two faint concentric rings — the Funded-ring vocabulary, Cole's own namespace */
.vith-cole-fab-ring{position:absolute;inset:0;border-radius:50%;border:0.5px solid rgba(201,168,76,0.22)}
.vith-cole-fab-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;border:0.5px solid rgba(201,168,76,0.12)}
/* a single gold dot slowly orbiting the outer ring */
.vith-cole-fab-orbit{position:absolute;inset:0;border-radius:50%;animation:vith-cole-orbit 9s linear infinite;transition:opacity var(--transition)}
.vith-cole-fab-orbit::before{content:"";position:absolute;top:-2px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--vith-gold);transform:translateX(-50%);box-shadow:0 0 8px rgba(201,168,76,0.9)}
.vith-cole-fab.is-open .vith-cole-fab-orbit{opacity:0}
/* the navy core orb + gold monogram */
.vith-cole-fab-core{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--vith-spotlight);color:var(--vith-gold);font-family:var(--font-display);font-size:23px;line-height:1;transform:translateY(1px);box-shadow:0 8px 24px rgba(0,0,0,0.30),inset 0 1px 0 rgba(247,244,238,0.06);transition:box-shadow var(--transition)}
.vith-cole-fab:hover .vith-cole-fab-core{box-shadow:0 10px 30px rgba(0,0,0,0.36),0 0 22px rgba(201,168,76,0.28),inset 0 1px 0 rgba(247,244,238,0.08)}
@keyframes vith-cole-orbit{to{transform:rotate(360deg)}}
/* Mobile-first: the panel is a full-screen sheet (no vh math — inset:0 tracks
   the visible viewport even as mobile toolbars show/hide). The desktop floating
   panel is layered on in the min-width query below. */
.vith-cole-widget{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--vith-surface);overflow:hidden;transition:opacity 160ms var(--ease-out-cubic,ease)}
.vith-cole-widget.is-collapsed{opacity:0;visibility:hidden;pointer-events:none}
.vith-cole-fab.is-open{opacity:0;pointer-events:none}
.vith-cole-widget-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;background:var(--vith-spotlight);color:var(--vith-cream)}
.vith-cole-widget-id{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:0.01em}
.vith-cole-widget-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--vith-gold);color:var(--vith-navy);font-size:14px;line-height:1}
.vith-cole-widget-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:rgba(247,244,238,0.7);cursor:pointer;transition:background-color var(--transition),color var(--transition)}
.vith-cole-widget-x:hover{background:rgba(247,244,238,0.1);color:var(--vith-cream)}
.vith-cole-widget-x:focus-visible{outline:2px solid var(--vith-gold);outline-offset:2px}
.vith-cole[data-variant="widget"]{max-width:none;margin:0;flex:1 1 auto;min-height:0;border:0;border-radius:0;background:transparent;overflow:hidden}
.vith-cole[data-variant="widget"] .vith-cole-thread{flex:1 1 auto;min-height:0;max-height:none;padding:18px;overscroll-behavior:contain}
.vith-cole[data-variant="widget"] .vith-cole-chips{padding:0 18px 8px}
.vith-cole[data-variant="widget"] .vith-cole-composer{padding:12px 14px}
.vith-cole[data-variant="widget"] .vith-cole-hint{padding:6px 14px 12px}
/* ── VIT-219 Cole-led onboarding (/onboarding) — full-bleed, always-dark welcome ──
   The wrapper carries data-theme="dark" so the role tokens (and the embedded
   ColeIntake) render dark regardless of the user's chosen theme. Mobile-first:
   single column; two columns from 880px. */
/* VIT-314 — first-use brand-only welcome (post-wizard rebuild). Standalone
   dark surface (no shell), centred column, single CTA into Cole. Visual
   chrome relies on existing tokens until VIT-378 design tokens land. */
.vith-firstuse{position:fixed;inset:0;z-index:1500;overflow-y:auto;display:flex;background:var(--vith-bg);color:var(--vith-text)}
.vith-firstuse-inner{margin:auto;width:100%;max-width:480px;padding:48px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.vith-firstuse-mark{width:96px;height:96px;margin-bottom:24px;border-radius:22px}
.vith-firstuse-headline{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,5vw,40px);line-height:1.15;color:var(--vith-text);margin:10px 0 14px}
.vith-firstuse-body{font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.55;color:var(--vith-text-muted);margin:0 0 32px;max-width:380px}
.vith-firstuse-cta{min-width:200px}

/* Health Phase 1 — cold-start state. Two paths: wearable (mailto-driven
   placeholders until Functions ships OAuth) and clinical files (Cole's
   paperclip handles lab-result + biomarker-report uploads already).
   Dimmed preview block hints at the connected state (Phase 2). */
.vith-health{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:32px;padding-top:8px}
.vith-health-head{display:flex;flex-direction:column;gap:10px}
.vith-health-title{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,34px);line-height:1.2;color:var(--vith-text);margin:6px 0 0}
.vith-health-descriptor{font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--vith-text-muted);margin:10px 0 0;max-width:580px}
.vith-health-hero-header{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.25;color:var(--vith-text);margin:8px 0 14px}
.vith-health-body{font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.6;color:var(--vith-text-muted);max-width:680px;margin:0}

/* Hero — today's quality of life + the long arc */
.vith-health-hero{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:880px){.vith-health-hero{grid-template-columns:1fr 1fr}}
.vith-health-hero-card{background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);padding:22px;display:flex;flex-direction:column;gap:10px}
.vith-health-hero-narrative{font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--vith-text-muted);margin:0 0 6px}
.vith-health-stats{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.vith-health-stat{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:10px 14px}
.vith-health-stat-label{font-family:var(--font-body);font-size:14px;color:var(--vith-text)}
.vith-health-stat-value{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--vith-text);justify-self:end}
.vith-health-stat-range{font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;color:var(--vith-text-muted);grid-column:1 / -1}
.vith-health-projection-headline{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:32px;line-height:1.1;color:var(--vith-text);margin:6px 0 0;letter-spacing:-0.01em}
.vith-health-projection-sub{display:block;font-family:var(--font-body);font-style:normal;font-weight:400;font-size:13px;color:var(--vith-text-muted);margin-top:4px}
.vith-health-projection-runway{font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--vith-text-muted);margin:14px 0 4px}
.vith-health-projection-runway strong{color:var(--vith-text);font-weight:500}
.vith-health-healthspan{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-family:var(--font-body);font-size:13.5px;color:var(--vith-text-muted);margin:10px 0 4px}
.vith-health-healthspan-label{color:var(--vith-text)}
.vith-health-citation{font-family:var(--font-body);font-style:italic;font-size:12.5px;line-height:1.5;color:var(--vith-text-muted);margin:14px 0 0;padding-top:14px;border-top:0.5px solid var(--vith-border)}
.vith-health-calibrating{font-family:var(--font-mono);font-size:10px;line-height:1.55;color:var(--vith-text-muted);margin:8px 0 0;letter-spacing:0.02em}

/* Sections (components / recent / integrations / goals) */
.vith-health-section{display:flex;flex-direction:column;gap:14px}
.vith-health-section-head{display:flex;flex-direction:column;gap:4px}
.vith-health-section-title{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.2;color:var(--vith-text);margin:0}

/* Components grid (VIT-368 capture domains) */
.vith-health-components{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vith-health-component{background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);padding:16px;display:flex;flex-direction:column;gap:4px}
.vith-health-component-name{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--vith-text-muted);text-transform:lowercase;margin:0}
.vith-health-component-value{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--vith-text);margin:4px 0 0}
.vith-health-component-range{font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;color:var(--vith-text-muted);margin:0;text-transform:lowercase}
.vith-health-component-lever{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--vith-text-muted);margin:8px 0 0;padding-top:8px;border-top:0.5px dashed var(--vith-border)}

/* Recent activity */
.vith-health-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.vith-health-recent-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:0.5px solid var(--vith-border)}
.vith-health-recent-row:first-child{border-top:none}
.vith-health-recent-icon{flex:0 0 auto;width:24px;text-align:center;font-size:14px;color:var(--vith-gold)}
.vith-health-recent-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.vith-health-recent-label{font-family:var(--font-body);font-size:14px;color:var(--vith-text)}
.vith-health-recent-sub{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-health-recent-more{align-self:flex-start;margin-top:8px}


/* VIT-310 — payment delinquency landing page. Standalone dark surface
   (no shell). Token-only; centred column, locked Writer copy. */
.vith-paused{position:fixed;inset:0;z-index:1500;overflow-y:auto;display:flex;background:var(--vith-bg);color:var(--vith-text)}
.vith-paused-inner{margin:auto;width:100%;max-width:560px;padding:48px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.vith-paused-headline{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--vith-text);margin:8px 0 6px}
.vith-paused-sub{font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.55;color:var(--vith-text);margin:0 0 18px}
.vith-paused-body{font-family:var(--font-body);font-weight:300;font-size:15px;line-height:1.55;color:var(--vith-text-muted);margin:0 0 18px}
.vith-paused-cta{align-self:flex-start}
.vith-paused-cta-secondary{align-self:flex-start;margin-top:10px}
.vith-paused-note{width:100%;margin:8px 0 18px;padding:18px 0 0;border-top:0.5px solid var(--vith-border)}
.vith-paused-note-headline{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.25;color:var(--vith-text);margin:0 0 10px}
.vith-paused-note-body{font-family:var(--font-body);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--vith-text-muted);margin:0 0 12px}
.vith-paused-note-body:last-child{margin-bottom:0}
.vith-paused-secondary{margin-top:18px;font-family:var(--font-body);font-size:13px;color:var(--vith-text-muted);text-decoration:underline;text-underline-offset:3px;transition:color var(--transition)}
.vith-paused-secondary:hover{color:var(--vith-gold)}
.vith-paused-error{margin-top:18px;font-family:var(--font-mono);font-size:12px;line-height:1.55;color:var(--vith-text-muted)}

.vith-welcome{position:fixed;inset:0;z-index:1500;overflow-y:auto;display:flex;background:var(--vith-bg);color:var(--vith-text)}
.vith-welcome-inner{margin:auto;width:100%;max-width:1080px;padding:48px 24px;display:grid;gap:44px;grid-template-columns:1fr}
.vith-welcome-intro{max-width:540px}
.vith-welcome-h1{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.12;margin-top:14px}
.vith-welcome-body{font-family:var(--font-body);font-weight:300;font-size:17px;line-height:1.65;color:var(--vith-text-muted);margin-top:18px;max-width:480px}
.vith-welcome-trust{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.vith-welcome-score{display:flex;flex-direction:column;align-items:flex-start;margin-top:28px}
.vith-welcome-capacity{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--vith-text-muted);text-transform:lowercase;margin:14px 0 0}
.vith-welcome-progress{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.vith-welcome-progress-item{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:14px}
.vith-welcome-progress-item.pending{color:var(--vith-text-muted)}
.vith-welcome-progress-item.done{color:var(--vith-text)}
.vith-welcome-progress-mark{flex:0 0 auto;width:18px;text-align:center;font-family:var(--font-mono);font-size:14px;color:var(--vith-text-muted)}
.vith-welcome-progress-item.done .vith-welcome-progress-mark{color:var(--vith-gold);font-weight:600}
.vith-welcome-progress-label{flex:1 1 auto;min-width:0}
.vith-welcome-progress-tag{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--vith-text-muted);text-transform:lowercase}
.vith-welcome-trust-item h3{font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--vith-text);margin-bottom:4px}
.vith-welcome-trust-item p{font-family:var(--font-body);font-weight:300;font-size:13.5px;line-height:1.55;color:var(--vith-text-muted)}
.vith-welcome-cole{display:flex;flex-direction:column;gap:14px;min-width:0}
.vith-welcome-cta{display:flex;flex-direction:column;gap:10px}
.vith-welcome-enter{width:100%}
.vith-welcome-cta-note{font-family:var(--font-mono);font-size:12px;line-height:1.45;color:var(--vith-text-muted);text-align:center}
.vith-cole[data-variant="onboarding"]{max-width:none;margin:0;height:clamp(460px,66dvh,640px)}
.vith-cole[data-variant="onboarding"] .vith-cole-thread{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}

/* ─── Onboarding wizard (VIT-314, docs/vit-314-funded-score-inputs.md) ───────
   Calibrated 7-step Cole-led flow. Header + score-and-checklist grid + chat
   surface with step input. Always dark; mobile-first stacking, side-by-side at
   ~720px. Cole bubbles reuse the .vith-cole / .vith-cole-row / .vith-cole-bubble
   primitives — only the wizard chrome is new. */
.vith-onboarding-page{position:fixed;inset:0;z-index:1500;overflow-y:auto;background:var(--vith-bg);color:var(--vith-text);padding:36px 20px 48px;display:flex;flex-direction:column;gap:22px;align-items:stretch}
.vith-onboarding-head{max-width:880px;margin:0 auto;width:100%}
.vith-onboarding-title{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:10px 0 12px;color:var(--vith-text)}
.vith-onboarding-sub{font-family:var(--font-body);font-weight:300;font-size:15px;line-height:1.6;color:var(--vith-text-muted);max-width:640px;margin:0}
.vith-onboarding-capacity{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--vith-text-muted);text-transform:lowercase;margin:12px 0 0}
.vith-upload-capacity{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--vith-text-muted);text-transform:lowercase;margin:0 0 18px}
.vith-upload-upgrade{max-width:560px;padding:28px}
.vith-upload-upgrade h2{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.2;color:var(--vith-text);margin:8px 0 14px}
.vith-upload-upgrade p{font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--vith-text-muted);margin:0 0 22px}
.vith-onboarding-grid{max-width:880px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;background:var(--vith-surface);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);padding:22px}
@media (min-width:720px){
    .vith-onboarding-grid{flex-direction:row;align-items:center;gap:28px}
}
.vith-onboarding-score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.vith-onboarding-checklist{list-style:none;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;width:100%}
.vith-onboarding-step{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-family:var(--font-body);font-size:14px;color:var(--vith-text-muted);transition:background-color var(--transition),color var(--transition)}
.vith-onboarding-step.done{color:var(--vith-text)}
.vith-onboarding-step.current{background:rgba(201,168,76,0.08);color:var(--vith-text)}
.vith-onboarding-step-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-family:var(--font-mono);font-size:11px;border:0.5px solid var(--vith-border);color:var(--vith-text-muted)}
.vith-onboarding-step.done .vith-onboarding-step-mark{background:var(--vith-gold);border-color:var(--vith-gold);color:var(--vith-navy);font-weight:600}
.vith-onboarding-step.current .vith-onboarding-step-mark{border-color:var(--vith-gold);color:var(--vith-gold)}
.vith-onboarding-step-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vith-onboarding-step-tag{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--vith-text-muted);text-transform:lowercase}
.vith-onboarding-chat{max-width:880px;margin:0 auto;width:100%;height:clamp(420px,56dvh,580px)}
.vith-onboarding-chat .vith-cole-thread{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}
.vith-onboarding-input{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px;border-top:0.5px solid var(--vith-border);background:var(--vith-bg)}
.vith-onboarding-text{flex:1 1 auto;min-width:140px}
.vith-onboarding-input-hint{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-onboarding-skip{margin-left:auto}
.vith-onboarding-consequence{flex:1 1 100%;margin:4px 0 0;font-family:var(--font-mono);font-size:11px;line-height:1.55;color:var(--vith-text-muted)}
.vith-onboarding-doctype{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:10px 18px;font-family:var(--font-body);font-size:13px;color:var(--vith-text-muted)}
.vith-onboarding-doctype label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.vith-onboarding-error{font-family:var(--font-mono);font-size:11px;line-height:1.45;color:var(--vith-text-muted);padding:0 18px 12px;margin:0}
/* VIT-282 manual paystub entry inside the wizard's paystub step. Five-field
   grid plus a "back to scan" link; replaces the file picker when toggled. */
.vith-onboarding-manual{flex:1 1 100%;display:flex;flex-direction:column;gap:14px;width:100%}
.vith-onboarding-manual-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--vith-text-muted);text-transform:lowercase;margin:0}
.vith-onboarding-manual-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.vith-onboarding-manual-grid{grid-template-columns:1fr 1fr}}
.vith-onboarding-manual-field{display:flex;flex-direction:column;gap:5px}
.vith-onboarding-manual-field span{font-family:var(--font-body);font-size:13px;color:var(--vith-text-muted)}
.vith-onboarding-manual-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vith-onboarding-link{font-family:var(--font-body);font-size:13px;color:var(--vith-text-muted);background:transparent;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color var(--transition)}
.vith-onboarding-link:hover{color:var(--vith-gold)}
.vith-onboarding-link:disabled{opacity:0.6;cursor:default}
@media (min-width:880px){
    .vith-welcome-inner{grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
}
@media (min-width:561px){
    .vith-cole-fab-wrap{right:24px;bottom:24px}
    .vith-cole-fab.is-open{opacity:1;pointer-events:auto}
    .vith-cole-widget{position:absolute;inset:auto;right:0;bottom:74px;width:380px;height:560px;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);border:0.5px solid var(--vith-border);border-radius:var(--radius-feature);transform-origin:bottom right;box-shadow:0 24px 60px rgba(0,0,0,0.20),0 4px 14px rgba(0,0,0,0.10);transition:opacity 160ms var(--ease-out-cubic,ease),transform 160ms var(--ease-out-cubic,ease)}
    .vith-cole-widget.is-collapsed{transform:translateY(10px) scale(0.98)}
    [data-theme="dark"] .vith-cole-widget{box-shadow:inset 0 1px 0 rgba(247,244,238,0.06),0 24px 60px rgba(0,0,0,0.46)}
}
@media (prefers-reduced-motion:reduce){
    .vith-cole-fab,.vith-cole-widget{transition:none}
    .vith-cole-fab-orbit{animation:none}
}

/* Cole as a docked right-rail on desktop (VIT-232 Phase 2). Hidden below 960px;
   the floating ColeWidget bubble takes over there. Same shared localStorage
   thread either way. */
.vith-cole-rail{display:none;flex:0 0 300px;width:300px;flex-direction:column;background:var(--vith-surface);border-left:0.5px solid var(--vith-border);position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden}
@media (min-width:960px){
    .vith-cole-rail{display:flex}
    .vith-cole-fab-wrap{display:none}
}
.vith-cole-rail-head{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:0.5px solid var(--vith-border)}
.vith-cole-rail-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--vith-gold);color:var(--vith-navy);font-family:var(--font-display);font-size:13px;font-weight:500}
.vith-cole-rail-name{flex:1 1 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--vith-text-muted);text-transform:lowercase}
.vith-cole-rail-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.vith-cole-rail-body .vith-cole{max-width:none;margin:0;border:none;border-radius:0;background:transparent;flex:1 1 auto;min-height:0;overflow:hidden}
.vith-cole-rail-body .vith-cole-thread{flex:1 1 auto;min-height:0;max-height:none;padding:14px}
.vith-cole-rail-body .vith-cole-composer{padding:10px 12px}
.vith-cole-rail-foot{flex:0 0 auto;padding:10px 16px;border-top:0.5px solid var(--vith-border);text-align:center}

@media (max-width:860px){
    .vith-metric-grid{grid-template-columns:repeat(2,1fr)}
    .vith-dash-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
    .vith-dash-head{flex-direction:column}
    .vith-dash-title{font-size:25px}
    .vith-metric-grid{grid-template-columns:1fr}
    .vith-archive-row{gap:14px}
    .vith-hero{flex-direction:column;text-align:center;gap:20px}
}

/* ─── Settings ───────────────────────────────────────────── */

.vith-settings-section{padding:24px;max-width:680px}
.vith-settings-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.vith-settings-row h3{color:var(--vith-text)}
.vith-settings-row .t-caption{margin-top:4px}
.vith-settings-connections-sub{padding-top:14px;border-top:0.5px solid var(--vith-border);margin-top:14px}
.vith-settings-connections-sub:first-of-type{padding-top:0;border-top:none;margin-top:0}
.vith-settings-connections-actions{display:flex;flex-wrap:wrap;gap:10px}
.vith-settings-connections-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 14px}
.vith-settings-connections-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:0.5px solid var(--vith-border)}
.vith-settings-connections-name{font-family:var(--font-body);font-size:14px;color:var(--vith-text)}
.vith-settings-connections-domain{font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;color:var(--vith-text-muted);text-transform:lowercase}
.vith-theme-toggle{display:inline-flex;gap:4px;padding:4px;border:var(--border-hairline);border-radius:var(--radius-pill);background:var(--vith-bg);flex:0 0 auto}
.vith-theme-opt{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--vith-text-muted);padding:8px 18px;border:none;border-radius:var(--radius-pill);background:transparent;cursor:pointer;transition:200ms ease}
.vith-theme-opt.selected{background:var(--vith-surface);color:var(--vith-text);box-shadow:var(--shadow-sm)}

@media (max-width:520px){
    .vith-settings-row{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ─── Dark-mode depth & elevation (borrowed from the marketing card) ──
   Dark-only, so light mode stays exactly as designed. Subtle top-lit
   gradient + soft drop shadow + faint highlight = floating, glassy cards. */

[data-theme="dark"] body {
    background-image: radial-gradient(1100px 680px at 50% -8%, rgba(26, 46, 74, 0.55), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[data-theme="dark"] .vith-card,
[data-theme="dark"] .vith-card-feature,
[data-theme="dark"] .vith-metric,
[data-theme="dark"] .vith-hero,
[data-theme="dark"] .vith-causal,
[data-theme="dark"] .vith-insight-card {
    background-image: linear-gradient(180deg, rgba(247, 244, 238, 0.05), rgba(247, 244, 238, 0));
    box-shadow: inset 0 1px 0 rgba(247, 244, 238, 0.05), 0 14px 34px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .vith-decision-card {
    background-image: linear-gradient(180deg, rgba(247, 244, 238, 0.06), rgba(247, 244, 238, 0));
    box-shadow: inset 0 1px 0 rgba(247, 244, 238, 0.06), 0 18px 40px rgba(0, 0, 0, 0.34);
}

/* ─── CausalCard — trigger → effect → $ (the differentiator) ── */

.vith-causal{margin-top:16px;padding:24px;border-radius:var(--radius-feature);border:0.5px solid var(--vith-border);background:var(--vith-surface)}
.vith-causal-chain{display:flex;align-items:stretch;gap:12px;margin-top:16px}
.vith-causal-node{flex:1 1 0;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--radius-card);background:var(--vith-bg);border:0.5px solid var(--vith-border)}
.vith-causal-domain{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--vith-text-muted)}
.vith-causal-label{font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--vith-text)}
.vith-causal-detail{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-causal-impact{border-color:rgba(201,168,76,0.45)}
.vith-causal-amount{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1;color:var(--vith-gold);margin:2px 0}
.vith-causal-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--vith-gold);font-size:18px}
.vith-causal-body{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:17px;line-height:1.5;color:var(--vith-text);margin-top:16px;max-width:760px}

@media (max-width:620px){
    .vith-causal-chain{flex-direction:column}
    .vith-causal-arrow{transform:rotate(90deg);padding:2px 0}
}

/* ─── Report (the value object) + Today teaser ───────────────── */

.vith-report-lead{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:1.15;color:var(--vith-text);margin-top:8px;max-width:760px}
.vith-report-score{font-family:var(--font-body);font-weight:300;font-size:16px;color:var(--vith-text-muted);margin:4px 0 24px}
.vith-report-score strong{font-weight:500;color:var(--vith-gold)}
.vith-report-block{margin-bottom:8px}
.vith-report-page .vith-decision-card{margin-top:16px}

.vith-report-teaser{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none}
.vith-report-teaser:hover{border-color:rgba(201,168,76,0.5)}
.vith-report-teaser-cta{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--vith-gold);white-space:nowrap;flex:0 0 auto}

@media (max-width:520px){
    .vith-report-lead{font-size:26px}
    .vith-report-teaser{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ─── Expenses ───────────────────────────────────────────── */

.vith-receipt-drop{text-align:center;padding:36px 24px;border:0.5px dashed rgba(201,168,76,0.5)}
.vith-receipt-drop:hover{border-color:var(--vith-gold)}
.vith-receipt-title{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--vith-text)}
.vith-receipt-sub{font-family:var(--font-mono);font-size:12px;color:var(--vith-text-muted);margin-top:6px}

.vith-expense-list{margin-top:16px;border-top:var(--border-hairline)}
.vith-expense-head{display:grid;grid-template-columns:90px 1fr auto;gap:16px;padding:10px 4px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--vith-text-muted);border-bottom:var(--border-hairline)}
.vith-expense-row{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:baseline;padding:14px 4px;border-bottom:var(--border-hairline)}
.vith-expense-date{font-family:var(--font-mono);font-size:12px;color:var(--vith-text-muted)}
.vith-expense-merchant{font-family:var(--font-body);font-weight:400;font-size:15px;color:var(--vith-text);display:flex;flex-direction:column;gap:2px}
.vith-expense-cat{font-family:var(--font-mono);font-size:11px;color:var(--vith-text-muted)}
.vith-expense-amount{font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--vith-text);white-space:nowrap}

@media (max-width:520px){
    .vith-expense-head{display:none}
    .vith-expense-row{grid-template-columns:1fr auto}
    .vith-expense-date{display:none}
}

/* ─── Nav: responsive drawer ─────────────────────────────── */

.vith-nav-logo{text-decoration:none;display:flex;align-items:center;padding:2px 8px 18px}

/* ── App shell: fixed left sidebar + fluid main that fills the viewport ──
   Replaces the old top bar. Desktop = persistent sidebar; <=768px collapses to a
   left slide-in drawer driven by a fixed toggle. */
.vith-shell{display:flex;min-height:100vh;background:var(--vith-bg)}
.vith-sidebar{flex:0 0 236px;width:236px;align-self:flex-start;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:22px 16px 20px;background:var(--vith-spotlight);border-right:0.5px solid var(--vith-border)}
/* Light mode: the navy "spotlight" sidebar stays navy by design — give it a crisp
   edge + soft depth so it lifts off the cream content as deliberate dark chrome
   instead of reading as a hard seam. Dark mode is left as-is. */
/* Light mode (design audit, Option 1): the sidebar goes light with dark nav text
   instead of staying navy, so it reads as one app with the cream content. */
[data-theme="light"] .vith-sidebar{background:var(--vith-surface);border-right:0.5px solid var(--vith-border);box-shadow:1px 0 0 var(--vith-border)}
[data-theme="light"] .vith-nav-group-label{color:var(--vith-text-muted)}
[data-theme="light"] .vith-nav-link{color:var(--vith-text-muted)}
[data-theme="light"] .vith-nav-link:hover{color:var(--vith-text);background-color:rgba(15,30,51,0.05)}
[data-theme="light"] .vith-nav-link.active{color:var(--vith-text);background-color:rgba(15,30,51,0.08)}
[data-theme="light"] .vith-nav-signout{color:var(--vith-text-muted);border-color:var(--vith-border)}
.vith-main{flex:1 1 auto;min-width:0;padding:40px clamp(24px,3.5vw,72px)}
.vith-nav-groups{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.vith-nav-group{display:flex;flex-direction:column;gap:2px}
.vith-nav-group-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:rgba(247,244,238,0.35);padding:0 12px 5px}
.vith-nav-link{display:block;width:100%;padding:9px 12px;font-size:14px}
.vith-nav-signout{margin-top:auto;justify-content:center;color:rgba(247,244,238,0.7);border-color:rgba(247,244,238,0.15)}
.vith-nav-toggle{display:none;background:none;border:none;cursor:pointer;color:rgba(247,244,238,0.85);padding:6px;line-height:0}
.vith-nav-scrim{position:fixed;inset:0;background:rgba(15,30,51,0.55);z-index:9999;border:none;cursor:pointer;animation:vith-fade 200ms ease}

@keyframes vith-fade{from{opacity:0}to{opacity:1}}

@media (max-width:768px){
    .vith-sidebar{position:fixed;top:0;left:0;bottom:0;height:auto;z-index:10000;padding-top:72px;transform:translateX(-100%);transition:transform 240ms cubic-bezier(0.2,0,0,1);box-shadow:24px 0 60px rgba(0,0,0,0.35)}
    .vith-sidebar.open{transform:translateX(0)}
    .vith-main{padding:64px 20px 40px}
    .vith-nav-toggle{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:13px;left:13px;z-index:10001;background:var(--vith-spotlight);border:0.5px solid var(--vith-border);border-radius:10px;padding:8px}
}

/* ─── Upload processing state ────────────────────────────── */

.vith-processing{text-align:center;max-width:560px}
.vith-processing-title{font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--vith-text);margin:4px 0 10px}

/* ─── Plan / Runways ─────────────────────────────────────── */

.vith-runway{margin-bottom:16px}
/* Plan page (/plan) — constrained column with consistent vertical rhythm so the
   runway / goals / metrics / accounts sections don't stretch full-width and the
   metric strip doesn't leave dead cols when it renders fewer than 4 cards. */
.vith-plan{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.vith-plan .vith-dash-head{margin-bottom:0}
.vith-plan .vith-runway{margin-bottom:0}
.vith-plan .vith-card-feature{margin:0}
.vith-plan-metrics{display:flex;flex-wrap:wrap;gap:12px}
.vith-plan-metrics > .vith-metric{flex:1 1 220px}
.vith-plan-caption{font-family:var(--font-mono);font-size:11px;line-height:1.55;color:var(--vith-text-muted);margin:0}
/* Runway timeline (Phase 3): today -> fully-funded (the only milestone /api/funded
   serves) + goal grid + metric sub-notes. */
.vith-metric-note{font-family:var(--font-body);font-size:13px;color:var(--vith-text-muted);margin-top:4px;line-height:1.4}
.vith-runway-rail{display:flex;align-items:center;margin:20px 0 6px}
.vith-runway-rail .dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--vith-gold)}
.vith-runway-rail .line{flex:1 1 auto;height:2px;margin:0 10px;border-radius:2px;background:linear-gradient(90deg,var(--vith-gold),var(--vith-border))}
.vith-runway-ends{display:flex;justify-content:space-between;gap:8px}
.vith-goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vith-runway-date{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.1;color:var(--vith-text);margin:10px 0 8px}
.vith-runway-headline{font-family:var(--font-body);font-weight:300;font-size:16px;color:var(--vith-text-muted);line-height:1.5;max-width:620px}
.vith-projection{width:100%;height:120px;margin:20px 0 8px;display:block}

.vith-driver-list{display:flex;flex-direction:column;gap:12px;margin-top:16px;border-top:var(--border-hairline);padding-top:18px}
.vith-driver-row{display:flex;align-items:baseline;gap:12px;font-family:var(--font-body);font-size:14px;color:var(--vith-text)}
.vith-driver-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;align-self:center}
.vith-driver-dot.good{background:var(--vith-success)}
.vith-driver-dot.watch{background:var(--vith-alert)}
.vith-driver-label{font-weight:500;flex:0 0 auto}
.vith-driver-detail{color:var(--vith-text-muted);font-size:13px}

.vith-health-list{display:flex;flex-direction:column;margin-top:16px;border-top:var(--border-hairline)}
.vith-health-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:var(--border-hairline)}
.vith-health-row:last-child{border-bottom:none}
.vith-health-label{font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--vith-text)}
.vith-health-detail{font-family:var(--font-body);font-weight:300;font-size:13px;color:var(--vith-text-muted);margin-top:2px;line-height:1.5}

@media (max-width:520px){
    .vith-runway-date{font-size:25px}
}

/* ============================================================================
   LIBRARY FOUNDATION (VIT-85 architecture, portal-native .vith-* naming)

   Six ordered layers: tokens → defaults → compositions → utilities →
   animations → blocks. Tokens live in :root above. The existing app blocks
   (cards, nav, metrics, dashboard, etc.) are intentionally left UNLAYERED for
   now so their cascade is byte-for-byte unchanged — VIT-85's staged approach
   for a codebase with legacy pages. New foundation primitives below are layered
   and additive: new class names, used by nothing existing, so the live app
   renders identically. Existing blocks migrate into @layer blocks in a later,
   browser-verified pass.
   ========================================================================== */

@layer tokens, defaults, compositions, utilities, animations, blocks;

/* === LAYER 2 — GLOBAL DEFAULTS === */

/* Visible keyboard focus across interactive elements. Unlayered on purpose so it
   wins over the existing unlayered `.vith-input { outline: none }`. Keyboard-only —
   pointer interaction and the resting look are unchanged. */
a:focus-visible,
button:focus-visible,
.vith-btn:focus-visible,
.vith-input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vith-gold);
    outline-offset: 2px;
}

/* === LAYER 3 — COMPOSITIONS (layout primitives, no decoration) === */

@layer compositions {
    .vith-stack { display: flex; flex-direction: column; }
    .vith-stack > * + * { margin-block-start: var(--stack-space, var(--space-md)); }

    .vith-cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cluster-space, var(--space-sm));
        align-items: var(--cluster-align, center);
    }

    /* Horizontal until the threshold, then stacked — no media query. */
    .vith-switcher { display: flex; flex-wrap: wrap; gap: var(--switcher-space, var(--space-md)); }
    .vith-switcher > * { flex-grow: 1; flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999); }

    /* Auto-responsive grid — the browser decides column count. */
    .vith-grid {
        display: grid;
        gap: var(--grid-space, var(--space-md));
        grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 280px), 100%), 1fr));
    }

    .vith-masonry { columns: var(--masonry-min, 240px) var(--masonry-cols, 3); column-gap: var(--masonry-space, var(--space-md)); }
    .vith-masonry > * { break-inside: avoid; margin-block-end: var(--masonry-space, var(--space-md)); }

    .vith-cover { display: flex; flex-direction: column; min-block-size: var(--cover-min, 100svh); gap: var(--space-sm); }
    .vith-cover > .vith-cover-centered { margin-block: auto; }
}

/* === LAYER 4 — UTILITIES (single purpose) === */

@layer utilities {
    .vith-u-text-center  { text-align: center; }
    .vith-u-text-balance { text-wrap: balance; }
    .vith-u-text-pretty  { text-wrap: pretty; }
    .vith-u-mono         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .vith-u-tabular      { font-variant-numeric: tabular-nums; }
    .vith-u-color-gold   { color: var(--vith-gold); }
    .vith-u-color-muted  { color: var(--vith-text-muted); }
    .vith-u-sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
}

/* === LAYER 5 — ANIMATIONS === */

@layer animations {
    /* Calm scroll-reveal as progressive enhancement. Default + reduced-motion = visible. */
    .vith-reveal { opacity: 1; }
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .vith-reveal {
                opacity: 0;
                transform: translateY(8px);
                animation: vith-reveal-in var(--duration-slow) var(--ease-out-cubic) both;
                animation-timeline: view();
                animation-range: entry 0% entry 40%;
            }
        }
    }
    @keyframes vith-reveal-in { to { opacity: 1; transform: none; } }
}

/* === LAYER 6 — BLOCKS (library foundation) === */

/* Animatable arc fill for the ring. Registered at top level (not cascade-scoped). */
@property --vith-ring-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@layer blocks {
    /* --- Live Funded Score ring ---
       Portable: pure HTML + CSS + inline SVG, zero JS, token-driven only.
       Drop in with a single custom property: style="--ring-score: 72".
       The score number is static; the arc fills calmly on reveal. */
    .vith-ring {
        --ring-score: 0;              /* 0–100, set inline */
        --ring-size: 100%;
        --ring-stroke: 6;
        container-type: inline-size;
        position: relative;
        width: var(--ring-size);
        max-width: 320px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
    }
    .vith-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .vith-ring-track { fill: none; stroke: var(--vith-border); stroke-width: var(--ring-stroke); }
    .vith-ring-arc {
        fill: none;
        stroke: var(--vith-gold);
        stroke-width: var(--ring-stroke);
        stroke-linecap: round;
        stroke-dasharray: 289.027;     /* 2πr, r = 46 */
        stroke-dashoffset: calc(289.027 - 289.027 * var(--vith-ring-progress) / 100);
        animation: vith-ring-fill var(--duration-crawl) var(--ease-out-cubic) forwards;
    }
    @keyframes vith-ring-fill { to { --vith-ring-progress: var(--ring-score); } }
    .vith-ring-center {
        position: absolute; inset: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    }
    .vith-ring-value {
        font-family: var(--font-display); font-weight: 500; font-size: 34cqi; line-height: 1;
        color: var(--vith-text);
        counter-reset: vith-score var(--ring-score);
    }
    .vith-ring-value::after { content: counter(vith-score); }
    .vith-ring-label {
        font-family: var(--font-body); font-weight: 500; font-size: 6cqi; letter-spacing: 0.08em;
        text-transform: uppercase; color: var(--vith-text-muted); margin-top: 4cqi;
    }
    @media (prefers-reduced-motion: reduce) {
        .vith-ring-arc { animation: none; --vith-ring-progress: var(--ring-score); }
    }
}

@layer blocks {
    /* --- data-* variant pattern (VIT-85) ---
       Component variants are attributes on the component, never modifier
       classes and never context selectors. Example: a featured card. */
    .vith-card[data-state="featured"] {
        border-color: var(--vith-gold);
        box-shadow: var(--shadow-md);
    }
}