/* ---------- Lesson layout ---------- */

.lesson-breadcrumbs {
    padding-left: 0;
    padding-right: 0;
}

.lesson-content {
    line-height: 1.6;
}

/* Plain HTML in lesson pages (p, h2, h3, lists) */
.lesson-content p {
    margin: 0 0 12px;
}

.lesson-content h2 {
    margin: 32px 0 8px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.lesson-content h3 {
    margin: 24px 0 6px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

.lesson-content ol,
.lesson-content ul {
    margin: 0 0 12px;
    padding-left: 24px;
}

.lesson-content li {
    margin: 6px 0;
}

.lesson-cta {
    margin-top: 8px;
}

.lesson-locked {
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
}

.lesson-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.lesson-footer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* ---------- Callout ---------- */

.lesson-callout-title {
    font-weight: 600;
    margin-bottom: 4px;
}

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

/* ---------- Big letter ---------- */

.lesson-big-letter {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px 0;
}

.lesson-big-letter-text {
    font-size: clamp(4rem, 12vw, 7.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--lp-text-strong);
}

.lesson-big-letter-caption {
    margin-top: 8px;
    color: var(--lp-text-soft);
    font-size: 1.25rem;
}

/* ---------- Column formula ---------- */

.lesson-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.lesson-formula-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
    padding: 8px 16px;
    border-left: 2px solid var(--lp-border-mid);
    border-right: 2px solid var(--lp-border-mid);
    border-radius: 4px;
}

.lesson-formula-column-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--lp-text-main2);
}

.lesson-formula-column-value {
    line-height: 1.6;
}

.lesson-formula-column-highlight {
    border-color: var(--mud-palette-primary);
    font-weight: 600;
}

.lesson-formula-operator {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--lp-text-muted);
}

/* ---------- Coming soon ---------- */

.lesson-coming-soon {
    border: 2px dashed var(--lp-border-soft);
    border-radius: 8px;
}

/* ---------- Media ---------- */

.lesson-figure {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lesson-image,
.lesson-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.lesson-audio {
    width: 100%;
}

.lesson-figure figcaption {
    margin-top: 8px;
    font-size: 0.875rem;
    text-align: center;
    color: var(--lp-text-muted);
}

.lesson-media-placeholder {
    width: 100%;
    padding: 24px 16px;
    border: 2px dashed var(--lp-border-soft);
    border-radius: 8px;
}

.lesson-media-location {
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--lp-text-muted);
}

/* ---------- Styles ---------- */

.lesson-figure.style-image {
    display: inline-flex;
    margin: 8px;
    vertical-align: top;
}

.lesson-real-vs-enuncy {
    margin: 16px 0;
}

.lesson-real-vs-enuncy-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    justify-items: center;
}

.lesson-real-vs-enuncy-row .lesson-figure {
    width: 100%;
    margin: 0;
}

/* Same height for photo and model image; the width follows the aspect ratio (capped by the column). */
.lesson-real-vs-enuncy-row .lesson-image {
    width: auto;
    max-width: 100%;
    height: var(--real-vs-enuncy-height, 200px);
    object-fit: contain;
}

.lesson-real-vs-enuncy-small {
    --real-vs-enuncy-height: 140px;
}

.lesson-real-vs-enuncy-medium {
    --real-vs-enuncy-height: 200px;
}

.lesson-real-vs-enuncy-large {
    --real-vs-enuncy-height: 280px;
}

@media (max-width: 600px) {
    .lesson-real-vs-enuncy-medium,
    .lesson-real-vs-enuncy-large {
        --real-vs-enuncy-height: 140px;
    }
}

.lesson-real-vs-enuncy > figcaption {
    margin-top: 8px;
    font-size: 0.875rem;
    text-align: center;
    color: var(--lp-text-muted);
}

.style-chip {
    position: relative;
    display: inline-block;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: help;
    outline: none;
}

.style-chip-mouth {
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.style-chip-tongue {
    color: var(--mud-palette-secondary);
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 14%, transparent);
}

.style-chip:focus-visible {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

/* Inline popups ([data-popup-host] + [data-popup], see wwwroot/js/lesson.js): StyleChip and GlossaryTerm.
   Positioned with fixed coordinates by the script, so tables cannot clip them. */
.lesson-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    width: max-content;
    padding: 8px;
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    white-space: normal;
    cursor: default;
}

.popup-open > .lesson-popup {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.style-chip-popup {
    max-width: 200px;
    align-items: center;
    text-align: center;
}

.style-chip-popup-image {
    display: block;
    width: 120px;
    height: auto;
    border-radius: 6px;
    margin-bottom: 4px;
}

.style-chip-popup-name {
    font-weight: 600;
}

.style-chip-popup-category,
.style-chip-popup-details {
    font-size: 0.8em;
    color: var(--lp-text-muted);
}

/* ---------- Style sequence ---------- */

.style-sequence-images {
    margin: 16px 0;
}

.style-sequence-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.style-sequence-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.style-sequence-images .style-sequence-step {
    display: flex;
    align-items: center;
}

.style-sequence-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.style-sequence-step-content .lesson-figure.style-image {
    margin: 4px;
}

.style-sequence-images .style-sequence-arrow {
    font-size: 1.5rem;
    margin: 0 4px;
    color: var(--lp-text-muted);
}

.style-sequence-step:first-child .style-sequence-arrow {
    display: none;
}

.style-sequence-text {
    font-weight: 600;
}

.style-sequence-ipa {
    font-size: 1.25rem;
}

.style-sequence-images > figcaption {
    margin-top: 8px;
    font-size: 0.875rem;
    text-align: center;
    color: var(--lp-text-muted);
}

.style-sequence-chips .style-sequence-step {
    white-space: nowrap;
}

.style-sequence-chips .style-sequence-arrow {
    margin: 0 4px;
    color: var(--lp-text-muted);
}

.style-sequence-chips .style-chip + .style-chip {
    margin-left: 4px;
}

/* ---------- Word table ---------- */

.lesson-word-table-figure {
    margin: 16px 0;
}

/* Auto layout: columns grow with their content (chips do not wrap inside), the table scrolls sideways
   when it is wider than the screen instead of letting chips overlap the next column. */
.lesson-word-table table {
    table-layout: auto !important;
}

.lesson-word-table th,
.lesson-word-table td {
    text-align: center;
}

@media (max-width: 600px) {
    .lesson-word-table th,
    .lesson-word-table td {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .lesson-word-table .style-chip {
        font-size: 0.75em;
        padding: 0 6px;
    }
}

.lesson-word-table .lesson-word-table-row-header {
    text-align: left;
    font-weight: 600;
}

.lesson-word-table-audio {
    width: 48px;
}

.lesson-word-table-figure > figcaption {
    margin-top: 8px;
    font-size: 0.875rem;
    text-align: center;
    color: var(--lp-text-muted);
}

.lesson-ipa {
    font-family: "Segoe UI", "Noto Sans", "Lucida Sans Unicode", "Arial Unicode MS", sans-serif;
}

.lesson-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Quiz ---------- */

.lesson-quiz {
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
}

.lesson-quiz-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lesson-quiz-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}

.lesson-quiz-prompt {
    font-weight: 600;
    margin-bottom: 8px;
}

.lesson-quiz-prompt .lesson-big-letter {
    margin: 0;
}

.lesson-quiz-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lesson-quiz-option {
    text-transform: none;
}

.lesson-quiz-explanation {
    margin: 8px 0;
}

.lesson-quiz-choice-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Word column only as wide as the longest word; the answer column gets the rest. */
.lesson-quiz-choice-group table {
    table-layout: auto !important;
}

.lesson-quiz-choice-group th:first-child,
.lesson-quiz-choice-word {
    width: 1%;
    white-space: nowrap;
}

.lesson-quiz-choice-word {
    font-weight: 600;
}

/* Selects and the result icon share one row, so the icon always sits right of the last select. */
.lesson-quiz-choice-selects {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

.lesson-quiz-choice-group th,
.lesson-quiz-choice-group td {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.lesson-quiz-choice-select {
    flex: 0 0 68px;
    width: 68px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background-color: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.lesson-quiz-choice-select:hover:not(:disabled) {
    border-color: var(--mud-palette-text-primary);
}

.lesson-quiz-choice-select:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.lesson-quiz-choice-select:disabled {
    opacity: 1;
    cursor: default;
}

.lesson-quiz-choice-select option {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.lesson-quiz-choice-result {
    display: inline-flex;
    flex: 0 0 24px;
    justify-content: center;
}

/* Grid quizzes (one question per letter): center prompt, options and buttons below the letter. */
.lesson-quiz-items-grid .lesson-quiz-question {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lesson-quiz-items-grid .lesson-quiz-options {
    justify-content: center;
}

.lesson-quiz-items-grid .lesson-quiz-question > .mud-alert {
    align-self: stretch;
}

.lesson-quiz-items-grid .lesson-quiz-explanation {
    align-self: stretch;
    text-align: center;
}

/* ---------- Comic ---------- */

.lesson-comic {
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
    overflow: hidden;
}

.lesson-comic-panel {
    padding: 8px 16px 16px;
    outline: none;
}

.lesson-comic-panel:focus-visible {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.lesson-comic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--lp-border-soft);
}

/* L7000's robot voice in comics */
.comic-robot-text {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
}

/* ---------- Style description (Fundamentals pages) ---------- */

.lesson-style-description {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 8px 24px;
    align-items: start;
    padding: 16px 0;
    border-top: 1px solid var(--lp-border-soft);
}

.lesson-style-description-image .lesson-figure.style-image {
    margin: 0;
}

.lesson-content .lesson-style-description h3 {
    margin-top: 0;
}

.lesson-style-description-code {
    margin-left: 6px;
    font-weight: 400;
    color: var(--lp-text-muted);
}

.lesson-style-description-mantra {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 3px solid var(--mud-palette-primary);
    font-style: italic;
}

.lesson-style-description-used-for {
    color: var(--lp-text-main2);
}

@media (max-width: 600px) {
    .lesson-style-description {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .lesson-style-description-text {
        justify-self: stretch;
    }
}

/* Overview row of all styles of one kind, e.g. the five Mouth Shapes. */
.lesson-style-overview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.lesson-style-overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lesson-style-overview-note {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lp-text-muted);
}

/* Simple → Precise mapping table */
.lesson-style-map {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
}

.lesson-style-map th,
.lesson-style-map td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--lp-border-soft);
    text-align: left;
    vertical-align: top;
}

.lesson-style-map td .style-chip {
    margin: 2px 4px 2px 0;
}

/* Mad Ami's rambling that trails off in comics */
.comic-fade-text {
    font-size: 0.75em;
    opacity: 0.45;
}

/* Written style name that is not a chip (e.g. a mouth shape in a tongue column of the Reference Sheet) */
.style-token-unknown {
    font-size: 0.85em;
    font-style: italic;
    color: var(--lp-text-muted);
}

/* Letter grid (How to read IPA): one cell per letter, wraps on small screens */
.lesson-letter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    margin: 16px 0;
}

.lesson-letter-grid-ipa {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
}

.lesson-letter-grid-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
}

.lesson-letter-grid-main {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--lp-text-strong);
}

.lesson-letter-grid-ipa .lesson-letter-grid-main {
    font-size: 1.05rem;
    white-space: nowrap;
}

.lesson-letter-grid-sub {
    font-size: 0.75rem;
    color: var(--lp-text-muted);
}

/* Highlighted part of a word or IPA, e.g. the "a" in c-a-t and its sound /æ/ (same color as the letter grid) */
.lesson-highlight {
    font-weight: 700;
    color: var(--lp-text-strong);
}

/* ---------- Phoneme groups (Understanding Phonemes) ---------- */

.lesson-phoneme-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.lesson-phoneme-group-nickname {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--lp-text-muted);
}

/* Vault Markdown in lessons: callouts (HOW TO SAY) as boxes, nested ☆ steps indented */
.lesson-markdown blockquote {
    margin: 12px 0 16px;
    padding: 10px 14px;
    border-left: 4px solid var(--mud-palette-success);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
}

.lesson-markdown blockquote blockquote {
    margin: 4px 0 8px 12px;
    padding: 4px 10px;
    border-left: 2px solid var(--lp-border-mid);
    background-color: transparent;
}

.lesson-markdown p {
    margin: 0 0 12px;
}

.lesson-markdown blockquote p:last-child {
    margin-bottom: 0;
}

.lesson-phoneme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin: 12px 0 20px;
}

.lesson-phoneme-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.lesson-phoneme-tile:hover,
.lesson-phoneme-tile:focus-visible {
    border-color: var(--mud-palette-primary);
}

.lesson-phoneme-tile-selected {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.lesson-phoneme-tile-ipa {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--lp-text-strong);
}

.lesson-phoneme-tile-name {
    font-size: 0.8rem;
    text-align: center;
    color: var(--lp-text-muted);
}

.lesson-phoneme-tile {
    position: relative;
}

.lesson-phoneme-tile-done {
    border-color: var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.lesson-phoneme-tile-done.lesson-phoneme-tile-selected {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.lesson-phoneme-tile-check {
    position: absolute;
    top: 6px;
    right: 6px;
    color: var(--mud-palette-success);
}

.lesson-phoneme-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 20px;
}

.lesson-footer-hint {
    color: var(--lp-text-muted);
}

/* Links to other lessons (LessonLink) and to sounds: always underlined, so they read as links */
.lesson-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lesson-link-arrow::after {
    content: " →";
}

/* Obedience / Rebelliousness of a consonant family (ObedienceMeter) */
.lesson-obedience {
    margin: 12px 0 20px;
    border-collapse: collapse;
}

.lesson-obedience th,
.lesson-obedience td {
    padding: 4px 16px 4px 0;
    text-align: left;
    border-bottom: 1px solid var(--lp-border-soft);
}

.lesson-obedience tbody th {
    font-weight: 500;
}

.lesson-obedience-glyphs {
    font-size: 1.15rem;
    letter-spacing: 3px;
}

.lesson-obedience-on {
    color: var(--mud-palette-primary);
}

.lesson-obedience-off {
    color: var(--lp-text-muted);
}

/* Table header rows: tinted background and a stronger bottom line, so the header stands out from the body (Mark).
   Covers WordTable (MudSimpleTable), quiz choice tables, the style map, the obedience meter and Markdown tables.
   Colors come from --lp-table-head-bg / --lp-table-head-border in general.css. */
.lesson-word-table thead th,
.lesson-quiz-choice-group thead th,
.lesson-style-map thead th,
.lesson-obedience thead th,
.lesson-markdown thead th {
    background-color: var(--lp-table-head-bg) !important;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--lp-table-head-border) !important;
}

/* ---------- Phoneme Pair Wheels (PhonemeReel, reel.js) ---------- */

.phoneme-wheel-reels {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 24px 0 12px;
}

.phoneme-wheel-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.phoneme-wheel-arrow {
    font-size: 1.75rem;
    color: var(--lp-text-muted);
}

/* One wheel. --reel-visible must be odd, so one entry sits in the middle. */
.phoneme-reel {
    --reel-item-height: 44px;
    --reel-visible: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 116px;
}

.phoneme-reel-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-text-soft);
}

.phoneme-reel-group {
    min-height: 1.4em;
    font-size: 0.8rem;
    color: var(--lp-text-muted);
}

.phoneme-reel-window {
    position: relative;
    width: 100%;
    border: 1px solid var(--lp-border-soft);
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The padding lets the first and the last entry reach the middle. With it, entry n is centered at scrollTop = n * item height. */
.phoneme-reel-viewport {
    box-sizing: border-box;
    height: calc(var(--reel-item-height) * var(--reel-visible));
    padding-block: calc(var(--reel-item-height) * (var(--reel-visible) - 1) / 2);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
    outline: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 62%, transparent);
}

.phoneme-reel-viewport::-webkit-scrollbar {
    display: none;
}

.phoneme-reel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--reel-item-height);
    scroll-snap-align: center;
    font-size: 1.1rem;
    color: var(--lp-text-soft);
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease-out;
}

/* First entry of a family (Plosives, Fricatives, ...) */
.phoneme-reel-group-start:not(:first-child) {
    box-shadow: inset 0 1px 0 var(--lp-border-soft);
}

/* Set by reel.js on the entry in the middle, also while the wheel is moving. */
.phoneme-reel-item[data-centered] {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    transform: scale(1.3);
    cursor: default;
}

/* Fixed selection window over the middle entry */
.phoneme-reel-marker {
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: var(--reel-item-height);
    transform: translateY(-50%);
    border-block: 2px solid var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    pointer-events: none;
}

.phoneme-reel-viewport:focus-visible + .phoneme-reel-marker {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Result below the wheels (PhonemePairResult) */
.phoneme-pair-switch {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

/* One card per sound, as on the Engine page. A diphthong is one card with two positions.
   The cards stay in one row and shrink together on a phone; --positions (1 or 2) is set per card. */
.phoneme-pair-cards {
    --pair-tile-width: 128px;
    --pair-gap: 8px;
    --pair-card-padding: 12px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--pair-gap);
    margin: 16px 0;
}

.phoneme-pair-arrow {
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.5rem;
    color: var(--lp-text-muted);
}

.phoneme-pair-card {
    display: flex;
    flex-direction: column;
    /* Positions, the gaps between them, the padding and the border (2px): every tile ends up --pair-tile-width wide. */
    flex: 0 1 calc(var(--positions) * var(--pair-tile-width) + (var(--positions) - 1) * var(--pair-gap) + 2 * var(--pair-card-padding) + 2px);
    min-width: 0;
    padding: var(--pair-card-padding);
    border: 1px solid var(--lp-border-soft);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
}

.phoneme-pair-card-ipa {
    margin-bottom: 8px;
    font-size: 1.25rem;
    text-align: center;
}

.phoneme-pair-card-positions {
    display: flex;
    flex: 1;
    gap: var(--pair-gap);
}

.phoneme-pair-position {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: var(--pair-gap);
    min-width: 0;
}

/* Mouth Style on top, Tongue Style below. Every tile has the same content height (fixed image box, room for two
   caption lines), so the rows line up across positions and cards, also when one label wraps and another does not. */
.phoneme-pair-tile {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid var(--lp-border-soft);
    border-radius: 6px;
}

/* Takes up sub-pixel differences, so the cards end on one line. */
.phoneme-pair-tile:last-child {
    flex-grow: 1;
}

.phoneme-pair-tile .lesson-figure.style-image {
    display: flex;
    width: 100%;
    margin: 0;
}

.phoneme-pair-tile .lesson-image {
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.phoneme-pair-tile .style-image figcaption {
    min-height: 2.6em;
    margin-top: 4px;
    line-height: 1.3;
}

/* Table: a line in front of every sound, so the two positions of a diphthong read as one group. */
.phoneme-pair-table .phoneme-pair-card-start {
    border-left: 1px solid var(--lp-border-soft);
}

.phoneme-pair-note {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--lp-text-muted);
}

@media (max-width: 600px) {
    .phoneme-pair-cards {
        --pair-gap: 4px;
        --pair-card-padding: 6px;
    }

    .phoneme-pair-arrow {
        font-size: 1.1rem;
    }

    .phoneme-pair-tile {
        padding: 4px 2px;
    }

    .phoneme-pair-tile .style-image figcaption {
        font-size: 0.75rem;
    }

    /* Up to four columns on a phone: smaller text, so the table fits without scrolling sideways in most cases. */
    .phoneme-pair-table th,
    .phoneme-pair-table td {
        font-size: 0.8rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phoneme-reel-item {
        transition: none;
    }
}