/* ============================================================
   e2eforms — COMPONENTS (components.css)
   Token-driven component layer. Reuses the EXISTING class names
   from app.css / layouts (.btn, .btn-primary, .card, .alert,
   .badge, .main-nav, .nav-drop, .form-group, .data-table, …) so
   re-skinning is additive and low-churn.

   Load AFTER tokens.css and BEFORE app.css so app.css can still
   win on legacy specifics, while these consume semantic tokens.

   Requires: tokens.css (Tier-2 semantic tokens).
   Mobile-first. Container-query friendly. Strong visible focus.
   Touch targets >= 24px (interactive primaries >= 44px).
   ============================================================ */

/* ------------------------------------------------------------
   0. Reset-ish niceties (additive — won't fight app.css reset)
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font-family: inherit; }

/* ------------------------------------------------------------
   1. BUTTONS  (.btn + variants — names match app.css)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;            /* 44px — WCAG 2.5.5 comfortable */
  padding: 0.625rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--color-surface-muted);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: 0.55; cursor: not-allowed; transform: none; pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

/* Encryption-themed CTA (e.g. "Enable E2EE", "Sign securely") */
.btn-encrypt {
  background: var(--color-encrypt);
  border-color: var(--color-encrypt);
  color: var(--color-encrypt-contrast);
}
.btn-encrypt:hover { background: var(--color-encrypt-strong); border-color: var(--color-encrypt-strong); }

/* Gradient hero CTA (brand moment) */
.btn-brand {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}
.btn-brand:hover { box-shadow: var(--shadow-brand); }

.btn-danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
  cursor: pointer;            /* app.css had default; restore pointer */
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-primary-contrast); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover { background: var(--color-surface-muted); color: var(--color-text); }

/* Text/link button — keep visible focus & 24px min target */
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;          /* >=24px */
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.btn-link:hover { color: var(--color-text); text-decoration: underline; }
.btn-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

.btn-block { display: flex; width: 100%; }

.btn-sm { min-height: 2.25rem; padding: 0.4rem 0.85rem; font-size: var(--text-xs); }
.btn-lg { min-height: 3.25rem; padding: 0.9rem 1.75rem; font-size: var(--text-md); }

/* Loading spinner state */
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute;
  width: 1.1em; height: 1.1em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-primary-contrast);
  animation: e2e-spin 600ms linear infinite;
}
@keyframes e2e-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   2. CARDS  (.card — matches app.css)
   ------------------------------------------------------------ */
.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-interactive { transition: border-color var(--duration-fast) var(--ease-standard),
                                box-shadow var(--duration-fast) var(--ease-standard),
                                transform var(--duration-fast) var(--ease-standard); }
.card-interactive:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-encrypt { border-color: var(--color-encrypt-subtle-border); }
.card-encrypt::before { /* hairline teal accent */
  content: ""; display: block; height: 3px; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
  background: var(--gradient-encrypt); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Card metric helpers (already used in app.css dashboard) */
.card h3 { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.card-value { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--color-text); }
.card-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Responsive card grid (matches app.css .card-grid) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

/* ------------------------------------------------------------
   AUTH CARD (login / register / verify)
   Token-driven so it themes correctly in light AND dark mode.
   Use this INSTEAD of hand-rolling a card with a hardcoded #fff
   background — that bug makes text invisible in dark mode.
   ------------------------------------------------------------ */
.auth-wrap { max-width: 27.5rem; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.auth-card {
  background: var(--color-surface-raised);   /* never hardcode #fff */
  color: var(--color-text);                  /* pair bg + text from the SAME tier */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.auth-card h1 { font-size: var(--text-2xl); color: var(--color-text); margin-bottom: var(--space-1); }
.auth-card .subtitle { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.auth-card label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-1); }
.auth-footer { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.auth-footer a { color: var(--color-primary); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; }
.auth-divider hr { flex: 1; border: none; border-top: 1px solid var(--color-border); }
.auth-divider span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ------------------------------------------------------------
   3. ALERTS / TOASTS
   IMPORTANT: alerts never auto-dismiss. Provide a manual close.
   Role-based color; class names match app.css + flash $type
   (error / success / warning) + add info.
   ------------------------------------------------------------ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-muted);
}
.alert-error,
.alert-danger { background: var(--color-error-subtle);   border-color: var(--color-error-border);   border-left-color: var(--color-error);   color: var(--color-error); }
.alert-success { background: var(--color-success-subtle); border-color: var(--color-success-border); border-left-color: var(--color-success); color: var(--color-success); }
.alert-warning { background: var(--color-warning-subtle); border-color: var(--color-warning-border); border-left-color: var(--color-warning); color: var(--color-warning); }
.alert-info    { background: var(--color-info-subtle);    border-color: var(--color-info-border);    border-left-color: var(--color-info);    color: var(--color-info); }
.alert-encrypt { background: var(--color-encrypt-subtle); border-color: var(--color-encrypt-subtle-border); border-left-color: var(--color-encrypt); color: var(--color-encrypt); }

.alert__icon { flex-shrink: 0; line-height: var(--leading-normal); }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: var(--weight-semibold); display: block; margin-bottom: var(--space-1); }
.alert__close {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;        /* >=24px */
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: inherit; cursor: pointer;
  border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1;
}
.alert__close:hover { background: rgba(0, 0, 0, 0.06); }
.alert__close:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Toast region: bottom-right stack. Add role="status"/aria-live in markup.
   Persistent by default — require a close button, never time-out only. */
.toast-region {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast { pointer-events: auto; box-shadow: var(--shadow-lg); background: var(--color-surface-raised); }
.toast.alert { animation: e2e-toast-in var(--duration-base) var(--ease-out) both; }
@keyframes e2e-toast-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }

/* ------------------------------------------------------------
   4. FORMS  (.form-group + inputs — names match app.css/presets)
   Inputs >= 16px font (prevents iOS zoom). AA control borders.
   ------------------------------------------------------------ */
.form-group { margin-bottom: var(--space-5); }
.form-group > label,
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.form-group .required,
.required-mark { color: var(--color-error); margin-inline-start: 0.15em; }

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.input, .select, .textarea {
  width: 100%;
  min-height: 2.75rem;                       /* 44px */
  padding: 0.6rem 0.8rem;
  font-size: var(--text-base);               /* 16px — no mobile zoom */
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);  /* AA (#767676+) */
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.form-group textarea, .textarea { min-height: 6rem; resize: vertical; }

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-muted); opacity: 1; }  /* AA placeholder */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

/* Invalid state — pair color with the aria attribute, never color-only */
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
[aria-invalid="true"].input {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-subtle);
}
.form-error,
.field-error {
  display: flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-error);
}
.form-error::before, .field-error::before { content: "⚠"; font-size: 0.9em; }

.form-hint, .help, small.form-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Fieldset / legend grouping */
fieldset.field-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
fieldset.field-group > legend {
  padding-inline: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* Checkbox / radio accent + min target */
.form-group input[type="checkbox"],
.form-group input[type="radio"] { accent-color: var(--color-primary); width: 1.15rem; height: 1.15rem; min-height: 0; }

/* Two-up form row (matches app.css) */
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.form-row .form-group { flex: 1 1 14rem; }

/* ------------------------------------------------------------
   5. TABLES  (.data-table — matches app.css)
   Responsive wrapper + scope styling.
   ------------------------------------------------------------ */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table caption { text-align: left; padding: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.data-table th[scope="col"] {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.data-table th[scope="row"] { font-weight: var(--weight-semibold); color: var(--color-text); }
.data-table tbody tr:hover { background: var(--color-surface-muted); }

/* ------------------------------------------------------------
   6. NAVIGATION + DROPDOWN  (.main-nav / .nav-drop — match layouts)
   ------------------------------------------------------------ */
.main-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.admin-nav { border-bottom: 2px solid var(--color-primary); }
.nav-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.nav-brand { font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--color-primary); text-decoration: none; }
.admin-nav .nav-brand { color: var(--color-primary); }
.nav-badge {
  background: var(--color-primary); color: var(--color-primary-contrast);
  padding: 0.1rem 0.45rem; border-radius: var(--radius-xs);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}

/* Accessible dropdown (works with the existing toggleNavDrop JS).
   Hover OR .open OR :focus-within reveals — keyboard friendly. */
.nav-drop { position: relative; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; min-height: 2.25rem; }
.nav-drop-toggle:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.nav-drop-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 11rem;
  margin-top: 0.35rem;
  padding: var(--space-1) 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; }
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: var(--color-surface-muted); color: var(--color-primary); }
.nav-drop-menu .divider { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }

/* Hamburger lines pick up token text color */
.nav-hamburger span { background: var(--color-text); }

/* ------------------------------------------------------------
   7. BADGES / CHIPS  (.badge — match app.css; add .badge-encrypted)
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  border: 1px solid transparent;
}
.badge-active, .badge-paid, .badge-success { background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success-border); }
.badge-pending, .badge-warning            { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-failed, .badge-canceled, .badge-error { background: var(--color-error-subtle); color: var(--color-error); border-color: var(--color-error-border); }
.badge-info { background: var(--color-info-subtle); color: var(--color-info); border-color: var(--color-info-border); }
.badge-muted { background: var(--color-surface-muted); color: var(--color-text-muted); border-color: var(--color-border); }
.badge-primary { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary-subtle-border); }

/* ★ Encryption chip — teal lock. Always pair the lock with text. */
.badge-encrypted {
  background: var(--color-encrypt-subtle);
  color: var(--color-encrypt);
  border-color: var(--color-encrypt-subtle-border);
}
.badge-encrypted::before { content: "\1F512"; /* 🔒 */ font-size: 0.85em; }

/* Generic chip (filter/selection) */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 1.75rem; padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.chip[aria-pressed="true"], .chip.is-active { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); }

/* ------------------------------------------------------------
   8. 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(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.empty-state__icon { font-size: 2.5rem; line-height: 1; color: var(--color-text-subtle); }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); }
.empty-state__body { max-width: 40ch; }

/* ------------------------------------------------------------
   9. MODAL / <dialog>
   Native dialog preferred for built-in focus trapping + Esc.
   ------------------------------------------------------------ */
dialog.modal,
.modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-xl);
}
dialog.modal::backdrop { background: var(--color-overlay); backdrop-filter: blur(2px); }
dialog.modal[open] { animation: e2e-modal-in var(--duration-base) var(--ease-out); }
@keyframes e2e-modal-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } to { opacity: 1; transform: none; } }
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.modal__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }

/* JS-driven (non-dialog) overlay fallback */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center;
  padding: var(--space-4);
  background: var(--color-overlay);
}

/* ------------------------------------------------------------
   10. APP-SHELL / SIDEBAR LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
}
@media (min-width: 64em) {
  .app-shell.has-sidebar {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
}
.app-sidebar {
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  padding: var(--space-4);
}
@media (min-width: 64em) {
  .app-sidebar.is-sticky {
    position: sticky; top: 0; align-self: start;
    height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  }
}
.app-main { min-width: 0; padding: var(--space-6) var(--gutter); }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 2.5rem; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.sidebar-nav a:hover { background: var(--color-surface-muted); color: var(--color-text); }
.sidebar-nav a[aria-current="page"], .sidebar-nav a.is-active {
  background: var(--color-primary-subtle); color: var(--color-primary); font-weight: var(--weight-semibold);
}

/* Container constraints + prose measure */
.container { max-width: var(--container-max); margin-inline: auto; padding: var(--space-8) var(--gutter); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }

/* ------------------------------------------------------------
   11. BENTO GRID HELPERS  (asymmetric marketing / dashboard grid)
   ------------------------------------------------------------ */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(10rem, auto);
  gap: var(--space-4);
}
@media (min-width: 48em) { .bento { grid-template-columns: repeat(4, 1fr); } }
.bento > * {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  overflow: hidden;
}
.bento-hero { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
@media (max-width: 48em) {
  .bento-hero, .bento-wide { grid-column: span 2; }
  .bento-tall { grid-row: span 1; }
}

/* ------------------------------------------------------------
   12. CONTAINER-QUERY HOOK
   Add .cq-context to any wrapper to enable @container on children.
   ------------------------------------------------------------ */
.cq-context { container-type: inline-size; }

/* ------------------------------------------------------------
   13. THEME TOGGLE BUTTON (optional helper for the localStorage UI)
   ------------------------------------------------------------ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.theme-toggle:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* ------------------------------------------------------------
   14. UTILITIES (small, token-driven)
   ------------------------------------------------------------ */
.text-muted { color: var(--color-text-muted); }
.text-encrypt { color: var(--color-encrypt); }
.text-center { text-align: center; }
.surface { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--space-4); }