/* ═══════════════════════════════════════════════════════════════════════════ Student Manager — page shell for the student view App bar, "next lesson" hero, empty state, feedback footer. Every value here goes through the --cbtt-* custom properties that backend/settings_design.php already prints inline, so a teacher's chosen design carries straight over. The fallbacks equal the classic Orange design, matching css/design-skin.css — so this file also works when the design is set to "Default – Theme related" and no palette is printed at all. Scoped under .cbtt-sm-shell throughout. The plugin runs inside somebody else's theme, and an unscoped rule here would leak into it — the way the existing ".row { display: block }" in assets/css/contract_dashboard.css already does. ═══════════════════════════════════════════════════════════════════════════ */ /* --cbtt-dock-h is the one number .cbtt-sm-nav__item's min-height (Zone L) and this shell's own padding-bottom below (Zone F) both read, so the space reserved for the dock cannot drift out of step with the dock itself. A dock item's content stack is 17px icon + 3px gap + 14.4px per label line (12px / 1.2, UX 9.9's floor since 2026-09-11) + 6px top/bottom padding: one line ≈46px, two lines ≈61px. 61px is therefore the floor — every label measured (German and English, 320–414px, Figtree) takes at most two lines, so the bar is the same 61px on every phone instead of jumping between widths. A third line (a long name brought in through the filter) makes ≈75px, which the +16px in the reserve below and in the accessibility button's lift (Zone L) still absorb. Until then the labels were 10.5px on a 56px floor. --cbtt-sm-dock-reserve is that number turned into the strip the shell keeps free at its foot. It is its own property because a SECOND box subtracts exactly the same amount: the rail shaft (Zone M) is an absolutely positioned child of this shell, and bottom:0 on it would reach down through the reserved strip and let the sticky rail park underneath the action bar. --cbtt-sm-chrome-top is the first line of the window that the site's own fixed and sticky bars do not cover — the admin bar plus a sticky theme header. The app bar sticks there, the rail sticks a gap below it, and every anchor target clears it. assets/js/cbtt-sm-nav.js MEASURES it and writes it onto each shell, because no theme publishes its header height and the one that is ours changes it at runtime: CBTT-Turbo's header is about 70px at rest and 42 to 55px once scrolled (depending on whether its menu carries a button), and the customizer scales the logo on top of that. A constant is wrong on every site in a different way, and here it would be wrong on the customers' sites, whose themes we have never seen. Without the script it falls back to --cbtt-sticky-top, CBTT-Turbo's measurement of the WordPress admin bar. theme.js writes that one to as an inline style and this shell is a descendant, so what arrives here by inheritance is the measured value. A theme without it contributes 0 — the same top:0 the app bar had before, so nothing gets worse. */ .cbtt-sm-shell { --cbtt-dock-h: 61px; --cbtt-sm-dock-reserve: calc(var(--cbtt-dock-h, 61px) + env(safe-area-inset-bottom, 0px) + 16px); --cbtt-sm-chrome-top: var(--cbtt-sticky-top, 0px); --cbtt-sm-rail-gap: 12px; /* 76px item + 2×6px padding + 2×1px border. The shaft's minimum width below reads it, so the rail and the room made for it cannot disagree. */ --cbtt-sm-rail-w: 90px; font-family: var(--cbtt-font-sans, inherit); color: var(--cbtt-text, #1d2327); } /* The positioning context for the rail shaft (Zone M), and ONLY on the shell that has one. The calendar, reports and feedback pages set the modifier when they really rendered a rail, instead of this being derived with :has() — the trial calendar, the GDPR export and the three wp-admin screens share .cbtt-sm-shell and keep plain static positioning, in every browser. position:relative does NOT make a containing block for position:fixed, so .cbtt-sm-actionbar keeps hanging off the viewport. The one other absolutely positioned descendant without a positioned ancestor of its own is .cbtt-sm-skip, which now appears 8px inside the shell rather than 8px inside the document — where the student is looking anyway. */ .cbtt-sm-shell--rail { position: relative; } /* The target layout is a 720 px reading column, but that width is NOT set on .cbtt-sm-shell: the legacy card grid (.cbtt-cal-*) still renders inside this wrapper until the lesson list is rebuilt, and constraining the wrapper would squeeze the desktop grid in the meantime. So each new block carries the measure itself, and the width moves up to the wrapper once the old grid is gone. */ .cbtt-sm-appbar, .cbtt-sm-hero, .cbtt-sm-empty, .cbtt-sm-feedback { max-width: 720px; margin-inline: auto; padding-inline: 16px; } /* The next lesson is the single most important thing on the page, and it was the only block that was NOT a card — so between a boxed offer above it and boxed rows below it, the one item that matters read as a gap. It gets the card treatment the rows have, one step stronger: the accent edge marks it as the page's subject rather than one entry among many. */ .cbtt-sm-hero__card { margin: 0 16px; padding: 14px 16px; border: 1px solid var(--cbtt-border, #e6e3dd); border-left: 3px solid var(--cbtt-accent, #0193aa); border-radius: var(--cbtt-radius-md, 10px); background: var(--cbtt-surface, #fff); } @media (min-width: 752px) { .cbtt-sm-hero__card { margin-inline: 0; } } /* Anything a notice or an in-page link jumps to. Without this the target lands under the sticky app bar — the "Top up" link scrolled the balance panel to exactly where the bar covers it. The 72px are the app bar (52px) plus air. They used to be the whole answer because the app bar stuck to the top of the WINDOW, underneath the site's own header; it now sticks below that header (Zone B), so a target has to clear both. The property is inherited, so it also resolves for the four ids, all of which sit inside .cbtt-sm-shell. */ .cbtt-sm-shell :target, #cbtt-sm-schedule, #cbtt-sm-contract, #cbtt-sm-topup, #cbtt-sm-account { scroll-margin-top: calc(var(--cbtt-sm-chrome-top, 0px) + 72px); } /* The same for keyboard focus (WCAG 2.4.11, UX rule 9.2). With the app bar sticking visibly below the site header instead of hidden under it, a Shift+Tab that scrolls a lesson's button in at the top edge used to land it underneath header plus app bar, and a Tab at the bottom edge underneath the dock. Browsers honour scroll-margin when they scroll a focused element into view. The navigation itself is left out: the rail scrolls inside itself, and the dock and the action bar are fixed — a margin there would only push their own scrolling around. */ .cbtt-sm-shell :is(a, button, input, select, textarea, summary, [tabindex]):not(.cbtt-sm-rail *, .cbtt-sm-dock *, .cbtt-sm-actionbar *) { scroll-margin-top: calc(var(--cbtt-sm-chrome-top, 0px) + 64px); scroll-margin-bottom: calc(var(--cbtt-dock-h, 61px) + 16px); } /* Skip link — zone A. The promise "the timetable without a click" only holds for keyboard and screen-reader users if there is a way past the chrome. */ .cbtt-sm-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--cbtt-surface, #fff); color: var(--cbtt-link, #086b7e); border-radius: var(--cbtt-radius-md, 4px); box-shadow: var(--cbtt-shadow-md, 0 4px 6px rgba(0, 0, 0, .1)); } .cbtt-sm-skip:focus { left: 8px; top: 8px; } /* ── Zone B — app bar ──────────────────────────────────────────────────── */ /* top used to be 0: "stick to the top of the window", which on a theme with a sticky header means underneath it (CBTT-Turbo's is z-index 100 against this bar's 30). The bar stuck, but out of sight — the same geometric fault as the rail's in Zone M, one element over. Fixing only the rail would have left this bar the single thing on the page still sliding under the header, so both read the same edge now and cannot disagree about it. */ .cbtt-sm-appbar { position: sticky; top: var(--cbtt-sm-chrome-top, 0px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; background: var(--cbtt-surface, #fff); border-bottom: 1px solid var(--cbtt-border-soft, #eee); } /* position:sticky is silently dead if ANY ancestor has overflow other than visible — a very common theme rule. CBTT-Turbo deliberately uses overflow-x: clip instead of hidden on html and body for exactly this reason (theme.css, with the reasoning next to it). In a theme that uses hidden — html, body or any wrapper, overflow-x:hidden on #page is the classic — this bar simply stops following and scrolls away with the page. For the rail in Zone M that would take away the only desktop menu, so there the script detects the ancestor and hands the navigation to the dock instead (data-nosticky). Verify on the live site rather than assuming; if it does not stick, the culprit is an ancestor, not this rule. */ /* min-width:0 plus truncation: without it the title refuses to shrink below its content width, and on a 375 px bar carrying two chips it wrapped to a second line — turning a 52 px bar into an 80 px one right above the thing this whole layout exists to put first. */ .cbtt-sm-appbar__title { margin: 0; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--cbtt-text, #1d2327); /* The bar is a strip of UI chrome, not a piece of the theme's prose. Every property a theme routinely sets on a bare h1 has to be answered here or the same element renders differently on the two pages that use it: on the reports page the title is an

card-header, btn btn-primary, table, progress-bar, plus three