/* ============================================================================
   Brute Info — css/components.css
   Every reusable UI class on the site. Fully themed for light + dark, with
   hover / active / focus-visible / disabled / loading states on everything
   interactive. Copy-pasteable markup for each class lives in SPEC-UI.md.

   Sizing comes from the DENSITY tokens (--control-h, --card-pad, --row-py …),
   never from raw rems, so [data-density="compact"] reflows the whole product.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   .btn + .btn-primary | .btn-secondary | .btn-ghost | .btn-danger | .btn-accent
   sizes: .btn-sm | .btn-lg | .btn-xl ; modifiers: .btn-block .btn-icon .is-loading
   ========================================================================== */
.btn {
  --btn-fg: var(--text);
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-shadow: none;
  --btn-h: var(--control-h);
  --btn-px: var(--control-px);
  --btn-fs: var(--fs-md);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn > svg { width: 1.15em; height: 1.15em; stroke-width: 2; }
.btn:active:not(:disabled):not(.is-loading) { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
  pointer-events: none;
}

/* --- Primary ------------------------------------------------------------ */
.btn-primary {
  --btn-fg: var(--primary-contrast);
  --btn-bg: var(--primary);
  --btn-bd: transparent;
  --btn-shadow: var(--shadow-brand);
  background-image: var(--grad-brand);
}
.btn-primary:hover { --btn-bg: var(--primary-hover); background-image: none; box-shadow: var(--shadow-brand), 0 0 0 1px var(--primary-hover) inset; }
.btn-primary:active:not(:disabled):not(.is-loading) { --btn-bg: var(--primary-active); background-image: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.22); }

/* --- Secondary (outline on surface) ------------------------------------- */
.btn-secondary {
  --btn-fg: var(--text);
  --btn-bg: var(--surface);
  --btn-bd: var(--border-strong);
  --btn-shadow: var(--shadow-xs);
}
.btn-secondary:hover { --btn-bg: var(--surface-2); --btn-bd: var(--primary-border); --btn-fg: var(--primary-soft-text); }
.btn-secondary:active:not(:disabled):not(.is-loading) { --btn-bg: var(--surface-3); box-shadow: inset 0 2px 4px rgba(17,22,44,0.10); }

/* --- Ghost -------------------------------------------------------------- */
.btn-ghost {
  --btn-fg: var(--text-muted);
  --btn-bg: transparent;
  --btn-bd: transparent;
}
.btn-ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); }
.btn-ghost:active:not(:disabled):not(.is-loading) { --btn-bg: var(--surface-3); }

/* --- Danger ------------------------------------------------------------- */
.btn-danger {
  --btn-fg: #fff;
  --btn-bg: var(--danger);
  --btn-bd: transparent;
  --btn-shadow: 0 4px 12px rgba(220, 38, 38, 0.24);
}
:root[data-theme="dark"] .btn-danger { --btn-fg: #2a0808; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger { --btn-fg: #2a0808; } }
.btn-danger:hover { --btn-bg: var(--danger-hover); }
.btn-danger:active:not(:disabled):not(.is-loading) { box-shadow: inset 0 2px 5px rgba(0,0,0,0.24); }

/* --- Accent (amber, for "highlight" CTAs) ------------------------------- */
.btn-accent {
  --btn-fg: var(--accent-contrast);
  --btn-bg: var(--accent);
  --btn-bd: transparent;
  --btn-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
  background-image: var(--grad-accent);
}
.btn-accent:hover { --btn-bg: var(--accent-hover); background-image: none; }
.btn-accent:active:not(:disabled):not(.is-loading) { background-image: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.20); }

/* --- Soft (tinted brand) ------------------------------------------------ */
.btn-soft {
  --btn-fg: var(--primary-soft-text);
  --btn-bg: var(--primary-soft);
  --btn-bd: var(--primary-border);
}
.btn-soft:hover { --btn-bg: var(--primary-soft-hover); }

/* --- Sizes -------------------------------------------------------------- */
.btn-sm { --btn-h: var(--control-h-sm); --btn-px: var(--control-px-sm); --btn-fs: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg { --btn-h: var(--control-h-lg); --btn-px: var(--control-px-lg); --btn-fs: var(--fs-base); border-radius: var(--radius-lg); }
.btn-xl { --btn-h: calc(var(--control-h-lg) + 0.375rem); --btn-px: var(--space-8); --btn-fs: var(--fs-lg); border-radius: var(--radius-lg); }

.btn-block { display: flex; width: 100%; }
.btn-round { border-radius: var(--radius-full); }
.btn-icon { --btn-px: 0; width: var(--btn-h); aspect-ratio: 1; }
.btn-icon > svg { width: 1.25em; height: 1.25em; }

/* --- Loading ------------------------------------------------------------ */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15em;
  height: 1.15em;
  border-radius: var(--radius-full);
  border: 2px solid color-mix(in srgb, var(--btn-fg) 28%, transparent);
  border-top-color: var(--btn-fg);
  animation: bi-spin 640ms linear infinite;
}

@keyframes bi-spin { to { transform: rotate(360deg); } }

/* Standalone spinner */
.spinner {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  border-radius: var(--radius-full);
  border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
  border-top-color: currentColor;
  animation: bi-spin 640ms linear infinite;
}
.spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }

/* Button group */
.btn-group { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }

/* ==========================================================================
   CARD
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-head-py) var(--card-pad);
  border-bottom: 1px solid var(--border-subtle);
}
.card-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.card-sub { font-size: var(--fs-md); color: var(--text-muted); }
.card-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.card-body-tight { padding: var(--card-pad-tight) var(--card-pad); }
.card-foot {
  padding: var(--card-pad-tight) var(--card-pad);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--grad-brand);
  overflow: hidden;
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--primary-border);
  box-shadow: var(--shadow-lg);
}
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: inherit; text-decoration: none; }
/* Full-card click target that keeps inner links usable */
.card-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-flat { box-shadow: none; }
.card-inset { background: var(--surface-inset); }
.card-featured {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-border);
}
.card-featured::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--grad-brand-warm);
}

/* ==========================================================================
   BADGE  (static status pill)
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.35;
  white-space: nowrap;
}
.badge > svg { width: 0.95em; height: 0.95em; stroke-width: 2.2; }
.badge-brand   { background: var(--primary-soft); color: var(--primary-soft-text); border-color: var(--primary-border); }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-soft-text);  border-color: var(--accent-border); }
.badge-success { background: var(--success-soft);  color: var(--success-soft-text);  border-color: var(--success-border); }
.badge-warn    { background: var(--warn-soft);     color: var(--warn-soft-text);     border-color: var(--warn-border); }
.badge-danger  { background: var(--danger-soft);   color: var(--danger-soft-text);   border-color: var(--danger-border); }
.badge-info    { background: var(--info-soft);     color: var(--info-soft-text);     border-color: var(--info-border); }
.badge-neutral { background: var(--surface-2);     color: var(--text-muted);         border-color: var(--border); }
.badge-solid   { background: var(--primary); color: var(--primary-contrast); border-color: transparent; }
.badge-lg      { padding: 0.35rem 0.75rem; font-size: var(--fs-sm); }
.badge-dot::before {
  content: "";
  width: 0.4em; height: 0.4em;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ==========================================================================
   CHIP  (interactive filter / toggle)
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.125rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}
.chip > svg { width: 1em; height: 1em; }
.chip:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); text-decoration: none; }
.chip:active { transform: translateY(1px); }
.chip.is-active,
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-soft-text);
}
.chip-count {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
}
.chip.is-active .chip-count { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-soft-text); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==========================================================================
   TAG  (quiet metadata label)
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
  white-space: nowrap;
}
.tag > svg { width: 0.95em; height: 0.95em; }
.tag-brand { background: var(--primary-soft); color: var(--primary-soft-text); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.field-req { color: var(--danger); font-weight: var(--fw-bold); }
.field-optional { color: var(--text-subtle); font-weight: var(--fw-regular); font-size: var(--fs-sm); }

.field-control { position: relative; display: flex; align-items: center; }

.input {
  width: 100%;
  min-height: calc(var(--control-h) + 0.25rem);
  padding: 0.6875rem var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder { color: var(--text-subtle); opacity: 1; }
.input:hover:not(:disabled):not(:read-only) { border-color: var(--text-subtle); }
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.input:focus-visible { outline: none; }
.input:disabled,
.input[readonly] {
  background: var(--surface-2);
  color: var(--text-subtle);
  cursor: not-allowed;
  box-shadow: none;
}
.input-sm { min-height: var(--control-h-sm); padding: 0.4rem var(--space-3); font-size: var(--fs-md); border-radius: var(--radius-sm); }
.input-lg { min-height: calc(var(--control-h-lg) + 0.125rem); padding: 0.85rem var(--space-5); font-size: var(--fs-lg); border-radius: var(--radius-lg); }

textarea.input { min-height: 7rem; resize: vertical; line-height: var(--lh-base); }

select.input {
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7889' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.15rem;
  cursor: pointer;
}
:root[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4acbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4acbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Leading icon / trailing affix inside .field-control */
.field-icon {
  position: absolute;
  left: var(--space-4);
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  pointer-events: none;
}
.field-icon > svg { width: 1.15rem; height: 1.15rem; }
.field-control:focus-within .field-icon { color: var(--primary); }
.field-control:has(.field-icon) .input { padding-left: calc(var(--space-4) * 2 + 1.15rem); }

.field-affix {
  position: absolute;
  right: var(--space-2);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  background: transparent;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.field-affix:hover { color: var(--text); background: var(--surface-2); }
.field-affix > svg { width: 1.15rem; height: 1.15rem; }
.field-control:has(.field-affix) .input { padding-right: 2.85rem; }

.field-hint { font-size: var(--fs-sm); color: var(--text-subtle); line-height: 1.5; }

.field-error {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--danger);
  line-height: 1.5;
}
.field-error > svg { width: 1em; height: 1em; margin-top: 0.15em; }

/* Error state — set .has-error on .field (or .is-error on .input) */
.field.has-error .input,
.input.is-error,
.input[aria-invalid="true"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}
.field.has-error .input:focus,
.input.is-error:focus,
.input[aria-invalid="true"]:focus { box-shadow: var(--ring-danger); border-color: var(--danger); }
.field.has-error .field-error { display: flex; }
.field.has-error .field-icon { color: var(--danger); }

/* Success state */
.field.is-valid .input { border-color: var(--success); }

/* Checkbox + radio */
.checkbox, .radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.5;
}
.checkbox input, .radio input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.14rem;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.checkbox input { border-radius: var(--radius-xs); }
.radio input { border-radius: var(--radius-full); }
.checkbox input:hover, .radio input:hover { border-color: var(--primary); }
.checkbox input:checked, .radio input:checked { background-color: var(--primary); border-color: var(--primary); }
.checkbox input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.8rem;
  background-position: center;
  background-repeat: no-repeat;
}
.radio input:checked { box-shadow: inset 0 0 0 3.5px var(--surface); }
.checkbox input:focus-visible, .radio input:focus-visible { outline: none; box-shadow: var(--ring); }

/* Form layout helpers */
.form { display: flex; flex-direction: column; gap: var(--field-gap); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.form-divider::before,
.form-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ==========================================================================
   ALERT
   ========================================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.alert-icon { flex: 0 0 auto; display: grid; place-items: center; margin-top: 0.1rem; }
.alert-icon > svg { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.alert-content { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.alert-title { font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: var(--tracking-tight); }
.alert-body { color: inherit; opacity: 0.92; }
.alert-close { flex: 0 0 auto; color: inherit; opacity: 0.6; }
.alert-close:hover { opacity: 1; }
.alert-close > svg { width: 1rem; height: 1rem; }

.alert-info    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info-soft-text); }
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-soft-text); }
.alert-warn    { background: var(--warn-soft);    border-color: var(--warn-border);    color: var(--warn-soft-text); }
.alert-error   { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger-soft-text); }
.alert-brand   { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-soft-text); }
.alert-info .alert-icon,
.alert-success .alert-icon,
.alert-warn .alert-icon,
.alert-error .alert-icon,
.alert-brand .alert-icon { color: currentColor; }

/* An alert used as an aria-live region should collapse when empty */
.alert:empty { display: none; }

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  overflow-y: auto;
}
.modal-backdrop.is-open { opacity: 1; }

.modal {
  width: 100%;
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-standard);
}
.modal-backdrop.is-open .modal { transform: none; opacity: 1; }
.modal-sm { max-width: 24rem; }
.modal-lg { max-width: 44rem; }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-head-py) var(--card-pad);
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.modal-body { padding: var(--card-pad); color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-body > p { line-height: var(--lh-relaxed); }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--card-pad-tight) var(--card-pad);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.modal-close {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-close > svg { width: 1.15rem; height: 1.15rem; }

@media (max-width: 560px) {
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
}

/* ==========================================================================
   SKELETON
   ========================================================================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
      transparent 0%,
      var(--skeleton-shine) 50%,
      transparent 100%);
  animation: bi-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes bi-shimmer { to { transform: translateX(100%); } }

.skeleton-text { height: 0.8rem; border-radius: var(--radius-full); margin-block: 0.32rem; }
.skeleton-text.w-90 { width: 90%; } .skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-60 { width: 60%; } .skeleton-text.w-40 { width: 40%; }
.skeleton-title { height: 1.4rem; width: 60%; border-radius: var(--radius-sm); }
.skeleton-block { height: 9rem; border-radius: var(--radius-lg); }
.skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); }
.skeleton-btn { height: 2.625rem; width: 8rem; border-radius: var(--radius-md); }

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.progress {
  position: relative;
  width: 100%;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--grad-brand);
  transition: width var(--dur-slow) var(--ease-out);
}
.progress-bar.is-complete { background: linear-gradient(135deg, var(--green-400), var(--green-600)); }
.progress-xs { height: 0.25rem; }
.progress-sm { height: 0.375rem; }
.progress-lg { height: 0.75rem; }
.progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.progress-label { font-weight: var(--fw-semibold); color: var(--text); }
.progress-value { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--primary); }

/* Circular progress: set --pct (0-100) inline */
.progress-ring {
  --pct: 0;
  --size: 3.5rem;
  --thick: 5px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--surface-3) 0);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  flex: 0 0 auto;
}
.progress-ring::before {
  content: "";
  position: absolute;
  inset: var(--thick);
  border-radius: inherit;
  background: var(--surface);
}
.progress-ring > span { position: relative; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   AVATAR
   ========================================================================== */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 1.5rem; height: 1.5rem; font-size: var(--fs-2xs); }
.avatar-sm { width: 1.875rem; height: 1.875rem; font-size: var(--fs-xs); }
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--fs-base); }
.avatar-xl { width: 4.5rem; height: 4.5rem; font-size: var(--fs-2xl); }
.avatar-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-border); }
.avatar-stack { display: flex; }
.avatar-stack > .avatar + .avatar { margin-left: -0.6rem; box-shadow: 0 0 0 2px var(--surface); }

/* ==========================================================================
   GRID
   ========================================================================== */
.grid { display: grid; gap: var(--tile-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 17rem), 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
.grid-sidebar-left { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
.gap-sm { gap: var(--space-3); }
.gap-lg { gap: var(--space-8); }
.gap-xl { gap: var(--space-10); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sidebar, .grid-sidebar-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   STAT
   ========================================================================== */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.stat-hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-6);
}
.stat-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.stat-card .stat-value { font-size: var(--fs-2xl); }
.stat-icon {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: var(--space-2);
}
.stat-icon > svg { width: 1.15rem; height: 1.15rem; }

/* ==========================================================================
   TABLE
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.table { width: 100%; font-size: var(--fs-md); border-collapse: collapse; }
.table caption { caption-side: top; text-align: left; padding: var(--card-pad-tight) var(--row-px); color: var(--text-muted); font-size: var(--fs-sm); }
.table th, .table td { padding: var(--row-py) var(--row-px); text-align: left; vertical-align: middle; }
.table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table tbody tr + tr td { border-top: 1px solid var(--border-subtle); }
.table tbody tr:hover td { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { background: var(--surface-2); font-weight: var(--fw-semibold); border-top: 1px solid var(--border); }
.table-plain { border: 0; background: transparent; }
.table-plain .table thead th { background: transparent; }

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tab::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active,
.tab[aria-selected="true"] { color: var(--primary); }
.tab.is-active::after,
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab > svg { width: 1.05em; height: 1.05em; }

.tab-panel { padding-top: var(--space-6); }
.tab-panel[hidden] { display: none; }

/* Pill variant */
.tabs-pill { border-bottom: 0; gap: var(--space-1); background: var(--surface-2); padding: var(--space-1); border-radius: var(--radius-lg); display: inline-flex; }
.tabs-pill .tab { border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.tabs-pill .tab::after { display: none; }
.tabs-pill .tab.is-active,
.tabs-pill .tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.accordion-item:has(.accordion-trigger[aria-expanded="true"]) {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-sm);
}
.accordion-heading { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.accordion-trigger:hover { background: var(--surface-2); }
.accordion-index {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.accordion-titles { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.accordion-title { font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.accordion-meta { font-size: var(--fs-sm); color: var(--text-subtle); }
.accordion-chevron {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  color: var(--text-subtle);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-standard);
}
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); color: var(--primary); }
.accordion-panel {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
  color: var(--text-muted);
}
.accordion-panel[hidden] { display: none; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb { font-size: var(--fs-sm); color: var(--text-subtle); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.breadcrumb a { color: var(--text-muted); font-weight: var(--fw-medium); }
.breadcrumb a:hover { color: var(--primary); text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast-stack {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  width: min(23rem, calc(100vw - var(--space-8)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out);
}
.toast.is-open { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateX(12px); }
.toast-icon { flex: 0 0 auto; display: grid; place-items: center; margin-top: 0.08rem; color: var(--text-muted); }
.toast-icon > svg { width: 1.15rem; height: 1.15rem; }
.toast-msg { flex: 1; min-width: 0; }
.toast-close { flex: 0 0 auto; color: var(--text-subtle); }
.toast-close:hover { color: var(--text); }
.toast-close > svg { width: 1rem; height: 1rem; }
.toast-success { border-color: var(--success-border); }
.toast-success .toast-icon { color: var(--success); }
.toast-error { border-color: var(--danger-border); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warn { border-color: var(--warn-border); }
.toast-warn .toast-icon { color: var(--warn); }
.toast-info .toast-icon { color: var(--info); }

@media (max-width: 560px) {
  .toast-stack { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: auto; }
}

/* ==========================================================================
   SUPPORTING PIECES USED ACROSS PAGES
   ========================================================================== */

/* Icon tile — a gradient plate holding a course / feature icon */
.icon-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.icon-tile > svg { width: 1.4rem; height: 1.4rem; }
.icon-tile-sm { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-md); }
.icon-tile-sm > svg { width: 1.1rem; height: 1.1rem; }
.icon-tile-lg { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl); }
.icon-tile-lg > svg { width: 1.75rem; height: 1.75rem; }
.icon-tile-soft { background: var(--primary-soft); color: var(--primary); box-shadow: none; }

/* Meta list — "6 modules · 84 lectures · 32h" */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  list-style: none;
  margin: 0;
  padding: 0;
}
.meta-list > li { display: inline-flex; align-items: center; gap: var(--space-1); }
.meta-list > li + li::before { content: "·"; margin-right: var(--space-2); color: var(--text-subtle); }
.meta-list svg { width: 1em; height: 1em; opacity: 0.75; }

/* Rating */
.rating { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.rating svg { width: 0.95rem; height: 0.95rem; color: var(--accent); fill: var(--accent); stroke: none; }
.rating-count { color: var(--text-subtle); font-weight: var(--fw-regular); }

/* Price block — see SPEC.md "Pricing display rule" */
.price { display: flex; flex-direction: column; gap: var(--space-1); }
.price-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tighter);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.price-gst { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: var(--tracking-normal); }
.price-total { font-size: var(--fs-sm); color: var(--text-subtle); }
.price-sm .price-main { font-size: var(--fs-2xl); }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text-muted);
}
.empty-state .icon-tile { margin-bottom: var(--space-2); }
.empty-state h3 { font-size: var(--fs-xl); color: var(--text); }
.empty-state p { max-width: 42ch; }

/* Check list */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-muted); line-height: 1.55; }
.check-list li > svg {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.16rem;
  color: var(--success);
}

/* Keyboard key */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* Panel — a lightweight boxed region without card chrome */
.panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}
.panel-tight { padding: var(--card-pad-tight); }
.panel-brand { background: var(--primary-soft); border-color: var(--primary-border); }

/* NOTE: .switch lives in the CONTROLS section further down. */

/* Lecture row — shared between course.html and learn.html */
.lecture-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: left;
  background: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lecture-row:hover { background: var(--surface-2); color: var(--text); }
.lecture-row.is-current { background: var(--primary-soft); color: var(--primary-soft-text); }
.lecture-row.is-viewed .lecture-state { color: var(--success); }
.lecture-state { flex: 0 0 auto; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--text-subtle); }
.lecture-state > svg { width: 1.25rem; height: 1.25rem; }
.lecture-name { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecture-time { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Visually hidden live regions still need to exist in the DOM */
.status-region:empty { display: none; }

/* ==========================================================================
 * ==========================================================================
 *   CONTROLS
 * ==========================================================================
 * ========================================================================== */

/* --------------------------------------------------------------------------
   SWITCH / TOGGLE
   <label class="switch"><input type="checkbox"><span class="switch-track"></span>
   <span class="switch-label">Autoplay next lecture</span></label>
   -------------------------------------------------------------------------- */
.switch {
  --sw-w: 2.75rem;
  --sw-h: 1.5rem;
  --sw-pad: 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.switch > input {
  position: absolute;
  opacity: 0;
  width: var(--sw-w);
  height: var(--sw-h);
  margin: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  flex: 0 0 auto;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(17, 22, 44, 0.08);
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--sw-pad);
  width: calc(var(--sw-h) - var(--sw-pad) * 2 - 2px);
  height: calc(var(--sw-h) - var(--sw-pad) * 2 - 2px);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-standard);
}
.switch-label { line-height: 1.35; }
.switch-hint { display: block; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-subtle); }

.switch:hover > input:not(:disabled) + .switch-track { border-color: var(--primary); }
.switch > input:checked + .switch-track {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
}
.switch > input:checked + .switch-track::after {
  transform: translate(calc(var(--sw-w) - var(--sw-h)), -50%);
  background: #fff;
}
.switch > input:active:not(:disabled) + .switch-track::after { width: calc(var(--sw-h) - var(--sw-pad) * 2 + 2px); }
.switch > input:focus-visible + .switch-track { box-shadow: var(--ring); outline: none; }
.switch:has(> input:disabled) { opacity: 0.5; cursor: not-allowed; }
.switch:has(> input:disabled) > input { cursor: not-allowed; }
.switch.is-loading > input { pointer-events: none; }
.switch.is-loading .switch-track::after {
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  background: var(--surface);
  animation: bi-spin 640ms linear infinite;
}
.switch-sm { --sw-w: 2.25rem; --sw-h: 1.25rem; font-size: var(--fs-sm); }
.switch-lg { --sw-w: 3.25rem; --sw-h: 1.75rem; }
/* Label-first layout for settings rows */
.switch-reverse { flex-direction: row-reverse; justify-content: space-between; width: 100%; }

/* --------------------------------------------------------------------------
   RANGE SLIDER — filled track
   The fill is driven by a custom property the page keeps in sync:
     el.style.setProperty('--fill', pct + '%')
   -------------------------------------------------------------------------- */
.range-field { display: flex; flex-direction: column; gap: var(--space-2); }
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.range-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.range-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.range {
  --fill: 0%;
  --track-h: 0.375rem;
  --thumb: 1.125rem;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: none;
}
.range::-webkit-slider-runnable-track {
  height: var(--track-h);
  border-radius: var(--radius-full);
  background:
    linear-gradient(to right, var(--primary) var(--fill), transparent var(--fill)),
    var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(17, 22, 44, 0.10);
}
.range::-moz-range-track {
  height: var(--track-h);
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(17, 22, 44, 0.10);
}
.range::-moz-range-progress {
  height: var(--track-h);
  border-radius: var(--radius-full);
  background: var(--primary);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track-h) - var(--thumb)) / 2);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.range:hover::-moz-range-thumb { transform: scale(1.1); }
.range:active::-webkit-slider-thumb { transform: scale(1.16); }
.range:active::-moz-range-thumb { transform: scale(1.16); }
.range:focus { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.range:focus-visible::-moz-range-thumb { box-shadow: var(--ring); }
.range:disabled { cursor: not-allowed; opacity: 0.5; }
.range:disabled::-webkit-slider-thumb { border-color: var(--border-strong); }
.range:disabled::-moz-range-thumb { border-color: var(--border-strong); }
/* Discrete ticks: <datalist> rendered as a caption row instead */
.range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--space-1) * -1);
  padding-inline: calc(var(--thumb, 1.125rem) / 2);
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   SEGMENTED CONTROL
   <div class="segmented" role="radiogroup" aria-label="Theme">
     <button class="segmented-option" role="radio" aria-checked="true">Light</button> …
   -------------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--control-h) - 0.5rem);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-lg) - 4px);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.segmented-option > svg { width: 1.05em; height: 1.05em; }
.segmented-option:hover:not([aria-checked="true"]):not(:disabled) { color: var(--text); background: var(--surface-3); }
.segmented-option:active:not(:disabled) { transform: translateY(1px); }
.segmented-option[aria-checked="true"],
.segmented-option[aria-selected="true"],
.segmented-option.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.segmented-option:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.segmented-option:disabled { opacity: 0.45; cursor: not-allowed; }
.segmented-block { display: flex; width: 100%; }
.segmented-block .segmented-option { flex: 1; }
.segmented-sm .segmented-option { min-height: calc(var(--control-h-sm) - 0.25rem); padding-inline: var(--space-3); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   SELECT (native, styled)
   -------------------------------------------------------------------------- */
.select-wrap { position: relative; display: block; width: 100%; }
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.22rem;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg);
  pointer-events: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.select-wrap:focus-within::after { border-color: var(--primary); }
.select {
  width: 100%;
  min-height: calc(var(--control-h) + 0.25rem);
  padding: 0.6875rem calc(var(--space-8) + 0.25rem) 0.6875rem var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.select:hover:not(:disabled) { border-color: var(--text-subtle); }
.select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.select:disabled { background: var(--surface-2); color: var(--text-subtle); cursor: not-allowed; box-shadow: none; }
.select[aria-invalid="true"] { border-color: var(--danger); }
.select-sm { min-height: var(--control-h-sm); padding-block: 0.35rem; font-size: var(--fs-md); border-radius: var(--radius-sm); }
.select option { background: var(--surface); color: var(--text); }

/* --------------------------------------------------------------------------
   DROPDOWN MENU  (a button + a floating list of actions)
   <div class="dropdown">
     <button class="btn btn-secondary" aria-expanded="false" aria-haspopup="true">…</button>
     <div class="menu" role="menu" hidden> … </div>
   </div>
   -------------------------------------------------------------------------- */
.dropdown { position: relative; display: inline-flex; }
.menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 12rem;
  max-height: min(24rem, 70vh);
  overflow-y: auto;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; transform: none; }
.menu-end { left: auto; right: 0; transform-origin: top right; }
.menu-up { top: auto; bottom: calc(100% + 0.4rem); transform-origin: bottom left; }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.menu-item:hover,
.menu-item:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
.menu-item:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.menu-item:active { background: var(--surface-3); }
.menu-item > svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; opacity: 0.85; }
.menu-item[aria-checked="true"],
.menu-item.is-active { background: var(--primary-soft); color: var(--primary-soft-text); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu-item:disabled,
.menu-item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.menu-item-tail { margin-left: auto; font-size: var(--fs-xs); color: var(--text-subtle); }
.menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-2) 0; border: 0; }
.menu-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.menu-note { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.45; }

/* --------------------------------------------------------------------------
   CHECKBOX + RADIO  (the base .checkbox/.radio pair is defined above)
   -------------------------------------------------------------------------- */
.checkbox, .radio { color: var(--text); }
.checkbox input:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.checkbox:has(input:disabled), .radio:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.checkbox input:disabled, .radio input:disabled { cursor: not-allowed; }
.checkbox-text { display: flex; flex-direction: column; gap: 0.1rem; }
.checkbox-hint, .radio-hint { font-size: var(--fs-sm); color: var(--text-subtle); font-weight: var(--fw-regular); }
.choice-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* Boxed choice — a checkbox/radio that owns a whole selectable card */
.check-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--card-pad-tight) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.check-card:hover { border-color: var(--primary-border); background: var(--surface-2); }
.check-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--primary) inset;
}
.check-card:has(input:focus-visible) { box-shadow: var(--ring); }
.check-card:has(input:disabled) { opacity: 0.55; cursor: not-allowed; background: var(--surface-2); }
.check-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.check-card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.check-card-hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   INPUT GROUP  (segments welded together) + QUANTITY STEPPER + COUPON
   -------------------------------------------------------------------------- */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .input,
.input-group > .select { border-radius: 0; position: relative; z-index: 1; }
.input-group > :first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.input-group > :last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.input-group > * + * { margin-left: -1px; }
.input-group > .input:focus,
.input-group > .select:focus { z-index: 2; }
.input-group > .btn { --btn-h: auto; border-radius: 0; }
.input-group-text {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Quantity stepper — <div class="qty"> − <input> + </div> */
.qty {
  display: inline-flex;
  align-items: stretch;
  height: var(--control-h);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.qty:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.qty-btn {
  display: grid;
  place-items: center;
  width: var(--control-h);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.qty-btn > svg { width: 1rem; height: 1rem; }
.qty-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--primary); }
.qty-btn:active:not(:disabled) { background: var(--surface-3); }
.qty-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-input {
  width: 3rem;
  min-width: 0;
  border: 0;
  border-inline: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; }
.qty-sm { height: var(--control-h-sm); }
.qty-sm .qty-btn { width: var(--control-h-sm); }

/* Coupon input group — an input welded to an Apply button, with a result row */
.coupon { display: flex; flex-direction: column; gap: var(--space-2); }
.coupon-row { display: flex; align-items: stretch; gap: var(--space-2); }
.coupon-row .input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}
.coupon-row .input::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); }
.coupon-row .btn { flex: 0 0 auto; --btn-h: calc(var(--control-h) + 0.25rem); }
.coupon-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-subtle);
}
.coupon-msg > svg { width: 1em; height: 1em; margin-top: 0.2em; flex: 0 0 auto; }
.coupon-msg.is-error { color: var(--danger); }
.coupon-msg.is-ok { color: var(--success); }
.coupon-msg:empty { display: none; }
@media (max-width: 420px) {
  .coupon-row { flex-direction: column; }
  .coupon-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   TAG INPUT  (a field that holds removable tokens)
   -------------------------------------------------------------------------- */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--control-h) + 0.25rem);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.tag-input:hover { border-color: var(--text-subtle); }
.tag-input:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.tag-input.is-error,
.tag-input[aria-invalid="true"] { border-color: var(--danger); }
.tag-input.is-disabled { background: var(--surface-2); pointer-events: none; opacity: 0.6; }
.tag-input > input {
  flex: 1 1 6rem;
  min-width: 6rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
  padding: 0.3rem 0.25rem;
}
.tag-input > input:focus { outline: none; }
.tag-token {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.3rem 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  color: var(--primary-soft-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  max-width: 100%;
}
.tag-token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-token-x {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.tag-token-x > svg { width: 0.7rem; height: 0.7rem; }
.tag-token-x:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 18%, transparent); }
.tag-token-x:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; opacity: 1; }

/* ==========================================================================
 * ==========================================================================
 *   DATA DISPLAY
 * ==========================================================================
 * ========================================================================== */

/* --------------------------------------------------------------------------
   DATA TABLE — sticky header, zebra, responsive card-collapse under 720px
   Every <td> in a .table-collapse MUST carry data-label="Column name".
   -------------------------------------------------------------------------- */
.table-scroll { max-height: 28rem; overflow: auto; }

.table-zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
.table-zebra tbody tr:nth-child(even):hover td { background: var(--surface-3); }

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--border);
}
/* When the table scrolls with the page rather than in its own box. */
.table-sticky-page thead th { position: sticky; top: var(--header-h); z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }

.table td.shrink, .table th.shrink { width: 1%; white-space: nowrap; }
.table-row-link { cursor: pointer; }
.table-row-link:hover td { background: var(--primary-soft); }
.table tbody tr.is-selected td { background: var(--primary-soft); }
.table-actions { display: flex; align-items: center; gap: var(--space-1); justify-content: flex-end; }
.table-empty td { padding-block: var(--space-10); text-align: center; color: var(--text-subtle); }
.table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table-sort:hover { color: var(--primary); }
.table-sort > svg { width: 0.85em; height: 0.85em; opacity: 0.4; transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.table-sort[aria-sort="ascending"] > svg { opacity: 1; }
.table-sort[aria-sort="descending"] > svg { opacity: 1; transform: rotate(180deg); }

@media (max-width: 720px) {
  .table-collapse { display: block; }
  .table-collapse thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-collapse tbody, .table-collapse tfoot { display: block; }
  .table-collapse tbody tr {
    display: block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .table-collapse tbody tr + tr { margin-top: var(--space-3); }
  .table-collapse tbody tr + tr td { border-top: 0; }
  .table-collapse td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    text-align: right;
  }
  .table-collapse td + td { border-top: 1px solid var(--border-subtle); }
  .table-collapse td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
    text-align: left;
  }
  .table-collapse td[data-label=""]::before,
  .table-collapse td:not([data-label])::before { content: none; }
  .table-collapse tbody tr:hover td { background: transparent; }
  .table-collapse .table-actions { justify-content: flex-end; }
  .table-wrap:has(.table-collapse) { border: 0; background: transparent; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   INVOICE / LINE-ITEM TABLE
   Used by checkout, order detail and the printable invoice.
   -------------------------------------------------------------------------- */
.invoice-table { width: 100%; font-size: var(--fs-md); }
.invoice-table th, .invoice-table td { padding: var(--row-py) var(--space-3); vertical-align: top; }
.invoice-table thead th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.invoice-table thead th:last-child,
.invoice-table td:last-child { text-align: right; }
.invoice-table tbody td { border-bottom: 1px solid var(--border-subtle); }
.invoice-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.invoice-item { display: flex; flex-direction: column; gap: 0.15rem; }
.invoice-item-name { font-weight: var(--fw-semibold); color: var(--text); }
.invoice-item-meta { font-size: var(--fs-sm); color: var(--text-subtle); }
.invoice-table .amount,
.invoice-amount { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--fw-medium); }
.invoice-table tfoot td {
  padding-block: var(--space-2);
  border: 0;
  color: var(--text-muted);
}
.invoice-table tfoot td:first-child { text-align: right; }
.invoice-table tfoot tr:first-child td { padding-top: var(--space-4); }
.invoice-table tfoot .is-total td {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}
.invoice-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  padding: var(--card-pad) 0;
}
.invoice-meta dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.2rem;
}
.invoice-meta dd { margin: 0; font-size: var(--fs-md); color: var(--text); line-height: 1.5; }
.invoice-meta dd.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .invoice-table thead { display: none; }
  .invoice-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
  .invoice-table tbody td { padding: 0; border: 0 !important; }
  .invoice-table tbody td:first-child { grid-column: 1 / 2; }
  .invoice-table tbody td:not(:first-child) { grid-column: 2 / 3; text-align: right; font-size: var(--fs-sm); color: var(--text-muted); }
}

/* --------------------------------------------------------------------------
   STATUS DOT + STATUS PILL
   -------------------------------------------------------------------------- */
.status-dot {
  --dot: var(--text-subtle);
  display: inline-block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--dot);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 22%, transparent);
}
.status-dot-lg { width: 0.625rem; height: 0.625rem; }
.status-dot.is-success, .status-success { --dot: var(--success); }
.status-dot.is-warn, .status-warn { --dot: var(--warn); }
.status-dot.is-danger, .status-danger { --dot: var(--danger); }
.status-dot.is-info, .status-info { --dot: var(--info); }
.status-dot.is-brand, .status-brand { --dot: var(--primary); }
.status-dot.is-muted { --dot: var(--text-subtle); }
.status-dot.is-live { animation: bi-pulse 1.8s var(--ease-standard) infinite; }
@keyframes bi-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); }
  70%  { box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--dot) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 0%, transparent); }
}

.status-pill {
  --dot: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.65rem 0.25rem 0.55rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  line-height: 1.4;
}
.status-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--dot);
}
.status-pill.is-success { --dot: var(--success); background: var(--success-soft); border-color: var(--success-border); color: var(--success-soft-text); }
.status-pill.is-warn    { --dot: var(--warn);    background: var(--warn-soft);    border-color: var(--warn-border);    color: var(--warn-soft-text); }
.status-pill.is-danger  { --dot: var(--danger);  background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger-soft-text); }
.status-pill.is-info    { --dot: var(--info);    background: var(--info-soft);    border-color: var(--info-border);    color: var(--info-soft-text); }
.status-pill.is-brand   { --dot: var(--primary); background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-soft-text); }

/* --------------------------------------------------------------------------
   STEPPER / WIZARD
   <ol class="stepper"><li class="step is-done">…</li></ol>
   -------------------------------------------------------------------------- */
.stepper {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bi-step;
}
.step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  min-width: 0;
  counter-increment: bi-step;
}
.step::before {
  content: counter(bi-step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-subtle);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  z-index: 1;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
/* Connector rail between markers */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(50% + 1.25rem);
  right: calc(-50% + 1.25rem);
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.step-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: var(--tracking-tight); }
.step-hint { font-size: var(--fs-xs); color: var(--text-subtle); }

.step.is-current::before { border-color: var(--primary); background: var(--primary); color: var(--primary-contrast); box-shadow: var(--ring); }
.step.is-current .step-label { color: var(--text); }
.step.is-done::before {
  content: "";
  border-color: var(--success);
  background: var(--success)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 1rem no-repeat;
}
.step.is-done .step-label { color: var(--text-muted); }
.step.is-done:not(:last-child)::after { background: var(--success); }
.step.is-error::before { border-color: var(--danger); background: var(--danger); color: #fff; content: "!"; }
.step a.step-label { text-decoration: none; }
.step a.step-label:hover { color: var(--primary); }

.stepper-vertical { flex-direction: column; align-items: stretch; gap: var(--space-5); }
.stepper-vertical .step { flex-direction: row; align-items: flex-start; gap: var(--space-4); text-align: left; }
.stepper-vertical .step::before { flex: 0 0 auto; }
.stepper-vertical .step:not(:last-child)::after {
  top: 2.25rem;
  bottom: -1.5rem;
  left: 0.9375rem;
  right: auto;
  width: 2px;
  height: auto;
}
.stepper-vertical .step > div { display: flex; flex-direction: column; gap: 0.15rem; }

@media (max-width: 640px) {
  .stepper:not(.stepper-vertical) .step-hint { display: none; }
  .stepper:not(.stepper-vertical) .step-label { font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   VERTICAL TIMELINE
   <ol class="timeline"><li class="timeline-item"> … </li></ol>
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}
.timeline-item:last-child { padding-bottom: 0; }
/* the rail */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  bottom: 0;
  left: 0.8125rem;
  width: 2px;
  background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-marker {
  --dot: var(--primary);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 2px solid var(--dot);
  color: var(--dot);
}
.timeline-marker > svg { width: 0.9rem; height: 0.9rem; }
.timeline-marker.is-solid { background: var(--dot); color: var(--surface); border-color: var(--dot); }
.timeline-marker.is-success { --dot: var(--success); }
.timeline-marker.is-danger { --dot: var(--danger); }
.timeline-marker.is-warn { --dot: var(--warn); }
.timeline-marker.is-muted { --dot: var(--border-strong); color: var(--text-subtle); }
.timeline-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding-top: 0.15rem; }
.timeline-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.timeline-time { font-size: var(--fs-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.timeline-text { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.55; }
.timeline-card {
  margin-top: var(--space-2);
  padding: var(--card-pad-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   EMPTY STATE — extras on top of the base .empty-state
   -------------------------------------------------------------------------- */
.empty-state-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }
.empty-state-art { color: var(--border-strong); margin-bottom: var(--space-2); }
.empty-state-art > svg { width: 5rem; height: 5rem; }
.empty-state-sm { padding: var(--space-8) var(--space-5); }
.empty-state-plain { border: 0; background: transparent; }
.empty-state-inline {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: var(--space-4);
  padding: var(--card-pad);
}
.empty-state-inline .empty-state-actions { margin-top: 0; margin-left: auto; }

/* --------------------------------------------------------------------------
   SKELETON VARIANTS
   -------------------------------------------------------------------------- */
.skeleton-line-group { display: flex; flex-direction: column; gap: var(--space-2); }
.skeleton-chip { height: 1.75rem; width: 5rem; border-radius: var(--radius-full); }
.skeleton-pill { height: 1.25rem; width: 4rem; border-radius: var(--radius-full); }
.skeleton-media { aspect-ratio: 16 / 9; width: 100%; border-radius: 0; }
.skeleton-circle { border-radius: var(--radius-full); aspect-ratio: 1; width: 3rem; }
.skeleton-ring { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-full); }
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--row-py) var(--row-px);
  border-bottom: 1px solid var(--border-subtle);
}
.skeleton-row > .skeleton-text { flex: 1; }
.skeleton-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.skeleton-table .skeleton-row:last-child { border-bottom: 0; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 17rem), 1fr)); gap: var(--tile-gap); }

/* --------------------------------------------------------------------------
   AVATAR EXTRAS
   -------------------------------------------------------------------------- */
.avatar-stack > .avatar { border: 2px solid var(--surface); }
.avatar-more {
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.avatar-group { display: flex; align-items: center; gap: var(--space-3); }
.avatar-group-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.avatar-group-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-group-sub { font-size: var(--fs-sm); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-badge { position: relative; }
.avatar-badge > .status-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* --------------------------------------------------------------------------
   RATING STARS
   <span class="stars" style="--stars: 4.7" role="img" aria-label="4.7 out of 5">
   -------------------------------------------------------------------------- */
.stars {
  --stars: 0;
  --star-size: 0.95rem;
  position: relative;
  display: inline-block;
  width: calc(var(--star-size) * 5);
  height: var(--star-size);
  flex: 0 0 auto;
  vertical-align: -0.12em;
  background: var(--border-strong);
  /* --star-size is scoped to .stars (and overridden by .stars-lg/.stars-sm), so the
     sizing must be composed HERE. Composing the whole shorthand on :root makes
     var(--star-size) unresolvable at that level, which invalidates the custom
     property and silently drops the mask, rendering a solid bar. */
  -webkit-mask: var(--bi-star-img) left center / var(--star-size) var(--star-size) repeat-x;
  mask: var(--bi-star-img) left center / var(--star-size) var(--star-size) repeat-x;
}
:root {
  --bi-star-img:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.47 5.28 5.53.72-4.06 3.94 1.03 5.66L10 14.5l-4.97 2.7 1.03-5.66L2 7.6l5.53-.72z'/%3E%3C/svg%3E");
}
.stars::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--stars) / 5 * 100%);
  background: var(--accent);
}
.stars-lg { --star-size: 1.25rem; }
.stars-sm { --star-size: 0.8rem; }
/* Interactive star picker */
.stars-input { display: inline-flex; gap: 0.15rem; }
.stars-input > button {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--border-strong);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.stars-input > button > svg { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; }
.stars-input > button:hover { transform: scale(1.12); }
.stars-input > button.is-on,
.stars-input:hover > button:hover,
.stars-input > button.is-on ~ button.is-on { color: var(--accent); }
.stars-input > button:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }
.stars-input > button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

/* --------------------------------------------------------------------------
   PROGRESS RING (SVG)
   <svg class="ring" style="--pct: 62" viewBox="0 0 48 48" …>
     <circle class="ring-track" …><circle class="ring-fill" …>
   -------------------------------------------------------------------------- */
.ring {
  --pct: 0;
  --ring-c: 125.664;      /* 2πr for r=20 in the 48×48 viewBox */
  --ring-w: 4;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  transform: rotate(-90deg);
  overflow: visible;
}
.ring circle { fill: none; stroke-width: var(--ring-w); }
.ring-track { stroke: var(--surface-3); }
.ring-fill {
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-c);
  stroke-dashoffset: calc(var(--ring-c) - var(--ring-c) * var(--pct) / 100);
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.ring.is-complete .ring-fill { stroke: var(--success); }
.ring.is-warn .ring-fill { stroke: var(--warn); }
.ring-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.ring-wrap > .ring { grid-area: 1 / 1; }
.ring-text {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-md);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}
.ring-text small { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-subtle); letter-spacing: var(--tracking-wide); }
.ring-lg { width: 6.5rem; height: 6.5rem; --ring-w: 5; }
.ring-lg + .ring-text, .ring-wrap:has(.ring-lg) .ring-text { font-size: var(--fs-2xl); }
.ring-sm { width: 2.25rem; height: 2.25rem; --ring-w: 5; }

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.page-btn > svg { width: 1rem; height: 1rem; }
.page-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); text-decoration: none; }
.page-btn:active { background: var(--surface-3); }
.page-btn:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.page-btn[aria-current="page"],
.page-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}
.page-btn[aria-current="page"]:hover { background: var(--primary-hover); color: var(--primary-contrast); }
.page-btn:disabled,
.page-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.page-gap { display: inline-grid; place-items: center; min-width: var(--control-h-sm); height: var(--control-h-sm); color: var(--text-subtle); }
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
}
.pagination-count { font-size: var(--fs-md); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .pagination .page-btn.page-num { display: none; }
  .pagination .page-btn.page-num[aria-current="page"] { display: inline-flex; }
}

/* ==========================================================================
 * ==========================================================================
 *   OVERLAYS + NAVIGATION
 * ==========================================================================
 * ========================================================================== */

/* --------------------------------------------------------------------------
   TOOLTIP — CSS only. Put data-tip on any focusable element.
   <button class="btn btn-icon btn-ghost has-tip" data-tip="Copy invoice number">
   -------------------------------------------------------------------------- */
.has-tip { position: relative; }
.has-tip::after,
.has-tip::before {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
  z-index: var(--z-dropdown);
}
.has-tip::after {
  content: attr(data-tip);
  width: max-content;
  max-width: 16rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--surface-invert);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  white-space: normal;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.has-tip::before {
  content: "";
  bottom: calc(100% + 0.22rem);
  border: 5px solid transparent;
  border-top-color: var(--surface-invert);
  margin-left: -5px;
  left: 50%;
  transform: translate(0, 4px);
}
.has-tip:hover::after, .has-tip:hover::before,
.has-tip:focus-visible::after, .has-tip:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.has-tip:hover::before, .has-tip:focus-visible::before { transform: translate(0, 0); }
.has-tip-below::after { bottom: auto; top: calc(100% + 0.5rem); }
.has-tip-below::before { bottom: auto; top: calc(100% + 0.22rem); border-top-color: transparent; border-bottom-color: var(--surface-invert); }
.has-tip-start::after { left: 0; transform: translate(0, 4px); }
.has-tip-start:hover::after, .has-tip-start:focus-visible::after { transform: translate(0, 0); }
.has-tip-end::after { left: auto; right: 0; transform: translate(0, 4px); }
.has-tip-end:hover::after, .has-tip-end:focus-visible::after { transform: translate(0, 0); }
@media (hover: none) {
  .has-tip::after, .has-tip::before { display: none; }
}

/* --------------------------------------------------------------------------
   POPOVER — a small anchored panel with real content
   <div class="popover-anchor">
     <button aria-expanded="false" aria-controls="p1">…</button>
     <div class="popover" id="p1" role="dialog" hidden> … </div>
   -------------------------------------------------------------------------- */
.popover-anchor { position: relative; display: inline-flex; }
.popover {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: var(--z-dropdown);
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--card-pad-tight) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.popover[hidden] { display: none; }
.popover.is-open { opacity: 1; transform: none; }
.popover-end { left: auto; right: 0; transform-origin: top right; }
.popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--space-5);
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.popover-end::before { left: auto; right: var(--space-5); }
.popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.popover-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); letter-spacing: var(--tracking-tight); }
.popover-foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   OFF-CANVAS DRAWER (generic — the site nav drawer lives in layout.css)
   -------------------------------------------------------------------------- */
.offcanvas-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--overlay-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.offcanvas-scrim[hidden] { display: none; }
.offcanvas-scrim.is-open { opacity: 1; }

.offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(26rem, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.offcanvas[hidden] { display: none; }
.offcanvas.is-open { transform: none; }
.offcanvas-start { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); transform: translateX(-100%); }
.offcanvas-start.is-open { transform: none; }
.offcanvas-bottom {
  top: auto; left: 0; right: 0;
  width: auto;
  max-height: 85vh;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transform: translateY(100%);
}
.offcanvas-bottom.is-open { transform: none; }
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-head-py) var(--card-pad);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.offcanvas-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.offcanvas-body { padding: var(--card-pad); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.offcanvas-foot {
  padding: var(--card-pad-tight) var(--card-pad);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   SPLIT PANEL — the settings / account shell: sticky rail + content pane
   <div class="split"><nav class="split-rail">…</nav><div class="split-main">…</div></div>
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.split-wide { grid-template-columns: 18rem minmax(0, 1fr); }
.split-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: calc(100svh - var(--header-h) - var(--space-10));
  overflow-y: auto;
  padding-right: var(--space-1);
}
.split-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.split-section { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.split-section-head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.split-section-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.split-section-sub { font-size: var(--fs-md); color: var(--text-muted); max-width: 60ch; }
/* A labelled setting row: description on the left, control on the right */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--card-pad-tight) 0;
}
.setting-row + .setting-row { border-top: 1px solid var(--border-subtle); }
.setting-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.setting-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.setting-hint { font-size: var(--fs-sm); color: var(--text-subtle); line-height: 1.5; max-width: 52ch; }
.setting-control { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); }
.setting-control.is-wide { flex: 0 1 18rem; }
@media (max-width: 640px) {
  .setting-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .setting-control, .setting-control.is-wide { flex: 1 1 auto; }
}
@media (max-width: 900px) {
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .split-rail {
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
  }
  .split-rail::-webkit-scrollbar { display: none; }
  .split-rail .section-nav-link { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .split-rail .section-nav-link.is-active { border-left: 0; border-bottom-color: var(--primary); background: transparent; }
}

/* --------------------------------------------------------------------------
   SECTION NAV — the sticky left rail used inside .split and on long documents
   -------------------------------------------------------------------------- */
.section-nav { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.section-nav-title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.section-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.section-nav-link > svg { width: 1.05rem; height: 1.05rem; opacity: 0.8; flex: 0 0 auto; }
.section-nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.section-nav-link:active { background: var(--surface-3); }
.section-nav-link:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.section-nav-link.is-active,
.section-nav-link[aria-current="true"],
.section-nav-link[aria-current="page"] {
  background: var(--primary-soft);
  border-left-color: var(--primary);
  color: var(--primary-soft-text);
  font-weight: var(--fw-semibold);
}
.section-nav-link .section-nav-tail { margin-left: auto; font-size: var(--fs-xs); color: var(--text-subtle); }

/* ==========================================================================
 * ==========================================================================
 *   CONTENT
 * ==========================================================================
 * ========================================================================== */

/* --------------------------------------------------------------------------
   CODE BLOCK — hand-rolled syntax colouring, no highlighter library.
   Page agents wrap spans themselves: <span class="tok-kw">function</span>
   -------------------------------------------------------------------------- */
.code {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.code-lang {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.code-file { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-tools { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.code pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--code-fg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-md);
  line-height: 1.7;
  overflow-x: auto;
  tab-size: 2;
}
.code pre code { color: inherit; }
.code-scroll pre { max-height: 26rem; overflow-y: auto; }

/* Line numbers: each line is its own element */
.code-numbered pre { counter-reset: bi-line; padding-left: 0; }
.code-numbered .code-line { display: block; counter-increment: bi-line; padding-left: 3.5rem; position: relative; }
.code-numbered .code-line::before {
  content: counter(bi-line);
  position: absolute;
  left: 0;
  width: 2.5rem;
  text-align: right;
  color: var(--code-gutter);
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}
.code-line.is-added { background: color-mix(in srgb, var(--success) 14%, transparent); }
.code-line.is-removed { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.code-line.is-highlight { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* Syntax tokens — the full set. Never invent a new tok- class. */
.tok-com  { color: var(--tok-comment); font-style: italic; }
.tok-kw   { color: var(--tok-keyword); font-weight: var(--fw-semibold); }
.tok-str  { color: var(--tok-string); }
.tok-num  { color: var(--tok-number); }
.tok-fn   { color: var(--tok-func); }
.tok-type { color: var(--tok-type); }
.tok-var  { color: var(--code-fg); }
.tok-op   { color: var(--tok-op); }
.tok-punc { color: var(--tok-punct); }
.tok-attr { color: var(--tok-func); font-style: italic; }
.tok-bool { color: var(--tok-number); font-weight: var(--fw-semibold); }

/* Inline code inside a .code header/description keeps the block palette */
.code-caption {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   CALLOUT / NOTE BOX
   <aside class="callout callout-tip"><div class="callout-icon">…</div>
     <div class="callout-body"><p class="callout-title">…</p><p>…</p></div></aside>
   -------------------------------------------------------------------------- */
.callout {
  --co: var(--primary);
  --co-soft: var(--primary-soft);
  --co-text: var(--primary-soft-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--card-pad-tight) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--co);
  border-radius: var(--radius-md);
  background: var(--co-soft);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.callout-icon { flex: 0 0 auto; color: var(--co); display: grid; place-items: center; margin-top: 0.1rem; }
.callout-icon > svg { width: 1.15rem; height: 1.15rem; }
.callout-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.callout-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--co-text); letter-spacing: var(--tracking-tight); }
.callout-body a { color: var(--co-text); text-decoration: underline; }
.callout-note   { --co: var(--text-subtle); --co-soft: var(--surface-2); --co-text: var(--text); }
.callout-tip    { --co: var(--success); --co-soft: var(--success-soft); --co-text: var(--success-soft-text); }
.callout-info   { --co: var(--info);    --co-soft: var(--info-soft);    --co-text: var(--info-soft-text); }
.callout-warn   { --co: var(--warn);    --co-soft: var(--warn-soft);    --co-text: var(--warn-soft-text); }
.callout-danger { --co: var(--danger);  --co-soft: var(--danger-soft);  --co-text: var(--danger-soft-text); }
.callout-brand  { --co: var(--primary); --co-soft: var(--primary-soft); --co-text: var(--primary-soft-text); }
.callout-plain  { background: transparent; }

/* --------------------------------------------------------------------------
   FILE / RESOURCE CHIP — a downloadable or linkable attachment row
   -------------------------------------------------------------------------- */
.resource {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
a.resource:hover, button.resource:hover {
  border-color: var(--primary-border);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
a.resource:active, button.resource:active { transform: none; box-shadow: none; background: var(--surface-3); }
.resource:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.resource.is-locked { opacity: 0.6; pointer-events: none; }
.resource-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.resource-icon > svg { width: 1.15rem; height: 1.15rem; }
.resource-icon.is-pdf   { background: var(--danger-soft); color: var(--danger); }
.resource-icon.is-code  { background: var(--info-soft); color: var(--info); }
.resource-icon.is-sheet { background: var(--success-soft); color: var(--success); }
.resource-icon.is-note  { background: var(--warn-soft); color: var(--warn); }
.resource-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.resource-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-meta { font-size: var(--fs-xs); color: var(--text-subtle); }
.resource-action { flex: 0 0 auto; color: var(--text-subtle); display: grid; place-items: center; }
.resource-action > svg { width: 1.1rem; height: 1.1rem; }
.resource:hover .resource-action { color: var(--primary); }
.resource-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   BANNER — a full-width strip above or inside a page region
   -------------------------------------------------------------------------- */
.banner {
  --bn: var(--primary);
  --bn-soft: var(--primary-soft);
  --bn-text: var(--primary-soft-text);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--bn) 28%, transparent);
  border-radius: var(--radius-lg);
  background: var(--bn-soft);
  color: var(--bn-text);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.banner-icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--bn); }
.banner-icon > svg { width: 1.25rem; height: 1.25rem; }
.banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.banner-title { font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.banner-text { color: inherit; opacity: 0.9; }
.banner-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
.banner-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.banner-close:hover { opacity: 1; background: color-mix(in srgb, var(--bn) 14%, transparent); }
.banner-close > svg { width: 1rem; height: 1rem; }
.banner-info   { --bn: var(--info);    --bn-soft: var(--info-soft);    --bn-text: var(--info-soft-text); }
.banner-success{ --bn: var(--success); --bn-soft: var(--success-soft); --bn-text: var(--success-soft-text); }
.banner-warn   { --bn: var(--warn);    --bn-soft: var(--warn-soft);    --bn-text: var(--warn-soft-text); }
.banner-danger { --bn: var(--danger);  --bn-soft: var(--danger-soft);  --bn-text: var(--danger-soft-text); }
.banner-brand  { --bn: var(--primary); --bn-soft: var(--primary-soft); --bn-text: var(--primary-soft-text); }
/* Edge-to-edge variant that sits directly under the header */
.banner-flush { border-radius: 0; border-inline: 0; border-top: 0; }
.banner-solid {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--text-on-brand);
}
.banner-solid .banner-icon, .banner-solid .banner-title { color: inherit; }
@media (max-width: 640px) {
  .banner { flex-wrap: wrap; }
  .banner-actions { width: 100%; }
  .banner-actions .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   MISC SHARED PIECES
   -------------------------------------------------------------------------- */
/* Definition grid used by profile / order summary blocks */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-5); margin: 0; }
.detail-grid dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); margin-bottom: 0.25rem; }
.detail-grid dd { margin: 0; font-size: var(--fs-base); color: var(--text); line-height: 1.5; }

/* A totals block (cart / checkout sidebar) */
.totals { display: flex; flex-direction: column; gap: var(--space-2); }
.totals-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-md); color: var(--text-muted); }
.totals-row > span:last-child { font-variant-numeric: tabular-nums; color: var(--text); font-weight: var(--fw-medium); }
.totals-row.is-total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.totals-row.is-total > span:last-child { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); }
.totals-note { font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.5; }

/* Scroll-shadow helper for horizontal rails */
.scroll-x {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }