/* 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 and phone 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;

  /* 3c. The app bar (V2): the brand red across the top, and the gutter around the frame. */
  --appbar-bg: #e22515;
  --appbar-fg: #ffffff;
  --appbar-hover: rgb(255 255 255 / 0.14);

  /* 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;
  /* Series compared on one chart (My Day's four figures): a fixed order, checked with the dataviz
     validator (lightness, chroma, colour-vision and normal-vision separation); the two lighter
     ones are always labelled too (the totals, the legend, the card). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;

  /* 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 app bar at every width; full-height screens subtract 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, .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,
.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, §3.6): the primary action, frames, controls, the
     panes and the gutter between them, and the readable width a full-page form keeps (the
     content itself is full width). */
  --action: #d21f10;
  --on-action: #ffffff;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pane: 16px;
  --shadow-card: 0 1px 2px 0 rgb(37 39 36 / 0.04);
  --frame-gutter: 0.5rem;
  --form-max: 72rem;
}

/* ── 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); }
}
@keyframes slide-in-right {
  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), V2 compact: only on a record or sub-page, whose name the
   navigation does not show; the record's name in 20–22 px, the eyebrow one small line over it,
   actions on the same row. Pages the navigation names use page_title() (no visible header). ── */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 1rem;
}
.page-header__text { min-width: 0; }
.page-header__eyebrow {
  margin-bottom: 0.125rem;
  color: var(--fg-muted);
}
.page-header__title {
  color: var(--fg);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .page-header__title { font-size: 1.375rem; }
}
.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,
.sheet::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,
  .sheet::backdrop { backdrop-filter: none; }
}

/* ── The overlay panel (assets/js/overlay.js, docs/DESIGN.md §3.5): a page's body over the
      dimmed page. A right-side panel (44 rem; the full width on a phone) or, with
      .sheet--modal, a centred modal for larger forms. Only its body scrolls; the page behind
      keeps its place (html:has(dialog[open]) locks it). ── */
.sheet {
  flex-direction: column;
  width: min(44rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background-color: var(--canvas);
  color: var(--fg);
  box-shadow: var(--shadow-overlay);
}
.sheet[open] {
  display: flex;
  animation: slide-in-right 320ms var(--ease-drawer) both;
}
.sheet__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0.75rem 0;
}
.sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  outline: none;
}
/* Back to what the panel showed before (an application, after opening its driver). */
.sheet__back { margin-right: auto; }
.sheet__back[hidden] { display: none; }
/* In the panel, the X closes it: a page's link back to its list is not needed. */
.sheet [data-back] { display: none; }
.sheet .stack-groups:has(> .form-card) { max-width: none; }
.sheet--modal {
  width: min(56rem, calc(100% - 2rem));
  height: auto;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  border-radius: var(--radius-card);
}
.sheet--modal[open] { animation: dialog-in 220ms var(--ease-out) both; }
@media (max-width: 639.98px) {
  .sheet,
  .sheet--modal { width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; }
}
.sheet__state {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
}
.sheet__skeleton {
  display: block;
  height: 1rem;
  border-radius: var(--radius-control);
  background-color: var(--skeleton-base);
}
.sheet__skeleton:first-child { width: 50%; height: 1.5rem; }
.sheet__skeleton--short { width: 70%; }
.sheet__state-text { color: var(--fg-muted); font-size: 0.875rem; }
/* While a form in the panel is being sent, its button waits (overlay.js locks it). */
.sheet [aria-busy="true"] { cursor: progress; }
/* From 640 px the panel is one white pane (docs/DESIGN.md §3.6), inset by the gutter: the page it
   shows runs edge to edge inside it, its blocks without frames, a hairline between them. */
@media (min-width: 640px) {
  .sheet {
    height: calc(100% - 2 * var(--frame-gutter));
    margin: var(--frame-gutter) var(--frame-gutter) var(--frame-gutter) auto;
    border-radius: var(--radius-pane);
    background-color: var(--surface);
  }
  .sheet--modal { height: auto; margin: auto; }
  .sheet__body { padding: 0 0 calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
  .sheet__body > .sheet__state { padding-inline: 1.25rem; }
  .sheet-fragment > .page-header {
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--hairline);
  }
  .sheet-fragment > .flash { margin: 0; padding: 0.75rem 1.25rem 0; }
  .sheet-fragment > .stack-groups { gap: 0; }
  .sheet-fragment > .stack-groups > * + * { border-top: 1px solid var(--hairline); }
  .sheet-fragment :is(.group, .card, .panel) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sheet-fragment .form-card { padding: 1.25rem; }
  .sheet-fragment > .stack-groups > .toolbar,
  .sheet-fragment :is(.pager, .list-note) { margin: 0; padding: 0.75rem 1.25rem; }
}
/* Phones: the panel's header and actions stay compact. */
@media (max-width: 639.98px) {
  .sheet__bar { padding-right: 0.5rem; }
  .sheet__body { padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
  .sheet .page-header { gap: 0.25rem 0.75rem; padding-bottom: 0.75rem; }
  .sheet .page-header__title { font-size: 1.125rem; }
  .sheet .form-card { padding: 1rem; }
  .sheet .form-card__actions { margin-top: 1.25rem; }
  .sheet .form-card__actions .btn { flex: 1 1 auto; }
}

/* The snackbar (docs/DESIGN.md §6): one Graphite message at the bottom centre, after a change made in
   the panel; the panel has its own (the page behind a modal panel is inert). */
.snackbar {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 60;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  border-radius: var(--radius-control);
  background-color: var(--cdl-graphite);
  color: var(--cdl-chalk);
  font-size: 0.875rem;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.5rem);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.snackbar:empty { visibility: hidden; }
.snackbar.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* A row whose primary link opens in the panel: the whole row is its target (overlay.js). */
.row:has(> .row__controls [data-row-primary]) { cursor: pointer; transition: background-color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .row:has(> .row__controls [data-row-primary]):hover { background-color: var(--surface-sunken); }
}
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 (docs/DESIGN.md §3.1, V2 frame) ──
   The app bar runs across the top at every width. Under it, the frame: from 768 px the page is
   exactly the viewport, the frame sits in the bar's red with a small gutter and rounded corners,
   and only the content (and the rail's own list) scrolls inside it. Below 768 px the page
   scrolls as a document under the sticky bar, and the navigation is a modal drawer. */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--canvas);
}
.app__frame {
  display: flex;
  flex: 1;
  min-width: 0;
}
.app__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.app__main {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 1rem 1rem 1.5rem;
  overflow-wrap: break-word;
  outline: none;
}

/* The app bar: menu button, logo, then the bell and the account menu at the right. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  height: var(--app-topbar);
  padding: env(safe-area-inset-top, 0px) 0.75rem 0;
  /* Phone (sticky bar over the scrolling page): the shell's gradient within the bar itself. */
  background-color: #1a0a08;
  background-image: radial-gradient(ellipse 70% 260% at 50% 0%, var(--appbar-bg) 0%, #8f150c 45%, #2a0c09 80%, #140807 100%);
  color: var(--appbar-fg);
}
.appbar__btn,
.appbar__bell {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out);
}
.appbar__toggle { display: none; }
.appbar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-control);
  color: inherit;
}
.appbar__logo { display: none; width: 180px; }
.appbar__symbol { width: 2.75rem; }
.appbar__account {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin-left: auto;
}
.appbar__bell[aria-current="page"] { background-color: var(--appbar-hover); }
.appbar__bell .count-badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  background-color: var(--appbar-fg);
  color: var(--appbar-bg);
  font-size: 0.625rem;
}
@media (hover: hover) and (pointer: fine) {
  .appbar__btn:hover,
  .appbar__bell:hover,
  .appbar .user-menu__trigger:hover { background-color: var(--appbar-hover); }
}
.appbar__btn:focus-visible,
.appbar__bell:focus-visible,
.appbar__brand:focus-visible,
.appbar .user-menu__trigger:focus-visible { outline: 2px solid var(--appbar-fg); outline-offset: 2px; }
@media (min-width: 640px) {
  .appbar__logo { display: block; }
  .appbar__symbol { display: none; }
}

/* The rail: the Admin / Recruiter switch, the agency, the navigation (scrolling on its own). */
.rail {
  z-index: 20;
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  width: 264px;
  padding-top: 0.75rem;
  transition: width 220ms var(--ease-out);
}
.app--collapsed .rail { width: 68px; }
.rail__agency {
  flex-shrink: 0;
  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 0.75rem;
}
/* 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,
  .nav-drawer__close: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); }

/* 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); }
}
.nav-context__item:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 1px; }

/* 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 must stay the same. */
.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); }
.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; }
@media (min-width: 768px) and (max-width: 1279.98px) {
  .rail { width: 68px; }
  .rail .rail__agency { display: none; }
  .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 .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 .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;
  }
}

/* The account menu (user-menu.tsx), at the right of the app bar: the avatar, the name from
   1024 px, a panel that drops down under the bar. */
a.user-menu__item { text-decoration: none; }
.user-menu__item[aria-current="page"] { background-color: var(--surface-sunken); font-weight: 600; }
.user-menu { position: relative; min-width: 0; }
.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0.25rem;
  border-radius: 9999px;
  color: var(--appbar-fg);
  font-size: 0.875rem;
  list-style: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out);
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.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;
}
.appbar .avatar {
  background-color: var(--appbar-fg);
  color: var(--appbar-bg);
}
.user-menu__text {
  display: none;
  min-width: 0;
  max-width: 12rem;
  text-align: left;
}
.user-menu__name {
  display: block;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu__agency { display: none; }
.user-menu__chevron { display: none; transition: transform 150ms var(--ease-out); }
.user-menu[open] .user-menu__chevron { transform: rotate(180deg); }
@media (min-width: 1024px) {
  .user-menu__trigger { padding-right: 0.625rem; }
  .user-menu__text,
  .user-menu__chevron { display: block; }
}
.user-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  width: 15rem;
  max-width: calc(100vw - 1.5rem);
  margin-top: 0.5rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  transform-origin: top right;
  animation: pop-in 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): the navigation as a modal drawer from the left, over the scrim. */
.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;
  flex-shrink: 0;
  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 0.75rem;
}

@media (min-width: 640px) {
  .app__main { padding-right: 1.25rem; padding-left: 1.25rem; }
}
@media (min-width: 768px) {
  .app {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    /* One gradient behind the bar and the frame gutters: brand red at the top centre, through
       dark red to near-black at the sides and bottom. */
    background-color: #120706;
    background-image: radial-gradient(ellipse 85% 75% at 50% 0%, var(--appbar-bg) 0%, #a3180d 22%, #5a0f09 52%, #1f0907 82%, #120706 100%);
  }
  .appbar { background: transparent; }
  .appbar__menu { display: none; }
  /* Two panes on the background (docs/DESIGN.md §3.6): the rail and the content, a gutter apart
     and a gutter from the window's edges. The rail's faint light edge keeps it apart from the
     background's near-black. */
  .app__frame {
    gap: var(--frame-gutter);
    min-height: 0;
    margin: 0 var(--frame-gutter) var(--frame-gutter);
  }
  .rail {
    display: flex;
    border-radius: var(--radius-pane);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  }
  .app__body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: var(--radius-pane);
    background-color: var(--canvas);
  }
  .app__main { padding: 1.25rem 1.5rem 1.5rem; }
}
@media (min-width: 1280px) {
  .appbar__toggle { display: grid; }
  .app__main { padding: 1.5rem 1.75rem 1.75rem; }
}
/* The pane pages (docs/DESIGN.md §3.6), after the content padding above so they replace it. */
@media (min-width: 768px) {
  /* Blocks, the default page: the content pane steps back and every block is a pane of its own,
     a gutter apart. The top row (the page header, or a toolbar that opens the page) is a white
     strip; text that would sit on the background gets a pane too. Without :has() the blocks stay
     on the Chalk pane. */
  .app__body:has(> .app__main--panes) { background-color: transparent; }
  .app__main--panes {
    display: flex;
    flex-direction: column;
    gap: var(--frame-gutter);
    padding: 0;
  }
  .app__main--panes > :is(.page-header, .flash) { margin: 0; }
  .app__main--panes :is(.stack-groups, .dash, .dash-board, .dash-board__col, .dash-pair, .reports-charts, .finance-currency, .board) {
    gap: var(--frame-gutter);
  }
  .app__main--panes > .page-header,
  .app__main--panes > :is(.stack-groups, .dash) > .toolbar:first-child,
  .app__main--panes .stack-groups > .list-note,
  .app__main--panes .reports-notes {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-pane);
    background-color: var(--surface);
  }
  .app__main--panes > .page-header,
  .app__main--panes .stack-groups > .list-note,
  .app__main--panes .reports-notes { padding: 0.75rem 1.25rem; }
  .app__main--panes :is(.panel, .group, .card, .perf, .dash-summary, .reports-detail),
  .app__main--panes > :is(.callout, .flash > .callout),
  .app__main--panes .channels__result > .callout {
    border: 0;
    border-radius: var(--radius-pane);
    box-shadow: none;
  }
  /* A form keeps its readable measure inside a pane as wide as the others. */
  .app__main--panes .stack-groups:has(> .form-card) { max-width: none; }
  .app__main--panes .form-card > * { max-width: calc(var(--form-max) - 3rem); }

  /* A list page: the white content pane is the list's frame. The toolbar is its top row and stays
     at the top; the groups run edge to edge, a hairline between them. */
  .app__main--list {
    padding: 0;
    background-color: var(--surface);
  }
  .app__main--list > .flash { margin: 0; padding: 0.75rem 1.25rem 0; }
  .app__main--list > .stack-groups { gap: 0; }
  .app__main--list > .stack-groups > .toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    background-color: var(--surface);
  }
  .app__main--list :is(.group, .cal, .chat) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .app__main--list .group + .group,
  .app__main--list > .stack-groups > .group + .toolbar { border-top: 1px solid var(--hairline); }
  .app__main--list :is(.pager, .list-note) { margin: 0; padding: 0.75rem 1.25rem; }
}

/* ── Dashboard (docs/DESIGN.md §3.1): filters, summary figures, then bands of panels. A band is
   two stacks side by side, the work and what supports it: 3 : 2 from 1024 px, 2 : 1 once the
   narrow stack has about 22 rem (1440 px beside the expanded rail, 1280 px beside the compact
   one); one column on a phone. Each stack keeps its panels' own heights, so a short panel never
   leaves a hole beside a tall one, and the last panel of the shorter stack reaches down to the
   band's end, so every band ends on one line (an empty state centred in the room). ── */
.dash {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
/* The part the overlay panel reloads after a change: lays out as if it were not there. */
.dash__results,
.region-contents { display: contents; }
.dash-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.dash-board__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.dash-board__col > :last-child { flex-grow: 1; }
.dash-board__col > .panel:last-child > .panel__body:has(> .empty) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .dash { gap: 1.25rem; }
  .dash-board { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; }
  .dash-board__col { gap: 1.25rem; }
}
@media (min-width: 1440px) {
  .dash-board { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .app--collapsed .dash-board { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.dash-board.dash-board--single { grid-template-columns: minmax(0, 1fr); }

/* 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; }

/* Two panes side by side from 1024 px (the pipeline's two funnels), one column below. */
.dash-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .dash-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
/* A figure's line key: its colour in the activity chart. */
.perf__key {
  display: inline-block;
  width: 0.875rem;
  height: 3px;
  margin-right: 0.4rem;
  border-radius: 2px;
  vertical-align: middle;
}
.perf__key--1 { background-color: var(--series-1); }
.perf__key--2 { background-color: var(--series-2); }
.perf__key--3 { background-color: var(--series-3); }
.perf__key--4 { background-color: var(--series-4); }

/* The agenda: overdue, then today; the next days on the other tab. */
.agenda__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background-color: var(--surface-sunken);
}
.agenda__tabs a {
  padding: 0.3125rem 0.75rem;
  border-radius: 8px;
  color: var(--fg-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.agenda__tabs a[aria-current="true"] {
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px rgb(37 39 36 / 0.1);
}
.agenda__tabs a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.agenda__group,
.attention__group {
  margin: 0;
  padding: 0.875rem 1.25rem 0.375rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agenda__group.is-late { color: var(--danger); }
.attention__group { border-top: 1px solid var(--hairline); }
.agenda__more {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem 0.875rem;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.agenda__more .icon { color: var(--fg-muted); }
.agenda__empty { margin: 0; padding: 0.25rem 1.25rem 0.5rem; color: var(--fg-muted); }

/* The pipeline's funnels (app/charts.php chart_funnel()): the step's name, then its band. One
   hue that deepens toward the last step; the details in the card on hover and focus. */
.chart-funnel {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  row-gap: 3px;
  margin: 0;
  padding: 1.25rem;
}
.chart-funnel__name {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: 0.75rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
}
.chart-funnel__band {
  position: relative;
  display: grid;
  place-items: center;
  height: 3rem;
  color: var(--fg);
  text-decoration: none;
}
.chart-funnel__band svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-funnel__band polygon { transition: filter 150ms var(--ease-out); }
.chart-funnel__band--1 polygon { fill: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.chart-funnel__band--2 polygon { fill: color-mix(in srgb, var(--ink) 22%, var(--surface)); }
.chart-funnel__band--3 polygon { fill: color-mix(in srgb, var(--ink) 34%, var(--surface)); }
.chart-funnel__band--4 polygon { fill: color-mix(in srgb, var(--ink) 58%, var(--surface)); }
.chart-funnel__band--5 polygon { fill: color-mix(in srgb, var(--ink) 78%, var(--surface)); }
.chart-funnel__band--6 polygon { fill: var(--ink); }
.chart-funnel__band--4,
.chart-funnel__band--5,
.chart-funnel__band--6 { color: #fff; }
.chart-funnel__band.is-active polygon,
.chart-funnel__band:focus-visible polygon { filter: brightness(0.88); }
.chart-funnel__band:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; border-radius: 4px; }
.chart-funnel__value {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: 1;
}
.funnel-out {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin: 0 1.25rem;
  padding: 0.75rem 0 1rem;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: 0.8125rem;
}
.funnel-out a { color: var(--fg); text-decoration: none; }
.funnel-out a:hover { text-decoration: underline; }
.funnel-out b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* The activity chart (app/charts.php chart_lines()): the scale, the stretched plot and the totals
   share one height; the crosshair, dots and card come from assets/js/charts.js. */
.chart-lines {
  margin: 0;
  padding: 1.25rem 1.25rem 1rem 0.5rem;
  outline: 0;
}
.chart-lines:focus-visible .chart-lines__area { outline: 2px solid var(--brand-primary); outline-offset: 4px; border-radius: 4px; }
.chart-lines__plot { display: flex; align-items: stretch; }
.chart-lines__scale,
.chart-lines__ends,
.chart-lines__svg { display: block; flex-shrink: 0; height: 300px; overflow: visible; }
.chart-lines__scale { width: 40px; }
.chart-lines__ends { width: 44px; }
.chart-lines__area { position: relative; flex: 1 1 auto; min-width: 0; cursor: crosshair; touch-action: pan-y; }
.chart-lines__svg { width: 100%; }
.chart-lines__scale text { fill: var(--fg-subtle); font: 400 11px var(--brand-font); font-variant-numeric: tabular-nums; }
.chart-lines__end { fill: var(--fg); font: 600 12px var(--brand-font); font-variant-numeric: tabular-nums; }
.chart-lines__grid { stroke: var(--hairline); stroke-width: 1; }
.chart-lines__grid.is-base { stroke: var(--control); }
.chart-lines__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: opacity 150ms var(--ease-out); }
.chart-lines__line--1 { stroke: var(--series-1); }
.chart-lines__line--2 { stroke: var(--series-2); }
.chart-lines__line--3 { stroke: var(--series-3); }
.chart-lines__line--4 { stroke: var(--series-4); }
.chart-lines__line.is-off { display: none; }
.chart-lines[data-focus] .chart-lines__line:not(.is-focus) { opacity: 0.18; }
.chart-lines[data-focus] .chart-lines__line.is-focus { stroke-width: 3; }
.chart-lines__cross {
  position: absolute;
  top: 10px;
  bottom: 2px;
  width: 0;
  border-left: 1px dashed var(--fg-subtle);
  pointer-events: none;
}
.chart-lines__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  pointer-events: none;
}
.chart-lines__dot--1 { background-color: var(--series-1); }
.chart-lines__dot--2 { background-color: var(--series-2); }
.chart-lines__dot--3 { background-color: var(--series-3); }
.chart-lines__dot--4 { background-color: var(--series-4); }
.chart-lines__axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.375rem;
  padding: 0 44px 0 40px;
  color: var(--fg-subtle);
}
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.875rem;
  padding: 0 0.625rem;
  border: 1px solid var(--control);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--fg);
  font: 500 0.8125rem/1 var(--brand-font);
  cursor: pointer;
}
.chart-legend__item[aria-pressed="false"] { border-color: var(--hairline); color: var(--fg-subtle); }
.chart-legend__item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.chart-legend__key { width: 0.875rem; height: 3px; border-radius: 2px; }
.chart-legend__item[aria-pressed="false"] .chart-legend__key { opacity: 0.3; }
.chart-legend__item--1 .chart-legend__key { background-color: var(--series-1); }
.chart-legend__item--2 .chart-legend__key { background-color: var(--series-2); }
.chart-legend__item--3 .chart-legend__key { background-color: var(--series-3); }
.chart-legend__item--4 .chart-legend__key { background-color: var(--series-4); }
@media (hover: hover) and (pointer: fine) {
  .chart-legend__item:hover { border-color: var(--control-hover); }
}

/* One card for every chart's details, fixed to the window (assets/js/charts.js). Values lead. */
.chart-tip {
  position: fixed;
  z-index: 60;
  min-width: 11rem;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 24px rgb(37 39 36 / 0.16);
  font-size: 0.8125rem;
  pointer-events: none;
}
.chart-tip.is-pinned { pointer-events: auto; }
.chart-tip__title { margin: 0 0 0.375rem; color: var(--fg-muted); font-size: 0.75rem; font-weight: 600; }
.chart-tip__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.125rem 0;
}
.chart-tip__row b { min-width: 1.75rem; color: var(--fg); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.chart-tip__row span { flex: 1 1 auto; color: var(--fg-muted); }
.chart-tip__key { flex-shrink: 0; align-self: center; width: 0.75rem; height: 2px; border-radius: 2px; }
.chart-tip__key--1 { background-color: var(--series-1); }
.chart-tip__key--2 { background-color: var(--series-2); }
.chart-tip__key--3 { background-color: var(--series-3); }
.chart-tip__key--4 { background-color: var(--series-4); }
.chart-tip__link { flex-shrink: 0; color: var(--brand-strong); font-weight: 500; text-decoration: none; white-space: nowrap; }
.chart-tip__link:hover { text-decoration: underline; }
.chart-tip__hint { margin: 0.375rem 0 0; padding-top: 0.375rem; border-top: 1px solid var(--hairline); color: var(--fg-muted); font-size: 0.75rem; }

/* People: a zero stays quiet; on a phone each person is one line of five figures. */
.people .is-zero { color: var(--fg-subtle); }
.people :is(.table, .stack-list) a { color: inherit; text-decoration: none; }
.people :is(.table, .stack-list) a:hover { text-decoration: underline; }
.people .stack-list__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem 0.5rem; }
.people .stack-list__primary { grid-column: 1 / -1; margin-bottom: 0.125rem; font-weight: 500; }
.people .stack-list__item { display: flex; flex-direction: column; gap: 0.125rem; font-variant-numeric: tabular-nums; }
.people .stack-list__label { max-width: none; font-size: 0.6875rem; }

/* 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);
  /* A figure scrolls the chart in under the phone's sticky bar; beside the rail, to the pane's top. */
  scroll-margin-top: calc(var(--app-topbar) + 1rem);
}
@media (min-width: 768px) {
  .perf { scroll-margin-top: 0; }
}
.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): sort headers, linked figures, totals row ── */
.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; }
/* Reports charts: one column on a phone, two from 1024 px; the trend and the comparison span both. */
.reports-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}
.reports-charts > * { min-width: 0; }
@media (min-width: 1024px) {
  .reports-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .reports-charts__wide { grid-column: 1 / -1; }
}
.reports-chart__note { margin: 0; padding: 0 1rem 1rem; color: var(--fg-muted); }
.reports-chart .empty + .reports-chart__note { padding-top: 0.25rem; }
/* The exact figures: a disclosure under the charts, its table as before. */
.reports-detail {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
.reports-detail__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  list-style-position: inside;
}
.reports-detail__meta { color: var(--fg-muted); }
.reports-detail[open] > .reports-detail__summary { border-bottom: 1px solid var(--hairline); }
.reports-detail > .reports-table { padding: 0.75rem; }

/* Horizontal bars (charts.php chart_hbars): name and figure over the bar on a phone, one line
   (name · bar · figure) from 640 px. Bounded by their row count, never by the width. */
.chart-hbars { margin: 0; padding: 0.75rem 0.5rem 0.5rem; }
.chart-hbars__list { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.chart-hbars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name value" "bar bar";
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
}
.chart-hbars__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-hbars__value { grid-area: value; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.chart-hbars__detail { margin-left: 0.25rem; color: var(--fg-muted); font-weight: 400; }
.chart-hbars__track { grid-area: bar; display: block; width: 100%; height: 0.625rem; border-radius: 4px; overflow: hidden; }
.chart-hbars__rail { fill: var(--hairline); }
.chart-hbars__bar { fill: var(--chart-1); }
.chart-hbars a.chart-hbars__row:hover .chart-hbars__bar,
.chart-hbars a.chart-hbars__row:focus-visible .chart-hbars__bar { fill: var(--chart-2); }
@media (min-width: 640px) {
  .chart-hbars__row { grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) minmax(5.5rem, auto); grid-template-areas: "name bar value"; }
  .chart-hbars__value { text-align: right; }
}

/* Columns side by side (charts.php chart_columns) on the bar chart's frame, with a legend. */
.chart-columns { padding: 0.75rem 1rem 0.5rem; }
.chart-columns__bar--1 { fill: var(--chart-1); }
.chart-columns__bar--2 { fill: var(--chart-4); }
.chart-columns__bar--3 { fill: var(--chart-5); }
.chart-columns a:hover rect,
.chart-columns a:focus-visible rect { opacity: 0.8; }
.chart-columns a:focus-visible { outline: none; }
.chart-columns__legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.chart-columns__legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.chart-columns__swatch--1 { background-color: var(--chart-1); }
.chart-columns__swatch--2 { background-color: var(--chart-4); }
.chart-columns__swatch--3 { background-color: var(--chart-5); }
.chart-columns__total { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Financial reports: per currency, the figure tiles over the charts; the tables under "Exact figures". */
.finance-currency { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.finance-kpis .perf__tabs { border-bottom: 0; }
.finance-kpi { cursor: default; }
a.finance-kpi { cursor: pointer; }
.finance-kpi .perf__value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-kpi .is-unknown { color: var(--fg-muted); }
.finance-kpi__sub { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.finance-sections { display: flex; flex-direction: column; gap: 1.25rem; padding: 0.75rem; }
.reports-detail > .finance-sections > .reports-table { padding: 0; }
@media (min-width: 1024px) {
  .finance-currency { gap: 1.25rem; }
}

/* ── 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); }

/* ── The messenger frame (Team Chat, the Inbox): the list beside the thread 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; }
/* From 768 px the frame has the viewport's height: a full-height screen fills the content area
   exactly and scrolls inside its own panes. */
@media (min-width: 768px) {
  .app__main--fill { min-height: 0; }
}
@media (min-width: 1024px) {
  .chat { grid-template-columns: 20rem minmax(0, 1fr); }
  .chat__list { display: flex; }
  /* Side by side, the list's band and the thread's are one height: one line runs under both. */
  .chat__band { min-height: 4rem; }
}

.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: 1rem;
}
.flash { margin-bottom: 1rem; }
/* Lists, profiles and settings use the full width; a page built around a form keeps a readable
   width, the form and the groups under it aligned. */
.stack-groups:has(> .form-card) { max-width: var(--form-max); }
.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; }
}

/* Reading document photos (assets/js/document-scan.js): on driver intake the Scan document
   button and its status line over the first section, drawn only once the script runs; in a
   document dialog a status line under the file field. A field the scan filled is tinted until
   the person changes it. */
.doc-scan { display: none; }
.doc-scan-ready .doc-scan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
}
.doc-scan__status {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--fg-muted);
}
.doc-scan__status:empty { display: none; }
.doc-scan__status.is-success { color: var(--success); }
.doc-scan__status.is-warning { color: var(--warning); }
.doc-scan__status.is-danger { color: var(--danger); }
.field.is-scanned .field__input { background-color: var(--info-tint); }
.chip-group.is-scanned > .chip-group__label { color: var(--info); }
.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;
}
/* The filter part (ui.php toolbar_panel()): not a box from 768 px, the phone's filter line below. */
.toolbar__panel { display: contents; }
@media (min-width: 640px) {
  .toolbar__spacer ~ .filter .filter__menu,
  .toolbar__spacer ~ .toolbar__panel .filter .filter__menu { right: 0; left: auto; transform-origin: top right; }
}

/* The phone toolbar (toolbar(), docs/DESIGN.md §3.4). Below 768 px one row: [search] [Filters n]
   … [brand action] [More], then the period, a view's choice and view switches as one line that
   scrolls sideways (never a second line). "More actions" opens the other buttons and forms under
   them; it shows only when the toolbar holds something for it. Every rule needs :has(), so a
   browser without it keeps the wrapping toolbar. */
.toolbar__toggle { display: none; }
.toolbar__toggle[aria-expanded="true"] { background-color: var(--surface-sunken); }
@media (max-width: 767.98px) {
  .toolbar:has(> .toolbar__toggle) { position: relative; }
  .toolbar:has(> .toolbar__toggle) > .search-pill { flex: 1 1 6rem; min-width: 6rem; max-width: none; }
  .toolbar:has(> .toolbar__toggle) > .toolbar__spacer { display: none; }
  .toolbar:has(> :is(.btn:not(.btn--brand, .toolbar__toggle), form:not(.search-pill))) > .toolbar__toggle--more { display: inline-grid; }
  .toolbar:has(> .toolbar__toggle) > .btn--brand { margin-left: auto; }
  .toolbar > .toolbar__toggle--more { order: 1; }
  .toolbar:has(> .toolbar__toggle):not([data-open="more"]) > :is(.btn:not(.btn--brand, .toolbar__toggle), form:not(.search-pill)) { display: none; }
  .toolbar:has(> .toolbar__toggle) > :is(.btn:not(.btn--brand, .toolbar__toggle), form:not(.search-pill)) { order: 4; }
  .toolbar[data-open="more"]:not(:has(> .toolbar__panel))::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  /* The second line: the period and view switches side by side, scrolling sideways to the
     content's edges; a chip's list opens under the toolbar, so the line never clips it. */
  .toolbar > .toolbar__panel {
    display: flex;
    flex: 0 0 calc(100% + 2rem);
    order: 2;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0 -1rem;
    padding: 0.125rem 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }
  .toolbar > .toolbar__panel::-webkit-scrollbar { display: none; }
  .toolbar > .toolbar__panel > * { flex-shrink: 0; }
  .toolbar > .toolbar__panel > .toolbar__spacer { display: none; }
  .toolbar > .toolbar__panel .filter { position: static; }
  .toolbar > .toolbar__panel .filter__chip { white-space: nowrap; }
  .toolbar__toggle { min-height: 2.5rem; }
  .toolbar > .toolbar__toggle--more { width: 2.5rem; height: 2.5rem; }
}
/* Small phones: the brand action and Filters keep their icon (and the count); their names stay
   the accessible names. */
@media (max-width: 479.98px) {
  .toolbar:has(> .toolbar__toggle) { gap: 0.375rem; }
  .toolbar:has(> .toolbar__toggle) > .btn--brand { gap: 0.25rem; padding-right: 0.625rem; padding-left: 0.625rem; }
  .toolbar:has(> .toolbar__toggle) > .btn--brand > span,
  .toolbar > .filters .filter__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .toolbar > .filters .filter__chevron { display: none; }
}

.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; }
/* A period that always holds a value (date_range_filter() without a clear link): an outlined
   dropdown that names it, its preset strong and the dates muted; never the applied-filter tint. */
.filter__dates { color: var(--fg-muted); }
/* Applied: still the dropdown (icon, name, chevron), outlined in Graphite and saying what it
   holds; after a hairline, its own × clears it. Never a tinted tag: that read as locked. */
.filter.is-on .filter__chip {
  padding-right: 2.25rem;
  border-color: var(--fg);
}
.filter.is-on .filter__colon {
  color: var(--fg-muted);
  opacity: 1;
}
/* In the flow, pulled back into the chip's right padding: it stays on its chip on a phone too,
   where .filter is not positioned (its list anchors to the toolbar). */
.filter__clear {
  position: relative;
  display: grid;
  flex-shrink: 0;
  align-self: center;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
  margin-left: -1.75rem;
  border-radius: 9999px;
  color: var(--fg-muted);
}
.filter__clear:hover { color: var(--fg); }
.filter__clear::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: -0.1875rem;
  width: 1px;
  background-color: var(--hairline);
}

/* 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 period: the quick ranges beside the range calendar from 640 px, above it on a phone. */
.filter__menu--range { max-height: min(36rem, 85vh); }
.filter__presets {
  min-width: 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 640px) {
  .filter__menu--range {
    display: flex;
    align-items: stretch;
    width: 30rem;
  }
  .filter__menu--range .filter__presets {
    flex: 0 0 10.5rem;
    padding: 0 0.25rem 0 0;
    border-right: 1px solid var(--hairline);
    border-bottom: 0;
  }
  .filter__menu--range .filter__form { flex: 1; min-width: 0; }
}
.filter__form.has-calendar { gap: 0.5rem; }
.filter__form.has-calendar > .field-wrap { display: none; }
.filter__row-icon { flex-shrink: 0; color: var(--fg-muted); }

/* ── The Filters panel (ui.php filter_panel(), docs/DESIGN.md §2.2): one chip holds every filter
   of a page; its panel lists them as groups of chips, the chosen ones tinted with a check (as in
   a form), each applied at once. The result count and "Clear all" head it. ── */
.filters.is-on:not(.has-clear) .filter__chip { padding-right: 0.75rem; }
.filters__count {
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3125rem;
  font-size: 0.6875rem;
}
.filters__panel {
  display: flex;
  flex-direction: column;
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(38rem, 78vh);
  padding: 0;
  overflow: hidden;
}
.filters__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
.filters__title {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
}
.filters__head .filter-summary { margin-right: auto; padding-left: 0; color: var(--fg-muted); font-size: 0.8125rem; }
.filters__head:not(:has(.filter-summary)) .filters__title { margin-right: auto; }
.filters__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 150ms var(--ease-out);
}
.filters__panel.is-busy .filters__body { opacity: 0.55; pointer-events: none; }
.filter-group { padding: 0.875rem 1rem; }
.filter-group + .filter-group { border-top: 1px solid var(--hairline); }
.filter-group__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
  margin-bottom: 0.5rem;
}
.filter-group__icon { flex-shrink: 0; color: var(--fg-muted); }
.filter-group__title {
  margin: 0 auto 0 0;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 600;
}
.filter-group__all,
.filter-group__now { color: var(--fg-muted); font-size: 0.8125rem; }
.filter-group__clear {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  color: var(--brand-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .filter-group__clear:hover { background-color: color-mix(in srgb, var(--brand-strong) 8%, transparent); }
}
.filter-group__search {
  width: 100%;
  height: 2.25rem;
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--control);
  border-radius: 0.5rem;
  background-color: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}
.filter-group__search::placeholder { color: var(--fg-muted); }
.filter-group__search:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-halo); }
.filter-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.filter-group__chips + .filter-group__chips { margin-top: 0.5rem; }
.filter-group > .filter__form { padding: 0.75rem 0 0; }
.filter-chip {
  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;
  text-decoration: none;
  white-space: nowrap;
}
.filter-chip[hidden] { display: none; }
.filter-chip__check { display: none; }
.filter-chip__count { color: var(--fg-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.filter-chip__count.is-zero { color: var(--fg-subtle); }
.filter-chip[aria-current="true"] {
  padding-left: 0.5rem;
  border-color: transparent;
  background-color: var(--brand-tint);
  color: var(--brand-strong);
}
.filter-chip[aria-current="true"] .filter-chip__check { display: block; }
.filter-chip[aria-current="true"] .filter-chip__count { color: inherit; opacity: 0.75; }
.filter-chip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (pointer: coarse) {
  .filter-chip { height: 2.25rem; }
}

/* ── The calendar picker (assets/js/datepicker.js, docs/DESIGN.md §2.7): Material's docked date
   picker in CDL's colours. A date field's popover (12 px, like every floating layer) or a
   period's range calendar inside its menu. Days are 40 px circles: the chosen one filled
   Firebrick, today ringed, a range a tinted band between its two ends. ── */
.field--date .field__input { padding-right: 2.75rem; }
.field--date .field__label { max-width: calc(100% - 3.5rem); }
.field__trailing {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  z-index: 2;
  transform: translateY(-50%);
}
.datepicker {
  width: 19.5rem;
  max-width: calc(100vw - 1rem);
  padding: 0.25rem 0.75rem 0.75rem;
  border: 0;
  border-radius: 0.75rem;
  background-color: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
}
.datepicker [hidden] { display: none !important; }
.datepicker[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  overflow: visible;
}
.datepicker[popover]:popover-open,
.datepicker--fixed {
  transform-origin: top left;
  animation: pop-in 160ms var(--ease-out) both;
}
.datepicker--fixed { position: fixed; z-index: 1000; }
.datepicker--inline {
  width: auto;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.datepicker__head {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  height: 3rem;
}
.datepicker__title {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.25rem;
  margin-right: auto;
  padding: 0 0.5rem 0 0.75rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.datepicker__title .icon { color: var(--fg-muted); transition: transform 150ms var(--ease-out); }
.datepicker__title[aria-expanded="true"] .icon { transform: rotate(180deg); }
.datepicker__grid { display: grid; justify-content: center; }
.datepicker__week {
  display: grid;
  grid-template-columns: repeat(7, 2.5rem);
}
.datepicker__weekdays > span {
  display: grid;
  place-items: center;
  height: 2rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.datepicker__cell {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.5rem;
}
.datepicker__cell.is-in-range::before {
  content: "";
  position: absolute;
  inset: 0.125rem 0;
  background-color: var(--brand-tint);
}
.datepicker__cell.is-range-start::before { left: 50%; }
.datepicker__cell.is-range-end::before { right: 50%; }
.datepicker__day,
.datepicker__pick {
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.datepicker__day { width: 2.25rem; height: 2.25rem; }
.datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--brand-primary); color: var(--brand-strong); }
.datepicker__day[aria-selected="true"],
.datepicker__pick[aria-pressed="true"] {
  background-color: var(--brand-solid);
  box-shadow: none;
  color: var(--brand-on-solid);
  font-weight: 600;
}
.datepicker__day:focus-visible,
.datepicker__pick:focus-visible,
.datepicker__title:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.datepicker__picks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  padding-bottom: 0.25rem;
}
.datepicker__picks--years {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-height: 16.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.datepicker__pick { height: 2.5rem; }
.datepicker__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}
.datepicker__range {
  min-height: 1.25rem;
  margin: 0;
  padding: 0.25rem 0.25rem 0;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.datepicker__range:empty { display: none; }

/* 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:not([aria-current="page"]) .segmented__check,
.segmented__item[aria-current="page"] .segmented__icon { display: none; }
.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. ── */
.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;
}
/* Previous, Today and Next sit closer to each other than to the rest of the toolbar. */
.toolbar > :is([data-cal-prev], .cal-today) + :is(.cal-today, [data-cal-next]) { margin-left: -0.25rem; }
.cal-title__short { display: none; }
/* On a phone the toolbar is one row (§3.4): the short period name takes the room left and
   ends with an ellipsis rather than pushing the row wider; Today is under More actions. */
@media (max-width: 767.98px) {
  .cal-title {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cal-title__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cal-title__short { display: inline; }
  .toolbar > :is([data-cal-prev], [data-cal-next]) { width: 2.25rem; height: 2.25rem; }
}
.cal {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}
/* The month grid grows to fill the screen's height under the toolbar, its weeks sharing it
   (never under 7 rem each, 4.5 rem on a phone; a short window scrolls). */
.app__main--grow {
  display: flex;
  flex-direction: column;
}
.app__main--grow > .cal-results { flex: 1 0 auto; }
.cal-results > .cal {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.cal-results .cal__grid {
  flex: 1 0 auto;
  grid-auto-rows: minmax(7rem, 1fr);
}
.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-tone: var(--status-blue); }
.cal-event--orientation { --cal-tone: var(--status-teal); }
.cal-event--travel { --cal-tone: var(--status-amber); }
.cal-event--start { --cal-tone: var(--status-green); }
.cal-event--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;
}
/* On a phone the grid keeps its seven columns and fills the screen: each day shows its number
   and its entries as small chips (the name only, cut short; colour and outline as on desktop).
   A chip opens its record; the number and "+N more" open that day in the agenda. */
@media (max-width: 639px) {
  .cal__weekdays span { padding: 0.375rem 0; }
  .cal-results .cal__grid { grid-auto-rows: minmax(auto, 1fr); }
  .cal__day {
    gap: 0.125rem;
    min-height: 4.5rem;
    padding: 0.125rem;
  }
  .cal__date {
    align-self: center;
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.75rem;
  }
  .cal__events { gap: 1px; }
  .cal-event {
    padding: 0 0.1875rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    line-height: 0.875rem;
  }
  .cal-event__mark,
  .cal-event__time { display: none; }
  .cal__more {
    padding: 0 0.1875rem;
    font-size: 0.625rem;
    line-height: 0.875rem;
  }
  .cal__more-word { display: none; }
}

/* Unread counts (the Inbox): a count at the end of the nav link, on the glyph when the rail is
   collapsed. */
.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;
}

/* ── 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; }
}

/* ── Inbox (inbox.php): the Chat layout carrying real conversations. Below 1024 px one pane at a
      time: the list, or the open thread with a back arrow. ── */
.inline-form { display: inline-flex; margin: 0; }
.inbox:not(.inbox--open) .chat__list { display: flex; }
.inbox:not(.inbox--open) .inbox__thread { display: none; }
.inbox__band { gap: 0.5rem; }
.inbox__band .search-pill { flex: 1 1 auto; max-width: none; }
.inbox__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
.inbox__list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.inbox__empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.inbox-list { margin: 0; padding: 0; list-style: none; }
.inbox-list > li + li { border-top: 1px solid var(--hairline); }
.inbox-list__empty {
  padding: 1.5rem 1rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
  text-align: center;
}
.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--fg);
  text-decoration: none;
}
.inbox-item[aria-current="true"] { background-color: var(--brand-tint); }
.inbox-item.is-closed .inbox-item__body { opacity: 0.6; }
.inbox-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.inbox-item__top,
.inbox-item__bottom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.inbox-item__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-item.is-unread .inbox-item__name { font-weight: 700; }
.inbox-item__time {
  flex-shrink: 0;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.inbox-item__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-item.is-unread .inbox-item__preview { color: var(--fg); }
.inbox-item__you { color: var(--fg-muted); }
.inbox-channel {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: var(--surface-sunken);
  color: var(--fg-muted);
}

.inbox-head { flex-wrap: wrap; gap: 0.375rem 0.625rem; }
.inbox-head__who { flex: 1 1 9rem; min-width: 0; }
.inbox-head__name {
  overflow: hidden;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-head__detail {
  overflow: hidden;
  color: var(--fg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-head__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}
.inbox-messages {
  flex: 1;
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
  background-color: var(--canvas);
}
.inbox-messages:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.inbox-link__search {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.inbox-link__search .field-wrap { flex: 1; min-width: 0; }
.inbox-link__results { margin-top: 0.75rem; }
.inbox-link__results .row { padding-right: 0; padding-left: 0; }

/* Messages: the person's on the left, the agency's on the right; media is the bubble. */
.inbox-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inbox-thread__empty { align-self: center; }
.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(36rem, 85%);
}
.msg--out { align-self: flex-end; align-items: flex-end; }
.msg__bubble {
  padding: 0.5rem 0.75rem;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background-color: var(--surface);
  color: var(--fg);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.msg--out .msg__bubble {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 16px;
  background-color: var(--brand-tint);
}
.msg--failed .msg__bubble { background-color: var(--danger-tint); }
.msg__bubble:has(> .msg__attachments:only-child) {
  padding: 0;
  background-color: transparent;
}
.msg__bubble--tombstone,
.msg--out .msg__bubble--tombstone {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--surface-subtle);
  color: var(--fg-muted);
  font-style: italic;
}
.msg__text { margin: 0; }
.msg__attachments {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.msg__attachments:not(:only-child) { margin-bottom: 0.375rem; }
.msg__media { display: block; }
.msg__image {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  border-radius: 12px;
  object-fit: contain;
}
.msg__audio { width: 16rem; max-width: 100%; }
.msg__video {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  border-radius: 12px;
}
.msg__file {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-control);
  background-color: var(--surface-subtle);
  color: var(--fg);
  font-size: 0.8125rem;
  text-decoration: none;
}
.msg__file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__file-size { flex-shrink: 0; color: var(--fg-muted); }
.msg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  color: var(--fg-muted);
  font-size: 0.75rem;
}
.msg__echo { font-style: italic; }
.msg__tick { display: inline-flex; align-items: center; color: var(--fg-muted); }
.msg__tick--double .icon + .icon { margin-left: -0.5rem; }
.msg__tick--read { color: var(--info); }
.msg__tick--failed { color: var(--danger); }
.msg__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .msg__delete { opacity: 0; transition: opacity 150ms var(--ease-out); }
  .msg:hover .msg__delete,
  .msg__delete:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msg__delete { transition: none; }
}
.msg__delete:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.msg__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.25rem;
  color: var(--danger);
  font-size: 0.75rem;
}
.msg--out .msg__error { justify-content: flex-end; text-align: right; }
.msg__error-text { display: inline-flex; align-items: flex-start; gap: 0.25rem; margin: 0; }
.msg__error-text .icon { flex-shrink: 0; margin-top: 0.125rem; }
.msg__retry {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-strong);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.msg__retry:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* E-mail: each mail a block, its HTML body in a sandboxed frame. */
.msg--mail,
.msg--mail.msg--out { align-self: stretch; align-items: stretch; max-width: 100%; }
.mail {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background-color: var(--surface);
  font-size: 0.875rem;
}
.msg--out .mail { background-color: var(--brand-tint); }
.mail__head p { margin: 0; overflow-wrap: anywhere; }
.mail__label { margin-right: 0.25rem; color: var(--fg-muted); font-weight: 600; }
.mail__head .mail__subject { margin-top: 0.25rem; font-weight: 600; }
.mail__frame {
  display: block;
  width: 100%;
  height: 20rem;
  margin-top: 0.625rem;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--surface);
}
.mail__text { margin-top: 0.625rem; overflow-wrap: anywhere; }
.mail .msg__attachments { margin-top: 0.625rem; }

/* The composer: one line that grows, a paperclip, the send circle. */
.composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--hairline);
  background-color: var(--surface);
}
.composer__row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.composer__attach {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.composer__attach:focus-within { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.composer__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.composer__input {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 10rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--control);
  border-radius: 20px;
  background-color: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.composer__input::placeholder { color: var(--fg-muted); }
.composer__input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
.composer__send { flex-shrink: 0; }
.composer__send[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.composer__files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.composer__file {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: var(--surface-sunken);
  color: var(--fg);
  font-size: 0.75rem;
}
.composer__note { margin: 0; color: var(--fg-muted); }
.composer__vars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.composer__preview {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background-color: var(--brand-tint);
  color: var(--fg);
  font-size: 0.875rem;
  white-space: pre-line;
}
.composer__actions { display: flex; justify-content: flex-end; }
.composer--notice { padding: 0.75rem; }

@media (max-width: 767.98px) {
  .inbox { height: calc(100dvh - var(--app-topbar) - 2.5rem); min-height: 24rem; }
}
@media (min-width: 1024px) {
  .inbox { grid-template-columns: 22rem minmax(0, 1fr); }
  .inbox .chat__list,
  .inbox:not(.inbox--open) .chat__list { display: flex; }
  .inbox .inbox__thread,
  .inbox:not(.inbox--open) .inbox__thread { display: flex; }
  .inbox-head__back { display: none; }
}
@media (pointer: coarse) {
  .composer__input { font-size: 1rem; }
}

/* ── Team Chat (chat.php, assets/js/team-chat.js): the messenger frame with staff conversations.
      Below 1024 px one view at a time: the list, or the open conversation with Back. On a phone
      the frame follows the visual viewport (--tc-viewport), so the composer stays above the
      on-screen keyboard. ── */
.team-chat [hidden] { display: none !important; }
.team-chat:not(.team-chat--open) .team-chat__list { display: flex; }
.team-chat:not(.team-chat--open) .team-chat__thread { display: none; }
.team-chat__item {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.team-chat__item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.team-chat__item:disabled { cursor: progress; opacity: 0.6; }
.team-chat__inactive { flex-shrink: 0; color: var(--fg-muted); font-size: 0.75rem; }
.team-chat__people {
  display: flex;
  flex-direction: column;
  max-height: 55%;
  min-height: 0;
  border-bottom: 1px solid var(--hairline);
}
.team-chat__search { position: relative; margin: 0.625rem 1rem; }
.team-chat__search .search-pill__input:focus { border-color: var(--brand-primary); outline: none; }
.team-chat__people-list { min-height: 0; overflow-y: auto; }
.team-chat__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.team-chat__messages { display: flex; flex-direction: column; }
.team-chat__older { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.team-chat__older:has(> [hidden]) { display: none; }
.team-chat__placeholder { flex: 1; }
.team-chat__day {
  align-self: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
/* A run of messages from one person: tighter, the name once, the time on the last. */
.team-chat__msg--cont { margin-top: -0.5rem; }
.team-chat__msg:has(+ .team-chat__msg--cont) .msg__meta { display: none; }
.team-chat__sender { margin: 0 0 0.25rem 0.75rem; color: var(--fg-muted); font-size: 0.75rem; font-weight: 600; }
.team-chat__text { white-space: pre-wrap; }
.team-chat__pending:not(.msg--failed) .msg__bubble { opacity: 0.7; }
.team-chat__sending { font-style: italic; }
.team-chat__action {
  min-height: 1.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.team-chat__action:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.team-chat__jump {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 1;
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%);
}
.team-chat__count { text-align: right; }
.team-chat__alert {
  margin: 0;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--hairline);
  background-color: var(--danger-tint);
  color: var(--fg);
  font-size: 0.875rem;
}
/* Attachments: a preview sized before it loads, a document card, the chosen file, the upload. */
.team-chat__image { display: inline-block; border-radius: 12px; }
.team-chat__image .msg__image { height: auto; max-width: min(100%, 280px); background-color: var(--surface-sunken); }
.team-chat__image:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.team-chat__file { gap: 0.5rem; padding: 0.5rem 0.75rem; }
.team-chat__file > .icon { flex-shrink: 0; color: var(--fg-muted); }
.team-chat__file-words { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.team-chat__file-actions { display: inline-flex; flex-shrink: 0; gap: 0.25rem; }
.team-chat__progress { width: 6rem; height: 0.375rem; accent-color: var(--brand-primary); }
.team-chat__chip { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; }
.team-chat__chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chat__chip-size { flex-shrink: 0; color: var(--fg-muted); }
.team-chat__chip--error { background-color: var(--danger-tint); }
.team-chat__chip-remove {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.team-chat__chip-remove:hover { color: var(--fg); }
.team-chat__chip-remove:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.team-chat__chip-words { min-width: 0; }
/* Voice messages: the recorder in place of the composer's row, the draft, the player. */
.composer__mic { flex-shrink: 0; }
.composer__recorder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.25rem 0.25rem 0.875rem;
  border: 1px solid var(--control);
  border-radius: 20px;
}
.composer__rec-dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--danger-dot);
  animation: team-chat-rec 1.2s ease-in-out infinite;
}
.composer__rec-words { font-size: 0.875rem; font-weight: 600; }
.composer__rec-time { color: var(--fg-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.composer__rec-actions { display: inline-flex; gap: 0.25rem; margin-left: auto; }
@keyframes team-chat-rec { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .composer__rec-dot { animation: none; } }
.team-chat__chip--voice { flex-wrap: wrap; padding: 0.375rem 0.5rem; border-radius: 20px; }
.team-chat__chip--voice .team-chat__chip-remove { width: 2.25rem; height: 2.25rem; }
.team-chat__audio {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 17rem;
  max-width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-control);
  background-color: var(--surface-subtle);
  font-size: 0.8125rem;
}
.team-chat__audio-foot { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.team-chat__audio-foot .msg__file-size { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chat__audio-foot .team-chat__action { margin-left: auto; }
.team-chat__voice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.team-chat__chip--voice .team-chat__voice { flex: 1; min-width: 12rem; }
.team-chat__play {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--action);
  color: var(--on-action);
  cursor: pointer;
}
.team-chat__play:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.team-chat__seek { flex: 1; min-width: 4rem; height: 1.5rem; margin: 0; accent-color: var(--brand-primary); }
.team-chat__seek:disabled { opacity: 0.5; }
.team-chat__time { flex-shrink: 0; color: var(--fg-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.team-chat__voice-note { flex-basis: 100%; color: var(--danger); font-size: 0.75rem; }
@media (max-width: 767.98px) {
  .team-chat { height: calc(var(--tc-viewport, 100dvh) - var(--app-topbar) - 2.5rem); min-height: 20rem; }
}
@media (min-width: 1024px) {
  .team-chat { grid-template-columns: 22rem minmax(0, 1fr); }
  .team-chat .team-chat__list,
  .team-chat:not(.team-chat--open) .team-chat__list { display: flex; }
  .team-chat .team-chat__thread,
  .team-chat:not(.team-chat--open) .team-chat__thread { display: flex; }
  .team-chat .inbox-head__back { display: none; }
}

/* Settings → Message channels */
.row__detail--danger { color: var(--danger); }
.channels__result:empty { display: none; }
.channels__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
}
.channels__code {
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  background-color: var(--surface-sunken);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}