/* ============================================================
 * Pit Wall — Primitive component styles
 *
 * Companion stylesheet for /js/primitives/primitives.js. Every
 * class here is consumed by a primitive helper; do not write
 * raw HTML against these classes from page code — call the
 * primitive instead so variants stay coherent.
 *
 * All values reference tokens from /styles/tokens.css. Adding a
 * new variant here is allowed; adding a raw hex/px is not.
 * ============================================================ */

/* ---------- Button ---------- */
.tz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tz-space-sm);
  padding: var(--tz-space-md) var(--tz-space-xl);
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-base);
  font-weight: var(--tz-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--tz-radius-md);
  cursor: pointer;
  transition: filter var(--tz-duration-fast) var(--tz-easing-standard),
              background var(--tz-duration-fast) var(--tz-easing-standard),
              border-color var(--tz-duration-fast) var(--tz-easing-standard),
              color var(--tz-duration-fast) var(--tz-easing-standard);
  white-space: nowrap;
  user-select: none;
}
.tz-btn:focus-visible {
  outline: 2px solid var(--tz-border-focus);
  outline-offset: 2px;
}
.tz-btn[disabled],
.tz-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — single most important action. Solid teal. */
.tz-btn--primary {
  background: var(--tz-color-brand-teal);
  color: var(--tz-text-on-brand);
  border-color: var(--tz-color-brand-teal);
}
.tz-btn--primary:hover { filter: brightness(1.1); }

/* Secondary CTA — promotional / conversion-oriented. Solid pink. */
.tz-btn--secondary {
  background: var(--tz-color-brand-pink);
  color: var(--tz-color-white);
  border-color: var(--tz-color-brand-pink);
}
.tz-btn--secondary:hover { filter: brightness(1.15); }

/* Tertiary — back, cancel, supporting. Outline on dark surface. */
.tz-btn--tertiary {
  background: transparent;
  color: var(--tz-text-primary);
  border-color: var(--tz-border-default);
}
.tz-btn--tertiary:hover {
  background: var(--tz-surface-elevated);
  border-color: var(--tz-border-strong);
}

/* Danger — destructive. Red outline (NOT pink — pink is the
   secondary/promotional CTA; danger must read as destructive per
   CLAUDE.md). 2026-05-23 shop-test Item 6.2. */
.tz-btn--danger {
  background: transparent;
  color: var(--tz-color-danger);
  border-color: var(--tz-color-danger);
}
.tz-btn--danger:hover {
  background: var(--tz-color-danger-wash);
  border-color: var(--tz-color-danger-hover);
  color: var(--tz-color-danger-hover);
}

/* Ghost — minimal, doesn't draw attention. */
.tz-btn--ghost {
  background: transparent;
  color: var(--tz-color-gray-400);
  border-color: transparent;
  text-transform: none;
  font-weight: var(--tz-font-weight-medium);
  letter-spacing: 0;
}
.tz-btn--ghost:hover { color: var(--tz-text-primary); }

/* Sizes */
.tz-btn--sm { padding: var(--tz-space-sm) var(--tz-space-md); font-size: var(--tz-font-size-sm); }
.tz-btn--lg { padding: var(--tz-space-lg) var(--tz-space-2xl); font-size: var(--tz-font-size-lg); }
.tz-btn--block { display: flex; width: 100%; }

/* ---------- FormRow + Input + Textarea + Select ---------- */
.tz-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--tz-space-xs);
  margin-bottom: var(--tz-space-lg);
}
.tz-form-row__label {
  font-family: var(--tz-font-body);
  font-size: var(--tz-font-size-tiny);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tz-color-gray-400);
  font-weight: var(--tz-font-weight-medium);
}
.tz-form-row__required {
  color: var(--tz-color-brand-pink);
  margin-left: var(--tz-space-2xs);
}
.tz-form-row__hint {
  font-size: var(--tz-font-size-sm);
  color: var(--tz-color-gray-500);
}
.tz-form-row__error {
  font-size: var(--tz-font-size-sm);
  color: var(--tz-text-error);
  display: flex;
  align-items: flex-start;
  gap: var(--tz-space-xs);
}
.tz-form-row__error::before {
  content: "⚠";
  font-size: var(--tz-font-size-base);
  line-height: 1;
}
.tz-form-row--has-error .tz-input,
.tz-form-row--has-error .tz-textarea,
.tz-form-row--has-error .tz-select {
  border-color: var(--tz-color-brand-pink);
  box-shadow: 0 0 0 2px var(--tz-tint-pink-15);
}

.tz-input,
.tz-textarea,
.tz-select {
  width: 100%;
  padding: var(--tz-space-md) var(--tz-space-lg);
  background: var(--tz-surface-default);
  color: var(--tz-text-primary);
  border: 1px solid var(--tz-border-default);
  border-radius: var(--tz-radius-md);
  font-family: var(--tz-font-body);
  font-size: var(--tz-font-size-base);
  transition: border-color var(--tz-duration-fast), box-shadow var(--tz-duration-fast);
}
.tz-input:focus,
.tz-textarea:focus,
.tz-select:focus {
  outline: none;
  border-color: var(--tz-border-focus);
  box-shadow: 0 0 0 2px var(--tz-tint-teal-20);
}
/* John 2026-05-15: placeholders should read as hint copy, not as
   pre-populated values. Lighter color + lighter weight + italic
   so the form clearly looks empty at a glance. Applied globally
   (every <input>/<textarea>/<select>) so admin pages with plain
   <input> markup get the same treatment as primitive inputs. */
.tz-input::placeholder,
.tz-textarea::placeholder,
input::placeholder,
textarea::placeholder,
select:invalid {
  color: var(--tz-color-gray-600);
  font-weight: var(--tz-font-weight-regular, 400);
  font-style: italic;
  opacity: 1; /* override the browser's default 0.5 — we control the color ourselves */
}
.tz-textarea { min-height: 120px; resize: vertical; }
.tz-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tz-color-gray-400) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--tz-color-gray-400) 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-repeat: no-repeat;
  padding-right: var(--tz-space-2xl);
}

.tz-checkbox,
.tz-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--tz-space-sm);
  cursor: pointer;
  font-size: var(--tz-font-size-base);
  color: var(--tz-text-primary);
}
.tz-checkbox input,
.tz-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--tz-color-brand-teal);
}

/* ---------- Card ---------- */
.tz-card {
  background: var(--tz-surface-card);
  border: 1px solid var(--tz-border-default);
  border-radius: var(--tz-radius-lg);
  padding: var(--tz-space-xl);
  transition: border-color var(--tz-duration-fast);
}
.tz-card--interactive:hover {
  border-color: var(--tz-border-strong);
}

/* ---------- Banner ---------- */
.tz-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tz-space-lg);
  padding: var(--tz-space-md) var(--tz-space-xl);
  background: var(--tz-tint-teal-10);
  color: var(--tz-text-primary);
  border-bottom: 1px solid var(--tz-tint-teal-30);
  font-family: var(--tz-font-body);
  font-size: var(--tz-font-size-sm);
  line-height: var(--tz-line-height-normal);
  text-align: center;
}
.tz-banner__text { color: var(--tz-text-primary); }
.tz-banner__cta {
  color: var(--tz-color-brand-teal);
  font-weight: var(--tz-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tz-banner__cta:hover { filter: brightness(1.15); }
.tz-banner__dismiss {
  position: absolute;
  right: var(--tz-space-md);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--tz-color-gray-300);
  font-size: var(--tz-font-size-lg);
  cursor: pointer;
  padding: var(--tz-space-xs) var(--tz-space-sm);
  line-height: 1;
}
.tz-banner__dismiss:hover { color: var(--tz-text-primary); }
.tz-banner--sticky {
  position: sticky;
  top: 0;
  /* Above the public homepage's fixed .nav (z-index 1000) so the banner
     never gets painted under it. Pages that link tokens.css/primitives.css
     should pair this with a nav rule that offsets `top` by
     `var(--tz-banner-height, 0)` so the two don't visually overlap; the
     bootstrapBanner helper in primitives.js sets that custom property + a
     `body.tz-has-sticky-banner` class once it inserts the banner. */
  z-index: var(--tz-z-modal);
  /* v2.0 brief 2026-05-12 §K1: sticky banners must be OPAQUE so
     scrolled content underneath doesn't bleed through. The
     non-sticky variant tints stay translucent (page-content
     context, no scroll occlusion). Sticky uses a layered solid:
     opaque body-bg base + heavy variant tint on top. The result
     reads as the brand-accent color but no longer leaks
     scrolled-up content through the banner band. */
  background: var(--tz-surface-base);
}
/* Variant tints stack on top of the opaque sticky base so scrolled
   content can't show through. Each variant uses a high-alpha tint
   over the same base color the page already has — visually distinct
   from the nav stripe but fully occluding. */
.tz-banner--info    { background: var(--tz-tint-teal-10); border-bottom-color: var(--tz-tint-teal-30); }
.tz-banner--warning { background: rgba(251, 191, 36, 0.10); border-bottom-color: rgba(251, 191, 36, 0.3); }
.tz-banner--error   { background: rgba(234, 77, 159, 0.10); border-bottom-color: var(--tz-tint-pink-30); }
/* When the variant is ALSO sticky, layer the variant tint on top of
   the opaque body-bg base via a linear-gradient (no support hack
   needed; works on every browser the rest of this stack targets). */
.tz-banner--sticky.tz-banner--info {
  background:
    linear-gradient(var(--tz-tint-teal-10), var(--tz-tint-teal-10)),
    var(--tz-surface-base);
}
.tz-banner--sticky.tz-banner--warning {
  background:
    linear-gradient(rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.10)),
    var(--tz-surface-base);
}
.tz-banner--sticky.tz-banner--error {
  background:
    linear-gradient(rgba(234, 77, 159, 0.10), rgba(234, 77, 159, 0.10)),
    var(--tz-surface-base);
}

/* ---------- Badge ---------- */
.tz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tz-space-xs);
  padding: 3px var(--tz-space-sm);
  border-radius: var(--tz-radius-full);
  font-size: var(--tz-font-size-tiny);
  font-weight: var(--tz-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tz-badge--info     { background: var(--tz-tint-teal-15); color: var(--tz-color-brand-teal); }
.tz-badge--warning  { background: var(--tz-tint-peach-15); color: var(--tz-color-brand-peach); }
.tz-badge--error    { background: var(--tz-tint-pink-15); color: var(--tz-color-brand-pink); }
.tz-badge--success  { background: var(--tz-tint-success-15); color: var(--tz-color-success); }
.tz-badge--neutral  { background: var(--tz-tint-surface-6); color: var(--tz-color-gray-400); }
.tz-badge--watch    { background: var(--tz-tint-warning-15); color: var(--tz-color-warning); }
.tz-badge--banned   { background: var(--tz-tint-pink-15); color: var(--tz-color-brand-pink); border: 1px solid rgba(234, 77, 159, 0.4); }

/* ---------- Modal ---------- */
.tz-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--tz-overlay-70);
  z-index: var(--tz-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tz-space-lg);
}
.tz-modal {
  background: var(--tz-surface-card);
  border: 1px solid var(--tz-border-default);
  border-radius: var(--tz-radius-lg);
  padding: var(--tz-space-xl);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--tz-shadow-lg);
}
.tz-modal__title {
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-2xl);
  margin-bottom: var(--tz-space-lg);
}

/* ---------- Toast ---------- */
.tz-toast {
  position: fixed;
  bottom: var(--tz-space-xl);
  right: var(--tz-space-xl);
  z-index: var(--tz-z-toast);
  background: var(--tz-surface-elevated);
  color: var(--tz-text-primary);
  border: 1px solid var(--tz-border-default);
  border-radius: var(--tz-radius-md);
  padding: var(--tz-space-md) var(--tz-space-lg);
  box-shadow: var(--tz-shadow-md);
  max-width: 360px;
}

/* ---------- Form summary (top-of-form error list) ---------- */
.tz-form-summary {
  background: rgba(234, 77, 159, 0.08);
  border: 1px solid var(--tz-tint-pink-30);
  color: var(--tz-text-primary);
  padding: var(--tz-space-md) var(--tz-space-lg);
  border-radius: var(--tz-radius-md);
  margin-bottom: var(--tz-space-lg);
}
.tz-form-summary__title {
  font-weight: var(--tz-font-weight-semibold);
  color: var(--tz-color-brand-pink);
  margin-bottom: var(--tz-space-sm);
}
.tz-form-summary ul {
  margin: 0;
  padding-left: var(--tz-space-lg);
  font-size: var(--tz-font-size-sm);
}

/* ---------- Opening Day Card (A2 reinforcing card) ---------- */
.tz-opening-card {
  background: linear-gradient(135deg, var(--tz-tint-teal-8), rgba(234, 77, 159, 0.08));
  border: 1px solid rgba(96, 190, 203, 0.4);
  border-radius: var(--tz-radius-lg);
  padding: var(--tz-space-2xl);
  text-align: center;
  margin-bottom: var(--tz-space-xl);
}
.tz-opening-card__label {
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--tz-color-brand-teal);
  margin-bottom: var(--tz-space-sm);
}
.tz-opening-card__date {
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-3xl);
  font-weight: var(--tz-font-weight-bold);
  color: var(--tz-text-primary);
  line-height: var(--tz-line-height-tight);
}
.tz-opening-card__caption {
  margin-top: var(--tz-space-md);
  color: var(--tz-color-gray-400);
  font-size: var(--tz-font-size-sm);
}

/* ============================================================
 * v2.0 Phase B1 — behavioral primitive visual layer
 * ============================================================ */

/* ---------- Toast (TZ.toast) ---------- */
.tz-toast-stack {
  position: fixed;
  top: var(--tz-space-xl);
  right: var(--tz-space-xl);
  z-index: var(--tz-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--tz-space-md);
  pointer-events: none;
}
.tz-toast {
  position: static;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--tz-space-sm);
  background: var(--tz-surface-elevated);
  color: var(--tz-text-primary);
  border: 1px solid var(--tz-border-default);
  border-radius: var(--tz-radius-md);
  padding: var(--tz-space-md) var(--tz-space-lg);
  box-shadow: var(--tz-shadow-md);
  max-width: 360px;
  min-width: 240px;
  overflow: hidden;
}
.tz-toast--success { border-left: 4px solid var(--tz-color-success); }
.tz-toast--info    { border-left: 4px solid var(--tz-color-brand-teal); }
.tz-toast--warning { border-left: 4px solid var(--tz-color-warning); }
.tz-toast--error   { border-left: 4px solid var(--tz-color-brand-pink); }
.tz-toast-message {
  grid-column: 1;
  font-size: var(--tz-font-size-sm);
  line-height: var(--tz-line-height-normal);
}
.tz-toast-actions {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--tz-space-sm);
}
.tz-toast-action {
  background: transparent;
  border: 1px solid var(--tz-border-default);
  color: var(--tz-color-brand-teal);
  font-family: var(--tz-font-body);
  font-size: var(--tz-font-size-tiny);
  padding: var(--tz-space-xs) var(--tz-space-md);
  border-radius: var(--tz-radius-sm);
  cursor: pointer;
}
.tz-toast-dismiss {
  background: transparent;
  border: none;
  color: var(--tz-color-gray-400);
  font-size: var(--tz-font-size-lg);
  line-height: 1;
  padding: 0 var(--tz-space-xs);
  cursor: pointer;
}
.tz-toast-dismiss:hover { color: var(--tz-text-primary); }
.tz-toast-progress {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--tz-tint-surface-6);
  border-radius: var(--tz-radius-full);
  overflow: hidden;
}
.tz-toast-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--tz-color-brand-teal);
  transition-property: width;
  transition-timing-function: linear;
}
.tz-toast--success .tz-toast-progress-bar { background: var(--tz-color-success); }
.tz-toast--warning .tz-toast-progress-bar { background: var(--tz-color-warning); }
.tz-toast--error   .tz-toast-progress-bar { background: var(--tz-color-brand-pink); }

/* ---------- Modal (TZ.modal) — scrim + sized container ---------- */
.tz-modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--tz-overlay-70);
  z-index: var(--tz-z-modal);
}
/* The .tz-modal class above handles the existing in-page modal pattern.
   The new TZ.modal helper places the modal in document body alongside
   the scrim; positioning here turns it into the centered dialog. */
.tz-modal[role="dialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: calc(var(--tz-z-modal) + 1);
  background: var(--tz-surface-card);
  border: 1px solid var(--tz-border-default);
  border-radius: var(--tz-radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  box-shadow: var(--tz-shadow-lg);
}
.tz-modal--sm  { max-width: 360px; }
.tz-modal--md  { max-width: 560px; }
.tz-modal--lg  { max-width: 720px; }
.tz-modal--xl  { max-width: 960px; }
.tz-modal--fullscreen { max-width: none; width: calc(100vw - var(--tz-space-2xl)); height: calc(100vh - var(--tz-space-2xl)); max-height: none; }
.tz-modal-header {
  padding: var(--tz-space-xl) var(--tz-space-xl) var(--tz-space-md);
  border-bottom: 1px solid var(--tz-border-subtle);
}
.tz-modal-title {
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-xl);
  font-weight: var(--tz-font-weight-semibold);
  margin: 0;
}
.tz-modal-description {
  margin: var(--tz-space-sm) 0 0;
  color: var(--tz-text-secondary);
  font-size: var(--tz-font-size-sm);
}
.tz-modal-body {
  padding: var(--tz-space-xl);
  overflow-y: auto;
  flex: 1 1 auto;
}
.tz-modal-footer {
  padding: var(--tz-space-md) var(--tz-space-xl) var(--tz-space-xl);
  border-top: 1px solid var(--tz-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--tz-space-md);
}
.tz-modal--destructive .tz-modal-title { color: var(--tz-color-brand-pink); }

/* ---------- Form error (TZ.form per-field error) ---------- */
.tz-form-error {
  font-size: var(--tz-font-size-sm);
  color: var(--tz-text-error);
  margin-top: var(--tz-space-xs);
}

/* ---------- Skeleton (TZ.dataView loading) ---------- */
.tz-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--tz-space-md);
}
.tz-skeleton-row,
.tz-skeleton-card {
  background: linear-gradient(90deg,
    var(--tz-tint-surface-4) 0%,
    var(--tz-tint-surface-8) 50%,
    var(--tz-tint-surface-4) 100%);
  background-size: 200% 100%;
  border-radius: var(--tz-radius-md);
  animation: tz-skeleton-shimmer 1.4s var(--tz-easing-standard) infinite;
}
.tz-skeleton-row { height: var(--tz-space-2xl); }
.tz-skeleton-card { height: var(--tz-space-5xl); }
.tz-skeleton--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tz-space-md); }
@keyframes tz-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- EmptyState (TZ.dataView empty) ---------- */
.tz-empty-state {
  text-align: center;
  padding: var(--tz-space-3xl) var(--tz-space-xl);
  color: var(--tz-text-secondary);
}
.tz-empty-state-title {
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-lg);
  color: var(--tz-text-primary);
  margin-bottom: var(--tz-space-sm);
}
.tz-empty-state-body {
  font-size: var(--tz-font-size-sm);
  margin-bottom: var(--tz-space-lg);
}

/* ---------- ErrorState (TZ.dataView error) ---------- */
.tz-error-state {
  text-align: center;
  padding: var(--tz-space-2xl) var(--tz-space-xl);
  border: 1px solid var(--tz-tint-pink-30);
  background: var(--tz-tint-pink-6);
  border-radius: var(--tz-radius-md);
}
.tz-error-state-title {
  font-family: var(--tz-font-display);
  font-size: var(--tz-font-size-lg);
  color: var(--tz-color-brand-pink);
  margin-bottom: var(--tz-space-sm);
}
.tz-error-state-body {
  font-size: var(--tz-font-size-sm);
  color: var(--tz-text-secondary);
  margin-bottom: var(--tz-space-md);
}
.tz-error-state-actions {
  display: flex;
  justify-content: center;
  gap: var(--tz-space-md);
}

/* ---------- Status badges (per playbook §B3) ---------- */
.tz-badge--on_sim           { background: var(--tz-status-on-sim-bg);           color: var(--tz-status-on-sim-text); }
.tz-badge--checked_in       { background: var(--tz-status-checked-in-bg);       color: var(--tz-status-checked-in-text); }
.tz-badge--awaiting_payment { background: var(--tz-status-awaiting-payment-bg); color: var(--tz-status-awaiting-payment-text); }
.tz-badge--completed        { background: var(--tz-status-completed-bg);        color: var(--tz-status-completed-text); }
.tz-badge--no_show          { background: var(--tz-status-no-show-bg);          color: var(--tz-status-no-show-text); }
.tz-badge--no_sms           { background: var(--tz-status-no-sms-bg);           color: var(--tz-status-no-sms-text); }

/* ---------- Hidden utility (Phase B3 inline-style sweep target) ---------- */
.tz-hidden { display: none !important; }

/* John 2026-05-15 Batch 17 v2: .tz-nav-drillin-heading removed —
   the Settings drill-in pattern was replaced with an inline accordion
   cluster in the unified main nav. No heading needed; the cluster
   label is the Settings L1 trigger itself. */

/* ---------- Sidebar cluster header (per playbook §B4) ----------
   v2.0 brief 2026-05-12 §A3: cluster headers must read as section
   labels, not as missing nav links. The prior treatment shared too
   much weight + color with .nav-item — users tried to click them.
   Hard rules now:
     - cursor:default (never pointer)
     - no hover/focus visual
     - role="presentation" + aria-hidden on the markup (see admin.html)
     - heavier weight (600) so they read as a label, not muted prose
     - smaller font, more tracking, anchored to the cluster below
   Spacing tightens above, opens below — the header visually "belongs"
   to the cluster it precedes. */
.tz-nav-cluster-header {
  /* Tight top, looser bottom — anchors the label to the cluster below. */
  padding: var(--tz-space-lg) var(--tz-space-lg) var(--tz-space-xs);
  font-size: var(--tz-font-size-tiny);   /* 11–12px per design tokens */
  font-weight: var(--tz-font-weight-semibold);  /* 600 — reads as "label" */
  text-transform: uppercase;
  letter-spacing: 0.1em;                 /* tracked +1.0 per A3 spec */
  color: var(--tz-text-tertiary);
  cursor: default;
  user-select: none;
  /* No hover/focus — this is not interactive. */
}
.tz-nav-cluster-header:hover,
.tz-nav-cluster-header:focus {
  background: transparent;
  color: var(--tz-text-tertiary);
}
/* John 2026-05-15 Batch 17 v2: cluster headers that double as
   accordion triggers (the unified left-nav model) override the
   non-interactive defaults above — cursor:pointer, teal hover/focus
   color, and a chevron that the accordion JS rotates with state. */
.tz-nav-cluster-header.nav-accordion-trigger {
  cursor: pointer;
}
.tz-nav-cluster-header.nav-accordion-trigger:hover,
.tz-nav-cluster-header.nav-accordion-trigger:focus,
.tz-nav-cluster-header.nav-accordion-trigger:focus-visible {
  color: var(--tz-color-brand-teal);
}