/* =============================================================================
   Helix Run Crew - design system
   -----------------------------------------------------------------------------
   Branding derived from the existing Helix Run Crew website. Helix is a
   black-and-white brand, so the accent is monochrome — black (light mode) and
   near-white (dark mode) — never a colour:
     - Light background : #f7f6f0 (warm off-white, never pure white — easier on
                          the eyes on screen than spier-white)
     - Accent (light)   : #1d1d1f (near-black) / pure black on hover
     - Accent (dark)    : #e5e5e7 (near-white) / pure white on hover
     - Neutral grays    : #1d1d1f, #2c2c2e, #d1d1d6, #e5e5e7
     - Dark mode text   : rgb(229, 229, 231) (never pure black backgrounds)

   Typography (matching the live site, loaded via Adobe Typekit + Google Fonts):
     - Headlines : "proxima-nova-extra-condensed", uppercase
     - Body      : "roboto-mono" (Roboto Mono), medium

   Dark mode is fully designed (not inverted). By default it follows the device
   preference automatically (via the CSS ``light-dark()`` function bound to
   ``color-scheme``). A manual theme toggle (Light / Dark / System) overrides
   that by setting ``data-theme`` on the root element, which flips
   ``color-scheme`` and is persisted in localStorage. See the
   "Accessibility Standards" section of the README.
   ========================================================================== */

/* ----- Design tokens ------------------------------------------------------- */
/* Every themed colour is expressed as ``light-dark(<light>, <dark>)`` and
   resolves against the active ``color-scheme``:
     - no data-theme        -> color-scheme: light dark  -> follows the system
     - data-theme="light"   -> color-scheme: light       -> forced light
     - data-theme="dark"    -> color-scheme: dark        -> forced dark
   This keeps a single source of truth for both themes and lets native form
   controls (date pickers, scrollbars, etc.) adapt to the chosen theme too. */
:root {
  color-scheme: light dark;

  --bg: light-dark(#f7f6f0, #161618);
  --bg-elevated: light-dark(#fefdf9, #1c1c1f);
  --surface: light-dark(#fffefb, #1f1f22);
  --surface-2: light-dark(#efeee6, #2c2c2e);
  --text: light-dark(#1d1d1f, rgb(229, 229, 231));
  /* Muted/faint greys darkened (light) / lightened (dark) to clear WCAG AA
     (>= 4.5:1) on their backgrounds, including placeholder text. */
  --text-muted: light-dark(#5f5f66, #a0a0a6);
  --text-faint: light-dark(#6e6e75, #8c8c93);
  --border: light-dark(#e4e2d8, #34343a);
  --border-strong: light-dark(#cfcdc0, #45454c);

  /* Monochrome accent: used for decorative fills, glows and large display type.
     Near-black in light mode, near-white in dark mode (so it always reads
     against the page). */
  --accent: light-dark(#1d1d1f, #e5e5e7);
  --accent-hover: light-dark(#000000, #ffffff);
  /* Text/icon colour to place ON an --accent-fill (inverts per theme). */
  --accent-contrast: light-dark(#ffffff, #161618);
  /* Subtle neutral tint for chip/badge backgrounds, hover fills and glows. */
  --accent-soft: light-dark(rgba(29, 29, 31, 0.08), rgba(229, 229, 231, 0.12));

  /* Accent for small TEXT / links / active states (>= 4.5:1 in both themes —
     near-black on light, near-white on dark). */
  --accent-strong: light-dark(#1d1d1f, #e5e5e7);
  --accent-strong-hover: light-dark(#000000, #ffffff);

  /* FILL behind --accent-contrast text (primary buttons, active segmented
     thumbs, avatars, error toasts): near-black + white text (light) /
     near-white + dark text (dark). High contrast in both. */
  --accent-fill: light-dark(#1d1d1f, #e8e8ea);
  --accent-fill-hover: light-dark(#000000, #ffffff);

  /* Focus ring colour: >= 3:1 against adjacent colours in both themes. */
  --focus: light-dark(#1d1d1f, #e5e5e7);

  --shadow-sm: 0 1px 2px light-dark(rgba(29, 29, 31, 0.06), rgba(0, 0, 0, 0.4));
  --shadow-md: 0 6px 24px light-dark(rgba(29, 29, 31, 0.10), rgba(0, 0, 0, 0.45));
  --shadow-lg: 0 18px 48px light-dark(rgba(29, 29, 31, 0.16), rgba(0, 0, 0, 0.55));

  --header-bg: light-dark(rgba(247, 246, 240, 0.82), rgba(22, 22, 24, 0.82));
  --header-border: light-dark(rgba(29, 29, 31, 0.08), rgba(255, 255, 255, 0.08));

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --font-head: "proxima-nova-extra-condensed", "Oswald", "Arial Narrow",
    system-ui, sans-serif;
  --font-body: "roboto-mono", "Roboto Mono", ui-monospace, "SFMono-Regular",
    Menlo, Consolas, monospace;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  /* Horizontal inset matching .container content (centered max-width + padding). */
  --content-inset: var(--pad);

  /* Header height: tall enough to comfortably fit the wordmark logo. */
  --header-h: 100px;
}

/* Manual theme overrides set by the toggle (persisted in localStorage). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 1280px) {
  :root {
    --content-inset: calc((100vw - var(--maxw)) / 2 + var(--pad));
  }
}

/* ----- Reset & base ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  overscroll-behavior-x: none;
  /* Remove the 300ms tap delay and double-tap-to-zoom across the site
     (pinch-zoom is disabled via the viewport meta + iOS gesture guards). */
  touch-action: manipulation;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  max-width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 0.4em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hide focus rings while the user is interacting by pointer/touch. We move
   focus programmatically in a few places (opening the menu, restoring focus on
   close, sliding the Helix ID sheet in) and iOS/WebKit then matches
   :focus-visible even after a tap, flashing a heavy ring at pointer users who
   don't need it. The data-input-modality attribute is set in app.js and flips
   to "keyboard" on the first navigation key, so keyboard and assistive-tech
   users keep a clear, visible focus indicator. Targeting "pointer" explicitly
   (rather than :not(keyboard)) means rings still show if the script never runs. */
html[data-input-modality="pointer"] :focus-visible {
  outline: none;
}

/* Visually hidden, but available to screen readers (accessible name source). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element, jumps keyboard users to <main>. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  margin: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.03em;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* The main landmark receives focus after the skip link; suppress its ring. */
#main:focus {
  outline: none;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  --btn-pad-y: 0.7rem;
  --btn-pad-x: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.18s ease,
    border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  background: none;
  color: var(--text);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--accent-fill);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--accent-fill-hover);
  box-shadow: var(--shadow-md);
}

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

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

.btn-block {
  width: 100%;
}

.btn-lg {
  --btn-pad-y: 0.95rem;
  --btn-pad-x: 2rem;
  font-size: 1.25rem;
}

.btn-sm {
  --btn-pad-y: 0.42rem;
  --btn-pad-x: 1rem;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}

/* Logged-out header actions: a subtle text "Log in" + a small "Join" button. */
.auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-login {
  padding: 0.4rem 0.6rem;
}

/* ----- Theme toggle (Light / System / Dark) ------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.theme-opt {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.theme-opt:hover {
  color: var(--text);
}

.theme-opt.is-active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

/* Hide the compact header toggle on small screens; the mobile menu has its
   own, larger version. */
@media (max-width: 820px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Theme toggle row inside the mobile menu (larger, labelled, 44px targets). */
.mobile-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}

.mobile-theme__label {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.mobile-theme .theme-opt {
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
}

/* ----- Header / navigation ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--header-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--header-h);
  gap: 1rem;
}

/* Keep the logo on the left and push all controls to the right. */
.nav > .brand {
  margin-right: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.65rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  font-size: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.brand .brand-accent {
  color: var(--accent);
}

/* Wordmark logo (inline SVG, inherits text colour via currentColor so it adapts
   to light/dark mode automatically). */
.brand-logo {
  display: block;
  height: 76px;
  width: auto;
  color: var(--text);
  transition: color 0.15s ease, transform 0.15s ease;
}

.brand:hover .brand-logo {
  color: var(--accent);
}

@media (max-width: 820px) {
  .brand-logo {
    height: 64px;
  }
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--text);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: var(--accent-strong);
  background-color: var(--accent-soft);
}

.nav-link.is-active {
  color: var(--accent-strong);
}

.nav-link__icon {
  margin-right: 0.45rem;
  font-size: 0.9em;
  opacity: 0.85;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Activity Center (notification bell) */
.activity-center {
  position: relative;
}
.activity-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.activity-trigger:hover {
  border-color: var(--text);
  box-shadow: var(--shadow-sm);
}
.activity-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.activity-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.activity-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 2 * var(--pad)));
  max-height: min(70vh, 480px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 200;
}
.activity-center[data-open="true"] .activity-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.activity-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.activity-panel__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  font-family: var(--font-head);
}
.activity-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.activity-panel__mark-all,
.activity-panel__clear-all {
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.activity-panel__clear-all { color: var(--text-muted); }
.activity-panel__clear-all:hover { color: #c0392b; }
.activity-panel__mark-all:disabled,
.activity-panel__clear-all:disabled {
  opacity: 0.45;
  cursor: default;
}
.activity-panel__mark-all:focus-visible,
.activity-panel__clear-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.activity-panel__empty {
  margin: 0;
  padding: 20px 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.activity-panel__list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}
.activity-group__label {
  margin: 10px 14px 6px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.activity-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.activity-item:first-of-type { border-top: 0; }
.activity-item.is-unread { background: var(--accent-soft); }
.activity-item:hover { background: var(--surface-2); }
.activity-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.activity-item__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
}
.activity-item__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
}
.activity-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activity-item__content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-item__actor {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}
.activity-item__title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.activity-item__quote {
  font-weight: 500;
  color: var(--text);
}
.activity-item__preview {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.activity-item__context {
  display: block;
  font-size: 0.7rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-item__when {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--text-faint);
}
@media (max-width: 768px) {
  .activity-center[data-open="true"] .activity-panel {
    position: fixed;
    top: calc(var(--header-h, 64px) + 8px);
    right: var(--pad);
    left: var(--pad);
    width: auto;
    max-height: min(70dvh, 480px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .activity-panel { transition: none; }
}

/* Account dropdown */
.account {
  position: relative;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.45rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--font-body);
}

.account-trigger:hover {
  border-color: var(--text);
  box-shadow: var(--shadow-sm);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

.account-name {
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  margin-right: 4px;
  transition: transform 0.2s ease;
}

.account[data-open="true"] .caret {
  transform: rotate(180deg);
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease,
    visibility 0s linear 0.16s;
}

.account[data-open="true"] .account-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.account-menu-header {
  padding: 0.55rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}

.account-menu-header .am-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.account-menu-header .am-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background-color 0.14s ease, color 0.14s ease;
}

.menu-item:hover {
  background-color: var(--surface-2);
}

.menu-item.danger {
  color: var(--accent-strong);
}

.menu-item .mi-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Theme switcher row inside the account dropdown */
.menu-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* When two rows sit back-to-back (Theme + Hide admin controls), the first
   row's bottom border and the second's top border stack into a double line.
   Collapse them by dropping the redundant border and margin between them. */
.menu-theme + .menu-theme {
  border-top: none;
  margin-top: 0;
}

.menu-theme__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

/* =============================================================================
   Admin on-page controls (edit shortcuts on public pages)
   -----------------------------------------------------------------------------
   Shown only to signed-in admins. The "Hide admin controls" menu toggle adds
   html.hide-admin-controls, which hides these and the CMS menu link until the
   admin turns it back off (or after the 24h auto-expiry handled in app.js).
   ============================================================================= */
.admin-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent-fill, #ff5a1f);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.admin-edit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); color: #fff; }
.admin-edit:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* Round overlay on a card (image corner). */
.admin-edit--card {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  width: 38px; height: 38px;
  justify-content: center;
  border-radius: 50%;
}
.admin-edit--card .admin-edit__label { display: none; }

/* Floating pill on detail pages, just under the sticky header. */
.admin-edit--page {
  position: fixed;
  top: calc(var(--header-h, 64px) + 14px);
  right: 16px;
  z-index: 60;
  padding: 9px 15px;
  border-radius: 999px;
}

/* Cards need a positioning context for the overlay button. */
.update-card, .event-card { position: relative; }

/* Hidden state: the "Hide admin controls" preference is active. */
.hide-admin-controls .admin-edit,
.hide-admin-controls .nav-cms { display: none !important; }

@media (max-width: 600px) {
  .admin-edit--page .admin-edit__label { display: none; }
  .admin-edit--page { padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-edit { transition: none; }
}

/* Hamburger */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
}

.menu-toggle:hover {
  background: var(--surface-2);
}

.menu-toggle--bars span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle--bars span:nth-child(1) { top: 15px; }
.menu-toggle--bars span:nth-child(2) { top: 21px; }
.menu-toggle--bars span:nth-child(3) { top: 27px; }

body.menu-open .menu-toggle--bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.menu-open .menu-toggle--bars span:nth-child(2) {
  opacity: 0;
}
body.menu-open .menu-toggle--bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Profile pill variant: avatar + chevron, used as the menu toggle when the
   user is logged in. */
.menu-toggle--profile {
  width: auto;
  height: 44px;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px 4px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.menu-toggle--profile:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

.menu-toggle--profile .avatar {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.menu-toggle--profile .caret {
  margin: 0;
}

body.menu-open .menu-toggle--profile .caret {
  transform: rotate(180deg);
}

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 95;
  background: var(--bg);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

body.menu-open .mobile-menu {
  transform: translateX(0);
}

.mobile-link {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-link:hover,
.mobile-link.is-active {
  color: var(--accent-strong);
}

.mobile-link__label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.mobile-link__label i {
  font-size: 0.75em;
  width: 1.4em;
  text-align: center;
  opacity: 0.85;
}

.mobile-link.danger {
  color: var(--accent-strong);
}

.mobile-link.mobile-cta {
  color: var(--accent-strong);
}

.mobile-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.mobile-account .ma-name { font-weight: 700; }
.mobile-account .ma-email { font-size: 0.8rem; color: var(--text-muted); }

.mobile-menu .btn { margin-top: 1rem; }

/* ----- Helix ID: mobile QR trigger + bottom sheet ------------------------- */
/* Trigger button: sits next to the hamburger, mobile only (see responsive). */
.helix-id-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.3rem;
  align-items: center;
  justify-content: center;
}

.helix-id-btn:hover {
  background: var(--surface-2);
}

.helix-id-btn[aria-expanded="true"] {
  color: var(--accent-strong);
}

/* Dim overlay: only dims the page (no blur). The blur lives on the sheet, so
   you only see the page blurred *through* the popover itself. */
.helix-id-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(20, 20, 22, 0.22);
  opacity: 0;
  transition: opacity 0.35s ease;
}

body.helix-id-open .helix-id-backdrop {
  opacity: 1;
}

/* The sheet slides up from the bottom; translucent frosted surface. */
.helix-id-sheet {
  position: fixed;
  left: 0;
  right: 0;
  /* Extend the panel well below the viewport so an upward elastic pull never
     reveals empty space underneath: the frosted surface keeps covering the
     bottom of the page. The extra depth is offset by matching bottom padding,
     so the visible content stays put. */
  bottom: -45vh;
  z-index: 999;
  margin: 0 auto;
  max-width: 460px;
  padding: 0.65rem 1.5rem calc(2rem + 45vh + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 28px 28px 0 0;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  border: 1px solid var(--header-border);
  border-bottom: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: none;
  will-change: transform;
}

body.helix-id-open .helix-id-sheet {
  transform: translateY(0);
}

.helix-id-sheet.is-dragging {
  transition: none;
}

.helix-id-grabber {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 0.25rem 0 1.1rem;
  flex: none;
}

.helix-id-title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 1.25rem;
  text-align: center;
}

.helix-id-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-md);
}

.helix-id-qr {
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
}

.helix-id-qr img,
.helix-id-qr canvas {
  display: block;
  width: 240px !important;
  height: 240px !important;
}

body.helix-id-open {
  overflow: hidden;
}

/* ----- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 11vw, 8.5rem) 0 clamp(3rem, 8vw, 6rem);
  overflow-x: clip;
}

.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle at center, var(--accent-soft), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Hero contents sit above the decorative ::before glow. */
.hero > .container {
  position: relative;
  z-index: 1;
}

/* Two columns on desktop: copy on the left, photo carousel on the right.
   The carousel column is slightly narrower so the headline keeps top billing. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  color: var(--accent-strong);
  margin-bottom: 1.2rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.hero h1 {
  font-size: clamp(3rem, 11vw, 7.5rem);
  margin-bottom: 0;
}

.hero h1 .accent {
  color: var(--accent);
}

/* ----- Helix letter glyph (SEO-safe) -------------------------------------- */
/* Off-screen sprite host: never takes layout space. */
.helix-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The wrapper flows inline like a normal letter. */
.helix-letter {
  display: inline;
}

/* The real character: present in the DOM (SEO / screen readers / copy-paste)
   but visually hidden. Standard, accessible "sr-only" clip technique. */
.helix-letter__char {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The decorative symbol that takes the letter's visual place. Sized in em so it
   scales with whatever font-size it is dropped into. */
.helix-letter__mark {
  display: inline-block;
  height: 0.72em;
  line-height: 1;
  vertical-align: baseline;
  padding: 0 0.04em;
}

.helix-letter__svg {
  height: 100%;
  width: auto;
  display: block;
}

.hero-lede {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.7;
  color: var(--text);
  max-width: 720px;
  margin: 1.8rem 0 0;
}

.hero-lede .quote-tail {
  display: block;
  margin-top: 1rem;
  color: var(--text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

/* ----- Hero photo carousel ------------------------------------------------ */
.hero-carousel {
  position: relative;
  min-width: 0;
}

/* Portrait-leaning frame: most crew photos are vertical, and landscapes crop
   gracefully to the centre via object-fit. */
.hero-carousel__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

/* A hairline accent ring keeps the card crisp against the warm background. */
.hero-carousel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 3;
}

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  z-index: 1;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
}

/* Slow Ken Burns drift on the active slide for a lively, premium feel. */
.hero-slide.is-active img {
  animation: hero-kenburns 7s ease-out forwards;
}

@keyframes hero-kenburns {
  from { transform: scale(1.12) translate3d(1.5%, 1.5%, 0); }
  to   { transform: scale(1.0) translate3d(0, 0, 0); }
}

/* Caption chip sits in a gradient scrim so text stays legible over any photo. */
.hero-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2.6rem 1.3rem 1.2rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.05;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
}

.hero-slide__caption::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 0.55rem;
  vertical-align: middle;
  background: var(--accent);
  border-radius: 2px;
}

/* Dots */
.hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.hero-dot {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.25s ease;
}

/* Expand the touch/click target to >= 24px (WCAG 2.5.8) without enlarging the
   visible dot. */
.hero-dot::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.hero-dot:hover {
  background: var(--text-faint);
}

.hero-dot.is-active {
  width: 26px;
  background: var(--accent);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Stack the carousel under the copy on narrower screens. */
@media (max-width: 820px) {
  /* Drop the hero's top padding so the full-bleed carousel sits flush against
     the (sticky) header. */
  .hero {
    padding-top: 0;
  }

  /* Drop side padding on the hero container so the carousel can span edge-to-edge
     without negative margins (which were widening the page on mobile). */
  .hero > .container {
    padding-inline: 0;
  }

  .hero-copy {
    padding-inline: var(--pad);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.2rem, 8vw, 3rem);
  }

  /* Carousel moves above the headline and spans the full viewport width. */
  .hero-carousel {
    order: -1;
    width: 100%;
    margin-inline: 0;
  }

  .hero-carousel__frame {
    aspect-ratio: 3 / 2;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ----- Recent updates: horizontal discovery rail ------------------------- */
.updates-rail {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  overflow-x: clip;
  max-width: 100%;
}
.updates-rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.updates-rail__title { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.updates-rail__sub { margin: 6px 0 0; color: var(--text-muted); }
.updates-rail__all {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: none;
  white-space: nowrap;
}
.updates-rail__all:hover { text-decoration: underline; }
.updates-rail__all i { transition: transform 0.2s ease; }
.updates-rail__all:hover i { transform: translateX(3px); }

.updates-rail__viewport {
  --rail-card-w: clamp(108px, 30vw, 200px);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--content-inset);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
}
.updates-rail__viewport::-webkit-scrollbar { display: none; }
.updates-rail__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: var(--radius-sm);
}
.updates-rail__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  gap: 12px;
  padding-inline: var(--content-inset);
  padding-block: 4px 12px;
  box-sizing: border-box;
}

.discovery-card {
  flex: 0 0 var(--rail-card-w);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.discovery-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.discovery-card__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.discovery-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.discovery-card__empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-faint);
  font-size: 1.6rem;
  background: var(--surface-2);
}
.discovery-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.discovery-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text);
}
.discovery-card__meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smaller, subtler comment badge on homepage discovery cards. */
.discovery-card .comment-count--corner {
  bottom: 6px;
  right: 6px;
  padding: 3px 7px;
  font-size: 0.62rem;
  font-weight: 600;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}
.discovery-card .comment-count--corner .fa-comment {
  font-size: 0.85em;
  opacity: 0.9;
}
.discovery-card .comment-count--corner:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

@media (min-width: 768px) {
  .updates-rail__viewport { --rail-card-w: clamp(140px, 16vw, 200px); }
  .discovery-card__title { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .updates-rail__all i { transition: none; }
}

/* ----- Auth (login) ------------------------------------------------------- */
.auth-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.5rem, 8vw, 6rem) 0;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 5vw, 2.75rem);
}

.auth-card h1 {
  font-size: clamp(2.2rem, 7vw, 3rem);
  margin-bottom: 0.25rem;
}

.auth-sub {
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  font-size: 0.92rem;
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.input::placeholder {
  color: var(--text-faint);
}

/* WebKit/iOS renders <input type="time"|"date"> as a native control with its
   own intrinsic min-width that ignores width:100% and overflows the parent.
   Stripping the native appearance makes it behave like a normal text box (the
   native picker still opens on tap). */
input[type="time"].input,
input[type="date"].input,
input[type="datetime-local"].input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

input[type="time"].input::-webkit-date-and-time-value,
input[type="date"].input::-webkit-date-and-time-value,
input[type="datetime-local"].input::-webkit-date-and-time-value {
  text-align: left;
}

input[type="time"].input::-webkit-calendar-picker-indicator,
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator {
  margin-left: auto;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.link-muted {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-muted:hover {
  color: var(--accent-strong);
}

.auth-footnote {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

/* ----- Registration ------------------------------------------------------- */
.auth-card.wide {
  max-width: 560px;
}

/* A native <select> styled to match .input, with a custom chevron. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23999' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.form-grid .field.col-full {
  grid-column: 1 / -1;
}

@media (max-width: 540px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Step indicator on the registration screens. */
.auth-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.auth-steps .step.is-active {
  color: var(--accent-strong);
}

.auth-steps .step-sep {
  width: 22px;
  height: 1.5px;
  background: var(--border-strong);
}

.success-panel {
  text-align: center;
}

.success-panel .success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.6rem;
}

/* Inline alert */
.alert {
  display: none;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
}

.alert.show {
  display: block;
}

.alert-error {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.alert-success {
  background: rgba(26, 163, 129, 0.12);
  border-color: #1aa381;
  color: light-dark(#137d63, #4fd1ab);
}

/* ----- Account page ------------------------------------------------------- */
.account-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(2rem, 6vw, 3rem) 0 1.5rem;
  flex-wrap: wrap;
}

.account-head .avatar-lg {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.2rem;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.account-head h1 {
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  margin: 0;
}

.account-head .acct-email {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.badge {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.section-title {
  font-size: 1.6rem;
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding-bottom: 3rem;
}

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.profile-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.profile-card .pc-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.profile-card .pc-value {
  font-size: 1.05rem;
  color: var(--text);
  word-break: break-word;
}

.profile-card .pc-value a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 3rem;
}

/* ----- Editable profile form --------------------------------------------- */
.profile-form {
  margin-bottom: 3rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 700;
}

.field-label .req {
  color: var(--accent-strong);
}

/* ----- Custom date picker ------------------------------------------------- */
.datepicker {
  position: relative;
}

.datepicker-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  cursor: pointer;
}

.datepicker-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datepicker-trigger.is-empty .datepicker-text {
  color: var(--text-faint);
}

.datepicker-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.datepicker-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: 268px;
  max-width: 340px;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.datepicker-pop[hidden] {
  display: none;
}

.datepicker-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.datepicker-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.datepicker-nav:hover {
  background: var(--surface-2);
}

.datepicker-selects {
  display: flex;
  flex: 1;
  gap: 0.4rem;
  justify-content: center;
}

.dp-select {
  position: relative;
}

.dp-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.dp-select-btn:hover {
  border-color: var(--accent);
}

.dp-select-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dp-select-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
}

.dp-select-caret {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.dp-select-btn[aria-expanded="true"] .dp-select-caret {
  transform: rotate(180deg);
}

.dp-select-list {
  position: absolute;
  z-index: 70;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.dp-select-list[hidden] {
  display: none;
}

.dp-option {
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
  color: var(--text);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
}

.dp-option:hover {
  background: var(--surface-2);
}

.dp-option.is-selected {
  background: var(--accent-fill);
  color: var(--accent-contrast);
  font-weight: 700;
}

.datepicker-weekdays,
.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datepicker-weekdays {
  margin-bottom: 0.3rem;
}

.datepicker-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}

button.dp-cell:hover {
  background: var(--surface-2);
}

.dp-cell.dp-empty {
  cursor: default;
}

.dp-cell.is-today {
  font-weight: 700;
  color: var(--accent-strong);
}

.dp-cell.is-selected,
button.dp-cell.is-selected:hover {
  background: var(--accent-fill);
  color: var(--accent-contrast);
  font-weight: 700;
}

.datepicker-foot {
  margin-top: 0.5rem;
  text-align: right;
}

.datepicker-clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}

.datepicker-clear:hover {
  color: var(--text);
  text-decoration: underline;
}

.subsection-title {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  margin: 2.25rem 0 0.4rem;
}

.section-help {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 0.9rem;
}

.toggle-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid var(--border);
}

.toggle-row:first-child {
  border-top: none;
}

.tr-text {
  min-width: 0;
}

.tr-title {
  font-weight: 600;
  color: var(--text);
}

.tr-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* macOS-style switch */
.switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

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

.switch-track {
  display: inline-block;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.2s ease;
}

.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.switch input:checked + .switch-track {
  background: var(--accent-fill);
}

.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(18px);
  /* Invert the thumb so it stays visible on the (near-white in dark mode)
     checked track. */
  background: var(--accent-contrast);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* ----- Error page --------------------------------------------------------- */
.error-wrap {
  text-align: center;
  padding: clamp(4rem, 14vw, 9rem) 0;
}

.error-wrap .code {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(5rem, 22vw, 12rem);
  color: var(--accent);
  line-height: 0.9;
}

.error-wrap h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  margin-top: 0.5rem;
}

.error-wrap p {
  color: var(--text-muted);
  max-width: 460px;
  margin: 0.5rem auto 2rem;
}

/* ----- Footer ------------------------------------------------------------- */
/* The footer is always black (identical in light and dark mode). */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0d0d0f;
  padding: 2rem 0;
  margin-top: auto;
}

.footer-inner {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

/* Columns: a wider brand column, then the link columns. Collapses to a single
   column on narrow screens. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-col {
  min-width: 0;
}

.footer-col--brand {
  max-width: 34ch;
}

.footer-inner .brand {
  font-size: 1.2rem;
}

.footer-tagline {
  margin: 1rem 0 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* Social CTA, set off from the tagline by a thin divider. */
.footer-social {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* Plain underlined text link — brightens on hover, matching the column links
   (the previous accent colour turned near-black and unreadable on the footer). */
.footer-social__link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.footer-social__link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* Theme block sits under the Account links, styled like another column section
   (heading + control stacked beneath it). */
.footer-theme {
  margin-top: 2rem;
}

.footer-theme .theme-toggle {
  margin-top: 0.1rem;
}

.footer-col__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  color: #fff;
  margin: 0 0 1rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}

/* Footer wordmark (horizontal). The footer is always black, so the logo is
   always white (via currentColor) regardless of light/dark mode. */
.footer-logo {
  display: block;
  height: 30px;
  width: auto;
  color: #fff;
  transition: color 0.15s ease;
}

.footer-brand:hover .footer-logo {
  color: #fff;
}

/* The toggle is a self-contained pill, but on the always-dark footer its
   theme-driven surfaces would flip to light in light mode. Pin it to dark
   surfaces so it reads as a control on the black footer in both themes. */
.footer-theme .theme-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.footer-theme .theme-opt {
  color: rgba(255, 255, 255, 0.6);
}

.footer-theme .theme-opt:hover {
  color: #fff;
}

.footer-theme .theme-opt.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* The footer is always dark, so its focus ring must stay light in both themes
   (the default near-black ring would be invisible against #0d0d0f). */
.site-footer :focus-visible {
  outline-color: #e5e5e7;
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  :root {
    --header-h: 84px;
  }
  .nav-links,
  .nav-right .account,
  .nav-right .auth-actions,
  .nav-right .btn {
    display: none;
  }
  .menu-toggle--bars {
    display: block;
  }
  .menu-toggle--profile {
    display: inline-flex;
  }
  .helix-id-btn {
    display: inline-flex;
  }
  .stats {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) {
  .mobile-menu {
    display: none;
  }
}

/* ----- Reduced motion ----------------------------------------------------- */
/* Honour the user's OS-level "reduce motion" setting: near-instant transitions,
   no looping/auto-playing animation, no parallax/drift, no large slide-ins.
   The site stays fully functional — it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  /* Hero carousel: kill the Ken Burns zoom/drift; show photos flat. */
  .hero-slide img,
  .hero-slide.is-active img {
    animation: none !important;
    transform: none !important;
  }

  /* Large off-screen slide-ins become instant rather than flying across. */
  .mobile-menu,
  .helix-id-sheet {
    transition: none !important;
  }

  /* Decorative hover lift on cards. */
  .plan-card:hover {
    transform: none !important;
  }
}

/* ----- Utilities ---------------------------------------------------------- */
.hidden { display: none !important; }

/* Component ``display`` rules must not defeat the native ``[hidden]`` attribute. */
[hidden] { display: none !important; }

/* ----- Login: multiple methods ------------------------------------------- */
.method-btn {
  justify-content: center;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--text-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-verifying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--text-muted);
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: helix-spin 0.8s linear infinite;
}

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

.hint-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

.code-input {
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.15rem;
}

.auth-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.auth-actions-row .link-muted {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ----- Account: sign-in & security --------------------------------------- */
.security {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  margin-bottom: 3rem;
}

.security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.security-row:first-child { border-top: none; }

.sr-text { min-width: 0; flex: 1 1 240px; }
.sr-title { font-weight: 700; }
.sr-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

.pk-state {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.25rem 0 1rem;
}

.pk-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.pk-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
}

.pk-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.pk-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.pk-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.pk-name {
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.pk-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.pk-edit-btn:hover { color: var(--accent); }

.pk-name-input {
  width: auto;
  max-width: 200px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

.pk-save, .pk-cancel {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ----- Toasts ------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: all 0.25s ease;
  z-index: 9999;
  padding: 0.75rem 1.15rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-md);
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background: #1a7f47; }
.toast-error { background: var(--accent-fill); color: var(--accent-contrast); }

/* =============================================================================
   Pace Calculator
   ========================================================================== */
.pace {
  padding: clamp(1.5rem, 5vw, 3rem) var(--pad) clamp(3rem, 8vw, 5rem);
}

/* Strip the native number spinners for a cleaner, app-like feel. */
.pace input[type="number"]::-webkit-outer-spin-button,
.pace input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pace input[type="number"] { -moz-appearance: textfield; }

/* ----- Header ----- */
.pace-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* ----- Header controls (unit switch + input-mode switch) ----- */
.pace-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-self: center;
}

/* Segmented controls support hold-and-drag selection: keep vertical scrolling
   but capture horizontal gestures, and never select text while sliding. */
.unit-switch,
.mode-switch,
.seg-toggle {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.unit-switch.is-dragging,
.mode-switch.is-dragging,
.seg-toggle.is-dragging { cursor: grabbing; }

/* ----- Unit switch (segmented control) ----- */
.unit-switch {
  --usw-pad: 5px;
  position: relative;
  display: inline-flex;
  align-self: center;
  padding: var(--usw-pad);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm) inset;
}

.unit-opt {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.7rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.unit-opt.is-active { color: var(--accent-contrast); }

.unit-switch__thumb {
  position: absolute;
  top: var(--usw-pad);
  bottom: var(--usw-pad);
  left: var(--usw-pad);
  width: calc(50% - var(--usw-pad));
  background: var(--accent-fill);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.unit-switch[data-active="mi"] .unit-switch__thumb {
  transform: translateX(100%);
}

/* ----- Input-mode switch (wheels vs typing) ----- */
.mode-switch {
  --msw-pad: 5px;
  position: relative;
  display: inline-flex;
  align-self: center;
  padding: var(--msw-pad);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm) inset;
}

.mode-opt {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 1rem;
  transition: color 0.2s ease;
}

.mode-opt.is-active { color: var(--accent-contrast); }

.mode-switch__thumb {
  position: absolute;
  top: var(--msw-pad);
  bottom: var(--msw-pad);
  left: var(--msw-pad);
  width: 48px;
  background: var(--accent-fill);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.mode-switch[data-active="type"] .mode-switch__thumb {
  transform: translateX(100%);
}

/* ----- Editor mode swap (slider vs keyboard) ----- */
[data-input-mode="slider"] .editor-pane--type { display: none; }
[data-input-mode="type"] .editor-pane--slider { display: none; }

/* "Custom" preset doubles as the value display when selected. */
.preset--custom { white-space: nowrap; }

/* ----- The "meter": tap a stat to edit it ----- */
.meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: clamp(1rem, 3vw, 1.4rem) 0;
}

.meter-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.meter-stat:hover { border-color: var(--text); }

.meter-stat__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
}

.meter-stat__value {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active stat: big, accented, spanning the full row on top. */
.meter-stat.is-active {
  grid-column: 1 / -1;
  order: -1;
  border-color: var(--accent);
  background: var(--accent-soft);
  padding: 1rem 1.1rem;
}

.meter-stat.is-active .meter-stat__label { color: var(--accent-strong); }

.meter-stat.is-active .meter-stat__value {
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1;
  color: var(--accent-strong);
}

/* ----- Editor (slider + keyboard) ----- */
.editor { margin-top: 0.25rem; }

.slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.step-btn {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.step-btn:hover { border-color: var(--text); }
.step-btn:active { background: var(--accent-soft); }

/* Range slider with an accent fill up to the thumb. */
.meter-slider {
  --fill: 0%;
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 / var(--fill) 100% no-repeat,
    var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  touch-action: pan-y;
}

.meter-slider:disabled { opacity: 0.5; cursor: not-allowed; }

.meter-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.meter-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.meter-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.meter-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.editor-hint { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--text-muted); text-align: center; }

/* Keyboard editor: only the active field's group is shown. */
.editor-pane--type {
  display: flex;
  justify-content: center;
}

.type-field { width: 100%; }
.type-field[hidden] { display: none !important; }

.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calc-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.calc-card--result {
  background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--surface);
}

.calc-card__top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

.calc-card__icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.05rem;
}

.calc-card__title {
  font-size: 1.3rem;
  margin: 0;
}

.driver-badge {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

/* ----- Distance presets ----- */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.preset {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.preset:hover { border-color: var(--text); }

.preset.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* ----- Big inputs (distance / speed steppers) ----- */
.big-input {
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0.1rem 0;
}

.big-input:focus { outline: none; }
.big-input::placeholder { color: var(--text-faint); }

.stepper {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  min-height: 72px;
}

.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.stepper__unit {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.stepper--sm { min-height: 60px; padding: 0.55rem 0.85rem; }
.stepper--sm .big-input { font-size: clamp(1.6rem, 6vw, 2rem); }

/* ----- Time / pace segmented inputs ----- */
.time-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.6rem;
  min-height: 72px;
}

.time-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.time-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 0;
}

.time-seg .big-input { padding: 0; }

.time-seg__label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-faint);
}

.time-colon {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  color: var(--text-faint);
  padding-bottom: 0.7rem;
  flex: 0 0 auto;
}

.time-input--sm { min-height: 60px; }
.time-input--sm .big-input { font-size: clamp(1.5rem, 6vw, 1.9rem); }

.pace-fields {
  display: grid;
  gap: 0.85rem;
}

.pace-field__label,
.adv-control__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.pace-field__unit {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1rem;
  color: var(--text-muted);
  padding-bottom: 0.7rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ----- Results ----- */
.result-list { margin: 0; display: grid; gap: 0.1rem; }

.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}

.result-row:first-child { border-top: none; }

.result-row dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
}

.result-row dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  color: var(--text);
  letter-spacing: 0.01em;
}

/* ----- Advanced race strategy (accordion inside one card) ----- */
.adv-shell { margin-top: clamp(0.9rem, 2.5vw, 1.25rem); }

/* The toggle is the card header — borderless, relies on the card's padding. */
.adv-toggle {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}

.adv-toggle__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.1rem;
}

.adv-toggle__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.adv-toggle__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.adv-toggle__sub { font-size: 0.82rem; color: var(--text-muted); }

.adv-toggle__chevron {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}

.adv-toggle.is-open .adv-toggle__chevron { transform: rotate(180deg); }

/* ----- Advanced content (expands within the card) ----- */
.advanced {
  margin-top: clamp(1rem, 3vw, 1.4rem);
  padding-top: clamp(1rem, 3vw, 1.4rem);
  border-top: 1px solid var(--border);
  animation: adv-in 0.3s ease;
}

@keyframes adv-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.adv-help {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.1rem;
}

/* Read-only echo of the main settings. */
.adv-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.adv-summary__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.adv-summary__item span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
}

.adv-summary__item strong {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* First-half pace block: same look & feel as the main meter + editor. */
.adv-firsthalf { margin-bottom: 1.4rem; }

.adv-firsthalf__top {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  margin-bottom: 0.85rem;
}

.adv-firsthalf__top .meter-stat__label { color: var(--accent-strong); }

.adv-firsthalf__value {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.adv-reset {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Checkpoint sub-section divider. */
.adv-subsection {
  margin-top: clamp(1.25rem, 3.5vw, 1.75rem);
  padding-top: clamp(1.1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--border);
}

.adv-subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.adv-subtitle i { color: var(--accent); font-size: 0.95em; }

/* First-half editor: give the slider and the chips room to breathe. */
.adv-firsthalf .editor { margin-bottom: 1.4rem; }
.adv-firsthalf .slider-row { padding: 0.2rem 0; }

/* ----- Negative-split chips ----- */
.split-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: stretch;
}

.split-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 56px;
  padding: 0 0.6rem;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.split-chip:hover { border-color: var(--text); }

.split-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* The "Custom" chip doubles as the live custom-percentage display + input. */
.split-chip--custom { flex: 1 1 130px; gap: 0.15rem; }
.split-chip__label[hidden],
.split-chip__edit[hidden] { display: none; }

.split-chip__edit {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.12rem;
}

.split-chip__input {
  width: 4.5ch;
  border: none;
  background: none;
  color: inherit;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1rem;
  text-align: right;
  -moz-appearance: textfield;
}
.split-chip__input::-webkit-outer-spin-button,
.split-chip__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.split-chip__input:focus { outline: none; }
.split-chip__pct { font-weight: 900; }

/* ----- Tables ----- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.calc-table th,
.calc-table td {
  text-align: right;
  padding: 0.7rem 0.35rem;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

.calc-table th:first-child,
.calc-table td:first-child { padding-left: 0; }
.calc-table th:last-child,
.calc-table td:last-child { padding-right: 0; }

.calc-table thead th {
  border-top: none;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
}

.calc-table th:first-child,
.calc-table td:first-child { text-align: left; }

.calc-table tbody th {
  font-weight: 600;
  color: var(--text);
}

.calc-table td {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.calc-table__total th,
.calc-table__total td {
  border-top: 2px solid var(--border-strong);
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.92rem;
}

.calc-table__total td { color: var(--accent-strong); }

.calc-table__empty {
  text-align: center !important;
  color: var(--text-muted);
  padding: 1.25rem 0.6rem;
}

.adv-note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.adv-note strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ----- Save bar ----- */
.save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.save-bar__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }

.save-bar__title {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.2rem;
}

.save-bar__sub { font-size: 0.85rem; color: var(--text-muted); }

.save-bar__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ----- Save modal ----- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 560px) {
  .modal { align-items: center; padding: var(--pad); }
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 17, 0.5);
  backdrop-filter: blur(2px);
}

.modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 5vw, 2rem);
  animation: modal-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-width: 560px) {
  .modal__card { border-radius: var(--radius-lg); animation: modal-pop 0.2s ease; }
}

@keyframes modal-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes modal-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.modal__title { font-size: 1.8rem; margin: 0 0 1.25rem; }

.modal__sub { color: var(--text-muted); font-size: 0.95rem; margin: -0.6rem 0 1.25rem; }

/* Export dialog: format choices + live preview. */
.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.export-actions .btn { flex: 1 1 auto; justify-content: center; }

.export-preview {
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  max-height: 320px;
  overflow-y: auto;
}
.export-preview img { display: block; width: 100%; height: auto; }

.modal .field { margin-bottom: 1.1rem; }

.modal textarea.input { resize: vertical; line-height: 1.5; }

.field-optional { color: var(--text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

body.modal-open { overflow: hidden; }

/* =============================================================================
   My Race Plans
   ========================================================================== */
.plans-page { padding: clamp(1.5rem, 5vw, 3rem) var(--pad) clamp(3rem, 8vw, 5rem); }

.plans-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.plans-head h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); margin: 0.1rem 0 0; }

.plans-state { color: var(--text-muted); padding: 2rem 0; }

.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 620px) {
  .plans-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.plan-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.plan-card__body { padding: 1.25rem 1.25rem 0.5rem; flex: 1 1 auto; }

.plan-card__name { font-size: 1.4rem; margin: 0 0 1rem; }

.plan-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.plan-stat { display: flex; flex-direction: column; gap: 0.15rem; }

.plan-stat__k {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
}

.plan-stat__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.plan-card__notes {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plan-card__meta {
  font-size: 0.74rem;
  color: var(--text-faint);
  margin: 0 0 0.5rem;
}

.plan-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.plan-card__actions .btn { flex: 1 1 auto; }
.plan-card__actions .plan-delete:hover { color: var(--accent); border-color: var(--accent); }

/* ----- In-page race-plans panel (inside the calculator) ----- */
.plans-panel {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.plans-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.plans-panel__head h2 { margin: 0; font-size: 1.5rem; }

.plans-panel .plans-state,
.plans-panel .empty-state { padding: 0.75rem 0; }

.empty-state { color: var(--text-muted); font-size: 0.92rem; }
.empty-state strong { color: var(--text); }

.icon-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover { border-color: var(--text); color: var(--text); }

.plan-card__date { font-size: 0.72rem; color: var(--text-faint); margin: 0; }

.plan-card.is-editing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.plan-card__delete { flex: 0 0 auto !important; }
.plan-card__delete:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================================
   CMS — admin area
   ============================================================================= */
.cms {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad) 80px;
  width: 100%;
}

.cms-sidebar-toggle { display: none; }

.cms-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  height: fit-content;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.cms-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  padding: 6px 10px 14px;
}

.cms-nav { display: flex; flex-direction: column; gap: 2px; }

.cms-nav__group {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  padding: 14px 12px 6px;
}

.cms-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-nav__link i { width: 18px; text-align: center; }
.cms-nav__link:hover { background: var(--surface-2); color: var(--text); }
.cms-nav__link.is-active {
  background: var(--accent-fill);
  color: var(--accent-contrast);
}

.cms-main { min-width: 0; }

.cms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cms-title { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0; }
.cms-sub { color: var(--text-muted); margin: 6px 0 0; font-size: 0.9rem; }
.cms-sub a { color: var(--accent-strong); text-decoration: underline; }

.cms-section-title {
  font-size: 1.1rem;
  margin: 32px 0 14px;
  letter-spacing: 0.02em;
}

.cms-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.cms-breadcrumb a { color: var(--text-muted); }
.cms-breadcrumb a:hover { color: var(--text); text-decoration: underline; }

/* ----- Dashboard cards ----- */
.cms-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.cms-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.cms-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 1.2rem;
}

/* Per-module icon accents — the dashboard stays black & white, but the
   module icons get a tint so the tiles are easier to tell apart at a glance.
   Tints adapt to the active theme via light-dark(). */
.cms-card__icon--updates {
  background: light-dark(#e8f0e6, #1d2c20);
  color: light-dark(#2f7d3a, #6fd083);
}
.cms-card__icon--events {
  background: light-dark(#fbe3e3, #331c1c);
  color: light-dark(#d23b3b, #f08585);
}
.cms-card__icon--communications {
  background: light-dark(#e3eefb, #182636);
  color: light-dark(#2f7bd2, #79b6f5);
}
.cms-card__icon--media {
  background: light-dark(#efe6f7, #261b33);
  color: light-dark(#7d3fbf, #b98cea);
}
.cms-card__icon--store {
  background: light-dark(#fdf0e0, #33260f);
  color: light-dark(#c87a16, #f0b556);
}
.cms-card__title { font-size: 1.3rem; margin: 0 0 4px; }
.cms-card__desc { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 10px; }
.cms-card__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.cms-card__actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }

.cms-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
}
.cms-pill--muted { background: var(--surface-2); color: var(--text-muted); }

.cms-note {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.cms-note code {
  font-size: 0.82em;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ----- Toolbar / search ----- */
.cms-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
.cms-toolbar__filters { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cms-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.cms-search > i {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.cms-search .input { padding-left: 38px; width: 100%; }
.cms-field-inline { display: inline-flex; }
.cms-field-inline .input { width: auto; }

/* ----- Entries table ----- */
.cms-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Scroll the table horizontally on narrow screens instead of clipping
     columns; the scroll stays inside this box so the page width is untouched. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
/* Keep columns readable: below this width the wrapper scrolls horizontally. */
.cms-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cms-table th, .cms-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cms-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  background: var(--surface-2);
}
.cms-table tbody tr:last-child td { border-bottom: none; }
.cms-table tbody tr:hover { background: var(--surface-2); }
.cms-th-cover, .cms-td-cover { width: 64px; }
.cms-th-select, .cms-td-select { width: 36px; text-align: center; padding-right: 0; }
.cms-th-actions { width: 1%; }
.cms-td-actions { white-space: nowrap; text-align: right; }
.cms-td-date { color: var(--text-muted); font-size: 0.84rem; white-space: nowrap; }

/* Native checkbox tinted to the brand accent (accessible + zero JS). */
.cms-check {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

/* Bulk action bar — appears once one or more rows are selected. */
.cms-bulkbar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cms-bulkbar[hidden] { display: none; }
.cms-bulkbar__count { font-size: 0.9rem; color: var(--text); }
.cms-bulkbar__count strong { color: var(--accent); }
.cms-bulkbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cms-bulkbar__clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.cms-bulkbar__clear:hover { color: var(--text); }

.cms-thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--text-faint);
}
.cms-thumb--empty { border: 1px dashed var(--border-strong); }

.cms-row-title { font-weight: 600; color: var(--text); }
.cms-row-title:hover { text-decoration: underline; }
.cms-row-slug { font-size: 0.76rem; color: var(--text-faint); margin-top: 2px; }

.cms-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}
.cms-status--published { background: rgba(26, 127, 71, 0.16); color: light-dark(#1a7f47, #5fd99a); }
/* Draft now reads as a warm "work in progress" amber so published vs. draft is
   distinguishable at a glance, by colour alone. */
.cms-status--draft { background: rgba(180, 130, 20, 0.18); color: light-dark(#9a6b00, #e0b15e); }

.cms-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 8px;
  color: var(--text-muted);
}
.cms-tag--star { color: light-dark(#9a6b00, #e7c66b); }

.cms-icon-btn {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cms-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.cms-icon-btn--danger:hover { color: light-dark(#c0392b, #ff7a6b); }

.cms-empty { color: var(--text-muted); padding: 18px; text-align: center; }
.cms-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.cms-empty-state > i { font-size: 2.4rem; color: var(--text-faint); margin-bottom: 12px; }
.cms-empty-state h2 { margin: 0 0 6px; }
.cms-empty-state p { margin: 0 0 18px; }

/* ----- Entry form ----- */
.cms-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
/* Grid items default to min-width:auto, which lets wide content (e.g. the Store
   variants grid) push past its track and overlap the side column. Pinning the
   main column to min-width:0 keeps it inside its track so it can shrink. */
.cms-form__main { min-width: 0; }
.cms-form__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }

.cms-field { margin-bottom: 18px; }
.cms-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.cms-label--sub { font-size: 0.76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cms-form textarea.input { resize: vertical; font-family: var(--font-body); }
.cms-help { font-size: 0.76rem; color: var(--text-faint); margin: 6px 0 0; }
.cms-help--ok { color: light-dark(#1a7f47, #5fd99a); }
.cms-help--warn { color: light-dark(#9a6b00, #e7c66b); }
.req { color: light-dark(#c0392b, #ff7a6b); }

.cms-slug { display: flex; align-items: stretch; }
.cms-slug__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-strong);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text-faint);
  font-size: 0.82rem;
  white-space: nowrap;
}
.cms-slug .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.cms-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 8px 0 0;
}
.cms-fieldset legend { padding: 0 8px; }

.cms-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.cms-panel__title { font-size: 1rem; margin: 0 0 14px; }
.cms-panel__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cms-panel__actions .btn { width: 100%; }

.cms-toggle-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.cms-toggle-label { font-size: 0.88rem; }

/* Status field colour indicator: a coloured dot + tinted accent on the publish
   status select so "Published" (green) vs "Draft" (amber) vs "Archived" (grey)
   is obvious at a glance. Works on the enhanced custom select (.hx-select) and
   degrades to the bare <select> if enhancement is unavailable. */
.cms-status-select .hx-select__value {
  display: inline-flex;
  align-items: center;
  /* Status labels are short, so drop the ellipsis clipping that would
     otherwise cut off the indicator dot's halo on the left edge. */
  overflow: visible;
}
.cms-status-select .hx-select__value::before,
select.cms-status-select::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 9px;
  flex: none;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px transparent;
}
.cms-status-select.is-status-published { --status-dot: light-dark(#1a7f47, #46c98a); }
.cms-status-select.is-status-draft { --status-dot: light-dark(#c98a17, #e0b15e); }
.cms-status-select.is-status-archived { --status-dot: light-dark(#7a8696, #9aa7b8); }
.cms-status-select.is-status-published .hx-select__value::before,
.cms-status-select.is-status-draft .hx-select__value::before,
.cms-status-select.is-status-archived .hx-select__value::before {
  background: var(--status-dot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-dot) 22%, transparent);
}
.cms-status-select.is-status-published .hx-select__btn { border-color: color-mix(in srgb, var(--status-dot) 55%, var(--border-strong)); }
.cms-status-select.is-status-draft .hx-select__btn { border-color: color-mix(in srgb, var(--status-dot) 55%, var(--border-strong)); }

/* SEO field header: sub-label on the left, "use article title/excerpt" toggle
   on the right. */
.cms-seo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cms-seo-auto { display: inline-flex; align-items: center; gap: 8px; }
.cms-seo-auto__text {
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

/* Compact switch variant. */
.switch--sm .switch-track { width: 38px; height: 22px; }
.switch--sm .switch-thumb { width: 16px; height: 16px; top: 3px; left: 3px; }
.switch--sm input:checked + .switch-track .switch-thumb { transform: translateX(16px); }

/* Greyed-out SEO input while it mirrors the article title/excerpt. */
.input.is-auto {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

.btn-danger-text { color: light-dark(#c0392b, #ff7a6b) !important; }
.btn-danger-text:hover { background: rgba(192, 57, 43, 0.1) !important; }

/* Live preview of a title that uses the Helix glyph marker. */
.cms-title-preview {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.05rem;
  color: var(--text);
}
.cms-title-preview .helix-letter__mark { height: 0.9em; }

/* Custom right-click context menu (title field: cut/copy/paste + Helix). */
.ctx-menu {
  position: fixed;
  z-index: 1200;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-elevated, var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.ctx-menu__item:hover:not(:disabled),
.ctx-menu__item:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.ctx-menu__item:disabled {
  color: var(--text-muted);
  opacity: 0.5;
  cursor: default;
}
.ctx-menu__sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--border);
}
.ctx-menu__glyph {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  color: var(--accent, currentColor);
}
.ctx-menu__item--helix { font-weight: 600; }

.cms-cover__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.cms-cover__preview img { width: 100%; height: 100%; object-fit: cover; }
.cms-cover__empty { color: var(--text-faint); font-size: 0.84rem; }
.cms-cover__actions { display: flex; gap: 8px; }

/* ----- Quill editor theming ----- */
.cms-editor { min-height: 320px; background: var(--surface); }
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--border-strong) !important;
}
.ql-toolbar.ql-snow {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-2);
}
.ql-container.ql-snow {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.ql-editor { min-height: 280px; color: var(--text); }
.ql-editor.ql-blank::before { color: var(--text-faint); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--text-muted); }
.ql-snow .ql-fill { fill: var(--text-muted); }
.ql-snow .ql-picker { color: var(--text-muted); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--text); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--text); }
.ql-snow .ql-picker-options {
  background: var(--surface);
  border-color: var(--border-strong) !important;
}

/* ----- Media library page ----- */
.cms-media-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
}
.cms-media-layout[data-media-library] { position: relative; }

.cms-folders {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  align-self: start;
}
.cms-folders__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 4px 6px 10px;
}
.cms-folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cms-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.86rem;
}
.cms-folder i { width: 16px; }
.cms-folder:hover { background: var(--surface-2); color: var(--text); }
.cms-folder.is-active { background: var(--accent-fill); color: var(--accent-contrast); }

.cms-media-main { min-width: 0; }

.cms-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.cms-media-grid--page { margin-top: 4px; }

.cms-media-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cms-media-card:hover { border-color: var(--border-strong); }
.cms-media-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.cms-media-card__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.cms-media-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-media-card__badge {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  padding: 2px 6px;
  border-radius: 5px;
}
.cms-media-card__name {
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-media-card__meta { font-size: 0.68rem; color: var(--text-faint); }

/* Upload-in-progress placeholder card. */
.cms-media-card--uploading { cursor: default; }
.cms-media-card--uploading:hover { border-color: var(--border); }
.cms-media-card--uploading .cms-media-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cms-media-card__spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: helix-spin 0.8s linear infinite;
}

/* ----- Media detail drawer ----- */
.cms-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 92vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  z-index: 60;
  overflow-y: auto;
}
.cms-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cms-drawer__title { margin: 0; font-size: 1.2rem; }
.cms-drawer__preview {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.cms-drawer__preview img { width: 100%; height: 100%; object-fit: contain; }
.cms-drawer__meta { margin: 0 0 16px; font-size: 0.82rem; }
.cms-drawer__meta dt { color: var(--text-faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 10px; }
.cms-drawer__meta dd { margin: 2px 0 0; word-break: break-word; }
.cms-drawer__actions { display: flex; gap: 8px; margin-top: 16px; }

/* ----- Media modal (picker) ----- */
.cms-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.cms-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.cms-modal__panel {
  position: relative;
  width: min(820px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cms-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cms-modal__title { margin: 0; font-size: 1.3rem; }
.cms-modal__toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.cms-modal__toolbar .cms-search { flex: 1 1 160px; }
.cms-upload-btn { cursor: pointer; }
.cms-modal__body { padding: 18px 20px; overflow-y: auto; }
.cms-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.cms-modal__status { font-size: 0.8rem; color: var(--text-muted); }
.cms-modal__actions { display: flex; gap: 8px; }
body.cms-modal-open { overflow: hidden; }

/* ----- Cover crop tool ----- */
.cms-cover__actions { flex-wrap: wrap; }
.cms-cover__hint { margin: 10px 0 0; font-size: 0.78rem; color: var(--text-muted); }

.cms-crop__panel { width: min(720px, 100%); }
.cms-crop__tabs {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cms-crop__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.2;
}
.cms-crop__tab:hover { border-color: var(--border-strong); color: var(--text); }
.cms-crop__tab.is-active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.cms-crop__tab-name { font-size: 0.84rem; font-weight: 600; }
.cms-crop__tab-ratio { font-size: 0.72rem; color: var(--text-faint); }

.cms-crop__intro { margin: 0 0 14px; font-size: 0.84rem; color: var(--text-muted); }
.cms-crop__stage {
  position: relative;
  width: 100%;
  height: clamp(220px, 42vh, 380px);
  display: grid;
  place-items: center;
  background:
    repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 24px 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cms-crop__frame {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 9999px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}
.cms-crop__frame.is-dragging { cursor: grabbing; }
.cms-crop__frame img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.cms-crop__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%;
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cms-crop__frame.is-dragging .cms-crop__grid { opacity: 1; }
.cms-crop__zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--text-muted);
}
.cms-crop__zoom input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); }

/* ----- Inline image insert options (rich-text) ----- */
/* A step shown after picking an image in the editor: choose how it is displayed
   inline (size + shape + text flow) with a live preview, and drag to reposition
   the crop, before it is inserted at the cursor. Built by cms.js and appended to
   <body>; reuses the modal chrome. */
.rte-imgopts__panel { width: min(620px, 100%); }

/* Live preview: a representative text column the image sits in, so the admin
   sees size, shape, crop and how text wraps — exactly as it will render. */
.rte-imgopts__stage {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow: auto;
}
.rte-imgopts__stage::after { content: ""; display: block; clear: both; }
.rte-imgopts__lorem {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.7;
}
.rte-imgopts__figure {
  margin: 0 auto 0.6em;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-3, rgba(0, 0, 0, 0.08));
  touch-action: none;
}
.rte-imgopts__figure img { display: block; width: 100%; }
.rte-imgopts__figure.is-cropable { cursor: grab; }
.rte-imgopts__figure.is-cropable:active,
.rte-imgopts__figure.is-dragging { cursor: grabbing; }
.rte-imgopts__figure--left { float: left; margin: 0 16px 8px 0; }
.rte-imgopts__figure--right { float: right; margin: 0 0 8px 16px; }
.rte-imgopts__hint {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 14px;
  font-size: 0.78rem; color: var(--text-muted);
}
.rte-imgopts__group { margin-bottom: 16px; }
.rte-imgopts__legend {
  font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px;
}
.rte-imgopts__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.rte-imgopts__choice {
  flex: 1 1 auto;
  min-width: 84px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.rte-imgopts__choice:hover { border-color: var(--border-strong); color: var(--text); }
.rte-imgopts__choice.is-active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.rte-imgopts__choice i { margin-right: 4px; opacity: 0.8; }

/* Gallery layout chooser: layout options (grid of 2/3, or a swipeable slider)
   plus a per-image crop frame the admin can drag to reframe each photo. */
.rte-galopts__count { font-size: 0.82rem; font-weight: 400; color: var(--text-muted); }
.rte-galopts__crops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.rte-galopts__crop {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3, rgba(0, 0, 0, 0.08));
  cursor: grab;
  touch-action: none;
}
.rte-galopts__crop.is-dragging { cursor: grabbing; }
.rte-galopts__crop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Custom buttons added to the Quill toolbar (FontAwesome icons). */
.ql-toolbar button.ql-rtegallery,
.ql-toolbar button.ql-rteyt { width: 28px; }
.ql-toolbar button.ql-rtegallery i,
.ql-toolbar button.ql-rteyt i { font-size: 14px; color: #444; }
.ql-toolbar button.ql-rtegallery:hover i,
.ql-toolbar button.ql-rteyt:hover i { color: var(--accent-strong, #06c); }

/* =============================================================================
   Public Updates pages
   ============================================================================= */
.updates { padding-block: 40px 80px; }
.updates-head { margin-bottom: 32px; }
.updates-head h1 { font-size: clamp(2.4rem, 8vw, 4rem); margin: 0; }
.updates-lede { color: var(--text-muted); font-size: 1.05rem; margin: 8px 0 0; }

.updates-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.update-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}
.update-card:hover { border-color: var(--border-strong); }
.update-card--featured { grid-column: span 2; }
.update-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.update-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}
.update-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.update-card:hover .update-card__media img { transform: scale(1.04); }
.update-card__media-empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-faint); font-size: 2rem; }
.update-card__flag {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  padding: 4px 10px;
  border-radius: 999px;
}
.update-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.update-card__date { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.update-card__title { font-size: 1.5rem; margin: 0; }
.update-card__excerpt { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.update-card__more {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.update-card:hover .update-card__more i { transform: translateX(3px); }
.update-card__more i { transition: transform 0.2s ease; }

.updates-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.updates-empty > i { font-size: 2.6rem; color: var(--text-faint); margin-bottom: 14px; }

/* ----- Single article ----- */
.article { padding-block: 32px 80px; }
.article-back { margin-bottom: 20px; font-size: 0.84rem; }
.article-back a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.article-back a:hover { color: var(--text); }
.article-head { margin-bottom: 24px; }
.article-date { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.article-byline { margin: 10px 0 0; font-size: 0.92rem; }
.article-byline__link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); text-decoration: none;
}
.article-byline__link:hover, .article-byline__link:focus-visible { color: var(--text); }
.article-byline__avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.article-byline__avatar--ph {
  display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--text); font-weight: 700; font-size: 0.72rem;
}

.author-page { padding-block: 48px; }
.author-page__head {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 36px;
}
.author-page__avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.author-page__avatar--ph {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--text);
  font-family: var(--font-display, inherit); font-size: 2rem; font-weight: 700;
}
.author-page__name { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.author-page__bio { margin: 0; color: var(--text-muted); max-width: 60ch; line-height: 1.55; }
.author-page__section-title { margin: 0 0 20px; font-size: 1.35rem; }

.cms-author__card {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.cms-author__avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.cms-author__avatar--ph {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--text); font-weight: 700;
}
.cms-author__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cms-author__name { font-weight: 600; }
.cms-author__type { align-self: flex-start; }
.cms-author__search, .cms-author__create { margin-top: 4px; }
.cms-author__search .btn + .btn { margin-top: 12px; }
.cms-author__results {
  list-style: none; margin: 8px 0 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 240px; overflow: auto; background: var(--surface);
}
.cms-author__result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; background: none; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.cms-author__result:hover, .cms-author__result:focus-visible {
  background: var(--surface-2);
}
.cms-author__result-text { display: flex; flex-direction: column; min-width: 0; }
.cms-author__result-name { font-weight: 600; }
.cms-author__result-meta { color: var(--text-muted); font-size: 0.8rem; }
.cms-author__empty { padding: 12px; color: var(--text-muted); font-size: 0.88rem; }
.cms-author__create-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.cms-author-merge { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 220px; }
.cms-author-merge .input { width: 100%; }
.cms-author-merge__picked { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.cms-author-merge .cms-author__results { max-height: 180px; }

.account-muted { margin-top: 40px; }
.account-muted__state { color: var(--text-muted); margin: 0 0 12px; }
.account-muted__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-muted__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.account-muted__type { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.account-muted__title { flex: 1; min-width: 160px; font-weight: 600; }
.account-muted__link { color: inherit; text-decoration: none; }
.account-muted__link:hover { text-decoration: underline; }
.account-push { margin: 40px 0 3rem; }
.push-status { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; }
.push-prefs { margin-top: 16px; }
.push-prefs > .btn { margin-top: 1.25rem; }
.article-title { font-size: clamp(2rem, 6vw, 3.4rem); margin: 8px 0 12px; }
.article-lede { font-size: 1.15rem; color: var(--text-muted); margin: 0; }
.article-cover {
  margin: 0 0 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.article-cover img { display: block; width: 100%; height: auto; }

/* Rich-text rendering (shared by article body and any CMS-rendered HTML) */
.rich-text { font-size: 1.05rem; line-height: 1.75; color: var(--text); }
.rich-text > * { margin: 0 0 1.1em; }
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { margin: 1.6em 0 0.5em; line-height: 1.1; }
.rich-text h2 { font-size: 1.8rem; }
.rich-text h3 { font-size: 1.4rem; }
.rich-text a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.rich-text a:hover { color: var(--accent-strong-hover); }
.rich-text img { border-radius: var(--radius-sm); margin: 1.4em 0; }

/* Inline image display presets chosen in the editor (size + shape + text flow).
   Shared by the public rich-text body (.rich-text / .rte) and the Quill editor
   (.ql-editor) so what an admin frames is what visitors see. The container
   :is() list keeps Updates (.rich-text) and Events (.rte) bodies in sync.
   Default (no class) keeps the natural size. */
:is(.rich-text, .rte, .ql-editor) img.rte-img { display: block; height: auto; cursor: zoom-in; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--sm   { width: 320px; max-width: 100%; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--md   { width: 540px; max-width: 100%; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--lg   { width: 820px; max-width: 100%; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--full { width: 100%; }
/* Centre the smaller block presets within the column (unless floated). */
:is(.rich-text, .rte, .ql-editor) img.rte-img--sm:not(.rte-img--wrap-left):not(.rte-img--wrap-right),
:is(.rich-text, .rte, .ql-editor) img.rte-img--md:not(.rte-img--wrap-left):not(.rte-img--wrap-right) { margin-inline: auto; }

/* Shapes: crop to a fixed aspect ratio regardless of the source. The crop
   position comes from object-position (applied from data-rte-pos by JS). */
:is(.rich-text, .rte, .ql-editor) img.rte-img--wide,
:is(.rich-text, .rte, .ql-editor) img.rte-img--shape-wide     { aspect-ratio: 16 / 9; object-fit: cover; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--shape-portrait { aspect-ratio: 4 / 5;  object-fit: cover; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--shape-square   { aspect-ratio: 1 / 1;  object-fit: cover; }

/* Text flow: float so body text wraps beside the image (column structure). */
:is(.rich-text, .rte, .ql-editor) img.rte-img--wrap-left  { float: left;  max-width: 55%; margin: 0.3em 1.4em 1em 0; }
:is(.rich-text, .rte, .ql-editor) img.rte-img--wrap-right { float: right; max-width: 55%; margin: 0.3em 0 1em 1.4em; }
/* Keep the body box from collapsing around floated images. */
.rich-text::after, .rte::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
  :is(.rich-text, .rte, .ql-editor) img.rte-img--wrap-left,
  :is(.rich-text, .rte, .ql-editor) img.rte-img--wrap-right {
    float: none; max-width: 100%; margin-inline: auto;
  }
}
.ql-editor img.rte-img { cursor: default; }

/* ----- Multi-image blocks: grids + sliders (rte-gallery) ----- */
/* A block embed produced by the editor; one <figure> with several <img>. The
   public lightbox (article.js) collects these images automatically. */
.rte-gallery { margin: 1.6em 0; }
.rte-gallery img { margin: 0; border-radius: var(--radius-sm); cursor: zoom-in; }
.rte-gallery--grid-2, .rte-gallery--grid-3 { display: grid; gap: 10px; }
.rte-gallery--grid-2 { grid-template-columns: repeat(2, 1fr); }
.rte-gallery--grid-3 { grid-template-columns: repeat(3, 1fr); }
.rte-gallery--grid-2 img, .rte-gallery--grid-3 img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Selected image outline — shared across every rich-text editor (Updates,
   Events, Communications) for both single images and photos inside a grid. */
.ql-editor img.is-rte-selected {
  outline: 3px solid var(--accent, #111);
  outline-offset: 3px;
  cursor: pointer;
}
.rte-gallery--slider {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Dots + chevrons replace the scrollbar, so hide it (all engines). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rte-gallery--slider::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rte-gallery--slider img {
  flex: 0 0 82%; scroll-snap-align: center;
  aspect-ratio: 16 / 9; object-fit: cover;
}
@media (min-width: 700px) {
  .rte-gallery--slider img { flex-basis: 48%; }
}

/* Slider chrome added by app.js: a wrapper for the overlay chevrons + the
   hero-style dots below. */
.rte-gallery-wrap { position: relative; }
.rte-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.rte-gallery__nav:hover { background: var(--surface); }
.rte-gallery__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rte-gallery__nav--prev { left: 8px; }
.rte-gallery__nav--next { right: 8px; }
.rte-gallery__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 560px) {
  .rte-gallery__nav { width: 34px; height: 34px; }
}
/* Slider dots (added by app.js): same look as the homepage hero carousel. */
.rte-gallery__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
@media (max-width: 560px) {
  .rte-gallery--grid-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Inside the editor, stop the embed from being squeezed and show it as a block. */
.ql-editor .rte-gallery { -webkit-user-select: none; user-select: none; }
.rich-text ul, .rich-text ol { padding-left: 1.4em; }
.rich-text li { margin: 0.3em 0; }
.rich-text blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
}
.rich-text pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.rich-text code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}
.rich-text pre code { background: none; padding: 0; }
/* Embedded players (YouTube). Shared across the public bodies and the editor
   so a pasted video shows full-width 16:9 instead of Quill's tiny default. */
:is(.rich-text, .rte, .ql-editor) iframe,
.ql-editor iframe.ql-video {
  width: 100%; max-width: 100%;
  aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: var(--radius-sm);
  margin: 1.4em 0;
}

/* ----- CMS responsive ----- */
@media (max-width: 900px) {
  .cms-form__grid { grid-template-columns: 1fr; }
  .cms-form__side { position: static; }
  .update-card--featured { grid-column: span 1; }
  /* Stacked on mobile: surface the cover image above Publish so the cover is
     chosen before the publish/save controls. */
  .cms-form__side .cms-panel--cover { order: -1; }
}

@media (max-width: 820px) {
  .cms { grid-template-columns: 1fr; padding-top: 16px; }
  .cms-sidebar-toggle { display: inline-flex; margin-bottom: 12px; }
  .cms-sidebar {
    position: fixed;
    /* Start below the sticky header so its top isn't clipped by it. */
    top: var(--header-h); left: 0;
    height: calc(100% - var(--header-h));
    width: min(260px, 80vw);
    z-index: 70;
    border-radius: 0;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .cms-sidebar.is-open { transform: translateX(0); }
  .cms-media-layout { grid-template-columns: 1fr; }
  .cms-folders { display: flex; flex-wrap: wrap; gap: 6px; }
  .cms-folders__head { width: 100%; }
  .cms-folder-list { flex-direction: row; flex-wrap: wrap; }

  /* Standalone Media Library detail panel: on desktop it's a narrow side
     drawer, but on mobile that "pop-over" doesn't fit. Make it a full-screen
     sheet below the sticky header (matching the picker modal) so every control
     is reachable. */
  .cms-drawer {
    top: var(--header-h);
    right: 0;
    width: 100%;
    height: calc(100% - var(--header-h));
    border-left: 0;
    z-index: 75;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .cms-drawer__preview { aspect-ratio: 4 / 3; max-height: 46vh; }

  /* Media picker goes fullscreen below the sticky header on mobile so the
     whole interface (incl. footer buttons) is reachable and scrollable. */
  .cms-modal {
    inset: var(--header-h) 0 0 0;
    padding: 0;
    place-items: stretch;
  }
  .cms-modal__panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .cms-modal__head,
  .cms-modal__toolbar,
  .cms-modal__foot { flex-shrink: 0; }
  .cms-modal__foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .cms-modal__body { flex: 1 1 auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .update-card,
  .update-card__media img,
  .update-card__more i,
  .cms-sidebar { transition: none; }
}

/* =============================================================================
   Custom select (on-brand replacement for native <select>)
   ============================================================================= */
.hx-select { position: relative; display: block; width: 100%; }
/* Inline filter/sort contexts keep their natural (auto) width. */
.cms-field-inline .hx-select { width: auto; }

/* The native <select> stays in the DOM as the value source, visually hidden. */
.hx-select__native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hx-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}
.hx-select__btn:focus-visible,
.hx-select__btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hx-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-select__caret {
  font-size: 0.7em;
  color: var(--text-muted);
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}
.hx-select__btn[aria-expanded="true"] .hx-select__caret { transform: rotate(180deg); }
.hx-select.is-disabled { opacity: 0.55; }
.hx-select.is-disabled .hx-select__btn { cursor: not-allowed; }

.hx-select__list {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.hx-select__list[hidden] { display: none; }
.hx-select__option {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--text);
}
.hx-select__option.is-active { background: var(--surface-2); }
.hx-select__option.is-selected { background: var(--accent-fill); color: var(--accent-contrast); }

/* =============================================================================
   On-brand dialogs (confirm / prompt / alert) — replace native browser modals
   ============================================================================= */
.hx-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hx-dialog-backdrop.show { opacity: 1; }
.hx-dialog {
  width: min(440px, 100%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.hx-dialog-backdrop.show .hx-dialog { transform: translateY(0); }
.hx-dialog__title { margin: 0 0 8px; font-size: 1.6rem; }
.hx-dialog__body { margin: 0 0 16px; color: var(--text-muted); }
.hx-dialog__input { margin-bottom: 18px; }
.hx-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
body.hx-dialog-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hx-dialog-backdrop, .hx-dialog, .hx-select__caret { transition: none; }
}

/* =============================================================================
   EVENTS MODULE
   ========================================================================== */

/* Extra status colour for archived entries (Events). */
.cms-status--archived { background: rgba(180, 130, 20, 0.16); color: light-dark(#9a6b00, #e0b15e); }

/* ---- CMS: shared event admin bits ---- */
.cms-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cms-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.cms-field--toggle { display: flex; align-items: flex-end; }
.cms-color { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.cms-note--empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 24px; }
.cms-note--empty i { font-size: 2rem; color: var(--text-faint); }
.cms-loading { color: var(--text-muted); padding: 12px 0; }

/* ---- CMS: event cards (admin list) ---- */
.cms-event-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.cms-event-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border-top: 3px solid var(--ev-color, var(--accent)); }
.cms-event-card__cover { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.cms-event-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-event-card__cover-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: 1.8rem; }
/* Over a cover photo the translucent badge is unreadable, so use solid,
   high-contrast pills (white text on a saturated fill) regardless of theme. */
.cms-event-card__cover .cms-status {
  position: absolute; top: 10px; left: 10px;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.cms-event-card__cover .cms-status--published { background: #1a7f47; color: #fff; }
.cms-event-card__cover .cms-status--draft { background: #c0791a; color: #fff; }
.cms-event-card__cover .cms-status--archived { background: #5b6675; color: #fff; }
.cms-event-card__body { padding: 14px 16px; flex: 1; }
.cms-event-card__title { margin: 0 0 6px; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.cms-event-card__title a { color: inherit; text-decoration: none; }
.cms-event-card__title a:hover { text-decoration: underline; }
.cms-event-card__star { color: #e0a82e; font-size: 0.85rem; }
.cms-event-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; color: var(--text-muted); font-size: 0.85rem; }
.cms-event-card__meta i { margin-right: 4px; }
.cms-event-card__stats { display: flex; gap: 6px; flex-wrap: wrap; }
.cms-event-card__actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); }
.cms-pill--full { background: rgba(200, 50, 50, 0.16); color: light-dark(#b3261e, #ff6b5e); }

/* ---- CMS: gallery picker ---- */
.cms-gallery__grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cms-gallery__item { position: relative; width: 92px; height: 92px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.cms-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.cms-gallery__remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; display: grid; place-items: center; }

/* ---- CMS: event dashboard ---- */
/* Stacked panels in the main column (dashboard) need breathing room between
   them; scoped to direct children so the form's side column (which already
   uses flex gap) is unaffected. */
.cms-main > .cms-panel + .cms-panel { margin-top: 20px; }
/* Same spacing for the campaign editor's main column (Audience, Preview, …). */
.cms-form__main > .cms-panel { margin-top: 20px; }
.cms-form__main > .cms-panel:first-child { margin-top: 0; }
.cms-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.cms-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.cms-stat__icon { color: var(--text-faint); font-size: 1.1rem; margin-bottom: 6px; }
.cms-stat__num { font-family: var(--font-display, inherit); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.cms-stat__label { color: var(--text-muted); font-size: 0.82rem; margin-top: 6px; }

.cms-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.cms-tab { border: none; background: none; padding: 10px 14px; cursor: pointer; color: var(--text-muted); font: inherit; border-bottom: 2px solid transparent; display: inline-flex; gap: 6px; align-items: center; }
.cms-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.cms-tab__count { background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; }
.cms-tabpanel { display: none; }
.cms-tabpanel.is-active { display: block; }

.cms-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cms-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cms-person__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cms-person__avatar--ph { display: grid; place-items: center; background: var(--accent-soft); color: var(--text); font-weight: 700; }
.cms-person__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cms-person__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-person__meta { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-badge { font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cms-badge--ok { background: rgba(26, 127, 71, 0.16); color: light-dark(#1a7f47, #5fd99a); }
.cms-badge--muted { background: var(--surface-2); color: var(--text-muted); }

/* ---- CMS: staff ---- */
.cms-staff-add { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.cms-staff-add .input { flex: 1; min-width: 200px; }
.cms-staff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cms-staff-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cms-staff-item__name { font-weight: 600; }
.cms-staff-item__meta { color: var(--text-muted); font-size: 0.82rem; flex: 1; }

/* ---- Public: events overview ---- */
.events-page { padding-block: 48px; }
.events-head { margin-bottom: 28px; }
.events-lede { color: var(--text-muted); max-width: 60ch; }
.events-section-title { margin: 28px 0 16px; font-size: 1.5rem; }
.events-section-title--past { margin-top: 48px; }
.events-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.events-grid--past { opacity: 0.78; }
.event-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; border-top: 4px solid var(--ev-color, var(--accent)); }
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.event-card--featured { box-shadow: 0 0 0 2px var(--ev-color, var(--accent)) inset, var(--shadow-sm); }
.event-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.event-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card__media-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: 2.2rem; }
.event-card__cat { position: absolute; top: 12px; left: 12px; background: var(--ev-color, var(--accent)); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; }
.event-card__flag { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.event-card__flag--full { background: #b3261e; }
.event-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.event-card__date { color: var(--ev-color, var(--accent)); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.event-card__title { margin: 6px 0 8px; font-size: 1.3rem; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: 0.85rem; margin: 0 0 10px; }
.event-card__meta i { margin-right: 4px; }
.event-card__excerpt { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 14px; }
.event-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.event-card__spots { font-weight: 600; font-size: 0.85rem; }
.event-card__spots--full { color: #b3261e; }
.event-card__more { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }

/* ---- Public: "who's going" attendee row (avatars + summary) ----
   A stack of overlapping avatars; opted-out / avatar-less members render as an
   anonymous placeholder and are pushed to the end of the row by the service. */
.attendees { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attendees--card { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.attendees__avatars { display: flex; flex-shrink: 0; }
.attendees__avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--surface); background: var(--surface-2); margin-left: -10px; display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box; }
.attendees__avatar:first-child { margin-left: 0; }
.attendees__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attendees__avatar--ph { color: var(--text-faint); font-size: 0.72rem; background: var(--accent-soft); }
.attendees__avatar--more { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); }
.attendees__summary { margin: 0; font-size: 0.84rem; color: var(--text-muted); min-width: 0; }
.attendees--panel { gap: 12px; }
.attendees--panel .attendees__avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.attendees--panel .attendees__summary { font-size: 0.92rem; color: var(--text); }

.event-register__going { margin: 4px 0 18px; }
.event-register__going-title { margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }

/* ---- Slide-to-confirm control (mobile register / cancel) ---- */
.slide-confirm { width: 100%; user-select: none; -webkit-user-select: none; }
.slide-confirm__track { position: relative; height: 52px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slide-confirm__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 52px; background: var(--ev-color, var(--accent)); opacity: 0.16; border-radius: 999px; pointer-events: none; }
.slide-confirm__label { position: relative; z-index: 1; font-weight: 600; font-size: 0.92rem; color: var(--text-muted); padding-left: 36px; pointer-events: none; }
.slide-confirm__thumb { position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ev-color, var(--accent)); color: #fff; display: grid; place-items: center; font-size: 1rem; cursor: grab; z-index: 2; touch-action: none; transform: translateX(0); transition: transform 0.25s ease; box-shadow: var(--shadow-sm); }
.slide-confirm__thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slide-confirm.is-dragging .slide-confirm__thumb { cursor: grabbing; transition: none; }
.slide-confirm.is-done .slide-confirm__thumb { cursor: default; }
.slide-confirm--danger .slide-confirm__thumb { background: #b3261e; }
.slide-confirm--danger .slide-confirm__fill { background: #b3261e; }

/* ---- Confirmation dialog (destructive actions) ---- */
.confirm-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.18s ease; }
.confirm-modal.is-open { opacity: 1; }
.confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); border: 0; }
.confirm-modal__panel { position: relative; width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); padding: 26px 24px 22px; box-shadow: var(--shadow-lg); transform: translateY(8px) scale(0.98); transition: transform 0.18s ease; }
.confirm-modal.is-open .confirm-modal__panel { transform: translateY(0) scale(1); }
.confirm-modal__title { margin: 0 0 10px; font-size: 1.3rem; }
.confirm-modal__msg { margin: 0 0 20px; color: var(--text-muted); line-height: 1.55; }
.confirm-modal__actions { display: flex; flex-direction: column; gap: 10px; }

.btn-danger { background-color: #b3261e; color: #fff; border-color: #b3261e; }
.btn-danger:hover { background-color: #9a1f18; border-color: #9a1f18; box-shadow: var(--shadow-md); }

/* ---- Public: event detail ---- */
.event-detail__hero { position: relative; min-height: 320px; display: flex; align-items: flex-end; background: var(--surface-2); overflow: hidden; }
.event-detail__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-detail__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.25)); }
.event-detail__hero-inner { position: relative; padding-block: 32px; color: #fff; }
.event-detail__back { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.9rem; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.event-detail__cat { display: inline-block; background: var(--ev-color, var(--accent)); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.event-detail__title { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; }
.event-detail__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: rgba(255,255,255,0.92); font-size: 0.95rem; }
.event-detail__meta i { margin-right: 6px; }
.event-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding-block: 40px; align-items: start; }
.event-detail__body { font-size: 1.05rem; line-height: 1.7; }
.event-detail__subtitle { margin: 32px 0 16px; font-size: 1.4rem; }
.event-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.event-gallery__cell { margin: 0; }
.event-gallery__item { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); }
.event-gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.35s ease; }
.event-gallery__item:hover img, .event-gallery__item:focus-visible img { transform: scale(1.06); }
.event-gallery__item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Public: registration panel ---- */
.event-register { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--ev-color, var(--accent)); }
.event-register__cap-head { display: flex; align-items: baseline; gap: 6px; font-size: 1.5rem; font-weight: 700; }
.event-register__cap-total { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; }
.event-register__bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
.event-register__bar-fill { display: block; height: 100%; background: var(--ev-color, var(--accent)); border-radius: 999px; transition: width 0.3s ease; }
.event-register__cap-note { color: var(--text-muted); font-size: 0.88rem; margin: 0; }
.event-register__status { margin: 18px 0 14px; font-size: 0.98rem; }
.event-register__status--ok { color: light-dark(#1a7f47, #5fd99a); font-weight: 600; }
.event-register__status--wait { color: light-dark(#9a6b00, #e0b15e); font-weight: 600; }
.event-register__status--muted { color: var(--text-muted); }
.event-register__actions { display: flex; flex-direction: column; gap: 10px; }
.event-register__hint { margin: 16px 0 0; color: var(--text-faint); font-size: 0.82rem; }

/* ---- Check-in screen ---- */
.checkin { padding-block: 28px; max-width: 1000px; }
.checkin__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.checkin__back { color: var(--text-muted); text-decoration: none; font-size: 0.88rem; display: inline-flex; gap: 6px; align-items: center; }
.checkin__title { margin: 8px 0 4px; font-size: 1.8rem; }
.checkin__meta { color: var(--text-muted); margin: 0; }
.checkin__counter { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--ev-color, var(--accent)); border-radius: var(--radius); padding: 12px 20px; text-align: center; }
.checkin__counter-num { font-size: 1.7rem; font-weight: 700; }
.checkin__counter-label { display: block; color: var(--text-muted); font-size: 0.78rem; }
.checkin__result { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; font-size: 1.05rem; }
.checkin__result--ok { background: rgba(26, 127, 71, 0.16); color: light-dark(#1a7f47, #5fd99a); }
.checkin__result--info { background: var(--surface-2); color: var(--text); }
.checkin__result--error { background: rgba(200, 50, 50, 0.16); color: light-dark(#b3261e, #ff6b5e); }
.checkin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.checkin__reader { width: 100%; aspect-ratio: 1; max-width: 380px; margin: 0 auto; background: #000; border-radius: var(--radius); overflow: hidden; }
.checkin__reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
.checkin__scanner-controls { display: flex; justify-content: center; gap: 10px; margin: 16px 0 8px; }
.checkin__hint { text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.checkin__subtitle { margin: 0 0 14px; font-size: 1.2rem; }
.checkin__results { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.checkin__results .cms-person { gap: 12px; }

@media (max-width: 860px) {
  .event-detail__grid { grid-template-columns: 1fr; }
  .event-register { position: static; }
  .checkin__grid { grid-template-columns: 1fr; }
  .cms-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- CMS: read-only (slug-mirrored) event id field ---- */
.input.is-readonly { opacity: 0.65; cursor: default; background: var(--surface-2); }

/* ---- CMS: date + time combo field ----
   The combo lives inside a 2-col grid, so horizontal space is tight. Let the
   time input wrap under the date picker when there isn't room for both, and
   trim the trigger's padding so the selected date stays on a single line. */
.cms-datetime { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.cms-datetime .datepicker { flex: 1 1 10rem; min-width: 0; }
.cms-datetime .datepicker-trigger { padding-left: 0.75rem; padding-right: 0.75rem; gap: 0.4rem; }
.cms-datetime__time { flex: 1 1 6rem; min-width: 0; }

/* ---- Check-in confirmation sheet ---- */
.ci-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.ci-sheet[hidden] { display: none; }
.ci-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); border: 0; }
.ci-sheet__panel { position: relative; width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 4px solid var(--ev-color, var(--accent)); padding: 26px 24px 24px; box-shadow: var(--shadow-lg); animation: ci-sheet-in 0.28s ease; }
@keyframes ci-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ci-sheet__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 1rem; }
.ci-sheet__close:hover { background: var(--border); }
.ci-sheet__person { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ci-sheet__avatar { width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.ci-sheet__avatar.is-ph { background: var(--accent-soft); color: var(--text); }
.ci-sheet__name { margin: 0; font-size: 1.3rem; }
.ci-sheet__sub { margin: 2px 0 0; color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ci-sheet__status { margin: 0 0 14px; font-weight: 600; font-size: 0.98rem; padding: 10px 14px; border-radius: var(--radius); }
.ci-sheet__status.is-ok { background: rgba(26, 127, 71, 0.16); color: light-dark(#1a7f47, #5fd99a); }
.ci-sheet__status.is-ready { background: var(--accent-soft); color: var(--text); }
.ci-sheet__status.is-warn { background: rgba(200, 50, 50, 0.14); color: light-dark(#b3261e, #ff6b5e); }
.ci-sheet__details { margin: 0 0 18px; display: grid; gap: 8px; }
.ci-sheet__detail { display: flex; justify-content: space-between; gap: 16px; font-size: 0.9rem; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ci-sheet__detail dt { color: var(--text-muted); margin: 0; }
.ci-sheet__detail dd { margin: 0; text-align: right; font-weight: 500; }
.ci-sheet__actions { display: flex; gap: 10px; }
.ci-sheet__actions .btn { flex: 1; }
body.ci-sheet-open { overflow: hidden; }
@media (min-width: 560px) {
  .ci-sheet { align-items: center; }
  .ci-sheet__panel { border-radius: var(--radius-lg); }
}

/* ---- Gallery lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); border: 0; }
.lightbox__dialog { position: relative; width: min(94vw, 1100px); height: min(90vh, 860px); display: flex; align-items: center; justify-content: center; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__img { max-width: 88vw; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0,0,0,0.5); }
.lightbox__caption { color: rgba(255,255,255,0.92); font-size: 0.9rem; text-align: center; margin: 0; max-width: 60ch; }
.lightbox__caption[hidden] { display: none; }
.lightbox__close { position: absolute; top: -4px; right: -4px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.lightbox__close:hover { background: rgba(255,255,255,0.28); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.lightbox__nav:hover { background: rgba(255,255,255,0.28); }
.lightbox__nav--prev { left: -4px; }
.lightbox__nav--next { right: -4px; }
.lightbox__nav[hidden] { display: none; }
.lightbox__counter { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-size: 0.82rem; margin: 0; font-variant-numeric: tabular-nums; }
.lightbox__counter[hidden] { display: none; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.lightbox-open { overflow: hidden; }
@media (max-width: 560px) {
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__close { top: 4px; right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-sheet__panel { animation: none; }
  .event-gallery__item img { transition: none; }
}


/* =============================================================================
   Communications module
   ========================================================================== */
.cms-section { margin: 0 0 2.5rem; }
.cms-section__title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border);
}
.cms-table__actions { text-align: right; white-space: nowrap; }

.cms-note--warn {
  border-left: 3px solid #d97706;
  background: light-dark(rgba(217, 119, 6, 0.08), rgba(217, 119, 6, 0.16));
}
.cms-note--ok {
  border-left: 3px solid #16a34a;
  background: light-dark(rgba(22, 163, 74, 0.08), rgba(22, 163, 74, 0.16));
}

.cms-inline-row { display: flex; gap: .5rem; align-items: center; }
.cms-inline-row .input { flex: 1 1 auto; }

.cms-status-line { margin: .75rem 0 0; font-size: .85rem; color: var(--text-muted); min-height: 1.1em; }
.cms-status-line.is-error { color: #dc2626; }

/* Segmented control (audience source) */
.cms-segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.cms-segmented__opt { position: relative; }
.cms-segmented__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cms-segmented__opt span {
  display: block; padding: .45rem 1rem; cursor: pointer; font-size: .9rem;
  color: var(--text-muted); user-select: none;
}
.cms-segmented__opt input:checked + span { background: var(--accent-fill); color: var(--accent-contrast); }

/* Audience option rows (radios / checkboxes).
   NB: use a dedicated class — ".cms-check" is already taken by the entries
   table for a 17x17 native checkbox, which would otherwise squash these rows. */
.cms-check-list { display: flex; flex-direction: column; gap: .5rem; }
.cms-opt { display: flex; align-items: center; gap: .55rem; font-size: .9rem; line-height: 1.3; cursor: pointer; }
.cms-opt input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* Photo-grid layout chooser (campaign / template email editor). */
.cms-grid-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.cms-grid-choices .btn { flex: 1 1 0; justify-content: center; min-width: 130px; }

/* Member search results + chips */
.cms-search-results {
  list-style: none; margin: .4rem 0 0; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-sm); max-height: 220px; overflow: auto; background: var(--surface);
}
.cms-search-results li + li { border-top: 1px solid var(--border); }
.cms-search-result {
  display: flex; flex-direction: column; gap: 0; width: 100%; text-align: left;
  background: none; border: none; padding: .5rem .7rem; cursor: pointer; color: var(--text);
}
.cms-search-result:hover { background: var(--surface-2); }
.cms-search-result small { color: var(--text-faint); }
.cms-chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.cms-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem;
  background: var(--surface-2); border-radius: 999px; font-size: .82rem;
}
.cms-chip__x { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--text-muted); }

/* Recipient preview */
.cms-audience-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.cms-audience-count { font-size: 1rem; margin: 0 0 .5rem; }
.cms-audience-count strong { font-size: 1.4rem; }
.cms-recipient-list { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 320px; overflow: auto; }
.cms-recipient-list--full { max-height: none; }
.cms-recipient {
  display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .5rem 0;
  border-bottom: 1px solid var(--border); font-size: .85rem;
}
.cms-recipient__name { font-weight: 600; }
.cms-recipient__email { color: var(--text-muted); }
.cms-recipient__reason { color: var(--text-faint); font-size: .8rem; }
.cms-recipient__error { color: #dc2626; font-size: .8rem; }
.cms-recipient--more { color: var(--text-faint); font-style: italic; }
.cms-recipient.is-failed .cms-recipient__name { color: #dc2626; }

/* Template manager */
.cms-template-list { list-style: none; margin: 0; padding: 0; }
.cms-template-item {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: .6rem .4rem; border-bottom: 1px solid var(--border); color: var(--text);
}
.cms-template-item:hover { background: var(--surface-2); }
.cms-template-item__name { font-weight: 600; }
.cms-template-item__cat { color: var(--text-faint); font-size: .78rem; text-transform: capitalize; }

/* Stacked, full-width action buttons for narrow side panels (e.g. the
   "Save as template" / "Manage templates" pair, which never fit side by side
   in the 320px campaign sidebar). */
.cms-btn-stack { display: flex; flex-direction: column; gap: .5rem; }
.cms-btn-stack > .btn { width: 100%; justify-content: center; }

/* Template manager: a single full-width column. While browsing, the list fills
   the width; while editing, the editor fills the width — so toggling between
   the two doesn't make the area jump in size. */
[data-templates-page] { grid-template-columns: 1fr; }
[data-templates-page]:not(.is-editing) > .cms-form__main { display: none; }
[data-templates-page].is-editing > .cms-form__side { display: none; }
.cms-form__back { margin-bottom: 14px; }

/* Collapsible side panel (campaign editor). The toggle hides the right column
   so the content editor can use the full width — desktop only, since the
   panels already stack below the editor on mobile. */
.cms-form__grid { transition: grid-template-columns .35s ease; }
.cms-form__side { transition: opacity .25s ease, transform .3s ease; }
@media (min-width: 901px) {
  .cms-form__grid.side-collapsed { grid-template-columns: minmax(0, 1fr) 0; }
  .cms-form__grid.side-collapsed > .cms-form__side {
    opacity: 0; transform: translateX(16px); pointer-events: none;
    min-width: 0; overflow: hidden;
  }
}
@media (max-width: 900px) { [data-side-toggle] { display: none; } }

/* Sent campaign detail */
.cms-meta-list { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; margin: 0; font-size: .9rem; }
.cms-meta-list dt { color: var(--text-muted); }
.cms-meta-list dd { margin: 0; }
.cms-rendered-html { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem; background: var(--surface); }

/* Email preview */
.cms-preview-meta { font-size: .85rem; color: var(--text-muted); margin: 0 0 .75rem; }
.cms-preview-frame { width: 100%; min-height: 460px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }

.cms-send { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.cms-test { margin-top: 1rem; }

/* Signature media picker grid */
.cms-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem; max-height: 50vh; overflow: auto;
}
.cms-media-tile {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0;
  background: var(--surface); cursor: pointer; overflow: hidden; aspect-ratio: 1;
}
.cms-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-media-tile:hover { border-color: var(--border-strong); }

/* =============================================================================
   Profile photo (avatar) — account editor + login prompt
   ============================================================================= */

/* Clickable avatar on the account page */
.avatar-edit {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.avatar-edit:hover,
.avatar-edit:focus-visible {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
  outline: none;
}
.avatar-edit:focus-visible {
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft);
}
.avatar-edit__badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--bg);
  pointer-events: none;
}
/* Larger avatar on desktop account page */
@media (min-width: 768px) {
  .account-head .avatar-lg {
    width: 112px;
    height: 112px;
    font-size: 2.8rem;
  }
  .avatar-edit__badge {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
}

/* Upload-in-progress state */
.is-uploading .avatar-edit__badge,
.is-uploading .avatar-prompt__badge {
  background: var(--text-muted);
}

/* "Add a profile photo" pop-over */
.avatar-prompt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.avatar-prompt-backdrop.show { opacity: 1; }
body.avatar-prompt-open { overflow: hidden; }

.avatar-prompt {
  position: relative;
  width: min(420px, 100%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 5vw, 2rem);
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.22s ease;
}
.avatar-prompt-backdrop.show .avatar-prompt {
  transform: translateY(0) scale(1);
}
.avatar-prompt__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.avatar-prompt__close:hover,
.avatar-prompt__close:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.avatar-prompt__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  line-height: 1.2;
}
.avatar-prompt__sub {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.avatar-prompt__photo {
  position: relative;
  display: inline-block;
  margin: 0 auto 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.avatar-prompt__photo:hover,
.avatar-prompt__photo:focus-visible {
  transform: scale(1.04);
  outline: none;
}
.avatar-prompt__avatar {
  width: 140px;
  height: 140px;
  font-size: 3.2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-md);
}
.avatar-prompt__badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-contrast);
  display: grid;
  place-items: center;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--bg-elevated);
  pointer-events: none;
}
.avatar-prompt__hint {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.avatar-prompt__actions {
  display: flex;
  justify-content: center;
}
.avatar-prompt.is-done .avatar-prompt__hint {
  color: var(--accent-strong);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-prompt-backdrop,
  .avatar-prompt,
  .avatar-edit,
  .avatar-prompt__photo { transition: none; }
}

/* =============================================================================
   Community Discussion — Comments
   ============================================================================= */

/* ----- Section shell ------------------------------------------------------- */
.comments {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border);
}

.comments__head {
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.comments__mute { flex-shrink: 0; }

.comments__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.comments__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
}

.comments__wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ----- Comment-count badge (overview cards + homepage carousel) ----------- */
.comment-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
.comment-count__n { font-variant-numeric: tabular-nums; }
.comment-count .fa-comment { font-size: 1em; }

/* Pill overlaid on a card's cover image, bottom-right corner. It's clickable:
   a tap jumps straight to that item's comments (the rest of the card opens the
   page as usual), so it's sized to be noticed and clearly tappable. */
.comment-count--corner {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  padding: 8px 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.comment-count--corner:hover {
  background: var(--accent-fill, #1d1d1f);
  color: var(--accent-contrast, #fff);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .comment-count--corner { transition: none; }
  .comment-count--corner:hover { transform: none; }
}

.comments__status {
  min-height: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.comments__status--error { color: light-dark(#c0392b, #ff7a6b); }

.comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.comments__loading,
.comments__empty {
  margin: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ----- Members-only gate (logged out) -------------------------------------- */
.comments-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.comments-gate__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text-muted);
  font-size: 1.25rem;
}

.comments-gate__text {
  margin: 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.comments-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

/* ----- Composer ------------------------------------------------------------ */
.comment-composer {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.comment-composer__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.comment-composer__input {
  min-height: 4.5rem;
  resize: vertical;
}

.comment-composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.comment-composer__hint {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ----- Avatars ------------------------------------------------------------- */
.comment-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-avatar--me {
  width: 2.75rem;
  height: 2.75rem;
}

.comment-avatar--ghost {
  background: var(--bg);
  color: var(--text-faint);
  font-size: 0.875rem;
}

/* ----- Single comment ------------------------------------------------------ */
.comment {
  scroll-margin-top: 5rem;
}

.comment__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment--highlight > .comment__row {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.comment__main {
  flex: 1;
  min-width: 0;
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}

.comment__author {
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--text);
}

.comment__author-tag {
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
}

.comment__crew-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem 0.1rem 0.4rem;
  border-radius: 999px;
  background: light-dark(rgba(26, 127, 71, 0.12), rgba(95, 214, 138, 0.16));
  color: light-dark(#1a7f47, #5fd68a);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}

.comment__crew-badge i {
  display: block;
  font-size: 0.8125rem;
}

.comment__crew-badge-label {
  text-transform: none;
}

.cms-comment__meta .comment__crew-badge {
  font-size: 0.6875rem;
}

.comment__you {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.comment__time {
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.comment__edited {
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.comment__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
}

.comment__deleted-note {
  margin: 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.comment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-top: 0.5rem;
}

.comment__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.625rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.comment__action:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.comment__action--danger:hover {
  background: light-dark(rgba(192, 57, 43, 0.1), rgba(255, 122, 107, 0.12));
  color: light-dark(#c0392b, #ff7a6b);
}

.comment--deleted > .comment__row {
  background: var(--bg);
  border-style: dashed;
}

/* ----- Replies (one level) ------------------------------------------------- */
.comment__replies {
  list-style: none;
  margin: 0.625rem 0 0 1.25rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.comment--reply > .comment__row {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* ----- Inline reply / edit forms ------------------------------------------- */
.comment-inline-form {
  margin: 0.625rem 0 0 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.comment-inline-form--reply {
  margin-left: 3.25rem;
}

.comment-inline-form--edit {
  margin: 0;
}

.comment-inline-form__input {
  min-height: 4rem;
  resize: vertical;
}

.comment-inline-form__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ----- Account page: My Comments ------------------------------------------- */
.account-comments {
  margin-top: 1.5rem;
}

.account-comments__state {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* Live count pill on the "View my comments" button. */
.account-comments__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  margin-left: 0.15rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* ----- Account page: Achievements ------------------------------------------ */
.account-achievements {
  margin: 2.5rem 0 0;
}

.account-achievements__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.achievements-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .achievements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.achievement-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  background: var(--surface, #fff);
}

.achievement-card__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent, #c45c26);
  font-size: 1.1rem;
}

.achievement-card__body {
  min-width: 0;
}

.achievement-card__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.achievement-card__desc {
  margin: 0 0 6px;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.achievement-card__date {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ----- My Comments dialog -------------------------------------------------- */
.modal__card--lg {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  max-height: min(82vh, 760px);
  padding: 0;
  overflow: hidden;
}

.my-comments-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(1.25rem, 4vw, 1.5rem) clamp(1.25rem, 4vw, 1.75rem) 0.75rem;
}

.my-comments-modal__head .modal__title {
  margin: 0;
  font-size: 1.5rem;
}

.my-comments-modal__close {
  flex-shrink: 0;
}

.my-comments-modal__toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0 clamp(1.25rem, 4vw, 1.75rem) 1rem;
  border-bottom: 1px solid var(--border);
}

.my-comments-modal__toolbar .cms-search {
  flex: 1 1 220px;
}

.my-comments-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem);
}

.my-comments-modal__body .my-comments-list {
  margin-top: 0;
}

.my-comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.my-comment {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.my-comment__main {
  flex: 1;
  min-width: 0;
}

.my-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.my-comment__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.my-comment__badge--muted {
  opacity: 0.75;
}

.my-comment__on {
  color: var(--text-muted);
}

.my-comment__title {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

a.my-comment__title:hover {
  text-decoration: underline;
}

.my-comment__date {
  margin-left: auto;
  white-space: nowrap;
}

.my-comment__preview {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}

.my-comment__preview.is-deleted {
  font-style: italic;
  color: var(--text-faint);
}

.my-comment__del {
  flex-shrink: 0;
  min-width: 2.5rem;
  min-height: 2.5rem;
}

/* ----- CMS admin moderation ------------------------------------------------ */
.cms-card__icon--comments {
  background: light-dark(rgba(29, 29, 31, 0.06), rgba(229, 229, 231, 0.08));
  color: var(--text-muted);
}

.cms-comments {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cms-comments__count {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: center;
}

.cms-comments__noresults {
  margin-top: 0.5rem;
}

.cms-comment {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cms-comment.is-deleted {
  opacity: 0.72;
  background: var(--bg);
}

.cms-comment__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cms-comment__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-comment__main {
  flex: 1;
  min-width: 0;
}

.cms-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}

.cms-comment__author {
  font-weight: 650;
  font-size: 0.9375rem;
}

.cms-comment__date {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.cms-comment__body {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cms-comment__body--deleted {
  font-style: italic;
  color: var(--text-faint);
}

.cms-comment__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cms-comment__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.cms-comment__link:hover {
  color: var(--text);
  text-decoration: underline;
}

.cms-comment__link--muted {
  cursor: default;
}

.cms-comment__link--muted:hover {
  text-decoration: none;
}

.cms-comment__del {
  flex-shrink: 0;
}

/* ----- Responsive tweaks --------------------------------------------------- */
@media (max-width: 640px) {
  .comment-composer {
    flex-direction: column;
    align-items: stretch;
  }

  .comment-avatar--me {
    width: 2.25rem;
    height: 2.25rem;
  }

  .comment__replies {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
  }

  .comment-inline-form,
  .comment-inline-form--reply {
    margin-left: 0;
  }

  .my-comment__date {
    margin-left: 0;
    width: 100%;
  }

  .cms-comment__date {
    margin-left: 0;
    width: 100%;
  }

  .cms-comment {
    flex-wrap: wrap;
  }

  .cms-comment__del {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comment__row,
  .comment__action { transition: none; }
}

/* =============================================================================
   CMS: Store module (products)
   ========================================================================== */
.cms-product-card { border-top-color: light-dark(#c87a16, #f0b556); }

/* Variants & checkout-fields repeaters */
.store-variant,
.store-cfield {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
/* Always stack the variant fields the readable way (the layout that used to
   only kick in on narrow screens): colour on its own full-width row, then
   Size/SKU, then Price/Stock. On wide desktops the 5-up single row squeezed the
   number inputs to the point of being unreadable, so we keep this everywhere. */
.store-variant__grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.store-variant__color { grid-column: 1 / -1; }
.store-cfield__grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.3fr) auto;
  gap: 10px 12px;
  align-items: end;
}
.store-variant .cms-field,
.store-cfield .cms-field { margin: 0; }
.store-variant__color-row { display: flex; gap: 8px; align-items: center; }
.store-variant__color-row .cms-color { flex: 0 0 auto; }
.store-variant__color-row .input { flex: 1; min-width: 0; }
.store-cfield__req { align-self: end; padding-bottom: 8px; }
.store-variant__remove,
.store-cfield__remove { flex: 0 0 auto; align-self: center; }

/* Product media grid */
.store-media__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.store-media__item {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.store-media__item img,
.store-media__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-media__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.store-media__item.is-default { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.store-media__badge {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
}
.store-media__badge[hidden] { display: none; }
.store-media__star {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
}
.store-media__star:hover { background: rgba(0, 0, 0, 0.82); }
.store-media__star:disabled { opacity: 0.5; cursor: default; }
.store-media__item.is-default .store-media__star { display: none; }
.store-media__upload { margin-top: 10px; max-width: 360px; }
.store-media__default-opt { margin-top: 10px; }
.store-media__default-note { margin-top: 8px; font-size: 0.8rem; }
.store-media__upload-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.product-gallery__thumb-vid { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-muted); }
.product-gallery__thumb-video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.product-gallery__thumb-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-gallery__thumb-video .product-gallery__thumb-vid {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 0.85rem;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery__thumb-video .product-gallery__thumb-vid { background: rgba(0, 0, 0, 0.45); }
}

@media (max-width: 640px) {
  .store-variant,
  .store-cfield { flex-direction: column; align-items: stretch; }
  .store-cfield__grid { grid-template-columns: 1fr; }
  .store-variant__remove,
  .store-cfield__remove { align-self: flex-end; }
}

/* =============================================================================
   Public storefront + cart
   ========================================================================== */
.nav-badge {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: light-dark(#fdf0e0, #33260f);
  color: light-dark(#c87a16, #f0b556);
  vertical-align: middle;
}

.store-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.store-preview-banner a { color: var(--accent); }

.store-page { padding-top: 24px; padding-bottom: 64px; }
.store-head { margin-bottom: 24px; }
.store-head h1 { margin: 0 0 6px; }
.store-lede { color: var(--text-muted); max-width: 60ch; }

.store-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.product-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .2s ease, transform .2s ease; }
.product-card:hover { border-color: var(--border-strong, var(--border)); transform: translateY(-2px); }
.product-card__link { display: block; color: inherit; text-decoration: none; }
.product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__media-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: 2rem; }
.product-card__flag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.72); color: #fff; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; }
.product-card.is-soldout .product-card__media img { opacity: 0.6; }
.product-card__body { padding: 14px 16px; }
.product-card__title { font-size: 1.05rem; margin: 0 0 4px; }
.product-card__price { color: var(--text-muted); margin: 0; font-weight: 600; }

/* ----- Product detail ----- */
.product-page { padding-top: 20px; padding-bottom: 64px; }
.store-breadcrumb { margin-bottom: 18px; }
.store-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.store-breadcrumb a:hover { color: var(--text); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: start; }
.product-gallery__main { aspect-ratio: 1 / 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.product-gallery__main > img,
.product-gallery__main > .product-gallery__video { width: 100%; height: 100%; }
.product-gallery__main img,
.product-gallery__main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__video { position: relative; }
.product-gallery__video-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  z-index: 2;
  transition: background 0.2s ease;
}
.product-gallery__video-toggle:hover { background: rgba(0, 0, 0, 0.72); }
.product-gallery__empty { color: var(--text-faint); font-size: 3rem; }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-gallery__thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; padding: 0; display: grid; place-items: center; color: var(--text-muted); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.product-info__title { margin: 0 0 8px; }
.product-info__price { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; }
.product-info__soldout { color: light-dark(#b3261e, #ff6b5e); font-weight: 600; margin: 0 0 12px; }
.product-info__desc { margin-top: 22px; color: var(--text-muted); line-height: 1.6; }

.product-buy { margin-top: 20px; }
.product-field { margin-bottom: 18px; }
.product-field__label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.product-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.product-variant { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.product-variant:hover { border-color: var(--border-strong, var(--border)); }
.product-variant.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.product-variant.is-disabled { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }
.product-variant__swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); flex: 0 0 auto; }
.product-variant__oos { font-size: 0.72rem; color: var(--text-muted); }

.product-buy__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.product-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.product-qty__btn { width: 38px; height: 42px; border: none; background: var(--surface-2); color: inherit; cursor: pointer; font-size: 1.1rem; }
.product-qty__input { width: 48px; height: 42px; border: none; text-align: center; background: var(--surface); color: inherit; font: inherit; -moz-appearance: textfield; }
.product-qty__input::-webkit-outer-spin-button, .product-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-buy__add { flex: 1; min-width: 180px; }
.input--error { border-color: light-dark(#b3261e, #ff6b5e) !important; }

@media (max-width: 820px) {
  .product-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* ----- Cart (FAB + drawer) ----- */
.cart-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent); color: var(--accent-contrast, #fff); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: grid; place-items: center; font-size: 1.2rem; }
.cart-fab__count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: light-dark(#161618, #f7f6f0); color: light-dark(#fff, #161618); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.cart-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 70; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 80; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,0.18); animation: cartSlideIn .25s ease; }
@keyframes cartSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.cart-drawer__title { margin: 0; font-size: 1.2rem; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 12px 18px; }
.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-empty { color: var(--text-muted); text-align: center; padding: 32px 0; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-item__thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.cart-item__thumb--ph { display: grid; place-items: center; color: var(--text-faint); }
.cart-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item__name { font-weight: 600; }
.cart-item__variant, .cart-item__cf { font-size: 0.8rem; color: var(--text-muted); }
.cart-item__controls { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cart-qty__btn { width: 28px; height: 28px; border: none; background: var(--surface-2); color: inherit; cursor: pointer; }
.cart-qty__val { min-width: 28px; text-align: center; font-size: 0.9rem; }
.cart-item__remove { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; text-decoration: underline; padding: 0; }
.cart-item__price { font-weight: 600; white-space: nowrap; }
.cart-drawer__foot { padding: 16px 18px; border-top: 1px solid var(--border); }
.cart-total { display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; margin-bottom: 8px; }
.cart-note { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 12px; }
.cart-checkout { width: 100%; }
.cart-checkout[disabled] { opacity: 0.65; cursor: not-allowed; }
body.cart-open { overflow: hidden; }