/* 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 single hero band (2026-09-06) -------------------------------------
   Was two bands: a framing section and a bordered "AND YOU" invitation below
   it. Niall: "its too busy, too much going on". Two boxes each introducing
   the site is the busyness, and merging them is the fix — so the invitation's
   card styling is gone and only its button row survives.

   .hero-offer is the one line that says what you GET, which is the half of
   his complaint the tidying alone would not have fixed. Wider than the
   headline and quieter than it, because it is read second and read fully. */
.hero-one { padding-bottom: 1.6rem; }
.hero-offer {
  max-width: 36rem;
  margin: 0 auto 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}
.hero-offer a { color: var(--accent); }

/* The second offer line is the people and the Challenge — the half of the
   site's purpose no version of this page had ever mentioned. Tighter to the
   first than a paragraph gap, because they are one offer in two breaths. */
.hero-offer-2 { margin-top: -0.5rem; }
.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); }

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

/* view toggle */

/* Below the scrubber since round 1, so it reads as belonging to the
   timeline rather than to the invitation band above it. Padding flipped
   accordingly — the breathing room now goes above, between it and the
   scrubber it acts on. */
.viewbar {
  display: flex;
  justify-content: center;
  padding: 0.9rem 1.5rem 0.5rem;
  flex-wrap: wrap;
}

.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 --- */

/* Date and byline sit on ONE line and share the wrapper's visibility, so
   there is one rule deciding when this band shows rather than two that can
   disagree (Niall, 2026-09-06: "smaller and on one single line"). */
.strip-head {
  display: none;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
}
.mode-strip .strip-head { display: flex; }

.strip-readout {
  margin: 0;
  color: var(--accent);
  font-weight: 800;
  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. And
   smaller again since round 1: it sits beside the byline rather than over
   it, and it was competing with the cards it is only labelling. */
#readout-date { font-size: 1.05rem; letter-spacing: 0.02em; }

.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-head,
.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; }

/* The labels were clipped rather than mispositioned: flex-basis 0 with
   nowrap and overflow:hidden means they cannot fit, so "Month 1" became
   "Mont". They now shrink with the column and drop the word "Month" once
   there is no room for it — a number under a tick is still a month, and a
   truncated word is not (Niall, round 1). */
.scrub-month {
  flex-basis: 0;
  min-width: 0;
  text-align: center;
  font-size: clamp(0.56rem, 1.1vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c9c9d2;
  border-left: 1px solid rgba(154, 154, 163, 0.35);
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 900px) { .scrub-month .m-word { display: none; } }

.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, the date readout belongs to day level and goes — but the
   SCRUBBER stays (Niall, 2026-09-06). Hiding it left the months view with no
   way to move left and right at all, which is the one thing a zoomed-out
   overview is for. JavaScript repoints it at the bands and hides it only when
   there is nothing to scrub through. */
.mode-strip.zoom-month .strip-head,
.mode-strip.zoom-year .strip-head { display: none; }

/* The rail under the bar maps day positions onto months. At month level each
   card IS a month, so it would be a second, disagreeing month axis. */
.mode-strip.zoom-month .scrub-months,
.mode-strip.zoom-year .scrub-months { visibility: hidden; }

.scrubber[hidden] { 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 ------------------------------ */

/* The bar mixes plain text links with a pill and a round avatar, and
   without align-items it defaulted to `stretch`: the text links grew to
   full height and sat at the top while the pill centred its own padding,
   so "Members" read as floating above everything else (Niall, 2026-09-04).
   One shared control height keeps the pill and the avatar the same size
   as each other, so neither can drift again. */
.site-nav { display: flex; align-items: center; gap: 1.1rem;
  --nav-control: 32px; }

.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; }
/* Round 1: four stock validator bullets, in your face, before you have typed
   anything. One line that answers as you type — muted until a rule is met,
   red only after you have left the field having broken one. */
.pw-hint { margin: -0.55rem 0 0.9rem !important; font-size: 0.76rem; color: var(--muted);
  line-height: 1.5; }
.pw-hint [data-rule] { transition: color .15s ease; }
.pw-hint [data-rule].ok { color: var(--accent); }
.pw-hint [data-rule].bad { color: #e0604f; }
.pw-hint.all-ok .pw-sep { color: var(--accent); }

.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;
}
/* Messages render once, in base.html, for every page on the site. They used
   to render nowhere at all — see RuleMessagesAreShown. Centred and bounded
   so a message on a wide page is not a full-width band. */
.flashes { max-width: 44rem; margin: 1rem auto 0; padding: 0 1.25rem;
  display: grid; gap: 0.5rem; }
.flashes:empty { display: none; }
.flash { padding: 0.5rem 0.8rem; border-radius: 8px; background: var(--surface);
  border: 1px solid #26262d; font-size: 0.87rem; margin: 0; }
.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 */
/* Slimmer than it was: 8px/18px and weight 800 made a button that shouted
   over a nav of quiet text links. It is the primary action in the bar, so
   it stays filled — it just stops being the loudest thing on the page. */
.join-pill { background: var(--accent); color: #101014 !important; font-weight: 700;
  border-radius: 999px; display: inline-flex; align-items: center;
  height: var(--nav-control, 32px); padding: 0 14px; font-size: .85rem;
  letter-spacing: .01em; box-shadow: 0 2px 10px rgba(255,179,71,.18); }
.join-pill:hover { background: #ffc266; }
.nav-avatar { width: var(--nav-control, 32px); height: var(--nav-control, 32px);
  border-radius: 50%; display: inline-grid; place-items: center; font-size: .82rem;
  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; }
/* Round 1: record straight from the browser — the page promised it and
   did not do it. Hidden until JS confirms the browser can. */
.jt-record { display: block; width: 100%; margin-top: 8px; padding: 10px 12px;
  border: 1px dashed #2a2a31; border-radius: 10px; background: none; cursor: pointer;
  color: var(--muted); font-size: .8rem; font-family: inherit; }
.jt-record:hover { border-color: var(--accent); color: var(--text); }
.jt-record[hidden], .jt-recorder[hidden] { display: none; }
.jt-recorder { margin-top: 10px; border: 1px solid #26262d; border-radius: 12px;
  padding: 10px; background: rgba(23,23,28,.6); }
.jt-recorder video { display: block; width: 100%; max-height: 300px; border-radius: 8px;
  background: #000; transform: scaleX(-1); }
.jt-rec-bar { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.jt-rec-time { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--accent); }
.jt-rec-time::before { content: "\25CF"; margin-right: 5px;
  animation: recblink 1.1s steps(1, end) infinite; }
@keyframes recblink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .jt-rec-time::before { animation: none; } }
.jt-rec-cancel { margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: .78rem; text-decoration: underline; cursor: pointer; font-family: inherit; }
.jt-rec-note { font-size: .74rem; margin: 8px 0 0; line-height: 1.5; }

/* Round 1: see the clip before you commit to a permanent check-in.
   NOT .jt-preview — that class already belongs to the empty-wall card
   further down this file, and sharing it means the two fight over padding,
   border and max-width on elements neither rule was written for. */
.jt-clip { margin: 10px 0 0; }
.jt-clip[hidden] { display: none; }
.jt-clip video { display: block; width: 100%; max-height: 260px; border-radius: 10px;
  background: #000; }
.jt-clip figcaption { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px; font-size: .76rem; }
.jt-clip figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.jt-preview-drop { flex-shrink: 0; background: none; border: 0; padding: 2px 4px;
  color: var(--muted); font-size: .76rem; text-decoration: underline; cursor: pointer; }
.jt-preview-drop:hover { color: #e0604f; }

/* 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; }
/* Two children only: the icon, and everything else. A bare text node in a
   grid container becomes an anonymous grid item, so any unwrapped text after
   the icon used to land in the 22px column and wrap one word per line. The
   markup keeps it in .pulse-body; min-width:0 stops a long name or title
   from refusing to shrink and pushing the row wider than the panel. */
.pulse li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px;
  align-items: baseline; font-size: .86rem; }
.pulse-body { min-width: 0; overflow-wrap: anywhere; }
.pulse time { display: block; font-size: .72rem; margin-top: 2px; }
.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; }
/* Round 1: the original poster had no way to see somebody had answered.
   Deliberately the accent and not a red dot — being replied to is good news. */
.ft-new { display: inline-block; vertical-align: middle; margin-left: 7px;
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #101014; background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.thread-row .ft-new { margin-left: 6px; }

/* 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); }
/* Round 1: the wizard ended by vanishing. This is the arrival. */
.wz-done .wz-title { margin-bottom: 18px; }
.wz-got { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.wz-got li { position: relative; padding-left: 26px; font-size: .88rem; color: var(--muted);
  line-height: 1.55; }
.wz-got li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700; }
.wz-got b { color: var(--text); }
.wz-doors { display: grid; gap: 10px; margin: 10px 0 24px; }
.wz-door { display: block; text-decoration: none; color: var(--text);
  border: 1px solid #26262d; border-radius: 12px; padding: 12px 14px;
  background: rgba(23,23,28,.6); transition: border-color .12s ease, transform .12s ease; }
.wz-door:hover { border-color: var(--accent); transform: translateY(-1px); }
.wz-door b { display: block; font-size: .9rem; margin-bottom: 3px; }
.wz-door span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.5; }
@media (min-width: 700px) { .wz-doors { grid-template-columns: repeat(3, 1fr); } }
.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: var(--nav-control, 32px); height: var(--nav-control, 32px);
  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; }
/* Not an error — a statement of fact, shown before the form rather than
   after a failed attempt (break-glass near miss, 2026-09-06). */
.delete-blocked { border: 1px solid #ffb347; background: rgba(255,179,71,.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; }


/* Round 1: the Challenge overview reported a state and gave no reason to
   keep going. These two carry the why and the single next thing. */
.chal-why { max-width: 60ch; font-size: .92rem; line-height: 1.6; color: var(--muted);
  margin: 0 0 1rem; }
.chal-why b { color: var(--text); }
.chal-next { margin: 0 0 12px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255, 179, 71, .35); background: rgba(255, 179, 71, .07);
  font-size: .86rem; line-height: 1.55; }

/* --- 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; }


/* --- the welcome wizard's duration question (2026-09-04) ------------------
   Hidden until "I've played before" is chosen, so someone starting today is
   not asked how long they have been doing the thing they have not started. */
.wz-howlong { margin: .75rem 0 0; }
.wz-howlong.js { display: none; }
.wz-howlong.js.on { display: block; }
.wz-duration { display: flex; gap: .75rem; max-width: 22rem; }
.wz-duration .set-label { flex: 1; }


/* --- the empty-wall preview (2026-09-04) ----------------------------------
   Quiet on purpose. It sits under an empty strip, and the point is
   reassurance rather than a second call to action competing with the
   record button. */
.jt-preview { max-width: 34rem; margin: 1rem 0 0; padding: 1rem 1.1rem;
  border: 1px solid var(--surface); background: var(--surface); border-radius: 14px; }
.jt-preview-lede { margin: 0 0 .4rem; font-size: .95rem; }
.jt-preview p { margin: 0 0 .6rem; font-size: .88rem; }
.jt-preview p:last-child { margin: 0; }

.foyer-sessions { margin: 0 0 1rem; }

.wtf-prize, .wtf-purpose { margin: .5rem 0 1rem; padding-left: 1.1em; }
.wtf-prize li, .wtf-purpose li { margin: 0 0 .55rem; }

/* --- Journey vs Challenge, on the WTF page (2026-09-04) -------------------
   A definition list, not a table: two things being told apart, not two
   columns of features being compared. The left rule is what makes the pair
   read as one unit at a glance. */
.wtf-vs { margin: .9rem 0 1rem; padding: 0 0 0 1rem;
  border-left: 2px solid var(--accent); }
.wtf-vs dt { font-weight: 700; color: var(--accent); margin-top: .9rem; }
.wtf-vs dt:first-child { margin-top: 0; }
.wtf-vs dd { margin: .3rem 0 0; line-height: 1.55; }

/* The wizard's units toggle (2026-09-04) — a quiet link, not a control that
   competes with the answer above it. Most people never need it. */
.wz-units { margin: .45rem 0 0; }
.wz-unit-toggle { background: none; border: 0; padding: 0; font: inherit;
  font-size: .78rem; color: var(--muted, #9a9aa4); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.wz-unit-toggle:hover { color: var(--accent); }
.wz-days .set-label { max-width: 10rem; }

/* --- the WTF page as questions you can open (2026-09-04) ------------------
   The page grew to ten sections answering ten different questions, which is
   a wall to anyone who arrived wanting one of them. <details>/<summary> is
   the whole mechanism: native, keyboard-operable, findable by the browser's
   own find-in-page, and it works with the stylesheet missing entirely.

   The one-line answer rides UP into the summary rather than being hidden
   with the detail. Collapsed, the reader still gets "Do I have to pay? —
   No. Not now, not later.", which is the line that does the persuading;
   burying it behind a click to tidy the page would have traded the point
   of the section for the appearance of order. */
.wtf-q { border-top: 1px solid rgba(255, 255, 255, .09); }
.wtf-q:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.wtf-q > summary { cursor: pointer; list-style: none; position: relative;
  padding: .95rem 2.2rem .95rem 0; }
.wtf-q > summary::-webkit-details-marker { display: none; }
.wtf-q > summary h2 { margin: 0; }
.wtf-q > summary .wtf-answer { display: block; margin: .3rem 0 0; }
.wtf-q > summary:hover h2 { color: var(--accent); }
.wtf-q > summary:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 3px; border-radius: 4px; }
.wtf-q > summary::after { content: "\25BE"; position: absolute; right: .3rem;
  top: .95rem; font-size: 1.1rem; line-height: 1.4; opacity: .55;
  transform: rotate(-90deg); transition: transform .15s ease, opacity .15s ease; }
.wtf-q[open] > summary::after { transform: rotate(0); opacity: .9; }
.wtf-q > summary:hover::after { opacity: 1; }
.wtf-q > :not(summary):first-of-type { margin-top: 0; }
.wtf-q > :last-child { margin-bottom: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .wtf-q > summary::after { transition: none; }
}

/* --- the full plan comparison (2026-09-04) --------------------------------
   A table, because it is a table: twenty features against two columns, read
   by someone who has decided to compare properly. The cards stay the pitch;
   this is the reference. Paid column tinted so the eye can hold its place
   across a wide row without a rule under every line. */
.pricing-lede { max-width: 62ch; margin: 0 auto 1.6rem; text-align: center;
  color: var(--muted); line-height: 1.6; }
.pricing-lede b { color: var(--ink, inherit); }
.pricing-compare { text-align: center; margin: 1.4rem 0 0; }
.pf-wrap { overflow-x: auto; margin: 1.5rem 0; }
.pf-table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.pf-table th, .pf-table td { text-align: left; padding: .6rem .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07); font-weight: 400; }
.pf-table thead th { font-weight: 700; vertical-align: bottom;
  border-bottom: 2px solid rgba(255, 255, 255, .16); }
.pf-table thead th span { display: block; font-size: .74rem; font-weight: 400;
  color: var(--muted); letter-spacing: .04em; }
.pf-table td, .pf-table thead th + th { text-align: center; width: 8.5rem; }
.pf-table .pf-paid { background: rgba(255, 179, 71, .06); }
.pf-section th { padding-top: 1.5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  border-bottom: 0; }
.pf-yes { color: var(--good, #4caf7d); font-weight: 700; }
.pf-no { color: var(--dim, #63636f); }
.pf-actions { text-align: center; margin: 2rem 0 0; }
.pf-actions form { display: inline-block; margin: 0 0 .6rem; }
@media (max-width: 560px) {
  .pf-table th, .pf-table td { padding: .5rem .45rem; font-size: .88rem; }
  .pf-table td, .pf-table thead th + th { width: 5.5rem; }
}

/* --- "see the full list" (2026-09-04) -------------------------------------
   Was a plain underlined link between two large cards, which is where links
   go to die. The cards carry six lines each on purpose; anyone still weighing
   it up wants the whole table, so the route there is an invitation with a
   reason attached rather than a footnote. Deliberately NOT a filled button:
   the filled one on this page is "Join the Band", and two primaries means
   neither is. */
.compare-cta { display: block; max-width: 30rem; margin: 1.6rem auto 0;
  padding: 1rem 1.4rem; text-align: center; text-decoration: none;
  color: inherit; border: 1px solid var(--line, #2a2a31); border-radius: 14px;
  background: rgba(255, 255, 255, .02); transition: border-color .15s ease,
  background .15s ease, transform .15s ease; }
.compare-cta:hover { border-color: var(--accent); background: rgba(255, 179, 71, .06);
  transform: translateY(-1px); }
.compare-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.compare-cta-lead { display: block; font-size: .8rem; color: var(--muted);
  letter-spacing: .02em; }
.compare-cta-main { display: block; margin: .25rem 0 .2rem; font-weight: 700;
  font-size: 1.02rem; color: var(--accent); }
.compare-cta-sub { display: block; font-size: .78rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .compare-cta { transition: none; }
  .compare-cta:hover { transform: none; } }

/* --- the figurehead's wall switch (2026-09-05) ----------------------------
   Two links, not a control with state, because it IS two views of the same
   page rather than a setting that persists. Only one member ever sees it. */
.wall-switch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .75rem; }
.wall-switch .pill.on { background: var(--accent); color: #101014;
  border-color: var(--accent); font-weight: 700; }
.wall-switch-note { font-size: .78rem; }

/* --- the timeline byline (2026-09-05) -------------------------------------
   The strip is one person's journey and the homepage never said whose, so a
   visitor could scrub 168 days without meeting the member behind them. Sits
   with the date readout and follows it in and out of strip mode, but is a
   SEPARATE element: the readout is aria-hidden, and a focusable link inside
   an aria-hidden element is reachable by keyboard and invisible to a screen
   reader — worse than not having it at all. */
.strip-by { margin: 0; font-size: .78rem; color: var(--muted); }
.strip-by a { color: inherit; text-underline-offset: 3px; }
.strip-by a:hover { color: var(--accent); }

/* --- the signup terms tick (2026-09-05) -----------------------------------
   Directly above the button that acts on it. Box first, then the sentence,
   so the thing you click and the thing you are agreeing to read in the order
   you meet them. */
.signup-terms { display: flex; align-items: flex-start; gap: .55rem;
  margin: 0 0 1rem; font-size: .85rem; line-height: 1.45; }
.signup-terms input { margin-top: .2rem; flex-shrink: 0; }
.signup-terms label { margin: 0; font-weight: 400; }

/* --- a day card looks playable (2026-09-05, round 1) ----------------------
   A soft disc with a triangle, sitting over the thumbnail. Deliberately
   restrained: it has to read as "this plays" without competing with the day
   number, which is already the largest thing on every card. Grows slightly
   on hover so the card feels alive rather than decorated. */
.day-card { position: relative; }
.day-play {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(16, 16, 20, .55); border: 1.5px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(2px); pointer-events: none;
  transition: transform .18s ease, background .18s ease;
}
.day-play::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .92);
}
.day-card:hover .day-play, .day-card:focus-visible .day-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(255, 179, 71, .85);
}
.day-card:hover .day-play::after, .day-card:focus-visible .day-play::after {
  border-left-color: #101014;
}
.day-card-placeholder ~ .day-play { display: none; }
@media (prefers-reduced-motion: reduce) {
  .day-play { transition: none; }
  .day-card:hover .day-play { transform: translate(-50%, -50%); }
}

/* Names what is behind the Settings link rather than leaving it to be
   discovered (round 1). */
.profile-settings-note { font-size: .8rem; margin: .55rem 0 0; max-width: 34ch; }


/* --- videos YouTube will not let us embed (2026-09-06) --------------------
   Days 156-160 arrived with embedding switched off — an upload default that
   changed on 1 September — and both the modal and the day page showed
   YouTube's grey "Video unavailable" box. From the outside that is
   indistinguishable from the site being broken, so we draw our own card and
   hand over a real link instead. Only ever seen when PracticeDay.embeddable
   is off; a normal video is untouched. */
.no-embed {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.9rem; text-align: center;
  padding: 2rem 1.5rem; background: #0d0d11; border-radius: 12px;
}
.no-embed-lede { margin: 0; color: var(--muted); font-size: 0.88rem; }
.day-page-out {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.7rem;
  text-decoration: none; text-align: center; padding: 1rem;
  background: rgba(10, 10, 14, .72); border-radius: inherit;
}
.day-page-out span:first-child { color: #f2f2f0; font-size: 0.85rem; }
.day-page-out-btn {
  background: var(--accent); color: #101014; font-weight: 700;
  font-size: 0.82rem; padding: 0.5rem 0.95rem; border-radius: 999px;
}
.day-page-out:hover .day-page-out-btn { filter: brightness(1.08); }


/* The deleted-member badge (2026-09-06). Red, and deliberately not a bin —
   nobody threw this person away, they left. Overrides the gold pill styling
   because a deleted member has no other badge to sit beside. */
.badge-gone { color: #e0604f !important; }
.badge-pill.badge-gone { border-color: rgba(224, 96, 79, .45);
  background: rgba(224, 96, 79, .1); }


/* --- unverified email (round 2, 2026-09-06) -------------------------------
   Niall signed up as niall@proton.me instead of pilotniall@proton.me, waited
   for an email that had gone to an inbox he cannot read, and nothing on the
   site mentioned it. Amber rather than red: nothing is broken and nothing is
   lost — there is just one thing left to do. */
.unverified {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.25rem 0.75rem; padding: 0.55rem 1rem; font-size: 0.82rem;
  background: rgba(255, 179, 71, .1); border-bottom: 1px solid rgba(255, 179, 71, .3);
  color: var(--text); text-align: center;
}
.unverified a { color: var(--accent); }

/* The email page. Was allauth's stock white template — the page that fixes a
   mistyped address, looking broken at the one moment trust mattered. */
.email-row { border: 1px solid #26262d; border-radius: 12px; padding: 0.9rem 1.1rem;
  margin: 0 0 1.25rem; background: rgba(23, 23, 28, .6); }
.email-addr { margin: 0 0 0.6rem; font-size: 0.95rem; }
.email-ok, .email-pending { font-size: 0.68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 0.4rem; }
.email-ok { background: rgba(76, 175, 125, .18); color: #4caf7d; }
.email-pending { background: rgba(255, 179, 71, .18); color: var(--accent); }
.email-fine { font-size: 0.76rem; margin: 0.6rem 0 0; }
.email-h2 { font-size: 1rem; margin: 1.75rem 0 0.4rem; }
.email-remove { margin-top: 1rem; }


/* --- account controls in the member top bar (round 2, 2026-09-06) ---------
   Niall: "we need to move My Profile, Settings, and Log Out... up to where
   the notification bell is". They were at the BOTTOM of the rail, under a
   spacer, which put the three things every member eventually needs furthest
   from the eye on a tall page and off-screen entirely on a short one.

   Icons for the two with obvious ones; Log out stays a word, because an icon
   for leaving is either a door nobody recognises or an arrow that means six
   other things. */
.member-top { gap: 0.35rem; }
.top-acct { display: flex; align-items: center; gap: 0.15rem; }
.top-acct a { display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; border-radius: 8px;
  min-width: 34px; min-height: 34px; padding: 0 0.4rem; }
.top-acct a:hover, .top-acct a:focus-visible { color: var(--text);
  background: rgba(255, 255, 255, .06); }
.top-acct svg { width: 19px; height: 19px; display: block; }
.top-out { font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 460px) { .top-out { font-size: 0.72rem; padding: 0 0.3rem; } }


/* A signed-out visitor gets the same column as a member, minus the rail
   (round 2, 2026-09-06). The public profile page is the first thing a
   stranger sees of a member — straight off the homepage byline — and it was
   the only page on the site running edge to edge, because every rule giving
   these pages margins lived on .member-main inside the shell. */
.member-main-guest { max-width: 62rem; margin: 0 auto; width: 100%; }


/* The wall on a public profile (round 2, 2026-09-06). Niall: "the wall needs
   to be more prominent... more like what's on the homepage of the site, but
   just a sort of scaled-down smaller version."

   It was one panel in a grid of equal-weight boxes, so the only thing anybody
   came to see was the same size as the membership box. Full width, above the
   grid, and cards between the cramped 128px default and the homepage's
   full-height ones. */
.pv-wall-full { margin: 0 0 14px; }
.pv-wall-full .jt-card { flex-basis: 168px; }
@media (min-width: 700px) { .pv-wall-full .jt-card { flex-basis: 190px; } }
.pv-wall-full .jt-strip { padding-bottom: 14px; }
.pv-wall-empty { margin: 6px 0 0; font-size: .86rem; max-width: 52ch; line-height: 1.55; }


/* --- the Challenge explainer (round 2, 2026-09-06) ------------------------
   Niall on my first draft: "That page is really awful. I've never seen
   anything so ugly in all my life." Fair — it was built entirely out of the
   WTF page's components, which is a lede followed by five collapsed grey
   rows. That works for an FAQ, where people arrive with many questions. This
   page gets people with ONE, and answered none of it until they clicked.

   So it opens with the shape of the thing: the year as twelve months, three
   numbers, and the sentence that makes the whole idea make sense. */
.chal-year { display: flex; gap: 6px; margin: 1.5rem 0 0.25rem; max-width: 34rem; }
.chal-year i { flex: 1; height: 34px; border-radius: 7px; font-style: normal;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  color: var(--muted); background: rgba(255, 255, 255, .04);
  border: 1px solid #26262d; }
.chal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 1.5rem 0 0; max-width: 40rem; }
.chal-facts div { border: 1px solid #26262d; border-radius: 12px; padding: 0.9rem 1rem;
  background: rgba(23, 23, 28, .6); }
.chal-facts b { display: block; font-size: 1.7rem; font-weight: 900; color: var(--accent);
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.chal-facts span { display: block; font-size: .78rem; color: var(--muted);
  margin-top: 4px; line-height: 1.4; }
.chal-thesis { max-width: 46rem; margin: 1.75rem 0 0.5rem; font-size: 1.05rem;
  line-height: 1.55; font-weight: 700; }
.chal-thesis span { display: block; font-weight: 400; color: var(--muted);
  font-size: .95rem; margin-top: 0.4rem; }
.chal-explain .wtf-q:first-of-type { margin-top: 1.5rem; }