/* THE BAR. One stylesheet, for every faculty site.
 *
 * Kiers, 19 October 2026: "ALL FACULTY SITES (including Maths) must align on the navigations and
 * header items, location, style." And, the same morning: "Many many changes that have been
 * implemented elsewhere have slipped Maths by completely."
 *
 * He was right, and the cause was structural rather than anyone's carelessness: the bar was written
 * three times. The nine shells generated it in JavaScript, Technology had site/tf/bar.js, Maths built
 * it into static HTML. A decision taken once reached one of them. When this file was made, the three
 * copies had already drifted: Technology had the faculty switcher styles and the language toggle,
 * THE SHELLS HAD NEITHER, and Maths had neither plus seven style options where everyone else had four.
 *
 * So this is the single source. It began as Technology's, because that is the look Kiers has approved
 * and the most complete of the three, plus the two fixes found on 19 October.
 *
 * ⚠ CHANGES GO HERE FIRST, then to every site, the same day. A rule added to one site's own bar.css
 * is the drift starting again. The standard for what the bar CONTAINS, and where, is
 * Core/BAR-STANDARD.md; this file is only how it looks.
 */

/* The faculty bar and menu — on every page of the site, including the class sites, which is why
   every class here starts "tf-": the class pages have their own nav/header/.wrap rules and nothing
   here may collide with them. The bar is the Booking Manager's header, value for value
   (hardware-booking web/styles.css), white in every theme. */
.tf-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  position:relative; padding:14px 24px 17px; background:#ffffff; color:#16191d; margin:0;
  font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; text-align:left }
.tf-bar *, .tf-tabs * { box-sizing:border-box }
/* The school's four colours, moving right forever (Kiers, 25 Sep); still for reduced motion. */
.tf-bar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, #617b30 0 25%, #c56035 25% 50%, #e2a145 50% 75%, #244572 75% 100%);
  background-size:100vw 3px; background-repeat:repeat-x; animation:tf-brandline 24s linear infinite }
@keyframes tf-brandline { from { background-position:0 0 } to { background-position:100vw 0 } }
@media (prefers-reduced-motion: reduce) { .tf-bar::after { animation:none } }
.tf-brand { display:flex; gap:22px; align-items:center; padding-right:40px }
.tf-brand a { text-decoration:none; border:0 }
.tf-logo { display:block; flex:none; height:51px; width:auto; margin:8px 10px 8px 4px }
.tf-app { margin:0; padding-left:22px; border-left:1px solid #dfe3e8;
  font-family:"Avenir Next", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#16191d }
a.tf-app:hover { color:#244572 }
.tf-people { margin-left:auto; display:flex; align-items:center; gap:12px }

/* SIGN OUT LIVES BEHIND THE PICTURE. Kiers, 21 October 2026: "Sign Out should be accessible by
   clicking on the logged in picture." So the photo and name become one button that opens a small
   menu, and the separate Sign out button beside them is gone from every site. One rule here rather
   than four near-misses in four codebases. */
.tf-whob { display:inline-flex; align-items:center; gap:9px; padding:3px 4px; border:2px solid transparent;
  border-radius:999px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer }
.tf-whob:hover { background:#f1f3f6 }
.tf-whob:focus-visible { outline:2px solid #2f6096; outline-offset:1px }
.tf-whodrop.tf-open > .tf-whob { background:#fff; border-color:#dfe3e8 }
/* the menu hangs from the right edge, because the picture is the last thing in the bar */
.tf-whodrop > .tf-menu { left:auto; right:0; top:calc(100% + 6px); min-width:190px; z-index:3000 }
.tf-whodrop .tf-who-r { display:block }
/* A short rule setting the signed-in person apart from the rest of the bar. */
.tf-people::before { content:""; width:1px; height:30px; background:#dfe3e8; margin-right:6px }
/* The whole top — bar, menu and, on a lesson page, its clock — stays in view when the page scrolls. */
.tf-top { position:sticky; top:0; z-index:1000 }
.tf-who { display:flex; align-items:center; gap:10px }
.tf-avatar { width:36px; height:36px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:#244572; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600 }
.tf-avatar img { width:100%; height:100%; object-fit:cover; display:block }
.tf-who-t { display:flex; flex-direction:column; line-height:1.2 }
.tf-who-n { font-size:13.5px; font-weight:600; color:#16191d }
.tf-who-r { font-size:12px; color:#626b76 }
.tf-btn { padding:5px 14px; border:1px solid #dfe3e8; border-radius:999px; color:#626b76; text-decoration:none;
  font-size:13px; background:#fff }
.tf-btn:hover { border-color:#626b76; color:#16191d }
.tf-login { background:#244572; border-color:#244572; color:#fff; font-weight:600 }
.tf-login:hover { color:#fff; filter:brightness(1.12) }
[hidden].tf-who, [hidden].tf-btn, [hidden].tf-tab, [hidden].tf-drop { display:none !important }

.tf-tabs { background:#f7f8fa; border-bottom:1px solid #dfe3e8; margin:0;
  font:14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; text-align:left }
.tf-tabs-in { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 24px }
.tf-tab { display:inline-flex; align-items:center; height:30px; padding:0 14px; border:1px solid transparent;
  border-radius:6px; background:transparent; color:#16191d; font:inherit; font-size:14px; font-weight:500;
  line-height:1; text-decoration:none; cursor:pointer; margin:0 }
.tf-tab:hover { background:#ffffff; border-color:#dfe3e8 }
.tf-tab[aria-current="page"] { background:#ffffff; border-color:#244572; font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.06) }
.tf-tab:focus-visible { outline:2px solid #2f6096; outline-offset:1px }
.tf-mode { margin-left:auto; color:#626b76 }
/* Dropdowns: Middle School (and later Lower and Upper Primary) and the signed-in sections. */
.tf-drop { position:relative }
.tf-drop { display:inline-flex; align-items:center }
.tf-drop > .tf-dl { border-top-right-radius:0; border-bottom-right-radius:0; padding-right:8px }
.tf-dt { display:inline-flex; align-items:center; justify-content:center; width:26px; height:30px; padding:0; margin:0 0 0 -1px;
  border:1px solid transparent; border-radius:0 6px 6px 0; background:transparent; color:#16191d; cursor:pointer }
.tf-dt::after { content:""; width:0; height:0; border:4px solid transparent; border-top-color:currentColor; border-bottom:0; opacity:.6; margin-top:3px }
.tf-drop.tf-open > .tf-dl, .tf-drop.tf-open > .tf-dt { background:#ffffff; border-color:#dfe3e8 }
.tf-dt:focus-visible { outline:2px solid #2f6096; outline-offset:1px }
.tf-drop.tf-here > .tf-dl, .tf-drop.tf-here > .tf-dt { background:#ffffff; border-color:#244572; font-weight:600 }
.tf-menu { display:none; position:absolute; left:0; top:calc(100% + 4px); z-index:1000; min-width:190px; padding:6px;
  background:#ffffff; border:1px solid #dfe3e8; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.12) }
.tf-drop.tf-open > .tf-menu { display:block }
/* Opened by tf/bar.js (class tf-open), not by :hover — see there. Keyboard focus opens it too. */
.tf-drop:focus-within > .tf-menu { display:block }
/* An invisible bridge over the gap between a tab and its menu. */
.tf-menu::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px }
.tf-menu a { display:block; padding:7px 12px; border-radius:6px; color:#16191d; text-decoration:none; font-size:14px; white-space:nowrap }
.tf-menu a:hover, .tf-menu a:focus-visible { background:#f7f8fa; outline:none }
.tf-menu a[aria-current="page"] { font-weight:600; color:#244572 }
@media (max-width:560px) { .tf-brand { padding-right:0; gap:14px } .tf-app { padding-left:14px } .tf-who-t { display:none }
  .tf-tabs-in { padding:6px 14px } }

.tf-menu hr { border:0; border-top:1px solid #dfe3e8; margin:4px 10px }

/* Nested menus: an item with pages of its own opens a further menu to its side on hover. */
.tf-mi { position:relative }
.tf-mi > a { display:flex !important; justify-content:space-between; align-items:center; gap:14px }
.tf-mi.tf-has > a::after { content:"›"; font-size:16px; line-height:1; color:#626b76 }
.tf-sub { display:none; position:absolute; left:calc(100% - 4px); top:-7px; z-index:1001; min-width:220px; max-width:360px; padding:6px;
  background:#ffffff; border:1px solid #dfe3e8; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.14) }
.tf-mi.tf-open > .tf-sub, .tf-mi:focus-within > .tf-sub { display:block }
/* A bridge on the side the menu opens, so the pointer never falls through a gap. */
.tf-sub::before { content:""; position:absolute; top:0; bottom:0; left:-10px; width:10px }
.tf-mi.tf-flip > .tf-sub::before { left:auto; right:-10px }
.tf-mi.tf-flip > .tf-sub { left:auto; right:calc(100% - 4px) }
.tf-sub a { white-space:normal !important; line-height:1.3 }
.tf-mi.tf-open > a { background:#f7f8fa }
/* section titles inside drop-downs (not links), and wider pop-outs so titles fit on one or two lines (Kiers, 26 Sep) */
.tf-mh { padding:8px 12px 4px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim,#5c6b80); cursor:default }
.tf-sub { min-width:320px; max-width:460px }
.tf-menu hr.tf-thick,.tf-sub hr.tf-thick{border-top:3px solid #14181f;margin:8px 6px}
/* the teacher's reminders during a lesson (register, points) */
.tf-rem{background:#fff7ed;border-bottom:2px solid #f97316}
.tf-rem-i{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 18px;font-size:15px;color:#7c2d12}
.tf-rem-p{background:#fef3c7;color:#713f12}
.tf-rem-b{font-weight:bold;padding:4px 12px;border-radius:999px;background:#f97316;color:#fff!important;text-decoration:none}
.tf-rem-x{margin-left:auto;font:inherit;font-weight:bold;padding:4px 12px;border-radius:999px;border:2px solid #16a34a;background:#fff;color:#16a34a;cursor:pointer}
/* Pupil view (a teacher's window on the board): hide everything only a teacher sees */
/* [data-staff] IS SCOPED TO main, WHICH IS WHAT IT ALWAYS MEANT.
 *
 * 22 October 2026, the THIRD rule in this file hiding the teacher row on a board, found while Kiers
 * was teaching. Technology marks the row and every item on it with data-staff:
 *   <nav class="tf-staffnav tf-area tf-area-staff" data-staff>
 *     <a class="tf-tab tf-priv" href="/staff/points/" data-staff>
 * so an unscoped html.as-pupil [data-staff] removed the nav AND each item inside it.
 *
 * data-staff marks an IN-PAGE block only a teacher should see. The sibling rule twelve lines below
 * has always said so: html:not(.as-pupil) main [data-staff] draws the "Only you see this" outline,
 * scoped to main. This one was missing that scope, and nothing noticed while the bar was being
 * hidden wholesale by two other rules.
 *
 * What must not be on a board is named by ADDRESS, once, further down. Not by "is this for staff",
 * which is a different question: seating plans and Lessons are for staff AND belong on a board. */
html.as-pupil main [data-staff],html.as-pupil .for-teacher,html.as-pupil .tf-rem,html.as-pupil .tf-dash,html.as-pupil .tf-notes,
/* .tf-priv WAS IN THIS LIST AND HID THE WHOLE TEACHER ROW ON A BOARD.
 *
 * 22 October 2026, while Kiers was teaching Y7.1: the by-address rule further down restored the row,
 * and the row stayed empty anyway, because every item on it carries .tf-priv (that is the class that
 * makes it yellow, two rules below). So this line removed each item individually and the narrower
 * fix had nothing left to show. Two rules, same job, in one file, and I only looked at one of them.
 *
 * .tf-priv means "staff only", not "must not be on a board". The things that must not be on a board
 * are named by address, once, further down: points, behaviour, competencies, score. Owner controls,
 * sign out and the dashboard switcher still go, because those act on the teacher's own session and
 * a class should not be able to tap them. */
html.as-pupil [data-owner],html.as-pupil .tf-logout,html.as-pupil .tf-dashw{display:none!important}
html.as-pupil .tf-view{background:#f97316;color:#fff;border-color:#f97316}
/* in the teacher view, everything pupils do not see is marked (Kiers, 28 Sep: the board and my screen looked different) */
html:not(.as-pupil) main [data-staff]:not([hidden]),html:not(.as-pupil) .for-teacher{position:relative;outline:2px dashed #f97316;outline-offset:4px;border-radius:6px}
html:not(.as-pupil) main [data-staff]:not([hidden])::before,html:not(.as-pupil) .for-teacher::before{content:"👩‍🏫 Only you see this";display:block;font-size:12px;font-weight:bold;color:#c2410c;margin-bottom:4px}
/* the teacher's clock bar, fixed at the top of every page */
.tf-clock{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:2000;display:flex;align-items:center;gap:12px;padding:6px 16px;
  border-radius:0 0 14px 14px;background:#617b30;color:#fff;font:14px/1.2 inherit;box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap}
.tf-clock .tf-c-t{font-size:20px;font-variant-numeric:tabular-nums}.tf-clock a{color:#fde68a;font-weight:bold}
.tf-clock.tf-c-late{background:#b91c1c}
.tf-clock{left:0;right:0;transform:none;border-radius:0;justify-content:center;padding:5px 16px}
body.has-clock{padding-top:36px}
.tf-clock.tf-c-break{background:#0d9488}
/* signed-in-only menu items: yellow lozenges at the end (Kiers, 28 Sep) */
.tf-tab.tf-priv,.tf-priv>.tf-tab{background:#fde68a;border-radius:999px!important;color:#713f12!important;padding-left:14px;padding-right:14px}
.tf-drop.tf-priv{background:#fde68a;border-radius:999px}.tf-drop.tf-priv .tf-dt{color:#713f12}
.tf-tabs-in>.tf-priv:not([hidden]){order:2}.tf-tabs-in>.tf-mode{order:3}
/* the Teacher dashboard drop-down */
.tf-dashw{position:relative}.tf-dashm{position:absolute;right:0;top:calc(100% + 6px);z-index:1500;min-width:340px;padding:8px;border:1px solid #dfe3e8;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.tf-dashm a{display:inline-block;padding:4px 8px;border-radius:8px;color:#16191d;text-decoration:none;font-size:13.5px}.tf-dashm a:hover{background:#f1f5f9}
.tf-dm-now{display:block!important;font-weight:bold;background:#dcfce7}.tf-dm-h{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#626b76;margin:8px 8px 2px}
.tf-dm-r{display:flex;align-items:center;gap:2px;padding:2px 0;border-top:1px solid #f1f5f9}.tf-dm-r b{flex:1;font-size:13px;padding-left:8px}
/* yellow lozenges stay one lozenge: no borders on the link and arrow; the page you are on gets a dark outline round the whole lozenge */
.tf-drop.tf-priv>.tf-dl,.tf-drop.tf-priv>.tf-dt{background:transparent!important;border-color:transparent!important;box-shadow:none!important;border-radius:999px}
.tf-drop.tf-priv{border:2px solid transparent}.tf-drop.tf-priv.tf-here,.tf-drop.tf-priv.tf-open{border-color:#713f12}
.tf-drop.tf-priv.tf-here>.tf-dl{font-weight:700}.tf-tab.tf-priv[aria-current="page"]{background:#fde68a;border:2px solid #713f12}
.tf-c-push{font-size:17px;padding:8px 22px;box-shadow:0 0 0 3px #fff;animation:tfpush 2s ease-in-out infinite}@keyframes tfpush{50%{box-shadow:0 0 0 6px #86efac}}
.tf-clock{padding:6px 16px}
/* the class clock shows in Pupil view too (the board), without the teacher's buttons */
html.as-pupil .tf-clock{display:flex}

/* the board (Board view): a small, faint clock for the teacher only */
.tf-mini{position:fixed;right:10px;bottom:74px;z-index:40;font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(77,98,38,.55);color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;pointer-events:none;letter-spacing:.02em}
.tf-mini-late{background:rgba(185,28,28,.7)}
/* three areas (Kiers, 28 Sep evening): the section of the bar and its buttons share one colour —
   blue for everyone, green for pupils, yellow for staff */
.tf-area{display:inline-flex;align-items:center;gap:2px;padding:3px 6px 3px 4px;border-radius:999px;order:1}
.tf-area[hidden]{display:none!important}
.tf-area-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 8px 0 8px;opacity:.75}
.tf-area-pub{background:#dbeafe;color:#1e3a8a}.tf-area-pupil{background:#dcfce7;color:#14532d}.tf-area-staff{background:#fde68a;color:#713f12}
.tf-area .tf-tab,.tf-area .tf-dt{color:inherit!important;background:transparent!important;border-color:transparent!important;border-radius:999px!important}
.tf-area .tf-drop{border:2px solid transparent;border-radius:999px;background:transparent!important}
.tf-area .tf-drop.tf-here,.tf-area .tf-drop.tf-open,.tf-area .tf-tab[aria-current="page"]{border-color:currentColor!important}
.tf-area .tf-drop.tf-here>.tf-dl{font-weight:700}
.tf-area .tf-tab:hover,.tf-area .tf-drop:hover{background:rgba(255,255,255,.55)!important}
.tf-area .tf-menu{color:#16191d}
/* BOARD VIEW HIDES THE THREE SCREENS, NOT THE WHOLE TEACHER ROW.
 *
 * This was html.as-pupil .tf-area-staff{display:none}, which removed the entire yellow row whenever
 * a teacher put the board into pupil view. It was right on 28 September, when Kiers found the points
 * page showing on the board, and it is too broad now that two of his later decisions need items on
 * that row to survive:
 *   4 Oct 2026, seating plans: "arranged by touch on the board".
 *   22 Oct 2026, Lessons moved into the teacher row and "stays visible on the board".
 * Technology had to override this line locally to get the row back, which is the signal that the
 * shared rule was wrong rather than that Technology is special.
 *
 * So it hides BY ADDRESS, the same four as the 2400px rule below, and for the same reason: Points,
 * Behaviour and Competencies name a child and must never be in front of a class. Everything else on
 * the row stays. Two conditions, one list: as-pupil covers a teacher who forced board view on a
 * laptop with ?board=1, where the width rule would not fire.
 *
 * Note as-pupil is the TEACHER's board view, not a signed-in pupil: src/tf/bar.js sets it when the
 * window is the board showing the pupils' view. A pupil never sees this row at all, because the
 * server does not send it. */
html.as-pupil a.tf-tab[href*="/staff/points/"],
html.as-pupil a.tf-tab[href*="/staff/behaviour/"],
html.as-pupil a.tf-tab[href*="/staff/competencies/"],
html.as-pupil a.tf-tab[href*="/staff/score/"]{display:none!important}
/* The same three since they became drop-down items on 27 October. The 2400px block further down hides
 * them by WIDTH; this hides them by VIEW, for a teacher in pupil view on a screen narrower than that. */
html.as-pupil .tf-staffnav .tf-menu a[href*="/staff/points/"],
html.as-pupil .tf-staffnav .tf-menu a[href*="/staff/behaviour/"],
html.as-pupil .tf-staffnav .tf-menu a[href*="/staff/competencies/"],
html.as-pupil .tf-staffnav .tf-menu a[href*="/staff/score/"]{display:none!important}
/* 🎓 Teach (Kiers, 29 Sep) */
.tf-teachw{position:relative}.tf-teachm{position:absolute;right:0;top:calc(100% + 6px);z-index:1500;min-width:420px;padding:8px;border:1px solid #dfe3e8;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.tf-tm-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 4px;border-top:1px solid #f1f5f9}.tf-tm-r:first-child{border-top:0}.tf-tm-r b{flex:1 1 100%;font-size:13.5px}
.tf-tm-r button,.tf-tm-r a{font:inherit;font-size:13.5px;padding:5px 10px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;color:#16191d;text-decoration:none;cursor:pointer}
.tf-tm-r button:hover,.tf-tm-r a:hover{border-color:#1e3a8a}.tf-tm-k{font-size:12px;color:#626b76;margin:6px 4px 2px}
html.as-pupil .tf-teachw{display:none!important}
/* drop-downs take a lighter tone of their area, and the dividing lines are the area's colour at the weight of a
   selected button's outline (Kiers, 29 Sep: "slightly less offensive") */
.tf-area-pub .tf-menu{background:#f1f6ff;border-color:#bfdbfe}.tf-area-pupil .tf-menu{background:#f0fdf4;border-color:#bbf7d0}.tf-area-staff .tf-menu{background:#fffbeb;border-color:#fde68a}
.tf-area .tf-menu hr.tf-thick,.tf-area .tf-sub hr.tf-thick{border-top:2px solid currentColor;margin:6px 6px;opacity:1}
.tf-area-pub .tf-menu{color:#1e3a8a}.tf-area-pupil .tf-menu{color:#14532d}.tf-area-staff .tf-menu{color:#713f12}
.tf-area .tf-menu a{color:#16191d}.tf-area .tf-menu a:hover{background:rgba(255,255,255,.8)}
.tf-area-pub .tf-sub{background:#f1f6ff;border-color:#bfdbfe;color:#1e3a8a}.tf-area-pupil .tf-sub{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}.tf-area-staff .tf-sub{background:#fffbeb;border-color:#fde68a;color:#713f12}
.tf-area .tf-sub a{color:#16191d}
/* the points panel on the board (Kiers, 29 Sep) */
.bp{position:fixed;right:18px;top:18px;bottom:18px;width:min(760px,calc(100vw - 36px));z-index:20000;overflow:auto;padding:18px 20px;border-radius:20px;background:#fff;border:3px solid #14181f;box-shadow:0 20px 60px rgba(0,0,0,.35);font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;color:#14181f}
.bp button{font:inherit;cursor:pointer}.bp-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.bp-h>b{font-size:22px;flex:1}
.bp-p button{padding:6px 14px;border-radius:999px;border:2px solid #617b30;background:#fff;font-weight:800;margin-left:4px}.bp-p button.on{background:#617b30;color:#fff}.bp-p button.on:hover{background:#4d6226}
.bp-x{padding:6px 14px;border-radius:999px;border:1px solid #cbd5e1;background:#f8fafc}
.bp-s{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.bp-slot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:14px;border:2px dashed #94a3b8;background:#f8fafc;text-align:left;min-height:96px}
.bp-slot.on{border:3px solid #ca8a04;background:#fffbeb}.bp-slot b{font-size:24px}.bp .pc{color:#64748b;font-size:14px}
.bp em{font-style:normal;color:#fff;font-weight:700;padding:2px 10px;border-radius:999px;font-size:14px}
.bp-v{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.bp-v button{padding:8px 14px;border-radius:999px;border:0;background:var(--c);color:#fff;font-weight:800}
.bp-k{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.bp-k button{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;text-align:left}
.bp-k button.off{opacity:.45}.bp-k button.used{outline:3px solid #ca8a04}.bp i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-style:normal;flex:none}
.bp-f{display:flex;align-items:center;gap:12px;margin-top:14px}.bp-ok{padding:12px 22px;border-radius:999px;border:0;background:#16a34a;color:#fff;font-weight:900;font-size:18px}.bp-ok:disabled{background:#94a3b8}.bp-m{color:#b91c1c;font-weight:700}
.bp-an{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(820px,calc(100vw - 36px));text-align:center}.bp-an h2{font-size:34px;margin:0 0 16px}
.bp-a{display:flex;align-items:center;justify-content:center;gap:14px;font-size:30px;font-weight:800;margin:10px 0;animation:bp-in .5s ease both}.bp-a:nth-child(3){animation-delay:.4s}.bp-a:nth-child(4){animation-delay:.8s}
.bp-a b{font-size:40px;color:#ca8a04}.bp-a i{width:48px;height:48px;font-size:30px}.bp-a em{font-size:22px;padding:4px 16px}@keyframes bp-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.bp-later{position:fixed;right:10px;bottom:110px;z-index:19999;font:inherit;font-weight:800;padding:8px 14px;border-radius:999px;border:2px solid #ca8a04;background:#fffbeb;cursor:pointer}
body.kid > .bp,body.kid > .bp-later{display:block!important}body.kid > .bp.bp-an{display:block!important}


/* Dashboard · Board · Lesson (Kiers, 30 Sep): the teacher's view switch in the header, on every page and view */
.tf-seg{display:inline-flex;border:2px solid #617b30;border-radius:999px;overflow:hidden;margin-right:8px;background:#fff}
.tf-seg button{font:inherit;font-size:14px;font-weight:700;padding:7px 14px;border:0;background:#fff;color:#14181f;cursor:pointer}
.tf-seg button+button{border-left:2px solid #14181f}
.tf-seg button.on{background:#617b30;color:#fff}.tf-seg button.on:hover{background:#4d6226}
.tf-seg button:disabled{opacity:.35;cursor:default}
html.as-pupil .tf-seg{display:inline-flex!important}
@media (max-width:700px){.tf-seg button{padding:6px 9px;font-size:12px}}
/* ☰ My menu tools row (30 Sep): 🎹 Music and 📋 Teacher notes */
.tf-dm-tools{display:flex;gap:6px;padding:6px 8px;border-bottom:1px solid #e5e7eb;margin-bottom:4px}
.tf-dm-tools .tf-piano-b,.tf-dm-tools a{flex:1;display:block;text-align:center;font:inherit;font-weight:bold;padding:7px 8px;border-radius:8px;border:1px solid #cbd5e1;background:#f8fafc;color:#111827;cursor:pointer;text-decoration:none}
.tf-dm-tools .tf-piano-b.on{background:#dbeafe;border-color:#3b82f6}
/* Site features (Kiers, 1 Oct): a small round sky-blue "i" just right of Dark mode, staff only (data-staff, bar.js) */
.tf-feat{order:3;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;margin:0;border-radius:50%;
  background:#0ea5e9;border:2px solid #38bdf8;color:#fff;font:italic 700 17px/1 Georgia,"Times New Roman",serif;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 3px rgba(14,165,233,.35)}
.tf-feat:hover{background:#0284c7;border-color:#0ea5e9}
.tf-feat:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}
.tf-feat[aria-current="page"]{box-shadow:0 0 0 3px #bae6fd}
.tf-feat[hidden]{display:none}
.tf-mode[hidden]+.tf-feat{margin-left:auto}
/* the lesson picker under the Dashboard · Board · Lesson switch (Kiers, 1 Oct) */
.tf-lpick{position:absolute;z-index:3000;top:calc(100% + 6px);right:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:min(560px,94vw);padding:12px 14px;border:2px solid #617b30;border-radius:14px;background:#fff;color:#14181f;box-shadow:0 10px 28px rgba(0,0,0,.18);font-size:14px}
.tf-lpick>b{flex:1 1 100%;color:#4d6226}
.tf-lpick select{flex:1 1 260px;min-width:0;min-height:40px;padding:4px 8px;border:1.5px solid #617b30;border-radius:10px;background:#fff;color:#14181f;font:inherit;font-size:15px}
.tf-lpick-b{display:flex;gap:6px}
.tf-lpick-go{min-height:40px;padding:4px 18px;border:0;border-radius:999px;background:#617b30;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.tf-lpick-x{min-height:40px;padding:4px 12px;border:1.5px solid #617b30;border-radius:999px;background:#fff;color:#4d6226;font:inherit;cursor:pointer}
/* the clock bar opens the lesson (Kiers, 8 Oct 2026; bar.js clockBar) */
.tf-clock.tf-c-go{cursor:pointer}.tf-clock.tf-c-go:hover{filter:brightness(1.08)}
.tf-c-open{margin-left:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.22);font-weight:800;font-size:13px;white-space:nowrap}
/* the staff menus on the top row (Kiers, 11 Oct 2026): Lessons, Courses, Calendar, Lesson builder beside Dashboard · Board ·
   Lesson and the picture; the same yellow lozenges as before, without the "Staff" row */
.tf-people>.tf-staffnav{order:0;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 6px;margin-right:4px}
.tf-people>.tf-staffnav[hidden]{display:none!important}
.tf-drop.tf-drop-r>.tf-menu{left:auto;right:0}
/* a tool that is not ready yet: plain, greyed, not a link (Kiers, 11 Oct 2026) */
.tf-menu .tf-soon{display:block;padding:7px 12px;color:#8a929c;font-size:14px;line-height:1.3;cursor:default;white-space:normal}
.tf-menu .tf-soon i{display:block;font-size:12px;font-style:italic;color:#9aa1aa}
/* the top row on ONE line on a laptop (Kiers, 11 Oct 2026: "the yellow menu at the top runs over two lines. It should
   not."): the staff menus and the switch never wrap; below 1600 px the switch has no Board (bar.js viewSwitch) and the
   bar gets tighter; below 1800 px the name beside the picture goes (the picture stays, its tooltip is the name) */
@media (max-width:1599px){.tf-seg.tf-seg-lap button[data-v="board"]{display:none}}
html.tf-staff .tf-bar{flex-wrap:nowrap}
html.tf-staff .tf-people{flex-wrap:nowrap;white-space:nowrap;min-width:0}
.tf-people>.tf-staffnav{flex-wrap:nowrap}
@media (max-width:1799px){
  html.tf-staff .tf-who-t{display:none}
  html.tf-staff .tf-bar{padding:10px 16px 13px;gap:8px}
  html.tf-staff .tf-brand{padding-right:8px;gap:14px}
  html.tf-staff .tf-app{padding-left:14px;letter-spacing:.08em}
  html.tf-staff .tf-people{gap:8px}
  html.tf-staff .tf-people::before{margin-right:0}
  .tf-people>.tf-staffnav{gap:2px;padding:2px 4px;margin-right:0}
  .tf-people>.tf-staffnav .tf-tab{padding:0 9px;font-size:13.5px}
  .tf-people>.tf-staffnav .tf-drop>.tf-dl{padding-right:4px}
  .tf-people>.tf-staffnav .tf-dt{width:22px}
  html.tf-staff .tf-seg{margin-right:2px}
  html.tf-staff .tf-seg button{padding:6px 11px;font-size:13.5px}
  html.tf-staff .tf-btn{padding:5px 11px}
}
@media (max-width:1365px){
  html.tf-staff .tf-logo{height:42px;margin:4px 6px 4px 2px}
  html.tf-staff .tf-app{font-size:12px;letter-spacing:.05em}
}
/* Menu areas in the Maths style (Kiers, 11 Oct 2026: Maths leads the menus; Core MENU-STANDARD.md, --menu-* tokens) */
.tf-area-staff{background:#f7e6c4!important;color:#6b4a12!important}
.tf-area-staff .tf-menu,.tf-area-staff .tf-sub{background:#fdf6e8!important;border-color:#ecd3a0!important;color:#6b4a12!important}
.tf-area-pub{background:#ecebe4!important;color:#1c2533!important}
.tf-area-pub .tf-menu,.tf-area-pub .tf-sub{background:#f7f6f1!important;border-color:#dcd8cc!important;color:#1c2533!important}
.tf-area-pupil{background:#244572!important;color:#fff!important}
.tf-area-pupil .tf-menu,.tf-area-pupil .tf-sub{background:#f2f6fb!important;border-color:#c3d0e3!important;color:#244572!important}
.tf-tab.tf-priv,.tf-priv>.tf-tab,.tf-drop.tf-priv{background:#f7e6c4!important;color:#6b4a12!important}
/* the faculty switcher on the faculty name in the brand row (Kiers, 13 Oct 2026); same as Core's shell */
.tf-appdrop{position:relative;display:inline-flex;align-items:center;gap:2px}
.tf-appdrop .tf-appdt{width:20px;height:22px;padding:0;border:0;background:transparent;opacity:.55;cursor:pointer}
.tf-appdrop .tf-appdt:hover,.tf-appdrop.tf-open .tf-appdt{opacity:1}
.tf-appdrop>.tf-menu{left:0;top:100%;min-width:220px;z-index:3000}

/* EN · IT for visitors (Kiers, 19 Oct 2026; bar.js, app/i18n.js): a clear two-way switch beside Log in, touch-sized */
.tf-lang{display:inline-flex;align-items:center;gap:2px;border:2px solid #244572;border-radius:999px;padding:2px;background:#fff}
.tf-lang[hidden]{display:none!important}
.tf-lang>span{color:#244572;font-weight:700;padding:0 1px}
.tf-lang button{font:inherit;font-weight:700;font-size:15px;min-width:44px;min-height:36px;padding:4px 10px;border:0;border-radius:999px;background:transparent;color:#244572;cursor:pointer}
.tf-lang button[aria-pressed="true"]{background:#244572;color:#fff}
.tf-lang button:focus-visible{outline:3px solid #e2a145;outline-offset:1px}
@media (max-width:560px){.tf-lang button{min-width:40px;padding:4px 8px;font-size:14px}}

/* ── FIXED 19 OCTOBER 2026 ────────────────────────────────────────────────────────────────────────
   .tf-area carries order:1 so the grouped areas sort correctly in the SECOND row. In the top bar
   that threw the teacher's row past .tf-people, so on Maths the yellow menu rendered to the RIGHT of
   the user's photo. Kiers: "the yellow menu sits to the right of the user photo... it should sit to
   the left of it." It belongs immediately after the faculty name, with sign-out and the photo pushed
   to the far right, as on every other site. */
/* THE TOP ROW IS RIGHT ALIGNED. Kiers, 20 Oct 2026: "all top row menus must be right aligned",
 * and "the vertical bar on the top nav should be on the right of the yellow menu bar and not the
 * left (should be that way in ALL faculty sites)".
 *
 * So the teacher's area takes the free space and lands beside the people block, and .tf-people's
 * divider (::before, line 44) falls between the menu and Sign out, which is what he asked for.
 * .tf-people gives up its own auto margin only while an area is actually showing: a reader who is
 * not signed in has no area, and Sign in must still sit on the right.
 *
 * This replaces margin-left:10px, which pinned the menu beside the faculty name. It needs the
 * area to be a SIBLING of .tf-people, not inside it: inside, the divider is drawn before the whole
 * group and lands to the LEFT of the menu. The shells and Form Time were the inside kind and were
 * changed to match on 20 Oct. One structure, one rule, every faculty site. */
.tf-bar > .tf-area { order: 0; margin-left: auto }
.tf-bar > .tf-area:not([hidden]) ~ .tf-people { margin-left: 0 }

/* NOT ON A BIG SCREEN. Kiers, 21 October 2026: "if competencies and points are not visible on the
 * big screen then remove them from the big screen menu" ... "and behaviour too".
 *
 * Points, Behaviour and Competencies are judgements about a named child. Their pages already
 * refuse a board (points-page.js, behaviourPage, the competencies page), so on a 2.5 m classroom
 * screen the menu item led to a wall of text saying "not here". A dead item is worse than no item,
 * so the item goes: at 2400px and up the teacher's row keeps Seating plans and Bookings, which are
 * safe in front of a class.
 *
 * Matched by ADDRESS, not by a marker class, on purpose: it then covers Technology, Maths, Form
 * Time and the nine shells from this one file, with no per-site edit to forget. a.tf-tab is the top
 * row only, so a link to the same page from a dashboard card is untouched. The media query is the
 * same 2400px the pages themselves use. CSS, not script: it cannot fail half way.
 *
 * THE TRAILING SLASH MATTERS. It was /staff/points without one until this work was reviewed, which
 * would also have swallowed a future tab for /staff/points-now/ or /staff/behaviour-policy/,
 * silently, on boards only, where nobody would have gone looking. Every real address ends in a
 * slash, checked against all four sites, and the shells' ?f= query sits after it. */
/* AND IN THE TEACHER'S DROP-DOWNS. Kiers, 27 Oct 2026: the teacher's row is two drop-downs,
 * Lessons and Dashboard, so Points, Behaviour and Competencies are now items in the Dashboard menu
 * (.tf-staffnav .tf-menu a), not tabs. Same addresses, same rule. Scoped to .tf-staffnav, so a
 * site's own second-row menus are untouched. */
@media (min-width: 2400px) {
  a.tf-tab[href*="/staff/points/"],
  a.tf-tab[href*="/staff/behaviour/"],
  a.tf-tab[href*="/staff/competencies/"],
  a.tf-tab[href*="/staff/score/"],
  .tf-staffnav .tf-menu a[href*="/staff/points/"],
  .tf-staffnav .tf-menu a[href*="/staff/behaviour/"],
  .tf-staffnav .tf-menu a[href*="/staff/competencies/"],
  .tf-staffnav .tf-menu a[href*="/staff/score/"] { display: none !important }
}
/* Lessons on a faculty with no lessons yet (Kiers, 30 Oct 2026): there, but faded and not a link. */
.tf-staffnav .tf-off{opacity:.45;cursor:default}
/* The Dashboard menu sits beside the picture, at the right of the bar: open it leftwards so it
 * never runs off the screen. */
.tf-staffnav .tf-drop:last-child > .tf-menu { left:auto; right:0 }