/* Date fields keep the native input — it is typable, and intake types dates
   all day. Only the popup is replaced (datepicker.js), so the native indicator
   is hidden and a real button takes its place. Scoped to .datefield, which only
   exists once the script has run: with JS off the native picker is untouched. */
.datefield { position: relative; display: block; }
.datefield .input[type="date"] { padding-right: 36px; background-image: none; }
.datefield .input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none; appearance: none; display: none;
}
.datefield__button {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background-color: transparent; color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.datefield__button::before {
  content: ""; width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--calendar-icon); mask-image: var(--calendar-icon);
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: center;           mask-position: center;
  -webkit-mask-size: 16px 16px;            mask-size: 16px 16px;
}
.datefield__button:hover { color: var(--accent); background-color: var(--bg-brand-soft); }
.datefield__button[aria-expanded="true"] { color: var(--accent); }

/* The mm/dd/yyyy segments take the UA's colour otherwise, which is near-black
   in dark mode. */
.input[type="date"]::-webkit-datetime-edit { color: var(--fg-1); }
.input[type="date"]::-webkit-datetime-edit-text { color: var(--fg-3); padding: 0 1px; }

/* =============================================================
   EI Referral Tracker 2.0 — application stylesheet
   -------------------------------------------------------------
   Consumes the Achieva Design System token layer only. Two rules
   this file does not break:
     1. Semantic tokens, never palette values.
     2. No [data-theme="dark"] component rules — if dark needs an
        override, the token layer is missing a token.
   ============================================================= */

/* ── Select chevron ────────────────────────────────────────────
   The design system has no token for an icon used as a CSS
   background-image, so the chevron is declared here as a token and
   redefined per theme — the same shape dark-theme.css uses for its
   own values. This is a token definition, not a component override:
   no rule below ever branches on the theme. Colours match --fg-2
   (#6b7c8a light, #9aabb7 dark) and --on-brand for the teal sidebar.
   ──────────────────────────────────────────────────────────── */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  --select-chevron-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aabb7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aabb7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* ── Keyframes (the only motion in the system) ─────────────── */
@keyframes eiRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes eiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eiPulse {
  0%   { background: var(--bg-brand-soft); box-shadow: inset 3px 0 0 var(--gold); }
  45%  { background: transparent;          box-shadow: inset 3px 0 0 var(--gold); }
  70%  { background: var(--bg-brand-soft); box-shadow: inset 3px 0 0 var(--gold); }
  100% { background: transparent;          box-shadow: inset 3px 0 0 transparent; }
}

/* =============================================================
   App shell
   ============================================================= */
.app { display: flex; min-height: 100vh; }

.shell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.main {
  padding: 24px 32px 44px;
  display: flex; flex-direction: column; gap: 20px;
  max-width: var(--container-max); width: 100%;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: sticky; top: 0; height: 100vh;
  transition: width 250ms var(--ease), flex-basis 250ms var(--ease);
}
.sidebar__header {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar__wordmark { width: 116px; display: block; margin-bottom: 14px; }
.sidebar__star { width: 30px; display: none; margin: 0 auto 10px; }
.sidebar__eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.sidebar__title { font-size: 15px; font-weight: 600; color: #fff; }

.sidebar__nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 0;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.82);
  border-left: 3px solid transparent;
  position: relative;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.nav-item:hover {
  text-decoration: none;
  background: rgba(255,255,255,.10);
  border-left-color: rgba(255,255,255,.30);
  color: #fff;
}
.nav-item.is-active {
  color: #fff;
  background: rgba(255,255,255,.15);
  border-left-color: var(--gold);
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item__label { white-space: nowrap; }
.nav-item__label--rail { display: none; }
.nav-item__badge {
  margin-left: auto;
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--on-gold);
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
}

/* County switcher — sits on the teal fill, so it cannot use the form tokens
   the rest of the app uses; those assume a card background. */
.county-switch {
  padding: 14px 22px 12px;
  border-top: 1px solid var(--sidebar-border);
}
.county-switch__label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.county-switch__select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 8px 30px 8px 10px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  background-color: rgba(255,255,255,.12);
  background-image: var(--select-chevron-inverse);
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 15px 15px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.county-switch__select:hover { background-color: rgba(255,255,255,.18); }
.county-switch__select:focus { outline: none; border-color: var(--gold); }
/* The native menu renders on the page, not the sidebar, so its options need
   readable colours of their own. */
.county-switch__select option { color: var(--fg-1); background: var(--bg-card); }

.app.is-collapsed .county-switch { padding: 12px 8px; }
.app.is-collapsed .county-switch__label { display: none; }
.app.is-collapsed .county-switch__select {
  padding: 8px 4px; font-size: 11px; text-align: center;
  background-image: none;   /* no room for the chevron on the rail */
}

.sidebar__shrink {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid var(--sidebar-border);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  color: rgba(255,255,255,.82);
  font-size: 12.5px; font-weight: 600;
  width: 100%; text-align: left;
  transition: color 200ms var(--ease);
}
.sidebar__shrink:hover { color: #fff; }
.sidebar__shrink svg { width: 16px; height: 16px; flex: none; transition: transform 250ms var(--ease); }

.sidebar__footer {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--sidebar-border);
}
.sidebar__footer strong { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.sidebar__footer span { font-size: 14px; color: rgba(255,255,255,.72); }

/* Collapsed rail */
.app.is-collapsed .sidebar { flex-basis: 76px; width: 76px; }
.app.is-collapsed .sidebar__wordmark,
.app.is-collapsed .sidebar__eyebrow,
.app.is-collapsed .sidebar__title,
.app.is-collapsed .sidebar__footer,
.app.is-collapsed .sidebar__shrink span { display: none; }
.app.is-collapsed .sidebar__star { display: block; }
.app.is-collapsed .sidebar__header { padding: 22px 8px 18px; text-align: center; }
.app.is-collapsed .sidebar__shrink { justify-content: center; padding: 12px 0; }
.app.is-collapsed .sidebar__shrink svg { transform: rotate(180deg); }
.app.is-collapsed .sidebar__nav { padding: 8px; }
.app.is-collapsed .nav-item {
  flex-direction: column; gap: 4px;
  width: 60px; margin: 2px auto; padding: 9px 0;
  border-radius: 10px; border-left: 0;
  text-align: center;
}
.app.is-collapsed .nav-item svg { width: 19px; height: 19px; }
.app.is-collapsed .nav-item__label--full { display: none; }
.app.is-collapsed .nav-item__label--rail { display: block; }
.app.is-collapsed .nav-item__label { font-size: 9.5px; font-weight: 600; }
.app.is-collapsed .nav-item.is-active {
  background: rgba(255,255,255,.16);
  box-shadow: inset 3px 0 0 var(--gold);
}
.app.is-collapsed .nav-item__badge {
  position: absolute; top: 4px; right: 4px; margin: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  font-size: 10px; line-height: 17px; text-align: center;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  min-height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
}
.topbar__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.topbar__subtitle { font-size: 12.5px; color: var(--fg-2); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar__divider { width: 1px; height: 28px; background: var(--border); }
.topbar__name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.topbar__role { font-size: 11.5px; color: var(--fg-2); line-height: 1.3; }
.avatar {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--bg-brand-soft); color: var(--accent);
  border: 1px solid var(--soft-teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; flex: none;
}
.avatar--muted { background: var(--bg-muted); color: var(--fg-2); border-color: var(--border); }

/* =============================================================
   Components
   ============================================================= */

/* ── Button ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; background: none;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), box-shadow 200ms var(--ease),
              transform 200ms var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }

.btn--primary { background: var(--teal); color: var(--on-brand); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 98, 105, .3); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 184, 28, .3); }
/* Secondary is the brand's second colour, purple — the same fill-not-foreground
   rule as primary: --purple paints, --purple-fg would draw glyphs. */
.btn--secondary { background: var(--purple); color: var(--on-brand); }
.btn--secondary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(114, 36, 108, .3); }
.btn--outline { background: var(--bg-card); color: var(--accent); border-color: var(--soft-teal); }
.btn--outline:hover { border-color: var(--accent); background: var(--bg-brand-soft); }
/* Pressed state for outline buttons used as a selection, e.g. the provider
   group step of the Assigned-to control. */
.btn--outline.is-active {
  background: var(--bg-brand-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { color: var(--accent); background: var(--bg-brand-soft); }
.btn--danger { background: var(--red); color: var(--on-brand); }
.btn--danger:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(186, 12, 47, .3); }
.btn:disabled { opacity: .55; pointer-events: none; }

.icon-btn {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--fg-2);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn:disabled { opacity: .4; pointer-events: none; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn--close { width: 28px; height: 28px; border: 0; }

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card--feature { border-radius: var(--radius-lg); }
.card__header {
  padding: 18px 22px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.card__header--plain { border-bottom: 0; }
.card__title { font-size: 15px; font-weight: 600; }
.card__subtitle { font-size: 12.5px; color: var(--fg-2); }
.card__action { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.card__body { padding: 22px; }

/* ── Pill ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
}
.pill--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.pill--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.pill--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pill--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.pill--purple  { background: var(--status-purple-bg);  color: var(--status-purple-fg); }
.pill--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* ── Form controls ─────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-2);
}
.input, .select, .textarea {
  padding: 9px 12px; font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--fg-1);
  transition: border-color 200ms var(--ease);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--teal);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.textarea { line-height: 1.55; resize: vertical; }
.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly] { background: var(--bg-subtle); color: var(--fg-2); }
.field__hint { font-size: 12px; color: var(--fg-2); }

/* Selects drop the native arrow for the design system's own chevron, so a
   dropdown looks the same in Chrome, Safari and Firefox and matches the date
   picker's field. Extra right padding keeps long option text off the icon. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px 15px;
  cursor: pointer;
}
.select:hover:not(:disabled) { border-color: var(--border-strong); }
.select:focus { border-color: var(--teal); }
.select:disabled { cursor: not-allowed; opacity: .7; }
/* Firefox keeps a focus ring inside the control; the border is the cue here. */
.select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--fg-1); }

/* ── Styled dropdown list ──────────────────────────────────────
   The native option list is drawn by the OS and cannot be styled, so
   select.js draws one. The trigger reuses the select's own classes,
   so everything above applies to it unchanged. */
.combo { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.field > .combo,
.county-switch > .combo,
td > .combo { display: block; }
/* The native select stays in the form — it just stops being visible. Not
   display:none, so it keeps participating in layout queries and validation. */
.combo__native {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
}
.combo__button {
  width: 100%; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo__button--placeholder { color: var(--fg-3); }
.combo.is-open .combo__button { border-color: var(--teal); }

.combo__list {
  position: fixed; z-index: 200;
  margin: 0; padding: 6px;
  list-style: none; overflow-y: auto;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: eiRise 140ms var(--ease);
}
.combo__group {
  padding: 8px 10px 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-2);
}
.combo__option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--fg-1);
  cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.combo__option.is-active { background: var(--hover-soft); }
.combo__option.is-selected { color: var(--accent); font-weight: 600; }
.combo__option.is-selected.is-active { background: var(--bg-brand-soft); }
/* A tick, not a colour change alone: the selected row has to be findable
   without relying on hue. */
.combo__option.is-selected::after {
  content: ""; margin-left: auto; flex: none;
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--check-icon); mask-image: var(--check-icon);
  -webkit-mask-repeat: no-repeat;       mask-repeat: no-repeat;
  -webkit-mask-position: center;        mask-position: center;
  -webkit-mask-size: 14px 14px;         mask-size: 14px 14px;
}
.combo__option--disabled { color: var(--fg-3); cursor: not-allowed; }
.combo__option--disabled.is-active { background: transparent; }

/* Date inputs: swap Chrome's calendar glyph for the design system's own.
   Overriding the indicator's background-image rather than hiding it and
   painting our own keeps the native click-to-open behaviour and the keyboard
   affordance intact — a decorative icon layered on top would not. */
.input[type="date"] { padding-right: 12px; }
.input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px; height: 16px; padding: 0; margin-left: 6px;
  background-image: var(--calendar-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer; opacity: 1;
  transition: opacity 200ms var(--ease);
}
.input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .65; }
/* The mm/dd/yyyy segments render in the UA's colour otherwise, which is close
   to black in dark mode. */
.input[type="date"]::-webkit-datetime-edit { color: var(--fg-1); }
.input[type="date"]::-webkit-datetime-edit-text { color: var(--fg-3); padding: 0 1px; }
.input[type="date"]:invalid::-webkit-datetime-edit,
.input[type="date"]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
.input[type="date"]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
.input[type="date"]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: var(--fg-3);
}
/* Firefox draws no indicator at all, so the field would read as a plain text
   box. Give it the same icon as a background. */
@supports (-moz-appearance: none) {
  .input[type="date"] {
    padding-right: 34px;
    background-image: var(--calendar-icon);
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px 16px;
  }
}
/* Native option menus are painted by the OS, not the page, so they need
   explicit colours or dark mode renders dark-on-dark. */
.select option { color: var(--fg-1); background: var(--bg-card); }
.field__readout {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--fg-2);
}

/* Segmented control */
.segmented {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border); border-radius: 8px;
}
.segmented__item {
  padding: 6px 13px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  background: transparent; border: 0;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.segmented__item:hover { color: var(--accent); text-decoration: none; }
.segmented__item.is-active {
  background: var(--bg-card); color: var(--accent); box-shadow: var(--shadow-sm);
}

/* Toggle */
.toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
}
.toggle-row__text { flex: 1 1 auto; min-width: 0; }
.toggle-row__label { font-size: 14px; font-weight: 500; }
.toggle-row__note { font-size: 12.5px; color: var(--fg-2); }
.toggle { position: relative; flex: none; width: 44px; height: 24px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle__track {
  display: block; width: 44px; height: 24px; border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background 200ms var(--ease);
  pointer-events: none;
}
.toggle__knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  background: #fff;
  transition: transform 200ms var(--ease);
  pointer-events: none;
}
.toggle input:checked ~ .toggle__track { background: var(--teal); }
.toggle input:checked ~ .toggle__knob { transform: translateX(20px); }

/* ── Utility ───────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-2); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* =============================================================
   Dashboard
   ============================================================= */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.kpi__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-2);
}
.kpi__value { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.kpi__value--gold { color: var(--gold-fg); }
.kpi__value--danger { color: var(--danger-fg); }
.kpi__value--accent { color: var(--accent); }
.kpi__note { font-size: 12.5px; color: var(--fg-2); }

.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.waiting-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid var(--border);
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  transition: background 200ms var(--ease);
}
.waiting-row:last-child { border-bottom: 0; }
.waiting-row:hover { background: var(--hover-faint); text-decoration: none; }
.waiting-row__id { flex: 0 0 54px; font-size: 12.5px; color: var(--fg-2); }
.waiting-row__area { font-size: 14px; font-weight: 600; }
.waiting-row__service { font-size: 12.5px; color: var(--fg-2); }
.waiting-row__date { font-size: 12.5px; color: var(--fg-2); }

.legend { display: flex; align-items: center; gap: 14px; }
.legend__item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.region-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.region-row__name { flex: 0 0 78px; font-size: 12.5px; font-weight: 700; color: var(--fg-2); }
.region-row__track {
  flex: 1 1 auto; height: 10px; border-radius: var(--radius-pill);
  background: var(--bg-muted); overflow: hidden;
}
/* display:block is load-bearing. This is a <span>, and width/height do not
   apply to a non-replaced inline element — without it the track renders
   empty and the bar silently never appears. */
.region-row__fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.region-row__caption {
  flex: 0 0 96px; text-align: right; white-space: nowrap;
  font-size: 12.5px; color: var(--fg-2);
}

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding: 0 4px; }
.bar-chart--tall { height: 230px; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bar-col__total { font-size: 12.5px; font-weight: 600; }
.bar-col__stack {
  flex: 1 1 auto; width: 100%; max-width: 52px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bar-col__seg--unclaimed { background: var(--gold); border-radius: 6px 6px 0 0; }
.bar-col__seg--claimed { background: var(--teal); }
.bar-col__month { font-size: 11.5px; color: var(--fg-2); }

/* The whole column is the hit target — a 3px sliver for a quiet month is not
   something anyone can aim at. The hovered mark answers with a wash behind the
   column and a lift on the paint; ringing the stack instead would draw a
   capsule around the empty space above a short bar. */
.bar-col, .region-row { cursor: default; }
.bar-col.is-hovered, .region-row.is-hovered {
  background: var(--bg-muted); border-radius: 8px;
}
.bar-col:focus-visible, .region-row:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px;
}
.bar-col.is-hovered .bar-col__seg--claimed,
.bar-col.is-hovered .bar-col__seg--unclaimed,
.region-row.is-hovered .region-row__fill { filter: brightness(1.07); }
.bar-col.is-hovered .bar-col__total,
.region-row.is-hovered .region-row__name { color: var(--fg-1); }

.chart-tip {
  position: fixed; z-index: 220; pointer-events: none;
  min-width: 150px; padding: 10px 12px;
  background: var(--bg-card); color: var(--fg-1);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.chart-tip__head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-2);
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.chart-tip__row { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; }
/* A short stroke, not a filled box: at this density a swatch is data-weight
   ink doing a label's job. */
.chart-tip__key { flex: none; width: 10px; height: 2px; border-radius: 1px; }
.chart-tip__key--none { background: transparent; }
.chart-tip__key--claimed { background: var(--teal); }
.chart-tip__key--waiting { background: var(--gold); }
/* The value leads and the label follows — the reader has the bar and wants
   the number. Both wear text tokens; the key carries the identity. */
.chart-tip__value { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip__label { font-size: 12px; color: var(--fg-2); }

/* =============================================================
   Table screens
   ============================================================= */
.filter-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.filter-card .field--search { flex: 1 1 220px; min-width: 220px; }

/* Date picker */
.datepicker { position: relative; width: 224px; flex: none; }
.datepicker__field {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg-card); text-align: left;
  transition: border-color 200ms var(--ease);
}
.datepicker.is-open .datepicker__field { border-color: var(--teal); }
.datepicker__field svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.datepicker__value { font-size: 14px; font-weight: 600; }
.datepicker__note { font-size: 11.5px; color: var(--fg-2); }
.datepicker__chevron { margin-left: auto; width: 16px; height: 16px; color: var(--fg-2); }

.calendar {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 40;
  width: 328px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden;
  animation: eiRise 180ms var(--ease);
}
.calendar__header {
  background: var(--teal); color: var(--on-brand);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.calendar__nav {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.calendar__nav svg { width: 15px; height: 15px; }
.calendar__heading { flex: 1 1 auto; text-align: center; }
.calendar__month { font-size: 14.5px; font-weight: 600; }
.calendar__count { font-size: 11px; color: rgba(255,255,255,.72); }
.calendar__weekdays, .calendar__days {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.calendar__weekdays { padding: 10px 12px 4px; }
.calendar__weekday {
  text-align: center; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; color: var(--fg-3);
}
.calendar__days { gap: 2px; padding: 4px 12px 12px; }
.calendar__day {
  height: 38px; border: 0; border-radius: 9px; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; color: var(--fg-3);
  transition: background 200ms var(--ease);
}
.calendar__day:hover { background: var(--hover-soft); }
.calendar__day--has-postings { color: var(--fg-1); font-weight: 600; }
/* The field picker has no posting data, so every real day is simply
   selectable. Its own modifier rather than borrowing --has-postings,
   which would claim something untrue about the data. */
.calendar__day--plain { color: var(--fg-1); font-weight: 500; }
.calendar__day--today { background: var(--bg-brand-soft); }
.calendar__day--selected { background: var(--teal); color: var(--on-brand); }
.calendar__day--blank { pointer-events: none; }
.calendar__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.calendar__day--selected .calendar__dot { background: var(--on-brand); }
.calendar--floating {
  position: fixed; top: auto; left: auto; margin-top: 0; z-index: 210;
}
.calendar__footer {
  background: var(--bg-subtle); border-top: 1px solid var(--border);
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--fg-2);
}
.calendar__clear {
  background: none; border: 0; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
}
.calendar__clear:hover { color: var(--danger-fg); }
.calendar__today-action {
  margin-left: auto; background: none; border: 0;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}

/* Bulk bar */
.bulk-bar {
  background: var(--bg-brand-soft); border: 1px solid var(--soft-teal);
  border-radius: var(--radius); padding: 14px 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  animation: eiRise 200ms var(--ease);
}
.bulk-bar__count { font-size: 14px; font-weight: 600; color: var(--teal-dark); }
.bulk-bar__note { font-size: 12.5px; color: var(--fg-2); }
.bulk-bar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Provider-group step of the Assigned-to control. Wraps, because the number of
   provider groups is data — the handoff's 2x2 assumed exactly four. */
.group-filter { display: flex; flex-wrap: wrap; gap: 8px; }

/* Table + panel */
.table-layout { display: flex; align-items: flex-start; gap: 20px; }
.table-card {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.table-card__header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.table-card__count { font-size: 14px; font-weight: 600; }
.table-card__page { font-size: 12.5px; color: var(--fg-2); }
.table-card__pager { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.table-card__pager .label { letter-spacing: .1em; }

.table-scroll { overflow-x: auto; }
.data-table { min-width: 860px; }
.data-table th {
  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
  padding: 10px 14px; text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-2);
}
.data-table td {
  padding: 13px 14px; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr { transition: background 200ms var(--ease); cursor: pointer; }
.data-table tbody tr:hover { background: var(--hover-faint); }
.data-table tbody tr.is-selected { background: var(--bg-brand-soft); }
.data-table tbody tr.is-pulsing { animation: eiPulse 1800ms var(--ease); }
.data-table .col-check { width: 44px; cursor: default; }
.data-table input[type="checkbox"] { accent-color: var(--teal); width: 15px; height: 15px; }

.cell-primary { font-size: 13px; font-weight: 600; }
.cell-secondary { font-size: 12px; color: var(--fg-2); }
.cell-area { font-size: 14px; font-weight: 500; }
.cell-notes {
  font-size: 13px; color: var(--fg-2); line-height: 1.5; max-width: 340px;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
/* align-items:flex-start is load-bearing: without it the default `stretch`
   pulls each Pill out to the full cell width instead of hugging its label. */
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.empty-state { padding: 44px 22px; text-align: center; }
.empty-state__title { font-size: 15px; font-weight: 600; }
.empty-state__note { font-size: 14px; color: var(--fg-2); margin-top: 4px; }

/* Update panel */
.update-panel {
  flex: 0 0 384px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  position: sticky; top: 96px; max-height: calc(100vh - 128px);
  display: flex; flex-direction: column;
  animation: eiRise 220ms var(--ease);
}
.update-panel__header {
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px;
}
.update-panel__eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-2);
}
.update-panel__title { font-size: 15px; font-weight: 600; }
.update-panel__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 22px;
}
.panel-section { display: flex; flex-direction: column; gap: 12px; }
.panel-section__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.update-panel__footer {
  background: var(--bg-subtle); border-top: 1px solid var(--border);
  padding: 14px 22px; display: flex; align-items: center; gap: 10px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.update-panel__footer .grow { flex: 1 1 auto; }

.activity-line { display: flex; gap: 12px; padding: 3px 0; }
.activity-line__date { flex: 0 0 76px; font-size: 12px; color: var(--fg-2); }
.activity-line__text { font-size: 12.5px; }

/* =============================================================
   Modals
   ============================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: eiFade 160ms var(--ease);
}
.overlay--send { z-index: 70; }
.overlay--confirm { z-index: 75; }

.modal {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); width: 100%; max-width: 760px;
  max-height: 100%; display: flex; flex-direction: column;
  animation: eiRise 220ms var(--ease);
}
.modal--send { max-width: 940px; height: 100%; max-height: 860px; }
.modal--narrow { max-width: 520px; }
.modal__header {
  padding: 22px 26px 18px; display: flex; align-items: flex-start; gap: 12px;
}
.modal__title { font-size: 18px; font-weight: 700; }
.modal__subtitle { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
.modal__body { padding: 24px 26px; overflow-y: auto; flex: 1 1 auto; }
.modal__footer {
  background: var(--bg-subtle); border-top: 1px solid var(--border);
  padding: 16px 26px; display: flex; align-items: center; gap: 12px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal__validity { font-size: 12.5px; color: var(--fg-2); flex: 1 1 auto; }
.modal__actions { display: flex; align-items: center; gap: 10px; }

.resolve-strip {
  background: var(--bg-brand-soft); border: 1px solid var(--soft-teal);
  border-radius: 8px; padding: 12px 14px; margin: 16px 0;
  font-size: 13.5px; color: var(--accent); font-weight: 600;
}
.resolve-strip--error {
  background: var(--status-danger-bg); border-color: var(--status-danger-bg);
  color: var(--danger-fg);
}

.confirm-icon {
  width: 38px; height: 38px; border-radius: var(--radius-pill); flex: none;
  background: var(--status-danger-bg); color: var(--danger-fg);
  display: flex; align-items: center; justify-content: center;
}
.confirm-list {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
.confirm-list__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.confirm-list__row:last-child { border-bottom: 0; }

/* Recipient chips */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-brand-soft); border: 1px solid var(--soft-teal);
  border-radius: var(--radius-pill); padding: 5px 8px 5px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.chip button {
  border: 0; background: none; padding: 0; color: inherit;
  display: flex; align-items: center;
}
.chip button svg { width: 12px; height: 12px; }
.chip-select {
  appearance: none; -webkit-appearance: none;
  border-radius: var(--radius-pill); padding: 6px 30px 6px 14px;
  border: 1.5px solid var(--border); background-color: var(--bg-card);
  background-image: var(--select-chevron);
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 14px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2); cursor: pointer;
}
.chip-select:hover { border-color: var(--accent); color: var(--accent); }
.chip-select:focus { outline: none; border-color: var(--teal); }
.chip-select option { color: var(--fg-1); background: var(--bg-card); }

/* PDF preview gutter */
.pdf-gutter {
  background: var(--bg-muted); padding: 24px; flex: 1 1 auto; overflow-y: auto;
}

/* =============================================================
   Reports
   ============================================================= */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-2);
}
.stat__value { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 4px; }

/* ZIP choropleths. Fixed height because ECharts needs a sized box to lay out
   into, and the card body would otherwise collapse to zero. */
/* Date range for the maps. Sits between the card header and the canvas, so it
   reads as belonging to the maps rather than to the screen. */
.map-range {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.map-range .field { width: 168px; }

.map-canvas { height: 420px; width: 100%; }
.map-canvas.is-loading {
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-2); font-size: 13.5px;
}
.map-canvas.is-loading::after { content: "Loading the map…"; }

/* =============================================================
   Settings
   ============================================================= */
.tabs {
  display: flex; overflow-x: auto; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 14px 14px; font-size: 14px; color: var(--fg-2);
  white-space: nowrap; flex: 0 0 auto;
  border-bottom: 2px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.tab:hover { color: var(--accent); text-decoration: none; }
.tab.is-active { font-weight: 600; color: var(--accent); border-bottom-color: var(--teal); }

.lookup-table td { padding: 6px 14px; }

/* Which counties a therapist works. Checkboxes rather than a multi-select:
   with five counties the whole answer is visible without opening anything. */
.county-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* One checkbox with its label beside it. Named for counties because that is
   where it started; .check-inline is the same control anywhere else. */
.county-check, .check-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--fg-2); white-space: nowrap;
}
.county-check input, .check-inline input {
  accent-color: var(--teal); width: 14px; height: 14px;
}
.county-check input:disabled + span,
.check-inline input:disabled + span { color: var(--fg-3); }
.lookup-table .input { border-color: transparent; background: transparent; }
.lookup-table .input:focus { border-color: var(--teal); background: var(--bg-card); }

.copy-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px;
}
.copy-row__value { flex: 1 1 auto; font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }

.cert-area {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--bg-subtle); min-height: 160px;
}

.placeholder-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px 7px; margin-right: 6px;
}

.proxy-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.proxy-fact__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-2);
}
.proxy-fact__value { font-family: var(--font-mono); font-size: 13px; margin-top: 4px; }

.matrix-cell { text-align: center; }
.matrix-check {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--bg-brand-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.matrix-check svg { width: 13px; height: 13px; }
.matrix-deny { color: var(--fg-3); }

/* =============================================================
   Toasts
   ============================================================= */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: var(--teal); color: var(--on-brand);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 13px 18px; max-width: 380px; font-size: 13.5px; font-weight: 500;
  animation: eiRise 220ms var(--ease);
}
.toast--danger { background: var(--red); }

/* =============================================================
   Sign-in
   ============================================================= */
.signin {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--bg-page) 0%, var(--bg-brand-soft) 100%);
}
.signin__card {
  width: 100%; max-width: 420px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: 34px 34px 28px;
}
.signin__logo { width: 150px; display: block; margin-bottom: 22px; }
.signin__title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.signin__subtitle { font-size: 13.5px; color: var(--fg-2); margin-top: 4px; margin-bottom: 22px; }
.signin__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-size: 12px; color: var(--fg-3);
}
.signin__divider::before, .signin__divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}
.signin__alt {
  display: block; margin-top: 18px; font-size: 13px; color: var(--fg-2);
}
.signin__alt:hover { color: var(--fg-1); }
.signin__error {
  background: var(--status-danger-bg); color: var(--danger-fg);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
}

/* =============================================================
   Help guide
   -------------------------------------------------------------
   The one long-form reading screen in the app, so it sets its own
   type rather than reusing the card scale: 15.5px at 1.75 and a
   measure capped near 72 characters. The contents rail sits on
   the right — a second rail on the left, hard against the teal
   sidebar, reads as one confused navigation instead of two.
   ============================================================= */
.help {
  display: grid;
  /* Sized to the measure rather than 1fr: the container is 1400px, so a
     fractional column would strand the rail against the far edge with a hand's
     width of nothing between it and the text. In px, not ch: ch resolves
     against this element's font size, which is the app's base, not the 15.5px
     the prose is set in. */
  grid-template-columns: minmax(0, 680px) 220px;
  gap: 48px;
  justify-content: start;
}
/* Placed explicitly, both of them. The rail comes first in the DOM — it is
   navigation, and on a narrow screen it belongs above the text — but it is
   drawn second. Leave this to auto-placement and the nav takes column one and
   the prose gets squeezed into the 220px rail column. */
.help-body { grid-column: 1; grid-row: 1; }
/* Stretching to the row height is load-bearing: a sticky child can only travel
   inside its own container, so a rail sized to its own content sticks once and
   then scrolls away with the page. */
.help-toc  { grid-column: 2; grid-row: 1; align-self: stretch; }

/* ── Contents rail ─────────────────────────────────────────── */
.help-toc__inner {
  position: sticky; top: calc(var(--topbar-h) + 20px);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}
.help-toc__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: var(--tracking-cap);
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 10px;
}
.help-toc__link {
  padding: 5px 0;
  font-size: 13px; line-height: 1.45; color: var(--fg-2);
  border-left: 2px solid transparent; margin-left: -17px; padding-left: 15px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.help-toc__link:hover { color: var(--accent); text-decoration: none; }
.help-toc__link--sub { padding-left: 27px; font-size: 12.5px; }
.help-toc__link.is-current {
  color: var(--accent); font-weight: 600; border-left-color: var(--teal);
}

/* ── Prose ─────────────────────────────────────────────────── */
.help-body {
  max-width: 680px;   /* governs the stacked layout; the grid governs the wide one */
  font-size: 15.5px; line-height: 1.75; color: var(--fg-1);
}
.help-body p { margin: 0 0 16px; }
.help-body strong { font-weight: 600; }
.help-body a { text-decoration: underline; text-underline-offset: 2px; }

.help-intro { margin-bottom: 8px; }
.help-h1 {
  margin: 0 0 10px;
  font-size: 28px; font-weight: 700; letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.help-lede { font-size: 17px; line-height: 1.7; color: var(--fg-2); margin: 0; }

/* scroll-margin so a #hash lands below the sticky topbar, not behind it. */
.help-section {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.help-h2 {
  margin: 0 0 16px;
  font-size: 21px; font-weight: 700; letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}
.help-h3 {
  margin: 28px 0 12px;
  font-size: 15.5px; font-weight: 700; color: var(--fg-1);
}

.help-list, .help-steps { margin: 0 0 16px; padding-left: 22px; }
.help-list { list-style: disc; }
.help-steps { list-style: decimal; }
.help-list li, .help-steps li { margin-bottom: 9px; padding-left: 4px; }
.help-list li::marker, .help-steps li::marker { color: var(--fg-3); }
.help-steps li::marker { font-weight: 700; }

/* Icons quoted from the toolbar sit on the text baseline, not above it. */
.help-inline-icon {
  display: inline-flex; vertical-align: -2px; color: var(--fg-2);
}

.help-body kbd {
  font-family: var(--font-mono); font-size: 12px;
  padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); border: 1px solid var(--border);
  color: var(--fg-1);
}

/* ── Callout ───────────────────────────────────────────────── */
.help-note {
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--bg-brand-soft);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.help-note--warn {
  background: var(--status-warning-bg);
  border-left-color: var(--gold);
}
.help-note__title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.help-note p { margin: 0; font-size: 14.5px; line-height: 1.65; }

/* ── Reference table ───────────────────────────────────────── */
.help-table {
  margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.6;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.help-table th {
  text-align: left; padding: 10px 14px;
  background: var(--bg-subtle);
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-cap);
  text-transform: uppercase; color: var(--fg-2);
  border-bottom: 1px solid var(--border);
}
.help-table td { padding: 11px 14px; vertical-align: top; }
.help-table tbody tr + tr td { border-top: 1px solid var(--border); }

/* The role grid is the one table here that can outgrow the measure, so it gets
   its own scroller rather than pushing the whole column wide. */
.help-table-scroll { overflow-x: auto; margin-bottom: 18px; }
.help-table-scroll .help-table { margin-bottom: 0; min-width: 460px; }
.help-matrix th.matrix-cell { text-align: center; }
.help-matrix td.matrix-cell { vertical-align: middle; }

/* Visible to a screen reader, not on screen: the tick and the dash carry the
   answer visually, and "check mark" is not an answer read aloud. */
.help-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Badge legend ──────────────────────────────────────────── */
.help-legend {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.help-legend__row {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px; align-items: start;
  font-size: 14.5px; line-height: 1.6;
}
/* The pill is fixed-width in its column, so a long label wraps the column
   rather than shoving the explanation out of alignment. */
.help-legend__row .pill { justify-self: start; margin-top: 2px; }

/* ── Question and answer ───────────────────────────────────── */
.help-faq { margin: 0 0 18px; }
.help-faq dt {
  font-weight: 600; font-size: 15px; margin-top: 18px;
}
.help-faq dt:first-child { margin-top: 0; }
.help-faq dd {
  margin: 5px 0 0; padding-left: 16px;
  border-left: 2px solid var(--border);
  color: var(--fg-2); font-size: 14.5px; line-height: 1.7;
}

@media (max-width: 1180px) {
  /* The rail goes above the text rather than away: on a laptop it is still the
     fastest way to reach a section, it just cannot be sticky there. */
  .help { grid-template-columns: minmax(0, 680px); gap: 24px; }
  .help-toc  { grid-column: 1; grid-row: 1; }
  .help-body { grid-column: 1; grid-row: 2; }
  .help-toc__inner {
    position: static;
    border-left: 0; padding-left: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 18px;
    flex-direction: row; flex-wrap: wrap; gap: 4px 18px;
    align-items: baseline;
  }
  .help-toc__title { width: 100%; margin-bottom: 4px; }
  .help-toc__link {
    margin-left: 0; padding: 2px 0; border-left: 0;
  }
  .help-toc__link--sub { padding-left: 0; }
  .help-toc__link.is-current { border-left: 0; }
}

/* Printed for a new starter's folder: drop the rail and the app chrome, keep
   a heading with its first lines. */
@media print {
  .sidebar, .topbar, .help-toc, .toast-stack { display: none !important; }
  .main { padding: 0; max-width: none; }
  .help { display: block; }
  .help-body { max-width: none; font-size: 11pt; }
  .help-section { break-inside: auto; }   /* keeps its own token border */
  .help-h2, .help-h3 { break-after: avoid; }
  .help-note, .help-table, .help-legend__row { break-inside: avoid; }
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1180px) {
  .dash-split { grid-template-columns: 1fr; }
  .table-layout { flex-direction: column; }
  .update-panel { flex: 1 1 auto; width: 100%; position: static; max-height: none; }
}
@media (max-width: 860px) {
  .main { padding: 20px 16px 36px; }
  .topbar { padding: 0 16px; }
  .stat-grid { grid-template-columns: 1fr; }
}