/* ==========================================================================
   Azimuth Components — Additive CSS Component Layer
   UnterhaltsPlan Design System · TASK-023

   STATUS: additive component layer. NOT a migration.
   --------------------------------------------------------------------------
   - Consumes tokens from css/azimuth-tokens.css (var(--az-*)). Load that
     file BEFORE this one.
   - All classes are `.az-` namespaced. Canonical API = BEM:
        .az-btn / .az-btn--primary / .az-card__header
   - Backward-compat: the legacy single-dash selectors used by the existing
     /azimuth/ styleguide markup (.az-btn-primary, .az-card-top, .az-box-*…)
     are grouped INTO the same rules, so this file is the single canonical
     source and the existing page renders identically. New pages MUST use
     the BEM names; legacy selectors exist only for the historical
     styleguide markup and may be dropped in a later, explicit task.
   - Additive & safe: no global element styles, no body styles, overrides
     nothing. Only takes effect when a page opts in via .az-* classes.
   - Recipes mirror the REAL values previously inlined in azimuth/styles.css
     (which TASK-023 trims) — visual parity by construction.
   - Self-contained: NO external fonts, NO external assets, NO JS logic.
     Overlay bases are presentational only (real overlay/focus-trap needs
     page-level JS and is intentionally NOT included).
   - Mobile-first; focus-visible + disabled states included.

   MIGRATION RULE: no Big-Bang migration. Product pages are NOT migrated.
   See docs/azimuth-styleguide.md → "TASK-023 · Component Layer".
   ========================================================================== */

/* ==========================================================================
   1 · BUTTONS
   ========================================================================== */

.az-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--az-weight-semibold, 600);
  border: 1px solid transparent;
  border-radius: var(--az-radius-md);
  padding: 11px 20px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--az-space-2);
  line-height: 1.2;
  transition: background .15s, transform .05s, box-shadow .15s;
  min-height: 44px;
}
.az-btn:active { transform: scale(.98); }
.az-btn:focus-visible { outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset); }

.az-btn--primary, .az-btn-primary { background: var(--az-forest-900); color: #fff; }
.az-btn--primary:hover, .az-btn-primary:hover { background: var(--az-forest-950); }

.az-btn--secondary, .az-btn-secondary {
  background: var(--az-forest-100); color: var(--az-forest-900);
  border-color: var(--az-border-strong);
}
.az-btn--secondary:hover, .az-btn-secondary:hover { background: #DCE8CF; }

.az-btn--ghost, .az-btn-ghost {
  background: transparent; color: var(--az-forest-900);
  border-color: var(--az-border);
}
.az-btn--ghost:hover, .az-btn-ghost:hover { background: var(--az-hover); }

.az-btn--link, .az-btn-link {
  background: transparent; color: var(--az-forest-900);
  border: 0; padding: 6px 4px; min-height: auto;
  text-decoration: underline; text-underline-offset: 3px;
}

.az-btn--danger, .az-btn-danger { background: var(--az-danger-bd); color: #fff; }
.az-btn--danger:hover, .az-btn-danger:hover { background: var(--az-danger-ink); }

.az-btn:disabled, .az-btn[aria-disabled="true"], .az-btn--disabled {
  background: #F0EDE7; color: #9B9B90; border-color: var(--az-border);
  cursor: not-allowed; opacity: .6;
}

.az-btn--icon, .az-btn-icon {
  min-height: 44px; min-width: 44px; padding: 10px;
  justify-content: center; background: transparent;
  border-color: var(--az-border); color: var(--az-text);
  border-radius: var(--az-radius-md);
}
.az-btn--icon:hover, .az-btn-icon:hover { background: var(--az-hover); }

.az-btn--sm, .az-btn-sm { font-size: 13px; padding: 7px 13px; min-height: 36px; }
.az-btn--full, .az-btn-full { width: 100%; justify-content: center; }

/* ==========================================================================
   2 · CARDS  (+ KPI / empty)
   ========================================================================== */

.az-grid {
  display: grid; gap: var(--az-space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  width: 100%;
}
.az-grid--2 { grid-template-columns: 1fr 1fr; }
.az-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* legacy: .az-cols-2 used by existing styleguide markup (self-contained) */
.az-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--az-space-4); }

.az-card {
  background: var(--az-card-bg, var(--az-surface));
  border: 1px solid var(--az-card-border, var(--az-border));
  border-radius: var(--az-radius-lg);
  padding: 20px;
  box-shadow: var(--az-shadow-card);
  transition: transform .15s, box-shadow .15s;
}
.az-card.az-hoverable:hover, .az-card.az-card--hoverable:hover {
  transform: translateY(-2px); box-shadow: var(--az-shadow-elevated);
}
.az-card.az-featured, .az-card.az-card--featured {
  border-color: var(--az-forest-800); border-width: 1.5px;
}
.az-card--product { border-color: var(--az-border-strong); }
.az-card--tool    { background: var(--az-paper); }
.az-card--feature { border-style: dashed; }
.az-card--status  { border-left: 4px solid var(--az-forest-800); }
.az-card--admin   { border-color: var(--az-border-strong); background: var(--az-paper); }

.az-card__header, .az-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: var(--az-space-2);
}
.az-card__icon, .az-card-icon {
  width: 40px; height: 40px; border-radius: var(--az-radius-md);
  background: var(--az-forest-100); color: var(--az-forest-900);
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
}
.az-card__title { font-size: 16px; margin: 0 0 6px; color: var(--az-text); }
.az-card h4 { font-size: 16px; margin: 0 0 6px; color: var(--az-text); }
.az-card__meta { font-size: 13px; color: var(--az-muted); }
.az-card__body { font-size: 14px; color: var(--az-muted); }
.az-card p { font-size: 14px; color: var(--az-muted); margin-bottom: 12px; }
.az-card__footer {
  margin-top: 14px; display: flex; gap: var(--az-space-2);
  flex-wrap: wrap; align-items: center;
}
.az-card__features, .az-card-features { list-style: none; margin: 0 0 14px; padding: 0; }
.az-card__features li, .az-card-features li {
  font-size: 13.5px; color: var(--az-text);
  padding-left: 22px; position: relative; margin-bottom: 6px;
}
.az-card__features li::before, .az-card-features li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--az-forest-800); font-weight: 700;
}
.az-kpi { text-align: left; }
.az-kpi .az-kpi-value {
  font-family: var(--az-font-serif); font-size: 30px;
  color: var(--az-forest-900); line-height: var(--az-line-tight, 1.1);
}
.az-kpi .az-kpi-label { font-size: 13px; color: var(--az-muted); margin-top: 4px; }

.az-empty {
  text-align: center; color: var(--az-muted);
  border: 1px dashed var(--az-border); border-radius: var(--az-radius-md);
  padding: 32px 20px; background: var(--az-paper);
}
.az-empty__icon, .az-empty-icon { font-size: 26px; opacity: .5; margin-bottom: 8px; }
.az-empty__title { font-weight: 700; color: var(--az-text); margin-bottom: 4px; }
.az-empty__text { font-size: 13px; color: var(--az-muted); }

/* ==========================================================================
   3 · BADGES
   ========================================================================== */

.az-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: var(--az-radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.az-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
.az-badge--live, .az-badge-live,
.az-badge--success, .az-badge-success {
  background: var(--az-success-bg); color: var(--az-success-ink);
  border-color: var(--az-success-bd);
}
.az-badge--info, .az-badge-info,
.az-badge--phase {
  background: var(--az-info-bg); color: var(--az-info-ink);
  border-color: var(--az-info-bd);
}
.az-badge--warning, .az-badge-warning {
  background: var(--az-warning-bg); color: var(--az-warning-ink);
  border-color: var(--az-warning-bd);
}
.az-badge--danger, .az-badge-danger {
  background: var(--az-danger-bg); color: var(--az-danger-ink);
  border-color: var(--az-danger-bd);
}
.az-badge--mvp, .az-badge-mvp {
  background: var(--az-forest-100); color: var(--az-forest-800);
  border-color: var(--az-border-strong);
}
.az-badge--local, .az-badge-local {
  background: var(--az-local-only-bg); color: var(--az-local-only);
  border-color: #FDE68A;
}
.az-badge--neutral, .az-badge-neutral,
.az-badge--soon, .az-badge-soon {
  background: var(--az-neutral-bg); color: var(--az-neutral-ink);
  border-color: var(--az-neutral-bd);
}
.az-badge--future, .az-badge-future,
.az-badge--noindex, .az-badge-noindex,
.az-badge--planned, .az-badge-planned {
  background: var(--az-future-bg); color: var(--az-future-ink);
  border-color: var(--az-future-bd);
}
.az-badge--wissen, .az-badge-wissen {
  background: #E0E7FF; color: #3730A3; border-color: #C7D2FE;
}

/* ==========================================================================
   4 · ALERTS / INFO BOXES   (.az-alert ← legacy .az-box)
   ========================================================================== */

.az-alert, .az-box {
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-md);
  padding: 14px 16px;
  margin: 10px 0;
  font-size: 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.az-alert .az-alert__icon, .az-box .az-box-ic {
  flex: none; font-size: 16px; line-height: 1.4;
}
.az-alert__title { font-weight: 700; display: block; margin-bottom: 2px; }
.az-alert__text { display: block; }
.az-alert strong, .az-box strong { font-weight: 700; }

.az-alert--legal, .az-box-legal {
  background: var(--az-warning-bg); border-color: var(--az-warning-bd);
  color: var(--az-warning-ink);
}
.az-alert--local, .az-box-local {
  background: #F4F8EF; border-color: var(--az-border-strong);
  color: var(--az-forest-800);
}
.az-alert--info, .az-box-info {
  background: var(--az-info-bg); border-color: var(--az-info-bd);
  color: var(--az-info-ink);
}
.az-alert--warning, .az-box-warning {
  background: #FFF8EE; border-color: var(--az-warning-bd);
  color: var(--az-warning-ink);
}
.az-alert--success, .az-box-success {
  background: var(--az-success-bg); border-color: var(--az-success-bd);
  color: var(--az-success-ink);
}
.az-alert--danger, .az-box-danger {
  background: var(--az-danger-bg); border-color: var(--az-danger-bd);
  color: var(--az-danger-ink);
}
.az-alert--future, .az-box-future {
  background: var(--az-future-bg); border-color: var(--az-future-bd);
  color: var(--az-future-ink);
}

/* ==========================================================================
   5 · FORMS
   ========================================================================== */

.az-form { display: flex; flex-direction: column; gap: var(--az-space-4); }
.az-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px; max-width: 420px;
}
.az-field--disabled { opacity: .6; pointer-events: none; }
.az-label, .az-field-label { font-size: 14px; font-weight: 600; color: var(--az-text); }
.az-label .az-req, .az-field-label .az-req { color: var(--az-danger-bd); }

.az-input, .az-select, .az-textarea {
  font-family: inherit; font-size: 16px; /* >=16px: prevents iOS zoom */
  color: var(--az-text); background: var(--az-surface);
  border: 1.5px solid var(--az-border);
  border-radius: var(--az-radius-md);
  padding: 11px 14px; width: 100%;
  min-height: 44px;
}
.az-textarea { min-height: 96px; resize: vertical; }
.az-input:focus, .az-select:focus, .az-textarea:focus {
  outline: none;
  border-color: var(--az-forest-800);
  box-shadow: 0 0 0 3px var(--az-forest-100);
}
.az-input:focus-visible, .az-select:focus-visible, .az-textarea:focus-visible {
  outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset);
}
.az-input[aria-invalid="true"],
.az-field--error .az-input { border-color: var(--az-danger-bd); }
.az-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B60' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.az-help, .az-field-hint { font-size: 13px; color: var(--az-muted); }
.az-error, .az-field-error {
  font-size: 13px; color: var(--az-danger-ink);
  display: flex; gap: 6px; align-items: center;
}
.az-error::before, .az-field-error::before { content: "⚠"; }

.az-checkbox, .az-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; max-width: 420px; margin-bottom: 10px;
}
.az-checkbox input, .az-check input {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--az-forest-900); flex: none;
}
.az-radio {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; max-width: 420px; margin-bottom: 10px;
}
.az-radio input {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--az-forest-900); flex: none;
}
.az-radio-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--az-border); border-radius: var(--az-radius-md);
  padding: 14px; cursor: pointer; max-width: 420px; margin-bottom: 10px;
  background: var(--az-surface);
}
.az-radio-card.az-selected { border-color: var(--az-forest-800); background: var(--az-forest-100); }
.az-radio-card .az-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--az-forest-800); flex: none; margin-top: 1px;
}
.az-radio-card.az-selected .az-dot {
  background: var(--az-forest-800); box-shadow: inset 0 0 0 3px var(--az-surface);
}
.az-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.az-toggle-track {
  width: 42px; height: 24px; border-radius: var(--az-radius-pill);
  background: var(--az-border); position: relative;
  transition: background .15s; flex: none;
}
.az-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--az-shadow-soft); transition: left .15s;
}
.az-toggle.az-on .az-toggle-track { background: var(--az-forest-800); }
.az-toggle.az-on .az-toggle-track::after { left: 20px; }

/* ==========================================================================
   6 · TABLES   (.az-table-wrap ← legacy .az-table-scroll)
   Mobile: wrapper scrolls horizontally; page body must not overflow.
   ========================================================================== */

.az-table-wrap, .az-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-md);
  margin: 10px 0;
}
.az-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 460px; }
.az-table th, .az-table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--az-border);
}
.az-table thead th {
  background: var(--az-forest-100); color: var(--az-forest-900);
  font-weight: 700; white-space: nowrap;
}
.az-table tbody tr:last-child td { border-bottom: 0; }
.az-table tbody tr:hover { background: var(--az-paper); }
.az-table .az-cell-selected { background: var(--az-forest-900); color: #fff; font-weight: 700; }
.az-table--compact th, .az-table--compact td { padding: 6px 10px; font-size: 13px; }
.az-table--status td:first-child { font-weight: 600; }
.az-table__caption { caption-side: top; text-align: left; font-size: 13px; color: var(--az-muted); margin-bottom: 6px; }
.az-table__actions { display: flex; gap: var(--az-space-2); flex-wrap: wrap; }
.az-scroll-hint { font-size: 12px; color: var(--az-muted); margin: 6px 0 0; }

/* ==========================================================================
   7 · CHIPS / TABS
   ========================================================================== */

.az-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--az-radius-pill);
  border: 1px solid var(--az-border); background: var(--az-surface);
  color: var(--az-text); cursor: default;
}
.az-chip--active { background: var(--az-forest-100); color: var(--az-forest-900); border-color: var(--az-border-strong); }
.az-chip:focus-visible { outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset); }

.az-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--az-border); }
.az-tab {
  appearance: none; background: transparent; border: 0;
  padding: 9px 14px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--az-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.az-tab:hover { color: var(--az-forest-900); }
.az-tab--active { color: var(--az-forest-900); border-bottom-color: var(--az-forest-800); }
.az-tab--disabled, .az-tab:disabled { opacity: .5; cursor: not-allowed; }
.az-tab:focus-visible { outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset); }

/* ==========================================================================
   8 · LAYOUT HELPERS   (.az-section is a content section component)
   ========================================================================== */

.az-section {
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-lg);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--az-shadow-card);
  scroll-margin-top: 80px;
}
.az-section > h2 {
  font-family: var(--az-font-serif);
  font-size: 26px;
  color: var(--az-forest-900);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.az-section > .az-kicker, .az-section__kicker {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--az-forest-800);
  margin-bottom: 10px; display: block;
}
.az-section h3 {
  font-size: 17px; color: var(--az-text);
  margin: 26px 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--az-border);
}
.az-section h4 { font-size: 14px; color: var(--az-forest-800); margin: 18px 0 8px; }
.az-section p { margin-bottom: 12px; max-width: 70ch; }
.az-section ul, .az-section ol { margin: 0 0 12px 20px; }
.az-section li { margin-bottom: 6px; }
.az-section__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--az-space-3); margin-bottom: 16px; flex-wrap: wrap;
}

.az-stack { display: flex; flex-direction: column; gap: var(--az-space-3); }
.az-cluster { display: flex; flex-wrap: wrap; gap: var(--az-space-3); align-items: center; }
.az-split {
  display: flex; flex-wrap: wrap; gap: var(--az-space-4);
  justify-content: space-between; align-items: center;
}
.az-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.az-pill-list { display: flex; gap: 8px; flex-wrap: wrap; }
.az-good { color: var(--az-success-ink); font-weight: 600; }
.az-bad { color: var(--az-danger-ink); font-weight: 600; }

/* ==========================================================================
   9 · EMPTY / STATUS / TOAST
   ========================================================================== */

.az-toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--az-forest-900); color: #fff;
  padding: 12px 16px; border-radius: var(--az-radius-md);
  box-shadow: var(--az-shadow-elevated); font-size: 14px;
  max-width: 360px;
}
.az-toast--success { background: var(--az-success-ink); }
.az-toast--warning { background: var(--az-warning-ink); }
.az-toast--danger  { background: var(--az-danger-ink); }

.az-status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--az-muted);
  vertical-align: middle;
}
.az-status-dot--success { background: var(--az-success-ink); }
.az-status-dot--warning { background: var(--az-warning-bd); }
.az-status-dot--danger  { background: var(--az-danger-bd); }

/* ==========================================================================
   10 · OVERLAY BASE  (presentational only — NO position:fixed, NO JS)
   Real overlay behaviour (fixed backdrop, focus-trap, [hidden] toggling)
   requires page-level JS and is intentionally NOT included so this file
   is safe even if loaded anywhere.
   ========================================================================== */

.az-modal {
  display: grid; place-items: center;
  padding: var(--az-space-4);
  background: var(--az-paper-warm);
  border: 1px dashed var(--az-border);
  border-radius: var(--az-radius-lg);
}
.az-modal__panel {
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-lg);
  box-shadow: var(--az-shadow-modal);
  max-width: 480px; width: 100%; padding: 24px;
}
.az-drawer {
  display: flex; justify-content: flex-end;
  padding: var(--az-space-4);
  background: var(--az-paper-warm);
  border: 1px dashed var(--az-border);
  border-radius: var(--az-radius-lg);
}
.az-drawer__panel {
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-lg);
  box-shadow: var(--az-shadow-elevated);
  width: min(360px, 100%); padding: 20px;
}

/* ==========================================================================
   11 · RESPONSIVE  (clean at 1280px and 390px — no horizontal overflow)
   ========================================================================== */

@media (max-width: 960px) {
  .az-grid--2, .az-grid--3, .az-cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .az-section { padding: 20px 16px; }
  .az-section > h2 { font-size: 22px; }
}
@media print {
  .az-section { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   12 · NAVIGATION / BREADCRUMB / FOOTER / CTA   (TASK-027)
   Additive & namespaced. Values mirror the real public patterns
   (header nav, .breadcrumb, footer, #bottom-cta) expressed via --az-*
   tokens, so applying them on existing pages is visual parity + adds
   :focus-visible. NO global element styles; scoped element selectors are
   limited to inside an .az-* component (same convention as .az-table th).
   ========================================================================== */

/* ── Navigation (header / inline link rows) ─────────────────────────────── */
.az-nav {
  display: flex; align-items: center; gap: var(--az-space-5);
  flex-wrap: wrap;
}
.az-nav__link {
  font-size: 14px; font-weight: var(--az-weight-medium, 500);
  color: var(--az-text-muted); text-decoration: none;
  transition: color .15s; line-height: 1.2;
}
.az-nav__link:hover { color: var(--az-text); }
.az-nav__link--active { color: var(--az-forest-800); font-weight: var(--az-weight-semibold, 600); }
.az-nav__link:focus-visible {
  outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset);
  border-radius: var(--az-radius-sm);
}

/* ── Breadcrumb (additive harmoniser — does NOT own layout) ─────────────── */
.az-breadcrumb {
  font-size: var(--az-text-sm); color: var(--az-text-muted);
}
.az-breadcrumb__link, .az-breadcrumb a {
  color: var(--az-text-muted); text-decoration: none; transition: color .15s;
}
.az-breadcrumb__link:hover, .az-breadcrumb a:hover { color: var(--az-text); }
.az-breadcrumb__link:focus-visible, .az-breadcrumb a:focus-visible {
  outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset);
  border-radius: var(--az-radius-sm);
}
.az-breadcrumb__sep, .az-breadcrumb span { margin: 0 6px; color: var(--az-text-muted); }

/* ── Footer (mirrors real footer: white surface, top border, calm links) ── */
.az-footer {
  background: var(--az-surface);
  border-top: 1px solid var(--az-border);
  padding: var(--az-space-8) var(--az-space-6) var(--az-space-6);
  color: var(--az-text-muted);
  font-size: var(--az-text-sm);
}
.az-footer__group {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--az-space-4); margin-bottom: var(--az-space-4);
}
.az-footer__links { display: flex; gap: var(--az-space-5); flex-wrap: wrap; }
.az-footer__link, .az-footer__links a {
  color: var(--az-text-muted); font-size: var(--az-text-sm);
  text-decoration: none; transition: color .15s;
}
.az-footer__link:hover, .az-footer__links a:hover { color: var(--az-text); }
.az-footer__link:focus-visible, .az-footer__links a:focus-visible {
  outline: var(--az-focus-ring); outline-offset: var(--az-focus-offset);
  border-radius: var(--az-radius-sm);
}
.az-footer__title {
  display: block; font-weight: var(--az-weight-bold, 700);
  color: var(--az-text); font-size: var(--az-text-sm); margin-bottom: 8px;
}
.az-footer__copy { font-size: var(--az-text-xs); color: var(--az-text-muted); }

/* ── CTA section (LIGHT variant — for new pages / styleguide; existing live
      #bottom-cta is a dark forest band and is intentionally NOT migrated to
      keep contrast, see docs/azimuth-styleguide.md §18) ─────────────────── */
.az-cta {
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-lg);
  padding: var(--az-space-12) var(--az-space-6);
  text-align: center;
  box-shadow: var(--az-shadow-card);
}
.az-cta__title {
  font-family: var(--az-font-serif);
  font-size: var(--az-text-3xl); color: var(--az-forest-900);
  line-height: var(--az-line-tight, 1.1); margin: 0 0 var(--az-space-2);
}
.az-cta__text {
  color: var(--az-text-muted); max-width: 520px;
  margin: 0 auto var(--az-space-6);
}
.az-cta__actions {
  display: flex; gap: var(--az-space-3); flex-wrap: wrap;
  justify-content: center; align-items: center;
}

@media (max-width: 640px) {
  /* Footer keeps the real flex-wrap behaviour (no forced column) to
     preserve visual parity with the existing public footer. */
  .az-cta { padding: var(--az-space-10) var(--az-space-4); }
  .az-cta__actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   13 · DARK VARIANTS   (TASK-029)
   Additive, namespaced dark-surface variants. They PREPARE the future
   migration of the existing dark areas (homepage hero, homepage footer,
   dark forest #bottom-cta bands) — NO product page is migrated in this
   task. Standard .az-btn--primary (forest fill) and .az-btn--ghost (light
   border) and the light .az-cta / .az-footer break contrast on a dark
   ground; these *--dark / *-on-dark variants restore it. All values come
   from var(--az-dark-*) (azimuth-tokens.css §13), themselves mirrored from
   the real dark patterns. focus-visible uses the white --az-dark-focus
   ring because the forest a11y ring is invisible on dark. No global
   element styles; scoped selectors stay inside an .az-* component.
   ========================================================================== */

/* ── Dark surface base (generic wrapper / context) ──────────────────────── */
.az-surface--dark {
  background: var(--az-dark-bg);
  color: var(--az-dark-text);
}

/* ── Hero (light base + dark variant) ───────────────────────────────────── */
.az-hero {
  background: var(--az-surface);
  color: var(--az-text);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius-lg);
  padding: var(--az-space-16) var(--az-space-8);
}
.az-hero--dark {
  background: var(--az-dark-bg);
  color: var(--az-dark-text);
  border: 0;
  border-radius: 0; /* full-bleed hero sections need no radius */
}
.az-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--az-text-xs); font-weight: var(--az-weight-semibold, 600);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--az-radius-pill);
  border: 1px solid var(--az-border);
  margin-bottom: var(--az-space-5);
}
.az-hero--dark .az-hero__eyebrow {
  background: var(--az-dark-overlay);
  border-color: var(--az-dark-border);
  color: var(--az-dark-text-muted);
}
.az-hero__title {
  font-family: var(--az-font-serif);
  font-size: var(--az-text-4xl);
  line-height: var(--az-line-tight, 1.1);
  letter-spacing: -0.01em;
  margin: 0 0 var(--az-space-4);
  color: var(--az-text);
}
.az-hero--dark .az-hero__title { color: var(--az-dark-text); }
.az-hero__title em { font-style: normal; color: var(--az-forest-800); }
.az-hero--dark .az-hero__title em { color: var(--az-dark-accent); }
.az-hero__text {
  font-size: var(--az-text-lg);
  line-height: var(--az-line-relaxed, 1.6);
  max-width: 52ch;
  margin: 0 0 var(--az-space-8);
  color: var(--az-text-muted);
}
.az-hero--dark .az-hero__text { color: var(--az-dark-text-muted); }
.az-hero__actions {
  display: flex; gap: var(--az-space-3);
  flex-wrap: wrap; align-items: center;
}

/* ── CTA dark variant (pairs with the light .az-cta from §12) ───────────── */
.az-cta--dark {
  background: var(--az-dark-bg);
  border-color: transparent;
  color: var(--az-dark-text);
  box-shadow: none;
}
.az-cta--dark .az-cta__title { color: var(--az-dark-text); }
.az-cta--dark .az-cta__text  { color: var(--az-dark-text-muted); }

/* ── Footer dark variant (pairs with the light .az-footer from §12) ─────── */
.az-footer--dark {
  background: var(--az-dark-bg-deep);
  border-top-color: transparent;
  color: var(--az-dark-text-muted);
}
.az-footer--dark .az-footer__title { color: var(--az-dark-text); }
.az-footer--dark .az-footer__copy  { color: var(--az-dark-text-muted); }
.az-footer--dark .az-footer__link,
.az-footer--dark .az-footer__links a { color: var(--az-dark-link); }
.az-footer--dark .az-footer__link:hover,
.az-footer--dark .az-footer__links a:hover { color: var(--az-dark-link-hover); }
.az-footer--dark .az-footer__link:focus-visible,
.az-footer--dark .az-footer__links a:focus-visible {
  outline: var(--az-dark-focus); outline-offset: var(--az-focus-offset);
}

/* ── Card on dark ───────────────────────────────────────────────────────── */
.az-card--dark {
  background: var(--az-dark-surface);
  border-color: var(--az-dark-border);
  color: var(--az-dark-text);
  box-shadow: none;
}
.az-card--dark .az-card__title { color: var(--az-dark-text); }
.az-card--dark .az-card__body,
.az-card--dark .az-card__meta,
.az-card--dark p { color: var(--az-dark-text-muted); }
.az-card--dark .az-card__icon {
  background: var(--az-dark-overlay); color: var(--az-dark-text);
}
.az-card--dark .az-card__features li { color: var(--az-dark-text); }
.az-card--dark .az-card__features li::before { color: var(--az-dark-accent); }

/* ── Buttons on dark ────────────────────────────────────────────────────── */
.az-btn--primary-on-dark {
  background: var(--az-dark-button-bg);
  color: var(--az-dark-button-text);
  border-color: transparent;
}
.az-btn--primary-on-dark:hover { background: var(--az-dark-button-bg-hover); }

.az-btn--secondary-on-dark {
  background: var(--az-dark-overlay);
  color: var(--az-dark-text);
  border-color: var(--az-dark-border);
}
.az-btn--secondary-on-dark:hover { background: var(--az-dark-overlay-hover); }

.az-btn--ghost-on-dark {
  background: transparent;
  color: var(--az-dark-text);
  border-color: var(--az-dark-border);
}
.az-btn--ghost-on-dark:hover { background: var(--az-dark-overlay); }

.az-btn--primary-on-dark:focus-visible,
.az-btn--secondary-on-dark:focus-visible,
.az-btn--ghost-on-dark:focus-visible {
  outline: var(--az-dark-focus); outline-offset: var(--az-focus-offset);
}
.az-btn--primary-on-dark:disabled,
.az-btn--primary-on-dark[aria-disabled="true"],
.az-btn--primary-on-dark.az-btn--disabled,
.az-btn--secondary-on-dark:disabled,
.az-btn--secondary-on-dark[aria-disabled="true"],
.az-btn--secondary-on-dark.az-btn--disabled,
.az-btn--ghost-on-dark:disabled,
.az-btn--ghost-on-dark[aria-disabled="true"],
.az-btn--ghost-on-dark.az-btn--disabled {
  background: var(--az-dark-overlay); color: var(--az-dark-text-muted);
  border-color: var(--az-dark-border); cursor: not-allowed; opacity: .55;
}

/* ── Badge on dark (translucent white pill — mirrors .hero-badge) ───────── */
.az-badge--on-dark {
  background: var(--az-dark-overlay);
  color: var(--az-dark-text);
  border-color: var(--az-dark-border);
}

/* ── Link on dark ───────────────────────────────────────────────────────── */
.az-link--on-dark {
  color: var(--az-dark-text);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s;
}
.az-link--on-dark:hover { color: var(--az-dark-accent); }
.az-link--on-dark:focus-visible {
  outline: var(--az-dark-focus); outline-offset: var(--az-focus-offset);
  border-radius: var(--az-radius-sm);
}

/* ── TrustBar (dark-hero pattern) ─────────────────────────────────────── */
.az-trustbar {
  display: flex;
  gap: var(--az-space-6);
  flex-wrap: wrap;
  border-top: 1px solid var(--az-dark-border-soft);
  padding-top: var(--az-space-5);
  margin-top: var(--az-space-5);
}
.az-trustbar__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--az-dark-text-muted);
}
.az-trustbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--az-dark-accent);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .az-hero { padding: var(--az-space-10) var(--az-space-4); }
}