/* ==========================================================================
   Crowdset · Stage Heat v1
   The design language from the July 2026 direction, as real CSS.
   Two hot inks on a blacked-out room. Screen-printed gig poster, not SaaS.
   ========================================================================== */

:root{
  /* inks */
  --blackout:#0F0C0E;      /* the room with the house lights down */
  --surface:#181114;
  --raised:#221820;
  --line:rgba(246,238,227,.11);
  --line-soft:rgba(246,238,227,.06);
  /**
   * THE INK RAMP — and every step of it is READABLE.
   *
   * `--ink-faint` used to be .34, which measures 2.8:1 against these grounds.
   * The floor for body text is 4.5:1, so it wasn't merely dim — it was below
   * standard, and it carried nearly every instruction, hint and label in the
   * office. "Load your setlist" was crisp white above a paragraph explaining
   * how, in text you had to lean in to read. Sixty of the ninety uses of these
   * two tokens are running prose.
   *
   * The obvious fix — nudge .34 up until it passes — lands at about .49 and
   * collapses the hierarchy, because it's then indistinguishable from
   * `--ink-dim` at .58. So the whole ramp is respaced instead: three steps,
   * evenly spaced in alpha, and all three clear 4.5:1 on blackout, surface and
   * raised alike.
   *
   *   ink       1.00   ~15-17:1   headings, song titles, anything primary
   *   ink-dim   0.75   ~8.9-9.7:1 supporting prose, subtitles
   *   ink-faint 0.52   ~4.9-5.1:1 labels, hints, captions — the floor
   *
   * Small uppercase mono labels sit at 9.5px here, and WCAG's easier 3:1
   * allowance applies only to text 18.66px bold or larger — so the small type
   * needs MORE contrast than the headings, not less. Nothing in this ramp is
   * allowed below 4.5:1 for that reason. Measured, not eyeballed.
   */
  --ink:#F6EEE3;           /* house white — tungsten-warm paper */
  --ink-dim:rgba(246,238,227,.75);
  --ink-faint:rgba(246,238,227,.52);
  /* Decorative only — never text. The old faint value, kept for the one or
     two places where this is a track or a dot rather than something to read. */
  --ink-ghost:rgba(246,238,227,.34);
  --heat:#FF4365;          /* gel magenta — action, urgency, every primary button */
  --gold:#FFB43A;          /* spotlight gold — money and winners, always both */
  --ice:#63D7F2;           /* reserved: only ever means YOU */

  /* type */
  --disp:"Avenir Next Condensed","Arial Narrow","Helvetica Neue",-apple-system,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --r-card:16px;
}

*{box-sizing:border-box;}

/* The hidden attribute has to win over our own display rules — .chips is
   display:flex and .btn small is display:block, and both would otherwise
   override the UA stylesheet's [hidden]{display:none}. */
[hidden]{display:none !important;}

/* ── THE PAGE DOES NOT MOVE SIDEWAYS ──────────────────────────────────────
   Will, Sept 17 2026, after Anthony's first real night: "when people are
   scrolling through the crowdset.live, it moves left and right a little bit...
   it needs to just sit there and stay full screen."

   Nothing anywhere pinned the horizontal axis, so ANY element poking a few
   pixels past the viewport — a long song title, a button that would not shrink
   (there was one: see .sheet .top in fan.html), a shadow — made the whole
   document draggable under a thumb, with an iOS rubber-band bounce on top.
   This is the screen where a stranger is reaching for a button to spend money
   on, so a layout that slides while they reach is the worst place in the
   product for it. It lives in the SHARED stylesheet rather than on one page
   because every surface has the same right to sit still.

   `clip` AND NOT `hidden`, deliberately. `overflow-x:hidden` would make the
   root a scroll container, and `position:sticky` sticks to its nearest
   SCROLLING ancestor — so hidden would silently break the fan page's sticky
   pay bar (.pay), the office's sticky first column and its pick bar. `clip`
   cuts the overflow off WITHOUT creating a scroll container, and all of those
   keep working.

   `contain` and not `none` on the overscroll: it stops an inner scroller from
   chaining into a page-level sideways bounce, while leaving the phone's own
   edge swipe-to-go-back alone. Taking a browser gesture off somebody is not
   ours to do. */
html{
  background:var(--blackout);
  overflow-x:clip;
  overscroll-behavior-x:contain;
}
body{
  margin:0; background:var(--blackout); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
  max-width:100%;
}

/* film grain — the poster texture, on every surface */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.disp{font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:.005em; line-height:.92;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim);
}
.eyebrow b{color:var(--gold); font-weight:600;}

/* P·4 — money is celebration. Dollars are gold, everywhere, always. */
.money{color:var(--gold); font-family:var(--mono); font-variant-numeric:tabular-nums;}
/* Ice means you. Never used for anything else. */
.you{color:var(--ice);}

/* live dot */
.livechip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--heat);
}
.livechip i{width:6px; height:6px; border-radius:50%; background:var(--heat); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* the one primary button shape in the system */
.btn{
  appearance:none; border:0; width:100%; cursor:pointer;
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:19px; padding:15px 18px;
  border-radius:12px; background:var(--heat); color:#160409;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active{transform:scale(.985);}
/**
 * A DISABLED BUTTON STILL HAS TO BE READABLE.
 *
 * This was `filter:grayscale(1) brightness(.6)`, which turned the single
 * biggest element on the fan's screen into a grey slab reading as broken
 * rather than as waiting. Mute it, but keep the label legible — a person has
 * to be able to tell what the button WOULD do.
 *
 * Better still is not disabling it: see the pay dock, where "nothing picked
 * yet" is now a working button that goes and finds you something to pick.
 */
.btn[disabled]{background:var(--raised); color:var(--ink-dim); cursor:default;}
.btn[disabled] small{color:var(--ink-faint);}
/**
 * The fee line was 9.5px, which made the one piece of text on the page a
 * regulator would care about the least legible thing on it. It is a price
 * disclosure. It gets a readable size and real contrast.
 */
.btn small{
  display:block; font-family:var(--mono); font-weight:600; font-size:11px;
  letter-spacing:.06em; margin-top:4px; color:rgba(22,4,9,.85); text-transform:none;
}
/* gold button = the trust moment. Payout only. Exactly one per system. */
.btn.gold{background:var(--gold); color:#1B1206;}
.btn.gold small{color:rgba(27,18,6,.75);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
/**
 * A GHOST BUTTON'S SUB-LINE WAS ALMOST INVISIBLE. `.btn small` is near-black,
 * which is right on a pink or gold button and unreadable on a transparent one
 * — so "Say your songs", "I have a file" and "Pick from our list" all carried
 * an explanation nobody could read. Found Sept 23 2026 while screenshotting
 * the loader for the bands who have not loaded songs: the picture showed it
 * plainly in a way the screen never did.
 */
.btn.ghost small{color:rgba(246,238,227,.72);}
/* An outlined-in-heat button: present, but not the thing you came here to do.
   The shout-out overlay's "Done — read it" uses it.

   The pocket's "Played it" used to as well, on the reasoning that confirming
   is quieter than choosing. It isn't, on a stage: faded read as broken, and
   the band told us so. That button is full fill in both states now. */
.btn.done{background:transparent; color:var(--ink); border:1px solid var(--heat);}

/* chunky choice chips — P·2, one thumb, three beers */
.chip{
  appearance:none; cursor:pointer; flex:1;
  background:var(--raised); color:var(--ink); border:1px solid var(--line);
  border-radius:11px; padding:12px 0;
  font-family:var(--mono); font-size:15px; font-weight:600;
}
.chip[aria-pressed="true"]{border-color:var(--gold); color:var(--gold); background:rgba(255,180,58,.08);}
.chips{display:flex; gap:8px;}
.chips[hidden]{display:none;}

/* board rows, shared by phone and TV */
.row-title{font-family:var(--disp); font-weight:800; text-transform:uppercase;}
.vu{height:3px; border-radius:2px; background:linear-gradient(90deg,var(--heat),var(--gold)); transition:width .5s cubic-bezier(.2,.7,.2,1);}

@keyframes flash{0%{background:rgba(255,180,58,.22)}100%{background:transparent}}
.flash{animation:flash .7s ease-out;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------------------------------------------------------------------------
   The iOS zoom trap. Safari zooms the whole page in when you focus a form
   field whose text is under 16px, and it does NOT zoom back out afterwards.
   The page is then stuck wider than the screen, panned somewhere, with the
   left edge cut off — which is exactly what "the C in CROWDSET is missing"
   looks like. It is not a layout bug: the layout is fine, the zoom is not.

   Each page had its own `input, select, textarea{font-size:16px}` guard, but
   at specificity 0,0,1 it lost to every `.row input`, `#defaultprice` and
   `.tok` in the sheet below it, so almost nothing in the office was actually
   protected. This is the one place !important earns its keep: no field
   anywhere is allowed to be small enough to spring the trap.
   -------------------------------------------------------------------------- */
@media (pointer: coarse){
  input, select, textarea{font-size:16px !important;}
}

/* --------------------------------------------------------------------------
   NO BAND AT THIS ADDRESS.

   A mistyped slug became reachable the day a band stopped being created by
   the act of looking at it. One sentence, and a door for the musician who
   guessed a URL hoping it was free.
   -------------------------------------------------------------------------- */
.gone{
  max-width:32rem; margin:0 auto; padding:18vh 24px 24px;
  text-align:center;
}
.gone h1{ margin:0 0 12px; font-size:clamp(28px,7vw,40px); line-height:1.05; }
.gone p{ margin:0 0 10px; opacity:.78; line-height:1.55; }
.gone .gone-cta{ margin-top:22px; opacity:1; }
.gone a{ color:inherit; text-underline-offset:3px; }

/* ----------------------------------------------------------------------------
   THE TRADEMARK SYMBOL.

   ™ is the unregistered mark — free, needs no filing, and simply asserts that
   Crowdset is claimed as a brand. It goes on the WORDMARK, where the name is
   presented as a name, and nowhere else: peppering it through body copy every
   time the word appears reads as insecurity, not ownership.

   ® is a different symbol with a different meaning and using it before
   registration actually issues is unlawful. It does not go on this site until
   the certificate does.

   Sized and raised by hand rather than left to <sup>, which in a condensed
   display face lands too large and drags the line-height of the wordmark
   around it.
   -------------------------------------------------------------------------- */
.tm{
  font-size:.42em;
  vertical-align:.85em;
  margin-left:.06em;
  letter-spacing:0;
  font-weight:600;
  opacity:.62;
}
/* Never the accent colour — the symbol is a legal notice, not part of the
   logo's artwork, and tinting it makes it read as a third word in the name.
   Every page styles its wordmark with `.logo span { color: accent }`, which
   is MORE specific than a bare `.tm` and was quietly painting the symbol
   pink. Two-class selectors take it back. */
.logo .tm, .word .tm, .wordmark .tm{ color:inherit; }

/**
 * FREE TONIGHT.
 *
 * Shown when the band has not connected payouts, which Crowdset allows on
 * purpose — a free night is the on-ramp. What it is NOT allowed to do is let
 * the fan believe they are paying, which is what cost Anne Cline a full night
 * at The Liq on Oct 1 2026. Gold rather than red: nothing has gone wrong,
 * there is simply nothing to pay.
 */
.freenight{
  margin:0 0 12px; padding:11px 14px;
  background:rgba(255,180,58,.10);
  border:1px solid rgba(255,180,58,.34);
  border-radius:var(--r-card);
  color:var(--ink-dim); font-size:14px; line-height:1.45;
}