/*
 * Template-renderer stylesheet (P2B AC-3, issue #1965; P2C journey parity).
 *
 * Owns the styling for every template-renderer surface: course page,
 * orientation, walkthrough, practice landing, practice, end, feedback.
 * Linked ONCE from `layout.html` (the pinned convention).
 *
 * P2C: the template pages now sit in the LEGACY page shells (`.step >
 * .landing-card`, `.course-detail`, `.module-card`, `.self-quiz-*`,
 * `.self-ratings`, `.btn`) so a template course reads exactly like a
 * hand-built one; those legacy classes are REUSED from `style.css`, never
 * re-declared here. This file styles only the template-owned vocabulary,
 * and mirrors the legacy deck look (`didactic.css`) for the template's own
 * deck classes.
 *
 * Scope discipline (ADR-0034 / N2 tripwire): `layout.html` is shared, so
 * rules are namespaced under template-only classes. The shared didactic
 * deck classes (`.didactic-slide-deck*`) are scoped under
 * `.template-didactic` / `.template-orientation` so the legacy deck is
 * untouched.
 *
 * Generic-selector law (forest §10.5-2): class selectors only — never step
 * names, concept names, or counts. Every value routes through a
 * `style.css` design token (ADR-0071).
 */

/* ── Course page ────────────────────────────────────────────────────────── */

.template-course {
    /* The legacy .course-detail shell lays the page out; this hook scopes
       the template-only additions below. */
    position: relative;
}

.template-course__badge {
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* #2319: shown once after the author publishes. */
.template-course__published {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    background: var(--surface-raised);
    border-radius: 8px;
    font-size: var(--font-size-sm);
}

.template-course__goals {
    margin-block-end: var(--space-lg);
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

.template-course__goals-title {
    margin: 0 0 var(--space-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

.template-course__goals-list {
    margin: 0;
    padding-inline-start: var(--space-lg);
}

.template-course__fill {
    /* --progress is set from data-progress by template_runtime.js. */
    min-width: 0;
}

/* #2367: the end quizzes sit apart from the module cards above them. */
.template-course__end-quizzes {
    margin-block-start: var(--space-lg);
}

/* ── Walkthrough + orientation decks (legacy didactic.css look) ─────────── */

.template-orientation__title {
    margin-block-end: var(--space-md);
}

.template-orientation__error {
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-raised);
    border-inline-start: 3px solid var(--error);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--color-error-text);
}

.didactic-component,
.orientation-component,
.didactic-deck {
    display: contents;
}

:is(.template-orientation, .welcome) .didactic-slide-deck {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

:is(.template-orientation, .welcome) .didactic-slide-deck__progress {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

:is(.template-orientation, .welcome) .didactic-slide-deck__progress-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--border);
    transition: background var(--duration-fast) var(--easing-standard);
}

:is(.template-orientation, .welcome) .didactic-slide-deck__progress-dot[aria-current="step"] {
    background: var(--sage);
}

:is(.template-orientation, .welcome) .didactic-slide-deck__nav {
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    margin-block-start: var(--space-lg);
}

:is(.template-orientation, .welcome) .didactic-slide-deck__nav-button {
    flex: 1 1 8rem;
}

:is(.template-orientation, .welcome) .didactic-slide-deck__nav-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.didactic-slide {
    margin-block: var(--space-md);
    min-height: 6rem;
}

.didactic-slide:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
}

/* The slide the self-quiz feedback pointed at (legacy focus highlight). */
.didactic-slide[data-focus] {
    padding: var(--space-md);
    border-radius: var(--radius);
    box-shadow: 0 0 0 2px var(--sage);
    background: var(--color-white);
}

.didactic-slide__title {
    margin-block-end: var(--space-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.didactic-slide__body {
    margin: 0;
    line-height: var(--line-height-relaxed);
    color: var(--text);
}

/* ── Self-quiz fragment (#2112, Calm Clinical) ───────────────────────────
 * Walkthrough: kicker + 3-step indicator, the question as the heading, a
 * labelled answer box. Response: "You said" echo, strength / growth rows
 * with the feedback rows' marks, the slide pointer as a mint pill. */

.template-quiz {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.template-quiz__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-hairline);
}

.template-quiz__kicker {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.template-quiz__steps {
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-quiz__step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.template-quiz__step[aria-current="step"] {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-quiz__step-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 2px var(--border);
}

.template-quiz__step[aria-current="step"] .template-quiz__step-dot {
    background: var(--sage);
    box-shadow: none;
}

.template-quiz__step[data-state="done"] .template-quiz__step-dot {
    background: var(--sage);
    box-shadow: none;
}

.template-quiz__question,
.template-quiz__response,
.template-quiz__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.template-quiz__reassurance {
    margin: 0;
    line-height: var(--line-height-relaxed);
    color: var(--text-muted);
}

.template-quiz__heading {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--text);
}

.template-quiz__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.template-quiz__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-md) var(--space-lg);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text);
    resize: vertical;
}

.template-quiz__input:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--sage), var(--focus-ring);
}

.template-quiz__error {
    margin: 0;
    color: var(--color-error-text);
    font-size: var(--font-size-sm);
}

.template-quiz__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
}

/* The legacy .btn-primary is full-width; on wider screens these sit inline. */
.template-quiz .template-quiz__cta {
    width: auto;
    min-height: 3rem;
    padding-inline: var(--space-2xl);
}

/* "Continue to slides" carries the play glyph Home's continue uses. */
.template-quiz a.template-quiz__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.template-quiz a.template-quiz__cta::before {
    content: "";
    width: 0.6rem;
    height: 0.7rem;
    background: var(--color-chartreuse);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* #2225: Start could not open the session — the message and Try again. */
/* ADR-0291: the practice landing's "pick up where you left off" card. */
.template-resume {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-block: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius);
    background: var(--sage-light);
}

/* Out-specify the landing card's own p / form / .btn-primary spacing. */
.landing-card .template-resume__text,
.landing-card .template-resume form,
.landing-card .template-resume form .btn-primary {
    margin: 0;
}

.template-notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
}

.template-notice__message {
    margin: 0;
    color: var(--color-error-text);
}

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

/* The /welcome quick quiz's reply (#2198): echo + strength / growth. */
.template-quiz__echo {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--surface-ground);
    box-shadow: var(--shadow-ring);
}

.template-quiz__echo-label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.template-quiz__echo-text {
    margin: 0;
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
    overflow-wrap: anywhere;
}

.template-quiz__items {
    display: flex;
    flex-direction: column;
}

.template-quiz__item {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
}

.template-quiz__item + .template-quiz__item {
    border-top: 1px solid var(--color-hairline);
}

.template-quiz__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    font-weight: var(--font-weight-semibold);
}

.template-quiz__mark[data-kind="strength"] {
    background: var(--sage);
    color: var(--color-white);
}

.template-quiz__mark[data-kind="growth"] {
    border: 2px dashed var(--sage);
}

.template-quiz__item-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.template-quiz__item-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-quiz__item-text {
    margin: 0;
    line-height: var(--line-height-relaxed);
    color: var(--text-subtle);
}

/* "You said" beside the slide it conflicts with. */

@media (max-width: 39.99em) {
    .template-quiz__step-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .template-quiz__steps {
        gap: var(--space-sm);
    }

    .template-quiz .template-quiz__cta {
        width: 100%;
    }

    .template-quiz__actions form {
        width: 100%;
    }
}

/* ── Orientation steps ──────────────────────────────────────────────────── */

.orientation-slide,
.orientation-picker,
.orientation-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.orientation-slide[hidden],
.orientation-picker[hidden],
.orientation-demo[hidden] {
    display: none;
}

/* Tri welcomes on onboarding's first step, centred like the legacy
   onboarding deck (#2080, #2198; didactic.css is not loaded here). */
.welcome .mascot {
    margin-inline: auto;
}

.orientation-picker__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-sm);
}

.orientation-picker__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0; /* the global `label` rule adds a top margin to all but the first */
    padding: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.orientation-picker__card:has(input:checked) {
    border-color: var(--sage);
    box-shadow: 0 0 0 2px var(--sage);
}

.orientation-picker__card input {
    align-self: flex-start;
}

.orientation-picker__name {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.orientation-picker__summary {
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

.orientation-demo__conversation {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.orientation-demo__status {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
}

.orientation-demo__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.orientation-demo__controls > .btn {
    flex: 1 1 10rem;
    width: auto;
}

/* `.btn` sets display, which beats the UA [hidden] rule. */
.orientation-demo__controls > [hidden] {
    display: none;
}

.orientation-demo__audio {
    display: none;
}

/* ── Practice landing ───────────────────────────────────────────────────── */

/* P4-W7 (#2102): collapsed sections (feedback-row style), then Start. */
.template-practice-landing h2 {
    margin-block-end: var(--space-xs);
}

.template-practice-landing .mic-remember-hint {
    margin-block-start: var(--space-md);
}

.template-landing__sections {
    margin-block: var(--space-md);
    border-block: 1px solid var(--border);
}

.template-landing__section .template-row__summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.template-landing__section[open] .template-row__summary::after {
    transform: rotate(45deg);
}

/* Scoped so it outranks the later `.template-row__body` indent: landing
 * sections have no row marks to line up with. */
.template-landing__section .template-landing__body {
    padding-inline-start: 0;
    gap: var(--space-lg);
}

/* #2117: the focus section's skills, one open at a time. Summary =
 * "Name · short label"; body = a check-marked good example and a
 * ring-marked not-quite example. */

.template-landing__skills {
    gap: var(--space-xs);
}

.template-landing__skill {
    border-radius: var(--radius-lg);
    transition: background var(--duration-base) var(--easing-standard);
}

.template-landing__skill[open] {
    background: var(--surface-ground);
}

.template-landing__skill-summary {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 3rem;
    padding-inline: var(--space-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    list-style: none;
}

.template-landing__skill-summary::-webkit-details-marker {
    display: none;
}

.template-landing__skill-summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.template-landing__skill-summary::after {
    content: "";
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform var(--duration-base) var(--easing-standard);
}

.template-landing__skill[open] .template-landing__skill-summary::after {
    transform: rotate(45deg);
}

.template-landing__skill-line {
    min-width: 0;
}

.template-landing__skill-name {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-landing__pair {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: var(--space-xs) var(--space-md) var(--space-md);
    list-style: none;
}

.template-landing__example {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--text);
}

.template-landing__example[data-kind="fail"] {
    color: var(--text-muted);
}

.template-landing__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-mint);
    color: var(--sage);
}

.template-landing__example[data-kind="fail"] .template-landing__mark {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--border);
    color: var(--text-muted);
}

.template-landing__examples {
    margin: 0;
    padding-inline-start: 1.25em;
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
}

.template-landing__case {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.template-landing__case-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

.template-landing__chip {
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--border);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.template-landing__chip[data-status="met"] {
    background: var(--sage-light);
    color: var(--sage);
}

.template-landing__field {
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

.template-practice-landing__patient {
    margin-block: var(--space-md);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

.template-practice-landing__back {
    display: block;
    margin-block-start: var(--space-md);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* P4-W8 (#2111): the practice session is a centred focus column; on
 * desktop the conversation reads larger and the Speak pill is capped and
 * centred under it. Namespaced so the legacy practice page is untouched. */
@media (min-width: 64em) {
    .template-practice {
        padding-block-start: var(--space-lg);
    }

    .template-practice #conversation {
        max-height: 60vh;
    }

    .template-practice .message {
        max-width: 82%;
        padding: var(--space-lg) var(--space-xl);
        font-size: var(--font-size-lg);
    }

    .template-practice .status-text {
        text-align: center;
    }

    .template-practice .session-chrome__mic {
        width: 100%;
        max-width: 30rem;
        margin-inline: auto;
    }

    /* #2215: a typed reply gets the conversation's width, not Speak's. */
    .template-practice .session-chrome__mic:has(.type-composer) {
        max-width: none;
    }
}

/* P4-W8 (#2110): on desktop the card widens, centres in the panel and
 * steps the type up; phones keep the P4-W7 card (Start above the fold). */
.template-practice-landing.template-column {
    max-width: 47.5rem;
}

@media (min-width: 64em) {
    .template-practice-landing {
        padding-block-start: var(--space-xl);
    }

    .template-practice-landing .landing-card {
        padding: 2.5rem 2.75rem;
    }

    .template-practice-landing .landing-card h2 {
        font-size: var(--font-size-2xl);
    }

    .template-practice-landing .landing-card > p {
        font-size: var(--font-size-lg);
        line-height: var(--line-height-relaxed);
    }

    .template-practice-landing .template-landing__section .template-row__title {
        font-size: var(--font-size-lg);
    }
}

.focus-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-block: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface);
    border-inline-start: 3px solid var(--sage);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.focus-card__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.focus-card__growth-moment,
.focus-card__lowest-criterion {
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

/* ── Practice session ───────────────────────────────────────────────────── */

.template-practice {
    display: flex;
    flex-direction: column;
}

/* ── End surface ────────────────────────────────────────────────────────── */

.template-end form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.template-end__recap {
    margin-block-end: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius);
}

.template-end__recap-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-base);
}

.template-end__recap-section + .template-end__recap-section {
    margin-block-start: var(--space-sm);
}

.template-end__recap-label {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-end__recap-fields {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-sm);
}

.template-end__recap-fields dt {
    color: var(--text-muted);
}

.template-end__recap-fields dd {
    margin: 0 0 var(--space-xs);
    color: var(--text);
}

/* #2387: name above its criterion in ONE text column, Yes/No beside it.
 * As three flex siblings the name was squeezed to one word per line. */
.self-rating-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.self-rating-text .self-rating-label {
    font-weight: var(--font-weight-semibold);
}

.self-rating-text + .self-rating-option {
    margin-left: var(--space-sm);
}

.template-end__criterion {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}

/* The capture fieldset is template-only vocabulary: grep confirms ZERO
 * legacy rules for `.capture-form`/`.capture-field` (the legacy capture
 * surface lives under `.guided-writing__capture`, style.css:3650). Scoped
 * under `.template-end` so the shared vocabulary never leaks. */
.template-end .capture-form {
    border: none;
    padding: 0;
    margin: 0;
}

.template-end .capture-form legend {
    padding: 0;
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-semibold);
}

.template-end .capture-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    margin: 0;
}

.template-end .capture-field-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.template-end .capture-field input[type="text"],
.template-end .capture-field textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--font-size-base);
}

/* ── Not-graded completion surface ──────────────────────────────────────── */

.template-feedback .landing-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ── Feedback page (#1994) ──────────────────────────────────────────────── */

.template-feedback {
    gap: var(--space-xl);
}

.template-feedback__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.template-feedback__kicker {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* #2215: a typed session is tagged; it counts the same as a spoken one. */
.template-feedback__mode-tag {
    display: inline-block;
    margin-inline-start: var(--space-xs);
    padding: 0.05em 0.6em;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    white-space: nowrap;
}

.template-feedback__grade {
    margin: 0;
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    color: var(--text);
}

.template-feedback__grade[data-grade="proficient"],
.template-feedback__grade[data-grade="exemplary"] {
    color: var(--sage);
}

.template-feedback__note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-feedback__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
}

.template-feedback__label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.template-feedback__text {
    margin: 0;
    line-height: var(--line-height-relaxed);
}

.template-feedback__lead {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text);
}

/* #2098: how to respond — never a line to say. */
.template-approach {
    display: grid;
    gap: var(--space-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text);
}

.template-approach p,
.template-approach ul {
    margin: 0;
}

.template-approach ul {
    padding-left: 1.25em;
}

.template-approach__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--sage);
}

.template-approach__why,
.template-approach__include {
    color: var(--text);
}

.template-approach__avoid {
    color: var(--text-muted);
}

.template-feedback__rows {
    gap: 0;
    padding: var(--space-sm) var(--space-lg);
}

/* What went well leads every session (#2109). */
.template-feedback__went-well {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Practice again + Back to course end the content, outside the bar. */
.template-feedback__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
}

.template-feedback__links a {
    color: var(--sage);
}

.template-feedback__course-link {
    margin-inline-start: auto;
}

.template-feedback__links .template-feedback__course-link {
    color: var(--text-muted);
}

/* Compact criterion rows: one <details> per skill, one open at a time. */

.template-row + .template-row {
    border-top: 1px solid var(--border);
}

.template-row__summary {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 3.25rem;
    padding-block: var(--space-sm);
    cursor: pointer;
    list-style: none;
}

.template-row__summary::-webkit-details-marker {
    display: none;
}

.template-row__summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.template-row__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 2px solid var(--border);
    box-sizing: border-box;
    font-weight: var(--font-weight-semibold);
}

.template-row__mark[data-status="done"] {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--color-white);
}

.template-row__mark[data-status="next"] {
    border-style: dashed;
    border-color: var(--sage);
}

.template-row__names {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.template-row__title {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-row__underrated,
.template-row__landed {
    align-self: flex-start;
    margin-block-start: var(--space-xs);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--sage-light);
    color: var(--sage);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.template-row__status {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.template-row__status[data-status="done"],
.template-row__status[data-status="next"] {
    font-weight: var(--font-weight-semibold);
    color: var(--sage);
}

.template-row__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 0 var(--space-md) calc(1.75rem + var(--space-md));
}

.criterion-block {
    min-width: 0;
}

.template-row__criterion {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

/* #2194: "(turn 3, turn 4)." wraps as one unit — "(" never sits alone. */
.template-cites {
    white-space: nowrap;
}

/* #2190: a turn link inside a skill paragraph. */
.template-turn-link {
    padding: 0 0.1em;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9em;
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    cursor: pointer;
}

.template-turn-link[aria-expanded="true"] {
    color: var(--text);
    text-decoration-thickness: 2px;
}

.template-turn-link:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
    border-radius: 3px;
}

.template-row__turns:not(:has(> :not([hidden]))) {
    display: none;
}

/* #2188: the skill's one sentence leads the row body. */
.template-row__note {
    margin: 0;
    color: var(--text);
    line-height: var(--line-height-relaxed);
}

.template-row__aside {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-row__marker {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
}

.template-row__marker-mark {
    font-weight: var(--font-weight-semibold);
    color: var(--sage);
}

/* Quoted exchange: patient turns on mint, the clinician's on ink. */

.template-exchange {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-exchange__turn {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--surface);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text);
}

.template-exchange__turn[data-role="clinician"] {
    background: var(--text);
    color: var(--color-white);
}

.template-exchange__who {
    font-weight: var(--font-weight-semibold);
}

.template-exchange__text {
    overflow-wrap: anywhere;
}

/* Thumbs up/down. */

.template-reaction {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-reaction__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.template-reaction__prompt,
.template-reaction__thanks {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-reaction__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text-muted);
    cursor: pointer;
}

.template-reaction__button[aria-pressed="true"] {
    border-color: var(--sage);
    background: var(--sage-light);
    color: var(--sage);
}

.template-reaction__button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.template-reaction__note {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-reaction__note-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.template-reaction__note-input,
.template-try__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
    resize: vertical;
}

.template-reaction__note-send {
    align-self: flex-start;
}

.template-reaction__noted {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Try it now — its own page (#2108, ADR-0264). The body is the htmx swap
 * unit; the composer rides in the pinned action bar at the bottom. */

.template-try {
    gap: var(--space-xl);
}

.template-try__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-hairline);
}

.template-try__back {
    align-self: flex-start;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--sage);
    text-decoration: none;
}

.template-try__skill {
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text);
}

.template-try__setup,
.template-try__where {
    margin: 0;
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}

.template-try__where {
    font-size: var(--font-size-sm);
}

.template-try__move {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--surface-ground);
    box-shadow: var(--shadow-ring);
}

.template-try__move-label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.template-try__move-text {
    margin: 0;
    line-height: var(--line-height-relaxed);
}

.template-try__moment,
.template-try__attempt {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-try__checking {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-try__result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-try__result[data-result="closer"] {
    color: var(--sage);
}

.template-try__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--border);
    box-sizing: border-box;
    font-size: var(--font-size-xs);
}

.template-try__mark[data-result="closer"] {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--color-white);
}

.template-try__guidance {
    margin: 0;
    padding-inline-start: calc(1.5rem + var(--space-sm));
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

.template-try__done {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-try__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-try__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.template-try__field-head {
    display: flex;
    justify-content: space-between;
}

.template-try__left {
    font-weight: var(--font-weight-medium);
}

.template-try__input {
    font-size: var(--font-size-base);
    resize: none;
}

.template-try__error {
    margin: 0;
    color: var(--color-error-text);
    font-size: var(--font-size-sm);
}

.template-try__sending {
    display: none;
}

.template-try__form.htmx-request .template-try__sending {
    display: inline;
}

/* The legacy .btn-primary is full-width; these actions sit inline. */
.template-try__send {
    width: auto;
    min-height: 3rem;
}

/* ── Centred column + pinned action bar + Next (ADR-0264) ─────────────────
 * Runtime pages centre one ~720px column in the panel (reversing #2085's
 * flush-left rule for these pages only). A page's primary choice sits in a
 * bar pinned to the viewport bottom; on phones the tab bar steps aside. */

main.container:has(.template-column) {
    max-width: none;
}

.app-frame:has(.template-column) > .app-footer {
    text-align: center;
}

.template-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 45rem;
    margin-inline: auto;
}

.template-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-top: auto;
    padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom));
    background: var(--surface-raised);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -1px 0 var(--color-hairline), 0 -10px 28px -16px rgba(2, 39, 39, 0.2);
}

.template-actionbar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-actionbar__row {
    display: flex;
    /* #2324: a long hint wraps above the buttons instead of squeezing them. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
}

.template-actionbar__hint {
    flex: 1 1 100%; /* #2324: its own row, so the two buttons sit together */
    min-width: 0;
    margin-inline-end: auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal, 1.4);
    color: var(--text-muted);
}

.template-actionbar__row--solo .template-next {
    flex: 1;
}

.template-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    min-height: 3rem;
    padding: 0 var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--text);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: box-shadow var(--duration-base) var(--easing-standard);
}

.template-next:hover {
    box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-hover);
}

.template-next:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.template-next__lead::after {
    content: ":";
}

.template-next__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-next__title::after {
    content: " \2192";
}

@media (max-width: 39.99em) {
    body.has-app-nav:has(.template-actionbar) {
        padding-bottom: 0;
    }

    body:has(.template-actionbar) .app-nav {
        display: none;
    }

    .template-actionbar {
        margin-inline: calc(-1 * var(--space-lg));
        border-radius: 0;
    }

    .template-actionbar__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .template-actionbar__hint {
        grid-column: 1 / -1;
    }

    .template-actionbar__row--solo {
        grid-template-columns: 1fr;
    }

    .template-try__send {
        width: 100%;
    }

    .template-next {
        flex-direction: column;
        gap: 0;
        padding: var(--space-xs) var(--space-md);
        line-height: 1.2;
    }

    .template-next__lead::after {
        content: " module \2192";
    }

    .template-next__title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        color: var(--text-muted);
    }

    .template-next__title::after {
        content: none;
    }
}

/* Feedback page → Try it now: the bar's primary action (#2109). */
.template-feedback__try {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 3rem;
    padding: 0 var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    box-shadow: var(--shadow-button);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.template-feedback__try::before {
    content: "";
    width: 0.6rem;
    height: 0.7rem;
    background: var(--color-chartreuse);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.template-feedback__try:hover {
    background: var(--color-ink-hover);
}

.template-feedback__try:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (min-width: 64em) {
    /* Build on it: why + includes side by side when there's room. */
    .template-feedback .template-approach {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg) var(--space-xl);
    }

    .template-feedback .template-approach__avoid {
        grid-column: 1 / -1;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 39.99em) {
    .template-feedback__card {
        padding: var(--space-lg);
    }

    .template-row__body {
        padding-inline-start: 0;
    }

    .template-feedback__course-link {
        margin-inline-start: 0;
    }

    .orientation-picker__cards {
        grid-template-columns: 1fr;
    }
}

/* Study enrollment: the once-only list of freshly generated participant
   codes (admin/enrollment.html). */
.new-codes-table {
    border-collapse: collapse;
    margin: var(--space-sm) 0 var(--space-md);
}
.new-codes-table th,
.new-codes-table td {
    text-align: left;
    padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

/* ── Wait page: skill rows (#2116) ─────────────────────────────────────────
 * Kicker chip, display heading, one line, then a raised panel holding a
 * segmented progress bar and one row per skill + coaching. Marks follow the
 * feedback rows: done = filled check, active = turning ring, pending =
 * hollow ring (dashed for coaching). */

.template-feedback-pending {
    gap: var(--space-xl);
    padding-block: var(--space-xl);
}

.template-wait__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.template-wait__kicker {
    margin: 0;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--color-mint);
    color: var(--sage);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.template-wait__heading {
    margin: 0;
}

.template-wait__lede {
    margin: 0;
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}

.template-wait {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--surface-raised);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-raised);
}

.template-wait__progress {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.template-wait__segments {
    flex-grow: 1;
    display: flex;
    gap: var(--space-xs);
}

.template-wait__segment {
    flex: 1 1 0;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-hairline);
    transition: background var(--duration-slow) var(--easing-standard);
}

.template-wait__segment[data-state="done"] {
    background: var(--sage);
}

.template-wait__count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.template-wait__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-wait__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 3.5rem;
    padding-block: var(--space-sm);
}

.template-wait__row + .template-wait__row {
    border-top: 1px solid var(--color-hairline);
}

.template-wait__mark {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-hairline);
    color: var(--color-white);
}

.template-wait__row[data-state="done"] .template-wait__mark {
    background: var(--sage);
    border-color: var(--sage);
}

.template-wait__row[data-state="active"] .template-wait__mark {
    border-color: var(--color-mint);
}

.template-wait__row[data-state="active"] .template-wait__mark::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid transparent;
    border-top-color: var(--sage);
}

.template-wait__row[data-stage="coaching"][data-state="pending"] .template-wait__mark {
    border-style: dashed;
    border-color: var(--border);
}

@media (prefers-reduced-motion: no-preference) {
    .template-wait__row[data-state="active"] .template-wait__mark::after {
        animation: template-wait-turn 1.1s linear infinite;
    }
}

@keyframes template-wait-turn {
    to {
        transform: rotate(360deg);
    }
}

.template-wait__names {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.template-wait__title {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

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

.template-wait__row[data-state="pending"] .template-wait__title {
    color: var(--text-muted);
}

.template-wait__row[data-state="pending"] .template-wait__detail {
    color: var(--text-decorative);
}

.template-wait__status {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-wait__row[data-state="active"] .template-wait__status {
    font-weight: var(--font-weight-medium);
    color: var(--sage);
}

.template-wait__overflow {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ── Walkthrough deck as an outline (#2118, ADR-0266) ──────────────────────
 * Every slide title in one white card. The deck JS hides all but the active
 * <article> and marks the active <li> aria-current; here a hidden article
 * still shows its title (only its body hides), rows before the current one
 * read as done (green check), rows after it as upcoming (hollow ring), and
 * the current row is a mint panel with its body. Back / Next live in the
 * pinned action bar (ADR-0264). */

.template-didactic {
    gap: var(--space-xl);
    padding-top: var(--space-xl);
}

.template-didactic .didactic-slide-deck {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* #2221 (J2): the self-quiz feedback on the deck — one slim "From your
   answer" line of chips, the quoted slide sentence as a toggle, and a small
   dark "You said" tip under it. The toggle's class (quiz-quote-mark) sits
   outside the template namespace: deck_feedback.marked_body renders it, not
   a template. */
/* #2231: Skip to practice, a quiet link-button under the walkthrough. */
.template-walkthrough-skip {
    display: flex;
    justify-content: center;
    margin: 0;
}

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

.template-deck-feedback__label {
    margin-right: var(--space-xs);
}

.template-deck-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.75rem;
    padding: 0 0.65rem;
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.template-deck-chip[data-kind="strength"] {
    background: var(--color-mint);
    color: var(--sage);
}

.template-deck-chip[data-kind="check"] {
    background: var(--color-amber-tint);
    color: var(--color-amber-text);
}

.template-deck-chip__ring {
    width: 0.65rem;
    height: 0.65rem;
    box-sizing: border-box;
    border: 2px dashed var(--color-amber);
    border-radius: 50%;
}

.quiz-quote-mark {
    color: inherit;
    cursor: pointer;
    border-radius: 2px;
}

.quiz-quote-mark[data-kind="strength"] {
    background: var(--color-white);
    box-shadow: inset 0 -2px 0 var(--sage);
}

.quiz-quote-mark[data-kind="check"] {
    background: var(--color-amber-tint);
    box-shadow: inset 0 -2px 0 var(--color-amber);
}

.didactic-quote-tip {
    position: relative;
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) 2.75rem var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.didactic-quote-tip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: var(--space-xl);
    width: 10px;
    height: 10px;
    background: var(--color-ink);
    transform: rotate(45deg);
}

.didactic-quote-tip__close {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-white);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.didactic-quote-tip__close:hover {
    background: var(--color-ink-hover);
}

.didactic-quote-tip__label {
    font-weight: var(--font-weight-semibold);
}

.didactic-quote-tip[data-kind="strength"] .didactic-quote-tip__label {
    color: var(--color-chartreuse);
}

.didactic-quote-tip[data-kind="check"] .didactic-quote-tip__label {
    color: var(--color-amber-tint);
}

/* "Yes: …" / "But: …" — one supervisor's line under what they said. */
.didactic-quote-tip__line {
    display: block;
    margin-top: var(--space-xs);
    color: var(--color-mint);
}

.didactic-quote-tip__verdict {
    color: var(--color-white);
}

.template-didactic__outline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-sm);
    list-style: none;
    background: var(--surface-raised);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-raised);
}

.template-didactic__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    transition: background var(--duration-slow) var(--easing-standard);
}

.template-didactic__row[aria-current="step"] {
    padding-block: var(--space-lg) var(--space-xl);
    background: var(--color-mint);
}

.template-didactic__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    border: 2px solid var(--border);
    color: var(--color-white);
}

.template-didactic__check {
    display: none;
}

/* #2243: a check means the clinician has seen the slide (template_deck_feedback.js
   marks rows data-visited), not that it comes before the current one. */
.template-didactic__row[data-visited]:not([aria-current="step"]) .template-didactic__mark {
    background: var(--sage);
    border-color: var(--sage);
}

.template-didactic__row[data-visited]:not([aria-current="step"]) .template-didactic__check {
    display: block;
}

.template-didactic__row[aria-current="step"] .template-didactic__mark {
    border-color: var(--sage);
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 0.3rem var(--surface-raised), inset 0 0 0 1rem var(--sage);
}

.template-didactic .didactic-slide,
.template-didactic .didactic-slide[hidden] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.template-didactic .didactic-slide[hidden] .didactic-slide__body {
    display: none;
}

.template-didactic .didactic-slide__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    color: var(--text-muted);
}

.template-didactic__row[aria-current="step"] ~ .template-didactic__row .didactic-slide__title {
    color: var(--text-decorative);
}

.template-didactic__row[aria-current="step"] .didactic-slide__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.template-didactic .didactic-slide__body {
    font-size: var(--font-size-base);
    color: var(--text-subtle);
}

.template-didactic .didactic-slide[data-focus] {
    padding: 0;
    background: none;
    box-shadow: none;
}

.template-didactic .didactic-slide:focus-visible {
    border-radius: var(--radius-sm);
}

.template-didactic .didactic-slide-deck__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
}

/* The deck's kicker is its page h1: keep the kicker's face, not the
 * display face every clinician h1 gets. */
.template-quiz__head h1.template-quiz__kicker {
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-base);
}

.template-didactic__counter {
    flex: 1 1 auto;
    margin: 0;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.template-didactic__back {
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--text);
    font-weight: var(--font-weight-medium);
}

.template-didactic__back:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.template-didactic__next {
    width: auto;
    min-width: 9rem;
}

@media (max-width: 39.99em) {
    .template-didactic__counter {
        display: none;
    }

    .template-didactic__back {
        flex: 1 1 0;
    }

    .template-didactic__next {
        flex: 2 1 0;
    }
}

@media (min-width: 64em) {
    .template-didactic__row {
        padding-inline: var(--space-lg);
    }

    .template-didactic__row[aria-current="step"] .didactic-slide__title {
        font-size: var(--font-size-xl);
    }

    .template-didactic__row[aria-current="step"] .didactic-slide__body {
        font-size: var(--font-size-lg);
    }
}

/* ── App onboarding, /welcome (#2198, ADR-0282) ─────────────────────────── */

.welcome__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.welcome .didactic-slide-deck__progress {
    justify-content: flex-start;
}

.welcome__skip {
    margin: 0;
}

.welcome__step:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.welcome__step--hello {
    align-items: center;
    text-align: center;
}

.welcome__kicker {
    margin: 0;
    color: var(--color-green);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.welcome__title {
    margin: 0;
    text-wrap: balance;
}

.welcome__lead {
    margin: 0;
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

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

.welcome__course {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-2xl);
    background: var(--color-white);
}

.welcome__course-name {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.welcome__module {
    margin: 0;
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-mint);
}

.welcome__module span {
    min-width: 6rem;
    color: var(--color-green);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.welcome__module--next {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--text-muted);
}

.welcome__loop {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: welcome-loop;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.welcome__loop li {
    counter-increment: welcome-loop;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

.welcome__loop li::before {
    content: counter(welcome-loop);
    grid-row: span 2;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-ink);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.welcome__loop li:first-child {
    background: var(--color-mint);
    border-color: transparent;
}

.welcome__loop li:first-child::before {
    background: var(--color-green);
}

.welcome__loop strong {
    color: var(--text);
}

/* #2361: the practice primer — the same cards, unnumbered, none highlighted. */
.welcome__loop--plain li {
    grid-template-columns: minmax(0, 1fr);
}

.welcome__loop--plain li::before {
    content: none;
}

.welcome__loop--plain li:first-child {
    background: var(--color-white);
    border-color: var(--color-hairline);
}

/* ── Clinical-admin welcome, /admin/welcome (#2200, ADR-0283) ───────────── */

.admin-welcome .landing-card {
    max-width: 52rem;
}

.admin-welcome__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-md);
}

.admin-welcome__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border-radius: var(--radius-2xl);
    background: var(--color-mint);
    color: var(--text-subtle);
    line-height: var(--line-height-relaxed);
}

.admin-welcome__card strong {
    color: var(--text);
}

.admin-welcome__card--plain {
    background: var(--color-white);
    border: 1px solid var(--color-hairline);
}

.admin-tryit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-xl);
}

.admin-tryit__rules {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.admin-tryit__rule {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.admin-tryit__rule legend {
    padding: 0;
    font-weight: var(--font-weight-medium);
}

.admin-tryit__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.admin-tryit__option {
    min-height: 44px;
    padding: 0 var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-ink);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.admin-tryit__option[aria-pressed="true"] {
    border-color: var(--color-green);
    background: var(--color-green);
    color: var(--color-white);
}

.admin-tryit__example {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-2xl);
    background: var(--color-ground);
    min-width: 0;
}

.admin-tryit__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.admin-tryit__verdict {
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--color-hairline);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.admin-tryit__verdict.is-met {
    background: var(--color-green);
    color: var(--color-white);
}

.admin-tryit__modules {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.admin-tryit__module {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 4rem;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--color-white);
    font-size: var(--font-size-sm);
}

.admin-tryit__module.is-met {
    background: var(--color-mint);
}

.admin-tryit__name {
    font-weight: var(--font-weight-medium);
}

.admin-tryit__sessions {
    color: var(--text-subtle);
}

.admin-tryit__mark {
    text-align: right;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.admin-tryit__module.is-met .admin-tryit__mark {
    color: var(--color-green);
}

/* #2215: once Type is chosen, the landing's microphone help no longer
 * applies; it returns if the clinician switches back to Speak. */
.template-practice-landing:has(input[name="input_mode"][value="text"]:checked)
    :is(.mic-remember-hint, .mic-troubleshooting) {
    display: none;
}

/* #2347 (ADR-0314): MI Session counts — informational, never the grade. */
.template-counts {
    gap: var(--space-sm);
}

.template-counts__note,
.template-counts__reference {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.template-counts__measure {
    border-top: 1px solid var(--color-hairline);
    padding-top: var(--space-sm);
}

.template-counts__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    cursor: pointer;
}

.template-counts__name {
    flex: 1 1 auto;
}

.template-counts__value {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.template-counts__band {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.template-counts__band[data-band="good"] {
    color: var(--sage);
}

.template-counts__turns {
    display: grid;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
}

.template-counts__turn {
    display: grid;
    gap: 2px;
}

.template-counts__turn-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.template-counts__turn-text {
    line-height: var(--line-height-relaxed);
}

/* #2348 (ADR-0313): the sensitive-content course's 988 line, content note
 * and in-session check-in card. */
.template-safety-footer {
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.template-content-note .landing-card {
    max-width: 40rem;
}

.template-content-note__eyebrow {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.template-content-note__help {
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    background: var(--surface-raised);
    border-radius: 8px;
}

.template-check-in {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    background: var(--surface-raised);
    border-radius: 8px;
}

/* The 988 links read as the runtime's inline links (.template-turn-link). */
.template-safety-footer a,
.template-content-note__help a,
.template-check-in a,
.template-course__published a {
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.template-check-in[hidden] {
    display: none;
}

.template-check-in__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Pause and Keep going share the row equally (stacking on a narrow card). */
.template-check-in__actions > * {
    flex: 1 1 12rem;
}

.template-check-in__actions .btn {
    width: 100%;
}