/* ============================================================================
   Our Living Tree private workspace shell and app surfaces.
   ============================================================================ */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
    --olt-space-9: 4.5rem;
    --olt-space-10: 6rem;

    /* Typography */
    --olt-font-sans: var(--motif-font-body);
    --olt-font-display: var(--motif-font-h1);
    --olt-content-max: var(--layout-content-width);
    --olt-content-wide: 88rem;
    --olt-page-bg: var(--motif-background-page, var(--motif-color-page-bg-900));
    --olt-surface-base: var(--motif-card-background);
    --olt-surface-strong: color-mix(
        in oklch,
        var(--motif-seed-canvas) var(--motif-content-card-opacity),
        transparent);
    --olt-text-inverse: var(--motif-color-on-accent);
    --olt-overlay-scrim: rgba(0, 0, 0, 0.5);
    --olt-overlay-ink-800: rgba(0, 0, 0, 0.8);
    --olt-overlay-ink-900: rgba(0, 0, 0, 0.9);
    --olt-ivory-50: rgba(255, 248, 235, 0.05);
    --olt-ivory-70: rgba(255, 248, 235, 0.07);
    --olt-ivory-90: rgba(255, 248, 235, 0.09);
    --olt-ivory-110: rgba(255, 248, 235, 0.11);
    --olt-ivory-border-100: rgba(255, 248, 235, 0.1);
    --olt-ivory-border-140: rgba(255, 248, 235, 0.14);
    --olt-ivory-border-180: rgba(255, 248, 235, 0.18);
    --olt-ivory-border-220: rgba(255, 248, 235, 0.22);
    --olt-ivory-text-soft: rgba(255, 248, 235, 0.65);
    --olt-ivory-text-strong: rgba(255, 248, 235, 0.9);
    --olt-ivory-text-solid: rgba(255, 248, 235, 0.97);
    --olt-white-12: rgba(255, 255, 255, 0.12);
    --olt-white-30: rgba(255, 255, 255, 0.3);
    --olt-white-50: rgba(255, 255, 255, 0.5);
    --olt-white-70: rgba(255, 255, 255, 0.7);
    --olt-white-85: rgba(255, 255, 255, 0.85);
    --olt-white-88: rgba(255, 255, 255, 0.88);
    --olt-white-92: rgba(255, 255, 255, 0.92);

    /* Color palette – deep forest green, rich copper amber, warm neutrals */
    --olt-green-50: color-mix(in oklch, var(--motif-color-text-ink) 16%, var(--motif-color-page-bg-900)); /* warm sage hint                     */
    --olt-green-100: color-mix(in oklch, var(--motif-color-text-ink) 16%, var(--motif-color-page-bg-900)); /* soft sage                           */
    --olt-green-200: var(--motif-color-accent-primary); /* medium sage                         */
    --olt-green-300: var(--motif-color-accent-primary); /* sage green                          */
    --olt-green-400: var(--motif-color-accent-primary); /* mid forest                          */
    --olt-green-500: var(--motif-color-accent-primary); /* deep forest                         */
    --olt-green-600: var(--motif-color-accent-primary); /* primary – rich forest, not lime      */
    --olt-green-700: var(--motif-color-accent-primary); /* dark forest                         */
    --olt-green-800: color-mix(in oklch, var(--motif-color-accent-primary) 72%, var(--motif-color-page-bg-950)); /* deeper forest                       */
    --olt-green-900: color-mix(in oklch, var(--motif-color-accent-primary) 72%, var(--motif-color-page-bg-950)); /* near-black forest                   */
    --olt-forest-950: color-mix(in oklch, var(--motif-color-accent-primary) 62%, var(--motif-color-page-bg-950)); /* forest night                        */

    --olt-amber-50: color-mix(in oklch, var(--motif-color-text-ink) 16%, var(--motif-color-page-bg-900)); /* warm parchment                      */
    --olt-amber-100: color-mix(in oklch, var(--motif-color-accent-secondary) 16%, var(--motif-color-page-bg-900)); /* light warm                          */
    --olt-amber-200: var(--motif-color-accent-secondary); /* warm gold                           */
    --olt-amber-300: var(--motif-color-accent-secondary); /* golden                              */
    --olt-amber-400: var(--motif-color-accent-secondary); /* deep gold                           */
    --olt-amber-600: var(--motif-color-accent-secondary); /* copper sienna – rich, legacy feel   */
    --olt-amber-700: var(--motif-color-accent-secondary); /* deep copper                         */
    --olt-amber-800: color-mix(in oklch, var(--motif-color-accent-secondary) 72%, var(--motif-color-page-bg-950)); /* deep bronze                         */

    /* Accent colors for emotional resonance */
    --olt-rose-50: #fff2f4;
    --olt-rose-100: #ffe4e6;
    --olt-rose-200: #fecdd6;
    --olt-rose-400: #fb718d;
    --olt-rose-500: #e04060;
    --olt-rose-600: #c0284a;
    --olt-rose-700: #9f1239;
    --olt-blue-400: #60a5fa;
    --olt-blue-600: #2563eb;
    --olt-sky-100: #e0f2fe;
    --olt-sky-400: #38bdf8;
    --olt-sky-500: #0ea5e9;
    --olt-sky-600: #0284c7;
    --olt-purple-100: #f3e8ff;
    --olt-purple-400: #c084fc;
    --olt-purple-600: #9333ea;
    --olt-purple-800: #6b21a8;

    /* Neutral palette – warm charcoal, not cold slate */
    --olt-slate-50: color-mix(in oklch, var(--motif-color-text-ink) 16%, var(--motif-color-page-bg-900)); /* warm off-white                      */
    --olt-slate-100: color-mix(in oklch, var(--motif-color-text-ink) 16%, var(--motif-color-page-bg-900)); /* warm light                          */
    --olt-slate-200: var(--motif-color-text-ink); /* warm border                         */
    --olt-slate-300: var(--motif-color-text-muted); /* warm mid                            */
    --olt-slate-400: var(--motif-color-text-muted); /* warm muted                          */
    --olt-slate-500: var(--motif-color-text-primary); /* warm medium                         */
    --olt-slate-600: var(--motif-color-text-primary); /* warm dark                           */
    --olt-slate-700: var(--motif-color-text-primary); /* warm darker                         */
    --olt-slate-800: color-mix(in oklch, var(--motif-color-text-primary) 72%, var(--motif-color-page-bg-950)); /* warm very dark                      */
    --olt-slate-900: color-mix(in oklch, var(--motif-color-text-primary) 72%, var(--motif-color-page-bg-950)); /* warm near-black                     */

    /* Layout dimensions */
    --olt-sidebar-w: var(--layout-sidebar-width);
    --olt-topbar-h: var(--layout-topbar-height);

    /* Rounded corners – modern, warm aesthetic */
    --olt-radius-sm: var(--motif-radius-card);
    --olt-radius-md: var(--motif-radius-card);
    --olt-radius-lg: var(--motif-radius-card);
    --olt-radius-xl: var(--motif-radius-card);
    --olt-radius-2xl: var(--motif-radius-card);
    --olt-radius-3xl: var(--motif-radius-card);

    /* Shadows – layered depth */
    --olt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --olt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --olt-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --olt-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --olt-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --olt-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --olt-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.2);

    /* Transitions – sophisticated motion */
    --olt-transition-fast: var(--motif-motion-ease-standard);
    --olt-transition: var(--motif-motion-ease-standard);
    --olt-transition-slow: var(--motif-motion-ease-standard);
    --olt-transition-slowest: var(--motif-motion-ease-standard);
    --olt-focus-ring: 0 0 0 3px rgba(31, 112, 64, 0.14);
    --olt-green-glow-soft: 0 0 8px rgba(31, 112, 64, 0.24);
    --olt-green-glow: 0 0 10px rgba(31, 112, 64, 0.3);
    --olt-green-glow-strong: 0 0 20px rgba(31, 112, 64, 0.6);

    /* Shell surfaces */
    --olt-glass-bg: rgba(255, 255, 255, 0.8);
    --olt-glass-bg-soft: rgba(255, 255, 255, 0.7);
    --olt-glass-border: var(--olt-white-30);
    --olt-glass-gradient: var(--olt-glass-bg);
    --olt-glass-sidebar-gradient: var(--olt-glass-bg-soft);
    --olt-backdrop: blur(8px);

    /* Spacing scale – 8px base for consistency */
    --olt-space-1: 0.25rem;
    --olt-space-2: 0.5rem;
    --olt-space-3: 0.75rem;
    --olt-space-4: 1rem;
    --olt-space-5: 1.25rem;
    --olt-space-6: 1.5rem;
    --olt-space-8: 2rem;
    --olt-space-12: 3rem;
    --olt-space-16: 4rem;
    --olt-space-24: 6rem;
}

body {
}


/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    height: 100%;
    font-size: 16px;
    scroll-behavior: smooth;
}

[hidden] {
    display: none !important;
}

body.olt-body,
body.olt-app-body {
    margin: 0;
    min-height: 100%;
    font-family: var(--olt-font-sans);
    background: var(--olt-page-bg);
    color: var(--olt-slate-800);
    font-size: 1.0625rem;
    line-height: 1.72;
}

/* Typography – semantic hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--olt-font-display);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--olt-slate-900);
}

h1 { font-size: clamp(3rem, 4vw, 4.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(2.35rem, 3vw, 3.35rem); letter-spacing: -0.025em; }
h3 { font-size: 1.65rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0; }

/* Links */
a {
    color: var(--olt-green-600);
    text-decoration: none;
    transition: color var(--olt-transition);
}

a:hover {
    color: var(--olt-green-700);
}

/* Focus styles – accessibility */
:focus-visible {
    outline: 2px solid var(--olt-green-600);
    outline-offset: 2px;
}

.olt-skip-link {
    position: absolute;
    z-index: 10000;
    inset-block-start: var(--olt-space-3);
    inset-inline-start: var(--olt-space-3);
    padding: var(--olt-space-2) var(--olt-space-4);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    color: var(--olt-green-800);
    font-weight: 700;
    box-shadow: var(--olt-shadow-lg);
    transform: translateY(-160%);
}

.olt-skip-link:focus,
.olt-skip-link:focus-visible {
    transform: translateY(0);
}

/* Selection */
::selection {
    background: var(--olt-green-200);
    color: var(--olt-forest-950);
}

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { text-shadow: var(--olt-green-glow); }
    50% { text-shadow: var(--olt-green-glow-strong); }
}

/* Data-reveal for scroll animations */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px) scale(.985);
    filter: blur(10px);
    transition:
        opacity var(--olt-transition-slowest),
        transform var(--olt-transition-slowest),
        filter var(--olt-transition-slowest);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

[data-reveal="delay-1"] { transition-delay: 100ms; }
[data-reveal="delay-2"] { transition-delay: 180ms; }
[data-reveal="delay-3"] { transition-delay: 260ms; }
[data-reveal="delay-4"] { transition-delay: 340ms; }

@media (max-width: 720px) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ── App Shell ─────────────────────────────────────────────────────────────── */
.olt-shell {
    display: flex;
    min-height: 100dvh;
}

/* ── Top Bar (Mobile Navigation) ───────────────────────────────────────────── */
.olt-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--olt-topbar-h);
    background: var(--olt-glass-gradient);
    backdrop-filter: var(--olt-backdrop);
    border-bottom: 1px solid var(--olt-glass-border);
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--olt-space-4);
    gap: var(--olt-space-4);
}

.olt-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--olt-space-2);
    color: var(--olt-slate-700);
    font-size: 1.25rem;
    transition: color var(--olt-transition);
    border-radius: var(--olt-radius-md);
}

.olt-menu-btn:hover {
    background: var(--olt-slate-100);
    color: var(--olt-green-600);
}

.olt-topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    flex: 1;
    min-width: 0;
}

.olt-topbar-mark {
    font-family: var(--olt-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--olt-green-600);
    letter-spacing: 0.05em;
}

.olt-topbar-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.olt-topbar-logo {
    font-weight: 600;
    color: var(--olt-slate-900);
    font-size: 1rem;
}

.olt-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
}

.olt-topbar-session {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 12rem;
    line-height: 1.1;
}

.olt-topbar-session-label,
.olt-session-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--olt-green-700);
}

.olt-topbar-session-name,
.olt-session-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--olt-slate-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olt-session-bar {
    position: fixed;
    top: var(--olt-space-4);
    right: var(--olt-space-6);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: var(--olt-space-4);
    max-width: min(36rem, calc(100vw - var(--olt-sidebar-w) - var(--olt-space-12)));
    padding: var(--olt-space-3) var(--olt-space-4);
    background: var(--olt-glass-gradient);
    backdrop-filter: var(--olt-backdrop);
    border: 1px solid var(--olt-glass-border);
    border-radius: var(--olt-radius-md);
    box-shadow: var(--olt-shadow-md);
}

.olt-session-state,
.olt-session-actions {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    min-width: 0;
}

.olt-session-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.olt-session-context {
    font-size: 0.78rem;
    color: var(--olt-slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.olt-session-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--olt-space-2);
    min-height: 2.25rem;
    padding: 0 var(--olt-space-3);
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--olt-slate-700);
    white-space: nowrap;
    transition: all var(--olt-transition);
}

.olt-session-button:hover {
    background: var(--olt-slate-100);
    border-color: var(--olt-slate-400);
}

.olt-session-button--danger {
    color: var(--olt-rose-700);
    background: var(--olt-rose-50);
    border-color: var(--olt-rose-200);
}

.olt-session-button--danger:hover {
    background: var(--olt-rose-100);
    border-color: var(--olt-rose-300);
}

/* ── Sidebar (Desktop) ─────────────────────────────────────────────────────── */
.olt-sidebar {
    width: var(--olt-sidebar-w);
    background: var(--olt-glass-sidebar-gradient);
    border-right: 1px solid var(--olt-glass-border);
    backdrop-filter: var(--olt-backdrop);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 40;
    transition: transform var(--olt-transition);
    overflow-y: auto;
    padding: 0 0 var(--olt-space-6);
    scroll-behavior: smooth;
}

.olt-sidebar::-webkit-scrollbar {
    width: 6px;
}

.olt-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.olt-sidebar::-webkit-scrollbar-thumb {
    background: var(--olt-slate-300);
    border-radius: 3px;
    transition: background var(--olt-transition);
}

.olt-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--olt-slate-400);
}

.olt-sidebar-brand-block {
    padding: var(--olt-space-8);
    border-bottom: 1px solid var(--olt-slate-200);
}

.olt-sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--olt-space-4);
    padding: var(--olt-space-3);
    margin-bottom: var(--olt-space-4);
    border-radius: var(--olt-radius-lg);
    transition: background var(--olt-transition);
}

.olt-sidebar-logo:hover {
    background: var(--olt-slate-100);
}

.olt-logo-icon,
.olt-logo-mark {
    font-family: var(--olt-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--olt-green-600);
    min-width: 2rem;
    text-align: center;
}

.olt-logo-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.olt-logo-text {
    font-weight: 700;
    color: var(--olt-slate-900);
    font-size: 1.08rem;
}

/* ── Family Selector ───────────────────────────────────────────────────────── */
.olt-family-selector {
    padding: var(--olt-space-4) var(--olt-space-6);
    border-bottom: 1px solid var(--olt-slate-200);
}

.olt-locale-selector {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-1);
    min-width: 8.5rem;
    color: var(--olt-slate-600);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.olt-locale-select {
    min-height: 2.25rem;
    padding-block: var(--olt-space-2);
    padding-inline: var(--olt-space-3);
    font-size: 0.86rem;
    text-transform: none;
}

.olt-user-actions .olt-locale-selector {
    width: 100%;
}

.olt-family-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--olt-space-3) var(--olt-space-4);
    background: var(--olt-slate-100);
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    color: var(--olt-slate-700);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--olt-transition);
}

.olt-family-btn:hover {
    background: var(--olt-slate-200);
    border-color: var(--olt-slate-400);
    color: var(--olt-slate-800);
}

.olt-family-dropdown {
    margin-top: var(--olt-space-2);
    padding: var(--olt-space-2);
    background: var(--olt-slate-50);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    max-height: 300px;
    overflow-y: auto;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.olt-nav-group {
    display: block;
}

.olt-nav-group--primary {
    padding-bottom: var(--olt-space-2);
}

.olt-nav-label {
    padding: var(--olt-space-4) var(--olt-space-6) var(--olt-space-2);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olt-slate-500);
    margin: 0;
}

.olt-nav {
    list-style: none;
    margin: 0;
    padding: 0 var(--olt-space-4);
}

.olt-nav--primary {
    padding-bottom: var(--olt-space-3);
}

.olt-nav-item {
    margin: 0;
}

.olt-nav-link {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    min-width: 0;
    padding: var(--olt-space-3) var(--olt-space-4);
    margin: var(--olt-space-1) 0;
    color: var(--olt-slate-700);
    border-radius: var(--olt-radius-md);
    transition: all var(--olt-transition);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.25;
}

.olt-nav-link:hover {
    background: var(--olt-slate-100);
    color: var(--olt-green-600);
}

.olt-nav-link.is-active {
    background: var(--olt-green-100);
    color: var(--olt-green-700);
    font-weight: 600;
}

.olt-nav-icon {
    width: 1.25rem;
    min-width: 1.25rem;
    text-align: center;
}

.olt-nav-link span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sidebar User Chip ─────────────────────────────────────────────────────── */
.olt-sidebar-user {
    margin-top: auto;
    padding: var(--olt-space-4) var(--olt-space-6);
    border-top: 1px solid var(--olt-slate-200);
}

.olt-user-chip {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    padding: var(--olt-space-3) var(--olt-space-4);
    background: var(--olt-slate-100);
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-lg);
    cursor: pointer;
    transition: all var(--olt-transition);
}

.olt-user-chip:hover {
    background: var(--olt-slate-200);
    border-color: var(--olt-slate-400);
}

.olt-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--olt-green-400), var(--olt-green-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--olt-text-inverse);
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.olt-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.olt-user-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--olt-slate-900);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.olt-user-email {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Main Content Area ─────────────────────────────────────────────────────── */
.olt-main {
    margin-left: var(--olt-sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
    background: var(--olt-page-bg);
}

.olt-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--olt-overlay-scrim);
    z-index: 30;
    animation: fadeInUp 200ms ease-out;
}

/* ── Loading & Spinners ────────────────────────────────────────────────────── */
.olt-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--olt-space-4);
    padding: var(--olt-space-8);
}

.olt-loading--framed {
    height: 100dvh;
}

.olt-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--olt-green-200);
    border-top-color: var(--olt-green-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.olt-loading-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--olt-slate-900);
}

.olt-loading-copy {
    font-size: 0.875rem;
    color: var(--olt-slate-600);
    text-align: center;
    max-width: 400px;
}

/* ── Buttons (Unified System) ──────────────────────────────────────────────── */
.olt-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--olt-space-2);
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: var(--olt-radius-lg);
    font-family: var(--olt-font-sans);
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--olt-transition);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}

.olt-btn:focus-visible {
    outline: 2px solid var(--olt-green-600);
    outline-offset: 2px;
}

.olt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button variants */
.olt-btn--primary {
    background: linear-gradient(135deg, var(--olt-green-600), var(--olt-green-500));
    color: var(--olt-text-inverse);
    box-shadow: var(--olt-shadow-md);
}

.olt-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--olt-green-700), var(--olt-green-600));
    transform: translateY(-2px);
    box-shadow: var(--olt-shadow-lg);
}

.olt-btn--secondary {
    background: var(--olt-slate-200);
    color: var(--olt-slate-800);
}

.olt-btn--secondary:hover:not(:disabled) {
    background: var(--olt-slate-300);
}

.olt-btn--ghost {
    background: transparent;
    color: var(--olt-green-600);
    border: 1px solid var(--olt-green-600);
}

.olt-btn--ghost:hover:not(:disabled) {
    background: var(--olt-green-50);
    color: var(--olt-green-700);
    border-color: var(--olt-green-700);
}

.olt-btn--danger {
    background: linear-gradient(135deg, var(--olt-rose-600), var(--olt-rose-500));
    color: var(--olt-text-inverse);
}

.olt-btn--danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #c41c3b, #d32e52);
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
label.olt-label {
    font-weight: 600;
    color: var(--olt-slate-900);
    font-size: 0.95rem;
}

.olt-input,
.olt-textarea {
    padding: var(--olt-space-3) var(--olt-space-4);
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    font-family: var(--olt-font-sans);
    font-size: 0.95rem;
    color: var(--olt-slate-800);
    background: var(--olt-surface-base);
    transition: all var(--olt-transition);
}

.olt-input:focus,
.olt-textarea:focus {
    outline: none;
    border-color: var(--olt-green-600);
    box-shadow: var(--olt-focus-ring);
}

.olt-textarea {
    resize: vertical;
    min-height: 100px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.olt-input::placeholder,
.olt-textarea::placeholder {
    color: var(--olt-slate-400);
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.olt-card {
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    padding: var(--olt-space-6);
    box-shadow: var(--olt-shadow);
    transition: all var(--olt-transition);
}

.olt-card:hover {
    border-color: var(--olt-slate-300);
    box-shadow: var(--olt-shadow-md);
    transform: translateY(-2px);
}

/* ── Posts & Feed Items ────────────────────────────────────────────────────── */
.olt-post {
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    overflow: hidden;
    margin-bottom: var(--olt-space-6);
    animation: fadeInUp 400ms ease-out;
}

.olt-post-header {
    padding: var(--olt-space-4);
    border-bottom: 1px solid var(--olt-slate-100);
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
}

.olt-post-actions {
    display: flex;
    gap: var(--olt-space-2);
}

.olt-post-delete,
.olt-toggle-comments,
.olt-post-add-album,
.olt-feed-open-comments {
    white-space: nowrap;
}

.olt-post-body {
    padding: var(--olt-space-4);
}

.olt-post-media {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

/* ── Comments ──────────────────────────────────────────────────────────────── */
.olt-comments {
    padding: var(--olt-space-4);
    border-top: 1px solid var(--olt-slate-100);
}

.olt-comment {
    display: flex;
    gap: var(--olt-space-3);
    margin-bottom: var(--olt-space-4);
    padding-bottom: var(--olt-space-4);
    border-bottom: 1px solid var(--olt-slate-100);
}

.olt-comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.olt-comment-body {
    flex: 1;
    min-width: 0;
}

.olt-comment-author {
    font-weight: 600;
    color: var(--olt-slate-900);
    font-size: 0.875rem;
}

/* ── Chat ──────────────────────────────────────────────────────────────────── */
.olt-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--olt-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

/* ── Tree (SVG) ────────────────────────────────────────────────────────────── */

/* ── Photo Gallery ────────────────────────────────────────────────────────────  */
.olt-photo-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--olt-radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--olt-slate-100);
}

.olt-photo-card img,
.olt-photo-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.olt-photo-card--video {
    background: var(--olt-slate-900);
}

.olt-photo-card--video .olt-photo-video {
    object-fit: contain;
}

.olt-media-type-chip {
    position: absolute;
    top: var(--olt-space-2);
    left: var(--olt-space-2);
    padding: var(--olt-space-1) var(--olt-space-2);
    border-radius: var(--olt-radius-sm);
    background: var(--olt-overlay-ink-800);
    color: var(--olt-text-inverse);
    font-size: 0.72rem;
    font-weight: 800;
}

/* ── Albums ────────────────────────────────────────────────────────────────── */
.olt-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--olt-space-6);
    padding: var(--olt-space-6);
}

.olt-album-card {
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--olt-transition);
}

.olt-album-card:hover {
    box-shadow: var(--olt-shadow-md);
    transform: translateY(-4px);
    border-color: var(--olt-slate-300);
}

/* ── Members ───────────────────────────────────────────────────────────────── */
.olt-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--olt-space-4);
    padding: var(--olt-space-6);
}

.olt-member-card {
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    padding: var(--olt-space-4);
    text-align: center;
    transition: all var(--olt-transition);
}

.olt-member-card:hover {
    border-color: var(--olt-green-600);
    box-shadow: var(--olt-shadow-md);
}

.olt-member-name {
    font-weight: 600;
    color: var(--olt-slate-900);
    margin-bottom: var(--olt-space-2);
}

/* ── Modals ────────────────────────────────────────────────────────────────── */
.olt-modal {
    background: var(--olt-surface-base);
    border-radius: var(--olt-radius-2xl);
    box-shadow: var(--olt-shadow-2xl);
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    animation: fadeInScale 300ms ease-out;
}

/* ── Notifications ────────────────────────────────────────────────────────────  */

/* ── Public Homepage Styles ───────────────────────────────────────────────────── */
body.olt-public-body,
body.olt-home-body {
    background: var(--olt-page-bg);
}

.olt-public-shell,
.olt-home-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.olt-public-header,
.olt-home-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--olt-glass-gradient);
    backdrop-filter: var(--olt-backdrop);
    border-bottom: 1px solid var(--olt-glass-border);
    padding: 1.125rem clamp(1.5rem, 3vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--olt-space-8);
}

.olt-public-brand,
.olt-home-brand {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    font-weight: 700;
    color: var(--olt-slate-900);
    font-size: 1.45rem;
}

.olt-public-brand-text {
    font-family: var(--olt-font-display);
}

.olt-home-brand-logo {
    width: 2rem;
    height: 2rem;
}

.olt-home-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.olt-public-actions,
.olt-home-actions {
    display: flex;
    align-items: center;
    gap: var(--olt-space-6);
    margin-left: auto;
}

.olt-public-nav,
.olt-home-nav {
    display: flex;
    gap: var(--olt-space-6);
}

.olt-public-link {
    color: var(--olt-slate-700);
    font-size: 1rem;
    font-weight: 600;
    transition: color var(--olt-transition);
}

.olt-public-link:hover {
    color: var(--olt-green-600);
}

.olt-public-lang-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--olt-space-2);
    max-width: 100%;
    padding: var(--olt-space-1);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--olt-slate-200);
    border-radius: 999px;
    box-shadow: var(--olt-shadow-xs);
}

.olt-public-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.25rem;
    padding: var(--olt-space-2) var(--olt-space-3);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--olt-slate-600);
    border-radius: 999px;
    transition: color var(--olt-transition), background var(--olt-transition), box-shadow var(--olt-transition);
}

.olt-public-lang-link:hover {
    color: var(--olt-green-600);
    background: rgba(31, 112, 64, 0.08);
}

.olt-public-main,
.olt-home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.olt-public-header-cta,
.olt-home-header-cta {
    flex-shrink: 0;
}

.olt-public-header-cta span {
    min-width: 0;
}

/* ── Home Hero Section ─────────────────────────────────────────────────────── */
.olt-home-hero {
    width: min(100rem, calc(100% - 3rem));
    margin: 0 auto;
    padding: clamp(3rem, 5vw, 5.75rem) 0 clamp(3.5rem, 6vw, 6rem);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(30rem, 1.08fr);
    gap: clamp(var(--olt-space-8), 5vw, var(--olt-space-16));
    align-items: center;
}

.olt-home-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-6);
    max-width: 43rem;
}

.olt-home-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--olt-space-2);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--olt-green-600);
}

.olt-home-hero-kicker {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olt-amber-600);
}

.olt-home-title {
    font-size: clamp(3.45rem, 5.2vw, 6.15rem);
    line-height: 0.98;
    max-width: 11ch;
    text-wrap: balance;
}

.olt-home-title-accent {
    color: var(--olt-green-600);
}

.olt-home-lede {
    font-size: 1.28rem;
    color: var(--olt-slate-700);
    line-height: 1.58;
    max-width: 38rem;
}

.olt-home-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-3);
    padding-top: var(--olt-space-2);
}

.olt-home-hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: var(--olt-space-2);
    min-height: 2.75rem;
    padding: var(--olt-space-2) var(--olt-space-4);
    border: 1px solid var(--olt-slate-200);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--olt-shadow-xs);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--olt-slate-700);
}

.olt-home-hero-proof svg {
    width: 1rem;
    height: 1rem;
    color: var(--olt-green-600);
}

.olt-home-cta-row {
    display: flex;
    gap: var(--olt-space-4);
    margin-top: var(--olt-space-2);
    flex-wrap: wrap;
}

.olt-home-cta-main,
.olt-home-cta-ghost {
    white-space: normal;
}

.olt-home-visual-stack {
    position: relative;
    min-height: 45rem;
}

.olt-home-hero-art {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--olt-radius-3xl);
    border: 1px solid rgba(31, 112, 64, 0.14);
    box-shadow: var(--olt-shadow-xl);
    aspect-ratio: 16 / 9;
}

.olt-home-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 52%, rgba(7, 19, 10, 0.36) 100%),
        radial-gradient(circle at 18% 10%, rgba(255, 248, 235, 0.42), transparent 38%);
    pointer-events: none;
}

.olt-home-hero-art img,
.olt-home-art-card img,
.olt-home-trust-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.olt-home-product-preview {
    position: absolute;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: -4.5rem;
    width: min(35rem, calc(100% - 2rem));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: var(--olt-radius-2xl);
    background: rgba(255, 251, 245, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: var(--olt-shadow-2xl);
}

.olt-home-product-bar {
    display: flex;
    align-items: center;
    gap: var(--olt-space-2);
    min-height: 3rem;
    padding: 0 var(--olt-space-5);
    border-bottom: 1px solid var(--olt-slate-200);
}

.olt-home-product-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--olt-amber-300);
}

.olt-home-product-dot:nth-child(2) {
    background: var(--olt-green-300);
}

.olt-home-product-dot:nth-child(3) {
    background: var(--olt-rose-400);
}

.olt-home-product-title {
    margin-left: var(--olt-space-2);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--olt-slate-800);
}

.olt-home-product-grid {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: var(--olt-space-4);
    padding: var(--olt-space-5);
}

.olt-home-product-nav {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-2);
}

.olt-home-product-nav span {
    display: flex;
    align-items: center;
    gap: var(--olt-space-2);
    min-height: 2.35rem;
    padding: var(--olt-space-2) var(--olt-space-3);
    border-radius: var(--olt-radius-md);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--olt-slate-600);
}

.olt-home-product-nav .is-active {
    background: var(--olt-green-600);
    color: var(--olt-text-inverse);
}

.olt-home-product-nav svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.olt-home-product-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--olt-space-3);
}

.olt-home-product-card {
    padding: var(--olt-space-4);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-lg);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--olt-shadow-xs);
}

.olt-home-product-card--wide {
    grid-column: 1 / -1;
}

.olt-home-product-kicker {
    display: inline-block;
    margin-bottom: var(--olt-space-2);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--olt-amber-700);
}

.olt-home-product-card h2,
.olt-home-product-card h3 {
    font-size: 1.06rem;
    line-height: 1.3;
    color: var(--olt-slate-900);
}

.olt-home-product-card p {
    margin-top: var(--olt-space-2);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--olt-slate-600);
}

.olt-home-memory-wave {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 2rem;
    margin-top: var(--olt-space-3);
}

.olt-home-memory-wave span {
    width: 0.34rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--olt-green-500);
}

.olt-home-memory-wave span:nth-child(2),
.olt-home-memory-wave span:nth-child(5) {
    height: 1.55rem;
    background: var(--olt-amber-600);
}

.olt-home-memory-wave span:nth-child(3) {
    height: 1.9rem;
}

.olt-home-memory-wave span:nth-child(4) {
    height: 1.3rem;
}

/* ── Utility: screen-reader only ──────────────────────────────────────────── */
.olt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Language switcher active state ───────────────────────────────────────── */
.olt-public-lang-link.is-active {
    color: var(--olt-green-700);
    font-weight: 700;
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE SECTION SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.olt-home-section {
    padding: clamp(4.5rem, 7vw, 7rem) 0;
}

.olt-home-section--center {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, #f8fbf5 100%);
}

.olt-home-section--journey {
    background: linear-gradient(145deg, #102617 0%, #15351f 58%, #0a170d 100%);
    color: var(--olt-text-inverse);
}

.olt-home-section--trust {
    background: linear-gradient(160deg, #fff8eb 0%, #f3f8ef 100%);
}

.olt-home-section--compare {
    background: linear-gradient(160deg, #edf7f0 0%, #fff8eb 100%);
}

.olt-home-section--legacy {
    background: linear-gradient(160deg, #07130a 0%, #0e1f12 45%, #09150b 100%);
    color: var(--olt-text-inverse);
}

.olt-home-section--cta {
    background: linear-gradient(145deg, #1f6038 0%, #154826 60%, #0e3018 100%);
    color: var(--olt-text-inverse);
}

.olt-home-section-head {
    width: min(54rem, calc(100% - 3rem));
    max-width: none;
    margin: 0 auto var(--olt-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
    text-align: center;
}

.olt-home-section-head--left {
    margin: 0;
    text-align: left;
}

.olt-home-section-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olt-green-600);
    margin-bottom: 0;
}

.olt-home-section--journey .olt-home-section-label,
.olt-home-section--legacy .olt-home-section-label,
.olt-home-section--cta .olt-home-section-label {
    color: var(--olt-amber-300);
}

.olt-home-section--journey .olt-home-section-title,
.olt-home-section--legacy .olt-home-section-title,
.olt-home-section--cta .olt-home-section-title {
    color: var(--olt-ivory-text-solid);
}

.olt-home-section-title {
    font-family: var(--olt-font-display);
    font-size: clamp(2.45rem, 3.2vw, 3.8rem);
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: 0;
    text-wrap: balance;
}

.olt-home-section-accent {
    color: var(--olt-green-600);
}

.olt-home-section--legacy .olt-home-section-accent {
    color: var(--olt-amber-300);
}

.olt-home-section--cta .olt-home-section-accent {
    color: var(--olt-white-92);
}

.olt-home-section-copy {
    font-size: 1.2rem;
    line-height: 1.64;
    color: var(--olt-slate-600);
    text-wrap: pretty;
}

.olt-home-section--journey .olt-home-section-copy,
.olt-home-section--legacy .olt-home-section-copy {
    color: var(--olt-ivory-text-soft);
}

.olt-home-section--cta .olt-home-section-copy {
    color: var(--olt-white-85);
}

.olt-home-lane-grid,
.olt-home-journey,
.olt-home-compare-grid {
    width: min(var(--olt-content-max), calc(100% - 3rem));
    margin: 0 auto;
    display: grid;
    gap: var(--olt-space-6);
}

.olt-home-lane-grid {
    grid-template-columns: repeat(3, 1fr);
}

.olt-home-lane-card,
.olt-home-journey-step,
.olt-home-compare-card {
    border-radius: var(--olt-radius-xl);
    padding: var(--olt-space-8);
}

.olt-home-lane-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--olt-slate-200);
    box-shadow: var(--olt-shadow-sm);
    transition: transform var(--olt-transition), box-shadow var(--olt-transition), border-color var(--olt-transition);
}

.olt-home-lane-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--olt-shadow-md);
    border-color: var(--olt-green-200);
}

.olt-home-lane-icon,
.olt-home-legacy-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--olt-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.olt-home-lane-icon {
    margin-bottom: var(--olt-space-4);
    background: var(--olt-green-50);
    color: var(--olt-green-600);
}

.olt-home-lane-icon svg,
.olt-home-legacy-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.olt-home-lane-card h3,
.olt-home-compare-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--olt-slate-900);
}

.olt-home-lane-card p,
.olt-home-journey-step p,
.olt-home-compare-card li,
.olt-home-trust-card p,
.olt-home-legacy-card p {
    font-size: 1.02rem;
    line-height: 1.62;
}

.olt-home-lane-card p {
    margin-top: var(--olt-space-3);
    color: var(--olt-slate-600);
}

.olt-home-art-strip {
    width: min(92rem, calc(100% - 3rem));
    margin: var(--olt-space-12) auto 0;
    display: grid;
    grid-template-columns: 1.35fr 0.9fr;
    gap: var(--olt-space-6);
    align-items: stretch;
}

.olt-home-art-card,
.olt-home-trust-art {
    margin: 0;
    overflow: hidden;
    border-radius: var(--olt-radius-2xl);
    border: 1px solid rgba(31, 112, 64, 0.16);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-lg);
}

.olt-home-art-card {
    display: flex;
    flex-direction: column;
}

.olt-home-art-card img {
    aspect-ratio: 4 / 3;
}

.olt-home-art-card--large img {
    min-height: 30rem;
}

.olt-home-art-card figcaption {
    padding: var(--olt-space-4) var(--olt-space-5);
    font-size: 1rem;
    font-weight: 800;
    color: var(--olt-green-700);
    background: rgba(255, 251, 245, 0.9);
}

.olt-home-journey {
    grid-template-columns: repeat(3, 1fr);
}

.olt-home-journey-step {
    background: var(--olt-ivory-70);
    border: 1px solid var(--olt-ivory-border-140);
}

.olt-home-journey-number {
    display: block;
    margin-bottom: var(--olt-space-6);
    font-family: var(--olt-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--olt-amber-300);
}

.olt-home-journey-step h3 {
    font-size: 1.42rem;
    color: var(--olt-text-inverse);
}

.olt-home-journey-step p {
    margin-top: var(--olt-space-3);
    color: var(--olt-ivory-text-soft);
}

.olt-home-trust-layout {
    width: min(96rem, calc(100% - 3rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(25rem, 1fr);
    gap: var(--olt-space-8);
    align-items: start;
}

.olt-home-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--olt-space-5);
}

.olt-home-trust-card {
    padding: var(--olt-space-6);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--olt-shadow-xs);
}

.olt-home-trust-card > svg {
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: var(--olt-space-4);
    color: var(--olt-green-600);
}

.olt-home-trust-card h3 {
    font-size: 1.18rem;
    color: var(--olt-slate-900);
}

.olt-home-trust-card p {
    margin-top: var(--olt-space-2);
    color: var(--olt-slate-600);
}

.olt-home-trust-art {
    grid-column: 2;
    aspect-ratio: 4 / 3;
}

.olt-home-compare-grid {
    grid-template-columns: repeat(4, 1fr);
}

.olt-home-compare-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--olt-slate-200);
    box-shadow: var(--olt-shadow-sm);
}

.olt-home-compare-card--olt {
    background: linear-gradient(145deg, #1f6038 0%, #173d24 100%);
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--olt-text-inverse);
    box-shadow: var(--olt-shadow-lg);
}

.olt-home-compare-card--olt h3 {
    color: var(--olt-text-inverse);
}

.olt-home-compare-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-5);
    padding: 0;
    list-style: none;
}

.olt-home-compare-card li {
    position: relative;
    padding-left: 1.25rem;
    color: var(--olt-slate-600);
}

.olt-home-compare-card li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--olt-amber-600);
}

.olt-home-compare-card--olt li {
    color: var(--olt-ivory-text-strong);
}

.olt-home-legacy-grid {
    width: min(var(--olt-content-max), calc(100% - 3rem));
    margin: 0 auto var(--olt-space-12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--olt-space-6);
}

.olt-home-legacy-card {
    background: var(--olt-ivory-70);
    border: 1px solid var(--olt-ivory-border-140);
    border-radius: var(--olt-radius-xl);
    padding: var(--olt-space-8);
}

.olt-home-legacy-card:hover {
    background: var(--olt-ivory-110);
    border-color: var(--olt-ivory-border-220);
}

.olt-home-legacy-icon {
    margin-bottom: var(--olt-space-4);
    background: rgba(243, 180, 96, 0.14);
    color: var(--olt-amber-300);
}

.olt-home-legacy-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--olt-text-inverse);
}

.olt-home-legacy-card p {
    margin-top: var(--olt-space-3);
    color: var(--olt-slate-400);
}

.olt-home-pullquote {
    width: min(56rem, calc(100% - 3rem));
    max-width: none;
    margin: 0 auto;
    font-family: var(--olt-font-display);
    font-size: clamp(1.6rem, 2.2vw, 2.15rem);
    font-style: italic;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--olt-ivory-text-strong);
    text-align: center;
    padding: var(--olt-space-8) var(--olt-space-6);
    border-top: 1px solid var(--olt-ivory-border-100);
}

/* ── CTA panel ────────────────────────────────────────────────────────────── */
.olt-home-cta-panel {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--olt-space-6);
}

/* Primary button on dark-forest CTA section — white fill so it reads as a button */
/* Without this override, forest-green on forest-green has near-zero perceptual contrast. */
.olt-home-section--cta .olt-btn--primary {
    background: var(--olt-ivory-text-solid);
    color: var(--olt-green-700);
    box-shadow: var(--olt-shadow-md);
}

.olt-home-section--cta .olt-btn--primary:hover:not(:disabled) {
    background: var(--olt-surface-base);
    color: var(--olt-green-800);
    transform: translateY(-2px);
    box-shadow: var(--olt-shadow-lg);
}

/* Ghost button on dark-forest CTA section */
.olt-home-section--cta .olt-btn--ghost {
    border-color: var(--olt-white-50);
    color: var(--olt-text-inverse);
}

.olt-home-section--cta .olt-btn--ghost:hover {
    background: var(--olt-white-12);
    border-color: var(--olt-white-70);
}

/* ── Public footer ────────────────────────────────────────────────────────── */
.olt-public-footer,
.olt-home-footer {
    background: var(--olt-surface-base);
    color: var(--olt-slate-700);
    padding: var(--olt-space-16) clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(var(--olt-space-8), 8vw, var(--olt-space-24));
    border-top: 1px solid var(--olt-slate-200);
}

.olt-home-footer-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.olt-home-footer-logo-image {
    width: 160px;
    height: 160px;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
    opacity: 1;
    display: block;
}

.olt-home-footer-content {
    flex: 1 1 32rem;
    max-width: 38rem;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--olt-space-4);
}

.olt-home-footer-copy {
    font-size: 1.125rem;
    line-height: 1.8;
    letter-spacing: -0.01em;
    color: var(--olt-slate-700);
    text-align: right;
    max-width: 32rem;
}

.olt-public-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--olt-space-3) var(--olt-space-6);
    max-width: 34rem;
}

.olt-public-footer-links a {
    color: var(--olt-slate-700);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    transition: color var(--olt-transition);
}

.olt-public-footer-links a:hover {
    color: var(--olt-green-700);
}

.olt-home-footer-meta {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--olt-slate-500);
    text-align: right;
}

/* ── Responsive Design ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .olt-session-bar {
        display: none;
    }

    .olt-sidebar {
        transform: translateX(-100%);
    }

    .olt-sidebar.open {
        transform: translateX(0);
    }

    .olt-main {
        margin-left: 0;
    }

    .olt-topbar {
        display: flex;
    }

    .olt-menu-btn {
        display: block;
    }

    .olt-shell {
        flex-direction: column;
    }

    .olt-public-header {
        flex-wrap: wrap;
        padding: var(--olt-space-4);
    }

    .olt-public-actions {
        width: 100%;
        gap: var(--olt-space-4);
        margin-left: auto;
        order: 3;
    }

    .olt-public-nav {
        order: 3;
        width: 100%;
        margin-top: var(--olt-space-4);
    }

    .olt-home-hero {
        grid-template-columns: 1fr;
        width: min(var(--olt-content-max), calc(100% - 2rem));
        padding: var(--olt-space-8) 0 calc(var(--olt-space-8) + 2rem);
        gap: var(--olt-space-8);
        min-height: auto;
    }

    .olt-home-hero-content {
        max-width: none;
    }

    .olt-home-visual-stack {
        min-height: auto;
        padding-bottom: 2.75rem;
    }

    .olt-home-hero-art {
        aspect-ratio: 16 / 10;
    }

    .olt-home-product-preview {
        right: 1rem;
        bottom: -2rem;
        width: min(34rem, calc(100% - 2rem));
    }

    .olt-home-title {
        max-width: none;
        font-size: clamp(2.6rem, 7vw, 3.5rem);
    }

    .olt-home-lede {
        max-width: none;
        font-size: 1.08rem;
    }

    .olt-home-cta-row {
        gap: var(--olt-space-3);
    }

    .olt-home-cta-row .olt-btn {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 720px) {
    .olt-topbar-session {
        display: none;
    }

    .olt-topbar-right {
        gap: var(--olt-space-2);
    }

    .olt-topbar-action {
        padding: var(--olt-space-2) var(--olt-space-3);
    }
}

@media (max-width: 520px) {
    .olt-topbar-copy {
        display: none;
    }

    .olt-topbar-right {
        gap: var(--olt-space-1);
    }

    .olt-topbar .olt-locale-selector {
        min-width: 5.75rem;
    }

    .olt-topbar-action {
        display: none;
    }
}


@media (max-width: 768px) {
    :root {
        --olt-sidebar-w: 0;
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.4rem; }

    .olt-btn {
        padding: var(--olt-space-2) var(--olt-space-4);
        font-size: 0.875rem;
    }

    .olt-public-header {
        padding: var(--olt-space-4) var(--olt-space-3);
        gap: var(--olt-space-3);
    }

    .olt-public-brand {
        width: 100%;
        justify-content: center;
        font-size: 1.15rem;
        text-align: center;
    }

    .olt-home-brand-logo {
        width: 2.25rem;
        height: 2.25rem;
    }

    .olt-public-actions {
        width: 100%;
        margin-left: 0;
        gap: var(--olt-space-3);
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .olt-public-nav {
        order: 1;
        width: 100%;
        margin-top: 0;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--olt-space-2) var(--olt-space-4);
    }

    .olt-public-link {
        font-size: 0.95rem;
    }

    .olt-public-lang-switch {
        order: 2;
        width: fit-content;
        margin: 0 auto;
        justify-content: center;
    }

    .olt-public-header-cta {
        order: 4;
        width: 100%;
        justify-content: center;
        min-height: 3rem;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }

    .olt-public-header-cta span {
        white-space: normal;
        text-wrap: balance;
    }

    .olt-photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--olt-space-3);
    }

    .olt-albums-grid {
        grid-template-columns: 1fr;
        gap: var(--olt-space-4);
    }

    .olt-members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--olt-space-3);
    }

    .olt-home-hero {
        width: calc(100% - 1rem);
        padding: var(--olt-space-5) 0 var(--olt-space-7);
        gap: var(--olt-space-5);
    }

    .olt-home-hero-content {
        gap: var(--olt-space-4);
    }

    .olt-home-visual-stack {
        order: -1;
        padding-bottom: 0;
    }

    .olt-home-hero-art {
        aspect-ratio: 4 / 3;
    }

    .olt-home-product-preview {
        display: none;
    }

    .olt-home-product-grid {
        grid-template-columns: 1fr;
    }

    .olt-home-product-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: var(--olt-space-1);
    }

    .olt-home-product-nav span {
        white-space: nowrap;
    }

    .olt-home-product-main {
        grid-template-columns: 1fr;
    }

    .olt-home-hero-kicker {
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }

    .olt-home-title {
        font-size: clamp(2.15rem, 9vw, 2.8rem);
        line-height: 1.08;
    }

    .olt-home-lede {
        font-size: 1rem;
        line-height: 1.5;
    }

    .olt-home-hero-proof {
        gap: var(--olt-space-2);
    }

    .olt-home-lane-grid,
    .olt-home-art-strip,
    .olt-home-journey,
    .olt-home-trust-layout,
    .olt-home-compare-grid,
    .olt-home-legacy-grid,
    .olt-home-pullquote,
    .olt-home-cta-panel {
        width: calc(100% - 1rem);
    }

    .olt-home-section-head {
        width: calc(100% - 1rem);
        margin-bottom: var(--olt-space-8);
        gap: var(--olt-space-3);
    }

    .olt-home-section-copy {
        font-size: 1.02rem;
        line-height: 1.56;
    }

    .olt-home-lane-card,
    .olt-home-journey-step,
    .olt-home-trust-card,
    .olt-home-compare-card,
    .olt-home-legacy-card,
    .olt-home-pullquote {
        padding: var(--olt-space-6) var(--olt-space-5);
    }

    .olt-home-lane-card p,
    .olt-home-journey-step p,
    .olt-home-trust-card p,
    .olt-home-compare-card li,
    .olt-home-legacy-card p {
        font-size: 1rem;
        line-height: 1.56;
    }

    .olt-home-trust-art {
        grid-column: auto;
    }

    .olt-home-cta-panel {
        gap: var(--olt-space-4);
    }

    .olt-modal {
        max-width: calc(100vw - 2rem);
    }

    .olt-page {
        padding: var(--olt-space-4);
    }

    .olt-page--centered {
        min-height: calc(100dvh - var(--olt-topbar-h));
        padding-top: calc(var(--olt-topbar-h) + var(--olt-space-4));
    }

    .olt-empty--onboarding {
        padding: var(--olt-space-8) var(--olt-space-5);
    }

}


@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.45rem; }

    .olt-public-header {
        padding: var(--olt-space-3);
    }

    .olt-public-brand {
        font-size: 1.05rem;
        gap: var(--olt-space-2);
    }

    .olt-public-nav {
        gap: var(--olt-space-2) var(--olt-space-3);
    }

    .olt-public-actions {
        align-items: stretch;
    }

    .olt-public-lang-switch {
        width: 100%;
        justify-content: center;
        padding: var(--olt-space-1) 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .olt-public-link,
    .olt-public-lang-link {
        font-size: 0.9rem;
    }

    .olt-public-header-cta {
        padding-left: var(--olt-space-4);
        padding-right: var(--olt-space-4);
    }

    .olt-public-lang-switch {
        padding: var(--olt-space-1) 0;
    }

    .olt-post-actions {
        width: 100%;
    }

    .olt-page {
        padding: var(--olt-space-3);
    }

    .olt-page-header,
    .olt-flex-between {
        align-items: flex-start;
        flex-direction: column;
    }

    .olt-actions-end {
        width: 100%;
    }

    .olt-actions-end .olt-btn {
        width: 100%;
        justify-content: center;
    }

    .olt-empty--onboarding {
        padding: var(--olt-space-6) var(--olt-space-4);
    }

    .olt-empty-title {
        font-size: 1.7rem;
    }

    .olt-home-hero {
        width: calc(100% - 0.75rem);
        padding: var(--olt-space-4) 0;
    }

    .olt-home-hero-art {
        border-radius: var(--olt-radius-2xl);
    }

    .olt-home-product-bar {
        padding: 0 var(--olt-space-4);
    }

    .olt-home-product-grid {
        padding: var(--olt-space-4);
    }

    .olt-home-product-card {
        padding: var(--olt-space-4);
    }

    .olt-home-title {
        font-size: clamp(1.85rem, 10vw, 2.3rem);
    }

    .olt-home-lede {
        font-size: 0.96rem;
    }

    .olt-home-hero-proof {
        font-size: 0.88rem;
    }

    .olt-home-hero-proof span {
        width: 100%;
        justify-content: center;
    }

    .olt-home-cta-row {
        flex-direction: column;
        margin-top: 0;
    }

    .olt-home-section {
        padding-top: var(--olt-space-9);
        padding-bottom: var(--olt-space-9);
    }

    .olt-home-section-title {
        font-size: 1.75rem;
        line-height: 1.12;
    }

    .olt-home-section-copy {
        font-size: 0.98rem;
    }

    .olt-home-lane-card,
    .olt-home-journey-step,
    .olt-home-trust-card,
    .olt-home-compare-card,
    .olt-home-legacy-card,
    .olt-home-pullquote {
        padding: var(--olt-space-5) var(--olt-space-4);
    }

    .olt-home-pullquote {
        width: calc(100% - 0.75rem);
        font-size: 1.08rem;
        line-height: 1.48;
    }
}

/* ── Home page responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .olt-home-lane-grid,
    .olt-home-art-strip,
    .olt-home-journey,
    .olt-home-trust-layout,
    .olt-home-compare-grid {
        grid-template-columns: 1fr;
    }

    .olt-home-legacy-grid { grid-template-columns: repeat(2, 1fr); }

    .olt-home-section { padding: var(--olt-space-12) var(--olt-space-6); }
    .olt-home-section-title { font-size: 2.25rem; }

    .olt-home-hero-proof {
        flex-direction: column;
        justify-content: center;
        padding: var(--olt-space-4);
        width: 100%;
        min-width: 0;
        gap: var(--olt-space-2);
    }
}

@media (max-width: 600px) {
    .olt-home-trust-grid,
    .olt-home-legacy-grid,
    .olt-home-compare-grid {
        grid-template-columns: 1fr;
    }

    .olt-home-legacy-grid { grid-template-columns: 1fr; }
    .olt-home-section { padding: var(--olt-space-10) var(--olt-space-4); }
    .olt-home-section-title { font-size: 1.9rem; }
    .olt-home-section-head { margin-bottom: var(--olt-space-8); }
    .olt-home-pullquote { font-size: 1.2rem; padding: var(--olt-space-6) var(--olt-space-4); }

    .olt-public-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--olt-space-3);
        padding: var(--olt-space-8) var(--olt-space-4);
    }
    .olt-home-footer-brand {
        width: auto;
        padding-top: 0;
        display: flex;
        justify-content: center;
        margin: 0;
        line-height: 0;
    }
    .olt-home-footer-logo-image {
        width: 152px;
        height: 152px;
    }
    .olt-home-footer-content {
        margin-left: 0;
        max-width: none;
        align-items: center;
        gap: var(--olt-space-2);
    }
    .olt-public-footer-links {
        justify-content: center;
        max-width: none;
        gap: var(--olt-space-2) var(--olt-space-4);
    }
    .olt-home-footer-copy,
    .olt-home-footer-meta {
        text-align: center;
    }
}

@media (min-width: 1600px) {
    .olt-public-header,
    .olt-public-footer {
        padding-left: max(2.5rem, calc((100vw - 100rem) / 2));
        padding-right: max(2.5rem, calc((100vw - 100rem) / 2));
    }

    .olt-home-hero {
        width: min(108rem, calc(100% - 5rem));
        grid-template-columns: minmax(0, 0.9fr) minmax(34rem, 1.1fr);
        padding: clamp(4rem, 4.5vw, 6rem) 0;
        gap: var(--olt-space-8);
    }

    .olt-home-visual-stack {
        min-height: 49rem;
    }

    .olt-home-title {
        font-size: clamp(4.4rem, 4.8vw, 6.6rem);
    }

    .olt-home-lede {
        max-width: 38rem;
        font-size: 1.34rem;
    }

    .olt-home-product-preview {
        width: min(38rem, calc(100% - 3rem));
    }

    .olt-home-hero-proof {
        width: min(46rem, calc(100% - 4rem));
        padding-top: var(--olt-space-2);
    }

    .olt-home-section-head {
        width: min(54rem, calc(100% - 4rem));
    }

    .olt-home-art-strip {
        width: min(100rem, calc(100% - 5rem));
    }

    .olt-home-footer-content {
        max-width: 42rem;
    }

    .olt-public-footer-links {
        max-width: 38rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSING APP CLASSES — Added to complete CSS/JS sync
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page Layout ─────────────────────────────────────────────────────────────── */
.olt-page {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-6);
    padding: calc(var(--olt-space-6) + 4rem) var(--olt-space-6) var(--olt-space-6);
}

.olt-page--centered {
    justify-content: center;
    min-height: 100dvh;
}

@media (max-width: 1024px) {
    .olt-page {
        padding: var(--olt-space-6);
    }
}

@media (max-width: 768px) {
    .olt-page {
        padding: var(--olt-space-4);
    }

    .olt-page--centered {
        min-height: calc(100dvh - var(--olt-topbar-h));
        padding-top: calc(var(--olt-topbar-h) + var(--olt-space-4));
    }
}

.olt-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--olt-space-4);
}

.olt-page-title {
    margin: 0;
    font-size: 2rem;
}

.olt-page-subtitle {
    margin: 0;
    font-size: 1.1rem;
    color: var(--olt-slate-600);
}

.olt-workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: var(--olt-space-6);
    align-items: stretch;
    margin-bottom: var(--olt-space-6);
    padding: var(--olt-space-6);
    border: 1px solid rgba(31, 112, 64, 0.16);
    border-radius: var(--olt-radius-2xl);
    background:
        linear-gradient(135deg, rgba(255, 251, 245, 0.96), rgba(240, 248, 241, 0.92)),
        var(--olt-surface-base);
    box-shadow: var(--olt-shadow-md);
    overflow: hidden;
}

.olt-page--centered .olt-workspace-hero {
    width: min(100%, 58rem);
    margin: 0 auto;
}

.olt-workspace-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--olt-space-3);
    min-width: 0;
}

.olt-workspace-hero-kicker {
    margin: 0;
    color: var(--olt-green-600);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.olt-workspace-hero-title {
    margin: 0;
    color: var(--olt-slate-900);
    font-family: var(--olt-font-display);
    font-size: clamp(2rem, 3vw, 3.35rem);
    line-height: 1.05;
    text-wrap: balance;
}

.olt-workspace-hero-body {
    max-width: 42rem;
    margin: 0;
    color: var(--olt-slate-600);
    font-size: 1.05rem;
    line-height: 1.62;
}

.olt-workspace-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-2);
}

.olt-workspace-hero-art {
    min-height: 16rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(31, 112, 64, 0.16);
    border-radius: var(--olt-radius-xl);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-sm);
}

.olt-workspace-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .olt-workspace-hero {
        grid-template-columns: 1fr;
        padding: var(--olt-space-5);
    }

    .olt-workspace-hero-art {
        order: -1;
        min-height: 14rem;
    }
}

@media (max-width: 480px) {
    .olt-workspace-hero {
        padding: var(--olt-space-4);
        border-radius: var(--olt-radius-xl);
    }

    .olt-workspace-hero-title {
        font-size: 1.8rem;
    }

    .olt-workspace-hero-body {
        font-size: 0.98rem;
    }

    .olt-workspace-hero-actions .olt-btn {
        width: 100%;
        justify-content: center;
    }
}

.olt-command-center {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-5);
    margin-bottom: var(--olt-space-6);
    padding: var(--olt-space-5);
    border: 1px solid rgba(31, 112, 64, 0.16);
    border-radius: var(--olt-radius-xl);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 242, 232, 0.86)),
        var(--olt-surface-base);
    box-shadow: var(--olt-shadow-sm);
}

.olt-command-center-header,
.olt-command-panel-heading,
.olt-command-move,
.olt-command-lane,
.olt-family-pulse {
    display: flex;
    align-items: center;
    gap: var(--olt-space-4);
    min-width: 0;
}

.olt-command-center-header,
.olt-command-panel-heading {
    justify-content: space-between;
}

.olt-family-pulse {
    align-items: stretch;
    min-width: min(100%, 17rem);
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-green-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-green-50);
}

.olt-family-pulse-score {
    display: grid;
    place-items: center;
    width: 4rem;
    min-height: 4rem;
    border-radius: var(--olt-radius-md);
    background: var(--olt-green-600);
    color: var(--olt-text-inverse);
    font-size: 1.25rem;
    font-weight: 800;
}

.olt-family-pulse-label {
    margin-bottom: var(--olt-space-2);
    color: var(--olt-green-900);
    font-weight: 800;
}

.olt-family-pulse-meter {
    width: 100%;
    height: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--olt-slate-200);
}

.olt-family-pulse-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--olt-green-600), var(--olt-amber-600));
}

.olt-family-pulse-meter--0 .olt-family-pulse-meter-fill { width: 0; }
.olt-family-pulse-meter--20 .olt-family-pulse-meter-fill { width: 20%; }
.olt-family-pulse-meter--40 .olt-family-pulse-meter-fill { width: 40%; }
.olt-family-pulse-meter--60 .olt-family-pulse-meter-fill { width: 60%; }
.olt-family-pulse-meter--80 .olt-family-pulse-meter-fill { width: 80%; }
.olt-family-pulse-meter--100 .olt-family-pulse-meter-fill { width: 100%; }

.olt-command-center-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: var(--olt-space-5);
}

.olt-relationship-pulse {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    padding: var(--olt-space-4);
    border: 1px solid rgba(31, 112, 64, 0.18);
    border-radius: var(--olt-radius-md);
    background: rgba(255, 255, 255, 0.78);
}

.olt-relationship-pulse-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--olt-space-3);
}

.olt-relationship-pulse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--olt-space-3);
    min-width: 0;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
}

.olt-relationship-pulse-row p {
    margin-top: var(--olt-space-1);
    color: var(--olt-slate-600);
    font-size: 0.9rem;
    line-height: 1.45;
}

.olt-relationship-pulse-row[data-olt-pulse-state="fresh"] {
    border-color: var(--olt-green-300);
}

.olt-relationship-pulse-row[data-olt-pulse-state="warm"] {
    border-color: var(--olt-amber-300);
}

.olt-relationship-pulse-row[data-olt-pulse-state="quiet"],
.olt-relationship-pulse-row[data-olt-pulse-state="empty"] {
    border-color: var(--olt-slate-300);
}

.olt-command-panel,
.olt-command-lane {
    min-width: 0;
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-xs);
}

.olt-command-panel {
    padding: var(--olt-space-5);
}

.olt-command-move {
    align-items: flex-start;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
}

.olt-command-move > div {
    flex: 1;
    min-width: 0;
}

.olt-command-move p,
.olt-command-lane p,
.olt-prompt-card span:last-child {
    margin: var(--olt-space-1) 0 0;
    color: var(--olt-slate-600);
    font-size: 0.92rem;
    line-height: 1.45;
}

.olt-command-move-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--olt-space-2);
}

.olt-prompt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--olt-space-3);
}

.olt-prompt-card {
    display: flex;
    min-width: 0;
    min-height: 11rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--olt-space-2);
    padding: var(--olt-space-4);
    border: 1px solid rgba(31, 112, 64, 0.18);
    border-radius: var(--olt-radius-md);
    background: linear-gradient(135deg, rgba(240, 248, 241, 0.92), rgba(255, 250, 240, 0.9));
    color: var(--olt-slate-800);
    cursor: pointer;
    text-align: left;
    transition: transform var(--olt-transition), border-color var(--olt-transition), box-shadow var(--olt-transition);
}

.olt-prompt-card:hover,
.olt-prompt-card:focus-visible {
    border-color: var(--olt-green-600);
    box-shadow: var(--olt-shadow-sm);
    transform: translateY(-2px);
}

.olt-prompt-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--olt-radius-md);
    background: var(--olt-green-600);
    color: var(--olt-text-inverse);
}

.olt-prompt-lane {
    color: var(--olt-green-700);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.olt-command-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--olt-space-3);
}

.olt-command-lane {
    align-items: flex-start;
    padding: var(--olt-space-4);
}

.olt-command-lane > div {
    flex: 1;
    min-width: 0;
}

.olt-composer-guidance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--olt-space-2);
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-green-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-green-50);
    color: var(--olt-green-900);
    font-weight: 700;
}

.olt-native-dialog {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--olt-space-4);
    background: rgba(15, 23, 18, 0.58);
}

.olt-native-dialog-panel {
    width: min(100%, 31rem);
    padding: var(--olt-space-6);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-2xl);
}

.olt-native-dialog-panel h3 {
    margin: var(--olt-space-3) 0 var(--olt-space-2);
    color: var(--olt-slate-900);
}

.olt-native-dialog-panel p {
    margin: 0 0 var(--olt-space-4);
    color: var(--olt-slate-600);
    line-height: 1.55;
}

.olt-native-dialog-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--olt-radius-md);
    background: var(--olt-amber-100);
    color: var(--olt-amber-800);
}

@media (max-width: 980px) {
    .olt-command-center-grid,
    .olt-relationship-pulse-list,
    .olt-command-lanes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .olt-command-center-header,
    .olt-command-move,
    .olt-command-lane,
    .olt-family-pulse {
        align-items: stretch;
        flex-direction: column;
    }

    .olt-prompt-grid {
        grid-template-columns: 1fr;
    }

    .olt-command-move .olt-btn,
    .olt-command-lane .olt-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Feed ────────────────────────────────────────────────────────────────────── */
.olt-feed {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-6);
}

/* ── Workspace Section Layouts ──────────────────────────────────────────────── */
.olt-page--dashboard,
.olt-page--feed,
.olt-page--timeline,
.olt-page--search,
.olt-page--notifications,
.olt-page--family-tree,
.olt-page--tree,
.olt-page--photos,
.olt-page--albums,
.olt-page--chat,
.olt-page--members,
.olt-page--settings,
.olt-page--help,
.olt-page--account,
.olt-page--profile,
.olt-page--new-family {
    width: 100%;
}

.olt-dashboard-layout,
.olt-feed-layout,
.olt-timeline-layout,
.olt-search-layout,
.olt-notifications-layout,
.olt-family-tree-layout,
.olt-tree-layout,
.olt-photos-layout,
.olt-albums-layout,
.olt-chat-layout,
.olt-members-layout,
.olt-settings-layout,
.olt-help-layout,
.olt-account-layout,
.olt-profile-layout,
.olt-new-family-layout {
    width: 100%;
    min-width: 0;
}

.olt-dashboard-layout,
.olt-feed-layout,
.olt-timeline-layout,
.olt-notifications-layout,
.olt-family-tree-layout,
.olt-tree-layout,
.olt-chat-layout {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-6);
}

.olt-dashboard-grid,
.olt-photos-layout,
.olt-albums-layout,
.olt-members-layout,
.olt-settings-layout,
.olt-help-layout,
.olt-account-layout,
.olt-profile-layout,
.olt-new-family-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--olt-space-6);
    align-items: start;
}

.olt-search-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--olt-space-6);
    align-items: start;
}

.olt-section-toolbar,
.olt-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--olt-space-3);
}

.olt-section-toolbar {
    justify-content: space-between;
}

@media (max-width: 900px) {
    .olt-search-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Utility Classes ─────────────────────────────────────────────────────────── */
.olt-field {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-2);
    margin-bottom: var(--olt-space-4);
}

.olt-actions-end {
    display: flex;
    justify-content: flex-end;
    gap: var(--olt-space-3);
}

.olt-actions-end-gap {
    display: flex;
    justify-content: flex-end;
    gap: var(--olt-space-4);
}

.olt-actions-col {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
}

.olt-actions-center {
    display: flex;
    justify-content: center;
    gap: var(--olt-space-3);
}

.olt-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--olt-space-4);
}

.olt-flex-between > * {
    min-width: 0;
}

.olt-flex-between h1,
.olt-flex-between h2,
.olt-flex-between h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.olt-flex-gap-sm {
    display: flex;
    gap: var(--olt-space-2);
}

.olt-mt-1 { margin-top: var(--olt-space-3); }
.olt-mt-75 { margin-top: 0.75rem; }
.olt-mt-5 { margin-top: var(--olt-space-6); }
.olt-mt-15 { margin-top: var(--olt-space-6); }
.olt-mb-1 { margin-bottom: var(--olt-space-3); }
.olt-mb-15 { margin-bottom: var(--olt-space-6); }
.olt-m0 { margin: 0; }

.olt-muted-center {
    text-align: center;
    color: var(--olt-slate-600);
}

.olt-muted-text {
    color: var(--olt-slate-600);
    font-size: 0.875rem;
}

.olt-w-auto {
    width: auto;
}

/* ── Empty States ────────────────────────────────────────────────────────────── */
.olt-empty {
    padding: var(--olt-space-8);
    text-align: center;
    color: var(--olt-slate-500);
    font-size: 1rem;
}

.olt-empty--large {
    padding: var(--olt-space-12);
    font-size: 1.125rem;
}

.olt-empty--onboarding {
    width: min(100%, 36rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--olt-space-4);
    background: var(--olt-surface-strong);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    box-shadow: var(--olt-shadow-md);
}

.olt-empty-title {
    font-size: 2rem;
}

.olt-empty-icon {
    font-size: 2rem;
    margin-bottom: var(--olt-space-3);
}

.olt-empty-icon--large {
    font-size: 3rem;
}

/* ── Error Messages ──────────────────────────────────────────────────────────── */
.olt-error {
    padding: var(--olt-space-4);
    background: var(--olt-rose-50);
    border: 1px solid var(--olt-rose-200);
    color: var(--olt-rose-700);
    border-radius: var(--olt-radius-md);
}

/* ── Spinners ────────────────────────────────────────────────────────────────── */
.olt-spinner-sm {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--olt-green-200);
    border-top-color: var(--olt-green-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ── Card Variants ───────────────────────────────────────────────────────────── */
.olt-card-body {
    padding: var(--olt-space-6);
}

.olt-card--profile {
    background: linear-gradient(135deg, var(--olt-green-50), var(--olt-amber-50));
}

.olt-card--narrow {
    max-width: 400px;
}

/* ── User Avatar Variations ──────────────────────────────────────────────────── */
.olt-user-avatar--36 {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
}

.olt-user-avatar--40 {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.olt-user-avatar--48 {
    width: 3rem;
    height: 3rem;
    font-size: 1.125rem;
}

.olt-user-avatar--64 {
    width: 4rem;
    height: 4rem;
    font-size: 1.25rem;
}

.olt-user-avatar--c0 { background: linear-gradient(135deg, var(--olt-green-400), var(--olt-green-600)); }
.olt-user-avatar--c1 { background: linear-gradient(135deg, var(--olt-blue-400), var(--olt-blue-600)); }
.olt-user-avatar--c2 { background: linear-gradient(135deg, var(--olt-purple-400), var(--olt-purple-600)); }
.olt-user-avatar--c3 { background: linear-gradient(135deg, var(--olt-amber-400), var(--olt-amber-600)); }
.olt-user-avatar--c4 { background: linear-gradient(135deg, var(--olt-rose-400), var(--olt-rose-600)); }
.olt-user-avatar--c5 { background: linear-gradient(135deg, var(--olt-sky-400), var(--olt-sky-600)); }
.olt-user-avatar--c6 { background: linear-gradient(135deg, var(--olt-slate-400), var(--olt-slate-600)); }

.olt-avatar-64 {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--olt-green-400), var(--olt-green-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--olt-text-inverse);
    font-weight: 700;
    flex-shrink: 0;
}

.olt-avatar-status {
    position: relative;
    display: inline-block;
}

.olt-avatar-status::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--olt-green-500);
    border: 2px solid var(--olt-surface-base);
    border-radius: 50%;
}

/* ── User Card & Actions ─────────────────────────────────────────────────────── */
.olt-user-card {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

.olt-user-context {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
}

.olt-user-actions {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-2);
}

.olt-user-action {
    padding: var(--olt-space-2) var(--olt-space-4);
    background: var(--olt-slate-100);
    border: none;
    border-radius: var(--olt-radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--olt-slate-700);
    transition: all var(--olt-transition);
}

.olt-user-action:hover {
    background: var(--olt-slate-200);
    color: var(--olt-slate-800);
}

.olt-user-action--danger {
    color: var(--olt-rose-600);
    background: var(--olt-rose-50);
}

.olt-user-action--danger:hover {
    background: var(--olt-rose-100);
    color: var(--olt-rose-700);
}

/* ── Topbar Action ───────────────────────────────────────────────────────────── */
.olt-topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--olt-space-2);
    padding: var(--olt-space-2) var(--olt-space-4);
    background: transparent;
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--olt-slate-700);
    white-space: nowrap;
    transition: all var(--olt-transition);
}

.olt-topbar-action:hover {
    background: var(--olt-slate-100);
    border-color: var(--olt-slate-400);
}

.olt-topbar-action--danger {
    color: var(--olt-rose-700);
    background: var(--olt-rose-50);
    border-color: var(--olt-rose-200);
}

.olt-topbar-action--danger:hover {
    background: var(--olt-rose-100);
    border-color: var(--olt-rose-300);
}

@media (max-width: 520px) {
    .olt-topbar .olt-topbar-action {
        display: none;
    }
}

/* ── Family Selector ─────────────────────────────────────────────────────────── */
.olt-family-option {
    width: 100%;
    padding: var(--olt-space-3) var(--olt-space-4);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--olt-slate-700);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all var(--olt-transition);
}

.olt-family-option:hover {
    background: var(--olt-slate-100);
}

.olt-family-option.active {
    background: var(--olt-green-100);
    color: var(--olt-green-700);
    font-weight: 600;
}

.olt-family-new {
    border-top: 1px solid var(--olt-slate-200);
    margin-top: var(--olt-space-2);
    padding-top: var(--olt-space-3);
}

/* ── Toast Notifications ─────────────────────────────────────────────────────── */
.olt-toast-area {
    position: fixed;
    bottom: var(--olt-space-4);
    right: var(--olt-space-4);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    max-width: 400px;
}

.olt-toast {
    padding: var(--olt-space-4);
    border-radius: var(--olt-radius-lg);
    box-shadow: var(--olt-shadow-lg);
    animation: slideInLeft 300ms ease-out;
    color: var(--olt-text-inverse);
    font-weight: 500;
}

.olt-toast-info {
    background: var(--olt-sky-500);
}

.olt-toast-success {
    background: var(--olt-green-600);
}

.olt-toast-error {
    background: var(--olt-rose-600);
}

/* ── Modal Inner ─────────────────────────────────────────────────────────────── */
.olt-modal-inner {
    padding: var(--olt-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

/* ── Notifications (Corrected Names) ─────────────────────────────────────────── */
.olt-notif-btn {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--olt-slate-700);
    transition: color var(--olt-transition);
}

.olt-notif-btn:hover {
    color: var(--olt-green-600);
}

.olt-notif-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: var(--olt-rose-600);
    color: var(--olt-text-inverse);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    min-width: 1.25rem;
    text-align: center;
}

.olt-notif-item {
    padding: var(--olt-space-3);
    background: var(--olt-slate-50);
    border-radius: var(--olt-radius-md);
    cursor: pointer;
    transition: all var(--olt-transition);
}

.olt-notif-item:hover {
    background: var(--olt-slate-100);
}

.olt-notif-item.unread {
    background: var(--olt-green-50);
    border-left: 3px solid var(--olt-green-600);
}

.olt-notif-body {
    font-size: 0.875rem;
    color: var(--olt-slate-800);
}

.olt-notif-time {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
    margin-top: var(--olt-space-1);
}

/* ── Composer ────────────────────────────────────────────────────────────────── */
.olt-composer {
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    padding: var(--olt-space-4);
    margin-bottom: var(--olt-space-6);
}

.olt-composer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-2);
    margin-bottom: var(--olt-space-4);
    border-bottom: 1px solid var(--olt-slate-200);
    padding-bottom: var(--olt-space-3);
}

.olt-composer-tab {
    padding: var(--olt-space-2) var(--olt-space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--olt-slate-600);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all var(--olt-transition);
    display: flex;
    align-items: center;
    gap: var(--olt-space-2);
    min-width: 0;
}

.olt-composer-tab:hover,
.olt-composer-tab.active {
    color: var(--olt-green-600);
    border-bottom: 2px solid var(--olt-green-600);
    margin-bottom: -1px;
}

.olt-composer-form {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
}

/* ── Posts (Enhanced) ────────────────────────────────────────────────────────── */
.olt-post-meta {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-1);
}

.olt-post-author {
    font-weight: 600;
    color: var(--olt-slate-900);
    font-size: 0.95rem;
}

.olt-post-time {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
}

.olt-post-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--olt-green-600);
    letter-spacing: 0.05em;
}

.olt-post-img,
.olt-post-video,
.olt-post-audio {
    width: 100%;
    max-height: 400px;
    border-radius: var(--olt-radius-lg);
}

.olt-post-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--olt-slate-900);
}

.olt-post--activity {
    opacity: 0.85;
}

.olt-comments-area {
    margin-top: var(--olt-space-4);
}

/* ── Comments (Enhanced) ─────────────────────────────────────────────────────── */
.olt-comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-1);
}

.olt-comment-time {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
}

.olt-comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-2);
}

.olt-comment-reaction {
    padding: var(--olt-space-1) var(--olt-space-2);
    background: var(--olt-slate-100);
    border: none;
    border-radius: var(--olt-radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all var(--olt-transition);
}

.olt-comment-reaction:hover {
    background: var(--olt-slate-200);
}

.olt-comment-reaction.active {
    background: var(--olt-rose-100);
    color: var(--olt-rose-600);
}

.olt-comment-react-row {
    display: flex;
    gap: var(--olt-space-2);
    margin-top: var(--olt-space-2);
}

.olt-comment-quick-react {
    padding: var(--olt-space-1) var(--olt-space-2);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: transform var(--olt-transition);
}

.olt-comment-quick-react:hover {
    transform: scale(1.15);
}

.olt-comment-input-row {
    display: flex;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-3);
    padding-top: var(--olt-space-3);
    border-top: 1px solid var(--olt-slate-100);
}

/* ── Chat ────────────────────────────────────────────────────────────────────── */
.olt-chat-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--olt-topbar-h) - 2rem);
}

.olt-chat-input-row {
    display: flex;
    gap: var(--olt-space-3);
    padding: var(--olt-space-4);
    border-top: 1px solid var(--olt-slate-200);
}

.olt-chat-bubble {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-2);
    animation: fadeInUp 300ms ease-out;
}

.olt-chat-bubble.mine {
    align-items: flex-end;
}

.olt-chat-bubble.mine .olt-chat-body {
    background: linear-gradient(135deg, var(--olt-green-600), var(--olt-green-500));
    color: var(--olt-text-inverse);
}

.olt-chat-body {
    padding: var(--olt-space-3) var(--olt-space-4);
    background: var(--olt-slate-100);
    color: var(--olt-slate-800);
    border-radius: var(--olt-radius-lg);
    word-wrap: break-word;
    max-width: 70%;
}

.olt-chat-author {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--olt-slate-900);
}

.olt-chat-time {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
}

/* ── Tree (SVG) ──────────────────────────────────────────────────────────────── */
.olt-tree-wrap {
    width: 100%;
    height: calc(100dvh - var(--olt-topbar-h) - var(--olt-space-8) - 5rem);
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-lg);
    position: relative;
    overflow: hidden;
}

.olt-tree-canvas {
    width: 100%;
    height: 100%;
}

.olt-relationship-graph {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 244, 235, 0.88));
}

.olt-tree-node {
    cursor: pointer;
    transition: filter var(--olt-transition);
}

.olt-tree-node:hover {
    filter: drop-shadow(var(--olt-green-glow-soft));
}

.olt-tree-edge {
    stroke: var(--olt-slate-300);
    stroke-width: 2;
}

.olt-tree-edge--adoptive {
    stroke: var(--olt-amber-600);
    stroke-dasharray: 8,6;
    stroke-width: 2.5;
}

.olt-tree-edge--spouse {
    stroke: var(--olt-rose-500);
    stroke-width: 2.5;
}

.olt-tree-edge--sibling {
    stroke: var(--olt-blue-600);
    stroke-dasharray: 3,5;
}

.olt-tree-edge--lineage {
    stroke: var(--olt-green-600);
}

.olt-tree-panel {
    position: absolute;
    right: var(--olt-space-4);
    top: var(--olt-space-4);
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-lg);
    padding: var(--olt-space-4);
    max-width: 300px;
    box-shadow: var(--olt-shadow-md);
}

.olt-tree-add-btn {
    margin-top: var(--olt-space-2);
}

.olt-tree-rel-item {
    padding: var(--olt-space-2) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.olt-tree-rel-delete {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--olt-rose-600);
    transition: color var(--olt-transition);
}

.olt-tree-rel-delete:hover {
    color: var(--olt-rose-700);
}

.olt-node-rect {
    fill: var(--olt-surface-base);
    stroke: var(--olt-green-600);
    stroke-width: 2;
}

.olt-node-rect.deceased {
    stroke-dasharray: 5,5;
    stroke: var(--olt-slate-400);
}

.olt-node-name {
    font-weight: 600;
}

.olt-node-sub {
    fill: currentColor;
}

.olt-profile-completeness,
.olt-person-timeline,
.olt-relationship-neighborhood {
    border-color: rgba(31, 112, 64, 0.16);
}

.olt-profile-completeness-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-2);
}

.olt-person-timeline[data-olt-person-timeline-state="empty"] {
    background: rgba(255, 255, 255, 0.8);
}

/* ── Photos & Lightbox ───────────────────────────────────────────────────────── */
.olt-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--olt-space-4);
    padding: var(--olt-space-6);
}

.olt-photo-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--olt-space-2);
    background: var(--olt-overlay-ink-800);
    color: var(--olt-text-inverse);
    font-size: 0.875rem;
    text-align: center;
}

.olt-lightbox {
    position: fixed;
    inset: 0;
    background: var(--olt-overlay-ink-900);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--olt-space-4);
}

.olt-lightbox-close {
    position: absolute;
    top: var(--olt-space-4);
    right: var(--olt-space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    color: var(--olt-text-inverse);
    transition: color var(--olt-transition);
    z-index: 81;
}

.olt-lightbox-close:hover {
    color: var(--olt-slate-300);
}

.olt-lightbox-inner {
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.olt-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    cursor: crosshair;
}

.olt-lightbox-img.olt-crosshair {
    cursor: crosshair;
}

.olt-lightbox-tags {
    position: relative;
    width: 100%;
    height: 100%;
}

.olt-tag-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--olt-space-1);
    cursor: pointer;
}

.olt-tag-pin-pos-0 { /* Dynamically positioned */ }
.olt-tag-pin-pos-1 { /* Dynamically positioned */ }
.olt-tag-pin-pos-2 { /* Dynamically positioned */ }
.olt-tag-pin-pos-3 { /* Dynamically positioned */ }

.olt-tag-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--olt-rose-600);
    border: 2px solid var(--olt-surface-base);
    border-radius: 50%;
    transition: transform var(--olt-transition);
}

.olt-tag-pin:hover .olt-tag-dot {
    transform: scale(1.3);
}

.olt-tag-label {
    background: var(--olt-overlay-ink-800);
    color: var(--olt-text-inverse);
    padding: var(--olt-space-1) var(--olt-space-2);
    border-radius: var(--olt-radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
}

.olt-tag-del {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: var(--olt-rose-600);
    color: var(--olt-text-inverse);
    border: none;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--olt-transition);
}

.olt-tag-pin:hover .olt-tag-del {
    opacity: 1;
}

/* ── Albums (Enhanced) ───────────────────────────────────────────────────────── */
.olt-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--olt-space-6);
    padding: var(--olt-space-6);
}

.olt-album-name {
    font-weight: 600;
    color: var(--olt-slate-900);
    margin-bottom: var(--olt-space-2);
}

.olt-album-desc {
    font-size: 0.875rem;
    color: var(--olt-slate-600);
    margin-bottom: var(--olt-space-2);
}

.olt-album-date {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
}

.olt-album-add-option {
    width: 100%;
    padding: var(--olt-space-2) var(--olt-space-3);
    background: var(--olt-slate-100);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--olt-transition);
}

.olt-album-add-option:hover {
    background: var(--olt-slate-200);
}

/* ── Members (Enhanced) ──────────────────────────────────────────────────────── */
.olt-member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-1);
}

.olt-member-email {
    font-size: 0.875rem;
    color: var(--olt-slate-600);
}

.olt-member-meta {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-2);
}

.olt-member-joined {
    font-size: 0.75rem;
    color: var(--olt-slate-500);
}

.olt-member-actions {
    display: flex;
    gap: var(--olt-space-2);
}

.olt-role-sel {
    padding: var(--olt-space-2) var(--olt-space-3);
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    background: var(--olt-surface-base);
    transition: all var(--olt-transition);
}

.olt-role-sel:hover {
    border-color: var(--olt-slate-400);
    background: var(--olt-slate-50);
}

.olt-remove-member {
    padding: var(--olt-space-2);
}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.olt-badge {
    display: inline-block;
    padding: var(--olt-space-1) var(--olt-space-3);
    background: var(--olt-slate-100);
    color: var(--olt-slate-800);
    border-radius: var(--olt-radius-md);
    font-size: 0.75rem;
    font-weight: 600;
}

.olt-badge-green {
    background: var(--olt-green-100);
    color: var(--olt-green-800);
}

.olt-badge-pending {
    background: var(--olt-amber-100);
    color: var(--olt-amber-800);
}

.olt-badge-admin {
    background: var(--olt-purple-100);
    color: var(--olt-purple-800);
}

.olt-badge-member {
    background: var(--olt-green-100);
    color: var(--olt-green-800);
}

.olt-badge-viewer {
    background: var(--olt-slate-100);
    color: var(--olt-slate-800);
}

/* ── Panel ───────────────────────────────────────────────────────────────────── */
.olt-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--olt-space-4);
    padding-bottom: var(--olt-space-4);
    border-bottom: 1px solid var(--olt-slate-200);
}

.olt-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

/* ── Profile (Enhanced) ──────────────────────────────────────────────────────── */
.olt-profile-header {
    display: flex;
    align-items: center;
    gap: var(--olt-space-4);
    padding-bottom: var(--olt-space-6);
    border-bottom: 1px solid var(--olt-slate-200);
}

.olt-profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--olt-slate-900);
}

.olt-profile-email {
    font-size: 0.875rem;
    color: var(--olt-slate-600);
}

.olt-account-summary {
    background: var(--olt-green-50);
    border: 1px solid var(--olt-green-200);
    border-radius: var(--olt-radius-lg);
    padding: var(--olt-space-4);
}

.olt-account-summary-title {
    font-weight: 600;
    color: var(--olt-green-900);
    margin-bottom: var(--olt-space-2);
}

.olt-account-summary-copy {
    font-size: 0.875rem;
    color: var(--olt-green-800);
    line-height: 1.5;
}

/* ── Operational Workspace Surfaces ───────────────────────────────────────── */
.olt-operational-grid,
.olt-calendar-layout,
.olt-people-layout,
.olt-privacy-layout,
.olt-export-layout,
.olt-data-export-layout,
.olt-onboarding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.85fr);
    gap: var(--olt-space-6);
    align-items: start;
}

.olt-operational-stack,
.olt-upcoming-list,
.olt-people-directory,
.olt-checklist,
.olt-privacy-controls,
.olt-export-list,
.olt-data-export-list {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    min-width: 0;
}

.olt-operational-panel,
.olt-calendar-panel,
.olt-upcoming-panel,
.olt-people-panel,
.olt-person-profile,
.olt-onboarding-panel,
.olt-privacy-panel,
.olt-export-panel,
.olt-data-export-panel {
    background: var(--olt-surface-base);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    box-shadow: var(--olt-shadow-sm);
    min-width: 0;
}

.olt-operational-panel,
.olt-calendar-panel,
.olt-upcoming-panel,
.olt-people-panel,
.olt-onboarding-panel,
.olt-privacy-panel,
.olt-export-panel,
.olt-data-export-panel {
    padding: var(--olt-space-5);
}

.olt-operational-panel:hover,
.olt-calendar-panel:hover,
.olt-upcoming-panel:hover,
.olt-people-panel:hover,
.olt-person-profile:hover,
.olt-onboarding-panel:hover,
.olt-privacy-panel:hover,
.olt-export-panel:hover,
.olt-data-export-panel:hover {
    border-color: var(--olt-slate-300);
}

.olt-operational-heading,
.olt-calendar-heading,
.olt-upcoming-heading,
.olt-people-heading,
.olt-person-heading,
.olt-onboarding-heading,
.olt-privacy-heading,
.olt-export-heading,
.olt-data-export-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--olt-space-4);
    margin-bottom: var(--olt-space-4);
}

.olt-operational-heading h2,
.olt-calendar-heading h2,
.olt-upcoming-heading h2,
.olt-people-heading h2,
.olt-person-heading h2,
.olt-onboarding-heading h2,
.olt-privacy-heading h2,
.olt-export-heading h2,
.olt-data-export-heading h2 {
    font-size: 1.18rem;
    line-height: 1.25;
}

.olt-operational-kicker,
.olt-calendar-kicker,
.olt-upcoming-kicker,
.olt-person-kicker,
.olt-privacy-kicker,
.olt-export-kicker,
.olt-data-export-kicker {
    color: var(--olt-slate-500);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.olt-date-chip,
.olt-status-chip,
.olt-privacy-chip,
.olt-export-chip,
.olt-data-export-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--olt-space-1);
    min-height: 1.75rem;
    padding: var(--olt-space-1) var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
    color: var(--olt-slate-700);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.olt-date-chip--soon,
.olt-status-chip--pending,
.olt-privacy-chip--review,
.olt-export-chip--ready,
.olt-data-export-chip--ready {
    background: var(--olt-amber-100);
    border-color: var(--olt-amber-200);
    color: var(--olt-slate-900);
}

.olt-status-chip--complete,
.olt-privacy-chip--private,
.olt-export-chip--complete,
.olt-data-export-chip--complete {
    background: var(--olt-green-100);
    border-color: var(--olt-green-200);
    color: var(--olt-green-800);
}

.olt-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(2.5rem, 1fr));
    gap: var(--olt-space-2);
}

.olt-calendar-weekday,
.olt-calendar-day {
    min-width: 0;
    border-radius: var(--olt-radius-md);
    text-align: center;
}

.olt-calendar-weekday {
    color: var(--olt-slate-500);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.olt-calendar-day {
    min-height: 4rem;
    padding: var(--olt-space-2);
    background: var(--olt-slate-50);
    border: 1px solid var(--olt-slate-200);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--olt-space-1);
}

.olt-calendar-day.is-today {
    border-color: var(--olt-green-600);
    box-shadow: inset 0 0 0 1px var(--olt-green-600);
}

.olt-calendar-day.has-events {
    background: var(--olt-amber-50);
    border-color: var(--olt-amber-200);
}

.olt-calendar-day-number {
    color: var(--olt-slate-900);
    font-size: 0.95rem;
    font-weight: 800;
}

.olt-calendar-day-meta {
    color: var(--olt-slate-600);
    font-size: 0.75rem;
    line-height: 1.25;
}

.olt-upcoming-item,
.olt-person-row,
.olt-person-card,
.olt-checklist-item,
.olt-privacy-control,
.olt-export-row,
.olt-data-export-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--olt-space-3);
    align-items: center;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
}

.olt-upcoming-date {
    width: 3.25rem;
    min-height: 3.25rem;
    border-radius: var(--olt-radius-md);
    background: var(--olt-green-50);
    color: var(--olt-green-900);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1.05;
}

.olt-upcoming-date span {
    color: var(--olt-slate-600);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.olt-upcoming-title,
.olt-person-row-name,
.olt-checklist-title,
.olt-privacy-control-title,
.olt-export-title {
    color: var(--olt-slate-900);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
}

.olt-upcoming-meta,
.olt-person-row-meta,
.olt-checklist-copy,
.olt-privacy-control-copy,
.olt-export-copy {
    color: var(--olt-slate-600);
    font-size: 0.84rem;
    line-height: 1.45;
}

.olt-person-row {
    grid-template-columns: auto minmax(0, 1fr);
}

.olt-person-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.olt-person-row-actions,
.olt-export-actions,
.olt-data-export-actions,
.olt-privacy-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--olt-space-2);
}

.olt-person-profile {
    padding: var(--olt-space-6);
}

.olt-person-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--olt-space-4);
    align-items: center;
    padding-bottom: var(--olt-space-5);
    border-bottom: 1px solid var(--olt-slate-200);
}

.olt-person-detail-grid,
.olt-privacy-detail-grid,
.olt-export-detail-grid,
.olt-data-export-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-5);
}

.olt-person-fact,
.olt-privacy-fact,
.olt-export-fact,
.olt-data-export-fact {
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
}

.olt-person-fact-label,
.olt-privacy-fact-label,
.olt-export-fact-label,
.olt-data-export-fact-label {
    color: var(--olt-slate-500);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.olt-person-fact-value,
.olt-privacy-fact-value,
.olt-export-fact-value,
.olt-data-export-fact-value {
    color: var(--olt-slate-900);
    font-size: 0.95rem;
    font-weight: 800;
}

.olt-onboarding-panel {
    border-color: var(--olt-green-200);
    background: color-mix(in oklch, var(--olt-green-50) 44%, var(--olt-surface-base));
}

.olt-adoption-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.75fr);
    gap: var(--olt-space-5);
    align-items: stretch;
    margin-bottom: var(--olt-space-5);
    padding: var(--olt-space-5);
    border: 1px solid var(--olt-green-200);
    border-radius: var(--olt-radius-md);
    background: color-mix(in oklch, var(--olt-green-50) 38%, var(--olt-surface-base));
    box-shadow: var(--olt-shadow-sm);
}

.olt-adoption-copy h2 {
    margin: 0 0 var(--olt-space-2);
    color: var(--olt-slate-900);
    font-size: 1.35rem;
    line-height: 1.25;
}

.olt-adoption-copy p,
.olt-adoption-aside p,
.olt-invite-first-reply p {
    color: var(--olt-slate-600);
    line-height: 1.55;
}

.olt-adoption-aside,
.olt-invite-first-reply {
    padding: var(--olt-space-4);
    border: 1px solid var(--olt-amber-200);
    border-radius: var(--olt-radius-md);
    background: color-mix(in oklch, var(--olt-amber-50) 54%, var(--olt-surface-base));
}

.olt-onboarding-steps,
.olt-invite-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-4);
}

.olt-onboarding-step,
.olt-onboarding-steps > span,
.olt-invite-progress > span {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-1);
    min-width: 0;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    color: var(--olt-slate-700);
    font-weight: 800;
}

.olt-onboarding-step span {
    color: var(--olt-slate-600);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.5;
}

.olt-empty--adoption {
    border: 1px solid var(--olt-green-200);
    border-radius: var(--olt-radius-md);
    background: color-mix(in oklch, var(--olt-green-50) 36%, var(--olt-surface-base));
}

.olt-checklist-item {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
}

.olt-checklist-marker {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--olt-slate-300);
    background: var(--olt-surface-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--olt-slate-500);
    font-size: 0.82rem;
    font-weight: 800;
}

.olt-checklist-item.is-complete .olt-checklist-marker {
    background: var(--olt-green-600);
    border-color: var(--olt-green-600);
    color: var(--olt-text-inverse);
}

.olt-checklist-item.is-current {
    border-color: var(--olt-amber-200);
    background: var(--olt-amber-50);
}

.olt-member-card:has(.olt-badge-pending) {
    border-color: var(--olt-amber-200);
    background: color-mix(in oklch, var(--olt-amber-50) 58%, var(--olt-surface-base));
}

.olt-member-card:has(.olt-badge-pending) .olt-member-name::after {
    content: "Pending";
    display: inline-flex;
    margin-left: var(--olt-space-2);
    padding: 0 var(--olt-space-2);
    border-radius: var(--olt-radius-sm);
    background: var(--olt-amber-100);
    color: var(--olt-amber-800);
    font-size: 0.7rem;
    font-weight: 800;
    vertical-align: middle;
}

.olt-privacy-control {
    grid-template-columns: minmax(0, 1fr) auto;
}

.olt-privacy-control .olt-btn,
.olt-export-row .olt-btn,
.olt-checklist-item .olt-btn {
    min-height: 2.25rem;
    padding: var(--olt-space-2) var(--olt-space-3);
}

.olt-export-panel,
.olt-data-export-panel {
    border-color: var(--olt-blue-400);
}

.olt-export-row,
.olt-data-export-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.olt-export-format,
.olt-data-export-format {
    color: var(--olt-blue-600);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.olt-vault-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    gap: var(--olt-space-6);
    align-items: start;
}

.olt-vault-list-panel,
.olt-vault-form-panel {
    min-width: 0;
    padding: var(--olt-space-5);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-sm);
}

.olt-vault-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--olt-space-4);
    margin-bottom: var(--olt-space-4);
}

.olt-vault-heading h2 {
    font-size: 1.18rem;
    line-height: 1.25;
}

.olt-vault-kicker {
    color: var(--olt-slate-500);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.olt-vault-chip,
.olt-vault-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: var(--olt-space-1) var(--olt-space-3);
    border: 1px solid var(--olt-green-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-green-100);
    color: var(--olt-green-800);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.olt-vault-filters,
.olt-vault-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-2);
}

.olt-vault-filters {
    margin-bottom: var(--olt-space-4);
}

.olt-vault-filter {
    min-height: 2.25rem;
    padding: var(--olt-space-2) var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    color: var(--olt-slate-700);
    cursor: pointer;
    font-weight: 700;
}

.olt-vault-filter.is-active,
.olt-vault-filter:hover {
    border-color: var(--olt-green-300);
    background: var(--olt-green-50);
    color: var(--olt-green-900);
}

.olt-vault-list,
.olt-vault-form {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
}

.olt-vault-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--olt-space-3);
    padding: var(--olt-space-4);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
}

.olt-vault-card-main {
    min-width: 0;
}

.olt-vault-card-main h3 {
    margin-top: var(--olt-space-2);
    font-size: 1.08rem;
}

.olt-vault-card-main p,
.olt-vault-card-meta,
.olt-vault-state {
    color: var(--olt-slate-600);
    font-size: 0.92rem;
    line-height: 1.45;
}

.olt-vault-recipe-preview {
    margin-top: var(--olt-space-2);
    padding: var(--olt-space-2);
    border-radius: var(--olt-radius-md);
    background: var(--olt-amber-50);
}

.olt-vault-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-1);
    text-align: right;
}

.olt-vault-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.olt-vault-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.olt-vault-state {
    padding: var(--olt-space-4);
    border: 1px dashed var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
}

.olt-vault-state[data-olt-vault-state="error"] {
    border-color: var(--olt-rose-400);
    background: var(--olt-rose-50);
    color: var(--olt-rose-700);
}

.olt-composition-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    gap: var(--olt-space-6);
    align-items: start;
    margin-top: var(--olt-space-6);
}

.olt-composition-list-panel,
.olt-composition-builder-panel {
    min-width: 0;
    padding: var(--olt-space-5);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-sm);
}

.olt-composition-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--olt-space-4);
    margin-bottom: var(--olt-space-4);
}

.olt-composition-heading h2 {
    font-size: 1.18rem;
    line-height: 1.25;
}

.olt-composition-kicker {
    color: var(--olt-slate-500);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.olt-composition-chip,
.olt-composition-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: var(--olt-space-1) var(--olt-space-3);
    border: 1px solid var(--olt-blue-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-blue-50);
    color: var(--olt-blue-700);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.olt-composition-list,
.olt-composition-builder-panel {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
}

.olt-composition-card,
.olt-media-bundle-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--olt-space-3);
    padding: var(--olt-space-4);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
}

.olt-composition-card h3,
.olt-media-bundle-card h3 {
    margin-top: var(--olt-space-2);
    font-size: 1.08rem;
}

.olt-composition-card p,
.olt-media-bundle-card p,
.olt-composition-state,
.olt-composition-preview {
    color: var(--olt-slate-600);
    font-size: 0.92rem;
    line-height: 1.45;
}

.olt-media-bundle-card {
    margin-top: var(--olt-space-3);
    border-color: var(--olt-green-200);
    background: var(--olt-green-50);
}

.olt-composition-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--olt-space-2);
}

.olt-composition-type-card {
    display: flex;
    min-width: 0;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: var(--olt-space-2);
    padding: var(--olt-space-2);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
    color: var(--olt-slate-700);
    cursor: pointer;
    font-weight: 800;
}

.olt-composition-type-card.is-active,
.olt-composition-type-card:hover {
    border-color: var(--olt-blue-300);
    background: var(--olt-blue-50);
    color: var(--olt-blue-800);
}

.olt-composition-state,
.olt-composition-preview {
    padding: var(--olt-space-4);
    border: 1px dashed var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
}

.olt-composition-state[data-olt-composition-state="error"],
.olt-composition-preview[data-olt-composition-state="error"] {
    border-color: var(--olt-rose-400);
    background: var(--olt-rose-50);
    color: var(--olt-rose-700);
}

.olt-composition-state[data-olt-composition-state="saved"],
.olt-composition-state[data-olt-composition-state="deleted"],
.olt-composition-preview[data-olt-composition-state="saved"] {
    border-color: var(--olt-green-300);
    background: var(--olt-green-50);
    color: var(--olt-green-800);
}

.olt-composition-preview-head {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    margin-bottom: var(--olt-space-3);
}

.olt-composition-preview-head span {
    display: block;
    color: var(--olt-slate-500);
    font-size: 0.82rem;
    font-weight: 700;
}

.olt-composition-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: var(--olt-space-2);
}

.olt-composition-preview-grid div {
    padding: var(--olt-space-2);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
}

.olt-composition-preview-grid span,
.olt-composition-preview-grid strong {
    display: block;
}

.olt-members-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    padding: 0;
}

.olt-member-card {
    border-radius: var(--olt-radius-md);
    text-align: left;
}

.olt-member-card > .olt-avatar-64,
.olt-member-card > .olt-user-avatar--48 {
    margin-bottom: var(--olt-space-3);
}

.olt-member-actions {
    flex-wrap: wrap;
    margin-top: var(--olt-space-3);
}

.olt-member-actions .olt-btn,
.olt-member-actions .olt-role-sel,
.olt-member-actions select {
    min-width: min(100%, 8rem);
}

.olt-post--activity {
    opacity: 1;
    border-radius: var(--olt-radius-md);
    box-shadow: var(--olt-shadow-sm);
}

.olt-post--activity .olt-post-header {
    align-items: flex-start;
    padding: var(--olt-space-3);
}

.olt-post--activity .olt-post-body {
    padding: var(--olt-space-3);
    color: var(--olt-slate-700);
    font-size: 0.95rem;
    line-height: 1.5;
}

.olt-post--activity .olt-post-actions {
    padding: 0 var(--olt-space-3) var(--olt-space-3);
    justify-content: flex-end;
}

.olt-post--activity .olt-post-type-badge {
    letter-spacing: 0;
}

@media (max-width: 1024px) {
    .olt-operational-grid,
    .olt-calendar-layout,
    .olt-people-layout,
    .olt-privacy-layout,
    .olt-export-layout,
    .olt-data-export-layout,
    .olt-vault-layout,
    .olt-composition-layout,
    .olt-onboarding-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .olt-composition-card,
    .olt-media-bundle-card,
    .olt-composition-type-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .olt-calendar-grid {
        gap: var(--olt-space-1);
    }

    .olt-calendar-weekday {
        font-size: 0.68rem;
    }

    .olt-calendar-day {
        min-height: 3.25rem;
        padding: var(--olt-space-1);
    }

    .olt-upcoming-item,
    .olt-checklist-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .olt-privacy-control,
    .olt-export-row,
    .olt-data-export-row {
        grid-template-columns: 1fr;
    }

    .olt-upcoming-item .olt-btn,
    .olt-checklist-item .olt-btn,
    .olt-privacy-control .olt-btn,
    .olt-export-row .olt-btn,
    .olt-data-export-row .olt-btn {
        width: 100%;
        justify-content: center;
        grid-column: 1 / -1;
    }

    .olt-person-summary {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .olt-person-row-actions,
    .olt-export-actions,
    .olt-data-export-actions,
    .olt-privacy-actions {
        justify-content: stretch;
    }
}

/* ── Auth Styles ─────────────────────────────────────────────────────────────── */
.olt-auth-body {
    background: #ffffff;
    color: var(--motif-color-text-on-light-strong);
    overflow-x: clip;
}

.olt-auth-shell {
    width: 100%;
    min-height: 100dvh;
    background: #ffffff;
}

.olt-auth-hero {
    width: min(100%, 88rem);
    min-height: 100svh;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 28rem);
    grid-template-areas:
        "logo card"
        "note note";
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    background: #ffffff;
}

.olt-auth-logo-panel {
    grid-area: logo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.olt-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--olt-space-4);
    color: inherit;
    text-decoration: none;
}

.olt-auth-logo {
    width: 800px;
    max-width: min(100%, 50rem);
    max-height: min(62svh, 42rem);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(20, 39, 25, 0.16));
}

.olt-auth-brand-mark {
    font-family: var(--olt-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--olt-green-600);
    min-width: 2rem;
}

.olt-auth-brand-copy {
    display: flex;
    flex-direction: column;
}

.olt-auth-brand-name {
    font-weight: 700;
    color: var(--olt-slate-900);
    font-size: 1.1rem;
}

.olt-auth-brand-sub {
    font-size: 0.86rem;
    color: var(--olt-slate-500);
}

.olt-auth-hero-note {
    grid-area: note;
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem);
    background:
        radial-gradient(circle at 18% 18%, rgba(134, 176, 62, 0.18), transparent 24rem),
        radial-gradient(circle at 82% 16%, rgba(211, 161, 67, 0.16), transparent 28rem),
        linear-gradient(135deg, #edf7e8 0%, #fff6e8 58%, #f7efe2 100%);
    box-shadow:
        inset 0 1px 0 rgba(65, 78, 68, 0.05),
        inset 0 -1px 0 rgba(65, 78, 68, 0.05);
    text-align: center;
}

.olt-auth-hero-note > * {
    width: min(100%, 52rem);
    margin-left: auto;
    margin-right: auto;
}

.olt-auth-explainer {
    background: #ffffff;
    padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 3.5rem);
    border-top: 1px solid var(--olt-slate-100);
}

.olt-auth-explainer-inner {
    width: min(100%, 68rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-6);
}

.olt-auth-kicker {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olt-green-600);
}

.olt-auth-title {
    font-size: clamp(2.35rem, 4vw, 4rem);
    line-height: 1.14;
    color: var(--olt-slate-900);
    text-wrap: balance;
}

.olt-auth-section-title {
    max-width: 48rem;
    font-size: clamp(1.9rem, 3vw, 3rem);
    line-height: 1.16;
    color: var(--olt-slate-900);
    text-wrap: balance;
}

.olt-auth-copy {
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--olt-slate-600);
}

.olt-auth-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-2);
}

.olt-auth-chip {
    padding: var(--olt-space-2) var(--olt-space-3);
    background: var(--olt-green-100);
    color: var(--olt-green-800);
    border-radius: var(--olt-radius-md);
    font-size: 0.84rem;
    font-weight: 600;
}

.olt-auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--olt-space-4);
}

.olt-auth-feature {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-2);
}

.olt-auth-feature strong {
    font-weight: 700;
    color: var(--olt-slate-900);
    font-size: 1.02rem;
}

.olt-auth-feature span {
    font-size: 0.95rem;
    color: var(--olt-slate-600);
    line-height: 1.72;
}

.olt-auth-card {
    grid-area: card;
    background: var(--olt-surface-base);
    border-radius: var(--olt-radius-2xl);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--olt-shadow-xl);
    width: min(100%, 32rem);
    margin: 0;
    justify-self: end;
}

.olt-auth-card-logo {
    display: none;
    width: 800px;
    max-width: min(100%, 800px);
    height: auto;
    margin: 0 auto var(--olt-space-5);
    object-fit: contain;
}

.olt-auth-card--success {
    background: var(--olt-green-50);
}

.olt-auth-card--error {
    background: var(--olt-rose-50);
}

.olt-auth-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olt-green-600);
}

.olt-auth-card-title {
    font-size: 1.9rem;
    margin-bottom: var(--olt-space-4);
}

.olt-auth-message {
    font-size: 1.05rem;
    color: var(--olt-slate-700);
    line-height: 1.72;
    margin-bottom: var(--olt-space-5);
}

.olt-auth-hint {
    font-size: 0.85rem;
    color: var(--olt-slate-600);
    margin-bottom: var(--olt-space-6);
}

.olt-auth-state {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--olt-green-600);
    margin-bottom: var(--olt-space-2);
}

.olt-auth-state--error {
    color: var(--olt-rose-600);
}

.olt-auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
}

.olt-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

.olt-auth-label {
    font-weight: 600;
    color: var(--olt-slate-900);
    font-size: 1rem;
}

.olt-auth-input {
    padding: 0.95rem 1rem;
    border: 1px solid var(--olt-slate-300);
    border-radius: var(--olt-radius-md);
    font-family: var(--olt-font-sans);
    font-size: 1.02rem;
    transition: all var(--olt-transition);
}

.olt-auth-input:focus {
    outline: none;
    border-color: var(--olt-green-600);
    box-shadow: var(--olt-focus-ring);
}

.olt-auth-button {
    padding: 0.95rem 1.5rem;
    background: linear-gradient(135deg, var(--olt-green-600), var(--olt-green-500));
    color: var(--olt-text-inverse);
    border: none;
    border-radius: var(--olt-radius-lg);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--olt-transition);
}

.olt-auth-button:hover {
    background: linear-gradient(135deg, var(--olt-green-700), var(--olt-green-600));
    box-shadow: var(--olt-shadow-lg);
}

.olt-auth-button--link {
    background: transparent;
    color: var(--olt-green-600);
    border: 1px solid var(--olt-green-600);
}

.olt-auth-button--link:hover {
    background: var(--olt-green-50);
    border-color: var(--olt-green-700);
    color: var(--olt-green-700);
}

.olt-auth-divider {
    height: 1px;
    background: var(--olt-slate-200);
    margin: var(--olt-space-4) 0;
}

.olt-auth-caption {
    font-size: 0.95rem;
    color: var(--olt-slate-600);
    text-align: center;
}

.olt-auth-link {
    color: var(--olt-green-600);
    text-decoration: none;
    font-size: 0.95rem;
    text-align: center;
    transition: color var(--olt-transition);
}

.olt-auth-link:hover {
    color: var(--olt-green-700);
    text-decoration: underline;
}

.olt-auth-footer {
    width: 100%;
    padding: var(--olt-space-6) clamp(1.25rem, 4vw, 3rem);
    background: #ffffff;
    border-top: 1px solid var(--olt-slate-100);
    color: var(--olt-slate-500);
    font-size: 0.92rem;
    line-height: 1.6;
    text-align: center;
}

.olt-capture-studio {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.55fr) minmax(18rem, 0.75fr);
    gap: var(--olt-space-6);
    align-items: start;
}

.olt-capture-editor,
.olt-voice-recorder,
.olt-story-ai-panel,
.olt-drafts-panel {
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-xl);
    background: var(--olt-surface-base);
    box-shadow: var(--olt-shadow-sm);
}

.olt-capture-editor,
.olt-drafts-panel {
    padding: var(--olt-space-6);
}

.olt-capture-toolbar {
    display: flex;
    justify-content: space-between;
    gap: var(--olt-space-4);
    align-items: flex-start;
    margin-bottom: var(--olt-space-5);
}

.olt-draft-status {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0 var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
    color: var(--olt-slate-700);
    font-size: 0.85rem;
    font-weight: 700;
}

.olt-draft-status.draft-state-saving {
    color: var(--olt-amber-700);
    background: var(--olt-amber-50);
    border-color: var(--olt-amber-200);
}

.olt-draft-status.draft-state-saved {
    color: var(--olt-green-700);
    background: var(--olt-green-50);
    border-color: var(--olt-green-200);
}

.olt-draft-status.draft-state-error,
.olt-draft-status.draft-state-expired,
.olt-draft-status.draft-state-sync-failed {
    color: var(--olt-rose-700);
    background: var(--olt-rose-50);
    border-color: var(--olt-rose-200);
}

.olt-draft-status.draft-state-offline,
.olt-draft-status.draft-state-syncing {
    color: var(--olt-sky-600);
    background: var(--olt-sky-100);
    border-color: var(--olt-sky-400);
}

.olt-offline-sync-banner {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    margin: calc(var(--olt-space-3) * -1) 0 var(--olt-space-5);
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
    color: var(--olt-slate-700);
    font-size: 0.92rem;
    font-weight: 700;
}

.olt-offline-sync-banner[data-olt-offline-state="offline"],
.olt-offline-sync-banner[data-olt-offline-state="syncing"] {
    color: var(--olt-sky-600);
    background: var(--olt-sky-100);
    border-color: var(--olt-sky-400);
}

.olt-offline-sync-banner[data-olt-offline-state="sync-failed"] {
    color: var(--olt-rose-700);
    background: var(--olt-rose-50);
    border-color: var(--olt-rose-200);
}

.olt-template-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--olt-space-3);
    margin-bottom: var(--olt-space-5);
}

.olt-story-template {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--olt-space-2) var(--olt-space-3);
    align-items: center;
    min-height: 5.75rem;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
    color: var(--olt-slate-800);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--olt-transition), box-shadow var(--olt-transition), transform var(--olt-transition);
}

.olt-story-template:hover,
.olt-story-template.is-active {
    border-color: var(--olt-green-300);
    box-shadow: var(--olt-shadow-sm);
    transform: translateY(-1px);
}

.olt-story-template strong {
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.25;
}

.olt-story-template-meta {
    grid-column: 2;
    color: var(--olt-slate-500);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.olt-capture-form {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

.olt-capture-inline-fields {
    display: grid;
    grid-template-columns: minmax(10rem, 0.4fr) minmax(0, 1fr);
    gap: var(--olt-space-4);
}

.olt-mobile-capture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--olt-space-3);
}

.olt-mobile-capture-grid input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.olt-mobile-capture-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--olt-space-2);
    min-height: 2.75rem;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
    color: var(--olt-slate-800);
    font-weight: 800;
    cursor: pointer;
}

.olt-mobile-capture-action:hover,
.olt-mobile-capture-action:focus-within {
    border-color: var(--olt-green-300);
    background: var(--olt-green-50);
}

.olt-capture-expiry {
    min-height: 1.35rem;
    color: var(--olt-slate-500);
    font-size: 0.86rem;
}

.olt-voice-recorder {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-5);
    padding: var(--olt-space-5);
    position: sticky;
    top: calc(var(--olt-topbar-h) + var(--olt-space-4));
}

.olt-mic-permission {
    display: flex;
    align-items: flex-start;
    gap: var(--olt-space-3);
    padding: var(--olt-space-4);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
}

.olt-mic-permission p {
    margin: var(--olt-space-1) 0 0;
    color: var(--olt-slate-600);
    font-size: 0.92rem;
}

.olt-mic-permission[data-olt-mic-permission-state="granted"],
.olt-mic-permission[data-olt-mic-permission-state="uploading"] {
    border-color: var(--olt-green-200);
    background: var(--olt-green-50);
}

.olt-mic-permission[data-olt-mic-permission-state="denied"],
.olt-mic-permission[data-olt-mic-permission-state="blocked"],
.olt-mic-permission[data-olt-mic-permission-state="error"] {
    border-color: var(--olt-rose-200);
    background: var(--olt-rose-50);
}

.olt-story-ai-panel {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
    min-width: 0;
    padding: var(--olt-space-5);
}

.olt-story-ai-panel[data-olt-ai-status="upgrade"],
.olt-story-ai-panel[data-olt-ai-status="unavailable"] {
    opacity: 0.92;
}

.olt-ai-workspace-inner {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-4);
}

.olt-ai-artifact-grid {
    display: grid;
    gap: var(--olt-space-3);
}

.olt-ai-artifact-column {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    min-width: 0;
}

.olt-ai-review-fields {
    display: grid;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-3);
}

.olt-ai-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--olt-space-3);
}

.olt-recording-meter {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--olt-space-2);
    align-items: end;
    height: 5rem;
    padding: var(--olt-space-3);
    border-radius: var(--olt-radius-md);
    background: linear-gradient(180deg, var(--olt-slate-50), var(--olt-slate-100));
}

.olt-recording-meter span {
    display: block;
    height: 35%;
    border-radius: var(--olt-radius-sm);
    background: var(--olt-slate-300);
}

.olt-recording-meter span:nth-child(2),
.olt-recording-meter span:nth-child(4) {
    height: 55%;
}

.olt-recording-meter span:nth-child(3) {
    height: 78%;
}

.olt-recording-meter--active span {
    background: var(--olt-green-500);
    animation: olt-recording-pulse 900ms ease-in-out infinite alternate;
}

.olt-recording-meter--active span:nth-child(2) {
    animation-delay: 120ms;
}

.olt-recording-meter--active span:nth-child(3) {
    animation-delay: 240ms;
}

.olt-recording-meter--active span:nth-child(4) {
    animation-delay: 360ms;
}

.olt-recording-meter--active span:nth-child(5) {
    animation-delay: 480ms;
}

.olt-record-btn {
    width: 100%;
}

.olt-voice-upload-status {
    min-height: 1.35rem;
    color: var(--olt-green-700);
    font-size: 0.9rem;
    font-weight: 700;
}

.olt-drafts-panel {
    margin-top: var(--olt-space-6);
}

.olt-draft-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--olt-space-3);
}

.olt-draft-item {
    display: flex;
    align-items: center;
    gap: var(--olt-space-3);
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
    color: var(--olt-slate-800);
    cursor: pointer;
    text-align: left;
}

.olt-draft-item:hover {
    border-color: var(--olt-green-300);
    background: var(--olt-green-50);
}

.olt-draft-item--offline {
    border-color: var(--olt-sky-400);
    background: var(--olt-sky-100);
}

.olt-push-panel {
    margin-bottom: var(--olt-space-5);
}

.olt-push-panel[data-olt-push-state="enabled"] {
    border-color: var(--olt-green-200);
}

.olt-push-panel[data-olt-push-state="unsupported"],
.olt-push-panel[data-olt-push-state="error"] {
    border-color: var(--olt-rose-200);
}

.olt-draft-item small {
    display: block;
    margin-top: var(--olt-space-1);
    color: var(--olt-slate-500);
}

.olt-album-audio-card {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    justify-content: center;
    min-height: 10rem;
    padding: var(--olt-space-4);
    background: var(--olt-slate-100);
}

.olt-album-audio-card svg {
    width: 2rem;
    height: 2rem;
    color: var(--olt-green-600);
}

@keyframes olt-recording-pulse {
    from {
        opacity: 0.42;
        transform: scaleY(0.68);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@media (max-width: 960px) {
    .olt-capture-studio {
        grid-template-columns: 1fr;
    }

    .olt-voice-recorder {
        position: static;
    }
}

@media (max-width: 620px) {
    .olt-capture-toolbar,
    .olt-capture-inline-fields,
    .olt-mobile-capture-grid {
        grid-template-columns: 1fr;
    }

    .olt-capture-toolbar {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .olt-auth-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "card"
            "note";
        min-height: 100svh;
        padding-top: var(--olt-space-8);
        padding-bottom: var(--olt-space-8);
    }

    .olt-auth-logo-panel {
        align-items: center;
    }

    .olt-auth-brand {
        align-items: center;
        text-align: center;
    }

    .olt-auth-logo {
        max-width: min(100%, 30rem);
        max-height: 34svh;
    }

    .olt-auth-card {
        justify-self: center;
        width: min(100%, 32rem);
    }

    .olt-auth-explainer-inner {
        align-items: flex-start;
    }

    .olt-auth-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .olt-auth-hero {
        padding-left: var(--olt-space-4);
        padding-right: var(--olt-space-4);
    }

    .olt-auth-card {
        padding: var(--olt-space-6);
    }

    .olt-auth-title {
        font-size: clamp(2rem, 12vw, 3rem);
    }
}

/* Print Styles */
@media print {
    .olt-topbar,
    .olt-sidebar,
    .olt-nav,
    .olt-post-actions,
    .olt-chat-input-row {
        display: none !important;
    }

    body {
        background: var(--olt-surface-base);
    }

    .olt-main {
        margin-left: 0;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Light mode is current default; dark mode can be added here */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast support */
@media (prefers-contrast: more) {
    .olt-btn {
        border: 2px solid currentColor;
    }
}

.olt-mail-shell {
    max-width: 640px;
    margin: 0 auto;
}

.olt-mail-card {
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 24%),
        linear-gradient(160deg, #0e2417 0%, #163823 52%, #204e30 100%);
    box-shadow: 0 28px 80px rgba(14, 36, 23, 0.16);
}

.olt-mail-head {
    padding: 28px 32px 12px;
    color: #f4fff6;
}

.olt-mail-mark {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
}

.olt-mail-kicker {
    margin: 18px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #bbf7d0;
}

.olt-mail-title {
    margin: 12px 0 0;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.olt-mail-body {
    margin: 0 20px 20px;
    padding: 28px 28px 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
}

.olt-mail-body p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.8;
    color: #355244;
}

.olt-mail-button {
    display: inline-block;
    margin: 8px 0 22px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a, #14532d);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.olt-mail-resource {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 16px;
    background: #fff4d6;
    color: #6b4f21;
    font-size: 14px;
    word-break: break-word;
}

.olt-mail-note {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(20, 83, 45, 0.12);
    color: #64796c;
    font-size: 13px;
}

.olt-care-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.olt-care-panel {
    min-width: 0;
    border: 1px solid rgba(38, 78, 55, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 56px rgba(31, 53, 44, 0.08);
    overflow: hidden;
}

.olt-care-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(38, 78, 55, 0.1);
}

.olt-care-heading h2 {
    margin: 4px 0 0;
    font-size: 20px;
    line-height: 1.2;
}

.olt-care-kicker {
    margin: 0;
    color: #6b7f71;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.olt-care-chip,
.olt-care-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef7ef;
    color: #25543a;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.olt-care-list,
.olt-care-form {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.olt-care-form {
    border-top: 1px solid rgba(38, 78, 55, 0.1);
    background: rgba(245, 251, 247, 0.72);
}

.olt-care-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(38, 78, 55, 0.12);
    border-radius: 8px;
    background: #ffffff;
}

.olt-care-card h3 {
    margin: 8px 0 4px;
    font-size: 17px;
    line-height: 1.25;
}

.olt-care-card p {
    margin: 0;
    color: #5d6e63;
    font-size: 14px;
    line-height: 1.5;
}

.olt-care-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #687a6d;
    font-size: 12px;
    font-weight: 700;
}

.olt-care-state {
    padding: 14px;
    border-radius: 8px;
    background: #f7faf8;
    color: #5d6e63;
    font-size: 14px;
    line-height: 1.5;
}

.olt-care-state[data-olt-care-state="error"] {
    background: #fff1f2;
    color: #9f1239;
}

@media (max-width: 1180px) {
    .olt-care-layout {
        grid-template-columns: 1fr;
    }
}
/* Family plan billing */
.olt-billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--olt-space-3);
    margin: var(--olt-space-4) 0;
}

.olt-billing-fact {
    min-width: 0;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-slate-50);
}

.olt-billing-fact span,
.olt-billing-event .olt-muted-text {
    display: block;
    color: var(--olt-slate-600);
    font-size: 0.82rem;
    line-height: 1.35;
}

.olt-billing-fact strong {
    display: block;
    margin-top: var(--olt-space-1);
    color: var(--olt-slate-950);
    font-size: 1rem;
    line-height: 1.25;
}

.olt-billing-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: var(--olt-space-1) var(--olt-space-3);
    border-radius: var(--olt-radius-md);
    border: 1px solid var(--olt-slate-200);
    background: var(--olt-slate-50);
    color: var(--olt-slate-700);
    font-size: 0.8rem;
    font-weight: 800;
}

.olt-billing-chip--paid {
    background: var(--olt-green-100);
    border-color: var(--olt-green-200);
    color: var(--olt-green-900);
}

.olt-billing-alert {
    margin: var(--olt-space-3) 0;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-amber-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-amber-50);
    color: var(--olt-amber-900);
    font-size: 0.9rem;
    line-height: 1.45;
}

.olt-billing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-4);
}

.olt-billing-actions .olt-label {
    width: 100%;
    margin: 0;
}

.olt-billing-actions .olt-input {
    width: min(100%, 12rem);
}

.olt-billing-history {
    display: flex;
    flex-direction: column;
    gap: var(--olt-space-3);
    margin-top: var(--olt-space-5);
}

.olt-billing-history h3 {
    margin: 0;
    color: var(--olt-slate-900);
    font-size: 1rem;
}

.olt-billing-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--olt-space-3);
    align-items: center;
    padding: var(--olt-space-3);
    border: 1px solid var(--olt-slate-200);
    border-radius: var(--olt-radius-md);
    background: var(--olt-surface-base);
}

@media (max-width: 700px) {
    .olt-billing-actions {
        align-items: stretch;
    }

    .olt-billing-actions .olt-input,
    .olt-billing-actions .olt-btn {
        width: 100%;
    }
}

/* Phase 10 locale layout support */
.olt-topbar {
    inset-inline: 0;
    left: auto;
    right: auto;
}

.olt-session-bar {
    inset-inline-end: var(--olt-space-6);
    right: auto;
}

.olt-sidebar {
    inset-inline-start: 0;
    left: auto;
    right: auto;
    border-inline-end: 1px solid var(--olt-glass-border);
    border-right: 0;
}

.olt-main {
    margin-left: 0;
    margin-inline-start: var(--olt-sidebar-w);
}

.olt-home-product-preview,
.olt-toast-area,
.olt-tree-panel,
.olt-lightbox-close {
    inset-inline-end: var(--olt-space-4);
    right: auto;
}

.olt-home-product-preview {
    inset-inline-end: clamp(1rem, 3vw, 2.5rem);
}

.olt-home-footer-content {
    margin-left: 0;
    margin-inline-start: auto;
    align-items: flex-end;
}

.olt-home-footer-copy,
.olt-home-footer-meta {
    text-align: end;
}

.olt-home-compare-card li {
    padding-left: 0;
    padding-inline-start: 1.25rem;
}

.olt-home-compare-card li::before {
    left: auto;
    inset-inline-start: 0;
}

.olt-tag-del {
    inset-inline-end: -0.5rem;
    right: auto;
}

.olt-avatar-status::after {
    inset-inline-end: 0;
    right: auto;
}

@media (max-width: 1024px) {
    .olt-sidebar {
        width: min(20rem, 84vw);
        transform: translateX(-100%);
    }

    .olt-sidebar.open {
        transform: translateX(0);
    }

    .olt-main {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    .olt-session-bar,
    .olt-home-product-preview,
    .olt-toast-area,
    .olt-tree-panel,
    .olt-lightbox-close {
        inset-inline-end: 1rem;
        right: auto;
    }
}

@media print {
    .olt-main {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
}