/* CDL System shared stylesheet. Fonts, tokens, base styles and type roles are copied
   verbatim from reference/cdlsystem/apps/web/app/globals.css (docs/DESIGN.md §3); only font
   URLs and the @layer wrapper are adapted. Components follow below. Never a hex value in a
   component rule. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}

:root {
  /* 1. CDL System — brand package 05-Brand-Tokens. */
  --cdl-firebrick: #f62817;
  --cdl-graphite: #252724;
  --cdl-stone: #92928a;
  --cdl-chalk: #f2f0e9;

  /* 2. Brand (per agency; product defaults). */
  --brand-primary: #f62817;
  --brand-secondary: #f2f0e9;
  --brand-accent: #f62817;
  --brand-accent-contrast: #151614;
  --brand-contrast: #151614;
  --brand-solid: #e22515;
  --brand-on-solid: #ffffff;
  --brand-hover: #c22012;
  --brand-strong: #d42214;
  --brand-tint: #feecea;
  --brand-on-ink: #f62817;
  --brand-on-ink-contrast: #151614;
  --brand-font: "Inter", system-ui, sans-serif;
  --font-display: "Montserrat", var(--brand-font);

  /* 3. The rail — Graphite, with Chalk text. */
  --ink: #252724;
  --ink-soft: #33352f;
  --ink-hover: #3d3f3a;
  --ink-line: #3a3c37;
  --ink-fg: #f2f0e9;
  --ink-muted: #a9a89f;

  /* 3b. The sidebar (rail, phone top bar and drawer): its own literal values, the rail exactly
     as it has always looked. Content tokens below never reach it (docs/DESIGN.md §3.1). */
  --sidebar-bg: #252724;
  --sidebar-active: #33352f;
  --sidebar-line: #3a3c37;
  --sidebar-fg: #f2f0e9;
  --sidebar-muted: #a9a89f;
  --sidebar-accent: #f62817;
  --sidebar-badge: #e22515;
  --sidebar-on-badge: #ffffff;

  /* 4a. Structure — warm neutrals built from Chalk, Stone and Graphite. */
  --canvas: #f2f0e9;
  --surface: #ffffff;
  --surface-subtle: #f8f7f3;
  --surface-sunken: #eae7de;
  --hairline: #e2dfd6;
  --control: #cdc9bc;
  --control-hover: #b4b0a3;
  --fg: #252724;
  --fg-muted: #67665f;
  --fg-subtle: #87867d;

  /* 4b. Meaning — text (≥ 4.5:1 on its tint and on white), tint, line, dot. Colour is never
     the only signal: every use carries a word or an icon too. */
  --success: #256d42;
  --success-tint: #e7f2ea;
  --success-line: #bcd9c4;
  --success-dot: #3b9a5e;
  --warning: #8a5300;
  --warning-tint: #fbf1dc;
  --warning-line: #eed6a6;
  --warning-dot: #d98e04;
  --danger: #b42318;
  --danger-tint: #fdecea;
  --danger-line: #f4c7c1;
  --danger-dot: #d92d20;
  --info: #275c8c;
  --info-tint: #e8f0f8;
  --info-line: #c3d6ea;
  --info-dot: #3a7bbf;
  --neutral: #4f4f49;
  --neutral-tint: #efede6;
  --neutral-line: #dcd8cc;
  --neutral-dot: #92928a;

  /* 4c. Data — Graphite carries the main series, Firebrick the one that matters, Stone the
     comparison. The extra hues are distinguishable under the common colour-vision deficiencies
     and ≥ 3:1 on --surface. */
  --chart-1: #252724;
  --chart-2: #f62817;
  --chart-3: #a8a79e;
  --chart-4: #3a7bbf;
  --chart-5: #1f8a8a;
  --chart-6: #d98e04;
  --chart-track: #eae7de;

  /* 4d. Motion — strong curves (the built-in ones are too weak); exits are faster than entries.
     Reduced motion is honoured globally below. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* The layer behind a dialog, side sheet or phone menu: the page dimmed and blurred, so the
     layer in front reads as the only thing to look at. A token, because `bg-fg/30` compiles to
     nothing: `--fg` has no alpha channel (Standard §13.3). */
  --scrim: color-mix(in srgb, var(--cdl-graphite) 32%, transparent);
  --scrim-blur: 6px;
  /* The soft halo around a focused field, beside its Graphite border. */
  --focus-halo: color-mix(in srgb, var(--cdl-graphite) 12%, transparent);

  /* Skeleton placeholders. */
  --skeleton-base: color-mix(in srgb, var(--fg) 6%, var(--surface));
  --skeleton-sheen: color-mix(in srgb, var(--surface) 70%, transparent);

  /* Light only until a real dark theme is designed (Standard §13.1, §13.10): without this, a
     computer in dark mode draws dark system controls inside the light app. */
  color-scheme: light;
  accent-color: var(--brand-solid);

  /* Height of the phone's fixed top bar; everything under it offsets by exactly this. */
  --app-topbar: calc(3.5rem + env(safe-area-inset-top, 0px));
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--brand-font);
  /* Inter's tailed lowercase l: "Il1" stay apart in names, e-mails and licence numbers. */
  font-feature-settings: "cv05" 1;
  background-color: var(--canvas);
  color: var(--fg);
  text-rendering: optimizeLegibility;
}

/* Visible focus everywhere (Standard §13.11): a brand ring just off the control's edge.
   Fields draw their own (border + halo, see the Input component). */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible {
  outline: none;
}

/* On the rail, the accent drawn against Graphite. */
.bg-ink :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--brand-on-ink);
}
:where(.rail, .topbar, .nav-drawer) :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--sidebar-accent);
}

::selection {
  background: var(--brand-tint);
  color: var(--fg);
}

/* Respect users who ask for less motion (Standard §13.4). Components do not override it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Type roles: one class per role (copied from globals.css). */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.t-heading {
  font-family: var(--brand-font);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  letter-spacing: -0.006em;
}
.t-body-lg {
  font-family: var(--brand-font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}
.t-body {
  font-family: var(--brand-font);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.t-small {
  font-family: var(--brand-font);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.t-caption {
  font-family: var(--brand-font);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.005em;
}
.t-overline {
  font-family: var(--brand-font);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t-metric-xl,
.t-metric,
.t-metric-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.t-metric-xl {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.t-metric {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.t-metric-sm {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-feature-settings: normal;
}

/* ── Press feedback (Material 3) ──
   The ripple a Button or IconButton spreads from the point pressed (packages/ui ripple.ts): the
   label's own colour at 12 %, behind the label, clipped by the pill.
   `.state-layer` gives any other pressable surface the same hover/press veil. */
.ripple {
  position: absolute;
  z-index: -1;
  border-radius: 9999px;
  background-color: currentColor;
  opacity: 0.12;
  pointer-events: none;
  transform: scale(0.2);
}
.state-layer {
  position: relative;
  isolation: isolate;
}
.state-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .state-layer:hover::before {
    opacity: 0.08;
  }
}
.state-layer:focus-visible::before,
.state-layer:active::before {
  opacity: 0.1;
}

/* ── Select ── every <select> belongs to the design system (Standard §13.10): opt out of the
   native widget and draw the chevron. The stroke `%2367665f` is --fg-muted (a CSS variable
   cannot be read inside url()); a structural token, restated only here. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2367665f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 15px 15px;
}
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
}

/* Autofill paints fields yellow and ignores background-color; an inset shadow repaints it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: inset 0 0 0 100px var(--surface);
  caret-color: var(--fg);
}

/* ── Entrance ── one orchestrated rise when a screen first paints, then nothing moves. Children
   opt in with .enter and a stagger step (.enter-1 … .enter-6, 50 ms apart). */
@keyframes enter-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.enter {
  animation: enter-rise 320ms var(--ease-out) both;
}
.enter-1 {
  animation-delay: 40ms;
}
.enter-2 {
  animation-delay: 90ms;
}
.enter-3 {
  animation-delay: 140ms;
}
.enter-4 {
  animation-delay: 190ms;
}
.enter-5 {
  animation-delay: 240ms;
}
.enter-6 {
  animation-delay: 290ms;
}

/* The sign-in panel's cropped symbol drifts in once, from the right. */
@keyframes login-symbol {
  from {
    opacity: 0;
    transform: translateX(6%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.login-symbol {
  animation: login-symbol 1100ms var(--ease-out) 120ms both;
}

/* Someone who asked the system for less transparency gets the dim layer without the blur. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --scrim-blur: 0px;
  }
}

/* =====================================================================
   Components. Each reproduces the rendered result of the reference component named beside it
   (reference/cdlsystem/packages/ui/src/components). Shared UI grows here slice by slice.
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}
h1,
h2,
p {
  margin: 0;
}

.bg-ink {
  background-color: var(--ink);
  color: var(--ink-fg);
}
.rail,
.topbar,
.nav-drawer {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-fg);
}

/* ── Logo (logo.tsx tones) ── */
.logo {
  display: block;
  flex-shrink: 0;
  height: auto;
}
.logo--primary .logo-a { fill: var(--cdl-stone); }
.logo--primary .logo-b { fill: var(--cdl-firebrick); }
.logo--primary .logo-c { fill: var(--cdl-graphite); }
.logo--primary .logo-d { fill: var(--cdl-firebrick); }
.logo--reversed .logo-a { fill: var(--cdl-chalk); }
.logo--reversed .logo-b { fill: var(--cdl-firebrick); }
.logo--reversed .logo-c { fill: var(--cdl-chalk); }
.logo--reversed .logo-d { fill: var(--cdl-firebrick); }
.logo--mono path { fill: currentColor; }

.icon {
  display: block;
  flex-shrink: 0;
}

/* ── Button (button.tsx): 8 px corners and a state layer (docs/DESIGN.md §3.1) ── */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out),
    color 150ms var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before {
    opacity: 0.08;
  }
}
.btn:focus-visible::before,
.btn:active::before {
  opacity: 0.1;
}
.btn:disabled {
  pointer-events: none;
  color: var(--fg-subtle);
}
.btn--sm { height: 1.875rem; gap: 0.375rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.btn--md { height: 2.125rem; gap: 0.5rem; padding: 0 0.875rem; font-size: 0.8125rem; }
.btn--lg { height: 2.5rem; gap: 0.5rem; padding: 0 1.25rem; font-size: 0.875rem; }
.btn--sm .icon { width: 1rem; height: 1rem; }
.btn--md .icon,
.btn--lg .icon { width: 1.125rem; height: 1.125rem; }
@media (pointer: coarse) {
  .btn--sm { height: 2.5rem; }
  .btn--md,
  .btn--lg { height: 2.75rem; font-size: 0.875rem; }
}
.btn--primary { background-color: var(--action); color: var(--on-action); }
.btn--primary:disabled { background-color: var(--surface-sunken); }
.btn--secondary { border: 1px solid var(--control); color: var(--fg); }
.btn--secondary:disabled { border-color: var(--hairline); }
.btn--block { width: 100%; }

/* ── Text field (text-field.tsx): outlined, the label floats into a gap in the border ── */
.field {
  position: relative;
  min-width: 0;
  border-radius: 0.5rem;
  background-color: var(--surface);
}
.field__input {
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}
.field--lg .field__input { height: 3rem; }
.field__input::placeholder { color: transparent; }
.field__label {
  position: absolute;
  top: 0;
  left: 0.75rem;
  z-index: 1;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translateY(0.75rem);
  transform-origin: top left;
  transition: transform 150ms var(--ease-out), color 150ms var(--ease-out);
}
.field--lg .field__label { transform: translateY(0.875rem); }
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
  transform: translateY(-9px) scale(0.857);
}
.field__input:focus ~ .field__label { color: var(--fg); }
.field__outline {
  position: absolute;
  inset: -5px 0 0;
  min-width: 0;
  margin: 0;
  padding: 0 0.5rem;
  overflow: hidden;
  border: 1px solid var(--control);
  border-radius: 0.5rem;
  text-align: left;
  pointer-events: none;
  transition: border-color 150ms var(--ease-out);
}
.field__outline legend {
  display: block;
  float: none;
  visibility: hidden;
  width: auto;
  max-width: 0.01px;
  height: 11px;
  padding: 0;
  overflow: hidden;
  font-size: 0.75rem;
  white-space: nowrap;
  transition: max-width 100ms;
}
.field__outline legend span {
  display: inline-block;
  padding: 0 0.25rem;
}
.field__input:focus ~ .field__outline legend,
.field__input:not(:placeholder-shown) ~ .field__outline legend {
  max-width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .field__input:hover ~ .field__outline { border-color: var(--control-hover); }
}
.field__input:focus ~ .field__outline {
  border-width: 2px;
  border-color: var(--ink);
}
.field__input[aria-invalid="true"] ~ .field__label { color: var(--danger); }
.field__input[aria-invalid="true"] ~ .field__outline { border-color: var(--danger-dot); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.375rem;
  padding: 0 0.75rem;
  color: var(--danger);
  font-size: 0.75rem;
  line-height: 1rem;
}
.field-error .icon { margin-top: 1px; }

/* The one error under a whole form (sign-in never says which field was wrong). */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: -0.75rem;
  padding: 0 0.75rem;
  color: var(--danger);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.form-error .icon { margin-top: 2px; }

/* ── Callout (feedback.tsx) ── */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.callout .icon { margin-top: 1px; }
.callout--info { background-color: var(--info-tint); border-color: var(--info-line); color: var(--info); }
.callout--success { background-color: var(--success-tint); border-color: var(--success-line); color: var(--success); }
.callout--warning { background-color: var(--warning-tint); border-color: var(--warning-line); color: var(--warning); }
.callout--danger { background-color: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }

/* ── Signed-out screens (reference login page): a Graphite brand panel from 1024 px, the
      form on Chalk ── */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--canvas);
}
.auth__panel {
  position: relative;
  display: none;
  overflow: hidden;
}
.auth__panel-logo {
  position: relative;
  z-index: 1;
  width: 200px;
}
.auth__line {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  margin-top: 18vh;
}
.auth__rule {
  display: block;
  width: 3.5rem;
  height: 0.25rem;
  margin-bottom: 1.75rem;
  background-color: var(--cdl-firebrick);
}
.auth__tagline { text-wrap: balance; }
.auth__tagline-sub {
  margin-top: 1rem;
  color: var(--ink-muted);
}
.auth__symbol {
  position: absolute;
  right: -30%;
  bottom: -8%;
  width: 104%;
  pointer-events: none;
}
.auth__symbol-link {
  position: absolute;
  inset: 0;
  width: 100%;
  color: var(--ink-soft);
}
.auth__symbol-hook {
  position: relative;
  width: 100%;
  color: var(--cdl-firebrick);
}
.auth__main {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem;
}
.auth__mobile-logo { width: 180px; }
.auth__content {
  width: 100%;
  max-width: 22.5rem;
  margin: auto;
  padding: 3rem 0;
}
.auth__title { color: var(--fg); }
.auth__callout { margin-top: 1.5rem; }
.auth__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}
.auth__submit { margin-top: 0.5rem; }
.auth__text {
  margin-top: 1rem;
  color: var(--fg-muted);
}
.auth__actions { margin-top: 2rem; }
@media (min-width: 640px) {
  .auth__main { padding-right: 2.5rem; padding-left: 2.5rem; }
}
@media (min-width: 1024px) {
  .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .auth__panel {
    display: flex;
    flex-direction: column;
    padding: 3.5rem;
  }
  .auth__main { padding: 3.5rem 4rem; }
  .auth__mobile-logo { display: none; }
}
@media (min-width: 1280px) {
  .auth__panel { padding: 4rem; }
}
ol.auth__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
}


/* Tokens the components below add: the two allowed shadows (tailwind.config.ts) and the
   curated colours an agency gives a configured status (badge.tsx STATUS_COLORS). */
:root {
  --shadow-pop: 0 1px 2px 0 rgb(37 39 36 / 0.06), 0 10px 28px -6px rgb(37 39 36 / 0.2),
    0 0 0 1px rgb(37 39 36 / 0.05);
  --shadow-overlay: 0 2px 6px -1px rgb(37 39 36 / 0.08), 0 24px 56px -12px rgb(37 39 36 / 0.32),
    0 0 0 1px rgb(37 39 36 / 0.06);
  --status-stone: #8a897f;
  --status-graphite: #252724;
  --status-blue: #3a7bbf;
  --status-teal: #1f8a8a;
  --status-green: #3b9a5e;
  --status-amber: #d98e04;
  --status-orange: #e0661a;
  --status-red: #d92d20;
  --status-plum: #8e4fa8;

  /* The content area (docs/DESIGN.md §3.1): the primary action, frames, controls, width. */
  --action: #d21f10;
  --on-action: #ffffff;
  --radius-card: 12px;
  --radius-control: 8px;
  --shadow-card: 0 1px 2px 0 rgb(37 39 36 / 0.04);
  --content-max: 90rem;
}

/* ── Motion (tailwind.config.ts keyframes) ── */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.97) translateY(-2px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop-in-up {
  from { opacity: 0; transform: scale(0.97) translateY(2px); }
  to { opacity: 1; transform: none; }
}
@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* ── Helpers ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: var(--surface);
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
}

/* ── Button variants and the leading-icon inset (button.tsx) ── */
.btn--brand { background-color: var(--action); color: var(--on-action); }
.btn--brand:disabled { background-color: var(--surface-sunken); }
.btn--tonal { background-color: var(--surface-sunken); color: var(--fg); }
.btn--ghost { color: var(--fg); }
.btn--danger { background-color: var(--danger); color: var(--surface); }
.btn--danger:disabled { background-color: var(--surface-sunken); }
.btn--sm.btn--leading { padding-left: 0.625rem; }
.btn--md.btn--leading { padding-left: 0.75rem; }
.btn--lg.btn--leading { padding-left: 1rem; }

/* ── Icon button (button.tsx IconButton): a circle; its name is its tooltip ── */
.icon-btn {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out),
    color 150ms var(--ease-out);
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover::before { opacity: 0.08; }
  .icon-btn--ghost:hover,
  .icon-btn--secondary:hover { color: var(--fg); }
}
.icon-btn:focus-visible::before,
.icon-btn:active::before { opacity: 0.1; }
.icon-btn:disabled {
  pointer-events: none;
  color: var(--fg-subtle);
}
.icon-btn--sm { width: 2rem; height: 2rem; }
.icon-btn--md { width: 2.25rem; height: 2.25rem; }
@media (pointer: coarse) {
  .icon-btn--sm { width: 2.5rem; height: 2.5rem; }
  .icon-btn--md { width: 2.75rem; height: 2.75rem; }
}
.icon-btn--ghost { color: var(--fg-muted); }
.icon-btn--tonal { background-color: var(--surface-sunken); color: var(--fg); }
.icon-btn--secondary { border: 1px solid var(--control); color: var(--fg-muted); }
.icon-btn--primary { background-color: var(--action); color: var(--on-action); }
.icon-btn--primary:disabled { background-color: var(--surface-sunken); }
.icon-btn[aria-pressed="true"] {
  border-color: transparent;
  background-color: var(--brand-tint);
  color: var(--brand-strong);
}

/* ── Field additions: textarea, disabled (text-field.tsx) ── */
textarea.field__input {
  height: auto;
  min-height: 2.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.625rem;
  line-height: 1.25rem;
  resize: vertical;
}
.field:has(.field__input:disabled) { background-color: var(--surface-subtle); }
.field__input:disabled {
  cursor: not-allowed;
  color: var(--fg-muted);
}
.field__input:disabled ~ .field__outline { border-color: var(--hairline); }

/* ── Badges (badge.tsx) ── */
.badge,
.status-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.table :where(.badge, .status-badge) { white-space: nowrap; }
.badge__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}
.badge--neutral { background-color: var(--neutral-tint); color: var(--neutral); }
.badge--neutral .badge__dot { background-color: var(--neutral-dot); }
.badge--brand { background-color: var(--brand-tint); color: var(--brand-strong); }
.badge--brand .badge__dot { background-color: var(--brand-primary); }
.badge--success { background-color: var(--success-tint); color: var(--success); }
.badge--success .badge__dot { background-color: var(--success-dot); }
.badge--warning { background-color: var(--warning-tint); color: var(--warning); }
.badge--warning .badge__dot { background-color: var(--warning-dot); }
.badge--danger { background-color: var(--danger-tint); color: var(--danger); }
.badge--danger .badge__dot { background-color: var(--danger-dot); }
.badge--info { background-color: var(--info-tint); color: var(--info); }
.badge--info .badge__dot { background-color: var(--info-dot); }
.status-badge {
  border: 1px solid var(--hairline);
  background-color: var(--surface);
  color: var(--fg);
}
.status-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.status-dot--stone { background-color: var(--status-stone); }
.status-dot--graphite { background-color: var(--status-graphite); }
.status-dot--blue { background-color: var(--status-blue); }
.status-dot--teal { background-color: var(--status-teal); }
.status-dot--green { background-color: var(--status-green); }
.status-dot--amber { background-color: var(--status-amber); }
.status-dot--orange { background-color: var(--status-orange); }
.status-dot--red { background-color: var(--status-red); }
.status-dot--plum { background-color: var(--status-plum); }
.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background-color: var(--brand-solid);
  color: var(--brand-on-solid);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ── Callout additions (feedback.tsx) ── */
.callout__body { min-width: 0; }
.callout__title { font-weight: 600; }

/* ── Empty state (empty-state.tsx) ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}
.empty--compact { padding: 2.5rem 1.5rem; }
.empty__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
  background-color: var(--surface-sunken);
  color: var(--fg-muted);
}
.empty__icon .icon { width: 22px; height: 22px; }
.empty__title {
  max-width: 24rem;
  color: var(--fg);
  text-wrap: balance;
}
.empty__text {
  max-width: 24rem;
  margin-top: 0.375rem;
  color: var(--fg-muted);
  text-wrap: balance;
}
.empty__action { margin-top: 1.5rem; }

/* ── Page header (page-header.tsx) ── */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
}
.page-header__text { min-width: 0; }
.page-header__eyebrow {
  margin-bottom: 0.25rem;
  color: var(--fg-muted);
}
.page-header__title {
  color: var(--fg);
  font-size: 1.5rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .page-header__title { font-size: 1.75rem; line-height: 1.2; }
}
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ── Card and panel (card.tsx): one hairline, 12 px corners, the faintest shadow ── */
.card {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .panel__header { padding: 1rem 1.25rem; }
}
.panel__title {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.panel__meta {
  flex-shrink: 0;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.panel__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  margin: -0.25rem 0 -0.25rem auto;
}
.panel__body {
  flex: 1;
  min-height: 0;
}

/* ── Table (table.tsx): a real table from 768 px, a stacked list below ── */
.table-frame {
  position: relative;
  z-index: 0;
  display: none;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.panel .table-frame,
.panel .stack-list { border: 0; border-radius: 0; box-shadow: none; }
.table-frame { overscroll-behavior-x: contain; scrollbar-width: thin; }
.table-frame:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.table thead { background-color: var(--surface-subtle); }
.table th {
  height: 2.5rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td {
  height: 3rem;
  padding: 0.625rem 1rem;
  color: var(--fg);
  vertical-align: middle;
  overflow-wrap: break-word;
}
.table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.table :where(th, td):first-child { padding-left: 1.25rem; }
/* The row's name keeps a readable width; when the columns do not fit, the frame scrolls instead. */
.table td:first-child { min-width: 10rem; }
.table :where(th, td):last-child { padding-right: 1.25rem; }
.table tbody tr { transition: background-color 150ms var(--ease-out); }
.table .is-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.table__empty {
  color: var(--fg-muted);
  font-size: 0.75rem;
  text-align: center;
}
.cell-stack { min-width: 0; }
.cell-stack__primary {
  overflow: hidden;
  color: var(--fg);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-stack__secondary {
  margin-top: 0.125rem;
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
  list-style: none;
}
.stack-list__row,
.stack-list__empty { padding: 0.875rem 1.25rem; }
.stack-list__row + .stack-list__row { border-top: 1px solid var(--hairline); }
.stack-list__empty {
  color: var(--fg-muted);
  font-size: 0.75rem;
  text-align: center;
}
.stack-list__primary { margin-bottom: 0.375rem; }
.stack-list__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.125rem 0;
  font-size: 0.875rem;
}
.stack-list__item > * { min-width: 0; overflow-wrap: anywhere; }
.stack-list__label { flex-shrink: 0; max-width: 45%; color: var(--fg-muted); }
@media (min-width: 768px) {
  .table-frame { display: block; }
  .stack-list { display: none; }
}

/* ── Dialog (modal.tsx): a centred 28 px card; a bottom sheet on a phone ── */
.dialog {
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px 28px 0 0;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-overlay);
}
.dialog[open] {
  display: flex;
  animation: slide-up 320ms var(--ease-drawer) both;
}
.dialog::backdrop,
.nav-drawer::backdrop {
  /* The fallback restates --scrim for browsers that do not pass variables into ::backdrop. */
  background-color: var(--scrim, rgb(37 39 36 / 0.32));
  backdrop-filter: blur(var(--scrim-blur, 6px));
  animation: fade-in 160ms var(--ease-out) both;
}
@media (prefers-reduced-transparency: reduce) {
  .dialog::backdrop,
  .nav-drawer::backdrop { backdrop-filter: none; }
}
html:has(dialog[open]) { overflow: hidden; }
.dialog__handle {
  display: flex;
  justify-content: center;
  padding-top: 0.75rem;
}
.dialog__handle span {
  width: 2rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: var(--control);
}
.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.5rem 0.25rem;
}
.dialog__title {
  min-width: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.dialog__close { margin-right: -0.375rem; }
.dialog__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}
.dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem 1.5rem;
}
@media (min-width: 640px) {
  .dialog {
    max-width: 32rem;
    margin: auto;
    border-radius: 28px;
  }
  .dialog[open] { animation: dialog-in 220ms var(--ease-out) both; }
  .dialog__handle { display: none; }
  .dialog__header { padding-top: 1.5rem; }
}

/* ── The shell (shell/sidebar.tsx, (app)/layout.tsx) ── */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--canvas);
}
.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  width: 264px;
  height: 100vh;
  height: 100dvh;
  transition: width 220ms var(--ease-out);
}
.app--collapsed .rail { width: 68px; }
.rail__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 4.5rem;
  padding: 1rem 0.75rem 0.5rem 1.5rem;
}
.rail__logo { width: 180px; }
.rail__symbol { display: none; width: 2.25rem; }
.rail__toggle {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.rail__toggle-icon { transition: transform 150ms var(--ease-out); }
.app--collapsed .rail__brand {
  flex-direction: column;
  gap: 0.75rem;
  height: auto;
  padding: 1rem 0.75rem 0.5rem;
}
.app--collapsed .rail__logo { display: none; }
.app--collapsed .rail__symbol { display: block; }
.app--collapsed .rail__toggle { margin: 0; }
.app--collapsed .rail__toggle-icon { transform: rotate(180deg); }
.rail__agency {
  overflow: hidden;
  padding: 0.25rem 1.5rem 0.5rem;
  color: var(--sidebar-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app--collapsed .rail .rail__agency { display: none; }
.rail__nav {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0.75rem;
}
.rail__brand,
.rail__agency,
.rail__foot { flex-shrink: 0; }
/* A scrolling navigation keeps the rail dark: a thin thumb in the rail's own muted colour. */
.rail__nav,
.nav-drawer__nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sidebar-muted) 35%, transparent) transparent;
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: 9999px;
  color: var(--sidebar-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}
.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover,
  .rail__toggle:hover,
  .topbar__menu:hover,
  .nav-drawer__close:hover,
  .user-menu__trigger:hover { color: var(--sidebar-fg); }
  .nav-link:hover::before { opacity: 0.08; }
}
.nav-link:focus-visible::before,
.nav-link:active::before { opacity: 0.1; }
.nav-link--drawer { height: 2.75rem; }
.nav-link__icon { flex-shrink: 0; }
.nav-link__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The Material 3 active pill: ink-soft, full round; the label semibold, the icon on-ink. */
.nav-link[aria-current="page"] {
  background-color: var(--sidebar-active);
  color: var(--sidebar-fg);
  font-weight: 600;
}
.nav-link[aria-current="page"] .nav-link__icon { color: var(--sidebar-accent); }
.app--collapsed .rail .nav-link {
  justify-content: center;
  padding: 0;
}
.app--collapsed .rail .nav-link__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.rail__foot {
  padding: 0.75rem;
  border-top: 1px solid var(--sidebar-line);
}

/* Admin / Recruiter: which section the menu shows (display only, never access). A track in the
   rail's active surface; the chosen side drawn in the rail's text colour. */
.nav-context {
  display: flex;
  flex-shrink: 0;
  gap: 0.125rem;
  margin: 0.25rem 0.75rem 0.5rem;
  padding: 0.1875rem;
  border-radius: 0.625rem;
  background-color: var(--sidebar-active);
}
.nav-context__item {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  color: var(--sidebar-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.nav-context__icon { display: none; }
.nav-context__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-context__item[aria-current="true"] {
  background-color: var(--sidebar-fg);
  color: var(--sidebar-bg);
}
@media (hover: hover) and (pointer: fine) {
  .nav-context__item:not([aria-current="true"]):hover { color: var(--sidebar-fg); }
  .rail-bell:hover { color: var(--sidebar-fg); }
}
.nav-context__item:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 1px; }

/* The account and the notifications bell share the foot of the rail. */
.rail__account {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.rail__account .user-menu { flex: 1; min-width: 0; }
.rail-bell {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: var(--sidebar-muted);
  transition: color 150ms var(--ease-out);
}
.rail-bell[aria-current="page"] { background-color: var(--sidebar-active); color: var(--sidebar-fg); }
.rail-bell .count-badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  background-color: var(--sidebar-badge);
  color: var(--sidebar-on-badge);
  font-size: 0.625rem;
}
a.user-menu__item { text-decoration: none; }
.user-menu__item[aria-current="page"] { background-color: var(--surface-sunken); font-weight: 600; }

/* The person at the foot of the rail (user-menu.tsx). */
.user-menu { position: relative; }
.user-menu__trigger {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 1rem;
  color: var(--sidebar-muted);
  font-size: 0.875rem;
  list-style: none;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.user-menu__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .user-menu__trigger:hover::before { opacity: 0.08; }
}
.user-menu__trigger:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 2px; }
.user-menu__trigger:focus-visible::before { opacity: 0.1; }
.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: var(--brand-solid);
  color: var(--brand-on-solid);
  font-size: 0.75rem;
  font-weight: 600;
}
.user-menu__text {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.user-menu__name,
.user-menu__agency {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu__name {
  color: var(--sidebar-fg);
  font-weight: 500;
}
:where(.rail, .nav-drawer) .avatar {
  background-color: var(--sidebar-badge);
  color: var(--sidebar-on-badge);
}
.user-menu__agency { font-size: 0.75rem; }
.user-menu__chevron { transition: transform 150ms var(--ease-out); }
.user-menu[open] .user-menu__chevron { transform: rotate(180deg); }
.app--collapsed .rail .user-menu__trigger {
  justify-content: center;
  padding: 0.375rem;
}
.app--collapsed .rail .user-menu__text,
.app--collapsed .rail .user-menu__chevron { display: none; }
.app--collapsed .rail .nav-context { flex-direction: column; margin-inline: 0.625rem; }
.app--collapsed .rail .nav-context__icon { display: block; }
.app--collapsed .rail .nav-context__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.app--collapsed .rail .nav-context__item { flex: none; height: 2.25rem; padding: 0; }
.app--collapsed .rail .rail__account { flex-direction: column-reverse; }
.user-menu__panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 50;
  width: 15rem;
  margin-bottom: 0.5rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  transform-origin: bottom left;
  animation: pop-in-up 160ms var(--ease-out) both;
}
.user-menu__who { padding: 0.5rem 0.625rem; }
.user-menu__panel-name,
.user-menu__panel-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu__panel-name {
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 600;
}
.user-menu__panel-meta {
  color: var(--fg-muted);
  font-size: 0.75rem;
}
.user-menu__sep {
  height: 1px;
  margin: 0.25rem 0;
  background-color: var(--hairline);
}
.user-menu__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out);
}
.user-menu__item .icon { color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
  .user-menu__item:hover { background-color: var(--surface-sunken); }
}
.user-menu__item:focus-visible { background-color: var(--surface-sunken); }

/* Phone (< 768 px): a fixed top bar and the navigation as a modal drawer. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--app-topbar);
  padding: env(safe-area-inset-top, 0px) 1rem 0;
}
.topbar__symbol { width: 2.25rem; }
.topbar__agency {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--sidebar-fg);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__menu,
.nav-drawer__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.nav-drawer {
  flex-direction: column;
  width: 18rem;
  max-width: 85%;
  height: 100%;
  max-height: none;
  margin: 0 auto 0 0;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  border: 0;
  box-shadow: var(--shadow-pop);
}
.nav-drawer[open] {
  display: flex;
  animation: slide-in-left 320ms var(--ease-drawer) both;
}
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 3.5rem;
  padding: 0 1rem;
}
.nav-drawer__logo { width: 180px; }
.nav-drawer__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0.75rem;
}
.nav-drawer__head,
.nav-drawer .rail__agency,
.nav-drawer .rail__foot { flex-shrink: 0; }
.nav-drawer .user-menu__panel { width: 100%; }

.app__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.app__main {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--app-topbar) + 1rem) 1rem 1.5rem;
  overflow-wrap: break-word;
  outline: none;
}
@media (min-width: 640px) {
  .app__main { padding-right: 1.5rem; padding-left: 1.5rem; }
}
@media (min-width: 768px) {
  .rail { display: flex; }
  .topbar { display: none; }
  .app__main { padding-top: 1.5rem; }
}
@media (min-width: 1280px) {
  .app__main { padding: 2rem 2.5rem; }
}

/* The compact rail: glyphs only, each label its accessible name and tooltip (shell.js). Chosen
   with the toggle from 1280 px (.app--collapsed); always between 768 and 1279 px, where the
   toggle is hidden. The two rule sets below are the same and must stay so. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .rail { width: 68px; }
  .rail__toggle { display: none; }
  .rail__brand { flex-direction: column; gap: 0.75rem; height: auto; padding: 1rem 0.75rem 0.5rem; }
  .rail__logo,
  .rail .rail__agency,
  .rail .user-menu__text,
  .rail .user-menu__chevron { display: none; }
  .rail__symbol { display: block; }
  .rail .nav-link { justify-content: center; padding: 0; }
  .rail .nav-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .rail .user-menu__trigger { justify-content: center; padding: 0.375rem; }
  .rail .nav-context { flex-direction: column; margin-inline: 0.625rem; }
  .rail .nav-context__icon { display: block; }
  .rail .nav-context__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .rail .nav-context__item { flex: none; height: 2.25rem; padding: 0; }
  .rail .rail__account { flex-direction: column-reverse; }
  .rail .nav-link .count-badge {
    position: absolute; top: 0.125rem; right: 0.125rem;
    min-width: 1rem; height: 1rem; padding: 0 0.25rem; font-size: 0.625rem;
  }
}

/* ── Dashboard (docs/DESIGN.md §3.1): filters, summary figures, then panels in one column on a
   phone, two from 1024 px, three once each column has about 22 rem (1440 px beside the expanded
   rail, 1280 px beside the compact one). Panels keep their own height (no stretching to a
   neighbour) and the grid fills gaps in order. ── */
.dash {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row dense;
  align-items: start;
  gap: 1rem;
}
.dash-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .dash { gap: 1.25rem; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .dash-grid__wide,
  .dash-grid__full { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-grid__wide { grid-column: span 2; }
}
@media (min-width: 1280px) {
  .app--collapsed .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app--collapsed .dash-grid__wide { grid-column: span 2; }
}

/* The period's summary figures: one framed strip under the filters (each figure picks the chart). */
.dash-summary {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.dash-summary__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-muted);
}
.dash-summary .perf__tabs { border-bottom: 0; }
/* The counting units under each figure always stay readable: they wrap, never cut off. */
.dash-summary .perf__sub { overflow: visible; white-space: normal; overflow-wrap: anywhere; }

/* A list panel across the whole grid: its rows in two columns once there is room. */
@media (min-width: 1024px) {
  .dash-split .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-split .rows > li + li { border-top: 0; }
  .dash-split .rows > li:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .dash-split .rows > li:nth-child(odd) { border-right: 1px solid var(--hairline); }
}

/* A panel's longer explanation, closed until asked for. */
.panel-help { padding: 0 1.25rem 0.75rem; color: var(--fg-muted); }
.rows + .panel-help,
.chart-stack + .panel-help { padding-top: 0.75rem; border-top: 1px solid var(--hairline); }
.perf__body .panel-help { padding: 0.5rem 0 0; }
.panel-help__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  color: var(--fg-muted);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.panel-help__toggle::-webkit-details-marker { display: none; }
.panel-help[open] .panel-help__toggle { color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .panel-help__toggle:hover { color: var(--fg); }
}
.panel-help__text { max-width: 40rem; margin-top: 0.25rem; }

/* ── Dashboard activity: figures as tabs (links) over one bar chart (showroom performance.tsx) ── */
.perf {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.perf__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--hairline);
  background-color: var(--hairline);
}
@media (min-width: 1024px) {
  .perf__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.perf__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0.875rem 1rem 1rem;
  background-color: var(--surface);
  color: var(--fg);
  text-decoration: none;
}
.perf__tab:focus-visible { outline-offset: -2px; }
.perf__label { color: var(--fg-muted); font-weight: 500; }
.perf__tab[aria-current="true"] .perf__label { color: var(--fg); }
.perf__value { margin-top: 0.375rem; }
.perf__sub { max-width: 100%; margin-top: 0.25rem; overflow: hidden; color: var(--fg-muted); text-overflow: ellipsis; white-space: nowrap; }
.perf__tab[aria-current="true"]::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--brand-primary);
}
.perf__body { padding: 1rem 1.25rem 0.75rem; }
.perf__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.perf__note { flex: 1 1 16rem; margin: 0; color: var(--fg-muted); }
@media (min-width: 640px) {
  .perf__tab { padding-inline: 1.25rem; }
  .perf__tab[aria-current="true"]::after { right: 1.25rem; left: 1.25rem; }
  .perf__body { padding-inline: 1.5rem; }
}

/* ── Reports (reports.php): grouping switch, sort headers, linked figures, totals row ── */
.reports-groupings { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.reports-groupings::-webkit-scrollbar { display: none; }
.perf--six .perf__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .perf--six .perf__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .perf--six .perf__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.table__sort:hover,
.table th[aria-sort] { color: var(--fg); }
.table__sort:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 0.25rem; }
.table__sort-icon.is-ascending { transform: rotate(180deg); }
.table tfoot td {
  border-top: 1px solid var(--hairline);
  background-color: var(--surface-subtle);
  font-weight: 600;
}
.stack-list__row--total { background-color: var(--surface-subtle); font-weight: 600; }
.report-cell { color: var(--fg); font-variant-numeric: tabular-nums; text-decoration: none; }
a.report-cell { color: var(--brand-strong); }
a.report-cell:hover { text-decoration: underline; }
.report-cell.is-muted { color: var(--fg-muted); }
.report-cell__sub { display: block; color: var(--fg-muted); font-size: 0.75rem; font-weight: 400; }
.report-cell__name { color: inherit; text-decoration: none; }
.report-cell__name:hover { text-decoration: underline; }
.reports-table { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.reports-table > h2 { font-family: var(--font-display); font-weight: 700; }
.reports-notes { color: var(--fg-muted); }
.reports-notes summary { cursor: pointer; color: var(--fg); font-weight: 500; }
.reports-notes ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.reports-notes li + li { margin-top: 0.375rem; }

/* ── Financial reports (finance-report.php, Admin only) ── */
.finance-basis { color: var(--fg-muted); white-space: nowrap; }
.finance-na { color: var(--fg-muted); white-space: normal; }
.finance-note { margin: 0; color: var(--fg-muted); }

/* ── Report exports (app/exports.php): the Export button's form sits inline in a header ── */
.export-form { display: inline-flex; margin: 0; }

/* ── Charts (app/charts.php): PHP-rendered SVG, fixed heights, chart tokens only ── */
.chart-bars { margin: 0; }
.chart-bars__plot { position: relative; padding-top: 1.25rem; }
.chart-bars__max { position: absolute; top: 0; left: 0; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.chart-bars svg { display: block; width: 100%; height: 12.5rem; overflow: visible; }
@media (min-width: 768px) {
  .chart-bars svg { height: 15rem; }
}
.chart-bars__grid,
.chart-bars__base { stroke-width: 1; }
.chart-bars__grid { stroke: var(--hairline); stroke-dasharray: 3 3; }
.chart-bars__base { stroke: var(--control); }
.chart-bars__bar { fill: var(--chart-1); }
.chart-bars__zero { fill: var(--control); }
.chart-bars a:hover .chart-bars__bar,
.chart-bars a:focus-visible .chart-bars__bar { fill: var(--chart-2); }
.chart-bars a:focus-visible { outline: none; }
.chart-bars__axis {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
  color: var(--fg-muted);
}
.chart-stack { padding: 1rem; }
.chart-stack__bar { display: block; width: 100%; height: 0.75rem; border-radius: 6px; }
.chart-stack__part--1 { fill: var(--chart-1); background-color: var(--chart-1); }
.chart-stack__part--2 { fill: var(--chart-4); background-color: var(--chart-4); }
.chart-stack__part--3 { fill: var(--chart-5); background-color: var(--chart-5); }
.chart-stack__part--4 { fill: var(--chart-6); background-color: var(--chart-6); }
.chart-stack__part--5 { fill: var(--chart-3); background-color: var(--chart-3); }
.chart-stack__part--6 { fill: var(--chart-2); background-color: var(--chart-2); }
.chart-stack a:hover rect { opacity: 0.8; }
.chart-stack__legend { display: grid; gap: 0.125rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.chart-stack__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
}
.chart-stack__swatch { flex-shrink: 0; width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.chart-stack__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-stack__value { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.chart-stack__detail { color: var(--fg-muted); }

/* ── Chat (visual only): a messenger layout in one frame ── */
.app__main--fill {
  display: flex;
  flex-direction: column;
}
.chat {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  min-height: 32rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.chat__list {
  display: none;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--hairline);
}
.chat__thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.chat__band {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
.chat__band-title {
  flex: 1;
  min-width: 0;
  color: var(--fg);
}
.chat__notice { padding: 1rem 1rem 0; }
.chat__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
}
.chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--hairline);
}
.chat__composer .field-wrap {
  flex: 1;
  min-width: 0;
}
.chat__composer .icon-btn { margin-bottom: 0.25rem; }
@media (min-width: 768px) {
  .app__main--fill { height: 100vh; height: 100dvh; }
}
@media (min-width: 1024px) {
  .chat { grid-template-columns: 20rem minmax(0, 1fr); }
  .chat__list { display: flex; }
}

.field__optional {
  color: var(--fg-subtle);
  font-weight: 400;
}

/* ── The list grammar (settings/kit.tsx): a framed group, a band over its rows ── */
.stack-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 72rem;
}
.flash {
  max-width: 72rem;
  margin-bottom: 1.25rem;
}
.stack-groups:has(> .toolbar) { max-width: none; }
.group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.group__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  background-color: var(--surface-subtle);
}
.group__icon { color: var(--fg-muted); }
.group__title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.group__count {
  color: var(--fg-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.group__action {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  margin-left: auto;
}
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rows > li + li { border-top: 1px solid var(--hairline); }
.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
}
.row__body {
  flex: 1;
  min-width: 0;
}
.row--muted .row__body { opacity: 0.6; }
.row__name {
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.row__name .badge { margin-left: 0.25rem; vertical-align: middle; }
.row__you {
  color: var(--fg-muted);
  font-weight: 400;
}
.row__detail {
  margin-top: 0.0625rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.row__controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}
.row-glyph {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: var(--canvas);
  color: var(--fg-muted);
}
.empty-row {
  padding: 1.5rem 1.25rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
  text-align: center;
}
.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
}
.setting-row__label {
  flex: 1 1 10rem;
  min-width: 0;
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 500;
}
.setting-row__control {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin-left: auto;
}
.setting-row__control form { margin: 0; }
.setting-row__control > * { min-width: 0; }
.setting-row__label,
.setting-row__value { overflow-wrap: anywhere; }
.setting-row__note,
.setting-row__value {
  color: var(--fg-muted);
  font-size: 0.8125rem;
}
.setting-row__value { color: var(--fg); }

/* A row's control as a glyph (IconAction): 32 px circle, 16 px glyph. */
.icon-action {
  position: relative;
  isolation: isolate;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 150ms var(--ease-out);
}
.icon-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .icon-action:hover::before { opacity: 0.08; }
  .icon-action--quiet:hover { color: var(--fg); }
}
.icon-action:focus-visible::before,
.icon-action:active::before { opacity: 0.1; }
.icon-action:disabled { cursor: not-allowed; opacity: 0.4; }
.icon-action--quiet { color: var(--fg-muted); }
.icon-action--danger { color: var(--danger); }
.icon-action--brand { color: var(--brand-strong); }

/* Adding (AddSquare): a + in a brand-filled circle. */
.add-square {
  position: relative;
  isolation: isolate;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: var(--brand-solid);
  color: var(--brand-on-solid);
  cursor: pointer;
  touch-action: manipulation;
}
.add-square::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .add-square:hover::before { opacity: 0.08; }
}
.add-square:focus-visible::before,
.add-square:active::before { opacity: 0.1; }

/* ── Forms: sections on a six-column grid (form.tsx FormSection) ── */
.form-card { padding: 1.5rem; }
@media (min-width: 640px) {
  .form-card { padding: 2rem; }
}
.form-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.form-section + .form-section { margin-top: 2rem; }
.form-section__title {
  float: left;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
  color: var(--fg-muted);
}
.form-section__grid {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 0.75rem;
}
@media (min-width: 640px) {
  .form-section__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .form-section__grid > * { grid-column: 1 / -1; }
  .form-section__grid > .span-3 { grid-column: span 3; }
  .form-section__grid > .span-2 { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .form-section__grid > .span-2 { grid-column: span 2; }
}
.form-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 2rem;
}
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dialog__note {
  margin-top: 1rem;
  color: var(--fg-muted);
}

/* Select field (text-field.tsx SelectField): the label always floats; the chevron is the
   base select style. */
.field__select {
  padding-right: 2.25rem;
  cursor: pointer;
}
.field--float .field__label { transform: translateY(-9px) scale(0.857); }
.field--float .field__outline legend { max-width: 100%; }
.field__select:focus ~ .field__label { color: var(--fg); }

/* Chip group (text-field.tsx ChipGroup): real radios/checkboxes drawn as 32 px chips. */
.chip-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.chip-group__label {
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.chip-group__label.is-invalid { color: var(--danger); }
.chip-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip { position: relative; }
.chip__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0.5rem;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}
.chip__face {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--control);
  border-radius: 0.5rem;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 500;
  user-select: none;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
@media (pointer: coarse) {
  .chip__face { height: 2.25rem; }
}
.chip__face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip__input:hover + .chip__face::before { opacity: 0.08; }
}
.chip__check { display: none; }
.chip__input:checked + .chip__face {
  padding-left: 0.5rem;
  border-color: transparent;
  background-color: var(--brand-tint);
  color: var(--brand-strong);
}
.chip__input:checked + .chip__face .chip__check { display: block; }
.chip__input:focus-visible + .chip__face {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.chip-group__error { padding: 0; }

/* ── Toolbar, search and filters (filters.tsx, input.tsx SearchInput): one line above a list.
      Filter chips 32 px; the search pill and buttons 36 px; one step taller on touch. ── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.toolbar__spacer {
  flex: 1;
  min-width: 0;
}
@media (max-width: 639.98px) {
  .toolbar .search-pill { flex-basis: 100%; max-width: none; }
}
@media (min-width: 640px) {
  .toolbar__spacer ~ .filter .filter__menu { right: 0; left: auto; transform-origin: top right; }
}

.search-pill {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 20rem;
  margin: 0;
}
.search-pill__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  color: var(--fg-subtle);
  transform: translateY(-50%);
  pointer-events: none;
}
.search-pill__input {
  width: 100%;
  height: 2.25rem;
  padding: 0 2.25rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: var(--surface-sunken);
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.search-pill__input::placeholder { color: var(--fg-muted); }
.search-pill__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-pill__input:focus {
  border-color: var(--ink);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
@media (pointer: coarse) {
  .search-pill__input { height: 2.5rem; }
}
.search-pill__clear {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  color: var(--fg-muted);
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .search-pill__clear:hover { color: var(--fg); }
}
.search-pill__kbd {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  display: none;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border: 1px solid var(--control);
  border-radius: 0.375rem;
  background-color: var(--surface);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .search-pill__kbd { display: grid; }
}

/* A filter chip (FilterMenu trigger): outlined while off; on, tinted with a check and an ×. */
.filter {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
.filter__details { min-width: 0; }
@media (max-width: 639.98px) {
  .toolbar { position: relative; }
  .toolbar .filter { position: static; }
  .toolbar .filter__menu { right: 0; width: auto; max-width: none; }
}
.filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--control);
  border-radius: 0.5rem;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.filter__chip::-webkit-details-marker { display: none; }
.filter__chip:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .filter__chip { height: 2.25rem; }
}
.filter__icon,
.filter__chevron {
  flex-shrink: 0;
  color: var(--fg-muted);
}
.filter__chevron {
  margin-right: -0.25rem;
  transition: transform 150ms var(--ease-out);
}
.filter__details[open] .filter__chevron { transform: rotate(180deg); }
.filter__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter__colon { opacity: 0.6; }
.filter__value { font-weight: 600; }
.filter.is-on .filter__chip {
  padding-right: 2rem;
  padding-left: 0.5rem;
  border-color: transparent;
  background-color: var(--brand-tint);
  color: var(--brand-strong);
}
.filter__clear {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  color: var(--brand-strong);
  transform: translateY(-50%);
}

/* The filter's list (Popover): 18 rem, 12 px corners, floats over the page without blocking it. */
.filter__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1000;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  padding: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  transform-origin: top left;
  animation: pop-in 160ms var(--ease-out) both;
}
.filter__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  color: var(--fg);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .filter__row:hover { background-color: var(--surface-sunken); }
}
.filter__row:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  background-color: var(--surface-sunken);
}
.filter__box {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--control);
  border-radius: 0.125rem;
  background-color: var(--surface);
  color: var(--ink-fg);
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.filter__row[aria-current="true"] .filter__box {
  border-color: var(--ink);
  background-color: var(--ink);
}
.filter__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter__count {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.filter__count.is-zero { color: var(--fg-subtle); }
.filter__all-check {
  flex-shrink: 0;
  color: var(--fg);
}
.filter__sep {
  height: 1px;
  margin: 0.25rem 0.5rem;
  background-color: var(--hairline);
}

/* A long filter list scrolls inside its popover; a typed range sits under the quick ranges. */
.filter__menu {
  max-height: min(26rem, 70vh);
  overflow-y: auto;
}
.filter__form {
  display: grid;
  gap: 0.75rem;
  padding: 0.5rem;
}
.filter__form .btn { justify-self: end; }

/* A switch between views of one thing (Segmented): outlined pill, the current view tinted. */
.segmented {
  display: inline-flex;
  flex-shrink: 0;
  max-width: 100%;
  height: 2.25rem;
  border: 1px solid var(--control);
  border-radius: 9999px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.segmented__item {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  white-space: nowrap;
  gap: 0.375rem;
  padding: 0 0.875rem;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.segmented__item + .segmented__item { border-left: 1px solid var(--control); }
.segmented__item[aria-current="page"] {
  background-color: var(--brand-tint);
  color: var(--brand-strong);
}
.segmented__item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}
@media (pointer: coarse) {
  .segmented { height: 2.5rem; }
}

/* The pipeline board: stage groups stacked on a phone, side by side from 1024 px (scrolling
   sideways when there are more than fit). Each stage is a list group; each row one application. */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.board > .group { min-width: 0; }
@media (min-width: 1024px) {
  .board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
  }
  .board > .group { scroll-snap-align: start;
  }
}
.board__more {
  display: block;
  padding: 0.625rem 1.25rem;
  color: var(--brand-strong);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .board__more:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* A row control that posts (Create draft): the form takes no room of its own. */
.row__form {
  display: inline-flex;
  margin: 0;
}

/* The end of a filtered line (FilterSummary). */
.filter-summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding-left: 0.25rem;
  font-size: 0.875rem;
}
.filter-summary__count {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.filter-summary__dot {
  padding: 0 0.25rem;
  color: var(--fg-subtle);
}
.filter-summary__clear {
  border-radius: 0.125rem;
  color: var(--fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--control);
  text-underline-offset: 4px;
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .filter-summary__clear:hover { color: var(--brand-strong); }
}

/* A form whose fields are all read-only together (an archived record). */
.form-lock {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.list-note {
  margin: 0.75rem 0 0;
  color: var(--fg-muted);
  font-size: 0.8125rem;
}

/* An unknown requirement is said, quietly: never blank, never read as zero. */
.setting-row__value.is-unknown { color: var(--fg-muted); }

/* A link to another website: brand text, the external glyph, underline on hover. */
.external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  border-radius: 0.125rem;
  color: var(--brand-strong);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.external-link > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .external-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Read-only text in a list or panel (an offer's written conditions, a carrier's description). */
.detail-text { padding: 0.75rem 1.25rem; }
.detail-text__label {
  margin: 0 0 0.25rem;
  color: var(--fg-muted);
}
.detail-text__body,
.prose-block {
  margin: 0;
  color: var(--fg);
  font-size: 0.875rem;
  line-height: 1.375rem;
  overflow-wrap: anywhere;
}
.prose-block { padding: 1rem 1.25rem; }
.detail-text__body.is-unknown { color: var(--fg-muted); }

/* The one committing button of a form keeps the last place, whatever comes before it in markup. */
.form-card__actions .is-last { order: 1; }

/* Paging under a long list: previous, where you are, next. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.pager__status {
  color: var(--fg-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* A file field in the outlined style: the browser's chooser as a quiet pill inside it. */
.field__file {
  height: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.field__file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--control);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.field-hint {
  margin: 0.375rem 0 0;
  padding: 0 0.75rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Numbered steps and a block of text to copy exactly (the Admin's document storage page). */
.steps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.steps li + li { margin-top: 0.5rem; }
.code-block {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
  background-color: var(--surface-sunken);
  color: var(--fg);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  white-space: pre;
  user-select: all;
}

/* Progress of a job done in steps (the driver import). */
.progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin: 0.75rem 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background-color: var(--surface-sunken);
  color: var(--ink);
  appearance: none;
}
.progress::-webkit-progress-bar { background-color: var(--surface-sunken); }
.progress::-webkit-progress-value { border-radius: 999px; background-color: var(--ink); }
.progress::-moz-progress-bar { border-radius: 999px; background-color: var(--ink); }

/* A select as a row's control (matching an import column to a field). */
.setting-row__control .field-wrap { min-width: min(16rem, 100%); }

/* ── The calendar (calendar.php): the period's name and its navigation, then a month grid of
      whole weeks or the agenda (list groups by day). An entry's type is its colour; scheduled
      or due entries are outlined, completed ones filled with a check, overdue tasks red. ── */
.stack-groups--wide { max-width: 80rem; }
.cal-title {
  margin: 0 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
}
.cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.cal {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal__weekdays {
  border-bottom: 1px solid var(--hairline);
  background-color: var(--surface-subtle);
}
.cal__weekdays span {
  padding: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
.cal__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal__day {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  min-height: 7rem;
  padding: 0.375rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cal__day:nth-child(7n) { border-right: 0; }
.cal__day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal__day.is-other { background-color: var(--surface-subtle); }
.cal__day.is-other .cal__date { color: var(--fg-subtle); }
.cal__date {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out);
}
.cal__day.is-today .cal__date {
  background-color: var(--brand-solid);
  color: var(--brand-on-solid);
}
.cal__date:focus-visible,
.cal-event:focus-visible,
.cal__more:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .cal__day:not(.is-today) .cal__date:hover { background-color: var(--surface-sunken); }
  .cal-event:hover { filter: brightness(0.96); }
  .cal__more:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.cal__events {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-event {
  --cal-tone: var(--status-graphite);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.125rem 0.375rem;
  border: 1px solid color-mix(in srgb, var(--cal-tone) 55%, transparent);
  border-radius: 0.375rem;
  background-color: var(--surface);
  color: var(--fg);
  font-size: 0.6875rem;
  line-height: 1rem;
  text-decoration: none;
}
.cal-event.is-done {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--cal-tone) 16%, var(--surface));
}
.cal-event.is-overdue { --cal-tone: var(--status-red); }
.cal-event--drug_test, .cal-dot--drug_test { --cal-tone: var(--status-blue); }
.cal-event--orientation, .cal-dot--orientation { --cal-tone: var(--status-teal); }
.cal-event--travel, .cal-dot--travel { --cal-tone: var(--status-amber); }
.cal-event--start, .cal-dot--start { --cal-tone: var(--status-green); }
.cal-event--callback, .cal-dot--callback { --cal-tone: var(--status-plum); }
.cal-event__mark {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--cal-tone) 80%, var(--fg));
}
.cal-event__time {
  flex-shrink: 0;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.cal-event__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event.is-done.cal-event--task .cal-event__name {
  color: var(--fg-muted);
  text-decoration: line-through;
}
.cal__more {
  display: inline-block;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  color: var(--brand-strong);
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
}
.cal__dots { display: none; }
.cal-dot {
  --cal-tone: var(--status-graphite);
  width: 0.375rem;
  height: 0.375rem;
  border: 1px solid var(--cal-tone);
  border-radius: 9999px;
}
.cal-dot.is-done { background-color: var(--cal-tone); }
.cal-dot.is-overdue { --cal-tone: var(--status-red); }

/* On a phone the grid keeps its seven columns: each day shows its number and coloured dots,
   and the number opens that day in the agenda. */
@media (max-width: 639px) {
  .cal-title { flex-basis: 100%; }
  .cal__weekdays span { padding: 0.375rem 0; }
  .cal__day {
    align-items: center;
    min-height: 3.25rem;
    padding: 0.25rem 0;
  }
  .cal__date { align-self: center; width: 2.25rem; height: 2.25rem; }
  .cal__events { display: none; }
  .cal__dots {
    display: flex;
    gap: 0.125rem;
  }
}

/* Unread notifications: a count at the end of the nav link (on the glyph when the rail is
   collapsed) and a dot on the phone's menu button. */
.nav-link .count-badge {
  flex-shrink: 0;
  margin-left: auto;
  background-color: var(--sidebar-badge);
  color: var(--sidebar-on-badge);
}
.app--collapsed .rail .nav-link .count-badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 0.625rem;
}
.topbar__menu { position: relative; }
.topbar__dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--sidebar-badge);
}

/* ── Phones and touch (docs/DESIGN.md §3.1): 16 px text in every field, so focusing one never
   zooms the page; controls at least 40–44 px tall. ── */
@media (max-width: 767.98px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select,
  textarea { font-size: 1rem; }
  .segmented { height: 2.75rem; }
  .filter__chip { height: 2.5rem; }
  .nav-link--drawer { height: 3rem; }
}