/**
 * BIBH Flashcards - front-end styles
 *
 * DESIGN TOKEN RULE (feedback_bibh_design_tokens.md):
 *   All colours and font MUST be inherited from the classroom-suite sidebar scope.
 *   Never hardcode hex values for brand colours; always use:
 *     --bibh-primary   (#3F8170 green)
 *     --bibh-secondary (#91D1DB teal)
 *     --bibh-accent    (#F3D76A yellow)
 *     --bibh-dark      (#203D48 navy)
 *     --bibh-font      (League Spartan, set by suite sidebar)
 *
 *   For roles with no brand equivalent (e.g. "known" green, "unknown" red),
 *   use namespaced tokens under --bibh-fc-* with a harmonious fallback hex.
 *
 *   Reference HTML (Anki, Quizlet, etc.) → borrow LAYOUT only, never colours/fonts.
 *
 * Token scope block - add .bibh-fc to selector list when Track 6 widens
 * the quiz-builder token scope block (or duplicate here if plugins must
 * work independently).
 */

/* =========================================================================
   Theme reset - override Astra table border colour
   ========================================================================= */
.bibh-fc td,
.bibh-fc th {
    border-color: var(--bibh-border, #e2e5ea) !important;
}

/* =========================================================================
   Token scope  (inherits brand palette from .bibh-suite__sidebar context)
   ========================================================================= */
.bibh-fc {
    /* Namespaced surface tokens - no direct brand equivalent */
    --bibh-fc-surface:     #f7f9f8;
    --bibh-fc-border:      #d8e5e1;
    --bibh-fc-muted:       #6b8a84;
    --bibh-fc-ink:         var(--bibh-dark, #203D48);

    /* Response feedback colours */
    --bibh-fc-known:       var(--bibh-primary,   #3F8170);   /* green  = "know it" */
    --bibh-fc-retest:      var(--bibh-accent,    #F3D76A);   /* yellow = "test again" */
    --bibh-fc-unknown:     #c0503a;                          /* terracotta = "don't know" (no brand eq.) */

    /* Card chrome */
    --bibh-fc-card-radius: 30px;
    --bibh-fc-card-shadow: 0 2px 12px rgba(32, 61, 72, .12);

    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    color: var(--bibh-fc-ink);
}

/* =========================================================================
   Layout wrapper - fills the suite main panel (no centering)
   ========================================================================= */
.bibh-fc {
    max-width: none;
    margin: 0;
    padding: 0;
}

.bibh-fc__header {
    margin-bottom: 28px;
}

.bibh-fc__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--bibh-dark, #203D48);
    letter-spacing: -0.01em;
}

.bibh-fc__subtitle {
    font-size: .95rem;
    color: var(--bibh-fc-muted);
    margin: 0;
}

/* =========================================================================
   Card (selector)
   ========================================================================= */
.bibh-fc__chapter-card {
    border: 1px solid var(--bibh-fc-border);
    border-radius: 30px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: var(--bibh-fc-surface);
}

.bibh-fc__chapter-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--bibh-dark, #203D48);
}

/* LO chip multi-select - full JS in flashcard-engine.js (Track 5b) */
.bibh-fc__lo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bibh-fc__lo-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--bibh-dark, #203D48);
    background: var(--bibh-dark, #203D48);
    color: #fff;
    font-size: .85rem;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}

.bibh-fc__lo-chip:hover {
    background: #2a4f5e;
    border-color: #2a4f5e;
}

.bibh-fc__lo-chip.is-selected,
.bibh-fc__lo-chip:focus-visible {
    border-color: #3c887b;
    background: #3c887b;
    color: #fff;
    outline: none;
}

/* =========================================================================
   Flashcard flip surface
   ========================================================================= */
/* =========================================================================
   Response buttons
   ========================================================================= */
/* =========================================================================
   Progress bar + counters
   ========================================================================= */
/* =========================================================================
   Session results
   ========================================================================= */
.bibh-fc__results-summary {
    text-align: center;
    padding: 32px 0;
}

.bibh-fc__results-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--bibh-dark, #203D48);
}

.bibh-fc__results-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
    flex-wrap: wrap;
}

.bibh-fc__results-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bibh-fc__results-stat-value {
    font-size: 2rem;
    font-weight: 700;
}

.bibh-fc__results-stat-label {
    font-size: .8rem;
    color: var(--bibh-fc-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bibh-fc__results-stat--known  .bibh-fc__results-stat-value { color: var(--bibh-fc-known); }
.bibh-fc__results-stat--review .bibh-fc__results-stat-value { color: var(--bibh-dark, #203D48); }

/* Score bar */
.bibh-fc__results-bar-wrap {
    max-width: 320px;
    margin: 20px auto 0;
    background: var(--bibh-fc-border);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.bibh-fc__results-bar {
    height: 100%;
    border-radius: 999px;
    width: var(--pct, 0%);
    background: var(--bibh-primary, #3F8170);
    transition: width .6s ease;
}

/* CTA row */
.bibh-fc__results-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* =========================================================================
   Selector form
   ========================================================================= */
.bibh-fc__sel-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bibh-fc__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bibh-fc__label {
    font-size: .9rem;
    font-weight: 700;
    color: var(--bibh-dark, #203D48);
}

.bibh-fc__label-hint {
    font-weight: 400;
    color: var(--bibh-fc-muted);
    margin-left: 4px;
}

.bibh-fc__select {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--bibh-fc-border);
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: .95rem;
    color: var(--bibh-fc-ink);
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23203D48' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    max-width: 360px;
}

.bibh-fc__select:focus {
    outline: 2px solid var(--bibh-primary, #3F8170);
    outline-offset: 2px;
}

/* Select all / deselect all button */
.bibh-fc__sel-all-btn {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: .82rem;
    font-weight: 600;
    color: var(--bibh-primary, #3F8170);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bibh-fc__sel-all-btn:hover { opacity: .8; }

/* Card count presets */
.bibh-fc__count-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bibh-fc__count-btn {
    padding: 8px 18px;
    border-radius: 30px;
    border: 1.5px solid var(--bibh-fc-border);
    background: #fff;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: .9rem;
    font-weight: 600;
    color: var(--bibh-fc-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.bibh-fc__count-btn:hover {
    border-color: var(--bibh-primary, #3F8170);
    color: var(--bibh-primary, #3F8170);
}
.bibh-fc__count-btn.is-active,
.bibh-fc__count-btn:focus-visible {
    border-color: var(--bibh-primary, #3F8170);
    color: var(--bibh-primary, #3F8170);
    background: rgba(63, 129, 112, .07);
    outline: none;
}

/* Count hint */
.bibh-fc__count-hint {
    font-size: .83rem;
    color: var(--bibh-fc-muted);
    margin: 0;
}

/* Start button */
.bibh-fc__field--submit { align-items: flex-start; }

.bibh-fc__start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 30px;
    border: none;
    background: var(--bibh-primary, #3F8170);
    color: #fff;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

.bibh-fc__start-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.bibh-fc__start-btn:not(:disabled):hover { opacity: .88; }
.bibh-fc__start-btn:not(:disabled):active { transform: scale(.98); }

/* Spinner inside start button */
.bibh-fc__start-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bibh-fc-spin .65s linear infinite;
}

/* Error / notice */
.bibh-fc__notice--error {
    background: rgba(192, 80, 58, .09);
    border: 1px solid rgba(192, 80, 58, .3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .9rem;
    color: #8b2a18;
}

/* =========================================================================
   Session UI additions
   ========================================================================= */

/* Counter dots */
/* Response button sub-hint text */
/* Pass indicator */
/* Session AJAX error */
.bibh-fc__session-error {
    text-align: center;
    font-size: .85rem;
    color: var(--bibh-fc-unknown);
    margin: 8px 0 0;
}

/* Expired state */
.bibh-fc__expired {
    text-align: center;
    padding: 32px 16px;
}

.bibh-fc__expired-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.bibh-fc__expired-msg {
    color: var(--bibh-fc-muted);
    margin-bottom: 20px;
}

/* Completing overlay */
.bibh-fc__completing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
}

.bibh-fc__completing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--bibh-fc-muted);
    font-size: .95rem;
}

.bibh-fc__completing-spinner {
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--bibh-fc-border);
    border-top-color: var(--bibh-primary, #3F8170);
    border-radius: 50%;
    animation: bibh-fc-spin .7s linear infinite;
}

/* Action buttons (results page) */
.bibh-fc__btn-action {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 30px;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}

.bibh-fc__btn-action--primary {
    background: var(--bibh-primary, #3F8170);
    color: #fff;
}

.bibh-fc__btn-action--ghost {
    background: transparent;
    border: 1.5px solid var(--bibh-fc-border);
    color: var(--bibh-fc-muted);
}

/* Pinned across every state: the theme repaints links and buttons on hover, which
   turned this from brand green into the theme's own colour mid-hover. */
.bibh-fc__btn-action:hover { opacity: .92; text-decoration: none; }
.bibh-fc__btn-action--primary,
.bibh-fc__btn-action--primary:hover,
.bibh-fc__btn-action--primary:focus,
.bibh-fc__btn-action--primary:active {
    background: var(--bibh-primary, #3F8170); color: #fff; border: none;
}
.bibh-fc__btn-action--primary:hover { background: var(--bibh-primary-dark, #346b5d); color: #fff; }
.bibh-fc__btn-action--primary:focus-visible { outline: 2px solid var(--bibh-primary-dark, #346b5d); outline-offset: 3px; }
.bibh-fc__btn-action--ghost,
.bibh-fc__btn-action--ghost:hover,
.bibh-fc__btn-action--ghost:focus,
.bibh-fc__btn-action--ghost:active {
    background: transparent; border: 1.5px solid var(--bibh-fc-border); color: var(--bibh-fc-muted);
}
.bibh-fc__btn-action--ghost:hover { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); }

/* Spin keyframes */
@keyframes bibh-fc-spin {
    to { transform: rotate(360deg); }
}

/* Results subtitle */
.bibh-fc__results-subtitle {
    font-size: .95rem;
    color: var(--bibh-fc-muted);
    margin: 0 0 8px;
}

/* pct stat */
.bibh-fc__results-stat--pct .bibh-fc__results-stat-value {
    color: var(--bibh-primary, #3F8170);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 600px) {
    .bibh-fc__response-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .bibh-fc__card-text {
        font-size: 1rem;
    }

    .bibh-fc__results-stats {
        gap: 16px;
    }
}

/* ── Finish session button ───────────────────────────────────────────── */
.bibh-fc__btn-finish:hover:not(:disabled) {
  background: var(--bibh-fc-surface, #f4f8f7);
  border-color: var(--bibh-fc-primary, #2d6a60);
  color: var(--bibh-fc-primary, #2d6a60);
}

.bibh-fc__btn-finish:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================================================
   Selector v2 - Chapter Card Redesign
   ========================================================================= */

/* ── Strength colour tokens (shared by progress bars + chips) ─────────── */
:root {
    --bibh-fc-strength-strong:     #2d6a60;   /* teal - matches --bibh-fc-primary  */
    --bibh-fc-strength-strong-bg:  #e6f4f2;
    --bibh-fc-strength-fair:       #d97706;   /* amber                             */
    --bibh-fc-strength-fair-bg:    #fef3c7;
    --bibh-fc-strength-weak:       #dc2626;   /* red                               */
    --bibh-fc-strength-weak-bg:    #fee2e2;
    --bibh-fc-strength-none-bg:    #f1f5f3;   /* grey - no data yet                */
}

/* ── Search box ────────────────────────────────────────────────────────── */
.bibh-fc__search {
    position: relative;
    margin-bottom: 16px;
}

.bibh-fc__search-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--bibh-fc-border, #d0d9d6);
    border-radius: 30px;
    padding: 12px 20px 12px 54px;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--bibh-fc-text, #1a3530);
    background: #fff;
}

.bibh-fc__search-input::placeholder { color: var(--bibh-fc-muted, #9fb1b7); }

.bibh-fc__search-input:focus {
    outline: none;
    border-color: var(--bibh-secondary, #91D1DB);
    box-shadow: 0 0 0 3px rgba(145, 209, 219, 0.25);
}

.bibh-fc__search-ic {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bibh-fc-muted, #9fb1b7);
    font-size: 0.95rem;
    pointer-events: none;
}

/* ── Tab strip ─────────────────────────────────────────────────────────── */
.bibh-fc__tab-strip {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bibh-fc-border, #d0d9d6);
}

.bibh-fc__tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 16px;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bibh-fc-muted, #7a9490);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bibh-fc__tab:hover {
    color: var(--bibh-fc-primary, #2d6a60);
    background: rgba(45, 106, 96, 0.08);
    border-radius: 30px;
}

.bibh-fc__tab.is-active {
    color: var(--bibh-fc-primary, #2d6a60);
    font-weight: 800;
    border-bottom-color: var(--bibh-fc-primary, #2d6a60);
    background: rgba(45, 106, 96, 0.08);
    border-radius: 30px;
}

.bibh-fc__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--bibh-fc-strength-weak, #dc2626);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.bibh-fc__tab-badge:empty {
    display: none;
}

/* ── Chapter list (accordion stack) ────────────────────────────────────── */
.bibh-fc__cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* ── Individual chapter card (accordion) ───────────────────────────────── */
.bibh-fc__chapter-card {
    background: var(--bibh-fc-bg, #fff);
    border: 1.5px solid var(--bibh-fc-border, #d0d9d6);
    border-radius: 30px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.bibh-fc__chapter-card.is-open {
    border-color: var(--bibh-fc-primary, #2d6a60);
    box-shadow: 0 6px 16px rgba(45, 106, 96, 0.10);
}

/* Card contains at least one selected outcome */
.bibh-fc__chapter-card.has-selection {
    border-color: var(--bibh-fc-primary, #2d6a60);
}

/* ── Card header (click to expand / collapse) ──────────────────────────── */
.bibh-fc__chapter-hdr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-radius: 30px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.bibh-fc__chapter-hdr:hover { background: var(--bibh-fc-surface, #f4f8f7); }

.bibh-fc__chapter-hdr:focus-visible {
    outline: 2px solid var(--bibh-fc-primary, #2d6a60);
    outline-offset: -2px;
}

.bibh-fc__chapter-hdr-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.bibh-fc__ch-num {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bibh-fc-muted, #7a9490);
    white-space: nowrap;
}

.bibh-fc__ch-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bibh-fc-text, #1a3530);
    line-height: 1.25;
}

.bibh-fc__chapter-card.is-open .bibh-fc__ch-name { color: var(--bibh-fc-primary, #2d6a60); }

.bibh-fc__ch-pct {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bibh-fc-muted, #7a9490);
    min-width: 38px;
    text-align: right;
}

/* Chevron reuses the suite side-menu glyph (.bibh-hubmenu__chevron double-chevron
   SVG). That glyph points left; rotate to right when collapsed, down when open. */
.bibh-fc__chev {
    color: var(--bibh-fc-muted, #9fb1b7);
    flex: none;
    line-height: 0;
    display: inline-flex;
    transition: color 0.2s;
}

.bibh-fc__chev svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    transition: transform 0.2s;
}

.bibh-fc__chapter-card.is-open .bibh-fc__chev {
    color: var(--bibh-fc-primary, #2d6a60);
}

.bibh-fc__chapter-card.is-open .bibh-fc__chev svg {
    transform: rotate(270deg);
}

/* Progress bar (full width, under header) */
.bibh-fc__ch-progress {
    height: 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
    overflow: hidden;
    margin: 0 18px 14px;
}

.bibh-fc__ch-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
    background: var(--bibh-fc-muted, #b0c4c0);   /* fallback / 'none' tier */
}

.bibh-fc__ch-progress-fill--strong {
    background: var(--bibh-fc-strength-strong, #2d6a60);
}

.bibh-fc__ch-progress-fill--fair {
    background: var(--bibh-fc-strength-fair, #d97706);
}

.bibh-fc__ch-progress-fill--weak {
    background: var(--bibh-fc-strength-weak, #dc2626);
}

/* ── Outcomes (collapsible) ────────────────────────────────────────────── */
.bibh-fc__card-los {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.bibh-fc__chapter-card.is-open .bibh-fc__card-los { max-height: 900px; }

.bibh-fc__card-los-inner {
    padding: 0 14px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ── Outcome row (selectable) ──────────────────────────────────────────── */
.bibh-fc__lo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--bibh-fc-border, #d0d9d6);
    border-radius: 30px;
    padding: 11px 16px;
    cursor: pointer;
    background: #fff;
    text-align: left;
    width: 100%;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    transition: border-color 0.12s, background 0.12s;
}

.bibh-fc__lo-row:hover:not(.is-selected) { background: var(--bibh-fc-surface, #f4f8f7); }

.bibh-fc__lo-row:focus-visible {
    outline: 2px solid var(--bibh-fc-primary, #2d6a60);
    outline-offset: 2px;
}

/* Status dot: green >=70 / orange 40-69 / red <40 / grey none */
.bibh-fc__lo-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--bibh-neutral, #cbd5d1);
}
.bibh-fc__lo-dot--strong { background: var(--bibh-fc-strength-strong, #2d6a60); }
.bibh-fc__lo-dot--fair   { background: var(--bibh-fc-strength-fair, #d97706); }
.bibh-fc__lo-dot--weak   { background: var(--bibh-fc-strength-weak, #dc2626); }

/* Tick circle */
.bibh-fc__lo-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bibh-fc-border, #cdd9dd);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    transition: background 0.12s, border-color 0.12s;
}

.bibh-fc__lo-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bibh-fc-text, #1a3530);
    line-height: 1.25;
    min-width: 0;
}

.bibh-fc__lo-code {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bibh-fc-muted, #7a9490);
    margin-left: auto;
    white-space: nowrap;
}

/* Selected outcome row */
.bibh-fc__lo-row.is-selected {
    border-color: var(--bibh-fc-primary, #2d6a60);
    background: var(--bibh-fc-strength-strong-bg, #e6f4f2);
}
.bibh-fc__lo-row.is-selected .bibh-fc__lo-tick {
    background: var(--bibh-fc-primary, #2d6a60);
    border-color: var(--bibh-fc-primary, #2d6a60);
}
.bibh-fc__lo-row.is-selected .bibh-fc__lo-name { color: var(--bibh-fc-primary, #2d6a60); }

/* ── Needs Work flat list ──────────────────────────────────────────────── */
.bibh-fc__needs-hint {
    font-size: 0.85rem;
    color: var(--bibh-fc-muted, #7a9490);
    font-weight: 600;
    margin: 0 2px 14px;
}

.bibh-fc__needs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.bibh-fc__nrow {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--bibh-fc-border, #d0d9d6);
    border-radius: 30px;
    padding: 13px 18px;
    cursor: pointer;
    background: #fff;
    text-align: left;
    width: 100%;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    transition: border-color 0.12s, background 0.12s;
}

.bibh-fc__nrow:hover:not(.is-selected) { background: var(--bibh-fc-surface, #f4f8f7); }

.bibh-fc__nrow:focus-visible {
    outline: 2px solid var(--bibh-fc-primary, #2d6a60);
    outline-offset: 2px;
}

.bibh-fc__nrow-info { min-width: 0; }

.bibh-fc__nrow-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--bibh-fc-text, #1a3530);
    line-height: 1.25;
}

.bibh-fc__nrow-chap {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bibh-fc-muted, #7a9490);
    margin-top: 2px;
}

.bibh-fc__nrow-pct {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 800;
    flex: none;
}

.bibh-fc__nrow.is-selected {
    border-color: var(--bibh-fc-primary, #2d6a60);
    background: var(--bibh-fc-strength-strong-bg, #e6f4f2);
}
.bibh-fc__nrow.is-selected .bibh-fc__lo-tick {
    background: var(--bibh-fc-primary, #2d6a60);
    border-color: var(--bibh-fc-primary, #2d6a60);
}

/* ── Needs Work empty state ─────────────────────────────────────────────── */
.bibh-fc__nw-empty {
    text-align: center;
    padding: 32px 16px;
    font-size: 0.95rem;
    color: var(--bibh-fc-muted, #7a9490);
    font-style: italic;
}

/* ── Action bar (sticky footer, always visible) ────────────────────────── */
.bibh-fc__action-bar {
    position: sticky;
    bottom: 0;
    background: var(--bibh-fc-bg, #fff);
    border-top: 2px solid var(--bibh-fc-border, #d0d9d6);
    padding: 14px 0 16px;
    margin-top: 8px;
    z-index: 10;
}

.bibh-fc__action-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.bibh-fc__count-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bibh-fc__count-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bibh-fc-muted, #7a9490);
    white-space: nowrap;
}

.bibh-fc__sel-summary {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bibh-fc-muted, #7a9490);
    text-align: right;
    min-width: 0;
}

.bibh-fc__action-bar.has-selection .bibh-fc__sel-summary {
    color: var(--bibh-fc-primary, #2d6a60);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bibh-fc__card-los-inner,
    .bibh-fc__needs-list {
        grid-template-columns: 1fr;
    }

    .bibh-fc__action-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .bibh-fc__count-group { justify-content: center; }

    .bibh-fc__sel-summary {
        margin-left: 0;
        text-align: center;
    }

    .bibh-fc__start-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================================
   IMMERSIVE SESSION REDESIGN (mockup v4)
   -------------------------------------------------------------------------
   The session takes over the full viewport WITHIN the site: a fixed, inset:0
   overlay carrying the soft-red field, painted above the theme header/footer.
   Deliberately NOT the browser Fullscreen API - that needs a user gesture and
   hides everything outside the fullscreen element (the trap the quiz hit).

   z-index sits below the self-timer's 9999 so #bq-bl-timer stays clickable.
   ========================================================================= */
.bibh-fc--immersive {
    --fc-red:        #f32201;
    --fc-red-dark:   #c21b00;
    --fc-red-edge:   #b81800;
    --fc-red-soft:   #ffb7ab;
    --fc-amber:      #ffb01f;
    --fc-amber-dark: #c9821b;
    --fc-amber-edge: #c47f00;
    --fc-green-edge: #285d4e;
    /* "Kind of Know" only, see the knob rule. Brand accent yellow + its edge. */
    --fc-yellow:      #F3D76A;
    --fc-yellow-edge: #c9ab34;
    --fc-shadow-strong: 0 10px 30px rgba(120, 20, 5, .14);

    position: fixed;
    inset: 0;
    z-index: 9000;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(165deg, #ffe6e0, #ffd6cd 60%, #ffc7bb);
    padding: 26px 20px 54px;
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    -webkit-overflow-scrolling: touch;
}

/* Lock the page behind the overlay so a scroll gesture moves the deck, not the
   site. Set by the engine on init and cleared on exit/completion. */
body.bibh-fc-immersive-open {
    overflow: hidden;
}

/* The timer is fixed at 9999 and must stay above the field and clickable. */
.bibh-fc--immersive ~ #bq-bl-timer,
#bq-bl-timer {
    z-index: 9999;
}

.bibh-fc--immersive .fc {
    max-width: 680px;
    margin: 0 auto;
    padding-top: 70px;
}

/* ---------- exit (this IS the finish control) ---------- */
.bibh-fc--immersive .fc-exit {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 5;
    background: #fff;
    border: 1.5px solid var(--bibh-border, #eadedb);
    box-shadow: var(--fc-shadow-strong);
    border-radius: 30px;
    padding: 13px 24px;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    color: var(--bibh-dark, #203D48);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
/* Astra repaints button:hover/:focus green - pin our own colours at class
   specificity across all three states. */
.bibh-fc--immersive .fc-exit:hover,
.bibh-fc--immersive .fc-exit:focus,
.bibh-fc--immersive .fc-exit:active {
    background: #fff2ef;
    border-color: var(--fc-red-soft);
    color: var(--fc-red-dark);
}

/* ---------- XP coin box ---------- */
.bibh-fc--immersive .fc-xp {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--bibh-border, #eadedb);
    box-shadow: var(--fc-shadow-strong);
    border-radius: 40px;
    padding: 8px 20px 8px 8px;
}
.bibh-fc--immersive .fc-xp .coin { width: 38px; height: 38px; flex: none; }
.bibh-fc--immersive .fc-xp .lbl  { font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #8a7d7a; }
.bibh-fc--immersive .fc-xp b     { font-size: 26px; font-weight: 900; color: var(--bibh-dark, #203D48); line-height: 1; min-width: 34px; text-align: right; }
.bibh-fc--immersive .fc-xp .pop  { position: absolute; right: 20px; top: -6px; font-size: 16px; font-weight: 900; color: var(--bibh-primary, #3F8170); opacity: 0; pointer-events: none; }
.bibh-fc--immersive .fc-xp .pop.go { animation: bibhFcXpPop 1s ease forwards; }
@keyframes bibhFcXpPop {
    0%   { opacity: 0; transform: translateY(6px); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-26px); }
}
.bibh-fc--immersive .fc-xp .coin.bounce { animation: bibhFcCoinBounce .72s cubic-bezier(.3, 1.5, .5, 1); filter: drop-shadow(0 0 10px rgba(255, 201, 60, .9)); }
@keyframes bibhFcCoinBounce {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-14px) scale(1.25); }
    100% { transform: translateY(0) scale(1); }
}

/* ---------- top bar: card label + dots + chapter pill ---------- */
.bibh-fc--immersive .fc-top     { max-width: 680px; margin: 0 auto 4px; }
/* "Card X of N" and the dots are ONE centred group, so the pair lines up with the
   chapter pill below. (The label used to be absolutely pinned left, which centred
   only the dots and left the pair reading off-centre against the pill; it could
   also overlap the dots once the label got wide enough.) */
.bibh-fc--immersive .fc-topline {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; min-height: 36px;
}
.bibh-fc--immersive .fc-cardlbl {
    flex: none;
    font-size: 19px; font-weight: 800; color: var(--bibh-dark, #203D48); white-space: nowrap;
}
.bibh-fc--immersive .fc-cardlbl b { font-weight: 900; }
.bibh-fc--immersive .fc-dots      { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.bibh-fc--immersive .fc-dots .d {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    background: #f4c9be; box-shadow: inset 0 0 0 1px rgba(180, 60, 30, .12);
    transition: background .2s, transform .2s;
}
.bibh-fc--immersive .fc-dots .d.known  { background: var(--bibh-primary, #3F8170); box-shadow: none; }
.bibh-fc--immersive .fc-dots .d.review { background: var(--fc-amber); box-shadow: none; }
.bibh-fc--immersive .fc-dots .d.miss   { background: var(--fc-red); box-shadow: none; }
.bibh-fc--immersive .fc-dots .d.cur    { background: #fff; box-shadow: 0 0 0 3px var(--bibh-dark, #203D48); transform: scale(1.05); }
.bibh-fc--immersive .fc-chappill {
    display: block; width: max-content; max-width: 100%; margin: 16px auto 0;
    background: rgba(243, 34, 1, .10); color: var(--fc-red-dark);
    font-size: 13px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    padding: 9px 20px; border-radius: 30px; text-align: center;
}

/* ---------- stacked deck + flip card ---------- */
.bibh-fc--immersive .fc-deck  { position: relative; max-width: 500px; margin: 26px auto 46px; height: 300px; }
.bibh-fc--immersive .fc-stack { position: absolute; inset: 0; border-radius: 30px; background: #fff; box-shadow: 0 8px 20px rgba(120, 20, 5, .12); z-index: 1; }
.bibh-fc--immersive .fc-stack.s1 { transform: translate(6px, 7px) rotate(1.4deg);   background: #fff4f2; }
.bibh-fc--immersive .fc-stack.s2 { transform: translate(12px, 14px) rotate(2.6deg); background: #ffe9e5; }
.bibh-fc--immersive .fc-stack.s3 { transform: translate(-6px, 6px) rotate(-1.4deg); background: #fff4f2; }

.bibh-fc--immersive .fc-card  { position: relative; width: 100%; height: 100%; cursor: pointer; perspective: 1400px; z-index: 3; }
.bibh-fc--immersive .fc-inner { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.3, .7, .3, 1); transform-style: preserve-3d; }
.bibh-fc--immersive .fc-card.is-flipped .fc-inner { transform: rotateY(180deg); }
.bibh-fc--immersive .fc-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 30px; background: #fff; box-shadow: 0 16px 40px rgba(120, 20, 5, .22);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 38px 40px; border: 1px solid #fff; overflow: hidden;
}
.bibh-fc--immersive .fc-face .side { position: absolute; top: 20px; left: 24px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.bibh-fc--immersive .fc-front .side { color: var(--fc-red-dark); }
.bibh-fc--immersive .fc-back        { transform: rotateY(180deg); background: #fff; }
.bibh-fc--immersive .fc-back .side  { color: #346b5d; }
.bibh-fc--immersive .fc-term { font-size: 32px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.2; margin: 0; }
.bibh-fc--immersive .fc-def  { font-size: 20px; font-weight: 500; color: #3D3D3D; line-height: 1.5; margin: 0; }
.bibh-fc--immersive .fc-def b { color: var(--bibh-dark, #203D48); font-weight: 800; }
.bibh-fc--immersive .fc-tap  { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #8a7d7a; }
/* Optional card image sits above the text and never pushes it out of the card. */
.bibh-fc--immersive .fc-cardimg { display: block; max-width: 100%; max-height: 42%; width: auto; height: auto; margin: 0 auto 14px; object-fit: contain; border-radius: 12px; }

/* Deal: quick shrink + fade out, next fades in. No recede-to-back motion. */
.bibh-fc--immersive .fc-card.dealing    { pointer-events: none; animation: bibhFcCardOut .24s ease forwards; }
@keyframes bibhFcCardOut { to { transform: translateY(10px) scale(.9); opacity: 0; } }
.bibh-fc--immersive .fc-card.dealing-in { animation: bibhFcCardIn .24s ease forwards; }
@keyframes bibhFcCardIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── F-01: the Flashcards label wears its dashboard colour ────────────────
   Blitz already does this: the label on the activity screen matches the tile
   you pressed to get there, so the two are visibly the same thing. The
   flashcard pill was a washed-out tint of red on red; it now carries the tile's
   own --bibh-act-flash so the link back to the dashboard is unmistakable. */
.bibh-fc--immersive .fc-chappill {
    background: var(--bibh-act-flash, #f32201);
    color: #fff;
}

/* ── F-02: make it read as a real card ───────────────────────────────────
   Physical playing cards have a visible edge, a little inner margin and their
   marks in the corners. The face had none of that, so it read as a white div.

   Built so the FACE can go to print unchanged: everything here is geometry and
   ink, no screen-only effects on the card itself, and the print block at the
   bottom of this file drops the surrounding UI and keeps exactly this. Ashton
   may print physical decks, and sharing one design makes that nearly free. */
.bibh-fc--immersive .fc-face {
    /* The inner keyline a printed card has, drawn INSIDE the radius. */
    box-shadow:
        0 16px 40px rgba(120, 20, 5, .22),
        inset 0 0 0 1.5px rgba(32, 61, 72, .10);
}
.bibh-fc--immersive .fc-brand {
    position: absolute; display: block; pointer-events: none;
    opacity: .5;
}
/* Hub mark bottom right on the term side, brain bottom right on the answer
   side: the same corner on both, so flipping does not move the furniture. */
.bibh-fc--immersive .fc-brand--hub   { bottom: 16px; right: 18px; width: 74px; height: auto; }
.bibh-fc--immersive .fc-brand--brain { bottom: 12px; right: 14px; width: 52px; height: auto; opacity: .55; }

/* ── F-04: strand colour on the BORDER only ──────────────────────────────
   Blue strand 1, green strand 2, orange strand 3, exactly as specified. The
   fill stays white and the label and buttons stay red, so this says "which
   strand" without fighting F-01's "these are the red activity".

   Strand 4 exists on this platform (chapters 17-19) and the audit gives it no
   colour, so it deliberately has no rule here: those cards keep the default
   edge rather than being handed an invented one. */
.bibh-fc--immersive .fc-deck[data-strand="1"] .fc-face { border-color: #00b2ff; border-width: 3px; }
.bibh-fc--immersive .fc-deck[data-strand="2"] .fc-face { border-color: #049f84; border-width: 3px; }
.bibh-fc--immersive .fc-deck[data-strand="3"] .fc-face { border-color: #ffa700; border-width: 3px; }
/* The stacked cards behind pick the tint up too, or the deck looks mismatched
   the moment the top card is coloured. */
.bibh-fc--immersive .fc-deck[data-strand="1"] .fc-stack { box-shadow: 0 8px 20px rgba(0, 120, 180, .16); }
.bibh-fc--immersive .fc-deck[data-strand="2"] .fc-stack { box-shadow: 0 8px 20px rgba(0, 110, 90, .16); }
.bibh-fc--immersive .fc-deck[data-strand="3"] .fc-stack { box-shadow: 0 8px 20px rgba(180, 110, 0, .16); }

/* ---------- circular embossed rating knobs ---------- */
.bibh-fc--immersive .fc-actions { max-width: 520px; margin: 0 auto; }
.bibh-fc--immersive .fc-pad     { display: flex; justify-content: center; align-items: stretch; gap: 14px; }
.bibh-fc--immersive .fc-cbtn {
    background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
    -webkit-appearance: none; appearance: none; box-shadow: none;
    /* Equal thirds. The knob below already asks for `flex: 1 1 0`, but the knob
       is a SPAN INSIDE this button, and it is the button that is the flex item
       of .fc-pad, so that declaration was being applied to the wrong box and
       the three pills sized to their labels instead (Don't know 105px, Kind of
       Know 121px, Know it 77px at 375px). Setting it here is what actually
       divides the row; the knob keeps its copy so it fills the button. */
    display: flex; flex: 1 1 0; min-width: 0;
}
/* Astra paints button:hover/:focus green and adds its own background - neutralise
   it on the OUTER button in every state; the knob carries all the colour. */
.bibh-fc--immersive .fc-cbtn:hover,
.bibh-fc--immersive .fc-cbtn:focus,
.bibh-fc--immersive .fc-cbtn:active {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
}
.bibh-fc--immersive .fc-cbtn:focus-visible .fc-knob { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 4px; }

/* F-03: bigger, and NEVER round.
   These were 106px circles. A circle is the worst shape for a label, because
   the widest line has to fit across the middle, so "Don't know" and "Kind of
   Know" were being squeezed into a diameter while the corners sat empty. As
   pills they take the room the words actually need and the type comes up with
   them. 30px radius, which is the house rule for every button in this project.
   Round is a standing no from Ashton, not a one-off preference. */
.bibh-fc--immersive .fc-knob {
    --edge: var(--fc-red-edge);
    /* Share the row rather than each claiming a fixed width: three fixed
       pills plus their gaps overflowed the 520px action row and spilled out
       both sides. flex-basis 0 with min-width 0 makes them equal thirds. */
    flex: 1 1 0; min-width: 0; min-height: 84px; border-radius: 30px;
    background: var(--fc-red); color: #fff;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 22px;
    font-size: 20px; font-weight: 900; line-height: 1.1; letter-spacing: .2px;
    transform: translateY(0);
    transition: transform .11s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow .11s cubic-bezier(0.215, 0.61, 0.355, 1), filter .18s;
    box-shadow:
        0 2px var(--edge), 0 4px var(--edge), 0 6px var(--edge), 0 8px var(--edge), 0 10px var(--edge),
        0 13px 10px rgba(0, 0, 0, .30), 0 18px 30px rgba(0, 0, 0, .20);
}

/* Per-knob colours pinned across hover / focus / active so Astra's global green
   button styling can never repaint them. Each state repeats the background. */
.bibh-fc--immersive .fc-cbtn.unknown .fc-knob,
.bibh-fc--immersive .fc-cbtn.unknown:hover .fc-knob,
.bibh-fc--immersive .fc-cbtn.unknown:focus .fc-knob,
.bibh-fc--immersive .fc-cbtn.unknown:active .fc-knob {
    background: var(--fc-red); --edge: var(--fc-red-edge); color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .30), 0 -1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .20);
}
.bibh-fc--immersive .fc-cbtn.retest .fc-knob,
.bibh-fc--immersive .fc-cbtn.retest:hover .fc-knob,
.bibh-fc--immersive .fc-cbtn.retest:focus .fc-knob,
.bibh-fc--immersive .fc-cbtn.retest:active .fc-knob {
    /* Brand accent yellow with NAVY type (Ashton, live test 2026-08-19). This
       was brand orange with a dark brown #5a3d05 label, which read as muddy on
       a phone: brown on orange is barely two steps apart, so the words sat in
       the button rather than on it. Navy on yellow is about 8:1 and is the
       same navy every other label on the hub uses.

       Set on the knob rather than on --fc-amber, which is shared with the
       review dot, the results stat and the timer warning and must not move.

       Dark type wants a light lift, not a drop shadow: the white highlight
       above the glyph is what makes it read as stamped INTO the button, and
       the dark shadow the other two knobs use would only smear it here. */
    background: var(--fc-yellow); --edge: var(--fc-yellow-edge); color: var(--bibh-dark, #203D48);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.bibh-fc--immersive .fc-cbtn.known .fc-knob,
.bibh-fc--immersive .fc-cbtn.known:hover .fc-knob,
.bibh-fc--immersive .fc-cbtn.known:focus .fc-knob,
.bibh-fc--immersive .fc-cbtn.known:active .fc-knob {
    background: var(--bibh-primary, #3F8170); --edge: var(--fc-green-edge); color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .30), 0 -1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .20);
}

/* Hover lift, then the press. ORDER MATTERS: the :active rule is declared after
   :hover so that holding the mouse down (which is also a hover) presses down
   instead of staying lifted. !important on the transform makes that certain. */
.bibh-fc--immersive .fc-cbtn:hover .fc-knob {
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow:
        0 4px var(--edge), 0 6px var(--edge), 0 8px var(--edge), 0 10px var(--edge), 0 12px var(--edge),
        0 16px 14px rgba(0, 0, 0, .32), 0 22px 40px rgba(0, 0, 0, .24);
}
.bibh-fc--immersive .fc-cbtn:active .fc-knob {
    transform: translateY(8px) !important;
    filter: none;
    box-shadow: 0 2px var(--edge), 0 4px 10px rgba(0, 0, 0, .34) !important;
}

/* ---------- session error / expired / completing, restyled to the field ---------- */
.bibh-fc--immersive .bibh-fc__session-error {
    max-width: 520px; margin: 18px auto 0; text-align: center;
    background: #fff; border: 1.5px solid var(--fc-red-soft); border-radius: 30px;
    padding: 12px 20px; font-size: 14px; font-weight: 700; color: var(--fc-red-dark);
}
.bibh-fc--immersive .bibh-fc__expired {
    max-width: 520px; margin: 0 auto; text-align: center;
    background: #fff; border-radius: 30px; box-shadow: 0 16px 40px rgba(120, 20, 5, .2);
    padding: 44px 34px; position: relative; top: 50%; transform: translateY(-50%);
}
.bibh-fc--immersive .bibh-fc__completing {
    position: fixed; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(165deg, #ffe6e0, #ffd6cd 60%, #ffc7bb);
}
.bibh-fc--immersive .bibh-fc__completing-inner {
    background: #fff; border-radius: 30px; box-shadow: 0 16px 40px rgba(120, 20, 5, .2);
    padding: 36px 44px; text-align: center; font-weight: 800; color: var(--bibh-dark, #203D48);
}

/* ---------- mobile ---------- */
@media (max-width: 560px) {
    .bibh-fc--immersive { padding: 16px 14px 34px; }
    .bibh-fc--immersive .fc { padding-top: 84px; }
    .bibh-fc--immersive .fc-exit { top: 16px; left: 14px; padding: 10px 16px; font-size: 13px; }
    .bibh-fc--immersive .fc-xp   { top: 16px; right: 14px; padding: 6px 14px 6px 6px; }
    .bibh-fc--immersive .fc-xp .coin { width: 30px; height: 30px; }
    .bibh-fc--immersive .fc-xp b     { font-size: 20px; }
    .bibh-fc--immersive .fc-xp .lbl  { font-size: 11px; }
    .bibh-fc--immersive .fc-topline  { flex-direction: column; gap: 10px; }
    .bibh-fc--immersive .fc-dots     { gap: 4px; flex-wrap: wrap; justify-content: center; }
    .bibh-fc--immersive .fc-dots .d  { width: 11px; height: 11px; }
    .bibh-fc--immersive .fc-deck { height: 264px; margin-bottom: 40px; }
    .bibh-fc--immersive .fc-term { font-size: 25px; }
    .bibh-fc--immersive .fc-def  { font-size: 18px; }
    .bibh-fc--immersive .fc-pad  { gap: 16px; }
    /* Smaller screen: the pill narrows and the gap closes, the TYPE holds.
       Answer type shrinking on a phone is the exact complaint the audit's
       minimum-font rule exists to stop. */
    .bibh-fc--immersive .fc-knob { min-width: 0; flex: 1 1 0; min-height: 76px; font-size: 17px; padding: 12px 10px; }
    .bibh-fc--immersive .fc-pad  { gap: 10px; }
}

/* =========================================================================
   RESULTS (mockup v4 section 2)
   ========================================================================= */
/* Results is a FULL takeover too, exactly like the session. Rendering it inside the
   normal page left the old deprecated side menu and the rest of the page chrome on
   screen the moment a deck finished. It keeps the session's fixed overlay; only the
   scroll behaviour differs (results is a short document, so it scrolls normally
   inside the overlay). "Back to home" is the way out. */
.bibh-fc__results.bibh-fc--immersive {
    padding: 26px 20px 54px;
}

.bibh-fc--immersive .fc-results {
    max-width: 600px;
    margin: 64px auto 0;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 16px 40px rgba(120, 20, 5, .2);
    padding: 40px 34px 34px;
    text-align: center;
}
.bibh-fc--immersive .fc-results h2  { font-size: 28px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0 0 4px; }
.bibh-fc--immersive .fc-results .sub { font-size: 14.5px; font-weight: 500; color: #8a7d7a; margin-bottom: 26px; }

/* Medal disc - same treatment as the dashboard medals. */
.bibh-fc--immersive .fc-disc {
    width: 190px; height: 190px; border-radius: 50%; margin: 0 auto 26px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 14px 32px rgba(120, 20, 5, .22), inset 0 3px 6px rgba(255, 255, 255, .6), inset 0 -8px 16px rgba(0, 0, 0, .18);
    background-image: linear-gradient(135deg, #8A6A0E, #E7B10A 20%, #FFF3B0 38%, #F2C932 55%, #B98C10 72%, #FDE68A 88%, #7A5A0B);
    color: #5a4708;
}
.bibh-fc--immersive .fc-disc--silver {
    background-image: linear-gradient(135deg, #6E7378, #B9C0C6 20%, #F2F5F7 38%, #C9D0D6 55%, #8A9198 72%, #EDF1F4 88%, #62676C);
    color: #3f4448;
}
.bibh-fc--immersive .fc-disc--bronze {
    background-image: linear-gradient(135deg, #7A4318, #C57B3C 20%, #F0C49A 38%, #D08B4C 55%, #93551F 72%, #EBB98C 88%, #6B3A14);
    color: #4a2a10;
}
.bibh-fc--immersive .fc-disc--none {
    background-image: linear-gradient(135deg, #cfc3c0, #efe6e3 38%, #ddd0cc 60%, #c4b6b2);
    color: #6a5a56;
}
.bibh-fc--immersive .fc-disc .p { font-size: 52px; font-weight: 900; line-height: 1; text-shadow: 0 1px 1px rgba(255, 255, 255, .35); }
.bibh-fc--immersive .fc-disc .f { font-size: 15px; font-weight: 800; letter-spacing: .5px; margin-top: 5px; opacity: .9; }

.bibh-fc--immersive .fc-rstats { display: flex; justify-content: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.bibh-fc--immersive .fc-rstat  { background: #fdf3f1; border: 1px solid var(--bibh-border, #eadedb); border-radius: 24px; padding: 15px 20px; min-width: 92px; }
.bibh-fc--immersive .fc-rstat .v { font-size: 26px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; gap: 6px; }
.bibh-fc--immersive .fc-rstat.known  .v { color: var(--bibh-primary, #3F8170); }
.bibh-fc--immersive .fc-rstat.review .v { color: var(--fc-amber-dark); }
.bibh-fc--immersive .fc-rstat.xp     .v { color: var(--bibh-dark, #203D48); }
.bibh-fc--immersive .fc-rstat.xp .coin  { width: 26px; height: 26px; }
.bibh-fc--immersive .fc-rstat .l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8a7d7a; margin-top: 6px; }

/* Continue learning - the EXACT Take 10 final-card treatment. */
.bibh-fc--immersive .t10-folbl { font-size: 13px; font-weight: 800; color: var(--bibh-dark, #203D48); margin: 6px 0 14px; }
.bibh-fc--immersive .t10-fols  { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; }
.bibh-fc--immersive .bibh-home-ac {
    --type: var(--bibh-primary, #3F8170);
    display: inline-flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--bibh-border, #eadedb); border-radius: 30px;
    box-shadow: var(--fc-shadow-strong); padding: 13px 18px; text-decoration: none;
    transition: box-shadow .15s ease;
}
.bibh-fc--immersive .bibh-home-ac:hover { box-shadow: 0 10px 28px rgba(32, 61, 72, .28); }
.bibh-fc--immersive .bibh-home-ac.ac-quiz  { --type: #00b2ff; }
.bibh-fc--immersive .bibh-home-ac.ac-flash { --type: #f32201; }
.bibh-fc--immersive .bibh-home-ac.ac-video { --type: #049f84; }
.bibh-fc--immersive .bibh-home-ac.ac-past  { --type: #ffa700; }
.bibh-fc--immersive .bibh-home-ac-ico {
    width: 42px; height: 42px; flex: none; border-radius: 14px;
    background: color-mix(in srgb, var(--type) 15%, #fff); color: var(--type);
    display: flex; align-items: center; justify-content: center;
}
.bibh-fc--immersive .bibh-home-ac .ttl { font-size: 15px; font-weight: 700; color: var(--bibh-dark, #203D48); line-height: 1.2; white-space: nowrap; }
.bibh-fc--immersive .bibh-home-ac .xp  {
    margin-left: 8px; background: color-mix(in srgb, var(--type) 15%, #fff);
    color: color-mix(in srgb, var(--type) 78%, #000);
    font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 30px; white-space: nowrap; flex: none;
}

/* Result CTAs */
.bibh-fc--immersive .fc-ract { border-top: 1px solid var(--bibh-border, #eadedb); padding-top: 22px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bibh-fc--immersive .fc-abtn {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 30px; font-family: inherit; font-weight: 800; font-size: 15px;
    padding: 14px 26px; cursor: pointer; text-decoration: none; line-height: 1;
}
/* Astra repaints button:hover/:focus green - pin both CTAs in every state. */
.bibh-fc--immersive .fc-abtn.primary,
.bibh-fc--immersive .fc-abtn.primary:focus { background: var(--fc-red); color: #fff; box-shadow: 0 5px 14px rgba(243, 34, 1, .35); }
.bibh-fc--immersive .fc-abtn.primary:hover,
.bibh-fc--immersive .fc-abtn.primary:active { background: var(--fc-red-dark); color: #fff; }
.bibh-fc--immersive .fc-abtn.primary[disabled] { opacity: .6; cursor: default; }
.bibh-fc--immersive .fc-abtn.ghost,
.bibh-fc--immersive .fc-abtn.ghost:focus { background: #fff; color: var(--bibh-dark, #203D48); border: 1.5px solid var(--bibh-border, #eadedb); }
.bibh-fc--immersive .fc-abtn.ghost:hover,
.bibh-fc--immersive .fc-abtn.ghost:active { background: #fff; border-color: var(--fc-red-soft); color: var(--fc-red-dark); }

@media (max-width: 560px) {
    .bibh-fc--immersive .fc-results { margin-top: 24px; padding: 30px 22px 26px; }
    .bibh-fc--immersive .fc-disc { width: 168px; height: 168px; }
    .bibh-fc--immersive .fc-disc .p { font-size: 44px; }
}

/* =========================================================================
   OPTIONAL DECK COUNTDOWN - centred in the top bar, quiz-styled
   -------------------------------------------------------------------------
   One bar for the whole deck (10s a card), OFF until the student starts it.
   Replaces the old bottom-right floating self-timer widget.
   ========================================================================= */
.bibh-fc--immersive .fc-timer,
.bibh-fc--immersive .fc-tm-start {
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
}
.bibh-fc--immersive .fc-timer {
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--bibh-border, #eadedb);
    box-shadow: var(--fc-shadow-strong);
    border-radius: 40px; padding: 10px 22px;
    font-family: inherit;
}
/* Hidden until the student presses Start. */
.bibh-fc--immersive .fc-timer--pending { display: none; }
.bibh-fc--immersive .fc-timer .tmic { font-size: 18px; }
.bibh-fc--immersive .fc-timer .tmt {
    font-size: 22px; font-weight: 900; color: var(--bibh-primary, #3F8170);
    font-variant-numeric: tabular-nums; min-width: 64px; text-align: center;
    transition: color .3s;
}
.bibh-fc--immersive .fc-timer .tmtrk { width: 120px; height: 20px; background: #f6e3de; border-radius: 30px; overflow: hidden; }
.bibh-fc--immersive .fc-timer .tmfl  { height: 100%; background: var(--bibh-primary, #3F8170); border-radius: 30px; transition: width 1s linear, background .3s; }
.bibh-fc--immersive .fc-timer .tmt.is-warning   { color: var(--fc-amber-dark); }
.bibh-fc--immersive .fc-timer .tmt.is-critical  { color: var(--fc-red-dark); animation: bibhFcTimerPulse 1s ease infinite; }
.bibh-fc--immersive .fc-timer .tmfl.is-warning  { background: var(--fc-amber); }
.bibh-fc--immersive .fc-timer .tmfl.is-critical { background: var(--fc-red); }
@keyframes bibhFcTimerPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.bibh-fc--immersive .fc-tm-start {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; border: 1.5px solid var(--bibh-border, #eadedb);
    box-shadow: var(--fc-shadow-strong);
    border-radius: 30px; padding: 12px 22px;
    font-family: inherit; font-weight: 800; font-size: 14px;
    color: var(--bibh-dark, #203D48); cursor: pointer; line-height: 1;
}
/* Astra pins: keep our own colours in every state. */
.bibh-fc--immersive .fc-tm-start:hover,
.bibh-fc--immersive .fc-tm-start:focus,
.bibh-fc--immersive .fc-tm-start:active {
    background: #fff; border-color: var(--fc-red-soft); color: var(--fc-red-dark);
}
/* Green disc with a pure white play triangle, drawn with borders so it is a real
   shape rather than an emoji glyph. The 2px nudge optically centres a triangle
   inside a circle (its visual mass sits left of its bounding box). */
.bibh-fc--immersive .fc-tm-start .play {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: var(--bibh-primary, #3F8170);
    display: flex; align-items: center; justify-content: center;
}
.bibh-fc--immersive .fc-tm-start .play::before {
    content: '';
    width: 0; height: 0;
    margin-left: 2px;
    border-left: 9px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.bibh-fc--immersive .fc-tm-start.is-hidden { display: none; }

/* The knobs are always visible now, on both card faces. Nothing may hide them. */
.bibh-fc--immersive .fc-actions { display: block; }

@media (max-width: 560px) {
    .bibh-fc--immersive .fc-timer,
    .bibh-fc--immersive .fc-tm-start { top: 74px; }
    .bibh-fc--immersive .fc-timer { padding: 8px 16px; gap: 9px; }
    .bibh-fc--immersive .fc-timer .tmtrk { width: 80px; height: 16px; }
    .bibh-fc--immersive .fc-timer .tmt { font-size: 18px; min-width: 54px; }
    .bibh-fc--immersive .fc-tm-start { padding: 9px 16px; font-size: 13px; }
    /* Top bar now holds three items on mobile: give the deck room to breathe. */
    .bibh-fc--immersive .fc { padding-top: 136px; }
}


/* ── F-02: the card face, printable ───────────────────────────────────────
   The face is already built as geometry and ink, so printing is a matter of
   removing everything that is not the card. Both sides print, because a deck
   you cut out needs the answer as well as the term. */
@media print {
    body * { visibility: hidden !important; }
    .bibh-fc--immersive .fc-deck,
    .bibh-fc--immersive .fc-deck * { visibility: visible !important; }
    .bibh-fc--immersive .fc-deck {
        position: absolute !important; left: 0 !important; top: 0 !important;
        width: 100% !important; height: auto !important; margin: 0 !important;
    }
    /* The stack behind is a screen illusion; a printed card has no shadow. */
    .bibh-fc--immersive .fc-stack { display: none !important; }
    .bibh-fc--immersive .fc-card  { perspective: none !important; height: auto !important; }
    .bibh-fc--immersive .fc-inner { transform: none !important; height: auto !important; }
    /* Both faces, laid out one after the other rather than back to back. */
    .bibh-fc--immersive .fc-face {
        position: relative !important; inset: auto !important;
        backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
        transform: none !important;
        page-break-inside: avoid; break-inside: avoid;
        width: 86mm; height: 54mm;        /* a standard card */
        margin: 0 auto 8mm; padding: 10mm 9mm;
        box-shadow: none !important;
        border: 1.5px solid rgba(32, 61, 72, .55) !important;
    }
    .bibh-fc--immersive .fc-tap { display: none !important; }  /* no tapping on paper */
    @page { margin: 10mm; }
}