/* Self-hosted Lexend font (variable, latin-ext subset for Spanish support) */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Self-hosted Lexend font (variable, latin subset) */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/lexend-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg-a: #f8fbff;
    --bg-b: #e8f0fe;
    --panel: #ffffff;
    --ink: #1e293b;
    --muted: #475569;
    --brand: #2563EB;
    --brand-strong: #1d4ed8;
    --accent: #10B981;
    --accent-strong: #059669;
    --danger: #dc2626;
    --line: #cbd5e1;
    --focus-ring: #2563EB;
    --shadow: 0 12px 32px rgba(14, 41, 74, 0.10);
    --warm-50: #fafaf9;
    --warm-100: #f5f5f4;
    --warm-200: #e7e5e4;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Lexend", "Segoe UI", sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at top left, var(--bg-b), var(--bg-a));
    line-height: 1.45;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--brand);
    color: white;
    font-weight: 700;
    border-radius: 0 0 12px 12px;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-link {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-strong);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.brand-subtitle {
    color: var(--muted);
    font-size: 0.82rem;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.top-nav a,
.link-button {
    color: var(--brand-strong);
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.top-nav a,
.top-nav .link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
}

.top-nav a:hover,
.top-nav .link-button:hover {
    background: #e8f0ff;
}

.inline-form {
    display: inline;
}

.app-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 1.2rem 3.5rem;
    display: grid;
    gap: 1rem;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .panel { animation: none; }
    .app-main { animation: none; }
}

.hero {
    border-radius: 16px;
    padding: 1.2rem;
    background: linear-gradient(135deg, #dbeafe, #ede9fe, #d1fae5);
    box-shadow: var(--shadow);
}

.panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem;
    background: var(--panel);
    box-shadow: var(--shadow);
    animation: panelFadeIn 0.25s ease-out;
    overflow-wrap: break-word;
}

h1,
h2,
h3 {
    margin-top: 0;
}

.search-form,
.stack-form,
.quiz-form,
.nav-buttons {
    display: grid;
    gap: 0.75rem;
}

.search-form {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: end;
}

.search-field {
    display: grid;
    gap: 0.35rem;
}

.search-submit {
    display: grid;
    align-items: end;
}

.search-submit button {
    width: 100%;
    min-height: 56px;
}

.stack-form {
    max-width: 700px;
}

input,
select,
textarea,
button,
.primary-button,
.danger-button {
    font: inherit;
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 0.6rem 0.7rem;
}

textarea {
    min-height: 260px;
    line-height: 1.45;
}

button,
.primary-button,
.danger-button {
    border: none;
    background: var(--brand);
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

button:hover,
.primary-button:hover {
    background: var(--brand-strong);
}

button:active,
.primary-button:active {
    transform: scale(0.97);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Focus indicators — accessibility */
button:focus-visible,
.primary-button:focus-visible,
.danger-button:focus-visible,
.link-button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #ffffff;
}

.secondary-button {
    background: transparent;
    color: var(--brand);
    border: 2px solid var(--brand);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.secondary-button:hover {
    background: var(--bg-b);
}

.secondary-button:active {
    transform: scale(0.97);
}

.danger-button {
    background: var(--danger);
}

.danger-button:hover {
    background: #b91c1c;
}

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

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: white;
    display: grid;
    gap: 0.6rem;
}

.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
    text-align: center;
    border-left: 4px solid var(--brand);
}

.metric-card h2 {
    font-size: 2rem;
    color: var(--brand-strong);
    margin: 0;
}

.progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.progress-row h1 {
    margin-bottom: 0;
}

.progress-row span {
    color: var(--muted);
    font-weight: 600;
}

.progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #dbeafe;
    overflow: hidden;
}

.progress-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--brand));
    transition: width 0.4s ease;
}

.markdown-block {
    line-height: 1.55;
}

.nav-panel .nav-buttons {
    grid-template-columns: repeat(2, minmax(120px, 220px));
    justify-content: center;
}

.quiz-question {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem;
}

.quiz-actions {
    display: grid;
    gap: 0.75rem;
}

.quiz-actions .primary-button,
.quiz-actions .secondary-button {
    width: 100%;
    text-align: center;
}

.quiz-option {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.4rem 0;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    min-height: 44px;
}

/* Quiz result styling */
.quiz-result-correct {
    border-color: var(--accent);
    background: #ecfdf5;
}

.quiz-result-incorrect {
    border-color: var(--danger);
    background: #fef2f2;
}

.quiz-result-label {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.quiz-result-label.label-correct {
    background: #d1fae5;
    color: #065f46;
}

.quiz-result-label.label-incorrect {
    background: #fee2e2;
    color: #991b1b;
}

.quiz-rationale {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 0.95em;
    color: #92400e;
}

.quiz-answer-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 0.3rem;
}

.quiz-answer-badge.correct {
    background: #d1fae5;
    color: #065f46;
}

.quiz-answer-badge.incorrect {
    background: #fee2e2;
    color: #991b1b;
}

/* Quiz wizard — one-question-at-a-time */
.quiz-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.quiz-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.quiz-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--line);
    transition: background 0.2s, transform 0.2s;
    /* WCAG: 44px minimum touch target via padding */
    padding: 16px;
    box-sizing: content-box;
    margin: -16px 0;
    background-clip: content-box;
    -webkit-background-clip: content-box;
    cursor: pointer;
}

.quiz-dot:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.quiz-dot-active {
    background: var(--brand);
    transform: scale(1.3);
}

.quiz-dot-answered {
    background: var(--accent);
}

.quiz-dot-active.quiz-dot-answered {
    background: var(--accent);
    transform: scale(1.3);
}

.quiz-counter {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

.patient-ui .quiz-dot {
    width: 14px;
    height: 14px;
    padding: 15px;
    margin: -15px 0;
}

.patient-ui .quiz-counter {
    font-size: 1.05rem;
}

.quiz-option-selected {
    outline: 3px solid var(--brand);
    outline-offset: -1px;
    border-radius: 8px;
    background: #eff6ff;
}

/* Quiz results navigator */
.quiz-result-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.quiz-result-counter {
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
}

.quiz-result-prev {
    justify-self: start;
}

.quiz-result-next {
    justify-self: end;
}

.quiz-result-nav .primary-button {
    min-height: 52px;
    padding: 0.6rem 1.5rem;
}

.patient-ui .quiz-result-nav .primary-button {
    min-height: 60px;
    font-size: 1.1rem;
}

/* Summary top grid — side-by-side on landscape */
.summary-top-grid {
    display: grid;
    gap: 1rem;
}

.qr-panel {
    text-align: center;
}

.qr-panel a:not(.primary-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    color: var(--brand-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.qr-panel .primary-button {
    width: 100%;
    max-width: 420px;
    margin: 0.5rem auto 0;
}

.qr-image {
    width: min(88vw, 260px);
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.table-scroll .admin-table {
    min-width: 700px;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid var(--line);
    text-align: left;
    padding: 0.6rem;
    vertical-align: top;
}

@media (hover: hover) {
    .admin-table tbody tr:hover {
        background: var(--warm-50);
    }

    [data-theme="dark"] .admin-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

.admin-table th {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.action-group {
    display: grid;
    gap: 0.4rem;
}

.action-group > form {
    display: grid;
    gap: 0.45rem;
}

.action-group select {
    width: 100%;
    min-height: 42px;
}

.action-group button,
.action-group .link-button {
    width: 100%;
    min-height: 42px;
}

.action-group .link-button {
    border: 1px solid #b8cff0;
    border-radius: 10px;
    background: #ecf3ff;
    color: var(--brand-strong);
    text-align: center;
    justify-content: center;
    padding: 0.5rem 0.7rem;
}

.action-group .link-button:hover {
    background: #dbe9ff;
}

.link-list {
    display: grid;
    gap: 0.6rem;
}

.link-list a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid #b8cff0;
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    background: #ecf3ff;
    color: var(--brand-strong);
    text-decoration: none;
    font-weight: 600;
}

.link-list a:hover {
    background: #dbe9ff;
}

.error-panel {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.status-panel {
    border-color: #93c5fd;
    background: #eff6ff;
}

.procedure-card {
    grid-template-rows: auto auto auto 1fr auto;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .procedure-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(14, 41, 74, 0.15);
    }
}

[data-theme="dark"] .procedure-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.procedure-thumb,
.lesson-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid var(--line);
    background: #edf4ff;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.section-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.media-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.media-grid iframe,
.media-grid video {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #0f2233;
}

.media-grid .pdf-frame {
    width: 100%;
    min-height: min(60vh, 520px);
    min-height: min(60dvh, 520px);
    aspect-ratio: 4 / 3;
    height: auto;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #f7fbff;
}

.media-grid audio {
    width: 100%;
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 0.35rem;
    background: #f7fbff;
}

.big-action {
    min-height: 68px;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 1rem 1.2rem;
    border-radius: 16px;
}

.baseline-quick-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.baseline-choice {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 0.7rem;
    text-align: left;
    align-items: center;
    justify-items: start;
}

.baseline-choice-copy {
    display: grid;
    gap: 0.2rem;
}

.baseline-choice-copy small {
    color: #dbe7ff;
    font-size: 0.95rem;
    font-weight: 500;
}

.readiness-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.decision-button {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 0.65rem;
    text-align: left;
    align-items: center;
    justify-items: start;
}

.decision-icon,
.decision-button span {
    pointer-events: none;
}

.decision-icon {
    width: 40px;
    height: 40px;
}

.ready-yes {
    background: #059669;
}

.ready-yes:hover {
    background: #047857;
}

.ready-no {
    background: #dc2626;
}

.ready-no:hover {
    background: #b91c1c;
}

.status-badge {
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    font-weight: 700;
}

.status-yes {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.status-no {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.handoff-panel p {
    margin: 0.35rem 0;
}

.handoff-status {
    text-align: center;
}

.handoff-graphic {
    width: min(100%, 620px);
    border-radius: 16px;
    border: 2px solid var(--line);
    margin: 0 auto;
}

.handoff-yes {
    background: linear-gradient(180deg, #ecfdf5, #d1fae5);
}

.handoff-no {
    background: linear-gradient(180deg, #fef2f2, #fee2e2);
}

.handoff-actions {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.handoff-pin-form {
    max-width: 420px;
    margin: 0 auto;
}

.handoff-timeline-table {
    min-width: 0 !important;
}

.handoff-timeline-table th,
.handoff-timeline-table td {
    white-space: normal;
    word-break: break-word;
}

.handoff-timestamps {
    display: grid;
    gap: 0.3rem;
    font-size: 0.95em;
}

.handoff-timestamps dt {
    font-weight: 700;
    color: var(--muted);
}

.handoff-timestamps dd {
    margin: 0 0 0.5rem 0;
}

.asset-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.asset-card {
    align-content: start;
}

.asset-card iframe,
.asset-card video,
.asset-card .pdf-frame {
    width: 100%;
    min-height: 220px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: #f7fbff;
}

.asset-card iframe,
.asset-card video {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
}

.asset-card .pdf-frame {
    min-height: min(60vh, 520px);
    min-height: min(60dvh, 520px);
    aspect-ratio: 4 / 3;
    height: auto;
}

.asset-card audio {
    width: 100%;
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 0.35rem;
    background: #f7fbff;
}

.presentation-mode {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

/* Citations */
.citations-toggle {
    background: var(--warm-100);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9em;
    min-height: 40px;
    padding: 0.4rem 0.8rem;
}

.citations-list {
    margin-top: 0.5rem;
    padding: 0.8rem;
    background: var(--warm-50);
    border: 1px solid var(--warm-200);
    border-radius: 10px;
    font-size: 0.9em;
}

.citations-list ol {
    margin: 0;
    padding-left: 1.2rem;
}

.citations-list li {
    margin-bottom: 0.3rem;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-loading {
    pointer-events: none;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-loading .loading-spinner {
    margin-right: 0.5rem;
}

/* Timeout warning overlay */
.timeout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.timeout-dialog {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.timeout-dialog h2 {
    color: var(--brand);
}

.timeout-countdown {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--danger);
    margin: 0.5rem 0;
}

/* Offline banner */
.offline-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fbbf24;
    color: #78350f;
    text-align: center;
    padding: 0.6rem;
    font-weight: 600;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.offline-banner.visible {
    transform: translateY(0);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* Analytics charts */
.chart-container {
    position: relative;
    width: 100%;
    max-height: 400px;
}

.chart-container canvas {
    max-height: 400px;
}

/* Editor markdown preview */
.editor-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.markdown-preview {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem;
    background: var(--warm-50);
    min-height: 260px;
    overflow-y: auto;
    max-height: 500px;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
    color: var(--brand-strong);
}

/* Language selector in nav */
.lang-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.lang-toggle a {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 0;
    min-height: 36px;
}

.lang-toggle a.active {
    background: var(--brand);
    color: white;
}

/* Global language switcher in sticky header */
.lang-switcher {
    flex-shrink: 0;
}

.lang-switcher select {
    appearance: none;
    -webkit-appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232563EB' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
    border: 1.5px solid var(--brand);
    border-radius: 20px;
    color: var(--brand-strong);
    font-size: 0.9rem;
    font-weight: 600;
    height: 38px;
    padding: 0 2.2rem 0 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    min-height: 0;
}

.lang-switcher select:hover {
    background-color: #eff6ff;
    border-color: var(--brand-strong);
}

.lang-switcher select:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #ffffff;
}

.patient-ui .lang-switcher select {
    height: 44px;
    font-size: 0.95rem;
    padding: 0 2.4rem 0 1rem;
    min-height: 0;
}

/* Admin UI */
.admin-ui {
    font-size: 17px;
}

.admin-ui .app-main {
    max-width: 1240px;
}

.admin-ui .panel {
    padding: 1.15rem;
}

.admin-ui input,
.admin-ui select,
.admin-ui textarea,
.admin-ui button,
.admin-ui .primary-button,
.admin-ui .danger-button,
.admin-ui .link-button {
    min-height: 44px;
}

.admin-ui .stack-form label {
    font-weight: 600;
}

.editor-filter-form {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Patient UI */
.patient-ui {
    font-size: 20px;
}

.patient-ui .app-main {
    max-width: 1180px;
    gap: 1.2rem;
}

.patient-ui .panel {
    padding: 1.3rem;
    border-width: 2px;
}

.patient-ui h1 {
    font-size: 2rem;
}

.patient-ui h2 {
    font-size: 1.55rem;
}

.patient-ui .hero p,
.patient-ui .panel p,
.patient-ui .panel li {
    line-height: 1.6;
}

.patient-ui .search-field label {
    font-size: 1.05rem;
    font-weight: 700;
}

.patient-ui button,
.patient-ui .primary-button,
.patient-ui .danger-button {
    min-height: 64px;
    font-size: 1.15rem;
    border-radius: 16px;
}

.patient-ui input,
.patient-ui select,
.patient-ui textarea {
    min-height: 60px;
    font-size: 1.1rem;
}

.patient-ui .search-submit button {
    min-height: 60px;
}

.patient-ui .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    justify-content: center;
}

.patient-ui .card {
    padding: 1.2rem;
    gap: 0.75rem;
    border-width: 2px;
}

.patient-ui .procedure-thumb,
.patient-ui .lesson-image {
    border-width: 3px;
    object-position: center;
    background: #edf4ff;
}

.patient-ui .procedure-thumb {
    aspect-ratio: auto;
    height: clamp(190px, 22vw, 240px);
    object-fit: contain;
}

.patient-ui .lesson-image {
    min-height: 230px;
    max-height: min(56vh, 460px);
    max-height: min(56dvh, 460px);
    object-fit: contain;
}

.patient-ui .big-action {
    min-height: 68px;
    font-size: 1.15rem;
    text-align: center;
    line-height: 1.3;
}

.patient-ui .baseline-choice {
    grid-template-columns: 56px 1fr;
    gap: 0.9rem;
}

.patient-ui .decision-icon {
    width: 52px;
    height: 52px;
}

.patient-ui .nav-panel .nav-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.patient-ui .top-nav a,
.patient-ui .top-nav .link-button {
    min-height: 52px;
    font-size: 1rem;
}

.patient-ui .section-icon {
    width: 64px;
    height: 64px;
}

.patient-ui .status-badge {
    padding: 0.85rem 1rem;
    font-size: 1.12rem;
}

.patient-ui .quiz-question {
    padding: 1rem;
    border-width: 2px;
}

.patient-ui .quiz-question legend {
    font-size: 1.2rem;
    font-weight: 700;
}

.patient-ui .quiz-option {
    margin: 0.7rem 0;
    padding: 0.4rem 0;
}

.patient-ui .quiz-option input {
    width: 28px;
    height: 28px;
}

.procedure-card .primary-button {
    width: 100%;
}

/* Patient step indicator */
.step-indicator {
    margin-bottom: 0.5rem;
}

.step-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    flex: 1;
    max-width: 120px;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: var(--line);
    z-index: 0;
}

.step-item.step-done:not(:last-child)::after {
    background: var(--accent);
}

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--line);
    color: var(--muted);
    position: relative;
    z-index: 1;
}

.step-done .step-dot {
    background: var(--accent);
    color: white;
}

.step-active .step-dot {
    background: var(--brand);
    color: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.step-label {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 500;
    text-align: center;
}

.step-active .step-label {
    color: var(--brand);
    font-weight: 700;
}

/* iPad safe area insets */
@supports (padding: env(safe-area-inset-bottom)) {
    .app-main {
        padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    }

    .app-header {
        padding-top: calc(1rem + env(safe-area-inset-top));
        padding-left: calc(1.5rem + env(safe-area-inset-left));
        padding-right: calc(1.5rem + env(safe-area-inset-right));
    }

    .offline-banner {
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
        padding-left: calc(0.6rem + env(safe-area-inset-left));
        padding-right: calc(0.6rem + env(safe-area-inset-right));
    }

    .timeout-overlay .timeout-dialog {
        margin-bottom: env(safe-area-inset-bottom);
    }
}

/* Responsive */
@media (max-width: 860px) {
    .search-form {
        grid-template-columns: 1fr;
    }

    .app-header {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 0.7rem 1rem;
    }

    .top-nav {
        flex-wrap: wrap;
        width: 100%;
        gap: 0.4rem;
    }

    .nav-panel .nav-buttons {
        grid-template-columns: 1fr;
    }

    .readiness-grid {
        grid-template-columns: 1fr;
    }

    .patient-ui .cards-grid,
    .patient-ui .baseline-quick-grid,
    .patient-ui .handoff-actions {
        grid-template-columns: 1fr;
    }

    .patient-ui .nav-panel .nav-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .editor-split {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 900px) {
    .search-form {
        grid-template-columns: minmax(340px, 2fr) minmax(140px, 0.7fr);
    }

    .editor-filter-form {
        grid-template-columns: repeat(4, minmax(160px, 1fr));
    }
}

@media (max-width: 640px) {
    .progress-row span {
        width: 100%;
    }

    .step-label {
        font-size: 0.7rem;
    }

    .step-dot {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }

    .qr-image {
        width: min(50%, 200px);
    }

    .summary-top-grid {
        gap: 0.75rem;
    }
}

@media (max-width: 340px) {
    .patient-ui .nav-panel .nav-buttons {
        grid-template-columns: 1fr;
    }
}

/* ===== Landscape Responsiveness — 3-Tier System ===== */

/* Summary side-by-side on landscape tablets */
@media (orientation: landscape) and (min-width: 700px) {
    .summary-top-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tier C — Large tablet landscape (max-height: 900px) */
@media (orientation: landscape) and (max-height: 900px) {
    .patient-ui .app-main {
        gap: 0.9rem;
    }

    .patient-ui .panel {
        padding: 1rem;
    }

    .patient-ui .lesson-image {
        max-height: min(48dvh, 380px);
        max-height: min(48vh, 380px);
    }

    .patient-ui .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* Tier B — Tablet landscape (max-height: 700px) */
@media (orientation: landscape) and (max-height: 700px) {
    .patient-ui {
        font-size: 18px;
    }

    .patient-ui h1 {
        font-size: 1.7rem;
    }

    .patient-ui h2 {
        font-size: 1.35rem;
    }

    .patient-ui .panel {
        padding: 0.9rem;
    }

    .patient-ui button,
    .patient-ui .primary-button,
    .patient-ui .danger-button {
        min-height: 56px;
        font-size: 1.05rem;
    }

    .patient-ui input,
    .patient-ui select,
    .patient-ui textarea {
        min-height: 52px;
        font-size: 1rem;
    }

    .patient-ui .big-action {
        min-height: 60px;
        font-size: 1.05rem;
    }

    .patient-ui .app-main {
        padding: 0.6rem 1rem 1.5rem;
        gap: 0.8rem;
    }

    .app-header {
        padding: 0.6rem 1rem;
    }

    .step-dot {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }

    .patient-ui .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.8rem;
    }

    .patient-ui .procedure-thumb {
        height: clamp(140px, 18vw, 180px);
    }

    .patient-ui .lesson-image {
        max-height: min(40dvh, 320px);
        max-height: min(40vh, 320px);
    }

    .patient-ui .baseline-quick-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .patient-ui .quiz-question {
        padding: 0.8rem;
    }

    .patient-ui .quiz-option {
        margin: 0.4rem 0;
        padding: 0.35rem 0;
    }

    .quiz-dot {
        width: 10px;
        height: 10px;
    }

    .quiz-dots {
        gap: 0.35rem;
    }

    .qr-image {
        width: min(30vw, 180px);
    }

    .patient-ui .readiness-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .patient-ui .handoff-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeout-dialog {
        padding: 1.3rem;
        max-width: 380px;
    }

    .timeout-countdown {
        font-size: 2rem;
    }
}

/* Tier A — Phone landscape (max-height: 440px) */
@media (orientation: landscape) and (max-height: 440px) {
    .patient-ui {
        font-size: 16px;
    }

    .patient-ui h1 {
        font-size: 1.4rem;
        margin-bottom: 0.3rem;
    }

    .patient-ui h2 {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

    .patient-ui .panel {
        padding: 0.6rem 0.8rem;
        border-radius: 12px;
    }

    .patient-ui button,
    .patient-ui .primary-button,
    .patient-ui .danger-button {
        min-height: 48px;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .patient-ui input,
    .patient-ui select,
    .patient-ui textarea {
        min-height: 44px;
        font-size: 0.95rem;
    }

    .patient-ui .big-action {
        min-height: 48px;
        font-size: 0.95rem;
        padding: 0.6rem 0.9rem;
    }

    .patient-ui .app-main {
        padding: 0.4rem 0.8rem 1rem;
        gap: 0.6rem;
    }

    .app-header {
        padding: 0.4rem 0.8rem;
    }

    .brand-subtitle {
        display: none;
    }

    .step-label {
        display: none;
    }

    .step-dot {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .step-item:not(:last-child)::after {
        top: 11px;
        height: 2px;
    }

    .step-indicator {
        margin-bottom: 0.25rem;
    }

    .patient-ui .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.6rem;
    }

    .patient-ui .card {
        padding: 0.7rem;
        gap: 0.4rem;
    }

    .patient-ui .procedure-thumb {
        height: clamp(100px, 14vw, 140px);
    }

    .patient-ui .lesson-image {
        min-height: 120px;
        max-height: min(30dvh, 200px);
        max-height: min(30vh, 200px);
    }

    .patient-ui .section-icon {
        width: 44px;
        height: 44px;
    }

    .media-grid iframe,
    .media-grid video {
        max-height: min(35dvh, 240px);
        max-height: min(35vh, 240px);
    }

    .patient-ui .baseline-quick-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .patient-ui .baseline-choice {
        grid-template-columns: 36px 1fr;
        gap: 0.5rem;
    }

    .patient-ui .quiz-question {
        padding: 0.6rem;
        border-width: 1px;
    }

    .patient-ui .quiz-question legend {
        font-size: 1rem;
    }

    .patient-ui .quiz-option {
        margin: 0.25rem 0;
        padding: 0.25rem 0.4rem;
        min-height: 44px;
    }

    .patient-ui .quiz-option input {
        width: 22px;
        height: 22px;
    }

    .quiz-progress {
        gap: 0.3rem;
        margin-bottom: 0.4rem;
    }

    .quiz-dot {
        width: 8px;
        height: 8px;
    }

    .quiz-dots {
        gap: 0.25rem;
    }

    .quiz-counter {
        font-size: 0.85rem;
    }

    .quiz-result-nav .primary-button {
        min-height: 44px;
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }

    .qr-image {
        width: min(30vw, 140px);
    }

    .patient-ui .readiness-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .patient-ui .decision-button {
        grid-template-columns: 32px 1fr;
        gap: 0.4rem;
    }

    .patient-ui .decision-icon {
        width: 32px;
        height: 32px;
    }

    .patient-ui .handoff-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .handoff-timeline-table th,
    .handoff-timeline-table td {
        padding: 0.35rem 0.4rem;
        font-size: 0.9rem;
    }

    .timeout-dialog {
        padding: 1rem;
        max-width: 340px;
    }

    .timeout-dialog h2 {
        font-size: 1.1rem;
    }

    .timeout-dialog p {
        font-size: 0.9rem;
    }

    .timeout-countdown {
        font-size: 1.8rem;
        margin: 0.3rem 0;
    }

    .timeout-dialog button {
        min-height: 44px;
    }
}

/* Landscape safe area insets for notched devices */
@supports (padding: env(safe-area-inset-left)) {
    @media (orientation: landscape) {
        .app-main {
            padding-left: calc(0.8rem + env(safe-area-inset-left));
            padding-right: calc(0.8rem + env(safe-area-inset-right));
        }
    }
}

/* ===== Dark Mode ===== */

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--muted);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.theme-toggle:hover {
    background: var(--bg-b);
    color: var(--ink);
}

.patient-ui .theme-toggle {
    width: 44px;
    height: 44px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Light mode: show moon (click → dark). Dark mode: show sun (click → light) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Dark mode CSS custom properties */
[data-theme="dark"] {
    --bg-a: #0f172a;
    --bg-b: #1e293b;
    --panel: #1e293b;
    --ink: #e2e8f0;
    --muted: #a0aec0;
    --brand: #3b82f6;
    --brand-strong: #60a5fa;
    --accent: #34d399;
    --accent-strong: #10b981;
    --danger: #f87171;
    --line: #334155;
    --focus-ring: #3b82f6;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    --warm-50: #1e293b;
    --warm-100: #334155;
    --warm-200: #475569;
    color-scheme: dark;
}

/* Dark mode — element overrides for hardcoded colors */
[data-theme="dark"] body {
    background: radial-gradient(circle at top left, var(--bg-b), var(--bg-a));
}

[data-theme="dark"] .app-header {
    background: rgba(15, 23, 42, 0.95);
    border-color: var(--line);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #1e3a5f, #2d1b69, #1a3c34);
}

[data-theme="dark"] .card {
    background: var(--panel);
    border-color: var(--line);
}

[data-theme="dark"] .progress-bar {
    background: #1e3a5f;
}

[data-theme="dark"] .quiz-result-correct {
    background: #064e3b;
    border-color: var(--accent-strong);
}

[data-theme="dark"] .quiz-result-incorrect {
    background: #7f1d1d;
    border-color: var(--danger);
}

[data-theme="dark"] .quiz-result-label.label-correct {
    background: #065f46;
    color: #a7f3d0;
}

[data-theme="dark"] .quiz-result-label.label-incorrect {
    background: #991b1b;
    color: #fecaca;
}

[data-theme="dark"] .quiz-rationale {
    background: #78350f;
    border-color: #b45309;
    color: #fef3c7;
}

[data-theme="dark"] .quiz-answer-badge.correct {
    background: #065f46;
    color: #a7f3d0;
}

[data-theme="dark"] .quiz-answer-badge.incorrect {
    background: #991b1b;
    color: #fecaca;
}

[data-theme="dark"] .error-panel {
    background: #7f1d1d;
    border-color: #dc2626;
    color: #fecaca;
}

[data-theme="dark"] .status-panel {
    background: #1e3a5f;
    border-color: #3b82f6;
}

[data-theme="dark"] .procedure-thumb,
[data-theme="dark"] .lesson-image {
    background: #1e293b;
    border-color: var(--line);
}

[data-theme="dark"] .media-grid .pdf-frame,
[data-theme="dark"] .media-grid audio,
[data-theme="dark"] .asset-card .pdf-frame,
[data-theme="dark"] .asset-card audio {
    background: #0f172a;
    border-color: var(--line);
}

[data-theme="dark"] .timeout-dialog {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .presentation-mode {
    background: linear-gradient(180deg, #1e293b, #0f172a);
}

[data-theme="dark"] .status-yes {
    background: #064e3b;
    border-color: #10b981;
    color: #a7f3d0;
}

[data-theme="dark"] .status-no {
    background: #7f1d1d;
    border-color: #f87171;
    color: #fecaca;
}

[data-theme="dark"] .handoff-yes {
    background: linear-gradient(180deg, #064e3b, #022c22);
}

[data-theme="dark"] .handoff-no {
    background: linear-gradient(180deg, #7f1d1d, #450a0a);
}

[data-theme="dark"] .top-nav a:hover,
[data-theme="dark"] .top-nav .link-button:hover {
    background: #334155;
}

[data-theme="dark"] .action-group .link-button {
    border-color: #334155;
    background: #0f172a;
    color: var(--brand-strong);
}

[data-theme="dark"] .action-group .link-button:hover {
    background: #1e293b;
}

[data-theme="dark"] .link-list a {
    border-color: #334155;
    background: #0f172a;
    color: var(--brand-strong);
}

[data-theme="dark"] .link-list a:hover {
    background: #1e293b;
}

[data-theme="dark"] .lang-switcher select {
    background-color: #1e293b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2360a5fa' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    border-color: var(--brand);
    color: var(--brand-strong);
}

[data-theme="dark"] .lang-switcher select:hover {
    background-color: #334155;
}

[data-theme="dark"] .markdown-preview {
    background: #0f172a;
    border-color: var(--line);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0f172a;
    color: var(--ink);
    border-color: var(--line);
}

[data-theme="dark"] .baseline-choice-copy small {
    color: #93c5fd;
}

[data-theme="dark"] .secondary-button {
    color: var(--brand-strong);
    border-color: var(--brand);
    background: transparent;
}

[data-theme="dark"] .secondary-button:hover {
    background: #334155;
}

[data-theme="dark"] .offline-banner {
    background: #92400e;
    color: #fef3c7;
}

[data-theme="dark"] .loading-spinner {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: white;
}

[data-theme="dark"] .skip-link {
    background: var(--brand);
}

/* FIX 2: Asset card audio dark mode */
[data-theme="dark"] .asset-card audio {
    background: #0f172a;
    border-color: var(--line);
}

/* FIX 3: Focus ring gap color for dark mode */
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .primary-button:focus-visible,
[data-theme="dark"] .danger-button:focus-visible,
[data-theme="dark"] .link-button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible {
    box-shadow: 0 0 0 2px #0f172a;
}

/* FIX 4: Danger button dark mode — better contrast */
[data-theme="dark"] .danger-button {
    background: #ef4444;
}

[data-theme="dark"] .danger-button:hover {
    background: #dc2626;
}

/* FIX 5: Readiness buttons dark mode */
[data-theme="dark"] .ready-yes {
    background: #10b981;
}

[data-theme="dark"] .ready-yes:hover {
    background: #059669;
}

[data-theme="dark"] .ready-no {
    background: #ef4444;
}

[data-theme="dark"] .ready-no:hover {
    background: #dc2626;
}

/* FIX 6: QR code white background safety */
[data-theme="dark"] .qr-image {
    background: #ffffff;
    padding: 8px;
    border-radius: 12px;
}

/* FIX 7: Validation error styling */
.input-validation-error {
    border-color: var(--danger) !important;
}

.field-validation-error {
    color: var(--danger);
    font-size: 0.9em;
    font-weight: 500;
}

.validation-summary-errors {
    color: var(--danger);
    padding: 0.8rem;
    border: 1px solid var(--danger);
    border-radius: 12px;
    background: #fef2f2;
}

[data-theme="dark"] .validation-summary-errors {
    background: #7f1d1d;
    color: #fecaca;
}

/* FIX 8: Code element styling */
code {
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 0.9em;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
}

[data-theme="dark"] code {
    background: #334155;
    color: #e2e8f0;
}

/* FIX 9: Patient UI procedure thumbnails dark mode specificity */
[data-theme="dark"] .patient-ui .procedure-thumb,
[data-theme="dark"] .patient-ui .lesson-image {
    background: #1e293b;
    border-color: var(--line);
}

/* FIX 10: Admin table row striping dark mode */
[data-theme="dark"] .admin-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* FIX 11: Markdown rendered content dark mode */
.markdown-block blockquote {
    border-left: 4px solid var(--brand);
    margin: 0.8rem 0;
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    border-radius: 0 8px 8px 0;
}

[data-theme="dark"] .markdown-block blockquote {
    background: #0f172a;
    border-left-color: var(--brand);
}

.markdown-block pre {
    background: #f1f5f9;
    padding: 0.8rem;
    border-radius: 8px;
    overflow-x: auto;
}

[data-theme="dark"] .markdown-block pre {
    background: #0f172a;
}

.markdown-block table th {
    background: #f1f5f9;
    font-weight: 700;
    padding: 0.5rem 0.7rem;
    border-bottom: 2px solid var(--line);
}

[data-theme="dark"] .markdown-block table th {
    background: #334155;
}

.markdown-block table td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--line);
}

/* FIX 12: Quiz wizard dark mode */
[data-theme="dark"] .quiz-option-selected {
    outline-color: var(--brand);
    background: #1e3a5f;
}

[data-theme="dark"] .quiz-result-nav .primary-button {
    background: var(--brand);
}

[data-theme="dark"] .quiz-result-counter {
    color: var(--muted);
}

/* ─── Phase 1A: Utility classes ─── */
.center-panel {
    text-align: center;
    padding: 2rem;
}

.button-stack {
    display: grid;
    gap: 0.75rem;
    max-width: 400px;
    margin: 0 auto;
}

.audio-block {
    width: 100%;
    margin-bottom: 0.5rem;
}

.swipe-hint {
    text-align: center;
    font-size: 0.9em;
    color: var(--muted);
}

.builder-fieldset {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem;
    margin-top: 0.5rem;
}

.builder-legend {
    font-weight: 600;
}

.builder-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0;
}

.mono-cell {
    font-family: monospace;
    font-size: 0.85em;
}

[data-theme="dark"] .mono-cell {
    color: var(--brand-strong);
}

.empty-row {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
}

.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.mt-md {
    margin-top: 1.5rem;
}

.mt-sm {
    margin-top: 0.8rem;
}

/* ─── Phase 4C: Quiz wizard fade transition ─── */
.quiz-fade-in {
    animation: quizFadeIn 0.2s ease-out;
}

@keyframes quizFadeIn {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-fade-in { animation: none; }
}

/* ─── Phase 4E: Empty state for cards grid ─── */
.cards-grid:empty::after,
.cards-grid:has(> :only-child) > :only-child {
    text-align: center;
}

.cards-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: 1.05rem;
}

/* Print stylesheet */
@media print {
    .app-header,
    .top-nav,
    .nav-panel,
    .skip-link,
    .offline-banner,
    .timeout-overlay,
    button[type="submit"],
    .danger-button {
        display: none !important;
    }

    .app-main {
        max-width: 100%;
        padding: 0;
    }

    .panel {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    body {
        background: white;
        color: black;
    }
}

/* Chat Widget */
.chat-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
}

.chat-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.chat-toggle:active {
    transform: scale(0.97);
}

.chat-panel {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    width: min(380px, calc(100vw - 2rem));
    max-height: 60vh;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: #fff;
}

.chat-header h3 {
    margin: 0;
    font-size: 1rem;
}

.chat-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 200px;
    max-height: 40vh;
}

.chat-message {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    max-width: 85%;
    word-wrap: break-word;
}

.chat-message p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.chat-user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
}

.chat-assistant {
    align-self: flex-start;
    background: var(--bg);
    color: var(--text);
}

.chat-loading .chat-dots {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.chat-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    animation: chatDot 1.2s infinite;
}

.chat-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatDot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

.chat-input-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--line);
}

.chat-input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    min-height: 44px;
}

.chat-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-send:hover {
    opacity: 0.9;
}

/* Teach-Back Recording */
.teach-back-panel {
    text-align: center;
}

.teach-back-recorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
}

.record-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.record-button:hover {
    transform: scale(1.05);
}

.record-button:active {
    transform: scale(0.95);
}

.record-button.recording {
    animation: recordPulse 1.5s infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
}

@keyframes recordPulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.record-visualizer {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 40px;
}

.record-visualizer span {
    width: 4px;
    height: 8px;
    background: var(--muted);
    border-radius: 2px;
    transition: height 0.1s;
}

.record-visualizer.active span {
    background: var(--danger);
    animation: visualizerBar 0.8s infinite;
}

.record-visualizer.active span:nth-child(2) { animation-delay: 0.1s; }
.record-visualizer.active span:nth-child(3) { animation-delay: 0.2s; }
.record-visualizer.active span:nth-child(4) { animation-delay: 0.3s; }
.record-visualizer.active span:nth-child(5) { animation-delay: 0.4s; }

@keyframes visualizerBar {
    0%, 100% { height: 8px; }
    50% { height: 32px; }
}

.record-timer {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.record-status {
    font-size: 1rem;
    color: var(--muted);
}

.record-status.record-active {
    color: var(--danger);
    font-weight: 600;
}

.record-status.record-done {
    color: var(--success, #22c55e);
}

.record-status.record-error {
    color: var(--danger);
}

.playback-area {
    width: 100%;
    max-width: 400px;
}

.playback-area audio {
    width: 100%;
}

/* Spanish Review */
.spanish-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .spanish-review-grid {
        grid-template-columns: 1fr;
    }
}

.review-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

.review-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* WCAG: Required field visual indicator */
label:has(+ input[required])::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after {
    content: " *";
    color: var(--danger);
    font-weight: 700;
}