/*
 * CommonLynk — Component Classes
 * Reusable UI primitives that consume the design tokens in
 * commonlynk.tokens.css. Load AFTER the tokens file.
 *
 * Always prefer these classes over bespoke per-page button/badge/card CSS so
 * the whole platform stays visually consistent. New variants belong here, not
 * in template <style> blocks.
 */

/* ── Buttons ──────────────────────────────────────────── */

.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--cl-btn-padding-y) var(--cl-btn-padding-x);
  font-size: var(--cl-btn-font-size);
  font-weight: var(--cl-btn-font-weight);
  font-family: var(--cl-font-sans);
  line-height: 1.4;
  border-radius: var(--cl-btn-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--cl-btn-transition);
  white-space: nowrap;
}
.cl-btn:disabled,
.cl-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.cl-btn-primary   { background: var(--cl-ink);  color: var(--cl-white); }
.cl-btn-primary:hover  { background: color-mix(in srgb, var(--cl-ink) 85%, transparent); }

.cl-btn-secondary { background: var(--cl-teal);    color: var(--cl-white); }
.cl-btn-secondary:hover { opacity: 0.88; }

.cl-btn-danger    { background: var(--cl-danger);  color: var(--cl-white); }
.cl-btn-danger:hover { opacity: 0.88; }

/* Outline danger — quiet until hover; used for Suspend/Delete actions that
   shouldn't shout in their resting state (was the bespoke admin .btn-danger). */
.cl-btn-danger-outline { background: var(--cl-white); color: var(--cl-danger); border: 1px solid var(--cl-border); }
.cl-btn-danger-outline:hover { background: var(--cl-danger); color: var(--cl-white); border-color: var(--cl-danger); }

.cl-btn-ghost     { background: transparent; color: var(--cl-ink); border: 1.5px solid var(--cl-border); }
.cl-btn-ghost:hover { background: var(--cl-paper); }

.cl-btn-muted     { background: var(--cl-border);  color: var(--cl-muted); }

/* Sizes */
.cl-btn-sm {
  padding: var(--cl-btn-padding-y-sm) var(--cl-btn-padding-x-sm);
  font-size: var(--cl-btn-font-size-sm);
}
.cl-btn-lg {
  padding: var(--cl-btn-padding-y-lg) var(--cl-btn-padding-x-lg);
  font-size: 1rem;
}

/* ── Badges ───────────────────────────────────────────── */

.cl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.65em;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--cl-radius-badge);
  line-height: 1.4;
  white-space: nowrap;
}
.cl-badge-success  { background: var(--cl-teal-bg);    color: var(--cl-teal-dark); }
.cl-badge-warning  { background: var(--cl-warning-bg); color: var(--cl-warning); }
.cl-badge-danger   { background: var(--cl-danger-bg);  color: var(--cl-danger); }
.cl-badge-info     { background: var(--cl-info-bg);    color: var(--cl-info); }
.cl-badge-muted    { background: var(--cl-border);     color: var(--cl-muted); }
.cl-badge-accent   { background: var(--cl-accent);     color: var(--cl-ink); }
.cl-badge-teal     { background: var(--cl-teal-bg);    color: var(--cl-teal-dark); }  /* same as success but explicit */
.cl-badge-gold     { background: var(--cl-warn-bg);     color: var(--cl-warn-text); }
.cl-badge-linked   { background: var(--cl-info-bg);    color: var(--cl-info); }
.cl-badge-unlinked { background: var(--cl-border);     color: var(--cl-muted); }
.cl-badge-solid    { background: var(--cl-ink);        color: var(--cl-white); }
.cl-badge-outline  { background: transparent;          color: var(--cl-ink); border: 1px solid var(--cl-ink); }

/* ── Cards ────────────────────────────────────────────── */

.cl-card {
  background: var(--cl-white);
  border-radius: var(--cl-radius-card);
  border: 1px solid var(--cl-border);
  box-shadow: var(--cl-shadow-sm);
  padding: 1.5rem;
}

/* ── Responsive Table Wrapper ─────────────────────────── */
.cl-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cl-radius-md);
  border: 1px solid var(--cl-border);
}

/* Legacy `.table-wrap` (used widely on tenant pages and Platform Admin pages
   that extend superadmin/base.html, where it was never defined). Borderless so
   it doesn't double up when nested inside a .card. Gives every existing wrapped
   table horizontal scroll on narrow screens. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Responsive Grid Helpers ──────────────────────────── */
.cl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 768px) {
  .cl-grid-2 { grid-template-columns: 1fr; }
  .cl-grid-3 { grid-template-columns: 1fr; }
  .cl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cl-grid-4 { grid-template-columns: 1fr; }
}

/* ── Responsive Form Rows ─────────────────────────────── */
.cl-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* ── Stack / split utilities ──────────────────────────── */
.cl-stack { display: flex; flex-direction: column; gap: 1rem; }
.cl-split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }

/* ── Hide/show ────────────────────────────────────────── */
@media (max-width: 768px) {
  .cl-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .cl-hide-desktop { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 (2026-08-27)
   ───────────────────────────────────────────────────────────────────────────
   Everything above this line predates the design system and is IN USE:
   `.cl-btn-primary` alone has 143 call sites. Nothing above is renamed or
   removed — this block ADDS the system's vocabulary and aliases the existing
   classes into it, so a page can migrate one element at a time.

   Naming: the system's canonical form is BEM (`.cl-btn--primary`). The legacy
   single-dash form (`.cl-btn-primary`) is kept as an equal-weight alias
   FOREVER, not as a deprecation — 143 templates is not a rename worth doing,
   and a half-finished rename is worse than either name.

   Colour rule: this file may name a colour only as var(--cl-*),
   rgba(var(--cl-*-rgb), …) or color-mix() over those. A raw hex here is the
   same defect the deploy guard fails templates for — it just isn't scanned,
   which makes it MORE important to hold the line by hand.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Buttons — the five roles ──────────────────────────────────────────────
   primary   navy, white text   the one affirmative action on a light ground
                                (Add, Save, Sign up, Get Started, Continue)
   secondary white, hairline    the alternative to primary; sits beside it
   danger    red                destructive, and only destructive
   accent    gold               accent emphasis on a light ground
   on-navy   gold / white       the primary action ON a navy surface, where a
                                navy button would vanish
   Sentence case. A line icon is fine; an emoji is not (guard-enforced). */

.cl-btn--primary { background: var(--cl-btn-primary); color: var(--cl-btn-text); border: 1px solid transparent; }
.cl-btn--primary:hover { background: color-mix(in srgb, var(--cl-ink) 85%, var(--cl-white)); }

/* The alternative action. White ground + hairline — which is exactly what
   `.cl-btn-ghost` already renders, so the two are one rule, not two looks. */
.cl-btn--secondary,
.cl-btn--ghost {
  background: var(--cl-white);
  color: var(--cl-ink);
  border: 1px solid var(--cl-border);
}
.cl-btn--secondary:hover,
.cl-btn--ghost:hover { background: var(--cl-paper); border-color: color-mix(in srgb, var(--cl-ink) 22%, transparent); }

.cl-btn--danger { background: var(--cl-danger); color: var(--cl-white); border: 1px solid transparent; }
.cl-btn--danger:hover { background: color-mix(in srgb, var(--cl-danger) 86%, var(--cl-ink)); }

.cl-btn--accent { background: var(--cl-accent); color: var(--cl-ink); border: 1px solid transparent; }
.cl-btn--accent:hover { background: var(--cl-accent-deep); color: var(--cl-white); }

/* On a navy surface (the sidebar, a navy hero, a navy card). Gold fill, ink
   text — the inversion of --primary, and the ONLY other place gold carries an
   action. */
.cl-btn--on-navy { background: var(--cl-accent); color: var(--cl-ink); border: 1px solid transparent; }
.cl-btn--on-navy:hover { background: color-mix(in srgb, var(--cl-accent) 84%, var(--cl-white)); }
/* Quiet variant of the same, for a secondary action on navy. */
.cl-btn--on-navy-quiet {
  background: transparent;
  color: var(--cl-white);
  border: 1px solid rgba(var(--cl-white-rgb), 0.32);
}
.cl-btn--on-navy-quiet:hover { background: rgba(var(--cl-white-rgb), 0.10); border-color: rgba(var(--cl-white-rgb), 0.5); }

/* Size aliases in the BEM form. */
.cl-btn--sm { padding: var(--cl-btn-padding-y-sm) var(--cl-btn-padding-x-sm); font-size: var(--cl-btn-font-size-sm); }
.cl-btn--lg { padding: var(--cl-btn-padding-y-lg) var(--cl-btn-padding-x-lg); font-size: 1rem; }
.cl-btn--block { width: 100%; justify-content: center; }

/* Keyboard operators must be able to see which control they are on. */
.cl-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cl-focus-ring); }

/* A line icon inside a button inherits the text colour and never grows. */
.cl-btn > svg { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; }


/* ── Pills — semantic status ───────────────────────────────────────────────
   Distinct from `.cl-badge` above (which carries a dozen ad-hoc variants).
   `.cl-pill` is the SEMANTIC set only: five meanings, five looks, no more. */

.cl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.7em;
  font-size: var(--cl-fs-small);
  font-weight: var(--cl-fw-semibold);
  line-height: 1.5;
  border-radius: var(--cl-radius-badge);
  white-space: nowrap;
}
.cl-pill--success { background: var(--cl-teal-bg);    color: var(--cl-teal-dark); }
.cl-pill--info    { background: var(--cl-info-bg);    color: var(--cl-info); }
.cl-pill--warning { background: var(--cl-warning-bg); color: var(--cl-warning); }
.cl-pill--danger  { background: var(--cl-danger-bg);  color: var(--cl-danger); }
.cl-pill--neutral { background: var(--cl-paper);      color: var(--cl-muted); border: 1px solid var(--cl-border); }
/* A leading dot reads as a status light without any colour-only meaning. */
.cl-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }


/* ── Stat ─────────────────────────────────────────────────────────────────
   Uppercase muted label over a large ink number. The label is tracked out
   (--cl-track-label) so it reads as a field name, not a heading. */

.cl-stat {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-card);
  padding: 1.1rem 1.25rem;
}
.cl-stat__label {
  font-size: var(--cl-fs-label);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-track-label);
  text-transform: uppercase;
  color: var(--cl-muted);
  margin-bottom: 0.5rem;
}
.cl-stat__value {
  font-size: var(--cl-fs-h1);
  font-weight: var(--cl-fw-light);
  letter-spacing: var(--cl-track-heading);
  color: var(--cl-ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cl-stat__sub { margin-top: 0.35rem; font-size: var(--cl-fs-small); color: var(--cl-muted); }
/* Accent rule on the inline-start edge, for the one stat that leads. */
.cl-stat--accent { border-inline-start: 3px solid var(--cl-accent); }


/* ── Card chrome ──────────────────────────────────────────────────────────
   `.cl-card` itself is defined above. These are its parts. */

.cl-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: -1.5rem -1.5rem 1.25rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cl-border);
}
.cl-card__title {
  font-size: var(--cl-fs-h2);
  font-weight: var(--cl-fw-medium);
  letter-spacing: var(--cl-track-heading);
  color: var(--cl-ink);
  margin: 0;
}
.cl-card__flush { margin: 0 -1.5rem -1.5rem; }


/* ── Table ────────────────────────────────────────────────────────────────
   Uppercase muted header, hairline rows, paper hover. Row actions use the
   EXISTING `.cl-row-actions` / `.cl-actions-*` dropdown from the tokens file —
   there is deliberately no second kebab component. */

.cl-table { width: 100%; border-collapse: collapse; font-size: var(--cl-fs-body); }
.cl-table thead th {
  text-align: start;
  padding: 0.7rem 0.9rem;
  font-size: var(--cl-fs-label);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-track-label);
  text-transform: uppercase;
  color: var(--cl-muted);
  border-bottom: 1px solid var(--cl-border);
  white-space: nowrap;
}
.cl-table tbody td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-ink);
  vertical-align: middle;
}
.cl-table tbody tr:last-child td { border-bottom: none; }
.cl-table tbody tr:hover { background: var(--cl-paper); }
.cl-table__num { text-align: end; font-variant-numeric: tabular-nums; }
/* The action column hugs the inline-end edge and never wraps. */
.cl-table__actions { width: 1%; white-space: nowrap; text-align: end; }


/* ── Avatar ───────────────────────────────────────────────────────────────
   Initials on warm gold. Used in the sidebar footer and beside a person's
   name in a list. */

.cl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--cl-accent);
  color: var(--cl-ink);
  font-size: var(--cl-fs-small);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
.cl-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.cl-avatar--lg { width: 44px; height: 44px; font-size: var(--cl-fs-body); }
/* On the navy rail the gold disc needs no border; on paper it does. */
.cl-avatar--on-paper { box-shadow: 0 0 0 1px rgba(var(--cl-ink-rgb), 0.08); }
.cl-avatar--xl { width: 88px; height: 88px; font-size: var(--cl-fs-h1); font-weight: var(--cl-fw-medium); }
/* Squircle, per the 2026 shape review — brand tiles and record avatars. */
.cl-avatar--square { border-radius: var(--cl-radius-lg); }
/* Gold is the CURRENT USER (design system 5.6). A record gets a quiet warm
   tint instead, so a 25-row list is not a wall of accent colour. */
.cl-avatar--record { background: var(--cl-paper); color: var(--cl-ink); box-shadow: inset 0 0 0 1px var(--cl-border); }


/* ── Form controls ────────────────────────────────────────────────────────
   Accent focus ring, ink text, hairline border. Never blue: the browser
   default focus/selected blue is the single most common way a page stops
   looking like CommonLynk. */

.cl-label {
  display: block;
  font-size: var(--cl-fs-label);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-track-label);
  text-transform: uppercase;
  color: var(--cl-muted);
  margin-bottom: 0.4rem;
}
.cl-label__required { color: var(--cl-danger); margin-inline-start: 2px; }

.cl-input, .cl-select, .cl-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  font-family: var(--cl-font-sans);
  font-size: var(--cl-fs-body);
  color: var(--cl-ink);
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-btn-radius);
  transition: border-color var(--cl-transition-fast), box-shadow var(--cl-transition-fast);
}
.cl-textarea { min-height: 96px; resize: vertical; }
.cl-select { appearance: auto; }
.cl-input::placeholder, .cl-textarea::placeholder { color: var(--cl-muted); }
.cl-input:focus, .cl-select:focus, .cl-textarea:focus {
  outline: none;
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px var(--cl-focus-ring);
}
.cl-input:disabled, .cl-select:disabled, .cl-textarea:disabled {
  background: var(--cl-paper);
  color: var(--cl-muted);
  cursor: not-allowed;
}
.cl-input--error, .cl-select--error, .cl-textarea--error { border-color: var(--cl-danger); }
.cl-field { margin-bottom: 1.1rem; }
.cl-field__hint  { margin-top: 0.35rem; font-size: var(--cl-fs-small); color: var(--cl-muted); }
.cl-field__error { margin-top: 0.35rem; font-size: var(--cl-fs-small); color: var(--cl-danger); }

/* Radio + checkbox — ink when checked, accent ring on focus. `accent-color`
   does both the fill and the tick in one property on every current engine. */
.cl-check, .cl-radio {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--cl-ink);
  cursor: pointer;
}
.cl-check:focus-visible, .cl-radio:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cl-focus-ring); }

/* Selectable card — the big tappable option (a tenant type, a plan, a survey
   answer). SELECTED IS INK + ACCENT, never blue. */
.cl-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  text-align: start;
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-card);
  color: var(--cl-ink);
  font-size: var(--cl-fs-body);
  font-family: var(--cl-font-sans);
  cursor: pointer;
  transition: border-color var(--cl-transition-fast), background var(--cl-transition-fast), box-shadow var(--cl-transition-fast);
}
.cl-option:hover { border-color: color-mix(in srgb, var(--cl-ink) 28%, transparent); background: var(--cl-paper); }
.cl-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cl-focus-ring); }
.cl-option.is-selected,
.cl-option[aria-pressed="true"],
.cl-option:has(input:checked) {
  border-color: var(--cl-ink);
  background: rgba(var(--cl-accent-rgb), 0.10);
  box-shadow: inset 3px 0 0 0 var(--cl-accent);
}
.cl-option__title { font-weight: var(--cl-fw-medium); }
.cl-option__desc  { font-size: var(--cl-fs-small); color: var(--cl-muted); margin-top: 2px; }
.cl-option__body  { flex: 1; min-width: 0; }
/* Compact row — the density the one-question-per-page layout needs so four
   options fit one viewport without scrolling. */
.cl-option--compact { padding: 0.6rem 0.85rem; border-radius: var(--cl-radius-md); }

/* Bilingual EN/AR inline toggle — the little segmented control that sits on a
   field label. Cosmetic only; the popup partial owns the behaviour. */
.cl-lang-toggle {
  display: inline-flex;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-badge);
  overflow: hidden;
  background: var(--cl-white);
}
.cl-lang-toggle__btn {
  padding: 2px 0.6em;
  font-size: var(--cl-fs-label);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.cl-lang-toggle__btn.is-active { background: var(--cl-ink); color: var(--cl-white); }
.cl-lang-toggle__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cl-focus-ring); }


/* ── Wizard ───────────────────────────────────────────────────────────────
   Two layouts that share one vocabulary:
     (a) the STEPPER — completed / current / upcoming, with a footer of
         Back · Save draft · Continue;
     (b) ONE QUESTION PER PAGE — a progress bar, one question, compact option
         rows. A four-option question must fit one viewport on a phone, which
         is why the options are `.cl-option--compact` and the footer is sticky
         rather than below the fold. */

.cl-wizard { display: flex; flex-direction: column; gap: 1.5rem; }

.cl-wizard__steps { display: flex; align-items: flex-start; gap: 0; list-style: none; margin: 0; padding: 0; }
.cl-wizard__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; text-align: center; }
/* The connector sits BEHIND the markers and stops at the last step. */
.cl-wizard__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  inset-inline-start: 50%;
  width: 100%;
  height: 1px;
  background: var(--cl-border);
  z-index: 0;
}
.cl-wizard__marker {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cl-fs-small);
  font-weight: var(--cl-fw-semibold);
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  color: var(--cl-muted);
  font-variant-numeric: tabular-nums;
}
.cl-wizard__label { font-size: var(--cl-fs-small); color: var(--cl-muted); max-width: 11ch; }

.cl-wizard__step.is-complete .cl-wizard__marker { background: var(--cl-ink); border-color: var(--cl-ink); color: var(--cl-white); }
.cl-wizard__step.is-complete:not(:last-child)::after { background: var(--cl-ink); }
.cl-wizard__step.is-complete .cl-wizard__label { color: var(--cl-ink); }

.cl-wizard__step.is-current .cl-wizard__marker {
  background: var(--cl-white);
  border-color: var(--cl-ink);
  color: var(--cl-ink);
  box-shadow: 0 0 0 3px rgba(var(--cl-accent-rgb), 0.30);
}
.cl-wizard__step.is-current .cl-wizard__label { color: var(--cl-ink); font-weight: var(--cl-fw-semibold); }

/* upcoming = the resting state above; named so a template can be explicit */
.cl-wizard__step.is-upcoming .cl-wizard__marker { background: var(--cl-white); }

.cl-wizard__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cl-border);
}
/* Back sits at the inline-start; Save draft + Continue at the inline-end. */
.cl-wizard__footer > .cl-wizard__spacer { flex: 1; }

/* (b) one question per page */
.cl-wizard__progress { height: 3px; border-radius: 2px; background: var(--cl-border); overflow: hidden; }
.cl-wizard__progress > span { display: block; height: 100%; background: var(--cl-accent); transition: width var(--cl-transition); }
.cl-wizard__count { font-size: var(--cl-fs-label); letter-spacing: var(--cl-track-label); text-transform: uppercase; color: var(--cl-muted); }
.cl-wizard__question {
  font-size: var(--cl-fs-h2);
  font-weight: var(--cl-fw-medium);
  letter-spacing: var(--cl-track-heading);
  color: var(--cl-ink);
  line-height: 1.35;
  margin: 0;
}
.cl-wizard__help { font-size: var(--cl-fs-small); color: var(--cl-muted); margin-top: 0.4rem; }
.cl-wizard__options { display: flex; flex-direction: column; gap: 0.5rem; }
.cl-wizard--single { max-width: 640px; margin-inline: auto; }

@media (max-width: 640px) {
  .cl-wizard__label { display: none; }
  .cl-wizard__footer { flex-wrap: wrap; }
}


/* ── Empty state ──────────────────────────────────────────────────────────
   A line icon, one sentence of what is missing, one action. No emoji, no
   illustration — the same restraint the rest of the system uses. */

.cl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--cl-muted);
}
.cl-empty__icon { width: 28px; height: 28px; stroke: currentColor; fill: none; opacity: 0.5; }
.cl-empty__title { font-size: var(--cl-fs-body); font-weight: var(--cl-fw-semibold); color: var(--cl-ink); }
.cl-empty__body  { font-size: var(--cl-fs-small); max-width: 44ch; line-height: 1.5; }
.cl-empty__action { margin-top: 0.5rem; }


/* ── Sidebar rail ─────────────────────────────────────────────────────────
   The shared shell behind templates/_partials/cl_sidebar.html. Background is
   var(--cl-sidebar), which templates/base.html overrides per
   OrgProfile.nav_color — so a tenant's chosen navy is honoured and the
   Platform Admin rail stays --cl-ink. Nothing here hardcodes a brand colour.

   The two live bases keep their own `.sidebar` / `.nav-item` rules; these
   `.cl-nav-*` classes are the version new pages compose. */

.cl-rail {
  display: flex;
  flex-direction: column;
  background: var(--cl-sidebar);
  color: rgba(var(--cl-white-rgb), 0.72);
  height: 100%;
  min-height: 0;
}
.cl-rail__brand { display: flex; align-items: center; gap: 0.6rem; padding: 1.1rem 1.1rem 0.5rem; }
.cl-rail__mark { width: 28px; height: 28px; flex: none; }
.cl-rail__name { font-size: var(--cl-fs-body); font-weight: var(--cl-fw-semibold); color: var(--cl-white); letter-spacing: var(--cl-track-heading); }
/* The role label under the brand — gold, tracked out, tiny. */
.cl-rail__role {
  padding: 0 1.1rem 0.9rem;
  font-size: var(--cl-fs-label);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-track-label);
  text-transform: uppercase;
  color: var(--cl-accent);
}
.cl-rail__nav { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 0.75rem; }

.cl-nav-section {
  padding: 0.9rem 1.1rem 0.35rem;
  font-size: var(--cl-fs-label);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-track-label);
  text-transform: uppercase;
  color: rgba(var(--cl-white-rgb), 0.38);
}
.cl-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.1rem;
  font-size: var(--cl-fs-body);
  color: rgba(var(--cl-white-rgb), 0.72);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition: background var(--cl-transition-fast), color var(--cl-transition-fast);
}
.cl-nav-item:hover { background: rgba(var(--cl-white-rgb), 0.07); color: var(--cl-white); }
.cl-nav-item.is-active {
  background: rgba(var(--cl-white-rgb), 0.10);
  color: var(--cl-white);
  border-inline-start-color: var(--cl-accent);
  font-weight: var(--cl-fw-medium);
}
.cl-nav-item__icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; opacity: 0.75; }
.cl-nav-item.is-active .cl-nav-item__icon { opacity: 1; }
.cl-nav-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nav-item__badge { margin-inline-start: auto; }

.cl-rail__user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid rgba(var(--cl-white-rgb), 0.12);
}
.cl-rail__user-name { font-size: var(--cl-fs-small); color: var(--cl-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-rail__user-meta { font-size: var(--cl-fs-label); color: rgba(var(--cl-white-rgb), 0.5); }
.cl-rail__user-body { min-width: 0; flex: 1; }

/* ── Modal / dialog ─────────────────────────────────────────────────────
   ONE modal component, built on the native <dialog> element.

   Native `showModal()` already supplies the backdrop, the focus trap, the
   inert-page behaviour and Escape-to-close. A hand-rolled overlay has to
   re-implement all four, and the four bespoke ones this replaces
   (`.pa-modal`, `.modal-overlay`, `.lang-modal`, `.cl-import-modal__panel`)
   between them got two of them wrong. Behaviour is `static/js/cl_modal.js`,
   loaded once per shell — do not re-implement it per page.

   A <dialog> opened with showModal() renders in the browser's top layer, so
   an ancestor's `overflow` or `z-index` cannot clip it. That is what makes it
   safe to declare one INSIDE a table cell, next to the row's kebab, where the
   form it carries can still read the row's own template context. */
dialog.cl-modal {
  padding: 0;
  /* Both shells open with `*, *::before, *::after { margin: 0 }`, which beats
     the UA stylesheet's `dialog { margin: auto }`. A modal <dialog> is
     `position: fixed; inset: 0`, so with the margin zeroed it collapsed into
     the TOP-LEFT corner instead of centring. Restated here, in the component,
     so no shell's reset can un-centre it again. */
  margin: auto;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  background: var(--cl-white);
  color: var(--cl-ink);
  box-shadow: 0 12px 40px var(--cl-shadow);
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  font-family: inherit;
}
dialog.cl-modal::backdrop { background: rgba(var(--cl-ink-rgb), 0.45); }

.cl-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--cl-border);
}
.cl-modal__title { margin: 0; font-size: var(--cl-fs-body); font-weight: var(--cl-fw-semibold); color: var(--cl-ink); }
.cl-modal__sub { margin: 0.25rem 0 0; font-size: var(--cl-fs-small); color: var(--cl-muted); }
.cl-modal__close {
  flex: none; background: none; border: none; cursor: pointer; line-height: 1;
  font-size: 1.25rem; color: var(--cl-muted); padding: 0 0.15rem; border-radius: 4px;
}
.cl-modal__close:hover { color: var(--cl-ink); background: var(--cl-paper); }
.cl-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cl-focus-ring); }

.cl-modal__body { padding: 1.15rem; display: flex; flex-direction: column; gap: 0.75rem; }
.cl-modal__foot {
  display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.85rem 1.15rem; border-top: 1px solid var(--cl-border); background: var(--cl-paper);
}
.cl-modal__note { font-size: var(--cl-fs-label); color: var(--cl-muted); margin: 0; }
.cl-modal__warn { font-size: var(--cl-fs-label); color: var(--cl-danger); font-weight: var(--cl-fw-semibold); margin: 0; }

/* Field rows inside a modal — the same shape whatever form is carried. */
.cl-modal__field { display: flex; flex-direction: column; gap: 0.25rem; }
.cl-modal__label { font-size: var(--cl-fs-label); color: var(--cl-muted); font-weight: var(--cl-fw-medium); }
.cl-modal__row { display: flex; gap: 0.5rem; align-items: center; }
.cl-modal__check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--cl-fs-small); }
.cl-modal input[type="text"], .cl-modal input[type="number"], .cl-modal select {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--cl-fs-small);
  padding: 0.45rem 0.6rem; border: 1px solid var(--cl-border); border-radius: var(--cl-btn-radius);
  background: var(--cl-white); color: var(--cl-ink);
}
.cl-modal input:focus-visible, .cl-modal select:focus-visible {
  outline: none; border-color: var(--cl-accent); box-shadow: 0 0 0 3px var(--cl-focus-ring);
}


/* ── Profile header ───────────────────────────────────────────────────────
   The record-view pattern (design system §3, §5): a soft banner, an initials
   avatar breaking the banner edge, the name in ONE language, the mono id, then
   status pills and a row of plain facts. Used by the individual, household and
   establishment detail pages so a record reads the same whatever kind it is.

   It is a card, so it composes `.cl-card`'s surface rather than restating it —
   the only thing added here is the banner/avatar geometry. */

.cl-profile {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-card);
  box-shadow: var(--cl-shadow-sm);
  overflow: hidden;
}
/* Warm-to-cool wash, mixed FROM the tokens so a brand or tenant re-theme
   carries it — a literal gradient here would be a fourth palette. */
.cl-profile__banner {
  height: 84px;
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--cl-accent) 30%, var(--cl-white)),
    var(--cl-paper) 58%,
    color-mix(in srgb, var(--cl-info) 14%, var(--cl-white)));
}
.cl-profile__body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0 1.5rem 1.25rem;
}
/* The avatar overlaps the banner. The white ring is what separates it from
   the wash behind it at any banner colour. */
.cl-profile__avatar {
  margin-top: -2.5rem;
  border: 4px solid var(--cl-white);
  box-shadow: var(--cl-shadow-sm);
}
.cl-profile__main { flex: 1 1 20rem; min-width: 0; padding-top: 0.9rem; }
.cl-profile__name {
  margin: 0;
  font-size: var(--cl-fs-h1);
  font-weight: var(--cl-fw-semibold);
  letter-spacing: var(--cl-track-heading);
  color: var(--cl-ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cl-profile__id {
  margin-top: 0.25rem;
  font-family: var(--cl-font-mono);
  font-size: var(--cl-fs-label);
  color: var(--cl-muted);
}
.cl-profile__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.cl-profile__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.6rem; font-size: var(--cl-fs-small); color: var(--cl-muted);
}
.cl-profile__fact { display: inline-flex; align-items: center; gap: 0.35rem; }
.cl-profile__fact > svg { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; }
/* A dot separator, not a slash: it never reads as part of the value beside it. */
.cl-profile__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cl-muted); flex: none; }
.cl-profile__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.9rem;
}


/* ── Lynks — a record's connections ───────────────────────────────────────
   A Lynk is a CONNECTION, so it renders like one: the other record's icon, its
   name, its own mono id as the meta line, and the typed role as a neutral pill.
   The whole row is the link — never a "view" button hidden at the end. */

.cl-lynks { display: flex; flex-direction: column; }
.cl-lynk {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  border-radius: var(--cl-radius-sm);
  color: inherit; text-decoration: none;
  transition: var(--cl-transition-fast);
}
.cl-lynk + .cl-lynk { border-top: 1px solid var(--cl-border); border-radius: 0; }
.cl-lynk:hover { background: var(--cl-paper); }
.cl-lynk__icon {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cl-radius-md);
  background: var(--cl-paper); color: var(--cl-ink);
}
.cl-lynk__icon > svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.cl-lynk__icon--household     { background: var(--cl-teal-bg); color: var(--cl-teal-dark); }
.cl-lynk__icon--establishment { background: var(--cl-info-bg); color: var(--cl-info); }
.cl-lynk__body { flex: 1; min-width: 0; }
.cl-lynk__name {
  font-size: var(--cl-fs-body); font-weight: var(--cl-fw-semibold);
  color: var(--cl-ink); overflow-wrap: anywhere;
}
.cl-lynk__meta {
  margin-top: 1px; font-family: var(--cl-font-mono);
  font-size: var(--cl-fs-label); color: var(--cl-muted);
}


/* ── Activity feed ────────────────────────────────────────────────────────
   What happened to this record, newest first, as a timeline: a line icon in a
   tinted tile, a one-line sentence, and the timestamp in mono. The connector
   rule is drawn on the item, not between items, so the last row never trails a
   dangling line. */

.cl-feed { list-style: none; margin: 0; padding: 0; }
.cl-feed__item { display: flex; gap: 0.85rem; padding: 0.7rem 0; position: relative; }
.cl-feed__item:not(:last-child)::before {
  content: ''; position: absolute; inset-inline-start: 15px;
  top: 2.5rem; bottom: -0.7rem; width: 2px; background: var(--cl-border);
}
.cl-feed__icon {
  position: relative; z-index: 1;
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cl-radius-md);
  background: var(--cl-paper); color: var(--cl-muted);
}
.cl-feed__icon > svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.cl-feed__icon--success { background: var(--cl-teal-bg);  color: var(--cl-teal-dark); }
.cl-feed__icon--info    { background: var(--cl-info-bg);  color: var(--cl-info); }
.cl-feed__icon--accent  { background: var(--cl-warn-bg);  color: var(--cl-warn-text); }
.cl-feed__body { flex: 1; min-width: 0; padding-top: 0.2rem; }
.cl-feed__title { font-size: var(--cl-fs-body); color: var(--cl-ink); line-height: 1.5; }
.cl-feed__title strong { font-weight: var(--cl-fw-semibold); }
.cl-feed__time {
  margin-top: 0.15rem; font-family: var(--cl-font-mono);
  font-size: var(--cl-fs-label); color: var(--cl-muted);
}

/* ── Hub grid + Hub card ──────────────────────────────────────────────────
   Design system §9.2 (Hub archetype) and §9.3 (concrete spec).

   The defect this closes: a Hub used to be a bare `auto-fill` grid of cards
   that each sized themselves to their own text, so a two-word blurb and a
   three-line one produced two different card heights side by side and the
   CTA sat at a different vertical position in every column. §9.2 makes the
   ARCHETYPE decide: uniform cards, equal height, CTA pinned bottom, text
   truncated, never shrink-to-fit.

   `grid-auto-rows: 1fr` is what makes EVERY row equal, not merely the cards
   within one row — with `stretch` alone a short final row would still be
   shorter than the rest. The card is a flex column so `margin-top:auto` on
   the CTA does the pinning; that pairing is the whole mechanism and neither
   half works alone. */
.cl-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
.cl-hub-card {
  display: flex;
  flex-direction: column;
  min-height: 168px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-card);
  box-shadow: var(--cl-shadow-sm);
  background: var(--cl-white);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--cl-transition-fast);
}
a.cl-hub-card:hover,
a.cl-hub-card:focus-visible { box-shadow: var(--cl-shadow-lift); }
.cl-hub-card__icon { color: var(--cl-accent); line-height: 0; margin-bottom: 10px; }
.cl-hub-card__icon > svg { stroke: currentColor; fill: none; }
.cl-hub-card__title {
  margin: 0 0 4px;
  font-size: var(--cl-fs-h3);
  font-weight: var(--cl-fw-semibold);
  color: var(--cl-ink);
}
/* Clamped to two lines: a longer blurb TRUNCATES, it never resizes the card.
   `min-height` on the clamp keeps a one-line blurb from pulling the CTA up,
   so the pinned row lands identically across the grid. */
.cl-hub-card__blurb {
  margin: 0;
  font-size: var(--cl-fs-body);
  color: var(--cl-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-hub-card__cta {
  margin-top: auto;          /* the pin — §9.2's "CTA pinned bottom" */
  padding-top: 12px;
  font-size: var(--cl-fs-small);
  font-weight: var(--cl-fw-semibold);
  color: var(--cl-teal);
}
.cl-hub-card--disabled { opacity: 0.6; cursor: default; }
.cl-hub-card--disabled .cl-hub-card__cta { color: var(--cl-muted); }

/* ── Sections bar ─────────────────────────────────────────────────────────
   Design system §9.3. The ONE horizontal sub-navigation, rendered only when a
   destination declares 2+ sibling sections. Never a filled pill: the active
   state is ink text plus a 2px accent underline, which is why the rule below
   and the item underline share an edge.

   RTL: `gap`, `border-block-end` and `inline-size` are direction-agnostic, so
   the strip mirrors with the document rather than needing an `[dir]` rule.
   Overflow scrolls; the scrollbar is hidden because the strip is short enough
   to swipe and a visible bar on a 3-item menu reads as a defect. */
.cl-sections {
  display: flex;
  gap: 24px;
  border-block-end: 1px solid var(--cl-border);
  margin-block-end: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cl-sections::-webkit-scrollbar { display: none; }
.cl-sections__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;               /* 12px + 20px line box = the 44px hit target */
  border: 0;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;        /* the item underline sits ON the bar's rule */
  background: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--cl-fs-body);
  font-weight: var(--cl-fw-medium);
  line-height: 20px;
  color: var(--cl-muted);
  text-decoration: none;
  transition: color var(--cl-transition-fast);
}
.cl-sections__item:hover { color: var(--cl-ink); }
.cl-sections__item.is-active {
  color: var(--cl-ink);
  border-block-end-color: var(--cl-accent);
}
.cl-sections__item > svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.cl-sections__count {
  font-family: var(--cl-font-mono);
  font-size: var(--cl-fs-label);
  color: var(--cl-muted);
}

/* ── Filter bar (List archetype) ──────────────────────────────────────────
   NOT a Sections bar, and the distinction is the point (§9.2/§9.3). A Sections
   bar moves between sibling SECTIONS of one subject; a filter bar narrows the
   SAME list and belongs to the List archetype's own nav pattern ("filters +
   one primary Add"). They are drawn differently on purpose so a reader can
   tell at a glance which one they are looking at: filters are pills, sections
   are underlined text. Conflating them is what made the debt register treat a
   status filter and a settings menu as the same defect. */
.cl-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.cl-filter-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-badge);
  background: var(--cl-white);
  font-family: inherit;
  font-size: var(--cl-fs-body);
  font-weight: var(--cl-fw-medium);
  color: var(--cl-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cl-transition-fast), color var(--cl-transition-fast);
}
.cl-filter-bar__item:hover { color: var(--cl-ink); }
.cl-filter-bar__item.is-active {
  background: var(--cl-ink);
  border-color: var(--cl-ink);
  color: var(--cl-white);
}

/* ── Segmented control ────────────────────────────────────────────────────
   Also not navigation: it switches the MODE of one panel (e.g. compose a new
   question vs pick one from the bank) without leaving the page or changing
   what the page is about. Declared here so such a control has a governed
   shape instead of being drawn as counterfeit tabs. */
.cl-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-md);
  background: var(--cl-paper);
}
.cl-segmented__item {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--cl-radius-sm);
  background: none;
  font-family: inherit;
  font-size: var(--cl-fs-body);
  font-weight: var(--cl-fw-medium);
  color: var(--cl-muted);
  cursor: pointer;
}
.cl-segmented__item.is-active { background: var(--cl-white); color: var(--cl-ink); box-shadow: var(--cl-shadow-sm); }

/* The Profile archetype's page measure (§9.2). One declaration, so the
   Sections bar and the panels beneath it share an edge on every record type. */
.cl-profile-page { max-width: 960px; }