/**
 * BIBH Classroom Suite - Teacher-specific styles.
 *
 * Builds on common.css. Adds teacher-specific card accents,
 * promote button, and student folder view enhancements.
 */

/* === Classroom single - stat cards === */
.bibh-cs-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.bibh-cs-stat {
    background: var(--bibh-white);
    border: 1px solid var(--bibh-border);
    border-top: 4px solid var(--bibh-neutral);
    border-radius: var(--bibh-radius-md);
    padding: 18px 20px;
}

.bibh-cs-stat--primary   { border-top-color: var(--bibh-primary); }
.bibh-cs-stat--secondary { border-top-color: var(--bibh-secondary); }
.bibh-cs-stat--accent    { border-top-color: var(--bibh-accent); }

.bibh-cs-stat__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bibh-dark);
    line-height: 1;
    margin-bottom: 6px;
}

.bibh-cs-stat__value--code {
    font-size: 1.1rem;
    font-family: monospace;
    letter-spacing: 0.12em;
}

.bibh-cs-stat__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bibh-text-muted);
}

@media (max-width: 768px) {
    .bibh-cs-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === Classroom single - stat card danger variant === */
.bibh-cs-stat--danger { border-top-color: var(--bibh-danger); }

.bibh-cs-stat__note {
    font-size: 0.72rem;
    color: var(--bibh-danger);
    font-weight: 600;
    margin-top: 4px;
}

/* === Classroom single - assigned quizzes table === */
.bibh-cs-quiz-title {
    font-weight: 600;
    color: var(--bibh-dark);
    font-size: 0.95rem;
}

.bibh-cs-completion {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bibh-cs-completion__count {
    font-weight: 600;
    color: var(--bibh-dark);
    font-size: 0.9rem;
    min-width: 36px;
}

.bibh-cs-completion__bar {
    flex: 1;
    max-width: 100px;
    height: 6px;
    background: var(--bibh-neutral-light);
    border-radius: var(--bibh-radius-pill);
    overflow: hidden;
}

.bibh-cs-completion__fill {
    height: 100%;
    background: var(--bibh-primary);
    border-radius: var(--bibh-radius-pill);
    transition: width 0.3s ease;
}

/* === Classroom single - student table helpers === */
.bibh-cs-student-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bibh-cs-student-name {
    font-weight: 600;
    color: var(--bibh-dark);
    font-size: 0.95rem;
}

.bibh-cs-student-email {
    font-size: 0.8rem;
    color: var(--bibh-text-muted);
    font-weight: 300;
}

.bibh-cs-row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* === Classroom single - score pill === */
.bibh-cs-score {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--bibh-radius-pill);
}

.bibh-cs-score--high {
    background: var(--bibh-primary-light);
    color: var(--bibh-primary);
}

.bibh-cs-score--mid {
    background: var(--bibh-warning-light);
    color: var(--bibh-warning);
}

.bibh-cs-score--low {
    background: var(--bibh-danger-light);
    color: var(--bibh-danger);
}

/* === Classroom single - LO spotlight badges === */
.bibh-cs-lo-badge {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 10px;
}

.bibh-cs-lo-badge--best {
    background: var(--bibh-primary-light);
    color: var(--bibh-primary);
}

.bibh-cs-lo-badge--worst {
    background: var(--bibh-danger-light);
    color: var(--bibh-danger);
}

/* === Classroom single - activity indicator === */
.bibh-cs-activity {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.83rem;
    color: var(--bibh-text-muted);
}

.bibh-cs-activity__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bibh-primary);
    flex-shrink: 0;
}

.bibh-cs-activity--inactive .bibh-cs-activity__dot {
    background: var(--bibh-danger);
}

.bibh-cs-activity--inactive .bibh-cs-activity__label {
    color: var(--bibh-danger);
}

/* === Classroom single - inactive student row === */
.bibh-cs-student-row--inactive {
    background: var(--bibh-danger-light);
}

.bibh-cs-student-row--inactive:hover td {
    background: #fde8e8 !important;
}

/* === Classroom cards - left accent border === */
.bibh-teacher-hub .bibh-card--classroom {
    border-left: 4px solid var(--bibh-primary);
}

.bibh-teacher-hub .bibh-card--classroom .bibh-card__title a:hover {
    color: var(--bibh-primary);
}

/* === Student count chip === */
.bibh-teacher-hub .bibh-card__footer .bibh-text-muted {
    font-size: 0.85rem;
    font-weight: 400;
}

/* === Student folder view - upload cards === */
.bibh-teacher-hub .bibh-card--upload {
    border-left: 3px solid var(--bibh-secondary);
}

/* === Promote button accent === */
.bibh-teacher-hub .bibh-btn--promote {
    background: var(--bibh-accent);
    color: var(--bibh-dark);
    border-color: var(--bibh-accent);
    font-weight: 600;
}

.bibh-teacher-hub .bibh-btn--promote:hover {
    background: #e8cb55;
    box-shadow: var(--bibh-shadow-sm);
}

/* === Resource cards in teacher view === */
.bibh-teacher-hub .bibh-card--resource {
    border-left: 3px solid var(--bibh-lime);
}

/* === Note input area in teacher view === */
.bibh-teacher-hub .bibh-note-form {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.bibh-teacher-hub .bibh-note-form .bibh-input {
    flex: 1;
}

.bibh-teacher-hub .bibh-note-form .bibh-btn {
    flex-shrink: 0;
}

/* === Settings button icon alignment === */
.bibh-btn--icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bibh-btn--icon svg {
    flex-shrink: 0;
}

/* === Settings page form === */
.bibh-teacher-hub #bibh-settings-card {
    max-width: 560px;
}

.bibh-teacher-hub #bibh-settings-card h3 {
    margin-bottom: 4px;
}

/* === Settings modal sections === */
.bibh-settings-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bibh-neutral-light);
}

.bibh-settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 16px;
}

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

.bibh-settings-section__title--danger {
    color: #dc2626;
}

.bibh-settings-section--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--bibh-radius-md);
    padding: 18px;
    margin-bottom: 0;
}

.bibh-settings-section--danger .bibh-text-muted {
    font-size: 0.85rem;
    margin: 0 0 14px;
    color: #991b1b;
}

/* === Student cards grid === */
.bibh-grid--students {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.bibh-card--student {
    border-left: 4px solid var(--bibh-secondary);
}

.bibh-student-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bibh-student-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bibh-secondary);
    color: var(--bibh-dark);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.bibh-student-card__info {
    flex: 1;
    min-width: 0;
}

.bibh-card--student .bibh-card__title {
    font-size: 0.95rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bibh-card--student .bibh-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Remove button sits above the stretched-link overlay */
.bibh-card--student .bibh-remove-student-btn {
    position: relative;
    z-index: 2;
}

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

/* === Compact upload rows (inside side panel) === */
.bibh-upload-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bibh-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--bibh-border);
}

.bibh-upload-row:last-child {
    border-bottom: none;
}

.bibh-upload-row__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.bibh-upload-row__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bibh-upload-row__title {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--bibh-dark);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bibh-upload-row__title:hover {
    color: var(--bibh-primary);
    text-decoration: underline;
}

.bibh-upload-row__meta {
    font-size: 0.75rem;
    color: var(--bibh-text-muted);
    white-space: nowrap;
}

.bibh-upload-row__student-link {
    color: var(--bibh-text-muted);
    text-decoration: none;
}

.bibh-upload-row__student-link:hover {
    color: var(--bibh-primary);
    text-decoration: underline;
}

.bibh-upload-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Promoted state */
.bibh-promoted-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--bibh-radius-pill);
    background: #e1f5ee;
    color: #0f6e56;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Note items inside the comment modal ── */
.bibh-note-item {
    padding: 10px 12px;
    background: var(--bibh-bg-light, #f8f9fa);
    border-radius: var(--bibh-radius);
    margin-bottom: 8px;
}

.bibh-note-item__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.bibh-note-item__author {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bibh-primary);
}

.bibh-note-item__date {
    font-size: 0.76rem;
    color: var(--bibh-text-muted);
    margin-left: auto;
}

.bibh-note-item__delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bibh-text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.bibh-note-item__delete:hover {
    opacity: 1;
    color: var(--bibh-danger, #dc2626);
}

.bibh-note-item__text {
    margin: 0;
    font-size: 0.87rem;
    color: var(--bibh-text);
    line-height: 1.45;
    white-space: pre-wrap;
}

.bibh-note-divider {
    border: none;
    border-top: 1px solid var(--bibh-border);
    margin: 12px 0;
}

.bibh-note-add-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Icon-only button */
.bibh-btn--icon {
    padding: 5px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
}

/* Note count badge on the comment icon button */
.bibh-note-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--bibh-primary, #1a3a5c);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Quick-add resource tab strip */
.bibh-qar-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bibh-border);
    padding-bottom: 10px;
}

.bibh-qar-tab {
    padding: 5px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 0.5px solid var(--bibh-border);
    border-radius: var(--bibh-radius-pill);
    background: transparent;
    color: var(--bibh-text-muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.bibh-qar-tab--active,
.bibh-qar-tab:hover {
    background: var(--bibh-primary);
    color: #fff;
    border-color: var(--bibh-primary);
}

/* === Group code display row (classroom settings modal) === */
.bibh-group-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 6px;
}

.bibh-group-code-display {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--bibh-dark);
    background: var(--bibh-neutral-light);
    border: 1px solid var(--bibh-border);
    border-radius: var(--bibh-radius-sm);
    padding: 6px 16px;
    font-family: monospace;
    min-width: 100px;
    text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   Monday Morning Report card  (.bibh-mmr) - dark navy row layout
   ══════════════════════════════════════════════════════════════════════════ */

.bibh-mmr {
    background: #1b2e3c;
    border-radius: 30px;
    padding: 24px 26px 20px;
    margin-bottom: 28px;
}

/* ── Card header ── */
.bibh-mmr__header {
    margin-bottom: 18px;
}

.bibh-mmr__eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f5a623;
    margin-bottom: 6px;
}

.bibh-mmr__subtitle {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.4;
}

/* ── Rows container ── */
.bibh-mmr__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Individual row ── */
.bibh-mmr__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 13px 18px;
    border-left: 3px solid transparent;
}

.bibh-mmr__row--green { border-left-color: #2ecc71; }
.bibh-mmr__row--red   { border-left-color: var(--bibh-danger, #dc2626); }
.bibh-mmr__row--warn  { border-left-color: var(--bibh-warning, #FFA700); background: rgba(255, 167, 0, 0.1); }

/* ── Row body (label + sub) ── */
.bibh-mmr__row-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bibh-mmr__row-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.bibh-mmr__row-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Row value (right side) ── */
.bibh-mmr__row-value {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    flex-shrink: 0;
}

.bibh-mmr__row-value--green { color: #2ecc71; }
.bibh-mmr__row-value--red   { color: var(--bibh-danger, #dc2626); }
.bibh-mmr__row-value--warn  { color: var(--bibh-warning, #FFA700); }

/* ── Upcoming quizzes ── */
.bibh-mmr__upcoming {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bibh-mmr__upcoming-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}

.bibh-mmr__upcoming-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bibh-mmr__upcoming-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
}

.bibh-mmr__upcoming-date {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .bibh-mmr__row-label {
        white-space: normal;
    }

    .bibh-mmr__row-sub {
        white-space: normal;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Clickable stat cards
   ══════════════════════════════════════════════════════════════════════════ */

.bibh-cs-stat--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.bibh-cs-stat--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--bibh-primary);
    color: inherit;
    text-decoration: none;
}

/* Button reset for group code card */
button.bibh-cs-stat--link {
    width: 100%;
    text-align: left;
    background: var(--bibh-white, #fff);
    border: 1px solid var(--bibh-border, #dde3e9);
    font-family: inherit;
    font-size: inherit;
}

.bibh-cs-stat--copy:hover .bibh-cs-stat__copy-hint {
    color: var(--bibh-primary);
}

.bibh-cs-stat__copy-hint {
    font-size: 0.72em;
    opacity: 0.7;
    transition: color 0.15s;
}

.bibh-cs-stat--copied {
    border-top-color: var(--bibh-success, #049F84) !important;
}

.bibh-cs-stat--copied .bibh-cs-stat__label {
    color: var(--bibh-success, #049F84);
    font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════════════════
   Follow-up view  (.bibh-qb-follow-up)
   ══════════════════════════════════════════════════════════════════════════ */

.bibh-qb-follow-up {
    max-width: 720px;
}

.bibh-qb-follow-up__breadcrumb {
    font-size: 0.82rem;
    color: var(--bibh-muted, #7f8c9a);
    margin-bottom: 12px;
}

.bibh-qb-follow-up__breadcrumb a {
    color: var(--bibh-primary);
    text-decoration: none;
}

.bibh-qb-follow-up__breadcrumb a:hover { text-decoration: underline; }

.bibh-qb-follow-up__breadcrumb-sep {
    margin: 0 6px;
    opacity: 0.5;
}

.bibh-qb-follow-up__heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bibh-dark);
    margin: 0 0 4px;
}

.bibh-qb-follow-up__sub {
    font-size: 0.88rem;
    color: var(--bibh-muted, #7f8c9a);
    margin: 0 0 24px;
}

.bibh-qb-follow-up__empty {
    background: #f0faf4;
    border: 1px solid #a8ddb9;
    border-radius: 10px;
    padding: 20px 24px;
    color: #1a6b3a;
    font-size: 0.95rem;
    font-weight: 600;
}

.bibh-qb-follow-up__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.bibh-qb-follow-up__row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff8f8;
    border: 1px solid #f5c6c6;
    border-left: 4px solid var(--bibh-danger, #dc2626);
    border-radius: 10px;
    padding: 14px 16px;
}

.bibh-qb-follow-up__row--active {
    background: var(--bibh-white, #fff);
    border: 1px solid var(--bibh-border, #dde3e9);
    border-left: 4px solid var(--bibh-success, #049F84);
}

.bibh-qb-follow-up__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bibh-danger, #dc2626);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bibh-qb-follow-up__avatar--active {
    background: var(--bibh-success, #049F84);
}

.bibh-qb-follow-up__info {
    flex: 1;
    min-width: 0;
}

.bibh-qb-follow-up__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bibh-dark);
}

.bibh-qb-follow-up__since {
    font-size: 0.8rem;
    color: var(--bibh-danger, #dc2626);
    margin-top: 2px;
}

.bibh-qb-follow-up__since--ok {
    color: var(--bibh-success, #049F84);
}

.bibh-qb-follow-up__section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bibh-muted, #7f8c9a);
    margin: 0 0 12px;
}


/* Resource row + side panel styles moved to common.css (shared with student views) */


/* ══════════════════════════════════════════════════════════════════════════
   Teacher Classroom redesign  (.bibh-tc__)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─ Outer wrapper ─ */
.bibh-tc {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ─ Hero card (navy, floating) ─ */
.bibh-tc__hero {
    background: var(--bibh-dark, #203D48);
    border-radius: 30px;
    padding: 24px 28px 0;
    margin-bottom: 0;
}

.bibh-tc__breadcrumb {
    font-size: 0.78rem;
    color: rgba(240,246,248,0.45);
    margin-bottom: 14px;
}

.bibh-tc__breadcrumb a {
    color: rgba(240,246,248,0.45);
    text-decoration: none;
    transition: color 0.15s;
}

.bibh-tc__breadcrumb a:hover {
    color: rgba(240,246,248,0.85);
    text-decoration: none;
}

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

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

.bibh-tc__greeting-text {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #f0f6f8;
    line-height: 1.2;
    margin-bottom: 4px;
}

.bibh-tc__greeting-sub {
    font-size: 0.85rem;
    color: rgba(240, 246, 248, 0.55);
    margin-bottom: 0;
}

.bibh-tc__hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 6px;
}

.bibh-tc__btn-add {
    background: var(--bibh-secondary, #91D1DB);
    color: var(--bibh-dark, #203D48);
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s;
    white-space: nowrap;
}

.bibh-tc__btn-add:hover {
    background: #7ec8d4;
}

.bibh-tc__btn-cog {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(240,246,248,0.75);
    font-family: inherit;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.bibh-tc__btn-cog:hover {
    background: rgba(255,255,255,0.18);
    color: #f0f6f8;
}

/* ─ Stat pills strip (Option A - individual floating cards) ─ */
.bibh-tc__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px 0 24px;
}

.bibh-tc__stat {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 20px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    text-align: left;
    cursor: default;
}

a.bibh-tc__stat,
button.bibh-tc__stat {
    cursor: pointer;
}

a.bibh-tc__stat:hover,
button.bibh-tc__stat:hover {
    background: rgba(255,255,255,0.13);
    text-decoration: none;
    color: inherit;
}

.bibh-tc__stat-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f0f6f8;
    line-height: 1;
    margin-bottom: 3px;
}

.bibh-tc__stat-val--code {
    font-size: 1.05rem;
    letter-spacing: 0.15em;
    color: var(--bibh-secondary, #91D1DB);
    /* Launch fix L-15: a classroom code is one token and must never break.
       In the narrow stat tile ZQN-176 was wrapping at the hyphen and reading
       as "ZQN-" over "176", which a teacher could copy out wrong. The code
       shrinks to fit the tile instead of splitting. */
    white-space: nowrap;
}
@media (max-width: 640px) {
    .bibh-tc__stat-val--code { font-size: .95rem; letter-spacing: .08em; }
}
.bibh-classroom-code,
.bibh-classroom-code--copy { white-space: nowrap; }

.bibh-tc__stat-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(240,246,248,0.42);
}

.bibh-tc__stat--warn .bibh-tc__stat-val {
    color: var(--bibh-accent, #F3D76A);
}

.bibh-tc__stat--code .bibh-tc__stat-val {
    color: var(--bibh-secondary, #91D1DB);
}

.bibh-tc__copy-hint {
    font-size: 0.72em;
    opacity: 0.7;
    transition: color 0.15s;
}

.bibh-tc__stat--copy:hover .bibh-tc__copy-hint {
    color: var(--bibh-secondary, #91D1DB);
    opacity: 1;
}

.bibh-tc__stat--copied .bibh-tc__stat-lbl {
    color: var(--bibh-secondary, #91D1DB);
}

.bibh-tc__stat-new {
    display: inline-block;
    background: var(--bibh-secondary, #91D1DB);
    color: #0d2b2b;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.bibh-tc__stat-recency {
    color: var(--bibh-secondary, #91D1DB);
    opacity: 0.85;
}


/* ─ Morning Report (teal chip strip) ─ */
.bibh-tc__mmr {
    background: #e8f5f7;
    border: 1px solid #c5e6ec;
    border-radius: 30px;
    padding: 18px 24px;
    margin-top: 16px;
}

.bibh-tc__mmr-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bibh-tc__mmr-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bibh-dark, #203D48);
    flex-shrink: 0;
}

.bibh-tc__mmr-sub {
    font-size: 0.8rem;
    color: var(--bibh-text-muted, #888);
    font-weight: 400;
}

.bibh-tc__mmr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bibh-tc__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #c5e6ec;
    border-radius: 30px;
    padding: 5px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.bibh-tc__chip-val {
    font-weight: 800;
    color: var(--bibh-dark, #203D48);
}

.bibh-tc__chip-lbl {
    color: var(--bibh-text-muted, #888);
    font-weight: 400;
}

.bibh-tc__chip--green {
    border-color: #aed8c5;
    background: #ecfaf4;
}

.bibh-tc__chip--green .bibh-tc__chip-val {
    color: var(--bibh-primary, #3F8170);
}

.bibh-tc__chip--red {
    border-color: #f2c0c0;
    background: #fff4f4;
}

.bibh-tc__chip--red .bibh-tc__chip-val {
    color: var(--bibh-danger, #dc2626);
}

.bibh-tc__chip--warn {
    border-color: #f5dea8;
    background: #fffbee;
}

.bibh-tc__chip--warn .bibh-tc__chip-val {
    color: var(--bibh-warning, #FFA700);
}


/* ─ Section wrapper ─ */
.bibh-tc__section {
    margin-top: 28px;
}

.bibh-tc__section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bibh-tc__section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bibh-text-muted, #888);
    margin: 0;
}

.bibh-tc__section-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bibh-primary, #3F8170);
    text-decoration: none;
    transition: color 0.15s;
}

.bibh-tc__section-link:hover {
    color: var(--bibh-primary-dark, #346b5d);
    text-decoration: none;
}


/* ─ Quiz card grid ─ */
.bibh-tc__quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bibh-tc__quiz-card {
    background: #fff;
    border: 1px solid var(--bibh-border, #e2e5ea) !important;
    border-radius: 30px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.bibh-tc__quiz-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.bibh-tc__quiz-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bibh-dark, #203D48);
    flex: 1;
    line-height: 1.3;
}

.bibh-tc__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 30px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.bibh-tc__badge--complete {
    background: var(--bibh-primary-light, #e8f5f0);
    color: var(--bibh-primary, #3F8170);
}

.bibh-tc__badge--progress {
    background: var(--bibh-warning-light, #fffbeb);
    color: var(--bibh-warning, #FFA700);
}

.bibh-tc__badge--pending {
    background: var(--bibh-neutral-light, #f4f5f4);
    color: var(--bibh-text-muted, #888);
}

.bibh-tc__quiz-bar {
    height: 5px;
    background: var(--bibh-neutral-light, #f4f5f4);
    border-radius: 3px;
    overflow: hidden;
}

.bibh-tc__quiz-fill {
    height: 100%;
    background: var(--bibh-primary, #3F8170);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.bibh-tc__quiz-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bibh-text-muted, #888);
}


/* ─ Student table ─ */
.bibh-tc__student-wrap {
    border: 1px solid var(--bibh-border, #e2e5ea) !important;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    margin: 0 !important;
}

/* ── Reset Astra/theme table overrides ── */
.bibh-tc__student-table,
.bibh-tc__student-table td,
.bibh-tc__student-table th {
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.bibh-tc__student-table {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 0.88rem;
    table-layout: auto;
}

.bibh-tc__student-table thead th {
    background: #f7f9fb !important;
    color: #7e8c98;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eaecf0 !important;
    white-space: nowrap;
}

.bibh-tc__student-table thead th:not(:first-child) {
    text-align: right;
}

.bibh-tc__student-table tbody tr {
    border-bottom: 1px solid #f0f2f5 !important;
    transition: background 0.12s;
}

.bibh-tc__student-table tbody tr:last-child {
    border-bottom: none !important;
}

.bibh-tc__student-row[data-profile-url] {
    cursor: pointer;
}

.bibh-tc__student-table tbody tr:hover td {
    background: #f5f9fb !important;
}

.bibh-tc__student-row--inactive td {
    opacity: 0.75;
}

.bibh-tc__student-table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border: none !important;
}

.bibh-tc__student-table tbody td:not(:first-child) {
    text-align: right;
}

/* Student cell: avatar + name + email */
.bibh-tc__student-cell {
    display: flex;
    align-items: center;
    gap: 13px;
}

.bibh-tc__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bibh-dark, #203D48);
    color: #f0f6f8;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.bibh-tc__avatar--inactive {
    background: #b8c4c8;
    color: #fff;
}

.bibh-tc__sname {
    font-size: 1rem;
    font-weight: 800;
    color: var(--bibh-dark, #203D48);
    line-height: 1.2;
}

.bibh-tc__semail {
    font-size: 0.76rem;
    color: var(--bibh-text-muted, #888);
    font-weight: 400;
    margin-top: 1px;
}

/* Score */
.bibh-tc__score {
    font-size: 1.1rem;
    font-weight: 800;
    display: inline-block;
    letter-spacing: -0.01em;
    line-height: 1;
}

.bibh-tc__score--high { color: var(--bibh-primary, #3F8170); }
.bibh-tc__score--mid  { color: var(--bibh-warning, #FFA700); }
.bibh-tc__score--low  { color: var(--bibh-danger, #dc2626); }
.bibh-tc__score--none { color: #c5cdd3; font-weight: 700; font-size: 1rem; }

/* LO pills */
.bibh-tc__lo {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 30px;
    letter-spacing: 0.02em;
}

.bibh-tc__lo--best {
    background: var(--bibh-primary-light, #e8f5f0);
    color: var(--bibh-primary, #3F8170);
}

.bibh-tc__lo--worst {
    background: var(--bibh-danger-light, #fef2f2);
    color: var(--bibh-danger, #dc2626);
}

/* Activity */
.bibh-tc__activity {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bibh-tc__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bibh-primary, #3F8170);
    flex-shrink: 0;
}

.bibh-tc__dot--inactive {
    background: #b8c4c8;
}

.bibh-tc__activity-lbl {
    font-size: 0.8rem;
    color: var(--bibh-text-muted, #888);
    white-space: nowrap;
}

/* Row actions */
.bibh-tc__row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
}

.bibh-tc__row-actions .bibh-btn {
    font-weight: 700 !important;
    white-space: nowrap;
}

.bibh-tc__row-actions .bibh-btn--primary {
    background: var(--bibh-dark, #203D48) !important;
    border-color: var(--bibh-dark, #203D48) !important;
    color: #fff !important;
}

.bibh-tc__row-actions .bibh-btn--primary:hover {
    background: #162b34 !important;
    border-color: #162b34 !important;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 900px) {
    .bibh-tc__stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bibh-tc__quiz-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bibh-tc__hero {
        padding: 18px 18px 0;
    }
    .bibh-tc__hero-top {
        flex-direction: column;
        gap: 12px;
    }
    .bibh-tc__stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bibh-tc__quiz-grid {
        grid-template-columns: 1fr;
    }
    .bibh-tc__student-table {
        font-size: 0.8rem;
    }
    .bibh-tc__student-table thead th:nth-child(3),
    .bibh-tc__student-table thead th:nth-child(4),
    .bibh-tc__student-table tbody td:nth-child(3),
    .bibh-tc__student-table tbody td:nth-child(4) {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Classroom list card - card body row layout + copy code + View Dashboard
   ══════════════════════════════════════════════════════════════════════════ */

/* Card body: title/desc left, View Dashboard button right */
.bibh-card__body--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

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

/* View Dashboard sits top-right of card body */
.bibh-card__view-btn {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 2px;
}

/* Footer: badge left, code right */
.bibh-card--classroom .bibh-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Copy-able group code button */
.bibh-classroom-code--copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bibh-text-muted, #888);
    background: var(--bibh-neutral-light, #f4f5f4);
    border: 1px solid var(--bibh-border, #e2e5ea) !important;
    border-radius: var(--bibh-radius-sm, 6px);
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bibh-classroom-code--copy:hover {
    background: #e8f5f7;
    border-color: #91D1DB !important;
    color: var(--bibh-dark, #203D48);
}

.bibh-classroom-code--copy:hover svg {
    opacity: 0.85;
}

.bibh-classroom-code--copied {
    background: #ecfaf4 !important;
    border-color: #aed8c5 !important;
    color: var(--bibh-primary, #3F8170) !important;
    letter-spacing: 0.04em;
    font-family: inherit;
}


/* ══════════════════════════════════════════════════════════════════════════
   Classroom list card - clickable full card + student badge + students modal
   ══════════════════════════════════════════════════════════════════════════ */

/* Clickable classroom card */
.bibh-teacher-hub .bibh-card--classroom {
    cursor: pointer;
}

/* View Dashboard hover/active - !important overrides Astra theme a:hover colour */
.bibh-teacher-hub .bibh-card--classroom .bibh-card__view-btn:hover,
.bibh-teacher-hub .bibh-card--classroom .bibh-card__view-btn:focus,
.bibh-teacher-hub .bibh-card--classroom .bibh-card__view-btn:active {
    background: #346b5d00;
    border-color: var(--bibh-primary, #3F8170);
    color: #fff !important;
    box-shadow: none;
}

/* Student count badge - styled as a clickable button */
.bibh-badge--students-btn {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bibh-secondary-light, #e8f5f7);
    color: var(--bibh-text-light, #4a6272);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--bibh-font);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}

.bibh-badge--students-btn:hover {
    background: var(--bibh-secondary, #91D1DB);
    color: var(--bibh-dark, #203D48);
    border-color: var(--bibh-secondary, #91D1DB);
}

/* Students modal - section header label */
.bibh-cl-sm-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bibh-text-muted, #888);
    margin-bottom: 6px;
}

/* Students modal - scrollable body */
#bibh-cl-students-modal .bibh-modal__body {
    max-height: 62vh;
    overflow-y: auto;
    padding-top: 16px;
}

/* Students modal - enrolled student row */
.bibh-cl-enrolled-student {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bibh-neutral-light, #f0f1f0);
}

.bibh-cl-enrolled-student:last-child {
    border-bottom: none;
}

.bibh-cl-enrolled-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bibh-dark, #203D48);
    flex: 1;
    min-width: 0;
}

.bibh-cl-enrolled-email {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--bibh-muted, #6b7a7e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Add students section separator */
.bibh-cl-add-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bibh-neutral-light, #f0f1f0);
}

/* ============================================================
   Upload / Resource filter bar (bibh-spf)
   Shared by: student-folder.php, resources.php
   (Also used by teacher-student-profile.php in bibh-quiz-builder,
   which carries its own inline copy - this is the authoritative source
   for classroom-suite templates.)
   ============================================================ */
.bibh-spf { background: #fff; padding: 14px 16px 6px; }
.bibh-spf__bar { display: flex; gap: 8px; align-items: center; }
.bibh-spf__sep { width: 1px; height: 20px; background: var(--bibh-border, #DDE5E2); flex-shrink: 0; align-self: center; }
.bibh-spf__search-wrap { flex: 1; position: relative; min-width: 0; }
.bibh-spf__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bibh-text-muted, #7A8F8C); pointer-events: none; }
.bibh-spf .bibh-spf__search {
    width: 100%;
    border: 1.5px solid var(--bibh-border);
    border-radius: 30px;
    padding: 8px 14px 8px 34px;
    font-size: 0.85rem;
    font-family: var(--bibh-font);
    color: var(--bibh-text);
    background: var(--bibh-white);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    box-shadow: none;
}
.bibh-spf .bibh-spf__search:focus { border-color: var(--bibh-primary); box-shadow: none; }
.bibh-spf .bibh-spf__search::placeholder { color: var(--bibh-neutral); }
.bibh-spf__toggle { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--bibh-border, #DDE5E2); border-radius: 8px; background: #fff; font-family: inherit; font-size: .85rem; color: var(--bibh-dark, #203D48); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.bibh-spf__toggle:hover,
.bibh-spf__toggle[aria-expanded="true"] { border-color: var(--bibh-primary, #3F8170); background: rgba(63,129,112,.06); }
.bibh-spf__badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bibh-primary, #3F8170); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; }
/* Drawer */
.bibh-spf__drawer { padding: 14px 0 4px; border-top: 1px solid var(--bibh-border, #DDE5E2); margin-top: 12px; }
.bibh-spf__drawer[hidden] { display: none; }
.bibh-spf__drawer-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.bibh-spf__drawer-row--pills { align-items: center; }
.bibh-spf__field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
.bibh-spf__label { font-size: .75rem; font-weight: 600; color: var(--bibh-text-muted, #7A8F8C); text-transform: uppercase; letter-spacing: .04em; }
.bibh-spf .bibh-spf__select { padding: 7px 24px 7px 12px; border: 1.5px solid var(--bibh-border, #DDE5E2); border-radius: 30px; font-family: inherit; font-size: .82rem; color: var(--bibh-dark, #203D48); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; outline: none; transition: border-color .15s; width: auto; flex-shrink: 0; cursor: pointer; }
.bibh-spf .bibh-spf__select:focus { border-color: var(--bibh-primary, #3F8170); }
.bibh-spf .bibh-spf__select:disabled { opacity: .5; cursor: default; }
/* Pills + sort row */
.bibh-spf__pills-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
/* Type pills */
.bibh-spf__pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.bibh-spf .bibh-spf__pill { padding: 5px 13px; border: 1.5px solid var(--bibh-border, #DDE5E2); border-radius: 30px; background: #fff; font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--bibh-text-muted, #7A8F8C); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bibh-spf .bibh-spf__pill:hover { border-color: var(--bibh-primary, #3F8170); background: var(--bibh-primary, #3F8170); color: #fff; }
.bibh-spf .bibh-spf__pill--active { border-color: var(--bibh-primary, #3F8170); background: var(--bibh-primary, #3F8170); color: #fff; }
/* Clear + count */
.bibh-spf__clear { padding: 5px 12px; border: none; background: none; font-family: inherit; font-size: .82rem; color: var(--bibh-text-muted, #7A8F8C); cursor: pointer; text-decoration: underline; margin-left: auto; }
.bibh-spf__clear:hover { color: var(--bibh-dark, #203D48); }
.bibh-spf__count { font-size: .8rem; color: var(--bibh-text-muted, #7A8F8C); margin: 6px 0 0; padding: 0; }
/* Chapter / LO badges (shared with student profile) */
.bibh-badge--chapter { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: .72rem; font-weight: 600; background: rgba(63,129,112,.1); color: var(--bibh-primary, #3F8170); border: 1px solid rgba(63,129,112,.25); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.bibh-badge--lo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: .72rem; font-weight: 600; background: rgba(145,209,219,.18); color: var(--bibh-dark, #203D48); border: 1px solid rgba(145,209,219,.5); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ── Research notes (teacher view of student folder) ───────────────────── */
.bibh-research-notes { margin-top: 8px; }
.bibh-research-notes__toggle {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 8px;
    font-size: 0.8rem; font-weight: 600; color: var(--bibh-primary, #3F8170);
    cursor: pointer; font-family: var(--bibh-font, 'League Spartan', sans-serif);
}
.bibh-research-notes__toggle:hover { text-decoration: underline; }
.bibh-research-notes__toggle svg { transition: transform 0.2s; }
.bibh-research-notes__toggle.is-open svg { transform: rotate(180deg); }
.bibh-research-notes__body {
    margin-top: 8px; padding: 12px 14px;
    background: var(--bibh-neutral-light, #F4F7F6); border-radius: 12px;
    border-left: 3px solid var(--bibh-primary, #3F8170);
}
.bibh-research-notes__item + .bibh-research-notes__item { margin-top: 10px; }
.bibh-research-notes__label {
    display: block; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bibh-text-muted, #7A8F8C); margin-bottom: 3px;
}
.bibh-research-notes__item p { margin: 0; font-size: 0.88rem; color: var(--bibh-dark, #203D48); line-height: 1.5; }

/* ══════════════════════════════════════════
   Classroom card colours (brand book, per hub)
   ══════════════════════════════════════════ */
.bibh-card--colored {
    background: var(--bibh-ccbg);
    border-color: var(--bibh-ccbg);
}
.bibh-card--colored .bibh-card__title,
.bibh-card--colored .bibh-card__desc {
    color: var(--bibh-ccink);
}
.bibh-card--colored .bibh-card__desc { opacity: .85; }
.bibh-card--colored .bibh-badge--students-btn,
.bibh-card--colored .bibh-classroom-code {
    background: rgba(255,255,255,.94);
    color: #203d48;
}

/* Swatch picker (create form + classroom settings) */
.bibh-ccpick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bibh-ccpick__swatch {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(32,61,72,.18);
    transition: transform .1s, border-color .15s;
}
.bibh-ccpick__swatch:hover { transform: scale(1.12); }
.bibh-ccpick__swatch.is-selected { border-color: #203d48; }
.bibh-ccpick__swatch--none {
    background: linear-gradient(135deg, #fff 44%, #da543f 47%, #da543f 53%, #fff 56%);
}

/* Paintbrush colour swap on classroom cards */
.bibh-card--classroom { position: relative; }
.bibh-card__paint {
    position: absolute; top: 10px; left: 12px; z-index: 5;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(32,61,72,.18); background: rgba(255,255,255,.85);
    color: #203d48; cursor: pointer; padding: 0; opacity: 0;
    transition: opacity .15s, transform .1s;
}
.bibh-card--classroom:hover .bibh-card__paint,
.bibh-card__paint:focus-visible,
.bibh-card__paint[aria-expanded="true"] { opacity: 1; }
.bibh-card__paint:hover { transform: scale(1.12); }
.bibh-ccpop {
    position: absolute; top: 42px; left: 12px; z-index: 20;
    display: flex; gap: 8px; flex-wrap: wrap; max-width: 240px;
    background: #fff; border: 1px solid #e3e8eb; border-radius: 14px;
    padding: 10px 12px; box-shadow: 0 10px 30px rgba(32,61,72,.22);
}
.bibh-ccpop .bibh-ccpick__swatch { width: 28px; height: 28px; }
.bibh-ccpop[hidden] { display: none; }

/* ============================================================
   Teacher rebuild (T0) - top toggle nav + rail-less shell
   Replaces the vertical left menu. Two tabs (Resource Hub /
   Classroom) sit above every teacher view. Palette from the
   shared BIBH tokens (common.css :root / sidebar inline vars).
   ============================================================ */
.bibh-suite--norail .bibh-suite__sidebar { display: none; }
.bibh-suite--norail .bibh-suite__menu-btn,
.bibh-suite--norail .bibh-suite__scrim { display: none !important; }
.bibh-suite--norail .bibh-suite__main { width: 100%; }

.bibh-tnav {
    display: flex;
    justify-content: center;
    padding: 6px 0 16px;
    margin: 0 0 4px;
}
.bibh-tnav__toggle {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border-radius: var(--bibh-radius-pill, 30px);
    background: var(--bibh-secondary, #91D1DB);
    box-shadow: 0 4px 14px rgba(35,56,74,.10);
}
.bibh-tnav__btn {
    border-radius: var(--bibh-radius-pill, 30px);
    padding: 10px 26px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: var(--bibh-dark, #203D48);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.bibh-tnav__btn.is-active {
    background: var(--bibh-dark, #203D48);
    color: #fff;
}
.bibh-tnav__btn:hover:not(.is-active) { background: rgba(255,255,255,.4); }
.bibh-tnav__btn:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 2px; }
@media (max-width: 600px) {
    .bibh-tnav__btn { padding: 10px 18px; font-size: 14px; }
}

/* ── Launch fix L-12: teacher components reflow on a phone ────────────────
   The companion to L-11 in suite.css. Letting a grid track shrink only helps
   if what is inside it is willing to reflow; these are the four places that
   were not, each of which Ashton reported separately as something "drifting
   off the page" (live test 2026-08-19).

   Scoped to 640px, below the 700/768 breakpoints where these areas have
   already gone single-column, so desktop and tablet are untouched. */
@media (max-width: 640px) {

	/* Classroom card: the title and the "View Dashboard" button were a nowrap
	   flex row, which is what set the card's ~352px min-content. The button
	   drops under the title instead of standing beside it. */
	.bibh-card--classroom .bibh-card__body--row { flex-wrap: wrap; }
	.bibh-card--classroom .bibh-card__tools { width: 100%; justify-content: flex-start; }
	/* Same row, same reason: "0 students" and the classroom code. Letting the
	   code wrap is what stops ZQN-176 breaking across two lines mid-code. */
	.bibh-card--classroom .bibh-card__footer { flex-wrap: wrap; gap: 8px 12px; }

	/* Assignment tracker: `auto 1fr auto auto` is four fixed-ish columns plus
	   three 14px gaps, ~359px before the card's own padding - the single
	   biggest contributor to the report card blowing out. Icon and text keep
	   the top line; the count and the due pill share a second one. */
	.bibh-tdash__assign { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
	.bibh-tdash__assign > :nth-child(3),
	.bibh-tdash__assign > :nth-child(4) { grid-column: 2; }
	.bibh-tdash__due { white-space: normal; }

	/* Class heatmap: the 240px bar column is wider than the whole gutter-less
	   content box on a small phone. It already stacks at 640; this makes the
	   stacked bar fill the row rather than keep its old fixed width. */
	.bibh-tdash__heatrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.bibh-tdash__heat-bar { width: auto; }

	/* Report cards: 16px of card padding either side is a lot once the page
	   gutter is down to 14px. */
	.bibh-tdash__rcard { padding: 14px; }
}

/* Launch fix L-13: the hub toggle rendered VERTICALLY, one letter per line.
   .bibh-tnav__btn never said `nowrap`, and in the Astra header the toggle sits
   in the narrow right-hand section, so "Resource Hub" and "Classroom" were
   squeezed to a few pixels and wrapped per character - the same squeeze that
   hit the chapter picker. The labels now refuse to break, and the toggle is
   allowed to shrink its padding rather than its words. */
.bibh-tnav__btn { white-space: nowrap; }
.bibh-tnav__toggle { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 600px) {
	.bibh-tnav--header { padding-left: 8px; padding-right: 8px; }
	.bibh-tnav--header .bibh-tnav__btn { padding: 8px 12px; font-size: 12.5px; }
}

/* Launch fix L-13b: give the toggle a row of its own in the Astra header.
   L-13 stopped the labels breaking per character, which then made the toggle
   an un-shrinkable 205px block. Astra's header row is `grid-template-columns:
   auto auto` with min-width:auto, so nothing in it can compress: logo 175 +
   toggle 205 + account 58 + gap = 457px in a 375px viewport, and the HEADER
   became the last thing scrolling the page sideways.

   Shortening the labels cannot fix this - the arithmetic needs the toggle at
   about 120px, which is a ~10px font. So the row stacks instead: the logo
   takes the first line, and the toggle and account icon share the second
   (205 + 58 = 263, comfortable inside 375).

   The breakpoint is 600, not 768: logo 175 + toggle 205 + account 58 + a 20px
   gap is 458, so the row still fits side-by-side on a tablet and only needs to
   stack once the viewport drops near 460. Stacking it at 768 would have cost a
   tablet a header row for no reason.

   `:has(.bibh-tnav--header)` keeps this off every other page on the site,
   including the student hub and all of the marketing pages - it only applies
   where THIS plugin put its toggle into the theme's header. Reaching into
   Astra's own classes is deliberate and narrow, not a general theme override. */
@media (max-width: 600px) {
	.ast-builder-grid-row:has(.bibh-tnav--header) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}
	.site-header-primary-section-right:has(.bibh-tnav--header) {
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bibh-tnav--header { min-width: 0; }
}

/* ============================================================
   Teacher rebuild (T1) - Classroom landing: welcome banner,
   cross-class stat strip, cog + eBook/Activity, settings modal.
   ============================================================ */
.bibh-tland { margin: 0 0 4px; }
.bibh-tland__welcome {
    background: var(--bibh-dark, #203D48);
    color: #fff;
    border-radius: var(--bibh-radius-md, 30px);
    padding: 26px 28px;
    margin-bottom: 22px;
}
.bibh-tland__welcome-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.bibh-tland__hi { font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: #fff; }
.bibh-tland__date { color: #a9bccb; margin-top: 4px; font-size: 15px; }
.bibh-tland__date strong { color: #dbe6ee; font-weight: 600; }
.bibh-tland__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bibh-tland__cog {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: #fff;
    cursor: pointer; transition: transform .15s, background .15s;
}
.bibh-tland__cog:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); }
.bibh-tland__bookbtn {
    display: inline-flex; align-items: center;
    border-radius: var(--bibh-radius-pill, 30px);
    padding: 11px 20px; font-weight: 700; font-size: 14.5px;
    background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: #fff;
    text-decoration: none; transition: transform .15s, background .15s;
}
.bibh-tland__bookbtn:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); color: #fff; }

.bibh-tland__strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px;
}
.bibh-tland__tile {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 16px 18px;
}
.bibh-tland__n { font-size: 30px; font-weight: 700; line-height: 1; }
.bibh-tland__l {
    color: #a9bccb; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
    margin-top: 8px; font-weight: 600;
}
.bibh-tland__sub { display: block; text-transform: none; letter-spacing: 0; color: #cbd7df; font-weight: 500; margin-top: 3px; font-size: 11.5px; }
@media (max-width: 820px) {
    .bibh-tland__strip { grid-template-columns: 1fr 1fr; }
    .bibh-tland__actions { width: 100%; }
}

/* ============================================================
   Teacher rebuild (T2) - per-classroom dashboard: navy header,
   action buttons, KPIs, Morning Report, toast.
   ============================================================ */
.bibh-tdash__back {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--bibh-muted, #6c7a84); font-weight: 600; font-size: 14px;
    text-decoration: none; margin: 2px 0 14px;
}
.bibh-tdash__back:hover { color: var(--bibh-dark, #203D48); }

.bibh-tdash__header {
    background: var(--bibh-dark, #203D48); color: #fff;
    border-radius: var(--bibh-radius-md, 30px); padding: 26px 28px;
}
.bibh-tdash__header-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bibh-tdash__name { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: #fff; }
.bibh-tdash__date { color: #a9bccb; margin-top: 6px; font-size: 15px; }
.bibh-tdash__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bibh-tdash__cog {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: #fff;
    cursor: pointer; transition: transform .15s, background .15s; flex: 0 0 auto;
}
.bibh-tdash__cog:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); }
/* The theme collapses unclassed inline-SVG widths to ~1px in flex; pin the cog icons. */
.bibh-tland__cog svg,
.bibh-tdash__cog svg { width: 19px; height: 19px; display: block; flex: 0 0 auto; }
.bibh-tdash__btn-sky   { background: #7fd0d8; color: var(--bibh-dark, #203D48); border-color: #7fd0d8; }
.bibh-tdash__btn-sky:hover { background: #6cc4cd; color: var(--bibh-dark, #203D48); }

.bibh-tdash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.bibh-tdash__kpi {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px; padding: 16px 18px; min-height: 78px; text-align: left;
}
.bibh-tdash__kpi-n { font-size: 30px; font-weight: 700; line-height: 1; color: #fff; }
.bibh-tdash__kpi-l { color: #a9bccb; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; margin-top: 8px; font-weight: 600; }
.bibh-tdash__kpi--code { cursor: pointer; font-family: inherit; }
.bibh-tdash__kpi--code .bibh-tdash__kpi-n { color: #7fd0d8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; letter-spacing: .06em; }
.bibh-tdash__kpi--code:hover { background: rgba(255,255,255,.09); }

.bibh-tdash__morning {
    background: var(--bibh-secondary-light, #d9f0f3); background: var(--bibh-secondary, #91D1DB);
    border-radius: var(--bibh-radius-md, 30px); padding: 18px 22px; margin: 18px 0;
}
.bibh-tdash__morning-h { font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--bibh-dark, #203D48); }
.bibh-tdash__morning-h span { font-weight: 500; text-transform: none; letter-spacing: 0; color: #35525f; margin-left: 8px; font-size: 14px; }
.bibh-tdash__morning-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.bibh-tdash__mc { background: #fff; border-radius: var(--bibh-radius-pill, 30px); padding: 9px 16px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 14px rgba(35,56,74,.06); color: var(--bibh-dark, #203D48); }
.bibh-tdash__mc b { font-weight: 700; }
.bibh-tdash__mc.is-good { color: var(--bibh-primary-dark, #346b5d); }
.bibh-tdash__mc.is-bad  { color: var(--bibh-danger, #d5533c); }
.bibh-tdash__mc--muted { color: #35525f; font-weight: 500; }

/* Add Students modal code chip + checklist reuse existing classes; toast is local. */
.bibh-tdash-toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(120px);
    background: var(--bibh-dark, #203D48); color: #fff; padding: 14px 22px; border-radius: 14px;
    font-weight: 600; font-size: 14.5px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
    /* Above every overlay: most toasts are raised BY an open modal, so anything
       lower means the message lands behind the thing it is talking about. */
    z-index: var(--bibh-z-toast, 100100);
    transition: transform .3s; max-width: 90%; pointer-events: none;
}
.bibh-tdash-toast.is-show { transform: translateX(-50%) translateY(0); }
.bibh-tdash-toast small { display: block; font-weight: 400; color: #a9bccb; margin-top: 3px; font-size: 12.5px; }

@media (max-width: 820px) {
    .bibh-tdash__kpis { grid-template-columns: 1fr 1fr; }
    .bibh-tdash__actions { width: 100%; }
}

/* ---- T3: student list ---- */
.bibh-tdash__block { margin-top: 20px; }
.bibh-tdash__block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bibh-tdash__block-head h3 { font-size: 20px; font-weight: 700; margin: 0; color: var(--bibh-dark, #203D48); }
.bibh-tdash__count { color: var(--bibh-muted, #6c7a84); font-size: 15px; font-weight: 500; }
.bibh-tdash__ifflag {
    display: inline-flex; align-items: center; gap: 5px; background: #fbeecf; color: #a76b12;
    border-radius: var(--bibh-radius-pill, 30px); padding: 3px 12px; font-size: 11px; font-weight: 600;
}
.bibh-tdash__tablewrap { overflow-x: auto; }
.bibh-tdash__stutable { width: 100%; border-collapse: collapse; }
.bibh-tdash__stutable thead th {
    text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--bibh-muted, #6c7a84); font-weight: 600; padding: 0 12px 12px; white-space: nowrap;
}
.bibh-tdash__stutable .bibh-tdash__actions-col { text-align: right; }
.bibh-tdash__stutable tbody tr { border-top: 1px solid var(--bibh-border, #e7e9e6); }
.bibh-tdash__stutable td { padding: 13px 12px; vertical-align: middle; }
.bibh-tdash__stu { display: flex; align-items: center; gap: 12px; }
.bibh-tdash__avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--bibh-dark, #203D48); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; font-size: 14px;
}
.bibh-tdash__stu-name { font-weight: 600; color: var(--bibh-dark, #203D48); }
.bibh-tdash__stu-email { color: var(--bibh-muted, #6c7a84); font-size: 12.5px; }
.bibh-tdash__score { font-weight: 700; font-size: 17px; }
.bibh-tdash__score--none { color: var(--bibh-muted, #6c7a84); font-weight: 600; }
.bibh-tdash__lo {
    display: inline-block; border-radius: var(--bibh-radius-pill, 30px); padding: 5px 13px; font-weight: 700; font-size: 13px;
}
.bibh-tdash__lo--good { background: #e4f2ea; color: #346b5d; }
.bibh-tdash__lo--bad  { background: #fbe7e2; color: #d5533c; }
.bibh-tdash__lo-none  { color: var(--bibh-muted, #6c7a84); }
.bibh-tdash__xp { font-weight: 700; color: var(--bibh-primary-dark, #346b5d); font-size: 16px; }
.bibh-tdash__xp-life { font-size: 11.5px; color: var(--bibh-muted, #6c7a84); font-weight: 600; margin-top: 2px; }
.bibh-tdash__lb-life { font-size: 11.5px; color: var(--bibh-muted, #6c7a84); font-weight: 500; }
.bibh-tdash__rowacts { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.bibh-mini {
    display: inline-flex; align-items: center; border-radius: var(--bibh-radius-pill, 30px);
    padding: 7px 14px; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
}
.bibh-mini--navy { background: var(--bibh-dark, #203D48); color: #fff; }
.bibh-mini--navy:hover { color: #fff; opacity: .92; }
.bibh-mini--line { background: #fff; border-color: var(--bibh-border, #e7e9e6); color: var(--bibh-dark, #203D48); }
.bibh-mini--line:hover { border-color: #cfd6d2; color: var(--bibh-dark, #203D48); }
.bibh-mini--red { background: #fff; border-color: #f2c9c0; color: var(--bibh-danger, #d5533c); }
.bibh-mini--red:hover { background: #fbe7e2; }

/* Fixed RAG band text colours - shared with the student dot; legible as text. */
.band-needs    { color: var(--bibh-danger, #d5533c); }
.band-building { color: #cf8a1e; }
.band-strong   { color: #3f8170; }
.band-mastered { color: #b8930f; }

/* ---- T4: Investigative-Folder blocks (admin-gated) ---- */
.bibh-tdash__ifgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.bibh-tdash__ifcard { border-radius: 16px; box-shadow: var(--bibh-shadow-sm, 0 4px 14px rgba(35,56,74,.06)); overflow: hidden; background: #fff; }
.bibh-tdash__ifhead {
    background: var(--bibh-primary, #3F8170); color: #fff; padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center; font-weight: 700;
}
.bibh-tdash__ifhead--navy { background: var(--bibh-dark, #203D48); }
.bibh-tdash__ifcount { background: rgba(255,255,255,.22); border-radius: var(--bibh-radius-pill, 30px); padding: 2px 12px; font-size: 13px; }
.bibh-tdash__ifbody { padding: 18px 20px; color: var(--bibh-muted, #6c7a84); }
.bibh-tdash__iflist { margin: 0; padding-left: 18px; color: var(--bibh-dark, #203D48); font-size: 14px; }
.bibh-tdash__iflist li { margin: 4px 0; }
@media (max-width: 820px) { .bibh-tdash__ifgrid { grid-template-columns: 1fr; } }

/* ---- T5: My Chapters (class-scoped pins) ---- */
.bibh-tdash__pin-empty {
    background: #fff; border: 1.5px dashed var(--bibh-border, #e7e9e6); border-radius: 16px;
    padding: 24px; text-align: center; color: var(--bibh-muted, #6c7a84); font-weight: 500;
}
.bibh-tdash__pins { display: flex; gap: 12px; flex-wrap: wrap; }
.bibh-tdash__pin {
    background: #fff; border: 1.5px solid var(--bibh-border, #e7e9e6); border-radius: 16px;
    box-shadow: var(--bibh-shadow-sm, 0 4px 14px rgba(35,56,74,.06)); padding: 16px 18px; min-width: 220px;
}
.bibh-tdash__pin h4 { font-size: 16px; font-weight: 700; margin: 0; color: var(--bibh-dark, #203D48); }
.bibh-tdash__pin-meta { color: var(--bibh-muted, #6c7a84); font-size: 12.5px; margin-top: 3px; }
.bibh-tdash__pin-acts { display: flex; gap: 8px; margin-top: 12px; }
.bibh-tdash__chlist { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.bibh-tdash__chrow { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.bibh-tdash__chrow:hover { background: var(--bibh-primary-light, #e8f5f0); }
.bibh-tdash__chrow input { width: 17px; height: 17px; flex: 0 0 auto; }
.bibh-tdash__chrow span { font-size: 14.5px; color: var(--bibh-dark, #203D48); }

/* ---- T6: reporting row (heatmap / attention / tracker / leaderboard) ---- */
.bibh-tdash__report { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 20px; }
.bibh-tdash__rcard { align-self: start; }
@media (max-width: 900px) { .bibh-tdash__report { grid-template-columns: 1fr; } }

/* Band fills + legend swatches (shared) */
.hbar--needs    { background: #d5533c; }
.hbar--building { background: #e9a13a; }
.hbar--strong   { background: #4e9b7e; }
.hbar--mastered { background: #f2d24e; color: #6b5710 !important; }
.hbar-line--needs    { border-color: #d5533c; color: #d5533c; }
.hbar-line--building { border-color: #e9a13a; color: #b3781f; }
.hbar-line--strong   { border-color: #4e9b7e; color: #3f7657; }
.hbar-line--mastered { border-color: #d9be4a; color: #97800f; }

/* Heatmap */
.bibh-tdash__heatrow { display: grid; grid-template-columns: 1fr 240px auto; gap: 14px; align-items: center; padding: 9px 0; }
.bibh-tdash__heat-tp { font-weight: 600; font-size: 14.5px; color: var(--bibh-dark, #203D48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibh-tdash__hbar { height: 26px; border-radius: 8px; background: #efece4; overflow: hidden; position: relative; }
.bibh-tdash__hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; color: #fff; font-weight: 700; font-size: 12.5px; min-width: 30px; }
.bibh-tdash__reassign { border-radius: var(--bibh-radius-pill, 30px); padding: 7px 15px; font-weight: 600; font-size: 12.5px; border: 1.5px solid; background: #fff; cursor: pointer; }
.bibh-tdash__heat-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--bibh-muted, #6c7a84); font-weight: 500; }
.bibh-tdash__heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 640px) { .bibh-tdash__heatrow { grid-template-columns: 1fr; } }

/* Needs attention */
.bibh-tdash__na { border-radius: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bibh-tdash__na--red { background: #fbe7e2; }
.bibh-tdash__na--amber { background: #fbeecf; }
.bibh-tdash__na--grey { background: #eef0ee; }
.bibh-tdash__na-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex: 0 0 auto; }
.bibh-tdash__na--red .bibh-tdash__na-av { background: #d5533c; }
.bibh-tdash__na--amber .bibh-tdash__na-av { background: #e9a13a; }
.bibh-tdash__na-av--more { background: #9aa4a0; }
.bibh-tdash__na-who { font-weight: 700; font-size: 14.5px; color: var(--bibh-dark, #203D48); }
.bibh-tdash__na-why { font-size: 12.5px; color: var(--bibh-muted, #6c7a84); font-weight: 500; }
.bibh-tdash__na-nudge { margin-left: auto; font-weight: 700; font-size: 13px; text-decoration: none; }
.bibh-tdash__na--red .bibh-tdash__na-nudge { color: #d5533c; }
.bibh-tdash__na--amber .bibh-tdash__na-nudge { color: #b3781f; }

/* Assignment tracker */
.bibh-tdash__assign { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bibh-border, #e7e9e6); }
.bibh-tdash__assign:first-of-type { border-top: none; }
.bibh-tdash__assign-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bibh-secondary, #91D1DB); color: var(--bibh-dark, #203D48); }
.bibh-tdash__assign-t { font-weight: 600; font-size: 14.5px; color: var(--bibh-dark, #203D48); }
.bibh-tdash__assign-s { color: var(--bibh-muted, #6c7a84); font-size: 12.5px; }
.bibh-tdash__prog { width: 150px; }
.bibh-tdash__prog-track { height: 9px; border-radius: 6px; background: #eceae3; overflow: hidden; }
.bibh-tdash__prog-track i { display: block; height: 100%; background: var(--bibh-primary, #3F8170); border-radius: 6px; }
.bibh-tdash__prog-lab { font-size: 11.5px; color: var(--bibh-muted, #6c7a84); margin-top: 5px; font-weight: 600; }
.bibh-tdash__due { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bibh-tdash__due--overdue { color: #d5533c; }
.bibh-tdash__due--soon { color: #e9a13a; }
.bibh-tdash__due--none { color: var(--bibh-muted, #6c7a84); }
.bibh-tdash__rt { margin-left: auto; color: var(--bibh-primary-dark, #346b5d); font-weight: 600; font-size: 14px; background: none; border: none; cursor: pointer; }

/* XP leaderboard */
.bibh-tdash__lb { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--bibh-border, #e7e9e6); }
.bibh-tdash__lb:first-of-type { border-top: none; }
.bibh-tdash__lb-rank { font-weight: 700; color: var(--bibh-muted, #6c7a84); text-align: center; }
.bibh-tdash__lb-rank.is-top { color: #e9a13a; }
.bibh-tdash__lb-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--bibh-dark, #203D48); }
.bibh-tdash__lb-av { width: 32px; height: 32px; border-radius: 50%; background: var(--bibh-dark, #203D48); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: 0 0 auto; }
.bibh-tdash__lb-streak { font-size: 11.5px; color: var(--bibh-muted, #6c7a84); font-weight: 600; margin-left: 4px; }
.bibh-tdash__lb-xp { font-weight: 700; color: var(--bibh-primary-dark, #346b5d); }

/* ---- T7: Assign modal ---- */
.bibh-modal__content--wide { max-width: 720px; }
.bibh-tdash__typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.bibh-tdash__typecard { border: 2px solid var(--bibh-border, #e7e9e6); border-radius: 16px; padding: 16px 10px; text-align: center; font-weight: 600; transition: border-color .15s, transform .15s, background .15s; background: #fff; color: var(--bibh-dark, #203D48); cursor: pointer; }
.bibh-tdash__typecard:hover { border-color: var(--bibh-primary, #3F8170); transform: translateY(-2px); }
.bibh-tdash__typecard.is-sel { border-color: var(--bibh-primary, #3F8170); background: var(--bibh-primary-light, #e8f5f0); }
.bibh-tdash__typeic { font-size: 24px; display: block; margin-bottom: 6px; }
.bibh-tdash__typecard small { display: block; color: var(--bibh-muted, #6c7a84); font-weight: 500; font-size: 11px; margin-top: 3px; }
.bibh-tdash__lolist { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.bibh-tdash__lo-opt { border: 1.5px solid var(--bibh-border, #e7e9e6); border-radius: var(--bibh-radius-pill, 30px); padding: 8px 14px; font-weight: 600; font-size: 13px; color: var(--bibh-muted, #6c7a84); background: #fff; cursor: pointer; }
.bibh-tdash__lo-opt.is-on { border-color: var(--bibh-primary, #3F8170); background: var(--bibh-primary-light, #e8f5f0); color: var(--bibh-primary-dark, #346b5d); }
.bibh-tdash__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.bibh-tdash__assignfoot { margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bibh-tdash__routenote { font-size: 12.5px; color: #35525f; background: var(--bibh-secondary, #91D1DB); border-radius: 12px; padding: 10px 14px; flex: 1; min-width: 200px; }
@media (max-width: 560px) { .bibh-tdash__typegrid { grid-template-columns: 1fr 1fr; } .bibh-tdash__two { grid-template-columns: 1fr; } }

/* ---- T8: Classroom settings modal ---- */
.bibh-tdash__cset-coderow { display: flex; gap: 10px; align-items: center; }
.bibh-tdash__cset-coderow .bibh-input { flex: 1; }
.bibh-tdash__swatches { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bibh-tdash__swatch { width: 38px; height: 38px; border-radius: 11px; cursor: pointer; border: 3px solid transparent; padding: 0; }
.bibh-tdash__swatch.is-sel { border-color: var(--bibh-dark, #203D48); }
.bibh-tdash__swatch--none { background: #fff; border: 1.5px solid var(--bibh-border, #e7e9e6); position: relative; }
.bibh-tdash__swatch--none.is-sel { border: 3px solid var(--bibh-dark, #203D48); }
.bibh-tdash__csetfoot { margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bibh-tdash__csetsoon { margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--bibh-muted, #6c7a84); }
.bibh-tdash__soonpill { background: #eef0ee; color: #7a858c; border-radius: var(--bibh-radius-pill, 30px); padding: 3px 12px; font-weight: 600; }

/* Account-settings modal (cog target) - sections + inline notes. */
.bibh-tset .bibh-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bibh-tset__section { margin: 4px 0; }
.bibh-tset__h { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--bibh-dark, #203D48); }
.bibh-tset__label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 6px; color: var(--bibh-dark, #203D48); }
.bibh-tset__row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.bibh-tset__hr { border: none; border-top: 1px solid var(--bibh-border, #e7e9e6); margin: 18px 0; }
.bibh-tset__note { font-size: 13px; font-weight: 600; }
.bibh-tset__note.is-ok  { color: var(--bibh-primary-dark, #346b5d); }
.bibh-tset__note.is-err { color: var(--bibh-danger, #d5533c); }

/* ============================================================
   TEACHER LANDING RESTYLE (launch)
   The teacher area joins the student hub's design system: 30px
   radius everywhere, --bibh-shadow-strong on cards, pill buttons,
   brand tokens instead of the inline hex the old markup carried.
   ============================================================ */

/* ── Toggle, injected into the Astra header ─────────────────────
   It is EMITTED in the right column (the only one Astra renders, since the
   configured centre column holds no elements) and CENTRED here against the header
   bar, so the bar reads logo left, toggle centred, account right. */
.ast-primary-header-bar { position: relative; }
.bibh-tnav--header {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 0; margin: 0; z-index: 1;
}
.bibh-tnav--header .bibh-tnav__toggle { box-shadow: none; }
.bibh-tnav--header .bibh-tnav__btn {
    padding: 9px 22px;
    font-weight: 700;
    font-size: 14.5px;
}
/* Narrow headers have no room to centre over: back into normal flow, under the
   logo row, rather than sitting on top of it. */
@media (max-width: 921px) {
    .bibh-tnav--header {
        position: static; transform: none;
        display: flex; justify-content: center;
        width: 100%; padding: 8px 0 0;
    }
    .bibh-tnav--header .bibh-tnav__btn { padding: 8px 14px; font-size: 13px; }
}

/* ── Welcome band ───────────────────────────────────────────── */
.bibh-tland__welcome {
    border-radius: var(--bibh-radius-pill, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32, 61, 72, .16));
}
/* Slimmer now that the stat strip is gone: the band is a greeting and a toolbar,
   not a container for tiles. */
.bibh-tland__welcome-top { align-items: center; }
.bibh-tland__actions { flex-wrap: wrap; }

/* Tool pills: text only, outlined on the navy band. */
.bibh-tland__bookbtn,
.bibh-tland__bookbtn:hover,
.bibh-tland__bookbtn:focus,
.bibh-tland__bookbtn:active {
    border-radius: var(--bibh-radius-pill, 30px);
    font-weight: 700;
}

/* ── Seats summary (was inline hex) ─────────────────────────── */
.bibh-seats-summary {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: -4px 0 20px; font-size: 14px;
}
.bibh-seats-summary__txt { color: var(--bibh-text-muted, #888888); }
.bibh-seats-summary__txt strong { color: var(--bibh-dark, #203D48); }
.bibh-seats-summary__full {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bibh-danger-light, #fef2f2); color: var(--bibh-danger, #dc2626);
    font-weight: 700; border-radius: var(--bibh-radius-pill, 30px); padding: 5px 14px;
}

/* ── Classroom cards ────────────────────────────────────────── */
.bibh-card--classroom {
    border-radius: var(--bibh-radius-pill, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32, 61, 72, .16));
}
.bibh-card__tools {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
}
.bibh-card--classroom .bibh-card__body--row { align-items: flex-start; gap: 14px; }
.bibh-card--classroom .bibh-card__body-text { min-width: 0; }
/* The cog reads on ANY card colour, including the default white card, by using
   the card's own ink (--bibh-ccink, set per card from card_colors()) and falling
   back to navy when the teacher chose no colour. */
/* The global button rules add horizontal padding and a drop shadow, which made this
   render 43x34 (an oval with a second ring around the glyph). Pin every one of them. */
.bibh-card__cog,
.bibh-card__cog:hover,
.bibh-card__cog:focus,
.bibh-card__cog:active {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; min-width: 0; padding: 0; flex: none;
    border-radius: 50%; border: 1.5px solid currentColor;
    background: transparent; box-shadow: none; cursor: pointer;
    color: var(--bibh-ccink, var(--bibh-dark, #203D48));
    opacity: .72; transition: opacity .15s, background .15s;
}
.bibh-card__cog svg { width: 17px; height: 17px; flex: none; display: block; }
.bibh-card__cog:hover { opacity: 1; background: rgba(255, 255, 255, .28); }
.bibh-card__cog:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Dashed "New Classroom" card - the only create control ──── */
.bibh-card--newclass,
.bibh-card--newclass:hover,
.bibh-card--newclass:focus,
.bibh-card--newclass:active {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; min-height: 150px; width: 100%;
    background: transparent; cursor: pointer;
    border: 2px dashed var(--bibh-secondary, #91D1DB);
    border-radius: var(--bibh-radius-pill, 30px);
    box-shadow: none;
    font-family: var(--bibh-font, inherit);
    color: var(--bibh-dark, #203D48);
    transition: border-color .15s, background .15s, transform .12s;
}
.bibh-card--newclass:hover {
    border-color: var(--bibh-primary, #3F8170);
    background: rgba(145, 209, 219, .12);
    transform: translateY(-2px);
}
.bibh-card--newclass:focus-visible { outline: 2px solid var(--bibh-primary, #3F8170); outline-offset: 3px; }
.bibh-card--newclass__plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--bibh-primary, #3F8170); color: #fff;
}
.bibh-card--newclass__lbl { font-size: 16px; font-weight: 800; }

/* ── Classroom settings modal ─────────────────────────────────
   Uses the shared .bibh-home-settings-box component, so only the bits that
   component has no opinion about live here: the danger control and the code
   field. Every hover/focus/active is pinned because the theme repaints buttons
   green on hover, which turned the delete control's border teal. */
.bibh-cset__code { font-family: ui-monospace, monospace; letter-spacing: .06em; }

.bibh-home-set-danger,
.bibh-home-set-danger:hover,
.bibh-home-set-danger:focus,
.bibh-home-set-danger:active {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--bibh-danger, #dc2626);
    border: 1.5px solid var(--bibh-danger, #dc2626);
    border-radius: var(--bibh-radius-pill, 30px);
    padding: 12px 24px; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; box-shadow: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.bibh-home-set-danger:hover:not([disabled]) {
    background: var(--bibh-danger, #dc2626); color: #fff;
    border-color: var(--bibh-danger, #dc2626);
}
.bibh-home-set-danger:focus-visible { outline: 2px solid var(--bibh-danger, #dc2626); outline-offset: 3px; }
.bibh-home-set-danger[disabled] { opacity: .4; cursor: default; }

/* Cancel sits beside Delete for good and must not read as the primary action. */
.bibh-home-set-save.is-ghost,
.bibh-home-set-save.is-ghost:hover,
.bibh-home-set-save.is-ghost:focus,
.bibh-home-set-save.is-ghost:active {
    background: #fff; color: var(--bibh-dark, #203D48);
    border: 1.5px solid var(--bibh-border, #e2e5ea);
}
.bibh-home-set-save.is-ghost:hover { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); }

/* The hidden ATTRIBUTE is display:none from the UA sheet, which any author
   display wins against - and .bibh-home-set-form sets display:flex. Without this
   the confirm pane was permanently open. */
.bibh-cset__danger[hidden] { display: none; }
.bibh-cset__danger { margin-top: 10px; }
.bibh-cset__danger-acts { display: flex; gap: 10px; }

/* ── Reports coming soon (per-class) ────────────────────────── */
.bibh-tsoon { max-width: 760px; margin: 0 auto; }
.bibh-tsoon__head { display: flex; align-items: center; gap: 14px; margin: 4px 0 20px; }
.bibh-tsoon__dot {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    background: var(--bibh-primary, #3F8170);
    box-shadow: 0 2px 8px rgba(32, 61, 72, .18);
}
.bibh-tsoon__name { margin: 0; font-size: 26px; font-weight: 900; color: var(--bibh-dark, #203D48); line-height: 1.1; }
.bibh-tsoon__code {
    margin-top: 4px; font-family: ui-monospace, monospace; letter-spacing: .08em;
    font-size: 13px; font-weight: 700; color: var(--bibh-text-muted, #888888);
}
.bibh-tsoon__panel {
    background: #fff; border-radius: var(--bibh-radius-pill, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32, 61, 72, .16));
    padding: 40px 36px; text-align: center;
}
.bibh-tsoon__title { margin: 0 0 10px; font-size: 24px; font-weight: 900; color: var(--bibh-dark, #203D48); }
.bibh-tsoon__body {
    margin: 0 auto 24px; max-width: 460px; font-size: 15px; font-weight: 600;
    line-height: 1.55; color: var(--bibh-text-muted, #888888);
}
.bibh-tsoon__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bibh-tsoon__chip {
    background: var(--bibh-secondary-light, #e8f7fa); color: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-pill, 30px); padding: 9px 18px;
    font-size: 13px; font-weight: 800;
}
@media (max-width: 600px) {
    .bibh-tsoon__panel { padding: 30px 22px; }
    .bibh-tsoon__name { font-size: 22px; }
}

/* ── Students modal: roster rows ─────────────────────────────
   Lives in the shared .bibh-home-settings-box component, so only the row
   layout is defined here. */
.bibh-cl-person {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-top: 1px solid var(--bibh-border, #e2e5ea);
}
.bibh-cl-person:first-child { border-top: none; }
.bibh-cl-person__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bibh-cl-person__name { font-size: 15px; font-weight: 800; color: var(--bibh-dark, #203D48); }
.bibh-cl-person__mail { font-size: 13px; font-weight: 500; color: var(--bibh-text-muted, #888888); word-break: break-all; }
.bibh-cl-person__acts { display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* Row-scale versions of the shared pill buttons. */
.bibh-cl-mini,
.bibh-cl-mini:hover,
.bibh-cl-mini:focus,
.bibh-cl-mini:active { padding: 8px 16px; font-size: 13px; }

.bibh-student-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.bibh-student-check.is-taken { opacity: .55; }
.bibh-student-check input { width: 17px; height: 17px; flex: none; accent-color: var(--bibh-primary, #3F8170); }
.bibh-student-check label { font-size: 14px; font-weight: 700; color: var(--bibh-dark, #203D48); }
.bibh-student-check .bibh-home-set-sub { display: inline; margin: 0; font-size: 12.5px; }

/* The component hides the first section's top rule with :first-of-type, but a
   HIDDEN section still matches it - so with nobody pending, "Waiting to join"
   claimed the exemption and Enrolled drew a stray line under the header. Give the
   section that follows a hidden one the same treatment. */
.bibh-home-set-sec[hidden] + .bibh-home-set-sec { border-top: none; padding-top: 2px; }

/* Pending count on the card's student pill. */
.bibh-badge__pending { color: var(--bibh-warning, #FFA700); font-weight: 800; }

/* ── Classrooms area sizing pass ─────────────────────────────
   The base rules live in common.css, which the student side shares, so these
   overrides are scoped to the classrooms list rather than editing the shared
   values. teacher.css loads after common.css, so no !important is needed. */
.bibh-section:has(.bibh-grid--classrooms) .bibh-title { font-size: 30px; }

/* ── Blitz launch ────────────────────────────────────────────
   The game's own wordmark rather than another green button: Blitz is the one
   thing on this screen that is play, not administration, and it should not read
   as a sibling of "Request more student seats".

   Chunky console treatment, the same language the quiz player uses - a hard
   bottom edge that collapses as the control presses down - in the suite's accent
   rather than the mockup's yellow. Radius stays 30px per the house rule; the
   mockup's boxier corner is kept for the wordmark INSIDE the game, which is a
   logo and not a button.

   Astra repaints button/link states, so background and colour are pinned across
   hover, focus and active. */
.bibh-blitz-launch,
.bibh-blitz-launch:hover,
.bibh-blitz-launch:focus,
.bibh-blitz-launch:active,
.bibh-blitz-launch:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffde5c;
    color: var(--bibh-dark, #203D48);
    border: none;
    /* The wordmark's corner, not the button rule's: this is the Blitz logo
       acting as a control, and it matches the one inside the game. */
    border-radius: 16px;
    transform: rotate(-2deg);
    padding: 12px 26px;
    font-family: inherit;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    transform: translateY(0);
    box-shadow: 0 5px 0 #d9b53a, 0 10px 18px rgba(32, 61, 72, .22);
    transition: transform .11s cubic-bezier(.215,.61,.355,1), box-shadow .11s cubic-bezier(.215,.61,.355,1), filter .18s;
}
/* Yellow DARKENS on hover. Brightening #ffde5c washes it out and, on the armed
   state, made hover and armed look like the same thing. */
.bibh-blitz-launch:hover { background: #ebcc55; }
.bibh-blitz-launch:active {
    transform: rotate(-2deg) translateY(5px);
    box-shadow: 0 0 0 #d9b53a, 0 2px 8px rgba(32, 61, 72, .2);
}
.bibh-blitz-launch:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
/* The Blitz mark: the lightning bolt emoji, drawn by the platform. Sized in em
   so it tracks the label beside it, and given an img rule for the <img> tag
   WordPress's emoji filter swaps the character for. */
.bibh-blitz-launch__bolt {
	display: inline-block; flex: 0 0 auto;
	font-size: .9em; line-height: 1;
}
.bibh-blitz-launch__bolt img { width: 1em; height: 1em; display: block; margin: 0; }

@media (max-width: 700px) {
    .bibh-blitz-launch,
    .bibh-blitz-launch:hover,
    .bibh-blitz-launch:focus,
    .bibh-blitz-launch:active { font-size: 17px; padding: 10px 20px; }
}

/* Three across, so each card has room to breathe. The narrow-screen steps are
   restated here because common.css's own media queries come earlier in the
   cascade and would otherwise be overridden by the rule above them. */
.bibh-grid--classrooms { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .bibh-grid--classrooms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .bibh-grid--classrooms { grid-template-columns: 1fr; } }

.bibh-seats-summary,
.bibh-seats-summary__txt,
.bibh-seats-summary__full { font-size: 15px; }

.bibh-card--classroom .bibh-card__title { font-size: 25px; font-weight: 800; line-height: 1.15; }

.bibh-btn--sm { font-size: 15px; padding: 6px 18px; }

/* The divider takes a light tint of the card's own colour instead of a flat
   neutral. Uncoloured cards keep the neutral, which is what --bibh-ccbg being
   unset falls back to. */
.bibh-card--classroom .bibh-card__footer { border-top-color: var(--bibh-neutral-light); }
.bibh-card--colored .bibh-card__footer {
    border-top-color: color-mix(in srgb, var(--bibh-ccbg) 40%, #fff);
}

/* The class code reads as a pill, matching the student-count pill beside it.
   These are the student pill's own resolved values (6px 12px / 30px / 11px /
   600 / uppercase), not the base rule in common.css, which a later rule
   overrides. Monospace and the wider tracking stay: it is a code to read out. */
.bibh-classroom-code,
.bibh-classroom-code--copy {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 30px; border: 1px solid transparent;
    background: var(--bibh-secondary-light, #d4eef3);
    color: var(--bibh-text-light, #4a6272);
    font-size: 11px; font-weight: 600; line-height: 1.4;
    text-transform: uppercase; letter-spacing: .12em;
}
.bibh-card--colored .bibh-classroom-code,
.bibh-card--colored .bibh-classroom-code--copy {
    background: rgba(255, 255, 255, .94); color: var(--bibh-dark, #203D48);
}

/* Date, moved off the welcome band to sit opposite the My Classrooms heading. */
.bibh-classlist__date {
    font-size: 20px; font-weight: 800; color: var(--bibh-dark, #203D48);
    align-self: center; margin-left: auto;
}

/* Back to Overview reads as a control, not stray grey text. */
.bibh-tdash__back,
.bibh-tdash__back:hover,
.bibh-tdash__back:focus,
.bibh-tdash__back:active {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--bibh-dark, #203D48);
    border: 1.5px solid var(--bibh-border, #e2e5ea);
    border-radius: var(--bibh-radius-pill, 30px);
    box-shadow: var(--bibh-shadow-sm, 0 2px 12px rgba(32,61,72,.1));
    padding: 11px 22px; font-size: 15px; font-weight: 800;
    text-decoration: none; margin: 2px 0 20px;
}
.bibh-tdash__back:hover { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); }
.bibh-tdash__back:focus-visible { outline: 2px solid var(--bibh-primary, #3F8170); outline-offset: 3px; }

/* ── Roster row controls: Move + X, with the confirm in the row ── */
.bibh-cl-x,
.bibh-cl-x:hover,
.bibh-cl-x:focus,
.bibh-cl-x:active {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; min-width: 0; padding: 0; flex: none;
    border-radius: 50%; border: 1.5px solid var(--bibh-danger, #dc2626);
    background: #fff; color: var(--bibh-danger, #dc2626);
    font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
    box-shadow: none; transition: background .15s, color .15s;
}
.bibh-cl-x:hover { background: var(--bibh-danger, #dc2626); color: #fff; }
.bibh-cl-x:focus-visible { outline: 2px solid var(--bibh-danger, #dc2626); outline-offset: 2px; }

.bibh-cl-confirm, .bibh-cl-move { display: inline-flex; align-items: center; gap: 8px; }
.bibh-cl-confirm__q { font-size: 13px; font-weight: 800; color: var(--bibh-dark, #203D48); white-space: nowrap; }
.bibh-cl-move__sel {
    border: 1.5px solid var(--bibh-border, #e2e5ea); border-radius: var(--bibh-radius-pill, 30px);
    padding: 7px 14px; font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--bibh-dark, #203D48); background: #fff; max-width: 180px;
}
.bibh-cl-working { font-size: 13px; font-weight: 700; color: var(--bibh-text-muted, #888888); }

/* ── Blitz arming ────────────────────────────────────────────
   Pressing Blitz does not leave this page: it arms the classroom cards that are
   already here, and a card click carries its class into the game. Reusing the
   real cards means there is no second copy of them to keep in sync, and the
   teacher picks the class from the thing they were already looking at. */
/* A prompt, not a banner. Sized to its own words and centred over the cards it
   is asking about, so it reads as a question rather than a site-wide alert. */
.bibh-blitz-arm {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    width: max-content; max-width: 100%;
    background: #ffde5c;
    color: var(--bibh-dark, #203D48);
    border-radius: 30px;
    padding: 10px 12px 10px 22px;
    margin: 0 auto 18px;
    font-weight: 800; font-size: 15px;
    box-shadow: 0 4px 0 #d9b53a;
}
.bibh-blitz-arm[hidden] { display: none; }

/* Armed grid: the cards become the choice. Everything that is not the card
   itself steps back, so the cog and View Dashboard cannot be hit by mistake
   while picking. */
.bibh-grid--classrooms.is-blitz-arming .bibh-card--classroom {
    cursor: pointer;
    outline: 2px dashed #ffde5c;
    outline-offset: 4px;
    transition: transform .12s cubic-bezier(.215,.61,.355,1), box-shadow .12s;
}
/* The lift and the outline going solid are the whole hover. No drop shadow:
   these cards already carry their own colour and a dark slab under a yellow
   card reads as grime rather than depth. */
.bibh-grid--classrooms.is-blitz-arming .bibh-card--classroom:hover {
    transform: translateY(-4px);
    outline-style: solid;
}
.bibh-grid--classrooms.is-blitz-arming .bibh-card__cog,
.bibh-grid--classrooms.is-blitz-arming .bibh-card--classroom .bibh-btn {
    pointer-events: none; opacity: .45;
}
/* The New Classroom tile is not a class, so it is not a target. The class is
   bibh-card--newclass; .bibh-card--new matched nothing, so the tile stayed
   fully lit and clickable through every arming session. */
.bibh-grid--classrooms.is-blitz-arming .bibh-card--newclass { opacity: .4; pointer-events: none; }

/* Armed takes the SAME darker yellow as hover. Brightening it made the live
   state look like the button had gone pale rather than gone live. */
.bibh-blitz-launch.is-armed,
.bibh-blitz-launch.is-armed:hover,
.bibh-blitz-launch.is-armed:focus { background: #ebcc55; }
.bibh-blitz-launch.is-armed,
.bibh-blitz-launch.is-armed:hover {
    transform: translateY(5px);
    box-shadow: 0 0 0 #d9b53a, 0 2px 8px rgba(32, 61, 72, .2);
}

@media (prefers-reduced-motion: reduce) {
    .bibh-grid--classrooms.is-blitz-arming .bibh-card--classroom { transition: none; }
}


/* Blitz mark on the student dashboard's live banner. Same mask as the launcher,
   so all three places draw one file and each takes its own colour. */
.bibh-home-ac-bolt {
    display: inline-block; font-size: 24px; line-height: 1; font-style: normal;
}
.bibh-home-ac-bolt img { width: 1em; height: 1em; display: block; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Assign modal, v5 immersive redesign
   Source of truth: _docs/quiz-builder-teacher-mockup-v5.html
   The type buttons are the STUDENT dashboard arcade colours on purpose: the
   teacher setting the work and the student receiving it see one language.
   ══════════════════════════════════════════════════════════════════════════ */
.bibh-tdash__assignmodal {
    /* student arcade answer colours, as published in the v5 mockup */
    --a-blue:#3b9ae1;  --a-blue-d:#2b78b6;
    --a-red:#e0492f;   --a-red-d:#b5361f;
    --a-green:#46997d; --a-green-d:#33735d;
    --a-amber:#e9a53c; --a-amber-d:#c1822a;
    --asg-quiz:#00b2ff; --asg-quiz-dark:#0080c2; --asg-quiz-light:#e7f7ff;
}
.bibh-tdash__assignmodal .bibh-modal__content { border-radius: 30px; }
/* Stated here rather than inherited: the modal is also rendered outside the
   .bibh-hub scope that supplies the reset, and without it the padded pill
   inputs below overflow their grid cells. */
.bibh-tdash__assignmodal *, .bibh-tdash__assignmodal *::before, .bibh-tdash__assignmodal *::after { box-sizing: border-box; }

/* Plain white header: title + close, nothing else. */
.bibh-asg__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px 4px; border: none; background: none; }
.bibh-asg__head h3 { font-size: 24px; font-weight: 900; color: var(--bibh-dark, #203D48); letter-spacing: -.3px; margin: 0; }
.bibh-asg__body { padding: 16px 32px 28px; }

.bibh-asg__label { font-size: 12.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: var(--bibh-text-muted, #6f8088); margin: 20px 0 12px; }

/* Type: the student quiz answer tile, verbatim.
   Stacked --edge shadow, hover LIFTS and brightens (the pop), press drops it
   8px onto a collapsed shadow. Selection IS the pressed state, so there is no
   tick badge: on the student dashboard a chosen tile is simply the one that is
   down, and this now reads the same way.

   Astra repaints button:hover green, which is why Quiz was going green with a
   blue edge still under it. Background and colour are pinned across hover,
   focus and active at class specificity, the same guard the quiz player and
   the flashcard session carry. */
/* One row for all five. Four columns left Lab stranded on a second row looking
   like an afterthought rather than part of the set. auto-fit with a floor means
   it stays one row while it fits and reflows on its own when it does not,
   instead of snapping between hard column counts. */
.bibh-asg__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.bibh-asg__type,
.bibh-asg__type:hover,
.bibh-asg__type:focus,
.bibh-asg__type:active {
    border: none; border-radius: 30px; padding: 20px 12px;
    font-family: inherit; font-weight: 900; font-size: 16px; color: #fff;
    text-align: center; cursor: pointer; position: relative;
    transform: translateY(0);
    transition: transform .11s cubic-bezier(.215,.61,.355,1),
                box-shadow .11s cubic-bezier(.215,.61,.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,.32), 0 18px 34px rgba(0,0,0,.2);
}
/* The STUDENT activity colours, not the v5 mockup's muted set: these are the
   same tokens and the same edge pairs the student home tiles use, so Quiz is
   the same blue on both sides of the handover. No XP pills here, a teacher is
   choosing a kind of work, not being offered a reward. */
.bibh-asg__type--quiz,       .bibh-asg__type--quiz:hover,       .bibh-asg__type--quiz:focus,       .bibh-asg__type--quiz:active       { background: var(--bibh-act-quiz,  #00b2ff); --edge: #0080c2; }
.bibh-asg__type--flashcards, .bibh-asg__type--flashcards:hover, .bibh-asg__type--flashcards:focus, .bibh-asg__type--flashcards:active { background: var(--bibh-act-flash, #f32201); --edge: #b81800; }
.bibh-asg__type--video,      .bibh-asg__type--video:hover,      .bibh-asg__type--video:focus,      .bibh-asg__type--video:active      { background: var(--bibh-act-video, #049f84); --edge: #037058; }
.bibh-asg__type--past_papers, .bibh-asg__type--past_papers:hover, .bibh-asg__type--past_papers:focus, .bibh-asg__type--past_papers:active { background: var(--bibh-act-past, #ffa700); --edge: #cc8400; }
/* Exam is its own pale green because it is the odd one out: the only tile that
   leaves the modal for the Exam Builder. Dark text, the face is too light for
   white to be readable on it. */
.bibh-asg__type--exam,       .bibh-asg__type--exam:hover,       .bibh-asg__type--exam:focus,       .bibh-asg__type--exam:active       { background: #d2e08c; --edge: #a9b76a; color: var(--bibh-dark, #203D48); }

/* Pop. Never on the chosen tile: it is down, and lifting it would undo the one
   thing that says it is chosen. */
.bibh-asg__type:not(.is-soon):not(.is-on):hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
    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,.42), 0 22px 42px rgba(0,0,0,.3);
}
/* Pressed: on click, and stays down while chosen. */
.bibh-asg__type:not(.is-soon):active,
.bibh-asg__type.is-on,
.bibh-asg__type.is-on:hover,
.bibh-asg__type.is-on:focus {
    transform: translateY(8px);
    box-shadow: 0 2px var(--edge), 0 4px 10px rgba(0,0,0,.4);
}

/* Lab is on the board but not yet assignable: flat, muted, no pop, no press. */
.bibh-asg__type--lab, .bibh-asg__type--lab:hover, .bibh-asg__type--lab:focus, .bibh-asg__type--lab:active {
    background: #dfe5e8; color: #7d8b92; --edge: #c8d1d5;
    box-shadow: 0 2px var(--edge), 0 4px var(--edge), 0 6px var(--edge), 0 6px 10px rgba(0,0,0,.12);
}
.bibh-asg__type.is-soon { cursor: not-allowed; }
.bibh-asg__type small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; opacity: .85; }

/* Condensed chapter picker: search + scrolling multi-select chips. */
.bibh-asg__search {
    width: 100%; background: #f6f9fb; border: 1.5px solid var(--bibh-border, #e2e5ea);
    border-radius: 30px; padding: 12px 16px 12px 42px;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--bibh-dark, #203D48);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f8088' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 16px center;
}
.bibh-asg__search:focus { outline: none; border-color: var(--bibh-primary, #3F8170); background-color: #fff; }
/* Paged, not scrolled. 36 chapters in a 134px scroll box hid most of the list
   behind a scrollbar nobody notices; a page of six that swaps for the next six
   is a thing you can actually read. */
.bibh-asg__chaps { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 4px; min-height: 132px; align-content: flex-start; }
.bibh-asg__chapnav { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; }
.bibh-asg__chapnav .bibh-asg__page { font-size: 12px; font-weight: 800; color: var(--bibh-text-muted, #6f8088); margin-right: auto; }
.bibh-asg__pg {
    border: 1.5px solid var(--bibh-border, #e2e5ea); background: #fff; border-radius: 30px;
    padding: 8px 16px; font-family: inherit; font-size: 12.5px; font-weight: 800;
    color: var(--bibh-dark, #203D48); cursor: pointer; transition: .12s;
}
.bibh-asg__pg:hover:not([disabled]) { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); background: var(--bibh-primary-light, #e8f5f0); }
.bibh-asg__pg[disabled] { opacity: .4; cursor: default; }
/* The forward control carries the remaining count, so it is the one that should
   read as the invitation. Tinted, not just another grey pill. */
.bibh-asg__pg--more:not([disabled]) { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); background: var(--bibh-primary-light, #e8f5f0); }
.bibh-asg__chap {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--bibh-border, #e2e5ea); border-radius: 30px;
    padding: 7px 14px; font-family: inherit; font-size: 12.5px; font-weight: 800;
    color: var(--bibh-dark, #203D48); cursor: pointer; background: #fff; transition: .12s;
}
.bibh-asg__chap:hover { border-color: var(--bibh-primary, #3F8170); }
.bibh-asg__chap.is-on { border-color: var(--bibh-primary, #3F8170); background: var(--bibh-primary-light, #e8f5f0); color: var(--bibh-primary-dark, #346b5d); }
.bibh-asg__bx { width: 16px; height: 16px; border-radius: 5px; border: 2px solid #c3ccd1; display: grid; place-items: center; font-size: 10px; color: #fff; }
.bibh-asg__chap.is-on .bibh-asg__bx { background: var(--bibh-primary, #3F8170); border-color: var(--bibh-primary, #3F8170); }
.bibh-asg__chap.is-on .bibh-asg__bx::after { content: "\2713"; }
.bibh-asg__chap[hidden] { display: none; }

/* Topics, grouped under their chapter. Collapsed by default when more than one
   chapter is picked, so six chapters do not become a wall of chips. */
/* Full width and stacked. The parent list is a wrap flex, which left a closed
   group sitting inline as a pill and an open one jumping to full width: the
   same control changing shape depending on its state reads as a bug. */
.bibh-tdash__lolist:has(.bibh-asg__lgrp) { display: block; }
.bibh-asg__lgrp { width: 100%; border: 1.5px solid var(--bibh-border, #e2e5ea); border-radius: 20px; margin-top: 10px; overflow: hidden; background: #fff; }
.bibh-asg__lhead {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: #fbfcfd; border: none; padding: 12px 16px;
    font-family: inherit; font-size: 13.5px; font-weight: 800;
    color: var(--bibh-dark, #203D48); cursor: pointer; text-align: left;
}
.bibh-asg__lhead:hover { background: var(--bibh-primary-light, #e8f5f0); }
.bibh-asg__lname { min-width: 0; }
.bibh-asg__lcount { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--bibh-text-muted, #6f8088); white-space: nowrap; }
.bibh-asg__lchev { width: 10px; height: 10px; flex: none; border-right: 2.4px solid var(--bibh-text-muted, #6f8088); border-bottom: 2.4px solid var(--bibh-text-muted, #6f8088); transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s; }
.bibh-asg__lgrp.is-open .bibh-asg__lchev { transform: rotate(-135deg) translate(-3px, -3px); }
.bibh-asg__lbody { display: none; flex-wrap: wrap; gap: 9px; padding: 12px 16px 14px; }
.bibh-asg__lgrp.is-open .bibh-asg__lbody { display: flex; }

.bibh-asg__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.bibh-asg__inp label { display: block; font-size: 12.5px; font-weight: 800; color: var(--bibh-dark, #203D48); margin-bottom: 8px; }
.bibh-asg__inp input {
    width: 100%; background: #f6f9fb; border: 1.5px solid var(--bibh-border, #e2e5ea);
    border-radius: 30px; padding: 13px 18px;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--bibh-dark, #203D48);
}
.bibh-asg__inp input:focus { outline: none; border-color: var(--bibh-primary, #3F8170); background: #fff; }

/* Footer: live summary chip + the one arcade action. */
.bibh-asg__foot { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.bibh-asg__sum { flex: 1; min-width: 180px; background: var(--asg-quiz-light); border-radius: 30px; padding: 14px 20px; font-size: 13.5px; font-weight: 800; color: var(--asg-quiz-dark); }
.bibh-asg__go {
    border: none; border-radius: 30px; padding: 15px 30px;
    font-family: inherit; font-weight: 900; font-size: 16px; color: #fff; cursor: pointer;
    background: var(--bibh-primary, #3F8170); box-shadow: 0 6px 0 var(--bibh-primary-dark, #346b5d);
    transition: transform .1s, box-shadow .1s, filter .12s;
}
.bibh-asg__go:hover  { filter: brightness(1.05); }
.bibh-asg__go:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--bibh-primary-dark, #346b5d); }
.bibh-asg__go[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

@media (max-width: 640px) {
    .bibh-asg__head, .bibh-asg__body { padding-left: 20px; padding-right: 20px; }
    .bibh-asg__types { grid-template-columns: repeat(2, 1fr); }
    .bibh-asg__two { grid-template-columns: 1fr; }
    .bibh-asg__go { width: 100%; }
}

/* ── Astra hover guard for the whole assign modal ─────────────────────────
 * Astra repaints button:hover and :focus with a green background and WHITE
 * text. That is what made the chapter group header's own label disappear on
 * hover: white on a pale green fill. The type buttons were pinned when the same
 * thing turned Quiz green, so rather than keep fixing these one at a time as
 * they surface, every interactive control in the modal states its own colours
 * across hover, focus and active.
 * ------------------------------------------------------------------------ */
.bibh-tdash__assignmodal .bibh-asg__lhead,
.bibh-tdash__assignmodal .bibh-asg__lhead:hover,
.bibh-tdash__assignmodal .bibh-asg__lhead:focus,
.bibh-tdash__assignmodal .bibh-asg__lhead:active {
    color: var(--bibh-dark, #203D48);
    background: #fbfcfd;
}
.bibh-tdash__assignmodal .bibh-asg__lhead:hover,
.bibh-tdash__assignmodal .bibh-asg__lhead:focus {
    background: var(--bibh-primary-light, #e8f5f0);
}

.bibh-tdash__assignmodal .bibh-asg__chap,
.bibh-tdash__assignmodal .bibh-asg__chap:hover,
.bibh-tdash__assignmodal .bibh-asg__chap:focus,
.bibh-tdash__assignmodal .bibh-asg__chap:active {
    background: #fff; color: var(--bibh-dark, #203D48);
}
.bibh-tdash__assignmodal .bibh-asg__chap.is-on,
.bibh-tdash__assignmodal .bibh-asg__chap.is-on:hover,
.bibh-tdash__assignmodal .bibh-asg__chap.is-on:focus,
.bibh-tdash__assignmodal .bibh-asg__chap.is-on:active {
    background: var(--bibh-primary-light, #e8f5f0); color: var(--bibh-primary-dark, #346b5d);
}

.bibh-tdash__assignmodal .bibh-tdash__lo-opt,
.bibh-tdash__assignmodal .bibh-tdash__lo-opt:hover,
.bibh-tdash__assignmodal .bibh-tdash__lo-opt:focus,
.bibh-tdash__assignmodal .bibh-tdash__lo-opt:active {
    background: #fff; color: var(--bibh-text-muted, #6c7a84);
}
.bibh-tdash__assignmodal .bibh-tdash__lo-opt:hover { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-dark, #203D48); }
.bibh-tdash__assignmodal .bibh-tdash__lo-opt.is-on,
.bibh-tdash__assignmodal .bibh-tdash__lo-opt.is-on:hover,
.bibh-tdash__assignmodal .bibh-tdash__lo-opt.is-on:focus,
.bibh-tdash__assignmodal .bibh-tdash__lo-opt.is-on:active {
    background: var(--bibh-primary-light, #e8f5f0); color: var(--bibh-primary-dark, #346b5d);
    border-color: var(--bibh-primary, #3F8170);
}

.bibh-tdash__assignmodal .bibh-asg__pg,
.bibh-tdash__assignmodal .bibh-asg__pg:hover,
.bibh-tdash__assignmodal .bibh-asg__pg:focus,
.bibh-tdash__assignmodal .bibh-asg__pg:active { background: #fff; color: var(--bibh-dark, #203D48); }
.bibh-tdash__assignmodal .bibh-asg__pg--more:not([disabled]),
.bibh-tdash__assignmodal .bibh-asg__pg--more:not([disabled]):hover,
.bibh-tdash__assignmodal .bibh-asg__pg--more:not([disabled]):focus {
    background: var(--bibh-primary-light, #e8f5f0); color: var(--bibh-primary-dark, #346b5d);
}
.bibh-tdash__assignmodal .bibh-asg__pg:not([disabled]):hover { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); }

.bibh-tdash__assignmodal .bibh-asg__go,
.bibh-tdash__assignmodal .bibh-asg__go:hover,
.bibh-tdash__assignmodal .bibh-asg__go:focus,
.bibh-tdash__assignmodal .bibh-asg__go:active {
    background: var(--bibh-primary, #3F8170); color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   ASSIGN, from the hub header
   Same picker as Blitz over the same cards, in light blue. Blitz is yellow and
   this is blue on purpose: two modes that arm the same grid have to be told
   apart at a glance, or a teacher about to set homework starts a live game.
   ══════════════════════════════════════════════════════════════════════════ */
.bibh-tland__assign,
.bibh-tland__assign:hover,
.bibh-tland__assign:focus,
.bibh-tland__assign:active {
    display: inline-flex; align-items: center;
    background: #94e3ff; border: 1.5px solid #94e3ff;
    color: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-pill, 30px);
    padding: 11px 22px; font-weight: 800; font-size: 14.5px;
    font-family: inherit; cursor: pointer; line-height: 1.2;
    box-shadow: 0 4px 0 #5fbcdc;
    transition: transform .12s, box-shadow .12s, background .15s;
}
.bibh-tland__assign:hover { background: #a8e9ff; color: var(--bibh-dark, #203D48); }
.bibh-tland__assign:active { transform: translateY(3px); box-shadow: 0 1px 0 #5fbcdc; }
.bibh-tland__assign:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Armed reads as pressed in, matching the Blitz launcher's own live state. */
.bibh-tland__assign.is-armed,
.bibh-tland__assign.is-armed:hover {
    background: #7ed4f5;
    transform: translateY(3px);
    box-shadow: 0 1px 0 #5fbcdc;
}

.bibh-assign-arm {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    width: max-content; max-width: 100%;
    background: #94e3ff;
    color: var(--bibh-dark, #203D48);
    border-radius: 30px;
    padding: 10px 12px 10px 22px;
    margin: 0 auto 18px;
    font-weight: 800; font-size: 15px;
    box-shadow: 0 4px 0 #5fbcdc;
}
.bibh-assign-arm[hidden] { display: none; }

/* Armed grid: the cards become the choice, and everything that is not the card
   steps back so the cog and View Dashboard cannot be hit while picking. */
.bibh-grid--classrooms.is-assign-arming .bibh-card--classroom {
    cursor: pointer;
    outline: 2px dashed #35b6e8;
    outline-offset: 4px;
    transition: transform .12s cubic-bezier(.215,.61,.355,1), box-shadow .12s;
}
.bibh-grid--classrooms.is-assign-arming .bibh-card--classroom:hover {
    transform: translateY(-4px);
    outline-style: solid;
}
.bibh-grid--classrooms.is-assign-arming .bibh-card__cog,
.bibh-grid--classrooms.is-assign-arming .bibh-card--classroom .bibh-btn {
    pointer-events: none; opacity: .45;
}
/* The New Classroom tile is not a class, so it is not a target. */
.bibh-grid--classrooms.is-assign-arming .bibh-card--newclass { opacity: .4; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .bibh-grid--classrooms.is-assign-arming .bibh-card--classroom { transition: none; }
    .bibh-tland__assign { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ASSIGN MODAL, sized to its content
   It was a 520px box holding five type tiles, a chapter grid, two topic
   accordions and a footer, so almost every teacher met it scrolling. Wider
   and taller: the five types sit on one row and the whole decision fits on
   screen, which is the point of a modal.
   ══════════════════════════════════════════════════════════════════════════ */
.bibh-tdash__assignmodal .bibh-modal__content {
    max-width: 880px;
    max-height: 94vh;
}
/* Five across, one row, in the order they are offered. auto-fit was wrapping
   the fifth onto a line of its own and making Lab look like a category. */
.bibh-tdash__assignmodal .bibh-asg__types {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Chapters two-up: full titles read straight rather than truncating. */
.bibh-tdash__assignmodal .bibh-asg__chaps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
}
@media (max-width: 900px) {
    .bibh-tdash__assignmodal .bibh-asg__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .bibh-tdash__assignmodal .bibh-asg__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bibh-tdash__assignmodal .bibh-asg__chaps { grid-template-columns: 1fr; }
}

/* The search field already asked for 30px; Astra's own input styling was
   winning on specificity and squaring it off. Pinned inside the modal scope so
   it matches the chapter pills under it. */
.bibh-tdash__assignmodal input.bibh-asg__search,
.bibh-tdash__assignmodal input.bibh-asg__search:focus,
.bibh-tdash__assignmodal input.bibh-asg__search:hover {
    border-radius: var(--bibh-radius-pill, 30px);
}

/* ══════════════════════════════════════════════════════════════════════════
   TEACHER PAST PAPERS VIEW
   The student reader on a teacher screen, so the page is only a back control
   and a host for it. The player brings its own chrome.
   ══════════════════════════════════════════════════════════════════════════ */
/* Full screen, the way the student activities are. Past papers are read from
   the board and printed, so the site header, footer and admin bar step out and
   the reader takes the window. Same mechanism the quiz builder uses. */
html:has(.bibh-tpp), body:has(.bibh-tpp) { background: #fbe3bf; }
body:has(.bibh-tpp) #wpadminbar,
body:has(.bibh-tpp) #masthead,
body:has(.bibh-tpp) .site-header,
body:has(.bibh-tpp) .site-footer,
body:has(.bibh-tpp) #colophon,
body:has(.bibh-tpp) .ast-small-footer,
body:has(.bibh-tpp) .bibh-suite__nav,
body:has(.bibh-tpp) .bibh-focus-back { display: none !important; }
html:has(.bibh-tpp) { margin-top: 0 !important; }
body:has(.bibh-tpp) .site-main > article,
body:has(.bibh-tpp) .site-content,
body:has(.bibh-tpp) .site-main,
body:has(.bibh-tpp) .ast-container,
body:has(.bibh-tpp) #primary,
body:has(.bibh-tpp) #page,
body:has(.bibh-tpp) .bibh-suite,
body:has(.bibh-tpp) .bibh-suite__main { background: transparent; padding-left: 0; padding-right: 0; max-width: none; }

.bibh-tpp {
    position: relative; min-height: 100vh;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* The reader owns the page here, so its own close control would leave a blank
   screen behind. Back is the way out. */
.bibh-tpp .bibh-home-lib-x { display: none; }
.bibh-tpp__back,
.bibh-tpp__back:hover,
.bibh-tpp__back:focus,
.bibh-tpp__back:active {
    position: fixed; top: 18px; left: 18px; z-index: 100000;
    display: inline-flex; align-items: center;
    background: #fff; color: var(--bibh-dark, #203D48);
    border: 1.5px solid var(--bibh-border, #e2e5ea);
    border-radius: var(--bibh-radius-pill, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    padding: 12px 22px; font-size: 15px; font-weight: 800; text-decoration: none;
}
.bibh-tpp__back:hover { border-color: var(--bibh-primary, #3F8170); color: var(--bibh-primary-dark, #346b5d); }
/* The reader's own "nothing here" message, on our stage. It renders inside the
   modal body after the pp chrome has been stripped, so without this it was one
   line of grey text floating on the orange. */
.bibh-tpp .bibh-home-modal-empty {
    background: #fff;
    border-radius: var(--bibh-radius-md, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    padding: 44px 28px;
    margin: 90px auto 0;
    max-width: 520px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--bibh-dark, #203D48);
}

.bibh-tpp__empty {
    background: #fff;
    border-radius: var(--bibh-radius-md, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    padding: 48px 24px; margin: 70px auto 0; max-width: 560px; text-align: center;
}
.bibh-tpp__empty b { display: block; font-size: 18px; font-weight: 800; color: var(--bibh-dark, #203D48); }
/* Only spaced when there is something under it. */
.bibh-tpp__empty b + span { display: block; margin-top: 8px; }
.bibh-tpp__empty span { font-size: 14px; color: var(--bibh-text-light, #4a6272); }
/* Nothing but the reader lives on this page, so the shell keeps no gutters. */
.bibh-home--pponly { padding: 0; margin: 0; }


/* ── Assign panel headings ─────────────────────────────────────────────
 * The class name and the section under it are the two things that orient a
 * teacher in this panel, so they are centred and share one voice: same colour,
 * a clear size step between them.
 * ------------------------------------------------------------------- */
.bibh-tdash__assignmodal .bibh-asg__head { justify-content: center; position: relative; }
.bibh-tdash__assignmodal .bibh-asg__head h3 {
    font-size: 25px;
    font-weight: 800;
    color: var(--bibh-dark, #203D48);
    text-align: center;
    margin: 0;
}
/* The close control leaves the flow so it cannot pull the centred title off
   centre by its own width. */
.bibh-tdash__assignmodal .bibh-asg__head .bibh-modal__close {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
}
.bibh-tdash__assignmodal .bibh-asg__label {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bibh-dark, #203D48);
    text-align: center;
}
.bibh-asg__two[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   TEACHER FLASHCARDS WALL
   Design source of truth: _docs/flashcards-teacher-mockup-v1.html
   The stage takes the flashcard red at a light tint, the way the quiz builder
   takes the quiz blue, so a teacher always knows which tool they are in.
   ══════════════════════════════════════════════════════════════════════════ */
html:has(.bibh-fcw), body:has(.bibh-fcw) { background: #ffe9e5; }
body:has(.bibh-fcw) #wpadminbar,
body:has(.bibh-fcw) #masthead,
body:has(.bibh-fcw) .site-header,
body:has(.bibh-fcw) .site-footer,
body:has(.bibh-fcw) #colophon,
body:has(.bibh-fcw) .ast-small-footer,
body:has(.bibh-fcw) .bibh-focus-back { display: none !important; }
html:has(.bibh-fcw) { margin-top: 0 !important; }
body:has(.bibh-fcw) .site-main > article,
body:has(.bibh-fcw) .site-content,
body:has(.bibh-fcw) .site-main,
body:has(.bibh-fcw) .ast-container,
body:has(.bibh-fcw) #primary,
body:has(.bibh-fcw) #page,
body:has(.bibh-fcw) .bibh-suite,
body:has(.bibh-fcw) .bibh-suite__main { background: transparent; padding-left: 0; padding-right: 0; max-width: none; }

.bibh-fcw {
    --fcw-red: #f32201; --fcw-red-d: #b81800;
    position: relative; min-height: 100vh; padding: 26px 22px 80px;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    font-family: var(--bibh-font, "League Spartan", sans-serif);
}
.bibh-fcw *, .bibh-fcw *::before, .bibh-fcw *::after { box-sizing: border-box; }

.bibh-fcw__back,
.bibh-fcw__back:hover,
.bibh-fcw__back:focus,
.bibh-fcw__pill,
.bibh-fcw__pill:hover,
.bibh-fcw__pill:focus {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1.5px solid #e6e8ee;
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    border-radius: var(--bibh-radius-pill, 30px); padding: 13px 24px;
    font-family: inherit; font-weight: 800; font-size: 15px;
    color: var(--bibh-dark, #203D48); text-decoration: none; cursor: pointer;
    min-width: 0;
}
.bibh-fcw__back { position: absolute; top: 22px; left: 22px; z-index: 5; }
.bibh-fcw__back:hover, .bibh-fcw .bibh-fcw__pill:hover { border-color: var(--fcw-red); color: var(--fcw-red-d); }
.bibh-fcw__pill--mute, .bibh-fcw .bibh-fcw__pill--mute:hover { color: var(--bibh-text-light, #4a6272); cursor: default; border-color: #e6e8ee; }
.bibh-fcw__acts { position: absolute; top: 22px; right: 22px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.bibh-fcw__arc,
.bibh-fcw__arc:hover,
.bibh-fcw__arc:focus,
.bibh-fcw__arc:active {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--bibh-radius-pill, 30px);
    padding: 13px 28px; font-family: inherit; font-weight: 900; font-size: 15px;
    color: #fff; cursor: pointer; text-decoration: none; min-width: 0;
    background: var(--fcw-red); box-shadow: 0 5px 0 var(--fcw-red-d), 0 10px 22px rgba(32,61,72,.22);
    transition: transform .1s, box-shadow .1s, filter .15s;
}
.bibh-fcw .bibh-fcw__arc:hover { filter: brightness(1.05); color: #fff; }
.bibh-fcw .bibh-fcw__arc:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fcw-red-d); }
.bibh-fcw__arc[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.bibh-fcw__inner { max-width: 1220px; margin: 0 auto; padding-top: 70px; }
.bibh-fcw h1 { font-size: 38px; font-weight: 900; color: var(--bibh-dark, #203D48); text-align: center; margin: 0 0 6px; letter-spacing: -.5px; }
.bibh-fcw__sub { text-align: center; color: var(--bibh-text-light, #4a6272); font-weight: 600; font-size: 14.5px; margin: 0 0 22px; }

.bibh-fcw__bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #fff; border-radius: 26px; box-shadow: var(--bibh-shadow-lg, 0 8px 30px rgba(32,61,72,.15));
    padding: 14px 18px; margin-bottom: 18px;
}
.bibh-fcw__bar .lab { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--bibh-text-light, #4a6272); }
.bibh-fcw__bar select, .bibh-fcw__bar select:focus {
    width: auto; max-width: 340px; min-width: 0; margin: 0; height: auto; line-height: 1.5;
    appearance: none; -webkit-appearance: none;
    background-color: #f6f9fb; border: 1.5px solid var(--bibh-border, #e2e5ea); border-radius: 16px;
    padding: 12px 40px 12px 18px; font-family: inherit; font-weight: 800; font-size: 14px;
    color: var(--bibh-dark, #203D48); cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236f8088' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center;
}
.bibh-fcw__count { margin-left: auto; background: #ffe2dc; color: var(--fcw-red-d); border-radius: 18px; padding: 8px 16px; font-weight: 900; font-size: 13px; white-space: nowrap; }

/* The wall. Four across on a desktop: enough to scan a chapter without scrolling
   for ever, wide enough that a question is readable. */
.bibh-fcw__wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1080px) { .bibh-fcw__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .bibh-fcw__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .bibh-fcw__wall { grid-template-columns: 1fr; } }

.bibh-fcw__c,
.bibh-fcw__c:hover,
.bibh-fcw__c:focus,
.bibh-fcw__c:active {
    border: 0; background: none; padding: 0; margin: 0; box-shadow: none;
    font-family: inherit; cursor: pointer; perspective: 1200px; height: 210px; min-width: 0;
}
.bibh-fcw__cin { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.bibh-fcw__c[aria-pressed="true"] .bibh-fcw__cin { transform: rotateY(180deg); }
.bibh-fcw__cs {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 18px;
    border-radius: var(--bibh-radius-md, 30px); background: #fff;
    box-shadow: var(--bibh-shadow-lg, 0 8px 30px rgba(32,61,72,.15));
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    text-align: left; overflow: hidden;
}
/* The answer side is tinted, so a half-turned wall reads at a glance. */
.bibh-fcw__cb { transform: rotateY(180deg); background: #fff5f3; border: 1.5px solid #ffd3c9; }
.bibh-fcw__tag {
    align-self: flex-start; background: #eef3f5; color: var(--bibh-text-light, #4a6272);
    border-radius: 20px; padding: 4px 10px; font-size: 10px; font-weight: 900;
    letter-spacing: .4px; text-transform: uppercase; line-height: 1.4;
}
.bibh-fcw__tag--b { background: var(--fcw-red); color: #fff; }
.bibh-fcw__t { font-size: 14.5px; font-weight: 700; color: var(--bibh-dark, #203D48); line-height: 1.4; overflow: hidden; }
.bibh-fcw__cs img { max-width: 100%; max-height: 90px; object-fit: contain; border-radius: 12px; }
.bibh-fcw__hint { margin-top: auto; font-size: 11px; font-weight: 800; color: #c3cbd0; }
.bibh-fcw__c:hover .bibh-fcw__cs { box-shadow: 0 14px 34px rgba(32,61,72,.2); }

.bibh-fcw__empty {
    background: #fff; border-radius: var(--bibh-radius-md, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    padding: 48px 24px; margin: 20px auto 0; max-width: 560px; text-align: center;
}
.bibh-fcw__empty b { font-size: 18px; font-weight: 800; color: var(--bibh-dark, #203D48); }

.bibh-fcw__sheetwrap {
    position: fixed; inset: 0; z-index: 100000; background: rgba(32,61,72,.52);
    backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.bibh-fcw__sheetwrap.is-open { opacity: 1; pointer-events: auto; }
.bibh-fcw__sheet {
    background: #fff; border-radius: 30px; box-shadow: 0 20px 60px rgba(32,61,72,.28);
    width: 100%; max-width: 440px; padding: 28px 26px 24px;
}
.bibh-fcw__sheet h3 { font-size: 20px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0 0 5px; }
.bibh-fcw__sheet p { font-size: 13.5px; font-weight: 600; color: var(--bibh-text-light, #4a6272); margin: 0 0 18px; line-height: 1.55; }
.bibh-fcw__input {
    width: 100%; box-sizing: border-box; margin: 0 0 18px; padding: 13px 18px;
    font-family: inherit; font-size: 14.5px; font-weight: 700;
    color: var(--bibh-dark, #203D48); background: #f6f9fb;
    border: 1.5px solid var(--bibh-border, #e3ecf1); border-radius: 30px;
    outline: none; transition: border-color .15s ease, background .15s ease;
}
.bibh-fcw__input:focus { border-color: #f32201; background: #fff; }
.bibh-fcw__sheetacts { display: flex; gap: 10px; }
.bibh-fcw__sheetacts > * { flex: 1 1 0; justify-content: center; text-align: center; }

@media (max-width: 860px) {
    .bibh-fcw__back, .bibh-fcw__acts { position: static; }
    .bibh-fcw__acts { justify-content: center; margin: 12px auto 0; }
    .bibh-fcw__inner { padding-top: 16px; }
    .bibh-fcw h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .bibh-fcw__cin { transition: none; }
}


/* Roster notices in "Needs your attention". News, not a standing state, so a
   flat card with a dismiss rather than the coloured nudge rows below it. */
.bibh-tdash__notice {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin: 0 0 10px;
    background: #eef4f8; border-radius: var(--bibh-radius-md, 30px);
}
.bibh-tdash__notice-txt { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--bibh-dark, #203D48); line-height: 1.45; }
.bibh-tdash__notice-x {
    flex: 0 0 auto; width: 26px; height: 26px; line-height: 1;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(32,61,72,.08); color: var(--bibh-dark, #203D48);
    font-size: 12px; box-shadow: none; min-width: 0; padding: 0;
}
.bibh-tdash__notice-x:hover { background: rgba(32,61,72,.16); }


/* ==========================================================================
   TEACHER VIDEO LIBRARY
   Same shell as the flashcard wall, in the video green, with a YouTube-shaped
   grid: poster, then title, then the facts that decide whether to share it.
   ========================================================================== */
/* Immersive, exactly as the flashcard wall is. The stage colour belongs to the
   whole page, not to a panel floating on the theme's own background: setting it
   on this div alone left the green as a box with the site showing around it. */
html:has(.bibh-vid), body:has(.bibh-vid) { background: #e9f4f1; }
body:has(.bibh-vid) #wpadminbar,
body:has(.bibh-vid) #masthead,
body:has(.bibh-vid) .site-header,
body:has(.bibh-vid) .site-footer,
body:has(.bibh-vid) #colophon,
body:has(.bibh-vid) .ast-small-footer,
body:has(.bibh-vid) .bibh-focus-back { display: none !important; }
html:has(.bibh-vid) { margin-top: 0 !important; }
body:has(.bibh-vid) .site-main > article,
body:has(.bibh-vid) .site-content,
body:has(.bibh-vid) .site-main,
body:has(.bibh-vid) .ast-container,
body:has(.bibh-vid) #primary,
body:has(.bibh-vid) #page,
body:has(.bibh-vid) .bibh-suite,
body:has(.bibh-vid) .bibh-suite__main { background: transparent; padding-left: 0; padding-right: 0; max-width: none; }

.bibh-vid {
    --vid: var(--bibh-act-video, #049f84);
    --vid-d: #037a66;
    --vid-light: #e6f4f0;
    position: relative; min-height: 100vh; padding: 26px 22px 120px; background: #e9f4f1;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    font-family: var(--bibh-font, "League Spartan", sans-serif);
}
.bibh-vid *, .bibh-vid *::before, .bibh-vid *::after { box-sizing: border-box; }
.bibh-vid__back { position: absolute; top: 22px; left: 22px; z-index: 5; }
.bibh-vid__back,
.bibh-vid__pill {
    display: inline-flex; align-items: center; gap: 7px; background: #fff;
    border: 1.5px solid #e6e8ee; box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    border-radius: var(--bibh-radius-md, 30px); padding: 13px 24px; font-weight: 800; font-size: 15px;
    color: var(--bibh-dark, #203D48); text-decoration: none; cursor: pointer; min-width: 0;
}
.bibh-vid__acts { position: absolute; top: 22px; right: 22px; z-index: 5; display: flex; gap: 12px; }
/* The faves shortcut wears the pill shape the other top controls do, so the
   corner reads as one set of controls. */
.bibh-vid__faves { position: relative; }
.bibh-vid__favebtn,
.bibh-vid__favebtn:hover,
.bibh-vid__favebtn:focus {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: 15px; line-height: 1.4;
    color: var(--bibh-dark, #203D48); background: #fff; min-width: 0;
    border: 1.5px solid #e6e8ee; border-radius: var(--bibh-radius-md, 30px);
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32,61,72,.16));
    padding: 13px 22px;
}
.bibh-vid__favebtn .star { color: #f0b21a; font-size: 17px; line-height: 1; }
.bibh-vid__favebtn .n {
    background: var(--vid-light); color: var(--vid-d); border-radius: 20px;
    padding: 2px 9px; font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* The panel. A shortlist of clips is recognised by its poster, so each row
   leads with one, the way a video list anywhere else does. */
.bibh-vid__favepanel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 344px; max-width: 86vw;
    background: #fff; border-radius: 24px; box-shadow: 0 22px 60px rgba(32,61,72,.28);
    border: 1.5px solid #eef2f5; overflow: hidden; z-index: 20;
}
.bibh-vid__favepanel[hidden] { display: none; }
.bibh-vid__favehead {
    padding: 14px 18px 10px; font-size: 11px; font-weight: 900; letter-spacing: .5px;
    text-transform: uppercase; color: var(--bibh-text-light, #6f8088);
}
.bibh-vid__favelist { max-height: 60vh; overflow-y: auto; padding-bottom: 6px; }
.bibh-vid__faveempty {
    padding: 4px 18px 18px; font-size: 13px; font-weight: 600; line-height: 1.5;
    color: var(--bibh-text-light, #6f8088);
}
.bibh-vid__faveempty[hidden] { display: none; }
.bibh-vid__faverow { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; }
.bibh-vid__faverow:hover { background: #f7fbfa; }
.bibh-vid__faverow .go {
    display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
    padding: 8px 0; text-decoration: none; color: inherit;
}
.bibh-vid__faverow .thumb {
    position: relative; flex: none; width: 108px; aspect-ratio: 16/9; border-radius: 12px;
    overflow: hidden; background: linear-gradient(150deg, #0f6b7a, #053f4a);
    display: grid; place-items: center;
}
.bibh-vid__faverow .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bibh-vid__faverow .thumb .code { font-size: 17px; font-weight: 900; color: rgba(255,255,255,.92); }
.bibh-vid__faverow .thumb .d {
    position: absolute; right: 5px; bottom: 5px; background: rgba(14,28,34,.86); color: #fff;
    font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 5px; font-variant-numeric: tabular-nums;
}
.bibh-vid__faverow .txt { min-width: 0; }
.bibh-vid__faverow .t {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13.5px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.32;
}
.bibh-vid__faverow .c {
    display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
    color: var(--bibh-text-light, #6f8088); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bibh-vid__faverow .drop {
    flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--bibh-text-light, #6f8088); font-size: 12px;
    box-shadow: none; min-width: 0; padding: 0; opacity: 0; transition: opacity .14s, background .14s;
}
.bibh-vid__faverow:hover .drop,
.bibh-vid__faverow .drop:focus-visible { opacity: 1; }
.bibh-vid__faverow .drop:hover { background: rgba(32,61,72,.1); color: var(--bibh-dark, #203D48); }
.bibh-vid__arc,
.bibh-vid__arc:hover {
    border: none; border-radius: var(--bibh-radius-md, 30px); padding: 13px 28px;
    font-weight: 900; font-size: 15px; color: #fff; cursor: pointer; background: var(--vid);
    box-shadow: 0 5px 0 var(--vid-d), 0 10px 22px rgba(32,61,72,.22);
    text-decoration: none; display: inline-block; text-align: center; min-width: 0;
}
.bibh-vid__arc:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--vid-d); }
.bibh-vid__arc[disabled] { opacity: .45; cursor: not-allowed; }

.bibh-vid__inner { max-width: 1280px; margin: 0 auto; padding-top: 34px; }
.bibh-vid h1 { font-size: 38px; font-weight: 900; color: var(--bibh-dark, #203D48); text-align: center; margin: 0 0 12px; letter-spacing: -.5px; }
/* The scope reads as a pill, the way the quiz builder states its class and
   chapter, rather than as grey small print under the heading. */
.bibh-vid__subwrap { text-align: center; margin: 0 0 22px; }
.bibh-vid__sub {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 17px; font-weight: 800; letter-spacing: -.1px;
    /* White, not the house primary-light: that tint is within a shade of this
       stage, so the pill simply vanished into the background. */
    color: var(--vid-d); background: #fff;
    border-radius: var(--bibh-radius-md, 30px); padding: 10px 22px;
    box-shadow: var(--bibh-shadow-lg, 0 8px 30px rgba(32,61,72,.15));
}

.bibh-vid__bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff;
    border-radius: 26px; padding: 16px 22px; box-shadow: var(--bibh-shadow-lg, 0 8px 30px rgba(32,61,72,.15)); margin-bottom: 26px;
}
.bibh-vid__bar .lab { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--bibh-text-light, #6f8088); }
.bibh-vid__bar select {
    appearance: none; background: #f6f9fb; border: 1.5px solid var(--bibh-border, #e3ecf1); border-radius: 16px;
    padding: 11px 34px 11px 16px; font-family: inherit; font-weight: 700; font-size: 14px;
    color: var(--bibh-dark, #203D48); cursor: pointer; outline: none;
    /* Shrinkable. Chapter titles run long, and at their natural width the three
       pickers pushed the count onto a second line, leaving the bar half empty. */
    flex: 0 1 auto; min-width: 110px; max-width: 250px; text-overflow: ellipsis;
    /* Astra pins a height on select, which is shorter than the padding plus the
       line box, so descenders were being sliced off the chapter name. */
    height: auto; min-height: 0; line-height: 1.4;
}
.bibh-vid__bar select:focus { border-color: var(--vid); }
.bibh-vid__count {
    margin-left: auto; background: var(--vid-light); color: var(--vid-d); font-weight: 900;
    font-size: 13px; padding: 8px 16px; border-radius: 20px; white-space: nowrap;
}

.bibh-vid__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 26px 22px; }
.bibh-vid__v,
.bibh-vid__v:hover,
.bibh-vid__v:focus,
.bibh-vid__v:active {
    /* Astra paints a background on button:hover, which washed the entire card,
       title and chips included. Every state has to be reset, not just the base. */
    background: transparent; border: 0; padding: 0; text-align: left; font-family: inherit; cursor: pointer;
    position: relative; box-shadow: none; color: inherit; min-width: 0;
    /* Grid items stretch by default, which lets a two-line topic name drag its
       poster out of line with the rest of the row. */
    align-self: start;
}
.bibh-vid__v:focus-visible .bibh-vid__poster { outline: 3px solid var(--vid); outline-offset: 3px; }
.bibh-vid__poster {
    position: relative; display: grid; place-items: center; aspect-ratio: 16/9; border-radius: 18px;
    overflow: hidden; background: linear-gradient(150deg, #0f6b7a, #053f4a);
    box-shadow: var(--bibh-shadow-lg, 0 8px 30px rgba(32,61,72,.15)); transition: transform .16s, box-shadow .16s;
}
.bibh-vid__v:hover .bibh-vid__poster { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(32,61,72,.24); }
.bibh-vid__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bibh-vid__poster .code { font-size: 40px; font-weight: 900; color: rgba(255,255,255,.92); letter-spacing: -1px; }
.bibh-vid__poster .dur {
    position: absolute; right: 9px; bottom: 9px; background: rgba(14,28,34,.86); color: #fff;
    font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; font-variant-numeric: tabular-nums;
}
.bibh-vid__poster .play {
    position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .16s;
    background: rgba(14, 28, 34, .28);
}
.bibh-vid__v:hover .bibh-vid__poster .play,
.bibh-vid__v:focus-visible .bibh-vid__poster .play { opacity: 1; }
.bibh-vid__poster .play > span {
    width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.94);
    display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* A topic with nothing filed under it. Quiet, so it never competes with a real
   clip, but present, so the grid is never an unexplained gap. */
.bibh-vid__poster--soon {
    background: #dfeae7; border: 2px dashed #b9cfc9; box-shadow: none; color: #6d8b84;
    /* Mascot and words sit on one line, centred together. */
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.bibh-vid__v--soon { cursor: default; }
.bibh-vid__poster--soon .soon { font-size: 14.5px; font-weight: 800; letter-spacing: .2px; }
.bibh-vid__poster--soon .mascot { width: 46px; height: auto; flex: none; display: block; }
.bibh-vid__v--soon .bibh-vid__t { color: var(--bibh-text-light, #6f8088); }

.bibh-vid__t {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 15px; font-weight: 800; color: var(--bibh-dark, #203D48); margin: 11px 0 5px; line-height: 1.34;
}
.bibh-vid__m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bibh-vid__m .chip,
.bibh-vid__sheet .chip {
    background: #eef3f6; color: var(--bibh-text-light, #6f8088); font-size: 11px; font-weight: 800;
    padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px;
}
.bibh-vid__m .chip--on { background: var(--vid-light); color: var(--vid-d); }
.bibh-vid__m .chip--good { background: #e4f6ee; color: #1d7a52; }
.bibh-vid__m .chip--warn { background: #fdf1dc; color: #8a5a12; }

/* The star. Always visible when set, so a teacher can see their shortlist at a
   glance; on hover otherwise, so it does not clutter a grid of thirty. */
.bibh-vid__poster .fave {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; z-index: 3;
    background: rgba(14,28,34,.5); color: #fff;
    opacity: 0; transition: opacity .16s, background .16s, color .16s;
}
.bibh-vid__poster .fave svg { fill: none; stroke: currentColor; }
.bibh-vid__v:hover .bibh-vid__poster .fave,
.bibh-vid__poster .fave:focus-visible,
.bibh-vid__poster .fave.is-on { opacity: 1; }
.bibh-vid__poster .fave:hover { background: rgba(14,28,34,.72); }
.bibh-vid__poster .fave.is-on { background: #fff; color: #e8a90c; }
.bibh-vid__poster .fave.is-on svg { fill: #f0b21a; stroke: #f0b21a; }

/* Sheets. */
.bibh-vid__wrap {
    position: fixed; inset: 0; z-index: var(--bibh-z-modal, 99999); background: rgba(32,61,72,.55);
    backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
    padding: 22px; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.bibh-vid__wrap.is-open { opacity: 1; pointer-events: auto; }
.bibh-vid__sheet {
    background: #fff; border-radius: var(--bibh-radius-md, 30px); box-shadow: 0 24px 70px rgba(32,61,72,.3);
    width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; padding: 28px;
}
.bibh-vid__sheet--sm { max-width: 430px; }
.bibh-vid__sheet h3 { font-size: 23px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0 0 4px; }
.bibh-vid__sheet .note { font-size: 13.5px; font-weight: 600; color: var(--bibh-text-light, #6f8088); margin: 0 0 20px; line-height: 1.5; }
.bibh-vid__scroll { overflow: auto; margin: 0 -28px; padding: 0 28px; flex: 1 1 auto; }

/* Player. */
.bibh-vid__sheet--player { max-width: 980px; padding: 0; overflow: hidden; background: #0e1c22; }
.bibh-vid__frame { aspect-ratio: 16/9; background: #0e1c22; }
.bibh-vid__frame .bibh-video-embed { padding-top: 0 !important; height: 100%; }
.bibh-vid__pmeta {
    background: #fff; padding: 16px 22px; display: flex; align-items: center; gap: 16px;
    justify-content: space-between; flex-wrap: wrap;
}
.bibh-vid__pmeta h3 { margin: 0 0 6px; font-size: 19px; }
.bibh-vid__pacts { display: flex; gap: 10px; flex-wrap: wrap; }

/* Class list. */
.bibh-vid__sel { background: var(--vid-light); border-radius: 20px; padding: 12px 16px; margin-bottom: 18px; font-size: 13px; font-weight: 800; color: var(--vid-d); }
.bibh-vid__list { border: 1.5px solid var(--bibh-border, #e3ecf1); border-radius: 22px; overflow: hidden; margin-bottom: 18px; }
.bibh-vid__row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #eef2f5; cursor: pointer; }
.bibh-vid__row:last-child { border-bottom: 0; }
.bibh-vid__row:hover { background: #f8fbfc; }
.bibh-vid__row .box { width: 21px; height: 21px; flex: none; border-radius: 7px; border: 2px solid #cdd8de; display: grid; place-items: center; background: #fff; }
.bibh-vid__row.is-on .box { background: var(--vid); border-color: var(--vid); }
.bibh-vid__row .box svg { opacity: 0; }
.bibh-vid__row.is-on .box svg { opacity: 1; }
.bibh-vid__row .rn { font-size: 14.5px; font-weight: 800; color: var(--bibh-dark, #203D48); }
.bibh-vid__row .rs { font-size: 12px; font-weight: 600; color: var(--bibh-text-light, #6f8088); margin-left: auto; }

.bibh-vid__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.bibh-vid__fields label { display: block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: var(--bibh-text-light, #6f8088); margin-bottom: 7px; }
.bibh-vid__fields label span { text-transform: none; font-weight: 600; }
.bibh-vid__fields input {
    width: 100%; box-sizing: border-box; padding: 12px 15px; border: 1.5px solid var(--bibh-border, #e3ecf1);
    border-radius: 18px; background: #f6f9fb; font-family: inherit; font-weight: 700; font-size: 14px;
    color: var(--bibh-dark, #203D48); outline: none;
}
.bibh-vid__fields input:focus { border-color: var(--vid); background: #fff; }

.bibh-vid__acts2 { display: flex; gap: 10px; padding-top: 18px; border-top: 1px solid #eef2f5; margin-top: auto; flex: none; }
.bibh-vid__acts2 > * { flex: 1; }
.bibh-vid__ghost {
    background: #fff; border: 1.5px solid var(--bibh-border, #e3ecf1); border-radius: var(--bibh-radius-md, 30px);
    padding: 13px; font-family: inherit; font-weight: 800; font-size: 14.5px;
    color: var(--bibh-dark, #203D48); cursor: pointer; box-shadow: none; min-width: 0;
}
.bibh-vid__empty {
    background: #fff; border-radius: var(--bibh-radius-md, 30px); box-shadow: var(--bibh-shadow-lg, 0 8px 30px rgba(32,61,72,.15));
    padding: 34px; text-align: center; max-width: 560px; margin: 0 auto;
}
.bibh-vid__empty b { font-size: 17px; font-weight: 900; color: var(--bibh-dark, #203D48); }

@media (max-width: 860px) {
    .bibh-vid__back, .bibh-vid__acts { position: static; }
    .bibh-vid__acts { justify-content: center; margin: 12px auto 0; }
    .bibh-vid__inner { padding-top: 16px; }
    .bibh-vid__fields { grid-template-columns: 1fr; }
    .bibh-vid__pmeta { justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAPTERS FOR THIS CLASS  (teacher dashboard, T5 redesign)

   Replaces the old "My Chapters" list + checkbox picker. Two parts:
   1. .bibh-tch      the block on the dashboard: navy pinned cards + one
                     dashed "pin a chapter" tile that never runs out, because
                     there is no cap on how many chapters a teacher pins.
   2. .bibh-tchs     the sheet, which is TWO panes in one box: the searchable
                     chapter list, and that chapter rendered exactly as a
                     student sees it. Tapping a row opens the preview; the Pin
                     button beside it is a separate control so neither action
                     swallows the other.

   House rules honoured here: every button is 30px, and status is carried by a
   card's own fill or a chip, never an edge stripe.
   ══════════════════════════════════════════════════════════════════════════ */
.bibh-tch { padding: 21px 23px; }
.bibh-tch__head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 5px; }
.bibh-tch__head h3 { font-size: 20px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0; }
.bibh-tch__sub { font-size: 13px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin: 0 0 16px; line-height: 1.5; }

.bibh-tch__browse {
    margin-left: auto; display: inline-flex; align-items: center;
    background: #94e3ff; border: 1.5px solid #94e3ff; color: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-pill, 30px); padding: 10px 20px;
    font-family: inherit; font-weight: 800; font-size: 13.5px; line-height: 1.2; cursor: pointer;
    box-shadow: 0 4px 0 #5fbcdc; transition: transform .12s, box-shadow .12s, background .15s;
}
.bibh-tch__browse:hover  { background: #a8e9ff; }
.bibh-tch__browse:active { transform: translateY(3px); box-shadow: 0 1px 0 #5fbcdc; }

.bibh-tch__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 13px; }
.bibh-tch__slot {
    position: relative; border-radius: 24px; padding: 19px 21px; min-height: 142px;
    display: flex; flex-direction: column; background: var(--bibh-dark, #203D48); color: #fff;
}
.bibh-tch__no {
    align-self: flex-start; background: #ffde5c; color: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-pill, 30px); padding: 5px 13px; margin-bottom: 10px;
    font-size: 11px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
}
.bibh-tch__slot h4 { font-size: 18.5px; font-weight: 900; margin: 0 0 7px; line-height: 1.2; color: #fff; }
.bibh-tch__meta { font-size: 12px; font-weight: 700; color: #9dbac6; }
.bibh-tch__foot {
    margin-top: auto; padding-top: 12px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px; color: var(--bibh-secondary, #91D1DB);
}
.bibh-tch__unpin {
    position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 14px; font-weight: 900;
    cursor: pointer; line-height: 1; font-family: inherit;
}
.bibh-tch__unpin:hover { background: rgba(255,255,255,.28); }

.bibh-tch__slot--new {
    background: #fff; border: 2.5px dashed #cfdde3; color: var(--bibh-dark, #203D48);
    align-items: center; justify-content: center; text-align: center; cursor: pointer;
    font-family: inherit;
}
.bibh-tch__slot--new:hover { border-color: #5fbcdc; background: #f7fcfd; }
.bibh-tch__plus {
    width: 42px; height: 42px; border-radius: 50%; background: #eef7fa;
    display: grid; place-items: center; font-size: 22px; font-weight: 900; margin-bottom: 9px;
}
.bibh-tch__slot--new b { font-size: 15px; font-weight: 900; }
.bibh-tch__newsub { font-size: 12px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin-top: 4px; max-width: 24ch; }

/* ── The sheet ─────────────────────────────────────────────────────────── */
.bibh-tchs { position: fixed; inset: 0; z-index: 100000; }
.bibh-tchs[hidden] { display: none; }
.bibh-tchs__veil { position: absolute; inset: 0; background: rgba(32,61,72,.55); }
.bibh-tchs__box {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 900px);
    background: #fff; border-radius: 30px; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(32,61,72,.34);
}
.bibh-tchs__pane { display: none; flex-direction: column; min-height: 0; flex: 1; }
.bibh-tchs__pane.is-on { display: flex; }

.bibh-tchs__head { padding: 21px 24px 15px; border-bottom: 1.5px solid #f0f5f7; }
.bibh-tchs__headtop { display: flex; align-items: center; gap: 12px; }
.bibh-tchs__headtop h3 { font-size: 21px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0; line-height: 1.2; }
.bibh-tchs__x {
    width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f2f7f9; flex: none;
    color: var(--bibh-dark, #203D48); font-size: 16px; font-weight: 900; cursor: pointer;
    font-family: inherit; line-height: 1;
}
.bibh-tchs__x:hover { background: #e5eff2; }
.bibh-tchs__headtop h3 + .bibh-tchs__x,
.bibh-tchs__headtop > .bibh-tchs__x:last-child { margin-left: auto; }
.bibh-tchs__x--back { margin-left: 0; }

.bibh-tchs__count {
    display: inline-block; background: var(--bibh-dark, #203D48); color: #fff;
    border-radius: var(--bibh-radius-pill, 30px); padding: 6px 14px; margin-top: 11px;
    font-size: 11.5px; font-weight: 900;
}
.bibh-tchs__count.is-some { background: #ffde5c; color: var(--bibh-dark, #203D48); }
.bibh-tchs__search {
    margin-top: 11px; width: 100%; border: 1.5px solid var(--bibh-border, #e4eaee);
    border-radius: var(--bibh-radius-pill, 30px); padding: 12px 18px;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--bibh-dark, #203D48); outline: none;
}
.bibh-tchs__search:focus { border-color: #5fbcdc; }
.bibh-tchs__hint { font-size: 12.5px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin: 11px 0 0; line-height: 1.5; }

.bibh-tchs__dacts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.bibh-tchs__ro {
    background: #fff4d6; border-radius: var(--bibh-radius-pill, 30px); padding: 8px 15px;
    font-size: 12px; font-weight: 800; color: #7a6a3e;
}
.bibh-tchs__dpin {
    margin-left: auto; background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee);
    color: var(--bibh-dark, #203D48); border-radius: var(--bibh-radius-pill, 30px);
    padding: 10px 20px; font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .15s;
}
.bibh-tchs__dpin:hover { border-color: #5fbcdc; }
.bibh-tchs__dpin.is-on { background: #ffde5c; border-color: #ffde5c; box-shadow: 0 4px 0 #d9b53a; }
.bibh-tchs__dpin.is-on:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9b53a; }

.bibh-tchs__list { overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.bibh-tchs__none { padding: 26px; text-align: center; font-size: 14px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); }

/* A row carries TWO actions: the body opens the student view, Pin pins. */
.bibh-tchs__row {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 7px;
    border-radius: 22px; background: #f6fafb; border: 1.5px solid #eaf1f4;
}
.bibh-tchs__row:hover { background: #eaf4f7; }
.bibh-tchs__rowbody {
    flex: 1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 13px; align-items: center; background: none; border: 0; padding: 5px 2px 5px 5px;
    cursor: pointer; text-align: left; font-family: inherit;
}
.bibh-tchs__n {
    width: 44px; height: 44px; border-radius: 50%; background: #e4eef2;
    color: var(--bibh-dark, #203D48); display: grid; place-items: center;
    font-size: 15px; font-weight: 900;
}
.bibh-tchs__t { font-size: 14.5px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.25; }
.bibh-tchs__t span { display: block; font-size: 11.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); margin-top: 3px; }
.bibh-tchs__peek {
    font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px;
    color: var(--bibh-text-muted, #6f8088); white-space: nowrap; padding-right: 6px;
    opacity: 0; transition: opacity .14s;
}
.bibh-tchs__row:hover .bibh-tchs__peek { opacity: 1; }
.bibh-tchs__pin {
    flex: none; background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee);
    border-radius: var(--bibh-radius-pill, 30px); padding: 10px 18px; font-family: inherit;
    font-size: 12.5px; font-weight: 900; color: var(--bibh-dark, #203D48);
    white-space: nowrap; cursor: pointer;
}
.bibh-tchs__pin:hover { border-color: #5fbcdc; }
.bibh-tchs__row.is-on { background: var(--bibh-dark, #203D48); border-color: var(--bibh-dark, #203D48); }
.bibh-tchs__row.is-on .bibh-tchs__t { color: #fff; }
.bibh-tchs__row.is-on .bibh-tchs__t span,
.bibh-tchs__row.is-on .bibh-tchs__peek { color: #9dbac6; }
.bibh-tchs__row.is-on .bibh-tchs__n { background: #ffde5c; color: var(--bibh-dark, #203D48); }
.bibh-tchs__row.is-on .bibh-tchs__pin { background: #ffde5c; border-color: #ffde5c; color: var(--bibh-dark, #203D48); }

.bibh-tchs__foot {
    padding: 15px 24px; border-top: 1.5px solid #f0f5f7;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bibh-tchs__foothint { font-size: 12.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); }
.bibh-tchs__save {
    margin-left: auto; background: #ffde5c; border: 1.5px solid #ffde5c;
    color: var(--bibh-dark, #203D48); border-radius: var(--bibh-radius-pill, 30px);
    padding: 11px 22px; font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 0 #d9b53a; transition: transform .12s, box-shadow .12s, background .15s;
}
.bibh-tchs__save:hover  { background: #ebcc55; }
.bibh-tchs__save:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9b53a; }

/* ── The student mirror inside the detail pane ─────────────────────────── */
.bibh-tchs__hm { border: 1.5px solid var(--bibh-border, #e4eaee); border-radius: 24px; overflow: hidden; background: #fff; }
.bibh-tchs__hmhead {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px 54px; gap: 14px;
    align-items: center; padding: 16px 20px; background: #f6fafb;
}
.bibh-tchs__hmtitle { font-size: 16.5px; font-weight: 900; color: var(--bibh-dark, #203D48); line-height: 1.25; }
.bibh-tchs__hmflag {
    display: inline-block; background: #ffde5c; color: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-pill, 30px); padding: 4px 12px; margin-left: 9px;
    font-size: 10.5px; font-weight: 900; vertical-align: middle;
}
.bibh-tchs__hmbar { height: 10px; border-radius: var(--bibh-radius-pill, 30px); background: #e3ebee; overflow: hidden; }
.bibh-tchs__hmbar i { display: block; height: 100%; border-radius: var(--bibh-radius-pill, 30px); background: var(--bibh-dark, #203D48); }
.bibh-tchs__hmpct { font-size: 15px; font-weight: 900; text-align: right; color: var(--bibh-dark, #203D48); }
.bibh-tchs__hmbody { padding: 18px 20px 20px; }
.bibh-tchs__hmlbl {
    font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px;
    color: var(--bibh-text-muted, #6f8088); margin-bottom: 10px;
}
.bibh-tchs__hmtopics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bibh-tchs__hmtopic {
    display: flex; align-items: center; gap: 9px; background: #f6fafb;
    border: 1.5px solid #eaf1f4; border-radius: var(--bibh-radius-pill, 30px); padding: 9px 15px;
}
.bibh-tchs__hmdot { width: 12px; height: 12px; border-radius: 50%; background: var(--bibh-dark, #203D48); flex: none; }
.bibh-tchs__hmtname { font-size: 13px; font-weight: 800; color: var(--bibh-dark, #203D48); }
.bibh-tchs__hmtm { font-size: 12px; font-weight: 900; color: var(--bibh-text-muted, #6f8088); }

.bibh-tchs__hmtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
/* Astra repaints bare <button> on hover/focus/active, which turned the label
   white on the light-green Flashcards tile. Colour is pinned across every
   state; only the lift is left to the hover rule. */
.bibh-tchs__tile,
.bibh-tchs__tile:hover,
.bibh-tchs__tile:focus,
.bibh-tchs__tile:active {
    border: 0; border-radius: 22px; padding: 18px 16px; text-align: center;
    color: var(--bibh-dark, #203D48); min-height: 96px; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    transition: transform .12s, box-shadow .12s;
}
.bibh-tchs__tile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(32,61,72,.16); }
.bibh-tchs__tile:disabled,
.bibh-tchs__tile:disabled:hover { cursor: default; color: #9aa9b0; }
.bibh-tchs__tile:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
.bibh-tchs__tileic { font-size: 22px; line-height: 1; }
.bibh-tchs__tilet { font-size: 14.5px; font-weight: 900; }
.bibh-tchs__tilexp { font-size: 11.5px; font-weight: 800; opacity: .72; }
/* Tile fills reuse the student home's own tile classes. */
.bibh-tchs__tile.t-quiz  { background: #94e3ff; }
.bibh-tchs__tile.t-flash { background: #d6e492; }
.bibh-tchs__tile.t-video { background: #f49b53; }
.bibh-tchs__tile.t-past  { background: #91d2dc; }
.bibh-tchs__tile.t-lab   { background: #f7da6a; }
.bibh-tchs__tile.t-soon  { background: #f2f6f8; color: #9aa9b0; }

.bibh-tchs__kt { margin-top: 18px; background: #f6fafb; border-radius: 20px; padding: 15px 18px; }
.bibh-tchs__kt h4 { font-size: 14px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0 0 4px; }
.bibh-tchs__kt p  { font-size: 12.5px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin: 0; }

@media (max-width: 700px) {
    .bibh-tchs__hmhead { grid-template-columns: 1fr; }
    .bibh-tchs__row { flex-wrap: wrap; }
    .bibh-tchs__peek { display: none; }
}

/* ── Preview activities, opened from a tile in the student view ─────────
   A teacher gets the real content and the real behaviour. The band never
   leaves the header, because the one thing a teacher must never wonder is
   whether poking around in here did something to a student's record.
   ─────────────────────────────────────────────────────────────────────── */
.bibh-tchs__act { background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee); border-radius: 24px; overflow: hidden; }
.bibh-tchs__acthead {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; background: #f6fafb; border-bottom: 1.5px solid var(--bibh-border, #e4eaee);
}
.bibh-tchs__acthead h4 { font-size: 16px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0; }
.bibh-tchs__nosave {
    margin-left: auto; background: #fff4d6; border-radius: var(--bibh-radius-pill, 30px);
    padding: 8px 16px; font-size: 11.5px; font-weight: 900; color: #7a6a3e; white-space: nowrap;
}
.bibh-tchs__actback,
.bibh-tchs__actback:hover,
.bibh-tchs__actback:focus {
    background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee);
    border-radius: var(--bibh-radius-pill, 30px); padding: 9px 16px; font-family: inherit;
    font-size: 12.5px; font-weight: 900; color: var(--bibh-dark, #203D48); cursor: pointer;
}
.bibh-tchs__actback:hover { border-color: #5fbcdc; }
.bibh-tchs__actbody { padding: 20px; }
.bibh-tchs__plain { font-size: 14px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); line-height: 1.55; max-width: 64ch; margin: 0 0 12px; }
.bibh-tchs__plain b { color: var(--bibh-dark, #203D48); }

/* ── Quiz: the student's own immersive player ───────────────────────────
   Lifted from student-take-quiz.php so a teacher recognises the screen at a
   glance: the #ADE7FF stage, the white question card, and the chunky arcade
   answer tiles with their stacked edge, cycling the four dashboard activity
   colours. Astra repaints bare <button>, so colour is pinned on every state. */
.bibh-tchs__bq {
    background: #ADE7FF; border-radius: 24px; padding: 26px 22px 22px;
    margin: -4px -4px 0; max-width: none;
}
.bibh-tchs__bqcard {
    background: #fff; border-radius: 30px; box-shadow: 0 10px 30px rgba(32,61,72,.14);
    padding: 26px 30px; margin-bottom: 20px; text-align: center;
}
.bibh-tchs__bqtag {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: #346b5d; background: #e8f5f0;
    border-radius: var(--bibh-radius-pill, 30px); padding: 5px 14px; margin-bottom: 14px;
}
.bibh-tchs__bqq {
    font-size: 24px; font-weight: 800; line-height: 1.35; color: var(--bibh-dark, #203D48); margin: 0;
}
.bibh-tchs__bqanswers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 16px; }
.bibh-tchs__bqanswers.is-tf { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.bibh-tchs__bqopt,
.bibh-tchs__bqopt:hover,
.bibh-tchs__bqopt:focus,
.bibh-tchs__bqopt:active {
    position: relative; border: none; border-radius: 50px; padding: 22px 24px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; cursor: pointer; color: #fff; font-family: inherit;
    font-size: 18px; font-weight: 800; line-height: 1.15; user-select: none;
    transform: translateY(0);
    transition: transform .11s cubic-bezier(.215,.61,.355,1), box-shadow .11s cubic-bezier(.215,.61,.355,1), opacity .18s, 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,.42), 0 18px 34px rgba(0,0,0,.26);
}
.bibh-tchs__bqopt.c0 { background: var(--bibh-act-quiz,  #00b2ff); --edge: #0080c2; }
.bibh-tchs__bqopt.c1 { background: var(--bibh-act-flash, #f32201); --edge: #b81800; }
.bibh-tchs__bqopt.c2 { background: var(--bibh-act-video, #049f84); --edge: #037058; }
.bibh-tchs__bqopt.c3 { background: var(--bibh-act-past,  #ffa700); --edge: #cc8400; }
.bibh-tchs__bqopt:not(.is-locked):hover { transform: translateY(-3px); filter: brightness(1.06); }
.bibh-tchs__bqopt:not(.is-locked):active {
    transform: translateY(8px);
    box-shadow: 0 2px var(--edge), 0 4px 10px rgba(0,0,0,.4);
}
.bibh-tchs__bqopt.is-locked { pointer-events: none; }
.bibh-tchs__bqopt.is-dim    { opacity: .45; filter: saturate(.5); }
.bibh-tchs__bqopt.is-right,
.bibh-tchs__bqopt.is-right:hover { background: #049f84; --edge: #037058; }
.bibh-tchs__bqopt.is-wrong,
.bibh-tchs__bqopt.is-wrong:hover { background: #e0402a; --edge: #b5301f; }
.bibh-tchs__bqanswers.is-tf .bibh-tchs__bqopt { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
.bibh-tchs__bqopttx { display: block; }

.bibh-tchs__bqfoot { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.bibh-tchs__bqmsg { font-size: 14px; font-weight: 800; color: var(--bibh-dark, #203D48); }
.bibh-tchs__bqmsg.is-ok { color: #0b6b4f; }
.bibh-tchs__bqmsg.is-no { color: #b5301f; }
.bibh-tchs__bqsol {
    flex: 1 0 100%; background: rgba(255,255,255,.7); border-radius: 20px; padding: 13px 18px;
    font-size: 13.5px; font-weight: 700; color: var(--bibh-dark, #203D48); line-height: 1.5;
}
.bibh-tchs__pqnext,
.bibh-tchs__pqnext:hover,
.bibh-tchs__pqnext:focus {
    margin-left: auto; background: #F3D76A; border: 1.5px solid #F3D76A;
    color: var(--bibh-dark, #203D48); border-radius: var(--bibh-radius-pill, 30px);
    padding: 11px 22px; font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
    box-shadow: 0 4px 0 #d4b830;
}
.bibh-tchs__pqnext:hover  { background: #ecce55; }
.bibh-tchs__pqnext:active { transform: translateY(3px); box-shadow: 0 1px 0 #d4b830; }

/* ── Flashcards: the student's stacked deck and 3D flip ─────────────────── */
.bibh-tchs__fcstage { padding: 6px 0 2px; }
.bibh-tchs__fcdeck  { position: relative; max-width: 460px; margin: 20px auto 34px; height: 260px; }
.bibh-tchs__fcstack {
    position: absolute; inset: 0; border-radius: 30px; background: #fff;
    box-shadow: 0 8px 20px rgba(120,20,5,.12); z-index: 1; display: block;
}
.bibh-tchs__fcstack.s1 { transform: translate(6px, 7px) rotate(1.4deg);   background: #fff4f2; }
.bibh-tchs__fcstack.s2 { transform: translate(12px, 14px) rotate(2.6deg); background: #ffe9e5; }
.bibh-tchs__fcstack.s3 { transform: translate(-6px, 6px) rotate(-1.4deg); background: #fff4f2; }
.bibh-tchs__fccard  { position: relative; width: 100%; height: 100%; cursor: pointer; perspective: 1400px; z-index: 3; }
.bibh-tchs__fcinner {
    position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.3,.7,.3,1);
}
.bibh-tchs__fccard.is-flipped .bibh-tchs__fcinner { transform: rotateY(180deg); }
.bibh-tchs__fcface {
    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: 34px 36px; border: 1px solid #fff; overflow: hidden;
}
.bibh-tchs__fcback { transform: rotateY(180deg); }
.bibh-tchs__fcside {
    position: absolute; top: 18px; left: 22px; font-size: 11px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase; color: #b81800;
}
.bibh-tchs__fcback .bibh-tchs__fcside { color: #346b5d; }
.bibh-tchs__fcterm { font-size: 28px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.2; margin: 0; }
.bibh-tchs__fcdef  { font-size: 18px; font-weight: 500; color: #3D3D3D; line-height: 1.5; margin: 0; }
.bibh-tchs__fctap  { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #8a7d7a; }
.bibh-tchs__fchint { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); }
.bibh-tchs__fcnav  { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.bibh-tchs__fcnav .bibh-tchs__pqnext { margin-left: 0; }

/* videos + past papers */
.bibh-tchs__vg { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.bibh-tchs__vc {
    background: #f6fafb; border: 1.5px solid #eaf1f4; border-radius: 20px; overflow: hidden;
    cursor: pointer; text-align: left; font-family: inherit; padding: 0; display: block; width: 100%;
}
.bibh-tchs__vc:hover { border-color: #5fbcdc; }
.bibh-tchs__vthumb {
    display: grid; place-items: center; aspect-ratio: 16 / 9;
    background: var(--bibh-dark, #203D48); color: #fff; font-size: 28px;
}
.bibh-tchs__vt { display: block; padding: 12px 14px; font-size: 13.5px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.3; }
.bibh-tchs__vt span { display: block; font-size: 11.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); margin-top: 4px; }
.bibh-tchs__vplay { border-radius: 20px; overflow: hidden; margin-bottom: 14px; background: #000; }
.bibh-tchs__vplay iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.bibh-tchs__pp { display: flex; flex-direction: column; gap: 9px; }
.bibh-tchs__ppr { background: #f6fafb; border: 1.5px solid #eaf1f4; border-radius: 20px; padding: 14px 17px; }
.bibh-tchs__pprt { font-size: 14px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.35; }
.bibh-tchs__pprt span { display: block; font-size: 11.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); margin-top: 3px; }
.bibh-tchs__ppr { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bibh-tchs__ppimg { max-width: 100%; height: auto; border-radius: 14px; border: 1.5px solid var(--bibh-border, #e4eaee); background: #fff; }
.bibh-tchs__ppimg[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   QUIZ REVIEW  (?bibh_view=quiz-review&id=<classroom>&quiz=<id>)

   The class list keeps its place on the left while the answers open beside it,
   so a teacher can walk down the room without losing where they were.

   "Whole class" is the view that earns its keep: the same question cards, but
   each option filled with the share of the room that picked it. A wrong option
   only lights up when at least two students fell for it and it is the top wrong
   pick, because a 1-1-1 spread is noise, not a misconception.

   Status is carried by the card's own fill and a chip. No edge stripes.
   ══════════════════════════════════════════════════════════════════════════ */
.bibh-qr__banner { background: var(--bibh-dark, #203D48); border-radius: 28px; padding: 22px 24px; margin-bottom: 16px; }
.bibh-qr__btop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bibh-qr__title { font-size: 29px; font-weight: 900; color: #fff; letter-spacing: -.4px; line-height: 1.1; }
.bibh-qr__title span { display: block; font-size: 13px; font-weight: 600; color: #9dbac6; margin-top: 5px; letter-spacing: 0; }
.bibh-qr__acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bibh-tdash__btn-assign,
.bibh-tdash__btn-assign:hover,
.bibh-tdash__btn-assign:focus,
.bibh-tdash__btn-assign:active {
    background: #94e3ff; border: 1.5px solid #94e3ff; color: var(--bibh-dark, #203D48);
    border-radius: var(--bibh-radius-pill, 30px); padding: 11px 22px;
    font-family: inherit; font-weight: 800; font-size: 14.5px; line-height: 1.2; cursor: pointer;
    box-shadow: 0 4px 0 #5fbcdc; transition: transform .12s, box-shadow .12s, background .15s;
}
.bibh-tdash__btn-assign:hover  { background: #a8e9ff; }
.bibh-tdash__btn-assign:active { transform: translateY(3px); box-shadow: 0 1px 0 #5fbcdc; }

.bibh-qr__stats { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.bibh-qr__stat { background: rgba(255,255,255,.1); border-radius: 20px; padding: 10px 18px; text-align: center; min-width: 88px; }
.bibh-qr__stat b { display: block; font-size: 20px; font-weight: 900; color: #fff; }
.bibh-qr__stat span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #9dbac6; }

.bibh-qr__quizbar { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 3px; }
.bibh-qr__quizlbl { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--bibh-text-muted, #6f8088); flex: none; }
.bibh-qr__quiz,
.bibh-qr__quiz:hover,
.bibh-qr__quiz:visited {
    flex: none; border: 1.5px solid var(--bibh-border, #e4eaee); background: #fff;
    border-radius: var(--bibh-radius-pill, 30px); padding: 10px 17px; text-decoration: none;
    font-size: 13px; font-weight: 800; color: var(--bibh-dark, #203D48); white-space: nowrap;
}
.bibh-qr__quiz:hover { border-color: #5fbcdc; }
.bibh-qr__quiz small { display: block; font-size: 10.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); margin-top: 2px; }
.bibh-qr__quiz.is-on, .bibh-qr__quiz.is-on:hover { background: var(--bibh-dark, #203D48); border-color: var(--bibh-dark, #203D48); color: #fff; }
.bibh-qr__quiz.is-on small { color: #9dbac6; }

.bibh-qr__split { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.bibh-qr__side, .bibh-qr__main { padding: 19px; }
.bibh-qr__sidehead { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.bibh-qr__sidehead h3 { font-size: 17px; font-weight: 900; color: var(--bibh-dark, #203D48); margin: 0; }
.bibh-qr__sidehead span { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--bibh-text-muted, #6f8088); }
.bibh-qr__list { display: flex; flex-direction: column; gap: 7px; }

.bibh-qr__s {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center;
    padding: 11px 14px; border-radius: var(--bibh-radius-pill, 30px); background: #f6fafb;
    border: 1.5px solid #eaf1f4; cursor: pointer; text-align: left; width: 100%; font-family: inherit;
}
.bibh-qr__s:hover { background: #eaf4f7; }
.bibh-qr__s.is-all { background: #eef7fa; border-color: #cfe8ef; }
.bibh-qr__s.is-on, .bibh-qr__s.is-on:hover { background: var(--bibh-dark, #203D48); border-color: var(--bibh-dark, #203D48); }
.bibh-qr__s.is-on .bibh-qr__nm, .bibh-qr__s.is-on .bibh-qr__pc { color: #fff; }
.bibh-qr__s.is-on .bibh-qr__nm span { color: #9dbac6; }
.bibh-qr__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 900; }
.bibh-qr__nm { font-size: 14px; font-weight: 800; color: var(--bibh-dark, #203D48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibh-qr__nm span { display: block; font-size: 11px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin-top: 1px; }
.bibh-qr__pc { font-size: 15px; font-weight: 900; text-align: right; }
.bibh-qr__pc.is-strong, .bibh-qr__big.is-strong { color: #1d7a52; }
.bibh-qr__pc.is-build,  .bibh-qr__big.is-build  { color: #b8791a; }
.bibh-qr__pc.is-weak,   .bibh-qr__big.is-weak   { color: #c4442e; }
.bibh-qr__pc.is-none { color: #c3ced4; }

.bibh-qr__head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 15px; }
.bibh-qr__rav { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 900; flex: none; }
.bibh-qr__rname { font-size: 20px; font-weight: 900; color: var(--bibh-dark, #203D48); line-height: 1.15; }
.bibh-qr__rname span { display: block; font-size: 12.5px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin-top: 3px; }
.bibh-qr__nav { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.bibh-qr__big { font-size: 26px; font-weight: 900; }
.bibh-qr__nb {
    width: 38px; height: 38px; border-radius: var(--bibh-radius-pill, 30px);
    border: 1.5px solid var(--bibh-border, #e4eaee); background: #fff;
    font-size: 15px; font-weight: 900; color: var(--bibh-dark, #203D48); cursor: pointer; font-family: inherit;
}
.bibh-qr__nb:hover:not([disabled]) { border-color: #5fbcdc; background: #f4fbfd; }
.bibh-qr__nb[disabled] { opacity: .35; cursor: default; }

.bibh-qr__tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1.5px solid #f0f5f7; }
.bibh-qr__f {
    border: 1.5px solid var(--bibh-border, #e4eaee); background: #fff;
    border-radius: var(--bibh-radius-pill, 30px); padding: 8px 15px; font-family: inherit;
    font-size: 12px; font-weight: 800; color: var(--bibh-dark, #203D48); cursor: pointer;
}
.bibh-qr__f:hover { border-color: #5fbcdc; }
.bibh-qr__f.is-on, .bibh-qr__f.is-on:hover { background: var(--bibh-dark, #203D48); border-color: var(--bibh-dark, #203D48); color: #fff; }

.bibh-qr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 13px; }
.bibh-qr__qcard { background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee); border-radius: 22px; padding: 15px 17px; }
.bibh-qr__qcard.is-right { background: #f2fbf6; border-color: #bfe6d2; }
.bibh-qr__qcard.is-wrong { background: #fdf5f4; border-color: #f3cdc6; }
.bibh-qr__qcard.is-skip  { background: #f7f9fa; border-color: #dde5e9; }
.bibh-qr__qcard.is-mid   { background: #fff9ec; border-color: #f2e0b6; }
.bibh-qr__qmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.bibh-qr__qnum { font-size: 10.5px; font-weight: 900; color: var(--bibh-text-muted, #6f8088); }
.bibh-qr__qpill { font-size: 10px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; padding: 4px 9px; border-radius: 14px; background: #eaf4f8; color: #37718c; }
.bibh-qr__qpill.is-lo { background: #eef4ec; color: #4a6b52; }
.bibh-qr__qstatus { margin-left: auto; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; padding: 4px 10px; border-radius: 14px; color: #fff; white-space: nowrap; background: #c3ced4; }
.bibh-qr__qcard.is-right .bibh-qr__qstatus { background: #1d7a52; }
.bibh-qr__qcard.is-wrong .bibh-qr__qstatus { background: #c4442e; }
.bibh-qr__qcard.is-mid   .bibh-qr__qstatus { background: #b8791a; }
.bibh-qr__qtitle { font-size: 13.5px; font-weight: 800; color: var(--bibh-dark, #203D48); line-height: 1.35; margin-bottom: 11px; }

.bibh-qr__opts { display: flex; flex-direction: column; gap: 6px; }
.bibh-qr__o {
    position: relative; display: flex; align-items: center; gap: 9px; overflow: hidden;
    border: 1.5px solid var(--bibh-border, #e4eaee); border-radius: 14px; padding: 8px 11px;
    background: #fff; font-size: 12.5px; font-weight: 700; color: var(--bibh-dark, #203D48);
}
.bibh-qr__mk { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; background: #d8e0e4; position: relative; z-index: 1; }
.bibh-qr__tx { position: relative; z-index: 1; }
.bibh-qr__o.is-correct { border-color: #1d7a52; background: #eaf7f0; }
.bibh-qr__o.is-correct .bibh-qr__mk { background: #1d7a52; }
.bibh-qr__o.is-picked { border-color: #c4442e; background: #fdeeec; }
.bibh-qr__o.is-picked .bibh-qr__mk { background: #c4442e; }
.bibh-qr__tag { margin-left: auto; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; color: var(--bibh-text-muted, #6f8088); position: relative; z-index: 1; white-space: nowrap; padding-left: 8px; }
.bibh-qr__o.is-correct .bibh-qr__tag { color: #1d7a52; }
.bibh-qr__o.is-picked  .bibh-qr__tag { color: #c4442e; }
.bibh-qr__fill { position: absolute; left: 0; top: 0; bottom: 0; background: #e9eff2; z-index: 0; }
.bibh-qr__o.is-correct .bibh-qr__fill { background: #cdeddd; }
.bibh-qr__o.is-hot .bibh-qr__fill { background: #fadfda; }
.bibh-qr__n { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--bibh-dark, #203D48); position: relative; z-index: 1; padding-left: 8px; }
.bibh-qr__blank { font-size: 11.5px; font-weight: 800; color: var(--bibh-text-muted, #6f8088); padding: 4px 2px 0; }

.bibh-qr__empty { background: #f2fbf6; border-radius: 22px; padding: 22px; text-align: center; font-size: 14px; font-weight: 800; color: #1d7a52; }
.bibh-qr__empty.is-plain { background: #f7f9fa; color: var(--bibh-dark, #203D48); }
.bibh-qr__empty span { display: block; font-size: 12.5px; font-weight: 600; color: var(--bibh-text-muted, #6f8088); margin-top: 5px; }

.bibh-qr__across { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bibh-qr__across:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1.5px solid #f0f5f7; }
.bibh-qr__acrosstxt { font-size: 13px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); }
.bibh-qr__acrosstxt b { color: var(--bibh-dark, #203D48); }
.bibh-qr__acrossbtn,
.bibh-qr__acrossbtn:hover,
.bibh-qr__acrossbtn:visited {
    margin-left: auto; background: #ffde5c; border: 1.5px solid #ffde5c; text-decoration: none;
    color: var(--bibh-dark, #203D48); border-radius: var(--bibh-radius-pill, 30px);
    padding: 10px 20px; font-size: 13px; font-weight: 900; box-shadow: 0 4px 0 #d9b53a;
}
.bibh-qr__acrossbtn:hover { background: #ebcc55; }

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

/* Reteach: sits at the end of the filter row, because what the filter leaves on
   screen is exactly what gets set again. */
.bibh-qr__reteach,
.bibh-qr__reteach:hover,
.bibh-qr__reteach:focus {
    margin-left: auto; background: #ffde5c; border: 1.5px solid #ffde5c;
    color: var(--bibh-dark, #203D48); border-radius: var(--bibh-radius-pill, 30px);
    padding: 11px 22px; font-family: inherit; font-size: 14.5px; font-weight: 800;
    cursor: pointer; box-shadow: 0 4px 0 #d9b53a;
    transition: transform .12s, box-shadow .12s, background .15s;
}
.bibh-qr__reteach:hover  { background: #ebcc55; }
.bibh-qr__reteach:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9b53a; }
.bibh-qr__reteach:disabled { opacity: .55; cursor: default; transform: none; box-shadow: 0 4px 0 #d9b53a; }

.bibh-qr__toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 190%);
    z-index: 100001; background: var(--bibh-dark, #203D48); color: #fff;
    border-radius: var(--bibh-radius-pill, 30px); padding: 14px 26px; max-width: min(560px, calc(100vw - 32px));
    box-shadow: 0 12px 30px rgba(32,61,72,.3); opacity: 0; pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}
.bibh-qr__toast.is-show { transform: translate(-50%, 0); opacity: 1; }
.bibh-qr__toast span  { display: block; font-size: 14px; font-weight: 900; }
.bibh-qr__toast small { display: block; font-size: 12.5px; font-weight: 600; color: #9dbac6; margin-top: 3px; }