/* Mobile Landing Page — Redesign C (Typography-led)
   Visual language bridges landing -> focus mode.
   All rules scoped to body.mobile-home or the .mobile-home-container. */

/* Typed custom property for scroll-driven station entrance */
@property --station-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* ========================================
   0. Seasonal consciousness (季節感 — kisetsukan)
   ======================================== */

:root {
    --seasonal-tint: rgba(201, 169, 110, 0.04); /* default/fallback */
}

/* 春 (haru) — Spring: faint cherry warmth */
.season-spring { --seasonal-tint: rgba(255, 183, 197, 0.035); }
/* 夏 (natsu) — Summer: cool morning air */
.season-summer { --seasonal-tint: rgba(61, 90, 128, 0.025); }
/* 秋 (aki) — Autumn: amber late light */
.season-autumn { --seasonal-tint: rgba(201, 169, 110, 0.045); }
/* 冬 (fuyu) — Winter: blue-gray stillness */
.season-winter { --seasonal-tint: rgba(140, 150, 165, 0.03); }

/* ========================================
   0b. 和紙 (washi) — Paper texture
   ======================================== */

body.mobile-home::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* ========================================
   1. Visibility: hide desktop chrome when mobile-home is active
   ======================================== */

body.mobile-home .grid-container,
body.mobile-home .flashcard-container,
body.mobile-home .bottom-action-bar,
body.mobile-home .premium-progress-wrapper,
body.mobile-home .hero-top-bar,
body.mobile-home .ink-wash-nav,
body.mobile-home .app-branding-topleft,
body.mobile-home .channel-logo-badge,
body.mobile-home .category-badge,
body.mobile-home .lesson-badge,
body.mobile-home .screen-category-indicator,
body.mobile-home .focus-exit-button,
body.mobile-home .focus-progress,
body.mobile-home .lower-third,
body.mobile-home .video-pause-button,
body.mobile-home .japanese-flag,
body.mobile-home .shortcuts-info,
body.mobile-home .card-flow-mode-indicator,
body.mobile-home .media-status,
body.mobile-home .mf-card-status,
body.mobile-home .tf-card-status,
body.mobile-home .mf-gesture-hint,
body.mobile-home .tf-gesture-hint,
body.mobile-home .mobile-focus-bottombar { display: none !important; }

body.mobile-home.mobile-focus #card-number,
body.mobile-home.focus-mode #card-number,
body.mobile-home #card-number { display: none !important; }

body:not(.mobile-home) .mobile-home-container { display: none !important; }

/* Kill global button:hover lift (components.css translateY(-2px)) for ALL mobile landing buttons */
.mobile-home-container button:hover {
    transform: none;
    box-shadow: none;
}

body.mobile-home #app { visibility: hidden; height: 0; overflow: hidden; }
body.mobile-home { overflow: hidden; padding: 0; color-scheme: light; }

/* ========================================
   2. Container — warm stone ground
   ======================================== */

.mobile-home-container {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, var(--seasonal-tint) 0%, transparent 70%),
        var(--color-paper);
    padding: 0 20px env(safe-area-inset-bottom, 0);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   3. Header — logo left, sign-in right
   Matches demo-landing-C.html exactly
   ======================================== */

.mh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 4px;
}

.mh-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    opacity: 0.9;
}

.mh-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mh-brand-name {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-stone);
    letter-spacing: 0.05em;
}

/* Sign-in — border pill, matched to filter button height */
.mh-sign-in {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-faint);
    border: 1px solid rgba(44,44,44,0.08);
    border-radius: var(--radius-xl);
    padding: 6px 12px;
    box-sizing: border-box;
    background: rgba(250, 250, 247, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) ease;
}

.mh-sign-in:active {
    background: rgba(44, 44, 44, 0.04);
}

.mh-sign-in svg {
    flex-shrink: 0;
}

/* --- Mobile avatar (signed-in state) --- */

.mh-avatar {
    margin-left: auto;
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 280ms var(--ease-out);
}

.mh-avatar:active { opacity: 0.85; }

.mh-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: #EDE8E0;
    border: 1.5px solid rgba(201, 169, 110, 0.25);
    color: #8C7A5E;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

.mh-avatar-sync-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-paper);
    pointer-events: none;
    transition: background 0.3s ease;
}

.mh-avatar-sync-dot.synced { background: rgba(163, 177, 138, 0.9); }
.mh-avatar-sync-dot.syncing,
.mh-avatar-sync-dot.connecting { background: var(--color-gold); animation: syncPulse 1.2s ease-in-out infinite; }
.mh-avatar-sync-dot.error { background: var(--color-coral); }
.mh-avatar-sync-dot.none { display: none; }
.mh-avatar-sync-dot.just-synced {
    animation: syncCompletePulse 600ms ease-out;
}
@keyframes syncCompletePulse {
    0% { box-shadow: 0 0 0 0 rgba(163, 177, 138, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(163, 177, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(163, 177, 138, 0); }
}

/* Sync crossfade — progress line and hero settle after sync brings changes */
.mh-progress-context.sync-refresh {
    animation: syncContentSettle 400ms ease-out;
}
.mh-hero-card.sync-refresh {
    animation: syncContentSettle 400ms ease-out;
}
@keyframes syncContentSettle {
    0% { opacity: 0.4; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ========================================
   4. Greeting — SEPARATE block below header
   Generous padding, typography-led hero
   ======================================== */

.mh-greeting {
    padding: 48px 0 24px;
}

.mh-greeting-en {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.mh-greeting-jp-line {
    margin-top: 6px;
}

.mh-greeting-jp {
    font-family: var(--font-jp);
    font-size: 15px;
    color: var(--color-faint);
    letter-spacing: 0.03em;
}

.mh-greeting-romaji {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    letter-spacing: 0.04em;
}

.mh-greeting-date {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    margin-top: 4px;
}

/* ========================================
   5. Search button — icon-only, in header
   ======================================== */

.mh-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-faint);
    border: 1px solid rgba(44,44,44,0.08);
    border-radius: var(--radius-full);
    padding: 0;
    background: rgba(250, 250, 247, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) ease;
}

.mh-search-btn:active {
    background: rgba(44, 44, 44, 0.04);
}

.mh-search-btn svg {
    flex-shrink: 0;
}

/* ========================================
   5b. Filter button — in header
   ======================================== */

.mh-filter-btn {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-faint);
    border: 1px solid rgba(44,44,44,0.08);
    border-radius: var(--radius-xl);
    padding: 6px 14px;
    background: rgba(250, 250, 247, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) ease;
}

.mh-filter-btn:active {
    background: rgba(44, 44, 44, 0.04);
}

.mh-filter-btn.mh-filter-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Active filter pills — horizontally scrollable row */
.mh-pills-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 0 16px;
    margin-top: -4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
    /* Fade hint on right edge when scrollable */
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}
.mh-pills-row::-webkit-scrollbar { display: none; }    /* Chrome/Safari */

/* Remove right fade when scrolled to end or not overflowing */
.mh-pills-row.mh-pills-scrolled-end {
    mask-image: none;
    -webkit-mask-image: none;
}

/* Fade both edges when scrolled past start */
.mh-pills-row.mh-pills-scrolled-start {
    mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

/* Only left fade when scrolled to end but started scrolling */
.mh-pills-row.mh-pills-scrolled-start.mh-pills-scrolled-end {
    mask-image: linear-gradient(to right, transparent 0%, #000 32px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32px);
}

.mh-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: rgba(240, 237, 232, 0.5);
    border: 1px solid rgba(44,44,44,0.06);
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-faint);
    cursor: default;
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, opacity 200ms ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Text zone — tap to toggle include/exclude */
.mh-pill-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 8px 12px;
    min-height: 36px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mh-pill-text:active { opacity: 0.6; }

/* Remove button zone */
.mh-filter-pill .mh-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px 8px 4px;
    min-height: 36px;
    min-width: 32px;
    border: none;
    background: none;
    font-size: 13px;
    color: inherit;
    opacity: 0.5;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mh-filter-pill .mh-pill-remove:active { opacity: 0.3; }

/* Color-coded pills by filter type — matches desktop palette */
.mh-filter-pill.mh-pill-category {
    background: rgba(201,169,110,0.10);
    color: var(--color-pill-category);
    border-color: rgba(201,169,110,0.15);
}
.mh-filter-pill.mh-pill-category .mh-pill-remove { color: var(--color-pill-category); }

.mh-filter-pill.mh-pill-tb-ippo {
    background: rgba(180,120,80,0.10);
    color: var(--color-pill-ippo);
    border-color: rgba(180,120,80,0.15);
}
.mh-filter-pill.mh-pill-tb-ippo .mh-pill-remove { color: var(--color-pill-ippo); }

.mh-filter-pill.mh-pill-tb-genki1 {
    background: rgba(61,90,128,0.10);
    color: var(--color-accent);
    border-color: rgba(61,90,128,0.15);
}
.mh-filter-pill.mh-pill-tb-genki1 .mh-pill-remove { color: var(--color-accent); }

.mh-filter-pill.mh-pill-tb-genki2 {
    background: rgba(100,140,100,0.10);
    color: var(--color-pill-genki2);
    border-color: rgba(100,140,100,0.15);
}
.mh-filter-pill.mh-pill-tb-genki2 .mh-pill-remove { color: var(--color-pill-genki2); }

.mh-filter-pill.mh-pill-textbook {
    background: rgba(201,169,110,0.12);
    color: var(--color-pill-category);
    border-color: rgba(201,169,110,0.15);
}
.mh-filter-pill.mh-pill-textbook .mh-pill-remove { color: var(--color-pill-category); }

.mh-filter-pill.mh-pill-pos {
    background: rgba(140,133,120,0.10);
    color: var(--color-pill-supp);
    border-color: rgba(140,133,120,0.15);
}
.mh-filter-pill.mh-pill-pos .mh-pill-remove { color: var(--color-pill-supp); }

/* --- Excluded pill state (after type colors so it overrides background) --- */
.mh-filter-pill.mh-pill-excluded {
    background: transparent;
    border: 1px solid rgba(44,44,44,0.12);
    opacity: 0.72;
}
/* Per-type border tints for excluded pills (3-class specificity beats type rules) */
.mh-filter-pill.mh-pill-excluded.mh-pill-category {
    border-color: rgba(201,169,110,0.25);
}
.mh-filter-pill.mh-pill-excluded.mh-pill-tb-ippo {
    border-color: rgba(180,120,80,0.25);
}
.mh-filter-pill.mh-pill-excluded.mh-pill-tb-genki1 {
    border-color: rgba(61,90,128,0.25);
}
.mh-filter-pill.mh-pill-excluded.mh-pill-tb-genki2 {
    border-color: rgba(100,140,100,0.25);
}
.mh-filter-pill.mh-pill-excluded.mh-pill-textbook {
    border-color: rgba(201,169,110,0.25);
}
.mh-filter-pill.mh-pill-excluded.mh-pill-pos {
    border-color: rgba(140,133,120,0.25);
}

/* Batsu icon */
.mh-pill-exclude-icon {
    display: block;
    flex-shrink: 0;
    color: #c45c3e;
    width: 12px;
    height: 12px;
}

/* ========================================
   6. Action cards — Concept C styling
   ======================================== */

.mh-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.mh-action-card {
    display: block;
    text-align: left;
    width: 100%;
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 20px;
    border: none;
    border-left: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(44,44,44,0.03);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) ease;
}

.mh-action-card:active {
    background: #F5F2ED;
}

/* Accent left borders */
.mh-learn-card { border-left-color: var(--color-faint); }
.mh-review-card { border-left-color: var(--color-gold); }

.mh-card-body {
    display: flex;
    flex-direction: column;
}

.mh-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.mh-card-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-ink);
}

.mh-card-badge {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius);
    line-height: 1.4;
}
.mh-card-badge:empty {
    display: none;
}

.mh-learn-card .mh-card-badge {
    background: rgba(140,133,120,0.1);
    color: #948E85;
}

.mh-review-card .mh-card-badge {
    background: rgba(201,169,110,0.12);
    color: #7A6530;
}


.mh-card-subtitle {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-faint);
    margin-bottom: 14px;
}

.mh-card-guide {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-faint);
    line-height: 1.55;
}

.mh-card-guide strong {
    font-weight: 500;
    color: #4A4744;
}

/* Browse hero preview — rotating word card inside Browse */
.mh-browse-hero {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 10px 0 0;
    background-size: cover;
    background-position: center;
    /* background-image is not animatable; crossfade handled by JS opacity */
}

.mh-browse-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0;
}

.mh-browse-hero-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mh-browse-stamps {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.mh-browse-stamp {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-jp);
    font-size: 15px;
}

.mh-browse-stamp:first-child {
    border: 1.5px solid rgba(160, 120, 80, 0.35);
    color: rgba(160, 120, 80, 0.45);
}

.mh-browse-stamp:last-child {
    border: 1.5px solid rgba(107, 127, 92, 0.35);
    color: rgba(107, 127, 92, 0.45);
}

.mh-browse-hero-jp {
    font-family: var(--font-jp);
    font-size: 22px;
    color: var(--color-ink);
    transition: opacity 0.35s ease;
}

.mh-browse-hero-en {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-faint);
    transition: opacity 0.35s ease;
}

/* Mark key — Known/Learning inline legend */
.mh-mark-key {
    display: inline;
    font-size: 12px;
    color: #948E85;
}

/* Connector between Browse and Review */
.mh-connector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
}

.mh-connector-line {
    flex: 1;
    height: 1px;
    background: rgba(44,44,44,0.06);
}

.mh-connector-text {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    white-space: nowrap;
}

.mh-connector.mh-hidden { display: none; }

/* Learned count — quiet progress */
.mh-learned-count {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    text-align: center;
    padding: 12px 0 0;
}

.mh-learned-count.mh-hidden { display: none; }

/* Disabled state */
.mh-action-card.mh-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Hidden */
.mh-action-card.mh-hidden { display: none; }

/* All-seen / zero-match empty state */
.mh-all-seen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px 16px;
    gap: 6px;
}
.mh-all-seen .mh-empty-headline {
    font-family: var(--font-jp);
    font-size: 20px;
    color: var(--color-ink);
    letter-spacing: 0.02em;
}
.mh-all-seen .mh-empty-subtitle {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-faint);
    line-height: 1.5;
}

.mh-all-seen.mh-hidden { display: none; }

/* ========================================
   7. Settings — no card wrapper, plain text
   Matches demo-settings-A.html exactly
   ======================================== */

.mh-below-fold {
    padding: 20px 0 0;
    margin-top: 20px;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(44,44,44,0.04);
}

/* Settings toggle row — plain text, no card background */
/* 22px left padding aligns with card text (2px border + 20px card padding) */
.mh-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    margin-top: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    width: 100%;
}

.mh-settings-toggle-label {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-faint);
    letter-spacing: 0.01em;
}

.mh-settings-toggle-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-faint);
    opacity: 0.6;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mh-settings-toggle.is-open .mh-settings-toggle-chevron {
    transform: rotate(90deg);
}

/* Settings body — expand/collapse */
.mh-settings-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration) ease;
}

.mh-settings-body.is-open {
    max-height: 500px;
}

.mh-settings-inner {
    padding: 4px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section labels — sentence case, not uppercase */
.mh-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mh-settings-section-label {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-faint);
}

/* Options row — plain text with pipe dividers */
.mh-settings-options {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.mh-settings-option {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    color: #948E85;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: none;
    transform: none !important;
    white-space: nowrap;
}

.mh-settings-option:hover {
    color: var(--color-faint);
}

.mh-settings-option:active {
    transform: none !important;
    background: none !important;
}

.mh-settings-option.is-active {
    font-weight: 600;
    color: var(--color-ink);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.mh-settings-jp {
    font-family: var(--font-jp);
}

.mh-settings-divider {
    color: #D4CFC8;
    font-size: 13px;
    font-weight: 300;
    user-select: none;
    pointer-events: none;
}

/* Reset progress — plain text link */
.mh-reset {
    align-self: flex-start;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    cursor: pointer;
    padding: 0;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--duration-fast) ease;
}

.mh-reset:hover {
    color: var(--color-faint);
}

/* Reset confirm */
.mh-reset-confirm {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
}

.mh-reset-confirm.active { display: flex; }

.mh-reset-confirm > span {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-faint);
}

.mh-reset-confirm-actions {
    display: flex;
    gap: 8px;
}

.mh-reset-confirm button {
    padding: 2px 0;
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
}

.mh-reset-confirm button:active {
    transform: none;
}

.mh-reset-yes {
    background: none;
    color: var(--color-ink);
}

.mh-reset-no {
    background: none;
    color: #948E85;
}

/* ========================================
   8. Filter bottom sheet — 3-level drill-down
   ======================================== */

.mh-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 40, 36, 0.14);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mh-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Filter sheet inherits the blanket mobile button reset above */

.mh-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 75vh;
    background: rgba(244, 241, 235, 0.97);
    backdrop-filter: blur(24px) saturate(110%);
    -webkit-backdrop-filter: blur(24px) saturate(110%);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(212, 207, 200, 0.4);
    box-shadow: 0 -2px 20px rgba(44, 40, 36, 0.05);
    z-index: 3001;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mh-filter-sheet.active {
    transform: translateY(0);
}

.mh-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 14px 0 8px;
    flex-shrink: 0;
    cursor: grab;
}

.mh-sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: rgba(140, 133, 120, 0.16);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.mh-sheet-handle:active .mh-sheet-handle-bar {
    background: rgba(140, 133, 120, 0.26);
}

.mh-sheet-header {
    display: flex;
    align-items: center;
    padding: 4px 20px 16px;
    flex-shrink: 0;
}

.mh-sheet-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-sheet-back {
    display: none;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 22px;
    color: #948E85;
    cursor: pointer;
    border-radius: var(--radius-full);
    padding: 0;
    margin-left: -10px;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.mh-sheet-back.visible {
    display: flex;
}

.mh-sheet-back:active {
    background: rgba(201, 169, 110, 0.08);
    color: var(--color-faint);
}

.mh-sheet-title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0.03em;
}

.mh-sheet-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 20px 14px;
    flex-shrink: 0;
}

.mh-sheet-active-filters:empty {
    display: none;
}

.mh-sheet-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-xl);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    min-height: 32px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--duration-fast) ease, background var(--duration-fast) ease;
}

.mh-sheet-active-pill:active {
    opacity: 0.7;
}

.mh-sheet-active-pill[data-dim="textbook"],
.mh-sheet-active-pill[data-dim="lessons"] {
    background: rgba(61, 90, 128, 0.06);
    border: 1px solid rgba(61, 90, 128, 0.12);
    color: #4A6D94;
}

.mh-sheet-active-pill[data-dim="category"] {
    background: rgba(201, 169, 110, 0.07);
    border: 1px solid rgba(201, 169, 110, 0.16);
    color: #8C7A5E;
}

.mh-sheet-active-pill[data-dim="pos"] {
    background: rgba(107, 127, 92, 0.06);
    border: 1px solid rgba(107, 127, 92, 0.12);
    color: #5A6E4E;
}

.mh-sheet-active-pill .mh-sap-x {
    font-size: 12px;
    line-height: 1;
    opacity: 0.4;
}

.mh-sheet-body {
    padding: 0 20px 36px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    transition: opacity 0.2s ease;
}

.mh-sheet-body.transitioning {
    opacity: 0;
}

/* Browse menu rows */
.mh-browse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10px 16px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
    position: relative;
    border-radius: var(--radius);
}

.mh-browse-row:active {
    background-color: rgba(201, 169, 110, 0.05);
}

.mh-browse-row + .mh-browse-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.08) 0%, transparent 70%);
}

.mh-browse-row-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mh-browse-row-label {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: 0.01em;
}

.mh-browse-row-sub {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    letter-spacing: 0.01em;
}

.mh-browse-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mh-browse-row-count {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 500;
    color: #8C7A5E;
    background: rgba(201, 169, 110, 0.10);
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mh-browse-row-chevron {
    width: 14px;
    height: 14px;
    color: #B8B2A8;
    flex-shrink: 0;
    transition: color var(--duration-fast) ease;
}

.mh-browse-row:active .mh-browse-row-chevron {
    color: #948E85;
}

/* Toggle rows */
.mh-toggle-row {
    display: flex;
    align-items: center;
    padding: 14px 10px 14px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

.mh-toggle-row:active {
    background-color: rgba(201, 169, 110, 0.05);
}

.mh-toggle-row + .mh-toggle-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.08) 0%, transparent 75%);
}

.mh-toggle-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 1.5px;
    background: var(--color-gold);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mh-toggle-row.selected::before {
    opacity: 1;
}

.mh-toggle-row.selected {
    background: rgba(201, 169, 110, 0.07);
}

.mh-toggle-row-label {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-ink);
    flex: 1;
}

.mh-toggle-row.selected .mh-toggle-row-label {
    color: var(--color-ink);
}

.mh-toggle-row.select-all {
    background: rgba(201, 169, 110, 0.04);
    margin-bottom: 2px;
}

.mh-toggle-row.select-all .mh-toggle-row-label {
    font-weight: 400;
    color: var(--color-ink);
}

.mh-toggle-row.select-all.selected .mh-toggle-row-label {
    color: var(--color-ink);
}

.mh-toggle-row.select-all + .mh-separator + .mh-toggle-row::after,
.mh-toggle-row.select-all + .mh-toggle-row::after {
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.14) 0%, transparent 70%);
}

.mh-toggle-row-count {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    margin-left: 8px;
}

/* ── Frequency tier rows — colored tier dot, label, count ──
   Mirrors the desktop browse-sidebar shape (see css/browse-sidebar.css)
   so the visual key reads the same on both surfaces. */
.mh-toggle-row--freq .mh-tier-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 12px;
    background: var(--color-stone, #8C8578);
}

.mh-toggle-row--freq .mh-tier-dot[data-freq-tier="1"] { background: #3a6438; }
.mh-toggle-row--freq .mh-tier-dot[data-freq-tier="2"] { background: #5A7494; }
.mh-toggle-row--freq .mh-tier-dot[data-freq-tier="3"] { background: #A88542; }
.mh-toggle-row--freq .mh-tier-dot[data-freq-tier="4"] {
    background: var(--color-faint, #8C8578);
    opacity: 0.85;
}

/* Drill-down rows */
.mh-drill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px 15px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

.mh-drill-row:active {
    background-color: rgba(201, 169, 110, 0.05);
}

.mh-drill-row + .mh-drill-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.08) 0%, transparent 75%);
}

.mh-drill-row-label {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-ink);
    flex: 1;
}

.mh-drill-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-drill-row-count {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
}

.mh-drill-row-chevron {
    width: 14px;
    height: 14px;
    color: #B8B2A8;
    flex-shrink: 0;
    transition: color var(--duration-fast) ease;
}

.mh-drill-row:active .mh-drill-row-chevron {
    color: #948E85;
}

.mh-separator {
    height: 1px;
    margin: 6px 0;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.10) 0%, transparent 70%);
}

/* ========================================
   9. Transitions — 敷居 (shikii) threshold crossing
   ======================================== */

.mobile-home-container.exiting {
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.mobile-home-container.entering {
    animation: mhEntrance 400ms ease-out both;
    overflow-y: hidden; /* prevent transient scrollbar during entrance animation */
}

@keyframes mhEntrance {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   TOAST (transient feedback)
   ======================================== */
.mh-toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 10px 20px;
    background: rgba(44, 44, 44, 0.88);
    color: var(--color-paper);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius);
    opacity: 0;
    transition: opacity var(--duration) ease, transform var(--duration) ease;
    pointer-events: none;
    z-index: 4000;
    white-space: nowrap;
}
.mh-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========================================
   12a. Reduced motion — accessibility
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .mobile-home-container.exiting,
    .mobile-home-container.entering {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .mh-header, .mh-greeting-compact, .mh-progress-context, .mh-pills-row,
    .mh-hero-card, .mh-cta-review, .mh-learned-link, .mh-cta-quiz, .mh-below-fold {
        animation: none !important;
    }
    .sc-back, .sc-container, .sc-stats-inline, .sc-actions {
        animation: none !important;
    }
}

/* ========================================
   12b. Staggered entrance — elements arrive from below
   ======================================== */

@keyframes mhStaggerIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mhShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.mobile-home-container.entering .mh-header              { animation: mhStaggerIn 280ms ease-out both; animation-delay: 0ms; }
.mobile-home-container.entering .mh-date-header         { animation: mhStaggerIn 280ms ease-out both; animation-delay: 60ms; }
.mobile-home-container.entering .mh-greeting-compact    { animation: mhStaggerIn 280ms ease-out both; animation-delay: 100ms; }
.mobile-home-container.entering .mh-progress-bar-wrap   { animation: mhStaggerIn 280ms ease-out both; animation-delay: 140ms; }
.mobile-home-container.entering .mh-pills-row           { animation: mhStaggerIn 280ms ease-out both; animation-delay: 170ms; }
.mobile-home-container.entering .mh-section-divider     { animation: mhStaggerIn 280ms ease-out both; animation-delay: 200ms; }
.mobile-home-container.entering .mh-hero-card           { animation: mhStaggerIn 280ms ease-out both; animation-delay: 240ms; }
.mobile-home-container.entering .mh-review-section      { animation: mhStaggerIn 280ms ease-out both; animation-delay: 320ms; }
.mobile-home-container.entering .mh-learned-link        { animation: mhStaggerIn 280ms ease-out both; animation-delay: 380ms; }
.mobile-home-container.entering .mh-below-fold          { animation: mhStaggerIn 280ms ease-out both; animation-delay: 420ms; }

/* Onboarding Station 0 — staggered entrance */
.mh-demo-s0 > * { opacity: 0; }
.mh-demo-s0 .mh-demo-logo       { animation: mhStaggerIn 300ms ease-out both; animation-delay: 100ms; }
.mh-demo-s0 .mh-demo-brand      { animation: mhStaggerIn 300ms ease-out both; animation-delay: 250ms; }
.mh-demo-s0 .mh-demo-tagline    { animation: mhStaggerIn 300ms ease-out both; animation-delay: 350ms; }
.mh-demo-s0 .mh-demo-tagline-jp { animation: mhStaggerIn 300ms ease-out both; animation-delay: 400ms; }
.mh-demo-s0 .mh-demo-path-wrap  { animation: mhStaggerIn 300ms ease-out both; animation-delay: 550ms; }
.mh-demo-s0 .mh-demo-dots       { animation: mhStaggerIn 300ms ease-out both; animation-delay: 650ms; }
.mh-demo-s0 .mh-demo-tap-hint   { /* controlled by JS visibility class, skip stagger */ }
.mh-demo-s0 .mh-demo-proceed    { animation: mhStaggerIn 300ms ease-out both; animation-delay: 750ms; }

/* ========================================
   12c. Returning-user landing — redesigned layout
   ======================================== */

/* --- Header right group --- */
.mh-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Compact greeting --- */
.mh-greeting-compact {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 0 6px;
}

/* --- Progress context line --- */
.mh-progress-context {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    padding: 0 0 24px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* --- Hero card — window into the new words deck --- */
.mh-hero-card {
    border-radius: var(--radius-lg);
    background: var(--color-card);
    border: none;
    box-shadow: 0 1px 3px rgba(44,44,44,0.04), 0 0 0 1px rgba(229,226,221,0.35);
    overflow: hidden;
    margin-bottom: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.2s ease, transform var(--duration-fast) ease;
}
.mh-hero-card:active {
    box-shadow: 0 2px 8px rgba(44,44,44,0.07), 0 0 0 1px rgba(229,226,221,0.35);
    transform: scale(0.985);
}
.mh-hero-card.mh-hidden { display: none; }

/* Seed card — synthesized hero tile for the new-user onboarding→learn transition.
   Centered in the viewport so the FLIP animation has a natural origin point. */
.mh-hero-card.mh-seed-card {
    max-width: 280px;
    margin: calc(40vh - 80px) auto 0;
    animation: mhSeedAppear 200ms ease-out both;
}
@keyframes mhSeedAppear {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mh-hero-label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    color: #948E85;
    padding: 14px 16px 8px;
    letter-spacing: 0.02em;
}

.mh-hero-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--color-paper-shimmer-lo);
    background-size: cover;
    background-position: center;
}

.mh-hero-img:not([style*="background-image"]) {
    background: linear-gradient(90deg, var(--color-paper-shimmer-lo) 25%, var(--color-paper-shimmer-hi) 50%, var(--color-paper-shimmer-lo) 75%);
    background-size: 200% 100%;
    animation: mhShimmer 1.8s ease-in-out infinite;
}

.mh-hero-footer {
    padding: 16px 16px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mh-hero-jp {
    font-family: var(--font-jp);
    font-size: 22px;
    color: var(--color-ink);
    line-height: 1.2;
}

.mh-hero-en {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-faint);
    font-weight: 400;
}

/* --- CTA: "Learn new words" inside hero card --- */
.mh-hero-cta-wrap {
    padding: 4px 16px 18px;
}

.mh-cta-new {
    display: block;
    width: 100%;
    background: #3D3B39;
    color: #F5F3EF;
    border: none;
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
    text-align: center;
    letter-spacing: 0.005em;
}
.mh-cta-new:active {
    opacity: 0.92;
    transform: scale(0.985);
}
.mh-cta-new.mh-hidden { display: none; }

/* --- CTA: "Continue review" standalone button (kintsugi gold) --- */
.mh-cta-review {
    display: block;
    width: calc(100% - 32px);
    margin: 0 auto 16px;
    background: var(--color-gold);
    color: #3A2A12;
    border: none;
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
    text-align: center;
    letter-spacing: 0.005em;
}
.mh-cta-review:active {
    opacity: 0.9;
    transform: scale(0.985);
}
.mh-cta-review.mh-hidden { display: none; }

/* --- Learned words link (quiet archive navigation, not an action CTA) --- */
.mh-learned-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    padding: 12px 0;
    margin: 4px auto 0;
    width: auto;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    color: #948E85;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    transition: color var(--duration-fast) ease;
    letter-spacing: 0.01em;
}
.mh-learned-link:active {
    color: var(--color-faint);
}

.mh-learned-link .mh-learned-chevron {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform var(--duration-fast) ease;
}

.mh-learned-link:active .mh-learned-chevron {
    transform: translateX(2px);
}
.mh-learned-link.mh-hidden { display: none; }

/* --- Quiz CTA — ghost button, indigo accent --- */
.mh-cta-quiz {
    display: block;
    width: calc(100% - 32px);
    margin: 4px auto 16px;
    background: transparent;
    color: var(--color-accent);
    border: 1px solid rgba(61, 90, 128, 0.2);
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
    text-align: center;
}
.mh-cta-quiz:active {
    opacity: 0.85;
    transform: scale(0.985);
}
.mh-cta-quiz.mh-hidden { display: none; }

/* ========================================
   12d. Redesigned landing — date, progress bar, divider, review section
   ======================================== */

/* --- Date header (bilingual, Japanese first) --- */
.mh-date-header {
    padding: 24px 0 4px;
}

.mh-date-jp {
    font-family: var(--font-jp);
    font-size: 15px;
    color: var(--color-faint);
    line-height: 1.5;
    letter-spacing: 0.06em;
}

.mh-date-en {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    letter-spacing: 0.04em;
    line-height: 1.4;
    margin-top: 1px;
}

/* --- Progress bar (colored segments + legend) --- */
.mh-progress-bar-wrap {
    padding-bottom: 16px;
}

.mh-progress-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(44,44,44,0.04);
    display: flex;
    overflow: hidden;
}

.mh-progress-segment {
    height: 100%;
    transition: width 0.4s ease-out;
}

.mh-progress-segment.learned {
    background: var(--color-green, #6B7F5C);
    border-radius: 2px 0 0 2px;
}

.mh-progress-segment.review {
    background: var(--color-gold);
}

.mh-progress-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.mh-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    line-height: 1;
}

.mh-legend-item strong {
    font-weight: 600;
    color: var(--color-faint);
}

.mh-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mh-legend-dot.green { background: var(--color-green, #6B7F5C); }
.mh-legend-dot.gold { background: var(--color-gold); }
.mh-legend-dot.hollow {
    background: transparent;
    border: 1.2px solid #948E85;
}

/* --- + Filter pill (always visible in pills row) --- */
.mh-filter-add-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid rgba(44,44,44,0.08);
    border-radius: var(--radius-lg);
    padding: 8px 14px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    color: #948E85;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) ease;
}

.mh-filter-add-pill:active {
    background: rgba(44,44,44,0.03);
}

/* --- Section divider ("Today's plan") --- */
.mh-section-divider {
    display: flex;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 20px;
}

.mh-section-divider::before,
.mh-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(44,44,44,0.06);
}

.mh-section-divider-text {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #948E85;
    padding: 0 14px;
    line-height: 1;
    white-space: nowrap;
}

/* --- Hero card remaining text --- */
.mh-hero-remaining {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    text-align: center;
    margin-top: 8px;
    line-height: 1;
}

/* --- Hero image gradient fade --- */
.mh-hero-img {
    position: relative;
}

.mh-hero-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent 0%, rgba(250,250,247,0.3) 60%, rgba(250,250,247,0.8) 100%);
    pointer-events: none;
}

/* --- Review section --- */
.mh-review-section {
    margin-top: 24px;
    margin-bottom: 16px;
}

.mh-review-label {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-faint);
    margin-bottom: 12px;
    line-height: 1;
}

.mh-review-row {
    display: flex;
    align-items: center;
    background: var(--color-card);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(44,44,44,0.03);
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.mh-review-row:active {
    transform: scale(0.985);
    opacity: 0.85;
}

.mh-review-row + .mh-review-row {
    margin-top: 8px;
}

.mh-review-row.mh-hidden { display: none; }

/* Exercises row lives outside review section — needs its own spacing */
#mhExercisesRow { margin-top: 20px; }

.mh-review-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.mh-review-accent.gold { background: var(--color-gold); }
.mh-review-accent.indigo { background: var(--color-accent); }

.mh-review-content {
    flex: 1;
    min-width: 0;
    padding-left: 6px;
}

.mh-review-title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.3;
}

.mh-review-subtitle {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    line-height: 1.4;
    margin-top: 2px;
}

.mh-review-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 12px;
}

.mh-review-count {
    font-family: var(--font-ui);
    font-size: 14px;
    color: #948E85;
    line-height: 1;
}

.mh-review-chevron {
    color: #948E85;
    opacity: 0.6;
}

/* --- Sync refresh for progress bar --- */
.mh-progress-bar-wrap.sync-refresh {
    animation: syncContentSettle 400ms ease-out;
}

/* ========================================
   13. (removed) Session Complete Overlay —
   replaced by learn-mode end overlay in css/learn-mode.css (.lme-*)
   ======================================== */


/* Screen-reader-only text (VoiceOver/TalkBack aria-live regions) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   14. Emaki Demo (mh-demo-*) — Onboarding scroll story
   ======================================== */

/* Station — full-screen container */
.mh-demo-station {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* Setup screen (shown after focus mode deep dive) */
.mh-demo-setup {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    box-sizing: border-box;
}

/* Station inner -- centers content with max width */
.mh-demo-s-inner {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Entrance — immediate visibility (no scroll observer in v3) */
.mh-demo-station .mh-demo-s-inner {
    opacity: 1;
}

/* Annotation text */
.mh-demo-annotation {
    font-family: var(--font-ui);
    font-size: 14px;
    color: #948E85;
    text-align: center;
    margin-top: 24px;
    line-height: 1.5;
    text-wrap: balance;
}

/* ---- Station 0: Threshold (門) ---- */

.mh-demo-s0 {
    padding-top: 4px;
}

.mh-demo-logo {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    opacity: 0.95;
    margin-bottom: 12px;
}

.mh-demo-brand {
    font-family: var(--font-jp);
    font-size: 28px;
    color: var(--color-ink);
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 14px;
}

.mh-demo-tagline {
    font-family: var(--font-ui);
    font-size: 15px;
    color: #948E85;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.mh-demo-tagline-jp {
    font-family: var(--font-jp);
    font-size: 12px;
    color: #B0903E;
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: 0.08em;
}

/* Flippable path cards (Station 0 browse strip) */
.mh-demo-path-flippable {
    perspective: 600px;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
}

.mh-demo-path-flipper {
    position: relative;
    width: 100%;
    transition: transform var(--duration-slow) var(--ease-out);
    transform-style: preserve-3d;
}

.mh-demo-path-flipped .mh-demo-path-flipper {
    transform: rotateY(180deg);
}

.mh-demo-path-front,
.mh-demo-path-back {
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-card);
    border: 1px solid rgba(229, 226, 221, 0.5);
}

.mh-demo-path-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    box-sizing: border-box;
}

.mh-demo-path-back .mh-demo-path-kanji {
    font-family: var(--font-jp);
    font-size: 36px;
    color: var(--color-ink);
}

.mh-demo-path-back .mh-demo-path-kana2 {
    font-family: var(--font-jp);
    font-size: 16px;
    color: #B0903E;
}

.mh-demo-path-back .mh-demo-path-roma2 {
    font-family: var(--font-ui);
    font-size: 14px;
    color: #948E85;
}

.mh-demo-scope {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
    text-wrap: balance;
}

/* Carousel dot indicator */
.mh-demo-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.mh-demo-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(140, 133, 120, 0.25);
    transition: background 0.3s ease;
}
.mh-demo-dot.active {
    background: var(--color-gold);
}

/* "tap to open" hint — appears after auto-flip */
.mh-demo-tap-hint {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: #948E85;
    text-align: center;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.mh-demo-tap-hint.mh-tap-hint-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade overlay — covers the station without mutating its opacity.
   Avoids iOS Safari compositing layer caching with -webkit-overflow-scrolling. */
.mh-fade-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: var(--color-paper);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}
.mh-fade-overlay-active {
    opacity: 1;
}
.mh-demo-setup.mh-fading-in {
    opacity: 0;
}
.mh-demo-setup.mh-faded-in {
    opacity: 1;
    transition: opacity 300ms ease;
}

/* "start learning" — quiet right-aligned pill, like a book's page turn prompt */
.mh-demo-proceed {
    align-self: flex-end;
    margin-top: 20px;
    margin-right: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-radius: var(--radius-xl);
    outline: none;
    box-shadow: none;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gold);
    padding: 12px 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mh-demo-proceed:active {
    opacity: 0.5;
}

/* ---- Coaching hints (onboarding focus mode) ---- */
/* Hints placed inline at anchor elements — no viewport-level overlay */

.mh-coach-pill {
    pointer-events: none;
    background: none;
    border: none;
    padding: 0 0 5px;
    margin: 6px 0 0;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: #948E85;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
    position: relative;
}
.mh-coach-pill::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-radius: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 110, 0.55) 8%,
        rgba(201, 169, 110, 0.55) 30%,
        rgba(201, 169, 110, 0.6) 60%,
        rgba(201, 169, 110, 0.25) 85%,
        transparent 100%
    );
}

/* Hint inside card-content: center-aligned, intrinsic width */
.card-content > .mh-coach-pill {
    align-self: center;
    flex-shrink: 0;
}

/* Hint in scroll area: dissolves proportionally with scroll */
.mh-coach-pill--scroll {
    position: absolute;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%) translateY(6px);
}

.mh-coach-pill.visible {
    opacity: 0.85;
    transform: translateY(0);
}
.mh-coach-pill--scroll.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mh-coach-pill.dismissing {
    opacity: 0;
    transform: translateY(-4px);
    transition-duration: 300ms;
    transition-timing-function: ease-in;
}

.mh-coach-pill.no-motion {
    transition: none !important;
    opacity: 1;
    transform: none;
}
.mh-coach-pill--scroll.no-motion {
    transform: translateX(-50%);
}

/* "more below" pill only visible on Japanese face */
body.focus-mode.mobile-focus:not(.mf-flipped-active) .mh-coach-pill--scroll {
    visibility: hidden;
}

/* View Transition: coaching hint morphs into card content */
::view-transition-group(coach-morph) {
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(coach-morph) {
    animation: coachMorphOut 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
::view-transition-new(coach-morph) {
    animation: coachMorphIn 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes coachMorphOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes coachMorphIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Browse path card styles (Station 0 hero strip) ---- */

/* Wrapper: positions arrows + edge fades */
.mh-demo-path-wrap {
    position: relative;
    width: calc(100% + 40px);
    margin: 0 -20px;
}

/* Edge fade gradients */
.mh-demo-path-wrap::before,
.mh-demo-path-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 32px;
    z-index: 2;
    pointer-events: none;
}

.mh-demo-path-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-paper), transparent);
}

.mh-demo-path-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-paper), transparent);
}

.mh-demo-path-strip {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0 15vw 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 0 15vw;
}

.mh-demo-path-strip::-webkit-scrollbar { display: none; }

.mh-demo-path-card {
    flex: 0 0 70vw;
    max-width: 280px;
    border-radius: var(--radius-lg);
    background: var(--color-card);
    border: 1px solid rgba(229, 226, 221, 0.5);
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;
    transition: box-shadow 0.35s ease, transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease;
    user-select: none;
    -webkit-user-select: none;
}

.mh-demo-path-flippable:active {
    opacity: 0.95;
    box-shadow: 0 1px 3px rgba(44, 44, 44, 0.1);
}

.mh-demo-path-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Thumbnail set as background-image (inline style) acts as persistent
       fallback layer — if the <img> src swap causes a compositor blank frame
       (common on mobile WebKit/Blink), the background stays visible. */
    background-size: cover;
    background-position: center;
}
.mh-demo-path-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative; /* paint above background-image layer */
}

/* Path card text — kanji + English (row 1), kana (row 2) */
.mh-demo-path-text {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mh-demo-path-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.mh-demo-path-kanji {
    font-family: var(--font-jp);
    font-size: 20px;
    color: var(--color-ink);
    line-height: 1.2;
}

.mh-demo-path-en {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-faint);
    font-weight: 500;
}

.mh-demo-path-row2 {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mh-demo-path-kana2 {
    font-family: var(--font-jp);
    font-size: 12px;
    color: #B0903E;
}

/* Furigana on card back — mini focus mode style */
.mh-demo-path-furigana {
    font-family: var(--font-jp);
    font-size: 38px;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.4;
    text-align: center;
}
.mh-demo-path-furigana ruby rt {
    font-family: var(--font-jp);
    font-size: 0.45em;
    font-weight: 400;
    color: #B0903E;
    opacity: 0.85;
    letter-spacing: 0.12em;
}

.mh-demo-path-roma2 {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #948E85;
}

/* Non-active cards: dimmed peek effect */
.mh-demo-path-card:not(.mh-demo-path-active) {
    transform: scale(0.92);
    opacity: 0.7;
}

/* Active card: subtle lift for centered card */
.mh-demo-path-card.mh-demo-path-active {
    box-shadow: 0 2px 8px rgba(44, 44, 44, 0.08);
    border-color: rgba(201, 169, 110, 0.3);
}


.mh-demo-s5 {
    align-items: stretch;
    max-width: 360px;
}

/* Setup labels use annotation style for coherence */
.mh-demo-setup-label {
    opacity: 1;
    transform: none;
    margin: 0 0 12px;
    text-align: left;
    align-self: flex-start;
}

.mh-demo-setup-label-display {
    margin-top: 28px;
}

/* Deck options */
.mh-demo-deck-opts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(229, 226, 221, 0.5);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mh-demo-deck-opt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: rgba(250, 250, 247, 0.85);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.mh-demo-deck-opt:active {
    background: rgba(240, 237, 232, 0.95);
}

.mh-demo-deck-opt.mh-demo-deck-sel {
    background: rgba(250, 250, 247, 1);
}

.mh-demo-deck-opt.mh-demo-deck-sel::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: var(--color-gold);
    border-radius: 1.5px;
}

.mh-demo-deck-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mh-demo-deck-name {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
}

.mh-demo-deck-count {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
}

.mh-demo-deck-desc {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #948E85;
    line-height: 1.4;
}

/* Display options */
.mh-demo-display-opts {
    display: flex;
    gap: 1px;
    background: rgba(229, 226, 221, 0.5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 32px;
}

.mh-demo-display-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    background: rgba(250, 250, 247, 0.85);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    -webkit-tap-highlight-color: transparent;
}

.mh-demo-display-opt:active {
    background: rgba(240, 237, 232, 0.95);
}

.mh-demo-display-opt.mh-demo-display-sel {
    background: rgba(250, 250, 247, 1);
    box-shadow: inset 0 -2px 0 var(--color-faint);
}

.mh-demo-display-preview {
    font-family: var(--font-jp);
    font-size: 28px;
    color: var(--color-ink);
    line-height: 1.3;
}

.mh-demo-display-label {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #948E85;
    text-align: center;
}

.mh-demo-display-rec {
    display: block;
    font-size: 10px;
    color: var(--color-gold);
    font-weight: 500;
    margin-top: 2px;
}

/* CTA button -- gold accent, Inter font for coherence */
.mh-demo-cta {
    width: 100%;
    padding: 18px;
    background: var(--color-gold);
    color: var(--color-ink);
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}

.mh-demo-cta:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .mh-demo-cta:hover {
        background: #D4B87E;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(201, 169, 110, 0.25);
    }
}

/* ---- Setup Page 1: Yes/No path selection ---- */

.mh-demo-setup-paths {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(229, 226, 221, 0.5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.mh-demo-setup-path {
    padding: 20px;
    background: rgba(250, 250, 247, 0.85);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.mh-demo-setup-path:active {
    background: rgba(240, 237, 232, 0.95);
}

.mh-demo-setup-path.mh-demo-path-sel {
    background: rgba(250, 250, 247, 1);
}

.mh-demo-setup-path.mh-demo-path-sel::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: var(--color-gold);
    border-radius: 1.5px;
}

.mh-demo-setup-path-label {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
}

/* Textbook reveal (expands when "Yes" is tapped) */
.mh-demo-textbook-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 300ms ease, opacity 200ms ease 100ms, margin 300ms ease;
    margin-bottom: 0;
}

.mh-demo-textbook-reveal.mh-demo-reveal-visible {
    max-height: 300px;
    opacity: 1;
    margin-bottom: 24px;
    transition: max-height 300ms ease, opacity 200ms ease;
}

/* "next" button — disabled state */
.mh-demo-setup-next {
    margin-top: 24px;
    transition: opacity 0.2s ease;
}

.mh-demo-setup-next.mh-demo-next-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Page transition: fade-out */
.mh-demo-setup.mh-fading-out-setup {
    opacity: 0;
    transition: opacity 200ms ease;
}

/* ---- Setup Page 2: Display format ---- */

.mh-demo-display-preview-live {
    font-family: var(--font-jp);
    font-size: 36px;
    color: var(--color-ink);
    text-align: center;
    padding: 32px 16px;
    margin-bottom: 24px;
    line-height: 1.6;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-demo-display-preview-live ruby rt {
    font-size: 0.45em;
    color: #B0903E;
    opacity: 0.85;
    letter-spacing: 0.12em;
}

/* Vertical display options (replaces horizontal 3-col) */
.mh-demo-display-opts-v {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(229, 226, 221, 0.5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 32px;
}

.mh-demo-display-opts-v .mh-demo-display-opt {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    position: relative;
}

.mh-demo-display-opts-v .mh-demo-display-opt.mh-demo-display-sel {
    background: rgba(250, 250, 247, 1);
    box-shadow: none;
}

.mh-demo-display-opts-v .mh-demo-display-opt.mh-demo-display-sel::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: var(--color-gold);
    border-radius: 1.5px;
}

.mh-demo-display-opts-v .mh-demo-display-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
    text-align: left;
}

.mh-demo-display-sublabel {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #948E85;
    margin-top: 2px;
}

/* Setup page stagger entrance */
.mh-demo-setup.mh-faded-in .mh-demo-s5 > * {
    animation: mhStaggerIn 300ms ease-out both;
}
.mh-demo-setup.mh-faded-in .mh-demo-s5 > *:nth-child(1) { animation-delay: 50ms; }
.mh-demo-setup.mh-faded-in .mh-demo-s5 > *:nth-child(2) { animation-delay: 150ms; }
.mh-demo-setup.mh-faded-in .mh-demo-s5 > *:nth-child(3) { animation-delay: 250ms; }
.mh-demo-setup.mh-faded-in .mh-demo-s5 > *:nth-child(4) { animation-delay: 350ms; }

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .mh-demo-path-flipper {
        transition: none !important;
    }
    .mh-demo-tap-hint {
        transition: none !important;
        opacity: 1;
        transform: none;
    }
    .mh-coach-pill {
        transition: none !important;
        opacity: 1;
        transform: none;
    }
    .mh-coach-pill--scroll {
        transform: translateX(-50%);
    }
    .mh-demo-textbook-reveal {
        transition: none !important;
    }
    .mh-demo-setup.mh-fading-out-setup {
        transition: none !important;
    }
}