/*
 * Nexora — interface styles.
 * Typeface: IBM Plex Sans + IBM Plex Sans Arabic (SIL OFL, self-hosted in /font), as on racweb.org.
 * One stylesheet, no framework. Colours are tokens on :root.
 */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../font/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../font/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../font/IBMPlexSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../font/IBMPlexSansArabic-Regular.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../font/IBMPlexSansArabic-Bold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  /* RacWeb brand colours (racweb.org): teal #0E8A7E / #0B6F66, charcoal #1C2B36, signal orange #E8772E */
  --ink: #1C2B36;          /* charcoal: text, admin chrome */
  --ink-soft: #5B6B76;     /* secondary text */
  --brand: #0E8A7E;        /* RacWeb teal: accents, active items */
  --brand-dark: #0B6F66;   /* teal for buttons and links (contrast AA with white) */
  --paper: #F6F9F8;        /* page background */
  --surface: #FFFFFF;      /* panels, tables */
  --rule: #D5DEDC;         /* borders and dividers */
  --tint: #EEF3F2;         /* hover rows, sidebar (tenant) */
  --signal: #E8772E;       /* RacWeb orange: platform-admin marker and focus ring */
  --planned: #7FB8B1;      /* dashed outlines of planned modules */
  --ok: #1F7A4D;
  --warn: #8A5A00;
  --bad: #B3261E;
  --radius-s: 3px;
  --radius-m: 6px;
  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 3.052rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.55;
}
img, svg { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; max-width: 68ch; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.skip { position: absolute; inset-inline-start: -999px; top: 0; background: var(--signal); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { inset-inline-start: 0.5rem; top: 0.5rem; }

/* ---------- App shell (workspace + admin) ---------- */
.shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.side {
  background: var(--tint); border-inline-end: 1px solid var(--rule);
  padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.5rem;
}
.side .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; text-decoration: none; }
.side .brand img { width: 28px; height: 28px; }
.side .org { font-weight: 700; font-size: var(--step-1); line-height: 1.25; }
.side .org small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); }
.side nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side nav a {
  display: block; padding: 0.45rem 0.6rem; border-radius: var(--radius-s); text-decoration: none;
}
.side nav a:hover { background: rgba(18, 58, 64, 0.08); }
.side nav a[aria-current="page"] { background: var(--brand-dark); color: #fff; }
.side .foot { margin-top: auto; font-size: var(--step--1); }

/* Platform admin: inverted chrome + signal bar, so staff always know where they are. */
.shell.admin .side { background: var(--ink); color: #E8F0EF; border-inline-end: 0; }
.shell.admin .side a { color: #E8F0EF; }
.shell.admin .side nav a:hover { background: rgba(255, 255, 255, 0.08); }
.shell.admin .side nav a[aria-current="page"] { background: #E8F0EF; color: var(--ink); }
.shell.admin .side .org small { color: #A9C2C0; }
.admin-flag { border-inline-start: 4px solid var(--signal); padding-inline-start: 0.6rem; font-weight: 700; }

.main { padding: 2rem clamp(1rem, 4vw, 3rem) 4rem; max-width: 72rem; width: 100%; }
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.top h1 { margin: 0; }
.crumbs { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.25rem; }
.crumbs a { color: var(--ink-soft); }

@media (max-width: 52rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side, .side nav { min-width: 0; }
  .side { border-inline-end: 0; border-bottom: 1px solid var(--rule); gap: 0.75rem; }
  .side nav ul { grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; }
  .side .foot { margin-top: 0; }
}

/* ---------- Content blocks ---------- */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 1.25rem; margin-bottom: 1.5rem; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; margin-bottom: 1.5rem; }
.figures div { background: var(--surface); padding: 1rem 1.25rem; }
.figures strong { display: block; font-size: var(--step-3); line-height: 1.1; }
.figures span { color: var(--ink-soft); font-size: var(--step--1); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: start; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 700; color: var(--ink-soft); background: #FAFBFB; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #F9FBFA; }
td.actions { text-align: end; white-space: nowrap; }
th a { color: inherit; }

/* Status labels — word first, colour second */
.status { display: inline-block; font-size: var(--step--1); padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.status.active, .status.accepted, .status.on { color: var(--ok); }
.status.suspended, .status.pending, .status.disabled, .status.provisioning { color: var(--warn); }
.status.removed, .status.revoked, .status.pending_deletion, .status.deleted, .status.expired { color: var(--bad); }
.status.off { color: var(--ink-soft); }
.chip { display: inline-block; font-size: var(--step--1); background: var(--tint); padding: 0.05rem 0.45rem; border-radius: var(--radius-s); margin: 0 0.2rem 0.2rem 0; }

/* ---------- Forms ---------- */
form .field { margin-bottom: 1.1rem; max-width: 34rem; }
label, .label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.hint { font-size: var(--step--1); color: var(--ink-soft); margin: 0.25rem 0 0; }
input[type=text], input[type=email], input[type=search], input[type=url], input[type=password], input[type=tel], select, textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1px solid #9DB3B0; border-radius: var(--radius-s); padding: 0.5rem 0.65rem;
}
input[type=password] { letter-spacing: 0.08em; }
input[type=password]::placeholder { letter-spacing: normal; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(14, 138, 126, 0.18); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--bad); }
textarea { min-height: 7rem; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.error-message { color: var(--bad); font-size: var(--step--1); margin-top: 0.25rem; }
.field.error input, .field.error select, .field.error textarea { border-color: var(--bad); }
fieldset { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.75rem 1rem; margin: 0 0 1.1rem; max-width: 34rem; }
legend { font-weight: 700; padding: 0 0.3rem; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; margin: 0.35rem 0; }
.check input { margin-top: 0.3rem; }
.inline-form { display: inline; }
.searchbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; max-width: 40rem; }
.searchbar input, .searchbar select { flex: 1 1 12rem; width: auto; }

.btn, button {
  font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-s); border: 1px solid var(--brand-dark);
  background: var(--brand-dark); color: #fff; text-decoration: none; line-height: 1.3;
}
.btn:hover, button:hover { background: #09574F; border-color: #09574F; }
.btn.secondary, button.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover, button.secondary:hover { background: var(--tint); }
.btn.danger, button.danger { background: var(--bad); border-color: var(--bad); }
.btn.link, button.link { background: none; border: 0; color: var(--brand-dark); padding: 0; text-decoration: underline; font-weight: 400; }
.btn.small, button.small { padding: 0.2rem 0.6rem; font-size: var(--step--1); }

/* Flash messages */
.flash { border-inline-start: 4px solid var(--brand); background: var(--surface); padding: 0.75rem 1rem; margin-bottom: 1rem; border-start-end-radius: var(--radius-s); border-end-end-radius: var(--radius-s); }
.flash.success { border-color: var(--ok); }
.flash.error { border-color: var(--bad); }
.flash.warning { border-color: var(--warn); }

/* One-time secret display (invitation links) */
.once { background: #FFFBEA; border: 1px solid #E8D58E; border-radius: var(--radius-m); padding: 1rem 1.25rem; }
.once input { font-size: 0.9rem; margin: 0.5rem 0; }

.danger-zone { border-color: #E3B4B0; }
.empty { padding: 2rem 1.25rem; text-align: center; color: var(--ink-soft); }
.pagination { display: flex; gap: 0.75rem; align-items: center; font-size: var(--step--1); }
.pagination ul { list-style: none; display: flex; gap: 0.25rem; padding: 0; margin: 0; }
.pagination li a, .pagination li span { padding: 0.2rem 0.55rem; border-radius: var(--radius-s); display: inline-block; }
.pagination li.active a { background: var(--brand-dark); color: #fff; }
.pagination li.disabled { color: var(--ink-soft); }

.devbar { background: var(--bad); color: #fff; text-align: center; padding: 0.35rem; font-weight: 700; font-size: var(--step--1); }

/* ---------- Module plan (the signature element) ---------- */
.plan {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto;
  gap: 0.75rem; max-width: 40rem;
}
.room {
  border: 2px dashed var(--planned); border-radius: var(--radius-s); padding: 0.9rem 1rem; min-height: 6.5rem;
  display: flex; flex-direction: column; justify-content: space-between; background: transparent; color: var(--ink);
}
.room b { font-size: var(--step-0); }
.room span { font-size: var(--step--1); color: var(--ink-soft); }
.room.core { grid-column: 2; grid-row: 2; border: 0; background: var(--ink); color: #fff; }
.room.core span { color: #C9D3DA; }
.room.core::after { content: ""; display: block; width: 1.5rem; height: 0.35rem; background: var(--signal); margin-top: 0.5rem; }
.room.built { border-style: solid; border-color: var(--ink); background: var(--surface); }
.plan .r-edu { grid-column: 1; grid-row: 1; }
.plan .r-health { grid-column: 3; grid-row: 1; }
.plan .r-public { grid-column: 1; grid-row: 3; }
.plan .r-devices { grid-column: 3; grid-row: 3; }
.plan .r-future { grid-column: 2; grid-row: 1; }
.plan .r-future2 { grid-column: 2; grid-row: 3; }
@media (max-width: 34rem) {
  .plan { grid-template-columns: 1fr 1fr; }
  .plan .room { grid-column: auto !important; grid-row: auto !important; }
  .room.core { grid-column: 1 / -1 !important; order: -1; }
}

/* Workspace modules list uses the same rooms */
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.modules .room { min-height: 9rem; }
.modules .room form { margin-top: 0.75rem; }

/* ---------- Public site ---------- */
.pub-head { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 0.85rem clamp(1rem, 5vw, 4rem); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.pub-head.scrolled { border-bottom-color: var(--rule); box-shadow: 0 6px 18px -16px rgba(28, 43, 54, 0.5); }
.pub-head .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: var(--step-1); text-decoration: none; flex: none; }
.pub-head .brand img { width: 34px; height: 34px; }
.pub-head .brand span { display: flex; flex-direction: column; line-height: 1.05; }
.pub-head .brand small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
[dir="rtl"] .pub-head .brand small { letter-spacing: 0; }
.pub-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex: 1; }
.pub-links { display: flex; gap: 0.25rem; align-items: center; margin-inline: auto; }
.pub-links a { padding: 0.45rem 0.75rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.pub-links a:hover, .pub-links a:focus-visible { background: var(--tint); }
.pub-actions { display: flex; gap: 0.6rem; align-items: center; flex: none; }
.nav-toggle { display: none; }
/* Language drop-down */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; padding: 0.38rem 0.6rem;
  border: 1px solid var(--rule); border-radius: 8px; font-size: 0.9rem; font-weight: 600; user-select: none; background: #fff; color: var(--ink); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { border-color: var(--ink-soft); }
.lang-menu svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-menu .caret { width: 0.9rem; height: 0.9rem; transition: transform 0.2s; }
.lang-menu[open] .caret { transform: rotate(180deg); }
.lang-menu ul { position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 6px); min-width: 11rem; margin: 0; padding: 0.35rem; list-style: none;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 14px 30px -18px rgba(28, 43, 54, 0.55); }
.lang-menu.up ul { top: auto; bottom: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 0; }
.lang-menu li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.95rem; }
.lang-menu li a:hover, .lang-menu li a:focus-visible { background: var(--tint); }
.lang-menu li a[aria-current="true"] { font-weight: 700; background: var(--tint); }
.lang-menu li a[aria-current="true"]::after { content: ""; margin-inline-start: auto; width: 0.35em; height: 0.65em; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lang-code { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.4rem; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.shell.admin .lang-menu summary { background: transparent; color: #E8F0EF; border-color: rgba(255, 255, 255, 0.3); }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem); }
.hero h1 { font-size: clamp(2.2rem, 5vw, var(--step-4)); line-height: 1.05; letter-spacing: -0.02em; max-width: 14ch; }
.hero .lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 36ch; }
.hero .cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.legend { display: flex; gap: 1.25rem; margin-top: 0.9rem; font-size: var(--step--1); color: var(--ink-soft); flex-wrap: wrap; }
.legend i { display: inline-block; width: 0.9rem; height: 0.9rem; vertical-align: -0.12rem; margin-inline-end: 0.35rem; }
.legend .k-core { background: var(--ink); }
.legend .k-planned { border: 2px dashed var(--planned); }
.band { border-top: 1px solid var(--rule); padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 4rem); }
.band .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem 3rem; max-width: 70rem; }
.band h2 { max-width: 30ch; }
.band h3 { font-size: var(--step-0); margin-bottom: 0.35rem; }
.pub-foot { border-top: 1px solid var(--rule); padding: 1.5rem clamp(1rem, 5vw, 4rem); font-size: var(--step--1); color: var(--ink-soft);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 52rem) { .hero { grid-template-columns: 1fr; } }

/* Centered single-purpose pages (login, invitation, errors) */
.solo { max-width: 34rem; margin: 0 auto; padding: clamp(2rem, 8vh, 6rem) 1rem; }
.solo .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; margin-bottom: 2rem; text-decoration: none; }
.solo .brand img { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell.admin .side button.link { color: #E8F0EF; }

/* Right-to-left (Arabic). Layout uses logical properties, so only tune text. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.25; }
[dir="rtl"] code, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* Language switcher */
.lang { display: flex; gap: 0.35rem; font-size: var(--step--1); flex-wrap: wrap; }
.lang a { padding: 0.1rem 0.45rem; border-radius: var(--radius-s); text-decoration: none; border: 1px solid transparent; }
.lang a[aria-current="true"] { border-color: currentColor; font-weight: 700; }
.shell.admin .lang a { color: #E8F0EF; }

/* Grouped sidebar navigation */
.side nav h2 { font-size: var(--step--1); color: var(--ink-soft); margin: 0.9rem 0 0.25rem; font-weight: 700; }
.shell.admin .side nav h2 { color: #A9C2C0; }
.badge { display: inline-block; font-size: 0.75rem; padding: 0 0.4rem; border-radius: var(--radius-s); background: var(--tint); color: var(--ink); vertical-align: middle; }
.badge.paid { background: #FFF4CF; }

/* ---------- Education modules ---------- */
input[type=date], input[type=time], input[type=number], input[type=tel], input[type=file] {
  font: inherit; color: inherit; background: #fff; border: 1px solid #9DB3B0; border-radius: var(--radius-s); padding: 0.45rem 0.6rem; max-width: 100%;
}
input[type=number] { width: 6.5rem; }
input[type=tel] { width: 100%; }
.rowform { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.rowform .field { margin-bottom: 0; flex: 1 1 10rem; max-width: none; }
.rowform .field.narrow { flex: 0 1 8rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; align-items: start; }
.cols > .panel { margin-bottom: 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.facts dt { color: var(--ink-soft); }
dl.facts dd { margin: 0; }
.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.week .day { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.75rem; min-height: 8rem; }
.week .day h3 { margin: 0 0 0.5rem; font-size: var(--step-0); }
.lesson { border-inline-start: 3px solid var(--ink); padding: 0.3rem 0.5rem; margin-bottom: 0.5rem; background: var(--tint); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: var(--step--1); }
[dir=rtl] .lesson { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.lesson b { display: block; font-size: 0.9rem; }
.lesson form { margin-top: 0.2rem; }
.announce { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.announce h2 { margin: 0 0 0.25rem; font-size: var(--step-1); }
.announce .meta { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 0.5rem; }
.announce .body { white-space: pre-line; }
.quota { font-size: var(--step--1); color: var(--ink-soft); }
.quota.full { color: var(--bad); font-weight: 700; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
.errors-list { color: var(--bad); }
.figures strong { overflow-wrap: anywhere; }
@media (max-width: 34rem) {
  .figures { grid-template-columns: 1fr 1fr; }
  .figures strong { font-size: var(--step-1); }
  .main { padding-inline: 0.75rem; }
}

/* Public list of organisations */
.directory { max-width: 56rem; margin: 0 auto; padding: 2rem clamp(1rem, 5vw, 4rem) 4rem; }
.org-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.org-list a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); text-decoration: none; color: var(--ink); height: 100%; }
.org-list a:hover, .org-list a:focus-visible { border-color: var(--ink); }
.org-list .link-text { color: var(--ink-soft); text-decoration: underline; }
@media (max-width: 40rem) {
  .pub-head { flex-wrap: wrap; gap: 0.75rem; }
}
.figures strong.num { font-size: clamp(1.15rem, 2.2vw, var(--step-3)); white-space: nowrap; overflow-wrap: normal; }

/* School life */
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
.plain li:last-child { border-bottom: 0; }
fieldset.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
fieldset.seg label { font-weight: 400; margin: 0; white-space: nowrap; }
table.roll tr.absent td { background: #FBEDEC; }
table.roll tr.late td { background: #FFF6DD; }
form.inline { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
table.results td.ltr, table.results td.num { white-space: nowrap; }

/* LMD */
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--rule); margin: 0 0 1rem; }
.tabs a { padding: 0.45rem 0.9rem; text-decoration: none; color: var(--ink-soft); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); border-color: var(--rule); font-weight: 700; margin-bottom: -1px; }
tr.group th, tr.group td { background: var(--tint); }
tr.group th { text-align: start; font-weight: 700; }

/* Installable app */
.offline { max-width: 32rem; margin: 10vh auto; padding: 0 1rem; text-align: center; }
.offline h1 { font-size: var(--step-2); margin: 1.2rem 0 0.2rem; }
.install { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.75rem 0; }
.install button { width: 100%; }
.install .hint { font-size: var(--step--1); color: var(--ink-soft); }

/* Finance */
.bars { display: flex; flex-direction: column; gap: 2px; }
.bars span { display: block; height: 7px; border-radius: 2px; min-width: 1px; }
.bars .in, .key.in { background: #1F7A4D; }
.bars .out, .key.out { background: #C9822B; }
.key { display: inline-block; width: 0.9rem; height: 0.6rem; border-radius: 2px; vertical-align: middle; }
details > summary.link { cursor: pointer; list-style: none; }
details > summary.link::-webkit-details-marker { display: none; }
td.num, th.num { white-space: nowrap; }
details.pay-online { margin: 0.75rem 0; }
details.pay-online > summary { display: inline-block; cursor: pointer; list-style: none; }
details.pay-online > summary::-webkit-details-marker { display: none; }
details.pay-online form { margin-top: 0.5rem; }

/* Messages between parents and the school */
.conv { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.conv li { max-width: min(38rem, 92%); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.75rem 1rem; }
.conv li.mine { align-self: flex-end; background: var(--tint); }
.conv .meta { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 0.35rem; }
.conv .body { white-space: pre-line; overflow-wrap: anywhere; }
.unread-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--signal); margin-inline-end: 0.35rem; vertical-align: middle; }
tr.unread td { font-weight: 700; }
textarea.message { width: 100%; min-height: 8rem; max-width: 42rem; }
.kid-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.kid-facts strong { color: var(--ink); }
.trend-up { color: var(--good, #1d7a46); }
.trend-down { color: var(--bad); }

/* Public module catalogue */
.badge.free { background: #DDF1E4; color: #14532D; }
.badge.paid { color: #6B4E00; }
.badge.soon { background: transparent; border: 1px dashed var(--planned); color: var(--ink-soft); }
.offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0.5rem; max-width: 70rem; }
.offer-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 1.1rem 1.25rem; }
.offer-card strong { display: block; font-size: var(--step-2); margin: 0.4rem 0 0.25rem; }
.offer-card p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.band h3.theme { font-size: var(--step-1); margin: 2rem 0 0.75rem; }
.catalogue { max-width: 70rem; }
.catalogue .room { min-height: 0; gap: 0.5rem; }
.catalogue .room p { margin: 0.35rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.catalogue .room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.catalogue .room.plan-free.built { border-color: #2E7D4F; }
/* Timetable builder: week grid */
.tt-grid { table-layout: fixed; min-width: 40rem; }
.tt-grid th[scope=row] { width: 7rem; white-space: nowrap; }
.tt-grid td { vertical-align: top; height: 4.2rem; font-size: var(--step--1); }
.tt-grid td.off { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--rule) 6px 7px); }
.tt-grid td.busy { background: var(--tint); border-inline-start: 3px solid var(--ink); }
.tt-grid td b, .tt-grid td span { display: block; }
.tt-grid details form { display: grid; gap: 0.3rem; margin: 0.3rem 0; }
.tt-grid select { max-width: 100%; font-size: inherit; }
.tt-grid form.place { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { margin: 0.35rem 0; }
/* Admissions & homework */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.status.submitted, .status.incomplete, .status.waitlisted, .status.late { color: var(--warn); }
.status.enrolled, .status.done, .status.confirmed, .status.marked, .status.submittedok { color: var(--ok); }
.status.rejected, .status.withdrawn, .status.declined, .status.missing { color: var(--bad); }
.code-box { font-size: 1.6rem; letter-spacing: 0.15em; font-weight: 700; padding: 0.5rem 1rem; border: 2px dashed var(--rule); border-radius: var(--radius-m); display: inline-block; direction: ltr; }
.files { list-style: none; padding: 0; margin: 0.5rem 0; }
.files li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.files li:last-child { border-bottom: 0; }
.quiz-q { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.quiz-q legend { font-weight: 600; padding: 0 0.25rem; }
.quiz-q .right { color: var(--ok); }
.quiz-q .wrong { color: var(--bad); }
.pre { white-space: pre-line; }
input[type=file] { max-width: 100%; }
/* Sign-in pages */
.signin { max-width: 26rem; margin: 2rem auto; }
.signin .panel button[type="submit"] { width: 100%; }
.signin .or { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-soft); margin: 1rem 0; }
.signin .or::before, .signin .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.btn.wide { display: block; text-align: center; }
.code-input { font-size: var(--step-2); letter-spacing: 0.3em; text-align: center; max-width: 12rem; }
pre.snippet { white-space: pre-wrap; word-break: break-all; background: var(--tint); padding: 0.75rem 1rem; border-radius: var(--radius-m); font-size: var(--step--1); max-width: 100%; overflow-x: auto; }
/* Navigation stays charcoal; teal is for content links, buttons and the active item. */
.side nav a, .side .foot a, .pub-head nav a:not(.btn), .lang a, .pub-foot a, .crumbs a { color: var(--ink); }
.pub-head .brand { color: var(--ink); }
/* Module queue */
.q-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.q-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); text-decoration: none; color: var(--ink); }
.q-card:hover { border-color: var(--brand); }
.q-card .btn { align-self: flex-start; margin-top: 0.4rem; }
.q-prefix { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.4rem; border-radius: var(--radius-s); background: var(--brand-dark); color: #fff; font-weight: 700; }
.q-figs { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: var(--step--1); color: var(--ink-soft); }
.q-figs b { color: var(--ink); font-size: var(--step-0); }
.q-now { font-weight: 700; color: var(--brand-dark); }
.q-desk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; }
.q-big { font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 700; line-height: 1; margin: 0.2rem 0; letter-spacing: 0.02em; }
.q-huge { font-size: clamp(3.5rem, 18vw, 6rem); font-weight: 700; line-height: 1; margin: 0.25rem 0 0.5rem; text-align: center; letter-spacing: 0.03em; }
.q-actions, .q-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.q-actions form, .q-row-actions form { display: inline; margin: 0; }
.q-next { margin-top: 1rem; display: grid; gap: 0.4rem; }
.q-call { font-size: var(--step-1); padding: 0.8rem 1rem; justify-content: center; }
.badge.q-urgent { background: #FDE2E0; color: var(--bad); }
.q-issued { text-align: center; border: 2px dashed var(--brand); border-radius: var(--radius-m); padding: 0.75rem; margin-bottom: 1rem; }
.q-qr svg { width: 11rem; height: 11rem; }
.q-public { max-width: 32rem; margin: 0 auto; }
.q-services { border: 0; padding: 0; display: grid; gap: 0.5rem; }
.q-service { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; }
.q-service:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.q-service span { display: flex; flex-direction: column; }
.q-service.closed { opacity: 0.55; cursor: not-allowed; }
.q-ticket { text-align: center; }
.q-ticket .q-status { font-size: var(--step-2); font-weight: 700; margin: 0.3rem 0; }
.q-ticket.status-called .q-huge, .q-ticket.status-called .q-status { color: var(--brand-dark); }
.q-ticket.status-called { animation: q-pulse 1.2s ease-in-out 4; }
.q-ticket .q-where { font-size: var(--step-1); font-weight: 700; }
.q-ticket form { display: block; margin: 0.75rem 0; }
@keyframes q-pulse { 50% { background: #D9F2EE; } }
@media (prefers-reduced-motion: reduce) { .q-ticket.status-called { animation: none; } }
.q-days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.q-days .chip { text-decoration: none; padding: 0.3rem 0.6rem; }
.q-days .chip.on { background: var(--brand-dark); color: #fff; }
.q-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.4rem; }
.q-slot { display: flex; align-items: center; gap: 0.3rem; justify-content: center; padding: 0.45rem; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; }
.q-slot:has(input:checked) { border-color: var(--brand); background: #E3F4F1; font-weight: 700; }
/* waiting-room screen */
.q-screen-body { margin: 0; background: #14222C; color: #F2F6F5; overflow: hidden; }
.q-screen { display: flex; flex-direction: column; height: 100vh; font-size: clamp(14px, 1.6vw, 40px); }
.q-screen header, .q-screen footer { display: flex; justify-content: space-between; gap: 2rem; padding: 0.8em 1.4em; background: #1C2B36; }
.q-screen footer { justify-content: flex-start; flex-wrap: wrap; color: #A9B9C2; }
.q-screen-org { font-weight: 700; }
.q-screen main { flex: 1; display: grid; grid-template-columns: 3fr 2fr; gap: 1.5em; padding: 1.5em; }
.q-screen-now { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #0B6F66; border-radius: 0.4em; transition: background 0.3s; }
.q-screen.flash .q-screen-now { background: #E8772E; }
.q-screen-label { text-transform: uppercase; letter-spacing: 0.08em; color: #CDEDE8; margin: 0; }
.q-screen-big { font-size: 6em; font-weight: 700; line-height: 1; margin: 0.15em 0; }
.q-screen-desk { font-size: 2em; margin: 0; }
.q-screen-list ol { list-style: none; padding: 0; margin: 0.5em 0 0; }
.q-screen-list li { display: flex; justify-content: space-between; padding: 0.4em 0.2em; border-bottom: 1px solid #2E4352; font-size: 1.6em; }
.chip form { display: inline; margin: 0; }
/* Health modules */
.h-head h1 { margin-bottom: 0.2rem; }
.h-alert { border-inline-start: 4px solid var(--bad); background: #FDECEA; }
.h-secret { border-inline-start: 3px solid var(--signal); padding-inline-start: 0.6rem; }
.h-cons { border-top: 1px solid var(--rule); padding: 0.6rem 0; }
.h-cons p { margin: 0.15rem 0; }
.h-vitals .field input { width: 7rem; }
.h-rx input { width: 100%; min-width: 7rem; }
.badge.soon { background: #FDEBDD; color: #8A3B0B; }
/* Public demo (demo servers only) */
.demobar { background: var(--ink); color: #fff; text-align: center; padding: 0.35rem 1rem; font-weight: 700; font-size: var(--step--1); }
.demobar a { color: #9FE3DA; }
.demo-accounts { background: var(--surface); border: 1px solid var(--rule); border-inline-start: 4px solid var(--brand); border-radius: var(--radius-m); padding: 1rem 1.1rem; margin: 0 0 1.25rem; text-align: start; }
.demo-accounts h2 { margin: 0 0 0.3rem; font-size: var(--step-1); }
.demo-accounts h3 { margin: 0.8rem 0 0.4rem; font-size: var(--step-0); color: var(--ink-soft); }
.demo-pw code { background: #FFF6D6; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 1.05em; user-select: all; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.5rem; }
.demo-card { margin: 0; }
.demo-card button { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: start;
  background: var(--tint); color: var(--ink); border: 1px solid var(--rule); padding: 0.55rem 0.7rem; font-weight: 400; cursor: pointer; }
.demo-card button:hover, .demo-card button:focus-visible { border-color: var(--brand-dark); background: #fff; }
.demo-card b { font-size: var(--step-0); }
.demo-card span { font-size: var(--step--1); color: var(--ink-soft); }
.demo-card small { font-size: 0.75rem; color: var(--ink-soft); word-break: break-all; }
.demo-band .demo-accounts { max-width: 70rem; margin: 0 auto; }
.signin .demo-accounts { max-width: 46rem; }
.signin:has(.demo-accounts) { max-width: 46rem; }
.demo-grid + .demo-grid { margin-top: 0.5rem; }
.demo-start { max-width: 46rem; }
.demo-mine { border: 2px solid var(--ok); }
.demo-cred { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0; align-items: center; }
.demo-cred dt { font-weight: 700; }
.demo-cred dd { margin: 0; }
.demo-cred code { background: #FFF6D6; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 1.1rem; user-select: all; word-break: break-all; }

/* Public header on small screens: menu button */
@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 2.6rem; height: 2.4rem; padding: 0 0.6rem; margin-inline-start: auto;
    background: #fff; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; }
  .pub-head { flex-wrap: wrap; }
  .nav-toggle { align-items: center; }
  .nav-toggle span { display: block; flex: none; width: 1.3rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .pub-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .js .pub-nav:not(.open) { display: none; }
  .pub-links { flex-direction: column; align-items: stretch; margin: 0; }
  .pub-links a { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--tint); border-radius: 0; }
  .pub-actions { flex-wrap: wrap; padding-bottom: 0.5rem; }
  .pub-actions .btn { flex: 1; text-align: center; }
  .nav-demo { display: inline-block !important; }
  .pub-actions .lang-menu { flex-basis: 100%; }
  .pub-actions .lang-menu summary { width: 100%; justify-content: space-between; }
  .pub-actions .lang-menu ul { position: static; margin-top: 0.4rem; box-shadow: none; }
}
.pub-foot .version { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Health modules (H1–H7) */
a.chip { text-decoration: none; color: var(--ink); }
a.chip.on, a.chip[aria-current] { background: var(--brand-dark); color: #fff; }
.actions .btn { margin: 0 0.3rem 0.4rem 0; }
.h-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.h-week .panel { margin: 0; }
.h-week h2 { font-size: var(--step-0); margin: 0 0 0.5rem; }
.h-appt { margin: 0.25rem 0; font-size: var(--step--1); }
.h-appt.cancelled { text-decoration: line-through; color: var(--ink-soft); }
.h-free .chip { margin-bottom: 0.3rem; }
.h-flag { color: var(--bad); font-weight: 700; }
.h-abn td:first-child { border-inline-start: 3px solid var(--bad); }
.h-sec th { background: var(--tint); font-size: var(--step--1); text-transform: uppercase; }
.h-val { width: 7rem; }
.h-alerts { margin-bottom: 1rem; }
.h-room { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.h-room-name { flex: 0 0 5.5rem; font-size: var(--step--1); color: var(--ink-soft); padding-top: 0.4rem; }
.h-beds { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.h-bed { width: 11rem; min-height: 4.2rem; border: 1px solid var(--rule); border-inline-start: 5px solid var(--ok); border-radius: var(--radius-m); padding: 0.35rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; background: var(--surface); }
.h-bed.occupied { border-inline-start-color: var(--brand); background: var(--tint); }
.h-bed.cleaning { border-inline-start-color: var(--warn); background: #FFF8E6; }
.h-bed.closed { border-inline-start-color: var(--ink-soft); opacity: 0.7; }
.h-bed-label { font-weight: 700; font-size: var(--step--1); }
.h-lv { display: inline-block; min-width: 1.6rem; text-align: center; font-weight: 700; border-radius: var(--radius-s); color: #fff; background: var(--ink-soft); }
.lv1 .h-lv { background: #B3261E; } .lv2 .h-lv { background: #E8772E; } .lv3 .h-lv { background: #C9A100; color: #111; } .lv4 .h-lv { background: #1F7A4D; } .lv5 .h-lv { background: #2B6CB0; }
.h-er tr.lv1 td:first-child { border-inline-start: 4px solid #B3261E; } .h-er tr.lv2 td:first-child { border-inline-start: 4px solid #E8772E; }
.h-levels label { display: block; margin: 0.2rem 0; }
.h-bars { display: flex; align-items: flex-end; gap: 3px; height: 10rem; padding-top: 0.5rem; }
.h-bar { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 6px; position: relative; }
.h-bar span { display: block; }
.h-bar-c { background: var(--brand); }
.h-bar-q { background: #9FD3CD; order: 2; }
.h-bar-c { order: 1; }
.h-bar small { font-size: 0.65rem; color: var(--ink-soft); text-align: center; order: 3; }
.h-key { display: inline-block; width: 0.8rem; height: 0.8rem; vertical-align: middle; }
.h-key.c { background: var(--brand); } .h-key.q { background: #9FD3CD; }
/* Health H6: nursing care & theatre */
.h-mar { border-top: 1px solid var(--rule); padding: 0.5rem 0; }
.h-mar form.inline, .h-plan form.inline, .h-slot form.inline { display: inline-flex; margin: 0; }
.h-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.h-slot { min-width: 8.5rem; border: 1px solid var(--rule); border-inline-start: 4px solid var(--rule); border-radius: var(--radius-s); padding: 0.3rem 0.45rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--step--1); }
.h-slot.given { border-inline-start-color: var(--ok); background: #EEF8F1; }
.h-slot.refused, .h-slot.held { border-inline-start-color: var(--warn); background: #FFF8E6; }
.h-slot.missed { border-inline-start-color: var(--bad); background: #FDEDEC; }
.h-slot form { margin: 0; }
.h-struck, .h-struck td { text-decoration: line-through; color: var(--ink-soft); }
.h-plan { border-top: 1px solid var(--rule); padding: 0.5rem 0; }
.h-new { margin-top: 0.75rem; }
.h-new > summary { list-style: none; display: inline-block; cursor: pointer; }
.h-vitals .field.narrow { max-width: 8rem; }
.h-chart { margin: 0 0 1rem; }
.care-chart { width: 100%; max-width: 44rem; height: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); }
.care-chart .grid { stroke: var(--rule); stroke-width: 1; }
.care-chart .grid.mid { stroke: #E3A2A0; stroke-dasharray: 4 3; }
.care-chart .axis { font-size: 10px; fill: var(--ink-soft); }
.care-chart .axis.t { fill: #B3261E; } .care-chart .axis.p { fill: #2B6CB0; }
.care-chart polyline { fill: none; stroke-width: 2; }
.care-chart polyline.t, .care-chart circle.t { stroke: #B3261E; } .care-chart circle.t { fill: #B3261E; }
.care-chart polyline.p, .care-chart circle.p { stroke: #2B6CB0; } .care-chart circle.p { fill: #2B6CB0; }
.care-chart .bp { fill: #9FD3CD; }
.h-key.t { background: #B3261E; } .h-key.p { background: #2B6CB0; } .h-key.bp { background: #9FD3CD; }
.h-vtable td, .h-vtable th { white-space: nowrap; }
.h-theatre { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.h-op { border: 1px solid var(--rule); border-inline-start: 5px solid var(--brand); border-radius: var(--radius-m); padding: 0.4rem 0.6rem; margin-bottom: 0.4rem; background: var(--surface); }
.h-op.in_progress { border-inline-start-color: var(--warn); background: #FFF8E6; }
.h-op.done { border-inline-start-color: var(--ok); }
.h-op.cancelled { border-inline-start-color: var(--ink-soft); opacity: 0.6; text-decoration: line-through; }
.h-op.urgent { border-inline-start-color: var(--bad); }
.h-check { border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.5rem 0.75rem; }
.h-check.signed { background: #EEF8F1; }
.h-check li { margin: 0.25rem 0; }
.h-vitals input[type=datetime-local] { min-width: 13rem; }
/* Health H7: dental chart */
.d-chart { display: inline-flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); max-width: 100%; overflow-x: auto; }
.d-side { display: flex; justify-content: space-between; margin: 0; }
.d-row { display: flex; gap: 0.6rem; }
.d-row + .d-row { border-top: 2px solid var(--rule); padding-top: 0.35rem; }
.d-quad { display: flex; gap: 2px; }
.d-quad.right { border-inline-end: 2px solid var(--rule); padding-inline-end: 0.6rem; }
.d-tooth { width: 2.1rem; height: 2.6rem; border: 1px solid #C8D2D0; border-radius: 0.45rem 0.45rem 0.7rem 0.7rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); background: #fff; font-size: 0.75rem; }
.d-tooth.on { outline: 3px solid var(--brand); }
.d-tooth.mini { display: inline-block; width: 0.9rem; height: 0.9rem; vertical-align: middle; }
.d-n { font-weight: 700; }
.d-s { font-size: 0.6rem; color: var(--ink-soft); }
.d-ok { background: #EEF8F1; } .d-caries { background: #FDE2E0; border-color: #B3261E; } .d-filled { background: #DCE8F7; border-color: #2B6CB0; }
.d-rc { background: #EDE3F7; border-color: #6B3FA0; } .d-crown { background: #FFF1C9; border-color: #A87B00; } .d-implant { background: #D9F0EE; border-color: #0F766E; }
.d-missing { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #E5E7EB 4px, #E5E7EB 8px); color: var(--ink-soft); }
.d-legend .d-tooth.mini { margin-inline-end: 0.15rem; }
.chip.done { background: #DDF1E4; color: #14532D; }
.who-chart { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); }
.who-chart .grid { stroke: var(--rule); stroke-width: 0.6; }
.who-chart .axis { font-size: 10px; fill: var(--ink-soft); }
.who-chart polyline { fill: none; }
.who-chart .sd0 { stroke: #1F7A4D; stroke-width: 2; } .who-chart .sd1 { stroke: #C9A100; stroke-width: 1; stroke-dasharray: 4 3; }
.who-chart .sd2 { stroke: #B3261E; stroke-width: 1.2; } .who-chart .sd3 { stroke: #111; stroke-width: 1; }
.who-chart .child { stroke: #2B6CB0; stroke-width: 2; } .who-chart .pt { fill: #2B6CB0; }
.h-eye input { width: 4.6rem; } .h-eye th { white-space: nowrap; }
fieldset label.inline { display: inline-flex; align-items: center; gap: 0.25rem; margin-inline-end: 0.6rem; }
/* Public administration (APC) */
.badge.a-ready, .badge.a-answered { background: #DDF1E4; color: #14532D; }
.badge.a-incomplete, .badge.a-new { background: #FFF1C9; color: #6B4E00; }
.badge.a-rejected { background: #FDE2E0; color: var(--bad); }
.badge.a-delivered, .badge.a-closed, .badge.a-filed { background: var(--tint); color: var(--ink-soft); }
.a-big { font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; margin: 2mm 0; }
.a-steps { list-style: none; padding: 0; margin: 0; border-inline-start: 3px solid var(--rule); }
.a-steps li { position: relative; padding: 0.35rem 0.9rem; }
.a-steps li::before { content: ""; position: absolute; inset-inline-start: -0.45rem; top: 0.7rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--brand); }
.a-hub { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* APC stage 2 */
.badge.a-adopted, .badge.a-approved, .badge.a-held, .badge.a-in_use, .badge.a-back, .badge.a-good { background: #DDF1E4; color: #14532D; }
.badge.a-draft, .badge.a-planned, .badge.a-requested, .badge.a-out, .badge.a-fair, .badge.a-stored { background: #FFF1C9; color: #6B4E00; }
.badge.a-refused, .badge.a-poor, .badge.a-broken { background: #FDE2E0; color: var(--bad); }
.badge.a-sent { background: #E3ECFA; color: #1E3A8A; }
.badge.a-cancelled, .badge.a-retired { background: var(--tint); color: var(--ink-soft); }
.a-quorum { font-weight: 700; } .a-quorum.ok { color: #14532D; } .a-quorum.no { color: var(--bad); }
.a-votes { display: flex; gap: 1rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.a-text { white-space: pre-wrap; line-height: 1.55; }
.a-alert { color: var(--bad); font-weight: 700; }

/* ---- Help centre (/aide) and the "?" help button ------------------------ */
.help { max-width: 72rem; margin: 0 auto; padding: 2rem clamp(1rem, 5vw, 3rem) 4rem; }
.help .eyebrow { margin: 0 0 .25rem; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); }
.help-hero { padding: 1rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.help-hero h1 { font-size: clamp(1.9rem, 4vw, var(--step-3)); margin: 0 0 1rem; }
.help-search { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 40rem; }
.help-search input { flex: 1 1 16rem; font-size: var(--step-0); padding: .6rem .75rem; }
.help-lang { background: var(--tint); border-inline-start: 3px solid var(--brand); padding: .5rem .75rem; border-radius: var(--radius-s); font-size: var(--step--1); margin-top: 1rem; max-width: 40rem; }
.help-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 2rem 2.5rem; }
.help-section h2, .help-results h2 { font-size: var(--step-1); margin: 0 0 .25rem; }
.help-section > p { font-size: var(--step--1); margin-bottom: .75rem; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.help-list a { display: grid; gap: .1rem; padding: .55rem .75rem; border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); text-decoration: none; }
.help-list a:hover { border-color: var(--brand); }
.help-list b { color: var(--brand-dark); font-weight: 700; }
.help-list span { font-size: var(--step--1); color: var(--ink-soft); }
.help-results { margin-bottom: 2.5rem; }
.help-cta { margin-top: 3rem; padding: 1.5rem; background: var(--tint); border-radius: var(--radius-m); }
.help-cta h2 { margin-top: 0; font-size: var(--step-1); }
.help-crumbs { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; align-items: start; }
.help-article { min-width: 0; }
.help-article h1 { font-size: clamp(1.7rem, 3.5vw, var(--step-3)); line-height: 1.2; margin: 0 0 1rem; }
.help-article h2 { font-size: var(--step-1); margin: 2rem 0 .5rem; }
.help-article p, .help-article li { max-width: 68ch; }
.help-article ol, .help-article ul { padding-inline-start: 1.4rem; }
.help-article li + li { margin-top: .3rem; }
.help-article code { background: var(--tint); padding: .05em .3em; border-radius: var(--radius-s); font-size: .9em; overflow-wrap: anywhere; }
.help-article pre { background: var(--tint); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: .75rem 1rem; overflow-x: auto; }
.help-article pre code { background: none; padding: 0; overflow-wrap: normal; }
.help-article .tw { overflow-x: auto; margin: .75rem 0 1.25rem; }
.help-article table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: var(--step--1); }
.help-article th, .help-article td { border: 1px solid var(--rule); padding: .45rem .6rem; text-align: start; vertical-align: top; }
.help-article th { background: var(--tint); }
.help-article .shot { margin: 1rem 0 1.5rem; }
.help-article .shot img { border: 1px solid var(--rule); border-radius: var(--radius-m); box-shadow: 0 6px 20px rgba(28, 43, 54, .08); width: 100%; height: auto; }
.help-article .shot figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: .4rem; }
.help-article .callout { background: #FFF4EC; border-inline-start: 3px solid var(--signal); padding: .6rem .9rem; border-radius: var(--radius-s); margin: 1rem 0; }
.help-article .callout p { margin: 0; }
.help-article .callout strong { margin-inline-end: .3rem; }
.help-needs { font-size: var(--step--1); color: var(--ink-soft); }
.help-next { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.help-next a { display: grid; text-decoration: none; max-width: 48%; }
.help-next a.n { text-align: end; margin-inline-start: auto; }
.help-next small { color: var(--ink-soft); }
.help-side { position: sticky; top: 1rem; display: grid; gap: 1.25rem; }
.help-side h2 { font-size: var(--step-0); margin: 0 0 .5rem; }
.help-try { background: var(--ink); color: #fff; border-radius: var(--radius-m); padding: 1rem 1.1rem; }
.help-try h2 { color: #fff; }
.help-try p { font-size: var(--step--1); color: #D5DEDC; }
.help-try button { width: 100%; background: var(--signal); border-color: var(--signal); color: var(--ink); font-weight: 700; }
.help-toc ul { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.help-toc a { display: block; padding: .3rem .5rem; border-inline-start: 2px solid var(--rule); text-decoration: none; color: var(--ink-soft); }
.help-toc a:hover, .help-toc a[aria-current] { border-color: var(--brand); color: var(--brand-dark); }
.help-toc a[aria-current] { font-weight: 700; }
@media (max-width: 56rem) {
  .help-layout { grid-template-columns: 1fr; }
  .help-side { position: static; }
}
/* the "?" button on workspace pages */
.help-fab { float: inline-end; margin-block-end: .5rem; margin-inline-start: 1rem; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--step--1);
  border: 1px solid var(--rule); background: var(--surface); color: var(--brand-dark); border-radius: 999px; padding: .2rem .7rem .2rem .25rem; text-decoration: none; }
.help-fab b { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand-dark); color: #fff; font-size: .85rem; }
.help-fab:hover { border-color: var(--brand); }
@media print { .help-fab { display: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Reports & statistics ---------------------------------------------------- */
.rep-list, .rep-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }
.rep-card, .rep-tpl { display: flex; flex-direction: column; gap: 0.3rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.9rem 1rem; color: var(--ink); text-decoration: none; margin: 0; }
.rep-card:hover { border-color: var(--brand-dark); box-shadow: 0 1px 4px rgba(28, 43, 54, .08); }
.rep-tpl button { align-self: flex-start; margin-top: auto; }
.rep-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--step--1); color: var(--ink-soft); margin-top: auto; }
.rep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; }
.rep-head h1 { margin-bottom: 0.2rem; }
.rep-period { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.rep-period label { margin: 0; font-weight: 400; }
.rep-period select { width: auto; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.rep-send { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.6rem 1rem; margin-bottom: 1rem; }
.rep-send summary { cursor: pointer; font-weight: 700; }
.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rep-w { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 0.9rem 1rem; margin: 0; min-width: 0; }
.rep-w.full { grid-column: 1 / -1; }
.rep-w figcaption { font-weight: 700; margin-bottom: 0.5rem; }
.rep-w.is-kpi { display: flex; flex-direction: column; justify-content: center; }
.rep-kpi { font-size: 2.4rem; font-weight: 700; line-height: 1.1; color: var(--brand-dark); margin: 0; font-variant-numeric: tabular-nums; }
.rep-na { margin: 1rem 0; }
.rep-chart { overflow: hidden; }
.rep-data { margin-top: 0.5rem; }
.rep-data summary { cursor: pointer; font-size: var(--step--1); color: var(--brand-dark); }
.rep-w .tw { overflow-x: auto; max-height: 24rem; overflow-y: auto; }
.rep-table { font-size: var(--step--1); }
.rep-table td.num, .rep-table th.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-sw { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-inline-end: 0.3rem; }
.rep-wlist { padding-inline-start: 1.25rem; margin: 0; }
.rep-wlist > li { border-bottom: 1px solid var(--rule); padding: 0.6rem 0; }
.rep-wlist > li:last-child { border-bottom: 0; }
.rep-wl-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; margin-bottom: 0.4rem; }
.rep-wl-move { margin-inline-start: auto; display: flex; gap: 0.25rem; }
.rep-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0 1rem; max-width: none; }
.rep-members legend { font-weight: 700; }
td.nowrap { white-space: nowrap; }
.tw { overflow-x: auto; }
/* charts (SVG drawn on the server) */
.vz { display: block; max-width: 100%; height: auto; font-family: inherit; direction: ltr; unicode-bidi: isolate; }
.vz text { unicode-bidi: plaintext; }
.vz-g { stroke: #E6ECEB; stroke-width: 1; }
.vz-a { stroke: #9AA8A6; stroke-width: 1; }
.vz-t { fill: var(--ink-soft); font-size: 11px; }
.vz-l { fill: var(--ink); font-size: 12px; }
.vz-v { fill: var(--ink); font-size: 11px; font-weight: 700; }
.vz-k { fill: var(--ink); font-size: 20px; font-weight: 700; }
.vz-d { opacity: 0; }
.vz rect:hover, .vz path:hover, .vz circle:hover { opacity: 0.8; }
.vz .vz-d:hover { opacity: 1; }
@media (max-width: 760px) { .rep-grid { grid-template-columns: minmax(0, 1fr); } .rep-kpi { font-size: 2rem; } }
@media print {
  .rep-actions, .rep-send, .rep-period button, .tabs, .rep-data summary { display: none; }
  .rep-w { break-inside: avoid; }
  .rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}