/* =============================================================================
   DWTC Design System — Component Utility Classes
   All values reference CSS custom properties from tokens/
   Requires: tokens/colors.css, tokens/typography.css, tokens/spacing.css,
             tokens/shadows.css, and active theme (tokens/themes/*.css)
   ============================================================================= */

/* ─── Reduced Motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   LOGO
   Theme-aware: swaps between navy (light) and white (dark/OLED) via --logo-icon.
   Sizes: xs(20) sm(28) md(36) lg(48) xl(64) 2xl(96)
   ============================================================================= */

.logo {
  display: inline-block;
  width: var(--size-logo-md);
  height: var(--size-logo-md);
  background-image: var(--logo-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--logo-filter, none);
  flex-shrink: 0;
}

.logo-xs  { width: var(--size-logo-xs);  height: var(--size-logo-xs); }
.logo-sm  { width: var(--size-logo-sm);  height: var(--size-logo-sm); }
.logo-md  { width: var(--size-logo-md);  height: var(--size-logo-md); }
.logo-lg  { width: var(--size-logo-lg);  height: var(--size-logo-lg); }
.logo-xl  { width: var(--size-logo-xl);  height: var(--size-logo-xl); }
.logo-2xl { width: var(--size-logo-2xl); height: var(--size-logo-2xl); }

/* Full logo variant (icon + text) — use only at larger sizes */
.logo-full {
  background-image: var(--logo-full);
  width: var(--size-logo-width);
  height: auto;
  aspect-ratio: 2 / 1;
}

/* Img-based logo (when you need an <img> tag instead of bg) */
.logo-img {
  display: block;
  object-fit: contain;
  filter: var(--logo-filter, none);
}


/* =============================================================================
   LINK UTILITY
   ============================================================================= */

/* .link — inline link with animated sliding underline (no static underline on hover) */
.link {
  color: var(--link-color, var(--text-link));
  font-weight: var(--link-weight, 500);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% var(--link-underline-height, 1.5px);
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: var(--link-transition, background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease);
}
.link:hover {
  color: var(--link-hover-color, var(--link-color));
  background-size: 100% var(--link-underline-height, 1.5px);
}
.link:active {
  color: var(--link-active-color, var(--link-color));
  background-size: 100% var(--link-underline-height, 1.5px);
}
.link:focus-visible {
  outline: 2px solid var(--link-color, var(--text-link));
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2_5) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.4;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
              background-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
              border-color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
              color var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 40px;
  min-width: var(--size-touch-min); /* touch target */
  position: relative;
  user-select: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: transparent;
  box-shadow: var(--shadow-btn-primary), inset 0 1px 0 var(--btn-primary-inset);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--btn-primary-hover);
  box-shadow: var(--shadow-btn-primary-hover);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-btn-primary-active);
  transition-duration: 50ms;
}

/* Ghost (transparent low-emphasis action) */
.btn-ghost {
  background-color: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-inset);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-btn-ghost-hover);
}

/* Secondary (filled low-emphasis action — pairs with .btn-primary) */
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-hover);
  border-color: var(--border-strong);
}
.btn-secondary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

/* Warning (NEED MORE INFO) */
.btn-warning {
  background-color: transparent;
  color: var(--warning);
  border-color: var(--warning);
}
.btn-warning:hover:not(:disabled) {
  background-color: var(--warning-bg);
}

/* Danger */
.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--btn-danger-hover, var(--btn-danger-bg));
  box-shadow: var(--shadow-btn-danger-hover);
}
.btn-danger:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

/* Pill (Login / Logout / Add Attachment) */
.btn-pill {
  border-radius: var(--radius-pill);
  padding: var(--space-1_5) var(--space-3_5);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-size-caption);
  padding: var(--space-1_5) var(--space-3);
  min-height: 32px;
}
.btn-lg {
  font-size: var(--text-size-subtitle);
  padding: var(--space-2_5) var(--space-5);
  min-height: var(--size-touch-min);
}
/* Extra-small — compact, low-emphasis actions only (table rows, cart line
   items). Drops the 44px touch floor; keep ≥24px (WCAG 2.5.8) for the target. */
.btn-xs {
  font-size: var(--text-size-caption);
  padding: var(--space-1) var(--space-2_5);
  min-height: 28px;
  min-width: auto;
  gap: var(--space-1);
  border-radius: var(--radius-sm);
}

/* Icon-only button */
.btn-icon {
  padding: var(--space-2);
  min-width: 36px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.btn-icon.btn-sm {
  padding: var(--space-0_5);
  min-width: 28px;
  aspect-ratio: 1 / 1;
}


/* =============================================================================
   FORM INPUTS — Luxury Corporate Precision
   All values via CSS custom properties. Zero hardcoding.
   ============================================================================= */

/* ── Shake animation for error trigger ─────────────────────────────────────── */
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  80%       { transform: translateX(-2px); }
}

/* ── Label ──────────────────────────────────────────────────────────────────── */
.label {
  display: block;
  font-size: var(--label-size, var(--text-size-body-sm));
  font-weight: var(--label-weight, var(--font-weight-semibold));
  letter-spacing: var(--label-spacing, 0.3px);
  color: var(--text-primary);
  margin-bottom: var(--label-gap, var(--space-2));
}

.label-required::after {
  content: ' *';
  color: var(--label-required-color, var(--color-primary));
}

/* ── Shared input base ──────────────────────────────────────────────────────── */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: var(--input-padding-y, var(--space-2)) var(--input-padding-x, var(--space-3));
  font-family: var(--font-sans);
  font-size: var(--text-size-subtitle);
  font-weight: var(--input-text-weight, 450);
  line-height: 1.5;
  color: var(--input-text, var(--text-primary));
  background-color: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 8px);
  min-height: var(--input-height, 40px);
  box-shadow: var(--shadow-input);
  transition: var(--input-transition, all var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1));
  appearance: none;
  -webkit-appearance: none;
}

/* Textarea must show at least ~3 rows when empty (SPECS.md §1.2) */
.textarea {
  min-height: 72px;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--input-placeholder, var(--text-placeholder));
  font-style: var(--input-placeholder-style, italic);
  font-weight: var(--font-weight-regular);
}

.input:hover:not(:disabled):not(:focus-visible):not(.input-error):not(.input-success), .select:hover:not(:disabled):not(:focus-visible), .textarea:hover:not(:disabled):not(:focus-visible):not(.input-error):not(.input-success) {
  /* Hover border only when NOT focused — the --focus-ring state takes over via the focus-visible rule below. */
  border-color: var(--input-border-hover);
}

.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus, var(--input-bg));
  box-shadow: var(--focus-ring-subtle);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-inset);
}

/* ── Compact size modifier (desktop-dense contexts) ─────────────────────────── */
/* Compose with the base class: <input class="input input-sm">.
   Use for toolbars, table-inline cells, and list-page search bars.
   Form fields and mobile/touch surfaces keep the default 44px height
   (WCAG AA touch-target minimum). */
.input-sm,
.select-sm {
  padding: var(--space-1_5) var(--space-3);
  font-size: var(--text-size-body-sm);
  min-height: var(--input-height-sm, 2.25rem);
}

/* ── Flush variant — strips chrome so the control blends with its parent
      surface. Use inside <td> cells of .data-table / .data-table-compact,
      inline toolbars, or any container whose own border/background would
      clash with the default input chrome.
      Pair with .input-sm for dense rows:
        <input class="input input-sm input-flush">
      The control stays invisible until hovered or focused, at which point
      a focus ring returns via --focus-ring-inset. Accessible-by-default —
      does NOT strip the focus-visible outline. ──────────────────────────── */
.input-flush,
.select-flush,
.textarea-flush {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding-inline: var(--space-1);
}
.input-flush:hover:not(:disabled):not(:focus-visible):not(.input-error):not(.input-success),
.select-flush:hover:not(:disabled):not(:focus-visible),
.textarea-flush:hover:not(:disabled):not(:focus-visible):not(.input-error):not(.input-success) {
  background-color: var(--bg-card-hover);
  border-color: transparent;
}
.input-flush:focus-visible,
.select-flush:focus-visible,
.textarea-flush:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus, var(--bg-card));
  box-shadow: var(--focus-ring-inset);
  border-radius: var(--radius-xs);
}

/* ── Error state ────────────────────────────────────────────────────────────── */
.input-error {
  border-color: var(--input-error-border);
  background-color: var(--input-bg-error, var(--input-bg));
  box-shadow: 0 0 0 3px var(--input-error-ring);
}

.input-error:focus-visible {
  border-color: var(--input-error-border);
  box-shadow: var(--focus-ring-error);
}

.input-shake {
  animation: input-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── Success state ──────────────────────────────────────────────────────────── */
.input-success {
  border-color: var(--input-success-border);
  background-color: var(--input-bg-success, var(--input-bg));
  box-shadow: 0 0 0 3px var(--input-success-ring);
}

.input-success:focus-visible {
  border-color: var(--input-success-border);
  box-shadow: var(--focus-ring-success);
}

/* ── Select: refined animated chevron ──────────────────────────────────────── */
/* SVG data URIs cannot use CSS custom properties — colors are hardcoded (%23xxx).
   Token equivalents: %23607d8b ≈ --text-tertiary (light), %2390a4ae ≈ --text-body (dark),
   %231E90FF ≈ --color-primary (light focus), %235BB8FF ≈ --color-primary (dark focus).
   Theme switching is handled via [data-theme] selector overrides below. */
.select {
  padding-inline-end: calc(var(--input-padding-x, 16px) + var(--select-chevron-size, 16px) + 4px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23607d8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-padding-x, 16px) center;
  background-size: var(--select-chevron-size, 16px);
  cursor: pointer;
}

.select:focus-visible {
  /* Focus halo comes from the shared .input/.select/.textarea rule (var(--focus-ring-subtle)).
     This block only swaps the chevron stroke color on focus. --focus-ring */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%231E90FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .select,
[data-theme="oled"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2390a4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .select:focus-visible, [data-theme="oled"] .select:focus-visible {
  /* Chevron stroke color for dark/oled on focus — halo provided by base --focus-ring-subtle rule. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%235BB8FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Textarea ───────────────────────────────────────────────────────────────── */
.textarea.textarea-autogrow {
  resize: none;
  overflow: hidden;
}

/* ── Search input wrapper ───────────────────────────────────────────────────── */
.input-search-wrap {
  position: relative;
}

.input-search-wrap .input {
  border-radius: var(--search-radius, 22px);
  padding-inline-start: var(--search-padding-left, 42px);
  transition: var(--input-transition, all var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1));
}

.input-search-icon {
  position: absolute;
  inset-inline-start: var(--space-3_5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  transition: var(--link-transition-base);
  display: flex;
  align-items: center;
}

.input-search-wrap:focus-within .input-search-icon {
  color: var(--color-primary);
}

/* ── Helper text ────────────────────────────────────────────────────────────── */
.input-helper {
  display: flex;
  align-items: center;
  gap: var(--space-0_5);
  margin-top: var(--space-1_5);
  font-size: var(--helper-size, var(--text-size-caption));
  line-height: 1.4;
  color: var(--text-tertiary);
}

.input-helper-error {
  color: var(--input-error-text, var(--error));
}

.input-helper-error::before {
  content: '';
  display: inline-block;
  width: var(--space-0_5);
  height: var(--space-0_5);
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.input-helper-success {
  color: var(--input-success-text, var(--success));
}

.input-helper-success::before {
  content: '';
  display: inline-block;
  width: var(--space-0_5);
  height: var(--space-0_5);
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* ── Form group wrapper ─────────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
}

/* ── Custom Checkbox ────────────────────────────────────────────────────────── */
.checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2_5);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size-subtitle);
  color: var(--text-secondary);
}

.checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.checkbox-box {
  position: relative;
  flex-shrink: 0;
  width: var(--checkbox-size, 20px);
  height: var(--checkbox-size, 20px);
  border-radius: var(--checkbox-radius, var(--radius-sm));
  border: var(--checkbox-border-width, 1.5px) solid var(--input-border);
  background-color: transparent;
  transition: var(--checkbox-transition, all var(--duration-fast) ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-box::after {
  content: '';
  display: block;
  width: var(--space-0_5);
  height: var(--space-1);
  border: 2px solid var(--color-white, #ffffff);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) scale(0) translateY(-1px);
  transition: transform var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
}

.checkbox-wrap:hover .checkbox-box {
  border-color: var(--input-border-hover);
  background-color: var(--input-bg);
}

.checkbox-wrap input[type="checkbox"]:checked + .checkbox-box {
  background-color: var(--checkbox-checked-bg, var(--color-primary));
  border-color: var(--checkbox-checked-bg, var(--color-primary));
  transform: scale(1);
}

.checkbox-wrap input[type="checkbox"]:checked + .checkbox-box::after {
  transform: rotate(45deg) scale(1) translateY(-1px);
  opacity: 1;
}

.checkbox-wrap input[type="checkbox"]:focus-visible + .checkbox-box {
  box-shadow: var(--focus-ring-subtle);
}

.checkbox-wrap input[type="checkbox"]:disabled + .checkbox-box {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkbox-wrap:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ── Custom Radio ───────────────────────────────────────────────────────────── */
.radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2_5);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size-subtitle);
  color: var(--text-secondary);
}

.radio-wrap input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.radio-circle {
  position: relative;
  flex-shrink: 0;
  width: var(--radio-size, 20px);
  height: var(--radio-size, 20px);
  border-radius: 50%;
  border: var(--checkbox-border-width, 1.5px) solid var(--input-border);
  background-color: transparent;
  transition: var(--checkbox-transition, all 0.15s ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-circle::after {
  content: '';
  width: var(--radio-dot-size, var(--space-2_5));
  height: var(--radio-dot-size, var(--space-2_5));
  border-radius: 50%;
  background-color: var(--checkbox-checked-bg, var(--color-primary));
  transform: scale(0);
  transition: transform var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radio-wrap:hover .radio-circle {
  border-color: var(--input-border-hover);
}

.radio-wrap input[type="radio"]:checked + .radio-circle {
  border-color: var(--checkbox-checked-bg, var(--color-primary));
}

.radio-wrap input[type="radio"]:checked + .radio-circle::after {
  transform: scale(1);
}

.radio-wrap input[type="radio"]:focus-visible + .radio-circle {
  box-shadow: var(--focus-ring-subtle);
}

.radio-wrap:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}


/* =============================================================================
   CARDS
   ============================================================================= */

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-card-padding);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Reset intrinsic margins on card children — rhythm comes from .card gap */
.card > .card-title,
.card > .card-text,
.card > h1, .card > h2, .card > h3, .card > h4, .card > h5, .card > h6,
.card > p {
  margin: 0;
}

/* Card footer actions — flex row, pushed to the bottom of the card */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.card > .card-actions {
  margin-top: auto;
  padding-top: var(--space-2);
}

.card:hover {
  background-color: var(--bg-card-hover);
  box-shadow: var(--shadow-lg);
}

/* Bento: decorative primary corner glow on content-bearing cards.
   Pure ornament — sits below content via z-index, never intercepts clicks. */
.card:has(.card-title)::after {
  content: '';
  position: absolute;
  inset: auto -25% -35% auto;
  width: 65%;
  height: 75%;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.08;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}
.card:has(.card-title) > * { position: relative; z-index: 1; }

/* Glass card — dark/OLED themes */
.card-glass {
  background: var(--card-glass, var(--bg-card));
  backdrop-filter: blur(var(--card-blur, 20px));
  -webkit-backdrop-filter: blur(var(--card-blur, 20px));
  border-color: var(--card-glass-border, var(--border-default));
}

.card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--card-glass-highlight);
  pointer-events: none;
}

/* ── Card: mobile responsive ──────────────────────────────────────────── */
@media (max-width: 639px) {
  .card {
    padding: var(--space-3) var(--space-4);
  }

  .card:hover {
    transform: none; /* Disable hover lift on touch devices */
  }
}

/* ── Submission Row (stat-led list row) ───────────────────────
   Card variant composed of a gradient stat panel bonded to the
   leading edge, a flex-1 body with title/tags/meta, and a
   trailing actions column. Portal submission-list pattern.
   ───────────────────────────────────────────────────────────── */
.submission-row {
  display: flex;
  align-items: stretch;
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.submission-row:hover {
  box-shadow: var(--shadow-lg);
}

.submission-row-stat {
  flex-shrink: 0;
  width: var(--space-24);
  padding: var(--space-4) var(--space-3);
  background: var(--hero-gradient);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
}

.submission-row-stat-num {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-size-h1);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: var(--color-white);
}

.submission-row-stat-label {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-white);
  opacity: 0.85;
  line-height: 1.2;
}

.submission-row-body {
  flex: 1;
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.submission-row-title {
  font-size: var(--text-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.submission-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}

.submission-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}

.submission-row-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.submission-row-meta-label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.submission-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
}

/* Mobile: collapse to stacked layout with stat panel as top banner */
@media (max-width: 639px) {
  .submission-row {
    flex-direction: column;
  }
  .submission-row-stat {
    width: 100%;
    flex-direction: row;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    justify-content: flex-start;
  }
  .submission-row-stat-num {
    font-size: var(--text-size-h2);
  }
  .submission-row-body {
    padding: var(--space-3) var(--space-4);
  }
  .submission-row-actions {
    padding: var(--space-3) var(--space-4);
    justify-content: flex-end;
  }
}


/* =============================================================================
   TAGS
   ============================================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--spacing-badge-y) var(--space-2);
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

/* Dot indicator */
.tag::before {
  content: '';
  display: none; /* enabled per variant */
}

.tag-dot::before {
  display: block;
  width: var(--space-1_5);
  height: var(--space-1_5);
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Pill variant */
.tag-pill {
  border-radius: var(--radius-pill);
}

/* Color variants */
.tag-blue {
  background-color: var(--tag-blue-bg);
  color: var(--tag-blue-text);
}
.tag-teal {
  background-color: var(--tag-teal-bg);
  color: var(--tag-teal-text);
}
.tag-red {
  background-color: var(--tag-red-bg);
  color: var(--tag-red-text);
}
.tag-gold {
  background-color: var(--tag-gold-bg);
  color: var(--tag-gold-text);
}
.tag-gray {
  background-color: var(--tag-gray-bg);
  color: var(--tag-gray-text);
}
.tag-green {
  background-color: var(--tag-green-bg);
  color: var(--tag-green-text);
}
.tag-amber {
  background-color: var(--tag-orange-bg);
  color: var(--tag-orange-text);
}


/* =============================================================================
   STATUS BADGES
   Portal convention: border-radius ~4px (xs), NOT pill (except version tags)
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--spacing-badge-y) var(--space-2);
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--tracking-badge);
}

/* APPROVED — green bg, white text, checkmark */
.badge-approved {
  background-color: var(--status-approved-bg);
  color: var(--status-approved-text);
}
.badge-approved::before {
  content: '✓';
  font-size: var(--text-size-xs);
}

/* NEED MORE INFO — orange, white, warning triangle */
.badge-nmi {
  background-color: var(--status-nmi-bg);
  color: var(--status-nmi-text);
}
.badge-nmi::before {
  content: '⚠';
  font-size: var(--text-size-xs);
}

/* IN PROGRESS — solid bg, high-contrast text */
.badge-progress {
  background-color: var(--status-progress-bg);
  color: var(--status-progress-text);
}
.badge-progress::before {
  content: '↻';
  font-size: var(--text-size-xs);
}

/* DRAFT — purple */
.badge-draft {
  background-color: var(--badge-draft-bg);
  color: var(--badge-draft-text);
}
.badge-draft::before {
  content: '✏';
  font-size: var(--text-size-xs);
}

/* NOT SUBMITTED — gray */
.badge-not-submitted {
  background-color: var(--status-not-submitted-bg);
  color: var(--status-not-submitted-text);
}
.badge-not-submitted::before {
  content: '⊘';
  font-size: var(--text-size-xs);
}

/* NOT UPLOADED — text-only, red */
.badge-not-uploaded {
  background-color: transparent;
  color: var(--status-not-uploaded-text);
  padding-inline: 0;
}

/* REJECTED — red */
.badge-rejected {
  background-color: var(--status-rejected-bg);
  color: var(--status-rejected-text);
}
.badge-rejected::before {
  content: '✕';
  font-size: var(--text-size-xs);
}

/* Version tags — pill shape override */
.badge-version {
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}
.badge-version-teal {
  background-color: var(--badge-version-teal-bg);
  color: var(--badge-version-teal-text);
}
.badge-version-amber {
  background-color: var(--badge-version-amber-bg);
  color: var(--badge-version-amber-text);
}

/* -----------------------------------------------------------------
   Soft badge modifier (Tier 1 — additive, opt-in)
   Usage: <span class="badge badge-approved badge-soft">Approved</span>
   Pulls from --badge-*-soft-bg / --badge-*-soft-text tokens in each theme.
   Pill shape, no uppercase, no leading glyph (hide ::before).
   ----------------------------------------------------------------- */
.badge-soft {
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-weight: var(--font-weight-semibold);
}
.badge-soft::before { content: none; }

.badge-approved.badge-soft {
  background-color: var(--badge-approved-soft-bg);
  color:            var(--badge-approved-soft-text);
}
.badge-nmi.badge-soft {
  background-color: var(--badge-nmi-soft-bg);
  color:            var(--badge-nmi-soft-text);
}
.badge-progress.badge-soft {
  background-color: var(--badge-progress-soft-bg);
  color:            var(--badge-progress-soft-text);
}
.badge-draft.badge-soft {
  background-color: var(--badge-draft-soft-bg);
  color:            var(--badge-draft-soft-text);
}
.badge-not-submitted.badge-soft {
  background-color: var(--badge-not-submitted-soft-bg);
  color:            var(--badge-not-submitted-soft-text);
}
.badge-rejected.badge-soft {
  background-color: var(--badge-rejected-soft-bg);
  color:            var(--badge-rejected-soft-text);
}


/* =============================================================================
   ALERTS
   ============================================================================= */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2_5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  font-size: var(--text-size-body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Leading icon + title carry the variant accent; body stays neutral. */
.alert > span:first-child {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--alert-accent, var(--text-secondary));
}
.alert strong {
  color: var(--alert-accent, inherit);
  font-weight: var(--font-weight-semibold);
}

.alert-info {
  background-color: var(--info-bg);
  --alert-accent: var(--info-text);
}
.alert-success {
  background-color: var(--success-bg);
  --alert-accent: var(--success-text);
}
.alert-warning {
  background-color: var(--warning-bg);
  --alert-accent: var(--warning-text);
}
.alert-error {
  background-color: var(--error-bg);
  --alert-accent: var(--error-text);
}

/* Comment block (timeline) */
.alert-comment {
  background-color: var(--info-bg);
  border-inline-start: 3px solid var(--info);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}
.alert-comment .alert-label {
  display: block;
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--info);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  margin-bottom: var(--space-1);
}

/* ── Alert meta slot ──────────────────────────────────────────
   Right-aligned pill/badge that can sit at the trailing edge of
   an .alert. Additive — legacy alerts render unchanged.
   ───────────────────────────────────────────────────────────── */
.alert-meta {
  margin-inline-start: auto;
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0_5) var(--space-2);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  color: var(--info);
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}


/* =============================================================================
   TOAST — transient, stacked, auto-dismiss notifications
   .toast reuses .alert visuals verbatim; only the fixed stack + motion are new.
   ============================================================================= */
.toast-region {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(380px, calc(100vw - var(--space-8)));
  pointer-events: none;
}
.toast-region-bottom {
  inset-block-start: auto;
  inset-block-end: var(--space-4);
}
.toast {
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.22s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
.toast.is-leaving {
  animation: toast-out 0.18s ease-in both;
}
.toast-close {
  margin-inline-start: auto;
  align-self: flex-start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.toast-close:hover { opacity: 1; }
.toast-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation-duration: 0.01ms; }
}


/* =============================================================================
   DROPDOWN MENU — click-triggered action menu
   Surface from elevated tokens; consumer JS handles open/close + anchoring.
   ============================================================================= */
.dropdown-menu {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.dropdown-menu-label {
  padding: var(--space-1_5) var(--space-2_5);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-2_5);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-size-body-sm);
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dropdown-menu-item:hover { background: var(--bg-inset); }
.dropdown-menu-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.dropdown-menu-item-danger { color: var(--error); }
.dropdown-menu-item-danger:hover { background: var(--error-bg); }
.dropdown-menu-sep {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border-subtle);
}


/* =============================================================================
   AI CHAT WIDGET — diamond FAB trigger (.ai-fab) + chat panel (.chatbot)
   Full chatbot: trigger, header, conversation, rich blocks, composer, history.
   Ported from the verified "DWTC diamond" v2 mockup. 100% DS tokens.
   ============================================================================= */
@property --ai-halo-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ── Diamond FAB trigger ───────────────────────────────────────────────── */
.ai-fab {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-toast);
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  isolation: isolate;
  outline: none;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ai-fab:focus-visible .ai-fab__core {
  box-shadow: var(--focus-ring),
    inset 0 1px 1px var(--ai-glint-strong),
    0 0 0 3px var(--bg-page),
    0 0 0 5px var(--color-primary),
    0 10px 32px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.ai-fab__aura {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  z-index: 0;
  transform: rotate(45deg);
  filter: blur(11px);
  opacity: 0.75;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--color-primary) 65%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 22%, transparent) 50%, transparent 80%);
  animation: ai-breathe 4s ease-in-out infinite;
  pointer-events: none;
}
.ai-fab__pulse {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  z-index: 1;
  opacity: 0;
  transform: rotate(45deg) scale(1);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 70%, white);
  animation: ai-pulse 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}
.ai-fab__pulse--2 { animation-delay: 0.93s; }
.ai-fab__pulse--3 { animation-delay: 1.86s; }
.ai-fab__halo {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  z-index: 2;
  transform: rotate(45deg);
  filter: blur(4px);
  opacity: 0.95;
  background: conic-gradient(from var(--ai-halo-angle), transparent 0deg,
    color-mix(in srgb, var(--color-primary) 60%, white) 50deg, transparent 130deg,
    transparent 230deg, var(--color-primary) 290deg, transparent 350deg);
  animation: ai-halo 5.5s linear infinite;
  pointer-events: none;
}
.ai-fab__core {
  position: relative;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  transform: rotate(45deg);
  background: radial-gradient(130% 130% at 28% 22%,
      var(--ai-glint-strong) 0%, var(--ai-glint-soft) 22%, transparent 50%),
    radial-gradient(130% 130% at 75% 92%,
      color-mix(in srgb, var(--text-primary) 55%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 78%, white) 0%,
      var(--color-primary) 48%, var(--color-primary-hover) 100%);
  box-shadow: inset 0 1px 1px var(--ai-glint-strong),
    inset 0 -2px 6px var(--ai-glint-shadow),
    0 12px 30px color-mix(in srgb, var(--color-primary) 60%, transparent),
    0 2px 8px rgb(0 0 0 / 0.2);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1.4);
}
.ai-fab:hover .ai-fab__core { transform: rotate(45deg) scale(1.07); }
.ai-fab:hover .ai-fab__halo { animation-duration: 2.4s; }
.ai-fab:active .ai-fab__core { transform: rotate(45deg) scale(0.93); }
.ai-fab__content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
}
.ai-fab__mark {
  width: 30px;
  height: 30px;
  color: var(--text-inverse);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
  animation: ai-mark 3.6s ease-in-out infinite;
}
.ai-fab__shine {
  position: absolute;
  z-index: 4;
  top: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.85) 0%, transparent 70%);
}
.ai-fab__status {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2.5px var(--bg-page),
    0 0 10px color-mix(in srgb, var(--success) 75%, transparent);
}
.ai-fab__status::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--success);
  opacity: 0.55;
  animation: ai-ping 2.2s ease-out infinite;
}
.ai-fab__badge {
  position: absolute;
  z-index: 6;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--error);
  color: var(--text-inverse);
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-bold);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2.5px var(--bg-page);
}

@keyframes ai-halo { to { --ai-halo-angle: 360deg; } }
@keyframes ai-breathe {
  0%, 100% { opacity: 0.55; transform: rotate(45deg) scale(0.94); }
  50%      { opacity: 0.95; transform: rotate(45deg) scale(1.07); }
}
@keyframes ai-pulse {
  0%   { transform: rotate(45deg) scale(1); opacity: 0.7; }
  60%  { opacity: 0.18; }
  100% { transform: rotate(45deg) scale(1.95); opacity: 0; }
}
@keyframes ai-mark {
  0%, 100% { transform: scale(1); opacity: 0.96; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes ai-ping {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Panel shell ───────────────────────────────────────────────────────── */
.chatbot {
  position: fixed;
  inset-block-end: calc(var(--space-6) + 84px);
  inset-inline-end: var(--space-6);
  z-index: var(--z-toast);
  width: 412px;
  max-width: calc(100vw - var(--space-6) * 2);
  height: 648px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Header */
.chatbot__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: var(--text-inverse);
}
.chatbot__id-avatar { position: relative; flex: 0 0 auto; width: 34px; height: 34px; }
.chatbot__id-avatar i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  color: var(--text-inverse);
  transform: rotate(-45deg);
}
.chatbot__id-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  transform: rotate(45deg);
  background: var(--ai-glint-soft);
  border: 1px solid rgb(255 255 255 / 0.35);
}
.chatbot__id { flex: 1; min-width: 0; line-height: 1.25; }
.chatbot__name { font-weight: var(--font-weight-semibold); letter-spacing: 0.01em; }
.chatbot__presence {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-size-caption);
  opacity: 0.9;
}
.chatbot__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent);
}
.chatbot__hbtn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgb(255 255 255 / 0.85);
  transition: background 0.15s ease, color 0.15s ease;
}
.chatbot__hbtn:hover { background: var(--ai-glint-soft); color: var(--text-inverse); }
.chatbot__hbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chatbot__hbtn i { width: 17px; height: 17px; }

/* Body */
.chatbot__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-section);
  scroll-behavior: smooth;
}
.chat-daysep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0;
}
.chat-daysep::before, .chat-daysep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.chat-daysep span {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Message row */
.chat-msg { display: flex; gap: var(--space-2); max-width: 90%; }
.chat-msg--user { margin-inline-start: auto; flex-direction: row-reverse; }
.chat-av {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-bold);
}
.chat-av--ai {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: var(--text-inverse);
}
.chat-av--ai i { width: 15px; height: 15px; }
.chat-av--user {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.chat-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-bubble {
  padding: var(--space-2_5) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-size-body);
  line-height: 1.55;
}
.chat-bubble--ai {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-start-start-radius: var(--radius-xs);
}
.chat-bubble--user {
  background: var(--color-primary);
  color: var(--text-inverse);
  border-start-end-radius: var(--radius-xs);
}
.chat-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-size-overline);
  color: var(--text-tertiary);
}
.chat-msg--user .chat-meta { justify-content: flex-end; }
.chat-meta i { width: 13px; height: 13px; }
.chat-receipt { color: var(--color-primary); }

/* AI message action row (feedback) */
.chat-actions { display: flex; gap: 2px; }
.chat-actions button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.chat-actions button:hover { background: var(--bg-inset); color: var(--text-secondary); }
.chat-actions button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chat-actions button.is-on { color: var(--color-primary); }
.chat-actions button.is-on-down { color: var(--error); }
.chat-actions i { width: 14px; height: 14px; }

/* Rich card block inside a message */
.chat-card {
  margin-top: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}
.chat-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  padding: var(--space-2_5) var(--space-3);
}
.chat-card__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--bg-inset);
  color: var(--color-primary);
}
.chat-card__icon i { width: 18px; height: 18px; }
.chat-card__main { flex: 1; min-width: 0; }
.chat-card__title {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.chat-card__meta { font-size: var(--text-size-overline); color: var(--text-tertiary); }
.chat-card__actions {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}
.chat-card__actions .btn { flex: 1; }

/* Suggested-prompt cards (welcome state) */
.chat-suggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-inline-start: 36px;
}
.chat-suggest__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  padding: var(--space-2_5) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  text-align: start;
  font-size: var(--text-size-body-sm);
  color: var(--text-primary);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.chat-suggest__btn:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.chat-suggest__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chat-suggest__btn i { width: 16px; height: 16px; color: var(--color-primary); flex: 0 0 auto; }
.chat-suggest__btn .ico-end { margin-inline-start: auto; color: var(--text-tertiary); }

/* Quick replies */
.chat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: 36px; }
.chat-chips button { font: inherit; cursor: pointer; }

/* Typing indicator */
.chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  border-start-start-radius: var(--radius-xs);
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-placeholder);
  animation: chat-type 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-type {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Scroll-to-bottom */
.chat-scrollbtn {
  position: absolute;
  inset-inline-end: var(--space-4);
  bottom: 140px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}
.chat-scrollbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chat-scrollbtn i { width: 16px; height: 16px; }

/* Composer */
.chatbot__composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-default);
  background: var(--bg-card);
  padding: var(--space-2_5) var(--space-3) var(--space-2);
}
.chat-inputrow {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  background: var(--input-bg);
  padding: 4px 4px 4px var(--space-2);
  transition: border-color 0.15s;
}
.chat-inputrow:focus-within { border-color: var(--color-primary); }
.chat-inputrow textarea {
  flex: 1;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-size-body);
  line-height: 1.5;
  padding: 6px 0;
  max-height: 96px;
}
.chat-inputrow textarea::placeholder { color: var(--text-placeholder); }
.chat-tool {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.chat-tool:hover { background: var(--bg-inset); color: var(--color-primary); }
.chat-tool:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chat-tool i { width: 18px; height: 18px; }
.chat-send {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  transition: background 0.15s;
}
.chat-send:hover { background: var(--color-primary-hover); }
.chat-send:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chat-send i { width: 16px; height: 16px; }
.chatbot__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--space-1) 0 2px;
  font-size: var(--text-size-xs);
  color: var(--text-tertiary);
}
.chatbot__footer i { width: 11px; height: 11px; }

/* Expanded window */
.chatbot.is-expanded {
  width: min(720px, calc(100vw - var(--space-6) * 2));
  height: calc(100vh - 120px);
}

/* Conversation history view */
.chat-hist {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-section);
}
.chatbot.is-history .chat-hist { display: flex; }
.chatbot.is-history .chatbot__body,
.chatbot.is-history .chatbot__composer,
.chatbot.is-history .chat-scrollbtn { display: none; }
.chat-hist__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-card);
}
.chat-hist__head strong { flex: 1; font-size: var(--text-size-body); color: var(--text-primary); }
.chat-hist__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-hist__item {
  display: flex;
  gap: var(--space-2_5);
  align-items: flex-start;
  width: 100%;
  text-align: start;
  padding: var(--space-2_5);
  border: 0;
  cursor: pointer;
  font: inherit;
  background: transparent;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.chat-hist__item:hover { background: var(--bg-inset); }
.chat-hist__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.chat-hist__item.is-current {
  background: var(--bg-inset);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.chat-hist__ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--bg-inset);
  color: var(--color-primary);
}
.chat-hist__ico i { width: 16px; height: 16px; }
.chat-hist__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-hist__title {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.chat-hist__title time {
  margin-inline-start: auto;
  flex: 0 0 auto;
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-regular);
  color: var(--text-tertiary);
}
.chat-hist__snip {
  font-size: var(--text-size-caption);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ai-fab__aura, .ai-fab__pulse, .ai-fab__halo, .ai-fab__mark,
  .ai-fab__status::after, .chat-typing span { animation: none; }
}


/* =============================================================================
   ACCORDION
   ============================================================================= */

.accordion {
  position: relative;
  background-color: var(--bg-section-alt);
  border: var(--space-px) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.accordion + .accordion {
  margin-top: var(--spacing-accordion-stack);
}

/* Flush stacked accordions — collapse into a single bento card */
.accordion-flush + .accordion-flush {
  margin-top: var(--space-0);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion-flush:has(+ .accordion-flush) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-accordion-header-gap);
  width: 100%;
  padding: var(--spacing-accordion-header-y) var(--spacing-accordion-header-x);
  font: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

/* Bento accent rail — fades in only when expanded */
.accordion-header::before {
  content: '';
  position: absolute;
  inset-block: var(--space-3);
  inset-inline-start: 0;
  width: var(--space-0_5);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}

.accordion-header:hover {
  background-color: var(--bg-card-hover);
}

.accordion-header:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}

.accordion[data-open="true"] .accordion-header,
.accordion-header[aria-expanded="true"] {
  background-color: var(--bg-card);
}

.accordion[data-open="true"] .accordion-header::before,
.accordion-header[aria-expanded="true"]::before {
  opacity: 1;
}

/* Chevron icon — consumer adds the icon element with class .accordion-chevron */
.accordion-chevron {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}

.accordion[data-open="true"] .accordion-chevron,
.accordion-header[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.accordion-body {
  position: relative;
  padding: var(--spacing-accordion-body-top) var(--spacing-accordion-body-x) var(--spacing-accordion-body-bottom);
  background-color: var(--bg-card);
  overflow: hidden;
}

/* Faded hairline divider replaces the hard border-top */
.accordion-body::before {
  content: '';
  position: absolute;
  inset-inline: var(--spacing-accordion-body-x);
  inset-block-start: 0;
  height: var(--space-px);
  background: linear-gradient(
    to right,
    transparent,
    var(--border-default) 18%,
    var(--border-default) 82%,
    transparent
  );
  pointer-events: none;
}

/* Bento: faint primary corner glow on the open body — pure ornament */
.accordion-body::after {
  content: '';
  position: absolute;
  inset: auto -15% -45% auto;
  width: 50%;
  height: 120%;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.06;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.accordion-body > * {
  position: relative;
  z-index: 1;
}


/* =============================================================================
   TREE NAVIGATION
   Hierarchical nav, venue/location tree, document browser, taxonomy picker,
   department/product categories. Markup: native <details>/<summary> for
   parents + <a>/<button> (or <label> for pickers) for leaves. Zero-JS
   expand/collapse. All state/sizing via tokens.
   ============================================================================= */

.tree {
  --tree-row-h:          36px;   /* default row — parallels accordion header rhythm */
  --tree-row-px:         var(--space-2_5);
  --tree-row-gap:        var(--space-0_5);
  --tree-row-gap-inner:  var(--space-2);
  --tree-font-size:      var(--text-size-body);
  --tree-icon:           var(--size-icon-md);
  --tree-indent:         var(--space-5);
  --tree-radius:         var(--radius-xs);

  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--tree-font-size);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--tree-row-gap);
}

/* Size modifiers — parallel to btn-sm / btn-lg */
.tree-sm {
  --tree-row-h:          28px;
  --tree-font-size:      var(--text-size-caption);
  --tree-icon:           var(--size-icon-sm);
  --tree-indent:         var(--space-4);
  --tree-row-px:         var(--space-2);
}
.tree-lg {
  --tree-row-h:          44px;
  --tree-font-size:      var(--text-size-body-lg);
  --tree-icon:           var(--size-icon-lg);
  --tree-indent:         var(--space-6);
  --tree-row-px:         var(--space-3);
}

.tree-node {
  list-style: none;
  margin: 0;
}
.tree-node > details { margin: 0; }

/* ── Row (shared surface for summary, anchor, button, label) ──────────── */
.tree-row {
  display: flex;
  align-items: center;
  gap: var(--tree-row-gap-inner);
  min-height: var(--tree-row-h);
  padding: 0 var(--tree-row-px);
  border-radius: var(--tree-radius);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  font-weight: var(--font-weight-medium);
  background-color: transparent;
  border: 1px solid transparent;
  width: 100%;
  text-align: start;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

/* Remove the default disclosure triangle on <summary> rows */
summary.tree-row { list-style: none; }
summary.tree-row::-webkit-details-marker { display: none; }
summary.tree-row::marker { content: ""; }

.tree-row:hover {
  background-color: var(--bg-inset);
  color: var(--text-primary);
}

.tree-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}

.tree-row[aria-current="page"],
.tree-row.is-active {
  background-color: var(--bg-inset);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  position: relative;
}
.tree-row[aria-current="page"]::before,
.tree-row.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 20%;
  bottom: 20%;
  width: var(--space-0_5);
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.tree-row[aria-selected="true"],
.tree-row.is-selected {
  background-color: var(--bg-inset);
  color: var(--text-primary);
  border-color: var(--color-primary);
}

.tree-row[aria-disabled="true"],
.tree-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Disclosure chevron — rotates with [open] state ──────────────────── */
.tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tree-icon);
  height: var(--tree-icon);
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform var(--duration-normal) var(--ease-default);
}
.tree-toggle svg { width: 100%; height: 100%; }

details[open] > summary .tree-toggle { transform: rotate(90deg); }
[dir="rtl"] .tree-toggle { transform: rotate(180deg); }
[dir="rtl"] details[open] > summary .tree-toggle { transform: rotate(-90deg); }

/* Leaf rows keep the label column aligned with parent labels */
.tree-row.is-leaf {
  padding-inline-start: calc(var(--tree-row-px) + var(--tree-icon) + var(--tree-row-gap-inner));
}

/* ── Slots ────────────────────────────────────────────────────────────── */
.tree-icon {
  width: var(--tree-icon);
  height: var(--tree-icon);
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.tree-icon svg { width: 100%; height: 100%; }

.tree-row:hover .tree-icon,
.tree-row.is-active .tree-icon,
.tree-row[aria-current="page"] .tree-icon {
  color: var(--color-primary);
}

.tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-meta {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.tree-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-5);
  height: var(--space-5);
  padding-inline: var(--space-1_5);
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.tree-badge-muted {
  background-color: var(--border-strong);
  color: var(--text-secondary);
}

/* ── Hover-revealed row actions (download / rename / delete …) ────────── */
.tree-actions {
  display: inline-flex;
  gap: var(--space-0_5);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}
.tree-row:hover .tree-actions,
.tree-row:focus-within .tree-actions {
  opacity: 1;
}
.tree-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tree-icon) + var(--space-2));
  height: calc(var(--tree-icon) + var(--space-2));
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.tree-action svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.tree-action:hover {
  background-color: var(--border-subtle);
  color: var(--text-primary);
}
.tree-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}

/* ── Children (recursive indent) ──────────────────────────────────────── */
.tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: var(--tree-indent);
  display: flex;
  flex-direction: column;
  gap: var(--tree-row-gap);
}

/* Guide-line variant — thin rule tracing each nested level */
.tree-guides .tree-children {
  border-inline-start: 1px solid var(--border-subtle);
  margin-inline-start: calc(var(--tree-row-px) + var(--tree-icon) / 2);
  padding-inline-start: calc(var(--tree-indent) - var(--tree-row-px) - var(--tree-icon) / 2);
}

/* ── Empty / loading states ───────────────────────────────────────────── */
.tree-empty,
.tree-loading {
  padding: var(--space-2) var(--tree-row-px);
  padding-inline-start: calc(var(--tree-row-px) + var(--tree-icon) + var(--tree-row-gap-inner));
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tree-spinner {
  width: var(--size-icon-xs);
  height: var(--size-icon-xs);
  border: var(--space-0_5) solid var(--border-subtle);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: tree-spin var(--duration-slow) linear infinite;
  flex-shrink: 0;
}
@keyframes tree-spin { to { transform: rotate(360deg); } }

/* ── Picker input (checkbox / radio) — sized to align with icon column ── */
.tree-check {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-primary);
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  cursor: pointer;
}

/* ── Rail variant — collapsed icon-only sidebar ───────────────────────── */
.tree-rail {
  --tree-row-h: 40px;
  width: var(--size-sidebar-rail);
}
.tree-rail .tree-label,
.tree-rail .tree-meta,
.tree-rail .tree-toggle,
.tree-rail .tree-actions,
.tree-rail .tree-badge,
.tree-rail .tree-children {
  display: none !important;
}
.tree-rail .tree-row {
  justify-content: center;
  padding: 0;
}
.tree-rail .tree-icon {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}
.tree-rail .tree-row.is-active::before,
.tree-rail .tree-row[aria-current="page"]::before {
  inset-inline-start: var(--space-0_5);
}

/* Respect reduced-motion — freeze spinner and snap chevron */
@media (prefers-reduced-motion: reduce) {
  .tree-spinner { animation: none; }
  .tree-toggle,
  details[open] > summary .tree-toggle { transition: none; }
}


/* =============================================================================
   TABS
   ============================================================================= */

/* Underline tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-2_5) var(--space-4);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  background: none;
  border-top: none;
  border-inline: none;
  text-decoration: none;
}

.tab:hover {
  color: var(--text-primary);
}

.tab[aria-selected="true"],
.tab.active {
  color: var(--btn-primary-bg);
  border-bottom-color: var(--btn-primary-bg);
  border-bottom-width: 2.5px;
  font-weight: var(--font-weight-bold);
}

.tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

/* Pill / Segmented tabs */
.pill-tabs {
  display: inline-flex;
  background-color: var(--bg-inset);
  border-radius: var(--radius-lg);
  padding: var(--spacing-badge-y);
  gap: var(--space-0_5);
}

.pill-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3_5);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  background: none;
  border: none;
  text-decoration: none;
}

.pill-tab:hover:not([aria-selected="true"]):not(.active) {
  color: var(--text-primary);
}

.pill-tab[aria-selected="true"],
.pill-tab.active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-pill-tab-active);
}

.pill-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* =============================================================================
   THEME SWITCHER  (segmented control — light / dark / oled)
   ============================================================================= */

.theme-switcher {
  display: inline-flex;
  align-items: stretch;
  padding: var(--space-0_5);
  gap: var(--space-0_5);
  background-color: var(--bg-section);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}

.theme-switcher-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.theme-switcher-btn:hover:not(.is-active) {
  color: var(--text-primary);
  background-color: var(--bg-card-hover);
}

.theme-switcher-btn.is-active {
  background-color: var(--color-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xs);
}

.theme-switcher-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* =============================================================================
   PROGRESS BAR
   ============================================================================= */

.progress {
  height: var(--space-1_5);
  background-color: var(--bg-inset);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--btn-primary-bg);
  transition: width 300ms var(--ease-default);
}

.progress-fill-teal {
  background-color: var(--tag-teal-text);
}

.progress-fill-danger {
  background-color: var(--error);
}


/* =============================================================================
   AVATAR
   ============================================================================= */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  width: var(--size-avatar-md);
  height: var(--size-avatar-md);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.avatar-sm {
  width: var(--size-avatar-sm);
  height: var(--size-avatar-sm);
  font-size: var(--text-size-badge);
}

.avatar-lg {
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  font-size: var(--text-size-h3);
}


/* =============================================================================
   TOGGLE — Luxury Corporate Precision
   ============================================================================= */

.toggle {
  position: relative;
  display: inline-block;
  width: var(--toggle-width, 48px);
  height: var(--toggle-height, 26px);
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background-color: var(--toggle-off-bg);
  box-shadow: var(--toggle-track-inset-shadow);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
}

.toggle-thumb {
  position: absolute;
  top: var(--space-0_5);
  inset-inline-start: var(--space-0_5);
  width: var(--toggle-thumb-size, 22px);
  height: var(--toggle-thumb-size, 22px);
  border-radius: var(--radius-full);
  background-color: var(--color-white, #ffffff);
  box-shadow: var(--toggle-thumb-shadow);
  transition: var(--toggle-transition, all var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1));
  pointer-events: none;
}

.toggle input:checked ~ .toggle-track {
  background: var(--toggle-on-bg, var(--color-primary));
}

.toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(calc(var(--toggle-width, 48px) - var(--toggle-thumb-size, 22px) - 4px));
}

[dir="rtl"] .toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(calc(-1 * (var(--toggle-width, 48px) - var(--toggle-thumb-size, 22px) - 4px)));
}

.toggle:hover .toggle-thumb {
  box-shadow: var(--toggle-thumb-shadow), 0 0 0 3px var(--input-focus-ring);
}

.toggle input:focus-visible ~ .toggle-track {
  box-shadow: var(--toggle-track-inset-shadow), var(--focus-ring-subtle);
}

/* JS-driven active modifier */
.toggle-active .toggle-track {
  background: var(--toggle-on-bg, var(--color-primary));
}
.toggle-active .toggle-thumb {
  transform: translateX(calc(var(--toggle-width, 48px) - var(--toggle-thumb-size, 22px) - 4px));
}
[dir="rtl"] .toggle-active .toggle-thumb {
  transform: translateX(calc(-1 * (var(--toggle-width, 48px) - var(--toggle-thumb-size, 22px) - 4px)));
}


/* =============================================================================
   TIMELINE — Luxury Editorial
   ============================================================================= */

/* Role color palette — maps role colors to timeline dot tokens */
/* Fallback values match light theme tokens — theme files supply actual values via --timeline-dot-* */
:root {
  --tl-color-dwtc:      var(--timeline-dot-dwtc);
  --tl-color-organiser: var(--timeline-dot-organiser);
  --tl-color-planner:   var(--timeline-dot-planner);
}

.timeline {
  display: grid;
  grid-template-columns: 1fr var(--timeline-line-width) 1fr;
  gap: 0;
  position: relative;
}

/* ── Center gradient line ─────────────────────────────────────────────────── */
.timeline-line {
  width: var(--timeline-line-width);
  background: linear-gradient(to bottom, var(--timeline-line-color-start), var(--timeline-line-color-end));
  border-radius: 99px;
  align-self: stretch;
  justify-self: center;
  box-shadow: var(--timeline-line-glow);
}

/* ── Column gutters ───────────────────────────────────────────────────────── */
.timeline-left {
  padding-inline-end: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.timeline-right {
  padding-inline-start: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Entry card ───────────────────────────────────────────────────────────── */
.timeline-entry {
  background-color: var(--timeline-card-bg);
  border: none;
  border-radius: var(--timeline-card-radius);
  border-inline-start: var(--timeline-card-accent-width) solid transparent;
  padding: var(--timeline-card-padding);
  margin-bottom: var(--timeline-entry-gap);
  position: relative;
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  box-shadow: var(--timeline-card-shadow);
  backdrop-filter: blur(var(--timeline-card-blur));
  -webkit-backdrop-filter: blur(var(--timeline-card-blur));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Role-specific left accent */
.timeline-entry[data-role="dwtc"] {
  border-inline-start-color: var(--tl-color-dwtc);
}
.timeline-entry[data-role="organiser"] {
  border-inline-start-color: var(--tl-color-organiser);
}
.timeline-entry[data-role="planner"] {
  border-inline-start-color: var(--tl-color-planner);
}

.timeline-entry-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ── Dot on timeline line ─────────────────────────────────────────────────── */
.timeline-dot {
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: 50%;
  border: var(--timeline-dot-border);
  justify-self: center;
  align-self: flex-start;
  margin-top: var(--space-5);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.timeline-dot-dwtc {
  background-color: var(--timeline-dot-dwtc);
  box-shadow: var(--timeline-dot-dwtc-halo);
}

.timeline-dot-organiser {
  background-color: var(--timeline-dot-organiser);
  box-shadow: var(--timeline-dot-organiser-halo);
}

.timeline-dot-planner {
  background-color: var(--timeline-dot-planner);
  box-shadow: var(--timeline-dot-planner-halo);
}

/* Pulse — only on element with .timeline-dot-latest */
@keyframes tl-dot-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--timeline-dot-dwtc-halo);
  }
  50% {
    transform: scale(1.15);
    box-shadow: var(--timeline-dot-dwtc-halo-pulse);
  }
}
@keyframes tl-dot-pulse-teal {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--timeline-dot-organiser-halo);
  }
  50% {
    transform: scale(1.15);
    box-shadow: var(--timeline-dot-organiser-halo-pulse);
  }
}
@keyframes tl-dot-pulse-purple {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--timeline-dot-planner-halo);
  }
  50% {
    transform: scale(1.15);
    box-shadow: var(--timeline-dot-planner-halo-pulse);
  }
}

.timeline-dot-latest.timeline-dot-dwtc {
  animation: tl-dot-pulse 2s ease-in-out infinite;
}
.timeline-dot-latest.timeline-dot-organiser {
  animation: tl-dot-pulse-teal 2s ease-in-out infinite;
}
.timeline-dot-latest.timeline-dot-planner {
  animation: tl-dot-pulse-purple 2s ease-in-out infinite;
}

/* ── Actor badge — glass chip ─────────────────────────────────────────────── */
.timeline-actor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--spacing-badge-y) var(--space-2_5);
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-semibold);
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  backdrop-filter: blur(var(--timeline-badge-blur));
  -webkit-backdrop-filter: blur(var(--timeline-badge-blur));
}

.timeline-actor-dwtc {
  background-color: var(--timeline-actor-dwtc-bg);
  border: 1px solid var(--timeline-actor-dwtc-border);
  color: var(--timeline-actor-dwtc-color);
}

.timeline-actor-organiser {
  background-color: var(--timeline-actor-organiser-bg);
  border: 1px solid var(--timeline-actor-organiser-border);
  color: var(--timeline-actor-organiser-color);
}

.timeline-actor-planner {
  background-color: var(--timeline-actor-planner-bg);
  border: 1px solid var(--timeline-actor-planner-border);
  color: var(--timeline-actor-planner-color);
}

/* ── Timestamp ────────────────────────────────────────────────────────────── */
.timeline-timestamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-size-badge);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-badge);
  color: var(--text-tertiary);
  margin-inline-start: auto;
}

/* ── Comment block ────────────────────────────────────────────────────────── */
.timeline-comment {
  margin-top: var(--space-3_5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--timeline-comment-radius);
  font-size: var(--timeline-comment-text-size);
  line-height: 1.65;
  color: var(--text-secondary);
  position: relative;
  background: var(--timeline-comment-dwtc-bg);
}

.timeline-entry[data-role="organiser"] .timeline-comment {
  background: var(--timeline-comment-organiser-bg);
}
.timeline-entry[data-role="planner"] .timeline-comment {
  background: var(--timeline-comment-planner-bg);
}

.timeline-comment-label {
  display: block;
  font-size: var(--timeline-comment-label-size);
  font-weight: var(--font-weight-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  opacity: var(--timeline-comment-label-opacity);
  margin-bottom: var(--space-1_5);
}

/* ── Scroll-reveal animation ──────────────────────────────────────────────── */
@keyframes tl-reveal-left {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tl-reveal-right {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.timeline-entry.tl-animate-left {
  opacity: 0;
}
.timeline-entry.tl-animate-right {
  opacity: 0;
}
.timeline-entry.tl-revealed.tl-animate-left {
  animation: tl-reveal-left 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.timeline-entry.tl-revealed.tl-animate-right {
  animation: tl-reveal-right 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* =============================================================================
   UTILITY — Key/Value display
   ============================================================================= */

.kv-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1_5) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-size-body-sm);
}
.kv-row:last-child {
  border-bottom: none;
}

.kv-label {
  flex: 0 0 auto;
  min-width: 120px;
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-badge);
  padding-top: var(--space-px);
}

.kv-value {
  flex: 1;
  color: var(--text-primary);
  font-weight: var(--font-weight-regular);
  word-break: break-word;
}

.kv-value a {
  color: var(--link-color, var(--text-link));
  font-weight: var(--link-weight, 500);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% var(--link-underline-height, 1.5px);
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: var(--link-transition, background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease);
}
.kv-value a:hover {
  color: var(--link-hover-color, var(--link-color));
  background-size: 100% var(--link-underline-height, 1.5px);
}


/* =============================================================================
   PAGINATION
   ============================================================================= */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  text-decoration: none;
}

.page-btn:hover {
  background-color: var(--bg-inset);
  color: var(--text-primary);
}

.page-btn.active,
.page-btn[aria-current="page"] {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--radius-md);
}

.page-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pagination-meta {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}


/* =============================================================================
   SKELETON LOADING
   ============================================================================= */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.skeleton {
  background-color: var(--bg-inset);
  border-radius: var(--radius-xs);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: var(--text-size-body-sm);
  width: 100%;
}

.skeleton-title {
  height: var(--text-size-h2);
  width: 60%;
}

.skeleton-avatar {
  border-radius: var(--radius-full);
  width: var(--size-avatar-md);
  height: var(--size-avatar-md);
}

.skeleton-btn {
  height: 36px;
  width: 100px;
  border-radius: var(--radius-xs);
}


/* =============================================================================
   TOOLTIP (CSS-only, positioned via JS or title attr polyfill)
   ============================================================================= */

.tooltip-wrapper {
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-1_5));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background-color: var(--text-primary);
  color: var(--bg-page);
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text-primary);
}

.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
  opacity: 1;
}


/* =============================================================================
   NAV BAR (portal-specific)
   ============================================================================= */

.navbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--size-nav-height);
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-navbar-x);
  gap: var(--space-6);
  z-index: 100;
}

.navbar-logo {
  flex-shrink: 0;
  height: var(--size-avatar-md);
}

.navbar-divider {
  width: 1px;
  height: var(--size-navbar-divider-h);
  background-color: var(--border-default);
  flex-shrink: 0;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
}

.navbar-link {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}
.navbar-link:hover {
  color: var(--text-primary);
}
.navbar-link.active {
  color: var(--btn-primary-bg);
}

.navbar-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar-user {
  text-align: end;
  line-height: 1.3;
}
.navbar-user-name {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.navbar-user-email {
  font-size: var(--text-size-badge);
  color: var(--text-tertiary);
}


/* =============================================================================
   PORTAL FOOTER  (page chrome — modern, theme-aware page footer)
   ─────────────────────────────────────────────────────────────────────────────
   `.portal-footer` is the surface shell; the inner block sets the layout.
   Three variants (see template.html §16.5):

     A — Slim line   (default)   → .portal-footer  > .portal-footer-inner
     B — Two-row     (compact)   → .portal-footer  > .portal-footer-main
                                                    + .portal-footer-legal
     C — Multi-column            → .portal-footer.portal-footer-columns
                                      > .portal-footer-grid
                                      + .portal-footer-legal

   Variant A keeps the original `.portal-footer-inner` markup contract, so
   every existing consumer is upgraded to the modern look with no markup
   change. Theme-aware surface tokens — no hardcoded dark bar.
   ============================================================================= */

/* ── Surface shell ──────────────────────────────────────────────────────────── */
.portal-footer {
  background-color: var(--bg-section-alt);
  border-top: 1px solid var(--border-default);
  container-type: inline-size;
}
.portal-footer-columns {
  background-color: var(--bg-section);
}

/* ── Links (covers unclassed <a> in legacy markup) ──────────────────────────── */
.portal-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) ease;
}
.portal-footer a:hover {
  color: var(--color-primary);
}
.portal-footer a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Brand cluster ──────────────────────────────────────────────────────────── */
.portal-footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
}
.portal-footer-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-size-subtitle);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.portal-footer-tagline {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}

/* ── Social icon buttons ────────────────────────────────────────────────────── */
.portal-footer-socials {
  display: flex;
  gap: var(--space-2);
}
.portal-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              background-color var(--duration-fast) ease;
}
.portal-footer-social:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.portal-footer-social:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.portal-footer-social svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

/* ── Variant A — slim line (default; legacy `.portal-footer-inner` markup) ──── */
.portal-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}
.portal-footer-sep {
  color: var(--text-tertiary);
  opacity: 0.4;
  user-select: none;
}
.portal-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* ── Variant B — two-row compact ────────────────────────────────────────────── */
.portal-footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6);
}
.portal-footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-size-body-sm);
}

/* ── Variant C — multi-column ───────────────────────────────────────────────── */
.portal-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--space-8) var(--space-6);
  padding: var(--space-8) var(--space-6) var(--space-7);
}
.portal-footer-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 34ch;
}
.portal-footer-about-text {
  font-size: var(--text-size-body-sm);
  line-height: var(--leading-relaxed, 1.6);
  color: var(--text-tertiary);
}
.portal-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2_5);
}
.portal-footer-col-title {
  margin-bottom: var(--space-1);
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.portal-footer-col a {
  font-size: var(--text-size-body-sm);
}

/* ── Shared legal strip (variants B + C) ────────────────────────────────────── */
.portal-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}
.portal-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

/* ── Variant C — responsive collapse (container-query driven) ───────────────── */
@container (max-width: 680px) {
  .portal-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-footer-about { grid-column: 1 / -1; }
}
@container (max-width: 420px) {
  .portal-footer-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   BREADCRUMB BAR
   ============================================================================= */

.breadcrumb-bar {
  min-height: var(--size-breadcrumb-height);
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  padding-inline: var(--spacing-navbar-x);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-size-body-sm);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  padding-block: var(--space-1);
  padding-inline: var(--space-1_5);
  border-radius: var(--radius-xs);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.breadcrumb-item:hover {
  color: var(--text-primary);
  background-color: var(--bg-section);
}
.breadcrumb-item:focus-visible {
  outline: none;
  color: var(--text-primary);
  box-shadow: var(--focus-ring);
}
.breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  background-color: transparent;
}

/* Crisp, font-independent chevron — replaces any literal glyph in the markup */
.breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 0;
}
.breadcrumb-sep::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

.breadcrumb-page-title {
  font-size: var(--text-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

/* ── Breadcrumb: mobile truncation ────────────────────────────────────── */
@media (max-width: 639px) {
  .breadcrumb-bar {
    padding-inline: var(--space-4);
    height: auto;
    min-height: var(--size-breadcrumb-height);
    padding-block: var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .breadcrumb {
    flex-wrap: wrap;
  }

  .breadcrumb-item.breadcrumb-middle {
    display: none;
  }

  .breadcrumb-ellipsis {
    display: none;
  }

  .breadcrumb:has(.breadcrumb-middle) .breadcrumb-ellipsis {
    display: inline;
    color: var(--text-tertiary);
    font-size: var(--text-size-body-sm);
  }

  .breadcrumb-page-title {
    font-size: var(--text-size-body-sm);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* =============================================================================
   HERO / EVENT BANNER
   ============================================================================= */

.hero-banner {
  border-radius: var(--radius-2xl);
  background: var(--hero-gradient);
  padding: var(--space-8);
  color: var(--color-white, #ffffff);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
.hero-banner > * { position: relative; z-index: 1; }
/* Contrast safety: bare text inside the hero inherits the banner's on-dark
   colour, so a stray <p>/<span> can never silently fall back to the base body
   text colour (the dark-on-dark trap). Classed elements — .badge, .tag, .btn,
   .link — keep their own colour because :not([class]) excludes them. */
.hero-banner :where(p, h1, h2, h3, h4, h5, h6, span, li, dt, dd):not([class]) {
  color: inherit;
}
/* Bento: ambient glow washes on the hero. */
.hero-banner::before,
.hero-banner::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 130%;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero-banner::before {
  top: -30%;
  inset-inline-start: -10%;
  background: var(--text-link-teal);
  opacity: 0.22;
}
.hero-banner::after {
  bottom: -30%;
  inset-inline-end: -10%;
  background: var(--color-primary);
  opacity: 0.18;
}

.hero-banner-title {
  font-size: var(--text-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-white, #ffffff);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.hero-pill {
  background-color: var(--hero-pill-bg);/* dark translucent — white text clearly readable on dark gradient */
  border-radius: var(--radius-xl);
  padding: var(--space-2_5) var(--space-4);
  text-align: center;
  min-width: 110px;
}

.hero-pill-label {
  display: block;
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--hero-pill-label-color);
  margin-bottom: var(--space-0_5);
}

.hero-pill-value {
  display: block;
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-size-subtitle);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: var(--color-white, #ffffff);
}

.hero-pill-countdown .hero-pill-value {
  font-size: var(--text-size-h1);
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   HERO OVERLAP — a surface card that floats up over the hero banner above it.
   Pair with a .hero-banner (or any dark section): the card is pulled up by a
   negative block-start margin so its top edge overlaps the banner. A raised
   z-index keeps it above the banner's ambient glow. Tokenised throughout so it
   re-themes cleanly across light / dark / oled.
   -------------------------------------------------------------------------- */
.hero-overlap {
  position: relative;
  z-index: 2;
  margin-block-start: calc(-1 * var(--space-10));
  padding: var(--space-8);
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

/* Tighter pull for compact layouts. */
.hero-overlap-sm {
  margin-block-start: calc(-1 * var(--space-6));
}

@media (max-width: 640px) {
  .hero-overlap {
    margin-block-start: calc(-1 * var(--space-6));
    padding: var(--space-5);
  }
}


/* =============================================================================
   FILE CARD
   ============================================================================= */

.file-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.file-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-bold);
  color: var(--file-icon-text, #ffffff);
  flex-shrink: 0;
}

.file-icon-pdf { background-color: var(--file-icon-pdf); }
.file-icon-dwg { background-color: var(--file-icon-dwg); }
.file-icon-doc { background-color: var(--file-icon-doc); }
.file-icon-xls { background-color: var(--file-icon-xls); }
.file-icon-img { background-color: var(--file-icon-img); }
.file-icon-zip { background-color: var(--file-icon-zip); }

.file-name {
  font-size: var(--text-size-body-sm);
  color: var(--link-color, var(--text-link));
  font-weight: var(--link-weight, var(--font-weight-medium));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  text-decoration: none;
  transition: var(--link-transition-base);
}
.file-name:hover {
  color: var(--link-hover-color, var(--link-color));
  opacity: var(--link-hover-opacity);
}

.file-type {
  font-size: var(--text-size-badge);
  color: var(--text-tertiary);
}

.file-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-size-badge);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}


/* =============================================================================
   DATA TABLE
   ============================================================================= */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-size-body-sm);
}

.data-table th {
  background-color: var(--bg-inset);
  color: var(--text-tertiary);
  font-size: var(--text-size-badge);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  padding: var(--space-2_5) var(--space-3_5);
  text-align: start;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-3_5);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background-color: var(--bg-card-hover);
}

/* ── Data Table: compact modifier for dense data-entry contexts ─────────
   Compose with the base class: <table class="data-table data-table-compact">.
   Use for CPQ quote lines, admin settings tables, filter-bar result lists —
   any surface where ≥ 15 rows must fit above the fold. Rows shrink from
   ~44px to ~32px; th drops from 11px to 10px.
   Keep the default .data-table for dashboards, summary cards, and any
   table that is read-first rather than edited-in-place. */
.data-table-compact th {
  /* th stays at the base 11px (--text-size-badge); just tighten padding */
  padding: var(--space-1_5) var(--space-3);
}
.data-table-compact td {
  /* Body font inherits base (11px / --text-size-body-sm). Only padding tightens. */
  padding: var(--space-2) var(--space-3);
}

/* ── Column alignment — apply the SAME class to both <th> and <td> ─────────
   Header alignment must be set inside the DS, not via consumer utilities:
   `.data-table th { text-align: start }` has specificity (0,1,1) and silently
   beats any single-class utility (0,1,0) on the <th>, so amount columns end
   up with right-aligned cells under start-aligned headers.

   The `.data-table` / `.data-grid` / `.grid-table` ancestor qualifier raises
   these helpers to (0,2,0), which beats both `.data-table th` (0,1,1) and
   `.grid-th` (0,1,0). Logical properties (start/end) flip automatically in
   RTL — never use `left`/`right` for column alignment. */
.data-table .col-end,
.data-table .col-num,
.data-grid  .col-end,
.data-grid  .col-num,
.grid-table .col-end,
.grid-table .col-num   { text-align: end; }

.data-table .col-center,
.data-grid  .col-center,
.grid-table .col-center { text-align: center; }

.data-table .col-start,
.data-grid  .col-start,
.grid-table .col-start  { text-align: start; }

/* `.col-num` is the column-level companion to `.grid-cell-number`: put it on
   the <th> AND every <td> in a numeric column to keep header + cells aligned
   and digits tabular. Cell-level styling (color / weight / size) still comes
   from `.grid-cell-number` on body cells. */
.data-table .col-num,
.data-grid  .col-num,
.grid-table .col-num { font-variant-numeric: tabular-nums; }

/* `.grid-th` uses a flex inner (`.grid-th-inner`) so `text-align` on the th
   alone doesn't move the label to the column edge — the flex container needs
   matching `justify-content`. Wire the column-alignment helpers through to
   the inner so consumers don't have to add `u-justify-end` manually. */
.data-grid  .col-num.grid-th  .grid-th-inner,
.data-grid  .col-end.grid-th  .grid-th-inner,
.grid-table .col-num.grid-th  .grid-th-inner,
.grid-table .col-end.grid-th  .grid-th-inner { justify-content: flex-end; }

.data-grid  .col-center.grid-th .grid-th-inner,
.grid-table .col-center.grid-th .grid-th-inner { justify-content: center; }

.data-grid  .col-start.grid-th  .grid-th-inner,
.grid-table .col-start.grid-th  .grid-th-inner { justify-content: flex-start; }

/* `.input-flush` / `.select-flush` in a table cell MUST sit flush with the
   cell's text edge — the name "flush" promises this and the cell already
   provides the breathing room via its own padding. Without zeroing the
   input's own inline padding + border, the value sits ~5px inside the cell
   and visibly misaligns with the column header (which sits at cell-text
   edge, e.g. a static `<span class="aed">` in the same column lines up
   correctly but the input next to it does not). The focus ring still
   renders via `--focus-ring-inset` (no layout shift on focus). */
.data-table td > .input-flush,
.data-table td > .select-flush,
.data-grid  td > .input-flush,
.data-grid  td > .select-flush,
.grid-table td > .input-flush,
.grid-table td > .select-flush {
  width: 100%;
  padding-inline: 0;
  border-inline-width: 0;
}

/* Numeric columns force end-alignment + tabular-nums on the editable
   control itself — `text-align` does NOT inherit into form controls
   reliably across browsers, so without this, an `<input>` inside a
   `<td class="col-num">` stays start-aligned even though the column does. */
.data-table .col-num input,
.data-table .col-num select,
.data-table .col-end input,
.data-table .col-end select,
.data-grid  .col-num input,
.data-grid  .col-num select,
.data-grid  .col-end input,
.data-grid  .col-end select,
.grid-table .col-num input,
.grid-table .col-num select,
.grid-table .col-end input,
.grid-table .col-end select {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ── Data Table: responsive horizontal scroll ──────────────────────────── */
.tpl-card-flush {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
  .data-table:not(.data-table-cards) {
    min-width: 700px;
  }
}

/* ── Expandable Row (Data Table) ───────────────────────────────────────────── */
.data-table .expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  flex-shrink: 0;
  padding: 0;
}

.data-table .expand-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-inset);
}

.data-table .expand-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.data-table tr.expanded .expand-toggle svg {
  transform: rotate(90deg);
}

.data-table .expand-row {
  display: none;
}

.data-table .expand-row.open {
  display: table-row;
}

.data-table .expand-row td {
  padding: 0;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--bg-section, var(--bg-inset));
}

.expand-content {
  padding: var(--space-4) var(--space-5) var(--space-5);
  padding-inline-start: calc(var(--space-5) + 38px);
  animation: expand-slide 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes expand-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.expand-content .expand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.expand-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
}

.expand-detail-label {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--text-tertiary);
}

.expand-detail-value {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.expand-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* ── Expandable Row (Data Grid) ────────────────────────────────────────────── */
.grid-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  padding: 0;
}

.grid-expand-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-inset);
}

.grid-expand-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-expand-toggle.open svg {
  transform: rotate(90deg);
}

.grid-expand-row {
  display: none;
}

.grid-expand-row.open {
  display: table-row;
}

.grid-expand-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--bg-section, var(--bg-inset));
}

.grid-expand-content {
  padding: var(--space-4) var(--space-6) var(--space-5);
  padding-inline-start: calc(var(--space-6) + 48px);
  animation: expand-slide 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-expand-content .expand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}


/* =============================================================================
   GROUPING — shared contract for .data-table and .data-grid
   Opt-in via `.is-grouped` on the component. See SPECS.md §Grouping and
   template.html §17 (static) / §22 (grid) for the class contract and demos.
   Additive only — existing consumers render unchanged without `.is-grouped`.
   ============================================================================= */

.data-table.is-grouped .data-table-group-row,
.data-grid.is-grouped .grid-group-row {
  background: var(--grid-group-row-bg);
  color: var(--grid-group-row-text);
}

.data-table-group-row > td,
.grid-group-row > td {
  padding: var(--space-2_5) var(--space-3_5);
  min-height: 36px;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-size-body-sm);
  border-bottom: 1px solid var(--grid-row-border, var(--border-default));
  color: var(--grid-group-row-text);
}

.group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline-end: var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-xs);
  padding: 0;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  vertical-align: middle;
}

.group-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-inset);
}

.group-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

.group-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
}

.group-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.group-label {
  font-weight: var(--font-weight-semibold);
  color: var(--grid-group-row-text);
  margin-inline-end: var(--space-2);
}

.group-count {
  font-weight: var(--font-weight-regular);
  color: var(--text-tertiary);
  margin-inline-end: var(--space-3);
}

.group-agg {
  float: inline-end;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-size-caption);
}

/* In a horizontally-scrolling grid, pin the aggregate to the visible edge
   so the sum stays in view regardless of scroll position. */
.data-grid.is-grouped .grid-group-row .group-agg {
  position: sticky;
  inset-inline-end: var(--space-3_5);
  background: var(--grid-group-row-bg);
  padding-inline-start: var(--space-3);
  z-index: 1;
}

.group-agg-val {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-inline-start: var(--space-1);
}

.group-checkbox {
  margin-inline-end: var(--space-2);
  vertical-align: middle;
}

.grid-group-by {
  white-space: nowrap;
  flex-shrink: 0;
}

.grid-group-by-label {
  white-space: nowrap;
}

.data-table.is-grouped tbody tr.in-group > td:first-child,
.data-grid.is-grouped .grid-row.in-group > td:first-child {
  padding-inline-start: calc(var(--space-3_5) + var(--grid-group-indent));
}


/* =============================================================================
   FLOATING ACTION BUTTON (Chat Widget)
   ============================================================================= */

.fab {
  position: fixed;
  bottom: var(--space-5);
  inset-inline-end: var(--space-5);
  width: var(--size-fab);
  height: var(--size-fab);
  border-radius: var(--radius-full);
  background-color: var(--fab-bg);
  color: var(--fab-text, #ffffff);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.fab:hover {
  background-color: var(--fab-bg-hover);
  transform: scale(1.05);
}

.fab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-lg);
}


/* =============================================================================
   MODAL
   ============================================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-6);
}

.modal {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-12));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.modal-header .btn-icon {
  flex-shrink: 0;
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-inset);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}


/* =============================================================================
   TAG REMOVE BUTTON
   ============================================================================= */

.tag-remove {
  margin-left: var(--space-0_5);
  cursor: pointer;
  opacity: 0.6;
  font-size: var(--text-size-caption);
  line-height: 1;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
.tag-remove:hover { opacity: 1; }


/* =============================================================================
   SERVICE ICON CIRCLE
   ============================================================================= */

.service-icon-circle {
  width: var(--size-logo-lg);
  height: var(--size-logo-lg);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-size-topbar);
  margin-bottom: var(--space-3);
}


/* =============================================================================
   EVENT CARD
   ============================================================================= */

.event-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
}

.event-card-header {
  background: var(--event-card-header-gradient, linear-gradient(135deg, #0d3b72, #1E90FF 60%, #00BCD4));
  padding: var(--space-6);
  color: var(--color-white, #fff);
}

.event-card-body {
  padding: var(--space-5) var(--space-6);
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
}

/* Strip the trailing divider when .card-actions follows the kv list.
   (:last-child fails because .card-actions is the true last child.) */
.event-card-body > .kv-row:last-of-type {
  border-bottom: none;
}

/* Action row: pushed to card footer, with generous space above the data list. */
.event-card-body > .card-actions {
  margin-top: auto;
  padding-top: var(--space-4);
}


/* =============================================================================
   PRICE — currency-agnostic money display
   -----------------------------------------------------------------------------
   <span class="price"><span class="price-currency">MAD</span>790.43</span>
   Brand-emphasis colour (AAA via --price-color), tabular figures so columns of
   prices align. .price-currency is the ISO code / symbol; for AED use the
   glyph component instead:  <span class="price"><span class="aed"></span>…</span>
   Sizes: base · .price-sm · .price-lg.
   ============================================================================= */

.price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-sans);
  font-size: var(--text-size-subtitle);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--font-feature-tabular);
  color: var(--price-color);
  white-space: nowrap;
}
.price-currency {
  font-size: 0.62em;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  align-self: center;
}
.price-sm { font-size: var(--text-size-body); }
.price-lg { font-size: var(--text-size-h2); }
.price-was {
  font-size: 0.7em;
  font-weight: var(--font-weight-medium);
  color: var(--price-was);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price-off {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--discount-text);
  background-color: var(--discount-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-0_5) var(--space-1_5);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.price-unit {
  font-size: 0.62em;
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
}

/* RATING — read-only star display (graphical; not a text pair) */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
}
.rating-stars {
  display: inline-flex;
  gap: var(--space-0_5);
  color: var(--rating-star);
  font-size: var(--text-size-body);
}
.rating-stars [data-lucide] { width: 1em; height: 1em; }
.rating-star-empty { color: var(--rating-track); }
.rating-count { color: var(--text-tertiary); }

/* STOCK INDICATOR — dot + label */
.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
}
.stock::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}
.stock-in  { color: var(--stock-in); }
.stock-low { color: var(--stock-low); }
.stock-out { color: var(--stock-out); }

/* WISHLIST — corner heart toggle (CSS-only state; consumer wires aria-pressed) */
.wish {
  position: absolute;
  inset-block-start: var(--space-2_5);
  inset-inline-end: var(--space-2_5);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--space-9);
  height: var(--space-9);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.wish [data-lucide] { width: 1.05em; height: 1.05em; }
.wish:hover { color: var(--wish-active); }
.wish:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.wish.is-on { color: var(--wish-active); }
.wish.is-on [data-lucide="heart"] { fill: currentColor; }


/* =============================================================================
   QUANTITY STEPPER — − value +
   -----------------------------------------------------------------------------
   <div class="qty">
     <button class="qty-btn" aria-label="Decrease">−</button>
     <span class="qty-value" aria-live="polite">0</span>
     <button class="qty-btn" aria-label="Increase">+</button>
   </div>
   ============================================================================= */

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  min-height: 36px;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-size-subtitle);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}
.qty-btn:hover:not(:disabled) {
  background-color: var(--bg-inset);
  color: var(--text-primary);
}
.qty-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}
.qty-btn:disabled,
.qty-btn[aria-disabled="true"] {
  color: var(--text-tertiary);
  opacity: 0.5;
  cursor: not-allowed;
}
.qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-10);
  padding-inline: var(--space-1);
  border-inline: 1px solid var(--border-default);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-feature-settings: var(--font-feature-tabular);
}


/* =============================================================================
   PRODUCT CARD — commerce tile (media · category · title · price · actions)
   -----------------------------------------------------------------------------
   <article class="product-card">
     <div class="product-card-media">
       <span class="product-card-badge"><span class="badge badge-version badge-version-teal">Early bird</span></span>
       <div class="product-card-thumb">🪑</div>           (or <img>)
     </div>
     <div class="product-card-body">
       <div class="product-card-cat">Seating</div>
       <h3 class="product-card-title">BLUSH – White Bar Stool</h3>
       <span class="price"><span class="price-currency">MAD</span>790.43</span>
       <div class="product-card-actions">
         <div class="qty">…</div>
         <button class="btn btn-primary">Add to cart</button>
       </div>
     </div>
   </article>
   ============================================================================= */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
}
.product-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Soft top-down wash instead of a flat fill — gives the empty media depth. */
  background-image: linear-gradient(160deg, var(--product-media-from), var(--product-media-to));
  overflow: hidden;
}
/* Faint radial sheen behind the product so the thumbnail reads as lit. */
.product-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 18%, var(--product-tag-bg), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}
.product-card-thumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.25rem;            /* hero the product glyph (was tiny) */
  line-height: 1;
  transition: transform var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card:hover .product-card-thumb { transform: scale(1.08); }
.product-card:hover .product-card-media img { transform: scale(1.05); }

/* Modern status chip — frosted, consistent weight, leading tier dot. Replaces
   the mismatched solid/plain badges. Colour lives only in the dot (decorative,
   ≥3:1) so the label text stays AAA on the frosted surface. */
.product-card-badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 2;
}
.product-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-1) var(--space-2_5);
  border-radius: var(--radius-pill);
  background-color: var(--product-tag-bg);
  border: 1px solid var(--product-tag-border);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--product-tag-text);
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
}
.product-tag::before {
  content: "";
  width: var(--space-1_5);
  height: var(--space-1_5);
  border-radius: var(--radius-full);
  background-color: var(--product-tag-dot, var(--text-tertiary));
  flex: none;
}
.product-tag-early    { --product-tag-dot: var(--color-teal); }
.product-tag-standard { --product-tag-dot: var(--text-tertiary); }
.product-tag-onsite   { --product-tag-dot: var(--color-amber); }

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.product-card-cat {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--text-tertiary);
}
.product-card-title {
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
}
.product-card-body > .price {
  margin-block: var(--space-1) var(--space-3);
}
.product-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-1);
}
.product-card-actions > .qty {
  flex: 0 0 auto;
}
/* Grow to fill the row; when the card is too narrow for qty + button side by
   side, the button wraps to its own full-width line instead of clipping. */
.product-card-actions > .btn {
  flex: 1 1 7rem;
}

/* PRODUCT-CARD STATES — sold-out + corner ribbon */
.product-card.is-out { opacity: 0.62; }
.product-card.is-out .product-card-thumb { filter: grayscale(1); }
.pc-ribbon {
  position: absolute;
  inset-block-start: var(--space-2_5);
  inset-inline-start: var(--space-2_5);
  z-index: 2;
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--discount-text);
  background-color: var(--discount-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-0_5) var(--space-2);
  letter-spacing: var(--tracking-tight);
}


/* =============================================================================
   HORIZONTAL PRODUCT CARD — list view / search result / order history
   -----------------------------------------------------------------------------
   A side-by-side card: thumb | body (cat + title + rating) | price | qty | cta
   On narrow viewports (≤639px) the body and trailing slots wrap below the thumb.
============================================================================= */
.product-card-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3_5);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.product-card-row-thumb {
  flex-shrink: 0;
  width: var(--space-16);
  height: var(--space-16);
  display: grid;
  place-items: center;
  font-size: var(--text-size-h3);
  background-color: var(--bg-inset);
  border-radius: var(--radius-md);
}
.product-card-row-body { flex: 1; min-width: 0; }

/* Mobile: stack thumb + body + price/qty/actions */
@media (max-width: 639px) {
  .product-card-row { flex-wrap: wrap; }
  .product-card-row-body { flex-basis: 100%; }
  .product-card-row > .price { margin-inline-start: auto; }
}

/* Mobile guard: the existing card action row never overflows a narrow card */
@media (max-width: 639px) {
  .product-card-actions { flex-wrap: wrap; }
  .product-card-actions > .btn { flex: 1 1 auto; }
}

/* EMPTY STATE — icon + title + hint + CTA (cart, no results, no orders) */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background-color: var(--bg-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-2xl);
}
.empty-state-icon {
  width: var(--size-fab);
  height: var(--size-fab);
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--bg-inset);
  color: var(--text-tertiary);
}
.empty-state-icon [data-lucide] { width: 1.6em; height: 1.6em; }
.empty-state-title {
  margin: 0 0 var(--space-1_5);
  font-family: var(--font-heading);
  font-size: var(--text-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.empty-state-text {
  margin: 0 auto var(--space-5);
  max-width: 42ch;
  color: var(--text-tertiary);
  font-size: var(--text-size-body-sm);
}


/* =============================================================================
   ORDER SUMMARY — cart / checkout totals panel
   -----------------------------------------------------------------------------
   A self-contained, right-aligned totals card. Labels sit on the inline-start,
   amounts hard-align on the inline-end with tabular figures so every figure —
   subtotal, discount, VAT and the grand total — lines up on one column.

   <aside class="order-summary">
     <div class="order-summary-head">
       <h3 class="order-summary-title">Order summary</h3>
       <span class="order-summary-count">2 items</span>
     </div>
     <dl class="order-summary-lines">
       <div class="order-summary-line"><dt>Items total</dt><dd><span class="price price-sm"><span class="aed">13,931.74</span></span></dd></div>
       <div class="order-summary-line"><dt>Delivery</dt><dd><span class="order-summary-free">Free</span></dd></div>
       <div class="order-summary-line order-summary-line-discount"><dt>Discount</dt><dd>−<span class="price price-sm"><span class="aed">1,393.17</span></span></dd></div>
       <div class="order-summary-line"><dt>VAT (5%)</dt><dd><span class="price price-sm"><span class="aed">626.93</span></span></dd></div>
     </dl>
     <div class="order-summary-total"><dt>Order total</dt><dd><span class="price price-lg"><span class="aed">13,165.50</span></span></dd></div>
     <span class="order-summary-savings"><i data-lucide="badge-percent"></i> You save <span class="aed">1,393.17</span></span>
     <button class="btn btn-primary u-w-full">Proceed to checkout</button>
   </aside>

   Add .order-summary-sticky to pin the panel beside a scrolling column.
   ============================================================================= */

.order-summary {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.order-summary-sticky {
  position: sticky;
  top: var(--space-6);
}
.order-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.order-summary-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.order-summary-count {
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  background: var(--bg-inset);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}
.order-summary-lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.order-summary-line,
.order-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.order-summary-line > dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
}
.order-summary-line > dd {
  margin: 0;
  color: var(--text-secondary);
  font-feature-settings: var(--font-feature-tabular);
  text-align: end;
}
.order-summary-free {
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--success-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.order-summary-line-discount > dt,
.order-summary-line-discount > dd,
.order-summary-line-discount .price {
  color: var(--success-text);
}
.order-summary-total {
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: var(--space-4);
}
.order-summary-total > dt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.order-summary-total > dd { margin: 0; }
.order-summary-savings {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--success-text);
  background: var(--success-bg);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
.order-summary-savings > svg,
.order-summary-savings .u-icon-14 {
  flex: none;
}

/* COUPON — promo input + applied chip, slotted into .order-summary */
.coupon { display: flex; gap: var(--space-2); }
.coupon > .input { flex: 1; }
.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--success-text);
  background-color: var(--success-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-2_5);
}

/* COUNT BADGE — bubble for icon buttons (cart, notifications) */
.count {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-1));
  inset-inline-end: calc(-1 * var(--space-1));
  min-width: var(--space-4);
  height: var(--space-4);
  padding-inline: var(--space-1);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--discount-bg);
  color: var(--discount-text);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.btn:has(> .count) { position: relative; overflow: visible; }


/* =============================================================================
   ORDER CONFIRMATION — funnel terminus (.order-confirm / .order-meta)
   ============================================================================= */
.order-confirm {
  text-align: center;
  padding: var(--space-10) var(--space-7);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}
.order-confirm-icon {
  width: var(--size-fab);
  height: var(--size-fab);
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--success);
  color: var(--color-white);
}
.order-confirm-icon [data-lucide] { width: 1.8em; height: 1.8em; }
.order-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  justify-content: center;
  padding: var(--space-3_5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-6);
}
.order-meta-item { text-align: start; }
.order-meta-key {
  font-size: var(--text-size-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}
.order-meta-value {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
@media (max-width: 639px) {
  .order-meta { display: flex; flex-direction: column; gap: var(--space-4); text-align: center; }
  .order-meta-item { text-align: center; }
}


/* =============================================================================
   INFO GRID CARD
   ============================================================================= */

.info-grid-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--bg-card);
  overflow: hidden;
}

.info-grid-card-header {
  height: 4px;
}

.info-grid-card-header-blue { background: var(--color-portal-blue); }
.info-grid-card-header-teal { background: var(--color-teal); }
.info-grid-card-header-gold { background: var(--color-gold); }

.info-grid-card-body {
  padding: var(--space-5);
}


/* =============================================================================
   PROGRESS SIZES
   ============================================================================= */

.progress-lg { height: var(--space-2_5); }


/* =============================================================================
   ICON SIZING
   Two framework-agnostic hooks resolve to the same size contract:
     • [data-lucide] — legacy; Lucide's UMD script swaps <i data-lucide="x">
                       for an inline <svg data-lucide="x"> at runtime.
     • .ds-icon      — class-based; consumed by @dwtc/react's <Icon />, which
                       renders an inline <svg class="ds-icon …"> directly so
                       React keeps ownership of the DOM (no UMD mutation).
   Size modifiers: `.icon-sm/lg/xl` (legacy) and `.ds-icon-sm/lg/xl` (React).
   ============================================================================= */

[data-lucide],
.ds-icon                       { width: var(--size-icon-md); height: var(--size-icon-md); stroke-width: 1.75; vertical-align: middle; }

.icon-sm [data-lucide], [data-lucide].icon-sm,
.ds-icon.ds-icon-sm            { width: var(--size-icon-sm); height: var(--size-icon-sm); }

.icon-lg [data-lucide], [data-lucide].icon-lg,
.ds-icon.ds-icon-lg            { width: var(--size-icon-lg); height: var(--size-icon-lg); }

.icon-xl [data-lucide], [data-lucide].icon-xl,
.ds-icon.ds-icon-xl            { width: 24px; height: 24px; }


/* =============================================================================
   RTL SUPPORT
   ============================================================================= */

[dir="rtl"] {
  /* Logical properties handle most cases automatically.
     Add specific overrides here for any non-logical fallbacks. */
}

[dir="rtl"] .select {
  background-position: left var(--input-padding-x, var(--space-4)) center;
}


/* =============================================================================
   PREMIUM GLOW HOVER EFFECTS
   Sourced from preview-portal.html and codified as design system tokens.
   Uses var(--shadow-glow-*) from tokens/shadows.css — theme-aware.
   All transitions: cubic-bezier(0.4, 0, 0.2, 1) 250ms for premium feel.
   ============================================================================= */

/* ── Shared transition easing ─────────────────────────────────────────────── */
.card,
.card-glass,
.file-card,
.timeline-entry,
.fab,
.btn,
.tag,
.badge,
.avatar,
.toggle-track,
.tab,
.pill-tab,
.navbar-link,
.accordion-header {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--duration-slow);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card {
  transition-property: box-shadow, border-color, background-color, transform;
}
.card:hover {
  box-shadow: var(--shadow-glow-card, var(--shadow-card-hover, var(--shadow-md)));
}

/* ── Glass card ───────────────────────────────────────────────────────────── */
.card-glass {
  transition-property: box-shadow, border-color;
}
.card-glass:hover {
  box-shadow: var(--shadow-glow-primary, var(--shadow-glow-card, var(--shadow-md)));
}

/* ── File card ────────────────────────────────────────────────────────────── */
.file-card {
  transition-property: box-shadow, border-color;
}
.file-card:hover {
  box-shadow: var(--shadow-glow-card, var(--shadow-card-hover, var(--shadow-md)));
}

/* ── Timeline entry ───────────────────────────────────────────────────────── */
.timeline-entry {
  transition: var(--timeline-transition);
  transition-property: box-shadow, border-inline-start-width;
}
.timeline-entry:hover {
  box-shadow: var(--timeline-card-shadow-hover);
  border-inline-start-width: var(--timeline-card-accent-width-hover);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  transition-property: background-color, border-color, color, box-shadow, transform;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-glow-primary);
}

.btn-ghost {
  transition-property: background-color, border-color, color, box-shadow;
}
.btn-ghost:hover:not(:disabled) {
  box-shadow: var(--shadow-glow-primary);
  border-color: var(--border-focus, var(--btn-ghost-border));
}

.btn-warning:hover:not(:disabled) {
  box-shadow: var(--shadow-btn-warning-glow);
}

.btn-danger:hover:not(:disabled) {
  box-shadow: var(--shadow-btn-danger-glow);
}

/* ── FAB ──────────────────────────────────────────────────────────────────── */
.fab {
  transition-property: background-color, transform, box-shadow;
}
.fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-glow-fab, var(--shadow-lg));
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */
.tag {
  transition-property: box-shadow, opacity;
}
.tag:hover {
  opacity: var(--link-hover-opacity);
}
.tag-blue:hover  { box-shadow: 0 0 0 2px var(--tag-blue-text); }
.tag-teal:hover  { box-shadow: 0 0 0 2px var(--tag-teal-text); }
.tag-gold:hover  { box-shadow: 0 0 0 2px var(--tag-gold-text); }
.tag-green:hover { box-shadow: var(--shadow-tag-green-ring); }
.tag-red:hover   { box-shadow: var(--shadow-tag-red-ring); }
.tag-amber:hover { box-shadow: var(--shadow-tag-amber-ring); }
.tag-gray:hover  { box-shadow: var(--shadow-tag-gray-ring); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  transition-property: box-shadow, opacity;
}
.badge-approved:hover    { box-shadow: var(--shadow-badge-approved-ring); }
.badge-nmi:hover         { box-shadow: var(--shadow-badge-nmi-ring); }
.badge-progress:hover    { box-shadow: var(--shadow-glow-teal); }
.badge-rejected:hover    { box-shadow: var(--shadow-badge-rejected-ring); }
.badge-draft:hover       { box-shadow: var(--shadow-badge-draft-ring); }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.avatar {
  transition-property: box-shadow, transform;
}
.avatar:hover {
  box-shadow: var(--shadow-glow-primary);
  transform: scale(1.05);
}

/* ── Toggle ───────────────────────────────────────────────────────────────── */
.toggle-track {
  transition-property: background-color, box-shadow;
}
.toggle:hover .toggle-track {
  box-shadow: var(--shadow-toggle-hover);
}
.toggle input:checked:hover ~ .toggle-track {
  box-shadow: var(--shadow-glow-primary);
}

/* ── Input focus glow ─────────────────────────────────────────────────────── */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  box-shadow: var(--focus-ring-subtle);
}

.input-error:focus-visible, .input-error.input:focus-visible {
  box-shadow: var(--focus-ring-error);
}

.input-success:focus-visible, .input-success.input:focus-visible {
  box-shadow: var(--focus-ring-success);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab:hover {
  color: var(--text-primary);
  background-color: var(--bg-inset);
}

.pill-tab:hover:not([aria-selected="true"]):not(.active) {
  color: var(--text-primary);
  background-color: var(--bg-card);
}

/* ── Navbar links ─────────────────────────────────────────────────────────── */
.navbar-link {
  transition-property: color, text-shadow;
}
.navbar-link:hover {
  color: var(--text-primary);
  text-shadow: var(--shadow-navbar-link-hover);
}

/* ── Accordion header ─────────────────────────────────────────────────────── */
.accordion-header {
  transition-property: background-color, box-shadow;
}
.accordion-header:hover {
  background-color: var(--bg-inset);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.page-btn:hover {
  background-color: var(--bg-inset);
  color: var(--text-primary);
  box-shadow: var(--shadow-glow-primary);
}

/* ── Data table row ───────────────────────────────────────────────────────── */
.data-table tbody tr {
  transition: background-color var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reduced motion overrides ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .card-glass:hover,
  .file-card:hover,
  .avatar:hover {
    transform: none !important;
  }
  .timeline-dot,
  .timeline-dot-latest {
    animation: none !important;
  }
  .timeline-entry.tl-animate-left,
  .timeline-entry.tl-animate-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* =============================================================================
   NAVBAR
   ============================================================================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--navbar-height);
  background-color: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: 0;
}

/* Brand / logo area */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
  margin-inline-end: var(--spacing-navbar-brand-end);
}
/* A divider supplies its own spacing — don't double it up. */
.navbar-brand:has(+ .navbar-divider) { margin-inline-end: 0; }
.navbar-brand-logo {
  height: var(--size-navbar-brand-logo);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-brand-name {
  font-family: var(--font-display, 'Barlow', sans-serif);
  font-size: var(--text-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* Vertical thin divider */
.navbar-divider {
  width: 1px;
  height: var(--size-navbar-divider-h);
  background-color: var(--navbar-divider-color);
  flex-shrink: 0;
  margin: 0 var(--space-4);
}

/* Horizontal nav link list */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-0_5);
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-3);
  height: var(--size-navbar-link-h);
  font-family: var(--font-sans, 'Barlow', sans-serif);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--navbar-link-color);
  text-decoration: none;
  border-radius: var(--radius-lg);
  position: relative;
  transition: var(--navbar-transition);
  white-space: nowrap;
}
.navbar-link:hover {
  background-color: var(--navbar-link-hover-bg);
  color: var(--text-primary);
}
/* Bento: active state is a soft inset pill — no underline bar. */
.navbar-link.active {
  color: var(--text-primary);
  background-color: var(--bg-inset);
}

/* Right-side user area */
.navbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  flex-shrink: 0;
}
.navbar-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.navbar-user-name {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}
.navbar-user-email {
  font-size: var(--text-size-badge);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.navbar-user-avatar {
  width: var(--size-avatar-md);
  height: var(--size-avatar-md);
  border-radius: 50%;
  background-color: var(--navbar-avatar-bg);
  color: var(--text-inverse, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  border: 1.5px solid var(--navbar-border);
}

/* Right-side actions slot */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-navbar-actions-gap);
  margin-inline-start: var(--spacing-navbar-section-gap);
  flex-shrink: 0;
}

/* Hamburger toggle (mobile) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-0_5);
  width: var(--size-navbar-toggle);
  height: var(--size-navbar-toggle);
  padding: var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-xs, 6px);
  transition: var(--navbar-transition);
  color: var(--navbar-link-color);
}
.navbar-toggle:hover {
  background-color: var(--navbar-link-hover-bg);
}
.navbar-toggle-bar {
  display: block;
  width: var(--size-icon-lg);
  height: var(--space-0_5);
  background-color: currentColor;
  border-radius: var(--space-px);
  transition: var(--navbar-transition);
}

/* Collapsible mobile menu */
.navbar-collapse {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

/* Mobile breakpoint */
@media (max-width: 639px) {
  .navbar-toggle {
    display: flex;
  }
  .navbar-collapse {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    gap: var(--space-0_5);
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 899;
  }
  .navbar-collapse.open {
    display: flex;
  }
  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .navbar-link {
    width: 100%;
    justify-content: flex-start;
  }
  .navbar-link.active::after {
    bottom: auto;
    top: 0;
    left: -1px;
    right: auto;
    width: var(--space-0_5);
    height: auto;
    top: var(--space-1);
    bottom: var(--space-1);
    border-radius: 0 var(--space-0_5) var(--space-0_5) 0;
  }
  .navbar-divider {
    display: none;
  }
  .navbar-user-info {
    display: none;
  }
}

/* Tablet navbar adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
  .navbar {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }

  .navbar-user-info {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── Mobile-First Responsive: Forms & Buttons ─────────────────────────────
   Base = mobile (375px+), enhance at sm (640px+)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  /* Buttons: full-width on mobile */
  .btn {
    min-height: var(--size-touch-min); /* 44px touch target */
  }

  .btn-full-mobile {
    width: 100%;
    justify-content: center;
  }

  /* Button groups stack vertically on mobile */
  .btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
  }

  .btn-group-responsive .btn {
    width: 100%;
  }

  /* Inputs: enforce touch target height */
  .input,
  .select,
  .textarea {
    min-height: var(--size-touch-min); /* 44px */
  }

  /* Form grids: stack on mobile */
  .tpl-form-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   PASSWORD INPUT
   ============================================================================= */

.input-password-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.input-password {
  /* Inherits from .input — add right padding for toggle */
  padding-right: calc(var(--input-padding-x, var(--space-4)) + var(--validation-icon-size, 18px) + var(--space-2_5));
  width: 100%;
  height: var(--input-height, var(--size-touch-min));
  padding-left: var(--input-padding-x, var(--space-4));
  background-color: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 10px);
  color: var(--input-text);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-size-subtitle);
  font-weight: var(--input-text-weight, 450);
  transition: var(--input-transition);
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.input-password::placeholder {
  color: var(--input-placeholder);
  font-style: var(--input-placeholder-style, italic);
}
.input-password:hover {
  border-color: var(--input-border-hover);
}
.input-password:focus-visible {
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus);
  box-shadow: var(--focus-ring-subtle);
}

/* Eye toggle button */
.password-toggle {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: var(--validation-icon-size, 18px);
  height: var(--validation-icon-size, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--password-toggle-color);
  transition: color var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-xs);
  line-height: 0;
}
.password-toggle:hover {
  color: var(--password-toggle-hover);
}
.password-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.password-toggle svg {
  width: var(--validation-icon-size, 18px);
  height: var(--validation-icon-size, 18px);
  stroke-width: 1.75;
}

/* Strength meter track */
.password-strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.password-strength-track {
  height: var(--password-strength-height, 4px);
  border-radius: var(--password-strength-radius, 2px);
  background-color: var(--password-strength-bg);
  overflow: hidden;
}
.password-strength-bar {
  height: 100%;
  width: 0%;
  border-radius: var(--password-strength-radius, 2px);
  background-color: var(--password-strength-bg);
  transition: var(--password-transition);
}

/* Strength levels */
.strength-weak   .password-strength-bar { width: 25%; background-color: var(--password-strength-weak); }
.strength-fair   .password-strength-bar { width: 50%; background-color: var(--password-strength-fair); }
.strength-good   .password-strength-bar { width: 75%; background-color: var(--password-strength-good); }
.strength-strong .password-strength-bar { width: 100%; background-color: var(--password-strength-strong); }

.password-strength-text {
  font-size: var(--helper-size, var(--text-size-caption));
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.strength-weak   .password-strength-text { color: var(--password-strength-weak); }
.strength-fair   .password-strength-text { color: var(--password-strength-fair); }
.strength-good   .password-strength-text { color: var(--password-strength-good); }
.strength-strong .password-strength-text { color: var(--password-strength-strong); }

/* Requirements checklist */
.password-requirements {
  list-style: none;
  margin: var(--space-2_5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
}
.requirement {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--helper-size, var(--text-size-caption));
  color: var(--password-requirement-unmet);
  transition: color var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.requirement::before {
  content: '';
  display: block;
  width: var(--space-3_5);
  height: var(--space-3_5);
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid currentColor;
  transition: background-color var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1), border-color var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.requirement.met {
  color: var(--password-requirement-met);
}
.requirement.met::before {
  background-color: var(--password-requirement-met);
  border-color: var(--password-requirement-met);
  /* Checkmark via background-image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}


/* =============================================================================
   COMBO — searchable dropdown (single / multi, chips, leading icon)
   -----------------------------------------------------------------------------
   The canonical searchable dropdown primitive. Required for country pickers,
   large option lists, tag multi-select, typeahead filters — anywhere a native
   `.select` cannot reasonably be scrolled.

   Class contract (consumed verbatim from template.html):
     .combo                          — root wrapper (position:relative)
     .combo-sm                       — compact modifier (matches .input-sm)
     .combo-multi                    — multi-select mode (chips + checkbox cells)
     .combo-trigger                  — button that opens the panel
       .combo-value                    — single-value flex slot
         .combo-value-icon             — leading flag/avatar/swatch slot
         .combo-value-label            — selected label (italic when .is-placeholder)
       .combo-chips                    — multi-value chips slot (replaces .combo-value)
         .combo-chip                     — one selected chip
           .combo-chip-remove            — × button inside the chip
       .combo-chevron                  — chevron svg (rotates when aria-expanded=true)
     .combo-panel                    — floating panel (toggle with .is-open)
       .combo-search-wrap              — search row (icon + input, divider underneath)
         .combo-search-icon              — leading svg
         .combo-search                   — text input
       .combo-list                     — scrollable option list
         .combo-group-label              — optional section heading
         .combo-divider                  — optional horizontal rule
         .combo-option                   — single option row (.is-selected / .is-active)
           .combo-option-box               — checkbox cell (.combo-multi only)
             .combo-option-box-check         — check svg inside the box
           .combo-option-icon              — leading icon slot
           .combo-option-label             — main text
           .combo-option-meta              — trailing meta (dial code, shortcut, count)
           .combo-option-check             — trailing check svg (.is-selected only)
         .combo-empty                    — "no results" row
   ============================================================================= */

.combo {
  position: relative;
  display: block;
  width: 100%;
}

/* ── Trigger (mirrors .select chrome so it visually belongs to the input
      family). It is a <button>, not a <select>, so it can house chips, icons,
      and a chevron that rotates on open. ─────────────────────────────────── */
.combo-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--input-height, 40px);
  padding: var(--input-padding-y, var(--space-2)) var(--input-padding-x, var(--space-3));
  font-family: var(--font-sans);
  font-size: var(--text-size-subtitle);
  font-weight: var(--input-text-weight, 450);
  line-height: 1.5;
  color: var(--input-text, var(--text-primary));
  background-color: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 8px);
  box-shadow: var(--shadow-input);
  cursor: pointer;
  text-align: start;
  transition: var(--input-transition, all var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1));
  appearance: none;
  -webkit-appearance: none;
}
.combo-trigger:hover:not(:disabled):not(:focus-visible) {
  border-color: var(--input-border-hover);
}
.combo-trigger:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus, var(--input-bg));
  box-shadow: var(--focus-ring-subtle);
}
.combo-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-inset);
}

/* Compact modifier — toolbars, table filters, dense forms. */
.combo-sm .combo-trigger {
  padding: var(--space-1_5) var(--space-3);
  font-size: var(--text-size-body-sm);
  min-height: var(--input-height-sm, 2.25rem);
}

/* ── Value slot (single-select) ──────────────────────────────────────────── */
.combo-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  min-width: 0;
}
.combo-value-icon {
  flex-shrink: 0;
  font-size: var(--text-size-h2);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.combo-value-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combo-value-label.is-placeholder {
  color: var(--input-placeholder, var(--text-placeholder));
  font-style: italic;
  font-weight: var(--font-weight-regular);
}

/* ── Chips (multi-select trigger) ────────────────────────────────────────── */
.combo-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.combo-chips:empty::before {
  content: attr(data-placeholder);
  color: var(--input-placeholder, var(--text-placeholder));
  font-style: italic;
  font-weight: var(--font-weight-regular);
}
.combo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0_5) var(--space-1_5);
  background-color: var(--bg-inset);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  max-width: 100%;
}
.combo-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combo-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.combo-chip-remove:hover {
  background-color: var(--navbar-link-hover-bg);
  color: var(--text-primary);
}
.combo-chip-remove svg {
  width: var(--space-3);
  height: var(--space-3);
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.combo-chevron {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.combo-trigger[aria-expanded="true"] .combo-chevron {
  transform: rotate(180deg);
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.combo-panel {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + var(--space-1_5));
  width: 100%;
  min-width: var(--combo-panel-min-width, 16rem);
  max-height: var(--combo-panel-max-height, 17.5rem);
  background-color: var(--bg-elevated);
  /* `--bg-elevated` is translucent rgba in dark / oled so the panel picks up
     the page tint. backdrop-filter blurs the content behind the panel to
     keep long option lists readable regardless of what sits underneath. */
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: var(--input-border-width, 1px) solid var(--border-default);
  border-radius: var(--input-radius, 8px);
  box-shadow: var(--combo-panel-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 200;
  opacity: 0;
  transform: translateY(var(--space-1_5)) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.combo-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Align-end variant: opens flush with the trigger's trailing edge. Useful
   when the trigger is near the viewport's inline-end and the default start
   anchor would clip off-screen. */
.combo-panel.combo-panel-end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* ── Search row ──────────────────────────────────────────────────────────── */
.combo-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border-bottom: var(--input-border-width, 1px) solid var(--border-subtle);
  flex-shrink: 0;
  transition: border-color var(--duration-fast) ease;
}
.combo-search-wrap:focus-within {
  border-bottom-color: var(--input-border-focus);
}
.combo-search-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.combo-search {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--input-text, var(--text-primary));
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--input-text-weight, 450);
  outline: none;
  padding: var(--space-2_5) 0;
  min-height: var(--input-height-sm, 2.25rem);
  width: 100%;
  box-sizing: border-box;
}
.combo-search::placeholder {
  color: var(--input-placeholder, var(--text-placeholder));
  font-style: italic;
  font-weight: var(--font-weight-regular);
}

/* ── List ────────────────────────────────────────────────────────────────── */
.combo-list {
  overflow-y: auto;
  flex: 1;
  padding-block: var(--space-1_5);
  scrollbar-width: thin;
}
.combo-list::-webkit-scrollbar {
  width: var(--space-1_5);
}
.combo-list::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: var(--radius-sm);
}

/* ── Group label + divider ───────────────────────────────────────────────── */
.combo-group-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}
.combo-divider {
  height: var(--input-border-width, 1px);
  background-color: var(--border-subtle);
  margin-block: var(--space-1_5);
  border: 0;
}

/* ── Option ──────────────────────────────────────────────────────────────── */
.combo-option {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
  user-select: none;
}
.combo-option:hover,
.combo-option.is-active {
  background-color: var(--navbar-link-hover-bg);
  color: var(--text-primary);
}
.combo-option.is-selected {
  color: var(--color-primary);
  background-color: var(--navbar-link-hover-bg);
  font-weight: var(--font-weight-medium);
}
.combo-option[aria-disabled="true"],
.combo-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.combo-option-icon {
  font-size: var(--text-size-h2);
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.combo-option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combo-option-meta {
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  font-size: var(--text-size-caption);
  flex-shrink: 0;
}
.combo-option-check {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--color-primary);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}
.combo-option.is-selected .combo-option-check {
  opacity: 1;
}

/* ── Multi-select checkbox cell (leading) ────────────────────────────────── */
.combo-option-box {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--radius-xs, 4px);
  background-color: var(--input-bg);
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.combo-option-box-check {
  width: 100%;
  height: 100%;
  color: var(--btn-primary-text);
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}
.combo-option.is-selected .combo-option-box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.combo-option.is-selected .combo-option-box-check {
  opacity: 1;
}
/* In multi-select mode the trailing check is hidden — selection is conveyed
   by the leading checkbox cell, so the panel stays open across picks. */
.combo-multi .combo-option .combo-option-check {
  display: none;
}
.combo-multi .combo-option.is-selected {
  /* Multi-select rows don't change background on selection — too noisy once
     several rows are picked. Colour shift on the checkbox cell carries it. */
  background-color: transparent;
  color: var(--text-primary);
  font-weight: var(--font-weight-regular);
}
.combo-multi .combo-option:hover,
.combo-multi .combo-option.is-active {
  background-color: var(--navbar-link-hover-bg);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.combo-empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-size-body-sm);
  font-style: italic;
}


/* =============================================================================
   PHONE INPUT WITH COUNTRY CODE
   ============================================================================= */

.input-phone-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--input-height, var(--size-touch-min));
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 10px);
  background-color: var(--input-bg);
  overflow: hidden;
  transition: var(--input-transition);
  position: relative;
  box-sizing: border-box;
}
.input-phone-wrap:hover {
  border-color: var(--input-border-hover);
}
.input-phone-wrap:focus-within {
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* Country code selector button */
.phone-country {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  width: var(--phone-country-width, 100px);
  min-width: var(--phone-country-width, 100px);
  padding: 0 var(--space-2_5) 0 var(--space-3);
  background-color: var(--phone-country-bg);
  border: none;
  border-right: 1px solid var(--phone-country-border);
  color: var(--input-text);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-size-subtitle);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  outline: none;
  white-space: nowrap;
}
.phone-country:hover {
  background-color: var(--phone-country-hover);
}
.phone-country-flag {
  font-size: var(--text-size-h2);
  line-height: 1;
  flex-shrink: 0;
}
.phone-country-code {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--input-text);
  flex: 1;
  text-align: start;
}
.phone-country-chevron {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.phone-country[aria-expanded="true"] .phone-country-chevron {
  transform: rotate(180deg);
}

/* Country picker panel & options are provided by the shared `.combo-*`
   primitive above — see the COMBO section. The `.phone-country` trigger
   stays phone-specific because it is fused into `.input-phone-wrap` rather
   than being a standalone `.combo-trigger`. */

/* Number input */
.input-phone {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--input-text);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-size-subtitle);
  font-weight: var(--input-text-weight, 450);
  padding: 0 var(--input-padding-x, var(--space-4));
  outline: none;
  width: 0; /* flex item — grows */
  min-width: 0;
}
.input-phone::placeholder {
  color: var(--input-placeholder);
  font-style: var(--input-placeholder-style, italic);
}


/* =============================================================================
   VALIDATION STATES (enhanced)
   ============================================================================= */

/* Keyframes */
@keyframes validation-icon-in {
  0%   { transform: translateY(-50%) scale(0);        opacity: 0; }
  65%  { transform: translateY(-50%) scale(1.15);     opacity: 1; }
  100% { transform: translateY(-50%) scale(1);        opacity: 1; }
}
@keyframes validation-slide-down {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 80px; }
}
@keyframes validation-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes validation-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Wrapper */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--label-gap, var(--space-2));
  position: relative;
}

/* Label inside group */
.input-group .form-label {
  margin-bottom: 0;
}

/* Input with validation icon container */
.input-validated-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Shared icon styles */
.input-validated-wrap .validation-icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: var(--validation-icon-size, 18px);
  height: var(--validation-icon-size, 18px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-validated-wrap .validation-icon svg {
  width: var(--validation-icon-size, 18px);
  height: var(--validation-icon-size, 18px);
  stroke-width: 2;
}

/* .input-valid — green */
.input-valid {
  border-color: var(--input-success-border) !important;
  background-color: var(--input-bg-success) !important;
  padding-right: calc(var(--input-padding-x, var(--space-4)) + var(--validation-icon-size, 18px) + var(--space-2_5));
}
.input-valid:focus-visible {
  box-shadow: var(--focus-ring-success) !important;
}
.input-valid ~ .validation-icon-success {
  color: var(--validation-success-color);
  animation: validation-icon-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* .input-invalid — red */
.input-invalid {
  border-color: var(--input-error-border) !important;
  background-color: var(--input-bg-error) !important;
  padding-right: calc(var(--input-padding-x, var(--space-4)) + var(--validation-icon-size, 18px) + var(--space-2_5));
  animation: validation-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.input-invalid:focus-visible {
  box-shadow: var(--focus-ring-error) !important;
}
.input-invalid ~ .validation-icon-error {
  color: var(--validation-error-color);
  animation: validation-icon-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* .input-validating — spinner */
.input-validating {
  padding-right: calc(var(--input-padding-x, var(--space-4)) + var(--validation-icon-size, 18px) + var(--space-2_5));
}
.input-validating ~ .validation-icon-loading {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: var(--text-tertiary);
  animation: validation-spin 0.7s linear infinite;
  transform-origin: center center;
}

/* Validation status LED dot on border — positioned via pseudo */
.input-valid::before,
.input-invalid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  width: var(--validation-dot-size, 6px);
  height: var(--validation-dot-size, 6px);
  border-radius: 50%;
}
.input-valid::before  { background-color: var(--validation-success-color); }
.input-invalid::before { background-color: var(--validation-error-color); }

/* Validation messages */
.validation-message {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--validation-message-size, var(--text-size-caption));
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  animation: validation-slide-down var(--validation-slide-duration, 0.2s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.validation-message::before {
  content: '';
  display: block;
  width: var(--validation-dot-size, 6px);
  height: var(--validation-dot-size, 6px);
  border-radius: 50%;
  flex-shrink: 0;
}

.validation-success {
  color: var(--validation-success-color);
}
.validation-success::before {
  background-color: var(--validation-success-color);
}

.validation-error {
  color: var(--validation-error-color);
}
.validation-error::before {
  background-color: var(--validation-error-color);
}

.validation-warning {
  color: var(--validation-warning-color);
}
.validation-warning::before {
  background-color: var(--validation-warning-color);
}


/* =============================================================================
   § 20  OTP INPUT
   .otp-input-group — premium 6-digit code entry
   ============================================================================= */

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  10%       { transform: translateX(-7px); }
  25%       { transform: translateX(7px); }
  40%       { transform: translateX(-5px); }
  55%       { transform: translateX(5px); }
  70%       { transform: translateX(-3px); }
  85%       { transform: translateX(3px); }
}

@keyframes otp-success-flash {
  0%   { border-color: var(--otp-digit-border); box-shadow: var(--otp-digit-inner-shadow); }
  30%  { border-color: var(--otp-digit-success-border); box-shadow: var(--otp-digit-focus-ring), var(--otp-digit-inner-shadow); }
  70%  { border-color: var(--otp-digit-success-border); box-shadow: var(--otp-digit-focus-ring), var(--otp-digit-inner-shadow); }
  100% { border-color: var(--otp-digit-success-border); box-shadow: var(--otp-digit-focus-ring), var(--otp-digit-inner-shadow); }
}

@keyframes otp-digit-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes otp-success-checkmark {
  0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
  50%  { opacity: 1; transform: scale(1.15) rotate(3deg); }
  75%  { transform: scale(0.93) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Group container ────────────────────────────────────────────────────────── */
.otp-input-group {
  display: flex;
  align-items: center;
  gap: var(--otp-digit-gap, 16px);
  justify-content: center;
  position: relative;
  flex-wrap: nowrap;
}

/* Compact variant for state demos / small containers */
.otp-input-group.otp-compact {
  gap: var(--otp-digit-gap-compact);
}
.otp-compact .otp-digit {
  width: var(--otp-digit-size-compact);
  height: var(--otp-digit-height-compact);
  font-size: var(--otp-digit-font-size-compact);
  border-radius: var(--otp-digit-radius-compact);
}
.otp-compact .otp-separator {
  width: var(--otp-separator-size-compact);
  height: var(--otp-separator-size-compact);
}

/* Success checkmark overlay — JS adds .success class on group */
.otp-input-group.success::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--otp-digit-radius, 10px) + 8px);
  pointer-events: none;
  animation: none;
}

/* ── Separator (after 3rd digit) — rendered as a dot ───────────────────────── */
.otp-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--otp-separator-size, 6px);
  height: var(--otp-digit-height, 64px);
  flex-shrink: 0;
}
.otp-separator::before {
  content: '';
  width: var(--otp-separator-size, 6px);
  height: var(--otp-separator-size, 6px);
  border-radius: 50%;
  background-color: var(--otp-separator-color, var(--text-tertiary));
  opacity: 0.45;
}

/* ── Individual digit input ─────────────────────────────────────────────────── */
.otp-digit {
  width: var(--otp-digit-size, 56px);
  height: var(--otp-digit-height, 64px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--otp-digit-font-size, 28px);
  font-weight: var(--otp-digit-font-weight, 700);
  line-height: 1;
  color: var(--input-text);
  background-color: var(--otp-digit-bg);
  border: var(--input-border-width, 1px) solid var(--otp-digit-border);
  border-radius: var(--otp-digit-radius, 10px);
  outline: none;
  caret-color: transparent;
  box-shadow: var(--otp-digit-inner-shadow);
  transition: var(--otp-transition);
  appearance: none;
  -moz-appearance: textfield;
  cursor: text;
}

.otp-digit::-webkit-inner-spin-button,
.otp-digit::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Focus state */
.otp-digit:focus-visible {
  /* Uses --otp-digit-focus-ring (a specialised --focus-ring variant with glow). */
  border-color: var(--otp-digit-focus-border);
  box-shadow: var(--otp-digit-focus-ring), var(--otp-digit-focus-shadow), var(--otp-digit-inner-shadow);
  background-color: var(--input-bg-focus, var(--otp-digit-bg));
  transform: scale(var(--otp-digit-focus-scale, 1.05)) translateY(-1px);
  border-width: 2px;
}

/* Filled state */
.otp-digit.filled {
  background-color: var(--otp-digit-filled-bg);
  border-color: var(--otp-digit-filled-border);
  color: var(--otp-digit-filled-color, var(--text-primary));
  font-weight: var(--otp-digit-filled-weight, 800);
  box-shadow: var(--otp-digit-inner-shadow);
}

/* Filled + focus simultaneously */
.otp-digit.filled:focus-visible {
  /* Uses --otp-digit-focus-ring (a specialised --focus-ring variant with glow). */
  box-shadow: var(--otp-digit-focus-ring), var(--otp-digit-focus-shadow), var(--otp-digit-inner-shadow);
}

/* Pop animation when a digit is entered */
.otp-digit.digit-pop {
  animation: otp-digit-pop 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Error state — applied on group, not individual digits */
.otp-input-group.error .otp-digit {
  border-color: var(--otp-digit-error-border);
  border-width: 2px;
  background-color: var(--otp-digit-error-bg, var(--otp-digit-bg));
  box-shadow: 0 0 0 3px var(--otp-digit-error-ring), var(--otp-digit-inner-shadow);
  color: var(--input-error-text, var(--otp-digit-error-border));
  animation: otp-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Success state — applied on group */
.otp-input-group.success .otp-digit {
  border-color: var(--otp-digit-success-border);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--otp-digit-success-ring), var(--otp-digit-inner-shadow);
  color: var(--input-success-text, var(--otp-digit-success-border));
}

/* Staggered success flash — JS adds .success-flash class per digit */
.otp-digit.success-flash {
  animation: otp-success-flash 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Disabled state */
.otp-digit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Timer ──────────────────────────────────────────────────────────────────── */
.otp-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--otp-timer-font-size, var(--text-size-body));
}

.otp-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--otp-timer-color, var(--text-tertiary));
  font-size: var(--otp-timer-font-size, var(--text-size-body));
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-sm);
}

.otp-timer-icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  opacity: 0.8;
  flex-shrink: 0;
}

/* ── Resend link ────────────────────────────────────────────────────────────── */
.otp-resend {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--otp-timer-font-size, var(--text-size-body));
  font-weight: var(--font-weight-semibold);
  color: var(--otp-resend-color, var(--color-primary));
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.otp-resend:hover:not(:disabled) {
  opacity: 0.75;
}

.otp-resend:disabled,
.otp-resend.disabled {
  color: var(--otp-resend-disabled-color, var(--text-placeholder));
  cursor: not-allowed;
  pointer-events: none;
}

.otp-separator-dot {
  width: var(--otp-separator-size, 6px);
  height: var(--otp-separator-size, 6px);
  border-radius: 50%;
  background-color: var(--otp-separator-color, var(--text-tertiary));
  opacity: 0.4;
  flex-shrink: 0;
}


/* =============================================================================
   § 21  VERIFICATION CARDS
   .verify-card — selectable method card
   ============================================================================= */

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes verify-check-in {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes verify-card-select {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes verify-sent-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── Step containers ────────────────────────────────────────────────────────── */
.verify-step {
  display: none;
}

.verify-step.active {
  display: block;
  animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Cards grid ─────────────────────────────────────────────────────────────── */
.verify-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Single card ────────────────────────────────────────────────────────────── */
.verify-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--verify-card-padding, var(--space-5));
  background-color: var(--bg-card);
  border: var(--input-border-width, 1px) solid var(--verify-card-border);
  border-radius: var(--verify-card-radius, 12px);
  cursor: pointer;
  transition: var(--verify-transition);
  position: relative;
  user-select: none;
  outline: none;
}

.verify-card:hover:not(.verified) {
  border-color: var(--border-strong);
  box-shadow: var(--verify-card-hover-shadow);
}

.verify-card:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Selected state */
.verify-card.selected {
  border-color: var(--verify-card-selected-border);
  background-color: var(--verify-card-selected-bg);
  animation: verify-card-select 0.2s ease forwards;
}

/* Verified state */
.verify-card.verified {
  border-color: var(--verify-card-verified-border);
  background-color: var(--verify-card-verified-bg);
  cursor: default;
}

/* Sent state */
.verify-card.sent .verify-card-status {
  display: flex;
}

/* ── Icon area ──────────────────────────────────────────────────────────────── */
.verify-icon-wrap {
  width: var(--verify-icon-size, 44px);
  height: var(--verify-icon-size, 44px);
  border-radius: var(--verify-icon-radius, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--verify-transition);
}

.verify-whatsapp .verify-icon-wrap {
  background-color: var(--verify-whatsapp-bg);
  color: var(--verify-whatsapp-color);
}

.verify-sms .verify-icon-wrap {
  background-color: var(--verify-sms-bg);
  color: var(--verify-sms-color);
}

.verify-email .verify-icon-wrap {
  background-color: var(--verify-email-bg);
  color: var(--verify-email-color);
}

/* ── Content area ───────────────────────────────────────────────────────────── */
.verify-card-content {
  flex: 1;
  min-width: 0;
}

.verify-card-title {
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
}

.verify-card-subtitle {
  font-size: var(--text-size-caption);
  color: var(--text-body);
  margin-top: 2px;
  line-height: 1.4;
}

.verify-card-contact {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-top: var(--space-1_5);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-sm);
}

/* ── Right side indicators ──────────────────────────────────────────────────── */
.verify-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Radio indicator */
.verify-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background-color: transparent;
  transition: var(--verify-transition);
  position: relative;
  flex-shrink: 0;
}

.verify-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: var(--verify-card-selected-border);
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.verify-card.selected .verify-radio {
  border-color: var(--verify-card-selected-border);
}

.verify-card.selected .verify-radio::after {
  transform: scale(1);
}

/* Verified check icon */
.verify-check-icon {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--verify-card-verified-border);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verify-card.verified .verify-radio { display: none; }
.verify-card.verified .verify-check-icon {
  display: flex;
  animation: verify-check-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Verified label */
.verify-verified-label {
  display: none;
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--verify-card-verified-border);
}

.verify-card.verified .verify-verified-label {
  display: block;
}

/* Sent status */
.verify-card-status {
  display: none;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.verify-card-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--otp-digit-success-border, #2E7D32);
  animation: verify-sent-pulse 2s ease infinite;
}

/* Send button inside card */
.verify-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1_5) var(--space-3_5);
  font-family: var(--font-sans);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-subtle);
  border: var(--input-border-width, 1px) solid var(--border-strong);
  background-color: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--verify-transition);
  white-space: nowrap;
}

.verify-card.selected .verify-card-btn {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.verify-card-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.verify-card.verified .verify-card-btn {
  display: none;
}

/* ── Success step ───────────────────────────────────────────────────────────── */
.verify-success-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.verify-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--verify-card-verified-bg);
  border: 2px solid var(--verify-card-verified-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verify-card-verified-border);
  animation: verify-check-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.verify-success-title {
  font-size: var(--text-size-topbar);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.verify-success-subtitle {
  font-size: var(--text-size-body);
  color: var(--text-body);
  max-width: 280px;
  line-height: 1.5;
}
/* =============================================================================
   DATA GRID — Premium table component with filters, sorting, pagination
   All values via CSS custom properties. Zero hardcoding.
   ============================================================================= */

/* ── Keyframes ─────────────────────────────────────────────────────────────── */
@keyframes grid-skeleton-pulse {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes grid-bulk-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes grid-filter-panel-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Container ─────────────────────────────────────────────────────────────── */
.data-grid {
  width: 100%;
  background: var(--grid-container-bg);
  border: 1px solid var(--grid-container-border);
  border-radius: var(--grid-container-radius);
  box-shadow: var(--grid-container-shadow);
  overflow: hidden;
  position: relative;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.grid-toolbar {
  display: flex;
  align-items: center;
  gap: var(--grid-toolbar-gap);
  padding: var(--grid-toolbar-padding);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--grid-row-border);
}

.grid-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--grid-toolbar-gap);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.grid-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Search ────────────────────────────────────────────────────────────────── */
.grid-search {
  position: relative;
  display: flex;
  align-items: center;
}

.grid-search-input {
  height: 36px;
  min-width: 220px;
  padding: 0 var(--space-3_5) 0 38px;
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  color: var(--text-primary);
  background: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--search-radius, 22px);
  transition: var(--grid-transition);
  outline: none;
}

.grid-search-input::placeholder {
  color: var(--text-placeholder);
  font-style: italic;
}

.grid-search-input:hover {
  border-color: var(--input-border-hover);
}

.grid-search-input:focus-visible {
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring-subtle);
  background: var(--input-bg-focus);
}

.grid-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  display: flex;
  transition: var(--grid-transition);
}

.grid-search:focus-within .grid-search-icon {
  color: var(--color-primary);
}

/* ── Filter Chips ──────────────────────────────────────────────────────────── */
.grid-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  flex-wrap: wrap;
}

.grid-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2_5);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--grid-filter-chip-text);
  background: var(--grid-filter-chip-bg);
  border-radius: var(--grid-filter-chip-radius);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: var(--grid-transition);
}

.grid-filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--grid-filter-chip-text);
  opacity: 0.7;
  border-radius: 50%;
  padding: 0;
  transition: var(--grid-transition);
  flex-shrink: 0;
}

.grid-filter-chip-remove:hover {
  opacity: 1;
  background: currentColor;
  color: var(--grid-filter-panel-bg);
}

/* ── Filter Button ─────────────────────────────────────────────────────────── */
.grid-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  height: 36px;
  padding: 0 var(--space-3_5);
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--radius-xs, 8px);
  cursor: pointer;
  transition: var(--grid-transition);
  white-space: nowrap;
}

.grid-filter-btn:hover {
  border-color: var(--input-border-hover);
  color: var(--text-primary);
}

.grid-filter-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--grid-row-selected-bg);
}

/* ── Grid Count ────────────────────────────────────────────────────────────── */
.grid-count {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ── Filter Panel ──────────────────────────────────────────────────────────── */
.grid-filter-panel {
  display: none;
  padding: var(--space-5) var(--space-6);
  background: var(--grid-filter-panel-bg);
  border-bottom: 1px solid var(--grid-row-border);
  animation: grid-filter-panel-open 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-filter-panel.open {
  display: block;
}

.grid-filter-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.grid-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}

.grid-filter-label {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--grid-header-text);
}

.grid-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--grid-row-border);
}

/* ── Table Wrapper ─────────────────────────────────────────────────────────── */
.grid-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 600px;
  -webkit-overflow-scrolling: touch;
}

.grid-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.grid-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--grid-header-bg);
}

.grid-th {
  padding: var(--grid-header-padding);
  font-size: var(--grid-header-font-size);
  font-weight: var(--grid-header-font-weight);
  letter-spacing: var(--grid-header-letter-spacing);
  text-transform: uppercase;
  color: var(--grid-header-text);
  text-align: start;
  white-space: nowrap;
  position: relative;
  user-select: none;
  border-bottom: 1px solid var(--grid-row-border);
  transition: var(--grid-transition);
}

.grid-th.sorted {
  background: var(--grid-header-sorted-bg);
}

.grid-th-inner {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

/* ── Sort Control ──────────────────────────────────────────────────────────── */
.grid-th[data-sortable] {
  cursor: pointer;
}

.grid-th[data-sortable]:hover {
  color: var(--text-primary);
}

.grid-sort {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-px);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--grid-sort-color);
  transition: var(--grid-transition);
}

.grid-th[data-sortable]:hover .grid-sort {
  color: var(--text-tertiary);
}

.grid-sort svg {
  display: block;
  flex-shrink: 0;
}

.grid-sort.asc {
  color: var(--grid-sort-active-color);
}

.grid-sort.desc {
  color: var(--grid-sort-active-color);
}

/* ── Resize Handle ─────────────────────────────────────────────────────────── */
.grid-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
  z-index: 1;
}

.grid-resize-handle::after {
  content: '';
  position: absolute;
  right: 1px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--grid-resize-handle-color);
  transition: var(--grid-transition);
}

.grid-resize-handle:hover::after,
.grid-resize-handle.resizing::after {
  background: var(--grid-resize-handle-active);
  width: 2px;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.grid-body .grid-row {
  border-bottom: 1px solid var(--grid-row-border);
  transition: background var(--grid-transition);
}

.grid-body .grid-row:hover {
  background: var(--grid-row-hover-bg);
}

.grid-body .grid-row.selected {
  background: var(--grid-row-selected-bg);
}

.grid-body .grid-row:last-child {
  border-bottom: none;
}

/* Alternating rows */
.grid-body .grid-row:nth-child(even) {
  background: var(--grid-row-alt-bg);
}

.grid-body .grid-row:nth-child(even):hover {
  background: var(--grid-row-hover-bg);
}

.grid-body .grid-row.selected:nth-child(even) {
  background: var(--grid-row-selected-bg);
}

/* ── Cell ──────────────────────────────────────────────────────────────────── */
.grid-td {
  padding: var(--grid-row-padding);
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}

/* ── Cell Types ────────────────────────────────────────────────────────────── */
.grid-cell-text {
  color: var(--text-secondary);
  font-size: var(--text-size-body-sm);
}

.grid-cell-avatar {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
}

.grid-cell-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--grid-header-sorted-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  overflow: hidden;
}

.grid-cell-avatar-name {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-cell-avatar-sub {
  font-size: var(--text-size-overline);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-cell-badge {
  /* uses existing .tag / .badge system */
}

.grid-cell-date {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.grid-cell-date-icon {
  color: var(--text-tertiary);
  display: flex;
  flex-shrink: 0;
}

.grid-cell-number {
  text-align: end;
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-subtle);
}

/* Inline-editable cell input (qty-style). Chromeless at rest; the border and
   focus ring appear on hover/focus so the edit affordance is discoverable
   without adding visual noise to every row. */
.grid-cell-input {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--text-primary);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  transition: border-color var(--duration-fast) ease,
              background-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  appearance: none;
  -webkit-appearance: none;
}

.grid-cell-input[type="number"] {
  text-align: end;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-subtle);
}

.grid-cell-input:hover:not(:disabled):not(:focus-visible) {
  border-color: var(--input-border);
  background-color: var(--input-bg);
}

.grid-cell-input:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus, var(--input-bg));
  box-shadow: var(--focus-ring-subtle);
}

.grid-cell-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.grid-cell-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0.5;
  transition: opacity var(--duration-fast) ease;
}

.grid-row:hover .grid-cell-actions {
  opacity: 1;
}

.grid-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: var(--grid-transition);
  padding: 0;
}

.grid-action-btn:hover {
  background: var(--grid-row-hover-bg);
  color: var(--text-primary);
}

.grid-action-btn.danger:hover {
  background: var(--error-bg);
  color: var(--error);
}

.grid-cell-link {
  color: var(--link-color);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-size: var(--text-size-body-sm);
}

.grid-cell-link:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.grid-cell-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 80px;
}

.grid-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--grid-row-border);
  border-radius: 2px;
  overflow: hidden;
}

.grid-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-progress-label {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  white-space: nowrap;
  min-width: 28px;
  text-align: end;
}

/* ── Checkbox column ───────────────────────────────────────────────────────── */
.grid-th-check,
.grid-td-check {
  width: 48px;
  padding-left: var(--space-4);
  padding-right: var(--space-2);
}

/* ── Bulk Actions Bar ──────────────────────────────────────────────────────── */
.grid-bulk-bar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--grid-bulk-bar-bg);
  color: var(--grid-bulk-bar-text);
  border-bottom: 1px solid var(--grid-bulk-bar-border);
  animation: grid-bulk-slide-down 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-bulk-bar.visible {
  display: flex;
}

.grid-bulk-count {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  flex: 1;
}

.grid-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1_5) var(--space-3);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-medium);
  border-radius: 6px;
  border: 1px solid var(--grid-bulk-action-border);
  background: var(--grid-bulk-action-bg);
  color: var(--grid-bulk-bar-text);
  cursor: pointer;
  transition: var(--grid-transition);
}

.grid-bulk-action:hover {
  background: var(--grid-bulk-action-hover-bg);
}

.grid-bulk-action.danger {
  border-color: var(--grid-bulk-action-danger-border);
}

.grid-bulk-action.danger:hover {
  background: var(--grid-bulk-action-danger-hover-bg);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.grid-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3_5) var(--space-5);
  border-top: 1px solid var(--grid-row-border);
  flex-wrap: wrap;
}

.grid-pagination-info {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.grid-per-page {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}

.grid-per-page-label {
  white-space: nowrap;
}

.grid-per-page-btns {
  display: flex;
  align-items: center;
  gap: var(--space-0_5);
}

.grid-per-page-btn {
  padding: var(--spacing-badge-y) var(--space-2);
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--grid-transition);
}

.grid-per-page-btn:hover {
  color: var(--text-primary);
  background: var(--grid-row-hover-bg);
}

.grid-per-page-btn.active {
  color: var(--grid-pagination-active-text);
  background: var(--grid-pagination-active-bg);
  border-color: transparent;
}

.grid-page-nav {
  display: flex;
  align-items: center;
  gap: var(--space-0_5);
}

.grid-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--grid-transition);
}

.grid-page-btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--grid-row-hover-bg);
  border-color: var(--grid-row-border);
}

.grid-page-btn.active {
  color: var(--grid-pagination-active-text);
  background: var(--grid-pagination-active-bg);
  border-color: transparent;
}

.grid-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.grid-page-ellipsis {
  color: var(--text-tertiary);
  padding: 0 var(--space-1);
  font-size: var(--text-size-body-sm);
}

.grid-jump-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}

.grid-jump-input {
  width: 48px;
  height: var(--size-grid-jump-input);
  padding: 0 var(--space-2);
  text-align: center;
  font-size: var(--text-size-caption);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: 6px;
  outline: none;
  transition: var(--grid-transition);
}

.grid-jump-input:focus-visible {
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring-subtle);
}

/* ── Empty State ───────────────────────────────────────────────────────────── */
.grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  gap: var(--space-3);
}

.grid-empty-icon {
  width: var(--grid-empty-icon-size);
  height: var(--grid-empty-icon-size);
  color: var(--grid-empty-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-empty-title {
  font-size: var(--text-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.grid-empty-sub {
  font-size: var(--text-size-body-sm);
  color: var(--text-tertiary);
  max-width: 280px;
}

/* ── Loading / Skeleton ────────────────────────────────────────────────────── */
.grid-loading {
  padding: 0;
}

.grid-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--grid-row-padding);
  border-bottom: 1px solid var(--grid-row-border);
}

.grid-skeleton-cell {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    var(--grid-skeleton-base) 25%,
    var(--grid-skeleton-shine) 50%,
    var(--grid-skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: grid-skeleton-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

.grid-skeleton-cell.w-8  { width: 32px; }
.grid-skeleton-cell.w-32 { width: 32px; height: 32px; border-radius: 8px; }
.grid-skeleton-cell.w-48 { width: 48px; }
.grid-skeleton-cell.w-120 { width: 120px; }
.grid-skeleton-cell.w-80  { width: 80px; }
.grid-skeleton-cell.w-60  { width: 60px; }
.grid-skeleton-cell.w-auto { flex: 1; }

/* Stagger skeleton rows */
.grid-skeleton-row:nth-child(1) .grid-skeleton-cell { animation-delay: 0ms; }
.grid-skeleton-row:nth-child(2) .grid-skeleton-cell { animation-delay: 80ms; }
.grid-skeleton-row:nth-child(3) .grid-skeleton-cell { animation-delay: 160ms; }
.grid-skeleton-row:nth-child(4) .grid-skeleton-cell { animation-delay: 240ms; }
.grid-skeleton-row:nth-child(5) .grid-skeleton-cell { animation-delay: 320ms; }

/* ═══════════════════════════════════════════════════════════════════════════
   ── Responsive Table Patterns ────────────────────────────────────────────
   Two opt-in patterns for mobile-friendly tables
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pattern A: Card Stack ─────────────────────────────────────────────── */
/* Usage: add .table-responsive-cards to .data-grid wrapper */

@media (max-width: 639px) {
  .table-responsive-cards .grid-table {
    display: block;
  }

  .table-responsive-cards .grid-header {
    display: none;
  }

  .table-responsive-cards .grid-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .table-responsive-cards .grid-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-xs);
  }

  .table-responsive-cards .grid-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: var(--text-size-body-sm);
  }

  .table-responsive-cards .grid-table td:first-child {
    width: 100%;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-size-h3);
    color: var(--text-primary);
  }

  .table-responsive-cards .grid-table td:not(:first-child) {
    width: calc(50% - var(--space-1));
    color: var(--text-secondary);
  }

  .table-responsive-cards .grid-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    font-size: var(--text-size-caption);
    display: block;
    margin-bottom: var(--space-0_5);
  }
}

/* ── Pattern B: Horizontal Scroll with Pinned Column ──────────────────── */
/* Usage: add .table-responsive-scroll to .data-grid wrapper */

@media (max-width: 639px) {
  .table-responsive-scroll .grid-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-scroll .grid-table-wrap::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
    z-index: 5;
    display: block;
    float: right;
    height: 100%;
    margin-top: -100%;
  }

  .table-responsive-scroll .grid-th:first-child,
  .table-responsive-scroll .grid-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    box-shadow: var(--shadow-table-sticky-col);
  }

  .table-responsive-scroll .grid-table {
    table-layout: auto;
    min-width: 600px;
  }
}

/* ── Default table fallback: horizontal scroll with fade hint ──────────── */
@media (max-width: 1023px) {
  .data-grid:not(.table-responsive-cards):not(.table-responsive-scroll) .grid-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-grid:not(.table-responsive-cards):not(.table-responsive-scroll) .grid-table {
    min-width: 960px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── Responsive Visibility Utilities ───────────────────────────────────────
   Mobile-first: base = mobile, progressively show/hide at breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* Show only on actual phones (<480px) */
.phone-only { display: block; }
.phone-only-flex { display: flex; }
@media (min-width: 480px) {
  .phone-only,
  .phone-only-flex { display: none; }
}

/* Show on large-phone and up (≥480px) */
.large-phone-up { display: none; }
.large-phone-up-flex { display: none; }
@media (min-width: 480px) {
  .large-phone-up { display: block; }
  .large-phone-up-flex { display: flex; }
}

/* Show only on mobile (<640px) */
.mobile-only { display: block; }
@media (min-width: 640px) { .mobile-only { display: none; } }

/* Hide on mobile, show on tablet+ */
.tablet-up { display: none; }
@media (min-width: 640px) { .tablet-up { display: block; } }
.tablet-up-flex { display: none; }
@media (min-width: 640px) { .tablet-up-flex { display: flex; } }

/* Show only in the tablet band (640–1023px) */
.tablet-only { display: none; }
.tablet-only-flex { display: none; }
@media (min-width: 640px) and (max-width: 1023px) {
  .tablet-only { display: block; }
  .tablet-only-flex { display: flex; }
}

/* Hide during the tablet band (visible below 640 AND from 1024+) */
.hide-tablet { display: block; }
.hide-tablet-flex { display: flex; }
@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet,
  .hide-tablet-flex { display: none; }
}

/* Hide below desktop, show on lg+ */
.desktop-up { display: none; }
@media (min-width: 1024px) { .desktop-up { display: block; } }
.desktop-up-flex { display: none; }
@media (min-width: 1024px) { .desktop-up-flex { display: flex; } }

/* ── Touch target utility ──────────────────────────────────────────────── */
.touch-target {
  min-height: var(--size-touch-min);  /* 44px */
  min-width: var(--size-touch-min);
}

/* ── .sidebar-rail — collapsed icon-only sidebar variant ──────────────── */
/* Applies the tablet rail width from tokens and hides text slots so the
   nav shows icons only. Composable with .drawer-start for a mobile drawer
   that reveals to rail on tablet. Consumers must use .sidebar-nav-item,
   .sidebar-nav-label, and .sidebar-user-info as the inner class names for
   hide/center behavior to take effect. */
.sidebar-rail {
  width: var(--size-sidebar-rail);
}
.sidebar-rail .sidebar-nav-label,
.sidebar-rail .sidebar-user-info {
  display: none;
}
.sidebar-rail .sidebar-nav-item {
  justify-content: center;
  gap: 0;
}

/* ── .btn-touch — keeps visual size, expands hit area via pseudo ──────── */
/* Composable with .btn-sm / .btn-xs / .btn-icon so dense grids stay dense
   while clicks still land on a WCAG-legal 44×44 area. */
.btn-touch {
  position: relative;
}
.btn-touch::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  transform: translate(-50%, -50%);
  pointer-events: auto;   /* capture clicks on the expanded hit area */
  background: transparent;
}
/* RTL-safe: pseudo is translated from inline-start so it flips with dir. */
[dir="rtl"] .btn-touch::before { transform: translate(50%, -50%); }

/* ── Column Width Utilities (Data Grid) ─────────────────────────────────── */
.tpl-width-48  { width: 48px; }
.tpl-width-100 { width: 100px; }
.tpl-width-110 { width: 110px; }
.tpl-width-120 { width: 120px; }
.tpl-width-130 { width: 130px; }
.tpl-width-170 { width: 170px; }
.tpl-width-240 { width: 240px; }
.tpl-width-280 { width: 280px; }
.tpl-width-300 { width: 300px; }
.tpl-width-320 { width: 320px; }
.tpl-width-360 { width: 360px; }
.tpl-width-400 { width: 400px; }

/* ── Data Grid: toolbar & pagination — mobile ──────────────────────────── */
@media (max-width: 639px) {
  .grid-search-input {
    min-width: 0;
    width: 100%;
  }

  .grid-toolbar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    flex-direction: column;
    align-items: stretch;
  }

  .grid-toolbar-left {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .grid-toolbar-right {
    justify-content: space-between;
    width: 100%;
  }

  .grid-count {
    flex: 1;
  }

  .grid-pagination {
    padding: var(--space-3) var(--space-4);
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .grid-per-page {
    justify-content: center;
    width: 100%;
  }

  .grid-page-nav {
    justify-content: center;
    width: 100%;
  }

  .grid-jump-wrap {
    justify-content: center;
    width: 100%;
  }
}

/* ── Data Grid: toolbar & pagination — tablet ──────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .grid-toolbar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .grid-pagination {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
  }

  .grid-per-page {
    flex: 0 0 auto;
  }

  .grid-page-nav {
    flex: 0 0 auto;
  }

  .grid-jump-wrap {
    flex: 0 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── Premium Mobile Polish (375px) ───────────────────────────────────────
   Alignment, symmetry, spacing, full-width, proper sizes
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

  /* ── OTP: scale digits to fit 375px ──────────────────────────────────── */
  .otp-input-group:not(.otp-compact) {
    gap: 8px;
  }

  .otp-input-group:not(.otp-compact) .otp-digit {
    width: 44px;
    height: 52px;
    font-size: var(--text-size-otp-mobile);
    border-radius: 8px;
  }

  .otp-input-group:not(.otp-compact) .otp-separator {
    width: 4px;
    height: 52px;
  }

  .otp-input-group:not(.otp-compact) .otp-separator::before {
    width: 4px;
    height: 4px;
  }

  /* ── Verification cards: full-width, better layout ───────────────────── */
  .verify-method-card {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .verify-method-card .verify-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .verify-method-card .verify-card-icon svg,
  .verify-method-card .verify-card-icon i {
    width: 18px;
    height: 18px;
  }

  .verify-card-body {
    min-width: 0;
  }

  .verify-card-title {
    font-size: var(--text-size-body-sm, 13px);
  }

  .verify-card-desc {
    font-size: var(--text-size-caption, 12px);
  }

  .verify-card-action .btn {
    padding: var(--space-1_5) var(--space-2_5);
    font-size: var(--text-size-caption, 12px);
  }

  /* ── Event card: full-width details ──────────────────────────────────── */
  .event-card-details {
    padding: var(--space-3) var(--space-4);
  }

  .event-card-row {
    gap: var(--space-2);
  }

  /* ── Data table expanded row: full-width ─────────────────────────────── */
  .expand-content {
    padding: var(--space-3) var(--space-4);
  }

  .expand-content .tpl-expand-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .expand-content .tpl-expand-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .expand-content .tpl-expand-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Alerts: full-width, consistent padding ──────────────────────────── */
  .alert {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-size-body-sm);
  }

  /* ── Tags & badges: consistent spacing ───────────────────────────────── */
  .tpl-flex-wrap {
    gap: var(--space-2);
  }

  /* ── Progress bars: label alignment ──────────────────────────────────── */
  .progress-header {
    font-size: var(--text-size-body-sm);
  }

  /* ── Modal: full-width on mobile ─────────────────────────────────────── */
  .modal {
    max-width: calc(100vw - var(--space-8));
    max-height: calc(100vh - var(--space-8));
    width: 100%;
  }
  .modal-backdrop {
    padding: var(--space-4);
  }
  .modal-header,
  .modal-body {
    padding: var(--space-4);
  }
  .modal-footer {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
  }
  .modal-footer .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* ── Dropdown menu: proper width ─────────────────────────────────────── */
  .dropdown-menu {
    min-width: 180px;
  }

  /* ── Tabs: prevent overflow, allow scroll ────────────────────────────── */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs-pill {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs-pill::-webkit-scrollbar {
    display: none;
  }

  /* ── Accordion: full-width, touch-friendly ───────────────────────────── */
  .accordion-header {
    padding: var(--space-3_5) var(--space-4);
    min-height: var(--size-touch-min);
  }

  .accordion-body {
    padding: var(--space-3) var(--space-4);
  }

  /* ── File cards: icon alignment ──────────────────────────────────────── */
  .file-card {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  /* ── Info grid cards: full bleed ─────────────────────────────────────── */
  .info-card {
    padding: var(--space-3) var(--space-4);
  }

  /* ── Password input: full-width ──────────────────────────────────────── */
  .input-password-wrap {
    width: 100%;
  }

  .strength-meter {
    margin-top: var(--space-2);
  }

  /* ── Phone input: proper sizing ──────────────────────────────────────── */
  .phone-input-wrap {
    width: 100%;
  }

  /* ── Validation states: full-width ───────────────────────────────────── */
  .validation-input-wrap {
    width: 100%;
  }

  /* ── Hero pills: equal-width 2x2 grid ─────────────────────────────────── */
  .hero-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    width: 100%;
    margin-inline-start: 0;
  }

  .hero-pill {
    min-width: 0;
  }

  /* ── Hero stat cards: 2x2 grid ───────────────────────────────────────── */
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .hero-stat {
    padding: var(--space-2) var(--space-3);
  }

  .hero-stat-label {
    font-size: var(--text-size-xs);
  }

  .hero-stat-value {
    font-size: var(--text-size-body-sm);
  }

  /* ── Skeleton: full-width cells ──────────────────────────────────────── */
  .skeleton-row {
    padding: var(--space-3);
  }

  /* ── Standard card: symmetrical padding ──────────────────────────────── */
  .card-header {
    padding: var(--space-3) var(--space-4);
  }

  .card-body {
    padding: var(--space-3) var(--space-4);
  }

  .card-footer {
    padding: var(--space-3) var(--space-4);
  }

  /* ── Timeline: linearize to single-column on mobile ──────────────────── */
  .timeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Hide empty placeholder divs and spacer rows */
  .timeline > div:not(.timeline-left):not(.timeline-right):not(.timeline-dot):not(.timeline-line) {
    display: none;
  }

  .timeline-line {
    width: var(--timeline-line-width);
    min-height: var(--space-4);
    align-self: flex-start;
    margin-inline-start: 7px;
  }

  .timeline-dot {
    align-self: flex-start;
    margin-inline-start: 1px;
  }

  .timeline-left,
  .timeline-right {
    padding-inline: 0;
    padding-inline-start: var(--space-6);
    align-items: flex-start;
    margin-bottom: var(--space-2);
  }

  .timeline-entry {
    max-width: 100%;
  }

  .timeline-entry-header {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  /* ── Tag remove: touch-friendly hit area ────────────────────────────── */
  .tag-remove {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1));
    padding: var(--space-1);
  }

  /* ── Theme switcher: touch-friendly ─────────────────────────────────── */
  .tpl-theme-btn {
    min-height: 36px;
    min-width: 44px;
  }

  /* ── Icon buttons: min 44px touch target ────────────────────────────── */
  .btn-icon {
    min-width: var(--size-touch-min);
    min-height: var(--size-touch-min);
  }

  .btn-icon.btn-sm {
    min-width: 36px;
    min-height: 36px;
  }

  /* ── Sidebar nav links: larger touch area ───────────────────────────── */
  .tpl-nav-link {
    min-height: 40px;
  }

  /* ── File card links: larger touch area ─────────────────────────────── */
  .file-name {
    padding-block: var(--space-1);
    display: inline-block;
  }
}

/* ── Tablet polish (640px–1023px) ──────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Data table expanded row: 2-column grid */
  .expand-content .tpl-expand-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* OTP: slightly smaller for tablet */
  .otp-input-group:not(.otp-compact) {
    gap: 12px;
  }

  .otp-input-group:not(.otp-compact) .otp-digit {
    width: 48px;
    height: 56px;
    font-size: var(--text-size-otp-tablet);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER BAR — one-row search + filter toolbar for list / index pages
   ═══════════════════════════════════════════════════════════════════════════
   A single horizontal row: a search field, compact filter chips, and a
   result-count / actions slot. When the chips no longer fit, they collapse
   into one "Filters" button that opens a popover — driven purely by a
   container query, so the row height never grows on narrow screens.

   Every control shares one height (var(--input-height)).

   Markup contract (see template.html §22.5):
     .filter-bar
       .filter-bar-search   — .filter-bar-search-icon + input.input
       .filter-bar-filters  — .filter-chip …            (collapsing group)
       .filter-bar-more     — button.filter-chip[data-filter-toggle]
                              + .filter-pop
       .filter-bar-actions  — .filter-bar-count / buttons

   controls.js wires [data-filter-toggle] → toggles the sibling .filter-pop
   (outside-click + Escape close, aria-expanded sync). Per-chip filter menus
   are the consumer's responsibility — the DS only ships the chip trigger.
   ─────────────────────────────────────────────────────────────────────────── */
.filter-bar {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2_5) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

/* ── Search — icon-positioning wrapper around a standard .input ──────────── */
.filter-bar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 0;
}
.filter-bar-search .input {
  width: 100%;
  padding-inline-start: var(--space-9);
}
.filter-bar-search-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: var(--input-transition);
}
.filter-bar-search:focus-within .filter-bar-search-icon {
  color: var(--color-primary);
}

/* ── Filter chip group — collapses into the popover below the breakpoint ─── */
.filter-bar-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  min-width: 0;
}

/* ── Compact filter chip — a dropdown trigger; consumer wires the menu ───── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  height: var(--input-height);
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--input-transition);
}
.filter-chip:hover {
  border-color: var(--input-border-hover);
  color: var(--text-primary);
}
.filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.filter-chip[aria-expanded="true"] {
  border-color: var(--input-border-hover);
  color: var(--text-primary);
}
/* Active = a value is applied → primary outline + tinted fill */
.filter-chip[data-active] {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.filter-chip-value {
  font-weight: var(--font-weight-semibold);
}
.filter-chip-sep {
  width: var(--space-0_5);
  height: var(--space-0_5);
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.5;
}
.filter-chip-caret {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--duration-fast) ease;
}
.filter-chip[aria-expanded="true"] .filter-chip-caret {
  transform: rotate(180deg);
}

/* ── Actions slot — result count, secondary buttons ─────────────────────── */
.filter-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  flex-shrink: 0;
}
.filter-bar-count {
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ── Overflow: "More filters" button + popover ──────────────────────────── */
.filter-bar-more {
  position: relative;
  display: none;            /* revealed by the container query below */
}
.filter-bar-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-5);
  height: var(--space-5);
  padding: 0 var(--space-1_5);
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-bold);
  color: var(--btn-primary-text);
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.filter-pop {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  width: 16rem;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.filter-pop[data-open="true"] {
  display: flex;
}
.filter-pop-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.filter-pop-label {
  font-size: var(--text-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.filter-pop-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* ── Collapse point — chips fold into the popover, row height holds ─────── */
@container (max-width: 620px) {
  .filter-bar-filters { display: none; }
  .filter-bar-more    { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CURRENCY — UAE Dirham (AED) symbol
   ═══════════════════════════════════════════════════════════════════════════
   Per Central Bank of the UAE (2024): the symbol precedes the amount, matches
   text color, is sized to the numeral cap-height, and has a 0.25em gap to the
   numeral. Both APIs inherit color + font-size from the parent — theming is
   automatic across light / dark / oled.

   APIs:
     .aed-symbol  — standalone symbol (e.g. input adornments, icon slots).
     .aed         — wraps an amount, auto-prefixes the symbol via ::before.
   --------------------------------------------------------------------------- */

.aed-symbol,
.aed::before {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.8em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344.84 299.91'><path d='M342.14,140.96l2.7,2.54v-7.72c0-17-11.92-30.84-26.56-30.84h-23.41C278.49,36.7,222.69,0,139.68,0c-52.86,0-59.65,0-109.71,0,0,0,15.03,12.63,15.03,52.4v52.58h-27.68c-5.38,0-10.43-2.08-14.61-6.01l-2.7-2.54v7.72c0,17.01,11.92,30.84,26.56,30.84h18.44s0,29.99,0,29.99h-27.68c-5.38,0-10.43-2.07-14.61-6.01l-2.7-2.54v7.71c0,17,11.92,30.82,26.56,30.82h18.44s0,54.89,0,54.89c0,38.65-15.03,50.06-15.03,50.06h109.71c85.62,0,139.64-36.96,155.38-104.98h32.46c5.38,0,10.43,2.07,14.61,6l2.7,2.54v-7.71c0-17-11.92-30.83-26.56-30.83h-18.9c.32-4.88.49-9.87.49-15s-.18-10.11-.51-14.99h28.17c5.37,0,10.43,2.07,14.61,6.01ZM89.96,15.01h45.86c61.7,0,97.44,27.33,108.1,89.94l-153.96.02V15.01ZM136.21,284.93h-46.26v-89.98l153.87-.02c-9.97,56.66-42.07,88.38-107.61,90ZM247.34,149.96c0,5.13-.11,10.13-.34,14.99l-157.04.02v-29.99l157.05-.02c.22,4.84.33,9.83.33,15Z'/></svg>");
          mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344.84 299.91'><path d='M342.14,140.96l2.7,2.54v-7.72c0-17-11.92-30.84-26.56-30.84h-23.41C278.49,36.7,222.69,0,139.68,0c-52.86,0-59.65,0-109.71,0,0,0,15.03,12.63,15.03,52.4v52.58h-27.68c-5.38,0-10.43-2.08-14.61-6.01l-2.7-2.54v7.72c0,17.01,11.92,30.84,26.56,30.84h18.44s0,29.99,0,29.99h-27.68c-5.38,0-10.43-2.07-14.61-6.01l-2.7-2.54v7.71c0,17,11.92,30.82,26.56,30.82h18.44s0,54.89,0,54.89c0,38.65-15.03,50.06-15.03,50.06h109.71c85.62,0,139.64-36.96,155.38-104.98h32.46c5.38,0,10.43,2.07,14.61,6l2.7,2.54v-7.71c0-17-11.92-30.83-26.56-30.83h-18.9c.32-4.88.49-9.87.49-15s-.18-10.11-.51-14.99h28.17c5.37,0,10.43,2.07,14.61,6.01ZM89.96,15.01h45.86c61.7,0,97.44,27.33,108.1,89.94l-153.96.02V15.01ZM136.21,284.93h-46.26v-89.98l153.87-.02c-9.97,56.66-42.07,88.38-107.61,90ZM247.34,149.96c0,5.13-.11,10.13-.34,14.99l-157.04.02v-29.99l157.05-.02c.22,4.84.33,9.83.33,15Z'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  vertical-align: baseline;
  flex-shrink: 0;
}

/* `.aed` is bidi-isolated and forced LTR so the symbol always appears on
   the visual LEFT of the digits — including inside an RTL document.
   Per the DWTC currency contract: "Symbol always precedes the amount (LTR
   and RTL)" means visually-left, not source-order; without `direction: ltr`
   + `unicode-bidi: isolate`, RTL flips the box to render `digits ₿` and
   the gap (margin-inline-end) lands on the wrong side. */
.aed {
  direction: ltr;
  unicode-bidi: isolate;
}
.aed::before {
  margin-inline-end: 0.25em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER — off-canvas side panel
   ═══════════════════════════════════════════════════════════════════════════
   Structure:
     <div class="drawer-backdrop" id="xBackdrop" hidden></div>
     <aside class="drawer drawer-end drawer-md" role="dialog" aria-modal="true"
            aria-labelledby="xTitle" id="xDrawer" hidden>
       <header class="drawer-header">
         <h2 class="drawer-title" id="xTitle">Title</h2>
         <button class="btn btn-ghost btn-icon btn-sm drawer-close" aria-label="Close">
           <i data-lucide="x"></i>
         </button>
       </header>
       <div class="drawer-body">…</div>
       <footer class="drawer-footer">
         <button class="btn btn-ghost">Cancel</button>
         <button class="btn btn-primary">Confirm</button>
       </footer>
     </aside>

   Modifiers:
     Anchor (inline) : .drawer-start | .drawer-end (default)
     Anchor (block)  : .drawer-bottom | .drawer-top
     Width (inline)  : .drawer-sm 360px | .drawer-md 480px (default) | .drawer-lg 640px
     Max-height (block, bottom/top only):
                       .drawer-sm 40vh | .drawer-md 65vh (default) | .drawer-lg 90vh

   .drawer-bottom is ideal for phone row-edit flows (one-handed reach).
   .drawer-top is useful for notification trays / filter panels.

   State toggled by the page/app: add `.is-open` to both backdrop and drawer,
   remove `hidden`. See template.html for the reference open/close handlers.
   --------------------------------------------------------------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--bg-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  inset-block: 0;
  z-index: 201;
  display: flex;
  flex-direction: column;
  width: min(480px, 100vw);
  max-width: 100vw;
  background-color: var(--bg-card);
  border-inline-start: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-sm { width: min(360px, 100vw); }
.drawer-md { width: min(480px, 100vw); }
.drawer-lg { width: min(640px, 100vw); }

.drawer-end {
  inset-inline-end: 0;
  inset-inline-start: auto;
  transform: translateX(100%);
  border-inline-start: 1px solid var(--border-default);
  border-inline-end: none;
}

.drawer-start {
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform: translateX(-100%);
  border-inline-end: 1px solid var(--border-default);
  border-inline-start: none;
}

/* ── Block-axis anchors (bottom sheet / top tray) ──────────────────────── */
/* These override the inline-axis defaults above: full-width, constrained by
   max-height (mapped from .drawer-sm/md/lg), slide in from the block edge.
   RTL-safe because block axis is direction-agnostic. */
.drawer-bottom,
.drawer-top {
  inset-inline: 0;
  inset-block: auto;   /* reset inline-axis default */
  width: 100%;
  max-width: 100%;
  border-inline: none;
}

.drawer-bottom {
  inset-block-end: 0;
  transform: translateY(100%);
  max-height: 65vh;
  border-top: 1px solid var(--border-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.drawer-top {
  inset-block-start: 0;
  transform: translateY(-100%);
  max-height: 65vh;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Size modifiers repurposed for block-axis drawers: control max-height. */
.drawer-bottom.drawer-sm,
.drawer-top.drawer-sm { max-height: 40vh; width: 100%; }
.drawer-bottom.drawer-md,
.drawer-top.drawer-md { max-height: 65vh; width: 100%; }
.drawer-bottom.drawer-lg,
.drawer-top.drawer-lg { max-height: 90vh; width: 100%; }

.drawer.is-open {
  transform: translateX(0);
}
/* Block-axis drawers must snap to translateY(0), not X. The more-specific
   compound selector below wins over the inline-axis default above. */
.drawer-bottom.is-open,
.drawer-top.is-open {
  transform: translateY(0);
}

/* RTL: inline-end flips to the left edge, inline-start flips to the right edge,
   so the off-screen translate direction must invert too. */
[dir="rtl"] .drawer-end   { transform: translateX(-100%); }
[dir="rtl"] .drawer-start { transform: translateX(100%); }
[dir="rtl"] .drawer.is-open { transform: translateX(0); }
/* Re-assert block-axis open state after RTL inline overrides. */
[dir="rtl"] .drawer-bottom.is-open,
[dir="rtl"] .drawer-top.is-open { transform: translateY(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.drawer-title {
  margin: 0;
  font-size: var(--text-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--lh-h3, 1.3);
}

.drawer-subtitle {
  margin: 0;
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-0_5);
}

.drawer-header .drawer-close { flex-shrink: 0; }

.drawer-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.drawer-footer {
  padding: var(--space-4) var(--space-6);
  background-color: var(--bg-inset);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Reduced motion — snap in/out instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer-backdrop {
    transition: none;
  }
}


/* =============================================================================
   PROSE & SEMANTIC PRIMITIVES
   Tier 1: lists (bulleted/numbered/checked), definition lists, blockquote, hr,
           code (inline + block surface), kbd, mark, figure+caption, callout,
           fine-print
   Tier 2: abbreviation, address, sup/sub, meter, del/ins, time
   Plus `.prose` — a drop-in long-form container that styles every nested
   element automatically (CMS, markdown, help docs).
   All values via DS tokens. All three themes via cascade.
   ============================================================================= */

/* ── Lists — opt back in after the globals.css reset ──────────────────── */
.list-bulleted,
.list-numbered,
.list-checked {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
  color: var(--text-body);
  font-size: var(--text-size-body);
  line-height: 1.6;
}
.list-bulleted { list-style: disc outside; }
.list-bulleted li::marker { color: var(--color-primary); }

.list-numbered { list-style: decimal outside; }
.list-numbered li::marker {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.list-checked {
  list-style: none;
  padding-inline-start: 0;
}
.list-checked li {
  position: relative;
  padding-inline-start: calc(var(--size-icon-md) + var(--space-2));
}
.list-checked li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--success);
  font-weight: var(--font-weight-bold);
  font-size: 1.1em;
  line-height: inherit;
}
.list-bulleted .list-bulleted,
.list-numbered .list-numbered,
.list-checked .list-checked {
  margin-top: var(--space-1_5);
}

/* ── Definition lists ─────────────────────────────────────────────────── */
.dl-stacked {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dl-stacked dt {
  font-size: var(--text-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.dl-stacked dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-size-body);
}

.dl-inline {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: baseline;
}
.dl-inline dt {
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  font-size: var(--text-size-body-sm);
}
.dl-inline dd {
  margin: 0;
  color: var(--text-primary);
}

.dl-columns {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: var(--space-6);
}
.dl-columns dt,
.dl-columns dd {
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.dl-columns dt {
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
}
.dl-columns dd { color: var(--text-primary); }
.dl-columns dt:first-of-type,
.dl-columns dd:first-of-type {
  border-top: 1px solid var(--border-subtle);
}

/* ── Blockquote — glass surface + gradient accent rail + shine ────────── */
.blockquote {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-style: italic;
  font-size: var(--text-size-body-lg);
  line-height: 1.55;
  box-shadow: var(--shadow-xs);
}
.blockquote::before {
  content: "";
  position: absolute;
  inset-block: var(--space-3);
  inset-inline-start: var(--space-2);
  width: var(--space-0_5);
  background: linear-gradient(to bottom, var(--color-primary), var(--text-link-teal));
  border-radius: var(--radius-full);
}
.blockquote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-glass-highlight);
  border-radius: inherit;
  pointer-events: none;
}
.blockquote > * { position: relative; z-index: 1; }
.blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--text-size-body-sm);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
}
.blockquote cite::before { content: "— "; }

/* ── Horizontal rule ──────────────────────────────────────────────────── */
.hr {
  border: none;
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-6) 0;
}
.hr-strong { background: var(--border-default); }
.hr-dashed {
  background: none;
  border-top: 1px dashed var(--border-default);
}
.hr-gradient {
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.4;
}

/* ── Code — inline + surfaced block with gradient header ──────────────── */
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em var(--space-1);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  white-space: nowrap;
}

.code-surface {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
  box-shadow: var(--shadow-sm);
}
.code-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-glass-highlight);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.code-block-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2_5) var(--space-4);
  background: linear-gradient(180deg, var(--bg-section), transparent);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.code-block-head-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
}
.code-block-head-lang::before {
  content: "";
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 var(--space-2) var(--color-primary);
}
.code-block {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-size-body-sm);
  line-height: 1.6;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre;
  background: transparent;
  border: 0;
}
.code-block-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0_5) var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  font-size: var(--text-size-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-fast) var(--ease-default);
}
.code-block-copy:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.code-block-copy:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.code-block-copy svg { width: var(--size-icon-xs); height: var(--size-icon-xs); }

/* ── Keyboard keys — layered depth (pressed feel) ─────────────────────── */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  padding: 0 var(--space-1_5);
  font-family: var(--font-mono);
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-inset));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  box-shadow:
    inset 0 1px 0 var(--card-glass-border, var(--bg-card)),
    0 1px 0 var(--border-strong),
    var(--shadow-xs);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ── Mark / search highlight ──────────────────────────────────────────── */
.mark {
  background: linear-gradient(180deg, transparent 50%, var(--warning-bg) 50%);
  color: var(--text-primary);
  padding: 0.05em var(--space-0_5);
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-medium);
}

/* ── Figure + caption ─────────────────────────────────────────────────── */
.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.figure > img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  display: block;
}
.figure-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-size: var(--text-size-caption);
  font-style: italic;
  background:
    linear-gradient(135deg, var(--bg-section), var(--bg-inset)),
    radial-gradient(ellipse 60% 40% at 80% 20%, var(--color-primary), transparent 60%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.figure-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-glass-highlight);
  border-radius: inherit;
  pointer-events: none;
}
.figure-frame > * { position: relative; z-index: 1; }
.figure-caption {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  margin: 0;
}

/* ── Callout — tinted glass surface, accent rail, shine overlay ───────── */
.callout {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  padding-inline-start: calc(var(--space-5) + var(--space-1));
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--text-size-body-sm);
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}
.callout::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-1);
  background: var(--color-primary);
}
.callout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-glass-highlight);
  border-radius: inherit;
  pointer-events: none;
}
.callout > * { position: relative; z-index: 1; }
.callout-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: var(--space-0_5);
}
.callout-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.callout-body { flex: 1; min-width: 0; }
.callout-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  display: block;
}

.callout-info    { background: var(--bg-card); border-color: var(--border-subtle); }
.callout-info::before    { background: var(--color-primary); }
.callout-info .callout-icon { color: var(--color-primary); }

.callout-warn    { background: var(--warning-bg); border-color: var(--warning-bg); }
.callout-warn::before    { background: var(--warning); }
.callout-warn .callout-icon { color: var(--warning); }

.callout-danger  { background: var(--error-bg); border-color: var(--error-bg); }
.callout-danger::before  { background: var(--error); }
.callout-danger .callout-icon { color: var(--error); }

.callout-success { background: var(--success-bg); border-color: var(--success-bg); }
.callout-success::before { background: var(--success); }
.callout-success .callout-icon { color: var(--success); }

/* ── Fine print / legal ───────────────────────────────────────────────── */
.fine-print {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ── Superscript / subscript scaling ──────────────────────────────────── */
.sup, .sub {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.sup { top: -0.5em; }
.sub { top: 0.3em; }

/* ── Abbreviation (pair with native title= for tooltip) ───────────────── */
.abbr,
abbr[title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--color-primary);
  text-underline-offset: var(--space-1);
  text-decoration-thickness: 1px;
  cursor: help;
}

/* ── Address — gradient accent rail ───────────────────────────────────── */
.address {
  position: relative;
  font-style: normal;
  color: var(--text-body);
  line-height: 1.6;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-size: var(--text-size-body-sm);
}
.address::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-0_5);
  background: linear-gradient(to bottom, var(--color-primary), var(--text-link-teal));
  border-radius: var(--radius-full);
}
.address strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ── <meter> native element styling ───────────────────────────────────── */
.meter {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--space-2);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.meter::-webkit-meter-bar {
  background: var(--bg-inset);
  border: 0;
  border-radius: var(--radius-full);
}
.meter::-webkit-meter-optimum-value         { background: var(--success); border-radius: var(--radius-full); }
.meter::-webkit-meter-suboptimum-value      { background: var(--warning); border-radius: var(--radius-full); }
.meter::-webkit-meter-even-less-good-value  { background: var(--error);   border-radius: var(--radius-full); }
.meter::-moz-meter-bar                      { background: var(--success); border-radius: var(--radius-full); }

/* ── Revision markers — <del> / <ins> ─────────────────────────────────── */
.del {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--error);
}
.ins {
  color: var(--success-text);
  text-decoration: none;
  background: var(--success-bg);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-medium);
}

/* ── Time chip ────────────────────────────────────────────────────────── */
.time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: inherit;
}
.time svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--text-tertiary);
}

/* ═════════════════════════════════════════════════════════════════════════
   .prose — long-form content container
   Drop-in styling for CMS/markdown/help-doc content. No per-element classing.
   ═════════════════════════════════════════════════════════════════════════ */
.prose {
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  line-height: 1.7;
  color: var(--text-body);
  max-width: 72ch;
}
.prose > * + * { margin-top: var(--space-4); }

.prose h1 {
  font-size: var(--text-size-h1);
  line-height: 1.2;
  color: var(--text-primary);
  margin-top: var(--space-8);
  font-weight: var(--font-weight-bold);
}
.prose h2 {
  font-size: var(--text-size-h2);
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: var(--space-7);
  font-weight: var(--font-weight-semibold);
}
.prose h3 {
  font-size: var(--text-size-h3);
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: var(--space-6);
  font-weight: var(--font-weight-semibold);
}
.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose p { color: var(--text-body); }

.prose ul,
.prose ol { padding-inline-start: var(--space-5); }
.prose ul { list-style: disc outside; }
.prose ol { list-style: decimal outside; }
.prose li { margin-top: var(--space-1_5); }
.prose li::marker { color: var(--color-primary); }
.prose ol li::marker {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
}

.prose blockquote {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-style: italic;
  box-shadow: var(--shadow-xs);
}
.prose blockquote::before {
  content: "";
  position: absolute;
  inset-block: var(--space-3);
  inset-inline-start: var(--space-2);
  width: var(--space-0_5);
  background: linear-gradient(to bottom, var(--color-primary), var(--text-link-teal));
  border-radius: var(--radius-full);
}
.prose blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--text-size-body-sm);
  color: var(--text-tertiary);
}
.prose blockquote cite::before { content: "— "; }

.prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin: var(--space-8) 0;
}

.prose code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em var(--space-1);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}
.prose pre {
  font-family: var(--font-mono);
  font-size: var(--text-size-body-sm);
  line-height: 1.6;
  padding: var(--space-4);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  box-shadow: var(--shadow-xs);
}

.prose kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  padding: 0 var(--space-1_5);
  font-family: var(--font-mono);
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-semibold);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-inset));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  box-shadow:
    inset 0 1px 0 var(--card-glass-border, var(--bg-card)),
    0 1px 0 var(--border-strong),
    var(--shadow-xs);
  line-height: 1;
}

.prose mark {
  background: linear-gradient(180deg, transparent 50%, var(--warning-bg) 50%);
  color: var(--text-primary);
  padding: 0.05em var(--space-0_5);
  border-radius: var(--radius-xs);
}

.prose figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.prose figure > img,
.prose figure > .figure-frame {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.prose figcaption {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
}

.prose dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: baseline;
}
.prose dt { font-weight: var(--font-weight-semibold); color: var(--text-tertiary); }
.prose dd { margin: 0; color: var(--text-primary); }

.prose a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
}
.prose a:hover { color: var(--color-primary-hover); }
.prose a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.prose strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.prose em { font-style: italic; }
.prose small {
  font-size: var(--text-size-caption);
  color: var(--text-tertiary);
}
.prose abbr[title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--color-primary);
  text-underline-offset: var(--space-1);
  cursor: help;
}
.prose sup { font-size: 0.7em; vertical-align: baseline; position: relative; top: -0.5em; line-height: 0; }
.prose sub { font-size: 0.7em; vertical-align: baseline; position: relative; top: 0.3em;  line-height: 0; }
.prose del {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--error);
}
.prose ins {
  color: var(--success-text);
  text-decoration: none;
  background: var(--success-bg);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-medium);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ── Mobile Responsive Sweep — fills gaps across the catalog ───────────────
   Components already covered in earlier blocks (btn, card, submission-row,
   breadcrumb, navbar, data-table, grid-toolbar, otp, expand-content, tabs,
   accordion, alert, modal, hero-pills, hero-stats, timeline, verify cards)
   are NOT redeclared here. This sweep fills the remaining gaps.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile (≤639px) ─────────────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* ── Drawer: tighten header/footer padding, keep width=100vw via min() ── */
  .drawer-header,
  .drawer-footer {
    padding: var(--space-3) var(--space-4);
  }
  .drawer-body {
    padding: var(--space-4);
  }
  .drawer-footer {
    flex-wrap: wrap;
  }
  .drawer-footer .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* ── Combo panel: escape the 16rem min-width floor on narrow viewports ── */
  .combo-panel {
    min-width: 0;
    max-width: calc(100vw - var(--space-4) * 2);
  }

  /* ── Phone input: swap flag-text layout for flag-only on tight viewports ── */
  .phone-country {
    width: auto;
    min-width: 0;
    padding-inline: var(--space-2_5);
    gap: var(--space-1);
  }
  .phone-country-code {
    font-size: var(--text-size-caption);
  }

  /* ── Hero banner: reduce padding + title scale ─────────────────────────── */
  .hero-banner {
    padding: var(--space-5) var(--space-4);
    gap: var(--space-3);
  }
  .hero-banner-title {
    font-size: var(--text-size-h3);
  }
  .hero-pill-countdown .hero-pill-value {
    font-size: var(--text-size-h2);
  }

  /* ── Portal footer: tighten horizontal padding on small screens ────────── */
  .portal-footer-inner,
  .portal-footer-main,
  .portal-footer-legal,
  .portal-footer-grid {
    padding-inline: var(--space-4);
  }

  /* ── Tooltip: constrain width, allow wrap ──────────────────────────────── */
  .tooltip {
    max-width: calc(100vw - var(--space-4) * 2);
    white-space: normal;
  }

  /* ── Tree: reduce indent per level ─────────────────────────────────────── */
  .tree-children {
    padding-inline-start: var(--space-4);
  }
  .tree-row {
    padding: var(--space-1_5) var(--space-2);
  }

  /* ── Sidenav (portal sidenav — distinct from catalog .tpl-sidebar) ─────── */
  .sidenav {
    width: 100%;
    max-width: 100vw;
  }

  /* ── Checkbox / Radio: touch target hit area around control ────────────── */
  .checkbox-wrap,
  .radio-wrap {
    min-height: var(--size-touch-min);
  }

  /* ── Search input wrap: full-width ─────────────────────────────────────── */
  .input-search-wrap {
    width: 100%;
  }

  /* ── Form group: tighter gap ───────────────────────────────────────────── */
  .form-group {
    margin-bottom: var(--space-3);
  }

  /* ── Avatar cluster: allow wrap so stacks don't overflow ───────────────── */
  .avatar-stack,
  .avatar-cluster {
    flex-wrap: wrap;
  }

  /* ── Navbar (portal) user-info already hidden; tighten link padding ────── */
  .navbar {
    padding-inline: var(--space-4);
    gap: var(--space-2);
  }
  .navbar-link {
    padding: var(--space-1_5) var(--space-2);
  }

  /* ── Breadcrumb inside navbar: shrink gap ──────────────────────────────── */
  .breadcrumb {
    gap: var(--space-1);
  }
  .breadcrumb-item,
  .breadcrumb-sep {
    font-size: var(--text-size-caption);
  }

  /* ── Password requirement list: 1-column stack ─────────────────────────── */
  .password-requirements,
  .requirement-list {
    grid-template-columns: 1fr;
  }

  /* ── Validation states demo grid: stack ────────────────────────────────── */
  .validation-states-grid {
    grid-template-columns: 1fr;
  }

  /* ── Currency demo grid: 1-col so AED samples don't shrink to illegible ── */
  .currency-grid,
  .currency-samples {
    grid-template-columns: 1fr;
  }

  /* ── Verification flow: action rows stack ──────────────────────────────── */
  .verify-step-actions {
    flex-direction: column;
  }
  .verify-step-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Progress list header wraps ────────────────────────────────────────── */
  .progress-header {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  /* ── Toggle (switch) + label stays inline but allows wrap ──────────────── */
  .toggle-row {
    flex-wrap: wrap;
  }
}

/* ── Tablet polish (640px–1023px) ────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Hero: slight padding reduction */
  .hero-banner {
    padding: var(--space-6);
  }
  /* Drawer-lg caps at 640 on tablet — already handled by min(640px,100vw) */
  /* Combo panel stays at min-width 16rem — viewport is wide enough */
}


/* ═══════════════════════════════════════════════════════════════════════════
   DATA TABLE — Cards-from-Table Phone Variant (.data-table-cards)
   ═══════════════════════════════════════════════════════════════════════════
   A data-table that switches tbody into a stack of cards at ≤479px, keeps
   horizontal-scroll behavior at 480–1023px, and renders as a normal table
   at ≥1024px. The escape from the default `min-width: 700px` floor lives
   in the main responsive block via `.data-table:not(.data-table-cards)`.

   Markup:
     <table class="data-table data-table-cards">
       <thead>…column headers…</thead>
       <tbody>
         <tr data-card-title="Line item 001">
           <td data-label="Department">Tech Production</td>
           <td data-label="Qty">2</td>
           …
           <td class="data-table-cards-action">
             <button class="btn btn-primary btn-sm">Edit</button>
           </td>
         </tr>
       </tbody>
     </table>

   Behavior (≤479px):
     - `thead` is visually hidden but remains in the a11y tree (screen readers
       still announce column headers via implicit row/column association).
     - Each `tr` paints as a block card using `--spacing-card-padding`.
     - The `data-card-title` attribute becomes the card header.
     - Each `td` renders as a label-value row. `data-label` → leading label,
       the cell content → trailing value. RTL-safe (logical properties).
     - A cell with `.data-table-cards-action` becomes a full-width action
       anchored at the bottom of the card.
     - Compatible with `.data-table-compact` (cards inherit tighter padding).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  /* Visually hide headers; keep them in the a11y tree. */
  .data-table-cards > thead {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Tbody stacks its rows vertically. */
  .data-table-cards,
  .data-table-cards > tbody,
  .data-table-cards > tbody > tr {
    display: block;
    width: 100%;
  }

  /* Each row = a card. */
  .data-table-cards > tbody > tr {
    padding: var(--spacing-card-padding);
    margin-bottom: var(--space-3);
    background-color: var(--bg-card);
    border: var(--space-px) solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }

  /* Card header driven by `data-card-title` attr. Hidden if no attr given
     so rows without a title don't render an empty header line. */
  .data-table-cards > tbody > tr[data-card-title]::before {
    content: attr(data-card-title);
    display: block;
    font-size: var(--text-size-subtitle);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: var(--space-px) solid var(--border-subtle);
  }

  /* Each td = a label-value row. */
  .data-table-cards > tbody > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1_5) 0;
    border: none;
    text-align: start;
    min-width: 0;
  }

  /* Leading label from `data-label`. */
  .data-table-cards > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--text-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-overline);
  }

  /* Value side: allow truncation so long content doesn't blow out the card. */
  .data-table-cards > tbody > tr > td[data-label] > * {
    min-width: 0;
  }

  /* Designated action cell spans full width at the card's bottom. */
  .data-table-cards > tbody > tr > td.data-table-cards-action {
    display: block;
    padding: var(--space-3) 0 0;
    margin-top: var(--space-2);
    border-top: var(--space-px) solid var(--border-subtle);
  }
  .data-table-cards > tbody > tr > td.data-table-cards-action::before {
    content: none;   /* no leading label for the action cell */
  }
  .data-table-cards > tbody > tr > td.data-table-cards-action .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hide empty cells so sparse columns don't leave ghost rows. */
  .data-table-cards > tbody > tr > td:empty {
    display: none;
  }

  /* Compact variant: tighter row spacing inside each card. */
  .data-table-cards.data-table-compact > tbody > tr > td {
    padding: var(--space-1) 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER-QUERY REFERENCE — .card-responsive demonstrates @container
   ═══════════════════════════════════════════════════════════════════════════
   Reference recipe showing how DS components can opt into container queries
   so layout responds to its PARENT'S width (not the viewport). Consumers
   write `<div class="card-responsive">…</div>` inside any sized parent and
   the card auto-switches between stacked and side-by-side at container
   width 400px.

   This is a recipe, not a replacement for .card. Use when a card lives in
   a layout where viewport-based @media doesn't reflect the real available
   width (sidebars, split panes, embedded previews).
   ═══════════════════════════════════════════════════════════════════════════ */

.card-responsive {
  container-type: inline-size;
  container-name: card-responsive;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--spacing-card-padding);
  background-color: var(--bg-card);
  border: var(--space-px) solid var(--border-default);
  border-radius: var(--radius-md);
}

@container card-responsive (min-width: 400px) {
  .card-responsive {
    flex-direction: row;
    align-items: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STEPPER — multi-step flow progress indicator
   ═══════════════════════════════════════════════════════════════════════════
   Markup (consumer supplies data-* attributes on the <ol> root for phone mode):

     <ol class="stepper"
         data-active-step="2"
         data-total-steps="4"
         data-active-label="Line items"
         aria-label="RFQ creation">
       <li class="stepper-item is-done">
         <span class="stepper-indicator" aria-hidden="true">
           <svg>…check…</svg>
         </span>
         <span class="stepper-label">Supplier details</span>
       </li>
       <li class="stepper-item is-active" aria-current="step">
         <span class="stepper-indicator" aria-hidden="true">2</span>
         <span class="stepper-label">Line items</span>
       </li>
       <li class="stepper-item">
         <span class="stepper-indicator" aria-hidden="true">3</span>
         <span class="stepper-label">Review</span>
       </li>
       <li class="stepper-item">
         <span class="stepper-indicator" aria-hidden="true">4</span>
         <span class="stepper-label">Submit</span>
       </li>
     </ol>

   Desktop (≥640px): horizontal pills, indicator + label per item, connector
   line between items. `.is-done` = filled success / `.is-active` = filled
   primary / default = outline.

   Phone (≤639px): collapses to a summary header
   ("Step 2 of 4 — Line items") above a compact dot rail. Consumer drives
   the summary via data-* attrs on the <ol>.
   ═══════════════════════════════════════════════════════════════════════════ */

.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
}

.stepper-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  position: relative;
  flex: 0 0 auto;
}

/* Connector line between items (not after the last). */
.stepper-item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: var(--space-8);
  height: var(--space-px);
  background-color: var(--border-default);
  margin-inline-start: var(--space-2);
}

.stepper-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-avatar-sm);  /* 28px */
  height: var(--size-avatar-sm);
  border-radius: var(--radius-full);
  border: var(--space-px) solid var(--border-default);
  background-color: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.stepper-indicator svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

.stepper-label {
  white-space: nowrap;
}

/* ── State: done (completed step) ───────────────────────────────────────── */
.stepper-item.is-done {
  color: var(--text-secondary);
}
.stepper-item.is-done .stepper-indicator {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--color-white, #fff);
}
.stepper-item.is-done:not(:last-child)::after {
  background-color: var(--success);
}

/* ── State: active (current step) ───────────────────────────────────────── */
.stepper-item.is-active {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.stepper-item.is-active .stepper-indicator {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white, #fff);
  box-shadow: var(--focus-ring-subtle);
}

/* ── Focus ring on the active step's indicator when focused programmatically */
.stepper-item:focus-visible .stepper-indicator,
.stepper-item:focus-within .stepper-indicator {
  box-shadow: var(--focus-ring);
}

/* ── Phone mode (≤639px): summary header + compact dot rail ─────────────── */
@media (max-width: 639px) {
  .stepper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1_5);
    row-gap: var(--space-2);
    align-items: center;
    width: 100%;
  }

  /* Summary header generated from data-* attrs on the <ol>. Full-width first
     line (flex-basis:100%) + order:-1 forces it above the dots regardless
     of source order. */
  .stepper::before {
    content: "Step " attr(data-active-step) " of " attr(data-total-steps)
             " — " attr(data-active-label);
    flex-basis: 100%;
    order: -1;
    font-size: var(--text-size-subtitle);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.3;
  }

  /* Dot rail — items shrink to dots, labels hidden. */
  .stepper-item {
    display: inline-flex;
    gap: 0;
    font-size: 0;
    margin: 0;
  }

  .stepper-label {
    display: none;
  }

  .stepper-indicator {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--border-default);
    border-color: var(--border-default);
    color: transparent;      /* hide number content */
    font-size: 0;
    box-shadow: none;
  }
  .stepper-indicator svg { display: none; }

  .stepper-item.is-done .stepper-indicator {
    background-color: var(--success);
    border-color: var(--success);
  }
  .stepper-item.is-active .stepper-indicator {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    width: var(--space-3);    /* active dot slightly larger */
    height: var(--space-3);
  }

  /* Connectors are noise on phone — hide. */
  .stepper-item:not(:last-child)::after {
    display: none;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stepper-indicator { transition: none; }
}



/* ============================================================================
   PICKERS — Date / Time / DateTime
   Industry-sized modern pickers replacing the native browser controls.
   Consumers may author markup directly via the classes below, OR keep using
   <input class="input" type="date|time|datetime-local"> — pickers.js auto-
   enhances those into the modern UI while keeping the native input as the
   form-value carrier.

   Numeric contract: SPECS.md §16.
   All values reference tokens — no hardcoded colors / spacing / radii.
   ============================================================================ */

/* ── Picker trigger — looks like .input but with leading icon + chevron ───── */
.picker {
  position: relative;
  display: block;
}

/* SVG icon emitted by pickers.js — sized via DS icon token, never inline. */
.picker-svg-icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: 0 0 auto;
}

.picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2_5);
  width: 100%;
  min-height: var(--input-height, 40px);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-size-subtitle);
  font-weight: var(--input-text-weight, 450);
  line-height: 1.5;
  color: var(--input-text, var(--text-primary));
  background-color: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 8px);
  box-shadow: var(--shadow-input);
  transition: var(--input-transition, all var(--duration-fast) cubic-bezier(0.4, 0, 0.2, 1));
  cursor: pointer;
  text-align: start;
  appearance: none;
  -webkit-appearance: none;
}

.picker-trigger:hover:not(:disabled) {
  border-color: var(--input-border-hover);
}

.picker-trigger:focus-visible,
.picker-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--input-border-focus);
  background-color: var(--input-bg-focus, var(--input-bg));
  box-shadow: var(--focus-ring-subtle);
}

.picker-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-inset);
}

.picker-trigger-icon {
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.picker-trigger-value {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-trigger-value.is-placeholder {
  color: var(--input-placeholder);
  font-style: var(--input-placeholder-style, italic);
  font-weight: var(--font-weight-regular);
}

.picker-trigger-chevron {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) ease;
}

.picker-trigger[aria-expanded="true"] .picker-trigger-chevron {
  transform: rotate(180deg);
}

/* Compact modifier (matches .input-sm — 36px) */
.picker-sm .picker-trigger {
  min-height: var(--input-height-sm, 2.25rem);
  padding: var(--space-1_5) var(--space-3);
  font-size: var(--text-size-body-sm);
}

/* ── Picker panel — floating popover ──────────────────────────────────────── */
.picker-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--picker-panel-z);
  min-width: var(--picker-panel-min-w);
  background: var(--picker-panel-bg);
  border: var(--border-width-thin, 1px) solid var(--picker-panel-border);
  border-radius: var(--picker-panel-radius);
  box-shadow: var(--picker-panel-shadow);
  padding: var(--picker-panel-pad);
  display: none;
  transform-origin: top left;
}

[dir="rtl"] .picker-panel { transform-origin: top right; }

.picker-panel.is-open {
  display: block;
  animation: picker-pop-in var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.picker-panel-end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

@keyframes picker-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Datetime panel — calendar + time side-by-side */
.picker-panel-dt {
  display: none;
}
.picker-panel-dt.is-open {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  min-width: var(--picker-panel-max-w);
}

/* ── Calendar grid ────────────────────────────────────────────────────────── */
.picker-cal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 16rem;          /* 256px */
}

.picker-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1);
}

.picker-cal-title {
  font-family: var(--font-heading);
  font-size: var(--picker-title-size);
  font-weight: var(--picker-title-weight);
  color: var(--picker-title-color);
  letter-spacing: 0.2px;
}

.picker-cal-nav {
  display: inline-flex;
  gap: var(--space-0_5);
}

.picker-cal-nav-btn {
  width: var(--picker-nav-size);
  height: var(--picker-nav-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  color: var(--picker-nav-color);
  background: transparent;
  transition: all var(--duration-fast) ease;
}

.picker-cal-nav-btn:hover {
  background: var(--picker-nav-hover-bg);
  color: var(--picker-nav-hover-color);
}

.picker-cal-nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

.picker-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--picker-day-size));
  gap: var(--space-0_5);
  justify-content: center;
}

.picker-cal-dow {
  width: var(--picker-day-size);
  height: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--picker-dow-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--picker-dow-tracking);
  text-transform: uppercase;
  color: var(--picker-dow-color);
}

.picker-cal-day {
  width: var(--picker-day-size);
  height: var(--picker-day-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--picker-day-radius);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--picker-day-text);
  background: transparent;
  font-variant-numeric: tabular-nums;
  transition: all var(--duration-fast) ease;
}

.picker-cal-day:hover:not([disabled]):not([aria-selected="true"]) {
  background: var(--picker-day-hover-bg);
  color: var(--text-primary);
}

.picker-cal-day:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

.picker-cal-day[data-muted] {
  color: var(--picker-day-muted);
  opacity: 0.5;
}

.picker-cal-day[data-today] {
  box-shadow: var(--picker-day-today-ring);
  color: var(--picker-day-today-color);
  font-weight: var(--font-weight-bold);
}

.picker-cal-day[aria-selected="true"] {
  background: var(--picker-day-selected-bg);
  color: var(--picker-day-selected-text);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--picker-day-selected-shadow);
}

.picker-cal-day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Preset rail (left side of date picker) ───────────────────────────────── */
.picker-presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
  width: var(--picker-preset-rail-w);
  padding-inline-end: var(--space-2);
  border-inline-end: var(--border-width-thin, 1px) solid var(--border-subtle);
}

.picker-preset {
  text-align: start;
  padding: var(--space-1_5) var(--space-2);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--picker-preset-bg);
  transition: all var(--duration-fast) ease;
}

.picker-preset:hover {
  background: var(--picker-preset-hover-bg);
  color: var(--text-primary);
}

.picker-preset[aria-current="true"] {
  background: var(--picker-preset-active-bg);
  color: var(--picker-preset-active-color);
  font-weight: var(--font-weight-semibold);
}

.picker-preset:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

/* Date picker with presets — two-column layout */
.picker-panel-with-presets.is-open {
  display: grid;
  grid-template-columns: var(--picker-preset-rail-w) 1fr;
  gap: var(--space-3);
  min-width: calc(var(--picker-panel-min-w) + var(--picker-preset-rail-w));
}

/* ── Picker footer (Clear / Apply etc.) ──────────────────────────────────── */
.picker-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin, 1px) solid var(--picker-footer-border);
  margin-top: var(--space-1);
}

/* ── Time picker — stepper layout ─────────────────────────────────────────── */
.picker-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.picker-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.picker-time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.picker-time-step {
  width: var(--picker-time-digit-w);
  height: var(--picker-time-step-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--picker-time-step-color);
  background: transparent;
  border-radius: var(--radius-xs);
  transition: all var(--duration-fast) ease;
}

.picker-time-step:hover {
  background: var(--bg-section);
  color: var(--picker-time-step-hover);
}

.picker-time-step:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

.picker-time-digit {
  width: var(--picker-time-digit-w);
  height: var(--picker-time-digit-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--picker-time-digit-size);
  font-weight: var(--picker-time-digit-weight);
  color: var(--picker-time-digit-color);
  background: var(--picker-time-digit-bg);
  border-radius: var(--picker-time-digit-radius);
  font-variant-numeric: tabular-nums;
}

.picker-time-colon {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--picker-time-digit-size);
  font-weight: var(--picker-time-digit-weight);
  color: var(--picker-time-colon-color);
  align-self: center;
  padding-block: var(--space-6);   /* visually centers between digits */
}

.picker-ampm {
  display: inline-flex;
  background: var(--picker-ampm-bg);
  border-radius: var(--radius-full);
  padding: var(--space-0_5);
}

.picker-ampm-btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  color: var(--picker-ampm-color);
  background: transparent;
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) ease;
}

.picker-ampm-btn[aria-pressed="true"] {
  background: var(--picker-ampm-active-bg);
  color: var(--picker-ampm-active-color);
  box-shadow: var(--picker-ampm-active-shadow);
}

.picker-ampm-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

/* ── Native input replacement
      pickers.js hides the original native input via this class so the new
      .picker-trigger button is the only visible control. The native input
      stays in the DOM as the form-value carrier. */
.picker-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .picker-panel.is-open,
  .picker-panel-dt.is-open { animation: none; }
  .picker-cal-day,
  .picker-preset,
  .picker-cal-nav-btn,
  .picker-time-step { transition: none; }
}

/* ============================================================================
   RANGE PICKERS — Date-range + DateTime-range
   Twin-calendar layout: start on the left, end on the right (RTL-aware).
   Days between start and end render with .is-in-range. Hovering the end
   side previews the span via .is-preview.

   Numeric contract: SPECS.md §16.
   ============================================================================ */

/* The trigger reads two values separated by an en-dash arrow */
.picker-range-trigger {
  /* Inherits .picker-trigger; only the value layout differs */
}
.picker-range-trigger .picker-trigger-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.picker-range-arrow {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--text-size-body-sm);
}

/* Twin-calendar panel — two months side-by-side */
.picker-panel-range.is-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  min-width: calc(var(--picker-panel-min-w) * 2 + var(--space-4));
}

.picker-panel-range .picker-cal + .picker-cal {
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width-thin, 1px) solid var(--border-subtle);
}

/* In-range styling — soft background for days between start & end */
.picker-cal-day.is-in-range:not([aria-selected="true"]):not([data-muted]) {
  background: var(--picker-preset-active-bg);
  color: var(--picker-preset-active-color);
  border-radius: 0;
}

/* Edges of the range — keep selected day round on the outer side, square on the inner */
.picker-cal-day.is-range-start[aria-selected="true"] {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.picker-cal-day.is-range-end[aria-selected="true"] {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
[dir="rtl"] .picker-cal-day.is-range-start[aria-selected="true"] {
  border-start-end-radius: var(--picker-day-radius);
  border-end-end-radius: var(--picker-day-radius);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
[dir="rtl"] .picker-cal-day.is-range-end[aria-selected="true"] {
  border-start-start-radius: var(--picker-day-radius);
  border-end-start-radius: var(--picker-day-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Hover preview while picking the end-of-range */
.picker-cal-day.is-preview:not([aria-selected="true"]):not([data-muted]) {
  background: var(--picker-day-hover-bg);
  color: var(--text-primary);
}

/* DateTime-range: each calendar gets a time stepper below it */
.picker-range-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.picker-range-side-label {
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--space-1);
}
.picker-range-side .picker-time {
  border-top: var(--border-width-thin, 1px) solid var(--border-subtle);
  padding-top: var(--space-3);
}

/* Range footer — Cancel/Apply pair */
.picker-range-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin, 1px) solid var(--picker-footer-border);
  margin-top: var(--space-1);
}
.picker-range-summary {
  margin-inline-end: auto;
  font-size: var(--text-size-body-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   CONTROLS — Number / File / Slider / Color / Search-clear / Tooltip
   Modern replacements for the remaining native browser chrome.
   Auto-enhanced by controls.js; can also be authored directly.
   Token-pure, theme-parity (light/dark/oled), RTL-aware.
   Numeric contract: SPECS.md §17–§22.
   ============================================================================ */

/* ── 17. NUMBER INPUT — .numberinput ───────────────────────────────────── */
.numberinput {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  background: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 8px);
  overflow: hidden;
  transition: var(--input-transition, all var(--duration-fast) ease);
}
.numberinput:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring-subtle);
  background: var(--input-bg-focus, var(--input-bg));
}
.numberinput input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0 var(--spacing-input-x, var(--space-3));
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--input-text);
  min-height: var(--input-height, 40px);
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.numberinput input::-webkit-outer-spin-button,
.numberinput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numberinput-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--numberinput-suffix-color);
  border-inline-start: var(--border-width-thin, 1px) solid var(--input-border);
  background: var(--numberinput-suffix-bg);
}
.numberinput-steps {
  display: flex;
  flex-direction: column;
  width: var(--numberinput-steps-w);
  flex: 0 0 var(--numberinput-steps-w);
  border-inline-start: var(--border-width-thin, 1px) solid var(--input-border);
}
.numberinput-step {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--numberinput-step-color);
  background: transparent;
  transition: all var(--duration-fast) ease;
}
.numberinput-step + .numberinput-step {
  border-top: var(--border-width-thin, 1px) solid var(--input-border);
}
.numberinput-step:hover {
  background: var(--numberinput-step-hover-bg);
  color: var(--numberinput-step-hover-color);
}
.numberinput-step:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

/* Compact size — matches .input-sm */
.numberinput-sm input { min-height: var(--input-height-sm, 2.25rem); }

/* ── 18. FILE INPUT — .fileinput ───────────────────────────────────────── */
.fileinput {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1_5);
  padding: var(--space-4);
  min-height: var(--fileinput-min-h);
  background: var(--fileinput-bg);
  border: var(--fileinput-border-width) dashed var(--fileinput-border);
  border-radius: var(--fileinput-radius);
  transition: all var(--duration-fast) ease;
  cursor: pointer;
  text-align: center;
}
.fileinput:hover {
  background: var(--fileinput-hover-bg);
  border-color: var(--fileinput-hover-border);
}
.fileinput[data-drag="true"] {
  background: var(--fileinput-drag-bg);
  border-color: var(--fileinput-drag-border);
  border-style: solid;
}
.fileinput input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.fileinput-icon {
  color: var(--fileinput-icon-color);
}
.fileinput[data-drag="true"] .fileinput-icon {
  color: var(--fileinput-icon-drag-color);
}
.fileinput-title {
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--fileinput-title-color);
}
.fileinput-hint {
  font-size: var(--text-size-xs);
  color: var(--fileinput-hint-color);
}
.fileinput-cta {
  color: var(--fileinput-cta-color);
  font-weight: var(--font-weight-semibold);
}
.fileinput:focus-within {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

/* Selected file row */
.fileinput-selected {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--fileinput-selected-bg);
  border: var(--border-width-thin, 1px) solid var(--fileinput-selected-border);
  border-radius: var(--fileinput-radius);
}
.fileinput-selected-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fileinput-selected-meta {
  font-size: var(--text-size-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.fileinput-remove {
  padding: var(--space-1);
  color: var(--text-tertiary);
  background: transparent;
  border-radius: var(--radius-md, 6px);
  transition: all var(--duration-fast) ease;
}
.fileinput-remove:hover {
  background: var(--fileinput-remove-hover-bg);
  color: var(--fileinput-remove-hover-color);
}
.fileinput-remove:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

/* ── 19. SLIDER — .slider ──────────────────────────────────────────────── */
.slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  outline: none;
  padding: 0;
}
.slider::-webkit-slider-runnable-track {
  height: var(--slider-track-h);
  border-radius: var(--radius-full);
  background: linear-gradient(to right,
    var(--slider-fill-bg) 0%,
    var(--slider-fill-bg) var(--slider-fill, 50%),
    var(--slider-track-bg) var(--slider-fill, 50%),
    var(--slider-track-bg) 100%);
  box-shadow: inset 0 0 0 1px var(--slider-track-border);
}
.slider::-moz-range-track {
  height: var(--slider-track-h);
  background: var(--slider-track-bg);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--slider-track-border);
}
.slider::-moz-range-progress {
  height: var(--slider-track-h);
  background: var(--slider-fill-bg);
  border-radius: var(--radius-full);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--slider-thumb-bg);
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
  border-radius: 50%;
  margin-top: calc((var(--slider-track-h) - var(--slider-thumb-size)) / 2);
  cursor: pointer;
  box-shadow: var(--slider-thumb-shadow);
  transition: transform var(--duration-fast) ease;
}
.slider::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--slider-thumb-bg);
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--slider-thumb-shadow);
}
.slider:hover::-webkit-slider-thumb { transform: scale(var(--slider-thumb-hover-scale)); }
.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring);
}
.slider:disabled { opacity: 0.5; cursor: not-allowed; }

.slider-ticks {
  display: flex;
  justify-content: space-between;
  padding-inline: 9px;
  font-size: var(--slider-tick-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.4px;
  color: var(--slider-tick-color);
  font-variant-numeric: tabular-nums;
}

/* Dual-thumb range slider */
.slider-range {
  position: relative;
  height: 22px;
  padding: 0 9px;
}
.slider-range-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 9px;
  right: 9px;
  height: var(--slider-track-h);
  background: var(--slider-track-bg);
  box-shadow: inset 0 0 0 1px var(--slider-track-border);
  border-radius: var(--radius-full);
}
.slider-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--slider-fill-bg);
  border-radius: var(--radius-full);
}
.slider-range input[type="range"] {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  height: 22px;
  padding: 0;
}
.slider-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--slider-thumb-bg);
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  margin-top: calc((var(--slider-track-h) - var(--slider-thumb-size)) / 2);
  box-shadow: var(--slider-thumb-shadow);
}
.slider-range input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--slider-thumb-bg);
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-border);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: var(--slider-thumb-shadow);
}

/* ── 20. COLOR INPUT — .colorinput ─────────────────────────────────────── */
.colorinput {
  position: relative;
  width: 100%;
}
.colorinput-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  background: var(--input-bg);
  border: var(--input-border-width, 1px) solid var(--input-border);
  border-radius: var(--input-radius, 8px);
  min-height: var(--input-height, 40px);
  cursor: pointer;
  transition: var(--input-transition, all var(--duration-fast) ease);
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: start;
}
.colorinput-trigger:hover { border-color: var(--input-border-hover); }
.colorinput-trigger:focus-visible,
.colorinput[data-open="true"] .colorinput-trigger {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring-subtle);
}
.colorinput-swatch {
  width: var(--colorinput-swatch-size);
  height: var(--colorinput-swatch-size);
  border-radius: var(--colorinput-swatch-radius);
  box-shadow: var(--colorinput-swatch-ring);
  flex: 0 0 auto;
}
.colorinput-hex {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.colorinput-chevron {
  margin-inline-start: auto;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) ease;
}
.colorinput[data-open="true"] .colorinput-chevron { transform: rotate(180deg); }

.colorinput-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--picker-panel-z, 200);
  width: var(--colorinput-panel-w);
  padding: var(--space-3);
  background: var(--picker-panel-bg);
  border: var(--border-width-thin, 1px) solid var(--picker-panel-border);
  border-radius: var(--picker-panel-radius);
  box-shadow: var(--picker-panel-shadow);
  display: none;
}
.colorinput[data-open="true"] .colorinput-panel { display: block; }
.colorinput-section-label {
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.colorinput-swatches {
  display: grid;
  grid-template-columns: repeat(var(--colorinput-grid-cols), 1fr);
  gap: var(--colorinput-grid-gap);
  margin-bottom: var(--space-3);
}
.colorinput-swatch-btn {
  aspect-ratio: 1 / 1;
  border-radius: var(--colorinput-swatch-radius);
  cursor: pointer;
  transition: transform var(--duration-fast) ease;
  box-shadow: var(--colorinput-swatch-ring);
}
.colorinput-swatch-btn:hover { transform: scale(1.08); }
.colorinput-swatch-btn[aria-pressed="true"] { box-shadow: var(--colorinput-active-ring); }
.colorinput-swatch-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

.colorinput-hex-input {
  width: 100%;
  padding: var(--space-2);
  background: var(--input-bg);
  border: var(--border-width-thin, 1px) solid var(--input-border);
  border-radius: var(--radius-md, 6px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--text-size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  outline: none;
}
.colorinput-hex-input:focus-visible {
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring-subtle);
}

/* ── 21. SEARCH CLEAR — .input-search-clear (extends existing wrap) ──── */
.input-search-clear {
  margin-inline-end: var(--space-2);
  width: var(--search-clear-size);
  height: var(--search-clear-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--search-clear-color);
  background: transparent;
  border-radius: 50%;
  transition: all var(--duration-fast) ease;
  opacity: 0;
  pointer-events: none;
}
.input-search-wrap[data-has-value="true"] .input-search-clear {
  opacity: 1;
  pointer-events: auto;
}
.input-search-clear:hover {
  background: var(--search-clear-hover-bg);
  color: var(--search-clear-hover-color);
}
.input-search-clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-subtle);
}

/* ── 22. TOOLTIP — [data-tooltip] pure CSS ─────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--tooltip-offset));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--tooltip-pad);
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  font-size: var(--tooltip-font-size);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  border-radius: var(--tooltip-radius);
  white-space: nowrap;
  max-width: var(--tooltip-max-w);
  box-shadow: var(--tooltip-shadow);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--tooltip-transition-dur) ease,
    transform var(--tooltip-transition-dur) ease;
  z-index: 300;
}
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + var(--tooltip-offset) - var(--tooltip-arrow-size));
  left: 50%;
  transform: translateX(-50%);
  border: var(--tooltip-arrow-size) solid transparent;
  border-top-color: var(--tooltip-bg);
  opacity: 0;
  transition: opacity var(--tooltip-transition-dur) ease;
  z-index: 301;
}
/* Tooltip reveal — keyboard reveal covered by `:focus-within` (works for both
   the tooltip target itself and any focusable descendant). The focus ring
   itself lives on the target component (.btn, .input, etc.), not here. */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-within::after,
[data-tooltip]:focus-within::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Placement variants — opt-in via data-tooltip-placement="bottom|start|end" */
[data-tooltip-placement="bottom"]::after {
  bottom: auto;
  top: calc(100% + var(--tooltip-offset));
}
[data-tooltip-placement="bottom"]::before {
  bottom: auto;
  top: calc(100% + var(--tooltip-offset) - var(--tooltip-arrow-size));
  border-top-color: transparent;
  border-bottom-color: var(--tooltip-bg);
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after, [data-tooltip]::before { transition: none; }
  .slider:hover::-webkit-slider-thumb { transform: none; }
  .colorinput-swatch-btn:hover { transform: none; }
}

/* ── 23. SIGNATURE PAD — .sigpad ───────────────────────────────────────── */
.sigpad {
  display: flex;
  flex-direction: column;
  gap: var(--sigpad-toolbar-gap);
}

/* Drawing surface */
.sigpad-frame {
  position: relative;
  width: 100%;
  min-height: var(--sigpad-min-h);
  background: var(--sigpad-bg);
  border: var(--sigpad-border-width) solid var(--sigpad-border);
  border-radius: var(--sigpad-radius);
  overflow: hidden;
  cursor: crosshair;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}
.sigpad-frame:hover {
  border-color: var(--sigpad-hover-border);
}
.sigpad-frame:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--focus-ring);
}

.sigpad-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--sigpad-ink);   /* resolved ink color — read by signature.js */
  touch-action: none;
}

/* Baseline guide — "sign here" rule with a leading mark */
.sigpad-guide {
  position: absolute;
  inset-inline: var(--sigpad-pad);
  bottom: var(--space-8);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  color: var(--sigpad-baseline-color);
  pointer-events: none;
}
.sigpad-guide-mark {
  font-size: var(--text-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 0.7;
}
.sigpad-guide-line {
  flex: 1;
  border-bottom: 1.5px solid var(--sigpad-guide-color);
}

/* Optional caption beneath the baseline (data-caption) */
.sigpad-caption {
  position: absolute;
  inset-inline: var(--sigpad-pad);
  bottom: var(--space-4);
  font-size: var(--text-size-xs);
  color: var(--sigpad-caption-color);
  pointer-events: none;
}

/* "Sign here" placeholder — shown only while the pad is empty */
.sigpad-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--sigpad-placeholder-color);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}
.sigpad[data-empty] .sigpad-placeholder {
  opacity: 1;
}
.sigpad[data-drawing] .sigpad-placeholder {
  opacity: 0;
}

/* Toolbar — Undo / Clear */
.sigpad-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Visually-hidden live region for screen-reader announcements */
.sigpad-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Error state */
.sigpad[data-invalid] .sigpad-frame {
  border-color: var(--input-error-border);
  box-shadow: var(--focus-ring-error);
}

/* Read-only state — captured signature, not editable */
.sigpad[data-readonly] .sigpad-frame {
  cursor: default;
}
.sigpad[data-readonly] .sigpad-guide,
.sigpad[data-readonly] .sigpad-placeholder,
.sigpad[data-readonly] .sigpad-actions,
.sigpad[data-disabled] .sigpad-actions {
  display: none;
}

/* Disabled state */
.sigpad[data-disabled] .sigpad-frame {
  opacity: var(--sigpad-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sigpad-frame,
  .sigpad-placeholder { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Living Background — opt-in animated, brand-tinted gradient field
   ────────────────────────────────────────────────────────────────────────
   Usage:  <body class="bg-living" data-preset="6"> … </body>
     • Opt-in: without `.bg-living` nothing renders.
     • data-preset 1–6; omit → preset 6 (Wash + Grain, the default).
     • Intensity: override --bg-living-intensity (default 0.1 = 10%).
     • Preset 5 (Cursor Spotlight) needs the optional bg-living.js; without
       it, it degrades to a static centred glow.
   Two fixed pseudo-layers paint behind all content (z-index:-1), over the
   page background-color. Decorative only — pointer-events:none.
   Every colour resolves from theme tokens, so it re-themes automatically.
   ════════════════════════════════════════════════════════════════════════ */

/* Shared layer geometry — overscan by 10% so blurred/rotated edges stay off-screen. */
body.bg-living::before,
body.bg-living::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
}

/* ── Preset 1 · Aurora Drift ─────────────────────────────────────────── */
body.bg-living[data-preset="1"]::before {
  background:
    radial-gradient(38% 32% at 20% 18%, color-mix(in srgb, var(--bg-living-c1) calc(70% * var(--bg-living-intensity)), transparent), transparent 70%),
    radial-gradient(42% 36% at 82% 28%, color-mix(in srgb, var(--bg-living-c2) calc(60% * var(--bg-living-intensity)), transparent), transparent 70%),
    radial-gradient(46% 40% at 60% 88%, color-mix(in srgb, var(--bg-living-c3) calc(55% * var(--bg-living-intensity)), transparent), transparent 72%);
  filter: blur(40px);
  animation: bgl-drift 26s ease-in-out infinite alternate;
}
@keyframes bgl-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

/* ── Preset 2 · Ambient Top Glow (breathing) ─────────────────────────── */
body.bg-living[data-preset="2"]::before {
  background: radial-gradient(ellipse 70% 48% at 50% -8%,
    color-mix(in srgb, var(--bg-living-c1) calc(85% * var(--bg-living-intensity)), transparent), transparent 70%);
  animation: bgl-breathe 9s ease-in-out infinite;
}
body.bg-living[data-preset="2"]::after {
  background: radial-gradient(ellipse 40% 30% at 88% 100%,
    color-mix(in srgb, var(--bg-living-c2) calc(45% * var(--bg-living-intensity)), transparent), transparent 70%);
  filter: blur(30px);
  animation: bgl-breathe 11s ease-in-out infinite reverse;
}
@keyframes bgl-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── Preset 3 · Mesh Gradient (slow rotation) ────────────────────────── */
body.bg-living[data-preset="3"]::before {
  background:
    radial-gradient(30% 30% at 12% 20%, color-mix(in srgb, var(--bg-living-c1) calc(75% * var(--bg-living-intensity)), transparent), transparent 60%),
    radial-gradient(34% 34% at 88% 12%, color-mix(in srgb, var(--bg-living-c2) calc(65% * var(--bg-living-intensity)), transparent), transparent 62%),
    radial-gradient(40% 40% at 78% 82%, color-mix(in srgb, var(--bg-living-c3) calc(60% * var(--bg-living-intensity)), transparent), transparent 64%),
    radial-gradient(40% 40% at 18% 90%, color-mix(in srgb, var(--bg-living-c1) calc(55% * var(--bg-living-intensity)), transparent), transparent 64%);
  filter: blur(56px);
  animation: bgl-spin 60s linear infinite;
}
@keyframes bgl-spin {
  to { transform: rotate(360deg) scale(1.4); }
}

/* ── Preset 4 · Corner Beams ─────────────────────────────────────────── */
body.bg-living[data-preset="4"]::before {
  background: conic-gradient(from 200deg at 0% 0%,
    color-mix(in srgb, var(--bg-living-c1) calc(60% * var(--bg-living-intensity)), transparent), transparent 90deg);
  animation: bgl-pulse 8s ease-in-out infinite;
}
body.bg-living[data-preset="4"]::after {
  background: conic-gradient(from 20deg at 100% 100%,
    color-mix(in srgb, var(--bg-living-c2) calc(55% * var(--bg-living-intensity)), transparent), transparent 90deg);
  animation: bgl-pulse 8s ease-in-out infinite 4s;
}
@keyframes bgl-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.95; }
}

/* ── Preset 5 · Cursor Spotlight (interactive — needs bg-living.js) ───── */
body.bg-living[data-preset="5"]::before {
  background: radial-gradient(28% 30% at var(--bg-living-mx, 50%) var(--bg-living-my, 35%),
    color-mix(in srgb, var(--bg-living-c1) calc(80% * var(--bg-living-intensity)), transparent), transparent 65%);
  transition: background 0.18s ease-out;
}
body.bg-living[data-preset="5"]::after {
  background: radial-gradient(34% 30% at 80% 90%,
    color-mix(in srgb, var(--bg-living-c2) calc(35% * var(--bg-living-intensity)), transparent), transparent 70%);
  filter: blur(40px);
}

/* ── Preset 6 · Wash + Grain — DEFAULT (also when data-preset is omitted) */
body.bg-living:not([data-preset])::before,
body.bg-living[data-preset="6"]::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--bg-living-c1) calc(40% * var(--bg-living-intensity)), transparent),
    transparent 45%,
    color-mix(in srgb, var(--bg-living-c2) calc(38% * var(--bg-living-intensity)), transparent));
  animation: bgl-shift 18s ease-in-out infinite alternate;
}
body.bg-living:not([data-preset])::after,
body.bg-living[data-preset="6"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: var(--bg-living-grain-opacity);
}
@keyframes bgl-shift {
  to { transform: translate3d(2%, -2%, 0); }
}

/* Honour reduced-motion — freeze every living-background animation. */
@media (prefers-reduced-motion: reduce) {
  body.bg-living::before,
  body.bg-living::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DWTC DOCUMENT CHASSIS — transactional documents family
   ═══════════════════════════════════════════════════════════════════════════
   Shared layout for printable transactional documents. Members toggle
   conditional regions via modifier classes. Documents render LIGHT THEME ONLY.
   Amounts MUST use <span class="aed"> — never the literal string "AED".
   Page geometry (A4, margins, breaks) lives in print.css.

   Structure:
     <article class="dwtc-doc dwtc-doc--invoice">
       <header class="dwtc-doc__header">…logo + title + reference…</header>
       <section class="dwtc-doc__party">…customer + supplier blocks…</section>
       <section class="dwtc-doc__transaction">…event + dates + refs…</section>
       <table class="data-table dwtc-doc__lines">…line items…</table>
       <section class="dwtc-doc__totals">…totals strip…</section>
       <footer class="dwtc-doc__notes">…bank details OR refund policy…</footer>
       <div class="dwtc-doc__qr" hidden>…reserved: Phase 2 e-invoicing QR…</div>
     </article>
   --------------------------------------------------------------------------- */

.dwtc-doc {
  --dwtc-doc-width: 210mm;            /* A4 portrait page width */
  width: var(--dwtc-doc-width);
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-8);
  background-color: var(--bg-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  line-height: var(--leading-body);
}

.dwtc-doc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width-thin) solid var(--border-default);
}

.dwtc-doc__brand { height: var(--space-10); }
.dwtc-doc__brand img { height: 100%; width: auto; }

.dwtc-doc__heading { text-align: end; }
.dwtc-doc__title {
  font: var(--text-h2);
  color: var(--text-primary);
}
.dwtc-doc__ref {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.dwtc-doc__party,
.dwtc-doc__transaction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.dwtc-doc__field-label {
  color: var(--text-tertiary);
  font-size: var(--text-size-body-sm);
}
.dwtc-doc__field-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Supplier-TRN row is shown on invoices, hidden on receipts. */
.dwtc-doc__supplier-trn { display: none; }
.dwtc-doc--invoice .dwtc-doc__supplier-trn { display: block; }

.dwtc-doc__lines { margin-block: var(--space-6); }

.dwtc-doc__totals {
  display: grid;
  gap: var(--space-1);
  margin-inline-start: auto;
  width: max-content;
  min-width: var(--space-16);
  padding-block: var(--space-4);
}
.dwtc-doc__total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
}
.dwtc-doc__total-row--grand {
  border-top: var(--border-width-thin) solid var(--border-strong);
  padding-top: var(--space-2);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.dwtc-doc__notes {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width-thin) solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--text-size-body-sm);
}

/* Bank-details footer on invoices; refund/substitution policy on receipts. */
.dwtc-doc__bank-details { display: none; }
.dwtc-doc--invoice .dwtc-doc__bank-details { display: block; }
.dwtc-doc__policy { display: none; }
.dwtc-doc--receipt .dwtc-doc__policy { display: block; }

/* Reserved slot for UAE FTA Phase 2 e-invoicing QR (consumer-populated). */
.dwtc-doc__qr {
  margin-top: var(--space-5);
  width: var(--space-16);
  height: var(--space-16);
}