html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Design-retouch (feat-design-retouches): the #258cfb box-shadow focus ring is
   retired in favour of lc-tokens.css's unified .btn:focus-visible → #4a7eb8
   outline (TD-194 value). Keeping both would double the ring on keyboard focus. */

/* TD-191 (WCAG 2.4.1 Bypass Blocks): visible-on-focus skip link.
   Bootstrap's .visually-hidden-focusable hides until keyboard focus; .skip-link
   positions it at the top-left of the viewport with a high z-index so it sits
   above the navbar when revealed. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #0d6efd;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* TD-196: native <dialog> baseline styling. .showModal() gives us focus-trap
   and the ::backdrop pseudo for the dim overlay; we just tighten the panel
   to match Bootstrap card spacing so it doesn't look like a 1990s alert box. */
dialog#submitQuizConfirm {
  max-width: 28rem;
  width: 90%;
  padding: 1.25rem 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
dialog#submitQuizConfirm::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.unit-summary {
display: flex;
align-items: center;
gap: .5rem;
}

.unit-summary .spacer { flex: 1; }

/* ===================================================================
   ContentSequenceItem Layout Styles (v1.14.0)
   =================================================================== */

.content-sequence {
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    max-width: 1400px;
    padding: 1rem 0;
}

/* Split Layout (Side-by-Side) */
.content-sequence.layout-split {
    flex-direction: row;
}

.content-sequence.layout-split .content-sequence__passage {
    flex: 1.1; /* 55% width - slightly wider for reading comfort */
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 250px); /* Account for header/footer */
    padding-right: 1rem;
}

.content-sequence.layout-split .content-sequence__questions {
    flex: 1; /* 45% width */
    min-width: 0;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    padding-left: 1rem;
    border-left: 1px solid #dee2e6;
}

/* Vertical Layout (Stacked) */
.content-sequence.layout-vertical {
    flex-direction: column;
}

.content-sequence.layout-vertical .content-sequence__passage {
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #dee2e6;
}

.content-sequence.layout-vertical .content-sequence__questions {
    width: 100%;
}

/* Auto Layout (Responsive) */
.content-sequence.layout-auto {
    flex-direction: row;
}

/* Desktop: Split layout (768px and up) */
@media (min-width: 768px) {
    .content-sequence.layout-auto .content-sequence__passage {
        flex: 1.1;
        min-width: 0;
        overflow-y: auto;
        max-height: calc(100vh - 250px);
        padding-right: 1rem;
    }

    .content-sequence.layout-auto .content-sequence__questions {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        max-height: calc(100vh - 250px);
        padding-left: 1rem;
        border-left: 1px solid #dee2e6;
    }
}

/* Mobile/Tablet: Vertical layout (below 768px) */
@media (max-width: 767px) {
    .content-sequence.layout-auto {
        flex-direction: column;
    }

    .content-sequence.layout-auto .content-sequence__passage {
        width: 100%;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid #dee2e6;
    }

    .content-sequence.layout-auto .content-sequence__questions {
        width: 100%;
        border-left: none;
        padding-left: 0;
    }
}

/* Question Blocks */
.content-sequence__question-block {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.content-sequence__question-block:last-child {
    margin-bottom: 0;
}

/* Exercise Block Styling */
.exercise-block__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #212529;
}

.exercise-block__instructions {
    margin-bottom: 1.5rem;
}

/* Passage Styling Enhancements */
.content-sequence__passage h1,
.content-sequence__passage h2,
.content-sequence__passage h3 {
    color: #212529;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.content-sequence__passage p {
    line-height: 1.8;
    margin-bottom: 1rem;
}

.content-sequence__passage blockquote {
    border-left: 4px solid #0d6efd;
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #6c757d;
}

/* Empty State */
.content-sequence__empty-state {
    text-align: center;
    padding: 3rem;
    color: #adb5bd;
}

/* Print-Friendly Styles */
@media print {
    .content-sequence {
        flex-direction: column;
        max-width: 100%;
        padding: 0;
        gap: 1rem;
    }

    .content-sequence__passage,
    .content-sequence__questions {
        max-height: none;
        overflow: visible;
        border: none;
        padding: 0;
    }

    .content-sequence__question-block {
        page-break-inside: avoid;
        border: 1px solid #000;
    }
}

/* Accessibility: Focus States */
.content-sequence__passage:focus-within,
.content-sequence__questions:focus-within {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .content-sequence__question-block {
        border: 2px solid #000;
    }

    .content-sequence.layout-auto .content-sequence__questions,
    .content-sequence.layout-split .content-sequence__questions {
        border-left: 2px solid #000;
    }
}

/* ===================================================================
   Teacher Dashboard - Progress Status Indicators
   =================================================================== */

/* Status color classes for progress bars and badges */
.status-not-started {
    background-color: #dc3545 !important; /* Bootstrap danger red */
    color: white;
}

.status-in-progress {
    background-color: #ffc107 !important; /* Bootstrap warning yellow */
    color: #212529; /* Dark text for better contrast on yellow */
}

.status-completed {
    /* TD-194: Bootstrap's #28a745 with white text was 3.13:1 — below WCAG 1.4.3 AA.
       Darkened to standard "dark success" #1e7e34 for 5.14:1. */
    background-color: #1e7e34 !important;
    color: white;
}

/* Badge styles for status indicators */
.badge.status-not-started,
.badge.status-in-progress,
.badge.status-completed {
    font-weight: 600;
    padding: 0.35em 0.65em;
    font-size: 0.875rem;
}

/* Progress bar specific styles */
.progress-bar.status-not-started,
.progress-bar.status-in-progress,
.progress-bar.status-completed {
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure progress bars have minimum visibility */
.progress {
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

/* High contrast mode support for status indicators */
@media (prefers-contrast: high) {
    .status-not-started {
        border: 2px solid #000;
    }

    .status-in-progress {
        border: 2px solid #000;
    }

    .status-completed {
        border: 2px solid #000;
    }
}

/* Accessibility: Ensure sufficient contrast for color-blind users */
@media (prefers-color-scheme: dark) {
    .status-not-started {
        background-color: #e74c3c !important;
    }

    .status-in-progress {
        background-color: #f39c12 !important;
        color: white;
    }

    .status-completed {
        background-color: #27ae60 !important;
    }
}

/* Feedback sections - layered display */
.feedback-section {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 0 0.25rem 0.25rem 0;
}

.feedback-choice {
    border-left-color: #6c757d;  /* gray - neutral, specific to option */
}

.feedback-correct {
    border-left-color: #198754;  /* green - success */
}

.feedback-incorrect {
    border-left-color: #0d6efd;  /* blue - informational, not punitive */
}

/* ===================================================================
   SignpostItem Layout Styles (v1.31.0 - ADR-010 Session 7)
   =================================================================== */

.signpost {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--bs-body-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.signpost-header {
    margin-bottom: 1.5rem;
}

.signpost-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bs-primary-bg-subtle, #e3f2fd);
    /* TD-194: #1976d2 on #e3f2fd was 4.03:1 — below WCAG 1.4.3 AA (4.5:1).
       Darkened to #1565c0 for 5.03:1. Also consolidates with .badge-apply. */
    color: var(--bs-primary, #1565c0);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.signpost-badge.signpost-complete {
    background: var(--bs-success-bg-subtle, #e8f5e9);
    /* TD-194: #388e3c on #e8f5e9 was 3.66:1 — below WCAG 1.4.3 AA (4.5:1).
       Darkened to #2e7d32 for 4.56:1. Also consolidates with .badge-understand. */
    color: var(--bs-success, #2e7d32);
}

.signpost-overview,
.signpost-custom {
    text-align: left;
    margin: 1rem 0;
    color: var(--bs-secondary-color, #666);
    line-height: 1.6;
}

.signpost-objectives {
    text-align: left;
    margin: 1.5rem 0;
}

.signpost-objectives h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.signpost-objectives ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.signpost-objectives li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.signpost-objectives li::before {
    content: "\2726"; /* Four-pointed star (fallback for browsers without content alt-text) */
    content: "\2726" / ""; /* TD-243 a11y: empty alt text keeps the star decorative so screen readers skip it */
    position: absolute;
    left: 0;
    color: var(--bs-primary, #1976d2);
}

.signpost-achievements li::before {
    content: "\2726"; /* Four-pointed star — achieved (fallback) */
    content: "\2726" / ""; /* TD-243 a11y: decorative, hidden from screen readers */
    color: var(--bs-success, #198754);
}

.objective-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    font-weight: 500;
}

/* TD-194: #e65100 on #fff3e0 was 3.46:1 — failed WCAG 1.4.3 AA (4.5:1).
   Darkened to #c44400 for 4.59:1. */
.badge-recall { background: #fff3e0; color: #c44400; }
.badge-understand { background: #e8f5e9; color: #2e7d32; }
.badge-apply { background: #e3f2fd; color: #1565c0; }
.badge-analyze { background: #f3e5f5; color: #7b1fa2; }

.signpost-achievements {
    text-align: left;
    margin: 1.5rem 0;
}

.signpost-achievements h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.objective-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.objective-row.achieved i {
    color: var(--bs-success, #198754);
    margin-top: 0.2rem;
}

.signpost-stats {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    margin: 1rem 0;
}

.signpost-stats .separator {
    margin: 0 0.5rem;
}

.signpost-tags {
    margin: 1rem 0;
}

.tag-chip {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin: 0.125rem;
    color: white;
}

.signpost-preview {
    text-align: left;
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 8px;
}

.signpost-preview h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

.signpost-preview p {
    margin: 0.5rem 0 0;
    color: var(--bs-secondary-color, #666);
    font-size: 0.9rem;
}

.signpost-continue {
    margin-top: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .signpost {
        margin: 1rem;
        padding: 1.5rem;
    }
}

/* ── FF-008: Bilingual support tags ── */
.bilingual-support {
    color: #4a5568;
    background-color: #f0f4f8;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.92em;
    line-height: inherit;
}

/* ── FF-167: the restricted inline profile ─────────────────────────────────────
   Authored fields may now carry *i* / **b** / ^sup^ / ~sub~ (or their HTML twins),
   which puts two shapes on screen that were not possible before. */

/* A bilingual gloss can now sit INSIDE emphasis — "the <em>cat [ES: el gato]</em>".
   The chip keeps its own upright, normal-weight look so it still reads as a gloss
   rather than as more of the emphasised sentence, and stays legible when the
   surrounding run is bold, italic, or both. */
.question-prompt em .bilingual-support,
.question-prompt strong .bilingual-support,
.feedback-text em .bilingual-support,
.feedback-text strong .bilingual-support,
.form-check-label em .bilingual-support,
.form-check-label strong .bilingual-support,
.cg-entry em .bilingual-support,
.cg-entry strong .bilingual-support {
    font-style: normal;
    font-weight: normal;
}

/* Superscript and subscript raise and lower the line box, which in a tight option
   row or a compact prompt pushes the neighbouring lines apart. position: relative
   plus a zero line-height takes them out of that calculation, so H~2~O and x^2^
   render at the right height without changing the spacing of the paragraph. */
.question-prompt sub,
.question-prompt sup,
.form-check-label sub,
.form-check-label sup,
.feedback-text sub,
.feedback-text sup,
.cg-entry sub,
.cg-entry sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-size: 0.75em;
}

.question-prompt sup, .form-check-label sup, .feedback-text sup, .cg-entry sup { top: -0.5em; }
.question-prompt sub, .form-check-label sub, .feedback-text sub, .cg-entry sub { bottom: -0.25em; }

/* FF-008 / Q5: Replaces <em> on feedback — no italic for dyslexia accessibility */
.feedback-text {
    font-style: normal;
}
/* ── Tier 1 HTML link support ── */
/* Default anchor styling inside authored content blocks (ContentItem / SignpostItem).
   Kept subtle so it doesn't fight the course's visual theme.
   :not(.btn):not(.cg-link-button) so Bootstrap buttons and our CTA class
   inside .card-body (e.g. /Admin pages) keep their original colors. */
.card-body a:not(.btn):not(.cg-link-button),
.signpost-custom a:not(.btn):not(.cg-link-button),
.signpost-overview a:not(.btn):not(.cg-link-button),
.content-sequence__passage a:not(.btn):not(.cg-link-button) {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.card-body a:not(.btn):not(.cg-link-button):hover,
.signpost-custom a:not(.btn):not(.cg-link-button):hover,
.signpost-overview a:not(.btn):not(.cg-link-button):hover,
.content-sequence__passage a:not(.btn):not(.cg-link-button):hover {
    color: #1e40af;
    text-decoration-thickness: 2px;
}

/* Link-as-button: CTA style for marketing/landing-page links.
   Emitted by the Editor when the author picks "Button" in the link dialog. */
.cg-link-button {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    margin: 0.25rem 0;
    background-color: #2563eb;
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 6px;
    border: 1px solid #2563eb;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cg-link-button:hover,
.cg-link-button:focus {
    background-color: #1e40af;
    border-color: #1e40af;
    color: #ffffff !important;
    text-decoration: none !important;
}
.cg-link-button:focus-visible {
    /* TD-194: #93c5fd on white was 1.80:1 — failed WCAG 1.4.11 AA (3:1). Focus
       rings are keyboard-nav affordances — high contrast is the point.
       Darkened to #4a7eb8 for 4.23:1. */
    outline: 3px solid #4a7eb8;
    outline-offset: 2px;
}

/* FF-106: speaker icons emitted by glossary tooling and authored content.
   Default rendering keeps the link compact and inline so it fits inside table
   cells / sentences ("Come si dice...? 🔊"). The audio-link.js progressive
   enhancement intercepts clicks and plays in-place; --playing toggles a subtle
   visual state so the user sees feedback without leaving the page. */
.cg-audio-link {
    display: inline-block;
    text-decoration: none !important;
    padding: 0 0.15rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
    user-select: none;
}
.cg-audio-link:hover,
.cg-audio-link:focus-visible {
    /* Design-retouches: the scale() grow-on-hover is gone — a control that
       grows is a moving target (brief). Flashcard audio is restyled as a
       36px circle in lc-practice.css; inline usages keep their compact look. */
    text-decoration: none !important;
}
.cg-audio-link:focus-visible {
    /* TD-194: same focus-ring fix as .cg-link-button — #93c5fd → #4a7eb8 (4.23:1). */
    outline: 2px solid #4a7eb8;
    outline-offset: 2px;
    border-radius: 3px;
}
/* --playing is now a STATIC state (no transform, no infinite pulse — the
   forbidden looping animation and its @keyframes cg-audio-pulse are deleted).
   Flashcards get a richer static treatment in lc-practice.css. */
.cg-audio-link--playing {
    opacity: 0.85;
}
/* TD-220: transient cue when a clip can't be played (missing/misrouted file). Replaces the
   old destructive navigate-to-broken-URL fallback in audio-link.js — a quick shake + dim,
   then the class is removed. No navigation, no layout shift. */
.cg-audio-link--error {
    animation: cg-audio-shake 0.4s ease-in-out;
    opacity: 0.45;
}
@keyframes cg-audio-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .cg-audio-link--error { animation: none; }
}

/* ── Authored-content image + block spacing (Marta feedback 2026-04-14) ── */
/* Applies inside the four surfaces that render ContentItem.html / SignpostItem.customHtml. */

/* Baseline responsive image behavior — caps overflow even when no width class is set.
   Every <img> inside authored content becomes a block with vertical breathing room. */
.card-body img,
.signpost-custom img,
.signpost-overview img,
.content-sequence__passage img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

/* Width presets — emitted by ImageBlock.ToHtml() as class="cg-img-{sm|md|lg|full}".
   Industry convention (Notion, Substack, Ghost): class-based, not inline pixel widths.
   sm/md/lg use width: to allocate the slot regardless of intrinsic source size
   (June auto-resize will produce pre-sized files and this can move back to max-width).
   Non-full widths are centered so small images don't look abandoned on the left. */
.card-body img.cg-img-sm,
.signpost-custom img.cg-img-sm,
.signpost-overview img.cg-img-sm,
.content-sequence__passage img.cg-img-sm { width: 25% !important; max-width: 25% !important; }

.card-body img.cg-img-md,
.signpost-custom img.cg-img-md,
.signpost-overview img.cg-img-md,
.content-sequence__passage img.cg-img-md { width: 50% !important; max-width: 50% !important; }

.card-body img.cg-img-lg,
.signpost-custom img.cg-img-lg,
.signpost-overview img.cg-img-lg,
.content-sequence__passage img.cg-img-lg { width: 75% !important; max-width: 75% !important; }

.card-body img.cg-img-full,
.signpost-custom img.cg-img-full,
.signpost-overview img.cg-img-full,
.content-sequence__passage img.cg-img-full { max-width: 100%; }

/* Block-level vertical rhythm inside authored content.
   Prevents the "text runs straight into image" pattern Marta hit. */
.card-body > * + *,
.signpost-custom > * + *,
.signpost-overview > * + *,
.content-sequence__passage > * + * {
    margin-top: 1rem;
}

/* Authored tables get their own spacing + sensible default borders.
   TableBlock emits inline border styles when the author sets them, but
   legacy/imported tables (e.g. class="word-sequences" with no inline styles)
   still need to look like tables in the Runner. The sanitizer's CSS property
   allowlist preserves any inline borders authors add on top. */
.card-body table,
.signpost-custom table,
.signpost-overview table,
.content-sequence__passage table {
    margin: 1rem 0;
    border-collapse: collapse;
}

/* TD-194: #ddd table borders on white were 1.36:1 — failed WCAG 1.4.11 AA (3:1).
   Darkened to #888 for 3.54:1. Tables now have visibly bounded cells. */
.card-body table th,
.card-body table td,
.signpost-custom table th,
.signpost-custom table td,
.signpost-overview table th,
.signpost-overview table td,
.content-sequence__passage table th,
.content-sequence__passage table td {
    border: 1px solid #888;
    padding: 6px 10px;
    vertical-align: top;
}

.card-body table th,
.signpost-custom table th,
.signpost-overview table th,
.content-sequence__passage table th {
    background: #f5f5f5;
    text-align: left;
}