/*
 * The TapDeck member site (Phase 14D).
 *
 * Implements `docs/TapDeck Branding - Style Guide (Midnight Heat).md` — the
 * project's style guide since August 2026 — on a NEW surface, so it follows it
 * from the first line rather than being migrated onto it later.
 *
 * `portal.css` implements the SAME guide (Phase 13 moved the four portals onto
 * it; the guide's §11 amendment block records the four rulings that took).
 * Nothing here is shared with it and a page loads one or the other, never both,
 * but they are siblings rather than a system and a legacy — **a change to a
 * shared component means editing both files.**
 *
 * Three things in this file are load-bearing rather than cosmetic:
 *
 *   1. **The accents mean one thing each** (§2). Crimson is now-and-the-one-
 *      action, gold is a result, blush is people you liked, success-green is
 *      only ever the 8px presence dot. Using one decoratively is the guide's
 *      most-broken rule, so each is declared beside what it means.
 *   2. **Radii step outward** (§5): a 12px row inside a 16px card inside a 24px
 *      frame. Sibling cards at 12px and 16px read as a mistake.
 *   3. **No shadows, no icons, no emoji, nothing below 11px, no touch target
 *      under 44px** (§14). Elevation is surface value plus a 1px border.
 *
 * Token names are the guide's values under BARE names, not its `--td-` prefix.
 * §12 records that deviation deliberately: renaming every rule here, in
 * portal.css and in seven pages' inline styles buys no visual change.
 *
 * The public event and venue pages (`/e/:id`, `/v/:slug`) load this too — the
 * guide is explicit that the acquisition front door "must look like the site it
 * leads to". A public page in a different visual system reads as a phishing
 * page for the product it is advertising.
 */

:root {
  /* Surfaces — three levels, maximum. midnight -> obsidian -> charcoal. */
  --midnight: #0D0D0D;
  --obsidian: #1A1A2E;
  --charcoal: #2C2C3A;

  /* Ink. Warm off-white, never #FFFFFF. */
  --snow: #F5F0EB;
  --snow-75: rgba(245, 240, 235, 0.75);
  --snow-70: rgba(245, 240, 235, 0.7);
  --snow-30: rgba(245, 240, 235, 0.3);
  --slate: #6B6B80;

  /* Lines are charcoal at partial alpha. Never solid, never lighter than snow. */
  --line: rgba(44, 44, 58, 0.4);
  --line-card: rgba(44, 44, 58, 0.5);
  --line-frame: rgba(44, 44, 58, 0.6);
  --line-live: rgba(230, 57, 70, 0.4);

  /* Accents. Each means one thing. See the file header. */
  --crimson: #E63946;   /* now, and the one action */
  --ember: #FF6B35;     /* new, or worth noticing */
  --gold: #FFB830;      /* a result */
  --blush: #FF8FA3;     /* people you liked */
  --success: #4ADE80;   /* live presence — the 8px dot only */
  --danger: #F87171;    /* irreversible — delete account only */

  /* The one tint: a state you are IN, never a fill wider than a pill (§2). */
  --crimson-15: rgba(230, 57, 70, 0.15);

  /* The brand's exclamation mark, and the landing band. Both §2. */
  --heat: linear-gradient(135deg, #E63946, #FF6B35);
  --dusk: linear-gradient(180deg, #1A1A2E, #0D0D0D);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;

  /*
   * Motion (§9). Opacity and position only — no scale, no bounce, no spring.
   * `micro` is hover and selection; `standard` is a reveal or a route change.
   * The expressive tier has no use on this surface yet, so it is not declared.
   */
  --duration-micro: 150ms;
  --duration-standard: 250ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--snow);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 { font-weight: 700; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0; }

/* Uppercase only for overlines and buttons — never a heading, never body. */
.overline {
  font: 600 11px/1.4 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.meta { font: 400 14px/1.5 var(--text); letter-spacing: 0.005em; color: var(--slate); }
.lede { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.3; }
.prose { color: var(--snow-75); max-width: 640px; }

.wordmark {
  font: 700 22px/1 var(--display);
  letter-spacing: -0.01em;
  color: var(--snow);
  text-decoration: none;
}
.wordmark span { color: var(--crimson); }

/* --- structure ------------------------------------------------------------ */

.card {
  background: var(--obsidian);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cards do not nest. A darker inset panel is the pattern instead. */
.inset {
  background: var(--midnight);
  border-radius: var(--radius-md);
  padding: 16px;
}

/*
 * The live card: exactly one per screen, or none.
 * Its crimson border is the only crimson edge anywhere.
 */
.card.live {
  border-radius: var(--radius-xl);
  border-color: var(--line-live);
}

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row:first-child { padding-top: 0; }
.row-title { font: 500 16px/1.5 var(--text); color: var(--snow); text-decoration: none; }
a.row-title:hover { color: var(--crimson); }

/*
 * The date-block row (§7): a fixed column carrying the day and the numeral,
 * then the title and its metadata. The workhorse of every list.
 */
.datecol {
  flex: 0 0 48px;
  text-align: center;
}
.datecol .num {
  font: 700 20px/1.2 var(--display);
  color: var(--snow);
  display: block;
}

/*
 * The day heading: a title, a rule filling the remaining width, and a count.
 * Nothing else in the product uses a rule-through, which is what makes this
 * read as "a group of nights" rather than as decoration.
 */
.dayhead { display: flex; align-items: center; gap: 16px; margin: 24px 0 12px; }
.dayhead .rule { flex: 1; height: 1px; background: var(--line); }

/* --- pills ---------------------------------------------------------------- */
/*
 * The outline/fill pair is load-bearing: outline ASKS, fill CONFIRMS. A pill
 * whose state contradicts what the player actually did is an anti-pattern (§14).
 */
.pill {
  font: 600 11px/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.pill.ask {                       /* "INTERESTED?" — the action to enter a state */
  background: transparent;
  border: 1.5px solid var(--snow-30);
  color: var(--snow);
}
.pill.on {                        /* "INTERESTED" — the state you are in */
  background: var(--crimson-15);
  border: 1px solid var(--crimson);
  color: var(--crimson);
}
.pill.heat {                      /* time-critical: "TONIGHT", "STARTS IN 42 MIN" */
  background: var(--heat);
  color: var(--snow);
}
.pill.new { background: var(--ember); color: var(--midnight); }
.pill.count {
  background: var(--charcoal);
  color: var(--snow);
  border-radius: var(--radius-full);
}

/*
 * A neutral list marker.
 *
 * NOT an accent. A benefit list needs a bullet, not a status, and four bullets
 * in four accents is §14's "accent used decoratively" four times over — it also
 * spends gold outside a result and green outside presence, which are the two
 * the guide names by hand. Slate is the metadata colour and says "marker".
 */
.dot.mark { background: var(--slate); }

/* Live presence. The 8px dot and nothing else is allowed to be this green. */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
  margin-right: 8px;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;               /* 44px is the floor; this clears it */
  padding: 0 20px;
  border-radius: var(--radius-md);
  font: 600 15px/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  /* Uppercase Grotesk wrapping mid-label reads as a broken button rather than
     as a long one. Let the row wrap instead; `.cta-row` already does. */
  white-space: nowrap;
  transition: filter var(--duration-micro) ease-out;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { filter: brightness(0.9); }   /* no scale — the guide is explicit */
.btn:disabled { opacity: 0.4; cursor: default; }

/* One filled crimson button per screen. A second primary becomes .secondary. */
.btn.primary { background: var(--crimson); color: var(--snow); }
.btn.secondary { background: transparent; border: 1.5px solid var(--snow-30); color: var(--snow); }
.btn.ghost { background: transparent; color: var(--slate); }
.btn.danger { background: var(--danger); color: var(--midnight); }   /* midnight: the fill is too light for snow */

.link { color: var(--crimson); text-decoration: none; }
.link:hover { text-decoration: underline; }
.links { display: flex; gap: 8px; flex-wrap: wrap; color: var(--slate); }

input, select {
  min-height: 48px;
  width: 100%;
  background: var(--charcoal);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  color: var(--snow);
  font: 400 16px/1.5 var(--text);
  padding: 0 14px;
}
input::placeholder { color: var(--slate); }
input:focus, select:focus, .btn:focus-visible, .pill:focus-visible {
  outline: 0;
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.35);
}

/* --- toggle --------------------------------------------------------------- */
/*
 * The privacy switch (§7).
 *
 * This is not a pill. A pill's outline/fill pair means "the action to enter a
 * state" versus "the state you are in", which reads as a thing you are about to
 * do; a consent control has to read as a setting that is currently off. The
 * guide gives it its own component for that reason, and every consent switch on
 * this surface is the most sensitive control the product has.
 *
 * 48x28 track, 22px knob, 3px inset. The row clears 44px even though the track
 * does not, so the touch target is the label and the switch together.
 *
 * `.toggle-why` states the CONSEQUENCE, in place. The guide is explicit that a
 * privacy effect explained in a help centre is not explained, so the sentence
 * lives here rather than behind a link.
 */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--snow);
  font: 500 16px/1.5 var(--text);
  text-align: left;
  cursor: pointer;
}
.toggle {
  flex: 0 0 48px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--charcoal);
  padding: 3px;
  display: flex;
  justify-content: flex-start;
  transition: background-color var(--duration-micro) ease-out;
}
.toggle::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--slate);
  /* Position only, per §9 — the knob slides, it does not grow. */
  transition: transform var(--duration-micro) ease-out, background-color var(--duration-micro) ease-out;
}
.toggle-row[aria-checked='true'] .toggle { background: var(--crimson); }
.toggle-row[aria-checked='true'] .toggle::before {
  background: var(--snow);
  transform: translateX(20px);
}
.toggle-row:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.toggle-why { font: 400 14px/1.5 var(--text); color: var(--slate); margin-top: 8px; max-width: 640px; }

/* --- the member app ------------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

.nav {
  flex: 0 0 240px;
  background: var(--obsidian);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav .wordmark { font-size: 20px; padding: 0 12px 20px; }
.nav a {
  display: block;
  padding: 12px;
  border-radius: var(--radius-md);
  color: var(--snow-70);
  text-decoration: none;
  font: 500 15px/1 var(--text);
  min-height: 44px;
  line-height: 20px;
}
.nav a:hover { color: var(--snow); }
/*
 * The active row (§7). The 3px crimson left border is the part that carries
 * the state at a glance; a transparent border of the same width sits on every
 * other row so selecting one never shifts the label by three pixels.
 */
.nav a { border-left: 3px solid transparent; }
.nav a.on {
  background: var(--charcoal);
  border-left-color: var(--crimson);
  color: var(--crimson);
  font-family: var(--display);
  font-weight: 600;
}

.main { flex: 1; padding: 32px; display: flex; flex-direction: column; gap: 24px; max-width: 1200px; }
.pagehead { display: flex; flex-direction: column; gap: 6px; }

.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: 1.35fr 1fr; }   /* the recurring split (§6) */

/*
 * Empty, error and loading states.
 *
 * The guide's §15.4 lists these as unresolved and the PRD (US-003) asks this
 * surface to settle them, so: an empty state states the fact and offers the
 * action that still works; an error says what failed and how to retry; loading
 * is TEXT, because a skeleton shimmer and a spinner are both anti-patterns
 * (§14) and a line that says what is happening is honest at any duration.
 */
.state {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  text-align: center;
  color: var(--slate);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.state h3 { color: var(--snow); }

/* --- the public pages ----------------------------------------------------- */

.pub-bar {
  height: 72px;                    /* marketing height, not the 56px app bar */
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.pub-main {
  max-width: 640px;                /* prose constrained per §3 */
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pub-foot { padding: 24px 16px 48px; text-align: center; }
.event-hero { border-radius: var(--radius-xl); padding: 32px; }
.event-hero h1 { margin-bottom: 4px; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .nav {
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px;
  }
  .nav .wordmark { padding: 8px 12px; }
  .main { padding: 16px; gap: 12px; }
  .grid.two { grid-template-columns: 1fr; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}

/* ===========================================================================
 * Marketing surfaces (Phase 14E)
 *
 * The guide's §11: this system "with more air" — a 72px bar, 64px padding, a
 * 48px display size and the `--dusk` band, which appears here and nowhere else.
 * Same tokens, same accent meanings; only the scale changes.
 *
 * These pages carry no photography, because the product has none of its own —
 * the only imagery it will ever have belongs to venues. Where the design calls
 * for a still, this uses a striped panel built from a gradient: no asset to
 * ship, no placeholder that could be mistaken for a real screenshot, and it
 * stays honest at any width.
 * ======================================================================== */

.mk { max-width: 1200px; margin: 0 auto; }

.mk-bar {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
}
.mk-bar nav { display: flex; gap: 24px; margin-left: 24px; }
.mk-bar nav a { color: var(--snow-70); text-decoration: none; font: 500 15px/1 var(--text); }
.mk-bar nav a:hover { color: var(--snow); }
.mk-bar .spacer { flex: 1; }
.mk-bar .actions { display: flex; gap: 12px; }

.band { border-top: 1px solid var(--line); padding: 64px 48px; }
.band:first-of-type { border-top: 0; }
.band.dusk { background: var(--dusk); }
.band.raised { background: var(--obsidian); }

.display { font: 700 48px/1.1 var(--display); letter-spacing: -0.02em; }
.subhead { font: 600 22px/1.3 var(--display); letter-spacing: -0.01em; }

/* The brand's exclamation mark. One per band, never behind body copy. */
.heatline { height: 3px; width: 64px; border-radius: var(--radius-full); background: var(--heat); }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.split.wide { grid-template-columns: 1fr 420px; }
.stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* A numbered step: the numeral is the only crimson on the card. */
.step .num { font: 700 22px/1 var(--display); color: var(--crimson); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile {
  background: var(--obsidian);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-md);
  padding: 16px;
}
.tile .v { font: 700 28px/1.2 var(--display); letter-spacing: -0.01em; }

/*
 * A still we do not have.
 *
 * Stripes rather than a grey box or a stock photo: it reads as "a picture goes
 * here" without pretending to be one, and it costs no asset. `--h` sets the
 * height the design asks for at each site.
 */
.still {
  height: var(--h, 200px);
  /* Fills its column. `.stack` aligns to flex-start so a child with no width
     would collapse to its content, which for an empty panel is nothing. */
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-card);
  background:
    repeating-linear-gradient(135deg, rgba(44,44,58,0.55) 0 12px, rgba(26,26,46,0.9) 12px 24px);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

/*
 * A still with a real photograph behind it.
 *
 * The stripe stays as the LAST background layer rather than being replaced: if
 * the asset 404s, the panel degrades to the placeholder it was, not to an empty
 * box. Same reasoning as the retired token aliases in portal.css — a missing
 * thing should look deliberate.
 *
 * The photograph is passed in as `--photo` at the call site, because these are
 * six one-off assets and six near-identical CSS rules would be worse than one
 * rule and six inline values.
 *
 * Guide §8: a caption over a photograph is all-snow, and it needs a scrim to
 * survive a bright frame — the gradient is bottom-weighted because `.still`
 * aligns its caption to flex-end.
 */
.still.photo {
  background:
    linear-gradient(to top,
      rgba(13, 13, 13, 0.82) 0%,
      rgba(13, 13, 13, 0.35) 45%,
      rgba(13, 13, 13, 0.10) 100%),
    var(--photo) center / cover no-repeat,
    repeating-linear-gradient(135deg, rgba(44,44,58,0.55) 0 12px, rgba(26,26,46,0.9) 12px 24px);
}

.still.photo .overline { color: var(--snow); }

/* --- pricing -------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.plan .price { font: 700 48px/1 var(--display); letter-spacing: -0.02em; }
.plan .price span { font: 400 16px/1 var(--text); color: var(--slate); }
/* The one plan carrying the crimson border is also the one primary button. */
.plan.featured { border-color: var(--crimson); }

.compare { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.compare > div {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font: 400 14px/1.4 var(--text);
}
.compare .hd { font: 600 11px/1.4 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.compare .hd.on { color: var(--crimson); }
/*
 * "Included in this tier" is a fact, not a state. Green is reserved for live
 * presence (§2) and a pricing table has none — an accent here would be
 * decoration, which §14 names outright. Snow, and the empty cell carries the
 * contrast instead.
 */
.compare .yes { color: var(--snow); }
/*
 * "Not in this tier". Slate, not charcoal: charcoal on midnight is about 1.3:1
 * and reads as a rendering fault rather than as an absence. §2 asks for any new
 * pairing to be checked; slate on midnight is 5.7:1.
 */
.compare .no { color: var(--slate); }
.compare > div:nth-last-child(-n+4) { border-bottom: 0; }

/* --- footer --------------------------------------------------------------- */

.mk-foot { border-top: 1px solid var(--line); padding: 48px; display: flex; gap: 64px; flex-wrap: wrap; }
.mk-foot .cols { display: flex; gap: 64px; flex-wrap: wrap; margin-left: auto; }
.mk-foot .col { display: flex; flex-direction: column; gap: 8px; }
.mk-foot a { color: var(--snow-70); text-decoration: none; font: 400 14px/1.5 var(--text); }
.mk-foot a:hover { color: var(--snow); }

/*
 * The one animated thing on the site, and it is opt-out.
 *
 * The guide permits exactly one pulse per screen — the "playing right now" dot.
 * Opacity and shadow only: no scale, no spring, no shimmer (§14).
 */
.dot.pulse { background: var(--crimson); animation: heartbeat-pulse 1.2s ease-in-out infinite; }
@keyframes heartbeat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
  50%      { box-shadow: 0 0 16px 4px rgba(230, 57, 70, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .dot.pulse { animation: none; }
  * { transition: none !important; }
}

@media (max-width: 860px) {
  .band { padding: 32px 16px; }
  .display { font-size: 32px; }
  .split, .split.wide, .three, .four, .plans, .tiles { grid-template-columns: 1fr; }
  .mk-bar { padding: 0 16px; gap: 8px; }
  .mk-bar nav { display: none; }        /* the CTAs survive; the anchors do not fit */
  /* Tighter, and still clear of the 44px touch-target floor. */
  .mk-bar .btn { padding: 0 12px; font-size: 13px; }
  .cta-row .btn { flex: 1; }
  .compare { grid-template-columns: 1.4fr repeat(3, 1fr); font-size: 13px; }
  .mk-foot { padding: 32px 16px; gap: 24px; }
  .mk-foot .cols { margin-left: 0; gap: 32px; }
}