/* MyLux. Lux Brand Manual 2026: Deep Navy is the base (no black anywhere), Luxury Gold and Rich Green are accents, white page.
   Type: "Lux Serif" (NimbusRomDGR; Liberation Serif stand-in) for page titles, Poppins for everything else.

   System rules (see DESIGN-LOG.md):
   - One neutral scale, tinted toward navy. Text is navy, never black.
   - Gold is an accent: active navigation, focus, today markers, and the one action a parent came to do (pay, sign). Staff buttons are navy.
   - Content sits on the page. A tinted panel only marks a form you fill in; a bordered box only marks a separate object (a lesson, a room).
   - Type scale 12 / 13 / 14 / 16 / 20 / 28 / 36. Spacing scale 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: local("Poppins Regular"), local("Poppins-Regular"), url("fonts/poppins-400.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: local("Poppins Medium"), local("Poppins-Medium"), url("fonts/poppins-500.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: local("Poppins Bold"), local("Poppins-Bold"), url("fonts/poppins-700.woff") format("woff"); }
@font-face { font-family: "Lux Serif"; font-weight: 400; font-display: swap; src: local("NimbusRomDGR-Regu"), local("NimbusRomDGR"), url("fonts/serif-400.woff") format("woff"); }

:root {
  /* brand */
  --navy: #0B1D3A; --gold: #D4AF37; --green: #006400; --white: #fff;
  --gold-ink: #806410;           /* gold as text on white (contrast 5:1) */
  --red: #B42318;
  /* neutral scale, navy-tinted */
  --n25: #F8F9FB; --n50: #F2F4F7; --n100: #E6E9EF; --n200: #D3D8E1; --n300: #B4BCCA;
  --n400: #8D96A8; --n500: #677187; --n600: #525D74; --n700: #36435C; --n800: #1C2B47; --n900: #0B1D3A;
  /* header (navy surface) */
  --h-line: #1F355E; --h-text: #C6CFDF; --h-muted: #8F9CB6;
  /* roles */
  --text: var(--n900); --text-2: var(--n600); --text-3: var(--n500); --rule: var(--n100); --rule-strong: var(--n200); --fill: var(--n50);
  --gold-dark: var(--gold-ink);
  /* type */
  --serif: "Lux Serif", "Times New Roman", Times, "Songti SC", serif;
  --sans: "Poppins", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 36px;
  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --radius: 6px; --radius-lg: 8px;
  --page: 1180px;
}
:lang(zh-Hant) { --sans: "Poppins", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--fs-base)/1.55 var(--sans); color: var(--text); background: var(--white); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
/* the ring stays gold: Luxury Gold on the navy header (7.98:1), its darker ink on light pages, where Luxury Gold is 2.10:1
   and a focus indicator needs 3:1 (WCAG 1.4.11; 48th QA pass, 4) */
header :focus-visible { outline-color: var(--gold); }
::selection { background: #F3E6B8; color: var(--navy); }
img { max-width: 100%; }

/* ---------- header ---------- */
header { background: var(--navy); color: var(--white); }
header .bar { display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s6); min-height: 64px; }
header .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 12px 0; flex: none; }
header .brand img { height: 34px; width: auto; display: block; }
header .brand .app { color: var(--h-text); font-size: var(--fs-sm); padding-left: 14px; border-left: 1px solid var(--h-line); line-height: 22px; letter-spacing: .02em; }
header nav { display: flex; align-items: stretch; gap: 26px; flex: 1 1 auto; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
header nav a { display: flex; align-items: center; color: var(--h-text); text-decoration: none; font-size: 13.5px; white-space: nowrap; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
header nav a:hover { color: var(--white); }
header nav a.active { color: var(--white); border-bottom-color: var(--gold); }
header .who { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); color: var(--h-muted); white-space: nowrap; margin-left: auto; flex: none; }
header .who a { color: var(--h-text); text-decoration: none; }
header .who a:hover { color: var(--white); }
header select { background: transparent; color: var(--h-text); border: 1px solid var(--h-line); border-radius: var(--radius); height: 32px; padding: 0 28px 0 10px; font: inherit; max-width: 280px; width: auto; }
header select:focus { border-color: var(--h-muted); box-shadow: none; }
.actas { display: inline-flex; align-items: center; gap: 8px; }
.actas .dev { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--h-muted); border: 1px solid var(--h-line); border-radius: 4px; padding: 1px 6px; }
.langs { display: inline-flex; gap: 2px; margin: 0; }
.langs button { background: none; border: 0; font: inherit; cursor: pointer; }
.langs a, .langs button { color: var(--h-muted); text-decoration: none; font-size: var(--fs-sm); padding: 4px 7px; border-radius: 4px; }
.langs a:hover, .langs button:hover { color: var(--white); }
.langs a.on, .langs button.on { color: var(--white); background: #1A2F57; }
/* Staff have many sections: the menu gets its own full-width row. */
header.staff .bar + .bar { min-height: 46px; border-top: 1px solid var(--h-line); }
header.staff nav { gap: 28px; }
@media (max-width: 900px) {
  header .bar { padding: 0 var(--s4); gap: var(--s4); min-height: 56px; }
  header .brand img { height: 28px; }
  header:not(.staff) .bar { flex-wrap: wrap; }
  header:not(.staff) nav { order: 3; flex-basis: 100%; min-height: 44px; border-top: 1px solid var(--h-line); margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
  header.staff nav { gap: 22px; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
}
@media (max-width: 640px) {
  header .brand .app, header .who .uname, header .who .actas { display: none; }
  header .who { gap: var(--s3); }
  .langs a, .langs button { padding: 4px 6px; }
}

/* ---------- page ---------- */
main { max-width: var(--page); margin: 0 auto; padding: 40px var(--s6) 96px; }
h1 { font: 400 32px/1.15 var(--serif); letter-spacing: -0.005em; margin: 0 0 var(--s6); color: var(--navy); }
h1 .small, h1 .muted, h1 > span:not(.pill) { font: 400 var(--fs-md)/1.4 var(--sans); color: var(--text-2); margin-left: 10px; vertical-align: 5px; }
h1 .pill { vertical-align: 7px; margin-left: 10px; font-family: var(--sans); }
h1 a { font: 400 var(--fs-base) var(--sans); }
h2 { font: 500 var(--fs-md)/1.35 var(--sans); margin: 0 0 var(--s3); color: var(--navy); }
h2 .small, h2 span.small, h2 .muted { font-weight: 400; color: var(--text-2); font-size: var(--fs-sm); margin-left: 6px; }
h3 { font: 500 var(--fs-base)/1.35 var(--sans); margin: 0 0 var(--s2); color: var(--navy); }
p { margin: 0 0 10px; }
.lede { font-size: 15px; color: var(--text-2); max-width: 640px; margin: 0 0 var(--s5); }

/* page head: title (and a line under it) on the left, actions on the right */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s5); flex-wrap: wrap; margin: 0 0 var(--s6); }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--text-2); margin: 8px 0 0; font-size: var(--fs-base); }
.page-head .sub > * + *::before { content: ""; }
.actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; margin: 0 0 10px; }
.back:hover { color: var(--navy); }
.back::before { content: "←"; }

.grid { display: grid; gap: var(--s7); }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.side { grid-template-columns: minmax(0, 1fr) 320px; }
.grid > * { min-width: 0; }
@media (max-width: 860px) {
  .grid.c2, .grid.side { grid-template-columns: 1fr; gap: 0; }
  main { padding: 28px var(--s4) 72px; }
  h1 { font-size: 27px; }
  .page-head { margin-bottom: var(--s5); }
}

/* A section of the page. ".card" is the old name; it is not a box. */
.card, .section { margin: 0 0 var(--s7); }
.card > h2:first-child, .section > h2:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px var(--s4); margin: 0 0 var(--s3); }
.section-head h2 { margin: 0; }
.section-head a, .section-head .muted { font-size: var(--fs-sm); }
.scroll-x { overflow-x: auto; position: relative; }   /* the containing block of a screen-reader label inside, which escaped and widened the page (WCAG 1.4.10; 48th QA pass, 12) */

/* A form you fill in: the only tinted block. */
.panel, form.card { background: var(--n25); border: 1px solid var(--n100); border-radius: var(--radius-lg); padding: var(--s5); margin: 0 0 var(--s7); }
.panel > h2:first-child, form.card > h2:first-child { margin-top: 0; }
.panel .muted:last-child { margin-bottom: 0; }
/* A filter row above a list: no box. */
form.filters, .filters { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin: 0 0 var(--s5); padding: 0; background: none; border: 0; }
.filters label { margin: 0 0 6px; }
.filters .grow { flex: 1 1 260px; max-width: 420px; }
.filters .end { margin-left: auto; }

/* Key facts about one thing: label over value, in a row. */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s4) var(--s5); margin: 0 0 var(--s7); padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts > div { min-width: 0; }
.facts dt, .facts .l { font-size: var(--fs-xs); color: var(--text-2); margin: 0 0 2px; }
.facts dd, .facts .v { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }
dl.facts { margin-top: 0; }

/* Summary figures */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s5) var(--s6); margin: 0 0 var(--s7); }
.kpi { border-top: 1px solid var(--n200); padding-top: var(--s3); min-width: 0; }
.kpi .l { font-size: var(--fs-sm); color: var(--text-2); }
.kpi .v { font: 500 26px/1.25 var(--sans); color: var(--navy); margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi .v span, .kpi .v .small { font-weight: 400; font-size: var(--fs-sm); color: var(--text-2); letter-spacing: 0; }
.kpi .small { color: var(--text-2); }
.kpi.alert .v { color: var(--red); }
.big { font: 500 26px/1.3 var(--sans); font-variant-numeric: tabular-nums; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
th, td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 500; font-size: var(--fs-xs); color: var(--text-2); border-bottom-color: var(--rule-strong); white-space: nowrap; padding-top: 0; padding-bottom: 9px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:hover td, table tr:hover > td { background: var(--n25); }
table tr:first-child:hover > td { background: none; }
tr.total td { font-weight: 500; border-bottom: 0; border-top: 1px solid var(--rule-strong); }
td .small, td.small { color: var(--text-2); }
td a { font-weight: 500; text-decoration: none; }
td a:hover { text-decoration: underline; }
.nowrap { white-space: nowrap; }
@media (max-width: 760px) {
  .card, .section { overflow-x: auto; position: relative; }
  table { font-size: var(--fs-sm); }
  th, td { padding-right: 12px; }
  .hide-sm { display: none; }
}

/* ---------- links, buttons ---------- */
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--n300); }
a:hover { color: var(--navy); text-decoration-color: currentColor; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; background: var(--navy); color: var(--white);
       border: 1px solid var(--navy); border-radius: var(--radius); font: 500 13.5px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.btn:hover { background: #1A345F; border-color: #1A345F; color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn.gold:hover { background: #C8A22E; border-color: #C8A22E; color: var(--navy); }
.btn.ghost, .btn.secondary { background: var(--white); color: var(--navy); border-color: var(--n200); }
.btn.ghost:hover, .btn.secondary:hover { border-color: var(--n400); background: var(--n25); }
.btn.quiet { background: none; border-color: transparent; color: var(--navy); padding: 0 8px; text-decoration: underline; text-decoration-color: var(--n300); text-underline-offset: 3px; }
.btn.quiet:hover { background: none; text-decoration-color: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn.block { display: flex; width: 100%; }
.btn.danger { background: var(--white); color: var(--red); border-color: #E7B7B1; }
.btn.danger:hover { background: #FDF3F2; border-color: var(--red); color: var(--red); }
.btn.danger.solid { background: var(--red); color: var(--white); border-color: var(--red); }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
/* loading: a form that has been sent shows it on the button that sent it */
.btn[aria-busy="true"] { pointer-events: none; color: transparent !important; position: relative; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--white); border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.ghost[aria-busy="true"]::after, .btn.secondary[aria-busy="true"]::after, .btn.gold[aria-busy="true"]::after, .btn.quiet[aria-busy="true"]::after { border-color: var(--navy); border-right-color: transparent; }
.btn.danger[aria-busy="true"]::after { border-color: var(--red); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2s; } }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); text-decoration: underline; text-decoration-color: var(--n300); text-underline-offset: 3px; cursor: pointer; }
button.link:hover { text-decoration-color: currentColor; }
button.link.danger { color: var(--red); }
form.inline-btn { display: inline; }

/* ---------- forms ---------- */
input, select, textarea { font: 400 var(--fs-base)/1.4 var(--sans); color: var(--text); height: 40px; padding: 0 12px; border: 1px solid var(--n500); border-radius: var(--radius); width: 100%; background: var(--white); transition: border-color .12s, box-shadow .12s; }
/* a text box is shown by its border, which needs 3:1 (WCAG 1.4.11): --n500 is 4.90:1 on white, 4.65:1 on a form panel; --n200 was 1.43:1 (48th QA pass, 5) */
select { padding-right: 32px; -webkit-appearance: none; appearance: none;
         background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23525D74' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
select[multiple] { height: auto; padding: 6px; background-image: none; }
header select { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C6CFDF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
input[type=file] { height: auto; padding: 8px; background: var(--white); }
input::placeholder, textarea::placeholder { color: var(--n500); }   /* 4.9:1 on white (WCAG 1.4.3); n400 was 2.97:1 */
input:hover, select:hover, textarea:hover { border-color: var(--n700); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11, 29, 58, .10); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; padding: 0; margin: 0 8px 0 0; accent-color: var(--navy); vertical-align: -3px; box-shadow: none; }
/* a native checkbox draws no border, so input:focus's navy border shows nothing: it takes the ring (WCAG 2.4.7; 48th QA pass, 3).
   :focus first, so Safari before 15.4 (no :focus-visible) shows it too; a mouse click hides it where :focus-visible exists. */
input[type=checkbox]:focus, input[type=radio]:focus { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
input[type=checkbox]:focus:not(:focus-visible), input[type=radio]:focus:not(:focus-visible) { outline: none; }
input[readonly] { background: var(--n25); color: var(--text-2); }
label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--n700); margin: var(--s4) 0 6px; }
label.small, label.check { font-weight: 400; color: var(--text); }
label.check { display: flex; align-items: flex-start; gap: 0; font-size: var(--fs-base); margin: var(--s3) 0; cursor: pointer; }
label.check input { margin-top: 3px; }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin: 6px 0 0; font-weight: 400; }
form.inline, div.inline { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
form.inline label { margin: 0 0 6px; }
form.inline > div { min-width: 140px; }
.form { max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.form-grid > .full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.panel .form-actions, form.card .form-actions { border-top: 0; padding-top: 0; margin-top: var(--s4); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); min-width: 0; }
legend { font: 500 var(--fs-md)/1.35 var(--sans); color: var(--navy); padding: 0; margin: 0 0 4px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- messages, status ---------- */
.flash { padding: 12px 16px; border-radius: var(--radius-lg); margin: 0 0 var(--s5); background: #EEF6EE; color: #0D420D; border: 1px solid #CFE4CF; font-size: var(--fs-base); }
.flash.error { background: #FDF1EF; color: #7A1D14; border-color: #F2CBC5; }
.flash.warn, .flash.warning { background: #FBF6E6; color: #5C4708; border-color: #EBDDAE; }
.note { font-size: var(--fs-sm); color: var(--text-2); max-width: 680px; }
.pill { display: inline-block; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.pill.scheduled, .pill.open { color: var(--navy); }
.pill.attended, .pill.paid, .pill.sent, .pill.approved, .pill.matched, .pill.created, .pill.ok { color: var(--green); }
.pill.draft, .pill.reviewed, .pill.dry_run, .pill.pending, .pill.unmatched { color: var(--gold-ink); }
.pill.no_show, .pill.cancelled_late, .pill.void, .pill.failed, .pill.overdue { color: var(--red); }
.pill.cancelled_half, .pill.cancelled_free, .pill.cancelled, .pill.cancelled_by_lux { color: var(--text-3); }
.pill::first-letter { text-transform: uppercase; }
.ent { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: var(--fs-sm); }
.ent img { width: 18px; height: 18px; display: block; }
.flag { color: #8A5A00; } .muted { color: var(--text-2); }
.warn { color: #9A1F1F; }
.small { font-size: var(--fs-sm); } .right { text-align: right; }
.num { font-variant-numeric: tabular-nums; }

/* Nothing here yet */
.empty { padding: var(--s5); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--text-2); margin: 0 0 var(--s7); }
.empty p { margin: 0; max-width: 560px; }
.empty p + p, .empty p + .actions { margin-top: var(--s3); }
.empty strong { color: var(--navy); font-weight: 500; display: block; margin-bottom: 2px; }

.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--rule); margin: 0 0 var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 0 0 10px; text-decoration: none; color: var(--text-2); font-size: var(--fs-base); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--navy); }
.tabs a.active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 500; }
pre.doc { white-space: pre-wrap; font: 400 var(--fs-base)/1.7 var(--sans); background: var(--white); border: 1px solid var(--rule-strong); padding: var(--s5); border-radius: var(--radius-lg); max-height: 520px; overflow: auto; margin: 0 0 var(--s5); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }
code { font-size: 12.5px; background: var(--fill); padding: 1px 5px; border-radius: 4px; }
.hint code { color: var(--text-2); }   /* a hint's --text-3 is 4.44:1 on the code tint (48th QA pass, 6) */
details > summary { cursor: pointer; color: var(--navy); font-weight: 500; font-size: var(--fs-base); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--n500); border-bottom: 1.5px solid var(--n500); transform: rotate(-45deg); transition: transform .12s; margin-right: 2px; }
details[open] > summary::before { transform: rotate(45deg); }
details.more { margin: 0 0 var(--s5); }
details.more[open] > summary { margin-bottom: var(--s3); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
ul.links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--fs-sm); }

/* ---------- sign-in ---------- */
body.auth { background: var(--white); min-height: 100vh; }
body.auth .split { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; min-height: 100vh; }
body.auth .side { background: var(--navy); color: var(--h-text); padding: var(--s7) var(--s7); display: flex; flex-direction: column; justify-content: space-between; }
body.auth .side .logo { width: 200px; display: block; }
body.auth .side p { font-size: var(--fs-sm); color: var(--h-muted); margin: 0; max-width: 300px; }
body.auth .pane { display: flex; flex-direction: column; padding: var(--s5) var(--s7) var(--s7); }
body.auth .pane .lang-bar { display: flex; justify-content: flex-end; }
body.auth .pane .langs a, body.auth .pane .langs button { color: var(--text-2); } body.auth .pane .langs a.on, body.auth .pane .langs button.on { color: var(--navy); background: var(--fill); }
body.auth main { max-width: 380px; width: 100%; margin: auto 0; padding: var(--s7) 0; align-self: center; }
body.auth h1 { font-size: var(--fs-xl); margin: 0 0 var(--s2); }
body.auth .lede { margin: 0 0 var(--s5); font-size: var(--fs-base); }
body.auth .card { margin: 0; }
body.auth .btn { width: 100%; height: 44px; }
body.auth .or { display: flex; align-items: center; gap: var(--s3); color: var(--text-3); font-size: var(--fs-xs); margin: var(--s5) 0; }
body.auth .or::before, body.auth .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
body.auth .footer { color: var(--text-3); font-size: var(--fs-xs); margin-top: var(--s6); }
body.auth .devnote { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px dashed var(--n200); font-size: var(--fs-xs); color: var(--text-3); }
@media (max-width: 820px) {
  body.auth .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  body.auth .side { padding: var(--s5) var(--s4); flex-direction: row; align-items: center; }
  body.auth .side .logo { width: 132px; }
  body.auth .side p { display: none; }
  body.auth .pane { padding: var(--s3) var(--s4) var(--s6); }
  body.auth main { padding: var(--s5) 0; margin: 0 auto; }
}

/* ---------- pay, signing, errors: one document on a white page ---------- */
body.paper { background: var(--white); }
body.paper main { max-width: 640px; padding-top: var(--s5); }
body.paper .paper-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin: 0 0 var(--s6); }
body.paper .logo { width: 190px; display: block; margin: 0; }
body.paper .card { padding: 0; }
body.paper .langs a, body.paper .langs button { color: var(--text-2); } body.paper .langs a.on, body.paper .langs button.on { color: var(--navy); background: var(--fill); }
body.paper h1 { font-size: var(--fs-xl); margin-bottom: var(--s2); }
.amount { font: 500 var(--fs-2xl)/1.1 var(--sans); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--navy); margin: var(--s2) 0 var(--s1); }
.paybox { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: var(--s5) 0; margin: var(--s5) 0; }
.paybox .actions { margin-top: var(--s4); }
.paper-foot { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--rule); color: var(--text-3); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  body.paper .logo { width: 150px; }
  .amount { font-size: 32px; }
  body.paper .btn.gold { width: 100%; height: 48px; }
}

/* ---------- error pages ---------- */
.error-code { font-size: var(--fs-sm); color: var(--text-3); margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; }

/* ---------- Today: one bordered block per room, lessons as rows ---------- */
.room { border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); margin-bottom: var(--s4); overflow: hidden; }
.room > h3, .room-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 12px var(--s5); background: var(--n25); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.room-head .muted { font-weight: 400; }
.lesson-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 170px 150px 92px; gap: var(--s4); padding: 14px var(--s5); border-top: 1px solid var(--rule); align-items: center; }
.room > .lesson-row:first-of-type, .room-head + .lesson-row { border-top: 0; }
.lesson-row .time { font-weight: 500; font-variant-numeric: tabular-nums; }
.lesson-row .what a { font-weight: 500; text-decoration: none; }
.lesson-row .what a:hover { text-decoration: underline; }
.lesson-row.unmarked, tr.unmarked td { background: #FFF9E6; }
@media (max-width: 760px) {
  .lesson-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "time what act" "time who act" "time st act"; gap: 2px var(--s3); padding: 12px var(--s4); align-items: start; }
  .lesson-row > :nth-child(1) { grid-area: time; } .lesson-row > :nth-child(2) { grid-area: what; } .lesson-row > :nth-child(3) { grid-area: who; color: var(--text-2); font-size: var(--fs-sm); }
  .lesson-row > :nth-child(4) { grid-area: st; } .lesson-row > :nth-child(5) { grid-area: act; align-self: center; }
  .room > h3, .room-head { padding: 10px var(--s4); }
}

/* ---------- staff week (calendar) ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule); margin: 0 0 var(--s7); }
.week .day { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-height: 220px; padding: 10px 10px 14px; min-width: 0; }
.week .day-h { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); margin: 0 0 10px; }
.week .day-h b { font-size: var(--fs-md); font-weight: 500; color: var(--navy); }
.week .day.today .day-h b { background: var(--gold); border-radius: 999px; padding: 0 8px; }
.week .day.off { background: var(--n25); }
.ev { display: block; padding: 7px 8px; margin: 0 0 6px; border-radius: var(--radius); background: var(--n50); text-decoration: none; font-size: 12.5px; line-height: 1.4; color: var(--navy); }
.ev:hover { background: var(--n100); }
.ev .t { font-weight: 500; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.ev .t i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); flex: none; }
/* scheduled is a ring, attended a filled dot, cancelled or missed a grey dot with the status written out: a shape and words,
   not only colour, and each mark 3:1 on the event tint (WCAG 1.4.1, 1.4.11; 48th QA pass, 7) */
.ev.attended .t i { background: var(--green); } .ev.scheduled .t i { background: none; border: 1.5px solid var(--gold-ink); }
.ev.cancelled .t i, .ev.cancelled_free .t i, .ev.cancelled_half .t i, .ev.cancelled_by_lux .t i, .ev.cancelled_late .t i, .ev.no_show .t i { background: var(--n500); }
.ev.cancelled, .ev.cancelled_free, .ev.cancelled_half, .ev.cancelled_by_lux, .ev.cancelled_late { color: var(--text-2); }   /* --text-3 was 4.44:1 on the event tint (WCAG 1.4.3; 48th QA pass, 6) */
.ev .m { color: var(--text-2); display: block; }
.ev .who { display: block; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--fs-xs); color: var(--text-2); margin: 0 0 var(--s3); }
.ev-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.ev-legend i.sch { border: 1.5px solid var(--gold-ink); } .ev-legend i.att { background: var(--green); } .ev-legend i.off { background: var(--n500); }
/* v0.42: teacher colours, the system-marked state and the day view */
.ev:hover { filter: brightness(0.96); }
.ev.system .t i, .ev-legend i.sys { background: linear-gradient(90deg, var(--green) 50%, transparent 50%); border: 1.5px solid var(--green); }
.ev.cancelled, .ev.cancelled_free, .ev.cancelled_half, .ev.cancelled_by_lux, .ev.cancelled_late, .ev.no_show { opacity: 0.72; }
.tlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); margin: 0 0 var(--s3); }
.tlegend a, .dv-head a { color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tlegend a:hover, .dv-head a:hover { text-decoration: underline; }
.tlegend i, .dv-head i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.week a.day-h { text-decoration: none; }
.week a.day-h:hover b { text-decoration: underline; }
.week .day-h .n { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; gap: 2px; margin-right: 8px; }
.dayview { --hour: 64px; --col: minmax(150px, 1fr); overflow-x: auto; border-top: 1px solid var(--rule-strong); margin: 0 0 var(--s7); }
.dv-head, .dv-body { display: grid; grid-template-columns: 56px repeat(var(--cols), var(--col)); min-width: calc(56px + var(--cols) * 150px); }
.dv-head { position: sticky; top: 0; background: var(--white, #fff); z-index: 2; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.dv-head > * { padding: 8px 10px; border-left: 1px solid var(--rule); }
.dv-head > span:first-child { border-left: 0; }
.dv-body { height: calc(var(--hours) * var(--hour)); position: relative; }
.dv-gutter { position: relative; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.dv-gutter span { position: absolute; right: 8px; transform: translateY(-50%); }
.dv-gutter span:first-child { transform: none; }
.dv-col { position: relative; border-left: 1px solid var(--rule);
  background: repeating-linear-gradient(to bottom, var(--rule) 0, var(--rule) 1px, transparent 1px, transparent var(--hour)); }
.dv-col .ev { position: absolute; margin: 2px 2px 0; overflow: hidden; font-size: 12px; line-height: 1.3; padding: 5px 7px; }
@media print { .dayview { overflow: visible; } .filters, .page-head .actions { display: none; } }

@media (max-width: 860px) {
  .week { grid-template-columns: 1fr; border-left: 0; }
  .week .day { min-height: 0; border-right: 0; padding: 12px 0; display: grid; grid-template-columns: 64px 1fr; gap: 0 var(--s3); }
  .week .day-h { flex-direction: column; gap: 0; margin: 0; }
  .week .day .none { color: var(--text-3); font-size: var(--fs-sm); padding-top: 3px; }
  .week .day.off { background: none; }
}
.week .day .none { display: none; }
@media (max-width: 860px) { .week .day .none { display: block; } }

/* ---------- weekly calendar (parent portal) ---------- */
.sched-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-bottom: var(--s3); }
.sched-bar h2 { margin: 0; font-size: var(--fs-lg); font-weight: 500; }
.sched-tools { display: flex; align-items: center; gap: var(--s2); font-size: 13.5px; }
.sched-tools > a { text-decoration: none; color: var(--navy); }
.sched-tools > a[aria-label] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--n200); border-radius: var(--radius); font-size: 15px; line-height: 1; }
.sched-tools > a[aria-label]:hover { border-color: var(--n400); background: var(--n25); }
.sched-tools > a:not([aria-label]) { padding: 0 8px; }
.seg { display: inline-flex; border: 1px solid var(--n200); border-radius: var(--radius); overflow: hidden; margin-left: 6px; }
.seg a { padding: 6px 12px; text-decoration: none; color: var(--text-2); font-size: var(--fs-sm); }
.seg a + a { border-left: 1px solid var(--n200); }
.seg a.on { background: var(--navy); color: var(--white); }
.sched-who { font-size: 13.5px; margin: 0 0 var(--s4); color: var(--text-2); }
.wk-scroll { overflow-x: auto; margin: 0 0 var(--s3); }
.wk { min-width: 780px; }
.wk-head, .wk-body { display: grid; grid-template-columns: 54px repeat(7, 1fr); }
.wk-head > div { font-size: var(--fs-sm); color: var(--text-2); padding: 0 0 10px 8px; }
.wk-head > div b { font-weight: 500; color: var(--navy); margin-left: 2px; }
.wk-head > .today b { background: var(--gold); color: var(--navy); border-radius: 999px; padding: 1px 7px; }
.wk-body { position: relative; border-top: 1px solid var(--n200);
           background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--rule) calc(var(--hour) - 1px), var(--rule) var(--hour)); }
.wk-hours { position: relative; }
.wk-hours span { position: absolute; left: 0; transform: translateY(-50%); font-size: 11.5px; color: var(--text-3); background: var(--white); padding-right: 6px; font-variant-numeric: tabular-nums; }
.wk-hours span:first-child { transform: none; }
.wk-day { position: relative; border-left: 1px solid var(--rule); }
.wk-block { position: absolute; left: calc(var(--l) + var(--inset, 3px)); width: calc(var(--w) - 2 * var(--inset, 3px)); border-radius: var(--radius); padding: 5px 7px; font-size: 12px; line-height: 1.3; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; }
.wk-block:hover { filter: brightness(1.12); color: inherit; }
.wk-block .t { opacity: .85; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wk-block .s { font-weight: 500; }
.wk-block .w { opacity: .85; font-size: 11.5px; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--text-2); margin: 0 0 10px; }
.wk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.sched-dl { margin-top: 6px; font-size: var(--fs-sm); }

/* phones: the whole week fits the screen; blocks keep start time and subject, tap for the rest */
@media (max-width: 640px) {
  .wk { min-width: 0; }
  .wk-head, .wk-body { grid-template-columns: 28px repeat(7, minmax(0, 1fr)); }
  .wk-head > div { font-size: 11px; padding: 0 0 8px 3px; text-align: left; }
  .wk-head > div b { display: block; margin: 2px 0 0; font-size: 13px; }
  .wk-head > .today b { width: fit-content; padding: 0 6px; margin-left: -6px; }
  .wk-hours span { font-size: 9.5px; padding-right: 2px; }
  .wk-block { padding: 3px; font-size: 10px; line-height: 1.25; border-radius: 4px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .wk { --inset: 1.5px; }
  .wk-block .t { font-size: 9.5px; }
  /* hidden to fit, still read by a screen reader: the child, the end time and the place (WCAG 1.3.1; 48th QA pass, 20) */
  .wk-block .t2, .wk-block .w, .wk-block .n .nf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the child's first initial on each block, so a lesson is told apart by more than its colour (WCAG 1.4.1; decided
     10 Nov 2026, v0.32; 48th QA pass, question 1); the full name stays for a screen reader */
  .wk-block .n { display: block; font-weight: 600; }
  .wk-block .n .ni { display: inline; }
  .sched-bar h2 { font-size: var(--fs-md); }
}

/* care notes on lessons and the student page */
table.care td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
table.care td div { margin: 2px 0; }
table.care .muted { display: inline-block; min-width: 175px; }
.care-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--s4); align-items: end; }
.care-form input { width: 100%; }

@media print {
  header, .no-print { display: none !important; }
  main { padding: 0; max-width: none; }
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.filters .ev-legend { margin: 0 0 10px; }

/* spacing helpers (scale steps) */
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }

/* sign-in code */
input.code { font-size: 22px; letter-spacing: .4em; height: 52px; font-variant-numeric: tabular-nums; padding-left: 16px; }

/* pay page */
.paid-note { color: var(--green); font-weight: 500; margin: var(--s2) 0 0; }
.methods li { padding: 14px 0; }
.methods li:first-child { border-top: 1px solid var(--rule); }
.paper-foot p { margin: 0 0 6px; color: var(--text-2); font-size: var(--fs-sm); }

/* signing */
.facts.compact { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s4) 0 var(--s5); }
.facts.compact dd { overflow-wrap: normal; word-break: normal; }
iframe.docframe { width: 100%; height: 68vh; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); margin: 0 0 var(--s2); display: block; }
.sign-form { margin-top: var(--s5); padding-top: var(--s2); }
.sign-form input[name=typed_name] { max-width: 400px; font-size: 16px; height: 46px; }
.sign-form .btn { margin-top: var(--s2); }
.signed { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px solid #CFE4CF; background: #EEF6EE; border-radius: var(--radius-lg); color: #0D420D; }
.signed p { margin: 0; } .signed p + p { margin-top: var(--s3); }

/* notices that ask for something (sign an agreement) */
.notice { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap; padding: 12px 16px; margin: 0 0 var(--s5);
          background: #FBF6E6; border: 1px solid #EBDDAE; border-radius: var(--radius-lg); color: #4A3906; }
.notice b { font-weight: 500; }

/* portal */
.kpi.wide { grid-column: span 2; }
@media (max-width: 640px) { .kpi.wide { grid-column: auto; } }
.inv-line { display: flex; align-items: center; gap: var(--s3); padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); max-width: 420px; }
.inv-line:first-of-type { margin-top: var(--s2); border-top: 1px solid var(--rule); }
.inv-line .num { margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s4); }
.chips a { padding: 5px 12px; border: 1px solid var(--n200); border-radius: 999px; font-size: var(--fs-sm); text-decoration: none; color: var(--text-2); }
.chips a:hover { border-color: var(--n400); color: var(--navy); }
.chips a.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
ul.notes li { padding: 14px 0; }
ul.notes li:first-child { border-top: 1px solid var(--rule); }
ul.notes p { margin: 4px 0 0; max-width: 720px; }
.note-h b { font-weight: 500; }
.aside { padding-left: var(--s5); border-left: 1px solid var(--rule); }
.aside h3 { margin-bottom: var(--s2); }
.tiers li { padding: 6px 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.kpis.compact { margin-bottom: var(--s5); }
.kpis.compact .v { font-size: var(--fs-lg); }
.prose { max-width: 680px; white-space: pre-line; }
@media (max-width: 860px) { .aside { padding-left: 0; border-left: 0; margin-top: var(--s5); } }
.notice.stack { display: block; }
.notice.stack ul { margin-top: var(--s2); }
.notice.stack li { border-bottom: 0; padding: 3px 0; font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .kpis { gap: var(--s4) var(--s5); }
  .kpis.compact, .kpis.two-up { grid-template-columns: 1fr 1fr; }
  .kpis.compact .v { font-size: var(--fs-md); }
}

/* family page and forms */
.due { color: var(--red); } td.due { font-weight: 500; }
.bulk { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.bulk p { margin: 0; max-width: 620px; }
.add-row .grow { flex: 1 1 220px; max-width: 360px; }
.add-row .narrow { min-width: 0; width: 110px; flex: none; }
.aside .panel { margin-bottom: var(--s4); padding: var(--s4) var(--s5) var(--s5); }
.aside .panel h2 { margin-bottom: 0; }
.side-links li { font-size: var(--fs-sm); padding: 10px 0; }
.side-links li:first-child { border-top: 1px solid var(--rule); }
.side-links .small.muted { display: block; }
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s7); max-width: 980px; }
.form-cols .full { grid-column: 1 / -1; }
.form-cols fieldset { margin: 0; }
@media (max-width: 860px) { .form-cols { grid-template-columns: 1fr; } .form-cols fieldset + fieldset { margin-top: var(--s6); } }
.section .empty, .card .empty { margin-bottom: 0; }
tr.reversal td { color: var(--text-2); }
details.row-action { position: relative; display: inline-block; text-align: left; }
details.row-action > summary { font-weight: 400; color: var(--text-2); }
details.row-action > summary::before { display: none; }
details.row-action[open] > summary { color: var(--navy); }
.pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 260px; background: var(--white); border: 1px solid var(--n200); border-radius: var(--radius-lg); padding: 4px var(--s4) var(--s4); box-shadow: 0 8px 24px rgba(11, 29, 58, .10); }
.pop label:first-child { margin-top: var(--s3); }
label.check > span { flex: 1; }
/* invoice */
table.lines tr.sum td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; color: var(--text-2); }
table.lines tr.sum:first-of-type td, table.lines tr.sum.strong td { }
table.lines tr.sum td.num { color: var(--navy); }
table.lines tr.sum.strong td { color: var(--navy); font-weight: 500; border-top: 1px solid var(--rule-strong); }
table.lines tr.sum.due td { color: var(--navy); font-weight: 500; font-size: var(--fs-md); border-top: 1px solid var(--rule-strong); padding-top: 12px; }
table.lines tr.sum:hover td { background: none; }
.pop.wide { width: 340px; }
.grid.tight { gap: var(--s4); align-items: start; }
.grid.tight .panel { margin: 0; }
.panel h3 { margin-bottom: 0; }
fieldset .empty, .panel .empty { margin-bottom: 0; }
.grid.side.wide-side { grid-template-columns: minmax(0, 1fr) 360px; }
aside > .panel + details.more, aside > details.more + details.more { margin-top: var(--s4); }
aside > details.more { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); margin: 0; }
aside > details.more:first-of-type { border-top: 1px solid var(--rule); }
aside > .panel { margin-bottom: var(--s4); }
ul.slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); max-width: 900px; }
ul.slots .btn { width: 100%; justify-content: flex-start; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .grid.side.wide-side { grid-template-columns: 1fr; } }
input[type=file]::file-selector-button { font: 500 12.5px/1 var(--sans); color: var(--navy); background: var(--white); border: 1px solid var(--n200); border-radius: 4px; padding: 7px 10px; margin-right: 10px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--n400); }
/* month-end steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); margin: 0 0 var(--s7); }
.step { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); padding: var(--s5); }
.step + .step { border-left: 1px solid var(--rule); }
.step h2, .step h3 { margin: 2px 0 4px; } .step h2 { font-size: var(--fs-base); }   /* steps are h2 under the page title (48th QA pass, 14) */
.step .btn { margin-top: var(--s3); }
.step-n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--n300); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 500; color: var(--navy); }
.step.off { color: var(--text-3); }
.centres { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: var(--s2) 0 0; }
label.check.inline { display: inline-flex; margin: 4px 0; font-size: var(--fs-sm); }
.page-head .filters { margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step + .step { border-left: 0; border-top: 1px solid var(--rule); } }
.inline-fields { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.settings-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); max-width: 960px; }
.settings-values .form-actions { grid-column: 1 / -1; border-top: 0; padding-top: 0; margin-top: var(--s3); }
@media (max-width: 760px) { .settings-values { grid-template-columns: 1fr; } }
.inline-fields label { margin-top: var(--s3); }
.inline-fields > div { min-width: 160px; }
.panel.inline-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) var(--s5); }
.panel.inline-panel h3 { margin: 0; }
.panel.inline-panel .hint { margin-top: 2px; }
.panel.inline-panel .inline-fields label { margin-top: 0; }
tr.inactive td { color: var(--text-3); }
td b.name { font-weight: 500; }
.pop h2, .pop h3 { font-size: var(--fs-sm); } .pop h2 { margin-bottom: var(--s2); }
.pop-foot { padding-top: var(--s3); border-top: 1px solid var(--rule); }
.pop-foot .hint { margin-top: 6px; }
.tabs .count { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.balance-line { margin: 0 0 var(--s4); font-size: var(--fs-sm); }
.balance-line b.ok { color: var(--green); font-weight: 500; } .balance-line b.bad { color: var(--red); font-weight: 500; }
table.dense { font-size: 12.5px; } table.dense td, table.dense th { padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
.entities { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s5); }
.entities > div { padding-top: var(--s3); border-top: 1px solid var(--n200); }
.entities .code { margin-bottom: 6px; font-weight: 500; }
.checks { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.small-legend { font-size: var(--fs-sm); font-weight: 500; color: var(--n700); }
/* finance */
table.aging { max-width: 760px; }
table.aging .bar-col { width: 50%; }
table.aging .meter { display: block; height: 8px; border-radius: 2px; background: var(--n300); min-width: 2px; margin-top: 6px; }
table.aging tr.late .meter { background: var(--red); }
table.aging tr.late td { color: var(--red); }
table.aging td { vertical-align: middle; }
table.aging .meter { margin-top: 0; }
/* settings */
.entity-row { display: grid; grid-template-columns: 90px minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.entity-row:first-of-type { border-top: 1px solid var(--rule); margin-top: var(--s3); }
@media (max-width: 860px) { .entity-row { grid-template-columns: 1fr; } }
.inline-panel-plain { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.inline-panel-plain .hint { margin: 0; }
h1.h-long { font-size: var(--fs-xl); }
pre.doc.mail { max-width: 760px; max-height: none; }
a.plain-link { font-weight: 400; }
ol.order { margin: var(--s2) 0 0; padding-left: 20px; color: var(--text-2); }
ol.order li { padding: 3px 0; }
aside > h3 { margin-top: var(--s5); }
ul.issues li { padding: 6px 0; }

/* error page */
.error-page h1 { margin-bottom: var(--s3); }
/* phones: the menu row scrolls sideways; fade its right edge so it reads as more */
@media (max-width: 900px) {
  header nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 28px !important; }
}

/* a table wider than the page scrolls sideways; a soft shadow at the edge says there is more */
.scroll-x { background:
    linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 29, 58, .14), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 29, 58, .14), transparent) right center / 12px 100% no-repeat scroll; }
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .kpis.two-up .v { font-size: 22px; }
}
/* v0.25 Unpaid invoices: the age groups are links */
a.kpi { display: block; color: inherit; text-decoration: none; }
a.kpi:hover .l, a.kpi.on .l { color: var(--navy); text-decoration: underline; }
a.kpi.on { border-top: 2px solid var(--navy); }
.kpi .v.due { color: var(--red); }
/* Unpaid: the contact's phone and email, one under the other, each a 24 px target (WCAG 2.5.8; 48th QA pass, 13) */
td.contact a { display: block; min-height: 24px; line-height: 24px; }
tr.late td { color: var(--red); }
/* v0.26 staff menu: groups in the navy bar, the open group's pages on a light row under it */
.subnav { display: flex; gap: 26px; padding: 0 var(--s6); min-height: 42px; align-items: stretch; background: var(--n50, #F7F5F0); border-bottom: 1px solid var(--n200);
          overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: flex; align-items: center; color: var(--text-2); text-decoration: none; font-size: 13.5px; white-space: nowrap; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.subnav a:hover { color: var(--navy); }
.subnav a.active { color: var(--navy); font-weight: 500; border-bottom-color: var(--gold); }
@media (max-width: 900px) { .subnav { gap: 22px; padding: 0 var(--s4); } }
/* v0.26 family switcher in the portal header (one login, two households) */
.famswitch { display: inline-flex; align-items: center; }
.famswitch select { max-width: 180px; }

/* Phones and tablets: every control a thumb taps is at least 44 px tall (Apple and Android touch guidance; 30th QA pass,
   10). Measured at 375 px before: the language picker 28 px, Sign out 20 px, the code page's links 19 px, Pay and Mark 30 px. */
@media (max-width: 900px), (pointer: coarse) {
  .langs a, .langs button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  header .who a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  header nav a { min-height: 44px; min-width: 44px; justify-content: center; }
  input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
  .inv-line a:not(.btn), .notice li a, .notes a { min-height: 44px; display: inline-flex; align-items: center; }
  td > a:not(.btn) { display: inline-block; padding: 12px 0; margin: -12px 0; }   /* a 44 px target that keeps the row's text in line */
  td.contact > a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }   /* stacked links: 44 px each, not overlapping */
  header select { min-height: 44px; }
  .btn, .btn.sm { min-height: 44px; }
  .back { min-height: 44px; }
  .chips a { min-height: 44px; display: inline-flex; align-items: center; }
  .sched-tools a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tabs a { min-height: 44px; display: inline-flex; align-items: flex-end; }
  body.auth .pane .small a { min-height: 44px; display: inline-flex; align-items: center; }
  .sched-dl a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* the child's initial shows only on phones (the full name shows elsewhere); v0.32 */
.wk-block .ni { display: none; }

/* v0.43: previous / next day arrows around the date on Today */
.datestep { display: inline-flex; align-items: center; gap: 6px; }
.datestep .btn { min-width: 36px; justify-content: center; }

/* v0.44: student picker (ticked boxes with a search box, in place of Ctrl or Cmd on a list) */
.picker { position: relative; margin-bottom: var(--s2); }
.picker summary { list-style: none; cursor: pointer; border: 1px solid var(--rule-strong); border-radius: 6px; padding: 8px 32px 8px 10px; background: #fff; position: relative; min-height: 38px; }
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: translateY(-70%) rotate(45deg); }
.picker[open] summary { border-color: var(--navy); }
.picker-pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: 0 6px 20px rgba(11, 29, 58, 0.12); padding: 8px; }
.picker-q { width: 100%; margin-bottom: 6px; }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.picker-list li { padding: 2px 4px; border-radius: 4px; }
.picker-list li:hover { background: var(--n50, #f3f5f8); }
.picker-list label.check { display: flex; gap: 8px; align-items: baseline; font-weight: normal; margin: 0; padding: 4px 0; cursor: pointer; }
.picker-none { padding: 6px 4px; }
/* v0.44: week grouped by room or student; month view */
.week .grp { margin: 8px 0 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-transform: none; }
.week .grp:first-child { margin-top: 0; }
.month { border-top: 1px solid var(--rule-strong); margin: 0 0 var(--s7); }
.mo-head, .mo-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mo-head span { font-size: var(--fs-xs); color: var(--text-3); padding: 6px 8px; }
.mo-day { min-height: 112px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mo-week .mo-day:first-child { border-left: 0; }
.mo-day.other { background: var(--n50, #f5f7fa); }
.mo-day.other .mo-n { color: var(--text-3); }
.mo-day.today .mo-n { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mo-n { color: var(--navy); text-decoration: none; font-size: var(--fs-sm); display: flex; justify-content: space-between; }
.mo-n .n { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mo-ev { display: block; font-size: 11.5px; line-height: 1.35; padding: 2px 6px; border-radius: 4px; color: var(--navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-ev:hover { filter: brightness(0.96); }
.mo-ev.cancelled, .mo-ev.cancelled_free, .mo-ev.cancelled_half, .mo-ev.cancelled_by_lux, .mo-ev.cancelled_late, .mo-ev.no_show { opacity: 0.6; text-decoration: line-through; }
.mo-more { font-size: 11.5px; color: var(--text-2); text-decoration: none; padding: 0 6px; }
.mo-more:hover { text-decoration: underline; }
@media (max-width: 700px) { .mo-day { min-height: 64px; } .mo-ev { display: none; } .mo-n .n { color: var(--navy); font-weight: 600; } }
/* v0.45: a tidier calendar toolbar (view and dates on one line, layout and filters on the next) */
.calbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.calbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.calbar-row > div { display: flex; flex-direction: column; }
.calbar-row label { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 3px; }
.calbar-row select { min-width: 0; max-width: 200px; padding-top: 6px; padding-bottom: 6px; }
.calnav { display: inline-flex; align-items: center; gap: 6px; }
.calnav input[type=date] { padding: 5px 8px; }
.calbar .seg { margin-right: 4px; }
.calbar .clear { align-self: flex-end; }
.calkey { margin-top: var(--s4); color: var(--text-3); }
.tlegend { margin-bottom: var(--s3); }
/* v0.45: the chosen students listed under the picker, each removable */
.picker-chosen { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.picker-chosen:empty { display: none; }
.picker-chosen li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--n50, #f5f7fa); }
.picker-chosen li .muted { font-size: var(--fs-xs); }
.picker-x { margin-left: auto; border: 0; background: none; color: var(--text-2); font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; }
.picker-x:hover, .picker-x:focus-visible { color: var(--navy); }
/* v0.45: weekly repeat (until a date or for N weeks) with weeks to skip */
.repeat { border: 0; padding: 0; margin: var(--s2) 0 var(--s3); }
.repeat .sub-legend { font-size: var(--fs-sm); font-weight: 600; padding: 0; margin-bottom: 6px; }
.repeat .radios { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.repeat .radios label.check { font-weight: normal; margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.skip-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; max-height: 260px; overflow-y: auto; }
.skip-list label.check { font-weight: normal; margin: 0; display: flex; gap: 6px; align-items: center; padding: 3px 0; }
/* v0.47: location filter on the calendar, several at once */
.calbar-row .lbl { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 3px; }
.locpick { margin: 0; min-width: 170px; }
.locpick summary { padding: 6px 30px 6px 10px; min-height: 0; white-space: nowrap; }
.locpick .picker-pop { right: auto; min-width: 220px; }
.calbar-row .locpick label.check { font-size: var(--fs-sm); color: var(--text); margin: 0; }
.picker-foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); display: flex; gap: 10px; align-items: center; }
/* v0.49: phones */
.picker summary::marker { content: ""; }
.picker summary { display: block; }
.calbar .seg a.btn:not(.secondary) { color: var(--white); }
.calfilters > summary { display: none; }
.daylist { display: none; list-style: none; margin: 0 0 var(--s6); padding: 0; }
.daylist li { margin: 0 0 6px; }
.daylist .ev { position: static; display: flex; flex-direction: column; width: auto; height: auto; padding: 8px 10px; }
table.stack td.right .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .calfilters > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
    color: var(--navy); border: 1px solid var(--n200); border-radius: 6px; padding: 6px 12px; background: #fff; }
  .calfilters > summary::marker { content: ""; }
  .calfilters > summary::-webkit-details-marker { display: none; }
  .calfilters > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: translateY(-2px) rotate(45deg); }
  .calfilters[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
  .calfilters > summary .n { background: var(--navy); color: #fff; border-radius: 9px; font-size: var(--fs-xs); padding: 0 6px; }
  .calfilters[open] > .calbar-row { margin-top: 10px; }
  .calbar-row > div { flex: 1 1 140px; }
  .calbar-row select, .locpick { max-width: none; width: 100%; }
  .page-head .actions { flex-wrap: wrap; }
  .dayview { display: none; }
  .daylist { display: block; }
  .tlegend { font-size: var(--fs-xs); }
  /* month: the day number is the whole cell's tap target; the lessons are counted, not listed */
  .mo-day { min-height: 54px; padding: 0; }
  .mo-day .mo-ev, .mo-day .mo-more { display: none; }
  .mo-day .mo-n { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 54px; text-decoration: none; }
  /* tables marked .stack become one block per row */
  table.stack, table.stack tbody { display: block; }
  table.stack tr:first-child:has(th) { display: none; }
  table.stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.stack td { display: block; border: 0; padding: 0; text-align: left; }
  table.stack td:first-child { flex-basis: 100%; font-weight: 600; }
  table.stack td.right { margin-left: auto; }
}
.picker > summary::before, .calfilters > summary::before { display: none; }
@media (max-width: 640px) { .locpick .picker-pop { min-width: 0; right: 0; } }
.calbar-row .lbl { display: block; font-weight: 500; line-height: 1.4; }
.calbar-row .locpick summary { padding-top: 8px; padding-bottom: 8px; }