/* lesson.guru — the sign-in page's look for every page: grey wall, black wood, white paper, navy, orange.
   Every team uses these tokens (docs/STYLE.md); don't hard-code other colours. */
:root {
  color-scheme: light;
  --wall: #F4F4F5;   /* page background: neutral light grey (Helen 2026-10-02) */
  --wood: #1B1A18;   /* black wood: dark panels, the calendar, Block keys */
  --frame: #2D2E35;  /* charcoal: the page sides outside the content column (Helen 2026-10-02) */
  --bar: #23242A;    /* charcoal: dark panels that used to match the top bar */
  /* the top bar (Helen 2026-10-03: a glossy, sunlit near-black like her "Smart Home" reference — light falls across
     it from the upper right; orange marks the page you're on) */
  /* the sea's own blue (ocean-wide.webp's water: median #024A68, the deeper quarter #01415C) — Helen 2026-10-03 */
  /* + a dark veil (rgba(2,20,32,.55)) like the sea sides: #024A68 -> #022C40, #01415C -> #01283B; darker again -> #011621 / #01151F — Helen 2026-10-03 */
  --topbar-base: #01151F; --topbar-top: #011621; --topbar-ink: #FFFFFF; --topbar-dim: #CFE3EE;   /* white 9.6–11:1 */
  --topbar-accent: #FFB070;          /* current page / hover text on the blue: 5.4:1 (#E8762C would be 3.2:1) */
  --topbar-orange: #E8762C;          /* the brand orange where it sits on white or behind white text */
  --topbar-button: #C2541A;          /* Sign out: white bold text 4.6:1 (#C9581A was 4.3) */
  --topbar-menu: #1C1C1C; --topbar-menu-line: #2E2E2E;
  --topbar-glow: radial-gradient(ellipse at 85% -40%, rgba(255, 214, 170, .22), transparent 60%);
  --topbar-streak: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .06) 55%, transparent 70%);
  --alert: #D0441A;  /* orange-red count badges (unread, to handle): white text 4.6:1, 3.3:1 on --bar */
  --paper: #FFFFFF;  /* cards and panels: white on the grey wall */
  --navy: #16213F;   /* buttons, strong text (the sign-in button) */
  --purple: #5B3FB0;  /* mastery: Mastered / Proficient (practice water boxes) */
  --purple-light: #A99BDB;
  --orange: #E8661A; /* accent: focus rings, badges, the short line under titles */
  --brass: #9A6B2F;  /* small uppercase labels (like the shelf labels / book kickers) */
  --ink: #1B1A18; --muted: #6B6B73; --line: #E4E4E7; --soft: #EDEDEF;
  --grid: #D4D4D8; --grid-soft: #E4E4E7;   /* table and timetable lines: hours, day columns (--grid), half-hours (--grid-soft) */
  --bad: #B3261E; --good: #2E6B45;
  /* tables — soft pastel bands (Helen's references 2026-09-28). Each area has its own colour; pages get
     `area-<blueprint>` / `page-<endpoint>` classes on <body> (base.html), which set --band / --band-ink / --tint. */
  --band: #ECECEE; --band-ink: #52525B; --tint: #FAFAFA;           /* default: neutral grey */
  /* data tables like an Excel table (Helen 2026-10-02): orange header, white bold text, grey zebra rows.
     #B85419 keeps white 14px bold text at 4.9:1 (AA); Excel's #ED7D31 is only 2.8:1. */
  --th-bg: #B85419; --th-ink: #FFFFFF; --row-alt: #EDEDED; --cell-line: #D9D9D9; --row-hover: #FBE5D6;
  --ok-bg: #D9EAD3; --ok-ink: #2E6B45;     /* green label: low / paid / done */
  --mid-bg: #FCE8B2; --mid-ink: #8A5A00;   /* yellow label: medium / pending */
  --hi-bg: #F6D3D3; --hi-ink: #A61C1C;     /* red label: high / not paid / late */
  --page-width: 900px;   /* same width as the bookcase */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* older names kept so existing pages keep working */
  --bg: var(--wall); --card: var(--paper); --mint: var(--orange); --mint-btn: var(--navy);
  --glow: rgba(22,33,63,.18); --btn-ink: #FFFFFF; --brand: var(--sans);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); }
.topbar { background: var(--topbar-glow), var(--topbar-streak), linear-gradient(180deg, var(--topbar-top), var(--topbar-base));
  background-color: var(--topbar-base); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 14px clamp(16px, 2vw, 28px); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px; pointer-events: none;
  background: linear-gradient(rgba(1, 21, 31, .75), rgba(1, 21, 31, 0)); }   /* the bar's blue fades into the sea */
.topbar-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--topbar-accent); text-decoration: none;
  flex: none; }
.topbar-logo span { color: var(--topbar-ink); font-size: 19px; font-weight: 600; letter-spacing: .2px; }
.brand { font-family: var(--brand); font-weight: 900; letter-spacing: .3px; color: var(--ink); text-decoration: none; }
.brand span { color: var(--mint); }
nav { display: flex; align-items: center; gap: 6px clamp(14px, calc(2.5vw - 16px), 36px); flex-wrap: wrap;
  justify-content: flex-end; min-width: 0; }      /* the menu on the first line; below 1024px the ☰ drawer */
.nav-acct { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
                                                  /* My account · the name · Sign out: right-aligned on the second line */
nav > a, nav > details > summary, .nav-acct > * { white-space: nowrap; }
.topbar .who { color: var(--topbar-dim); font-weight: 600; }
.wrap { max-width: var(--page-width); margin: 0 auto; padding: 24px 16px 60px; display: flex; flex-direction: column; gap: 18px; }
h1 { font: 700 30px/1.15 var(--serif); margin: 0; color: var(--ink); }
h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--mint); margin-top: 8px; }
h2 { font: 700 19px/1.25 var(--serif); margin: 0 0 6px; color: var(--ink); }
.muted { color: var(--muted); margin: 0 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.narrow { max-width: 420px; margin: 40px auto; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
input { font: 15px var(--sans); padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: #FFFFFF; color: var(--ink); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.btn:hover { background: #22305A; }
.btn { background: var(--mint-btn); color: var(--btn-ink); border: 0; border-radius: 10px; padding: 10px 16px;
  font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px var(--glow); }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }
.flash { background: #FCEBDD; color: #7A3A10; padding: 10px 14px; border-radius: 10px; margin: 0; }
.alert { background: #FCEBDD; color: #7A3A10; border: 1px solid #F3C9A6; padding: 10px 14px; border-radius: 10px; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.tile b { display: block; font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: #FFFFFF; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--cell-line); }
th { font-weight: 700; color: var(--ink); }                       /* row headers, and header rows without <thead> */
thead th { background: var(--th-bg); color: var(--th-ink); font: 700 14px/1.3 var(--sans); letter-spacing: 0;
  text-transform: none; border-bottom: 0; vertical-align: bottom; }
tbody tr:nth-child(even) > td { background: var(--row-alt); }
tbody tr:hover > td { background: var(--row-hover); }
tfoot td, tr.total td { background: #FFFFFF; color: var(--ink); font-weight: 700; border-top: 2px solid var(--th-bg); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* long free text in a table cell: 4 lines, then "More ▾" (clamp.js); line breaks kept; printing shows it all */
.clamp { white-space: pre-wrap; overflow-wrap: anywhere; }
.js .clamp:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.clamp-more { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--navy); }
.clamp-more[hidden] { display: none; }
@media print {
  .js .clamp:not(.is-open) { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .clamp-more { display: none !important; }
}
/* tables whose records take two rows (a hidden detail row): stripe by record, set on the row (tr.alt) */
table.stripe-rows tbody tr:nth-child(even) > td { background: #FFFFFF; }
table.stripe-rows tbody tr.alt > td { background: var(--row-alt); }
table.stripe-rows tbody tr:hover > td { background: var(--row-hover); }
table.stripe-rows tbody tr.detail > td { background: var(--tint); }
.card > h2:first-child { border-left: 4px solid var(--band-ink); padding-left: 10px; }
/* one soft colour per area */
.area-schedule, .page-admin-dashboard { --band: #DCE6F2; --band-ink: #3A5A80; --tint: #F4F7FB; }   /* schedule: sky blue */
.area-renewal, .page-admin-purchases, .page-admin-enrollments { --band: #DDEBDF; --band-ink: #3F6B4E; --tint: #F4F9F5; } /* purchases & renewals: sage */
.page-admin-payroll, .page-admin-rates, .page-renewal-payments { --band: #F6D9DC; --band-ink: #97444F; --tint: #FDF5F6; } /* teacher pay: dusty rose */
.area-records { --band: #FBE1CE; --band-ink: #A0522D; --tint: #FEF7F1; }   /* homework & class records: peach */
.area-chat { --band: #E6E0F2; --band-ink: #5B4C8A; --tint: #F7F5FB; }      /* messages: lavender */
.area-practice { --band: #E4F0E8; --band-ink: #2E6B5A; --tint: #F4FAF6; }  /* question banks: mint */
/* Question banks use the window (Helen 2026-10-06: "the bank can be full screen, no need to narrow it"): every page of
   the practice area spans the viewport with a modest margin at the sides; all other areas keep --page-width. The
   pages with a width of their own (practice.css body.wide-work, the resource library, a lesson's big page) keep it.
   Running text keeps a reading width inside the wide page (practice.css, practice-mathgen.css). */
/* In preview (astra/practice/preview.py WIDE_PREVIEW): body.pv-wide is set for an office viewer only; everyone else
   keeps today's width until the switch is flipped. */
body.area-practice.pv-wide { --page-width: 100vw; }
body.area-practice.pv-wide .wrap { padding-left: clamp(14px, 2.4vw, 32px); padding-right: clamp(14px, 2.4vw, 32px); }
.area-zoom { --band: #D8ECEA; --band-ink: #2F6A66; --tint: #F3F9F8; }      /* classroom: soft teal */
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.neg td.num { color: var(--bad); }
.list { margin: 0; padding-left: 18px; }
@media (max-width: 640px) { table { font-size: 13px; } }
nav a { color: var(--topbar-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
nav a:hover, nav a:focus-visible { color: var(--topbar-accent); }
.topbar nav form button { background: var(--topbar-button); color: #FFFFFF; border: 0; border-radius: 8px; padding: 8px 16px;
  font: 700 15px var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(201, 88, 26, .35); }
.topbar nav form button:hover { background: var(--topbar-orange); }
.topbar nav form { margin: 0; }
.topbar .badge { box-shadow: 0 0 0 2px var(--topbar-base); }
nav .link { color: #B9B0A3; }
select { font: 14px var(--sans); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: #FFFFFF; color: var(--ink); max-width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mint); }
.money { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
.pill { font-size: 12px; font-weight: 600; border-radius: 4px; padding: 1px 8px; margin-left: 6px; }
.pill.warn, .pill.mid { background: var(--mid-bg); color: var(--mid-ink); }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.hi, .pill.bad { background: var(--hi-bg); color: var(--hi-ink); }
.negtxt { color: var(--bad); }
.nav-toggle { display: none; background: none; border: 0; color: var(--topbar-ink); padding: 6px; border-radius: 8px; cursor: pointer; }
.nav-toggle:hover, .topbar.is-open .nav-toggle { color: var(--topbar-accent); }
.nav-backdrop { display: none; }
/* a tablet / phone: the menu is the ☰ drawer (nav.js) — Helen 2026-10-04: a compact panel laid OVER the page, under the
   bar (it used to push the page down and ran past the screen): two columns of 44px rows, its own scroll, a dim layer
   behind it, the account on one line. Safe-area insets keep it clear of the iPhone's status bar and Safari's toolbar. */
@media (max-width: 1023px) {
  .topbar { flex-wrap: nowrap; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px
    max(16px, env(safe-area-inset-left, 0px)); }
  .nav-toggle { display: inline-flex; }
  .topbar nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
    max-height: calc(100vh - var(--nav-top, 58px)); max-height: calc(100dvh - var(--nav-top, 58px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: stretch; justify-content: stretch;
    padding: 4px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px));
    background: var(--topbar-base); border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
  .topbar.is-open nav { display: grid; }
  .topbar.is-open .nav-backdrop { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 1;
    background: rgba(0, 0, 0, .55); }
  html.nav-open, html.nav-open body { overflow: hidden; }          /* the page behind stays where it is */
  .topbar nav > a, .topbar nav > details > summary { display: flex; align-items: center; min-height: 44px; padding: 0 4px;
    font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .topbar nav > a .badge, .topbar nav > details > summary .badge { margin-left: 6px; }
  .topbar nav > details > summary { list-style: none; cursor: pointer; }
  .topbar nav > details > summary::-webkit-details-marker { display: none; }
  .topbar nav > details[open] { grid-column: 1 / -1; }             /* Administration: opens in place, over both columns */
  .nav-acct { grid-column: 1 / -1; flex-basis: auto; flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 6px; padding-top: 8px; }
  .nav-acct > .who { order: -1; color: var(--topbar-dim); font-weight: 400; font-size: 16px; padding-left: 4px;
    overflow: hidden; text-overflow: ellipsis; }
  .nav-acct > .who::after { content: " ·"; }
  .nav-acct > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .topbar nav .nav-acct > form { margin-left: auto; flex: none; }
  .topbar nav form button { padding: 9px 16px; font-size: 15px; }
}
@media (min-width: 700px) and (max-width: 1023px) { .topbar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label.inline { flex-direction: column; }
a { color: var(--navy); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.grow { flex: 1 1 260px; }

/* QR code cards (office only) */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.qr-card { margin: 0; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); }
.qr-card img { display: block; width: 100%; height: auto; border-radius: 10px; }
.qr-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px 2px; }
/* office: my account */
.narrow-card { max-width: 520px; }
.phone-fields { display: flex; gap: 8px; }
.phone-fields select { flex: 0 0 auto; }
.phone-fields input { flex: 1; min-width: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

/* home: upcoming classes */
.lessons li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.lessons li:last-child { border-bottom: 0; }
.lessons li > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }
.lessons .btn { display: inline-block; white-space: nowrap; padding: 7px 12px; text-decoration: none; }
.btn.btn-quiet { background: #FFFFFF; color: var(--navy); border: 1px solid var(--line); box-shadow: none; }
@media (max-width: 560px) {   /* phones: the buttons go under the class, side by side */
  .lessons li { flex-wrap: wrap; gap: 6px; }
  .lessons li > span:last-child { width: 100%; justify-content: flex-start; }
}
.badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
/* after sign-in each area wears its own colour (Helen 2026-09-28): title underline, card top stripe */
body[class*="area-"]:not(.area-auth):not(.area-main) h1::after { background: var(--band-ink); }
body[class*="area-"]:not(.area-auth):not(.area-main) .card { border-top: 4px solid var(--band); }

/* dashboard "Today" to-do list */
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-list li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.todo-list .pill { margin: 0; min-width: 34px; text-align: center; font-size: 14px; }
.small { font-size: 13px; font-weight: 400; }
.answer { white-space: pre-wrap; line-height: 1.6; }
.grow { flex: 1 1 260px; }
/* speak-to-fill bar on forms with data-ai-fill */
.aifill { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 12px;
  background: var(--tint); border: 1px dashed var(--band-ink); margin-bottom: 8px; }
.aifill-text { flex: 1 1 240px; }
.aifill-mic { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 18px; cursor: pointer; }
.aifill-mic.on { background: var(--orange); animation: aipulse 1s infinite; }
.aifill-go { border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 700; }
.aifill-msg { color: var(--muted); font-size: 13px; flex-basis: 100%; }
.ai-filled { outline: 2px solid var(--orange); outline-offset: 1px; }
@keyframes aipulse { 50% { opacity: .6; } }
/* office assistant talk box */
.talk { display: flex; flex-direction: column; gap: 10px; }
.talk-log { display: flex; flex-direction: column; gap: 8px; min-height: 120px; max-height: 65vh; overflow-y: auto; padding: 4px; }
.talk-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; line-height: 1.5; }
.talk-msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.talk-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.talk-msg.wait { color: var(--muted); }
.talk-say { border: 0; background: none; cursor: pointer; font-size: 15px; margin-left: 6px; }
.talk-card { align-self: flex-start; max-width: 90%; border: 2px solid var(--orange); background: #FFF8F1; border-radius: 12px; padding: 10px 14px; }
.talk-card.done { border-color: var(--good); background: #F2F8F3; }
.talk-card.failed { border-color: var(--line); background: var(--soft); }
.talk-card-sum { font-weight: 600; margin-bottom: 8px; }
.talk-bar { display: flex; gap: 8px; align-items: flex-end; }
.talk-bar textarea { flex: 1; font: 15px var(--sans); padding: 10px 12px; border-radius: 20px; border: 1px solid var(--line); resize: none; min-height: 42px; }
.talk-auto { flex-direction: row; align-items: center; gap: 6px; }
/* top menu: current page + the Administration dropdown */
nav a.on, nav .navmenu > summary.on { color: var(--topbar-accent); }
.navmenu { position: relative; }
.navmenu > summary { list-style: none; cursor: pointer; color: var(--topbar-ink); font-weight: 600; font-size: 15px; }
.navmenu > summary:hover, .navmenu[open] > summary { color: var(--topbar-accent); }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }   /* chevron */
.navmenu[open] > summary::after { transform: rotate(-135deg); margin-bottom: -1px; }
.navmenu-list { position: absolute; right: 0; top: 34px; z-index: 20; background: var(--topbar-menu);
  border: 1px solid var(--topbar-menu-line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column;
  min-width: 220px; max-width: calc(100vw - 32px); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.navmenu-list a { padding: 9px 10px; border-radius: 6px; font-size: 15px; }
.navmenu-list a:hover, .navmenu-list a.on { background: #262626; color: var(--topbar-accent); }
@media (max-width: 640px) { .navmenu-list { left: 0; right: auto; } }
/* Administration as a mega-menu (Helen's "Features" reference): a white panel under the dark bar, two columns of
   items (round orange line icon, bold title, a grey line), a dark card on the right with what's waiting */
.navmenu-list.mm { background: #FFFFFF; border: 0; border-radius: 16px; padding: 22px; top: 44px;
  width: min(820px, calc(100vw - 32px)); max-width: none; flex-direction: row; gap: 20px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .08); }
.mm-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; align-content: start; }
.navmenu-list.mm a.mm-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; color: var(--ink); }
.navmenu-list.mm a.mm-item:hover, .navmenu-list.mm a.mm-item.on { background: #FFF4EC; color: var(--ink); }
.mm-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #E4E4E7; display: grid; place-items: center;
  color: var(--topbar-orange); background: #FFFFFF; }
.mm-item:hover .mm-ico, .mm-item.on .mm-ico { border-color: var(--topbar-orange); }
.mm-text { display: flex; flex-direction: column; min-width: 0; }
.mm-text b { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.mm-text small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.mm-side { flex: 0 0 230px; border-radius: 14px; padding: 18px; color: #FFFFFF; display: flex; flex-direction: column; gap: 6px;
  background: var(--topbar-glow), var(--topbar-streak), linear-gradient(180deg, var(--topbar-top), var(--topbar-base)); }
.mm-side p { margin: 0; }
.mm-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--topbar-accent); font-weight: 700; }
.mm-head { font-size: 20px; font-weight: 700; line-height: 1.25; }
.mm-sub { font-size: 13px; color: var(--topbar-dim); }
.navmenu-list.mm a.mm-btn { align-self: flex-start; margin-top: 8px; background: var(--topbar-button); color: #FFFFFF; border-radius: 8px;
  padding: 8px 14px; font-weight: 700; font-size: 14px; }
.navmenu-list.mm a.mm-btn:hover { background: var(--topbar-orange); }
.mm-side .aud-legend { margin-top: auto; padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 1023px) {                        /* in the drawer: the panel in the flow, under Administration — */
  .navmenu-list.mm { position: static; width: 100%; margin: 8px 0 10px; padding: 6px; border-radius: 12px;   /* one compact column */
    flex-direction: column; gap: 6px; box-shadow: none; }
  .mm-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .navmenu-list.mm a.mm-item { min-height: 44px; padding: 4px 8px; gap: 10px; border-radius: 8px; }
  .mm-ico { width: 30px; height: 30px; }
  .mm-ico svg { width: 17px; height: 17px; }
  .mm-text small, .mm-side .mm-kicker, .mm-side .mm-head, .mm-side .mm-sub, .navmenu-list.mm a.mm-btn { display: none; }
  .mm-side { flex: none; padding: 2px 10px 8px; border-radius: 8px; }       /* only the legend of the dots */
  .mm-side .aud-legend { margin-top: 0; border-top: 0; }
}
/* Helen 2026-09-28: dark on both sides where there is no content; the 900px column stays light (charcoal since 2026-10-02) */
/* Helen 2026-10-03: her ocean photo on the sides, a soft deep-blue veil over it so nothing sitting on it is hard to read;
   the content column stays exactly as it was. `fixed` (the sea stays still while the page scrolls) only where it works:
   iOS ignores it, so phones / tablets scroll it. */
/* Helen 2026-10-03: the sea on the sides was too bright and pulled the eye from the page — a dark veil (the foam reads soft
   grey, the blue still shows) and a light vignette toward the outer edges. */
body.app { --sea-veil: linear-gradient(rgba(1, 8, 13, .9), rgba(1, 8, 13, .9)),
    radial-gradient(ellipse 75% 90% at 50% 40%, transparent 55%, rgba(2, 20, 32, .35));
  background-color: #062A3D;
  background-image: var(--sea-veil), url("img/ocean-wide.jpg");
  background-image: var(--sea-veil),
    image-set(url("img/ocean-wide.webp") type("image/webp"), url("img/ocean-wide.jpg") type("image/jpeg"));
  background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
@media (max-width: 900px) {
  body.app { background-image: var(--sea-veil), url("img/ocean-900.jpg");
    background-image: var(--sea-veil),
      image-set(url("img/ocean-900.webp") type("image/webp"), url("img/ocean-900.jpg") type("image/jpeg"));
    background-attachment: scroll; }
}
@supports (-webkit-touch-callout: none) { body.app { background-attachment: scroll; } }   /* iPhone / iPad */
/* Helen 2026-10-03: like the sign-in page — the original (unblurred) photo under a white veil .9 */
/* the content column: the same sea seen through a pale pane, like the sign-in page (Helen 2026-10-03; the foam tile
   repeated visibly) — her photo, one picture, under a light veil; the soft blur is baked into ocean-*-soft (no CSS
   filter). Computers: `fixed` + cover, so it lines up exactly with the sea on the sides. Phones (the column is the whole
   width there) and iPhones / iPads: a fixed layer behind the page, which iOS keeps still too. No clip-path / stacking
   context on .wrap: the boards' and notebooks' fixed panels inside it stay as they are.
   Text straight on it is a shade deeper than inside the white cards: on the darkest veiled water (#BEC8CB) #6B6B73 would
   be 3.3:1 — so muted #4A4A52 5.2:1, brass #664515 5.1:1, red #8E1E18 5.2:1, green #215234 5.3:1. */
body.app { --pane: #E8ECEE; --pane-veil: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)); }
body.app .wrap { --muted: #4A4A52; --brass: #664515; --bad: #8E1E18; --good: #215234;
  background-color: var(--pane);
  background-image: var(--pane-veil), url("img/ocean-wide.jpg");
  background-image: var(--pane-veil),
    image-set(url("img/ocean-wide.webp") type("image/webp"), url("img/ocean-wide.jpg") type("image/jpeg"));
  background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
  min-height: calc(100vh - 60px); }
@media (max-width: 900px) {
  body.app .wrap { background: transparent; }
  body.app::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--pane);
    background-image: var(--pane-veil), url("img/ocean-900.jpg");
    background-image: var(--pane-veil),
      image-set(url("img/ocean-900.webp") type("image/webp"), url("img/ocean-900.jpg") type("image/jpeg"));
    background-position: center; background-size: cover; background-repeat: no-repeat; }
}
@supports (-webkit-touch-callout: none) {          /* iPad: no `fixed` backgrounds — one picture over the whole column */
  body.app .wrap { background-attachment: scroll; }
}
body.app .wrap .card { --muted: #6B6B73; --brass: #9A6B2F; --bad: #B3261E; --good: #2E6B45; }
body.app .wrap .save-bar { background: rgba(232, 236, 238, .94); }
/* Courses page */
.save-bar { position: sticky; bottom: 0; background: var(--wall); padding: 10px 0; }
.add-course summary { cursor: pointer; color: var(--navy); font-weight: 600; margin-top: 8px; }
.link.danger { color: var(--bad); }
/* Helen 2026-09-28: every table has vertical lines between columns */
table { border: 1px solid var(--cell-line); }
th, td { border-left: 1px solid var(--cell-line); }
th:first-child, td:first-child { border-left: 0; }
thead th { border-left-color: rgba(255,255,255,.7); }             /* thin white divider between header cells */
.btn.small { padding: 6px 12px; font-size: 13px; box-shadow: none; text-decoration: none; display: inline-block; }
.card.urgent { border: 2px solid var(--hi-ink); }
/* Administration → Families: parents | students with lines between */
.fam { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
.fam-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fam-line { fill: none; stroke: var(--navy); stroke-width: 2.5; pointer-events: stroke; cursor: pointer; }
.fam-line:hover { stroke: var(--bad); stroke-width: 4; }
.fam-col { display: flex; flex-direction: column; gap: 6px; }
.fam-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; user-select: none; }
#fam-students .fam-item { justify-content: flex-start; }
.fam-item.on { outline: 2px solid var(--orange); }
.fam-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--navy); flex: none; }
.fam-perm { align-items: center; }
@media (max-width: 640px) { .fam { gap: 48px; } }
/* Administration → Teachers & students: teachers | groups | students (same lines as Families) */
.ts { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 90px; }
#ts-students .fam-item, .ts-group { justify-content: flex-start; }
.ts-group { text-decoration: none; color: var(--ink); background: var(--soft); }
.ts-group > span:nth-child(2) { flex: 1; }
.ts-label { font: 11px var(--sans); fill: var(--brass); pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
@media (max-width: 640px) { .ts { gap: 28px; } }
.viewas-bar { background: var(--orange); color: #fff; padding: 8px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.viewas-bar form { margin: 0; }
/* type-to-find (typeahead.js) */
.ta { position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ta > input { flex: 1 1 200px; }
.ta-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto; margin-top: 4px; }
.ta-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; font: 15px var(--sans); cursor: pointer; }
.ta-item.on, .ta-item:hover { background: var(--tint); }
.ta-chips { display: contents; }
.ta-chip { background: var(--band); color: var(--band-ink); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; }
.ta-chip button { border: 0; background: none; cursor: pointer; font-size: 14px; color: inherit; }
/* Administration → Menus */
.menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.menus-list { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.menus-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.menus-sub { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: block; }
.menus-sub li { display: list-item; }
.menus-btns { display: inline-flex; gap: 4px; margin: 0; }
.menus-viewas { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
nav.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); background: none; }
nav.tabs a { color: var(--muted); padding: 8px 14px; border-radius: 10px 10px 0 0; text-decoration: none; font-weight: 600; }
nav.tabs a.on { background: var(--band); color: var(--band-ink); border-bottom: 2px solid var(--band-ink); margin-bottom: -2px; }

/* Helen, 2026-09-29: "字都小一点" — smaller type and tighter spacing on every page at once (all areas' stylesheets
   included). Computers and tablets only: phones keep full size (iOS zooms into inputs under 16px). */
@media (min-width: 900px) {
  body { zoom: 0.96; }                                            /* Helen: 0.85 too small, 0.92 "a bit bigger" */
  .wrap { max-width: calc(var(--page-width) / 0.96); }            /* same page width as before the zoom */
  body.app .wrap { min-height: calc((100vh - 60px) / 0.96); }     /* the page still reaches the bottom of the window */
}

/* 🎤 speak instead of type on every text box (dictate.js) */
.lg-mic { display: inline-flex; gap: 4px; align-items: center; margin: 4px 0; }
.lg-mic-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font-size: 16px; cursor: pointer; }
.lg-mic-btn.on { background: #E0493A; animation: lg-pulse 1.2s infinite; }
.lg-mic-lang { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink); }
@keyframes lg-pulse { 50% { box-shadow: 0 0 0 6px rgba(224,73,58,.25); } }
.chat-compose-row .lg-mic { margin: 0; }
.chat-compose-row .lg-mic-lang { padding: 2px 6px; }

/* the assistant's group-class form (talk.js) */
.talk-form { display: grid; gap: 8px; }
.talk-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.talk-form-row input[type=text] { flex: 1 1 240px; min-width: 0; }
.talk-form-row select { flex: 0 1 200px; }
.talk-form-list { list-style: none; margin: 0; padding: 8px 10px; background: var(--soft); border-radius: 8px; min-height: 60px;
                  display: flex; flex-wrap: wrap; gap: 6px 14px; }
.talk-form .btn:not(.small) { justify-self: start; }

/* Helen's (admin) menu: a small dot per item for who else uses the page (menus.audience); legend in Administration.
   Colours checked for colour-blind separation on the dark bar; the title tooltip and hidden text say it in words. */
.aud-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 2px; }
.aud-families { background: #3BA86A; }
.aud-teachers { background: #8CC4FF; }
.aud-admin { background: #D45FA8; }
.aud-everyone { background: #FFE066; }
.aud-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; padding: 8px 10px 2px;
  border-top: 1px solid var(--topbar-menu-line); color: var(--topbar-dim); font-size: 12px; }
.aud-legend span { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dashboard: classes soon whose family or teacher has not signed up (schedule/_unreached.html) */
tr.unreached-later td { opacity: .55; }
details.card > summary { cursor: pointer; }
details.card > summary h2 { margin: 0; }