:root {
            /* Dark industrial base palette */
            --bg-primary: #0a0e14;
            --bg-secondary: #121820;
            --bg-tertiary: #1a222d;
            --bg-card: #1e2732;
            --bg-card-hover: #252f3c;

            /* Text colors - high contrast */
            --text-primary: #ffffff;
            --text-secondary: #e0e4ea;
            --text-muted: #c5ccd6;
            --text-subtle: #c5ccd6;

            /* Accent colors - industrial/energy */
            --accent-orange: #ff6b35;
            --accent-amber: #f5a623;
            --accent-blue: #4a9eff;
            --accent-green: #00d4aa;
            /* Phrase/clitic chain identity — deliberately not a language accent
               (those change per language) and not a result colour. */
            --accent-phrases: #a78bfa;
            --accent-phrases-rgb: 167, 139, 250;

            /* Language-specific theme colors (dynamically updated) */
            --accent-primary: #C8102E;
            --accent-secondary: #FFCC00;
            --accent-primary-text: #ffffff;
            --accent-secondary-text: #1a1a2e;

            /* Semantic colors */
            --success: #00d4aa;
            --error: #ff5252;
            --warning: #f5a623;

            /* Borders and dividers */
            --border-color: #2a3441;
            --border-light: #3a4553;

            /* Glow effects */
            --glow-orange: rgba(255, 107, 53, 0.3);
            --glow-blue: rgba(74, 158, 255, 0.3);
            --glow-green: rgba(0, 212, 170, 0.3);

            /* Fonts */
            --font-reading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-emphasis: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-data: 'JetBrains Mono', monospace;
        }

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

        body {
            font-family: var(--font-reading);
            background: var(--bg-primary);
            background-image:
                radial-gradient(ellipse at top, var(--bg-secondary) 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(255, 107, 53, 0.05) 0%, transparent 40%);
            min-height: calc(100vh / var(--ui-zoom, 1));
            height: calc(100vh / var(--ui-zoom, 1));
            padding: 0;
            margin: 0;
            color: var(--text-primary);
            overflow: hidden;
            touch-action: manipulation;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }

        .container {
            max-width: 100%;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 768px) {
            .container {
                max-width: 800px;
                padding: 20px;
                scrollbar-width: thin;
                scrollbar-color: var(--border-color) transparent;
            }

            .container::-webkit-scrollbar {
                width: 6px;
            }

            .container::-webkit-scrollbar-track {
                background: transparent;
            }

            .container::-webkit-scrollbar-thumb {
                background: var(--border-color);
                border-radius: 3px;
            }
        }

        .header {
            text-align: center;
            color: white;
            padding: 20px 0;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .mode-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .mode-btn {
            flex: 1;
            min-width: 120px;
            padding: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .mode-btn:hover {
            transform: translateY(-2px);
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .mode-btn.active {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .card-container {
            /* Desktop card width; every use sits under (min-width: 768px), so
               phones keep a full-width card. 513px is 540px less 5%, taken
               back to give the side panels room (side-dock.js reads the real
               width rather than assuming this number). */
            --study-card-max-width: 513px;
            perspective: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh / var(--ui-zoom, 1));
            padding: 20px 0;
            overflow: hidden;
            touch-action: pan-x pan-y;
            -webkit-user-select: none;
            user-select: none;
            position: relative;
        }

        .card {
            width: 100%;
            /* Foundation for a future accessibility text-size setting —
               nothing reads this yet. Clamped against viewport height (the
               567px iPhone SE card is the tight case, not card width). */
            --card-fs: clamp(15px, 2.1vh, 20px);
            /* Fixed mobile height so the card shell doesn't grow/shrink
               between cards. Content shifts that used to come from
               min-height→max-height auto-sizing are now contained inside
               the scrollable meanings region. */
            height: calc(calc(100vh / var(--ui-zoom, 1)) - 100px);
            min-height: 460px;
            max-height: calc(calc(100vh / var(--ui-zoom, 1)) - 100px);
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
            cursor: pointer;
            touch-action: none;
            -webkit-user-drag: none;
            z-index: 1;
        }

        /* Stacked-card cue: when the card was reached via search/synonym/lyric
           breakdown (cardNavStack non-empty), shrink the visible card to ~92%
           and reveal a phantom "underlying" card backdrop behind it. The
           smaller temporary view + visible-bigger backdrop together imply
           "you're temporarily on top of a previous card; tap back to return."
           The phantom is anchored to .card-container so it isn't transformed
           with the card itself; its dimensions match .card's natural height
           so it sits exactly where .card would be at full size. */
        .card-container::before {
            content: none;
        }

        /* Old phantom/scale stacked treatment removed — now uses X button instead. */

        /* Old peek-tab pseudos removed — kept disabled in case any cached
           rule cascade tries to use them. */
        .card.is-stacked::before,
        .card.is-stacked::after {
            display: none;
        }

        /* X button shown when browsing a card via search/synonym/lyric jump.
           This is the only way back out of a child card, so it is a full
           44x44 touch target — the old 28px disc was below the minimum and
           easy to miss on a phone — and it is legible rather than ghosted. */
        .stacked-exit-btn {
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 6;
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.26);
            color: rgba(255, 255, 255, 0.78);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s, color 0.15s, transform 0.12s;
        }
        .stacked-exit-btn:hover {
            background: rgba(255, 255, 255, 0.24);
            color: #fff;
        }
        .stacked-exit-btn:active {
            transform: scale(0.94);
        }
        .stacked-exit-btn:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.75);
            outline-offset: 2px;
        }
        /* Retired: the way out of a child card is now the labelled "Back to …"
           control in the top bar (.cbs-return), which says where it returns to
           instead of making the learner infer it from an X. Kept in the markup
           because the same ids are wired as navigateBack() targets. */
        .card.is-stacked .stacked-exit-btn {
            display: none;
        }
        /* Chain-child cards carry their own exit affordance in the
           breadcrumb header — the generic round X would double up. */
        .card.is-chain-child .stacked-exit-btn {
            display: none;
        }

        .card.swiping {
            transition: none;
        }

        .card.swipe-correct {
            animation: swipeRight 0.3s ease-out forwards;
        }

        .card.swipe-incorrect {
            animation: swipeLeft 0.3s ease-out forwards;
        }

        .card.swipe-flag {
            animation: swipeUp 0.3s ease-out forwards;
            box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.7);
        }

        .card.flipped.swipe-correct {
            animation: swipeRightFlipped 0.3s ease-out forwards;
        }

        .card.flipped.swipe-incorrect {
            animation: swipeLeftFlipped 0.3s ease-out forwards;
        }

        .card.flipped.swipe-flag {
            animation: swipeUpFlipped 0.3s ease-out forwards;
            box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.7);
        }

        /* Result tint: a translucent colour wash over the card face as it exits */
        .card-tint {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            pointer-events: none;
            z-index: 50;
            background: transparent;
        }
        .card.swipe-correct .card-tint {
            background: rgba(55, 210, 105, 0.2);
        }
        .card.swipe-incorrect .card-tint {
            background: rgba(255, 70, 70, 0.2);
        }
        /* Artist mode sets position:relative on all card-face children; override it */
        body.artist-mode .card-tint {
            position: absolute;
            z-index: 50;
        }

        @keyframes swipeRight {
            to {
                transform: translateX(150%) rotate(20deg);
                opacity: 0;
            }
        }

        @keyframes swipeLeft {
            to {
                transform: translateX(-150%) rotate(-20deg);
                opacity: 0;
            }
        }

        @keyframes swipeUp {
            to {
                transform: translateY(-150%);
                opacity: 0;
            }
        }

        @keyframes swipeRightFlipped {
            to {
                transform: translateX(150%) rotate(20deg) rotateY(180deg);
                opacity: 0;
            }
        }

        @keyframes swipeLeftFlipped {
            to {
                transform: translateX(-150%) rotate(-20deg) rotateY(180deg);
                opacity: 0;
            }
        }

        @keyframes swipeUpFlipped {
            to {
                transform: translateY(-150%) rotateY(180deg);
                opacity: 0;
            }
        }

        @media (min-width: 768px) {
            .card {
                height: calc(calc(100vh / var(--ui-zoom, 1)) - 120px);
                max-width: var(--study-card-max-width);
                margin: 0 auto;
            }

            .card-container {
                position: relative;
            }

            .desktop-side-controls {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                z-index: 10;
            }

            .desktop-side-controls.left {
                left: 20px;
            }

            .desktop-side-controls.right {
                right: 20px;
            }

            .desktop-answer-btn-outside,
            .desktop-nav-btn-outside {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                background: none;
                border: none;
                cursor: pointer;
                padding: 12px;
                border-radius: 12px;
                transition: all 0.2s;
            }

            .desktop-answer-btn-outside .answer-icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: bold;
            }

            .desktop-nav-btn-outside .nav-icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                font-weight: 600;
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.85);
                line-height: 1;
                padding-bottom: 4px;
            }

            .desktop-answer-btn-outside.incorrect .answer-icon {
                background: var(--error);
                color: white;
            }

            .desktop-answer-btn-outside.correct .answer-icon {
                background: var(--success);
                color: white;
            }

            .answer-hint {
                font-size: 11px;
                color: var(--text-secondary);
                opacity: 0.7;
            }

            .answer-hint kbd {
                display: inline-block;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.25);
                border-bottom-width: 2px;
                border-radius: 4px;
                padding: 2px 8px;
                font-family: inherit;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.7);
                line-height: 1.4;
            }

            .desktop-answer-btn-outside:hover,
            .desktop-nav-btn-outside:hover {
                background: rgba(255, 255, 255, 0.05);
            }

            .desktop-nav-btn-outside:hover .nav-icon {
                background: rgba(255, 255, 255, 0.15);
                color: white;
            }

            .desktop-answer-btn-outside.pressed .answer-icon {
                animation: btnPress 0.3s ease-out;
            }

            @keyframes btnPress {
                0% { transform: scale(1); }
                30% { transform: scale(1.3); }
                100% { transform: scale(1); }
            }

            /* (hide rules moved to after .desktop-nav-row display:flex rule) */


            /* #deckProgressTrack is retired everywhere (see base rules);
               .card-back-scrubber sits above the card in its place — same
               order:-1 flex-item trick. Width matches .card's own
               configured width exactly, so the rail and card continue to
               line up as the study surface is tuned. */
            .card-back-scrubber {
                position: relative;
                order: -1;
                flex: 0 0 auto;
                width: min(var(--study-card-max-width), 100%);
                pointer-events: auto;
            }
            .card-container {
                flex-direction: column;
                justify-content: flex-start;
                gap: 8px;
                padding: 20px 0;
            }
            /* fill styles live in the global block below so mobile shares them */
            /* Side zones stay hidden while browsing an off-deck card. The top
               bar itself no longer hides: it now carries the "Back to …"
               return control (see .cbs-return in the base rules). */
            .card-container:has(.card.is-stacked) .side-nav-zone {
                opacity: 0;
                pointer-events: none;
            }

            /* Side navigation zones — wide clickable gutters on either side of card */
            .side-nav-zone {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                width: calc((100% - var(--study-card-max-width)) / 2);
                background: transparent;
                border: none;
                cursor: pointer;
                align-items: center;
                z-index: 5;
                padding: 0;
                transition: opacity 0.2s;
            }
            .side-nav-prev {
                left: 0;
                justify-content: flex-end;
                padding-right: 24px;
            }
            .side-nav-next {
                right: 0;
                justify-content: flex-start;
                padding-left: 24px;
            }
            .side-nav-chevron {
                opacity: 0;
                transition: opacity 0.2s, transform 0.15s;
                color: rgba(255, 255, 255, 0.5);
                flex-shrink: 0;
            }
            .side-nav-zone:hover:not(:disabled) .side-nav-chevron {
                opacity: 1;
                color: rgba(255, 255, 255, 0.85);
            }
            .side-nav-prev:hover:not(:disabled) .side-nav-chevron {
                transform: translateX(-4px);
            }
            .side-nav-next:hover:not(:disabled) .side-nav-chevron {
                transform: translateX(4px);
            }
            .side-nav-zone:disabled {
                pointer-events: none;
                opacity: 0;
            }
        }

        @keyframes card-exit-left {
            to { transform: translateX(-150%) rotate(-20deg); opacity: 0; }
        }
        @keyframes card-exit-left-f {
            to { transform: translateX(-150%) rotate(-20deg) rotateY(180deg); opacity: 0; }
        }
        @keyframes card-exit-right {
            to { transform: translateX(150%) rotate(20deg); opacity: 0; }
        }
        @keyframes card-exit-right-f {
            to { transform: translateX(150%) rotate(20deg) rotateY(180deg); opacity: 0; }
        }
        @keyframes card-enter-right {
            from { transform: translateX(55%) rotate(8deg); opacity: 0; }
            to   { transform: translateX(0) rotate(0deg); opacity: 1; }
        }
        @keyframes card-enter-left {
            from { transform: translateX(-55%) rotate(-8deg); opacity: 0; }
            to   { transform: translateX(0) rotate(0deg); opacity: 1; }
        }
        @media (min-width: 768px) {
            .card.nav-exit-left  { animation: card-exit-left  0.28s ease-out forwards; }
            .card.nav-exit-left-f  { animation: card-exit-left-f  0.28s ease-out forwards; }
            .card.nav-exit-right { animation: card-exit-right 0.28s ease-out forwards; }
            .card.nav-exit-right-f { animation: card-exit-right-f 0.28s ease-out forwards; }
            .card.nav-enter-right { animation: card-enter-right 0.22s ease-out forwards; }
            .card.nav-enter-left  { animation: card-enter-left  0.22s ease-out forwards; }
        }

        @media (max-width: 767px) {
            .desktop-side-controls {
                display: none;
            }
            .side-nav-zone {
                display: none;
            }
        }

        /* The study reference lives in the gutter, never on the card. */
        .desktop-keyboard-guide, .kb-guide-toggle { display: none; }
        @media (min-width: 768px) and (hover: hover) and (pointer: fine) {
            body:has(#appContent:not(.hidden)) .desktop-keyboard-guide {
                display: block;
                position: fixed;
                left: var(--dock-inset, 16px);
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;
                width: 248px;
                max-width: calc((100vw - var(--study-card-max-width, 513px)) / 2 - 32px);
                max-height: calc(100dvh / var(--ui-zoom, 1) - 48px);
                overflow-y: auto;
            }
            body:has(#appContent:not(.hidden)) .desktop-keyboard-guide.collapsed { display: none; }
            body:has(#appContent:not(.hidden)):has(.desktop-keyboard-guide.collapsed) .kb-guide-toggle { display: grid; }
            /* A docked panel owns the left gutter. */
            body:has([data-dock="left"]:not(.hidden):not([hidden])) .desktop-keyboard-guide,
            body:has([data-dock="left"]:not(.hidden):not([hidden])) .kb-guide-toggle { display: none !important; }
        }
        @media (min-width: 768px) and (max-width: 1079.98px) and (hover: hover) and (pointer: fine),
               (min-width: 768px) and (max-height: 559.98px) and (hover: hover) and (pointer: fine) {
            body:has(#appContent:not(.hidden)) .desktop-keyboard-guide { display: none; }
            body:has(#appContent:not(.hidden)) .kb-guide-toggle { display: grid; }
        }
        @media (min-width: 768px) and (max-width: 1239.98px) and (hover: hover) and (pointer: fine),
               (min-width: 768px) and (max-height: 649.98px) and (hover: hover) and (pointer: fine) {
            html[data-text-size="large"] body:has(#appContent:not(.hidden)) .desktop-keyboard-guide { display: none; }
            html[data-text-size="large"] body:has(#appContent:not(.hidden)) .kb-guide-toggle { display: grid; }
        }
        body:has(#appContent:not(.hidden)) .desktop-keyboard-guide.kb-guide-popover-open {
            display: block !important;
            left: 66px;
            width: 248px;
            max-width: calc(100vw / var(--ui-zoom, 1) - 82px);
            z-index: 40;
        }
        .kb-guide-toggle {
            position: fixed;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 41;
            width: 40px;
            height: 40px;
            place-items: center;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            cursor: pointer;
        }
        .kb-content {
            padding: 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            font-family: var(--font-reading);
        }
        .kb-guide-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
        .kb-guide-header h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
        .kb-guide-hide {
            display: grid; place-items: center; flex: 0 0 28px; height: 28px;
            border: 0; border-radius: 8px; background: transparent;
            color: var(--text-muted); font-size: 20px; cursor: pointer;
        }
        .kb-guide-rows .shortcut-row { gap: 8px; padding: 9px 0; }
        .kb-guide-rows .shortcut-desc { font-size: 12px; line-height: 1.4; }
        .kb-guide-rows .shortcut-kbd { height: 23px; min-width: 21px; padding: 0 5px; font-size: 11px; }
        .kb-guide-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
        .kb-guide-footer { border-top: 1px solid var(--border-color); margin-top: 14px; padding-top: 10px; }
        .kb-guide-all {
            display: flex; width: 100%; align-items: center; justify-content: space-between;
            gap: 8px; padding: 5px 0; background: transparent; border: 0;
            font: inherit; font-size: 12px; color: var(--text-primary); cursor: pointer;
        }
        .kb-info-btn {
            display: flex; align-items: center; gap: 7px; padding: 8px 0 0;
            background: transparent; border: 0; font: inherit; font-size: 11px;
            color: var(--text-muted); cursor: pointer;
        }
        .kb-guide-hide:hover, .kb-guide-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .kb-info-btn:hover, .kb-guide-all:hover { color: var(--accent-primary); }
        :is(.kb-guide-hide, .kb-guide-toggle, .kb-guide-all, .kb-info-btn):focus-visible {
            outline: 2px solid var(--accent-primary); outline-offset: 3px;
        }

        /* Card metadata popover */
        .card-meta-popover {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.6);
            z-index: 100;
            color: rgba(255, 255, 255, 0.9);
            font-family: var(--font-data);
            font-size: 12px;
            padding: 16px;
        }
        .card-meta-popover[hidden] { display: none; }

        .card-meta-modal-content {
            width: 100%;
            max-width: 480px;
            max-height: calc(85vh / var(--ui-zoom, 1));
            overflow-y: auto;
            background: rgba(20, 22, 28, 0.97);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
        }

        .card-meta-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .card-meta-title {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            font-family: var(--font-data);
        }
        .card-meta-close {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 0 4px;
        }
        .card-meta-close:hover { color: #fff; }

        .card-meta-body { padding: 8px 12px 12px; }

        .card-meta-footer {
            padding: 8px 12px 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .card-meta-flag-btn {
            display: block;
            width: 100%;
            padding: 8px 10px;
            background: rgba(255, 196, 0, 0.12);
            border: 1px solid rgba(255, 196, 0, 0.5);
            border-radius: 6px;
            color: rgba(255, 220, 120, 0.95);
            font-family: var(--font-data);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .card-meta-flag-btn:hover {
            background: rgba(255, 196, 0, 0.22);
            border-color: rgba(255, 196, 0, 0.8);
        }

        .card-meta-flag-row {
            margin-left: 8px;
            padding: 1px 6px;
            background: transparent;
            border: 1px solid rgba(255, 196, 0, 0.45);
            border-radius: 3px;
            color: rgba(255, 220, 120, 0.85);
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            cursor: pointer;
            vertical-align: middle;
            transition: background 0.15s, border-color 0.15s;
        }
        .card-meta-flag-row:hover {
            background: rgba(255, 196, 0, 0.18);
            border-color: rgba(255, 196, 0, 0.75);
        }
        .card-meta-flag-row.flagged {
            background: rgba(255, 196, 0, 0.35);
            border-color: rgba(255, 196, 0, 0.9);
            color: rgba(255, 240, 200, 1);
        }
        .card-meta-section { margin-top: 10px; }
        .card-meta-section:first-child { margin-top: 0; }
        .card-meta-section h4, .flag-simple-note-section h3 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: rgba(255, 255, 255, 0.55);
            margin: 0 0 6px 0;
            font-weight: 600;
        }
        .card-meta-kv {
            display: grid;
            grid-template-columns: 90px 1fr;
            gap: 4px 8px;
            font-size: 11px;
        }
        .card-meta-kv dt { color: rgba(255, 255, 255, 0.5); }
        .card-meta-kv dd { margin: 0; color: rgba(255, 255, 255, 0.9); word-break: break-word; }
        .card-meta-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .card-meta-list li {
            padding: 5px 0;
            border-top: 1px dashed rgba(255, 255, 255, 0.08);
        }
        .card-meta-list li:first-child { border-top: none; }
        .card-meta-tag {
            display: inline-block;
            padding: 1px 6px;
            margin-right: 4px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            font-size: 11px;
            color: rgba(255, 255, 255, 0.75);
        }
        .card-meta-tag.method { background: rgba(100, 180, 255, 0.15); border-color: rgba(100, 180, 255, 0.3); }
        .card-meta-tag.source { background: rgba(180, 140, 255, 0.15); border-color: rgba(180, 140, 255, 0.3); }
        .card-meta-tag.flag { background: rgba(255, 180, 100, 0.15); border-color: rgba(255, 180, 100, 0.3); }
        .card-meta-ex {
            color: rgba(255, 255, 255, 0.65);
            font-size: 11px;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .card-meta-current {
            color: rgba(255, 220, 120, 0.9);
            font-weight: 600;
        }
        .card-meta-empty {
            color: rgba(255, 255, 255, 0.4);
            font-style: italic;
            font-size: 11px;
        }

        /* ---- Sense-level flag menu (shares the card-meta modal chrome) ---- */
        .flag-menu-hint {
            color: rgba(255, 255, 255, 0.55);
            font-size: 11px;
            line-height: 1.4;
            margin-bottom: 10px;
        }
        .flag-menu-senses {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .flag-menu-senses.is-disabled { opacity: 0.4; }
        .flag-menu-sense {
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 5px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.12s, border-color 0.12s;
        }
        .flag-menu-sense:last-child { margin-bottom: 0; }
        .flag-menu-sense:hover { background: rgba(255, 255, 255, 0.09); }
        .flag-menu-sense.selected {
            background: rgba(255, 196, 0, 0.16);
            border-color: rgba(255, 196, 0, 0.7);
        }
        .flag-menu-sense .fm-pos {
            flex: none;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgba(255, 255, 255, 0.5);
        }
        .flag-menu-sense .fm-gloss {
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.92);
            word-break: break-word;
        }
        .flag-menu-sense .fm-pct {
            margin-left: auto;
            flex: none;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
        }
        .flag-menu-pairing {
            padding: 10px;
            border: 1px solid rgba(255, 196, 0, 0.42);
            border-radius: 7px;
            background: rgba(255, 196, 0, 0.08);
            transition: opacity 0.15s, border-color 0.15s;
        }

        .flag-menu-pairing.is-secondary {
            opacity: 0.62;
            border-color: rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.04);
        }

        .flag-pairing-sense {
            display: flex;
            align-items: baseline;
            gap: 7px;
            color: rgba(255, 255, 255, 0.94);
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 650;
        }

        .flag-pairing-sense > span {
            flex: none;
            color: rgba(255, 220, 120, 0.82);
            font-family: var(--font-data);
            font-size: 11px;
            letter-spacing: 0.55px;
            text-transform: uppercase;
        }

        .flag-pairing-arrow {
            padding: 3px 0;
            color: rgba(255, 196, 0, 0.7);
            font-size: 12px;
            text-align: center;
        }

        .flag-pairing-example {
            color: rgba(255, 255, 255, 0.84);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.38;
        }

        .flag-pairing-example small {
            display: block;
            margin-top: 3px;
            color: rgba(255, 255, 255, 0.55);
            font-size: 11px;
        }

        .flag-menu-note-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            color: rgba(255, 255, 255, 0.58);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .flag-menu-note-label span {
            color: rgba(255, 255, 255, 0.35);
            font-size: 11px;
            font-weight: 500;
        }

        .flag-menu-note {
            width: 100%;
            box-sizing: border-box;
            resize: vertical;
            min-height: 72px;
            padding: 9px 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 7px;
            outline: none;
            background: rgba(0, 0, 0, 0.24);
            color: rgba(255, 255, 255, 0.92);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.4;
        }

        .flag-menu-note:focus {
            border-color: rgba(255, 196, 0, 0.7);
            box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.1);
        }

        .flag-menu-note::placeholder {
            color: rgba(255, 255, 255, 0.32);
        }

        /* Audit reporter — modern, bounded, and intentionally calmer than
           the legacy yellow debug popover it replaces. */
        .flag-menu {
            padding: 18px;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            background: rgba(7, 9, 14, 0.76);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .flag-menu .card-meta-modal-content {
            display: flex;
            flex-direction: column;
            width: min(100%, 620px);
            max-width: 620px;
            max-height: min(calc(88dvh / var(--ui-zoom, 1)), 780px);
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
            border-radius: 18px;
            background: color-mix(in srgb, var(--bg-secondary) 96%, #090b11);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
        }
        .flag-menu .card-meta-header {
            flex: none;
            padding: 17px 19px 14px;
            border-color: color-mix(in srgb, var(--border-color) 78%, transparent);
        }
        .flag-menu .card-meta-title {
            color: var(--text-primary);
            font: 700 18px/1.2 var(--font-emphasis);
            letter-spacing: -0.01em;
        }
        .flag-menu .card-meta-close {
            width: 38px;
            height: 38px;
            padding: 0;
            border-radius: 50%;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }
        .flag-menu .card-meta-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--accent-primary) 42%, transparent) transparent;
            padding: 14px 19px 19px;
        }
        .flag-menu .card-meta-body::-webkit-scrollbar { width: 6px; }
        .flag-menu .card-meta-body::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-primary) 42%, transparent);
        }
        .flag-menu .card-meta-footer {
            flex: none;
            padding: 13px 19px 17px;
            border-color: color-mix(in srgb, var(--border-color) 78%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
        }
        .flag-menu-hint {
            margin: 0 0 16px;
            color: var(--text-secondary);
            font: 500 12px/1.5 var(--font-reading);
        }
        .flag-menu-provenance {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
            margin: -7px 0 13px;
            font-size: 11px;
        }
        .flag-menu-provenance span { opacity: .62; }
        .flag-menu-provenance code {
            max-width: 100%;
            padding: 3px 6px;
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 9%, transparent);
            overflow-wrap: anywhere;
            white-space: normal;
        }
        .flag-menu .card-meta-section {
            margin-top: 17px;
        }
        .flag-menu .card-meta-section h4, .flag-menu .flag-simple-note-section h3 {
            margin-bottom: 8px;
            color: var(--text-muted);
            font: 700 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.09em;
        }
        .flag-section-optional {
            margin-left: 4px;
            color: color-mix(in srgb, var(--text-muted) 65%, transparent);
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
        }
        .flag-menu-targets {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .flag-menu-quick-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .flag-menu-quick-action {
            min-width: 0;
            padding: 10px 9px;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, transform 0.15s;
        }
        .flag-menu-quick-note {
            grid-column: 1 / -1;
            text-align: left;
        }
        .flag-menu-quick-action:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
            transform: translateY(-1px);
        }
        .flag-menu-quick-action.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-tertiary));
            box-shadow: inset 0 -3px 0 var(--accent-primary);
        }
        .flag-menu-quick-action strong,
        .flag-menu-quick-action span {
            display: block;
        }
        .flag-menu-quick-action strong {
            font: 700 12px/1.2 var(--font-emphasis);
        }
        .flag-menu-quick-action span {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 11px/1.3 var(--font-reading);
        }
        .flag-menu-target {
            min-width: 0;
            padding: 11px 12px;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, transform 0.15s;
        }
        .flag-menu-target:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
            transform: translateY(-1px);
        }
        .flag-menu-target.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-tertiary));
            box-shadow: inset 3px 0 0 var(--accent-primary);
        }
        .flag-menu-target strong,
        .flag-menu-target span {
            display: block;
        }
        .flag-menu-target strong {
            font: 700 13px/1.25 var(--font-emphasis);
        }
        .flag-menu-target span {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 11px/1.35 var(--font-reading);
        }
        .flag-menu-senses {
            max-height: 190px;
            overflow-y: auto;
        }
        .flag-menu-sense {
            padding: 9px 11px;
            border-color: var(--border-color);
            border-radius: 9px;
            background: var(--bg-tertiary);
        }
        .flag-menu-sense:hover {
            background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
        }
        .flag-menu-sense.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 64%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-tertiary));
        }
        .flag-menu-sense .fm-pos,
        .flag-menu-sense .fm-pct {
            color: var(--text-muted);
        }
        .flag-menu-sense .fm-gloss {
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: 13px;
        }
        .flag-menu-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            transition: opacity 0.15s;
        }
        .flag-menu-categories.is-disabled {
            opacity: 0.34;
            pointer-events: none;
        }
        .flag-menu-category {
            min-height: 34px;
            padding: 6px 11px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: transparent;
            color: var(--text-secondary);
            font: 650 11px/1 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-menu-category:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-color));
            color: var(--text-primary);
        }
        .flag-menu-category.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 64%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-tertiary));
            color: var(--text-primary);
        }
        .flag-menu-pairing {
            padding: 12px 13px;
            border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
            border-radius: 11px;
            background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
        }
        .flag-pairing-sense {
            color: var(--text-primary);
            font-family: var(--font-reading);
        }
        .flag-pairing-sense > span,
        .flag-preview-object > span {
            color: var(--accent-primary);
        }
        .flag-pairing-arrow {
            color: var(--text-muted);
            font: 600 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .flag-pairing-example,
        .flag-preview-context {
            color: var(--text-secondary);
            font-family: var(--font-reading);
        }
        .flag-preview-context {
            margin-top: 5px;
            font-size: 11px;
        }
        .flag-preview-object > span,
        .flag-preview-object > strong,
        .flag-preview-object > small {
            display: block;
        }
        .flag-preview-object > span {
            font: 700 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .flag-preview-object > strong {
            margin-top: 4px;
            color: var(--text-primary);
            font: 700 16px/1.25 var(--font-reading);
        }
        .flag-preview-object > small {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 11px/1.4 var(--font-reading);
        }
        .flag-menu-note-label {
            display: block;
            margin: 0 0 7px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
        }
        .flag-menu-note-section {
            border-top: 1px solid var(--border-color);
            padding-top: 13px;
        }
        .flag-menu-note-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 38px;
            color: var(--text-secondary);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
            list-style: none;
        }
        .flag-menu-note-summary::-webkit-details-marker { display: none; }
        .flag-menu-note-summary::after {
            content: '+';
            color: var(--accent-primary);
            font-size: 20px;
            line-height: 1;
        }
        .flag-menu-note-section[open] .flag-menu-note-summary::after { content: '−'; }
        .flag-menu-note-summary small {
            margin: 0 10px 0 auto;
            color: var(--text-muted);
            font: 500 11px/1.2 var(--font-reading);
        }
        .flag-menu-note-composer { padding-top: 8px; }
        .flag-menu-note-back {
            min-height: 40px;
            padding: 9px 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-menu .card-meta-body.is-note-mode .flag-menu-note-section {
            margin-top: 0;
            border-top: 0;
            padding-top: 0;
        }
        .flag-menu .card-meta-body.is-note-mode .flag-menu-note-summary { display: none; }
        .flag-menu-note-help {
            margin-top: 7px;
            color: var(--text-muted);
            font: 500 11px/1.4 var(--font-reading);
        }
        .flag-menu-note-actions {
            display: none;
            grid-template-columns: auto 1fr;
            gap: 8px;
            margin-top: 12px;
        }
        .flag-menu .card-meta-body.is-note-mode .flag-menu-note-actions { display: grid; }
        .flag-menu-note-send {
            min-height: 40px;
            padding: 9px 14px;
            border: 1px solid var(--accent-primary);
            border-radius: 10px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-menu-note-send:disabled {
            opacity: 0.42;
            cursor: not-allowed;
        }
        .flag-menu-note {
            min-height: 88px;
            padding: 11px 12px;
            border-color: var(--border-color);
            border-radius: 11px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }
        .flag-menu-note:focus {
            border-color: color-mix(in srgb, var(--accent-primary) 68%, var(--border-color));
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
        }
        .flag-menu .card-meta-flag-btn {
            min-height: 45px;
            padding: 11px 14px;
            border: 1px solid var(--accent-primary);
            border-radius: 11px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            font: 700 12px/1.2 var(--font-emphasis);
            letter-spacing: 0;
            text-transform: none;
        }
        .flag-menu .card-meta-flag-btn:hover {
            border-color: var(--accent-primary);
            background: color-mix(in srgb, var(--accent-primary) 88%, white);
        }
        .flag-menu .card-meta-flag-btn:disabled {
            opacity: 0.42;
            cursor: not-allowed;
        }
        .flag-menu-status {
            position: sticky;
            top: 0;
            z-index: 3;
            margin: 0 0 12px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--success) 48%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--success) 12%, var(--bg-tertiary));
            color: color-mix(in srgb, var(--success) 74%, white);
            font: 700 12px/1.35 var(--font-emphasis);
        }
        .flag-menu-status.is-error {
            border-color: color-mix(in srgb, var(--error) 52%, var(--border-color));
            background: color-mix(in srgb, var(--error) 10%, var(--bg-tertiary));
            color: color-mix(in srgb, var(--error) 74%, white);
        }
        .flag-sent-toast {
            position: fixed;
            top: max(18px, env(safe-area-inset-top));
            left: 50%;
            /* This confirmation is global, not part of the flag sheet. Keep it
               above modals and the app loading surface so a completed queue
               write cannot resolve invisibly behind whatever opened next. */
            z-index: 30002;
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: min(82vw, 250px);
            padding: 12px 15px;
            border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border-color));
            border-radius: 14px;
            background: color-mix(in srgb, var(--bg-card) 92%, var(--success) 8%);
            color: var(--text-primary);
            box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
            opacity: 0;
            transform: translate(-50%, -12px) scale(0.97);
            transition: opacity 160ms ease, transform 180ms ease;
            pointer-events: none;
        }
        .flag-sent-toast[hidden] { display: none; }
        .flag-sent-toast.is-visible {
            opacity: 1;
            transform: translate(-50%, 0) scale(1);
        }
        .flag-sent-toast.is-error {
            border-color: color-mix(in srgb, var(--error) 50%, var(--border-color));
            background: color-mix(in srgb, var(--bg-card) 92%, var(--error) 8%);
        }
        .flag-sent-toast.is-pending {
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
            background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-primary) 8%);
        }
        .flag-sent-toast-icon {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--success) 18%, transparent);
            color: var(--success);
            font-weight: 800;
        }
        .flag-sent-toast.is-error .flag-sent-toast-icon {
            background: color-mix(in srgb, var(--error) 18%, transparent);
            color: var(--error);
        }
        .flag-sent-toast.is-pending .flag-sent-toast-icon {
            background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
            color: var(--accent-primary);
        }
        .flag-sent-toast-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
            font: 12px/1.25 var(--font-emphasis);
        }
        .flag-sent-toast-copy strong { font-size: 13px; }
        .flag-sent-toast-copy > span { color: var(--text-muted); }
        .flag-simple-note-section {
            margin-top: 0 !important;
        }
        .flag-simple-send-note,
        .flag-simple-actions button,
        .flag-senses-route,
        .flag-senses-back,
        .flag-simple-sense button {
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-simple-send-note {
            width: 100%;
            min-height: 42px;
            margin-top: 9px;
            border-color: var(--accent-primary);
            border-radius: 10px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }
        .flag-simple-send-note:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }
        .flag-simple-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .flag-simple-actions button {
            min-height: 43px;
            padding: 9px 10px;
            border-radius: 10px;
        }
        .flag-simple-actions button[data-simple-flag="elision"] {
            grid-column: auto;
        }
        .flag-jp-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .flag-jp-btn {
            display: block;
            width: 100%;
            min-height: 48px;
            padding: 13px 15px;
            border-radius: 11px;
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font: 600 13px/1.4 var(--font-emphasis);
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .flag-jp-btn:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
        }
        .flag-simple-actions button:hover,
        .flag-senses-route:hover,
        .flag-simple-sense button:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
        }
        .flag-senses-route {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 58px;
            padding: 10px 13px;
            border-radius: 11px;
            text-align: left;
        }
        .flag-senses-route strong,
        .flag-senses-route small {
            display: block;
        }
        .flag-senses-route small {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 11px/1.3 var(--font-reading);
        }
        .flag-senses-route > span:last-child {
            color: var(--accent-primary);
            font-size: 25px;
        }
        .flag-senses-back {
            min-height: 36px;
            margin-bottom: 16px;
            padding: 7px 11px;
            border-radius: 9px;
            color: var(--text-secondary);
        }
        #flagMenuSensesView > h4 {
            margin: 0 0 9px;
            color: var(--text-muted);
            font: 700 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }
        .flag-simple-senses {
            display: grid;
            gap: 9px;
        }
        .flag-simple-sense {
            padding: 11px;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: color-mix(in srgb, var(--bg-tertiary) 76%, transparent);
        }
        .flag-simple-sense-meaning {
            display: flex;
            gap: 8px;
            align-items: baseline;
        }
        .flag-simple-sense-meaning span {
            color: var(--accent-primary);
            font: 700 11px/1 var(--font-emphasis);
        }
        .flag-simple-sense-meaning strong {
            color: var(--text-primary);
            font: 650 13px/1.35 var(--font-reading);
        }
        .flag-simple-sense-example {
            margin-top: 8px;
            color: var(--text-secondary);
            font: 500 12px/1.4 var(--font-reading);
        }
        .flag-simple-sense-example small {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
        }
        .flag-simple-sense-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 10px;
        }
        .flag-simple-sense button {
            min-height: 38px;
            border-radius: 9px;
        }
        .flag-whole-card-btn {
            box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-primary) 20%, transparent);
        }
        .flag-menu-content.is-sending,
        #flagMenuContent.is-sending {
            pointer-events: none;
            opacity: 0.72;
        }
        @media (max-width: 560px) {
            .flag-menu {
                align-items: flex-end;
                padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
            }
            .flag-menu .card-meta-modal-content {
                width: 100%;
                height: calc(calc(100dvh / var(--ui-zoom, 1)) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
                max-height: none;
                border-radius: 18px 18px 12px 12px;
            }
            .flag-menu .card-meta-header { padding: 12px 14px 10px; }
            .flag-menu .card-meta-body { padding: 11px 14px 18px; }
            .flag-menu .card-meta-footer { padding: 10px 14px 12px; }
            .flag-menu-targets {
                grid-template-columns: 1fr;
            }
            .flag-menu-quick-actions {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .flag-menu-target {
                padding: 10px 11px;
            }
            .flag-menu-note {
                min-height: 132px;
                resize: none;
                font-size: 16px;
            }
        }

        .kb-hint.correct {
            color: var(--success);
            font-weight: 700;
            font-size: 18px;
        }

        .kb-hint.incorrect {
            color: var(--error);
            font-weight: 700;
            font-size: 18px;
        }

        .kb-arrows {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .kb-arrow-row {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .kb-arrow-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 0 2px;
        }

        .swipe-indicator {
            position: absolute;
            top: 50%;
            font-size: 72px;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .swipe-indicator.correct {
            right: 20px;
            color: var(--accent-green);
            text-shadow: 0 0 20px var(--glow-green);
        }

        .swipe-indicator.incorrect {
            left: 20px;
            color: var(--error);
            text-shadow: 0 0 20px rgba(255, 82, 82, 0.5);
        }

        .swipe-indicator.visible {
            opacity: 1;
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        /* Hide front card controls when flipped */
        .card.flipped .card-front {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .card.flipped .card-back {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        .card-front {
            visibility: visible;
            pointer-events: auto;
        }

        /* Ensure back is hidden when not flipped */
        .card-back {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 16px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: var(--bg-card);
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            overflow: hidden;
        }

        .card-face::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            padding: 2px;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            /* Temporary product switch: keep the accent rim available without
               showing it. Set this custom property to 1 to restore it. */
            opacity: var(--card-accent-border-opacity, 0);
        }

        @media (max-width: 767px) {
            .card-face {
                padding: 20px;
            }
        }

        .card-back {
            transform: rotateY(180deg);
            padding-left: 4px;
            padding-right: 4px;
            /* Override .card-face's justify-content: center so the back's
               content anchors to the top and the scrollable meanings region
               takes the middle. Prevents the whole layout from shifting as
               meaning count / translation length changes between cards. */
            justify-content: flex-start;
            padding-top: 20px;
            padding-bottom: 4px;
        }

        /* Inline set scrubber — replaces #deckProgressTrack (retired below)
           on both desktop and mobile, sitting in the same reserved strip
           above the card. Shared layout here; positioning (absolute above
           the card on mobile, order:-1 flex item on desktop) is set per
           breakpoint further down. */
        #deckProgressTrack {
            display: none;
        }
        /* Top control row. The hairline divider and the 6px inset were both
           spending height on nothing: the strip already has its own outline,
           so it reads as a separate band without a rule under it. The height
               they freed goes straight into the controls (see .cbs-strip /
               .cbs-gear stretching to fill this row). */
        .card-back-scrubber {
            display: flex;
            align-items: center;
            gap: 4px;
            height: 52px;
            /* No outer inset: the strip and gear draw their own edges, so this
               padding only shrank the controls inside a row whose height is
               already fixed. */
            padding: 0;
            box-sizing: border-box;
            transition: opacity 0.2s;
            z-index: 12;
        }
        /* A child card keeps this bar — it is where the return control lives.
           The seek bar is what gets hidden, since it does not address a card
           in the active set from here. */
        .card-container:has(.card.is-stacked) .cbs-scrub {
            display: none;
        }

        /* Return control on a child card. Fills the space the seek bar vacates, so
           the target is the width of the strip rather than a 44px disc. */
        .cbs-return {
            flex: 1 1 auto;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: calc(100% - 4px);
            min-height: 44px;
            padding: 0 12px;
            border-radius: 10px;
            background: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            text-align: left;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .cbs-return[hidden] {
            display: none;
        }
        .cbs-return:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .cbs-return:active {
            background: rgba(255, 255, 255, 0.12);
        }
        .cbs-return-arrow {
            flex: 0 0 auto;
            font-size: 26px;
            line-height: 1;
            color: rgba(255, 255, 255, 0.85);
        }
        .cbs-return-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
            line-height: 1.15;
        }
        .cbs-return-kicker {
            font: 600 11px/1 var(--font-data);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
        }
        .cbs-return-label {
            font: 650 16px/1.2 var(--font-reading);
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cbs-strip {
            position: relative;
            display: flex;
            align-items: center;
            flex: 1;
            /* Fill whatever the row leaves rather than a fixed 52px. Capped so
               the taller mobile rail (74px) doesn't stretch the controls into
               a slab. */
            height: 100%;
            max-height: 62px;
            gap: 8px;
            padding: 0;
            box-sizing: border-box;
            border-radius: 0;
            background: transparent;
            border: none;
        }

        .cbs-scrub {
            position: relative;
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
            height: calc(100% - 4px);
            min-height: 44px;
            touch-action: none;
            cursor: ew-resize;
        }
        .cbs-track-wrap {
            position: relative;
            flex: 1;
            height: 100%;
            /* Left inset is half the thumb, so it never clips at card 1. The
               right side only needs to keep the thumb off the gear icon. */
            margin: 0 6px 0 16px;
        }
        .cbs-track,
        .cbs-fill {
            position: absolute;
            left: 0;
            top: 50%;
            height: 4px;
            transform: translateY(-50%);
            border-radius: 999px;
            pointer-events: none;
        }
        .cbs-track {
            right: 0;
            background: rgba(255, 255, 255, 0.18);
        }
        .cbs-fill {
            width: calc(var(--cbs-t, 0) * 100%);
            background: rgba(255, 255, 255, 0.58);
        }
        .cbs-thumb {
            position: absolute;
            left: calc(var(--cbs-t, 0) * 100%);
            top: 50%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #ffffff;
            color: #1a1f26;
            font: 750 13px/1 var(--font-reading);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
            pointer-events: none;
        }
        .cbs-scrub.is-single {
            cursor: default;
        }
        .cbs-scrub.is-single .cbs-track,
        .cbs-scrub.is-single .cbs-fill,
        .deck-progress-segments.is-single::before {
            display: none;
        }
        .cbs-thumb.is-phrases {
            background: var(--accent-phrases);
            color: #241b3d;
        }
        .cbs-scrub.is-scrubbing .cbs-thumb {
            transform: translate(-50%, -50%) scale(1.08);
        }

        .cbs-gear {
            flex: 0 0 52px;
            width: 52px;
            height: 100%;
            max-height: 62px;
            border-radius: 999px;
            background: transparent;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.78);
            cursor: pointer;
        }
        .cbs-gear:hover,
        .cbs-gear:focus-visible {
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
        }
        .cbs-gear svg {
            width: 28px;
            height: 28px;
        }

        /* Redundant on every breakpoint now — swiping already means grade,
           the legend was just restating it. Kept hidden everywhere so
           mobile and desktop no longer diverge here. */
        .swipe-legend {
            display: none;
        }
        .swipe-legend-wrong { color: #e08b8b; }
        .swipe-legend-right { color: #6fd8c0; }
        .swipe-legend-sep {
            width: 1px;
            height: 12px;
            background: rgba(255, 255, 255, 0.16);
        }
        .swipe-legend-commit {
            display: none;
            font-size: 11.5px;
            font-weight: 700;
        }
        .swipe-legend.legend-commit-correct,
        .swipe-legend.legend-commit-incorrect {
            border-top-width: 1px;
        }
        .swipe-legend.legend-commit-correct {
            background: rgba(0, 212, 170, 0.16);
            border-top-color: rgb(0, 212, 170);
        }
        .swipe-legend.legend-commit-incorrect {
            background: rgba(255, 82, 82, 0.16);
            border-top-color: rgb(255, 82, 82);
        }
        .swipe-legend.legend-commit-correct .swipe-legend-wrong,
        .swipe-legend.legend-commit-correct .swipe-legend-sep,
        .swipe-legend.legend-commit-correct .swipe-legend-right,
        .swipe-legend.legend-commit-incorrect .swipe-legend-wrong,
        .swipe-legend.legend-commit-incorrect .swipe-legend-sep,
        .swipe-legend.legend-commit-incorrect .swipe-legend-right {
            display: none;
        }
        .swipe-legend.legend-commit-correct .swipe-legend-commit,
        .swipe-legend.legend-commit-incorrect .swipe-legend-commit {
            display: inline;
        }
        .swipe-legend.legend-commit-correct .swipe-legend-commit { color: #6fd8c0; }
        .swipe-legend.legend-commit-incorrect .swipe-legend-commit { color: #e08b8b; }

        /* The hints on the card itself stay hidden: they covered the rank and
           frequency line, and the guide beside the card replaces them. */
        .card-desktop-shortcuts {
            display: none !important;
        }
        @media (hover: hover) and (pointer: fine) {
            .card-desktop-shortcuts {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                position: absolute;
                bottom: 10px;
                left: 0;
                right: 0;
                font-family: var(--font-reading);
                font-size: 11px;
                color: var(--text-muted);
                opacity: 0.7;
                pointer-events: none;
                z-index: 4;
                transition: opacity 0.2s ease;
            }
            .flashcard:hover .card-desktop-shortcuts {
                opacity: 0.95;
            }
            .desktop-shortcut-item {
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }
            .desktop-shortcut-wrong {
                color: #e08b8b;
            }
            .desktop-shortcut-right {
                color: #6fd8c0;
            }
            .desktop-kbd {
                display: inline-block;
                font-family: var(--font-data, monospace);
                font-size: 11px;
                font-weight: 700;
                line-height: 1;
                padding: 2px 5px;
                border-radius: 4px;
                background: rgba(255, 255, 255, 0.08);
                border: 1px solid rgba(255, 255, 255, 0.16);
                color: var(--text-primary);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            }
        }

        .is-speaking-active #frontWord,
        .is-speaking-active .card-word {
            animation: word-audio-pulse 1.2s ease-in-out infinite;
        }
        @keyframes word-audio-pulse {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 0 0 rgba(var(--accent-primary-rgb), 0));
            }
            50% {
                transform: scale(1.025);
                filter: drop-shadow(0 0 12px rgba(var(--accent-primary-rgb), 0.45));
            }
        }


        /* Back layout: header / scroll / tray / sentence / links.
           #backContent sits inside .card-back and is the actual flex column
           container — updateCard() writes all rows directly into it, so the
           flex-child rules target its direct children. */
        #backContent,
        .card-replica .card-details {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            row-gap: 10px;
        }

        #backContent > .back-header,
        .card-replica .card-details > .back-header {
            flex: 0 0 auto;
            width: 100%;
            margin-bottom: 0 !important;
            position: relative;
            text-align: left;
        }

        .back-headword-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px 10px;
            position: relative;
        }

        /* The back no longer renders a POS control beside the surface form.
           Centre the word while preserving the old layout if that control is
           re-enabled later. */
        .back-headword-row:not(:has(.back-pos-legend)) {
            justify-content: center;
        }

        /* `flex: 0 1 auto` lets the scroll region take its natural height
           instead of greedily filling the card. With `margin-top: auto`
           here and `margin-bottom: auto` on the LAST child of the block
           (`.links-section`), the two competing auto margins split the
           remaining slack evenly — centring the whole (meanings + tray +
           sentence + links) group vertically on sparse cards. One-sense
           words like `bueno` used to bottom-stack; now the group floats
           to the mid-card gap. When content fills the card, the auto
           margins collapse and the existing scroll-cap / overflow-y
           behaviour takes over unchanged. */
        #backContent > .meanings-scroll,
        .card-replica .card-details > .meanings-scroll {
            flex: 0 1 auto;
            min-height: 0;           /* required for overflow in a flex child */
            width: 100%;
            overflow-y: auto;
            margin-top: 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
            /* No bottom padding: the row's own margin-bottom (6px) is
               the only gap between the last sense and whatever follows
               (tray's divider line, or the example sentence). Matches
               the sense-to-sense gap exactly.
               No mask-image fade either — the previous bottom-18px
               fade was a scroll affordance hint, but when decks are
               short (bueno, danse) and the last row sits near the
               scroll's bottom edge, the fade ate into the bottom of
               the row and read as a "halo" artefact. Native scrollbar
               is the clearer affordance when overflow actually happens. */
            padding-bottom: 0;
        }
        #backContent > .meanings-scroll::-webkit-scrollbar,
        .card-replica .card-details > .meanings-scroll::-webkit-scrollbar {
            width: 6px;
        }
        #backContent > .meanings-scroll::-webkit-scrollbar-track,
        .card-replica .card-details > .meanings-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        #backContent > .meanings-scroll::-webkit-scrollbar-thumb,
        .card-replica .card-details > .meanings-scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.28);
            border-radius: 4px;
        }

        /* Pinned tray for MWE / CLITIC rows — only rendered when "Phrases
           mode" is off (js/ui.js); when on, those entries leave silently as
           chained child cards instead (collectChainItems in flashcards.js). */
        #backContent > .meanings-tray,
        .card-replica .card-details > .meanings-tray {
            flex: 0 0 auto;
            width: 100%;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 10px;
            margin-top: 0;
            margin-bottom: 0;
        }

        /* Chain-child card chrome (phrase/clitic handoff cards) */
        .card.is-chain-child .card-back .mobile-nav-row {
            display: none !important;
        }

        .phrase-summary-subtitle {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 600;
            color: #b9c2cd;
            text-align: center;
            line-height: 1.35;
        }
        .other-uses-header {
            text-align: center;
        }
        .other-uses-headword {
            font-size: 26px;
            font-weight: 750;
            line-height: 1.1;
        }

        /* One scrollable column of phrase cards, not a sequence you swipe
           through one at a time. Each item reads top to bottom, left
           aligned — no row backgrounds, no percentages. flex-basis: 0
           forces a bounded scrollport so overflow actually scrolls. */
        .phrase-summary-scroll {
            flex: 1 1 0;
            width: 100%;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 6px;
            padding: 0 8px 8px;
            /* `.card` sets touch-action: none so a drag grades the card.
               Inheriting that here disabled the browser's own scrolling, which
               left the scrollbar as the only way to move the list — clickable
               but not swipeable. pan-y hands vertical drags back to the
               browser; the horizontal grading swipe still reads touchmove and
               is unaffected. The bar itself is then redundant, so it is
               hidden: the gesture is the affordance. */
            touch-action: pan-y;
            overscroll-behavior: contain;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #backContent > .phrase-summary-scroll {
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
        }
        .phrase-summary-scroll::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .phrase-summary-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            width: 100%;
            padding: 6px 0;
            text-align: left;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .other-uses-pos {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            text-align: left;
        }
        .other-uses-pos-heading {
            margin: 4px 0 0;
            font: 700 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #c5ced8;
        }
        .other-uses-gloss-group {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding-bottom: 4px;
        }
        .other-uses-gloss {
            font-family: var(--font-reading);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.25;
            color: #fff;
        }
        .other-uses-leaf {
            width: 100%;
            padding: 2px 0 2px 10px;
            border-left: 2px solid rgba(255, 255, 255, 0.18);
        }
        .rarer-uses-cluster {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin: 2px 0 6px;
            padding: 6px 8px 8px 10px;
            border-left: 3px solid rgba(var(--sense-match-rgb, 180, 180, 180), 0.75);
            background: rgba(255, 255, 255, 0.04);
            border-radius: 0 8px 8px 0;
        }
        .rarer-uses-cluster-meta {
            font: 650 11px/1.2 var(--font-data);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.48);
        }
        .rarer-uses-pager {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 2px;
            color: rgba(255, 255, 255, 0.7);
            font: 650 12px/1 var(--font-data);
        }
        .rarer-uses-pager button {
            width: 28px;
            height: 28px;
            padding: 0;
            border: none;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            cursor: pointer;
        }
        .phrase-example.phrase-example--compact {
            margin-top: 2px;
            padding: 6px 8px 4px;
            border-radius: 8px;
            border-left-width: 3px;
            border-left-color: rgba(var(--sense-match-rgb), 0.85);
        }
        .phrase-summary-item:first-child {
            border-top: none;
            padding-top: 0;
        }
        /* .phrase-summary-item is a column flex container, so the badge and its
           provenance pill need their own row wrapper — as bare flex children
           they would stack vertically. */
        .phrase-badge-row {
            display: flex;
            align-items: center;
        }
        .phrase-kind-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding: 2px 7px;
            border-radius: 5px;
            background: rgba(20, 184, 166, 0.18);
            border: 1px solid rgba(20, 184, 166, 0.55);
            color: #7ce6d8;
        }
        .phrase-kind-badge.badge-rare {
            background: rgba(245, 158, 11, 0.18);
            border: 1px solid rgba(245, 158, 11, 0.55);
            color: #fbbf24;
        }
        .rare-child-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-primary, #fff);
            font-family: var(--font-reading);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.18s ease;
        }
        .rare-child-back-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        /* Build-provenance letter, JST account only. Deliberately quieter than
           .phrase-kind-badge and than the POS colour treatment: no fill, thin
           border, low-opacity ink. It is a diagnostic sitting next to learner
           content and must not read as part of it. */
        .phrase-source-pill {
            display: inline-block;
            margin-left: 5px;
            min-width: 16px;
            font-size: 11px;
            font-weight: 700;
            line-height: 14px;
            text-align: center;
            padding: 0 3px;
            border-radius: 4px;
            border: 1px solid currentColor;
            background: transparent;
            opacity: 0.55;
            vertical-align: 1px;
        }
        .phrase-source-wiktionary   { color: #9fb4d8; }  /* W — Wiktionary */
        .phrase-source-spanishdict  { color: #d8b48c; }  /* S — SpanishDict */
        .phrase-source-corpus       { color: #a8d29a; }  /* C — corpus / PMI */
        .phrase-source-curated      { color: #c9a3d8; }  /* K — curated family */
        .phrase-source-construction { color: #8fc6cd; }  /* T — construction template */
        .phrase-expression {
            font-family: var(--font-reading);
            font-size: 20px;
            font-weight: 700;
            line-height: 1.25;
            color: #fff;
        }
        .phrase-translation {
            font-family: var(--font-reading);
            font-size: 17px;
            font-weight: 500;
            line-height: 1.3;
            color: #e6eaf0;
        }
        .phrase-context {
            font-size: 13px;
            font-style: italic;
            color: #b9c2cd;
        }
        .phrase-example {
            width: 100%;
            margin-top: 4px;
            padding: 10px 12px 6px;
            background: #0d141c;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-left: 5px solid #14b8a6;
            border-radius: 10px;
        }
        /* ---- Attached-pronoun group (one block per base verb) -----------
           The header names the verb and says only "+ pronominal" — reflexive
           vs dative is not reliably known, so it must not be asserted. Each
           attached pronoun keeps its own translation, role detail and
           examples. Colour follows the CLITIC POS theme (.pos-clitic). */
        .clitic-group-title {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 6px;
        }
        .clitic-group-suffix {
            font-family: var(--font-data);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #fdba74;
        }
        .clitic-group-rows {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 2px;
        }
        .clitic-row {
            width: 100%;
            padding: 8px 0 8px 10px;
            border-left: 3px solid rgba(249, 115, 22, 0.55);
        }
        .clitic-row-head {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px;
        }
        .clitic-row-key {
            flex: 0 0 auto;
            font-family: var(--font-reading);
            font-size: 17px;
            font-weight: 700;
            color: #fdba74;
        }
        .clitic-row-translation {
            flex: 1 1 auto;
            min-width: 0;
            font-family: var(--font-reading);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.3;
            color: #fff;
        }
        .clitic-row-detail {
            margin-top: 2px;
            font-size: 12.5px;
            font-style: italic;
            line-height: 1.35;
            color: #b9c2cd;
        }
        .clitic-more-toggle {
            flex: 0 0 auto;
            padding: 2px 8px;
            border: 1px solid rgba(249, 115, 22, 0.5);
            border-radius: 999px;
            background: rgba(249, 115, 22, 0.12);
            color: #fdba74;
            font-family: var(--font-data);
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
        }
        .clitic-more-toggle:hover {
            background: rgba(249, 115, 22, 0.22);
        }
        .clitic-more[hidden] {
            display: none;
        }
        .clitic-example {
            border-left-color: #f97316;
        }
        .clitic-example + .clitic-example {
            margin-top: 6px;
        }
        .clitic-form-hit {
            color: #fdba74;
            font-weight: 700;
        }

        /* ---- "In the wild" sentence list (second chain child) ----------
           Collapsed rows are a plain reading list. Opening one grows it into
           the translation plus a gloss of the words the learner has not met
           yet, which is what the old "2 new" badge only counted. */
        .wild-scroll {
            gap: 8px;
            /* Keep the list's own scroll from chaining to the page behind the
               card once it hits an end. */
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .wild-row {
            display: block;
            width: 100%;
            /* Flex children shrink before their container overflows, so
               without this the rows squashed to fit and the list never
               scrolled. */
            flex: 0 0 auto;
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.045);
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: background 150ms ease, border-color 150ms ease,
                        padding 150ms ease;
        }
        .wild-row:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .wild-row.is-revealed {
            padding: 16px 16px 18px;
            border-color: rgba(var(--accent-phrases-rgb), 0.5);
            background: rgba(var(--accent-phrases-rgb), 0.09);
        }
        .wild-target {
            color: #fff;
            font-family: var(--font-reading);
            font-size: 17px;
            font-weight: 500;
            line-height: 1.35;
        }
        .wild-row.is-revealed .wild-target {
            font-size: 19px;
        }
        .wild-reveal[hidden] {
            display: none;
        }
        .wild-english {
            margin-top: 9px;
            padding-top: 9px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            color: #e6eaf0;
            font-size: 15px;
            font-style: italic;
            line-height: 1.35;
        }
        /* Only the words beyond the learner's position get a gloss; a sentence
           built entirely of known words shows nothing here. */
        /* One wrapping row rather than a stack: two or three unknown words
           read as a caption, not as a table. */
        .wild-new {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 3px 12px;
            margin-top: 7px;
            font-size: 14px;
            line-height: 1.3;
        }
        .wild-new-label {
            color: var(--text-muted);
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .wild-gloss-item {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
        }
        .wild-gloss-word {
            flex: 0 0 auto;
            color: #cdc3fb;
            font-family: var(--font-reading);
            font-weight: 650;
        }
        .wild-gloss-translation {
            min-width: 0;
            color: var(--text-muted);
        }

        .phrase-example-target {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.4;
            color: #fff;
        }
        .phrase-example-translation {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            font-size: 14px;
            line-height: 1.4;
            color: #e6eaf0;
        }

        .meaning-pos-section + .meaning-pos-section {
            margin-top: 6px;
        }

        /* Collapsible part-of-speech group. Only rendered when a card has more
           than one POS; a single-POS card keeps the plain section it always
           had, because a header and chevron around a two-line list is chrome
           with nothing to hide. */
        .pos-collapsible .pos-section-head {
            display: flex;
            align-items: center;
            gap: 7px;
            width: 100%;
            min-height: 38px;
            padding: 7px 10px;
            background: rgba(var(--sense-match-rgb), 0.10);
            border: none;
            border-left: 3px solid rgb(var(--sense-match-rgb));
            border-radius: 6px;
            cursor: pointer;
            text-align: left;
            font: inherit;
        }
        .pos-collapsible .pos-section-label {
            flex-shrink: 0;
            color: rgb(var(--sense-match-rgb));
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        /* The group summary is the primary scan layer. It contains as many
           complete sense glosses as actually fit; JS measures the row and
           replaces only genuine overflow with +N. */
        .pos-collapsible .pos-section-summary {
            display: flex;
            align-items: baseline;
            gap: 0;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            color: var(--text-primary);
            font-family: var(--font-reading);
            /* Its own size, not --row-primary-size: that variable is set per
               row by the content-aware tiers (.row-text-xl … -sm), so a header
               sitting outside those containers only ever got the 17px
               fallback while the rows it heads rendered at up to 22px. The
               parent line then read as the smallest thing in its own group.
               Fixed instead, since sub-row sizes vary with their content. */
            font-size: 19px;
            font-weight: 650;
            line-height: 1.2;
        }
        .pos-collapsible .pos-summary-sense {
            flex: 0 0 auto;
            min-width: 0;
        }
        .pos-collapsible .pos-summary-sense + .pos-summary-sense::before {
            content: " · ";
            color: var(--text-muted);
            font-weight: 500;
        }
        /* The headword, when it differs from the word on the card. Carried on
           the pill rather than as a row tag or a nested level: only 201 POS
           groups in the deck hold more than one headword, so the pair is one
           level, not two. */
        .pos-collapsible .pos-pill-lemma {
            flex-shrink: 0;
            color: color-mix(in srgb, rgb(var(--sense-match-rgb)) 58%, var(--text-primary));
            font-family: var(--font-emphasis);
            font-size: 15px;
            font-weight: 700;
        }
        /* How many further meanings sit behind this pill. Makes the expand
           affordance honest — one meaning shown is not the whole story. */
        .pos-collapsible .pos-pill-more {
            flex: 0 0 auto;
            margin-left: 7px;
            color: var(--text-muted);
            font-size: 12px;
            font-family: var(--font-mono, monospace);
            font-weight: 700;
        }
        .pos-collapsible .pos-pill-more[hidden],
        .pos-collapsible .pos-summary-sense[hidden] {
            display: none;
        }
        /* Absent, not zero, when nothing was observed. A pill reading 0% looks
           like a measurement; blank reads as no evidence yet, which is true. */
        .pos-collapsible .pos-pill-pct {
            flex-shrink: 0;
        }

        /* One percentage grammar at both levels: the group aggregate in the
           header and the individual evidence values in its expanded rows. */
        .sense-percentage {
            color: rgb(var(--sense-match-rgb));
            /* Ordinary text rather than the tabular data face: at 12px the
               heavier figures drew more attention than a supporting number
               deserves. Size still separates it. */
            font-size: 12px;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            white-space: nowrap;
        }

        .sense-prominence-badge {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 650;
            line-height: 1.2;
            min-width: 22px;
            min-height: 24px;
            padding: 2px 3px;
            border: 0;
            background: transparent;
            border-radius: 8px;
            color: inherit;
            cursor: pointer;
            pointer-events: auto;
            text-transform: none;
            letter-spacing: 0;
            white-space: nowrap;
            z-index: 3;
            -webkit-tap-highlight-color: transparent;
        }
        .sense-prominence-meter {
            display: inline-flex;
            align-items: flex-end;
            gap: 2px;
            height: 13px;
        }
        .sense-prominence-meter i {
            width: 3.5px;
            border-radius: 1px;
            background: currentColor;
            opacity: 0.28;
        }
        .sense-prominence-meter i:nth-child(1) { height: 5px; }
        .sense-prominence-meter i:nth-child(2) { height: 9px; }
        .sense-prominence-meter i:nth-child(3) { height: 13px; }
        .sense-prominence-meter i.is-on { opacity: 1; }
        .sense-prominence-detail {
            display: none;
            position: absolute;
            right: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
            background: rgba(15, 23, 42, 0.95);
            color: #f8fafc;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 6px;
            padding: 4px 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
            pointer-events: none;
            z-index: 100;
        }
        .sense-prominence-badge[aria-expanded="true"] {
            background: transparent;
            box-shadow: none;
            padding: 2px 3px;
        }
        .sense-prominence-badge[aria-expanded="true"] .sense-prominence-detail {
            display: block;
        }
        @media (max-width: 480px) {
            .meaning-row .meaning-row-body {
                padding-right: 28px !important;
                padding-left: 6px !important;
            }
        }
        .sense-prominence-badge.prominence-dominant {
            color: #38bdf8;
        }
        .sense-prominence-badge.prominence-common {
            color: #10b981;
        }
        .sense-prominence-badge.prominence-uncommon {
            color: #94a3b8;
        }
        .sense-prominence-badge.prominence-rare {
            color: #f59e0b;
        }

        .meaning-row.meaning-row-rare {
            animation: rareSenseRowFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        /* A sense already known stays on a part-known card, greyed, so the
           word is still shown whole without competing with what is being
           practised. */
        .meaning-row.meaning-row-known,
        .group-card-varying-cell.is-known-subsense {
            /* Beats the cycle row's inline opacity and the rare row's fade-in. */
            opacity: 0.45 !important;
            animation: none;
            filter: grayscale(1);
        }
        .known-sense-tag {
            display: inline-flex;
            align-items: center;
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 650;
            line-height: 1.2;
            color: var(--text-secondary);
            white-space: nowrap;
            pointer-events: none;
        }
        .group-card-varying-cell .known-sense-tag {
            margin-left: 6px;
        }
        @keyframes rareSenseRowFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-4px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .dictionary-provenance-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.01em;
        }
        .example-source-chip {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            text-decoration: none;
            line-height: 1;
            cursor: default;
        }
        .example-source-chip[data-href] {
            cursor: pointer;
        }
        .example-source-chip--icon {
            padding: 2px;
            border-radius: 6px;
        }
        .example-source-chip:hover,
        .example-source-chip:focus-visible,
        .example-source-chip.is-armed-outbound {
            color: var(--text-primary);
            outline: none;
        }
        .example-source-chip.is-armed-outbound {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 55%, transparent);
        }
        .example-source-favicon,
        .dictionary-provenance-badge .dict-provenance-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: block;
            flex: 0 0 auto;
        }
        .example-source-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-style: italic;
        }
        body.is-spotify-playing .sentence .example-word-highlight,
        body.is-speaking-active .sentence .example-word-highlight {
            animation: word-audio-pulse 1.25s ease-in-out infinite alternate;
            box-shadow: 0 0 12px rgba(var(--sense-match-rgb, 99, 102, 241), 0.6), inset 0 -3px 0 rgb(var(--sense-match-rgb, 99, 102, 241));
        }

        .pos-collapsible .pos-pill-unassigned {
            flex-shrink: 0;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .pos-collapsible .pos-pill-known {
            flex-shrink: 0;
            color: var(--success);
            font-size: 11px;
            font-weight: 700;
        }

        .pos-collapsible .pos-section-chevron {
            flex-shrink: 0;
            color: var(--text-muted);
            font-size: 11px;
        }
        .pos-collapsible .meaning-pos-rows {
            display: none;
        }
        .pos-collapsible.is-open .meaning-pos-rows {
            display: block;
            margin: 5px 0 2px 6px;
            padding-left: 6px;
            border-left: 1px solid rgba(var(--sense-match-rgb), 0.38);
        }

        /* A fixed grammar bay keeps one to four POS labels stable beside the
           headword. One or two labels form one centred row; three or four use
           two rows. Every alternative stays fully legible. */
        .back-pos-legend {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(30px, auto);
            align-items: center;
            justify-items: stretch;
            align-content: center;
            gap: 5px;
            margin: 0 0 0 auto;
            flex: 0 0 206px;
            width: 206px;
            min-height: 70px;
        }
        .back-pos-legend.pos-count-1 {
            grid-template-columns: auto;
            justify-content: center;
        }
        .back-pos-legend.pos-count-1 .card-pos {
            width: auto;
            min-width: 78px;
        }
        .back-pos-legend.pos-count-3 > :last-child {
            grid-column: 1 / -1;
            width: calc(50% - 2.5px);
            justify-self: center;
        }

        /* Word + its single POS pill share the top line (.back-headword-row,
           inline with the word). This block holds what comes underneath:
           the lemma/citation on its own line, then verb morphology. */
        .back-grammar-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            margin: 3px 0 2px;
        }
        .back-lemma-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px 8px;
            width: 100%;
            line-height: 1.15;
        }
        .back-pos-legend .card-pos,
        .back-pos-unit .card-pos {
            margin: 0;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            justify-content: center;
            width: 100%;
            padding: 7px 9px;
            min-width: 0;
            white-space: nowrap;
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            text-transform: none;
            background: rgba(255, 255, 255, 0.055);
            border-color: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            cursor: pointer;
        }
        /* Non-interactive pills (no verb morphology to toggle) shouldn't
           look pressable. */
        .back-pos-legend span.card-pos {
            cursor: default;
        }
        .back-pos-legend .card-pos.has-morph-toggle {
            cursor: pointer;
        }
        .back-pos-legend .back-pos-tab {
            opacity: 0.76;
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.035);
            transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease;
        }
        .back-pos-legend .back-pos-tab.selected {
            opacity: 1;
            background: color-mix(in srgb, currentColor 23%, transparent);
            border-color: color-mix(in srgb, currentColor 68%, transparent);
            box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), 0 3px 10px rgba(0, 0, 0, 0.22);
        }
        .card-pos-list .front-pos-unit.is-inactive {
            opacity: 0.66;
        }
        .card-pos-list .front-pos-unit.is-active {
            opacity: 1;
        }
        .back-pos-dot {
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 5px currentColor;
        }

        .meaning-pos-rows > .meaning-row:last-child {
            margin-bottom: 0 !important;
        }

        .meaning-pos-section .meaning-row {
            min-height: 48px;
            /* The same tint as the POS header above and the active row below.
               This was an opaque #1b232e, which — with the header at 0.10 and
               the active row at its own shade — meant an unselected sub-row
               read as a third kind of element rather than a sibling of the
               two. The border is what distinguishes active from inactive. */
            background: rgba(var(--sense-match-rgb), 0.10) !important;
            border: 1px solid rgba(255, 255, 255, 0.16);
            transition: background 160ms ease, border-color 160ms ease,
                        box-shadow 160ms ease, transform 160ms ease;
            /* Reserve the 18px check-glyph slot uniformly regardless of each
               row variant's own inline padding shorthand. */
            padding-left: 30px !important;
        }
        .meaning-row-check {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            flex: 0 0 18px;
            z-index: 1;
        }

        .meaning-row.is-current-sense {
            /* Same flat fill as every other row and as the POS header above
               them. There used to be three different fills — 0.10 on the
               header, 0.08 unselected, 0.18 selected — so an unselected
               sub-row read as a third kind of thing rather than a sibling.
               The 2px outline below is what marks the active row. */
            background: rgba(var(--sense-match-rgb), 0.10) !important;
            border: 2px solid rgb(var(--sense-match-rgb));
            box-shadow: none;
            transform: none;
            opacity: 1 !important;
        }

        /* Zero top margin on the sentence so the only gap between the
           last sense/MWE and the example box is the row's own
           margin-bottom (6px) — matching sense-to-sense spacing, as
           requested. */
        #backContent > .sentence,
        .card-replica .card-details > .sentence {
            flex: 0 0 auto;
            width: 100%;
            margin-top: 0;
        }

        /* `margin-bottom: auto` pairs with `.meanings-scroll`'s
           `margin-top: auto` to centre the whole (meanings + tray +
           sentence + links) block vertically in the space below the
           header. Explicit margin-top: 4px sits inside the block
           itself — it's the gap between the example sentence and the
           links row, not a grow-to-fill hack. */
        /* Pinned to the bottom of the card at all times — the auto top
           margin absorbs whatever slack is left above it, instead of the
           row's position drifting with how tall the example sentence is. */
        #backContent > .links-section,
        .card-replica .card-details > .links-section {
            flex: 0 0 auto;
            margin-top: auto;
            margin-bottom: 0;
            padding-top: 6px;
        }

        .mwe-expression {
            max-width: 100%;
            min-width: 0;
            color: white;
            font-family: var(--font-reading);
            font-size: var(--row-primary-size, 17px);
            font-style: normal;
            font-weight: 700;
            line-height: 1.2;
            text-align: center;
            overflow-wrap: anywhere;
        }

        .special-meaning-copy {
            display: flex;
            flex: 1;
            min-width: 0;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 2px 8px;
            padding-inline: 8px;
            text-align: center;
            line-height: 1.2;
        }

        /* Source expression above English meaning gives the two languages a
           stable visual hierarchy without hard-coding a particular language. */
        .special-meaning-copy.bilingual-meaning-copy {
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 4px;
        }

        .bilingual-meaning-copy .mwe-translation {
            display: block;
            align-self: stretch;
            padding-top: 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            text-align: center;
        }

        .special-meaning-copy.has-counter {
            padding-right: 46px;
        }

        .special-meaning-copy strong {
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: var(--row-secondary-size, 15px);
            font-style: italic;
            font-weight: 550;
            /* Same italic overhang reservation as .meaning-context. */
            padding-inline-end: 0.16em;
        }

        /* `.card-details strong` appears later in this stylesheet and uses
           the active app accent. Keep bilingual row translations white with
           a deliberately stronger selector so artist themes cannot turn the
           English MWE/clitic copy red. */
        .card-details .special-meaning-copy strong {
            color: #fff;
        }

        .special-meaning-copy small {
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: var(--row-context-size, 12px);
            font-style: italic;
            font-weight: 500;
            line-height: 1.25;
            /* Same italic overhang reservation as .meaning-context. */
            padding-inline-end: 0.16em;
        }

        /* Content-aware typography: short rows fill the available card width
           confidently, while long rows step down before wrapping/clamping. */
        .row-text-xl {
            --row-primary-size: 21px;
            --row-secondary-size: 18px;
            --row-context-size: 17px;
        }

        .row-text-lg {
            --row-primary-size: 19px;
            --row-secondary-size: 17px;
            --row-context-size: 15px;
        }

        .row-text-md {
            --row-primary-size: 17px;
            --row-secondary-size: 15px;
            --row-context-size: 14px;
        }

        .row-text-sm {
            --row-primary-size: 15px;
            --row-secondary-size: 15px;
            --row-context-size: 14px;
        }

        .row-adaptive-text {
            font-size: var(--row-primary-size, 17px);
        }

        /* The ordinary dictionary senses are the card's primary reading
           content. Give them one extra step without enlarging the denser
           bilingual Expression/clitic rows that use the same type scale. */
        .meaning-row-regular .row-adaptive-text,
        .meaning-row-group .row-adaptive-text {
            font-size: calc(var(--row-primary-size, 17px) + 1px);
        }

        .meaning-row-mwe > .example-counter-group,
        .meaning-row-clitic > .example-counter-group {
            position: absolute;
            right: 7px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Regular-row translation: let the row grow naturally with the
           translation, but clamp at 3 lines with an ellipsis so very long
           glosses don't push everything else around. A post-render pass in
           updateCard() flags rows that actually overflow (`.is-clamped`) so
           the tap-to-expand affordance only appears where content is hidden;
           `.is-expanded` is set when the user taps to reveal the rest. */
        .meaning-row-translation {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
            overflow-wrap: anywhere;
            word-break: break-word;
            max-width: 100%;
        }

        .meaning-row-gloss {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.25;
            min-width: 0;
            text-align: center;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .meaning-row.is-current-sense .meaning-row-gloss {
            font-weight: 700;
            color: #ffffff;
        }
        .meaning-row-sub {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;
            font-size: 12px;
            font-weight: 400;
            color: var(--text-secondary);
            line-height: 1.25;
            margin-top: 2px;
            min-width: 0;
            text-align: center;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .meaning-row.is-current-sense .meaning-row-sub {
            color: var(--text-primary);
        }

        .sense-cross-reference {
            appearance: none;
            border: 0;
            border-bottom: 1px solid currentColor;
            border-radius: 0;
            padding: 0;
            background: transparent;
            color: rgb(var(--sense-match-rgb));
            font: inherit;
            font-weight: 650;
            line-height: inherit;
            cursor: pointer;
        }

        .sense-cross-reference:hover,
        .sense-cross-reference:focus-visible {
            color: var(--text-primary);
            border-bottom-color: rgb(var(--sense-match-rgb));
        }

        .sense-cross-reference:focus-visible {
            outline: 2px solid rgb(var(--sense-match-rgb));
            outline-offset: 3px;
        }

        .sense-cross-reference-prefix,
        .sense-cross-reference-separator {
            opacity: 0.72;
        }

        .sense-cross-reference-gloss {
            display: block;
        }

        .sense-cross-reference-related {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 3px 10px;
            width: 100%;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 550;
            line-height: 1.35;
        }

        .sense-cross-reference-item {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
            white-space: nowrap;
        }

        .sense-cross-reference-related .sense-cross-reference {
            color: rgb(var(--sense-match-rgb));
            font-weight: 700;
        }

        .sense-metadata-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2px;
            width: 100%;
            margin-top: 3px;
            color: var(--text-secondary);
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.3;
        }

        .sense-metadata-tier {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .sense-metadata-tier[hidden] {
            display: none;
        }

        .sense-metadata-tier--primary {
            gap: 4px 6px;
            margin-top: 2px;
        }

        .sense-pill {
            display: inline-flex;
            align-items: center;
            gap: 3.5px;
            border-radius: 999px;
            padding: 2px 8px;
            /* Legibility floor. Metadata below ~11px in a muted colour is
               decoration, not information — 'indicating time' on *en* was
               unreadable at 9px. Density may tighten padding; it may not take
               the type below this. */
            font-size: 11px;
            line-height: 1.35;
            font-weight: 600;
            white-space: nowrap;
            letter-spacing: 0.01em;
            box-sizing: border-box;
            max-width: 100%;
            transition: background-color 0.15s ease, border-color 0.15s ease;
        }

        .sense-pill-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 10px;
            height: 10px;
        }

        .sense-pill-label {
            display: inline-block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Suppress middot between pill badges */
        .sense-pill + .sense-pill::before {
            display: none !important;
        }

        /* Privileged companion: readable "used with" + the collocate */
        .sense-pill--companion {
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.42);
            color: color-mix(in srgb, #10b981 90%, var(--text-primary));
            font-weight: 700;
            box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
            gap: 0.15em;
        }

        .sense-pill--companion .sense-pill-prefix {
            font-weight: 600;
            opacity: 0.72;
            letter-spacing: 0.01em;
        }

        .sense-pill--companion .sense-pill-token {
            font-weight: 800;
            font-style: italic;
        }

        .sense-pill--companion:hover {
            background: rgba(16, 185, 129, 0.18);
            border-color: rgba(16, 185, 129, 0.6);
        }

        /* Prominent target collocation pill in the sense row (e.g. 'tener que', 'gostar de') */
        .sense-target-collocation {
            display: inline-flex;
            align-items: baseline;
            gap: 0.28em;
            padding: 1px 7px;
            border-radius: 6px;
            background: rgba(16, 185, 129, 0.16);
            border: 1px solid rgba(16, 185, 129, 0.45);
            color: color-mix(in srgb, #10b981 92%, var(--text-primary));
            font-size: 0.88em;
            line-height: 1.3;
            vertical-align: middle;
            margin-right: 4px;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(16, 185, 129, 0.10);
        }

        .sense-target-collocation.is-optional {
            background: rgba(16, 185, 129, 0.10);
            border-style: dashed;
            opacity: 0.92;
        }

        .sense-target-collocation .sense-collocation-target {
            font-weight: 750;
            letter-spacing: -0.01em;
        }

        .sense-target-collocation .sense-collocation-particle {
            font-weight: 800;
            font-style: italic;
        }

        .sense-target-collocation .sense-collocation-qualifier {
            font-size: 0.82em;
            font-weight: 500;
            font-style: normal;
            opacity: 0.78;
        }

        /* Syntactic Frame / Complement badge */
        .sense-pill--construction,
        .sense-pill--syntax {
            background: rgba(99, 102, 241, 0.10);
            border: 1px solid rgba(99, 102, 241, 0.32);
            color: color-mix(in srgb, #818cf8 88%, var(--text-primary));
            font-weight: 650;
        }

        .sense-pill--construction:hover,
        .sense-pill--syntax:hover {
            background: rgba(99, 102, 241, 0.16);
            border-color: rgba(99, 102, 241, 0.48);
        }

        /* Register (region & formality) badge */
        .sense-pill--register {
            background: rgba(245, 158, 11, 0.09);
            border: 1px solid rgba(245, 158, 11, 0.30);
            color: color-mix(in srgb, #d97706 84%, var(--text-primary));
            font-weight: 600;
        }

        .sense-pill--register:hover {
            background: rgba(245, 158, 11, 0.15);
            border-color: rgba(245, 158, 11, 0.45);
        }

        /* Domain / Subject topic badge */
        .sense-pill--domain {
            background: rgba(59, 130, 246, 0.09);
            border: 1px solid rgba(59, 130, 246, 0.30);
            color: color-mix(in srgb, #2563eb 84%, var(--text-primary));
            font-weight: 600;
        }

        .sense-pill--domain:hover {
            background: rgba(59, 130, 246, 0.15);
            border-color: rgba(59, 130, 246, 0.45);
        }

        /* Functional / Semantic relation badge (purpose, material, origin, direction...) */
        .sense-pill--functional {
            background: rgba(139, 92, 246, 0.09);
            border: 1px solid rgba(139, 92, 246, 0.30);
            color: color-mix(in srgb, #7c3aed 84%, var(--text-primary));
            font-weight: 600;
        }

        .sense-pill--functional:hover {
            background: rgba(139, 92, 246, 0.15);
            border-color: rgba(139, 92, 246, 0.45);
        }

        /* Adaptive density when card has 3+ or 5+ sense rows */
        .sense-metadata-list.is-dense {
            margin-top: 2px;
            gap: 1px;
        }

        .sense-metadata-list.is-dense .sense-metadata-tier--primary {
            gap: 2.5px 4.5px;
            margin-top: 1px;
        }

        .sense-metadata-list.is-dense .sense-pill {
            padding: 1.5px 6.5px;
            font-size: 11px;
            gap: 3px;
        }

        .sense-metadata-list.is-dense .sense-pill-icon {
            width: 9px;
            height: 9px;
        }

        .sense-metadata-list.is-very-dense .sense-pill {
            padding: 1px 5.5px;
            font-size: 11px;
        }

        .sense-metadata-tier--grammar {
            margin-top: 1px;
            /* Was --text-muted at 9px: the quietest text in the app at the
               smallest size in the app. Same hierarchy, readable contrast. */
            color: color-mix(in srgb, var(--text-muted) 55%, var(--text-primary));
            font-size: 11px;
            font-weight: 550;
        }

        .sense-metadata-tier--details {
            justify-content: center;
            gap: 2px 0;
            margin-top: 4px;
            font-size: 11px;
            font-weight: 500;
            text-align: center;
            line-height: 1.45;
        }

        .sense-metadata-tier--details .sense-metadata-detail {
            width: auto;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .sense-metadata-tier--details.is-single {
            margin-top: 2px;
        }

        .sense-metadata-tier-label {
            margin-right: 6px;
            opacity: 0.58;
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .sense-metadata-detail + .sense-metadata-detail::before {
            content: '·';
            margin: 0 5px;
            opacity: 0.5;
        }

        .sense-metadata-detail[data-family="register"] {
            color: color-mix(in srgb, #d97706 78%, var(--text-primary));
        }

        .sense-metadata-detail[data-family="domain"] {
            color: color-mix(in srgb, #2563eb 72%, var(--text-primary));
        }

        .sense-note-trigger {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            min-width: 22px;
            height: 22px;
            min-height: 22px;
            border: 1px solid rgba(var(--sense-match-rgb), 0.46);
            border-radius: 50%;
            padding: 0;
            background: rgba(var(--sense-match-rgb), 0.09);
            color: rgb(var(--sense-match-rgb));
            font: 700 12px/1 var(--font-data);
            font-style: normal;
            margin: 0;
            cursor: pointer;
        }

        .sense-note-trigger:hover {
            background: rgba(var(--sense-match-rgb), 0.17);
        }

        .sense-note-trigger:focus-visible {
            outline: 2px solid rgb(var(--sense-match-rgb));
            outline-offset: 2px;
        }

        .sense-metadata-chip {
            appearance: none;
            border: 1px solid rgba(var(--sense-match-rgb), 0.38);
            border-radius: 999px;
            padding: 1px 5px;
            background: rgba(var(--sense-match-rgb), 0.09);
            color: var(--text-secondary);
            font: inherit;
            font-size: 11px;
            font-style: normal;
            font-weight: 650;
            line-height: 1.25;
            white-space: normal;
        }

        button.sense-metadata-chip {
            cursor: pointer;
        }

        button.sense-metadata-chip::after {
            content: '›';
            display: inline-block;
            margin-left: 3px;
            opacity: 0.65;
        }

        button.sense-metadata-chip[aria-expanded="true"]::after {
            transform: rotate(90deg);
        }

        .sense-metadata-chip[data-family="register"] {
            border-color: rgba(245, 158, 11, 0.42);
            background: rgba(245, 158, 11, 0.09);
        }

        .sense-metadata-chip[data-family="domain"] {
            border-color: rgba(96, 165, 250, 0.4);
            background: rgba(96, 165, 250, 0.08);
        }

        .meaning-row .meaning-context {
            font-size: var(--row-context-size, 13px);
        }

        .meaning-row-translation.is-clamped {
            cursor: pointer;
        }

        .meaning-row-translation.is-expanded {
            display: block;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            overflow: visible;
        }

        /* The selected subsense is the disclosure destination: always let it
           grow to reveal its complete gloss and metadata without a second
           tap on an ellipsis or an abbreviated pill. */
        .meaning-row.is-current-sense .meaning-row-translation {
            display: block;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            overflow: visible;
        }
        .meaning-row.is-current-sense .sense-metadata-list {
            max-width: 100%;
        }
        .meaning-row.is-current-sense .sense-metadata-detail {
            overflow-wrap: anywhere;
        }

        /* Inactive sub-senses are compact navigation choices. The selected
           one remains uncapped and grows to show its complete dictionary
           detail, so density never makes information inaccessible. */
        .group-card-varying-cell:not(.is-active-subsense) > .row-adaptive-text,
        .group-card-varying-cell:not(.is-active-subsense) > .meaning-context-cell {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }

        .meaning-row-regular:not(.is-current-sense) .meaning-row-translation {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }

        /* Selection elevation is coloured by the surrounding POS section in
           `.meaning-row.is-current-sense`; this legacy class only preserves
           stacking for callers and older cached markup. */
        .meaning-row.selected {
            position: relative;
            z-index: 1;
        }

        /* Inline context: smaller, dimmer, flows on the same line as the
           translation. A leading "·" separates it from the translation. If
           the context is long we truncate at a word boundary and show a
           clickable "…" that expands the full text. */
        .meaning-context {
            font-size: 13px;
            font-weight: 400;
            /* Was dimmed to 0.6 and italic, which made it the hardest text on
               the card to read. The leading separator dot and the smaller size
               already mark it as secondary. */
            opacity: 1;
            font-style: normal;
            /* Italic glyphs lean past their advance width, but every box that
               clips this text is measured from that advance width: the 3-line
               `-webkit-box` clamp on .meaning-row-translation (overflow:hidden),
               the sub-sense cells' own overflow:hidden, and the max-content
               grid tracks they sit in. The result was a ~2-3px shave off the
               last italic character on the right edge. Reserving a sliver of
               trailing inline space puts the overhang inside every one of
               those boxes. Inline padding, so no row height changes. */
            padding-inline-end: 0.16em;
        }

        .meaning-context .ctx-expand {
            cursor: pointer;
            margin-left: 1px;
            padding: 0 2px;
            opacity: 0.9;
        }

        .meaning-context .ctx-expand:hover {
            opacity: 1;
        }

        /* SpanishDict sense metadata, separated from ordinary semantic
           context so a construction such as `used with "con"` reads as a
           usable language hint rather than another fragment of the gloss. */
        .meaning-usage-pill {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            margin-inline-start: 0.28em;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 42%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-secondary) 11%, transparent);
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: 11px;
            font-style: normal;
            font-weight: 650;
            line-height: 1.25;
            vertical-align: 0.08em;
            overflow: hidden;
        }

        .meaning-usage-source {
            align-self: stretch;
            display: inline-flex;
            align-items: center;
            padding: 1px 5px;
            border-inline-end: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, transparent);
            color: var(--accent-secondary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.025em;
            white-space: nowrap;
        }

        .meaning-usage-label {
            min-width: 0;
            padding: 1px 6px;
            overflow-wrap: anywhere;
        }

        .meaning-context-cell .meaning-usage-pill,
        .group-card-shared .meaning-usage-pill {
            margin-block: 1px;
        }

        /* Register/dialect tag on a sense row (slang, vulgar, regional…).
           Deliberately quieter than the translation and not POS-coloured: it
           qualifies how a word is used, it does not compete with the meaning
           itself or with the POS legend above the rows. */
        .meaning-register {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: lowercase;
            vertical-align: middle;
            padding: 1px 6px;
            margin-left: 5px;
            border-radius: 999px;
            opacity: 0.75;
            color: var(--text-primary);
            background: rgba(127, 127, 127, 0.16);
            border: 1px solid rgba(127, 127, 127, 0.22);
            white-space: nowrap;
        }

        /* Vulgar is the one tag a learner benefits from noticing before they
           use the word in the wrong room; give it a warning tint. */
        .meaning-register[data-register="vulgar"] {
            background: rgba(220, 70, 70, 0.16);
            border-color: rgba(220, 70, 70, 0.3);
        }

        .card-word {
            font-family: var(--font-emphasis);
            /* Headword baseline, front face. shrinkToFit() below still steps
               long prompts down to one line, so raising the ceiling only
               affects words that already had room to spare. */
            font-size: 70px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #fff;
            text-align: center;
            /* updateCard measures the available width and shrinks long prompts
               to one line. Keep wrapping disabled so the result cannot fall
               back to an awkward two-line word after measurement. */
            width: 100%;
            max-width: 100%;
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: normal;
            line-height: 1.1;
        }

        .card-lemma {
            font-family: var(--font-reading);
            font-size: 35px;
            color: color-mix(in srgb, rgb(var(--card-pos-rgb, var(--accent-primary-rgb))) 64%, var(--text-primary));
            text-align: center;
            margin-bottom: 10px;
            font-weight: 500;
            opacity: 1;
        }

        /* Reserved, invisible copy of the lemma line. Cards whose senses
           disagree about the citation form used to show the line for one
           sense and hide it for the next, which shunted the surface form up
           and down as the learner clicked through — indistinguishable from a
           rendering bug. The slot is held open for the whole card instead, so
           only the lemma appears and disappears, never the word above it. */
        .card-lemma.is-reserved {
            visibility: hidden;
            pointer-events: none;
        }

        .card-lemma.has-form-note {
            display: flex !important;
            align-items: baseline;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: 7px;
        }

        .card-lemma.has-form-note::after {
            content: "· " attr(data-form-note);
            font-family: var(--font-reading);
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.01em;
            color: var(--text-muted);
        }

        .card-meanings-front {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
        }

        .front-meaning-row {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            max-width: 100%;
        }

        .front-meaning-text {
            font-family: var(--font-emphasis);
            font-weight: 600;
            color: white;
            text-align: center;
        }

        .surface-relation-cue {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: fit-content;
            max-width: 100%;
            padding: 3px 10px;
            border: 1px solid rgba(var(--card-pos-rgb), 0.28);
            border-radius: 999px;
            background: rgba(var(--card-pos-rgb), 0.1);
            color: color-mix(in srgb, rgb(var(--card-pos-rgb)) 52%, white);
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 650;
            line-height: 1.2;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .surface-relation-cue[hidden] {
            display: none;
        }

        .front-surface-relation {
            margin: -2px auto 10px;
        }

        .split-card-note {
            display: inline-block;
            margin: -2px auto 10px;
            font-size: 13px;
            color: var(--text-muted);
            letter-spacing: 0.1px;
            font-family: var(--font-reading);
        }

        .front-lemma-from {
            color: var(--text-muted);
            font-size: 0.85em;
            font-weight: 500;
            font-family: var(--font-reading);
            margin-right: 2px;
        }

        .front-lemma-pair.is-companion-split {
            opacity: 0.3;
            filter: grayscale(100%);
        }

        .grammar-pair-chips {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .grammar-pair-chip {
            pointer-events: auto;
            padding: 2px 9px;
            border: 1px solid rgba(var(--card-pos-rgb), 0.28);
            border-radius: 999px;
            background: rgba(var(--card-pos-rgb), 0.1);
            color: inherit;
            font: inherit;
            cursor: pointer;
        }

        .grammar-pair-plus {
            opacity: 0.65;
        }

        .back-surface-relation {
            margin-top: 4px;
        }

        .front-meaning-pos {
            font-family: var(--font-data);
            font-size: 11px;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
            color: white;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* The front uses the same fixed top-right grammar bay as the back.
           Its contents are centred within that bay and can use a 2 x 2 grid
           without changing position or obscuring one label with another. */
        .card-front .card-pos-list,
        .card-pos-list {
            position: absolute;
            top: 30px;
            right: 30px;
            transform: none;
            z-index: 4;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(30px, auto);
            place-content: center;
            align-items: center;
            gap: 5px;
            width: 206px;
            min-height: 70px;
            margin-bottom: 0;
        }
        /* Centred across the top rather than pinned to the right corner. The
           corner placement is what made fitBackHeadword cap the headword
           against the legend's width; centred, the pills sit above the word
           instead of beside it and the word keeps the full card. */
        .card-front .card-pos-list,
        .card-pos-list {
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            justify-content: center;
            justify-items: center;
        }
        @media (max-width: 767px) {
            .card-front .card-pos-list,
            .card-pos-list { left: 50%; right: auto; transform: translateX(-50%); }
        }
        .card-pos-list.pos-count-1 {
            grid-template-columns: auto;
            justify-content: center;
        }
        .card-pos-list.pos-count-1 .card-pos {
            width: auto;
            min-width: 78px;
        }
        .card-pos-list.pos-count-3 > :last-child {
            grid-column: 1 / -1;
            width: calc(50% - 2.5px);
            justify-self: center;
        }
        @media (max-width: 767px) {
            .card-pos-list {
                top: 18px;
                left: 0;
                right: 0;
                width: auto;
                min-height: 0;
                padding: 0 14px;
            }
            .back-pos-legend {
                flex-basis: auto;
                width: auto;
                min-height: 0;
            }
            .card-pos-list .card-pos,
            .back-pos-legend .card-pos,
            .back-pos-unit .card-pos {
                padding-inline: 7px;
            }
        }
        /* Child cards used to push the POS pills down 62px to clear the exit
           disc in this corner. That control now lives in the top bar, so the
           corner is free and every card keeps the same pill position. */
        .card-pos-list .card-pos {
            margin-bottom: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            white-space: nowrap;
            padding: 7px 9px;
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 14%, transparent);
            border-color: color-mix(in srgb, currentColor 38%, transparent);
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 650;
            line-height: 1;
            text-transform: none;
        }
        .card-pos-list .card-pos.has-morph-toggle {
            cursor: pointer;
        }
        @media (max-width: 767px) {
            .card-pos-list .card-pos,
            .back-pos-legend .card-pos,
            .back-pos-unit .card-pos {
                font-size: 12.5px;
            }
        }


        .front-pos-unit .front-meaning-pos {
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 14%, transparent);
            border-color: color-mix(in srgb, currentColor 38%, transparent);
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 650;
            text-transform: none;
        }

        .front-pos-unit {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            position: relative;
        }

        /* Recognition keeps morphology in the verb-pill popover. Production
           additionally uses this compact coupled strip beneath the English
           senses, so person and tense are visible before the learner answers. */
        .card-morph {
            display: none;
        }
        .card-morph.front-morph-visible {
            display: flex !important;
            max-width: min(100%, 520px);
            margin: 4px auto 0;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 6px 8px;
            color: #66e4cc;
        }
        .front-morph-title {
            color: var(--text-muted);
            font: 650 11px/1 var(--font-data);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .front-morph-analyses {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
        }
        .front-morph-analysis {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
            padding: 5px 9px;
            border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 10%, transparent);
            color: var(--text-secondary);
            font: 550 12px/1.15 var(--font-reading);
            white-space: nowrap;
        }
        .front-morph-analysis strong {
            color: #fff;
            font-weight: 700;
        }

        /* Optional production context stays outside #flipBtn, so revealing or
           scrolling the fixed cloze does not flip the card. */
        .front-production-hint {
            position: absolute;
            left: 50%;
            bottom: 46px;
            z-index: 5;
            width: min(86%, 620px);
            transform: translateX(-50%);
            text-align: center;
        }
        .front-production-hint[hidden] {
            display: none;
        }
        .front-production-hint-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-secondary);
            font: 650 11px/1 var(--font-reading);
            cursor: pointer;
        }
        .front-production-hint-toggle.is-open {
            border-color: rgba(var(--card-pos-rgb), 0.44);
            background: rgba(var(--card-pos-rgb), 0.12);
            color: var(--text-primary);
        }
        .front-production-hint-icon {
            color: rgb(var(--card-pos-rgb));
            font-size: 15px;
            line-height: 0.8;
        }
        .front-production-cloze {
            max-height: 96px;
            margin-top: 7px;
            padding: 9px 12px;
            overflow-y: auto;
            border: 1px solid rgba(var(--card-pos-rgb), 0.3);
            border-radius: 12px;
            background: rgba(13, 18, 25, 0.94);
            color: var(--text-primary);
            font: 550 16px/1.35 var(--font-reading);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
        }
        .front-production-cloze[hidden] {
            display: none;
        }
        .production-cloze-blank {
            display: inline-block;
            min-width: 4.5em;
            margin-inline: 0.18em;
            border-bottom: 2px solid rgb(var(--card-pos-rgb));
            color: transparent;
            line-height: 0.95;
        }
        .morph-popover {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            z-index: 30;
            min-width: max-content;
            max-width: 288px;
            padding: 10px 12px;
            background: #1b232e;
            border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
            text-align: left;
            animation: morph-popover-in 140ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .morph-popover[hidden] {
            display: none;
        }
        .morph-pop-title {
            margin-bottom: 7px;
            color: var(--text-muted);
            font: 650 11px/1 var(--font-data);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .morph-pop-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* One row = one complete analysis. The subject chip and the tense it
           belongs to are bound inside a single bordered row, so two competing
           readings can never be misread as four independent pills. */
        .morph-pop-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px;
            padding: 5px 7px;
            border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
            border-radius: 10px;
            background: color-mix(in srgb, currentColor 7%, transparent);
        }
        .morph-pop-row.is-primary {
            border-color: color-mix(in srgb, currentColor 48%, transparent);
            background: color-mix(in srgb, currentColor 13%, transparent);
        }
        .morph-pop-subject {
            flex: 0 0 auto;
            padding: 4px 9px;
            border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 18%, transparent);
            color: #fff;
            font: 600 13px/1 var(--font-reading);
            white-space: nowrap;
        }
        .morph-pop-subject.is-empty {
            opacity: 0.45;
        }
        .morph-pop-form {
            flex: 1 1 auto;
            color: #fff;
            font: 500 13px/1.2 var(--font-reading);
        }
        /* The preferred reading stays first and undimmed; the rest live behind
           this "+" instead of competing with it. */
        .morph-pop-more {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            margin-top: 7px;
            padding: 6px 8px;
            border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
            border-radius: 10px;
            background: transparent;
            color: var(--text-muted);
            font: 600 11px/1 var(--font-data);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
        }
        .morph-pop-more-sign {
            font: 700 14px/1 var(--font-data);
            color: #fff;
        }
        .morph-pop-more.is-open {
            border-style: solid;
        }
        .morph-pop-alts {
            margin-top: 6px;
        }
        .morph-pop-alts[hidden] {
            display: none;
        }
        @keyframes morph-popover-in {
            from { opacity: 0; transform: translateY(-6px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .morph-popover { animation: none; }
        }
        /* Verb accent, inherited by the popover border/tokens via currentColor. */
        .front-pos-unit,
        .back-pos-unit {
            position: relative;
            display: inline-flex;
            align-items: center;
            color: #66e4cc;
        }

        .card-pos {
            font-family: var(--font-data);
            font-size: 12px;
            color: white;
            text-align: center;
            margin-bottom: 12px;
            text-transform: uppercase;
            padding: 6px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            display: inline-block;
        }

        /* Part of speech colours. Data aliases (for example ADJ/ADJECTIVE)
           intentionally share a semantic theme; genuinely different POS and
           special row types each receive their own accent. */
        .pos-noun { background: rgba(74, 158, 255, 0.45); border-color: rgba(74, 158, 255, 0.6); color: #8fc2ff; }
        .pos-propn { background: rgba(14, 165, 233, 0.45); border-color: rgba(14, 165, 233, 0.6); color: #7dd3fc; }
        .pos-verb { background: rgba(0, 212, 170, 0.45); border-color: rgba(0, 212, 170, 0.6); color: #66e4cc; }
        .pos-aux { background: rgba(45, 212, 191, 0.45); border-color: rgba(45, 212, 191, 0.6); color: #87eee0; }
        .pos-adj { background: rgba(245, 166, 35, 0.45); border-color: rgba(245, 166, 35, 0.6); color: #f9c96e; }
        .pos-adv { background: rgba(168, 85, 247, 0.45); border-color: rgba(168, 85, 247, 0.6); color: #c9a0f9; }
        .pos-prep { background: rgba(236, 72, 153, 0.45); border-color: rgba(236, 72, 153, 0.6); color: #f291be; }
        .pos-conj { background: rgba(20, 184, 166, 0.45); border-color: rgba(20, 184, 166, 0.6); color: #6dd4c8; }
        .pos-cconj { background: rgba(34, 197, 94, 0.45); border-color: rgba(34, 197, 94, 0.6); color: #86efac; }
        .pos-sconj { background: rgba(132, 204, 22, 0.45); border-color: rgba(132, 204, 22, 0.6); color: #bef264; }
        .pos-pron { background: rgba(99, 102, 241, 0.45); border-color: rgba(99, 102, 241, 0.6); color: #9b9df6; }
        .pos-det { background: rgba(244, 63, 94, 0.45); border-color: rgba(244, 63, 94, 0.6); color: #f88da5; }
        .pos-int { background: rgba(234, 179, 8, 0.45); border-color: rgba(234, 179, 8, 0.6); color: #f2d166; }
        .pos-num { background: rgba(6, 182, 212, 0.45); border-color: rgba(6, 182, 212, 0.6); color: #66d4e6; }
        .pos-mwe { background: rgba(251, 191, 36, 0.45); border-color: rgba(251, 191, 36, 0.6); color: #fcd57a; }
        .pos-clitic { background: rgba(249, 115, 22, 0.45); border-color: rgba(249, 115, 22, 0.6); color: #fdba74; }
        .pos-part { background: rgba(192, 132, 252, 0.45); border-color: rgba(192, 132, 252, 0.6); color: #d8b4fe; }
        .pos-prefix { background: rgba(163, 230, 53, 0.45); border-color: rgba(163, 230, 53, 0.6); color: #d9f99d; }
        .pos-suffix { background: rgba(74, 222, 128, 0.45); border-color: rgba(74, 222, 128, 0.6); color: #a7f3d0; }
        .pos-contraction { background: rgba(248, 113, 113, 0.45); border-color: rgba(248, 113, 113, 0.6); color: #fecaca; }
        .pos-other { background: rgba(148, 163, 184, 0.45); border-color: rgba(148, 163, 184, 0.6); color: #cbd5e1; }


        /* POS info popover — shown when the POS pill on a sense row is
           tapped. The backdrop dismisses it while the popover remains a
           stable scroll surface. The popover inherits its accent colour from
           the same .pos-* class the pill carries. */
        .pos-info-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
            cursor: pointer;
            overscroll-behavior: contain;
            animation: posInfoFadeIn 0.15s ease-out;
        }

        @keyframes posInfoFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .pos-info-popover {
            position: relative;
            max-width: 360px;
            width: 100%;
            max-height: min(680px, calc(calc(100dvh / var(--ui-zoom, 1)) - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
            padding: 22px 26px 18px;
            background: var(--bg-card, #1a1e27);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            text-align: center;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            font-family: var(--font-reading);
            color: var(--text-primary);
            cursor: auto;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            touch-action: pan-y;
            -webkit-overflow-scrolling: touch;
            scrollbar-gutter: stable;
            outline: none;
        }

        .pos-info-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-primary);
            font: 400 24px/1 var(--font-reading);
            cursor: pointer;
        }

        .pos-info-close:hover,
        .pos-info-close:focus-visible {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.28);
        }

        /* Same .pos-* classes adjust the popover accent. Only the
           border picks up the colour; background/text stay dark so
           the reading is comfortable. */
        .pos-info-popover.pos-noun { border-color: rgba(74, 158, 255, 0.7); }
        .pos-info-popover.pos-propn { border-color: rgba(14, 165, 233, 0.7); }
        .pos-info-popover.pos-verb { border-color: rgba(0, 212, 170, 0.7); }
        .pos-info-popover.pos-aux { border-color: rgba(45, 212, 191, 0.7); }
        .pos-info-popover.pos-adj  { border-color: rgba(245, 166, 35, 0.7); }
        .pos-info-popover.pos-adv  { border-color: rgba(168, 85, 247, 0.7); }
        .pos-info-popover.pos-prep { border-color: rgba(236, 72, 153, 0.7); }
        .pos-info-popover.pos-conj { border-color: rgba(20, 184, 166, 0.7); }
        .pos-info-popover.pos-cconj { border-color: rgba(34, 197, 94, 0.7); }
        .pos-info-popover.pos-sconj { border-color: rgba(132, 204, 22, 0.7); }
        .pos-info-popover.pos-pron { border-color: rgba(99, 102, 241, 0.7); }
        .pos-info-popover.pos-det  { border-color: rgba(244, 63, 94, 0.7); }
        .pos-info-popover.pos-int  { border-color: rgba(234, 179, 8, 0.7); }
        .pos-info-popover.pos-num  { border-color: rgba(6, 182, 212, 0.7); }
        .pos-info-popover.pos-mwe  { border-color: rgba(251, 191, 36, 0.7); }
        .pos-info-popover.pos-clitic { border-color: rgba(249, 115, 22, 0.7); }
        .pos-info-popover.pos-part { border-color: rgba(192, 132, 252, 0.7); }
        .pos-info-popover.pos-prefix { border-color: rgba(163, 230, 53, 0.7); }
        .pos-info-popover.pos-suffix { border-color: rgba(74, 222, 128, 0.7); }
        .pos-info-popover.pos-contraction { border-color: rgba(248, 113, 113, 0.7); }
        .pos-info-popover.pos-other { border-color: rgba(148, 163, 184, 0.7); }

        .pos-info-name {
            font-family: var(--font-emphasis, var(--font-data));
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--text-primary);
        }

        .pos-info-description {
            font-size: 15px;
            line-height: 1.55;
            color: var(--text-secondary, #c8d0e0);
            margin-bottom: 14px;
        }

        /* Secondary section in the popover — only present when the
           pill carried a real <100% frequency. Divider separates it
           from the POS definition above. */
        .pos-info-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
            margin: 4px -6px 14px;
        }

        .pos-info-pct-label {
            font-family: var(--font-emphasis, var(--font-data));
            font-size: 11px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--text-muted, #6a7389);
            opacity: 0.85;
            margin-bottom: 2px;
        }

        .pos-info-pct-value {
            font-family: var(--font-emphasis, var(--font-data));
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 8px;
        }

        .pos-info-pct-description {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-secondary, #c8d0e0);
            margin-bottom: 14px;
        }

        .pos-info-hint {
            font-size: 11px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--text-muted, #6a7389);
            opacity: 0.75;
        }

        .card-ranking {
            position: absolute;
            bottom: 16px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            pointer-events: none;
            z-index: 2;
        }
        .card-ranking {
            align-items: flex-end;
            gap: 12px;
        }
        /* Two-line figure: the wording above, the number below. Rank and
           frequency share every size so the two read as a pair. */
        .card-stat {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;
            min-width: 0;
            font-family: var(--font-reading);
            color: rgba(255, 255, 255, 0.55);
            text-align: left;
        }
        .card-stat--end {
            align-items: flex-end;
            text-align: right;
        }
        .card-stat-label {
            font-size: 15px;
            line-height: 1.2;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }
        .card-stat-line {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
            line-height: 1.1;
            white-space: nowrap;
        }
        .card-stat-unit {
            font-size: 15px;
        }
        /* The figure itself, lifted out of the muted label around it. Applies
           to the lyric-line count, the spoken frequency and the vocabulary
           rank — but never the unit or the "/ total vocabulary" denominator,
           which are reference, not the number being reported. */
        .card-stat-value {
            color: #fff;
            font-size: 26px;
            font-weight: 750;
            font-variant-numeric: tabular-nums;
        }
        .card-exclusion-label {
            max-width: 100%;
            padding: 5px 9px;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 42%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-secondary) 14%, transparent);
            color: color-mix(in srgb, var(--accent-secondary) 78%, white);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: capitalize;
        }
        .card-exclusion-label--examples {
            border-color: rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.72);
            text-transform: none;
        }
        .search-example-empty {
            padding: 20px;
            color: var(--text-muted);
            font-size: 13px;
        }
        .card-freq-btn {
            font-family: var(--font-reading);
            color: rgba(255, 255, 255, 0.55);
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            pointer-events: auto;
            line-height: inherit;
        }
        .card-freq-btn:hover {
            color: rgba(255, 255, 255, 0.8);
        }
        /* Frequency info tooltip */
        /* Shared by desktop and mobile active-set card scrubbers. */
        .deck-progress-segments {
            display: flex;
            position: relative;
            align-items: center;
            flex: 1 1 auto;
            max-width: 330px;
            min-width: 0;
            height: 50px;
            gap: 0;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            padding: 0 calc(50% - 25px);
            background: none;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
                    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
        }
        .deck-progress-segments::before {
            content: '';
            position: absolute;
            z-index: 0;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            transform: translateY(-50%);
            pointer-events: none;
            background: linear-gradient(to right, transparent, rgba(170, 174, 184, 0.42) 14%, rgba(170, 174, 184, 0.42) 86%, transparent);
        }
        .deck-progress-segments::-webkit-scrollbar { display: none; }
        .deck-progress-segments.is-scrubbing {
            filter: drop-shadow(0 0 7px rgba(var(--accent-primary-rgb), 0.32));
        }
        .deck-progress-segments.is-scrubbing::before { height: 3px; }
        .deck-progress-segments.is-scrubbing .deck-progress-segment {
            transition-duration: 90ms;
        }
        .deck-progress-segments.is-scrubbing .deck-progress-segment.is-current {
            animation: none;
        }
        @media (max-width: 767px) {
            .deck-progress-segments {
                touch-action: none;
                cursor: ew-resize;
            }
        }
        .deck-progress-segment {
            position: relative;
            z-index: 1;
            flex: 0 0 44px;
            width: 42px;
            min-width: 42px;
            max-width: 42px;
            height: 42px;
            padding: 0;
            margin-inline: -8px;
            border: 1px solid var(--scrubber-marker-border, rgba(255, 255, 255, 0.16));
            border-radius: 10px;
            background: var(--scrubber-marker-fill, color-mix(in srgb, var(--bg-card) 88%, var(--bg-tertiary)));
            color: var(--scrubber-marker-text, rgba(255, 255, 255, 0.4));
            font: 750 16px/1 var(--font-reading);
            cursor: pointer;
            opacity: 1;
            transform: scale(0.42);
            scroll-snap-align: center;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
            transition: color 260ms ease,
                        transform 300ms cubic-bezier(0.2, 0.85, 0.25, 1.25),
                        border-color 260ms ease, background 260ms ease,
                        box-shadow 260ms ease;
        }
        .deck-progress-segment.is-visited:not(.is-current) {
            --scrubber-marker-text: rgba(255, 255, 255, 0.68);
        }
        .deck-progress-segment.is-result-correct {
            --scrubber-marker-fill: color-mix(in srgb, rgb(34, 197, 94) 28%, var(--bg-card));
            --scrubber-marker-border: rgba(74, 222, 128, 0.66);
            --scrubber-marker-text: #b9f6ca;
        }
        .deck-progress-segment.is-result-incorrect {
            --scrubber-marker-fill: color-mix(in srgb, rgb(239, 68, 68) 28%, var(--bg-card));
            --scrubber-marker-border: rgba(248, 113, 113, 0.68);
            --scrubber-marker-text: #fecaca;
        }
        .deck-progress-segment.is-result-mixed {
            --scrubber-marker-fill: color-mix(in srgb, rgb(245, 166, 35) 28%, var(--bg-card));
            --scrubber-marker-border: rgba(251, 191, 36, 0.68);
            --scrubber-marker-text: #fde7ae;
        }
        .deck-progress-segment.is-visited.is-result-correct:not(.is-current) {
            --scrubber-marker-text: #b9f6ca;
        }
        .deck-progress-segment.is-visited.is-result-incorrect:not(.is-current) {
            --scrubber-marker-text: #fecaca;
        }
        .deck-progress-segment.is-visited.is-result-mixed:not(.is-current) {
            --scrubber-marker-text: #fde7ae;
        }
        /* Phrases get their own colour rather than reusing a result state:
           green/red/amber already mean correct/incorrect/mixed, and the
           language accent is red for Spanish. Violet is unclaimed in the
           scrubber and in the POS palette's high-frequency range.
           The compound selector outranks .is-current (which follows below and
           would otherwise win on source order) and every .is-result-* state. */
        .deck-progress-segment.is-current.is-phrases {
            --scrubber-marker-fill: color-mix(in srgb, rgb(var(--accent-phrases-rgb)) 30%, var(--bg-card));
            --scrubber-marker-text: #ede9fe;
            border-color: color-mix(in srgb, rgb(var(--accent-phrases-rgb)) 78%, white);
            box-shadow: 0 0 0 2px rgba(var(--accent-phrases-rgb), 0.14),
                        0 0 13px rgba(var(--accent-phrases-rgb), 0.34);
            text-shadow: 0 0 12px rgba(var(--accent-phrases-rgb), 0.55);
        }
        .deck-progress-segment[data-distance="1"] { margin-inline: 3px; transform: scale(0.88); }
        .deck-progress-segment[data-distance="2"] { margin-inline: -2px; transform: scale(0.67); }
        .deck-progress-segment[data-distance="3"] { margin-inline: -5px; transform: scale(0.52); }
        .deck-progress-segment.is-current {
            color: white;
            opacity: 1;
            transform: scale(1.16);
            border-radius: 11px;
            border-color: color-mix(in srgb, var(--accent-primary) 74%, white);
            background: var(--scrubber-marker-fill, color-mix(in srgb, var(--accent-primary) 24%, var(--bg-card)));
            box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.12),
                        0 0 13px rgba(var(--accent-primary-rgb), 0.3);
            text-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.5);
            animation: deck-scrubber-lens 300ms cubic-bezier(0.2, 0.85, 0.25, 1.25);
            margin-inline: 8px;
        }
        @keyframes deck-scrubber-lens {
            0% { transform: scale(0.82); }
            65% { transform: scale(1.22); }
            100% { transform: scale(1.16); }
        }
        @media (prefers-reduced-motion: reduce) {
            .deck-progress-segment {
                transition-duration: 0.01ms;
            }
            .deck-progress-segment.is-current {
                animation: none;
            }
        }
        .deck-progress-track .study-menu-btn {
            flex: 0 0 auto;
            width: 50px;
            min-width: 50px;
            height: 50px;
            padding: 9px;
            border-radius: 12px;
            border: 1px solid transparent;
            color: rgba(255, 255, 255, 0.68);
            background: transparent;
        }
        .deck-progress-track .study-menu-btn:hover,
        .deck-progress-track .study-menu-btn:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 70%, white);
            color: white;
            background: rgba(255, 255, 255, 0.06);
        }
        .deck-progress-track .study-menu-btn svg {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
        }

        .freq-tooltip {
            position: fixed;
            background: rgba(30, 30, 40, 0.95);
            color: rgba(255, 255, 255, 0.85);
            font-family: var(--font-reading);
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            pointer-events: none;
            z-index: 9999;
            max-width: 220px;
            text-align: center;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        .freq-tooltip.hiding {
            opacity: 0;
        }

        /* The per-surface breakdown behind a merged card's total. The base
           rule caps width at 220px, which wraps a form list into unreadable
           ribbons, so the wide variant opts out of that cap only when there
           is a list to show. */
        .freq-tooltip-wide {
            max-width: 340px;
        }
        .freq-tooltip-forms {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 10px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            font-variant-numeric: tabular-nums;
        }
        .freq-tooltip-form {
            white-space: nowrap;
        }
        .freq-tooltip-surface {
            color: rgba(255, 255, 255, 0.95);
            font-weight: 600;
        }

        .card-control-btn {
            padding: 8px 14px;
            background: #1a1a1a;
            color: var(--text-primary);
            border: 1.5px solid #333333;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            height: 38px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            transform-style: preserve-3d;
        }

        /* Prevent buttons from rotating with card flip */
        .card.flipped .card-front .card-control-btn,
        .card.flipped .card-front .nav-btn-inline,
        .card.flipped .card-front .card-action-small {
            transform: rotateY(-180deg);
            pointer-events: auto;
        }

        /* Ensure buttons are clickable */
        .card-control-btn,
        .nav-btn-inline,
        .card-action-small {
            pointer-events: auto;
            position: relative;
        }

        .card-control-btn:hover {
            background: #2a2a2a;
            border-color: #444444;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .card-control-btn:active {
            transform: scale(0.95);
            background: #0f0f0f;
        }

        .card-action-small {
            padding: 8px 16px;
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            border: none;
            border-radius: 6px;
            font-size: 28px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            transform-style: preserve-3d;
            white-space: nowrap;
            overflow: hidden;
        }

        .card-action-small:hover {
            background: rgba(255, 255, 255, 0.08);
            color: white;
            transform: scale(1.1);
        }

        .card-action-small:active {
            transform: scale(0.95);
        }

        /* Language reverse button — single big "from" flag with a small
           circular swap badge in the bottom-right corner. Sized to match the
           shuffle button's visual weight. The "to" flag is emitted by JS for
           screen readers but hidden visually. */
        #reverseLangBtn {
            width: 52px;
            height: 52px;
            padding: 0;
            position: relative;
            overflow: visible;
            line-height: 1;
        }
        #reverseLangBtn .reverse-flag-from {
            font-size: 36px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #reverseLangBtn .reverse-flag-to {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            opacity: 0;
            pointer-events: none;
        }
        #reverseLangBtn .reverse-swap-glyph {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(20, 24, 32, 0.92);
            color: rgba(255, 255, 255, 0.95);
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            line-height: 1;
            box-sizing: border-box;
            font-family: var(--font-data);
            font-weight: 700;
        }
        #reverseLangBtn:hover .reverse-swap-glyph {
            background: var(--accent-primary, rgba(74, 158, 255, 0.95));
            color: #fff;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .card-details {
            font-family: var(--font-reading);
            font-size: 18px;
            line-height: 1.8;
            text-align: center;
            width: 100%;
            max-width: 100%;
            overflow-wrap: break-word;
            word-wrap: break-word;
            color: var(--text-primary);
        }

        @media (max-width: 767px) {
            .card-details {
                font-size: 16px;
            }
        }

        .card-details strong {
            color: var(--accent-secondary);
        }

        .sentence {
            margin-top: 15px;
            padding: 10px 12px 6px;
            background: #0d141c;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-left: 5px solid rgb(var(--sense-match-rgb));
            border-radius: 10px;
            font-family: var(--font-reading);
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 1.4;
            overflow-wrap: break-word;
            word-wrap: break-word;
            text-align: center;
            color: #ffffff;
        }

        .sentence.example-is-matched {
            /* Flat fill; the left edge already carries the POS accent. */
            background: #0d141c;
            box-shadow: none;
        }

        .sentence.canonical-example {
            margin-top: 12px;
            border-left-color: rgba(255, 255, 255, 0.28);
        }

        .example-word-highlight,
        .example-related-highlight {
            color: #fff;
            font-style: normal;
            border-radius: 3px;
            padding: 0 0.14em;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        .example-word-highlight {
            font-weight: 800;
            color: color-mix(in srgb, rgb(var(--sense-match-rgb)) 55%, white);
            background: transparent;
            box-shadow: inset 0 -3px 0 rgb(var(--sense-match-rgb));
        }

        .example-word-highlight.example-pooled-form {
            background: rgba(var(--sense-match-rgb), 0.2);
            box-shadow:
                inset 0 -2px 0 rgba(var(--sense-match-rgb), 0.88),
                0 0 0 1px rgba(var(--sense-match-rgb), 0.16);
        }

        /* A form this app worked out rather than one the data recorded: the
           stem left by peeling an enclitic pronoun, or the sentence word that
           most resembles the card's surface. Dashed, because a solid rule
           here would claim evidence the pipeline never produced. */
        .example-word-highlight.example-inferred-form {
            background: rgba(var(--sense-match-rgb), 0.12);
            box-shadow: none;
            border-bottom: 2px dashed rgba(var(--sense-match-rgb), 0.85);
        }

        .example-usage-highlight {
            border-radius: 3px;
            padding: 0 0.12em;
            color: #fff;
            background: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
            box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent-secondary) 72%, transparent);
            font-style: normal;
            font-weight: 700;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        .example-related-highlight {
            font-weight: 650;
            background: rgba(var(--sense-match-rgb), 0.07);
            box-shadow: inset 0 -1px 0 rgba(var(--sense-match-rgb), 0.38);
        }

        /* Attached clitic pronoun within a highlighted verb form.
           Uses the orange clitic accent directly so the pronoun portion
           is visually distinct from the host verb stem. */
        .example-clitic-highlight {
            color: color-mix(in srgb, rgb(249, 115, 22) 60%, white);
            text-decoration: underline;
            text-decoration-color: rgba(249, 115, 22, 0.6);
            text-underline-offset: 3px;
        }

        @media (max-width: 767px) {
            .sentence {
                font-size: 18px;
                padding: 6px 10px;
            }
        }

        .translation {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            color: #e6eaf0;
            font-size: 16px;
            font-weight: 500;
            font-style: normal;
            line-height: 1.4;
        }

        @media (max-width: 389px) {
            .translation { font-size: 15px; }
        }

        .breakdown-trigger,
        .example-sentence-text {
            font-style: normal;
        }

        /* Desktop-only utility: hidden on mobile, inline-flex on desktop */
        .desktop-only {
            display: none;
        }

        @media (min-width: 768px) {
            .desktop-only {
                display: inline-flex;
            }
        }

        /* Example and MWE cycling buttons (desktop only) */
        .example-counter-group {
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }

        .compact-example-counter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            padding: 2px 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            font: 600 12px/1 var(--font-reading);
            font-variant-numeric: tabular-nums;
        }

        .compact-example-counter-label {
            margin-right: 3px;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .example-autoplay-fallback {
            display: flex;
            justify-content: center;
            margin: 8px 0 2px;
        }

        .example-autoplay-btn {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            cursor: pointer;
            padding: 0;
            transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
        }

        .example-autoplay-btn:hover,
        .example-autoplay-btn:focus-visible {
            border-color: #1db954;
            background: rgba(29, 185, 84, 0.18);
            transform: scale(1.05);
        }

        .example-autoplay-btn.is-active {
            border-color: #1db954;
            background: #1db954;
        }

        .example-autoplay-icon {
            font-size: 11px;
            line-height: 1;
            transform: translateX(0.5px);
        }

        .example-autoplay-btn.is-active .example-autoplay-icon {
            transform: none;
        }

        .example-autoplay-btn.is-loading .example-autoplay-icon {
            animation: autoplay-loading-pulse 0.8s ease-in-out infinite alternate;
        }

        @keyframes autoplay-loading-pulse {
            from { opacity: 0.4; }
            to { opacity: 1; }
        }

        /* Catalogue song and vocalist names can be long enough to shove the
           Spotify control off the credit row. The song title is a bare text
           node inside this span, so it can only take an ellipsis while the
           span is one nowrap line box — hence block rather than flex. */
        .example-song-credit {
            display: block;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: left;
        }

        .example-vocalist-credit {
            color: var(--text-secondary);
            font-style: normal;
            white-space: nowrap;
        }
        .example-credit-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .example-credit-row.is-lyric {
            font-style: italic;
        }
        /* Each half owns its half and cannot take the other's. Before this,
           the credit was `flex: 1 1 auto` against an unbounded wrapping tick
           strip, so a long film title and a thirty-example strip fought over
           the same row and one of them lost outright. */
        .example-credit-start {
            flex: 1 1 50%;
            max-width: 50%;
            min-width: 0;
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
        }
        .example-credit-end {
            flex: 1 1 50%;
            max-width: 50%;
            min-width: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            overflow: hidden;
        }
        /* Play controls keep their size; the ticks are what gives way. */
        .example-credit-end > .spotify-btn,
        .example-credit-end > .example-autoplay-btn,
        .example-credit-end > a.spotify-btn { flex: 0 0 auto; }
        .example-ticks {
            display: flex;
            flex-wrap: nowrap;
            /* flex-start, not flex-end: an overflowing flex-end container
               spills off its own start edge, which scrollLeft cannot reach.
               The strip is right-aligned by its parent instead. */
            justify-content: flex-start;
            align-items: center;
            gap: 5px;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
            margin: 0;
            overflow: hidden;
            scrollbar-width: none;
        }
        .example-ticks::-webkit-scrollbar { width: 0; height: 0; }
        .example-ticks.is-dense {
            gap: 3px;
        }
        /* Last squeeze before clipping. fitExampleCreditRow applies it only
           when the dense tier still does not fit the half it was given. */
        .example-ticks.is-tight {
            gap: 2px;
        }
        .example-ticks.is-tight .example-tick {
            width: 4px;
            height: 4px;
        }
        .example-tick {
            /* No shrinking. Without this the strip silently compresses every
               tick into a sliver to fit, which looks like it fits and makes
               the current one indistinguishable — the density tiers below are
               what should give way, in visible steps. */
            flex: 0 0 auto;
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--text-secondary) 38%, transparent);
        }
        .example-ticks.is-dense .example-tick {
            width: 5px;
            height: 5px;
        }
        .example-tick.is-current {
            background: var(--text-primary);
        }
        .sense-prominence-dots {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .prominence-dot {
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 28%, transparent);
        }
        .prominence-dot.is-filled {
            background: currentColor;
        }

        @media (max-width: 520px) {
            /* Keep the narrow two-line stack, each line ellipsised on its own. */
            .example-vocalist-credit {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .example-cycle-btn,
        .mwe-cycle-btn {
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.08);
            border: none;
            border-radius: 9px;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            line-height: 1;
        }

        .example-cycle-btn:hover,
        .mwe-cycle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        /* A row, not an equal-column grid: under a grid the Look up tile slid
           left whenever a card lacked synonyms or wasn't a verb. Flow the
           optional tiles from the left and push Look up to the right edge, so
           it is always in the same corner. */
        .links-section {
            margin-top: auto;
            padding-top: 6px;
            width: 100%;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            position: relative;
        }
        .links-section .ref-lookup-btn {
            margin-left: auto;
        }
        /* iPhone SE and smaller: the handoff row / example already claim
           this space, so the tile grid is dropped entirely. */
        @media (max-width: 359px) {
            .links-section {
                display: none;
            }
        }

        /* Provenance + flag moved off this row entirely (top-right of the
           headword now), so it's never more than 4 tiles — a bit taller
           with bigger icons fits comfortably without risking wrap. */
        /* No visible box — just the icon + label. The tile's own footprint
           (padding, min-height) still stands in as the tap target. */
        .ref-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 70px;
            padding: 4px 6px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            color: #e6eaf0;
        }
        /* Bare glyphs, no plate behind them: every tile icon inherits the
           tile's colour and shares one size so the row reads as a set. */
        .ref-tile-icon-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .ref-tile-icon {
            width: 39px;
            height: 39px;
            flex: 0 0 auto;
        }
        .ref-tile-count-badge {
            position: absolute;
            top: -2px;
            right: -6px;
            min-width: 17px;
            height: 17px;
            padding: 0 4px;
            border-radius: 9px;
            background: var(--accent-primary, #6366f1);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            line-height: 17px;
            text-align: center;
            pointer-events: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        }
        .ref-tile-label {
            font-size: 13.5px;
            font-weight: 600;
            color: #e6eaf0;
            text-align: center;
            line-height: 1.2;
        }

        .lookup-sheet[hidden] {
            display: none;
        }
        /* Circular site icons stacked directly above the Look up tile — no
           panel, no text list. Right-aligned to the tile so the column reads
           as rising out of the button that opened it. */
        .lookup-sheet {
            position: absolute;
            bottom: calc(100% + 10px);
            right: 0;
            z-index: 20;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            gap: 10px;
            padding: 0;
            background: none;
            border: none;
            box-shadow: none;
        }
        .lookup-sheet-icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 50%;
            background: #1b232e;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
            color: #e6eaf0;
            font: inherit;
            text-decoration: none;
            cursor: pointer;
            animation: lookup-icon-rise 180ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .lookup-sheet-icon img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
        .outbound-leave-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
            border-radius: 8px;
            background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-card));
            color: var(--text-primary);
            cursor: pointer;
        }
        .outbound-leave-btn[hidden] {
            display: none !important;
        }
        .outbound-leave-icon {
            width: 15px;
            height: 15px;
        }
        .lookup-sheet-icon .outbound-leave-btn {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            border-radius: 50%;
            background: #1b232e;
            color: #e6eaf0;
        }
        .lookup-sheet-icon.is-armed-outbound {
            overflow: visible;
        }
        .outbound-leave-btn--label,
        .lookup-sheet-icon .outbound-leave-btn--label,
        .example-source-chip .outbound-leave-btn--label {
            position: absolute;
            inset: auto;
            bottom: calc(100% + 8px);
            left: 0;
            width: max-content;
            height: auto;
            padding: 7px 10px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-primary);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
            font: 650 13px/1.2 var(--font-reading);
            white-space: nowrap;
            z-index: 6;
        }
        .lookup-sheet-icon .outbound-leave-btn--label {
            bottom: auto;
            left: auto;
            right: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
        }
        /* Example-source popover: the source mark at full size, "Open on …"
           and the external arrow — one obvious target, raised above the chip
           so a stray tap on the sentence never leaves the app. */
        .example-source-chip .outbound-leave-btn--icon {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px 8px 8px;
            border-radius: 14px;
            animation: lookup-icon-rise 180ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .outbound-leave-btn--icon .outbound-visit-mark {
            display: inline-flex;
            flex: 0 0 auto;
        }
        .outbound-leave-btn--icon .outbound-visit-mark img {
            width: 44px;
            height: 44px;
            border-radius: 10px;
        }
        .outbound-leave-btn--icon .outbound-leave-icon {
            width: 16px;
            height: 16px;
            opacity: 0.8;
        }
        .example-source-chip:focus-visible {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 55%, transparent);
        }
        .example-credit-row:has(.is-armed-outbound),
        .example-credit-start:has(.is-armed-outbound),
        .example-song-credit:has(.is-armed-outbound) {
            overflow: visible;
        }
        .lookup-sheet-icon .outbound-leave-icon {
            width: 20px;
            height: 20px;
        }
        .lookup-sheet-icon.is-armed-outbound {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 70%, transparent), 0 6px 18px rgba(0, 0, 0, 0.45);
        }
        .lookup-sheet-initial {
            font: 700 17px/1 var(--font-reading);
        }
        .lookup-sheet-icon:hover {
            border-color: rgba(255, 255, 255, 0.5);
        }
        /* Second icon trails the first slightly, so the group reads as one
           motion out of the tile rather than two things appearing at once. */
        .lookup-sheet-icon:nth-child(2) { animation-delay: 45ms; }
        .lookup-sheet-icon:nth-child(3) { animation-delay: 90ms; }
        @keyframes lookup-icon-rise {
            from { opacity: 0; transform: translateY(10px) scale(0.8); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .lookup-sheet-icon { animation: none; }
        }

        .link-btn {
            display: inline-block;
            padding: 9px 18px;
            background: var(--bg-tertiary);
            color: white;
            text-decoration: none;
            border-radius: 7px;
            font-size: 15px;
            border: 1px solid var(--border-color);
            transition: all 0.3s;
        }

        .link-btn:hover {
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: var(--bg-card);
            padding: 15px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .nav-btn {
            padding: 12px 24px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .nav-btn:hover {
            box-shadow: 0 0 20px var(--glow-orange);
        }

        .nav-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
        }

        #correctBtn:hover:not(:disabled) {
            box-shadow: 0 0 20px var(--glow-green);
        }

        #incorrectBtn:hover:not(:disabled) {
            box-shadow: 0 0 20px rgba(255, 82, 82, 0.5);
        }

        .nav-btn-inline {
            padding: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            border: none;
            border-radius: 50%;
            font-size: 48px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding-bottom: 4px;
            pointer-events: auto;
            z-index: 10;
            transform-style: preserve-3d;
        }

        .nav-btn-inline:hover {
            background: rgba(255, 255, 255, 0.08);
            color: white;
            transform: scale(1.1);
        }

        .nav-btn-inline:active {
            transform: scale(0.95);
        }

        .nav-btn-inline:disabled {
            color: rgba(255, 255, 255, 0.15);
            background: transparent;
            cursor: not-allowed;
        }

        .nav-btn-inline:disabled:hover {
            transform: none;
        }

        .progress {
            text-align: center;
            font-weight: 600;
            color: var(--accent-secondary);
        }

        .action-btn {
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 52px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease-out, filter 0.15s ease-out;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

        .action-btn:active {
            transform: scale(0.75);
            filter: brightness(0.8);
        }

        /* For touch devices - maintain pressed state while held */
        @media (hover: none) {
            .action-btn:active {
                transform: scale(0.7);
            }
        }

        .control-action-btn {
            padding: 10px 20px;
            background: #1a1a1a;
            color: var(--text-primary);
            border: 1.5px solid #333333;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .control-action-btn:hover {
            background: #2a2a2a;
            border-color: #444444;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        }

        .control-action-btn:active {
            transform: scale(0.95);
            background: #0f0f0f;
        }

        .quiz-container {
            background: var(--bg-card);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .quiz-question {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 25px;
            color: var(--text-primary);
            text-align: center;
        }

        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .quiz-option {
            padding: 15px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            color: var(--text-primary);
        }

        .quiz-option:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-blue);
        }

        .quiz-option.correct {
            background: rgba(0, 212, 170, 0.15);
            border-color: var(--accent-green);
        }

        .quiz-option.incorrect {
            background: rgba(255, 82, 82, 0.15);
            border-color: var(--error);
        }

        .quiz-feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
        }

        .quiz-feedback.correct {
            background: rgba(0, 212, 170, 0.15);
            color: var(--accent-green);
        }

        .quiz-feedback.incorrect {
            background: rgba(255, 82, 82, 0.15);
            color: var(--error);
        }

        .type-container {
            background: var(--bg-card);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .type-prompt {
            font-size: 20px;
            margin-bottom: 20px;
            color: var(--text-primary);
            font-weight: 700;
            text-align: center;
        }

        .type-input {
            width: 100%;
            padding: 15px;
            font-size: 18px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }

        .type-input:focus {
            outline: none;
            border-color: var(--accent-blue);
        }

        .check-btn {
            width: 100%;
            padding: 15px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        .stats {
            background: var(--bg-card);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .stats h3 {
            color: var(--text-primary);
            margin-bottom: 15px;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-secondary);
        }

        .stat-row:last-child {
            border-bottom: none;
        }

        .file-upload {
            background: transparent;
            padding: 10px;
            border-radius: 12px;
            margin-bottom: 20px;
            text-align: center;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            padding: 12px 24px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
        }

        .hidden {
            display: none !important;
        }

        /* One coherent transition surface for boot, source changes and deck
           replacement. It sits above auth as well as the study UI, preventing
           partially hydrated screens from flashing during navigation. */
        .app-loading-screen {
            position: fixed;
            inset: 0;
            z-index: 20000;
            display: grid;
            place-items: center;
            padding: 24px;
            background:
                radial-gradient(circle at 50% 38%, rgba(var(--accent-primary-rgb), 0.13), transparent 34%),
                var(--bg-primary);
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        .app-loading-screen.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .app-loading-card {
            display: grid;
            justify-items: center;
            width: min(100%, 310px);
            color: var(--text-primary);
            text-align: center;
            /* One source for the three progress colours, so the loading ring and
               its legend cannot drift from the setup screen's set dots. */
            --ring-known: color-mix(in srgb, var(--success) 66%, var(--bg-card));
            --ring-review: color-mix(in srgb, var(--warning) 72%, var(--bg-card));
            --ring-unseen: color-mix(in srgb, var(--border-color) 85%, transparent);
        }

        .app-loading-mark {
            position: relative;
            width: 64px;
            height: 64px;
            display: grid;
            place-items: center;
            margin-bottom: 24px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 46%, transparent);
            border-radius: 18px;
            background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 28px;
            font-weight: 800;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        }

        .app-loading-mark-text {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            z-index: 1;
            transition: opacity 0.3s ease;
        }

        .app-loading-mark.has-art .app-loading-mark-text {
            opacity: 0;
            pointer-events: none;
        }

        .app-loading-mark-art {
            position: absolute;
            inset: 0;
            z-index: 2;
            border-radius: 17px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            image-rendering: -webkit-optimize-contrast;
            opacity: 0;
            transition: opacity 0.45s ease-in-out;
        }

        .app-loading-mark.has-art .app-loading-mark-art {
            opacity: 1;
        }

        .app-loading-mark-art[hidden] {
            display: none;
        }

        .app-loading-mark-art.is-clipart {
            inset: 0;
            border-radius: 0;
            background-size: contain;
        }

        /* Clipart and the flag stand on their own: no tile behind them. */
        .app-loading-mark.is-free {
            width: 72px;
            height: 72px;
            border-color: transparent;
            background: transparent;
            box-shadow: none;
            overflow: visible;
        }

        .app-loading-mark-text.is-flag {
            font-family: system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
            font-size: 60px;
            font-weight: 400;
            line-height: 1;
            animation: app-loading-mark-pop 0.36s cubic-bezier(0.16, 1, 0.3, 1);
        }


        .app-loading-mark-art.is-popping {
            animation: app-loading-mark-pop 0.28s ease-out;
        }

        @keyframes app-loading-mark-pop {
            from { transform: scale(0.82); }
            to { transform: scale(1); }
        }

        .app-loading-spinner {
            grid-area: stack;
            width: 40px;
            height: 40px;
            box-sizing: border-box;
            border: 3px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-color));
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            transform-origin: center center;
            animation: spin 0.75s linear infinite;
            transition: opacity 0.18s ease;
        }

        /* The spinner and the deck-progress ring share one centered slot.
           In spinner mode, the ring is removed from layout (display: none)
           so it cannot push or offset the spinner down and to the right. */
        .app-loading-visual {
            display: grid;
            grid-template-areas: 'stack';
            place-items: center;
            position: relative;
            box-sizing: border-box;
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
        }

        .app-loading-visual[data-mode="spinner"] .app-loading-ring,
        .app-loading-visual[data-mode="spinner"] .app-loading-ring-centre {
            display: none !important;
        }

        .app-loading-visual[data-mode="progress"] {
            width: 156px;
            height: 156px;
            margin-bottom: 22px;
        }

        .app-loading-visual[data-mode="progress"] .app-loading-spinner {
            display: none !important;
        }

        .app-loading-ring,
        .app-loading-ring-centre {
            grid-area: stack;
            opacity: 0;
            transform: scale(0.2);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
        }

        .app-loading-ring {
            width: 156px;
            height: 156px;
            overflow: visible;
        }

        .app-loading-visual[data-mode="progress"] .app-loading-ring,
        .app-loading-visual[data-mode="progress"] .app-loading-ring-centre {
            display: grid;
            opacity: 1;
            transform: scale(1);
        }

        .app-loading-ring circle {
            fill: none;
            stroke-width: 10;
            stroke-linecap: butt;
            transform: rotate(-90deg);
            transform-origin: 60px 60px;
        }

        .app-loading-ring-track { stroke: var(--ring-unseen); }
        .app-loading-ring-arc.is-review { stroke: var(--ring-review); }
        .app-loading-ring-arc.is-known { stroke: var(--ring-known); }

        /* Set by JS: dasharray is the full circumference, dashoffset animates the
           arc open. Stacked largest-cumulative-first, so the known arc paints over
           the review arc and no negative offsets are needed. */
        .app-loading-ring-arc {
            stroke-dasharray: 339.292;
            stroke-dashoffset: 339.292;
            transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        .app-loading-ring-centre {
            display: grid;
            justify-items: center;
            align-content: center;
            gap: 2px;
            line-height: 1;
        }

        .app-loading-ring-centre strong {
            font-family: var(--font-emphasis);
            font-size: 32px;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .app-loading-ring-centre span {
            color: var(--text-muted);
            font: 600 11px/1 var(--font-emphasis);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .app-loading-ring-centre span[hidden] {
            display: none;
        }

        /* In progress mode, streamline text: hide the verbose detail string */
        .app-loading-visual[data-mode="progress"] ~ #appLoadingDetail {
            display: none;
        }

        .app-loading-ring-legend {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-top: 14px;
            color: var(--text-muted);
            font: 600 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.02em;
        }

        .app-loading-ring-legend[hidden] { display: none; }

        .app-loading-ring-legend span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .app-loading-ring-legend b {
            color: var(--text-primary);
            font-weight: 700;
        }

        .app-loading-ring-legend i {
            width: 8px;
            height: 8px;
            border-radius: 2px;
            background: var(--ring-unseen);
        }

        .app-loading-ring-legend i.is-known { background: var(--ring-known); }
        .app-loading-ring-legend i.is-review { background: var(--ring-review); }

        .app-loading-tap-hint {
            margin: 18px 0 0;
            color: var(--text-muted);
            font: 600 11px/1 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            opacity: 0.85;
            animation: app-loading-tap-hint-in 0.3s ease both;
        }
        .app-loading-tap-hint[hidden] { display: none; }

        @keyframes app-loading-tap-hint-in {
            from { opacity: 0; transform: translateY(3px); }
            to { opacity: 0.85; transform: none; }
        }

        .app-loading-card strong {
            font-family: var(--font-emphasis);
            font-size: 19px;
            font-weight: 750;
            letter-spacing: -0.015em;
        }

        .app-loading-card > span {
            margin-top: 7px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.45;
        }

        @media (prefers-reduced-motion: reduce) {
            .app-loading-screen { transition: none; }
            .app-loading-spinner { animation-duration: 1.5s; }
            .app-loading-ring,
            .app-loading-ring-centre,
            .app-loading-ring-arc { transition: none; }
            .app-loading-tap-hint { animation: none; }
            .app-loading-mark-text.is-flag { animation: none; }
        }

        #appContent {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        /* Setup Steps */
        .setup-step {
            position: relative;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
        }

        .resume-set-card {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 10px;
        }

        .resume-set-button {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            width: 100%;
            padding: 15px 17px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
            border-radius: 13px;
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--accent-primary) 17%, var(--bg-card)),
                var(--bg-card));
            color: var(--text-primary);
            font-family: var(--font-reading);
            text-align: left;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }

        .resume-set-button:hover {
            border-color: var(--accent-primary);
            transform: translateY(-1px);
        }

        .resume-set-button strong {
            font-family: var(--font-emphasis);
            font-size: 18px;
        }

        .resume-set-button > span:not(.resume-set-eyebrow) {
            color: var(--text-secondary);
            font-size: 13px;
        }

        .resume-set-button small {
            color: var(--text-muted);
            font-size: 12px;
        }

        .resume-set-eyebrow {
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .resume-set-alternative {
            color: var(--text-muted);
            font-size: 11px;
            text-align: center;
        }

        .resume-entry-modal {
            padding: 18px;
            background: rgba(7, 9, 14, 0.74);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .resume-entry-content {
            box-sizing: border-box;
            width: min(92vw, 470px);
            max-width: 470px;
            padding: 26px;
            border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-color));
        }
        .resume-entry-content h3 {
            margin: 7px 0 18px;
            color: var(--text-primary);
            font: 700 25px/1.15 var(--font-emphasis);
            letter-spacing: -0.02em;
        }
        .resume-entry-content > strong {
            display: block;
            color: var(--text-primary);
            font: 650 17px/1.3 var(--font-emphasis);
        }
        .resume-entry-content p {
            margin: 5px 0 3px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .resume-entry-content small {
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.45;
        }
        .resume-entry-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 22px;
        }
        .resume-entry-actions button {
            min-height: 46px;
            padding: 11px 14px;
            border-radius: 11px;
            font: 650 13px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .resume-entry-secondary {
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
        }
        .resume-entry-primary {
            border: 1px solid var(--accent-primary);
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        /* Sub-settings inside a setup-step (lemma + cognate live inside
           Choose Level). No card chrome — they read as compact rows under
           the parent step's main control rather than as their own panels.
           position: relative anchors the absolute-positioned ".step-help-btn"
           inside the substep itself rather than inheriting the parent
           setup-step's top-right corner (where step2's own help button sits). */
        .setup-substep {
            position: relative;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        /* padding-right matches .step-header-with-help so the rightmost
           inline content (info-line "X excluded" badge) keeps clear of the
           absolute-positioned "?" help button anchored to the substep's
           top-right corner. */
        .substep-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            padding-right: 24px;
        }
        .substep-title {
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .substep-header .level-info-line {
            margin-left: auto;
        }
        .substep-header .step-help-btn {
            margin-left: 4px;
        }
        .substep-header .level-info-line + .step-help-btn {
            margin-left: 4px;
        }
        /* When the info line is hidden, push the help button to the right */
        .substep-header > .step-help-btn:nth-child(3) {
            margin-left: auto;
        }

        /* Substep row — lemma + cognate side-by-side. Each substep takes
           half the width via flex: 1, and only one shared border-top sits
           above the row (otherwise both would draw their own and the row
           would have a doubled separator). */
        .substep-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        .substep-row > .setup-substep {
            flex: 1 1 0;
            min-width: 0;
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        /* Push the help button to the right inside each side-by-side
           substep header — the info line moved out of the header (now
           lives below the toggle) so we can't rely on the existing
           sibling selectors that were keyed to the old header layout. */
        .substep-row .substep-header .step-help-btn {
            margin-left: auto;
        }
        /* Info line ("X flashcards excluded") rendered below the toggle
           rather than inline with the help button. Compact, muted, sits
           in the same horizontal slot under both substeps so the two
           info lines line up across the row. */
        .level-info-line.substep-info-below {
            display: block;
            margin-top: 4px;
            font-size: 11px;
        }
        /* Lemma + cognate stay side-by-side at every width — the toggle
           buttons shrink and wrap their labels onto two lines so they
           fit half-width even on narrow phones. */

        /* Desktop two-column setup layout — at wider viewports the existing
           setup steps stay at their original width in a left column, and
           "Continue Level" (#step4) gets its own narrower column on the right.
           Container widens just enough to fit the new column; everything
           that already existed (top bar, language tabs, level slider,
           lemma/cognate toggles, progress bar) keeps its prior width.

           Below 1024px the grid collapses and steps stack vertically as
           before — no change for mobile/tablet. */
        @media (min-width: 1024px) {
            .container { max-width: 1140px; }
            #setupPanel.file-upload {
                display: grid;
                grid-template-columns: minmax(0, 760px) minmax(280px, 340px);
                column-gap: 20px;
                align-items: start;
                justify-content: start;
                text-align: left;
            }
            /* All existing steps stay in the left column at their prior
               width — no `1 / -1` spanning, so the topBar / language tabs /
               progress bar look the same as on a single-column layout. */
            #setupPanel.file-upload > * {
                grid-column: 1;
                min-width: 0;
            }
            /* The stable-set progress panel gets the right column, top-aligned so it
               appears as a sidebar alongside the steps. grid-row: 1 / -1
               lets it span the full height of the left stack. */
            #setupPanel.file-upload > #step4 {
                grid-column: 2;
                grid-row: 1 / -1;
                align-self: start;
                margin-bottom: 0;
            }
        }

        .selection-pill {
            display: none;
            align-items: center;
            justify-content: center;
            margin-top: 12px;
            padding: 12px 20px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
        }

        .selection-pill.visible {
            display: flex;
        }

        .selection-pill:hover {
            filter: brightness(1.1);
        }

        /* Full width pill for language selection */
        .selection-pill.full-width {
            width: 100%;
            padding: 14px 20px;
            font-size: 17px;
        }

        /* Loading state for data refresh */
        .data-loading-indicator {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 15px;
            color: var(--text-muted);
            font-size: 14px;
        }

        .data-loading-indicator.visible {
            display: flex;
        }

        .data-loading-indicator .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        .step-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
            margin-top: 4px;
        }

        .step-number {
            font-family: var(--font-emphasis);
            width: 28px;
            height: 28px;
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
        }

        .step-number.--active {
            animation: active-step-pulse 2.4s ease-in-out infinite;
        }

        @keyframes active-step-pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(var(--accent-secondary-rgb, 255, 204, 0), 0);
            }
            50% {
                transform: scale(1.12);
                box-shadow: 0 0 0 7px rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.22);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .step-number.--active {
                animation: none;
                box-shadow: 0 0 0 4px rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.22);
            }
        }

        .step-title {
            font-family: var(--font-emphasis);
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.015em;
        }

        .level-selector {
            display: flex;
            flex-wrap: nowrap;
            gap: 0;
            justify-content: flex-start;
            background: var(--bg-tertiary);
            border-radius: 12px;
            padding: 4px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        .level-selector::-webkit-scrollbar {
            height: 6px;
        }

        .level-selector::-webkit-scrollbar-track {
            background: transparent;
        }

        .level-selector::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

        /* Step-header annotations ("X excluded", level coverage info, etc.).
           Match the surrounding header font (var(--font-emphasis)) and drop
           the italic so they read as quiet labels rather than a different
           voice. Positioning is handled by the parent .step-header-actions
           group, which keeps the annotation tight against the help button
           on the right edge. */
        .level-info-line {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .level-btn {
            flex: 0 0 auto;
            min-width: 60px;
            padding: 10px 14px;
            background: transparent;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--text-muted);
            position: relative;
        }

        .level-btn.has-progress::after,
        .level-btn.has-partial-progress::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 4px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(to right,
                var(--accent-secondary) 0,
                var(--accent-secondary) var(--level-progress),
                rgba(var(--accent-secondary-rgb), 0.2) var(--level-progress),
                rgba(var(--accent-secondary-rgb), 0.2) 100%);
        }
        .level-btn.is-complete::after {
            background: var(--accent-secondary);
        }

        .level-btn:hover {
            background: rgba(255, 107, 53, 0.1);
            color: var(--text-primary);
        }

        .level-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            padding: 10px 16px;
        }

        /* Slider variant of the level selector — used in % mode (and artist
           mode, which forces % mode). The container loses its scrolling
           pill-row layout and becomes a single block holding the slider UI. */
        .level-selector.level-selector--slider {
            display: block;
            overflow: visible;
            padding: 12px 14px;
        }
        .level-slider-wrap {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .lsw-readout {
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px 12px;
            font-family: var(--font-emphasis);
            font-size: 14px;
            color: var(--text-muted);
        }
        .lsw-readout strong {
            color: var(--text-primary);
            font-weight: 700;
        }
        .lsw-readout .lsw-rank {
            font-size: 16px;
            color: var(--text-primary);
        }
        .lsw-readout .lsw-range {
            color: var(--text-secondary);
        }
        .lsw-readout .lsw-deck-total {
            color: var(--text-muted);
            font-size: 0.78em;
            font-weight: 500;
            opacity: 0.78;
        }
        .lsw-readout .lsw-coverage {
            margin-left: auto;
        }
        /* Segmented level bar — replaces the old <input type="range">
           thumb-on-track. Each .lsw-seg is one snap point; clicking a
           segment selects the range from start through that segment
           ("line within the line" fill). Equal widths regardless of how
           many cards a segment covers, so labels stay readable. */
        .lsw-segments {
            display: flex;
            gap: 2px;
            width: 100%;
            margin: 4px 0 2px;
        }
        .lsw-segments:not(.lsw-scrubber) {
            display: flex;
            gap: 3px;
            width: 100%;
            margin: 6px 0 3px;
            padding: 4px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 999px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
        }
        .lsw-seg {
            flex: 1 1 0;
            min-width: 0;
            height: 14px;
            padding: 0;
            background: var(--bg-secondary, rgba(255, 255, 255, 0.08));
            border: 1px solid transparent;
            border-radius: 3px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .lsw-segments:not(.lsw-scrubber) .lsw-seg {
            height: 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
        }
        .lsw-seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
        .lsw-seg:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
        .lsw-segments:not(.lsw-scrubber) .lsw-seg:first-child,
        .lsw-segments:not(.lsw-scrubber) .lsw-seg:last-child {
            border-radius: 999px;
        }
        .lsw-seg:hover:not(.filled) {
            background: rgba(255, 107, 53, 0.18);
        }
        .lsw-segments:not(.lsw-scrubber) .lsw-seg:hover:not(.filled) {
            background: rgba(255, 107, 53, 0.28);
            transform: scaleY(1.2);
        }
        .lsw-seg.filled {
            background: var(--accent-primary);
        }
        .lsw-seg.selected {
            border-color: var(--text-primary);
            box-shadow: 0 0 0 1px var(--accent-primary);
        }
        .lsw-segments:not(.lsw-scrubber) .lsw-seg.selected {
            border-color: #fff;
            box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.75), 0 0 0 1px var(--accent-primary);
            transform: scaleY(1.35);
        }
        /* Horizontal zoomed scrubber variant: the crammed segment bar becomes a
           scroll-snap "ruler" you swipe/drag left-right; the centered segment is
           magnified and is the selected level. Reuses .lsw-seg selection logic. */
        .lsw-segments.lsw-scrubber {
            gap: 0;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 8px 50% 4px;
            margin: 2px 0;
            scrollbar-width: none;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
                    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
        }
        .lsw-segments.lsw-scrubber::-webkit-scrollbar { display: none; }
        .lsw-segments.lsw-scrubber .lsw-seg {
            flex: 0 0 auto;
            width: 76px;
            height: 40px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            scroll-snap-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.4;
            transform: scale(0.8);
            transition: transform 0.16s ease, opacity 0.16s ease, color 0.16s ease;
            color: var(--text-muted, #8a8f98);
            font: 700 0.82rem/1 var(--font-data, var(--font-emphasis, monospace));
            position: relative;
        }
        .lsw-segments.lsw-scrubber .lsw-seg .lsw-seg-label { pointer-events: none; }
        .lsw-segments.lsw-scrubber .lsw-seg.filled:not(.selected) {
            opacity: 0.62; color: var(--text-secondary, #b7bcc4);
        }
        .lsw-segments.lsw-scrubber .lsw-seg:hover:not(.selected) {
            opacity: 0.8; background: transparent;
        }
        .lsw-segments.lsw-scrubber .lsw-seg.selected {
            opacity: 1;
            transform: scale(1.45);
            color: var(--accent-primary, #ff6b35);
            border: none;
            box-shadow: none;
        }
        .lsw-ticks.lsw-ticks--hidden { display: none !important; }
        .lsw-ticks {
            display: flex;
            font-family: var(--font-emphasis);
            font-size: 12px;
            color: var(--text-muted);
            user-select: none;
            padding: 0;
            gap: 2px;
        }
        .lsw-ticks span {
            flex: 1 1 0;
            min-width: 0;
            text-align: center;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lsw-ticks span:hover {
            color: var(--text-primary);
        }
        .lsw-examples {
            /* Frequency sentence stacked over the example words — a new
               line for the examples, per the readout redesign. */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 3px;
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            min-height: 1.2em;
        }
        .lsw-examples .lsw-freq-sentence {
            color: var(--text-primary);
            font-weight: 500;
            line-height: 1.3;
        }
        .lsw-examples .lsw-freq-sentence strong {
            font-weight: 700;
        }
        .lsw-examples .lsw-egs {
            min-width: 0;
            max-width: 100%;
            color: var(--text-muted);
            line-height: 1.35;
            /* Allow examples to wrap onto two lines, then truncate. */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            word-break: break-word;
        }

        .range-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .study-set-panel {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: color-mix(in srgb, var(--bg-tertiary) 82%, transparent);
        }
        .study-set-overview,
        .study-set-current-copy {
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-family: var(--font-emphasis);
        }
        .study-set-overview strong,
        .study-set-current-copy strong {
            color: var(--text-primary);
            font-size: 14px;
        }
        .study-set-overview span,
        .study-set-current-copy span,
        .study-set-empty {
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.4;
        }
        .study-set-dots {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
            gap: 5px;
        }
        .study-set-legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            color: var(--text-muted);
            font: 600 11px/1 var(--font-emphasis);
        }
        .study-set-legend span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .study-set-legend i {
            width: 7px;
            height: 7px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }
        .study-set-legend i.is-known {
            background: color-mix(in srgb, var(--success) 58%, var(--bg-card));
        }
        .study-set-legend i.is-review {
            background: color-mix(in srgb, var(--warning) 66%, var(--bg-card));
        }
        .study-set-dot {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            height: 32px;
            padding: 0;
            border: 1px solid var(--border-color);
            border-radius: 7px;
            background: linear-gradient(
                to right,
                color-mix(in srgb, var(--success) 58%, var(--bg-card)) 0 var(--set-known-end),
                color-mix(in srgb, var(--warning) 66%, var(--bg-card)) var(--set-known-end) var(--set-review-end),
                rgba(255, 255, 255, 0.045) var(--set-review-end) 100%
            );
            color: var(--text-primary);
            font: 700 11px/1 var(--font-emphasis);
            cursor: pointer;
            transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
        }
        .study-set-dot.is-partial {
            border-color: rgba(var(--accent-secondary-rgb), 0.48);
        }
        .study-set-dot:hover:not(:disabled) {
            border-color: var(--accent-primary);
            color: var(--text-primary);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }
        .study-set-dot.is-complete {
            border-color: var(--accent-secondary);
        }
        .study-set-dot.is-current {
            border-color: var(--accent-primary);
            box-shadow:
                0 0 0 3px var(--bg-card),
                0 0 0 6px rgba(var(--accent-primary-rgb), 0.72),
                0 8px 18px rgba(var(--accent-primary-rgb), 0.28);
            color: var(--text-primary);
            z-index: 2;
            animation: current-study-set-pulse 1.65s ease-in-out infinite;
        }
        @keyframes current-study-set-pulse {
            0%, 100% {
                transform: translateY(-1px) scale(1);
                filter: brightness(1);
                box-shadow:
                    0 0 0 3px var(--bg-card),
                    0 0 0 6px rgba(var(--accent-primary-rgb), 0.72),
                    0 8px 18px rgba(var(--accent-primary-rgb), 0.28);
            }
            45% {
                transform: translateY(-4px) scale(1.09);
                filter: brightness(1.12);
                box-shadow:
                    0 0 0 3px var(--bg-card),
                    0 0 0 8px rgba(var(--accent-primary-rgb), 0.42),
                    0 11px 24px rgba(var(--accent-primary-rgb), 0.36);
            }
            62% {
                transform: translateY(-1px) scale(1.03);
                filter: brightness(1.04);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .study-set-dot.is-current {
                animation: none;
                transform: translateY(-1px) scale(1.04);
            }
        }
        .study-set-dot.is-empty {
            opacity: 0.25;
            cursor: default;
        }
        .range-btn-new.study-set-start {
            width: 100%;
            min-height: 46px;
            font-size: 15px;
            font-weight: 700;
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: var(--accent-primary-text);
        }
        .range-btn-new.study-set-start:hover {
            background: color-mix(in srgb, var(--accent-primary) 88%, white);
            border-color: var(--accent-primary);
            color: var(--accent-primary-text);
        }
        .study-set-review {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--error) 38%, var(--border-color));
            border-radius: 9px;
            background: color-mix(in srgb, var(--error) 8%, transparent);
            color: var(--text-primary);
            font: 650 12px/1.3 var(--font-emphasis);
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
        }
        .study-set-review small {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 600;
        }
        .study-set-review:hover {
            border-color: var(--error);
            background: color-mix(in srgb, var(--error) 13%, transparent);
            transform: translateY(-1px);
        }
        .level-suggestion-toggle {
            width: auto;
            display: flex;
            align-items: center;
            align-self: flex-start;
            gap: 6px;
            padding: 3px 1px;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: var(--text-muted);
            text-align: left;
            cursor: pointer;
            transition: color 0.16s ease;
        }
        .level-suggestion-toggle::before {
            content: "↳";
            font: 600 11px/1 var(--font-data);
            opacity: 0.72;
        }
        .level-suggestion-toggle:hover {
            color: var(--text-secondary);
        }
        .level-suggestion-toggle-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            font-family: var(--font-emphasis);
        }
        .level-suggestion-toggle-copy strong {
            font-size: 11px;
            font-weight: 600;
        }
        .level-suggestion-toggle-copy small {
            display: none;
        }
        .level-suggestion-switch {
            display: none;
        }
        .level-suggestion-switch i {
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--text-muted);
            transition: transform 0.16s ease, background 0.16s ease;
        }
        .level-suggestion-toggle.is-on {
            color: var(--accent-primary);
            background: transparent;
        }
        .level-suggestion-toggle.is-on .level-suggestion-switch {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
        }
        .level-suggestion-toggle.is-on .level-suggestion-switch i {
            background: var(--accent-primary-text);
            transform: translateX(16px);
        }

        .knowledge-overview-trigger {
            position: relative;
            color: var(--text-primary);
            cursor: pointer;
        }
        .knowledge-overview-icon-lines,
        .knowledge-overview-icon-check {
            fill: none;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .knowledge-overview-icon-check {
            color: var(--accent-green);
        }
        .knowledge-overview-count {
            position: absolute;
            right: -2px;
            bottom: 0;
            min-width: 25px;
            padding: 2px 4px;
            border: 2px solid var(--bg-primary);
            border-radius: 999px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            font: 750 11px/1 var(--font-emphasis);
            letter-spacing: -0.02em;
        }

        body.knowledge-overview-open {
            overflow: hidden;
        }
        .knowledge-overview-modal {
            position: fixed;
            inset: 0;
            z-index: 2600;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(4, 7, 12, 0.76);
            backdrop-filter: blur(12px);
        }
        .knowledge-overview-modal[hidden] {
            display: none;
        }
        /* The knowledge overview is a TOP sheet: it hangs from the top edge and
           drops down, and it leaves the same way. The syn-leave confirmation
           borrows this chrome and now shares the same top entrance, so every
           sheet built on it arrives from the same edge. */
        .knowledge-overview-modal {
            place-items: start center;
            padding-top: max(20px, env(safe-area-inset-top));
        }
        .knowledge-overview-modal .knowledge-overview-sheet {
            animation: knowledgeOverviewDropIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .knowledge-overview-modal.is-closing {
            animation: knowledgeOverviewBackdropOut 170ms linear both;
            pointer-events: none;
        }
        .knowledge-overview-modal.is-closing .knowledge-overview-sheet {
            animation: knowledgeOverviewDropOut 170ms cubic-bezier(0.4, 0, 1, 1) both;
        }
        @keyframes knowledgeOverviewDropIn {
            from { transform: translateY(-18px) scale(0.985); opacity: 0; }
            to { transform: none; opacity: 1; }
        }
        @keyframes knowledgeOverviewDropOut {
            from { transform: none; opacity: 1; }
            to { transform: translateY(-16px) scale(0.985); opacity: 0; }
        }
        @keyframes knowledgeOverviewSlideDownIn {
            from { transform: translateY(-100%); }
            to { transform: none; }
        }
        @keyframes knowledgeOverviewSlideUpOut {
            from { transform: none; }
            to { transform: translateY(-100%); }
        }
        @keyframes knowledgeOverviewBackdropOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .knowledge-overview-modal,
            .knowledge-overview-modal.is-closing,
            .knowledge-overview-modal .knowledge-overview-sheet,
            .knowledge-overview-modal.is-closing .knowledge-overview-sheet {
                animation: none;
            }
        }
        .knowledge-overview-sheet {
            display: flex;
            flex-direction: column;
            width: min(580px, 100%);
            max-height: min(760px, calc(calc(100dvh / var(--ui-zoom, 1)) - 40px));
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 20px;
            background: linear-gradient(155deg, rgba(29, 35, 46, 0.99), rgba(13, 17, 24, 0.99));
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }
        .knowledge-overview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 16px 8px;
        }
        .knowledge-overview-header h2 {
            margin: 0;
            color: var(--text-primary);
            font: 700 19px/1.15 var(--font-emphasis);
            letter-spacing: -0.02em;
        }
        .knowledge-overview-close {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.055);
            color: var(--text-primary);
            font: 400 22px/1 var(--font-reading);
            cursor: pointer;
        }
        .knowledge-overview-summary {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 14px;
            margin: 0 16px 8px;
            padding: 7px 10px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.045);
            color: var(--text-muted);
            font-size: 11px;
        }
        .knowledge-overview-summary strong {
            color: var(--accent-green);
            font-size: 12px;
        }
        .knowledge-overview-list {
            min-height: 0;
            overflow-y: auto;
            padding: 0 16px 16px;
            overscroll-behavior: contain;
        }
        .knowledge-overview-section + .knowledge-overview-section {
            margin-top: 18px;
        }
        .knowledge-overview-section h3 {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0 0 7px;
            color: var(--text-secondary);
            font: 700 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }
        .knowledge-overview-section h3 span {
            display: inline-grid;
            place-items: center;
            min-width: 20px;
            height: 20px;
            padding: 0 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-muted);
            font-size: 11px;
        }
        .knowledge-overview-rows {
            display: grid;
            gap: 5px;
        }
        /* Section tabs: Meanings / Expressions / Attached forms, one at a
           time. Sticky so the switch stays in reach down a long list. */
        .knowledge-overview-tabs {
            position: sticky;
            top: 0;
            z-index: 1;
            display: flex;
            gap: 4px;
            margin: 0 0 12px;
            padding: 4px;
            border-radius: 11px;
            background: color-mix(in srgb, var(--bg-card) 92%, #fff 8%);
        }
        .knowledge-overview-tab {
            flex: 1 1 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 36px;
            padding: 6px 10px;
            border: 0;
            border-radius: 8px;
            background: none;
            color: var(--text-muted);
            font: 700 13px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .knowledge-overview-tab span {
            color: inherit;
            font: 600 11px/1 var(--font-reading);
            opacity: 0.75;
        }
        .knowledge-overview-tab.is-active {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }
        /* One block per (lemma, POS) pair, headed the way the card back heads
           its sections: coloured POS, then the lemma it belongs to. */
        .knowledge-overview-group + .knowledge-overview-group {
            margin-top: 14px;
        }
        .knowledge-overview-group-head {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin: 0 0 7px;
            padding: 6px 10px;
            border-left: 3px solid rgb(var(--sense-match-rgb));
            border-radius: 6px;
            background: rgba(var(--sense-match-rgb), 0.1);
        }
        .knowledge-overview-group-pos {
            color: rgb(var(--sense-match-rgb));
            font: 800 12px/1.2 var(--font-emphasis);
            letter-spacing: 0.04em;
        }
        .knowledge-overview-group-lemma {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: color-mix(in srgb, rgb(var(--sense-match-rgb)) 58%, var(--text-primary));
            font: 700 15px/1.2 var(--font-emphasis);
        }
        .knowledge-overview-group-count {
            margin-left: auto;
            color: var(--text-muted);
            font: 600 11px/1 var(--font-reading);
        }
        .knowledge-overview-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: stretch;
            gap: 6px;
            min-height: 46px;
            border: 1px solid rgba(255, 255, 255, 0.085);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.035);
        }
        .knowledge-overview-row.is-known {
            border-color: color-mix(in srgb, var(--accent-green) 34%, transparent);
            background: color-mix(in srgb, var(--accent-green) 7%, transparent);
        }
        .knowledge-overview-row.is-review {
            border-color: color-mix(in srgb, var(--error) 32%, transparent);
            background: color-mix(in srgb, var(--error) 6%, transparent);
        }
        .knowledge-overview-focus {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            padding: 6px 4px 6px 10px;
            border: 0;
            background: none;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        .knowledge-overview-status {
            flex: 0 0 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
        }
        .is-known .knowledge-overview-status {
            background: var(--accent-green);
            box-shadow: 0 0 8px color-mix(in srgb, var(--accent-green) 60%, transparent);
        }
        .is-review .knowledge-overview-status {
            background: var(--error);
            box-shadow: 0 0 8px color-mix(in srgb, var(--error) 60%, transparent);
        }
        .knowledge-overview-copy {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 2px 6px;
            min-width: 0;
        }
        .knowledge-overview-copy strong {
            color: var(--text-primary);
            font: 650 14px/1.25 var(--font-reading);
        }
        .knowledge-overview-copy small {
            flex-basis: 100%;
            color: var(--text-muted);
            font: 500 11px/1.3 var(--font-reading);
        }
        .knowledge-overview-pos {
            color: var(--accent-secondary);
            font-size: 11px;
            font-weight: 750;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .knowledge-overview-actions {
            display: grid;
            grid-template-columns: 38px 38px;
            gap: 4px;
            align-items: center;
            padding-right: 7px;
        }
        .knowledge-overview-mark {
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 9px;
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-muted);
            font: 750 17px/1 var(--font-emphasis);
            cursor: pointer;
        }
        .knowledge-overview-mark.mark-known:hover,
        .knowledge-overview-mark.mark-known.is-active {
            border-color: var(--accent-green);
            background: color-mix(in srgb, var(--accent-green) 16%, transparent);
            color: var(--accent-green);
        }
        .knowledge-overview-mark.mark-review:hover,
        .knowledge-overview-mark.mark-review.is-active {
            border-color: var(--error);
            background: color-mix(in srgb, var(--error) 14%, transparent);
            color: color-mix(in srgb, var(--error) 82%, white);
        }

        @media (max-width: 560px) {
            .knowledge-overview-modal {
                place-items: end center;
                padding: 0;
            }
            .knowledge-overview-sheet {
                width: 100%;
                max-height: min(calc(88dvh / var(--ui-zoom, 1)), 820px);
                border-right: 0;
                border-bottom: 0;
                border-left: 0;
                border-radius: 20px 20px 0 0;
            }
            .knowledge-overview-header {
                padding: 12px 12px 6px;
            }
            .knowledge-overview-summary {
                margin-right: 12px;
                margin-left: 12px;
            }
            /* Top sheet on mobile: flush to the top edge, rounded on the
               bottom, entering and leaving through the top edge. The syn-leave
               confirmation is a short dialog, not an inventory, so it keeps the
               compact drop-in from the shared block above rather than becoming
               a full-bleed sheet. */
            .knowledge-overview-modal:not(.syn-leave-modal) {
                place-items: start center;
                padding: 0;
            }
            .knowledge-overview-modal:not(.syn-leave-modal) .knowledge-overview-sheet {
                border-top: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.13);
                border-radius: 0 0 20px 20px;
                max-height: min(calc(88dvh / var(--ui-zoom, 1)), 820px);
                animation-name: knowledgeOverviewSlideDownIn;
            }
            .knowledge-overview-modal:not(.syn-leave-modal).is-closing .knowledge-overview-sheet {
                animation-name: knowledgeOverviewSlideUpOut;
            }
            .knowledge-overview-modal:not(.syn-leave-modal) .knowledge-overview-header {
                padding-top: calc(12px + env(safe-area-inset-top));
            }
            .knowledge-overview-list {
                padding-right: 12px;
                padding-bottom: 14px;
                padding-left: 12px;
            }
            .knowledge-overview-row {
                gap: 4px;
                min-height: 46px;
            }
            .knowledge-overview-actions {
                grid-template-columns: 34px 34px;
                padding-right: 5px;
            }
            .knowledge-overview-mark {
                width: 34px;
                height: 34px;
            }
        }

        /* Range buttons: completion % drives a left-to-right gradient on the
           button bg — yellow on the filled portion, transparent on the rest
           so the page bg shows through and the yellow visibly IS the fill.
           Text is a single colour (--text-primary, white in this dark theme)
           so the label stays readable across the boundary regardless of
           where the fill cuts through it. @property lets --rb-fill animate
           as a percentage so :hover smoothly extends the fill to 100%. */
        @property --rb-fill {
            syntax: '<percentage>';
            inherits: false;
            initial-value: 0%;
        }

        .range-btn-new {
            font-family: var(--font-emphasis);
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            min-width: 81px;
            position: relative;
            overflow: hidden;
            /* --rb-fill defaults to the inline --rb-pct set by the JS render,
               but :hover sets --rb-fill directly so it wins the cascade
               against the inline value. */
            --rb-fill: var(--rb-pct, 0%);
            background: linear-gradient(to right,
                var(--accent-secondary) 0%,
                var(--accent-secondary) var(--rb-fill),
                transparent var(--rb-fill),
                transparent 100%);
            transition: --rb-fill 0.3s ease, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
        }

        /* Studied sets: full accent on the filled portion, translucent
           accent on the unfilled portion. Both halves stay tinted with
           the accent colour family, so --accent-secondary-text — which
           is white for dark accents (Bad Bunny red, etc.) and dark for
           light accents (yellow) — reads against either side. A plain
           white unfilled bg looks crisp for light accents but goes
           white-on-white invisible for dark-accent / white-text artists. */
        .range-btn-new.has-progress {
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            background: linear-gradient(to right,
                var(--accent-secondary) 0%,
                var(--accent-secondary) var(--rb-fill),
                rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.4) var(--rb-fill),
                rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.4) 100%);
            font-weight: 600;
        }

        /* Hover always fills to 100% and switches text to the on-yellow
           contrast colour — applies to never-started buttons too so the
           full-yellow hover state isn't white-on-yellow. */
        .range-btn-new:hover {
            --rb-fill: 100%;
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            box-shadow: 0 0 15px rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.3);
            transform: translateY(-2px);
        }

        .range-btn-new:active {
            transform: scale(0.95);
        }

        .range-btn-new.disabled,
        .range-btn-new:disabled {
            background: var(--bg-secondary);
            color: var(--text-muted);
            border-color: var(--border-color);
            cursor: not-allowed;
            opacity: 0.35;
            pointer-events: none;
        }

        .range-btn-new.disabled:hover,
        .range-btn-new:disabled:hover {
            background: var(--bg-secondary);
            color: var(--text-muted);
            border-color: var(--border-color);
            box-shadow: none;
            transform: none;
            cursor: not-allowed;
            pointer-events: none;
        }

        .range-btn-new.disabled:active,
        .range-btn-new:disabled:active {
            transform: none;
            pointer-events: none;
        }

        .range-btn-new.incorrect-range-btn {
            background: rgba(255, 107, 53, 0.15);
            border-color: rgba(255, 107, 53, 0.4);
            color: var(--accent-primary);
        }

        .range-btn-new.incorrect-range-btn:hover {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
            box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
        }

        .range-btn {
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .range-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .range-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .language-tabs {
            display: flex;
            background: transparent;
            border-radius: 12px;
            padding: 0;
            overflow: visible;
        }

        #step1:not(.language-summary-active) > .step-header {
            margin: 0;
            padding-right: 0;
            cursor: pointer;
        }

        #step1:not(.language-summary-active):hover {
            border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card));
        }

        #step1:not(.language-summary-active) > .step-header:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 4px;
            border-radius: 8px;
        }

        .language-step-prompt-arrow {
            margin-left: auto;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 28px;
            line-height: 1;
        }

        #step1.language-summary-active .language-step-prompt-arrow {
            display: none;
        }

        .language-picker-btn {
            width: 100%;
            min-height: 54px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }

        .language-picker-btn:hover,
        .language-picker-btn:focus-visible {
            border-color: var(--accent-primary);
            background: var(--bg-card-hover);
            transform: translateY(-1px);
            outline: none;
        }

        .language-picker-btn-icon {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(var(--accent-primary-rgb), 0.16);
            font-size: 20px;
        }

        .language-picker-btn-label {
            font-family: var(--font-emphasis);
            font-size: 15px;
            font-weight: 700;
            text-align: left;
        }

        .language-picker-btn-arrow {
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 28px;
            line-height: 1;
        }

        .language-picker-options {
            display: none;
        }

        .artist-source-step {
            margin-bottom: 12px;
            padding-bottom: 0;
        }
        #artistSourceStep > .artist-source-header,
        #artistSourceCard > .artist-source-language-btn {
            display: none !important;
        }
        .artist-source-header {
            align-items: flex-end;
            margin-bottom: 9px;
        }
        .artist-source-header > div {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .artist-source-eyebrow {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .artist-source-card {
            display: flex;
            flex-direction: column;
            padding: 10px 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--bg-card);
            gap: 0;
        }
        .artist-source-picker {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
            padding: 2px 0;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
        }
        .artist-source-picker:hover,
        .artist-source-picker:focus-visible {
            background: transparent;
            outline: none;
        }
        .artist-source-picker .language-picker-btn-arrow {
            display: none !important;
        }
        .artist-source-image {
            width: 36px;
            height: 36px;
            min-width: 36px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
            color: #fff;
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.03em;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
        }
        .artist-source-image--fallback {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 4px 14px rgba(var(--accent-primary-rgb), 0.24);
        }
        .artist-source-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 11px;
        }
        .artist-source-name {
            overflow: hidden;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #artistSourceSelectionLabel {
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 600;
            color: var(--accent-primary);
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #artistSourceSelectionLabel::after {
            content: ' ›';
            font-size: 11px;
            opacity: 0.75;
        }
        .artist-source-speech-btn,
        .artist-source-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 11px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.3;
            cursor: pointer;
            white-space: nowrap;
            transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
        }
        .artist-source-speech-btn:hover,
        .artist-source-speech-btn:focus-visible,
        .artist-source-action-btn:hover,
        .artist-source-action-btn:focus-visible {
            border-color: var(--accent-primary);
            background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-card));
            color: var(--text-primary);
            outline: none;
        }
        .artist-source-main-choice {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 0;
            border: 0 !important;
            width: 100%;
        }
        .artist-source-secondary-actions {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        #artistSourceProgress {
            width: 100%;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
        }
        #artistSourceProgress:empty {
            display: none;
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }
        #artistSourceProgress .personal-coverage-wrapper {
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            margin-bottom: 0 !important;
        }
        .artist-vocabulary-scope {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding: 10px 10px 4px;
            border-top: 1px solid var(--border-color);
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 11px;
        }
        .artist-vocabulary-scope-title {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        /* The static explainer now carries the Main/Extra description, so the
           dynamic one-line hint is redundant on the setup page. */
        #artistVocabularyScopeHint {
            display: none;
        }
        .artist-vocabulary-scope-buttons {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            padding: 3px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-card);
        }
        .artist-vocabulary-scope-btn {
            min-width: 66px;
            min-height: 32px;
            padding: 6px 12px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        .artist-vocabulary-scope-btn.selected {
            background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-tertiary));
            color: var(--text-primary);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 52%, transparent);
        }
        .artist-vocabulary-scope-btn.is-locked {
            opacity: 0.52;
            border: 1px dashed color-mix(in srgb, var(--text-muted) 48%, transparent);
            cursor: not-allowed;
        }
        #artistVocabularyScopeHint {
            line-height: 1.35;
        }
        @media (max-width: 430px) {
            .artist-source-main-choice {
                flex-wrap: wrap;
                gap: 8px;
            }
            .artist-source-secondary-actions {
                margin-left: auto;
            }
            .artist-source-speech-btn,
            .artist-source-action-btn {
                min-height: auto;
            }
            .artist-vocabulary-scope {
                grid-template-columns: 1fr;
                gap: 7px;
            }
            .artist-vocabulary-scope-buttons {
                width: 100%;
            }
        }

        .extra-translation-unavailable {
            margin: 2px 8px 10px;
            padding: 9px 12px;
            border: 1px dashed color-mix(in srgb, var(--accent-secondary) 45%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.35;
            text-align: center;
        }

        /* --- Extra scope confirm modal --- */
        .extra-scope-body {
            padding: 4px 4px 0;
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 14px;
            line-height: 1.55;
        }
        .extra-scope-body p {
            margin: 0 0 12px;
        }
        .extra-scope-lead strong,
        .extra-scope-note strong {
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }
        .extra-scope-points {
            margin: 0 0 14px;
            padding-left: 20px;
            display: grid;
            gap: 6px;
        }
        .extra-scope-points li {
            list-style: disc;
        }
        .extra-scope-note {
            padding: 10px 12px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 30%, var(--border-color));
            font-size: 13px;
        }
        .extra-scope-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            align-items: center;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .extra-scope-cancel {
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: transparent;
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .extra-scope-cancel:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }
        .extra-scope-confirm.range-btn-new {
            width: auto;
            min-width: 180px;
            margin: 0;
            padding: 11px 18px;
        }

        /* --- Extra category (level replacement) selector --- */
        .extra-category-selector {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .extra-category-intro {
            margin: 0;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.4;
        }
        .extra-category-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .extra-category-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-card);
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .extra-category-chip:hover {
            background: var(--bg-card-hover);
            border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
        }
        .extra-category-chip.selected {
            background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-tertiary));
            color: var(--text-primary);
            border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent);
        }
        .extra-category-chip-count {
            padding: 1px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
        }
        .extra-category-chip.selected .extra-category-chip-count {
            background: color-mix(in srgb, var(--accent-primary) 30%, transparent);
            color: var(--text-primary);
        }

        .lang-tab {
            flex: 0 0 auto;
            min-width: 60px;
            padding: 10px 14px;
            background: transparent;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            color: var(--text-muted);
        }

        .lang-tab.active {
            background: var(--bg-card);
            color: var(--text-primary);
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .lang-tab.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            position: relative;
        }

        .lang-tab.disabled:hover {
            background: transparent;
            color: var(--text-muted);
        }

        .cefr-card {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.3s;
        }

        .cefr-card:hover {
            transform: translateY(-2px);
            border-color: var(--accent-primary);
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.15);
        }

        .cefr-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .cefr-level {
            font-family: var(--font-emphasis);
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .cefr-description {
            font-size: 14px;
            color: var(--text-muted);
        }

        .cefr-stats {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .cefr-stats strong {
            color: var(--accent-secondary);
        }

        .cefr-ranges {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            display: none;
        }

        .cefr-card.expanded .cefr-ranges {
            display: block;
        }

        .cefr-ranges-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .cefr-range-btn {
            font-family: var(--font-emphasis);
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .cefr-range-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-blue);
        }

        .cefr-range-btn.selected {
            background: var(--accent-blue);
            color: var(--bg-primary);
            border-color: var(--accent-blue);
            box-shadow: 0 0 10px var(--glow-blue);
        }

        .preset-size-btn {
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .preset-size-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .preset-size-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .group-size-selector {
            display: inline-flex;
            gap: 3px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 999px;
            padding: 3px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
            justify-content: center;
            align-items: center;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
        }

        .group-size-selector::-webkit-scrollbar {
            height: 6px;
        }

        .group-size-selector::-webkit-scrollbar-track {
            background: transparent;
        }

        .group-size-selector::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

        .group-size-btn {
            font-family: var(--font-reading);
            flex: 0 0 auto;
            padding: 6px 14px;
            background: transparent;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1.35;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            min-width: 44px;
            color: var(--text-muted);
            text-align: center;
        }

        .group-size-btn:hover:not(.selected) {
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
        }

        .group-size-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
            font-weight: 700;
            padding: 6px 15px;
        }

        .group-size-selector.header-toggle {
            display: inline-flex;
            gap: 2px;
            margin-left: auto;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 999px;
            padding: 3px;
            overflow: visible;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
            align-items: center;
        }

        .header-toggle .group-size-btn {
            padding: 6px 16px;
            font-size: 13px;
            min-width: 50px;
            background: transparent;
            border: none;
            border-radius: 999px;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: var(--font-reading);
            font-weight: 600;
            color: var(--text-muted);
            line-height: 1.35;
        }

        .header-toggle .group-size-btn:first-child {
            border-right: none;
        }

        .header-toggle .group-size-btn:hover:not(.selected) {
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
        }

        .header-toggle .group-size-btn.selected {
            padding: 6px 16px;
            background: var(--accent-primary);
            border-color: transparent;
            color: var(--accent-primary-text);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
            font-weight: 700;
        }

        .header-toggle .group-size-btn.selected:hover {
            background: var(--accent-primary);
        }

        /* Settings modal variant */
        .group-size-selector.settings-toggle {
            display: inline-flex;
            gap: 2px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 999px;
            padding: 3px;
            overflow: visible;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
            align-items: center;
        }

        .settings-toggle .group-size-btn {
            padding: 4px 13px;
            font-size: 12px;
            min-width: 44px;
            background: transparent;
            border: none;
            border-radius: 999px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            font-family: var(--font-reading);
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1.35;
            text-align: center;
        }

        .settings-toggle .group-size-btn:first-child {
            border-right: none;
        }

        .settings-toggle .group-size-btn:hover:not(.selected) {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.06);
        }

        .settings-toggle .group-size-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
            font-weight: 700;
        }

        .step-row {
            display: flex;
            gap: 15px;
            width: 100%;
        }

        .step-half {
            flex: 1;
            min-width: 0;
            max-width: 90%;
        }

        .step-half:first-child {
            flex: 0.9;
        }

        .step-half:last-child {
            flex: 1.1;
        }

        .step-half .step-header {
            margin-bottom: 10px;
        }

        .step-header-inline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .step-header-inline .step-header {
            margin-bottom: 0;
        }

        .step-header-inline .group-size-selector {
            margin-top: 0;
            flex-shrink: 0;
        }

        .lemma-toggle-btn,
        .cognate-toggle-btn,
        .grammar-toggle-btn,
        .slang-toggle-btn,
        .entity-toggle-btn {
            font-family: var(--font-reading);
            flex: 1 1 auto;
            padding: 6px 14px;
            background: transparent;
            border: none;
            border-radius: 999px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.25;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            min-width: 58px;
            color: var(--text-muted);
            white-space: nowrap;
            text-align: center;
        }

        .lemma-toggle-btn:hover:not(.selected),
        .cognate-toggle-btn:hover:not(.selected),
        .grammar-toggle-btn:hover:not(.selected),
        .slang-toggle-btn:hover:not(.selected),
        .entity-toggle-btn:hover:not(.selected) {
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
        }

        .lemma-toggle-btn.selected,
        .cognate-toggle-btn.selected,
        .grammar-toggle-btn.selected,
        .slang-toggle-btn.selected,
        .entity-toggle-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
            font-weight: 700;
        }

        .lemma-toggle-btn.disabled,
        .cognate-toggle-btn.disabled,
        .grammar-toggle-btn.disabled,
        .slang-toggle-btn.disabled,
        .entity-toggle-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .lemma-toggle-unavailable .lemma-toggle-btn[data-lemma="on"],
        .cognate-toggle-unavailable .cognate-toggle-btn[data-cognate="exclude"] {
            opacity: 0.62;
            cursor: help;
        }

        .step-help-btn {
            position: static;
            margin-left: auto;
            width: auto;
            height: auto;
            min-width: unset;
            min-height: unset;
            border-radius: 0;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            padding: 2px 4px;
            line-height: 1;
            transition: color 0.3s;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .step-help-btn:hover {
            color: var(--accent-secondary);
        }
        .step-help-btn svg,
        .progress-info-btn svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .progress-info-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
        }
        .progress-info-btn {
            border: 0;
        }
        .progress-info-btn:hover {
            color: var(--accent-secondary);
        }

        .percent-mode-btn,
        .estimate-level-btn {
            padding: 6px 12px;
            border-radius: 6px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
        }

        .percent-mode-btn {
            /* margin handled by .btn-with-info container */
        }

        .estimate-level-btn {
            /* margin handled by .btn-with-info container */
        }

        .percent-mode-btn:hover,
        .estimate-level-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
            color: var(--text-primary);
        }

        .percent-mode-btn.active {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .estimate-level-btn.hidden {
            display: none;
        }

        .btn-with-info {
            position: relative;
            display: inline-flex;
            margin-left: auto;
        }

        .btn-with-info + .btn-with-info {
            margin-left: 8px;
        }

        .btn-info-icon {
            position: absolute;
            top: -12px;
            right: -12px;
            width: 28px;
            height: 28px;
            min-width: 44px;
            min-height: 44px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 10;
        }

        .btn-info-icon:hover {
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
        }

        .btn-info-tooltip {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 220px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-secondary);
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .btn-info-tooltip.visible {
            display: block;
        }

        .btn-info-tooltip p {
            margin: 0 0 6px 0;
        }

        .btn-info-tooltip p:last-child {
            margin-bottom: 0;
        }

        .step-info-tooltip {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .step-info-tooltip.visible {
            display: flex;
        }

        .step-info-tooltip-inner {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            max-width: 400px;
            width: 90%;
            font-size: 15px;
            line-height: 1.6;
            color: var(--text-secondary);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            position: relative;
        }

        .step-info-tooltip-inner p {
            margin: 0 0 8px 0;
        }

        .step-info-tooltip-inner p:last-child {
            margin-bottom: 0;
        }

        .step-info-tooltip-inner strong {
            color: var(--text-primary);
        }

        /* Tabbed help inside the Choose Level tooltip — the lemma + cognate
           "?" buttons were folded into here as additional tabs alongside
           the original level explainer. Reuses .settings-tab styling for
           consistency with the settings + help modals. */
        .step-info-tooltip-inner .help-tabs {
            display: flex;
            gap: 4px;
            margin: -4px -4px 12px;
            border-bottom: 1px solid var(--border-color);
            padding: 0 0 6px;
        }
        .step-info-tooltip-inner .help-tabs .settings-tab {
            flex: 1 1 0;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            background: transparent;
            border: none;
            border-radius: 6px 6px 0 0;
            color: var(--text-muted);
            cursor: pointer;
            font-family: var(--font-emphasis);
            transition: all 0.2s ease;
        }
        .step-info-tooltip-inner .help-tabs .settings-tab:hover {
            color: var(--text-primary);
            background: rgba(255, 107, 53, 0.08);
        }
        .step-info-tooltip-inner .help-tabs .settings-tab.active {
            color: var(--accent-primary);
            background: rgba(255, 107, 53, 0.12);
        }
        .step-info-tooltip-inner > .settings-tab-content {
            display: none;
        }
        .step-info-tooltip-inner > .settings-tab-content.active {
            display: block;
        }

        .step-header-with-help {
            display: flex;
            align-items: center;
            padding-right: 20px;
        }

        /* Right-aligned group on step 2 — holds the optional info line, the
           CEFR/% mode toggle, and the help "?" button. margin-left: auto
           pushes the whole cluster to the far edge of the header. */
        .step-header-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* The "?" help button stays absolute-positioned in the top-right
           corner of its .setup-step parent across all steps — the override
           that pulled it back into flex flow inside the actions group has
           been removed so the buttons read as a consistent affordance per
           box rather than floating mid-header. The actions group still
           lays out its other children (info-line, toggle) in flex flow. */
        .step-header-actions .level-info-line {
            margin-left: 0;
            padding-right: 0;
        }

        /* CEFR mode toggle — a single on/off pill. Off (default) = the
           standard percentage-coverage experience. On = light up and switch
           the level selector to CEFR (A1–C2) pills. The styling reuses the
           same shape/padding as the old segmented toggle so the header
           lockup keeps its rhythm; only the count of buttons changed. */
        .level-mode-btn {
            padding: 6px 12px;
            font-size: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-muted);
            font-weight: 600;
            font-family: var(--font-emphasis);
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 1;
        }

        .level-mode-btn:hover:not(.active) {
            background: rgba(255, 107, 53, 0.15);
            color: var(--text-primary);
            border-color: rgba(255, 107, 53, 0.4);
        }

        .level-mode-btn.active {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .level-mode-btn.active:hover {
            background: var(--accent-primary);
        }

        .cefr-actions {
            display: none;
            margin-top: 15px;
            gap: 10px;
            justify-content: space-between;
        }

        .cefr-card.expanded .cefr-actions {
            display: flex;
        }

        .start-level-btn {
            flex: 1;
            padding: 12px;
            background: var(--accent-green);
            color: var(--bg-primary);
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .start-level-btn:hover {
            box-shadow: 0 0 20px var(--glow-green);
        }

        .start-level-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            overflow-y: auto;
            padding: 16px;
            box-sizing: border-box;
        }

        .modal:not(.hidden) {
            display: flex;
        }

        .modal-content {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            border: 1px solid var(--border-color);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .modal-header h3 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            margin: 0;
            font-size: 24px;
            font-weight: 700;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-muted);
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            color: var(--accent-primary);
        }

        /* Fullscreen Modal */
        .fullscreen-modal {
            max-width: 600px;
            max-height: calc(90vh / var(--ui-zoom, 1));
            overflow-y: auto;
        }

        /* Lyric Breakdown Modal */
        .lyric-breakdown-body {
            padding: 0 20px 20px;
            overflow-y: auto;
            max-height: calc(calc(90vh / var(--ui-zoom, 1)) - 60px);
        }

        /* Homograph chips */
        .homograph-chips {
            display: flex;
            justify-content: flex-start;
            gap: 8px;
            margin-top: -8px;
            margin-bottom: 4px;
            flex-wrap: wrap;
        }

        .homograph-chip {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .homograph-chip:active {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Word Popup */
        .word-popup {
            position: fixed;
            z-index: 1100;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            min-width: 220px;
            max-width: 300px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }

        .word-popup.hidden {
            display: none;
        }

        .word-popup .popup-word {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .word-popup .popup-translation {
            font-size: 15px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .word-popup .popup-detail {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .word-popup .popup-go-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 6px 14px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            font-weight: 600;
        }

        .word-popup .popup-go-btn:hover {
            filter: brightness(1.15);
        }

        /* Breakdown trigger button on lyric example */
        .breakdown-btn {
            background: rgba(255,255,255,0.12);
            border: none;
            color: white;
            font-size: 18px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s;
            margin-left: 8px;
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .breakdown-btn:hover {
            opacity: 1;
        }

        /* The button used to carry an inline `position:relative; z-index:999`,
           which only needed to clear its own siblings in the song-credit row
           but instead outranked every card-face overlay in the same stacking
           context (.synonyms-panel / .conjugation-panel sit at z-index 10/11),
           so the green logo painted straight through the open panel. A local
           z-index keeps it above the example box's rails/tints and below the
           overlays. */
        .spotify-btn {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 54px;
            min-height: 54px;
            padding: 6px;
            border: 1px solid transparent;
            border-radius: 50%;
            background: none;
            appearance: none;
            -webkit-appearance: none;
            box-shadow: none;
            text-decoration: none;
            opacity: 0.85;
            transition: opacity 0.2s, border-color 0.16s ease, background 0.16s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .spotify-btn svg {
            width: 48px;
            height: 48px;
            pointer-events: none;
        }
        .spotify-btn:hover {
            opacity: 1;
            background: none;
        }
        .spotify-btn:focus-visible {
            outline: 2px solid #1db954;
            outline-offset: 2px;
            box-shadow: none;
        }
        .spotify-btn:active {
            box-shadow: none;
        }
        /* Long-press on the Spotify button toggles card-wide lyric autoplay
           (merged from the old standalone autoplay button) — this ring shows
           it's on, matching the previous button's active treatment. */
        .spotify-btn.autoplay-active {
            border-color: #1db954;
            background: rgba(29, 185, 84, 0.18);
            opacity: 1;
        }
        .spotify-btn.autoplay-loading {
            animation: autoplay-loading-pulse 0.8s ease-in-out infinite alternate;
        }
        /* Between the tap and audio actually starting there is a real, variable
           delay (token refresh, device handoff, track load). A ring sweeping
           around the logo says "working" without moving the logo itself.
           spotify.js clears it on the SDK's player_state_changed, on failure,
           and on a failsafe timeout — it can never spin forever. */
        .spotify-btn {
            position: relative;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }
        .spotify-btn.spotify-loading::after {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: 50%;
            background: conic-gradient(from 0deg,
                rgba(29, 185, 84, 0) 0deg,
                rgba(29, 185, 84, 0.15) 140deg,
                rgba(29, 185, 84, 1) 320deg,
                rgba(29, 185, 84, 0) 360deg);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            animation: spotify-loading-spin 0.9s linear infinite;
            pointer-events: none;
        }
        @keyframes spotify-loading-spin {
            to { transform: rotate(360deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .spotify-btn.spotify-loading::after {
                animation: spotify-loading-pulse 1.1s ease-in-out infinite alternate;
            }
            @keyframes spotify-loading-pulse {
                from { opacity: 0.25; }
                to { opacity: 1; }
            }
        }

        /* Confirmed playback uses an authentic 4-bar soundwave equalizer
           oscillation. The element is injected by spotify.js only after Spotify
           reports that audio is actually playing. */
        .spotify-music-visualizer {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.5px;
            border-radius: 50%;
            background: rgba(10, 14, 20, 0.84);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.18s ease;
            z-index: 2;
        }
        .spotify-btn.spotify-playing:not(.spotify-loading) .spotify-music-visualizer {
            opacity: 1;
        }
        .spotify-music-visualizer i {
            display: block;
            width: 2.5px;
            height: 14px;
            border-radius: 999px;
            background: #1db954;
            box-shadow: 0 0 5px rgba(29, 185, 84, 0.45);
            transform-origin: 50% 100%;
            animation: spotify-playing-amplitude 0.75s ease-in-out infinite alternate;
        }
        .spotify-music-visualizer i:nth-child(1) {
            animation-delay: 0s;
            animation-duration: 0.62s;
        }
        .spotify-music-visualizer i:nth-child(2) {
            animation-delay: -0.28s;
            animation-duration: 0.84s;
        }
        .spotify-music-visualizer i:nth-child(3) {
            animation-delay: -0.5s;
            animation-duration: 0.7s;
        }
        .spotify-music-visualizer i:nth-child(4) {
            animation-delay: -0.15s;
            animation-duration: 0.78s;
        }
        @keyframes spotify-playing-amplitude {
            0% { transform: scaleY(0.22); opacity: 0.6; }
            45% { transform: scaleY(0.95); opacity: 1; }
            100% { transform: scaleY(0.38); opacity: 0.75; }
        }
        /* Reduced motion keeps static equalizer bars as the playing cue. */
        @media (prefers-reduced-motion: reduce) {
            .spotify-music-visualizer i {
                animation: none;
                transform: scaleY(0.65);
                opacity: 0.9;
            }
        }

        /* Touch browsers can retain a generic button/link focus ring after a
           tap. That ring inherits the Spanish theme red and reads as part of
           Spotify's green mark. The control already has loading/autoplay state
           in Spotify green, so suppress only the touch focus decoration. */
        @media (hover: none), (max-width: 767px) {
            .spotify-btn,
            .spotify-btn:focus,
            .spotify-btn:focus-visible,
            .spotify-btn:active {
                border-color: transparent;
                outline: none;
                box-shadow: none;
                -webkit-tap-highlight-color: transparent;
            }
            .spotify-btn.autoplay-active {
                border-color: #1db954;
            }
        }

        /* Long-press popover on the Spotify button — the autoplay control that
           used to fire blind on hold. Same dismiss contract as the lookup
           sheet: any tap outside closes it. */
        .spotify-autoplay-popover {
            position: fixed;
            z-index: 400;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: min(260px, calc(100vw - 16px));
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            background: #1b232e;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
            animation: spotify-popover-rise 160ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .spotify-autoplay-popover-text {
            color: rgba(255, 255, 255, 0.78);
            font-size: 12.5px;
            line-height: 1.35;
        }
        .spotify-autoplay-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: flex-start;
            min-height: 34px;
            padding: 6px 14px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: #e6eaf0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .spotify-autoplay-toggle:hover {
            border-color: rgba(255, 255, 255, 0.45);
        }
        .spotify-autoplay-toggle-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
        }
        .spotify-autoplay-toggle.is-on {
            border-color: #1db954;
            background: rgba(29, 185, 84, 0.18);
        }
        .spotify-autoplay-toggle.is-on .spotify-autoplay-toggle-dot {
            background: #1db954;
        }
        @keyframes spotify-popover-rise {
            from { opacity: 0; transform: translateY(6px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .spotify-autoplay-popover { animation: none; }
        }


        .ref-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            min-height: 48px;
            padding: 2px;
            border-radius: 8px;
            background: none;
            border: none;
            opacity: 0.85;
            transition: all 0.2s;
            text-decoration: none;
        }
        /* Keep every reference destination comfortably tappable and give
           the icon artwork enough weight beside the larger Spotify action. */
        .ref-icon-btn img,
        .ref-icon-btn svg {
            width: 42px;
            height: 42px;
        }

        /* Match the sense-progress trigger's quiet glass treatment. The icon
           artwork remains white while its tile stays translucent rather than
           reading as a separate solid-white control. */
        .ref-conj-btn,
        .ref-syn-btn {
            color: var(--text-primary);
        }
        /* Plate treatment left over from the old boxed artwork. The Synonyms
           tile now draws a stroked glyph like the Known / Look up tiles and
           takes all of its chrome (radius, background, border, icon box) from
           .ref-tile, so it must not carry a divergent plate of its own. */
        .ref-conj-btn svg rect {
            fill: rgba(255, 255, 255, 0.07);
            stroke: rgba(255, 255, 255, 0.18);
            stroke-width: 1.5;
        }
        .ref-conj-btn svg text {
            fill: currentColor;
        }

        /* The favicon proxy supplies small raster marks, which become soft
           after card-button scaling. Recreate the two simple marks as local
           vector backgrounds so they remain crisp at every device density. */
        .ref-icon-btn[title="SpanishDict"],
        .ref-icon-btn[title="Reverso Context"] {
            position: relative;
        }
        .ref-icon-btn[title="SpanishDict"] img,
        .ref-icon-btn[title="Reverso Context"] img {
            opacity: 0;
        }
        .ref-icon-btn[title="SpanishDict"]::before,
        .ref-icon-btn[title="Reverso Context"]::before {
            content: "";
            position: absolute;
            width: 42px;
            height: 42px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .ref-icon-btn[title="SpanishDict"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='6' fill='white'/%3E%3Cg fill='%232684df'%3E%3Ccircle cx='14.5' cy='15' r='4.8'/%3E%3Cpath d='M9.8 22h9.4l1.3 13H8.5z'/%3E%3Ccircle cx='28' cy='27.5' r='4.8'/%3E%3Cpath d='M23 6h10l-1.3 15h-7.4z'/%3E%3C/g%3E%3C/svg%3E");
        }
        .ref-icon-btn[title="Reverso Context"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='6' fill='white'/%3E%3Cpath d='M10 15h17c5 0 8 3 8 7 0 1.4-.4 2.8-1.1 4' fill='none' stroke='%231e91d6' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='m13 9-6 6 6 6' fill='none' stroke='%231e91d6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 27H15c-5 0-8-3-8-7 0-1.4.4-2.8 1.1-4' fill='none' stroke='%23ef4938' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='m29 33 6-6-6-6' fill='none' stroke='%23ef4938' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
        .ref-icon-btn:hover {
            opacity: 1;
            transform: scale(1.1);
            background: none;
            border: none;
        }

        /* Conjugation panel — slides in over the card face.
           Synonyms panel reuses the same layout (slide-in, header, close
           button) so the two share these selectors. Synonym-specific
           rules live further down. */
        .conjugation-panel {
            /* VERB green — every accent inside the panel derives from this. */
            --conj-accent: 0, 212, 170;
        }
        .conjugation-panel,
        .synonyms-panel {
            position: absolute;
            /* Was top/bottom: -40px (extended past the card); .card-face
               has overflow: hidden so the close button at the panel top
               got clipped into the invisible region and couldn't be
               clicked. Pin the panel inside the card so it fully covers
               it instead of spilling past the top/bottom edges. */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 18px 20px;
            background: var(--bg-card);
            border-radius: 16px;
            /* Column layout so .syn-body can claim the remaining height; the
               panel itself no longer scrolls, the list inside it does. */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 10;
            transform: translateX(calc(100% + 30px));
            transition: transform 0.25s ease;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            visibility: hidden;
        }
        .conjugation-panel.visible,
        .synonyms-panel.visible {
            transform: translateX(0);
            visibility: visible;
        }

        /* ---- Conjugation panel, full-viewport ------------------------------
           While open the panel is re-parented to <body> (see
           hostConjPanel in flashcards-conj.js) so it can cover the
           whole screen: inside the card it was clipped by .card-face's
           overflow and positioned against the card's 3D transform. Everything
           below only applies once it is a direct child of <body>. */
        body > .conjugation-panel {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: calc(100dvh / var(--ui-zoom, 1));
            max-width: none;
            border-radius: 0;
            padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
            overflow-y: auto;
            overscroll-behavior: contain;
            z-index: 3000;
            /* The verb POS colour drives every accent in here. */
            --conj-accent: 0, 212, 170;
        }
        body > .conjugation-panel .conj-tables-wrap {
            /* Claim the space a full screen provides. Centring the short table
               in it, or pinning it to the top, both left a large void; the
               rows grow instead, so the extra height becomes legibility. */
            flex: 1 1 auto;
            align-items: stretch;
            margin-top: 18px;
        }
        body > .conjugation-panel .conj-table {
            font-size: 20px;
            /* Rows share the wrap's height between them. */
            height: 100%;
            max-height: 420px;
        }
        body > .conjugation-panel .conj-form {
            font-size: 26px;
            padding: 14px 16px 14px 8px;
        }
        body > .conjugation-panel .conj-pronoun {
            font-size: 16px;
            padding: 14px 18px 14px 16px;
        }

        /* Sense-assignment provenance panel (JST diagnostic). Toggled via
           display (see toggleProvenancePanel) — full-cover card overlay. */
        .provenance-panel {
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0;
            padding: 18px 18px 22px;
            background: var(--bg-card);
            border-radius: 16px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 11;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        }
        .provenance-panel .prov-close {
            position: absolute;
            top: 10px; right: 12px;
            width: 30px; height: 30px;
            border: none;
            background: rgba(255,255,255,0.08);
            color: var(--text-primary);
            border-radius: 50%;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }
        .provenance-panel .prov-close:hover { background: rgba(255,255,255,0.16); }
        .provenance-panel .prov-title {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-secondary);
            margin-bottom: 12px;
            padding-right: 34px;
        }
        .provenance-panel .prov-release-box {
            margin-bottom: 14px;
            padding: 9px 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .provenance-panel .prov-release-tag {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--accent-primary, #60a5fa);
        }
        .provenance-panel .prov-release-sub {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .provenance-panel .prov-wsd-card {
            margin-bottom: 16px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .provenance-panel .prov-wsd-head {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--accent-primary, #60a5fa);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .provenance-panel .prov-wsd-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .provenance-panel .prov-wsd-stage {
            background: rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 6px;
            padding: 7px 9px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .provenance-panel .prov-wsd-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.6;
        }
        .provenance-panel .prov-wsd-val {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary, #f1f5f9);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .provenance-panel .prov-sense-top {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }
        .provenance-panel .prov-algo-pill {
            margin-left: auto;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 999px;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .provenance-panel .prov-badge--overlay {
            background: rgba(168, 85, 247, 0.16);
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, 0.35);
        }
        .provenance-panel .prov-badge--entity {
            background: rgba(16, 185, 129, 0.16);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.35);
        }
        .provenance-panel .prov-badge--dict {
            background: rgba(59, 130, 246, 0.16);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.35);
        }
        .provenance-panel .prov-badge--auto {
            background: rgba(148, 163, 184, 0.16);
            color: #cbd5e1;
            border: 1px solid rgba(148, 163, 184, 0.35);
        }
        .provenance-panel .prov-badge--ai {
            background: rgba(245, 158, 11, 0.16);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.35);
        }
        .provenance-panel .prov-algo-detail {
            font-size: 11.5px;
            color: var(--text-secondary);
            margin: 3px 0 6px;
        }
        .provenance-panel .prov-ex-item {
            margin-top: 8px;
            padding: 8px 10px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 6px;
            border-left: 2px solid var(--accent-primary, #60a5fa);
        }
        .provenance-panel .prov-ex-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
        }
        .provenance-panel .prov-ex-song {
            font-size: 11.5px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .provenance-panel .prov-tech-details {
            margin-top: 8px;
            padding-top: 5px;
            border-top: 1px dashed rgba(255, 255, 255, 0.08);
            font-size: 11px;
        }
        .provenance-panel .prov-tech-details summary {
            cursor: pointer;
            opacity: 0.65;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .provenance-panel .prov-tech-details summary:hover {
            opacity: 0.95;
        }
        .provenance-panel .prov-row {
            padding: 10px 0;
            border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
        }
        .provenance-panel .prov-gloss {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .provenance-panel .prov-pos {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-left: 6px;
        }
        .provenance-panel .prov-model {
            font-size: 14px;
            color: var(--accent-secondary);
            margin-top: 2px;
        }
        .provenance-panel .prov-meta {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .provenance-panel .prov-meta code {
            background: rgba(255,255,255,0.08);
            padding: 1px 5px;
            border-radius: 4px;
            font-size: 11px;
        }
        .provenance-panel .prov-notes {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
            font-style: italic;
            line-height: 1.35;
        }
        .provenance-panel .prov-proposal {
            display: inline-flex;
            margin-top: 6px;
            padding: 2px 7px;
            border: 1px solid rgba(167, 139, 250, 0.5);
            border-radius: 999px;
            background: rgba(139, 92, 246, 0.12);
            color: #d8ccff;
            font-family: var(--font-data);
            font-size: 11px;
            letter-spacing: 0.02em;
        }
        .provenance-panel .prov-empty {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .spanish-dict-panel[hidden] {
            display: none;
        }
        .spanish-dict-panel .sd-meta-intro {
            margin: -2px 34px 14px 0;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.45;
        }
        .spanish-dict-panel .sd-meta-sense {
            margin: 0 0 8px;
            border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
            overflow: hidden;
        }
        .spanish-dict-panel .sd-meta-sense summary {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px 12px;
            align-items: baseline;
            padding: 10px 12px;
            color: var(--text-primary);
            cursor: pointer;
            list-style: none;
        }
        .spanish-dict-panel .sd-meta-sense summary::-webkit-details-marker {
            display: none;
        }
        .spanish-dict-panel .sd-meta-sense summary::after {
            content: '›';
            grid-column: 2;
            grid-row: 1 / span 2;
            align-self: center;
            color: var(--text-secondary);
            font-size: 18px;
            line-height: 1;
            transform: rotate(90deg);
            transition: transform 140ms ease;
        }
        .spanish-dict-panel .sd-meta-sense[open] summary::after {
            transform: rotate(-90deg);
        }
        .spanish-dict-panel .sd-meta-summary-gloss {
            min-width: 0;
            font-size: 15px;
            font-weight: 650;
            overflow-wrap: anywhere;
        }
        .spanish-dict-panel .sd-meta-summary-identity {
            grid-column: 1;
            color: var(--text-secondary);
            font-family: var(--font-data);
            font-size: 11px;
            letter-spacing: 0.025em;
        }
        .spanish-dict-panel .sd-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 12px;
            margin: 0;
            padding: 10px 12px;
            border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
        }
        .spanish-dict-panel .sd-meta-field {
            min-width: 0;
        }
        .spanish-dict-panel .sd-meta-field--wide {
            grid-column: 1 / -1;
        }
        .spanish-dict-panel .sd-meta-field dt,
        .spanish-dict-panel .sd-meta-examples-heading,
        .spanish-dict-panel .sd-meta-candidates > span {
            color: var(--text-secondary);
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.055em;
            text-transform: uppercase;
        }
        .spanish-dict-panel .sd-meta-field dd {
            margin: 2px 0 0;
            color: var(--text-primary);
            font-size: 12px;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .spanish-dict-panel .sd-meta-field dd.sd-meta-code,
        .spanish-dict-panel .sd-meta-candidates code {
            font-family: var(--font-data);
        }
        .spanish-dict-panel .sd-meta-field dd.sd-meta-code {
            color: var(--accent-secondary);
        }
        .spanish-dict-panel .sd-meta-usage {
            margin: 0 12px 10px;
            padding: 9px 10px;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, transparent);
            border-radius: 8px;
            background: color-mix(in srgb, var(--accent-secondary) 9%, transparent);
        }
        .spanish-dict-panel .sd-meta-usage-heading {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
            align-items: baseline;
            color: var(--text-secondary);
            font-size: 11px;
        }
        .spanish-dict-panel .sd-meta-usage-heading strong {
            color: var(--accent-secondary);
            font-size: 12px;
        }
        .spanish-dict-panel .sd-meta-usage-detail,
        .spanish-dict-panel .sd-meta-caveat {
            margin-top: 5px;
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.35;
        }
        .spanish-dict-panel .sd-meta-candidates {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
            margin-top: 7px;
        }
        .spanish-dict-panel .sd-meta-candidates code {
            padding: 1px 5px;
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            color: var(--text-primary);
            font-size: 11px;
        }
        .spanish-dict-panel .sd-meta-examples-heading {
            margin: 0 12px 5px;
        }
        .spanish-dict-panel .sd-meta-example,
        .spanish-dict-panel .sd-meta-empty {
            margin: 0 12px 10px;
            padding: 8px 9px;
            border-radius: 7px;
            background: rgba(255,255,255,0.045);
        }
        .spanish-dict-panel .sd-meta-example-target {
            color: var(--text-primary);
            font-size: 12px;
            line-height: 1.4;
        }
        .spanish-dict-panel .sd-meta-example-english,
        .spanish-dict-panel .sd-meta-empty {
            margin-top: 3px;
            color: var(--text-secondary);
            font-size: 11px;
            font-style: italic;
            line-height: 1.4;
        }
        .spanish-dict-panel .sd-meta-source-link {
            display: inline-flex;
            gap: 5px;
            align-items: center;
            margin-top: 5px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--accent-secondary);
            font: inherit;
            font-size: 12px;
            text-decoration: none;
            cursor: pointer;
        }
        .spanish-dict-panel .sd-meta-source-link:hover,
        .spanish-dict-panel .sd-meta-source-link:focus-visible {
            text-decoration: underline;
        }

        @media (max-width: 520px) {
            .spanish-dict-panel .sd-meta-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .spanish-dict-panel .sd-meta-sense summary {
                grid-template-columns: minmax(0, 1fr) auto;
            }
        }

        /* Owner-only audit marker appended to a definition when the model had
           to propose a gloss outside SpanishDict's supplied sense menu. */
        .model-proposed-marker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            padding: 1px 5px;
            border: 1px solid rgba(167, 139, 250, 0.55);
            border-radius: 999px;
            background: rgba(139, 92, 246, 0.12);
            color: #d8ccff;
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: 0.06em;
            vertical-align: 0.15em;
        }

        /* Synonyms / antonyms panel — two stacked sections, words rendered
           as inline pill-links sized by relationship strength. */
        /* Grows to fill whatever the header leaves, so the list occupies the
           card rather than sitting in a short block at the top. */
        .syn-body {
            flex: 1 1 auto;
            min-height: 0;
            padding: 16px 2px 8px;
            overflow-y: auto;
        }
        /* Header: headword + the synonyms/antonyms tab pair. */
        .syn-header {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 2px 40px 14px 2px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .syn-headword {
            font-family: var(--font-reading);
            font-size: 26px;
            font-weight: 700;
            color: #fff;
        }
        .syn-tabs {
            display: flex;
            gap: 8px;
        }
        .syn-tab {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 15px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            font: 650 14px/1 var(--font-reading);
            cursor: pointer;
        }
        .syn-tab.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 70%, white);
            background: color-mix(in srgb, var(--accent-primary) 22%, var(--bg-card));
            color: #fff;
        }
        .syn-tab-count {
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            font: 700 11px/1.4 var(--font-data);
        }

        /* Only the selected tab's panel renders, and it takes the rest of the
           card so the list has the whole surface rather than a short block
           floating under the header. */
        .syn-panel {
            display: none;
        }
        .syn-panel.selected {
            display: block;
        }
        .syn-empty {
            margin: 0;
            padding: 24px 2px;
            color: var(--text-muted);
            font-size: 14px;
        }
        .syn-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-content: flex-start;
        }
        /* One affordance for every row: they all navigate, so none of them is
           marked out as the special one. The chevron is the "tappable" cue. */
        .syn-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 13px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            text-decoration: none;
            line-height: 1.2;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }
        .syn-item:hover,
        .syn-item:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
            background: rgba(var(--accent-primary-rgb), 0.16);
            transform: translateY(-1px);
        }
        .syn-item .syn-word {
            font-weight: 600;
        }
        .syn-item.syn-strong .syn-word {
            font-size: 17px;
        }
        .syn-item.syn-weak .syn-word {
            font-size: 15px;
        }
        .syn-item .syn-context {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
        }
        .syn-go {
            color: var(--text-muted);
            font-size: 17px;
            line-height: 1;
        }
        .syn-item:hover .syn-go {
            color: #fff;
        }

        .syn-close-btn {
            position: absolute;
            top: 12px;
            right: 14px;
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-primary);
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            z-index: 3;
        }
        .syn-close-btn:hover {
            background: rgba(255, 255, 255, 0.16);
        }

        /* Leave-the-app confirmation for a synonym with no card in the deck.
           Structure and chrome come from .knowledge-overview-modal /
           .knowledge-overview-sheet; only the narrower width, the body copy
           and the Cancel/Continue row are specific to it. It sits above the
           knowledge overview (z-index 2600) because it can never be the
           surface underneath. */
        .syn-leave-modal {
            z-index: 2700;
        }
        .syn-leave-sheet {
            width: min(400px, 100%);
        }
        .syn-leave-body {
            margin: 0 20px 18px;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.45;
        }
        .syn-leave-actions {
            display: flex;
            gap: 10px;
            padding: 0 20px 20px;
        }

        /* ---- Header: infinitive + type badge, translation, non-finite
           forms — all centred. Close button floats top-right out of flow. */
        /* Real 48px target. At 22px in a 4x8 pad this was the smallest control
           on a full-screen sheet whose only job it could not do was close. */
        .conj-close-btn {
            position: absolute;
            top: 12px;
            right: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: 32px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            z-index: 2;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, transform 0.12s ease;
        }
        .conj-close-btn:hover {
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
        }
        .conj-close-btn:active { transform: scale(0.94); }

        .conj-header {
            margin-bottom: 16px;
            padding: 4px 0 14px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            text-align: center;
        }
        .conj-title {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            justify-content: center;
        }
        .conj-infinitive {
            font-size: 30px;
            font-weight: 700;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            line-height: 1.1;
        }
        .conj-translation {
            font-size: 16px;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 4px;
        }
        .conj-type-badge {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 5px;
            background: rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.24);
            color: #66e4cc;
            border: 1px solid rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.4);
        }

        /* Non-finite forms. Reference detail, so they sit below the paradigm
           behind a divider rather than in the header beside the infinitive. */
        .conj-nonfinite {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .conj-nf-item {
            display: inline-flex;
            align-items: baseline;
            gap: 7px;
            padding: 5px 11px;
            border-radius: 7px;
            background: rgba(255,255,255,0.04);
        }
        .conj-nf-item.is-active {
            background: rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.2);
            box-shadow: inset 0 0 0 1px rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.5);
        }
        .conj-nf-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .conj-nf-form {
            font-size: 17px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .conj-nf-item.is-active .conj-nf-form {
            color: white;
        }

        /* ---- Mood toggle ----
           Individual pill buttons, matching the `.level-btn` style used
           on the setup / Choose Card page — transparent when idle,
           filled with the mood's accent colour when active. Each mood's
           accent (blue/purple/pink) flows in via the --mood-accent
           custom property set on each button. Rendered only when more
           than one mood has data; single-mood cases skip it. */
        .conj-mood-toggle {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 14px;
        }
        .conj-mood-toggle-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 600;
            font-family: var(--font-reading);
            padding: 9px 18px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 110px;
        }
        .conj-mood-toggle-btn:hover {
            background: color-mix(in srgb, var(--mood-accent, rgba(255,255,255,0.4)) 10%, transparent);
            color: var(--text-primary);
        }
        .conj-mood-toggle-btn.conj-mood-toggle-active {
            background: var(--mood-accent);
            color: white;
        }

        /* ---- Tense picker (horizontal row of tenses for the active mood) ----
           Same pill-style treatment as mood toggle and the setup page's
           level buttons: clean, rounded, no borders. Sized smaller than
           moods because there are more of them per row. */
        .conj-tense-toggles {
            margin-bottom: 12px;
        }
        .conj-tense-toggle {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }
        .conj-match-tense {
            margin: 0 0 10px;
            text-align: center;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 650;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .conj-tense-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-reading);
            padding: 6px 12px;
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .conj-tense-btn:hover {
            background: color-mix(in srgb, var(--mood-accent) 12%, transparent);
            color: var(--text-primary);
        }
        .conj-tense-btn.conj-tense-active {
            background: color-mix(in srgb, var(--mood-accent) 85%, transparent);
            color: white;
        }

        /* ---- Conjugation table ---- */
        .conj-tables-wrap {
            margin-top: 12px;
            display: flex;
            justify-content: center;
        }
        .conj-table {
            /* Width fits content, and the wrap above centres it — the
               two columns cluster around the panel's horizontal midpoint
               instead of hugging the left edge. */
            width: auto;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 17px;
            color: var(--text-primary);
        }
        .conj-table tr {
            /* No cell borders — the active-row box-shadow + subtle
               striping do the visual work. Removes the lopsided look
               that came from each row being a <tr> with its own border. */
        }
        .conj-table tr:nth-child(even) td {
            background: rgba(255,255,255,0.02);
        }
        /* The row the card's own form lives in. This is the single fact the
           learner opened the panel to locate, so it is a filled green block
           with a rail and a glow, not a 14%-alpha tint that reads as striping. */
        .conj-table tr.conj-active td {
            background: rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.3);
        }
        .conj-table tr.conj-active td:first-child {
            border-radius: 8px 0 0 8px;
            box-shadow: inset 4px 0 0 rgb(var(--conj-accent, var(--accent-primary-rgb))),
                        inset 0 2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75),
                        inset 0 -2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75);
        }
        .conj-table tr.conj-active td:last-child {
            border-radius: 0 8px 8px 0;
            box-shadow: inset -2px 0 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75),
                        inset 0 2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75),
                        inset 0 -2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75);
        }
        .conj-table tr.conj-active .conj-pronoun {
            color: #eafffa;
            font-weight: 700;
        }
        .conj-table tr.conj-active .conj-stem,
        .conj-table tr.conj-active .conj-ending {
            color: white;
            font-weight: 700;
        }

        .conj-pronoun {
            /* Right-aligned so pronouns butt up against the visual centre
               line; form column starts just to the right of centre. Feels
               balanced without a hard column line. */
            padding: 9px 16px 9px 14px;
            color: var(--text-muted);
            font-size: 14px;
            font-family: var(--font-reading);
            white-space: nowrap;
            text-align: right;
        }
        .conj-form {
            padding: 9px 14px 9px 6px;
            font-size: 19px;
            font-family: var(--font-reading);
            text-align: left;
            min-width: 120px;
        }

        /* SpanishDict "full paradigm" button at the bottom of the panel.
           Sized as a proper tap target — the verb-conjugation panel has
           a predictable vertical footprint (header + toggles + fixed
           6-person table), so there's room for a real button without
           risking overflow. Escape hatch for compound / imperative
           tenses we don't ship locally. */
        .conj-sd-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 18px auto 4px;
            padding: 12px 20px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            background: rgba(255,255,255,0.04);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            width: fit-content;
            min-width: 240px;
            justify-content: center;
        }
        .conj-sd-link:hover {
            background: rgba(var(--accent-primary-rgb), 0.14);
            border-color: rgba(var(--accent-primary-rgb), 0.45);
            color: white;
        }
        .conj-sd-link img {
            opacity: 0.85;
            width: 18px;
            height: 18px;
        }
        .conj-sd-link:hover img {
            opacity: 1;
        }

        /* "Drill this verb" — the single entry point into conjugation mode
           (app/conjugation/). Sits above the external paradigm link and is
           tinted with the accent because, unlike that one, it stays in the
           app. */
        .conj-drill-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 18px auto 0;
            padding: 12px 20px;
            border: 1px solid rgba(var(--accent-primary-rgb), 0.45);
            border-radius: 10px;
            background: rgba(var(--accent-primary-rgb), 0.12);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            width: fit-content;
            min-width: 240px;
        }
        .conj-drill-link:hover {
            background: rgba(var(--accent-primary-rgb), 0.22);
            border-color: rgba(var(--accent-primary-rgb), 0.7);
        }
        .conj-drill-link + .conj-sd-link {
            margin-top: 10px;
        }

        /* "No conjugation data" variant — when we don't have inline data
           for a verb's lemma (defective verbs like "hay"). The panel
           collapses to: header + short message + a SpanishDict button. */
        .conj-empty-msg {
            text-align: center;
            color: var(--text-muted);
            font-size: 15px;
            font-style: italic;
            padding: 32px 16px 18px;
        }
        .conj-empty-msg strong {
            color: var(--text-primary);
            font-style: normal;
            font-weight: 600;
        }

        /* Related-paradigm note — shown when the panel is displaying the
           paradigm of a different verb than the card's own lemma
           (classic case: card is "hay" but we render haber's full table).
           Keeps the UI honest about whose paradigm the table actually is. */
        .conj-related-note {
            margin: 0 0 12px;
            padding: 10px 14px;
            border-radius: 8px;
            background: rgba(var(--accent-primary-rgb), 0.08);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.4;
            text-align: center;
        }
        .conj-related-note strong {
            color: var(--accent-primary);
            font-weight: 700;
        }
        .conj-sd-link-prominent {
            /* The no-data case uses the same `.conj-sd-link` button — no
               extra styling needed. This class is kept as a hook in case
               we want to differentiate later. */
        }
        /* Stem: muted. Ending: accent-coloured + bold. For regular verbs
           every ending in a tense shares the same colour + shape so the
           pattern pops visually. For irregulars, the common prefix is
           shorter so more of the word lights up — signalling "this is
           where the irregular happens". */
        .conj-stem {
            color: var(--text-muted);
            opacity: 0.7;
        }
        .conj-ending {
            /* The endings are the pattern the table exists to show, so they
               carry the VERB colour like everything else in this panel. They
               used to take the app's orange-red accent, which fought the
               green mood/active-row treatment around them. */
            color: rgb(var(--conj-accent, var(--accent-primary-rgb)));
            font-weight: 600;
        }
        .conj-ending-full {
            /* Fully irregular form (no shared prefix with infinitive) — still
               coloured but slightly dimmer so the table doesn't scream. */
            opacity: 0.95;
        }

        /* Back button on card (nav stack) */
        .nav-back-btn {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: 1px solid var(--accent-primary);
            font-size: 16px;
            border-radius: 6px;
            padding: 4px 10px;
            cursor: pointer;
        }

        .nav-back-btn.hidden {
            display: none;
        }

        .tooltip-detail-btn {
            width: 100%;
            margin-top: 12px;
            padding: 12px 16px;
            min-height: 44px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .tooltip-detail-btn:hover {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        /* "More about this project →" link in the Welcome tab — same shape
           as the project's other call-to-action buttons. */
        .help-more-info-btn {
            display: inline-block;
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .help-more-info-btn:hover {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        /* Cognate Rules Modal */
        .cognate-rules-body {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .cognate-rules-body .rules-intro {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .rule-section {
            margin-bottom: 20px;
        }

        .rule-section h4 {
            color: var(--accent-secondary);
            font-family: var(--font-emphasis);
            margin-bottom: 10px;
            font-size: 16px;
        }

        .rule-section ul {
            margin: 0;
            padding-left: 20px;
        }

        .rule-section li {
            margin-bottom: 5px;
        }

        .rule-examples {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .rule-examples .example {
            background: var(--bg-tertiary);
            padding: 4px 10px;
            border-radius: 4px;
            font-family: var(--font-data);
            font-size: 13px;
            color: var(--text-muted);
        }

        .suffix-rule {
            margin: 15px 0;
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
        }

        .suffix-rule code {
            display: inline-block;
            background: var(--bg-primary);
            padding: 4px 10px;
            border-radius: 4px;
            font-family: var(--font-data);
            color: var(--text-primary);
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 8px;
        }

        /* Estimation Modal Styles */
        .estimation-body {
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            min-height: calc(50vh / var(--ui-zoom, 1));
        }

        .estimation-start-btn {
            width: 100%;
            padding: 16px 20px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
        }

        .estimation-start-btn:hover {
            filter: brightness(1.1);
            box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3);
        }

        .estimation-retry-btn {
            width: 100%;
            padding: 14px 20px;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 16px;
            font-weight: 500;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .estimation-retry-btn:hover {
            border-color: var(--text-muted);
            color: var(--text-primary);
        }

        .estimation-progress {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 20px;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            font-family: var(--font-data);
            font-size: 13px;
            color: var(--text-muted);
        }

        .estimation-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .estimation-progress-bar-track {
            width: 100%;
            height: 4px;
            background: color-mix(in srgb, var(--border-color) 70%, transparent);
            border-radius: 999px;
            overflow: hidden;
        }

        .estimation-progress-bar-fill {
            height: 100%;
            background: var(--accent-primary);
            border-radius: 999px;
            transition: width 0.3s ease;
        }

        .estimation-word-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 200px;
        }

        .estimation-word {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: clamp(28px, 7vw, 48px);
            word-break: break-word;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .estimation-lemma {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: 16px;
            font-style: italic;
            color: var(--text-muted);
            margin-bottom: 10px;
            min-height: 20px;
        }

        .estimation-pos {
            text-align: center;
            font-family: var(--font-data);
            font-size: 12px;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 16px;
            padding: 6px 14px;
            background: var(--bg-tertiary);
            border-radius: 6px;
        }

        .estimation-pos:empty {
            display: none !important;
        }

        .estimation-translation {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: 20px;
            color: var(--text-secondary);
            min-height: 30px;
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .estimation-translation.visible {
            opacity: 1;
        }

        .estimation-example {
            max-width: 560px;
            margin: 12px auto;
            font-size: 17px;
            line-height: 1.5;
            color: var(--text-secondary);
            overflow-wrap: anywhere;
        }

        .estimation-rank {
            text-align: center;
            font-family: var(--font-data);
            font-size: 12px;
            color: var(--text-muted);
            min-height: 16px;
            margin-top: 6px;
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .estimation-rank.visible {
            opacity: 1;
        }

        .estimation-reveal {
            text-align: center;
            color: var(--text-muted);
            font-family: var(--font-data);
            font-size: 14px;
            cursor: pointer;
            padding: 10px 16px;
            margin-top: 8px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
        }

        .estimation-reveal:hover {
            color: var(--text-primary);
            border-color: var(--accent-primary);
            background: var(--bg-secondary);
        }

        #estimationTest {
            text-align: center;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .estimation-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .estimation-btn {
            flex: 1;
            padding: 18px 20px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.2s;
        }

        .estimation-btn.know-btn {
            background: rgba(0, 212, 170, 0.2);
            color: var(--accent-green);
            border: 2px solid var(--accent-green);
        }

        .estimation-btn.know-btn:hover {
            background: rgba(0, 212, 170, 0.3);
            transform: scale(1.02);
        }

        .estimation-btn.dont-know-btn {
            background: rgba(255, 82, 82, 0.2);
            color: var(--error);
            border: 2px solid var(--error);
        }

        .estimation-btn.dont-know-btn:hover {
            background: rgba(255, 82, 82, 0.3);
            transform: scale(1.02);
        }

        .estimation-kbd {
            display: inline-block;
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 500;
            padding: 2px 6px;
            margin-left: 6px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 4px;
            vertical-align: middle;
            color: inherit;
            opacity: 0.85;
        }

        @media (max-width: 600px) {
            .estimation-kbd {
                display: none;
            }
            .estimation-buttons {
                gap: 10px;
                margin-top: 15px;
            }
            .estimation-btn {
                padding: 14px 10px;
                font-size: 15px;
            }
        }

        .estimation-result-level {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: clamp(30px, 8vw, 42px);
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .stats-body {
            margin-top: 15px;
        }

        .settings-tabs-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 15px;
        }

        .settings-single-tab-title {
            display: none;
            min-width: 0;
            flex: 1;
            padding: 13px 0;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 15px;
        }
        #settingsModal.settings-single-tab .settings-tabs {
            display: none;
        }
        #settingsModal.settings-single-tab .settings-single-tab-title:not([hidden]) {
            display: block;
        }

        .settings-modal-content {
            box-sizing: border-box;
            width: min(94vw, 620px);
            max-width: 620px;
            max-height: min(calc(88dvh / var(--ui-zoom, 1)), 760px);
            padding: 0 26px 26px;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }
        .settings-modal-content > .settings-tabs-header {
            position: sticky;
            top: 0;
            z-index: 3;
            margin: 0 -26px 18px;
            padding: 8px 16px 0 26px;
            background: color-mix(in srgb, var(--bg-card) 94%, transparent);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .settings-modal-content .settings-tabs {
            min-width: 0;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .settings-modal-content .settings-tabs::-webkit-scrollbar { display: none; }
        .settings-modal-content .settings-tab {
            flex: 0 0 auto;
            padding: 13px 16px;
        }
        .settings-data-intro {
            margin: 3px 0 14px;
            color: var(--text-muted);
            font-size: 13px;
            line-height: 1.45;
        }
        .appearance-settings-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 8px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-secondary);
        }
        .appearance-settings-copy {
            min-width: 0;
        }
        .appearance-settings-copy strong,
        .appearance-settings-copy small {
            display: block;
        }
        .appearance-settings-copy strong {
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 14px;
        }
        .appearance-settings-copy small {
            margin-top: 4px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.35;
        }
        .appearance-selector {
            flex: 0 0 auto;
        }
        .appearance-selector .theme-preference-btn {
            min-width: 58px;
        }
        .appearance-selector .theme-preference-btn:focus-visible {
            position: relative;
            z-index: 1;
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }
        @media (max-width: 520px) {
            .appearance-settings-card {
                align-items: stretch;
                flex-direction: column;
                gap: 11px;
            }
            .appearance-selector {
                width: 100%;
            }
            .appearance-selector .theme-preference-btn {
                flex: 1 1 0;
            }
        }
        .settings-action-row {
            width: 100%;
            border: 0;
            border-bottom: 1px solid var(--border-color);
            border-radius: 0;
            background: transparent;
            color: var(--text-secondary);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }
        .settings-action-row > span:first-child {
            min-width: 0;
        }
        .settings-action-row strong,
        .settings-action-row small {
            display: block;
        }
        .settings-action-row small {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.35;
        }
        .settings-row-action {
            flex: 0 0 auto;
            padding: 4px 9px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            color: var(--text-secondary);
            font: 600 11px/1 var(--font-emphasis);
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }
        .settings-row-action--warning {
            border-color: color-mix(in srgb, var(--warning) 50%, var(--border-color));
            color: var(--warning);
        }

        .vocabulary-import-modal-content {
            box-sizing: border-box;
            width: min(94vw, 650px);
            max-width: 650px;
            max-height: min(calc(90dvh / var(--ui-zoom, 1)), 820px);
            overflow-y: auto;
            padding: 24px;
        }
        .vocabulary-import-modal-content .modal-header {
            margin-bottom: 12px;
        }
        .vocabulary-import-modal-content code {
            color: var(--text-secondary);
            font-family: var(--font-data);
            font-size: 0.92em;
        }
        .vocabulary-import-input-label {
            display: block;
            margin: 8px 0 6px;
            color: var(--text-primary);
            font: 700 13px/1.3 var(--font-reading);
        }
        .vocabulary-import-text {
            box-sizing: border-box;
            width: 100%;
            min-height: 170px;
            resize: vertical;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 12px;
            font: 13px/1.45 var(--font-data);
        }
        .vocabulary-import-text:focus {
            outline: 2px solid rgba(var(--accent-primary-rgb), 0.35);
            border-color: var(--accent-primary);
        }
        .vocabulary-import-actions {
            display: flex;
            justify-content: flex-end;
            gap: 9px;
            margin-top: 13px;
        }
        .vocabulary-import-actions--source {
            justify-content: space-between;
            align-items: center;
        }
        .vocabulary-import-actions button,
        .vocabulary-import-file-label {
            box-sizing: border-box;
            min-height: 38px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 9px 13px;
            font: 650 12px/1.2 var(--font-reading);
            cursor: pointer;
        }
        .vocabulary-import-actions button:not(.secondary-btn) {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
            color: white;
        }
        .vocabulary-import-actions button:disabled {
            cursor: not-allowed;
            opacity: 0.45;
        }
        .vocabulary-import-status {
            min-height: 1.4em;
            margin: 10px 0 0;
            color: var(--text-muted);
            font-size: 12px;
        }
        .vocabulary-import-status.is-error {
            color: var(--error);
        }

        .song-set-modal-content {
            box-sizing: border-box;
            width: min(94vw, 680px);
            max-width: 680px;
            max-height: min(calc(90dvh / var(--ui-zoom, 1)), 820px);
            display: flex;
            flex-direction: column;
            padding: 24px;
            overflow: hidden;
        }
        .song-set-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }
        .song-set-toolbar input {
            min-width: 0;
            min-height: 40px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 8px 11px;
            font: 13px/1.3 var(--font-reading);
        }
        .song-set-toolbar span {
            color: var(--text-muted);
            font: 600 11px/1.2 var(--font-data);
        }
        .song-set-bulk-actions {
            display: flex;
            gap: 8px;
            margin: 10px 0 8px;
        }
        .song-set-bulk-actions button,
        .song-set-footer button {
            min-height: 36px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 8px 12px;
            font: 650 12px/1.2 var(--font-reading);
            cursor: pointer;
        }
        .song-set-list {
            min-height: 180px;
            overflow-y: auto;
            border-block: 1px solid var(--border-color);
        }
        .song-set-option {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 10px 4px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
            cursor: pointer;
        }
        .song-set-option:last-child { border-bottom: 0; }
        .song-set-option input {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-primary);
        }
        .song-set-option strong,
        .song-set-option small { display: block; }
        .song-set-option strong {
            overflow: hidden;
            font: 650 13px/1.25 var(--font-reading);
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .song-set-option small {
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 11px;
        }
        .song-set-empty {
            padding: 30px 10px;
            color: var(--text-muted);
            text-align: center;
        }
        .spotify-playlist-option {
            display: block;
            width: 100%;
            grid-template-columns: none;
            background: none;
            border: 0;
            border-bottom: 1px solid var(--border-color);
            font: inherit;
            text-align: left;
        }
        .spotify-playlist-option:hover { background: var(--bg-tertiary); }
        .spotify-playlist-option:disabled,
        .spotify-playlist-option.is-disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .spotify-playlist-option:disabled:hover,
        .spotify-playlist-option.is-disabled:hover { background: none; }
        .spotify-playlist-option:last-child { border-bottom: 0; }
        .playlist-lyrics-progress {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 0;
            margin: 4px 0 8px;
        }
        .playlist-lyrics-hero {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .playlist-lyrics-spinner {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            border: 2.5px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-color));
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.75s linear infinite;
        }
        .playlist-lyrics-progress.is-complete .playlist-lyrics-spinner {
            animation: none;
            border-color: var(--accent-primary);
            background: var(--accent-primary);
        }
        .playlist-lyrics-percent {
            font: 700 42px/1 var(--font-data);
            letter-spacing: -0.04em;
            color: var(--text-primary);
        }
        .playlist-lyrics-count {
            margin: 0;
            color: var(--text-primary);
            font: 650 14px/1.3 var(--font-reading);
        }
        .playlist-lyrics-bar {
            height: 10px;
            overflow: hidden;
            border-radius: 999px;
            background: var(--bg-tertiary);
        }
        .playlist-lyrics-bar-fill {
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: var(--accent-primary);
            transition: width 160ms ease-out;
        }
        .playlist-lyrics-now {
            min-height: 2.6em;
            margin: 0;
            color: var(--text-muted);
            font: 13px/1.35 var(--font-reading);
        }
        .playlist-lyrics-log {
            min-height: 140px;
            max-height: 220px;
            overflow-y: auto;
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-secondary);
        }
        .playlist-lyrics-log-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: baseline;
            padding: 7px 10px;
            border-bottom: 1px solid var(--border-color);
            animation: playlist-song-land 220ms ease-out;
        }
        @keyframes playlist-song-land {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: none; }
        }
        .playlist-lyrics-log-row:last-child { border-bottom: 0; }
        .playlist-lyrics-log-name {
            overflow: hidden;
            font: 13px/1.3 var(--font-reading);
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .playlist-lyrics-log-status {
            color: var(--text-muted);
            font: 650 11px/1 var(--font-data);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .playlist-lyrics-log-row.is-lyrics .playlist-lyrics-log-status,
        .playlist-lyrics-log-row.is-cached .playlist-lyrics-log-status,
        .playlist-lyrics-log-row.is-saved .playlist-lyrics-log-status {
            color: var(--accent-primary);
        }
        .playlist-lyrics-log-row.is-saving .playlist-lyrics-log-status {
            color: var(--text-muted);
        }
        .playlist-lyrics-log-row.is-error .playlist-lyrics-log-status {
            color: var(--error);
        }
        .playlist-lyrics-save-note {
            margin: 2px 0 0;
            color: var(--text-muted);
            font: 12px/1.4 var(--font-reading);
        }
        .playlist-lyrics-save-note code {
            font: 11px/1.3 var(--font-data);
        }
        #spotifyPlaylistModal {
            z-index: 2100;
        }
        #spotifyPlaylistModal.is-importing {
            pointer-events: auto;
        }
        #spotifyPlaylistModal.is-dismiss-locked .song-set-footer,
        #spotifyPlaylistModal.is-dismiss-locked .modal-close {
            pointer-events: none;
        }
        #spotifyPlaylistModal .modal-content {
            pointer-events: auto;
        }
        .song-set-footer {
            display: flex;
            justify-content: flex-end;
            gap: 9px;
            padding-top: 12px;
        }
        .song-set-footer #applySongSetBtn {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
            color: white;
        }
        .song-set-footer #useSpotifyLiveBtn {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
            color: white;
        }
        .vocabulary-import-preview {
            margin-top: 12px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: rgba(var(--accent-primary-rgb), 0.05);
        }
        .vocabulary-import-preview h4 {
            margin: 0 0 10px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }
        .vocabulary-import-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .vocabulary-import-summary > div {
            min-width: 0;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-card);
        }
        .vocabulary-import-summary strong,
        .vocabulary-import-summary span {
            display: block;
        }
        .vocabulary-import-summary strong {
            color: var(--text-primary);
            font: 700 16px/1.1 var(--font-data);
        }
        .vocabulary-import-summary span {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.25;
            text-transform: uppercase;
        }
        .vocabulary-import-preview details {
            margin-top: 10px;
            color: var(--text-secondary);
            font-size: 12px;
        }
        .vocabulary-import-preview pre {
            max-height: 150px;
            overflow: auto;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            color: var(--text-muted);
            font: 11px/1.4 var(--font-data);
        }
        @media (max-width: 560px) {
            .vocabulary-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .vocabulary-import-actions--source { align-items: stretch; flex-direction: column; }
            .vocabulary-import-actions--source > * { width: 100%; text-align: center; }
        }

        .settings-tabs {
            display: flex;
            gap: 0;
            flex: 1;
        }

        .settings-tab {
            background: transparent;
            border: none;
            padding: 12px 20px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .settings-tab:hover {
            color: var(--text-primary);
        }

        .settings-tab.active {
            color: var(--text-primary);
            font-weight: 700;
            border-bottom-color: var(--accent-primary);
        }

        .settings-tabs-header .modal-close {
            position: relative;
            top: auto;
            right: auto;
            margin-right: 10px;
        }

        .settings-defaults-card {
            margin: 4px 0 14px;
            padding: 14px;
            border: 1px solid rgba(var(--accent-primary-rgb), 0.28);
            border-radius: 12px;
            background: rgba(var(--accent-primary-rgb), 0.07);
        }
        .settings-defaults-heading,
        .settings-default-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-family: var(--font-emphasis);
        }
        .settings-defaults-heading strong {
            color: var(--text-primary);
            font-size: 14px;
        }
        .settings-defaults-heading span {
            color: var(--text-muted);
            font-size: 11px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .settings-defaults-warning {
            margin: 8px 0 12px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.45;
        }
        .settings-default-row {
            min-height: 42px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 13px;
        }
        .settings-default-row .settings-toggle {
            flex: 0 0 auto;
        }
        /* Grouped study preferences: a heading row per group, and a
           label column that can hold a "?"-revealed explanation without
           pushing the toggle out of the row. */
        .settings-group-heading {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin: 14px 0 2px;
            padding-top: 10px;
            border-top: 1px solid rgba(var(--accent-primary-rgb), 0.28);
            font-family: var(--font-emphasis);
        }
        /* The intro paragraph already separates the first group. */
        .settings-defaults-warning + .settings-group-heading {
            margin-top: 4px;
            padding-top: 0;
            border-top: none;
        }
        .settings-group-heading strong {
            color: var(--text-primary);
            font-size: 12px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .settings-group-heading span {
            color: var(--text-muted);
            font-size: 11px;
        }
        /* The heading already draws the separator above the group. */
        .settings-group-heading + .settings-default-row {
            border-top: none;
        }
        .settings-row-label-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            min-width: 0;
        }
        .settings-row-explanation {
            display: block;
            max-width: 300px;
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 11px/1.4 var(--font-reading);
        }
        .settings-row-explanation[hidden] {
            display: none;
        }
        .settings-row-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .settings-info-btn {
            display: inline-grid;
            place-items: center;
            width: 22px;
            height: 22px;
            padding: 0;
            border: 1.5px solid color-mix(in srgb, var(--text-primary) 42%, var(--border-color));
            border-radius: 999px;
            background: color-mix(in srgb, var(--text-primary) 8%, transparent);
            color: var(--text-primary);
            cursor: pointer;
            font: 700 12px/1 var(--font-reading);
        }
        .settings-info-btn:hover,
        .settings-info-btn[aria-expanded="true"] {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .settings-inline-explanation {
            margin: -2px 0 14px;
            padding: 11px 13px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.45;
        }
        .settings-inline-explanation[hidden] {
            display: none;
        }
        .settings-inline-explanation strong {
            color: var(--text-primary);
        }
        .settings-inline-explanation p {
            margin: 4px 0 0;
        }

        #helpModal .modal-content,
        .progress-modal-content {
            box-sizing: border-box;
            max-height: calc(86dvh / var(--ui-zoom, 1));
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .settings-tab-content {
            display: none;
        }

        .settings-tab-content.active {
            display: block;
        }

        @media (max-width: 600px) {
            #settingsModal {
                align-items: flex-end;
            }
            .settings-modal-content {
                width: 100%;
                max-height: calc(92dvh / var(--ui-zoom, 1));
                margin: 0;
                padding: 0 18px max(22px, env(safe-area-inset-bottom));
                border-radius: 22px 22px 0 0;
            }
            .settings-modal-content > .settings-tabs-header {
                margin: 0 -18px 16px;
                padding: 7px 10px 0 18px;
            }
            .settings-modal-content .settings-tab {
                padding: 13px 12px;
                font-size: 13px;
            }
            .settings-default-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 8px;
                padding: 10px 0;
            }
            .settings-default-row .settings-toggle {
                width: 100%;
            }
            .settings-default-row .settings-toggle .group-size-btn {
                flex: 1;
            }
        }

        .tap-hint {
            text-align: center;
            color: var(--text-muted);
            font-size: 14px;
            margin-top: 10px;
            font-style: italic;
        }

        .flip-circle {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 60px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
        }

        .flip-circle:hover {
            border-color: rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.02);
        }

        .flip-circle:active {
            transform: scale(0.98);
        }

        .flip-back-area {
            display: block;
            width: 100%;
            /* Vertical padding kept small so single-line words don't carve
               out a fat top block that dwarfs the content below. Wrapping
               content (long word + lemma on narrow screens) still breathes
               because line-height on the inner word div takes over once a
               second line exists. Left-aligned now, so horizontal padding
               only needs to clear the card's own edge padding, not create a
               centered click target. */
            padding: 8px 4px;
            border: 2px solid rgba(255, 255, 255, 0);
            border-radius: 12px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .flip-back-area:hover {
            border-color: transparent;
            background: transparent;
        }

        .flip-back-area:active {
            transform: none;
        }

        /* Long-press popover on the card headword — the direction switch that
           used to appear as a bare button in the card header. Mirrors
           .spotify-autoplay-popover: same shape, same dismiss contract. */
        .direction-popover {
            position: fixed;
            z-index: 400;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: min(260px, calc(100vw - 16px));
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            background: #1b232e;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
            animation: direction-popover-rise 160ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .direction-popover-text {
            color: rgba(255, 255, 255, 0.78);
            font-size: 12.5px;
            line-height: 1.35;
        }
        .direction-popover-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: flex-start;
            min-height: 34px;
            padding: 6px 14px;
            border: 1px solid rgba(var(--accent-primary-rgb), 0.5);
            border-radius: 999px;
            background: rgba(var(--accent-primary-rgb), 0.16);
            color: #e6eaf0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .direction-popover-btn:hover {
            border-color: rgba(var(--accent-primary-rgb), 0.85);
            background: rgba(var(--accent-primary-rgb), 0.26);
        }
        .direction-popover-btn:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }
        .direction-popover-btn-icon {
            font-size: 14px;
            line-height: 1;
            opacity: 0.85;
        }
        @keyframes direction-popover-rise {
            from { opacity: 0; transform: translateY(6px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .direction-popover { animation: none; }
        }

        #flipBtn {
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        #flipBtn:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        #flipBtn:active {
            opacity: 0.8;
        }

        /* Meaning boxes styles */
        .meanings-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin: 15px 0;
            width: 100%;
            padding: 0 5px;
        }

        .meaning-box {
            padding: 14px 20px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            min-width: 100px;
            flex: 1;
            max-width: calc(50% - 5px);
            position: relative;
        }

        .meaning-box:hover {
            transform: translateY(-2px);
            border-color: var(--accent-blue);
        }

        .meaning-box.selected {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            transform: scale(1.02);
        }

        .meaning-box.selected .meaning-text {
            color: var(--bg-primary);
        }

        .meaning-box.selected .meaning-pos {
            color: var(--bg-primary);
            opacity: 0.8;
        }

        .meaning-text {
            font-size: 22px;
            font-weight: 600;
            color: white;
        }

        .meaning-pos {
            font-size: 13px;
            color: white;
            margin-top: 6px;
            font-family: var(--font-data);
            text-transform: uppercase;
            opacity: 0.75;
        }

        .meaning-percent {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            font-size: 12px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 12px;
            font-family: var(--font-data);
        }

        /* Headword and lemma follow the selected POS. The lemma is mixed with
           white for hierarchy and contrast without losing that POS identity. */
        .back-headword {
            color: #fff;
            /* Shrinkable, non-greedy: the POS legend's `margin-left: auto`
               does the pushing, so the word only gives up width when a long
               headword and the pills genuinely cannot share the line. */
            flex: 0 1 auto;
            min-width: 0;
            /* Holding this opens the direction popover, so suppress the
               browser's own long-press selection / callout. */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .back-lemma {
            font-size: 28px;
            font-weight: 600;
            color: color-mix(in srgb, rgb(var(--card-pos-rgb, var(--accent-primary-rgb))) 64%, var(--text-primary));
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
        }

        .back-lemma-row .back-lemma {
            font-size: 30px;
            text-align: left;
        }

        .back-form-note {
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
        }

        .back-form-note::before {
            content: "· ";
        }

        .back-derivation-line {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            gap: 5px;
            margin-top: 5px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.2;
        }

        .back-derivation-line strong {
            color: color-mix(in srgb, var(--accent-primary) 48%, white);
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 700;
        }

        .reverse-example-form {
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px 7px;
            margin: 0 0 9px;
            color: rgba(255, 255, 255, 0.62);
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 500;
            line-height: 1.2;
        }

        .reverse-example-form strong {
            color: color-mix(in srgb, rgb(var(--sense-match-rgb, 132, 201, 168)) 64%, white);
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 700;
        }

        /* Deck Complete Modal Styles */
        .deck-complete-content {
            max-width: 360px;
            text-align: center;
        }

        .deck-complete-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin-bottom: 22px;
        }

        .deck-complete-icon {
            font-size: 40px;
            line-height: 1;
            margin-bottom: 2px;
        }

        .deck-complete-header h3 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            font-size: 24px;
            font-weight: 700;
            margin: 0;
        }

        .deck-complete-score-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 4px 0 10px;
        }

        .deck-score-ring-wrap {
            position: relative;
            width: 104px;
            height: 104px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .deck-score-ring {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .deck-score-ring-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.08);
            stroke-width: 7;
        }

        .deck-score-ring-fill {
            fill: none;
            stroke: var(--accent-green, #10b981);
            stroke-width: 7;
            stroke-linecap: round;
            stroke-dasharray: 264;
            stroke-dashoffset: 264;
            filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.45));
        }

        .deck-score-center {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .deck-score-number {
            font-family: var(--font-emphasis);
            font-size: 24px;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -0.02em;
        }

        .deck-score-label {
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .deck-complete-accuracy {
            font-family: var(--font-data);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: 3px 12px;
            margin-top: 4px;
        }

        .deck-complete-body {
            padding: 0;
        }

        .deck-stat-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .deck-complete-stats {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-bottom: 18px;
        }

        .deck-stat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 14px 10px;
            border-radius: 14px;
            max-width: 130px;
        }

        .deck-stat.correct-stat {
            background: var(--glow-green);
            color: var(--accent-green);
            border: 1px solid var(--accent-green);
        }

        .deck-stat.incorrect-stat {
            background: rgba(255, 82, 82, 0.15);
            color: var(--error);
            border: 1px solid var(--error);
        }

        .deck-stat-emoji {
            font-size: 22px;
            margin-bottom: 2px;
        }

        .deck-stat-value {
            font-family: var(--font-emphasis);
            font-size: 28px;
            font-weight: 700;
            line-height: 1.1;
        }

        .deck-stat-label {
            font-family: var(--font-data);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            opacity: 0.85;
            margin-top: 2px;
        }

        .deck-complete-message {
            font-family: var(--font-reading);
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 22px;
            min-height: 18px;
        }

        .deck-complete-actions {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
        }

        .deck-complete-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: var(--font-emphasis);
            padding: 14px 12px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            gap: 6px;
        }

        .deck-complete-btn .btn-icon {
            font-size: 22px;
        }

        .deck-complete-btn.restart-btn {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        .deck-complete-btn.restart-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--border-light);
        }

        .deck-complete-btn.continue-btn {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .deck-complete-btn.continue-btn:hover {
            box-shadow: 0 4px 18px rgba(var(--accent-primary-rgb), 0.45);
            transform: translateY(-1px);
        }

        .deck-complete-btn.continue-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .deck-complete-btn.exit-btn {
            width: 100%;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            flex-direction: row;
            gap: 10px;
            padding: 12px;
        }

        .deck-complete-btn.exit-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-color: var(--border-light);
        }
        .deck-complete-btn.exit-btn.has-next-set {
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            font-weight: 700;
        }
        .deck-complete-btn.exit-btn.has-next-set:hover {
            background: color-mix(in srgb, var(--accent-secondary) 88%, white);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb), 0.35);
        }

        /* Auto-continue countdown. The bar fills left to right across the
           continue button for the length of the hold, so the pause reads as a
           deliberate "next set starting" beat with time to choose Main menu
           instead — rather than the app appearing to freeze then jump. */
        .deck-complete-btn.is-auto-continuing {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        .deck-complete-btn.is-auto-continuing::before {
            content: '';
            position: absolute;
            inset: 0;
            transform-origin: left center;
            transform: scaleX(0);
            background: rgba(255, 255, 255, 0.28);
            animation: deck-auto-continue-fill var(--auto-continue-ms, 5000ms) linear forwards;
            z-index: -1;
            pointer-events: none;
        }
        @keyframes deck-auto-continue-fill {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
        /* Respect a reduced-motion preference: the hold still applies, it just
           does not animate. */
        @media (prefers-reduced-motion: reduce) {
            .deck-complete-btn.is-auto-continuing::before { animation: none; }
        }

        /* Modern completion surface: one obvious continuation action, with
           review/restart demoted to consistent secondary controls. */
        .deck-complete-content {
            max-width: 390px;
            padding: 26px;
            border-radius: 20px;
            background: color-mix(in srgb, var(--bg-card) 94%, var(--accent-primary) 6%);
            border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
        }
        .deck-complete-header {
            gap: 7px;
            margin-bottom: 20px;
        }
        .deck-complete-eyebrow,
        .progress-modal-eyebrow {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .deck-complete-icon {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            margin: 2px 0 4px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-secondary) 18%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 52%, transparent);
            color: var(--accent-secondary);
        }
        .deck-complete-icon svg {
            width: 28px;
            height: 28px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .deck-complete-header h3 {
            font-size: 26px;
            letter-spacing: -0.02em;
        }
        .deck-complete-accuracy {
            padding: 0;
            margin: 0;
            border: 0;
            background: transparent;
            font-family: var(--font-emphasis);
            color: var(--text-secondary);
        }
        .deck-complete-stats {
            gap: 0;
            margin-bottom: 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            overflow: hidden;
        }
        .deck-stat,
        .deck-stat.correct-stat,
        .deck-stat.incorrect-stat {
            max-width: none;
            padding: 13px 10px;
            border: 0;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.025);
        }
        .deck-stat + .deck-stat {
            border-left: 1px solid var(--border-color);
        }
        .deck-stat-emoji {
            font-size: 15px;
            margin-bottom: 1px;
        }
        .deck-stat-value {
            font-size: 25px;
        }
        .deck-stat-label {
            font-family: var(--font-emphasis);
            text-transform: none;
            letter-spacing: 0;
        }
        .deck-complete-message {
            margin-bottom: 16px;
            min-height: 0;
        }
        .deck-complete-message:empty {
            display: none;
        }
        .deck-complete-perfect {
            color: var(--accent-green);
            font-weight: 600;
        }
        .deck-complete-btn {
            flex-direction: row;
            min-height: 44px;
            padding: 11px 14px;
            border-radius: 11px;
            font-size: 13px;
            gap: 7px;
        }
        .deck-complete-btn.exit-btn {
            width: 100%;
            margin-bottom: 9px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
            font-size: 14px;
        }
        .deck-complete-actions {
            gap: 8px;
            margin: 0;
        }
        .deck-complete-btn.menu-btn,
        .deck-complete-btn.restart-btn {
            min-height: 38px;
            padding: 8px 10px;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            font-size: 11px;
            font-weight: 600;
        }
        .deck-complete-btn.menu-btn:hover,
        .deck-complete-btn.restart-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--border-light);
            box-shadow: none;
        }
        .secondary-action-icon {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .progress-modal-content {
            max-width: 430px;
            border-radius: 18px;
            border: 1px solid var(--border-color);
        }
        .progress-modal-content .modal-header {
            align-items: flex-start;
        }
        .progress-modal-content .modal-header h3 {
            margin: 2px 0 0;
            font-family: var(--font-emphasis);
            letter-spacing: -0.02em;
        }
        #statsModal .progress-modal-content {
            width: min(94vw, 680px);
            max-width: 680px;
        }
        .active-set-progress-body {
            margin-top: 6px;
        }
        .active-set-progress-intro {
            margin: 0 0 14px;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }
        .active-set-progress-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .active-set-progress-empty,
        .active-set-history-empty {
            margin: 0;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.45;
        }
        .active-set-card-progress {
            overflow: clip;
            border: 1px solid var(--border-color);
            border-radius: 13px;
            background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
        }
        .active-set-card-progress[open] {
            border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-color));
            background: color-mix(in srgb, var(--bg-tertiary) 88%, transparent);
        }
        .active-set-card-summary {
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 11px 12px;
            cursor: pointer;
            list-style: none;
        }
        .active-set-card-summary::-webkit-details-marker { display: none; }
        .active-set-card-number {
            display: grid;
            place-items: center;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--text-muted) 11%, transparent);
            color: var(--text-muted);
            font: 700 11px/1 var(--font-data);
        }
        .active-set-card-identity {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
        }
        .active-set-card-word {
            overflow: hidden;
            color: var(--text-primary);
            font: 700 14px/1.2 var(--font-emphasis);
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .active-set-card-translation {
            overflow: hidden;
            color: var(--text-muted);
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .active-set-card-result {
            padding: 5px 8px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            color: var(--text-muted);
            font: 700 11px/1.2 var(--font-data);
            white-space: nowrap;
        }
        .active-set-card-result.is-correct {
            border-color: color-mix(in srgb, var(--success) 38%, var(--border-color));
            background: color-mix(in srgb, var(--success) 10%, transparent);
            color: var(--success);
        }
        .active-set-card-result.is-incorrect {
            border-color: color-mix(in srgb, var(--error) 42%, var(--border-color));
            background: color-mix(in srgb, var(--error) 9%, transparent);
            color: var(--error);
        }
        .active-set-card-result.is-mixed {
            border-color: color-mix(in srgb, #f0b35a 45%, var(--border-color));
            background: color-mix(in srgb, #f0b35a 10%, transparent);
            color: #f0b35a;
        }
        .active-set-card-result.is-current {
            border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
            color: var(--accent-primary);
        }
        .active-set-card-history {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 12px 13px 52px;
        }
        .active-set-history-section {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        .active-set-history-section h4 {
            margin: 0 0 2px;
            color: var(--text-primary);
            font: 700 11px/1.25 var(--font-emphasis);
            text-transform: none;
        }
        .active-set-history-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.35;
        }
        .active-set-history-value {
            color: var(--text-primary);
            text-align: right;
        }
        .active-set-history-time { font-family: var(--font-data); }
        .active-set-saved-record {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 9px 10px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-card) 60%, transparent);
        }
        .active-set-saved-record-title {
            color: var(--accent-primary);
            font-size: 11px;
        }
        .active-set-history-retention {
            margin: 0;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.45;
        }
        @media (max-width: 520px) {
            .active-set-card-summary {
                grid-template-columns: 26px minmax(0, 1fr);
            }
            .active-set-card-result {
                grid-column: 2;
                justify-self: start;
            }
            .active-set-card-history { padding-left: 48px; }
            .active-set-history-row { flex-direction: column; gap: 2px; }
            .active-set-history-value { text-align: left; }
        }
        .progress-modal-explainer {
            margin: 0 0 16px;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }
        .total-progress-hero {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 17px;
            margin-bottom: 10px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.16), rgba(var(--accent-secondary-rgb), 0.09));
            border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
        }
        .total-progress-hero span {
            color: var(--text-muted);
            font: 600 11px/1.3 var(--font-emphasis);
        }
        .total-progress-hero strong {
            color: var(--text-primary);
            font: 700 32px/1.1 var(--font-emphasis);
        }
        .total-progress-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .total-progress-grid .stat-row {
            min-width: 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.025);
        }
        .total-progress-grid .stat-row span:first-child {
            color: var(--text-muted);
            font-size: 11px;
        }
        .total-progress-grid .stat-row span:last-child {
            color: var(--text-primary);
            font: 700 18px/1.2 var(--font-emphasis);
        }

        /* Coverage Progress Bar */
        .coverage-bar-wrapper {
            margin: 0 0 8px 0;
            opacity: 0;
            transition: opacity 0.4s ease-in;
        }
        .coverage-bar-wrapper.visible {
            opacity: 1;
        }
        .coverage-bar-container {
            width: 100%;
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            overflow: hidden;
        }
        .coverage-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 4px;
            transition: width 1.2s ease-out;
        }

        .personal-coverage-wrapper {
            position: relative;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
        }

        #step1.language-summary-active > .step-header {
            align-items: flex-end;
            margin-bottom: 9px;
        }

        #step1.language-summary-active #step1Title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            color: var(--text-primary);
            font-size: 16px;
            text-transform: none;
            letter-spacing: normal;
        }

        #step1.language-summary-active #step1Title::before {
            content: 'Choose how to learn';
            margin-bottom: 2px;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        #step1.language-summary-active.source-speech-active #step1Title::before {
            content: 'Speech vocabulary';
        }

        .personal-coverage-wrapper.personal-coverage-wrapper--merged {
            flex: 1;
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            opacity: 1 !important;
        }

        .standard-source-card {
            grid-template-columns: minmax(0, 1fr);
        }

        .standard-source-choice {
            display: grid;
            gap: 12px;
            padding: 14px 7px 10px;
            border-top: 1px solid var(--border-color);
        }

        .standard-source-choice-title {
            color: var(--text-muted);
            font: 700 11px/1 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .standard-source-choice-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .standard-source-choice-btn {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 9px;
            min-width: 0;
            min-height: 52px;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
            transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
        }

        .standard-source-choice-btn:hover,
        .standard-source-choice-btn:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-card));
            outline: none;
            transform: translateY(-1px);
        }

        .standard-source-choice-btn.is-selected {
            border-color: var(--accent-primary);
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card));
        }

        .standard-source-choice-btn:disabled {
            opacity: 0.48;
            cursor: not-allowed;
            transform: none;
        }

        .standard-source-choice-btn > span:last-child {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .standard-source-choice-btn strong {
            font: 700 13px/1.15 var(--font-emphasis);
        }

        .standard-source-choice-btn small {
            overflow: hidden;
            color: var(--text-secondary);
            font: 500 12px/1.4 var(--font-reading);
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .standard-source-choice-icon {
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-tertiary));
            color: var(--accent-primary);
            font: 800 15px/1 var(--font-emphasis);
        }

        .standard-source-language-icon {
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card));
            font-size: 20px;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
        }

        .standard-source-progress {
            grid-column: 1 / -1;
            min-width: 0;
            padding: 0 7px 4px;
        }

        .standard-source-progress:empty {
            display: none;
        }

        @media (max-width: 430px) {
            .standard-source-card {
                grid-template-columns: 1fr;
            }
            .standard-source-progress {
                grid-column: 1;
            }
            .standard-source-choice-buttons {
                grid-template-columns: 1fr;
            }
        }

        .personal-coverage-wrapper--merged .personal-progress-header {
            min-height: 28px;
            margin: 0 0 6px;
            padding: 0;
        }

        .personal-coverage-wrapper--merged .personal-progress-title {
            display: none;
        }

        .personal-coverage-wrapper--merged .personal-progress-header > .progress-info-btn {
            position: static;
            margin: 0 2px 0 0;
        }

        .personal-coverage-wrapper--merged .selection-pill-inline {
            flex-shrink: 0;
            margin-right: 2px;
        }

        .source-pill-inline {
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
            padding: 4px 8px;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 55%, var(--border-color));
            border-radius: 6px;
            background: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
            color: var(--text-secondary);
            font: 650 11px/1.2 var(--font-emphasis);
            cursor: pointer;
        }

        .source-pill-inline:hover,
        .source-pill-inline:focus-visible {
            border-color: var(--accent-secondary);
            color: var(--text-primary);
            outline: none;
        }

        .source-pill-inline--pending {
            border-style: dashed;
            color: var(--accent-secondary);
        }

        .personal-coverage-wrapper--merged .coverage-bar-container {
            height: 7px;
        }

        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .personal-progress-header {
            margin-bottom: 0;
        }

        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .personal-progress-info,
        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .personal-progress-header > .progress-info-btn,
        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .coverage-bar-container {
            display: none;
        }

        .personal-coverage-fill {
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
        }

        .personal-progress-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            padding-right: 20px;
        }

        .personal-progress-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }

        .personal-progress-info {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            margin-left: auto;
            line-height: 1.5;
            display: inline-grid;
            grid-template-columns: max-content max-content;
            column-gap: 10px;
            justify-items: end;
        }
        .personal-progress-info .ppi-row {
            display: contents;
        }
        .personal-progress-info .ppi-label {
            text-align: right;
        }
        .personal-progress-info .ppi-value {
            color: var(--text-primary);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            min-width: 3.2em;
            text-align: right;
        }

        /* Top bar (shared: How to start, Estimate Level, gear) */
        .top-bar-header {
            margin-bottom: 0 !important;
            gap: 12px;
            align-items: center;
        }

        .top-bar-user-name {
            color: var(--text-primary);
            font-weight: 700;
            font-size: 16px;
            font-family: var(--font-emphasis);
            cursor: pointer;
        }

        .top-bar-text-btn {
            font-family: var(--font-emphasis);
            font-size: 14px;
            line-height: 1.1;
            font-weight: 600;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0;
            transition: color 0.2s ease;
            /* Wrap to 2 lines to save horizontal space */
            white-space: normal;
            text-align: center;
            max-width: 78px;
        }

        .top-bar-text-btn:hover {
            color: var(--accent-primary);
        }

        /* Push the icon group (find + gear) to the right */
        .top-bar-find {
            margin-left: auto;
        }
        .top-bar-find + .top-bar-gear {
            margin-left: 0;
        }
        .top-bar-gear {
            margin-left: auto;
        }

        /* Offline / sync-pending status pill. Theme-aware via CSS variables.
           Sits between the top-bar text buttons and the right-aligned icons;
           .hidden collapses it when online with an empty queue. */
        .sync-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            color: var(--text-muted);
            cursor: default;
            user-select: none;
        }
        .sync-status.hidden {
            display: none;
        }
        /* Leading status dot. */
        .sync-status::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--text-muted);
            flex: 0 0 auto;
        }
        /* Offline: muted amber, steady dot. */
        .sync-status.is-offline {
            color: #b26a00;
            border-color: rgba(217, 138, 7, 0.45);
            background: rgba(217, 138, 7, 0.12);
        }
        .sync-status.is-offline::before {
            background: #d98a07;
        }
        /* Syncing: accent-colored, pulsing dot. */
        .sync-status.is-pending {
            color: var(--accent-primary);
            border-color: var(--accent-primary);
            background: rgba(200, 16, 46, 0.10);
        }
        .sync-status.is-pending::before {
            background: var(--accent-primary);
            animation: syncPulse 1.1s ease-in-out infinite;
        }
        .sync-status.is-syncing::before { animation: syncPulse 1.1s ease-in-out infinite; }
        .sync-status.is-failed,
        .sync-status.is-update {
            color: var(--error);
            border-color: currentColor;
            background: color-mix(in srgb, currentColor 10%, transparent);
        }
        .sync-status.is-failed::before,
        .sync-status.is-update::before { background: currentColor; }
        .sync-status.is-synced { opacity: .78; }
        @keyframes syncPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.35; transform: scale(0.7); }
        }
        @media (prefers-reduced-motion: reduce) {
            .sync-status.is-pending::before { animation: none; }
        }

        .offline-panel {
            margin: 12px 0;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--bg-card);
        }
        .offline-panel-heading,
        .offline-source {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px 12px;
            align-items: center;
        }
        .offline-panel-heading small,
        .offline-source small {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 12px;
        }
        .offline-panel button,
        .sync-queue-list button {
            min-height: 36px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 7px 11px;
        }
        .offline-source {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .offline-source:last-child { border-bottom: 0; }
        .offline-source-status { color: var(--text-muted); font-size: 12px; }
        .offline-error { grid-column: 1 / -1; color: var(--error); overflow-wrap: anywhere; }
        .offline-cancel { margin-top: 10px; }
        .sync-queue-list { list-style: none; padding: 0; margin: 8px 0 0; }
        .sync-queue-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; }
        .sync-queue-list small { display: block; color: var(--text-muted); }
        @media (max-width: 600px) {
            /* 92px cut "Update ready" to "Update rea" on every phone. The
               pill only appears when it has something to say, so give it its
               content and let the language chip beside it be the one that
               ellipsises. */
            .sync-status { max-width: none; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .offline-panel-heading { grid-template-columns: 1fr; }
            .offline-panel-heading button { width: 100%; }
        }

        /* ===== Radial "clock of pictures" artist picker ===== */
        .artist-radial-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .artist-radial-overlay.is-open {
            opacity: 1;
        }

        /* Square stage the ring is laid out inside. Scales with the viewport. */
        .artist-radial-stage {
            position: relative;
            width: min(78vw, calc(78vh / var(--ui-zoom, 1)), 460px);
            height: min(78vw, calc(78vh / var(--ui-zoom, 1)), 460px);
            touch-action: none;
            user-select: none;
            transform: scale(0.9);
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .artist-radial-overlay.is-open .artist-radial-stage {
            transform: scale(1);
        }

        /* Center hub: doubles as the close target. */
        .artist-radial-hub {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 34%;
            height: 34%;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: var(--bg-secondary, #1a1a1a);
            border: 1px solid var(--border-color, rgba(255,255,255,0.15));
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .artist-radial-hub:hover {
            background: var(--bg-tertiary, var(--bg-secondary, #262626));
        }
        .artist-radial-hub-title {
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: clamp(13px, 3.4vw, 18px);
            line-height: 1.15;
            color: var(--text-primary, #fff);
            pointer-events: none;
        }
        .artist-radial-close-label {
            margin-top: 6px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 600;
            pointer-events: none;
        }

        /* Each artist thumbnail, absolutely positioned on the ring. */
        .artist-radial-thumb {
            position: absolute;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            width: 30%;
            transition: left 80ms linear, top 80ms linear, opacity 100ms ease;
            will-change: left, top;
        }
        .artist-radial-stage.is-scrubbing .artist-radial-thumb {
            transition: opacity 70ms ease;
        }
        .artist-radial-stage.is-snapping .artist-radial-thumb {
            transition: left 170ms cubic-bezier(0.22, 0.8, 0.3, 1),
                        top 170ms cubic-bezier(0.22, 0.8, 0.3, 1),
                        opacity 100ms ease;
        }
        .artist-radial-thumb.is-off-ring {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .artist-radial-disc {
            width: min(20vw, calc(20vh / var(--ui-zoom, 1)), 110px);
            height: min(20vw, calc(20vh / var(--ui-zoom, 1)), 110px);
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 3px solid var(--artist-accent, var(--accent-primary));
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .artist-radial-disc--fallback {
            color: #fff;
            font-family: var(--font-emphasis);
            font-weight: 800;
            font-size: clamp(18px, 5vw, 34px);
            letter-spacing: 0.5px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .artist-radial-thumb:hover .artist-radial-disc,
        .artist-radial-thumb:focus-visible .artist-radial-disc {
            transform: scale(1.08);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
        }

        .artist-radial-thumb--disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        .artist-radial-thumb--disabled:hover .artist-radial-disc,
        .artist-radial-thumb--disabled:focus-visible .artist-radial-disc {
            transform: none;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        }

        .language-radial-disc {
            font-size: clamp(30px, 8vw, 52px);
            letter-spacing: 0;
            text-shadow: none;
        }

        .learning-source-radial-disc {
            font-size: clamp(30px, 8vw, 50px);
            letter-spacing: 0;
            text-shadow: none;
        }

        /* Study options reuse the radial interaction without borrowing the
           loud picture-picker palette. Quiet icon-and-label targets keep the
           actions readable on both desktop and mobile. */
        .study-radial-picker {
            background: rgba(7, 9, 14, 0.76);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .study-radial-picker .artist-radial-stage {
            width: min(90vw, calc(82vh / var(--ui-zoom, 1)), 500px);
            height: min(90vw, calc(82vh / var(--ui-zoom, 1)), 500px);
        }
        .study-radial-picker .artist-radial-hub {
            width: 27%;
            height: 27%;
            background: color-mix(in srgb, var(--bg-secondary) 92%, black);
            border-color: rgba(255, 255, 255, 0.13);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
        }
        .study-radial-picker .artist-radial-thumb {
            width: 25%;
            min-height: min(22vw, calc(22vh / var(--ui-zoom, 1)), 108px);
            justify-content: center;
            gap: 5px;
            border-radius: 50%;
        }
        .study-radial-picker .artist-radial-disc {
            width: min(19vw, calc(19vh / var(--ui-zoom, 1)), 92px);
            height: min(19vw, calc(19vh / var(--ui-zoom, 1)), 92px);
            border: 1px solid transparent;
            background: transparent;
            color: rgba(255, 255, 255, 0.86);
            box-shadow: none;
            text-shadow: none;
        }
        .artist-radial-disc--icon svg {
            width: 42%;
            height: 42%;
            pointer-events: none;
        }
        .study-radial-picker .artist-radial-thumb:hover .artist-radial-disc,
        .study-radial-picker .artist-radial-thumb:focus-visible .artist-radial-disc {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: none;
        }
        /* Larger glyph inside the (also larger) study disc. 58% of a 92px
           disc is ~53px at the capped 500px stage, still 20px clear of the
           disc edge and well inside the 25%-wide thumb column. */
        .study-radial-picker .artist-radial-disc--icon svg {
            width: 58%;
            height: 58%;
        }
        .study-radial-picker .artist-radial-label {
            max-width: 118px;
            color: rgba(255, 255, 255, 0.86);
            font-size: clamp(12px, 3.1vw, 16px);
            font-weight: 600;
            line-height: 1.18;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
        }

        .artist-radial-label {
            font-family: var(--font-emphasis);
            font-weight: 600;
            font-size: clamp(11px, 2.8vw, 14px);
            color: #fff;
            text-align: center;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
            max-width: 132px;
            line-height: 1.15;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            pointer-events: none;
        }

        /* ===== Stable growing-choice sheets =====
           Languages use a two-column grid; Study Options uses an action list.
           Both scroll conventionally and keep every choice in a fixed place. */
        .choice-sheet-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(5, 7, 11, 0.66);
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            opacity: 0;
            transition: opacity 180ms ease;
        }
        .choice-sheet-overlay.is-open { opacity: 1; }
        .choice-sheet-panel {
            width: min(92vw, 480px);
            max-height: min(calc(78vh / var(--ui-zoom, 1)), 680px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 22px;
            background: color-mix(in srgb, var(--bg-secondary) 96%, black);
            box-shadow: 0 22px 65px rgba(0, 0, 0, 0.46);
            transform: translateY(12px) scale(0.98);
            transition: transform 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
        }
        .choice-sheet-overlay.is-open .choice-sheet-panel {
            transform: translateY(0) scale(1);
        }
        .choice-sheet-overlay[data-dock] {
            align-items: center;
            justify-content: flex-end;
            padding: 16px var(--dock-inset, 16px);
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            pointer-events: none;
        }
        .choice-sheet-overlay[data-dock="left"] { justify-content: flex-start; }
        .choice-sheet-overlay[data-dock] .choice-sheet-panel {
            pointer-events: auto;
            width: var(--dock-w, 400px);
            max-width: none;
            max-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 32px);
        }
        .choice-sheet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: none;
            padding: 18px 18px 12px 20px;
        }
        .choice-sheet-header h2 {
            margin: 0;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 20px;
            font-weight: 750;
        }
        .choice-sheet-heading { min-width: 0; flex: 1; }
        .choice-sheet-heading p {
            max-width: 45ch;
            margin: 5px 0 0;
            color: var(--text-muted);
            font: 400 12px/1.4 var(--font-reading);
        }
        .choice-sheet-back {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            margin-right: 6px;
            border: 0;
            border-radius: 50%;
            padding: 0 2px 2px 0;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-secondary);
            font: 400 24px/1 var(--font-emphasis);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .choice-sheet-back:hover {
            background: rgba(255, 255, 255, 0.12);
            color: var(--text-primary);
        }
        .choice-sheet-close {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            border: 0;
            border-radius: 50%;
            padding: 0 0 2px;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-secondary);
            font: 400 25px/1 var(--font-emphasis);
            cursor: pointer;
        }
        .choice-sheet-close:hover { background: rgba(255, 255, 255, 0.12); }
        .choice-sheet-body {
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding: 4px 14px 18px;
        }
        .choice-sheet-grid .choice-sheet-body {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
        }
        .choice-sheet-item {
            width: 100%;
            min-width: 0;
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr) 18px;
            align-items: center;
            gap: 11px;
            padding: 10px 11px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-primary);
            text-align: left;
            cursor: pointer;
        }
        .choice-sheet-item:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--choice-accent, var(--accent-primary)) 48%, rgba(255,255,255,.12));
            background: rgba(255, 255, 255, 0.07);
        }
        .choice-sheet-item:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }
        .choice-sheet-item:disabled {
            opacity: 0.48;
            cursor: default;
        }
        .choice-sheet-item.is-selected {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, rgba(255,255,255,.16));
            background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
        }
        .choice-sheet-icon {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: color-mix(in srgb, var(--choice-accent) 72%, #0b1118);
            color: #fff;
            font-size: 27px;
            line-height: 1;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
        }
        .choice-sheet-icon svg { width: 23px; height: 23px; stroke: currentColor; }
        .choice-sheet-icon--image {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
        }
        .choice-sheet-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .choice-sheet-copy strong {
            overflow-wrap: anywhere;
            font-family: var(--font-emphasis);
            font-size: 14px;
            font-weight: 650;
            line-height: 1.22;
        }
        .choice-sheet-copy small {
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.2;
        }
        .choice-sheet-tail {
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 18px;
            text-align: center;
        }
        .choice-sheet-grid .choice-sheet-item {
            min-height: 78px;
            grid-template-columns: 42px minmax(0, 1fr) 14px;
            gap: 8px;
            padding: 10px;
        }
        .choice-sheet-grid .choice-sheet-icon {
            width: 42px;
            height: 42px;
            font-size: 25px;
        }
        .choice-sheet-list .choice-sheet-item + .choice-sheet-item {
            margin-top: 7px;
        }
        @media (max-width: 600px) {
            .choice-sheet-overlay {
                align-items: flex-end;
                padding: 0;
            }
            .choice-sheet-panel {
                width: 100%;
                max-height: min(calc(82vh / var(--ui-zoom, 1)), 700px);
                border-width: 1px 0 0;
                border-radius: 24px 24px 0 0;
                padding-bottom: env(safe-area-inset-bottom);
                transform: translateY(28px);
            }
            .choice-sheet-header { padding-top: 16px; }
        }

        .artist-source-image--custom {
            background: color-mix(in srgb, #10B981 18%, var(--bg-secondary));
            color: #10B981;
            border-color: color-mix(in srgb, #10B981 55%, var(--border-color));
        }

        .artist-source-image--custom svg {
            width: 58%;
            height: 58%;
        }

        /* Inline language pill (compact, sits in the step header row) */
        .selection-pill-inline {
            display: none;
            align-items: center;
            padding: 4px 14px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-radius: 6px;
            font-family: var(--font-emphasis);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: filter 0.2s ease;
        }

        .selection-pill-inline:hover {
            filter: brightness(1.15);
        }

        /* Help modal content */
        .help-content {
            padding: 4px 0;
        }

        .help-content p {
            margin: 0 0 10px 0;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .help-content p:last-child {
            margin-bottom: 0;
        }

        .help-content strong {
            color: var(--text-primary);
        }

        /* Exclusion Progress Bars (Lemma & Cognate steps) */
        .exclusion-bar-wrapper {
            margin: 12px 0 4px 0;
            opacity: 0;
            transition: opacity 0.4s ease-in;
        }
        .exclusion-bar-wrapper.visible {
            opacity: 1;
        }
        .exclusion-bar-container {
            width: 100%;
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: 3px;
            overflow: hidden;
        }
        .exclusion-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 3px;
            transition: width 0.8s ease-out;
        }
        .exclusion-bar-label {
            font-family: var(--font-data);
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 5px;
            text-align: center;
        }

        /* Authentication Modal Styles */
        .auth-body {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .auth-btn {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-reading);
            font-size: 16px;
            color: var(--text-primary);
            text-align: left;
            width: 100%;
        }

        .auth-btn:hover {
            border-color: var(--accent-primary);
            background: var(--bg-card-hover);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .auth-btn .btn-icon {
            font-size: 32px;
            flex-shrink: 0;
        }

        .auth-btn-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .auth-btn-title {
            font-weight: 600;
            font-size: 18px;
            color: var(--text-primary);
        }

        .auth-btn-desc {
            font-size: 14px;
            color: var(--text-muted);
        }

        .login-form {
            margin-top: 10px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
        }

        .login-form.hidden {
            display: none;
        }

        .initials-input {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 18px;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: 2px;
            margin-bottom: 15px;
        }

        .initials-input:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
        }

        .login-form-actions {
            display: flex;
            gap: 10px;
        }

        .auth-submit-btn, .auth-cancel-btn {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .auth-submit-btn {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .auth-submit-btn:hover {
            box-shadow: 0 0 20px rgba(200, 16, 46, 0.3);
            transform: translateY(-2px);
        }

        .auth-submit-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            border-color: var(--border-color);
            cursor: not-allowed;
            transform: none;
        }

        .auth-cancel-btn {
            background: transparent;
            color: var(--text-secondary);
        }

        .auth-cancel-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-secondary);
        }

        /* Login row + info button */
        .auth-btn-row {
            position: relative;
            display: flex;
            align-items: stretch;
            gap: 0;
        }

        .auth-btn-row .auth-btn {
            flex: 1;
        }

        .auth-info-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1.5px solid var(--border-color);
            background: var(--bg-tertiary);
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all 0.2s;
            z-index: 2;
        }

        .auth-info-btn:hover {
            color: var(--accent-primary);
            border-color: var(--accent-primary);
            background: var(--bg-card);
        }

        .auth-info-note {
            padding: 12px 14px;
            margin-top: -5px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
        }

        .auth-info-note.hidden {
            display: none;
        }

        /* About this project link */
        .auth-about-link {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 14px;
            cursor: pointer;
            padding: 8px;
            margin-top: 4px;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: color 0.2s;
        }

        .auth-about-link:hover {
            color: var(--accent-primary);
        }

        /* First-run authentication surface. Scoped overrides keep the older
           generic modal primitives available to the remaining dialogs. */
        #authModal {
            z-index: 30001;
            pointer-events: auto;
            padding: 22px;
            background:
                radial-gradient(circle at 50% 10%, rgba(var(--accent-primary-rgb), 0.14), transparent 36%),
                rgba(7, 8, 13, 0.9);
            backdrop-filter: blur(16px);
        }
        body.auth-active .app-loading-screen {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        .auth-modal-content {
            position: relative;
            width: min(100%, 440px);
            max-width: 440px;
            padding: 31px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
            border-radius: 24px;
            background:
                linear-gradient(145deg, rgba(var(--accent-primary-rgb), 0.07), transparent 42%),
                color-mix(in srgb, var(--bg-card) 97%, black 3%);
            box-shadow: 0 26px 80px rgba(0,0,0,0.46);
        }
        .auth-modal-content::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
        }
        .auth-welcome-mark {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            margin-bottom: 22px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 48%, transparent);
            border-radius: 13px;
            background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 20px;
            font-weight: 800;
        }
        .auth-welcome-copy {
            margin-bottom: 25px;
        }
        .auth-welcome-eyebrow {
            display: block;
            margin-bottom: 7px;
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .auth-welcome-copy h3 {
            margin: 0 0 10px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: clamp(25px, 7vw, 32px);
            font-weight: 750;
            line-height: 1.08;
            letter-spacing: -0.035em;
        }
        .auth-welcome-copy p {
            max-width: 34em;
            margin: 0;
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.55;
        }
        .auth-modal-content .auth-body {
            gap: 10px;
        }
        .auth-modal-content .auth-btn {
            position: relative;
            z-index: 1;
            pointer-events: auto;
            touch-action: manipulation;
            min-height: 72px;
            gap: 12px;
            padding: 13px 15px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: rgba(255,255,255,0.025);
            box-shadow: none;
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }
        .auth-modal-content .auth-btn:hover,
        .auth-modal-content .auth-btn:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 62%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-tertiary));
            box-shadow: none;
            transform: translateY(-1px);
            outline: none;
        }
        .auth-modal-content .login-btn {
            padding-right: 45px;
        }
        .auth-choice-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 11px;
            background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
            color: var(--accent-primary);
        }
        .auth-choice-icon--guest {
            background: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
            color: var(--accent-secondary);
        }
        .auth-choice-icon svg {
            width: 21px;
            height: 21px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .auth-modal-content .auth-btn-content {
            min-width: 0;
            flex: 1;
            gap: 3px;
        }
        .auth-modal-content .auth-btn-title {
            font-family: var(--font-emphasis);
            font-size: 14px;
            font-weight: 750;
        }
        .auth-modal-content .auth-btn-desc {
            font-size: 11px;
            line-height: 1.35;
        }
        .auth-choice-arrow {
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 18px;
        }
        .auth-modal-content .auth-info-btn {
            top: 24px;
            right: 12px;
            width: 27px;
            height: 27px;
            border: 0;
            background: transparent;
        }
        .auth-modal-content .auth-info-btn svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
        }
        .auth-modal-content .auth-info-note {
            margin: 0 2px 2px;
            padding: 11px 13px;
            border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-tertiary));
            font-size: 11px;
            line-height: 1.5;
        }
        .auth-modal-content .auth-about-link {
            align-self: center;
            margin: 6px 0 0;
            padding: 7px 10px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 650;
            text-decoration: none;
        }
        .auth-modal-content .login-form {
            margin: 0;
            padding: 3px 0 0;
            border: 0;
        }
        .auth-form-heading {
            margin-bottom: 18px;
        }
        .auth-form-heading h4 {
            margin: 0 0 5px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 20px;
            letter-spacing: -0.02em;
        }
        .auth-form-heading p {
            margin: 0;
            color: var(--text-muted);
            font-size: 12px;
        }
        .auth-input-label {
            display: block;
            margin: 0 0 7px 2px;
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
        }
        .auth-modal-content .initials-input {
            min-height: 56px;
            margin-bottom: 11px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-tertiary);
            font-size: 21px;
            font-weight: 750;
            letter-spacing: 0.16em;
        }
        .auth-modal-content .initials-input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.13);
        }
        .auth-modal-content .login-form-actions {
            gap: 8px;
        }
        .auth-modal-content .auth-submit-btn,
        .auth-modal-content .auth-cancel-btn {
            min-height: 44px;
            padding: 10px 15px;
            border-width: 1px;
            border-radius: 11px;
            font-size: 12px;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }
        .auth-modal-content .auth-submit-btn:hover {
            box-shadow: 0 5px 18px rgba(var(--accent-primary-rgb), 0.24);
            transform: translateY(-1px);
        }
        .auth-modal-content.is-login-form .auth-welcome-mark {
            width: 34px;
            height: 34px;
            margin-bottom: 15px;
            border-radius: 10px;
            font-size: 16px;
        }
        .auth-modal-content.is-login-form .auth-welcome-copy {
            margin-bottom: 18px;
        }
        .auth-modal-content.is-login-form .auth-welcome-copy h3 {
            font-size: 23px;
        }
        .auth-modal-content.is-login-form .auth-welcome-copy p {
            display: none;
        }
        @media (max-width: 480px) {
            #authModal {
                align-items: center;
                padding: 10px;
            }
            .auth-modal-content {
                width: 100%;
                padding: 24px 20px 21px;
                border-radius: 22px;
            }
            .auth-welcome-mark {
                margin-bottom: 17px;
            }
            .auth-welcome-copy {
                margin-bottom: 20px;
            }
        }

        /* About This Project modal — full-screen takeover. No persistent
           header bar (vertical space is premium); close button floats over
           the content in the top-right corner. */
        .about-project-modal {
            max-width: none;
            width: 100vw;
            height: calc(100vh / var(--ui-zoom, 1));
            max-height: calc(100vh / var(--ui-zoom, 1));
            border-radius: 0;
            padding: 0;
            border: none;
            background: var(--bg-primary, var(--bg-card));
            position: relative;
            /* Scroll container for the about modal. Putting overflow here
               (rather than on .about-project-body) keeps the scrollbar
               flush with the viewport's right edge instead of floating
               at the body's max-width boundary in the middle of wide
               screens. Transparent track lets the modal's own background
               show through so the scrollbar doesn't read as a white
               sidebar over dark themes. */
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        .about-project-modal::-webkit-scrollbar {
            width: 8px;
        }

        .about-project-modal::-webkit-scrollbar-track {
            background: transparent;
        }

        .about-project-modal::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

        .about-close-floating {
            /* Fixed (not absolute) so it stays pinned to the viewport
               corner while the modal scrolls underneath. */
            position: fixed;
            top: 18px;
            right: 22px;
            z-index: 10;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 20px;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .about-close-floating:hover {
            background: var(--bg-card-hover, var(--bg-tertiary));
            color: var(--text-primary);
            border-color: var(--accent-primary);
        }

        /* Authenticated-user variant: close button becomes a pill-shaped
           "Back to the app" button, matching the bottom CTA. Toggled by
           _updateAboutCloseButton() in auth.js based on session state. */
        .about-close-floating.about-close-as-pill {
            width: auto;
            height: auto;
            border-radius: 999px;
            padding: 9px 18px;
            font-size: 13px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            line-height: 1;
            letter-spacing: 0.2px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .about-close-floating.about-close-as-pill:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .about-project-body {
            /* Scroll lives on the parent .about-project-modal so the
               scrollbar sits at the viewport's right edge. The body just
               flows naturally inside, capped at a readable width. */
            padding: 44px 48px 80px;
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 16px;
            line-height: 1.7;
            max-width: 880px;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        /* About-modal title treatments. Using var(--accent-primary) for
           headings is unreadable in dark-blue themes (e.g. Bad Bunny theme),
           so we render titles in var(--text-primary) with a subtle accent
           underline instead of a coloured fill. */
        .about-project-modal .modal-header h3 {
            color: var(--text-primary);
        }

        .about-project-body h2 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            font-size: 26px;
            font-weight: 700;
            margin: 36px 0 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--accent-primary);
            display: inline-block;
            letter-spacing: -0.3px;
        }

        .about-project-body h2:first-child {
            margin-top: 0;
        }

        .about-project-body h3 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
            margin: 22px 0 8px;
            letter-spacing: -0.1px;
        }

        .about-project-body p {
            margin: 0 0 14px;
        }

        .about-project-body ul,
        .about-project-body ol {
            margin: 0 0 14px;
            padding-left: 22px;
        }

        /* The pipeline is a sequence, so its steps are numbered. */
        .about-project-body ol li::marker {
            color: var(--accent-primary);
            font-weight: 700;
        }

        .about-project-body li {
            margin-bottom: 8px;
        }

        .about-project-body strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .about-project-body em {
            color: var(--text-primary);
            font-style: italic;
        }

        .about-project-body a {
            color: var(--accent-primary);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .about-project-body code {
            font-family: var(--font-data);
            font-size: 13px;
            background: var(--bg-tertiary);
            padding: 1px 6px;
            border-radius: 4px;
            color: var(--text-primary);
        }

        .about-figure {
            margin: 28px 0;
        }

        .about-project-body .about-figure img,
        .about-project-body .about-figure video {
            display: block;
            max-width: 100%;
            margin: 0 auto;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
        }

        .about-project-body .about-figure video {
            /* Auto-looping silent demo clips — give them a sensible aspect ratio
               so they don't pop in/out as the file loads. */
            aspect-ratio: 16 / 10;
            object-fit: cover;
        }

        /* figcaption only shown on the placeholder (when the file is missing). */
        .about-figure figcaption {
            display: none;
        }

        /* Dashed placeholder box when the media file doesn't exist yet.
           The figcaption becomes the visible label so Josh knows what to drop in. */
        .about-figure.about-figure-missing {
            min-height: 220px;
            border: 2px dashed var(--border-color);
            background: var(--bg-tertiary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .about-figure.about-figure-missing img,
        .about-figure.about-figure-missing video {
            display: none;
        }

        .about-figure.about-figure-missing figcaption {
            display: block;
            color: var(--text-muted);
            font-family: var(--font-data);
            font-size: 13px;
            text-align: center;
            line-height: 1.5;
        }

        .about-figure.about-figure-missing figcaption::before {
            content: "Image: ";
            color: var(--text-muted);
        }

        /* Override the label for video placeholders. */
        .about-figure.about-figure-video.about-figure-missing figcaption::before {
            content: "Video: ";
        }

        .about-loading {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 14px;
        }

        /* -------- About-modal CTAs (appended to the About body) ----------- */
        /* Shown at the bottom of the About copy so first-time visitors have a
           clear path into the app from the landing. For already-authenticated
           users (e.g. arrived via Settings → "About this project"), this
           collapses to a single "Back to the app" button. */
        .about-ctas {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            margin-top: 48px;
            padding: 32px 24px;
            background: rgba(var(--accent-primary-rgb), 0.06);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
            border-radius: 12px;
        }

        .about-ctas-label {
            font-family: var(--font-emphasis);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .about-ctas-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .about-cta-btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 180px;
            border: 1.5px solid var(--border-color);
        }

        .about-cta-btn.primary {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .about-cta-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb), 0.4);
        }

        .about-cta-btn.secondary {
            background: transparent;
            color: var(--text-primary);
        }

        .about-cta-btn.secondary:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-primary);
        }

        /* Level-estimate CTA — fills the slot where the personal coverage
           bar will live once the user has progress. Shown only when no
           progress yet AND no prior level estimate for the current
           language. Compact pill-ish card: blurb left, action button right. */
        .level-estimate-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 16px 0 4px;
            padding: 14px 18px;
            background: rgba(var(--accent-primary-rgb), 0.08);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
            border-radius: 10px;
            font-family: var(--font-reading);
        }

        .level-estimate-cta-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .level-estimate-cta-title {
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: 15px;
            color: var(--text-primary);
        }

        .level-estimate-cta-desc {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .level-estimate-cta-btn {
            flex-shrink: 0;
            padding: 8px 16px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: 1px solid var(--accent-primary);
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .level-estimate-cta-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
        }

        /* -------- About-modal card demos ---------------------------------- */
        /* Live animated flashcards embedded inline in the About copy. Reuses
           the main app's real class names (.card-word, .card-pos, .sentence,
           .translation, .pos-verb, etc.) so the demo inherits actual
           flashcard typography. Scoped rules below only override SIZE so
           real-card styles fit a 320×440 demo footprint. */

        .about-demo-card {
            /* <div> placeholder the Markdown renderer drops in; JS mounts an
               .about-demo-card-inner child that holds the real .card. */
            margin: 18px auto 32px;
            max-width: 100%;
        }

        .about-demo-card-inner {
            width: 340px;
            max-width: 100%;
            height: 480px;
            margin: 0 auto;
            perspective: 1000px;
            position: relative;
        }

        /* Override the main-app .card sizing (which targets full viewport). */
        .about-demo-card-inner .card {
            width: 100%;
            height: 100%;
            min-height: 0;
            max-height: none;
            position: relative;
        }

        .about-demo-card-inner .card-front {
            justify-content: center;
            padding: 28px 20px;
        }

        .about-demo-card-inner .card-back {
            justify-content: flex-start;
            padding: 22px 18px 20px;
        }

        /* -------- Size overrides for the real card typography ------------- */
        /* The real card-word is 64px built for a viewport-filling card; scale
           to suit the demo. Colours / fonts inherit from the base rules so
           the look stays authentic. */

        .about-demo-card-inner .card-word {
            font-size: 48px;
            margin-bottom: 14px;
        }

        .about-demo-card-inner .card-pos {
            font-size: 11px;
            padding: 5px 12px;
            margin-bottom: 12px;
        }

        .about-demo-card-inner .card-ranking {
            font-size: 14px;
        }

        .about-demo-card-inner .card-details {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0;
            text-align: center;
        }

        /* Back header — the big repeated word at the top of the back face.
           Matches the inline markup produced by updateCard() at line 1300. */
        .about-demo-card-inner .back-header {
            text-align: center;
            margin-bottom: 12px;
        }

        .about-demo-back-word {
            font-size: 32px;
            color: white;
            font-weight: bold;
            font-family: var(--font-emphasis);
        }

        .about-demo-pos-legend {
            display: flex;
            justify-content: center;
            margin-top: 7px;
        }

        .about-demo-pos-legend .card-pos {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            margin: 0;
            padding: 4px 8px;
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            text-transform: none;
            background: rgba(255, 255, 255, 0.055);
            border-color: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
        }

        /* Meanings list — part of speech sits once beneath the headword, while
           each row carries only its meaning and optional catalogue share. */
        .about-demo-card-inner .meanings-scroll {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            margin-bottom: 14px;
        }

        /* Rows as the live card draws them, minus everything but the meaning:
           tinted in the part-of-speech colour, the chosen one ticked and
           outlined, the live four-bar meter at the right. The colour comes
           from --sense-match-rgb, set per card by _runAboutDemo(). */
        .about-demo-card-inner .meaning-row-regular {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr) 30px;
            align-items: center;
            gap: 4px;
            padding: 8px 10px;
            background: rgba(var(--sense-match-rgb, 148, 163, 184), 0.10);
            border-radius: 8px;
            min-height: 40px;
            border: 1px solid transparent;
            transition: background 0.25s, border-color 0.25s;
        }

        .about-demo-card-inner .meaning-row-regular.is-selected {
            background: rgba(var(--sense-match-rgb, 148, 163, 184), 0.16);
            border: 2px solid rgb(var(--sense-match-rgb, 148, 163, 184));
            padding: 7px 9px;  /* compensate for the thicker border */
        }

        .about-demo-row-tick {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* The live check is absolutely placed against the live row; here it
           sits in its own column, so undo that. */
        .about-demo-row-tick .meaning-row-check {
            position: static;
            transform: none;
            margin: 0;
        }

        .about-demo-row-meter {
            display: flex;
            justify-content: flex-end;
            color: var(--text-secondary);
        }

        /* A picture of the meter, not the control: nothing to open here. */
        .about-demo-row-meter .sense-prominence-badge {
            pointer-events: none;
        }

        .about-demo-card-inner .meaning-row-body {
            grid-column: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        .about-demo-card-inner .meaning-row-translation {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            /* Demo glosses are hand-curated and short — don't inherit the
               real card's aggressive word-breaking, which was splitting
               words like "happen" into "happe / n" in a narrow column. */
            overflow-wrap: normal;
            word-break: normal;
        }

        /* Example box — target sentence + English translation together inside
           a single accent-bordered box. Replaces the old split layout (Spanish
           in a box, English loose below it) so the two stay visually bound
           and read as a pair. */
        .about-demo-card-inner .about-demo-example {
            margin-top: 10px;
            padding: 12px 14px;
            background: rgba(8, 11, 17, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: center;
        }

        .about-demo-card-inner .about-demo-example-target {
            font-family: var(--font-reading);
            font-size: 15px;
            color: #fff;
            line-height: 1.4;
        }

        .about-demo-card-inner .about-demo-example-english {
            font-family: var(--font-reading);
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            line-height: 1.4;
        }

        /* The studied word in the example: the live card's underline in the
           part-of-speech colour (see .example-word-highlight). */
        .about-demo-highlight {
            font-weight: 800;
            color: color-mix(in srgb, rgb(var(--sense-match-rgb, 148, 163, 184)) 55%, white);
            box-shadow: inset 0 -3px 0 rgb(var(--sense-match-rgb, 148, 163, 184));
        }

        /* Spotify row at the bottom of the artist-mode back face.
           Song/artist text on the left, Spotify-green logo on the right.
           Hidden on normal-mode cards (JS sets display: none). */
        .about-demo-spotify-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .about-demo-song-back {
            font-family: var(--font-data);
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 1.2px;
            text-transform: uppercase;
            opacity: 0.85;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            text-align: left;
        }

        .about-demo-spotify-mark {
            display: inline-flex;
            align-items: flex-start;
            gap: 1px;
            flex-shrink: 0;
        }

        .about-demo-spotify-logo {
            width: 18px;
            height: 18px;
            fill: #1DB954;
            flex-shrink: 0;
        }

        .about-demo-footnote-ref {
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            text-decoration: none;
            line-height: 1;
            padding: 0 2px;
            border-radius: 2px;
            transition: color 0.15s, background 0.15s;
        }

        .about-demo-footnote-ref:hover,
        .about-demo-footnote-ref:focus-visible {
            color: var(--accent-primary);
            background: rgba(var(--accent-primary-rgb), 0.15);
            outline: none;
        }

        /* Footnote section at the bottom of the About body. Small, muted,
           sets itself off with a top rule so it reads as end-matter
           distinct from the main copy and the CTAs below it. */
        .about-footnotes {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-muted);
            max-width: 760px;
        }

        .about-footnotes p {
            margin: 0 0 10px;
        }

        .about-footnote-number {
            font-weight: 700;
            color: var(--text-secondary);
            margin-right: 2px;
        }

        /* -------- Side-by-side "Two modes" layout ------------------------- */
        /* Optimised for desktop (Josh's explicit direction). On narrow
           viewports it collapses to a single column. */

        .about-modes-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
            margin: 12px 0 32px;
        }

        @media (min-width: 900px) {
            .about-modes-row {
                grid-template-columns: 1fr 1fr;
                gap: 48px;
            }
        }

        .about-modes-column {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .about-modes-column > h3 {
            margin-top: 0;
            margin-bottom: 14px;
        }

        /* Card sits directly under the h3 inside its column. Text paragraphs
           follow below so the cards appear above the fold on desktop. */
        .about-modes-column .about-demo-card {
            margin: 0 0 18px;
        }

        .about-modes-column p {
            margin: 0 0 12px;
        }

        /* Split layout (layoutAboutTwoModes): both cards side by side, one
           caption under them, both texts below. On a phone, one column in
           reading order: card, caption, text, card, text. */
        .about-modes-row.is-split {
            row-gap: 18px;
        }

        .about-modes-row.is-split .about-modes-body {
            margin-top: 6px;
        }

        .about-demo-caption {
            margin: 0;
            text-align: center;
        }

        @media (min-width: 900px) {
            .about-modes-row.is-split .about-demo-caption {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 899px) {
            .about-modes-row.is-split .about-modes-head.about-modes-speech { order: 1; }
            .about-modes-row.is-split .about-demo-caption { order: 2; }
            .about-modes-row.is-split .about-modes-body.about-modes-speech { order: 3; }
            .about-modes-row.is-split .about-modes-head.about-modes-lyrics { order: 4; }
            .about-modes-row.is-split .about-modes-body.about-modes-lyrics { order: 5; }
        }

        .about-demo-caption-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 10px 18px 10px 10px;
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--accent-primary) 16%, var(--bg-card)),
                var(--bg-card));
            border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
            border-radius: 999px;
            color: var(--text-primary);
            font: 700 15px/1.2 var(--font-emphasis);
            cursor: pointer;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .about-demo-caption-btn:hover,
        .about-demo-caption-btn:focus-visible {
            transform: translateY(-1px);
            border-color: var(--accent-primary);
            box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
        }

        /* The demo cards are the way into the walkthrough: they lift on hover
           and show where a click goes. */
        .about-demo-card.is-walkthrough-link {
            position: relative;
            cursor: pointer;
            border-radius: 18px;
            transition: transform 0.2s ease;
        }

        .about-demo-card.is-walkthrough-link:hover,
        .about-demo-card.is-walkthrough-link:focus-visible {
            transform: translateY(-3px);
        }

        .about-demo-card.is-walkthrough-link:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 4px;
        }

        .about-demo-explain-chip {
            position: absolute;
            left: 50%;
            bottom: 14px;
            transform: translate(-50%, 6px);
            padding: 6px 14px;
            border-radius: 999px;
            background: var(--accent-primary);
            color: var(--accent-primary-text, #10141b);
            font: 700 12.5px/1 var(--font-emphasis);
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 5;
        }

        .about-demo-card.is-walkthrough-link:hover .about-demo-explain-chip,
        .about-demo-card.is-walkthrough-link:focus-visible .about-demo-explain-chip {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        @media (prefers-reduced-motion: reduce) {
            .about-demo-card.is-walkthrough-link,
            .about-demo-explain-chip {
                transition: none;
            }
        }

        /* User Display */
        .user-info {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 18px;
            background: var(--bg-card);
            padding: 15px 40px;
            border-radius: 33px;
            border: 1px solid var(--border-color);
            font-family: var(--font-emphasis);
            font-size: 19px;
            z-index: 100;
        }

        .user-badge {
            color: var(--text-primary);
            font-weight: 700;
            letter-spacing: 1px;
            font-size: 20px;
        }

        .logout-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 8px 20px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-reading);
        }

        .logout-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--accent-primary);
        }

        .floating-btns {
            display: none;
            gap: 10px;
            margin-right: 12px;
            align-items: center;
        }

        .floating-btns.visible {
            display: flex !important;
        }

        #floatingBtns > .gear-btn:not(#studyMenuBtn) {
            display: none;
        }

        .study-menu-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-tertiary));
            border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
        }

        .personal-progress-header > .personal-progress-title,
        .personal-progress-header > .personal-progress-info {
            display: none !important;
        }

        .personal-coverage-wrapper {
            cursor: default;
        }

        .personal-coverage-wrapper:not(.personal-coverage-wrapper--merged) .personal-progress-header {
            display: contents;
        }
        .personal-progress-header > .progress-info-btn {
            display: inline-flex !important;
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;
        }
        .personal-coverage-wrapper--merged .personal-progress-header > .progress-info-btn {
            position: static;
            order: 3;
            margin-left: 2px;
        }

        .gear-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 10px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gear-btn:hover {
            color: var(--accent-primary);
        }

        .gear-btn svg {
            width: 29px;
            height: 29px;
        }

        /* Desktop: vertical sidebar on right edge */
        @media (min-width: 768px) {
            .user-info {
                top: 50%;
                right: 20px;
                left: auto;
                transform: translateY(-50%);
                flex-direction: column;
                padding: 20px 15px;
                border-radius: 16px;
            }

            .floating-btns {
                flex-direction: column;
                margin-right: 0;
            }
        }

        @media (max-width: 767px) {
            .user-info {
                top: 10px;
                padding: 10px 16px;
                font-size: 17px;
                gap: 12px;
                background: transparent;
                border: none;
            }

            .user-badge {
                font-size: 18px;
            }

            .logout-btn {
                padding: 6px 16px;
                font-size: 13px;
            }

            .gear-btn {
                padding: 8px;
            }

            .gear-btn svg {
                width: 24px;
                height: 24px;
            }

            .floating-btns,
            .floating-btns.visible {
                display: none !important;
            }

            /* Mobile banner buttons (back, gear) match the 64x64 footprint of
               the arrow buttons (.nav-btn-inline). SVG sized to 48px so the
               icons match the visual weight of the 48px arrow glyphs.
               Specificity matches .gear-btn so source order wins; keep these
               AFTER the .gear-btn rule above. */
            .nav-row-icon {
                padding: 8px;
                width: 54px;
                height: 54px;
                box-sizing: border-box;
                color: rgba(255, 255, 255, 0.8);
            }

            .nav-row-icon svg {
                width: 38px;
                height: 38px;
            }
        }

        @media (min-width: 768px) {
            .nav-row-icon-group {
                display: none !important;
            }
        }

        @media (max-width: 767px) {
            .card-container {
                min-height: calc(100vh / var(--ui-zoom, 1));
                padding: 74px 0 44px;
                align-items: flex-start;
            }

            .card-container::before {
                height: calc(calc(100vh / var(--ui-zoom, 1)) - 80px);
                max-height: none;
                top: 52px;
                transform: none;
            }

            .card {
                height: calc(calc(100vh / var(--ui-zoom, 1)) - 118px);
                min-height: 460px;
                max-height: none;
            }

            /* Hide prev/next arrows in mobile banner when on an off-deck card */
            .card.is-stacked .mobile-nav-row .nav-btn-inline {
                visibility: hidden;
                pointer-events: none;
            }

            /* Mobile-specific positioning only — shared layout/appearance
               rules for .card-back-scrubber and its children live in the
               base stylesheet now, shared with desktop. Fills the entire
               reserved strip above the card (.card-container's 74px top
               padding) edge to edge, instead of floating as a smaller,
               inset pill within it. */
            .card-back-scrubber {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 74px;
                pointer-events: auto;
            }

            .card-word {
                font-size: 54px;
            }

            .action-btn {
                font-size: 38px;
            }

            /* Mobile card front layout adjustments */
            /* Navigation and Study options now live in the rail above the
               card, so mobile no longer reserves a toolbar inside each face. */
            .mobile-nav-row {
                display: none !important;
            }
            .mobile-nav-row > .nav-btn-inline,
            .mobile-nav-row .banner-center > [id^="backBtn"] {
                display: none !important;
            }
            .desktop-nav-row {
                display: none !important;
            }
        }

        @media (min-width: 768px) {
            .mobile-nav-row {
                display: none !important;
            }
            .desktop-nav-row {
                display: flex !important;
            }
            /* Hide nav arrows moved outside the card on desktop */
            .desktop-front-nav-hidden,
            .desktop-back-nav-hidden {
                display: none !important;
            }
            /* The gear popup is mobile-only — never visible on desktop. */
            .card-actions-popup,
            .card-actions-popup.visible {
                display: none !important;
            }
        }

        /* Floating actions popup that drops down from the top-banner gear on
           mobile. Hidden by default; .visible swaps display to flex. Tap any
           inner button to trigger its action AND dismiss; tap outside to
           dismiss (handled by document click listener in flashcards.js).
           position: fixed keeps the popup out of the card's preserve-3d
           context, avoiding z-fighting and axis-reversal issues on the back
           face. top: 84px = 12px card-container padding + 72px banner height,
           so the popup sits directly beneath the gear button. */
        .card-actions-popup {
            display: none;
            position: fixed;
            top: 124px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            pointer-events: auto;
            background: var(--bg-card-hover);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 12px 14px;
            gap: 14px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
            align-items: center;
        }
        .card-actions-popup.visible {
            display: flex;
        }

        /* Small pill button style (like logout) */
        .card-btn-pill {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-reading);
        }

        .card-btn-pill:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--accent-primary);
        }

        .card-btn-pill svg {
            width: 14px;
            height: 14px;
            vertical-align: middle;
        }

        /* Bad Bunny mode album artwork backgrounds */
        body.artist-mode .card-face {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        body.artist-mode .card-face::after {
            content: '';
            position: absolute;
            inset: 0;
            /* Higher alpha = more opaque overlay = artist album artwork
               shows through less. Keeps it as an atmospheric cue without
               competing with the text. */
            background: rgba(30, 39, 50, 0.9);
            border-radius: 16px;
            z-index: 0;
        }

        /* Lift the face's own children above the ::after artwork overlay.
           This used to be a blanket `position: relative`, which silently
           reverted every child that positions itself absolutely: the POS pill
           left the top-right corner and fell back into flow at the bottom of
           the card, in lyrics mode only. Elements that own their positioning
           are excluded and get their stacking order below instead. */
        body.artist-mode .card-face > *:not(.card-pos-list):not(.card-ranking):not(.front-production-hint):not(.card-tint):not(.stacked-exit-btn) {
            position: relative;
            z-index: 1;
        }

        body.artist-mode .card-face > div[style*="position: absolute"] {
            z-index: 5;
        }

        /* Absolutely positioned by their own rules — only the layer they sit
           on needs restating here. .card-tint keeps its own z-index: 50. */
        body.artist-mode .card-pos-list,
        body.artist-mode .card-ranking,
        body.artist-mode .front-production-hint,
        body.artist-mode .stacked-exit-btn {
            z-index: 5;
        }

        /* Find-word overlay (Spotlight-style) */
        #findWordModal.find-word-overlay {
            align-items: flex-start;
            justify-content: center;
            padding: min(calc(18vh / var(--ui-zoom, 1)), 140px) 16px 24px;
            overflow: hidden;
            z-index: 1100;
            background: rgba(4, 8, 16, 0.48);
            backdrop-filter: blur(22px) saturate(1.2);
            -webkit-backdrop-filter: blur(22px) saturate(1.2);
        }
        .find-word-spotlight {
            width: min(640px, 100%);
            border-radius: 18px;
            background: color-mix(in srgb, var(--bg-card) 86%, #0b1220);
            border: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent);
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
            overflow: hidden;
            animation: find-word-in 0.16s ease-out;
        }
        @keyframes find-word-in {
            from { opacity: 0; transform: translateY(-10px) scale(0.98); }
            to { opacity: 1; transform: none; }
        }
        .find-word-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px 12px;
        }
        .find-word-bar-icon {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            color: var(--text-muted);
        }
        .find-word-hotkey {
            flex-shrink: 0;
            padding: 3px 7px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 600;
            background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
        }
        .find-word-dismiss {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 16px;
        }
        .find-word-dismiss:hover {
            background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
            color: var(--text-primary);
        }
        .find-word-body {
            padding: 0 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .find-word-input {
            width: 100%;
            box-sizing: border-box;
            padding: 4px 0;
            background: transparent;
            border: 0;
            color: var(--text-primary);
            font-size: 22px;
            font-family: var(--font-emphasis);
            outline: none;
        }

        .find-word-input:focus {
            border-color: transparent;
            box-shadow: none;
        }
        .find-word-input::-webkit-search-decoration,
        .find-word-input::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }
        @media (pointer: coarse) {
            .find-word-hotkey { display: none; }
        }

        .find-word-status {
            color: var(--text-muted);
            font-size: 13px;
            min-height: 16px;
        }

        .find-word-results {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: min(calc(52vh / var(--ui-zoom, 1)), 420px);
            overflow-y: auto;
        }

        .find-word-result {
            display: flex;
            align-items: baseline;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border: 1px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            color: var(--text-primary);
            font-size: 14px;
            transition: background 0.12s ease, border-color 0.12s ease;
        }

        .find-word-result:hover,
        .find-word-result.is-active {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .find-word-result .fw-word {
            font-weight: 600;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }

        .find-word-result .fw-lemma {
            color: var(--text-muted);
            font-size: 12px;
            font-style: italic;
        }

        .find-word-result .fw-meaning {
            color: var(--text-secondary);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .find-word-result .fw-rank {
            color: var(--text-muted);
            font-size: 12px;
            font-family: var(--font-mono, monospace);
            flex-shrink: 0;
        }
        .find-word-result .fw-status {
            flex-shrink: 0;
            padding: 3px 7px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .find-word-result .fw-status--excluded {
            border-color: color-mix(in srgb, var(--accent-secondary) 34%, var(--border-color));
            color: var(--accent-secondary);
        }

        /* Whether the card is done. Same pill geometry as .fw-status so the two
           line up, but filled rather than outlined — this is the thing being
           looked up, not a footnote about it. */
        .find-word-result .fw-done {
            flex-shrink: 0;
            padding: 3px 7px;
            border-radius: 999px;
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .find-word-result .fw-done--unseen {
            color: var(--text-muted);
            border: 1px solid var(--border-color);
        }
        .find-word-result .fw-done--known {
            color: var(--success);
            background: color-mix(in srgb, var(--success) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
        }
        .find-word-result .fw-done--due {
            color: var(--warning);
            background: color-mix(in srgb, var(--warning) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
        }
        .find-word-result .fw-done--review {
            color: var(--error);
            background: color-mix(in srgb, var(--error) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--error) 38%, transparent);
        }

/* Data freshness in the JST-only App data tab (see trackDataFreshness in
   vocab.js). Diagnostic for service-worker staleness. */
.data-freshness-footer {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}
.data-freshness-footer:empty {
    display: none;
}

/* JST-only hero card at the very top of Developer tab */
.dev-latest-deploy-hero {
    margin-bottom: 16px;
}
.dev-latest-deploy-hero:empty {
    display: none;
}
.dev-deploy-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.dev-deploy-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.dev-deploy-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dev-deploy-agent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font: 700 11px/1 var(--font-emphasis);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    color: var(--accent-primary);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, transparent);
}
.dev-deploy-time {
    font: 600 12px/1.2 var(--font-emphasis);
    color: var(--text-secondary, var(--text-muted));
}
.dev-deploy-cache-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font: 600 11px/1 var(--font-data);
    background: color-mix(in srgb, var(--bg-primary) 65%, transparent);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.dev-deploy-cache-pill .dev-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.dev-deploy-summary {
    font: 600 15px/1.45 var(--font-reading);
    color: var(--text-primary);
    margin: 2px 0 0 0;
}
.dev-deploy-bullets {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dev-deploy-bullet {
    font: 400 13px/1.45 var(--font-reading);
    color: var(--text-secondary, var(--text-muted));
}
.dev-deploy-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    font: 500 11px/1.3 var(--font-data);
    color: var(--text-muted);
}
.dev-deploy-footer-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dev-deploy-refresh-btn {
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    color: var(--text-primary);
    padding: 3px 8px;
    font: 600 11px/1.2 var(--font-emphasis);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dev-deploy-refresh-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

/* Admin Update Changelog Modal */
.admin-update-modal-sheet {
    max-width: 560px;
    width: 92%;
    margin: auto;
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-primary);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.admin-update-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.admin-update-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-update-title {
    font: 700 16px/1.2 var(--font-emphasis);
    color: var(--text-primary);
}
.admin-update-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-update-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.admin-update-dismiss-btn {
    appearance: none;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    padding: 8px 22px;
    font: 600 13px/1.2 var(--font-emphasis);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.admin-update-dismiss-btn:hover {
    opacity: 0.9;
}

/* JST-only dev detail under the freshness footer (renderDevFooter in ui.js). */
.dev-footer-detail {
    margin-top: 8px;
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.dev-footer-label {
    margin-top: 6px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.dev-footer-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-mono, monospace);
}
.dev-footer-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dev-footer-entry { margin-top: 3px; }
.dev-footer-commit { opacity: 0.6; }
.dev-footer-bullet { padding-left: 10px; }

.sense-prominence-label {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--accent-green) 38%, var(--border-color));
    border-radius: 999px;
    color: #66e4cc;
    background: color-mix(in srgb, var(--accent-green) 10%, transparent);
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.sense-prominence-label.occasional {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border-color));
    color: #f9c96e;
    background: color-mix(in srgb, var(--warning) 9%, transparent);
}

/* ===========================================================================
   Replica card, learner tutorial, and the About entry to the walkthrough
   ===========================================================================
   The card inside .card-replica is built by js/card-replica.js from the app's
   own class names, so almost everything it looks like is inherited from the
   real flashcard rules further up this file. Two features show it:

     .card-tutorial-*  js/tutorial.js     learners; opened by "?" / first run
     .walkthrough-*    js/walkthrough.js  visitors; opened from About

   The rules below cover the entry button in the About copy (which opens the
   walkthrough), the tutorial's chrome, and the SIZE overrides that make a
   viewport-scale .card sit inside a fixed stage. Nothing here restyles the
   card itself — if it did, it would stop being a replica the moment the real
   card changed. */

/* -------- Entry button in the About copy --------------------------------- */

.about-see-example-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin: 22px auto 26px;
    padding: 14px 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 16%, var(--bg-card)),
        var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
    border-radius: 14px;
    color: var(--text-primary);
    font-family: var(--font-emphasis);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.about-see-example-btn:hover,
.about-see-example-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.about-see-example-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--accent-primary-text);
    font-size: 13px;
    /* The glyph's own bearing sits it left of centre in a circle. */
    padding-left: 2px;
}

.about-see-example-label {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 700;
}

.about-see-example-hint {
    flex: 0 0 100%;
    order: 3;
    color: var(--text-muted);
    font-family: var(--font-reading);
    font-size: 12px;
    padding-left: 46px;
    margin-top: -6px;
}

/* -------- Modal chrome ---------------------------------------------------- */

/* Full-bleed, like .about-project-modal — this opens on top of the About
   modal, so it has to cover it rather than sit in a card on top of it.
   Scrolling belongs to .card-tutorial-body: the header and step footer stay
   pinned while the card and its notes scroll between them. */
.card-tutorial-modal {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100vw;
    height: calc(100vh / var(--ui-zoom, 1));
    max-height: calc(100vh / var(--ui-zoom, 1));
    border: none;
    border-radius: 0;
    background: var(--bg-primary);
    padding: 0;
    overflow: hidden;
}

/* Chapter progress | summary | exit, on one line. The compact header leaves
   the card and its annotations as much vertical room as possible. */
.card-tutorial-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.card-tutorial-close {
    position: static;
    flex: 0 0 auto;
    justify-self: end;
}

.card-tutorial-body {
    flex: 1 1 auto;
    padding: 16px 24px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Face copy sits above the card, centred, because it describes the whole
   face rather than either column of notes. */
.card-tutorial-intro {
    min-width: 0;
    text-align: center;
}

@keyframes setup-anim-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card centred with a column of notes either side. The side columns are
   equal-width so the card lands on the real centre line of the modal, not
   wherever the longer column pushes it. */
.card-tutorial-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    justify-content: center;
    max-width: 1500px;
    margin: 0 auto;
}

.card-tutorial-stage-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* The stage is the positioning context for the numbered badges, which are
   placed from measured element boxes rather than fixed offsets. */
.card-tutorial-stage-wrap {
    position: relative;
    justify-self: center;
}

.card-tutorial-stage {
    position: relative;
}

/* -------- Size overrides so a viewport-scale .card fits the stage --------- */

.card-replica {
    width: 440px;
    max-width: 100%;
    /* Set per card by fitCardToContent(). A fixed height either clipped the
       denser cards — `tem` overflowed its senses box by 72px, losing a whole
       sense and its grammar pills — or left the sparse ones bottom-heavy. */
    height: var(--replica-card-h, 480px);
    perspective: 1200px;
    position: relative;
}

.card-replica .card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    position: relative;
    cursor: default;
    /* The live card sets touch-action: none for swipe grading. There is no
       swipe here, and inheriting it would eat page scrolling on a phone,
       where the card covers most of the screen. */
    touch-action: auto;
}

.card-tutorial-flip {
    display: none !important;
}

.card-replica .card-front {
    justify-content: center;
    padding: 30px 22px;
}

.card-replica .card-back {
    justify-content: flex-start;
    padding: 24px 18px 20px;
}

.card-replica .card-word {
    font-size: 50px;
}

/* The back's flex column, its scroll region and its sentence row are shared
   with the live card via the widened `#backContent, .card-replica
   .card-details` selectors above — nothing about that layout is restated here.

   The replica has no `.links-section`, the row that normally carries
   `margin-top: auto` and pushes everything below the senses to the foot of the
   card. That job is deliberately NOT reassigned to the sentence: on a live card
   the gap is filled by the links row, but here it would be empty space holding
   the lyric away from the meaning it belongs to. The lyric is evidence for the
   selected sense, so it reads directly beneath it and the slack falls to the
   bottom of the card instead. */

/* Live cards leave the ranking pinned to the card's lower edge; keep that,
   but stop it colliding with the flip hint below it. */
.card-replica .card-ranking {
    bottom: 46px;
}

.card-tutorial-flip-hint {
    display: none !important;
}

/* -------- Room to breathe inside the replica ----------------------------- */

/* The three blocks on the back sat 10px apart against a 16px side inset, which
   is what made the card feel packed: every border ran close to another border
   or to the card's own edge. The slack recovered from the shorter card goes
   here, into the gaps and the side inset, rather than into empty space. */
.card-replica .card-back {
    padding: 22px 20px 18px;
}

/* Nothing on a walkthrough card may be scrolled out of sight: the annotations
   point at these rows, so the card grows to hold them instead. */
.card-replica .meanings-scroll {
    max-height: none !important;
    overflow: visible;
}

.card-replica .card-details {
    gap: 14px;
}

.card-replica .meaning-pos-section {
    padding: 4px;
    border-radius: 12px;
}

/* The prominence meter is absolutely positioned against the row's right edge.
   At 8px it sat on the border it was meant to sit inside. */
.card-replica .meaning-row .sense-prominence-badge {
    right: 11px;
}

.card-replica .meaning-row {
    margin-bottom: 5px !important;
}

.card-replica .meaning-pos-rows .meaning-row:last-child {
    margin-bottom: 0 !important;
}

/* The example is the evidence for the selected sense, so it gets a little more
   separation from the senses above it than the senses get from each other. */
.card-replica .sentence {
    padding: 12px 14px;
}

/* -------- Numbered badges and the elements they point at ----------------- */

/* Ring the annotated element itself. outline (not border) so no card element
   changes size when it lights up. */
.card-tutorial-anchored.is-annotation-active {
    outline: 2px solid var(--accent-amber);
    outline-offset: 3px;
    border-radius: 6px;
}

/* -------- Notes column ---------------------------------------------------- */

.card-tutorial-notes {
    min-width: 0;
    max-width: 420px;
    color: var(--text-secondary);
}

/* Hug the card: the left column's notes sit against their badges on the
   card's left edge, the right column's against its right edge. */
.card-tutorial-notes-left {
    justify-self: end;
}

.card-tutorial-notes-right {
    justify-self: start;
}

.card-tutorial-lede {
    font-family: var(--font-emphasis);
    color: var(--text-primary);
    font-weight: 700;
}

/* The em dash is punctuation between lede and summary, so it belongs to the
   stylesheet rather than to the copy — the strings stay clean sentences. */
.card-tutorial-lede::after {
    content: " —";
    color: var(--text-muted);
    font-weight: 400;
}

.card-tutorial-blurb {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.card-tutorial-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-tutorial-note {
    display: flex;
    gap: 12px;
    padding: 11px 13px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.card-tutorial-note.is-active {
    background: var(--bg-tertiary);
    border-color: var(--accent-amber);
}

.card-tutorial-note strong {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 3px;
}

.card-tutorial-note span:not(.card-tutorial-note-num):not(.card-tutorial-action-hint) {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

.card-tutorial-action-hint {
    display: block;
    margin-top: 6px;
    color: var(--accent-green);
    font-family: var(--font-reading);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

/* -------- Tutorial progress and controls -------------------------------- */
.card-tutorial-sequence {
    display: grid;
    gap: 1px;
    min-width: 74px;
    font-family: var(--font-emphasis);
}

.card-tutorial-sequence strong {
    color: var(--text-primary);
    font-size: 14px;
}

.card-tutorial-sequence span {
    color: var(--text-muted);
    font: 700 11px/1.2 var(--font-data);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card-tutorial-flip,
.card-tutorial-continue {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-emphasis);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.card-tutorial-flip:hover,
.card-tutorial-continue:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.card-tutorial-continue {
    margin-top: 8px;
    border-color: transparent;
    background: var(--accent-primary);
    color: var(--accent-primary-text);
}

.card-tutorial-continue.is-secondary {
    border-color: var(--border-light);
    background: transparent;
    color: var(--text-secondary);
}

.card-tutorial-mobile-coach {
    display: none;
}

/* -------- Narrow viewports ------------------------------------------------ */
/* Stack the card above its notes. The badges stay anchored because they are
   positioned from measured boxes and re-placed on resize. */

@media (max-width: 1180px) {
    /* Card first, then both note columns stacked beneath it. Badges stay
       anchored because they are positioned from measured boxes and re-placed
       on resize. */
    .card-tutorial-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        justify-items: center;
    }

    .card-tutorial-stage-col {
        order: -1;
    }

    .card-tutorial-notes,
    .card-tutorial-notes-left,
    .card-tutorial-notes-right {
        justify-self: center;
        max-width: 560px;
        width: 100%;
    }

    /* Two stacked <ol>s would restart the visual rhythm; keeping them
       adjacent with no gap reads as one continuous list. */
    .card-tutorial-notes-left .card-tutorial-note-list {
        padding-bottom: 0;
    }
}

@media (max-width: 560px) {
    .card-tutorial-body {
        padding: 16px 12px 24px;
    }

    /* Three cells will not fit across a phone. Controls keep the top line,
       the summary drops beneath them and spans the full width — still one
       block of chrome, just folded. */
    .card-tutorial-topbar {
        grid-template-columns: auto auto;
        justify-content: space-between;
        gap: 10px 12px;
    }

    .card-tutorial-topbar .card-tutorial-sequence { grid-area: 1 / 1; }
    .card-tutorial-topbar .card-tutorial-close { grid-area: 1 / 2; }
    .card-tutorial-topbar .card-tutorial-intro { grid-area: 2 / 1 / 3 / 3; }

    /* Narrow enough for a phone, but the height still comes from the content:
       rows wrap at this width, so a fixed height clipped the denser cards
       harder here than anywhere else. */
    .card-replica {
        width: 340px;
        height: var(--replica-card-h, 512px);
    }

    .card-tutorial-blurb {
        font-size: 13.5px;
    }
}

@media (max-width: 700px) {
    .card-tutorial-body {
        padding-bottom: 210px;
    }

    .card-tutorial-notes {
        display: none;
    }

    .card-tutorial-anchored.is-annotation-active {
        outline-width: 3px;
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-amber) 18%, transparent);
        animation: card-tutorial-mobile-spotlight 280ms ease-out;
    }

    .card-tutorial-mobile-coach:not([hidden]) {
        position: fixed;
        z-index: 40;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 5px 12px;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
        border-radius: 16px;
        background: color-mix(in srgb, var(--bg-card) 96%, transparent);
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(18px);
        animation: card-tutorial-mobile-coach-in 260ms ease-out;
    }

    .card-tutorial-mobile-progress {
        grid-column: 1 / -1;
        color: var(--accent-amber);
        font-family: var(--font-data);
        font-size: 11px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .card-tutorial-mobile-coach > strong {
        align-self: center;
        color: var(--text-primary);
        font-family: var(--font-emphasis);
        font-size: 16px;
    }

    .card-tutorial-mobile-coach > p {
        grid-column: 1 / -1;
        margin: 0;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.42;
    }

    .card-tutorial-mobile-actions {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        gap: 7px;
    }

    .card-tutorial-mobile-actions button {
        min-width: 64px;
        padding: 8px 11px;
        border: 1px solid var(--border-light);
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary);
        font: 650 12px/1 var(--font-emphasis);
    }

    .card-tutorial-mobile-actions button:last-child {
        border-color: transparent;
        background: var(--accent-primary);
        color: var(--accent-primary-text);
    }

    .card-tutorial-mobile-actions button:disabled {
        opacity: 0.35;
    }
}

@keyframes card-tutorial-mobile-spotlight {
    from { box-shadow: 0 0 0 18px transparent; }
}

@keyframes card-tutorial-mobile-coach-in {
    from { opacity: 0; transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
    .card-tutorial-anchored.is-annotation-active,
    .card-tutorial-mobile-coach:not([hidden]) {
        animation: none;
    }
}

/* Provenance panel: confidence + the sentences a sense was assigned to.
   The panel itself already scrolls (absolute, inset 0, overflow-y:auto above);
   only momentum scrolling is added here so the longer content drags on iOS. */
.provenance-panel { -webkit-overflow-scrolling: touch; }
.prov-conf { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  margin: 4px 0 2px; font-size: 11px; }
.prov-conf-band { text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; }
.prov-conf--high .prov-conf-band { background: rgba(31,107,74,.16); color: #1f6b4a; }
.prov-conf--medium .prov-conf-band { background: rgba(154,91,18,.16); color: #9a5b12; }
.prov-conf--low .prov-conf-band { background: rgba(194,47,74,.14); color: #c22f4a; }
.prov-conf-val { font-variant-numeric: tabular-nums; opacity: .85; }
.prov-conf-note { opacity: .6; }
.prov-examples { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.prov-examples--empty { font-size: 11px; opacity: .55; font-style: italic; }
.prov-ex { border-left: 2px solid currentColor; padding-left: 8px; opacity: .95; }
.prov-ex-target { font-size: 12.5px; }
.prov-ex-english { font-size: 11.5px; opacity: .7; }
.prov-ex-meta { font-size: 11px; opacity: .6; display: flex; gap: 8px; margin-top: 2px; }
.prov-ex-src { text-decoration: underline; }
.prov-ex-align { font-variant-numeric: tabular-nums; }
.prov-ex-record { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 8px; overflow: hidden; }
.prov-ex-record > summary { cursor: pointer; padding: 7px 9px; font-size: 11px; font-weight: 700; }
.prov-ex-record > .prov-ex { margin: 0 9px 9px; }
.prov-ex-fields { margin: 7px 0 0; display: grid; gap: 4px; }
.prov-ex-field { display: grid; grid-template-columns: minmax(84px, .7fr) minmax(0, 2fr); gap: 7px; font-size: 11px; }
.prov-ex-field dt { opacity: .58; }
.prov-ex-field dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prov-ex-field code { font-size: 11px; white-space: normal; }
.prov-ex-raw { margin-top: 7px; font-size: 11px; }
.prov-ex-raw summary { cursor: pointer; opacity: .72; }
.prov-ex-raw pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
@media (prefers-color-scheme: dark) {
  .prov-conf--high .prov-conf-band { background: rgba(95,211,154,.16); color: #5fd39a; }
  .prov-conf--medium .prov-conf-band { background: rgba(226,165,99,.16); color: #e2a563; }
  .prov-conf--low .prov-conf-band { background: rgba(255,122,144,.16); color: #ff7a90; }
}

/* ── Fast mode row + page ─────────────────────────────────────────────────
   One row under the level picker: the toggle, what it currently does, and the
   way through to the page that explains it. Everything it bundles lives on
   that page rather than competing with the level picker for attention. */
.setup-options {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.setup-options-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.fast-mode-master {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.fast-mode-master-icon { color: var(--accent-primary); font-size: 16px; }
.fast-mode-master-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.fast-mode-title-row { display: inline-flex; align-items: center; gap: 6px; }
.fast-mode-title-row--header { margin-bottom: 8px; }
.streamline-rec-badge {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, transparent);
  color: var(--accent-primary);
  font: 700 11px/1.1 var(--font-reading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.fast-mode-master-copy strong { font: 700 13px/1.2 var(--font-emphasis); }
.fast-mode-master-copy small {
  color: var(--text-secondary);
  font: 500 11px/1.3 var(--font-reading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@keyframes streamline-callout-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes streamline-icon-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--accent-primary-rgb), 0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(var(--accent-primary-rgb), 0.45)); }
}
.streamline-rec-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  animation: streamline-callout-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.streamline-rec-callout-icon {
  font-size: 14px;
  line-height: 1;
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 1px;
  animation: streamline-icon-glow 2.5s ease-in-out infinite;
}
.streamline-rec-callout-body {
  flex: 1;
  min-width: 0;
}
.streamline-rec-callout-body strong {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  font-size: 12px;
}
.streamline-rec-callout-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11.5px;
}
.streamline-rec-callout-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 6px;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.streamline-rec-callout-dismiss:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}
.fast-mode-master-switch {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-light);
  transition: background .18s ease;
}
.fast-mode-master-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform .18s ease;
}
.fast-mode-master.selected .fast-mode-master-switch { background: var(--accent-primary); }
.fast-mode-master.selected .fast-mode-master-switch i { transform: translateX(14px); background: #10141b; }
.fast-mode-master.is-custom .fast-mode-master-switch { background: color-mix(in srgb, var(--accent-primary) 50%, var(--border-light)); }
.fast-mode-summary {
  flex: 1 1 140px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}
.fast-mode-detail-btn {
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.fast-mode-detail-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}
.fast-mode-detail-btn:focus-visible,
.fast-mode-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* The page. Reads as a document rather than a settings sheet, because the
   point is to explain the trade before offering the controls. */
.fast-mode-page-body {
  /* The page holds two short explanations and four controls. Capped at 1040px
     it rendered as a thin ribbon down the middle of a wide window while each
     card's prose wrapped into a narrow column -- horizontal room left empty to
     buy vertical height the window does not have. The cap is now wide enough
     that the two cards sit side by side with prose at a readable measure. */
  max-width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 36px) 40px;
}
.fast-mode-page-body h2 {
  font-family: var(--font-emphasis);
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--text-primary, var(--text-secondary));
}
.fast-mode-lede {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.fast-mode-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
  align-items: start;
}
.fast-mode-controls .setup-substep {
  margin-top: 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 34%, var(--border-color));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-card));
}
.fast-mode-controls .fast-mode-explainer { margin: 0; }
.fast-mode-none {
  margin: 0;
  font: 500 11.5px/1.45 var(--font-reading);
  color: var(--text-muted);
}
.fast-mode-explainer {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.9;
}
.fast-mode-note {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.8;
}
.fast-mode-close { position: absolute; top: 18px; right: 20px; z-index: 1; }
@media (max-width: 700px) {
  .fast-mode-page-body { padding-top: 20px; }
  .fast-mode-controls { grid-template-columns: 1fr; gap: 12px; }
  .fast-mode-controls .setup-substep { padding: 12px; }
}

/* The Fast Track sheet is the page. A card around each shortcut added a second
   inset, so the words sat in a narrow band under the close button. The title
   shares the close button's row, and the sections run to the page edges. */
#fastModeModal .fast-mode-close {
  top: 0;
  right: 4px;
}
#fastModeModal .fast-mode-page-body {
  max-width: none;
  padding: 0 16px 32px;
}
#fastModeModal .fast-mode-title-row--header {
  min-height: 32px;
  margin: 0 28px 2px 0;
}
#fastModeModal .fast-mode-page-body h2 {
  margin: 0;
  line-height: 32px;
}
#fastModeModal .fast-mode-lede {
  margin: 2px 0 14px;
}
#fastModeModal .fast-mode-controls {
  gap: 0;
}
#fastModeModal .fast-mode-controls .setup-substep {
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
}

/* ── Unified Fast Track Summary, Triage & Category Surfaces ────────────── */

/* Category Triage Tabs inside Skipped Words Modal */

/* Triage batch action bar */

/* Category Badges & Row Actions */
.extras-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.extras-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}
.extras-badge--cognate {
  background: rgba(74, 158, 255, 0.1);
  color: #4a9eff;
  border-color: rgba(74, 158, 255, 0.3);
}
.extras-badge--grammar {
  background: rgba(167, 139, 250, 0.1);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.3);
}
.extras-badge--slang {
  background: rgba(245, 166, 35, 0.1);
  color: #f5a623;
  border-color: rgba(245, 166, 35, 0.3);
}
.extras-badge--entity {
  background: rgba(0, 212, 170, 0.1);
  color: #00d4aa;
  border-color: rgba(0, 212, 170, 0.3);
}
.extras-badge--lemma {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
.extras-word-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.extras-word-stack .extras-open-card {
  text-align: left;
}


/* A page, not a dialogue. The explanation is the point, so it gets the whole
   screen rather than a card floating over the setup panel the learner is
   trying to understand. `.fullscreen-modal` caps at 600px for the other
   walkthroughs; this overrides that deliberately. */
.fast-mode-page {
  max-width: none;
  width: 100%;
  min-height: 100%;
  max-height: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% -12%, rgba(var(--accent-primary-rgb), .28), transparent 46%),
    var(--bg-primary, var(--bg-card));
  overflow-y: auto;
}
#fastModeModal.modal {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
#fastModeModal .substep-title {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
#fastModeModal.modal { padding: 0; align-items: stretch; justify-content: stretch; }

.extras-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.extras-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}
.extras-btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

.extras-body {
  padding: 4px 20px 20px;
  max-height: calc(62vh / var(--ui-zoom, 1));
  overflow-y: auto;
}
.extras-section + .extras-section { margin-top: 22px; }
.extras-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.extras-body h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-emphasis);
  font-size: 13px;
  color: var(--text-secondary);
}
.extras-restore {
  flex: none;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: rgba(var(--accent-primary-rgb), .12);
  color: var(--accent-primary);
  font: 650 11px/1.2 var(--font-reading);
  cursor: pointer;
}
.extras-restore:hover { background: rgba(var(--accent-primary-rgb), .2); }
.extras-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.extras-blurb {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.extras-list { margin: 0; padding: 0; list-style: none; }
.extras-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.extras-row:last-child { border-bottom: 0; }
.extras-word { font-weight: 600; color: var(--text-secondary); }
.extras-translation {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extras-note { font-size: 11px; color: var(--text-muted); opacity: 0.8; text-align: right; }
.extras-note strong { color: var(--text-secondary); font-weight: 600; }
.extras-empty { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 520px) {
  .extras-row { grid-template-columns: minmax(0, 1fr) auto; }
  .extras-translation { grid-column: 1 / -1; white-space: normal; }
}
.extras-score { font-variant-numeric: tabular-nums; }

/* Known-language picker: multi-select chips */
.known-languages-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: none;
  padding: 0;
}
.known-language-btn {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.known-language-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}
.known-language-btn.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.known-language-btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}
.known-languages-note { display: block; opacity: 0.75; }

/* Fast mode's two states borrow the toggle look used by every other on/off
   pair in setup. When the parts are set individually neither reads as
   selected, and the summary beside them says so. */
.fast-mode-btn:not(.fast-mode-master) {
  flex: 1;
  padding: 7px 14px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}
.fast-mode-btn:not(.fast-mode-master).selected {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
}
.fast-mode-btn:not(.fast-mode-master):not(.selected):hover { color: var(--text-secondary); }

/* The level-percentage switch shares the fast-mode page's control styling. */
.coverage-mode-btn {
  flex: 1;
  padding: 7px 12px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}
.coverage-mode-btn.selected {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
}
.coverage-mode-btn:not(.selected):hover { color: var(--text-secondary); }
.coverage-mode-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ── Step 1 once a source is chosen ───────────────────────────────────────
   Before you pick, the card teaches: it names the language, offers "Choose
   another language", labels the pair of buttons "Learn from", and describes
   each of them. All of that earns its space once.

   Afterwards it says the same two facts five times — the header eyebrow
   already reads "Learning from speech", the arrow already means the language
   is tappable, and the descriptions describe a choice you have made. On a
   phone that pushed Choose level below the fold, so the first thing a
   returning learner sees is a decision they already took.

   Collapsed by :has() on the selection class the buttons already carry, so
   there is no second piece of state to keep in step, and a first run — where
   nothing is selected — keeps the full explanation. */
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-title,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-intro,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-bullets,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-addons-title,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-addon-btn small,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .artist-source-copy > span:last-child {
  display: none;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice {
  padding: 7px 7px 6px;
  gap: 0;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-btn {
  min-height: 0;
  padding: 7px 10px;
  border-radius: 8px;
}
/* The name carries the row on its own once the subtitle is gone. */
.standard-source-card:has(.standard-source-choice-btn.is-selected) .artist-source-picker {
  padding-top: 8px;
  padding-bottom: 8px;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .artist-source-copy {
  display: block;
}

/* Once chosen, the two source buttons are one line of text each, so they fit
   side by side even on a phone — where the mobile rule stacks them because
   the uncollapsed version carries a description under each name. */
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-buttons {
  grid-template-columns: 1fr 1fr;
}
/* "Language" sitting above "Czech" says the same thing twice, so the word goes
   and the eyebrow above it stays — it is the only place the mode is named in
   words. They are one element: the eyebrow is #step1Title::before, so hiding
   the element took the eyebrow with it and left a bare step number over dead
   space. Zeroing the element's own type and restoring it on the pseudo-element
   drops the text without touching what is generated. */
#step1:has(.standard-source-choice-btn.is-selected) #step1Title {
  font-size: 0;
  line-height: 0;
}
#step1:has(.standard-source-choice-btn.is-selected) #step1Title::before {
  font-size: 11px;
  line-height: 1.2;
}

/* A chosen language/source becomes persistent context in the top bar. The
   setup panel can then lead with the next real decision: level and set. */
#step1.context-ready,
#artistSourceStep.context-ready { display: none !important; }
.has-learning-context #step2 .step-number,
.has-learning-context #step4 .step-number { display: none; }

.learning-context-chip {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  gap: 7px;
  max-width: 230px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
  color: var(--text-primary);
  cursor: pointer;
}
.learning-context-chip[hidden] { display: none; }
.learning-context-flag { font-size: 18px; line-height: 1; }
.learning-context-photo {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  color: #fff;
  font: 800 11px var(--font-emphasis);
}
.learning-context-photo[hidden] { display: none; }
.learning-context-sheet-photo { width: 30px; height: 30px; font-size: 11px; }
.learning-context-chip-copy { min-width: 0; text-align: left; line-height: 1.1; }
.learning-context-chip-copy strong { overflow: hidden; font: 700 13px var(--font-emphasis); text-overflow: ellipsis; white-space: nowrap; }
.learning-context-chevron { color: var(--text-muted); font-size: 17px; }

.learning-context-sheet {
  box-sizing: border-box;
  width: min(92vw, 390px);
  padding: 20px 20px 22px;
  border-radius: 20px;
}
.learning-context-close-row {
  display: flex;
  justify-content: flex-end;
  min-height: 34px;
  margin-bottom: 12px;
}
.learning-context-close-row .modal-close { position: static; }
.learning-context-switches { display: grid; gap: 8px; }
.learning-context-choice[hidden] { display: none; }
.learning-context-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.learning-context-sheet-flag { font-size: 30px; }
.learning-context-mode-icon { display: grid; place-items: center; width: 30px; color: var(--accent-primary); font-size: 18px; }
.learning-context-choice > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.learning-context-choice small { color: var(--text-muted); font: 600 11px/1.2 var(--font-reading); text-transform: uppercase; letter-spacing: .05em; }
.learning-context-choice strong { overflow: hidden; font: 700 14px/1.3 var(--font-emphasis); text-overflow: ellipsis; white-space: nowrap; }
.learning-context-choice > span:last-child { color: var(--text-muted); font-size: 19px; }
.learning-context-choice:hover,
.learning-context-progress:hover { border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color)); }
.learning-context-progress {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 13px 12px 11px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.learning-context-progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--text-secondary); font-size: 12px; }
.learning-context-progress-copy strong { color: var(--text-primary); font-family: var(--font-data); }
.learning-context-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-tertiary); }
.learning-context-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
.learning-context-progress-link { display: flex; justify-content: space-between; margin-top: 9px; color: var(--text-secondary); font: 650 11px/1.2 var(--font-reading); }


@media (max-width: 700px) {
  .learning-context-chip { max-width: 142px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .learning-context-sheet {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    padding: calc(env(safe-area-inset-top) + 16px) 16px 20px;
    border-radius: 0 0 20px 20px;
  }
  .top-bar-user-name { display: none; }
}


/* Source choice is the only onboarding explanation the home screen needs.
   Language already lives in the compact top-bar control, so do not repeat it
   as a numbered setup step or a second language card. */
#step1.language-summary-active {
  padding: 0;
  border: 0;
  background: transparent;
}
#step1.language-summary-active > .step-header,
#step1.language-summary-active .standard-source-card > .artist-source-picker,
#step1.language-summary-active .standard-source-progress {
  display: none !important;
}
#step1.language-summary-active #step1Title::before { content: none; }
#step1.language-summary-active .standard-source-card {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--accent-primary) 4%);
}
#step1.language-summary-active .standard-source-choice {
  gap: 13px;
  padding: 0;
  border: 0;
}
.standard-source-choice-intro { display: grid; gap: 5px; }
.standard-source-choice-intro .standard-source-choice-title {
  color: var(--text-primary);
  font: 700 16px/1.25 var(--font-emphasis);
  letter-spacing: -0.01em;
  text-transform: none;
}
.standard-source-choice-intro p {
  max-width: 52ch;
  margin: 0;
  color: var(--text-secondary);
  font: 400 14px/1.5 var(--font-reading);
}
#step1.language-summary-active .standard-source-choice-buttons {
  grid-template-columns: 1fr;
  gap: 10px;
}
#step1.language-summary-active .standard-source-choice-btn {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 88px;
  padding: 14px 12px;
  border-radius: 13px;
  background: var(--bg-tertiary);
}
.standard-source-choice-btn > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.standard-source-option-title {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.standard-source-option-title em {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), .14);
  color: var(--accent-primary);
  font: 700 11px/1 var(--font-reading);
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#step1.language-summary-active .standard-source-choice-btn small {
  overflow: visible;
  font-size: 13px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}
/* "Best for" lines under each vocabulary mode. Buttons may hold only
   phrasing content, so these are spans drawn as a bulleted list. */
.standard-source-bullets {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}
.standard-source-bullets > span {
  position: relative;
  padding-left: 13px;
  color: var(--text-secondary);
  font: 500 13px/1.4 var(--font-reading);
}
.standard-source-bullets > span::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: .75;
}
.standard-source-bullets > span:first-child { color: var(--text-primary); }
.standard-source-choice-pick {
  color: var(--text-muted);
  font-weight: 600;
}

/* Conjugation sits apart from the two vocabulary modes: under a divider,
   labelled as an add-on, and drawn lighter so it reads as optional rather
   than as a third answer to "pick one". */
.standard-source-addons {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.standard-source-addons-title {
  color: var(--text-muted);
  font: 700 11px/1 var(--font-emphasis);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.standard-source-addon-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.standard-source-addon-btn:hover,
.standard-source-addon-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
  background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
  outline: none;
}
.standard-source-addon-btn > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.standard-source-addon-btn strong { font: 700 14px/1.2 var(--font-emphasis); }
.standard-source-addon-btn small {
  color: var(--text-secondary);
  font: 500 12.5px/1.4 var(--font-reading);
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-addons {
  margin-top: 6px;
  padding-top: 6px;
  gap: 0;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-addon-btn {
  padding: 7px 10px;
  border-radius: 8px;
}

.standard-source-choice-arrow,
.standard-source-choice-status {
  color: var(--text-muted);
  font: 700 18px/1 var(--font-emphasis);
  font-style: normal;
}
.standard-source-choice-btn:disabled {
  opacity: 1;
  color: var(--text-muted);
  border-style: dashed;
  background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
}
.standard-source-choice-btn:disabled .standard-source-choice-icon { opacity: .48; }
.standard-source-choice-btn:disabled .standard-source-choice-status {
  max-width: 58px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.learning-context-availability {
  min-height: 0;
  margin: -3px 2px 10px;
  color: var(--text-muted);
  font: 400 11px/1.45 var(--font-reading);
}
.known-languages-context {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
}
.known-languages-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.known-languages-header strong {
  color: var(--text-primary);
  font: 700 12px/1.3 var(--font-emphasis);
}
.known-languages-header small {
  color: var(--text-muted);
  font: 500 11px/1.3 var(--font-reading);
}
/* The shared toggle style scrolls and shrinks. On this row the label has to
   stay readable beside the view link, so the switch keeps its own width. */

.fast-mode-view-items-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, transparent);
  color: var(--accent-primary);
  font: 600 12px/1.2 var(--font-reading);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.fast-mode-view-items-btn:hover {
  background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
  border-color: var(--accent-primary);
}
.cognate-extra-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  color: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, transparent);
  font: 700 11px/1 var(--font-data, var(--font-reading));
  margin-left: 5px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}
.cognate-extra-count:hover {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
}
.cognate-folded-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
}
.cognate-folded-chip {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font: 500 11.5px/1.2 var(--font-reading);
  cursor: pointer;
}
.cognate-folded-chip:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.fast-mode-admin-details {
  margin-top: 28px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--border-color);
  font-size: 11.5px;
  color: var(--text-muted);
}
.fast-mode-admin-details h4, .fast-mode-admin-details h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-secondary, #e2b340);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Calm product shell ──────────────────────────────────────────────────
   A stable neutral shell keeps the language itself—not changing chrome and
   nested panels—as the visual subject. Language colours still belong to the
   flashcards; setup uses one quiet product accent. */
:root {
  --bg-primary: #0b0f14;
  --bg-secondary: #10161d;
  --bg-tertiary: #161d26;
  --bg-card: #1a222c;
  --bg-card-hover: #202a35;
  --text-secondary: #d1d7df;
  --text-muted: #8e99a8;
  --border-color: #28323e;
  --border-light: #3a4654;
}
body {
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle at 50% -18%, rgba(125, 143, 166, .13), transparent 42%);
}
#setupPanel,
.auth-modal-content {
  --accent-primary: #8795ff;
  --accent-primary-rgb: 135, 149, 255;
  --accent-secondary: #9ccfbe;
  --accent-secondary-rgb: 156, 207, 190;
  --accent-primary-text: #10141b;
  --accent-secondary-text: #10141b;
}
/* applyLanguageColorTheme() writes the language colour inline on #setupPanel,
   which wins over the indigo above. The second flag colour is a thin edge. */
#setupPanel .level-btn.selected,
#setupPanel .group-size-btn.selected,
#setupPanel .standard-source-choice-btn.is-selected {
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent-secondary) 82%, transparent);
}

#topBar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px 10px;
  border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
  /* One hairline of the language's own colour under the bar. Enough to tell
     Spanish from Czech at a glance without theming the whole page. */
  border-bottom: 2px solid var(--lang-trim, var(--accent-primary));
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--lang-secondary-ui, transparent) 55%, transparent),
    0 8px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.top-bar-header { min-height: 36px; gap: 7px; }
.top-bar-icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.top-bar-icon-btn:hover,
.top-bar-icon-btn:focus-visible {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  outline: none;
}
.top-bar-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sync-status.is-synced { display: none; }
#topBar .gear-btn { width: 34px; height: 34px; border-radius: 9px; }
#topBar .top-bar-find { margin-left: auto; }
#topBar .top-bar-gear { margin-left: 0; }

/* One level surface and one set surface, rather than a card wrapped around
   another card. Spacing now supplies most of the hierarchy. */
#step2,
#step4 {
  padding: 12px 2px 4px;
  border: 0;
  background: transparent;
}
#step2 > .step-header,
#step4 > .step-header { padding: 0 4px; }
#step2 .level-choosing {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .10);
  overflow: hidden;
}
#step2 .level-selector {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#step4 .study-set-panel {
  border-color: var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
@media (max-width: 767px) {
  .container:has(#setupPanel:not(.hidden)) {
    padding: 6px 4px;
  }
  #setupPanel.file-upload {
    padding: 4px 0 8px;
  }
  #step2,
  #step4 {
    padding: 8px 0 2px;
  }
  #step2 > .step-header,
  #step4 > .step-header { padding: 0; }
  #step4 .study-set-panel {
    padding: 10px 8px;
  }
  .study-set-dots {
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 4px;
  }
}
.study-set-dot.is-current {
  animation: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), .42);
}

/* Fast track has exactly two actions here: toggle the shortcut, or understand
   and adjust its two constituent choices. */
.setup-options {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-tertiary) 66%, transparent);
}
.fast-mode-summary {
  font-family: var(--font-reading);
  font-size: 11px;
  font-weight: 400;
  opacity: 1;
}
.fast-mode-detail-btn,
.extras-btn {
  border-radius: 10px;
}

/* Reserve loud type for actual headings. Eyebrows stay useful but no longer
   resemble technical dashboard labels. */
.progress-modal-eyebrow,
.deck-complete-eyebrow,
.artist-source-eyebrow {
  letter-spacing: .06em;
  opacity: .8;
}

@media (max-width: 560px) {
  .container { padding: 8px 6px; }
  .container:has(#setupPanel:not(.hidden)) { padding: 6px 4px; }
  #topBar { margin-bottom: 10px; }
  .learning-context-chip { border-color: transparent; background: transparent; padding-left: 4px; max-width: 140px; }
  .setup-options-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .fast-mode-master { padding: 7px 9px; min-height: 48px; gap: 8px; }
  .fast-mode-master-copy strong { font-size: 13px; }
  .fast-mode-detail-btn { padding: 6px 11px; min-height: 48px; font-size: 12px; }
}

@media (max-width: 400px) {
  .learning-context-chip { max-width: 110px; }
  .learning-context-chip-icon { display: none; }
  .streamline-rec-badge { font-size: 11px; padding: 1px 4px; }
  .fast-mode-master { padding: 6px 8px; }
  .fast-mode-title-row { gap: 4px; }
  .fast-mode-detail-btn { padding: 6px 8px; font-size: 11px; }
}

/* ── Unified learner modal system ──────────────────────────────────────── */
.product-modal,
.setup-info-modal {
  background: rgba(3, 7, 12, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:is(#learningContextModal, #findWordModal, #statsModal, #totalStatsModal,
    #extrasModal, #cognateRulesModal, #estimationModal, #lyricBreakdownModal,
    #songSetModal, #vocabularyImportModal, #extraScopeModal, #helpModal) {
  background: rgba(3, 7, 12, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:is(#learningContextModal, #findWordModal, #statsModal, #totalStatsModal,
    #extrasModal, #cognateRulesModal, #estimationModal, #lyricBreakdownModal,
    #songSetModal, #vocabularyImportModal, #extraScopeModal, #helpModal) .modal-content {
  border-color: color-mix(in srgb, var(--border-light) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-card) 96%, #111827);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
:is(#findWordModal, #statsModal, #totalStatsModal, #extrasModal,
    #cognateRulesModal, #estimationModal, #lyricBreakdownModal,
    #songSetModal, #vocabularyImportModal) .modal-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.product-modal .modal-content,
.setup-info-modal .step-info-tooltip-inner {
  --accent-primary: #8795ff;
  --accent-primary-rgb: 135, 149, 255;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-card) 96%, #111827);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.product-modal-header,
.info-sheet-header,
.settings-title-block {
  min-width: 0;
}
.product-modal-header,
.info-sheet-header,
.settings-modal-content > .settings-tabs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.product-modal-eyebrow,
.info-sheet-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-primary);
  font: 650 11px/1.2 var(--font-reading);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-modal-header h2,
.info-sheet-header h3,
.settings-title-block h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-emphasis);
  letter-spacing: -.025em;
}
.product-modal-header h2,
.settings-title-block h2 { font-size: 24px; }
.info-sheet-header h3 { font-size: 20px; }
.product-modal .modal-close,
.info-sheet-close {
  position: static;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font: 500 14px/1 var(--font-reading);
  cursor: pointer;
}
.product-modal .modal-close:hover,
.info-sheet-close:hover { color: var(--text-primary); border-color: var(--border-light); }

/* Setup explainers: concise, punchy, cleanly centered on screen */
.setup-info-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(3, 7, 12, 0.76) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  z-index: 10000 !important;
}
.setup-info-modal.visible {
  display: flex !important;
}
.setup-info-modal .step-info-tooltip-inner {
  margin: auto !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  max-height: min(90vh, 580px);
  overflow-y: auto;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--border-light) 65%, transparent) !important;
  background: color-mix(in srgb, var(--bg-card) 96%, #111827) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52), 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  padding: 22px 22px !important;
  font-size: 14px;
  line-height: 1.5;
}
.info-sheet-lead {
  margin: 14px 0 14px !important;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.info-sheet-points {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-sheet-points > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border-color);
}
.info-point-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(var(--accent-primary-rgb, 135, 149, 255), 0.14);
  color: var(--accent-primary);
  font: 750 11px/1 var(--font-reading, monospace);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.info-point-badge.is-new {
  background: rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.16);
  color: var(--accent-secondary, #ffcc00);
}
.info-point-badge.is-practice {
  background: rgba(255, 107, 53, 0.16);
  color: #ff6b35;
}
.info-point-badge.is-done {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
}
.info-sheet-points p { margin: 0 !important; color: var(--text-secondary); font-size: 13.5px; line-height: 1.45; }
.info-sheet-points strong { color: var(--text-primary); margin-right: 3px; }

.level-estimate-modal-callout {
  margin-top: 16px;
  padding: 16px;
  background: rgba(var(--accent-primary-rgb), 0.08);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.28);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.level-estimate-modal-body strong {
  display: block;
  font-family: var(--font-emphasis);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.level-estimate-modal-body p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.level-estimate-modal-btn {
  align-self: flex-start;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--accent-primary-text);
  border: 1px solid var(--accent-primary);
  border-radius: 8px;
  font-family: var(--font-emphasis);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.level-estimate-modal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
}

/* Tutorial starts with three compact principles, then asks for language. */
.tutorial-intro-sheet {
  width: min(92vw, 540px);
  max-width: 540px;
  padding: 26px;
}
.tutorial-intro-close-row { display: flex; justify-content: flex-end; min-height: 34px; }
.tutorial-intro-step { margin-top: 12px; }
.product-primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-primary);
  color: #10141b;
  font: 750 14px/1.2 var(--font-reading);
  cursor: pointer;
}
.tutorial-principles {
  display: grid;
  gap: 11px;
  margin: 0 0 18px;
}
.tutorial-principles p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.48; }
.tutorial-principles strong { color: var(--text-secondary); }
.product-back-action {
  margin: -4px 0 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 12px/1.3 var(--font-reading);
  cursor: pointer;
}
.tutorial-intro-step > h3 { margin: 0 0 6px; color: var(--text-primary); font: 700 18px/1.3 var(--font-emphasis); }
.tutorial-intro-step > h3 + p { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.tutorial-language-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tutorial-language-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.tutorial-language-choice:hover,
.tutorial-language-choice.is-current { border-color: color-mix(in srgb, var(--accent-primary) 70%, var(--border-color)); background: rgba(var(--accent-primary-rgb), .09); }
.tutorial-language-flag { font-size: 21px; }
.tutorial-language-choice strong,
.tutorial-language-choice small { display: block; }
.tutorial-language-choice strong { font: 700 13px/1.3 var(--font-reading); }
.tutorial-language-choice small { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.tutorial-language-arrow { color: var(--text-muted); }

/* Settings: clear title, stable sections, and plain-language rows. */
.settings-modal-content {
  width: min(94vw, 700px);
  max-width: 700px;
  max-height: min(calc(90dvh / var(--ui-zoom, 1)), 780px);
  padding: 0 24px 26px;
}
.settings-modal-content > .settings-tabs-header {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -24px;
  padding: 22px 24px 14px;
  border: 0;
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
}
.settings-title-block .settings-single-tab-title { padding: 0; }
.settings-modal-content > .settings-tabs {
  position: sticky;
  top: 70px;
  z-index: 3;
  display: flex;
  gap: 5px;
  margin: 0 -24px 20px;
  padding: 0 24px 13px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  scrollbar-width: none;
}
.settings-modal-content > .settings-tabs::-webkit-scrollbar { display: none; }
.settings-modal-content .settings-tab {
  flex: 0 0 auto;
  min-height: 34px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.settings-modal-content .settings-tab[hidden] { display: none !important; }
.settings-modal-content .settings-tab:hover { background: var(--bg-tertiary); }
.settings-modal-content .settings-tab.active {
  border: 0;
  background: rgba(var(--accent-primary-rgb), .14);
  color: var(--accent-primary);
}
#settingsModal.settings-single-tab .settings-modal-content > .settings-tabs { display: none; }
.settings-section-intro {
  margin: 2px 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.settings-defaults-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.settings-defaults-heading { align-items: baseline; padding-bottom: 8px; }
.settings-defaults-heading strong { font-size: 16px; }
.settings-defaults-heading span { text-transform: none; letter-spacing: 0; font-size: 11px; }
.settings-defaults-warning {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  font-size: 11px;
}
.settings-group-heading {
  margin: 22px 0 5px;
  padding: 0 0 8px;
  border: 0;
}
.settings-defaults-warning + .settings-group-heading { margin-top: 0; }
.settings-group-heading strong { font-size: 13px; letter-spacing: 0; text-transform: none; }
.settings-group-heading span { font-size: 11px; }
.settings-default-row {
  min-height: 54px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-reading);
}
.settings-group-heading + .settings-default-row { border-top: 1px solid var(--border-color); }
.settings-row-label { font-size: 13px; font-weight: 650; }
.settings-toggle .group-size-btn { font-family: var(--font-reading); font-weight: 650; }
.settings-info-btn { width: 20px; height: 20px; font-size: 11px; }
.settings-row-explanation { max-width: 360px; font-size: 11px; }
.appearance-settings-card,
.offline-panel {
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

@media (max-width: 600px) {
  .product-modal { align-items: flex-end; padding: 0; }
  .product-modal .modal-content {
    width: 100%;
    max-width: none;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }
  .tutorial-intro-sheet { padding: 22px 20px max(24px, env(safe-area-inset-bottom)); }
  .tutorial-language-grid { grid-template-columns: 1fr; }
  .settings-modal-content {
    max-height: calc(94dvh / var(--ui-zoom, 1));
    padding: 0 18px max(24px, env(safe-area-inset-bottom));
  }
  .settings-modal-content > .settings-tabs-header {
    margin: 0 -18px;
    padding: 18px 18px 11px;
  }
  .settings-modal-content > .settings-tabs {
    top: 63px;
    margin: 0 -18px 18px;
    padding: 0 18px 11px;
  }
  .settings-default-row { align-items: center; flex-direction: row; gap: 12px; }
  .settings-default-row .settings-toggle { width: auto; }
  .settings-default-row .settings-toggle .group-size-btn { min-width: 52px; }
}

/* ── Fast track and settings hierarchy ─────────────────────────────────── */
.setup-options:has(.fast-mode-master) {
  border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-color));
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), .10), rgba(var(--accent-primary-rgb), .035));
}
.fast-mode-details {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
}
.fast-mode-details summary {
  color: var(--text-secondary);
  font-weight: 650;
  cursor: pointer;
}
.fast-mode-details p { margin: 9px 0 0; line-height: 1.5; }

#extrasModal .modal-content {
  max-width: 640px;
  width: min(94vw, 640px);
  max-height: min(calc(84vh / var(--ui-zoom, 1)), 620px);
  display: flex;
  flex-direction: column;
  padding: 16px 20px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

#extrasModal .modal-header {
  margin-bottom: 6px;
  padding-bottom: 8px;
  flex: none;
}

#extrasModal .extras-intro {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  flex: none;
}

#extrasModal .extras-search {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  outline: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: 12px/1.3 var(--font-reading);
  flex: none;
}

#extrasModal .extras-search:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), .12);
}

#extrasModal .extras-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0 4px 6px 0;
  overscroll-behavior: contain;
}

#extrasModal .extras-section + .extras-section {
  margin-top: 14px;
}

#extrasModal .extras-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

#extrasModal .extras-body h4 {
  margin: 0;
  font-size: 12px;
  font-family: var(--font-emphasis);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

#extrasModal .extras-blurb {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}

#extrasModal .extras-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}

#extrasModal .extras-open-card {
  padding: 3px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 600 11px/1.2 var(--font-reading);
  cursor: pointer;
  white-space: nowrap;
}

#extrasModal .extras-open-card:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Fast Track audit lists: the word itself opens its card. */

#extrasDeckCard .extras-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 2px;
}
.extras-word-stack,
.extras-base { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 3px; }
.extras-base { color: var(--text-secondary); }
.extras-row--lemma .extras-word-stack { align-items: flex-end; text-align: right; }
.extras-row--lemma .extras-translation { text-align: right; }
.extras-base strong { font: 650 12px/1.35 var(--font-reading); }
.extras-base small { color: var(--text-muted); font: 11px/1.35 var(--font-reading); }
/* The word the cognate score was actually computed against. The arrow is what
   makes the row a claim about a match rather than a translation, so it only
   appears when the deck ships the word. */
.extras-match {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  color: var(--text-muted);
  font: 500 11px/1.35 var(--font-reading);
}
.extras-match strong {
  color: var(--text-primary);
  font: 650 12px/1.35 var(--font-reading);
  overflow: hidden;
  text-overflow: ellipsis;
}

#extrasDeckCard .extras-open-card {
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  font: 650 12px/1.25 var(--font-reading);
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
}

#extrasDeckCard .extras-translation {
  grid-column: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 11px;
}

#extrasDeckCard .extras-row--cognate > .extras-translation { text-align: right; font-size: 12px; }

/* Skipped words: the surface and the word it resembles sit in two columns
   in the middle of the sheet, rather than pinned to opposite edges. */
/* The phone rule that parks .extras-open-card in column 2 must not apply
   inside this pair, or the equals sign lands on the left and the two words
   sit together on the right. */

.lemma-group-list { margin: 0; padding: 0; list-style: none; }
.lemma-group-row {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 34%) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-color);
}
.lemma-group-row:last-child { border-bottom: 0; }
.lemma-group-rank {
  color: var(--text-muted);
  font: 650 12px/1 var(--font-data, var(--font-reading));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lemma-group-lemma { min-width: 0; }
.lemma-group-lemma strong {
  display: block;
  color: var(--text-primary);
  font: 700 15px/1.3 var(--font-emphasis);
}
.lemma-group-lemma small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font: 500 12px/1.35 var(--font-reading);
}
.lemma-group-forms {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.lemma-group-forms.is-expanded { flex-wrap: wrap; overflow: visible; }
.lemma-group-chip,
.lemma-group-more {
  flex: none;
  padding: 4px 9px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 650 12px/1.2 var(--font-reading);
}
.lemma-group-more {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
  cursor: pointer;
}
.lemma-group-chip[hidden],
.lemma-group-more[hidden] { display: none; }

@media (max-width: 700px) {
  #fastModeModal {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  #fastModeModal > .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-width: 0 !important;
  }
  .lemma-group-row { grid-template-columns: 2.6em minmax(0, 38%) minmax(0, 1fr); gap: 8px; }
}

.settings-preference-cluster { margin-top: 22px; }
.settings-preference-cluster:first-of-type { margin-top: 4px; }
.settings-cluster-heading { margin: 0 0 8px 2px; }
.settings-cluster-heading strong {
  display: block;
  color: var(--text-secondary);
  font: 750 11px/1.3 var(--font-emphasis);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.settings-cluster-heading span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.settings-preference-cluster .settings-preference-group:not(:first-child) { margin-top: 10px; }
.settings-preference-group {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border-color);
}
.settings-preference-group--primary {
  margin-top: 4px;
  padding: 2px 12px 5px;
  border: 1px solid rgba(var(--accent-primary-rgb), .28);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 12px 12px 0;
  background: rgba(var(--accent-primary-rgb), .055);
}
.settings-preference-group .settings-group-heading { margin-top: 8px; }
.settings-feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.settings-feature-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--accent-primary-rgb), .14);
  color: var(--accent-primary);
  font: 750 13px/1 var(--font-emphasis);
}
.settings-feature-icon.is-connected { background: rgba(16, 185, 129, .16); color: #10B981; }
.settings-feature-card strong,
.settings-feature-card small { display: block; }
.settings-feature-card strong { color: var(--text-primary); font: 700 14px/1.3 var(--font-reading); }
.settings-feature-card p,
.settings-feature-card small { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.48; }
.settings-feature-action {
  min-height: 36px;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: var(--accent-primary);
  color: #10141b;
  font: 700 12px/1.2 var(--font-reading);
  cursor: pointer;
}
.settings-feature-action--danger { background: color-mix(in srgb, var(--error) 16%, var(--bg-tertiary)); color: var(--error); }
.settings-feature-note { grid-column: 2 / -1; }
.review-settings-card { grid-template-columns: auto minmax(0, 1fr); }
.review-settings-card .settings-default-row--standalone {
  grid-column: 1 / -1;
  margin-top: 3px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--border-color);
}
.settings-default-row--standalone .settings-row-label-block small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.42;
}
.settings-feature-card--button { width: 100%; text-align: left; cursor: pointer; }
.settings-feature-card--button:hover { border-color: rgba(var(--accent-primary-rgb), .45); }
.settings-feature-arrow { align-self: center; color: var(--text-muted); }

@media (max-width: 600px) {
  #settingsModal.product-modal { align-items: flex-start; }
  #settingsModal.product-modal .settings-modal-content {
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
  }
  .settings-feature-card { grid-template-columns: auto minmax(0, 1fr); }
  .settings-feature-action { grid-column: 1 / -1; width: 100%; }
  .settings-feature-note { grid-column: 1 / -1; }
  .extras-row { grid-template-columns: minmax(0, 1fr) auto; }
  .extras-translation { grid-column: 1; }
  .extras-note { grid-column: 1; text-align: left; }
  .extras-open-card { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Mobile overlays all follow one spatial rule: content enters from and stays
   attached to the top edge. Desktop dialogs remain centred. */
@media (max-width: 600px) {
  .modal,
  .product-modal,
  .flag-menu {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .modal > .modal-content,
  .product-modal > .modal-content {
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
  }
  .choice-sheet-overlay {
    align-items: flex-start;
    padding: 0;
  }
  .choice-sheet-panel {
    width: 100%;
    max-height: min(calc(88dvh / var(--ui-zoom, 1)), 760px);
    padding: env(safe-area-inset-top) 0 0;
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
    transform: translateY(-28px);
  }
  .learning-context-sheet {
    inset: 0 8px auto;
    border-radius: 0 0 20px 20px;
  }
  .knowledge-overview-modal,
  .knowledge-overview-modal.syn-leave-modal {
    place-items: start center;
    padding: 0;
  }
  .knowledge-overview-modal .knowledge-overview-sheet {
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
  }
}

/* ── Numbered Fast track explanation + responsive Settings navigator ───── */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.fast-mode-controls .substep-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.fast-mode-mapping-status {
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--border-color));
  border-radius: 9px;
  background: color-mix(in srgb, var(--error) 7%, transparent);
  color: var(--text-secondary);
  font: 550 11px/1.4 var(--font-reading);
}
#fastModeModal .extras-btn {
  margin-top: 14px;
  min-height: 38px;
  padding: 8px 12px;
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

/* Compact learner settings; detail screens reuse the same modal without tabs. */
#settingsModal .settings-modal-content > .settings-tabs { display: none; }
#settingsModal .settings-modal-content { width: min(94vw, 590px); max-width: 590px; }
#settingsModal .settings-title-block { display: flex; align-items: center; gap: 12px; }
#settingsModal .settings-back {
  border: 0; background: transparent; color: var(--text-primary);
  font: 600 30px/1 var(--font-reading); cursor: pointer;
}
#settingsModal .settings-back[hidden] { display: none; }
/* The same ‹ on a panel opened from Settings (Saved words, Import). */
.modal-header > .settings-return-back {
  margin-right: 10px; padding: 0 4px; border: 0; background: transparent;
  color: var(--text-primary); font: 600 30px/1 var(--font-reading); cursor: pointer;
}
.modal-header > .settings-return-back[hidden] { display: none; }
.modal-header > .settings-return-back:not([hidden]) + * { margin-right: auto; }
#settingsModal .settings-defaults-heading { margin: 0; }
#settingsModal .settings-preference-group { margin: 0; padding: 0; border: 0; background: none; }
#settingsModal .settings-default-row { padding: 12px 0; }
#settingsModal .settings-compact-note { margin: 0 0 10px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
#settingsModal .settings-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--border-color);
  background: transparent; color: var(--text-primary); text-align: left; cursor: pointer;
}
#settingsModal .settings-link-row strong,
#settingsModal .settings-link-row small { display: block; }
#settingsModal .settings-link-row strong { font-size: 13px; }
#settingsModal .settings-link-row small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
#settingsModal .settings-link-row > span:last-child { color: var(--text-muted); font-size: 22px; }
#settingsModal .settings-overview-section { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border-color); }
#settingsModal .settings-more-options { border-top: 1px solid var(--border-color); }
#settingsModal .settings-more-options summary { padding: 13px 0; color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 650; }
#settingsModal .settings-data-actions,
.progress-data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 8px 0 12px; }
#settingsModal .settings-data-actions button,
.progress-data-actions button { min-height: 43px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-tertiary); color: var(--text-primary); font: 650 12px/1.3 var(--font-reading); cursor: pointer; }
#settingsModal .settings-data-actions button:first-child { border-color: var(--accent-primary); }
#settingsModal .settings-data-actions button:disabled,
.progress-data-actions button:disabled { opacity: .5; cursor: not-allowed; }
#settingsModal .settings-overview-footer .appearance-settings-card { margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--border-color); background: none; }
#settingsModal .settings-overview-footer .appearance-settings-copy strong { font-size: 13px; }
#settingsModal .settings-footer-link { display: inline-block; margin: 8px 16px 0 0; padding: 4px 0; border: 0; background: none; color: var(--text-muted); font-size: 11px; cursor: pointer; }
#settingsModal .settings-footer-link[hidden] { display: none; }
.progress-data-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.fast-mode-language-status { color: var(--text-muted); font-size: 12px; }
.fast-mode-language-switch,
.fast-mode-fine-tune,
.fast-mode-skipped-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-tertiary); color: var(--text-primary); cursor: pointer; font: 650 13px/1.3 var(--font-reading); }
.fast-mode-language-switch strong { color: var(--accent-primary); }
.fast-mode-fine-tune,
.fast-mode-skipped-link { margin-top: 10px; background: transparent; }
#fastModeFineTune { margin-top: 16px; }
#fastModeFineTune[hidden], #fastModeSkippedLink[hidden] { display: none !important; }
@media (max-width: 600px) {
  #settingsModal .settings-data-actions,
  .progress-data-actions { grid-template-columns: 1fr; }
}

.settings-header-actions { display: flex; align-items: center; gap: 9px; }
.settings-search { display: block; }
.settings-search input {
  box-sizing: border-box;
  width: 190px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: 0;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: 12px/1.3 var(--font-reading);
}
.settings-search input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), .12); }
.settings-search-hidden { display: none !important; }
.settings-nav-label {
  display: block;
  margin: 13px 9px 4px;
  color: var(--text-muted);
  font: 700 11px/1.2 var(--font-reading);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.settings-nav-label:first-child { margin-top: 2px; }
.settings-nav-label[hidden] { display: none; }

@media (min-width: 701px) {
  #settingsModal .settings-modal-content {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: min(94vw, 820px);
    max-width: 820px;
    height: min(calc(86dvh / var(--ui-zoom, 1)), 720px);
    max-height: 720px;
    padding: 0;
    overflow: hidden;
  }
  #settingsModal .settings-modal-content > .settings-tabs-header {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    padding: 19px 21px 15px;
    border-bottom: 1px solid var(--border-color);
  }
  #settingsModal .settings-modal-content > .settings-tabs {
    position: static;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 14px 10px 20px;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-tertiary) 44%, transparent);
  }
  #settingsModal .settings-modal-content .settings-tab {
    flex: none;
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    text-align: left;
  }
  #settingsModal .settings-tab-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    padding: 20px 24px 28px;
    overflow-y: auto;
  }
  #settingsModal.settings-single-tab .settings-modal-content { grid-template-columns: 1fr; }
  #settingsModal.settings-single-tab .settings-tab-content { grid-column: 1; }
}

@media (max-width: 700px) {
  .settings-header-actions { flex: 1; justify-content: flex-end; }
  .settings-search { flex: 1; max-width: 180px; }
  .settings-search input { width: 100%; }
  #settingsModal .settings-nav-label { display: none; }
  #settingsModal .settings-modal-content > .settings-tabs { scrollbar-width: thin; }
}

/* Extras Deck Section (bottom of setup) */
.extras-deck-section {
  margin-top: 14px;
  margin-bottom: 20px;
}
.extras-deck-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 10px 14px;
  display: grid;
  gap: 8px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.extras-deck-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
}
.extras-deck-groups { display: grid; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.extras-deck-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--text-primary); font: 700 13px/1.3 var(--font-emphasis); }
.extras-deck-hint { margin: 0 0 8px; color: var(--text-secondary); font: 500 12px/1.4 var(--font-reading); }
.extras-set-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.extras-set-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}
.extras-set-pill:hover,
.extras-set-pill:focus-visible {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.extras-set-pill-num {
  font: 700 13px/1 var(--font-emphasis);
}
.extras-set-pill small {
  color: var(--text-muted);
  font: 600 11px/1 var(--font-data);
}
.extras-deck-batch { border: 1px solid var(--border-color); border-radius: 9px; margin-top: 6px; padding: 0 10px; }
.extras-deck-batch summary { cursor: pointer; padding: 8px 0; color: var(--text-secondary); font: 600 12px/1.3 var(--font-reading); }
.extras-deck-batch .extras-list { border-top: 1px solid var(--border-color); }
.extras-row[hidden] { display: none !important; }
.extras-deck-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.extras-deck-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.extras-deck-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font: 700 11px/1 var(--font-emphasis);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.extras-deck-badge.is-unlocked {
  background: color-mix(in srgb, var(--accent-green) 18%, var(--bg-card));
  color: var(--accent-green);
  border: 1px solid color-mix(in srgb, var(--accent-green) 40%, transparent);
}
.extras-deck-badge.is-locked {
  background: color-mix(in srgb, var(--text-muted) 15%, var(--bg-card));
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.extras-deck-badge.is-info {
  background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card));
  color: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
.extras-deck-badge.is-muted {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}
.extras-deck-info {
  min-width: 0;
}
.extras-deck-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.extras-deck-info p {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.extras-deck-toggle-btn,
.extras-deck-browse-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: 600 12px var(--font-emphasis);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.extras-deck-toggle-btn:hover,
.extras-deck-browse-btn:hover {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
}
.extras-deck-toggle-btn.is-active {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}
.extras-deck-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  overflow: hidden;
  margin-top: 4px;
}
.extras-deck-progress-fill {
  height: 100%;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}

@media (max-width: 520px) {
  .extras-deck-content {
    flex-wrap: wrap;
    gap: 10px;
  }
  .extras-deck-info strong,
  .extras-deck-info p {
    white-space: normal;
  }
  .extras-deck-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

/* 100% Set Accuracy Celebration & Confetti */
.deck-complete-header {
  position: relative;
}

.deck-complete-confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.deck-complete-score-container.is-perfect .deck-score-ring-fill {
  stroke: #fbbf24;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.7));
}

.deck-complete-score-container.is-perfect .deck-score-number {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  animation: perfect-score-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes perfect-score-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Full reference and compact guide share rows and flat key badges. */
.keyboard-shortcuts-content {
  width: 100%;
  max-width: 480px;
  padding: 0;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  font-family: var(--font-reading);
}
.keyboard-shortcuts-content .modal-header {
  padding: 16px 22px;
  margin-bottom: 0;
}
.keyboard-shortcuts-content .modal-header h3 { font-size: 18px; font-weight: 600; }
.keyboard-shortcuts-content .modal-close { font-size: 22px; border-radius: 8px; }
.keyboard-shortcuts-body {
  padding: 16px 22px 24px;
  max-height: calc(70dvh / var(--ui-zoom, 1));
  overflow-y: auto;
}
.shortcut-intro { margin: 0 0 22px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
#keyboardShortcutGroups { display: flex; flex-direction: column; gap: 24px; }
.shortcut-group { display: flex; flex-direction: column; }
.shortcut-group-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shortcut-desc { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.shortcut-note { font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.shortcut-row.is-unavailable .shortcut-desc { color: var(--text-muted); }
.shortcut-row.is-unavailable .shortcut-kbd { color: var(--text-muted); background: transparent; }
.shortcut-kbd-group { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; flex-shrink: 0; max-width: 48%; }
.shortcut-key-combination { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.shortcut-or, .shortcut-plus { font-size: 11px; color: var(--text-muted); }
.shortcut-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 26px;
  padding: 0 7px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: none;
}
#closeKeyboardShortcutsModal:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }

/* Find-a-Word Filter Chips & Meaning Prominence Group */
.find-word-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.find-word-filter-btn {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-emphasis);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.find-word-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.find-word-filter-btn.is-active {
  background: var(--accent-primary);
  color: var(--accent-primary-text, #ffffff);
  border-color: var(--accent-primary);
}

.find-word-result .fw-meaning-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Ambient Artist Atmospheric Glow in Lyrics Mode */
body.artist-mode #flashcardMode {
  position: relative;
}

body.artist-mode #flashcardMode::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, 94vw);
  height: min(680px, calc(86vh / var(--ui-zoom, 1)));
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--artist-ambient-glow, var(--accent-primary)) 16%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
  filter: blur(28px);
  opacity: 0.85;
}

.card-front .card-pos-list.is-lemma-map {
  top: 22px;
  left: 50%;
  right: auto;
  bottom: auto;
  width: auto;
  min-height: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  grid-template-columns: none;
  max-width: calc(100% - 48px);
}
@media (max-width: 767px) {
  .card-front .card-pos-list.is-lemma-map {
    top: 76px;
    padding: 0 12px;
    max-width: 100%;
  }
}
/* Front: muted capsule around the coloured POS pill (the iconographic
   object) plus the lemma it governs. Back: the large surface stays a
   plain headword; its lemma is a small quiet chip, not a second title. */
.front-lemma-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-tertiary) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  color: var(--text-secondary);
  font: 600 13px/1.2 var(--font-reading);
  max-width: 100%;
  box-sizing: border-box;
}
.front-lemma-pair.is-pos-only {
  padding: 4px 5px;
  gap: 0;
  justify-content: center;
}
.front-lemma-pair .front-lemma-name {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 650;
}
.front-lemma-pair .front-pos-unit {
  display: inline-flex;
}
.card-pos-list .front-lemma-pair .card-pos,
.card-pos-list.pos-count-1 .front-lemma-pair .card-pos {
  width: auto;
  min-width: 0;
  margin: 0;
}
.back-headword.back-surface-pair {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  vertical-align: middle;
  /* Half the surface's x-height, resolved in the surface's own font and
     size (registered below), so the lemma can centre on it. */
  --back-surface-half-ex: 0.5ex;
}
.back-headword.back-surface-pair .back-surface-name {
  display: block;
  color: inherit;
  font-weight: inherit;
  min-width: 0;
  overflow: visible;
  line-height: 1cap;
  height: 1cap;
  text-box: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
/* Plain coloured text, no capsule. Sharing the surface's baseline and then
   lifting by the difference of the two half x-heights puts the lemma's
   lowercase middle on the surface's lowercase middle, whatever size
   fitBackHeadword chose. Browsers without @property fall back to a plain
   shared baseline. */
.back-lemma-chip {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  position: relative;
  top: calc(0.5ex - var(--back-surface-half-ex, 0.5ex));
  padding: 0;
  color: rgb(var(--card-pos-rgb, var(--accent-primary-rgb)));
  background: none;
  border: 0;
  font: 650 16px/1 var(--font-reading);
  font-style: normal;
  text-shadow: none;
}
@property --back-surface-half-ex {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
.back-lemma-se {
  margin-left: 5px;
  padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.front-meaning-pos {
  font-size: 11px;
}
#knownLanguagesModal {
  z-index: 1200;
}
.known-languages-sheet {
  max-width: 480px;
}
.known-languages-modal-header {
  margin-bottom: 12px;
}
.known-languages-modal-header h2 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font: 700 22px/1.25 var(--font-emphasis);
}
.known-languages-modal-intro {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font: 400 15px/1.5 var(--font-reading);
}
.known-languages-modal-selection {
  margin-bottom: 14px;
}
.known-languages-modal-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font: 700 12px/1.3 var(--font-emphasis);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.known-languages-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.known-language-choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: 600 14px/1.3 var(--font-reading);
  cursor: pointer;
  transition: all 0.18s ease;
}
.known-language-choice-btn:hover {
  border-color: var(--accent-primary);
  background: var(--bg-card-hover);
}
.known-language-choice-btn.selected {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.14);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.known-language-choice-flag {
  font-size: 20px;
  line-height: 1;
}
.known-language-choice-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.18s ease;
  margin-left: 2px;
}
.known-language-choice-btn.selected .known-language-choice-check {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #10141b;
}
.known-languages-modal-footnote {
  margin: 0 0 18px;
  color: var(--text-muted);
  font: 400 12px/1.45 var(--font-reading);
}
.known-languages-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#frequencyIntroModal {
  z-index: 1200;
}
.frequency-intro-sheet {
  max-width: 420px;
}
#frequencyIntroModal .frequency-intro-skip {
  background: var(--lang-trim, #8795ff);
  color: var(--accent-primary-text, #10141b);
}
.frequency-intro-sheet p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font: 400 16px/1.5 var(--font-reading);
}
.frequency-intro-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.frequency-intro-skip {
  width: 100%;
}
.frequency-intro-tutorial {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font: 650 14px/1.2 var(--font-reading);
  cursor: pointer;
}
.frequency-intro-tutorial:hover,
.frequency-intro-tutorial:focus-visible {
  border-color: var(--text-secondary);
  outline: none;
}
html[data-text-size="large"] {
  --card-fs: clamp(18px, 2.6vh, 26px);
}
/* "Bigger" text zooms the page. Zoom also scales viewport units, so a
   100vh card would come out 115% of the window and lose its bottom edge.
   Every vh/dvh length in this file is divided by --ui-zoom to undo that. */
html[data-text-size="large"] {
  --ui-zoom: 1.15;
}
html[data-text-size="large"] body {
  zoom: var(--ui-zoom);
}
/* Word by word: the sentence the card is showing, then one row per distinct
   word or fixed expression: its part-of-speech pill (the card front's pill),
   the word, and the translation on one line, shrinking and then cut short.
   The word is the button: a quick look at its card in a popup, or, for a word
   with no card, an offer to save it for export. */
#lyricBreakdownModal > .modal-content {
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  padding: 20px;
}
#lyricBreakdownModal .lyric-breakdown-body { padding: 0 0 4px; }
@media (max-width: 767px) {
  #lyricBreakdownModal > .modal-content {
    width: calc(100% - 16px);
    max-width: none;
    padding: 16px 12px;
  }
  #lyricBreakdownModal .modal-header { padding-inline: 4px; }
}
.wbw-sentence {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-tertiary);
}
.wbw-target {
  margin: 0;
  font: 600 17px/1.45 var(--font-reading);
  color: var(--text-primary);
}
.wbw-english {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}
/* Three columns shared by every row (subgrid), so pills, words and
   translations line up down the list. */
.wbw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* The word never breaks inside itself; an expression may wrap at a space. */
  grid-template-columns: max-content minmax(min-content, max-content) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
}
.wbw-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px 4px 9px;
  border-radius: 12px;
  border-left: 3px solid transparent;
}
.wbw-row.is-card-word {
  border-left-color: var(--text-secondary);
  background: var(--bg-tertiary);
}
.wbw-pos-cell { display: flex; }
.wbw-row .wbw-pos.card-pos {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font: 650 11.5px/1 var(--font-reading);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.wbw-word {
  justify-self: start;
  max-width: 100%;
  margin: 0;
  padding: 6px 8px;
  margin-left: -8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 650 17px/1.25 var(--font-reading);
  color: var(--text-primary);
  text-align: left;
}
button.wbw-word {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-primary) 28%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
button.wbw-word:hover {
  background: var(--bg-tertiary);
  text-decoration-color: currentColor;
}
button.wbw-word:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.wbw-row.is-unmatched button.wbw-word { color: var(--text-secondary); }
.wbw-known {
  margin-left: 5px;
  font-size: 12px;
  color: var(--accent-green);
}
.wbw-gloss {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.wbw-none { color: var(--text-muted); }
/* The popup over the panel borrows the Smart Skip preview's styles. */
.word-by-word-popup { z-index: 1040; }
.word-by-word-meanings {
  margin: 2px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 2px;
  color: var(--text-secondary);
  font: 400 15px/1.35 var(--font-reading);
}
.word-by-word-popup-text {
  margin: 0;
  color: var(--text-secondary);
  font: 400 15px/1.45 var(--font-reading);
}
.word-by-word-popup-text strong { color: var(--text-primary); }
.saved-words-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.saved-words-empty {
  color: var(--text-secondary);
}

/* Larger, clearer controls on the setup page. */
#topBar { padding: 10px 12px; }
#topBar .top-bar-header { min-height: 48px; gap: 10px; }
#topBar .top-bar-user-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 24ch;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  font: 700 18px/1.2 var(--font-emphasis);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#topBar .top-bar-user-name:hover,
#topBar .top-bar-user-name:focus-visible { background: var(--bg-tertiary); outline: none; }
#topBar .learning-context-chip { min-height: 46px; padding: 7px 12px; gap: 9px; }
#topBar .learning-context-flag { font-size: 23px; }
#topBar .learning-context-chip-copy strong { font-size: 15px; }
/* Every control in this bar is a primary target on the page a learner sees
   most; 44px was the accessibility floor, not a size chosen for legibility. */
#topBar .top-bar-icon-btn,
#topBar .gear-btn { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 12px; }
#topBar .top-bar-icon-btn svg,
#topBar .gear-btn svg { width: 27px; height: 27px; }
#topBar .sync-status { min-height: 38px; padding: 0 12px; font-size: 13px; }

@media (max-width: 560px) {
  #topBar .sync-status { min-height: 36px; padding: 0 9px; font-size: 12px; }
  #topBar .top-bar-icon-btn,
  #topBar .gear-btn { width: 46px; height: 46px; flex: 0 0 46px; }
  #topBar .top-bar-icon-btn svg,
  #topBar .gear-btn svg { width: 25px; height: 25px; }
}
#topBar .top-bar-gear { margin-left: auto; }

#setupPanel .level-btn { min-height: 46px; padding: 11px 16px; }
#setupPanel .standard-source-choice-btn { min-height: 60px; }
#setupPanel .standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-btn { min-height: 48px; }
#setupPanel .artist-source-picker { min-height: 46px; }
#setupPanel .step-help-btn { width: 42px; height: 42px; }
#setupPanel .extras-set-pill { min-width: 48px; min-height: 44px; }
#setupPanel .extras-deck-toggle-btn,
#setupPanel .extras-deck-browse-btn { min-height: 44px; padding: 8px 14px; }

#step4 .study-set-panel { gap: 0; padding: 0; overflow: hidden; }
.study-set-level-context { padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
.study-set-level-context .study-set-overview { margin: 4px 0 8px; }
.study-set-level-context .study-set-legend { justify-content: flex-start; }
.study-set-group-label { color: var(--text-muted); font: 700 11px/1.2 var(--font-emphasis); letter-spacing: .04em; text-transform: uppercase; }
.study-set-choice { display: grid; gap: 12px; padding: 16px; background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card)); }
.study-set-choice-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.study-set-choice-heading small { color: var(--text-muted); font: 500 11px/1.35 var(--font-reading); }
/* Four sets fill two rows; larger levels continue in the same two columns. */
#step4 .study-set-dots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; }
#step4 .study-set-dot { height: 40px; font-size: 13px; border-radius: 9px; }
#step4 .range-btn-new.study-set-start { min-height: 52px; }

.review-deck-section {
  margin: 14px 0 16px;
  padding: 15px 16px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--bg-card);
}
.review-deck-section[hidden] { display: none !important; }
.review-deck-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 14px; }
.review-deck-section .study-set-review { width: auto; flex: none; min-height: 48px; padding: 10px 17px; font-size: 13px; justify-content: center; }
.review-deck-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease;
}
.review-deck-summary:hover { color: var(--accent-primary); transform: translateX(2px); }
.review-deck-summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: 6px; }
.review-deck-summary-copy { min-width: 0; display: grid; gap: 4px; }
.review-deck-summary h3 { margin: 0 0 2px; color: var(--text-muted); font: 700 11px/1.2 var(--font-emphasis); letter-spacing: .08em; text-transform: uppercase; }
.review-deck-summary strong { color: var(--text-primary); font: 800 21px/1.2 var(--font-emphasis); }
.review-deck-summary small { color: var(--text-muted); font: 500 12px/1.4 var(--font-reading); }
.review-deck-summary-chevron { flex: none; color: var(--accent-primary); font-size: 30px; line-height: 1; }
.review-deck-section .study-set-review[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* Practice sheet: a roomy queue overview and a dedicated, browsable list. */
.review-home-content { width: min(760px, 94vw); max-width: 760px; max-height: calc(90vh / var(--ui-zoom, 1)); display: flex; flex-direction: column; }
.review-home-body { overflow-y: auto; padding: 4px 24px 24px; overscroll-behavior: contain; }
.review-home-section { margin-bottom: 20px; }
.review-home-section h4 {
  margin: 0 0 8px;
  color: var(--text-muted);
  font: 700 11px/1 var(--font-emphasis);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.review-home-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.review-home-row:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
  transform: translateY(-1px);
}
/* A zero category still renders: absence is stated, not hidden. */
.review-home-row[disabled] { opacity: 0.5; cursor: default; }
.review-home-row-copy { display: grid; gap: 3px; }
.review-home-row-copy strong { font: 700 14px/1.2 var(--font-emphasis); }
.review-home-row-copy small { color: var(--text-muted); font: 500 11px/1.35 var(--font-reading); }
.review-home-row-count {
  flex: none;
  min-width: 34px;
  text-align: right;
  color: var(--text-primary);
  font: 800 19px/1 var(--font-emphasis);
}
.review-home-row-tail { flex: none; display: flex; align-items: center; gap: 10px; }
.review-home-row-chevron { color: var(--accent-primary); font-size: 24px; line-height: 1; }
/* How reviews are timed, stated above the counts it governs, with the way to
   ask what that means sitting right beside it. */
.review-home-srs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 11px 13px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-primary) 7%, transparent);
}
.review-home-srs-copy { display: grid; gap: 3px; min-width: 0; }
.review-home-srs-copy strong { font: 700 13px/1.2 var(--font-emphasis); }
.review-home-srs-copy small { color: var(--text-muted); font: 500 11px/1.35 var(--font-reading); }
.review-home-srs-info {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
  border-radius: 50%;
  background: transparent;
  color: var(--accent-primary);
  font: 800 13px/1 var(--font-emphasis);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.review-home-srs-info:hover {
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  transform: scale(1.06);
}

.review-home-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.review-home-detail-head > span { color: var(--text-muted); font: 650 12px/1.2 var(--font-emphasis); }
.review-home-back {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  color: var(--accent-primary);
  font: 700 13px/1.2 var(--font-emphasis);
  cursor: pointer;
}
.review-home-detail-title { margin-bottom: 14px; }
.review-home-detail-title h4 { margin: 0 0 5px; color: var(--text-primary); font: 800 23px/1.2 var(--font-emphasis); }
.review-home-detail-title p { margin: 0; color: var(--text-muted); font: 500 13px/1.45 var(--font-reading); }
.review-home-word-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-color); }
.review-home-word-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-color);
}
.review-home-word-row strong { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font: 700 15px/1.3 var(--font-emphasis); }
.review-home-word-row span { color: var(--text-muted); text-align: right; font: 500 12px/1.4 var(--font-reading); }
.review-home-more { width: 100%; margin-top: 14px; }

/* The explainer itself: a rule, three steps, and why it is worth it. */
.srs-info-body { padding: 4px 20px 20px; }
.srs-info-lead { margin: 0 0 16px; color: var(--text-secondary); font: 500 13px/1.5 var(--font-reading); }
.srs-info-steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: srs-step; }
.srs-info-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px 11px;
  margin-bottom: 13px;
}
.srs-info-steps li::before {
  counter-increment: srs-step;
  content: counter(srs-step);
  grid-row: span 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
  color: var(--accent-primary);
  font: 800 12px/1 var(--font-emphasis);
}
.srs-info-steps strong { font: 700 13px/1.3 var(--font-emphasis); }
.srs-info-steps span { color: var(--text-muted); font: 500 12px/1.45 var(--font-reading); }
.srs-info-note {
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font: 500 12px/1.5 var(--font-reading);
}
.review-home-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-primary);
  font: 650 12px/1.2 var(--font-emphasis);
  cursor: pointer;
}
.review-home-link:hover { text-decoration: underline; }

/* Smart Skip is one row that opens its own page. The left part is the link
   (hover state, count, chevron); a divider separates it from the switch. */
#setupOptions.setup-options {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
}
.fast-track-hub-row { display: flex; align-items: stretch; }
.fast-track-hub-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}
.fast-track-hub-btn:hover { background: var(--bg-card-hover); }
.fast-track-hub-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.fast-track-hub-btn .fast-mode-master-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.fast-track-hub-btn { container-type: inline-size; }
.fast-track-hub-copy { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
/* The badge argues for turning Smart Skip on; once it is on, the count takes
   its place, so the two never compete for the row. */
.fast-track-hub-row.is-on .fast-track-hub-copy .streamline-rec-badge { display: none; }
.fast-track-hub-copy strong { font: 700 16px/1.2 var(--font-emphasis); white-space: nowrap; }
.fast-track-hub-copy .streamline-rec-badge { flex: none; font-size: 11px; padding: 3px 7px; }
.fast-track-hub-meta { flex: none; display: flex; align-items: center; gap: 6px; }
.fast-track-hub-meta small {
  color: var(--text-muted);
  font: 500 12.5px/1 var(--font-reading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fast-track-hub-meta small:empty { display: none; }
/* On a narrow row the count drops out before anything can wrap. */
@container (max-width: 250px) { .fast-track-hub-meta small { display: none; } }
.fast-track-hub-chevron { flex: none; color: var(--text-muted); font-size: 20px; line-height: 1; }
/* Until the page has been opened once the chevron carries a dot, so the eye
   lands on it. It retires permanently after that first visit. */
.fast-track-hub-row.is-unseen .fast-track-hub-chevron { position: relative; color: var(--accent-primary); }
.fast-track-hub-row.is-unseen .fast-track-hub-chevron::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
}
.fast-track-hub-switch-cell {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid var(--border-color);
}

/* One switch, used on the home row and for every shortcut: a flat pill with
   a round knob. `.selected` / aria-checked carry the state. */
.fast-track-hub-row .fast-mode-master-switch,
.smart-skip-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-light);
  cursor: pointer;
  transition: background 0.18s ease;
}
.fast-track-hub-row .fast-mode-master-switch i,
.smart-skip-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}
.fast-track-hub-row .fast-mode-master-switch.selected,
.smart-skip-switch[aria-checked="true"] { background: var(--accent-primary); }
.fast-track-hub-row .fast-mode-master-switch.selected i,
.smart-skip-switch[aria-checked="true"]::after { transform: translateX(18px); }
.fast-track-hub-row .fast-mode-master-switch:focus-visible,
.smart-skip-switch:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.smart-skip-switch { width: 36px; height: 21px; }
.smart-skip-switch::after { width: 15px; height: 15px; }
.smart-skip-switch[aria-checked="true"]::after { transform: translateX(15px); }

/* ---- Smart Skip page -------------------------------------------------------
   One column: the shortcuts, one line each, then the word list. Rows are one
   line tall whatever they hold; long text is cut, never wrapped. */
#fastModeModal .smart-skip-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
#fastModeModal .smart-skip-body h2 { margin: 0; padding-right: 40px; line-height: 32px; }
#fastModeModal .smart-skip-shortcuts {
  display: block;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}
/* The divider is a shadow above each shortcut: the container clips the first
   one's, whichever shortcut happens to be first. */
.smart-skip-shortcut { box-shadow: 0 -1px 0 var(--border-color); }
.smart-skip-shortcut[data-available="false"] { display: none !important; }
.smart-skip-shortcut-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 14px; }
.smart-skip-shortcut-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: 600 14px/1.2 var(--font-reading);
  text-align: left;
  cursor: pointer;
}
.smart-skip-shortcut-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smart-skip-shortcut-name svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 2; opacity: 0.7; }
.smart-skip-shortcut-count {
  flex: none;
  color: var(--text-muted);
  font: 500 12.5px/1 var(--font-reading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.smart-skip-shortcut-detail { padding: 0 14px 12px; display: grid; gap: 10px; }
.smart-skip-shortcut-detail[hidden],
.smart-skip-shortcut > .fast-mode-none[hidden] { display: none; }
/* The real Exclude/Include control stays in the DOM for ui.js; the switch
   stands in for it on screen. */
.smart-skip-shortcut > .group-size-selector { display: none !important; }
#fastModeModal .smart-skip-shortcut-detail .fast-mode-explainer { margin: 0; font-size: 13px; opacity: 1; }
.smart-skip-shortcut-detail em { color: var(--text-secondary); font-style: normal; font-weight: 600; }
.smart-skip-shortcut > .fast-mode-none { padding: 0 14px 12px; }

#fastModeModal .smart-skip-words { margin: 0; display: grid; gap: 8px; }
.smart-skip-label {
  margin: 0;
  color: var(--text-muted);
  font: 700 11px/1 var(--font-reading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.smart-skip-toolbar { display: flex; gap: 8px; align-items: center; }
.smart-skip-toolbar[hidden] { display: none; }
.smart-skip-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: 600 13px/1 var(--font-reading);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.smart-skip-lang-btn:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--bg-card) 90%, var(--text-primary) 10%));
}
.smart-skip-lang-btn[hidden] { display: none; }
.smart-skip-select-wrap { position: relative; flex: 0 1 auto; min-width: 0; }
.smart-skip-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  padding: 11px 34px 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: 600 14px/1.1 var(--font-reading);
  text-overflow: ellipsis;
  cursor: pointer;
}
.smart-skip-select-wrap svg {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  pointer-events: none;
}
.smart-skip-search {
  flex: 1 1 110px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: 400 14px/1.1 var(--font-reading);
}
.smart-skip-select-wrap select:focus-visible,
.smart-skip-search:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
#fastTrackDeckCard.extras-deck-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

.smart-skip-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: clip;
}
.smart-skip-list li { margin: 0; }
.smart-skip-group-rows { margin: 0; padding: 0; list-style: none; }
.smart-skip-group + .smart-skip-group > .smart-skip-level { border-top: 1px solid var(--border-color); }
.smart-skip-level {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 14px;
  background: color-mix(in srgb, var(--bg-card) 88%, var(--text-primary) 12%);
}
.smart-skip-level b { font: 700 13px/1 var(--font-emphasis); color: var(--text-primary); }
.smart-skip-level span { color: var(--text-muted); font: 500 12px/1 var(--font-reading); font-variant-numeric: tabular-nums; }
.smart-skip-study {
  margin-left: auto;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--accent-primary);
  font: 700 12.5px/1 var(--font-reading);
  white-space: nowrap;
  cursor: pointer;
}
.smart-skip-study:hover { background: color-mix(in srgb, var(--accent-primary) 14%, transparent); }
.smart-skip-row {
  width: 100%;
  height: 42px;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 0 14px;
  border: 0;
  border-top: 1px solid var(--border-color);
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.smart-skip-group-rows > li:first-child > .smart-skip-row { border-top: 0; }
.smart-skip-row:hover { background: var(--bg-card-hover); }
.smart-skip-row:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.smart-skip-row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smart-skip-w { font: 700 15px/1.2 var(--font-reading); }
.smart-skip-more { margin-left: 5px; color: var(--text-muted); font-size: 12px; font-weight: 500; opacity: 0.8; }
.smart-skip-g { color: var(--text-secondary); font: 400 14px/1.2 var(--font-reading); }
.smart-skip-g.is-gloss, .smart-skip-g .is-gloss { color: var(--text-muted); }
.smart-skip-g .cognate-pair-eq { margin-right: 6px; color: var(--text-muted); opacity: 0.8; }
.smart-skip-g .cognate-pair-eq[hidden] { display: none; }
.smart-skip-tag { color: var(--text-muted); font: 500 12px/1 var(--font-reading); opacity: 0.85; }
.smart-skip-row--lemma { grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr); }
.smart-skip-row--lemma .smart-skip-g { color: var(--text-muted); }
.smart-skip-forms { color: var(--text-muted); font: 400 13px/1.2 var(--font-reading); text-align: right; opacity: 0.85; }
.smart-skip-sentinel { height: 1px; }
.smart-skip-empty { margin: 0; padding: 20px 14px; color: var(--text-muted); font: 500 13.5px/1.45 var(--font-reading); }

/* The word preview: a small card over the list, a bottom sheet on phones. */
.smart-skip-preview {
  position: fixed;
  inset: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 7, 12, 0.55);
}
.smart-skip-preview[hidden] { display: none; }
.smart-skip-preview-card {
  width: min(400px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: smart-skip-preview-in 0.16s ease-out;
}
.smart-skip-preview-card:focus { outline: none; }
@keyframes smart-skip-preview-in { from { opacity: 0; transform: scale(0.97); } }
.smart-skip-preview-why {
  color: var(--text-muted);
  font: 700 11px/1 var(--font-reading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.smart-skip-preview-word { display: grid; gap: 4px; }
.smart-skip-preview-word b { font: 700 28px/1.1 var(--font-emphasis); overflow-wrap: anywhere; }
.smart-skip-preview-word span { color: var(--text-secondary); font: 400 16px/1.3 var(--font-reading); }
.smart-skip-preview-forms { margin: 0; color: var(--text-muted); font: 400 13px/1.4 var(--font-reading); }
.smart-skip-preview-example { display: grid; gap: 3px; padding: 2px 0 2px 12px; border-left: 2px solid var(--accent-primary); }
.smart-skip-preview-example[hidden] { display: none; }
.smart-skip-preview-example p { margin: 0; font: 400 14.5px/1.45 var(--font-reading); }
.smart-skip-preview-example p + p { color: var(--text-muted); font-size: 13px; }
.smart-skip-preview-example mark { background: none; color: var(--accent-primary); font-weight: 700; }
.smart-skip-preview-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.smart-skip-preview-close {
  padding: 13px 10px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: 600 14px/1 var(--font-reading);
  cursor: pointer;
}
.smart-skip-preview-open {
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-primary);
  color: var(--accent-primary-text, #fff);
  font: 700 14px/1 var(--font-reading);
  cursor: pointer;
}
.smart-skip-preview-card button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
@media (max-width: 600px) {
  .smart-skip-preview { align-items: flex-end; padding: 0; }
  .smart-skip-preview-card {
    width: 100%;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    animation-name: smart-skip-preview-up;
  }
}
@keyframes smart-skip-preview-up { from { transform: translateY(24px); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .smart-skip-preview-card { animation: none; }
  .fast-track-hub-row .fast-mode-master-switch, .smart-skip-switch,
  .fast-track-hub-row .fast-mode-master-switch i, .smart-skip-switch::after { transition: none; }
}

/* Sections inside the Fast Track sheet: the review home for skipped decks and
   the skipped-words lists, above the fine-tune controls. */
.fast-mode-section { margin: 18px 0; }
.fast-mode-section h4 {
  margin: 0 0 9px;
  color: var(--text-muted);
  font: 700 11px/1 var(--font-emphasis);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fast-mode-section h4 span { font-weight: 600; letter-spacing: 0.04em; }

.example-source-favicon,
.dictionary-provenance-badge .dict-provenance-icon { width: 34px; height: 34px; }
:root:not([data-theme="light"]) .example-source-favicon--wikipedia { filter: invert(1); }

.surface-wikipedia-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  position: relative;
  z-index: 10;
}
.surface-wikipedia-badge:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  transform: scale(1.1);
}
.surface-wikipedia-icon {
  width: 16px;
  height: 16px;
  filter: invert(1);
  display: block;
}
:root[data-theme="light"] .surface-wikipedia-badge {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
:root[data-theme="light"] .surface-wikipedia-badge:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}
:root[data-theme="light"] .surface-wikipedia-icon {
  filter: none;
}

@media (max-width: 560px) {
  #topBar { padding: 6px 8px; }
  #topBar .top-bar-header { gap: 4px; }
  #topBar .top-bar-user-name { max-width: 72px; padding: 0 3px; font-size: 14px; }
  /* One row needs horizontal room the stacked version did not. */
  #topBar .learning-context-chip { max-width: 168px; min-width: 0; padding: 7px 8px; column-gap: 6px; }
  #topBar .learning-context-flag { font-size: 22px; }
  #topBar .learning-context-chip-copy strong { font-size: 13px; }
  #step4 .study-set-choice { padding: 12px 10px; }
  #step4 .study-set-dots { gap: 6px; }
  .review-deck-content { grid-template-columns: minmax(0, 1fr); }
  .review-deck-section .study-set-review { width: 100%; justify-content: center; }
  .review-home-content { width: min(96vw, 760px); max-height: calc(94dvh / var(--ui-zoom, 1)); padding-inline: 18px; }
  .review-home-body { padding: 2px 0 18px; }
  .review-home-word-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .review-home-word-row span { text-align: left; }
  .fast-track-hub-btn { gap: 9px; }
  .fast-track-hub-copy strong { font-size: 14px; }
  #setupOptions .streamline-rec-badge { font-size: 11px; padding: 2px 5px; }
}

/* The language, mode, and music choices are one navigable flow. */
.choice-sheet-step {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-primary);
  font: 700 11px/1.2 var(--font-emphasis);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.choice-sheet-heading p { font-size: 13px; line-height: 1.45; }
.choice-sheet-list .choice-sheet-item {
  min-height: 70px;
  border-color: var(--border-color);
  background: var(--bg-card);
}
.choice-sheet-list .choice-sheet-copy strong { font-size: 15px; }
.choice-sheet-list .choice-sheet-copy small { font-size: 12px; line-height: 1.4; }
.choice-sheet-back, .choice-sheet-close { min-width: 44px; min-height: 44px; }
.choice-sheet-grid .choice-sheet-item { border-color: var(--border-color); background: var(--bg-card); }

/* Skipped cards keep their original level and card progress. */
.extras-deck-card:has(.extras-level-list) { padding: 16px; gap: 12px; }
.extras-deck-card:has(.extras-level-list) .extras-deck-status { align-items: flex-start; }
.extras-deck-card:has(.extras-level-list) .extras-deck-badge { display: none; }
.extras-deck-card:has(.extras-level-list) .extras-deck-info > strong { font-size: 16px; }
.extras-deck-card:has(.extras-level-list) .extras-deck-info > p { margin-top: 3px; }
.extras-level-list { display: grid; gap: 7px; }
.extras-level-group { border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); overflow: hidden; }
.extras-level-group summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 45px; padding: 9px 12px; cursor: pointer; list-style: none; }
.extras-level-group summary::-webkit-details-marker { display: none; }
.extras-level-group summary::after { content: '⌄'; color: var(--text-muted); font-size: 17px; transform: rotate(-90deg); }
.extras-level-group[open] summary::after { transform: none; }
.extras-level-group summary strong { color: var(--text-primary); font: 700 13px/1.3 var(--font-emphasis); }
.extras-level-group summary span { margin-left: auto; color: var(--text-muted); font: 500 11px/1.3 var(--font-reading); }
.extras-level-group .extras-set-pills { padding: 0 12px 12px; }
.extras-level-group .extras-set-pill { width: 54px; height: 48px; gap: 3px; }
.extras-level-group .extras-set-pill small { font-size: 11px; }
.extras-level-group .extras-set-pill.is-complete { border-color: color-mix(in srgb, #31ab70 60%, var(--border-color)); background: color-mix(in srgb, #31ab70 12%, var(--bg-card)); }
.extras-level-group .extras-set-pill.needs-review { border-color: color-mix(in srgb, #dc9a4c 65%, var(--border-color)); background: color-mix(in srgb, #dc9a4c 11%, var(--bg-card)); }

/* Keep the inflected word and its lemma together, even at phone widths. */
.back-headword.back-surface-pair { max-width: 100%; white-space: nowrap; }
.back-headword.back-surface-pair .back-surface-name { flex: 0 1 auto; white-space: nowrap; }
.back-headword.back-surface-pair .back-lemma-chip { font-size: clamp(12px, 3.5vw, 16px); white-space: nowrap; }

/* Prominence is conveyed by the number of filled bars; one readable ink
   colour avoids implying that each colour is a second frequency scale. */
.sense-prominence-badge.prominence-dominant,
.sense-prominence-badge.prominence-common,
.sense-prominence-badge.prominence-uncommon,
.sense-prominence-badge.prominence-rare { color: var(--text-primary); }

.knowledge-overview-footer[hidden] { display: none !important; }
.knowledge-overview-focus.is-static { cursor: default; }

/* Rare uses sheet: the rare-senses list scrolling inside the sheet instead
   of the card face. */
body.rare-uses-open { overflow: hidden; }
.rare-uses-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rare-uses-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font: 600 11px/1.4 var(--font-emphasis, inherit);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.rare-uses-subtitle {
  margin: 4px 0 0;
  color: var(--text-muted);
  font: 500 13px/1.35 var(--font-reading);
}
.rare-uses-modal .rare-uses-body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  padding: 0 20px 20px;
}
#rareUsesModal[data-dock] .rare-uses-body { padding: 0 16px 16px; }


/* Setup header: flag and language name sit side by side on one line — the
   two-line version stacked the flag above the word, which read as two
   unrelated controls. Account actions stay in one group on the opposite
   edge. */
#topBar .top-bar-header { justify-content: space-between; }
#topBar .learning-context-chip {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: 9px;
  row-gap: 0;
  min-width: 0;
  min-height: 52px;
  padding: 5px 12px;
  border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-color));
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-card));
}
#topBar .learning-context-flag { grid-column: 1; grid-row: 1; font-size: 24px; }
/* The chip names the language, so it is the one control that wears its
   colour rather than the panel's neutral accent. */
#topBar .learning-context-chip {
  border-color: color-mix(in srgb, var(--lang-trim, var(--accent-primary)) 50%, var(--border-color));
  background: color-mix(in srgb, var(--lang-trim, var(--accent-primary)) 11%, var(--bg-card));
}
#topBar .learning-context-chip-copy { grid-column: 2; grid-row: 1; }
#topBar .learning-context-chevron { display: none !important; }
.top-bar-right-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
#topBar .top-bar-gear { margin-left: 0; }

/* The section title and its information icon form one centred target. */
#step2 > .step-header,
#step4 > .step-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
#step2 > .step-header > .step-number,
#step4 > .step-header > .step-number { grid-column: 1; justify-self: start; }
#step2 > .step-header > .step-title-trigger,
#step4 > .step-header > .step-title-trigger { grid-column: 2; justify-self: center; }
#step2 > .step-header > .step-header-actions { grid-column: 3; justify-self: end; margin-left: 0; }
.step-title-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-emphasis);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
}
.step-title-trigger svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-title-trigger:hover,
.step-title-trigger:focus-visible { border-color: var(--border-color); background: var(--bg-tertiary); outline: none; }

/* Each POS/lemma count has a maximum footprint, not a fixed pill width.
   Short labels stay compact while long lemmas can use the available room. */
.card-front .card-pos-list.is-lemma-map {
  top: 27px;
  width: max-content;
  max-width: calc(100% - 60px);
  grid-template-columns: auto;
  grid-auto-rows: minmax(40px, auto);
  gap: 7px;
  justify-items: center;
  align-items: center;
}
.card-front .card-pos-list.is-lemma-map.pos-count-1 { max-width: min(290px, calc(100% - 60px)); }
.card-front .card-pos-list.is-lemma-map.pos-count-2 { max-width: min(500px, calc(100% - 60px)); grid-template-columns: repeat(2, auto); }
.card-front .card-pos-list.is-lemma-map.pos-count-3 { max-width: min(620px, calc(100% - 60px)); grid-template-columns: repeat(3, auto); }
.card-front .card-pos-list.is-lemma-map.pos-count-3 > :last-child { grid-column: auto; }
.card-front .card-pos-list.is-lemma-map.pos-count-4 { max-width: min(500px, calc(100% - 60px)); grid-template-columns: repeat(2, auto); }
.card-front .card-pos-list.is-lemma-map.pos-count-many { max-width: min(620px, calc(100% - 60px)); grid-template-columns: repeat(3, auto); max-height: 100px; overflow-y: auto; }
.card-pos-list.is-lemma-map .front-lemma-pair {
  width: max-content;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  padding: 5px 10px 5px 5px;
  font-size: 16px;
}
.card-pos-list.is-lemma-map .front-lemma-pair.is-pos-only {
  padding: 5px;
  gap: 0;
  justify-content: center;
}
.card-pos-list.is-lemma-map .front-lemma-name { display: block; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-pos-list.is-lemma-map.pos-count-3 .front-lemma-pair { font-size: 14px; }
.card-pos-list.is-lemma-map.pos-count-4 .front-lemma-pair,
.card-pos-list.is-lemma-map.pos-count-many .front-lemma-pair { font-size: 13px; }
.card-pos-list.is-lemma-map .card-pos { min-height: 30px; padding: 6px 10px; }
/* One or two lemma/POS pairs is the common case, and the bay has the room:
   size for that. Only three or more step back down to fit. */
.card-front .card-pos-list.is-lemma-map.pos-count-1,
.card-front .card-pos-list.is-lemma-map.pos-count-2 { grid-auto-rows: minmax(56px, auto); gap: 12px; }
.card-front .card-pos-list.is-lemma-map.pos-count-1 { max-width: min(420px, calc(100% - 60px)); }
.card-front .card-pos-list.is-lemma-map.pos-count-2 { max-width: min(620px, calc(100% - 60px)); }
.card-pos-list.is-lemma-map.pos-count-1 .front-lemma-pair,
.card-pos-list.is-lemma-map.pos-count-2 .front-lemma-pair {
  min-height: 56px;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  font-size: 23px;
}
.card-pos-list.is-lemma-map.pos-count-1 .front-lemma-pair.is-pos-only,
.card-pos-list.is-lemma-map.pos-count-2 .front-lemma-pair.is-pos-only {
  padding: 7px;
  gap: 0;
  justify-content: center;
}
.card-pos-list.is-lemma-map.pos-count-1 .card-pos,
.card-pos-list.is-lemma-map.pos-count-2 .card-pos {
  min-height: 42px;
  padding: 8px 15px;
  font-size: 18px;
}

@media (min-width: 768px) {
  .card-face.card-front { padding: 38px; }
  .card-face.card-back { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767px) {
  .card-front .card-pos-list.is-lemma-map { top: 76px; max-width: calc(100% - 24px); }
  .card-front .card-pos-list.is-lemma-map.pos-count-2,
  .card-front .card-pos-list.is-lemma-map.pos-count-3,
  .card-front .card-pos-list.is-lemma-map.pos-count-4,
  .card-front .card-pos-list.is-lemma-map.pos-count-many { max-width: calc(100% - 24px); grid-template-columns: repeat(2, auto); }
  .card-front .card-pos-list.is-lemma-map.pos-count-3 > :last-child { grid-column: 1 / -1; }
  .card-pos-list.is-lemma-map .front-lemma-pair { min-height: 36px; padding-right: 7px; }
  .card-pos-list.is-lemma-map .card-pos { padding: 5px 7px; font-size: 12px; }
  .card-pos-list.is-lemma-map.pos-count-1 .front-lemma-pair,
  .card-pos-list.is-lemma-map.pos-count-2 .front-lemma-pair { min-height: 46px; font-size: 18px; padding-right: 11px; }
  .card-pos-list.is-lemma-map.pos-count-1 .front-lemma-pair.is-pos-only,
  .card-pos-list.is-lemma-map.pos-count-2 .front-lemma-pair.is-pos-only { padding: 6px; gap: 0; justify-content: center; }
  .card-pos-list.is-lemma-map.pos-count-1 .card-pos,
  .card-pos-list.is-lemma-map.pos-count-2 .card-pos { min-height: 34px; padding: 6px 11px; font-size: 15px; }
  #topBar .learning-context-chip { min-width: 0; max-width: 180px; min-height: 48px; padding: 4px 8px; column-gap: 6px; }
  #topBar .learning-context-flag { font-size: 20px; }
  #topBar .learning-context-chip-copy strong { font-size: 12.5px; }
  .top-bar-right-controls { gap: 3px; }
  #topBar .top-bar-user-name { max-width: 72px; }
}

/* The settings overview and its detail pages use one column at every width. */
#settingsModal .settings-modal-content > .settings-tabs { display: none !important; }
@media (min-width: 701px) {
  #settingsModal .settings-modal-content {
    display: block;
    width: min(94vw, 590px);
    max-width: 590px;
    height: auto;
    max-height: min(calc(90dvh / var(--ui-zoom, 1)), 780px);
    padding: 0 24px 26px;
    overflow-y: auto;
  }
  #settingsModal .settings-modal-content > .settings-tabs-header {
    position: sticky;
    top: 0;
    margin: 0 -24px 16px;
    padding: 18px 24px 14px;
  }
  #settingsModal .settings-tab-content {
    display: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  #settingsModal .settings-tab-content.active { display: block; }
}

/* ---- Side-docked sheets ----------------------------------------------------
   side-dock.js decides the side and marks the element data-dock="left" or
   "right", plus data-dock-stack on a sheet opened over settings; these rules
   only draw the two positions. The rule it applies: anything that does not
   move you within your set opens at the side when there is room.
     left   you and the app: settings, with whatever is opened from it stacked
            on top; progress, saved words, shortcuts, help.
     right  this card: dictionary, synonyms, conjugation, card data, lyric
            breakdown, rarer-sense knowledge; also the setup
            page's word lists. When the right is taken and the left is free,
            the next one opens on the left.
   Width: side-dock.js sets --dock-w on <body>. In a study session a panel
   takes the margin beside the card, 16px from the screen edge and 16px clear
   of the card, up to 400px and shrinking to 300px in a narrower window;
   below that nothing docks. On the setup page it is a sheet over the page.
   The selectors list the ids inside :is() so they outrank each modal's own
   id-level sizing. Phones and narrow windows never get data-dock. */

.modal[data-dock]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal):not(.hidden) {
  align-items: center;
  padding: 16px var(--dock-inset, 16px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal[data-dock="left"]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal):not(.hidden) { justify-content: flex-start; }
.modal[data-dock="right"]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal):not(.hidden) { justify-content: flex-end; }
.modal[data-dock]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal) > .modal-content {
  box-sizing: border-box;
  width: var(--dock-w, 400px);
  max-width: none;
  max-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 32px);
  margin: 0;
  overflow-y: auto;
}
.modal[data-dock="left"]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal) > .modal-content { animation: dock-sheet-in-left 0.22s ease-out; }
.modal[data-dock="right"]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal) > .modal-content { animation: dock-sheet-in-right 0.22s ease-out; }
/* These three scroll an inner list rather than the sheet; give the list the
   full height instead of the centred sheet's 620px cap. */
.modal[data-dock]:is(#extrasModal) > .modal-content {
  height: calc(calc(100dvh / var(--ui-zoom, 1)) - 32px);
  overflow: hidden;
}
#lyricBreakdownModal[data-dock] .lyric-breakdown-body {
  max-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 150px);
  padding-inline: 0;
}
/* Fast Track is built as a full page: its close button is placed against the
   viewport and the page fills the screen. Stacked over settings it is a
   sheet, so the sheet becomes the close button's frame and sizes to its
   content. */
#fastModeModal[data-dock] > .fast-mode-page {
  position: relative;
  min-height: 0;
  border-radius: 22px;
}
/* A sheet opened over settings sits on top of it; closing it shows settings. */
.modal[data-dock-stack]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal) { z-index: 1010; }

/* Study session: the card stays usable beside a docked sheet, so the
   full-viewport backdrop is transparent and lets clicks through. Close with
   the sheet's own close button or Escape. */
body:has(#appContent:not(.hidden)) .modal[data-dock]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal):not(.hidden) {
  background: transparent;
  pointer-events: none;
}
body:has(#appContent:not(.hidden)) .modal[data-dock]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal) > .modal-content { pointer-events: auto; }
/* Setup page: a light dim, and a click outside still closes. A sheet stacked
   over settings does not dim settings a second time. */
body:has(#appContent.hidden) .modal[data-dock]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal):not(.hidden) { background: rgba(3, 7, 12, 0.32); }
body:has(#appContent.hidden) .modal[data-dock-stack]:is(#lyricBreakdownModal, #settingsModal, #savedWordsModal, #statsModal, #totalStatsModal, #reviewHomeModal, #spacedRepetitionInfoModal, #keyboardShortcutsModal, #helpModal, #extrasModal, #cognateRulesModal, #fastModeModal, #vocabularyImportModal):not(.hidden) { background: transparent; }

/* The rarer-sense knowledge sheet has its own structure. */
#knowledgeOverviewModal[data-dock]:not([hidden]),
#rareUsesModal[data-dock]:not([hidden]) {
  place-items: center end;
  padding: 16px var(--dock-inset, 16px);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
#knowledgeOverviewModal[data-dock="left"]:not([hidden]),
#rareUsesModal[data-dock="left"]:not([hidden]) { place-items: center start; }
#knowledgeOverviewModal[data-dock] .knowledge-overview-sheet,
#rareUsesModal[data-dock] .knowledge-overview-sheet {
  box-sizing: border-box;
  width: var(--dock-w, 400px);
  max-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 32px);
  pointer-events: auto;
}
#knowledgeOverviewModal[data-dock] .knowledge-overview-header,
#rareUsesModal[data-dock] .knowledge-overview-header { padding: 16px 16px 10px; }
#knowledgeOverviewModal[data-dock] .knowledge-overview-header h2,
#rareUsesModal[data-dock] .knowledge-overview-header h2 { font-size: 19px; }

/* Card panels (dictionary, synonyms, conjugation, card data), hosted on
   <body> with .is-docked while docked: vertically centred, 16px from the
   edge. The class, not a media query, is the switch, so a panel already
   docked when the window narrows stays a sensible sheet. */
body > .is-docked:is(.synonyms-panel, .provenance-panel, .conjugation-panel) {
  position: fixed;
  inset: auto;
  top: 50%;
  right: var(--dock-inset, 16px);
  width: var(--dock-w, min(400px, calc(100vw - 32px)));
  max-width: none;
  max-height: calc(calc(100dvh / var(--ui-zoom, 1)) - 32px);
  z-index: 1000;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}
body > .is-docked[data-dock="left"]:is(.synonyms-panel, .provenance-panel, .conjugation-panel) {
  right: auto;
  left: var(--dock-inset, 16px);
}
/* Synonyms and conjugation toggle .visible and slide in from their edge. */
body > .is-docked:is(.synonyms-panel, .conjugation-panel) {
  transform: translate(calc(100% + var(--dock-inset, 16px) + 16px), -50%);
}
body > .is-docked[data-dock="left"]:is(.synonyms-panel, .conjugation-panel) {
  transform: translate(calc(-100% - var(--dock-inset, 16px) - 16px), -50%);
}
body > .is-docked:is(.synonyms-panel, .conjugation-panel).visible {
  transform: translate(0, -50%);
}
body > .synonyms-panel.is-docked { height: min(560px, calc(calc(100dvh / var(--ui-zoom, 1)) - 32px)); }
/* Full screen, the paradigm grows its rows to fill the viewport; docked, it
   returns to the sizes it has on the card. */
body > .conjugation-panel.is-docked {
  height: auto;
  padding: 16px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body > .conjugation-panel.is-docked .conj-tables-wrap { flex: 0 0 auto; margin-top: 12px; }
body > .conjugation-panel.is-docked .conj-table { font-size: 17px; height: auto; max-height: none; }
body > .conjugation-panel.is-docked .conj-form { font-size: 19px; padding: 9px 14px 9px 6px; }
body > .conjugation-panel.is-docked .conj-pronoun { font-size: 14px; padding: 9px 16px 9px 14px; }
/* Dictionary and card data toggle display rather than a class, so they fade
   in instead of sliding. */
body > .provenance-panel.is-docked {
  height: auto;
  overflow-y: auto;
  transform: translateY(-50%);
  animation: dock-panel-in 0.22s ease-out;
}
body > .provenance-panel.is-docked[data-dock="left"] { animation-name: dock-panel-in-left; }

@keyframes dock-sheet-in-right {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes dock-sheet-in-left {
  from { transform: translateX(-28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes dock-panel-in {
  from { transform: translate(28px, -50%); opacity: 0; }
  to { transform: translate(0, -50%); opacity: 1; }
}
@keyframes dock-panel-in-left {
  from { transform: translate(-28px, -50%); opacity: 0; }
  to { transform: translate(0, -50%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[data-dock] > .modal-content,
  body > .provenance-panel.is-docked { animation: none; }
}

/* ===========================================================================
   Walkthrough — a two-screen look at a card for visitors (js/walkthrough.js)
   ===========================================================================
   Opened only from About. Unlike the tutorial it labels a whole face at once:
   callouts in the gutter beside the card with a leader line to the element,
   or, where there is no gutter, short tags pinned onto the card. The card is
   the shared .card-replica; only its width is set here. */

/* About and the walkthrough are for visitors, who usually arrive logged out —
   onto the landing card, #authModal at z-index 30001. At the generic modal
   z-index About opened *underneath* it, so ?about=1 sent to a recruiter showed
   only the login card. The walkthrough stacks on About, so it goes one higher. */
#aboutProjectModal {
    z-index: 30002;
}

#walkthroughModal {
    z-index: 30003;
}

.walkthrough-modal {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100vw;
    height: calc(100vh / var(--ui-zoom, 1));
    height: calc(100dvh / var(--ui-zoom, 1));
    max-height: none;
    border: none;
    border-radius: 0;
    background: var(--bg-primary);
    padding: 0;
    overflow: hidden;
}

.walkthrough-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 18px 24px 8px;
}

.walkthrough-dots {
    display: flex;
    gap: 7px;
    justify-self: start;
}

.walkthrough-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s ease, width 0.2s ease;
}

.walkthrough-dot.is-done {
    background: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
}

.walkthrough-dot.is-current {
    width: 22px;
    border-radius: 999px;
    background: var(--accent-primary);
}

.walkthrough-copy {
    max-width: 640px;
    text-align: center;
}

.walkthrough-title {
    margin: 0 0 4px;
    font: 700 24px/1.2 var(--font-emphasis);
    color: var(--text-primary);
}

.walkthrough-lead {
    margin: 0;
    font: 15px/1.45 var(--font-reading);
    color: var(--text-secondary);
}

.walkthrough-close {
    position: static;
    justify-self: end;
}

.walkthrough-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 24px 12px;
}

/* The positioning context for the labels and the leader-line layer, both of
   which are placed from measured boxes. */
.walkthrough-stage {
    position: relative;
    width: 100%;
    animation: setup-anim-fadein 0.3s ease-out;
}

.walkthrough-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
}

.walkthrough-stage .card-replica {
    width: var(--walkthrough-card-w, 400px);
}

.walkthrough-leaders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 4;
}

.walkthrough-leader {
    fill: none;
    stroke: var(--accent-amber);
    stroke-width: 1.5;
    stroke-opacity: 0.75;
}

.walkthrough-leader-dot {
    fill: var(--accent-amber);
}

.walkthrough-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.walkthrough-callout {
    position: absolute;
    width: 200px;
    font: 13px/1.4 var(--font-reading);
    color: var(--text-secondary);
    animation: setup-anim-fadein 0.35s ease-out both;
}

.walkthrough-callout strong {
    display: block;
    margin-bottom: 2px;
    font: 700 14.5px/1.3 var(--font-emphasis);
    color: var(--text-primary);
}

.walkthrough-callout.is-left {
    text-align: right;
}

.walkthrough-pin {
    position: absolute;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-amber);
    color: #1d1606;
    font: 700 11.5px/1.25 var(--font-emphasis);
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    animation: setup-anim-fadein 0.35s ease-out both;
}

/* The element a label names. outline, not border, so nothing on the card
   changes size when it is marked. */
.walkthrough-anchored {
    outline: 1.5px solid color-mix(in srgb, var(--accent-amber) 70%, transparent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* The ranking row spans the card edge to edge, so an outside outline would
   bleed past the card. */
.walkthrough-anchored.card-ranking {
    outline-offset: -2px;
}

.walkthrough-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-light);
}

/* Explicit columns: Back is hidden on the first screen, and auto-placement
   would otherwise slide the count and Next one column left. */
.walkthrough-back {
    grid-column: 1;
    justify-self: start;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 10px 18px;
    border-radius: 999px;
    font: 600 14px/1 var(--font-emphasis);
    cursor: pointer;
}

.walkthrough-back:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.walkthrough-count {
    grid-column: 2;
    font: 600 12.5px/1 var(--font-reading);
    color: var(--text-muted);
}

.walkthrough-next {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
    background: var(--accent-primary);
    color: var(--accent-primary-text, #10141b);
    border: 0;
    padding: 12px 22px;
    border-radius: 999px;
    font: 700 14.5px/1 var(--font-emphasis);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.walkthrough-next:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    .walkthrough-head {
        grid-template-columns: 1fr auto;
        padding: 14px 16px 4px;
        row-gap: 8px;
    }

    .walkthrough-copy {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }

    .walkthrough-title {
        font-size: 20px;
    }

    .walkthrough-lead {
        font-size: 14px;
    }

    .walkthrough-body {
        padding: 22px 16px 12px;
    }

    .walkthrough-foot {
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .walkthrough-next {
        padding: 12px 18px;
    }

    .walkthrough-back {
        padding: 10px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .walkthrough-stage,
    .walkthrough-callout,
    .walkthrough-pin {
        animation: none;
    }
}

/* Sense information: preserve readable distinctions at every card density.
   --card-fs is also the hook for a larger accessibility text size. */
.meaning-row {
    --sense-reading-size: max(13px, calc(var(--card-fs, 18px) * 0.74));
    --sense-badge-size: max(12px, calc(var(--card-fs, 18px) * 0.68));
}
.meaning-row-group { container-type: inline-size; container-name: sense-row; }
.meaning-row .meaning-context,
.meaning-row .meaning-context-cell,
.meaning-row .sense-metadata-list,
.meaning-row .sense-metadata-tier--grammar,
.meaning-row .sense-metadata-tier--details,
.meaning-row .sense-metadata-detail:not(.sense-pill) {
    font-size: var(--sense-reading-size);
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.meaning-row .sense-metadata-list .sense-pill,
.meaning-row .meaning-register,
.meaning-row .meaning-usage-pill {
    font-size: var(--sense-badge-size);
    line-height: 1.4;
    white-space: normal;
}
.meaning-row .sense-pill-label {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}
.meaning-row .sense-metadata-tier--primary { gap: 4px 8px; }
.meaning-row .sense-metadata-detail:not(.sense-pill) { font-weight: 500; }
.meaning-row .sense-metadata-detail + .sense-metadata-detail::before { content: none; }
.meaning-row .sense-metadata-tier--grammar,
.meaning-row .sense-metadata-tier--details { gap: 4px 8px; }
.meaning-row .sense-note-trigger { font-size: 11px; }
.meaning-row .group-card-varying-cell > .meaning-context-cell,
.meaning-row .group-card-varying-cell > .row-adaptive-text,
.meaning-row-regular:not(.is-current-sense) .meaning-row-translation {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.meaning-row .group-card-varying-cell { min-height: 36px !important; }
.meaning-row .group-card-body { justify-self: stretch !important; }
.meaning-row .group-card-body:is(.has-long-shared, .is-stacked) { grid-template-columns: minmax(0, 1fr) !important; }
.meaning-row .group-card-body:is(.has-long-shared, .is-stacked) > .group-card-shared {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-bottom: 5px;
}
.meaning-row .group-card-body:is(.has-long-shared, .is-stacked) > .group-card-varying-cell {
    grid-column: 1 !important;
    grid-row: auto !important;
}
.sense-definition-detail {
    font-size: var(--sense-reading-size, 13px);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 4px;
}
.sense-definition-detail summary { cursor: pointer; padding: 8px; }
@container sense-row (max-width: 300px) {
    .group-card-body { grid-template-columns: minmax(0, 1fr) !important; }
    .group-card-body > .group-card-shared { grid-column: 1 !important; grid-row: 1 !important; padding-bottom: 5px; }
    .group-card-body > .group-card-varying-cell { grid-column: 1 !important; grid-row: auto !important; }
}

.meaning-row .group-card-shared { word-break: normal !important; overflow-wrap: normal; }

/* Read details in the same flow as the gloss; wrap only when space requires it. */
.meaning-row-regular .meaning-row-body {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 2px 8px;
}
.meaning-row-regular .meaning-row-gloss { width: auto !important; max-width: 100%; }
.meaning-row-regular .meaning-row-sub { display: contents; }
.meaning-row .sense-metadata-list { display: contents; }
.meaning-row .sense-metadata-tier {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin-top: 0;
}
.meaning-row .sense-metadata-tier[hidden] { display: none; }
.meaning-row .sense-note-trigger {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    margin: 0;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
}
.meaning-row:has(.sense-note-trigger) { padding-left: 32px !important; }
.meaning-row:has(.meaning-row-check):has(.sense-note-trigger) { padding-left: 54px !important; }
.meaning-row:has(.meaning-row-check):has(.sense-note-trigger) .meaning-row-check { left: 32px; }
.meaning-row .group-card-varying-cell,
.meaning-row .group-card-shared { position: relative; }
.meaning-row .group-card-varying-cell:has(.sense-note-trigger),
.meaning-row .group-card-shared:has(.sense-note-trigger) { padding-left: 32px !important; }
.meaning-row .group-card-varying-cell .sense-note-trigger,
.meaning-row .group-card-shared .sense-note-trigger { left: 4px; }
.meaning-row .sense-definition-detail { flex-basis: 100%; }

/* Optional learner note for one sense. The row stays compact; secondary
   meaning, usage and construction information opens in a small dialog. */
.sense-note-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sense-note-dialog {
    position: relative;
    width: min(360px, 100%);
    max-height: min(620px, calc(100dvh - 40px));
    overflow-y: auto;
    padding: 20px 22px 18px;
    border: 1px solid rgba(var(--sense-match-rgb), 0.65);
    border-radius: 14px;
    background: var(--bg-card, #1a1e27);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.48);
    color: var(--text-primary);
    font-family: var(--font-reading);
    outline: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.sense-note-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    font: 400 22px/1 var(--font-reading);
    cursor: pointer;
}
.sense-note-close:hover,
.sense-note-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}
.sense-note-eyebrow {
    margin: 0 36px 4px 0;
    color: var(--text-muted);
    font: 650 11px/1.2 var(--font-emphasis, var(--font-data));
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.sense-note-dialog h2 {
    margin: 0 36px 14px 0;
    font-size: 20px;
    line-height: 1.25;
}
.sense-note-section + .sense-note-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.sense-note-section h3 {
    margin: 0 0 5px;
    color: var(--text-muted);
    font: 650 11px/1.25 var(--font-emphasis, var(--font-data));
    letter-spacing: 0.045em;
    text-transform: uppercase;
}
.sense-note-section p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.sense-note-section p + p { margin-top: 6px; }
@media (max-width: 600px) {
    .sense-note-overlay {
        align-items: flex-end;
        padding: 14px 10px max(10px, env(safe-area-inset-bottom));
    }
    .sense-note-dialog {
        width: 100%;
        max-height: min(70dvh, 560px);
        border-radius: 16px 16px 12px 12px;
        padding: 20px 20px max(18px, env(safe-area-inset-bottom));
    }
}

@container sense-row (max-width: 420px) {
    .group-card-body.has-long-context { grid-template-columns: minmax(0, 1fr) !important; }
    .group-card-body.has-long-context > .group-card-shared { grid-column: 1 !important; grid-row: 1 !important; padding-bottom: 5px; }
    .group-card-body.has-long-context > .group-card-varying-cell { grid-column: 1 !important; grid-row: auto !important; }
}
/* Let the disclosure and its contents wrap independently of one another. */
.meaning-row .group-card-varying-cell > .meaning-context-cell,
.meaning-row .group-card-varying-cell > .row-adaptive-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 8px;
}

/* Selected sense context emphasis across Spanish and Wiktionary equivalents */
.meaning-row.is-current-sense .meaning-context,
.meaning-row.selected .meaning-context,
.meaning-row .group-card-varying-cell.is-active-subsense .meaning-context,
.meaning-row .group-card-varying-cell.is-active-subsense .meaning-context-cell {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.meaning-row .group-card-varying-cell.is-active-subsense {
    background: rgba(var(--sense-match-rgb), 0.22) !important;
    box-shadow: inset 0 0 0 1.5px rgba(var(--sense-match-rgb), 0.6), inset 3px 0 0 rgb(var(--sense-match-rgb)), inset -3px 0 0 rgb(var(--sense-match-rgb)) !important;
}


/* Study options, opened mid-set: plain rows of icon and text, no boxes and
   no filled discs, so the list reads as a menu rather than a set of cards. */
#studyChoiceSheet .choice-sheet-item {
  min-height: 0;
  padding: 11px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 14px;
}
#studyChoiceSheet .choice-sheet-item + .choice-sheet-item { margin-top: 2px; }
#studyChoiceSheet .choice-sheet-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
#studyChoiceSheet .choice-sheet-icon {
  width: 28px;
  height: 28px;
  background: none;
  box-shadow: none;
  color: var(--accent-primary);
}
#studyChoiceSheet .choice-sheet-icon svg { width: 22px; height: 22px; }
:root[data-theme="light"] #studyChoiceSheet .choice-sheet-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

/* Settings opened from a study session shows the study controls only. */
#settingsModal.settings-study-only #studyTabContent .settings-overview-section {
  display: none;
}

/* ===== Setup chooser: flat rows, no boxes =====
   The chip, the language/vocabulary/music sheets, the inline vocabulary
   choice and the tutorial's language list are one flow and share one look:
   a list of rows split by hairlines. No row is a card of its own. The current
   choice is named by its accent-coloured label and a tick, not a filled box.
   Kept last so it wins over the earlier, boxed rules. */
#topBar .learning-context-chip {
  min-width: 0;
  max-width: 300px;
  min-height: 44px;
  column-gap: 10px;
  padding: 2px 6px 2px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}
#topBar .learning-context-flag { font-size: 30px; }
#topBar .learning-context-photo { width: 32px; height: 32px; font-size: 12px; }
#topBar .learning-context-chip-copy strong { font-size: 19px; letter-spacing: -0.01em; }
#topBar .learning-context-chevron { display: none !important; }
#topBar .learning-context-chip:hover .learning-context-chip-copy strong,
#topBar .learning-context-chip:focus-visible .learning-context-chip-copy strong { color: var(--accent-primary); }
#topBar .learning-context-chip:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Rows */
.choice-sheet-item,
.learning-context-choice,
.tutorial-language-choice,
#step1 .standard-source-addon-btn {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.choice-sheet-list .choice-sheet-item,
.choice-sheet-grid .choice-sheet-item {
  min-height: 64px;
  border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
  background: transparent;
}
.choice-sheet-item:last-child,
.learning-context-choice:last-of-type,
.tutorial-language-choice:last-child { border-bottom-color: transparent; }
.choice-sheet-list .choice-sheet-item + .choice-sheet-item { margin-top: 0; }
.choice-sheet-item { padding: 12px 6px; gap: 14px; }
.choice-sheet-item:hover:not(:disabled),
.learning-context-choice:hover,
.tutorial-language-choice:hover,
#step1 .standard-source-addon-btn:hover {
  border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.choice-sheet-list .choice-sheet-copy strong,
.choice-sheet-grid .choice-sheet-copy strong { font-size: 16px; font-weight: 700; }
.choice-sheet-list .choice-sheet-copy small,
.choice-sheet-grid .choice-sheet-copy small { font-size: 13px; line-height: 1.4; }
.choice-sheet-tail { font-size: 20px; }

/* Current choice */
.choice-sheet-item.is-selected,
.tutorial-language-choice.is-current {
  border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
  background: transparent;
}
.choice-sheet-item.is-selected .choice-sheet-copy strong,
.tutorial-language-choice.is-current strong { color: var(--accent-primary); }
.choice-sheet-item.is-selected .choice-sheet-tail { color: var(--accent-primary); }
.choice-sheet-item:disabled { opacity: .45; }

/* Icons: flags stand bare and large; line icons sit in the accent colour. */
.choice-sheet-icon,
.choice-sheet-grid .choice-sheet-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  box-shadow: none;
  color: var(--choice-accent, var(--accent-primary));
  font-size: 32px;
}
.choice-sheet-icon svg { width: 26px; height: 26px; }
.choice-sheet-icon--image {
  width: 42px;
  height: 42px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.choice-sheet-icon--initials {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--choice-accent) 72%, #0b1118);
  color: #fff;
  font: 700 15px/1 var(--font-emphasis);
}
.choice-sheet-item { grid-template-columns: 42px minmax(0, 1fr) 18px; }
.choice-sheet-grid .choice-sheet-body { column-gap: 18px; row-gap: 0; }
.choice-sheet-grid .choice-sheet-item {
  min-height: 60px;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  padding: 10px 4px;
}
/* In two columns the last row of each column loses its rule. */
.choice-sheet-grid .choice-sheet-item:nth-last-child(2):nth-child(odd) { border-bottom-color: transparent; }

/* Settings sheet from the chip */
.learning-context-switches { gap: 0; }
.learning-context-choice { min-height: 60px; padding: 10px 4px; }
.learning-context-sheet-flag { font-size: 32px; }
.learning-context-choice strong { font-size: 16px; }
.learning-context-choice > span:last-child { font-size: 20px; }
.learning-context-mode-icon { width: 32px; }
.learning-context-mode-icon svg { width: 24px; height: 24px; stroke: currentColor; }
.learning-context-progress[hidden] { display: none; }

/* Inline vocabulary choice (language chosen, vocabulary not yet) */
#step1.language-summary-active .standard-source-card {
  padding: 16px 6px 6px;
  background: transparent;
}
#step1.language-summary-active .standard-source-choice-buttons { gap: 0; }
.standard-source-choice-intro .standard-source-choice-title { font-size: 20px; }
.standard-source-choice-intro p { color: var(--text-muted); font-size: 14px; }
#step1 .standard-source-addon-btn { padding: 12px 6px; border-bottom-color: transparent; }
/* No deck exists yet, so nothing that belongs to one may show here. */
#step1.language-summary-active:not(.context-ready) ~ #step2,
#step1.language-summary-active:not(.context-ready) ~ #step4,
#step1.language-summary-active:not(.context-ready) ~ #extrasDeckSection,
#step1.language-summary-active:not(.context-ready) ~ #reviewDeckSection,
#setupPanel > #personalCoverageWrapper { display: none !important; }

/* Tutorial language list */
.tutorial-language-grid { gap: 0; }
.tutorial-language-choice { padding: 12px 4px; }
.tutorial-language-flag { font-size: 30px; }
.tutorial-language-choice strong { font-size: 16px; }
.tutorial-language-choice small { font-size: 12px; }

@media (max-width: 560px) {
  #topBar .learning-context-chip { max-width: 220px; padding-left: 0; }
  #topBar .learning-context-flag { font-size: 27px; }
  #topBar .learning-context-chip-copy strong { font-size: 19px; }
}
@media (max-width: 400px) {
  #topBar .learning-context-chip { max-width: 195px; column-gap: 6px; }
  #topBar .learning-context-flag { font-size: 25px; }
  #topBar .learning-context-chip-copy strong { font-size: 18px; }
}

/* Spotify status under the vocabulary choice: connect, or say it is connected. */
.spotify-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 2px 6px;
  padding: 8px 14px 8px 10px;
  border: 1px solid color-mix(in srgb, #1DB954 45%, var(--border-color));
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px/1.2 var(--font-emphasis);
  cursor: pointer;
}
.spotify-status svg { width: 20px; height: 20px; color: #1DB954; flex: none; }
.spotify-status:hover { background: color-mix(in srgb, #1DB954 10%, transparent); }
.spotify-status:focus-visible { outline: 2px solid #1DB954; outline-offset: 2px; }
.spotify-status.is-connected {
  padding: 0;
  border: 0;
  color: var(--text-muted);
  font-weight: 500;
  cursor: default;
}
.spotify-status.is-connected:hover { background: transparent; }
.choice-sheet-footer { flex: none; padding: 0 14px 16px; }
.choice-sheet-footer .spotify-status { margin-top: 0; }

/* Smart Skip exit. The ✕ sat at the page's very top edge — under a phone's
   status bar — and scrolled away with the word list, so there was no way out
   once you scrolled. It now stays pinned below the safe area, on a disc so
   it reads over the list. Docked over Settings it stays in the sheet. */
#fastModeModal:not([data-dock]) .fast-mode-close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 7px);
  right: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1;
}
/* The title is a bar that stays put, the ✕ sits in it, and each level's
   header sticks just beneath it rather than sliding under the ✕. */
#fastModeModal:not([data-dock]) .fast-mode-page-body h2 {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -16px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 64px 10px 16px;
  background: color-mix(in srgb, var(--bg-primary, var(--bg-card)) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#fastModeModal:not([data-dock]) .smart-skip-level { top: calc(env(safe-area-inset-top, 0px) + 54px); }

/* ===== Settings: one card per group =====
   Study, Your words and App were separated by a hairline each, the same
   hairline that separates rows inside a group, so the page read as one long
   list. Each group is now its own filled card with its name at the top. */
#settingsModal #studyTabContent > section {
  margin: 0 0 14px;
  padding: 4px 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
#settingsModal #studyTabContent > section > .settings-defaults-heading {
  padding: 12px 0 8px;
}
#settingsModal #studyTabContent > section > .settings-defaults-heading strong {
  color: var(--accent-primary);
  font: 700 12px/1.2 var(--font-reading);
  letter-spacing: .06em;
  text-transform: uppercase;
}
#settingsModal #studyTabContent > section > .settings-compact-note { margin-top: -2px; }
#settingsModal .settings-overview-links { padding: 0 4px; }
#settingsModal .settings-overview-links .settings-footer-link { margin-top: 0; }
#settingsModal.settings-study-only #studyTabContent .settings-overview-links { display: none; }

/* ===== Settings → Account =====
   Profile first (a big initials disc, with Log out beside it), then the
   device password, then connections. */
.account-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 18px;
}
.account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  font: 700 22px/1 var(--font-emphasis);
  letter-spacing: .02em;
}
.account-avatar.is-guest {
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  color: var(--text-muted);
}
.account-profile-copy { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.account-profile-copy strong { font: 700 20px/1.2 var(--font-emphasis); color: var(--text-primary); }
.account-profile-copy small { color: var(--text-muted); font-size: 12px; }
.account-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--error, #e5484d) 45%, var(--border-color));
  border-radius: 999px;
  background: transparent;
  color: var(--error, #e5484d);
  font: 650 13px/1 var(--font-reading);
  cursor: pointer;
}
.account-logout svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-logout:hover { background: color-mix(in srgb, var(--error, #e5484d) 10%, transparent); }
.account-password {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.account-password[hidden] { display: none; }
.account-password-label { font: 650 13px/1.2 var(--font-reading); color: var(--text-primary); }
.account-password-input {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: 600 15px/1.2 var(--font-data, monospace);
  transition: filter .15s ease;
}
.account-password-input:not([readonly]) { border-color: var(--border-color); background: var(--bg-primary, transparent); }
.account-password-input:focus { outline: none; border-color: var(--accent-primary); }
.account-password-input.is-concealed { filter: blur(6px); user-select: none; }
.account-password-input::placeholder { color: var(--text-muted); font-family: var(--font-reading); font-weight: 500; font-size: 13px; }
.account-password-action {
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 650 12px/1 var(--font-reading);
  cursor: pointer;
}
.account-password-action[hidden] { display: none; }
.account-password-save { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; }
.account-password-status { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 12px; }
.account-password-status:empty { display: none; }

/* Set legend: 9px was too small to read at a glance. */
#step4 .study-set-legend { gap: 14px; font-size: 12px; }
#step4 .study-set-legend span { gap: 6px; }
#step4 .study-set-legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 480px) {
  .account-password { grid-template-columns: minmax(0, 1fr) auto auto; }
  .account-password-input { grid-column: 1 / -1; grid-row: 2; }
}

/* Top bar trim: the language's two colours run the whole way round the bar
   instead of a stripe along the bottom. Drawn as a masked ring on ::before
   so the rounded corners carry it too. */
#topBar {
  border: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  --top-bar-ring: linear-gradient(115deg,
    var(--lang-trim, var(--accent-primary)) 0%,
    var(--lang-trim, var(--accent-primary)) 30%,
    var(--lang-trim-secondary, var(--lang-trim, var(--accent-primary))) 70%,
    var(--lang-trim-secondary, var(--lang-trim, var(--accent-primary))) 100%);
}
#topBar[data-ring="split"] {
  --top-bar-ring: linear-gradient(to bottom,
    var(--lang-trim, var(--accent-primary)) 50%,
    var(--lang-trim-secondary, var(--lang-trim, var(--accent-primary))) 50%);
}
#topBar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--top-bar-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Set box: the level's progress and the legend share one line, and the
   chosen set reads as one line under the dots. */
#step4 .study-set-level-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
#step4 .study-set-level-context .study-set-overview {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font: 700 15px/1.3 var(--font-emphasis);
}
#step4 .study-set-current-copy { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
#step4 .study-set-current-copy strong { font-size: 15px; }
#step4 .study-set-current-copy span { font-size: 13px; }
#step4 .study-set-current-copy span::before { content: '·'; margin-right: 8px; }

/* "Best for" lines under each vocabulary choice. */
.choice-sheet-bestfor {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  color: var(--text-secondary, var(--text-muted));
  font: 500 13px/1.35 var(--font-reading);
}
.choice-sheet-bestfor em {
  color: var(--text-muted);
  font: 700 11px/1.2 var(--font-reading);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.choice-sheet-bestfor span { position: relative; padding-left: 14px; }
.choice-sheet-bestfor span::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary);
}

/* Practice is deliberately wider than ordinary setup sheets. Its explainer is
   always the top layer, including when side-dock marks both as a stack. */
body:has(#appContent.hidden) #reviewHomeModal[data-dock] > .review-home-content {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}
#spacedRepetitionInfoModal.modal,
#spacedRepetitionInfoModal.modal[data-dock-stack] { z-index: 1020; }

/* Card front figures, three short lines a side: "Vocabulary / Rank / 1"
   and "Frequency / 29,783 / per million". The stacked label and the unit
   below keep both blocks narrow. */
.card-stat-label { white-space: normal; }
.card-stat-unit--below { font-size: 12px; line-height: 1.2; opacity: .85; }

/* Back of card: the lemma beside the surface form, a little larger. */
.back-headword.back-surface-pair .back-lemma-chip { font-size: clamp(14px, 4.4vw, 19px); }

/* Shared learner cues: selection changes emphasis, not which cues are present. */
.meaning-row-regular .meaning-row-body {
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.meaning-row-regular .meaning-row-gloss,
.meaning-row-regular .meaning-row-sub {
    display: block;
    width: 100% !important;
    text-align: center;
}
.meaning-row .meaning-context-cell,
.meaning-row .meaning-context,
.meaning-row .sense-metadata-tier,
.meaning-row .group-card-varying-cell {
    text-align: center;
    justify-content: center !important;
}
.meaning-row .sense-grammar-cue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px 8px;
    width: 100%;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: var(--sense-reading-size);
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
}
.meaning-row .sense-grammar-cue .sense-metadata-detail {
    font: inherit;
    color: inherit;
}
.meaning-row.has-row-information {
    padding-left: 32px !important;
    padding-right: 32px !important;
}
.meaning-row-regular.has-row-information .meaning-row-body {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.meaning-row-group.has-row-information > .pct-column {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.meaning-row-group.has-row-information { grid-template-columns: minmax(0, 1fr) !important; }
.meaning-row.has-row-information > .sense-note-trigger { left: 6px; }

/* One provider-neutral layout: edge controls, gloss, and optional fitted cues. */
.meaning-row-regular { container-type: inline-size; container-name: sense-row; }
.meaning-row.meaning-row-regular,
.meaning-row.meaning-row-group {
    padding: 4px 38px !important;
    grid-template-columns: minmax(0, 1fr) !important;
}
.meaning-row.meaning-row-known { padding-right: 58px !important; }
.meaning-row .meaning-row-body,
.meaning-row .group-card-body:is(.has-long-shared, .is-stacked) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.meaning-row .meaning-row-gloss,
.meaning-row .group-card-shared {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    text-align: center;
    padding: 0 !important;
    overflow-wrap: anywhere;
}
.meaning-row .sense-cue-area {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content !important;
    max-width: 48%;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(var(--sense-match-rgb), 0.09);
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
.meaning-row .sense-cue-group {
    display: grid;
    gap: 3px;
    padding: 0;
}
.meaning-row .sense-cue-group > .group-card-varying-cell {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 6px 10px;
    overflow: visible !important;
}
.meaning-row .sense-cue-area .sense-grammar-cue { margin-top: 0; }
.meaning-row > .pct-column {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center;
}
.meaning-row > .sense-note-trigger { left: 6px; }
@container sense-row (max-width: 340px) {
    .meaning-row .meaning-row-body { flex-direction: column !important; }
    .meaning-row .sense-cue-area { max-width: 100%; }
    .meaning-row .meaning-row-gloss,
    .meaning-row .group-card-shared { flex-basis: auto; width: 100% !important; }
}

/* Card front figures: "Vocab. Rank" and "Frequency" on one line each, the
   bold numbers level beneath them, "per million" small underneath the
   frequency. Each block is centred on itself; tops align so labels and
   numbers line up across the card. */
.card-ranking { align-items: flex-start !important; padding: 0 22px; }
.card-ranking .card-stat,
.card-ranking .card-stat--end {
    align-items: center;
    text-align: center;
    gap: 2px;
}
.card-ranking .card-stat-label { white-space: nowrap; font-size: 13px; letter-spacing: 0.02em; }
.card-ranking .card-stat-line { justify-content: center; }
.card-ranking .card-stat-unit--below { font-size: 11px; margin-top: -1px; }

/* Commonness meter: a little wider and taller. */
.sense-prominence-meter { height: 16px; gap: 2.5px; }
.sense-prominence-meter i { width: 4.5px; border-radius: 1.5px; }
.sense-prominence-meter i:nth-child(1) { height: 6px; }
.sense-prominence-meter i:nth-child(2) { height: 11px; }
.sense-prominence-meter i:nth-child(3) { height: 16px; }

/* Rectangular flags (js/flags.js) in place of emoji. Sized in em so every
   spot that sized the emoji by font-size keeps its scale. */
.flag-img {
    display: inline-block;
    width: 1.33em;
    height: 1em;
    object-fit: cover;
    vertical-align: -0.12em;
    border-radius: 0.14em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* A country region on a sense row is its flag alone. */
.sense-region-flag {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1;
}
.sense-metadata-tier:empty,
.sense-metadata-list:empty { display: none; }
.meaning-row > .row-lead-marks {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}
.meaning-row.has-row-lead-and-info > .row-lead-marks { left: 32px; }
.row-lead-marks .sense-region-flag { font-size: 14px; }
.row-lead-marks .sense-target-collocation {
    margin: 0;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 6px;
}
.row-lead-marks .sense-collocation-particle { font-style: normal; font-weight: 800; }
.row-lead-marks .sense-collocation-qualifier { font-size: 11px; font-weight: 600; opacity: .75; }
.choice-sheet-icon .flag-img { width: 100%; height: auto; aspect-ratio: 4 / 3; }

/* Level complete: title, confetti, next level, main menu — nothing else.
   The tick grows into a glowing medal that pops in. */
.deck-complete-content.is-level-complete .deck-complete-eyebrow,
.deck-complete-content.is-level-complete .deck-complete-message:empty { display: none; }
.deck-complete-content.is-level-complete .deck-complete-icon {
    width: 88px;
    height: 88px;
    margin: 6px 0 10px;
    border-width: 2px;
    background: radial-gradient(circle at 35% 30%,
        color-mix(in srgb, var(--accent-secondary) 42%, transparent),
        color-mix(in srgb, var(--accent-secondary) 12%, transparent) 70%);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-secondary) 10%, transparent),
        0 10px 40px color-mix(in srgb, var(--accent-secondary) 35%, transparent);
    animation: level-medal-pop 0.7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.deck-complete-content.is-level-complete .deck-complete-icon svg { width: 46px; height: 46px; stroke-width: 2.6; }
.deck-complete-content.is-level-complete .deck-complete-header h3 { font-size: 30px; }
@keyframes level-medal-pop {
    from { transform: scale(0.3) rotate(-18deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .deck-complete-content.is-level-complete .deck-complete-icon { animation: none; }
}

/* Front lemma/POS pills wrap onto another centred row when they do not fit,
   instead of being held in fixed columns that overflow on narrow phones
   ("isso": Pronoun isso · Interjection isso). Size stays readable. */
.card-front .card-pos-list.is-lemma-map,
.card-front .card-pos-list.is-lemma-map[class*="pos-count-"] {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  row-gap: 8px;
}
.card-front .card-pos-list.is-lemma-map > * { flex: 0 1 auto; }
/* The completion modal hides its accuracy ring, correct/missed row and
   redo button with the hidden attribute; their display rules were
   overriding it, so an empty 0% ring and 0/0 showed on every level. */
.deck-complete-content [hidden] { display: none !important; }

/* Child card return: one line, "BACK TO" then the word, not two small rows. */
.cbs-return .cbs-return-text {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
}
.cbs-return .cbs-return-kicker { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.cbs-return .cbs-return-label { font-size: 18px; font-weight: 700; }

/* Optional-password note: a small card over the sign-in form, raised on the
   first typed character (auth.js). */
#loginForm { position: relative; }
.auth-password-note {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: min(300px, calc(100% - 16px));
    padding: 16px 16px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    text-align: left;
}
.auth-password-note[hidden] { display: none; }
.auth-password-note p { margin: 0 0 12px; font: 400 13px/1.45 var(--font-reading); color: var(--text-secondary); }
.auth-password-note-ok {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--accent-primary);
    color: #fff;
    font: 700 14px var(--font-emphasis);
    cursor: pointer;
}

/* A gloss and its cues sit side by side as one centred unit. The cue box
   takes the room beside the gloss and wraps its own text there; only when
   the gloss itself fills the line does the cue box drop underneath. */
.meaning-row .meaning-row-body,
.meaning-row .group-card-body:is(.has-long-shared, .is-stacked) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
}
.meaning-row .meaning-row-gloss,
.meaning-row .group-card-shared {
    flex: 0 1 auto;
    max-width: 100%;
}
.meaning-row .sense-cue-area {
    flex: 1 1 7em;
    max-width: max-content;
}
@container sense-row (max-width: 340px) {
    .meaning-row .meaning-row-body { flex-direction: row !important; }
    .meaning-row .meaning-row-gloss,
    .meaning-row .group-card-shared { flex-basis: auto; width: auto !important; }
}
.meaning-row .group-member-gloss {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
}

/* A family sub-row's partner word ("+de") leads that sub-row. */
.group-card-varying-cell.has-cell-lead { position: relative; }
.group-card-varying-cell > .cell-lead-mark {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
}
.cell-lead-mark .sense-collocation-particle { font-style: normal; font-weight: 800; }
.cell-lead-mark .sense-collocation-qualifier { font-size: 11px; font-weight: 600; opacity: .75; }

/* Info note: one reading style. A family row's sub-senses are plain bold
   lines in the body font, not headings; their own sections sit inside
   without extra rules between them. */
.sense-note-section h3.sense-note-subsense-title {
    margin: 0 0 3px;
    color: var(--text-primary);
    font: 650 15px/1.35 var(--font-reading);
    letter-spacing: 0;
    text-transform: none;
}
.sense-note-subsense .sense-note-section {
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.sense-note-subsense .sense-note-section h3 { margin-top: 6px; }
.meaning-row .sense-cue-bare {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    align-items: center;
    gap: 4px;
}
/* A context every sub-sense shares sits under the family heading. */
.meaning-row .group-shared-context {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: var(--sense-reading-size, 13px);
    font-weight: 500;
    line-height: 1.3;
}

/* Meanings overview: a card family row's heading, its sub-senses beneath. */
.knowledge-overview-family {
    margin: 8px 0 4px;
    color: var(--text-primary);
    font: 650 14px/1.3 var(--font-reading);
}
.knowledge-overview-rows.is-family { padding-left: 12px; }
/* Phone: the sense note sits by its ⓘ button rather than at the bottom. */
.sense-note-overlay.is-anchored {
    align-items: flex-start !important;
    padding-top: 0 !important;
}
.sense-note-overlay.is-anchored .sense-note-dialog { border-radius: 14px; }
.knowledge-overview-summary[hidden] { display: none !important; }
.knowledge-overview-hint {
    margin: -2px 12px 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}
/* The footer's button sat flush against the sheet's right edge on phones. */
.knowledge-overview-footer { padding: 12px 12px 12px !important; }

/* Smart Skip: the folded shortcuts behind one quiet button. */
.smart-skip-more-options {
    align-self: flex-start;
    margin: 2px 0 4px;
    padding: 8px 14px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: 600 14px/1.2 var(--font-reading);
    cursor: pointer;
}
.smart-skip-more-options:hover,
.smart-skip-more-options:focus-visible { color: var(--text-primary); }
.smart-skip-more-options[hidden] { display: none !important; }

/* Tags on sense rows read as coloured words at the row's reading size, not
   tiny capsules inside the shaded cue box. The colour still says which kind
   of tag it is: amber for register, blue for subject, indigo for grammar. */
.meaning-row .sense-pill:not(.sense-pill--companion) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--sense-reading-size, 13px);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.meaning-row .sense-pill:not(.sense-pill--companion):hover { background: none; }
.meaning-row .sense-pill--register { color: color-mix(in srgb, #d97706 58%, var(--text-primary)); }
.meaning-row .sense-pill--domain { color: color-mix(in srgb, #3b82f6 58%, var(--text-primary)); }
.meaning-row .sense-pill--construction,
.meaning-row .sense-pill--syntax,
.meaning-row .sense-pill--grammar { color: color-mix(in srgb, #6366f1 58%, var(--text-primary)); }
.meaning-row .sense-pill .sense-pill-label { font-size: inherit; }

/* Row cues read as words, not as fine print: the translation stays a
   little larger; contexts, "+ infinitive", "reflexive" are full colour. */
.meaning-row {
    --sense-reading-size: var(--row-secondary-size, max(15px, calc(var(--card-fs, 18px) * 0.95)));
}
.meaning-row .meaning-context,
.meaning-row .meaning-context-cell,
.meaning-row .sense-grammar-cue,
.meaning-row .sense-metadata-tier--grammar,
.meaning-row .sense-metadata-detail:not(.sense-pill),
.meaning-row .group-shared-context {
    color: var(--text-primary);
    font-style: normal;
    font-weight: 500;
}

/* Only the active sense takes more than one line once the menu has four or
   more rows; the rest are cut to one line with an ellipsis. */
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) .meaning-row-body,
.meanings-scroll.has-compact-rows .meaning-row-group:not(.selected) .group-card-body {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) :is(.meaning-row-gloss, .sense-cue-area),
.meanings-scroll.has-compact-rows .meaning-row-group:not(.selected) .group-card-shared,
.meanings-scroll.has-compact-rows .group-card-varying-cell:not(.is-active-subsense) {
    display: block !important;
    min-width: 0;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
}
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) :is(.meaning-row-gloss, .sense-cue-area) *,
.meanings-scroll.has-compact-rows .meaning-row-group:not(.selected) .group-card-shared *,
.meanings-scroll.has-compact-rows .group-card-varying-cell:not(.is-active-subsense) > :not(.cell-lead-mark),
.meanings-scroll.has-compact-rows .group-card-varying-cell:not(.is-active-subsense) > :not(.cell-lead-mark) * {
    display: inline !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
}
/* The translation keeps its words; the cue gives way first. */
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) .meaning-row-gloss { flex: 0 0 auto; max-width: 72%; }
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) .sense-cue-area { flex: 0 1 auto; min-width: 0; max-width: none; padding: 3px 8px; }
.meanings-scroll.has-compact-rows .group-card-varying-cell:not(.is-active-subsense) { min-height: 0 !important; padding: 4px 10px; }
.meanings-scroll.has-compact-rows .group-card-varying-cell:not(.is-active-subsense) .group-member-gloss { margin-right: 6px; }
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) .sense-metadata-detail + .sense-metadata-detail,
.meanings-scroll.has-compact-rows .meaning-row-regular:not(.selected) .meaning-context + .sense-metadata-list { margin-left: 6px; }
/* The partner word reads as the first words of the context, not a chip. */
.meaning-row .companion-as-context {
    display: inline !important;
    position: static !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    font: inherit !important;
    font-size: var(--sense-reading-size) !important;
    font-weight: 700 !important;
    white-space: nowrap;
}
.meaning-row .companion-as-context .sense-collocation-particle { font: inherit !important; color: inherit !important; }
.meaning-row .companion-as-context .sense-collocation-qualifier { font-size: 0.85em; font-weight: 500; margin-right: 4px; }
.meaning-row .sense-grammar-cue.is-leading-frame { font-weight: 700; }
.meanings-scroll.has-compact-rows .sense-grammar-cue.is-leading-frame { margin-right: 6px !important; }
.meaning-row-regular .meaning-row-sub > .sense-grammar-cue.is-leading-frame { width: auto; }

/* Card front corners: labels a little larger and brighter, figures larger. */
.card-ranking .card-stat { color: rgba(255, 255, 255, 0.76); }
.card-ranking .card-stat-label { font-size: 14.5px; }
.card-ranking .card-stat-unit,
.card-ranking .card-stat-unit--below { font-size: 12.5px; opacity: 1; }
.card-ranking .card-stat-value { font-size: 30px; }

/* An information button that explains a context sits on the context's right.
   Either way it sits just outside the shaded box: a sub-row gives up a gutter
   on its right for it, as a single-sense row does beside its context. The row's side padding keeps it clear of the
   commonness meter at the far right. */
.meaning-row .group-card-varying-cell.has-cell-information { position: relative; padding-left: 10px !important; padding-right: 10px !important; }
.meaning-row .sense-cue-area:has(> .group-card-varying-cell.has-cell-information) { margin-right: 30px; }
.meaning-row .group-card-varying-cell.has-cell-information > .sense-note-trigger.is-context-info { left: auto; right: -31px; }
.meanings-scroll.has-compact-rows .group-card-varying-cell:not(.is-active-subsense) > .sense-note-trigger { display: inline-flex !important; }
.meaning-row.has-context-information { padding-left: 38px !important; }
.meaning-row .meaning-row-body > .sense-note-trigger.is-context-info {
    position: static;
    transform: none;
    align-self: center;
    margin-left: -2px;
}

/* ===== Settings: three tabs =====
   Study, App and Your words are tabs rather than one long page; each group's
   own heading would only repeat its tab, so it goes. Study settings opened
   from a set shows the Study tab alone. On a wide screen the page is a broad
   sheet in the middle rather than a side panel (side-dock.js leaves it
   undocked); the detail pages it opens use the same frame. */
#settingsModal .settings-pane-tabs { display: flex; width: 100%; margin: 0 0 14px; }
#settingsModal .settings-pane-tab { flex: 1 1 0; }
#settingsModal #studyTabContent > .settings-pane:not(.is-active) { display: none; }
#settingsModal #studyTabContent > .settings-pane > .settings-defaults-heading { display: none; }
#settingsModal #studyTabContent > .settings-pane { padding-top: 2px; }
#settingsModal #studyTabContent > .settings-pane > .settings-compact-note { margin-top: 12px; }
#settingsModal #studyTabContent > .settings-pane > .settings-link-row:first-child,
#settingsModal #studyTabContent > .settings-pane > .settings-compact-note + .settings-preference-group .settings-default-row:first-child { border-top: 0; }
#settingsModal #studyTabContent > .settings-pane > .settings-overview-links { padding: 4px 0 12px; border-top: 1px solid var(--border-color); }
#settingsModal.settings-study-only .settings-pane-tabs { display: none; }
@media (min-width: 701px) {
  #settingsModal:not([data-dock]) .settings-modal-content {
    width: min(94vw, 880px);
    max-width: 880px;
    padding: 0 32px 30px;
  }
  #settingsModal:not([data-dock]) .settings-modal-content > .settings-tabs-header {
    margin: 0 -32px 18px;
    padding: 20px 32px 14px;
  }
  #settingsModal:not([data-dock]).settings-single-tab:not(.settings-study-only) .settings-modal-content {
    min-height: min(calc(80dvh / var(--ui-zoom, 1)), 520px);
  }
}

/* Settings: the ? beside "Bring back learned words" opens the practice
   explainer over the settings page. */
#settingsModal .settings-row-label .settings-row-info {
  display: inline-grid; width: 20px; height: 20px; margin-left: 6px;
  font-size: 11px; vertical-align: 1px; cursor: pointer;
}
#spacedRepetitionInfoModal.is-over-settings { z-index: 1020; }
#spacedRepetitionSettingsBtn[hidden] { display: none; }
/* Level estimate intro: a quiet way to bring in a list instead. */
.estimation-import-link {
  display: block; margin: 14px auto 0; padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
  border-radius: 12px; background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
  color: var(--accent-primary); font: 600 13px/1.4 var(--font-reading); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.estimation-import-link:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 65%, var(--border-color));
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.estimation-import-link[hidden] { display: none; }
#chatgptPromptCard[hidden] { display: none; }
#settingsModal .settings-pane > .settings-feature-card { margin: 4px 0 14px; }

/* ===== Inline vocabulary source choice: centred, two options =====
   The heading and its note are centred and the note is kept no wider than
   the heading. A small "or" between the two options says it is one choice
   of two, without turning the flat rows into boxes. On a wide screen the
   options stand side by side under a centred heading instead of stretching
   along the left. The Spotify button belongs to Your music, so it sits
   under that option's text, never in the icon column. */
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro {
  justify-items: center;
  text-align: center;
}
#step1.language-summary-active #standardSourceCard .standard-source-choice-title { max-width: 22ch; text-wrap: balance; }
/* The intro is as wide as the title: the note does not count towards it. */
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro { width: fit-content; max-width: 100%; margin-inline: auto; }
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro p { contain: inline-size; width: 100%; max-width: none; text-wrap: balance; }
#step1.language-summary-active #standardSourceCard .choice-sheet-item + .standard-source-or + .choice-sheet-item { border-top: 0; }
#step1.language-summary-active #standardSourceCard .standard-source-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted);
  font: 700 11px/1 var(--font-reading); letter-spacing: .12em; text-transform: uppercase;
}
#step1.language-summary-active #standardSourceCard .standard-source-or::before,
#step1.language-summary-active #standardSourceCard .standard-source-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-color);
}
#step1.language-summary-active #standardSourceCard .standard-source-spotify {
  display: flex; justify-content: flex-start;
  padding-left: 56px; /* lines the button up with the options' text */
}
@media (min-width: 900px) {
  #step1.language-summary-active #standardSourceCard .standard-source-choice {
    max-width: 920px; margin: 0 auto;
  }
  #step1.language-summary-active #standardSourceCard .standard-source-choice-title { max-width: none; }
  #step1.language-summary-active #standardSourceCard .standard-source-choice-intro p { contain: none; width: auto; max-width: 46ch; }
  #step1.language-summary-active #standardSourceCard .standard-source-choice-buttons {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: 20px;
    margin-top: 8px;
  }
  #step1.language-summary-active #standardSourceCard .choice-sheet-item { border-top: 0; border-bottom: 0; padding: 14px 10px; border-radius: 14px; }
  #step1.language-summary-active #standardSourceCard .standard-source-or {
    flex-direction: column; align-self: stretch; gap: 10px;
  }
  #step1.language-summary-active #standardSourceCard .standard-source-or::before,
  #step1.language-summary-active #standardSourceCard .standard-source-or::after { width: 1px; height: auto; }
  #step1.language-summary-active #standardSourceCard .standard-source-spotify {
    /* Under the Your music column: half the row past the "or". */
    margin-left: calc(50% + 20px);
    padding-left: 74px;
  }
}
/* One rhythm: the same space above the title as below the last control, and
   the same gap from the note to the first option as from the last option to
   the Spotify button. */
#step1.language-summary-active #standardSourceCard { padding-top: 20px; padding-bottom: 18px; }
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro { margin-bottom: 0; }
#step1.language-summary-active #standardSourceCard .standard-source-spotify { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
@media (min-width: 900px) {
  #step1.language-summary-active #standardSourceCard .standard-source-spotify { margin-top: 8px; }
}
#step1.language-summary-active #standardSourceCard .standard-source-spotify:empty { display: none; }
#step1.language-summary-active #standardSourceCard .standard-source-spotify .spotify-status { margin: 0; }

/* Tutorial on a phone: tutorial.js scales the card to fit between the summary
   and the coach sheet; the box it leaves behind shrinks with it. The face
   title ("The back of the card —") is dropped, since the coach already says
   which side is showing, and the summary sits closer to the top bar. */
@media (max-width: 700px) {
    #cardTutorialStage .card-replica {
        transform: scale(var(--replica-card-scale, 1));
        transform-origin: top center;
        margin-bottom: calc(var(--replica-card-h, 480px) * (var(--replica-card-scale, 1) - 1));
    }
    .card-tutorial-blurb .card-tutorial-lede { display: none; }
    .card-tutorial-topbar { row-gap: 6px; }
}

/* Tutorial on desktop: the notes are walked one at a time. All stay on show;
   the current one is lit (its element on the card is ringed) and the rest
   step back. Back / count / Next sit under the card. */
.card-tutorial-desktop-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}
.card-tutorial-desktop-actions[hidden] { display: none; }
.card-tutorial-desktop-actions .card-tutorial-continue { margin-top: 0; }
.card-tutorial-desktop-actions .card-tutorial-continue[hidden] { display: none; }
.card-tutorial-desktop-progress {
    min-width: 82px;
    color: var(--text-secondary);
    font: 600 17px/1.2 var(--font-reading);
    letter-spacing: 0.02em;
    text-align: center;
}
@media (min-width: 701px) {
    .card-tutorial-note { cursor: pointer; padding: 14px 16px; }
    .card-tutorial-note strong { font-size: 19px; margin-bottom: 6px; }
    .card-tutorial-note span:not(.card-tutorial-note-num):not(.card-tutorial-action-hint) {
        font-size: 16px;
        line-height: 1.5;
        color: var(--text-secondary);
    }
    .card-tutorial-action-hint { font-size: 14px; }
    .card-tutorial-desktop-actions .card-tutorial-continue {
        padding: 13px 28px;
        font-size: 18px;
        min-height: 50px;
    }
    .card-tutorial-note:not(.is-active) { opacity: 0.82; }
    .card-tutorial-note:not(.is-active):hover { opacity: 1; }
    .card-tutorial-note { transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease; }
}

/* ===== Settings → Your words: one row pattern =====
   Every item is a row: its name, one line on what it does, and the action on
   the right as a small pill. Import and export lead and carry the accent;
   Saved words is the same row with its list beneath. */
#settingsModal .settings-words-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 13px 0;
  border: 0; border-top: 1px solid var(--border-color);
  background: transparent; color: var(--text-primary); text-align: left;
}
#settingsModal .settings-pane > .settings-words-row:first-of-type { border-top: 0; }
#settingsModal .settings-words-row > span:first-child { min-width: 0; }
#settingsModal .settings-words-row strong,
#settingsModal .settings-words-row small { display: block; }
#settingsModal .settings-words-row strong { font-size: 13px; }
#settingsModal .settings-words-row small { margin-top: 3px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
#settingsModal .settings-words-action,
#settingsModal .settings-link-row.settings-words-row > span.settings-words-action {
  flex: none; padding: 7px 13px;
  border: 1px solid var(--border-color); border-radius: 999px;
  background: var(--bg-tertiary); color: var(--text-primary);
  font: 650 12px/1 var(--font-reading); text-transform: none; letter-spacing: 0; cursor: pointer;
}
#settingsModal .settings-link-row.settings-words-row.is-primary > span.settings-words-action {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}
#settingsModal button.settings-words-row:hover .settings-words-action { border-color: var(--accent-primary); }
#settingsModal button.settings-words-row:disabled { cursor: not-allowed; }
#settingsModal button.settings-words-row:disabled .settings-words-action { opacity: .45; }
#settingsModal .settings-words-action[hidden] { display: none; }
#settingsModal .settings-words-status { margin: 0; }
#settingsModal .settings-words-status:empty { display: none; }
#settingsModal .settings-words-status:not(:empty) { margin: -4px 0 10px; }
#settingsModal .settings-words-saved { border-top: 1px solid var(--border-color); }
#settingsModal .settings-words-saved-head { border-top: 0; }
#settingsModal .settings-words-saved-list { padding: 0 0 10px; }
#settingsModal .settings-words-saved-list .saved-words-empty { margin: 0; color: var(--text-muted); font-size: 12px; }
#settingsModal .settings-words-saved-list .extras-list { margin: 0; }
#settingsModal .settings-words-row small.settings-words-note { color: var(--text-secondary); }
#settingsModal .settings-words-row small.settings-words-note:empty { display: none; }

/* Tutorial: after a short pause the Next button gets a strong amber ring so a
   first-time reader sees how the tour moves on (tutorial.js adds
   .is-hinting). */
@keyframes card-tutorial-next-hint {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-amber) 45%, transparent), 0 0 16px color-mix(in srgb, var(--accent-amber) 25%, transparent); }
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-amber) 65%, transparent), 0 0 30px color-mix(in srgb, var(--accent-amber) 45%, transparent); }
}
#cardTutorialContinue.is-hinting,
#cardTutorialMobileNext.is-hinting {
    outline: 2px solid var(--accent-amber);
    outline-offset: 3px;
    animation: card-tutorial-next-hint 1.6s ease-in-out infinite;
}
#cardTutorialContinue.is-hinting:hover,
#cardTutorialMobileNext.is-hinting:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
    #cardTutorialContinue.is-hinting,
    #cardTutorialMobileNext.is-hinting { animation: none; }
}

/* Front lemma/POS map, ~10% larger. A bare POS pill stands on its own; a
   "POS from x" pair keeps its capsule so the "from x" plainly belongs to the
   pill beside it and not to a neighbour. */
.card-front .card-pos-list.is-lemma-map .front-lemma-pair {
  zoom: 1.1;
}
.card-front .card-pos-list.is-lemma-map .front-lemma-pair.is-pos-only {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
}

/* "Flashcard 1 of 2": plain text directly under the lemma/POS pills,
   tappable for a short explanation. */
.card-pos-list .split-card-note {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  margin-top: -4px;
  font: 650 15.5px/1.2 var(--font-reading);
  pointer-events: auto;
}
.split-card-note-toggle {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.split-card-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(280px, 80vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: var(--text-secondary);
  font: 500 13.5px/1.45 var(--font-reading);
  text-align: left;
}
.split-card-tip[hidden] { display: none; }

/* Senses that would need scrolling fold their sub-rows (collapseSubsensesToFit):
   every sense but the current one shows only its main row. */
.meanings-scroll.collapse-subsenses .meaning-row-group:not(.selected) .sense-cue-group { display: none !important; }

/* Give source annotations one complete box instead of outlining an inline
   wrapper's line fragment beside a taller icon. */
#cardTutorialStage .example-song-credit {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
#cardTutorialStage .example-source-chip.is-annotation-active {
    outline-offset: 5px;
    border-radius: 8px;
}
@media (min-width: 701px) {
    #cardTutorialContinue {
        min-width: 112px;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 750;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    }
    #cardTutorialStage .card-details { gap: 12px; }
}

#cardTutorialStage .example-credit-start:has(.example-source-chip),
#cardTutorialStage .example-song-credit:has(.example-source-chip) {
    overflow: visible;
}

/* "N rarer senses" under a lone, non-Dominant sense (addRarerSensesRow). */
.rarer-senses-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 2px 0 4px;
  padding: 8px 12px;
  border: 1px dashed color-mix(in srgb, var(--border-color) 90%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: 600 14px/1.2 var(--font-reading);
  text-align: left;
  cursor: pointer;
}
.rarer-senses-row:hover { color: var(--text-primary); }

/* Main menu section headers: the title sits as close to the space above it as
   to its box below (it had ~30px above, ~22px below). Practice errors uses
   the same header and surface as Choose level and Choose a set. */
#step2,
#step4,
#reviewDeckSection.review-deck-step { padding-top: 2px; }
#reviewDeckSection.review-deck-step {
  padding-right: 2px;
  padding-bottom: 4px;
  padding-left: 2px;
  border: 0;
  background: transparent;
}
#reviewDeckSection > .step-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 4px;
}
#reviewDeckSection > .step-header > .step-title-trigger { grid-column: 2; justify-self: center; }
#reviewDeckBody { margin: 0; }
@media (max-width: 767px) {
  #reviewDeckSection.review-deck-step { padding-right: 0; padding-left: 0; }
  #reviewDeckSection > .step-header { padding: 0; }
}

/* "Flashcard 1 of 2": its own line under side-by-side pills; beside them,
   centred on the pair, when the pills stack (is-split-stacked). */
.card-front .card-pos-list.is-split-deck-map > .split-card-note {
  flex: 1 0 100%;
  text-align: center;
}
.card-front .card-pos-list.is-split-deck-map.is-split-stacked {
  display: grid !important;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
}
.card-front .card-pos-list.is-split-stacked > .front-lemma-pair { grid-column: 1; justify-self: center; }
.card-front .card-pos-list.is-split-stacked > .split-card-note {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 7.5em;
  margin: 0;
  text-align: left;
  white-space: normal;
}
.split-card-note-count { white-space: nowrap; }

/* Quick practice on the setup screen: the Practice amber of the set legend,
   not the error red, and large enough to read as the section's action. */
#reviewDeckBody .study-set-review {
  min-width: 112px;
  padding: 10px 20px;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-tertiary));
  color: var(--text-primary);
  font: 750 17px/1.2 var(--font-emphasis);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
#reviewDeckBody .study-set-review:not([disabled]):hover {
  border-color: color-mix(in srgb, var(--warning) 75%, var(--border-color));
  background: color-mix(in srgb, var(--warning) 16%, var(--bg-tertiary));
}

/* Rarer uses: every sense at once, examples folded behind a small toggle. */
.rare-use-examples { margin-top: 4px; }
.rare-use-examples > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: var(--text-muted);
  font: 600 12.5px/1.3 var(--font-reading);
  cursor: pointer;
  list-style: none;
}
.rare-use-examples > summary::-webkit-details-marker { display: none; }
.rare-use-examples > summary::before { content: '›'; display: inline-block; transition: transform .15s ease; }
.rare-use-examples[open] > summary::before { transform: rotate(90deg); }
.rare-use-examples > summary:hover { color: var(--text-primary); }

/* The "or" between Everyday speech and Your music is the point of the screen:
   one choice of two. A clear round badge on a stronger rule, in both the
   stacked (phone) and side-by-side (wide) layouts. */
#step1.language-summary-active #standardSourceCard .standard-source-or { gap: 14px; margin: 6px 0; }
#step1.language-summary-active #standardSourceCard .standard-source-or > b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: 800 13px/1 var(--font-emphasis);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#step1.language-summary-active #standardSourceCard .standard-source-or::before,
#step1.language-summary-active #standardSourceCard .standard-source-or::after {
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
}
@media (min-width: 900px) {
  #step1.language-summary-active #standardSourceCard .standard-source-or { margin: 0; align-items: center; }
}

/* A grouped sense's meter sits at the row's right edge (pinned there like
   every row's, see `.meaning-row > .pct-column`), level with the sense line
   rather than its sub-rows: centred when the gloss stands beside the
   sub-rows, at the top when the gloss stacks above them. */
.meaning-row-group:has(> .group-card-body:is(.has-long-shared, .is-stacked)) > .pct-column--group {
  top: 10px;
  transform: none;
}
@container sense-row (max-width: 420px) {
  .meaning-row-group:has(> .group-card-body.has-long-context) > .pct-column--group {
    top: 10px;
    transform: none;
  }
}
/* Sub-rows with their own meters: while folded, one total stands in for them. */
.pct-column .pct-group-total { display: none; }
.meanings-scroll.collapse-subsenses .meaning-row-group:not(.selected) .pct-column .sense-prominence-cell { display: none !important; }
.meanings-scroll.collapse-subsenses .meaning-row-group:not(.selected) .pct-column .pct-group-total { display: flex; }

/* Keep the tutorial card compact while retaining its readable cue areas. */
#cardTutorialStage .card-back { padding-top: 16px; padding-bottom: 14px; }
#cardTutorialStage .sense-cue-area { padding: 4px 8px; }

/* Commonness lives in the section head (the sense row): open or folded it
   shows the sense's total, pushed to the right before the chevron. A section
   with one sense row does not repeat it on that row. */
.pos-collapsible.is-open .pos-section-head > .sense-prominence-badge,
.pos-collapsible.is-open .pos-section-head > .pos-pill-pct { margin-left: auto; }
.pos-collapsible.is-single-sense > .meaning-pos-rows > .meaning-row > .pct-column,
.pos-collapsible.is-single-sense > .meaning-pos-rows > .meaning-row > .sense-prominence-badge { display: none !important; }

/* The section-head badge anchors its own explanation (it sat static, so the
   label opened outside the card), and pointer devices see it on hover too. */
.pos-section-head .sense-prominence-badge { position: relative; }
@media (hover: hover) {
  .sense-prominence-badge:hover .sense-prominence-detail { display: block; }
}
/* Every row in an open section has its own meter: the head drops its total. */
.pos-collapsible.is-open.rows-carry-meters > .pos-section-head > .sense-prominence-badge { display: none; }

/* Smart Skip page tidy: one flat background so the sticky title is not a dark
   bar on the glow, title centred and level with the close disc, and the
   advanced options behind one quiet row that opens a sheet. */
#fastModeModal:not([data-dock]) .fast-mode-page { background: var(--bg-primary, var(--bg-card)); }
#fastModeModal .smart-skip-body { padding-top: 0; gap: 14px; }
#fastModeModal:not([data-dock]) .smart-skip-body h2 {
  padding: calc(env(safe-area-inset-top, 0px) + 7px) 56px 7px;
  line-height: 40px;
  text-align: center;
  background: var(--bg-primary, var(--bg-card));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#fastModeModal:not([data-dock]) .smart-skip-level { top: calc(env(safe-area-inset-top, 0px) + 54px); }
.smart-skip-body .smart-skip-more-options {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 13px 12px 13px 14px;
  box-shadow: 0 -1px 0 var(--border-color);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13.5px;
  text-align: left;
}
.smart-skip-more-options > span:first-child { flex: 1; }
.smart-skip-more-state { color: var(--text-secondary); font-size: 12.5px; }
.smart-skip-more-options svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.6; }
.smart-skip-more-card {
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 18px 16px 16px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: smart-skip-preview-in 0.16s ease-out;
}
.smart-skip-more-card:focus { outline: none; }
.smart-skip-more-head h3 { margin: 0 0 4px; font: 700 17px/1.2 var(--font-emphasis); }
.smart-skip-more-head p { margin: 0; color: var(--text-muted); font: 400 13px/1.45 var(--font-reading); }
.smart-skip-more-card .smart-skip-shortcuts { border-color: var(--border-light); background: transparent; }

/* Each header owns the whole gap between surfaces, with equal space on
   either side of its title. Section margins must not add extra space above. */
#setupPanel > #step1 { margin-bottom: 0; }
#step2, #step4, #reviewDeckSection.review-deck-step { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
#step2 > .step-header,
#step4 > .step-header,
#reviewDeckSection > .step-header { margin: 0; padding: 8px 4px; }
#step2 > .step-header > .step-title-trigger,
#step4 > .step-header > .step-title-trigger,
#reviewDeckSection > .step-header > .step-title-trigger { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }

/* Landing page, dark theme: boxes are the darkest surface and the page behind
   them is lifted a step, so text sits on near-black and the boxes read as
   inset wells rather than grey slabs. */
:root:not([data-theme="light"]) body:has(#setupPanel:not(.hidden)) {
  --bg-primary: #151c25;
  background-color: #151c25;
}
:root:not([data-theme="light"]) #setupPanel {
  --bg-card: #06090d;
  --bg-card-hover: #0d1218;
  --bg-tertiary: #090d12;
  --border-color: #2a3542;
}

/* Smart Skip: vertical room. The title sits close to the first box, and the
   "Skipped words" label shares a line with its menu, in the menu's own font. */
#fastModeModal .smart-skip-body { gap: 8px; }
#fastModeModal:not([data-dock]) .smart-skip-body h2 { padding-bottom: 0; }
#fastModeModal .smart-skip-words { gap: 6px; }
.smart-skip-toolbar { gap: 10px; }
.smart-skip-toolbar .smart-skip-label {
  flex: none;
  color: var(--text-primary);
  font: 600 14px/1.1 var(--font-reading);
  letter-spacing: 0;
  text-transform: none;
}

/* Smart Skip list: one run of rows in frequency order. The level bands are
   gone; each row ends in its rank, a narrow right-aligned number. On a phone
   the category tag (only shown under "All skipped") gives way to it. */
.smart-skip-row { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto auto; }
.smart-skip-row--lemma { grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr) auto; }
.smart-skip-row .smart-skip-tag:empty { display: none; }
.smart-skip-rank {
  min-width: 2.6ch;
  text-align: right;
  color: var(--text-muted);
  font: 500 12px/1 var(--font-reading);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.smart-skip-group-rows > li:first-child > .smart-skip-row { border-top: 1px solid var(--border-color); }
.smart-skip-list > .smart-skip-group:first-child > .smart-skip-group-rows > li:first-child > .smart-skip-row { border-top: 0; }
@media (max-width: 520px) {
  .smart-skip-row { column-gap: 8px; padding: 0 12px; }
  .smart-skip-row .smart-skip-tag { display: none; }
}

/* Smart Skip table: a header row (flags name the language of each column) and
   columns that line up with it. Rank and Type show on desktop only; a phone
   keeps the two word columns (and a forms count for combined forms). */
.smart-skip-table { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) 56px; }
.smart-skip-table.has-tag { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) 96px 56px; }
.smart-skip-table[data-cat="lemma"] { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 56px; }
.smart-skip-table .smart-skip-row,
.smart-skip-table .smart-skip-row--lemma,
.smart-skip-head { display: grid; grid-template-columns: var(--ss-cols); column-gap: 12px; align-items: center; padding: 0 14px; }
.smart-skip-head {
  height: 30px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font: 600 12px/1 var(--font-reading);
}
.smart-skip-head .ss-h-rank, .smart-skip-table .smart-skip-rank { text-align: right; }
.smart-skip-table:not(.has-tag):not([data-cat="lemma"]) .ss-h-tag,
.smart-skip-table:not(.has-tag) .smart-skip-tag { display: none; }
.smart-skip-table:not(.has-tag):not([data-cat="lemma"]) .smart-skip-head { grid-template-columns: var(--ss-cols); }
.smart-skip-nforms, .ss-h-nforms { display: none; }
.smart-skip-nforms { color: var(--text-muted); font: 500 12px/1 var(--font-reading); text-align: right; white-space: nowrap; }
.smart-skip-table .smart-skip-forms { text-align: left; }
.smart-skip-row .smart-skip-g { min-width: 0; }
@media (max-width: 600px) {
  .smart-skip-table,
  .smart-skip-table.has-tag { --ss-cols: minmax(0, 1fr) minmax(0, 1fr); }
  .smart-skip-table[data-cat="lemma"] { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .smart-skip-table .smart-skip-rank,
  .smart-skip-table .smart-skip-tag,
  .smart-skip-table .smart-skip-forms,
  .smart-skip-head .ss-h-rank,
  .smart-skip-head .ss-h-tag,
  .smart-skip-head .ss-h-forms { display: none !important; }
  .smart-skip-table .smart-skip-nforms, .smart-skip-head .ss-h-nforms { display: block; text-align: right; }
}
/* The header belongs to the card: the frame moves from the list to the table. */
.smart-skip-table { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); overflow: clip; }
.smart-skip-table > .smart-skip-list { border: 0; border-radius: 0; background: none; }
.smart-skip-table > .smart-skip-head { background: color-mix(in srgb, var(--bg-card) 88%, var(--text-primary) 12%); }

/* Combined forms open in place: every form as a chip, then a link to the card. */
.smart-skip-expand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 14px 12px; }
.smart-skip-expand[hidden] { display: none; }
.smart-skip-chip {
  padding: 4px 9px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 500 13px/1.2 var(--font-reading);
}
.smart-skip-expand-open {
  margin-left: auto;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--accent-primary);
  font: 700 12.5px/1 var(--font-reading);
  cursor: pointer;
}
.smart-skip-row--lemma[aria-expanded="true"] { background: var(--bg-card-hover); }
.smart-skip-forms .smart-skip-more { margin-left: 4px; }
.smart-skip-table .smart-skip-forms { text-overflow: clip; }

/* Smart Skip on a wide screen: two channels. Settings on the left and
   staying put while the word list scrolls on the right. Phones keep one
   column. */
@media (min-width: 900px) {
  #fastModeModal .smart-skip-body {
    max-width: 1080px;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  #fastModeModal .smart-skip-body > h2 { grid-column: 1 / -1; }
  #fastModeModal .smart-skip-body > .smart-skip-shortcuts {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
  }
  #fastModeModal .smart-skip-body > .smart-skip-words { grid-column: 2; grid-row: 2 / span 2; min-width: 0; }
  #fastModeModal .smart-skip-body > .fast-mode-admin-details { grid-column: 1; grid-row: 3; }
}

/* The column headers' flags already say the English column is the same word, so
   the "=" before an obvious look-alike's English is redundant in the table. */
.smart-skip-table .cognate-pair-eq { display: none !important; }

/* Smart Skip on desktop: larger, clearer type by default, and no "Bigger text"
   zoom on top of it (that setting is one page-wide zoom, so it is switched
   off for this page only). */
@media (min-width: 900px) {
  html[data-text-size="large"] body:has(#fastModeModal:not(.hidden)) { zoom: 1; }
  #fastModeModal .smart-skip-body { max-width: 1240px; grid-template-columns: 400px minmax(0, 1fr); column-gap: 32px; }
  #fastModeModal .smart-skip-body h2 { font-size: 30px; }
  .smart-skip-shortcut-row { min-height: 56px; }
  .smart-skip-shortcut-name { font-size: 16.5px; }
  .smart-skip-shortcut-name svg { width: 16px; height: 16px; }
  .smart-skip-shortcut-count { font-size: 14px; }
  #fastModeModal .smart-skip-shortcut-detail .fast-mode-explainer { font-size: 15px; line-height: 1.55; }
  .smart-skip-switch { width: 42px; height: 24px; }
  .smart-skip-switch::after { width: 18px; height: 18px; }
  .smart-skip-switch[aria-checked="true"]::after { transform: translateX(18px); }
  .smart-skip-body .smart-skip-more-options { font-size: 15px; padding: 16px 14px; }
  .smart-skip-toolbar .smart-skip-label { font-size: 17px; }
  .smart-skip-select-wrap select { font-size: 16px; padding: 12px 38px 12px 14px; }
  .smart-skip-head { height: 38px; font-size: 14px; }
  .smart-skip-row { height: 54px; }
  .smart-skip-w { font-size: 18px; }
  .smart-skip-g { font-size: 16.5px; }
  .smart-skip-rank { font-size: 14px; }
  .smart-skip-tag { font-size: 13.5px; }
  .smart-skip-forms { font-size: 15px; }
  .smart-skip-nforms { font-size: 14px; }
  .smart-skip-chip { font-size: 15px; padding: 5px 11px; }
  .smart-skip-expand-open { font-size: 14px; }
  .smart-skip-table { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) 72px; }
  .smart-skip-table.has-tag { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) 120px 72px; }
  .smart-skip-table[data-cat="lemma"] { --ss-cols: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 72px; }
  .smart-skip-more-card { width: min(520px, 100%); }
  .smart-skip-more-head h3 { font-size: 20px; }
  .smart-skip-more-head p { font-size: 15px; }
}

/* ---- Landing page clear-up ------------------------------------------------ */
/* The section headers supply the space after the top bar too. */
#topBar { margin-bottom: 0; }

/* 2. Tighter top bar and a thinner coloured ring. */
#topBar { padding: 6px 8px; }
#topBar .top-bar-header { min-height: 44px; gap: 8px; }
#topBar .learning-context-chip { min-height: 44px; padding: 4px 10px; }
#topBar .top-bar-icon-btn,
#topBar .gear-btn { width: 44px; height: 44px; flex: 0 0 44px; }
#topBar .top-bar-icon-btn svg,
#topBar .gear-btn svg { width: 24px; height: 24px; }
#topBar::before { padding: 1.5px; }
@media (max-width: 480px) {
  #topBar { padding: 5px 6px; }
  #topBar .top-bar-icon-btn,
  #topBar .gear-btn { width: 40px; height: 40px; flex: 0 0 40px; }
}

/* 3. The set colours are the legend: each count in the line under the dots
   carries its own swatch, so the separate legend is gone. */
.study-set-stat { font-weight: inherit; white-space: nowrap; }
.study-set-stat i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.study-set-stat i.is-known { background: color-mix(in srgb, var(--success) 58%, var(--bg-card)); }
.study-set-stat i.is-review { background: color-mix(in srgb, var(--warning) 66%, var(--bg-card)); }

.study-set-stat + .study-set-stat { margin-left: 12px; }
#step4 .study-set-current-copy span::before { content: none; margin: 0; }

/* ---- Source choice: summary, then two matching options -------------------
   One summary on top, then Everyday speech and Your music as twin cards built
   the same way (icon + name, description, a ruled "Best for" line), so the
   differences between them are the content, not the styling. */
#step1.language-summary-active #standardSourceCard .standard-source-choice-title { font-size: 22px; line-height: 1.2; }
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro p {
  color: var(--text-muted); font-size: 14px; line-height: 1.5;
}
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro {
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color);
}
#step1.language-summary-active #standardSourceCard .standard-source-choice-buttons { gap: 0; }
#step1.language-summary-active #standardSourceCard .choice-sheet-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 14px;
  grid-template-areas: "icon name tail" "desc desc desc" "best best best";
  grid-template-rows: auto auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  align-self: stretch;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-tertiary);
}
#step1.language-summary-active #standardSourceCard .choice-sheet-item:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
  background: var(--bg-card-hover);
}
#step1.language-summary-active #standardSourceCard .choice-sheet-icon { grid-area: icon; width: 38px; height: 38px; }
#step1.language-summary-active #standardSourceCard .choice-sheet-icon svg { width: 20px; height: 20px; }
#step1.language-summary-active #standardSourceCard .choice-sheet-copy { display: contents; }
#step1.language-summary-active #standardSourceCard .choice-sheet-copy strong { grid-area: name; font-size: 18px; }
#step1.language-summary-active #standardSourceCard .choice-sheet-copy small {
  grid-area: desc; color: var(--text-secondary); font-size: 14px; line-height: 1.45;
}
#step1.language-summary-active #standardSourceCard .choice-sheet-tail { grid-area: tail; }
#step1.language-summary-active #standardSourceCard .choice-sheet-bestfor {
  grid-area: best; align-self: end; margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
#step1.language-summary-active #standardSourceCard .standard-source-or { margin: 10px 0; }
#step1.language-summary-active #standardSourceCard .standard-source-or > b { width: 36px; height: 36px; font-size: 11px; }
#step1.language-summary-active #standardSourceCard .standard-source-spotify { padding-left: 0; margin-top: 12px; }
@media (min-width: 900px) {
  #step1.language-summary-active #standardSourceCard .choice-sheet-item { padding: 18px; }
  #step1.language-summary-active #standardSourceCard .standard-source-or { margin: 0; }
  #step1.language-summary-active #standardSourceCard .standard-source-spotify { margin-left: calc(50% + 18px); padding-left: 0; }
  /* Two lines of description in both cards, so the "Best for" rules line up. */
  #step1.language-summary-active #standardSourceCard .choice-sheet-copy small { min-height: 2.9em; }
}

/* The commonness meter is one ink in both themes: bars never take a colour
   from the sense's level (the number of filled bars is the scale). */
.sense-prominence-badge,
.sense-prominence-badge[class*="prominence-"],
:root[data-theme="light"] .sense-prominence-badge[class*="prominence-"] { color: var(--text-primary) !important; }
.sense-prominence-meter i { background: currentColor !important; }

/* The taper has to beat `.lsw-seg.filled:not(.selected)` (levels already
   passed), which was pinning those to a flat 62% and hiding the effect. */
/* Level Scrubber: chosen level is prominently framed with its own distinct capsule badge;
   non-selected levels dial cleanly without crowded scaling or overlapping numbers. */
.lsw-segments.lsw-scrubber {
  padding: 12px 50% 10px;
  gap: 10px;
  align-items: center;
}
.lsw-segments.lsw-scrubber .lsw-seg {
  position: relative;
  width: 52px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lsw-segments.lsw-scrubber .lsw-seg .lsw-seg-eyebrow { display: none; }
.lsw-segments.lsw-scrubber .lsw-seg .lsw-seg-num { display: block; line-height: 1; }

/* Non-selected levels fall off gently without extreme scale distortions */
.lsw-segments.lsw-scrubber .lsw-seg:not(.selected),
.lsw-segments.lsw-scrubber .lsw-seg.filled:not(.selected) {
  transform: scale(max(0.72, calc(1 - 0.09 * var(--dist, 3))));
  opacity: max(0.18, calc(0.85 - 0.22 * var(--dist, 3)));
  color: var(--text-muted);
}
.lsw-segments.lsw-scrubber .lsw-seg:not(.selected):hover,
.lsw-segments.lsw-scrubber .lsw-seg.filled:not(.selected):hover {
  opacity: 0.95;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* The chosen level: framed in its own glowing capsule badge */
.lsw-segments.lsw-scrubber .lsw-seg.selected {
  width: 74px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card, #111827));
  border: 2px solid var(--accent-primary);
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.35), 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--accent-primary);
  transform: scale(1.15);
  opacity: 1;
  z-index: 3;
}
.lsw-segments.lsw-scrubber .lsw-seg.selected .lsw-seg-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  line-height: 1;
  margin-bottom: 2px;
  opacity: 0.9;
}
.lsw-segments.lsw-scrubber .lsw-seg.selected .lsw-seg-num {
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  color: var(--accent-primary);
}

/* Scrubber level status dots */
.lsw-segments.lsw-scrubber .lsw-seg.is-complete::after,
.lsw-segments.lsw-scrubber .lsw-seg.has-progress:not(.is-complete)::after,
.lsw-segments.lsw-scrubber .lsw-seg.has-partial-progress:not(.is-complete)::after,
.lsw-segments.lsw-scrubber .lsw-seg.is-auto-complete::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lsw-segments.lsw-scrubber .lsw-seg.selected::after {
  bottom: 5px;
  width: 5px;
  height: 5px;
}

/* Green dot: 100% completed by study */
.lsw-segments.lsw-scrubber .lsw-seg.is-complete:not(.is-auto-complete)::after {
  background: var(--set-known, #22c55e);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.45);
}

/* Yellow dot: In-progress / has study activity */
.lsw-segments.lsw-scrubber .lsw-seg.has-progress:not(.is-complete)::after,
.lsw-segments.lsw-scrubber .lsw-seg.has-partial-progress:not(.is-complete)::after {
  background: var(--set-review, #f5b800);
  box-shadow: 0 0 4px rgba(245, 184, 0, 0.45);
}

/* Slate grey dot: Auto-completed / placed via initial estimate */
.lsw-segments.lsw-scrubber .lsw-seg.is-auto-complete::after {
  background: var(--set-skipped, #7b8797);
  box-shadow: 0 0 2px rgba(123, 135, 151, 0.35);
}

/* Readout line: words range centered & clean */
.lsw-readout {
  justify-content: center;
  font-size: 15px;
  gap: 4px 10px;
  padding: 2px 0;
}
.lsw-readout .lsw-range {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}
.lsw-readout .lsw-range strong {
  color: var(--text-primary);
  font-weight: 700;
}
.lsw-readout .lsw-deck-total {
  font-size: 0.88em;
  color: var(--text-muted);
}

/* Example words and inline coverage */
.lsw-examples {
  font-size: 14px;
  margin-top: 4px;
  gap: 3px;
}
.lsw-examples .lsw-freq-sentence {
  font-size: 13.5px;
  color: var(--text-secondary);
}
.lsw-examples .lsw-egs {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.45;
}
.lsw-coverage-inline {
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
}
.lsw-coverage-inline strong {
  color: var(--accent-primary);
  font-weight: 700;
}

/* The set's start button reads at the same size as Quick N. */
#step4 .range-btn-new.study-set-start { font: 750 17px/1.2 var(--font-emphasis); min-height: 54px; }

/* Set box type: bigger numbers on the pills and the set name; the counts
   line is lighter in weight and brighter in colour so it reads at a glance. */
#step4 .study-set-dot { font-size: 18px; font-weight: 700; height: 37px; }
#step4 .study-set-current-copy strong { font-size: 18px; }
#step4 .study-set-current-copy span { font-size: 14px; font-weight: 400; color: var(--text-primary); }
.study-set-stat { font-weight: 400; }

/* Set progress, light-on-dark: pale green (known), pale yellow (practice) and
   white for what is left, so the number reads in black on every segment. The
   swatches in the counts line use the same three colours. */
#step4 {
  --set-known: #22c55e;
  --set-review: #f5b800;
  --set-new: #ffffff;
}
#step4 .study-set-dot {
  background: linear-gradient(
    to right,
    var(--set-known) 0 var(--set-known-end),
    var(--set-review) var(--set-known-end) var(--set-review-end),
    var(--set-new) var(--set-review-end) 100%
  );
  color: #0b0f14;
}
#step4 .study-set-dot:hover:not(:disabled),
#step4 .study-set-dot.is-current { color: #0b0f14; }
.study-set-stat i.is-known { background: var(--set-known, #22c55e); }
.study-set-stat i.is-review { background: var(--set-review, #f5b800); }
.study-set-stat i.is-unseen { background: var(--set-new, #ffffff); }

/* The chosen set must be unmistakable: a thick accent ring set off from the
   pill by a dark gap, lifted and enlarged, with no pulse to wash it out. The
   other pills stay flat. */
#step4 .study-set-dot.is-current {
  animation: none;
  transform: none;
  border-color: var(--accent-primary);
  box-shadow:
    0 0 0 3px var(--bg-card),
    0 0 0 6px var(--accent-primary),
    0 8px 20px rgba(var(--accent-primary-rgb), 0.45);
  z-index: 2;
}
#step4 .study-set-dots { padding: 8px 6px 6px; }

/* Smart Skip row: the name and its switch read as the main control of the
   level box. Larger type, a larger and lighter "Recommended" badge, a larger
   switch, and the whole row tinted once it is on. */
.fast-track-hub-btn { min-height: 66px; gap: 14px; }
.fast-track-hub-btn .fast-mode-master-icon { width: 28px; height: 28px; stroke-width: 2; }
.fast-track-hub-copy { gap: 10px; flex-wrap: wrap; row-gap: 4px; }
.fast-track-hub-copy strong { font-size: 21px; font-weight: 800; }
.fast-track-hub-copy .streamline-rec-badge {
  font-size: 12px;
  padding: 4px 9px;
  color: color-mix(in srgb, var(--accent-primary) 62%, #fff);
  background: color-mix(in srgb, var(--accent-primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 50%, #fff 12%);
}
.fast-track-hub-meta small { font-size: 14px; color: var(--text-secondary); }
.fast-track-hub-chevron { font-size: 24px; }
.fast-track-hub-switch-cell { padding: 0 16px; }
.fast-track-hub-row .fast-mode-master-switch { width: 54px; height: 32px; }
.fast-track-hub-row .fast-mode-master-switch i { top: 4px; left: 4px; width: 24px; height: 24px; }
.fast-track-hub-row .fast-mode-master-switch.selected i { transform: translateX(22px); }
.fast-track-hub-row.is-on { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent-primary); }
@media (max-width: 767px) {
  .fast-track-hub-btn { min-height: 60px; gap: 10px; padding-left: 12px; }
  .fast-track-hub-copy strong { font-size: 19px; }
  #setupOptions .fast-track-hub-copy .streamline-rec-badge { font-size: 11px; padding: 3px 7px; }
  .fast-track-hub-switch-cell { padding: 0 12px; }
  .fast-track-hub-row .fast-mode-master-switch { width: 50px; height: 30px; }
  .fast-track-hub-row .fast-mode-master-switch i { width: 22px; height: 22px; }
  .fast-track-hub-row .fast-mode-master-switch.selected i { transform: translateX(20px); }
}

/* Smart Skip row, one control: the name with its badge, a state line under it
   (Off / On · N words skipped), the switch on the right and a "Details" cue on
   the way to the page. The Recommended pill is solid red with white text. */
.fast-track-hub-copy .streamline-rec-badge {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
.fast-track-hub-copy { row-gap: 2px; }
.fast-track-hub-state {
  flex-basis: 100%;
  order: 3;
  color: var(--text-secondary);
  font: 500 14px/1.2 var(--font-reading);
  font-variant-numeric: tabular-nums;
}
.fast-track-hub-row.is-on .fast-track-hub-state { color: var(--accent-primary); font-weight: 650; }
.fast-track-hub-meta small.fast-track-hub-details { display: inline; color: var(--text-muted); font: 500 13px/1 var(--font-reading); }
@container (max-width: 250px) { .fast-track-hub-meta small.fast-track-hub-details { display: none; } }

/* Set pills: no outline (the fills carry progress; only the chosen one is
   ringed) and a little more room between them. */
#step4 .study-set-dot,
#step4 .study-set-dot.is-partial,
#step4 .study-set-dot.is-complete { border-color: transparent; }
#step4 .study-set-dot:hover:not(:disabled):not(.is-current) { border-color: transparent; box-shadow: 0 0 0 2px var(--accent-primary); }
#step4 .study-set-dots { gap: 14px; }
#step4 .study-set-dot:hover:not(:disabled) { transform: none; }
/* Info icon in place of the "Details" word. */
.fast-track-hub-info { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The fill runs edge to edge now the outline is gone (otherwise the gradient
   tiles into the border area and leaves a white sliver on the left). */
#step4 .study-set-dot { background-origin: border-box; border-width: 0; }

/* Smart Skip row, slimmed for phones: no fast-forward icon, no chevron, no
   divider before the switch. The info icon is red, like the ones beside
   "Choose level" and "Choose a set", and is the one cue that the row opens a
   page. Name and badge share a line; the subtitle sits under them. The
   fast-forward icon returns on wide rows only (below). */
.fast-track-hub-btn { padding-left: 16px; }
.fast-track-hub-copy { flex-wrap: wrap; column-gap: 10px; }
.fast-track-hub-info { width: 22px; height: 22px; stroke: var(--accent-primary); }
.fast-track-hub-switch-cell { border-left: 0; padding-left: 4px; }
/* Wide rows only: a line of example words fills the middle, as the level
   box shows "e.g. casa, tan, dos". Phones never see it, so the row stays two
   lines there. */
.fast-track-hub-examples {
  display: none;
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font: 500 14px/1.3 var(--font-reading);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fast-track-hub-examples em { font-style: normal; color: var(--text-secondary); }
/* The fast-forward icon is a wide-row extra too: it anchors the row where
   there is room and is the first thing to go where there is not. */
.fast-track-hub-btn .fast-mode-master-icon { display: none; }
@container (min-width: 600px) {
  .fast-track-hub-btn .fast-mode-master-icon { display: block; }
  .fast-track-hub-copy { flex: none; }
  .fast-track-hub-examples:not(:empty) { display: block; }
}

/* The Smart Skip switch is drawn 50x30 but answers taps across the whole
   right-hand cell, so the target meets the 44px minimum without growing. */
.fast-track-hub-row .fast-mode-master-switch::before {
  content: '';
  position: absolute;
  inset: -10px -12px;
}

/* A short hands-on lesson, with an optional reference tour. */
#cardTutorialModal .card-tutorial-note:not(.is-active) .card-tutorial-note-copy { display: none; }
#cardTutorialModal .card-tutorial-note:not(.is-active) { cursor: default; opacity: .7; }
#cardTutorialModal .card-tutorial-note[role="button"] { cursor: pointer; }
#cardTutorialModal .card-tutorial-note:focus-visible { outline: 2px solid var(--accent-amber); }
#cardTutorialModal .card-tutorial-practice-success {
    display: block; margin-top: 8px; font-size: 15px; color: var(--accent-green);
}
.card-tutorial-lesson-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
#cardTutorialModal .card-tutorial-lesson-tools button {
    min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-light);
    border-radius: 10px; background: transparent; color: var(--text-secondary);
    font: 600 14px/1.3 var(--font-reading); cursor: pointer;
}
#cardTutorialModal .card-tutorial-lesson-tools button[hidden] { display: none; }
#cardTutorialContinue, #cardTutorialMobileNext {
    background: var(--accent-primary) !important; color: var(--accent-primary-text) !important;
    min-height: 44px; font-size: 16px;
}
#cardTutorialContinue:disabled, #cardTutorialMobileNext:disabled { opacity: .45; cursor: default; }
.card-tutorial-scroll-hint { display: none; }
#cardTutorialStage .meanings-scroll { flex: 0 1 auto; min-height: 72px; overflow-y: auto !important; overflow-x: hidden; max-height: none !important; }
#cardTutorialStage .card-details { height: 100%; overflow-y: auto; overflow-x: hidden; }
#cardTutorialStage .sentence { flex: 0 0 auto; max-height: none; overflow: visible; }
#cardTutorialStage .meaning-row { padding-left: 44px !important; }
#cardTutorialStage .sense-note-trigger { left: 2px; width: 44px; height: 44px; min-width: 44px; border: 0; background: transparent; }
#cardTutorialStage .sense-note-trigger > span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 50%; background: var(--bg-card); }
#cardTutorialStage .sense-prominence-badge { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#cardTutorialStage .meaning-row-body { padding-right: 48px !important; }
#cardTutorialStage .meaning-row .sense-cue-area { max-width: 100%; }
#cardTutorialStage .sentence[data-replica-cycle="1"] { cursor: pointer; }
body:has(#cardTutorialModal:not(.hidden), #tutorialIntroModal:not(.hidden)) #resumeLastSetCard { display: none !important; }
@media (max-width: 1180px) {
    #cardTutorialModal .card-tutorial-modal { height: 100dvh; max-height: 100dvh; }
    #cardTutorialBody {
        display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
        padding: 10px 10px max(10px, env(safe-area-inset-bottom)); min-height: 0; overflow: hidden;
    }
    #cardTutorialBody .card-tutorial-topbar { margin: 0; grid-template-columns: 1fr auto; gap: 8px; }
    #cardTutorialIntro { display: none; }
    #cardTutorialBody .card-tutorial-columns {
        display: block; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden;
        overscroll-behavior: contain; scrollbar-gutter: stable; padding: 6px 8px 12px;
    }
    #cardTutorialBody .card-tutorial-stage-col { display: block; width: 100%; max-width: 440px; margin: 0 auto; }
    #cardTutorialBody .card-tutorial-notes-left, #cardTutorialBody .card-tutorial-notes-right { display: none; }
    #cardTutorialBody .card-tutorial-stage-wrap { width: 100%; }
    #cardTutorialStage .card-replica { width: 100%; transform: none; margin-bottom: 0; }
    #cardTutorialBody .card-tutorial-stage-col > .card-tutorial-lesson-tools { display: none; }
    #cardTutorialStage .card-back { padding: 14px 10px; }
    #cardTutorialStage .card-details { gap: 10px; }
    #cardTutorialBody .card-tutorial-scroll-hint { display: none; margin: 0 0 10px; text-align: center; color: var(--text-secondary); font-size: 13px; }
    #cardTutorialMobileCoach:not([hidden]) {
        position: static; display: grid; grid-template-columns: 1fr; gap: 8px;
        padding: 12px; margin: 0; min-width: 0; max-height: none; animation: none;
        background: var(--bg-card); backdrop-filter: none; border: 1px solid var(--border-light); border-radius: 16px;
    }
    #cardTutorialMobileCoach .card-tutorial-mobile-progress { font: 600 12px/1.3 var(--font-reading); letter-spacing: 0; color: var(--text-secondary); text-transform: none; }
    #cardTutorialMobileCoach > strong { font-size: 18px; }
    #cardTutorialMobileCoach > p { margin: 0; font-size: 14px; line-height: 1.42; color: var(--text-secondary); grid-column: 1; }
    #cardTutorialMobileCoach .card-tutorial-mobile-actions { grid-column: 1; grid-row: auto; display: flex; gap: 8px; justify-content: space-between; }
    #cardTutorialMobileCoach .card-tutorial-mobile-actions button { min-height: 44px; min-width: 80px; padding: 8px 14px; border: 1px solid var(--border-light); border-radius: 999px; background: transparent; color: var(--text-secondary); font: 600 15px/1.2 var(--font-reading); }
    #cardTutorialMobileCoach .card-tutorial-lesson-tools { grid-column: 1; gap: 4px; justify-content: flex-start; }
    #cardTutorialMobileCoach .card-tutorial-lesson-tools button { padding: 4px 8px; font-size: 13px; }
    #cardTutorialStage .card-face { font-size: 16px; }
    #cardTutorialStage .sense-note-trigger.is-annotation-active { outline-offset: 0; }
}

/* Your music is one card: the option on top, Spotify as its footer, so the
   connect button reads as part of that choice rather than a stray pill under
   the page. The wrapper draws the card; the option inside it goes flat. */
#step1.language-summary-active #standardSourceCard .standard-source-music {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-tertiary);
  overflow: hidden;
  transition: border-color .16s ease;
}
#step1.language-summary-active #standardSourceCard .standard-source-music > .choice-sheet-item {
  flex: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#step1.language-summary-active #standardSourceCard .standard-source-music:has(> .choice-sheet-item:hover:not(:disabled)) {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
}
#step1.language-summary-active #standardSourceCard .standard-source-music > .choice-sheet-item:hover:not(:disabled) {
  border: 0;
}
#step1.language-summary-active #standardSourceCard .standard-source-music .standard-source-spotify {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}
#step1.language-summary-active #standardSourceCard .standard-source-music .spotify-status {
  display: flex;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, #1DB954 7%, transparent);
  color: var(--text-primary);
  font: 600 14px/1.2 var(--font-emphasis);
  text-align: left;
}
#step1.language-summary-active #standardSourceCard .standard-source-music button.spotify-status::after {
  content: '›';
  margin-left: auto;
  color: #1DB954;
  font-size: 20px;
  line-height: 1;
}
#step1.language-summary-active #standardSourceCard .standard-source-music button.spotify-status:hover {
  background: color-mix(in srgb, #1DB954 15%, transparent);
}
#step1.language-summary-active #standardSourceCard .standard-source-music .spotify-status:focus-visible { outline-offset: -2px; }
#step1.language-summary-active #standardSourceCard .standard-source-music .spotify-status.is-connected {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
}
@media (min-width: 900px) {
  #step1.language-summary-active #standardSourceCard .standard-source-music .standard-source-spotify { margin: 0; }
  #step1.language-summary-active #standardSourceCard .standard-source-music > .choice-sheet-item { padding: 18px; }
}
/* Legibility: the note under the title was muted grey; one step brighter. */
#step1.language-summary-active #standardSourceCard .standard-source-choice-intro p { color: var(--text-secondary); }
#step1.language-summary-active #standardSourceCard .standard-source-music .standard-source-spotify:empty { display: none; }
/* Side by side, the Spotify footer makes the music option shorter than the
   speech card, so "Best for" can no longer be pinned to each card's bottom
   and still line up. It follows the description instead; the description's
   two-line minimum keeps the two rules level. */
@media (min-width: 900px) {
  #step1.language-summary-active #standardSourceCard .choice-sheet-item { grid-template-rows: auto auto auto; align-content: start; }
  #step1.language-summary-active #standardSourceCard .choice-sheet-bestfor { align-self: start; }
}
/* The whole card is the button (and lights up on hover), so the chevron
   beside each name said nothing new; only Spotify's strip keeps an arrow.
   "Best for" sits right under the description at every width. */
#step1.language-summary-active #standardSourceCard .choice-sheet-tail { display: none; }
#step1.language-summary-active #standardSourceCard .choice-sheet-item { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "icon name" "desc desc" "best best"; grid-template-rows: auto auto auto; align-content: start; }
#step1.language-summary-active #standardSourceCard .choice-sheet-bestfor { align-self: start; }

/* Deck overview ring: when it shows how much speech is understood, the
   legend's card counts are plain numbers, not a key to the ring's colours. */
.app-loading-visual[data-measure="speech"] ~ .app-loading-ring-legend i { display: none; }
.app-loading-ring-centre span { max-width: 100px; line-height: 1.25; text-align: center; justify-self: center; }

/* End of a new-word set: the ring is the set's outcome, not a score. The
   known arc runs over a Practice-coloured track, so the two parts read as
   Known and Practice, the same colours as the loading screen and set dots. */
.deck-complete-score-container.is-outcome {
  --ring-known: color-mix(in srgb, var(--success) 66%, var(--bg-card));
  --ring-review: color-mix(in srgb, var(--warning) 72%, var(--bg-card));
}
.deck-complete-score-container.is-outcome .deck-score-ring-bg { stroke: var(--ring-review); }
.deck-complete-score-container.is-outcome .deck-score-ring-fill { stroke: var(--ring-known); stroke-linecap: butt; filter: none; }
.deck-complete-content:has(.is-outcome:not([hidden])) .incorrect-stat .deck-stat-badge,
.deck-complete-content:has(.is-outcome:not([hidden])) .incorrect-stat .deck-stat-label { color: var(--warning); }

/* Seek-bar thumb: a circle for "25", a pill for "25A" so the letter fits. */
.cbs-thumb { width: auto; min-width: 32px; padding: 0 6px; border-radius: 999px; box-sizing: border-box; }

/* Split words: "Card 1 of 2" sits on its own pill instead of a "Flashcard 1 of 2"
   line floating between the two, so the count can only mean that card. The
   active pill's count opens the "why two cards?" note; the companion pill is
   dimmed as before, its "Card 2" with it. Pills keep their order (1 left,
   2 right) on both cards, matching 25A / 25B on the seek bar. */
.split-pill-count {
  appearance: none;
  flex: none;
  margin-left: 2px;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--split-accent, 160, 160, 160), 0.18);
  color: rgb(var(--split-accent, 200, 200, 200));
  font: 750 12px/1 var(--font-reading);
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
}
button.split-pill-count { cursor: pointer; }
button.split-pill-count:focus-visible { outline: 2px solid rgb(var(--split-accent, 200, 200, 200)); outline-offset: 2px; }
.card-pos-list .split-card-note.is-tip-only { margin: 0; height: 0; padding: 0; }
.card-front .card-pos-list.is-split-stacked > .split-card-note.is-tip-only { grid-column: 1; grid-row: auto; }
.card-front .card-pos-list.is-split-deck-map.is-split-stacked { grid-template-columns: auto; }
.card-pos-list.is-lemma-map .front-lemma-pair.is-pos-only:has(.split-pill-count) { gap: 6px; padding-right: 6px; width: max-content; }
.card-pos-list.is-split-deck-map .split-pill-count { padding: 2px 6px; font-size: 11.5px; margin-left: 0; }
.card-pos-list.is-split-deck-map .front-lemma-pair { gap: 5px; }
.split-pill-count { white-space: nowrap; }

/* Compact desktop: use the width for the coach so the card can stay tall. */
@media (min-width: 701px) and (max-width: 1180px) {
    #cardTutorialBody { grid-template-columns: minmax(0, 1fr) minmax(230px, .65fr); grid-template-rows: auto minmax(0, 1fr); }
    #cardTutorialBody .card-tutorial-topbar { grid-column: 1 / -1; }
    #cardTutorialBody .card-tutorial-columns { grid-column: 1; grid-row: 2; }
    #cardTutorialMobileCoach:not([hidden]) { grid-column: 2; grid-row: 2; align-self: start; }
}

/* Size the tutorial from the window, preserving room for its navigation. */
#cardTutorialBody .card-tutorial-columns { max-width: 1800px; width: 100%; gap: clamp(16px, 2vw, 36px); }
@media (min-width: 1181px) {
    #cardTutorialBody { padding: 20px clamp(20px, 2.2vw, 44px); }
    #cardTutorialBody .card-tutorial-stage-wrap { width: var(--tutorial-card-width, 440px); }
    #cardTutorialStage .card-replica { width: 100%; }
}
@media (min-width: 701px) and (max-width: 1180px) {
    #cardTutorialBody .card-tutorial-stage-col { max-width: var(--tutorial-card-width, 440px); }
    #cardTutorialBody .card-tutorial-columns { padding-top: 6px; }
}

#cardTutorialModal { padding: 0; }

/* Budget card height inside the rendered tutorial, including text zoom. */
#cardTutorialModal .card-tutorial-modal { width: 100%; height: calc(100dvh / var(--ui-zoom, 1)); max-height: calc(100dvh / var(--ui-zoom, 1)); }
@media (min-width: 1181px) {
    #cardTutorialBody { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
    #cardTutorialBody .card-tutorial-columns { min-height: 0; height: 100%; }
    #cardTutorialBody .card-tutorial-notes { max-height: 100%; overflow-y: auto; }
}

/* Main page: let the chosen language, learner and level lead the panels. */
#topBar .learning-context-chip-copy strong { font-size: 23px; }
#topBar .top-bar-user-name { font-size: 22px; }
#topBar .top-bar-icon-btn,
#topBar .gear-btn { color: #fff; }
@media (max-width: 560px) {
  #topBar .learning-context-chip-copy strong { font-size: 20px; }
  #topBar .top-bar-user-name { font-size: 18px; }
}
@media (max-width: 400px) {
  #topBar .learning-context-chip-copy strong { font-size: 19px; }
}

/* Landing page, 2026-10-09: the set legend reads at the size of "Set 1" (a touch
   smaller on a phone so four counts still fit), the level readout's two halves
   share one size, and the level box's example words fill desktop width. */
#step4 .study-set-current-copy span { font-size: 16px; }
#step4 .study-set-current-copy { gap: 2px 12px; }
.study-set-stat + .study-set-stat { margin-left: 14px; }
.study-set-stat i { width: 12px; height: 12px; }
.study-set-stat i.is-skipped {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 4px);
}
.lsw-readout,
.lsw-readout .lsw-rank { font-size: 20px; }
.lsw-examples .lsw-eg-extra { display: none; }
@media (min-width: 760px) {
  #step4 .study-set-current-copy span { font-size: 18px; }
  .lsw-readout,
  .lsw-readout .lsw-rank { font-size: 22px; }
  .lsw-examples .lsw-eg-extra { display: inline; }
  .lsw-examples .lsw-egs { max-width: 92%; }
}
@media (max-width: 480px) {
  #step4 .study-set-current-copy span { font-size: 15px; }
  .study-set-stat + .study-set-stat { margin-left: 10px; }
  .study-set-stat i { margin-right: 5px; }
  .lsw-readout,
  .lsw-readout .lsw-rank { font-size: 18px; }
}

/* Smart Skip page and Advanced options sheet, 2026-10-09: the shortcuts sit in
   one bordered card with even rows, counts read as quiet pills, and the sheet's
   Done is a full-width button instead of a bare word. */
#fastModeModal .smart-skip-shortcuts {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--bg-card);
  overflow: hidden;
}
.smart-skip-shortcut-row { min-height: 54px; padding: 0 14px 0 16px; }
.smart-skip-shortcut-detail { padding: 0 16px 14px; }
.smart-skip-shortcut > .fast-mode-none { padding: 0 16px 14px; }
.smart-skip-shortcut-name { font-weight: 650; }
.smart-skip-shortcut-count:not(:empty) {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}
.smart-skip-more-card { gap: 16px; padding: 22px 20px 18px; border-radius: 18px; }
.smart-skip-more-head h3 { font-size: 19px; margin-bottom: 6px; }
.smart-skip-more-card .smart-skip-shortcuts {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  overflow: hidden;
}
.smart-skip-more-card .smart-skip-preview-actions { display: block; margin: 0; }
.smart-skip-more-card .smart-skip-preview-close {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-primary);
  color: #fff;
  font: 700 15px/1 var(--font-emphasis);
  cursor: pointer;
}
.smart-skip-more-card .smart-skip-preview-close:hover { filter: brightness(1.08); }
.smart-skip-body .smart-skip-more-options { padding: 15px 14px 15px 16px; font-size: 14px; color: var(--text-secondary); }

/* Frequency ranges identify each set; its number remains in the summary
   and accessible label, leaving room for five-digit ranks on small phones. */
#step4 .study-set-dot { container-type: inline-size; gap: 8px; padding: 6px; }
.study-set-dot .set-num { display: none; }
.study-set-dot .set-ranks { display: inline; white-space: nowrap; font-size: clamp(16px, 14cqi, 22px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 750; }

/* Skipped cards fill each set bar from the right in slate grey, so with Smart
   Skip on a set is already partly done before a card is studied. */
#step4 { --set-skipped: #7b8797; }
#step4 .study-set-dot {
  background: linear-gradient(
    to right,
    var(--set-known) 0 var(--set-known-end),
    var(--set-review) var(--set-known-end) var(--set-review-end),
    var(--set-new) var(--set-review-end) var(--set-new-end, 100%),
    var(--set-skipped) var(--set-new-end, 100%) 100%
  );
}
.study-set-stat i.is-skipped { background: var(--set-skipped, #7b8797); }

/* ===== Tutorial chapters and pages =====
   The chapters sit where the language label was, and open directly. Smart
   Skip and Speech or music are pages in the card's own box: a copy of the
   real control, so the amber ring points at what the learner will tap. */
.card-tutorial-sequence { min-width: 0; }
.card-tutorial-chapters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.card-tutorial-chapters::-webkit-scrollbar { display: none; }
.card-tutorial-chapter {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: 600 13px/1.2 var(--font-emphasis);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.card-tutorial-chapter:hover { color: var(--text-primary); border-color: var(--text-muted); }
.card-tutorial-chapter.is-current {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    color: var(--text-primary);
}
.card-tutorial-desktop-actions .card-tutorial-continue[hidden] { display: none; }

.tutorial-page {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 28px 24px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}
.tutorial-page .card-tutorial-anchored.is-annotation-active { border-radius: 12px; outline-offset: 5px; }
.tutorial-page-label {
    color: var(--text-muted);
    font: 700 11px/1.2 var(--font-data);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tutorial-page-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary);
}
.tutorial-page-skip-icon {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 1.8;
    stroke-linejoin: round;
}
.tutorial-page-switch-copy { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.tutorial-page-switch-copy strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font: 700 16px/1.2 var(--font-emphasis);
}
.tutorial-page-switch-copy small { color: var(--text-secondary); font: 500 13px/1.3 var(--font-reading); }
.tutorial-page-switch {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--accent-primary);
}
.tutorial-page-switch i {
    position: absolute;
    top: 3px;
    left: 17px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10141b;
}
.tutorial-page-example { display: grid; gap: 10px; padding: 4px; }
.tutorial-page-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tutorial-page-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tutorial-page-word {
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font: 600 15px/1.2 var(--font-reading);
}
.tutorial-page-gloss { color: var(--text-muted); font: 500 13px/1.2 var(--font-reading); }
.tutorial-page-arrow { color: var(--text-muted); }
.tutorial-page-result {
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-green) 16%, transparent);
    color: var(--accent-green);
    font: 700 13px/1.2 var(--font-reading);
}
.tutorial-page-result.is-skipped {
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-secondary);
}

.tutorial-page-topbar {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 50%, var(--border-light));
    border-radius: 12px;
    color: var(--text-primary);
    font: 700 16px/1.2 var(--font-emphasis);
}
.tutorial-page-chevron { color: var(--text-muted); }
.tutorial-page-sources { display: grid; gap: 8px; padding: 4px; }
.tutorial-page-source {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.tutorial-page-source.is-current {
    border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}
.tutorial-page-source-icon svg { display: block; width: 22px; height: 22px; stroke: var(--accent-primary); }
.tutorial-page-source-copy { display: grid; gap: 3px; min-width: 0; }
.tutorial-page-source-copy strong { color: var(--text-primary); font: 700 15px/1.2 var(--font-emphasis); }
.tutorial-page-source.is-current .tutorial-page-source-copy strong { color: var(--accent-primary); }
.tutorial-page-source-copy small { color: var(--text-secondary); font: 500 13px/1.35 var(--font-reading); }
.tutorial-page-source-tail { color: var(--text-muted); font-size: 18px; }
.tutorial-page-source.is-current .tutorial-page-source-tail { color: var(--accent-primary); }

@media (max-width: 700px) {
    .tutorial-page { gap: 16px; padding: 20px 16px; }
    .card-tutorial-chapters { gap: 4px; }
    .card-tutorial-chapter { padding: 6px 8px; font-size: 12px; }
}

/* Return to study is the main entry decision, including on phones. */
#resumeLastSetCard.resume-entry-modal {
  align-items: center !important;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)) !important;
}
#resumeLastSetCard .resume-entry-content {
  width: min(100%, 500px);
  max-width: 500px;
  max-height: calc(100dvh / var(--ui-zoom, 1) - 40px);
  overflow-y: auto;
  padding: clamp(24px, 5vw, 36px);
  margin: auto;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  text-align: center;
}
#resumeLastSetCard .resume-entry-header {
  text-align: center;
  margin-bottom: 22px;
}
#resumeLastSetCard h3#resumeEntryGreeting {
  margin: 0 0 6px;
  color: var(--text-primary);
  font: 700 clamp(26px, 6vw, 32px)/1.15 var(--font-reading);
  text-wrap: balance;
  text-align: center;
}
#resumeLastSetCard .resume-set-eyebrow {
  margin: 0;
  color: var(--text-secondary);
  font: 500 15px/1.4 var(--font-reading);
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
}
.resume-entry-summary {
  padding: 22px 20px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--bg-tertiary);
  text-align: center;
}
.resume-entry-summary > strong {
  display: block;
  color: var(--text-primary);
  font: 700 24px/1.3 var(--font-reading);
  letter-spacing: -0.01em;
}
#resumeLastSetCard #resumeEntrySet {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font: 600 17px/1.4 var(--font-reading);
}
#resumeLastSetCard .resume-entry-position {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font: 15px/1.4 var(--font-reading);
}
#resumeLastSetCard .resume-entry-position strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font: 700 22px/1.3 var(--font-reading);
  overflow-wrap: anywhere;
}
#resumeLastSetCard .resume-entry-actions {
  grid-template-columns: 1fr;
  margin-top: 24px;
  gap: 10px;
}
#resumeLastSetCard .resume-entry-actions button {
  min-height: 52px;
  font-size: 16px;
  border-radius: 14px;
}
#resumeLastSetCard .resume-entry-primary {
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  color: var(--bg-card);
  font-weight: 650;
  outline: none;
}
#resumeLastSetCard .resume-entry-primary:hover {
  opacity: 0.92;
}
#resumeLastSetCard .resume-entry-secondary {
  color: var(--text-primary);
}
#resumeLastSetCard .resume-entry-primary:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
#resumeLastSetCard .resume-entry-secondary:focus-visible {
  outline: 2px solid var(--border-color);
  outline-offset: 2px;
}

/* Settings use neutral surfaces and explicit selected states in both themes. */
#settingsModal .settings-pane-tabs {
  gap: 6px;
  padding: 5px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-tertiary);
  box-shadow: none;
}
#settingsModal .settings-pane-tab {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--text-secondary);
  font-size: 16px;
  letter-spacing: 0;
}
#settingsModal .settings-pane-tab.selected {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  outline: 1px solid var(--border-color);
}
#settingsModal .settings-default-row { padding: 20px 0; gap: 20px; }
#settingsModal .settings-row-label { color: var(--text-primary); font-size: 17px; line-height: 1.4; }
#settingsModal .settings-row-explanation,
#settingsModal .settings-compact-note { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
#settingsModal .settings-row-explanation { margin-top: 5px; max-width: 42ch; }
#settingsModal .settings-toggle { padding: 4px; background: var(--bg-tertiary); border: 1px solid var(--border-color); box-shadow: none; }
#settingsModal .settings-toggle .group-size-btn { flex: 1 0 auto; min-width: max-content; min-height: 40px; padding: 8px 14px; color: var(--text-secondary); font-size: 14px; }
#settingsModal .settings-toggle .group-size-btn.selected {
  background: var(--text-primary);
  color: var(--bg-card);
  box-shadow: none;
}
#settingsModal .settings-link-row { padding: 18px 0; }
#settingsModal .settings-link-row strong,
#settingsModal .settings-overview-footer .appearance-settings-copy strong { font-size: 17px; line-height: 1.4; }
#settingsModal .settings-link-row small { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
#settingsModal .settings-footer-link { font-size: 14px; padding: 10px 0; color: var(--text-secondary); }
#settingsModal button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
#settingsModal .settings-link-row:hover { background: var(--bg-tertiary); border-radius: 10px; }
@media (max-width: 600px) {
  #settingsModal .settings-pane-tab { padding: 10px 6px; font-size: 14px; }
  #settingsModal .settings-default-row { flex-wrap: wrap; gap: 12px; }
  #settingsModal .settings-row-label-block { flex: 1 1 180px; }
  #settingsModal .settings-toggle { flex-shrink: 0; }
}

/* Estimated placement is distinct from earned study progress. */
.level-btn.is-auto-complete::after {
    content: 'AUTO';
    height: auto;
    background: none;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 7px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    bottom: 3px;
}
.estimation-placement-options { display: grid; gap: 12px; max-width: 540px; margin: 0 auto 18px; }
.estimation-placement-choice {
    display: grid; gap: 7px; width: 100%; padding: 18px 20px; text-align: left;
    border: 1px solid var(--border-color); border-radius: 14px;
    background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
    font: inherit; line-height: 1.45;
}
.estimation-placement-choice:hover { border-color: var(--accent-secondary); }
.estimation-placement-choice:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.estimation-placement-choice strong { font-size: 18px; }
.estimation-placement-choice span { color: var(--text-secondary); font-size: 14px; }
.estimation-placement-choice .estimation-choice-label { color: var(--text-primary); font-weight: 600; }
#useEstimatedLevelBtn[hidden] { display: none; }

/* Meaning review is a centred dialog, independent of the shared sheets. */
#knowledgeOverviewModal {
    place-items: center;
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#knowledgeOverviewModal .knowledge-overview-sheet {
    box-sizing: border-box;
    width: min(580px, 100%);
    max-height: calc(calc(100dvh / var(--ui-zoom, 1)) - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    border: 1px solid var(--border-color, rgba(255,255,255,.13));
    border-radius: 20px;
    animation: meaningReviewFadeIn 150ms ease-out both;
}
#knowledgeOverviewModal.is-closing .knowledge-overview-sheet {
    animation: meaningReviewFadeOut 150ms ease-in both;
}
#knowledgeOverviewModal .knowledge-overview-header {
    align-items: flex-start;
    flex-shrink: 0;
    padding: 16px;
}
#knowledgeOverviewModal .knowledge-overview-hint {
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}
#knowledgeOverviewModal .knowledge-overview-close { flex-shrink: 0; }
#knowledgeOverviewModal .knowledge-overview-summary { display: none; }
#knowledgeOverviewModal .knowledge-overview-list {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}
#knowledgeOverviewModal .knowledge-overview-row {
    cursor: pointer;
    min-height: 48px;
    gap: 12px;
}
#knowledgeOverviewModal .knowledge-overview-row.is-selected {
    border-color: color-mix(in srgb, var(--text-secondary) 35%, transparent);
    background: color-mix(in srgb, var(--text-secondary) 9%, transparent);
}
#knowledgeOverviewModal .knowledge-overview-focus {
    cursor: inherit;
    min-width: 0;
    flex: 1;
}
#knowledgeOverviewModal .knowledge-overview-copy { overflow-wrap: anywhere; }
#knowledgeOverviewModal .knowledge-overview-status { display: none; }
#knowledgeOverviewModal .knowledge-overview-checkbox {
    align-self: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0 12px 0 0;
    cursor: pointer;
    accent-color: var(--accent-green, #10b981);
}
#knowledgeOverviewModal .knowledge-overview-row:focus-within {
    outline: 2px solid var(--accent-green, #10b981);
    outline-offset: -2px;
}
@keyframes meaningReviewFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes meaningReviewFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    #knowledgeOverviewModal .knowledge-overview-sheet,
    #knowledgeOverviewModal.is-closing .knowledge-overview-sheet { animation: none; }
}

/* Staging environment badge & identification */
.env-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none;
    margin-right: 4px;
}
.env-badge.env-staging {
    background-color: #f59e0b;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.env-badge.env-staging:hover {
    background-color: #d97706;
}
.env-badge.env-staging:active {
    transform: scale(0.96);
}
.staging-env-panel {
    background: var(--card-bg, #1e293b);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.staging-env-pill {
    display: inline-block;
    background: #f59e0b;
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}