/* =====================================================================
   EnroBoard — styles following the IBM Carbon Design System, like ResoBoard and
   DaisBoard (whose stylesheet this one grew from), with EnroBoard's charcoal and teal in
   place of ResoBoard's UN blue and DaisBoard's plum. One file for every page.
   ===================================================================== */
:root {
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --accent: #3ddbd9;
  --interactive: #007d79;
  --interactive-hover: #006e6a;
  --interactive-active: #005855;
  --interactive-tint: #e0efef;
  --focus: #007d79;
  --link: #007d79;

  --header: #161616;
  --header-hover: #2b2b2b;
  --header-border: #3d3d3d;
  --header-text: #f4f4f4;
  --header-text-2: #c6c6c6;
  --header-text-strong: #ffffff;
  /* the accent's lighter shade (banner graphics, the banner's eyebrow) and the mark's colors; a conference's
     own colors replace all of these (lib/theme.js writes them into each page) */
  --accent-light: #9ef0f0;
  --hero-eyebrow: #9ef0f0;
  --mark-ring: #3ddbd9;
  --mark-dais: #82e8e6;
  --mark-arc: #bdf3f2;

  --bg: #ffffff;
  --layer: #f4f4f4;
  --layer-hover: #e8e8e8;
  --layer-2: #ffffff;
  --layer-accent: #e0e0e0;
  --field: #f4f4f4;
  --border-subtle: #e0e0e0;
  --border-strong: #8d8d8d;
  --text: #161616;
  --text-2: #525252;
  --text-helper: #6f6f6f;
  --text-placeholder: #a8a8a8;
  --error: #da1e28;
  --error-text: #a2191f;
  --error-tint: #fff1f1;
  --success: #24a148;
  --success-text: #0e6027;
  --success-tint: #defbe6;
  --warning: #f1c21b;
  --warning-tint: #fcf4d6;
  --info-tint: #edf5ff;
  --secondary: #393939;
  --secondary-hover: #4c4c4c;
  --danger: #da1e28;
  --danger-hover: #b81921;
  --overlay: rgba(22, 22, 22, 0.5);
  --shadow: rgba(0, 0, 0, 0.2);
  /* confidential things (awards, deliberations) and amendments on the floor: teal, apart from the plum */
  --confidential: #007d79;
  --confidential-tint: #e3f6f5;
  color-scheme: light;
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --interactive: #08bdba;
  --interactive-hover: #3ddbd9;
  --interactive-active: #9ef0f0;
  --interactive-tint: #0d2b2b;
  --focus: #08bdba;
  --link: #3ddbd9;
  --bg: #161616;
  --layer: #262626;
  --layer-hover: #333333;
  --layer-2: #393939;
  --layer-accent: #393939;
  --field: #262626;
  --border-subtle: #393939;
  --border-strong: #6f6f6f;
  --text: #f4f4f4;
  --text-2: #c6c6c6;
  --text-helper: #a8a8a8;
  --text-placeholder: #6f6f6f;
  --error: #fa4d56;
  --error-text: #ff8389;
  --error-tint: #2d1214;
  --success: #42be65;
  --success-text: #6fdc8c;
  --success-tint: #0e2617;
  --warning-tint: #2e2810;
  --info-tint: #0b1e33;
  --secondary: #6f6f6f;
  --secondary-hover: #606060;
  --overlay: rgba(0, 0, 0, 0.65);
  --shadow: rgba(0, 0, 0, 0.6);
  --confidential: #3ddbd9;
  --confidential-tint: #04282a;
}
/* dark mode: filled buttons are light, so their text is dark (every size; not the outlined, ghost, grey or red ones) */
:root[data-mode="dark"] .btn:not(.btn--secondary):not(.btn--tertiary):not(.btn--ghost):not(.btn--danger):not(.btn--danger-ghost):not(.btn--danger-tertiary):not(.btn--on-dark),
:root[data-mode="dark"] .btn--tertiary:hover, :root[data-mode="dark"] .chip[aria-pressed="true"], :root[data-mode="dark"] .seg button[aria-pressed="true"],
:root[data-mode="dark"] .projector__mode, :root[data-mode="dark"] .score button[aria-pressed="true"] { color: #161616; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 0.875rem; line-height: 1.43; letter-spacing: 0.16px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.muted { color: var(--text-helper); }
.mono { font-family: var(--mono); }
.heading-01 { font-size: 0.875rem; font-weight: 600; }
.heading-02 { font-size: 1rem; font-weight: 600; line-height: 1.375; }
.heading-03 { font-size: 1.25rem; font-weight: 400; line-height: 1.4; }
.heading-04 { font-size: 1.75rem; font-weight: 400; line-height: 1.29; }
.heading-05 { font-size: 2rem; font-weight: 300; line-height: 1.25; }
.body-02 { font-size: 1rem; line-height: 1.5; }
.label { font-size: 0.75rem; color: var(--text-2); letter-spacing: 0.32px; }
.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.db-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: stretch; height: 48px; background: var(--header); color: var(--header-text); border-bottom: 1px solid var(--header-border); }
.db-header__brand { display: flex; align-items: center; gap: 10px; padding: 0 32px 0 16px; color: var(--header-text); text-decoration: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1px; white-space: nowrap; flex: none; }
.db-header__brand:hover { color: var(--header-text-strong); text-decoration: none; }
.db-header__brand .prefix { font-weight: 400; color: var(--header-text); max-width: 22vw; overflow: hidden; text-overflow: ellipsis; }
.db-header__mark { width: 25px; height: 25px; flex: none; } /* its drawing leaves more air than ResoBoard’s ring, so a little larger box to look the same size */
.db-header__mark svg { width: 25px; height: 25px; display: block; }
.db-header__brand .wordmark { height: 13px; }
.db-header__brand .wordmark__enro { fill: var(--header-text-2); }
.db-header__brand .wordmark__board { fill: var(--header-text-strong); }
.db-header__nav { display: flex; align-items: stretch; border-left: 1px solid var(--header-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.db-header__nav::-webkit-scrollbar { display: none; }
.db-header__link { display: flex; align-items: center; white-space: nowrap; padding: 0 16px; color: var(--header-text-2); font-size: 0.875rem; text-decoration: none; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.db-header__link:hover { background: var(--header-hover); color: var(--header-text-strong); text-decoration: none; }
.db-header__link[aria-current="page"] { color: var(--header-text-strong); border-bottom-color: var(--accent); font-weight: 600; }
.db-header__slot { display: flex; align-items: stretch; }
.db-header__menu { display: none; }
.db-header__global { margin-left: auto; display: flex; align-items: stretch; }
.db-header__user { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; text-align: right; line-height: 1.2; white-space: nowrap; }
.db-header__user strong { font-weight: 600; font-size: 0.8125rem; color: var(--header-text); }
.db-header__user span { font-size: 0.75rem; color: var(--header-text-2); }
.db-header__action { display: flex; align-items: center; gap: 8px; padding: 0 16px; background: transparent; border: 0; border-left: 1px solid var(--header-border); color: var(--header-text); font: inherit; font-size: 0.875rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.db-header__action:hover { background: var(--header-hover); color: var(--header-text-strong); text-decoration: none; }
.db-header__icon { padding: 0; width: 48px; justify-content: center; border-left: 0; }
.db-header__action .label { font-size: inherit; color: inherit; letter-spacing: inherit; }
/* the wordmark and mark (web/assets/js/brand.js): "Enro" light in the secondary text color, "Board" bold in the strong one */
.wordmark { display: block; height: 0.95em; width: auto; flex: none; overflow: visible; }
.wordmark__enro { fill: var(--text-2); }
.wordmark__board { fill: var(--text); }
.wordmark-text { font-weight: 600; }
/* the mark, a name badge: the card in the accent's lightest shade, its band in the accent, the slot and silhouette in the top bar's color */
.mark__badge { fill: var(--mark-arc); }
.mark__band { fill: var(--mark-ring); }
.mark__cut { fill: var(--header); }
/* with a logo, sizes as on ResoBoard: the logo 30px (on a light card when the bar is dark, so logos made for
   white paper stay readable), a taller divider, and the mark and wordmark a step larger */
.db-header__logo { display: block; height: 30px; width: auto; max-width: 140px; object-fit: contain; border-radius: 3px; }
.db-header--dark .db-header__logo { background: #fff; padding: 2px 4px; height: 32px; }
.db-header__brand.has-logo .db-header__sep { height: 24px; }
.db-header__brand.has-logo .db-header__mark, .db-header__brand.has-logo .db-header__mark svg { width: 27px; height: 27px; }
.db-header__brand.has-logo .wordmark { height: 15px; }
.db-header__brand--logo { gap: 12px; }
.db-header__sep { width: 1px; height: 22px; background: var(--header-border); }
.db-header__app { display: inline-flex; align-items: center; gap: 8px; }
.db-header__app .db-header__mark, .db-header__app .db-header__mark svg { width: 25px; height: 25px; } /* next to a conference too */
#mode-toggle .icon-sun { display: none; }
:root[data-mode="dark"] #mode-toggle .icon-sun { display: inline; }
:root[data-mode="dark"] #mode-toggle .icon-moon { display: none; }
@media (max-width: 672px) {
  /* a phone: the mark alone, sign out as an icon, and the links in a menu (no sideways scrolling) */
  .db-header__brand { padding: 0 12px; }
  .db-header__brand .wordmark, .db-header__brand .wordmark-text { display: none; }
  .db-header__menu { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; background: transparent; border: 0; border-left: 1px solid var(--header-border); color: var(--header-text-strong); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
  .db-header__menu:hover, .is-menu-open .db-header__menu { background: var(--header-hover); }
  .db-header__menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the menu glides down (240 ms, easing in to rest) with its links following one after another, and slips
     away a little faster (180 ms) */
  .db-header__nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; border-left: 0; border-bottom: 1px solid var(--header-border); background: var(--header); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); overflow: visible;
    visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; will-change: opacity, transform;
    transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1), transform 180ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 180ms; }
  .is-menu-open .db-header__nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity 240ms cubic-bezier(0, 0, 0.2, 1), transform 240ms cubic-bezier(0, 0, 0.2, 1), visibility 0s; }
  .db-header__nav .db-header__link { opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease-in, transform 120ms ease-in; }
  .is-menu-open .db-header__nav .db-header__link { opacity: 1; transform: none; transition: opacity 220ms cubic-bezier(0, 0, 0.2, 1), transform 220ms cubic-bezier(0, 0, 0.2, 1); }
  .is-menu-open .db-header__nav .db-header__link:nth-child(2) { transition-delay: 30ms; }
  .is-menu-open .db-header__nav .db-header__link:nth-child(3) { transition-delay: 60ms; }
  .is-menu-open .db-header__nav .db-header__link:nth-child(4) { transition-delay: 90ms; }
  .is-menu-open .db-header__nav .db-header__link:nth-child(n+5) { transition-delay: 110ms; }
  .db-header__link { min-height: 48px; padding: 0 16px; border-top: 0; border-bottom: 0; border-left: 3px solid transparent; }
  .db-header__link + .db-header__link { border-top: 1px solid var(--header-border); }
  .db-header__link[aria-current="page"] { border-left-color: var(--accent); border-bottom-color: transparent; }
  .db-header__global { flex: none; }
}
/* many links (staff pages): when they don't fit, the header folds them into the menu, as on a phone
   (App.header measures this and sets db-header--compact) */
/* a phone: the mark alone, sign out as an icon, and the links in a menu (no sideways scrolling) */
.db-header--compact .db-header__menu { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; background: transparent; border: 0; border-left: 1px solid var(--header-border); color: var(--header-text-strong); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.db-header--compact .db-header__menu:hover, .db-header--compact.is-menu-open .db-header__menu { background: var(--header-hover); }
.db-header--compact .db-header__menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the menu glides down (240 ms, easing in to rest) with its links following one after another, and slips
   away a little faster (180 ms) */
.db-header--compact .db-header__nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; border-left: 0; border-bottom: 1px solid var(--header-border); background: var(--header); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); overflow: visible;
  visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; will-change: opacity, transform;
  transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1), transform 180ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 180ms; }
.db-header--compact.is-menu-open .db-header__nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 240ms cubic-bezier(0, 0, 0.2, 1), transform 240ms cubic-bezier(0, 0, 0.2, 1), visibility 0s; }
.db-header--compact .db-header__nav .db-header__link { opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease-in, transform 120ms ease-in; }
.db-header--compact.is-menu-open .db-header__nav .db-header__link { opacity: 1; transform: none; transition: opacity 220ms cubic-bezier(0, 0, 0.2, 1), transform 220ms cubic-bezier(0, 0, 0.2, 1); }
.db-header--compact.is-menu-open .db-header__nav .db-header__link:nth-child(2) { transition-delay: 30ms; }
.db-header--compact.is-menu-open .db-header__nav .db-header__link:nth-child(3) { transition-delay: 60ms; }
.db-header--compact.is-menu-open .db-header__nav .db-header__link:nth-child(4) { transition-delay: 90ms; }
.db-header--compact.is-menu-open .db-header__nav .db-header__link:nth-child(n+5) { transition-delay: 110ms; }
.db-header--compact .db-header__link { min-height: 48px; padding: 0 16px; border-top: 0; border-bottom: 0; border-left: 3px solid transparent; }
.db-header--compact .db-header__link + .db-header__link { border-top: 1px solid var(--header-border); }
.db-header--compact .db-header__link[aria-current="page"] { border-left-color: var(--accent); border-bottom-color: transparent; }
.db-header--compact .db-header__global { flex: none; }
@media (max-width: 430px) {
  /* next to a conference's logo there's only room for the menu icon (the page's own heading names the page) */
  .db-header:has(.db-header__brand.has-logo) .db-header__menu-label { display: none; }
  .db-header:has(.db-header__brand.has-logo) .db-header__menu { width: 48px; justify-content: center; padding: 0; }
  .db-header__user { display: none; }
  .db-header__action .label { display: none; }
}

/* ---------- page layout ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.page--narrow { max-width: 640px; }
.page--wide { max-width: 1600px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.page-head__eyebrow { font-size: 0.75rem; color: var(--text-2); margin-bottom: 0.25rem; }
.message-page { padding-top: 4rem; }
.message-page > * + * { margin-top: 1rem; }
.section { margin-top: 2rem; }
.section__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.footer { padding: 2rem 1rem; color: var(--text-helper); font-size: 0.75rem; text-align: center; }
.footer a { color: inherit; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: 0;
  background: var(--interactive); color: #fff; cursor: pointer; text-decoration: none; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; transition: background 70ms; }
.btn:hover { background: var(--interactive-hover); }
.btn:active { background: var(--interactive-active); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn--secondary { background: var(--secondary); color: #fff; }
.btn--secondary:hover { background: var(--secondary-hover); }
.btn--tertiary { background: transparent; color: var(--interactive); border-color: var(--interactive); }
.btn--tertiary:hover { background: var(--interactive); color: #fff; }
:root[data-mode="dark"] .btn--tertiary:hover { color: #161616; }
.btn--ghost { background: transparent; color: var(--interactive); }
.btn--ghost:hover { background: var(--layer-hover); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-hover); }
.btn--danger-ghost { background: transparent; color: var(--error); }
.btn--danger-ghost:hover { background: var(--danger); color: #fff; }
.btn--sm { min-height: 2rem; padding: 0.25rem 0.75rem; }
.btn--xs { min-height: 1.5rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; }
.btn--lg { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 0.5rem; min-width: 2.5rem; }
.btn kbd { font-family: var(--mono); font-size: 0.6875rem; opacity: 0.75; padding: 0 0.25rem; border: 1px solid currentColor; border-radius: 2px; }
.btn-set { display: flex; flex-wrap: wrap; gap: 1px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field > label, .field__label { font-size: 0.75rem; color: var(--text-2); letter-spacing: 0.32px; }
.helper { font-size: 0.75rem; color: var(--text-helper); }
.input, .select, .textarea { width: 100%; min-height: 2.5rem; padding: 0.5rem 1rem; background: var(--field); color: var(--text); border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; }
.select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.textarea { min-height: 5rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.input--sm, .select--sm { min-height: 2rem; padding: 0.25rem 0.75rem; }
.select--sm { padding-right: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.check { display: inline-flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.check input { width: 1rem; height: 1rem; margin: 0.125rem 0 0; accent-color: var(--interactive); }
.check-list { display: grid; gap: 0.5rem; }
.check--sub { margin-left: 1.75rem; }
.check--sub:has(input:disabled) { opacity: 0.55; }
.check--locked { cursor: default; }
.check--locked strong, .check--locked .muted { opacity: 0.6; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem 1rem; }

/* ---------- tiles, tags, tables ---------- */
.tile { background: var(--layer); padding: 1rem; }
.tile--link { display: block; color: inherit; text-decoration: none; border: 1px solid transparent; }
.tile--link:hover { background: var(--layer-hover); border-color: var(--border-strong); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tag { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.5rem; padding: 0 0.5rem; border-radius: 1rem; font-size: 0.75rem; background: var(--layer-accent); color: var(--text); white-space: nowrap; }
.tag--teal { background: var(--interactive-tint); color: var(--interactive); }
.tag--green { background: var(--success-tint); color: var(--success-text); }
.tag--red { background: var(--error-tint); color: var(--error-text); }
.tag--yellow { background: var(--warning-tint); color: var(--text); }
.tag--purple { background: var(--confidential-tint); color: var(--confidential); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-weight: 600; background: var(--layer-accent); padding: 0.625rem 0.75rem; white-space: nowrap; position: sticky; top: 0; }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.table tbody tr:hover { background: var(--layer-hover); }
.table th button.sort { background: none; border: 0; padding: 0; font-weight: 600; cursor: pointer; }
.table th button.sort[aria-sort="ascending"]::after { content: ' ▲'; font-size: 0.6rem; }
.table th button.sort[aria-sort="descending"]::after { content: ' ▼'; font-size: 0.6rem; }
.table tr.is-off td { color: var(--text-helper); text-decoration: line-through; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--text-helper); background: var(--layer); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }

/* ---------- notifications, modal, toast ---------- */
.notice { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; border-left: 3px solid var(--interactive); background: var(--info-tint); }
.notice--error { border-color: var(--error); background: var(--error-tint); }
.notice--warning { border-color: var(--warning); background: var(--warning-tint); }
.notice--success { border-color: var(--success); background: var(--success-tint); }
.notice--confidential { border-color: var(--confidential); background: var(--confidential-tint); }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--overlay); }
.modal__box { width: 100%; max-width: 560px; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; background: var(--layer); box-shadow: 0 2px 6px var(--shadow); }
.modal__box--lg { max-width: 860px; }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1rem 0.5rem; }
.modal__body { padding: 0.5rem 1rem 1.5rem; overflow-y: auto; }
.modal__body > * + * { margin-top: 1rem; }
.modal__foot { display: flex; }
.modal__foot .btn { flex: 1; min-height: 4rem; align-items: flex-start; justify-content: flex-start; padding: 1rem; }
.modal__close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; color: var(--text); }
.modal__error:empty { display: none; }
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 300; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(420px, calc(100vw - 2rem)); }
.toast { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; background: #393939; color: #f4f4f4; border-left: 3px solid var(--accent); box-shadow: 0 2px 6px var(--shadow); }
.toast--error { border-color: #fa4d56; }
.toast--success { border-color: #42be65; }
.toast button { background: none; border: 0; color: #78a9ff; cursor: pointer; padding: 0; text-decoration: underline; }
.offline-bar { position: sticky; top: 3rem; z-index: 40; padding: 0.5rem 1rem; background: var(--warning); color: #161616; font-size: 0.875rem; text-align: center; }

/* ---------- tabs ---------- */
.tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border-subtle); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: 0.75rem 1rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; text-decoration: none; }
.tab:hover { color: var(--text); background: var(--layer-hover); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--interactive); font-weight: 600; }
.tab .tag { margin-left: 0.25rem; }

/* ---------- sign-in ---------- */
.login { max-width: 960px; margin: 0 auto; padding: 3rem 1rem; display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 3rem; }
.login__demo { background: var(--layer); padding: 1.5rem; }
.demo-accounts { display: grid; gap: 1px; margin-top: 1rem; }
.demo-account { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 0.75rem 1rem; background: var(--layer-2); border: 0; text-align: left; cursor: pointer; }
.demo-account:hover { background: var(--interactive-tint); }
@media (max-width: 800px) { .login { grid-template-columns: 1fr; } }

.legal h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; }
.legal p, .legal li { font-size: 1rem; line-height: 1.6; }
.legal p + p, .legal ul { margin-top: 0.75rem; }

@media (hover: none) { .btn kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  .db-header, .desk-tabs, .no-print, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
  .page { padding: 0; max-width: none; }
}

/* ================================================================ a conference's look (Setup → Appearance) */
/* banner graphics (web/assets/js/hero.js), colored by the theme */
.art .s-a { stroke: var(--accent); }
.art .s-l { stroke: var(--accent-light); }
.art .f-a { fill: var(--accent); }
.art .f-l { fill: var(--accent-light); }
.art { display: block; width: 100%; height: 100%; }
/* the public page's banner */
.conf-hero { position: relative; overflow: hidden; background: var(--header); color: var(--header-text-strong); }
.conf-hero__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 56px 1rem 64px; }
.conf-hero__eyebrow { color: var(--hero-eyebrow); font-size: 0.875rem; letter-spacing: 0.16px; margin-bottom: 12px; }
.conf-hero h1 { font-size: 2.625rem; line-height: 1.19; font-weight: 400; max-width: 640px; }
.conf-hero p#pub-intro { color: var(--header-text-2); margin-top: 16px; max-width: 520px; line-height: 1.5; }
.conf-hero__art { position: absolute; right: 4%; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); opacity: 0.9; pointer-events: none; }
.conf-hero__logo { display: block; max-height: 72px; max-width: 240px; width: auto; object-fit: contain; margin-bottom: 24px; }
.btn--on-dark { background: var(--header-text-strong); color: var(--header); }
.btn--on-dark:hover { background: var(--header-text); color: var(--header); }
@media (max-width: 900px) { .conf-hero__art { opacity: 0.25; right: -120px; } .conf-hero h1 { font-size: 2rem; } }
/* the sign-in page */
.login__art { position: relative; background: var(--header); overflow: hidden; min-height: 420px; border-radius: var(--radius); }
.login__art .art-wrap { position: absolute; inset: 0; margin: auto; width: 80%; max-width: 480px; height: 80%; max-height: 480px; }
.login__logo { display: block; max-height: 56px; max-width: 200px; object-fit: contain; margin-bottom: 1rem; }
@media (max-width: 800px) { .login__art { display: none; } }
/* the footer */
.site-footer { border-top: 1px solid var(--border-subtle); margin-top: 3rem; }
.site-footer__inner { max-width: 1312px; margin: 0 auto; padding: 16px 1rem 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: flex-end; color: var(--text-helper); font-size: 0.75rem; letter-spacing: 0.32px; }
.site-footer a { color: var(--text-2); }
.site-footer__who { display: flex; flex-direction: column; gap: 6px; }
.site-footer__brand { display: inline-flex; margin-bottom: 2px; }
.site-footer .site-footer__brand .wordmark { height: 16px; }
.site-footer .site-footer__brand .wordmark__enro { fill: var(--text-2); }
.site-footer .site-footer__brand .wordmark__board { fill: var(--text); }
.site-footer__by { display: flex; align-items: center; gap: 5px; }
.site-footer__by a { display: inline-flex; }
.site-footer .wordmark { height: 10px; }
.site-footer .wordmark__enro { fill: var(--text-helper); }
.site-footer .wordmark__board { fill: var(--text-2); }
.site-footer__by a:hover .wordmark__board { fill: var(--text); }
.site-footer__conf { color: var(--text); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.16px; }
.site-footer .site-footer__conf a { color: inherit; }
/* Setup → Appearance */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.swatch { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--layer); border: 1px solid var(--border-subtle); cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.swatch:hover { border-color: var(--border-strong); }
.swatch.is-selected { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); }
.swatch__bar { display: flex; height: 24px; }
.swatch__bar span { flex: 1; }
.swatch__bar span:first-child { flex: 2; }
.swatch__name { font-size: 0.8125rem; }
.color-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.color-field { display: flex; gap: 6px; align-items: stretch; }
.color-field input[type=color] { width: 44px; height: 40px; padding: 0; border: 1px solid var(--border-subtle); background: none; cursor: pointer; }
.color-field .input { font-family: var(--mono); }
.hero-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.hero-option { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; background: var(--layer); border: 1px solid var(--border-subtle); cursor: pointer; font: inherit; color: var(--text); }
.hero-option.is-selected { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); }
.hero-option__art { display: block; aspect-ratio: 1; background: var(--header); padding: 6px; }
.hero-option__name { font-size: 0.8125rem; }
.logo-field { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-field__preview { width: 160px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--header); padding: 8px; }
.logo-field__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-field__preview .muted { color: var(--header-text-2); font-size: 0.75rem; }
.appearance { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.appearance__preview { position: sticky; top: 64px; }
.theme-preview { border: 1px solid var(--border-subtle); background: var(--bg); overflow: hidden; }
.theme-preview__header { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--header); color: var(--header-text-strong); font-size: 0.8125rem; font-weight: 600; }
.theme-preview__header .wordmark { height: 10px; }
.theme-preview__header .wordmark__enro { fill: var(--header-text-2); }
.theme-preview__header .wordmark__board { fill: var(--header-text-strong); }
.theme-preview__header svg.mark, .theme-preview__header img { width: 18px; height: 18px; object-fit: contain; }
.theme-preview__header img { width: auto; max-width: 80px; }
.theme-preview__hero { position: relative; overflow: hidden; background: var(--header); padding: 20px 12px 28px; border-top: 1px solid var(--header-border); }
.theme-preview__hero .art-wrap { position: absolute; right: -40px; top: -10px; width: 170px; height: 170px; opacity: 0.9; }
.theme-preview__hero .eyebrow { position: relative; color: var(--hero-eyebrow); font-size: 0.75rem; }
.theme-preview__hero h3 { position: relative; color: var(--header-text-strong); font-size: 1.25rem; font-weight: 400; margin-top: 4px; max-width: 70%; }
.theme-preview__body { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 12px; color: var(--text); }
.theme-preview__body a { color: var(--link); }
@media (max-width: 1000px) { .appearance { grid-template-columns: 1fr; } .appearance__preview { position: static; } }
/* Lite mode: no web fonts, banner graphics or animations */
.lite .conf-hero__art, .lite .login__art { display: none !important; }
.lite *, .lite *::before, .lite *::after { transition: none !important; animation: none !important; }

/* Setup → Who chairs a committee */
.chair-list { display: grid; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.chair-list--add { max-height: 320px; overflow: auto; }
.chair-row { background: var(--layer); padding: 0.5rem 0.75rem; }
.chair-row__main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chair-row__name { flex: 1; min-width: 10rem; }
.chair-row__name small { display: block; color: var(--text-helper); font-size: 0.75rem; }
.chair-row .seg button { padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.chair-row__rights { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; padding: 0.5rem 0 0.25rem; }
/* small labels under a person's name: their committees and roles */
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pills .tag { font-size: 0.6875rem; line-height: 1.1; padding: 2px 8px; min-height: 0; }
.tag--outline { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tag--free { color: var(--text-helper); box-shadow: inset 0 0 0 1px var(--border-subtle); }

/* ================================================================ settings (laid out as on ResoBoard) */
.page-head__sub { color: var(--text-2); margin-top: 0.5rem; max-width: 40rem; }
.settings { max-width: 640px; }
.settings .section { margin: 0 0 3rem; }
.settings .section__head { display: block; margin-bottom: 1rem; }
.settings .section__head p { color: var(--text-2); margin-top: 0.25rem; max-width: 640px; }
.settings .narrow-form { max-width: 400px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { flex: 1; min-width: 0; }
.switch-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 0; cursor: pointer; }
.switch-row + .switch-row { border-top: 1px solid var(--border-subtle); }
.switch-row strong { display: block; font-size: 0.875rem; }
.switch-row__hint { display: block; font-size: 0.75rem; color: var(--text-2); line-height: 1.35; margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; margin-top: 1px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch__track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 11px; transition: background 110ms; }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 110ms; }
.switch input:checked + .switch__track { background: var(--interactive); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: 0.4; }
.btn--danger-tertiary { background: transparent; color: var(--error); border-color: var(--error); }
.btn--danger-tertiary:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.danger-zone { border: 1px solid var(--error); padding: 20px 24px; max-width: 880px; }
.danger-zone h2 { color: var(--error); margin: 0; }
.danger-zone__intro { color: var(--text-2); font-size: 0.875rem; margin: 4px 0 8px; }
.danger-list { list-style: none; margin: 0; padding: 0; }
.danger-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.danger-list li > div { flex: 1 1 320px; }
.danger-list strong { display: block; font-size: 0.875rem; }
.danger-list span { display: block; font-size: 0.8125rem; color: var(--text-2); margin-top: 2px; line-height: 1.4; }

/* ================================================================ the public page: EnroBoard's own layout
   (ResoBoard's is left-aligned with the graphic on the right; here the banner is centered, the graphic sits
   behind it as a seal, the room of delegates runs along its foot, and below is a live board) */
.conf-hero--dais { text-align: center; padding-bottom: 4.5rem; }
.conf-hero--dais .conf-hero__inner { max-width: 760px; padding: 64px 1rem 40px; }
.conf-hero--dais h1 { max-width: none; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 300; letter-spacing: -0.01em; }
.conf-hero--dais p#pub-intro { margin: 16px auto 0; }
.conf-hero--dais .conf-hero__logo { margin: 0 auto 24px; }
.conf-hero--dais .conf-hero__art { right: auto; left: 50%; top: 44%; width: 640px; height: 640px; transform: translate(-50%, -50%); opacity: 0.09; }
.conf-hero__actions:empty { display: none; }
.conf-hero__actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.conf-room { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3.5rem; color: var(--mark-dais); fill: currentColor; opacity: 0.3; pointer-events: none; }
.conf-room__card { fill: var(--mark-arc); }
.board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.board__live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-2); }
.board__live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: db-pulse 2s infinite; }
@keyframes db-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.board__card { background: var(--layer); border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-strong); border-radius: var(--radius); padding: 1rem 1.25rem 1.25rem; }
.board__card--live { border-left-color: var(--success); }
.board__card--caucus { border-left-color: var(--accent); }
.board__card--voting { border-left-color: var(--warning); }
.board__card--off { border-left-color: var(--error); }
.board__top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.board__code { font-family: var(--mono); font-size: 0.8125rem; padding: 0.125rem 0.5rem; border-radius: 1rem; background: var(--layer-accent); }
.board__state { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-2); }
.board__state i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border-strong); }
.board__card--live .board__state i { background: var(--success); }
.board__card--caucus .board__state i { background: var(--accent); }
.board__card--voting .board__state i { background: var(--warning); }
.board__card--off .board__state i { background: var(--error); }
.board__name { font-size: 1.125rem; font-weight: 600; margin-top: 0.75rem; line-height: 1.3; }
.board__topic { color: var(--text-2); margin-top: 0.25rem; line-height: 1.45; }
.board__lines { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); display: grid; gap: 0.375rem; }
.board__line { display: flex; gap: 0.75rem; font-size: 0.875rem; }
.board__key { flex: none; width: 6.5rem; color: var(--text-2); font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; padding-top: 0.125rem; }
.board__val { min-width: 0; }
.lite .conf-room { display: none; }
@media (max-width: 600px) { .board { grid-template-columns: 1fr; } .conf-hero--dais .conf-hero__art { width: 340px; height: 340px; } }

/* ================================================================ EnroBoard's shape: rounded corners, everywhere
   ResoBoard keeps Carbon's square corners; DaisBoard rounds everything; EnroBoard rounds everything a little less
   (8 and 5 px against DaisBoard's 10 and 6), so it reads as their sibling and still as its own app. */
:root { --radius: 8px; --radius-sm: 5px; }
/* controls */
.btn, .status-btn, .chip, .tag--btn, .score button, .color-field input[type=color], .demo-account, .menu-item { border-radius: var(--radius-sm); }
.seg { border-radius: var(--radius-sm); overflow: hidden; }
.seg > *, .btn-set > .btn { border-radius: 0; }
.btn-set > .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-set > .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-set > .btn:only-child { border-radius: var(--radius-sm); }
/* fields: a light frame all round, the stronger line underneath as in Carbon */
.input, .select, .textarea { border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); border-bottom-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); }
/* fields and buttons joined into one control: the outer corners only */
.input-group, .slug-field { border-radius: var(--radius-sm); overflow: hidden; }
.input-group > *, .slug-field > * > * { border-radius: 0 !important; }
/* boxes */
.tile, .panel, .stage, .empty, .notice, .howto, .getting-started, .onfloor, .onfloor__over, .notice--amendment, .res-list, .login__demo,
.theme-preview, .swatch, .hero-option, .radio-card, .danger-zone, .speaker, .feed li, .rc-row, .stat, .ballot, .projector__box, .lp-motion,
.chair-list, .table-wrap, .toast, .desk-bar, .lp-floor, .board__card { border-radius: var(--radius); }
.chair-list, .res-list, .theme-preview { overflow: hidden; }
.table-wrap { overflow-x: auto; } /* rounded, and still scrolls sideways on a phone */
.speaker, .feed li, .rc-row, .ballot, .stat { border-radius: var(--radius-sm); }
.timer-bar, .timer-bar > span { border-radius: 3px; }
.modal__box { border-radius: var(--radius); overflow: hidden; }
.modal__foot .btn { border-radius: 0; }
/* notices with a colored edge on the left are rounded too */
.notice, .howto, .getting-started, .onfloor, .notice--amendment, .onfloor__over, .lp-floor, .toast, .panel--floor, .panel--vote, .board__card { border-radius: var(--radius); }
.tabs .tab, .desk-tabs .tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.desk-tabs { border-radius: 0; }
/* ================================================================ platform pages: the go-box at the top, the call to action, registration */
.page--narrow { max-width: 720px; }
.reg-form { display: grid; gap: 2.5rem; }
.reg-form .field { max-width: 560px; }
.slug-field { display: flex; align-items: stretch; }
.slug-field .input { flex: 1; min-width: 0; border-radius: 0; }
.slug-field .affix { display: flex; align-items: center; padding: 0 0.625rem; background: var(--layer-accent); color: var(--text-2); font-size: 0.8125rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.slug-status.ok { color: var(--success-text, var(--success)); }
.slug-status.bad { color: var(--error-text, var(--error)); }
.message-page { padding: 2rem 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }

/* Setup → Chairs & staff: the secretariat, the organizing team and the chairs, one under the other */
.radio-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.radio-cards--3 .radio-card { padding: 0.625rem 0.75rem; align-items: center; }
@media (max-width: 560px) { .radio-cards--3 { grid-template-columns: 1fr; } }
.people-group { margin-top: 2rem; }
.people-group__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--interactive); }
.people-group__head .count { font-weight: 400; color: var(--text-2); margin-left: 0.25rem; }
.people-group__head .helper { margin-top: 0.125rem; }

/* Setup → Awards: rows edited in place */
.edit-rows { display: grid; gap: 0.5rem; }
.edit-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.6fr) auto auto; gap: 0.5rem; align-items: center; }
.edit-row--crit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto auto; }
.edit-row__num { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.edit-row__num .input { width: 4.25rem; }
.edit-rows:not(.is-weighted) .edit-row__weight { display: none; }
.edit-row.is-off .input { opacity: 0.55; }
@media (max-width: 700px) { .edit-row, .edit-row--crit { grid-template-columns: 1fr auto; } .edit-row > .input:not(:first-child) { grid-column: 1 / -1; } }

/* table rows that open something */
.table tr.is-clickable { cursor: pointer; }
.table tr.is-clickable:hover td { background: var(--interactive-tint); }
.table tr.is-clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.row-chevron { color: var(--text-2); font-size: 1.25rem; width: 1.5rem; }
.feed li .btn--icon { flex: none; align-self: flex-start; }

/* ================================================================ owner panel (laid out as on ResoBoard) */
.count-badge { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger, #da1e28); color: #fff; font-size: 0.75rem; align-items: center; justify-content: center; margin-left: 6px; font-weight: 600; }
.owner-card { background: var(--layer); padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; gap: 16px; border-radius: var(--radius); }
.owner-card + .owner-card { margin-top: 8px; }
.owner-card .kv { grid-template-columns: 120px 1fr; margin-top: 12px; }
.owner-card .kv dt, .owner-card .kv dd { padding: 4px 0; }
.owner-card__actions { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
@media (max-width: 672px) { .owner-card { grid-template-columns: 1fr; } }
.check-list { list-style: none; margin: 0; padding: 0; background: var(--layer); border-radius: var(--radius); overflow: hidden; }
.check-list li { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
.check-list li:first-child { border-top: 0; }
.check-list .check-list__extra { border-top: 0; padding: 0 16px 14px 38px; }
.check-list__extra > div { flex: 1; min-width: 0; }
.check-list__extra .notice { margin-top: 8px; }
.check-list .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--success); }
.check-list .dot.off { background: var(--warning); }
.check-list .dot.bad { background: var(--error); }
.check-list p { color: var(--text-2); font-size: 0.75rem; margin-top: 2px; overflow-wrap: anywhere; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 32px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.code-row { display: flex; gap: 8px; }
.code-row .input { flex: 1; min-width: 0; }
.table-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.table-toolbar .search { position: relative; flex: 1 1 260px; }
.table-toolbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.table-toolbar .search .input { padding-left: 2.25rem; }
.table-toolbar .filter { flex: 0 0 220px; }
.table td.primary { font-weight: 600; }
.table td.actions { white-space: nowrap; text-align: right; }
.cell-sub { display: block; font-weight: 400; color: var(--text-2); font-size: 0.8125rem; margin-top: 2px; }
@media (max-width: 760px) { .hide-sm { display: none; } }
.cred-box { background: var(--layer-2); padding: 12px 16px; border-radius: var(--radius-sm); margin-top: 12px; }
.cred-box .pin { font-family: var(--mono); font-size: 1.25rem; letter-spacing: 0.04em; }
.setup-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 12px; }
.totp-setup { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 12px; }
.totp-qr { width: 180px; padding: 8px; background: #fff; border-radius: var(--radius-sm); }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-manual { flex: 1 1 220px; display: grid; gap: 8px; }
.totp-key { font-size: 1rem; word-break: break-all; }
.recovery-codes { columns: 2; margin: 0; padding: 12px 16px 12px 2.25rem; background: var(--layer); border-radius: var(--radius-sm); }
.otp-input { font-family: var(--mono); letter-spacing: 0.2em; font-size: 1.125rem; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form-pair { grid-template-columns: 1fr; } }
.btn.is-loading { opacity: 0.6; pointer-events: none; }
.page-head + .tabs { margin-bottom: 1.5rem; }
/* ---------- owner panel: the inbox ---------- */
.inbox { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); min-height: 70vh; }
.inbox__side { background: var(--layer); display: flex; flex-direction: column; min-width: 0; }
.inbox__tools, .inbox__search { display: flex; gap: 8px; padding: 12px 12px 0; }
.inbox__tools .select { flex: 1; min-width: 0; }
.inbox__search .input { flex: 1; min-width: 0; }
.inbox__address { margin: 8px 12px; }
.inbox__list { flex: 1; overflow: auto; max-height: 75vh; border-top: 1px solid var(--border-subtle); }
.inbox__list ul { list-style: none; margin: 0; padding: 0; }
.inbox__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; text-align: left; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; color: var(--text); font: inherit; cursor: pointer; }
.inbox__row:hover { background: var(--layer-hover, rgba(0,0,0,.04)); }
.inbox__row.is-open { background: var(--interactive-tint); box-shadow: inset 3px 0 0 var(--interactive); }
.inbox__from { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__date { font-size: .75rem; color: var(--text-2); white-space: nowrap; }
.inbox__subject { grid-column: 1 / -1; font-size: .875rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.inbox__row.is-unread .inbox__from, .inbox__row.is-unread .inbox__subject { font-weight: 600; color: var(--text); }
.inbox__row.is-unread .inbox__from::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--interactive); margin-right: 8px; vertical-align: 1px; }
.inbox__answered { display: inline-flex; color: var(--text-2); }
.inbox__more { margin: 12px auto; display: flex; }
.inbox__empty { padding: 48px 24px; text-align: center; color: var(--text-2); }
.inbox__reader { background: var(--layer); min-width: 0; display: flex; flex-direction: column; }
.inbox__head { padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); display: grid; gap: 12px; }
.inbox__head h2 { overflow-wrap: anywhere; }
.inbox__back { display: none; justify-self: start; }
.inbox__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .875rem; }
.inbox__meta dt { color: var(--text-2); }
.inbox__meta dd { margin: 0; overflow-wrap: anywhere; }
.inbox__actions { flex-wrap: wrap; }
.inbox__files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.inbox__files a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.inbox__body { flex: 1; background: #fff; }
.inbox__note { margin: 0; padding: 8px 24px; background: var(--layer); border-bottom: 1px solid var(--border-subtle); }
.inbox__frame { display: block; width: 100%; height: 60vh; border: 0; background: #fff; }
.inbox__text { padding: 16px 24px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.5; color: #161616; }
.inbox__compose { font-family: var(--font); min-height: 260px; }
@media (max-width: 800px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox.is-reading .inbox__side { display: none; }
  .inbox:not(.is-reading) .inbox__reader { display: none; }
  .inbox__back { display: inline-flex; }
  .inbox__list { max-height: none; }
}
.inbox__switch { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 12px 0; border: 1px solid var(--border-subtle); }
.inbox__view { padding: 8px; border: 0; background: none; font: inherit; font-size: .875rem; color: var(--text-2); cursor: pointer; }
.inbox__view.is-on { background: var(--interactive); color: #fff; font-weight: 600; }
.inbox__select { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px 0; font-size: .875rem; }
.inbox__contact { display: grid; grid-template-columns: 40px minmax(0, 1fr); border-bottom: 1px solid var(--border-subtle); }
.inbox__contact .inbox__row { border-bottom: 0; padding-left: 4px; }
.inbox__pick { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.inbox__pick input { width: 16px; height: 16px; accent-color: var(--interactive); }
.inbox__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.12); }
.inbox__bulk { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-subtle); background: var(--layer); position: sticky; bottom: 0; }
.inbox__bulk .btn { flex: 1; }
.inbox__card { height: 56px; border-radius: 4px; }
.inbox__format, .inbox__banner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; border: 0; padding: 0; }
.inbox__banner legend { grid-column: 1 / -1; margin-bottom: 8px; }
.inbox__fmt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-subtle); background: var(--field); cursor: pointer; font-size: .875rem; }
.inbox__fmt:has(input:checked) { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); }
.inbox__fmt input { margin: 2px 0 0; accent-color: var(--interactive); flex: none; }
.inbox__fmt > span { display: grid; gap: 2px; }
.inbox__fmt > span > span { color: var(--text-2); }
.inbox__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inbox__chip { display: inline-flex; align-items: center; }
.inbox__picker { margin-top: 8px; font-size: .875rem; }
.inbox__picker summary { cursor: pointer; color: var(--link); }
.inbox__picker .input { margin: 8px 0; }
.inbox__plist { max-height: 220px; overflow: auto; display: grid; gap: 6px; }
#cm-ann2 .form-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
#cm-ann2 > .check { display: flex; margin: 4px 0 16px; }
.inbox__preview { margin-top: 12px; border: 1px solid var(--border-subtle); }
.inbox__preview iframe { display: block; width: 100%; height: 560px; border: 0; background: #eef1f4; }
@media (max-width: 672px) { .inbox__format, .inbox__banner, #cm-ann2 .form-pair { grid-template-columns: 1fr; } }

.inbox { border-radius: var(--radius); overflow: hidden; }
.inbox__switch { border-radius: var(--radius-sm); overflow: hidden; }
.inbox__fmt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--layer-2); cursor: pointer; }
.inbox__fmt > span { display: grid; gap: 2px; }
.inbox__fmt > span > span { color: var(--text-2); font-size: 0.8125rem; }
.inbox__format, .inbox__banner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; border: 0; padding: 0; }
.inbox__banner legend { grid-column: 1 / -1; margin-bottom: 6px; }
.inbox__picker summary { cursor: pointer; color: var(--link); font-size: 0.875rem; margin-top: 6px; }
.inbox__plist { max-height: 220px; overflow: auto; display: grid; gap: 4px; margin-top: 8px; }
.inbox__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.inbox__chip { display: inline-flex; align-items: center; gap: 6px; }
.inbox__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.inbox__card { height: 36px; border-radius: var(--radius-sm); }
.inbox__preview iframe { width: 100%; height: 520px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: #fff; margin-top: 8px; }
.inbox__select { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 0; }
.inbox__bulk { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-subtle); }
.inbox__contact { display: flex; align-items: stretch; }
.inbox__pick { display: flex; align-items: center; padding-left: 12px; border-bottom: 1px solid var(--border-subtle); }
.inbox__contact .inbox__row { flex: 1; }

/* the session button, beside the status button */
.status-btn--session { max-width: 340px; }

/* a PIN while PINs are hidden: dots where the digits go */
.pin-hidden { color: var(--text-helper); letter-spacing: 1px; }

/* ================================================================ sign-in sheet: a table per group, as on ResoBoard */
.signin-section + .signin-section { margin-top: 3rem; }
.signin-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.5rem 1.5rem; margin-bottom: 0.75rem; }
.signin-section__conf { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--text-helper); margin: 0 0 2px; }
.signin-section__title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.signin-section__url { margin: 0; font-size: 0.875rem; color: var(--text-2); word-break: break-all; }
.signin-section__url strong { color: var(--text); font-weight: 600; }
.signin-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.signin-table th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-helper); padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-strong); }
.signin-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.signin-table tr { break-inside: avoid; page-break-inside: avoid; }
.signin-table__name { font-weight: 600; }
.signin-table__pin { font-size: 1.0625rem; font-weight: 600; letter-spacing: 2px; }
.signin-section__note { font-size: 0.75rem; color: var(--text-helper); margin: 0.625rem 0 0; }
@media (max-width: 560px) { .signin-table { font-size: 0.8125rem; } .signin-table th, .signin-table td { padding: 0.5rem 0.375rem; } }
@media print {
  .signin-section + .signin-section { break-before: page; page-break-before: always; margin-top: 0; }
  .signin-section .table-wrap { border: 0; overflow: visible; }
  .signin-table th, .signin-table td { color: #000; }
}


/* committee order in Setup: alphabetical or custom (drag), as on ResoBoard */
.order-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-bottom: 0.75rem; }
.order-mode > .label { margin: 0 0.75rem 0 0; }
.order-mode__opt { position: relative; cursor: pointer; }
.order-mode__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.order-mode__opt span { display: inline-block; padding: 6px 14px; font-size: 0.875rem; border: 1px solid var(--border-strong); background: var(--layer); color: var(--text); }
.order-mode__opt:first-of-type span { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.order-mode__opt + .order-mode__opt span { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.order-mode__opt input:checked + span { background: var(--interactive); border-color: var(--interactive); color: #fff; }
.order-mode__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.order-mode__hint { margin: 0 0 0 1rem; }
.table.no-order .order-col { display: none; }
/* subcommissions, under their committee */
#committee-table tr.is-sub td:nth-child(2) { padding-left: 1.75rem; position: relative; }
#committee-table .sub-mark { position: absolute; left: .5rem; color: var(--text-secondary, #6f6f6f); }
#committee-table .sub-add { margin-top: .25rem; margin-left: -.5rem; }
.table .order-col { width: 44px; padding-right: 0; }
.drag-handle { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; background: transparent; color: var(--text-helper); cursor: grab; touch-action: none; border-radius: var(--radius-sm); }
.drag-handle:hover { color: var(--text); background: var(--layer-hover); }
.drag-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none; }
.is-dragging { position: relative; z-index: 2; background: var(--layer-2) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); outline: 1px solid var(--interactive); will-change: transform; }
.is-dragging > td { background: var(--layer-2) !important; }

/* On phones and tablets, fields use at least 16px text: below that, iPhones zoom the page in on the field
   as soon as it's selected (and leave it zoomed). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}
/* The menu button's icon: three lines that fold into an ✕ in two steps, opening: the outer lines slide into the
   middle one (which then fades), then turn into the cross; closing does the same backwards */
.menu-icon { position: relative; flex: none; width: 16px; height: 16px; }
.menu-icon i { position: absolute; left: 2px; width: 12px; height: 1.3px; border-radius: 1px; background: currentColor;
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1), top 140ms cubic-bezier(0.4, 0, 0.2, 1) 140ms, opacity 0s linear 140ms; }
.menu-icon i:nth-child(1) { top: 3.35px; }
.menu-icon i:nth-child(2) { top: 7.35px; }
.menu-icon i:nth-child(3) { top: 11.35px; }
[aria-expanded="true"] > .menu-icon i { transition: top 140ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1) 140ms, opacity 0s linear 140ms; }
[aria-expanded="true"] > .menu-icon i:nth-child(1) { top: 7.35px; transform: rotate(45deg); }
[aria-expanded="true"] > .menu-icon i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] > .menu-icon i:nth-child(3) { top: 7.35px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .db-header__nav, .is-menu-open .db-header__nav, .db-header__nav .db-header__link, .is-menu-open .db-header__nav .db-header__link, .menu-icon i { transition: none; transform: none; }
  [aria-expanded="true"] > .menu-icon i:nth-child(1) { transform: rotate(45deg); }
  [aria-expanded="true"] > .menu-icon i:nth-child(3) { transform: rotate(-45deg); }
}
@media (min-width: 673px) {
  .db-header--compact .db-header__nav { right: auto; min-width: 280px; border-right: 1px solid var(--header-border); }
}

/* ================================================================ shared pieces (from DaisBoard's desk) */
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0.25rem 0.75rem; background: var(--layer-2); border: 1px solid var(--border-subtle); cursor: pointer; font-size: 0.8125rem; }
.chip:hover { border-color: var(--interactive); background: var(--interactive-tint); }
.chip[aria-pressed="true"] { background: var(--interactive); color: #fff; border-color: var(--interactive); }
.chip--absent { opacity: 0.5; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 360px; overflow-y: auto; }
.feed li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0.75rem; background: var(--layer-2); font-size: 0.8125rem; }
.feed time { color: var(--text-helper); font-size: 0.75rem; white-space: nowrap; }
.feed .grow { min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); }
.seg button { padding: 0.25rem 0.5rem; background: transparent; border: 0; border-left: 1px solid var(--border-subtle); cursor: pointer; font-size: 0.75rem; min-width: 2rem; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--interactive); color: #fff; }
.seg button[data-v="absent"][aria-pressed="true"] { background: var(--error); }
.stats { display: flex; flex-wrap: wrap; gap: 1px; }
.stat { flex: 1 1 140px; padding: 0.75rem 1rem; background: var(--layer-2); }
.stat__v { font-size: 1.5rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 0.75rem; color: var(--text-2); }
.getting-started { background: var(--interactive-tint); border-left: 3px solid var(--interactive); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.gs-steps { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.gs-step { display: flex; align-items: center; gap: 0.75rem; color: var(--text-2); }
.gs-step__mark { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.gs-step--done { color: var(--text-helper); }
.gs-step--done .gs-step__mark { background: var(--success); border-color: var(--success); color: #fff; }
.gs-step--next { color: var(--text); }
.gs-step--next .gs-step__mark { border: 2px solid var(--interactive); }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; }
.radio-card { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; background: var(--layer-2); border: 1px solid var(--border-subtle); cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); }
.radio-card input { margin-top: 0.2rem; accent-color: var(--interactive); }
.menu-list { display: grid; gap: 1px; }
.menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.75rem 1rem; background: var(--layer-2); border: 0; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--interactive-tint); }
details.advanced > summary { cursor: pointer; color: var(--interactive); padding: 0.25rem 0; list-style: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: '▸ '; }
details.advanced[open] > summary::before { content: '▾ '; }
details.advanced[open] > summary { margin-bottom: 0.75rem; }
.help-list { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.5; }
.help-list kbd, .helper kbd { font-family: var(--mono); padding: 0 0.25rem; background: var(--layer-accent); border-radius: 2px; }
.list-switch { width: auto; max-width: 100%; font-weight: 600; }
.seg button { min-width: 3rem; }
@media (max-width: 700px) { .status-btn__topic { display: none; } .status-btn { max-width: 100%; } }

/* ================================================================ EnroBoard
   What only EnroBoard has: forms and their builder, the seat matrix, allocations and the Form II table,
   statements and receipts, the interview calendar and notes side by side. */
.tag--blue { background: var(--tag-submitted-bg, #d0e2ff); color: var(--tag-submitted-text, #0043ce); }
.tag--blue { background: #d0e2ff; color: #0043ce; }
:root[data-mode="dark"] .tag--blue { background: #002d9c; color: #d0e2ff; }
.tag--purple { background: #e8daff; color: #6929c4; }
:root[data-mode="dark"] .tag--purple { background: #31135e; color: #e8daff; }
.hint { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--layer-accent); color: var(--text-2); font-size: 0.6875rem; cursor: help; vertical-align: 1px; }
.table-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.table-toolbar .input { max-width: 320px; }
.table-toolbar .select { width: auto; }
.table-toolbar > .muted { margin-left: auto; font-size: 0.8125rem; }
.cell-sub { display: block; color: var(--text-helper); font-size: 0.75rem; }
.num-big { font-size: 2rem; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }
.card { background: var(--layer); padding: 1rem 1.25rem; border-radius: var(--radius, 8px); }
.card + .card { margin-top: 1rem; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters .select, .filters .input { width: auto; min-width: 10rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.bar { height: 6px; background: var(--layer-accent); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--interactive); border-radius: 3px; }
.bar > i + i { background: var(--accent); }

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.dash > * { grid-column: span 6; }
.dash > .dash--wide { grid-column: 1 / -1; }
.dash > .dash--third { grid-column: span 4; }
@media (max-width: 900px) { .dash > *, .dash > .dash--third { grid-column: 1 / -1; } }
.todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; }
.todo a { display: block; padding: 1rem; background: var(--layer); color: inherit; text-decoration: none; border-radius: var(--radius-sm, 4px); }
.todo a:hover { background: var(--layer-hover); }
.todo a.is-zero { opacity: 0.6; }
.todo .num-big { color: var(--interactive); }
.form-counts { display: grid; gap: 0.75rem; }
.form-count { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; }
.form-count .bar { grid-column: 1 / -1; }

/* ---------- forms people fill in ---------- */
.af-page { max-width: 720px; margin: 0 auto; }
.af-intro { white-space: pre-line; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.af-form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.af-heading { padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.af-heading:first-child { padding-top: 0; border-top: 0; }
.af-text p { color: var(--text-2); line-height: 1.5; }
.af-field { display: grid; gap: 0.375rem; }
.af-label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.af-req { color: var(--error); font-weight: 400; }
.af-help { margin-top: -0.125rem; }
.af-error { color: var(--error-text); font-size: 0.8125rem; min-height: 0; }
.af-error:empty { display: none; }
.af-field.has-error .input, .af-field.has-error .select, .af-field.has-error .textarea { outline: 2px solid var(--error); outline-offset: -2px; }
.af-choices { display: grid; gap: 0.375rem; }
.af-choices--row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.af-choice { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.625rem 0.75rem; background: var(--field); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); cursor: pointer; }
.af-choices--row .af-choice { min-width: 6rem; }
.af-choice:has(input:checked) { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); background: var(--interactive-tint); }
.af-choice input { margin: 0.15rem 0 0; accent-color: var(--interactive); width: 1rem; height: 1rem; flex: none; }
.af-consent { background: transparent; border-color: transparent; padding: 0.25rem 0; }
.af-consent:has(input:checked) { background: transparent; box-shadow: none; border-color: transparent; }
.af-num { max-width: 10rem; }
.af-date { max-width: 14rem; }
.af-ranking { display: grid; gap: 0.375rem; }
.af-rank { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.af-rank__n { font-size: 0.8125rem; color: var(--text-2); text-align: right; }
.af-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.af-file__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; width: 100%; }
.af-file__list:empty { display: none; }
.af-file__list li { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0.75rem; background: var(--layer); border-radius: var(--radius-sm, 4px); }
.af-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.af-sum { grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); gap: 0.5rem 1.5rem; }
.af-sum dt { color: var(--text-2); }
.af-sum dd { white-space: pre-wrap; word-break: break-word; }
.af-sum .af-sum__head { font-weight: 600; color: var(--text); margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); }
@media (max-width: 600px) { .af-sum { grid-template-columns: 1fr; gap: 0.125rem; } .af-sum dd { margin-bottom: 0.5rem; } }
.fee-preview { position: sticky; bottom: 0; background: var(--layer); border-top: 2px solid var(--interactive); padding: 0.75rem 1rem; margin: 0 -1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; z-index: 5; }
.fee-preview strong { font-size: 1.25rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.statement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.statement td { padding: 0.375rem 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.statement td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.statement tr.statement__total td { font-weight: 600; border-bottom: 0; padding-top: 0.625rem; }
.statement tr.statement__sub td { color: var(--text-2); border-bottom: 0; padding: 0.125rem 0; }
.statement tr.statement__due td { font-size: 1.125rem; border-top: 2px solid var(--text); border-bottom: 0; padding-top: 0.5rem; }

/* ---------- the public registration page ---------- */
.is-public .site-footer { margin-top: 3rem; }
.pub-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.pub-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--layer); border-radius: var(--radius, 8px); border-top: 3px solid var(--interactive); }
.pub-form.is-closed { border-top-color: var(--border-strong); opacity: 0.8; }
.pub-form p { color: var(--text-2); flex: 1; }
.pub-form .btn { align-self: flex-start; margin-top: 0.5rem; }
.pub-form > .label { margin: 0; }
.pub-topics { margin: 0; padding-left: 1.25rem; list-style: decimal; color: var(--text-2); display: grid; gap: 0.25rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-subtle); }
.timeline li.is-past { color: var(--text-helper); }
.timeline time { font-variant-numeric: tabular-nums; color: var(--text-2); }

.pub-back { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.5rem; background: var(--layer); border-radius: var(--radius, 8px); }
.divider-text { display: flex; align-items: center; gap: 0.75rem; color: var(--text-helper); font-size: 0.8125rem; margin: 1.5rem 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-top: 1px solid var(--border-subtle); }
.account-list { max-width: 880px; }
.account-list li:first-child { border-top: 0; }
/* ---------- my registration ---------- */
.my-app { background: var(--layer); border-radius: var(--radius, 8px); overflow: hidden; }
.my-app + .my-app { margin-top: 1.5rem; }
.my-app__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.my-app__body { padding: 1rem 1.25rem 1.25rem; display: grid; gap: 1.25rem; }
.my-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; }
.my-step__mark { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border-strong); font-weight: 600; font-size: 0.8125rem; }
.my-step.is-done .my-step__mark { background: var(--success); border-color: var(--success); color: #fff; }
.my-step.is-now .my-step__mark { border-color: var(--interactive); color: var(--interactive); }
.my-step h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.slot-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.slot-pick button { text-align: left; padding: 0.625rem 0.75rem; background: var(--field); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); cursor: pointer; }
.slot-pick button:hover { border-color: var(--interactive); background: var(--interactive-tint); }
.slot-pick strong { display: block; }

/* ---------- Form II: committees down, countries across ---------- */
.f2-wrap { overflow-x: auto; border-radius: var(--radius, 8px); }
.f2 { border-collapse: separate; border-spacing: 4px; min-width: 100%; }
.f2 th { font-weight: 600; text-align: left; padding: 0.5rem; white-space: nowrap; }
.f2 thead th { background: var(--layer-accent); border-radius: var(--radius-sm, 4px); }
.f2 tbody th { background: var(--layer); border-radius: var(--radius-sm, 4px); min-width: 9rem; }
.f2 tbody th .cell-sub { font-weight: 400; }
.f2 td { padding: 0; vertical-align: stretch; min-width: 11rem; }
.f2-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; width: 100%; min-height: 4rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--interactive); border-radius: var(--radius-sm, 4px);
  background: var(--interactive-tint); color: var(--interactive); cursor: pointer; text-align: left; font: inherit; }
.f2-cell:hover { border-style: solid; }
.f2-cell.is-filled { border: 1px solid var(--border-subtle); background: var(--layer-2); color: var(--text); }
.f2-cell.is-filled:hover { border-color: var(--interactive); }
.f2-cell strong { font-weight: 600; }
.f2-cell .tag { margin-top: 0.125rem; }
.f2-none { display: block; min-height: 4rem; border-radius: var(--radius-sm, 4px);
  background: repeating-linear-gradient(135deg, var(--layer) 0 6px, var(--layer-accent) 6px 8px); opacity: 0.7; }
.f2-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem; color: var(--text-2); align-items: center; margin: 0.75rem 0; }
.f2-legend i { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; vertical-align: -3px; margin-right: 0.375rem; }
.f2-cards { display: none; }
@media (max-width: 700px) {
  .f2-wrap { display: none; }
  .f2-cards { display: grid; gap: 1rem; }
  .f2-cards section { background: var(--layer); border-radius: var(--radius, 8px); padding: 0.75rem; display: grid; gap: 0.5rem; }
}

/* ---------- the seat matrix (Setup → Countries & seats) ---------- */
.matrix-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border-subtle); border-radius: var(--radius, 8px); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.matrix th, .matrix td { border-bottom: 1px solid var(--border-subtle); padding: 0; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--layer-accent); padding: 0.5rem; text-align: center; white-space: nowrap; }
.matrix thead th button { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--layer); text-align: left; padding: 0.25rem 0.75rem; font-weight: 400; white-space: nowrap; min-width: 14rem; }
.matrix thead th:first-child { left: 0; z-index: 3; text-align: left; }
.matrix td { text-align: center; min-width: 4.5rem; }
.matrix td button { width: 100%; height: 2rem; border: 0; background: transparent; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; color: var(--text-helper); }
.matrix td button:hover { background: var(--interactive-tint); }
.matrix td.has-seat button { background: var(--interactive-tint); color: var(--interactive); font-weight: 600; }
.matrix td.has-seat.is-taken button { background: var(--interactive); color: #fff; }
:root[data-mode="dark"] .matrix td.has-seat.is-taken button { color: #161616; }
.matrix tfoot td, .matrix tfoot th { position: sticky; bottom: 0; background: var(--layer-accent); font-weight: 600; padding: 0.375rem; }

/* ---------- delegations: the allocation board ---------- */
.alloc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .alloc { grid-template-columns: 1fr; } }
.alloc-list { display: grid; gap: 0.5rem; }
.deleg { background: var(--layer); border-radius: var(--radius, 8px); padding: 0.75rem 1rem; border-left: 3px solid transparent; cursor: pointer; }
.deleg:hover { background: var(--layer-hover); }
.deleg.is-selected { border-left-color: var(--interactive); background: var(--interactive-tint); }
.deleg__top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.deleg__meta { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.ent-list { display: grid; gap: 1px; max-height: 70vh; overflow-y: auto; border-radius: var(--radius, 8px); }
.ent { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.75rem; background: var(--layer); }
.ent.is-pref { box-shadow: inset 3px 0 0 var(--accent); }
.ent__seats { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.seat { font-size: 0.6875rem; padding: 0 0.375rem; border-radius: 3px; background: var(--layer-accent); color: var(--text-2); }
.seat.is-free { background: var(--success-tint); color: var(--success-text); }
.seat.is-mine { background: var(--interactive); color: #fff; }

/* ---------- interviews ---------- */
.cal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.cal-day h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; position: sticky; top: 0; }
.cal-slots { display: grid; gap: 0.375rem; }
.cal-slot { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.5rem; padding: 0.375rem 0.5rem; background: var(--layer); border-radius: var(--radius-sm, 4px); font-size: 0.8125rem; align-items: start; }
.cal-slot time { font-variant-numeric: tabular-nums; color: var(--text-2); padding-top: 0.125rem; }
.cal-slot.is-full { background: var(--interactive-tint); }
.cal-slot.is-past { opacity: 0.6; }
.cal-slot__who { display: grid; gap: 0.25rem; }
.cal-slot__who button { text-align: left; background: var(--layer-2); border: 1px solid var(--border-subtle); border-radius: 3px; padding: 0.25rem 0.375rem; cursor: pointer; font: inherit; }
.cal-slot__who button:hover { border-color: var(--interactive); }
.cal-slot__free { color: var(--text-helper); }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.note-card { background: var(--layer); border-radius: var(--radius, 8px); padding: 1rem; display: grid; gap: 0.5rem; align-content: start; }
.note-card.is-mine { box-shadow: inset 0 0 0 1px var(--interactive); }
.note-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.note-card__score { font-size: 1.5rem; font-weight: 300; color: var(--interactive); font-variant-numeric: tabular-nums; }
.note-card p { white-space: pre-wrap; }
.day-rows { display: grid; gap: 0.5rem; }
.day-row { display: grid; grid-template-columns: 11rem 7rem 7rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
@media (max-width: 760px) { .day-row { grid-template-columns: 1fr 1fr; } }

/* ---------- form builder ---------- */
.fb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .fb { grid-template-columns: 1fr; } }
.fb-list { display: grid; gap: 0.375rem; }
.fb-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.5rem 0.5rem 0.25rem; background: var(--layer); border-radius: var(--radius-sm, 4px); border: 1px solid transparent; cursor: pointer; }
.fb-item:hover { border-color: var(--border-strong); }
.fb-item.is-open { border-color: var(--interactive); background: var(--interactive-tint); }
.fb-item.is-heading { background: transparent; border-bottom: 1px solid var(--border-subtle); border-radius: 0; margin-top: 0.5rem; }
.fb-item__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-item__meta { font-size: 0.75rem; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.fb-edit { background: var(--layer); border-radius: var(--radius, 8px); padding: 1rem 1.25rem; display: grid; gap: 1rem; position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
.fb-preview { background: var(--bg); border: 1px solid var(--border-subtle); border-radius: var(--radius, 8px); padding: 1.25rem; }
.opt-rows { display: grid; gap: 0.375rem; }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.25rem; }
.fb-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.375rem; }
.fb-add button { text-align: left; padding: 0.5rem 0.75rem; background: var(--layer-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); cursor: pointer; font: inherit; font-size: 0.8125rem; }
.fb-add button:hover { border-color: var(--interactive); background: var(--interactive-tint); }
.fb-add h4 { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-2); font-weight: 400; margin-top: 0.25rem; }

/* fee rules */
.rule { background: var(--layer); border-radius: var(--radius, 8px); padding: 1rem; display: grid; gap: 0.75rem; }
.rule + .rule { margin-top: 0.75rem; }
.rule.is-off { opacity: 0.6; }
.rule__head { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.rule__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.cond { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 1fr) minmax(8rem, 1.2fr) auto; gap: 0.375rem; align-items: center; }
@media (max-width: 700px) { .cond { grid-template-columns: 1fr; } }
.pref-check { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 5px); }
.pref-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; padding: 0.625rem 0.75rem; border-top: 1px solid var(--border-subtle); }
.pref-row:first-child { border-top: 0; }
.pref-row__n { font-family: var(--mono); color: var(--text-2); font-size: 0.8125rem; padding-top: 0.125rem; }
.pref-row--free { box-shadow: inset 3px 0 0 var(--success); }
.pref-row--part { box-shadow: inset 3px 0 0 var(--warning); }
.pref-row--taken, .pref-row--none { box-shadow: inset 3px 0 0 var(--error); }
.pref-row--done { box-shadow: inset 3px 0 0 var(--interactive); }
.ent__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.8125rem; }
.ent__alt .chip { font-size: 0.8125rem; }
.ent.is-taken { opacity: 0.85; background: var(--layer); }
.fees-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.fees-layout > aside .fb-edit { top: 4rem; }
@media (max-width: 1000px) { .fees-layout { grid-template-columns: 1fr; } }
.rule__head { grid-template-columns: auto minmax(0, 1fr) auto; }
.fee-cond { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: flex-start; padding: 0.5rem; background: var(--layer-2, var(--bg)); border-radius: var(--radius-sm, 4px); }
.fee-cond > * { flex: 1 1 10rem; min-width: 0; }
.fee-cond > .fee-cond__op { flex: 0 1 8rem; }
.fee-cond > .btn { flex: none; }
.money-input { display: flex; align-items: center; }
.money-input span { padding: 0 0.5rem; color: var(--text-2); }

/* the preview of a receipt */
.receipt-view { width: 100%; min-height: 60vh; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 4px); background: #fff; }
.receipt-img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: var(--radius-sm, 4px); }
.check-pay { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .check-pay { grid-template-columns: 1fr; } }

@media print {
  .af-actions, .fee-preview, .table-toolbar, .tabs { display: none !important; }
}
.dash > .card + .card, .dash > section + section { margin-top: 0; }

.chip[aria-pressed="true"] .muted { color: inherit; opacity: 0.8; }
.f2 tbody th { width: 1%; } .f2 td > .f2-cell + .f2-cell { margin-top: 4px; } .f2 td { height: 1px; } .f2 td > .f2-cell:only-child { height: 100%; }

/* ================================================================ the platform's home page
   EnroBoard's own: a light page with the name badges of a registered conference hanging in the hero, the steps of a
   registration as the spine, and plain cards for the details. */
.ep { background: var(--bg); }
.ep-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2rem; align-items: center; max-width: 76rem; margin: 0 auto; padding: 4rem 1.5rem 3rem;
  position: relative; }
.ep-top { background: radial-gradient(40rem 26rem at 78% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(to bottom, var(--interactive-tint), var(--bg)); }
.ep-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border-subtle);
  font-size: 0.8125rem; color: var(--text-2); }
.ep-eyebrow__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--interactive); }
.ep-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.025em; margin: 1.5rem 0 1.25rem; }
.ep-hl { font-weight: 600; color: var(--interactive); }
.ep-lede { font-size: 1.1875rem; line-height: 1.55; color: var(--text-2); max-width: 34rem; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.ep-go { margin-top: 2.25rem; max-width: 30rem; }
.ep-go label { display: block; font-size: 0.8125rem; color: var(--text-2); margin-bottom: 0.375rem; }
.ep-go__row { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.ep-go__row > span { display: flex; align-items: center; padding: 0 0.625rem; font-size: 0.8125rem; color: var(--text-2); background: var(--layer); white-space: nowrap; }
.ep-go__row > span:empty, .ep-go__row > span[hidden] { display: none; }
.ep-go__row .input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: var(--bg); }
.ep-go__row .btn { border-radius: 0; }

/* the badges on their lanyards, and a receipt */
.ep-hero__art { position: relative; height: 33rem; overflow: hidden; margin-top: -4rem; padding: 0 0.5rem; }
.ep-rail-unused { position: absolute; left: 6%; right: 6%; top: 0.5rem; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); }
.ep-badge { position: absolute; width: 11rem; padding: 2.75rem 1rem 0; border-radius: 12px; background: var(--layer-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border-subtle);
  display: grid; justify-items: center; text-align: center; }
.ep-badge::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 14rem; background: var(--interactive); }
.ep-badge--1 { left: 1%; top: 8rem; transform: rotate(-4deg); transform-origin: 50% -8rem; z-index: 1; }
.ep-badge--2 { left: 34%; top: 5rem; z-index: 2; }
.ep-badge--3 { left: 67%; top: 9rem; transform: rotate(3deg); transform-origin: 50% -9rem; z-index: 1; }
.ep-badge__clip { position: absolute; top: 0.75rem; width: 2.5rem; height: 0.6rem; border-radius: 0.3rem; background: var(--layer); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.ep-badge__org { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.ep-badge__face { width: 4rem; height: 4rem; border-radius: 50%; margin: 0.875rem 0 0.625rem; overflow: hidden; background:
  radial-gradient(circle at 50% 38%, var(--interactive) 0 0.8rem, transparent 0.85rem), radial-gradient(ellipse 1.6rem 1.2rem at 50% 108%, var(--interactive) 98%, transparent 100%), var(--interactive-tint); }
.ep-badge__name { font-size: 1.125rem; font-weight: 600; }
.ep-badge__role { font-size: 0.8125rem; color: var(--text-2); margin: 0.125rem 0 1.25rem; }
.ep-badge__band { justify-self: stretch; margin: 0 -1rem; padding: 0.5rem; border-radius: 0 0 12px 12px; background: var(--interactive); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ep-badge--2 .ep-badge__band { background: #8e6a00; }
.ep-badge--3 .ep-badge__band { background: #161616; }
.ep-receipt { position: absolute; right: 24%; bottom: 0.75rem; z-index: 3; width: 15rem; padding: 1rem 1.125rem; border-radius: 10px; background: var(--layer-2); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border-subtle);
  display: grid; gap: 0.375rem; font-size: 0.8125rem; transform: rotate(-2deg); }
.ep-receipt__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.ep-receipt__row, .ep-receipt__total { display: flex; justify-content: space-between; gap: 1rem; }
.ep-receipt__row b { font-family: var(--mono); font-weight: 500; }
.ep-receipt__total { padding-top: 0.375rem; border-top: 1px dashed var(--border-strong); font-weight: 600; color: var(--success-text, var(--success)); }

/* sections */
.ep-section { max-width: 76rem; margin: 0 auto; padding: 4.5rem 1.5rem 0; }
.ep-kicker { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--interactive); }
.ep-h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; margin: 0.5rem 0 1rem; }
.ep-p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); max-width: 34rem; }

/* the steps: a line through numbered stops */
.ep-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.ep-steps::before { content: ''; position: absolute; left: 1.25rem; right: 1.25rem; top: 1.25rem; height: 2px; background: linear-gradient(to right, var(--interactive), color-mix(in srgb, var(--interactive) 25%, transparent)); }
.ep-steps li { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.ep-steps__n { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--interactive); color: var(--interactive);
  font-family: var(--mono); font-weight: 500; position: relative; z-index: 1; margin-bottom: 0.5rem; }
.ep-steps li:first-child .ep-steps__n { background: var(--interactive); color: #fff; }
.ep-steps h3 { font-size: 1rem; font-weight: 600; }
.ep-steps p { font-size: 0.875rem; line-height: 1.5; color: var(--text-2); flex: 1; }
.ep-chip { align-self: flex-start; padding: 0.2rem 0.625rem; border-radius: 999px; font-size: 0.75rem; background: var(--interactive-tint); color: var(--interactive); white-space: nowrap; }
.ep-chip--green { background: var(--success-tint); color: var(--success-text, var(--success)); }

/* two sides */
.ep-section--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ep-who { padding: 2rem; border-radius: 16px; background: var(--layer); }
.ep-who--alt { background: #161616; color: #fff; }
.ep-who--alt .ep-kicker { color: #3ddbd9; }
.ep-who--alt .ep-list li { color: #c6c6c6; border-color: rgba(255, 255, 255, 0.12); }
.ep-who--alt .ep-list b { color: #fff; }
.ep-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.ep-list li { padding: 0.875rem 0; border-top: 1px solid var(--border-subtle); font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }
.ep-list b { color: var(--text); font-weight: 600; }

/* features: text beside a card */
.ep-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 1.5rem 0; }
.ep-feature + .ep-feature { margin-top: 2rem; }
.ep-feature--flip > :first-child { order: 2; }
.ep-card { border-radius: 14px; background: var(--layer-2); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border-subtle); padding: 1.5rem; }
.ep-matrix table { border-collapse: separate; border-spacing: 0.375rem; width: 100%; font-size: 0.875rem; }
.ep-matrix th { text-align: left; font-weight: 600; padding: 0 0.375rem; }
.ep-matrix tr:first-child th { color: var(--text-2); font-size: 0.75rem; text-align: center; }
.ep-matrix td { height: 2rem; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--border-subtle) 0 1px, transparent 1px 7px); }
.ep-matrix td.on { background: var(--interactive); }
.ep-matrix__foot { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-2); }
.ep-rules { display: grid; gap: 0.5rem; }
.ep-rules__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0.875rem; border-radius: 8px; background: var(--layer); font-size: 0.9375rem; }
.ep-rules__row span { display: grid; gap: 0.125rem; }
.ep-rules__row small { font-size: 0.75rem; color: var(--text-2); }
.ep-rules__row i { font-style: normal; font-family: var(--mono); font-size: 0.875rem; white-space: nowrap; color: var(--interactive); }

/* the family */
.ep-suite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: center; }
.ep-apps { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.ep-apps li { display: grid; justify-items: center; gap: 0.375rem; width: 7.5rem; padding: 1.25rem 0.5rem 1rem; border-radius: 14px; background: var(--layer); text-align: center; }
.ep-apps li:has(a) { padding: 0; }
.ep-apps a { display: grid; justify-items: center; gap: 0.375rem; width: 100%; padding: 1.25rem 0.5rem 1rem; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color 150ms, box-shadow 150ms; }
.ep-apps a:hover { background: var(--layer-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ep-apps a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ep-apps li.is-here { background: var(--interactive-tint); box-shadow: inset 0 0 0 2px var(--interactive); }
.ep-apps__icon { width: 3rem; height: 3rem; border-radius: 12px; background-size: cover; }
.ep-apps__icon--enro { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Crect width=%2248%22 height=%2248%22 fill=%22%23161616%22/%3E%3Cg transform=%22translate(4.8 4.4) scale(1.6)%22%3E%3Cpath fill=%22%23bdf3f2%22 d=%22M6.5 3H17.5A2 2 0 0 1 19.5 5V19.2H4.5V5A2 2 0 0 1 6.5 3Z%22/%3E%3Cpath fill=%22%233ddbd9%22 d=%22M4.5 19.2H19.5V20A2 2 0 0 1 17.5 22H6.5A2 2 0 0 1 4.5 20Z%22/%3E%3Cpath fill=%22%23161616%22 d=%22M10.3 5H13.7A.8 .8 0 0 1 13.7 6.6H10.3A.8 .8 0 0 1 10.3 5ZM12 7.9A2.5 2.5 0 1 1 12 12.9A2.5 2.5 0 1 1 12 7.9ZM7.4 17.6A4.6 3.6 0 0 1 16.6 17.6Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.ep-apps__icon--dais { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Crect width=%2248%22 height=%2248%22 fill=%22%231c0f30%22/%3E%3Cg transform=%22translate(9.2 9.6) scale(1.45)%22%3E%3Cg fill=%22%239765ea%22%3E%3Ccircle cx=%226.3%22 cy=%229.3%22 r=%222.7%22/%3E%3Cpath d=%22M1.1 19.9C1.1 15.7 3.5 13.4 6.3 13.4S11.5 15.7 11.5 19.9Z%22/%3E%3C/g%3E%3Cpath d=%22M9.9 14.9L14.1 8.7%22 stroke=%22%239765ea%22 stroke-width=%222.3%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath fill=%22%23bb9bf1%22 fill-rule=%22evenodd%22 d=%22M10.6 0.5H18A1.3 1.3 0 0 1 19.3 1.8V6.4A1.3 1.3 0 0 1 18 7.7H10.6A1.3 1.3 0 0 1 9.3 6.4V1.8A1.3 1.3 0 0 1 10.6 0.5ZM12.5 3.3H16.1A.8 .8 0 0 1 16.1 4.9H12.5A.8 .8 0 0 1 12.5 3.3Z%22/%3E%3C/g%3E%3C/svg%3E"); }
.ep-apps__icon--reso { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Crect width=%2248%22 height=%2248%22 fill=%22%230b2a45%22/%3E%3Cg transform=%22translate(4.8 4.8) scale(1.6)%22 fill=%22none%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210.4%22 stroke=%22%2373caeb%22 stroke-width=%222.2%22/%3E%3Cpath d=%22M3.9 18.5A10.4 10.4 0 0 1 18.5 3.9%22 stroke=%22%2333b5ea%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M7.4 8.2h9.2M7.4 12h9.2M7.4 15.8h5.6%22 stroke=%22%23ffffff%22 stroke-width=%222.3%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.ep-apps__name { font-size: 1rem; font-weight: 300; }
.ep-apps__name b { font-weight: 700; }
.ep-apps small { font-size: 0.75rem; color: var(--text-2); }
.ep-privacy { grid-column: 1 / -1; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--interactive); background: var(--layer); border-radius: 0 10px 10px 0; color: var(--text-2); line-height: 1.55; }
.ep-privacy b { color: var(--text); }

/* the call to action */
.ep-cta { max-width: 73rem; margin: 5rem auto 4rem; padding: 3.5rem 2rem; border-radius: 20px; text-align: center; color: #fff;
  background: radial-gradient(30rem 16rem at 85% 0%, rgba(61, 219, 217, 0.35), transparent 70%), #007d79; }
.ep-cta h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 300; letter-spacing: -0.015em; }
.ep-cta p { margin: 0.75rem auto 0; max-width: 36rem; color: rgba(255, 255, 255, 0.85); }
.ep-cta .ep-actions { justify-content: center; }
.ep-cta .ep-cta__btn { background: #fff; color: #005d5d; }
.ep-cta .ep-cta__btn:hover { background: #d9fbfb; }
.ep-cta .ep-cta__ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); }
.ep-cta .ep-cta__ghost:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 1080px) {
  .ep-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .ep-steps::before { display: none; }
}
@media (max-width: 860px) {
  .ep-hero { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .ep-hero__art { height: 31rem; max-width: 34rem; width: 100%; margin: 0 auto; }
  .ep-section--split, .ep-feature, .ep-suite { grid-template-columns: 1fr; }
  .ep-feature--flip > :first-child { order: 0; }
  .ep-feature { gap: 1.5rem; }
}
@media (max-width: 560px) {
  .ep-steps { grid-template-columns: 1fr; }
  .ep-badge { width: 9.5rem; }
  .ep-badge--1 { left: 0; } .ep-badge--2 { left: 28%; } .ep-badge--3 { left: 52%; }
  .ep-badge__name { font-size: 1rem; }
  .ep-receipt { width: 13rem; }
  .ep-apps { flex-wrap: wrap; }
  .ep-cta { margin: 3rem 1rem; }
}