/**
* Job 7 student home (Stage 1). Uses the real bibh-classroom-suite design
* tokens from common.css (League Spartan, muted teal, accent yellow, rounded
* cards). Additive, scoped under .bibh-home / .bibh-home-* so it can't touch
* the existing dashboard.
*/
.bibh-home {
/* Full-width platform (pass 1 correction): the student home fills the
shell like the teacher dashboard, no container cap (was 900px, then
briefly the 1140 token). The shell + .bibh-hub gutters keep cards off
the viewport edge. */
max-width: none;
margin: 0 auto;
font-family: var(--bibh-font);
color: var(--bibh-text);
}
.bibh-home .card {
background: var(--bibh-white);
border: 1px solid var(--bibh-border);
border-radius: 24px;
box-shadow: var(--bibh-shadow-sm);
}
/* ── Inline notice (non-blocking; replaces window.alert) ──── */
/* A FIXED toast, not a block at the top of the page.
It used to be inserted as the first child of the dashboard, so a student
scrolled down at a chapter who tapped Flashcards on a topic with no cards
got a perfectly good "no flashcards for this topic yet" message rendered
hundreds of pixels above the fold. It read as the button doing nothing. */
.bibh-home-notice {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 100002;
transform: translate(-50%, 180%);
opacity: 0;
pointer-events: none;
max-width: min(520px, calc(100vw - 32px));
background: var(--bibh-dark, #203D48);
color: #fff;
border: none;
border-radius: var(--bibh-radius-pill, 30px);
padding: 14px 24px;
font-size: 13.5px;
font-weight: 800;
line-height: 1.4;
text-align: center;
box-shadow: 0 12px 30px rgba(32, 61, 72, .3);
transition: transform .25s ease, opacity .25s ease;
}
.bibh-home-notice.show { transform: translate(-50%, 0); opacity: 1; }
.bibh-home-notice.is-error { background: #b5301f; color: #fff; }
/* ── Dashboard background tint (student home only) ─────────────
* Soft cyan behind the white cards. :has() scopes it to pages whose
* suite is the student HOME view; teacher views, activities and
* ordinary WP pages keep their own backgrounds. The article/content
* wrappers are made transparent so the body tint shows through. */
body:has(.bibh-suite--student.bibh-suite--home) { background: #c9eff060; }
body:has(.bibh-suite--student.bibh-suite--home) .site-main > article,
body:has(.bibh-suite--student.bibh-suite--home) .site-content { background: transparent; }
/* suite.css paints .bibh-suite__main white (unscoped, ~line 524), that rule
stays for teacher/other views; the DASHBOARD main goes transparent so the
body tint shows through (0,3,0 beats its 0,1,0). */
.bibh-suite--student.bibh-suite--home .bibh-suite__main { background: transparent; }
/* Breathing room above the game row (supersedes the immersive zero-top here). */
.bibh-suite--student.bibh-suite--home { padding-top: 20px; }
/* ── Game status row (dashboard redesign, mockup v15) ─────── */
/* Arcade edge tokens: darker shades of the #FFA700 daily button. */
:root {
--arcade-edge: #d18a00;
--arcade-edge-soft: #c98200;
/* STUDENT-FACING medal palette (replaces RAG for students only; RAG
stays for the algorithm + every teacher view). */
--medal-gold: #E3B341;
--medal-silver: #94A3B1;
--medal-bronze: #B87333;
--medal-none: #203D48; /* below 55 = calm navy, never red */
/* Shared prismatic FOIL fills, the SAME gradient feeds the medal chips
and the chapter progress bar so they match (v20 mockup; note the
lighter gold Ashton signed off). Navy stays flat. */
--medal-gold-grad: linear-gradient(115deg, #DDB94E, #F1D471 16%, #FDF4CC 32%, #EAC85E 50%, #DBB24A 66%, #FBEBB6 82%, #D9AE44 100%);
--medal-silver-grad: linear-gradient(115deg, #A9B3BD, #EEF2F6 16%, #FFFFFF 32%, #CFD7DF 50%, #A9B3BD 66%, #F2F5F8 82%, #9EA9B3 100%);
--medal-bronze-grad: linear-gradient(115deg, #8F5327, #BE7B3D 16%, #F1C79A 32%, #CD8A4E 50%, #8A4F24 66%, #EBB483 82%, #7A461C 100%);
}
.game-row { display: flex; gap: 18px; align-items: stretch; margin-bottom: 34px; }
.game-row > * { min-width: 0; }
.bibh-home-stat {
background: #fff;
border: 1px solid var(--bibh-border);
border-radius: 30px;
padding: 16px 20px;
box-shadow: var(--bibh-shadow-strong);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
flex: 0 0 12%;
}
/* The two stat labels are navy at 800, same as their numbers. Grey read as a
caption on something else rather than as the name of the figure under it.
Today's XP keeps the muted label: it is a wide bar, not a tile, and darkening
its heading made the row read as three competing headings. */
.bibh-home-stat .k { font-size: 20px; font-weight: 800; color: var(--bibh-dark, #203D48); text-transform: uppercase; letter-spacing: .05em; }
/* "TAKE 10 STREAK" is more than twice the length of "STREAK". At the shared
20px it wrapped to THREE lines in the 168px tile and grew the tile from 165
to 197px, which drags the whole game row taller because the tiles stretch to
match. Smaller and tighter on this tile only: it lands on two lines
("TAKE 10" / "STREAK") and the row keeps its height. */
.bibh-home-stat.streak .k { font-size: 15px; letter-spacing: .03em; line-height: 1.15; }
/* Both stat numbers are the house navy. They were sky blue and amber, which put
two more colours in a row that already has an orange button and a flame. */
.bibh-home-stat .v { font-size: 30px; font-weight: 700; color: var(--bibh-dark, #203D48); line-height: 1.05; margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.bibh-home-coin { height: 35px; width: auto; flex: none; }
/* ── D-04: the grab handle ────────────────────────────────────────────────
On the LEFT, as the audit asks, and only on chapters the student pinned
themselves. Three bars, quiet until you go near them.
touch-action:none is on the HANDLE and nowhere else. Putting it on the card
would stop the chapter list scrolling on a phone, which is a much worse bug
than the one it would be solving. */
.bibh-home-grab {
flex: 0 0 auto;
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 3px;
width: 26px;
padding: 6px 8px;
margin-right: 4px;
cursor: grab;
touch-action: none;
border-radius: 8px;
opacity: .45;
transition: opacity .15s, background .15s;
}
.bibh-home-grab span {
display: block;
height: 2px;
border-radius: 2px;
background: var(--bibh-dark, #203D48);
}
.bibh-home-grab:hover { opacity: 1; background: var(--bibh-neutral-light); }
.bibh-home-grab:active { cursor: grabbing; }
/* The card being carried. Lifted, and above its neighbours so it is never
half-hidden behind the one it is passing. */
.bibh-home-chapter.is-dragging {
position: relative;
z-index: 20;
cursor: grabbing;
box-shadow: 0 18px 40px rgba(32, 61, 72, .28);
opacity: .96;
}
/* Neighbours slide rather than jump, so the swap is legible at speed. */
.bibh-home-chapter { transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
.bibh-home-chapter.is-dragging { transition: none; }
@media (prefers-reduced-motion: reduce) {
.bibh-home-chapter { transition: none; }
}
/* Saving is a whole-list state, not a spinner on one card: the ORDER is what
is being written, and that belongs to the list. */
#bibh-home-chapters.is-saving { cursor: progress; }
/* ── Free passes, a chip inside the streak tile ───────────────────────────
Ashton picked the compact form: the passes ride along with the number they
protect rather than taking a card of their own. That frees a slot in the top
row, which was carrying five tiles across a single flex line.
The chip carries its own icon and reads "2/3", never a bare "2". Beside a
streak number a lone digit is too easy to read as part of the streak, and the
pair states the cap without costing a line of copy.
There is no button in here. Passes are spent automatically on the server and
the student is told in a popup, so the chip only ever reports. */
.bibh-home-passchip {
display: inline-flex; align-items: center; gap: 5px; flex: none;
margin-left: 2px; padding: 4px 11px 4px 8px;
border-radius: 30px;
background: var(--bibh-warning-light, #fffbeb); color: #c47f00;
font-size: 15px; font-weight: 900; line-height: 1;
cursor: default;
}
.bibh-home-passchip.is-empty { background: var(--bibh-neutral-light, #f3f5f4); color: var(--bibh-text-muted, #888); }
.bibh-home-passchip__ico { display: inline-flex; }
/* The theme collapses an unclassed inline SVG to 1px, so the size is set here. */
.bibh-home-passchip .bibh-home-pass__svg { width: 17px; height: 17px; display: block; }
.bibh-home-passchip__n { font-variant-numeric: tabular-nums; }
/* Held: solid amber slip with a white tick. Empty: the same shape, drawn faint,
so the chip still teaches what it is once a student has none left. */
.bibh-home-pass__slip { fill: var(--bibh-warning, #FFA700); stroke: #c47f00; stroke-width: 1.4; stroke-linejoin: round; }
.bibh-home-pass__fold { fill: #ffce7a; stroke: #c47f00; stroke-width: 1.4; stroke-linejoin: round; }
.bibh-home-pass__tick { fill: #fff; }
.bibh-home-passchip.is-empty .bibh-home-pass__slip { fill: none; stroke: currentColor; stroke-dasharray: 3 2.4; }
.bibh-home-passchip.is-empty .bibh-home-pass__fold { fill: none; stroke: currentColor; }
.bibh-home-passchip.is-empty .bibh-home-pass__tick { fill: currentColor; opacity: .55; }
/* Paused: the chip cools with the flame, because nothing is being spent. */
.bibh-home-stat.streak.is-paused .bibh-home-passchip {
background: var(--bibh-neutral-light, #f3f5f4); color: var(--bibh-text-muted, #888);
}
.bibh-home-stat.streak.is-paused .bibh-home-pass__slip { fill: #d5dbd8; stroke: #b9c2be; }
.bibh-home-stat.streak.is-paused .bibh-home-pass__fold { fill: #e7ebe9; stroke: #b9c2be; }
/* The streak tile centres its own contents. It now carries three things (label,
the number with its pass chip, and the break button) and left-aligning a
short row of three under a short label read as a list rather than one fact. */
/* The freed slot also buys Total XP some room. At 12% the level rail was a
caption and a stub of track; it can show progress now. */
.bibh-home-stat--xp { flex: 0 0 15%; }
/* Wider than the 12% every other stat gets: this tile carries the number, the
flame, the pass chip and the break button, where the others carry one fact.
A slot was freed by folding the passes in, so the room is there. */
.bibh-home-stat.streak { flex: 0 0 16%; }
/* What the streak is working towards. Amber, because it is about the pass chip
directly above it rather than about the streak number. */
.bibh-home-topass {
margin-top: 6px;
font-size: 13px; font-weight: 800; line-height: 1.2;
color: #c47f00; white-space: nowrap;
}
.bibh-home-topass.is-full { color: var(--bibh-text-muted); }
/* ── Break: the deliberate pause, inside the streak tile ───────────────
Quiet by default. It is a rare thing to press, so it must not compete with
the streak number it sits under. */
.bibh-home-break,
.bibh-home-break:hover,
.bibh-home-break:focus,
.bibh-home-break:active {
align-self: center; margin-top: 7px;
border: 1px solid var(--bibh-border, #d5dbd8); border-radius: 30px;
background: transparent; color: var(--bibh-text-muted);
font-family: inherit; font-weight: 800; font-size: 12px;
padding: 5px 13px; line-height: 1.1; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.bibh-home-break:hover { border-color: var(--bibh-warning, #FFA700); color: var(--bibh-warning, #FFA700); }
.bibh-home-break:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 2px; }
.bibh-home-break[disabled] { opacity: .5; cursor: default; }
/* Inside the fortnight between breaks: still tappable (the tap explains
itself), but visibly resting rather than offering. */
.bibh-home-break.is-cooling,
.bibh-home-break.is-cooling:hover {
border-style: dashed; border-color: var(--bibh-border, #d5dbd8);
color: var(--bibh-text-muted); opacity: .75;
}
/* On hold: the flame cools and the button states the fact rather than offering. */
.bibh-home-stat.streak.is-paused .v { color: var(--bibh-text-muted); }
.bibh-home-stat.streak.is-paused .bibh-home-streak-ico { filter: grayscale(1); opacity: .55; }
.bibh-home-stat.streak.is-paused .bibh-home-break,
.bibh-home-stat.streak.is-paused .bibh-home-break:hover {
background: var(--bibh-warning, #FFA700); border-color: var(--bibh-warning, #FFA700); color: #fff;
}
/* ── "A Free Pass was used" popup ────────────────────────────────────────
Shown once, on the load after a pass was spent. The whole point of spending
automatically is that the student is never surprised, so this has to be
unmissable rather than a toast that slides away unread. */
.bibh-pass-pop {
position: fixed; inset: 0; z-index: 100050;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(32, 61, 72, .55);
animation: bibhPassIn .18s ease-out;
}
.bibh-pass-pop.is-going { opacity: 0; transition: opacity .2s; }
.bibh-pass-pop__card {
background: #fff; border-radius: 30px; padding: 30px 34px 28px;
max-width: 460px; width: 100%; text-align: center;
box-shadow: 0 24px 60px rgba(32, 61, 72, .34);
animation: bibhPassCard .22s cubic-bezier(.215, .61, .355, 1);
}
.bibh-pass-pop[hidden] { display: none; }
/* The mascot leads both dialogs, so the pass popup and the break ask read as
one family rather than two unrelated interruptions. */
.bibh-pass-pop__brain { display: block; width: 176px; height: auto; margin: 0 auto; }
.bibh-pass-pop--ask .bibh-pass-pop__brain { width: 208px; margin-bottom: 14px; }
/* The spent pass is stamped on the corner of the mascot: the popup is about the
pass, and the brain alone would not say which of the two dialogs this is. */
.bibh-pass-pop__art { position: relative; display: flex; justify-content: center; margin-bottom: 18px; }
.bibh-pass-pop__stamp {
position: absolute; right: 50%; bottom: -6px; transform: translateX(80px) rotate(-9deg);
display: grid; place-items: center;
width: 62px; height: 62px; border-radius: 50%; background: #fff;
box-shadow: 0 4px 12px rgba(32, 61, 72, .22);
}
.bibh-pass-pop__svg { width: 38px; height: 38px; display: block; }
.bibh-pass-pop__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bibh-pass-pop__no,
.bibh-pass-pop__no:hover,
.bibh-pass-pop__no:focus,
.bibh-pass-pop__no:active {
border: 1px solid var(--bibh-border, #e2e5ea); border-radius: 30px;
background: #fff; color: var(--bibh-text-muted, #888);
font-family: inherit; font-weight: 800; font-size: 16px;
padding: 13px 26px; cursor: pointer; line-height: 1.1;
}
.bibh-pass-pop__no:hover { border-color: var(--bibh-dark, #203D48); color: var(--bibh-dark, #203D48); }
.bibh-pass-pop__no:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 2px; }
/* The popup always shows a SPENT pass, so its slip is drawn in the held state. */
.bibh-pass-pop__svg .bibh-home-pass__slip { fill: var(--bibh-warning, #FFA700); stroke: #c47f00; stroke-dasharray: none; stroke-width: 1.2; }
.bibh-pass-pop__svg .bibh-home-pass__fold { fill: #ffce7a; stroke: #c47f00; stroke-width: 1.2; }
.bibh-pass-pop__svg .bibh-home-pass__tick { fill: #fff; opacity: 1; }
.bibh-pass-pop__t { margin: 0 0 10px; font-size: 27px; font-weight: 900; color: var(--bibh-dark, #203D48); line-height: 1.1; }
.bibh-pass-pop__b { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--bibh-text-muted); line-height: 1.5; }
.bibh-pass-pop__b strong { color: var(--bibh-dark, #203D48); font-weight: 800; }
.bibh-pass-pop__left { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--bibh-warning, #FFA700); }
/* The terms of the deal, stated on the ask: one break a fortnight. */
.bibh-pass-pop__fine { margin: 0 0 22px; font-size: 12.5px; font-weight: 700; color: var(--bibh-text-muted); }
.bibh-pass-pop__ok,
.bibh-pass-pop__ok:hover,
.bibh-pass-pop__ok:focus,
.bibh-pass-pop__ok:active {
border: none; border-radius: 30px;
background: var(--bibh-warning, #FFA700); color: #fff;
font-family: inherit; font-weight: 800; font-size: 16px;
padding: 13px 38px; cursor: pointer; line-height: 1.1;
box-shadow: 0 4px 0 #c47f00;
transition: transform .11s, box-shadow .11s;
}
.bibh-pass-pop__ok:hover { filter: brightness(1.05); }
.bibh-pass-pop__ok:active { transform: translateY(4px); box-shadow: 0 0 0 #c47f00; }
.bibh-pass-pop__ok:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
@keyframes bibhPassIn { from { opacity: 0; } }
@keyframes bibhPassCard { from { transform: translateY(16px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
.bibh-pass-pop, .bibh-pass-pop__card { animation: none; }
}
/* ── D-07: player level, inside the Total XP tile ─────────────────────────
Quiet by design. The XP number is the headline and the level is what that
number has bought, so it reads as a subtitle with a thin progress rail,
not as a second score competing with the first.
NO flex override here. It had one, and that was the bug: .game-row is a
single flex line and .bibh-home-stat is 12% by design, so widening this
tile to 16% and the streak tile to 18% added ten points to a row that was
already full and shoved "Take Today's 10" off the right edge. The level
fits the shared basis, so it uses it. */
.bibh-home-lvl {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 8px;
/* The tile centres its children, which would shrink this row to its content
and leave the track a stub. It takes the tile's width and centres inside. */
align-self: stretch;
}
.bibh-home-lvl__n {
font-size: 15px;
font-weight: 800;
color: var(--bibh-dark);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.bibh-home-lvl__track {
flex: 1 1 auto;
min-width: 34px;
height: 7px;
border-radius: 30px;
background: var(--bibh-neutral-light);
overflow: hidden;
}
.bibh-home-lvl__track i {
display: block;
height: 100%;
border-radius: 30px;
background: #02b1ff;
transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
/* Below this the tile is too narrow for the rail to say anything: it collapses
to a stub that reads as a rendering fault rather than as progress. "Level 7"
is the fact, the rail is the nicety, so the nicety goes first. */
@media (max-width: 1200px) {
.bibh-home-lvl__track { display: none; }
}
@media (max-width: 900px) {
}
.bibh-home-xpbar {
background: #fff;
border: 1px solid var(--bibh-border);
border-radius: 30px;
padding: 16px 22px;
box-shadow: var(--bibh-shadow-strong);
/* Was a fixed 50%. The row now carries five children, so this one flexes and
the fixed tiles keep their size. .game-row is a SINGLE line: anything that
adds fixed width here shoves "Take Today's 10" off the right edge. */
flex: 1 1 auto; min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.bibh-home-xpbar .top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
font-size: 20px; font-weight: 700; color: var(--bibh-text-muted);
text-transform: uppercase; letter-spacing: .05em;
}
.bibh-home-xpnum { color: var(--bibh-text-muted); font-weight: 600; }
.bibh-home-xptrack { height: 20px; background: #eef0ee; border-radius: 30px; overflow: hidden; }
.bibh-home-xptrack > i { display: block; height: 100%; background: linear-gradient(90deg, var(--bibh-primary), var(--bibh-secondary)); border-radius: 30px; }
/* Daily-quiz slot = the 4th flex child; the arcade button fills it. An
empty slot (engine inactive) disappears rather than holding blank space. */
.bibh-home-daily-slot { flex: 0 0 20%; display: flex; }
.bibh-home-daily-slot:empty { display: none; }
/* "Take today's 10": ARCADE button, extruded edge, presses on CLICK. */
.bibh-home-daily {
flex: 1;
background: #FFA700;
color: #fff;
border: none;
border-radius: 50px;
padding: 18px 22px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-family: var(--bibh-font);
cursor: pointer;
position: relative;
transform: translateY(0);
transition: transform .11s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow .11s cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow:
0 2px var(--arcade-edge),
0 4px var(--arcade-edge),
0 6px var(--arcade-edge),
0 8px var(--arcade-edge),
0 10px var(--arcade-edge-soft),
0 13px 10px rgba(0, 0, 0, .55),
0 18px 40px rgba(0, 0, 0, .42);
}
/* The Take 10 mascot leads the button (Ashton, live test 2026-08-19): brain on
top, then "Take Today's 10", then the XP pill.
A ::before rather than an ![]()
in the markup because it is decoration and
should never reach a screen reader. The button is already a centred column
flex, and a ::before is its FIRST flex item, so putting the brain at the top
is a matter of giving it a size - no markup change, and the title and pill
are pushed down by the flex centring rather than by any offset of their own.
It was previously absolute in a corner precisely so it took no layout space.
Now that it is in the flow it does, and on the tall phone button that room
already existed: content was 89px inside a 129px box, so the brain lands in
slack that was there anyway and the button does not change size. On the wide
tablet form the button is short and DOES grow to fit the brain - that is the
cost of stacking it, and it is what was asked for.
Its own copy of the file, NOT the quiz-builder's: the suite must not depend
on a sibling plugin's asset path staying put. */
.bibh-home-daily::before {
content: '';
flex: none;
align-self: center;
height: 34px;
aspect-ratio: 512 / 395;
margin-bottom: 4px;
background: url(../img/take10-mascot.png) no-repeat center / contain;
pointer-events: none;
}
.bibh-home-daily:hover { background: #ffb01f; } /* colour lift only, no movement */
.bibh-home-daily:active {
transform: translateY(8px);
box-shadow:
0 2px var(--arcade-edge),
0 4px 10px rgba(0, 0, 0, .5);
}
.bibh-home-daily:disabled { opacity: 0.7; cursor: default; }
.bibh-home-daily-big { font-size: 30px; font-weight: 800; line-height: 1.02; color: #fff; }
.bibh-home-daily-xp {
margin-top: 5px;
align-self: center;
background: rgba(255, 255, 255, .32);
color: var(--bibh-dark);
font-weight: 700;
font-size: 15px;
padding: 8px 16px;
border-radius: 30px;
}
/* ── Section headers ──────────────────────────────────────── */
.bibh-home-section-h {
display: flex; align-items: center; gap: 10px;
margin: 28px 2px 14px; flex-wrap: wrap;
}
.bibh-home-section-h h2 { font-size: 25px; font-weight: 800; margin: 0; color: var(--bibh-dark); }
.bibh-home-browse-btn {
margin-left: auto;
background: var(--bibh-primary); color: #fff; border: none;
font-family: inherit; font-weight: 700; font-size: 20px;
padding: 12px 18px; border-radius: 30px; cursor: pointer;
}
.bibh-home-browse-btn:hover { background: var(--bibh-primary-dark); }
/* ── Assignments strip ────────────────────────────────────────
* The padding gives the card shadow room inside the scroll box (sized to
* the HOVER shadow reach); the matching negative margin keeps the strip
* aligned. Side padding = 28px, the shell gutter (.bibh-suite__main is
* 0 28px on desktop), the negative margin must never exceed that gutter
* or the page grows a horizontal scrollbar. */
/* Full-bleed strip: it cancels the page gutter with an equal negative margin so
the row of cards runs to the screen edge. Both halves now come from
--bibh-gutter (see .bibh-suite__main), because they were hard-coded to 28/16px
and the mobile gutter changed under them - at a 14px gutter a -16px bleed
overhangs by 2px a side and scrolls the whole page. */
.bibh-home-assign {
display: flex; gap: 12px; overflow-x: auto;
padding: 20px var(--bibh-gutter, 28px) 42px;
margin: -20px calc(-1 * var(--bibh-gutter, 28px)) 0;
/* Touch behaviour. `overflow-x: auto` is already swipeable on its own -
these two make it behave like a carousel rather than a loose scroller.
scroll-snap is `proximity`, NOT `mandatory`: mandatory fights a short
flick and can make the last card hard to settle on, where proximity only
tidies up a swipe that already landed near a card edge. scroll-padding
matches the gutter so a snapped card sits ON the page margin instead of
flush against the screen edge.
overscroll-behavior-x is the one that actually matters on a phone:
without it, swiping right at the first card chains the gesture to the
BROWSER and triggers back-navigation, so a student flicking through
their assignments leaves the hub by accident. */
scroll-snap-type: x proximity;
scroll-padding-left: var(--bibh-gutter, 28px);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.bibh-home-assign > .bibh-home-ac { scroll-snap-align: start; }
.bibh-home-ac {
flex: 0 0 auto; width: 330px;
display: flex; align-items: center; gap: 15px;
background: #fff; border: 1px solid var(--bibh-border);
border-radius: 30px; box-shadow: var(--bibh-shadow-strong);
padding: 15px 20px; text-decoration: none;
transition: box-shadow .15s ease;
}
.bibh-home-ac:hover { box-shadow: 0 10px 24px rgba(32, 61, 72, .28); } /* 24 < the 28px side room, so it clears */
/* Icon tile + XP pill take the assignment TYPE's colour (the --bibh-act-*
tokens from sd-fix-g), so per-subsite token overrides flow through.
Untyped cards (offline-hw / exam / blitz) fall back to teal. */
.bibh-home-ac { --type: var(--bibh-primary); }
.bibh-home-ac.ac-quiz { --type: var(--bibh-act-quiz); }
.bibh-home-ac.ac-video { --type: var(--bibh-act-video); }
.bibh-home-ac.ac-flash { --type: var(--bibh-act-flash); }
.bibh-home-ac.ac-lab { --type: var(--bibh-act-lab); }
.bibh-home-ac-ico {
width: 46px; height: 46px; flex: none; border-radius: 14px;
background: color-mix(in srgb, var(--type) 15%, #fff); color: var(--type);
display: flex; align-items: center; justify-content: center;
}
.bibh-home-ac .ttl { font-size: 15px; font-weight: 700; color: var(--bibh-dark); min-width: 0; line-height: 1.25; }
.bibh-home-ac .due {
margin-left: auto; background: var(--bibh-accent-light); color: #8a6d00;
font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 30px;
white-space: nowrap; flex: none;
}
.bibh-home-ac .xp {
margin-left: auto; background: color-mix(in srgb, var(--type) 15%, #fff); color: color-mix(in srgb, var(--type) 78%, #000);
font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 30px;
white-space: nowrap; flex: none;
}
/* Lab's colour is LIGHT, pale tint would swallow a light foreground, so
navy on a stronger tint instead. */
.bibh-home-ac.ac-lab .bibh-home-ac-ico { background: color-mix(in srgb, var(--bibh-act-lab) 45%, #fff); color: var(--bibh-dark); }
.bibh-home-ac.ac-lab .xp { background: color-mix(in srgb, var(--bibh-act-lab) 45%, #fff); color: var(--bibh-dark); }
.bibh-home-ac .xp + .due { margin-left: 0; }
/* ── Chapter card (closed state) ──────────────────────────── */
.bibh-home-chapter {
background: #fff; border: 1px solid var(--bibh-border);
border-radius: 30px; box-shadow: var(--bibh-shadow-strong);
margin-bottom: 12px; overflow: hidden; transition: box-shadow .15s ease;
}
.bibh-home-chapter:hover { box-shadow: 0 10px 28px rgba(32, 61, 72, .28); } /* shadow deepens; no colour change */
.bibh-home-ch-head { display: flex; align-items: center; gap: 14px; padding: 18px 24px; cursor: pointer; }
.bibh-home-ch-titlewrap { flex: 1; min-width: 0; }
.bibh-home-ch-title { font-size: 20px; font-weight: 700; color: var(--bibh-dark); }
.bibh-home-progress { width: 25%; height: 20px; background: #eef0ee; border-radius: 30px; overflow: hidden; flex: none; }
.bibh-home-progress > i {
display: block; height: 100%; border-radius: 30px;
/* gloss over the metal foil fill */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(0, 0, 0, .20);
}
.bibh-home-pct { font-size: 20px; font-weight: 700; flex: none; width: 58px; text-align: right; }
.bibh-home-chev { flex: none; transition: transform .18s ease; color: var(--bibh-text-muted); }
.bibh-home-chapter.open .bibh-home-chev { transform: rotate(90deg); }
/* Extra bottom room so the arcade-tile shadows aren't clipped by overflow:hidden. */
.bibh-home-ch-body { display: none; border-top: 1px solid var(--bibh-border); padding: 18px 24px 46px; }
.bibh-home-chapter.open .bibh-home-ch-body { display: block; }
.bibh-home-pin-flag {
display: inline-flex; align-items: center; gap: 4px;
background: var(--bibh-accent-light); color: #8a6d12; border: 1px solid #ecd98f;
border-radius: 30px; padding: 3px 11px; font-size: 12px; font-weight: 700;
margin-left: 10px; white-space: nowrap;
}
.bibh-home-pin-flag.me { background: var(--bibh-primary-light); color: var(--bibh-primary-dark); border-color: #bfe0d7; }
/* The chapter body used to carry two long instruction lines. Only "Select a
topic" is left, and it reads as the heading for the pills underneath rather
than as muted small print. */
.bibh-home-lbl { font-size: 20px; font-weight: 900; color: var(--bibh-dark); text-transform: uppercase; letter-spacing: .05em; margin: 2px 0 12px; }
.bibh-home-actlbl { margin-top: 24px; }
/* ── Topic rows (D-02) ─────────────────────────────────────────
Was a wrapping flex row of fit-to-text chips, which produced ragged rows
of wildly different widths: a two word topic sat next to a nine word one
and they read as different KINDS of thing rather than as the same control
at different lengths. Now a fixed grid, so every topic is the same object
the same size, and the ragged edge is gone.
3 across on desktop, 2 on iPad, 1 on a phone, per Ashton's spec, and the
existing 3D console edge rather than a new treatment, so a topic reads as
pressable like every other button in the hub. */
.bibh-home-topics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 4px;
}
@media (max-width: 1024px) { .bibh-home-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bibh-home-topics { grid-template-columns: 1fr; } }
.bibh-home-topic {
/* 14px, not 10: at 20px/900 the name sat almost against the percentage. */
display: flex; align-items: center; gap: 14px;
padding: 15px 18px; background: var(--bibh-neutral-light);
border-radius: 30px; margin-bottom: 0; cursor: pointer;
position: relative; overflow: hidden; /* keep for the foil band-slide */
/* A floor, not a fixed height: a long topic name wraps and the pill grows
with it rather than the name being cut off at two lines. */
min-height: 74px;
font-size: 20px; font-weight: 900; line-height: 1.2;
/* The hub's console edge: a hard bottom that collapses on press. */
--edge: #c7ced2;
transform: translateY(0);
box-shadow: 0 4px var(--edge), 0 8px 14px rgba(32, 61, 72, .16);
transition: transform .11s cubic-bezier(.215,.61,.355,1),
box-shadow .11s cubic-bezier(.215,.61,.355,1);
}
.bibh-home-topic:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--edge), 0 2px 7px rgba(32, 61, 72, .2);
}
/* The topic name takes the room and wraps over as many lines as it needs. The
old 2-line clamp truncated the longer chapter topics. */
.bibh-home-topic .bibh-home-topic-name {
flex: 1 1 auto; min-width: 0;
overflow-wrap: anywhere; white-space: normal;
font-size: 20px; font-weight: 900; line-height: 1.2;
/* flex-wrap, because the name is itself a flex row (it can hold a trophy). */
flex-wrap: wrap;
}
.bibh-home-topic .bibh-home-topic-m { flex: 0 0 auto; margin-left: auto; }
/* Selected (tap-to-filter) ring: teal for plain chips; a medal chip's ring
is a darker shade of its own metal. background-COLOR (not shorthand) so
a medal chip's foil background-image survives selection. The console edge
is restated in each, because box-shadow does not merge. */
.bibh-home-topic.sel { background-color: var(--bibh-primary-light); --edge: var(--bibh-primary); box-shadow: 0 0 0 2.5px var(--bibh-primary), 0 4px var(--edge), 0 8px 16px rgba(32, 61, 72, .2); }
.bibh-home-topic.medal-gold.sel { --edge: #9C6F0E; box-shadow: 0 0 0 2.5px #9C6F0E, 0 4px var(--edge), 0 8px 16px rgba(32, 61, 72, .22); }
.bibh-home-topic.medal-silver.sel { --edge: #66727D; box-shadow: 0 0 0 2.5px #66727D, 0 4px var(--edge), 0 8px 16px rgba(32, 61, 72, .22); }
.bibh-home-topic.medal-bronze.sel { --edge: #5E3517; box-shadow: 0 0 0 2.5px #5E3517, 0 4px var(--edge), 0 8px 16px rgba(32, 61, 72, .22); }
/* Unselected medal chips carry their own metal as the edge. */
.bibh-home-topic.medal-gold { --edge: #9C6F0E; }
.bibh-home-topic.medal-silver { --edge: #66727D; }
.bibh-home-topic.medal-bronze { --edge: #5E3517; }
/* Domed navy bead, non-medal (below 55 / no data) chips only; medaled
chips show the trophy in its place (patch E2), so no tier dots exist. */
.bibh-home-dot {
width: 11px; height: 11px; border-radius: 50%; flex: none;
background: #203D48;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .65), 0 1px 1.5px rgba(0, 0, 0, .28);
}
/* ── Metallic foil medal chips (E2/E3) ─────────────────────────
* Winning chips wear the tier foil itself; the bands slide toward the
* cursor via --mx (set by home.js, inherited by the progress fill from
* the chapter head). At rest --mx is 50% = bands centred. */
.bibh-home-topic.medal { color: #203D48; }
.bibh-home-topic.medal-gold { background-image: var(--medal-gold-grad); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.bibh-home-topic.medal-silver { background-image: var(--medal-silver-grad); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.bibh-home-topic.medal-bronze { background-image: var(--medal-bronze-grad); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.bibh-home-topic.medal .bibh-home-topic-name,
.bibh-home-topic.medal .bibh-home-topic-m { color: inherit; }
.bibh-home-trophy { fill: currentColor; }
.bibh-home-topic.medal,
.bibh-home-progress > i {
background-size: 230% 100%;
background-repeat: no-repeat;
background-position: calc(50% - (var(--mx, 50%) - 50%) * .85) center;
transition: background-position .12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.bibh-home-topic.medal,
.bibh-home-progress > i { transition: none; background-position: 50% center; }
.bibh-home-tile { transition: none; }
}
/* The name carries the pill's own size and weight. This rule used to reset it to
15px/600 and nowrap, which quietly undid the pill above and clipped long topic
names onto one line. Sizing lives on .bibh-home-topic now, not here. */
.bibh-home-topic-name { color: var(--bibh-dark); display: flex; align-items: center; gap: 6px; }
.bibh-home-topic-m { font-size: 15px; font-weight: 700; }
.bibh-home-trophy { width: 16px; height: 16px; flex: none; }
/* ── Activity tiles: 4-up, no emoji, ARCADE (press on click) ── */
/* The "Select the activity" line above this used to hold the pills and the
tiles apart. It is gone, so the gap is explicit rather than a side effect. */
.bibh-home-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; margin-top: 26px; }
/* D-01: every activity button the SAME size at every width, with the label
vertically centred and the XP chip sitting under it.
They were sized by their own text, so "Flashcards" made a taller, wider
button than "Quiz" and a row of four read as four different controls. A
fixed min-height with the label centred in the space above the chip makes
them one control repeated. */
.bibh-home-tile {
--tile-edge: #d18a00; /* per-type darker shade set below */
border-radius: 50px; padding: 20px 12px 20px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
min-height: 148px;
color: #fff; cursor: pointer; transform: translateY(0);
transition: transform .11s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow .11s cubic-bezier(0.215, 0.61, 0.355, 1);
box-shadow:
0 2px var(--tile-edge),
0 4px var(--tile-edge),
0 6px var(--tile-edge),
0 8px var(--tile-edge),
0 10px var(--tile-edge),
0 13px 10px rgba(0, 0, 0, .42),
0 18px 34px rgba(0, 0, 0, .26);
}
/* Hover LIFTS, the same way the quiz buttons do. The whole tile and its edge
rise together and the ambient shadow deepens underneath, which is what sells
the height. The edge stack is deliberately unchanged: growing it as well made
the face and the edge brighten into each other and the edge read as THINNER,
the opposite of lifting. The press on click is then a real drop. */
.bibh-home-tile:hover,
.bibh-home-tile:focus-visible {
transform: translateY(-3px);
box-shadow:
0 2px var(--tile-edge),
0 4px var(--tile-edge),
0 6px var(--tile-edge),
0 8px var(--tile-edge),
0 10px var(--tile-edge),
0 17px 16px rgba(0, 0, 0, .44),
0 26px 46px rgba(0, 0, 0, .28);
}
.bibh-home-tile:focus-visible { outline: 3px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
.bibh-home-tile:active {
transform: translateY(8px);
box-shadow: 0 2px var(--tile-edge), 0 4px 10px rgba(0, 0, 0, .4);
}
/* The label takes the room above the chip and centres in it, so a one-word
and a two-word activity sit on the same optical line across the row. */
.bibh-home-tile-t {
font-size: 35px; font-weight: 800; text-align: center; line-height: 1.05;
flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
min-width: 0; overflow-wrap: anywhere;
}
.bibh-home-tile-xp { flex: 0 0 auto; }
.bibh-home-tile-xp { background: rgba(255,255,255,.26); border-radius: 30px; padding: 4px 14px; font-size: 15px; font-weight: 600; }
.bibh-home-tile.t-quiz { background: var(--bibh-act-quiz); --tile-edge: #0080c2; }
.bibh-home-tile.t-flash { background: var(--bibh-act-flash); --tile-edge: #b81800; }
.bibh-home-tile.t-video { background: var(--bibh-act-video); --tile-edge: #037058; }
.bibh-home-tile.t-past { background: var(--bibh-act-past); --tile-edge: #cc8400; }
.bibh-home-tile.t-lab { background: var(--bibh-act-lab); color: var(--bibh-dark); --tile-edge: #5cb8d6; }
.bibh-home-tile.t-lab .bibh-home-tile-xp { background: rgba(32,61,72,.16); }
.bibh-home-tile.t-terms { background: var(--bibh-act-terms); color: var(--bibh-dark); --tile-edge: #d9bb3e; }
.bibh-home-tile.t-terms .bibh-home-tile-xp { background: rgba(32,61,72,.16); }
/* ── Key terms ────────────────────────────────────────────── */
.bibh-home-kt {
margin-top: 14px; background: var(--bibh-neutral-light);
border: 1px solid var(--bibh-border); border-radius: 18px; padding: 14px 16px;
}
/* Hidden until the Key Terms activity tile is tapped (tap again to close). */
.bibh-home-kt--collapsed { display: none; }
.bibh-home-tile.t-terms.is-open { box-shadow: 0 0 0 3px var(--bibh-accent-light), inset 0 0 0 2px var(--bibh-dark); }
.bibh-home-kt h4 { margin: 0 0 3px; font-size: 12.5px; font-weight: 700; color: var(--bibh-dark); }
.bibh-home-kt-sub { font-size: 10.5px; color: var(--bibh-text-light); font-weight: 400; margin-bottom: 9px; }
.bibh-home-ktgrp { font-size: 10px; font-weight: 700; color: var(--bibh-text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 5px; }
.bibh-home-term { background: #fff; border: 1px solid var(--bibh-border); border-radius: 12px; padding: 10px 13px; margin-bottom: 6px; cursor: pointer; }
.bibh-home-term-w { font-size: 12.5px; font-weight: 700; color: var(--bibh-dark); }
.bibh-home-term-d { font-size: 11px; color: var(--bibh-text-light); font-weight: 400; margin-top: 3px; display: none; line-height: 1.5; }
.bibh-home-term.open .bibh-home-term-d { display: block; }
.bibh-home-term.bibh-home-hide, .bibh-home-ktgrp.bibh-home-hide { display: none; }
.bibh-home-kt-study { margin-top: 6px; background: var(--bibh-dark); color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 11.5px; padding: 9px 15px; border-radius: 30px; cursor: pointer; }
.bibh-home-empty { padding: 24px; text-align: center; color: var(--bibh-text-light); font-weight: 500; }
/* A shown-but-not-editable value in the dashboard settings panel. Reads as a
value rather than a field, so nothing invites a tap that does nothing.
Mirrors .bibh-settings__readonly-name on the full settings page. */
.bibh-home-set-readonly {
font-size: 19px; font-weight: 800;
color: var(--bibh-dark, #203D48);
margin: 2px 0 6px;
}
/* ── Overlays (browse + modal) ────────────────────────────── */
.bibh-home-overlay {
position: fixed; inset: 0; background: rgba(20,38,45,.55); z-index: 10000;
display: none; align-items: flex-start; justify-content: center;
padding: 40px 20px; overflow-y: auto;
}
.bibh-home-overlay.show { display: flex; }
.bibh-home-lib {
background: var(--bibh-neutral-light); width: 100%; max-width: 820px;
border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.4); overflow: hidden;
}
/* Launch fix L-17: the modal header was unreadable in the video view.
-------------------------------------------------------------------------
This header used to be dark navy with `color: #fff`, and the title was
rendering in a dark red on it (Ashton, live test 2026-08-19). The white was
never reaching the : the rule set the colour on the HEADER and let the
heading inherit it, but Astra styles `h3` directly, and a direct rule beats
an inherited value every time. So the h3 took Astra's dark heading colour
and sat on a dark bar.
It had gone unnoticed because nothing ever showed this header. Both modals
that use it - the chapter picker and Settings - already override it to a
light bar with an explicitly-coloured title, and the past-papers and mind-map
views `display: none` it outright. The video view hid it too, via
`bibh-crt-open`, until the TV cabinet was removed earlier today and the base
header appeared on screen for the first time.
So the light treatment those two modals had each written for themselves
becomes the base, and the title carries an EXPLICIT colour rather than an
inherited one. Their overrides are left alone: they only change sizing now,
and rewriting them buys nothing. */
.bibh-home-lib-head {
background: #fff; color: var(--bibh-dark);
border-bottom: 1px solid var(--bibh-border);
padding: 17px 20px; display: flex; align-items: center; gap: 12px;
}
.bibh-home-lib-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--bibh-dark); }
/* The X was a pale grey on the navy. On white it would have been invisible,
so it changes with the bar rather than after someone reports it missing. */
.bibh-home-lib-x {
margin-left: auto; cursor: pointer; font-size: 18px; flex: none;
color: var(--bibh-text-muted); background: #fff;
border: 1px solid var(--bibh-border); border-radius: 50%;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
}
.bibh-home-lib-x:hover { background: #f4f5f4; color: var(--bibh-dark); }
.bibh-home-lib-search { padding: 13px 20px 4px; }
.bibh-home-lib-search input { width: 100%; border: 1px solid var(--bibh-border); border-radius: 30px; padding: 11px 15px; font-family: inherit; font-size: 13px; font-weight: 400; color: var(--bibh-dark); }
.bibh-home-lib-body { padding: 12px 20px 20px; max-height: 66vh; overflow-y: auto; }
.bibh-home-lib-row { background: #fff; border: 1px solid var(--bibh-border); border-radius: 16px; box-shadow: var(--bibh-shadow-sm); padding: 12px 15px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bibh-home-lib-row.bibh-home-hide { display: none; }
.bibh-home-lib-n { flex: 1; min-width: 0; }
.bibh-home-lib-n .ct { font-size: 13px; font-weight: 700; color: var(--bibh-dark); }
.bibh-home-lib-n .cs { font-size: 10.5px; color: var(--bibh-text-light); font-weight: 400; margin-top: 2px; }
.bibh-home-lib-mini { width: 74px; height: 7px; background: #eef0ee; border-radius: 30px; overflow: hidden; flex: none; }
.bibh-home-lib-mini > i { display: block; height: 100%; }
/* ── D-03: the star IS the control ────────────────────────────────────────
No label. Gold and filled when the chapter is starred, a plain outline when
it is not, so the state is the shape rather than the sentence. The SVG uses
currentColor for both fill and stroke, which means one colour change flips
the whole thing and the two states cannot drift apart.
The screen loses the words; the button does not. aria-label and title carry
them, and aria-pressed carries the state. */
.bibh-home-pin-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; padding: 0; flex: none;
border: 1.5px solid var(--bibh-border); background: #fff;
color: var(--bibh-neutral, #CBCCCB);
border-radius: 30px; cursor: pointer;
transition: color .15s, border-color .15s, transform .11s;
}
.bibh-home-pin-toggle:hover { color: var(--bibh-warning, #FFA700); border-color: #f0d79a; }
.bibh-home-pin-toggle:active { transform: scale(.94); }
.bibh-home-pin-toggle:focus-visible { outline: 2px solid var(--bibh-dark); outline-offset: 2px; }
.bibh-home-pin-toggle .bibh-home-star { display: block; }
/* Starred: filled gold. */
.bibh-home-pin-toggle.on {
background: #fff;
border-color: var(--bibh-warning, #FFA700);
color: var(--bibh-warning, #FFA700);
}
/* Set by the teacher: also starred, because it IS, but not yours to change. */
.bibh-home-pin-toggle.locked {
background: var(--bibh-accent-light);
border-color: #ecd98f;
color: #E0A100;
cursor: default;
}
/* ── Modal content (videos / past papers) ─────────────────── */
.bibh-home-modal-box { max-width: 640px; }
.bibh-home-vgroup-h { font-size: 11px; font-weight: 700; color: var(--bibh-text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px; }
.bibh-home-video { margin-bottom: 14px; }
.bibh-home-video-t { font-size: 13px; font-weight: 700; color: var(--bibh-dark); margin-bottom: 6px; }
.bibh-home-embed { position: relative; }
.bibh-home-embed iframe { border-radius: 14px; }
.bibh-home-pp { background: #fff; border: 1px solid var(--bibh-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.bibh-home-pp-top { display: flex; align-items: baseline; gap: 8px; }
.bibh-home-pp-title { font-size: 13.5px; font-weight: 700; color: var(--bibh-dark); flex: 1; }
.bibh-home-pp-marks { font-size: 11px; font-weight: 700; color: var(--bibh-text-muted); }
.bibh-home-pp img { max-width: 100%; height: auto; border-radius: 10px; margin-top: 10px; border: 1px solid var(--bibh-border); }
.bibh-home-pp-reveal { margin-top: 10px; background: #fff; border: 1.5px solid var(--bibh-border); color: var(--bibh-dark); font-family: inherit; font-weight: 700; font-size: 11.5px; padding: 8px 14px; border-radius: 30px; cursor: pointer; }
.bibh-home-pp-scheme { display: none; margin-top: 10px; background: var(--bibh-primary-light); border: 1px solid #bfe0d7; border-radius: 12px; padding: 12px 14px; }
.bibh-home-pp-scheme.show { display: block; }
.bibh-home-pp-scheme a { color: var(--bibh-primary-dark); font-weight: 700; }
.bibh-home-modal-empty { text-align: center; color: var(--bibh-text-light); font-weight: 500; padding: 24px; }
/* ── Full-width home: no left menu (Stage 1.1) ────────────────
* The student home is chapter-first and full-width. Hide the DESKTOP left
* sidebar for this view only (>=769px, matching suite.css's desktop breakpoint).
* The main column is flex:1 so it fills the row automatically. Below 769px the
* sidebar is already off-canvas (opened by the mobile "Menu" button), so mobile
* nav is untouched. Other Suite views keep their sidebar. */
@media (min-width: 769px) {
.bibh-suite--home .bibh-suite__sidebar { display: none; }
}
/* ── Focused activity mode (launched from the home) ───────────
* self-check / flashcards / budget-lab, when opened from a home tile
* (bibh_home=1), render menu-less: no desktop rail, no mobile menu button,
* just the activity + a Back-to-home control. Reached normally they keep the
* menu (no bibh_home flag → no .bibh-suite--focus). */
@media (min-width: 769px) {
.bibh-suite--focus .bibh-suite__sidebar { display: none; }
}
.bibh-suite--focus .bibh-suite__menu-btn,
.bibh-suite--focus .bibh-suite__scrim { display: none !important; }
.bibh-focus-back {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 16px;
padding: 9px 16px;
background: #fff;
border: 1.5px solid var(--bibh-border);
border-radius: 30px;
color: var(--bibh-dark);
font-family: var(--bibh-font);
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
.bibh-focus-back:hover {
background: var(--bibh-primary-light);
border-color: var(--bibh-primary);
color: var(--bibh-primary-dark);
}
/* Classroom Blitz sets body.blz-lock while its full-screen game is active, hide
* the suite Back control so nothing floats over the game (both teacher + student). */
body.blz-lock .bibh-focus-back { display: none !important; }
/* ── Astra-header cluster: cog + eBook + Activity Book ─────────
* Rendered by BIBH_Student_Header on astra_header_account @ 20, student
* dashboard only. Pills are emoji-free, 30px radius, house style. */
.bibh-hd-cluster {
display: inline-flex;
align-items: center;
gap: 12px;
margin-right: 12px;
background: transparent; /* on the white header, never the account pill */
}
.bibh-home-book-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bibh-dark);
color: #fff;
border: none;
font-family: var(--bibh-font);
font-weight: 700;
font-size: 13px;
padding: 11px 18px;
border-radius: 30px;
box-shadow: var(--bibh-shadow-strong);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.bibh-home-book-btn:hover { background: #16303a; color: #fff; }
.bibh-home-book-btn.is-soon { background: #eef0ee; color: var(--bibh-text-muted); cursor: default; box-shadow: none; }
.bibh-home-cog {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: none;
background: #fff;
border: 1px solid var(--bibh-border);
border-radius: 50%;
box-shadow: var(--bibh-shadow-strong);
color: var(--bibh-text-muted);
cursor: pointer;
padding: 0;
}
.bibh-home-cog:hover { color: var(--bibh-primary-dark); border-color: var(--bibh-primary); background: var(--bibh-primary-light); }
/* MOBILE header: only the cog stays up top, the book pills crowded the
small header, so they live in the floating eBooks sheet instead. */
.ast-mobile-header-wrap .bibh-hd-cluster .bibh-home-book-btn { display: none; }
/* ── Mobile eBooks FAB + sheet (student home only) ─────────────
* Replaces the deprecated Menu drawer: the floating button (inherits the
* .bibh-suite__menu-btn pill, icon-free) opens a small card with the two
* Yudu links. Hidden on desktop by suite.css's existing >=769 rule. */
.bibh-ebooks-fab { justify-content: center; }
.bibh-ebooks-sheet {
position: fixed;
left: 16px;
bottom: 76px;
z-index: 9600;
display: none;
flex-direction: column;
gap: 10px;
background: #fff;
border: 1px solid var(--bibh-border);
border-radius: 24px;
padding: 14px;
box-shadow: 0 14px 44px rgba(32, 61, 72, .3);
}
.bibh-ebooks-sheet.is-open { display: flex; }
@media (min-width: 769px) {
.bibh-ebooks-sheet { display: none !important; }
}
/* ── Settings modal (display name, teacher, email, password) ── */
.bibh-home-settings-box { max-width: 460px; }
.bibh-home-set-sec { padding: 15px 0; border-top: 1px solid var(--bibh-border); }
.bibh-home-set-sec:first-of-type { border-top: none; padding-top: 2px; }
.bibh-home-set-h { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--bibh-dark); }
.bibh-home-set-sub { font-size: 11.5px; color: var(--bibh-text-light); font-weight: 400; margin: 2px 0 10px; line-height: 1.45; }
.bibh-home-set-sub strong { color: var(--bibh-dark); }
.bibh-home-set-row { display: flex; gap: 8px; }
.bibh-home-set-form { display: flex; flex-direction: column; gap: 8px; }
.bibh-home-set-input {
flex: 1; min-width: 0; width: 100%; border: 1px solid var(--bibh-border); border-radius: 30px;
padding: 11px 15px; font-family: inherit; font-size: 13px; font-weight: 400; color: var(--bibh-dark);
}
.bibh-home-set-save {
background: var(--bibh-primary); color: #fff; border: none; font-family: inherit;
font-weight: 700; font-size: 12.5px; padding: 10px 20px; border-radius: 30px; cursor: pointer; white-space: nowrap;
}
.bibh-home-set-save.is-full { width: 100%; text-align: center; padding: 12px 20px; }
.bibh-home-set-save:hover { background: var(--bibh-primary-dark); }
.bibh-home-set-save:disabled { opacity: .7; cursor: default; }
/* ── Settings modal restyle (sd-fix-i), teacher-modal look ─────
* EVERYTHING scoped to .bibh-home-settings-box: the Browse overlay and
* the activity modal share the .bibh-home-lib chrome and must not move. */
.bibh-home-settings-box { max-width: 560px; background: #fff; border-radius: 30px; }
.bibh-home-settings-box .bibh-home-lib-head {
background: #fff; color: var(--bibh-dark);
border-bottom: 1px solid var(--bibh-border);
border-radius: 30px 30px 0 0;
padding: 22px 24px 16px;
align-items: flex-start;
}
.bibh-home-set-headwrap { min-width: 0; }
.bibh-home-settings-box .bibh-home-lib-head h3 { color: var(--bibh-dark); font-size: 22px; font-weight: 800; }
.bibh-home-settings-box .bibh-home-lib-x {
background: #fff; color: var(--bibh-text-muted);
border: 1px solid var(--bibh-border); border-radius: 50%;
width: 38px; height: 38px; font-size: 18px; flex: none;
}
.bibh-home-settings-box .bibh-home-lib-x:hover { background: #f4f5f4; color: var(--bibh-dark); }
.bibh-home-settings-box .bibh-home-lib-body { background: #fff; padding: 8px 24px 26px; }
.bibh-home-settings-box .bibh-home-set-sec { padding: 22px 0; }
.bibh-home-settings-box .bibh-home-set-h { font-size: 17px; font-weight: 800; }
.bibh-home-settings-box .bibh-home-set-sub { font-size: 13.5px; color: var(--bibh-text-muted); font-weight: 500; }
.bibh-home-settings-box .bibh-home-set-input {
border: 1.5px solid var(--bibh-border); border-radius: 30px;
padding: 13px 20px; font-size: 15px; background: #fff;
}
.bibh-home-settings-box .bibh-home-set-input:focus { outline: none; border-color: var(--bibh-primary); box-shadow: 0 0 0 3px var(--bibh-primary-light); }
.bibh-home-settings-box .bibh-home-set-save {
display: inline-flex; align-items: center; align-self: flex-start;
width: auto; border-radius: 30px; padding: 12px 30px; font-size: 15px;
}
.bibh-home-settings-box .bibh-home-set-save.is-full { width: auto; text-align: left; padding: 12px 30px; margin-top: 6px; }
/* ── Browse-all-chapters modal restyle (sd-fix-j) ───────────────
* Same white/30px chrome as the settings modal; rows styled like the
* main-page chapter cards. Scoped to #bibh-home-browse, the activity
* (video/past-paper) modal keeps the navy .bibh-home-lib chrome. */
#bibh-home-browse .bibh-home-lib { background: #fff; border-radius: 30px; overflow: hidden; max-width: 1040px; }
#bibh-home-browse .bibh-home-lib-head {
background: #fff; color: var(--bibh-dark);
border-bottom: 1px solid var(--bibh-border);
padding: 24px 28px 18px;
}
#bibh-home-browse .bibh-home-lib-head h3 { font-size: 22px; font-weight: 800; color: var(--bibh-dark); }
#bibh-home-browse .bibh-home-lib-x {
background: #fff; color: var(--bibh-text-muted);
border: 1px solid var(--bibh-border); border-radius: 50%;
width: 38px; height: 38px; font-size: 18px; flex: none;
}
#bibh-home-browse .bibh-home-lib-x:hover { background: #f4f5f4; color: var(--bibh-dark); }
#bibh-home-browse .bibh-home-lib-search { padding: 16px 28px 6px; }
#bibh-home-browse .bibh-home-lib-search input { border: 1.5px solid var(--bibh-border); padding: 14px 20px; font-size: 15px; }
#bibh-home-browse .bibh-home-lib-search input:focus { outline: none; border-color: var(--bibh-primary); box-shadow: 0 0 0 3px var(--bibh-primary-light); }
#bibh-home-browse .bibh-home-lib-body { background: #fff; padding: 12px 28px 26px; }
/* Rows = main-page chapter card look. */
#bibh-home-browse .bibh-home-lib-row {
border-radius: 30px; box-shadow: var(--bibh-shadow-strong);
padding: 18px 24px; gap: 18px; margin-bottom: 12px;
transition: box-shadow .15s ease;
}
#bibh-home-browse .bibh-home-lib-row:hover { box-shadow: 0 10px 28px rgba(32, 61, 72, .28); }
#bibh-home-browse .bibh-home-lib-n .ct { font-size: 20px; font-weight: 700; color: var(--bibh-dark); }
#bibh-home-browse .bibh-home-lib-mini { width: 150px; height: 20px; }
#bibh-home-browse .bibh-home-lib-mini > i {
display: block; height: 100%; border-radius: 30px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(0, 0, 0, .2);
}
.bibh-home-lib-pct { font-size: 20px; font-weight: 700; flex: none; width: 52px; text-align: right; }
/* Pin action pills. */
/* Same control, a touch bigger in the browse list where rows are taller. */
#bibh-home-browse .bibh-home-pin-toggle { width: 48px; height: 48px; }
#bibh-home-browse .bibh-home-pin-toggle .bibh-home-star { width: 24px; height: 24px; }
#bibh-home-browse .bibh-home-pin-toggle:hover { border-color: #f0d79a; color: var(--bibh-warning, #FFA700); }
.bibh-home-set-note { margin-top: 10px; font-size: 12px; font-weight: 600; border-radius: 12px; padding: 9px 13px; }
.bibh-home-set-note.ok { background: var(--bibh-primary-light); color: var(--bibh-primary-dark); }
.bibh-home-set-note.err { background: #fbe6e6; color: var(--bibh-danger); }
/* ── Launch fix L-02: chapter rows went vertical on a phone ────────────────
The row is a flex line of four children, three of which are a FIXED width
(mini bar 150 + percentage 52 + star 48 = 250px) plus 54px of gaps and 48px
of row padding. On a 375px screen inside a modal with 28px gutters there is
nothing left, so .bibh-home-lib-n (flex:1, min-width:0) was squeezed to a
few pixels and the chapter title wrapped one CHARACTER per line (Ashton,
live test 2026-08-19).
Below 640px the row becomes two lines: the title owns the first, and the
progress bar, percentage and star share the second. The bar takes the
leftover width instead of a fixed 150px, so it can never do this again. */
@media (max-width: 640px) {
#bibh-home-browse .bibh-home-lib { max-width: 100%; }
#bibh-home-browse .bibh-home-lib-head { padding: 18px 18px 14px; }
#bibh-home-browse .bibh-home-lib-head h3 { font-size: 17px; line-height: 1.25; }
#bibh-home-browse .bibh-home-lib-search { padding: 12px 18px 4px; }
#bibh-home-browse .bibh-home-lib-body { padding: 10px 18px 20px; }
#bibh-home-browse .bibh-home-lib-row { flex-wrap: wrap; padding: 14px 16px; gap: 10px 12px; }
/* Full-width first line. flex-basis 100% is what forces the break; without
min-width the title could still be shrunk by a long unbroken word. */
#bibh-home-browse .bibh-home-lib-n { flex: 1 1 100%; min-width: 100%; }
#bibh-home-browse .bibh-home-lib-n .ct { font-size: 16px; line-height: 1.25; }
/* Second line: the bar stretches, the number and the star keep their size. */
#bibh-home-browse .bibh-home-lib-mini { flex: 1 1 auto; width: auto; min-width: 0; height: 16px; }
#bibh-home-browse .bibh-home-lib-pct { font-size: 16px; width: auto; min-width: 42px; }
#bibh-home-browse .bibh-home-pin-toggle { width: 42px; height: 42px; flex: none; }
#bibh-home-browse .bibh-home-pin-toggle .bibh-home-star { width: 21px; height: 21px; }
}
/* ── Blitz LIVE card (assignments strip) ──────────────────────
* New base card geometry (30px radius, icon tile, row layout) with the
* dark gradient + LIVE pill behaviour preserved. */
.bibh-home-ac.bibh-home-blitz {
/* Solid, not a gradient. This is Blitz's own ground, the same navy the game
itself goes to, so the banner and the screen it leads to are one colour. */
background: var(--bibh-dark);
border: none; color: #fff;
}
.bibh-home-blitz .bibh-home-ac-ico { background: rgba(255, 255, 255, .16); color: var(--bibh-accent); font-size: 24px; line-height: 1; }
.bibh-home-ac-txt { display: flex; flex-direction: column; min-width: 0; }
.bibh-home-blitz .ttl { color: #fff; }
.bibh-home-blitz-cta { font-size: 11px; font-weight: 600; color: var(--bibh-accent); margin-top: 2px; }
.bibh-home-blitz-pill {
display: inline-flex; align-items: center; gap: 5px;
margin-left: auto; flex: none;
background: var(--bibh-accent); color: var(--bibh-dark);
border-radius: 30px; padding: 6px 14px; font-size: 13px; font-weight: 700; letter-spacing: .05em;
}
.bibh-home-blitz-pill::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bibh-danger);
animation: bibhHomeBlitzBlink 1.2s infinite;
}
@keyframes bibhHomeBlitzBlink { 50% { opacity: .3; } }
/* ── Responsive (dashboard redesign S9) ─────────────────────────
* Mapped to the SUITE's real breakpoints, 768px (mobile menu / stacked
* suite) and 544px (Astra's mobile), NOT the mockup's placeholder
* 1024/600, so the dashboard reflows in step with everything else. */
/* ── The game row wraps on its own schedule ───────────────────────────────
Four children (Total XP, Today's XP, Streak, Take Today's 10) hold one line
down to about 940px. Below that the labels start wrapping inside their own
tiles, so the row breaks into pairs: Total XP + Streak, then Take Today's 10,
then Today's XP full width. The streak keeps the daily button beside it. */
@media (max-width: 940px) {
.game-row { flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.game-row .bibh-home-stat { flex: 1 1 calc(50% - 8px); order: 1; }
.game-row .bibh-home-stat.streak { order: 2; }
.game-row .bibh-home-daily-slot { flex: 1 1 calc(50% - 8px); margin-left: 0; order: 3; }
.game-row .bibh-home-xpbar { flex: 1 1 100%; order: 4; }
}
/* Tablet: tiles 3-up. */
@media (max-width: 768px) {
/* The shell gutter (.bibh-suite__main) shrinks to 16px here, cap the
strip's negative margin to match or the page scrolls sideways. */
/* Vertical rhythm only - the horizontal bleed stays token-driven above. */
.bibh-home-assign { padding-top: 16px; padding-bottom: 40px; margin-top: -16px; }
.bibh-home-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bibh-home-tile-t { font-size: 28px; }
}
/* Phone: Total XP + Streak two-up, then Today's XP full width, then the daily
button. Tiles 2-up; headers, cards and pills scale. */
@media (max-width: 544px) {
.game-row { gap: 12px; margin-bottom: 24px; }
.game-row .bibh-home-stat { flex: 1 1 calc(50% - 6px); order: 1; }
.game-row .bibh-home-xpbar { flex: 1 1 100%; order: 2; }
.game-row .bibh-home-stat.streak { order: 3; }
.game-row .bibh-home-daily-slot { flex: 1 1 calc(50% - 6px); margin-left: 0; order: 4; }
.bibh-home-stat .v { font-size: 26px; }
.bibh-home-daily-big { font-size: 26px; }
.bibh-home-section-h { margin: 22px 2px 10px; }
.bibh-home-section-h h2 { font-size: 22px; }
.bibh-home-ac { width: 280px; padding: 13px 16px; gap: 12px; }
.bibh-home-ac-ico { width: 42px; height: 42px; }
.bibh-home-browse-btn { font-size: 16px; padding: 10px 14px; }
.bibh-home-ch-head { padding: 15px 16px; gap: 10px; }
.bibh-home-ch-title { font-size: 16px; }
.bibh-home-pct { font-size: 16px; width: 44px; }
.bibh-home-progress { width: 20%; }
/* Tiles: the arcade edge + shadow reach ~18px below each tile, so the
row gap must clear it or rows visually collide. Body side padding
drops to 16px to line the topics/tiles up with the 16px card head. */
.bibh-home-ch-body { padding: 16px 16px 44px; }
.bibh-home-tiles { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
.bibh-home-tile { padding: 22px 12px 20px; }
.bibh-home-tile-t { font-size: 24px; }
.bibh-home-topic-m, .bibh-home-lbl { font-size: 13.5px; }
/* Header cluster shrinks with the header. */
.bibh-hd-cluster { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bibh-home-book-btn { font-size: 12px; padding: 9px 13px; }
.bibh-home-cog { width: 38px; height: 38px; }
}
/* ── Launch fix L-01: the streak tile ran out of its own card ──────────────
"7 more days for a Free Pass" is set nowrap, which is right on desktop where
the tile is a 16% column wide enough to hold it. Once the game row goes
2-up the tile is half a phone screen and the line kept its width anyway, so
it ran out of the card on both sides (Ashton, live test 2026-08-19).
The line is allowed to wrap from the width where the row first reflows, not
from the phone breakpoint: the tile is already too narrow at 940px. The
number row wraps with it, because the streak digit, the flame and the pass
chip are three items in a tile that no longer has room for three. */
@media (max-width: 940px) {
.bibh-home-topass { white-space: normal; }
.bibh-home-stat.streak .v { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
}
@media (max-width: 544px) {
/* 20px of side padding out of a ~170px tile is a fifth of the line width,
and the copy needs it more than the card does. */
.bibh-home-stat { padding: 16px 12px; }
.bibh-home-topass { font-size: 12px; margin-top: 5px; }
/* Belt and braces: nothing in this tile may paint outside it, whatever a
future string length does. */
.bibh-home-stat.streak { overflow: hidden; }
}
/* =========================================================================
VIDEO PLAYER (.bibh-crt-* namespace, kept from the retro build)
-------------------------------------------------------------------------
The retro TV cabinet was removed at Ashton's request (live test 2026-08-19)
and this is an ordinary video with a playlist under it. Gone with it: the
DESIGN-TOKEN EXEMPTION that covered this namespace, the bundled Share Tech
Mono @font-face, the moulded case, bezel, well and grille, the red LED, the
CHANNEL/VOLUME rockers, the scanlines and the flash/flicker animations. The
player is back on League Spartan and the BIBH palette like everything else.
The class NAMES stay `bibh-crt-*`. Renaming them would mean touching
crtMount/crtTeardown, the event delegation and every builder in home.js on
launch eve, and no student can see a class name. See the note above
crtHtml() for what is still load-bearing in that module.
========================================================================= */
/* The video sits in the ordinary modal now, so it only needs the body's own
padding rather than a stripped-out full-bleed stage. */
.bibh-home-lib-body.bibh-crt-body { padding: 4px 20px 22px; }
.bibh-crt { display: flex; flex-direction: column; gap: 14px; }
/* The modal header carries the close control; the floating one the cabinet
needed would now be a second X on the same screen. */
.bibh-crt-close { display: none; }
/* 16:9 well. aspect-ratio rather than a padding-top hack so the iframe can be
absolutely filled without a wrapper doing arithmetic. */
.bibh-crt-video,
.bibh-crt-standby {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
}
.bibh-crt-video { background: #000; }
.bibh-crt-video iframe,
.bibh-crt-video embed,
.bibh-crt-video object,
.bibh-crt-video video {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0; display: block;
}
.bibh-crt-standby {
display: grid; place-items: center;
background: var(--bibh-neutral-light, #f3f5f4);
color: var(--bibh-text-muted, #888);
font-weight: 800; font-size: 15px;
}
/* crtFlash() still appends this on a channel change and removes it 440ms
later. It was the CRT's power-on flicker; there is nothing to flicker now,
but the element is left harmless rather than editing the JS around it. */
.bibh-crt-flash { display: none; }
/* Title of whatever is playing, between the video and the playlist. */
.bibh-crt-now {
font-size: 18px; font-weight: 800; line-height: 1.25;
color: var(--bibh-dark, #203D48);
}
/* ── Playlist ─────────────────────────────────────────────────────────── */
.bibh-crt-chans { display: flex; flex-direction: column; gap: 8px; }
.bibh-crt-chans-h {
margin-top: 6px;
font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--bibh-text-muted, #888);
}
.bibh-crt-chans-h:first-child { margin-top: 0; }
.bibh-crt-chan,
.bibh-crt-chan:hover,
.bibh-crt-chan:focus,
.bibh-crt-chan:active {
display: flex; align-items: center; gap: 12px;
width: 100%; text-align: left;
background: #fff;
border: 1.5px solid var(--bibh-border, #e2e5ea);
border-radius: 30px;
padding: 12px 18px;
font-family: inherit; font-size: 15px; font-weight: 700;
color: var(--bibh-dark, #203D48);
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.bibh-crt-chan:hover { border-color: var(--bibh-primary, #3F8170); }
.bibh-crt-chan:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 2px; }
.bibh-crt-chan.is-on,
.bibh-crt-chan.is-on:hover {
background: var(--bibh-primary, #3F8170);
border-color: var(--bibh-primary, #3F8170);
color: #fff;
}
.bibh-crt-chan .n {
flex: none; min-width: 22px;
font-variant-numeric: tabular-nums;
font-weight: 900; color: var(--bibh-text-muted, #888);
}
.bibh-crt-chan.is-on .n { color: rgba(255, 255, 255, .8); }
/* min-width:0 so a long title ellipses instead of pushing the duration out. */
.bibh-crt-chan .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bibh-crt-chan .d { flex: none; font-size: 13px; font-weight: 700; color: var(--bibh-text-muted, #888); font-variant-numeric: tabular-nums; }
.bibh-crt-chan.is-on .d { color: rgba(255, 255, 255, .8); }
@media (max-width: 544px) {
.bibh-home-lib-body.bibh-crt-body { padding: 4px 14px 18px; }
.bibh-crt-now { font-size: 16px; }
.bibh-crt-chan { padding: 11px 14px; font-size: 14px; gap: 10px; }
}
/* ── XP won without a reload: the counter jumps in place ──────────────
The banner is gone; the number itself is the feedback. A brief scale + glow
draws the eye to it as it counts up. */
.bibh-xp-pop {
display: inline-block;
animation: bibhXpPop .9s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes bibhXpPop {
0% { transform: scale(1); text-shadow: none; }
22% { transform: scale(1.18); text-shadow: 0 0 18px rgba(243, 215, 106, .95); }
100% { transform: scale(1); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.bibh-xp-pop { animation: none; }
}
/* =========================================================================
PAST PAPERS, immersive "paper" mode
Scoped to #bibh-home-modal.bibh-pp-open (a class only the past-papers view
adds). Mirrors the CRT approach: the modal's header bar and solid panel are
stripped and the .bibh-pp-* module takes over the body. Design-token
exemption applies to the .bibh-pp-* namespace only.
========================================================================= */
#bibh-home-modal.bibh-pp-open {
background: #ffd9a3;
align-items: flex-start;
/* Top padding clears the exit + download row pinned to the screen corners.
The BOTTOM was 34px, from when Previous/Next were fixed and floated over
this padding. They sit in the flow now, so that space is doing nothing but
shrinking the paper - 16px is enough to keep the pair off the screen edge. */
padding: 72px 20px 16px;
overflow-y: auto;
}
#bibh-home-modal.bibh-pp-open .bibh-home-lib {
background: none; box-shadow: none; border-radius: 0; overflow: visible;
/* This view is full-bleed: the sheet decides its own width, so the shell must
not cap it. At 940px the stage overflowed and threw the controls off-centre. */
width: 100%; max-width: none;
}
#bibh-home-modal.bibh-pp-open .bibh-home-lib-head { display: none; }
#bibh-home-modal.bibh-pp-open .bibh-home-lib-body {
padding: 0; background: none; max-height: none; overflow: visible;
}
.bibh-pp { position: relative; }
.bibh-pp-exit,
.bibh-pp-exit:hover,
.bibh-pp-exit:focus,
.bibh-pp-exit:active {
position: fixed; top: 22px; left: 22px; z-index: 8;
background: #fff; border: 1.5px solid var(--bibh-border, #e2e5ea);
box-shadow: var(--bibh-shadow-sm, 0 2px 12px rgba(32,61,72,.1)); border-radius: 30px;
padding: 11px 20px; font-family: inherit; font-weight: 800; font-size: 14px;
color: var(--bibh-dark, #203D48); cursor: pointer;
}
.bibh-pp-exit:hover { border-color: #ffd9a3; color: #ffa700; }
.bibh-pp-exit:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 2px; }
/* Downloads, top right. "This page" takes the question on screen and its marking
scheme; "Whole chapter" opens a picker. Anything past a single file is zipped in
the browser, so a chapter arrives as one download rather than 40 loose images. */
.bibh-pp-dls {
position: fixed; top: 22px; right: 22px; z-index: 8;
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border: 1.5px solid var(--bibh-border, #e2e5ea);
box-shadow: var(--bibh-shadow-sm, 0 2px 12px rgba(32,61,72,.1));
border-radius: 30px; padding: 7px 10px 7px 16px;
}
.bibh-pp-dls-lbl {
font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
color: var(--bibh-text-muted, #888888);
}
.bibh-pp-dl,
.bibh-pp-dl:hover,
.bibh-pp-dl:focus,
.bibh-pp-dl:active {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
background: #fff4e2; color: #ffa700; border: 1px solid #ffd9a3; border-radius: 30px;
padding: 8px 14px; font-family: inherit; font-size: 12.5px; font-weight: 800;
text-decoration: none; white-space: nowrap;
}
.bibh-pp-dl:hover { background: #ffe6c2; color: #ffa700; }
.bibh-pp-dl:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 2px; }
.bibh-pp-dl.alt,
.bibh-pp-dl.alt:focus,
.bibh-pp-dl.alt:active { background: var(--bibh-dark, #203D48); color: #fff; border-color: var(--bibh-dark, #203D48); }
.bibh-pp-dl.alt:hover { background: #2c5163; color: #fff; }
/* ── Whole-chapter download picker ─────────────────────────────────────────
The student sees exactly what is coming before it lands, questions first and
marking schemes after, which is also the order they sit in the zip. */
.bibh-pp-dlg-wrap {
position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(32, 61, 72, .34); backdrop-filter: blur(3px);
}
.bibh-pp-dlg {
width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
background: #fff; border-radius: 22px; overflow: hidden;
box-shadow: 0 30px 70px rgba(60, 40, 0, .32);
}
.bibh-pp-dlg-head { padding: 22px 26px 10px; }
.bibh-pp-dlg-title { font-size: 20px; font-weight: 900; color: var(--bibh-dark, #203D48); }
.bibh-pp-dlg-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: #d9750a; }
.bibh-pp-dlg-body { overflow-y: auto; padding: 4px 20px 10px; }
.bibh-pp-dlg-group {
display: flex; align-items: center; gap: 8px; padding: 16px 2px 10px;
font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
color: var(--bibh-text-muted, #888888);
}
.bibh-pp-dlg-group span { flex: 1; min-width: 0; }
.bibh-pp-dlg-all,
.bibh-pp-dlg-all:focus,
.bibh-pp-dlg-all:active {
background: #fff4e2; color: #a35a12; border: 1px solid #ffd9a3; border-radius: 30px;
padding: 5px 13px; font-family: inherit; font-size: 11px; font-weight: 900;
letter-spacing: .6px; text-transform: uppercase; cursor: pointer;
}
.bibh-pp-dlg-all:hover { background: #ffe6c2; color: #7d4208; }
.bibh-pp-dlg-none { padding: 4px 2px 6px; font-size: 13px; font-weight: 600; color: var(--bibh-text-muted, #888888); }
/* Pick papers by picture. Every card is a big tap target with an obvious on/off
state; nothing here asks the student to recall what "Question 7" looked like. */
.bibh-pp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 14px; }
.bibh-pp-thumb { position: relative; display: block; cursor: pointer; }
.bibh-pp-thumb input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bibh-pp-thumb-page {
display: block; height: 152px; overflow: hidden; background: #fffdf6;
border: 2px solid var(--bibh-border, #e2e5ea); border-radius: 12px;
transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.bibh-pp-thumb-page img { display: block; width: 100%; height: auto; }
.bibh-pp-thumb-tick {
position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #e59100; color: #fff; font-size: 14px; font-weight: 900; line-height: 1;
box-shadow: 0 2px 6px rgba(120, 80, 0, .35); transition: transform .15s, opacity .15s;
}
.bibh-pp-thumb-lbl {
display: block; margin-top: 7px; font-size: 12.5px; font-weight: 800; line-height: 1.3;
color: var(--bibh-dark, #203D48);
}
.bibh-pp-thumb-lbl em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--bibh-text-muted, #888888); }
.bibh-pp-thumb input:checked ~ .bibh-pp-thumb-page { border-color: #e59100; box-shadow: 0 4px 14px rgba(120, 80, 0, .18); }
/* Not chosen: drained of colour and the tick gone, so on/off is readable at a glance. */
.bibh-pp-thumb input:not(:checked) ~ .bibh-pp-thumb-page { opacity: .4; filter: grayscale(1); }
.bibh-pp-thumb input:not(:checked) ~ .bibh-pp-thumb-tick { opacity: 0; transform: scale(.4); }
.bibh-pp-thumb input:not(:checked) ~ .bibh-pp-thumb-lbl { color: var(--bibh-text-muted, #888888); }
.bibh-pp-thumb:hover .bibh-pp-thumb-page { border-color: #ffc46b; }
.bibh-pp-thumb input:focus-visible ~ .bibh-pp-thumb-page { outline: 2px solid #bb3f2d; outline-offset: 3px; }
.bibh-pp-dlg-foot {
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
padding: 14px 22px 18px; border-top: 1px solid var(--bibh-border, #e2e5ea);
}
.bibh-pp-dlg-foot .bibh-pp-btn { font-size: 14px; padding: 12px 20px; }
.bibh-pp-dlg-foot .bibh-pp-btn.next[disabled] { opacity: .45; cursor: default; }
.bibh-pp-head { text-align: center; padding-top: 6px; }
.bibh-pp-title { font-size: 26px; font-weight: 900; color: var(--bibh-dark, #203D48); }
.bibh-pp-chip {
display: inline-block; margin-top: 10px;
background: rgba(255, 255, 255, .55); color: #ffa700;
font-weight: 800; font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase;
padding: 9px 22px; border-radius: 30px;
}
/* As much of the screen as the chrome allows, so the fitted page is as big as it
can be before anyone has to zoom. */
/* THE STAGE IS THE PAGE. Its height is whatever the screen allows and its width
follows the scan's own aspect ratio (--pp-ar, set per question from the
attachment's real dimensions). A portrait exam page therefore renders portrait
and fills the height, which is what made the full-screen view readable, and the
side controls sit against the paper's true edges instead of a fixed box. */
.bibh-pp-stage {
position: relative;
/* Pulled in a little: the scan used to run almost edge to edge, which left the
surrounding controls crowded. Gavin's audit shows a smaller, softer page. */
/* Launch fix L-27: the 212px budget predates the nav pair being in the flow.
It covered the head and the timer while Previous/Next were `position:
fixed` and cost no height at all. L-26 moved them into the flow to sit
together, which added ~64px (46px of buttons + 18px margin) that nothing
subtracted, so the stage ran the pair off the bottom of the screen and a
student had to scroll to reach Next (Ashton, 2026-08-19).
The number is measured, not guessed, and it is the whole vertical budget:
72px modal top + 12px head + stage + 10px + 46px nav pair + 16px modal
bottom, plus the chip row.
270 made the pair fit but paid for it out of the paper, and a portrait
question came out too small to read comfortably. So the padding around it
was cut instead - 34px of dead modal bottom, 14px of head - and the paper
got that height back. Same result for the controls, a bigger page. */
height: calc(100vh - 226px); min-height: 300px; max-height: 1400px;
aspect-ratio: var(--pp-ar, 0.77);
width: auto; max-width: 86vw;
margin: 14px auto 0;
}
.bibh-pp-paper {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
transition: transform .45s cubic-bezier(.3, .7, .3, 1), filter .45s, opacity .35s;
}
/* An actual sheet of paper: warm off-white stock, a hairline edge, a printed
margin down the left with the red rule an exam script has, and the shadow of a
page lying on a desk. The page fills the stage rather than being sized by the
image, so every question sits on the same sheet. */
/* THE SHEET IS THE PAGE. It takes the full height available and shrink-wraps its
width to whatever the scan needs, so a portrait exam page renders portrait
instead of being squeezed into a landscape frame with empty margins either
side. That is what made the full-screen view readable, and it is the same
trick: the paper is the image, not a box the image sits inside. */
.bibh-pp-sheet {
position: relative; height: 100%; width: 100%;
/* The modal renders outside .bibh-hub, which is where common.css scopes its
global border-box, so padding was being ADDED to height:100% and the sheet
stood 22px taller than the stage. */
box-sizing: border-box;
background-color: #fff;
/* No punched holes or margin rule: they demanded a 58px gutter, which is what
pushed the scan off-centre and made the sheet read as a wide frame rather
than a page. The full-screen view they liked has neither. */
border: 1px solid rgba(90, 65, 20, .13);
/* Soft corners, matching the rest of the hub rather than a hard scan edge. */
border-radius: 18px;
overflow: hidden;
padding: 10px;
box-shadow:
0 1px 1px rgba(0, 0, 0, .05),
0 10px 20px rgba(120, 80, 0, .15),
0 34px 60px rgba(120, 80, 0, .24);
}
/* Bottom edge: the shadow the next page in the pile would cast. */
.bibh-pp-sheet::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; z-index: 2;
background: linear-gradient(to top, rgba(255, 253, 246, .96), rgba(255, 253, 246, 0));
border-radius: 0 0 17px 17px; pointer-events: none;
}
.bibh-pp-scroll {
position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: rgba(120, 80, 0, .3) transparent;
}
.bibh-pp-scroll::-webkit-scrollbar { width: 8px; }
.bibh-pp-scroll::-webkit-scrollbar-thumb { background: rgba(120, 80, 0, .28); border-radius: 8px; }
.bibh-pp-scroll { border-radius: 12px; }
.bibh-pp-scroll img { display: block; width: 100%; height: auto; padding-bottom: 30px; border-radius: 12px; }
/* FIT: the whole paper on screen, never cropped. Most of the library is landscape,
so this is both complete and readable; the zoom control covers the tall tail. */
.bibh-pp-sheet.fit .bibh-pp-scroll { overflow: hidden; }
/* The sheet already has the page's shape, so the scan simply fills it. */
.bibh-pp-sheet.fit .bibh-pp-scroll img { width: 100%; height: 100%; object-fit: contain; padding-bottom: 0; border-radius: 12px; }
.bibh-pp-sheet.fit::after { opacity: 0; }
/* Wide screens: the wrapper is not a box at all, so each control keeps the place
around the paper it already had. Narrow screens turn it into one row of controls
beneath the paper, see the media queries at the end of this block. */
.bibh-pp-tools { display: contents; }
.bibh-pp-case,
.bibh-pp-case:hover,
.bibh-pp-case:focus,
.bibh-pp-case:active {
position: absolute; left: 12px; bottom: 12px; z-index: 7;
background: #fff; color: var(--bibh-dark, #203D48);
border: 1.5px solid var(--bibh-border, #e2e5ea); border-radius: 30px;
padding: 10px 17px; font-family: inherit; font-size: 12.5px; font-weight: 800;
cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); white-space: nowrap;
}
.bibh-pp-case .narrow { display: none; }
.bibh-pp-case:hover { border-color: #ffd9a3; color: #b06d00; }
.bibh-pp-case:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 3px; }
.bibh-pp-zoom,
.bibh-pp-zoom:hover,
.bibh-pp-zoom:focus,
.bibh-pp-zoom:active {
position: absolute; right: 12px; bottom: 12px; z-index: 7;
background: rgba(32, 61, 72, .92); color: #fff; border: none; border-radius: 30px;
padding: 10px 17px; font-family: inherit; font-size: 12.5px; font-weight: 800;
cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); white-space: nowrap;
}
.bibh-pp-zoom:hover { background: #2c5163; color: #fff; }
.bibh-pp-zoom:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 3px; }
.bibh-pp-paper.multi .bibh-pp-sheet {
box-shadow:
0 1px 1px rgba(0, 0, 0, .05),
6px 6px 0 -1px #fffdf6, 6px 7px 3px rgba(120, 80, 0, .14),
12px 12px 0 -2px #fffdf6, 12px 13px 4px rgba(120, 80, 0, .12),
0 34px 60px rgba(120, 80, 0, .24);
}
.bibh-pp-pdfonly {
display: flex; align-items: center; justify-content: center;
height: 100%; padding: 30px; text-align: center;
}
.bibh-pp-pdfonly span { font-weight: 700; color: var(--bibh-text-muted, #888888); font-size: 14px; }
.bibh-pp-marks {
opacity: .62; mix-blend-mode: multiply;
position: absolute; top: 14px; right: 14px; z-index: 3;
font-size: 12px; font-weight: 900; letter-spacing: .5px; color: #c0392b;
border: 2px solid #c0392b; border-radius: 6px; padding: 4px 9px;
transform: rotate(-7deg); background: rgba(255, 255, 255, .7); text-transform: uppercase;
}
.bibh-pp-marks.scheme { color: #2f7a5f; border-color: #2f7a5f; }
/* Case-study stamp, a round rubber stamp, double ruled, sat in the same corner as
the marks stamp and just as translucent so the paper reads through it. It replaces
the marks stamp on a case-study paper: that sheet is read, not answered. */
.bibh-pp-stamp {
opacity: .58; mix-blend-mode: multiply;
position: absolute; top: 12px; right: 12px; z-index: 3;
width: 92px; height: 92px; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
color: #c0392b; border: 3px double #c0392b;
background: rgba(255, 255, 255, .55);
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
transform: rotate(-12deg); text-transform: uppercase; text-align: center;
font-weight: 900; letter-spacing: 1px; line-height: 1;
}
.bibh-pp-stamp em { font-style: normal; font-size: 13px; letter-spacing: 2px; }
.bibh-pp-stamp b { font-size: 16px; letter-spacing: 1px; }
.bibh-pp-question { z-index: 4; }
.bibh-pp-solution { z-index: 3; transform: translate(34px, 20px) scale(.96); filter: blur(5px) saturate(.92); }
/* ::before, because ::after is the sheet's bottom-edge fade. */
.bibh-pp-solution .bibh-pp-sheet::before {
content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
background: rgba(30, 45, 40, .12); border-radius: 3px 3px 5px 5px;
}
.bibh-pp.revealed .bibh-pp-question { transform: translate(-34px, 20px) scale(.96); filter: blur(4px); opacity: .5; z-index: 3; }
.bibh-pp.revealed .bibh-pp-solution { transform: none; filter: none; z-index: 5; }
/* ::before, matching where the dim now lives. This cleared ::after until 2.60.1,
which is the sheet's bottom fade, so a revealed marking scheme stayed dimmed. */
.bibh-pp.revealed .bibh-pp-solution .bibh-pp-sheet::before { background: transparent; }
.bibh-pp-pageflip {
position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); z-index: 6;
display: inline-flex; align-items: center; gap: 10px;
background: rgba(32, 61, 72, .92); color: #fff; border-radius: 30px; padding: 7px 8px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.bibh-pp-pageflip button { background: none; border: none; color: #fff; font-family: inherit; font-weight: 900; font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 8px; border-radius: 20px; }
.bibh-pp-pageflip button:hover { background: rgba(255, 255, 255, .16); }
.bibh-pp-pageflip span { font-size: 12px; font-weight: 800; letter-spacing: .4px; min-width: 74px; text-align: center; }
.bibh-pp-pdf {
display: block; margin: 16px auto 0; width: max-content; max-width: 92%;
color: #b06d00; font-weight: 800; font-size: 13px; text-decoration: underline; text-align: center;
}
/* The PDF link now sits under the stage rather than inside the solution sheet, so
it no longer needs the reveal state to become visible. */
/* Only the sheet in front owns a page-flip control; the one behind is blurred and
must not leave its own flip peeking out under it. */
.bibh-pp .bibh-pp-solution .bibh-pp-pageflip { opacity: 0; pointer-events: none; }
.bibh-pp.revealed .bibh-pp-solution .bibh-pp-pageflip { opacity: 1; pointer-events: auto; }
.bibh-pp.revealed .bibh-pp-question .bibh-pp-pageflip { opacity: 0; pointer-events: none; }
/* Beside the paper, where it has always been. */
.bibh-pp-reveal,
.bibh-pp-reveal:hover,
.bibh-pp-reveal:focus,
.bibh-pp-reveal:active {
position: absolute; right: -178px; top: 50%; transform: translateY(-50%); z-index: 7;
display: inline-flex; align-items: center; gap: 9px;
background: var(--bibh-dark, #203D48); color: #fff; border: none; border-radius: 30px;
padding: 13px 20px; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
box-shadow: 0 8px 20px rgba(32, 61, 72, .35); white-space: nowrap;
}
.bibh-pp-reveal:hover { background: #2c5163; color: #fff; }
.bibh-pp-reveal:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 3px; }
.bibh-pp.revealed .bibh-pp-reveal,
.bibh-pp.revealed .bibh-pp-reveal:hover,
.bibh-pp.revealed .bibh-pp-reveal:focus {
right: auto; left: -186px; background: #fff; color: var(--bibh-dark, #203D48);
border: 1.5px solid var(--bibh-border, #e2e5ea); box-shadow: var(--bibh-shadow-sm, 0 2px 12px rgba(32,61,72,.1));
}
/* Narrow screens have no room beside the paper, and controls floating on top of it
cover the question. All three become one wrapping row beneath the paper. */
@media (max-width: 1100px) {
.bibh-pp .bibh-pp-tools {
display: flex; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; z-index: 7;
}
.bibh-pp .bibh-pp-tools > button,
.bibh-pp .bibh-pp-tools > button:hover,
.bibh-pp .bibh-pp-tools > button:focus,
.bibh-pp .bibh-pp-tools > button:active {
position: static; transform: none; top: auto; right: auto; bottom: auto; left: auto;
}
.bibh-pp .bibh-pp-stage { height: calc(100vh - 282px); }
/* Specificity, not just order: the plain .bibh-pp-actions rule is declared
further down the file and would otherwise win this back. */
.bibh-pp .bibh-pp-actions { margin-top: 74px; }
/* The Prev/Next pair needs the same clearance for the same reason: from here
down .bibh-pp-tools is absolutely positioned under the sheet and pushes
nothing, so anything following the stage has to reserve the space itself.
Matches .bibh-pp-actions rather than inventing a second number (see L-20). */
.bibh-pp .bibh-pp-navrow { margin-top: 74px; }
}
.bibh-pp-actions { max-width: 560px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bibh-pp-hint { font-size: 12.5px; font-weight: 700; color: #96795a; text-align: center; }
.bibh-pp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: none; border-radius: 30px; font-family: inherit; font-weight: 800; font-size: 15px;
padding: 14px 24px; cursor: pointer; line-height: 1;
}
.bibh-pp-btn.ghost,
.bibh-pp-btn.ghost:hover,
.bibh-pp-btn.ghost:focus,
.bibh-pp-btn.ghost:active { background: #fff; color: var(--bibh-dark, #203D48); border: 1.5px solid var(--bibh-border, #e2e5ea); box-shadow: var(--bibh-shadow-sm, 0 2px 12px rgba(32,61,72,.1)); }
.bibh-pp-btn.ghost:hover { border-color: #ffd9a3; color: #b06d00; }
.bibh-pp-btn.ghost[disabled] { opacity: .4; cursor: default; }
.bibh-pp-btn.next,
.bibh-pp-btn.next:focus,
.bibh-pp-btn.next:active { background: #ffa700; color: #fff; box-shadow: var(--bibh-shadow-sm, 0 2px 12px rgba(32,61,72,.1)); }
.bibh-pp-btn.next:hover { background: #d98700; color: #fff; }
.bibh-pp-btn:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 3px; }
/* Keep the two action buttons on one line; "Back to home" was wrapping. */
.bibh-pp-btn { white-space: nowrap; flex: none; }
.bibh-pp-hint { flex: 1; min-width: 0; }
@media (max-width: 640px) {
/* This block used to send .bibh-pp-reveal to position:static, which parked it at
the top of the stage UNDERNEATH the absolutely-positioned sheets, "Show
solution" and "Back to question" were unreachable on every phone. The 980px
rules above own the control layout now; this block only trims chrome. */
/* Nothing is pinned to a screen corner on a phone: the exit and the download
cluster were both fixed and landed on top of each other. */
#bibh-home-modal.bibh-pp-open { padding: 16px 12px 24px; }
/* 96vw inside a 12px-padded modal overflows by a few pixels and pushed the
Next button past the right edge. */
#bibh-home-modal.bibh-pp-open .bibh-home-lib { width: 100%; }
/* The timer override that belongs with these lives further down, AFTER the
base .bibh-pp-timer rule - see L-19. Putting it here would lose. */
.bibh-pp-exit,
.bibh-pp-exit:hover,
.bibh-pp-exit:focus,
.bibh-pp-exit:active { position: static; display: block; width: max-content; margin: 0 auto 10px; }
.bibh-pp-dls { position: static; margin: 0 auto 4px; display: flex; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 100%; }
.bibh-pp-title { font-size: 20px; }
.bibh-pp-chip { padding: 7px 14px; font-size: 11px; letter-spacing: .8px; }
/* The punched margin costs 58px of a 390px screen. The paper still reads as
paper from its stock, edge and shadow, so the decoration goes. */
.bibh-pp-sheet { padding: 12px; background-image: none; }
.bibh-pp .bibh-pp-stage { height: calc(100vh - 318px); min-height: 220px; }
/* Short labels keep all three controls on one row, so the band below the paper
stays a single line and the actions row's clearance stays right. */
.bibh-pp-case .wide { display: none; }
.bibh-pp-case .narrow { display: inline; }
.bibh-pp-case, .bibh-pp-zoom, .bibh-pp-reveal { padding: 10px 14px; font-size: 12px; }
.bibh-pp-pdf { position: static; transform: none; display: inline-block; margin-top: 10px; }
.bibh-pp-actions { max-width: none; gap: 8px; }
.bibh-pp-btn { padding: 13px 16px; font-size: 14px; }
.bibh-pp-hint { font-size: 11.5px; }
}
/* ── Past Papers: countdown, pinned nav, full screen ──────────
The heading is gone and Previous / Next are pinned to the screen corners, so
the sheet takes the whole middle of the view. */
/* Same pill as the quiz and flashcard timers. */
.bibh-pp-timer {
position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 8;
display: inline-flex; align-items: center; gap: 12px;
background: #fff; border: 1px solid var(--bibh-border, #e2e5ea);
box-shadow: 0 6px 20px rgba(32, 61, 72, .16);
border-radius: 40px; padding: 10px 22px;
}
.bibh-pp-timer .tmic { font-size: 18px; }
.bibh-pp-timer .tmt {
font-size: 22px; font-weight: 900; color: var(--bibh-primary, #3F8170);
font-variant-numeric: tabular-nums; min-width: 64px; text-align: center;
transition: color .3s;
}
.bibh-pp-timer .tmtrk { width: 120px; height: 20px; background: #eef1f0; border-radius: 30px; overflow: hidden; }
.bibh-pp-timer .tmfl { height: 100%; background: var(--bibh-primary, #3F8170); border-radius: 30px; transition: width 1s linear, background .3s; }
.bibh-pp-timer .tmt.is-warning { color: #c9821b; }
.bibh-pp-timer .tmt.is-over { color: var(--bibh-danger, #dc2626); }
.bibh-pp-timer .tmt.is-warning ~ .tmtrk .tmfl { background: #e9a13b; }
.bibh-pp-timer .tmt.is-over ~ .tmtrk .tmfl { background: var(--bibh-danger, #dc2626); }
/* Nav pinned to the bottom corners, clear of the paper. */
/* Launch fix L-26: Previous and Next sit together.
They were pinned to opposite bottom corners, which on a laptop meant dragging
the pointer the full width of the screen between two controls a student uses
alternately (Ashton, 2026-08-19). They are one centred pair now, at every
width - the mobile rule that already did this simply became the only rule.
The paper keeps the height it had: the pair sits in the flow under it rather
than floating over it. */
.bibh-pp-navrow {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 10px auto 0;
}
.bibh-pp-nav,
.bibh-pp-nav:hover,
.bibh-pp-nav:focus,
.bibh-pp-nav:active { position: static; }
/* The sheet is a control now, so it says so on hover. No visual change at
rest: a permanently highlighted paper would look like an error state. */
.bibh-pp-sheet { cursor: pointer; }
.bibh-pp-sheet:focus-visible { outline: 3px solid var(--bibh-primary, #3F8170); outline-offset: 3px; }
/* The chapter chip is the only label above the sheet now. The timer is FIXED at
top:22 and stands ~48px tall, so without this the chip sat 2px under it. This
opens the same gap the flashcards top bar leaves above its chapter pill. */
.bibh-pp-head {
/* 26px -> 12px. Every pixel above the stage comes straight off the paper,
and the chip has its own vertical padding already. */
padding-top: 12px;
/* Chip and switch on one line, centred, wrapping to two on a narrow screen
rather than squeezing either. */
display: flex; align-items: center; justify-content: center;
gap: 12px; flex-wrap: wrap;
}
/* ── The question's own name, beside the chapter chip ─────────────────────
"2026 Q1" / "Black Market" / "2019 Q17 (a)". Quieter than the chapter chip
on purpose: the chapter is the heading, this is the reference number under
it, and two equally loud pills side by side would compete. */
.bibh-pp-qname {
display: inline-flex; align-items: center;
background: rgba(255, 255, 255, .82);
border: 1.5px solid rgba(187, 63, 45, .22);
border-radius: 30px;
padding: 7px 16px;
font-weight: 800; font-size: 12.5px;
letter-spacing: .06em; text-transform: uppercase;
color: #bb3f2d;
white-space: nowrap;
}
/* ── Marks, in the timer pill ─────────────────────────────────────────────
"Chunky green", per Ashton. Sits left of the clock so the pill reads
"what it's worth, how long you get". Nowrap because "12 marks" breaking
across two lines inside a pill looks like a fault. */
.bibh-pp-marksbadge {
display: inline-flex; align-items: center;
background: var(--bibh-primary, #3F8170);
color: #fff;
border-radius: 30px;
padding: 7px 15px;
margin-right: 2px;
font-weight: 900; font-size: 14px;
letter-spacing: .02em;
white-space: nowrap;
}
/* With no clock beside it the pill is just a wrapper, so it loses the padding
and background that made it a pill and lets the badge be the whole thing. */
.bibh-pp-timer.is-marksonly {
background: none; border: none; box-shadow: none; padding: 0; gap: 0;
}
@media (max-width: 544px) {
.bibh-pp-qname { padding: 6px 12px; font-size: 11px; }
.bibh-pp-marksbadge { padding: 6px 12px; font-size: 12.5px; }
}
/* ── Question / Solution switch ───────────────────────────────────────────
Replaces the "Show solution" button that used to sit beside Previous and
Next. Both states are always visible, so it reads as "which of these two am
I looking at" rather than as an instruction, and it takes about a third of
the width the sentence did. */
.bibh-pp-qs {
display: inline-flex;
background: rgba(255, 255, 255, .75);
border: 1.5px solid var(--bibh-border, #e2e5ea);
border-radius: 30px;
padding: 4px;
gap: 2px;
}
.bibh-pp-qs__b,
.bibh-pp-qs__b:hover,
.bibh-pp-qs__b:focus,
.bibh-pp-qs__b:active {
border: none;
background: none;
border-radius: 30px;
padding: 8px 18px;
font-family: inherit; font-weight: 800; font-size: 13px;
letter-spacing: .02em;
color: var(--bibh-text-light, #4a6272);
cursor: pointer;
transition: background .15s, color .15s;
}
.bibh-pp-qs__b:hover { color: var(--bibh-dark, #203D48); }
.bibh-pp-qs__b.is-on,
.bibh-pp-qs__b.is-on:hover {
background: var(--bibh-dark, #203D48);
color: #fff;
}
.bibh-pp-qs__b:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 2px; }
@media (max-width: 544px) {
.bibh-pp-qs__b { padding: 7px 14px; font-size: 12px; }
}
/* ── Launch fix L-20: the Exam Corner bottom row collided with itself ─────
"Previous" and "Next question" are `position: fixed` in the bottom corners so
the sheet can have the full height between them. "Show solution" and "Full
screen" sit in the flow just above. On a phone those two rows land at the
same height and the fixed pair is painted over the static pair: measured at
375px, Previous (12-100) covered Show solution (90-193), and Next question
(243-363) covered Full screen (201-285), which is why "Full screen" appeared
to be cut in half. Same shape as L-19 - a fixed control overlaying a static
one once the screen is narrow enough for them to meet.
Not reported; found while checking the L-19 fix on the same screen.
Below the base .bibh-pp-nav rule for the reason given in L-19. */
@media (max-width: 640px) {
.bibh-pp-nav,
.bibh-pp-nav:hover,
.bibh-pp-nav:focus,
.bibh-pp-nav:active {
position: static;
left: auto; right: auto; bottom: auto;
}
.bibh-pp-navrow {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
/* 74px, not a tidy 14: from 1100px down, .bibh-pp-tools is `position:
absolute; top: calc(100% + 12px)` on the stage - it is drawn under the
paper but is OUT OF THE FLOW, so it pushes nothing down. Anything
following the stage has to reserve the space itself or it lands on top
of the tools row, which is exactly what this row did on the first
attempt. .bibh-pp-actions already reserves 74px for the same reason;
this matches it rather than inventing a second number. */
margin: 74px auto 8px;
}
/* The tools row above it centres to match, so the four controls read as two
tidy rows rather than two different alignments. */
.bibh-pp-tools { justify-content: center; flex-wrap: wrap; gap: 10px; }
}
/* ── Launch fix L-19: "Back to Dashboard" was invisible on a phone ────────
It was rendering perfectly - static, centred, 161x39 at y16-55 - and the
countdown pill was sitting directly on top of it (fixed, y14-62). The mobile
block above drops the exit and the downloads into the flow but left the timer
`position: fixed`, so one of the three top controls never joined the other
two and covered the way out. Nothing was hidden or missing (Ashton, live test
2026-08-19).
Declared HERE, below the base `.bibh-pp-timer { position: fixed }`, and not
up in the mobile block with the exit and downloads. Written there first, it
did nothing at all: same specificity, earlier in the file, so the base rule
won on source order - the identical trap as L-16 in the quiz template, hit
twice in one stylesheet.
Losing the floating clock on a phone is the right trade: the stage is
height-capped at this width so the top controls stay on screen anyway, and a
clock that hides the exit is worse than one that scrolls with the page. */
@media (max-width: 640px) {
.bibh-pp-timer {
position: static;
transform: none;
margin: 0 auto 10px;
}
}
@media (max-width: 900px) {
.bibh-pp-timer { top: 14px; padding: 8px 16px; gap: 9px; }
.bibh-pp-timer .tmtrk { width: 80px; height: 16px; }
.bibh-pp-timer .tmt { font-size: 18px; min-width: 54px; }
.bibh-pp-nav,
.bibh-pp-nav:hover,
.bibh-pp-nav:focus,
.bibh-pp-nav:active { bottom: 14px; }
.bibh-pp-nav--prev { left: 12px; }
.bibh-pp-nav--next { right: 12px; }
}
/* Pause / resume, inside the timer pill. */
.bibh-pp-tmbtn,
.bibh-pp-tmbtn:hover,
.bibh-pp-tmbtn:focus,
.bibh-pp-tmbtn:active {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; min-width: 0; padding: 0; flex: none;
border: none; border-radius: 50%; box-shadow: none; cursor: pointer;
background: var(--bibh-primary-light, #e8f5f0); color: var(--bibh-primary-dark, #346b5d);
font-size: 11px; line-height: 1;
}
.bibh-pp-tmbtn:hover { background: var(--bibh-primary, #3F8170); color: #fff; }
.bibh-pp-tmbtn:focus-visible { outline: 2px solid var(--bibh-primary, #3F8170); outline-offset: 2px; }
/* ── Full screen: the page on its own ─────────────────────────
The scan, the clock and a way out. Everything else is chrome that would only
compete with reading it. */
.bibh-pp-fs {
position: fixed; inset: 0; z-index: 100000;
background: #ffd9a3;
display: flex; align-items: center; justify-content: center;
padding: 84px 24px 24px;
}
.bibh-pp-fs img {
max-width: 100%; max-height: 100%; width: auto; height: auto;
display: block; background: #fff; border-radius: 4px;
box-shadow: 0 10px 40px rgba(120, 80, 0, .28);
}
/* The pill keeps the same look, re-anchored to this overlay. */
.bibh-pp-fs .bibh-pp-timer { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); }
/* Chapter label, in the gap between the timer and the close button. Same type as
the chip on the page, on a solid pill so it sits with the timer rather than
looking like a third kind of thing. Set to the close button's height so the two
line up along the top. */
.bibh-pp-fs-chip {
position: absolute; top: 20px; right: 86px; z-index: 2;
display: inline-flex; align-items: center; height: 46px;
background: #fff; color: #ffa700;
font-weight: 800; font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase;
padding: 0 22px; border-radius: 30px;
box-shadow: 0 6px 20px rgba(32, 61, 72, .12);
max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Below this the centred timer and the chip meet, so the chip goes under it. */
@media (max-width: 1100px) {
.bibh-pp-fs-chip {
top: 74px; right: auto; left: 50%; transform: translateX(-50%);
height: 34px; font-size: 11px; letter-spacing: .8px; padding: 0 16px;
max-width: 70vw;
}
.bibh-pp-fs { padding-top: 118px; }
}
.bibh-pp-fs-x,
.bibh-pp-fs-x:hover,
.bibh-pp-fs-x:focus,
.bibh-pp-fs-x:active {
position: absolute; top: 20px; right: 24px; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; min-width: 0; padding: 0;
border-radius: 50%; border: 1.5px solid var(--bibh-border, #e2e5ea);
background: #fff; color: var(--bibh-dark, #203D48);
font-size: 18px; font-weight: 700; cursor: pointer;
box-shadow: 0 6px 20px rgba(32, 61, 72, .16);
}
.bibh-pp-fs-x:hover { background: var(--bibh-dark, #203D48); color: #fff; border-color: var(--bibh-dark, #203D48); }
.bibh-pp-fs-x:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 3px; }
/* Start reads as an invitation; pause/resume is quieter once it is running. */
.bibh-pp-tmbtn.is-start,
.bibh-pp-tmbtn.is-start:focus,
.bibh-pp-tmbtn.is-start:active {
background: var(--bibh-primary, #3F8170); color: #fff;
width: auto; padding: 0 14px; border-radius: 30px;
font-size: 12px; font-weight: 800;
}
.bibh-pp-tmbtn.is-start:hover { background: var(--bibh-primary-dark, #346b5d); color: #fff; }
.bibh-pp-tmbtn.is-start::after { content: " Start"; letter-spacing: .3px; }
/* Which page you are looking at, and how to swap. Sits low and quiet so it does
not compete with the paper. */
.bibh-pp-fs-hint {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
background: rgba(255, 255, 255, .9); color: var(--bibh-dark, #203D48);
border-radius: 30px; padding: 8px 18px;
font-size: 13px; font-weight: 600; white-space: nowrap;
box-shadow: 0 4px 14px rgba(32, 61, 72, .14);
}
.bibh-pp-fs-hint b { font-weight: 900; }
@media (max-width: 700px) { .bibh-pp-fs-hint { display: none; } }
/* Flip control in full screen. The arrows are the shortcut; this is the thing
you can actually see and click. */
.bibh-pp-fs-flip,
.bibh-pp-fs-flip:hover,
.bibh-pp-fs-flip:focus,
.bibh-pp-fs-flip:active {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
display: inline-flex; align-items: center; gap: 10px;
background: var(--bibh-dark, #203D48); color: #fff; border: none;
border-radius: 30px; padding: 12px 22px; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 800;
box-shadow: 0 8px 22px rgba(32, 61, 72, .3);
}
.bibh-pp-fs-flip:hover { background: #2c5163; color: #fff; }
.bibh-pp-fs-flip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bibh-pp-fs-flip em { font-style: normal; opacity: .7; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
/* Move between questions without leaving full screen. Same wording and the same
two weights as the page behind - white to go back, orange to go on - so the
overlay is not a different set of controls to learn.
Parked either side of the paper and centred on it, rather than in the bottom
corners: at this size the eye is on the middle of the page, and the flip keeps
the bottom centre to itself. */
.bibh-pp-fs-nav,
.bibh-pp-fs-nav:hover,
.bibh-pp-fs-nav:focus,
.bibh-pp-fs-nav:active {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: none; border-radius: 30px; cursor: pointer;
font-family: inherit; font-weight: 800; font-size: 15px; line-height: 1;
padding: 14px 24px; white-space: nowrap;
box-shadow: 0 6px 20px rgba(32, 61, 72, .18);
}
.bibh-pp-fs-nav--prev,
.bibh-pp-fs-nav--prev:hover,
.bibh-pp-fs-nav--prev:focus,
.bibh-pp-fs-nav--prev:active {
left: 26px; background: #fff; color: var(--bibh-dark, #203D48);
}
.bibh-pp-fs-nav--prev:hover { color: #b06d00; }
.bibh-pp-fs-nav--prev[disabled] { opacity: .4; cursor: default; }
.bibh-pp-fs-nav--prev[disabled]:hover { color: var(--bibh-dark, #203D48); }
.bibh-pp-fs-nav--next,
.bibh-pp-fs-nav--next:hover,
.bibh-pp-fs-nav--next:focus,
.bibh-pp-fs-nav--next:active { right: 26px; background: #ffa700; color: #fff; }
.bibh-pp-fs-nav--next:hover { background: #d98700; }
.bibh-pp-fs-nav:focus-visible { outline: 2px solid #bb3f2d; outline-offset: 3px; }
/* The keyboard hint, same treatment as the flip control's arrows. */
.bibh-pp-fs-nav em { font-style: normal; opacity: .7; font-size: 11px; font-weight: 700; }
/* Narrow screens have no room beside the paper, so the pair drops to the bottom
corners and the flip lifts above them. */
@media (max-width: 900px) {
.bibh-pp-fs { padding: 84px 12px 92px; }
.bibh-pp-fs-nav,
.bibh-pp-fs-nav:hover,
.bibh-pp-fs-nav:focus,
.bibh-pp-fs-nav:active {
top: auto; bottom: 18px; transform: none;
padding: 11px 16px; font-size: 13px;
}
.bibh-pp-fs-nav--prev { left: 12px; }
.bibh-pp-fs-nav--next { right: 12px; }
.bibh-pp-fs-flip,
.bibh-pp-fs-flip:hover,
.bibh-pp-fs-flip:focus,
.bibh-pp-fs-flip:active { bottom: 66px; padding: 10px 18px; font-size: 13px; }
}
.bibh-pp-fs { outline: none; } /* it takes focus so the keys land; do not ring it */
/* A LANDSCAPE page makes the stage wide, so the side rail would run off the
screen. Those pages put the controls in the row beneath instead, which is the
same treatment narrow screens already get. */
.bibh-pp-stage.is-wide .bibh-pp-tools {
display: flex; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; z-index: 7;
}
.bibh-pp-stage.is-wide .bibh-pp-tools > button,
.bibh-pp-stage.is-wide .bibh-pp-tools > button:hover,
.bibh-pp-stage.is-wide .bibh-pp-tools > button:focus,
.bibh-pp-stage.is-wide .bibh-pp-tools > button:active {
position: static; transform: none; top: auto; right: auto; bottom: auto; left: auto;
}
/* Leave room for that row so it never sits under the pinned Previous / Next. */
/* Landscape papers were drawn far too big (Ashton, 2026-08-19). A wide sheet
takes its width from its height x aspect ratio, so on a tall desktop screen
the height budget alone produced a ~1270px-wide scan - readable, but so large
that the question ran past the fold and the controls went with it.
Two caps, because either alone leaves a hole: the height keeps it inside the
viewport on a short screen, and the absolute width stops a very tall window
inflating it. 1040px is about the width the text was authored to be read at;
past that the page is just bigger, not clearer. */
.bibh-pp-stage.is-wide {
max-height: calc(100vh - 290px);
max-width: min(84vw, 1040px);
}
/* What an assignment covers, under its name. A quiz called "COME ON GUYS !"
tells a student nothing on its own; the chapter and topic do.
The title needed a flex basis first: it had min-width:0 but nothing telling it
to take the free space, so the moment it held a block child it collapsed to
min-content and set the name one letter per line. */
/* Two rows inside the tile: name and scope on top, XP and due underneath. The
tile is a fixed 330px, and icon + name + XP pill + due date will not fit on
one line, so the name was being squeezed to nothing. */
.bibh-home-ac-body {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: 7px;
}
.bibh-home-ac-meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* The pills sat on margin-left:auto to push right on a single row. In a column
that would centre them oddly, so they start at the left with the name. */
.bibh-home-ac .bibh-home-ac-meta .xp,
.bibh-home-ac .bibh-home-ac-meta .due { margin-left: 0; }
.bibh-home-ac .ttl .scope {
display: block;
margin-top: 2px;
font-size: 12px;
font-weight: 600;
color: var(--bibh-text-light, #4a6272);
line-height: 1.3;
}
/* D-05: the label is now a SENTENCE, so the scope indicator after it needs a
separator or the two run together and read as one instruction. */
.bibh-home-lbl-sep { opacity: .5; margin: 0 2px; }
/* ══════════════════════════════════════════════════════════════════════════
MIND MAPS
Full bleed, the same shape as the Exam Corner: a class only this view sets
strips the modal chrome and the module owns the space.
The map itself is an IFRAME. Those files are authored outside the plugin and
style bare tags, so injecting one would repaint the hub around it. The frame
also means a new map can use any markup at all and still just work.
══════════════════════════════════════════════════════════════════════════ */
#bibh-home-modal.bibh-mm-open {
background: #E4F5F6;
align-items: flex-start;
padding: 0;
overflow: hidden;
}
#bibh-home-modal.bibh-mm-open .bibh-home-lib {
background: none; box-shadow: none; border-radius: 0; overflow: visible;
width: 100%; max-width: none; height: 100%;
}
#bibh-home-modal.bibh-mm-open .bibh-home-lib-head { display: none; }
#bibh-home-modal.bibh-mm-open .bibh-home-lib-body {
padding: 0; background: none; max-height: none; overflow: visible; height: 100%;
}
.bibh-mm { display: flex; flex-direction: column; height: 100vh; }
.bibh-mm-bar {
flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 20px;
}
.bibh-mm-tools { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
/* Same control as the flashcard session's Exit to Dashboard (fc-exit): white,
thin border, soft drop shadow, 30px, tinting to the module's own colour on
hover. Here that colour is the Mind Maps purple, the one the dashboard tile
uses (.bibh-home-tile.t-mind), so the button belongs to this module the way
the flashcards one belongs to that one.
Astra repaints button hover and focus, so all three states are pinned. */
.bibh-mm-exit,
.bibh-mm-exit:hover,
.bibh-mm-exit:focus,
.bibh-mm-exit:active {
background: #fff;
border: 1.5px solid #ddd5fb;
box-shadow: 0 10px 30px rgba(60, 30, 150, .14);
border-radius: 30px;
padding: 13px 24px;
font-family: inherit;
font-weight: 800;
font-size: 15px;
color: var(--bibh-dark, #203D48);
cursor: pointer;
text-decoration: none;
line-height: 1;
transition: background .15s, border-color .15s, color .15s;
}
.bibh-mm-exit:hover,
.bibh-mm-exit:focus,
.bibh-mm-exit:active {
background: #f4f1ff;
border-color: #7A5AF8;
color: #5638d4;
}
.bibh-mm-exit:focus-visible { outline: 2px solid #5638d4; outline-offset: 3px; }
.bibh-mm-btn,
.bibh-mm-btn:hover,
.bibh-mm-btn:focus,
.bibh-mm-btn:active {
border: none; border-radius: 30px; font-family: inherit; font-weight: 800;
font-size: 14.5px; padding: 11px 20px; cursor: pointer; line-height: 1.1;
transition: transform .11s, box-shadow .11s;
}
.bibh-mm-btn--pdf { background: var(--bibh-warning, #FFA700); color: #fff; box-shadow: 0 4px 0 #c47f00; }
.bibh-mm-btn--pdf:active { transform: translateY(3px); box-shadow: 0 1px 0 #c47f00; }
.bibh-mm-btn:focus-visible { outline: 2px solid var(--bibh-dark, #203D48); outline-offset: 3px; }
/* The stage takes the rest of the screen and the frame fills it. The map scrolls
inside its own frame, so the hub behind it never scrolls with it. */
/* ── Mind map, full screen ────────────────────────────────────────────────
The overlay does the work in CSS so it fills the screen on EVERY device,
including iPhone Safari, which has no Fullscreen API for anything but a