/* DayXGuitar — base styles (placeholder pass; real visual pass is stage D1) */

:root {
  --bg: #101014;
  --surface: #1a1a21;
  --text: #f2f2f0;
  --muted: #9a9aa3;
  --accent: #ffb347; /* placeholder amber until brand pass */
}

/* Unclassed content links: brand amber, visited included — never browser
   purple. Scoped to a:not([class]) so the wordmark, nav, cards and every
   styled component keep their own colours (the global rule repainted the
   logo amber — reverted 2026-08-31). */
a:not([class]) { color: var(--accent); }
a:not([class]):visited { color: var(--accent); }
a:not([class]):hover { filter: brightness(1.12); }



* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.site-header {
  padding: 1rem 1.5rem;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

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

main { flex: 1; display: flex; flex-direction: column; }

.site-footer {
  padding: 1rem 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* --- C2: journey views (strip + grid) -------------------------------- */

.framing {
  text-align: center;
  padding: 2.5rem 1.5rem 1rem;
}

/* The day number now lives in the sentence rather than above it, so it
   keeps the accent that made the old counter readable at a glance while
   carrying the meaning the bare number did not (2026-09-04). */
.hero-days { color: var(--accent); }

.framing .day-count {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin: 0;
}

.framing .day-count span { font-size: 1.6rem; }

.framing h1 {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0.5rem auto 0.75rem;
  max-width: 46rem;
}

/* The homepage headline specifically (2026-09-04). Smaller than the old hero
   so the invitation below it clears the fold on a phone, and NOT uppercase:
   the old headline was short enough to shout, this one is two sentences and
   caps at that length is hard to read. Centring is kept — it is the page's
   existing character and there was no reason to change it. */
.framing h1.hero-h1 {
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
  max-width: 30rem;
}
.framing h1.hero-h1 + .sub { font-size: 0.9rem; max-width: 34rem; }

/* --- the invitation (2026-09-04) -------------------------------------------
   Its own block rather than a row of buttons under the sub-line: it reads as a
   distinct offer instead of a footnote, and it is the part that survives being
   skim-read. Sits between the hero and the view controls so a visitor meets it
   before they start scrolling days. */
.invite {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid var(--surface);
  background: var(--surface);
  border-radius: 14px;
  text-align: center;
}
.invite-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.16em; color: var(--accent);
  margin: 0 0 0.45rem; font-weight: 700;
}
.invite-lede { margin: 0 0 0.8rem; font-size: 0.92rem; line-height: 1.45; }
.invite-cta {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.invite-note { font-size: 0.76rem; color: var(--muted); }
/* The secondary action scrolls to the timeline rather than leaving the site —
   sending someone to YouTube here would eject them to the one place they
   cannot sign up (Niall asked, 2026-09-04). */
.invite-scroll { text-decoration: none; }

.framing .sub {
  color: var(--muted);
  max-width: 38rem;
  margin: 0 auto;
}

/* view toggle */

.viewbar {
  display: flex;
  justify-content: center;
  padding: 0.5rem 1.5rem 1rem;
}

.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border-radius: 999px;
  padding: 3px;
}

.view-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}

.view-toggle button[aria-selected="true"] {
  background: var(--accent);
  color: #181206;
}

/* shared card look */

.day-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  flex: 0 0 auto;
}

.day-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.day-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2rem;
}

/* --- strip mode: the scrub timeline --- */

.strip-readout {
  display: none;
  text-align: center;
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.08em;
}

/* The date is the readout now — the day number moved out entirely, since
   it is already the largest thing on every thumbnail underneath this. */
#readout-date { font-size: 1.5rem; letter-spacing: 0.02em; }

.mode-strip .strip-readout { display: block; }

.mode-strip .timeline {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* Edge padding must be 50vw minus HALF A CARD so the first/last day can
     truly centre. Card width = min(52vh, 460px) * 9/16, half = min(14.625vh,
     129.4px) — hardcoding 130px broke centring in short viewports. */
  /* Vertical padding must absorb the active card's 1.14 scale-up (7% of
     card height each way, ~32px max) plus its outline, or the strip's
     scroll box clips the ring's rounded corners top and bottom. */
  padding: calc(min(3.7vh, 33px) + 4px)
           max(1.5rem, calc(50vw - min(14.625vh, 129.4px)))
           calc(min(3.7vh, 33px) + 4px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.mode-strip .timeline::-webkit-scrollbar { display: none; }
.mode-strip .timeline.dragging { cursor: grabbing; }
.mode-strip .timeline.dragging .day-card { pointer-events: none; }

.mode-strip .day-card {
  height: min(52vh, 460px);
  transition: transform 0.12s ease;
}

.mode-strip .day-card:hover { transform: scale(1.02); }

/* scrubber bar */

.scrubber {
  display: none;
  align-items: flex-end;
  gap: 0.9rem;
  max-width: 760px;
  margin: 1rem auto 2.25rem;
  padding: 0.85rem 1.4rem 0.95rem;
  width: calc(100% - 3rem);
  /* glass dock: translucent, blurred, floating above the page */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mode-strip .scrubber { display: flex; }

/* Each end is a little column: the day number centred ABOVE its stopper
   bar (Niall's call — side-by-side alignment looked odd). The bottom
   padding lines the bar up with the track's vertical centre. */
.scrub-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  padding-bottom: 5px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

.scrub-end::after {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--muted);
}

#scrub {
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  outline-offset: 4px;
}

#scrub::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
}

#scrub::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
}

/* --- grid mode: the C1 wall --- */

.mode-grid .strip-readout,
.mode-grid .scrubber { display: none; }

.mode-grid .timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  padding: 1rem 1.5rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.mode-grid .day-card { transition: transform 0.12s ease; }
.mode-grid .day-card:hover { transform: scale(1.04); z-index: 1; }

/* --- C3: dwell-to-load day overlay ----------------------------------- */

.day-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 8, 10, 0.75);
  backdrop-filter: blur(4px);
}

.day-overlay[hidden] { display: none; }

.day-overlay-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: min(900px, 100%);
  max-height: 100%;
  background: var(--surface);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.day-overlay-media iframe {
  border: 0;
  border-radius: 10px;
  display: block;
}

/* Shorts and Lives are vertical; long-form is 16:9 */
.day-overlay-media iframe.kind-short,
.day-overlay-media iframe.kind-live {
  width: min(42vh, 320px);
  aspect-ratio: 9 / 16;
  height: auto;
}

.day-overlay-media iframe.kind-long {
  width: min(70vw, 560px);
  aspect-ratio: 16 / 9;
  height: auto;
}

.day-overlay-info { min-width: 0; max-width: 20rem; }

.day-overlay-day {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  margin: 0;
}

.day-overlay-date { color: var(--muted); margin: 0.1rem 0 0.6rem; font-size: 0.9rem; }

.day-overlay-title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.day-overlay-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 1;
}

.day-overlay-close:hover { color: var(--text); }

@media (max-width: 640px) {
  .day-overlay { padding: 0.75rem; }
  .day-overlay-card { flex-direction: column; gap: 0.75rem; text-align: center; overflow-y: auto; }
  .day-overlay-info { max-width: none; }
}

body.overlay-open { overflow: hidden; } /* page doesn't scroll behind the modal */

/* While the modal is open the scrubber moves into the overlay (JS reparents
   it) and sits directly under the box, so you can keep travelling without
   dismissing — the modal just follows. */
.day-overlay .scrubber {
  display: flex;
  margin: 1rem 0 0;
  width: min(760px, 100%);
}

/* autoplay toggle (viewbar) */

.viewbar { gap: 0.75rem; }

.autoplay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}

.autoplay-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.autoplay-toggle[aria-pressed="true"] { color: var(--text); }
.autoplay-toggle[aria-pressed="true"] .autoplay-dot { background: var(--accent); }

/* --- D0b: day details page ------------------------------------------- */

.day-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  width: 100%;
}

.day-page-cols {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

/* left: the video, large */

.day-page-player {
  position: relative;
  flex: 0 0 min(400px, 42vw);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.day-page-player img { width: 100%; height: 100%; object-fit: cover; display: block; }

.day-page-player iframe { width: 100%; height: 100%; border: 0; display: block; }

.day-page-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.7);
  color: var(--accent);
  font-size: 1.8rem;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.day-page-play:hover { transform: scale(1.08); }

/* right: the details column */

.day-page-details { flex: 1; min-width: 0; }

.day-page-day {
  color: var(--accent);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  margin: 0;
}

.day-page-head h1 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
}

.day-meta {
  margin: 1.25rem 0;
  border-top: 1px solid var(--surface);
}

.day-meta-row {
  display: flex;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--surface);
}

.day-meta-row dt {
  flex: 0 0 7rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.9;
}

.day-meta-row dd { margin: 0; font-weight: 600; }

/* tag pills */

.day-tags h2,
.day-page-milestones h2 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.25rem 0 0.4rem;
}

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

.pill {
  --pill: var(--accent);
  background: color-mix(in srgb, var(--pill) 22%, transparent);
  color: var(--pill);
  border: 1px solid color-mix(in srgb, var(--pill) 55%, transparent);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
}

.day-page-summary { color: var(--text); margin-top: 1.25rem; }

.day-page-milestones ul { padding-left: 1.2rem; margin: 0.25rem 0 0; }

.day-page-links { display: flex; gap: 1.5rem; margin-top: 1.5rem; flex-wrap: wrap; }

.day-page-links a { color: var(--accent); }

.day-page-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface);
}

.day-page-nav a { color: var(--text); text-decoration: none; font-weight: 600; }

.day-page-nav a:hover { color: var(--accent); }

.day-page-nav .nav-home { color: var(--muted); }

@media (max-width: 760px) {
  .day-page-cols { flex-direction: column; }
  .day-page-player { flex: none; width: min(340px, 85vw); margin: 0 auto; }
  .day-page-details { width: 100%; }
}

/* --- C5: about page + site nav/footer links --------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}

.site-nav a:hover { color: var(--text); }

.about {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  width: 100%;
}

.about h1 { font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

.about h2 {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2rem;
}

.about p { color: var(--text); }

.about a { color: var(--accent); }

.about-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.about-socials svg { width: 28px; height: 28px; display: block; }

.about-socials a { color: var(--muted); }

.about-socials a:hover { color: var(--accent); }

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  margin: 0.5rem 0 0;
}

.footer-socials svg { width: 18px; height: 18px; display: block; }

.footer-socials a { color: var(--muted); }

.footer-socials a:hover { color: var(--accent); }

.footer-about { font-size: 0.85rem; }

/* month markers above the scrubber */

.scrub-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.scrub-mid #scrub { width: 100%; }

.scrub-months { display: flex; }

.scrub-month {
  flex-basis: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c9c9d2;
  border-left: 1px solid rgba(154, 154, 163, 0.35);
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
}

.scrub-month:first-child { border-left: 0; }

.scrub-month.active { color: var(--accent); }

/* popout under the scrubber thumb while dragging */

.scrub-mid { position: relative; }

/* End stoppers now live inside the end labels — see .scrub-end below. */

.scrub-tip {
  position: absolute;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 70; /* above the modal, since the scrubber rides under it */
}

.scrub-tip::before { /* little arrow pointing up at the thumb */
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--surface);
  border-top: 0;
}

/* restored: blocks accidentally dropped in the D0b CSS rewrite */

/* the centred day stands slightly proud of its neighbours */
.mode-strip .day-card { transition: transform 0.18s ease; }
.mode-strip .day-card.active {
  transform: scale(1.14);
  z-index: 1;
  outline: 2px solid var(--accent); /* small orange border marks the active day */
  outline-offset: -1px; /* hugs the rounded corners instead of boxing them */
}
.mode-strip .day-card.active:hover { transform: scale(1.16); }
/* Breathing room WITHOUT layout shift: the old margin approach moved real
   layout under the scroll maths, so centredIndex() measured a neighbour
   after every programmatic centring (wrong modal day, readout off by one).
   Transforms shift pixels, not geometry: everything before the active card
   slides left, everything after slides right. */
.mode-strip .day-card:has(~ .day-card.active) { transform: translateX(-18px); }
.mode-strip .day-card.active ~ * { transform: translateX(18px); }

/* modal: link to the day's real page */
.day-overlay-link {
  display: inline-block;
  margin-top: 0.9rem;
  color: #181206;
  background: var(--accent);
  font-weight: 700;
  text-decoration: none;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
}

.day-overlay-link:hover { filter: brightness(1.1); }

/* restored: next-day placeholder styles (also lost in the D0b CSS slice) */

/* the next day's placeholder — the journey continues */
.day-next {
  flex: 0 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  border: 2px dashed rgba(154, 154, 163, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--muted);
}

.mode-strip .day-next { height: min(52vh, 460px); }

.day-next-num { font-weight: 800; font-size: 1.6rem; opacity: 0.7; }

.day-next-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.footer-version {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.6;
  align-self: center;
}

/* --- Zoomable timeline: zoom controls + month/year bands --------------- */

.zoom-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border-radius: 999px;
  padding: 3px;
}

.zoom-ctl button {
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.zoom-ctl button:hover:not(:disabled) { background: rgba(255, 179, 71, 0.2); }
.zoom-ctl button:disabled { color: var(--muted); opacity: 0.4; cursor: default; }

.zoom-level {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 4.5rem;
  text-align: center;
}

/* level visibility: one card set at a time (strip mode only) */

.band-card { display: none; }

.mode-strip.zoom-month .day-card,
.mode-strip.zoom-month .day-next,
.mode-strip.zoom-year .day-card,
.mode-strip.zoom-year .day-next { display: none; }

.mode-strip.zoom-month .month-card { display: block; }
.mode-strip.zoom-year .year-card { display: block; }

/* zoomed out: readout, scrubber and month rail belong to day level */
.mode-strip.zoom-month .strip-readout,
.mode-strip.zoom-month .scrubber,
.mode-strip.zoom-year .strip-readout,
.mode-strip.zoom-year .scrubber { display: none; }

/* grid never zooms (spec: no grid changes) */
.mode-grid .band-card { display: none; }

/* band card look: same family as day cards */

.band-card {
  position: relative;
  flex: 0 0 auto;
  height: min(52vh, 460px);
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.band-card:hover { transform: scale(1.02); }

.band-card .band-simple { width: 100%; height: 100%; object-fit: cover; display: block; }

.band-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(8, 8, 10, 0.85));
  text-align: left;
  pointer-events: none;
}

.band-label strong {
  display: block;
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.band-label em {
  font-style: normal;
  color: #fff;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* --- next/prev step buttons: live inside the scrubber dock ------------ */

.step-btn {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 34px;
  height: 34px;
  margin-bottom: -3px; /* optically centre on the track row */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0 0 3px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
  user-select: none;
  touch-action: manipulation;
}

.step-btn:hover { background: rgba(255, 179, 71, 0.3); }
.step-btn:active { transform: scale(0.92); }

/* countdown line on the placeholder — only present when the drop is today */
.day-next-countdown {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; /* digits don't jitter as seconds tick */
}

.day-next-countdown:empty { display: none; } /* no layout shift when absent */

/* --- F2/F6: account pages + studio shell ------------------------------ */

.site-nav { display: flex; gap: 1.1rem; }

.account, .studio {
  max-width: 420px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  width: 100%;
}

.account h1, .studio h1 { font-size: 1.6rem; margin: 0 0 1.25rem; }

.account-form p { margin: 0 0 0.9rem; }

.account-form label { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.3rem; }

.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.account-form .helptext, .account-form .errorlist { font-size: 0.8rem; color: var(--muted); }
.account-form .errorlist, .form-errors { color: #f87171; }

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #181206;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font: inherit;
  cursor: pointer;
}

.btn-primary:disabled { opacity: 0.4; cursor: default; }

.account-links { margin-top: 1rem; font-size: 0.9rem; }
.account-links a { color: var(--accent); }

.studio { max-width: 560px; }

.studio-kicker {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  margin: 0;
}

.studio-sub { color: var(--muted); }

.studio-status { list-style: none; padding: 0; margin: 1.5rem 0; }

.studio-status li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--surface);
}

.studio-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #f87171; }
.studio-status em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 0.85rem; }

/* --- F3: member profile ------------------------------------------------ */

.profile { max-width: 520px; margin: 0 auto; padding: 3rem 1.5rem; width: 100%; }
.profile h1 { font-size: 1.6rem; margin: 0.5rem 0; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; }
.profile-bio { color: var(--muted); }

/* --- What's new ---------------------------------------------------------- */
.whats-new { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; width: 100%; }
.whats-new h1 { font-size: 1.6rem; margin: 0.25rem 0 0.25rem; }
.release { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--surface); }
.release h2 { font-size: 1.1rem; margin: 0; }
.release-version { color: var(--accent); font-weight: 700; }
.release ul { padding-left: 1.2rem; }
.release li { margin: 0.35rem 0; }
/* --- G1: day discussion + reactions ------------------------------------ */

.discussion { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--surface); }
.discussion h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.muted { color: var(--muted); }
.reactions { display: flex; gap: 0.5rem; }
.reactions form { margin: 0; }
.pill.reaction { cursor: pointer; font: inherit; font-weight: 700; font-size: 0.9rem; }
.pill.reaction.mine { --pill: var(--accent); }
.pill.reaction b { font-weight: 800; margin-left: 0.2rem; }
.comments { list-style: none; padding: 0; margin: 1rem 0; }
.comment { padding: 0.8rem 0; border-bottom: 1px solid var(--surface); }
.comment-head { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; }
.comment-head a { color: var(--accent); font-weight: 700; text-decoration: none; }
.comment-body { margin: 0.35rem 0; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: 0.9rem; }
.comment-actions form { margin: 0; }
.linkish { border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; padding: 0; }
.linkish.danger { color: #f87171; }
.comment-form textarea {
  width: 100%; padding: 0.7rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
  background: var(--surface); color: var(--text); font: inherit; margin-bottom: 0.6rem; resize: vertical;
}
.flash { padding: 0.5rem 0.8rem; border-radius: 8px; background: var(--surface); }
.flash.error { color: #f87171; }
.flash.success { color: #4ade80; }
.card-social {
  position: absolute; right: 6px; bottom: 6px; font-size: 0.7rem; font-weight: 700;
  background: rgba(8,8,10,0.65); color: #fff; padding: 2px 6px; border-radius: 999px;
}
.day-overlay-social { font-size: 0.85rem; margin: 0.4rem 0 0; }

/* --- G2: forum ------------------------------------------------------------ */
.forum { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem; width: 100%; }
.forum h1 { font-size: 1.6rem; margin: 0.25rem 0; }
.forum .studio-kicker a { color: var(--accent); text-decoration: none; }
.cat-list, .thread-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.cat, .thread-row { display: grid; gap: 0.15rem; padding: 0.9rem 0; border-bottom: 1px solid var(--surface); }
.cat a, .thread-row a { color: var(--text); text-decoration: none; }
.cat a:hover strong, .thread-row a:hover strong { color: var(--accent); }
.cat.locked { opacity: 0.7; }
.thread-row.pinned { background: rgba(255, 179, 71, 0.06); }
.text-input {
  width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
  background: var(--surface); color: var(--text); font: inherit; margin-bottom: 0.6rem;
}

/* --- G3: moderation ---------------------------------------------------- */
.mod-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.mod-actions .text-input { flex: 1 1 200px; margin: 0; }
.mod-actions .pill { cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700; }
.mod-actions .pill.danger { --pill: #f87171; }

.day-overlay-social { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }
.day-overlay-social .reaction:disabled { cursor: default; opacity: 0.85; }

/* --- G4: directory + profile extras -------------------------------------- */
.profile-stats { font-size: 0.9rem; }
.profile-h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-top: 1.5rem; }
.dir-search { margin: 1rem 0; }

/* --- email capture band ---------------------------------------------------- */
.capture { max-width: 560px; margin: 1rem auto 2.5rem; padding: 1.5rem; text-align: center; border-radius: 16px; background: var(--surface); }
.capture h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.capture-form { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.capture-form .text-input { flex: 1; margin: 0; }
.capture-thanks { color: var(--accent); font-weight: 700; margin: 0; }
@media (max-width: 520px) { .capture-form { flex-direction: column; } }
/* --- G5: notifications ---------------------------------------------------- */
.nav-bell { text-decoration: none; position: relative; }
.nav-bell b { position: absolute; top: -6px; right: -10px; background: var(--accent); color: #181206; font-size: 0.65rem; border-radius: 999px; padding: 0 5px; }
.comment.unread { background: rgba(255, 179, 71, 0.06); }
.comment.unread a, .comment a { color: var(--text); text-decoration: none; }

/* --- G6: community landing ------------------------------------------------ */
.landing { max-width: 960px; }
.landing-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; margin-top: 1.5rem; }
.landing .profile-h2 a { color: var(--accent); text-decoration: none; }
.cat-list.compact .cat { padding: 0.45rem 0; grid-template-columns: 1fr auto; display: grid; }
.landing-members { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.landing-members .pill { text-decoration: none; }
@media (max-width: 760px) { .landing-grid { grid-template-columns: 1fr; } }

/* --- H1: live schedule + banner ------------------------------------------- */
.live-banner { display: block; text-align: center; background: #b91c1c; color: #fff; font-weight: 700; padding: 0.5rem 1rem; text-decoration: none; }
.live-card { padding: 1.25rem; border-radius: 14px; background: var(--surface); margin: 1rem 0; }
.live-card h2 { margin: 0.4rem 0; }
.live-pill { --pill: #f87171; }
.live-room { margin-top: 1.5rem; padding: 1.5rem; border-radius: 14px; background: var(--surface); }

/* --- H2: the hangout room (mockup A, stage first) -------------------------- */
.room-page { max-width: 1280px; margin: 0 auto; padding: 1.5rem; width: 100%; }
.room-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-title h1 { font-size: 1.4rem; margin: 0; }
.room { display: flex; gap: 20px; margin-top: 1rem; min-height: 560px; }
.room-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.stage-host { position: relative; min-height: 330px; border-radius: 14px; background: linear-gradient(160deg, #23232c, #15151b); outline: 2px solid var(--accent); outline-offset: -2px; overflow: hidden; }
.stage-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 110px; }
.stage-tile { position: relative; min-height: 110px; border-radius: 12px; background: linear-gradient(160deg, #23232c, #15151b); overflow: hidden; }
.stage-host .stage-tile { position: absolute; inset: 0; border-radius: 0; }
.stage-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(8,8,10,0.85)); display: flex; justify-content: space-between; font-size: 13px; }
.room-dock { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(14px); flex-wrap: wrap; }
.room-privacy { margin-left: auto; font-size: 12px; }
.room-chat { width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--surface); }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.chat-row { display: flex; gap: 8px; }
.chat-who { color: var(--accent); font-weight: 700; }
.chat-form { display: flex; gap: 6px; }
.chat-form .text-input { margin: 0; }
@media (max-width: 860px) { .room { flex-direction: column; } .room-chat { width: auto; } }

/* --- H3: requests / stage panels (host) ----------------------------------- */
.room-requests { width: 280px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); }
.req-list { display: flex; flex-direction: column; gap: 8px; }
.req-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.05); }
.req-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.req-info strong { font-size: 13px; }
.req-info em { font-style: normal; font-size: 12px; }
.req-row .btn-primary { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
@media (max-width: 1100px) { .room-requests { width: auto; } }

/* --- H5: Broadcast Studio ------------------------------------------------ */
.studio { max-width: 760px; }
.studio-live { max-width: 1400px; }
.studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.25rem 0; }
.studio-card { padding: 16px; border-radius: 16px; background: var(--surface); }
.studio-status .dot.ok { background: #4ade80; }
.studio-status .dot.unknown { background: #9a9aa3; }
.dest-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dest-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); margin: 0; }
.dest-row strong { flex: 1; font-size: 13px; }
.toggle { width: 34px; height: 20px; border-radius: 999px; border: 0; background: #3a3a44; position: relative; cursor: pointer; padding: 0; }
.toggle span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); transition: left 0.12s ease; }
.toggle.on { background: var(--accent); }
.toggle.on span { left: 16px; }
.golive-dock { display: flex; align-items: center; gap: 16px; padding: 28px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(14px); margin: 1.25rem 0; }
.golive { border: 0; border-radius: 999px; background: #f87171; color: var(--bg); font: inherit; font-weight: 900; font-size: 1.25rem; letter-spacing: 0.06em; padding: 18px 34px; cursor: pointer; }
.golive:hover { filter: brightness(1.08); }
.studio-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.studio-counts { display: flex; flex-direction: column; text-align: right; font-size: 0.9rem; }
.studio-cols { display: grid; grid-template-columns: 260px 1fr 300px; gap: 20px; margin-top: 1rem; }
.studio-col { display: flex; flex-direction: column; gap: 16px; }
.studio-preview { min-height: 360px; border-radius: 14px; background: linear-gradient(160deg, #23232c, #15151b); display: flex; align-items: center; justify-content: center; }
.danger-pill { --pill: #f87171; cursor: pointer; font: inherit; font-weight: 800; }
.studio-note { margin-top: 1rem; font-size: 0.85rem; }
@media (max-width: 1100px) { .studio-cols { grid-template-columns: 1fr; } .studio-grid { grid-template-columns: 1fr; } }

/* --- H6: members chat ------------------------------------------------------ */
.chat-standalone { width: auto; min-height: 480px; max-height: 70vh; }
.chat-standalone .chat-log { min-height: 360px; }
.chat-row time { margin-left: auto; font-size: 0.75rem; }
.chat-status { font-size: 0.8rem; margin: 0; }

/* --- Pricing page (Phase I2) --- */
.pricing { max-width: 560px; margin: 0 auto; padding: 32px 16px 64px; text-align: center; }
.price-card { border: 1px solid #2a2a31; border-radius: 16px; padding: 28px 24px; margin: 24px 0; background: #17171c; }
.price-card-founding { border-color: var(--accent, #ffb347); box-shadow: 0 0 24px rgba(255, 179, 71, .12); }
.price-badge { display: inline-block; font-size: .72rem; letter-spacing: .12em; font-weight: 700; color: #101014; background: var(--accent, #ffb347); border-radius: 999px; padding: 4px 12px; }
.price-count { margin: 12px 0 4px; color: var(--muted); }
.price-count b { color: var(--accent, #ffb347); font-size: 1.15em; }
.price-amount { font-size: 3rem; font-weight: 800; margin: 8px 0; }
.price-per { font-size: 1rem; font-weight: 400; color: var(--muted); }
.price-promise { color: var(--muted); font-size: .92rem; }
.price-benefits { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.price-benefits li { padding: 6px 0 6px 28px; position: relative; }
.price-benefits li::before { content: "✓"; position: absolute; left: 4px; color: var(--accent, #ffb347); font-weight: 700; }
.price-thanks { color: var(--accent, #ffb347); font-weight: 600; }
.pricing-faq { text-align: left; margin-top: 40px; }
.pricing-faq h2 { font-size: 1.1rem; }
.pricing-faq p { color: var(--muted); }
.pricing-faq b { color: inherit; }

/* Pricing: two tiers (Member / Band Member) */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; text-align: center; }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }
.pricing { max-width: 760px; }
.price-grid .price-card { margin: 24px 0 0; }
.price-card-free { opacity: .92; }
.price-tier { display: inline-block; font-size: .72rem; letter-spacing: .12em; font-weight: 700; color: var(--muted); border: 1px solid #2a2a31; border-radius: 999px; padding: 4px 12px; }
.btn-ghost { display: inline-block; border: 1px solid #2a2a31; color: inherit; border-radius: 999px; padding: 10px 20px; text-decoration: none; }
.btn-ghost:hover { border-color: var(--accent, #ffb347); }

/* Submit feedback: pressed feel + busy spinner (site-wide) */
button:active, input[type="submit"]:active, .btn-primary:active, .btn-ghost:active { transform: scale(.96); }
button, input[type="submit"], .btn-primary, .btn-ghost { transition: transform .08s ease, opacity .15s ease; }
.btn-busy { opacity: .55; pointer-events: none; }
.btn-busy::after {
  content: ""; display: inline-block; vertical-align: -2px; margin-left: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: dxg-spin .7s linear infinite;
}
@keyframes dxg-spin { to { transform: rotate(360deg); } }

/* Billing visibility */
.profile-ends { color: var(--accent, #ffb347); background: rgba(255,179,71,.08); border: 1px solid rgba(255,179,71,.3); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.profile-billing .pill { margin-right: 8px; text-decoration: none; }
.billing-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.billing-table th, .billing-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #2a2a31; }
.billing-table th { color: var(--muted); font-size: .8rem; letter-spacing: .05em; }
.billing-table a { color: var(--accent, #ffb347); }

/* Stripe attribution (brand blurple wordmark styling) */
.powered-by-stripe { font-size: .78rem; letter-spacing: .02em; }
.powered-by-stripe b { color: #635bff; font-weight: 800; letter-spacing: -.02em; }

/* --- Member shell: left sidebar "SIDE A" (K3) + mobile glass dock --- */
.member-shell { display: flex; min-height: calc(100vh - 120px); }
.member-rail { width: 224px; flex-shrink: 0; border-right: 1px solid #2a2a31; background: #121217;
  display: flex; flex-direction: column; padding: 18px 12px 14px; gap: 2px; }
.rail-me { border: 1px solid #2a2a31; border-radius: 12px; padding: 12px; background: #17171c; margin-bottom: 14px; }
.rail-hello { font-size: .76rem; color: var(--muted); margin-bottom: 8px; }
.rail-id { display: flex; gap: 10px; align-items: center; }
.rail-id b { font-size: .92rem; }
.rail-id small { font-size: .64rem; color: var(--accent); letter-spacing: .05em; }
.rail-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #e0763a); display: grid; place-items: center;
  font-weight: 800; color: #101014; }
.member-rail nav { display: flex; flex-direction: column; gap: 2px; }
.member-rail nav a { display: flex; align-items: center; gap: 10px; color: var(--muted);
  text-decoration: none; font-size: .92rem; padding: 9px 10px; border-radius: 9px; }
.member-rail nav a:hover { color: var(--text, #f5f5f7); }
.member-rail nav a.on { background: #1d1d24; color: var(--text, #f5f5f7);
  border-left: 3px solid var(--accent); padding-left: 7px; }
.ri { width: 18px; text-align: center; }
.rail-cnt { margin-left: auto; background: var(--accent); color: #101014; font-size: .66rem;
  font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.rail-grow { flex: 1; }
.rail-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #2a2a31; padding-top: 8px; }
.rail-foot a { color: var(--muted); text-decoration: none; font-size: .84rem; padding: 7px 10px; border-radius: 9px; }
.rail-foot a:hover { color: var(--text, #f5f5f7); }
.member-main { flex: 1; min-width: 0; padding: 8px 8px 40px; }
/* public bar additions */
.join-pill { background: var(--accent); color: #101014 !important; font-weight: 800;
  border-radius: 999px; padding: 8px 18px; box-shadow: 0 4px 18px rgba(255,179,71,.25); }
.nav-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #e0763a); color: #101014 !important; font-weight: 800; }
@media (max-width: 760px) {
  .member-shell { flex-direction: column; min-height: 0; }
  .member-rail { width: 100%; flex-direction: row; align-items: center; overflow-x: auto;
    position: sticky; top: 0; z-index: 30; border-right: 0; border-bottom: 1px solid #2a2a31;
    background: rgba(18,18,23,.88); backdrop-filter: blur(8px); padding: 8px 10px; }
  .rail-me { display: none; }
  .member-rail nav { flex-direction: row; }
  .member-rail nav a { font-size: .8rem; padding: 7px 9px; }
  .member-rail nav a.on { border-left: 0; border-bottom: 2px solid var(--accent); border-radius: 9px 9px 0 0; padding-left: 9px; }
  .rail-foot { flex-direction: row; border-top: 0; padding-top: 0; }
}

/* Tier pills in the member rail */
.tier-pill { display: inline-block; margin-top: 3px; font-size: .64rem; font-weight: 700;
  letter-spacing: .04em; border-radius: 999px; padding: 2px 9px;
  border: 1px solid #2a2a31; color: var(--muted); }
.tier-pill.tier-band { border-color: var(--accent); color: var(--accent); }
.tier-pill.tier-founder { background: var(--accent); border-color: var(--accent); color: #101014; }

/* Buttons rendered as links: never underline, keep button colors */
a.btn-primary, a.btn-ghost, a.pill { text-decoration: none; }
a.btn-primary { color: #101014; }

/* Subtle upgrade link for free members (member rail) */
.rail-upgrade { display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(255,179,71,.45); border-radius: 9px;
  color: var(--accent); text-decoration: none; font-size: .8rem; font-weight: 600; }
.rail-upgrade:hover { background: rgba(255,179,71,.08); border-color: var(--accent); }
.rail-upgrade span { opacity: .7; }

/* Member-area top bar: brand only (nav lives in the rail) */
.member-top { justify-content: flex-start; border-bottom: 1px solid #2a2a31; }

/* --- Ghost preview cards (L3): the next 3 days, blurred into mystery --- */
.ghost-day { position: relative; overflow: hidden; }
.ghost-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(var(--ghost-blur, 16px)) saturate(.5) brightness(.55);
  transform: scale(1.15); /* hide blur edge bleed */
  transition: filter .6s ease; }
.ghost-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,16,.3), rgba(12,12,16,.7)); }
.ghost-day .day-next-num, .ghost-day .day-next-label, .ghost-day .day-next-countdown
  { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.ghost-when { color: #c9c9d1; }

/* Ghost cards: gentle lock + unlock note (only when membership is public) */
.ghost-lock { position: absolute; top: 8px; right: 8px; z-index: 1; font-size: .85rem;
  background: rgba(12,12,16,.55); border-radius: 999px; padding: 4px 7px; cursor: pointer; }
.ghost-unlock-note { position: relative; z-index: 1; display: block; margin-top: 8px;
  font-size: .72rem; color: #e3e3ea; text-shadow: 0 2px 10px rgba(0,0,0,.85); cursor: pointer; }
.ghost-unlock-note b { color: var(--accent); font-weight: 700; }
.ghost-unlock-btn { position: relative; z-index: 1; display: inline-block; margin-top: 8px;
  background: var(--accent); color: #101014; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.5); }
.ghost-unlock-btn:hover { filter: brightness(1.08); }

/* L2: early-access ghost cards for Band Members */
.ghost-early { cursor: pointer; }
.ghost-early .ghost-thumb { filter: blur(2px) saturate(.9) brightness(.8); }
.ghost-early:hover .ghost-thumb, .ghost-early:focus-visible .ghost-thumb { filter: none; }
.ghost-early-badge { position: absolute; top: 8px; right: 8px; z-index: 1;
  background: var(--accent); color: #101014; font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; border-radius: 999px; padding: 3px 8px; }

/* --- The Challenge (M1/M2) --- */
.challenge-page { max-width: 620px; }
.sec-eyebrow { font-size: .68rem; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.chal-steps { list-style: none; padding: 0; margin: 18px 0; }
.chal-steps li { padding: 7px 0 7px 22px; position: relative; }
.chal-steps li::before { content: "·"; position: absolute; left: 8px; color: var(--accent); font-weight: 700; }
.chal-fine { font-size: .85rem; margin-top: 18px; }
.chal-track { border: 1px solid #2a2a31; border-radius: 14px; padding: 16px; margin-top: 20px; background: #17171c; }
.chal-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 10px 0; }
.chal-months i { height: 26px; border-radius: 6px; background: #101014; border: 1px solid #2a2a31;
  display: grid; place-items: center; font-size: .62rem; color: var(--muted); font-style: normal; }
.chal-months i.on { background: rgba(255,179,71,.18); border-color: var(--accent); color: var(--accent); }

/* M4: the member journey wall — Niall's timeline grammar, member-sized */
.journey-page { max-width: 720px; }
.jt-form { display: grid; gap: 8px; margin: 14px 0 20px; }
.jt-form textarea, .jt-form input { background: #101014; border: 1px solid #2a2a31;
  border-radius: 10px; color: var(--text); padding: 10px 12px; font: inherit; }
.jt-form button { justify-self: start; }
.jt-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px;
  scrollbar-width: thin; }
.jt-card { flex: 0 0 128px; aspect-ratio: 9 / 16; border-radius: 10px;
  border: 1px solid #2a2a31; background: linear-gradient(180deg, #23232b, #17171c);
  padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.jt-day { font-size: .66rem; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.jt-text { margin: 0; font-size: .74rem; color: #d6d6de; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.jt-clip { font-size: .7rem; color: var(--accent); }
.jt-today { border-color: var(--accent); background: linear-gradient(180deg, #2a2419, #17171c); }
.jt-today .jt-day { color: var(--accent); }
.jt-next { border-style: dashed; justify-content: center; align-items: center;
  color: var(--muted); font-size: .7rem; text-align: center; background: none; }

/* M3: practice-video upload on the check-in form */
.jt-upload { display: block; border: 1px dashed #2a2a31; border-radius: 10px;
  padding: 10px 12px; font-size: .8rem; color: var(--muted); cursor: pointer; }
.jt-upload:hover { border-color: var(--accent); color: var(--text); }
.jt-upload-bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px;
  background: #101014; overflow: hidden; }
.jt-upload-bar i { display: block; height: 100%; width: 0; background: var(--accent);
  transition: width .2s ease; }

/* M6: monthly status card (Card B) */
.chal-month-card { margin-top: 16px; }
.chal-status { margin: 10px 0 4px; display: grid; gap: 8px; }
.chal-status div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; }
.chal-status dt { color: var(--muted); font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 700; }
.chal-status dd { margin: 0; font-size: .9rem; }


/* M8: review workspace */
.review-page { max-width: 760px; }
.review-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }


/* M11: journey gaps + welcome-back */
.jt-gap { border-style: dashed; justify-content: center; align-items: center;
  text-align: center; background: none; color: var(--muted); font-size: .68rem;
  font-style: italic; }
.chal-welcome-back { border-color: var(--accent); }


/* Journey page: proper home-timeline scale (Niall: "not a mini thing") */
.journey-page-full { max-width: none; }
.journey-page-full .jt-form { max-width: 720px; }
.journey-page-full .jt-strip { gap: 10px; padding: 12px 2px 18px; }
.journey-page-full .jt-card { height: min(48vh, 420px); flex-basis: auto;
  aspect-ratio: 9 / 16; border-radius: 8px; padding: 14px;
  transition: transform .12s ease; }
.journey-page-full .jt-card:hover { transform: scale(1.02); }
.journey-page-full .jt-day { font-size: 1.05rem; color: var(--accent);
  letter-spacing: .1em; }
.journey-page-full .jt-text { font-size: .95rem; -webkit-line-clamp: 8; }
.journey-page-full .jt-clip { font-size: .95rem; font-weight: 700; }

/* In-page clip player */
.clip-overlay[hidden] { display: none !important; }
.clip-overlay { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(8,8,10,.8); backdrop-filter: blur(4px); }
.clip-box { position: relative; max-width: min(480px, 92vw); width: 100%; }
.clip-box video { width: 100%; max-height: 82vh; border-radius: 12px;
  background: #000; display: block; }
#clip-close { position: absolute; top: -14px; right: -14px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #101014; font-weight: 800; }

/* M13: the journey dashboard (direction C x A) */
.journey-dash .dash-hero { text-align: center; max-width: 560px; margin: 0 auto 8px; }
.journey-dash .dash-hero h1 { margin: 4px 0 14px; }
.dash-compose textarea { text-align: center; }
.dash-status { margin: 10px 0 4px; font-size: .85rem; }
.dash-status a { color: inherit; text-decoration: none; }
.dash-status a:hover { color: var(--accent); }
.dash-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 18px; }
.dash-w { background: #17171c; border: 1px solid #2a2a31; border-radius: 12px;
  padding: 13px 15px; min-width: 0; }
.dash-w p { margin: 8px 0 0; font-size: .88rem; }


/* M12: badge system (Direction A) */
.badge-shelf { margin: 4px 0 10px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: inherit; }
.badge-pill { display: inline-block; border: 1px solid #2a2a31; border-radius: 999px;
  padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.badge-pill.badge-gold { border-color: var(--accent); color: var(--accent);
  background: rgba(255,179,71,.08); }
.badge-glyphs { font-size: .82em; letter-spacing: .06em; cursor: default; }


/* Member UX quick wins: bell, settings */
.member-top { justify-content: space-between; }
.top-bell { position: relative; font-size: 1.1rem; text-decoration: none; }
.bell-cnt { position: absolute; top: -6px; right: -10px; background: var(--accent);
  color: #101014; font-size: .62rem; font-weight: 800; border-radius: 999px;
  padding: 1px 5px; }
.set-label { display: block; font-size: .8rem; color: var(--muted); }
.set-label input { display: block; width: 100%; max-width: 420px; margin-top: 4px;
  background: #101014; border: 1px solid #2a2a31; border-radius: 10px;
  color: var(--text); padding: 9px 12px; font: inherit; }
.set-check { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.set-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-ok { color: #4caf7d; font-weight: 700; }
img.rail-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ============================================================
   THE VENUE (P3 base) — the members-area design language.
   Approved 2026-09-01 from the mockup set. Scoped to .member-shell
   so the public site is untouched. Rules: stage glow · full bleed ·
   9:16 cards · big numbers · amber=band, red=live · floating panels.
   ============================================================ */
.member-shell {
  background:
    radial-gradient(1100px 460px at 62% -160px, rgba(255,179,71,.12), transparent 60%),
    radial-gradient(700px 320px at 6% 112%, rgba(255,179,71,.05), transparent 60%),
    #0b0b0e;
}
.member-rail {
  background: linear-gradient(180deg, rgba(18,18,23,.72), rgba(18,18,23,.25));
  border-right: 1px solid rgba(42,42,49,.7);
  backdrop-filter: blur(6px);
}
.member-main { padding: 14px 2rem 48px; }

/* floating panels — never boxes in a form */
.member-shell .dash-w,
.member-shell .chal-track,
.member-shell .rail-me {
  background: rgba(23,23,28,.82);
  border-color: #26262d;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

/* big numbers: the heartbeat gets display weight */
.journey-dash .dash-hero .sec-eyebrow { color: var(--accent); letter-spacing: .16em; }
.journey-dash .dash-hero h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.02em;
}
.chal-month-card .sec-eyebrow { color: var(--accent); }

/* the full-bleed shelf: cards run to the screen edge and clip off it */
.journey-page-full .jt-strip {
  margin-left: -2rem; margin-right: -2rem;
  padding-left: 2rem; padding-right: 2rem;
  overflow-x: auto;
}
.member-shell .jt-card { box-shadow: 0 12px 30px rgba(0,0,0,.35); }

/* LIVE is the only red in the building */
.livechip { display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, monospace; font-size: .66rem; letter-spacing: .1em;
  color: #ff4d4d; font-weight: 800; }
.livechip::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; }
@media (max-width: 760px) {
  .member-main { padding: 10px 14px 40px; }
  .journey-page-full .jt-strip { margin-left: -14px; margin-right: -14px;
    padding-left: 14px; padding-right: 14px; }
}

/* P3-2: THE STAGE — the Live page's big screen (same page, better seats) */
.live-page { max-width: none; }
.stage-screen { aspect-ratio: 16 / 7; min-height: 240px; border-radius: 18px;
  border: 1px solid #2e2e36; background: linear-gradient(180deg, #0d0d11, #101014);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.stage-screen.stage-on { border-color: rgba(255,77,77,.5);
  background: radial-gradient(600px 240px at 50% 40%, rgba(255,77,77,.14), transparent 70%), #0d0d11;
  box-shadow: 0 24px 70px rgba(255,77,77,.12), 0 24px 60px rgba(0,0,0,.5); }
.stage-title { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 900;
  letter-spacing: -.02em; margin: 8px 0 4px; }
.stage-title.stage-off { color: var(--muted); }
.stage-sub { color: var(--muted); margin: 0; font-size: .92rem; }
.stage-cta { margin-top: 14px; }
.stage-strap { text-align: center; margin: 12px auto 4px; max-width: 52ch; font-size: .86rem; }
.stage-sec { margin: 26px 0 10px; color: var(--accent); }
.stage-cards { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stage-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  color: var(--text); background: rgba(23,23,28,.82); border: 1px solid #26262d;
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .12s ease; }
.stage-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.stage-card-badge { font-family: ui-monospace, monospace; font-size: .62rem;
  letter-spacing: .1em; color: var(--accent); }
.stage-card strong { font-size: .95rem; }
.stage-card .muted { font-size: .78rem; }
.stage-card-foot { font-size: .76rem; color: var(--muted); margin-top: 6px; }
.stage-card-foot.locked-foot { color: var(--accent); }
.stage-card.locked { border-style: dashed; }
.stage-card.done { opacity: .55; box-shadow: none; }
.stage-extra { margin-top: 16px; }

/* P3-3: THE FOYER — the community landing as a room with life in it */
.foyer { max-width: none; }
.foyer-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900;
  letter-spacing: -.02em; margin: 4px 0 18px; }
.foyer-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.foyer-panel { background: rgba(23,23,28,.82); border: 1px solid #26262d;
  border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 34px rgba(0,0,0,.35);
  min-width: 0; }
.foyer-panel.span2 { grid-column: span 2; }
@media (max-width: 760px) { .foyer-panel.span2 { grid-column: span 1; } }
.pulse { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.pulse li { display: grid; grid-template-columns: 22px 1fr; gap: 8px;
  align-items: baseline; font-size: .86rem; }
.pulse time { display: block; font-size: .72rem; }
.pulse-icon { font-size: .95rem; }
.foyer-more { margin: 12px 0 0; font-size: .8rem; }
.foyer-faces { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.face { width: 34px; height: 34px; border-radius: 50%; background: #2a2a31;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem;
  color: var(--text); text-decoration: none; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face:hover { box-shadow: 0 0 0 2px var(--accent); }
.foyer-boards { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.board { display: inline-flex; gap: 7px; align-items: baseline; font-size: .8rem;
  border: 1px solid #26262d; border-radius: 999px; padding: 5px 12px;
  color: var(--text); text-decoration: none; }
.board em { font-style: normal; color: var(--muted); font-size: .72rem; }
.board:hover { border-color: var(--accent); }
.board.locked { color: var(--muted); border-style: dashed; }
.foyer-live { margin: 10px 0 0; font-size: .88rem; }

/* P3-4: the forum, two-pane — boards left, life right */
.forum-two { max-width: none; }
.forum-panes { display: grid; grid-template-columns: 240px 1fr; gap: 18px; }
@media (max-width: 760px) { .forum-panes { grid-template-columns: 1fr; } }
.forum-boards { display: flex; flex-direction: column; gap: 4px; }
.fb { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text);
  border: 1px solid transparent; }
.fb:hover { background: rgba(23,23,28,.7); border-color: #26262d; }
.fb-name { font-size: .88rem; font-weight: 700; }
.fb-count { font-size: .72rem; color: var(--muted); align-self: center; }
.fb-desc { grid-column: 1 / -1; font-size: .72rem; color: var(--muted); }
.fb.locked { border-style: dashed; border-color: #26262d; color: var(--muted); }
.fb.locked .fb-desc a { color: var(--accent); }
.forum-latest { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ft { display: block; text-decoration: none; color: var(--text);
  background: rgba(23,23,28,.82); border: 1px solid #26262d; border-radius: 14px;
  padding: 13px 16px; box-shadow: 0 14px 34px rgba(0,0,0,.3);
  transition: transform .12s ease, border-color .12s ease; }
.ft:hover { transform: translateY(-2px); border-color: var(--accent); }
.ft-head { display: block; font-size: .95rem; }
.ft-meta { display: block; font-size: .76rem; margin-top: 4px; }

/* P3-5: the bell dropdown + the profile identity card */
.bell-wrap { position: relative; }
button.top-bell { background: none; border: 0; cursor: pointer; color: inherit;
  font-size: 1.1rem; padding: 4px; }
.bell-drop { position: absolute; top: 34px; right: 0; z-index: 40; width: min(330px, 86vw);
  background: rgba(23,23,28,.97); border: 1px solid #26262d; border-radius: 14px;
  padding: 13px 15px; box-shadow: 0 24px 60px rgba(0,0,0,.6); text-align: left; }
.bell-drop[hidden] { display: none !important; }
.bell-row { display: block; text-decoration: none; color: var(--text); font-size: .82rem;
  padding: 7px 0; border-bottom: 1px solid rgba(38,38,45,.6); }
.bell-row:last-of-type { border-bottom: 0; }
.bell-row.unread { color: var(--text); }
.bell-row.unread span::before { content: "● "; color: var(--accent); font-size: .7em; }
.bell-row time { display: block; font-size: .7rem; }
.bell-empty { font-size: .8rem; margin: 8px 0; }
.bell-all { display: inline-block; margin-top: 8px; font-size: .78rem; color: var(--accent); }

.profile-venue { max-width: none; }
.pv-id { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.pv-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--accent), 0 14px 34px rgba(0,0,0,.45); }
.pv-initial { background: #2a2a31; display: grid; place-items: center;
  font-size: 2rem; font-weight: 900; }
.pv-who h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900;
  letter-spacing: -.02em; }
.pv-meta { margin: 2px 0 8px; font-size: .82rem; }
.pv-who .badge-shelf { justify-content: flex-start; }
.pv-actions { margin-top: 10px; }
.pv-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pv-panel { background: rgba(23,23,28,.82); border: 1px solid #26262d; border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 14px 34px rgba(0,0,0,.35); min-width: 0; }
.pv-panel.span2 { grid-column: span 2; }
@media (max-width: 760px) { .pv-panel.span2 { grid-column: span 1; } }
.pv-stats { margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
.pv-stats b { color: var(--text); }
.pv-tier { margin: 8px 0 0; font-size: .95rem; font-weight: 700; }
.pv-focus { margin: 6px 0 0; font-size: .82rem; }

/* P3-6: the welcome wizard — the venue's front door */
.welcome { max-width: 560px; margin: 0 auto; text-align: center; padding-top: 18px; }
.wz-steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; }
.wz-steps i { width: 44px; height: 4px; border-radius: 99px; background: #26262d; }
.wz-steps i.on { background: var(--accent); }
.wz-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 900;
  letter-spacing: -.02em; margin: 6px 0 8px; }
.wz-sub { margin: 0 auto 20px; max-width: 46ch; font-size: .9rem; }
.wz-form { display: grid; gap: 12px; text-align: left; }
.wz-form textarea { background: #101014; border: 1px solid #2a2a31; border-radius: 12px;
  color: var(--text); padding: 12px 14px; font: inherit; }
.wz-choices { display: grid; gap: 8px; }
.wz-choice { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  background: rgba(23,23,28,.82); border: 1px solid #26262d; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.wz-choice:hover { border-color: var(--accent); }
.wz-choice input { margin-top: 4px; accent-color: var(--accent); }
.wz-choice b { display: block; font-size: .92rem; }
.wz-choice em { font-style: normal; font-size: .8rem; color: var(--muted); }
.wz-check { margin-top: 2px; font-size: .84rem; }
.wz-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.wz-skip { background: none; border: 1px solid #26262d; cursor: pointer; }

/* Q3: poster frames on journey cards — a photo-led product with photos */
.jt-card[style*="background-image"] { background-size: cover; background-position: center; }
.jt-card[style*="background-image"] .jt-text,
.jt-card[style*="background-image"] .jt-day { text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.jt-card[style*="background-image"]::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,14,.15), rgba(10,10,14,.85));
  border-radius: inherit; }
.jt-card { position: relative; }
.jt-card > * { position: relative; z-index: 1; }

/* Pre-launch strip: a very thin honest note across the very top of
   every page. Toggled off in admin at launch (SiteSettings). */
.prelaunch { background: var(--accent); color: #101014; text-align: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  padding: 3px 12px; line-height: 1.35; }
@media (max-width: 560px) { .prelaunch { font-size: .62rem; padding: 3px 8px; } }

/* Cookie consent (O1): a quiet strip, not a modal that holds the page hostage */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
  max-width: 680px; margin: 0 auto; background: rgba(23,23,28,.97);
  border: 1px solid #2a2a31; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.consent p { margin: 0 0 10px; font-size: .82rem; color: var(--muted); }
.consent-actions { display: flex; gap: 8px; align-items: center; }
.consent-no { cursor: pointer; background: none; border: 1px solid #2a2a31;
  color: var(--muted); border-radius: 999px; padding: 8px 16px; font: inherit;
  font-size: .8rem; }
.consent-no:hover { color: var(--text); }

/* The withdrawal control on /privacy/ (2026-09-03). A segmented pair, not a
   primary/secondary pair: neither option is "the" action — one of them is
   just where you already are, so the current state is filled and the other
   reads as available. */
.consent-control { margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid #2a2a31; }
.consent-control .consent-now { margin: 0 0 10px; font-size: .9rem; color: var(--text); }
.consent-control .consent-now b { color: var(--accent); font-weight: 600; }
.consent-control .consent-note { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }
.consent-opt { cursor: pointer; font: inherit; font-size: .8rem; padding: 8px 16px;
  border-radius: 999px; border: 1px solid #2a2a31; background: none;
  color: var(--muted); }
.consent-opt:hover { color: var(--text); border-color: #3a3a44; }
.consent-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
  color: #101014; font-weight: 600; cursor: default; }


/* --- account menu in the top bar (2026-09-03) ------------------------------
   The bar grew an inline link per capability and started competing with the
   timeline, which is the hero. Everything personal now lives behind the
   avatar. <details>/<summary> so there is no JavaScript and keyboard and
   screen-reader behaviour come for free. */
.usermenu { position: relative; }
.usermenu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  border-radius: 999px; outline-offset: 3px;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:focus-visible { outline: 2px solid var(--accent); }
.nav-avatar-img {
  width: 30px; height: 30px; border-radius: 999px; object-fit: cover;
  display: block; border: 1px solid rgba(255,255,255,.15);
}
.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 210px; padding: 4px 0;
  background: var(--surface); border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.usermenu-who {
  margin: 0; padding: 10px 15px 11px; border-bottom: 1px solid rgba(255,255,255,.10);
  line-height: 1.3;
}
.usermenu-who b { display: block; font-size: .92rem; }
.usermenu-who span { font-size: .76rem; color: var(--muted); }
.usermenu-group { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.usermenu-group:last-child { border-bottom: 0; }
.usermenu-panel a {
  display: block; padding: 7px 15px; font-size: .88rem; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.usermenu-panel a:hover { background: rgba(255,255,255,.06); color: var(--accent); }
@media (max-width: 640px) {
  .usermenu-panel { position: fixed; right: 12px; left: auto; min-width: 190px; }
}
.account-form .account-inline-link {
  display: inline-block; margin-top: .45rem; font-size: .82rem; color: var(--accent);
}
.account-form label { text-transform: none; }


/* --- account deletion (2026-09-03) ----------------------------------------
   The only irreversible action a member can take, so the button is the one
   place on the site that deliberately does not look inviting. Red on the
   border and text rather than a solid fill: it should read as serious, not
   as the obvious next thing to click. */
.btn-danger { cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; background: none;
  border: 1px solid #e0604f; color: #e0604f; }
.btn-danger:hover { background: #e0604f; color: #fff; }
.delete-error { border: 1px solid #e0604f; background: rgba(224,96,79,.08);
  color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: .87rem; }


/* --- a member's public journey page (2026-09-03) --------------------------
   Deliberately plain: the journey strip is the page, and everything above it
   is just enough to know whose it is. */
.mj-head { display: flex; gap: 14px; align-items: center; margin: 0 0 18px; }
.mj-head h1 { margin: 0 0 4px; }
.mj-head p { margin: 0; }
.mj-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.mj-bio { margin: 6px 0 0; font-size: .9rem; }
.mj-note { margin: 16px 0 0; font-size: .85rem; }


/* --- 404 / 403 (2026-09-03) -----------------------------------------------
   The 500 page is standalone and carries its own styles, because it has to
   render on a box where the database and the context processors may be the
   things that failed. These two can use the site's, since reaching them
   means everything else worked. */
.errpage { max-width: 34rem; margin: 8vh auto; text-align: left; }
.err-code { font-family: var(--mono, ui-monospace, monospace); font-size: .8rem;
  letter-spacing: .18em; color: var(--accent); margin: 0 0 10px; }
.errpage h1 { margin: 0 0 12px; letter-spacing: -.02em; }
.err-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }


/* --- profile picture upload (2026-09-04) ----------------------------------
   The current picture sits beside the control, because the useful question
   when changing it is "what have I got now", not "what is the field called". */
.set-avatar { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 12px; }
.set-avatar-now { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  flex: 0 0 72px; background: var(--surface); }
.set-avatar-none { display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; color: var(--muted); }
.set-avatar-fields { flex: 1; min-width: 0; }
.set-avatar-hint { margin: 4px 0 8px; font-size: .78rem; }
.set-avatar input[type=file] { font: inherit; font-size: .82rem; color: var(--muted); }


/* --- the capture dialog (2026-09-04) --------------------------------------
   Same form as the inline band; <dialog> handles Escape, focus and the
   backdrop, so there is nothing here but appearance. */
.capture-dialog { max-width: 460px; width: calc(100% - 2rem); padding: 1.6rem 1.5rem;
  border: 1px solid #2a2a31; border-radius: 16px; background: var(--surface);
  color: var(--text); text-align: center; position: relative; }
.capture-dialog::backdrop { background: rgba(8, 8, 12, .72); }
.capture-dialog h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.capture-dialog .capture-form { display: flex; gap: .5rem; margin-top: .9rem; }
.capture-dialog .capture-form .text-input { flex: 1; margin: 0; }
.capture-dialog-close { position: absolute; top: .5rem; right: .65rem;
  background: none; border: 0; color: var(--muted); font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.capture-dialog-close:hover { color: var(--text); }


/* --- the profile picture cropper (2026-09-04) -----------------------------
   A square stage with a circular hole: what is inside the circle is what
   gets saved, so the preview and the result cannot disagree. */
.cropper { margin: 0 0 14px; max-width: 320px; }
.cropper-stage { position: relative; width: 100%; aspect-ratio: 1;
  overflow: hidden; border-radius: 12px; background: #0c0c10;
  cursor: grab; touch-action: none; }
.cropper-stage:active { cursor: grabbing; }
.cropper-stage img { position: absolute; top: 0; left: 0; transform-origin: 0 0;
  max-width: none; user-select: none; -webkit-user-drag: none; }
/* The mask is drawn OVER the image rather than clipping it, so the parts
   being cropped away stay dimly visible and someone can see what they are
   losing rather than guessing. */
.cropper-mask { position: absolute; inset: 0; pointer-events: none;
  background: rgba(12, 12, 16, .62);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
  mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%); }
.cropper-zoom { display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  font-size: .8rem; color: var(--muted); }
.cropper-zoom input { flex: 1; accent-color: var(--accent); }
.cropper-hint { margin: 4px 0 0; font-size: .76rem; }


/* --- the WTF page (2026-09-04) --------------------------------------------
   Two lines carry the weight: what this is, and how often you have to post.
   The second is the one that decides whether somebody signs up. */
.wtf-lede { font-size: 1.05rem; line-height: 1.55; }
.wtf-answer { font-size: 1.15rem; color: var(--accent); font-weight: 700;
  margin: 0 0 .6rem; }