/**
 * 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 - reads as a button that opens the list.
   inline-flex, not inline-block: the chevron has to sit on the text baseline. */
.bibh-badge--students-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    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);
}


/* "Classroom Code:" carries the meaning, the code carries the value - so the
   label drops out of the monospace/tracking treatment that suits a code and
   would only make a sentence hard to read. */
.bibh-classroom-code__label {
    font-family: var(--bibh-font);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0.75;
}

/* 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;
}
/* ── T-02 / T-11 / T-12 (Gavin, 2026-08-31): the three hub tabs are keys ──
   Taken from Gavin's own mockup, values matched exactly rather than
   approximated: 15px/700, 9px 22px, a fully round pill, an inset white
   highlight along the top and a SOLID lower edge in a darker shade of the
   button's own colour. That lower edge is what makes them read as pressable
   rather than as flat labels, and it is the same mechanic the student hub's
   book buttons already use, so the two hubs now share one button language.

   The colours are the hub's existing activity tokens, not new ones: Gavin
   picked #00b2ff / #049f84 / #f32201 / #ffde5c, which are act-quiz, act-video,
   act-flash and act-terms. So "use more of our brand colours" turned out to
   mean "use the palette you already have", and the tokens are referenced here
   with his hex as the fallback.

   The light blue slider that used to wrap these is gone. It was the single
   biggest source of the blue Gavin wanted reduced, and three coloured keys do
   not need a container to group them.

   Active tab: his mockup draws all three raised and shows no current-page
   state at all, which loses something the slider did well. Rather than invent a
   colour, the active key uses HIS OWN pressed variant (inset dark, no lower
   edge, moved down onto it), so "you are here" reads as the key that is pushed
   in. Nothing about his palette or geometry changes. */
.bibh-tnav__toggle {
    display: inline-flex;
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex-wrap: wrap;
    justify-content: center;
}
.bibh-tnav__btn,
.bibh-tnav__btn:hover,
.bibh-tnav__btn:focus,
.bibh-tnav__btn:active,
.bibh-tnav__btn:visited {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 999px;
    padding: 9px 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    /* Reserve the 6px the lower edge occupies, so a pressed key moves DOWN onto
       its edge instead of the row shifting height under it. */
    margin-bottom: 6px;
    transition: transform .12s, box-shadow .12s, filter .15s;
}
.bibh-tnav__btn--hub       { background: var(--bibh-act-quiz,  #00b2ff); --edge: #0083c0; }
.bibh-tnav__btn--classroom { background: var(--bibh-act-video, #049f84); --edge: #027a65; }
.bibh-tnav__btn--exam      { background: var(--bibh-act-flash, #f32201); --edge: #b81a01; }

.bibh-tnav__btn { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 6px 0 var(--edge, #0083c0); }
.bibh-tnav__btn:hover { filter: brightness(1.07); }
.bibh-tnav__btn:active,
.bibh-tnav__btn.is-active {
    transform: translateY(6px);
    box-shadow: inset 0 2px 0 rgba(0,0,0,.12), 0 0 0 var(--edge, #0083c0);
}
.bibh-tnav__btn:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .bibh-tnav__btn { transition: none; }
}

/* Three coloured keys are wider than the slider they replace (about 430px
   against 205px), so they step down twice on the way to a phone rather than
   wrapping to two lines in the header. Measured, not guessed: see the widths
   noted against each step. */
@media (max-width: 900px) {                      /* ~370px of keys */
    .bibh-tnav__btn { font-size: 14px; padding: 8px 17px; }
    .bibh-tnav__toggle { gap: 8px; }
}
@media (max-width: 600px) {                      /* ~320px, fits a 360 screen */
    .bibh-tnav__btn { font-size: 13px; padding: 8px 13px; }
    .bibh-tnav__toggle { gap: 6px; }
}
@media (max-width: 360px) {                      /* ~285px */
    .bibh-tnav__btn { font-size: 12px; padding: 7px 10px; }
    .bibh-tnav__toggle { gap: 5px; }
}

/* ── 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) auto; gap: 8px 12px; }
	.bibh-tdash__assign > .bibh-tdash__due { 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; }
	/* The type step that used to sit here moved into the single ladder in the
	   header block further down (T-02), so the keys size in one place. */
}

/* 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 WAS 600, on this arithmetic: logo 175 + toggle 205 + account
   58 + a 20px gap is 458, so the row still fitted side-by-side on a tablet.
   Both terms of that sum have since changed. T-02 replaced the 205px slider
   with three keys measuring ~460px at their tablet step, and T-08 added a
   fourth control beside them, so the real sum at 768px is logo 200 + others 162
   + keys 452 + account 96 = 910 in a 768px row. It cannot fit, and what gave
   way was the key row: Exam Builder wrapped to a second line anywhere between
   601 and 921 (Ashton, audit 2026-09-01).

   So the stack now starts at 921 - the same breakpoint at which the nav already
   leaves the absolute centre, which is the point at which the header stops
   having room to centre anything. Below it the header is two rows: logo, the
   other-classes control and the account share the first, the keys take the
   second on their own.

   `: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: 921px) {
	.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; }
}

/* Launch fix L-13c: the header came out as THREE stacked rows on a phone -
   logo, then the toggle, then the account icon centred under it (Ashton,
   2026-08-31).

   L-13b above intended two rows: logo on the first, toggle and account sharing
   the second. What defeated it is `.bibh-tnav--header { width: 100% }` in the
   921px block further down: a full-width toggle leaves no room beside it, so
   the account wrapped to a third line and the wrap's `justify-content: center`
   centred it there.

   The layout Ashton wants is the plainer one anyway: logo LEFT and account
   RIGHT on the top row, pills on their own row underneath. Astra puts both the
   toggle and the account inside the SAME section, so they cannot be placed on
   different rows while that section is a box. `display: contents` dissolves it,
   its two children become grid items of the header row directly, and the areas
   below put each where it belongs. The DOM is untouched; only the boxes go.

   Guarded on :has support, like the block above. Without it the header keeps
   today's stacked layout rather than collapsing to something worse. */
@supports selector(:has(*)) {
	@media (max-width: 921px) {
		/* Three columns, not two. T-08's other-classes control is a child of the
		   same right-hand section, so once `display: contents` dissolves that box
		   it becomes a grid item too - and with no area of its own it was
		   auto-placed onto an implicit THIRD row, which is precisely the stacked
		   header this fix exists to prevent (Ashton, audit 2026-09-01). Giving it
		   a named area on the top row puts it back beside the account, where
		   Gavin drew it.

		   When a teacher is not inside a classroom the control is not rendered at
		   all; the middle column then simply has nothing in it and collapses to
		   the free space, leaving the logo left and the account right exactly as
		   before. */
		.ast-builder-grid-row:has(.bibh-tnav--header) {
			grid-template-columns: auto 1fr auto;
			grid-template-areas:
				"logo others account"
				"nav  nav    nav";
			align-items: center;
			column-gap: 12px;
			row-gap: 8px;
		}
		.ast-builder-grid-row:has(.bibh-tnav--header) > .site-header-primary-section-left {
			grid-area: logo;
			justify-content: flex-start;
			min-width: 0;
		}
		/* The box goes, the children stay and become grid items. */
		.ast-builder-grid-row:has(.bibh-tnav--header) > .site-header-primary-section-right {
			display: contents;
		}
		.ast-builder-grid-row:has(.bibh-tnav--header) .bibh-tnav--header {
			grid-area: nav;
			width: 100%;
			justify-self: stretch;
		}
		.ast-builder-grid-row:has(.bibh-tnav--header) > .site-header-primary-section-right > .bibh-tnav__others {
			grid-area: others;
			justify-self: end;
			margin-right: 0;
		}
		.ast-builder-grid-row:has(.bibh-tnav--header) > .site-header-primary-section-right > .ast-builder-layout-element {
			grid-area: account;
			justify-self: end;
			margin: 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); }

/* ── T-09 (Gavin, 2026-08-31): "I narrowed the navy title bar" ────────────
   His values: 14px 24px rather than 26px 28px, everything on ONE line at
   align-items:center, the name at 27px/800 in #EDEDED rather than 32px/700 in
   pure white. Radius stays at the house 30px rather than his 22px. */
.bibh-tdash__header {
    background: var(--bibh-dark, #203D48); color: #fff;
    border-radius: var(--bibh-radius-md, 30px); padding: 14px 24px;
}
.bibh-tdash__header-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bibh-tdash__name { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: #EDEDED; }
.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; }

/* ── T-05: the students heading is the collapse control ───────────────────
   Gavin's mockup values: an 800/21px heading, the count as a soft chip rather
   than a bracketed number, and a quiet caret at the end of the row. The whole
   row is the control, which is why it takes the pointer. */
/* The whole row is the control, so it needs to be worth tapping: the heading
   alone stood 29px, which is fine to read and thin to hit. */
.bibh-tdash__block-head--toggle { cursor: pointer; user-select: none; margin-bottom: 14px; min-height: 44px; }
.bibh-tdash__block-head--toggle h3 { font-size: 21px; font-weight: 800; }
.bibh-tdash__block-head--toggle:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 4px; border-radius: 8px; }
.bibh-tdash__stuchip {
    background: #e6f6fa; color: #41626f;
    font-weight: 700; font-size: 13px;
    padding: 4px 12px; border-radius: 999px;
    white-space: nowrap;
}
/* T-07: "+ Add Students", Gavin's values, the same pressable key as everything
   else on this screen: act-lab blue over its own darker edge, with the inset
   highlight along the top. margin-left:auto pushes it and the caret to the end
   of the row together. */
.bibh-tdash__headact,
.bibh-tdash__headact:hover,
.bibh-tdash__headact:focus,
.bibh-tdash__headact:active {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-weight: 700; font-size: 13px;
    padding: 7px 18px; border-radius: 999px;
    background: var(--bibh-act-lab, #94e3ff); color: var(--bibh-dark, #203D48);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #64c3e6;
    margin-left: auto; margin-bottom: 4px;
    transition: transform .12s, box-shadow .12s, filter .15s;
}
.bibh-tdash__headact:hover { filter: brightness(1.05); }
.bibh-tdash__headact:active {
    transform: translateY(4px);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .1), 0 0 0 #64c3e6;
}
.bibh-tdash__headact:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bibh-tdash__headact { transition: none; } }
/* Gavin's 7px is a mouse target. On a phone it stood 27px, so the vertical
   grows and the horizontal does not, exactly as the hub tabs do. */
@media (max-width: 600px) { .bibh-tdash__headact { padding: 12px 18px; } }
/* With the button present it owns the auto margin, so the caret just follows it. */
.bibh-tdash__headact ~ .bibh-tdash__block-car { margin-left: 12px; }

/* Pushed to the end of the row, and grey rather than ink: this card is a plain
   white one, so a full-strength caret would shout louder than the heading. */
.bibh-tdash__block-car {
    width: 0; height: 0; flex: none; margin-left: auto;
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 8px solid #c3cdd2;
    transition: transform .18s ease;
}
.bibh-tdash__block-head--toggle.is-collapsed .bibh-tdash__block-car { transform: rotate(-90deg); }
.bibh-tdash__block-head--toggle.is-collapsed { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .bibh-tdash__block-car { transition: none; } }
.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;
    /* The rule belongs UNDER the labels, dividing them from the data. Having it
       on the first body row instead drew a line above the headings, floating
       away from the table with nothing above it (Ashton, 28 Aug). */
    border-bottom: 1px solid var(--bibh-border, #e7e9e6);
}
.bibh-tdash__stutable tbody tr:first-child { border-top: 0; }
.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; }
/* Astra draws a full grid on every table it can reach, from main.min.css:
       table, td, th { border: 1px solid var(--ast-border-color) }
       table          { border-width: 1px 0 0 1px }
       td, th         { border-width: 0 1px 1px 0 }
   which boxes the student list and puts a vertical rule between every column.
   Ashton, 27 Aug: "I dont like the grid lines in this section". The only line we
   want here is the horizontal rule between rows, set on tbody tr just above.
   Our selectors already outrank Astra's bare `td, th`, so no !important needed. */
/* No box around the table, on any side. Astra draws a full grid on every table
   it can reach; the only lines wanted here are the horizontal ones between rows
   and the rule under the headings, both set explicitly above. */
.bibh-tdash__stutable { border: 0; }
.bibh-tdash__stutable tbody td { border-left: 0; border-right: 0; border-bottom: 0; }
.bibh-tdash__stutable thead th { border-left: 0; border-right: 0; border-top: 0; }
.bibh-tdash__stutable tbody tr:last-child td { border-bottom: 0; }
.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); }
/* Flashcards column. Same pill shape as the LO chips so the row reads as one
   family, and the same green/grey pairing as everywhere else on this screen:
   green means done, grey is a gap, never a red telling-off for one quiet week. */
.bibh-tdash__fc {
    display: inline-block; border-radius: var(--bibh-radius-pill, 30px);
    padding: 5px 13px; font-weight: 700; font-size: 13px; white-space: nowrap;
}
.bibh-tdash__fc--done { background: #e4f2ea; color: #346b5d; }
.bibh-tdash__fc--none { background: #f1f3f5; color: var(--bibh-muted, #6c7a84); font-weight: 600; }
.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; }
/* Assignment tracker pager. House rule: every button is a 30px pill. */
.bibh-tdash__pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--bibh-border, #e7e9e6);
}
.bibh-tdash__pgbtn {
    border: 1px solid var(--bibh-border, #e7e9e6); background: #fff;
    color: var(--bibh-dark, #203D48); border-radius: var(--bibh-radius-pill, 30px);
    padding: 7px 16px; font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; line-height: 1.2; white-space: nowrap;
}
/* Astra paints button:hover white, so state the colour rather than inherit it. */
.bibh-tdash__pgbtn:hover:not(:disabled),
.bibh-tdash__pgbtn:focus:not(:disabled) {
    border-color: var(--bibh-primary, #3F8170); background: #f0f6f4;
    color: var(--bibh-primary-dark, #346b5d);
}
.bibh-tdash__pgbtn:disabled { opacity: .4; cursor: default; }
.bibh-tdash__pglab { font-size: 13px; font-weight: 600; color: var(--bibh-muted, #6c7a84); }
.bibh-tdash__pglab b { color: var(--bibh-dark, #203D48); font-weight: 800; }
.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); }
/* Fills navy on hover rather than nudging the border: the grey-to-slightly-
   darker-grey change was too small to register as a hover at all (Ashton,
   8 Sep 2026, applied on live first and brought back here). */
.bibh-mini--line:hover { background: var(--bibh-dark, #203D48); border-color: var(--bibh-dark, #203D48); color: #fff; }
.bibh-mini--red { background: #fff; border-color: #f2c9c0; color: var(--bibh-danger, #d5533c); }
/* The colour has to be restated. Without it the theme's own button:hover colour
   won and Remove faded out to near-invisible on hover (Ashton, 28 Aug). */
.bibh-mini--red:hover,
.bibh-mini--red:focus { background: #fbe7e2; border-color: var(--bibh-danger, #d5533c); color: var(--bibh-danger, #d5533c); }

/* 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) ---- */
/* T-04 (Gavin, 2026-08-31): "the heat map can take up the whole page below the
   students". The tracker moved out of this row into the top row with the
   chapters (T-03), so the heatmap is the only card left here and the two-column
   split has nothing to split. One column, full width. */
.bibh-tdash__report { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 20px; }
.bibh-tdash__rcard { align-self: start; }

/* ── T-03: chapters + class assignment, one row above the students ────────
   Gavin's mockup values: an EQUAL 1fr 1fr split (the reporting row's 1.4fr 1fr
   was for a wide heatmap beside a narrow list, which is not this), an 18px
   gutter, and align-items:start so a short card does not stretch to match a
   tall one beside it. */
.bibh-tdash__toprow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
    align-items: start;
}
.bibh-tdash__topcard { min-width: 0; }
.bibh-tdash__toprow > * { min-width: 0; }

/* The coloured bar is the collapse control, and it is a pressable key like the
   hub tabs: same round pill, same solid lower edge in a darker shade of its own
   colour. Gavin's exact values, 14px 22px at radius 20px, #ffde5c over #d9b53a
   and #94e3ff over #64c3e6, which are the act-terms and act-lab tokens. */
.bibh-tdash__toph {
    display: flex; align-items: center; gap: 14px;
    /* 30px, not the 20px in Gavin's mockup: the house rule is that every button
       is 30px and these bars are buttons (Ashton, 2026-08-31). */
    border-radius: 30px;
    padding: 14px 22px;
    /* Both bars stand the same height whatever they carry. They sit in separate
       grid columns, so nothing aligns them for free, and the assignment bar has
       one more action in it than the chapters bar: left alone they came out
       57px and 63px, which reads as a mistake across a 18px gutter. */
    min-height: 64px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    color: var(--bibh-dark, #203D48);
    margin-bottom: 5px;
    transition: transform .12s, box-shadow .12s, filter .15s;
}
.bibh-tdash__toph--chapters { background: var(--bibh-act-terms, #ffde5c); box-shadow: 0 5px 0 #d9b53a; }
.bibh-tdash__toph--assign   { background: var(--bibh-act-lab,   #94e3ff); box-shadow: 0 5px 0 #64c3e6; }
.bibh-tdash__toph:hover { filter: brightness(1.04); }
.bibh-tdash__toph:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
/* The heading holds its line: it is the label for the whole bar, and wrapping
   it to two lines to make room for the buttons gets the priority backwards. */
.bibh-tdash__toph-t { font-weight: 800; font-size: 18px; white-space: nowrap; }

/* The count chip. On yellow it is a wash of the ink; on blue it is the ink
   itself with the blue as the text, which is how Gavin drew them. */
.bibh-tdash__toph-chip {
    font-weight: 700; font-size: 12px;
    padding: 4px 12px; border-radius: 999px;
    white-space: nowrap;
}
.bibh-tdash__toph--chapters .bibh-tdash__toph-chip { background: rgba(32, 61, 72, .14); color: var(--bibh-dark, #203D48); }
.bibh-tdash__toph--assign   .bibh-tdash__toph-chip { background: var(--bibh-dark, #203D48); color: var(--bibh-act-lab, #94e3ff); }

/* Actions sit at the right, before the caret. margin-left:auto on the FIRST one
   pushes the whole group over, so adding another action later needs no change. */
.bibh-tdash__toph-act,
.bibh-tdash__toph-act:hover,
.bibh-tdash__toph-act:focus,
.bibh-tdash__toph-act:visited {
    border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
    font-family: inherit; font-weight: 700; font-size: 13px;
    padding: 7px 18px; border-radius: 999px;
    background: var(--bibh-dark, #203D48); color: #fff;
    /* All three header actions are one size and one shape: Choose chapters,
       My Assignments and Assign work (Ashton, 2 Sep 2026). Sized to their own
       text they came out three different widths, which reads as three different
       kinds of control rather than three doors of equal weight.

       inline-flex and border-box because one of the three is an <a> and the
       other two are <button>s: left to their defaults they take different
       line-heights and different box models and stand at different heights even
       with identical padding.

       152px, not 168: at 168 the two actions in the assignment bar pushed the
       heading onto a second line. The width has to be the largest that still
       leaves "Class Assignment" on one line. */
    box-sizing: border-box;
    min-width: 152px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}
.bibh-tdash__toph--assign .bibh-tdash__toph-act { color: var(--bibh-act-lab, #94e3ff); }
.bibh-tdash__toph-act:hover { filter: brightness(1.25); }
/* Solid white, not a wash: at 65% over #94e3ff the fill was barely separable
   from the bar and the label failed to read as a button at all. */
.bibh-tdash__toph-act--ghost,
.bibh-tdash__toph-act--ghost:hover,
.bibh-tdash__toph-act--ghost:visited {
    background: #fff; color: var(--bibh-dark, #203D48);
    box-shadow: 0 2px 0 rgba(32, 61, 72, .18);
}
.bibh-tdash__toph-act:first-of-type { margin-left: auto; }

/* The caret. A CSS triangle rather than an inline SVG on purpose: this theme
   collapses an unclassed inline SVG to 1px, and a triangle cannot be got wrong. */
.bibh-tdash__toph-car {
    width: 0; height: 0; flex: none;
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 8px solid currentColor; opacity: .7;
    transition: transform .18s ease;
}
.bibh-tdash__toph.is-collapsed .bibh-tdash__toph-car { transform: rotate(-90deg); }
.bibh-tdash__toph.is-collapsed { margin-bottom: 5px; }
.bibh-tdash__topbody { display: block; }
.bibh-tdash__topbody[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .bibh-tdash__toph, .bibh-tdash__toph-car { transition: none; }
}

/* Two full cards side by side need real width. Below this they stack, which is
   also where the old reporting row stacked, so the page has one stacking point
   rather than two a few pixels apart. */
@media (max-width: 900px) {
    .bibh-tdash__toprow { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .bibh-tdash__toph { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
    .bibh-tdash__toph-t { font-size: 16px; }
    .bibh-tdash__toph-act:first-of-type { margin-left: 0; }
    /* The caret goes to the end of the first line so the bar still reads as one
       control when the actions wrap under the title. */
    .bibh-tdash__toph-car { order: -1; margin-left: auto; }
}

/* Band fills (shared)
 *
 * One colour, the hub's own green: JC #049f84, BIB #3c887b, set per hub and
 * carried in on --bibh-heat (Ashton, 2026-08-31). The four bands used to be a
 * red / amber / green / yellow scale, which is why there was a key under the
 * card explaining it. The key is gone, and so is the reason for four colours:
 * every bar already states its percentage and is drawn to that length, so the
 * colour was repeating in a fourth way what the bar and the number both say.
 *
 * The band classes stay in the markup. They still carry the meaning for
 * anything that wants to read it, and putting the scale back is a change to
 * these four lines rather than to the template.
 */
/* ── The heatmap reads at a glance: red, orange, green ─────────────────────
   Ashton, 2 Sep 2026. Every band was the hub's green, so a topic the class had
   failed and one they had mastered were the same colour and only the bar's
   LENGTH said which. Colour is the faster signal, and the whole point of a
   heatmap is to be read without measuring anything.

   Three colours for four bands on purpose: strong and mastered are both "good",
   and splitting green in two would say there is a decision between them.

   The oranges and reds are the house tokens, not new values, so a hub that
   overrides its palette carries this with it. Ink is navy on orange, where
   white does not have the contrast. */
.hbar--needs    { background: var(--bibh-act-flash, #f32201); color: #fff; }
.hbar--building { background: var(--bibh-act-past,  #ffa700); color: var(--bibh-dark, #203D48); }
.hbar--strong,
.hbar--mastered { background: var(--bibh-heat, #3c887b); color: #fff; }

/* The Reassign button borrows the same green, so a row reads as one thing. */
/* The Reassign button beside each bar takes the band's colour too, so the row
   reads as one thing rather than a coloured bar next to a green button. */
.hbar-line--needs    { border-color: var(--bibh-act-flash, #f32201); color: var(--bibh-act-flash, #f32201); }
.hbar-line--building { border-color: #c07f00; color: #c07f00; }
.hbar-line--strong,
.hbar-line--mastered { border-color: var(--bibh-heat, #3c887b); color: var(--bibh-heat, #3c887b); }

/* 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: 30px; background: #efece4; overflow: hidden; position: relative; }
.bibh-tdash__hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 30px; 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; }
/* Keeps its per-band border and text colour, set inline; only the fill lifts. */
.bibh-tdash__reassign:hover,
.bibh-tdash__reassign:focus { background: #f6faf9; color: inherit; }
.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 */
/* Icon, title, due, clear - all on ONE row. The progress bar used to sit
   between the title and the due date and took 150px of a narrow card, so long
   assignment names had nowhere to go. */
/* ── T-03 row, to Gavin's mockup ──────────────────────────────────────────
   A flex row on its own soft ground rather than grid rows divided by hairlines:
   chip, then title with its due date UNDER it, then how many have handed up,
   then Review answers, then the clear. The due date moved under the title
   because his row puts the actions on the right, and the two were fighting for
   the same end of the row. */
/* The assignment rows are the same pill as the chapter cards in the column
   beside them (Ashton, 2 Sep 2026). They sit side by side and were two
   different objects: the chapters white, tall and lifted, these flatter,
   tighter and tinted, which made one column look like content and the other
   like a sub-list of it.

   Values copied from .bibh-home-chapter / .bibh-home-ch-head rather than
   guessed, so the two stay in step if that card is ever restyled. */
.bibh-tdash__assign {
    display: flex; align-items: center; gap: 14px;
    /* 30px, not the 14px in Gavin's mockup: the house radius (Ashton). The
       horizontal padding grows with it, or the type chip sits inside the curve. */
    padding: 18px 24px; border-radius: 30px;
    background: #fff;
    border: 1px solid var(--bibh-border);
    box-shadow: var(--bibh-shadow-strong);
    margin-top: 12px;
    transition: box-shadow .15s ease;
}
.bibh-tdash__assign:hover { box-shadow: 0 10px 28px rgba(32, 61, 72, .28); }
/* display:grid on the class BEATS the browser's own [hidden] { display: none },
   so every page of the tracker rendered at once and the pager moved a counter
   under a list that never changed (Ashton, 28 Aug). Same trap as a pager button
   that will not hide. */
/* The list owns the spacing, the rows own none of it, exactly as the chapters
   grid beside it does. The rows carried a 12px margin-top each and the list had
   no top margin at all, so the two panels sat at 5px/12px against the chapters'
   14px/8px and nothing lined up across the pair (Ashton, 2 Sep 2026).

   Safe as a grid because .bibh-tdash__assign[hidden] below really is
   display:none, so a paged-out row takes no gap with it. */
.bibh-tdash__assignlist {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
}
.bibh-tdash__assignlist > .bibh-tdash__assign { margin-top: 0; }

.bibh-tdash__assign[hidden] { display: none; }
.bibh-tdash__assign:first-of-type { margin-top: 0; }
/* The activity's own colour, tinted the same way the student's assignment card
   tints it, so a teacher and their class recognise the same thing. */
/* His chip is a WORD, not an icon: QUIZ / CARDS / EXAM, on the type's own tint
   in the type's own ink. It says what the thing is without the reader having to
   know the icon set, and it still carries the colour the student sees. */
/* Grows with the pill. At 34px in a row that is now 18px-padded the tile floated
   in the middle of its own space and the row read as mostly gap. */
.bibh-tdash__assign-ic {
    width: 44px; height: 44px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--type, #91D1DB) 15%, #fff);
    color: var(--type, #203D48);
    font-weight: 800; font-size: 11px; letter-spacing: .02em;
}
.bibh-tdash__assign--quiz        { --type: var(--bibh-act-quiz, #00b2ff); }
.bibh-tdash__assign--video       { --type: var(--bibh-act-video, #049f84); }
.bibh-tdash__assign--flashcards  { --type: var(--bibh-act-flash, #f32201); }
.bibh-tdash__assign--past_papers { --type: var(--bibh-act-past, #ffa700); }
.bibh-tdash__assign--exam        { --type: var(--bibh-act-past, #ffa700); }
/* Lab's blue is pale, so it takes the same heavier mix the student card gives it
   and the dark ink, or the glyph vanishes into the tile. */
.bibh-tdash__assign--lab         { --type: var(--bibh-act-lab, #94e3ff); }
.bibh-tdash__assign--lab .bibh-tdash__assign-ic {
    background: color-mix(in srgb, var(--bibh-act-lab, #94e3ff) 45%, #fff);
    color: var(--bibh-dark, #203D48);
}
.bibh-tdash__assign--offline_hw  { --type: var(--bibh-muted, #6c7a84); }
/* 17px, between the chapter card's 20px title and the 14px it was. The chapter
   card holds one line; this row holds a title, a due date, a count, a button
   and a clear, so it cannot carry the full 20 without crowding. */
.bibh-tdash__assign-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-size: 17px; font-weight: 700; }
/* A quiz row goes somewhere, so it says so: pointer, and the row tints on hover.
   Rows without a quiz behind them stay inert and look it. */
.bibh-tdash__assign.is-open { cursor: pointer; }
.bibh-tdash__assign.is-open:hover { background: var(--bibh-primary-light, #e8f5f0); }
a.bibh-tdash__assign-t,
a.bibh-tdash__assign-t:visited { color: var(--bibh-dark, #203D48); text-decoration: none; }
.bibh-tdash__assign.is-open:hover a.bibh-tdash__assign-t,
a.bibh-tdash__assign-t:hover,
a.bibh-tdash__assign-t:focus { color: var(--bibh-primary-dark, #346b5d); text-decoration: underline; }
.bibh-tdash__assign-t { font-weight: 600; font-size: 14.5px; color: var(--bibh-dark, #203D48); }
.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; }
.bibh-tdash__rt:hover,
.bibh-tdash__rt:focus { background: none; color: var(--bibh-primary, #3F8170); text-decoration: underline; }

/* Tracker header: pills, not arrowed text links. Same two colours the hero uses
   for its own actions, so a control means the same thing wherever it appears. */
.bibh-tdash__trkacts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bibh-tdash__pill,
.bibh-tdash__pill:visited {
    display: inline-flex; align-items: center; border: 0; cursor: pointer;
    border-radius: 30px; padding: 8px 18px; font: inherit; font-weight: 800; font-size: 13px;
    text-decoration: none; white-space: nowrap;
}
.bibh-tdash__pill--navy { background: var(--bibh-dark, #203D48); color: #fff; }
.bibh-tdash__pill--navy:hover,
.bibh-tdash__pill--navy:focus { background: var(--bibh-dark, #203D48); color: #fff; opacity: .9; text-decoration: none; }
.bibh-tdash__pill--sky { background: var(--bibh-secondary, #91D1DB); color: var(--bibh-dark, #203D48); }
.bibh-tdash__pill--sky:hover,
.bibh-tdash__pill--sky:focus { background: var(--bibh-secondary, #91D1DB); filter: brightness(1.05); color: var(--bibh-dark, #203D48); text-decoration: none; }

/* 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); }
/* The swatch IS its colour, so the theme's green hover would misreport the choice. */
.bibh-tdash__swatch:hover,
.bibh-tdash__swatch:focus { border-color: var(--bibh-secondary, #91D1DB); }
.bibh-tdash__swatch.is-sel:hover { 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; }
/* T-02: Gavin's mockup colours, geometry and mechanic, at a LARGER size than
   his 15px (Ashton, 2026-08-31). His proportions are kept and everything scales
   together, type, padding and the lower edge, so the key still reads as a key
   rather than a stretched pill.
   This block is more specific than the base one, so the ladder lives HERE or it
   never applies; the base rules only ever styled a nav outside the header. */
.bibh-tnav--header .bibh-tnav__btn {
    padding: 15px 34px;
    font-weight: 700;
    font-size: 20px;
}
/* Bigger keys need the ladder more, not less: at 17px the three measure about
   500px against the old slider's 205px. Each step is sized so the row still
   fits on one line at that width, measured rather than guessed. */
@media (max-width: 1100px) { .bibh-tnav--header .bibh-tnav__btn { font-size: 17px;   padding: 12px 26px; } }
@media (max-width: 900px)  { .bibh-tnav--header .bibh-tnav__btn { font-size: 15px;   padding: 10px 21px; } }
/* Below here the padding stops scaling evenly: the horizontal keeps shrinking
   so three keys stay on one line, but the VERTICAL grows back, because these
   are thumb targets on a phone. At 9px they stood 32px tall, under the 44px
   guideline; the type is smaller than desktop but the key is not harder to
   hit than it was. */
@media (max-width: 600px)  { .bibh-tnav--header .bibh-tnav__btn { font-size: 13.5px; padding: 13px 15px; } }
@media (max-width: 360px)  { .bibh-tnav--header .bibh-tnav__btn { font-size: 12.5px; padding: 12px 11px; } }
/* 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;
    }
    /* Type steps are in the ladder above, not here: this block is about
       getting the nav out of the absolute centre, not about sizing. */
}

/* ── 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; }

/* ── Co-teachers on the classroom settings panel ───────────────────────────
   A short list of people, so it reads as a list of people: name over email,
   with the one action against each. */
.bibh-cset__people { margin: 12px 0 14px; }

.bibh-cset__people-none {
	font-size: 14px;
	color: var(--bibh-text-light, #4a6272);
	padding: 10px 0;
}

.bibh-cset__person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--bibh-border);
	border-radius: 30px;
	margin-bottom: 8px;
	background: #fff;
}

.bibh-cset__person-who {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.bibh-cset__person-who strong {
	font-size: 15px;
	color: var(--bibh-dark);
}

.bibh-cset__person-who span {
	font-size: 13px;
	color: var(--bibh-text-light, #4a6272);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bibh-cset__person-x {
	flex: none;
	border: 1px solid var(--bibh-border);
	border-radius: 30px;
	padding: 7px 16px;
	background: transparent;
	color: var(--bibh-text-light, #4a6272);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.bibh-cset__person-x:hover:not(:disabled) {
	border-color: var(--bibh-danger, #c0392b);
	color: var(--bibh-danger, #c0392b);
}

.bibh-cset__person-x:disabled { opacity: .6; cursor: default; }

/* The transfer confirmation stacks two fields, unlike delete's single one. The
   shared input is sized for a flex ROW, so it needs pinning to the column width
   here or it runs past the edge of the panel. */
#bibh-cl-cset-xfer-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

#bibh-cl-cset-xfer-form .bibh-home-set-input {
	flex: none;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* ── 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 two footer controls, as ONE rule.
 *
 * They were a mismatched pair - 24.8px against 29.4px, different paddings, one
 * uppercase and one not - which is most of why neither read as a button. Sizing
 * them together is what stops that recurring.
 *
 * min-height rather than padding alone: the two carry different icons (a 15px
 * chevron, an 11px copy glyph), so padding alone leaves the line boxes a few
 * pixels apart and the pair looks subtly off.
 *
 * The border + shadow + lift is the same idiom as .bibh-tdash__back, which is
 * this codebase's existing answer to "make it read as a control, not as text".
 *
 * On the width the grid actually runs at - full viewport, three columns - the footer is
 * roughly 440px and the pair sits on one row with room to spare. It only meets its limit
 * in a squeezed ~1100px window, the narrowest the three-column breakpoint allows, where
 * the two wrap to a row each. That is why they are allowed to wrap rather than shrunk to
 * fit it: legible at the width people actually use beats cramped at the width they do not.
 */
.bibh-badge--students-btn,
.bibh-classroom-code,
.bibh-classroom-code--copy {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; min-height: 36px; box-sizing: border-box;
    border-radius: var(--bibh-radius-pill, 30px);
    border: 1.5px solid var(--bibh-border, #e2e5ea);
    box-shadow: var(--bibh-shadow-sm, 0 2px 10px rgba(32,61,72,.12));
    background: #fff;
    color: var(--bibh-dark, #203D48);
    font-family: var(--bibh-font);
    font-size: 12.5px; font-weight: 800; line-height: 1.2;
    text-transform: none; letter-spacing: normal;
    /* Never break the label across lines. On a narrow card the pill wrapped
       mid-phrase and the footer grew a second row. Better to let the pair wrap
       against each other than to fold one button in half. */
    white-space: nowrap;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}

/* The code keeps a little tracking - it gets read out loud and copied by hand -
   but drops the monospace, which rendered the hyphen in SJP-085 as a dash. */
.bibh-classroom-code,
.bibh-classroom-code--copy { letter-spacing: .04em; }

.bibh-badge--students-btn:hover,
.bibh-classroom-code--copy:hover {
    background: #fff;
    border-color: var(--bibh-secondary, #91D1DB);
    box-shadow: 0 4px 16px rgba(32,61,72,.18);
    transform: translateY(-1px);
    color: var(--bibh-dark, #203D48);
}

/* A shade smaller than the code it introduces: it is the caption, not the value,
   and those few pixels are what keep the pair on one row on a 3-column card. */
.bibh-classroom-code__label { font-weight: 600; font-size: 11.5px; opacity: .6; }

/* The roster size, subordinate to the action. The label is what the button DOES;
   the number is a detail about it, so it reads lighter and smaller. Smaller also
   buys back most of the width the count costs, which is what keeps the pair on
   one row on a 3-column card. The 6px flex gap spaces it from the label, so the
   markup needs no whitespace of its own. */
.bibh-badge__count { font-weight: 700; font-size: 11.5px; opacity: .55; }

/* On a coloured card the white pill is already the contrast, so the border
   would only draw a second outline around it. */
.bibh-card--colored .bibh-badge--students-btn,
.bibh-card--colored .bibh-classroom-code,
.bibh-card--colored .bibh-classroom-code--copy {
    background: #fff; color: var(--bibh-dark, #203D48); border-color: transparent;
}
.bibh-card--colored .bibh-badge--students-btn:hover,
.bibh-card--colored .bibh-classroom-code--copy:hover {
    border-color: rgba(255,255,255,.9);
}

/* 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: 18px 32px 2px; 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: 12px 32px 22px; }

.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(4, minmax(0, 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);
}
/* Coming soon: drained and flat, so it reads as unavailable rather than as a
   colour choice. It keeps its place in the row on purpose, because the point is
   to say video IS coming, not to hide that it exists (Ashton, 2026-08-31). */
.bibh-asg__type.is-soon {
    cursor: not-allowed;
    filter: grayscale(.65);
    opacity: .55;
    box-shadow: none;
    transform: none;
}
/* The label is a pill on the button rather than a line of small text under it,
   so it reads at a glance in a row of four. */
.bibh-asg__type small {
    display: inline-block; margin-top: 6px;
    background: rgba(255,255,255,.9); color: var(--bibh-dark, #203D48);
    padding: 3px 10px; border-radius: 30px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    opacity: 1;
}

/* 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;
}
/* Astra draws a dotted outline on a focused input. The border IS the focus
   state here, so the outline goes and the border does the work. */
.bibh-asg__search:focus,
.bibh-asg__search:focus-visible {
    outline: none; box-shadow: none;
    border: 1.5px solid 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. */
/* ── Chapters and topics: one multiselect ──────────────────────────────────
   Replaced a paginated grid (six of thirty six at a time) plus a separate topic
   panel. Ashton, 27 Aug. A field of chips, and one scrolling list that expands
   in place. House rules hold: 30px pills, no coloured rail down any edge. */
.bibh-asg__pick { position: relative; }

.bibh-asg__field {
    width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: 54px; padding: 9px 14px; cursor: pointer; text-align: left;
    background: #fff; border: 1.5px solid var(--bibh-border, #e2e5ea);
    border-radius: 26px; font-family: inherit;
}
/* Every control in this picker is a <button>, and Astra gives a bare button a
   green fill and a drop shadow on hover. That is where the green wash on the
   field, the shadows on the chapter row, the arrow, Clear all and the topic
   rows all came from (Ashton, 28 Aug). Each one restates its own background and
   turns the shadow off; the field keeps only a border tint on hover. */
.bibh-asg__field,
.bibh-asg__chap,
.bibh-asg__cexp,
.bibh-asg__trow,
.bibh-asg__dclear,
.bibh-asg__ddone { box-shadow: none; }
.bibh-asg__field:hover,
.bibh-asg__field:focus { background: #fff; border-color: var(--bibh-border, #e2e5ea); box-shadow: none; }
.bibh-asg__field.is-open:hover { border-color: var(--bibh-primary, #3F8170); }
.bibh-asg__field.is-open { border-color: var(--bibh-primary, #3F8170); }
.bibh-asg__field:focus-visible { outline: 3px solid var(--bibh-secondary, #91D1DB); outline-offset: 2px; }
.bibh-asg__field[disabled] { opacity: .55; cursor: default; }
.bibh-asg__chips { display: contents; }
.bibh-asg__ghost { font-size: 13.5px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); }
.bibh-asg__caret {
    margin-left: auto; width: 0; height: 0; flex: none;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid var(--bibh-text-muted, #6f8088);
}
.bibh-asg__field.is-open .bibh-asg__caret { transform: rotate(180deg); }

.bibh-asg__chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bibh-primary-light, #e8f5f0); border: 1.5px solid var(--bibh-primary, #3F8170);
    border-radius: 30px; padding: 6px 8px 6px 13px;
    font-size: 12.5px; font-weight: 800; color: var(--bibh-dark, #203D48);
}
.bibh-asg__chip b { font-weight: 900; }
.bibh-asg__chip i {
    font-style: normal; width: 17px; height: 17px; border-radius: 50%; flex: none;
    background: var(--bibh-primary, #3F8170); color: #fff;
    display: grid; place-items: center; font-size: 9px; font-weight: 900;
}
.bibh-asg__chip--topic {
    background: #fff; border-color: var(--bibh-border, #e2e5ea); color: var(--bibh-text-muted, #6f8088);
}
.bibh-asg__chip--topic i { background: #c3ccd1; }

/* In the flow, not floating. Floated over the modal it was clipped by the modal's
   own edge and only two topics were reachable. The modal already scrolls, so
   letting the list push the content down is both simpler and never cut off. */
.bibh-asg__drop {
    margin-top: 8px;
    background: #fff; border: 1.5px solid var(--bibh-primary, #3F8170); border-radius: 22px;
    overflow: hidden;
}
.bibh-asg__drop[hidden] { display: none; }
.bibh-asg__dsearch {
    display: flex; align-items: center; gap: 9px; padding: 11px 14px;
    border-bottom: 1.5px solid var(--bibh-border, #e2e5ea);
}
/* It used to be stripped to nothing here (no border, no padding, no icon) and
   an emoji sat beside it instead. It keeps the styled field it already had. */
.bibh-asg__dsearch .bibh-asg__search { flex: 1; margin: 0; }
/* Shorter than it was (Ashton, 2026-08-31): at 268px the open chapter list
   pushed the build options a long way down a 36 chapter hub, so choosing HOW to
   build meant scrolling past everything you had just picked. The list scrolls
   inside itself either way, so the only thing lost is seeing eight rows at once
   instead of five. */
.bibh-asg__dlist { max-height: 180px; overflow-y: auto; display: block; padding: 0; }
.bibh-asg__none { padding: 22px 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--bibh-text-muted, #6f8088); }

.bibh-asg__crow { display: flex; align-items: stretch; border-bottom: 1px solid #f1f5f7; }
.bibh-asg__crow.is-on { background: var(--bibh-primary-light, #e8f5f0); }
.bibh-asg__chap {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 800;
    color: var(--bibh-dark, #203D48); text-align: left;
}
/* Astra fills every button green on hover and focus. */
.bibh-asg__chap:hover, .bibh-asg__chap:focus { background: rgba(63,129,112,.07); color: var(--bibh-dark, #203D48); box-shadow: none; }
.bibh-asg__chap:focus-visible { outline: 3px solid var(--bibh-secondary, #91D1DB); outline-offset: -3px; }
.bibh-asg__cno {
    flex: none; background: #ffde5c; color: var(--bibh-dark, #203D48); border-radius: 30px;
    padding: 2px 9px; font-size: 10.5px; font-weight: 900; letter-spacing: .3px;
}
.bibh-asg__cttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibh-asg__ccnt { margin-left: auto; flex: none; font-size: 11px; font-weight: 800; color: var(--bibh-text-muted, #6f8088); }
.bibh-asg__cexp {
    flex: none; width: 42px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 10px; color: var(--bibh-text-muted, #6f8088);
}
/* No hover fill: the arrow sits inside the chapter row, so tinting it drew a
   second block on top of the row's own tint. */
.bibh-asg__cexp:hover, .bibh-asg__cexp:focus { background: none; color: var(--bibh-dark, #203D48); box-shadow: none; }
.bibh-asg__cexp:focus-visible { outline: 3px solid var(--bibh-secondary, #91D1DB); outline-offset: -3px; }

.bibh-asg__bx {
    width: 18px; height: 18px; flex: none; border-radius: 5px; border: 2px solid #c3ccd1;
    display: grid; place-items: center; font-size: 10px; color: #fff; background: #fff;
}
/* Selected is a filled green box, not a tick (Ashton, 2026-08-31). The glyph
   sat awkwardly in an 18px box and read as a different weight to everything
   around it; the fill alone says chosen just as clearly, and the half-state
   below still reads as its own thing because it stays hollow. */
.bibh-asg__bx.is-on { background: var(--bibh-primary, #3F8170); border-color: var(--bibh-primary, #3F8170); }
/* Half ticked: the chapter is in, but narrowed to some of its topics. */
.bibh-asg__bx.is-part { border-color: var(--bibh-primary, #3F8170); }
.bibh-asg__bx.is-part::after { content: ""; width: 9px; height: 2.5px; border-radius: 30px; background: var(--bibh-primary, #3F8170); }
.bibh-asg__bx--sm { width: 16px; height: 16px; border-radius: 4px; }

.bibh-asg__tsub {
    background: #f6fafb; border-bottom: 1px solid #f1f5f7;
    padding: 5px 14px 10px 46px; display: flex; flex-direction: column; gap: 4px;
}
.bibh-asg__trow {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: 0; background: none; cursor: pointer; padding: 5px 6px; border-radius: 30px;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--bibh-text-muted, #6f8088); text-align: left;
}
.bibh-asg__trow:hover, .bibh-asg__trow:focus { background: rgba(63,129,112,.08); color: var(--bibh-dark, #203D48); box-shadow: none; }
.bibh-asg__trow:focus-visible { outline: 3px solid var(--bibh-secondary, #91D1DB); outline-offset: -2px; }
.bibh-asg__trow.is-on { color: var(--bibh-dark, #203D48); font-weight: 800; }

.bibh-asg__dfoot {
    display: flex; align-items: center; gap: 11px; padding: 10px 14px;
    border-top: 1.5px solid var(--bibh-border, #e2e5ea);
}
.bibh-asg__dcount { font-size: 11.5px; font-weight: 800; color: var(--bibh-text-muted, #6f8088); }
.bibh-asg__dclear {
    border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 900; color: var(--bibh-primary-dark, #346b5d);
}
.bibh-asg__dclear:hover, .bibh-asg__dclear:focus { background: none; text-decoration: underline; color: var(--bibh-primary, #3F8170); box-shadow: none; }
.bibh-asg__ddone {
    margin-left: auto; border: 0; border-radius: 30px; cursor: pointer; font-family: inherit;
    background: var(--bibh-primary, #3F8170); color: #fff; padding: 8px 18px;
    font-size: 12.5px; font-weight: 900;
}
.bibh-asg__ddone:hover, .bibh-asg__ddone:focus { background: var(--bibh-primary-dark, #346b5d); color: #fff; box-shadow: none; }
.bibh-asg__dclear:focus-visible, .bibh-asg__ddone:focus-visible { outline: 3px solid var(--bibh-secondary, #91D1DB); outline-offset: 2px; }

/* 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;
}
/* Four across, one row, in the order they are offered. It was five while Exam
   was still an option; with Exam gone that left a phantom column and four pills
   sharing five slots. */
.bibh-tdash__assignmodal .bibh-asg__types {
    grid-template-columns: repeat(4, 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);
    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;
    padding: 12px 16px 12px 42px;
}

/* ══════════════════════════════════════════════════════════════════════════
   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);
}
/* Swapped for the open hint on hover rather than sharing the line with it, which
   overlapped the two labels. */
.bibh-tch__foot { transition: opacity .14s; }
.bibh-tch__slot:hover .bibh-tch__foot { opacity: 0; }
.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;
}
/* The whole starred card opens that chapter's student view. A transparent overlay
   button rather than the card itself, so the remove control stays a separate control
   and stays clickable above it. Same two-control shape as a browse row. */
.bibh-tch__open {
    position: absolute; inset: 0; z-index: 1;
    background: none; border: 0; padding: 0; cursor: pointer;
    border-radius: inherit; font-family: inherit;
}
/* The hint the browse row shows on hover, so the card reads as openable rather than
   just decorative. */
.bibh-tch__open::after {
    content: "View students resources \2192";
    position: absolute; left: 21px; right: 21px; bottom: 19px;
    font-size: 11px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
    color: #94e3ff; opacity: 0; transition: opacity .14s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left;
}
.bibh-tch__slot:hover .bibh-tch__open::after { opacity: 1; }
.bibh-tch__slot:has(.bibh-tch__open):hover { box-shadow: 0 6px 18px rgba(32,61,72,.22); }
.bibh-tch__open:hover, .bibh-tch__open:focus { background: none; }
.bibh-tch__open:focus-visible { outline: 3px solid var(--bibh-secondary, #91D1DB); outline-offset: -3px; }
/* Above the overlay, or Remove stops working. */
.bibh-tch__unpin { z-index: 2; }
.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;
}
/* Astra's `button:hover { color: #fff }` (main.min.css, no !important) turns every
   button's inherited text white on hover. This tile is a <button>, so "Pin a chapter"
   and the + vanished against the pale hover fill. The sub-line survived only because
   .bibh-tch__newsub sets its own colour. Restate the colour on hover so nothing
   depends on what the theme happens to do. */
.bibh-tch__slot--new:hover,
.bibh-tch__slot--new:focus { border-color: #5fbcdc; background: #f7fcfd; color: var(--bibh-dark, #203D48); }
.bibh-tch__slot--new:hover .bibh-tch__newsub { color: var(--bibh-text-muted, #6f8088); }
.bibh-tch__slot--new:hover .bibh-tch__plus { background: #e2f2f8; color: var(--bibh-dark, #203D48); }
.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%);
    /* Was 760px, which cut off Exam Corner, flashcards and the quiz player: those are
       full-width student surfaces being previewed inside a dialog. Ashton, 27 Aug. */
    width: min(1240px, calc(100vw - 32px)); max-height: min(92vh, 1150px);
    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,
.bibh-tchs__x:focus { background: #e5eff2; color: var(--bibh-dark, #203D48); }

/* Neutralising Astra's focus background left these buttons with NO focus affordance
   at all, because the theme also sets outline:none and was relying on that background
   flip to show focus. Caught by auditing the sweep rather than by looking at it. Put a
   real ring back, :focus-visible so it is keyboard only and a mouse click does not
   leave a ring behind. */
.bibh-tchs__pin:focus-visible,
.bibh-tchs__rowbody:focus-visible,
.bibh-tchs__x:focus-visible,
.bibh-tchs__dpin:focus-visible,
.bibh-tch__slot--new:focus-visible,
.bibh-tdash__rt:focus-visible,
.bibh-tdash__reassign:focus-visible,
.bibh-tdash__swatch:focus-visible,
.bibh-tdash__pgbtn:focus-visible {
    outline: 3px solid var(--bibh-secondary, #91D1DB);
    outline-offset: 2px;
}

/* The student's Exam Corner reader is opened from inside the chapter sheet, and the
   sheet sits at 100000 while the reader's own overlay is 10000, so it opened BEHIND
   the sheet: correct title, 34 of its elements on the page, nothing visible. Scoped
   to the reader-only shell so a real student home is untouched. */
#bibh-home.bibh-home--pponly .bibh-home-overlay { z-index: 100010; }

/* Full screen, for projecting a chapter to the class. */
.bibh-tchs__box.is-full {
    left: 0; top: 0; transform: none;
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0;
}
.bibh-tchs__full { position: relative; font-size: 15px; }
.bibh-tchs__full[data-tip]::after {
    content: attr(data-tip);
    position: absolute; right: 50%; top: calc(100% + 8px); transform: translateX(50%);
    background: var(--bibh-dark, #203D48); color: #fff;
    font-size: 11.5px; font-weight: 700; padding: 6px 11px;
    border-radius: var(--bibh-radius-pill, 30px); white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity .13s; z-index: 6;
}
.bibh-tchs__full[data-tip]:hover::after,
.bibh-tchs__full[data-tip]:focus-visible::after { opacity: 1; }
.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,
.bibh-tchs__dpin:focus { border-color: #5fbcdc; background: #f7fcfd; color: var(--bibh-dark, #203D48); }
.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; }
/* The row body is a bare <button>. Astra fills every button green on hover and sets
   white text, but our own label colours outrank that white, so the row ended up dark
   text on green. Hold the row's own look instead. */
.bibh-tchs__rowbody:hover,
.bibh-tchs__rowbody:focus { background: none; color: inherit; }
.bibh-tchs__row:hover .bibh-tchs__t { color: var(--bibh-dark, #203D48); }
.bibh-tchs__row:hover .bibh-tchs__peek { color: var(--bibh-primary-dark, #346b5d); }
.bibh-tchs__row.is-on:hover .bibh-tchs__t { color: #fff; }
.bibh-tchs__row.is-on:hover .bibh-tchs__peek { color: #9dbac6; }
.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; }
/* The star that puts a chapter in the students' classroom. It used to read "Pin",
   which was too long for the row. The word now lives in the tooltip instead. */
.bibh-tchs__pin {
    flex: none; position: relative;
    width: 44px; height: 44px; padding: 0;
    background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee);
    border-radius: 50%; font-family: inherit;
    font-size: 21px; line-height: 1; color: #b9c6cd;
    display: grid; place-items: center; cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
/* Astra's inline `button:hover { background:#3C887B; color:#fff }` would otherwise
   turn this green. Every hover below states its own colours for that reason. */
.bibh-tchs__pin:hover,
.bibh-tchs__pin:focus { background: #fffaf0; border-color: #f0c93c; color: #e0b62c; }
.bibh-tchs__pin.is-starred { color: #f0c93c; border-color: #f5dd8f; background: #fffdf5; }
.bibh-tchs__pin.is-starred:hover,
.bibh-tchs__pin.is-starred:focus { background: #fff6dd; border-color: #f0c93c; color: #e0b62c; }

/* Tooltip: the label the star lost. Sits to the LEFT because the star is hard against
   the right edge of a scrolling list. */
.bibh-tchs__pin[data-tip]::after {
    content: attr(data-tip);
    position: absolute; right: calc(100% + 9px); top: 50%; transform: translateY(-50%);
    background: var(--bibh-dark, #203D48); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1px;
    padding: 6px 11px; border-radius: var(--bibh-radius-pill, 30px);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .13s; z-index: 5;
}
.bibh-tchs__pin[data-tip]:hover::after,
.bibh-tchs__pin[data-tip]:focus-visible::after { opacity: 1; }
.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.
   ─────────────────────────────────────────────────────────────────────── */
/* THE reason Exam Corner, flashcards and the quiz were all "cut off". The list this
   sits in is a flex column, so this panel defaulted to flex-shrink:1 and was squashed
   from its natural 13290px down to the 559px of visible space. Its own overflow:hidden
   (there for the 24px corners) then clipped the rest, and because nothing overflowed
   the LIST, the list's overflow-y:auto had nothing to scroll: scrollHeight equalled
   clientHeight and the mouse wheel did nothing. Widening the sheet never touched this.
   flex-shrink:0 lets it keep its real height so the list scrolls normally. */
.bibh-tchs__act {
    background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee);
    border-radius: 24px; overflow: hidden; flex-shrink: 0;
}
.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; }
/* Exam Corner questions are scans, not text, and some are full portrait pages
   (1482x1930 is typical). With only max-width they grew with the container, so
   widening the sheet made a question 1396x1817 and pushed everything else off
   screen. Cap the HEIGHT so a whole question fits the pane, the way the student
   side's fit mode does, and centre it since it is then narrower than the pane.
   Full screen raises the cap, which is the point of projecting it. */
.bibh-tchs__ppimg {
    display: block; margin-left: auto; margin-right: auto;
    /* A readable measure, then scroll. Two rejected alternatives, so nobody
       reinstates them: max-width alone let a 1482x1930 scan grow to 1396px once the
       sheet widened, which is what "the exam corner looks wrong" was; and capping
       max-height to fit the page shrank that same portrait scan to 449px, fitting
       but far too small to read, let alone project. A portrait A4 page cannot be
       both wholly visible and legible in a short landscape pane, so this picks
       legible and lets the pane scroll, which is how you read a page anyway. */
    max-width: min(100%, 900px); 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; }

/* Hard right on the title row, in the space Assign and Blitz used to occupy
   (Ashton, 2026-08-31). margin-left:auto rather than space-between on the row,
   so the stats stay together as one group if the title ever wraps.
   margin-top is gone: they are ON the row now, not a band under it. */
.bibh-qr__stats { display: flex; gap: 9px; flex-wrap: wrap; margin-left: auto; margin-top: 0; }
.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; }
/* The question cards lift off the page. Flat, a grid of a dozen of them read as
   one ruled sheet and the eye had nothing to separate one question from the
   next (Ashton, 2 Sep 2026). Medium, not strong: there are many of them, and
   the strong token is for cards you act on rather than read. */
.bibh-qr__qcard { background: #fff; border: 1.5px solid var(--bibh-border, #e4eaee); border-radius: 22px; padding: 15px 17px; box-shadow: var(--bibh-shadow-md); }
.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. */
/* The student's Past Assignments page reuses this list, but its rows are LINKS
   (one attempt per page load) where the teacher's are buttons, and the theme
   underlines anchors in the content area. */
a.bibh-qr__s,
a.bibh-qr__s:link,
a.bibh-qr__s:visited,
a.bibh-qr__s:hover,
a.bibh-qr__s:focus { text-decoration: none; }

.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;
}
/* The border has to darken WITH the fill. It was pinned to the resting #ffde5c
   while only the background went to #ebcc55, so hovering drew a pale ring around
   a darker button, which no other button here does (Ashton, 28 Aug). */
.bibh-qr__reteach:hover  { background: #ebcc55; border-color: #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; }

/* ===========================================================================
   Chapters, as the student sees them
   The accordion itself is student CSS (bibh-home-*, home.css, which loads for
   both roles). Only the teacher's own additions live here: the starred badge,
   the unstar control, the picker and the mind map modal. Keeping it this way is
   the point - if the student chapter card changes, the teacher's changes with it.
   ======================================================================== */
/* The button leads: there is no heading beside it any more, so it starts on the
   left rather than sitting flush right against nothing. */
.bibh-tchacc__head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin: 22px 0 4px; }
.bibh-tchacc__star {
    border: 0; cursor: pointer; border-radius: 30px; padding: 11px 22px;
    background: var(--bibh-accent, #F3D76A); color: var(--bibh-dark, #203D48);
    font: inherit; font-size: 14px; font-weight: 800;
}
/* The BACKGROUND has to be restated, not just the colour. Astra styles every
   bare button:hover with the theme green, so this went from yellow to green the
   moment a teacher moved onto it (Ashton, 28 Aug). Same trap as Remove. */
.bibh-tchacc__star:hover,
.bibh-tchacc__star:focus {
    background: var(--bibh-accent, #F3D76A); color: var(--bibh-dark, #203D48);
    filter: brightness(1.04);
}
.bibh-tchacc__none { margin: 6px 0 0; color: var(--bibh-text-muted, #7b8b91); font-size: 14px; }
/* Two columns, as the design has it. The student home is one column because a
   student reads down their own chapters; a teacher is scanning a class's set, so
   the same cards pack two across. align-items:start keeps a closed chapter from
   stretching to match an open one beside it. */
/* T-03: ONE column, not two. This grid used to sit across the full page width,
   where two chapter cards side by side were comfortable. It now lives inside
   the left half of the top row, so two columns gave each card about 300px and
   a title like "Chapter 3 - Personal Financial Lifecycle" broke to one word per
   line. Half the width means half the columns. */
.bibh-tchacc__grid {
    margin-top: 14px;
    display: grid; grid-template-columns: 1fr;
    gap: 8px; align-items: start;
}
/* The grid owns the spacing between chapter cards, nothing else. The cards
   carry a 12px margin-bottom of their own from the student dashboard, which
   ADDED to the gap: 14 + 12 came out as 26px between cards, and setting the
   gap alone only ever removed half of it (Ashton, 2026-08-31). */
.bibh-tchacc__grid > .bibh-home-chapter { margin-bottom: 0; }

.bibh-tchacc__badge {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    background: #fdf1cf; color: #8a6100; border-radius: 30px;
    padding: 5px 11px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
/* The per-chapter unstar X is gone: starring is the picker's job, and an X on
   a card a teacher is trying to open was a hazard next to the panel toggle. */

/* A topic chip filters the scope rather than opening anything, so it reads as a
   toggle: off by default, filled when it is narrowing the activity buttons. */
.bibh-tchacc__topic { cursor: pointer; user-select: none; }
/* Selected = pressed IN, not ringed. These chips carry a 3D edge from home.css
   and already have a pressed look for :active; a filtering chip is a button that
   stays down, so it borrows that rather than drawing a yellow outline on top of
   the shadow (Ashton, 28 Aug). The values are home.css's own pressed state. */
.bibh-tchacc__topic.is-on {
    outline: none;
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--edge, #c7ced2), 0 2px 7px rgba(32, 61, 72, .2);
    background-color: var(--bibh-primary-light, #e8f5f0);
}
.bibh-tchacc__tile { cursor: pointer; }

/* Admin-only notice when teacher analytics is off for the hub. Amber rather
   than red: nothing is broken, the reader is simply seeing something their
   teachers are not. */
.bibh-tdash__offnote {
    display: flex; flex-direction: column; gap: 2px;
    background: #fdf1cf; border: 1.5px solid #e8cf88; border-radius: 18px;
    padding: 13px 18px; margin: 0 0 14px;
    font-size: 13.5px; color: #6b5310;
}
.bibh-tdash__offnote strong { font-weight: 800; color: #5a4409; }

/* The create-classroom panel keeps a white ground. Making .bibh-suite__main
   transparent for the classroom tint let the cyan through everything that did
   not paint its own background, this card included. */
.bibh-suite--room .bibh-form-card { background: var(--bibh-white, #fff); }

/* Students list, heatmap and assignment tracker carry the CHAPTER CARD's
   shadow, resting and on hover, so every card on this page is one object
   repeated rather than three depths of card (Ashton, 28 Aug). Values are the
   chapter card's own, from home.css. */
.bibh-suite--room .bibh-card,
.bibh-suite--room .bibh-tdash__rcard {
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32, 61, 72, .16));
    transition: box-shadow .15s ease;
}
.bibh-suite--room .bibh-card:hover,
.bibh-suite--room .bibh-tdash__rcard:hover {
    box-shadow: 0 10px 28px rgba(32, 61, 72, .28);
    transform: none;   /* .bibh-card lifts by default; the chapter cards do not */
}

/* The teacher classroom sits on the SAME soft cyan as the student home.
   ------------------------------------------------------------------------
   home.css does this with body:has(.bibh-suite--student.bibh-suite--home) and
   the exact colour is #c9eff060; taking that value rather than the reference
   HTML's #e7f4f4 means the two dashboards genuinely match rather than being
   two similar pale blues.

   Scoped to .bibh-suite--room, which the shortcode sets on the classroom views
   only. It was scoped to the whole teacher suite for about ten minutes, which
   was wrong twice over: Ashton wants the Teachers Hub and the Exam Builder to
   stay white, and the rule out-specified the flashcard wall's own #ffe9e5 and
   turned it grey. The wrappers go transparent for the same reason they do on
   the student side, or Astra's white article sits on top of the tint. */
body:has(.bibh-suite--room) { background: #c9eff060; }
body:has(.bibh-suite--room) .site-main > article,
body:has(.bibh-suite--room) .site-content { background: transparent; }
.bibh-suite--room .bibh-suite__main { background: transparent; }

/* The class code chip in the students modal, at the size the section around it
   reads at rather than the 0.8rem it inherits from the card badge. */
.bibh-cl-sm-code { font-size: 15px; letter-spacing: .08em; padding: 10px 16px; }

/* Type scale inside the teacher's chapter accordion.
   ------------------------------------------------------------------------
   The student home is ONE column at full width, so a 35px tile label and a
   20px topic chip are right there. The teacher grid is two columns of the same
   cards, so the same type overflowed: "Videos" wrapped to "Video / s" and
   "Exam Corner" to "Exam Corn / er" (Ashton, 28 Aug). Sizes are pulled down to
   the assign modal's pill, 16px, which is the reference he gave, and the
   supporting text scales with it.

   Deliberately scoped to .bibh-tchacc__grid so nothing here can reach the
   student home, which shares these classes and must keep its own scale. */
.bibh-tchacc__grid .bibh-home-tile { min-height: 0; padding: 16px 8px; border-radius: 26px; }
.bibh-tchacc__grid .bibh-home-tile-t { font-size: 16px; line-height: 1.15; }
/* No floor on either. The student's 74px pill and 148px tile are sized for a
   full-width dashboard; in a half-width teacher card they left a lot of empty
   box under short labels. */
.bibh-tchacc__grid .bibh-home-topic { padding: 9px 12px; min-height: 0; }
.bibh-tchacc__grid .bibh-home-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
/* Two classes deep, matching home.css's own `.bibh-home-topic .bibh-home-topic-name`.
   home.css loads AFTER teacher.css, so at equal specificity it wins and the chip
   stayed at 20px. */
.bibh-tchacc__grid .bibh-home-topic .bibh-home-topic-name { font-size: 13px; font-weight: 800; line-height: 1.25; }
.bibh-tchacc__grid .bibh-home-topic .bibh-home-topic-m { font-size: 11.5px; }
.bibh-tchacc__grid .bibh-home-lbl { font-size: 11px; letter-spacing: .07em; margin: 2px 0 9px; }
.bibh-tchacc__grid .bibh-home-ch-title { font-size: 15px; }
.bibh-tchacc__grid .bibh-home-dot { width: 6px; height: 6px; }

/* Classroom code, promoted out of the old KPI row into the hero. */
/* Classroom code: ONE line, the code and what pressing it does, sitting under
   the class name where the date used to be. It was a stacked block twice the
   height for the same two pieces of information. */
/* T-09: Gavin's code pill. Outlined in white on the navy, amber type, and a
   solid lower edge so it reads as the pressable thing it is (it copies). */
.bibh-tdash__code {
    display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
    align-self: center; margin-top: 0;
    border: 2px solid #fff; border-radius: 30px; cursor: pointer;
    background: #fff; color: var(--bibh-dark, #203D48);
    padding: 7px 18px; font: inherit;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.15), 0 4px 0 #0b1b21;
    margin-bottom: 4px;
    transition: transform .12s, box-shadow .12s, color .15s;
}
/* White fill, navy text, at rest and on hover alike: the orange is gone
   (Ashton, 2 Sep 2026). The hover block is kept and states every colour
   explicitly so the theme's own button rules cannot repaint the pill as the
   pointer crosses it, which is the fault that turned the Past Assignments
   control white-on-white. The two spans set their own colour, so the hover has
   to reach them as well as the button. */
.bibh-tdash__code:hover,
.bibh-tdash__code:focus,
.bibh-tdash__code:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--bibh-dark, #203D48);
}
.bibh-tdash__code:hover .bibh-tdash__code-n,
.bibh-tdash__code:hover .bibh-tdash__code-l,
.bibh-tdash__code:focus .bibh-tdash__code-n,
.bibh-tdash__code:focus .bibh-tdash__code-l,
.bibh-tdash__code:focus-visible .bibh-tdash__code-n,
.bibh-tdash__code:focus-visible .bibh-tdash__code-l { color: var(--bibh-dark, #203D48); }
.bibh-tdash__code:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(0,0,0,.15), 0 0 0 #0b1b21; }
.bibh-tdash__code-n { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--bibh-dark, #203D48); }
.bibh-tdash__code-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: .8; color: var(--bibh-dark, #203D48); }
/* T-09: the class name and its code sit on ONE line. They were stacked, which
   is most of what made the bar tall. */
.bibh-tdash__title-wrap { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }

/* eBook / Activity Book, outlined on the navy hero so they read as secondary to
   Assign and Blitz without disappearing into it. */
.bibh-tdash__book,
.bibh-tdash__book:visited {
    display: inline-flex; align-items: center; border-radius: 30px;
    padding: 10px 20px; border: 1.5px solid rgba(255,255,255,.32);
    background: transparent; color: #fff; font-weight: 800; font-size: 14px;
    text-decoration: none; white-space: nowrap;
}
.bibh-tdash__book:hover,
.bibh-tdash__book:focus { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }

/* Clear-from-tracker */
.bibh-tdash__assign-x {
    flex: 0 0 auto; width: 28px; height: 28px; margin-left: 6px; border: 0; cursor: pointer;
    border-radius: 50%; background: transparent; color: var(--bibh-text-muted, #7b8b91); font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    /* Astra puts a drop shadow on every button it can reach, which on a 28px
       circle reads as a smudge rather than a control. */
    box-shadow: none;
    transition: background .14s, color .14s;
}
.bibh-tdash__assign-x:hover,
.bibh-tdash__assign-x:focus {
    background: #fbe7e2; color: var(--bibh-danger, #d5533c); box-shadow: none;
}
.bibh-tdash__assign-x[disabled] { opacity: .4; cursor: default; }
/* A legacy row carries no id, so it gets a spacer instead of a button and the
   rows above and below still line up. */
.bibh-tdash__assign-x.is-empty { display: inline-block; background: none; pointer-events: none; }

/* Star picker: the rows are the student's CHAPTER CARDS, not the plain library
   rows the overlay ships with. Same 30px corner, same shadow, same deepening on
   hover and the same title size, so a teacher starring chapters and a student
   reading them recognise one object. The box itself goes white: the neutral
   ground behind white rows made the modal read as two greys.
   Scoped to .bibh-tstar so the student's own browse modal is untouched. */
.bibh-tstar .bibh-home-lib { background: #fff; }
.bibh-tstar .bibh-home-lib-row {
    border-radius: 30px;
    box-shadow: var(--bibh-shadow-strong, 0 6px 20px rgba(32, 61, 72, .16));
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: box-shadow .15s ease;
}
.bibh-tstar .bibh-home-lib-row:hover { box-shadow: 0 10px 28px rgba(32, 61, 72, .28); }
.bibh-tstar .bibh-home-lib-n .ct { font-size: 20px; font-weight: 700; }

/* Star picker and mind maps reuse the student overlay shell (bibh-home-overlay,
   bibh-home-lib); these are only the bits it has no equivalent for. */
.bibh-tstar[hidden], .bibh-tmm[hidden] { display: none; }
/* The rows use the student's own .bibh-home-pin-toggle now, so the bespoke
   labelled pill and the Save footer that went with it are gone. */
.bibh-tstar__none { padding: 20px; text-align: center; color: var(--bibh-text-muted, #7b8b91); }
.bibh-tmm__img { display: block; width: 100%; height: auto; border-radius: 16px; margin-bottom: 14px; }
.bibh-tmm__loading { padding: 24px; text-align: center; color: var(--bibh-text-muted, #7b8b91); }

@media (max-width: 640px) {
    .bibh-tchacc__head { gap: 8px; }
    .bibh-tchacc__star { width: 100%; }
    .bibh-tchacc__badge { font-size: 10.5px; padding: 4px 9px; }
}


/* ── T-03 assignment row parts (Gavin's mockup) ───────────────────────────── */
.bibh-tdash__assign-meta { flex: 1; min-width: 0; }
.bibh-tdash__assign-t { font-weight: 700; font-size: 14px; }
.bibh-tdash__assign-due { color: #9aacb4; font-weight: 600; font-size: 12px; margin-top: 2px; }
.bibh-tdash__assign-due.bibh-tdash__due--overdue { color: var(--bibh-danger, #dc2626); }
/* How many have handed up, in the type's own ink so the row reads as one thing. */
.bibh-tdash__assign-done {
    font-weight: 800; font-size: 14px; flex: none;
    color: var(--type, var(--bibh-dark, #203D48));
    font-variant-numeric: tabular-nums;
}
/* 30px per the house rule, not his 999px; at this size they render the same. */
.bibh-tdash__assign-rev,
.bibh-tdash__assign-rev:hover,
.bibh-tdash__assign-rev:focus,
.bibh-tdash__assign-rev:visited {
    display: inline-flex; align-items: center; flex: none;
    background: var(--bibh-dark, #203D48); color: #fff;
    font-weight: 700; font-size: 12px;
    padding: 6px 14px; border-radius: 30px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.bibh-tdash__assign-rev:hover { filter: brightness(1.3); }
.bibh-tdash__assign-rev:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }

/* The row is no longer a grid, so the old narrow-screen grid rules do not
   apply. It wraps instead: chip and title hold the first line, the count and
   the actions drop to the second rather than crushing the title. */
@media (max-width: 700px) {
    .bibh-tdash__assign { flex-wrap: wrap; }
    .bibh-tdash__assign-meta { flex: 1 1 60%; }
    .bibh-tdash__assign-rev { margin-left: auto; padding: 9px 14px; }
}


/* ── The house confirm dialog ─────────────────────────────────────────────
   Replaces window.confirm on the two destructive actions. Sits on the same
   overlay the other modals use, so it dims the page the same way. */
.bibh-confirm { align-items: center; justify-content: center; z-index: 100200; }
.bibh-confirm__box {
    background: #fff; border-radius: 24px; padding: 26px 28px 22px;
    width: min(440px, calc(100vw - 32px));
    box-shadow: 0 24px 60px rgba(32, 61, 72, .32);
    display: flex; flex-direction: column; gap: 10px;
}
.bibh-confirm__t { margin: 0; font-size: 21px; font-weight: 800; color: var(--bibh-dark, #203D48); }
.bibh-confirm__b { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bibh-text-light, #666); }
.bibh-confirm__acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.bibh-confirm__no,
.bibh-confirm__yes {
    border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
    padding: 12px 22px; border-radius: 30px; white-space: nowrap;
}
.bibh-confirm__no { background: var(--bibh-neutral-light, #f4f5f4); color: var(--bibh-dark, #203D48); }
.bibh-confirm__no:hover { background: #e8ebe8; }
/* The destructive choice is the red one, and it is NOT the one focus lands on. */
.bibh-confirm__yes { background: var(--bibh-danger, #dc2626); color: #fff; box-shadow: 0 4px 0 #96201f; }
.bibh-confirm__yes:hover { filter: brightness(1.08); }
/* The constructive variant. Same button, opposite meaning: this one is for an
   action the teacher is asking for rather than one they might regret. */
.bibh-confirm__yes.is-go { background: var(--bibh-primary, #3F8170); box-shadow: 0 4px 0 #2c5c50; }
.bibh-confirm__yes.is-go:active { box-shadow: 0 0 0 #2c5c50; }
.bibh-confirm__yes:active { transform: translateY(4px); box-shadow: 0 0 0 #96201f; }
.bibh-confirm__no:focus-visible,
.bibh-confirm__yes:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bibh-confirm__yes:active { transform: none; } }
@media (max-width: 480px) {
    .bibh-confirm__acts { flex-direction: column-reverse; }
    .bibh-confirm__no, .bibh-confirm__yes { width: 100%; }
}


/* ── T-08: My Other Classes, on the header row ────────────────────────────
   Gavin's values: a 2px #cfe4ec outline, 14px/700 ink, 8px 20px, fully round.
   Outlined rather than filled on purpose: it is the quiet way out of a class,
   and it sits beside three saturated keys, so a fourth filled pill would read
   as a fourth destination. */
.bibh-tnav__others,
.bibh-tnav__others:hover,
.bibh-tnav__others:focus,
.bibh-tnav__others:active,
.bibh-tnav__others:visited {
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #cfe4ec; background: transparent;
    color: var(--bibh-dark, #203D48);
    font-family: inherit; font-weight: 700; font-size: 14px;
    padding: 8px 20px; border-radius: 30px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    margin-right: 12px;
    transition: background .15s, border-color .15s;
}
.bibh-tnav__others:hover,
.bibh-tnav__others:focus { background: #eef6f9; border-color: #b6d6e4; }
.bibh-tnav__others:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }

/* The label swap this control always claimed to do, and never did.
   Below the header's own breakpoint the row carries the logo, three keys and
   the account, and the long label is what pushed the keys onto a second line -
   measured at 768px, one line without this control, two with it. Only one span
   is ever displayed, so the hidden one leaves the accessible name alone
   (display:none is out of the a11y tree). */
.bibh-tnav__others-short { display: none; }
@media (max-width: 921px) {
    .bibh-tnav__others-long  { display: none; }
    .bibh-tnav__others-short { display: inline; }
}

/* On a phone the header already carries the logo, the three keys and the
   account, so the control tightens up on top of the shorter label. */
@media (max-width: 600px) {
    .bibh-tnav__others { font-size: 12.5px; padding: 8px 12px; margin-right: 8px; }
}


/* ── T-06: the student table's new columns ────────────────────────────────
   Recent assignments is three score chips, newest first, each banded by how it
   went so a run of red is visible without reading the numbers. The band is the
   point: a teacher scanning thirty rows is looking for trouble, not arithmetic. */
.bibh-tdash__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bibh-tdash__chip {
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 44px; padding: 4px 8px; border-radius: 30px;
    line-height: 1.1; white-space: nowrap;
}
.bibh-tdash__chip b { font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bibh-tdash__chip i { font-style: normal; font-weight: 700; font-size: 8.5px; letter-spacing: .08em; opacity: .75; }
.bibh-tdash__chip--good { background: #e3f3ec; color: #1f6b53; }
.bibh-tdash__chip--mid  { background: #fdf1dc; color: #9a6612; }
.bibh-tdash__chip--bad  { background: #fdeae7; color: #a83226; }

.bibh-tdash__done { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--bibh-dark, #203D48); }
.bibh-tdash__done.is-all { color: var(--bibh-primary, #3F8170); }

/* Sortable headings. Only three carry it, the ones Gavin marked. The caret is
   a border triangle rather than a glyph, because this theme collapses an
   unclassed inline SVG to 1px and a glyph would sit on the text baseline. */
.bibh-tdash__stutable th.is-sortable {
    cursor: pointer; user-select: none; white-space: nowrap;
}
.bibh-tdash__stutable th.is-sortable:hover { color: var(--bibh-dark, #203D48); }
.bibh-tdash__stutable th.is-sortable:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: -2px; }
.bibh-tdash__stutable th.is-sortable i {
    display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: .25;
}
.bibh-tdash__stutable th[aria-sort="ascending"] i  { opacity: .9; transform: rotate(180deg); }
.bibh-tdash__stutable th[aria-sort="descending"] i { opacity: .9; }

/* The chips and the done count are the first things to go when the table runs
   out of room: the name, the score and the actions are what a teacher needs on
   a phone, and the table already scrolls inside its own card. */
@media (max-width: 900px) {
    .bibh-tdash__chip { min-width: 40px; padding: 3px 7px; }
    .bibh-tdash__chip b { font-size: 11.5px; }
}


/* The heading over a chapter's student-facing tiles. Bigger than the filter
   label under it, because it names the whole block rather than the row. */
.bibh-tchacc__reshead {
    margin: 4px 0 10px;
    font-size: 17px; font-weight: 800;
    color: var(--bibh-dark, #203D48);
}


/* ── The four quiz build options, inside the Assign modal ─────────────────
   Pressable keys like the type row above them and the hub tabs: a round pill, an
   inset highlight along the top, and a SOLID lower edge in a darker shade of the
   button's own colour, so they read as things you press rather than as a list
   you read (Ashton, 2026-08-31). Text centred.

   Colours are hub tokens, and deliberately NOT the same four as the type row
   directly above, or the modal would show the same palette twice meaning two
   different things. */
.bibh-asg__modes { margin-top: 18px; }
.bibh-asg__modes-h {
    font-weight: 800; font-size: 15px; text-align: center;
    color: var(--bibh-dark, #203D48); margin-bottom: 14px;
}
.bibh-asg__modes-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.bibh-asg__mode,
.bibh-asg__mode:hover,
.bibh-asg__mode:focus,
.bibh-asg__mode:visited {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center;
    padding: 18px 16px; border-radius: 30px; border: 0;
    text-decoration: none; cursor: pointer;
    margin-bottom: 6px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 6px 0 var(--edge, #0083c0);
    transition: transform .12s, box-shadow .12s, filter .15s;
}
/* Every state is written out, not just the base one. The labels take their
   colour from the anchor with `inherit`, and the THEME sets its own a:hover
   colour, so on hover the ink was being replaced with Astra's link colour and
   the text washed out against the fill (Ashton, 2026-08-31). Restating the ink
   on hover, focus, active and visited is what keeps it readable. */
.bibh-asg__mode--builder,
.bibh-asg__mode--builder:hover,
.bibh-asg__mode--builder:focus,
.bibh-asg__mode--builder:active,
.bibh-asg__mode--builder:visited  { background: var(--bibh-act-quiz,  #00b2ff); --edge: #0083c0; color: #fff; }
.bibh-asg__mode--needs,
.bibh-asg__mode--needs:hover,
.bibh-asg__mode--needs:focus,
.bibh-asg__mode--needs:active,
.bibh-asg__mode--needs:visited    { background: var(--bibh-act-video, #049f84); --edge: #027a65; color: #fff; }
.bibh-asg__mode--surprise,
.bibh-asg__mode--surprise:hover,
.bibh-asg__mode--surprise:focus,
.bibh-asg__mode--surprise:active,
.bibh-asg__mode--surprise:visited { background: var(--bibh-act-terms, #ffde5c); --edge: #d9b53a; color: var(--bibh-dark, #203D48); }
.bibh-asg__mode--saved,
.bibh-asg__mode--saved:hover,
.bibh-asg__mode--saved:focus,
.bibh-asg__mode--saved:active,
.bibh-asg__mode--saved:visited    { background: var(--bibh-act-lab,   #94e3ff); --edge: #64c3e6; color: var(--bibh-dark, #203D48); }

.bibh-asg__mode:hover { filter: brightness(1.06); }
.bibh-asg__mode:active {
    transform: translateY(6px);
    box-shadow: inset 0 2px 0 rgba(0,0,0,.12), 0 0 0 var(--edge, #0083c0);
}
.bibh-asg__mode:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
.bibh-asg__mode-t { font-weight: 800; font-size: 16px; color: inherit; }
/* The subline inherits the button's ink rather than taking a muted grey, which
   went invisible on the two dark fills. */
.bibh-asg__mode-s { font-weight: 600; font-size: 12.5px; color: inherit; opacity: .88; }
.bibh-asg__mode:hover .bibh-asg__mode-t,
.bibh-asg__mode:hover .bibh-asg__mode-s { color: inherit; }
@media (prefers-reduced-motion: reduce) { .bibh-asg__mode { transition: none; } }
@media (max-width: 600px) {
    .bibh-asg__modes-grid { grid-template-columns: 1fr; gap: 12px; }
    .bibh-asg__mode { padding: 15px 14px; }
}


/* On a narrow screen the stats drop under the title and start from the left
   again, because a right-aligned group below a left-aligned title reads as
   belonging to nothing. */
@media (max-width: 700px) {
    .bibh-qr__stats { margin-left: 0; margin-top: 14px; }
}


/* Heatmap card: collapsible, same mechanic and same caret as the two cards
   above it, so the whole dashboard folds away the same way. */
.bibh-tdash__rcard .bibh-tdash__block-head--toggle { display: flex; align-items: center; gap: 10px; }
.bibh-tdash__heatchip {
    background: var(--bibh-heat, #3c887b); color: #fff; border-radius: 30px;
    padding: 3px 12px; font-size: 12px; font-weight: 800; letter-spacing: .2px;
}

/* ── Students View: the way out ───────────────────────────────────────────
   The preview rides the full-bleed shell, which strips the sidebar and the
   header chrome, so this pinned link is the only exit that is not the browser's
   back button. Pinned rather than in the flow because the player below owns the
   whole stage and scrolls independently of it. */
.bibh-preview__exit {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--bibh-dark, #203D48);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 30px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 #cfd8dc;
    margin-bottom: 4px;
}
.bibh-preview__exit:hover,
.bibh-preview__exit:focus { filter: brightness(.97); color: var(--bibh-dark, #203D48); }
.bibh-preview__exit:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(0,0,0,.12), 0 0 0 #cfd8dc; }
@media (max-width: 600px) {
    .bibh-preview__exit { font-size: 12px; padding: 7px 13px; top: 8px; left: 8px; }
}

/* Students View tag on the shared activity modal (videos / mind maps / Exam
   Corner). The modal itself is the student's, so this is the only teacher-side
   mark on it: it sits in the head beside the title rather than floating over
   the content the teacher came to look at. */
.bibh-tsv__tag {
    /* Bottom left. The three activities disagree about what is at the top: the
       Exam Corner centres a timer there, the video modal is a centred box with
       the hub logo behind it, and the mind map goes full bleed. Bottom left is
       clear in all three, and a passive label does not need the top of the
       screen. */
    position: fixed;
    bottom: 18px;
    left: 16px;
    z-index: 100000;
    pointer-events: none;
    opacity: .88;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bibh-dark, #203D48);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .3px;
    padding: 4px 11px;
    border-radius: 30px;
    white-space: nowrap;
}

/* Only while the modal is actually open. The overlay itself is hidden until
   then, but the tag is pinned to the VIEWPORT, so without this it would sit on
   the dashboard permanently. */
#bibh-home-modal .bibh-tsv__tag { display: none; }
#bibh-home-modal.show .bibh-tsv__tag { display: inline-flex; }

/* ── Exam controls on the quiz review ──────────────────────────────────────
   An exam withholds its marks while the class is working, so the teacher needs
   somewhere to hand them over. Navy and gold, the same as the exam player and
   the student's card, so the three read as one thing. */
.bibh-qr__exambar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 0 0;
}

.bibh-qr__exambadge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 30px;
	background: var(--bibh-dark, #203D48);
	color: #fff;
	border: 2px solid var(--bibh-accent, #F3D76A);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* The banner is navy, so the note has to be white. It was inheriting the dark
   page ink and sitting almost invisibly on the dark ground (Ashton, 1 Sep 2026). */
.bibh-qr__examnote { font-size: 14px; color: #fff; opacity: .85; }

.bibh-qr__release {
	border: 0;
	border-radius: 30px;
	padding: 10px 22px;
	background: var(--bibh-primary, #3F8170);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.bibh-qr__release:disabled { opacity: .55; cursor: default; }

/* ── Quiz or exam, above the build options ─────────────────────────────────
   Same pressed-key language as .bibh-asg__mode below it, because it sits in
   the same modal and is the same kind of choice. Two differences on purpose:

   1. It is a TOGGLE, not four doors. The build options all lead somewhere, so
      none of them needs a chosen state; this one has to say which of the two
      is currently selected, or the teacher cannot tell what they are about to
      build. Unselected sits pale and flat; selected takes its fill and its
      shadow. That is the whole signal.

   2. It does not reuse the build options' four colours. Those already mean
      "how", and repeating the palette here would make the same green mean two
      different things one row apart.

   The labels are blocks. As inline spans they ran together on one line and
   read as "Quiz Study tool. Pays XP" - one sentence rather than a name and an
   explanation (Ashton, 1 Sep 2026). */
.bibh-asg__kind {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.bibh-asg__kind-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
    padding: 16px 14px;
    border-radius: 30px;
    border: 2px solid #dfe3e6;
    background: #f4f6f7;
    color: var(--bibh-dark, #203D48);
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 6px;
    box-shadow: 0 4px 0 #dfe3e6;
    transition: transform .12s, box-shadow .12s, background .15s, border-color .15s;
}

.bibh-asg__kind-t {
    display: block;
    font-weight: 800;
    font-size: 16px;
    color: inherit;
}

.bibh-asg__kind-s {
    display: block;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.35;
    color: inherit;
    opacity: .8;
}

.bibh-asg__kind-b:hover { filter: brightness(.98); }

/* Chosen. The fill and the coloured edge are what separate this from the
   other one, so the state survives being seen at a glance across a room. */
.bibh-asg__kind-b[data-kind="quiz"].is-on {
    background: var(--bibh-act-video, #049f84);
    border-color: var(--bibh-act-video, #049f84);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 6px 0 #027a65;
    color: #fff;
}

.bibh-asg__kind-b[data-kind="exam"].is-on {
    background: var(--bibh-dark, #203D48);
    border-color: var(--bibh-accent, #F3D76A);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 6px 0 #0f2028;
    color: #fff;
}

.bibh-asg__kind-b.is-on .bibh-asg__kind-s { opacity: .9; }

.bibh-asg__kind-b:active {
    transform: translateY(4px);
    box-shadow: inset 0 2px 0 rgba(0,0,0,.12), 0 0 0 #dfe3e6;
}

.bibh-asg__kind-b:focus-visible {
    outline: 3px solid var(--bibh-dark, #203D48);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) { .bibh-asg__kind-b { transition: none; } }

@media (max-width: 600px) {
    .bibh-asg__kind { grid-template-columns: 1fr; gap: 12px; }
    .bibh-asg__kind-b { padding: 14px 12px; }
}

/* The star that says why a chapter is at the top of the assign picker. Gold on
   the row, small: it is a reason, not a decoration, and the chapter title is
   still the thing being read. */
.bibh-asg__cstar {
	color: var(--bibh-accent, #F3D76A);
	font-size: 13px;
	line-height: 1;
	vertical-align: 1px;
}

/* Co-teaching badge on the navy dashboard bar.
   The lime fill used on the classroom cards would read as a cut-out sticker
   here, so this takes the outlined treatment the eBook buttons on this same bar
   already use. The hero has one deliberately loud element, the white classroom
   code, and it stays the loudest: teachers reach for that. The faces keep their
   own colours, since they are people and read on either ground. */
.bibh-coteach--hero {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .32);
    color: #fff;
    padding: 5px 14px 5px 6px;
    font-size: .78rem;
    margin-bottom: 4px;
}

.bibh-coteach--hero .bibh-coteach__face {
    border-color: var(--bibh-dark, #203D48);
    width: 22px;
    height: 22px;
    font-size: .62rem;
}

/* ── Classroom card: secondary text reads like our text ──────────────────────
   Three things on the card were set back until they were hard to read: the
   description at weight 300 in mid grey, the roster count at 55% opacity and
   the "Classroom Code:" label at 60%. Each was a deliberate hierarchy decision
   on a white card, and each falls apart on a coloured one, where thin grey on
   yellow is nearly invisible.

   Hierarchy is still there, carried by size, weight and case, which survive any
   background. It no longer leans on fading text out. The description takes the
   card's own ink like the cog does, so it reads on all eight colours and on the
   default white card, and League Spartan at 300 is too thin for body text at
   this size in any case. */
.bibh-card--classroom .bibh-card__desc {
    color: var(--bibh-ccink, var(--bibh-dark, #203D48));
    font-weight: 500;
}

/* The number is still smaller than the label it belongs to. That is enough to
   keep it subordinate without making it hard to read. */
.bibh-badge__count {
    opacity: 1;
}

/* Already 11.5px against a 15px code, and lighter in weight. It does not need
   to be faded as well. */
.bibh-classroom-code__label {
    opacity: 1;
}

/* ── Students modal: paging and select all ───────────────────────────────────
   A class of 30 used to render as one long scroll inside a modal that already
   scrolls, so the roster ran past the bottom of its own box. Both lists page at
   20. The pager hides itself when everything fits, because a control that can
   never do anything is just something else to read. */
.bibh-cl-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-family: var(--bibh-font);
}

.bibh-cl-pager__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bibh-text-light, #666);
}

.bibh-cl-pager__nums {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.bibh-cl-pager__b {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 30px;
    border: 1px solid var(--bibh-border, #e2e5ea);
    background: #fff;
    color: var(--bibh-dark, #203D48);
    font-family: var(--bibh-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.bibh-cl-pager__b:hover:not(:disabled):not(.is-on) {
    border-color: var(--bibh-primary, #3F8170);
    color: var(--bibh-primary, #3F8170);
}

/* The current page is stated by fill, not just by weight: at 13px a bolder
   number against other bold numbers is not a difference you can see. */
.bibh-cl-pager__b.is-on {
    background: var(--bibh-primary, #3F8170);
    border-color: var(--bibh-primary, #3F8170);
    color: #fff;
    cursor: default;
}

.bibh-cl-pager__b:disabled {
    opacity: .4;
    cursor: default;
}

.bibh-cl-pager__gap {
    color: var(--bibh-text-muted, #888);
    padding: 0 2px;
}

.bibh-cl-selectall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 8px;
    font-family: var(--bibh-font);
}

.bibh-cl-selectall label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bibh-dark, #203D48);
    cursor: pointer;
}

.bibh-cl-selectall input {
    width: 16px;
    height: 16px;
    accent-color: var(--bibh-primary, #3F8170);
    cursor: pointer;
}

.bibh-cl-selectall__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bibh-primary, #3F8170);
}

/* Who set an assignment, on the tracker row. Only rendered on a class that is
   actually shared, so it never repeats the same name down a solo teacher's
   list. Sized and coloured as a fact about the row, not as another control. */
.bibh-tdash__assign-by {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 30px;
    background: #EDF4DC;
    border: 1px solid var(--bibh-lime, #D2E08C);
    color: #4A6112;
    font-family: var(--bibh-font);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Classroom card footer: let it wrap ──────────────────────────────────────
   The shared rule is `space-between` with no gap and no wrap, which was fine
   while every card held exactly two things. The co-teaching badge makes it
   three, and three nowrap pills do not fit a card in a three column grid, so
   the classroom code was pushed off the right edge.

   space-between was also what flung the two items apart on a card with no
   badge, leaving a hole in the middle of the row. Left aligned with a real gap
   fixes both: items sit together, and a third one drops to its own line rather
   than off the card. Scoped to the classroom card so no other card that uses
   this footer changes. */
.bibh-card--classroom .bibh-card__footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

/* ── Classroom card footer: one voice for all three pills ────────────────────
   "VIEW STUDENTS" was being shouted by ANOTHER PLUGIN. Quiz Builder's front.css
   declares a bare `.bibh-badge { text-transform: uppercase }`, and this button
   carries `bibh-badge bibh-badge--students-btn`. Both selectors weigh the same,
   so it came down to load order and Quiz Builder won. The suite already said
   `text-transform: none` and simply lost the race.

   Fixed by weight rather than by !important: scoping to the card takes this to
   two classes, which beats a bare `.bibh-badge` outright and keeps the rule
   honest. The real problem is a shared prefix with unscoped rules in it, and
   that belongs in Quiz Builder rather than here.

   Everything else in this block is the same idea as the shouting: three pills
   sitting on one row should read as one row. Same face, same size, same weight,
   same case. Differences between them are carried by what they SAY. */
.bibh-card--classroom .bibh-card__footer .bibh-badge--students-btn,
.bibh-card--classroom .bibh-card__footer .bibh-classroom-code,
.bibh-card--classroom .bibh-card__footer .bibh-classroom-code--copy,
.bibh-card--classroom .bibh-card__footer .bibh-coteach {
    font-family: var(--bibh-font);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: none;
    line-height: 1.2;
}

/* The count and the "Classroom Code:" caption were each a size down and faded.
   Two different ways of saying "less important" on a row that is only four
   words long, which just made the row look unfinished. */
.bibh-card--classroom .bibh-card__footer .bibh-badge__count,
.bibh-card--classroom .bibh-card__footer .bibh-classroom-code__label {
    font-size: 12.5px;
    font-weight: 800;
    opacity: 1;
    letter-spacing: normal;
    text-transform: none;
}

/* The code itself keeps its slight tracking. It is read aloud and typed by
   hand, and that is a legibility need rather than a style flourish. */
.bibh-card--classroom .bibh-card__footer .bibh-classroom-code,
.bibh-card--classroom .bibh-card__footer .bibh-classroom-code--copy {
    letter-spacing: .04em;
}

/* ── Students modal: icon actions ────────────────────────────────────────────
   Three worded buttons per row filled most of the width and turned the roster
   into a wall of the same two phrases. At 43 students that is 86 readings of
   "Reset password" and "Move", none of which are about the student whose row it
   is. The words move to the tooltip and the aria-label; the row goes back to
   being about the person.

   Same size and shape as the remove X they sit beside, so the three read as one
   set of controls rather than two icons and a cross. */
.bibh-cl-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 32px;
    border-radius: 50%;
    border: 1.5px solid var(--bibh-border, #e2e5ea);
    background: #fff;
    color: var(--bibh-text-light, #5a6b76);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.bibh-cl-ibtn:hover:not(:disabled) {
    color: var(--bibh-primary, #3F8170);
    border-color: var(--bibh-primary, #3F8170);
    background: var(--bibh-primary-light, #e8f5f0);
}

.bibh-cl-ibtn:focus-visible {
    outline: 2px solid var(--bibh-dark, #203D48);
    outline-offset: 2px;
}

/* The theme collapses unclassed inline SVGs to 1px. These are classed AND sized
   here as well as in the markup, because an icon that silently disappears
   leaves a button with nothing in it and no clue why. */
.bibh-cl-ibtn .bibh-cl-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: block;
}

/* Sending, then sent. The tooltip changes with it, so the state is readable
   without the notice underneath. */
.bibh-cl-ibtn.is-working {
    opacity: .55;
    cursor: default;
}

.bibh-cl-ibtn.is-done {
    color: var(--bibh-success, #049F84);
    border-color: var(--bibh-success, #049F84);
    background: var(--bibh-success-light, #ecfdf5);
    cursor: default;
}

/* ── Create New Classroom: fields you can actually see ───────────────────────
   The inputs took the shared 1px --bibh-border, which is #e2e5ea. On the pale
   card these sit on, that is close enough to the background that the fields
   read as faint outlines rather than boxes waiting for an answer, and the
   rounded 30px corners soften them further.

   Navy at 2px instead. Not pure black: the house ink is #203D48, it reads as
   black at this weight, and a true #000 would be the only one on the page.
   Scoped to this form, so no other input in the suite changes. */
#bibh-create-classroom-form .bibh-input,
#bibh-create-classroom-form textarea.bibh-input {
    border: 2px solid var(--bibh-dark, #203D48);
}

/* Focus still has to say something the resting state does not, so it moves to
   the action green rather than just thickening what is already 2px. */
#bibh-create-classroom-form .bibh-input:focus,
#bibh-create-classroom-form textarea.bibh-input:focus {
    border-color: var(--bibh-primary, #3F8170);
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 129, 112, .18);
}

/* The placeholder was as pale as the border it sat inside. */
#bibh-create-classroom-form .bibh-input::placeholder {
    color: var(--bibh-text-muted, #7c8a93);
}

/* ── Students modal: more room, desktop only ─────────────────────────────────
   It inherits .bibh-home-settings-box at 560px, which suits a settings panel of
   a few fields. This one carries two lists that can each run to pages, and at
   560px a student's email had to share a line with three action buttons while
   the roster scrolled inside a box using half the screen.

   Widened and deepened only where there is genuinely room for it. Below 960px
   nothing changes: the phone and tablet layout was never the problem, and a
   modal that outgrows its viewport is worse than a narrow one. Scoped by id so
   the classroom settings and teacher settings modals, which share this chrome
   and really are a few fields, stay as they are. */
@media (min-width: 960px) {
    #bibh-cl-students-modal .bibh-home-settings-box {
        max-width: 880px;
    }

    /* 66vh left a wide modal looking short. 78vh still leaves the page visible
       behind it, so it reads as a layer over the class rather than a new page. */
    #bibh-cl-students-modal .bibh-home-lib-body {
        max-height: 78vh;
        padding-left: 28px;
        padding-right: 28px;
    }

    /* The extra width goes to the name and address, not to the gap before the
       buttons: the email is the thing a teacher reads to tell two students
       apart, and it was the first thing to truncate. */
    #bibh-cl-students-modal .bibh-cl-person__id {
        min-width: 0;
        flex: 1 1 auto;
    }

    #bibh-cl-students-modal .bibh-cl-person__mail {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}