/*
 * Reusable components of the "Signal" design system.
 * Naming: BEM-like. Block `.card`, element `.card__title`, modifier `.card--interactive`, state `.is-selected`.
 * Documentation and markup examples: docs/DESIGN.md
 */

/* ---------- Page header ---------- */

.page-header {
    margin-bottom: var(--space-6);
}

.page-header__eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.page-header h1 {
    margin-bottom: var(--space-2);
}

.page-header__lead {
    max-width: var(--prose-max);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1.5;
}

/* ---------- Buttons (push buttons of the signal box: flat, square-ish, pressed on click) ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.btn:hover:not(:disabled) {
    border-color: var(--color-text);
    color: var(--color-text);
    text-decoration: none;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--primary {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn--primary:hover:not(:disabled) {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

/* Destructive confirmation (e.g. "Ja, zurücksetzen"). Only after an explicit question, never as first click. */
.btn--danger,
.btn--danger:hover:not(:disabled) {
    border-color: var(--color-problem);
    background-color: var(--color-problem);
    color: var(--color-on-problem);
}

.btn--ghost {
    border-color: transparent;
    background-color: transparent;
    color: var(--color-primary);
}

.btn--ghost:hover:not(:disabled) {
    border-color: transparent;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.btn--sm {
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
}

.btn--block {
    width: 100%;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* ---------- Cards (flat panels; only where content belongs together as one block) ---------- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.card--interactive {
    transition: border-color var(--duration-fast) ease;
}

.card--interactive:hover {
    border-color: var(--color-border);
}

/* Station sign: number in a circle with a ring in the course color */
.card__number {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--rule-width) solid var(--course-color);
    border-radius: 50%;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

.card__title {
    margin: 0;
    font-size: var(--text-xl);
}

.card__text {
    margin: 0;
    color: var(--color-text-muted);
}

.card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---------- Grid ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
}

/* ---------- Route (timetable list: a vertical line with one station per step) ---------- */

.route {
    --station-size: 2.25rem;

    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.route__stop {
    position: relative;
    display: grid;
    grid-template-columns: var(--station-size) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    padding-bottom: var(--space-6);
}

/* Track to the next station */
.route__stop::before {
    content: "";
    position: absolute;
    top: var(--station-size);
    bottom: 0;
    left: calc(var(--station-size) / 2 - var(--rule-width) / 2);
    width: var(--rule-width);
    background-color: var(--color-border-subtle);
}

.route__stop:last-child {
    padding-bottom: 0;
}

.route__stop:last-child::before {
    display: none;
}

.route__stop.is-done::before {
    background-color: var(--course-color);
}

.route__station {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--station-size);
    height: var(--station-size);
    border: var(--rule-width) solid var(--course-color);
    border-radius: 50%;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
}

.route__stop.is-done .route__station {
    background-color: var(--course-color);
    color: var(--course-on-color);
}

/* Current stop: a lit (yellow) signal ring */
.route__stop.is-current .route__station {
    box-shadow: 0 0 0 var(--rule-width) var(--color-bg), 0 0 0 calc(var(--rule-width) * 2 + 1px) var(--color-accent);
}

.route__body {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding-top: var(--space-1);
}

.route__title {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.2;
}

.route__title a {
    color: var(--color-text);
    text-decoration: none;
}

.route__title a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.route__text {
    max-width: var(--prose-max);
    margin: 0;
    color: var(--color-text-muted);
}

.route__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.route__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    grid-column: 2;
    margin-top: var(--space-1);
}

@media (min-width: 900px) {
    .route__stop {
        grid-template-columns: var(--station-size) minmax(0, 1fr) auto;
    }

    .route__actions {
        grid-column: 3;
        align-self: start;
        margin-top: var(--space-1);
    }
}

/* ---------- Badges & severity chips ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.0625rem var(--space-2);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.badge--primary { border-color: transparent; background-color: var(--color-primary-soft); color: var(--color-primary); }
.badge--ok { border-color: transparent; background-color: var(--color-ok-soft); color: var(--color-ok); }
.badge--problem { border-color: transparent; background-color: var(--color-problem-soft); color: var(--color-problem); }
.badge--info { border-color: transparent; background-color: var(--color-info-soft); color: var(--color-text); }

.severity {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: 600;
}

.severity--not-classified { background-color: var(--severity-not-classified); }
.severity--information { background-color: var(--severity-information); }
.severity--warning { background-color: var(--severity-warning); }
.severity--average { background-color: var(--severity-average); }
.severity--high { background-color: var(--severity-high); }
.severity--disaster { background-color: var(--severity-disaster); }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-border);
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--color-text);
}

/* ---------- Progress bar (a stretch of track filling up) ---------- */

.progress {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-muted);
}

.progress__bar {
    height: 100%;
    background-color: var(--course-color);
    transition: width var(--duration-base) var(--ease-out);
}

/* Result bars (e.g. per topic in the exam): the color carries the state, the number next to it says it in words */
.progress--ok .progress__bar { background-color: var(--color-ok); }
.progress--warning .progress__bar { background-color: var(--color-warning); }
.progress--problem .progress__bar { background-color: var(--color-problem); }

/* ---------- Callouts ---------- */

.callout {
    padding: var(--space-4) var(--space-5);
    border-left: var(--rule-width) solid var(--color-info);
    border-radius: var(--radius-md);
    background-color: var(--color-info-soft);
}

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

.callout__title {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.callout--ok { border-left-color: var(--color-ok); background-color: var(--color-ok-soft); }
.callout--problem { border-left-color: var(--color-problem); background-color: var(--color-problem-soft); }
.callout--info { border-left-color: var(--color-info); background-color: var(--color-info-soft); }

/* ---------- Choice options (quiz) ---------- */

.options {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0;
    padding: 0;
    list-style: none;
}

.option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.option:hover:not(:disabled) {
    border-color: var(--color-border);
}

.option:disabled {
    cursor: default;
}

.option__marker {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 600;
}

.option--radio .option__marker { border-radius: 50%; }

.option.is-selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

.option.is-selected .option__marker {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.option.is-correct {
    border-color: var(--color-ok);
    background-color: var(--color-ok-soft);
}

.option.is-correct .option__marker {
    border-color: var(--color-ok);
    background-color: var(--color-ok);
    color: var(--color-surface);
}

.option.is-wrong {
    border-color: var(--color-problem);
    background-color: var(--color-problem-soft);
}

.option.is-wrong .option__marker {
    border-color: var(--color-problem);
    background-color: var(--color-problem);
    color: var(--color-surface);
}

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

.score {
    --score: 0;
    --score-color: var(--color-ok);

    display: grid;
    flex: none;
    place-items: center;
    width: 7.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--score-color) calc(var(--score) * 1%), var(--color-surface-muted) 0);
}

.score__value {
    display: grid;
    place-items: center;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
}

/* ---------- Empty / not found state ---------- */

.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    max-width: var(--prose-max);
    padding: var(--space-6) 0;
}

.empty-state h1 {
    margin: 0;
}

.empty-state p {
    margin: 0 0 var(--space-2);
}

/* ---------- State graphics: signal head (error, no access) and buffer stop (not found) ---------- */

.signal-head {
    width: 2.5rem;
    height: auto;
}

.signal-head__mast,
.signal-head__housing {
    fill: var(--lamp-housing);
}

.signal-head__lamp {
    fill: var(--lamp-off);
}

.signal-head--stop .signal-head__lamp--red { fill: var(--lamp-red); }
.signal-head--go .signal-head__lamp--green { fill: var(--lamp-green); }

.buffer-stop {
    width: 9rem;
    height: auto;
}

.buffer-stop__track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 5;
}

.buffer-stop__block {
    fill: var(--lamp-housing);
}

.buffer-stop__beam {
    fill: var(--color-problem);
}

/* ---------- Signal lamp (status light in its dark housing) ---------- */

.pulse-dot {
    display: inline-block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--lamp-green);
    box-shadow: 0 0 0 0.1875rem var(--lamp-housing), 0 0 0.6rem 0.1875rem color-mix(in srgb, var(--lamp-green) 45%, transparent);
}

.pulse-dot--problem {
    background-color: var(--lamp-red);
    box-shadow: 0 0 0 0.1875rem var(--lamp-housing), 0 0 0.6rem 0.1875rem color-mix(in srgb, var(--lamp-red) 45%, transparent);
}

.pulse-dot--idle {
    background-color: var(--lamp-off);
    box-shadow: 0 0 0 0.1875rem var(--lamp-housing);
}

/* Something is in progress: the yellow lamp flashes, like a route being set in the signal box */
.pulse-dot--busy {
    background-color: var(--lamp-yellow);
    box-shadow: 0 0 0 0.1875rem var(--lamp-housing);
    animation: lamp-flash 1.2s steps(1, end) infinite;
}

@keyframes lamp-flash {
    50% { background-color: var(--lamp-off); }
}

.heartbeat {
    color: var(--course-color);
}

.heartbeat path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: heartbeat-draw 1.6s var(--ease-out) 0.2s forwards;
}

@keyframes heartbeat-draw {
    to { stroke-dashoffset: 0; }
}

/* ---------- Utilities (keep this list short) ---------- */

.text-muted { color: var(--color-text-muted); }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.stack > * + * { margin-top: var(--space-5); }

/* ---------- Icon ---------- */

.icon {
    flex: none;
}

/* ---------- Checklist (lab check results) ---------- */

.checklist {
    display: grid;
    margin: 0;
    padding: 0;
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    list-style: none;
}

.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.checklist__item + .checklist__item {
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.checklist__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-problem);
    color: var(--color-on-problem);
}

.checklist__item.is-passed .checklist__icon {
    background-color: var(--color-ok);
    color: var(--color-surface);
}

.checklist__title {
    display: block;
    font-weight: 600;
}

.checklist__detail {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ---------- Disclosure (collapsible solution) ---------- */

.disclosure {
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.disclosure > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.disclosure > summary:hover {
    color: var(--color-primary);
}

.disclosure > summary::-webkit-details-marker {
    display: none;
}

/* Chevron that turns when opened */
.disclosure > summary::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 var(--space-1);
    border-right: 0.125rem solid currentcolor;
    border-bottom: 0.125rem solid currentcolor;
    transform: rotate(-45deg);
    transition: transform var(--duration-base) var(--ease-out);
}

.disclosure[open] > summary::before {
    transform: rotate(45deg);
}

.disclosure[open] > summary {
    border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.disclosure__body {
    padding: var(--space-4) var(--space-5);
}

/* ---------- Lab status (signal next to the track: lamp, state, controls) ---------- */

.lab-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.lab-status > .pulse-dot {
    margin-left: var(--space-1);
}

.lab-status__text {
    flex: 1 1 16rem;
}

.lab-status__title {
    display: block;
    font-weight: 600;
}

.lab-status__hint {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.lab-status__hint + .lab-status__hint {
    margin-top: var(--space-1);
}

.lab-status__login {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.lab-status__confirm {
    flex-basis: 100%;
}

/* ---------- Lab actions (predefined commands instead of a terminal) ---------- */

.lab-actions__list {
    display: grid;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.lab-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.lab-action + .lab-action {
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.lab-action__text {
    flex: 1 1 14rem;
}

.lab-action__title {
    display: block;
    font-weight: 600;
}

.lab-action__command {
    display: block;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.lab-actions .callout {
    margin-top: var(--space-4);
}

/* ---------- Live alerts (what the lab's Zabbix sent to Trainyard) ---------- */

.alert-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alert-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0;
}

.alert-item + .alert-item {
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.alert-item__state {
    font-size: var(--text-sm);
    font-weight: 600;
}

.alert-item__body {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.alert-item__name {
    overflow-wrap: anywhere;
}

.alert-item.is-problem .alert-item__name {
    font-weight: 600;
}

.alert-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.alert-item__message {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .alert-item {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Live values (mini graphs on lab pages) ---------- */

.live-values__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 6rem;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.live-value + .live-value {
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.live-value__text {
    display: grid;
    min-width: 0;
}

.live-value__name {
    font-weight: 600;
}

.live-value__key {
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.live-value__value {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.live-value__hint {
    grid-column: 2 / -1;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: right;
}

.live-values__note {
    font-size: var(--text-sm);
}

.sparkline {
    display: block;
    width: 100%;
    height: 2rem;
    overflow: visible;
}

.sparkline polyline {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline--empty {
    border-bottom: var(--border-width) dashed var(--color-border-subtle);
}

@media (max-width: 480px) {
    .live-value {
        grid-template-columns: minmax(0, 1fr) 5rem;
    }

    .live-value__text {
        grid-column: 1 / -1;
    }

    .live-value__hint {
        grid-column: 1 / -1;
        text-align: left;
    }
}

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

.form {
    display: grid;
    gap: var(--space-4);
}

.field {
    display: grid;
    gap: var(--space-1);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 600;
}

.field__hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.field__error,
.validation-message {
    color: var(--color-problem);
    font-size: var(--text-sm);
    font-weight: 500;
}

.input {
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--duration-fast) ease;
}

.input:hover {
    border-color: var(--color-text-muted);
}

.input:focus-visible {
    border-color: var(--color-primary);
}

.input.invalid {
    border-color: var(--color-problem);
}

.input--mono {
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.input--number {
    max-width: 12rem;
}

select.input {
    cursor: pointer;
}

.input:disabled {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.checkbox input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
}

.validation-errors {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-problem);
    font-size: var(--text-sm);
}

/* ---------- Stat figures (a row of numbers with labels, no boxes) ---------- */

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin: 0;
}

.stat {
    display: grid;
    gap: var(--space-1);
}

.stat > dd {
    margin: 0;
}

.stat__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ---------- Settings editor ---------- */

.settings-group {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.settings-group__title {
    padding: 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}

.field__label .badge {
    margin-left: var(--space-2);
    vertical-align: middle;
}

/* ---------- Line badge (course symbol, like an S-Bahn line sign) ---------- */

.line-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--course-color);
    color: var(--course-on-color);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
}

.line-badge--lg {
    min-width: 2.75rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xl);
}

/* ---------- Course band (top of every course page) ---------- */

.course-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: var(--rule-width) solid var(--course-color);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.course-band__title {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    text-decoration: none;
}

.course-band__title:hover {
    color: var(--color-primary);
}

.course-band__motif {
    width: 4rem;
    margin-left: auto;
    color: var(--course-color);
}

/* ---------- Panel (the signal-box table: always dark, for the one most important block of a page) ---------- */

.panel {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--color-panel-bg);
    color: var(--color-panel-text);
}

.panel .stat__label {
    color: var(--color-panel-muted);
}

.panel .btn--ghost {
    color: var(--color-panel-text);
}

.panel .btn--ghost:hover:not(:disabled) {
    background-color: var(--color-panel-tile);
    color: var(--color-panel-text);
}

/* In light mode Verkehrsblau is too dark on the panel; there the button gets a light keyline */
.panel .btn--primary {
    border-color: color-mix(in srgb, var(--color-on-primary) 35%, var(--color-primary));
}

@media (min-width: 768px) {
    .panel {
        padding: var(--space-6);
    }
}

/* ---------- Line map (signal-box panel: one tile per module, the route lights up) ---------- */

.line-map {
    --station-size: 1.25rem;
    --track: 0.3125rem;
    --track-y: calc(var(--space-4) + var(--station-size) / 2);

    display: grid;
    grid-auto-columns: minmax(7.5rem, 1fr);
    grid-auto-flow: column;
    gap: 0.1875rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

.line-map__stop {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: var(--color-panel-tile);
    text-align: center;
}

/* Track halves: ::before runs to the previous tile, ::after to the next one (across the tile gap) */
.line-map__stop::before,
.line-map__stop::after {
    content: "";
    position: absolute;
    top: calc(var(--track-y) - var(--track) / 2);
    width: calc(50% + 0.1rem);
    height: var(--track);
    background-color: var(--color-panel-track);
}

.line-map__stop::before { left: -0.1rem; }
.line-map__stop::after { right: -0.1rem; }

.line-map__stop:first-child::before,
.line-map__stop:last-child::after {
    display: none;
}

.line-map__stop.is-done::before,
.line-map__stop.is-done:has(+ .is-done)::after {
    background-color: var(--course-color);
}

/* The route to the next stop is set: it lights up yellow, once, from left to right */
.line-map__stop.is-done:has(+ .is-current)::after,
.line-map__stop.is-done + .is-current::before {
    background-color: var(--color-accent);
    transform-origin: left center;
    animation: route-set 0.5s var(--ease-out) both;
}

.line-map__stop.is-done + .is-current::before {
    animation-delay: 0.45s;
}

@keyframes route-set {
    from { transform: scaleX(0); }
}

.line-map__station {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--station-size);
    height: var(--station-size);
    border: 0.1875rem solid var(--color-panel-track);
    border-radius: 50%;
    background-color: var(--color-panel-bg);
    color: var(--course-on-color);
}

.line-map__stop.is-done .line-map__station {
    border-color: var(--course-color);
    background-color: var(--course-color);
}

.line-map__stop.is-current .line-map__station {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    animation: lamp-flash-panel 1.6s steps(1, end) 1s infinite;
}

@keyframes lamp-flash-panel {
    50% { background-color: var(--color-panel-bg); }
}

.line-map__label {
    color: var(--color-panel-muted);
    font-size: var(--text-sm);
    line-height: 1.3;
    text-decoration: none;
}

a.line-map__label:hover {
    color: var(--color-panel-text);
    text-decoration: underline;
}

.line-map__stop.is-done .line-map__label,
.line-map__stop.is-current .line-map__label {
    color: var(--color-panel-text);
}

.line-map__stop.is-current .line-map__label {
    font-weight: 600;
}

/* ---------- Admin band (top of every admin page: title plus sub-navigation on a neutral track) ---------- */

.admin-band {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    border-bottom: var(--rule-width) solid var(--color-text);
}

.admin-band__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}

.admin-band__subtitle {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
}

/* Tabs sit on the track; the active one lights up yellow like the set route */
.subnav {
    display: flex;
    gap: var(--space-1);
    margin-bottom: calc(-1 * var(--rule-width));
    overflow-x: auto;
    scrollbar-width: thin;
}

.subnav__link {
    flex: none;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--rule-width) solid transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.subnav__link:hover {
    color: var(--color-text);
    text-decoration: none;
}

.subnav__link.active {
    border-bottom-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}

/* ---------- Data table (admin lists; scrolls horizontally on small screens) ---------- */

.table-wrap {
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table th,
.data-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    border-bottom: var(--border-width) solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.data-table td {
    border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table__nowrap {
    white-space: nowrap;
}

.data-table__actions {
    text-align: right;
    white-space: nowrap;
}

.data-table__muted {
    color: var(--color-text-muted);
}

/* Free text such as details or messages: gets room instead of being squeezed by the other columns */
.data-table__text {
    min-width: 12rem;
}

/* Lamp and state text side by side, e.g. in a table cell */
.lamp-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.lamp-label > .pulse-dot {
    margin-left: var(--space-1);
}

/* ---------- Status tile (one system component with its lamp, e.g. on the admin overview) ---------- */

.status-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.status-tile > .pulse-dot {
    margin-left: var(--space-1);
}

.status-tile__title {
    font-weight: 600;
}

.status-tile__value {
    grid-column: 2;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.status-tile__hint {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ---------- Facts (label/value pairs, e.g. details of a lab or account) ---------- */

.facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
    margin: 0;
    font-size: var(--text-sm);
}

.facts dt {
    color: var(--color-text-muted);
}

.facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---------- Filters (a row of compact fields above a list) ---------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3) var(--space-4);
}

.filters .field {
    flex: 1 1 12rem;
    max-width: 18rem;
}

.filters .checkbox {
    min-height: 2.5rem;
}

/* ---------- Log view (container logs: dark, monospaced, newest line at the bottom) ---------- */

.log-view {
    display: flex;
    /* column-reverse keeps the view scrolled to the end without JavaScript */
    flex-direction: column-reverse;
    max-height: 28rem;
    overflow: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
}

.log-view pre {
    margin: 0;
    padding: var(--space-4);
    font-size: var(--text-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- One-time secret (e.g. a new password that is shown only once) ---------- */

.secret {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    user-select: all;
}

/* =====================================================================
   Learning experience: XP, daily goal, streak, levels, path, flashcards,
   badges, weekly chart, celebrations
   ===================================================================== */

/* ---------- Quiz question card (quiz and daily practice) ---------- */

.quiz-card {
    max-width: var(--prose-max);
    margin-top: var(--space-5);
}

.quiz-card__eyebrow {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.quiz-question {
    margin: 0;
    font-size: var(--text-xl);
}

.quiz-feedback {
    margin-bottom: var(--space-4);
}

.quiz-feedback .callout__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- XP gain and combo ---------- */

.xp-gain {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--color-accent-soft);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.combo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text);
}

.combo::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--lamp-yellow);
    box-shadow: 0 0 0 0.125rem var(--lamp-housing);
}

/* ---------- Daily goal ring ---------- */

.goal-ring {
    /* Track and center follow the surface; set --goal-track and --goal-bg on a dark parent (sidebar, panel) */
    --goal: 0;
    --goal-color: var(--lamp-yellow);

    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--goal-color) calc(var(--goal) * 1%), var(--goal-track, var(--color-surface-muted)) 0);
}

.goal-ring.is-reached {
    --goal-color: var(--lamp-green);
}

.goal-ring__value {
    display: grid;
    place-items: center;
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--goal-bg, var(--color-surface));
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.goal-ring--lg {
    width: 6rem;
}

.goal-ring--lg .goal-ring__value {
    font-size: var(--text-2xl);
}

.panel {
    --goal-track: var(--color-panel-tile);
    --goal-bg: var(--color-panel-bg);
}

/* ---------- Level meter: five lamps in the course color ---------- */

.level-meter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
}

.level-meter__lamps {
    display: inline-flex;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border-radius: var(--radius-pill);
    background-color: var(--lamp-housing);
}

.level-meter__lamp {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--lamp-off);
}

.level-meter__lamp.is-on {
    background-color: var(--course-color);
}

.level-meter__name {
    margin-left: var(--space-1);
    color: var(--color-text);
}

/* ---------- Week lamps: one lamp per day ---------- */

.week-lamps {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.week-lamps__day {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
}

.week-lamps__lamp {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--lamp-off);
    box-shadow: 0 0 0 0.1875rem var(--lamp-housing);
}

.week-lamps__lamp--reached {
    background-color: var(--lamp-green);
    box-shadow: 0 0 0 0.1875rem var(--lamp-housing), 0 0 0.5rem 0.1875rem color-mix(in srgb, var(--lamp-green) 40%, transparent);
}

.week-lamps__lamp--frozen {
    background-color: var(--lamp-white);
}

.week-lamps__lamp--open {
    background-color: var(--lamp-yellow);
}

.week-lamps__label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ---------- Learning path: modules as stations, their steps as lamps ---------- */

.path {
    --station-size: 2.25rem;

    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.path__module {
    position: relative;
    display: grid;
    grid-template-columns: var(--station-size) minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-6);
}

.path__module::before {
    content: "";
    position: absolute;
    top: var(--station-size);
    bottom: 0;
    left: calc(var(--station-size) / 2 - var(--rule-width) / 2);
    width: var(--rule-width);
    background-color: var(--color-border-subtle);
}

.path__module:last-child {
    padding-bottom: 0;
}

.path__module:last-child::before {
    display: none;
}

.path__module.is-done::before {
    background-color: var(--course-color);
}

.path__station {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--station-size);
    height: var(--station-size);
    border: var(--rule-width) solid var(--course-color);
    border-radius: 50%;
    background-color: var(--color-surface-raised);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
}

.path__module.is-done .path__station {
    background-color: var(--course-color);
    color: var(--course-on-color);
}

.path__module.is-current .path__station {
    box-shadow: 0 0 0 var(--rule-width) var(--color-bg), 0 0 0 calc(var(--rule-width) * 2 + 1px) var(--color-accent);
}

.path__body {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding-top: var(--space-1);
}

.path__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.path__title {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.2;
}

.path__title a {
    color: var(--color-text);
    text-decoration: none;
}

.path__title a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Steps: small stations on a short track, wrapping on narrow screens */
.path__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.path__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--text-sm);
}

.path__step a {
    color: var(--color-text);
    text-decoration: none;
}

.path__step a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.path__lamp {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--lamp-off);
    box-shadow: 0 0 0 0.125rem var(--lamp-housing);
}

.path__step.is-done .path__lamp {
    background-color: var(--lamp-green);
}

.path__step.is-done a {
    color: var(--color-text-muted);
}

/* The next step: the lamp flashes yellow, the chip is outlined */
.path__step.is-current {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
}

.path__step.is-current a {
    font-weight: 600;
}

.path__step.is-current .path__lamp {
    background-color: var(--lamp-yellow);
    animation: lamp-flash 1.2s steps(1, end) infinite;
}

.path__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ---------- Review round: flashcards and rating ---------- */

.review-meta,
.review-progress {
    max-width: var(--prose-max);
}

.review-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.flashcard {
    max-width: var(--prose-max);
    margin-top: var(--space-5);
}

/* .prose (loaded later) sets its own type; the double class wins */
.flashcard__front.prose {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
}

/* The front is set like a question; Markdown paragraphs inside take over its type */
.flashcard__front > p {
    font: inherit;
}

.flashcard__front > :last-child,
.flashcard__back > :last-child {
    margin-bottom: 0;
}

.flashcard__back {
    padding-top: var(--space-4);
    border-top: var(--rule-width) solid var(--course-color);
}

.flashcard__ask {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.rating-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

@media (min-width: 560px) {
    .rating-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.btn.rating {
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-2);
    line-height: 1.25;
}

.rating__hint {
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.85;
}

.review-result {
    max-width: var(--prose-max);
    margin-top: var(--space-5);
}

/* ---------- Weak spots ---------- */

.weak-spots {
    display: grid;
    gap: var(--space-2);
    max-width: var(--prose-max);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.weak-spots__item {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border-subtle);
    border-left: var(--rule-width) solid var(--color-problem);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.weak-spots__kind {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ---------- Badges: enamel plates ---------- */

.awards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.award {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-4);
    border: var(--border-width) dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}

.award__plate {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-muted);
}

.award__title {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}

.award__text {
    font-size: var(--text-sm);
}

.award__date {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
}

/* Earned: a lit plate on the dark signal-box panel */
.award.is-earned {
    border-style: solid;
    border-color: var(--color-border-subtle);
    background-color: var(--color-surface);
}

.award.is-earned .award__plate {
    background-color: var(--color-panel-bg);
    color: var(--color-accent);
}

/* ---------- XP chart (bars per day, goal as dashed line) ---------- */

.xp-chart {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

/* Bars area; the top padding leaves room for the value above the highest bar */
.xp-chart__bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    height: 8rem;
    padding-top: var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
}

.xp-chart__col {
    display: grid;
    align-items: end;
    justify-items: center;
    min-width: 0;
}

.xp-chart__bar {
    position: relative;
    width: min(100%, 1.75rem);
    height: calc(var(--xp) / var(--chart-max) * 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background-color: var(--color-primary);
}

.xp-chart__value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

.xp-chart__goal {
    position: absolute;
    right: 0;
    bottom: calc(var(--goal) / var(--chart-max) * (100% - var(--space-5)));
    left: 0;
    border-top: var(--border-width) dashed var(--color-text-muted);
    pointer-events: none;
}

.xp-chart__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.xp-chart__caption {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ---------- Celebration: message on a panel + confetti ---------- */

.toast {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: 50;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 26rem;
    margin-left: auto;
    padding: var(--space-4);
    border-left: var(--rule-width) solid var(--color-accent);
    border-radius: var(--radius-lg);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-overlay);
    color: var(--color-panel-text);
}

.toast > .pulse-dot {
    margin-top: 0.4rem;
}

.toast__body {
    display: grid;
    flex: 1;
    gap: var(--space-1);
}

.toast__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.toast__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.toast .xp-gain {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.toast__close {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-panel-muted);
    cursor: pointer;
}

.toast__close:hover {
    background-color: var(--color-panel-tile);
    color: var(--color-panel-text);
}

.confetti {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}

/* Paper strips fall and flip (scaleX), no rotation */
.confetti__piece {
    position: absolute;
    top: -2rem;
    left: var(--x);
    width: var(--size);
    height: calc(var(--size) * 1.6);
    border-radius: var(--border-width);
    opacity: 0;
    animation: confetti-fall var(--fall) var(--ease-out) var(--delay) both;
}

@keyframes confetti-fall {
    0% { opacity: 1; transform: translate(0, 0) scaleX(1); }
    25% { transform: translate(calc(var(--drift) * 0.3), 28vh) scaleX(-1); }
    50% { transform: translate(calc(var(--drift) * 0.6), 55vh) scaleX(1); }
    75% { opacity: 1; transform: translate(calc(var(--drift) * 0.85), 80vh) scaleX(-1); }
    100% { opacity: 0; transform: translate(var(--drift), 105vh) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .confetti {
        display: none;
    }
}

/* ---------- Quiz and exam: meta line, progress, result ---------- */

.quiz-meta,
.quiz-progress {
    max-width: var(--prose-max);
}

.quiz-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.quiz-result {
    max-width: var(--prose-max);
    margin-top: var(--space-5);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}

.quiz-result h2 {
    margin-bottom: var(--space-2);
}

.quiz-result__xp {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

/* ---------- Exam simulation ---------- */

.exam-timer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
}

.exam-timer.is-short {
    color: var(--color-problem);
    font-weight: 600;
}

.exam-intro,
.exam-section {
    max-width: var(--prose-max);
    margin-top: var(--space-6);
}

.exam-intro__list {
    margin: 0;
    padding-left: var(--space-5);
}

.topic-results {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.topic-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
}

.topic-result__value {
    font-variant-numeric: tabular-nums;
}

.topic-result__bar {
    grid-column: 1 / -1;
}

/* ---------- Glossary ---------- */

.glossary-letters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-4) 0 var(--space-6);
}

.glossary-letters a {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
}

.glossary-letters a:hover {
    border-color: var(--color-border);
}

.glossary-group {
    max-width: var(--prose-max);
}

.glossary-group + .glossary-group {
    margin-top: var(--space-6);
}

.glossary-group__letter {
    padding-bottom: var(--space-1);
    border-bottom: var(--rule-width) solid var(--course-color);
}

.glossary {
    display: grid;
    margin: 0;
}

.glossary__entry {
    padding: var(--space-4) 0;
    scroll-margin-top: var(--space-6);
}

.glossary__entry + .glossary__entry {
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.glossary__entry:target {
    background-color: var(--color-accent-soft);
}

.glossary__term {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}

.glossary__definition {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-1) 0 0;
}

.glossary__text > :first-child { margin-top: 0; }
.glossary__text > :last-child { margin-bottom: 0; }

.glossary__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

/* ---------- Search ---------- */

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: var(--prose-max);
    margin-top: var(--space-5);
}

.search-form .input {
    flex: 1 1 16rem;
}

.search-count {
    margin-top: var(--space-5);
}

.search-results {
    display: grid;
    max-width: var(--prose-max);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.search-hit {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) 0;
}

.search-hit + .search-hit {
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.search-hit__context {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.search-hit__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}

.search-hit__snippet {
    margin: 0;
    color: var(--color-text-muted);
}

.search-hit__snippet mark {
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background-color: var(--color-accent-soft);
    color: var(--color-text);
}