/* ======================================================================================================
   Design System: core.css (the shared look of every app that uses this Design System)
   Load order in an app: core.css, then themes/<brand>.css, then the app's own stylesheet.
   Put class="ds-light" on <body> for the light bar (parents, families, the public), or class="ds-staff" for the
   dark staff bar with its "Staff" tag (teachers, admins, office). Everything else is shared.
   The rules live in DESIGN.md. Never edit an app's synced copy of this file: change it in the Design System folder,
   then run tools/sync_design.py in each app.
   ====================================================================================================== */
:root {
  --bg: #f4f5f9;
  --card: #ffffff;
  --ink: #1b2133;
  --muted: #5f6880;
  --line: #e2e5ee;
  --free: #e9f6ef;
  --free-line: #a9dbbf;
  --free-ink: #11643c;
  --warn: #fff5e6;
  --warn-ink: #8a5300;
  --field-line: #cfd4e0;
  --hover: #fafbfd;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 2px 8px rgba(20, 30, 60, .05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); min-height: 100vh; }
a { color: var(--navy-text); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
.boot { padding: 4rem; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
/* ---------- header ---------- */
.top {
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.top-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 0 16px; min-height: 58px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; color: #fff; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--red); display: grid; place-items: center; font-size: .8rem; overflow: hidden; flex: 0 0 auto; }
.brand-mark.has-logo { background: #fff; width: auto; min-width: 34px; height: 36px; padding: 3px 5px; display: flex; align-items: center; }
.brand-mark.has-logo img { height: 30px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.swatch-row { display: flex; gap: 10px; align-items: center; }
.swatch-row input[type=color] { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--field-line); border-radius: 9px; background: var(--card); }
.brand-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.logo-preview { max-height: 60px; max-width: 220px; display: block; background: #fff; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
.brand small { font-weight: 500; opacity: .75; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav > a, .nav-drop > button { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 7px 11px; border-radius: 8px; font-weight: 500; font-size: .94rem; }
.nav > a:hover, .nav-drop > button:hover, .nav-drop > button[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-drop > button { background: none; border: 0; font-family: inherit; cursor: pointer; }
.nav-drop .menu-pop { left: 0; right: auto; width: 220px; }
.nav > a.active { background: rgba(255, 255, 255, .16); color: #fff; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.top-right .who { opacity: .85; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-top { background: rgba(255, 255, 255, .12); border: 0; color: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.btn-top:hover { background: rgba(255, 255, 255, .22); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; opacity: .9; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.live-dot.off::before { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .25); }
button.live-dot { border: 0; background: var(--warn); color: var(--warn-ink); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; opacity: 1; }
.live-dot[hidden] { display: none; }
.as-banner { background: var(--warn); color: var(--warn-ink); border-bottom: 1px solid #f1d7a8; }
.as-banner .wrap { display: flex; gap: 12px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
/* ---------- layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* Cards side by side in a grid: no stacking gap (it pushed every card after the first one down), equal heights,
   and figures and labels that wrap inside the card instead of spilling out of it */
.grid > .card + .card { margin-top: 0; }
.grid > .card { display: flex; flex-direction: column; min-width: 0; }
.grid > .card > .grid-stats { margin-top: auto !important; padding-top: 12px; }
.grid > .card .grid-stats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important; gap: 10px; }
.grid > .card .grid-stats > div { min-width: 0; overflow-wrap: anywhere; }
.grid > .card h2 { overflow-wrap: anywhere; }
.grid > .card > div:first-child { flex-wrap: wrap; }
/* a row of labels wraps onto two lines rather than spilling out */
.pill { max-width: 100%; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sticky { position: sticky; top: 76px; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .side-first { order: -1; }
}
/* ---------- buttons, forms ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: #c5cad8; background: var(--hover); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-2); border-color: var(--red-2); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-danger { color: var(--red); }
.btn-sm { padding: 5px 10px; font-size: .84rem; border-radius: 7px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
div.field { margin-bottom: 14px; }
div.field > span:first-child { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
.field > span.small.muted { display: block; font-weight: 400; margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--field-line); border-radius: 9px; background: var(--card); color: var(--ink);
}
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; cursor: pointer; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 140px; }
.row > .shrink { flex: 0 0 auto; }
/* ---------- pills, stats ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); white-space: nowrap; }
.pill-open { background: var(--free); color: var(--free-ink); }
.pill-upcoming { background: var(--warn); color: var(--warn-ink); }
.pill-closed { background: #eef0f3; color: #556; }
.pill-draft { background: #f1eefb; color: #5b3fb0; }
.pill-archived { background: #eceef2; color: #4a5263; }
.pill-PLP { background: var(--navy-soft); color: var(--navy); }
.pill-LIA { background: var(--red-soft); color: var(--red); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat b { display: block; font-size: 1.6rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .85rem; }
.bar { height: 7px; background: #e8ebf2; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
/* ---------- banners ---------- */
.banner { border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.banner-open { background: var(--free); color: var(--free-ink); border: 1px solid var(--free-line); }
.banner-upcoming { background: var(--warn); color: var(--warn-ink); border: 1px solid #f1d7a8; }
.banner-closed { background: #eef0f3; color: #445; border: 1px solid #dde0e6; }
.countdown { display: flex; gap: 8px; margin-left: auto; }
.countdown div { background: var(--card); border-radius: 9px; padding: 6px 10px; text-align: center; min-width: 56px; box-shadow: var(--shadow); }
.countdown b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.countdown span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
/* ---------- event hero ---------- */
.hero { background: linear-gradient(135deg, var(--navy) 0%, var(--hero-2) 100%); color: #fff; border-radius: var(--radius); padding: 22px; margin-bottom: 16px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: var(--accent-glow); }
.hero h1 { color: #fff; position: relative; z-index: 1; }
.hero p { margin: .3em 0; opacity: .92; max-width: 760px; position: relative; z-index: 1; }
.hero .meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; opacity: .95; margin-top: 10px; position: relative; z-index: 1; }
.hero .pill { background: rgba(255, 255, 255, .18); color: #fff; }
/* ---------- children tabs, day tabs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab small { font-weight: 500; opacity: .75; margin-left: 4px; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 12px transparent; } }
.empty { text-align: center; color: var(--muted); padding: 18px 8px; }
/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- login ---------- */
.login-wrap { min-height: calc(100vh - 58px); display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 420px; }
.login .card { padding: 26px; }
.login .lang { text-align: right; margin-bottom: 10px; }
.code-input { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.notice { background: var(--warn); color: var(--warn-ink); border-radius: 9px; padding: 10px 12px; font-size: .9rem; margin: 10px 0; }
.notice-red { background: #fdecec; color: #8f1d1d; border: 1px solid #f3c2c2; }
/* blocks parents or launch */
.notice-info { background: #eef1f6; color: #3d4659; }
/* ---------- modal + toast ---------- */
/* A pop-up taller than the screen scrolls with the page behind it, so its buttons can always be reached; a short one
   stays centred (margin: auto in a column that can scroll). */
.modal-back { position: fixed; inset: 0; background: rgba(15, 20, 40, .45); display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; overscroll-behavior: contain; z-index: 50; padding: 24px 16px; animation: fade .15s ease; }
.modal { background: var(--card); color: var(--ink); border-radius: 14px; width: 100%; max-width: 440px; padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); margin: auto 0; flex-shrink: 0; }
.modal-wide { max-width: 640px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(92vw, 460px); }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); animation: fade .2s ease; font-weight: 500; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-title .actions { margin-left: auto; display: flex; gap: 8px; }
@media print {
  body { background: #fff; }
  .wrap { padding: 0; max-width: none; }
  .hero { background: none; color: #000; }
  .hero h1 { color: #000; }
  .hero::after { display: none; }
  .two-col { display: block; }
  tr { page-break-inside: avoid; }
}
/* Admin events list: a heading row for each group (in progress, booking open, drafts, past) */
.tbl tr.ev-group th { background: var(--navy-soft); color: var(--navy); text-transform: none; letter-spacing: 0; font-size: .95rem; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 520px) {
  .top-right { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .top-right .who { display: none; }
  .btn-top { padding: 5px 8px; }
}
/* Roster: the classes and students counts sit centred under their headings and open a list */
.tbl th.ctr, .tbl td.ctr { text-align: center; }
/* Parent menu (☰ Menu) and My details */
.menu-wrap { position: relative; }
.menu-btn { font-weight: 600; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 270px; max-width: calc(100vw - 24px); background: var(--card); color: var(--ink);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 20, 40, .28); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.menu-pop[hidden] { display: none; }
.menu-me { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 0; background: var(--navy-soft); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 6px; cursor: pointer; color: var(--ink); font: inherit; }
.menu-me .small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.menu-me-link { color: var(--navy); font-weight: 600; font-size: .88rem; margin-top: 4px; }
.menu-me:hover { background: #e2e7f6; }
.menu-links { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-links a, .menu-item { display: block; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font: inherit; font-weight: 500;
  background: none; border: 0; cursor: pointer; width: 100%; }
.menu-links a:hover, .menu-item:hover { background: var(--navy-soft); }
.menu-links a.active { background: var(--navy-soft); color: var(--navy); font-weight: 700; }
.who-btn { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 6px 8px; border-radius: 8px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.who-btn:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 640px) {
  /* phones: a short header, then the child, days and teachers straight away; the schedule sits at the bottom */
  .hero { padding: 14px 16px; margin-bottom: 10px; }
  .hero h1 { font-size: 1.25rem; margin: 0 0 2px; }
  .hero::after { display: none; }
  .banner { padding: 8px 12px; font-size: .9rem; }
  .banner-open > span:not(.small) { display: none; }
  /* "Booking open · closes …" on one line */
  .banner-open > .small { margin-left: 0 !important; }
  #pe-side { margin-bottom: 76px; }
}
/* desktop: the links are in the top bar already */
/* keyboard users: one clear outline on everything they can reach (Rec 34), and a "skip to content" link (Rec 3) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #6f9be0; outline-offset: 2px; }
.top a:focus-visible, .top button:focus-visible { outline-color: #fff; }
#main:focus { outline: none; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--card); color: var(--navy-text); border: 2px solid var(--navy-text); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.skip-link:focus { top: 8px; }
.btn-quiet-danger { color: var(--muted); }
.btn-quiet-danger:hover { color: var(--red); background: var(--red-soft); }
.btn-outline-danger { color: var(--red); border-color: #f0b9b9; }
/* phones: 16 px body text (small print stays at least 13 px), easier to read, especially Chinese (Rec 16) */
@media (max-width: 640px) {
  :root { font-size: 16px; }
  .pill { font-size: .8rem; }
}
/* ---------- trips & events, outstanding items, links ---------- */
.pill-trip { background: #e6f4f1; color: #0f6b5c; }
.out-go { color: var(--muted); font-size: 1.3rem; line-height: 1; }
.menu-ext a::after { content: ""; }
.btn-x { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; color: inherit; font: inherit; opacity: .7; }
.btn-x:hover { opacity: 1; }
/* anything hidden stays hidden, whatever its layout (e.g. the Settings tabs' grid of connection cards) */
[hidden] { display: none !important; }
#expf .field > span { font-weight: 600; }
.ic { width: 1.05em; height: 1.05em; vertical-align: -.17em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: .4em; flex-shrink: 0; }
@media (max-width: 640px) {
  #ev-settings .field.shrink { flex-wrap: wrap; max-width: 100%; }
  #ev-settings .field.shrink > span { white-space: normal; flex: 1 1 100%; }
  #ev-settings select, #ev-settings input { max-width: 100%; }
}
/* demo (practice) events */
.pill-demo { background: #6b3fa0; color: #fff; font-weight: 700; letter-spacing: .04em; }
.demo-banner { background: #f3ecfb; color: #3d2160; }
/* ===================== The parent portal (every page a parent sees; body:is(.ds-light, .ds-staff)) =====================
   A calm, native-feeling school app at the craft level of the best phone apps, such as Apple Calendar and Wallet:
   a grouped grey ground, white inset groups without borders, large titles, the next appointment as a pass,
   event kinds as colour bands, school navy as the tint. These rules are shared by the staff side (body.ds-staff),
   except the light bar and sign-in, which stay body.ds-light; the staff layer is at the end of the file. */
body:is(.ds-light, .ds-staff) {
  --ds-ground: #f2f3f7; --ds-ink: #161a26; --ds-sub: #5a6173; --ds-line: rgba(22, 26, 38, .09); --ds-chev: #a8aebb;
  --ds-radius: 18px; --ds-lift: 0 1px 2px rgba(22, 26, 38, .05), 0 6px 20px rgba(22, 26, 38, .06);
  --ds-kind-PLP: var(--navy); --ds-kind-LIA: #15803d;
  background: var(--ds-ground); color: var(--ds-ink);
}
body:is(.ds-light, .ds-staff) ::selection { background: var(--navy-soft); color: var(--ds-ink); }
body.ds-light .wrap { max-width: 1080px; padding-top: 28px; }
body:is(.ds-light, .ds-staff) h1 { font-size: clamp(1.8rem, 1.35rem + 1.6vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
body:is(.ds-light, .ds-staff) .page-head { margin-bottom: 18px; }
body:is(.ds-light, .ds-staff) .page-head .muted { font-size: 1rem; color: var(--ds-sub); max-width: 60ch; margin-top: 4px !important; }
body:is(.ds-light, .ds-staff) .muted { color: var(--ds-sub); }
/* groups and cards: borderless white, 18px corners, the rest shadow (The No Borders Rule). Low specificity, so an
   app's own card rules still win. */
:where(body.ds-light, body.ds-staff) .card { border: 0; border-radius: var(--ds-radius); box-shadow: 0 1px 2px rgba(22, 26, 38, .04); }
/* the bar: light and translucent, the school's logo leads, navy only as the tint */
body.ds-light .top { background: rgba(255, 255, 255, .86); color: var(--ds-ink); box-shadow: 0 1px 0 var(--ds-line);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
body.ds-light .brand { color: var(--ds-ink); }
body.ds-light .brand small { color: var(--ds-sub); opacity: 1; }
body.ds-light .nav > a, body.ds-light .nav-drop > button { color: var(--ds-sub); font-weight: 600; }
body.ds-light .nav > a:hover, body.ds-light .nav-drop > button:hover, body.ds-light .nav-drop > button[aria-expanded="true"] { background: var(--ds-ground); color: var(--ds-ink); }
body.ds-light .nav > a.active { background: var(--navy-soft); color: var(--navy); }
body.ds-light .btn-top { background: var(--ds-ground); color: var(--ds-ink); font-weight: 600; }
body.ds-light .btn-top:hover { background: #e5e7ee; }
body.ds-light .who-btn { color: var(--ds-ink); text-decoration-color: var(--ds-line); }
body.ds-light .who-btn:hover { background: var(--ds-ground); }
body.ds-light .top a:focus-visible, body.ds-light .top button:focus-visible { outline-color: var(--navy); }
body:is(.ds-light, .ds-staff) .btn { border-radius: 12px; border-color: transparent; background: var(--card); box-shadow: inset 0 0 0 1px var(--ds-line); padding: 10px 16px; }
body:is(.ds-light, .ds-staff) .btn-sm { padding: 7px 12px; border-radius: 10px; }
body:is(.ds-light, .ds-staff) .btn-primary { background: var(--navy); color: #fff; box-shadow: none; }
body:is(.ds-light, .ds-staff) .btn-primary:hover { background: var(--navy-2); }
body:is(.ds-light, .ds-staff) .pill { padding: 4px 10px; font-weight: 600; }
body:is(.ds-light, .ds-staff) .out-go { color: var(--ds-chev); font-size: 1.5rem; line-height: 1; }
/* the booking page */
body:is(.ds-light, .ds-staff) .hero { border-radius: 22px; }
@keyframes ds-settle { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes ds-draw { to { stroke-dashoffset: 0; } }
@keyframes ds-glow { 0% { transform: none; box-shadow: 0 1px 2px rgba(22, 26, 38, .04); } 40% { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 26, 38, .12); } 100% { transform: none; box-shadow: 0 1px 2px rgba(22, 26, 38, .04); } }
@keyframes ds-fold { from { opacity: .4; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* phones: dialogs rise as bottom sheets */
@media (max-width: 640px) {
  body.ds-light .wrap { padding-top: 20px; }
  body:is(.ds-light, .ds-staff) .modal-back { justify-content: flex-end; padding: 0; }
  body:is(.ds-light, .ds-staff) .modal { max-width: none; border-radius: 22px 22px 0 0; margin: 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; }
  body:is(.ds-light, .ds-staff) .modal::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: #d5d8e0; margin: -10px auto 14px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  body:is(.ds-light, .ds-staff) .modal { animation: ds-sheet .32s cubic-bezier(.2, .9, .25, 1); }
}
@keyframes ds-sheet { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
body:is(.ds-light, .ds-staff) .pill-LIA { background: #e7f5ec; color: #15803d; }
/* sign-in: one calm card on the grouped ground */
body.ds-light .login .card { padding: 28px 24px; border-radius: 22px; box-shadow: var(--ds-lift); }
body.ds-light .login h1 { font-size: 1.75rem; }
body.ds-light .code-input { border-radius: 14px; }
/* ---- parent look, round 2 ---- */
body:is(.ds-light, .ds-staff) { accent-color: var(--navy); caret-color: var(--navy); --ds-kind-trip: #9a4a07; }
body:is(.ds-light, .ds-staff) .page-head { margin-bottom: 12px; }
body:is(.ds-light, .ds-staff) .page-head .muted { text-wrap: pretty; }
/* buttons that keep their own colour */
body:is(.ds-light, .ds-staff) .btn-red { background: var(--red); color: #fff; box-shadow: none; }
body:is(.ds-light, .ds-staff) .btn-red:hover { background: var(--red-2); }
body:is(.ds-light, .ds-staff) .btn-ghost { background: transparent; box-shadow: none; }
body:is(.ds-light, .ds-staff) .btn-ghost:hover { background: rgba(22, 26, 38, .05); }
body:is(.ds-light, .ds-staff) .btn-outline-danger { box-shadow: inset 0 0 0 1px #f0b9b9; }
/* headers: one solid band per kind (navy conferences, green class visits, amber trips) */
@media screen {
  body:is(.ds-light, .ds-staff) .hero { background: var(--ds-kind-PLP); }
  body:is(.ds-light, .ds-staff) .hero::after { display: none; }
  body:is(.ds-light, .ds-staff) .hero-k-LIA { background: var(--ds-kind-LIA); }
  body:is(.ds-light, .ds-staff) .hero-k-trip { background: var(--ds-kind-trip); }
}
body:is(.ds-light, .ds-staff) .pill-trip { background: #fdf0dc; color: #8a4b00; }
/* drawn icons in place of text glyphs */
body:is(.ds-light, .ds-staff) .menu-btn .ic { margin-right: .35em; }
body:is(.ds-light, .ds-staff) .caret .ic { margin: 0 0 0 .25em; width: .9em; height: .9em; stroke-width: 2.4; }
body:is(.ds-light, .ds-staff) .out-go { font-size: 1rem; display: inline-flex; }
body:is(.ds-light, .ds-staff) .out-go .ic { margin: 0; width: 18px; height: 18px; stroke-width: 2.4; }
body:is(.ds-light, .ds-staff) .pill .ic:only-child { margin: 0; }
@keyframes ds-sheen { to { transform: translateX(110%); } }
@keyframes ds-twinkle { 0%, 100% { transform: none; } 40% { transform: rotate(18deg) scale(1.12); } 70% { transform: rotate(-6deg) scale(.98); } }
.btn-arrow { display: inline-flex; margin-left: .4em; }
.btn-arrow .ic { margin: 0; width: 1em; height: 1em; stroke-width: 2.4; }
/* ======================================================================================================
   The staff side (teachers, admins, office): the parent world's working twin. Same ground, groups, type and
   colours (the rules above apply to body.ds-staff too); what differs is a dark ink staff bar with a "Staff" tag, so
   staff who are also parents always know which side they are on, plus the working parts parents never see:
   tables, stat strips, forms, attendance.
   ====================================================================================================== */
body.ds-staff { --ds-staff-bar: #141a2e; }
body.ds-staff .wrap { max-width: 1240px; padding-top: 28px; }
/* the staff bar: dark ink, white logo and name, a small "Staff" tag */
body.ds-staff .top { background: var(--ds-staff-bar); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.ds-staff .brand { color: #fff; }
body.ds-staff .brand small { color: rgba(255, 255, 255, .62); opacity: 1; }
.staff-tag { display: none; }
body.ds-staff .staff-tag { display: inline-flex; align-items: center; margin-left: -6px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
body.ds-staff .nav > a, body.ds-staff .nav-drop > button { color: rgba(255, 255, 255, .72); font-weight: 600; }
body.ds-staff .nav > a:hover, body.ds-staff .nav-drop > button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.ds-staff .nav > a.active { background: rgba(255, 255, 255, .14); color: #fff; }
body.ds-staff .btn-top { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; border-radius: 10px; }
body.ds-staff .btn-top:hover { background: rgba(255, 255, 255, .18); }
body.ds-staff .top .who { color: rgba(255, 255, 255, .72); }
body.ds-staff .top a:focus-visible, body.ds-staff .top button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.ds-staff .top .ic { margin-right: .35em; }
body.ds-staff .caret .ic { margin: 0 0 0 .25em; width: .9em; height: .9em; stroke-width: 2.4; }
body.ds-staff .menu-pop { border: 0; border-radius: 14px; box-shadow: 0 12px 32px rgba(22, 26, 38, .18), 0 1px 2px rgba(22, 26, 38, .08); }
.menu-item .ic, .menu-links .ext .ic { margin: 0 .45em 0 0; }
.menu-links .ext { display: inline-flex; margin-left: .35em; color: var(--muted); }
.menu-links .ext .ic { margin: 0; width: .9em; height: .9em; }
.menu-me-link .ic { margin: 0 0 0 .2em; width: .9em; height: .9em; vertical-align: -.1em; }
body.ds-staff .as-banner { background: #fff3db; border-bottom: 0; }
/* page head: one quiet line of actions; back pills carry a drawn arrow */
body.ds-staff .page-head .actions { gap: 8px; }
body.ds-staff .page-head .pill .ic:first-child { margin-right: .3em; }
/* tables: a white group with hairline rows and plain sentence-case headings */
body.ds-staff .card:has(> .table-wrap), body.ds-staff .card[style*="padding:0"] { overflow: hidden; }
body.ds-staff .tbl th { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: var(--ds-sub); background: #fafbfc;
  border-bottom: 1px solid var(--ds-line); padding: 10px 12px; }
body.ds-staff .tbl td { border-bottom: 1px solid var(--ds-line); padding: 12px; }
body.ds-staff .tbl tbody tr { transition: background .12s ease-out; }
body.ds-staff .tbl tbody tr:hover { background: #fafbfc; }
body.ds-staff .tbl tr.ev-group th { background: var(--navy-soft); }
body.ds-staff .tbl .num, body.ds-staff .stat b, body.ds-staff .grid-stats b { font-variant-numeric: tabular-nums; }
/* stats: one quiet strip, not a wall of tiles */
body.ds-staff .grid-stats:has(> .stat) { gap: 0; background: var(--card); border-radius: var(--ds-radius); box-shadow: 0 1px 2px rgba(22, 26, 38, .04); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
body.ds-staff .stat { border: 0; border-radius: 0; background: none; box-shadow: inset -1px 0 0 var(--ds-line), inset 0 -1px 0 var(--ds-line); padding: 14px 18px; }
body.ds-staff .stat b { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
body.ds-staff .stat span { color: var(--ds-sub); }
/* tabs and day pills: rounded, white with a hairline, navy when chosen */
body.ds-staff .tab { border: 0; box-shadow: inset 0 0 0 1px var(--ds-line); }
body.ds-staff .tab.active { box-shadow: none; }
/* forms: 12px fields with a visible edge, navy focus */
body.ds-staff input[type=text], body.ds-staff input[type=email], body.ds-staff input[type=tel], body.ds-staff input[type=url], body.ds-staff input[type=number], body.ds-staff input[type=date],
body.ds-staff input[type=time], body.ds-staff input[type=datetime-local], body.ds-staff input[type=search], body.ds-staff input[type=password], body.ds-staff select, body.ds-staff textarea {
  border-radius: 12px; border-color: var(--ds-field, #d6d9e2); padding: 10px 12px; }
body.ds-staff input:focus, body.ds-staff select:focus, body.ds-staff textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--navy); }
body.ds-staff details > summary { cursor: pointer; }
/* notices: tinted panels with no side stripe */
body.ds-staff .notice { border-radius: 14px; padding: 12px 14px; }
body.ds-staff .notice .ic { margin-right: .35em; }
body.ds-staff .demo-banner { border-left: 0; }
/* homeroom marks and other small drawn icons inline with names */
body.ds-staff td .ic, body.ds-staff h2 .ic, body.ds-staff .check .ic { vertical-align: -.15em; }
@media (max-width: 640px) {
  body.ds-staff .wrap { padding-top: 20px; }
  body.ds-staff .staff-tag { margin-left: -4px; }
  body.ds-staff .grid-stats:has(> .stat) { grid-template-columns: repeat(2, 1fr); }
}
/* event pages on the staff side: the event's own colour band (navy conference, green class visit), actions below */
body.ds-staff .page-head:has(> .staff-hero) { display: block; }
body.ds-staff .staff-hero { background: var(--ds-kind-PLP); color: #fff; border-radius: 22px; padding: 20px 22px 22px; margin-bottom: 14px; }
body.ds-staff .staff-hero.hero-k-LIA { background: var(--ds-kind-LIA); }
body.ds-staff .staff-hero h1 { color: #fff; margin: 6px 0 4px; }
body.ds-staff .staff-hero .muted, body.ds-staff .staff-hero > div:last-child { color: rgba(255, 255, 255, .82); }
body.ds-staff .staff-hero .pill { background: rgba(255, 255, 255, .18); color: #fff; }
body.ds-staff .staff-hero .pill-demo { background: #fff; color: #6b3fa0; }
body.ds-staff .page-head:has(> .staff-hero) > .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.ds-staff .grid-stats:has(> .stat) { margin: 16px 0 !important; }
body.ds-staff .card + .grid-stats { margin-top: 16px; }
/* What's next on phones: the label sits above its line, so the text gets the full width */
@media (max-width: 640px) {
  body.ds-staff .grid-stats:has(> .stat) { grid-template-columns: repeat(3, 1fr); }
  body.ds-staff .stat { padding: 12px 14px; }
  body.ds-staff .stat b { font-size: 1.25rem; }
  body.ds-staff .stat span { font-size: .78rem; }
}
.pill-interp { background: #eef0f5; color: #3d4659; }
.pill-interp .ic { margin-right: .3em; }
/* a quiet, meaning-free pill (e.g. "Never signed in") */
.pill-quiet { background: #eef0f5; color: #3d4659; }
/* staff bar on wider screens: a deliberate two-row bar, brand and tools above, the pages below */
@media (min-width: 641px) {
  body.ds-staff .top-inner { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "brand tag right" "nav nav nav"; column-gap: 14px; row-gap: 0; padding-top: 10px; min-height: 0; }
  body.ds-staff .top-inner > .brand { grid-area: brand; }
  body.ds-staff .top-inner > .staff-tag { grid-area: tag; margin-left: -4px; justify-self: start; }
  body.ds-staff .top-inner > .top-right { grid-area: right; justify-self: end; margin-left: 0; }
  body.ds-staff .top-inner > .nav { grid-area: nav; margin: 10px -16px 0; padding: 6px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
}
/* staff event pages on phones: the primary action, then one sideways row of compact secondaries; the numbers
   as one strip that scrolls sideways, with no empty cells */
@media (max-width: 640px) {
  body.ds-staff .page-head:has(> .staff-hero) > .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  body.ds-staff .page-head:has(> .staff-hero) > .actions::-webkit-scrollbar { display: none; }
  body.ds-staff .page-head:has(> .staff-hero) > .actions .btn { flex: 0 0 auto; padding: 8px 12px; font-size: .88rem; white-space: nowrap; }
  body.ds-staff .page-head:has(> .staff-hero) > .actions .btn-primary { order: -1; }
  body.ds-staff .grid-stats:has(> .stat) { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr);
    overflow-x: auto; scrollbar-width: none; }
  body.ds-staff .grid-stats:has(> .stat)::-webkit-scrollbar { display: none; }
  body.ds-staff .stat { box-shadow: inset -1px 0 0 var(--ds-line); }
  body.ds-staff .stat:last-child { box-shadow: none; }
}
@media (max-width: 640px) {
  body.ds-staff .grid-stats:has(> .stat) { grid-auto-columns: max-content; }
  body.ds-staff .stat span { white-space: nowrap; }
  body.ds-staff .stat { padding-right: 22px; }
}
/* staff event pages on phones: the primary across the full width, then the other actions as equal compact tiles
   (icon over label) that all fit; the counts all fit too, labels may take two lines */
@media (max-width: 640px) {
  body.ds-staff .page-head:has(> .staff-hero) > .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 8px; }
  body.ds-staff .page-head:has(> .staff-hero) > .actions .btn-primary { grid-column: 1 / -1; justify-content: center; padding: 11px 14px; font-size: .95rem; }
  body.ds-staff .page-head:has(> .staff-hero) > .actions .btn:not(.btn-primary) { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 6px;
    font-size: .78rem; line-height: 1.2; white-space: normal; text-align: center; min-height: 58px; }
  body.ds-staff .page-head:has(> .staff-hero) > .actions .btn:not(.btn-primary) .ic { margin: 0; width: 18px; height: 18px; }
  body.ds-staff .grid-stats:has(> .stat) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  body.ds-staff .stat { padding: 10px 8px 11px 10px; }
  body.ds-staff .stat b { font-size: 1.15rem; }
  body.ds-staff .stat span { white-space: normal; font-size: .72rem; line-height: 1.25; display: block; }
}
/* stat strips with five or more numbers, on phones: they wrap instead of squeezing into one row. Six go three
   across in two rows; any other count goes two across, and an odd last number takes the whole row. Hairlines
   between cells, none on the outer edge. Strips of four or fewer keep the one-row rule above. */
@media (max-width: 640px) {
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) > .stat { box-shadow: inset -1px 0 0 var(--ds-line), inset 0 -1px 0 var(--ds-line); padding: 12px 14px; }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) > .stat:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--ds-line); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; box-shadow: none; }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) > .stat:last-child,
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) > .stat:nth-last-child(2):nth-child(odd) { box-shadow: inset -1px 0 0 var(--ds-line); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) > .stat:last-child:nth-child(even) { box-shadow: none; }
  body.ds-staff .grid-stats:has(> .stat:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(6):last-child) > .stat { box-shadow: inset -1px 0 0 var(--ds-line), inset 0 -1px 0 var(--ds-line); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(6):last-child) > .stat:nth-child(3n) { box-shadow: inset 0 -1px 0 var(--ds-line); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(6):last-child) > .stat:nth-child(n+4) { box-shadow: inset -1px 0 0 var(--ds-line); }
  body.ds-staff .grid-stats:has(> .stat:nth-child(6):last-child) > .stat:last-child { box-shadow: none; }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) .stat b { font-size: 1.25rem; }
  body.ds-staff .grid-stats:has(> .stat:nth-child(4)) .stat span { font-size: .78rem; }
}
/* tables on phones: a table marked tbl-cards shows each row as a small card. The first cell (or .tc-main) is the
   card's title across the full width; the others sit two across with their column name before the value
   (data-label, set by the app from the table heading; a first row of headings with no thead is marked .tc-head). Cells marked .tc-fold stay folded until the row is opened
   (.tc-open, toggled by a "More" button, .tc-more, that only shows on phones); .tc-acts holds the row's buttons. */
.tbl-cards .tc-more { display: none; }
@media (max-width: 640px) {
  .tbl-cards thead, .tbl-cards tr.tc-head { display: none; }
  .tbl-cards tr { position: relative; }
  .tbl-cards, .tbl-cards tbody { display: block; width: 100%; }
  .tbl-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--ds-line); }
  .tbl-cards tbody tr:last-child { border-bottom: 0; }
  .tbl-cards td, .tbl-cards th { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; overflow-wrap: break-word; white-space: normal; }
  .tbl-cards td.tc-main, .tbl-cards td.tc-acts, .tbl-cards td.tc-wide { grid-column: 1 / -1; }
  .tbl-cards td.tc-main { font-weight: 600; }
  .tbl-cards td.tc-acts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
  .tbl-cards td.tc-opt:empty, .tbl-cards td.tc-empty { display: none; }
  .tbl-cards td[data-label]::before { content: attr(data-label); display: block; color: var(--ds-sub); font-size: .76rem; font-weight: 500; line-height: 1.3; }
  .tbl-cards tr:not(.tc-open) > td.tc-fold { display: none; }
  .tbl-cards .tc-more { display: inline-flex; float: right; margin: -2px 0 0 8px; font-weight: 500; }
}
/* DEMO (practice) events look like a sandbox: yellow-and-black hazard stripes, so nobody mistakes one for the
   real thing. The only striped surface in the system, and only for demo events. */
:root { --demo-yellow: #f5c518; --demo-ink: #161a26;
  --demo-stripes: repeating-linear-gradient(-45deg, var(--demo-yellow) 0 12px, var(--demo-ink) 12px 24px); }
body.ds-staff .staff-hero.is-demo { position: relative; overflow: hidden; padding-top: 32px; }
body.ds-staff .staff-hero.is-demo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--demo-stripes); }
.demo-banner, body.ds-staff .demo-banner { position: relative; overflow: hidden; background: #fff6cc; color: #3a2f00; border: 0; padding-top: 20px; }
.demo-banner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--demo-stripes); }
/* ======================================================================================================
   Dark mode (opt-in). Nothing here applies unless the app sets data-theme="dark" on <html>, so apps that never
   set it look exactly as before. The theme colour stays the action colour (white text on it keeps its contrast);
   where the theme colour is used as text or a tint on a dark surface, --navy-text and --navy-soft are lightened.
   ====================================================================================================== */
:root { --navy-text: var(--navy); }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1218; --card: #1a1f29; --ink: #e8eaf0; --muted: #a3aab9; --line: #2c3340;
  --free: #12301f; --free-line: #2a6343; --free-ink: #8fe0b3;
  --warn: #33270f; --warn-ink: #f3c77a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --navy-text: color-mix(in srgb, var(--navy) 45%, #fff);
  --navy-soft: color-mix(in srgb, var(--navy) 35%, #1a1f29);
  --navy-line: color-mix(in srgb, var(--navy) 60%, #1a1f29);
  --red-soft: #3a1714;
  --field-line: #384050; --hover: #232a36; --ds-field: #384050;
  --focus: color-mix(in srgb, var(--navy-text) 45%, transparent);
}
:root[data-theme="dark"] body:is(.ds-light, .ds-staff) {
  --ds-ground: #0f1218; --ds-ink: #e8eaf0; --ds-sub: #a3aab9; --ds-line: rgba(255, 255, 255, .1); --ds-chev: #6b7385;
  --ds-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); --ds-staff-bar: #0a0d14;
}
:root[data-theme="dark"] body:is(.ds-light, .ds-staff) .btn-ghost:hover { background: rgba(255, 255, 255, .06); }
/* logos keep a white mat, so dark logos stay visible */
:root[data-theme="dark"] :is(.brand-mark.has-logo, .logo-preview) { background: #fff; }
/* pills, notices and banners: dark tints of the same meanings */
:root[data-theme="dark"] .pill-closed, :root[data-theme="dark"] .pill-archived,
:root[data-theme="dark"] .pill-interp, :root[data-theme="dark"] .pill-quiet { background: #262c38; color: #c3c8d4; }
:root[data-theme="dark"] .pill-draft { background: #2a2342; color: #c4b5f5; }
:root[data-theme="dark"] .pill-PLP { color: var(--navy-text); }
:root[data-theme="dark"] .pill-LIA { color: #f19b93; }
:root[data-theme="dark"] body:is(.ds-light, .ds-staff) .pill-LIA { background: #12301f; color: #8fe0b3; }
:root[data-theme="dark"] :is(.pill-trip, body:is(.ds-light, .ds-staff) .pill-trip) { background: #3a2a10; color: #f3c77a; }
:root[data-theme="dark"] .notice-red { background: #3a1714; color: #f5b4ae; border-color: #6b2a24; }
:root[data-theme="dark"] .notice-info { background: #222936; color: #c3c8d4; }
:root[data-theme="dark"] .banner-closed { background: #222936; color: #c3c8d4; border-color: #2c3340; }
:root[data-theme="dark"] .banner-upcoming, :root[data-theme="dark"] .as-banner,
:root[data-theme="dark"] body.ds-staff .as-banner { background: var(--warn); color: var(--warn-ink); border-color: #5c4519; }
:root[data-theme="dark"] .demo-banner, :root[data-theme="dark"] body.ds-staff .demo-banner { background: #2f2a0c; color: #f3e39a; }
:root[data-theme="dark"] .bar { background: #2c3340; }
:root[data-theme="dark"] .bar i { background: var(--navy-text); }
:root[data-theme="dark"] .menu-me:hover { background: #262c38; }
:root[data-theme="dark"] body:is(.ds-light, .ds-staff) .btn-outline-danger { box-shadow: inset 0 0 0 1px #6b2a24; color: #f19b93; }
:root[data-theme="dark"] body:is(.ds-light, .ds-staff) .modal::before { background: #3a4150; }
/* the light bar becomes a dark translucent bar; the staff bar stays darkest */
:root[data-theme="dark"] body.ds-light .top { background: rgba(20, 24, 32, .86); }
:root[data-theme="dark"] body.ds-light .nav > a.active { color: var(--navy-text); }
:root[data-theme="dark"] body.ds-light .btn-top:hover { background: #262c38; }
:root[data-theme="dark"] body.ds-light .top a:focus-visible, :root[data-theme="dark"] body.ds-light .top button:focus-visible { outline-color: var(--navy-text); }
/* staff tables and forms */
:root[data-theme="dark"] body.ds-staff .tbl th { background: #161b24; }
:root[data-theme="dark"] body.ds-staff .tbl tbody tr:hover { background: #1f2530; }
:root[data-theme="dark"] body.ds-staff :is(input, select, textarea):focus { border-color: var(--navy-text); }
:root[data-theme="dark"] body:is(.ds-light, .ds-staff) ::selection { background: var(--navy-soft); color: var(--ink); }
/* Chinese headings are never pulled tight (DESIGN.md, the Square Glyph Rule): negative tracking is for Latin titles;
   Chinese characters already sit in full-width squares. Applies when the page says lang="zh-CN" (or any zh). */
body:is(.ds-light, .ds-staff):lang(zh) :is(h1, h2, h3, .section-title) { letter-spacing: 0; }