/* Lisp PWA — matches lispspeechclinic design language.
   Dark olive-gradient background, orange accents, Inter + Quicksand. */

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

:root {
    /* Brand accents */
    --accent:        #FFB300;
    --accent-dark:   #E65100;
    --accent-hover:  #E85600;
    --accent-tint:   rgba(255, 152, 0, 0.12);
    --accent-glow:   rgba(255, 152, 0, 0.35);

    /* Surfaces (dark) */
    --bg-black:      #1a1a1a;
    --bg-olive:      #5d5d00;
    --bg-olive-warm: #b09a1a;

    --surface-glass:        rgba(255, 255, 255, 0.06);
    --surface-glass-hover:  rgba(255, 255, 255, 0.10);
    --surface-glass-strong: rgba(0, 0, 0, 0.25);
    --border-glass:         rgba(255, 255, 255, 0.12);
    --border-glass-strong:  rgba(255, 255, 255, 0.20);

    /* Surfaces (light) */
    --card:        #ffffff;
    --card-soft:   #f8fafc;
    --card-warm:   #fff7ed;
    --card-warm-2: #ffedd5;

    /* Ink */
    --text:           #1a202c;
    --muted:          #718096;
    --ink-warm:       #431407;
    --ink-on-dark:    #ffffff;
    --ink-on-dark-2:  rgba(255, 255, 255, 0.85);
    --ink-on-dark-3:  rgba(255, 255, 255, 0.78);
    --ink-on-dark-4:  rgba(255, 255, 255, 0.55);

    /* Borders */
    --border:        #b8c89e;
    --border-strong: #2f855a;

    /* Semantic */
    --success:        #2f855a;
    --success-bg:     #f0fdf4;
    --success-border: #86efac;
    --success-ink:    #166534;
    --warn:           #d97706;
    --warn-bg:        #fffbeb;
    --warn-border:    #fcd34d;
    --warn-ink:       #92400e;
    --danger:         #dc2626;
    --danger-bg:      #fef2f2;
    --danger-border:  #fca5a5;
    --danger-ink:     #991b1b;
    --neutral-bg:     #f1f5f9;
    --neutral-ink:    #475569;

    /* Gradients */
    --grad-orange:    linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    --grad-warm:      linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    --grad-rep-meter: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #22c55e 100%);
    --grad-page: linear-gradient(to bottom,
        #1a1a1a 0%, #1c1c1c 8%, #1e1e00 15%, #252500 22%, #2d2d00 28%,
        #353500 35%, #3d3d00 42%, #454500 48%, #4d4d00 54%, #555500 60%,
        #5d5d00 66%, #656500 72%, #757510 78%, #858518 84%, #9a901a 90%,
        #b09a1a 94%, #1a1a1a 100%);

    /* Shadows */
    --shadow-nav:     0 4px 20px rgba(0, 0, 0, 0.30);
    --shadow-card:    0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-card-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
    --shadow-accent:  0 12px 30px rgba(255, 152, 0, 0.15);
    --shadow-toast:   0 10px 30px rgba(0, 0, 0, 0.30);

    /* Radii */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:   10px;
    --r-lg:   12px;
    --r-xl:   14px;
    --r-2xl:  16px;
    --r-pill: 99px;

    /* Spacing — fluid scale (min, fluid, max) for adaptive layouts 360–1400px */
    --s-1:  clamp(3px, 0.3vw, 4px);
    --s-2:  clamp(6px, 0.6vw, 8px);
    --s-3:  clamp(8px, 0.8vw, 10px);
    --s-4:  clamp(10px, 1vw, 12px);
    --s-5:  clamp(11px, 1.1vw, 14px);
    --s-6:  clamp(12px, 1.3vw, 16px);
    --s-7:  clamp(14px, 1.6vw, 20px);
    --s-8:  clamp(18px, 2vw, 24px);
    --s-9:  clamp(22px, 2.6vw, 32px);
    --s-10: clamp(28px, 3.2vw, 40px);

    /* Typography */
    --font-display: 'Quicksand', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type — fluid scale, no abrupt jumps across breakpoints */
    --fs-12: clamp(11px, 0.85vw, 12px);
    --fs-13: clamp(12px, 0.95vw, 13px);
    --fs-14: clamp(12px, 1vw,    14px);
    --fs-15: clamp(13px, 1.05vw, 15px);
    --fs-16: clamp(14px, 1.15vw, 16px);
    --fs-17: clamp(14px, 1.2vw,  17px);
    --fs-18: clamp(15px, 1.3vw,  18px);
    --fs-22: clamp(18px, 1.6vw,  22px);
    --fs-26: clamp(20px, 2vw,    26px);
    --fs-32: clamp(24px, 2.6vw,  32px);
    --fs-42: clamp(28px, 3.6vw,  42px);
    --fs-72: clamp(44px, 6vw,    72px);

    /* Motion */
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast:  0.15s;
    --dur-base:  0.20s;
    --dur-slow:  0.30s;
}

html, body { min-height: 100vh; overflow-x: hidden; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
    padding-top: 64px;
    padding-bottom: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Nav ---------- */
.navbar {
    background: #000;
    padding: 10px 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    width: min(1400px, 100% - clamp(16px, 4vw, 48px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-logo-img {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    display: block;
}
.nav-logo-text {
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.1px;
}

.nav-logo-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.nav-menu { display: flex; gap: 20px; list-style: none; align-items: center; }

.nav-menu a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
    padding: 6px 4px;
    border-radius: 6px;
}
.nav-menu a:hover { color: var(--accent); }
.nav-menu a.active { color: var(--accent); }

.install-btn {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    display: none;
}
.install-btn.show { display: inline-block; }

@media (max-width: 640px) {
    .nav-menu { gap: 12px; }
    .nav-menu a { font-size: 13px; padding: 4px 2px; }
    .nav-logo-text { font-size: 20px; }
}

/* Nav scales fluidly via clamp() — no abrupt breakpoint jump.
   Logo/text/menu use viewport-responsive sizing for smooth tablet→desktop transition. */
.navbar { padding: clamp(10px, 1.1vw, 12px) 0; }
.nav-container { min-height: clamp(44px, 4.5vw, 53px); }
.nav-logo { gap: clamp(10px, 1vw, 12px); }
.nav-logo-img { height: clamp(34px, 3.4vw, 41px) !important; max-height: clamp(34px, 3.4vw, 41px) !important; }
.nav-logo-text { font-size: clamp(20px, 2.2vw, 29px); }
.nav-logo-icon { width: clamp(28px, 2.8vw, 34px); height: clamp(28px, 2.8vw, 34px); font-size: clamp(14px, 1.3vw, 17px); border-radius: clamp(8px, 0.8vw, 10px); }
.nav-menu { gap: clamp(12px, 1.8vw, 24px); }
.nav-menu a { font-size: clamp(13px, 1.25vw, 17px); padding: clamp(4px, 0.5vw, 7px) clamp(2px, 0.4vw, 5px); }
.install-btn { padding: clamp(8px, 0.9vw, 10px) clamp(16px, 1.5vw, 19px) !important; font-size: clamp(13px, 1.2vw, 16px); border-radius: clamp(20px, 1.8vw, 24px); }
.nav-meta { gap: clamp(8px, 1vw, 12px); }
.nav-streak { padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px); font-size: clamp(12px, 1vw, 13px); gap: clamp(6px, 0.6vw, 7px); }
.nav-avatar { width: clamp(32px, 3vw, 38px); height: clamp(32px, 3vw, 38px); font-size: clamp(14px, 1.2vw, 16px); }

/* ---------- Layout ---------- */
.container { width: min(1400px, 100% - clamp(16px, 4vw, 48px)); margin: 0 auto; }

/* Adaptive overflow guards — prevent element bleed at any viewport */
img, video, svg, canvas, iframe { max-width: 100%; height: auto; }
.container > *, .dark-section > *, .layout-two-col > * { min-width: 0; }
table { max-width: 100%; }

.view { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Two-column layout for detail pages */
.layout-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
@media (min-width: 980px) {
    .layout-two-col { grid-template-columns: minmax(280px, 340px) 1fr; gap: 40px; align-items: start; }
    .layout-two-col > aside { position: sticky; top: 84px; }
}

/* Transparent "section" on the dark gradient — used instead of a white card */
.dark-section { margin-bottom: 40px; }
.dark-section h2 {
    font-family: 'Quicksand', sans-serif;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.dark-section h2 .muted-count {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
.dark-section .lead {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 20px;
    font-size: 15px;
    max-width: 800px;
}
.dark-section .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 14px;
}
.dark-section .section-head h2 { margin-bottom: 0; display: flex; align-items: center; gap: 12px; }

/* Sidebar card used in 2-col layouts (sits on dark gradient) */
.sidebar-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 24px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}
.sidebar-card h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sidebar-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-card li {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}
.sidebar-card li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.sidebar-card.mastery li::before { background: #4ade80; }
.sidebar-card.cues li::before { background: #fbbf24; }

/* Legend-style glass card (matches recording session instruction box) */
.legend-card {
    border: 1px solid #70704F;
    border-radius: 18px;
    padding: 16px 20px 20px;
    color: rgba(255, 255, 255, 0.9);
}
.legend-card legend {
    padding: 0 8px;
    margin: 0 0 0 6px;
}
.legend-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.legend-card li {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}
.legend-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.objectives-card { margin-bottom: 16px; }

/* ---------- Hero (dashboard) ---------- */
.hero {
    padding: 60px 0 40px;
    text-align: left;
}

.hero .badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 152, 0, 0.15);
    color: var(--accent);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.hero h1 {
    font-family: 'Quicksand', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
}
.hero p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin-bottom: 28px;
}

@media (max-width: 640px) {
    .hero h1 { font-size: 30px; }
    .hero p { font-size: 16px; }
}

/* ---------- Stats strip ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 32px;
}
.stats .stat { text-align: center; }
.stat-value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    color: var(--accent);
    display: block;
}
.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

@media (max-width: 640px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Section ---------- */
.section {
    background: #fff;
    color: var(--text);
    border-radius: 16px;
    padding: 40px 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}
.section h2 .muted-count {
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
    margin-left: 8px;
}
.section .lead {
    color: var(--muted);
    margin-bottom: 24px;
    font-size: 15px;
}

@media (max-width: 640px) {
    .section { padding: 28px 20px; border-radius: 12px; }
    .section h2 { font-size: 22px; }
}

/* ---------- Phase cards grid ---------- */
.phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.phase-card {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.phase-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 12px 30px rgba(255, 152, 0, 0.15);
}
.phase-card.completed { border-color: #2f855a; }
.phase-card.completed::after {
    content: '✓';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px; height: 26px;
    background: #2f855a;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.phase-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phase-number {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.phase-card h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.phase-weeks {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.phase-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.phase-progress-bar {
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    margin-top: auto;
    overflow: hidden;
}
.phase-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: 99px;
    transition: width 0.4s ease;
}
.phase-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 6px;
}
.phase-optional-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    background: rgba(255, 152, 0, 0.12);
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ---------- Phase detail ---------- */
.breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}
.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }

.phase-hero {
    padding: 30px 0 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.phase-hero .phase-number {
    width: 64px; height: 64px;
    font-size: 26px;
    border-radius: 16px;
}
.phase-hero h1 {
    font-family: 'Quicksand', sans-serif;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
}
.phase-hero .phase-weeks-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.phase-days-count {
    background: rgba(255,179,0,0.12);
    border: 1px solid rgba(255,179,0,0.35);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #FFB300;
    text-transform: none;
}

.objective-list, .mastery-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.objective-list li, .mastery-list li {
    padding: 10px 14px 10px 36px;
    background: #f8fafc;
    border-radius: 10px;
    position: relative;
    font-size: 15px;
    line-height: 1.55;
}
.objective-list li::before {
    content: '◆';
    position: absolute;
    left: 14px;
    top: 10px;
    color: var(--accent);
    font-size: 12px;
}
.mastery-list li::before {
    content: '✓';
    position: absolute;
    left: 14px;
    top: 10px;
    color: #2f855a;
    font-weight: 700;
}

.session-progress-wrap {
    margin-bottom: 32px;
}
.session-progress-track {
    height: 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 99px;
    overflow: hidden;
}
.session-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.drill-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.drill-group {
    background: transparent;
    border: 1px solid #70704F;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.drill-group[open] {
    background: transparent;
    border-color: rgba(255, 152, 0, 0.35);
}

.drill-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    list-style: none;
}
.drill-group-header::-webkit-details-marker { display: none; }
.drill-group-header h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 0;
    flex: 1;
}
.drill-group-n {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFB300;
    color: #000;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.drill-group-count {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
    border-radius: 99px;
}
.drill-group-chev {
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.drill-group[open] .drill-group-chev { transform: rotate(180deg); }

.drill-group-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 14px 14px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease;
}
.drill-group-body--open {
    max-height: 3000px;
}
.drill-group-info-body {
    gap: 12px;
    padding: 12px 18px 16px;
}

/* Clinical Slide transition: S → Z. translateX + opacity only. */
.drill-group-card {
    --c-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --c-dur: 400ms;
    --c-dist: 20px;
    transition: border-color var(--c-dur) var(--c-ease),
                box-shadow var(--c-dur) var(--c-ease);
}
.drill-group-card.is-swapping {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55),
                0 0 28px rgba(255, 255, 255, 0.35);
    animation: drill-card-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes drill-card-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}
.drill-group-card .drill-group-header,
.drill-group-card .drill-group-body {
    transition: transform var(--c-dur) var(--c-ease),
                opacity var(--c-dur) var(--c-ease);
    will-change: transform, opacity;
}
.drill-group-card.is-fading-out .drill-group-header,
.drill-group-card.is-fading-out .drill-group-body {
    transform: translateX(calc(var(--c-dist) * -1));
    opacity: 0;
}
.drill-group-card.is-fading-in .drill-group-header,
.drill-group-card.is-fading-in .drill-group-body {
    transform: translateX(var(--c-dist));
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .drill-group-card,
    .drill-group-card .drill-group-header,
    .drill-group-card .drill-group-body { transition: none; }
    .drill-group-card.is-swapping { animation: none; }
}

.lesson-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 36px 24px;
}
.lesson-complete-icon {
    color: #000;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
    margin-bottom: 4px;
}
.lesson-complete-title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.lesson-complete-sub {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    margin: 0 0 12px;
}
.lesson-complete .btn { min-width: 160px; }
.lesson-complete.is-fading-in {
    opacity: 0;
    transform: translateX(20px);
}
.lesson-complete {
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.drill-group-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 8px 0;
}
.drill-group-centered .drill-group-instr-list {
    text-align: left;
    display: inline-flex;
}
.drill-group-centered .drill-group-tips-list {
    text-align: left;
    display: inline-flex;
}
.drill-group-two-col {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
}
.drill-group-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.drill-group-right {
    flex: 0 0 280px;
    min-width: 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: 10%;
}
.drill-group-right:has(.timer-fieldset--with-spec) {
    flex: 0 0 420px;
    margin-right: 0;
}
.drill-group-right .timer-display {
    font-size: 64px;
}
.drill-group-right .rep-view {
    padding: 8px 0;
}
@media (max-width: 640px) {
    .drill-group-two-col { flex-direction: column; }
    .drill-group-right { flex: 1 1 auto; width: 100%; }
}
.drill-group-instructions {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.drill-group-tips { display: flex; flex-direction: column; gap: 8px; }
.drill-group-instr-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.drill-group-tips-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: #FFB300;
    margin: 0;
}
.drill-group-tips-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.drill-group-tips-list li {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    line-height: 1.6;
}

.drill-card {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.drill-card h3 { color: #fff; }
.drill-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.drill-card.completed {
    border-color: #2f855a;
    background: transparent;
}

.drill-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.drill-card-header h3 {
    font-size: 17px;
    font-weight: 700;
    flex: 1;
}
.drill-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--accent-dark);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
}
.drill-card p.drill-desc {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.drill-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background: #000;
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
}
.btn-accent:hover { filter: brightness(1.05); transform: translateY(-1px); }

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--border);
}
.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-danger {
    background: #fee2e2;
    color: #991b1b;
}
.btn-danger:hover { background: #fecaca; }

.btn-small { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn-start-white { background: #fff; color: #111; border: none; font-weight: 700; }
.btn-start-white:hover { background: #f0f0f0; transform: translateY(-1px); }
.btn-done { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.25); }
.btn-done:hover { background: rgba(255,255,255,0.2); }
.btn-done-active { background: rgba(47,133,90,0.35); color: #6ee7a0; border: 1.5px solid rgba(47,133,90,0.6); }
.btn-done-active:hover { background: rgba(47,133,90,0.5); }
.btn-mega {
    font-size: 17px;
    padding: 16px 34px;
    border-radius: 12px;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-locked { opacity: 0.5; cursor: not-allowed; }
.btn-locked:hover { transform: none; background: #fff; }

/* ---------- Drill practice view ---------- */
.practice-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
@media (min-width: 980px) {
    .practice-layout { grid-template-columns: 1fr minmax(300px, 360px); gap: 32px; align-items: start; }
    .practice-layout > .practice-side { position: sticky; top: 84px; }
}

.practice-card {
    background: transparent;
    color: #fff;
    border-radius: 16px;
    padding: 12px 44px 40px;
    margin-bottom: 0;
}
@media (max-width: 640px) {
    .practice-card { padding: 28px 22px; }
}

.practice-side > * { margin-bottom: 20px; }
.practice-side-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.9);
}
.practice-side-card h4 {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.drill-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    text-align: center;
    margin-top: 16px;
    margin-bottom: 4px;
    font-family: 'Quicksand', sans-serif;
}
.practice-card h1 {
    font-family: 'Quicksand', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.asmt-page-title { text-align: center; }
@media (max-width: 640px) {
    .asmt-page-title { text-align: left; }
}
.practice-instructions {
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    padding: 14px 20px 18px;
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}
.practice-instructions--center { text-align: left; }
.practice-instructions-legend {
    padding: 0 8px;
    margin: 0 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    font-family: 'Quicksand', sans-serif;
    text-align: left;
}
.practice-instructions-list {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: instr;
}
.practice-instructions-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    counter-increment: instr;
    text-align: left;
}
.practice-instructions-list li::before {
    content: counter(instr);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #1a1200;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
}

.timer-fieldset legend { text-align: left; }
.timer-fieldset { padding: 24px 40px 32px; min-width: 360px; }
.drill-group-right .timer-fieldset { min-width: 0; width: 100%; box-sizing: border-box; padding: 16px 20px 20px; }

/* ---------- Timed drill two-column layout ---------- */
.timed-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 24px;
}
.timed-row > .practice-instructions {
    grid-column: 1;
    width: fit-content;
    max-width: 260px;
    margin: 0;
}
.timed-main {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
@media (max-width: 640px) {
    .timed-row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .timed-row > .practice-instructions {
        max-width: 100%;
    }
    .timed-main { width: 100%; }
}

/* ---------- A/B Identification Drill ---------- */
.ab-drill {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 0;
}
.ab-progress {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.03em;
}
.ab-prompt {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.ab-word {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.02em;
}
.ab-play-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ab-play-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 16px;
    background: rgba(255,255,255,0.07);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    color: #fff;
}
.ab-play-btn:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}
.ab-play-btn:active { transform: scale(0.97); }
.ab-btn-label {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #f59e0b;
}
.ab-btn-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.ab-choose-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ab-choose-label {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.ab-choose-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ab-choose-btn {
    padding: 14px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ab-choose-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}
.ab-choose-btn:disabled { opacity: 0.5; cursor: default; }
.ab-feedback {
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    transition: background 0.2s;
}
.ab-feedback:empty { padding: 0; }
.ab-feedback--correct {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
}
.ab-feedback--wrong {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}
.ab-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    text-align: center;
}
.ab-complete-score {
    font-size: 52px;
    font-weight: 800;
    color: #f59e0b;
    line-height: 1;
}
.ab-complete-label {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
}
.ab-restart-btn {
    margin-top: 8px;
    padding: 12px 28px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 99px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ab-restart-btn:hover { background: rgba(255,255,255,0.18); }
.ab-empty {
    color: rgba(255,255,255,0.45);
    font-size: 14px;
    padding: 20px 0;
}
@keyframes ab-sparkle {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
    40%  { box-shadow: 0 0 0 12px rgba(74,222,128,0.35); }
    100% { box-shadow: 0 0 0 20px rgba(74,222,128,0); }
}
.ab-sparkle { animation: ab-sparkle 0.8s ease-out; }
@keyframes ab-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    40%     { transform: translateX(6px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}
.ab-shake { animation: ab-shake 0.5s ease-out; }

/* Assessment (phase-0 baseline) accent → teal. Two DECOUPLED themes:
   - Calibration (step0) + non-recording steps: LIGHT (white page, committed look).
   - Recording (step1): DARK #0B0C0E foundation.
   step1 is the only step containing .asmt-rec-wrapper, so :has() targets it. */
.practice-card[data-assessment] {
    --accent: #00E5FF;
    --accent-dark: #00C9C0;
}

/* ============ LIGHT theme — calibration + non-recording steps ============ */
.practice-card[data-assessment],
.practice-card[data-assessment] * {
    color: #000 !important;
}
.practice-card[data-assessment] [style*="color:#fff"],
.practice-card[data-assessment] [style*="color: #fff"],
.practice-card[data-assessment] [style*="color:#FFF"],
.practice-card[data-assessment] [style*="color: #FFF"],
.practice-card[data-assessment] [style*="color:white"],
.practice-card[data-assessment] [style*="color: white"] {
    color: #000 !important;
}
.practice-card[data-assessment] .inline-calib-fieldset {
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
}
.practice-card[data-assessment] .inline-calib-noise-card {
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 14px;
    background: rgba(0,0,0,0.015) !important;
}
.practice-card[data-assessment] .inline-calib-chip {
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(0,0,0,0.015) !important;
}
.practice-card[data-assessment] .inline-calib-begin-btn {
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
}
.practice-card[data-assessment] .inline-calib-meter-track {
    background: rgba(0,0,0,0.07) !important;
}
.practice-card[data-assessment] .asmt-btn-group .btn {
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important;
}

/* ================= DARK theme — recording step (step1) only ================= */
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) {
    background: #0B0C0E !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper),
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) * {
    color: #fff !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) [style*="color:#000"],
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) [style*="color: #000"],
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) [style*="color:black"],
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) [style*="color: black"] {
    color: #fff !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-instr-label,
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .drill-section-label {
    color: var(--accent) !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-word-sep {
    color: rgba(255,255,255,0.4) !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-record-label {
    color: rgba(255,255,255,0.5) !important;
}
/* recording section dissolves into the dark foundation — no nested box */
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-rec-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* HOW IT WORKS + NOTE: white cards on the page, left of the dark box */
.practice-card[data-assessment] .asmt-instr-box {
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-instr-box,
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-instr-box * {
    color: #000 !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-instr-box .asmt-instr-label {
    color: var(--accent) !important;
}
.practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) .asmt-instr-box .asmt-instr-num {
    color: #fff !important;
}
/* Desktop. The recording layout (narrow box shifted right to center the
   instruction-column pair) is scoped to the RECORDING step only — it's the only
   step containing .asmt-rec-wrapper. Calibration (step0) and other steps keep a
   normal full-width centered card. */
/* Desktop ≥1200px: instruction col fits left of 500px card without bleed.
   Below 1200px (incl. iPad Pro 1024), recording step stacks vertically — see tablet rule. */
@media (min-width: 1200px) {
    .practice-layout:has(.practice-card[data-assessment]) {
        max-width: 1180px !important;
    }
    .practice-card[data-assessment]:has(.asmt-step.active .asmt-rec-wrapper) {
        max-width: 500px !important;
        margin-left: calc((100% - 500px) / 2) !important;
        margin-right: 0 !important;
        position: relative !important;
    }
    .practice-card[data-assessment] .asmt-rec-wrapper {
        position: static !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
    .practice-card[data-assessment] .asmt-instr-col {
        right: calc(100% + 28px) !important;
        left: auto !important;
    }
}

/* Tablet centering wrapper (641–1199px): cap layout width so stacked content
   sits centered in iPad/iPad Pro viewports. Stacking + legend-lift handled by
   the @media (max-width: 1199px) block above. */
@media (min-width: 641px) and (max-width: 1199px) {
    .practice-layout:has(.practice-card[data-assessment]) {
        max-width: min(760px, 100% - clamp(24px, 4vw, 48px)) !important;
        margin: 0 auto !important;
    }
}

/* Mobile (≤640px): center all assessment boxes + content to viewport.
   Tighter side padding + auto margins eliminate wasted side space. */
@media (max-width: 640px) {
    .practice-card[data-assessment] {
        padding: 16px clamp(10px, 3vw, 18px) 28px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .practice-card[data-assessment] .practice-instructions,
    .practice-card[data-assessment] .asmt-instr-box,
    .practice-card[data-assessment] .asmt-rec-section,
    .practice-card[data-assessment] .asmt-rec-wrapper,
    .practice-card[data-assessment] .asmt-btn-group,
    .practice-card[data-assessment] .timer-fieldset,
    .practice-card[data-assessment] .inline-calib-fieldset,
    .practice-card[data-assessment] .inline-calib-noise-card,
    .practice-card[data-assessment] .baseline-capture,
    .practice-card[data-assessment] .asmt-step,
    .practice-card[data-assessment] .asmt-instr-col {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: min(560px, 100%) !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    .practice-card[data-assessment] .practice-instructions {
        width: auto !important;
    }
    .practice-card[data-assessment] .asmt-btn-group {
        justify-content: center !important;
    }
    /* Layout wrapper: full viewport minus tiny gutter, centered */
    .practice-layout:has(.practice-card[data-assessment]) {
        max-width: 100% !important;
        padding-left: clamp(6px, 2vw, 14px);
        padding-right: clamp(6px, 2vw, 14px);
        box-sizing: border-box;
    }
}

.baseline-capture {
    margin-bottom: 28px;
    padding: 20px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.baseline-capture-head { margin-bottom: 14px; }
.baseline-capture-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 6px;
}
.baseline-capture-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    margin: 0 0 6px;
}
.baseline-capture-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.6;
}
.baseline-capture-status {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.baseline-capture-phase {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-dark);
}
.baseline-capture-summary {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.baseline-capture-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 10px;
}
.baseline-capture-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border-radius: 999px;
}
.baseline-capture-note {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}
.baseline-phase-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.baseline-phase-pill {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.baseline-phase-pill.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-color: transparent;
}
.baseline-phase-pill.done {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
}
.baseline-word-checklist { margin-bottom: 0; }

.word-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.word-chip {
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.word-chip:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
    transform: translateY(-2px);
}
.word-chip.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    border-color: transparent;
}

.word-sets {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}
.word-set-group { display: flex; flex-direction: column; gap: 10px; }
.word-set-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.word-set-group .word-grid { margin-bottom: 0; }

.wordlist-sets-fieldset {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    width: 100%;
}
.wordlist-sets-fieldset .rep-view {
    padding: 12px 0 4px;
    gap: 6px;
}
.wordlist-sets-fieldset .rep-big-num {
    font-size: 64px;
}
.wordlist-sets-fieldset .rep-of {
    font-size: 16px;
}
.drill-group-right:has(.wordlist-sets-fieldset) {
    align-self: center;
}

.wordlist-sets-syllables {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 16px;
}
/* Assessment-style pill stack inside drills (current word + upcoming) */
.wordlist-sets-syllables:has(.drill-pill) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.asmt-active-pill.drill-pill { border-color: #00E5FF; }
.drill-pill .asmt-pill-timer { color: #00E5FF; }
.drill-pill .asmt-pill-word { cursor: pointer; transition: color 0.15s ease; }
.drill-pill .asmt-pill-word:hover { color: #00E5FF; }
.asmt-context-word.tappable { cursor: pointer; transition: color 0.15s ease; }
.asmt-context-word.tappable:hover { color: #00E5FF; }
.wordlist-sets-syllables .word-chip {
    padding: 10px 16px;
    font-size: 15px;
    width: auto;
    flex: 0 0 auto;
}
.wordlist-sets-syllables .word-chip:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: none;
}
.wordlist-sentence {
    margin: 8px 0 16px;
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    color: #fff;
    letter-spacing: 0.2px;
}
.wordlist-sentence-word {
    cursor: pointer;
    transition: color 0.15s ease;
}
.wordlist-sentence-word:hover {
    color: #00E5FF;
}
.wordlist-sentence-word:active {
    transform: scale(0.98);
}
.wordlist-pair {
    margin: 6px 0;
    text-align: center;
    font-size: 22px;
    line-height: 1.4;
    color: #fff;
    cursor: pointer;
    transition: color 0.15s ease;
}
.wordlist-pair:hover {
    color: #00E5FF;
}
.wordlist-pair:active {
    transform: scale(0.98);
}

/* ---- carrier phrase frame ---- */
.carrier-frame {
    margin: 8px 0 28px;
    text-align: center;
    font-size: 24px;
    line-height: 2;
    color: #fff;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.carrier-slot {
    display: inline-block;
    min-width: 96px;
    margin: 0 8px;
    padding: 4px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 2px solid #00E5FF;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}
.carrier-slot:hover {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.4);
}
.carrier-slot:active {
    transform: scale(0.98);
}
.carrier-progress {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin: 4px 0 0;
    letter-spacing: 0.3px;
}
.carrier-queue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.carrier-chip {
    padding: 10px 18px;
    font-size: 15px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
}
.carrier-chip:hover {
    border-color: rgba(0, 229, 255, 0.4);
    color: #00E5FF;
}
.carrier-chip:active {
    transform: scale(0.98);
}
.carrier-chip.is-current {
    color: transparent;
    background: rgba(255, 255, 255, 0.06);
    border-style: dashed;
    cursor: default;
}
.carrier-chip.is-current:hover {
    color: transparent;
    border-color: rgba(255, 255, 255, 0.18);
}
.carrier-chip.is-done {
    opacity: 0.35;
}

.passage-box {
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 22px 24px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
    max-height: 50vh;
    overflow-y: auto;
}
.passage-fieldset {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 8px 18px 18px;
    margin: 18px 0 24px;
    background: transparent;
}
.passage-fieldset .passage-legend {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    background: #282800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
}
.passage-box--inset {
    border: none;
    background: transparent;
    padding: 6px 4px 0;
    margin: 0;
}
.passage-fieldset--phase-5 {
    margin-left: -14px;
    margin-right: -14px;
    box-sizing: border-box;
}
.drill-group-right:has(.passage-fieldset--phase-5) {
    width: 100%;
    max-width: none;
    overflow: visible;
}
.drill-group-right:has(.passage-fieldset) {
    flex: 2 1 0;
    width: auto;
    max-width: none;
    overflow: visible;
    margin-left: 0;
    margin-right: 24px;
}
.drill-group-left:has(~ .drill-group-right .passage-fieldset) {
    flex: 0 0 280px;
}
.passage-box .sibilant {
    color: inherit;
    font-weight: inherit;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* ---------- Checklist ---------- */
.checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    user-select: none;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.checklist-item:hover { border-color: var(--accent); }
.checklist-item.checked {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.35);
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.45);
}
.checklist-item .box {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 1px;
}
.checklist-item.checked .box {
    background: #2f855a;
    border-color: #2f855a;
}

/* ---------- Sound Inventory Assessment ---------- */
.asmt-wizard { max-width: 680px; margin: 0 auto; }

/* --- calibration step --- */
.asmt-calib-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #2dd4bf;
    text-align: center;
    margin-bottom: 6px;
}
.asmt-calib-heading {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    margin: 0 0 20px;
}
.asmt-calib-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}
.asmt-calib-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 12px;
}
.asmt-calib-db-value {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    font-feature-settings: 'tnum';
    margin-bottom: 16px;
    line-height: 1;
}
.asmt-calib-meter-track {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.10);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
}
.asmt-calib-meter-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(to right, #22c55e, #eab308, #ef4444);
    transition: width 0.08s linear;
}
.asmt-calib-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 16px;
}
.asmt-calib-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2dd4bf;
}
.asmt-calib-seq-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin-bottom: 12px;
}
.asmt-calib-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}
.asmt-calib-chip {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.asmt-calib-begin-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: #2dd4bf;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.asmt-calib-begin-btn:hover { background: #14b8a6; }

/* --- inline calibration card (phase overview) --- */
.inline-calib-fieldset {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 0 0 4px;
    margin: 0;
    background: transparent;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
.inline-calib-fieldset-legend {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent, #FFB300);
    padding: 0 8px;
    margin-left: 12px;
}
.inline-calib-card {
    padding: 14px 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.inline-calib-card .drill-card-header h3 { text-align: center; }
.inline-calib-noise-card {
    background: transparent;
    border: 0;
    padding: 14px 16px;
    margin-top: 12px;
}
.inline-calib-noise-card.calibrated { border: 0; }
.inline-calib-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
    text-align: center;
}
.inline-calib-db {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    font-feature-settings: 'tnum';
    line-height: 1;
    margin-bottom: 12px;
    text-align: center;
}
.inline-calib-meter-track {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.10);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 4px;
}
.inline-calib-meter-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(to right, #22c55e, #eab308, #ef4444);
    transition: width 0.08s linear;
}
.inline-calib-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 10px;
}
.inline-calib-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    justify-content: center;
}
.inline-calib-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 14px;
    justify-content: center;
}
.inline-calib-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.inline-calib-begin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}
.inline-calib-begin-btn:hover:not(:disabled) { background: #e2e8f0; color: #0f172a; }
.inline-calib-begin-btn:disabled { cursor: default; opacity: 1; }

.inline-calib-nf-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.inline-calib-db-unit {
    font-size: 22px;
    color: rgba(255,255,255,0.45);
    margin-left: 6px;
    font-weight: 500;
}
.inline-calib-sampling-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #2dd4bf;
}
.inline-calib-sampling-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #2dd4bf;
    animation: calib-pulse 1s ease-in-out infinite;
}
@keyframes calib-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.inline-calib-analyze-row {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
@keyframes calib-spin {
    to { transform: rotate(360deg); }
}
.inline-calib-spin {
    animation: calib-spin 0.8s linear infinite;
}

.canvas-card .inline-calib-noise-card {
    background: transparent;
    border-color: rgba(255,255,255,0.12);
}

.asmt-progress { margin-bottom: 20px; }
.asmt-progress-label { font-size: 14px; color: var(--muted); margin-bottom: 6px; text-align: center; }
.asmt-progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; }
.asmt-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; }
.asmt-step { display: none; }
.asmt-step.active { display: block; }
.asmt-rec-section { background: rgba(255,255,255,0.07); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.13); color: #fff; }
.asmt-word-list-display { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; margin: 0 20px 16px; line-height: 1.8; color: #fff; text-align: center; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.asmt-word-chip { font-size: 18px; font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.asmt-word-sep { font-size: 14px; color: rgba(255,255,255,0.4); }
@media (max-width: 640px) {
  .practice-card { padding: 20px 16px !important; }
  .asmt-step.active { display: block !important; }
  .asmt-word-chip { font-size: 15px; }
  .asmt-word-list-display { gap: 0 3px; margin: 0 8px 16px; margin-inline: 0 !important; width: 100%; max-width: 100% !important; overflow: hidden; box-sizing: border-box; }
  .asmt-rec-wrapper { display: block; width: 100% !important; max-width: 100% !important; margin: 0 auto; box-sizing: border-box; min-width: 0 !important; }
  .asmt-instr-box { position: static !important; display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; right: auto !important; top: auto !important; margin: 0 0 16px 0 !important; box-sizing: border-box !important; }
  .asmt-rec-section { display: block; min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden; padding: 10px 14px 18px !important; margin: 0 !important; }

  /* Fit full Baseline Recording flow in one viewport — compress vertical rhythm */
  .practice-card[data-assessment] > h1 { font-size: 22px !important; margin: 6px 0 2px !important; }
  .practice-card[data-assessment] .drill-section-label { margin-bottom: 2px !important; }
  .asmt-instr-box { margin: 0 0 18px 0 !important; }
  .asmt-instr-box .asmt-instr-label { margin-bottom: 6px !important; }
  .asmt-instr-box > div { gap: 7px !important; margin-top: 6px !important; }
  .asmt-instr-row { font-size: 13px !important; margin: 0 !important; }
  .asmt-clinical-hdr { padding: 0 0 4px !important; }
  .asmt-word-list-display { margin: 0 8px 18px !important; line-height: 1.6 !important; }
  .asmt-word-picker { margin: 0 0 18px !important; }
  .asmt-vu-meter { height: 44px !important; margin-bottom: 14px !important; overflow: hidden !important; }
  .asmt-record-btn-area { padding: 12px 0 !important; }
  .asmt-record-label { margin-top: 12px !important; }
  .asmt-instr-box > div { gap: 5px !important; margin-top: 5px !important; }
  .practice-card[data-assessment] .asmt-btn-group .btn { padding: 10px 20px !important; font-size: 14px !important; }
  .asmt-record-btn { width: 60px !important; height: 60px !important; }
  .asmt-record-inner { width: 48px !important; height: 48px !important; }
  .asmt-btn-group { margin-top: 4px !important; padding: 0 0 2px !important; }
  .practice-card[data-assessment] { padding: 2px 14px 14px !important; }
  .practice-card[data-assessment] .drill-section-label { margin-top: 2px !important; }
  .asmt-instr-box { padding: 8px 12px 10px !important; }
  .asmt-word-picker-words { padding: 4px 0 !important; }
  .asmt-context-word { height: 20px !important; font-size: 13px !important; }
  .asmt-active-pill { height: 42px !important; margin: 2px 8px !important; }
  .asmt-pill-word { font-size: 20px !important; }
  .asmt-clinical-title { font-size: 16px !important; }
  .asmt-pill-timer { font-size: 13px !important; }
  .wordlist-sets-syllables--sentences .asmt-context-word { height: auto !important; min-height: 18px !important; padding: 2px 8px !important; font-size: 11px !important; line-height: 1.25 !important; }
  .wordlist-sets-syllables--sentences .asmt-active-pill { height: auto !important; min-height: 38px !important; padding: 6px 8px !important; margin: 2px 4px !important; width: calc(100% - 8px) !important; }
  .wordlist-sets-syllables--sentences .asmt-pill-word { font-size: 14px !important; line-height: 1.25 !important; }
  .wordlist-sets-syllables--sentences .asmt-pill-timer,
  .wordlist-sets-syllables--sentences .asmt-pill-spacer { width: 8px !important; }
  .wordlist-sets-syllables--sentences .asmt-word-divider { margin: 2px 0 !important; }
  .wordlist-sets-syllables--sentences .asmt-context-word.far { display: none !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) { padding: 6px 12px 10px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .rep-view { padding: 4px 0 2px !important; gap: 3px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .rep-big-num { font-size: 36px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .rep-of { font-size: 12px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .rep-hint { font-size: 11px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .carrier-progress { font-size: 11px !important; margin-top: 2px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .recorder-status { min-height: 0 !important; margin-top: 2px !important; }
  .wordlist-sets-fieldset:has(.wordlist-sets-syllables--sentences) .btn-start-white { margin: 6px auto 0 !important; padding: 10px 28px !important; font-size: 14px !important; }
  .practice-card:has(.wordlist-sets-syllables--sentences) { padding: 10px 12px 14px !important; }
  .asmt-rec-section .asmt-instr-label { margin-bottom: 4px !important; }
}
/* Single-column assessment (tablet + phone, ≤1199px): fill viewport so tall
   screens never show a white gap. Desktop (≥1200px) keeps two-column layout.
   Range widened from 980 → 1199 to cover iPad Pro 1024 where the absolute-
   positioned instruction col would otherwise bleed off the left edge. */
@media (max-width: 1199px) {
  .view[data-phase]:has(.practice-card[data-assessment]) {
    display: flex !important; flex-direction: column !important;
    min-height: calc(100dvh - 64px) !important; /* below fixed top navbar */
    justify-content: stretch !important; box-sizing: border-box !important;
  }
  .view[data-phase]:has(.practice-card[data-assessment]) > .practice-layout { flex: 1; display: flex; flex-direction: column; }
  .practice-card[data-assessment] { flex: 1; display: flex; flex-direction: column; }
  .practice-card[data-assessment] .asmt-rec-wrapper { flex: 1; display: flex; flex-direction: column; }
  /* stack the HOW IT WORKS box instead of absolute-positioning it off-screen.
     Flatten the col so HOW IT WORKS / recording / NOTE order independently. */
  .asmt-instr-col { display: contents !important; }
  .asmt-instr-box { position: static !important; width: 100% !important; max-width: 100% !important; right: auto !important; top: auto !important; margin: 0 0 14px 0 !important; order: 1; }
  .practice-card[data-assessment] .asmt-rec-wrapper > .asmt-rec-section { order: 2; }
  /* NOTE box drops below the recording box on mobile */
  .asmt-note-box { order: 3 !important; margin: 14px 0 0 0 !important; }
  /* HOW IT WORKS / NOTE legends straddle the white card's top border on mobile,
     leaving the text half-clipped on black. Lift them fully onto the black bg. */
  .practice-card[data-assessment] .asmt-instr-box > legend.asmt-instr-label {
    position: relative !important;
    transform: translateY(-0.85em) !important;
    background: transparent !important;
    margin-bottom: -0.4em !important;
  }
  /* legend lift pulls HOW IT WORKS up toward the title — restore the gap */
  .practice-card[data-assessment] .asmt-rec-wrapper .asmt-instr-box:not(.asmt-note-box) {
    margin-top: 14px !important;
  }
  /* align each section heading flush with its box's left edge (cancel box pad) */
  .practice-card[data-assessment] .asmt-instr-box,
  .practice-card[data-assessment] .asmt-note-box,
  .practice-card[data-assessment] .asmt-rec-section {
    padding-left: 20px !important;
  }
  .practice-card[data-assessment] .asmt-instr-label {
    margin-left: -20px !important;
    padding-left: 0 !important;
  }
  /* PHONETIC CAPTURE (rec-section legend) centered, not flush-left */
  .practice-card[data-assessment] .asmt-rec-section > legend.asmt-instr-label {
    margin-left: 0 !important;
    display: block;
    width: 100%;
    text-align: center;
  }
  .practice-card[data-assessment] .asmt-clinical-hdr {
    margin-left: -20px !important;
    padding-left: 0 !important;
  }
  .practice-card[data-assessment] .asmt-rec-section { flex: 1; display: flex; flex-direction: column; }
  .practice-card[data-assessment] .asmt-rec-section > div { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
}
@media (max-width: 640px) {
  .view[data-phase]:has(.practice-card[data-assessment]) { min-height: calc(100dvh - 64px - 72px) !important; } /* also clear bottom nav */
}
.asmt-clinical-hdr { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; }
.asmt-clinical-label { font-size: 8px; font-weight: 600; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; }
.asmt-clinical-title { font-size: 18px; font-weight: 700; color: #fff; }
.asmt-rec-badge { display: none; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(239,68,68,0.1); border-radius: 6px; }
.asmt-rec-badge.visible { display: flex; }
.asmt-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: asmtRecPulse 1s infinite; }
@keyframes asmtRecPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.asmt-rec-text { font-size: 11px; font-weight: 700; font-family: monospace; color: #ef4444; }
.asmt-instructions { margin: 0 20px 10px; padding: 16px 18px; background: rgba(255,255,255,0.06); border-radius: 14px; }
.asmt-instr-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.asmt-instr-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; font-size: 14px; color: rgba(255,255,255,0.75); }
.asmt-instr-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #000; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.asmt-capture-progress { margin: 0 20px 14px; padding: 14px 16px; background: rgba(0,249,239,0.08); border: 1px solid rgba(0,249,239,0.18); border-radius: 14px; }
.asmt-capture-phase { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-dark); }
.asmt-capture-summary { margin-top: 4px; font-size: 18px; font-weight: 700; color: #fff; }
.asmt-capture-bar { margin-top: 10px; width: 100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.asmt-capture-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #5ffff6); border-radius: 999px; transition: width 0.3s ease; }
.asmt-capture-note { margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.5); }
.asmt-word-picker { margin: 0 20px 16px; background: rgba(255,255,255,0.06); border-radius: 28px; border: 1px solid rgba(255,255,255,0.1); display: flex; overflow: hidden; }
.asmt-word-picker-words { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 0; }
.asmt-context-word { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255,255,255,0.35); width: 100%; }
.asmt-context-word.below { color: rgba(255,255,255,0.45); }
.asmt-context-word.far { color: rgba(255,255,255,0.2); }
.asmt-active-pill { height: 56px; margin: 4px 10px; border: 2px solid var(--accent); border-radius: 36px; display: flex; align-items: center; padding: 0 12px; width: calc(100% - 20px); box-sizing: border-box; }
.asmt-pill-timer { font-size: 15px; font-weight: 500; font-family: monospace; color: var(--accent); width: 48px; }
.asmt-pill-word { flex: 1; font-size: 26px; font-weight: 700; color: #fff; text-align: center; }
.asmt-pill-spacer { width: 48px; }
.asmt-picker-divider-line { width: 1px; background: rgba(255,255,255,0.12); margin: 14px 0; flex-shrink: 0; }
.asmt-picker-dots { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; min-width: 44px; }
.asmt-picker-dot { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); transition: all 0.3s; }
.asmt-picker-dot.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.asmt-picker-dot.done { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.3); }
.asmt-word-divider { height: 1px; background: rgba(255,255,255,0.1); width: calc(100% - 64px); }
/* Sentence mode: items are full sentences, not single words — let the pill and
   context lines grow with wrapped text instead of clipping at a fixed height. */
.wordlist-sets-syllables--sentences:has(.drill-pill) { max-width: 560px; }
.wordlist-sets-syllables--sentences .asmt-active-pill { height: auto; min-height: 56px; padding: 14px 24px; border-radius: 24px; }
.wordlist-sets-syllables--sentences .asmt-pill-word { font-size: 18px; line-height: 1.4; white-space: normal; word-break: normal; }
.wordlist-sets-syllables--sentences .asmt-context-word { height: auto; min-height: 32px; padding: 4px 12px; font-size: 14px; line-height: 1.3; white-space: normal; }
.asmt-vu-meter { display: flex; justify-content: center; align-items: center; gap: 6px; height: 110px; padding: 0 20px; margin-bottom: 8px; }

/* Phase Word List Box on right */
.asmt-phase-word-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0; list-style: none; margin: 0; }
.asmt-phase-word { 
    font-size: 12px; 
    color: rgba(255,255,255,0.7); 
    transition: all 0.2s ease; 
    padding: 8px 4px; 
    border: 1px solid rgba(255,255,255,0.18); 
    border-radius: 8px; 
    text-align: center;
    background: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    word-break: break-word;
    letter-spacing: -0.2px;
}
.asmt-phase-word.active { 
    color: var(--accent); 
    font-weight: 700; 
    border-color: var(--accent); 
    background: rgba(255, 179, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.15);
}
.asmt-phase-word.done { 
    color: rgba(255,255,255,0.2); 
    border-color: rgba(255,255,255,0.05);
    background: transparent;
}
.asmt-vu-bar { width: 6px; border-radius: 999px; background: var(--accent); min-height: 6px; flex-shrink: 0; transition: height 0.14s cubic-bezier(0.22, 1, 0.36, 1); will-change: height; }
.asmt-record-btn-area { display: flex; flex-direction: column; align-items: center; padding: 8px 0 20px; }
.asmt-record-btn { width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(0,249,239,0.3); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; -webkit-tap-highlight-color: transparent; }
.asmt-record-btn:active { transform: scale(0.95); }
.asmt-record-btn.recording { transform: scale(1.05); }
.asmt-record-btn.done .asmt-record-inner { background: #22c55e; }
.asmt-record-inner { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 24px rgba(0,249,239,0.4); transition: background 0.2s; }
.asmt-record-inner svg { fill: #0f172a; width: 22px; height: 22px; }
.asmt-stop-icon { width: 20px; height: 20px; border-radius: 5px; background: #0f172a; }
.asmt-fwd-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.asmt-fwd-icon svg { width: 22px; height: 22px; fill: #0f172a; }
.asmt-record-label { margin-top: 8px; font-size: 9px; font-weight: 600; letter-spacing: 1px; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.asmt-record-label.timeout { color: #f97316; }
.asmt-timeout-hint { font-size: 12px; color: rgba(249,115,22,0.7); margin-top: 2px; }
.asmt-btn-group { display: flex; justify-content: space-between; padding: 0 20px 20px; margin-top: 16px; gap: 12px; }
.asmt-results-view { padding: 0; background: transparent; }
.asmt-results { margin: 0 0 16px; background: transparent; border-radius: 0; padding: 0; }
.asmt-gauge-heading { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 0; color: #fff; margin: 16px 0 8px; padding: 0 4px; }
.asmt-gauge-wrap { display: flex; flex-direction: column; align-items: center; margin: 8px 0 4px; }.asmt-gauge-svg { width: 320px; height: 160px; }
.asmt-rerecord-btn { display: inline-block; width: auto; margin: 12px auto 16px; padding: 6px 14px; background: transparent; border: 1px solid rgba(0,0,0,0.2); border-radius: 0; color: rgba(0,0,0,0.75); font-size: 12px; font-weight: 500; text-align: center; white-space: nowrap; }
.asmt-rerecord-shield { width: 16px; height: 16px; margin-right: 6px; display: inline-block; vertical-align: middle; position: relative; top: -1px; flex-shrink: 0; }
.asmt-results-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.asmt-results-title { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.5px; text-transform: uppercase; }
.asmt-gri { font-size: 28px; font-weight: 800; color: var(--accent); line-height: 1; }
.asmt-gri-label { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.asmt-results-note { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 12px; font-style: italic; }
.asmt-results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.asmt-results-table th { text-align: left; padding: 5px 6px; color: rgba(255,255,255,0.5); font-weight: 600; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); }
.asmt-results-table td { padding: 6px 6px; border-bottom: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); vertical-align: middle; }
.asmt-play-btn { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; padding: 2px 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: rgba(255,255,255,0.8); font-size: 10px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; }
.asmt-play-btn:hover:not(:disabled) { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); color: #fff; }
.asmt-play-btn:disabled { opacity: 0.35; cursor: default; }
.asmt-play-btn-yours { background: rgba(0,249,239,0.1); border-color: rgba(0,249,239,0.3); color: var(--accent); }
.asmt-play-btn-yours:hover:not(:disabled) { background: rgba(0,249,239,0.2); border-color: rgba(0,249,239,0.5); }
.asmt-begin-phase1-btn { display: block; width: fit-content; max-width: 100%; margin: 24px auto 8px; padding: 10px 20px; background: var(--accent, #FFB300); color: #000; font-size: 14px; font-weight: 700; border-radius: 999px; text-align: center; text-decoration: none; letter-spacing: 0.01em; transition: opacity 0.15s, transform 0.1s; }
.asmt-begin-phase1-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.asmt-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.asmt-badge-Accurate { background: #dcfce7; color: #166534; }
.asmt-badge-Interdental { background: #fee2e2; color: #991b1b; }
.asmt-badge-Lateral { background: #fef3c7; color: #92400e; }
.asmt-badge-Dentalized { background: #fef9c3; color: #854d0e; }
.asmt-badge-Distorted { background: #fce7f3; color: #9d174d; }
.asmt-badge-Unclear { background: #f1f5f9; color: #475569; }
.asmt-badge-Omitted { background: #f1f5f9; color: #475569; }
.asmt-badge-Palatal { background: #ede9fe; color: #5b21b6; }
.asmt-analysis-loading { text-align: center; padding: 14px 20px; font-size: 13px; color: rgba(255,255,255,0.5); }

/* Per-word coaching tip column (lightbulb cue) */
.asmt-tip-cell { font-size: 12px; color: rgba(255,255,255,0.78); max-width: 240px; }
.asmt-tip-cell .asmt-tip-icon { display: inline-block; margin-right: 6px; font-size: 13px; vertical-align: top; line-height: 1.4; filter: drop-shadow(0 0 4px rgba(0,249,239,0.45)); }
.asmt-tip-cell .asmt-tip-text { display: inline; line-height: 1.45; color: rgba(255,224,150,0.92); }

/* Projected recovery chart (12-week line) — desktop assessment report */
.asmt-projected { display: none; margin: 18px auto 8px; padding: 18px 22px 16px; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; max-width: 720px; }
@media (min-width: 900px) { .asmt-projected { display: block; } }
.asmt-projected-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.asmt-projected-title { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.asmt-projected-program { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #4FD1C5; }
.asmt-projected-chart { width: 100%; height: 140px; display: block; }
.asmt-projected-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; margin-top: 10px; }
.asmt-projected-foot .asmt-projected-side { display: flex; flex-direction: column; gap: 2px; }
.asmt-projected-foot .asmt-projected-side.right { text-align: right; align-items: flex-end; }
.asmt-projected-week { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }
.asmt-projected-label { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600; }
.asmt-projected-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.asmt-projected-value.current { color: #FF8B42; }
.asmt-projected-value.target { color: #4FD1C5; }
.asmt-projected-arrow { font-size: 18px; color: rgba(255,255,255,0.4); padding-bottom: 4px; }

/* Rich phonetic analysis loader */
.asmt-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px 28px; gap: 10px; min-height: 60vh; }
.asmt-loader-orb { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.asmt-loader-ring-outer { position: absolute; inset: 0; width: 100%; height: 100%; }
.asmt-loader-ring-outer circle { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1.2; }
.asmt-loader-ring-inner { position: absolute; inset: 0; width: 100%; height: 100%; animation: asmt-orb-spin 2.4s linear infinite; transform-origin: 50% 50%; }
.asmt-loader-ring-inner circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.asmt-loader-ring-inner .asmt-arc-bright { stroke: #FFFFFF; opacity: 0.95; }
.asmt-loader-ring-inner .asmt-arc-dim { stroke: #FFFFFF; opacity: 0.35; }
.asmt-loader-core { position: relative; width: 54px; height: 54px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; }
.asmt-loader-bars { display: flex; align-items: center; gap: 2px; height: 22px; }
.asmt-loader-bars span { display: block; width: 2px; border-radius: 2px; background: #FFFFFF; }
.asmt-loader-bars span:nth-child(1) { height: 30%; }
.asmt-loader-bars span:nth-child(2) { height: 70%; }
.asmt-loader-bars span:nth-child(3) { height: 100%; }
.asmt-loader-bars span:nth-child(4) { height: 60%; }
.asmt-loader-bars span:nth-child(5) { height: 40%; }
.asmt-loader-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; color: var(--accent); text-transform: uppercase; margin-top: 10px; }
.asmt-loader-title { font-size: 30px; line-height: 1.15; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 4px 0 2px; text-align: center; }
.asmt-loader-sub { font-size: 14px; color: rgba(255,255,255,0.6); margin: 0; text-align: center; }
.asmt-loader-steps { margin-top: 14px; width: 100%; max-width: 360px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.asmt-loader-step { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: #fff; }
.asmt-loader-step .asmt-step-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.asmt-loader-step.done .asmt-step-icon { background: var(--accent); border-radius: 50%; color: #1A202C; }
.asmt-loader-step.done .asmt-step-icon svg { width: 14px; height: 14px; }
.asmt-loader-step.pending { color: rgba(255,255,255,0.85); }
.asmt-loader-step.pending .asmt-step-icon svg { width: 18px; height: 18px; color: var(--accent); animation: asmt-spin 1.4s linear infinite; }

/* Loader-only accent: electric teal */
.asmt-loader-eyebrow { color: #00E5FF; }
.asmt-loader-step.done .asmt-step-icon { background: #00E5FF; }
.asmt-loader-step.pending .asmt-step-icon svg { color: #00E5FF; }

/* phase-0 results render on a white page; recolor the white-on-dark loader. */
.asmt-results-view[data-assessment] .asmt-loader-ring-outer circle { stroke: rgba(0,0,0,0.12); }
.asmt-results-view[data-assessment] .asmt-loader-ring-inner .asmt-arc-bright { stroke: #1A202C; }
.asmt-results-view[data-assessment] .asmt-loader-ring-inner .asmt-arc-dim { stroke: rgba(0,0,0,0.3); }
.asmt-results-view[data-assessment] .asmt-loader-bars span { background: #1A202C; }
.asmt-results-view[data-assessment] .asmt-loader-title { color: #000; }
.asmt-results-view[data-assessment] .asmt-loader-sub { color: rgba(0,0,0,0.55); }
.asmt-results-view[data-assessment] .asmt-loader-steps {
    background: rgba(0,0,0,0.015);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
}
.asmt-results-view[data-assessment] .asmt-loader-step { color: #000; }
.asmt-results-view[data-assessment] .asmt-loader-step.pending { color: rgba(0,0,0,0.55); }
@keyframes asmt-orb-spin { to { transform: rotate(360deg); } }
@keyframes asmt-spin { to { transform: rotate(360deg); } }
@keyframes asmt-bar-pulse { 0%, 100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
.asmt-freq-canvas { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; background: #fafafa; margin-top: 12px; }
.asmt-q-wrap { padding: 4px 0; }
.asmt-step-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 20px; }
.asmt-form-group { margin-bottom: 24px; }
.asmt-form-label { display: block; font-weight: 600; color: var(--text); margin-bottom: 12px; font-size: 15px; }
.asmt-options { display: flex; flex-direction: column; gap: 8px; }
.asmt-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 15px; transition: border-color 0.2s; }
.asmt-option:has(input:checked) { border-color: var(--accent); background: rgba(0,249,239,0.06); }
.asmt-option input { accent-color: var(--accent); flex-shrink: 0; }

/* ---------- Rep counter ---------- */
.rep-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0 8px;
    text-align: center;
}
.rep-set-label {
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    letter-spacing: 0.04em;
}
.rep-big-num {
    font-family: 'Quicksand', sans-serif;
    font-size: 100px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.rep-of {
    font-size: 22px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.rep-bar {
    width: 100%;
    max-width: 320px;
    height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 4px;
}
.rep-bar-fill {
    height: 100%;
    background: #f59e0b;
    border-radius: 99px;
    transition: width 0.2s ease;
}
.rep-hint {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}
.rep-next-btn {
    margin-top: 8px;
    padding: 16px 52px;
    background: #fff;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.rep-next-btn:hover { background: #e5e5e5; transform: translateY(-1px); }
.rep-next-btn:active { transform: scale(0.97); }
.practice-instructions--center { text-align: center; }

/* ---------- Timer ---------- */
.timer-display {
    font-family: 'Quicksand', sans-serif;
    font-size: 100px;
    font-weight: 800;
    color: #000;
    text-align: center;
    line-height: 1;
    margin: 8px 0 4px;
    letter-spacing: 2px;
}
.timer-display--tappable {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.timer-display--tappable:hover { opacity: 0.85; }
.timer-display--running { color: #000; }

/* ---------- Recorder ---------- */
.recorder {
    background: #f8fafc;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 14px;
}
.practice-side .recorder {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}
.practice-side .recorder-status { color: rgba(255, 255, 255, 0.75); }
.practice-side .recording-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}
.practice-side .recording-item .ts { color: rgba(255, 255, 255, 0.55); }
.practice-side .accuracy-input {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.9);
}
.practice-side .accuracy-input input {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.practice-side .accuracy-input span { color: rgba(255, 255, 255, 0.55); }
.recorder.recording {
    border-color: #dc2626;
    background: #fef2f2;
    animation: pulseBorder 1.2s ease-in-out infinite;
}
@keyframes pulseBorder {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}
.recorder-status {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 14px;
    font-weight: 500;
}
.recorder-status.recording { color: #dc2626; font-weight: 700; }
.recorder-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.recording-dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: #dc2626;
    border-radius: 50%;
    margin-right: 6px;
    animation: blink 1s infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

.recording-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
}
.recording-item audio { flex: 1; min-width: 0; }
.recording-item .ts {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- Q&A drill ---------- */
.qa-drill { display: flex; flex-direction: column; gap: 12px; }
.qa-counter {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.qa-question {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.qa-playback { min-height: 0; }
.qa-playback audio { width: 100%; }
.retell-drill { display: flex; flex-direction: column; gap: 18px; }
/* Two-step slider: Step 1 (Listen) slides out left, Step 2 (Retell) slides in */
.retell-stepper { width: 100%; overflow: hidden; position: relative; }
.retell-stepper-track {
    display: flex;
    width: 200%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.retell-stepper.is-step-2 .retell-stepper-track { transform: translateX(-50%); }
.retell-step {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.retell-stepper:not(.is-step-2) .retell-step-2 { opacity: 0; pointer-events: none; }
.retell-stepper.is-step-2 .retell-step-1 { opacity: 0; pointer-events: none; }
.retell-broadcast {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.retell-broadcast-head { display: flex; flex-direction: column; gap: 4px; }
.retell-broadcast-kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00E5FF;
    font-weight: 700;
}
.retell-broadcast-title { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.retell-broadcast-sub { margin: 0; opacity: 0.75; font-size: 14px; line-height: 1.4; }
.retell-broadcast-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.retell-broadcast-status { font-size: 13px; opacity: 0.75; }
.retell-drill .retell-listen-btn.is-speaking {
    background: #e0564f;
    color: #fff;
    border-color: #e0564f;
}
.retell-passage p { margin: 0 0 10px; line-height: 1.55; }
.retell-passage p:last-child { margin-bottom: 0; }
.ai-conv-next { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px; transition: color 0.2s ease, transform 0.2s ease; }
.ai-conv-next:hover { color: var(--accent, #00E5FF); }
.ai-conv-next:active { transform: scale(0.9); }
.picture-stimulus { width: 100%; display: flex; justify-content: center; margin-bottom: 4px; }
.picture-stimulus-img { width: 100%; max-width: 480px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); }
.retell-record-head { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.retell-drill { align-items: center; text-align: center; }
.retell-broadcast { align-items: center; text-align: center; }
.retell-broadcast-head { align-items: center; }
.retell-broadcast-controls { justify-content: center; }
.retell-drill .passage-recorder { margin-top: 4px; align-items: center; text-align: center; }
.retell-drill .passage-recorder .qa-playback { justify-content: center; }
.retell-drill .retell-record-head { text-align: center; align-items: center; margin-top: 20px; }
.passage-recorder { align-items: center; text-align: center; }
.passage-recorder .qa-playback { display: flex; justify-content: center; width: 100%; }
.passage-recorder .qa-playback audio { width: 100%; min-width: 240px; max-width: 360px; height: 32px; }
.qa-controls { justify-content: center; }
.qa-next { display: flex; justify-content: center; }
.qa-record-btn.is-recording {
    background: #FFB300;
    color: #111;
    border-color: #FFB300;
}
/* Retell drill: teal brand accent (no orange) */
.retell-drill .retell-listen-btn {
    background: linear-gradient(135deg, #00E5FF 0%, #00C9C0 100%);
    color: #042b2e;
    border-color: transparent;
}
.retell-drill .retell-listen-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.retell-recorder .btn.btn-start-white.is-recording,
body.light-route .retell-recorder .btn.btn-start-white.is-recording {
    background: #e0564f;
    color: #fff;
    border-color: #e0564f;
}
.retell-recorder .btn.btn-start-white.is-recording:hover {
    background: #d4453e;
}
.qa-done {
    text-align: center;
    padding: 24px 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

/* ---------- Session log / accuracy ---------- */
.log-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 8px;
}
.log-meta { font-size: 13px; color: var(--muted); }
.log-meta strong { color: var(--text); font-weight: 600; }
.log-score {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 13px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--accent-dark);
}
.log-score.high { background: #dcfce7; color: #166534; }
.log-score.low { background: #fee2e2; color: #991b1b; }

/* Accuracy input */
.accuracy-input {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 16px;
}
.accuracy-input label { font-weight: 600; font-size: 14px; }
.accuracy-input input[type="number"] {
    width: 70px;
    padding: 8px 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    text-align: center;
}
.accuracy-input input:focus { outline: none; border-color: var(--accent); }

/* ---------- Progress view ---------- */
.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.progress-stat-card {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid rgba(255, 152, 0, 0.25);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
}
.progress-stat-card .num {
    font-family: 'Quicksand', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-dark);
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}
.progress-stat-card .lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    font-weight: 600;
}

/* ---------- Diagnostic module ---------- */
.diag-module {
    border-top: 1px solid var(--border);
    padding-top: 28px;
    margin-top: 28px;
}
.diag-module:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.diag-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.diag-header .diag-tag {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    padding: 4px 10px;
    border-radius: 99px;
    margin-bottom: 6px;
}
.diag-header h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.diag-header p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 640px;
}

/* step dots */
.diag-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.diag-step-dot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 2px solid var(--border);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    transition: all 0.2s ease;
}
.diag-step-dot .n {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Quicksand', sans-serif;
}
.diag-step-dot.active {
    background: #fff7ed;
    border-color: var(--accent);
    color: var(--accent-dark);
}
.diag-step-dot.active .n {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
}
.diag-step-dot.done {
    background: #f0fdf4;
    border-color: #2f855a;
    color: #166534;
}
.diag-step-dot.done .n {
    background: #2f855a;
    color: #fff;
}
.diag-step-dot.done .n::before { content: '✓'; }
.diag-step-dot.done .n > * { display: none; }

/* step content */
.diag-stage { display: flex; flex-direction: column; gap: 14px; }
.diag-step-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.diag-step-head .diag-step-n {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--accent-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.diag-step-head h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    color: var(--text);
    font-weight: 700;
}
.diag-cue {
    background: #fff7ed;
    border-left: 4px solid var(--accent);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #431407;
}
.diag-goal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
}
.diag-goal strong { color: var(--text); }
.diag-goal .diag-flag { color: #78350f; }

/* camera viewport */
.diag-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 440px;
    background: #0b1117;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--border);
}
.diag-viewport video,
.diag-viewport .diag-capture-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}
.diag-viewport .diag-capture-canvas { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.diag-viewport.captured .diag-capture-canvas { opacity: 1; }
.diag-viewport video { opacity: 0.4; }
.diag-viewport.live video { opacity: 1; }

.diag-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.diag-reticle {
    width: 60%;
    aspect-ratio: 3 / 4;
    border: 2px solid rgba(255, 152, 0, 0.75);
    border-radius: 50% / 45%;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.15),
        0 0 0 9999px rgba(0, 0, 0, 0.3);
    position: relative;
}
.diag-reticle::before, .diag-reticle::after {
    content: '';
    position: absolute;
    background: rgba(255, 152, 0, 0.75);
}
.diag-reticle::before {
    left: 50%; top: 10%; bottom: 10%;
    width: 1px; transform: translateX(-0.5px);
}
.diag-reticle::after {
    top: 50%; left: 15%; right: 15%;
    height: 1px; transform: translateY(-0.5px);
}

.diag-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.diag-rate-label {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.diag-rate-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 640px) {
    .diag-rate-btns { grid-template-columns: repeat(2, 1fr); }
}
.diag-rate {
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    color: var(--text);
    transition: all 0.15s ease;
    font-family: inherit;
}
.diag-rate:hover { transform: translateY(-2px); }
.diag-rate-ok:hover { border-color: #2f855a; background: #f0fdf4; color: #166534; }
.diag-rate-warn:hover { border-color: #d97706; background: #fffbeb; color: #92400e; }
.diag-rate-bad:hover { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.diag-rate.suggested {
    position: relative;
    border-width: 3px;
    box-shadow: 0 6px 18px rgba(255, 152, 0, 0.25);
}
.diag-rate.suggested::before {
    content: '⚡';
    position: absolute;
    top: -10px; right: -8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(230, 81, 0, 0.35);
}
.diag-rate-ok.suggested   { border-color: #2f855a; background: #f0fdf4; color: #166534; }
.diag-rate-warn.suggested { border-color: #d97706; background: #fffbeb; color: #92400e; }
.diag-rate-bad.suggested  { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.diag-rate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* auto-analysis card */
.diag-auto {
    border-radius: 12px;
    padding: 16px 18px;
    border: 2px solid var(--border);
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: diagAutoIn 0.35s ease;
}
@keyframes diagAutoIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.diag-auto .auto-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.diag-auto .auto-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #0b1117;
    color: #fff;
    padding: 4px 10px;
    border-radius: 99px;
}
.diag-auto .auto-ttl {
    font-family: 'Quicksand', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.diag-auto .auto-txt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}
.diag-auto .auto-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    margin-top: 2px;
}
.diag-auto .metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 99px;
    color: var(--muted);
    font-weight: 500;
}
.diag-auto .metric .m-k { font-weight: 600; color: var(--text); }
.diag-auto-ok   { background: #f0fdf4; border-color: #86efac; }
.diag-auto-ok   .auto-pill { background: #166534; }
.diag-auto-warn { background: #fffbeb; border-color: #fcd34d; }
.diag-auto-warn .auto-pill { background: #b45309; }
.diag-auto-bad  { background: #fef2f2; border-color: #fca5a5; }
.diag-auto-bad  .auto-pill { background: #991b1b; }

.diag-summary {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 14px;
    padding: 22px 24px;
}
.diag-summary h3 {
    font-family: 'Quicksand', sans-serif;
    color: #166534;
    font-size: 18px;
    margin-bottom: 14px;
}
.diag-ratings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.diag-rating-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
}
.diag-rating-row .lbl { font-weight: 600; color: var(--text); }
.diag-rating-row .val { font-weight: 700; font-family: 'Quicksand', sans-serif; }
.val-ok { color: #166534; }
.val-warn { color: #92400e; }
.val-bad { color: #991b1b; }
.val-neutral { color: var(--muted); }

/* airflow mic */
.diag-mic { display: flex; flex-direction: column; gap: 14px; }
.diag-bars {
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #0b1117 0%, #1a202c 100%);
    border-radius: 12px;
    border: 1px solid var(--border);
    display: block;
}
.diag-mic.live .diag-bars {
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.4);
    animation: diagLivePulse 2s ease-in-out infinite;
}
@keyframes diagLivePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.1); }
}

.diag-gauge { padding: 8px 0; }
.diag-gauge-track {
    position: relative;
    height: 44px;
    background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #22c55e 100%);
    border-radius: 22px;
    overflow: hidden;
}
.diag-gauge-label {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    padding: 0 14px;
    z-index: 1;
}
.diag-gauge-label.left { left: 0; }
.diag-gauge-label.right { right: 0; }
.diag-gauge-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 50%;
    width: 6px;
    background: #fff;
    border: 2px solid #0b1117;
    border-radius: 4px;
    transition: left 0.12s ease-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transform: translateX(-50%);
    z-index: 2;
}

.diag-verdict {
    padding: 16px 18px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: #f8fafc;
    transition: all 0.25s ease;
}
.diag-verdict .ttl {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
.diag-verdict .txt {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}
.diag-verdict-ok { background: #f0fdf4; border-color: #86efac; }
.diag-verdict-ok .ttl { color: #166534; }
.diag-verdict-warn { background: #fffbeb; border-color: #fcd34d; }
.diag-verdict-warn .ttl { color: #92400e; }
.diag-verdict-bad { background: #fef2f2; border-color: #fca5a5; }
.diag-verdict-bad .ttl { color: #991b1b; }

.diag-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* mouth diagram */
.diag-mouth-wrap {
    background: #fef3e6;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 16px;
}
.diag-mouth { width: 100%; height: auto; display: block; }

.diag-zone {
    fill: rgba(255, 255, 255, 0.35);
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 2;
    stroke-dasharray: 4 3;
    cursor: pointer;
    transition: all 0.2s ease;
}
.diag-zone:hover {
    fill: rgba(255, 255, 255, 0.7);
    stroke-width: 3;
}
.diag-zone-ok   { stroke: #16a34a; }
.diag-zone-warn { stroke: #d97706; }
.diag-zone-ok.selected   { fill: rgba(34, 197, 94, 0.4); stroke-dasharray: none; }
.diag-zone-warn.selected { fill: rgba(245, 158, 11, 0.4); stroke-dasharray: none; }

.diag-zone-label {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 18px;
    fill: #1a202c;
    pointer-events: none;
}

.diag-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.diag-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text);
}
.diag-legend-item .chip {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
}
.diag-legend-item[data-tone="ok"]   .chip { background: #16a34a; }
.diag-legend-item[data-tone="warn"] .chip { background: #d97706; }
.diag-legend-item[data-tone="bad"]  .chip { background: #dc2626; }

.diag-verdict-idle { background: #f8fafc; }
.diag-verdict-idle .ttl { color: var(--text); }

/* ---------- PWA Shell (home 3-col layout) ---------- */
.pwa-shell-wrap {
    padding-top: 12px;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}
.pwa-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    padding: 8px 0 0;
    max-width: 860px;
    margin: 0 auto;
    flex: 1;
    width: 100%;
}
.pwa-shell.hide-rails {
    grid-template-columns: minmax(0, 1fr);
}

/* ---- Phases rail (left) ---- */
.phases-rail {
    padding-top: 4px;
    position: sticky;
    top: 76px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.rail-eyebrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 6px 10px;
}
.rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rail-list li { list-style: none; }
.rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
}
.rail-item:hover { color: rgba(255, 255, 255, 0.85); }
.rail-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}
.rail-item.active::before {
    content: "";
    position: absolute;
    left: -2px; top: 7px; bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
}
.rail-item.locked {
    color: rgba(255, 255, 255, 0.30);
    cursor: not-allowed;
}
.rail-item.locked:hover { color: rgba(255, 255, 255, 0.30); }
.rail-num {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.40);
}
.rail-item.active .rail-num { color: var(--accent); }
.rail-item.done .rail-num { color: #4ade80; }
.rail-item.locked .rail-num { color: rgba(255, 255, 255, 0.25); }
.rail-num svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    display: block;
    margin: 0 auto;
}
.rail-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-current-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.rail-footer {
    margin-top: 14px;
    padding: 10px 6px 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.5;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rail-footer-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rail-footer-row svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.rail-footer-week {
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Phase canvas (center) ---- */
.phase-canvas {
    padding-bottom: 60px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.canvas-phase0-header {
    text-align: center;
    margin-bottom: 8px;
}

.canvas-phase0-header .canvas-tagline,
.canvas-phase0-header .canvas-overview {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.canvas-card {
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 32px 36px;
}
.canvas-eyebrow {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 8px;
}
.canvas-eyebrow--teal { color: #FFB300; }
.canvas-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 8px;
}
.canvas-tagline {
    color: var(--ink-on-dark-2);
    font-size: 15px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0;
}
.canvas-progress {
    margin: 18px 0 26px;
    max-width: 640px;
}
.canvas-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-on-dark-4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 6px;
}
.canvas-progress-pct { color: var(--accent); }
.canvas-progress-row > span:first-child { color: var(--accent); }
.canvas-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.canvas-progress-fill {
    height: 100%;
    background: var(--grad-orange);
    border-radius: 99px;
    transition: width 0.4s ease;
}
.canvas-overview {
    color: var(--ink-on-dark-2);
    font-size: 15px;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 0 8px;
}
.canvas-drills-head {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 24px 0 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.canvas-drills-head .muted-count {
    font-size: 13px;
    color: var(--ink-on-dark-4);
    font-weight: 500;
}

/* Dark theme for drill groups inside canvas — fieldset-legend style */
.canvas-card .drill-group {
    position: relative;
    overflow: visible;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    margin-top: 18px;
}
.canvas-card .drill-group[open] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
}
.canvas-card .drill-group-header {
    position: absolute;
    top: -11px;
    left: 14px;
    right: 14px;
    padding: 0;
    background: transparent;
    cursor: default;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.canvas-card .drill-group-header:hover { background: transparent; }
.canvas-card .drill-group-header h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    background: #282800;
    padding: 2px 8px;
    border-radius: 4px;
    flex: 0 0 auto;
    margin: 0;
}
.canvas-card .drill-group-n { display: none; }
.canvas-card .drill-group-count {
    color: rgba(255, 255, 255, 0.65);
    background: #282800;
    border: none;
    padding: 2px 8px;
    font-size: 11px;
}
.canvas-card .drill-group-chev { display: none; }
.canvas-card .drill-group-body { gap: 8px; padding: 12px 12px 12px; }
.canvas-card .drill-card {
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: none;
}
.canvas-card .drill-card h3 { color: #fff; }
.canvas-card .drill-card p.drill-desc { color: rgba(255, 255, 255, 0.65); }
.canvas-card .drill-card:hover {
    border-color: transparent;
    background: transparent;
}
.canvas-card .drill-card.completed {
    border-color: rgba(47, 133, 90, 0.6);
    background: rgba(47, 133, 90, 0.10);
}
.canvas-card .drill-card-header h3 { font-size: 14px; }
.canvas-card .drill-kind {
    background: rgba(255, 152, 0, 0.20);
    color: var(--accent);
}

/* Locked canvas */
.canvas-locked-head { opacity: 0.55; }
.canvas-locked-eyebrow {
    font-size: 11px;
    color: var(--ink-on-dark-4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.canvas-locked-eyebrow svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}
.canvas-locked-card {
    margin-top: 28px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    max-width: 560px;
}
.canvas-locked-card h2 { color: #fff; }
.canvas-locked-card p { color: var(--ink-on-dark-2) !important; }
.canvas-locked-card strong { color: #fff !important; }
.canvas-locked-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-on-dark-4);
    margin-bottom: 14px;
}
.canvas-locked-icon svg {
    width: 20px; height: 20px;
    stroke: currentColor; fill: none;
    stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Journey rail (right) ---- */
.journey-rail {
    padding-top: 4px;
    position: sticky;
    top: 76px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.85);
}
.journey-section {
    padding: 14px 6px 6px;
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.journey-section:first-child {
    border-top: none;
    margin-top: 0;
    padding: 4px 6px 18px;
}
.journey-eyebrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.journey-streak {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.journey-streak .num {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.journey-streak .lbl {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}
.week-dots {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.week-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.week-dot .lbl {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.40);
    font-family: var(--font-display);
    font-weight: 700;
}
.week-dot .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}
.week-dot.done .dot { background: var(--accent); }
.week-dot.today .dot {
    background: transparent;
    border: 2px solid var(--accent);
}
.journey-up-next-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    line-height: 1.4;
}
a.journey-up-next-title:hover { color: var(--accent); }
.journey-up-next-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
    text-transform: lowercase;
}
.journey-milestone {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.5;
}

/* ---- Phase chips (mobile horizontal scroller) ---- */
.phase-chips {
    display: none;
    gap: 6px;
    padding: 8px 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.phase-chips::-webkit-scrollbar { display: none; }
.phase-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.phase-chip.active {
    background: var(--accent-tint);
    color: var(--accent);
    border-color: rgba(255, 152, 0, 0.30);
}
.phase-chip.locked {
    color: rgba(255, 255, 255, 0.25);
    cursor: not-allowed;
}

/* Top-bar streak/avatar additions */
.nav-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.phase0-pending .nav-menu li:has(a[data-route="/progress"]),
.phase0-pending .nav-menu li:has(a[data-route="/about"]),
.phase0-pending .nav-streak { display: none !important; }

.nav-streak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--accent-tint);
    color: var(--accent);
    border: 1px solid rgba(255, 152, 0, 0.30);
    border-radius: 99px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nav-avatar-wrap {
    position: relative;
    display: inline-block;
}
.nav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-avatar:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 152, 0, 0.45);
}
.nav-avatar[aria-expanded="true"] {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--accent);
}
.nav-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    padding: 8px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-avatar-menu[hidden] { display: none; }
.nav-avatar-email {
    padding: 8px 10px 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
    word-break: break-all;
    line-height: 1.4;
}
.nav-avatar-menu .nav-avatar-item {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-avatar-menu .nav-avatar-item:hover {
    background: rgba(255, 152, 0, 0.10);
    color: var(--accent);
}

/* Shell mobile collapse: hide rails, show chip strip */
@media (max-width: 980px) {
    .pwa-shell {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .phases-rail, .journey-rail { display: none; }
    .phase-chips { display: flex; }
    .canvas-card { padding: 22px 18px; }
    .canvas-title { font-size: 24px; }
}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #000;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
    z-index: 1000;
}
.bottom-nav .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-height: 52px;
    padding: 6px 4px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    position: relative;
    box-sizing: border-box;
    transition: color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}
.bottom-nav .tab svg {
    display: block;
    width: 22px; height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.bottom-nav .tab .t {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
}
.bottom-nav .tab.active {
    color: var(--accent);
    background: var(--accent-tint);
}
.bottom-nav .tab.active::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
}

.bottom-nav button.tab {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.65);
    -webkit-appearance: none;
    appearance: none;
}
.bottom-nav .tab[aria-expanded="true"] {
    color: var(--accent);
    background: var(--accent-tint);
}

@media (max-width: 640px) {
    .bottom-nav { display: flex; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .nav-menu li:has(> a[data-route]) { display: none; }
    .nav-avatar { display: none; }
    .nav-avatar-menu {
        position: fixed;
        bottom: calc(72px + env(safe-area-inset-bottom));
        right: 12px;
        left: auto;
        top: auto;
        min-width: 220px;
    }
}

@media (max-width: 640px) {
    .practice-instructions {
        margin: 0 auto;
        max-width: 100%;
    }
    .practice-instructions-list li {
        text-align: left;
    }
}

/* ---------- Footer ---------- */
.footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    padding: 40px 20px 20px;
    line-height: 1.7;
}
.footer a { color: var(--accent); text-decoration: none; }

/* ---------- Daily template panel ---------- */
.daily-template {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}
.daily-template h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #fff;
}
.daily-template .blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.template-block {
    background: rgba(255, 255, 255, 0.1);
    padding: 14px 16px;
    border-radius: 10px;
    border-left: 3px solid var(--accent);
}
.template-block .lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 2px;
}
.template-block .mins {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.template-block .mins small { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 500; }
.template-block .txt { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.5; }

/* ---------- Disclaimer ---------- */
.disclaimer {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 18px 20px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.disclaimer strong { color: var(--accent); }

/* ---------- Onboarding overlay ---------- */
.ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #fff;
    display: flex;
    flex-direction: row;
    height: 100vh;
    animation: ob-in 0.3s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #0f1115;
}
.ob-panel-left {
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    border-right: 1px solid rgba(0,0,0,.06);
}
.ob-panel-right {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
}
.ob-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 64px;
    overflow-y: auto;
}
.ob-form-footer {
    padding: 16px 40px;
    border-top: 1px solid #e6e8ec;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: none;
}
.ob-form-footer a {
    font-size: 12px;
    color: #5b6470;
    text-decoration: none;
}
.ob-form-footer a:hover { color: #0f1115; }
.ob-panel-right {
    position: relative;
    background: #111;
    overflow: hidden;
}
.ob-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    display: block;
}
.ob-panel-right::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 52%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.90));
    z-index: 1;
    pointer-events: none;
}
.ob-photo-badge {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 20px 28px 26px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.ob-photo-badge-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.3;
}
.ob-photo-badge-sub {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}
.ob-badge-right { text-align: right; }
.ob-badge-day-num {
    font-size: 38px;
    font-weight: 800;
    color: #FF9800;
    font-family: 'Quicksand', sans-serif;
    line-height: 1;
}
.ob-badge-day-label {
    font-size: 10px;
    font-weight: 700;
    color: #FF9800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 2px;
}
.ob-overlay.ob-out { animation: ob-out 0.28s ease forwards; }

@keyframes ob-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ob-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}

.ob-card {
    background: transparent;
    border: none;
    padding: 0;
    max-width: 380px;
    width: 100%;
    animation: ob-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ob-card-in {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.ob-logo {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
}

#ob-step-1 {
    text-align: center;
}

.ob-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #0f1115;
    line-height: 1.15;
    margin: 0 0 12px;
    text-align: center;
}
.ob-sub {
    color: #5b6470;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 28px;
    text-align: center;
}
.ob-sub-sm {
    font-size: 12px;
    margin-top: -12px;
    opacity: 0.7;
}

.ob-field { margin-bottom: 8px; }

.ob-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 8px;
}

.ob-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.04);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 11px 14px;
    color: #111;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.ob-input:focus { border-color: var(--accent); }
.ob-input::placeholder { color: rgba(0, 0, 0, 0.3); }

.ob-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #dc2626;
    min-height: 16px;
}

.ob-goals { display: flex; flex-direction: column; gap: 8px; }

.ob-goal-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
}
.ob-goal-opt:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 152, 0, 0.12);
    color: #111;
}
.ob-goal-opt input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.ob-goal-opt input[type="radio"]:checked {
    border-color: var(--accent);
}
.ob-goal-opt input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--accent);
}

.ob-btn {
    width: 100%;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s, transform 0.1s;
}
.ob-btn:hover { background: var(--accent-hover); }
.ob-btn:active { transform: scale(0.98); }

.ob-privacy {
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.35);
    margin-top: 12px;
}
.ob-resend {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 12px;
}
.ob-link-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.ob-link-btn:disabled { opacity: 0.5; cursor: default; }
.ob-otp-input {
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 700;
}

.ob-hidden { display: none !important; }

.ob-mail-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.1);
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}
.ob-btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
}
.ob-btn-ghost:hover { background: rgba(255,152,0,0.1); }

.ob-checkmark {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.12);
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: var(--accent);
    margin-bottom: 20px;
}

/* Session cap banner */
.cap-banner {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 10px;
    padding: 12px 16px;
    color: #fca5a5;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.cap-banner strong { color: #f87171; }

/* Social login */
.ob-social-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}
.ob-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #0f1115;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.05s ease;
}
.ob-social-btn svg { width: 20px; height: 20px; flex: none; }
.ob-social-btn:hover:not(:disabled) {
    background: #fafbfc;
    border-color: #d6d9de;
}
.ob-social-btn:active:not(:disabled) { transform: scale(0.98); }
.ob-social-btn:disabled { opacity: 0.45; cursor: default; }
.ob-social-primary {
    background: #FF8B42;
    border-color: #FF8B42;
    color: #fff;
}
.ob-social-primary:hover:not(:disabled) {
    background: #e67a35;
    border-color: #e67a35;
}
.ob-social-error {
    display: block;
    font-size: 12px;
    color: #dc2626;
    margin-top: 6px;
    min-height: 16px;
}
.ob-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    animation: ob-notice-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ob-notice-icon { flex: 0 0 18px; margin-top: 1px; }
.ob-notice-text { flex: 1; }
.ob-notice-warn {
    background: #FFF8EB;
    color: #92400E;
    border: 1px solid rgba(217, 119, 6, 0.18);
}
.ob-notice-warn .ob-notice-icon { color: #D97706; }
.ob-notice-error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid rgba(220, 38, 38, 0.18);
}
.ob-notice-error .ob-notice-icon { color: #DC2626; }
.ob-notice-info {
    background: #ECFEFF;
    color: #155E75;
    border: 1px solid rgba(0, 229, 255, 0.22);
}
.ob-notice-info .ob-notice-icon { color: #0891B2; }
@keyframes ob-notice-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ob-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}
.ob-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ob-field-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: 0.02em;
    text-align: left;
}
.ob-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #0f1115;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.ob-input:focus {
    outline: none;
    border-color: #FF8B42;
    box-shadow: 0 0 0 3px rgba(255,139,66,0.15);
}
.ob-pw-wrap {
    position: relative;
    display: block;
}
.ob-input-pw { padding-right: 48px; }
.ob-pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #9aa1ac;
    cursor: pointer;
    border-radius: 0 10px 10px 0;
    transition: color 0.15s, transform 0.1s ease;
}
.ob-pw-toggle:hover { color: #4b5563; }
.ob-pw-toggle:active { transform: scale(0.92); }
.ob-pw-toggle:focus-visible {
    outline: none;
    color: #FF8B42;
}
.ob-input:read-only {
    background: #f5f6f8;
    color: #6b7280;
    cursor: default;
}
.ob-link-btn {
    background: none;
    border: none;
    color: #FF8B42;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 4px;
    align-self: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ob-link-btn:hover:not(:disabled) { color: #e67a35; }
.ob-link-btn:disabled { opacity: 0.5; cursor: default; }
.ob-privacy-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.ob-privacy-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #166534;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.ob-privacy-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #c8d8cd;
    display: inline-block;
    flex: none;
}
.ob-slp-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 4px;
    padding: 7px 14px;
    background: #f0faf4;
    border: 1px solid #bbf0d0;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: #166534;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.3;
}
.ob-social-proof {
    text-align: center;
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    color: #FF8B42;
    letter-spacing: 0.01em;
}
.ob-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 16px;
    color: rgba(0, 0, 0, 0.35);
    font-size: 12px;
}
.ob-divider::before,
.ob-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}
.ob-input-wrap { position: relative; }
.ob-verified-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    pointer-events: none;
}
.ob-input-verified {
    border-color: #16a34a !important;
    color: rgba(0, 0, 0, 0.5);
    padding-right: 90px;
}

/* Back button */
.ob-back-btn {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.4);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    margin-bottom: 18px;
    display: block;
    transition: color 0.15s;
}
.ob-back-btn:hover { color: rgba(0, 0, 0, 0.65); }

@media (max-width: 880px) {
    .ob-overlay {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .ob-panel-right {
        order: 0;
        height: 45vw;
        min-height: 220px;
        max-height: 320px;
        flex: none;
        width: 100%;
    }
    .ob-panel-left {
        order: 1;
        flex: 1;
        width: 100%;
    }
    .ob-form-footer {
        order: 2;
        flex: none;
    }
    .ob-form-body {
        padding: 32px 24px 24px;
        justify-content: flex-start;
        overflow-y: visible;
    }
    .ob-card { max-width: 100%; }
}
@media (max-width: 480px) {
    .ob-title { font-size: 22px; }
}

/* =========================================================
   LIGHT-ROUTE SHARED CHROME — white page + light navbar/bottom-nav.
   Applied to programme, drill, progress routes via body.light-route.
   ========================================================= */
body.light-route {
    background: #FFFFFF !important;
    color: #222222;
    -webkit-font-smoothing: antialiased;
}
body.light-route .navbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EBEBEB !important;
    box-shadow: none !important;
}
body.light-route .navbar .nav-logo-text { color: #222222 !important; }
body.light-route .navbar .nav-menu a { color: #222222 !important; }
body.light-route .navbar .install-btn {
    background: transparent !important;
    color: #222222 !important;
    border: 1px solid #EBEBEB !important;
}
body.light-route .nav-avatar {
    background: #F7F7F7 !important;
    border: 1px solid #EBEBEB !important;
    color: #222222 !important;
}
body.light-route .nav-avatar-menu {
    background: #FFFFFF !important;
    border: 1px solid #EBEBEB !important;
    color: #222222 !important;
}
body.light-route .nav-avatar-email { color: #717171 !important; }
body.light-route .nav-avatar-item { color: #222222 !important; }
body.light-route .nav-avatar-item:hover { background: #F7F7F7 !important; }

body.light-route .bottom-nav {
    background: #FFFFFF !important;
    border-top: 1px solid #EBEBEB !important;
}
body.light-route .bottom-nav .tab { color: #717171 !important; }
body.light-route .bottom-nav .tab.active { color: #00C2D9 !important; }

/* Drill page content readability on white background */
body.light-route .drill-group {
    background: #FBFBFB;
    border-color: #EBEBEB;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
}
body.light-route .drill-group[open] {
    background: #FBFBFB;
    border-color: #EBEBEB;
}
body.light-route .drill-group-header h3 { color: #222222; }
body.light-route .drill-group-chev { color: rgba(34,34,34,0.7); }
body.light-route .drill-group-count {
    color: #717171;
    background: #F7F7F7;
}
body.light-route .drill-group-instructions,
body.light-route .drill-group-tips-list li { color: #444444; }
body.light-route .drill-group-tips-label { color: #222222; }
body.light-route .btn-start-white {
    background: #111;
    color: #fff;
}
body.light-route .btn-start-white:hover { background: #000; }

/* Drill exercise layout — match phase-1's split card (sus-s): light instructions
   on the left, a dark #0a0a0a column flush to the card's right edge top-to-bottom.
   The single-drill card (.drill-group-card) becomes a 2-col grid; the body/two-col
   wrappers collapse via display:contents so header, instructions and the dark
   column all participate directly in the grid. */
body.light-route .drill-exercise-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    padding: 0;
}
body.light-route .drill-exercise-split > .drill-group-header { grid-column: 1; grid-row: 1; }
body.light-route .drill-exercise-split > .drill-group-body,
body.light-route .drill-exercise-split .drill-group-two-col { display: contents; }
/* pre-start instruction column (record/conversation kinds) spans full width */
body.light-route .drill-exercise-split .drill-group-centered { grid-column: 1 / -1; padding: 0 24px 24px; }
body.light-route .drill-exercise-split .drill-group-left {
    grid-column: 1;
    grid-row: 2;
    padding: 0 24px 24px;
}
/* dark right column — fills the whole right half flush to the card edges */
body.light-route .drill-exercise-split .drill-group-right {
    grid-column: 2;
    grid-row: 1 / 3;
    flex: none;
    width: auto;
    max-width: none;
    margin: 0 0 0 12px;
    overflow: visible;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 14px 0 0 14px;
}
/* header — match phase-1's teal square step badge + larger title (sus-s-step-badge) */
body.light-route .drill-exercise-split > .drill-group-header {
    padding: 24px 24px 10px 24px;
    align-items: stretch;
    gap: 14px;
}
body.light-route .drill-exercise-split .drill-group-n {
    background: #00E5FF;
    color: #fff;
    width: auto;
    height: auto;
    min-width: 28px;
    padding: 0 6px;
    border-radius: 0;
    align-self: stretch;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
body.light-route .drill-exercise-split .drill-group-header h3 {
    align-self: center;
    font-size: 18px;
    font-weight: 600;
    color: #1A202C;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
body.light-route .drill-exercise-split .drill-group-title-block {
    align-self: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}
body.light-route .drill-exercise-split .drill-group-title-block h3 {
    align-self: auto;
}
body.light-route .drill-exercise-split .drill-group-subtitle {
    font-size: 13px;
    color: #666;
    margin: 3px 0 0;
    font-weight: 400;
    line-height: 1.3;
}
/* Instructions/Tips typography — match phase-1 leader (sus-s) exactly across all phases */
body.light-route .drill-exercise-split .drill-group-tips-label {
    font-size: 15px;
    font-weight: 700;
    color: #1A202C;
}
body.light-route .drill-exercise-split .drill-group-instructions,
body.light-route .drill-exercise-split .drill-group-tips-list li {
    font-size: 14px;
    line-height: 1.5;
    color: #2D3748;
}
body.light-route .drill-exercise-split .drill-group-instr-list { gap: 8px; }
body.light-route .drill-exercise-split .drill-group-tips-list { gap: 12px; }
body.light-route .drill-exercise-split .drill-group-instr-list li::marker {
    color: #2D3748;
}
body.light-route .drill-exercise-split .drill-group-instructions strong,
body.light-route .drill-exercise-split .drill-group-tips-list li strong {
    font-weight: 700;
    color: #1A202C;
}

/* the rep panel is a dark inner card (like phase-1 stat cards). #0a0a0a keeps it
   readable both on the split layout's dark column and on grouped light cards. */
body.light-route .drill-group-right .timer-fieldset,
body.light-route .drill-group-right .wordlist-sets-fieldset {
    background: #0a0a0a;
    border: none;
    border-radius: 16px;
}
/* Practice view: tool/instructions card vertically centred in the viewport.
   min-height (not height) lets tall content grow + scroll instead of clipping;
   padding-block keeps the card off the screen edges when centred. */
.drill-view-centered {
    padding-block: 16px;
    box-sizing: border-box;
}

/* "‹ Instructions" back link — mobile-only (shown in the screen-2 block below).
   On desktop both columns show at once so there is nothing to go back to. */
.drill-mobile-back-btn { display: none; }

@media (max-width: 700px) {
    body.light-route .drill-exercise-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        /* drop the light card chrome — on mobile the dark tool is full-bleed */
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
        padding: 0;
    }
    /* Screen 2 (tool): hide the numbered header + the duplicated instructions so
       the dark tool is front-and-centre, exactly like phase-1's sus-s layout. */
    body.light-route .drill-exercise-split.show-tool > .drill-group-header { display: none; }
    body.light-route .drill-exercise-split .drill-group-left { display: none; }
    /* "‹ Instructions" back link sits where the header was (row 1) — matches
       phase-1's sus-s back nav: muted white text + faint divider on the dark page. */
    body.light-route .drill-exercise-split.show-tool {
        background: transparent !important;
    }
    body.light-route:has(.drill-exercise-split.show-tool),
    body.light-route:has(.drill-exercise-split.show-tool) #app.container,
    body.light-route:has(.drill-exercise-split.show-tool) main#app {
        background: #0a0a0a !important;
    }
    body.light-route .drill-exercise-split .drill-mobile-back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 0 0 16px 0;
        margin-bottom: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255,255,255,0.5);
        cursor: pointer;
        transition: color 0.2s ease;
    }
    body.light-route .drill-exercise-split .drill-mobile-back-btn:hover { color: #fff; }
    /* Screen 1 Start: big teal pill with a "→" affordance, matching phase-1's
       sus-s screen-1 Start button. */
    body.light-route .drill-exercise-split .drill-group-centered .btn-start-white {
        padding: 12px 56px;
        font-size: 15px;
        background: #00E5FF;
        color: #06222A;
    }
    body.light-route .drill-exercise-split .drill-group-centered .btn-start-white:hover {
        background: #33EAFF;
    }
    body.light-route .drill-exercise-split .drill-group-centered .btn-start-white::after {
        content: " →";
    }
    body.light-route .drill-exercise-split .drill-group-right {
        grid-column: 1;
        grid-row: 2;
        /* full-bleed dark tool, full width, all corners rounded */
        margin: 0;
        width: 100%;
        border-radius: 16px;
        padding: 24px 16px;
    }
    body.light-route .drill-exercise-split .drill-group-n { min-width: 24px; font-size: 12px; }
    body.light-route .drill-exercise-split .drill-group-header h3 { font-size: 16px; }
    body.light-route .drill-exercise-split .drill-group-subtitle { font-size: 12px; margin-top: 2px; }
}
body.light-route .drill-group-right .timer-fieldset legend,
body.light-route .drill-group-right .wordlist-sets-fieldset legend {
    /* float trick: makes the browser draw the full top border (no legend notch)
       so the title sits inside the card, centered — matching phase-1's stat card. */
    float: left;
    width: 100%;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 14px;
    font-weight: 700;
    color: #00E5FF;
    padding: 4px 0 0;
    margin: 0;
}
body.light-route .drill-group-right .timer-fieldset legend + *,
body.light-route .drill-group-right .wordlist-sets-fieldset legend + * {
    clear: both;
}
/* in-panel Start/Stop button sits on the dark surface — keep it light/teal,
   not the light-route dark (#111) treatment which would vanish. */
body.light-route .drill-group-right .btn-start-white {
    background: #00E5FF;
    color: #06222A;
    /* Match phase-1 (.sus-s-start-btn) so every drill's Start button is one size */
    padding: 10px 40px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}
body.light-route .drill-group-right .btn-start-white:hover { background: #33EAFF; }
body.light-route .drill-group-right .btn-start-white.is-recording {
    background: #fff;
    color: #111;
}
body.light-route .drill-group-right .rep-bar-fill { background: #00E5FF; }

.pp-root {
    --pp-canvas:      #FFFFFF;
    --pp-surface:     #F7F7F7;
    --pp-border:      #EBEBEB;
    --pp-border-mid:  #DEDEDE;
    --pp-text-1:      #222222;
    --pp-text-2:      #717171;
    --pp-text-3:      #AAAAAA;
    --pp-accent:      #00C2D9;
    --pp-accent-ink:  #0B0C0E;
    --pp-success:     #16A34A;
    --pp-radius:      8px;
    --pp-mono:        'Roboto Mono', 'SF Mono', monospace;
    --pp-display:     'Quicksand', sans-serif;
    --pp-body:        'Inter', -apple-system, sans-serif;
    --pp-phase-font:  'Rubik', sans-serif;
    --pp-shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);

    --pp-fs-title:      26px;
    --pp-fs-breadcrumb: 18px;
    --pp-fs-pill:       13px;
    --pp-fs-phase-name: 14px;
    --pp-fs-phase-num:  12px;
    --pp-fs-drill-text: 13px;
    --pp-fs-drill-num:  12px;
    --pp-fs-pip-label:  9px;
    --pp-pip-size:      10px;
    --pp-pip-gap:       2px;
    --pp-space-nav-h:   26px;
    --pp-space-main-h:  20px;
    --pp-space-main-v:  28px;
    --pp-space-card-h:  24px;
    --pp-space-card-v:  24px;
    --pp-space-phase-h: 14px;
    --pp-space-phase-v: 9px;
    --pp-space-drill-l: 36px;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pp-canvas);
    color: var(--pp-text-1);
    font-family: 'Rubik', sans-serif;
    line-height: 1.45;
    font-size: 16px;
}
@media (max-width: 600px) {
    .pp-root {
        --pp-fs-title:      21px;
        --pp-fs-breadcrumb: 15px;
        --pp-fs-pill:       13px;
        --pp-fs-phase-name: 14px;
        --pp-fs-phase-num:  12px;
        --pp-fs-drill-text: 13px;
        --pp-fs-drill-num:  12px;
        --pp-fs-pip-label:  9px;
        --pp-pip-size:      9px;
        --pp-pip-gap:       1px;
        --pp-space-nav-h:   16px;
        --pp-space-main-h:  14px;
        --pp-space-main-v:  20px;
        --pp-space-card-h:  16px;
        --pp-space-card-v:  18px;
        --pp-space-phase-h: 12px;
        --pp-space-phase-v: 8px;
        --pp-space-drill-l: 30px;
    }
}
@media (max-width: 380px) {
    .pp-root {
        --pp-fs-title:      18px;
        --pp-fs-breadcrumb: 13px;
        --pp-fs-pill:       13px;
        --pp-fs-phase-name: 14px;
        --pp-fs-phase-num:  12px;
        --pp-fs-drill-text: 13px;
        --pp-fs-drill-num:  12px;
        --pp-fs-pip-label:  8px;
        --pp-pip-size:      7px;
        --pp-pip-gap:       1px;
        --pp-space-nav-h:   12px;
        --pp-space-main-h:  10px;
        --pp-space-main-v:  16px;
        --pp-space-card-h:  12px;
        --pp-space-card-v:  14px;
        --pp-space-phase-h: 10px;
        --pp-space-phase-v: 7px;
        --pp-space-drill-l: 24px;
    }
}

/* ── Main ── */
.pp-main {
    flex: 1;
    padding: var(--pp-space-main-v) var(--pp-space-main-h) 24px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ── Today Card ── */
.pp-today-card {
    background: #FBFBFB;
    border: 1px solid var(--pp-border);
    border-radius: 10px;
    box-shadow: var(--pp-shadow-card);
    padding: 14px 16px 16px 16px;
    margin-bottom: 10px;
}
.pp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.pp-badge {
    background: var(--pp-accent);
    color: var(--pp-accent-ink);
    letter-spacing: 0.10em;
    padding: 4px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    line-height: 1.2;
    height: 28px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
}
.pp-breadcrumb-text {
    color: var(--pp-text-2);
    font-weight: 400;
    font-size: var(--pp-fs-breadcrumb);
    line-height: 1.45;
}
.pp-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #222222;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.pp-title-check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.pp-mono {
    font-family: var(--pp-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pp-text-2);
    line-height: 1.45;
    display: block;
    margin-bottom: 10px;
}
.pp-mono.success { color: oklch(0.6 0.18 145); }

.pp-drills {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 26px;
    margin-top: 0;
}
.pp-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pp-canvas);
    border: 1px solid var(--pp-border);
    border-radius: 6px;
    padding: 9px 12px;
    color: #222222;
    font-size: 13px;
    font-weight: 400;
    width: 100%;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pp-pill-btn:hover {
    background: var(--pp-surface);
    border-color: var(--pp-border-mid);
}
.pp-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
}
.pp-pill-title {
    font-family: 'Inter', sans-serif;
    font-size: var(--pp-fs-pill);
    flex: 1;
    font-weight: 400;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-pill-chev {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.45;
}

/* ── Phase List ── */
.pp-phase-head {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    margin-bottom: 10px;
}
.pp-phase-list {
    background: var(--pp-canvas);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow-card);
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pp-phase-list li { list-style: none; }
.pp-phase {
    display: block;
}
.pp-phase-row {
    display: flex;
    align-items: center;
    padding: var(--pp-space-phase-v) var(--pp-space-phase-h);
    cursor: pointer;
    background: var(--pp-canvas);
    user-select: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--pp-border);
    transition: background 0.15s ease;
}
.pp-phase-row:hover { background: var(--pp-surface); }
.pp-phase-list > li:last-child > .pp-phase > .pp-phase-row { border-bottom: none; }
.pp-phase.active > .pp-phase-row {
    border-left-color: var(--pp-accent);
    border-bottom: 1px solid var(--pp-border);
}
.pp-phase-num {
    width: 24px;
    flex-shrink: 0;
    margin-right: 10px;
    font-family: 'Inter', sans-serif;
    font-size: var(--pp-fs-phase-num);
    font-weight: 500;
    color: #222222;
}
.pp-phase-body {
    flex: 1;
    min-width: 0;
}
.pp-phase-name {
    font-family: 'Inter', sans-serif;
    font-size: var(--pp-fs-phase-name);
    color: #222222;
    letter-spacing: -0.01em;
    display: block;
    font-weight: 400;
}
.pp-phase.active .pp-phase-name { font-weight: 400; }
.pp-phase-count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--pp-text-3);
    font-weight: 400;
    margin-left: 12px;
}
.pp-phase-chev-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 12px;
}
.pp-phase-chev {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
    opacity: 0.75;
}
.pp-phase.active .pp-phase-chev { transform: rotate(180deg); }

/* ── Pip grid ── */
.pp-pip-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 4px;
}
.pp-pips {
    display: flex;
    gap: var(--pp-pip-gap);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pp-pip {
    width: var(--pp-pip-size);
    height: var(--pp-pip-size);
    border-radius: 2px;
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid var(--pp-border-mid);
    box-sizing: border-box;
}
.pp-pip.done {
    background: var(--pp-accent);
    border: none;
    opacity: 0.65;
}
.pp-pip.today {
    background: var(--pp-accent);
    border: none;
    box-shadow: 0 0 0 2px rgba(0,194,217,0.28);
}
.pp-pip-label {
    letter-spacing: 0.10em;
    white-space: nowrap;
    text-transform: uppercase;
    color: rgb(115, 115, 115);
    font-family: 'Inter', sans-serif;
    font-size: var(--pp-fs-pip-label);
    font-weight: 500;
}

/* ── Drill expansion ── */
.pp-phase-drills {
    background: var(--pp-surface);
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--pp-border);
    overflow: hidden;
    animation: pp-drills-expand 220ms ease-in-out;
}
.pp-phase-drills.collapsing {
    animation: pp-drills-collapse 220ms ease-in-out forwards;
    pointer-events: none;
}
@keyframes pp-drills-expand {
    from { max-height: 0;     opacity: 0; }
    to   { max-height: 600px; opacity: 1; }
}
@keyframes pp-drills-collapse {
    from { max-height: 600px; opacity: 1; }
    to   { max-height: 0;     opacity: 0; }
}
.pp-phase-list > li:last-child > .pp-phase.active > .pp-phase-drills { border-bottom: none; }
.pp-drill-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--pp-space-phase-v) var(--pp-space-phase-h) var(--pp-space-phase-v) var(--pp-space-drill-l);
    border-bottom: 1px solid var(--pp-border);
    background: var(--pp-surface);
    cursor: pointer;
    color: var(--pp-text-1);
    text-decoration: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s ease;
}
.pp-drill-row:hover { background: #F0F0F0; }
.pp-phase-drills > :last-child { border-bottom: none; }
.pp-drill-num {
    flex-shrink: 0;
    color: #222222;
    width: 20px;
    font-family: 'Inter', sans-serif;
    font-size: var(--pp-fs-drill-num);
    font-weight: 500;
}
.pp-drill-title {
    color: var(--pp-text-1);
    flex: 1;
    font-size: var(--pp-fs-drill-text);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    min-width: 0;
}
.pp-drill-arrow {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    color: var(--pp-text-3);
    display: inline-flex;
    align-items: center;
}
.pp-drill-arrow svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Lock ── */
.pp-lock {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--pp-text-3);
    margin-left: 8px;
}
.pp-lock svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.programme-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 12px);
    background: rgba(20, 20, 22, 0.96);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    box-shadow: var(--shadow-toast, 0 10px 30px rgba(0,0,0,0.35));
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 9999;
    max-width: min(90vw, 420px);
    text-align: center;
}
.programme-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.programme-lock svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    display: block;
}

/* ---------- Sibilant /s/ Visual Biofeedback ---------- */
.sibilant-spec-fieldset {
    margin-top: 16px;
    padding: 18px 20px 20px;
    position: relative;
}
.timer-fieldset--with-spec { padding-bottom: 20px; }
.sibilant-spec-section {
    margin-top: 18px;
    padding-top: 4px;
    position: relative;
}
.sibilant-spec-section .sibilant-spec-header {
    position: absolute;
    left: 60%;
    top: -28px;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    pointer-events: none;
}
.sibilant-spec-help-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.sibilant-spec-wrap { gap: 0; }
.sibilant-spec-section .sibilant-spec-target-pill {
    font-size: 10px;
    padding: 4px 10px;
}
.timer-inner-fieldset {
    border: 1px solid #70704F;
    border-radius: 12px;
    padding: 8px 22px 12px;
    background: transparent;
    width: fit-content;
    margin: 0 auto;
}
.timer-inner-fieldset .rep-view { padding: 0; }
.sibilant-spec-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.sibilant-spec-header {
    position: absolute;
    top: 12px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.sibilant-spec-target-pill {
    background: rgba(255, 176, 0, 0.12);
    border: 1px solid rgba(255, 176, 0, 0.5);
    color: #FFB000;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.3px;
}
.sibilant-spec-help {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: all 0.15s;
}
.sibilant-spec-help:hover {
    border-color: #FFB000;
    color: #FFB000;
}

/* Help modal */
.sibilant-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.sibilant-help-modal {
    position: relative;
    background: #fff;
    color: #1a1a1a;
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    padding: 32px 36px 24px;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.sibilant-help-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: transparent;
    color: #444;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sibilant-help-tag {
    display: inline-block;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.sibilant-help-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #111;
}
.sibilant-help-lead {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}
.sibilant-help-card {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 18px 20px;
    background: #fafafa;
    margin-bottom: 24px;
}
.sibilant-help-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #222;
    margin-bottom: 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.sibilant-help-card-text { font-size: 14px; line-height: 1.55; color: #333; margin: 0; }
.sibilant-help-card-text strong { color: #111; font-weight: 700; }

.sibilant-help-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #222;
    margin: 18px 0 10px;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.sibilant-help-table-head,
.sibilant-help-row {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1.6fr 0.9fr;
    gap: 12px;
    padding: 12px 4px;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.sibilant-help-table-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #888;
    border-bottom-color: #ddd;
}
.sibilant-help-cell { font-size: 13px; color: #444; line-height: 1.4; }
.sibilant-help-sound { display: flex; flex-direction: column; gap: 4px; }
.sibilant-help-label { font-size: 13px; font-weight: 700; color: #111; }
.sibilant-help-chip {
    display: inline-block;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    color: #333;
    width: max-content;
}
.sibilant-help-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sibilant-help-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.sibilant-help-status--gray { color: #9aa3ad; }
.sibilant-help-status--amber { color: #FFB000; }

.sibilant-help-instr {
    margin: 4px 0 24px;
    padding-left: 22px;
    color: #333;
    font-size: 14px;
    line-height: 1.7;
}
.sibilant-help-instr li { margin-bottom: 4px; }

.sibilant-help-dismiss {
    width: 100%;
    background: #1a2233;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    margin-top: 12px;
}
.sibilant-help-dismiss:hover { background: #0f1623; }

@media (max-width: 600px) {
    .sibilant-help-modal { padding: 24px 20px 16px; }
    .sibilant-help-title { font-size: 22px; }
    .sibilant-help-table-head,
    .sibilant-help-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
    .sibilant-help-table-head .sibilant-help-cell:nth-child(3),
    .sibilant-help-table-head .sibilant-help-cell:nth-child(4) { display: none; }
}
.sibilant-spec-canvas {
    width: 100%;
    height: 240px;
    display: block;
    background: transparent;
    cursor: pointer;
}
.sibilant-spec-instruction {
    text-align: center;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 4px;
}
.sibilant-spec-status {
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

/* Live Gemini sibilant analysis */
.live-lisp-panel {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.live-lisp-head { margin-bottom: 12px; }
.live-lisp-title { margin: 0 0 4px; font-size: 15px; color: #fff; }
.live-lisp-copy { margin: 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.live-lisp-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.live-lisp-status { font-size: 12px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.5px; }
.live-lisp-summary { font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.live-lisp-transcript {
    min-height: 120px;
    max-height: 260px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
    line-height: 2;
}
.live-word {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid transparent;
}
.live-word.w-none { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); }
.live-word.w-correct { color: #b6f5b8; background: rgba(46,160,67,0.18); border-color: rgba(46,160,67,0.5); }
.live-word.w-lisped { color: #ffb4b4; background: rgba(220,80,80,0.18); border-color: rgba(220,80,80,0.55); }

/* =====================================================================
   PER-PHASE REP BOX OVERRIDES
   ---------------------------------------------------------------------
   Each block scopes only the rep-counter box for that phase via the
   `[data-phase="phase-X"]` attribute set on the drill container.
   Edit values inside the block to change one phase only — other phases
   stay untouched. Selectors available inside each block:
     .rep-view         — outer wrap (flex column)
     .rep-big-num      — large counter number
     .rep-of           — "of N" / "X / Y reps" text
     .rep-bar          — progress track
     .rep-bar-fill     — progress fill
     .rep-hint         — small hint text
     .rep-next-btn     — Next button
     .rep-set-label    — set label (if shown)
   ===================================================================== */

/* ---- phase-0 (Baseline) ---- */
[data-phase="phase-0"] .rep-view {}
[data-phase="phase-0"] .rep-big-num {}
[data-phase="phase-0"] .rep-of {}
[data-phase="phase-0"] .rep-bar {}
[data-phase="phase-0"] .rep-bar-fill {}
[data-phase="phase-0"] .rep-hint {}
[data-phase="phase-0"] .rep-next-btn {}

/* ---- phase-1 ---- */
[data-phase="phase-1"] .rep-view {}
[data-phase="phase-1"] .rep-big-num {}
[data-phase="phase-1"] .rep-of {}
[data-phase="phase-1"] .rep-bar {}
[data-phase="phase-1"] .rep-bar-fill {}
[data-phase="phase-1"] .rep-hint {}
[data-phase="phase-1"] .rep-next-btn {}

/* ---- phase-1a ---- */
[data-phase="phase-1a"] .rep-view {}
[data-phase="phase-1a"] .rep-big-num {}
[data-phase="phase-1a"] .rep-of {}
[data-phase="phase-1a"] .rep-bar {}
[data-phase="phase-1a"] .rep-bar-fill {}
[data-phase="phase-1a"] .rep-hint {}
[data-phase="phase-1a"] .rep-next-btn {}

/* ---- phase-2 ---- */
[data-phase="phase-2"] .rep-view {}
[data-phase="phase-2"] .rep-big-num {}
[data-phase="phase-2"] .rep-of {}
[data-phase="phase-2"] .rep-bar {}
[data-phase="phase-2"] .rep-bar-fill {}
[data-phase="phase-2"] .rep-hint {}
[data-phase="phase-2"] .rep-next-btn {}

/* ---- phase-3 ---- */
[data-phase="phase-3"] .rep-view {}
[data-phase="phase-3"] .rep-big-num {}
[data-phase="phase-3"] .rep-of {}
[data-phase="phase-3"] .rep-bar {}
[data-phase="phase-3"] .rep-bar-fill {}
[data-phase="phase-3"] .rep-hint {}
[data-phase="phase-3"] .rep-next-btn {}

/* ---- phase-4 ---- */
.wordlist-sets-fieldset--p4 {
    max-width: 80%;
    width: 80%;
    box-sizing: border-box;
    overflow: hidden;
}
.drill-group-right:has(.wordlist-sets-fieldset--p4) {
    flex: 0 0 720px;
    margin-left: 0;
    margin-right: 0;
}
@media (max-width: 1100px) {
    .drill-group-right:has(.wordlist-sets-fieldset--p4) {
        flex: 0 0 560px;
    }
}
@media (max-width: 820px) {
    .drill-group-right:has(.wordlist-sets-fieldset--p4) {
        flex: 1 1 auto;
        width: 100%;
    }
}
.wordlist-sets-fieldset--p4 .rep-view {
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}
.wordlist-sets-fieldset--p4 .wordlist-sets-syllables {
    flex-flow: column nowrap;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin: 8px 0 16px;
    padding: 0 4px;
    box-sizing: border-box;
}
.wordlist-sets-fieldset--p4 .wordlist-sets-syllables .word-chip {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    box-sizing: border-box;
}
.wordlist-sets-fieldset--p4 .rep-big-num { font-size: 56px; }
[data-phase="phase-4"] .rep-of {}
[data-phase="phase-4"] .rep-bar {}
[data-phase="phase-4"] .rep-bar-fill {}
[data-phase="phase-4"] .rep-hint {}
[data-phase="phase-4"] .rep-next-btn {}

/* Mobile: fit carrier-phrase drill in single viewport so Start button + phrase
   are both visible without scrolling. */
@media (max-width: 640px) {
    .practice-card:has(.carrier-frame) { padding: 12px 14px 18px !important; }
    .wordlist-sets-fieldset:has(.carrier-frame) { padding: 6px 12px 12px; }
    .wordlist-sets-fieldset:has(.carrier-frame) .rep-view { padding: 6px 0 2px; gap: 4px; }
    .wordlist-sets-fieldset:has(.carrier-frame) .wordlist-sets-syllables { margin: 4px 0 6px; gap: 4px; }
    .wordlist-sets-fieldset:has(.carrier-frame) .rep-big-num { font-size: 40px; }
    .wordlist-sets-fieldset:has(.carrier-frame) .rep-of { font-size: 13px; }
    .carrier-frame { font-size: 19px; line-height: 1.5; margin: 2px 0 8px; }
    .carrier-slot { min-width: 72px; padding: 2px 12px; margin: 0 4px; }
    .carrier-queue { gap: 6px; margin-top: 4px; }
    .carrier-chip { padding: 6px 12px; font-size: 13px; }
    .rep-hint { font-size: 11px; }
    .wordlist-sets-fieldset:has(.carrier-frame) .recorder-status { min-height: 0 !important; margin-top: 2px !important; }
    .wordlist-sets-fieldset:has(.carrier-frame) .btn-start-white { margin: 6px auto 0 !important; padding: 10px 28px; font-size: 14px; }
}

/* ---- phase-5 ---- */
[data-phase="phase-5"] .rep-view {}
[data-phase="phase-5"] .rep-big-num {}
[data-phase="phase-5"] .rep-of {}
[data-phase="phase-5"] .rep-bar {}
[data-phase="phase-5"] .rep-bar-fill {}
[data-phase="phase-5"] .rep-hint {}
[data-phase="phase-5"] .rep-next-btn {}

/* ---- phase-6 ---- */
[data-phase="phase-6"] .rep-view {}
[data-phase="phase-6"] .rep-big-num {}
[data-phase="phase-6"] .rep-of {}
[data-phase="phase-6"] .rep-bar {}
[data-phase="phase-6"] .rep-bar-fill {}
[data-phase="phase-6"] .rep-hint {}
[data-phase="phase-6"] .rep-next-btn {}

/* ---- phase-7 ---- */
[data-phase="phase-7"] .rep-view {}
[data-phase="phase-7"] .rep-big-num {}
[data-phase="phase-7"] .rep-of {}
[data-phase="phase-7"] .rep-bar {}
[data-phase="phase-7"] .rep-bar-fill {}
[data-phase="phase-7"] .rep-hint {}
[data-phase="phase-7"] .rep-next-btn {}

/* ---- phase-8 ---- */
[data-phase="phase-8"] .rep-view {}
[data-phase="phase-8"] .rep-big-num {}
[data-phase="phase-8"] .rep-of {}
[data-phase="phase-8"] .rep-bar {}
[data-phase="phase-8"] .rep-bar-fill {}
[data-phase="phase-8"] .rep-hint {}
[data-phase="phase-8"] .rep-next-btn {}

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

/* ---------- Onboarding wizard ---------- */
.obw-card {
    max-width: 460px;
    width: 100%;
    text-align: left;
    position: relative;
    padding: 0;
    animation: none !important;
}
.obw-back {
    position: absolute;
    top: -32px;
    left: 0;
    background: none;
    border: none;
    color: rgba(0,0,0,.45);
    font: 500 13px 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.obw-back:hover { color: rgba(0,0,0,.8); }

.obw-header { margin-bottom: 18px; }
.obw-header .ob-logo { margin-bottom: 14px; justify-content: center; }
.obw-progress { margin-bottom: 14px; }

.obw-prog-pills { display: flex; gap: 4px; margin-bottom: 6px; }
.obw-prog-pill { flex: 1; height: 3px; border-radius: 2px; background: rgba(0,0,0,.10); transition: background .3s; }
.obw-prog-pill.on { background: #FF9800; }
.obw-prog-step-label { text-align: center; font-size: 11px; color: rgba(0,0,0,.38); }
.obw-prog-circles { display: none; align-items: center; height: 24px; }
.obw-prog-circle {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid rgba(0,0,0,.15);
    font: 700 9px 'Inter', sans-serif; color: rgba(0,0,0,.28);
    transition: all .25s;
}
.obw-prog-circle.done { background: #FF9800; border-color: #FF9800; color: #fff; }
.obw-prog-circle.cur  {
    background: #FF9800; border-color: #FF9800; color: #fff;
    width: 22px; height: 22px; font-size: 11px;
    box-shadow: 0 0 0 4px rgba(255,139,66,.13);
}
.obw-prog-sep { flex: 1; height: 2px; border-radius: 1px; background: rgba(0,0,0,.10); margin: 0 3px; transition: background .3s; }
.obw-prog-sep.on { background: #FF9800; }

.obw-title {
    font: 700 22px 'Quicksand', sans-serif;
    color: #111; line-height: 1.22; margin: 0 0 4px; text-align: left;
}
.obw-sub { font: 400 13px 'Inter', sans-serif; color: #4D4D4D; line-height: 1.5; margin: 0; }
.obw-rule { margin-top: 14px; border-bottom: 1px solid rgba(0,0,0,.09); }

.obw-content { display: flex; flex-direction: column; gap: 10px; }
@keyframes obw-slide-fwd { from { opacity:0; transform: translateX(28px); } to { opacity:1; transform:none; } }
@keyframes obw-slide-bwd { from { opacity:0; transform: translateX(-28px); } to { opacity:1; transform:none; } }
.obw-anim-fwd { animation: obw-slide-fwd .3s cubic-bezier(.4,0,.2,1) both; }
.obw-anim-bwd { animation: obw-slide-bwd .3s cubic-bezier(.4,0,.2,1) both; }

.obw-opt {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 14px;
    background: #f8f8f8;
    border: 2px solid rgba(0,0,0,.09);
    border-radius: 12px;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    text-align: left;
    font-family: 'Inter', sans-serif;
    min-height: 52px;
    color: #111;
}
.obw-opt:hover { background: #FFF3E0; border-color: #FF9800; }
.obw-opt.on    { background: #FFF3E0; border-color: #FF9800; }
.obw-opt-label { font-size: 14px; font-weight: 500; color: #111; line-height: 1.3; }
.obw-opt-sub   { font-size: 12px; color: #4D4D4D; margin-top: 3px; line-height: 1.45; }

.obw-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,.2);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .18s;
}
.obw-radio.on { background: #FF9800; border-color: #FF9800; }
.obw-radio > div { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; }
.obw-radio.on > div { opacity: 1; }

.obw-other-input {
    width: 100%;
    padding: 11px 14px;
    background: #f8f8f8;
    border: 1.5px solid rgba(255,139,66,.55);
    border-radius: 12px;
    outline: none;
    font: 400 13px 'Inter', sans-serif;
    color: #111;
    animation: obw-slide-fwd .22s ease both;
}

.obw-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.obw-chip {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 12px 6px;
    background: #f8f8f8;
    border: 2px solid rgba(0,0,0,.09);
    border-radius: 12px;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    font-family: 'Inter', sans-serif;
    min-height: 64px;
}
.obw-chip:hover { background: #FFF3E0; border-color: #FF9800; }
.obw-chip.on    { background: #FFF3E0; border-color: #FF9800; }
.obw-chip-ph {
    font: 700 20px 'Quicksand', sans-serif;
    color: #222; line-height: 1;
}
.obw-chip.on .obw-chip-ph { color: #FF9800; }
.obw-chip-ex { font-size: 10px; color: rgba(0,0,0,.42); }
.obw-chip-check {
    position: absolute; top: 6px; right: 6px;
    width: 14px; height: 14px; border-radius: 50%; background: #FF9800;
    display: flex; align-items: center; justify-content: center;
}

.obw-focus-note {
    padding: 9px 12px; border-radius: 9px;
    font-size: 12px;
    background: #EFF6FF;
    border: 1px solid #60B0D6;
    color: #2563EB;
    line-height: 1.5;
}

.obw-section { display: flex; flex-direction: column; gap: 6px; }
.obw-sec-lbl {
    font: 700 10px 'Inter', sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    color: #FF9800;
}
.obw-stack { display: flex; flex-direction: column; gap: 7px; }

.obw-wave {
    background: #000;
    border: 1.5px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 14px 14px 10px;
    width: 100%;
    box-sizing: border-box;
}
.obw-wave svg { display: block; width: 100%; overflow: visible; }
.obw-wave-cap { font-size: 10px; color: #fff; text-align: center; margin-top: 4px; }

.obw-intro { text-align: center; padding: 0 4px; }
.obw-intro-h { font: 700 15px 'Inter', sans-serif; color: #111; margin-bottom: 4px; }
.obw-intro-p { font-size: 12px; color: #4D4D4D; line-height: 1.55; }

.obw-feat {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px;
    background: #f8f8f8;
    border: 1.5px solid rgba(0,0,0,.09);
    border-radius: 12px;
}
.obw-feat-num {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,139,66,.14);
    display: flex; align-items: center; justify-content: center;
    font: 700 13px 'Inter', sans-serif;
    color: #FF9800;
}
.obw-feat-body { min-width: 0; flex: 1; }
.obw-feat-title { font: 600 14px 'Inter', sans-serif; color: #111; line-height: 1.3; margin-bottom: 3px; }
.obw-feat-desc  { font-size: 12px; color: rgba(0,0,0,.52); line-height: 1.5; }

.ob-form-footer.ob-foot-wizard {
    flex-direction: column;
    gap: 10px;
    padding: 18px 38px 14px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    flex: 0 0 auto;
}
.ob-foot-wizard .obw-cta { max-width: 460px; margin: 0 auto; }
.ob-foot-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.ob-foot-wizard .ob-foot-links a {
    font-size: 12px;
    color: #5b6470;
    text-decoration: none;
}
.obw-cta {
    width: 100%;
    padding: 14px 20px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 12px;
    font: 600 15px 'Inter', sans-serif;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 52px;
    transition: background .18s, box-shadow .18s, transform .15s;
}
.obw-cta:hover:not(:disabled) {
    background: #111;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    transform: translateY(-1px);
}
.obw-cta:disabled { background: rgba(0,0,0,.07); color: rgba(0,0,0,.28); cursor: not-allowed; }

/* Wizard: vertically centered, scroll-safe (desktop only) */
@media (min-width: 881px) {
    .ob-form-body:has(.obw-card) {
        justify-content: safe center;
        padding: 48px 38px 12px;
        flex: 0 1 auto;
    }
    .ob-panel-left:has(.obw-card) {
        justify-content: center;
        overflow-y: auto;
    }
}

/* Desktop: circles instead of pills */
@media (min-width: 881px) {
    .obw-prog-circles    { display: flex; }
    .obw-prog-pills      { display: none; }
    .obw-prog-step-label { display: none; }
    .obw-title { font-size: 26px; }
    .obw-back  { top: -8px; }
}

/* Mobile: wizard adaptive */
@media (max-width: 880px) {
    .ob-overlay { overflow: hidden; inset: 0; height: 100dvh; }
    .ob-overlay:has(.obw-card) .ob-panel-right { display: none; }
    .ob-overlay:has(.obw-card) .ob-panel-left { width: 100%; flex: 1 1 auto; overflow: hidden; min-height: 0; height: 100%; }
    .ob-overlay:has(.ob-card) { flex-direction: column; }
    .ob-overlay:has(.ob-card) .ob-panel-right { width: 100%; flex: 0 0 32dvh; height: 32dvh; min-height: 0; border-right: none; border-bottom: 1px solid rgba(0,0,0,.06); }
    .ob-overlay:has(.ob-card) .ob-panel-right::after { height: 70%; }
    .ob-overlay:has(.ob-card) .ob-photo-badge { padding: 12px 16px 14px; }
    .ob-overlay:has(.ob-card) .ob-panel-left { width: 100%; flex: 1 1 auto; overflow: hidden; min-height: 0; }
    .ob-form-body:has(.ob-card) { padding-top: 24px; justify-content: flex-start; }
    .ob-overlay:has(.ob-card) .ob-logo { margin-top: 8px; margin-bottom: 14px; }
    .ob-form-body { flex: 1 1 auto; min-height: 0; padding: 20px 18px 12px; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .ob-form-body:has(.obw-card) { padding: 28px 18px 12px; justify-content: flex-start; }
    .ob-form-footer { flex: 0 0 auto; }
    .ob-form-footer.ob-foot-wizard { padding: 14px 18px 14px; }
    .ob-foot-wizard .obw-cta { max-width: 100%; }
    .obw-card { padding-top: 28px; max-width: 100%; }
    .obw-back { top: 0; font-size: 14px; }
    .obw-header .ob-logo { margin-bottom: 12px; }
    .obw-title { font-size: 20px; }
    .obw-sub { font-size: 12px; }
    .obw-feat { padding: 11px; }
    .obw-feat-num { width: 28px; height: 28px; font-size: 12px; }
    .obw-feat-title { font-size: 13px; }
    .obw-feat-desc { font-size: 11px; }
    .obw-prog-circles { display: none; }
    .obw-prog-pills { display: flex; }
    .obw-prog-step-label { display: block; }
    .obw-cta { padding: 13px 18px; min-height: 48px; font-size: 14px; }
    .obw-chip { min-height: 56px; padding: 10px 4px; }
    .obw-chip-ph { font-size: 18px; }
    .obw-opt { padding: 12px 14px; min-height: 48px; }
}
@media (max-width: 380px) {
    .obw-chip-grid { gap: 6px; }
    .obw-chip { min-height: 50px; padding: 8px 2px; }
    .obw-chip-ph { font-size: 16px; }
    .obw-chip-ex { font-size: 9px; }
}

/* ───────────────────────────────────────────────────────────────
   Diagnostic Report (new layout — mirrors lsc-web-report reference)
   ─────────────────────────────────────────────────────────────── */
.asmt-rep-root { width: 100%; max-width: 1120px; margin: 0 auto; padding: 30px 22px 26px; color: #000; }
.asmt-rep-eyebrow { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #00E5FF; margin-bottom: 6px; }
.asmt-rep-title { font-family: 'Quicksand', 'Inter', sans-serif; font-size: clamp(28px, 8vw, 42px); font-weight: 800; color: #000; text-align: center; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 6px; }

.asmt-rep-gauge-wrap { display: flex; flex-direction: column; align-items: center; margin: 4px 0 14px; }
.asmt-rep-gauge-svg-wrap { width: 100%; max-width: 300px; }
.asmt-rep-gauge-fill { transition: stroke-dasharray 1.3s cubic-bezier(0.4,0,0.2,1); }
.asmt-rep-gauge-subtitle { color: #000; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; margin: -8px 0 14px; text-align: center; }

.asmt-rep-score-cards { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.asmt-rep-patient { margin: 18px 0 14px; padding: 0 2px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.asmt-rep-patient-title { margin: 0 0 6px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: #000; letter-spacing: -0.01em; line-height: 1.15; }
.asmt-rep-patient-line { margin: 0; font-size: 14px; color: #000; line-height: 1.4; }
.asmt-rep-patient-label { color: rgba(0,0,0,0.55); font-weight: 500; }
.asmt-rep-patient-name { color: #000; font-weight: 600; }
.asmt-rep-score-card { background: rgba(255,255,255,0.040); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; cursor: pointer; transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease; }
.asmt-rep-score-card:hover { background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.16); }
.asmt-rep-score-card-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.asmt-rep-score-left { display: flex; flex-direction: column; gap: 7px; line-height: 1.15; }
.asmt-rep-score-name { font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: #00E5FF; line-height: 1; }
.asmt-rep-score-pos { font-size: 13px; font-weight: 600; color: rgba(0,0,0,0.80); line-height: 1; }
.asmt-rep-score-right { display: flex; align-items: center; gap: 5px; }
.asmt-rep-score-pct { font-size: 16px; font-weight: 800; line-height: 1.15; white-space: nowrap; text-align: right; }
.asmt-rep-score-chevron { font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.30); transform: rotate(0deg); transition: transform 0.3s ease; line-height: 1; }
.asmt-rep-score-card.expanded .asmt-rep-score-chevron { transform: rotate(90deg); }

.asmt-rep-word-cards-container { display: none; flex-direction: column; gap: 10px; }
.asmt-rep-score-card.expanded .asmt-rep-word-cards-container { display: flex; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); animation: asmtRepFadeIn 0.35s ease forwards; }
@keyframes asmtRepFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.asmt-rep-word-card { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.asmt-rep-word-card-header { display: flex; align-items: center; justify-content: space-between; }
.asmt-rep-word-title-row { display: flex; align-items: center; gap: 10px; }
.asmt-rep-word-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.asmt-rep-word-name { font-size: 17px; font-weight: 700; color: #000; }
.asmt-rep-word-score-col { display: flex; flex-direction: column; align-items: flex-end; }
.asmt-rep-word-pct { font-size: 15px; font-weight: 800; line-height: 1.15; white-space: nowrap; text-align: right; }
.asmt-rep-word-quality { font-size: 11px; color: #000; font-weight: 500; margin-top: 2px; text-align: right; white-space: nowrap; align-self: flex-end; }
.asmt-rep-word-desc { font-size: 13px; color: #000; line-height: 1.45; margin: 0; }
.asmt-rep-word-tip { font-size: 12px; color: #000; line-height: 1.45; margin: 0; display: flex; gap: 6px; }
.asmt-rep-tip-icon { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; margin-top: 1px; }

/* Reassessment compare block — prior vs current Gemini feedback per word */
.asmt-rep-compare-block { display: flex; flex-direction: column; gap: 12px; padding: 10px 0 4px; border-top: 1px dashed rgba(0,0,0,0.10); }
.asmt-rep-compare-row + .asmt-rep-compare-row { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 12px; }
.asmt-rep-compare-block + .asmt-rep-compare-block { border-top: none; }
.asmt-rep-compare-row { display: flex; align-items: center; gap: 12px; }
.asmt-rep-compare-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.asmt-rep-compare-head { display: flex; align-items: center; gap: 8px; }
.asmt-rep-compare-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #000; }
.asmt-rep-compare-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid currentColor; background: transparent; line-height: 1.4; letter-spacing: 0.02em; margin-left: auto; }
.asmt-rep-compare-text { font-size: 13px; color: #000; line-height: 1.45; margin: 0; }
.asmt-rep-compare-col .asmt-rep-compare-text { color: rgba(0,0,0,0.65); }
.asmt-rep-compare-play { width: 40px; height: 40px; flex-shrink: 0; align-self: center; border-radius: 99px; border: 1.5px solid #00E5FF; background: transparent; color: #00E5FF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.2s, color 0.2s, transform 0.15s; }
.asmt-rep-compare-play svg { width: 14px; height: 14px; display: block; }
.asmt-rep-compare-play:hover { background: #00E5FF; color: #000; }
.asmt-rep-compare-play:active { transform: scale(0.94); }
.asmt-rep-compare-play.current { background: #000; border-color: #000; color: #fff; outline: none; }
.asmt-rep-compare-play.current:focus,
.asmt-rep-compare-play.current:focus-visible { outline: none; box-shadow: none; border-color: #000; }
.asmt-rep-compare-play.current:hover { background: #000; border-color: #000; color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.asmt-rep-compare-play[disabled] { opacity: 0.4; cursor: not-allowed; }
.asmt-rep-compare-play[disabled]:hover { background: transparent; color: #00E5FF; transform: none; }
.asmt-rep-compare-play.current[disabled]:hover { background: #000; color: #fff; }

/* Nested segmented pill: one container, Target (teal outline) + Recording (amber fill) */
.asmt-rep-word-buttons { display: flex; gap: 4px; padding: 4px; border: 1.5px solid #14B8A8; border-radius: 99px; background: transparent; margin-top: auto; align-self: stretch; }
.asmt-rep-btn-target, .asmt-rep-btn-recording { flex: 1; padding: 9px 12px; border: none; border-radius: 99px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s, color 0.2s, transform 0.15s; }
.asmt-rep-btn-target { background: transparent; color: #14B8A8; }
.asmt-rep-btn-target:hover { background: rgba(20,184,168,0.12); }
.asmt-rep-btn-target:active { transform: scale(0.98); }
.asmt-rep-btn-recording { flex: 1.3; background: #000; color: #fff; font-weight: 700; }
.asmt-rep-btn-recording:hover:not(:disabled) { background: #1A1A1A; transform: scale(1.02); }
.asmt-rep-btn-recording:active:not(:disabled) { transform: scale(0.98); }
.asmt-rep-btn-recording:disabled { opacity: 0.45; cursor: default; }

.asmt-rep-recovery-card { background: rgba(255,255,255,0.040); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.asmt-rep-recovery-header { display: flex; align-items: center; justify-content: space-between; }
.asmt-rep-recovery-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #000; }
.asmt-rep-recovery-program { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #14B8A8; }
.asmt-rep-recovery-chart { width: 100%; display: block; }
.asmt-rep-recovery-footer { display: flex; align-items: flex-end; justify-content: space-between; }
.asmt-rep-recovery-stat { display: flex; flex-direction: column; gap: 1px; }
.asmt-rep-recovery-stat.right { text-align: right; align-items: flex-end; }
.asmt-rep-stat-week { font-size: 11px; font-weight: 500; color: rgba(0,0,0,0.45); letter-spacing: 0.03em; }
.asmt-rep-stat-sublabel { font-size: 13px; font-weight: 700; color: rgba(0,0,0,0.75); }
.asmt-rep-stat-val { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: 0.01em; }
.asmt-rep-stat-val.orange { color: #FF8B42; }
.asmt-rep-stat-val.teal { color: #14B8A8; }
.asmt-rep-recovery-arrow { font-size: 20px; color: rgba(255,255,255,0.35); align-self: center; padding-bottom: 4px; }

.asmt-rep-analysis-footer { text-align: center; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 18px; }
.asmt-rep-analysis-engine { font-family: 'Roboto Mono', monospace; font-size: 12px; color: #000; letter-spacing: 0.01em; margin: 0; }
.asmt-rep-analysis-validated { font-size: 11px; color: rgba(0,0,0,0.75); line-height: 1.5; margin: 0; }

.asmt-rep-btn-next { display: block; width: 100%; padding: 19px; background: rgba(0,0,0,0.08); border: none; color: rgba(0,0,0,0.75); font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; border-radius: 14px; text-align: center; text-decoration: none; letter-spacing: 0.01em; transition: background 0.22s ease, color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease; cursor: pointer; }
.asmt-rep-btn-next:hover { background: #00E5FF; color: #ffffff; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,229,255,0.35); }
.asmt-rep-btn-next:active { transform: translateY(0); box-shadow: none; }

@media (min-width: 820px) {
  .asmt-rep-score-card { cursor: default; }
  .asmt-rep-score-card .asmt-rep-word-cards-container { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); animation: none; }
  .asmt-rep-score-card .asmt-rep-score-chevron { display: none; }
}

@media (max-width: 500px) {
  .asmt-rep-root { padding: 8px 10px 18px; }
}

/* ============================================================
   /s/ in Isolation — pixel-matched design
   ============================================================ */
body.sus-s-page { background: #fff; }
@media (min-width: 641px) {
  body.sus-s-page { padding-bottom: 0; }
  body.sus-s-page .bottom-nav { display: none !important; }
}
body.sus-s-page #app.container,
body.sus-s-page main#app { padding: 0; max-width: none; }
body.sus-s-page .sus-s-page-wrap { padding-top: 24px; }

.sus-s-view {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #2D3748;
  background: #fff;
  min-height: calc(100vh - 64px);
}
.sus-s-page-wrap {
  padding-top: 24px;
  padding-bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (min-width: 701px) {
  .sus-s-view { min-height: calc(100vh - 77px); }
  .sus-s-page-wrap {
    min-height: calc(100vh - 77px);
    padding-top: 0;
    padding-bottom: 10vh;
    align-items: center;
  }
}
.sus-s-exercise-card {
  width: 100%;
  max-width: 960px;
  margin: 0 16px;
  background: #fbfbfb;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}

/* Phase progress bar — sits flush atop any drill card */
.phase-progress-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.sus-s-exercise-stack {
  max-width: 960px;
  margin: 0 16px;
}
.sus-s-exercise-stack .sus-s-exercise-card {
  margin: 0;
  max-width: none;
}
.phase-progress-bar {
  display: flex;
  width: 100%;
  height: 16px;
  margin-bottom: 10px;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  overflow: hidden;
  box-sizing: border-box;
}
.ppb-section {
  display: flex;
  position: relative;
  height: 100%;
  background: transparent;
  border-right: 1px solid rgba(0,0,0,0.25);
}
.ppb-section:last-child { border-right: none; }
.ppb-set {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.ppb-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #00E5FF;
  transition: width 0.4s ease;
}
.ppb-fill.is-leading {
  border-radius: 0 3px 3px 0;
}
.sus-s-right-col {
  grid-column: 2;
  grid-row: 1 / 3;
  background: #0a0a0a;
  margin-left: 12px;
  border-radius: 14px 0 0 14px;
  display: flex;
  flex-direction: column;
}

/* Header */
.sus-s-card-header {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 24px 24px 16px;
  grid-column: 1;
  grid-row: 1;
}
.sus-s-step-badge {
  align-self: stretch;
  min-width: 28px;
  padding: 0 6px;
  border-radius: 0;
  background: #00E5FF;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sus-s-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A202C;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.sus-s-subtitle {
  font-size: 13px;
  color: #666;
  margin-top: 3px;
}

/* Body */
.sus-s-card-body {
  display: contents;
}

/* Instructions column */
.sus-s-instructions-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 24px 24px;
  background: #fbfbfb;
  grid-column: 1;
  grid-row: 2;
}
.sus-s-section-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1A202C;
  margin: 0;
}
.sus-s-instructions-goal {
  font-size: 13px;
  color: #666;
  margin: -8px 0 0 0;
}
.sus-s-instructions-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: sus-s-step;
  margin: 0;
  padding: 0;
}
.sus-s-instructions-list li {
  counter-increment: sus-s-step;
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #2D3748;
}
.sus-s-instructions-list li::before {
  content: counter(sus-s-step) ".";
  font-size: 14px;
  color: #2D3748;
  flex-shrink: 0;
  min-width: 16px;
}
.sus-s-tips-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.sus-s-tips-list li {
  display: flex;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #2D3748;
}
.sus-s-tips-list li::before {
  content: "•";
  flex-shrink: 0;
  color: #2D3748;
}
.sus-s-bold-lead {
  font-weight: 700;
  color: #1A202C;
}

/* Stats column (dark right side) */
.sus-s-stats-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.sus-s-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sus-s-stat-card {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sus-s-stat-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}
.sus-s-stat-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #00E5FF;
  white-space: nowrap;
}
.sus-s-stat-number {
  font-size: 52px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.sus-s-stat-unit {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sus-s-stat-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
}

/* Spectrogram card */
.sus-s-spectro-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.sus-s-spectro-body {
  position: relative;
  margin-top: 12px;
}
.sus-s-spectro-help-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: #00E5FF;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
}
.sus-s-spectro-help-btn:hover { background: #00B8CC; }
.sus-s-spectrum-canvas {
  width: 100%;
  height: 140px;
  display: block;
  border: none;
  border-radius: 4px;
  background: #0a0a0a;
}
.sus-s-spectro-hz-label {
  position: absolute;
  bottom: 36px;
  font-size: 10px;
  font-weight: 600;
  color: #00E5FF;
  transform: translateX(6px);
  pointer-events: none;
}
.sus-s-spectro-caption {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
}

/* Footer */
.sus-s-card-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 24px 20px;
  position: relative;
}
.sus-s-start-btn {
  background: #00E5FF;
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  padding: 10px 40px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
}
.sus-s-start-btn:hover { background: #00c8e0; }
.sus-s-start-btn:active { transform: scale(0.98); }
.sus-s-start-btn.running {
  background: #EF4444;
  color: #fff;
}
.sus-s-start-btn.running:hover { background: #c62828; }
.sus-s-reset-btn {
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
}
.sus-s-reset-btn:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

.sus-s-mobile-back-btn { display: none; }

/* Responsive */
@media (max-width: 700px) {
  .sus-s-page-wrap {
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: flex-start;
    min-height: calc(100dvh - 64px - 72px - env(safe-area-inset-bottom));
  }
  .sus-s-exercise-card {
    margin: 0 12px;
    border-radius: 12px;
    background: #fbfbfb;
  }
  .sus-s-exercise-stack { margin: 0 12px; }
  .sus-s-exercise-stack .sus-s-exercise-card { margin: 0; }
  .phase-progress-bar { height: 14px; margin-bottom: 8px; }
  .sus-s-exercise-stack:has(.sus-s-exercise-card.show-stats) .phase-progress-bar { display: none; }
  .phase-progress-stack:has(.drill-exercise-split.show-tool) .phase-progress-bar { display: none; }
  .sus-s-card-header { padding: 14px 16px 8px; gap: 10px; }
  .sus-s-step-badge { min-width: 24px; font-size: 12px; }
  .sus-s-title { font-size: 16px; }
  .sus-s-subtitle { font-size: 12px; margin-top: 2px; }
  .sus-s-instructions-col { padding: 0 16px 12px 16px; gap: 10px; }
  .sus-s-section-heading { font-size: 14px; }
  .sus-s-instructions-goal { font-size: 12px; margin-top: -6px; }
  .sus-s-instructions-list { gap: 4px; }
  .sus-s-instructions-list li { font-size: 13px; line-height: 1.35; }
  .sus-s-tips-list { gap: 6px; }
  .sus-s-tips-list li { font-size: 13px; line-height: 1.35; }
  .sus-s-card-footer { padding: 12px 16px 14px; }
  .sus-s-start-btn { padding: 10px 40px; font-size: 14px; }
  .sus-s-exercise-card:not(.show-stats) .sus-s-reset-btn { display: none; }
  .sus-s-exercise-card:not(.show-stats) .sus-s-card-footer {
    padding: 20px 24px;
    justify-content: center;
  }
  .sus-s-exercise-card:not(.show-stats) .sus-s-start-btn {
    padding: 12px 56px;
  }
  .sus-s-exercise-card:not(.show-stats) .sus-s-start-btn::after {
    content: " →";
  }
  .sus-s-exercise-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .sus-s-right-col {
    display: contents;
    background: transparent;
    border-left: none;
  }
  .sus-s-card-header { grid-column: 1; grid-row: 1; }
  .sus-s-instructions-col { grid-column: 1; grid-row: 2; }
  .sus-s-stats-col {
    display: none;
    background: #0a0a0a;
    width: auto !important;
    height: auto !important;
    grid-column: 1;
    grid-row: 3;
  }
  .sus-s-card-footer {
    grid-column: 1;
    grid-row: 4;
    background: transparent;
  }
  body.sus-s-page:has(.sus-s-exercise-card.show-stats) {
    background: #0a0a0a;
    transition: background 0.3s ease;
  }
  .sus-s-view:has(.sus-s-exercise-card.show-stats) { background: #0a0a0a; }
  .sus-s-exercise-card.show-stats {
    background: #0a0a0a;
    border-color: transparent;
  }
  .sus-s-card-footer {
    padding: 20px 24px;
    justify-content: center;
  }
  .sus-s-exercise-card.show-stats .sus-s-card-footer { gap: 8px; }
  .sus-s-exercise-card.show-stats .sus-s-start-btn,
  .sus-s-exercise-card.show-stats .sus-s-reset-btn {
    flex: 1;
  }
  .sus-s-exercise-card.show-stats .sus-s-reset-btn {
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.55);
  }
  .sus-s-exercise-card.show-stats .sus-s-reset-btn:hover {
    border-color: rgba(255,255,255,0.45);
    color: #fff;
  }
  .sus-s-exercise-card.show-stats .sus-s-instructions-col { display: none; }
  .sus-s-exercise-card.show-stats .sus-s-stats-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100% !important;
    height: auto !important;
    padding: 20px 16px 12px;
  }
  .sus-s-exercise-card.show-stats .sus-s-mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    padding: 0 0 16px 0;
    transition: color 0.2s ease;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
  }
  .sus-s-exercise-card.show-stats .sus-s-mobile-back-btn:hover { color: #fff; }
  .sus-s-exercise-card.show-stats .sus-s-card-header { display: none; }
  .sus-s-exercise-card.show-stats .sus-s-stats-col { padding: 16px 12px 8px; gap: 8px; }
  .sus-s-exercise-card.show-stats .sus-s-stat-card { padding: 18px 8px 8px; }
  .sus-s-exercise-card.show-stats .sus-s-stat-number { font-size: 36px; }
  .sus-s-exercise-card.show-stats .sus-s-stat-unit { font-size: 26px; }
  .sus-s-exercise-card.show-stats .sus-s-stat-sub { font-size: 12px; margin-top: 4px; }
  .sus-s-exercise-card.show-stats .sus-s-spectro-card { padding: 18px 8px 8px; margin-top: 10px; }
  .sus-s-exercise-card.show-stats .sus-s-spectrum-canvas { height: 100px; }
  .sus-s-exercise-card.show-stats .sus-s-spectro-caption { font-size: 11px; margin-top: 4px; }
  .sus-s-exercise-card.show-stats .sus-s-mobile-back-btn { padding: 0 0 8px 0; margin-bottom: 4px; }
  .sus-s-exercise-card.show-stats .sus-s-card-footer { padding: 10px 16px 12px; }
  .sus-s-exercise-card.show-stats .sus-s-start-btn,
  .sus-s-exercise-card.show-stats .sus-s-reset-btn { padding: 9px 18px; font-size: 14px; }
}

/* =========================================================
   LIGHT-ROUTE ASSESSMENT — off-white surfaces, black text.
   ========================================================= */
body.light-route .asmt-rep-patient {
    border-bottom-color: #EBEBEB;
}
body.light-route .asmt-rep-patient-title,
body.light-route .asmt-rep-patient-line,
body.light-route .asmt-rep-patient-name {
    color: #1A202C;
}
body.light-route .asmt-rep-patient-label {
    color: #717171;
}

body.light-route .asmt-rep-score-card,
body.light-route .asmt-rep-recovery-card {
    background: #FBFBFB;
    border-color: #EBEBEB;
}
body.light-route .asmt-rep-score-card:hover {
    background: #F7F7F7;
    border-color: #DEDEDE;
}
body.light-route .asmt-rep-score-pos {
    color: #444;
}
body.light-route .asmt-rep-score-pct {
    color: #1A202C;
}
body.light-route .asmt-rep-score-chevron {
    color: rgba(34,34,34,0.45);
}
body.light-route .asmt-rep-score-card.expanded .asmt-rep-word-cards-container {
    border-top-color: #EBEBEB;
}

body.light-route .asmt-rep-word-card {
    background: #F7F7F7;
    border-color: #EBEBEB;
}
body.light-route .asmt-rep-word-name,
body.light-route .asmt-rep-word-pct {
    color: #1A202C;
}
body.light-route .asmt-rep-word-quality,
body.light-route .asmt-rep-word-desc {
    color: #000;
}

body.light-route .asmt-rep-btn-recording {
    background: #000;
    color: #fff;
}
body.light-route .asmt-rep-btn-recording:hover:not(:disabled) {
    background: #1A1A1A;
    color: #fff;
}

body.light-route .asmt-rep-recovery-label {
    color: #1A202C;
}
body.light-route .asmt-rep-stat-week {
    color: #717171;
}
body.light-route .asmt-rep-stat-sublabel {
    color: #444;
}
body.light-route .asmt-rep-stat-val {
    color: #1A202C;
}
body.light-route .asmt-rep-recovery-arrow {
    color: rgba(34,34,34,0.4);
}

body.light-route .asmt-rep-analysis-engine {
    color: #1A202C;
}
body.light-route .asmt-rep-analysis-validated {
    color: #717171;
}

body.light-route .asmt-rep-btn-next {
    background: #FBFBFB;
    color: #1A202C;
    border: 1px solid #EBEBEB;
}
body.light-route .asmt-rep-btn-next:hover {
    background: #00E5FF;
    color: #ffffff;
    border-color: #00E5FF;
}

/* ── Exercise floating sidebar (desktop-only, drill route only) ───────────── */
.ex-sidebar { display: none; }

@media (min-width: 701px) {
    body.drill-route .ex-sidebar,
    body.programme-route .ex-sidebar {
        display: flex;
        position: fixed;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        gap: 4px;
        padding: 8px 6px;
        background: #FFFFFF;
        border: 1px solid #EBEBEB;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
        z-index: 60;
    }
}

.ex-nav-item {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #717171;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
    .ex-nav-item:hover { background: #F7F7F7; color: #222222; }
    .ex-nav-item:hover .ex-nav-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.ex-nav-item--active,
body.programme-route .ex-sidebar .ex-nav-item { background: rgba(0, 194, 217, 0.10); color: #222222; }
.ex-nav-item--active::before,
body.programme-route .ex-sidebar .ex-nav-item::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: #00C2D9;
}
.ex-nav-tooltip {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: #111111;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    letter-spacing: -0.005em;
}