/* DM Sans and Manrope (SIL Open Font License), served from the site: Latin and Latin Extended only. */
/* DM Sans, latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans, latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope, latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope, latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Amrita MCB Portal: the shared design system. Two palettes, dark (default) and light, chosen by
   data-theme on <html> (js/theme-init.js applies the saved choice before the first paint). Purple is the main
   action and selection; pink the logo and special accents; cyan information; green success and confirmed seats;
   orange pending and deadlines; yellow small highlights; red destructive actions and rejection. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #282A36; --surface: #343746; --surface-2: #2D2F3D; --chrome: #21222C;
  --text: #F8F8F2; --text-2: #E2DCF0; --muted: #B4B8CF;
  --brand: #BD93F9; --brand-deep: #D6ACFF; --brand-soft: #403650; --on-accent: #282A36;
  --border: #44475A; --border-strong: #6272A4;
  --pink: #FF79C6; --info: #8BE9FD; --yellow: #F1FA8C; --warning: #FFB86C; --success: #50FA7B; --danger: #FF7979;
  --success-bg: #233E35; --warning-bg: #493A30; --danger-bg: #492F3B; --info-bg: #293E4B;
  --focus: rgba(189, 147, 249, 0.30);
  --backdrop: rgba(14, 15, 21, 0.66);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.25), 0 22px 48px rgba(0, 0, 0, 0.32);
  /* Outline buttons and tab strips: a fill of their own, so they stand out from the cards and the page. */
  --control: #3A3D4F; --control-hover: #45485C; --tabs-bg: #2A2C38; --tab-on: #4A4D63;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFBEB; --surface: #FFFDF5; --surface-2: #EFEDDC; --chrome: #FFF8E1;
  --text: #1F1F1F; --text-2: #454254; --muted: #6C664B;
  --brand: #644AC9; --brand-deep: #5036AF; --brand-soft: #EAE3FA; --on-accent: #FFFFFF;
  --border: #DEDCCF; --border-strong: #AAA5BA;
  --pink: #A3144D; --info: #036A96; --yellow: #846E15; --warning: #A34D14; --success: #14710A; --danger: #CB3A2A;
  --success-bg: #E5EEDC; --warning-bg: #F7EAD7; --danger-bg: #F8E4DF; --info-bg: #E0EDF3;
  --focus: rgba(100, 74, 201, 0.22);
  --backdrop: rgba(31, 31, 31, 0.45);
  --shadow-sm: 0 1px 2px rgba(60, 50, 20, 0.06);
  --shadow: 0 1px 2px rgba(60, 50, 20, 0.05), 0 8px 22px rgba(60, 50, 20, 0.08);
  --shadow-lg: 0 2px 6px rgba(60, 50, 20, 0.07), 0 20px 44px rgba(60, 50, 20, 0.13);
  --control: transparent; --control-hover: transparent; --tabs-bg: var(--surface-2); --tab-on: var(--surface);
}
:root {
  /* Legacy names map to the brand (never the superseded teal). */
  --teal: var(--brand); --accent: var(--brand);
  --font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 16px; --radius-lg: 22px; --radius-sm: 10px;
  --wrap: 1180px;
  --section: 88px;
  /* The one space between cards in the dashboards (views, stat cards, card grids), so every view has the same rhythm. */
  --gap: 18px;
}
@media (max-width: 620px) { :root { --gap: 12px; } }
@media (max-width: 620px) { :root { --section: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); background: var(--bg); color: var(--text); font: 400 15.5px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }
body > main { flex: 1 0 auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--text); }
p { margin: 0; }
a { color: var(--brand); }
a:hover { color: var(--brand-deep); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Page regions that receive focus when a view loads (for screen readers) are not controls: no outline around them. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 620px) { .wrap { padding: 0 16px; } }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--brand); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Logo ---------- */
.logo { display: block; width: 100%; height: 100%; }
/* The logo follows the theme (Dracula on dark, Alucard on light): purple A outline and cap, green small person,
   cyan medium person, pink tall person, yellow ring. */
.logo .logo-frame { fill: var(--brand); }
.logo .logo-small { fill: var(--success); }
.logo .logo-medium { fill: var(--info); }
.logo .logo-tall { fill: var(--pink); }
.logo .logo-ring { fill: var(--yellow); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--chrome) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header .bar { display: flex; align-items: center; gap: 20px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--text); }
/* The mark is cropped to its drawing (about 1.3:1), so its height lines up with the name. */
.brand-mark { height: 34px; aspect-ratio: 1131 / 871; flex: none; }
.brand-text { display: grid; min-width: 0; }
.brand-text strong { font-family: var(--font-head); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.brand-text small { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.site-nav { display: flex; gap: 2px; margin: 0 auto; }
.site-nav a { padding: 10px 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.site-nav a:hover { color: var(--brand); background: var(--surface); }
.site-nav a[aria-current] { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--control); color: var(--text); cursor: pointer; text-decoration: none; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--control-hover); }
.count-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: var(--on-accent); font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; }
.menu-btn { display: none; }
/* "Get the app" (shell.js appButtons): a small pill with the Android and Apple buttons; in the phone menu, a row with
   the platforms named. */
.nav-apps { display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 3px 3px 12px; border: 1px solid var(--border-strong); border-radius: 999px; }
.nav-apps-label { margin-right: 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.site-nav .app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 34px; height: 34px; padding: 0; border-radius: 999px; background: var(--surface); color: var(--text); }
.site-nav .app-btn:hover { background: var(--brand); color: var(--on-accent); }
.app-btn svg { width: 18px; height: 18px; flex: none; }
.app-name { display: none; }
.nav-theme { display: none; }
/* The bell: one dropdown for notifications and messages (inbox.js). */
.inbox { position: relative; }
.inbox-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; }
.inbox-pop[hidden] { display: none; }
/* The tabs on their own row (each with room for its counter), the actions on the row below. */
.inbox-head { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.inbox-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.inbox-actions .danger-text, .inbox-foot .danger-text { color: var(--danger); }
.inbox-list { display: grid; overflow-y: auto; overscroll-behavior: contain; }
.inbox-list > .btn { margin: 6px auto 10px; }
/* Show more: below the list, opening the full list of notifications or messages. */
.inbox-pop > .inbox-more { flex: none; align-self: center; margin: 6px auto 10px; }
/* A row: tick box on the left, the item, and Clear on the right (shown on hover or focus; always on touch screens). */
.inbox-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%; padding: 11px 10px 11px 18px; border-bottom: 1px solid var(--border); color: var(--text); }
.inbox-item:hover, .inbox-item:focus-within, .inbox-item.picked { background: var(--surface-2); }
.inbox-main { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.inbox-main:hover { color: var(--text); }
.inbox-tick { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer; }
.inbox-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.inbox-x .icon { width: 16px; height: 16px; }
.inbox-x:hover, .inbox-x:focus-visible { color: var(--danger); background: var(--surface); }
.inbox-item:hover .inbox-x, .inbox-item:focus-within .inbox-x { opacity: 1; }
@media (hover: none) { .inbox-x { opacity: 1; } }
.inbox-select-all { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.inbox-select-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.inbox-item.unread::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pink); }
.inbox-item strong { font-size: 14px; }
.inbox-item time { font-size: 12px; color: var(--muted); }
.inbox-kind { font-size: 11.5px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.03em; }
.inbox-body { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-empty { padding: 22px 16px; color: var(--muted); text-align: center; }
.inbox-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }
/* The dashboards' Notifications page (notices.js): one card, as the other dashboard lists are. Its head holds the
   Inbox / Outbox / Sent tabs (staff) and the page's buttons; a selection bar appears once something is ticked; the
   rows are the bell popup's rows, with room for the whole message when one is opened. */
.notes-card { overflow: hidden; }
.notes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notes-head .tabs { min-height: 46px; align-items: stretch; }
.notes-head .tabs button { display: inline-flex; align-items: center; gap: 6px; }
.notes-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--on-accent); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
.notes-summary { margin: 0; font-weight: 700; color: var(--text-2); }
.notes-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.notes-tools[hidden] { display: none; }
.notes-tool-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.notes-tools .danger-text, .notes-row-actions .danger-text { color: var(--danger); }
.notes-list { display: grid; }
.notes-list .inbox-list { overflow: visible; }
.notes-list .inbox-item { padding: 14px 16px 14px 22px; }
.notes-list .inbox-item:last-child { border-bottom: 0; }
.notes-list .inbox-body { -webkit-line-clamp: 3; font-size: 14px; }
.notes-list .inbox-body.full { display: block; -webkit-line-clamp: unset; overflow: visible; }
.notes-list .inbox-item strong { font-size: 15px; }
.notes-list > .inbox-more { justify-self: center; margin: 10px auto 14px; }
.notes-list > .state { margin: 0; }
.notes-badge { justify-self: start; padding: 2px 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.notes-badge::before { display: none; }
.notes-toggle { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.inbox-tick-space { width: 16px; }
/* An announcement in the Outbox or Sent: its status first, then the title and message; opened, who it went to. */
.notes-ann { display: grid; gap: 10px; min-width: 0; grid-column: span 2; }
.notes-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.notes-status .badge { padding: 2px 9px; font-size: 11.5px; }
.notes-detail { display: grid; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.notes-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13.5px; }
.notes-facts dt { color: var(--muted); }
.notes-facts dd { margin: 0; overflow-wrap: anywhere; }
.notes-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-muted { background: var(--surface-2); color: var(--muted); border-color: transparent; }
/* The composer in its dialog. */
.announce-form { display: grid; gap: 14px; }
.announce-form .inline-row { margin-top: 8px; }
@media (max-width: 620px) {
  .notes-head .tabs, .notes-head > .btn { flex-basis: 100%; }
  .notes-head .tabs button { flex: 1 1 0; justify-content: center; }
  .notes-list .inbox-item { padding-left: 18px; }
  .notes-tool-buttons { width: 100%; }
  .notes-tool-buttons > .btn { flex: 1 1 auto; }
}
@media (max-width: 620px) { .inbox-pop { position: fixed; top: 70px; right: 16px; left: 16px; width: auto; } }
@media (max-width: 1150px) {
  .menu-btn { display: inline-grid; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 8px 16px 16px; background: var(--chrome); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
  .site-header.open .site-nav { display: flex; }
  .nav-apps { margin: 6px 0 4px; padding: 10px 14px; border: 0; border-top: 1px solid var(--border); border-radius: 0; gap: 10px; }
  .nav-apps-label { margin-right: auto; font-size: 14px; }
  .site-nav .app-btn { width: auto; height: 40px; padding: 0 16px; border: 1px solid var(--border-strong); font-size: 14px; font-weight: 700; }
  .app-name { display: inline; }
  /* Public pages: the theme switch moves into the menu, so nothing floats over the page. */
  .nav-theme { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-weight: 600; font-size: 14.5px; text-align: left; cursor: pointer; }
  .nav-theme:hover { color: var(--brand); background: var(--surface); }
  .nav-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  body:has(.nav-theme) .theme-switch { display: none; }
  .site-nav a[aria-current] { box-shadow: inset 3px 0 0 var(--brand); }
}
@media (max-width: 620px) {
  .site-header .bar { height: 66px; gap: 10px; }
  .brand-mark { height: 28px; }
  .brand-text strong { font-size: 16px; }
  .brand-text small { display: none; }
  .header-actions > .btn .label { display: none; }
  .header-actions > .btn { width: 44px; padding: 0; } /* the header's own buttons, not those in the bell's popup */
  .header-actions { gap: 6px; }
}
@media (max-width: 380px) { .brand-text strong { font-size: 14.5px; } .header-actions .icon-btn[data-optional] { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: var(--on-accent); }
.btn-primary:hover { background: var(--brand-deep); color: var(--on-accent); }
.btn-outline { background: var(--control); border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--control-hover); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface); color: var(--brand); }
.btn-danger { background: var(--danger); color: var(--on-accent); }
.btn-danger:hover { filter: brightness(0.94); color: var(--on-accent); }
.btn-success { background: var(--success); color: var(--on-accent); }
/* Reject on the registrations dashboard. */
.btn-yellow { background: var(--yellow); color: var(--on-accent); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
/* On a phone a long label wraps inside its button instead of running past the card's edge. */
@media (max-width: 620px) { .btn { max-width: 100%; white-space: normal; text-align: center; } .btn > .icon { flex: none; } }
.btn-lg { min-height: 48px; padding: 0 24px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-link { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Eyebrows, headings ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow:empty { display: none; }
.section { padding-block: var(--section); } /* top and bottom only: on a .wrap it keeps the side gutters */
.section-head { margin-bottom: 36px; }
.section-head h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.section-head p:not(.eyebrow) { margin-top: 12px; color: var(--muted); font-size: 16px; max-width: 680px; }
.section-head.center { text-align: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.page-hero { padding: 56px 0 64px; background: radial-gradient(800px 420px at 85% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 65%), var(--surface); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; max-width: 860px; }
.page-hero .lead { margin-top: 16px; max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Cards, badges, chips ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 24px; }
@media (max-width: 620px) { .card-pad { padding: 18px; } }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.badge-success, .badge-confirmed { background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge-warning, .badge-pending { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge-danger, .badge-rejected { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge-info, .badge-waitlisted { background: var(--info-bg); color: var(--info); border-color: transparent; }
.badge-pink { background: color-mix(in srgb, var(--pink) 16%, var(--surface)); color: var(--pink); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.chip-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.chip-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.chip-yellow { background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); color: var(--yellow); border-color: transparent; }

/* ---------- Notices ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 14.5px; }
.notice .icon { margin-top: 2px; }
.notice-info { background: var(--info-bg); border-color: transparent; color: var(--text); }
.notice-info .icon { color: var(--info); }
.notice-success { background: var(--success-bg); border-color: transparent; }
.notice-success .icon { color: var(--success); }
.notice-warning { background: var(--warning-bg); border-color: transparent; }
.notice-warning .icon { color: var(--warning); }
.notice-danger { background: var(--danger-bg); border-color: transparent; }
.notice-danger .icon { color: var(--danger); }
.notice strong { display: block; }
.notice .actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; } /* a neighbour's help text never stretches this control */
.field-label { font-weight: 600; font-size: 14px; color: var(--text-2); }
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-label .opt { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.field-help { font-size: 13px; color: var(--muted); }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--danger); font-weight: 600; }
.input, 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], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.85; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); }
input[readonly] { background: var(--surface-2); color: var(--muted); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
@media (max-width: 620px) { .grid-6 { gap: 16px 12px; } .span-2, .span-3, .span-4 { grid-column: span 6; } .span-1 { grid-column: span 3; } }
/* A heading with its one action (Add …) on the same line, instead of a button on a row of its own. */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.head-row > :first-child { margin: 0; }
/* Controls with their button on one line (When + Send, Font + Upload a font). */
.inline-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-row > select, .inline-row > input { flex: 1 1 160px; width: auto; min-width: 0; }
.inline-row > .btn { flex: none; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices.stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.choices.stack[role=group] { grid-template-columns: minmax(0, 1fr); }
.choices.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .choices.cols-2 { grid-template-columns: minmax(0, 1fr); } }
.choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; }
.choice.check .mark { border-radius: 5px; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice:has(input:checked) .mark { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--bg); }
.choice.check:has(input:checked) .mark { box-shadow: none; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.choice:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.choice .choice-text { display: grid; }
.choice .choice-text small { color: var(--muted); font-size: 13px; }
.file-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.file-box img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.file-box .file-meta { flex: 1; min-width: 160px; display: grid; }
.file-box .file-meta strong { overflow-wrap: anywhere; }
.file-box .file-actions { display: flex; gap: 8px; }
.file-pick { position: relative; overflow: hidden; }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- Tables ---------- */
.table-wrap { overflow: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Phones: cells keep a readable width (the table scrolls in its box) instead of stacking one word per line. */
@media (max-width: 620px) { table.data td { min-width: 10em; } table.data td:has(> input[type="checkbox"]), table.data td:has(> label > input[type="checkbox"]) { min-width: 0; } }
table.data tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
th button.sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
th button.sort:focus-visible { outline: 2px solid var(--brand); border-radius: 4px; }

/* ---------- Tabs ---------- */
.tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 4px; gap: 4px; border-radius: 12px; background: var(--tabs-bg); }
.tabs button { padding: 7px 16px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 700; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--tab-on); color: var(--brand); box-shadow: var(--shadow-sm); }
/* On a phone a row of tabs fills the width in equal parts, a long label taking two lines, instead of wrapping into
   uneven rows. The small Write / Preview switch keeps its size. */
@media (max-width: 620px) {
  .tabs:not(.tabs-sm) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .tabs:not(.tabs-sm) button { padding: 7px 4px; font-size: 13.5px; line-height: 1.25; text-align: center; }
}

/* ---------- Formatted text (js/rich.js): Markdown and maths ---------- */
.rich { overflow-wrap: anywhere; line-height: 1.7; }
.rich.plain { white-space: pre-line; }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p, .rich ul, .rich ol, .rich blockquote, .rich pre, .rich table { margin: 0 0 12px; }
.rich ul, .rich ol { padding-left: 22px; }
.rich li + li { margin-top: 4px; }
.rich h1, .rich h2, .rich h3, .rich h4 { margin: 18px 0 8px; font-size: 1.15em; }
.rich h1 { font-size: 1.35em; } .rich h2 { font-size: 1.25em; }
.rich a { text-decoration: underline; text-underline-offset: 3px; }
.rich code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }
.rich pre { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); overflow-x: auto; }
.rich pre code { padding: 0; background: none; }
.rich blockquote { padding: 6px 14px; border-left: 3px solid var(--brand); color: var(--text-2); }
.rich table { border-collapse: collapse; display: block; overflow-x: auto; }
.rich th, .rich td { padding: 6px 10px; border: 1px solid var(--border); }
.rich hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.rich img { max-width: 100%; height: auto; border-radius: 10px; }
.rich .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; margin: 8px 0; }
.rich .katex { font-size: 1.08em; }
.rich-inline.plain { white-space: normal; }
.rich-editor { display: grid; gap: 8px; }
.rich-editor-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rich-hint { display: inline-flex; align-items: center; gap: 4px; }
.rich-hint .icon { width: 14px; height: 14px; }
.rich-preview { min-height: 100px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border-strong); background: var(--bg); }
.tabs-sm button { padding: 5px 12px; font-size: 13px; }

/* ---------- Dialogs ---------- */
dialog { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 12px; }
.dialog-head h2 { font-size: 21px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dialog-head .icon-btn { flex-shrink: 0; } /* a long name or email wraps; the close button stays in view */
.dialog-body { padding: 8px 24px 20px; overflow: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 24px 20px; border-top: 1px solid var(--border); }
.dialog-sm { width: 460px; } .dialog-md { width: 640px; } .dialog-lg { width: 900px; } .dialog-xl { width: 1120px; }
dialog[open].sheet { display: flex; flex-direction: column; }
@media (max-width: 620px) { .dialog-head, .dialog-body, .dialog-foot { padding-left: 18px; padding-right: 18px; } }

/* ---------- Toasts and live region ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px); z-index: 90; display: grid; gap: 8px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow-lg); pointer-events: auto; }
.toast.error { background: var(--danger); color: var(--on-accent); }

/* ---------- Empty, loading, error states ---------- */
.state { display: grid; justify-items: center; gap: 8px; padding: 44px 20px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); grid-column: 1 / -1; } /* full width even inside a card grid */
.notice { grid-column: 1 / -1; }
/* Inside a card the card is already the frame: no second, dashed box with its own background. */
.card .state { border: 0; border-radius: 0; background: transparent; }
.state h3 { font-size: 19px; }
.state p { color: var(--muted); max-width: 480px; }
.state .state-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); }
.skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--border); }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Result panels (receipts, attendance, messages) ---------- */
.result { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 10px 0; }
.result .big-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-bg); color: var(--success); }
.result .big-tick .icon { width: 34px; height: 34px; stroke-width: 2.6; }
.result h2 { font-size: 22px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: var(--chrome); border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.1fr); gap: 40px; padding: 56px 0 40px; }
.footer-grid h2 { margin-bottom: 14px; font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-grid p { margin-top: 14px; max-width: 380px; line-height: 1.7; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--text-2); text-decoration: none; }
.footer-grid a:hover { color: var(--brand); text-decoration: underline; }
.footer-grid address { font-style: normal; line-height: 1.75; }
.footer-grid address strong { color: var(--text); }
/* The bar pinned to the bottom of every page (shell.js mountFooterBar). Its height is fixed: one row, or two rows on
   narrow screens; everything that must stay clear of it uses --bar-h. */
:root { --bar-h: 56px; }
.page-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--chrome) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); color: var(--muted); }
.page-bar a { color: var(--text-2); }
.page-bar a:hover { color: var(--brand); }
.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: calc(var(--bar-h) - 1px); box-sizing: border-box; overflow: hidden; font-size: 13px; white-space: nowrap; }
.footer-bar nav { display: flex; gap: 16px; }
.footer-bar p { margin: 0; }
/* Partner logos on the page itself: in colour on the light theme, the white versions on the dark theme. */
.partners { display: flex; align-items: center; gap: 14px; }
.partners img { display: block; height: 30px; width: auto; }
.partners span { width: 1px; height: 26px; background: var(--border-strong); }
.partners .logo-dark, :root[data-theme="dark"] .partners .logo-light { display: none; }
:root[data-theme="dark"] .partners .logo-dark { display: block; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 1240px) { .footer-grid { padding-bottom: 88px; } }
/* Narrow bars: two fixed rows, links and copyright above the logos. On dashboard pages the bar starts at the
   sidebar, so it is narrower: two rows below 960 px with the sidebar expanded or 800 px with it collapsed. */
@media (max-width: 760px) {
  :root { --bar-h: 68px; }
  .footer-bar { display: grid; grid-template-columns: auto auto; grid-template-areas: "nav copy" "logos logos"; align-content: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; }
  .footer-bar nav { grid-area: nav; gap: 12px; }
  .footer-bar p { grid-area: copy; text-align: right; }
  .partners { grid-area: logos; gap: 10px; }
  .partners img { height: 22px; }
  .partners span { height: 18px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  body:has(.shell:not(.side-collapsed)) { --bar-h: 68px; }
  body:has(.shell:not(.side-collapsed)) .footer-bar { display: grid; grid-template-columns: auto auto; grid-template-areas: "nav copy" "logos logos"; align-content: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; }
  body:has(.shell:not(.side-collapsed)) .footer-bar nav { grid-area: nav; gap: 12px; }
  body:has(.shell:not(.side-collapsed)) .footer-bar p { grid-area: copy; text-align: right; }
  body:has(.shell:not(.side-collapsed)) .partners { grid-area: logos; gap: 10px; }
  body:has(.shell:not(.side-collapsed)) .partners img { height: 22px; }
  body:has(.shell:not(.side-collapsed)) .partners span { height: 18px; }
}
@media (min-width: 761px) and (max-width: 800px) {
  body:has(.shell) { --bar-h: 68px; }
  body:has(.shell) .footer-bar { display: grid; grid-template-columns: auto auto; grid-template-areas: "nav copy" "logos logos"; align-content: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; }
  body:has(.shell) .footer-bar nav { grid-area: nav; gap: 12px; }
  body:has(.shell) .footer-bar p { grid-area: copy; text-align: right; }
  body:has(.shell) .partners { grid-area: logos; gap: 10px; }
  body:has(.shell) .partners img { height: 22px; }
  body:has(.shell) .partners span { height: 18px; }
}
@media (max-width: 360px) { .footer-bar { gap: 6px 8px; font-size: 11px; } .footer-bar nav { gap: 8px; } }
@media (max-width: 380px) { .btn-lg { max-width: 100%; padding: 10px 18px; white-space: normal; text-align: center; } }

/* ---------- Theme switch (js/theme.js) ---------- */
.theme-switch { position: fixed; left: 20px; bottom: calc(var(--bar-h) + 16px); z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; }
.theme-switch:hover { border-color: var(--brand); color: var(--brand); }
.theme-switch svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Back to top ---------- */
.to-top { position: fixed; right: 24px; bottom: calc(var(--bar-h) + 16px); z-index: 50; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--on-accent); box-shadow: var(--shadow); }
.to-top:hover { color: var(--on-accent); background: var(--brand-deep); }
@media (max-width: 620px) { .to-top { right: 16px; bottom: calc(var(--bar-h) + 12px); width: 44px; height: 44px; } }

/* ---------- Dashboard shell (account.html, dashboard.html, communications.html) ---------- */
/* The sidebar runs the full height of the window; the footer bar starts at its edge and moves with it. */
/* Layout: the sidebar is fixed to the left edge and never moves the page. The content has the homepage's width and
   position (the .wrap column) wherever that leaves room for the open sidebar; otherwise it starts just past the open
   sidebar. Below 1100 px the open sidebar slides over the content instead (console.js closes it on a click outside). */
body:has(.shell) { --side-w: 255px; --side-open: 255px; --content: calc(var(--wrap) - 48px); padding-bottom: 0; }
body:has(.shell.side-collapsed) { --side-w: 72px; }
@media (max-width: 1099px) { body:has(.shell) { --side-open: 72px; } }
body:has(.shell) .page-bar { left: var(--side-w); }
/* Dashboards: the theme switch sits at the foot of the sidebar (console.js moves it there), so it never covers it. */
.side-foot .theme-switch { position: static; width: 44px; height: 44px; justify-self: start; }
.side-collapsed .side-foot .theme-switch { justify-self: center; }
.shell { min-height: 100vh; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: var(--side-w); height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 22px; padding: 18px 14px 18px; scrollbar-width: none; background: var(--chrome); border-right: 1px solid var(--border); overflow-x: hidden; overflow-y: auto; }
.side-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-toggle { flex: none; width: 44px; height: 44px; }
.sidebar::-webkit-scrollbar { display: none; } /* still scrolls; a scrollbar would squeeze the name */
.sidebar .brand { gap: 10px; }
/* Icons only: labels are hidden from sight but still name the links for screen readers. */
.side-collapsed .sidebar { padding-left: 12px; padding-right: 12px; align-items: center; }
.side-collapsed .side-head { flex-direction: column; }
.side-collapsed .brand-text, .side-collapsed .side-foot .who { display: none; }
.side-collapsed .side-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.side-collapsed .side-nav, .side-collapsed .side-foot { width: 100%; justify-items: center; }
.side-collapsed .side-link { position: relative; justify-content: center; width: 46px; padding: 11px 0; }
.side-collapsed .side-link .count { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 16px; }
.side-collapsed .side-foot .btn { width: 46px; padding-left: 0; padding-right: 0; justify-content: center; }
.sidebar .brand-text strong { font-size: 15px; }
.side-nav { display: grid; gap: 3px; }
.side-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-weight: 600; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.side-link:hover { background: var(--surface); color: var(--text); }
.side-link[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.side-link .count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 800; text-align: center; }
.side-link .count:empty { display: none; }
.side-link[aria-current="page"] .count { background: var(--brand); color: var(--on-accent); }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
.side-foot .who { overflow-wrap: anywhere; color: var(--muted); }
.main { --left: max(calc((100% - var(--content)) / 2), calc(var(--side-open) + 24px));
  min-width: 0; padding: 22px max(24px, calc(100% - var(--content) - var(--left))) calc(var(--bar-h) + 64px) var(--left); }
@media (max-width: 1099px) { .shell:not(.side-collapsed) .sidebar { box-shadow: var(--shadow-lg); } }
.main-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.main-head h1 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.main-head .sub { margin-top: 6px; color: var(--muted); }
.main-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Phones: the actions take their own full-width row and share it evenly (a lone button keeps its natural width). */
@media (max-width: 620px) {
  .main-head { margin-bottom: 20px; }
  .main-actions { width: 100%; }
  .main-actions > * { flex: 1 1 auto; justify-content: center; padding-inline: 14px; }
  .main-actions > :only-child { flex: 0 1 auto; }
}
.card-title { font-size: 19px; line-height: 1.3; }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); } /* never wider than the page; wide parts scroll inside */
/* Rail and theme switch: on phones 100vh reaches behind the browser's toolbar, so the rail uses the visible height
   (100dvh) and its sign-out button stays clear of the theme switch below it. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--gap); }
.stat { position: relative; display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; text-align: left; color: inherit; font: inherit; }
button.stat { cursor: pointer; }
button.stat:hover { border-color: var(--tone, var(--brand)); }
button.stat[aria-pressed="true"] { border-color: var(--tone, var(--brand)); box-shadow: 0 0 0 1px var(--tone, var(--brand)), var(--shadow); }
.stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone, var(--brand)); }
.stat .label { font-size: 13px; font-weight: 600; color: var(--muted); }
/* A word (Complete, Incomplete) instead of a number: sized to the card, so it fits however narrow the card is. */
.stat { min-width: 0; container-type: inline-size; }
.stat .value.is-text { font-size: clamp(15px, 16cqi, 26px); }
.stat .value { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--tone, var(--brand)); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Phones: two compact columns (an odd last card takes the full row) instead of one tall card per row. */
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 14px 16px; }
  .stat .value { font-size: 24px; }
}
.tone-brand { --tone: var(--brand); } .tone-success { --tone: var(--success); } .tone-warning { --tone: var(--warning); } .tone-info { --tone: var(--info); } .tone-danger { --tone: var(--danger); } .tone-pink { --tone: var(--pink); } .tone-muted { --tone: var(--muted); }
/* Phones: always the icon rail (the expand button is hidden), so the page keeps its width. */
@media (max-width: 620px) { body:has(.shell), body:has(.shell.side-collapsed) { --side-w: 60px; --side-open: 60px; } .side-toggle { display: none; } .side-collapsed .sidebar { padding-left: 7px; padding-right: 7px; } }
/* Phones: the bar beside the 60 px rail is narrow, so smaller text, and three rows (links, logos, copyright) at 380 px. */
@media (max-width: 620px) {
  body:has(.shell) .page-bar .wrap { padding: 0 12px; }
  body:has(.shell) { --bar-h: 68px; }
  body:has(.shell) .footer-bar { display: grid; grid-template-columns: auto auto; grid-template-areas: "nav copy" "logos logos"; align-content: center; justify-content: space-between; gap: 6px 8px; font-size: 11px; }
  body:has(.shell) .footer-bar nav { grid-area: nav; gap: 8px; }
  body:has(.shell) .footer-bar p { grid-area: copy; text-align: right; }
  body:has(.shell) .partners { grid-area: logos; gap: 10px; }
  body:has(.shell) .partners img { height: 22px; }
  body:has(.shell) .partners span { height: 18px; }
}
@media (max-width: 380px) {
  body:has(.shell) { --bar-h: 84px; }
  body:has(.shell) .footer-bar { grid-template-columns: auto; grid-template-areas: "nav" "logos" "copy"; justify-content: start; gap: 4px; }
  body:has(.shell) .footer-bar p { text-align: left; }
}
/* Narrow screens: 16 px gutters beside the icon rail (72 px, 60 px on phones). */
@media (max-width: 900px) {
  .main { --left: 88px; padding: 14px 16px calc(var(--bar-h) + 40px) var(--left); }
}
@media (max-width: 620px) { .main { --left: 76px; } }

/* Pages without the footer bar (every page but the homepage) leave no room for it. */
body:not(:has(> .page-bar)) { --bar-h: 0px !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}