/* Guru Shishya: mobile-first styling on the brand tokens.
   static/brand/gs-brand.css (loaded first) defines --gs-* for light and dark. The short names below
   are this stylesheet's own and simply point at those tokens, so the brand is changed in one place. */

:root {
    --bg: var(--gs-bg);
    --surface: var(--gs-surface);
    --surface-2: var(--gs-surface-2);
    --fg: var(--gs-ink);
    --muted: var(--gs-ink-muted);
    --border: var(--gs-border);

    --accent: var(--gs-accent);              /* saffron: graphics and large text only */
    --accent-text: var(--gs-accent-text);    /* saffron for links and small text */
    --accent-soft: color-mix(in srgb, var(--gs-accent) 14%, var(--gs-surface));
    --button: var(--gs-ink);                 /* primary buttons are ink-coloured */
    --on-button: var(--gs-on-ink);
    --button-hover: var(--gs-accent-text);

    /* Semantic colours (success / error) keep their own hues. */
    --ok-bg: #e4f3e6;
    --ok-fg: #14532d;
    --ok-border: #b3d9ba;
    --err-bg: #fbe6e2;
    --err-fg: #8f1d12;
    --err-border: #efb7ae;
    --amber-fg: #8a5a00;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgb(30 27 58 / 8%), 0 4px 14px rgb(30 27 58 / 6%);
    --gutter: 1rem;
    --measure: 42rem;
    --header-measure: 60rem;
    --focus: 0 0 0 3px color-mix(in srgb, var(--gs-accent-text) 30%, transparent);
    --menu-bg: var(--surface);                    /* the phone menu's panel, and the dimming of the page under it */
    --menu-scrim: rgb(30 27 58 / 45%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ok-bg: #16311f;
        --ok-fg: #9be3b5;
        --ok-border: #2a5a3a;
        --err-bg: #3a1a1f;
        --err-fg: #ffb4ab;
        --err-border: #6b2a30;
        --amber-fg: #f2c46b;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%);
        --menu-bg: color-mix(in srgb, var(--gs-surface) 82%, white);
        --menu-scrim: rgb(0 0 0 / 62%);
    }
}

@media (min-width: 40rem) {
    :root { --gutter: 1.5rem; }
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* short and long pages the same width, so the header stays put */

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    background: var(--bg);
    color: var(--fg);
}

a {
    color: var(--accent-text);
    text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--gs-font-display); font-weight: 600; }

h1 {
    margin: 0.5rem 0 0.5rem;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

/* ---------- Header / nav ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    /* Wider than the text column (--measure) so the menu fits on one line beside the logo. */
    padding: 0.5rem max(var(--gutter), calc((100% - var(--header-measure)) / 2 + var(--gutter)));
    padding-top: max(0.5rem, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header .gs-logo { min-height: 44px; font-size: 22px; }
/* "Tour this page": a question mark beside the logo; the menu keeps to the right whether or not it's there. */
.site-header button.nav-tour {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; min-height: 36px; padding: 0; margin-right: auto;
    color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.site-header button.nav-tour:hover:not(:disabled) { color: var(--fg); background: var(--surface-2); }
.site-header button.nav-tour[hidden] { display: none; }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    margin-inline: -0.5rem;
}

.site-nav a,
.site-nav .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.6rem;
    font-size: 0.95rem;
    color: var(--muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.site-nav a:hover,
.site-nav .link-button:hover {
    color: var(--fg);
    background: var(--surface-2);
}

.inline-form { display: inline; margin: 0; }

.link-button {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.site-nav a, .site-nav .link-button { white-space: nowrap; }

/* The menu button only exists for narrow screens with JavaScript; wide screens keep every link on one line.
   `.site-header` is needed: `button.nav-toggle` alone ties with `button:not(.link-button)` below, which then wins. */
.site-header button.nav-toggle { display: none; }

@media (max-width: 51.99rem) {
    .js button.nav-toggle {
        display: inline-flex;
        flex: none;
        width: 44px;
        min-height: 44px;
        padding: 0;
        color: var(--fg);
        background: var(--surface-2);
    }
    .js button.nav-toggle:hover:not(:disabled) { background: var(--accent-soft); color: var(--fg); }

    /* Three bars that turn into a cross while the menu is open. */
    .nav-toggle-icon,
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.15s;
    }
    .nav-toggle-icon { position: relative; }
    .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
    .nav-toggle-icon::before { top: -6px; }
    .nav-toggle-icon::after { top: 6px; }
    .nav-open .nav-toggle-icon { background: transparent; }
    .nav-open .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
    .nav-open .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

    .site-header { flex-wrap: nowrap; }
    .js .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0.5rem var(--gutter) 0.75rem;
        /* A panel of its own over a dimmed page: the card colour, rounded below, a clear shadow, and a huge spread
           shadow that dims everything else, clipped so it doesn't darken the header above. */
        background: var(--menu-bg);
        border-bottom: 1px solid var(--border);
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: 0 14px 28px rgb(30 27 58 / 22%), 0 0 0 100vmax var(--menu-scrim);
        clip-path: inset(0 -100vmax -100vmax -100vmax);
    }
    .js .nav-open .site-nav { display: flex; }
    .js .site-header.nav-open { background: var(--menu-bg); }
    .js .site-nav a + a, .js .site-nav a + .inline-form, .js .site-nav .inline-form + a { border-top: 1px solid var(--border); border-radius: 0; }
    .js .site-nav .inline-form { display: block; }
    .js .site-nav .link-button { width: 100%; }
    .js .site-nav a.nav-signup { justify-content: center; margin-top: 0.25rem; }
    /* In the stacked menu the plan is a row like the others. */
    .js .site-nav a.nav-plan { align-self: stretch; min-height: 44px; padding: 0 0.6rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; font-size: 0.95rem; }

    /* Without JavaScript the links wrap onto a second row under the brand. */
    .no-js .site-header { flex-wrap: wrap; }
    .no-js .site-nav { margin-inline: -0.6rem; }
}

/* ---------- Layout ---------- */

main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1rem var(--gutter) 3rem;
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

.lede {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.messages {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.messages li {
    padding: 0.75rem 1rem;
    color: var(--ok-fg);
    background: var(--ok-bg);
    border: 1px solid var(--ok-border);
    border-radius: var(--radius-sm);
}

/* ---------- Lists (phrases, attempts) ---------- */

.phrase-list,
.attempt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.phrase-list a,
.attempt-list a {
    position: relative;
    display: block;
    padding: 1rem 2.5rem 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color 0.15s, transform 0.15s;
}

.phrase-list a::after,
.attempt-list a::after {
    content: "›";
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-52%);
    font-size: 1.6rem;
    color: var(--muted);
}

.phrase-list a:hover,
.attempt-list a:hover {
    border-color: var(--accent);
}

.phrase-list a:active,
.attempt-list a:active { transform: scale(0.99); }

.phrase-title {
    display: block;
    font-weight: 650;
    font-size: 1.05rem;
}

.phrase-desc {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.92rem;
}

/* ---------- Cards / steps ---------- */

.step {
    margin: 1.25rem 0;
    padding: 1.1rem 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.step > :last-child { margin-bottom: 0; }

.step h2 + audio,
.step audio + h2 { margin-top: 0.25rem; }

.step audio + h2 { margin-top: 1.25rem; }

audio {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
}

/* The practice card: status and errors first, then the phrase, then the action. */
.practice #status {
    margin: 0 0 0.75rem;
    font-weight: 600;
}
.practice .error { margin: 0 0 0.75rem; }
.practice .notice { margin: 0 0 0.75rem; }
.practice .button-row { margin-top: 0.75rem; }
.practice #quota,
.practice #last-attempt { margin: 0.6rem 0 0; }
.practice .upgrade-card { margin: 0.75rem 0 0; }

/* Secondary information and settings, folded away so the actions stay on screen. */
.fold { margin-top: 0.5rem; }
.fold summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.fold[open] summary { margin-bottom: 0.5rem; }
.fold > :last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */

button:not(.link-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    font: inherit;
    font-weight: 650;
    color: var(--on-button);
    background: var(--button);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

button:not(.link-button):hover:not(:disabled) { background: var(--button-hover); }
button:not(.link-button):active:not(:disabled) { transform: scale(0.98); }

button:disabled {
    opacity: 0.55;
    cursor: default;
}

button.secondary {
    color: var(--accent-text);
    background: var(--accent-soft);
}

button.secondary:hover:not(:disabled) { background: var(--surface-2); }

a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    font-weight: 650;
    color: var(--on-button);
    background: var(--button);
    border-radius: 999px;
    text-decoration: none;
}

a.button:hover { background: var(--button-hover); }

.button-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

button.small {
    min-height: 38px;
    padding: 0 1rem;
    font-size: 0.9rem;
}

/* "Start here" beside each phrase on a lesson page: a quiet link, so "Start practice" is the one button. */
button.start-here { margin-left: auto; min-height: 38px; padding: 0 0.25rem; font-size: 0.85rem; color: var(--accent-text); }
button.start-here:hover { text-decoration: underline; }

#record-button { width: 100%; }
/* On phones Record takes the row, but shares it with the icon buttons rather than pushing them onto a line of their own. */
@media (max-width: 29.99rem) {
    .button-row:has(> .icon-button) { flex-wrap: nowrap; }
    .button-row:has(> .icon-button) > #record-button { flex: 1; width: auto; }
}

@media (min-width: 30rem) {
    #record-button { width: auto; }
}

/* ---------- Score ---------- */

.score {
    margin: 0 0 1rem;
    font-size: clamp(2.6rem, 2rem + 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
    font-family: var(--gs-font-display);
    font-variant-numeric: tabular-nums;
}

.score-breakdown {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0 0 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.score-breakdown dt,
.score-breakdown dd {
    margin: 0;
    padding: 0.7rem 1rem;
}

.score-breakdown dt { color: var(--muted); }
.score-breakdown dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.score-breakdown dt:not(:last-of-type),
.score-breakdown dd:not(:last-of-type) { border-bottom: 1px solid var(--border); }

/* ---------- Forms ---------- */

form p { margin: 0 0 1.1rem; }

form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.95rem;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    font: inherit;
    font-size: 1rem; /* 16px minimum stops iOS zooming on focus */
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

textarea { min-height: 6.5rem; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-text);
    box-shadow: var(--focus);
}

input[type="file"] {
    width: 100%;
    padding: 0.6rem;
    font: inherit;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 0.9rem;
    font: inherit;
    font-weight: 600;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

.helptext,
form span.helptext {
    display: block;
    margin-top: 0.3rem;
    color: var(--muted);
    font-size: 0.85rem;
}

form ul:not(.errorlist) { margin: 0.3rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.85rem; }

form .errorlist {
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
    color: var(--err-fg);
    font-size: 0.9rem;
    font-weight: 600;
}

form > button[type="submit"],
.step form button[type="submit"] { margin-top: 0.25rem; }

@media (max-width: 29.99rem) {
    form > button[type="submit"],
    .step form button[type="submit"] { width: 100%; }
}

/* ---------- Lessons ---------- */

.section-title { margin: 2rem 0 0.5rem; }

.muted { color: var(--muted); font-size: 0.95rem; }

.notice {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
}

.badge {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
}

.badge-ok { color: var(--ok-fg); background: var(--ok-bg); }

.track-list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    counter-reset: track;
}

.track-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.4rem 1rem;
}

.track-list li + li { border-top: 1px solid var(--border); }

.track-list a { color: var(--fg); text-decoration: none; flex: 1; }
.track-list a:hover { color: var(--accent-text); }

.track-number {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-text);
    background: var(--accent-soft);
    border-radius: 50%;
}

form .order-input {
    flex: none;
    width: 4.2rem;
    min-height: 40px;
    padding: 0.3rem 0.5rem;
    text-align: center;
}

/* ---------- Lesson practice ---------- */

.rules { margin: 0 0 1rem; padding-left: 1.2rem; }
.rules li { margin-bottom: 0.35rem; }

.run-progress { margin: 1rem 0 0; }
.heading-count { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

progress {
    display: block;
    width: 100%;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-2);
}

progress::-webkit-progress-bar { background: var(--surface-2); }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* Guruji beside the status (phaseGuru.js): playing, listening, marking. A fixed box, so swapping pictures of
   different widths doesn't move the text. */
.phase-line { display: flex; align-items: center; gap: 0.75rem; }
.phase-text { flex: 1; min-width: 0; }
.phase-text > p { margin: 0; }
.phase-line:has(.phase) { margin-bottom: 1rem; }
.phase-guru { position: relative; flex: none; width: 4.5rem; height: 4.5rem; }
.phase-guru img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* After scoring Guruji holds up his score card, a little larger: the box has guru-score.webp's shape (425 x 418), so
   the number can sit on the card's face, which make_mascots.py reports as fractions of the picture. */
.phase-guru.has-score { width: 6.5rem; height: 6.39rem; }
.phase-guru-card { position: absolute; left: 68%; top: 0.7%; width: 31.1%; height: 23.5%; display: grid; place-items: center;
    font-family: var(--gs-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1; color: #1e1b3a; }
.phase-guru-card small { font-size: 0.55em; font-weight: 600; }
/* The score's lines beside the card (what the toast used to show). */
.phase-result { margin-top: 0.35rem; }
button.again-button { margin-top: 0.5rem; }
.phase-result p { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--muted); }
.phase-result p:nth-child(2) { color: var(--fg); font-weight: 650; }
/* While Guruji holds up the card the score is on it, so its line is for screen readers only; once he moves on
   (the phrase plays again, the next recording) the previous attempt's lines stay, led by "Last score: 72 / 100". */
.phase-result:not(.phase-result-previous) .result-score { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.phase-result-previous .result-score { color: var(--fg); font-weight: 650; }
.phase-result-previous p:nth-child(2) { color: var(--muted); font-weight: 400; }
.phase-guru-in { animation: phase-guru-in 0.25s ease-out; }
@keyframes phase-guru-in { from { opacity: 0; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .phase-guru-in { animation: none; } }
/* While scoring, Guruji is the loading animation: he bobs over his notebook inside a spinning saffron ring. */
.phase-guru-busy img { animation: guru-bob 0.9s ease-in-out infinite; transform-origin: 50% 90%; }
.phase-guru-busy::before {
    content: "";
    position: absolute;
    inset: -0.3rem;
    border-radius: 50%;
    border: 3px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    animation: guru-spin 1s linear infinite;
}
@keyframes guru-bob {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-3px); }
}
@keyframes guru-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .phase-guru-busy img { animation: none; }
    .phase-guru-busy::before { animation-duration: 2.5s; }
}

/* The meter (meter.js) takes the status line's place while recording and scoring; the status stays for screen readers. */
.has-meter > #status, .has-meter > .phase { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.meter { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.meter-wave { display: block; width: min(100%, 16rem); height: 3.25rem; color: var(--muted); transition: color 0.2s; }
.meter[data-state="sounding"] .meter-wave { color: var(--accent); }
.meter[data-mode="think"] .meter-wave { display: none; }
.meter-text { margin: 0; font-weight: 650; }
.meter[data-state="quiet"] .meter-text { color: var(--muted); }
.dots span { display: inline-block; animation: dot 1.2s ease-in-out infinite; opacity: 0.25; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot {
    0%, 60%, 100% { opacity: 0.25; transform: none; }
    30% { opacity: 1; transform: translateY(-0.2em); }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
}

.phase {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    font-weight: 650;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

.phase[data-phase="listen"] { color: var(--accent-text); background: var(--accent-soft); }
.phase[data-phase="record"] { color: var(--fg); }

.phase[data-phase="recording"]::before {
    content: "";
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #e5484d;
    animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.55; }
}

#attempt-info { margin: -0.25rem 0 0.9rem; }

.phase[data-phase="next"] { color: var(--muted); }
.practice .run-progress { margin: 0 0 0.75rem; }

.stop-form { margin-top: 1.5rem; }
#intro .fold { margin-top: 0.75rem; }

.picker { padding: 0; }
.picker summary {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 1.1rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.picker[open] summary::after { content: "▴"; }
.picker .track-list { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.picker .track-list li { padding: 0; }

button.picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 52px;
    padding: 0.4rem 1rem;
    font-weight: 500;
    text-align: left;
    color: var(--fg);
    background: none;
    border-radius: 0;
    justify-content: flex-start;
}
button.picker-item:hover:not(:disabled) { background: var(--surface-2); }
.picker-item[aria-current="true"] { background: var(--accent-soft); }
.picker-title { flex: 1; }
.picker-note { font-size: 0.82rem; color: var(--muted); }

.results {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.results li {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    padding: 0.8rem 1rem;
}

.results li + li { border-top: 1px solid var(--border); }
.results-title { font-weight: 650; }
.results-score {               /* the phrase's best light */
    grid-row: span 2;
    align-self: center;
}
.results-meta { color: var(--muted); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
    .phase[data-phase="recording"]::before { animation: none; }
}

/* ---------- Errors ---------- */

.error {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    color: var(--err-fg);
    background: var(--err-bg);
    border: 1px solid var(--err-border);
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Plans and pricing ---------- */

.nav-upgrade { color: var(--accent-text) !important; font-weight: 650; }
/* A paid player's plan: a small outlined badge rather than one more link. */
.site-nav a.nav-plan {
    align-self: center;
    min-height: 0;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--accent-text);
    border-radius: 999px;
    color: var(--accent-text);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.plans { display: grid; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 52rem) {
    .plans { grid-template-columns: repeat(3, 1fr); }
    main:has(.plans) { max-width: 60rem; }
}

.plan {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Guruji, the mascot (_guru.html), dressed for each plan. On phones (one card per row) he sits small beside the
   name and price so the card isn't mostly picture; in the three-column layout he stands centred above them. */
.plan-head { display: flex; align-items: center; gap: 0.75rem; }
.plan-intro { flex: 1; min-width: 0; }
.plan-guru { order: 1; flex: none; }
.guru-art { display: block; height: 5.5rem; width: auto; }
@media (min-width: 52rem) {
    .plan-head { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .plan-guru { order: 0; display: flex; justify-content: center; margin-top: -0.25rem; }
    .guru-art { height: 9.5rem; }   /* same height on every card, so the plan names line up */
}

.plan h2 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 1.3rem; }
.plan-tagline { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.92rem; }
.plan-featured { border-color: var(--accent); }
.plan-current { outline: 2px solid var(--accent); outline-offset: -2px; }

.price { margin: 0; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.price span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price-alt { margin: 0.25rem 0 1rem; color: var(--muted); font-size: 0.92rem; }

.plan-features { margin: 0 0 1.25rem; padding-left: 1.2rem; flex: 1; }
.plan-features li { margin-bottom: 0.4rem; }
.plan-actions { display: grid; gap: 0.6rem; }
.plan-actions form { margin: 0; }
.plan-actions button, .plan-actions a.button { width: 100%; }
.plan-actions p { margin: 0; }

.upgrade-card {
    padding: 1rem;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
}
.upgrade-card p { margin-bottom: 0.75rem; }

.locked-title { color: var(--muted); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; }
.stat {
    display: flex; flex-direction: column; align-items: center; padding: 0.9rem 0.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-number { font-size: 1.8rem; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.8rem; color: var(--muted); text-align: center; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table th { font-size: 0.8rem; color: var(--muted); font-weight: 650; white-space: nowrap; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Cheat text ("Show the notes") ---------- */

.next-phrase { margin: 0.9rem 0 0; font-weight: 650; }
.cheat { margin-top: 0.9rem; }
/* The summary reads "Show the notes" while closed and "Hide the notes" while open (notes.js remembers which). */
.cheat[open] .notes-show, .cheat:not([open]) .notes-hide { display: none; }
.cheat summary { cursor: pointer; font-weight: 650; color: var(--accent-text); min-height: 44px; display: flex; align-items: center; }
.cheat-text {
    margin: 0.25rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

/* Read by screen readers, not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Badges ---------- */

.badge-art { width: 96px; height: 96px; flex: none; }
.badge-face { fill: var(--surface); }    /* the ring and icon take the lesson's own colour (_badge.html) */
.badge-locked { opacity: 0.35; filter: grayscale(1); }

.badge-shelf { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.badge-shelf li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; padding: 1rem 0.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.badge-name { font-weight: 650; font-size: 0.95rem; }
.badge-holder { position: relative; }

.badge-earned { display: flex; align-items: center; gap: 1rem; border-color: var(--accent); }
.badge-earned h2 { margin-bottom: 0.25rem; }
.badge-earned p { margin: 0; }

/* ---------- Avatars ---------- */

.avatar {
    --avatar-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
.avatar-default {
    font-weight: 700;
    font-size: calc(var(--avatar-size) * 0.45);
    line-height: 1;
    color: var(--accent-text);
    background: var(--accent-soft);
}
.nav-profile { gap: 0.4rem; }
.profile-head { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1rem; }
.profile-head p { margin: 0; }
.profile-name { font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; }
.avatar-form p { margin-bottom: 0.6rem; }
.avatar-form + .inline-form { display: block; margin-top: 0.75rem; }

/* ---------- Account pages (django-allauth) and social sign-in ---------- */

.provider-list { list-style: none; margin: 1rem 0 0.5rem; padding: 0; display: grid; gap: 0.6rem; }
/* Each provider's own button colours and logo (allauth/elements/provider.html), as their sign-in guidelines ask. */
a.provider-button {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; box-sizing: border-box;
    min-height: 2.9rem; padding: 0.6rem 1rem; border: 1px solid transparent; border-radius: 999px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; font-weight: 600;
    text-decoration: none; line-height: 1.2;
}
a.provider-button:hover { filter: brightness(0.96); }
a.provider-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.provider-logo { width: 1.25rem; height: 1.25rem; flex: none; }
a.provider-google { background: #fff; color: #1f1f1f; border-color: #747775; }
a.provider-microsoft { background: #fff; color: #5e5e5e; border-color: #8c8c8c; }
a.provider-facebook { background: #1877f2; color: #fff; }
a.provider-apple { background: #000; color: #fff; }
a.provider-github { background: #24292f; color: #fff; }
.or-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--muted); font-size: 0.95rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.panel-actions { list-style: none; margin: 1rem 0 0; padding: 0; }
.button-stack { display: grid; gap: 0.6rem; margin: 0.75rem 0; }
a.button-secondary { color: var(--accent-text); background: var(--accent-soft); }
a.button-secondary:hover { background: var(--surface-2); }
button.danger { background: #b42318; color: #fff; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
main > h2 { margin-top: 1.5rem; }

/* ---------- Microphone check ---------- */

.mic-dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 1.25rem;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
}
.mic-dialog::backdrop { background: rgb(10 10 20 / 55%); }
.mic-dialog h2 { margin-top: 0; }
.mic-dialog [hidden] { display: none !important; }

.level { height: 14px; margin: 0.5rem 0 1rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.level span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.06s linear; }

.mic-result { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.mic-result[data-verdict="good"] { background: var(--ok-bg); color: var(--ok-fg); }
.mic-result[data-verdict="quiet"], .mic-result[data-verdict="loud"], .mic-result[data-verdict="noisy"] { background: var(--err-bg); color: var(--err-fg); }
.mic-headline { font-weight: 700; margin: 0 0 0.25rem; }
.mic-result ul { margin: 0; padding-left: 1.2rem; }

/* ---------- Login / sign-up lockup ---------- */

.entrance-logo { display: flex; justify-content: center; margin: 1rem 0 1.5rem; }
.entrance-logo .gs-logo--stacked { font-size: clamp(40px, 10vw, 64px); }
.entrance-logo .gs-logo--stacked .gs-logo__mark { height: 84px; }

/* ---------- Visitors ---------- */

.site-nav a.nav-signup {
    color: var(--on-button);
    background: var(--button);
    padding: 0 0.9rem;
    border-radius: 999px;
    font-weight: 650;
}
.site-nav a.nav-signup:hover { background: var(--button-hover); color: var(--on-button); }

/* ---------- Tags ---------- */

.tag-filters { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }
.tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tag-group-label { min-width: 4.5rem; font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tag-chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85rem;
    font-size: 0.9rem; text-decoration: none; color: var(--fg);
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.tag-chip:hover { border-color: var(--accent-text); }
.tag-chip-on { color: var(--on-button); background: var(--button); border-color: var(--button); }
.tag-clear { font-size: 0.9rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.tag-label { display: inline-block; padding: 0.05rem 0.6rem; font-size: 0.78rem; font-weight: 600; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.tag-label.tag-raga { color: var(--accent-text); background: var(--accent-soft); }
h1 + .tag-row { margin: 0 0 0.75rem; }

.sa-form select { max-width: 22rem; }

/* ---------- Feedback (Feedback group only) ---------- */

button.feedback-button {
    position: fixed;
    z-index: 15;
    right: var(--gutter);
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
    min-height: 40px;
    padding: 0 1rem;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}
.feedback-dialog textarea { margin-bottom: 0.75rem; }
.feedback-recording { margin: 0.5rem 0; }
.feedback-recording audio { display: block; width: 100%; margin-top: 0.4rem; }
.feedback-dialog label.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.feedback-preview {
    display: block;
    width: 100%;
    max-height: 12rem;
    margin: 0.5rem 0 0.75rem;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
#feedback-status:empty { display: none; }

/* ---------- Page heading with a back icon (_back.html) ---------- */

.page-heading { display: flex; align-items: center; gap: 0.25rem; margin: 0.5rem 0; }
.page-heading h1 { margin: 0; min-width: 0; }
.back-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -0.6rem;
    color: var(--fg);
    border-radius: 50%;
}
.back-link:hover { background: var(--surface-2); color: var(--accent-text); }
.back-link:focus-visible { outline: none; box-shadow: var(--focus); }
.page-heading + .tag-row { margin: 0 0 0.75rem; }
.lesson-place { margin: -0.25rem 0 0.4rem; font-size: 0.92rem; }
.lesson-place + .tag-row { margin: 0 0 0.75rem; }
.rhythm-tempo { margin: 0.25rem 0 0; font-size: 0.85rem; }

/* ---------- Why the score is what it is (after scoring) ---------- */

.explain { margin-top: 0.75rem; }
.verdicts { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; }
.verdicts li + li { margin-top: 0.2rem; }
.score-chart { margin: 0.5rem 0; }
.score-chart-svg { display: block; width: 100%; height: auto; background: var(--surface-2); border-radius: var(--radius-sm); }
.chart-note { fill: color-mix(in srgb, var(--muted) 22%, transparent); }
.chart-note-off { fill: var(--err-bg); stroke: var(--err-border); }
.chart-label { font-size: 11px; fill: var(--muted); }
.chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-reference { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-you { stroke: var(--accent); }
.chart-legend { display: flex; gap: 1rem; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-swatch { display: inline-block; width: 1.4rem; height: 0; border-top: 3px solid; }
.chart-swatch.chart-reference { border-top-style: dashed; border-color: var(--muted); }
.chart-swatch.chart-you { border-color: var(--accent); }
.note-list { margin: 0.5rem 0 0; padding-left: 1.4rem; font-size: 0.92rem; }
.note-list .note-ok { color: var(--muted); }
.note-list .note-off { color: var(--err-fg); }

/* Practice-page toggles. */
.auto-retry { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--muted); cursor: pointer; }
.auto-retry input { flex: none; }
/* An icon button that is on or off (aria-pressed), e.g. the keep-the-screen-on eye; pushed to the row's far end. */
/* Round icon buttons at the end of a practice page's button row: the microphone check, then the eye. */
button.icon-button, button.icon-toggle { margin-left: auto; width: 2.75rem; height: 2.75rem; padding: 0; display: inline-grid; place-items: center;
    border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
button.icon-toggle[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); }
/* The generic button hover (solid accent) would otherwise win on specificity and, on phones, stick after a tap,
   looking like a third state: hovering only darkens the border. */
button.icon-button + button.icon-toggle { margin-left: 0; }
/* The run page's skip icon sits with Pause on the left; the mic and eye icons stay on the right. */
button.icon-button.skip-button { margin-left: 0; }
button.icon-button.skip-button svg path:first-child { fill: currentColor; }
button.icon-button:hover:not(:disabled), button.icon-toggle:hover:not(:disabled) { background: var(--surface-2); border-color: var(--muted); }
button.icon-toggle[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-soft); }
button.icon-button svg, button.icon-toggle svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.icon-toggle[aria-pressed="true"] .eye-closed, button.icon-toggle[aria-pressed="false"] .eye-open { display: none; }
/* A caption under each icon for someone's first few practice pages (_mic_check_button.html counts them). */
button.icon-button, button.icon-toggle { position: relative; }
.icon-caption { position: absolute; top: calc(100% + 0.2rem); left: 50%; transform: translateX(-50%); white-space: nowrap;
    font-size: 0.7rem; font-weight: 600; line-height: 1; color: var(--muted); pointer-events: none; }
.button-row:has(.icon-caption) { margin-bottom: 1.1rem; }
html:not(.icon-captions-off) button.icon-button + button.icon-toggle { margin-left: 0.9rem; }     /* room for both captions */
.icon-captions-off .icon-caption { display: none; }
.icon-captions-off .button-row:has(.icon-caption) { margin-bottom: 0; }

/* Practice tools (practiceTools.js, Riyaz and up): small chips that are on or off (aria-pressed); the speeds are one
   joined group. */
.practice-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0.25rem; }
.speed { display: inline-flex; }
button.tool { display: inline-flex; align-items: center; gap: 0.3rem; width: auto; min-height: 2.25rem; margin: 0;
    padding: 0.3rem 0.75rem; font-size: 0.88rem; font-weight: 600; color: var(--fg); background: var(--surface);
    border: 1px solid var(--border); border-radius: 999px; }
.speed button.tool { border-radius: 0; margin-left: -1px; padding: 0.3rem 0.6rem; }
.speed button.tool:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.speed button.tool:last-child { border-radius: 0 999px 999px 0; }
.practice-tools button.tool:hover:not(:disabled) { background: var(--surface-2); }
.practice-tools button.tool[aria-pressed="true"] { position: relative; color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); }
button.tool svg, .hint-icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
.hint-icon { vertical-align: -0.2em; margin-right: 0.3rem; }
.tool-hint { margin: 0.35rem 0 0; font-size: 0.85rem; }

/* Sadhana: the last attempt next to the phrase (record.js). */
.listen-back { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.listen-back-label { width: 100%; margin: 0; font-weight: 650; }
.listen-back audio { flex: 1 1 14rem; min-width: 0; }

/* The notes in beats, behind "Show the notes" (rhythm.js): a cell per beat ("–" holds the note), notes sharing a
   beat with an arc under them, and Bhatkhande's marks: a dot below for the lower octave and above for the upper, a
   line under komal notes, a tick over tivra Ma. The marks go on the note's name (.svara-name), so grace notes
   (small and raised before it: kan swar, murki) carry their own. Andolan is a wavy line over the note. */
.rhythm { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0; padding: 0; list-style: none; }
.beat { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.15rem;
    min-width: 2.6rem; padding: 0.55rem 0.45rem 0.7rem; font-weight: 650; white-space: nowrap;
    background: var(--accent-soft); border-radius: 6px; }
.beat-shared::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0.2rem; height: 0.35rem;
    border: 2px solid var(--accent); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.beat-shared:has(> .svara-low)::after { bottom: -0.05rem; }    /* below a lower octave's dot */
/* The beat being played (rhythm.js follow): the phrase's while it plays, the player's while recording. */
.beat { transition: background-color 0.08s, box-shadow 0.08s; }
.beat.is-sounding { background: color-mix(in srgb, var(--accent) 34%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.svara, .svara-name, .grace-note { position: relative; display: inline-block; }
.svara-hold, .svara-rest { color: var(--muted); }
.svara-komal > .svara-name, .grace-note.svara-komal { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.svara-low > .svara-name::before, .svara-high > .svara-name::before, .grace-note.svara-low::before, .grace-note.svara-high::before {
    content: ""; position: absolute; left: 50%; width: 0.28rem; height: 0.28rem;
    margin-left: -0.14rem; border-radius: 50%; background: currentColor; }
.svara-low > .svara-name::before { bottom: -0.4rem; }
.svara-high > .svara-name::before { top: -0.35rem; }
.svara-tivra > .svara-name::after, .grace-note.svara-tivra::after { content: ""; position: absolute; left: 50%; top: -0.5rem; width: 2px; height: 0.45rem; background: currentColor; }
.svara-tivra.svara-high > .svara-name::before { margin-left: 0.2rem; }
.svara-grace { display: inline-flex; gap: 0.1rem; margin-right: 0.1rem; font-size: 0.68em; font-weight: 600;
    vertical-align: 0.55em; color: var(--muted); }
.grace-note.svara-low::before { bottom: -0.3rem; width: 0.2rem; height: 0.2rem; margin-left: -0.1rem; }
.grace-note.svara-high::before { top: -0.25rem; width: 0.2rem; height: 0.2rem; margin-left: -0.1rem; }
.svara-andolan > .svara-name::after { content: ""; position: absolute; left: -0.1rem; right: -0.1rem; top: -0.55rem; height: 0.4rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3q3-4 6 0t6 0' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 12px 6px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3q3-4 6 0t6 0' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 12px 6px; }
.svara-andolan.svara-high > .svara-name::before { top: -0.8rem; }
/* "What do these marks mean?" beside the drawn notes (notationHelp.js), and the notation page (/notation/) */
.notes-help { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin: 0 0 0.4rem; }
.rhythm[hidden] ~ .notes-help .notation-help { display: none; }
button.notation-help { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
.notation-index ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.notation-mark { scroll-margin-top: 1rem; }
.notation-written code { font-size: 0.95em; }
.notation-example .is-explained { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.tour-bubble .tour-link { display: inline-block; margin: -0.2rem 0 0.5rem; }

/* ---------- Today: streak, daily goal and "Today's practice" (home page, _today.html) ---------- */

/* "About this lesson/phrase" at the foot of lesson and phrase pages: its facts, and how to practise it. */
.about-page { margin-top: 2rem; }
.about-page h3 { font-size: 1.05rem; margin: 1rem 0 0.35rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* The home page's opening for visitors (phrase_list.html): what this is and who it's for, with Guruji playing. */
.landing { margin: 0.5rem 0 1.5rem; }
.landing::after { content: ""; display: block; clear: both; }
.landing-guru { float: right; width: 9rem; height: auto; margin: 0 0 0.5rem 1rem; }
.landing .lede { margin-bottom: 0.75rem; }
.landing-points { margin: 0 0 1rem; padding-left: 1.2rem; }
.landing-points li { margin-bottom: 0.35rem; }
.landing .button-row { align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
@media (max-width: 30rem) { .landing-guru { width: 6.5rem; } }
/* What a score looks like: Guruji's card (the practice pages' .phase-guru) and the lines beside it. */
.landing-demo { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1rem; padding: 0.75rem 1rem;
    background: var(--surface-2); border-radius: var(--radius-sm); clear: both; }
.landing-demo .phase-guru { flex: none; }
.landing-demo figcaption p { margin: 0.1rem 0; font-size: 0.92rem; }
.landing-demo .landing-demo-score { font-family: var(--gs-font-display); font-size: 1.15rem; font-weight: 700; }

.course { margin-bottom: 1.5rem; }
.course .section-title { margin-bottom: 0.2rem; }
.course-note { margin: 0 0 0.6rem; font-size: 0.92rem; }

.today-card {
    margin: 1.25rem 0 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.today-card h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
/* The thumbs-up cow, only once the daily goal is reached (decorative; the message says it in words). */
.today-cheer { float: right; height: 5.5rem; width: auto; margin: -0.25rem 0 0.25rem 0.75rem; }
.today-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.today-stat { display: flex; flex-direction: column; min-width: 6rem; }
.today-number { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.today-of { font-size: 1rem; font-weight: 500; color: var(--muted); }
.today-label { color: var(--muted); font-size: 0.88rem; }
.today-goal progress { width: 8rem; margin-top: 0.35rem; }
.today-message { margin: 0.9rem 0 0; }
.today-card .button-row { align-items: center; margin-top: 0.75rem; }
.today-next { font-size: 0.92rem; }
.today-goal-link { margin-left: auto; font-size: 0.92rem; color: var(--accent-text); }

.best-score {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
}

/* ---------- Weekly challenge (challenge.html) ---------- */
.challenge-card h2 { margin: 0.1rem 0 0.4rem; }
.leaderboard-you td { font-weight: 700; color: var(--accent-text); }

/* ---------- Teaching (teach.html): the student link and its QR code ---------- */

.teach-link { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.teach-link input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.9rem; }
.teach-qr { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.teach-qr svg { width: 12rem; height: auto; border-radius: var(--radius-sm); }
.teach-name { margin-bottom: 1rem; }

/* ---------- Tag picker (tagPicker.js, teachers' forms) ---------- */

.tag-picker-row { display: grid; gap: 0.35rem; margin: 0.6rem 0 0.9rem; }
.tag-picker-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-picker-chips:empty { display: none; }
.tag-picker-search { max-width: 22rem; }
.tag-picker-results { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-picker-results:empty { display: none; }
.tag-picker-results button.tag-chip { cursor: pointer; min-height: 0; padding: 0.35rem 0.8rem; font-size: 0.9rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); }
.tag-picker-results button.tag-picker-new { border-style: dashed; color: var(--accent-text); }
button.tag-remove { margin-left: 0.3rem; padding: 0 0.2rem; border: 0; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }

/* ---------- Error pages (404.html; 500/403/400 are standalone) ---------- */

.error-page { text-align: center; padding: 1rem 0 2rem; }
.error-guru { width: 11rem; height: auto; }
.error-page .button-row { justify-content: center; }

/* ---------- Scores out of ten ({% out_of_ten %}, lights.py): the number players see, without colour ---------- */

.out-of-ten { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Progress, Needs work: the button with its note beside it (centred on it), space before the list, and each phrase's
   score at the end of its title line rather than run on from the name. */
#needs-work-start { align-items: center; margin-bottom: 1.25rem; }
.needs-work .phrase-title { display: flex; align-items: baseline; gap: 0.75rem; }
.needs-work .needs-work-name { min-width: 0; }
.needs-work .phrase-title .out-of-ten { margin-left: auto; color: var(--accent-text); }
.score .out-of-ten { font-size: 1.4rem; }

/* Page tours (tour.js): the page dimmed with a hole over each feature, a ring round it, and a bubble with an arrow
   above or below. Positions are set by the script, in screen coordinates. */
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour-shade { position: absolute; inset: 0; }
.tour-shade path { fill: rgb(8 6 20 / 62%); fill-rule: evenodd; }
.tour-ring { position: absolute; border: 2px solid var(--accent); border-radius: var(--radius-sm); pointer-events: none; }
.tour-bubble { position: absolute; width: max-content; max-width: min(20rem, calc(100vw - 24px)); padding: 0.85rem 1rem;
    background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 6px 24px rgb(20 18 40 / 25%); font-size: 0.95rem; }
.tour-bubble p { margin: 0; }
.tour-bubble::before { content: ""; position: absolute; left: var(--arrow-x, 50%); top: -7px; width: 12px; height: 12px;
    background: inherit; border: inherit; border-width: 1px 0 0 1px; transform: translateX(-50%) rotate(45deg); }
.tour-bubble.tour-above::before { top: auto; bottom: -7px; border-width: 0 1px 1px 0; }
.tour-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.tour-count { color: var(--muted); font-size: 0.85rem; margin-right: auto; }
.tour-controls button:not(.link-button) { min-height: 2.25rem; padding: 0 0.9rem; width: auto; }
.tour-controls .tour-skip { font-size: 0.85rem; }

/* The leaderboard (leaderboard.py): a card per category, top five each. */
.leaderboards { display: grid; gap: 1rem; }
@media (min-width: 52rem) {
    .leaderboards { grid-template-columns: repeat(2, 1fr); }
    main:has(.leaderboards) { max-width: 60rem; }
}
.leaderboard-card { margin: 0; }
.leaderboard-card h2 { margin-bottom: 0.15rem; }
.leaderboard-card > .muted { margin: 0 0 0.75rem; font-size: 0.9rem; }
.leaderboard-list { list-style: none; margin: 0; padding: 0; }
.leaderboard-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); }
.leaderboard-list li + li { border-top: 1px solid var(--border); }
.leaderboard-list li.leaderboard-you { background: var(--accent-soft); }
.leaderboard-rank { width: 1.4rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.leaderboard-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-value { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.sa-detect { margin-bottom: 1rem; }
.sa-detect p:last-child:empty { display: none; }

/* Guides (guides.py, the notation page): readable text, a table of notes or keys, and the free lesson at the end. */
.guide { max-width: 44rem; }
.key-table { max-width: 100%; }
.guide h2 { margin-top: 1.75rem; }
.guide .step h2 { margin-top: 0; }
.guide-steps { padding-left: 1.3rem; }
.guide-steps > li { margin-bottom: 1rem; }
.guide-lessons { padding-left: 1.2rem; }
.guide-lessons li { margin-bottom: 0.3rem; }
.key-table { border-collapse: collapse; margin: 0.5rem 0 1rem; }
.key-table caption { text-align: left; color: var(--muted); font-size: 0.92rem; padding-bottom: 0.3rem; }
.key-table th, .key-table td { text-align: left; padding: 0.3rem 1rem 0.3rem 0; border-bottom: 1px solid var(--border); }
.glossary dt { font-weight: 600; margin-top: 1rem; scroll-margin-top: 1rem; }
.glossary dd { margin: 0.2rem 0 0; }
.faq-item h2 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
.try-free { margin: 2rem 0 1rem; padding: 1.1rem; background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); box-shadow: var(--shadow); max-width: 44rem; }
.try-free::after { content: ""; display: block; clear: both; }
.try-free h2 { margin-top: 0; }
.try-free-guru { float: right; width: 6.5rem; height: auto; margin: 0 0 0.5rem 1rem; }
.guide-links h2 { font-size: 1.05rem; }
.guide-links ul, .site-links ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0; margin: 0; list-style: none; }
.site-links { max-width: var(--measure); margin: 0 auto 1rem; padding: 1rem var(--gutter) 0; border-top: 1px solid var(--border);
              font-size: 0.92rem; }
.site-links .legal-links { margin-top: 0.6rem; font-size: 0.85rem; }
.site-links .legal-links a { color: var(--muted); }
.legal ul li { margin-bottom: 0.4rem; }
.signup-agreement { font-size: 0.85rem; }
.site-links .legal-links .link-button { color: var(--muted); font-size: inherit; }
/* Asking before Google Analytics (_cookie_banner.html, cookieConsent.js): only where the law requires it. */
.cookie-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50;
                 width: min(36rem, calc(100% - 2 * var(--gutter))); padding: 0.9rem 1rem;
                 background: var(--surface); color: var(--fg); border: 1px solid var(--border);
                 border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.cookie-banner p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.cookie-banner .button-row { margin: 0; }
button.cookie-choice { min-width: 7rem; }
/* The live preview of notation being typed (notationPreview.js): the upload form and the writing guide. */
.notation-preview { margin: -0.4rem 0 1rem; padding: 0.6rem 0.8rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.notation-preview-label { margin: 0; font-size: 0.92rem; color: var(--muted); }
.notation-preview .rhythm.is-stale, .notation-preview:has(.is-error) .rhythm { opacity: 0.45; }
.notation-preview-status { margin: 0.3rem 0 0; font-size: 0.92rem; }
.notation-preview-status.is-error { color: var(--err-fg); font-weight: 600; }
.notation-try textarea { width: 100%; font-family: ui-monospace, monospace; }
/* Deleting a lesson or phrase (lesson_form.html, phrase_upload.html, confirm_delete.html) */
.danger-zone { margin-top: 2rem; }
.danger-zone h2 { font-size: 1.05rem; }
a.button-danger { background: #b42318; color: #fff; }
a.button-danger:hover { background: #912018; }
.edit-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin: 0.25rem 0 0.75rem; font-size: 0.95rem; }
.track-list .edit-link { font-size: 0.9rem; }