/**
 * BIBH Classroom Suite - Unified shortcode layout
 *
 * Provides the sidebar + main content shell used by [bibh_classroom_suite].
 * Builds on common.css design tokens.
 */

/* ============================================================
   Outer shell
   ============================================================ */
/* Full-width platform (design pass 1 correction, 2026-08-04): every suite
   page fills the viewport, like the BIB teacher dashboard always did. BIB
   got this for free from Astra's page-builder rule
   (.ast-page-builder-template .entry-content[data-ast-blocks-layout] > *
   forces max-width:none); JC's markup lacks data-ast-blocks-layout, so the
   shell must opt out of any cap EXPLICITLY for the two hubs to match.
   Dashboards/landings keep the 20px side gutters below; full-bleed
   activities zero them (see the fullbleed section). The --bibh-container
   token stays defined for narrower components; it no longer caps the shell. */
.bibh-suite {
    display: flex;
    align-items: flex-start;
    max-width: none;
    margin: 0 auto;
    padding: 10px 20px;
    font-family: var(--bibh-font);
    position: relative;
}

/* Undo .bibh-hub max-width/margin when inside the suite */
.bibh-suite .bibh-suite__main.bibh-hub {
    max-width: none;
    margin: 0;
}

/* ============================================================
   Sidebar
   ============================================================ */
.bibh-suite__sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bibh-dark);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 120px;
    align-self: flex-start;
}

/* ============================================================
   Sidebar header
   ============================================================ */
.bibh-sidebar__header {
    padding: 24px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.bibh-sidebar__logo {
    max-width: 160px;
    max-height: 48px;
    object-fit: contain;
}

.bibh-sidebar__hub-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bibh-white);
    letter-spacing: -0.01em;
}

/* ============================================================
   Sidebar nav
   ============================================================ */
.bibh-sidebar__nav {
    padding: 16px 0 24px;
    flex: 1;
}

.bibh-sidebar__nav-group {
    margin-bottom: 24px;
}

.bibh-sidebar__nav-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    padding: 0 20px 6px;
}

.bibh-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    position: relative;
    border-left: 3px solid transparent;
}

.bibh-sidebar__nav-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.bibh-sidebar__nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

.bibh-sidebar__nav-item.is-active {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-left-color: var(--bibh-accent, #F3D76A);
    font-weight: 600;
    padding-left: 17px; /* accounts for the 3px border */
}

.bibh-sidebar__nav-item.is-active svg {
    opacity: 1;
}

/* Coming-soon items appear slightly dimmer and are non-interactive */
.bibh-sidebar__nav-item--soon {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.bibh-sidebar__nav-item--soon:hover {
    background: none;
    color: rgba(255,255,255,0.7);
    opacity: 0.75;
}

/* ============================================================
   Soon badge
   ============================================================ */
.bibh-soon-badge {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
    border-radius: 49px;
    padding: 2px 7px;
    flex-shrink: 0;
}

/* ============================================================
   Main content
   ============================================================ */
.bibh-suite__main {
    flex: 1;
    min-width: 0;
    /* The page gutter is published as a token because things OUTSIDE this rule
       have to agree with it: a full-bleed strip cancels the gutter with an
       equal negative margin, and if the two ever disagree the page either
       scrolls sideways or the strip stops short of the edge. One number, one
       place. Overridden per breakpoint in the mobile block below. */
    --bibh-gutter: 28px;
    padding: 0 var(--bibh-gutter) 32px;
    background: none;
    border-radius: 0 var(--bibh-radius-md) var(--bibh-radius-md) 0;
    min-height: calc(100vh - 80px);
}

/* ============================================================
   Mobile toggle button (hamburger)
   ============================================================ */
.bibh-suite__toggle {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bibh-dark);
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    box-shadow: var(--bibh-shadow-md);
}

.bibh-suite__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

.bibh-suite__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.bibh-suite__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.bibh-suite__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Join classroom prompt
   ============================================================ */
.bibh-join-classroom {
    max-width: 500px;
    margin: 40px auto;
    text-align: center;
}

.bibh-join-classroom__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bibh-primary-light, #e8f5f0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.bibh-join-classroom__icon svg {
    color: var(--bibh-primary);
}

.bibh-join-classroom__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bibh-dark);
    margin: 0 0 8px;
}

.bibh-join-classroom__desc {
    color: var(--bibh-text-light);
    margin: 0 0 28px;
}

.bibh-join-classroom__form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.bibh-join-classroom__input {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    width: 180px;
    padding: 12px 16px;
    border: 2px solid var(--bibh-border);
    border-radius: var(--bibh-radius-pill);
    font-family: var(--bibh-font);
    transition: border-color 0.2s;
}

.bibh-join-classroom__input:focus {
    outline: none;
    border-color: var(--bibh-primary);
}

.bibh-join-classroom__error {
    margin-top: 12px;
    color: var(--bibh-danger);
    font-size: 0.9rem;
    min-height: 20px;
}

/* The "Don't have a code yet?" line is the one instruction that rescues a
   student who arrives here with nothing to type, so it cannot be the smallest,
   palest text on the page - which is what the generic .bibh-help-text (0.8rem,
   weight 300, #888) made it. Scoped to this card on purpose: the same class is
   genuine fine print on the My Folder uploader and should stay quiet there. */
.bibh-join-classroom .bibh-help-text {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--bibh-text);
}

/* The way out of this card for a student who has no code. It used to be a small
   underlined link, which read as a footnote rather than as the other thing you
   can do here - so students with nothing to type had no visible next move. It is
   a filled accent button now, so it is unmistakably pressable for a student who
   has nothing to type. It is the hub accent rather than the primary green: still
   obviously the second choice on the page, but not hidden. Radius comes from the
   pill token (30px), same as every other button. Styling the class rather than the copy
   covers both branches - "Skip for now and explore" on the home views and
   "Explore My Learning while you wait" on the classroom-only ones. */
.bibh-join-classroom__explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    padding: 11px 26px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--bibh-font);
    line-height: 1.4;
    color: var(--bibh-dark);
    background: var(--bibh-accent);
    border: 1px solid var(--bibh-accent);
    border-radius: var(--bibh-radius-pill);
    text-decoration: none;
    transition: all 0.2s ease;
}

.bibh-join-classroom__explore:hover,
.bibh-join-classroom__explore:focus {
    color: var(--bibh-dark);
    background: #e8cb55;
    border-color: #e8cb55;
    box-shadow: var(--bibh-shadow-sm);
    text-decoration: none;
}

/* ============================================================
   Student dashboard
   ============================================================ */
.bibh-student-dash {
}

.bibh-student-dash__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.bibh-student-dash__settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 4px;
}

.bibh-student-dash__greeting {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bibh-dark);
    margin: 0 0 4px;
}

.bibh-student-dash__classroom {
    font-size: 1rem;
    color: var(--bibh-text-light);
    margin: 0;
}

.bibh-student-dash__code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--bibh-neutral-light);
    border: 1px solid var(--bibh-border);
    padding: 3px 10px;
    border-radius: var(--bibh-radius-pill);
    color: var(--bibh-text-muted);
    margin-left: 6px;
    vertical-align: middle;
}

.bibh-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.bibh-dash-card {
    background: #fff;
    border: 1px solid var(--bibh-border);
    border-radius: var(--bibh-radius-md);
    padding: 20px;
    text-decoration: none;
    color: var(--bibh-dark);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

.bibh-dash-card:hover {
    box-shadow: var(--bibh-shadow-md);
    transform: translateY(-2px);
    color: var(--bibh-dark);
    text-decoration: none;
}

.bibh-dash-card--soon {
    opacity: 0.6;
    cursor: default;
}

.bibh-dash-card--soon:hover {
    box-shadow: none;
    transform: none;
}

.bibh-dash-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.bibh-dash-card__icon--primary   { background: var(--bibh-primary-light);    color: var(--bibh-primary); }
.bibh-dash-card__icon--secondary  { background: var(--bibh-secondary-light, #d4eef3); color: var(--bibh-dark); }
.bibh-dash-card__icon--accent     { background: var(--bibh-accent-light, #fdf5d9); color: #a07600; }
.bibh-dash-card__icon--neutral    { background: var(--bibh-neutral-light);    color: var(--bibh-text-muted); }

.bibh-dash-card__title {
    font-size: 0.95rem;
    font-weight: 600;
}

.bibh-dash-card__meta {
    font-size: 0.82rem;
    color: var(--bibh-text-muted);
    font-weight: 300;
}

.bibh-dash-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--bibh-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--bibh-radius-pill);
    letter-spacing: 0.04em;
}

/* ============================================================
   Coming-soon placeholder panel
   ============================================================ */
.bibh-placeholder {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    padding: 48px 32px;
    background: #fff;
    border: 1px solid var(--bibh-border);
    border-radius: var(--bibh-radius-md);
}

.bibh-placeholder__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bibh-primary-light, #e8f5f0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: var(--bibh-primary);
}

.bibh-placeholder__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bibh-dark);
    margin: 0 0 12px;
}

.bibh-placeholder__desc {
    color: var(--bibh-text-light);
    max-width: 440px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bibh-placeholder__addon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bibh-text-muted);
    background: var(--bibh-neutral-light);
    padding: 6px 14px;
    border-radius: var(--bibh-radius-pill);
    border: 1px solid var(--bibh-border);
}

/* ============================================================
   Responsive - collapse sidebar on mobile
   ============================================================ */
@media (max-width: 768px) {
    .bibh-suite {
        flex-direction: column;
    }

    .bibh-suite__sidebar {
        width: 100%;
        min-height: unset;
        border-radius: var(--bibh-radius-md) var(--bibh-radius-md) 0 0;
        position: static;
        overflow: hidden;
        max-height: 64px;
        transition: max-height 0.3s ease;
    }

    .bibh-suite__sidebar.is-open {
        max-height: 600px;
    }

    .bibh-suite__sidebar .bibh-sidebar__header {
        display: flex;
        align-items: center;
        padding: 14px 20px;
    }

    .bibh-suite__main {
        border-radius: 0 0 var(--bibh-radius-md) var(--bibh-radius-md);
        padding: 20px 16px;
        min-height: unset;
    }

    .bibh-suite__toggle {
        display: flex;
    }

    .bibh-dash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bibh-dash-grid {
        grid-template-columns: 1fr;
    }

    .bibh-join-classroom__form {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================
   Student Dashboard - Redesigned Layout (2026-04-28)
   All components use prefix  bibh-sd__
   ============================================================ */

/* White background for the whole main content area */
.bibh-suite__main {
    background: #fff;
}

/* Shared section label (eyebrow text) */
.bibh-sd__label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bibh-text-muted, #7a96a0);
}

/* Card base - override padding & disable hover transform for data cards */
.bibh-sd__card {
    padding: 0;
    overflow: hidden;
}

.bibh-sd__card:hover {
    transform: none;
    box-shadow: none;
}

/* ── HERO ─────────────────────────────────────────────── */
.bibh-sd__hero {
    background: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-md, 30px);
    padding: 28px 32px;
    margin-bottom: 20px;
}

/* ── Student-chosen banner colour ─────────────────────────────
   The inline style sets four AA-tuned custom properties (see
   BIBH_Classrooms::banner_style_vars):
     --bibh-ccbg    background (the chosen palette colour)
     --bibh-ccink   solid ink - heading + stat/ring content on light bg
     --bibh-ccmut   muted ink - secondary text, opacity pre-tuned per
                                  colour to clear WCAG AA (AA-Large on the
                                  four most saturated brand colours)
     --bibh-ccfaint ink @ .16 - ring track + hairline borders
   Every text element derives from these so nothing washes out; the stat
   boxes get a fixed navy chip so their semantic score colours (teal/
   yellow/red) always read on ANY banner colour. */
.bibh-sd__hero--colored {
    background: var(--bibh-ccbg, var(--bibh-dark, #203D48));
}

/* Heading: full ink (large/bold → AA-Large everywhere). */
.bibh-sd__hero--colored .bibh-sd__hero-name-row {
    color: var(--bibh-ccink, #f0f6f8);
}

/* Secondary text on the banner: AA-tuned muted ink. */
.bibh-sd__hero--colored .bibh-sd__hero-sub,
.bibh-sd__hero--colored .bibh-sd__hero-meta,
.bibh-sd__hero--colored .bibh-sd__ring-label {
    color: var(--bibh-ccmut, rgba(240, 246, 248, 0.8));
    opacity: 1; /* opacity is baked into --bibh-ccmut; drop the base fade */
}
.bibh-sd__hero--colored .bibh-sd__hero-meta-label {
    color: var(--bibh-ccink, #f0f6f8);
}

/* Settings cog: ink outline on the banner. */
.bibh-sd__hero--colored .bibh-sd__settings-btn {
    background: transparent !important;
    border-color: var(--bibh-ccfaint, rgba(255, 255, 255, 0.2)) !important;
    color: var(--bibh-ccink, rgba(240, 246, 248, 0.75)) !important;
}

/* Stat boxes: fixed navy chip so the semantic value colours stay legible
   on any banner. Labels/hints stay light (they sit on the navy chip). */
.bibh-sd__hero--colored .bibh-sd__hero-stat {
    background: #203d48;
    border: 1px solid var(--bibh-ccfaint, rgba(255, 255, 255, 0.12));
}
.bibh-sd__hero--colored .bibh-sd__hero-stat-lbl,
.bibh-sd__hero--colored .bibh-sd__hero-stat-hint {
    color: #f0f6f8;
}

/* Streak ring: derive strokes/fills from ink so it reads on light banners. */
.bibh-sd__hero--colored .bibh-sd__hero-ring text {
    fill: var(--bibh-ccink, #f0f6f8);
}
.bibh-sd__hero--colored .bibh-sd__hero-ring circle:first-of-type {
    stroke: var(--bibh-ccfaint, rgba(255, 255, 255, 0.08));
}
.bibh-sd__hero--colored .bibh-sd__hero-ring circle:nth-of-type(2) {
    stroke: var(--bibh-ccink, #3F8170);
}

.bibh-sd__hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bibh-sd__hero-left {
    flex: 1;
    min-width: 0;
}

/* .bibh-sd__hero-top removed - settings cog is now inline in name row */

.bibh-sd__hero-name-row {
    display: flex;
    align-items: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: #f0f6f8;
    line-height: 1.1;
    margin-bottom: 6px;
}

/* kept for any legacy references */
.bibh-sd__hero-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f0f6f8;
    margin-bottom: 4px;
    line-height: 1.1;
}

.bibh-sd__hero-sub {
    font-size: 0.875rem;
    color: #f0f6f8;
    margin-bottom: 20px;
    opacity: 0.7;
}

/* Connected teacher + school line. */
.bibh-sd__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.875rem;
    color: #f0f6f8;
    opacity: 0.85;
    margin-top: -12px;
    margin-bottom: 20px;
}
.bibh-sd__hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.bibh-sd__hero-meta-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}

/* Settings cog - inline inside the hero name row */
.bibh-sd__settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(240, 246, 248, 0.75) !important;
    flex-shrink: 0;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 8px;
    transition: background 0.15s, color 0.15s;
}

.bibh-sd__settings-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* Stats row */
.bibh-sd__hero-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bibh-sd__hero-stat {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 12px 20px;
    text-align: center;
    min-width: 110px;
}

.bibh-sd__hero-stat-val {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.bibh-sd__hero-stat-val--lo {
    font-size: 1.15rem;
}

.bibh-sd__hero-stat-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f0f6f8;
    opacity: 0.75;
}

.bibh-sd__hero-stat-hint {
    font-size: 0.68rem;
    color: #f0f6f8;
    opacity: 0.6;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Streak ring */
.bibh-sd__hero-ring {
    text-align: center;
    flex-shrink: 0;
}

.bibh-sd__ring-label {
    font-size: 0.72rem;
    color: #f0f6f8;
    margin-top: 6px;
    opacity: 0.8;
}

/* ── CALLOUT ──────────────────────────────────────────── */
.bibh-sd__callout {
    margin-bottom: 20px;
}

.bibh-sd__callout-header {
    padding: 18px 24px 0;
}

.bibh-sd__callout-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px 20px;
}

.bibh-sd__callout-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 30px;
}

.bibh-sd__callout-row--quiz      { background: #fdecea; }
.bibh-sd__callout-row--resource  { background: #e0f5f4; }
.bibh-sd__callout-row--flashcard { background: #fdf8df; }
.bibh-sd__callout-row--retrieve  { background: #f0ecfe; }
.bibh-sd__callout-row--feedback  { background: #ebf5f1; }
.bibh-sd__callout-row--overdue   { background: #fff0f0; }
.bibh-sd__callout-row--caughtup  { background: #f0faf6; }
.bibh-sd__callout-row--promoted  { background: #edf4ff; }
/* Set work that is not a quiz. Teal, so it reads as "something to do" without
   borrowing the red a quiz uses or the amber of a study suggestion. */
.bibh-sd__callout-row--assignwork { background: #e6f6f2; }

/* Live Classroom Blitz - the loudest row: dark, pulsing, non-dismissible.
   Prepended at the top by build_callouts(); disappears when the game ends. */
.bibh-sd__callout-row--blitz {
    background: var(--bibh-dark, #203D48);
    animation: bibhBlitzRowPulse 1.4s ease-in-out infinite;
}
.bibh-sd__callout-row--blitz .bibh-sd__callout-dot         { background: var(--bibh-accent, #F3D76A); }
.bibh-sd__callout-row--blitz .bibh-sd__callout-text        { color: #f0f6f8; font-weight: 700; }
.bibh-sd__callout-row--blitz .bibh-sd__callout-text strong { color: var(--bibh-accent, #F3D76A); }
.bibh-sd__callout-row--blitz .bibh-sd__callout-btn {
    background: var(--bibh-accent, #F3D76A);
    color: var(--bibh-dark, #203D48);
    font-weight: 800;
}
.bibh-sd__callout-row--blitz .bibh-sd__callout-dismiss { display: none; } /* non-dismissible */

@keyframes bibhBlitzRowPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
}

.bibh-sd__callout-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bibh-sd__callout-row--quiz .bibh-sd__callout-dot      { background: #e05454; }
.bibh-sd__callout-row--resource .bibh-sd__callout-dot  { background: #3dbfbf; }
.bibh-sd__callout-row--flashcard .bibh-sd__callout-dot { background: #f3a620; }
.bibh-sd__callout-row--retrieve .bibh-sd__callout-dot  { background: #8b6fe8; }
.bibh-sd__callout-row--feedback .bibh-sd__callout-dot  { background: #3F8170; }
.bibh-sd__callout-row--overdue .bibh-sd__callout-dot   { background: var(--bibh-danger, #dc2626); }
.bibh-sd__callout-row--assignwork .bibh-sd__callout-dot { background: var(--bibh-act-video, #049f84); }
.bibh-sd__callout-row--caughtup .bibh-sd__callout-dot  { background: #3F8170; }
.bibh-sd__callout-row--promoted .bibh-sd__callout-dot  { background: #3a7bd5; }

.bibh-sd__callout-text {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Teacher note sub-line shown under a promoted resource callout */
.bibh-sd__callout-subnote {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 400;
    color: #5a6a72;
    font-style: italic;
}

.bibh-sd__callout-row--quiz em,
.bibh-sd__callout-row--resource em,
.bibh-sd__callout-row--flashcard em,
.bibh-sd__callout-row--retrieve em,
.bibh-sd__callout-row--feedback em,
.bibh-sd__callout-row--overdue em {
    font-style: normal;
    font-weight: 400;
    opacity: 0.65;
}

.bibh-sd__callout-row--quiz .bibh-sd__callout-text      { color: #9b2020; }
.bibh-sd__callout-row--resource .bibh-sd__callout-text  { color: #0e6b6b; }
.bibh-sd__callout-row--flashcard .bibh-sd__callout-text { color: #8a6500; }
.bibh-sd__callout-row--retrieve .bibh-sd__callout-text  { color: #4b2db8; }
.bibh-sd__callout-row--feedback .bibh-sd__callout-text  { color: #1e5c42; }
.bibh-sd__callout-row--overdue .bibh-sd__callout-text   { color: #7b1a1a; }
.bibh-sd__callout-row--caughtup .bibh-sd__callout-text  { color: #2d6b52; font-weight: 500; }

.bibh-sd__callout-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 30px;
    padding: 7px 18px;
    font-family: var(--bibh-font);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.15s;
}

.bibh-sd__callout-btn:hover { opacity: 0.88; }

.bibh-sd__callout-row--quiz .bibh-sd__callout-btn      { background: #e05454; color: #fff; }
.bibh-sd__callout-row--resource .bibh-sd__callout-btn  { background: #3dbfbf; color: #fff; }
.bibh-sd__callout-row--flashcard .bibh-sd__callout-btn { background: #f3d76a; color: #7a5c00; }
.bibh-sd__callout-row--retrieve .bibh-sd__callout-btn  { background: #8b6fe8; color: #fff; }
.bibh-sd__callout-row--feedback .bibh-sd__callout-btn  { background: #3F8170; color: #fff; }
.bibh-sd__callout-row--overdue .bibh-sd__callout-btn   { background: var(--bibh-danger, #dc2626); color: #fff; }

/* ── Dismiss (×) button ───────────────────────────────── */
.bibh-sd__callout-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: rgba(0,0,0,.25);
    padding: 4px 6px;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    margin-right: 4px;
}
.bibh-sd__callout-dismiss:hover {
    color: rgba(0,0,0,.55);
    background: rgba(0,0,0,.06);
}

/* ── 3-COLUMN MID GRID ────────────────────────────────── */
.bibh-sd__mid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}

/* Work On Next - dark card */
.bibh-sd__wol-card {
    background: var(--bibh-dark, #203D48);
    border-radius: 30px;
    padding: 22px 24px;
}

.bibh-sd__wol-eyebrow {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240, 246, 248, 0.38);
    margin-bottom: 8px;
}

/* Work On Next heading is a clickable shortcut into the LO's questions */
.bibh-sd__wol-head-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.bibh-sd__wol-head-link:hover .bibh-sd__wol-title,
.bibh-sd__wol-head-link:focus-visible .bibh-sd__wol-title {
    text-decoration: underline;
}
.bibh-sd__wol-head-link:focus-visible {
    outline: 2px solid var(--bibh-accent, #F3D76A);
    outline-offset: 3px;
    border-radius: 4px;
}

.bibh-sd__wol-code {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--bibh-accent, #F3D76A);
    margin-bottom: 4px;
}

.bibh-sd__wol-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f0f6f8;
    line-height: 1.25;
    margin-bottom: 14px;
}

.bibh-sd__wol-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.bibh-sd__wol-score {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--bibh-accent, #F3D76A);
    line-height: 1;
    flex-shrink: 0;
}

.bibh-sd__wol-bar-wrap { flex: 1; }

.bibh-sd__wol-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    overflow: hidden;
}

.bibh-sd__wol-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e05454, #f3a65a);
    border-radius: 30px;
}

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

.bibh-sd__wol-btn {
    border: none;
    border-radius: 30px;
    padding: 11px 16px;
    font-family: var(--bibh-font);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: opacity 0.15s;
}

.bibh-sd__wol-btn:hover { opacity: 0.88; }

.bibh-sd__wol-btn--fc {
    background: var(--bibh-primary, #3F8170);
    color: #fff;
}

.bibh-sd__wol-btn--sc {
    background: rgba(255, 255, 255, 0.1);
    color: #f0f6f8;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.bibh-sd__wol-btn--bl {
    background: var(--bibh-accent, #F3D76A);
    color: var(--bibh-dark, #203D48);
}

.bibh-sd__wol-no-content {
    font-size: 0.82rem;
    color: rgba(240, 246, 248, 0.55);
    font-style: italic;
    margin: 0;
    padding: 4px 0;
}

.bibh-sd__wol-empty {
    font-size: 0.875rem;
    color: rgba(240, 246, 248, 0.45);
    margin-top: 10px;
    line-height: 1.5;
}

/* Card header (Quizzes / Activity) */
.bibh-sd__card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 10px;
}

.bibh-sd__card-hd a {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bibh-primary, #3F8170);
    text-decoration: none;
}

/* Quiz items */
.bibh-sd__quiz-item {
    padding: 10px 20px;
    border-bottom: 1px solid var(--bibh-border, #e2e5ea);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bibh-sd__quiz-item:last-child { border-bottom: none; }

.bibh-sd__quiz-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bibh-sd__quiz-info { flex: 1; }

.bibh-sd__quiz-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bibh-dark, #203D48);
}

.bibh-sd__quiz-meta {
    font-size: 0.73rem;
    color: var(--bibh-text-muted, #7a96a0);
    margin-top: 2px;
}

.bibh-sd__quiz-link {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--bibh-primary, #3F8170);
    text-decoration: none;
    padding: 5px 12px;
    background: #e8f5f0;
    border-radius: 30px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.bibh-sd__quiz-link:hover { background: #d0eddf; }

/* Activity items */
.bibh-sd__act-item {
    padding: 10px 20px;
    border-bottom: 1px solid var(--bibh-border, #e2e5ea);
    display: flex;
    align-items: center;
    gap: 10px;
}

.bibh-sd__act-item:last-child { border-bottom: none; }

.bibh-sd__act-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bibh-sd__act-info { flex: 1; }

.bibh-sd__act-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bibh-dark, #203D48);
}

.bibh-sd__act-sub {
    font-size: 0.73rem;
    color: var(--bibh-text-muted, #7a96a0);
    margin-top: 1px;
}

.bibh-sd__act-score {
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bibh-sd__act-time {
    font-size: 0.68rem;
    color: #adb5bd;
    flex-shrink: 0;
}

/* Shared pill */
.bibh-sd__pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 30px;
    flex-shrink: 0;
}

.bibh-sd__pill--green  { background: #e2f5ec; color: #2a7a52; }
.bibh-sd__pill--orange { background: #fdf5df; color: #8a6500; }
.bibh-sd__pill--red    { background: #fdecea; color: #9b2020; }
.bibh-sd__pill--gray   { background: #eef2f4; color: #4a6470; }

/* Empty state */
.bibh-sd__empty {
    padding: 20px;
    font-size: 0.875rem;
    color: var(--bibh-text-muted, #7a96a0);
    text-align: center;
}

/* ── LO GRID ──────────────────────────────────────────── */
.bibh-sd__lo-wrap {
    padding: 20px 24px;
}

/* Collapsible "Your Learning Outcomes" section header.
   Force-transparent in every state so the theme's green button styling never
   paints a background behind the label (which made the text unreadable). */
.bibh-sd__lo-section-toggle,
.bibh-sd__lo-section-toggle:hover,
.bibh-sd__lo-section-toggle:focus,
.bibh-sd__lo-section-toggle:active,
.bibh-sd__lo-section-toggle:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: inherit;
    outline: none;
}
.bibh-sd__lo-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
/* Keyboard focus affordance that isn't green */
.bibh-sd__lo-section-toggle:focus-visible .bibh-sd__label {
    text-decoration: underline;
}
.bibh-sd__lo-section-chevron {
    display: inline-flex;
    color: var(--bibh-text-muted, #7a96a0);
    transition: transform 0.2s ease;
}
.bibh-sd__lo-section-toggle.is-collapsed {
    margin-bottom: 0;
}
.bibh-sd__lo-section-toggle.is-collapsed .bibh-sd__lo-section-chevron {
    transform: rotate(-90deg);
}

.bibh-sd__lo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.bibh-sd__lo-row {
    background: #fff;
    border: 1px solid var(--bibh-border, #e2e5ea);
    border-radius: 30px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bibh-sd__lo-code {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bibh-text-muted, #7a96a0);
    width: 40px;
    flex-shrink: 0;
}

.bibh-sd__lo-name {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bibh-dark, #203D48);
}

.bibh-sd__lo-bar-wrap {
    width: 90px;
    flex-shrink: 0;
}

.bibh-sd__lo-bar {
    height: 5px;
    background: var(--bibh-border, #e2e5ea);
    border-radius: 30px;
    overflow: hidden;
}

.bibh-sd__lo-bar-fill {
    height: 100%;
    border-radius: 30px;
}

.bibh-sd__lo-score {
    font-size: 0.8rem;
    font-weight: 700;
    width: 34px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 960px) {
    .bibh-sd__mid-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bibh-sd__wol-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .bibh-sd__mid-grid {
        grid-template-columns: 1fr;
    }

    .bibh-sd__wol-card {
        grid-column: auto;
    }

    .bibh-sd__hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .bibh-sd__hero-ring {
        display: none;
    }

    .bibh-sd__lo-grid {
        grid-template-columns: 1fr;
    }

    .bibh-sd__hero {
        padding: 22px 20px;
    }
}

/* ============================================================
   Orientation panel - shown on student dashboard when
   Quiz Builder add-on is not active. Guides students to
   the two features that are always available.
   ============================================================ */
.bibh-sd__orientation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}

.bibh-sd__orientation-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--bibh-border, #d9e8e4);
    border-radius: 30px;
    text-decoration: none;
    color: var(--bibh-dark, #203D48);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.bibh-sd__orientation-card:hover {
    box-shadow: 0 4px 16px rgba(63, 129, 112, 0.12);
    border-color: var(--bibh-primary, #3F8170);
    text-decoration: none;
    color: var(--bibh-dark, #203D48);
}

.bibh-sd__orientation-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(63, 129, 112, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bibh-primary, #3F8170);
}

.bibh-sd__orientation-text {
    flex: 1;
    min-width: 0;
}

.bibh-sd__orientation-title {
    font-family: var(--bibh-font, 'League Spartan', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bibh-dark, #203D48);
    margin-bottom: 3px;
}

.bibh-sd__orientation-sub {
    font-size: 0.8rem;
    color: var(--bibh-text-muted, #7a96a0);
    line-height: 1.4;
}

.bibh-sd__orientation-arrow {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--bibh-primary, #3F8170);
    line-height: 1;
    opacity: 0.6;
}

@media (max-width: 640px) {
    .bibh-sd__orientation-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LO CHAPTER ACCORDION
   ══════════════════════════════════════════════════════════════ */

.bibh-sd__lo-accordion {
    margin-top: 1rem;
}

/* Each chapter block */
.bibh-sd__lo-chapter {
    border-bottom: 1px solid var(--bibh-border, #dce8ec);
}
.bibh-sd__lo-chapter:last-child {
    border-bottom: none;
}

/* Clickable chapter header row */
.bibh-sd__lo-chapter-hdr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: opacity 0.15s;
}
.bibh-sd__lo-chapter-hdr:hover {
    opacity: 0.8;
}
.bibh-sd__lo-chapter-hdr:focus-visible {
    outline: 2px solid var(--bibh-primary, #3F8170);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Chapter number + optional title */
.bibh-sd__lo-ch-name {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 4.5rem;
}
.bibh-sd__lo-ch-num {
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--bibh-dark, #1a2e35);
    white-space: nowrap;
}
.bibh-sd__lo-ch-title {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--bibh-text-muted, #7a96a0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

/* Chapter progress bar */
.bibh-sd__lo-ch-bar-wrap {
    flex: 1;
}

/* Chapter percentage */
.bibh-sd__lo-ch-score {
    width: 2.75rem;
    text-align: right;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Chevron icon - rotates when open */
.bibh-sd__lo-ch-chevron {
    color: var(--bibh-text-muted, #7a96a0);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.bibh-sd__lo-chapter.is-open .bibh-sd__lo-ch-chevron {
    transform: rotate(180deg);
}

/* Collapsible body - hidden by default */
.bibh-sd__lo-chapter-body {
    display: none;
    padding-bottom: 0.5rem;
}
.bibh-sd__lo-chapter.is-open .bibh-sd__lo-chapter-body {
    display: block;
}

/* Individual LO rows inside an expanded chapter */
.bibh-sd__lo-row--sub {
    padding-left: 1.25rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    opacity: 0.9;
}
.bibh-sd__lo-row--sub .bibh-sd__lo-code {
    font-size: 0.8rem;
    color: var(--bibh-text-muted, #7a96a0);
    font-weight: 600;
}
.bibh-sd__lo-row--sub .bibh-sd__lo-name {
    font-size: 0.85rem;
}
.bibh-sd__lo-row--sub .bibh-sd__lo-score {
    font-size: 0.85rem;
}

/* ── Resource Hub tab: align the hub's gutters with the rest of the suite.
   .gd-hub-page carries its own 24px horizontal padding and a 1400px max-width
   for when the hub renders as a standalone page. Inside the suite that lands ON
   TOP of .bibh-suite__main's 28px, so the hub content sat 24px further in than
   the Classroom view on both sides (92px vs 68px, measured). Both are dropped
   here only - scoped to .bibh-suite__main, so a standalone hub page is
   untouched - which puts the two views on exactly the same gutters. ── */
.bibh-suite__main .gd-hub-page {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* ── Resource Hub tab: the strand rail is BACK.
   This block used to hide .gd-hub-filters on desktop and force the wrapper to a
   single column. Both are gone, so the hub's own layout applies again: a 240px
   rail beside the grid, collapsing to one column under 900px where the same
   element doubles as the off-canvas filter drawer. Nothing to re-add here - the
   markup was always rendered by the hub template; the suite was only hiding it. ── */

/* ============================================================
   Sidebar collapse toggle (desktop hide/show) - added 2.5.0
   ============================================================ */
.bibh-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bibh-sidebar__toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--bibh-white, #fff);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.bibh-sidebar__toggle:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.bibh-sidebar__toggle svg { transition: transform 0.2s ease; }

/* Collapsed state - desktop only (mobile uses the off-canvas toggle) */
@media (min-width: 769px) {
    .bibh-suite__sidebar.is-collapsed { width: 72px; }
    .bibh-suite__sidebar.is-collapsed .bibh-sidebar__hub-name,
    .bibh-suite__sidebar.is-collapsed .bibh-sidebar__logo,
    .bibh-suite__sidebar.is-collapsed .bibh-sidebar__nav-label,
    .bibh-suite__sidebar.is-collapsed .bibh-soon-badge { display: none; }
    .bibh-suite__sidebar.is-collapsed .bibh-sidebar__header {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .bibh-suite__sidebar.is-collapsed .bibh-sidebar__nav-item {
        justify-content: center;
        font-size: 0;          /* hides the text label; icon keeps its own size */
        padding-left: 0;
        padding-right: 0;
    }
    .bibh-suite__sidebar.is-collapsed .bibh-sidebar__toggle svg { transform: rotate(180deg); }
}

/* ============================================================
   Teacher hub menu - coloured section cards (2.8.0)
   ============================================================ */
.bibh-suite__sidebar--hubmenu {
    width: 250px;
    background: transparent;
    border-radius: 0;
}
.bibh-hubmenu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: width .38s cubic-bezier(.22,.61,.36,1);
}
.bibh-hubmenu__chevron {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 3px;
    color: currentColor;          /* inherits the section text colour (white on Resources) */
    line-height: 0;
    border-radius: 50%;
    transition: background .2s ease;
}
.bibh-hubmenu__chevron:hover { background: rgba(255,255,255,0.18); }
.bibh-hubmenu__chevron svg { width: 26px; height: 26px; }

.bibh-hubcard {
    background: var(--card);
    color: var(--ink);
    border-radius: 30px;
    box-shadow: var(--bibh-shadow-md, 0 4px 12px rgba(32,61,72,0.16));
    padding: 20px 22px 22px;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease,
                width .42s cubic-bezier(.22,.61,.36,1), height .42s cubic-bezier(.22,.61,.36,1),
                padding .42s cubic-bezier(.22,.61,.36,1), border-radius .42s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i) * .045s);
}
.bibh-hubcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--bibh-shadow-lg, 0 12px 30px rgba(32,61,72,0.26));
}
.bibh-hubcard[data-s="resources"]  { --card: var(--menu-bg-resources);  --ink: var(--menu-ink-resources); }
.bibh-hubcard[data-s="classtools"] { --card: var(--menu-bg-classtools); --ink: var(--menu-ink-classtools); }
.bibh-hubcard[data-s="reports"]    { --card: var(--menu-bg-reports);    --ink: var(--menu-ink-reports); }
.bibh-hubcard[data-s="account"]    { --card: var(--menu-bg-account);    --ink: var(--menu-ink-account); }

.bibh-hubcard__head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
/* Fixed-width icon column so every title (and the links below) line up, regardless of icon shape. */
.bibh-hubcard__icon {
    flex-shrink: 0;
    line-height: 0;
    color: var(--ink);
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bibh-hubcard__icon svg { width: 20px; height: 20px; display: block; }
.bibh-hubcard__icon--book svg { width: 28px; height: auto; }
.bibh-hubcard__title {
    font-family: 'League Spartan', sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--ink);
}
.bibh-hubcard__title, .bibh-hubcard__links { transition: opacity .2s ease; }
.bibh-hubcard__links { display: flex; flex-direction: column; gap: 1px; padding-left: 41px; }
.bibh-hublink {
    font-family: 'League Spartan', sans-serif;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.02rem;
    white-space: nowrap;
    opacity: .9;
    border-radius: 8px;
    transition: opacity .15s ease, transform .15s ease;
}
.bibh-hublink:hover { opacity: 1; transform: translateX(3px); color: var(--ink); }
/* Override Astra's a:focus colour + thin-dotted outline so focused links stay clean. */
.bibh-hubcard .bibh-hublink:focus,
.bibh-hubcard .bibh-hublink:focus-visible { color: var(--ink); outline: none; }
.bibh-hublink.is-active { opacity: 1; font-weight: 800; text-decoration: none; }
.bibh-hublink.is-soon { pointer-events: none; opacity: .55; }
.bibh-hub-soon {
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid currentColor;
    border-radius: 20px;
    padding: 0 6px;
    margin-left: 4px;
    opacity: .7;
}

/* Collapsed = circles (desktop only) */
@media (min-width: 769px) {
    .bibh-suite__sidebar--hubmenu.is-collapsed { width: 88px; }
    .bibh-suite__sidebar--hubmenu.is-collapsed .bibh-hubmenu { width: 88px; }
    .bibh-suite__sidebar--hubmenu.is-collapsed .bibh-hubmenu__chevron { display: none; }
    .bibh-suite__sidebar--hubmenu.is-collapsed .bibh-hubcard {
        width: 64px;
        height: 64px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        cursor: pointer;
    }
    .bibh-suite__sidebar--hubmenu.is-collapsed .bibh-hubcard__head { margin: 0; }
    .bibh-suite__sidebar--hubmenu.is-collapsed .bibh-hubcard__title,
    .bibh-suite__sidebar--hubmenu.is-collapsed .bibh-hubcard__links { opacity: 0; display: none; }
}

/* Mobile: teacher hub menu shows as full-width stacked cards (no collapse) */
@media (max-width: 768px) {
    .bibh-suite__sidebar--hubmenu {
        width: 100%;
        max-height: none;
        overflow: visible;
        background: transparent;
        border-radius: 0;
        padding: 4px 0 8px;
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubmenu { width: 100% !important; }
    .bibh-suite__sidebar--hubmenu .bibh-hubmenu__chevron { display: none; }
}

/* ============================================================
   Resource Hub - teacher's Teacher/Student view switch - 2.5.0
   ============================================================ */
.bibh-hub-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 20px;
    background: var(--bibh-secondary-bg, #e8f7fa);
    border-radius: 99px;
}
.bibh-hub-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 99px;
    font-family: var(--bibh-font, 'League Spartan', -apple-system, BlinkMacSystemFont, sans-serif);
    font-weight: 700;
    font-size: 13px;
    color: var(--bibh-dark, #203d48);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.bibh-hub-switch__btn:hover { background: rgba(255,255,255,0.6); }
.bibh-hub-switch__btn.is-active {
    background: var(--bibh-dark, #203d48);
    color: #fff;
}
.bibh-hub-switch__tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.65;
}

/* Resource Hub view only: drop the main top padding so the hub banner lines up
   with the top of the dark sidebar. Scoped via the hub's .gd-hub-page so other
   suite views keep their normal top spacing. */
.bibh-suite__main:has(.gd-hub-page) {
	padding-top: 0;
}
.bibh-suite__main .gd-hub-page {
	padding-top: 0;
}

/* ============================================================
   Mobile (option B): bottom-left "Menu" button + off-canvas drawer.
   Overrides the older top-bar accordion behaviour. - 2.5.0
   ============================================================ */
@media (max-width: 768px) {
	.bibh-suite { flex-direction: column; }

	/* Sidebar becomes a left off-canvas drawer, hidden until opened. */
	.bibh-suite__sidebar {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: 82%; max-width: 320px;
		height: 100%; max-height: none;
		z-index: 1000;
		border-radius: 0 24px 24px 0;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.28s ease;
	}
	.bibh-suite__sidebar.is-open { transform: translateX(0); }

	/* No top bar now; the desktop collapse chevron is irrelevant on mobile. */
	.bibh-sidebar__toggle { display: none; }

	/* Launch fix L-10: ONE gutter owner on mobile.
	   .bibh-suite pads 20px and .bibh-suite__main padded another 16px, so every
	   teacher screen lost 36px a side - 72px of a 375px phone, a fifth of the
	   display - before any content was drawn (Ashton, live test 2026-08-19).
	   The shell now contributes nothing horizontally and <main> owns the single
	   gutter, which is the only way to keep one number in one place. */
	.bibh-suite { padding-left: 0; padding-right: 0; }
	.bibh-suite__main { --bibh-gutter: 18px; padding: 12px var(--bibh-gutter) 32px; }

	/* Dim scrim behind the open drawer. */
	.bibh-suite__scrim {
		position: fixed; inset: 0;
		background: rgba(32, 61, 72, 0.5);
		z-index: 999;
		opacity: 0; pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.bibh-suite__scrim.is-open { opacity: 1; pointer-events: auto; }

	/* Menu button (option B) */
	.bibh-suite__menu-btn {
		position: fixed; left: 18px; bottom: 20px;
		z-index: 1001;
		display: inline-flex; align-items: center; gap: 10px;
		height: 54px; padding: 0 22px 0 18px;
		background: var(--bibh-dark); color: #fff; border: none; border-radius: 30px;
		font-family: var(--bibh-font); font-weight: 800; font-size: 16px;
		box-shadow: 0 8px 22px rgba(32, 61, 72, 0.34); cursor: pointer;
	}
	.bibh-suite__menu-btn-ic { display: inline-flex; }
	.bibh-suite__menu-btn-ic svg { width: 18px; height: 18px; }
}

/* ── Launch fix L-11: grid tracks were wider than the grid ────────────────
   Half the "drifting off the page" reports were ONE bug wearing different
   hats: the classroom cards, the assignment tracker, the class heatmap and
   "Needs your attention" all sat in a grid whose track was wider than its own
   container (the report grid measured 303px and its track resolved to 393px).

   `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor is the
   item's MIN-CONTENT width. A card holding a nowrap "View Dashboard" button
   beside a title, or a 4-column fixed inner grid, has a min-content of ~390px,
   so the track was pushed out to 390px inside a 303px box and the surplus
   painted over the edge of the screen. Nothing in the grid declarations was
   wrong; they were being overruled from the inside.

   `min-width: 0` removes that floor and lets the track shrink to the container
   it is actually in. It is deliberately broad - every grid in the suite - and
   it is only half the fix: a track that CAN shrink still needs contents that
   are willing to reflow, which is what the component rules below do. Without
   both halves you trade an overflowing grid for an overflowing card. */
.bibh-suite .bibh-grid > *,
.bibh-suite .bibh-tdash__report > *,
.bibh-suite .bibh-tiles > * {
	min-width: 0;
}

/* A tablet can afford a little more edge than a phone; 18px looked tight at
   768 and 18px is most of a word at 375. One step, same owner. */
@media (max-width: 544px) {
	/* Only the token moves. The padding declaration above still applies at this
	   width and re-resolves against the new value, so there is no second place
	   holding a copy of the number. */
	.bibh-suite__main { --bibh-gutter: 14px; }
}

/* Hide the mobile FAB + scrim on desktop. */
@media (min-width: 769px) {
	.bibh-suite__menu-btn, .bibh-suite__scrim { display: none !important; }
}

/* My Classrooms: one card per row across the whole mobile range (no empty grid column) */
@media (max-width: 768px) {
	.bibh-grid--classrooms { grid-template-columns: 1fr; }
}

/* My Classrooms: force full-width, flush-left content on mobile to match other views */
@media (max-width: 768px) {
	.bibh-suite__main > .bibh-section,
	.bibh-suite__main > .bibh-section > .bibh-header,
	.bibh-suite__main > .bibh-section > .bibh-grid {
		max-width: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.bibh-grid--classrooms { grid-template-columns: 1fr; justify-content: stretch; }
	.bibh-grid--classrooms > .bibh-card--classroom {
		max-width: none;
		width: auto;
		margin: 0;
		justify-self: stretch;
	}
	.bibh-card { padding: 16px; }
}

/* THE fix: on mobile the suite is a column flex; stretch items so <main> fills the
   width instead of shrinking to content and getting centred by .bibh-hub margin:auto */
@media (max-width: 768px) {
	.bibh-suite { align-items: stretch; }
	.bibh-suite__main.bibh-hub { max-width: none; margin: 0; }
}

/* Astra's page-builder layout forces margin:auto + centring on the suite <main>
   (specificity 0,4,0). The suite manages its own layout, so override it. */
.bibh-suite__main.bibh-hub {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}

/* ============================================================
   Teacher Settings (Account security + Connect Your Students)
   Added 2.6.0
   ============================================================ */
.bibh-settings {
	font-family: 'League Spartan', var(--bibh-font, sans-serif);
}

/* Status notice */
.bibh-settings__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}
.bibh-settings__notice--success {
	background: #e7f6ef;
	color: #1f7a55;
	border: 1px solid #b7e4cf;
}
.bibh-settings__notice--error {
	background: #fde8e8;
	color: #b3261e;
	border: 1px solid #f4c4c4;
}

/* Section titles */
.bibh-settings__section-title {
	margin: 28px 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: #203d48;
}
.bibh-settings__section-title:first-of-type {
	margin-top: 12px;
}
.bibh-settings__section-sub {
	margin: -8px 0 18px;
	font-size: 14px;
	color: #718096;
}

/* Two-column account grid */
.bibh-settings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.bibh-settings__card {
	padding: 22px 22px 18px;
}
.bibh-settings__card-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #203d48;
}
.bibh-settings__card-sub {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: #718096;
	line-height: 1.5;
}
.bibh-settings__card-sub strong {
	color: #203d48;
}

/* Form fields */
.bibh-settings__form .bibh-form-group {
	margin-bottom: 14px;
}
.bibh-settings__form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #203d48;
}
.bibh-settings__form .bibh-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #203d48;
	background: #fff;
	box-sizing: border-box;
}
.bibh-settings__form .bibh-input:focus {
	outline: none;
	border-color: #3f8170;
	box-shadow: 0 0 0 3px rgba(63, 129, 112, 0.15);
}
.bibh-settings__form .bibh-form-actions {
	margin-top: 18px;
}

/* Connect Your Students */
.bibh-settings__seats {
	margin: -6px 0 16px;
	font-size: 14px;
	color: #718096;
}
.bibh-settings__seats strong {
	color: #203d48;
}
.bibh-settings__class-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.bibh-settings__class-card {
	padding: 18px 20px;
}
.bibh-settings__class-title {
	margin: 0 0 12px;
	font-size: 15.5px;
	font-weight: 700;
	color: #203d48;
}
.bibh-settings__code-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.bibh-settings__code-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: #e8f7fa;
	color: #203d48;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
}
.bibh-settings__class-actions {
	margin-top: 4px;
}

/* Copy buttons */
.bibh-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: none;
	border-radius: 999px;
	background: #3f8170;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.bibh-copy-btn:hover {
	background: #356d5f;
}
.bibh-copy-btn--ghost {
	background: #e8f7fa;
	color: #203d48;
}
.bibh-copy-btn--ghost:hover {
	background: #d6eef3;
}
.bibh-copy-btn.is-copied,
.bibh-copy-btn--ghost.is-copied {
	background: #1f7a55;
	color: #fff;
}

@media (max-width: 768px) {
	.bibh-settings__grid,
	.bibh-settings__class-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Mobile drawer - compact hub menu (2026-07-05, per Ashton)
   The old top-bar-accordion block above forced the hubmenu
   sidebar to width:100% / transparent, which made the drawer
   span the whole phone. Restore proper drawer sizing and turn
   the four section cards into tap-to-expand accordions so the
   menu fits on one screen.
   ============================================================ */
@media (max-width: 768px) {
    .bibh-suite__sidebar--hubmenu {
        /* !important: Astra's page-builder entry-content rules (specificity
           0,4,0) force max-width:none on direct children - same fight as the
           margin:auto full-width bug. */
        width: 82% !important;
        max-width: 300px !important;
        /* Floating panel inset from every edge - never clipped by the top of
           the screen (or the WP admin bar), and the page peeks through the
           frosted background. */
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        height: auto !important;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 14px 44px rgba(32, 61, 72, 0.3);
        overflow-y: auto;
        padding: 14px 12px 20px;
        max-height: none;
        transform: translateX(calc(-100% - 14px));
    }
    .bibh-suite__sidebar--hubmenu.is-open {
        transform: translateX(0);
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubmenu {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    /* Compact card = slim header row; links hidden until tapped. */
    .bibh-suite__sidebar--hubmenu .bibh-hubcard {
        padding: 14px 16px;
        margin: 0;
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubcard__head {
        margin: 0;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubcard__head::after {
        content: '';
        position: absolute;
        right: 2px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2.5px solid currentColor;
        border-bottom: 2.5px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform 0.2s ease;
        opacity: 0.7;
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubcard.is-exp .bibh-hubcard__head::after {
        transform: translateY(-30%) rotate(225deg);
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubcard__links {
        display: none;
        flex-direction: column;
        margin-top: 10px;
    }
    .bibh-suite__sidebar--hubmenu .bibh-hubcard.is-exp .bibh-hubcard__links {
        display: flex;
    }
}

/* ============================================================
   Framed external pages (Exam Builder / My Saved Exams)
   ------------------------------------------------------------
   These render the standalone Exam Builder / My Exams output
   inside the suite shell (.bibh-suite--framed). The Exam Builder
   plugin ships its own front.css written for a full-width page,
   and emits bare <h2>/<label>/<button> elements that would
   otherwise inherit the THEME's typography instead of the hub's.
   Force the hub font and let the content fill the frame so the
   page matches the native classroom views (fonts + spacing).
   Scoped entirely to .bibh-suite--framed, so classroom views
   and everything else are unaffected.
   ============================================================ */
.bibh-suite--framed .bibh-suite__main,
.bibh-suite--framed .bibh-suite__main h1,
.bibh-suite--framed .bibh-suite__main h2,
.bibh-suite--framed .bibh-suite__main h3,
.bibh-suite--framed .bibh-suite__main h4,
.bibh-suite--framed .bibh-suite__main h5,
.bibh-suite--framed .bibh-suite__main p,
.bibh-suite--framed .bibh-suite__main label,
.bibh-suite--framed .bibh-suite__main button,
.bibh-suite--framed .bibh-suite__main input,
.bibh-suite--framed .bibh-suite__main select,
.bibh-suite--framed .bibh-suite__main textarea {
    font-family: var(--bibh-font, "League Spartan", sans-serif);
}

/* Exam Builder container fills the frame like the native hub views
   (drop the standalone-page centering / max-width). */
.bibh-suite--framed .bibh-suite__main > .bibh-wrap,
.bibh-suite--framed .bibh-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* ============================================================
   Reclaim Astra's article padding on suite pages
   ------------------------------------------------------------
   Astra's dynamic CSS applies padding: 2em 20px (top + sides) to
   .ast-single-post.ast-page-builder-template .site-main > article
   at ALL widths (a base rule, not responsive). This stylesheet only
   loads on pages hosting the suite shortcode, so these overrides
   cannot touch ordinary WordPress/Astra pages.

   TOP: removed at every breakpoint (design pass 1, 2026-08-04 - the
   old "padding-top left untouched" decision is reversed; platform
   pages are immersive with no theme gap above the suite).

   SIDES: kept on dashboards/landings at tablet/desktop (their 20px
   gutter stays), removed only at Astra's mobile breakpoint <=544px
   where it double-stacked with the suite's own 16px gutter, and on
   full-bleed activity pages (the :has() rule in the section above).

   The `body` prefix gives higher specificity than Astra's rule
   (0,3,2 vs 0,3,1) so this wins regardless of load order.
   ============================================================ */
body.ast-single-post.ast-page-builder-template .site-main > article {
    padding-top: 0;
}

@media (max-width: 544px) {
    body.ast-single-post.ast-page-builder-template .site-main > article {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================================
   Full-bleed immersive activities (design pass 1, 2026-08-04)
   ------------------------------------------------------------
   When a student is DOING an activity (Take 10 / quiz take +
   results, flashcards, budget lab, blitz, self-check) the shell
   drops its side gutters so the activity
   spans the full viewport, edge to edge - the Quizlet/Kahoot
   play-mode feel. The PHP adds .bibh-suite--fullbleed for
   exactly those focus views; Settings shares .bibh-suite--focus
   (menu-less chrome) but is a form, so it deliberately does NOT
   get this class and stays at the readable container width.
   The shell and Astra article padding go to zero; <main> keeps
   .bibh-hub's own slim 24px/16px padding as the ONLY inset, so
   self-centering activities (quiz take, budget lab) span the
   viewport while flow content (results review, back control)
   never glues to the physical screen edge.
   Mobile <=768px already runs max-width:none on the main; these
   rules make desktop match, at (0,2,0)+ specificity so later
   media-query .bibh-suite rules (0,1,0) can't re-inset it.
   ============================================================ */
.bibh-suite.bibh-suite--fullbleed {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Astra's article side padding (20px, all widths) would still inset the
   activity; strip it only on pages whose suite is in full-bleed mode, so
   dashboards/landings keep their side gutters. */
body.ast-single-post.ast-page-builder-template:has(.bibh-suite--fullbleed) .site-main > article {
    padding-left: 0;
    padding-right: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   Student settings: leave-classroom danger zone + confirm dialog
   --------------------------------------------------------------------------
   Replaces the class-switch-by-code control (Ashton, 2026-08-19). Sits last on
   the page so the only destructive thing a student can do takes deliberate
   scrolling to reach.
   ══════════════════════════════════════════════════════════════════════════ */
/* The student's name, shown but not editable. Reads as a value, not a field,
   so nothing invites a tap that will not do anything. */
.bibh-settings__readonly-name {
	margin: 4px 0 12px;
	font-size: 20px; font-weight: 800;
	color: var(--bibh-dark, #203D48);
}

.bibh-danger__title { margin-top: 34px; }

/* Tinted card, not a coloured rail down the edge - house rule. */
.bibh-card.bibh-danger {
	background: #fdf6f5;
	border: 1.5px solid #f0cfc9;
}

.bibh-danger__btn,
.bibh-danger__btn:hover,
.bibh-danger__btn:focus,
.bibh-danger__btn:active {
	background: #bb3f2d;
	color: #fff;
	border: none;
	border-radius: 30px;
	padding: 12px 26px;
	font-family: inherit; font-weight: 800; font-size: 15px;
	cursor: pointer;
	margin-top: 6px;
}
.bibh-danger__btn:hover { background: #a4351f; }
.bibh-danger__btn:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 2px; }
.bibh-danger__btn:disabled { opacity: .65; cursor: default; }

/* ── Confirm dialog ─────────────────────────────────────────────────────── */
.bibh-leave-modal {
	position: fixed; inset: 0; z-index: 100000;
	box-sizing: border-box;
	background: rgba(32, 61, 72, .55);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.bibh-leave-modal[hidden] { display: none; }

.bibh-leave-modal__card {
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
	width: 100%; max-width: 420px;
	padding: 26px 24px 22px;
	box-sizing: border-box;
}
.bibh-leave-modal__t {
	margin: 0 0 8px;
	font-size: 22px; font-weight: 800;
	color: var(--bibh-dark, #203D48);
}
.bibh-leave-modal__b {
	margin: 0 0 16px;
	font-size: 14.5px; line-height: 1.5;
	color: var(--bibh-text-light, #4a6272);
}
.bibh-leave-modal__lbl {
	display: block; margin-bottom: 6px;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--bibh-text-muted, #888);
}
.bibh-leave-modal__pw {
	width: 100%; box-sizing: border-box;
	border: 1.5px solid var(--bibh-border, #e2e5ea);
	border-radius: 30px;
	padding: 12px 18px;
	font-family: inherit; font-size: 15px;
	color: var(--bibh-dark, #203D48);
}
.bibh-leave-modal__pw:focus {
	outline: none;
	border-color: var(--bibh-primary, #3F8170);
	box-shadow: 0 0 0 3px var(--bibh-primary-light, #d9ece7);
}
.bibh-leave-modal__err {
	margin: 10px 0 0; min-height: 18px;
	font-size: 13px; font-weight: 700; color: #bb3f2d;
}
/* Cancel sits LAST on a phone (see the column-reverse below), which is the
   platform convention - an iOS action sheet puts Cancel at the bottom, nearest
   the thumb - and on a wide screen it sits left of the destructive button. The
   password gate is what actually prevents an accidental leave; this just keeps
   the way out where a hand already is. */
.bibh-leave-modal__acts {
	display: flex; justify-content: flex-end; align-items: center;
	gap: 10px; flex-wrap: wrap;
	margin-top: 14px;
}
.bibh-leave-modal__acts .bibh-danger__btn { margin-top: 0; }

/* Cancel must not read as the "go" button. The shared ghost class renders solid
   green in this context, which put a green Continue-looking control next to a
   red one and made the safe choice look like the committing one. Neutral and
   outlined: the red button is the only thing on the dialog that looks like an
   action, which is the point. */
.bibh-leave-modal__acts .bibh-btn--ghost,
.bibh-leave-modal__acts .bibh-btn--ghost:hover,
.bibh-leave-modal__acts .bibh-btn--ghost:focus,
.bibh-leave-modal__acts .bibh-btn--ghost:active {
	background: #fff;
	color: var(--bibh-text-light, #4a6272);
	border: 1.5px solid var(--bibh-border, #e2e5ea);
	border-radius: 30px;
	padding: 12px 26px;
	font-family: inherit; font-weight: 800; font-size: 15px;
	cursor: pointer;
}
.bibh-leave-modal__acts .bibh-btn--ghost:hover {
	background: #f4f5f4;
	color: var(--bibh-dark, #203D48);
}

@media (max-width: 420px) {
	.bibh-leave-modal__acts { flex-direction: column-reverse; align-items: stretch; }
	.bibh-leave-modal__acts .bibh-btn { width: 100%; }
}