/* ===============================================================
   Dark mode – token overrides.

   Triggered by ``data-theme="dark"`` on the <html> element. The
   topbar's theme switcher writes it; a small bootstrap script in
   base.html reads the saved preference (or prefers-color-scheme) on
   first paint. Variables only – no component-specific overrides
   here. The product's components all consume tokens so flipping the
   value flips the whole UI.

   The brand scale flips lightness (brand-50 becomes the deepest
   tint, brand-900 becomes the brightest accent) so the same
   semantic intent ("brand-50 background, brand-700 text") still
   reads correctly in dark.
   =============================================================== */

[data-theme="dark"] {
  --color-bg: #0b0f10;
  --color-surface: #14181c;
  --color-surface-raised: #1a1f25;
  --color-surface-tinted: #0e1a14;

  --color-border: #2a3038;
  --color-border-strong: #3a4148;
  --color-border-brand: #15803d55;

  --color-ink: #f4f4f3;
  --color-ink-soft: #d6d3d1;
  --color-muted: #a8a29e;
  --color-on-brand: #ffffff;

  /* Brand scale – flipped so brand-50 = darkest tint, brand-900 =
     brightest accent. Component CSS that says
     "background: brand-50; color: brand-700" therefore reads as a
     subtle dark-tint with a bright readable label, the same
     visual intent as in light. */
  --color-brand-50:  #052e16;
  --color-brand-100: #064e3b;
  --color-brand-200: #065f46;
  --color-brand-300: #047857;
  --color-brand-400: #15803d;
  --color-brand-500: #16a34a;
  --color-brand-600: #22c55e;
  --color-brand-700: #4ade80;
  --color-brand-800: #86efac;
  --color-brand-900: #bbf7d0;

  /* Neutral scale – flipped on same logic. */
  --color-neutral-50:  #1c1f23;
  --color-neutral-100: #23272d;
  --color-neutral-200: #2e333a;
  --color-neutral-300: #3a4148;
  --color-neutral-400: #57534e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #a8a29e;
  --color-neutral-700: #d6d3d1;
  --color-neutral-800: #e7e5e4;
  --color-neutral-900: #f5f5f4;

  /* Semantic pairs – dark-tinted backgrounds with bright foregrounds
     so badges and alerts stay legible. */
  --color-ok-bg:     #052e16;
  --color-ok-fg:     #86efac;
  --color-warn-bg:   #2a1b0a;
  --color-warn-fg:   #fcd34d;
  --color-danger-bg: #2a0a10;
  --color-danger-fg: #fca5a5;
  --color-info-bg:   #0e1e2a;
  --color-info-fg:   #93c5fd;
}

html { color-scheme: light dark; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
/* Marketing + auth layouts add ``light-scheme`` to <html>.
   ``!important`` overrides the data-theme rule above when the OS
   preference is dark, so Chrome's Android auto-dark stays off on
   these public pages regardless of system theme. */
html.light-scheme { color-scheme: light !important; }

/* ===============================================================
   Atitic baseline UI layer
   ===============================================================
   Loaded on every page via the tenant theme.css endpoint, so chrome
   + macros can rely on a small library of utility classes instead
   of fat arbitrary-value strings. Tokens come from
   PLATFORM_DEFAULT_TOKENS; tenants override individual keys.
   =============================================================== */

/* ---------- A11y ------------------------------------------------ */

*:focus-visible {
  outline: 2px solid var(--color-brand-500, #16A34A);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  transform: translateY(-150%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand-700);
  color: var(--color-on-brand);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/*
  Visually-hide content while keeping it available to screen readers.
  Standard "sr-only" recipe (WCAG 1.3.1 / 4.1.2): the element takes no
  visual space but is still reachable by AT. Used by badges to prefix
  their status colour with a spoken label, by icon-only buttons that
  need an accessible name, and anywhere else we want text for AT only.
*/
.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;
}

/*
  Global focus-visible ring. WCAG 2.4.7 (Focus Visible) at AA + the new
  WCAG 2.2 SC 2.4.11 (Focus Not Obscured) + SC 2.4.13 (Focus
  Appearance). Applies to every focusable element the browser marks
  with `:focus-visible` (keyboard focus, not click-focus). The 2px
  brand ring + 2px offset gives >3:1 contrast against every surface
  in the theme.
*/
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex="0"]):focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Surfaces ------------------------------------------- */

.surface         { background: var(--color-surface);        }
.surface-raised  { background: var(--color-surface-raised); box-shadow: var(--shadow-raised); }
.surface-tinted  { background: var(--color-surface-tinted); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent),
              0 1px 0 color-mix(in srgb, white 100%, transparent) inset;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.card-quiet {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Subtle lift for clickable cards. Any ``<a class="card">`` gets it
   automatically – that covers the dashboard KPI tiles and most list
   rows that link to a detail page. Plain anchors carrying the
   explicit ``.card-link`` modifier (for non-card wrappers) get the
   same treatment. */
a.card,
a.card-link,
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card:hover,
a.card-link:hover,
.card-link:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-ink) 6%, transparent),
              0 8px 24px color-mix(in srgb, var(--color-brand-700) 8%, transparent);
  transform: translateY(-1px);
}

/* ---------- Buttons (semantic, used by macros) ----------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
/* Primary buttons use the deep wordmark shade so they read grounded
   and serious. The bright A-chevron green is reserved for accents
   (active-state stripes, badges, focus rings). Soft hover lift +
   raised shadow matches the auth CTA so the visual language carries
   from sign-in into the product. */
.btn-primary {
  background: var(--color-brand-700);
  color: var(--color-on-brand);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-brand-900) 50%, transparent),
              var(--shadow-sm);
}
.btn-primary:hover  {
  background: var(--color-brand-800);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.btn-primary:active { background: var(--color-brand-900); transform: translateY(0); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-brand-800);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background: var(--color-brand-50);
  border-color: var(--color-brand-300);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink-soft);
}
.btn-ghost:hover { background: var(--color-neutral-100); color: var(--color-ink); }

.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger-fg);
  border-color: var(--color-danger-fg);
}
.btn-danger:hover { background: var(--color-danger-bg); }

.btn-sm { padding: calc(var(--space-1) + 2px) var(--space-3); font-size: var(--text-xs); }

/* ---------- Icon tile (walkunda-style) ------------------------- */

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  flex-shrink: 0;
}
.tile-icon svg { width: 1rem; height: 1rem; stroke-width: 2; }
.tile-icon-lg { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); }
.tile-icon-lg svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Timeline (audit-log activity feed) ------------------
   Vertical list where each row shows a coloured dot (bg tinted by
   the event's tone: ok / warn / danger / info / neutral), the
   action label, actor, and timestamp. The vertical rule is drawn
   as an ::after on the dot so gaps between rows never leave
   visual seams. */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
}
.timeline-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  position: relative;
  margin-top: 0.05rem;
}
.timeline-dot::after {
  /* Vertical connector rule to the next row. Suppressed on the
     last row via :last-child below. */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(0.85rem + 0.4rem);
  background: var(--color-border-subtle, var(--color-border));
}
.timeline-row:last-child .timeline-dot::after { display: none; }
.timeline-dot-ok      { background: var(--color-ok-bg);      color: var(--color-ok-fg);      }
.timeline-dot-warn    { background: var(--color-warn-bg);    color: var(--color-warn-fg);    }
.timeline-dot-danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg);  }
.timeline-dot-info    { background: var(--color-info-bg);    color: var(--color-info-fg);    }
.timeline-dot-neutral { background: var(--color-neutral-100); color: var(--color-ink-soft);  }

/* ---------- State badges --------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
}
.badge-ok     { background: var(--color-ok-bg);     color: var(--color-ok-fg);     }
.badge-warn   { background: var(--color-warn-bg);   color: var(--color-warn-fg);   }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.badge-info   { background: var(--color-info-bg);   color: var(--color-info-fg);   }
.badge-neutral{ background: var(--color-neutral-100); color: var(--color-ink-soft); }
.badge-brand  { background: var(--color-brand-50); color: var(--color-brand-700); }

/* ---------- Alerts (unified inline banner) --------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.alert + .alert { margin-top: var(--space-2); }
.alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert-icon svg { width: 1.25rem; height: 1.25rem; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { display: block; font-weight: 600; margin-bottom: 2px; }
.alert-body a { text-decoration: underline; }

.alert-info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border-color: color-mix(in srgb, var(--color-info-fg) 20%, transparent);
}
.alert-success {
  background: var(--color-ok-bg);
  color: var(--color-ok-fg);
  border-color: color-mix(in srgb, var(--color-ok-fg) 20%, transparent);
}
.alert-warning {
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  border-color: color-mix(in srgb, var(--color-warn-fg) 20%, transparent);
}
.alert-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border-color: color-mix(in srgb, var(--color-danger-fg) 20%, transparent);
}

/* ---------- Error-page tile (large rounded icon container) ------- */

.error-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
}
.error-tile svg { width: 2.5rem; height: 2.5rem; }
.error-tile-info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border-color: color-mix(in srgb, var(--color-info-fg) 20%, transparent);
}
.error-tile-warning {
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  border-color: color-mix(in srgb, var(--color-warn-fg) 20%, transparent);
}
.error-tile-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border-color: color-mix(in srgb, var(--color-danger-fg) 20%, transparent);
}

/* ===============================================================
   2025 auth shell – split pane, dark hero, clean form, icon SSO.
   =============================================================== */

.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .auth-split { grid-template-columns: 5fr 6fr; }
}

/* ---- Hero pane ---- */
.auth-hero {
  position: relative;
  overflow: hidden;
  /* Same reasoning as ``.dashboard-hero`` – no ``isolation: isolate``
     so floating dropdowns from sibling layout layers don't get
     trapped behind the hero's stacking context. */
  color: var(--color-brand-50);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--color-brand-600) 35%, transparent) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--color-brand-400) 22%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, var(--color-brand-900) 0%, color-mix(in srgb, var(--color-brand-900) 70%, #000) 100%);
  padding: var(--space-8);
}
@media (max-width: 1023px) {
  .auth-hero { padding: var(--space-5) var(--space-6); }
}

.auth-hero-glow {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-300) 45%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.auth-hero-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.auth-hero-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-8);
}
@media (max-width: 1023px) {
  .auth-hero-inner { gap: var(--space-4); }
}

.auth-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.auth-hero-logo {
  height: 3.5rem;
  width: auto;
  background: white;
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
@media (max-width: 1023px) {
  .auth-hero-logo { height: 2.5rem; padding: 0.35rem; }
}
.auth-hero-wordmark {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: white;
}

.auth-hero-pitch {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 28rem;
}
@media (max-width: 1023px) {
  .auth-hero-pitch { display: none; }
}
.auth-hero-headline {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: white;
  margin: 0 0 var(--space-4);
}
.auth-hero-tagline {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--color-brand-50) 80%, transparent);
  max-width: 24rem;
}

.auth-hero-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (max-width: 1023px) {
  .auth-hero-features { display: none; }
}
.auth-hero-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-brand-50) 75%, transparent);
}
.auth-hero-feature-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-brand-300);
  flex-shrink: 0;
}

/* ---- Form pane ---- */
.auth-form-pane {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
}
@media (max-width: 1023px) {
  .auth-form-pane { padding: var(--space-6) var(--space-5); }
}

.auth-form-wrap {
  width: 100%;
  max-width: 26rem;
}

.auth-form-header { margin-bottom: var(--space-6); }
.auth-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-brand-700);
  margin-bottom: var(--space-2);
}
.auth-form-title {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.auth-form-sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}
.auth-form-sub a { color: var(--color-brand-700); text-decoration: none; font-weight: 500; }
.auth-form-sub a:hover { text-decoration: underline; }

/* --- Trial expectations panel (shown above the signup form) --- */
.auth-trial-panel {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-4);
  background: var(--color-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 25%, transparent);
  border-radius: var(--radius-md);
}
.auth-trial-panel-heading {
  margin: 0 0 var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-800, var(--color-brand-700));
}
.auth-trial-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-ink);
}
.auth-trial-panel-list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: start;
  gap: 0.4rem;
}
.auth-trial-yes {
  color: var(--color-success-fg, #16a34a);
  font-weight: 700;
  line-height: 1.35;
}
.auth-trial-no {
  color: var(--color-muted);
  font-weight: 700;
  line-height: 1.35;
}

/* --- Terms-of-service checkbox on signup --- */
.auth-terms-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-ink);
}
.auth-terms-checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  cursor: pointer;
}
.auth-terms-checkbox a {
  color: var(--color-brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-terms-checkbox a:hover { text-decoration: none; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- Clean field – label-above, large input, focus halo ---- */
.field-clean {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field-clean label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.field-clean input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--text-base);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.field-clean input::placeholder { color: var(--color-muted); opacity: 0.6; }
.field-clean input:hover { border-color: var(--color-border-strong); }
.field-clean input:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 18%, transparent);
}
.field-clean input.field-error {
  border-color: var(--color-warn-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warn-fg) 18%, transparent);
}
.field-clean .relative { position: relative; }
.field-clean-eye {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  background: transparent;
  border: 0;
}
.field-clean-eye:hover { color: var(--color-ink); background: var(--color-neutral-50); }

/* ---- Extended field-clean: textarea + select + help + required ---- */

.field-clean textarea,
.field-clean select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--text-base);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.field-clean textarea { min-height: 6rem; resize: vertical; line-height: var(--leading-snug); }
.field-clean select {
  /* Native select with custom chevron – paints the down arrow as a
     background image so the control matches the rest of the form. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.85rem;
  cursor: pointer;
}
.field-clean textarea:hover,
.field-clean select:hover { border-color: var(--color-border-strong); }
.field-clean textarea:focus,
.field-clean select:focus {
  outline: none;
  background-color: var(--color-surface);
  border-color: var(--color-brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 18%, transparent);
}

.field-required {
  color: var(--color-danger-fg);
  font-weight: 700;
  margin-left: 0.1rem;
}
.field-help {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/* ---- Single checkbox row (form_check) ---- */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.field-check:hover { border-color: var(--color-border-strong); background: var(--color-neutral-50); }
/* A checkbox in a bordered tile (DORA service -> business functions). */
.choice-tile { border-color: var(--color-border); background: var(--color-surface); }
.choice-tile:hover { background: var(--color-neutral-50); }
.choice-tile:has(input:checked) {
  border-color: var(--color-brand-600);
  background: color-mix(in srgb, var(--color-brand-600) 7%, var(--color-surface));
}
.choice-tile:has(input:focus-visible) { outline: 2px solid var(--color-brand-600); outline-offset: 2px; }
/* Fasttrack has ten steps: number above a short label, so each label
   gets the whole column instead of being cut off. */
@media (min-width: 761px) {
  .ft-stepper .ui-step { flex-direction: column; gap: var(--space-1); }
  .ft-stepper .ui-step-label { font-size: var(--text-xs); white-space: normal; overflow: visible; }
}
.field-check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-brand-700);
}
.field-check-label {
  display: block;
  font-weight: 500;
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.field-check .field-help { margin-top: 0.15rem; }

/* ---- Form actions bar ---- */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.form-actions-trailing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ---- Grouped form section: title + body, comfortable spacing ---- */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-section + .form-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.form-section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.form-section-heading h2 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
}
.form-section-heading p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--leading-snug);
}
/* Two-column responsive grid for compact field pairs */
.form-grid-2 {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---- Primary CTA – big, full-width, hover lift ---- */
.auth-cta {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  background: var(--color-brand-700);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-brand-900) 50%, transparent),
              var(--shadow-card);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.auth-cta:hover { background: var(--color-brand-800); transform: translateY(-1px); box-shadow: var(--shadow-raised); }
.auth-cta:active { transform: translateY(0); box-shadow: var(--shadow-card); }
.auth-cta svg { transition: transform var(--duration-fast) var(--ease-out); }
.auth-cta:hover svg { transform: translateX(2px); }

/* ---- Signup form helpers (label hints + post-signup aside) ---- */
.field-clean-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-muted);
  margin-left: 0.25rem;
}
.field-clean-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0.2rem 0 0;
}
.field-clean-hint code {
  background: var(--color-neutral-50);
  padding: 0.05rem 0.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}
.auth-aside-line {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}
.auth-aside-line a { color: var(--color-brand-700); font-weight: 600; text-decoration: none; }
.auth-aside-line a:hover { text-decoration: underline; }
.auth-info-card {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-ink);
  font-size: 0.92rem;
  line-height: 1.5;
}
.auth-info-card p { margin: 0; display: flex; align-items: flex-start; gap: 0.5rem; }
.auth-info-card code {
  background: rgba(255,255,255,0.6);
  padding: 0.05rem 0.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* ---- Divider ---- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--color-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---- SSO icon-only pills, three in a row ---- */
.sso-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.sso-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.sso-pill:hover {
  border-color: var(--color-border-strong);
  background: var(--color-neutral-50);
  transform: translateY(-1px);
}
.sso-pill:active { transform: translateY(0); }
.sso-pill svg { display: block; }
.sso-pill-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
.sso-pill:hover .sso-pill-label { color: var(--color-ink); }

.sso-hint {
  text-align: center;
  margin-top: var(--space-3);
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* Quiet legal-links row under the sign-in form. */
.auth-legal-links {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 0.72rem;
  color: var(--color-muted);
  display: flex; justify-content: center; align-items: center;
  gap: 0.5rem; flex-wrap: wrap;
}
.auth-legal-links a {
  color: var(--color-muted);
  text-decoration: none;
}
.auth-legal-links a:hover { color: var(--color-brand-700); text-decoration: underline; }

/* ---- Lang picker (top right of form pane) ---- */
.auth-lang {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 10;
}
.auth-lang-trigger {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.auth-lang-trigger:hover { color: var(--color-ink); background: var(--color-neutral-50); border-color: var(--color-border); }
.auth-lang-trigger::-webkit-details-marker { display: none; }
.auth-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  width: 9rem;
  padding: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.auth-lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.auth-lang-option:hover { background: var(--color-neutral-50); }
.auth-lang-option.is-active { background: var(--color-brand-50); color: var(--color-brand-900); font-weight: 600; }
.auth-lang-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.auth-support {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.auth-support a { color: var(--color-brand-700); text-decoration: none; font-weight: 500; }
.auth-support a:hover { text-decoration: underline; }

/* ---- Ghost CTA variant (e.g. "Send another link") ---- */
.auth-cta-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.auth-cta-ghost:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

/* ---- "Stamp" badge above eyebrow (used on the sent-reset screen) ---- */
.auth-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  margin-bottom: var(--space-4);
}

/* ---- Checklist (used on sent-reset for "what to expect" rows) ---- */
.auth-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.auth-checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
}
.auth-checklist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- MFA 6-digit code input (centered, spaced, monospaced) ---- */
.field-clean input.mfa-code-input {
  text-align: center;
  font-size: 1.75rem;
  letter-spacing: 0.5em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  padding-right: 0.5rem;
}
.field-clean input.mfa-code-input::placeholder { letter-spacing: 0.5em; }

/* ===============================================================
   Dashboard hero – applies the auth aesthetic to the in-product
   landing surface. Dark gradient + radial glow + grain, oversized
   headline, soft pulse dot for the status microcopy.
   =============================================================== */

.dashboard-hero {
  /* v4 – no colored block at all. Modern dashboards (Linear,
     Vercel, Stripe, Cal) don't do branded heroes; they put clean
     typography directly on the page surface. The KPI cards below
     carry the visual interest. The hero is now just a title row +
     a status line + the action button. */
  position: relative;
  background: transparent;
  border: 0;
  padding: 0 0 var(--space-3);
}

.dashboard-hero-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  /* No max-width – content tracks the page padding the same way the
     KPI grid below does, so on 4K the CTA stays pinned to the right
     edge instead of getting stranded mid-viewport. */
}

.dashboard-hero-title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-1) 0 var(--space-2);
}
.dashboard-hero-tenant {
  color: var(--color-brand-700);
}

.dashboard-hero-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.dashboard-hero-pulse {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent);
  animation: dashboard-hero-pulse 2.4s ease-in-out infinite;
}
@keyframes dashboard-hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

.dashboard-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.dashboard-hero-cta:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-ink-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dashboard-hero-cta:active { transform: translateY(0); box-shadow: none; }

/* Eyebrow date – readable contrast on the page surface. */
.dashboard-hero .auth-eyebrow {
  color: var(--color-ink-soft);
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.7rem;
}

/* Glow / grain spans inherited from the auth hero have no role on
   the tonal product header. */
.dashboard-hero > .auth-hero-glow,
.dashboard-hero > .auth-hero-grain { display: none; }

/* Risk heat-map cells on the dashboard. The band colours are classes,
   not inline styles, so each design can restate them. */
.heat-low     { background: #dcfce7; color: #166534; }
.heat-medium  { background: #fef3c7; color: #92400e; }
.heat-high    { background: #fed7aa; color: #9a3412; }
.heat-extreme { background: #fecaca; color: #991b1b; }
.heat-cell.is-empty { opacity: 0.6; }

/* ===============================================================
   Page content cap.

   On wide screens (4K, ultrawide) letting the main content stretch
   edge to edge makes everything feel half-finished – forms get
   absurdly wide labels, tables drift off into the void. The wrapper
   caps the centerline at ~1500px with a comfortable max for tables
   while still giving wide forms breathing room. Forms can opt for
   an even narrower cap via ``.page-narrow``.

   The hero (``.dashboard-hero``) is intentionally a sibling outside
   the inner wrap so it still bleeds to the page padding edges via
   negative margins, then the rest of the content stays neatly
   centered.
   =============================================================== */

/* App shell: viewport-locked so the topbar stays put while only the
   main pane scrolls. Guard on the presence of `.app-shell` so the
   marketing + auth layouts (which don't use it) keep natural body
   scrolling. */
body:has(> .app-shell) { overflow: hidden; }

.app-main { display: flex; flex-direction: column; }
.app-main-inner {
  width: 100%;
  max-width: 92rem;      /* ~1472px – wide enough for KPI grids + tables, sane on 4K */
  margin-left: auto;
  margin-right: auto;
}
.page-narrow {
  max-width: 56rem;      /* ~896px – comfortable for a single-column form */
  margin-left: auto;
  margin-right: auto;
}
.page-medium {
  max-width: 72rem;      /* ~1152px – fits a two-column detail grid */
  margin-left: auto;
  margin-right: auto;
}

/* ===============================================================
   Stacked status bar (used for compliance-by-domain breakdown).

   A pure-CSS horizontal stacked bar. The segments come pre-computed
   as percentages from the route – the template just lays them out
   left-to-right and the CSS handles colours per requirement-status
   token. Status palette is shared with the existing badges so the
   chart reads consistently with the rest of the program detail.
   =============================================================== */

.stacked-bar {
  display: flex;
  width: 100%;
  height: 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 4%, transparent);
}
.stacked-bar .seg {
  display: block;
  height: 100%;
  transition: width var(--duration-base) var(--ease-out);
}
.stacked-bar .seg + .seg { border-left: 1px solid var(--color-surface); }

.seg-implemented   { background: var(--color-ok-fg); }
.seg-in_progress   { background: var(--color-info-fg); }
.seg-at_risk       { background: var(--color-warn-fg); }
.seg-non_compliant { background: var(--color-danger-fg); }
.seg-not_started   { background: var(--color-neutral-200); }
.seg-empty         { background: var(--color-neutral-100); }

/* ---- Domain breakdown rows ---- */
.domain-stack { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.domain-stack-row { display: flex; flex-direction: column; gap: 0.4rem; }
.domain-stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.domain-stack-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.domain-stack-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.domain-stack-pct {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink);
}
.domain-stack-count { font-variant-numeric: tabular-nums; }
.domain-stack-na { color: var(--color-muted); margin-left: 0.3rem; }

/* ---- Legend at the top of the breakdown card ---- */
.domain-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}
.domain-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.02em;
}
.swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.swatch-implemented   { background: var(--color-ok-fg); }
.swatch-in_progress   { background: var(--color-info-fg); }
.swatch-at_risk       { background: var(--color-warn-fg); }
.swatch-non_compliant { background: var(--color-danger-fg); }
.swatch-not_started   { background: var(--color-neutral-200); border: 1px solid var(--color-border-strong); }

/* ===============================================================
   GitHub-style calendar heatmap. 91 cells laid out as a 13-week
   × 7-day grid via ``grid-auto-flow: column``. Intensity steps map
   to brand-tint shades so the chart reads as "more brand = more
   activity" without inventing a new palette.
   =============================================================== */

.heatmap-90-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
}

.hm-cell {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--color-neutral-100);
  border: 1px solid color-mix(in srgb, var(--color-ink) 4%, transparent);
}
.hm-i-0 { background: var(--color-neutral-100); }
.hm-i-1 { background: color-mix(in srgb, var(--color-brand-300) 60%, var(--color-neutral-50)); }
.hm-i-2 { background: color-mix(in srgb, var(--color-brand-500) 65%, white); }
.hm-i-3 { background: var(--color-brand-700); }
.hm-i-4 { background: var(--color-brand-900); }
.hm-future {
  background: transparent !important;
  border-style: dashed;
  opacity: 0.5;
}

.heatmap-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.heatmap-legend .hm-cell { width: 0.75rem; height: 0.75rem; aspect-ratio: 1; }

/* ---- Top-actor list (card on the right of the heatmap) ---- */
.top-actor-list { list-style: none; margin: 0; padding: 0; }
.top-actor-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-neutral-100);
}
.top-actor-row:last-child { border-bottom: 0; }
.top-actor-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actor-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ===============================================================
   Theme toggle button – swaps sun/moon glyph based on active theme.
   =============================================================== */

.theme-toggle { padding: 0.45rem; }
.theme-toggle .theme-toggle-sun,
.theme-toggle .theme-toggle-moon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Default (light) – show moon (offer to switch to dark) */
.theme-toggle .theme-toggle-sun { display: none; }
/* Dark – show sun (offer to switch back to light) */
[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: inline-flex; }
[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; }

/* ===============================================================
   Decorative scenes – concentric layered shapes around a center
   icon, used on error pages and empty states. Pure CSS so they
   scale with the theme, switch in dark, and don't ship raster
   assets we'd have to maintain.

   Two variants:
   * ``.scene-large`` – error pages. ~9rem, three rings.
   * ``.scene-medium`` – empty states. ~5rem, two rings.

   Tone variants (info / success / warning / danger) re-tint the
   rings from the semantic palette.
   =============================================================== */

.scene {
  position: relative;
  display: inline-grid;
  place-items: center;
  --scene-accent: var(--color-brand-700);
  --scene-bg:     var(--color-brand-50);
}
.scene::before,
.scene::after,
.scene > .scene-ring {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 25%, transparent);
  pointer-events: none;
}
.scene::before { transform: scale(0.72); opacity: 0.7; }
.scene::after  { transform: scale(1.0);  opacity: 0.35; }
.scene > .scene-ring { transform: scale(1.35); opacity: 0.18; border-style: dashed; }

.scene-core {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--scene-bg);
  color: var(--scene-accent);
  z-index: 1;
}

/* ---- Sizing ---- */
.scene-large {
  width: 9rem;
  height: 9rem;
}
.scene-large .scene-core {
  width: 5rem;
  height: 5rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--scene-accent) 18%, transparent);
}
.scene-large .scene-core svg { width: 2.25rem; height: 2.25rem; }

.scene-medium {
  width: 5rem;
  height: 5rem;
}
.scene-medium .scene-core {
  width: 3rem;
  height: 3rem;
}
.scene-medium .scene-core svg { width: 1.35rem; height: 1.35rem; }

/* ---- Tone variants ---- */
.scene-tone-info {
  --scene-accent: var(--color-info-fg);
  --scene-bg:     var(--color-info-bg);
}
.scene-tone-success {
  --scene-accent: var(--color-ok-fg);
  --scene-bg:     var(--color-ok-bg);
}
.scene-tone-warning {
  --scene-accent: var(--color-warn-fg);
  --scene-bg:     var(--color-warn-bg);
}
.scene-tone-danger {
  --scene-accent: var(--color-danger-fg);
  --scene-bg:     var(--color-danger-bg);
}

/* Decorative dot constellation – three small circles arranged
   around the scene's perimeter for friendlier empty states. */
.scene > .scene-dot {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--scene-accent);
  opacity: 0.45;
  pointer-events: none;
}
.scene > .scene-dot:nth-of-type(1) { top: 5%; right: 12%; }
.scene > .scene-dot:nth-of-type(2) { bottom: 14%; left: 6%; }
.scene > .scene-dot:nth-of-type(3) { bottom: 4%; right: 22%; width: 0.3rem; height: 0.3rem; }

/* ===============================================================
   Microinteractions – keyframe animations + transition polish.

   Respects ``prefers-reduced-motion`` so users who've asked the OS
   to dial down animation get static UI. Every animation is short
   (≤ 350ms) and uses ease-out – nothing should ever feel "wait
   for the animation".
   =============================================================== */

@keyframes atitic-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes atitic-fade-slide-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes atitic-pulse-success {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-ok-fg) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-ok-fg) 0%, transparent); }
}
@keyframes atitic-spin {
  to { transform: rotate(360deg); }
}

/* ---- Table row enter – applies on first render so a freshly
   loaded list reads as "alive" without being annoying. The stagger
   uses ``--row-i`` so rows appear in sequence; the template can
   set it via inline style on each <tr>. Defaults to no stagger. */
tbody tr {
  animation: atitic-fade-slide-up var(--duration-base) var(--ease-out) backwards;
  animation-delay: calc(var(--row-i, 0) * 18ms);
}
/* Cap the stagger so very long lists don't trickle in slowly. */
tbody tr:nth-of-type(n+15) { animation-delay: calc(14 * 18ms); }

/* ---- Card lift on hover – applied universally to a.card-link
   and a.card (set up earlier). This block tunes the existing
   transition timing for consistency across the platform. */
.card { transition:
  border-color var(--duration-fast) var(--ease-out),
  box-shadow var(--duration-fast) var(--ease-out),
  transform var(--duration-fast) var(--ease-out);
}

/* ---- Flash messages glow briefly when they land. Success flashes
   pulse green; other flashes simply fade in. */
[role="status"] > .card-quiet,
[role="status"] > .alert {
  animation: atitic-fade-slide-up var(--duration-base) var(--ease-out) backwards;
}
.alert-success { animation: atitic-fade-slide-up var(--duration-base) var(--ease-out) backwards,
                            atitic-pulse-success 1.4s var(--ease-out) 0.15s; }

/* ---- Loading spinner utility ---- */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: atitic-spin 0.8s linear infinite;
}

/* ---- Skeleton block (for HTMX swap placeholders) ---- */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-50) 50%,
    var(--color-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: atitic-skeleton 1.4s ease-in-out infinite;
  color: transparent;
}
@keyframes atitic-skeleton {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---- Smooth scroll for in-page anchors ---- */
html { scroll-behavior: smooth; }

/* ---- Refined focus ring – single bright halo that respects the
   tenant's brand colour. Applies only to keyboard focus so mouse
   clicks remain visually quiet. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 35%, transparent);
  border-radius: var(--radius-sm);
}
.btn:focus-visible,
.sidebar-link:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 40%, transparent);
}

/* ---- Reduced motion preference: kill the animations that
   wouldn't help anyone who's explicitly asked for less. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===============================================================
   Onboarding checklist (fresh-tenant guided start).

   Lives at the top of the dashboard. Auto-hides when every step is
   complete (driven by data signals from app.onboarding.service).
   Mature tenants never see this card.
   =============================================================== */

.onboarding-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-brand);
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--color-brand-200) 35%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-surface) 0%, var(--color-brand-50) 100%);
  padding: var(--space-5) var(--space-6);
}

.onboarding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.onboarding-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0 0 0.35rem;
}
.onboarding-sub {
  font-size: 0.85rem;
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 42rem;
}

/* ---- Progress ring (pure CSS conic-gradient) ---- */
.onboarding-progress-ring {
  --size: 4rem;
  --thickness: 6px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-brand-600) calc(var(--pct) * 1%),
    var(--color-brand-100) 0
  );
  display: grid;
  place-items: center;
}
.onboarding-progress-ring-fill {
  position: absolute;
  inset: var(--thickness);
  background: var(--color-surface);
  border-radius: 50%;
}
.onboarding-progress-ring-label {
  position: relative;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-brand-900);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.onboarding-progress-ring-label > span {
  font-size: 0.6rem;
  font-weight: 600;
  vertical-align: super;
  opacity: 0.7;
}

/* ---- Steps ---- */
.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
@media (min-width: 1024px) {
  .onboarding-steps { grid-template-columns: 1fr 1fr; gap: 0.5rem var(--space-5); }
}

.onboarding-step {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.onboarding-step:hover { background: color-mix(in srgb, var(--color-surface) 60%, transparent); }
.onboarding-step.is-done { opacity: 0.75; }

.onboarding-step-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-muted);
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.onboarding-step.is-done .onboarding-step-check {
  background: var(--color-brand-700);
  border-color: var(--color-brand-700);
  color: white;
}
.onboarding-step-num {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.onboarding-step-body { min-width: 0; flex: 1; }
.onboarding-step-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
.onboarding-step.is-done .onboarding-step-label {
  color: var(--color-ink-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-ink-soft) 50%, transparent);
}
.onboarding-step-link {
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.onboarding-step-link:hover { color: var(--color-brand-700); }
.onboarding-step-arrow {
  display: inline-flex;
  transition: transform var(--duration-fast) var(--ease-out);
}
.onboarding-step-link:hover .onboarding-step-arrow { transform: translateX(2px); }
.onboarding-step-desc {
  font-size: 0.78rem;
  line-height: var(--leading-snug);
  color: var(--color-muted);
  margin-top: 0.1rem;
}

/* ===============================================================
   Empty state panel.
   =============================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
}
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  margin-bottom: var(--space-3);
}
.empty-state-icon svg { width: 1.4rem; height: 1.4rem; }
.empty-state-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
}
.empty-state-body {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
  max-width: 28rem;
  line-height: var(--leading-snug);
}
.empty-state-extra { margin-top: var(--space-3); }

/* ===============================================================
   Breadcrumb trail.
   =============================================================== */

.breadcrumb-trail {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.breadcrumb-trail a {
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.15rem 0;
  border-radius: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb-trail a:hover { color: var(--color-brand-700); text-decoration: underline; }
.breadcrumb-current {
  color: var(--color-ink-soft);
  font-weight: 500;
}
.breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  color: var(--color-border-strong);
}

/* ---------- Password strength meter ----------------------------- */

.pw-meter-bar {
  height: 4px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.pw-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--color-neutral-200);
  transition: width var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.pw-meter[data-score="0"] .pw-meter-fill { width: 10%; background: var(--color-danger-fg); }
.pw-meter[data-score="1"] .pw-meter-fill { width: 25%; background: var(--color-danger-fg); }
.pw-meter[data-score="2"] .pw-meter-fill { width: 50%; background: var(--color-warn-fg); }
.pw-meter[data-score="3"] .pw-meter-fill { width: 75%; background: var(--color-brand-600); }
.pw-meter[data-score="4"] .pw-meter-fill { width: 100%; background: var(--color-ok-fg); }

/* ---------- Print stylesheet ----------------------------------- */
/* Browser print produces a usable artefact: nav chrome and floating
   action buttons hide, content reflows to full width, links print as
   plain colour, page breaks respect cards. PDF-template pages
   (rendered via WeasyPrint) ignore @media print and use their own
   @page rules. */

@media print {
  /* Hide the obvious chrome a printed page doesn't need. */
  .sidebar-shell, aside.sidebar, header.topbar,
  .skip-link, .billing-banner, #confirm-modal, .flash-messages,
  .no-print { display: none !important; }

  /* Anything tagged ``data-no-print`` opts out – useful for bulk-action
     bars, filter toolbars, accept/reject buttons on AI proposals. */
  [data-no-print] { display: none !important; }

  /* Main content goes full bleed; remove backgrounds so we don't burn
     toner on the brand band or surface tints. */
  main, .app-main, .content-wrap { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  body, main { background: white !important; color: black !important; }

  /* Cards stay readable but lose shadows + heavy borders. */
  .card, .card-quiet {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
  }

  /* Tables print cleanly with row borders only. */
  table { width: 100%; border-collapse: collapse; }
  thead { display: table-header-group; }   /* repeats on each page */
  tr { page-break-inside: avoid; }
  th, td { border-bottom: 1px solid #ddd !important; padding: 6px 8px !important; }

  /* Headings get sensible page-break behaviour. */
  h1, h2, h3 { page-break-after: avoid; }

  /* Links print URL after text for context – except inside tables,
     where it would clutter the layout. */
  a[href]:not([href^="#"])::after { content: " (" attr(href) ")"; font-size: 90%; color: #555; }
  table a[href]::after { content: ""; }

  /* Anchor every print to A4 portrait with a sane margin. */
  @page { size: A4; margin: 12mm; }
}

/* ===============================================================
   Sidebar – refined 2025 chrome.

   Quiet group headers (subtle tile icon + label + small chevron),
   tighter typography, generous breathing room. Active link gets a
   confident brand pill with a soft left accent.
   =============================================================== */

.sidebar-shell {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-3);
}

/* Collapse toggle (desktop) hides the sidebar entirely so the main
   content pane reclaims the full viewport width. State is stamped on
   <html> by the bootstrap script in base.html (reads localStorage
   before first paint to avoid a flash of the wrong layout). Mobile
   uses its own drawer toggle and is unaffected. */
@media (min-width: 768px) {
  :root.sidebar-collapsed .app-shell > aside#primary-nav {
    display: none;
  }
}

.sidebar-group { margin-top: var(--space-3); }
.sidebar-group:first-of-type { margin-top: 0; }

.sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out);
}
.sidebar-group-header:hover { color: var(--color-ink); }
.sidebar-group-header[aria-expanded="true"] { color: var(--color-ink); }

/* Tile icon inside group headers becomes subtle – no fill, just a
   thin outline so it doesn't compete with the label. */
.sidebar-group-header .tile-icon {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
}
.sidebar-group-header .tile-icon svg { width: 0.95rem; height: 0.95rem; }
.sidebar-group-header:hover .tile-icon,
.sidebar-group-header[aria-expanded="true"] .tile-icon {
  color: var(--color-brand-700);
}

.sidebar-group-header .chevron {
  margin-left: auto;
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--color-muted);
}
.sidebar-group-header[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.sidebar-group-body {
  margin: 0.15rem 0 0;
  padding-left: 0.6rem;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}
.sidebar-group-body > div {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-group[data-open="true"] .sidebar-group-body { grid-template-rows: 1fr; }

/* ---- Sidebar leaf links ---- */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.45rem 0.7rem 0.45rem 1.5rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.3;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.sidebar-link::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.sidebar-link:hover { background: var(--color-neutral-50); color: var(--color-ink); }
.sidebar-link:hover::before { background: var(--color-brand-400); }
.sidebar-link[aria-current="page"] {
  background: var(--color-brand-50);
  color: var(--color-brand-900);
  font-weight: 600;
}
.sidebar-link[aria-current="page"]::before {
  background: var(--color-brand-700);
  transform: translateY(-50%) scale(1.5);
}

/* ---- Top-level link (Dashboard) – bigger tile, no group ---- */
.sidebar-shell > nav > .sidebar-link {
  padding: 0.6rem 0.7rem;
  gap: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.sidebar-shell > nav > .sidebar-link::before { display: none; }
.sidebar-shell > nav > .sidebar-link .tile-icon {
  width: 1.6rem;
  height: 1.6rem;
}
.sidebar-shell > nav > .sidebar-link[aria-current="page"] {
  background: var(--color-brand-700);
  color: white;
}
.sidebar-shell > nav > .sidebar-link[aria-current="page"] .tile-icon {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.sidebar-section-label {
  padding: var(--space-3) 0.6rem var(--space-1);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

/* ===============================================================
   Topbar – refined header strip.
   =============================================================== */

.topbar-shell {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(140%) blur(8px);
  /* ``backdrop-filter`` creates its own stacking context. Without an
     explicit position + z-index, the search-results / language /
     tenant-switcher dropdowns inside the topbar would be trapped at
     the topbar's natural paint level – and end up hidden behind any
     ``position: relative`` content below (e.g. the dashboard hero).
     Pinning the topbar to a high z-index lifts the entire stacking
     context above the page content so the dropdowns float free. */
  position: relative;
  z-index: 40;
}
.topbar-input {
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.topbar-input:hover { background: var(--color-neutral-50); }
.topbar-input:focus-within {
  background: var(--color-surface);
  border-color: var(--color-brand-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 15%, transparent);
}

/* ---------- Page header pattern --------------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.page-header h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--leading-tight);
}
.page-header .breadcrumb {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}
.page-header .breadcrumb a { color: var(--color-muted); }
.page-header .breadcrumb a:hover { color: var(--color-ink); }
.page-header-lede {
  max-width: 46rem;
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
}

/* ---------- Tick slot and stroke (UI-C) ----------
   The two marks drawn from the logo: the tick in its slot for the state
   of a thing, the heavy round-ended stroke as a measure. Macros
   ``tick_slot`` and ``stroke`` in partials/_ui.html. Colours fall back
   to the classic tokens so both designs can use them. */
.ui-slot {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}
.ui-slot-sm { width: 1rem; height: 1rem; }
.ui-slot-lg { width: 1.625rem; height: 1.625rem; }
.ui-slot-ring { fill: none; stroke: var(--mark-faint, var(--color-border-strong)); stroke-width: 2.2; }
.ui-slot.is-todo .ui-slot-ring { stroke-dasharray: 2.2 3.6; stroke-linecap: round; }
.ui-slot-arc {
  fill: none;
  stroke: var(--mark-ink, var(--color-brand-700));
  stroke-width: 2.6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 12px 12px;
}
.ui-slot.is-risk .ui-slot-arc { stroke: var(--chart-warn, var(--color-warn-fg)); }
.ui-slot.is-late .ui-slot-ring { stroke: var(--color-danger-fg); }
.ui-slot-mark { fill: none; stroke: var(--color-danger-fg); stroke-width: 2.6; stroke-linecap: round; }
.ui-slot-disc { fill: var(--mark-accent, var(--color-brand-500)); }
.ui-slot-tick {
  fill: none;
  stroke: var(--mark-on-accent, #ffffff);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-stroke {
  position: relative;
  display: block;
  height: 0.625rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--mark-well, var(--color-neutral-100));
}
.ui-stroke > i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--mark-accent, var(--color-brand-500));
}
.ui-stroke-thin { height: 0.375rem; }
.ui-stroke-thin > i { min-width: 0.375rem; }
.ui-stroke-ink > i { background: var(--mark-ink, var(--color-brand-800)); }
.ui-stroke-warn > i { background: var(--chart-warn, var(--color-warn)); }
.ui-stroke-bad > i { background: var(--chart-bad, var(--color-danger)); }
/* state(): the tick slot beside the words (new design). */
.ui-state { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap;
            font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.ui-state .ui-slot { width: 1rem; height: 1rem; }
.ui-state-late { color: var(--color-danger-fg); }

/* Design system → Compare the designs: the page in each design, in a
   frame each, side by side on a wide screen, stacked on a narrow one. */
.ds-compare { display: grid; gap: var(--space-4); }
.ds-compare-both { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1279px) { .ds-compare-both { grid-template-columns: minmax(0, 1fr); } }
.ds-compare-pane { margin: 0; min-width: 0; }
.ds-compare-pane > figcaption {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}
.ds-compare-pane > iframe {
  display: block;
  width: 100%;
  height: 80vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

/* ---------- Decorative shapes (walkunda-inspired) -------------- */

/* Dot grid used as a subtle texture over brand-tinted backgrounds.
   Tile lifts to ``--color-brand-200`` so it reads as ambient
   pattern, not noise. */
.dot-pattern {
  background-image: radial-gradient(circle, var(--color-brand-200) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Wave separator – drops a soft white wave at the bottom of a
   brand-coloured section so the transition into the next surface
   feels organic rather than a hard line. Pair with .wave-bottom-tinted
   when the next surface is brand-50 instead of pure white. */
.wave-bottom { position: relative; }
.wave-bottom::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 64px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64'%3E%3Cpath fill='%23ffffff' d='M0,32L80,37.3C160,43,320,53,480,53.3C640,53,800,43,960,37.3C1120,32,1280,32,1360,32L1440,32L1440,64L1360,64C1280,64,1120,64,960,64C800,64,640,64,480,64C320,64,160,64,80,64L0,64Z'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 64px;
}
.wave-bottom-tinted::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64'%3E%3Cpath fill='%23F0FDF4' d='M0,32L80,37.3C160,43,320,53,480,53.3C640,53,800,43,960,37.3C1120,32,1280,32,1360,32L1440,32L1440,64L1360,64C1280,64,1120,64,960,64C800,64,640,64,480,64C320,64,160,64,80,64L0,64Z'/%3E%3C/svg%3E");
}

/* Brand-coloured gradient header used on the login page and any
   future marketing-ish surface (dashboard hero, empty states). */
.brand-gradient {
  background: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-800) 55%, var(--color-brand-700) 100%);
  color: var(--color-on-brand);
}

/* ====== Public marketing site ====================================
   The unauthenticated landing pages (atitic.eu, /capabilities,
   /use-cases, /pricing, /contact) reuse the auth-shell colour
   tokens so the visual signature is continuous from first paint
   through signup → login → app.                                     */

.marketing-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* ---------- Top nav ---------- */
.marketing-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.marketing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr auto;   /* brand | (spacer) | toggle */
  grid-template-areas:
    "brand . toggle"
    "drawer drawer drawer";
  column-gap: var(--space-3);
  align-items: center;
}

/* --- Hamburger button (mobile only) --- */
.marketing-nav-toggle {
  grid-area: toggle;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: transparent; border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-brand-900);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.marketing-nav-toggle:focus-visible {
  outline: 2px solid var(--color-brand-700);
  outline-offset: 2px;
}
.marketing-nav-toggle-close { display: none; }
.marketing-nav[data-open="true"] .marketing-nav-toggle-open { display: none; }
.marketing-nav[data-open="true"] .marketing-nav-toggle-close { display: inline-flex; }

/* --- Drawer (mobile: full-width row below the brand row, hidden until open) --- */
.marketing-nav-drawer {
  grid-area: drawer;
  display: none;
  width: 100%;
}
.marketing-nav[data-open="true"] .marketing-nav-drawer {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: #fff;
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin: var(--space-3) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));
}

.marketing-brand {
  grid-area: brand;
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  color: var(--color-brand-900);
  font-weight: 700; font-size: 1.05rem;
  min-width: 0;
}
.marketing-brand-logo {
  height: 1.75rem; width: auto; object-fit: contain;
}
.marketing-brand-wordmark { letter-spacing: -0.01em; }

/* Mobile-first link + CTA row inside the drawer */
.marketing-links {
  display: flex; flex-direction: column;
  gap: 0.15rem;
}
.marketing-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500; font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-md);
  transition: color 120ms ease, background 120ms ease;
}
.marketing-links a:hover { color: var(--color-text); background: var(--color-brand-50); }
.marketing-links a[aria-current="page"] { color: var(--color-brand-700); background: var(--color-brand-50); }

.marketing-cta-row {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}
.marketing-cta-row .marketing-link-button,
.marketing-cta-row .marketing-cta-button { justify-content: center; }

/* Desktop layout (>=720px): flatten the grid, hide the hamburger,
   always show the drawer inline as a horizontal nav. */
@media (min-width: 720px) {
  .marketing-nav-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand drawer";
  }
  .marketing-nav-toggle { display: none; }
  .marketing-nav-drawer,
  .marketing-nav[data-open="true"] .marketing-nav-drawer {
    display: flex; flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--space-4);
    padding: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .marketing-links {
    flex-direction: row; flex: 1 1 auto;
    justify-content: center;
    gap: var(--space-4);
    min-width: 0;
  }
  .marketing-links a {
    font-size: 0.92rem; padding: var(--space-1) var(--space-2);
  }
  .marketing-cta-row {
    flex-direction: row; align-items: center;
    padding-top: 0; border-top: 0;
    flex: 0 0 auto;
  }
  .marketing-cta-row .marketing-link-button,
  .marketing-cta-row .marketing-cta-button { justify-content: flex-start; }
}
.marketing-cta-button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--color-brand-700); color: var(--color-on-brand);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600; font-size: 0.92rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background 120ms ease, transform 120ms ease;
}
.marketing-cta-button:hover { background: var(--color-brand-800); transform: translateY(-1px); }
.marketing-link-button {
  display: inline-flex; align-items: center;
  color: var(--color-brand-800); text-decoration: none;
  padding: 0.55rem 0.75rem;
  font-weight: 600; font-size: 0.92rem;
  border-radius: var(--radius-md);
  transition: background 120ms ease;
}
.marketing-link-button:hover { background: var(--color-brand-50); }

/* ---------- Language picker (matches auth) ---------- */
.marketing-lang { position: relative; }
.marketing-lang > summary {
  display: inline-flex; align-items: center; gap: 0.35rem;
  list-style: none; cursor: pointer;
  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--color-text-muted); font-size: 0.85rem; font-weight: 500;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
}
.marketing-lang > summary::-webkit-details-marker { display: none; }
.marketing-lang > summary:hover { background: var(--color-brand-50); color: var(--color-text); }
.marketing-lang[open] > summary { background: var(--color-brand-50); color: var(--color-text); }
.marketing-lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.35rem);
  min-width: 9rem;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 0.25rem;
  z-index: 40;
}
.marketing-lang-menu form { margin: 0; }
.marketing-lang-option {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  font: inherit; color: var(--color-text); cursor: pointer; text-align: left;
}
.marketing-lang-option:hover { background: var(--color-brand-50); }
.marketing-lang-option.is-active { color: var(--color-brand-800); font-weight: 600; }
.marketing-lang-code { color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Content frame ---------- */
.marketing-content { flex: 1; }
.marketing-flash-wrap { max-width: 960px; margin: var(--space-3) auto 0; padding: 0 var(--space-4); }

/* ---------- Hero (landing) ---------- */
.marketing-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-800) 45%, var(--color-brand-700) 100%);
  color: var(--color-on-brand);
  padding: clamp(3.5rem, 8vw, 6rem) var(--space-4);
}
.marketing-hero-glow {
  position: absolute; pointer-events: none;
  inset: -20% -20% auto auto;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 60%);
  filter: blur(8px);
}
.marketing-hero-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.10;
  background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 24px 24px;
}
.marketing-hero-inner {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
}

/*
  Subtle enter-on-load stagger for hero copy + scroll-triggered reveal
  for sections below the fold. Both use the same easing so the page
  reads as one continuous unfold. Reduced-motion users get an
  instant, static render.
*/
.marketing-reveal {
  opacity: 0;
  animation: atitic-fade-slide-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--reveal-i, 0) * 90ms);
}
.marketing-scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.marketing-scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .marketing-reveal,
  .marketing-scroll-reveal {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}
.marketing-eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.78rem; font-weight: 600;
  color: var(--color-brand-200);           /* against dark hero */
}
/* Sub-page hero + tinted section use a light-green backdrop, so the
   default brand-200 eyebrow disappears. Swap to a darker shade for
   readable contrast in those contexts. */
.marketing-page-hero .marketing-eyebrow,
.marketing-section-tinted .marketing-eyebrow {
  color: var(--color-brand-700);
}
.marketing-hero-headline {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
.marketing-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.marketing-hero-cta {
  display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center;
  margin-top: var(--space-2);
}
.marketing-cta-button-large {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  background: #fff; color: var(--color-brand-900);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.marketing-cta-button-large:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.18); }
.marketing-link-button-large {
  display: inline-flex; align-items: center;
  color: #fff;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600; font-size: 1rem;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background 120ms ease, border-color 120ms ease;
}
.marketing-link-button-large:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.55); }
.marketing-hero-fineprint {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  margin: var(--space-2) 0 0;
}

/* ---------- Sub-page hero ---------- */
.marketing-page-hero {
  background: var(--color-brand-50);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-4);
  text-align: center;
}
.marketing-page-hero h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  line-height: 1.15; margin: var(--space-2) 0 var(--space-2);
  color: var(--color-brand-900); letter-spacing: -0.015em;
}
.marketing-page-lede {
  max-width: 640px; margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 1.05rem; line-height: 1.55;
}

/* ---------- Section wrapper ---------- */
.marketing-section {
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}
.marketing-section-tinted {
  max-width: none; margin: 0;
  background: var(--color-bg-subtle);
}
.marketing-section-tinted > * {
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.marketing-section-heading {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.marketing-section-heading h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}
.marketing-section-heading p {
  color: var(--color-text-muted);
  max-width: 580px; margin: 0 auto;
}
.marketing-section-cta { text-align: center; margin-top: var(--space-3); }
.marketing-section-cta a { color: var(--color-brand-700); font-weight: 600; text-decoration: none; }
.marketing-section-cta a:hover { text-decoration: underline; }

/* ---------- Card grids ---------- */
.marketing-grid-3 {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.marketing-grid-2 {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.marketing-card {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.marketing-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: var(--color-brand-200); }
.marketing-card h3 { margin: 0; font-size: 1.05rem; color: var(--color-text); }
.marketing-card p { margin: 0; color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.5; }
.marketing-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  margin-bottom: 0.25rem;
}
.marketing-card-long {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.marketing-card-long h3 {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; font-size: 1.08rem; color: var(--color-brand-900);
}
.marketing-card-long p { margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.marketing-link-arrow {
  margin-top: 0.5rem;
  color: var(--color-brand-700); text-decoration: none; font-weight: 600; font-size: 0.92rem;
}
.marketing-link-arrow:hover { text-decoration: underline; }

/* ---------- Feature list grid (landing) ---------- */
.marketing-feature-grid {
  list-style: none; padding: 0;
  margin: 0 auto;                   /* keep centred in .marketing-section-tinted */
  max-width: 1200px;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
  align-content: center;
}
.marketing-feature-grid li {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
  color: var(--color-text);
  flex: 0 0 220px;
}
.marketing-feature-grid li svg { color: var(--color-brand-700); flex-shrink: 0; }

/* ---------- Integrations grid ---------- */
.marketing-integration-grid {
  list-style: none; padding: 0;
  margin: 0 auto var(--space-3);
  max-width: 1200px;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center;
}
.marketing-integration-grid li {
  display: flex; align-items: center; gap: 0.45rem;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  color: var(--color-text);
  flex: 0 0 auto;
}
.marketing-integration-grid li svg { color: var(--color-brand-700); flex-shrink: 0; }
.marketing-integrations-heading {
  margin: var(--space-4) auto 0.6rem;
  max-width: 1200px;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-brand-800);
  text-align: center;
}
.marketing-integrations-note {
  margin: var(--space-3) auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--color-text-muted, var(--color-muted, #6b7280));
  font-size: 0.92rem;
}

/* ---------- Story rows (use-cases) ---------- */
.marketing-story-row {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 820px) { .marketing-story-row { grid-template-columns: 1fr; } }
.marketing-story-row-reverse > .marketing-story-side { order: 2; }
@media (max-width: 820px) { .marketing-story-row-reverse > .marketing-story-side { order: 0; } }
.marketing-story-side h2 {
  margin: 0.4rem 0 0.6rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
}
.marketing-story-side p { color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.marketing-story-points {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.marketing-story-points li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem;
}
.marketing-story-points strong { color: var(--color-text); }
.marketing-story-points p { color: var(--color-text-muted); margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.5; }
.marketing-bullet-icon {
  color: var(--color-brand-700);
  margin-top: 0.15rem;
}

/* ---------- Pricing ---------- */
.marketing-trial-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.marketing-trial-callout h2 { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--color-brand-900); }
.marketing-trial-callout p { margin: 0; color: var(--color-text-muted); max-width: 520px; }
.marketing-pricing-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.marketing-billing-toggle {
  display: flex;
  gap: 4px;
  width: max-content;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  margin: 0 auto 1.5rem;
}
.marketing-billing-toggle-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.marketing-billing-toggle-btn:hover { color: var(--color-brand-900); }
.marketing-billing-toggle-btn.is-active {
  background: var(--color-brand-700);
  color: var(--color-on-brand);
}
.marketing-pricing-savings {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.marketing-pricing-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.marketing-pricing-card-featured {
  border-color: var(--color-brand-700);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.marketing-pricing-badge {
  position: absolute; top: -0.7rem; right: var(--space-4);
  background: var(--color-brand-700); color: var(--color-on-brand);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.marketing-pricing-card header h3 {
  margin: 0; font-size: 1.2rem; color: var(--color-brand-900);
}
.marketing-pricing-tagline {
  margin: 0.3rem 0 0; color: var(--color-text-muted); font-size: 0.92rem;
}
.marketing-pricing-amount {
  margin: 0.9rem 0 0;
  font-size: 2rem; font-weight: 700; color: var(--color-text);
  letter-spacing: -0.02em;
}
.marketing-pricing-amount span {
  font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted);
}
.marketing-pricing-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.marketing-pricing-card ul li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.93rem; color: var(--color-text);
}
.marketing-pricing-card ul li svg { color: var(--color-brand-700); flex-shrink: 0; }
.marketing-pricing-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1rem;
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--color-border-subtle);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.marketing-pricing-cta:hover { background: var(--color-brand-50); color: var(--color-brand-900); border-color: var(--color-brand-200); }
.marketing-pricing-cta-featured {
  background: var(--color-brand-700);
  color: var(--color-on-brand);
  border-color: var(--color-brand-700);
}
.marketing-pricing-cta-featured:hover { background: var(--color-brand-800); color: var(--color-on-brand); border-color: var(--color-brand-800); }

.marketing-faq { display: flex; flex-direction: column; gap: 0.6rem; max-width: 800px; margin: 0 auto; }
.marketing-faq details {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
}
.marketing-faq details[open] { border-color: var(--color-brand-200); }
.marketing-faq summary {
  cursor: pointer; font-weight: 600; color: var(--color-text);
  list-style: none;
}
.marketing-faq summary::-webkit-details-marker { display: none; }
.marketing-faq summary::after {
  content: '+'; float: right; color: var(--color-brand-700); font-weight: 700; transition: transform 120ms ease;
}
.marketing-faq details[open] summary::after { content: '−'; }
.marketing-faq p { margin: 0.6rem 0 0; color: var(--color-text-muted); line-height: 1.55; }

/* Quiet in-line legal reminder under the final CTA on the landing page.
   The higher-specificity selector wins over the generic
   ``.marketing-section-cta-block p { margin: 0 0 var(--space-3); }``
   further down in this bundle, which would otherwise reset our
   top margin to 0 and kill the ``margin: auto`` horizontal centring. */
/* ---------- Pricing – full capability matrix (expandable) ----------
   Sits below the pricing cards inside a <details> so it stays out of
   the way until the visitor asks for a feature-by-feature compare.
   The table scrolls horizontally on narrow screens so mobile users
   still see every column without the page itself scrolling sideways.

   Colours are pinned to the LIGHT marketing surface (hardcoded #fff
   + ``--color-text`` for text) rather than the design-system tokens
   ``--color-surface`` / ``--color-ink`` that flip under
   ``data-theme="dark"`` (set by the base bootstrap on OS dark). The
   rest of the marketing site follows the same pattern – marketing
   pages are always the light brand surface regardless of OS theme.
   Without this the matrix rendered as dark cells with invisible text
   on mobile browsers that reported ``prefers-color-scheme: dark``. */
.marketing-capability-matrix {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.marketing-capability-matrix > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  color: var(--color-brand-900);
  background: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.marketing-capability-matrix > summary::-webkit-details-marker { display: none; }
.marketing-capability-matrix > summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform 180ms ease;
  color: var(--color-text-muted);
}
.marketing-capability-matrix[open] > summary::after { transform: rotate(180deg); }
.marketing-capability-matrix > summary:hover {
  background: #f7faf7;
}
.marketing-capability-matrix-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--color-border-subtle);
  background: #fff;
}
.marketing-capability-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 720px;
  background: #fff;
  color: var(--color-text);
}
.marketing-capability-matrix thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: #f7faf7;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: bottom;
}
.marketing-capability-matrix thead th.col-cap { width: 46%; }
.marketing-capability-matrix thead th.col-plan {
  text-align: center;
  width: 18%;
}
.marketing-capability-matrix tbody th,
.marketing-capability-matrix tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
  background: #fff;
  color: var(--color-text);
}
.marketing-capability-matrix tbody th {
  text-align: left;
  font-weight: 500;
}
.marketing-capability-matrix tbody td {
  text-align: center;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.marketing-capability-matrix tbody tr.cap-group th {
  background: #f7faf7;
  color: var(--color-brand-900);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
}
.marketing-capability-matrix tbody tr:last-child th,
.marketing-capability-matrix tbody tr:last-child td { border-bottom: none; }

.marketing-section-cta-block .marketing-legal-inline,
.marketing-legal-inline {
  margin-top: var(--space-8);
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  max-width: 40rem;
  line-height: 1.6;
  text-align: center;
}
.marketing-legal-inline a { color: var(--color-brand-700); text-decoration: underline; }

/* ---------- Contact ---------- */
.marketing-contact-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
  align-items: start;
}
@media (max-width: 820px) { .marketing-contact-grid { grid-template-columns: 1fr; } }
.marketing-contact-form {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.marketing-field { display: flex; flex-direction: column; gap: 0.35rem; }
.marketing-field label { font-weight: 600; font-size: 0.92rem; color: var(--color-text); }
.marketing-field-optional { color: var(--color-text-muted); font-weight: 500; font-size: 0.8rem; }
.marketing-field input,
.marketing-field textarea {
  font: inherit;
  padding: 0.65rem 0.8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.marketing-field input:focus,
.marketing-field textarea:focus {
  outline: none;
  border-color: var(--color-brand-700);
  box-shadow: 0 0 0 3px var(--color-brand-100);
}
.marketing-honeypot { position: absolute; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; }
.marketing-form-fineprint { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }
.marketing-contact-aside {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.marketing-contact-aside > div {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.marketing-contact-aside h3 {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1rem; color: var(--color-brand-900);
}
.marketing-contact-aside p { margin: 0; color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.5; }
.marketing-contact-aside a { color: var(--color-brand-800); text-decoration: none; font-weight: 600; }
.marketing-contact-aside a:hover { text-decoration: underline; }
.marketing-aside-note { font-size: 0.82rem; margin-top: 0.3rem; }

/* ---------- Self-survey ---------- */
.marketing-survey-meta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: var(--space-2) auto 0;
  color: var(--color-text-muted); font-size: 0.9rem;
}
.marketing-survey-meta svg { color: var(--color-brand-700); }
.marketing-survey-form {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 760px; margin: 0 auto;
}
.marketing-survey-lead,
.marketing-survey-section {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: 0;
}
.marketing-survey-lead legend,
.marketing-survey-section legend {
  display: inline-flex; align-items: flex-start; gap: 0.6rem;
  padding: 0; margin: 0 0 var(--space-3);
  font-weight: 600; color: var(--color-text);
}
.marketing-survey-lead legend small,
.marketing-survey-section legend small {
  display: block; font-weight: 400;
  color: var(--color-text-muted); font-size: 0.88rem; margin-top: 0.15rem;
}
.marketing-survey-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--color-brand-50); color: var(--color-brand-700);
  font-size: 0.85rem; font-weight: 700;
  flex-shrink: 0;
}
.marketing-survey-lead .marketing-field + .marketing-field { margin-top: var(--space-2); }
.marketing-survey-question + .marketing-survey-question {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-subtle);
}
.marketing-survey-prompt {
  margin: 0 0 0.5rem; color: var(--color-text); font-size: 0.96rem; line-height: 1.45;
}
.marketing-survey-choices {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.marketing-survey-choice {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer; font-size: 0.92rem;
  transition: background 120ms ease, border-color 120ms ease;
}
.marketing-survey-choice:hover { border-color: var(--color-brand-200); background: var(--color-brand-50); }
.marketing-survey-choice input { accent-color: var(--color-brand-700); margin: 0; }
.marketing-survey-choice:has(input:checked) {
  background: var(--color-brand-50);
  border-color: var(--color-brand-700);
  color: var(--color-brand-900);
  font-weight: 600;
}
.marketing-survey-score {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem;
  margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-lg);
}
.marketing-survey-score span { color: var(--color-brand-800); font-size: 0.85rem; }
.marketing-survey-score strong {
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--color-brand-900);
  letter-spacing: -0.02em;
}

/* ---------- Final-CTA block ---------- */
.marketing-section-cta-block {
  text-align: center;
  background: linear-gradient(135deg, var(--color-brand-50) 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-4);
  margin: 0 auto var(--space-5);
  max-width: 1100px;
}
.marketing-section-cta-block h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-brand-900);
  margin: 0 0 0.6rem;
}
.marketing-section-cta-block p { color: var(--color-text-muted); margin: 0 0 var(--space-3); }

/* ---------- Footer ---------- */
.marketing-footer {
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  margin-top: auto;
}
.marketing-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-4);
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
@media (max-width: 720px) {
  .marketing-footer-inner { grid-template-columns: 1fr; text-align: center; }
}
.marketing-footer-brand { display: flex; flex-direction: column; gap: 0.2rem; color: var(--color-text-muted); font-size: 0.9rem; }
.marketing-footer-brand strong { color: var(--color-brand-900); }
.marketing-footer-links {
  display: inline-flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
}
.marketing-footer-links a {
  color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem;
}
.marketing-footer-links a:hover { color: var(--color-text); }
.marketing-footer-meta {
  display: inline-flex; gap: var(--space-3); justify-content: flex-end;
  color: var(--color-text-muted); font-size: 0.85rem;
}
@media (max-width: 720px) { .marketing-footer-meta { justify-content: center; } }

/* ====== In-app Self-survey list + detail ========================== */
.data-card-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.data-card {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.data-card:hover { border-color: var(--color-brand-200); box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.data-card-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none; color: inherit;
}
.data-card-main h2 { margin: 0 0 0.2rem; font-size: 1rem; }
.data-card-meta { margin: 0; color: var(--color-text-muted, var(--color-muted, #6b7280)); font-size: 0.88rem; }
.data-card-score {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
  background: var(--color-brand-50);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.8rem;
  min-width: 5.5rem;
}
.data-card-score span { font-size: 0.75rem; color: var(--color-brand-800); letter-spacing: 0.04em; text-transform: uppercase; }
.data-card-score strong { font-size: 1.2rem; color: var(--color-brand-900); letter-spacing: -0.02em; }

.empty-state-cta-row {
  display: inline-flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center;
  margin-top: var(--space-2);
}

.self-survey-score-pill {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-md);
}
.self-survey-score-pill span { font-size: 0.75rem; color: var(--color-brand-800); letter-spacing: 0.04em; text-transform: uppercase; }
.self-survey-score-pill strong { font-size: 1.4rem; color: var(--color-brand-900); letter-spacing: -0.02em; }

.self-survey-answers {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.self-survey-answer {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border-left: 3px solid var(--color-border-subtle);
}
.self-survey-answer-yes     { border-left-color: var(--color-brand-700); }
.self-survey-answer-partial { border-left-color: var(--color-warn-fg, #d97706); }
.self-survey-answer-no      { border-left-color: var(--color-danger-fg, #dc2626); }
.self-survey-answer-unsure  { border-left-color: var(--color-border); }
.self-survey-prompt { margin: 0 0 0.4rem; font-weight: 500; }
.self-survey-value {
  margin: 0; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.92rem; color: var(--color-text-muted, var(--color-muted, #6b7280));
}
.self-survey-notes {
  margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--color-text-muted, var(--color-muted, #6b7280));
  font-style: italic;
}

/* ====== Cookie consent banner ===================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  font-size: 0.92rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-body { flex: 1 1 320px; min-width: 0; }
.cookie-banner-title {
  margin: 0 0 0.2rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-brand-800);
}
.cookie-banner-text {
  margin: 0;
  color: var(--color-text, var(--color-ink));
  line-height: 1.5;
}
.cookie-banner-text a {
  color: var(--color-brand-700); font-weight: 600; text-decoration: underline;
}
.cookie-banner-actions {
  display: inline-flex; gap: var(--space-2); align-items: center;
  flex-shrink: 0;
}
.cookie-banner-link {
  color: var(--color-brand-800); text-decoration: none; font-weight: 600;
  padding: 0.55rem 0.8rem; border-radius: var(--radius-md);
  transition: background 120ms ease;
}
.cookie-banner-link:hover { background: var(--color-brand-50); }
.cookie-banner-accept {
  background: var(--color-brand-700); color: var(--color-on-brand, #fff);
  border: 0; padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.cookie-banner-accept:hover { background: var(--color-brand-800); transform: translateY(-1px); }

/* ====== Cookie policy legal-page styling ========================== */
.marketing-legal {
  max-width: 860px;
  font-size: 0.98rem; line-height: 1.65;
  color: var(--color-text, var(--color-ink));
}
.marketing-legal h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.25rem; color: var(--color-brand-900);
  letter-spacing: -0.005em;
}
.marketing-legal p, .marketing-legal ul { margin: 0 0 0.8rem; }
.marketing-legal ul { padding-left: 1.2rem; }
.marketing-legal li { margin: 0.2rem 0; }
.marketing-legal a { color: var(--color-brand-700); font-weight: 500; }
.marketing-legal-updated {
  color: var(--color-text-muted, var(--color-muted, #6b7280));
  font-size: 0.9rem; margin: 0 0 var(--space-3);
}
.marketing-legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-4);
}
.marketing-legal-table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem;
}
.marketing-legal-table th, .marketing-legal-table td {
  text-align: left; padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.marketing-legal-table thead th {
  background: var(--color-bg-subtle);
  font-weight: 600; color: var(--color-brand-900);
  font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.marketing-legal-table tbody tr:last-child td { border-bottom: 0; }
.marketing-legal-table code {
  background: var(--color-neutral-50, var(--color-bg-subtle));
  padding: 0.05rem 0.35rem; border-radius: var(--radius-sm);
  font-size: 0.86rem;
}

/* Terms + Privacy chrome that the cookie-policy page doesn't need
   (draft-review banner, in-page table of contents). Sits inside
   .marketing-legal so it inherits typography and colour context. */
.marketing-legal-notice {
  background: color-mix(in srgb, var(--color-warn-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warn-fg) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.05rem;
  margin: 0 0 var(--space-4);
  font-size: 0.92rem;
  line-height: 1.55;
}
.marketing-legal-notice strong {
  color: color-mix(in srgb, var(--color-warn-fg) 60%, var(--color-text));
}
.marketing-legal-toc {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  margin: 0 0 var(--space-5);
  font-size: 0.9rem;
}
.marketing-legal-toc ol {
  columns: 2;
  column-gap: 1.6rem;
  margin: 0;
  padding-left: 1.2rem;
}
@media (max-width: 600px) { .marketing-legal-toc ol { columns: 1; } }
.marketing-legal-toc li { margin: 0.2rem 0; break-inside: avoid; }
.marketing-legal-toc a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.marketing-legal-toc a:hover { color: var(--color-brand-700); text-decoration: underline; }

/* Give scroll-target headings a bit of margin so anchor jumps land
   below the fixed top nav rather than under it. */
.marketing-legal h2[id] { scroll-margin-top: 6rem; }

/* Marketing footer cookie-policy link */
.marketing-footer-meta a {
  color: var(--color-text-muted, var(--color-muted, #6b7280));
  text-decoration: none;
}
.marketing-footer-meta a:hover { color: var(--color-text, var(--color-ink)); text-decoration: underline; }

/* ---------- Topbar dropdown chrome ----------
   Shared summary + menu shell for the tenant switcher and language
   picker in partials/topbar.html. Uses the surface-raised token so
   dark mode reads correctly without extra overrides. */
.topbar-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background 100ms ease;
}
.topbar-summary:hover { background: var(--color-neutral-100); }
.topbar-summary::-webkit-details-marker { display: none; }
.topbar-menu {
  position: absolute; top: 100%; margin-top: 0.5rem;
  z-index: 30;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.25rem;
}
.topbar-menu-left  { left: 0; }
.topbar-menu-right { right: 0; }

.menu-item {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background 100ms ease;
  background: transparent;
  border: 0;
  font-family: inherit;
  color: var(--color-ink);
  cursor: pointer;
}
.menu-item:hover { background: var(--color-neutral-100); }
.menu-item.is-current { background: var(--color-brand-50); font-weight: 600; }
.menu-item.is-quiet { cursor: default; }
.menu-item.is-quiet:hover { background: transparent; }

.menu-section-label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.35rem 0;
}

/* ---------- Topbar chip (consultancy > client breadcrumb) ----------
   A pill-shaped button-like element used to render the consultancy /
   client identity in the topbar. The two variants are:
     .topbar-chip-active  – current tenant, brand-tinted background
     .topbar-chip-parent  – ancestor tenant, quieter treatment with an
                            arrow-back icon that hints at "clicking
                            takes you here".
   Wrapped in ``.topbar-chip-group`` to keep the two chips visually
   coupled without stealing focus from the dropdown behaviours. */
.topbar-chip-group { display: inline-flex; align-items: center; gap: 0.25rem; }
.topbar-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
  max-width: 14rem;
}
.topbar-chip-active {
  background: var(--color-brand-50);
  border-color: var(--color-brand-200, color-mix(in srgb, var(--color-brand-500) 25%, transparent));
}
.topbar-chip-active:hover { background: color-mix(in srgb, var(--color-brand-500) 12%, transparent); }
.topbar-chip-parent {
  color: var(--color-ink-soft);
}
.topbar-chip-parent:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-border);
}

/* ---------- List-page filter row ----------
   Shared shell for list-page filter forms so every page uses the same
   spacing / heights and dark-mode-safe field styling. Pairs each
   input/select with the .field-clean-compact tightening so the row
   feels like filter chrome, not a full CRUD form. */
.filter-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
}
.filter-actions {
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.field-clean.field-clean-compact { gap: 0.2rem; }
.field-clean.field-clean-compact label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field-clean.field-clean-compact input,
.field-clean.field-clean-compact select,
.field-clean.field-clean-compact textarea {
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
}

/* ---------- Risk heatmap cells + legend ----------
   Band colouring pulls from the semantic *-bg tokens so the four
   severity bands read the same in both light and dark themes without
   further overrides. Cell links use a translucent surface layer so
   they stand out against the coloured cell. */
.heatmap-cell {
  width: 6rem; height: 6rem;
  vertical-align: top;
  border-radius: var(--radius-md);
}
.heatmap-cell-meta { color: var(--color-muted); }
.heatmap-band-low      { background: var(--color-ok-bg); }
.heatmap-band-medium   { background: var(--color-warn-bg); }
.heatmap-band-high     { background: var(--color-warn-bg); }
.heatmap-band-extreme  { background: var(--color-danger-bg); }
.heatmap-chip {
  font-size: 10px;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-ink);
  transition: background 100ms ease;
}
.heatmap-chip:hover { background: var(--color-surface); }
.heatmap-swatch {
  display: inline-block;
  width: 0.75rem; height: 0.75rem;
  border-radius: var(--radius-sm);
}

/* ---------- Search palette result hover / focus / keyboard-active ---------- */
.search-hit { transition: background-color 100ms ease; }
.search-hit:hover,
.search-hit:focus,
.search-hit.is-active { background: var(--color-neutral-100); }

/* ---------- Misc -------------------------------------------------- */

body { font-family: var(--font-sans); }

/* ===============================================================
   DESIGN SYSTEM (UI-1)
   ===============================================================
   The shared component layer. Everything below is prefixed ``ui-``
   and is used through the macros in ``partials/_ui.html``; a page
   should not write this markup by hand. The reference for every
   component is Platform → Design system.

   Rules this layer keeps:
   - Colour, radius, type and spacing come from tokens only, so tenant
     theming and dark mode apply without a single override here.
   - Sizes sit on the 4px spacing scale. Three radii in use: sm for
     controls, md for chips and inputs, lg for cards.
   - Two motion durations (fast, base), one easing, and the global
     reduced-motion rule above switches them off.
   - Density is a property of the container: ``data-density="compact"``
     on any ancestor tightens tables and lists inside it.
   =============================================================== */

:root {
  /* Layering. The topbar sits at 40 (see .topbar-shell). */
  --z-sticky: 10;
  --z-dropdown: 45;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;

  /* Density – comfortable by default. */
  --ui-row-y: var(--space-3);
  --ui-row-x: var(--space-4);
  --ui-control-h: 2.25rem;
}
[data-density="compact"] {
  --ui-row-y: var(--space-2);
  --ui-row-x: var(--space-3);
  --ui-control-h: 2rem;
}

/* ---------- Type scale -----------------------------------------
   Six sizes, one style per level. Use the class, not a font-size. */
.ui-display { font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.ui-h1      { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -0.015em; color: var(--color-ink); }
.ui-h2      { font-size: var(--text-lg);  line-height: var(--leading-snug);  font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }
.ui-h3      { font-size: var(--text-base); line-height: var(--leading-snug); font-weight: 600; color: var(--color-ink); }
.ui-body    { font-size: var(--text-sm);  line-height: var(--leading-normal); color: var(--color-ink-soft); }
.ui-caption { font-size: var(--text-xs);  line-height: var(--leading-snug);  color: var(--color-muted); }
.ui-eyebrow {
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ui-num { font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers -------------------------------------- */
.ui-stack   { display: flex; flex-direction: column; gap: var(--space-6); }
.ui-stack-sm{ display: flex; flex-direction: column; gap: var(--space-3); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ui-grid    { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ui-grid-2  { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ui-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Section header --------------------------------------
   Title, one line of help, actions on the right. Sits above a card
   or a group of cards; never inside a table. */
.ui-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.ui-section-header-text { min-width: 0; }
.ui-section-header-text > p { margin-top: var(--space-1); max-width: 46rem; }
.ui-section-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 640px) {
  .ui-section-header { flex-direction: column; align-items: stretch; }
}

/* ---------- Status pill ------------------------------------------
   The one way to show a state. Colour is never the only signal: the
   label carries the meaning and the dot is decoration. */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.375rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-neutral-100);
  color: var(--color-ink-soft);
}
.ui-pill-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; opacity: 0.85; flex-shrink: 0; }
.ui-pill-ok      { background: var(--color-ok-bg);     color: var(--color-ok-fg); }
.ui-pill-warn    { background: var(--color-warn-bg);   color: var(--color-warn-fg); }
.ui-pill-danger  { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.ui-pill-info    { background: var(--color-info-bg);   color: var(--color-info-fg); }
.ui-pill-brand   { background: var(--color-brand-50);  color: var(--color-brand-700); }
.ui-pill-neutral { background: var(--color-neutral-100); color: var(--color-ink-soft); }

/* ---------- Stat tile --------------------------------------------- */
.ui-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
a.ui-stat:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
.ui-stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ui-stat-icon { display: inline-flex; color: var(--color-brand-600); }
.ui-stat-icon > svg { width: 1.125rem; height: 1.125rem; }
.ui-stat-value {
  font-size: var(--text-3xl);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.ui-stat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 1.25rem; }
.ui-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.ui-stat-delta > svg { width: 0.875rem; height: 0.875rem; }
.ui-stat-delta-ok     { color: var(--color-ok-fg); }
.ui-stat-delta-danger { color: var(--color-danger-fg); }
.ui-stat-delta-warn   { color: var(--color-warn-fg); }

/* ---------- Tabs ---------------------------------------------------
   Links, not buttons: each tab is an address, so the active tab
   survives a reload and can be shared. */
.ui-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.ui-tab:hover { color: var(--color-ink); background: var(--color-neutral-50); }
.ui-tab[aria-current="page"] { color: var(--color-brand-700); font-weight: 600; }
.ui-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-brand-600);
}
.ui-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  color: var(--color-ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ui-tab[aria-current="page"] .ui-tab-count { background: var(--color-brand-50); color: var(--color-brand-700); }

/* ---------- Stepper ------------------------------------------------
   Horizontal on wide screens, a vertical list on narrow ones. */
.ui-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  counter-reset: ui-step;
}
.ui-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-neutral-200);
  color: var(--color-muted);
}
.ui-step-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; padding-top: 0.125rem; }
.ui-step-label a { color: inherit; text-decoration: none; }
.ui-step-label a:hover { text-decoration: underline; }
.ui-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.ui-step-marker > svg { width: 0.8125rem; height: 0.8125rem; }
.ui-step-label { font-size: var(--text-sm); font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-step-desc  { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--color-muted); }
.ui-step.is-done { border-top-color: var(--color-brand-600); color: var(--color-ink-soft); }
.ui-step.is-done .ui-step-marker { background: var(--color-brand-600); border-color: var(--color-brand-600); color: var(--color-on-brand); }
.ui-step.is-current { border-top-color: var(--color-brand-600); color: var(--color-ink); }
.ui-step.is-current .ui-step-marker {
  border-color: var(--color-brand-600);
  color: var(--color-brand-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 18%, transparent);
}
@media (max-width: 760px) {
  .ui-stepper { flex-direction: column; gap: 0; }
  .ui-step {
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    border-top: 0;
    border-left: 3px solid var(--color-neutral-200);
  }
  .ui-step.is-done, .ui-step.is-current { border-left-color: var(--color-brand-600); }
  .ui-step-label { white-space: normal; }
}

/* ---------- Progress ------------------------------------------------ */
.ui-progress { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ui-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ui-progress-track {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-200);
  overflow: hidden;
}
.ui-progress-fill {
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  border-radius: inherit;
  background: var(--color-brand-600);
  transition: width var(--duration-base) var(--ease-out);
}
.ui-progress-ok     .ui-progress-fill { background: var(--color-ok); }
.ui-progress-warn   .ui-progress-fill { background: var(--color-warn); }
.ui-progress-danger .ui-progress-fill { background: var(--color-danger); }

.ui-ring {
  --size: 3.5rem;
  --thickness: 0.375rem;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-brand-600) calc(var(--pct, 0) * 1%), var(--color-neutral-200) 0);
}
.ui-ring::before {
  content: "";
  position: absolute;
  inset: var(--thickness);
  border-radius: 50%;
  background: var(--color-surface);
}
.ui-ring-label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.ui-ring-sm { --size: 2.5rem; --thickness: 0.25rem; }
.ui-ring-sm .ui-ring-label { font-size: 0.6875rem; }
.ui-ring-lg { --size: 5rem; --thickness: 0.5rem; }
.ui-ring-lg .ui-ring-label { font-size: var(--text-lg); }

/* ---------- Avatar and owner chip ---------------------------------- */
.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-brand-100);
  color: var(--color-brand-800);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
.ui-avatar-sm { width: 1.375rem; height: 1.375rem; font-size: 0.5625rem; }
.ui-avatar-lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }
.ui-avatar-empty {
  background: transparent;
  border: 1.5px dashed var(--color-border-strong);
  color: var(--color-muted);
}
.ui-avatar-empty > svg { width: 55%; height: 55%; }
.ui-owner { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.ui-owner-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ui-owner-name { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-owner-sub  { font-size: var(--text-xs); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-owner.is-empty .ui-owner-name { color: var(--color-muted); font-weight: 400; }

/* ---------- Definition list ----------------------------------------
   Label and value pairs on a detail page. */
.ui-dl {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  margin: 0;
}
.ui-dl > dt,
.ui-dl > dd {
  padding: var(--ui-row-y) 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  min-width: 0;
}
.ui-dl > dt { font-size: var(--text-sm); color: var(--color-muted); padding-right: var(--space-4); }
.ui-dl > dd { font-size: var(--text-sm); color: var(--color-ink); overflow-wrap: anywhere; }
.ui-dl > dt:last-of-type,
.ui-dl > dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) {
  .ui-dl { grid-template-columns: 1fr; }
  .ui-dl > dt { border-bottom: 0; padding-bottom: 0; }
  .ui-dl > dd { padding-top: var(--space-1); }
}
.ui-empty-value { color: var(--color-muted); }

/* ---------- Data table ------------------------------------------------
   One table for every list. Wrap it in .ui-table-wrap (a card that
   scrolls sideways when it must). Below 640px rows become cards and
   each cell shows its column name from ``data-label``. */
.ui-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.ui-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ui-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--space-2) var(--ui-row-x);
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.ui-table tbody td {
  padding: var(--ui-row-y) var(--ui-row-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
.ui-table tbody tr:hover { background: var(--color-neutral-50); }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table td.ui-num { white-space: nowrap; }
.ui-table .is-actions { text-align: right; white-space: nowrap; width: 1%; }
.ui-table .is-primary a { font-weight: 600; color: var(--color-ink); text-decoration: none; }
.ui-table .is-primary a:hover { color: var(--color-brand-700); text-decoration: underline; }
.ui-table-sub { display: block; font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; margin-top: 0.125rem; }

.ui-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.ui-th-sort:hover { color: var(--color-ink); }
.ui-th-sort > svg { width: 0.75rem; height: 0.75rem; opacity: 0.45; }
th[aria-sort="ascending"] .ui-th-sort,
th[aria-sort="descending"] .ui-th-sort { color: var(--color-ink); }
th[aria-sort="ascending"] .ui-th-sort > svg,
th[aria-sort="descending"] .ui-th-sort > svg { opacity: 1; color: var(--color-brand-600); }

.ui-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--ui-row-x);
  border-top: 1px solid var(--color-border);
}
/* Pagination keeps to the right, with or without a count beside it. */
.ui-table-foot .ui-pagination { margin-left: auto; }

@media (max-width: 640px) {
  .ui-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ui-table, .ui-table tbody, .ui-table tr, .ui-table td { display: block; width: auto; }
  .ui-table tbody tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .ui-table tbody tr:last-child { border-bottom: 0; }
  .ui-table tbody td { padding: var(--space-1) 0; border-bottom: 0; text-align: left; }
  .ui-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .ui-table tbody td.is-primary::before { display: none; }
  .ui-table .is-num, .ui-table .is-actions { text-align: left; width: auto; }
}

/* ---------- Pagination ------------------------------------------------ */
.ui-pagination { display: inline-flex; align-items: center; gap: var(--space-1); }
.ui-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ui-page-link > svg { width: 0.875rem; height: 0.875rem; }
a.ui-page-link:hover { background: var(--color-neutral-100); color: var(--color-ink); }
.ui-page-link[aria-current="page"] { background: var(--color-brand-50); color: var(--color-brand-700); font-weight: 600; }
.ui-page-link.is-disabled { color: var(--color-neutral-400); cursor: default; }
.ui-page-gap { color: var(--color-muted); padding: 0 var(--space-1); }

/* ---------- Filter bar --------------------------------------------------
   A GET form above a table. Fields wrap; the result count and the
   clear link sit on the right. Active filters repeat below as chips,
   each removable on its own. */
.ui-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ui-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.ui-filter-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 9rem; }
.ui-filter-field.is-grow { flex: 1 1 14rem; }
.ui-filter-field > span { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.ui-input,
.ui-filter-field select,
.ui-filter-field input {
  height: var(--ui-control-h);
  width: 100%;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.ui-input:focus,
.ui-filter-field select:focus,
.ui-filter-field input:focus {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-600) 16%, transparent);
}
.ui-search { position: relative; }
.ui-search > svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}
.ui-search > input { padding-left: 2.25rem; }
.ui-filter-actions { display: flex; align-items: center; gap: var(--space-2); }
.ui-filter-meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.ui-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.625rem;
  padding: 0 var(--space-1) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brand-50);
  border: 1px solid var(--color-border-brand);
  color: var(--color-brand-800);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.ui-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  color: inherit;
  opacity: 0.7;
}
.ui-chip-remove:hover { opacity: 1; background: color-mix(in srgb, var(--color-brand-600) 16%, transparent); }
.ui-chip-remove > svg { width: 0.75rem; height: 0.75rem; }

/* ---------- Style guide page -------------------------------------------
   Layout of Platform → Design system only. Not for product pages. */
.ui-guide { max-width: 72rem; margin: 0 auto; }
.ui-guide-section { scroll-margin-top: var(--space-16); }
.ui-guide-demo {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.ui-guide-demo + .ui-guide-code { margin-top: var(--space-2); }
.ui-guide-code {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ui-guide-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.ui-guide-nav a { font-size: var(--text-sm); color: var(--color-brand-700); text-decoration: none; }
.ui-guide-nav a:hover { text-decoration: underline; }
.ui-swatches { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.ui-swatch { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ui-swatch-chip { height: 2.75rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.ui-scale-row { display: flex; align-items: center; gap: var(--space-4); }
.ui-scale-bar { height: 0.75rem; border-radius: 2px; background: var(--color-brand-400); flex-shrink: 0; }
.ui-shadow-demo {
  display: grid;
  place-items: center;
  height: 4.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

/* ============ Governance calendar: timeline (CAL-2) ============
   A server-rendered grid: a sticky label column, then one column per
   day (month, quarter) or week (year). Bars for planned periods, a
   diamond for a due date, a bell where the warning reminder goes out,
   a vertical line for today. Colours are the semantic tokens, so the
   new design, client branding and dark mode apply as they are. */
.cal-scroll { overflow-x: auto; }
.cal-grid {
  --cal-label: 15rem;
  position: relative;
  display: grid;
  align-items: center;
  font-size: var(--text-xs);
}
.cal-corner, .cal-label {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}
.cal-corner { align-self: stretch; }
.cal-month {
  padding: 0.375rem 0.5rem; font-weight: 600; color: var(--color-ink);
  border-left: 1px solid var(--color-border); white-space: nowrap; overflow: hidden;
}
.cal-tick {
  text-align: center; color: var(--color-muted); padding: 0.125rem 0;
  border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums;
}
.cal-tick.is-weekend { background: var(--color-neutral-50); }
.cal-tick.is-today { color: var(--color-ink); font-weight: 700; }
.cal-group {
  grid-column: 1 / -1;
  padding: 0.5rem 0.75rem; font-weight: 600; color: var(--color-muted);
  background: var(--color-neutral-50); border-top: 1px solid var(--color-border);
  position: sticky; left: 0;
}
.cal-label {
  padding: 0.375rem 0.75rem; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--color-neutral-100);
}
.cal-label button {
  text-align: left; color: var(--color-ink); font-weight: 500; font-size: var(--text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline;
  text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer;
}
.cal-label small { color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-rowline { grid-column: 2 / -1; align-self: stretch; border-top: 1px solid var(--color-neutral-100); }
.cal-mark {
  position: relative; z-index: 1; height: 1.25rem; display: flex; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.cal-bar {
  height: 0.875rem; width: 100%; border-radius: 999px;
  background: var(--color-info-bg); border: 1.5px solid var(--color-info-fg);
}
.cal-bar.cut-left { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.cal-bar.cut-right { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }
.cal-diamond {
  width: 0.75rem; height: 0.75rem; margin: 0 auto; transform: rotate(45deg);
  background: var(--color-info-fg); border-radius: 2px;
}
.cal-mark.is-overdue .cal-bar { background: var(--color-danger-bg); border-color: var(--color-danger-fg); }
.cal-mark.is-overdue .cal-diamond { background: var(--color-danger-fg); }
.cal-mark.is-due_soon .cal-bar { background: var(--color-warn-bg); border-color: var(--color-warn-fg); }
.cal-mark.is-due_soon .cal-diamond { background: var(--color-warn-fg); }
.cal-mark.is-done .cal-bar { background: var(--color-neutral-100); border-color: var(--color-border); }
.cal-mark.is-done .cal-diamond { background: var(--color-border); }
.cal-before {
  white-space: nowrap; color: var(--color-danger-fg); font-weight: 600; padding-left: 0.25rem;
}
.cal-bell { color: var(--color-muted); display: flex; justify-content: center; z-index: 1; pointer-events: none; }
.cal-bell svg { width: 0.75rem; height: 0.75rem; }
.cal-today {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 1; pointer-events: none;
  background: var(--color-danger-fg); opacity: 0.55;
}
.cal-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(26rem, 100%); overflow-y: auto; padding: 1.5rem;
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-raised);
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--color-muted); font-size: var(--text-xs); }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.cal-legend .cal-bar { width: 1.5rem; }
.cal-legend .cal-diamond { margin: 0; }
/* Drag to reschedule (CAL-6a): a movable mark shows it can be grabbed,
   and follows the pointer column by column while dragged. */
.cal-mark.is-movable { cursor: grab; touch-action: none; }
.cal-mark.is-dragging { cursor: grabbing; z-index: 3; opacity: 0.85; }
.cal-mark.is-dragging .cal-bar,
.cal-mark.is-dragging .cal-diamond { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* ===============================================================
   Charts (UI-3a). Drawn on the server (app/charts.py and
   partials/_charts.html); static/js/charts.js only adds read-outs.

   Every mark sets --mark to one colour role, --chart-<role>. Each
   design defines the roles for both themes (classic below, the new
   design in design_mark.css), so a theme switch recolours charts
   without a redraw. Marks are thin, the grid is a solid hairline,
   parts are parted by a 2px gap in the surface colour, and nothing
   moves on its own.

   Series colours (cat-1..4) are the same in both designs and were
   checked for colour-blind separation on the light and dark sheets:
   four may sit side by side in bars, at most three lines may cross.
   =============================================================== */

[data-design="classic"] {
  --chart-good: #22c55e;
  --chart-warn: #f59e0b;
  --chart-bad: #ef4444;
  --chart-sev-1: #22c55e;
  --chart-sev-2: #f59e0b;
  --chart-sev-3: #f97316;
  --chart-sev-4: #ef4444;
  --chart-quiet-1: #cbd5e1;
  --chart-quiet-2: #94a3b8;
  --chart-quiet-3: #3b82f6;
  --chart-line: var(--color-brand-600);
  --chart-gap: var(--color-surface);
  --chart-grid: var(--color-neutral-100);
  --chart-axis: var(--color-border-strong);
  --chart-cat-1: #2a78d6;
  --chart-cat-2: #eb6834;
  --chart-cat-3: #1baf7a;
  --chart-cat-4: #6250d6;
}
[data-design="classic"][data-theme="dark"] {
  --chart-quiet-1: #475569;
  --chart-quiet-2: #64748b;
  --chart-cat-1: #3987e5;
  --chart-cat-2: #d95926;
  --chart-cat-3: #199e70;
  --chart-cat-4: #9085e9;
}

.chart { position: relative; margin: 0; min-width: 0; }

/* Line / area: an axis column, the plot, and the date row under it.
   The plot height is set by the macro; the date row adds to it. */
.chart-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: var(--chart-h, 12rem) auto;
  column-gap: 0.5rem;
}
.chart-yaxis { position: relative; font-size: 11px; line-height: 1; color: var(--color-muted); text-align: right; }
.chart-ysizer { visibility: hidden; display: block; height: 0; overflow: hidden; white-space: nowrap; }
.chart-ytick { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-plot { position: relative; outline: none; touch-action: pan-y; }
.chart-plot:focus-visible { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--chart-line); border-radius: 2px; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-grid line { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-grid line.is-base { stroke: var(--chart-axis); }
.chart-stroke {
  fill: none; stroke: var(--mark); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.chart-area { fill: var(--mark); fill-opacity: 0.1; stroke: none; }
.chart-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--mark); box-shadow: 0 0 0 2px var(--chart-gap);
  pointer-events: none;
}
.chart-dot[hidden], .chart-cross[hidden] { display: none; }
.chart-cross {
  position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px;
  background: var(--chart-axis); pointer-events: none;
}
.chart-xaxis { position: relative; height: 1.25rem; font-size: 11px; color: var(--color-muted); }
.chart-xaxis span { position: absolute; top: 0.375rem; white-space: nowrap; transform: translateX(-50%); }
.chart-xaxis span.is-start { transform: none; }
.chart-xaxis span.is-end { transform: translateX(-100%); }

/* Legend: the dependable identity channel. Rect keys for areas and
   parts, a short stroke for lines. Text keeps the text colours. */
.chart-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.875rem;
  margin: 0.625rem 0 0; padding: 0; list-style: none;
  font-size: var(--text-xs, 0.75rem); color: var(--color-ink-soft);
}
.chart-legend li { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.chart-legend a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
.chart-legend a:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.chart-legend-value { color: var(--color-ink); font-weight: 600; }
.chart-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--mark); flex: none; }
.chart-key-line { width: 14px; height: 2px; border-radius: 1px; }

/* Donut */
.chart-donut { display: flex; flex-direction: column; align-items: center; }
.chart-donut-ring { position: relative; flex: none; }
.chart-donut-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-seg { fill: var(--mark); stroke: var(--chart-gap); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-seg.is-whole { stroke: none; }
.chart-donut a .chart-seg { cursor: pointer; }
.chart-donut-empty { fill: var(--chart-quiet-1); opacity: 0.6; }
.chart-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.chart-donut-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--color-ink); }
.chart-donut-label { font-size: 11px; color: var(--color-muted); margin-top: 0.125rem; }
.chart-donut-sm .chart-donut-value { font-size: 1.0625rem; font-weight: 600; }

/* Ranking bars: label, bar, value per row. Bars are thin, square at
   the baseline and rounded at the value end. */
.chart-bar-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.chart-bar-row {
  display: grid; grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr) auto;
  align-items: center; gap: 0.75rem; font-size: var(--text-sm, 0.875rem);
}
.chart-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-soft); }
.chart-bar-label a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
.chart-bar-label a:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.chart-bar-track { position: relative; height: 10px; }
.chart-bar-track::before {
  content: ""; position: absolute; left: 0; top: -3px; bottom: -3px; width: 1px; background: var(--chart-axis);
}
.chart-bar {
  position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px;
  background: var(--mark); border-radius: 0 4px 4px 0;
}
.chart-bar-value { color: var(--color-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Sparkline (server SVG, no script). */
.chart-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.chart-spark-line { fill: none; stroke: var(--mark); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart-spark-end { fill: var(--mark); stroke: var(--chart-gap); stroke-width: 2; }

/* Hover: the mark under the pointer stays, its siblings step back.
   No transition – the change is immediate. */
.chart.has-hot [data-tip]:not(.is-hot) { opacity: 0.45; }

/* The one read-out, shared by every chart on the page. Value first,
   then what it is. */
.chart-tip {
  position: fixed; z-index: 70; pointer-events: none; max-width: 18rem;
  padding: 0.4rem 0.6rem; border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-raised, 0 10px 28px -14px rgba(0, 0, 0, 0.3));
  font-size: 12px; line-height: 1.35; color: var(--color-ink);
}
.chart-tip[hidden] { display: none; }
.chart-tip-head { color: var(--color-muted); margin-bottom: 0.2rem; }
.chart-tip-row { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.chart-tip-key { width: 12px; height: 2px; border-radius: 1px; background: var(--mark); flex: none; }
.chart-tip-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-tip-label { color: var(--color-ink-soft); }
.chart-tip-note { color: var(--color-muted); }

@media (forced-colors: active) {
  .chart svg, .chart-dot, .chart-key, .chart-bar, .chart-spark { forced-color-adjust: none; }
}

/* ===============================================================
   Dashboard views (UI-3b). One set of widgets for both designs: the
   new design styles the same classes more boldly in
   design_mark.css. A row of figures, then two columns of sheets.
   =============================================================== */

/* View switch on the left, period on the right: one row above
   everything it scopes. */
.dash-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-5);
}
.dash-tools .ui-tabs { flex: 1 1 auto; min-width: 0; }
.dash-period { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dash-period-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.dash-period-set {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.dash-period-set a {
  padding: 0.3rem 0.65rem;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.dash-period-set a:hover { color: var(--color-ink); background: var(--color-neutral-50); }
.dash-period-set a[aria-current="true"] { color: var(--color-surface); background: var(--color-ink); }
.dash-period-set a:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 1px; }

/* The figures: each is a link to the list behind its number. */
.dash-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
/* Never three-and-one: two by two until four fit side by side. */
@media (max-width: 1099px) {
  .dash-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .dash-figs { grid-template-columns: minmax(0, 1fr); }
}
/* A row of exactly three stays three across. */
.dash-figs.dash-figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 699px) {
  .dash-figs.dash-figs-3 { grid-template-columns: minmax(0, 1fr); }
}
.dash-fig-note { font-size: var(--text-xs); color: var(--color-muted); }
.dash-fig-note.is-good { color: var(--color-ok-fg); font-weight: 600; }
.dash-fig-note.is-bad { color: var(--color-danger-fg); font-weight: 600; }
.dash-fig-spark { margin-left: auto; }
.ui-stat-value.is-bad { color: var(--color-danger-fg); }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}
.dash-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
@media (max-width: 1023px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
.dash-wide { margin-bottom: var(--space-5); }
.dash-sheet { padding: 1.25rem 1.5rem; }
.dash-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dash-sheet-head h2 { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--color-ink); }
.dash-sheet-head a { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); white-space: nowrap; text-decoration: none; }
.dash-sheet-head a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.dash-sheet-sub { margin: -0.375rem 0 var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.dash-empty { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.dash-more { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.dash-more:hover { color: var(--color-ink); }

/* A row in a list: state mark, what it is, when. */
.dash-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  color: inherit;
  text-decoration: none;
}
.dash-item + .dash-item { border-top: 1px solid var(--color-border); }
.dash-item-text { min-width: 0; }
.dash-item b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}
.dash-item:hover b { text-decoration: underline; text-underline-offset: 2px; }
.dash-item small { font-size: var(--text-xs); color: var(--color-muted); }
.dash-item .ui-slot { display: block; width: 1.125rem; height: 1.125rem; }
.dash-when { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; color: var(--color-muted); }
.dash-when.is-late { color: var(--color-danger-fg); }

/* Programs, one row each: name, measure, figure. */
.dash-prog {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: var(--space-4);
  padding: 0.625rem 0;
}
.dash-prog + .dash-prog { border-top: 1px solid var(--color-border); }
.dash-prog-name a { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); text-decoration: none; }
.dash-prog-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.dash-prog small { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.dash-prog-val { text-align: right; font-size: var(--text-lg); font-weight: 700; line-height: 1; color: var(--color-ink); }
.dash-prog-val small { margin-top: 0.3rem; line-height: 1.2; }
.dash-prog-val small.is-bad { color: var(--color-danger-fg); font-weight: 600; }
.dash-prog-val small.is-good { color: var(--color-ok-fg); font-weight: 600; }
@media (max-width: 639px) {
  .dash-prog { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .dash-prog .ui-stroke { grid-column: 1 / -1; order: 3; }
}

/* Small figure rows inside a sheet: label, figure, sparkline. */
.dash-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0;
  color: inherit;
  text-decoration: none;
}
.dash-kv + .dash-kv { border-top: 1px solid var(--color-border); }
.dash-kv-label { font-size: var(--text-sm); color: var(--color-ink-soft); }
.dash-kv-val { font-size: var(--text-base); font-weight: 700; color: var(--color-ink); text-align: right; font-variant-numeric: tabular-nums; }
.dash-kv-val.is-bad { color: var(--color-danger-fg); }
a.dash-kv:hover .dash-kv-label { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }

.dash-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-5); }
@media (max-width: 1099px) {
  .dash-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dash-donuts > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dash-donut-title { font-size: var(--text-xs); color: var(--color-muted); text-decoration: underline; margin-bottom: var(--space-2); text-align: center; }