/* ============================================================
   Smarter-HR Pool · style.css
   Unified design system. One shell, one rhythm, one type scale.
   ============================================================ */

:root {
  /* ── Surfaces ───────────────────────────────────── */
  --bg:        #0f1115;
  --bg-elev:   #161a22;
  --bg-card:   #1a1f2a;
  --bg-deep:   #0a0d12;

  /* ── Borders / dividers ─────────────────────────── */
  --border:    #2a3140;
  --border-2:  #3a4456;

  /* ── Text ───────────────────────────────────────── */
  --text-0:    #eef1f7;
  --text-1:    #aab2c2;
  --text-2:    #7a8294;
  --text-3:    #5a6275;

  /* ── Brand / accent ─────────────────────────────── */
  --accent:        #5b9eff;
  --accent-strong: #3f7ce8;
  --accent-glow:   rgba(91, 158, 255, 0.35);
  --accent-2:      #34c38f;
  --accent-2-soft: rgba(52, 195, 143, 0.12);
  --warn:          #f5b13d;
  --danger:        #ef5b6b;

  /* ── Shape ──────────────────────────────────────── */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* ── Touch / safe area ──────────────────────────── */
  --tap-min:   44px;
  --safe-top:  env(safe-area-inset-top, 0px);
  --safe-bot:  env(safe-area-inset-bottom, 0px);

  /* ── Type ───────────────────────────────────────── */
  --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Space Grotesk', var(--font);

  /* ── SHELL SIZES (THE ONLY WIDTHS THAT EXIST) ─────
     Every page-level container picks ONE of these.
     Inline max-width overrides on the markup side are forbidden. */
  --shell:        1120px;   /* THE ONE width for all /pool/ landing cards */
  --shell-wide:   1280px;   /* /pool/session.html workspace ONLY — do not use on landing */

  /* ── Spacing scale (4-px base) ───────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ── Elevation / shadow ─────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 4px 14px rgba(0,0,0,.35);
  --shadow-3: 0 16px 40px rgba(0,0,0,.45);
  --ring-focus: 0 0 0 3px rgba(91,158,255,.35);

  /* ── Gradients ──────────────────────────────────── */
  --grad-hero: radial-gradient(ellipse 90% 60% at 50% 0%,
              rgba(91,158,255,0.15), transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 25%,
              rgba(52,195,143,0.10), transparent 70%);
  --grad-accent: linear-gradient(135deg, #5b9eff 0%, #34c38f 100%);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--text-0);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

#app { position: relative; z-index: 1; }
::selection { background: rgba(79, 140, 247, 0.28); }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: 16px; }
img { display: block; max-width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min);
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
  user-select: none;
}
.btn:hover { background: #3f7ce8; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .icon { font-size: 1em; }

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-0);
}
.btn--ghost:hover { background: var(--bg-elev); }

.btn--sm {
  padding: 9px 14px;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
  min-height: 38px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  width: 100%;
}
.nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
  color: var(--text-0);
}
.brand-name { line-height: 1.1; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-0);
  font-size: 14px;
}
.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-desktop { display: none; }
.nav-burger {
  width: var(--tap-min); height: var(--tap-min);
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-0); font-size: 18px;
  cursor: pointer;
}
.nav-burger:active { background: var(--bg-elev); }

/* drawer */
.nav-drawer { position: fixed; inset: 0; z-index: 200; }
.nav-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity .2s ease;
}
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86%);
  padding: 18px;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.nav-drawer.open .nav-drawer-overlay { opacity: 1; }
.nav-drawer.open .nav-drawer-panel { transform: none; }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.nav-drawer-close {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-0); font-size: 16px; cursor: pointer;
}
.nav-drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--text-0); font-size: 15px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background .15s ease;
}
.nav-drawer-link:hover { background: var(--bg-card); }
.nav-drawer-link i { color: var(--text-1); width: 18px; text-align: center; }
.nav-drawer-install {
  margin-top: 6px;
  border-color: var(--border) !important;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 84px) clamp(20px, 3vw, 32px) clamp(32px, 5vw, 52px);
  text-align: center;
  max-width: var(--shell);
  margin: 0 auto var(--s-5);
  /* Box the hero as a card so the top section reads at the same width
     as the wizard/feature cards below (transparent gradient read as a
     narrower, floating block before). Same fill as .card--glass/.wizard. */
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
/* Landscape hero: copy left + wizard right at >=720px.
   On mobile (<720px) it stacks vertically like before. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  max-width: var(--shell);
  margin: 0 auto;
}
@media (min-width: 720px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 48px);
  }
  .hero-grid .hero-left { text-align: left; }
  .hero-grid .hero-left .hero-cta,
  .hero-grid .hero-left .trust { justify-content: flex-start; }
}
.hero-left { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-1);
  font-size: 12px; font-weight: 500;
  letter-spacing: .02em;
}
.eyebrow i { color: var(--accent); }
.hero h1 {
  margin: var(--s-5) auto var(--s-3);
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.1; letter-spacing: -.03em;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--text-0);
  font-weight: 700;
  font-family: var(--font-display);
}
.hero h1 .accent-glow {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .lede {
  margin: 0 auto var(--s-5); max-width: 52ch;
  color: var(--text-1); font-size: clamp(15px, 2vw, 17px); line-height: 1.6;
}
.hero-cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { padding: 14px 28px; font-size: 16px; border-radius: 999px; }
.hero .trust {
  margin-top: var(--s-5); display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap;
  color: var(--text-2); font-size: 13px;
}
.hero .trust i { color: var(--accent-2); margin-right: 4px; }

/* ── Hero infographics ─────────────────────────────────────────────
   The hero-left text column is now more than just h2 + lede + pills;
   it carries two real visual surfaces that match the rhythm of the
   howit-section icon cards (right below):

   • .trust-cards — 3 icon mini-cards (No sign-up / Private / 5s).
                    Same surface language as .howit-step (border +
                    bg-elev + hover lift) so eye reads them as
                    kin rather than decoration.
   • .hero-flow   — compact horizontal "Start → Share → Pick"
                    strip. The third node reuses var(--accent-2)
                    plus the same green ring as the lit avatar,
                    the apex cell and the howit-step.done card,
                    so the winner state has a unified colour
                    across the whole page.                       */
.trust-cards {
  display: grid;
  grid-template-columns: 1fr;            /* mobile: stacked */
  gap: 10px;
  margin-top: var(--s-5);
}
@media (min-width: 560px) {
  .trust-cards { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
.trust-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.trust-card:hover {
  background: var(--bg-card);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.trust-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  color: var(--accent-2);
  font-size: 13px;
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.trust-card h3 {
  font-size: 13px;
  color: var(--text-0);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 0;
}
.trust-card p {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin: 0;
}

.hero-flow {
  margin-top: var(--s-4);
  padding: 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.flow-node {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.flow-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  color: var(--accent);
  font-size: 12px;
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.flow-label {
  font-size: 13px;
  color: var(--text-0);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-arrow {
  color: var(--text-2);
  font-size: 11px;
  flex: 0 0 auto;
}
.flow-node.is-done .flow-ico {
  background: var(--accent-2);
  color: #0a0d12;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(52, 195, 143, .25);
}
.flow-node.is-done .flow-label {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- card ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.card--glass {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border-color: var(--border-2);
  box-shadow: var(--shadow-2);
}
/* ignite-card: same transparent/glassy wrap used by .howit-card,
   .presence-card, .preview-card so the hero/wizard band reads as
   "one of the equally substantial sections" instead of bleeding into
   the page background. Matches the .howit-card rhythm so vertical
   spacing between bands stays consistent. */
.ignite-card {
  padding: clamp(24px, 3.6vw, 36px) clamp(18px, 2.6vw, 28px);
  max-width: var(--shell);
  margin-inline: auto;
}
.ignite-card .hero-grid { margin: 0; }

/* ---------- wizard ---------- */
.ignite-nav { margin-top: var(--s-6); text-align: center; }
.frost-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-1);
  font-size: 12px; font-weight: 500;
  letter-spacing: .02em;
}
.frost-tag i { color: var(--accent); }

.wizard {
  max-width: var(--shell);
  margin: var(--s-3) auto 0;
  padding: clamp(26px, 3.6vw, 38px) clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-align: left;
}

.wizard-step h2 {
  font-size: 19px;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  color: var(--text-0);
  font-weight: 700;
}
.wizard-step .step-hint {
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.wiz-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.wiz-counter { color: var(--text-2); font-size: 12px; }

.wiz-dots {
  display: flex; gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}
.wdot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--border);
  transition: background .2s ease, width .25s ease;
}
.wdot.on { background: var(--accent); width: 22px; }

/* ---------- form fields ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--text-1);
  margin-bottom: 6px;
  font-weight: 500;
}

.input, .select {
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-0);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease;
}
.input::placeholder { color: var(--text-2); }
.input:focus, .select:focus { border-color: var(--accent); }

/* ============================================================
   Time-zone search combobox (replaces the native <select>).
   Field shell, search input row, current-label chip, dropdown list.
   The combobox is a vertical stack: input row on top, current-label
   below it, then the absolute-positioned listbox drops down from the
   bottom of the whole combobox. This keeps the current-label from
   overlapping the helper text below the picker.
   ============================================================ */
.tz-combobox {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 230px;
}
.tz-combobox[aria-expanded="true"] .tz-listbox { display: block; }

.tz-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.tz-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text-0);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease;
}
.tz-search-input::placeholder { color: var(--text-2); }
.tz-search-input:focus { border-color: var(--accent); }

.tz-clear-btn {
  flex: 0 0 auto;
  height: 40px;
  width: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tz-clear-btn:hover { color: var(--text-0); border-color: var(--border-2); background: var(--bg-card); }
.tz-clear-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tz-current-label {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 14px;
  line-height: 1.3;
}

.tz-listbox {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  font-size: 14px;
}
.tz-listbox[hidden] { display: none; }

/* ---- country quick-pick chip strip ---- */
.tz-country-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 10px;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.tz-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.tz-country-chip:hover {
  border-color: var(--accent);
  color: var(--text-0);
  background: var(--bg-card);
}
.tz-country-chip:active { transform: scale(.97); }
.tz-country-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 18%, var(--bg-card));
  color: var(--text-0);
}
.tz-country-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tz-country-flag { font-size: 14px; line-height: 1; }
.tz-country-label { white-space: nowrap; }
.tz-country-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-elev);
  min-width: 18px;
  text-align: center;
}
.tz-country-chip.is-active .tz-country-count {
  background: color-mix(in oklab, var(--accent) 30%, var(--bg-elev));
  color: var(--text-0);
}
@media (max-width: 540px) {
  .tz-country-strip { padding: 8px 10px; gap: 4px; }
  .tz-country-chip { height: 26px; padding: 0 8px 0 6px; font-size: 12px; }
}

.tz-group-header {
  padding: 8px 14px 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tz-group-header[hidden] { display: none; }

.tz-group-items { display: block; padding: 0; margin: 0; list-style: none; }
.tz-group-items[hidden] { display: none; }

.tz-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: var(--text-0);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.tz-option:hover,
.tz-option:focus,
.tz-option:focus-visible {
  outline: none;
  background: var(--bg-elev);
  color: var(--text-0);
}
.tz-option.tz-opt-current {
  background: rgba(110, 168, 255, 0.12);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.tz-option.tz-opt-quick .tz-opt-primary {
  color: var(--accent);
  font-weight: 600;
}

.tz-opt-primary { font-weight: 500; line-height: 1.3; }
.tz-opt-secondary {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.3;
}

.tz-empty {
  padding: 14px;
  color: var(--text-2);
  font-style: italic;
  text-align: center;
}
.tz-empty[hidden] { display: none; }

/* Visually-hidden utility (used to keep the legacy <select> in the DOM for
   screen readers + non-JS fallback without taking layout space). */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aab2c2' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.select option { background: var(--bg-elev); color: var(--text-0); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.form-actions .btn { flex: 1; min-width: 0; }

.range-hint { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.range-hint .frost-tag { font-size: 11px; padding: 4px 9px; }

/* ---------- Time-range picker (Step 2 of wizard) ---------- */
.time-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: end;
}
.time-range .time-sep {
  align-self: center;
  padding-bottom: 12px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.time-presets {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.time-preset-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
  touch-action: manipulation;
}
.time-preset-btn:hover { background: #232b3a; border-color: var(--accent); color: #fff; }
.time-preset-btn.is-active {
  background: #1a2742;
  border-color: var(--accent);
  color: #d6e3ff;
}
.dow-picker {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dow-chip {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  min-width: 40px;
  text-align: center;
  transition: background-color .12s, border-color .12s, color .12s;
  touch-action: manipulation;
}
.dow-chip:hover { background: #232b3a; border-color: var(--accent); }
.dow-chip.is-on {
  background: #1a2742;
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Mode picker (Step 1) ---------- */
.mode-picker {
  display: grid; gap: 10px;
}
.mode-opt {
  display: grid; grid-template-columns: 36px 1fr 28px;
  align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s, transform .08s;
  touch-action: manipulation;
  font: inherit;
}
.mode-opt:hover { background: #1f2632; border-color: var(--border-2); }
.mode-opt:active { transform: scale(0.995); }
.mode-opt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(91, 158, 255, 0.10);
  color: var(--accent);
  font-size: 16px;
}
.mode-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-opt-title { font-size: 14px; font-weight: 600; color: var(--text-0); }
.mode-opt-sub   { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.mode-opt-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: transparent;
  font-size: 11px;
}
.mode-opt.is-on {
  background: #1a2742;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.mode-opt.is-on .mode-opt-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mode-opt[data-mode="booking"] .mode-opt-ico {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}
.mode-opt[data-mode="booking"].is-on {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2) inset;
}
.mode-opt[data-mode="booking"].is-on .mode-opt-check {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.hint { color: var(--text-2); font-size: 12px; margin-top: 6px; }

.gen-result { text-align: center; padding: 6px 0 0; }
.gen-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin: 10px 0 14px;
  font-size: 12px;
  color: var(--text-1);
}
.gen-meta .badge-dim { font-size: 11px; }

.result-link-box {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.result-link-box .link-val {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-1);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.result-link-box .btn {
  padding: 7px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  min-height: 32px;
}
.copy-ok { color: var(--accent-2); font-size: 12px; min-height: 16px; margin-top: 4px; }

/* ── Manager link box on the wizard result screen ───────────── */
.result-link-box--mgmt {
  margin-top: 14px;
  flex-wrap: wrap;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.result-link-box--mgmt .link-val { flex-basis: 100%; }
.result-link-label {
  flex-basis: 100%;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--accent);
  padding-bottom: 3px;
}
.result-link-box--mgmt .btn { margin-top: 0; }

.qr-details {
  margin: 14px auto 0;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.qr-details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-0);
  font-size: 13px;
  font-weight: 500;
}
.qr-details summary::-webkit-details-marker { display: none; }
.qr-details summary:hover { background: var(--border); }
.qr-details[open] summary { margin-bottom: 12px; }
.qr-details[open] summary i { color: var(--accent); }

.qr-wrap {
  width: 168px; height: 168px;
  padding: 8px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-wrap img,
.qr-wrap canvas,
.qr-wrap svg,
.qr-target img,
.qr-target canvas,
.qr-target svg { width: 100%; height: 100%; display: block; }
.qr-target { width: 100%; height: 100%; display: block; }
.qr-target:empty::before {
  content: "Loading…";
  color: #6b7280;
  font-size: 12px;
}

.quick-join {
  max-width: var(--shell);
  margin: var(--s-4) auto 0;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex; align-items: stretch; gap: 8px;
  flex-wrap: wrap;
}
.quick-join .qj-label {
  color: var(--text-1); font-size: 12px; font-weight: 600;
  width: 100%;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.quick-join .input { flex: 1; min-width: 0; }

/* ---------- features ---------- */
.features {
  max-width: var(--shell);
  margin: var(--s-7) auto 0;
  padding: 0 var(--s-5);
  display: grid; grid-template-columns: 1fr;
  gap: 14px;
}
.feat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, border-color .15s ease;
}
.feat:hover {
  transform: translateY(-1px);
  border-color: var(--border-2);
}
.feat:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-1);
}
.feat .fi {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border-2);
  color: var(--accent);
  font-size: 16px;
  margin-bottom: 14px;
}
.feat h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text-0);
  font-weight: 600;
}
.feat p { color: var(--text-1); font-size: 14px; line-height: 1.6; }

/* ---------- bands ---------- */
.band {
  max-width: var(--shell);
  margin: var(--s-7) auto 0;
  padding: 0 var(--s-5);
}
.band .card { padding: 36px clamp(20px, 3vw, 32px); }
.band h2 {
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: -.02em;
  margin-bottom: 10px;
  color: var(--text-0);
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1.2;
}
.band h2 .accent-glow {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.band p { color: var(--text-1); margin-bottom: 20px; line-height: 1.6; }
.lede { font-size: clamp(15px, 2vw, 17px); line-height: 1.6; }
.band .card--center { text-align: center; }
.band .card--center .lede { margin-inline: auto; max-width: 60ch; }

/* ---------- How it works card ----------
   4-column grid of mini-cards with icons, sized to mirror the visual
   weight of the live presence + heatmap band directly below. Each step
   is a real surface (border + bg-elev + hover lift) rather than a thin
   text row, so the rhythm between this section and the next section
   reads as "two equally substantial bands" rather than "header list →
   rich content". The `.done` step (#4) keeps the green "winner" tint
   used everywhere else (apex cells, lit avatars, presence dot) so the
   user sees the same accent colour as the matrix's best time. */
.howit-card {
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
  max-width: var(--shell);
  margin-inline: auto;
}
.howit-head {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  text-align: center;
}
.howit-head .frost-tag { justify-self: center; }
.howit-title {
  font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--text-0);
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0;
}

.howit-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;          /* mobile: stacked single column */
  gap: 12px;
  counter-reset: howit;
}
@media (min-width: 720px) {
  /* tablet+: pair column rhythm — same breakpoint as .band--pair */
  .howit-steps { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 980px) {
  /* desktop: full 4-up row, matching the breath around the hero grid */
  .howit-steps { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

.howit-step {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px clamp(14px, 2vw, 18px) 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  color: var(--text-1);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.howit-step:hover {
  background: var(--bg-card);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.howit-step .num {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;             /* logical property — flips under RTL */
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-deep);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  font-family: var(--font-display);
}
.howit-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  color: var(--accent);
  font-size: 18px;
  flex: 0 0 auto;
}
.howit-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 0;
}
.howit-step p {
  font-size: 13.5px;
  color: var(--text-1);
  line-height: 1.55;
  margin: 0;
}

/* Step 4 — the "winner" state, accent gradient + green ring, same
   accent-2 used by the .pg-cell.apex heatmap and the lit avatar ring. */
.howit-step.done {
  background: linear-gradient(135deg,
    rgba(91, 158, 255, 0.10),
    rgba(52, 195, 143, 0.10) 100%);
  border-color: var(--accent-2);
}
.howit-step.done .num {
  background: var(--accent-2);
  color: #0a0d12;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(52, 195, 143, .25);
}
.howit-step.done .howit-icon {
  background: rgba(52, 195, 143, .10);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* ---------- small utility classes (replaces inline style="") ---------- */
.brand-name--strong { font-weight: 700; }
.label-ico { margin-right: 5px; color: var(--accent); }
.hint--inline { display: inline; margin: 0; font-size: 11px; }
.hint--bare { margin-top: 0; margin-bottom: 8px; }
.footer-brand-name { font-weight: 700; color: var(--text-0); }
.footer-link--spaced { margin-left: 14px; }
.cal-title {
  font-size: clamp(22px, 4vw, 36px);
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--text-0);
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 14px;
}
.cal-lede { color: var(--text-1); margin: 0 auto 26px; max-width: 52ch; }
.cal-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.time-presets--top { margin-top: 6px; }
.gen-result .wiz-head h2 { text-align: left; }

/* ---------- mobile table-cell labels: keep accessibility but hide visually ---------- */

footer {
  margin-top: 48px;
  padding: 24px 20px calc(32px + var(--safe-bot));
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-2);
  font-size: 12.5px;
}
footer .footer-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
footer .brand-sub { font-size: 11px; color: var(--text-2); }
footer .f-line {
  display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--text-1);
}
footer .footer-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}
footer .footer-link {
  background: transparent; border: none;
  color: var(--accent); cursor: pointer;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
footer .footer-link:hover { text-decoration: underline; }

.steps {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--text-1);
  justify-content: center;
}
.step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elev);
  border-radius: 99px;
  border: 1px solid var(--border);
}
.step .num {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--bg-card);
  color: var(--text-1);
}
.step.on .num { background: var(--accent); color: #fff; }
.step.on { color: var(--text-0); }

/* ---------- preview band ---------- */
.preview-card { padding: 28px clamp(20px, 3vw, 32px); }
.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.preview-title {
  font-size: clamp(18px, 3vw, 22px);
  letter-spacing: -.01em;
  color: var(--text-0);
  font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.preview-title i { color: var(--accent-2); }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 100%;
  margin-bottom: 16px;
}
.pg-cell {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  position: relative;
}
.pg-cell::after {
  content: ""; position: absolute; inset: auto 2px 2px auto;
  width: 4px; height: 4px; border-radius: 50%;
  background: transparent;
}
.pgh-1 { background: #243047; border-color: #33445f; }
.pgh-2 { background: #2f4a6e; border-color: #405f8c; }
.pgh-3 { background: #2f6a8a; border-color: #3f84a8; color: #eaf4ff; }
.pgh-4 { background: #5e8e3a; border-color: #7aaa52; color: #f4ffe8; }
.pg-cell.apex {
  background: var(--accent-2);
  border-color: #5be8b6;
  box-shadow: inset 0 0 0 1px rgba(7, 18, 13, 0.18), 0 0 12px rgba(52, 195, 143, 0.45);
}
.pg-cell.apex::after { background: #07120d; }

.preview-meta { color: var(--text-1); font-size: 13.5px; }
.preview-meta strong { color: var(--text-0); font-weight: 600; }

/* ---------- Paired band: presence + heatmap side by side at ≥720px ---------- */
.band--pair {
  display: grid;
  grid-template-columns: 1fr;        /* mobile: stacked */
  gap: 14px;
}
@media (min-width: 720px) {
  .band--pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 16px;
  }
  .band--pair > .card { height: 100%; }
}

/* ---------- presence card (rebuilt: real rings, no broken overlap) ---------- */
.presence-card {
  padding: 22px clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}
@media (min-width: 720px) {
  .presence-card { grid-template-columns: 1.45fr 1fr; gap: 24px; }
}

.presence-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.presence-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 var(--accent-2);
  animation: presence-pulse 1.6s ease-out infinite;
}
@keyframes presence-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 195, 143, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 195, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 195, 143, 0); }
}
.presence-title {
  font-size: clamp(18px, 3vw, 22px);
  letter-spacing: -.01em;
  color: var(--text-0);
  font-weight: 600;
  margin-bottom: 10px;
  font-family: var(--font-display);
}
.presence-desc { color: var(--text-1); font-size: 14px; line-height: 1.55; }

/* ── Avatar row ──
   Each circle is a full, unbroken ring with its own 2px border.
   No negative-margin overlap (which previously hid the outer half of
   every circle except the rightmost). Gap of 10px reads as a tidy stack.
   Lit participants keep the ring AND get a small ✓ check overlay. */
.presence-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .presence-stack { justify-content: flex-start; }
}
.avatar {
  position: relative;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  color: #fff;
  border: 2px solid var(--border-2);     /* every ring is complete */
  background: var(--bg-elev);
  flex: 0 0 auto;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: default;
  list-style: none;
  padding: 0;
  line-height: 1;
}
.avatar > span {
  display: block;
  line-height: 1;
  color: inherit;
}
.avatar.a0 { background: linear-gradient(135deg, #5b9eff, #34c38f); }
.avatar.a1 { background: linear-gradient(135deg, #c58cff, #5b9eff); }
.avatar.a2 { background: linear-gradient(135deg, #ff8a65, #f5b13d); }
.avatar.a3 { background: linear-gradient(135deg, #34c38f, #5be8b6); }
/* "Not yet joined" — desaturated, dim, but still a complete ring */
.avatar.a4,
.avatar.a5 {
  color: var(--text-2);
  background: var(--bg-elev);
  font-weight: 600;
}
.avatar.a4 { opacity: 1; }
.avatar.a5 { opacity: 1; }

/* Lit avatar: full visible ring + soft outer glow + small check badge.
   Indicator lives INSIDE the circle (top-right) so it never collides
   with sibling avatars. */
.avatar.lit {
  border-color: var(--accent-2);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(52, 195, 143, .35),          /* sealed ring on the border */
    0 6px 16px rgba(52, 195, 143, .25);         /* soft outer glow */
}
.avatar.lit::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--bg-card);
  background-image:
    linear-gradient(135deg, transparent 50%, var(--accent-2) 50%),
    radial-gradient(circle at 50% 50%, transparent 4px, var(--accent-2) 5px);
}
/* Use a real ✓ glyph instead — works on all browsers, no gradient hack */
.avatar.lit::before {
  content: "✓";
  position: absolute;
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #07120d;
  font-size: 11px;
  font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--bg-card);
  line-height: 1;
}
.avatar.lit::after { content: none; }   /* disable the gradient hack */

/* ---------- stats band ---------- */
.stats-band { margin-top: var(--s-6); }
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow-1);
}
.stat-num {
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-0);
  line-height: 1;
  font-family: var(--font-display);
}
.stat-num-suffix {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.stat-label {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ============================================================
   SESSION WORKSPACE
   ============================================================ */
.sesh-wrap {
  max-width: var(--shell-wide);
  margin: 0 auto;
  padding: 0 16px calc(96px + var(--safe-bot));
}

.sesh-head {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.sesh-title h1 {
  font-size: clamp(17px, 4.5vw, 22px);
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--text-0);
  font-weight: 700;
}
.sesh-title .slugline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 3px;
  color: var(--text-2);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.5;
}
.sesh-title .slugline code {
  color: var(--text-1);
  font-size: 11.5px;
  background: var(--bg-elev);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.sesh-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sesh-head-desktop { display: none; }
/* Creator-gate: the desktop media query below forces
   display:inline-flex, which would override the UA [hidden] rule and
   leak the Edit button to non-creators. Keep the hidden attribute
   authoritative (revealCreatorUI() toggles it). */
.sesh-head-desktop[hidden] { display: none !important; }
/* Author display rules must never override the hidden attribute: the
   Edit affordance (among desktop-only actions) starts hidden and is
   revealed only when identity resolves to creator. Without this, the
   ≥720px breakpoint's inline-flex would leak it to anonymous viewers. */
.sesh-head-desktop[hidden] { display: none !important; }

/* "Same region as creator" badge — only visible when the viewer's
   display TZ exactly matches the creator's. Confirms the timezone
   layer is honoured. */
.sesh-tz-match {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 4px; padding: 1px 8px;
  font-size: 11px;
  color: var(--accent-2);
  background: rgba(52, 195, 143, 0.10);
  border: 1px solid rgba(52, 195, 143, 0.35);
}
.sesh-tz-match[hidden] { display: none; }
.sesh-tz-match i { font-size: 10px; }

/* Meeting agenda / description card under the session title */
.sesh-desc-card {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px; padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 640px;
}
.sesh-desc-card[hidden] { display: none; }
.sesh-desc-icon { color: var(--accent-2); font-size: 13px; margin-top: 1px; }
.sesh-desc-body { min-width: 0; flex: 1; }
.sesh-desc-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-2); font-weight: 600;
}
.sesh-desc-text {
  font-size: 13px; line-height: 1.5; color: var(--text-1); margin-top: 2px;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  max-height: 120px; overflow-y: auto;
}

.live-pulse {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 12px;
  opacity: 0;
  transition: opacity .3s ease;
}
.live-pulse.is-visible { opacity: 1; }
.live-pulse i { color: var(--accent-2); font-size: 8px; }
/* Offline-fallback mode: the slug doesn't exist on the server so the
   page is showing a seeded DEMO_ROSTER preview. The green live-dot
   would be a lie; downgrade to amber "preview" instead. */
.live-pulse.offline-pulse i { color: #f5b13d; }
.live-pulse.offline-pulse .pulse-text {
  color: #f5b13d;
  font-weight: 600;
}

/* bottom action bar (mobile) */
.bottom-bar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--safe-bot));
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bottom-bar[hidden] { display: none; }
.bottom-bar-info { min-width: 0; flex: 1; }
.bb-title { font-size: 13px; font-weight: 600; color: var(--text-0); }
.bb-sub { font-size: 11.5px; color: var(--text-1); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cta { flex: 0 0 auto; }

/* session body — single full-width column so every card (identity,
   pool-selection matrix, finalize, roster, activity) spans the same
   width as the session header above it. */
.sesh-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; align-items: stretch; }
.col-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* identity card */
.ident {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
}
.ident h2 { font-size: 16px; margin-bottom: 12px; color: var(--text-0); font-weight: 700; }
.ident-hint { color: var(--text-2); font-size: 12px; margin-top: 10px; }

/* matrix card */
.matrix-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* IMPORTANT: do NOT use `overflow: hidden` here. It kills horizontal
     scrolling of the inner .matrix-scroll because it creates an extra
     scroll container ancestor that captures pan gestures. Use isolation
     to create a stacking context for the rounded corners instead. */
  isolation: isolate;
}
.mtx-toolbar { padding: 14px 16px 0; }

/* Top action bar inside the matrix card — Confirm time (left) and
   Save changes (right) sit at the top of the pool box so the manager
   never has to scroll down to save. */
.mtx-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
}
.mtx-topbar[hidden] { display: none; }
/* Author display rules (.btn → inline-flex) defeat the UA [hidden] rule,
   so force every hidden child of the top bar off entirely (step buttons,
   arrow, status). */
.mtx-topbar [hidden] { display: none !important; }
.mtx-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mtx-topbar-status {
  font-size: 12px;
  color: var(--text-2);
  margin-inline-start: auto;
}

/* ---- 2-step creator stepper (booking mode) ----
   Step 1 "Save changes" (left) → arrow → Step 2 "Confirm time" (right).
   Numbered radio-style badges + arrow make the order unmistakable and
   the muted sub-label on each button says what that step actually does. */
.step-btn {
  gap: 9px;
  justify-content: flex-start;
  padding: 8px 11px;
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-0);
  line-height: 1.25;
}
.step-btn:hover { background: var(--bg-elev); border-color: var(--accent); }
.step-btn.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e1116;
}
.step-btn.btn--primary:hover { filter: brightness(1.08); }
.step-num {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2a3342;
  color: #cdd6e4;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step-btn.btn--primary .step-num {
  background: rgba(14, 17, 22, 0.18);
  color: #0e1116;
}
.step-body {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.step-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: inherit;
  white-space: nowrap;
}
.step-sub {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 190px;
}
.step-btn.btn--primary .step-sub { color: rgba(14, 17, 22, 0.72); }
.step-arrow {
  display: inline-flex; align-items: center;
  color: var(--text-2);
  font-size: 13px;
}
.step-arrow[hidden] { display: none !important; }
/* Step 1 complete: green check reads as "saved" on the badge + label */
.step-btn.is-done { border-color: rgba(52, 195, 143, 0.55); }
.step-btn.is-done .step-num { background: var(--accent-2); color: #0e1116; }
.step-btn.is-done .step-label i { color: var(--accent-2); }
.mtx-controls {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.mtx-controls .field {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0; flex: 0 0 auto;
}
.mtx-controls .field > label {
  display: block; margin: 0;
  flex: 0 0 auto;
  min-width: 64px;
  font-size: 12px; font-weight: 600;
  color: var(--text-1); letter-spacing: .02em;
}
.mtx-controls .field > .select,
.mtx-controls .field > input.input {
  flex: 1 1 auto; min-width: 100px; max-width: 180px; width: auto;
}
/* Slot-size + Time-zone fields ship with inline min-width attributes
   — override so the row keeps a tidy rhythm and labels line up. */
.mtx-controls .field[style*="min-width:160px"] { width: 220px; min-width: 0; }
.mtx-controls .field[style*="min-width:230px"] { width: 340px; min-width: 0; }

/* Time zone: input row + Auto · <Zone> chip share one horizontal
   axis. The chip swaps from "subtitle below the input" to a pill
   on the right of the search box, so all toolbar items align. */
.mtx-controls .tz-combobox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.mtx-controls .tz-combobox .tz-input-row {
  flex: 1 1 auto; min-width: 0;
}
.mtx-controls .tz-combobox .tz-current-label {
  flex: 0 0 auto; order: 2;
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  color: var(--accent);
  background: rgba(79, 140, 247, .10);
  border: 1px solid rgba(110, 168, 255, .32);
  padding: 3px 9px;
  border-radius: 999px;
  max-width: 200px;
  min-height: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
/* Dropdown spans input+chip so the list feels like one picker. */
.mtx-controls .tz-combobox .tz-listbox { min-width: 320px; }

/* ── Mobile: revert every toolbar item to its natural stacked
      layout. Labels back above their controls, chip back beneath
      the input — keeps each row at a comfortable height. ─────────*/
@media (max-width: 720px) {
  .mtx-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .mtx-controls .field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .mtx-controls .field > .select,
  .mtx-controls .field > input.input {
    width: 100%; max-width: none;
  }
  .mtx-controls .field[style*="min-width:160px"],
  .mtx-controls .field[style*="min-width:230px"] { width: auto; }
  .mtx-controls .tz-combobox {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .mtx-controls .tz-combobox .tz-current-label {
    align-self: flex-start;
    background: transparent; border: 0; padding: 0;
    color: var(--text-2); font-weight: 500; font-size: 11px;
    max-width: none; border-radius: 0;
  }
  .mtx-controls .tz-combobox .tz-listbox { min-width: 0; }
}
.mtx-legend {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-2);
}
.legend-scale { display: flex; align-items: center; gap: 3px; }
.legend-scale i {
  width: 14px; height: 9px;
  border-radius: 2px;
  display: block;
  border: 1px solid var(--border);
}
.legend-scale .lg-0 { background: var(--bg-elev); }
.legend-scale .lg-1 { background: #243047; border-color: #33445f; }
.legend-scale .lg-2 { background: #2f4a6e; border-color: #405f8c; }
.legend-scale .lg-3 { background: #2f6a8a; border-color: #3f84a8; }
.legend-scale .lg-4 { background: var(--accent-2); border-color: #4fe0ab; }

/* Save indicator (debounced commit feedback) */
.save-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-2);
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.save-indicator i { font-size: 11px; }
.save-indicator.is-pending { color: var(--text-1); border-color: var(--border-2); }
.save-indicator.is-saving {
  color: #d6e3ff;
  border-color: #3b5d97;
  background: #1a2742;
}
.save-indicator.is-saving i { animation: save-spin 1s linear infinite; display: inline-block; }
.save-indicator.is-saved {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: rgba(52, 195, 143, .08);
}
.save-indicator.is-error {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(239, 91, 107, .08);
}
@keyframes save-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Unsaved-changes badge (explicit submit flow) */
.dirty-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid var(--accent);
  background: rgba(79, 140, 247, .10);
  color: #d6e3ff;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.dirty-badge i { font-size: 11px; }
.dirty-badge.is-on i { animation: dirty-pulse 1.6s ease-in-out infinite; }
@keyframes dirty-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.matrix-scroll-wrap {
  position: relative;
  margin: 0 12px 14px;
}
.matrix-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 4px 14px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  position: relative;
  /* touch-action: pan-y → the browser handles VERTICAL panning natively, but
     NOT horizontal. Horizontal scrolling is driven manually in JS (session.js
     touchmove sets scrollLeft on horizontal-dominant drags). This is the
     reliable fix for the persistent mobile bug where horizontal swipe from
     inside a cell never scrolled: interactive .mtx-slot elements block native
     horizontal pan initiation on some mobile browsers, so we take horizontal
     into our own hands while keeping vertical native and smooth. */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}
/* Edge fades — absolutely positioned siblings, pointer-events:none so they don't block taps */
.matrix-scroll-wrap .edge-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 22px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s ease;
}
.matrix-scroll-wrap .edge-fade.left  { left: 0;  background: linear-gradient(to right, var(--bg-card), transparent); }
.matrix-scroll-wrap .edge-fade.right { right: 0; background: linear-gradient(to left,  var(--bg-card), transparent); }
.matrix-scroll-wrap.can-scroll-left  .edge-fade.left  { opacity: 1; }
.matrix-scroll-wrap.can-scroll-right .edge-fade.right { opacity: 1; }
.matrix-scroll-wrap .edge-fade i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-elev);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.matrix-scroll-wrap .edge-fade.left  i { right: 3px; }
.matrix-scroll-wrap .edge-fade.right i { left: 3px; }

/* Quick-select toolbar above the matrix */
.quick-pick {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.quick-pick-label {
  font-weight: 600;
  color: var(--text-1);
  margin-right: 4px;
}
.quick-pick-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
  white-space: nowrap;
  touch-action: manipulation;
}
.quick-pick-btn:hover { background: #232b3a; border-color: var(--accent); color: #fff; }
.quick-pick-btn:active { transform: scale(0.97); }
.quick-pick-btn.is-active {
  background: #1a2742;
  border-color: var(--accent);
  color: #d6e3ff;
}
.quick-pick-spacer { flex: 1; }
.quick-pick-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-size: 11.5px;
}
/* Booking mode: single-slot claims replace the chip strip & range
   painting, so hide the preset chips and keep only the Submit/Confirm
   booking button, pushed to the end of the row. */
.matrix-card:has(.mtx.is-booking) .quick-pick { justify-content: flex-end; }
.matrix-card:has(.mtx.is-booking) .quick-pick .quick-pick-label,
.matrix-card:has(.mtx.is-booking) .quick-pick-btn,
.matrix-card:has(.mtx.is-booking) .quick-pick-spacer,
.matrix-card:has(.mtx.is-booking) .quick-pick-count {
  display: none !important;
}

/* Explicit Submit button (replaces auto-save) */
.submit-btn {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 999px;
  gap: 7px;
  margin-left: 2px;
  transition: opacity .15s ease, background-color .15s ease,
              transform .12s ease, box-shadow .15s ease;
}
.submit-btn.is-ready {
  box-shadow: 0 0 0 1px rgba(79, 140, 247, .45), 0 4px 14px rgba(79, 140, 247, .28);
  animation: submit-glow 2s ease-in-out infinite;
}
@keyframes submit-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(79, 140, 247, .45), 0 4px 14px rgba(79, 140, 247, .28); }
  50%      { box-shadow: 0 0 0 1px rgba(79, 140, 247, .65), 0 4px 20px rgba(79, 140, 247, .42); }
}
.submit-btn.is-busy { opacity: .7; cursor: progress; }
.submit-btn-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.submit-btn:disabled .submit-btn-count { background: rgba(255, 255, 255, .10); }

.mtx {
  min-width: 560px;
  /* No `user-select: none` here by default — that interferes with iOS scroll
     initiation. The .paint-active class on the .mtx element will lock down
     user-select only while a paint drag is in progress (see rule above). */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}
.mtx-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 2px;
  position: relative;
}

.mtx-slot {
  flex: 1;
  min-width: 44px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  /* touch-action: pan-y → vertical pan is native; horizontal pan is handled
     manually in JS (see .matrix-scroll). Setting pan-y here (rather than
     pan-x pan-y) guarantees the browser does NOT try to do horizontal pan
     itself, so our manual scrollLeft in touchmove is the sole horizontal
     driver — no double-scroll conflict, and it works even when the finger
     starts inside a cell. */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mtx-slot:hover:not(.mtx-blank) { border-color: var(--accent); background: #1f2632; }
/* Intentionally NO :active transform or background on slots. On real touch devices,
   :active fires the moment the finger lands on the cell and persists until release,
   which makes every touch look like a selection and prevents native horizontal/vertical
   scrolling from initiating. Painting is handled exclusively in JS via the .mine class. */
.mtx-blank { cursor: default; background: transparent !important; border-color: transparent !important; }

/* Slot size: mobile gets larger cells for fat-finger comfort */
@media (max-width: 640px) {
  .mtx-slot { min-width: 52px; height: 40px; }
  .mtx-labels .day-label { font-size: 11px; padding: 4px 4px; }
  .quick-pick-btn { padding: 7px 12px; font-size: 13px; }
}

/* Range-select mode: tap first slot to anchor, tap second to fill the range */
.mtx.range-mode .mtx-slot:not(.mtx-blank) {
  cursor: cell;
}
.mtx .range-anchor {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.mtx .range-preview {
  background: rgba(79, 140, 247, 0.18) !important;
  border-color: var(--accent) !important;
}

/* ── Slot selection feedback (the simple way) ─────────────────────
   Tap → instant toggle. No press-hold highlight, no paint mode on touch.
   The .mine border + .slot-ripple animation are the visible confirmation.
   Drag-paint is opt-in for desktop mouse users only (.mtx.painting). */
.mtx-slot.mine {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-color: var(--accent);
  background: rgba(79, 140, 247, 0.16);
  transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Snappy tap ripple — anchored to the actual finger / cursor position.
   420ms total: a quick fade-in then a slightly longer fade-out so the
   eye registers the click even on fast taps. */
.mtx-slot .slot-ripple {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top:  -4px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  opacity: .65;
  animation: slot-ripple .42s ease-out forwards;
  z-index: 1;
}
@keyframes slot-ripple {
  0%   { transform: scale(1);   opacity: .65; }
  60%  { transform: scale(11);  opacity: .18; }
  100% { transform: scale(14);  opacity: 0;   }
}

/* Desktop drag-paint (mouse only) — power-user affordance. Touch never
   enters this state. A subtle cursor change + user-select lock during
   the drag is all we need; no flashing, no per-cell animation. */
.mtx.painting,
.mtx.painting * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ── Floating scroll joystick ─────────────────────────────────────
   A compact, always-available control for scrolling the matrix in any
   direction. Press & hold an arrow to scroll left/right (days) or
   up/down (rows). Reliable on every device — no reliance on touch-swipe. */
.float-joy {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px 40px;
  gap: 2px;
  place-items: center;
  background: rgba(16, 22, 34, 0.86);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Float-joystick is a touch/keyboard aid for scrolling the matrix.
   On desktop (fine pointer + large viewport), keyboard arrows and the
   scrollbar already cover scroll; the joystick just clutters the
   right column. Reserve it for narrow/touch viewports. */
@media (min-width: 720px), (hover: hover) and (pointer: fine) {
  .float-joy { display: none !important; }
}
.float-joy[hidden] { display: none; }
.joy-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .1s ease, color .1s ease, transform .08s ease;
  touch-action: none;
}
.joy-btn:hover { background: #232b3a; color: #fff; }
.joy-btn:active { background: var(--accent); color: #0a1014; transform: scale(0.92); }
.joy-btn.is-active { background: var(--accent); color: #0a1014; }
.joy-up    { grid-column: 2; grid-row: 1; }
.joy-left  { grid-column: 1; grid-row: 2; }
.joy-right { grid-column: 3; grid-row: 2; }
.joy-down  { grid-column: 2; grid-row: 3; }
.joy-center {
  grid-column: 2; grid-row: 2;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 13px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  pointer-events: none;
}

/* Heatmap — sequential availability ramp (dark theme): empty cells stay
   nearly invisible, low-availability cells lift gently off the background,
   and the top tier pops with a bright fill + soft glow.

   NOTE: heat-1..4 are retained for the OLD legend swatches (.lg-1..4 in the
   mtx-legend scale) but no longer drive actual cell backgrounds — the
   matrix uses per-participant stripes instead (see .has-stripes below). */
.heat-0 { background-color: var(--bg-elev); border-color: var(--border); }
.heat-1 { background-color: #243047; border-color: #33445f; }
.heat-2 { background-color: #2f4a6e; border-color: #405f8c; }
.heat-3 { background-color: #2f6a8a; border-color: #3f84a8; color: #eaf4ff; }
.heat-4 {
  background-color: var(--accent-2);
  border-color: #4fe0ab;
  color: #07120d;
  box-shadow: inset 0 0 0 1px rgba(7, 18, 13, 0.18), 0 0 8px rgba(52, 195, 143, 0.45);
}

/* ── Per-participant stripes (the "who picked this slot" overlay) ──
   Each cell with one or more pickers gets a stripe pattern painted
   via a CSS gradient set inline in JS. The two class hooks here
   control the OTHER visual qualities (border contrast, hover
   behaviour, "mine" stacking relationship) and make the painted
   stripes pop without the heat-* bucket filling in behind them.

   • .has-stripes       — drop the heat-* background-color so the
                          inline stripe gradient is the only fill,
                          and refine the border into a faint halo
                          that keeps the cell readable on dark UI.
   • .stripes-single    — single picker: solid colour, no gradient.
                          The cell looks like a deliberate "I'm in"
                          block, no visual noise.
   • .stripes-multi     — 2+ pickers: equal-width horizontal stripes.
                          The colour joins at hard boundaries; we add
                          a 1px inset shadow to keep adjacent stripe
                          regions crisp instead of blur-smeared.
   The .mine ring still wins on top, so the user's own slots are
   unambiguously outlined regardless of stripe count.            */
.mtx-slot.has-stripes {
  /* The inline style.background painted by JS (solid hex when one
     picker, linear-gradient when 2+) is the ONLY fill of the cell —
     no background !important overrides here, so the colour really
     reaches the box ('see the colour fill inside and filling the
     box'). heat-* classes are never applied to striped cells, so
     there is no competing background layer to strip away. */
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.mtx-slot.has-stripes.stripes-single {
  /* Solid colour block — gentle inner shadow so it doesn't look flat. */
  background-image: none;
  border-color: rgba(255, 255, 255, 0.22);
}
.mtx-slot.has-stripes.stripes-multi {
  /* Multi-picker: hard stripe boundaries; the shadow above already
     defines a crisp 1px inset edge so 8 stripes of equal width stay
     visually distinct even at 44px-wide cells. */
  background-size: cover;
}
.mtx-slot.has-stripes:hover:not(.mtx-blank) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent);
}
.mtx-slot.has-stripes.mine {
  /* The "mine" ring sits on top of stripes via z-index in .mine below; we
     don't suppress the stripes because the user still wants to see who
     else picked their slot at a glance. */
  box-shadow:
    inset 0 0 0 2px var(--accent),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.mtx-slot.mine { box-shadow: inset 0 0 0 2px var(--accent); border-color: var(--accent); }

/* Count badge inside availability cells — dark pill with bright text so
   it stays readable on every heat level, pinned top-right so it never
   overlaps the drag/paint target area in the middle of the cell. */
.mtx-slot .amt {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  background: rgba(8, 12, 18, 0.85);
  color: #eaf2ff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 640px) {
  .mtx-slot .amt { min-width: 16px; height: 16px; font-size: 10.5px; top: 2px; right: 3px; }
}

.mtx-slot.apex-slot { border: 2px solid var(--accent-2); }

.mtx.locked .mtx-slot:not(.mtx-blank) { cursor: not-allowed; opacity: .55; }

.mtx-labels {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 4px;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-card);
  padding: 4px 0;
}
.mtx-labels .day-label {
  flex: 1; min-width: 44px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-2);
}
.mtx-col-time {
  /* Widened from 64px → 92px to comfortably fit the consistent
     "8:00 – 8:30 AM" / "8:30 – 9:00 AM" labels. Two adjacent rows now
     align vertically and you can scan the entire morning band in one
     glance. Now stacked: primary "8:00 – 8:30 AM" line + a smaller
     "= 12:00 – 12:30 UTC" sub-line so the TZ-pick change is visually
     obvious to the user (Bug #2). */
  width: 96px; flex: 0 0 96px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  font-size: 10.5px; color: var(--text-2);
  padding-right: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* vertically align adjacent rows */
  line-height: 1.15;
}
.mtx-col-time-primary { color: var(--text-2); }
.mtx-col-time-utc {
  color: var(--text-2);
  opacity: .65;
  font-size: 9px;
  letter-spacing: .02em;
  margin-top: 1px;
}
  letter-spacing: 0.01em;
}

/* ── Stripe legend — shows the palette participants are mapped to
   so the colors in the matrix are decoded at-a-glance. Sits below
   the day-label row. Reading order is the same as the ORDER of
   stripes inside a 2+ picker cell (palette index order). */
.stripe-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 8px 12px 4px;
  font-size: 10.5px;
  color: var(--text-2);
}
.stripe-legend .legend-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 4px;
  color: var(--text-1);
}
.stripe-legend .legend-label i {
  color: var(--accent);
  font-size: 11px;
}
.stripe-legend .legend-swatches {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.stripe-legend .legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.stripe-legend .legend-help {
  color: var(--text-3);
  margin-inline-start: 4px;
  font-size: 10px;
}

/* ── Top-of-matrix legend (stripe-legend-top) — the new default location.
     Sits between the toolbar and the day-label row so the colour story
     lands first. Wider swatches + the persistent "each colour = one
     person" hint pill makes the meaning unambiguous before the user
     even reaches the matrix cells. */
.stripe-legend-top {
  padding: 12px 16px 10px;
  border-block-end: 1px solid var(--border, rgba(255,255,255,0.06));
  background: linear-gradient(
    180deg,
    rgba(79,140,247,0.04) 0%,
    rgba(79,140,247,0.00) 100%
  );
  gap: 10px 14px;
}
.stripe-legend-top .legend-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.stripe-legend-top .legend-label i {
  font-size: 13px;
}
.stripe-legend-top .legend-swatches {
  /* Legend is a TABLE of colour + participant name (one row per
     person). auto-fill keeps the grid fluid on small cards while
     each row stays 'swatch → name' — exactly what the user asked:
     'a table that shows the color with the participant name'. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px 18px;
  flex: 1;
  align-items: center;
}
.stripe-legend-top .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.stripe-legend-top .legend-name {
  font-size: 11.5px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}
.stripe-legend-top .legend-item-more {
  color: var(--text-3);
}
.stripe-legend-top .legend-item-more .legend-name {
  font-size: 11px;
  color: var(--text-3);
}
.stripe-legend-top .legend-swatch-more {
  /* Overflow badge beyond the 8-colour palette: a neutral hatch, not a
     phantom palette colour. */
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.16) 0 2px,
    rgba(255, 255, 255, 0.04) 2px 4px
  );
}
.stripe-legend-top .legend-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 1px 3px rgba(0,0,0,0.35);
  transition: transform 120ms ease;
}
.stripe-legend-top .legend-swatch:hover { transform: translateY(-1px) scale(1.06); }
.stripe-legend-top .legend-swatch-empty {
  /* Dimmed empty-state swatches keep the row's visual width consistent
     so the legend doesn't collapse when no one has joined yet. */
  border-style: dashed;
}
.stripe-legend-top .legend-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79,140,247,0.10);
  color: var(--text-1);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid rgba(79,140,247,0.22);
}
.stripe-legend-top .legend-hint i {
  color: var(--accent);
  font-size: 11px;
}
.stripe-legend-top .legend-names {
  color: var(--text-2);
  font-weight: 400;
  margin-inline-start: 4px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .stripe-legend-top .legend-hint { margin-inline-start: 0; width: 100%; justify-content: center; }
  .stripe-legend-top { gap: 8px 10px; }
}

/* ── Landing-page preview colour strip — a tiny static sample of the
     same STRIPE_PALETTE rendered above the wizard preview card so the
     colour-coding story is told even before clicking "See example". */
.preview-color-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.preview-color-strip .pcs-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.01em;
}
.preview-color-strip .pcs-swatches {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.preview-color-strip .pcs-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.preview-color-strip .pcs-hint {
  margin-inline-start: auto;
  color: var(--text-2);
  font-size: 10.5px;
}
.preview-color-strip .pcs-hint i {
  color: var(--accent);
  margin-inline-end: 4px;
}

/* ── Offline-demo banner — shown by session.js when the slug doesn't
   exist on the server (expired poll, KV namespace mismatch, stale
   bookmark) and the page falls back to a colour-coded DEMO_ROSTER
   preview. The user gets to SEE the per-participant stripe legend
   instead of "empty 404 grid", and there's a one-tap way out. */
.offline-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 14px 14px 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) 0%,
    var(--bg-elev) 70%
  );
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 4px 18px -8px color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.offline-banner[hidden] { display: none; }
.offline-banner .ob-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
  font-size: 14px;
}
.offline-banner .ob-txt {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}
.offline-banner .ob-txt strong {
  color: var(--accent);
  font-weight: 600;
  margin-inline-end: 4px;
}
.offline-banner #offline-banner-msg {
  color: var(--text-1);
}
.offline-banner .ob-cta {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .offline-banner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .offline-banner .ob-cta {
    width: 100%;
    justify-content: center;
  }
}

/* apex banner */
.apex-banner {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 14px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-sm);
  transition: opacity .3s ease, transform .3s ease;
}
.apex-banner.hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; position: absolute; }
.apex-ico {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent-2);
  font-size: 14px;
}
.apex-txt { flex: 1; min-width: 160px; }
.apex-txt .apex-when { font-weight: 700; font-size: 14px; color: var(--text-0); }
.apex-txt .apex-meta { font-size: 12px; color: var(--text-1); margin-top: 2px; }

.apex-avatar-stack { display: flex; align-items: center; margin-right: 4px; }
.apex-avatar-stack .avatar {
  width: 26px; height: 26px;
  font-size: 10px;
}

.apex-bar-track {
  flex-basis: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}
.apex-bar-fill {
  height: 100%;
  background: var(--accent-2);
  border-radius: 99px;
  transition: width .4s ease;
}

/* "Waiting for the manager" banner — shown to applicants while a booking
   pool's available_slots is still [] (manager hasn't published yet). */
.pool-waiting-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin: 0 14px 12px;
  background: var(--bg-elev);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
}
.pool-waiting-banner[hidden] { display: none; }
.pool-waiting-ico {
  flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 14px;
}
.pool-waiting-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pool-waiting-txt b { font-size: 14px; color: var(--text-0); }
.pool-waiting-txt span { font-size: 12.5px; color: var(--text-1); line-height: 1.45; }

.apex-copy-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-1);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease;
}
.apex-copy-btn:hover { background: var(--bg-card); color: var(--text-0); }
.apex-copy-btn.copied { color: var(--accent-2); border-color: var(--accent-2); }

/* QR card (session page) */
.qr-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.qr-card h3 { color: var(--text-0); }
.qr-card h3 i { color: var(--accent); margin-right: 6px; }
.qr-close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  cursor: pointer;
}
.qr-close:hover { background: var(--bg-elev); color: var(--text-0); }
.qr-card .qr-wrap { width: 180px; height: 180px; }
.qr-card .hint { text-align: center; margin-top: 8px; }

/* finalized card */
.finalized-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.finalized-ico {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  font-size: 20px;
}
.finalized-card h2 { font-size: 18px; margin-bottom: 4px; color: var(--text-0); font-weight: 700; }
.finalized-when { color: var(--accent-2); font-size: 15px; font-weight: 600; margin: 6px 0 4px; }
.finalized-sub { color: var(--text-1); font-size: 12.5px; margin-bottom: 4px; }
.export-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin-top: 16px;
  max-width: 380px;
  margin-left: auto; margin-right: auto;
}
.export-row { display: flex; flex-direction: column; gap: 8px; }
.export-row .btn { flex: 1; }
.export-hint { color: var(--text-2); font-size: 12px; margin-top: 10px; }

/* consensus activity */
.pulse-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.pulse-list h2 { color: var(--text-0); font-weight: 700; }

/* -- Shared panel heading rhythm (workspace cards) ---------------
   Mirrors the landing card-heading treatment: 16px/700/--text-0 with
   a right-aligned meta slot. Replaces the old per-card inline styles so
   every workspace card (QR, roster, Activity, Top) snaps to one rhythm. */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.panel-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--text-0); margin: 0;
}
.panel-title .badge-dim { margin-left: 4px; }

.consensus-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.consensus-item:last-child { border-bottom: none; }

.avatars { display: flex; }
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: #fff;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-left: -6px;
  flex: 0 0 auto;
}
.avatar:first-child { margin-left: 0; }

.c-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.c-name { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-meta { font-size: 11.5px; color: var(--text-2); }
.c-pct { font-size: 11.5px; color: var(--accent-2); font-weight: 600; white-space: nowrap; }

.consensus-spark {
  flex: 0 0 56px;
  height: 26px;
  display: flex; align-items: flex-end; gap: 1px;
}
.consensus-spark .bar {
  flex: 1; min-width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* roster */
.roster-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.roster-item:last-child { border-bottom: none; }
.roster-item .you {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
}

/* tips */
.tip-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.tip-card h4 { font-size: 12px; color: var(--text-1); margin-bottom: 8px; font-weight: 600; }
.tip-card ul { list-style: none; }
.tip-card li {
  font-size: 13px;
  color: var(--text-1);
  padding: 4px 0;
  display: flex; gap: 8px;
}
.tip-card li i { color: var(--text-2); }

/* loaders */
.sesh-loader, .sesh-missing {
  max-width: 480px; margin: 60px auto;
  padding: 28px 22px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.spinner {
  width: 28px; height: 28px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sesh-missing h2 { margin-bottom: 8px; }

/* ---------- modal ---------- */
.modal-wrap {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal-wrap.open { opacity: 1; pointer-events: auto; }
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.modal-box {
  position: relative; z-index: 1;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 22px 18px calc(18px + var(--safe-bot));
  max-width: 520px; width: 100%;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.modal-wrap.open .modal-box { transform: none; }
.modal-box h3 {
  font-size: 17px;
  margin: 4px 0 10px;
  color: var(--text-0);
  font-weight: 700;
}
.modal-box h3 i { color: var(--accent-2); margin-right: 6px; }
.modal-box p { color: var(--text-1); font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; }

.modal-event-preview {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 13px;
}
.modal-event-preview .evt-title {
  font-weight: 600; color: var(--text-0); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.modal-event-preview .evt-title i { color: var(--accent-2); }
.modal-event-preview .evt-when { color: var(--accent-2); font-size: 14px; font-weight: 600; }
.modal-event-preview .evt-meta { color: var(--text-2); font-size: 11.5px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }

.modal-apex-info {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.modal-apex-time { font-size: 14px; font-weight: 600; color: var(--text-0); }
.modal-apex-sub { font-size: 12px; color: var(--text-1); margin-top: 3px; }

/* Booking mode: who is already booked into this candidate window */
.modal-claimants {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.modal-claimants[hidden] { display: none; }
.modal-claimants-hint {
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.modal-claimants-list {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
.modal-claimant {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-0);
}
.modal-claimant.empty {
  background: transparent;
  border-style: dashed;
  color: var(--text-2);
  font-weight: 500;
  font-size: 12px;
}
.modal-claimant-dot {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.09);
}
.modal-claimant-name { font-size: 12px; font-weight: 600; color: var(--text-0); }

/* ---------- finalize candidate-window picker ---------- */
.modal-options-wrap { margin-bottom: 14px; }
.modal-options-hint { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.modal-options { display: flex; flex-direction: column; gap: 6px; max-height: 186px; overflow-y: auto; }
.finalize-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-1);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.finalize-option:hover { border-color: var(--accent); }
.finalize-option.is-selected { border-color: var(--accent-2); background: var(--accent-2-soft); }
.fo-badge { flex: none; font-size: 10px; font-weight: 700; color: var(--accent-2); }
.finalize-option:not(.is-selected) .fo-badge { color: var(--text-2); }
.fo-inner { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-time { font-size: 13px; font-weight: 600; color: var(--text-0); }
.fo-meta { font-size: 11px; color: var(--text-2); }

.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }

.modal-topic-edit {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-0);
  font-size: 14px; font-weight: 600;
  padding: 4px 0; margin-bottom: 6px;
  outline: none;
}
.modal-topic-edit:focus { border-bottom-color: var(--accent); }

/* ---------- interactive states ----------
   IMPORTANT: Do NOT apply `user-select: none` to the entire body when grabbing.
   Doing so disables iOS native momentum scrolling for the matrix-scroll container,
   because Safari ties selection-initiation to scroll-initiation. Only apply the
   grabbing cursor + user-select lock to the matrix grid itself while paint mode is
   active, so the rest of the page (and the matrix before paint is engaged) scrolls
   freely. */
body.grabbing { cursor: grabbing !important; }
body.busy .btn { pointer-events: none; }
/* (legacy .paint-active rule removed — superseded by .mtx.painting above) */

/* ---------- toasts ---------- */
#as-toast-layer {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(16px + var(--safe-bot));
  z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
  pointer-events: none;
  max-width: 480px;
  margin: 0 auto;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-0);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}
.toast--in  { opacity: 1; transform: none; }
.toast--out { opacity: 0; transform: translateY(6px); }
.toast--ok  { border-color: var(--accent-2); }
.toast--err { border-color: var(--danger); }
.toast-msg { position: relative; }

/* ============================================================
   TABLET ≥ 720px
   ============================================================ */
@media (min-width: 720px) {
  body { font-size: 15px; }
  .nav { padding: 10px 22px; }
  .nav-desktop { display: inline-flex; }
  .nav-burger { display: none; }
  .hero { padding: 72px 24px 40px; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wizard { padding: 28px 26px 22px; max-width: 580px; }
  .wizard-step h2 { font-size: 21px; }
  .card { padding: 24px; }
  .sesh-head { padding: 16px 22px; }
  .sesh-head-desktop { display: inline-flex; }
  .nav-burger { display: none; }
  .sesh-title h1 { font-size: clamp(18px, 2.5vw, 22px); }
  .modal-wrap { align-items: center; padding: 20px; }
  .modal-box {
    padding: 28px;
    border-radius: var(--radius);
    transform: scale(0.96) translateY(8px);
  }
  .modal-wrap.open .modal-box { transform: none; }
  .bottom-bar { display: none !important; }
  .export-row { flex-direction: row; }
  .band .card { padding: 40px 28px; }
  .quick-join { flex-wrap: nowrap; }
  .quick-join .qj-label { width: auto; }
}

/* ============================================================
   DESKTOP ≥ 1080px
   ============================================================ */
@media (min-width: 1080px) {
  .sesh-body { margin-top: 16px; }
  .features { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 60px; }
  .feat { padding: 20px; }
  .feat .fi { width: 38px; height: 38px; }
  .sesh-wrap { padding: 0 18px 80px; }
  .sesh-head { padding: 18px 22px; flex-wrap: nowrap; }
  .live-pulse { margin-top: 0; }
  .export-row { flex-direction: row; }
  .band { margin-top: 56px; }
  footer { margin-top: 64px; padding-bottom: 36px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ============================================================
   WIZARD STAGE TRANSITIONS
   ============================================================ */
.wiz-stage {
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.wizard-step {
  transition: opacity .3s ease, transform .3s ease;
}
.wizard-step[hidden] { display: none !important; }
.wizard-step.wiz-slide-out {
  display: block !important;
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
  position: absolute; inset: 0;
}
.wizard-step.wiz-slide-in {
  display: block !important;
  opacity: 0;
  transform: translateX(20px);
  animation: wizSlideIn .35s ease forwards;
}
.wizard-step.wiz-slide-back {
  display: block !important;
  opacity: 0;
  transform: translateX(-20px);
  animation: wizSlideBack .35s ease forwards;
}
@keyframes wizSlideIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes wizSlideBack { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* ============================================================
   IDENTITY ENTRY AVATAR PREVIEW
   ============================================================ */
.id-preview-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.id-preview-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 700;
  color: #fff;
  background: var(--bg-card);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.id-preview-info { flex: 1; min-width: 0; }
.id-preview-label { font-size: 11px; color: var(--text-2); font-weight: 500; }
.id-preview-name {
  font-size: 14px; font-weight: 600; color: var(--text-0);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.id-preview-hint { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ============================================================
   KEYBOARD SHORTCUTS MODAL
   ============================================================ */
.shortcut-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 6px; margin-top: 12px;
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.shortcut-row .kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-1);
}

/* ============================================================
   INSTALL-APP SHEET (mobile PWA)
   ============================================================ */
.install-sheet {
  position: fixed; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
@media (min-width: 720px) {
  .install-sheet { align-items: center; }
}
.install-sheet.open { opacity: 1; pointer-events: auto; }

.install-sheet--scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}

.install-sheet--card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 12px calc(12px + var(--safe-bot, 0px)) 12px;
  padding: 20px 20px 18px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transform: translateY(20px);
  transition: transform .25s ease;
  text-align: center;
}
.install-sheet.open .install-sheet--card { transform: none; }

.install-sheet--close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
}
.install-sheet--close:hover { background: var(--bg-card); color: var(--text-0); }

.install-sheet--icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.install-sheet--title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
}
.install-sheet--body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: 16px;
}
.install-sheet--step {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0;
  padding: 8px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
}
.install-sheet--step .step-ico {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--text-1);
  font-size: 12px;
  border: 1px solid var(--border);
}
.install-sheet--step strong { color: var(--text-0); font-weight: 600; }

.install-sheet--actions {
  display: flex; justify-content: center;
}
.install-sheet--actions .btn { min-width: 120px; }

@media (prefers-reduced-motion: reduce) {
  .install-sheet, .install-sheet--card { transition: none; }
}

/* ============================================================
   TABLET/DESKTOP ENHANCEMENTS
   ============================================================ */
@media (min-width: 720px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .preview-grid { max-width: 380px; }
  .preview-card { padding: 32px 32px 24px; }
  .hero .trust { font-size: 13px; }
  .id-preview-avatar { width: 56px; height: 56px; font-size: 22px; }
  .wiz-stage { min-height: 360px; }
  .modal-box { max-width: 480px; }
}
/* ============================================================
   RICH HOVER TOOLTIP — "who picked this slot"
   A styled card that replaces the native browser title on hover.
   pointer-events:none so it never intercepts taps; it is hidden
   on scroll / pointerdown so it can't stick over the grid.
   ============================================================ */
.slot-tip {
  position: fixed;
  z-index: 120;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(13, 18, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}
.slot-tip[hidden] { display: none; }
.slot-tip-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slot-tip-time {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-0, #f2f7ff);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  padding-bottom: 5px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.slot-tip-creator {
  display: block;
  font-size: 11px;
  color: var(--text-2, #9fb0c8);
  margin-top: -3px;
}
.slot-tip-none {
  display: block;
  font-size: 11.5px;
  color: var(--text-2, #9fb0c8);
  font-style: italic;
}
.slot-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.slot-tip-swatch {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.slot-tip-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1, #dbe6f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-tip-you {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent, #4f8cf7);
  margin-left: 4px;
  opacity: 0.95;
}
.slot-tip-can {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-2, #9fb0c8);
  white-space: nowrap;
}

/* ── Stripe separator shine: hairline between multi-picker stripes ── */
/* The JS gradient already paints dark separators; this gives striped
   cells a subtle crisp edge inside the box so stripes read as distinct
   lanes instead of a soft blend. */
.mtx-slot.has-stripes.stripes-multi {
  background-size: cover;
}

/* ── Legend cross-highlight ────────────────────────────────────────
   Hovering a legend row lights up every matrix slot that participant
   picked (.slot-hot); hovering a striped slot lights up the matching
   legend rows (.is-hot). Both are pure additive accents — selection
   rings (mine), stripes and heat colours all stay intact. */
.mtx-slot.slot-hot {
  box-shadow:
    inset 0 0 0 2px #ffffff,
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 10px 1px rgba(255, 255, 255, 0.35);
  filter: saturate(1.35) brightness(1.12);
}
.stripe-legend-top .legend-item {
  transition: transform 120ms ease, filter 120ms ease;
}
.stripe-legend-top .legend-item.is-hot {
  transform: translateY(-1px);
  filter: brightness(1.25);
}
.stripe-legend-top .legend-item.is-hot .legend-swatch {
  box-shadow:
   inset 0 0 0 1px rgba(0, 0, 0, 0.35),
   0 0 0 2px #ffffff,
   0 0 12px rgba(255, 255, 255, 0.4);
}
/* Legend rows are now keyboard-focusable highlight triggers */
.stripe-legend-top .legend-item:focus-visible {
  outline: 2px solid var(--accent, #4f8cf7);
  outline-offset: 2px;
  border-radius: 6px;
}
.stripe-legend-top .legend-item .legend-you {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #4f8cf7);
  margin-left: 2px;
  white-space: nowrap;
}

/* ========================================================================
   Pool — Booking mode (single-slot FCFS claim per participant)
   ======================================================================== */

/* In booking mode the cells lose their stripe overlays and get a
   tri-state palette: free / mine / taken. */
.mtx.is-booking .mtx-slot.has-stripes {
  background-image: none !important;
  border-color: #2a3342;
}
.mtx.is-booking .mtx-slot.is-free {
  background: #f0f3f7;
  border-color: #d6dbe2;
  cursor: pointer;
}
.mtx.is-booking .mtx-slot.is-free:hover {
  background: #ffffff;
  border-color: var(--text-1);
}
.mtx.is-booking .mtx-slot.is-mine {
  background: rgba(79, 140, 247, 0.18);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
  cursor: pointer;
}
.mtx.is-booking .mtx-slot.is-taken {
  /* The fill is set inline by JS to the claimant's stripe hue so a glance
     at the matrix tells you WHO holds the slot — no hardcoded grey here.
     Just a slightly brighter border, dimmed inner label and a not-allowed
     cursor. */
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--text-2);
  cursor: not-allowed;
}
.mtx.is-booking .mtx-slot.is-taken:hover {
  border-color: rgba(255, 255, 255, 0.34);
}
.mtx.is-booking .mtx-slot.is-taken .booking-taken-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  line-height: 1;
}
.mtx.is-booking .mtx-slot.is-taken .amt { opacity: 0.45; }
.mtx.is-booking .mtx-slot.is-mine .amt { color: var(--accent); font-weight: 600; }

/* Closed slot — the owner turned it off. Not claimable by anyone. */
.mtx.is-booking .mtx-slot.is-closed {
  background: repeating-linear-gradient(45deg, #161a22 0 6px, #1b2029 6px 12px);
  border-color: #232a36;
  cursor: not-allowed;
  opacity: 0.45;
}
.mtx.is-booking .mtx-slot.is-closed .booking-closed-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #3a4252;
  color: #aab2c2;
  font-size: 10px;
  line-height: 1;
}
.mtx.is-booking .mtx-slot.is-closed .amt { opacity: 0.4; }

/* Pending selection — the participant tapped a free slot. A dashed accent
   ring reads as "chosen — press Confirm booking to lock it in". */
.mtx.is-booking .mtx-slot.is-pending {
  background: rgba(91, 158, 255, 0.16);
  border-style: dashed;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(91, 158, 255, 0.35);
  cursor: pointer;
}
.mtx.is-booking .mtx-slot.is-pending:hover {
  background: rgba(91, 158, 255, 0.24);
  border-color: var(--accent);
}
.mtx.is-booking .mtx-slot.is-pending .booking-pending-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #0e1116;
  font-size: 11px;
  line-height: 1;
}

/* Owner controls card — shown to the booking-pool owner (PIN-gated) */
.owner-card {
  border: 1px solid rgba(79, 140, 247, 0.35);
  background: rgba(79, 140, 247, 0.06);
}
.owner-card .owner-pin-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
.owner-card .owner-pin-row .input {
  flex: 1 1 180px;
  min-width: 140px;
}
.owner-card .owner-err {
  color: #ff7a7a;
  font-size: 13px;
  margin: 6px 0 0;
}
.owner-card .owner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.owner-card .owner-status {
  font-size: 13px;
  color: var(--text-2);
  margin: 6px 0;
}
.owner-card .owner-pin-rotate {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #2a3342;
}
.owner-card .owner-pin-rotate summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 13px;
}
.owner-card .btn--primary { background: var(--accent); color: #0e1116; }
.owner-card .btn--primary:hover { filter: brightness(1.08); }

/* Claims card — shown only to the host in booking mode */
.claims-card {
  border: 1px solid rgba(79, 140, 247, 0.35);
  background: rgba(79, 140, 247, 0.06);
}
.claims-card .claims-hint {
  font-size: 13px;
  color: var(--text-2);
  margin: 4px 0 12px;
  line-height: 1.45;
}
.claims-card .claims-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #1a1f29;
  border: 1px solid #2a3342;
  border-radius: 8px;
  flex-wrap: wrap;
}
.claims-card .claims-row .claims-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 0;
}
.claims-card .claims-row .claims-row-name {
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.claims-card .claims-row .claims-row-meta {
  font-size: 12px;
  color: var(--text-2);
}
.claims-card .claims-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.claims-card .claims-row-actions .btn { padding: 6px 10px; font-size: 12px; }
.claims-card .claims-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  border: 1px dashed #2a3342;
  border-radius: 8px;
}

/* ========================================================================
   Pool — Admin page (login + pool table)
   ======================================================================== */
.admin-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.admin-shell h1.admin-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.admin-shell p.admin-subtitle {
  margin: 0 0 24px;
  color: var(--text-2);
  font-size: 14px;
}
.admin-login-card {
  max-width: 420px;
  margin: 40px auto 0;
  padding: 24px;
  background: #14181f;
  border: 1px solid #2a3342;
  border-radius: 12px;
}
.admin-login-card label {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 6px;
}
.admin-login-card input {
  width: 100%;
  padding: 10px 12px;
  background: #0e1116;
  border: 1px solid #2a3342;
  border-radius: 8px;
  color: var(--text-1);
  font-size: 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.admin-login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 140, 247, 0.25);
}
.admin-login-card .admin-err {
  font-size: 13px;
  color: #ff7b7b;
  margin: -8px 0 12px;
  min-height: 18px;
}
.admin-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.admin-pool-card {
  background: #14181f;
  border: 1px solid #2a3342;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-pool-card .admin-pool-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.admin-pool-card .admin-pool-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  flex: 1;
  word-break: break-word;
}
.admin-pool-card .admin-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-pool-card .admin-mode-tag.availability {
  background: rgba(79, 140, 247, 0.18);
  color: var(--accent);
}
.admin-pool-card .admin-mode-tag.booking {
  background: rgba(126, 224, 173, 0.18);
  color: var(--accent-2);
}
.admin-pool-card .admin-pool-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  max-height: 60px;
  overflow: hidden;
}
.admin-pool-card .admin-pool-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-2);
}
.admin-pool-card .admin-pool-meta dt {
  color: var(--text-2);
  font-weight: 500;
}
.admin-pool-card .admin-pool-meta dd {
  margin: 0;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.admin-pool-card .admin-pool-foot {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid #2a3342;
  padding-top: 12px;
  margin-top: 4px;
}
.admin-pool-card .admin-qr {
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  flex-shrink: 0;
}
.admin-pool-card .admin-qr svg { width: 100%; height: 100%; display: block; }
.admin-pool-card .admin-pool-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.admin-pool-card .admin-pool-actions a {
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  word-break: break-all;
}
.admin-pool-card .admin-pool-actions a:hover { text-decoration: underline; }
.admin-pool-card .admin-pool-actions .admin-pool-link-label {
  font-size: 11px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.admin-pool-card .admin-pool-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-2);
}
.admin-pool-card .admin-pool-stats strong {
  display: inline-block;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.admin-pool-card .admin-pool-claims {
  margin-top: 8px;
  border-top: 1px dashed #2a3342;
  padding-top: 10px;
}
.admin-pool-card .admin-pool-claim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.admin-pool-card .admin-pool-claim-row .claim-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-pool-card .admin-pool-claim-row .claim-when {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.admin-pool-card .admin-pool-claim-row .claim-actions {
  display: flex;
  gap: 4px;
}
.admin-pool-card .admin-pool-claim-row .btn { padding: 3px 6px; font-size: 11px; }
.admin-pool-card .admin-pool-empty {
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
}
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.admin-toolbar .admin-toolbar-info {
  font-size: 13px;
  color: var(--text-2);
}
/* Bulk selection bar (select all / delete selected) */
.admin-select-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-top: 8px;
  background: #14181f;
  border: 1px solid #2a3342;
  border-radius: 12px;
}
.admin-select-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-select-count {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* Custom checkbox (card + select-all) */
.admin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.admin-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.admin-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #3a4354;
  border-radius: 5px;
  background: #0e1116;
  color: transparent;
  font-size: 11px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.admin-check input[type="checkbox"]:checked + .admin-check-box,
.admin-check input[type="checkbox"]:indeterminate + .admin-check-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.admin-check input[type="checkbox"]:indeterminate + .admin-check-box i::before {
  content: "\f068"; /* fa-minus for partial selection */
}
.admin-check input[type="checkbox"]:focus-visible + .admin-check-box {
  outline: 2px solid rgba(91, 158, 255, 0.5);
  outline-offset: 2px;
}
.admin-check--card { margin-top: 2px; }
.admin-check--all .admin-check-label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}
/* Selected pool card highlight */
.admin-pool-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(91, 158, 255, 0.12);
}
.admin-empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-2);
  background: #14181f;
  border: 1px dashed #2a3342;
  border-radius: 12px;
  margin-top: 16px;
}
/* Admin per-pool Edit / Delete actions */
.admin-pool-card .admin-pool-admin-actions {
  display: flex;
  gap: 8px;
  padding-top: 2px;
  border-top: 1px solid #232b38;
}
.admin-pool-card .admin-pool-admin-actions .btn {
  padding: 5px 10px;
  font-size: 12px;
}
.admin-pool-card .admin-pool-admin-actions .admin-del {
  color: #ff8a8a;
}
.admin-pool-card .admin-pool-admin-actions .admin-del:hover {
  border-color: #ff8a8a;
  background: rgba(255, 138, 138, 0.08);
}
/* Delete confirm button (danger) */
.admin-del-danger {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}
.admin-del-danger:hover:not(:disabled) {
  background: #c93a31;
  border-color: #c93a31;
}
.admin-del-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .admin-pool-card .admin-pool-foot { flex-direction: column; align-items: stretch; }
  .admin-pool-card .admin-qr { width: 80px; height: 80px; align-self: flex-start; }
}

/* ========================================================================
   Pool — Export & share (host/creator) + print sheet
   ======================================================================== */
.export-card {
  border: 1px solid rgba(79, 140, 247, 0.35);
  background: rgba(79, 140, 247, 0.06);
}
.export-card .claims-hint {
  font-size: 13px;
  color: var(--text-2);
  margin: 4px 0 12px;
  line-height: 1.45;
}
.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.export-actions .btn { flex: 1 1 120px; }
.export-cal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #2a3342;
}
.export-cal-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 8px;
}
.export-cal .export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.export-cal .export-row .btn { flex: 1 1 100px; }
.export-card .export-hint {
  color: var(--text-2);
  font-size: 12px;
  margin-top: 10px;
}

/* Print sheet — hidden on screen, shown by the print stylesheet */
.print-sheet { display: none; }

@media print {
  /* Hide the entire app chrome; show only the schedule sheet */
  body * { visibility: hidden !important; }
  .print-sheet,
  .print-sheet * { visibility: visible !important; }
  .print-sheet {
    display: block !important;
    position: absolute;
    inset: 0;
    padding: 16px 8px 0;
    color: #16181d;
    font-family: Inter, system-ui, sans-serif;
  }
  .print-sheet-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
  }
  .print-sheet-brand {
    font-size: 13px;
    font-weight: 700;
    color: #3b82f6;
  }
  .print-sheet-title {
    font-size: 20px;
    font-weight: 700;
    color: #10131a;
  }
  .print-sheet-meta {
    font-size: 12px;
    color: #5c6470;
  }
  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 10px;
  }
  .print-table th,
  .print-table td {
    border: 1px solid #d8dbe2;
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
  }
  .print-table th {
    background: #eef1f6;
    font-weight: 600;
  }
  .print-sheet-foot {
    margin-top: 14px;
    font-size: 11px;
    color: #8a919c;
  }
}