:root {
    --lc-blue: #006BB6;
    --lc-orange: #F58426;
    --lc-gray: #bec0c2;
    --lc-navy: #0B2545;
    --lc-green: #2e8540;
    --lc-purple: #7c4fe0;
    --lc-red: #e0435a;

    --lc-text: #1c2b39;
    --lc-text-secondary: #4b5b68;
    --lc-text-muted: #7c8a96;
    --lc-border: #eceff1;
    --lc-bg-cream: #fff6ee;
    --lc-bg-subtle: #f2f5f7;
    --lc-bg-navy-deep: #081b30;

    --lc-space-xs: 4px;
    --lc-space-sm: 8px;
    --lc-space-md: 16px;
    --lc-space-lg: 24px;
    --lc-space-xl: 40px;

    --lc-radius: 8px;
    --lc-radius-lg: 16px;
    --lc-shadow-card: 0 20px 40px -24px rgba(11, 37, 69, 0.25);
}

.lc-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lc-space-md);
}

.lc-block-card {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
    padding: var(--lc-space-md) var(--lc-space-lg);
}

.lc-block-card:has(.lc-pill--locked) {
    opacity: 0.6;
}

.lc-block-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lc-space-md);
    font-weight: 600;
}

.lc-block-card__head a {
    color: var(--lc-navy);
    text-decoration: none;
}

.lc-block-card__head a:hover {
    color: var(--lc-blue);
}

.lc-block-breadcrumb {
    font-size: 0.85rem;
    color: var(--lc-text-muted);
    margin: 0 0 var(--lc-space-md);
}

.lc-block-breadcrumb a {
    color: var(--lc-blue);
    text-decoration: none;
}

.lc-block-breadcrumb a:hover {
    text-decoration: underline;
}

.lc-block-hero {
    display: flex;
    gap: var(--lc-space-lg);
    align-items: center;
    background: var(--lc-navy);
    color: #fff;
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

.lc-block-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: var(--lc-radius-lg);
    background: rgba(255, 255, 255, 0.1);
}

.lc-block-hero__icon svg {
    width: 44px;
    height: 44px;
}

.lc-block-hero__body {
    min-width: 0;
}

.lc-block-hero .lc-pill {
    margin-bottom: var(--lc-space-sm);
}

.lc-block-hero h1 {
    margin: 0 0 var(--lc-space-xs);
    font-size: 1.5rem;
}

.lc-block-hero__description {
    margin: 0 0 var(--lc-space-md);
    color: rgba(255, 255, 255, 0.75);
    max-width: 60ch;
}

.lc-block__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--lc-space-lg);
    align-items: start;
}

.lc-block__section-title {
    margin: 0 0 4px;
    color: var(--lc-navy);
}

.lc-block__section-subtitle {
    margin: 0 0 var(--lc-space-md);
    color: var(--lc-text-muted);
    font-size: 0.9rem;
}

.lc-block__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-md);
}

.lc-block-progress-widget {
    text-align: center;
}

.lc-block-progress-widget .lc-readiness__ring {
    margin: var(--lc-space-sm) auto;
}

.lc-block-progress-widget__status {
    font-weight: 700;
    color: var(--lc-navy);
    margin: 0 0 var(--lc-space-sm);
}

.lc-block-progress-widget__stat {
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
    margin: 0;
}

.lc-block-next-widget__locked {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--lc-space-sm) 0 0;
    font-size: 0.85rem;
    color: var(--lc-text-muted);
}

.lc-block-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    margin-top: var(--lc-space-lg);
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-md) var(--lc-space-lg);
}

.lc-block-nav__tip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--lc-text-muted);
    text-align: center;
}

.lc-btn--disabled {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 860px) {
    .lc-block__layout {
        grid-template-columns: 1fr;
    }

    .lc-block-hero {
        flex-direction: column;
        text-align: center;
    }

    .lc-block-nav {
        flex-direction: column;
    }
}

.lc-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--lc-space-md);
    align-items: start;
}

.lc-activity-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
}

.lc-activity-card__head {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
}

.lc-activity-card__head h3 {
    margin: 0;
    font-size: 1rem;
}

.lc-activity-card__head-text {
    flex: 1;
    min-width: 0;
}

.lc-activity-card__meta-text {
    display: block;
    font-size: 0.78rem;
    color: var(--lc-text-muted);
    margin-top: 2px;
}

.lc-activity-card__description {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
}

.lc-activity-card__progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-activity-card__progress-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lc-text-secondary);
}

.lc-activity-card__empty {
    margin-top: auto;
    padding-top: var(--lc-space-sm);
    color: var(--lc-text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.lc-block__content-item + .lc-block__content-item {
    margin-top: var(--lc-space-lg);
    padding-top: var(--lc-space-lg);
    border-top: 1px solid var(--lc-border);
}

.lc-block__content-item h4 {
    margin: 0 0 4px;
}

.lc-block__content-item-done {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lc-green);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Card body/content stays collapsed by default — only the icon+title+meta
   "menu" row and this Continue button show until expanded. */
.lc-activity-card__details {
    margin-top: auto;
    padding-top: var(--lc-space-sm);
}

.lc-activity-card__details > summary {
    display: flex;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    list-style: none;
}

.lc-activity-card__details > summary::-webkit-details-marker {
    display: none;
}

.lc-activity-card__details-body {
    margin-top: var(--lc-space-md);
}

.lc-activity-card__check {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lc-green);
    color: #fff;
    font-size: 0.75rem;
}

/* Shown in the same corner spot as the checkmark while a card isn't fully
   completed yet — a small ring filled to the real completion percent
   (never a fabricated value; see LC_Shortcodes::percent_of()). */
.lc-activity-card__progress-ring {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--lc-activity-color, var(--lc-blue)) calc(var(--percent, 0) * 1%), var(--lc-border) 0);
}

.lc-activity-card__progress-ring::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

/* "Not started yet" state — plain neutral outline, no color fill, so it
   reads as a distinct third state from the blue "in progress" ring. */
.lc-activity-card__progress-ring--empty {
    background: none;
    border: 2px solid var(--lc-border);
}

.lc-activity-card__progress-ring--empty::after {
    content: none;
}

.lc-activity-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-activity-card__icon svg {
    width: 18px;
    height: 18px;
}

.lc-activity-card__icon--lg {
    width: 68px;
    height: 68px;
}

.lc-activity-card__icon--lg svg {
    width: 36px;
    height: 36px;
}

.lc-activity-card__body {
    color: var(--lc-text-secondary);
}

.lc-form-errors {
    color: #c0392b;
}

.lc-register-page {
    padding: var(--lc-space-xl) 0;
}

.lc-register {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--lc-space-xl);
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
}

.lc-register__form-col h2 {
    margin: 0 0 var(--lc-space-xs);
    color: var(--lc-navy);
}

.lc-field {
    margin: var(--lc-space-md) 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lc-space-md);
}

.lc-field-row .lc-field {
    margin: var(--lc-space-md) 0 0;
}

.lc-input-group {
    position: relative;
    display: flex;
}

.lc-input-group .lc-input {
    flex: 1;
    padding-right: 40px;
}

.lc-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--lc-text-muted);
    padding: 4px;
}

.lc-checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--lc-space-md) 0;
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
}

.lc-checkbox-field input {
    margin-top: 3px;
}

.lc-register__login-link {
    text-align: center;
    margin: var(--lc-space-md) 0 0;
    font-size: 0.9rem;
    color: var(--lc-text-secondary);
}

.lc-register__globe {
    max-width: 200px;
    margin: 0 auto var(--lc-space-lg);
}

.lc-field label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--lc-navy);
}

.lc-input {
    padding: 10px 12px;
    border: 1px solid var(--lc-gray);
    border-radius: var(--lc-radius);
    font-size: 1rem;
    font-family: inherit;
}

.lc-input:focus {
    outline: 2px solid var(--lc-blue);
    outline-offset: 1px;
}

.lc-register__benefits h3 {
    color: var(--lc-navy);
    margin-top: 0;
}

.lc-register__benefits ul {
    list-style: none;
    padding: 0;
    margin: var(--lc-space-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-md);
}

.lc-register__benefits li {
    display: flex;
    gap: var(--lc-space-md);
    align-items: flex-start;
}

.lc-register__benefits li p {
    margin: 2px 0 0;
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .lc-register {
        grid-template-columns: 1fr;
    }

    .lc-field-row {
        grid-template-columns: 1fr;
    }
}

.lc-vocab-category {
    margin: 16px 0 4px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lc-gray);
}

.lc-vocab-list,
.lc-n400-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* N-400 has no student-clickable "done" control (unlike every other
   category) — only a tutor can mark it, so this is a passive status line. */
.lc-n400-tutor-status {
    margin: var(--lc-space-md) 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.lc-n400-tutor-status--pending {
    color: var(--lc-text-secondary);
}

.lc-n400-tutor-status--reviewed {
    color: var(--lc-green);
}

.lc-vocab-list li {
    padding: 2px 0;
}

.lc-civic-list {
    padding-left: 20px;
}

.lc-civic-list li,
.lc-n400-list li {
    margin-bottom: 14px;
}

.lc-civic-question {
    font-weight: 600;
    margin: 0 0 2px;
}

.lc-civic-question-es {
    color: var(--lc-gray);
    margin: 0 0 4px;
    font-style: italic;
}

.lc-flashcard-viewer {
    max-width: 640px;
    margin: 8px auto 0;
}

.lc-flashcard-viewer.lc-fc-maximized {
    position: fixed;
    inset: 0;
    z-index: 100000;
    max-width: none;
    margin: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

body.lc-fc-body-lock {
    overflow: hidden;
}

.lc-fc-stage {
    perspective: 1200px;
    margin-bottom: 12px;
}

/* No outer padding and no max-width cap here — the card's own frame is
   meant to BE the screen (edge to edge), not a smaller card centered on
   a blank backdrop. Only the hint/controls strip below it isn't covered. */
.lc-flashcard-viewer.lc-fc-maximized .lc-fc-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    min-height: 0;
}

.lc-flashcard-viewer.lc-fc-maximized .lc-fc-card {
    width: 100%;
    height: 100%;
    max-width: none;
}

.lc-flashcard-viewer.lc-fc-maximized .lc-fc-card-inner {
    width: 100%;
    height: 100%;
}

.lc-flashcard-viewer.lc-fc-maximized .lc-fc-face {
    font-size: 2.4rem;
    border-radius: 0;
}

.lc-flashcard-viewer.lc-fc-maximized .lc-fc-hint,
.lc-flashcard-viewer.lc-fc-maximized .lc-fc-controls {
    flex-shrink: 0;
    margin-left: 20px;
    margin-right: 20px;
}

.lc-flashcard-viewer.lc-fc-maximized .lc-fc-hint {
    margin-top: 0;
}

.lc-flashcard-viewer.lc-fc-maximized .lc-fc-controls {
    margin-bottom: 20px;
}

.lc-fc-card {
    position: relative;
    height: 220px;
    cursor: pointer;
    outline: none;
}

.lc-fc-card:focus-visible .lc-fc-face {
    box-shadow: 0 0 0 2px var(--lc-blue);
}

.lc-fc-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.lc-fc-card.is-flipped .lc-fc-card-inner {
    transform: rotateY(180deg);
}

/* A fixed height (not min-height) on .lc-fc-card, inherited here via
   inset:0, keeps every card in the deck the same size regardless of how
   much a given question's content needs — a card that needs more room
   scrolls internally (see .lc-fc-body) instead of growing, so flipping
   through the deck doesn't make the card visibly resize each time. */
.lc-fc-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background: #fff;
    border: 1px solid var(--lc-gray);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-size: 1.3rem;
    overflow: auto;
}

.lc-fc-face--back {
    transform: rotateY(180deg);
}

.lc-fc-answers {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lc-fc-answers--multi {
    list-style: disc;
    padding-left: 1.25em;
    text-align: left;
}

.lc-fc-answers--multi li {
    margin-bottom: 0.25em;
}

.lc-fc-empty {
    color: var(--lc-gray);
}

.lc-fc-hint {
    text-align: center;
    background: var(--lc-navy);
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.lc-fc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Used by render_flashcards_set_page() to put its "back"/"mark as
   practiced" actions inline with the deck's own shuffle/prev/next row
   instead of below it: two flex:1 side slots push the nav cluster to the
   true center, each side aligning its own content outward. */
.lc-fc-controls--split {
    justify-content: space-between;
}

.lc-fc-controls__nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-fc-controls__side {
    display: flex;
    align-items: center;
    flex: 1;
}

.lc-fc-controls__side:last-child {
    justify-content: flex-end;
}

.lc-fc-controls__side form {
    margin: 0;
}

.lc-fc-controls__side .lc-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* Writing Practice's per-card "Mark as studied" toggle — always visible
   (never disappears once studied, unlike the old block-level
   mark_practiced_control() button), just swaps to a solid-green "done"
   look so it still reads as a toggle you can click again to unmark. */
.lc-fc-mark-word-btn--studied {
    background: var(--lc-green);
    border-color: var(--lc-green);
    color: #fff;
}

.lc-fc-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--lc-gray);
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.lc-fc-btn:hover {
    background: #f2f5f7;
}

.lc-fc-counter {
    font-size: 0.9rem;
    color: var(--lc-navy);
    min-width: 52px;
    text-align: center;
}

/* Civics flashcards — the redesigned deck sourced live from the 128
   official questions. Wider than the plain-text decks (there's an
   illustration to fit) and each face is a full mini "card" with its own
   colored header, instead of the plain centered white face used by the
   legacy Writing/Reading/N-400 decks above. */
.lc-flashcard-viewer--civics,
.lc-flashcard-viewer--writing {
    max-width: 760px;
}

.lc-flashcard-viewer--civics .lc-fc-card,
.lc-flashcard-viewer--civics .lc-fc-card-inner,
.lc-flashcard-viewer--writing .lc-fc-card,
.lc-flashcard-viewer--writing .lc-fc-card-inner {
    height: 420px;
}

/* Writing cards hold far less content than civics' (up to 25 stacked
   answers) — a shorter fixed height matches the actual content instead of
   leaving empty space below it. Same specificity as the shared rule above
   but declared after it, so it wins for --writing without touching civics. */
.lc-flashcard-viewer--writing .lc-fc-card,
.lc-flashcard-viewer--writing .lc-fc-card-inner {
    height: 320px;
}

/* Fullscreen mode: fill the available height instead of keeping the
   normal-view fixed size — there's a whole viewport to use, and filling
   it gives the content enough room that the .lc-fc-body scroll fallback
   should rarely kick in. Higher specificity than the rule above (3
   classes vs 2) so it wins regardless of source order. */
.lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-card,
.lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-card-inner,
.lc-flashcard-viewer--writing.lc-fc-maximized .lc-fc-card,
.lc-flashcard-viewer--writing.lc-fc-maximized .lc-fc-card-inner {
    height: 100%;
}

.lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-face,
.lc-flashcard-viewer--writing.lc-fc-maximized .lc-fc-face {
    border-radius: 0;
}

/* align-items: stretch overrides the base .lc-fc-face rule's
   align-items: center (used for the legacy centered plain-text decks) —
   without it, .lc-fc-header/.lc-fc-body were never actually stretched to
   the face's full width by flex; .lc-fc-header only looked right because
   it forces its own width:100%, while .lc-fc-body had no such override
   and instead centered at whatever width it happened to hug its content
   to — the real cause of the image/text column never reaching full width.

   overflow WAS hidden here on the assumption that .lc-fc-content (a
   descendant, several flex levels down) always bounds itself exactly to
   this face's box and handles its own scrolling — but on real devices
   .lc-fc-content's flex-basis (a %, resolved against .lc-fc-body's own
   flex-computed size) can end up a few pixels taller than what actually
   fits, especially the front face's simpler structure (no
   .lc-fc-columns wrapper, unlike the back face — see the comment where
   that's introduced). When that happens, .lc-fc-content correctly reports
   no overflow of *its own* (scrollHeight === clientHeight, confirmed via
   direct inspection), so its own scrollbar is functionally a no-op — the
   actual missing content is being silently clipped by *this* rule's
   overflow:hidden a level up, with no way to reach it at all. That's the
   real cause of "front face can't be scrolled to see it in full" — every
   earlier attempt at fixing .lc-fc-content itself (dvh sizing, flex fill,
   forcing a compositing layer) never had a chance, because the clip never
   happened there to begin with. overflow-y: auto here is a safety net:
   .lc-fc-content still does its own scrolling in the normal case, and
   this only engages if that inner sizing is ever off, instead of
   silently eating the difference. */
.lc-flashcard-viewer--civics .lc-fc-face,
.lc-flashcard-viewer--writing .lc-fc-face {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    text-align: left;
    font-size: 1rem;
    overflow-y: auto;
    border-radius: var(--lc-radius-lg);
}

/* Writing Practice cards have no illustration at all, unlike civics —
   .lc-fc-content simply takes the full width instead of sharing the row
   with .lc-fc-image (which writingFrontHtml()/writingBackHtml() in
   lc-flashcards.js never emit). With no image and usually just 1-3 short
   rows of content, centering the group in the available space (rather
   than leaving it pinned top-left, per the base .lc-fc-content rule)
   avoids the sparse, mostly-empty look a short word/translation had. */
.lc-flashcard-viewer--writing .lc-fc-content {
    flex: 1 1 100%;
    justify-content: center;
    align-items: center;
}

/* Explicit per-element spacing instead of a uniform flex `gap` — the
   Ejemplo label needs more room from what's above it than from the
   sentence it's labeling right below, which a single gap value can't do. */
.lc-flashcard-viewer--writing .lc-fc-pill-row {
    margin-bottom: var(--lc-space-md);
}

.lc-flashcard-viewer--writing .lc-fc-translation-columns {
    margin-bottom: var(--lc-space-lg);
}

.lc-flashcard-viewer--writing .lc-fc-example-label {
    margin: var(--lc-space-lg) 0 6px;
}

.lc-flashcard-viewer--writing .lc-fc-answer-group {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Bigger than the civics 1.05rem — a writing card usually shows just one
   word/sentence at a time, so it can afford (and reads better) larger. */
.lc-flashcard-viewer--writing .lc-fc-lang-main {
    font-size: 2rem;
}

.lc-flashcard-viewer--writing .lc-fc-pron-text {
    font-size: 1.05rem;
}

.lc-flashcard-viewer--writing .lc-fc-audio-btn {
    width: 38px;
    height: 38px;
}

.lc-flashcard-viewer--writing .lc-fc-audio-btn svg {
    width: 20px;
    height: 20px;
}

/* The example sentence is secondary content next to the headline word
   above it, so it stays noticeably smaller than the 2rem .lc-fc-lang-main
   default. */
.lc-fc-translation-columns--example .lc-fc-lang-main {
    font-size: 1.15rem;
    font-weight: 600;
}

.lc-fc-translation-columns--example .lc-fc-pron-text {
    font-size: 0.85rem;
}

.lc-fc-translation-columns--example .lc-fc-audio-btn {
    width: 28px;
    height: 28px;
}

.lc-fc-translation-columns--example .lc-fc-audio-btn svg {
    width: 15px;
    height: 15px;
}

.lc-fc-example-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-text-secondary);
}

.lc-fc-lang-main strong {
    color: var(--lc-green);
}

/* Inside the ES example (already green by default, see the badge--es rule
   below), a green highlight wouldn't stand out — blue keeps it visible. */
.lc-fc-lang-badge--es + .lc-fc-lang-text .lc-fc-lang-main strong {
    color: var(--lc-blue);
}

.lc-fc-pill-row {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
}

.lc-fc-pill--category {
    background: rgba(46, 133, 64, 0.1);
    color: var(--lc-green);
}

/* Back face of a Writing Practice card: EN word on the left, ES
   translation on the right, instead of stacking them — shorter overall,
   which matters most on a mobile phone's fixed-height card (see
   .lc-flashcard-viewer--writing .lc-fc-card above). The whole pair centers
   as a group via the parent .lc-fc-content's align-items:center, but
   align-items:flex-start here keeps both columns' own content top-aligned
   with each other — center-aligning them made the (usually shorter) ES
   column land at an odd mid-height next to the EN column's pronunciation
   row, which read as misaligned rather than "centered". */
.lc-fc-translation-columns {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
}

.lc-fc-translation-col {
    min-width: 0;
    flex: 0 1 auto;
    padding: 0 var(--lc-space-lg);
}

.lc-fc-translation-col:first-child {
    padding-left: 0;
    border-right: 1px solid var(--lc-border);
}

.lc-fc-translation-col:last-child {
    padding-right: 0;
}

@media (max-width: 900px) {
    /* The fixed 320px card (see the shared civics/writing rule above) isn't
       always tall enough on a phone to fit the pill row + word columns +
       example columns without scrolling — a viewport-relative height fits
       the available screen instead, same idea as civics' own
       mobile-landscape height override. Kept modest (not e.g. 92vh) since
       writing cards' content is short enough that a taller card would just
       leave empty space below it, per direct testing. */
    .lc-flashcard-viewer--writing .lc-fc-card,
    .lc-flashcard-viewer--writing .lc-fc-card-inner {
        height: 68vh;
    }

    .lc-flashcard-viewer--writing .lc-fc-face {
        max-height: 68vh;
    }

    .lc-fc-translation-col {
        padding: 0 var(--lc-space-sm);
    }

    .lc-flashcard-viewer--writing .lc-fc-lang-main {
        font-size: 1.15rem;
    }

    .lc-flashcard-viewer--writing .lc-fc-pron-text {
        font-size: 0.78rem;
    }

    .lc-flashcard-viewer--writing .lc-fc-audio-btn {
        width: 26px;
        height: 26px;
    }

    .lc-flashcard-viewer--writing .lc-fc-audio-btn svg {
        width: 14px;
        height: 14px;
    }

    .lc-fc-translation-columns--example .lc-fc-lang-main {
        font-size: 0.85rem;
    }

    .lc-fc-translation-columns--example .lc-fc-pron-text {
        font-size: 0.68rem;
    }

    .lc-fc-translation-columns--example .lc-fc-audio-btn {
        width: 20px;
        height: 20px;
    }

    .lc-fc-translation-columns--example .lc-fc-audio-btn svg {
        width: 11px;
        height: 11px;
    }

    .lc-flashcard-viewer--writing .lc-fc-pill-row {
        margin-bottom: var(--lc-space-xs);
    }

    .lc-flashcard-viewer--writing .lc-fc-translation-columns {
        margin-bottom: var(--lc-space-sm);
    }

    .lc-flashcard-viewer--writing .lc-fc-example-label {
        margin: var(--lc-space-sm) 0 2px;
        font-size: 0.68rem;
    }

    /* The header and .lc-fc-content padding are otherwise fixed-size chrome
       that eats into the already-tight 68vh budget on a phone. */
    .lc-flashcard-viewer--writing .lc-fc-header {
        padding: 10px 16px;
    }

    .lc-flashcard-viewer--writing .lc-fc-header__icon {
        width: 26px;
        height: 26px;
    }

    .lc-flashcard-viewer--writing .lc-fc-header__icon svg {
        width: 15px;
        height: 15px;
    }

    .lc-flashcard-viewer--writing .lc-fc-header__title {
        font-size: 0.75rem;
    }

    .lc-flashcard-viewer--writing .lc-fc-content {
        padding: var(--lc-space-sm) var(--lc-space-md);
    }

    .lc-flashcard-viewer--writing .lc-fc-pill {
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    /* Same compact treatment as Civics' own landscape-mobile rules for the
       hint bar and footer controls (Writing/Reading's deck reuses this
       same is_writing=true card shape, including its Study page's back/
       mark-as-studied buttons and the deck's own prev/next/counter row) —
       chrome that was never shrunk here even though the card height above
       was already being squeezed to 68vh. */
    .lc-flashcard-viewer--writing .lc-fc-hint {
        padding: 4px;
        font-size: 0.7rem;
        margin-bottom: 6px;
    }

    .lc-flashcard-viewer--writing .lc-fc-controls {
        gap: 6px;
    }

    .lc-flashcard-viewer--writing .lc-fc-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .lc-flashcard-viewer--writing .lc-fc-counter {
        font-size: 0.7rem;
        min-width: 36px;
    }

    .lc-flashcard-viewer--writing .lc-fc-controls__side .lc-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
}

.lc-fc-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 14px 20px;
    background: var(--lc-navy);
    color: #fff;
    flex-shrink: 0;
    box-sizing: border-box;
}

.lc-fc-header--blue { background: var(--lc-blue); }
.lc-fc-header--green { background: var(--lc-green); }
.lc-fc-header--purple { background: var(--lc-purple); }
.lc-fc-header--orange { background: var(--lc-orange); }
.lc-fc-header--navy { background: var(--lc-navy); }

.lc-fc-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.lc-fc-header__icon svg {
    width: 20px;
    height: 20px;
}

.lc-fc-header__title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: 1;
}

.lc-fc-header__counter {
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Plain flexbox with a fixed flex-basis on each child (not width:%, not
   grid fr tracks, not absolute positioning — all three collapsed the
   columns unpredictably in real testing). flex-basis is resolved
   directly against .lc-fc-body's own main-size by the flex algorithm
   itself, and flex-grow/shrink:0 locks each column at that size no
   matter what the content is or how the card got swapped in. */
.lc-fc-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* This element's overflow-y:auto has been correct the whole time — the
   browser was always recognizing the overflow (that's what drew the
   scrollbar thumb seen in testing), but on at least one real Android
   Chrome the touch-drag gesture itself never actually moved it. That's a
   known Chromium bug class: an `overflow:auto` element nested inside an
   ancestor using 3D transforms (.lc-fc-card-inner's
   `transform-style: preserve-3d`, used for the card's flip animation, plus
   .lc-fc-face's `backface-visibility: hidden`) can fail to receive touch
   scroll input even though hit-testing/painting still works — the fix is
   forcing this element onto its own compositing layer, separate from that
   3D context, via a (visually inert) 3D transform of its own. */
.lc-fc-content {
    flex: 0 0 66.6667%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: var(--lc-space-md) 20px;
    overflow-y: auto;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}

.lc-fc-pill {
    display: inline-flex;
    align-self: flex-start;
    background: rgba(0, 107, 182, 0.08);
    color: var(--lc-navy);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.lc-fc-lang-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.lc-fc-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}

.lc-fc-lang-badge--en { background: var(--lc-blue); }
.lc-fc-lang-badge--es { background: var(--lc-green); }

.lc-fc-lang-text {
    flex: 1;
    min-width: 0;
}

.lc-fc-lang-main {
    margin: 0;
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 1.05rem;
    line-height: 1.35;
}

.lc-fc-lang-badge--es + .lc-fc-lang-text .lc-fc-lang-main {
    color: var(--lc-green);
}

.lc-fc-pron-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.lc-fc-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.lc-fc-audio-btn:hover {
    opacity: 0.85;
}

.lc-fc-pron-text {
    font-size: 0.85rem;
    color: var(--lc-blue);
}

/* The ES translation, shown as a sub-item under the EN text + pronunciation
   rather than its own peer row — same indent as .lc-fc-pron-row above it. */
.lc-fc-lang-sub {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    color: var(--lc-green);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

.lc-fc-lang-sub .lc-fc-lang-badge {
    margin-top: 1px;
}

/* Wraps one EN(+ES sub-item) entry — the border-bottom separates one
   answer from the next (replacing a standalone divider element), and
   break-inside:avoid keeps an answer intact instead of splitting across
   the two mobile-landscape columns (see .lc-fc-content there). */
.lc-fc-answer-group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--lc-border);
}

.lc-fc-answer-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Shown instead of the full answer list when the student has chosen one
   answer to focus study on (see .lc-fc-extra-answers) — a plain text
   button, not a pill, so it reads as "more content below" rather than an
   action to confirm. */
.lc-fc-toggle-answers {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 12px;
    color: var(--lc-blue);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.lc-fc-toggle-answers:hover {
    text-decoration: underline;
}

.lc-fc-extra-answers[hidden] {
    display: none;
}

.lc-fc-image {
    flex: 0 0 33.3333%;
    overflow: hidden;
}

.lc-fc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lc-fc-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-fc-image--placeholder svg {
    width: 48px;
    height: 48px;
    color: #fff;
    opacity: 0.85;
}

.lc-fc-image--placeholder.lc-fc-image--blue { background: var(--lc-blue); }
.lc-fc-image--placeholder.lc-fc-image--green { background: var(--lc-green); }
.lc-fc-image--placeholder.lc-fc-image--purple { background: var(--lc-purple); }
.lc-fc-image--placeholder.lc-fc-image--orange { background: var(--lc-orange); }

.lc-flashcard-viewer--civics .lc-fc-controls,
.lc-flashcard-viewer--writing .lc-fc-controls {
    gap: 8px;
}

.lc-flashcard-viewer--civics .lc-fc-btn,
.lc-flashcard-viewer--writing .lc-fc-btn {
    border-radius: 999px;
}

.lc-fc-rotate-prompt {
    display: none;
}

/* Civics deck on a phone: a portrait screen doesn't have room to keep the
   EN/ES bands, pronunciation and illustration on one card without either
   shrinking everything unreadably small or requiring a scroll the design
   deliberately avoids — so instead we ask for landscape, where the
   2-column layout below comfortably fits at a fixed size.

   The `.lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-stage` variants
   below are NOT redundant with the plain `--civics .lc-fc-stage` selector
   just above them — a dedicated "Study now" flashcard page opens
   auto-fullscreen (adds .lc-fc-maximized on load), and the base rule
   `.lc-flashcard-viewer.lc-fc-maximized .lc-fc-stage { display: flex; }`
   elsewhere in this file has 3 classes of specificity, same as a plain
   `--civics .lc-fc-stage` selector's 2 classes losing outright — so on
   those pages the rotate-prompt gate never fired at all: the raw card
   rendered squeezed into a portrait viewport instead, which is also why
   the front face's scroll broke (it was never designed for that layout).
   These compound selectors match the maximized rule's own 3-class
   specificity and, declared after it in the file, win the tie. */
@media (max-width: 900px) and (orientation: portrait) {
    .lc-flashcard-viewer--civics .lc-fc-stage,
    .lc-flashcard-viewer--civics .lc-fc-hint,
    .lc-flashcard-viewer--civics .lc-fc-controls,
    .lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-stage,
    .lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-hint,
    .lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-controls {
        display: none;
    }

    .lc-flashcard-viewer--civics .lc-fc-rotate-prompt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        padding: 48px 24px;
        background: var(--lc-navy);
        color: #fff;
        border-radius: var(--lc-radius-lg);
    }

    .lc-fc-rotate-prompt span {
        font-size: 2rem;
        line-height: 1;
    }

    .lc-fc-rotate-prompt p {
        margin: 0;
        font-size: 0.95rem;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .lc-flashcard-viewer--civics {
        max-width: 100%;
    }

    /* A shorter fixed height than the desktop 420px, for the non-maximized
       inline case (a civics deck embedded in an activity card — see
       render_flashcards_activity(), the one caller of
       render_flashcard_deck_markup() that doesn't pass auto_fullscreen) —
       the 2-column layout below exists specifically to keep every card's
       content short enough to fit a landscape phone viewport there.

       92vh is sized against the *largest* possible viewport on iOS Safari
       (as if the address bar / tab strip were already hidden), not the
       actually-visible one — dvh tracks the real visible viewport instead
       (declared after vh so it overrides where supported, kept as a
       fallback where it isn't). Still not the actual fix for the
       maximized "Study now" page below, though — see that rule's own
       comment for why. */
    .lc-flashcard-viewer--civics .lc-fc-card,
    .lc-flashcard-viewer--civics .lc-fc-card-inner {
        height: 92vh;
        height: 92dvh;
    }

    .lc-flashcard-viewer--civics .lc-fc-face {
        max-height: 92vh;
        max-height: 92dvh;
    }

    /* The maximized "Study now" page (.lc-fc-maximized) is a fixed,
       inset:0 box, laid out as a flex column where .lc-fc-stage is the
       only flex:1 child and .lc-fc-hint/.lc-fc-controls are flex-shrink:0
       — so .lc-fc-stage's real height is ALREADY exactly "whatever's left
       after hint+controls", worked out by the browser's flex algorithm,
       with zero guessing. No vh/dvh number can match that reliably (any
       fixed percentage is either too tall — clipping under the hint bar,
       which is what was actually happening — or leaves dead space), so
       this replaces the plain-vh/dvh sizing above with height:100%,
       filling the flex-computed space exactly. 3 classes of specificity
       (civics + maximized + the target element) beats the plain 2-class
       rule above regardless of source order. */
    .lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-card,
    .lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-card-inner {
        height: 100%;
    }

    .lc-flashcard-viewer--civics.lc-fc-maximized .lc-fc-face {
        max-height: 100%;
    }

    .lc-flashcard-viewer--civics .lc-fc-image {
        display: none;
    }

    /* No image column here, so the text reclaims the full width. */
    .lc-flashcard-viewer--civics .lc-fc-content {
        flex: 0 0 100%;
    }

    /* .lc-fc-columns (not .lc-fc-content, which keeps its own
       overflow-y:auto scroll fallback from the base rule) is what gets
       column-count — combining column-count and overflow:auto on the
       *same* element makes browsers ignore column-count and render one
       long scrolling column instead of balancing across two. Splitting
       them onto separate elements gets both: 2 columns when the content
       fits, and a scrollbar on .lc-fc-content as a fallback for the rare
       case it doesn't. Each .lc-fc-answer-group avoids being split
       across the two columns. */
    .lc-flashcard-viewer--civics .lc-fc-columns {
        column-count: 2;
        column-gap: var(--lc-space-lg);
    }

    /* Touch-scroll not reliably reaching this content on at least one
       real device (confirmed the scroll mechanism itself works fine when
       forced — this isn't a fallback for that) means the safest fix is
       for the content to never need to scroll in the first place on a
       landscape phone: tighter padding/margins and smaller type across
       the front face's pill, question, and pronunciation row buys back
       the vertical room a long civics question needs. */
    .lc-flashcard-viewer--civics .lc-fc-content {
        padding: 10px 16px;
    }

    .lc-flashcard-viewer--civics .lc-fc-pill {
        font-size: 0.65rem;
        padding: 2px 8px;
        margin-bottom: 4px;
    }

    .lc-flashcard-viewer--civics .lc-fc-answer-group {
        padding-bottom: 4px;
        margin-bottom: 4px;
        border-bottom: none;
    }

    .lc-flashcard-viewer--civics .lc-fc-lang-main {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .lc-flashcard-viewer--civics .lc-fc-pron-row {
        margin-top: 3px;
    }

    .lc-flashcard-viewer--civics .lc-fc-pron-text {
        font-size: 0.7rem;
    }

    .lc-flashcard-viewer--civics .lc-fc-audio-btn {
        width: 22px;
        height: 22px;
    }

    .lc-flashcard-viewer--civics .lc-fc-lang-sub {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    /* The blue header bar, the "Click the card to flip it" hint, and the
       nav/back/mark-as-practiced footer are chrome around the actual
       question — on a short landscape phone they were eating enough
       height on their own to still squeeze out the card even after
       shrinking the question content above. Same idea as the writing
       deck's own mobile header rule (.lc-flashcard-viewer--writing
       .lc-fc-header etc.), which civics never had a landscape-specific
       version of until now. */
    .lc-flashcard-viewer--civics .lc-fc-header {
        padding: 8px 14px;
    }

    .lc-flashcard-viewer--civics .lc-fc-header__icon {
        width: 24px;
        height: 24px;
    }

    .lc-flashcard-viewer--civics .lc-fc-header__icon svg {
        width: 14px;
        height: 14px;
    }

    .lc-flashcard-viewer--civics .lc-fc-header__title {
        font-size: 0.7rem;
    }

    .lc-flashcard-viewer--civics .lc-fc-header__counter {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    .lc-flashcard-viewer--civics .lc-fc-hint {
        padding: 4px;
        font-size: 0.7rem;
        margin-bottom: 6px;
    }

    .lc-flashcard-viewer--civics .lc-fc-controls {
        gap: 6px;
    }

    .lc-flashcard-viewer--civics .lc-fc-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .lc-flashcard-viewer--civics .lc-fc-counter {
        font-size: 0.7rem;
        min-width: 36px;
    }

    .lc-flashcard-viewer--civics .lc-category-nav__back {
        font-size: 0.7rem;
    }

    .lc-flashcard-viewer--civics .lc-fc-controls__side .lc-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
}

.lc-grades-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lc-grades-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--lc-gray);
}

.lc-grade-date {
    color: var(--lc-gray);
    font-size: 0.85em;
    margin-left: 8px;
}

.lc-grade-comments {
    margin: 4px 0 0;
    color: #4b5b68;
}

.lc-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    background: var(--lc-orange);
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

/* My Course page */

.lc-my-course__header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

/* The title/subtitle block — given a flexible basis instead of just its
   natural content width, so the cards on the right (.lc-my-course__side)
   get a real, predictable share of the row instead of being squeezed into
   leftover space. */
.lc-my-course__header > div:first-child {
    flex: 1 1 280px;
    min-width: 0;
}

.lc-my-course__header h2 {
    margin: 0 0 4px;
    color: var(--lc-navy);
}

.lc-my-course__header p {
    font-size: 0.9rem;
    color: var(--lc-text-secondary);
    max-width: 46ch;
}

.lc-info-banner {
    display: inline-flex;
    align-items: center;
    gap: var(--lc-space-xs);
    background: rgba(0, 107, 182, 0.06);
    border: 1px solid rgba(0, 107, 182, 0.15);
    color: var(--lc-navy);
    border-radius: var(--lc-radius);
    padding: 6px var(--lc-space-sm);
    font-size: 0.76rem;
    line-height: 1.3;
    margin-top: var(--lc-space-sm);
}

.lc-info-banner__icon {
    color: var(--lc-blue);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* LC_Shortcodes::render_purchase_required_notice() — one button per
   configured Stripe Price (Settings → Stripe), each its own tiny form
   since each posts a different "type" to admin-post.php. */
.lc-purchase-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-sm);
    margin-top: var(--lc-space-md);
}

.lc-purchase-options__form {
    margin: 0;
}

/* LC_Shortcodes::render_buy_modules_page() — per-unit status text next to
   each row, in the same slot render_course()'s __status normally shows a
   percentage in. */
.lc-buy-modules__owned {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lc-green);
}

.lc-buy-modules__locked {
    font-size: 0.72rem;
    color: var(--lc-text-muted);
}

.lc-buy-modules__header {
    margin-bottom: var(--lc-space-md);
}

.lc-my-course__side {
    display: flex;
    flex: 2 1 340px;
    flex-wrap: wrap;
    gap: var(--lc-space-md);
}

/* Equal-share cards (flex-basis 0, same grow factor) — both always end up
   exactly the same size as each other regardless of how much text either
   one has, and they grow to fill whatever room .lc-my-course__side has
   instead of leaving dead space beside them. When there's only room for
   one per row, flex-grow stretches that single card to the full row width
   on its own, which is also what gives the full-bleed stacked look on
   narrow/mobile screens. */
.lc-readiness,
.lc-course-streak {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--lc-space-md);
    flex: 1 1 200px;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-md) var(--lc-space-lg);
}

.lc-readiness__ring {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(var(--lc-blue) calc(var(--percent, 0) * 1%), var(--lc-bg-subtle) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-readiness__ring-inner {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--lc-navy);
}

.lc-readiness__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-readiness__caption {
    font-size: 0.78rem;
    color: var(--lc-text-muted);
}

.lc-readiness__text strong {
    color: var(--lc-green);
}

.lc-readiness__text span:last-child {
    font-size: 0.85rem;
    color: var(--lc-text-muted);
}

/* Streak card — same "white card next to readiness" treatment as
   .lc-readiness, since it moved here from the (now removed) navy sidebar
   and needs a light-background version instead of white-on-navy. */
.lc-course-streak {
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-md) var(--lc-space-lg);
    flex-shrink: 0;
}

.lc-course-streak__flame {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.lc-course-streak strong {
    display: block;
    color: var(--lc-navy);
}

.lc-course-streak p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--lc-text-muted);
}

.lc-course-streak__week {
    display: flex;
    gap: 6px;
}

.lc-course-streak__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lc-bg-subtle);
}

.lc-course-streak__dot--active {
    background: var(--lc-orange);
}

.lc-course-streak__dot--today {
    box-shadow: 0 0 0 2px var(--lc-navy);
}

.lc-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--lc-space-md);
    margin-bottom: var(--lc-space-lg);
}

.lc-category-card {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
    border-top: 3px solid var(--lc-category-color, var(--lc-blue));
}

.lc-card.lc-category-card--blue { --lc-category-color: var(--lc-blue); }
.lc-card.lc-category-card--green { --lc-category-color: var(--lc-green); }
.lc-card.lc-category-card--purple { --lc-category-color: var(--lc-purple); }
.lc-card.lc-category-card--orange { --lc-category-color: var(--lc-orange); }

.lc-activity-card__icon--blue { background: var(--lc-blue); color: #fff; }
.lc-activity-card__icon--green { background: var(--lc-green); color: #fff; }
.lc-activity-card__icon--purple { background: var(--lc-purple); color: #fff; }
.lc-activity-card__icon--orange { background: var(--lc-orange); color: #fff; }

/* Same 4 "My Course" category colors, applied to a Block page's activity
   cards (via the outer card, not just the icon) so their "Continue"/
   "Mark as practiced" button matches too — same pattern as
   .lc-category-card above. */
.lc-activity-card--blue { --lc-activity-color: var(--lc-blue); }
.lc-activity-card--green { --lc-activity-color: var(--lc-green); }
.lc-activity-card--purple { --lc-activity-color: var(--lc-purple); }
.lc-activity-card--orange { --lc-activity-color: var(--lc-orange); }

.lc-activity-card .lc-btn--outline {
    border-color: var(--lc-activity-color, var(--lc-navy));
    color: var(--lc-activity-color, var(--lc-navy));
}

.lc-activity-card .lc-btn--outline:hover {
    background: var(--lc-activity-color, var(--lc-navy));
    color: #fff;
}

.lc-progress-bar__fill.lc-progress-bar__fill--blue { background: var(--lc-blue); }
.lc-progress-bar__fill.lc-progress-bar__fill--green { background: var(--lc-green); }
.lc-progress-bar__fill.lc-progress-bar__fill--purple { background: var(--lc-purple); }
.lc-progress-bar__fill.lc-progress-bar__fill--orange { background: var(--lc-orange); }

.lc-category-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-sm);
}

.lc-category-card__head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lc-category-color, var(--lc-navy));
}

.lc-category-card__head p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--lc-text-muted);
}

.lc-category-card__progress {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--lc-navy);
}

.lc-category-card__meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--lc-text-muted);
}

.lc-category-card .lc-btn {
    align-self: flex-start;
    margin-top: var(--lc-space-xs);
}

.lc-category-card .lc-btn--outline {
    border-color: var(--lc-category-color, var(--lc-navy));
    color: var(--lc-category-color, var(--lc-navy));
}

.lc-category-card .lc-btn--outline:hover {
    background: var(--lc-category-color, var(--lc-navy));
    color: #fff;
}

/* Wraps Next Step and Course Overview so they sit side by side; Next Step
   only renders once there's a recommendation, so Course Overview alone
   still looks intentional (not off-balance) when it doesn't. */
.lc-my-course__overview-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

.lc-next-step {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-md);
    background: rgba(46, 133, 64, 0.05);
    border-color: rgba(46, 133, 64, 0.2);
}

/* Weekly Live Class card (LC_Live_Class::render_student_widget()) —
   same shape as .lc-next-step, orange instead of green so it reads as
   its own kind of thing (a scheduled event, not exam practice), sits
   full-width above the 4 category cards on My Course. */
.lc-live-class-widget {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-md);
    background: rgba(245, 132, 38, 0.06);
    border-color: rgba(245, 132, 38, 0.2);
    margin-bottom: var(--lc-space-lg);
}

.lc-live-class-widget__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--lc-navy);
    font-size: 1.15rem;
}

.lc-live-class-widget__heading svg {
    width: 18px;
    height: 18px;
    color: var(--lc-orange);
}

.lc-live-class-widget__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    flex-wrap: wrap;
}

.lc-live-class-widget__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lc-live-class-widget__body strong {
    color: var(--lc-navy);
    font-size: 1.05rem;
}

.lc-live-class-widget__meta {
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
}

/* Matches .lc-course-overview h3 exactly, since the two cards sit side by
   side and their headings need to read as the same visual "level". */
.lc-next-step__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--lc-space-lg);
    color: var(--lc-navy);
    font-size: 1.15rem;
}

.lc-next-step__heading svg {
    width: 18px;
    height: 18px;
}

.lc-next-step__row {
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
}

.lc-next-step__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lc-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-next-step__icon svg {
    width: 28px;
    height: 28px;
}

.lc-next-step__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lc-next-step__title {
    color: var(--lc-green);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.lc-next-step__meta {
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
}

.lc-next-step__cta {
    flex-shrink: 0;
}

/* Compound selector to out-specificity .lc-btn--solid (lc-app-shell.css,
   loaded after this file, would otherwise win the orange-vs-green tie). */
.lc-next-step__cta.lc-btn--solid {
    background: var(--lc-green);
    border-color: var(--lc-green);
}

.lc-next-step__cta.lc-btn--solid:hover {
    background: #256b34;
    border-color: #256b34;
}

.lc-course-overview {
    flex: 1 1 320px;
}

.lc-course-overview h3 {
    margin: 0 0 var(--lc-space-lg);
    color: var(--lc-navy);
    font-size: 1.15rem;
}

/* Equal-width columns (however many fit) instead of flex, for two reasons:
   flex-grow leaves each item's own box wider than its content with the
   icon+text left-aligned inside it, so the extra space collects at the far
   right instead of between the 3 items; and justify-content:space-between
   pins a lone wrapped item to the left edge once the row gets too narrow
   for all 3 (e.g. sitting next to the Next Step card) to fit side by side. */
.lc-course-overview__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--lc-space-lg);
}

.lc-course-overview__item {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
}

.lc-course-overview__item strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lc-navy);
    line-height: 1.2;
}

/* Own class rather than a bare `span` descendant selector — the icon is
   also a <span> in this item, and a bare-tag selector would out-specificity
   (and override) .lc-course-overview__icon's `display: flex`, breaking its
   centering. */
.lc-course-overview__label {
    display: block;
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--lc-text-muted);
}

.lc-course-overview__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-course-overview__icon svg {
    width: 22px;
    height: 22px;
}

.lc-course-overview__icon--blue { background: var(--lc-blue); color: #fff; }
.lc-course-overview__icon--green { background: var(--lc-green); color: #fff; }
.lc-course-overview__icon--purple { background: var(--lc-purple); color: #fff; }

.lc-study-plan {
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-lg);
}

.lc-study-plan h3 {
    margin: 0 0 2px;
    color: var(--lc-navy);
}

.lc-study-plan > p {
    margin: 0 0 var(--lc-space-md);
    color: var(--lc-text-muted);
    font-size: 0.9rem;
}

/* Two columns filled top-to-bottom then left-to-right (column 1 gets rows
   1-N first, column 2 gets the rest) — a plain 2-column grid would instead
   pair row 1 with row 2 side by side, which doesn't match the reference
   layout the client asked to follow. */
.lc-study-plan__list {
    column-count: 2;
    column-gap: var(--lc-space-lg);
}

.lc-study-plan__row {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
    padding: var(--lc-space-sm);
    margin-bottom: var(--lc-space-sm);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    break-inside: avoid;
    /* Unlocked rows render as <a> tags (the whole card is clickable, not
       just the title) — reset link styling so they still look like plain
       cards. Locked rows stay <div>s and never match `a.lc-study-plan__row`. */
    text-decoration: none;
    color: inherit;
}

a.lc-study-plan__row {
    cursor: pointer;
}

a.lc-study-plan__row:hover {
    border-color: var(--lc-blue);
    box-shadow: var(--lc-shadow-card);
}

a.lc-study-plan__row:hover .lc-study-plan__info span:first-child {
    color: var(--lc-blue);
}

.lc-study-plan__row--current {
    border-color: var(--lc-blue);
    background: rgba(0, 107, 182, 0.04);
}

.lc-study-plan__number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lc-bg-subtle);
    color: var(--lc-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-study-plan__number--completed {
    background: rgba(46, 133, 64, 0.15);
    color: var(--lc-green);
}

.lc-study-plan__number--in-progress {
    background: rgba(0, 107, 182, 0.15);
    color: var(--lc-blue);
}

.lc-study-plan__row .lc-activity-card__icon {
    border-radius: var(--lc-radius);
}

.lc-study-plan__row--intro {
    background: var(--lc-bg-subtle);
}

.lc-study-plan__icon-lg {
    width: 48px;
    height: 48px;
    border-radius: var(--lc-radius);
    background: var(--lc-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-study-plan__icon-lg svg {
    width: 24px;
    height: 24px;
}

.lc-study-plan__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lc-study-plan__info span:first-child {
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--lc-navy);
}

.lc-study-plan__meta {
    font-size: 0.8rem;
    color: var(--lc-text-muted);
}

.lc-study-plan__topics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.lc-study-plan__topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
}

.lc-study-plan__topic-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.lc-study-plan__topic-icon svg {
    width: 10px;
    height: 10px;
}

.lc-study-plan__topic--blue { color: var(--lc-blue); }
.lc-study-plan__topic--blue .lc-study-plan__topic-icon { background: var(--lc-blue); }

.lc-study-plan__topic--orange { color: var(--lc-orange); }
.lc-study-plan__topic--orange .lc-study-plan__topic-icon { background: var(--lc-orange); }

.lc-study-plan__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: right;
}

.lc-study-plan__status strong {
    font-size: 0.85rem;
    color: var(--lc-navy);
}

.lc-study-plan__status span {
    font-size: 0.72rem;
    color: var(--lc-text-muted);
}

.lc-study-plan__status-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

.lc-study-plan__status-icon--completed {
    background: rgba(46, 133, 64, 0.15);
    color: var(--lc-green);
}

.lc-study-plan__status-icon--locked {
    color: var(--lc-text-muted);
}

.lc-study-plan__status-icon--in-progress,
.lc-study-plan__status-icon--pending {
    color: var(--lc-blue);
}

.lc-widget h4 {
    margin: 0 0 var(--lc-space-sm);
    color: var(--lc-navy);
    font-size: 0.95rem;
}

.lc-widget .lc-btn {
    margin-top: var(--lc-space-xs);
    width: 100%;
    justify-content: center;
}

.lc-widget .lc-btn--blue {
    border-color: var(--lc-blue);
    color: var(--lc-blue);
}

.lc-widget .lc-btn--blue:hover {
    background: var(--lc-blue);
    color: #fff;
}

.lc-widget p {
    margin: 0 0 var(--lc-space-sm);
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
}

.lc-widget__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
}

.lc-widget__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-sm);
}

/* Resources links have no subtitle line, so top-aligning icon with text
   (needed when a 2-line title+subtitle sits next to the icon) leaves the
   single line of text sitting above the icon's center — center instead. */
.lc-widget__list--single-line li {
    align-items: center;
}

.lc-widget__list-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-widget__list-icon svg {
    width: 18px;
    height: 18px;
}

.lc-widget__list-icon--blue { background: var(--lc-blue); color: #fff; }
.lc-widget__list-icon--green { background: var(--lc-green); color: #fff; }
.lc-widget__list-icon--purple { background: var(--lc-purple); color: #fff; }
.lc-widget__list-icon--orange { background: var(--lc-orange); color: #fff; }

.lc-widget__list a {
    display: block;
    color: var(--lc-blue);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.3;
}

.lc-widget__list a:hover {
    text-decoration: underline;
}

.lc-widget__list-subtitle {
    display: block;
    font-size: 0.72rem;
    color: var(--lc-text-muted);
    margin-top: 1px;
}

@media (max-width: 860px) {
    .lc-study-plan__list {
        column-count: 1;
    }
}

/* Category detail page (Civic Questions / Speaking Practice / ...). */

.lc-category-page__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--lc-space-lg);
    align-items: start;
}

/* Questions breakdown page only — no left TOC column (removed per Helena's
   request), just the card grid and the detail panel. align-items: stretch
   so the panel's card is as tall as the grid beside it (usually ~12 cards),
   instead of stopping short and leaving blank page background below it. */
.lc-category-page__layout--with-detail {
    grid-template-columns: 1fr 340px;
    align-items: stretch;
}

.lc-breakdown-header {
    display: flex;
    align-items: stretch;
    gap: var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

.lc-breakdown-header .lc-block-hero--sm {
    margin-bottom: 0;
    flex-shrink: 0;
}

.lc-breakdown-header .lc-category-page__header {
    flex: 1;
}

.lc-category-nav {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-md);
}

.lc-category-nav__back {
    color: var(--lc-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

/* Questions breakdown page only — the back link sits directly in the page
   flow (no more .lc-category-nav wrapper), so it needs its own spacing. */
.lc-block > .lc-category-nav__back {
    display: inline-block;
    margin-bottom: var(--lc-space-md);
}

.lc-category-nav__back:hover {
    text-decoration: underline;
}

.lc-block-hero--sm {
    padding: var(--lc-space-md);
    gap: var(--lc-space-sm);
}

.lc-block-hero--sm .lc-block-hero__icon {
    width: 48px;
    height: 48px;
}

.lc-block-hero--sm .lc-block-hero__icon svg {
    width: 24px;
    height: 24px;
}

.lc-block-hero--sm h1 {
    font-size: 1rem;
    margin: 0;
}

.lc-category-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-category-nav__link {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
    padding: var(--lc-space-sm);
    border-radius: var(--lc-radius);
    color: var(--lc-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.lc-category-nav__link:hover {
    background: var(--lc-bg-subtle);
}

.lc-category-nav__link--active {
    background: var(--lc-bg-subtle);
    color: var(--lc-navy);
}

.lc-category-page__main {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-lg);
}

.lc-category-page__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lc-space-lg);
}

.lc-category-page__header-text {
    flex: 1;
    min-width: 200px;
}

.lc-category-page__header-text h1 {
    margin: 0 0 4px;
    color: var(--lc-navy);
}

.lc-category-page__header-text p {
    margin: 0;
    color: var(--lc-text-secondary);
}

.lc-category-page__stats {
    display: flex;
    gap: var(--lc-space-md);
    flex-wrap: wrap;
}

.lc-category-page__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--lc-space-sm) var(--lc-space-md);
    border-radius: var(--lc-radius);
    background: var(--lc-bg-subtle);
    min-width: 88px;
}

.lc-category-page__stat strong {
    color: var(--lc-navy);
    font-size: 1.1rem;
}

.lc-category-page__stat span {
    font-size: 0.72rem;
    color: var(--lc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Reference notes callout — deliberately unlike .lc-category-step below
   (warm cream background, dashed border, no number/progress ring) so it
   reads as "background reading", not another activity in the sequence. */
.lc-category-breakdown {
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    background: var(--lc-bg-cream);
    border: 1px dashed var(--lc-orange);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-md) var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

.lc-category-breakdown__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--lc-radius);
    background: #fff;
    color: var(--lc-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-category-breakdown__icon svg {
    width: 20px;
    height: 20px;
}

.lc-category-breakdown__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lc-category-breakdown__text strong {
    color: var(--lc-navy);
    font-size: 0.95rem;
}

.lc-category-breakdown__text span {
    font-size: 0.8rem;
    color: var(--lc-text-muted);
}

.lc-category-breakdown__badge {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--lc-border);
    color: var(--lc-text-muted);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-category-page__body {
    display: flex;
    flex-direction: column;
}

/* Questions breakdown page — sidebar table of contents. */

.lc-breakdown-toc {
    display: flex;
    flex-direction: column;
    margin-top: var(--lc-space-md);
    max-height: 60vh;
    overflow-y: auto;
}

.lc-breakdown-toc__group {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: var(--lc-space-md) 0 4px;
    padding: 4px var(--lc-space-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--lc-radius);
    border: 1px solid transparent;
}

.lc-breakdown-toc__group .lc-breakdown-section__icon svg {
    width: 12px;
    height: 12px;
}

.lc-breakdown-toc__group:first-child {
    margin-top: 0;
}

.lc-breakdown-toc__item {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
    padding: 6px var(--lc-space-sm);
    border-radius: var(--lc-radius);
    text-decoration: none;
    color: var(--lc-text-secondary);
    border: 1px solid transparent;
}

.lc-breakdown-toc__item:hover {
    background: var(--lc-bg-subtle);
}

.lc-breakdown-toc__item--active {
    background: rgba(0, 107, 182, 0.08);
    border-color: var(--lc-blue);
    color: var(--lc-navy);
}

.lc-breakdown-toc__number {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lc-bg-subtle);
    color: var(--lc-navy);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-breakdown-toc__text {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-breakdown-toc__status {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.lc-breakdown-toc__status--done {
    background: var(--lc-green);
    color: #fff;
}

.lc-breakdown-toc__status--in-progress {
    position: relative;
    background: conic-gradient(var(--lc-blue) 70%, var(--lc-border) 0);
}

.lc-breakdown-toc__status--in-progress::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}

.lc-breakdown-toc__status--not-started {
    border: 2px solid var(--lc-border);
}

/* Questions breakdown page — main question grid. */

.lc-breakdown-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--lc-space-lg) 0 var(--lc-space-sm);
    padding: 8px 14px;
    color: var(--lc-navy);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--lc-radius);
    border: 1px solid transparent;
}

.lc-breakdown-section__icon {
    display: flex;
}

.lc-breakdown-section__icon svg {
    width: 16px;
    height: 16px;
}

/* Section/subsection color rotation — shared by the main grid heading
   (.lc-breakdown-section) and the sidebar TOC group pill
   (.lc-breakdown-toc__group). Colors assigned per subsection in
   LC_Shortcodes::breakdown_section_color(). */

.lc-breakdown-section--blue, .lc-breakdown-toc__group--blue {
    background: rgba(0, 107, 182, 0.08);
    border-color: rgba(0, 107, 182, 0.25);
}
.lc-breakdown-section--blue .lc-breakdown-section__icon { color: var(--lc-blue); }

.lc-breakdown-section--green, .lc-breakdown-toc__group--green {
    background: rgba(46, 133, 64, 0.08);
    border-color: rgba(46, 133, 64, 0.25);
}
.lc-breakdown-section--green .lc-breakdown-section__icon { color: var(--lc-green); }

.lc-breakdown-section--purple, .lc-breakdown-toc__group--purple {
    background: rgba(124, 79, 224, 0.08);
    border-color: rgba(124, 79, 224, 0.25);
}
.lc-breakdown-section--purple .lc-breakdown-section__icon { color: var(--lc-purple); }

.lc-breakdown-section--orange, .lc-breakdown-toc__group--orange {
    background: rgba(245, 132, 38, 0.08);
    border-color: rgba(245, 132, 38, 0.25);
}
.lc-breakdown-section--orange .lc-breakdown-section__icon { color: var(--lc-orange); }

.lc-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lc-space-md);
    margin-bottom: var(--lc-space-md);
}

.lc-breakdown-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
    scroll-margin-top: var(--lc-space-lg);
}

.lc-breakdown-card--done {
    border-color: rgba(46, 133, 64, 0.4);
    background: rgba(46, 133, 64, 0.03);
}

.lc-breakdown-card__number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lc-bg-subtle);
    color: var(--lc-navy);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-breakdown-card__icon {
    align-self: center;
    margin: 2px 0 4px;
}

.lc-breakdown-card__question {
    flex: 1;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--lc-navy);
    line-height: 1.35;
}

.lc-breakdown-card__cta {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
}

.lc-breakdown-card__cta.lc-btn--solid {
    background: var(--lc-blue);
    color: #fff;
}

.lc-breakdown-card__cta.lc-btn--solid:hover {
    background: var(--lc-blue);
    opacity: 0.9;
}

.lc-breakdown-card {
    cursor: pointer;
}

.lc-breakdown-card__cta {
    cursor: pointer;
}

.lc-breakdown-card--active {
    border-color: var(--lc-blue);
    box-shadow: 0 0 0 2px rgba(0, 107, 182, 0.15);
}

/* Questions breakdown page — card detail panel. A persistent second column
   (per Helena's request) rather than a drawer you open and close: it just
   shows the first question by default and updates in place whenever a card
   is clicked. The panel is wrapped in .lc-breakdown-detail-col, which is
   the actual grid item and stretches (via the grid's align-items: stretch)
   to match the card grid's height — usually ~12 cards tall. The panel
   itself then uses position: sticky inside that tall wrapper, so it hugs
   the top of the viewport while scrolling and only stops once the bottom
   of the wrapper (i.e. the bottom of the card grid) comes into view —
   instead of scrolling away immediately like a normal, non-stretched
   column would. max-height + overflow-y: auto lets its own content scroll
   internally on the rare question whose content is taller than the
   viewport (e.g. the 22-item Cabinet-positions answer). */

.lc-breakdown-detail-col {
    align-self: stretch;
}

.lc-breakdown-detail {
    position: sticky;
    top: var(--lc-space-lg);
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--lc-space-lg) * 2);
    overflow-y: auto;
    padding: var(--lc-space-md);
    scrollbar-width: thin;
}

.lc-breakdown-detail::-webkit-scrollbar {
    width: 6px;
}

.lc-breakdown-detail::-webkit-scrollbar-thumb {
    background: var(--lc-border);
    border-radius: 3px;
}

.lc-breakdown-detail::-webkit-scrollbar-track {
    background: transparent;
}

.lc-breakdown-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lc-breakdown-detail__counter {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 0.9rem;
}

/* Hidden on desktop, where the panel is always visible so there's nothing
   to close — only shown (see the mobile media query below) once the panel
   becomes a drawer that opens/closes per card click. */
.lc-breakdown-detail__close {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--lc-text-muted);
    padding: 0;
}

.lc-breakdown-detail-backdrop {
    display: none;
}

.lc-breakdown-detail__nav {
    display: flex;
    justify-content: space-between;
    margin: var(--lc-space-sm) 0;
}

.lc-breakdown-detail__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--lc-border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lc-navy);
}

.lc-breakdown-detail__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.lc-breakdown-detail__body {
    display: flex;
    flex-direction: column;
}

.lc-breakdown-detail__icon {
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-blue);
    color: #fff;
    margin-bottom: 4px;
}

.lc-breakdown-detail__icon svg {
    width: 22px;
    height: 22px;
}

.lc-breakdown-detail__card {
    background: var(--lc-bg-subtle);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-sm) var(--lc-space-md);
    margin-top: var(--lc-space-sm);
}

.lc-breakdown-detail__card--blue {
    background: rgba(0, 107, 182, 0.06);
}

.lc-breakdown-detail__card--green {
    background: rgba(46, 133, 64, 0.06);
}

.lc-breakdown-detail__card--purple {
    background: rgba(124, 79, 224, 0.06);
}

.lc-breakdown-detail__card--orange {
    background: rgba(245, 132, 38, 0.06);
}

.lc-breakdown-detail__pill {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-breakdown-detail__pill--blue {
    background: rgba(0, 107, 182, 0.1);
    color: var(--lc-blue);
}

.lc-breakdown-detail__pill--green {
    background: rgba(46, 133, 64, 0.1);
    color: var(--lc-green);
}

.lc-breakdown-detail__pill--purple {
    background: rgba(124, 79, 224, 0.1);
    color: var(--lc-purple);
}

.lc-breakdown-detail__pill--orange {
    background: rgba(245, 132, 38, 0.1);
    color: var(--lc-orange);
}

.lc-breakdown-detail__question {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 1rem;
    margin: 6px 0 0;
}

.lc-breakdown-detail__answer {
    color: var(--lc-green);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 6px 0 0;
}

.lc-breakdown-detail__question-es {
    color: var(--lc-navy);
    font-weight: 700;
    margin: 6px 0 0;
    font-size: 0.9rem;
}

.lc-breakdown-detail__answer-es {
    color: var(--lc-text-secondary);
    margin: 2px 0 0;
    font-size: 0.9rem;
    font-style: italic;
}

/* When a question accepts more than one valid answer, .lc-breakdown-card__answer(-es)
   gets a <ul> injected instead of plain text — same idea, one bullet per
   accepted phrasing, so none of them look like "the" single correct answer. */
.lc-breakdown-detail__answer ul,
.lc-breakdown-detail__answer-es ul {
    margin: 0;
    padding-left: 1.1em;
}

.lc-breakdown-detail__answer li {
    color: var(--lc-green);
    font-weight: 600;
}

.lc-breakdown-detail__answer-es li {
    color: var(--lc-text-secondary);
    font-style: italic;
}

.lc-breakdown-detail__section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-text-muted);
}

.lc-breakdown-detail__vocab {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.lc-breakdown-detail__vocab-chip {
    background: rgba(0, 107, 182, 0.1);
    color: var(--lc-blue);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.lc-breakdown-detail__example {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--lc-text-secondary);
}

.lc-breakdown-detail__tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: var(--lc-space-sm);
    background: rgba(245, 132, 38, 0.08);
    border: 1px solid rgba(245, 132, 38, 0.25);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-sm);
}

.lc-breakdown-detail__tip svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.lc-breakdown-detail__tip-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-orange);
}

.lc-breakdown-detail__tip-text {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--lc-navy);
}

/* N-400 breakdown panel (render_n400_questions_breakdown_page() +
   lc-n400-breakdown-detail.js) — reuses the Study card's answer-column/
   phrasing markup verbatim, but the panel is much narrower than the full
   page, so the positive/negative answer columns stack instead of sitting
   side by side. Scoped to this panel only — the full Study card page keeps
   its two-column layout. */
.lc-breakdown-detail__n400-answers .lc-study-card__answer-columns {
    grid-template-columns: 1fr;
}

/* N-400's category color is orange (LC_Progress::CATEGORIES), not civics'
   blue — .lc-n400-breakdown scopes the couple of spots that hardcode blue
   for civics (the "Study card" button, the panel's floating icon circle)
   so N-400's own breakdown page doesn't inherit civics' color by accident. */
.lc-n400-breakdown .lc-breakdown-card__cta.lc-btn--solid {
    background: var(--lc-orange);
}

.lc-n400-breakdown .lc-breakdown-card__cta.lc-btn--solid:hover {
    background: #db6f14;
}

.lc-n400-breakdown .lc-breakdown-detail__icon {
    background: var(--lc-orange);
}

.lc-breakdown-detail__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--lc-space-sm);
    margin-top: var(--lc-space-md);
    padding-top: var(--lc-space-sm);
    border-top: 1px solid var(--lc-border);
}

/* Per-question study page ("Study card") — a full page, richer than the
   .lc-breakdown-detail__* side panel above, built from numbered colored
   sections. Reuses the same color tints/tokens as that panel's cards. */
.lc-study-card {
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-lg);
    margin-top: var(--lc-space-md);
}

.lc-study-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--lc-space-md);
}

.lc-study-card__counter {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 0.9rem;
}

.lc-study-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lc-space-md);
}

.lc-study-card__section {
    background: var(--lc-bg-subtle);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-md);
}

.lc-study-card__section--full {
    grid-column: 1 / -1;
}

.lc-study-card__section--blue { background: rgba(0, 107, 182, 0.06); }
.lc-study-card__section--green { background: rgba(46, 133, 64, 0.06); }
.lc-study-card__section--orange { background: rgba(245, 132, 38, 0.08); }
.lc-study-card__section--red { background: rgba(224, 67, 90, 0.06); }
.lc-study-card__section--purple { background: rgba(124, 79, 224, 0.06); }

/* Number badge + title sit inline on one line, directly at the top of the
   card — the number badge is a small colored square, the title next to it
   is bold uppercase text in the same color family as the badge. */
.lc-study-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--lc-space-sm);
}

.lc-study-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--lc-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lc-study-card__badge--blue { background: var(--lc-blue); }
.lc-study-card__badge--green { background: var(--lc-green); }
.lc-study-card__badge--orange { background: var(--lc-orange); }
.lc-study-card__badge--red { background: var(--lc-red); }
.lc-study-card__badge--gray { background: var(--lc-text-secondary); }
.lc-study-card__badge--purple { background: var(--lc-purple); }

.lc-study-card__label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-navy);
}

.lc-study-card__label--blue { color: var(--lc-blue); }
.lc-study-card__label--green { color: var(--lc-green); }
.lc-study-card__label--orange { color: var(--lc-orange); }
.lc-study-card__label--red { color: var(--lc-red); }
.lc-study-card__label--gray { color: var(--lc-text-secondary); }
.lc-study-card__label--purple { color: var(--lc-purple); }

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

.lc-study-card__question {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 1.15rem;
    margin: 0;
}

/* Pattern section: each " · "-joined formula on its own line instead
   of running together (class-lc-shortcodes.php's render_vocabulary_
   breakdown_page()). Gap does the spacing since each <p> keeps margin: 0. */
.lc-study-card__pattern-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-study-card__audio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lc-blue);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
    padding: 0;
}

.lc-study-card__audio-btn svg {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
}

.lc-study-card__question-es {
    font-weight: 700;
    color: var(--lc-navy);
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.lc-study-card__text {
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* The bulleted-list continuation some Easy Explanation/Memory Tip/Common
   Mistake text ends in — see LC_Shortcodes::render_bulleted_text(). Only
   renders when the source text actually has a "•"-separated list. */
.lc-study-card__text-list {
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
    margin: 8px 0 0;
    padding-left: 20px;
}

.lc-study-card__text-list li {
    margin-bottom: 4px;
}

/* Grammar rule fields can now include real <h3>/<table> markup (see
   LC_Post_Types's grammar_rule field) — bare <table> has no default
   styling, so it needs its own rules here rather than relying on
   .lc-study-card__text's plain-paragraph defaults. */
.lc-study-card__text h3 {
    color: var(--lc-navy);
    font-size: 1rem;
    margin: var(--lc-space-md) 0 6px;
}

.lc-study-card__text h3:first-child {
    margin-top: 0;
}

.lc-study-card__text table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.85rem;
    border: 2px solid var(--lc-navy);
}

/* --lc-border (#eceff1) is meant for subtle dividers elsewhere on the
   site — inside a data table it read as barely-there. --lc-gray is a
   real mid-gray, visible without competing with the navy outer border
   above. */
.lc-study-card__text th,
.lc-study-card__text td {
    border: 1px solid var(--lc-gray);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.lc-study-card__text th {
    background: rgba(11, 37, 69, 0.05);
    color: var(--lc-navy);
    text-align: center;
}

/* A table's own title row (colspan="3" over the real column headers) —
   e.g. "Tipo de frase: Afirmativa (+)" — reads as part of the table
   instead of a floating heading above it. Darker/centered so it's
   visually distinct from the lighter, left-aligned column-header row
   right below it. Qualified as "th.lc-study-card__table-caption" (not
   just the bare class) so it actually outweighs the ".lc-study-card__text
   th" rule above — a class+element selector beats a class-only one on
   specificity regardless of source order, so the bare class was silently
   losing every property here to that rule. */
.lc-study-card__text th.lc-study-card__table-caption {
    background: var(--lc-navy);
    color: #fff;
    text-align: center;
}

.lc-study-card__answers {
    margin: 0;
    padding-left: 1.1em;
}

.lc-study-card__answers li,
.lc-study-card__answer-single {
    color: var(--lc-green);
    font-weight: 600;
    font-size: 0.95rem;
}

.lc-study-card__answers li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-sm);
    padding: 4px 0;
}

.lc-study-card__answer-single {
    margin: 0;
}

.lc-study-card__answer-es {
    color: var(--lc-text-secondary);
    font-weight: 400;
    font-style: italic;
    font-size: 0.85rem;
}

.lc-study-card__answer-choose {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--lc-green);
    color: var(--lc-green);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lc-study-card__answer-choose:hover {
    background: var(--lc-green);
    color: #fff;
}

.lc-study-card__answer-chosen {
    flex: 0 0 auto;
    color: var(--lc-green);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Multi-answer questions (answers_required > 1, e.g. "Name two...") — a
   checkbox per answer instead of one "Study this one" button, so the
   student can pick several at once. */
.lc-study-card__answer-checkbox {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
    width: 100%;
    cursor: pointer;
}

.lc-study-card__answer-checkbox input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.lc-study-card__exam-tip {
    margin-top: var(--lc-space-sm);
    padding-top: var(--lc-space-sm);
    border-top: 1px dashed rgba(245, 132, 38, 0.3);
    font-size: 0.85rem;
    color: var(--lc-navy);
}

.lc-study-card__vocab-table {
    display: flex;
    flex-direction: column;
}

.lc-study-card__vocab-row {
    display: flex;
    justify-content: space-between;
    gap: var(--lc-space-md);
    padding: 6px 0;
    border-bottom: 1px solid var(--lc-border);
}

.lc-study-card__vocab-row:last-child {
    border-bottom: none;
}

.lc-study-card__vocab-en {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 0.9rem;
}

.lc-study-card__vocab-es {
    color: var(--lc-blue);
    font-size: 0.9rem;
}

/* Writing/Reading "Vocabulary breakdown" page — the word grid below the
   grammar card (see LC_Shortcodes::render_vocabulary_breakdown_page()).
   Mirrors .lc-breakdown-grid/.lc-breakdown-card's plain white-card grid
   (no per-item status ring, unlike that one — this page isn't tracked). */
.lc-vocab-breakdown__heading {
    font-size: 1.1rem;
    color: var(--lc-navy);
    margin: var(--lc-space-lg) 0 var(--lc-space-md);
}

.lc-vocab-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lc-space-md);
}

.lc-vocab-breakdown-card {
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-md);
}

.lc-vocab-breakdown-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lc-space-sm);
}

.lc-vocab-breakdown-card__en-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-vocab-breakdown-card__en {
    font-weight: 700;
    color: var(--lc-navy);
}

.lc-vocab-breakdown-card__es {
    color: var(--lc-blue);
}

.lc-vocab-breakdown-card__pron {
    color: var(--lc-text-secondary);
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.lc-vocab-breakdown-card__example {
    color: var(--lc-text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    margin: var(--lc-space-sm) 0 0;
}

.lc-vocab-breakdown-card__example-highlight {
    background: rgba(0, 107, 182, 0.12);
    color: var(--lc-blue);
    font-weight: 700;
    font-style: normal;
    border-radius: 3px;
    padding: 0 3px;
}

/* LC_Shortcodes::highlight_vocab_terms() — same treatment as the Vocabulary
   breakdown highlight above, applied to the Official Question text on a
   civic question's study card (class-lc-shortcodes.php). */
.lc-study-card__question-highlight {
    background: rgba(0, 107, 182, 0.12);
    color: var(--lc-blue);
    border-radius: 3px;
    padding: 0 3px;
}

.lc-vocab-breakdown-card__example-es {
    font-style: normal;
}

@media (max-width: 900px) {
    .lc-vocab-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lc-vocab-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

.lc-study-card__pronunciation-list {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
}

.lc-study-card__pronunciation-row {
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    padding-bottom: var(--lc-space-sm);
    border-bottom: 1px solid rgba(124, 79, 224, 0.15);
}

.lc-study-card__pronunciation-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.lc-study-card__audio-btn--sm svg {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 50%;
    background: var(--lc-purple);
    color: #fff;
}

.lc-study-card__pronunciation-word {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 1.05rem;
    margin: 0;
}

.lc-study-card__pronunciation-ipa {
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
    margin: 2px 0 0;
}

.lc-study-card__mistake-intro {
    font-size: 0.85rem;
    color: var(--lc-text-secondary);
    margin: var(--lc-space-sm) 0 4px;
}

.lc-study-card__mistake-intro:first-of-type {
    margin-top: 0;
}

.lc-study-card__mistake-wrong {
    color: var(--lc-red);
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0;
}

.lc-study-card__mistake-correct {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lc-study-card__mistake-correct li {
    color: var(--lc-green);
    font-weight: 600;
    font-size: 0.9rem;
}

.lc-study-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-sm);
    margin-top: var(--lc-space-lg);
    padding-top: var(--lc-space-md);
    border-top: 1px solid var(--lc-border);
}

/* N-400 Study card additions (render_n400_question_study_page()) — the
   grammar/verb-tense callout inside section 2, the short/long spoken-answer
   columns of section 3, the "other phrasings" list of section 4, the
   IMPORTANTE warning under Memory Tip, and the two-column Common Mistake
   layout. Reuses the color tokens/section tints already defined above for
   the civics Study card; only genuinely new shapes are added here. */
.lc-study-card__grammar-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-green);
    margin: var(--lc-space-sm) 0 2px;
}

.lc-study-card__grammar-pattern {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 0.95rem;
    margin: 0 0 4px;
}

.lc-study-card__main-idea {
    margin: var(--lc-space-sm) 0 0;
    font-size: 0.85rem;
    color: var(--lc-navy);
}

.lc-study-card__answer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lc-space-md);
    margin-top: var(--lc-space-sm);
}

.lc-study-card__answer-col {
    border-radius: var(--lc-radius);
    padding: var(--lc-space-sm) var(--lc-space-md);
}

.lc-study-card__answer-col--positive {
    background: rgba(46, 133, 64, 0.08);
    border: 1px solid rgba(46, 133, 64, 0.2);
}

.lc-study-card__answer-col--negative {
    background: rgba(224, 67, 90, 0.08);
    border: 1px solid rgba(224, 67, 90, 0.2);
}

/* The student's chosen "this is my real answer" column (N-400 yes/no
   questions only — see get_chosen_n400_answer()) gets a stronger ring so
   it reads as selected, not just tinted like its un-chosen sibling. */
.lc-study-card__answer-col--chosen {
    box-shadow: 0 0 0 2px var(--lc-green);
}

.lc-study-card__answer-choice-prompt {
    margin: var(--lc-space-sm) 0 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--lc-text-secondary);
}

/* Inside an answer column (see above) the choose button/chosen indicator
   sits below the answer text as its own block, not inline in a flex row
   like civics' equivalent li — needs its own top spacing here. */
.lc-study-card__answer-col .lc-study-card__answer-choose,
.lc-study-card__answer-col .lc-study-card__answer-chosen {
    display: inline-block;
    margin-top: var(--lc-space-sm);
}

.lc-study-card__answer-col-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-text-secondary);
    margin: var(--lc-space-sm) 0 4px;
}

.lc-study-card__answer-col-label:first-child {
    margin-top: 0;
}

.lc-study-card__answer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-sm);
}

.lc-study-card__answer-en {
    font-weight: 700;
    color: var(--lc-navy);
    font-size: 1.05rem;
    margin: 0;
}

.lc-study-card__answer-pron {
    color: var(--lc-text-secondary);
    font-size: 0.82rem;
    margin: 2px 0 0;
}

.lc-study-card__answer-tip {
    margin-top: var(--lc-space-sm);
    padding-top: var(--lc-space-sm);
    border-top: 1px dashed rgba(245, 132, 38, 0.3);
    font-size: 0.85rem;
    color: var(--lc-navy);
}

.lc-study-card__phrasings {
    margin: var(--lc-space-sm) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-study-card__phrasings li {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-bottom: 1px solid rgba(124, 79, 224, 0.15);
}

.lc-study-card__phrasings li:last-child {
    border-bottom: none;
}

.lc-study-card__phrasing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-sm);
}

.lc-study-card__phrasing-en {
    font-weight: 600;
    color: var(--lc-navy);
    font-size: 0.9rem;
}

.lc-study-card__phrasing-es {
    color: var(--lc-text-secondary);
    font-size: 0.85rem;
}

.lc-study-card__inline-tip {
    margin-top: var(--lc-space-sm);
}

.lc-study-card__warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: var(--lc-space-sm);
    background: rgba(224, 67, 90, 0.08);
    border: 1px solid rgba(224, 67, 90, 0.25);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-sm);
    font-size: 0.82rem;
    color: var(--lc-navy);
}

.lc-study-card__mistake-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lc-space-md);
    margin-top: var(--lc-space-sm);
}

.lc-study-card__mistake-wrong-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
}

.lc-study-card__mistake-explanation {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--lc-text-secondary);
}

.lc-study-card__mistake-correct-box {
    background: rgba(46, 133, 64, 0.08);
    border: 1px solid rgba(46, 133, 64, 0.2);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-sm) var(--lc-space-md);
    align-self: flex-start;
}

.lc-study-card__mistake-correct-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lc-green);
    margin: 0 0 4px;
}

@media (max-width: 640px) {
    .lc-study-card__grid {
        grid-template-columns: 1fr;
    }

    .lc-study-card__question-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .lc-study-card__answer-columns,
    .lc-study-card__mistake-columns {
        grid-template-columns: 1fr;
    }
}

.lc-category-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    padding-bottom: var(--lc-space-lg);
}

.lc-category-step:last-child {
    padding-bottom: 0;
}

/* Connecting vertical line between step numbers — same pseudo-element
   technique as .lc-steps::before on the homepage "How it works" section.
   The number is vertically centered in the row, so the line starts at the
   row's center + half the number's own height. */
.lc-category-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(50% + 16px);
    left: 15px;
    bottom: calc(-1 * var(--lc-space-lg));
    width: 2px;
    background: var(--lc-border);
}

.lc-category-step__number {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lc-navy);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-category-step__number--blue { background: var(--lc-blue); }
.lc-category-step__number--green { background: var(--lc-green); }
.lc-category-step__number--purple { background: var(--lc-purple); }
.lc-category-step__number--orange { background: var(--lc-orange); }

.lc-category-step__card {
    flex: 1;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
}

.lc-category-step__card > summary,
.lc-category-step__card--link,
.lc-category-step__card--locked {
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    padding: var(--lc-space-md) var(--lc-space-lg);
    cursor: pointer;
    list-style: none;
    flex-wrap: wrap;
}

.lc-category-step__card > summary::-webkit-details-marker {
    display: none;
}

.lc-category-step__card--link {
    text-decoration: none;
    color: inherit;
}

.lc-category-step__card--locked {
    cursor: not-allowed;
}

.lc-category-step__title {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.lc-category-step__title strong {
    color: var(--lc-navy);
    font-size: 0.95rem;
}

.lc-category-step__title span {
    font-size: 0.78rem;
    color: var(--lc-text-muted);
}

.lc-category-step__title--blue strong { color: var(--lc-blue); }
.lc-category-step__title--green strong { color: var(--lc-green); }
.lc-category-step__title--purple strong { color: var(--lc-purple); }
.lc-category-step__title--orange strong { color: var(--lc-orange); }

.lc-category-step__objective {
    flex: 1;
    min-width: 180px;
}

.lc-category-step__objective-label {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--lc-navy);
}

.lc-category-step__objective p {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--lc-text-secondary);
}

.lc-category-step__progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.lc-category-step__progress-label {
    font-size: 0.72rem;
    color: var(--lc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-category-step__progress-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lc-text-secondary);
    align-self: flex-end;
}

.lc-category-step__cta {
    flex-shrink: 0;
}

.lc-category-step__cta--blue { border-color: var(--lc-blue); color: var(--lc-blue); }
.lc-category-step__cta--green { border-color: var(--lc-green); color: var(--lc-green); }
.lc-category-step__cta--purple { border-color: var(--lc-purple); color: var(--lc-purple); }
.lc-category-step__cta--orange { border-color: var(--lc-orange); color: var(--lc-orange); }

.lc-category-step__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lc-green);
    color: #fff;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Shown in the same spot as the checkmark while a step isn't fully
   completed yet — a small ring filled to the real completion percent. */
.lc-category-step__ring {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--lc-ring-color, var(--lc-blue)) calc(var(--percent, 0) * 1%), var(--lc-border) 0);
}

.lc-category-step__ring::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.lc-category-step__ring--blue { --lc-ring-color: var(--lc-blue); }
.lc-category-step__ring--green { --lc-ring-color: var(--lc-green); }
.lc-category-step__ring--purple { --lc-ring-color: var(--lc-purple); }
.lc-category-step__ring--orange { --lc-ring-color: var(--lc-orange); }

.lc-category-step__body {
    padding: 0 var(--lc-space-lg) var(--lc-space-lg);
}

/* Evaluation step before its prerequisites (Study/Training 1-3) are all
   finished — inert card, no link/details toggle (see render_category_step()'s
   $locked branch), same muted treatment as .lc-btn--disabled. */
.lc-category-step--locked .lc-category-step__card {
    opacity: 0.6;
}

.lc-category-step--locked .lc-category-step__number {
    background: var(--lc-text-muted);
}

.lc-category-step__locked-note {
    flex: 1;
    min-width: 180px;
    margin: 0;
    font-size: 0.82rem;
    color: var(--lc-text-muted);
    font-style: italic;
}

.lc-category-step__lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* One flashcards set's own dedicated, chrome-free page
   (render_flashcards_set_page() + lc-flashcards-popup-template.php),
   reached via a "Study now" link instead of expanding inline. */
.lc-flashcards-popup {
    min-height: 100vh;
    width: 100%;
    padding: var(--lc-space-lg) 20px;
    box-sizing: border-box;
    background: var(--lc-bg-subtle);
}

/* Plain block centering (width + max-width + auto margins) instead of a
   flex wrapper — a flex item defaults to shrinking to fit its content
   instead of filling the line, which was making the deck render far
   narrower than its max-width. */
.lc-flashcards-page {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}

.lc-flashcards-page__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    margin-top: var(--lc-space-lg);
}

.lc-flashcards-page__actions form {
    margin: 0;
}

@media (max-width: 860px) {
    .lc-category-page__layout {
        grid-template-columns: 1fr;
    }

    .lc-category-page__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .lc-category-step__card > summary,
    .lc-category-step__card--link {
        flex-direction: column;
        align-items: flex-start;
    }

    .lc-category-step__progress {
        width: 100%;
    }

    .lc-breakdown-header {
        flex-direction: column;
    }

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

    /* Below this width there's no room for a third column, so the card
       detail panel becomes a drawer that opens over the page when a card
       is clicked, instead of sitting always-visible in the flow. */
    .lc-breakdown-detail {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        /* A flex column container with position:fixed doesn't reliably
           stretch to fit top/bottom via auto height — give it an explicit
           height so overflow-y: auto has an actual bound to clip/scroll
           against, instead of growing taller than the viewport. */
        height: 100vh;
        width: min(360px, 100vw);
        max-height: none;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 41;
        box-shadow: -8px 0 24px rgba(11, 37, 69, 0.15);
    }

    .lc-breakdown-detail--open {
        transform: translateX(0);
    }

    .lc-breakdown-detail__close {
        display: block;
    }

    .lc-breakdown-detail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(11, 37, 69, 0.35);
        z-index: 40;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease;
    }

    .lc-breakdown-detail-backdrop--open {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 520px) {
    .lc-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

/* Writing Practice — training1/training2/training3/evaluation stages
   (assets/js/lc-writing-practice.js). One shared card shell; only the
   inner controls (options vs. text input vs. sentence list) differ. */
.lc-wp-heading {
    max-width: 560px;
    margin: var(--lc-space-lg) auto 0;
}

.lc-wp-heading .lc-category-page__header-text h1 {
    font-size: 1.3rem;
}

/* On phones, .lc-category-page__header's own mobile rule stacks the icon
   above the text (fine for the fuller category page, but here it turns a
   small heading into a tall one) — keep this heading a compact row and
   shrink the icon instead. */
@media (max-width: 600px) {
    .lc-wp-heading {
        padding: var(--lc-space-md);
    }

    .lc-wp-heading.lc-category-page__header {
        flex-direction: row;
        align-items: center;
        gap: var(--lc-space-md);
    }

    .lc-wp-heading .lc-activity-card__icon--lg {
        width: 44px;
        height: 44px;
    }

    .lc-wp-heading .lc-activity-card__icon--lg svg {
        width: 22px;
        height: 22px;
    }

    .lc-wp-heading .lc-category-page__header-text h1 {
        font-size: 1.1rem;
    }

    .lc-wp-heading .lc-category-page__header-text p {
        font-size: 0.85rem;
    }
}

.lc-writing-practice {
    max-width: 560px;
    margin: var(--lc-space-lg) auto 0;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
}

.lc-writing-practice__intro {
    color: var(--lc-text-secondary);
    margin-top: 0;
}

.lc-wp-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--lc-space-sm);
}

.lc-wp-progress {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--lc-green);
}

.lc-wp-progress-bar {
    margin-bottom: var(--lc-space-lg);
}

.lc-wp-play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--lc-space-lg);
    padding: 12px 22px;
}

/* Evaluation's "Listen (N left)" button — green while re-reads remain,
   red once they're used up. Only Evaluation tracks a remaining count
   (Training 1/2/3's Listen is unlimited), so these modifiers are added
   by initEvaluation() in lc-writing-practice.js, not by default. The
   double-class selector beats .lc-btn--outline's color regardless of
   CSS file load order. */
.lc-wp-play.lc-wp-play--available {
    border-color: var(--lc-green);
    color: var(--lc-green);
}

.lc-wp-play.lc-wp-play--available:hover:not(:disabled) {
    background: rgba(46, 133, 64, 0.06);
}

.lc-wp-play.lc-wp-play--exhausted {
    border-color: var(--lc-red);
    color: var(--lc-red);
}

.lc-wp-options {
    counter-reset: lc-wp-option;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-sm);
    margin-bottom: var(--lc-space-md);
}

.lc-wp-option {
    counter-increment: lc-wp-option;
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    text-align: left;
    padding: 14px var(--lc-space-md);
    border: 1.5px solid var(--lc-border);
    border-radius: var(--lc-radius);
    background: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.lc-wp-option::before {
    content: counter(lc-wp-option, upper-alpha);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lc-bg-subtle);
    color: var(--lc-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.lc-wp-option:hover:not(:disabled) {
    border-color: var(--lc-blue);
    transform: translateY(-1px);
}

.lc-wp-option:disabled {
    cursor: default;
}

.lc-wp-option--correct {
    border-color: var(--lc-green);
    background: rgba(46, 133, 64, 0.08);
    color: var(--lc-green);
}

.lc-wp-option--correct::before {
    background: var(--lc-green);
    color: #fff;
}

.lc-wp-option--incorrect {
    border-color: var(--lc-red);
    background: rgba(224, 67, 90, 0.08);
    color: var(--lc-red);
}

.lc-wp-option--incorrect::before {
    background: var(--lc-red);
    color: #fff;
}

/* Civics Training 1's per-option speaker button — a plain sibling next to
   the existing .lc-wp-option (untouched, still Writing's own shared
   multiple-choice button), not nested inside it, since a <button> can't
   contain another <button>. */
.lc-civics-option-row {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
}

.lc-civics-option-row .lc-wp-option {
    flex: 1;
}

.lc-wp-option-play {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--lc-border);
    border-radius: 50%;
    background: #fff;
    color: var(--lc-blue);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lc-wp-option-play:hover:not(:disabled) {
    border-color: var(--lc-blue);
    background: rgba(0, 107, 182, 0.08);
}

.lc-wp-option-play:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Multi-answer Training 1 questions ("Name two...") — .lc-wp-option reused
   as a <label> wrapping a real checkbox instead of a <button>, since more
   than one option can be selected at once. */
.lc-wp-option--checkbox {
    cursor: pointer;
}

.lc-wp-option__checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.lc-wp-hint {
    margin: 0 0 var(--lc-space-md);
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.lc-wp-check-btn {
    margin-bottom: var(--lc-space-md);
}

.lc-wp-input-row {
    display: flex;
    gap: var(--lc-space-sm);
    margin-bottom: var(--lc-space-md);
}

.lc-wp-input {
    flex: 1;
    padding: 12px var(--lc-space-md);
    border: 1.5px solid var(--lc-border);
    border-radius: var(--lc-radius);
    font-size: 1rem;
    font-family: inherit;
}

.lc-wp-input--sentence {
    display: block;
    width: 100%;
    min-height: 70px;
    resize: vertical;
    margin-bottom: var(--lc-space-sm);
    box-sizing: border-box;
}

.lc-wp-input:disabled {
    background: var(--lc-bg-subtle);
    color: var(--lc-text-secondary);
}

.lc-wp-feedback {
    padding: var(--lc-space-sm) var(--lc-space-md);
    border-radius: var(--lc-radius);
    margin-bottom: var(--lc-space-md);
    font-size: 0.95rem;
    font-weight: 600;
}

.lc-wp-feedback--correct {
    background: rgba(46, 133, 64, 0.08);
    color: var(--lc-green);
}

.lc-wp-feedback--incorrect {
    background: rgba(224, 67, 90, 0.08);
    color: var(--lc-navy);
}

.lc-wp-feedback__you {
    margin: 0 0 4px;
    font-weight: 700;
}

.lc-wp-feedback__correct {
    margin: 0;
    color: var(--lc-green);
}

/* Training 3's per-word diff highlighting (sentenceDiffHtml() in
   lc-writing-practice.js) — pinpoints exactly which words are wrong in
   what the student typed, and which words they missed in the correct
   sentence, instead of just showing the two full sentences stacked. */
.lc-wp-diff {
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 700;
}

.lc-wp-diff--wrong {
    background: rgba(224, 67, 90, 0.18);
    color: var(--lc-red);
    text-decoration: line-through;
}

.lc-wp-diff--missing {
    background: rgba(46, 133, 64, 0.18);
    color: var(--lc-green);
}

/* Footer row shared by training1/2/3 — "Mark as practiced" on the left,
   the persistent "Next"/"View results" button on the right (see
   initWordDrill()/initSentenceDrill() in lc-writing-practice.js; the same
   button is relabeled rather than swapped). */
.lc-wp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    margin-top: var(--lc-space-lg);
    padding-top: var(--lc-space-lg);
    border-top: 1px solid var(--lc-border);
}

/* Same author-vs-UA-origin gotcha as .lc-btn[hidden] — this class's own
   `display: flex` always beats the native `hidden` attribute otherwise. */
.lc-wp-footer[hidden] {
    display: none;
}

/* "Mark as practiced" + "Next"/"View results" side by side, at full
   .lc-btn size, don't reliably fit a phone-width card with longer labels
   like "View results" — confirmed overflowing past the card edge on a
   375px viewport. Kept inline (not stacked): each button shrinks to share
   the row instead, with smaller padding/text and wrapping allowed so a
   long label breaks onto a second line rather than spilling outside. */
@media (max-width: 480px) {
    .lc-wp-footer .lc-wp-mark-btn,
    .lc-wp-footer .lc-wp-next {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 12px;
        font-size: 0.82rem;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }
}

/* Reading Practice's Next/View results button in its own purple (matching
   the category color) instead of Writing's shared navy-outline/orange
   look — makes it read as the distinct primary action next to the neutral
   "Mark as practiced" toggle, at any width. Scoped to .lc-reading-practice
   specifically so it doesn't repaint Writing's own Next/View results
   button, which shares the same .lc-wp-next class. */
.lc-reading-practice .lc-wp-next {
    background: var(--lc-purple);
    border-color: var(--lc-purple);
    color: #fff;
}

.lc-reading-practice .lc-wp-next:hover {
    background: #6a3fc7;
}

/* Civics Practice's own accent (blue, matching category_meta('civics')),
   same scoping reasoning as Reading's block above. */
.lc-civics-practice .lc-wp-next {
    background: var(--lc-blue);
    border-color: var(--lc-blue);
    color: #fff;
}

.lc-civics-practice .lc-wp-next:hover {
    background: color-mix(in srgb, var(--lc-blue) 85%, black);
}

/* Training 1/2's end-of-drill score + per-word breakdown — replaces the
   last item entirely once "View results" is clicked (see initWordDrill()
   in lc-writing-practice.js). */
.lc-wp-summary__header {
    display: flex;
    align-items: center;
    gap: var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

.lc-wp-summary__score-circle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.lc-wp-summary__score-circle--good {
    background: var(--lc-green);
}

.lc-wp-summary__score-circle--mid {
    background: var(--lc-orange);
}

.lc-wp-summary__score-circle--low {
    background: var(--lc-red);
}

.lc-wp-summary__score {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.lc-wp-summary__subtitle {
    margin: 0;
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
}

.lc-wp-summary__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-wp-summary__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--lc-space-sm);
    padding: var(--lc-space-sm) var(--lc-space-md);
    border-radius: var(--lc-radius);
    font-size: 0.9rem;
}

.lc-wp-summary__row--correct {
    background: rgba(46, 133, 64, 0.08);
}

.lc-wp-summary__row--incorrect {
    background: rgba(224, 67, 90, 0.08);
}

.lc-wp-summary__icon {
    flex-shrink: 0;
    display: flex;
}

.lc-wp-summary__row--correct .lc-wp-summary__icon {
    color: var(--lc-green);
}

.lc-wp-summary__row--incorrect .lc-wp-summary__icon {
    color: var(--lc-red);
}

.lc-wp-summary__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0;
}

.lc-wp-summary__play svg {
    width: 14px;
    height: 14px;
}

.lc-wp-summary__play:hover:not(:disabled) {
    opacity: 0.85;
}

.lc-wp-summary__play:disabled {
    background: var(--lc-gray);
    cursor: default;
}

.lc-wp-summary__word {
    flex: 1 1 120px;
    min-width: 0;
    font-weight: 700;
    word-break: break-word;
}

/* Wraps the question line and (Training 1 only) the answer line together,
   so both sit as one flex item inside .lc-wp-summary__row alongside the
   icon and status. */
.lc-wp-summary__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 0;
}

.lc-wp-summary__pair {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
}

.lc-wp-summary__pair--answer .lc-wp-summary__word {
    font-weight: 400;
    color: var(--lc-text-secondary);
    font-size: 0.9em;
}

.lc-wp-summary__pair--answer .lc-wp-summary__play {
    opacity: 0.75;
}

.lc-wp-summary__status {
    min-width: 0;
    word-break: break-word;
}

.lc-wp-summary__row--correct .lc-wp-summary__status {
    color: var(--lc-green);
}

.lc-wp-summary__row--incorrect .lc-wp-summary__status {
    color: var(--lc-red);
    text-align: right;
}

/* The Evaluation's pass/fail line — sits inside .lc-wp-summary__header-text,
   right above the score, so it reads as one unit with the score circle
   rather than floating separately above the whole card. */
.lc-wp-evaluation-result__status {
    margin: 0 0 2px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-wp-evaluation-result__status--passed {
    color: var(--lc-green);
}

.lc-wp-evaluation-result__status--failed {
    color: var(--lc-red);
}

/* Training 1/2/3's per-item "Mark as practiced" toggle — always visible,
   same pattern as .lc-fc-mark-word-btn--studied on the Study flashcards.
   Laid out by .lc-wp-footer (flex row) alongside .lc-wp-next. */
.lc-wp-mark-btn--practiced {
    background: var(--lc-green);
    border-color: var(--lc-green);
    color: #fff;
}

.lc-writing-result {
    max-width: 560px;
    margin: var(--lc-space-lg) auto 0;
}

.lc-writing-result__score {
    color: var(--lc-navy);
}

.lc-writing-result__row {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-sm);
    padding: var(--lc-space-md);
    border-radius: var(--lc-radius);
    margin-bottom: var(--lc-space-sm);
}

.lc-writing-result__row--correct {
    background: rgba(46, 133, 64, 0.08);
}

.lc-writing-result__row--incorrect {
    background: rgba(224, 67, 90, 0.08);
}

.lc-writing-result__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 2px;
}

.lc-writing-result__play svg {
    width: 16px;
    height: 16px;
}

.lc-writing-result__play:hover:not(:disabled) {
    opacity: 0.85;
}

.lc-writing-result__play:disabled {
    background: var(--lc-gray);
    cursor: default;
}

.lc-writing-result__text {
    flex: 1;
    min-width: 0;
}

.lc-writing-result__typed {
    margin: 0 0 4px;
    font-weight: 700;
    word-break: break-word;
}

.lc-writing-result__correct {
    margin: 0;
    color: var(--lc-green);
    word-break: break-word;
}

/* Reading Test — reuses every .lc-wp- and .lc-writing-result rule above
   as-is (LC_Reading_Practice dual-classes its containers
   .lc-reading-practice.lc-writing-practice rather than duplicating the
   shell/progress-bar/footer/summary/result rules for a second class).
   Only the read-aloud-specific pieces below are new: the on-screen text
   the student reads, and the record button's own states (idle/recording),
   replacing Writing's Listen button + typed <input>/<textarea>. */
.lc-wp-reading-text {
    margin: 0 0 var(--lc-space-md);
    padding: 28px var(--lc-space-lg);
    background: rgba(124, 79, 224, 0.08);
    border: 2px solid var(--lc-purple);
    border-radius: var(--lc-radius-lg);
    color: var(--lc-navy);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* Training 1 shows one word at a time — the single focal point of the
   whole drill — so it gets extra size/weight beyond the shared base
   above, which stays tuned for full sentences (Training 2/3/Evaluation). */
.lc-wp-reading-text--word {
    font-size: 2.4rem;
    font-weight: 800;
}

.lc-wp-reading-text--evaluation {
    font-size: 1.6rem;
}

/* Civics Practice reuses this same block (dual-classed the same way
   Reading is — see the comment above) for its question text, but in its
   own blue rather than Reading's hardcoded purple. */
.lc-civics-practice .lc-wp-reading-text {
    background: rgba(0, 107, 182, 0.08);
    border-color: var(--lc-blue);
}

/* Training 3/Evaluation never show the question as text (audio only, see
   render_spoken_drill_page()/render_evaluation_page()) — a lighter,
   italic instruction line instead of the bold question styling above,
   so it doesn't read as if it were the question itself. */
.lc-wp-reading-text--audio-only {
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    color: var(--lc-text-secondary);
}

/* Pronunciation clip + phonetic text as one inline row — the speaker icon
   sits directly in front of the text it plays, same "icon button + text"
   shape as lc-flashcards.js's per-word audio row, instead of a separate
   full-width "Listen to pronunciation" button below. */
.lc-wp-pron-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -8px 0 var(--lc-space-sm);
}

.lc-wp-pron-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0;
}

.lc-wp-pron-audio-btn:hover {
    opacity: 0.85;
}

.lc-wp-pron-text {
    color: var(--lc-text-secondary);
    font-size: 0.95rem;
    font-style: italic;
}

/* Spanish translation row, shown under the pronunciation — same ES badge
   language as lc-flashcards.js's .lc-fc-lang-badge--es, kept as its own
   small pair of rules here rather than reusing that class directly, since
   this component has no dependency on lc-flashcards.js loading. */
.lc-wp-translation {
    margin: 0 0 var(--lc-space-md);
    color: var(--lc-navy);
    font-size: 1rem;
    text-align: center;
}

.lc-wp-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    margin-right: 6px;
    border-radius: 4px;
    background: var(--lc-green);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.lc-wp-record-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 22px;
    margin-bottom: var(--lc-space-sm);
}

/* Recording state — double-class selector, same override approach as
   .lc-wp-play--available/--exhausted, so it beats .lc-btn--solid's color
   regardless of CSS file load order. The pulsing dot mirrors the
   universal "recording" affordance used by voice-memo/video apps. */
.lc-wp-record-btn.lc-wp-record-btn--recording {
    background: var(--lc-red);
    border-color: var(--lc-red);
    animation: lc-wp-record-pulse 1.4s ease-in-out infinite;
}

@keyframes lc-wp-record-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 67, 90, 0.45); }
    50% { box-shadow: 0 0 0 10px rgba(224, 67, 90, 0); }
}

/* Done state — once a clip has been graded, the button stays disabled
   (see submitAttempt() in lc-reading-practice.js) but switches to a muted
   gray instead of quietly reverting to the default solid color, so it
   reads as "already recorded, can't record again" rather than looking
   like any other idle disabled button. No hover treatment — it's
   disabled, so hovering it shouldn't visually react at all. */
.lc-wp-record-btn.lc-wp-record-btn--done,
.lc-wp-record-btn.lc-wp-record-btn--done:hover {
    background: var(--lc-gray);
    border-color: var(--lc-gray);
    opacity: 1;
}

.lc-wp-record-status {
    min-height: 1.2em;
    margin: 0 0 var(--lc-space-md);
    color: var(--lc-text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

/* Persistent "Install app" banner (LC_Pwa::render_install_banner() +
   assets/js/lc-pwa-install-banner.js) — always in the markup, JS
   reveals it once the browser confirms the app is installable. */
.lc-pwa-banner {
    position: fixed;
    left: var(--lc-space-md);
    right: var(--lc-space-md);
    bottom: var(--lc-space-md);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    max-width: 480px;
    margin: 0 auto;
    background: var(--lc-navy);
    color: #fff;
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-md);
}

.lc-pwa-banner[hidden] {
    display: none;
}

/* Chrome-free flashcards popup (lc-flashcards-popup-template.php) —
   the banner would compete with a page that's deliberately minimal. */
body.lc-app--popup .lc-pwa-banner {
    display: none !important;
}

.lc-pwa-banner__icon {
    border-radius: var(--lc-radius);
    flex-shrink: 0;
}

.lc-pwa-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85);
}

.lc-pwa-banner__text strong {
    color: #fff;
    font-size: 0.95rem;
}

.lc-pwa-banner__install {
    flex-shrink: 0;
}

.lc-pwa-banner__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.lc-pwa-banner__close:hover {
    color: #fff;
}

@media (max-width: 520px) {
    .lc-pwa-banner {
        flex-wrap: wrap;
    }

    .lc-pwa-banner__text {
        order: 1;
        flex-basis: 100%;
    }

    .lc-pwa-banner__install {
        order: 2;
        margin-left: auto;
    }
}