@charset "UTF-8";
/* ============================================================================
   Tutoring platform stylesheet.
   Layout: a light sidebar rail (navy is the accent, not the wallpaper) beside a
   reading-width content column; pages own their titles. Colour is reserved for
   meaning: navy = action, gold wash = money owed, pos/neg/warn = status. Every
   colour below is a token, defined for light on :root and for dark twice (the
   OS setting, guarded against an explicit light choice, and the explicit dark
   choice), so a module section never needs a literal colour.
   ============================================================================ */
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/PublicSans-400-700-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/IBMPlexSans-400-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Poppins-600-latin.woff2") format("woff2"); }

:root {
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* canvas and surfaces */
  --bg: #f4f6f8;          /* the canvas behind everything */
  --bg-2: #f8f9fb;        /* a quieter inset (disabled fields, nested panels) */
  --surface: #ffffff;     /* cards, tables, the rail */
  --soft: #eceff3;        /* subtle fills and hairlines inside a surface */
  --hover: #eef2f7;       /* a row or link under the pointer */
  --line: #dfe4ea;        /* borders between surfaces */
  --line-strong: #c6ced8; /* input borders */
  /* ink */
  --fg: #1d2b3a;
  --fg-2: #46556a;
  --muted: #68778a;
  --muted-2: #98a4b3;
  --link: #1d4ed8;
  /* the action colour and its wash */
  --navy: #0d3b66;
  --navy-ink: #ffffff;
  --navy-wash: #e4ecf6;
  --ring: #5b8dc9;
  /* money and status */
  --gold: #f4d35e;
  --gold-ink: #7a5a00;
  --gold-wash: rgba(244, 211, 94, .22);
  --pos: #2b7a4b; --pos-bg: rgba(43, 122, 75, .12);
  --warn: #7a5a00; --warn-bg: rgba(244, 211, 94, .28);
  --neg: #b42318; --neg-bg: rgba(180, 35, 24, .09); --neg-line: rgba(180, 35, 24, .35);
  --chip-follow: #5b21b6; --chip-follow-bg: rgba(91, 33, 182, .1);
  /* chart series, in fixed order (validated for colour-blind separation on the surface, both themes) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  /* geometry and elevation */
  --radius-card: 12px;
  --radius-ctl: 8px;
  --shadow-1: 0 1px 2px rgba(29, 43, 58, .05), 0 2px 6px rgba(29, 43, 58, .045);
  --shadow-2: 0 2px 4px rgba(29, 43, 58, .07), 0 6px 16px rgba(29, 43, 58, .07);
  /* the rail */
  --rail: #fbfbfc;
  --rail-line: #e6eaef;
  --rail-fg: #1d2b3a;
  --rail-muted: #68778a;
  --rail-hover: rgba(13, 59, 102, .06);
  --rail-active-bg: rgba(13, 59, 102, .09);
  --rail-active-fg: #0d3b66;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151b24; --bg-2: #1a212b; --surface: #1f2733; --soft: #2a3341; --hover: #2a3444; --line: rgba(255, 255, 255, .11); --line-strong: rgba(255, 255, 255, .2);
    --fg: #e7ebf1; --fg-2: #c4ccd7; --muted: #9aa6b5; --muted-2: #717d8c; --link: #8fb3e8;
    --navy: #8fb3dc; --navy-ink: #10192a; --navy-wash: rgba(143, 179, 220, .16); --ring: #8fb3dc;
    --gold: #e3c45a; --gold-ink: #e3c45a; --gold-wash: rgba(227, 196, 90, .16);
    --pos: #7cc79a; --pos-bg: rgba(124, 199, 154, .14); --warn: #e0c060; --warn-bg: rgba(224, 192, 96, .14); --neg: #f08a80; --neg-bg: rgba(240, 138, 128, .13); --neg-line: rgba(240, 138, 128, .4);
    --chip-follow: #c4a8f5; --chip-follow-bg: rgba(196, 168, 245, .14);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .25); --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .3);
    --rail: #1a212b; --rail-line: rgba(255, 255, 255, .09); --rail-fg: #e7ebf1; --rail-muted: #9aa6b5; --rail-hover: rgba(143, 179, 220, .1); --rail-active-bg: rgba(143, 179, 220, .16); --rail-active-fg: #cfe0f5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151b24; --bg-2: #1a212b; --surface: #1f2733; --soft: #2a3341; --hover: #2a3444; --line: rgba(255, 255, 255, .11); --line-strong: rgba(255, 255, 255, .2);
  --fg: #e7ebf1; --fg-2: #c4ccd7; --muted: #9aa6b5; --muted-2: #717d8c; --link: #8fb3e8;
  --navy: #8fb3dc; --navy-ink: #10192a; --navy-wash: rgba(143, 179, 220, .16); --ring: #8fb3dc;
  --gold: #e3c45a; --gold-ink: #e3c45a; --gold-wash: rgba(227, 196, 90, .16);
  --pos: #7cc79a; --pos-bg: rgba(124, 199, 154, .14); --warn: #e0c060; --warn-bg: rgba(224, 192, 96, .14); --neg: #f08a80; --neg-bg: rgba(240, 138, 128, .13); --neg-line: rgba(240, 138, 128, .4);
  --chip-follow: #c4a8f5; --chip-follow-bg: rgba(196, 168, 245, .14);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .25); --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .3);
  --rail: #1a212b; --rail-line: rgba(255, 255, 255, .09); --rail-fg: #e7ebf1; --rail-muted: #9aa6b5; --rail-hover: rgba(143, 179, 220, .1); --rail-active-bg: rgba(143, 179, 220, .16); --rail-active-fg: #cfe0f5;
  color-scheme: dark;
}

/* ---- Base ---- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { font-family: var(--sans); font-size: 14px; line-height: 1.5; margin: 0; color: var(--fg); background: var(--bg); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
a { color: var(--link); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 600; margin: 18px 0 4px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
h3.group-heading { margin: 14px 0 6px; color: var(--navy); }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--neg); }
.notice { color: var(--pos); }
code { font-family: var(--mono); font-size: 12px; background: var(--soft); padding: 1px 5px; border-radius: 4px; }

/* ---- The shell: rail and content ---- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--rail); border-right: 1px solid var(--rail-line); padding: 10px 10px 16px; overflow-y: auto; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 8px 10px; border-bottom: 1px solid var(--rail-line); margin-bottom: 8px; }
.brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--navy); color: var(--navy-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.brand .mark.has-image { background: #fff; padding: 1px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.brand .mark img { width: 100%; height: 100%; object-fit: contain; }
.brand img.mark { object-fit: contain; background: transparent; }
.brand .name { font-weight: 600; font-size: 14px; color: var(--rail-fg); line-height: 1.2; }
.brand .tenant { font-size: 11px; color: var(--rail-muted); }
.group { margin-bottom: 10px; }
.group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rail-muted); padding: 8px 10px 3px; }
.sidebar a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-ctl); color: var(--rail-fg); text-decoration: none; font-size: 13.5px; position: relative; }
.sidebar a:hover { background: var(--rail-hover); }
.sidebar a.active { background: var(--rail-active-bg); color: var(--rail-active-fg); font-weight: 600; }
.sidebar a.active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--navy); }
.sidebar .count { margin-left: auto; font-size: 11px; background: var(--soft); color: var(--fg-2); padding: 0 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.content { padding: 24px 32px 48px; max-width: 1180px; min-width: 0; }
/* Head office's View as centre: a fold in the rail, and the band that says which centre it is viewing. */
.view-as summary { cursor: pointer; list-style: none; }
.view-as summary::after { content: " ›"; }
.view-as[open] summary::after { content: " ⌄"; }
.view-as-banner { background: var(--soft); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 8px 12px; margin-bottom: 16px; font-size: 13.5px; }
.view-as-banner a { margin-left: 8px; font-weight: 600; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); height: 100vh; transform: translateX(-100%); transition: transform .18s ease-out; z-index: 30; box-shadow: var(--shadow-2); }
  .nav-check:checked ~ .shell .sidebar { transform: none; }
  .nav-scrim { display: none; }
  .nav-check:checked ~ .shell .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 20; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 10; width: 100%; padding: 10px 16px; background: var(--surface); border: none; border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 600; text-align: left; }
  .content { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
}

/* ---- Page header: the page owns its title, badges sit inline, actions sit right ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.page-head .titles { min-width: 0; }
.page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.page-head .lede { color: var(--muted); margin: 4px 0 0; max-width: 78ch; }
.page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs { margin: 0 0 4px; font-size: 13px; }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---- Status pills: one vocabulary for the whole app ---- */
.pill, .status, .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.6; background: var(--soft); color: var(--fg-2); white-space: nowrap; vertical-align: middle; }
.pill { margin-right: 4px; }
.pill.ok, .status.built, .status.active, .badge.on, .pill.pos { background: var(--pos-bg); color: var(--pos); }
.pill.warn, .status.partlybuilt, .badge.off { background: var(--warn-bg); color: var(--warn); }
.pill.neg, .status.notstarted.neg { background: var(--neg-bg); color: var(--neg); }
.pill.navy, .status.draft { background: var(--navy-wash); color: var(--navy); }
.status.notstarted, .status.retired { background: var(--soft); color: var(--muted); }
.status.later { background: var(--chip-follow-bg); color: var(--chip-follow); }
.pill.gold { background: var(--gold-wash); color: var(--gold-ink); }
h1 .pill, h3 .pill { margin-left: 2px; }

/* ---- Tiles: a number, a label, a hint; a link when there is a page behind it ---- */
.summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-top: 12px; }
.summary a, .summary .tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; color: var(--fg); text-decoration: none; min-width: 0; }
.summary a:hover { border-color: var(--navy); box-shadow: var(--shadow-1); }
.summary .count { font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.15; }
.summary .label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.summary .sub { font-size: 12px; color: var(--muted-2); margin-top: 3px; }
.summary .alert { border-color: var(--neg-line); }
.summary .alert .count { color: var(--neg); }
.summary .owing { background: var(--gold-wash); }

/* ---- Tables ---- */
table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--bg-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--hover); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { font-variant-numeric: tabular-nums; }
table a { color: var(--link); text-decoration: none; }
table a:hover { text-decoration: underline; }
.row-actions { text-align: right; white-space: nowrap; }
tr.retired td { color: var(--muted-2); }
tr.retired td:not(.row-actions) { text-decoration: line-through; }
.table-wrap { overflow-x: auto; }
/* On a phone a table scrolls inside itself rather than pushing the page wider; an area's own layout can do better with .table-wrap. */
@media (max-width: 700px) { table:not(.fixed) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ---- Cards, forms, buttons ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; min-width: 0; }
.card label { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 10px; }
.card input:not([type=checkbox]):not([type=radio]), .card select, .card textarea { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); }
.card textarea { resize: vertical; }
.card input:disabled { background: var(--bg-2); color: var(--muted); }
.card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card .hint { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); margin: 8px 0; }
.card label.check input { margin: 0; }
label.inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); margin: 8px 0 0; }
label.inline select, label.inline input:not([type=checkbox]) { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); color: var(--fg); }
.field-error { color: var(--neg); font-size: 12px; margin-top: 3px; }
.actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
button, a.button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: var(--radius-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.4; }
button:hover, a.button:hover { background: var(--hover); }
button:disabled { opacity: .5; cursor: default; }
button.primary, a.button.primary { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
button.primary:hover, a.button.primary:hover { filter: brightness(1.08); background: var(--navy); }
button.link { border: none; background: none; padding: 2px 6px; color: var(--link); }
button.link.danger { color: var(--neg); }
button.danger { color: var(--neg); border-color: var(--neg-line); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.toolbar input:not([type=checkbox]) { flex: 1 1 240px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); min-width: 0; }
.toolbar select { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); color: var(--fg); }
.toolbar label.check { margin: 0; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 10px; }
@media (max-width: 900px) { .columns { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 16px; }

/* ---- Segmented control and tabs ---- */
.segmented { display: inline-flex; background: var(--soft); border-radius: var(--radius-ctl); padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmented button, .segmented a { border: none; background: transparent; padding: 4px 10px; border-radius: var(--radius-ctl); font-size: 13px; color: var(--fg-2); text-decoration: none; }
.segmented .on, .segmented a.active { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-1); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 10px 0 8px; }
.tabs a, .tabs button { padding: 7px 10px; border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--fg-2); text-decoration: none; font-size: 13px; margin-bottom: -1px; }
.tabs a:hover, .tabs button:hover { color: var(--fg); background: none; }
.tabs a.active, .tabs button.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }

/* ---- Empty states, banners, confirm bars, toasts ---- */
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); padding: 18px 16px; background: var(--surface); margin-top: 12px; color: var(--muted); }
.empty strong { display: block; color: var(--fg); margin-bottom: 2px; }
.notbuilt { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); padding: 14px 16px; background: var(--surface); margin-top: 12px; }
.banner { background: var(--gold-wash); border: 1px solid var(--gold); border-radius: var(--radius-card); padding: 10px 14px; margin: 10px 0; }
.confirm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--navy-wash); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 8px 12px; margin: 8px 0; }
.toast-stack { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 40; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: var(--radius-ctl); box-shadow: var(--shadow-2); font-size: 13px; }
.toast.ok { background: var(--pos); color: var(--surface); }
.toast.neg { background: var(--neg); color: var(--surface); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2); z-index: 35; display: flex; flex-direction: column; }
.drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer .drawer-body { padding: 14px 16px; overflow-y: auto; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 34; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
.facts dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; align-self: baseline; }
.facts dd { margin: 0; }

/* ---- Settings pages: tabs, cards, forms ---- */
h2 { font-size: 17px; margin: 18px 0 4px; }
h3 { font-size: 14px; margin: 0 0 10px; }
h3.group-heading { margin: 14px 0 6px; color: var(--navy); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 10px 0 4px; }
.tabs a { padding: 6px 10px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-ctl) 6px 0 0; color: var(--fg); text-decoration: none; font-size: 13px; margin-bottom: -1px; }
.tabs a:hover { background: var(--hover); }
.tabs a.active { background: var(--surface); border-color: var(--line); font-weight: 600; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; }
.card label { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 10px; }
.card input:not([type=checkbox]), .card select { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); }
.card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); margin: 8px 0; }
.card label.check input { margin: 0; }
label.inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); margin: 8px 0 0; }
label.inline select { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); }
.actions { display: flex; gap: 8px; margin-top: 6px; }
button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: var(--radius-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--navy); border-color: var(--navy); color: var(--surface); }
button.link { border: none; background: none; padding: 2px 6px; color: var(--link); }
button.link.danger { color: var(--neg); }
.row-actions { text-align: right; white-space: nowrap; }
tr.retired td { color: var(--muted-2); }
tr.retired td:not(.row-actions) { text-decoration: line-through; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.notice { color: var(--pos); }
.summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.summary a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; color: var(--fg); text-decoration: none; }
.summary a:hover { border-color: var(--navy); }
.summary .count { font-size: 22px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.summary .label { font-size: 13px; color: var(--muted); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: var(--soft); color: var(--fg-2); margin-right: 4px; }
@media (max-width: 900px) { .columns { grid-template-columns: 1fr; } }

a.button { display: inline-block; padding: 7px 14px; border-radius: var(--radius-ctl); border: 1px solid var(--line-strong); text-decoration: none; font-size: 14px; color: var(--fg); background: var(--surface); }
a.button.primary { background: var(--navy); border-color: var(--navy); color: var(--surface); }
.who { margin-top: 18px; padding: 10px 8px; border-top: 1px solid var(--soft); font-size: 13px; }
.who-name { font-weight: 600; color: var(--navy); }
.who-detail { color: var(--muted); font-size: 12px; margin-bottom: 4px; word-break: break-all; }
.who form { margin: 0; }
.who button.link { padding: 0; font-size: 12px; }
.summary .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; }

/* ---- Users and roles, owners and centres ---- */
.membership { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.membership select { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 12px; background: var(--surface); }
.membership .scope { font-size: 12px; color: var(--fg-2); }
.card.owner { margin-bottom: 14px; }
.card.owner table { margin-top: 10px; }
.card.owner.retired-card { opacity: .7; }
.owner-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.owner-head h3 { margin-bottom: 2px; }
.pill.ok { background: var(--pos-bg); color: var(--pos); }

/* ---- Tutors ---- */
.window { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.card .window select, .card .window input { display: inline-block; width: auto; margin: 0; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); }
tr.selected td { background: var(--navy-wash); }
h1 .pill, h3 .pill { vertical-align: middle; margin-left: 8px; }
h1 .pill { font-size: 12px; padding: 2px 9px; }
table a { color: var(--link); text-decoration: none; }
table a:hover { text-decoration: underline; }
.card .hint { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.card input:disabled { background: var(--bg-2); color: var(--muted); }
/* ---- People: families and students (toolbar, facts, crumbs and badges come from the component section) ---- */
tr.inactive td:not(.row-actions) { color: var(--muted-2); }
.count-line { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
/* ---- Prices: list status pills, the list being worked on, item codes ---- */
.status.draft { background: var(--navy-wash); color: var(--navy); }
.status.active { background: var(--pos-bg); color: var(--pos); }
.status.retired { background: var(--soft); color: var(--muted); }
h2 .status { margin-left: 8px; vertical-align: middle; font-weight: 500; }
tr.selected td { background: var(--navy-wash); }
td code { font-size: 12px; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.card h3.group-heading { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--soft); }

/* ---- Timetable ---- */
ul.warn { margin: 10px 0 0; padding-left: 18px; color: var(--warn); font-size: 13px; }
ul.warn li { margin: 2px 0; }
/* ---- Documents: the template editor (billing.templates) ---- */
.tabs button { padding: 6px 10px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-ctl) 6px 0 0; background: none; color: var(--fg); font-size: 13px; margin-bottom: -1px; }
.tabs button:hover { background: var(--hover); }
.tabs button.active { background: var(--surface); border-color: var(--line); font-weight: 600; }
.template-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 10px; }
.card textarea.html { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; background: var(--surface); resize: vertical; }
.card.fields { max-height: 680px; overflow-y: auto; }
.field-list { list-style: none; margin: 0 0 8px; padding: 0; }
.field-list li { display: grid; grid-template-columns: max-content 1fr; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--soft); font-size: 12px; color: var(--fg-2); }
.field-list button.link { padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-align: left; }
iframe.preview { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); margin-top: 8px; box-sizing: border-box; }
iframe.preview.pdf { height: 760px; }
.pdf-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 900px) { .template-editor { grid-template-columns: 1fr; } }
/* ---- Message templates: the editor, the insert bar, the preview panes ---- */
.card textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); min-height: 180px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.insert-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 10px; }
.insert-bar select { padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 12px; background: var(--surface); max-width: 220px; }
.insert-bar button { font-size: 12px; padding: 4px 8px; }
.pill.channel-email { background: var(--navy-wash); color: var(--navy); }
.pill.channel-sms { background: var(--pos-bg); color: var(--pos); }
.pill.channel-whatsapp, .pill.channel-wechat { background: var(--chip-follow-bg); color: var(--chip-follow); }
.pill.scope-organisation { background: var(--soft); color: var(--fg-2); }
.pill.scope-owner { background: var(--warn-bg); color: var(--warn); }
.pill.scope-centre { background: var(--neg-bg); color: var(--neg); }
.pill.scope-builtin { background: transparent; color: var(--fg-2); border: 1px dashed var(--line, currentColor); }
td.subject { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 10px; }
.preview-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; }
.preview-pane .subject-line { font-weight: 600; margin: 0 0 10px; }
.preview-pane .rendered { border-top: 1px solid var(--soft); padding-top: 10px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.preview-pane pre { white-space: pre-wrap; font: inherit; margin: 0; }
.preview-pane .field-list { font-size: 12px; color: var(--muted); margin: 10px 0 0; columns: 2; column-gap: 16px; }
.preview-pane .field-list span { display: block; break-inside: avoid; }
.preview-pane .field-list code { font-size: 11px; background: var(--soft); padding: 0 4px; border-radius: 4px; }
@media (max-width: 900px) { .preview-grid { grid-template-columns: 1fr; } .preview-pane .field-list { columns: 1; } }

/* ---- Bulk sends ---- */
pre.sample { white-space: pre-wrap; font: 13px/1.4 inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 10px; margin: 0; }

/* ---- Week grid: lessons by week with seats, cancel, reinstate and cover (terms.lessons) ---- */
.pill.lesson-cancelled { background: var(--neg-bg); color: var(--neg); }
.pill.cover { background: var(--chip-follow-bg); color: var(--chip-follow); margin-left: 4px; }
tr.cancelled td:not(.row-actions) { color: var(--muted-2); }

/* ---- Enrolments: the roster's inline row forms, price warnings ---- */
tr.withdrawn td:not(.row-actions) { color: var(--muted-2); }
tr.row-form td { background: var(--bg); padding: 10px; }
.row-form-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.row-form-fields label { display: block; font-size: 12px; color: var(--fg-2); }
.row-form-fields input, .row-form-fields select { display: block; margin-top: 3px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); }
.row-form-fields input[type=number] { width: 70px; }
.row-form-fields input.note { width: 240px; }
.row-form-fields .actions { margin: 0; }
.price-warn { color: var(--warn); font-size: 12px; }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--navy-wash); border-radius: var(--radius-ctl); padding: 6px 8px; margin-bottom: 10px; font-size: 13px; }
.seats { font-size: 13px; color: var(--muted); }

/* ---- Invoices ---- */
.toolbar-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.pill.warn-pill { background: var(--warn-bg); color: var(--warn); }

/* ---- Attendance: the tutor's roll, the term log grid and the mark codes (terms.attendance) ---- */
.mark { display: inline-block; min-width: 22px; box-sizing: border-box; text-align: center; padding: 1px 5px; border-radius: var(--radius-ctl); font-size: 12px; font-weight: 600; line-height: 18px; background: var(--soft); color: var(--fg-2); }
.mark.mark-attended { background: var(--pos-bg); color: var(--pos); }
.mark.mark-late { background: var(--warn-bg); color: var(--warn); }
.mark.mark-informed { background: var(--navy-wash); color: var(--link); }
.mark.mark-uninformed { background: var(--neg-bg); color: var(--neg); }
.mark.mark-centre { background: var(--soft); color: var(--muted); }
.mark.mark-later, .mark.mark-makeup { background: var(--chip-follow-bg); color: var(--chip-follow); }
.mark.mark-none { background: var(--surface); color: var(--line-strong); border: 1px dashed var(--line); }
.mark.cancelled-key { background: var(--surface); color: var(--muted-2); border: 1px dashed var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-2); margin: 8px 0 0; }
.legend .mark { margin-right: 4px; }
/* ---- Reports: progress tiles, status pills, the report form, flags, quick entry and the class handover (reports.form, reports.flags) ---- */
.report-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.report-form label { display: block; font-size: 12px; color: var(--fg-2); margin: 0; }
.report-form label .req { color: var(--neg); font-size: 11px; margin-left: 4px; }
.report-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; line-height: 1.4; min-height: 72px; resize: vertical; background: var(--surface); }
.report-form select, .report-form input { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); }
.report-form textarea:disabled, .report-form select:disabled, .report-form input:disabled { background: var(--bg-2); color: var(--fg-2); }
.report-form .selects { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.report-form .internal { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.report-form .internal h4 { grid-column: 1 / -1; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.report-form .internal label.wide { grid-column: 1 / -1; }
ul.flags { list-style: none; margin: 8px 0; padding: 0; }
ul.flags li { padding: 4px 0; border-bottom: 1px solid var(--soft); font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
ul.flags li:last-child { border-bottom: none; }
.when, td.when { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .report-form, .report-form .internal, .report-form .selects { grid-template-columns: 1fr; } }
/* ---- Next-term wizard: the preview and result panel, the no-lesson dates box ---- */
.plan-panel .summary { margin-top: 10px; }
.plan-notes { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--fg-2); }
.plan-notes li { margin: 2px 0; }
.no-lesson-choices { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.no-lesson-choices li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.no-lesson-choices li > span { min-width: 9em; font-weight: 600; }
.no-lesson-choices label.check { margin: 0; }
.plan-next { margin: 14px 0 4px; font-weight: 600; }
.card textarea.dates { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); min-height: 64px; resize: vertical; }
/* ---- Cutover from Central (people.cutover) ---- */
.cutover-card { margin-top: 12px; max-width: 560px; }
.cutover-card .slug-row { display: flex; gap: 8px; align-items: center; }
.cutover-card .slug-row input { flex: 1; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; }
.tenant-links { list-style: none; margin: 0 0 10px; padding: 0; }
.tenant-links li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--soft); font-size: 14px; }
.tenant-links a { color: var(--link); text-decoration: none; }
ol.steps { margin: 0; padding-left: 18px; font-size: 13px; color: var(--fg-2); }
ol.steps li { margin: 4px 0; }
ol.steps code, .card .hint code { font-size: 12px; background: var(--soft); padding: 0 4px; border-radius: 4px; }
.summary .tile.money .count { font-size: 18px; }
.dry-run-banner { background: var(--navy-wash); color: var(--navy); border-radius: var(--radius-card); padding: 8px 12px; font-size: 13px; margin-top: 10px; }
.done-banner { background: var(--pos-bg); color: var(--pos); border-radius: var(--radius-card); padding: 8px 12px; font-size: 13px; margin-top: 10px; }

/* ---- Parent portal ---- */
.notices { margin: 0; padding-left: 18px; }
.notices li { margin: 4px 0; }
.primary-link { display: inline-block; background: var(--navy); color: var(--surface); border-radius: var(--radius-ctl); padding: 4px 10px; margin-right: 8px; text-decoration: none; font-size: 13px; }
.primary-link:hover { background: var(--navy); }
tr.detail-row > td { background: var(--bg-2); }
table.inner { border: none; background: transparent; }
table.inner th, table.inner td { padding: 4px 8px; }
td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.card.report h4 { margin: 12px 0 2px; font-size: 13px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .02em; }
.card.report .prose { margin: 0; white-space: pre-wrap; }
/* ---- Tutor pay: the term's tutors, a tutor's lessons and week flags, the rates card, the export (terms.pay) ---- */
table.pay-tutors td.flags { max-width: 260px; }
table.pay-tutors tr.open td { background: var(--bg-2); border-bottom-color: transparent; }
table.pay-tutors tr.pay-detail > td { background: var(--bg-2); padding: 6px 10px 14px 28px; }
table.pay-tutors .pay-lessons, table.pay-tutors .pay-weeks table { background: var(--surface); margin-top: 6px; }
table.pay-tutors .pay-lessons th, table.pay-tutors .pay-lessons td { font-size: 13px; padding: 5px 8px; }
table.pay-tutors .pay-lessons tr.excluded td { color: var(--muted-2); text-decoration: line-through; }
table.pay-tutors .pay-lessons tr.excluded td.row-actions, table.pay-tutors .pay-lessons tr.excluded td.flags { text-decoration: none; }
.pay-weeks { margin-top: 10px; }
.pay-weeks h4 { margin: 8px 0 4px; font-size: 13px; color: var(--fg-2); }
.pay-weeks label.check { display: inline-flex; align-items: center; gap: 4px; margin: 0 10px 0 0; font-size: 13px; }
.pay-weeks input.pay-note { width: 100%; min-width: 140px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; }
.pay-weeks td.notes-standing { font-size: 12px; color: var(--muted); white-space: nowrap; }
.card table.pay-tiers { margin: 6px 0 8px; }
.card table.pay-tiers th, .card table.pay-tiers td { padding: 4px 6px; }
.card table.pay-tiers input { display: inline-block; width: 100%; margin: 0; padding: 4px 6px; font-size: 13px; }
/* ---- Payment reminder ladder: the queue, paused rows, the step editor (billing.chases) ---- */
.columns.chases { grid-template-columns: minmax(0, 1fr) 440px; }
tr.paused td { color: var(--muted); }
.card table.ladder-steps { border: none; background: transparent; margin: 4px 0 8px; }
.card .ladder-steps th { padding: 2px; font-size: 10px; }
.card .ladder-steps td { padding: 3px 2px; border: none; vertical-align: top; }
.card .ladder-steps input, .card .ladder-steps select { width: 100%; box-sizing: border-box; margin: 0; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 12px; background: var(--surface); }
.card .ladder-steps td.offset { width: 58px; }
.card .ladder-steps td.mode { width: 78px; }
.card .ladder-steps td.channel { width: 74px; }
.card .ladder-steps td.remove { width: 22px; }
.card .ladder-steps button.link { padding: 2px 4px; }
@media (max-width: 900px) { .columns.chases { grid-template-columns: 1fr; } }

/* ---- Policies ---- */
.banner { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--gold); border-radius: var(--radius-card); padding: 10px 14px; margin: 10px 0; }
.banner a { color: var(--warn); font-weight: 600; }
.policy-body { border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 12px 14px; max-height: 420px; overflow-y: auto; background: var(--surface); }
.policy-body h1, .policy-body h2, .policy-body h3 { font-size: 15px; margin: 10px 0 4px; }
.policy-body p, .policy-body li { font-size: 14px; }
textarea.html { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* ---- Enquiries: the public form's honeypot field ---- */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The public forms' bot check (Cloudflare Turnstile): its own box, kept clear of the button below it. */
human-check.human-check { display: block; min-height: 65px; margin: 4px 0 14px; }

/* ---- Follow-ups: the summary tiles, the queue, a row's inline actions, the new-row form (people.follow-ups) ---- */
.columns.follow-ups { grid-template-columns: minmax(0, 1fr) 380px; }
table.follow-ups td.title { max-width: 420px; }
table.follow-ups .detail { font-size: 12px; color: var(--fg-2); white-space: pre-wrap; margin-top: 2px; }
table.follow-ups tr.overdue td.due { color: var(--neg); font-weight: 600; }
table.follow-ups tr.closed td:not(.row-actions) { color: var(--muted-2); }
table.follow-ups td.due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill.kind-payment { background: var(--warn-bg); color: var(--warn); }
.pill.kind-enrolment { background: var(--pos-bg); color: var(--pos); }
.pill.kind-withdrawal { background: var(--soft); color: var(--fg-2); }
.pill.kind-absence { background: var(--neg-bg); color: var(--neg); }
.pill.kind-welfare { background: var(--chip-follow-bg); color: var(--chip-follow); }
.pill.kind-callback { background: var(--navy-wash); color: var(--navy); }
.pill.kind-general { background: var(--soft); color: var(--fg-2); }
.pill.priority-high { background: var(--neg-bg); color: var(--neg); }
.card.follow-up-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; line-height: 1.4; min-height: 64px; resize: vertical; background: var(--surface); }
.card.follow-up-form .family-pick { position: relative; }
.card.follow-up-form ul.family-results { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); max-height: 180px; overflow: auto; }
.card.follow-up-form ul.family-results li { padding: 5px 8px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--soft); }
.card.follow-up-form ul.family-results li:last-child { border-bottom: none; }
.card.follow-up-form ul.family-results li:hover { background: var(--navy-wash); }
.card.follow-up-form .picked { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin-top: 3px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--bg-2); }
.card.follow-up-form .picked button.link { padding: 0; }
@media (max-width: 900px) { .columns.follow-ups { grid-template-columns: 1fr; } }
/* ---- Staff dashboard: the tiles and the day's lessons (screens.staff) ---- */
.summary .tile.alert { border-color: var(--neg-line); background: var(--neg-bg); }
.summary .tile .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.summary .count .of { font-size: 14px; font-weight: 500; color: var(--muted); }
table.dashboard-lessons td.time { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.dashboard-lessons tr.unmarked td.time { color: var(--neg); font-weight: 600; }
table.dashboard-lessons tr.cancelled td:not(.row-actions) { color: var(--muted-2); }
.pill.roll-unmarked { background: var(--neg-bg); color: var(--neg); }
.pill.roll-partial { background: var(--warn-bg); color: var(--warn); }
.pill.roll-done { background: var(--pos-bg); color: var(--pos); }

/* ---- Report delivery: the PDF link, Send per report, "Send all finished" with its confirm and outcomes (reports.pdf) ---- */
td.row-actions a.pdf { margin-right: 8px; }

/* ---- Platform admin: the key, the tenants with their fees edited inline, a tenant's statements and the monthly run (screens.platform, billing.statements) ---- */
.key-card { margin: 10px 0 14px; max-width: 560px; }
.key-card .key-row { display: flex; gap: 8px; align-items: center; }
.key-card .key-row input { flex: 1; margin: 0; }
table.tenants td.fee input { display: inline-block; width: 90px; margin: 0; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; text-align: right; }
table.tenants td.fee .unit { color: var(--muted); font-size: 12px; margin-left: 4px; }
table.tenants td.row-actions a { margin-left: 8px; }
table.statements td.month { white-space: nowrap; font-weight: 600; }
table.statements td.when { white-space: nowrap; color: var(--muted); font-size: 12px; }
.pill.paid { background: var(--pos-bg); color: var(--pos); }
.pill.owing { background: var(--warn-bg); color: var(--warn); }
.pill.draft { background: var(--soft); color: var(--fg-2); }
.run-result { background: var(--navy-wash); color: var(--navy); border-radius: var(--radius-card); padding: 8px 12px; font-size: 13px; margin-top: 10px; }
.fee-lines { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.fee-lines li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--soft); }
/* ---- Term close: the closing checklist and the close, plain or anyway with a note (terms.close) ---- */

/* ---- Receipts: the payments under an invoice with Receipt and Email receipt, the portal's receipt links (billing.receipts) ---- */
table.inner.receipts a { color: var(--link); text-decoration: none; }
table.inner.receipts a:hover { text-decoration: underline; }
.fee-lines li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--soft); }

/* ---- Visual pass: people, money and comms pages ---- */
/* Shared by these pages: the quiet loading line, and FormField (label.field) laid out the same in or out of a card. */
.loading { color: var(--muted); margin: 12px 0; }
label.field { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 10px; }
label.field .field-label { display: block; }
label.field input:not([type=checkbox]):not([type=radio]), label.field select, label.field textarea { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); }
label.field textarea { resize: vertical; }
label.field .hint, label.field .field-error { display: block; margin: 3px 0 0; font-size: 12px; }
label.field .hint { color: var(--muted); }
label.field:has(.field-error) input, label.field:has(.field-error) select, label.field:has(.field-error) textarea { border-color: var(--neg-line); }
/* Forms in a drawer: two fields side by side, stacked on a phone; a drawer's sub-headings. */
.drawer .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .drawer .pair, .card .pair { grid-template-columns: 1fr; } }
.drawer h4.drawer-section { margin: 16px 0 6px; font-size: 13px; color: var(--fg-2); }
.drawer .facts { margin-bottom: 8px; }
/* A section heading with its link or action on the right. */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin: 18px 0 6px; }
/* Families: children as quiet chips, an inactive one dashed. */
table.families td.email { overflow-wrap: anywhere; }
table.families .pill.inactive { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); }
/* A family: its children with their current classes, its conversations, its open invoices and policies. */
table.family-students td.classes { font-size: 12.5px; white-space: nowrap; }
table.family-students td.classes .pill { margin-left: 4px; }
table.family-threads td.preview { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.family-threads td a + .pill { margin-left: 6px; }
ul.family-list, ul.student-classes { list-style: none; margin: 0 0 8px; padding: 0; }
ul.family-list li, ul.student-classes li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--soft); font-size: 13px; }
ul.family-list li:last-child, ul.student-classes li:last-child { border-bottom: none; }
ul.family-list li .pill { margin-left: 6px; }
ul.family-list .amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* Students: the name opens the drawer. */
table.students button.link.name { padding: 0; font-weight: 500; text-align: left; }
/* Enquiries: bucket tabs with counts (the old Documents rule on .tabs button undoes the foundation's underline, so it is restored here), the lead drawer's sections, the new-lead form */
.enquiries-page .tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 7px 10px; background: none; color: var(--fg-2); }
.enquiries-page .tabs button:hover { background: none; color: var(--fg); }
.enquiries-page .tabs button.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.enq-tab-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--fg-2); font-size: 11px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.enquiries-page .tabs button.on .enq-tab-count { background: var(--navy-wash); color: var(--navy); }
button.link.enq-open { padding: 0; font-weight: 600; text-align: left; }
.enq-due { color: var(--neg); font-weight: 600; }
.enq-lead-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.enq-message { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0; background: var(--bg-2); color: var(--fg); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.enq-section { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 14px; }
.enq-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--fg); }
.enq-section .actions { margin: 0 0 6px; }
.enq-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.enq-row input, .enq-row select, .enq-child input, .offers-seat input:not([type=checkbox]), .offers-seat select, .reenrol-acts input, .reenrol-acts select { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); color: var(--fg); min-width: 0; }
.enq-row input { flex: 1 1 160px; }
.enq-row input[type=date], .enq-row input[type=datetime-local] { flex: 0 0 auto; }
.enq-row input.enq-short { flex: 0 1 110px; }
.enq-row select { max-width: 100%; }
.enq-sample { border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 8px 10px; margin: 8px 0; background: var(--bg-2); }
.enq-sample pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; }
.enq-warn { color: var(--warn); }
.enq-timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.enq-timeline li { padding: 5px 0; border-bottom: 1px solid var(--soft); font-size: 13px; }
.enq-timeline li:last-child { border-bottom: none; }
.enq-timeline .when { margin-right: 4px; }
.enq-two, .offers-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.enq-children, .offers-places { margin-bottom: 10px; }
.enq-children .field-label, .offers-places .field-label, .offers-picked .field-label { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 3px; }
.enq-child { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.enq-child input { flex: 1 1 0; }
.enq-child input.enq-year { flex: 0 0 64px; }
@media (max-width: 520px) { .enq-two, .offers-two { grid-template-columns: minmax(0, 1fr); } }

/* Offers: the sign-ups to review as cards, the make-an-offer drawer with its family picker and place rows */
.offers-signups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 10px; margin-top: 8px; }
.offers-signup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.offers-money { font-weight: 600; font-variant-numeric: tabular-nums; }
.offers-warnings { margin: 6px 0; padding-left: 18px; color: var(--warn); font-size: 13px; }
.offers-warnings li { margin: 2px 0; }
.offers-for { margin: 0 0 12px; }
.offers-picked { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.offers-found { list-style: none; margin: -4px 0 10px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); max-height: 200px; overflow-y: auto; }
.offers-found li button { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--soft); border-radius: 0; background: var(--surface); padding: 7px 9px; }
.offers-found li:last-child button { border-bottom: none; }
.offers-found li button:hover { background: var(--hover); }
.offers-places .hint { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.offers-places .field-error { display: block; }
.offers-seat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--soft); }
.offers-seat select.offers-class { flex: 1 1 220px; }
.offers-seat input:not([type=checkbox]):not(.offers-narrow) { flex: 1 1 140px; }
.offers-seat input.offers-narrow { width: 72px; }
.offers-unit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-2); }
.offers-seat label.check { margin: 0; }

/* Term sign-up: the close confirmation with its give-back choice, the open form, the round's settings row, row actions */
.reenrol-close { margin: 8px 0; }
.reenrol-close label.check { margin: 0 0 2px; }
.reenrol-open { max-width: 520px; margin-top: 12px; }
.reenrol-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; font-weight: 600; }
.reenrol-round { margin-top: 12px; }
.reenrol-round-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.reenrol-round-head h3 { margin: 0; }
.reenrol-settings { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 0 10px; align-items: end; margin-top: 10px; }
.reenrol-settings > button { margin-bottom: 10px; }
.reenrol-page .table-wrap { margin-top: 12px; }
.reenrol-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.reenrol-acts input { width: 130px; }
.reenrol-acts select { max-width: 160px; }
@media (max-width: 640px) { .reenrol-settings { grid-template-columns: minmax(0, 1fr); } .reenrol-settings > button { justify-self: start; } }
/* Enrolments: the term and class pickers, numeric headers, the enrol card's search row, the drawer's facts line */
.enrolments-page .toolbar label.inline, .follow-ups-page .toolbar label.inline { margin: 0; max-width: 100%; }
.enrolments-page .toolbar select, .follow-ups-page .toolbar select { min-width: 0; max-width: 100%; }
.enrolments-page th.num { text-align: right; }
.enrolments-page .roster-head label.check { margin: 0; }
.enrolments-page .enrol-find { display: flex; gap: 8px; align-items: center; }
.enrolments-page .enrol-find input { flex: 1 1 auto; min-width: 0; }
.enrolments-page .enrol-find button { margin-top: 3px; flex: none; }
/* Follow-ups: the selected due tile, the kind filter, the rules-run card, the cancel confirm under its row, the drawer's row summary and snooze picks */
.follow-ups-page .summary .tile.selected { border-color: var(--navy); background: var(--navy-wash); }
.follow-ups-page .kind-filter { margin-top: 10px; }
.follow-ups-page tr.confirm-row td, .follow-ups-page tbody tr.confirm-row:hover td { background: var(--bg-2); padding: 2px 10px; }
.follow-ups-page tr.confirm-row .confirm-bar { margin: 6px 0; }
.follow-ups-page .acting-row { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--soft); }
.follow-ups-page .acting-row .detail { font-size: 13px; color: var(--fg-2); white-space: pre-wrap; margin: 4px 0; }
.follow-ups-page .form-note { margin-top: 10px; }
/* Money pages, generic: a long select (a term with its centre) shrinks on a phone instead of widening the page. */
.toolbar select { max-width: 100%; }
/* Money pages: a run's result block (invoicing, the reminder ladder), dates that do not wrap, a late figure. */
.inv-run, .chase-run { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg-2); }
.inv-run h2, .chase-run h2 { margin: 0 0 2px; font-size: 15px; }
.inv-run .summary, .chase-run .summary { margin-top: 8px; }
.inv-run .table-wrap, .chase-run .table-wrap { margin-top: 10px; }
.inv-run .actions, .chase-run .actions { margin-top: 6px; }
.inv-when, .chase-when, .auto-when { white-space: nowrap; }
.inv-due.overdue, .chase-late, .auto-failed { color: var(--neg); font-weight: 600; }
/* Invoices: the list (the balance owed in gold ink), the scope line for one family, the detail drawer with its lines, stale note and desk payment. */
.inv-scope { font-size: 13px; color: var(--fg-2); }
.inv-list .inv-ref { padding: 0; font-weight: 600; }
.inv-list td.inv-pills { white-space: nowrap; }
td.num.inv-owing { color: var(--gold-ink); font-weight: 600; }
.inv-list .row-actions a, table.payments .row-actions a { margin-left: 6px; }
.inv-detail .inv-pills { margin: 0 0 10px; }
.inv-detail .facts { margin-bottom: 12px; }
.inv-note { font-size: 13px; color: var(--fg-2); }
.inv-note button.link { padding: 0 4px; }
.inv-stale { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-ctl); padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.inv-stale ul { margin: 4px 0 0; padding-left: 18px; }
.inv-lines tfoot td { background: var(--bg-2); }
.inv-lines tfoot tr:last-child td { border-bottom: none; }
.inv-lines tfoot tr.balance td { font-weight: 700; }
.inv-detail > .actions { margin-top: 12px; }
.inv-section { margin: 20px 0 6px; }
.inv-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .inv-pay-grid { grid-template-columns: 1fr; } }
/* Reminders: the inline pause form in a queue row, the ladder card's help line. */
.chase-pause { margin-top: 8px; max-width: 360px; }
.chase-pause label.field { margin-bottom: 6px; }
.chase-pause .actions { margin-top: 0; }
.chase-ladder .table-wrap { margin: 4px 0 8px; }
.chase-help, .auto-help { margin: 10px 0 0; }
/* Bulk sends: the form beside the preview (the form first, the wider column for the result), the sample, the recipients heading, unreachable rows dimmed. */
.columns.bulk { grid-template-columns: 340px minmax(0, 1fr); }
.bulk-form .actions { margin-top: 4px; }
.bulk-result .summary { margin-top: 0; }
.bulk-sample { margin-top: 12px; }
.bulk-subject { font-weight: 600; margin: 0 0 8px; }
.bulk-result .toolbar { justify-content: space-between; margin-top: 16px; }
.bulk-heading { margin: 0; font-size: 15px; }
tr.bulk-unreachable td:first-child, tr.bulk-unreachable td:nth-child(2) { color: var(--muted); }
@media (max-width: 900px) { .columns.bulk { grid-template-columns: 1fr; } }
/* Automations: a wider form column, the as-of hint under the toolbar. */
.columns.automations { grid-template-columns: minmax(0, 1fr) 360px; }
.auto-asof-hint { margin: -2px 0 8px; }
.auto-rules td.row-actions { white-space: normal; min-width: 150px; }
/* Automations: the worker's health, head office's playbook by area, each owner's limit, a rule's steps and its skips. */
.auto-health { border-left: 3px solid var(--neg); margin: 0 0 12px; }
.auto-health p { margin: 0 0 6px; }
.auto-paused, .auto-skips, .auto-limits { margin: 4px 0 10px; padding-left: 18px; }
.auto-limits { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.auto-limit-input { width: 4.5rem; margin: 0 4px; }
.auto-steps { margin: 0; padding-left: 18px; }
.auto-area { margin: 18px 0 6px; }
.auto-playbook-form { margin-top: 14px; max-width: 34rem; }
@media (max-width: 900px) { .columns.automations { grid-template-columns: 1fr; } }
/* Comms inbox (Staff/Messages.razor, InboxComposerNotes, InboxTemplatePicker): underlined tabs with counts; list | thread | "This family"
   on a desk; inbound messages left on the surface, outbound right on the navy wash; on a phone the list, then the thread alone with a way back. */
.inbox-tabs button.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; background: none; }
.inbox-tabs .tab-count.alert { background: var(--neg-bg); color: var(--neg); }

.inbox-list, .inbox-thread, .inbox-panel { min-width: 0; }
.inbox-list .empty, .inbox-thread .empty { margin-top: 0; }

/* The thread list */
ul.inbox-threads button.thread { display: block; width: 100%; text-align: left; border: none; border-radius: 0; padding: 9px 12px; background: none; color: var(--fg); line-height: 1.4; }
ul.inbox-threads button.thread:hover { background: var(--hover); }
ul.inbox-threads li.selected button.thread { background: var(--navy-wash); }
ul.inbox-threads li.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy); }
.inbox-threads .thread-meta .pill { margin: 0; }

/* The open thread */
.inbox-thread .thread-head h2 .pill { margin: 0; font-size: 11.5px; font-weight: 500; }

/* Messages: inbound left on the surface, outbound right on the navy wash */
.inbox-msg .msg-status .pill { margin: 0; white-space: normal; text-align: left; }

/* The composer */
.inbox-composer .to { margin: -4px 0 10px; overflow-wrap: anywhere; }
.card.inbox-composer textarea { font-family: var(--sans); font-size: 14px; line-height: 1.45; min-height: 120px; }
.card.inbox-composer select.template-pick { max-width: 440px; }
.inbox-composer .composer-notes { margin: -4px 0 8px; font-size: 12px; }
.inbox-composer .composer-notes p { margin: 0 0 3px; }
.inbox-composer .composer-notes .unfilled { color: var(--warn); }
.inbox-composer .error { margin: 0 0 6px; }

/* Linking unmatched mail; finding a family for a new message */
.card.inbox-link { margin: 12px 0 0; background: var(--bg-2); }
.inbox-link .toolbar { margin: 8px 0 4px; }
ul.inbox-found { list-style: none; margin: 8px 0; padding: 0; font-size: 13px; }
ul.inbox-found li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--soft); }
ul.inbox-found li:last-child { border-bottom: none; }
ul.inbox-found .found-name { min-width: 0; overflow-wrap: anywhere; }
.inbox-pick-find label.field { flex: 1; min-width: 0; margin: 0; }

/* "This family" */
.card.inbox-panel { font-size: 13px; }
.inbox-panel .facts { margin: 0 0 8px; gap: 4px 10px; font-size: 13px; }
.inbox-panel .facts dd { min-width: 0; overflow-wrap: anywhere; }
.inbox-panel .facts dd .pill { margin: 0 0 0 6px; }
.inbox-panel .facts dd > .pill:first-child { margin-left: 0; }
.inbox-panel .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inbox-panel .panel-actions button.link { padding: 2px 0; }
.inbox-panel .panel-child.inactive { color: var(--muted); }
.inbox-panel ul.panel-classes .pill { margin: 0 0 0 4px; }
.inbox-panel ul.panel-list li > span.muted { flex: none; white-space: nowrap; }
.inbox-panel ul.panel-list .pill { margin: 0; flex: none; }
.inbox-panel ul.panel-list button.link { display: block; min-width: 0; padding: 0; text-align: left; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


@media (max-width: 900px) {
  .inbox:not(.has-open) .inbox-thread, .inbox:not(.has-open) .inbox-panel { display: none; }
}

/* ---- Visual pass: terms, reports and the tutor app ---- */
/* Shared by these pages: a card's own header row, a line that says which days are shown, a neutral callout, a bar that keeps Save in reach. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.card-head h2, .card-head h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.card-head .pill { margin: 0; }
.range-line { margin: 12px 0 8px; font-size: 13px; color: var(--fg-2); }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy-wash); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px 14px; margin: 10px 0; font-size: 13.5px; color: var(--fg); }
.toolbar label.inline { margin: 0; }
.table-wrap.after-tiles { margin-top: 14px; }
.step-buttons { display: inline-flex; gap: 6px; }
td.date { white-space: nowrap; }
p.page-hint { margin: 8px 0 10px; font-size: 13px; color: var(--muted); }
.sticky-bar .hint { margin: 0; font-size: 12.5px; color: var(--muted); }
button.block, a.button.block { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 48px; font-size: 15px; font-weight: 600; }
tr.row-form .confirm-bar { margin: 0; }
.confirm-bar input.close-note, .confirm-bar input.reason-input { flex: 1 1 240px; min-width: 0; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); }
.sticky-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 14px -16px 0; padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
.sticky-bar:last-child { margin-bottom: -14px; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.sticky-bar button { min-height: 44px; justify-content: center; }
.sticky-bar button.save { min-width: 132px; font-weight: 600; }
.sticky-status { flex: 1 1 180px; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; font-size: 13.5px; color: var(--fg-2); }
.sticky-status strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.sticky-status .pill { margin: 0; }
/* A toast would cover the Save button of a page with a sticky bar, so on those pages it sits above the bar. */
body:has(.sticky-bar) .toast-stack { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 68px); }

/* Terms and the term page: the centre headings, the state steps, the closing checklist, the week calendar */
h2.centre-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 8px; }
.columns > div > h2.centre-head:first-child { margin-top: 4px; }
h2.centre-head .pill { margin: 0; }
.card.checklist { margin: 12px 0 18px; }
.card.checklist .hint { margin: 2px 0 10px; }
.card.checklist table { margin: 0 0 8px; }
.card.checklist th.tick, .card.checklist td.tick { width: 40px; text-align: center; }
.card.checklist tr.done td:not(.tick) { color: var(--muted); }
.card.checklist tr.outstanding td.num { color: var(--neg); font-weight: 600; }
.tick-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; }
.tick-mark.ok { background: var(--pos-bg); color: var(--pos); }
.tick-mark.warn { background: var(--warn-bg); color: var(--warn); }
.tick-mark.neg { background: var(--neg-bg); color: var(--neg); }
.columns > section > h2:first-child, .columns > section > h3:first-child { margin-top: 0; }
table.term-weeks tr.current td { background: var(--navy-wash); }
table.term-weeks td .pill { margin: 0 4px 0 0; }
.plan-panel h2 { font-size: 17px; }
.plan-panel h2 .muted { font-weight: 400; }
.plan-panel .confirm-bar { margin-top: 12px; }

/* Timetable: the seven days keep their grid and scroll inside themselves; on a phone one day fills the width and the next peeks in */
.days-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 12px 0 16px; padding-bottom: 4px; }
.days { display: grid; grid-template-columns: repeat(7, minmax(148px, 1fr)); gap: 8px; min-width: 1060px; }
.day { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 8px; min-height: 120px; }
.day.empty-day { background: transparent; border-style: dashed; }
.day-title { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.day-count { font-weight: 500; font-variant-numeric: tabular-nums; }
.cls { display: grid; gap: 1px; width: 100%; margin-bottom: 6px; padding: 7px 9px; text-align: left; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-ctl); font: inherit; cursor: pointer; }
.cls:hover { background: var(--surface); border-color: var(--navy); }
.cls.editing, .cls.editing:hover { background: var(--navy-wash); border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); }
.cls.retired-cls { opacity: .55; }
.cls.retired-cls .cls-code { text-decoration: line-through; }
.cls-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cls-code { font-size: 13.5px; font-weight: 600; }
.cls-code .muted { font-weight: 400; }
.cls-meta { font-size: 12px; color: var(--fg-2); }
.cls-seats { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cls-seats.full { color: var(--fg-2); font-weight: 600; }
ul.clashes { list-style: none; display: grid; gap: 6px; margin: 12px 0 0; padding: 0; font-size: 13px; }
.clash-clear { margin: 12px 0 0; }
@media (max-width: 700px) {
  .days-wrap { scroll-snap-type: x mandatory; scroll-padding-left: 2px; }
  .days { grid-template-columns: repeat(7, 78vw); min-width: 0; }
  .day { scroll-snap-align: start; }
  .cls { padding: 10px 12px; }
}

/* Timetable by room: a sheet with a column per room and the time down the side. It scrolls inside itself both ways; the
   section and room headers stay on top and the times stay on the left. Classes sit at their time; ones sharing a room side by side. */
.rg-toolbar .spacer { flex: 1; }
.rg-wrap { overflow: auto; max-height: 72vh; margin: 8px 0 6px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overscroll-behavior: contain; }
.rg { display: grid; min-width: max-content; }
.rg-corner { position: sticky; left: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); }
.rg-sec-row { top: 0; height: 26px; background: var(--bg-2); }
.rg-head-row { top: 26px; }
.rg-section { position: sticky; top: 0; z-index: 3; height: 26px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg-2); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.rg-section.online { color: var(--navy); background: var(--navy-wash); }
.rg-head { position: sticky; top: 26px; z-index: 3; display: grid; gap: 1px; align-content: start; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.rg-room { font-size: 13px; font-weight: 600; }
.rg-sub { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rg-head.unlisted .rg-sub { color: var(--warn); }
.rg-times { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.rg-time { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.rg-time:first-child { transform: none; margin-top: 2px; }
.rg-time.hour { color: var(--fg-2); font-weight: 600; }
.rg-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--soft) 0 1px, transparent 1px var(--slot)); }
.rg-col.clickable { cursor: cell; }
.rg-col.clickable:hover { background-color: var(--bg-2); }
.rg-col.unlisted, .rg-col.placeholder { background-color: var(--bg-2); }
.rg-placeholder { position: absolute; inset: 12px 10px auto; font-size: 12.5px; color: var(--muted); }
.rg-cls { position: absolute; display: flex; flex-direction: column; align-items: stretch; gap: 1px; overflow: hidden; padding: 4px 7px; text-align: left; background: var(--navy-wash); color: var(--fg); border: 1px solid var(--line-strong); border-left: 3px solid var(--navy); border-radius: 6px; font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
.rg-cls:hover { background: var(--navy-wash); border-color: var(--navy); z-index: 1; }
.rg-cls.editing { box-shadow: 0 0 0 2px var(--ring); z-index: 1; }
.rg-cls.warn, .rg-cls.warn:hover { border-left-color: var(--gold); background: var(--gold-wash); }
.rg-cls.over, .rg-cls.over:hover { border-left-color: var(--neg); background: var(--neg-bg); }
.rg-cls.retired-cls { opacity: .55; }
.rg-cls.retired-cls .rg-code { text-decoration: line-through; }
.rg-code, .rg-meta, .rg-seats { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-code { font-weight: 600; font-size: 12.5px; }
.rg-code .muted { font-weight: 400; }
.rg-meta { color: var(--fg-2); }
.rg-seats { color: var(--muted); font-variant-numeric: tabular-nums; }
.rg-cls.full .rg-seats { color: var(--fg-2); font-weight: 600; }
.rg-cls.warn .rg-seats { color: var(--warn); font-weight: 600; }
.rg-cls.over .rg-seats { color: var(--neg); font-weight: 600; }
.rg-names { color: var(--fg-2); font-size: 11.5px; }
.rg-legend { font-size: 12.5px; margin: 4px 0 16px; }
.class-editor .hint { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 3px; }
/* The class form in the side panel over the sheet: fields laid out as they are in its card beside the day board. */
.drawer .class-editor label:not(.check) { display: block; font-size: 12px; color: var(--fg-2); margin-bottom: 10px; }
.drawer .class-editor input:not([type=checkbox]):not([type=radio]), .drawer .class-editor select { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); }

/* Week: the lesson rows, their seat chips with the mark code, the cancel and cover rows */
table.week td.when { white-space: nowrap; font-size: 13px; color: var(--fg); font-variant-numeric: tabular-nums; }
table.week td.when .muted { font-size: 12px; }
table.week td.seats { min-width: 220px; max-width: 380px; font-size: 13px; color: var(--fg); }
.seat { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--navy-wash); color: var(--navy); }
.seat.tentative { background: var(--warn-bg); color: var(--warn); }
.seat .mark-code { font-weight: 700; }
.seat-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.week tr.cancelled .seat { opacity: .6; }
.reason { max-width: 220px; margin-top: 3px; font-size: 12px; white-space: normal; }
tr.row-form td { background: var(--bg-2); }
.inline-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-edit label.inline { margin: 0; }
.inline-edit select { min-width: 200px; }

/* Attendance: the term log scrolls inside itself with the student column held; mark codes keep their colours from the tokens */
.att-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
table.att-grid { width: auto; min-width: 100%; border: none; border-radius: 0; overflow: visible; }
table.att-grid th.wk, table.att-grid td.att-cell { min-width: 34px; padding: 4px 2px; text-align: center; vertical-align: middle; }
table.att-grid th.student, table.att-grid td.student { position: sticky; left: 0; z-index: 1; white-space: nowrap; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
table.att-grid th.student { background: var(--bg-2); }
table.att-grid tbody tr:hover td.student { background: var(--hover); }
table.att-grid td.cls-cell { white-space: nowrap; }
table.att-grid .sub { font-size: 12px; color: var(--muted); }
table.att-grid button.mark { min-width: 30px; min-height: 28px; padding: 2px 4px; border: 1px solid transparent; font: inherit; font-size: 12px; font-weight: 600; line-height: 22px; cursor: pointer; }
table.att-grid button.mark:hover { border-color: var(--navy); }
table.att-grid button.mark.selected { outline: 2px solid var(--navy); outline-offset: 1px; }
table.att-grid button.mark.cancelled { background: var(--surface); color: var(--muted-2); border: 1px dashed var(--line); }
.card.roll-card-wrap { margin-top: 14px; }

/* Lesson notes for the desk: what the reminders did, a tutor's lessons, the notes form in a row */
details.outcomes { margin: 12px 0 0; font-size: 13px; }
details.outcomes summary { cursor: pointer; color: var(--fg-2); }
details.outcomes ul { margin: 6px 0 0; padding-left: 18px; }
.card.tutor-notes { margin-top: 14px; }
.card.tutor-notes .hint { margin: 0 0 8px; }
.notes-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.notes-form label { display: block; margin: 0; font-size: 12px; color: var(--fg-2); }
.notes-form label.wide { grid-column: 1 / -1; }
.notes-form input, .notes-form textarea { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); }
.notes-form textarea { min-height: 64px; resize: vertical; }
@media (max-width: 700px) { .notes-form { grid-template-columns: 1fr; } }

/* Reports: progress by class and by tutor as filter tiles, the send-all outcome, the list */
.progress-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.progress-tile { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; text-align: left; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); cursor: pointer; }
.progress-tile:hover { background: var(--surface); border-color: var(--navy); }
.progress-tile.selected, .progress-tile.selected:hover { background: var(--navy-wash); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.progress-tile .tile-label { font-size: 13.5px; font-weight: 600; }
.progress-tile .tile-detail { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-tile .tile-count { margin-top: 4px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.progress-tile .tile-count small { font-size: 12px; font-weight: 400; color: var(--muted); }
.bar { display: flex; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: var(--soft); }
.bar .done { display: block; background: var(--pos); }
.bar .doing { display: block; background: var(--navy); opacity: .5; }
.card.send-outcomes { margin: 12px 0 16px; }
.outcome-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
td.why { font-size: 12.5px; color: var(--fg-2); }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.list-head h2 { margin: 22px 0 6px; }
table.reports tr.selected td { background: var(--navy-wash); }

/* The report form: its head, the flag form, Save in reach */
.report-editor { margin: 0; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.report-head h3 { margin: 0 0 4px; font-size: 16px; }
.report-head h3 .muted { font-weight: 400; font-size: 13px; }
.report-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.report-sub .pill { margin: 0; }
.report-head button.close { min-height: 40px; }
ul.flags .pill { margin: 0; }
.report-editor .actions.sticky-bar { margin-top: 14px; }
.flag-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.flag-form label { display: block; margin: 0; font-size: 12px; color: var(--fg-2); }
.card .flag-form select, .card .flag-form input:not([type=checkbox]) { display: block; width: auto; margin-top: 3px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); }
.card .flag-form input.note { width: min(320px, 100%); }
.flag-form .actions { margin: 0; }
.flag-form + .hint { margin: 8px 0 0; }
.handover { margin: 14px 0 4px; }
.handover .handover-label { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
.handover .handover-label .muted { font-weight: 400; }
.handover textarea { display: block; width: 100%; min-height: 64px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; font-weight: 400; line-height: 1.45; background: var(--surface); color: var(--fg); resize: vertical; }
.handover .actions { align-items: center; }
.handover .error { font-size: 12px; }

/* Tutor pay: the tutor's lessons and weeks open under its row */
table.pay-tutors tr.pay-detail > td { padding: 6px 10px 14px; }
table.pay-tutors .pay-lessons, table.pay-tutors .pay-weeks table { width: 100%; }
table.pay-tutors .pay-lessons td .pill { margin: 0 0 0 4px; }
table.pay-tutors td.flags .pill { margin: 1px 4px 1px 0; }
.card table.pay-tiers input { min-width: 70px; }

/* The tutor app, designed at 375px: the day bar, lesson cards a thumb can hit, the lesson picker */
.day-bar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px auto; gap: 8px; align-items: center; max-width: 520px; margin: 12px 0 6px; }
.day-bar button { min-height: 48px; justify-content: center; font-size: 15px; }
.day-bar .day-step { padding: 0; font-size: 24px; line-height: 1; }
.day-bar .day-today { padding: 0 16px; font-weight: 600; }
.day-bar input.day-pick { width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 16px; text-align: center; background: var(--surface); color: var(--fg); }
.tally { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: 13.5px; color: var(--fg-2); }
.tally strong { margin-right: 3px; font-size: 17px; color: var(--fg); font-variant-numeric: tabular-nums; }
.lesson-stack { display: grid; gap: 12px; margin-top: 4px; }
.lesson-picker { display: flex; gap: 8px; margin: 0 0 6px; padding: 2px 2px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.lesson-chip { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; grid-template-areas: "when cls" "state state"; justify-items: start; align-items: center; gap: 3px 8px; min-width: 132px; min-height: 60px; padding: 8px 12px; text-align: left; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-card); scroll-snap-align: start; }
.lesson-chip .chip-when { grid-area: when; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lesson-chip .chip-class { grid-area: cls; font-size: 15px; font-weight: 700; }
.lesson-chip .pill { grid-area: state; margin: 0; }
.lesson-chip.selected, .lesson-chip.selected:hover { background: var(--navy-wash); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.lesson-chip.cancelled .chip-class { color: var(--muted); text-decoration: line-through; }

/* The roll: a seat per row with four big marks, More and a note behind a tap, the count and Save in the bar */
.card.roll-sheet, .card.notes-sheet { margin-top: 8px; }
.roll-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.roll-head h2 { margin: 0; font-size: 18px; }
.roll-head h2 .muted { font-size: 14px; font-weight: 400; }
.roll-head .pill { margin: 0; }
.roll-facts { margin: 4px 0 12px; font-size: 13px; color: var(--fg-2); }
.seat-list { list-style: none; margin: 0 -16px; padding: 0; border-top: 1px solid var(--line); }
.seat-row { display: grid; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.seat-row:last-child { border-bottom: none; }
.seat-row.unseated .seat-name { color: var(--muted); }
.seat-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.seat-name { font-size: 16px; font-weight: 600; }
.seat-who .pill { margin: 0; }
.seat-sub { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.mark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mark-btn { min-height: 48px; justify-content: center; padding: 6px 8px; font-size: 15px; font-weight: 500; }
.mark-btn.active { border-color: transparent; color: var(--surface); font-weight: 700; }
.mark-btn.active.attended { background: var(--pos); }
.mark-btn.active.late { background: var(--warn); }
.mark-btn.active.informed { background: var(--navy); color: var(--navy-ink); }
.mark-btn.active.uninformed { background: var(--neg); }
.seat-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.card select.mark-more { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 15px; background: var(--surface); color: var(--fg); }
.card select.mark-more.active { border-color: var(--navy); background: var(--navy-wash); color: var(--navy); font-weight: 600; }
.note-toggle { min-height: 44px; padding: 0 14px; justify-content: center; }
.seat-list input.seat-note:not([type=checkbox]) { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 16px; background: var(--surface); color: var(--fg); }
.seat-list input.seat-note:not(.shown) { display: none; }
@media (min-width: 900px) {
  .seat-row { grid-template-columns: minmax(170px, 1fr) auto minmax(150px, 190px) minmax(160px, 1fr); align-items: center; gap: 10px 12px; padding: 8px 16px; }
  .mark-grid { grid-template-columns: repeat(4, auto); gap: 6px; }
  .mark-btn { min-height: 40px; padding: 6px 12px; font-size: 13.5px; }
  .seat-more { grid-template-columns: 1fr; }
  .note-toggle { display: none; }
  .card select.mark-more { min-height: 40px; font-size: 13.5px; }
  .seat-list input.seat-note:not([type=checkbox]), .seat-list input.seat-note:not(.shown) { display: block; min-height: 40px; font-size: 14px; }
}

/* Lesson notes for the tutor: big fields, the draft line, Save in the bar */
.card.notes-sheet { max-width: 820px; }
.draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--fg-2); }
.draft-note .pill { margin: 0; }
.notes-fields { display: grid; gap: 14px; }
.card .notes-fields label { display: block; margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.card .notes-fields input:not([type=checkbox]), .card .notes-fields textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 16px; font-weight: 400; line-height: 1.45; background: var(--surface); color: var(--fg); }
.card .notes-fields textarea { min-height: 120px; resize: vertical; }
.card .notes-fields textarea[rows="6"] { min-height: 168px; }
.card .notes-fields input[type=number] { max-width: 140px; }

/* My reports: the progress, the next report to write, a class's reports as a list */
.report-progress { max-width: 640px; margin: 10px 0 12px; }
.report-progress .bar { height: 8px; margin: 0 0 8px; border-radius: 4px; }
.card.next-report { display: grid; gap: 10px; margin: 0 0 18px; }
.next-report h2 { margin: 0; font-size: 17px; }
.next-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 15px; }
.next-who .pill { margin: 0; }
.next-report .report-editor { padding: 0; border: none; background: none; }
.next-report .report-editor .sticky-bar:last-child { margin-bottom: 0; border-radius: 0; }
.class-group { margin-top: 24px; }
.class-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.class-head h2 { margin: 0; font-size: 17px; }
.class-head h2 .muted { font-size: 13.5px; font-weight: 400; }
.class-count { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.class-group > .bar { margin: 6px 0 12px; }
.topics-entry { display: grid; gap: 8px; margin: 0 0 10px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-card); }
.topics-entry label { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
.topics-entry textarea { display: block; width: 100%; min-height: 64px; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 15px; font-weight: 400; background: var(--surface); color: var(--fg); resize: vertical; }
.report-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.report-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.report-item:last-child { border-bottom: none; }
.report-item.open { background: var(--bg-2); }
.report-item.withdrawn .ri-name { color: var(--muted-2); }
.ri-main { display: grid; gap: 2px; min-width: 0; }
.ri-name { font-size: 15px; font-weight: 600; }
.ri-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ri-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ri-pills .pill { margin: 0; }
.ri-actions { display: flex; gap: 6px; }
.ri-actions button, .ri-actions a.button { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; }
.report-item > .report-editor { grid-column: 1 / -1; margin: 4px 0 2px; }

/* At phone width the tutor's fields take 16px text, so the phone does not zoom in on a tap */
@media (max-width: 700px) {
  .card .report-form input:not([type=checkbox]), .card .report-form textarea, .card .report-form select, .handover textarea, .topics-entry textarea, .card .flag-form select, .card .flag-form input:not([type=checkbox]) { font-size: 16px; }
  .report-head button.close { min-height: 44px; }
  .ri-actions { flex-direction: column; }
}
@media (min-width: 900px) {
  .lesson-stack { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .lesson-picker { flex-wrap: wrap; overflow: visible; }
}

/* ---- Visual pass: parent portal ---- */
/* The family's side wears edu-co.com.au's dress, the default for every tenant until a tenant's own colour and logo
   are swapped in: IBM Plex Sans for text and Poppins 600 for headings, a faintly warm ground, white panels, the site's
   blue (#0594de) as the action colour and its orange (#ed5b0c) for today, the active tab and nothing else. 5px
   controls, 10px cards. Emphasis is size and weight: no tinted hero cards, no icons in coloured squares, no
   upper-case labels. The status colours (pos/neg/warn) are the staff shell's, untouched, so money and attendance
   mean the same on both sides. Everything is scoped to [data-portal], which PortalLayout and SignInLayout put on
   their root, so the staff shell keeps its own tokens. Light first, then dark twice, the same three blocks as the
   top of the file. */
[data-portal] {
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading: "Poppins", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ground, panel, cards */
  --bg: #faf7f3;            /* the warm ground behind the panel, like the site's peach bands */
  --bg-2: #f6f1ea;          /* a quieter inset (a disabled field) */
  --surface: #ffffff;       /* the white content panel, fields */
  --p-card: #faf7f3;        /* a card inside the panel sits on the ground colour, as Central's portal has it */
  --soft: #f3eee8;          /* a muted chip */
  --hover: #f3eee8;
  --line: #e6ded5;          /* hairlines and card edges */
  --line-strong: #d9d0c6;   /* field borders */
  /* ink */
  --fg: #101828;
  --fg-2: #344054;
  --muted: #5b6472;
  --muted-2: #8a929e;
  --link: #046fb0;          /* the site's blue a shade deeper, so a text link passes contrast on white and on the ground */
  /* the action colour: the site's blue as a fill */
  --navy: #0594de;
  --navy-ink: #ffffff;
  --navy-wash: #e6f4fc;
  --ring: #0594de;
  /* the accent: today and the active tab */
  --p-accent: #ed5b0c;
  --p-accent-ink: #b8440a;  /* the orange as small text */
  --p-accent-wash: rgba(237, 91, 12, .1);
  /* the brand band across the top: the same navy on the sign-in pages and in the portal */
  --p-band: #0f3b56;
  --p-band-ink: #ffffff;
  --p-band-muted: rgba(255, 255, 255, .76);
  --p-band-line: rgba(255, 255, 255, .32);
  --p-band-hover: rgba(255, 255, 255, .12);
  /* a colour per child in the calendars when there is more than one (never the accent orange) */
  --p-kid-1: #0f8a7e; --p-kid-2: #7a4cc2; --p-kid-3: #c2417a; --p-kid-4: #2f6fb0; --p-kid-5: #8a6d00;
  /* geometry and elevation */
  --radius-card: 10px;
  --radius-ctl: 5px;
  --shadow-1: 0 1px 2px rgba(15, 59, 86, .06);
  --shadow-2: 0 10px 30px -18px rgba(15, 59, 86, .35);
  --p-header-shadow: 0 6px 16px -12px rgba(15, 59, 86, .35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-portal] {
    --bg: #0f141c; --bg-2: #141a23; --surface: #171e28; --p-card: #121821; --soft: #1f2733; --hover: #1f2733; --line: #2b3542; --line-strong: #38434f;
    --fg: #eef2f6; --fg-2: #c9d1db; --muted: #9aa6b5; --muted-2: #6f7b8a; --link: #5cc0f5;
    --navy: #2aa7ec; --navy-ink: #06202e; --navy-wash: #12324a; --ring: #5cc0f5;
    --p-accent: #ed5b0c; --p-accent-ink: #ff8a4c; --p-accent-wash: rgba(237, 91, 12, .16);
    --p-band: #0f3b56; --p-band-ink: #eef2f6; --p-band-muted: rgba(238, 242, 246, .72); --p-band-line: rgba(238, 242, 246, .3); --p-band-hover: rgba(238, 242, 246, .1);
    --p-kid-1: #5cc9bc; --p-kid-2: #b79cf0; --p-kid-3: #f08ab6; --p-kid-4: #8fb8e8; --p-kid-5: #e0c060;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 12px 30px -16px rgba(0, 0, 0, .6); --p-header-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] [data-portal] {
  --bg: #0f141c; --bg-2: #141a23; --surface: #171e28; --p-card: #121821; --soft: #1f2733; --hover: #1f2733; --line: #2b3542; --line-strong: #38434f;
  --fg: #eef2f6; --fg-2: #c9d1db; --muted: #9aa6b5; --muted-2: #6f7b8a; --link: #5cc0f5;
  --navy: #2aa7ec; --navy-ink: #06202e; --navy-wash: #12324a; --ring: #5cc0f5;
  --p-accent: #ed5b0c; --p-accent-ink: #ff8a4c; --p-accent-wash: rgba(237, 91, 12, .16);
  --p-band: #0f3b56; --p-band-ink: #eef2f6; --p-band-muted: rgba(238, 242, 246, .72); --p-band-line: rgba(238, 242, 246, .3); --p-band-hover: rgba(238, 242, 246, .1);
    --p-kid-1: #5cc9bc; --p-kid-2: #b79cf0; --p-kid-3: #f08ab6; --p-kid-4: #8fb8e8; --p-kid-5: #e0c060;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 12px 30px -16px rgba(0, 0, 0, .6); --p-header-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* The root: the ground, the face, phone-sized text. */
[data-portal] { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--fg); background: var(--bg); }
[data-portal] h1, [data-portal] h2, [data-portal] h3, [data-portal] .p-heading { font-family: var(--heading); font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
[data-portal] p { margin: 0; }
[data-portal] a { color: var(--link); text-underline-offset: 3px; }
[data-portal] .muted { color: var(--muted); }
[data-portal] .small { font-size: 13px; }
[data-portal] .error { color: var(--neg); }
[data-portal] .notice { color: var(--pos); }
.p-wrap { width: 100%; max-width: 768px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* The header: the brand band (logo, tenant, family, sign out), then the tabs on a white strip, underlined in orange. */
.p-header { position: sticky; top: 0; z-index: 20; box-shadow: var(--p-header-shadow); }
.p-band { background: var(--p-band); color: var(--p-band-ink); padding-top: env(safe-area-inset-top, 0px); }
.p-band :focus-visible { outline-color: var(--p-band-ink); }
.p-band-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.p-brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
[data-portal] a.p-brand { color: var(--p-band-ink); }
.p-logo { flex: none; width: 36px; height: 36px; border-radius: var(--radius-ctl); background: var(--p-band-ink); color: var(--p-band); display: grid; place-items: center; font-family: var(--heading); font-weight: 600; font-size: 14px; letter-spacing: .02em; overflow: hidden; }
.p-logo img { width: 100%; height: 100%; object-fit: contain; }
/* A brand's own logo sits on white whatever the band's colour, with a little room round it. */
.p-logo.has-image { background: #fff; padding: 2px; }
.p-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.p-tenant { font-family: var(--heading); font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-family { font-size: 13px; color: var(--p-band-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-signout { margin: 0 0 0 auto; flex: none; }
[data-portal] .p-signout button { min-height: 36px; padding: 5px 12px; font-size: 14px; font-weight: 500; background: transparent; color: var(--p-band-ink); border: 1px solid var(--p-band-line); }
[data-portal] .p-signout button:hover { background: var(--p-band-hover); }
[data-portal] .p-switch-family { margin-left: auto; flex: none; font-size: 14px; color: var(--p-band-ink); }
[data-portal] .p-switch-family + .p-signout { margin-left: 12px; }
.p-tabs { background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.p-tabs-row { position: relative; display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.p-tabs-row::-webkit-scrollbar { display: none; }
[data-portal] .p-tabs a { flex: none; padding: 13px 0 11px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
[data-portal] .p-tabs a:hover { color: var(--fg); border-bottom-color: var(--line-strong); }
[data-portal] .p-tabs a.active { color: var(--fg); border-bottom-color: var(--p-accent); }
@media (min-width: 640px) { .p-tabs-row { gap: 26px; } [data-portal] .p-tabs a { padding: 11px 0 9px; } }

/* One white panel with a defined edge, like a sheet on a desk, then the help line under it. */
.p-main { flex: 1; padding-top: 20px; padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
.p-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-2); padding: 20px 16px 24px; min-width: 0; }
.p-help { margin: 18px 4px 0; font-size: 14px; color: var(--muted); }
[data-portal] .p-help a { font-weight: 500; text-decoration: none; }
[data-portal] .p-help a:hover { text-decoration: underline; }
@media (min-width: 640px) { .p-main { padding-top: 32px; } .p-panel { padding: 28px; } }
/* The sign-in pages: the same band without tabs, a narrower panel. */
.p-gate .p-wrap.p-main { max-width: 600px; }

/* Page parts: a page is a header and sections, 28px apart. */
.p-page { display: flex; flex-direction: column; gap: 28px; }
.p-head { display: flex; flex-direction: column; gap: 12px; }
.p-head .p-eyebrow { font-size: 14px; color: var(--muted); }
[data-portal] .p-head h1 { font-size: 26px; line-height: 1.2; margin: 2px 0 0; text-wrap: balance; }
.p-head .p-summary { margin-top: 6px; font-size: 15px; color: var(--muted); max-width: 62ch; }
.p-head .p-summary strong { color: var(--fg); font-weight: 600; }
@media (min-width: 640px) { .p-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } [data-portal] .p-head h1 { font-size: 30px; } }
.p-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
[data-portal] .p-section-head h2 { font-size: 16px; line-height: 1.35; margin: 0; }
.p-section-head .p-section-action { font-size: 14px; font-weight: 500; }
[data-portal] .p-section-head a { text-decoration: none; }
[data-portal] .p-section-head a:hover { text-decoration: underline; }

/* The one card. A hairline list is the card with rows. */
.p-card { background: var(--p-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px; min-width: 0; }
a.p-card { display: block; color: var(--fg); text-decoration: none; }
a.p-card.p-row { display: flex; }
[data-portal] a.p-card { color: var(--fg); }
a.p-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.p-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
[data-portal] .p-card-title { font-size: 16px; line-height: 1.35; margin: 0; }
.p-gap { margin-top: 10px; }
.p-gap-after { margin-bottom: 16px; }
.p-stack { display: flex; flex-direction: column; gap: 12px; }
ul.p-list { list-style: none; margin: 0; padding: 0; background: var(--p-card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
ul.p-list > li { padding: 11px 16px; }
ul.p-list > li + li { border-top: 1px solid var(--line); }
.p-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.p-row .p-grow { flex: 1 1 12rem; min-width: 0; }
.p-name { font-weight: 600; }
.p-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-amount { font-family: var(--heading); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.p-label { font-size: 14px; font-weight: 500; color: var(--fg-2); }
.p-meta { font-size: 14px; color: var(--muted); }
.p-divider { border-top: 1px solid var(--line); margin: 14px 0 0; padding-top: 12px; }

/* The status chip: a small word, square-ish, in the shared status colours. */
.p-status { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: 12.5px; font-weight: 500; line-height: 1.6; white-space: nowrap; vertical-align: middle; background: var(--soft); color: var(--muted); }
.p-status.pos { background: var(--pos-bg); color: var(--pos); }
.p-status.warn { background: var(--warn-bg); color: var(--warn); }
.p-status.neg { background: var(--neg-bg); color: var(--neg); }
.p-status.accent { background: var(--p-accent-wash); color: var(--p-accent-ink); }

/* Controls: 5px corners, a thumb's height, 16px text in fields so a phone does not zoom on focus. */
[data-portal] button, [data-portal] a.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 18px; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; border-radius: var(--radius-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); text-decoration: none; cursor: pointer; }
[data-portal] button:hover, [data-portal] a.button:hover { background: var(--hover); }
[data-portal] button.primary, [data-portal] a.button.primary { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); font-weight: 600; }
[data-portal] button.primary:hover, [data-portal] a.button.primary:hover { background: var(--navy); filter: brightness(1.06); }
[data-portal] button:disabled { opacity: .55; cursor: default; filter: none; }
[data-portal] button.link { min-height: 0; padding: 0; border: none; background: none; color: var(--link); font-weight: 500; }
[data-portal] button.link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
[data-portal] .p-big { width: 100%; min-height: 50px; font-size: 16px; }
@media (min-width: 640px) { [data-portal] .p-big { width: auto; min-width: 14rem; } }
.p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
[data-portal] input:not([type=checkbox]):not([type=radio]), [data-portal] select, [data-portal] textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); }
[data-portal] textarea { resize: vertical; }
[data-portal] input:focus, [data-portal] select:focus, [data-portal] textarea:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--ring); }
[data-portal] input[type=checkbox], [data-portal] input[type=radio] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.p-field { display: block; margin: 0 0 16px; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.p-field .p-hint { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); }
[data-portal] form .error { margin: 0 0 10px; }
.p-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-size: 15px; color: var(--fg); cursor: pointer; }
/* The enrolment form's steps: where the family is, the ones done (a link back), and Back / Next at the foot. */
.p-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 4px; padding: 0; counter-reset: pstep; font-size: 14px; color: var(--muted); }
.p-steps li { display: inline-flex; align-items: center; gap: 8px; counter-increment: pstep; }
.p-steps li::before { content: counter(pstep); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); color: var(--fg-2); font-size: 12px; font-weight: 600; }
.p-steps li.now { color: var(--fg); font-weight: 600; }
.p-steps li.now::before { background: var(--navy); color: var(--surface); }
.p-steps li.done::before { content: "\2713"; background: var(--pos-bg); color: var(--pos); }
.p-steps li button.link { font: inherit; color: var(--fg-2); }
.p-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.p-step-actions .primary { order: 2; }
.p-step-now { display: none; }
.p-step-bar { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.p-step-bar > span { display: block; height: 100%; background: var(--navy); border-radius: inherit; transition: width .2s; }
/* On a phone: where they are in one line and a bar, fields one a row, the class cards one a row, and the next button full width at the
   foot of the screen, under the thumb, so a long step never hides it. Inputs at 16px so the phone does not zoom in on them. */
@media (max-width: 600px) {
    .p-steps { display: none; }
    .p-step-now { display: block; margin: 0 0 6px; font-size: 14px; color: var(--muted); }
    .p-step-now strong { color: var(--fg); }
    .p-page .p-fieldset.two { grid-template-columns: minmax(0, 1fr); }
    .p-class-cards { grid-template-columns: minmax(0, 1fr); }
    .p-step-actions { position: sticky; bottom: 0; z-index: 5; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
    .p-step-actions { flex-wrap: nowrap; }
    [data-portal] .p-step-actions button { width: auto; min-width: 0; margin: 0; }
    .p-step-actions .primary { flex: 1 1 0; min-width: 0; }
    .p-page input, .p-page select, .p-page textarea { font-size: 16px; }
}
.p-policy { margin-bottom: 12px; }
.p-policy details { margin: 4px 0 2px; }
.p-policy summary { cursor: pointer; color: var(--navy); font-size: 14px; }
.p-quote table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.p-quote td, .p-quote th { padding: 6px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.p-quote .num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.p-quote tfoot th { font-weight: 700; border-top: 2px solid var(--line-strong); }
.p-form-section { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }
[data-portal] .p-form-section h2 { font-size: 16px; margin: 0 0 14px; }
.p-fieldset { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .p-fieldset.two { grid-template-columns: 1fr 1fr; } }

/* A policy's text: its own scroll box, read in place. */
.p-policy-body { max-height: 360px; overflow-y: auto; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); font-size: 14.5px; }
.p-policy-body h1, .p-policy-body h2, .p-policy-body h3 { font-size: 15px; margin: 12px 0 4px; }
.p-policy-body p, .p-policy-body li { margin: 0 0 8px; }
[data-portal] details.p-details > summary { cursor: pointer; font-weight: 500; color: var(--link); list-style-position: inside; }
[data-portal] details.p-details[open] > summary { margin-bottom: 10px; }

/* Home: the fees-due card when something is owing, the children. */
.p-owing { border-color: var(--gold); background: var(--warn-bg); }
.p-owing-link { display: flex; align-items: center; gap: 16px; text-decoration: none; }
[data-portal] a.p-owing-link { color: var(--fg); }
[data-portal] a.p-owing-link:hover .p-chevron { color: var(--fg); }
.p-owing-link .p-grow { flex: 1; min-width: 0; }
.p-chevron { flex: none; color: var(--muted); font-size: 22px; line-height: 1; }

/* Invoices: one card each, what is owing large, the pay button wide on a phone, the payments with their receipts. */
.p-invoice { display: flex; flex-direction: column; gap: 14px; }
.p-invoice-ref { font-weight: 600; font-variant-numeric: tabular-nums; }
.p-invoice .p-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 500; }
[data-portal] .p-invoice .p-links a { text-decoration: none; }
[data-portal] .p-invoice .p-links a:hover { text-decoration: underline; }
ul.p-lines { list-style: none; margin: 0; padding: 0; font-size: 14px; }
ul.p-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
ul.p-lines li:first-child { border-top: none; }
ul.p-lines .p-sub { color: var(--muted); }
[data-portal] .p-receipt { font-weight: 500; text-decoration: none; white-space: nowrap; }
[data-portal] .p-receipt:hover { text-decoration: underline; }

/* Timetable: a week is a section, a day is a card, today edged and labelled in the accent. */
.p-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.p-filters .p-field { margin: 0; min-width: 12rem; }
.p-filters .p-check { margin: 0 0 10px; }
.p-day { padding: 0; overflow: hidden; }
.p-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
[data-portal] .p-day-head h3 { font-size: 15px; margin: 0; }
.p-day.today { border-color: var(--p-accent); box-shadow: inset 3px 0 0 var(--p-accent); }
.p-day.past { opacity: .78; }
ul.p-lessons { list-style: none; margin: 0; padding: 0; }
ul.p-lessons > li { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: 2px 14px; padding: 10px 16px; }
ul.p-lessons > li + li { border-top: 1px solid var(--line); }
ul.p-lessons .p-time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
ul.p-lessons .p-what { min-width: 0; }
ul.p-lessons .p-where { grid-column: 2; font-size: 14px; color: var(--muted); }
ul.p-lessons li.cancelled .p-time, ul.p-lessons li.cancelled .p-what > span:first-child { text-decoration: line-through; color: var(--muted); }
@media (max-width: 420px) { ul.p-lessons > li { grid-template-columns: 1fr; } ul.p-lessons .p-where { grid-column: 1; } }

/* Attendance: per child, the counts in one line, then the lessons newest first. */
.p-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--muted); }
.p-counts strong { font-family: var(--heading); font-size: 20px; font-weight: 600; color: var(--fg); margin-right: 4px; font-variant-numeric: tabular-nums; }
.p-mark-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.p-mark-row .p-when { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.p-mark-row .p-grow { flex: 1 1 10rem; min-width: 0; }
.p-note { margin-top: 2px; font-size: 14px; color: var(--muted); }

/* Reports: the list, and the report opened under its row. */
ul.p-list > li.open { background: var(--surface); }
.p-report { margin-top: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
[data-portal] .p-report h3 { font-size: 15px; margin: 18px 0 4px; }
[data-portal] .p-report h3:first-child { margin-top: 0; }
.p-report .p-prose { white-space: pre-wrap; }
.p-report .p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Next term: a card per round, a block per place, the answer controls under it. */
.p-seat { padding: 14px 0; border-top: 1px solid var(--line); }
.p-seat:first-of-type { border-top: none; padding-top: 4px; }
.p-seat .p-answer { margin-top: 10px; display: grid; gap: 10px; }
.p-seat .p-answer select, .p-seat .p-answer input { margin-top: 0; }
@media (min-width: 640px) { .p-seat .p-answer { grid-template-columns: 1fr 1fr; } .p-seat .p-answer > :first-child { grid-column: 1 / -1; max-width: 22rem; } }

/* Billing: what is owing with its Pay button, the open invoices to tick, the paid ones folded away, the receipts. */
.p-block-line { display: block; }
.p-thanks { color: var(--pos); font-weight: 500; }
[data-portal] .p-amount-md { font-size: 24px; }
.p-pay { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.p-pay-error { font-size: 14px; font-weight: 400; }
@media (max-width: 639px) { .p-pay { display: flex; width: 100%; } .p-links .p-pay { display: inline-flex; width: auto; } }
.p-check.p-pick { margin: 0; align-items: center; }
[data-portal] .p-links button.link { font-size: 14px; }
.p-invoice.chosen { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
details.p-folded > summary { margin-bottom: 0; }
details.p-folded[open] > summary { margin-bottom: 10px; }

/* Calendars (Timetable, Attendance): the view switch and the step-through, a week as seven days, a month as a grid. */
.p-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.p-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--soft); border-radius: var(--radius-ctl); }
[data-portal] .p-seg button { min-height: 34px; padding: 4px 16px; border: none; border-radius: 4px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; }
[data-portal] .p-seg button:hover { background: transparent; color: var(--fg); }
[data-portal] .p-seg button.on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); }
.p-calnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-portal] .p-calnav-step { min-width: 38px; min-height: 38px; padding: 0; font-size: 20px; line-height: 1; }
.p-calnav-label { min-width: 10.5rem; text-align: center; font-family: var(--heading); font-weight: 600; font-size: 15px; }
[data-portal] select.p-cal-filter { width: auto; min-width: 10rem; margin: 0; }
.p-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--fg-2); }
.p-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.p-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }
.p-dot.kid-1, .p-lesson.kid-1 { --kid: var(--p-kid-1); }
.p-dot.kid-2, .p-lesson.kid-2 { --kid: var(--p-kid-2); }
.p-dot.kid-3, .p-lesson.kid-3 { --kid: var(--p-kid-3); }
.p-dot.kid-4, .p-lesson.kid-4 { --kid: var(--p-kid-4); }
.p-dot.kid-5, .p-lesson.kid-5 { --kid: var(--p-kid-5); }
/* The family's word on a seat (screens.portal-quick-actions): the actions under a lesson, and the note box for an away. */
.p-lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; }
.p-away { display: grid; gap: 6px; margin-top: 6px; }
.p-away input { width: 100%; }
/* Messages with the centre (screens.portal-messages): a conversation row; then the thread as a chat, the family's bubbles on the right in the
   action colour's wash, the centre's on the left on a card, a marker between days, and the box to write in under the last message. */
.p-thread { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.p-chat { display: flex; flex-direction: column; gap: 8px; }
[data-portal] .p-chat-earlier { align-self: center; min-height: 0; margin: 0 0 4px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--link); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
[data-portal] .p-chat-earlier:hover { background: var(--hover); }
.p-chat-day { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 13px; color: var(--muted); }
.p-chat-day::before, .p-chat-day::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.p-bubble-row { display: flex; }
.p-bubble-row.mine { justify-content: flex-end; }
.p-bubble { max-width: min(82%, 36rem); padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--p-card); }
.p-bubble-row.theirs .p-bubble { border-bottom-left-radius: 6px; }
.p-bubble-row.mine .p-bubble { border-bottom-right-radius: 6px; background: var(--navy-wash); border-color: transparent; }
.p-bubble-who { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.p-bubble-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-bubble-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.p-bubble-row.mine .p-bubble-meta { text-align: right; }
/* The bar is pinned to the foot of the screen while the conversation scrolls under it, flush with the panel's edges, and sits at the
   panel's foot once everything is in view. */
.p-compose { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin: 12px -16px -24px; padding: 10px 16px max(12px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.p-compose-topic { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.p-compose-topic select { width: auto; min-width: 0; margin: 0; padding: 4px 30px 4px 12px; font-size: 14px; border-radius: 999px; }
.p-compose-bar { display: flex; align-items: flex-end; gap: 8px; }
.p-compose-bar textarea { flex: 1; min-width: 0; margin: 0; min-height: 44px; max-height: 40vh; padding: 11px 16px; border-radius: 22px; resize: none; field-sizing: content; overflow-y: auto; }
.p-compose-bar button { flex: none; min-height: 44px; margin: 0; padding: 0 20px; border-radius: 22px; }
.p-compose-note { margin: 0; font-size: 13px; }
/* The chat bubble in the corner of the home page: a tap opens Messages; the badge is how many answers wait. The page leaves it room at the foot. */
[data-portal] .p-chat-fab { position: fixed; right: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--navy-ink); box-shadow: var(--shadow-2), var(--shadow-1); text-decoration: none; }
[data-portal] .p-chat-fab:hover { filter: brightness(1.06); text-decoration: none; }
.p-chat-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--p-accent); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.p-has-fab { padding-bottom: 72px; }
.p-dot[class*="kid-"] { background: var(--kid); }

/* The week: one day per row on a phone, seven columns from 760px; today edged in the accent. */
.p-week { display: flex; flex-direction: column; overflow: hidden; background: var(--p-card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.p-wday { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.p-wday:first-child { border-top: none; }
.p-wday-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0 10px 12px; }
.p-wday-name { font-size: 13px; font-weight: 500; color: var(--muted); }
.p-wday-date { font-family: var(--heading); font-weight: 600; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p-wday-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; }
.p-wday-none { padding: 2px 0; font-size: 13px; color: var(--muted-2); }
.p-wday.free .p-wday-head { flex-direction: row; align-items: baseline; gap: 6px; padding-top: 7px; padding-bottom: 7px; }
.p-wday.free .p-wday-date { font-size: 15px; }
.p-wday.free .p-wday-body { padding-top: 7px; padding-bottom: 7px; }
.p-wday.past .p-lesson { opacity: .72; }
.p-wday.today { box-shadow: inset 3px 0 0 var(--p-accent); }
.p-wday.today .p-wday-date { color: var(--p-accent-ink); }
.p-lesson { min-width: 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--kid, var(--line-strong)); border-radius: var(--radius-ctl); font-size: 13.5px; line-height: 1.4; overflow-wrap: break-word; }
.p-lesson-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.p-lesson-subject { font-weight: 500; }
.p-lesson-meta { font-size: 12.5px; color: var(--muted); }
.p-lesson.cancelled .p-lesson-time, .p-lesson.cancelled .p-lesson-subject { color: var(--muted); text-decoration: line-through; }
.p-lesson .p-status { margin-top: 4px; white-space: normal; }
@media (min-width: 760px) {
  .p-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .p-wday { display: flex; flex-direction: column; border-top: none; border-left: 1px solid var(--line); }
  .p-wday:first-child { border-left: none; }
  .p-wday-head, .p-wday.free .p-wday-head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 8px 8px 7px; border-bottom: 1px solid var(--line); }
  .p-wday-date, .p-wday.free .p-wday-date { font-size: 17px; }
  .p-wday-body, .p-wday.free .p-wday-body { gap: 6px; padding: 8px 4px 10px; }
  .p-wday-none { display: none; }
  .p-wday.today { box-shadow: inset 0 3px 0 var(--p-accent); }
  .p-lesson { padding: 6px 5px 6px 6px; font-size: 12px; }
  .p-lesson-time { font-size: 11.5px; }
  .p-lesson-meta { font-size: 11.5px; }
}

/* The month: hairlines from the grid's own gap, each day a cell; on a phone the entries shrink to dots. */
.p-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); }
.p-month-name { padding: 6px 4px; background: var(--p-card); font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.p-mday, [data-portal] button.p-mday { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; min-width: 0; min-height: 70px; padding: 5px; background: var(--surface); color: var(--fg); text-align: left; }
[data-portal] button.p-mday { border: none; border-radius: 0; font-size: inherit; font-weight: 400; line-height: 1.3; cursor: pointer; }
[data-portal] button.p-mday:hover { background: var(--hover); }
.p-mday.other { background: var(--p-card); }
.p-mday-num { font-size: 13px; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.p-mday.other .p-mday-num { color: var(--muted-2); font-weight: 400; }
.p-mday.today, [data-portal] button.p-mday.today { box-shadow: inset 0 3px 0 var(--p-accent); }
.p-mday.today .p-mday-num { color: var(--p-accent-ink); }
.p-mday-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-entry { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--fg-2); }
.p-entry-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-entry.cancelled .p-entry-text { color: var(--muted); text-decoration: line-through; }
.p-entry.cancelled .p-dot { opacity: .45; }
.p-cell-chip { max-width: 100%; overflow: hidden; padding: 0 5px; font-size: 11px; line-height: 1.55; }
@media (max-width: 639px) {
  .p-mday, [data-portal] button.p-mday { min-height: 54px; padding: 4px 3px; }
  .p-mday-body { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .p-entry-text, .p-cell-chip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .p-month .p-status.p-cell-chip { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: currentColor; }
}

/* ---- GST and royalties (billing.fees-ledger): the month's tiles, the worked example, the owners, the tax invoices, the ledger, the setup ---- */
h2.section-title { margin: 24px 0 8px; font-size: 16px; }
.section-head h2.section-title { margin: 24px 0 8px; }
.section-head > button { align-self: center; }
.fee-example, .fee-platform { margin-top: 16px; max-width: 780px; }
.fee-example h2, .fee-platform h2 { margin: 0 0 4px; font-size: 15px; }
.fee-platform p { margin: 4px 0 0; }
table.fee-split { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
table.fee-split td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: baseline; }
table.fee-split td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
table.fee-split td.muted { font-size: 13px; }
table.fee-split td:first-child { width: 12rem; }
table.fee-split tr.total td { border-top: 1.5px solid var(--fg); font-weight: 600; }
.fee-notes { margin: 4px 0 10px; padding-left: 18px; color: var(--fg-2); font-size: 13.5px; }
table.fee-owners td, table.fee-invoices td, table.fee-ledger td { vertical-align: top; }
table.fee-invoices td .pill + .pill { margin-left: 4px; }
table.fee-ledger tr.reversal td { color: var(--muted); }
table.fee-ledger td .pill { margin-left: 4px; }
.fee-setup select { min-width: 12rem; }
.fee-setup input.pct { width: 5.5rem; text-align: right; }

/* ---- Activity (audit.log): a day's changes as a timeline, each with who and the fields from and to ---- */
.activity-filters { flex-wrap: wrap; gap: 8px 14px; }
.activity-filters label.grow { flex: 1 1 16rem; }
.activity-filters label.grow input { width: 100%; }
h2.activity-day { margin: 22px 0 6px; font-size: 14px; color: var(--fg-2); }
ol.activity { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.activity-item { border-top: 1px solid var(--line); }
.activity-item:first-child { border-top: none; }
.activity-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 1px; }
.activity-what { font-weight: 500; }
.activity-item.removed .activity-what { color: var(--neg); }
table.activity-changes { margin-top: 6px; border-collapse: collapse; font-size: 13px; }
table.activity-changes th, table.activity-changes td { padding: 3px 10px 3px 0; text-align: left; vertical-align: top; }
table.activity-changes th { font-weight: 500; color: var(--fg-2); white-space: nowrap; }
table.activity-changes td.from { color: var(--muted); text-decoration: line-through; }
table.activity-changes td.arrow { color: var(--muted); }

/* ---- Ledger (ledger.reports): statements, the trial balance, journals as small balanced tables ---- */
.ledger-statement { max-width: 640px; }
.ledger-statement h2 { margin: 18px 0 6px; font-size: 15px; }
table.ledger-pl, table.ledger-account { width: 100%; border-collapse: collapse; }
table.ledger-pl td, table.ledger-account td, table.ledger-account th { padding: 6px 8px; border-top: 1px solid var(--line); }
td.code { width: 3.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ledger-total { display: flex; justify-content: space-between; margin: 6px 0 0; padding: 6px 8px; border-top: 1.5px solid var(--fg); }
.ledger-total.net { margin-top: 14px; font-size: 16px; border-top-width: 2px; }
table.ledger-tb tfoot td { font-weight: 600; border-top: 1.5px solid var(--fg); }
article.journal { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
article.journal header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.journal-date { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5rem; }
article.journal table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
article.journal td { padding: 3px 6px; border-top: 1px solid var(--line); }
.ledger-exports { margin-top: 14px; max-width: 820px; }
.ledger-exports h2 { margin: 0 0 6px; font-size: 15px; }
.ledger-exports ol { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ledger-opening { margin-top: 14px; max-width: 720px; }
.ledger-opening h2 { margin: 0 0 6px; font-size: 15px; }
.ledger-opening table { margin: 10px 0 4px; }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 12px; }
.features h2 { margin: 0 0 8px; font-size: 15px; }
label.check.feature { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
label.check.feature > span { display: flex; flex-direction: column; gap: 2px; }
label.check.feature input { margin-top: 3px; }
.class-switches { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }

/* ---- The tutor app (TutorLayout and My classes): the portal's dress, a wider panel, and the week and month calendars ---- */
/* The shell is the portal's: [data-portal] tokens, the band, the tabs, the white panel. Only the width and the band's right side are
   the tutor app's. A lesson's state has one colour wherever it shows (a card's edge, a calendar block's edge, a dot): due is the warn
   colour, coming up the action blue, done the pos green, cancelled grey. The staff pages the tutor app shares (the roll, the notes,
   the reports) keep their own components; the few rules at the end let them sit in the portal's dress. */
.tutor-app .p-wrap { max-width: 1080px; }
.t-band-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: none; }
.t-band-actions .p-signout { margin: 0; }
[data-portal] a.t-staff-link { color: var(--p-band-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
[data-portal] a.t-staff-link:hover { text-decoration: underline; }
@media (max-width: 520px) { .t-staff-link { display: none; } }

.st-due { --state: var(--warn); }
.st-upcoming { --state: var(--navy); }
.st-done { --state: var(--pos); }
.st-cancelled { --state: var(--muted-2); }
.t-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--state, var(--muted-2)); }
.t-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* Today: a card per lesson, its state on the left edge, Roll and Notes side by side with the one due next filled. */
.t-today { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.t-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 16px; background: var(--p-card); border: 1px solid var(--line); border-left: 4px solid var(--state, var(--line-strong)); border-radius: var(--radius-card); }
.t-card-top { display: flex; align-items: center; gap: 8px; }
.t-card-time { margin-right: auto; font-family: var(--heading); font-weight: 600; font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; }
[data-portal] .t-card-class { margin: 0; font-size: 17px; line-height: 1.35; }
.t-card-class .muted { font-family: var(--sans); font-weight: 400; font-size: 14.5px; }
.t-card-status { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--muted); }
.t-card-status > span { display: inline-flex; align-items: center; gap: 6px; }
.t-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.t-card.st-cancelled .t-card-time, .t-card.st-cancelled .t-card-class { color: var(--muted); text-decoration: line-through; }

/* To catch up: one row per earlier lesson still owing a roll or notes, its actions on the right. */
.t-catchup .t-catchup-do { display: flex; flex-wrap: wrap; gap: 8px; }
.t-catchup li.p-row { align-items: center; }
[data-portal] .t-catchup a.button { min-height: 36px; padding: 5px 12px; font-size: 14px; }

/* The calendar's lessons are buttons that open the lesson in the drawer; they take the portal block's look, not a button's. */
[data-portal] button.t-cal { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1px; width: 100%; min-height: 0; padding: 8px 10px; text-align: left; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--state, var(--line-strong)); border-radius: var(--radius-ctl); cursor: pointer; }
[data-portal] button.t-cal:hover { background: var(--hover); border-color: var(--line-strong); border-left-color: var(--state, var(--line-strong)); }
.t-cal > span { display: block; min-width: 0; overflow-wrap: anywhere; }
.t-cal > span.t-cal-state { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--fg-2); }
.t-cal.st-cancelled .p-lesson-time, .t-cal.st-cancelled .p-lesson-subject { color: var(--muted); text-decoration: line-through; }
.p-wday.past .t-cal { opacity: .78; }
@media (min-width: 760px) {
  [data-portal] button.t-cal { padding: 6px 6px 7px 7px; font-size: 12.5px; }
  .t-cal > span.t-cal-state { font-size: 11.5px; }
  .tutor-app .p-wday-body { min-height: 84px; padding: 8px 6px 10px; }
}
.t-entry .t-dot { width: 7px; height: 7px; }

/* The lesson drawer: when, the facts as a two-column list, the two actions side by side. */
.t-detail { display: flex; flex-direction: column; gap: 18px; }
.t-detail-when { font-family: var(--heading); font-weight: 600; font-size: 18px; line-height: 1.4; }
.t-facts { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 9px 12px; margin: 0; font-size: 14.5px; }
.t-facts dt { color: var(--muted); }
.t-facts dd { margin: 0; min-width: 0; }
.t-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* The shared tutor pages in the portal's dress: the page title as the portal sets it, the day bar and lesson chips kept as they were. */
.tutor-app .page-head { margin-bottom: 16px; }
[data-portal] .page-head h1 { font-size: 26px; line-height: 1.2; text-wrap: balance; }
.tutor-app .page-head .lede { font-size: 15px; max-width: 64ch; }
@media (min-width: 640px) { [data-portal] .page-head h1 { font-size: 30px; } }
[data-portal] .day-bar input.day-pick:not([type=checkbox]):not([type=radio]) { display: block; margin-top: 0; min-height: 48px; padding: 8px 10px; text-align: center; }
[data-portal] .day-bar button { min-height: 48px; }
[data-portal] button.lesson-chip { display: grid; justify-content: start; min-height: 60px; padding: 8px 12px; font-size: inherit; font-weight: 400; line-height: 1.35; border-color: var(--line); border-radius: var(--radius-card); }
[data-portal] button.lesson-chip.selected, [data-portal] button.lesson-chip.selected:hover { background: var(--navy-wash); border-color: var(--navy); }

/* Students: the list for a term, its filters in the address, and the money columns. */
.roster-toolbar input[type=search] { min-width: 260px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13.5px; background: var(--surface); color: var(--fg); }
.roster-toolbar .spacer, .hub-bar .spacer, .drawer .actions .spacer { flex: 1; }
.roster-filters { display: grid; gap: 10px; margin: 8px 0 12px; padding: 12px 14px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-row input, .filter-row select { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); color: var(--fg); }
.filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); min-width: 64px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; line-height: 1.4; }
.chip.on, .chip.on:hover { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
.amount-filter { display: inline-flex; align-items: center; gap: 4px; }
.amount-filter input { width: 90px; }
.amount-filter .dollar { color: var(--muted); }
table.roster td.owing, table.hub-invoices td.owing { color: var(--neg); font-weight: 600; }
table.roster tr.inactive td { opacity: .6; }
table.roster a.name { font-weight: 600; }
table.roster .empty-row { text-align: center; padding: 28px 8px; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; color: var(--muted); }
.pager-steps { display: inline-flex; align-items: center; gap: 10px; }
.mono { font-family: var(--mono); font-size: .92em; }
.neg { color: var(--neg); }
.pos { color: var(--pos); }

/* The student's page: who and the money first, then the working cards in two packed columns and the timeline beside them. */
.hub-head { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 14px 16px; margin: 4px 0 14px; }
.hub-who { flex: 1 1 420px; min-width: 0; display: grid; gap: 8px; }
.hub-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-bar .back { font-size: 13px; color: var(--muted); text-decoration: none; }
.hub-bar .back:hover { color: var(--fg); text-decoration: underline; }
.hub-title h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.hub-title p { margin: 2px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.hub-contacts { display: grid; gap: 2px; font-size: 13.5px; color: var(--fg-2); }
.hub-contacts p { margin: 0; overflow-wrap: anywhere; }
.hub-contacts strong { color: var(--fg); font-weight: 600; }
.hub-siblings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--soft); }
.sibling { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--fg); text-decoration: none; }
.sibling:hover { background: var(--hover); }
.sibling.inactive { opacity: .6; }
.family-money { margin-bottom: 18px; }
.family-money .table-wrap { margin-bottom: 4px; }
table.family-invoices th.num { text-align: right; }
table.family-invoices td.row-actions { text-align: right; white-space: nowrap; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hub-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hub-col { display: grid; gap: 14px; min-width: 0; }
.hub-col .card, .hub-timeline { margin: 0; min-width: 0; }
.card-sub { margin: 10px 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-size: 13.5px; }
.hub-list li > div { grid-column: 1; min-width: 0; }
.hub-list li > .pill { grid-column: 2; grid-row: 1 / span 2; }
.hub-list.compact li { display: flex; justify-content: space-between; gap: 8px; }
.hub-list .amount { font-variant-numeric: tabular-nums; }
.att-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.att-class { min-width: 64px; font-size: 12.5px; font-weight: 600; }
.att-weeks { display: flex; flex-wrap: wrap; gap: 3px; }
.hub-timeline { display: grid; gap: 10px; align-content: start; }
.note-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 14px; background: var(--surface); color: var(--fg); resize: vertical; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl-item { padding: 9px 0 9px 12px; border-left: 2px solid var(--line); border-bottom: 1px solid var(--soft); }
.tl-item.tl-note { border-left-color: var(--gold); }
.tl-item.tl-email_in { border-left-color: var(--link); }
.tl-item.tl-email_out, .tl-item.tl-sms { border-left-color: var(--navy); }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-title { font-size: 13.5px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.tl-detail { font-size: 13px; color: var(--fg-2); margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .hub-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .hub-cards { grid-template-columns: minmax(0, 1fr); } .roster-toolbar input[type=search] { min-width: 0; flex: 1 1 100%; } }
.hub-list.invoices li { grid-template-columns: minmax(0, 1fr) auto; }
.hub-list .inv-side { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 2px; }
.list-audience { margin: 0 0 12px; }
.list-audience .actions { margin: 0; }
/* The filter row's fields sit inline, whatever a card's form fields do elsewhere. */
.card.roster-filters .filter-row input, .card.roster-filters .filter-row select { display: inline-block; width: auto; min-width: 150px; margin-top: 0; padding: 5px 8px; font-size: 13px; }
.card.roster-filters .amount-filter input { min-width: 0; width: 90px; }
.card.roster-filters .amount-filter select { min-width: 0; }

/* Payments: the desk's list, and the family picker in the record panel. */
table.payments td.nowrap { white-space: nowrap; }
.pick-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pick-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13.5px; }

/* Direct debit: a plan per row, its progress, and its instalments folded under it. */
table.plans tr.attention > td { background: var(--neg-bg); }
table.plans tr.instalments > td { background: var(--bg-2); padding: 8px 12px; }
table.plans tr.instalments table { width: 100%; font-size: 13px; }
.progress { width: 120px; height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; margin-bottom: 2px; }
.progress span { display: block; height: 100%; background: var(--pos); }
.settings-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

/* Credits on the family page */
ul.credit-list li { align-items: flex-start; }
ul.credit-list .credit-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
ul.credit-list .credit-what > button.link { align-self: flex-start; padding: 0; }
ul.credit-list .amount { display: flex; flex-direction: column; align-items: flex-end; }
ul.credit-list .credit-left { font-weight: 400; }
ul.credit-list li.withdrawn .amount { text-decoration: line-through; color: var(--muted); }
ul.credit-list .confirm-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.credit-waiting { margin: 0 0 6px; }

/* Make-ups: the staff page, the student card, the portal's booking steps */
table.makeups td.row-actions { white-space: nowrap; }
table.makeups .seat-count { font-variant-numeric: tabular-nums; margin-right: 6px; }
.toolbar.sub { margin-top: -4px; }
ul.pick-list.radio li label { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
ul.pick-list.radio li input { flex: none; }
.quote { margin: 4px 0 10px; }
.mu-label { margin: 10px 0 2px; font-weight: 600; color: var(--fg-2); }
.p-done { border-color: var(--pos); background: var(--pos-bg); color: var(--fg); }
.p-choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .p-choices { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }
.p-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); cursor: pointer; min-width: 0; }
.p-choice > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-choice.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.p-review { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.p-review p { margin: 0; }

/* Holiday programmes */
.course-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.card.course { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card.course p { margin: 0; }
.card.course .card-head h3 .muted { font-weight: 400; }
.card.course .actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
ul.session-strip { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
ul.session-strip li { display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
ul.session-strip li .sd-day { font-weight: 600; }
ul.session-strip li .sd-seats { color: var(--muted); }
ul.session-strip li.full { border-color: var(--warn); background: var(--warn-bg); }
ul.session-strip li.cancelled { opacity: .5; text-decoration: line-through; }
.day-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 4px 10px; margin: 4px 0; }
.day-picks label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }
.day-picks label.weekend { color: var(--muted); }
ul.roster-list li { align-items: flex-start; }
ul.p-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
ul.p-days li { display: flex; flex-direction: column; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); min-width: 5.5rem; }
ul.p-days li.full { background: var(--soft); }
.p-course .p-card-top .p-num { font-weight: 600; }

/* The online enrolment form: subjects, lesson modes and days as tick-chips */
.p-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.p-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 14px; cursor: pointer; }
.p-tag.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
[data-portal] .p-tag input[type=checkbox], [data-portal] .p-tag input[type=radio] { margin: 0; }
.p-form-section .p-choices { margin-bottom: 14px; }
/* The enrolment form's class picker: subjects for the year as chips with counts, then each subject's classes as compact cards. */
.p-next-hint { margin: 2px 0 14px; padding: 10px 12px; border-radius: var(--radius-ctl); background: var(--soft); }
.p-subjects .p-tag { padding: 5px 10px; font-size: 13.5px; }
.p-count { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 600; text-align: center; color: var(--fg-2); }
.p-tag.on .p-count { background: var(--navy); color: var(--surface); }
.p-classes-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 6px; }
.p-class-subject { margin: 10px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--fg-2); }
.p-class-cards .p-choice { padding: 9px 12px; }
.p-class-cards .p-choice .p-name { font-size: 14.5px; }
.p-class-cards .p-choice.full { opacity: .72; }
.p-few { color: var(--warn); font-weight: 600; }
.form-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -6px 0 12px; }
.form-links .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; user-select: all; }

/* The HQ overview */
.overview-owner { margin-top: 18px; }
.overview-owner h2 { display: flex; align-items: center; gap: 8px; }
table.overview tr.total td { font-weight: 600; border-top: 2px solid var(--line-strong); }

/* Platform overview: income by month as stacked columns (base fees at the baseline, then transaction fees, then SMS). Columns are capped
   thin, the data end is rounded and the baseline square, a 2px surface gap parts the segments, and the whole column is the hover target. */
.income-chart { margin-top: 16px; }
.income-chart .section-head { flex-wrap: wrap; gap: 8px 16px; }
.ic-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--fg-2); }
.ic-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ic-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ic-key.base { background: var(--series-1); }
.ic-key.fees { background: var(--series-2); }
.ic-key.sms { background: var(--series-3); }
.ic-plot { position: relative; height: 180px; margin: 22px 0 34px 52px; }
.ic-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--soft); }
.ic-grid span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.ic-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; border-radius: 6px 6px 0 0; }
.ic-col:hover, .ic-col:focus-visible { background: var(--hover); }
.ic-col:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.ic-stack { position: relative; display: flex; flex-direction: column-reverse; gap: 2px; width: min(24px, 62%); }
.ic-seg { min-height: 1px; }
.ic-seg:nth-last-child(2) { border-radius: 4px 4px 0 0; } /* the top segment: the tip is always the stack's last child */
.ic-seg.base { background: var(--series-1); }
.ic-seg.fees { background: var(--series-2); }
.ic-seg.sms { background: var(--series-3); }
.ic-x { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.ic-x small { display: block; font-size: 10.5px; color: var(--muted-2); }
.ic-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: 240px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); box-shadow: var(--shadow-2); font-size: 12px; color: var(--fg-2); text-align: left; }
.ic-col:hover .ic-tip, .ic-col:focus-visible .ic-tip { display: grid; gap: 3px; }
.ic-col:first-child .ic-tip, .ic-col:nth-child(2) .ic-tip { left: 0; transform: none; }
.ic-col:last-child .ic-tip, .ic-col:nth-last-child(2) .ic-tip { left: auto; right: 0; transform: none; }
.ic-tip strong { color: var(--fg); font-size: 12.5px; }
.ic-tip span { display: flex; align-items: center; gap: 6px; }
.ic-tip b { margin-left: auto; padding-left: 12px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-tip .ic-total { border-top: 1px solid var(--soft); padding-top: 3px; }
.ic-tip em { font-style: normal; color: var(--muted); font-size: 11.5px; white-space: normal; }
table.overview td.nowrap { white-space: nowrap; }
table.platform-tenants td:first-child { min-width: 230px; }
table.platform-tenants td:last-child { min-width: 120px; }
@media (max-width: 640px) { .ic-plot { margin-left: 44px; } .ic-x { font-size: 10px; } }
.warn-text { color: var(--warn); }

/* ---- Tutor availability: the clash list, and each tutor's day as a bar of hours with classes on it ---- */
.av-issues, .av-board { margin-top: 18px; }
.issue-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.issue-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.issue-list .pill { flex: none; }
.issue-detail { flex: 1 1 320px; min-width: 0; }
.issue-actions { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.av-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: 12.5px; color: var(--fg-2); }
.av-legend li { display: inline-flex; align-items: center; gap: 6px; }
.av-legend .sw { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.av-table td { vertical-align: top; }
.av-who { min-width: 150px; }
.av-table tr.av-inactive .av-who strong { color: var(--muted); }
.av-who .pill { margin-left: 4px; }
.av-who .small { display: block; }
.av-away { display: inline-block; margin: 4px 4px 0 0; padding: 1px 7px; border-radius: 999px; font-size: 12px; background: var(--neg-bg); color: var(--neg); white-space: nowrap; }
.av-day .av-scale { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.av-cell { min-width: 140px; }
.av-strip { position: relative; height: 10px; margin: 2px 0 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.av-strip span { position: absolute; top: 0; bottom: 0; }
.av-slot { border-radius: 2px; outline: 1px solid var(--surface); }
.av-win, .sw.win { background: color-mix(in srgb, var(--pos) 32%, transparent); }
.av-slot.here, .sw.here, .av-meter .here { background: var(--navy); }
.av-slot.elsewhere, .sw.elsewhere, .av-meter .elsewhere { background: repeating-linear-gradient(135deg, var(--navy) 0 2px, transparent 2px 5px); }
.sw.elsewhere { border: 1px solid var(--navy); }
.av-slot.outside, .sw.outside { background: var(--gold); }
.av-slot.clash, .sw.clash { background: var(--neg); }
.av-hours { font-size: 12px; color: var(--muted); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.av-chip { display: inline-block; margin: 2px 4px 0 0; padding: 1px 7px; border-radius: 999px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.av-chip.here { background: var(--navy-wash); color: var(--navy); }
.av-chip.elsewhere { border: 1px dashed var(--navy); color: var(--fg-2); }
.av-chip.outside { background: var(--warn-bg); color: var(--warn); }
.av-chip.clash { background: var(--neg-bg); color: var(--neg); }
.av-week { min-width: 110px; }
.av-meter { display: flex; height: 6px; margin: 4px 0 2px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.away-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.away-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.away-list .cover-need { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.window .dates { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }

/* ---- Tags and custom fields ---- */
.tag-chip { display: inline-flex; align-items: center; gap: 3px; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.tag-chip.tag-navy { background: var(--navy-wash); color: var(--navy); }
.tag-chip.tag-green { background: var(--pos-bg); color: var(--pos); }
.tag-chip.tag-gold { background: var(--gold-wash); color: var(--gold-ink); }
.tag-chip.tag-red { background: var(--neg-bg); color: var(--neg); }
.tag-chip.tag-purple { background: var(--chip-follow-bg); color: var(--chip-follow); }
.tag-chip.tag-grey { background: var(--soft); color: var(--fg-2); }
.tag-chip.retired { text-decoration: line-through; opacity: .7; }
.tag-x { border: 0; background: none; padding: 0 0 0 2px; font: inherit; line-height: 1; color: inherit; cursor: pointer; opacity: .7; }
.tag-x:hover, .tag-x:focus-visible { opacity: 1; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tag-add, .tag-these, .card .tag-row select.tag-add { width: auto; min-width: 0; padding: 2px 8px; font-size: 12.5px; margin: 0; }
.tags-fields .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field-list { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 14px; margin: 12px 0 4px; font-size: 13.5px; }
.field-list dt { color: var(--muted); }
.field-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.field-form { display: grid; gap: 10px; margin-top: 12px; }
.field-form label { display: grid; gap: 3px; }
.field-error { color: var(--neg); margin: 6px 0 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px 12px; border: 0; padding: 0; margin: 8px 0; }
.swatches legend { font-size: 13px; color: var(--fg-2); margin-bottom: 4px; padding: 0; }
.swatches .swatch { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; }
.swatches .swatch input { width: auto; margin: 0; }
table.roster td .tag-chip, table.families td .tag-chip { margin-left: 6px; font-size: 11.5px; }

/* ---- Desk safeguards: the price before a seat is saved, the review before a payment ---- */
.desk-payment .confirm-bar { flex-wrap: wrap; }
table.taken-back td { color: var(--fg-2); }
.family-list li .button.small { padding: 2px 10px; font-size: 12.5px; margin-left: 8px; }

/* ---- Bank statements: each line checked by a person ---- */
.bank-line.open { border-color: var(--navy); box-shadow: var(--shadow-1); }
.bank-line.open .bank-line-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bank-warn { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); }
.bank-check .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bank-check .confirm-bar { flex-wrap: wrap; }
table.bank-alloc input.amount { width: 110px; text-align: right; margin: 0; }
ul.bank-found .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-add .card h2, .bank-imports h2 { margin-top: 0; }
.bank-preview tr.out td, .bank-preview tr.already td { color: var(--muted); }
.bank-preview tr.problem td { color: var(--neg); }


/* ---- Week: lessons on the room sheet ---- */
/* A lesson keeps its subject's colour; its roll shows by the seats (rg-roll) and, while it is still to mark, as an amber ring. */
.rg-cls.subj.lesson-unmarked { box-shadow: inset 0 0 0 1.5px var(--gold); }
.rg-cls.subj.lesson-cancelled, .rg-cls.subj.lesson-cancelled:hover { border-left-color: var(--muted-2); background: var(--soft); color: var(--muted); box-shadow: none; }
.rg-cls.lesson-cancelled .rg-code { text-decoration: line-through; }
h3.week-day { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 6px; }
h3.week-day .pill { font-size: 11px; }
.lesson-detail { display: flex; flex-direction: column; gap: 10px; }
.lesson-detail p { margin: 0; }
.lesson-detail .seats { font-size: 13px; }
.lesson-detail h4 { margin: 10px 0 0; }
/* The roll inside the Week page's side panel: the narrow layout, and no second heading (the panel says which lesson). */
.lesson-detail .roll-head, .lesson-detail .roll-facts { display: none; }
.drawer .seat-row { grid-template-columns: 1fr; gap: 8px; padding: 10px 16px; }
.drawer .mark-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.drawer .mark-btn { min-height: 40px; font-size: 14px; }
/* Each day's table lines up with the next. */
table.week.by-day { table-layout: fixed; width: 100%; min-width: 860px; }
table.week.by-day col.c-time { width: 100px; }
table.week.by-day col.c-class { width: 18%; }
table.week.by-day col.c-tutor { width: 13%; }
table.week.by-day col.c-room { width: 14%; }
table.week.by-day col.c-status { width: 14%; }
table.week.by-day col.c-actions { width: 190px; }
table.week.by-day td.seats { min-width: 0; max-width: none; }

/* ---- Today: what needs a person, then the classes, then the money ---- */
.page-actions .today-nav { display: inline-flex; align-items: center; gap: 4px; }
.page-actions .today-nav input[type=date] { width: auto; margin: 0; }
.today-todo h2, .today-classes h2, .today-numbers h2 { margin: 18px 0 8px; font-size: 16px; }
.today-classes h2 .muted.small { font-weight: 400; margin-left: 6px; }
.all-clear { margin: 0; padding: 12px 14px; border-radius: var(--radius-card); background: var(--pos-bg); color: var(--pos); font-weight: 600; }
ul.todo-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
ul.todo-list li + li { border-top: 1px solid var(--line); }
ul.todo-list a { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 14px; color: var(--fg); text-decoration: none; }
ul.todo-list a:hover { background: var(--hover); }
.todo-count { font-size: 20px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }
ul.todo-list li.urgent .todo-count { color: var(--neg); }
.todo-what { font-weight: 600; white-space: nowrap; }
.todo-detail { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-go { color: var(--muted-2); font-size: 18px; }
@media (max-width: 640px) {
  ul.todo-list a { grid-template-columns: 36px minmax(0, 1fr) 16px; }
  .todo-detail { grid-column: 2; grid-row: 2; white-space: normal; }
  .todo-go { grid-row: 1 / span 2; grid-column: 3; }
}
/* Reminders without the ladder panel (the front desk): the queue takes the width. */
.columns.chases:not(:has(.chase-ladder)) { grid-template-columns: minmax(0, 1fr); }
.family-reminders { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.family-reminders p { margin: 0 0 6px; }
.family-reminders .confirm-bar { flex-wrap: wrap; }
.people-switch { margin: 0 0 12px; }
.layout-brand { margin-bottom: 16px; }
.layout-brand-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.colour-pick { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.brand-logo-tile { display: grid; place-items: center; width: 56px; height: 56px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: #fff; }
.brand-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo-pick label.button { position: relative; cursor: pointer; }
.colour-pick input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.layout-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 4px; }
.layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .layout-grid { grid-template-columns: 1fr; } }
textarea.layout-html { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; }

/* ---- Follow-ups list: full width, one row per thing to do ---- */
li.fu-row.overdue .fu-due { color: var(--neg); }
li.fu-row.closed { opacity: .7; }
.fu-detail { font-size: 13px; color: var(--fg-2); margin-top: 2px; white-space: pre-wrap; }
.fu-confirm { grid-column: 1 / -1; }

.drawer .card.follow-up-form { border: none; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.pill.makeup-tag { margin-left: 6px; font-size: 11px; background: var(--chip-follow-bg); color: var(--chip-follow); }
table.att-grid button.mark.makeup-seat { outline: 1px dashed var(--chip-follow); outline-offset: 1px; }
.toolbar.inv-filters { flex-wrap: wrap; gap: 8px 14px; margin-top: -4px; }
.toolbar.fam-filters { flex-wrap: wrap; gap: 8px 12px; margin-top: -4px; }
table.families a.owes { color: var(--gold-ink); font-weight: 600; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.summary.glance { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.today-glance { margin-bottom: 18px; }
/* ---- Direct-debit messages to families: what a plan's family heard, under its instalments ---- */
table.plans .plan-notices { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
table.plans .plan-notices h4 { margin: 0 0 6px; font-size: 13px; }
table.plans .plan-notices p { margin: 0; }
table.plans .plan-notices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
table.plans .plan-notices li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
/* ---- Bulk sends scheduled ahead, with attachments ---- */
.bulk-form div.field { font-size: 12px; color: var(--fg-2); margin-bottom: 10px; }
.bulk-form div.field .field-label { display: block; margin-bottom: 4px; }
.bulk-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bulk-when label.field { flex: 1 1 140px; margin-bottom: 0; }
.bulk-when .actions { display: inline-flex; gap: 8px; }
ul.bulk-files { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
ul.bulk-files li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
ul.bulk-files li + li { border-top: 1px solid var(--line); }
.bulk-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.bulk-files button.link { padding: 0; }
.bulk-booked h3 { margin-top: 0; }
.bulk-scheduled { margin-top: 24px; }
.bulk-scheduled .toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.bulk-scheduled td.nowrap { white-space: nowrap; }
.bulk-scheduled td.actions { text-align: right; }
.bulk-scheduled td.actions button.link { padding: 0 0 0 10px; }
.bulk-scheduled tr.bulk-done td { color: var(--muted); }
.bulk-scheduled tr.bulk-move td { background: var(--hover); }
@media (max-width: 640px) { .bulk-scheduled td.actions { text-align: left; } }
/* ---- Morning notice: the centre's email to its staff each morning, previewed for any day ---- */
.morning-notice-state { margin: 0 0 8px; }
.morning-notice-state.sent { color: var(--pos); }
.morning-notice-state.quiet { color: var(--muted); }
.morning-notice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 4px; }
iframe.preview.morning-notice { height: 560px; }
pre.morning-notice-text { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; padding: 12px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.morning-notice-settings { margin-top: 16px; max-width: 640px; }
.morning-notice-recipients { margin: 0 0 12px; padding-left: 18px; }
.morning-notice-recipients li { margin: 2px 0; }
/* ---- Online classes and calendar feeds (terms.online-classes) ---- */
/* The Join link on a lesson: in the portal and tutor calendars, on the roll, in the Week drawer. */
.p-join { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.p-lesson.cancelled .p-join { display: none; }
a.join-link { font-weight: 600; color: var(--link); }
a.join-link.small { display: block; font-size: 12.5px; }
.lesson-online { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.lesson-online .join-url { overflow-wrap: anywhere; }
.t-card-join { margin: 8px 0 0; }
.t-card-join .button { display: flex; justify-content: center; }
/* "Add to my calendar": the subscribe buttons, the address to copy, and a new address behind a confirm. */
.cal-sub { display: grid; gap: 12px; }
.cal-sub > p { margin: 0; }
.cal-sub-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-sub-buttons .button { display: inline-flex; align-items: center; min-height: 40px; }
.cal-sub-copy { display: flex; gap: 8px; min-width: 0; }
.cal-sub-copy input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); color: var(--fg); }
.cal-sub-copy button { flex: none; }
.cal-sub-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface); }
.cal-sub-confirm p { flex: 1 1 100%; margin: 0; }
.cal-sub .link { justify-self: start; }
@media (max-width: 640px) {
  .cal-sub-buttons .button { flex: 1 1 100%; justify-content: center; }
  .cal-sub-copy { flex-direction: column; }
}
/* ---- Whole-portal switch (screens.portal-switch): Settings › Parent portal, the dashboard banner, the portal's closed page ---- */
.portal-closed-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.portal-closed-banner p { margin: 0; flex: 1 1 320px; min-width: 0; }
.portal-closed-actions { display: inline-flex; align-items: center; gap: 12px; }
.card.portal-switch { margin-bottom: 14px; }
.card.portal-switch .card-head h2 { font-size: 16px; }
.portal-switch-state { margin: 4px 0 8px; color: var(--fg-2); }
.portal-switch-message { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--surface); color: var(--fg); white-space: pre-line; }
.card.portal-switch textarea { min-height: 72px; font: inherit; font-size: 14px; line-height: 1.4; }
.card.portal-switch input[type=datetime-local] { max-width: 260px; }
.portal-switch-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; }
.portal-switch-form .actions { margin-top: 8px; }
.p-closed .p-summary { white-space: pre-line; }
/* ---- AI drafts and report writer (messaging.ai-drafts, reports.writer) ---- */
button.ai-draft-btn { border-style: dashed; }
.ai-note { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-card); background: var(--warn-bg); color: var(--fg); font-size: 13.5px; }
.ai-note p { margin: 0 0 4px; }
.ai-note p .pill { margin-right: 6px; }
.ai-note ul { margin: 2px 0 6px; padding-left: 18px; }
.ai-note li { margin: 2px 0; }
.report-ai { margin: 0 0 12px; }
.inbox-msg .msg-head .pill { font-size: 11px; }
ul.ai-rules { margin: 0; padding-left: 18px; font-size: 13.5px; }
ul.ai-rules li { margin: 4px 0; }
.warn-line { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13.5px; }
.ai-usage-title { margin: 24px 0 8px; font-size: 18px; }
.ai-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 12px 0 20px; }
.ai-usage-table h3 { margin: 0 0 8px; font-size: 14px; }
.ai-usage-table table, .ai-usage-table th, .ai-usage-table td { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-prompt h2 { margin: 0 0 4px; font-size: 16px; }
textarea.prompt-text { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.45; }
pre.fixed-rules { margin: 0; padding: 10px 12px; white-space: pre-wrap; background: var(--soft); border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
ul.prompt-versions { list-style: none; margin: 0; padding: 0; }
ul.prompt-versions li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
ul.prompt-versions li:first-child { border-top: none; }
/* ---- Child safety (people.child-safety): tutors' checks, the concern log, raising a concern ---- */
.callout.warn { background: var(--warn-bg); border-color: var(--warn); }
.callout.neg { background: var(--neg-bg); border-color: var(--neg-line); }
.check-callout { justify-content: space-between; }
.check-card .check-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; }
.check-card .check-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.concern-danger { margin-top: 0; }
.concern-who { margin: 2px 0 0; font-weight: 600; }
ul.concern-found { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-ctl); max-height: 220px; overflow-y: auto; }
ul.concern-found li { padding: 6px 10px; }
ul.concern-found li + li { border-top: 1px solid var(--line); }
fieldset.concern-kinds { border: none; padding: 0; margin: 12px 0 8px; display: grid; gap: 6px; }
fieldset.concern-kinds legend { font-size: 12px; color: var(--fg-2); margin-bottom: 4px; }
label.concern-kind { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-ctl); cursor: pointer; }
label.concern-kind.picked { border-color: var(--navy); background: var(--navy-wash); }
label.concern-kind > span { display: grid; gap: 2px; }
label.concern-urgent { margin: 10px 0; font-weight: 600; }
.concern-done p { margin: 0 0 10px; }
table.concerns tr.clickable { cursor: pointer; }
table.concerns tr.clickable:hover td { background: var(--hover); }
table.concerns tr.urgent td:first-child { box-shadow: inset 3px 0 0 var(--neg); }
table.concerns tr.selected td { background: var(--navy-wash); }
td.concern-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.concern-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
blockquote.concern-text { margin: 8px 0 14px; padding: 10px 14px; border-left: 3px solid var(--line-strong); background: var(--surface); color: var(--fg); white-space: pre-wrap; }
ol.concern-timeline { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
ol.concern-timeline li { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
ol.concern-timeline li p { margin: 4px 0 0; white-space: pre-wrap; }
ol.concern-timeline li.entry-closed { border-color: var(--pos); }
ol.concern-timeline li.entry-reported { border-color: var(--navy); }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.concern-add { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.concern-add h4 { margin: 0; }
.concern-add textarea, .concern-add input { width: 100%; font: inherit; }
.concern-line { margin: 10px 0 0; font-size: 13.5px; }
ul.my-concerns { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.my-concerns li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
ul.my-concerns li blockquote { flex: 1 1 100%; }
button.concern-button { color: var(--neg); }

/* ---- Search (screens.search): the staff top bar's box, its dropdown grouped by kind, the hints and the empty state ---- */
.topbar { display: flex; align-items: center; gap: 12px; margin: -6px 0 18px; }
.staff-search { position: relative; flex: 1 1 auto; max-width: 560px; }
.staff-search input { width: 100%; height: 38px; padding: 0 40px 0 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); color: var(--fg); font: inherit; box-shadow: var(--shadow-1); }
.staff-search input::placeholder { color: var(--muted); }
.staff-search input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--navy-wash); }
.staff-search input::-webkit-search-cancel-button { display: none; }
.staff-search .glass { position: absolute; left: 11px; top: 11px; color: var(--muted); pointer-events: none; }
.staff-search kbd, .search-hint kbd { font-family: var(--mono); font-size: 11px; line-height: 1; padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-2); color: var(--fg-2); }
.staff-search .search-key { position: absolute; right: 9px; top: 9px; pointer-events: none; }
.staff-search input:focus ~ .search-key, .staff-search input:not(:placeholder-shown) ~ .search-key { display: none; }
.search-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
.search-panel .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search-group + .search-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--soft); }
.search-group-title { padding: 6px 10px 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.search-option { display: block; padding: 7px 10px; border-radius: var(--radius-ctl); color: var(--fg); text-decoration: none; }
.search-option:hover { background: var(--hover); }
.search-option.active { background: var(--navy-wash); box-shadow: inset 3px 0 0 var(--navy); }
.search-option .title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-option .context { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.search-more { padding: 4px 10px 6px; font-size: 12px; color: var(--muted); }
.search-hint, .search-empty { display: grid; gap: 4px; padding: 10px; font-size: 12.5px; color: var(--muted); }
.search-hint strong, .search-empty strong { font-size: 14px; color: var(--fg); }
.search-hint .keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
@media (max-width: 900px) {
  .topbar { margin: 0 0 14px; }
  .staff-search { max-width: none; }
  .staff-search input { height: 44px; font-size: 16px; }
  .staff-search .glass { top: 14px; }
  .staff-search .search-key, .search-hint .keys { display: none; }
  .search-panel { max-height: 65vh; }
  .search-option { padding: 10px; }
}
/* ---- Analytics (tenancy.analytics): the filter row, a card per measure, the trend chart (columns and lines in SVG on the overview's plot), the bar list ---- */
.an-filters { row-gap: 6px; }
.an-filters label.inline { margin: 0; }
.an-section { margin-top: 16px; }
.an-section .section-head h2 { margin: 0 0 6px; }
.an-section .section-head .button { flex: none; }
.an-section .segmented { margin: 2px 0 4px; }
.an-note { margin: 4px 0 8px; max-width: 80ch; }
.an-subhead { margin-top: 14px; align-items: center; }
.an-subhead h3 { margin: 0; }
.an-subhead label.check { margin: 0; }
.an-table { margin-top: 10px; }
.an-table td.nowrap { white-space: nowrap; }
.an-table td:first-child { min-width: 150px; }
.tc-legend { margin: 0 0 4px; }
.tc-key.s1 { background: var(--series-1); }
.tc-key.s2 { background: var(--series-2); }
.tc-key.s3 { background: var(--series-3); }
.tc-key.line { height: 3px; border-radius: 2px; }
.tc-plot .ic-tip { z-index: 6; }
.tc-plot .ic-x small { white-space: nowrap; }
.tc-bars { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.tc-bar.s1 { fill: var(--series-1); }
.tc-bar.s2 { fill: var(--series-2); }
.tc-bar.s3 { fill: var(--series-3); }
.tc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.tc-line { stroke-width: 2px; stroke-linecap: round; }
.tc-line.s1 { stroke: var(--series-1); }
.tc-line.s2 { stroke: var(--series-2); }
.tc-line.s3 { stroke: var(--series-3); }
.tc-dot { stroke: var(--surface); stroke-width: 2px; }
.tc-dot.s1 { fill: var(--series-1); }
.tc-dot.s2 { fill: var(--series-2); }
.tc-dot.s3 { fill: var(--series-3); }
.bl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.bl-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(90px, auto); gap: 4px 12px; align-items: center; font-size: 13px; }
.bl-label { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bl-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.bl-label small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-svg { display: block; width: 100%; height: 12px; overflow: hidden; }
.bl-track { fill: var(--soft); }
.bl-bar.s1 { fill: var(--series-1); }
.bl-bar.s2 { fill: var(--series-2); }
.bl-bar.s3 { fill: var(--series-3); }
.bl-mark { stroke: var(--fg-2); stroke-width: 2px; }
.bl-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); white-space: nowrap; display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
  .bl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bl-row .bl-label { grid-column: 1 / -1; }
  .bl-value .pill { display: none; }
  .an-filters select { max-width: 100%; }
}
/* ---- Saved filters and repeating follow-ups ---- */
.saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 2px; min-width: 0; }
.saved-views-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.saved-views .chips { gap: 6px; min-width: 0; max-width: 100%; }
.chip.saved-view { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.chip.saved-view > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.chip.saved-view.theirs { border-style: dashed; }
.saved-view-mark { font-size: 10.5px; line-height: 1.5; padding: 0 6px; border-radius: 999px; background: var(--navy-wash); color: var(--navy); }
.chip.saved-view.on .saved-view-mark { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.saved-view-form { margin: 6px 0 10px; padding: 12px 14px; }
.saved-view-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 0 12px; }
.saved-view-form .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fu-repeat-note { margin: 0 0 8px; }
@media (max-width: 640px) {
  .saved-view-fields { grid-template-columns: 1fr; }
  .chip.saved-view > span:first-child { max-width: 62vw; }
}
/* ---- Messages to tutors (screens.tutor-messages): who on the left, who it reaches on the right, what was sent below ---- */
.tm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tm-compose { display: grid; gap: 16px; min-width: 0; }
.tm-compose .section-head, .tm-reach .section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tm-criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.tm-criteria select { width: 100%; }
.tm-find { width: 100%; margin-bottom: 8px; }
ul.tm-pick { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
ul.tm-pick li { padding: 6px 10px; }
ul.tm-pick li + li { border-top: 1px solid var(--line); }
.tm-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tm-reach { position: sticky; top: 12px; min-width: 0; }
ul.tm-list { list-style: none; margin: 8px 0; padding: 0; max-height: 360px; overflow-y: auto; }
ul.tm-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line); }
ul.tm-list li.unreachable .tm-who strong { color: var(--muted); }
.tm-who { display: grid; flex: 1 1 180px; min-width: 0; }
.tm-teaching { flex: 1 1 100%; }
.tm-result { margin-top: 16px; }
ul.tm-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tm-history { margin-top: 24px; }
@media (max-width: 900px) {
  .tm-grid { grid-template-columns: 1fr; }
  .tm-reach { position: static; }
}
/* ---- Message formats: the toolbar over a message box, and the message as it will arrive (MessageFrame) ---- */
.format-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 6px; }
.format-bar button { min-width: 34px; height: 30px; padding: 0 10px; font-size: 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); color: var(--fg); cursor: pointer; }
.format-bar button:hover { background: var(--hover); }
.format-hint { margin-left: 6px; font-size: 12px; color: var(--muted); }
.msg-frame { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-2); }
.msg-frame-head { display: grid; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.msg-frame-subject { font-weight: 600; color: var(--fg); }
iframe.msg-frame-email { display: block; width: 100%; border: 0; background: var(--surface); }
.msg-frame-phone { display: grid; justify-items: start; gap: 6px; padding: 14px; }
.msg-bubble { margin: 0; max-width: 85%; padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); white-space: pre-wrap; }

/* ---- Spelling: the words the dictionary does not know, under a message box, with their fixes (SpellingHints) ---- */
.spelling { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); font-size: 13px; }
.spelling-label { font-weight: 600; color: var(--warn); }
.spelling-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.spelling-word { font-weight: 600; text-decoration: underline wavy var(--neg); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.spelling-item button.link { padding: 2px 4px; font-size: 12.5px; }

/* ---- Attendance: classes at a glance, children to follow up, every seat (screens.attendance) ---- */
.summary button.tile { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; color: var(--fg); min-width: 0; }
.summary button.tile:hover { border-color: var(--navy); box-shadow: var(--shadow-1); }
.summary button.tile.alert { border-color: var(--neg-line); }
.att-filters { margin-top: 14px; align-items: center; gap: 8px; }
.att-search { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.neg-text { color: var(--neg); }
table.att-grid th.wk .sub { font-size: 10.5px; font-weight: 400; color: var(--muted-2); white-space: nowrap; }
table.att-grid th.wk.now { background: var(--navy-wash); color: var(--navy); }
.att-classes td.student { min-width: 220px; }
.att-class-name { border: none; background: none; padding: 0; font: inherit; color: var(--fg); cursor: pointer; text-align: left; white-space: nowrap; }
.att-class-name:hover strong { color: var(--link); }
.att-class-name .caret { display: inline-block; width: 12px; color: var(--muted); }
.att-class td:first-child .sub { padding-left: 16px; }
.att-class.open td { border-bottom-color: transparent; }
.att-child td { background: var(--bg-2); }
.att-child td.student { padding-left: 30px; background: var(--bg-2); }
.att-wk { min-width: 46px; padding: 3px 6px; border-radius: var(--radius-ctl); border: 1px solid transparent; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; line-height: 18px; }
.att-wk.ok { background: var(--pos-bg); color: var(--pos); }
.att-wk.some { background: var(--soft); color: var(--fg-2); }
.att-wk.unmarked { background: var(--gold-wash); color: var(--warn); border-color: var(--gold); }
.att-wk.future { background: var(--surface); color: var(--muted-2); border: 1px dashed var(--line); font-weight: 400; }
.att-wk.cancelled { background: var(--surface); color: var(--muted-2); border: 1px dashed var(--line); }
.att-wk.untold::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 0 2px var(--surface); }
.att-wk.selected { box-shadow: 0 0 0 2px var(--ring); }
table.att-follow { width: 100%; border: none; border-radius: 0; }
table.att-follow td { vertical-align: top; }
.att-who { min-width: 200px; }
.att-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.att-date { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--fg); cursor: pointer; white-space: nowrap; }
.att-date:hover { border-color: var(--navy); }
.att-act { text-align: right; white-space: nowrap; }

/* The week's room grid: a card keeps its code, time and seats whole however many names it holds; the names take the rest, faded at the foot. */
.rg-cls .rg-code, .rg-cls .rg-meta, .rg-cls .rg-seats { flex: none; }
.rg-cls .rg-names { flex: 1 1 auto; min-height: 0; overflow: hidden; line-height: 1.35; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }

/* ---- Subject colours on the room sheet (RoomGrid): twelve hues a subject takes in name order; the tint is mixed from the hue so it
   reads on light and dark alike. A class over its room's seats, or near them, still shows that first. ---- */
.subj-0 { --subj: #2563eb; } .subj-1 { --subj: #0d9488; } .subj-2 { --subj: #7c3aed; } .subj-3 { --subj: #ea580c; }
.subj-4 { --subj: #db2777; } .subj-5 { --subj: #16a34a; } .subj-6 { --subj: #0891b2; } .subj-7 { --subj: #b45309; }
.subj-8 { --subj: #4f46e5; } .subj-9 { --subj: #e11d48; } .subj-10 { --subj: #65a30d; } .subj-11 { --subj: #64748b; }
.rg-cls.subj { border-left: 4px solid var(--subj); background: color-mix(in srgb, var(--subj) 11%, var(--surface)); }
.rg-cls.subj:hover { background: color-mix(in srgb, var(--subj) 18%, var(--surface)); border-color: color-mix(in srgb, var(--subj) 55%, var(--line)); border-left-color: var(--subj); }
.rg-cls.subj .rg-code { color: color-mix(in srgb, var(--subj) 70%, var(--fg)); }
.rg-cls.subj.warn, .rg-cls.subj.warn:hover { border-left-color: var(--gold); background: var(--gold-wash); }
.rg-cls.subj.over, .rg-cls.subj.over:hover { border-left-color: var(--neg); background: var(--neg-bg); }
.rg-tutor { flex: none; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-tutor.none { color: var(--neg); }
.rg-cover { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--navy-wash); color: var(--link); font-size: 11px; font-weight: 600; }
.rg-cover.needs { background: var(--neg-bg); color: var(--neg); }
.rg-roll.open, .rg-roll.part { color: var(--warn); font-weight: 600; }
.rg-roll.open::before, .rg-roll.part::before { content: "\25CF  "; }
.rg-roll.done { color: var(--pos); font-weight: 600; }
.rg-roll.done::before { content: "\2713  "; }
.rg-cls .rg-seats { font-weight: 400; }

/* The week's seat chips take their mark's colour; a seat not marked yet is neutral (screens.week). */
.seat.seat-unmarked { background: var(--soft); color: var(--fg-2); }
.seat.seat-attended { background: var(--pos-bg); color: var(--pos); }
.seat.seat-late { background: var(--warn-bg); color: var(--warn); }
.seat.seat-informed { background: var(--navy-wash); color: var(--link); }
.seat.seat-uninformed { background: var(--neg-bg); color: var(--neg); }
.seat.seat-centre { background: var(--soft); color: var(--muted); text-decoration: line-through; }
table.att-week { width: 100%; border: none; border-radius: 0; }
table.att-week td, table.att-week th { vertical-align: middle; }
table.att-week .att-child td { padding-left: 30px; }

/* The week at a glance (Week page): a column a day, a row a start time, each lesson a card in its subject's colour. */
.wk-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); margin-top: 12px; }
.wk-grid { display: grid; min-width: 760px; }
.wk-corner, .wk-day { position: sticky; top: 0; z-index: 1; background: var(--soft); border-bottom: 1px solid var(--line); }
.wk-day { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-left: 1px solid var(--line); }
.wk-dayname { font-weight: 700; color: var(--fg); }
.wk-date { font-weight: 400; color: var(--fg-2); }
.wk-day.today { background: var(--navy-wash); box-shadow: inset 0 -2px 0 var(--link); }
.wk-time { padding: 8px 8px 0 0; text-align: right; font-size: 12px; font-weight: 600; color: var(--fg-2); border-top: 1px solid var(--line); white-space: nowrap; }
.wk-cell { display: flex; flex-direction: column; gap: 4px; padding: 4px; min-width: 0; min-height: 40px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wk-cell.today { background: color-mix(in srgb, var(--navy-wash) 45%, var(--surface)); }
.wk-lesson { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1px; width: 100%; min-width: 0; padding: 5px 7px; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; color: var(--fg);
  border: 1px solid var(--line); border-left: 4px solid var(--subj); border-radius: 6px; background: color-mix(in srgb, var(--subj) 10%, var(--surface)); cursor: pointer; }
.wk-lesson:hover { background: color-mix(in srgb, var(--subj) 18%, var(--surface)); }
.wk-lesson.selected { outline: 2px solid var(--link); outline-offset: 1px; }
.wk-lesson.unmarked { box-shadow: inset 0 0 0 1.5px var(--gold); }
.wk-lesson.cancelled, .wk-lesson.cancelled:hover { border-left-color: var(--muted-2); background: var(--soft); color: var(--muted); }
.wk-lesson.cancelled .wk-code { text-decoration: line-through; }
.wk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.wk-code { font-weight: 700; font-size: 13px; color: color-mix(in srgb, var(--subj) 70%, var(--fg)); }
.wk-seats { font-variant-numeric: tabular-nums; color: var(--fg-2); white-space: nowrap; }
.wk-seats .rg-roll { margin-left: 3px; }
.wk-lesson > span { display: block; min-width: 0; }
.wk-lesson > .wk-top { display: flex; }
.wk-subject, .wk-meta { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-lesson .rg-tutor { font-size: 12.5px; }

/* The week as a sheet (Week page): a row a lesson, the week top to bottom, a rule between days; the tutor's cell in their colour,
   each student a cell of their own in their mark's colour. */
table.week-sheet { font-size: 13px; border-collapse: collapse; }
table.week-sheet th { white-space: nowrap; }
table.week-sheet td { padding: 5px 8px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.week-sheet tbody tr { cursor: pointer; }
table.week-sheet tbody tr:hover td { background: color-mix(in srgb, var(--navy-wash) 50%, transparent); }
table.week-sheet tr.day-start td { border-top: 2px solid var(--fg-2); }
table.week-sheet tr.today td:first-child { box-shadow: inset 3px 0 0 var(--link); font-weight: 600; }
table.week-sheet tr.selected td { background: var(--navy-wash); }
table.week-sheet tr.cancelled td { color: var(--muted); }
table.week-sheet tr.cancelled .sheet-code { text-decoration: line-through; }
table.week-sheet td.sheet-tutor { font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--subj, transparent) 28%, var(--surface)); }
table.week-sheet tbody tr:hover td.sheet-tutor { background: color-mix(in srgb, var(--subj, transparent) 38%, var(--surface)); }
table.week-sheet td.sheet-tutor.none { color: var(--neg); background: var(--neg-bg); }
table.week-sheet td.sheet-note { min-width: 120px; max-width: 200px; white-space: normal; font-size: 12px; line-height: 1.3; color: var(--fg-2); }
.sheet-code.subj { font-weight: 700; color: color-mix(in srgb, var(--subj) 75%, var(--fg)); box-shadow: inset 3px 0 0 var(--subj); padding-left: 7px; }
table.week-sheet th.sheet-stu { min-width: 150px; }
table.week-sheet td.sheet-stu { width: 150px; min-width: 150px; max-width: 150px; padding: 0; border-left: 1px solid var(--line); }
.seat.sheet-seat { display: flex; justify-content: space-between; gap: 4px; width: 100%; margin: 0; padding: 6px 8px; border-radius: 0; }
.seat.sheet-seat .sheet-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seat.sheet-seat .sheet-grade { margin-left: 4px; font-size: 11px; opacity: .75; }
table.week-sheet tr.cancelled .seat { opacity: .55; }

/* Invoices: one row of filters (the views, the term, a short search); the rest behind "More filters"; sorting on the headings. */
.toolbar.inv-toolbar { gap: 10px 12px; }
.toolbar.inv-toolbar input.inv-search { flex: 0 1 240px; }
.toolbar.inv-filters label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); }
th .th-sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
th .th-sort:hover, th .th-sort.on { color: var(--fg); }

/* Families: the search and "More filters" on one row; the filters below only when asked for or set. */
.toolbar.fam-toolbar { gap: 10px 14px; }
.toolbar.fam-toolbar input.fam-search { flex: 0 1 420px; }
table.families td.phone { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A desk payment beyond what is owing: change given, or the extra kept for the family. Nothing is recorded until one is picked. */
.desk-payment fieldset.extra-choice { display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: var(--radius-ctl); background: var(--gold-wash); }
.desk-payment fieldset.extra-choice legend { padding: 0 4px; font-weight: 600; font-size: 13.5px; }
.desk-payment fieldset.extra-choice label.check { display: block; font-size: 13.5px; line-height: 1.45; }
.desk-payment fieldset.extra-choice label.check input { margin: 0 6px 0 0; vertical-align: -1px; }

/* Enrolments: the child first, then the term's classes as a board with their seats and waitlist; a class opens its roster. */
.card.enrol-who { display: grid; gap: 8px; margin: 6px 0 12px; padding: 12px 14px; }
.enrol-who form.enrol-find { display: flex; gap: 8px; }
.enrol-who form.enrol-find input { flex: 0 1 420px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; background: var(--surface); color: var(--fg); }
.enrol-theirs .pill { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.toolbar.enrol-board-filters { gap: 8px 12px; }
.toolbar.enrol-board-filters label.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
table.enrol-board .pill { margin-left: 6px; }
td.board-seats .fill > span.full { background: var(--neg); }

/* ---- Follow-ups (screens.follow-ups): the queue as one bar of slices and quiet filters, rows grouped by how soon they are due,
   and a work panel in blocks: who and how to reach them, what is owed, what happened, and what came before. */
.fu-bar, .q-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 4px 0 14px; }
.fu-slices, .slices { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--soft); }
.fu-slices a, .slices > button { display: inline-flex; border: 0; background: none; font: inherit; cursor: pointer; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-size: 13.5px; color: var(--fg-2); text-decoration: none; }
.fu-slices a:hover, .slices > button:hover { color: var(--fg); }
.fu-slices a.on, .slices > button.on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.fu-slices .n, .slices .n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.fu-slices a.on .n, .slices > button.on .n { background: var(--soft); }
.fu-slices a.late .n, .slices .n.late { background: var(--neg-bg); color: var(--neg); }
.fu-filters, .q-filters { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fu-filters select, .q-filters select { padding: 6px 28px 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background-color: var(--surface); color: var(--fg); }

li.fu-group .n { padding: 0 6px; border-radius: 999px; background: var(--surface); letter-spacing: 0; font-variant-numeric: tabular-nums; }
li.fu-row.selected { background: var(--navy-wash); box-shadow: inset 3px 0 0 var(--link); }
.fu-due .small { font-size: 12px; }
.fu-title .pill { font-size: 11.5px; }
.fu-facts .muted { display: none; }
.fu-go.now { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }
.fu-go.now:hover { filter: brightness(1.1); color: var(--navy-ink); }


/* The work panel */
.fu-who .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-call { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 6px 12px; border-radius: var(--radius-ctl); background: var(--navy); color: var(--navy-ink); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.fu-call span { font-size: 14.5px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.fu-call:hover { text-decoration: none !important; filter: brightness(1.1); }
.fu-call.quiet { background: var(--soft); color: var(--fg); }
.fu-kids { display: flex; flex-wrap: wrap; gap: 6px; }
.fu-kids a { padding: 2px 9px; border-radius: 999px; background: var(--soft); font-size: 12.5px; color: var(--fg); }
ul.fu-invoices .num { font-variant-numeric: tabular-nums; }
.fu-money .button { grid-column: 1 / -1; justify-self: start; }
.fu-log, .fu-history { display: grid; gap: 10px; }
.fu-log h4, .fu-history h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }


/* A page's headline numbers as one slim strip (Attendance): label, number, what it means; each opens what it counts. */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.stat-strip .stat { display: grid; gap: 2px; justify-items: start; padding: 12px 16px; border: 0; border-left: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.stat-strip .stat:first-child { border-left: 0; }
.stat-strip .stat:hover { background: color-mix(in srgb, var(--navy-wash) 45%, var(--surface)); }
.stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.stat-value { display: flex; align-items: baseline; gap: 8px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-pct { font-size: 14px; font-weight: 600; color: var(--pos); }
.stat-sub { font-size: 12.5px; color: var(--fg-2); }
.stat-strip .stat.alert .stat-value { color: var(--neg); }
.stat-strip .stat.alert .stat-sub { color: var(--neg); }
.q-filters input.att-search { width: 240px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); font: inherit; font-size: 13px; background: var(--surface); color: var(--fg); }
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-strip .stat:nth-child(3) { border-left: 0; } .stat-strip .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
table.enrol-board .pill.any-year { background: transparent; border: 1px dashed var(--line-strong); color: var(--fg-2); }

/* ---- One look for every page's headline numbers, quick filters and labelled filters. ----------------------------------------
   Headline numbers (Tile, .summary): one slim strip, each cell its label, number and what it means, divided by hairlines; a
   number needing action is red (alert) or gold (owing), never a coloured box; the cell being shown is marked underneath.
   Quick filters (.chips): a bar of slices, the chosen ones raised. Labelled filters (.toolbar label.inline): one bordered control,
   the label quiet inside it before the value, so a row of filters reads as a row of controls rather than words and boxes. */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 12px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.summary > a, .summary > .tile, .summary > button.tile { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; width: auto; min-width: 0; margin: 0; padding: 12px 16px;
  border: 0; border-radius: 0; background: none; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); color: var(--fg); text-align: left; text-decoration: none; font: inherit; }
.summary > a:hover, .summary > button.tile:hover { background: color-mix(in srgb, var(--navy-wash) 45%, var(--surface)); border: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
.summary .label { order: -1; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.summary .count { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--fg); font-variant-numeric: tabular-nums; }
.summary .tile.money .count { font-size: 20px; }
.summary .sub { margin: 0; font-size: 12.5px; color: var(--fg-2); }
.summary > .alert, .summary > .tile.alert, .summary > button.tile.alert { background: none; border: 0; }
.summary > .alert .count, .summary > .alert .sub { color: var(--neg); }
.summary > .owing { background: none; }
.summary > .owing .count { color: var(--warn); }
.summary > .selected, .follow-ups-page .summary .tile.selected { background: var(--navy-wash); box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line), inset 0 -2px 0 var(--link); border: 0; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); }
.chips .chip { margin: 0; padding: 5px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--fg-2); cursor: pointer; }
.chips .chip:hover { color: var(--fg); background: none; }
.chips .chip.on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.toolbar label.inline { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0 0 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.toolbar label.inline:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent); }
.toolbar label.inline select, .toolbar label.inline input:not([type=checkbox]):not([type=radio]) { flex: 0 1 auto; min-width: 0; margin: 0; padding: 6px 10px 6px 6px; border: 0; border-radius: var(--radius-ctl); background: transparent; box-shadow: none; font: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--fg); outline: none; }
.toolbar label.inline select { padding-right: 26px; }
/* Numbers that read as one thing never break across lines: a student's number, a phone, an amount. */
table.roster td:first-child, table.roster td:nth-child(9) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A family's follow-ups on its page: the open ones to work on, then every try and ending as a timeline. */
.card.fam-follow { display: grid; gap: 14px; padding: 12px 16px; }
ul.fam-open { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
ul.fam-open li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--soft); }
ul.fam-open li:last-child { border-bottom: 0; }
ul.fam-open .pill { font-size: 11.5px; margin-left: 4px; }
ol.fam-history { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
ol.fam-history li { position: relative; display: grid; gap: 1px; }
ol.fam-history li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
ol.fam-history li.ev-done::before { background: var(--pos); }
ol.fam-history li.ev-added::before { background: var(--link); }
ol.fam-history li.ev-cancelled::before { background: var(--neg); }
ol.fam-history .ev-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; }
ol.fam-history .ev-note { font-size: 13px; color: var(--fg); padding: 4px 8px; border-radius: 6px; background: var(--soft); justify-self: start; }
ul.fam-open .button { flex: none; white-space: nowrap; }

/* A family's contact card: each parent with their email and a Call button, the address, and promotions as two small switches. */
.card.fam-contact { display: grid; gap: 12px; }
.card.fam-contact h3 { margin: 0; }
.card.fam-contact a { text-decoration: none; }
.card.fam-contact a:hover { text-decoration: underline; }
.fc-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-person + .fc-person { padding-top: 12px; border-top: 1px solid var(--soft); }
.fc-who { display: grid; gap: 1px; min-width: 0; }
.fc-role { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fc-mail { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-line { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--soft); font-size: 13.5px; }
.fc-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.fc-prefs { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--soft); }
.fc-pref { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13.5px; }
.fc-state { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.fc-state.on { background: var(--pos-bg); color: var(--pos); }
.fc-state.off { background: var(--soft); color: var(--muted); }

/* ---- Detail views and side panels, in the same clean style as the lists. -------------------------------------------------
   Links read as links by their colour, underlined on hover, so a page of names, emails and numbers is not a page of underlines.
   A fact list (dl.facts) is label and value rows divided by hairlines; a card's heading is one size everywhere; a side panel has a
   roomy head with a real close button, and its sections are headed in small capitals like the lists' group headings. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a.button:hover, .button:hover, nav a:hover, .sidebar a:hover, a.tile:hover, .summary > a:hover, .slices a:hover, .fu-slices a:hover { text-decoration: none; }
.card { padding: 16px 18px; }
.card > h3, .card .section-head h3 { font-size: 15px; font-weight: 650; letter-spacing: -.005em; margin: 0 0 12px; }
.facts { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 0 18px; margin: 0 0 12px; font-size: 13.5px; }
.facts > dt, .facts > dd { padding: 8px 0; border-top: 1px solid var(--soft); align-self: stretch; }
.facts > dt:first-of-type, .facts > dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.facts > dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); line-height: 1.9; }
.facts > dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.facts > dd .muted { color: var(--fg-2); }
.drawer .drawer-head { padding: 14px 18px 14px 20px; }
.drawer .drawer-head h3 { font-size: 16px; font-weight: 650; letter-spacing: -.005em; }
.drawer .drawer-head > .link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-ctl); color: var(--fg-2); font-size: 15px; text-decoration: none; }
.drawer .drawer-head > .link:hover { background: var(--soft); color: var(--fg); }
.drawer .drawer-body { padding: 18px 20px 32px; }
.drawer h4, .drawer h4.drawer-section, h4.card-sub { margin: 22px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.drawer .drawer-body > h4:first-child, .drawer .drawer-body > div > h4:first-child { margin-top: 0; }
.drawer .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.drawer table { width: 100%; font-size: 13px; }
/* On a detail page, a number, a reference or a date is one thing: it never breaks across lines, however narrow the column. */
table.family-students td:first-child, table.family-invoices td:first-child, table.family-invoices td:nth-child(5),
table.family-threads td.when, table.term-weeks td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.family-invoices td.row-actions .button, table.family-invoices td.row-actions button { white-space: nowrap; }
/* A student's page: the family's page's head, numbers and contact card; follow-ups as a link with its date beneath. */
.hub-list.compact li.hub-fu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; justify-content: stretch; padding: 6px 0; border-bottom: 1px solid var(--soft); }
.hub-list.compact li.hub-fu:last-child { border-bottom: 0; }
.fu-kids a.inactive { opacity: .6; }
/* The families list: an email is one line, cut with an ellipsis (its full text on hover), so a row stays one line tall. */
table.families td:nth-child(3) { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.inv-list td:first-child, table.inv-list td.inv-due { white-space: nowrap; }
/* A lesson's side panel: what it is, then its facts as rows (when, where, tutor, status, seats), then what can be done. */
.lesson-detail .lesson-what { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.lesson-detail .facts .seats { display: flex; flex-wrap: wrap; gap: 4px; }
.lesson-detail .facts .seat { margin: 0; }
/* Money still owing stands out as a badge: amber while it is not yet due, red once it is overdue; a paid-off balance fades back. */
.owe { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.owe.late { background: var(--neg-bg); color: var(--neg); box-shadow: inset 0 0 0 1px var(--neg-line); }
td .zero { color: var(--muted-2); font-variant-numeric: tabular-nums; }
/* Retiring a class that still has students: say so, and open its roster, instead of asking to confirm. */
.callout.retire-blocked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }

/* Activity: the days as quiet headings; each change one line (time, what happened, kind and who), repeats folded with a count;
   a click opens what changed, field by field, or each of the folded ones. */
.activity-find { width: 300px; }
ol.activity .activity-item { display: block; padding: 0; }
.activity-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; padding: 10px 16px; border: 0; background: none; font: inherit; color: var(--fg); text-align: left; cursor: pointer; }
.activity-row:hover { background: color-mix(in srgb, var(--navy-wash) 45%, var(--surface)); }
.activity-item.open .activity-row { background: var(--navy-wash); }
.activity-row .activity-time { padding: 0; }
.activity-row .activity-what { font-weight: 500; min-width: 0; }
.activity-times { margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.activity-who { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.activity-detail { display: grid; gap: 6px; padding: 4px 16px 12px calc(4.6rem + 28px); }
ul.activity-many { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.activity-about { margin-left: 8px; font-weight: 400; color: var(--fg-2); }
.activity-about::before { content: "\00B7"; margin-right: 8px; color: var(--muted); }
/* Kinds of change down the side, each with how many; the stream of changes beside it. */
.activity-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.activity-kinds { position: sticky; top: 12px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.activity-kinds > button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--fg-2); text-align: left; cursor: pointer; }
.activity-kinds > button:hover { background: var(--soft); color: var(--fg); }
.activity-kinds > button.on { background: var(--navy-wash); color: var(--fg); font-weight: 600; }
.activity-kinds > button:first-child { margin-bottom: 4px; }
.activity-kinds .n { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.activity-kinds > button.on .n { background: var(--surface); }
.activity-stream { min-width: 0; }
.activity-stream > h2.activity-day:first-child { margin-top: 2px; }
@media (max-width: 720px) {
    .activity-row { grid-template-columns: 4rem minmax(0, 1fr); } .activity-who { grid-column: 2; } .activity-detail { padding-left: 16px; }
    .activity-layout { grid-template-columns: minmax(0, 1fr); }
    .activity-kinds { position: static; display: flex; overflow-x: auto; }
    .activity-kinds > button { width: auto; white-space: nowrap; }
    .activity-kinds > button:first-child { margin-bottom: 0; }
}

/* ---- A term's steps: one row per step, the one to do now marked, done ones ticked, later ones quiet. */
.term-steps-card { padding: 0; margin: 14px 0 18px; overflow: hidden; }
.term-steps-card .card-head { padding: 14px 16px 10px; margin: 0; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.term-steps-card .card-head h2 { margin: 0; font-size: 15px; }
ol.term-steps { list-style: none; margin: 0; padding: 0; }
ol.term-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
ol.term-steps > li:first-child { border-top: 0; }
.term-step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--soft); color: var(--fg-2); }
ol.term-steps > li.done .term-step-n { background: var(--pos-bg); color: var(--pos); }
ol.term-steps > li.now { background: var(--navy-wash); box-shadow: inset 3px 0 0 var(--navy); }
ol.term-steps > li.now .term-step-n { background: var(--navy); color: var(--surface); }
.term-step-title { font-weight: 600; }
.term-step-text { margin-top: 2px; font-size: 13px; color: var(--fg-2); max-width: 70ch; }
ol.term-steps > li.later .term-step-title, ol.term-steps > li.later .term-step-text { color: var(--muted); }
ol.term-steps > li.done .term-step-text { color: var(--muted); }
.term-step-act, .term-step-close { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { ol.term-steps > li { grid-template-columns: 28px minmax(0, 1fr); } .term-step-act { grid-column: 2; justify-content: flex-start; } }
.terms-full { display: grid; gap: 16px; }
.terms-add-toggle { align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.terms-add-toggle .hint { margin: 0; }

/* The class form's catalogue-set values: shown, not typed. */
.class-fixed { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.class-fixed-label { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.class-fixed-hint { align-self: end; }
.type-exceptions table input { width: 6.5rem; text-align: right; }

/* ---- When a page fails (screens.shell): the layouts' boundary panel, and Blazor's bar for a live page that stopped answering */
.page-error { max-width: 60ch; }
.page-error h1 { text-wrap: balance; }
#blazor-error-ui {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 1000;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--neg-bg); border-top: 1px solid var(--neg-line); color: var(--fg); backdrop-filter: blur(6px);
  align-items: center; gap: 16px; flex-wrap: wrap;
}
#blazor-error-ui[style*="block"] { display: flex !important; }
#blazor-error-ui .reload { font-weight: 600; }
#blazor-error-ui .dismiss { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--fg-2); cursor: pointer; }

/* ---- Settings > Payments: ways to pay online, one card per business ---- */
.pay-methods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin: 12px 0; }
.card.pay-methods h3 { margin: 0 0 6px; }
.card.pay-methods button.primary { margin-top: 8px; }

/* ---- Staff > Payments: the two-step refund ---- */
tr.refund-form h4 { margin: 4px 0 6px; }
.refund-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; }
tr.refund-form textarea.reason-input { width: 100%; max-width: 560px; }
table.refund-check { margin: 8px 0; max-width: 560px; }
table.refund-check th { text-align: left; font-weight: 500; color: var(--fg-2); padding-right: 16px; }
tr.refund-form .row-buttons { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
/* An Insights section's chart or table switch, beside its CSV link. */
.cot-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Head office's two halves of the menu: Overview and Setup. */
.sidebar .hq-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin: 4px 0 10px; border-radius: var(--radius-ctl); background: var(--rail-hover); }
.sidebar .hq-modes a { justify-content: center; padding: 5px 8px; font-size: 13px; }
.sidebar .hq-modes a.on { background: var(--rail-active-bg); color: var(--rail-active-fg); font-weight: 600; }
.sidebar .hq-modes a.on::before { content: none; }
/* Plan next term at every centre: one row per centre, its own dates and weeks. */
.plan-all td { vertical-align: top; }
.plan-all input[type="checkbox"] { width: auto; margin-top: 8px; }
.plan-all select { min-width: 7.5em; }
.plan-all input[type="date"] { min-width: 9.5em; }
.plan-all input[type="text"] { min-width: 8em; }
.plan-all input.narrow { width: 4.5em; min-width: 4.5em; }

/* Platform › Integrations: a provider's callback addresses are long; they wrap rather than push the card wide on a phone. */
.integration-card .facts dd { min-width: 0; overflow-wrap: anywhere; }
.integration-card h4 { margin: 16px 0 8px; font-size: 13px; }