/* ============================================================
   CareTrust - components.css v2.2
   Reusable vocabulary. Every rule uses tokens, no hex.
   Prefix c- = component. Compose, don't duplicate.
   v2.2 (D-C10-172): single absorption of the 2026-08-09
   amendments; the former app-extension blocks are first-class
   package content. Retired: c-choice, is-selected (register
   notes remain in the manifest, R7).
   ============================================================ */

/* ── ICON ─────────────────────────────────────────────────── */
.c-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--icon-off);
  flex-shrink: 0;
}
/* the outer <svg class="c-icon"> is sized by CSS; presentation attrs
   (fill/stroke/width/caps/joins) live per-path INSIDE icons.svg so they
   travel with <use> clones. Do not restate them here - external CSS
   does not reach into shadow-cloned use trees. */
.c-icon > svg,
.c-icon > svg use { width: 100%; height: 100%; }
.c-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.c-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.c-icon--menu { width: var(--icon-menu); height: var(--icon-menu); }
.c-icon.is-on { color: var(--icon-on); }

/* ── BUTTON ───────────────────────────────────────────────── */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  min-height: var(--touch);
  padding: 0 var(--sp-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
  border: var(--border-2) solid transparent;
}
.c-btn--primary   { background: var(--action); color: var(--action-contrast); }
.c-btn--primary:hover   { background: var(--action-strong); }
.c-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
.c-btn--secondary:hover { border-color: var(--action); color: var(--action-deep); }
.c-btn--outline   { background: transparent; color: var(--action-deep); border-color: var(--action); }
.c-btn--outline:hover   { background: var(--action-pale); }
.c-btn--ghost     { background: transparent; color: var(--muted); }
.c-btn--ghost:hover     { background: var(--bg-alt); color: var(--text); }
.c-btn--danger    { background: var(--error-pale); color: var(--error); }
.c-btn--danger:hover    { background: var(--error); color: var(--surface); }
.c-btn--sm { min-height: 36px; padding: 0 var(--sp-md); font-size: var(--fs-xs); }
.c-btn--block { width: 100%; }
.c-btn .c-icon { color: currentColor; width: var(--icon-sm); height: var(--icon-sm); }

/* ── CARD ─────────────────────────────────────────────────── */
.c-card {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
}
.c-card--raised { box-shadow: var(--shadow-sm); }
.c-card--hero {
  background: linear-gradient(180deg, var(--raw-navy) 0%, var(--raw-navy-soft) 100%);
  color: var(--surface);
  border: 0;
  position: relative;
  overflow: hidden;
}
.c-card--hero::after {
  content: '';
  position: absolute;
  inset: auto -30px -30px auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle, color-mix(in oklch, var(--action) 40%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.c-card__header,
.c-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
}
.c-card__header { border-bottom: var(--border) solid var(--line); }
.c-card__footer { border-top:    var(--border) solid var(--line); }
.c-card__body {
  padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-md);
}

/* ── FIELD / FORM ─────────────────────────────────────────── */
.c-field { display: flex; flex-direction: column; gap: var(--sp-2xs); }
/* c-field__hint is grouped with .t-sub in the TEXT ROLES block (D3). */
.c-field.is-required label::after { content: " *"; color: var(--error); }
.c-field.has-error input,
.c-field.has-error select,
.c-field.has-error textarea { border-color: var(--error); }
.c-field.has-error .c-field__hint { color: var(--error); }

/* ── BADGE ────────────────────────────────────────────────── */
.c-badge {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 22px;
  padding: 0 var(--sp-sm);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.c-badge--success { background: var(--success-pale); color: var(--success); }
.c-badge--warning { background: var(--warning-pale); color: var(--warning); }
.c-badge--error   { background: var(--error-pale);   color: var(--error); }
.c-badge--info    { background: var(--info-pale);    color: var(--info); }
.c-badge--neutral { background: var(--bg-alt);       color: var(--muted); }

/* ── APPBAR (top) ─────────────────────────────────────────── */
.c-appbar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  min-height: var(--appbar-h);
  padding: 0 var(--sp-lg);
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
}
.c-appbar--dark { background: var(--raw-navy); color: var(--surface); border-bottom-color: transparent; }
.c-appbar__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.c-appbar__actions { display: flex; align-items: center; gap: var(--sp-sm); }

/* ── SIDEBAR (console desktop) ────────────────────────────── */
.c-sidebar {
  display: flex; flex-direction: column;
  width: var(--sidebar-w);
  padding: var(--sp-lg) var(--sp-sm);
  background: var(--raw-navy);
  color: var(--surface);
  gap: 2px;
}
.c-sidebar__brand { padding: 0 var(--sp-sm) var(--sp-md); }
.c-sidebar__section {
  padding: var(--sp-sm) var(--sp-sm) var(--sp-2xs);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: color-mix(in oklab, var(--surface) 50%, transparent);
}
.c-sidebar__item {
  display: flex; align-items: center; gap: var(--sp-sm);
  min-height: var(--touch);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-md);
  color: color-mix(in oklab, var(--surface) 70%, transparent);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-left: 3px solid transparent;
  padding-left: calc(var(--sp-sm) - 3px);
}
.c-sidebar__item:hover {
  background: color-mix(in oklab, var(--surface) 8%, transparent);
  color: var(--surface);
  text-decoration: none;
}
.c-sidebar__item.is-active {
  background: color-mix(in oklab, var(--surface) 10%, transparent);
  color: var(--surface);
  font-weight: var(--fw-bold);
  border-left-color: var(--action);
}
.c-sidebar__item .c-icon { color: currentColor; width: var(--icon-sm); height: var(--icon-sm); }
.c-sidebar__foot {
  margin-top: auto;
  padding: var(--sp-sm);
  display: flex; align-items: center; gap: var(--sp-sm);
  border-top: var(--border) solid color-mix(in oklab, var(--surface) 8%, transparent);
  font-size: var(--fs-xs);
  color: color-mix(in oklab, var(--surface) 55%, transparent);
}

/* ── RAIL (console tablet) ────────────────────────────────── */
.c-rail {
  display: flex; flex-direction: column; align-items: center;
  width: var(--rail-w);
  padding: var(--sp-sm) 0;
  background: var(--raw-navy);
  gap: var(--sp-xs);
}
.c-rail__item {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: color-mix(in oklab, var(--surface) 55%, transparent);
  position: relative;
}
.c-rail__item:hover { color: var(--surface); background: color-mix(in oklab, var(--surface) 8%, transparent); }
.c-rail__item.is-active { color: var(--surface); background: color-mix(in oklab, var(--surface) 10%, transparent); }
.c-rail__item.is-active::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--action);
}

/* ── BOTTOM NAV (wallet mobile, console mobile) ───────────── */
.c-bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr));
  min-height: var(--bottomnav-h);
  background: var(--surface);
  border-top: var(--border) solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
/* D-C10-238 (WP-6): pre-Home wizard chrome. The bottom nav renders dimmed and
   inert on first-run steps; present, never removed (D-C10-235). */
.c-bottomnav--dimmed { opacity: .45; pointer-events: none; }
.c-bottomnav--dark { background: var(--raw-navy); border-top-color: color-mix(in oklab, var(--surface) 8%, transparent); }
.c-bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--sp-2xs);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--faint);
  text-decoration: none;
}
.c-bottomnav__item .c-icon { color: currentColor; width: var(--icon-menu); height: var(--icon-menu); }
.c-bottomnav--dark .c-bottomnav__item { color: color-mix(in oklab, var(--surface) 55%, transparent); }
.c-bottomnav__item.is-active {
  /* D-C10-309 (BL-134): deep action ink (lime itself is 1.5:1 on white);
     the lime keeps the indicator border. */
  color: var(--action-deep);
  font-weight: var(--fw-bold);
  border-top: 2px solid var(--action);
}
/* D-C10-298 (BL-025): white active on the dark variant; action blue on navy
   was ruled too low-contrast. The indicator border follows the text. */
.c-bottomnav--dark .c-bottomnav__item.is-active {
  color: var(--surface);
  border-top-color: var(--surface);
}

/* ── ROW / LIST ────────────────────────────────────────────── */
.c-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
}
.c-row + .c-row { border-top: var(--border) solid var(--line); }
.c-row__label { color: var(--muted); font-size: var(--fs-sm); }
.c-row__value { font-weight: var(--fw-bold); font-size: var(--fs-sm); }

/* ── STAT ─────────────────────────────────────────────────── */
.c-stat { display: flex; flex-direction: column; gap: var(--sp-2xs); }
/* c-stat__label is grouped with .t-eyebrow in the TEXT ROLES block (D3). */
.c-stat__value {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  line-height: 1; letter-spacing: -0.02em;
}
.c-stat__delta { font-size: var(--fs-xs); color: var(--muted); }

/* ── TOAST / NOTICE ────────────────────────────────────────── */
.c-toast {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.c-toast--success { background: var(--success-pale); color: var(--success); }
.c-toast--warning { background: var(--warning-pale); color: var(--warning); }
.c-toast--error   { background: var(--error-pale);   color: var(--error); }
.c-toast--info    { background: var(--info-pale);    color: var(--info); }

/* ── AVATAR / EMPTY / PIN ──────────────────────────────────── */
.c-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--action-pale); color: var(--action-deep);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  flex-shrink: 0;
}
.c-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-md); }
.c-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-sm); padding: var(--sp-lg); text-align: center;
  background: var(--action-pale); border: 1px dashed var(--action);
  border-radius: var(--radius-lg);
  min-height: 9rem;
}
.c-pin {
  width: 10px; height: 10px; border-radius: 50%;
  border: var(--border) solid var(--line);
  display: inline-block;
}
.c-pin.is-filled { background: var(--action); border-color: var(--action); }

/* ── PROGRESS ──────────────────────────────────────────────── */
.c-progress { height: 8px; background: var(--bg-alt); border-radius: var(--radius-pill); overflow: hidden; }
.c-progress__fill { height: 100%; width: var(--w, 0%); background: var(--action); border-radius: inherit; }

/* ── CHIP STRIP (person selector, section filters, quick tags, option cells) ──
   c-chip is the single option component (D-C10-156). */
.c-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.c-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2xs);
  min-height: var(--touch); padding: 0 var(--sp-md);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  background: var(--surface); color: var(--text);
  border: var(--border) solid var(--line);
  cursor: pointer;
}
/* .c-chip.is-on grouped per D-C10-171: identical visual, distinct
   registered semantics (binary toggle vs selection, D-C10-167). */
.c-chip.is-active,
.c-chip.is-on {
  background: var(--action-pale);
  border-color: var(--action-strong);
  font-weight: var(--fw-bold);
}
.c-chip--add { background: var(--bg); color: var(--muted); border-style: dashed; }

/* ── LIST ROW INTERNALS (two-line rows composing with c-row) ── */
.c-row__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.c-row__title { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
/* c-row__sub is grouped with .t-sub in the TEXT ROLES block (D3). */

/* ── TEXT ROLES (D3): standalone text vocabulary. The BEM names stay
   valid (grouped, not removed) for composed uses. ── */
.t-sub,
.c-row__sub,
.c-field__hint { font-size: var(--fs-xs); color: var(--muted); }
.t-eyebrow,
.c-stat__label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: var(--fw-bold);
}

/* ── ACCENT CARD (highlighted primary action row) ── */
.c-card--accent { background: var(--action-pale); border-color: var(--action-strong); }

/* ── QR BLOCK (square panel housing the QR at scale) ── */
.c-qr {
  display: flex; align-items: center; justify-content: center;
  width: var(--qr-frame); height: var(--qr-frame); margin-inline: auto;
  border-radius: var(--radius-lg);
  background: var(--surface); border: var(--border) solid var(--line);
}
.c-qr .c-icon { width: var(--qr-code); height: var(--qr-code); color: var(--text); }

/* ── EMERGENCY PASS CARD (presentation-only per D-C4-037) ── */
.c-passcard {
  display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-lg); border-radius: var(--radius-lg);
  background: var(--raw-navy); color: var(--surface);
}
.c-passcard__brand {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); letter-spacing: 0.02em;
}
.c-passcard__brand em { color: var(--raw-lime); font-style: normal; }
.c-passcard__name {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-lg);
}
.c-passcard__row {
  display: flex; justify-content: space-between; gap: var(--sp-sm);
  font-size: var(--fs-xs);
  color: color-mix(in oklab, var(--surface) 85%, transparent);
}
.c-passcard__alert {
  padding: var(--sp-xs) var(--sp-sm); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface) 10%, transparent);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}

/* ── SCORE PICKER (NPS 0..10): cells are c-chip (D-C10-156) ── */
.c-score { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }

/* ── CODE CELLS (OTP six-cell entry, SHL PIN four-cell entry) ── */
.c-otp { display: flex; gap: var(--sp-xs); justify-content: center; }
.c-otp input {
  width: var(--touch); text-align: center;
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  padding: var(--sp-sm) 0;
}
.c-otp input.is-filled { border-color: var(--action); }

/* ── MODAL COVER (step-up TOTP prompt, confirmations) ── */
.c-modal-cover {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--sp-lg);
  background: color-mix(in oklab, var(--raw-navy) 45%, transparent);
}
.c-modal-cover > .c-card { width: min(100%, 26rem); }

/* ── NOTICE (D5, D-C10-157): the inline in-flow notice block. c-toast is
   strictly the floating transient; banner() in ui.js emits c-notice. ── */
.c-notice {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.c-notice--success { background: var(--success-pale); color: var(--success); }
.c-notice--warning { background: var(--warning-pale); color: var(--warning); }
.c-notice--error   { background: var(--error-pale);   color: var(--error); }
.c-notice--info    { background: var(--info-pale);    color: var(--info); }

/* ── FLOATING TOAST (transient notice raised by the fetch layer) ── */
.c-toast--float {
  position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + var(--sp-lg));
  transform: translateX(-50%);
  z-index: 110;
  box-shadow: var(--shadow-md);
  max-width: min(92vw, 26rem);
}

/* ── RESPONSIVE TABLE (stacks to labelled pairs under 48em) ── */
@media (max-width: 47.99em) {
  .c-table thead { display: none; }
  .c-table tr { display: block; padding: var(--sp-sm) 0; }
  .c-table td {
    display: flex; justify-content: space-between; gap: var(--sp-sm);
    border: 0; padding: var(--sp-2xs) var(--sp-md);
  }
  .c-table td::before {
    content: attr(data-label);
    font-size: var(--fs-2xs);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: var(--fw-bold);
    flex-shrink: 0;
  }
}

/* ── NAV HOST (generator mount point inside the sidebar chrome) ── */
.c-sidebar > [data-ct="CTNav"] { display: contents; }

/* ── BOTTOM NAV OVERFLOW GUARD (six console items at 320-375px) ── */
.c-bottomnav__item { min-width: 0; }
.c-bottomnav__item span {
  max-width: 100%;
  font-size: clamp(0.6rem, 2.6vw, var(--fs-2xs));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── APP UTILITIES (survivors of the old u- set still needed by glue) ── */
.u-grow { flex: 1 1 auto; min-width: 0; }
.u-center { text-align: center; }
.u-muted { color: var(--muted); }
.u-wrap { white-space: normal; word-break: break-word; }
.u-mono { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* ── D2 BRAND LOCKUP ───────────────────────────────────────── */
.c-brand { display: inline-flex; align-items: center; gap: var(--sp-xs); text-decoration: none; }
.c-brand__mark { width: var(--brand-mark); height: var(--brand-mark); flex-shrink: 0; }
.c-brand__mark svg { width: 100%; height: 100%; }
.c-brand__word {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--text);
  white-space: nowrap;
}
.c-brand__word em { color: var(--action); font-style: italic; }
/* on dark surfaces: word is white, em stays lime (or action) */
.c-brand--reverse .c-brand__word { color: var(--surface); }
.c-brand--reverse .c-brand__word em { color: var(--raw-lime); }
/* on lime surface: word all-white, no italic contrast tint */
.c-brand--on-lime .c-brand__word { color: var(--surface); }
.c-brand--on-lime .c-brand__word em { color: var(--surface); font-style: normal; }

/* Shared legal footer: one row in the narrow third-width splash panel. */
.c-footlinks { flex-wrap: nowrap; justify-content: space-between; gap: var(--sp-xs); }
.c-footlinks .c-btn { padding-inline: var(--sp-xs); }
/* == FORM TITLE (D-C10-234): the generic form heading CTForm emits, sized to
   --fs-xl rather than the default h1 --fs-3xl. Marketing-size h1 is what bloats
   the current wallet forms; this is the tokenised replacement. == */
.c-form-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

/* == FORM ACTIONS (D-C10-234): the single shared action footer CTForm emits.
   One primary over an l-cluster of secondaries, pinned to the foot of the form
   body for thumb reach. Replaces the per-page hand-rolled escape links. == */
.c-form__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding-top: var(--sp-sm);
}
/* == APPBAR HISTORY BUTTONS (D-C10-236): Back and Forward render as one compact
   rounded square each (not a 44px pill/circle), identical size so they align
   flush-left beside the logo. Half the pill height, no vertical padding. == */
.c-appbar__hist {
  width: var(--icon-lg);
  height: var(--icon-lg);
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-sm);
}
/* Keep the appbar on one row: the left block (logo + history + title) never
   wraps to a second line, and a long title truncates instead. */
.c-appbar > .l-cluster { flex-wrap: nowrap; min-width: 0; }
.c-appbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* == WALLET TOP BAR (D-C10-246): the logo holds the left, the operations
   cluster holds the right, at every width. Left/right insets are halved from
   the pill default, the icon-only controls render as compact squares so the
   full set (bell, history, settings, sign-out) never wraps, and each control
   highlights in the primary token on hover with its title as a tooltip. == */
.l-wallet > .c-appbar { padding-inline: var(--sp-sm); }
.l-wallet > .c-appbar > .l-cluster { flex: 0 1 auto; }
.l-wallet .c-appbar__actions { flex: 0 0 auto; flex-wrap: nowrap; }
.l-wallet .c-appbar__actions .c-btn { flex: 0 0 auto; padding-inline: var(--sp-xs); }
/* All six operations are one size (D-C10-247): in the wallet the history arrows
   render as c-btn--sm ghost buttons like their siblings, not the compact
   console square, so the generator no longer needs a size override here. */
.l-wallet .c-appbar__actions .c-btn--ghost:hover,
.l-wallet .c-appbar__actions .c-btn--ghost:focus-visible {
  background: transparent;
  color: var(--action);
}
/* Notification bell and its count sit half as far apart as the button default. */
.l-wallet [data-notification-bell] { gap: var(--sp-2xs); }

/* == J17 HEALTH TRACKER (D-C10-282): three minted families for S-P37. Colour
   discipline per the reference: lime attendance, navy-neutral referral, blue
   result; amber stays status-only on c-badge; people are initials in the
   standard c-avatar, never a per-person hue. == */

/* c-eicon (D-C10-282): event-type icon badge. */
.c-eicon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* c-eicon svg size; colour inherits from the family via currentColor (D-C10-282). */
.c-eicon svg { width: var(--icon-xs); height: var(--icon-xs); color: inherit; }
/* attendance family (D-C10-282). */
.c-eicon--att { background: var(--action-pale); color: var(--action-deep); }
/* referral family (D-C10-282). */
.c-eicon--ref { background: var(--bg-alt); border: var(--border) solid var(--line); color: var(--raw-navy-soft); }
/* result family (D-C10-282). */
.c-eicon--res { background: var(--info-pale); color: var(--info); }

/* c-bars (D-C10-282): stacked per-month density chart. Segment heights
   arrive as --h custom-property rem lengths (never percentages: a flex
   column has no definite height for them to resolve against); empty months
   are thin neutral stubs so the axis stays continuous. */
.c-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2xs);
  height: 3.25rem;
}
/* one tappable month column (D-C10-282). */
.c-bars__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2xs);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
/* the stacked bar; height comes from its segment blocks (D-C10-282). */
.c-bars__bar {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.125rem;
  min-height: 0.25rem;
  border-radius: 0.25rem 0.25rem 0.125rem 0.125rem;
}
/* empty month stub (D-C10-282). */
.c-bars__bar--empty { background: var(--bg-alt); height: 0.25rem; border-radius: 0.125rem; }
/* one family segment block; --h is a rem length (D-C10-282). */
.c-bars__seg { width: 100%; height: var(--h, 0.25rem); border-radius: 0.0625rem; flex-shrink: 0; }
/* family colours, shared with the month-head dots (D-C10-282). */
.c-bars__seg--att, .c-collapse__dot--att { background: var(--action); }
.c-bars__seg--ref, .c-collapse__dot--ref { background: var(--raw-navy-soft); }
.c-bars__seg--res, .c-collapse__dot--res { background: var(--info); }
/* month letter under the bar (D-C10-282). */
.c-bars__label { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--faint); }

/* c-collapse (D-C10-282): collapsible month section. is-open rotates the
   chevron and reveals the body; a collapsed head keeps its counts so nothing
   feels hidden. */
.c-collapse {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* full-width toggle head (D-C10-282). */
.c-collapse__head {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* chevron rotates when open (D-C10-282). */
.c-collapse__chev { color: var(--faint); transition: transform 0.16s; flex-shrink: 0; }
.c-collapse.is-open .c-collapse__chev { transform: rotate(90deg); color: var(--action-deep); }
/* month title (D-C10-282). */
.c-collapse__title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); }
/* family dots + total on the head (D-C10-282). */
.c-collapse__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
}
/* one family dot (D-C10-282). */
.c-collapse__dot { width: 0.4375rem; height: 0.4375rem; border-radius: var(--radius-pill); display: inline-block; }
/* body hidden until open; the open state owns the layout so a later
   layout class can never force a collapsed body visible (D-C10-282). */
.c-collapse__body { display: none; }
.c-collapse.is-open .c-collapse__body {
  display: flex;
  flex-direction: column;
  padding: 0 var(--sp-md) var(--sp-sm);
}
/* event rows are real buttons: reset the button chrome and keep the row
   grammar left-aligned with the meta column on the right (D-C10-282). */
.c-collapse__body .c-row {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
/* row separators survive the button reset (D-C10-282). */
.c-collapse__body .c-row + .c-row { border-top: var(--border) solid var(--line); }
.c-collapse__body .c-row > .l-stack--tight { align-items: flex-end; flex-shrink: 0; }

/* ── GLUE STATE CLASSES (D-C10-294 sanction, styled by D-C10-300) ── */
/* Toggled by the generated setState helper while a fetch is in flight or
   resolved empty; has-error keeps its c-field styling above. */
.is-loading { opacity: .55; pointer-events: none; }
.is-empty { color: var(--faint); }

/* ── EMERGENCY PASS PRINT (D-C10-305, BL-074) ─────────────── */
/* Printing S-P21 yields the card alone: chrome, actions and notices drop
   out and the passcard fills the page width. */
@media print {
  .c-appbar, .c-bottomnav, .c-rail, .c-sidebar, .c-btn, .c-notice,
  .c-toast, .c-chips { display: none !important; }
  .c-passcard { width: 100%; border: var(--border) solid var(--line); }
}

/* ── A11Y CONTRAST (D-C10-309, BL-134) ────────────────────── */
/* The role footer line inherits c-row__sub's muted ink, unreadable on navy;
   inside the sidebar it reads in mixed surface instead. */
.c-sidebar .c-row__sub { color: color-mix(in oklab, var(--surface) 75%, transparent); }