/* ============================================================
   memento-refresh.css
   Rolls out the Lab's design language across the main app.
   Loaded AFTER styles.css so it overrides without editing it.
   Admin + Pro portals don't load this file, so they're untouched.

   Principle: ink on linen, aged amber accent, serif italic for
   human things, Inter for chrome, flat paper instead of neumorphism.
   ============================================================ */

/* ── 1. Design tokens  (override + extend) ────────────────── */

:root {
    /* Memento design language tokens (for new code) */
    --mm-ink:          #1C1611;
    --mm-ink-2:        #3D3228;
    --mm-muted:        #6B5C4D;
    --mm-muted-light:  #9C8F7E;
    --mm-linen:        #FAF6F0;
    --mm-cream:        #FFFEFB;
    --mm-divider:      rgba(28, 22, 17, 0.08);
    --mm-divider-2:    rgba(28, 22, 17, 0.14);
    --mm-amber:        #B8862D;
    --mm-amber-light:  #E6C07A;
    --mm-amber-soft:   rgba(184, 134, 45, 0.10);
    --mm-amber-deep:   #8A5E1A;
    --mm-green:        #5B8C5A;
    --mm-terracotta:   #B5651D;
    --mm-serif:        'Georgia', 'Palatino Linotype', 'Book Antiqua', serif;
    --mm-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Override the existing tokens so legacy components inherit the new palette */
    --primary:                   #B8862D;
    --primary-light:             #E6C07A;
    --accent:                    #8A5E1A;
    --accent-hover:              #6F4A14;
    --background:                #FAF6F0;
    --background-gradient-start: #FAF6F0;
    --background-gradient-end:   #F2ECE2;
    --text:                      #1C1611;
    --text-light:                #6B5C4D;
    --text-lighter:              #9C8F7E;
    --bg-app:                    #FAF6F0;
    --bg-card:                   #FFFEFB;
    --bg-card-warm:              #FFFEFB;
    --bg-header:                 #FFFEFB;
    --text-primary:              #1C1611;
    --text-secondary:            #3D3228;
    --text-light-warm:           #6B5C4D;
    --text-lighter-warm:         #9C8F7E;
    --highlight:                 rgba(184, 134, 45, 0.15);
    --card-bg:                   #FFFEFB;
    --tod-accent:                #B8862D;
    --tod-card-glow:             rgba(184, 134, 45, 0.08);

    /* Flatter shadows — paper, not neumorphism */
    --shadow-soft:   0 1px 2px rgba(28, 22, 17, 0.04), 0 4px 14px rgba(28, 22, 17, 0.05);
    --shadow-hover:  0 2px 4px rgba(28, 22, 17, 0.06), 0 8px 22px rgba(28, 22, 17, 0.08);
    --shadow-inset:  none;
}

/* Dark mode — same tokens, inverted values, triggered by
   existing [data-theme="dark"] OR our new body.mm-night */
html[data-theme="dark"],
body.mm-night {
    --mm-ink:      #F5EFE5;
    --mm-ink-2:    #D8CDBB;
    --mm-muted:    #8C7E6C;
    --mm-linen:    #1C1611;
    --mm-cream:    #221A12;
    --mm-divider:   rgba(242, 236, 226, 0.08);
    --mm-divider-2: rgba(242, 236, 226, 0.14);
    --mm-amber:    #E8C98C;
    --mm-amber-deep: #B8862D;

    --background:                #0F0B06;
    --background-gradient-start: #0F0B06;
    --background-gradient-end:   #1C1611;
    --text:                      #F5EFE5;
    --text-light:                #A69584;
    --text-lighter:              #8C7E6C;
    --bg-app:                    #0F0B06;
    --bg-card:                   #1C1611;
    --bg-card-warm:              #221A12;
    --bg-header:                 #1C1611;
    --text-primary:              #F5EFE5;
    --text-secondary:            #D8CDBB;
    --card-bg:                   #1C1611;
}

/* ── 2. Typography system ──────────────────────────────────── */

body {
    font-family: var(--mm-sans);
    background: var(--mm-linen);
    color: var(--mm-ink);
}

/* Serif italic for the things that name people or mark a sentence */
.welcome-header h1,
.welcome-header h2,
.page-title,
.je-page-title,
.je-page-title-row h1,
.lab-title,
.meds-title,
.patient-name,
.patient-display-name,
#patientAlias,
.header-patient-name,
.patient-header h1,
.vault-tribute-name,
.now-hero-name,
.section-title,
.settings-tab-label,
.memories-section-label,
.memories-title {
    font-family: var(--mm-serif) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: -0.01em !important;
    color: var(--mm-ink) !important;
}

/* Section headings (.settings-card h2, .settings-section h2, etc.) — Inter, caps-label */
.settings-card h2,
.settings-section h2,
.section-header-row h3 {
    font-family: var(--mm-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    color: var(--mm-ink) !important;
}

/* ── 3. Cards — flat paper, hairline borders, no neumorphism ── */

.welcome-header,
.checkin-section,
.wellbeing-section,
.weekly-digest-section,
.activity-ribbon-section,
.focus-areas-section,
.appointments-section,
.recent-suggestions,
.memory-spark-card,
.chat-invite-card,
.memo-character-card,
.settings-card,
.trends-card,
.ar-card {
    background: var(--mm-cream) !important;
    border: 1px solid var(--mm-divider) !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: 16px !important;
}

/* Welcome header — special treatment (top of home) */
.welcome-header {
    background:
        linear-gradient(180deg, var(--mm-cream) 0%, var(--mm-linen) 100%) !important;
    border-color: var(--mm-divider) !important;
}

/* ── 4. Buttons & CTAs — amber where primary was lavender ─── */

.submit-button,
.action-btn.primary,
.memories-empty-cta,
.vault-doctor-btn,
.login-btn.login-btn-email,
.login-button-email {
    background: var(--mm-ink) !important;
    color: #F2ECE2 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(28,22,17,0.12) !important;
}
.submit-button:hover,
.action-btn.primary:hover,
.memories-empty-cta:hover,
.vault-doctor-btn:hover {
    background: #2A2118 !important;
    box-shadow: 0 4px 14px rgba(28,22,17,0.18) !important;
}

/* Icon "+ add" pill buttons take the amber accent */
.add-appointment-btn,
.add-memory-btn,
.meds-add-btn {
    background: var(--mm-amber-soft) !important;
    color: var(--mm-amber) !important;
    border: none !important;
    box-shadow: none !important;
}
.add-appointment-btn:hover,
.add-memory-btn:hover,
.meds-add-btn:hover {
    background: rgba(184, 134, 45, 0.18) !important;
}

/* ── 5. Sidebar (desktop)  —  match the Lab spine ─────────── */

@media (min-width: 1024px) {
    /* Only target the caregiver-app sidebar, not admin */
    .bottom-nav:not(.admin-nav) {
        background: #F2ECE2 !important;
        border: none !important;
        border-right: 1px solid var(--mm-divider-2) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        width: 240px !important;
        max-width: 240px !important;
        padding: 28px 16px 20px !important;
        gap: 4px !important;
    }
    html[data-theme="dark"] .bottom-nav:not(.admin-nav),
    body.mm-night .bottom-nav:not(.admin-nav) {
        background: #1C1611 !important;
        border-right-color: rgba(242, 236, 226, 0.08) !important;
    }

    /* Body padding stays at 240 to match */
    body:not(.login-body):not(.onboarding-body) { padding-left: 240px !important; }

    /* Nav buttons — ink on hover, amber on active */
    .bottom-nav:not(.admin-nav) .nav-btn {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 11px 14px !important;
        min-width: unset !important;
        width: 100% !important;
        border-radius: 10px !important;
        opacity: 1 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--mm-muted) !important;
        background: transparent !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }
    .bottom-nav:not(.admin-nav) .nav-btn:hover {
        background: rgba(28, 22, 17, 0.04) !important;
        color: var(--mm-ink) !important;
        transform: none !important;
    }
    html[data-theme="dark"] .bottom-nav:not(.admin-nav) .nav-btn:hover,
    body.mm-night .bottom-nav:not(.admin-nav) .nav-btn:hover {
        background: rgba(242, 236, 226, 0.05) !important;
    }
    .bottom-nav:not(.admin-nav) .nav-btn.active {
        background: var(--mm-cream) !important;
        color: var(--mm-ink) !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 3px rgba(28, 22, 17, 0.05) !important;
    }
    .bottom-nav:not(.admin-nav) .nav-btn.active .nav-icon {
        color: var(--mm-amber) !important;
    }
    .bottom-nav:not(.admin-nav) .nav-icon {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }
    .bottom-nav:not(.admin-nav) .nav-label {
        font-size: 14px !important;
        font-family: var(--mm-sans) !important;
    }

    /* Settings cog at the bottom of the sidebar (injected by memento-refresh.js) */
    .bottom-nav:not(.admin-nav) .mm-sidebar-cog-wrap {
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid var(--mm-divider);
    }
    .mm-sidebar-cog {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: none;
        border: none;
        color: var(--mm-muted);
        font-family: var(--mm-sans);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 10px;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .mm-sidebar-cog:hover {
        background: rgba(28, 22, 17, 0.04);
        color: var(--mm-ink);
    }
    html[data-theme="dark"] .mm-sidebar-cog:hover,
    body.mm-night .mm-sidebar-cog:hover { background: rgba(242, 236, 226, 0.05); }

    /* Sidebar patient-info block (injected by utils.js) gets a brand-like top */
    .bottom-nav:not(.admin-nav) .sidebar-patient-info {
        padding: 0 6px 18px !important;
        margin: 0 0 14px !important;
        border-bottom: 1px solid var(--mm-divider) !important;
        border-right: none !important;
    }
    .bottom-nav:not(.admin-nav) .sidebar-avatar {
        background: var(--mm-ink) !important;
        color: #F2ECE2 !important;
        font-family: var(--mm-serif) !important;
        font-style: italic !important;
    }
    .bottom-nav:not(.admin-nav) .sidebar-patient-name {
        font-family: var(--mm-serif) !important;
        font-style: italic !important;
        color: var(--mm-ink) !important;
    }
    .bottom-nav:not(.admin-nav) .sidebar-patient-sub {
        font-family: var(--mm-sans) !important;
        color: var(--mm-muted) !important;
        font-size: 11px !important;
        letter-spacing: 0.04em !important;
    }
}

/* Mobile bottom nav — flat paper instead of glass pill */
.bottom-nav:not(.admin-nav) {
    background: var(--mm-cream) !important;
    border: none !important;
    border-top: 1px solid var(--mm-divider) !important;
    border-radius: 0 !important;
    box-shadow: 0 -1px 0 rgba(28,22,17,0.02), 0 -8px 24px rgba(28,22,17,0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── 6. Login page — warm linen with serif hero ─────────── */

body.login-body {
    background: linear-gradient(160deg, var(--mm-linen) 0%, #F2ECE2 55%, #EFE6D6 100%) !important;
}

.login-logo h1,
.login-logo h1[data-translate="heroTagline"] {
    font-family: var(--mm-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--mm-ink) !important;
    font-size: 30px !important;
    letter-spacing: -0.02em !important;
}
.login-subtext {
    font-family: var(--mm-sans) !important;
    color: var(--mm-muted) !important;
}
.login-emotional-headline {
    font-family: var(--mm-serif) !important;
    color: var(--mm-muted) !important;
}
.login-card {
    background: var(--mm-cream) !important;
    border: 1px solid var(--mm-divider) !important;
    box-shadow: 0 2px 20px rgba(28,22,17,0.06) !important;
    backdrop-filter: none !important;
}
.orb {
    background: radial-gradient(
        circle,
        rgba(184, 134, 45, 0.10),
        rgba(184, 134, 45, 0.04),
        transparent 70%
    ) !important;
}

/* ── 7. Entries & timeline — ink-on-paper rhythm ─────────── */

.je-entry,
.timeline-entry,
.cal-entry-card,
.med-card {
    background: var(--mm-cream) !important;
    border: 1px solid var(--mm-divider) !important;
    box-shadow: 0 1px 3px rgba(28,22,17,0.04) !important;
}

/* ── 8. Amber replaces purple in chips, badges, progress ─── */

.je-flag,
.focus-badge,
.tag-chip,
.category-chip {
    background: var(--mm-amber-soft) !important;
    color: var(--mm-amber-deep) !important;
    border-color: rgba(184, 134, 45, 0.22) !important;
}

/* ── 9. Mood colours — kept (amber/sage/terracotta stay) ─── */
/* These already align with the new palette; nothing to change. */

/* ── 10. Small things — progress dots, skeletons, dividers ─ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--mm-divider),
        rgba(184, 134, 45, 0.08),
        var(--mm-divider)
    ) !important;
}

hr, .divider {
    border-color: var(--mm-divider) !important;
    background: var(--mm-divider) !important;
}

/* ── 11. Suppress the old purple avatar gradient on home ─── */

.avatar-gradient,
.header-patient-avatar.avatar-gradient {
    background:
        linear-gradient(135deg, #8B7355 0%, #5D4A3A 100%) !important;
}
.avatar-pulse {
    animation: none !important;
}

/* ── 12. Utility: warm italic section label like Lab ─────── */

.mm-section-label {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mm-muted);
}

/* ── 13. Scroll-bar hairline ─────────────────────────────── */

::-webkit-scrollbar-thumb { background: var(--mm-divider-2); }
::-webkit-scrollbar-thumb:hover { background: var(--mm-muted-light); }

/* ── 14. Focus outlines — amber, not blue ────────────────── */

*:focus-visible {
    outline: 2px solid var(--mm-amber) !important;
    outline-offset: 2px !important;
}

/* ── 15. Global theme toggle (adds to any page) ──────────── */

.mm-theme-toggle {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 90;
    display: inline-flex;
    background: rgba(28, 22, 17, 0.06);
    border-radius: 999px;
    padding: 3px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    gap: 0;
}
body.mm-night .mm-theme-toggle,
html[data-theme="dark"] .mm-theme-toggle {
    background: rgba(242, 236, 226, 0.08);
}
.mm-theme-toggle-opt {
    appearance: none;
    background: none;
    border: none;
    width: 32px;
    height: 26px;
    border-radius: 999px;
    color: var(--mm-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0;
}
.mm-theme-toggle-opt.active {
    background: var(--mm-cream);
    color: var(--mm-amber);
    box-shadow: 0 1px 3px rgba(28, 22, 17, 0.1);
}
body.mm-night .mm-theme-toggle-opt.active,
html[data-theme="dark"] .mm-theme-toggle-opt.active {
    background: #2D231A;
}

/* ═══════════════════════════════════════════════════════════
   NOW SCREEN  (home page, Milestone 2)
   Mirror of the Lab's Panel A, scaled to full-page, un-scoped.
   ═══════════════════════════════════════════════════════════ */

body.now-body {
    background: var(--mm-linen);
}
body.now-body .app-container {
    max-width: 640px;
    padding: 0 22px 120px;
    background: transparent;
    box-shadow: none;
}

.now-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 22px;
}
.now-topbar-date {
    font-family: var(--mm-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.now-topbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mm-ink);
    color: #F2ECE2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.now-topbar-avatar:hover { transform: scale(1.05); }

/* Greeting — the caregiver first */
.now-greeting {
    padding: 0 0 22px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--mm-divider);
}
.now-greeting-head {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--mm-ink);
    line-height: 1.35;
    margin: 0;
}
.now-greeting-head strong {
    font-style: normal;
    font-weight: 700;
}
.now-greeting-sub {
    font-family: var(--mm-sans);
    font-size: 13px;
    color: var(--mm-muted);
    margin: 5px 0 0;
    letter-spacing: 0.01em;
    line-height: 1.5;
}
.now-patient-status {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--mm-muted);
    margin: 12px 0 0;
}
.now-patient-status strong {
    font-style: normal;
    color: var(--mm-ink-2);
    font-weight: 700;
}

/* Blocks (generic, with hairline divider) */
.now-block {
    padding: 0 0 22px;
    border-bottom: 1px solid var(--mm-divider);
    margin-bottom: 22px;
}
.now-block:last-of-type { border-bottom: none; }

/* In the next 12 hours */
.now-next12 {
    background: var(--mm-cream);
    border: 1px solid var(--mm-divider);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.now-next12-label {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-muted);
}
.now-next12-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mm-serif);
    font-size: 15px;
    line-height: 1.4;
    color: var(--mm-ink);
}
.now-next12-time {
    font-family: var(--mm-sans);
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--mm-amber);
    letter-spacing: 0.02em;
    min-width: 72px;
    flex-shrink: 0;
}
.now-next12-item em {
    font-style: italic;
    color: var(--mm-muted);
    font-size: 12px;
}
.now-next12-empty {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--mm-muted);
}

/* Last dose / Next due rows */
.now-rows { display: flex; flex-direction: column; gap: 14px; }
.now-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.now-row-label {
    font-family: var(--mm-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--mm-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    padding-top: 2px;
}
.now-row-value {
    font-family: var(--mm-serif);
    font-size: 15px;
    line-height: 1.3;
    color: var(--mm-ink);
    text-align: right;
    margin: 0;
}

/* Today narrative */
.now-today {
    font-family: var(--mm-serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mm-ink-2);
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--mm-divider);
}
.now-today-label {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-muted);
    margin-bottom: 10px;
    display: block;
}

/* Companion whisper — the subtle AI voice */
.now-whisper {
    display: flex;
    gap: 12px;
    padding: 16px 0 20px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--mm-divider);
    align-items: flex-start;
}
.now-whisper-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.9;
}
.now-whisper-body { flex: 1; }
.now-whisper-text {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mm-ink-2);
    margin: 0;
}
.now-whisper-text strong {
    font-style: normal;
    font-weight: 600;
    color: var(--mm-ink);
}
.now-whisper-actions {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}
.now-whisper-btn {
    font-family: var(--mm-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mm-amber);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.now-whisper-btn:hover { border-color: var(--mm-amber); }
.now-whisper-btn.secondary { color: var(--mm-muted); }
.now-whisper-btn.secondary:hover { border-color: var(--mm-muted); }

.now-wellbeing-trail {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 12px 0 0;
}
.now-wellbeing-trail-label {
    font-family: var(--mm-sans);
    font-size: 10px;
    color: var(--mm-muted);
    letter-spacing: 0.04em;
    margin-right: 6px;
    cursor: pointer;
    border-bottom: 1px dashed var(--mm-divider-2);
}
.now-wellbeing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mm-divider-2);
}
.now-wellbeing-dot.good { background: var(--mm-amber); }
.now-wellbeing-dot.okay { background: #C8B29B; }
.now-wellbeing-dot.hard { background: #E28B6C; }
.now-wellbeing-dot.today { box-shadow: 0 0 0 2px var(--mm-cream); }

/* Presence rail — the care circle */
.now-presence {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 8px;
}
.now-presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: var(--mm-cream);
    border: 1px solid var(--mm-divider);
    border-radius: 999px;
    font-size: 12px;
    color: var(--mm-ink-2);
}
.now-presence-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--mm-ink);
    color: #F2ECE2;
    font-family: var(--mm-serif);
    font-size: 11px;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.now-presence-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mm-green);
    display: inline-block;
}
.now-presence-meta {
    font-family: var(--mm-sans);
    font-size: 11px;
    color: var(--mm-muted);
    letter-spacing: 0.01em;
}

/* "Just happened" FAB — the hero interaction */
.now-fab {
    position: fixed;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--mm-ink);
    color: #F2ECE2;
    border: none;
    border-radius: 999px;
    padding: 14px 26px 14px 20px;
    font-family: var(--mm-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(28,22,17,0.2), 0 1px 3px rgba(28,22,17,0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 90;
}
.now-fab:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 10px 32px rgba(28,22,17,0.26); }
.now-fab:active { transform: translateX(-50%) scale(0.97); }
.now-fab-mic {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #F2ECE2;
    color: var(--mm-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    /* Keep the FAB within the content column on desktop (sidebar takes 240 left) */
    .now-fab {
        bottom: 28px;
        left: calc(240px + (100vw - 240px) / 2);
        transform: translateX(-50%);
    }
    .now-fab:hover   { transform: translateX(-50%) translateY(-1px); }
    .now-fab:active  { transform: translateX(-50%) scale(0.97); }
}

/* Voice capture overlay (Just happened) */
.now-capture {
    position: fixed;
    inset: 0;
    background: rgba(28, 22, 17, 0.94);
    color: #F2ECE2;
    display: none;
    flex-direction: column;
    padding: 36px 28px calc(36px + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    animation: nowCaptureFade 0.22s ease both;
}
.now-capture.open { display: flex; }
@keyframes nowCaptureFade { from{opacity:0;} to{opacity:1;} }
.now-capture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
}
.now-capture-label {
    font-family: var(--mm-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}
.now-capture-close {
    background: none; border: none; color: #F2ECE2;
    font-size: 18px; cursor: pointer; opacity: 0.6;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.now-capture-close:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.now-capture-mic {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: #F2ECE2;
    color: var(--mm-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    animation: nowMicPulse 1.8s ease-in-out infinite;
}
@keyframes nowMicPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(242,236,226,0.45); }
    50%     { box-shadow: 0 0 0 20px rgba(242,236,226,0); }
}
.now-capture-status {
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
    letter-spacing: 0.02em;
    margin-bottom: 28px;
}
.now-capture-transcript {
    font-family: var(--mm-serif);
    font-size: 20px;
    line-height: 1.55;
    min-height: 140px;
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 24px;
    font-style: italic;
    opacity: 0.95;
    padding: 0 4px;
}
.now-capture-transcript .caret {
    display: inline-block;
    width: 2px; height: 1em;
    background: #F2ECE2;
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: nowCaret 1s step-end infinite;
}
@keyframes nowCaret { 50% { opacity: 0; } }
.now-capture-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}
.now-capture-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(242,236,226,0.25);
    background: transparent;
    color: #F2ECE2;
    font-family: var(--mm-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.now-capture-btn:hover { background: rgba(242,236,226,0.08); }
.now-capture-btn.primary {
    background: #F2ECE2;
    color: var(--mm-ink);
    border-color: #F2ECE2;
}
.now-capture-btn.primary:hover { background: #fff; }

/* Toast after a save */
.now-toast {
    position: fixed;
    left: 50%;
    bottom: calc(160px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: var(--mm-ink);
    color: #F2ECE2;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 120;
}
.now-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

/* ═══════════════════════════════════════════════════════════
   OUR STORY VIEW  (timeline page, Milestone 3)
   Narrative paragraphs per day, with raw entries collapsed.
   ═══════════════════════════════════════════════════════════ */

.story-view { padding: 0 16px 32px; }

.story-ask {
    background: var(--mm-cream);
    border: 1px solid var(--mm-divider);
    border-radius: 12px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    cursor: text;
    transition: border-color 0.15s ease;
}
.story-ask:hover { border-color: var(--mm-divider-2); }
.story-ask-icon { color: var(--mm-muted); line-height: 0; flex-shrink: 0; }
.story-ask-text {
    flex: 1;
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--mm-muted);
}
.story-ask-kbd {
    font-family: var(--mm-sans);
    font-size: 10px;
    color: var(--mm-muted);
    background: var(--mm-linen);
    border: 1px solid var(--mm-divider);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
}
@media (max-width: 600px) {
    .story-ask-kbd { display: none; }
}

/* Day group */
.story-day { margin-bottom: 28px; }
.story-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mm-divider);
}
.story-day-date {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--mm-ink);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.story-day-meta {
    font-family: var(--mm-sans);
    font-size: 10px;
    color: var(--mm-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Narrative paragraphs */
.story-narrative {
    font-family: var(--mm-serif);
    font-size: 16px;
    line-height: 1.75;
    color: var(--mm-ink-2);
    margin: 0 0 10px;
    padding: 2px 0;
}
.story-narrative p { margin: 0 0 10px; }
.story-narrative p:last-child { margin-bottom: 0; }
.story-narrative strong { font-weight: 700; color: var(--mm-ink); }
.story-narrative em      { font-style: italic; color: var(--mm-ink); }
.story-narrative-flag {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--mm-terracotta);
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 4px 2px;
}
.story-narrative-toggle {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--mm-sans);
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--mm-muted);
    letter-spacing: 0.04em;
    border-bottom: 1px dashed var(--mm-divider-2);
    cursor: pointer;
    user-select: none;
}
.story-narrative-toggle:hover { color: var(--mm-amber); border-color: var(--mm-amber); }

/* Raw entries (collapsed by default; shown on toggle) */
.story-raw-entries {
    display: none;
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--mm-linen);
    border-left: 2px solid var(--mm-amber);
    border-radius: 0 8px 8px 0;
}
.story-raw-entries.open { display: block; }
.story-raw-entry {
    font-family: var(--mm-sans);
    font-size: 12px;
    line-height: 1.55;
    color: var(--mm-muted);
    padding: 7px 0;
    border-bottom: 1px solid var(--mm-divider);
    margin: 0;
}
.story-raw-entry:last-child { border-bottom: none; }
.story-raw-entry-author {
    font-weight: 700;
    color: var(--mm-ink-2);
}

/* Inline photo memory inside a day */
.story-photo {
    display: block;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E8DCC7, #D4C2A3);
    border-radius: 10px;
    margin: 14px 0 8px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(28,22,17,0.08);
}
.story-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(184,134,45,0.2) 0%, transparent 50%);
    pointer-events: none;
}
.story-photo-caption {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: var(--mm-ink);
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 13px;
    background: rgba(250,246,240,0.85);
    padding: 3px 10px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

/* Empty state */
.story-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--mm-muted);
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
}

/* Tweak the view-toggle buttons on timeline.html to fit the new language */
.view-toggle-bar {
    background: var(--mm-cream);
    border: 1px solid var(--mm-divider);
    border-radius: 12px;
    padding: 3px !important;
    gap: 2px !important;
    margin: 12px 16px 20px !important;
}
.view-toggle-btn {
    border: none !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--mm-muted) !important;
    font-family: var(--mm-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 8px 4px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.view-toggle-btn:hover { background: rgba(28, 22, 17, 0.04) !important; color: var(--mm-ink) !important; }
.view-toggle-btn.active {
    background: var(--mm-linen) !important;
    color: var(--mm-amber) !important;
    box-shadow: 0 1px 2px rgba(28, 22, 17, 0.05) !important;
}

/* When Story view is active on /timeline, hide the legacy chrome — the
   day-strip, calendar dropdown, filter pills, quick-add bar and sort
   toggle — so the narrative reads clean. These still appear in List view. */
body.timeline-story .je-week-strip,
body.timeline-story .je-cal-toggle,
body.timeline-story .je-calendar,
body.timeline-story .je-filters-bar,
body.timeline-story .quick-add-strip {
    display: none !important;
}

/* Calendar view — hide the filter/sort chrome too (calendar uses its own) */
body.timeline-cal .je-filters-bar,
body.timeline-cal .quick-add-strip {
    display: none !important;
}

/* View toggle: quieter placement, centred, under the page actions */
body.timeline-story .view-toggle-bar,
body.timeline-list  .view-toggle-bar,
body.timeline-cal   .view-toggle-bar {
    max-width: 320px;
    margin: 6px auto 20px !important;
}

/* Story Ask bar — make it feel like the hero interaction */
body.timeline-story .story-ask {
    padding: 14px 18px !important;
    font-size: 15px !important;
    box-shadow: 0 1px 3px rgba(28, 22, 17, 0.04);
}

/* Page header on /timeline — airy and dignified */
body.timeline-story .je-page-header,
body.timeline-list  .je-page-header,
body.timeline-cal   .je-page-header {
    padding: 22px 16px 12px !important;
}
body.timeline-story .je-page-title,
body.timeline-list  .je-page-title,
body.timeline-cal   .je-page-title {
    font-family: var(--mm-serif) !important;
    font-style: italic !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: var(--mm-ink) !important;
    margin: 4px 0 4px !important;
}
body.timeline-story .je-page-subtitle,
body.timeline-list  .je-page-subtitle,
body.timeline-cal   .je-page-subtitle {
    font-family: var(--mm-sans) !important;
    font-size: 12px !important;
    color: var(--mm-muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Action buttons in the page header — pill-style, amber on primary */
body.timeline-story .je-action-btn,
body.timeline-list  .je-action-btn,
body.timeline-cal   .je-action-btn {
    border: 1px solid var(--mm-divider) !important;
    background: var(--mm-cream) !important;
    border-radius: 10px !important;
    color: var(--mm-ink-2) !important;
}
body.timeline-story .je-action-btn.je-action-primary,
body.timeline-list  .je-action-btn.je-action-primary,
body.timeline-cal   .je-action-btn.je-action-primary {
    background: var(--mm-amber) !important;
    color: #FFFEFB !important;
    border-color: var(--mm-amber) !important;
}

/* ═══════════════════════════════════════════════════════════
   VAULT (john.html)  —  tribute first, clinical below
   ═══════════════════════════════════════════════════════════ */

body.vault-body {
    background: var(--mm-linen);
}
body.vault-body .app-container {
    max-width: 640px;
    padding: 24px 22px 120px;
    background: transparent;
}

.vault-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 18px;
}
.vault-topbar-back {
    background: rgba(184, 134, 45, 0.10);
    border: none;
    color: var(--mm-amber);
    font-family: var(--mm-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vault-topbar-back:hover { background: rgba(184, 134, 45, 0.18); }
.vault-topbar-label {
    font-family: var(--mm-sans);
    font-size: 10px;
    color: var(--mm-muted);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-left: auto;
}

.vault-tribute {
    padding: 16px 0 28px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--mm-divider);
}
.vault-tribute-portrait {
    width: 160px;
    height: 160px;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 30%, #8D7353 0%, #5A4633 55%, #2E2118 100%);
    color: #F2ECE2;
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    box-shadow:
        inset 0 -10px 30px rgba(0,0,0,0.4),
        inset 0 0 60px rgba(0,0,0,0.15),
        0 6px 24px rgba(28,22,17,0.2);
    position: relative;
    overflow: hidden;
}
.vault-tribute-portrait::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,230,180,0.15), transparent 60%);
    pointer-events: none;
}
.vault-tribute-name {
    font-family: var(--mm-serif);
    font-size: 40px;
    font-weight: 400;
    color: var(--mm-ink);
    margin: 0 0 8px;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1;
}
.vault-tribute-meta {
    text-align: center;
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--mm-muted);
    margin: 0;
    line-height: 1.5;
}

.vault-section { margin: 28px 0; padding: 0; }
.vault-section-head {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mm-muted);
    margin: 0 0 12px;
}

.vault-bio {
    font-family: var(--mm-serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mm-ink-2);
    margin: 0;
}
.vault-bio::first-letter {
    font-size: 44px;
    font-weight: 700;
    line-height: 0.9;
    float: left;
    padding: 4px 8px 0 0;
    color: var(--mm-amber);
    font-family: var(--mm-serif);
}
.vault-bio p { margin: 0 0 10px; }
.vault-bio p:last-child { margin: 0; }

.vault-voice {
    background: var(--mm-cream);
    border: 1px solid var(--mm-divider);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.vault-voice-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mm-ink);
    color: #F2ECE2;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.vault-voice-play:hover { transform: scale(1.05); }
.vault-voice-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 30px;
}
.vault-voice-wave span {
    display: block;
    flex: 1;
    background: var(--mm-amber);
    opacity: 0.55;
    border-radius: 2px;
    min-width: 1px;
}
.vault-voice-caption {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--mm-muted);
    margin: 8px 0 0;
    text-align: right;
}

.vault-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.vault-photo-frame {
    aspect-ratio: 1;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(28, 22, 17, 0.15);
    background: linear-gradient(135deg, #C8B299, #8B6F50);
}
.vault-photo-frame:nth-child(2) { background: linear-gradient(135deg, #D4B88E, #9F7A4F); }
.vault-photo-frame:nth-child(3) { background: linear-gradient(135deg, #B8A088, #6F5A40); }
.vault-photo-frame:nth-child(4) { background: linear-gradient(135deg, #E0CAA8, #A58762); }
.vault-photo-frame::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,240,210,0.25) 0%, transparent 50%);
}
.vault-photo-caption {
    font-family: var(--mm-sans);
    font-size: 11px;
    color: var(--mm-muted);
    text-align: center;
    margin: 8px 0 0;
    letter-spacing: 0.02em;
}

.vault-journey {
    position: relative;
    padding-left: 20px;
}
.vault-journey::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--mm-divider-2);
}
.vault-journey-row {
    position: relative;
    padding: 7px 0;
    font-family: var(--mm-sans);
    font-size: 13px;
    color: var(--mm-ink-2);
}
.vault-journey-row::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mm-amber);
    box-shadow: 0 0 0 2px var(--mm-linen);
}
.vault-journey-row.current::before { background: var(--mm-green); }
.vault-journey-date { font-weight: 600; color: var(--mm-ink); }
.vault-journey-event { color: var(--mm-muted); margin-left: 6px; }

.vault-break {
    margin: 32px 0 20px;
    padding-top: 22px;
    border-top: 2px solid var(--mm-divider-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.vault-break-head {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 20px;
    color: var(--mm-ink);
    margin: 0;
    font-weight: 400;
}
.vault-break-sub {
    font-family: var(--mm-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mm-muted);
    font-weight: 600;
}

.vault-tile {
    background: var(--mm-linen);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vault-tile:hover { background: #F3EBDC; border-color: var(--mm-divider); }
.vault-tile.expanded {
    background: var(--mm-cream);
    border-color: var(--mm-divider-2);
    box-shadow: var(--shadow-soft);
}
.vault-tile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vault-tile-main {
    font-family: var(--mm-serif);
    font-size: 17px;
    color: var(--mm-ink);
    margin: 0;
}
.vault-tile-sub {
    font-family: var(--mm-sans);
    font-size: 12px;
    color: var(--mm-muted);
    margin: 3px 0 0;
    letter-spacing: 0.01em;
}
.vault-tile-chevron {
    color: var(--mm-muted);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.vault-tile.expanded .vault-tile-chevron { transform: rotate(90deg); }
.vault-tile-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, margin 0.2s ease;
}
.vault-tile.expanded .vault-tile-body {
    max-height: 2000px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mm-divider);
}

.vault-med {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--mm-divider);
    gap: 12px;
}
.vault-med:last-child { border-bottom: none; }
.vault-med-name {
    font-family: var(--mm-serif);
    font-size: 14px;
    color: var(--mm-ink);
}
.vault-med-name strong { font-weight: 700; }
.vault-med-when {
    font-family: var(--mm-sans);
    font-size: 11px;
    color: var(--mm-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    white-space: nowrap;
}

.vault-circle {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vault-circle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.vault-circle-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mm-ink);
    color: #F2ECE2;
    font-family: var(--mm-serif);
    font-size: 14px;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vault-circle-info { flex: 1; }
.vault-circle-name {
    font-family: var(--mm-serif);
    font-size: 15px;
    color: var(--mm-ink);
    margin: 0;
}
.vault-circle-role {
    font-family: var(--mm-sans);
    font-size: 11px;
    color: var(--mm-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 1px 0 0;
}

.vault-doctor-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}
.vault-doctor-btn {
    background: var(--mm-ink);
    color: #F2ECE2;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-family: var(--mm-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.vault-doctor-btn:hover { background: #2A2118; }
.vault-doctor-note {
    font-family: var(--mm-serif);
    font-size: 12px;
    color: var(--mm-muted);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   MOMENTS  (moments.html)  —  Apple-Photos-style curation
   ═══════════════════════════════════════════════════════════ */

body.moments-body { background: var(--mm-linen); }
body.moments-body .app-container {
    max-width: 700px;
    padding: 24px 22px 120px;
    background: transparent;
}

.moments-topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 0 22px;
}
.moments-topbar-title {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 28px;
    color: var(--mm-ink);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.02em;
}
.moments-topbar-meta {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-muted);
}

.moments-hero {
    margin: 0 0 28px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #C8A478, #8A5E3A, #3D2A1A);
    aspect-ratio: 16/10;
    position: relative;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.moments-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.moments-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 230, 180, 0.35), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(184, 134, 45, 0.5), transparent 50%);
}
.moments-hero-body {
    position: absolute;
    bottom: 22px;
    left: 24px;
    right: 24px;
    color: #F2ECE2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.moments-hero-eyebrow {
    font-family: var(--mm-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 6px;
}
.moments-hero-title {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 400;
}
.moments-hero-meta {
    font-family: var(--mm-sans);
    font-size: 13px;
    opacity: 0.85;
    margin: 0;
}

.moments-album-label {
    font-family: var(--mm-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mm-muted);
    margin: 10px 0 12px;
}

.moments-recent-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 32px;
}
.moments-recent-strip::-webkit-scrollbar { display: none; }
.moments-recent-thumb {
    flex-shrink: 0;
    width: 84px;
    aspect-ratio: 1;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 3px rgba(28, 22, 17, 0.1);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.moments-recent-thumb:hover { transform: translateY(-1px); }
.moments-recent-thumb:nth-child(odd)  { background: linear-gradient(135deg, #C8A478, #8A5E3A); }
.moments-recent-thumb:nth-child(even) { background: linear-gradient(135deg, #A5BF88, #6F9155); }
.moments-recent-thumb:nth-child(3n)   { background: linear-gradient(135deg, #8A7CA0, #4A3D5F); }
.moments-recent-thumb:nth-child(5n)   { background: linear-gradient(135deg, #D8A87A, #8A5A3C); }

.moments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 700px) {
    .moments-grid { grid-template-columns: repeat(3, 1fr); }
}
.moments-album {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1;
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(28, 22, 17, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.moments-album:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(28, 22, 17, 0.18); }
.moments-album::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, transparent 70%);
}
.moments-album-body {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    color: #F2ECE2;
    z-index: 1;
}
.moments-album-title {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.2;
    margin: 0 0 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-weight: 400;
}
.moments-album-count {
    font-family: var(--mm-sans);
    font-size: 11px;
    opacity: 0.85;
    margin: 0;
    letter-spacing: 0.02em;
}
.moments-album.cover-garden   { background: linear-gradient(135deg, #A5BF88, #567045); }
.moments-album.cover-family   { background: linear-gradient(135deg, #D8A87A, #8A5A3C); }
.moments-album.cover-before   { background: linear-gradient(135deg, #8A7CA0, #4A3D5F); }
.moments-album.cover-workshop { background: linear-gradient(135deg, #BFA88C, #6F5540); }
.moments-album.cover-quiet    { background: linear-gradient(135deg, #8FA0B2, #4E5E72); }
.moments-album.cover-hard     { background: linear-gradient(135deg, #A87A6C, #5E3D36); }
.moments-album.cover-music    { background: linear-gradient(135deg, #B894AE, #65476A); }
.moments-album.cover-recent   { background: linear-gradient(135deg, #E6C07A, #B8862D); }

.moments-footer-note {
    font-family: var(--mm-serif);
    font-style: italic;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mm-muted);
    margin: 26px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--mm-divider);
}
.moments-footer-note strong {
    font-style: normal;
    color: var(--mm-ink);
    font-weight: 600;
}