/* ============================================================ ANNOTATED NOTEBOOK — the picker family, GEOMETRY ONLY. Same split as notebook-auth.css: the skin (notebook-pickers-skin.css) stays COLOURS ONLY and keeps its 1:1 layout contract with the legacy sheet; this file is the one place the picker's boxes are allowed to move. Loaded ONLY when nb_active (pages/includes/nb_picker_skin.html), after styles.css and the theme-light.css link, so a bare legacy selector already wins on source order — no `html` prefix needed here, because theme-light.css carries no picker geometry. OWNS: where the A-Level and IGCSE card grids sit vertically (owner call 2026-09-01 — centre the cards, change nothing else: every card keeps the width, padding and outer alignment styles.css gives it, and .pg-back and .pg-board-head keep the exact y they have on the legacy page), the header rhythm, the subject grids' centring, and since 2026-09-24 the one piece of card INTERIOR geometry the owner asked for: the subject chips sit on an even grid, and card feet share a line across a row. Since 2026-09-25 (the mobile audit) it also owns four touch and tablet repairs at the end: the card columns clear the floating theme button, the back link's hit area, the subject grids' tablet columns and the gateway's shared chip line. After them sits the zoom band (round 2): under 260 CSS px, a phone zoomed to 150 or 200%, the cards stack their icon above the name. MUST NOT CONTAIN: any colour (no hex, no rgba, no colour token — the skin owns ink and this file is in ZERO_RAW_COLOR_FILES); any font-*, line-height or letter-spacing (the typography role sheets load last and stay authoritative, and a `font:` shorthand here would grow the notebook typography ratchet); the `transition` shorthand (declare transition-duration so the harness's selector lookup stays unambiguous). NOT HERE: /subject-index/ and the six si-* subject grids. The gateway carries a help aside under its 2x2 grid and already overflows the fold at 1280x720; five of the six si-* pages do the same, so neither has slack to centre into. ============================================================ */ /* The shell already reserves the screen below the topbar (styles.css: min-height: calc(100svh - 72px)), and on a two-card picker the cards used the top of that height and left the rest dead — 369px of it at 1440x900, 888px at 2560x1440. The slack now falls on both sides of the cards instead of all below them. The chain: the shell and its inner become a flex column so the layout can grow to the shell's full height; the layout's second grid row takes 1fr; the card grid centres inside THAT row. The header sits in the auto row above it and does not move. */ .pg-board-shell--alevel, .pg-board-shell--igcse, .pg-board-shell--gateway { display: flex; flex-direction: column; } .pg-board-shell--alevel > .pg-board-inner, .pg-board-shell--igcse > .pg-board-inner, .pg-board-shell--gateway > .pg-board-inner { display: flex; flex-direction: column; flex-grow: 1; } /* .pg-back is inline-flex, so as a flex item it would stretch to the inner's full width — taking its absolutely-positioned underline (left:25px right:0) and its click target with it, right across the page. Hold it to its content, as it is on the legacy page. */ .pg-board-shell--alevel > .pg-board-inner > .pg-back, .pg-board-shell--igcse > .pg-board-inner > .pg-back, .pg-board-shell--gateway > .pg-board-inner > .pg-back { align-self: flex-start; } .pg-board-shell--alevel .pg-board-layout, .pg-board-shell--igcse .pg-board-layout, .pg-board-shell--gateway .pg-board-layout { flex-grow: 1; grid-template-rows: auto 1fr; } /* margin-block: auto, NOT align-self/align-items/place-items. An auto margin resolves to zero the moment content outgrows its track, so a phone degrades to top-anchored and stays fully scrollable; centring keywords overflow both ways and put the top of the content above the scroll origin, where it cannot be reached — a failure that is invisible on a tall monitor. */ .pg-board-shell--alevel .pg-board-cards, .pg-board-shell--igcse .pg-board-cards, .pg-board-shell--gateway .pg-board-cards { margin-block: auto; } /* ============================================================ HEADER RHYTHM — one measure for the whole family. The three shapes disagreed about where a header sits and how far it stands off its own paragraph. Measured at 1600x900 before this block: gateway chrome -> title 44.1 title -> lede 18 alevel/igcse chrome -> title 111.6 title -> lede 18 subject grids chrome -> title 148.6 title -> lede 20 The board shells were the tight ones -- the title started 44px under the chrome and the paragraph sat 18px off a 30px headline, which is less than the headline's own leading. Both move onto the spacing scale, and the title-to-paragraph step is now the same 24px on all three shapes. Owner call 2026-09-04: text lower, paragraph better spaced, consistent across the family. ============================================================ */ .pg-board-shell--alevel .pg-board-layout, .pg-board-shell--igcse .pg-board-layout, .pg-board-shell--gateway .pg-board-layout { padding-top: clamp(var(--nb-s6), 4.5vh, var(--nb-s9)); } .pg-board-shell--alevel .pg-board-title, .pg-board-shell--igcse .pg-board-title, .pg-board-shell--gateway .pg-board-title, .si-page .pg-hero-title { margin-bottom: var(--nb-s6); } /* ============================================================ THE SUBJECT GRIDS CENTRE TOO. .si-page carries the same reservation the board shells do (min-height, so the footer starts at the fold) and had the same fault: display: block, so the grid never grew into it and every spare pixel pooled underneath. Measured on /sat/ before this: 349 above the grid, 801 below it at 2560x1440. Same mechanism as the board shells, and the same reason for auto margins over a centring keyword -- they collapse to zero when the grid outgrows the screen, so a phone degrades to top-anchored and stays scrollable instead of hiding its first row above the scroll origin. ============================================================ */ .si-page { display: flex; flex-direction: column; } .si-page > .si-grid-section { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; } .si-page > .si-grid-section > .pg-inner { width: 100%; margin-block: auto; } /* ============================================================ SUBJECT CHIPS SIT ON A GRID. Owner call 2026-09-24: "make the subject index chips symmetrical". The chips on the gateway (/subject-index/) and the two board pickers (/igcse/, /alevel/) were label-width pills in a wrapping flex row, so every card broke differently: 4 + 2 and 3 + 3 + 1 on a phone, 5 + 2 on the desktop AP card, with no two columns lining up and each row ending at a different x. Now every chip on a card is one width, the chips sit in N equal columns, and the group is centred on the card's axis. A short last row centres too: on a phone AP's seventh chip sits under the middle column. Chip ink, border and label type are untouched: the skin and the typography bridge still own them. ONE WIDTH, CAPPED. A chip is 1/N of the card's row, gaps included, but never wider than --pg-chip-max (6.25rem: the 100px a chip has on a 390 phone, "Physics 1 & 2" with 11px either side). Where N capped chips leave room over, the chip block pads itself in by half the spare on each side, so the group stays centred and N columns still make a row. Without the cap a three-chip card stretched its chips to 167px on desktop and read as a segmented control, and AP's were 124px under IGCSE's 80px. The container is the card, not the chip block, because the block's own padding is what the query sets. N is the most columns the card's widest label allows, and each step below is that width written out: N chips of (label + 4px padding each side + two 1px borders) plus (N - 1) 8px gaps, rounded up. The steps are in REM, not px, so they scale with the text: at 150% or 200% text a row drops to fewer columns before a label can spill. (A px step never fired when only the text grew, and at 200% every long label spilled into its neighbour.) The px parts are counted at 16px a rem, which only makes a step fire early at larger text. any card widest label "Physics 1 & 2" (78.2px text, 88.2 chip) 2 cols from 11.6rem, 3 cols from 17.6rem six chips widest label "Chemistry" (60.5px text, 70.5 chip): IGCSE and A-Level here, both cards on /igcse/ and /alevel/. 2 from 9.4rem, 3 from 14.25rem, and 6 -- one row, as the legacy page had on desktop -- from 29.125rem, the 466px at which the legacy label-width chips first made one row. Right at the step a chip is 71px and Chemistry sits 5px inside its edges; a later step would buy room by giving these cards a second row (+38px) the legacy page did not have, and push the gateway past the fold at 1100x720 seven chips AP. 4 cols (4 + 3) from 23.6rem, the two rows the legacy 5 + 2 had on desktop three chips SAT, widest label "Reading" (48.2px text, 58.2 chip): 3 cols from 12rem, so a 320px phone keeps one row So a desktop card keeps the legacy page's row count, and with it the card heights the pickers' fit-the-screen layout was measured on, with one exception: a gateway window 871 to 919px wide puts AP in a 354-378px card, too narrow for four 88.2px chips, so AP is 3 + 3 + 1 there where the legacy chips made two rows (+38px). AP's 4 + 3 on desktop is a brick bond, not a grid: the second row centres under the first, half a column in. Seven chips in two centred rows cannot line up; 3 + 3 + 1 does, at one more row. Below the first step a card is one column. overflow-wrap is the last resort for a label no step anticipated (a renamed subject): it breaks inside a taller chip -- min-height, never a fixed height -- instead of spilling out of it. ============================================================ */ .pg-board-shell .pg-bcard { container: pg-chips / inline-size; } .pg-board-shell .pg-bcard-subjects { --pg-chip-cols: 1; --pg-chip-max: 6.25rem; gap: var(--nb-s2); justify-content: center; padding-inline: max(0px, (100cqi - var(--pg-chip-cols) * var(--pg-chip-max) - (var(--pg-chip-cols) - 1) * var(--nb-s2)) / 2); } .pg-board-shell .pg-bcard-chip { flex: 0 0 calc((100% - (var(--pg-chip-cols) - 1) * var(--nb-s2)) / var(--pg-chip-cols)); justify-content: center; min-width: 0; height: auto; min-height: 30px; padding: var(--nb-s1); text-align: center; white-space: normal; overflow-wrap: anywhere; } @container pg-chips (width >= 11.6rem) { .pg-board-shell .pg-bcard-subjects { --pg-chip-cols: 2; } } @container pg-chips (width >= 17.6rem) { .pg-board-shell .pg-bcard-subjects { --pg-chip-cols: 3; } } @container pg-chips (width >= 23.6rem) { .pg-board-shell .pg-bcard-subjects:has(> .pg-bcard-chip:nth-child(7):last-child) { --pg-chip-cols: 4; } } @container pg-chips (width >= 12rem) { .pg-board-shell .pg-bcard-subjects:has(> .pg-bcard-chip:nth-child(3):last-child) { --pg-chip-cols: 3; } } @container pg-chips (width >= 9.4rem) { .pg-board-shell .pg-bcard-subjects:has(> .pg-bcard-chip:nth-child(6):last-child) { --pg-chip-cols: 2; } } @container pg-chips (width >= 14.25rem) { .pg-board-shell .pg-bcard-subjects:has(> .pg-bcard-chip:nth-child(6):last-child) { --pg-chip-cols: 3; } } @container pg-chips (width >= 29.125rem) { .pg-board-shell .pg-bcard-subjects:has(> .pg-bcard-chip:nth-child(6):last-child) { --pg-chip-cols: 6; } } /* ============================================================ CARD FEET SHARE ONE LINE ACROSS A ROW. The gateway's second row pairs AP (seven chips) with SAT (three), and each card's rule and footer sat right under its own chips, so the two "Browse ..." lines stood 38px apart and SAT carried a dead band below its footer. The chip block now takes the card's spare height and keeps its chips at the top, which puts every rule and footer in a row on the same line. A card with no spare height (every phone, both board pickers) is unchanged. ============================================================ */ .pg-board-shell .pg-bcard-subjects { flex-grow: 1; align-content: flex-start; } /* ============================================================ THE MOBILE AUDIT (2026-09-25). Four repairs, each fenced to the widths or the pointer that needed it. 1440 and 1920 are outside every range here, so the desktop page does not move. ============================================================ */ /* The card columns clear the floating theme button (K-002). #ft-theme-toggle is fixed at right 24px, 46px wide, and shows from 1024px up (interaction-feedback.css). The pickers' columns ran under it: the gateway and board cards end 20px from the edge, the subject grids 40px, so the button sat on the SAT card at 1024x768 and on every right-hand card as the page scrolled, and a tap there flipped the theme instead of opening the card. Each column now ends 8px left of the button: 24 + 46 + 8 = 78px from the edge. The board shell's padding is the larger of that and the margin its centred 1160px column already leaves; the subject grid (a 1100px box with 40px padding) pads 78px until its own centring margin starts to count, then eases back to 40. Either way a column only moves where it would reach the button, and where it already clears (1316px up for the board shells, 1176px up for the subject grids) it resolves to the position it had before, with no step at either end of the range. A percentage padding is a share of the page's width without the scrollbar, the same width the fixed button is placed in, so a classic scrollbar cannot put the two back on top of each other. */ @media (min-width: 1024px) and (max-width: 1339px) { .pg-board-shell { padding-inline: max(78px, (100% - 1160px) / 2); } .si-page > .si-grid-section > .pg-inner { padding-inline: clamp(40px, 78px - (100% - 1100px) / 2, 78px); } } /* The back link is a 44px target on touch (K-004). .pg-back is 27px tall and its y is pinned (owner call, header above), so the link does not grow: an empty ::before does, 9px up, 8px down and 8px either side (27 + 17 = 44). .pg-back is already position: relative and ::after is its underline; ::before was free. */ @media (pointer: coarse) { .pg-back::before { content: ""; position: absolute; inset: -9px -8px -8px -8px; } } /* The subject grids keep two columns on tablets (K-007). The legacy sheet drops .si-grid to one column at 860px and below, which on a 768 or 820 tablet made six full-width 690-740px bars with the text ending a third of the way in and the grid running past the fold. Two columns hold down to 721px: the cards are 316px there and the longest name wraps inside its card, as it does at 861. Phones (720 and below) keep one column. (0,2,0) beats the legacy (0,1,0). */ @media (min-width: 721px) and (max-width: 860px) { .si-page .si-grid { grid-template-columns: 1fr 1fr; } } /* Paired gateway cards start their chips on one line (K-014). In the two-column band the qualifier under a programme name wraps on one card and not on the card beside it ("International GCSE · Edexcel & Cambridge" against "Advanced Level · ..." at 844, AP against SAT at 768), so one card's chips started 22px lower than its neighbour's. The cards cannot share a header row: each is a size container for its chips, and containment switches subgrid off. So in this band every gateway qualifier holds two lines, and every row starts its chips on the same line. 3em is two lines at the qualifier's leading for browsers without the lh unit. Nothing wraps from about 875px up, so the band ends at 899. */ @media (min-width: 761px) and (max-width: 899px) { .pg-board-shell--gateway .pg-bcard-qual { min-height: 3em; min-height: 2lh; } } /* ============================================================ THE ZOOM BAND (mobile audit round 2, K-R1-3a). Under 260 CSS px. A phone zoomed to 150 or 200% lays the page out at its width divided by the zoom: 160px (320 at 200%) to 259px. No device is that narrow (the smallest phone is 320), so only a zoomed page ever enters this band; every phone width and the desktop never match it. Measured before it, in Chromium and WebKit: the gateway scrolled sideways (190px of page in 160, 218 in 215): .pg-cta-section::before is a centred 220px hairline in a section that does not clip; the programme and board cards (.pg-bcard-top: a 52px tile, a 16px gap, then the name) left the name 14 to 60px, and the card cut it off: "Edexc", "Pearso", "Camb"; the subject cards (.si-card: a 50px icon, the name and the chevron in one row) read "Biol" and "Che", with the chevron over the title; the Premium gateway's title ends on "programme", a 154px word at 160px, and the layout's one grid column grew to fit it, so the shell cut 10px off the right of every card. Now the hairline is never wider than its section, the tile and the icon sit above the name (the chevron at the top right), and the name takes the card's full width. A word still longer than the column breaks inside its card, never past its edge, and the gateway title's may break too (anywhere, so the grid column sizes to the screen, not to its longest word). Only the gateway's: on /igcse/ and /alevel/ at 160 "resources" is 129px in a 128px column, and the 1px it takes from the right gutter clips nothing, so it stays whole. Only such a word breaks: no hyphens: auto, which also split words that fit ("revi-sion re-sources"). Geometry only: the type stays the typography sheets' own. ============================================================ */ @media (max-width: 259px) { .pg-cta-section::before { max-width: 100%; } .pg-board-shell .pg-bcard { padding-inline: 16px; } .pg-board-shell .pg-bcard-top { flex-wrap: wrap; row-gap: 12px; } .pg-board-shell .pg-bcard-main { flex-basis: 100%; } .pg-board-shell .pg-bcard-name, .pg-board-shell .pg-bcard-qual, .si-page .si-card-name { overflow-wrap: break-word; } .pg-board-shell--gateway .pg-board-title { overflow-wrap: anywhere; } .si-page .si-card { flex-wrap: wrap; row-gap: 10px; padding-inline: 16px; } .si-page .si-card-body { flex-basis: 100%; order: 1; } .si-page .si-card-arrow { margin-left: auto; } }