/* Chris Tonite — Art Direction Guide 2026 applied to the request line.
   Palette is exactly the seven guide colors; no pure white anywhere.
   Void Black ground (60-70%), Dawn Blue surfaces, Silver Sentinel text.
   Ember Orange = CTAs only. Sky Blue = arrival moments. Deep Reef = UI accents.
   Wisdom Gold = one special-announcement accent, nothing more. */
:root {
  --void: #000000;
  --dawn: #1a2332;
  --silver: #c0c0c0;
  --sky: #72c5ff;
  --reef: #006b5f;
  --ember: #BF5028;
  --gold: #806921;
  --silver-dim: rgba(192, 192, 192, .68);
  --line: rgba(192, 192, 192, .22);
  --f-display: 'Fjalla One', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-hand: 'Reenie Beanie', 'Bradley Hand', cursive;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; }
body {
  background:
    radial-gradient(130% 46% at 50% 108%, var(--dawn) 0%, rgba(26, 35, 50, 0) 70%),
    var(--void);
  background-attachment: fixed;
  color: var(--silver);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 18px 34px;
}
/* guide p.16: desaturated noise, "Lighten", almost transparent */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .09; mix-blend-mode: lighten;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.hidden, [hidden] { display: none !important; }

/* masthead: eye emblem, wordmark, hairline (cover slide, p.1) */
.mast { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.mast img { display: block; width: 92px; height: auto; margin: 0 auto 10px; }
.mast .word { font: 400 30px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--silver); }
.mast .sub { margin-top: 6px; font: 700 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--silver-dim); }

/* bracketed labels, the deck's own device: [ LIKE THIS ] */
.tag, label { display: block; font: 700 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--silver-dim); }
.tag::before, label::before { content: "[ "; }
.tag::after, label::after { content: " ]"; }
label { margin: 0 0 8px; }
label small { font: inherit; opacity: .8; }

h1 { font: 400 40px/1.02 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 8px; color: var(--silver); text-wrap: balance; }
.sub-copy { margin: 0 0 24px; font-size: 15px; color: var(--silver-dim); }
.center { text-align: center; }

input[type=text] {
  width: 100%; background: var(--dawn); border: 1px solid var(--line); color: var(--silver);
  border-radius: 2px; padding: 16px; font: 400 17px var(--f-body);
}
input[type=text]::placeholder { color: var(--silver-dim); }
input[type=text]:focus { border-color: var(--silver); }
.field { margin-bottom: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* buttons: square-ish, condensed caps. Ember is for CTAs only. */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; text-decoration: none; font: 400 19px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; padding: 17px 16px; border: 1px solid transparent; transition: transform .08s; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .55; }
.btn-primary { background: var(--ember); color: var(--void); }
.btn-tip { background: transparent; border-color: var(--ember); color: var(--ember); }
.btn-ghost { background: var(--dawn); border-color: var(--line); color: var(--silver); }
.btn-special { background: var(--dawn); border-color: var(--gold); color: var(--silver); }
.msg { min-height: 20px; text-align: center; font-size: 14px; margin: 12px 0 0; color: var(--ember); }
.tip { margin-top: 14px; }
.tip small { display: block; text-align: center; color: var(--silver-dim); font-size: 12px; margin-top: 9px; }
.rule { height: 1px; background: var(--line); margin: 24px 0; }
.stack { display: grid; gap: 12px; }

/* confirmation: the arrival moment gets Sky Blue */
.check { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; border: 2px solid var(--sky); display: grid; place-items: center; color: var(--sky); font: 400 30px/1 var(--f-display); }
.scribble { font: 400 30px/1 var(--f-hand); color: var(--sky); text-align: center; margin: -6px 0 22px; transform: rotate(-2deg); }
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.seg a { text-align: center; text-decoration: none; color: var(--silver); background: var(--dawn); border: 1px solid var(--line); border-radius: 2px; padding: 15px 4px; font: 400 15px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.seg a:active { border-color: var(--silver); }
.again { margin-top: 18px; text-align: center; color: var(--silver-dim); font-size: 13px; }
.again button { all: unset; cursor: pointer; color: var(--silver); text-decoration: underline; }

.foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.foot .a { font: 400 20px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.foot .b { margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-dim); }
.foot .c { margin-top: 14px; font: 400 14px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--silver-dim); }

/* tip chooser: one Ember CTA that opens the payment options */
.tipopts { display: grid; gap: 8px; margin-top: 10px; }
.tipopts a, .tipopts .opt { display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer; background: var(--dawn); border: 1px solid var(--line); border-radius: 2px; color: var(--silver); padding: 15px 8px; font: 400 17px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.tipopts a:active, .tipopts .opt:active { border-color: var(--silver); }
.zelle-line { text-align: center; font-size: 14px; color: var(--silver); padding: 10px; border: 1px dashed var(--line); border-radius: 2px; overflow-wrap: anywhere; }

/* ---------- DJ queue ---------- */
.dj-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.dj-head img { width: 54px; height: auto; display: block; }
.dj-head .t { flex: 1; font: 400 26px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.live { display: flex; align-items: center; gap: 7px; font: 700 10px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--silver-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.on { background: var(--reef); box-shadow: 0 0 0 2px rgba(0, 107, 95, .35); }
.bar { display: flex; gap: 8px; margin-bottom: 4px; }
.pill { flex: 1; font: 400 15px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; padding: 15px 8px; border-radius: 2px; border: 1px solid var(--line); background: var(--dawn); color: var(--silver); cursor: pointer; }
.pill.open { border-color: var(--reef); }
.pill.closed { border-color: var(--ember); color: var(--ember); }
.pill.sm { flex: 0 0 auto; color: var(--silver-dim); padding-inline: 16px; }
h2 { font: 400 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; margin: 24px 2px 10px; display: flex; justify-content: space-between; align-items: baseline; color: var(--silver); }
h2 span { font: 700 12px/1 var(--f-body); color: var(--silver-dim); letter-spacing: .08em; }
.list { display: grid; gap: 10px; }
.card { background: var(--dawn); border: 1px solid var(--line); border-radius: 2px; padding: 14px; display: grid; gap: 12px; }
.card.new { animation: flash 1.8s ease-out; }
@keyframes flash { 0% { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(114, 197, 255, .35); } 100% { border-color: var(--line); box-shadow: none; } }
.song { font: 700 19px/1.25 var(--f-body); overflow-wrap: anywhere; color: var(--silver); }
.meta { color: var(--silver-dim); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.votes { border: 1px solid var(--sky); color: var(--sky); border-radius: 2px; padding: 3px 8px; font: 400 14px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acts button { font: 400 18px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; padding: 16px 8px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; }
.acts .played { background: var(--sky); color: var(--void); }
.acts .skip { background: transparent; border-color: var(--line); color: var(--silver); }
.hist { opacity: .8; padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
.hist .t { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.mark { font: 400 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; border: 1px solid var(--line); }
.mark.played { border-color: var(--sky); color: var(--sky); }
.mark.skipped { color: var(--silver-dim); }
.undo { all: unset; cursor: pointer; color: var(--silver); font-size: 12px; text-decoration: underline; padding: 6px; }
.empty { text-align: center; color: var(--silver-dim); padding: 34px 16px; font-size: 14px; border: 1px dashed var(--line); border-radius: 2px; }
details summary { list-style: none; cursor: pointer; } details summary::-webkit-details-marker { display: none; }

/* PIN gate */
#gate { position: fixed; inset: 0; z-index: 20; background: var(--void); display: grid; place-items: center; padding: 24px; }
#gate form { width: 100%; max-width: 320px; text-align: center; }
#gate img { width: 96px; margin: 0 auto 14px; display: block; }
#gate h1 { font-size: 30px; margin: 0 0 20px; }
#gate input { text-align: center; letter-spacing: .24em; font-size: 20px; }
#gate button { margin-top: 12px; }
#gateMsg { color: var(--ember); font-size: 13px; min-height: 18px; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .card.new { animation: none; } .btn { transition: none; } }

/* ---------- VIP requests ---------- */
.hint { margin: 10px 0 0; font-size: 12px; color: var(--silver-dim); }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tier { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 14px 4px; border: 1px solid var(--line); border-radius: 2px; background: var(--dawn); color: var(--silver); font: 400 16px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.tier small { display: block; font: 700 9px/1 var(--f-body); letter-spacing: .14em; color: var(--silver-dim); margin-bottom: 5px; }
.tier.vipt { border-color: var(--gold); }
.tier[aria-checked="true"] { background: var(--silver); color: var(--void); border-color: var(--silver); }
.tier[aria-checked="true"] small { color: var(--void); }
.tier:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.vip-card { border: 1px solid var(--gold); border-radius: 2px; background: var(--dawn); padding: 18px 16px; margin-bottom: 22px; text-align: center; }
.vip-amt { font: 400 54px/1 var(--f-display); letter-spacing: .02em; margin: 8px 0 4px; }
.vip-note { margin: 0 0 16px; font-size: 14px; color: var(--silver-dim); }
.vip-note b { color: var(--silver); letter-spacing: .08em; }
.vip-card .tipopts { margin: 0 0 14px; }
.msg.ok { color: var(--sky); }
.vip { display: inline-block; border: 1px solid var(--gold); color: var(--silver); border-radius: 2px; padding: 3px 8px; font: 400 14px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.vip.ok { border-color: var(--sky); color: var(--sky); }
.vip.dim { border-color: var(--line); color: var(--silver-dim); }
.card.vipc { border-color: var(--gold); }
.card.vipv { border-color: var(--sky); }
.vbtn { font: 400 15px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; padding: 13px 8px; border-radius: 2px; border: 1px solid var(--line); background: transparent; color: var(--silver); cursor: pointer; }
.vbtn.go { border-color: var(--sky); color: var(--sky); }
.tier.long { font-size: 13px; letter-spacing: .02em; }

/* ---------- match christonite.com landing page ---------- */
:root { --aqua: #86e6e4; --f-ui: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
body { background: var(--void) linear-gradient(180deg, var(--aqua) 0, #5fa9a8 130px, #1b3a3a 250px, var(--void) 360px) no-repeat top / 100% 360px; }
/* eye logo + wordmark in black over the aqua glow, like the site header */
.mast img, .dj-head img { filter: brightness(0); }
.mast .word, .mast .sub, .dj-head .t, .dj-head .live { color: var(--void); }
.mast .sub { opacity: .8; }
.mast { border-bottom-color: rgba(192, 192, 192, .22); }
.dj-head .dot { background: rgba(0, 0, 0, .35); }
/* outlined, wide-tracked buttons like LISTEN NOW (Ember stays on the one main CTA) */
.btn, .tier, .pill, .vbtn, .acts button, .tipopts a, .tipopts .opt { font-family: var(--f-ui); font-weight: 500; letter-spacing: .16em; }
.btn { font-size: 15px; border-radius: 0; }
.btn-tip, .btn-ghost, .btn-special { background: transparent; border-color: #acacac; color: var(--silver); }
.btn-special { border-color: var(--gold); }
.btn-tip { border-color: #acacac; }
.btn-primary { border-radius: 0; font-weight: 600; }
.tier { font-size: 13px; border-radius: 0; background: transparent; border-color: #acacac; }
.tier.long { font-size: 10.5px; letter-spacing: .06em; }
.tier.vipt { border-color: var(--gold); }
.tipopts a, .tipopts .opt, .pill, .vbtn, .acts button, .seg a { border-radius: 0; font-size: 13px; }
.seg a { font-family: var(--f-ui); font-weight: 500; letter-spacing: .14em; background: transparent; border-color: #acacac; }
.tipopts a, .tipopts .opt { background: transparent; border-color: #acacac; }