/* ══════════════════════════════════════════════════════════════════
   TheSet — shared finish layer

   Loaded LAST on every page, so it wins over each page's inline
   <style> without specificity hacks. Pages keep their own layout;
   this file owns palette, depth, type detail, and motion, which is
   what keeps six screens looking like one product.

   Recolored to match the audience page's stage/door language (deep
   navy, one amber accent, Caacupe One + Manrope) rather than sitting
   next to it as a different product. Same two ideas as before, just
   a cooler light source:
     1. Light has a source. A cool blue-violet wash sits behind the
        top of every page like a stage lamp, and every raised surface
        catches a hairline of it along its top edge.
     2. Nothing is perfectly flat. A fine grain sits over everything —
        it removes the banding that makes dark gradients look cheap,
        and reads as analog rather than screen-flat.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --stage:#060c22;
  --panel:#0e1a3d;
  --panel2:#101d42;
  --panel-2:#101d42;          /* audience page spells it this way */
  --line:#1e2c52;
  --line-hi:rgba(140,175,255,.22);   /* the caught edge of light */
  --ink:#f3f6ff;
  --dim:#b8c6e4;
  --brass:#7f92b8;             /* renamed in place — was warm brass, now the same muted blue-gray as audience's --ink-3. Kept the variable name so every page referencing var(--brass) picks it up for free. */
  --spot:#e8a33d;               /* fixed brand amber — same value as the audience page's own default accent_color, not per-artist here */
  --spot-hi:#f0be6e;
  --spot-deep:#c17f1f;
  --ok:#31e07f;                 /* same green as the audience page's live-badge dot */
  --bad:#f2596b;
  --ink-dim:#b8c6e4;          /* audience alias */

  /* audience.html's stage-lamp key colors, for the wash below */
  --key-blue:#3b7bff;
  --key-cyan:#39c6f0;
  --key-violet:#6b4be8;

  --font-display:'Caacupe One',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r:14px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --lift:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.85);
}

/* ── the stage wash + grain ─────────────────────────────────────── */
html{background:var(--stage)}
html::before,html::after{
  content:'';position:fixed;inset:0;pointer-events:none;
}
/* cool blue/violet light falling from above, strongest at the top
   where the header sits — the reason the page has a "front". Static,
   not animated like the audience page's drifting lamps: several of
   these screens (live mode, binder) are glanced at mid-performance,
   where motion would be a distraction rather than mood. */
html::before{
  z-index:0;
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(59,123,255,.14), transparent 62%),
    radial-gradient(90% 50% at 84% -8%, rgba(107,75,232,.10), transparent 66%),
    radial-gradient(80% 42% at 50% 104%, rgba(57,198,240,.05), transparent 70%);
}
/* fine grain over everything; soft-light keeps it from greying the
   blacks. Kept low — you should feel it, not see it. */
html::after{
  z-index:9999;opacity:.32;mix-blend-mode:soft-light;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body{position:relative;z-index:1;background:transparent}

/* ── type ───────────────────────────────────────────────────────── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-optical-sizing:auto}
h1,.name,.disp{letter-spacing:-.025em}
h1{line-height:1.08}
/* money and counts stop dancing as they update */
.num,td.num,th.num,.val,.amt,.total,.total b,.stat b,
#eGross,#eNet,#eFees{font-variant-numeric:tabular-nums}

/* ── raised surfaces catch the light along their top edge ───────── */
.card,.panel.open,.sheet,.editor,.triad,.rail,.tile,.note,.req{
  box-shadow:inset 0 1px 0 var(--line-hi), var(--lift);
}
/* NOTE: .tile deliberately excluded here — audience.html gives it its
   own rich per-tile radial gradient (--tile), and this rule loads
   after that page's <style>, so adding .tile here would silently win
   the cascade and flatten it back to a plain wash. */
.card,.editor,.triad{background-image:linear-gradient(180deg,rgba(140,175,255,.022),transparent 42%)}

/* ── primary actions ────────────────────────────────────────────── */
.btn,.cta,.livecta,.reqbtn,.act.pri,.a.play{
  background-image:linear-gradient(180deg,var(--spot-hi),var(--spot));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px -3px rgba(232,163,61,.5);
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
.btn:hover,.cta:hover,.livecta:hover,.reqbtn:hover,.act.pri:hover{
  filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 4px 16px -4px rgba(232,163,61,.62);
}
.btn:active,.cta:active,.livecta:active,.reqbtn:active,.act.pri:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.btn:disabled,.cta:disabled,.act:disabled{
  background-image:none;box-shadow:none;filter:none;transform:none;
}
/* secondary buttons stay quiet until touched */
.btn.ghost,.cta.ghost,.act,.chip,.tab,.mini,.livecta.ghost{
  background-image:none;box-shadow:none;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.btn.ghost:hover,.cta.ghost:hover,.act:hover,.chip:hover,.tab:hover,.mini:hover{
  border-color:var(--brass);color:var(--ink);
}

/* ── inputs ─────────────────────────────────────────────────────── */
input,textarea,select{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--spot);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(232,163,61,.16);
}
input::placeholder,textarea::placeholder{color:var(--brass);opacity:.75}

/* one focus treatment everywhere, keyboard-visible */
:focus-visible{outline:2px solid var(--spot);outline-offset:2px;border-radius:6px}

/* ── selection state on chips, amounts, tabs ────────────────────── */
.amt.on,.chip.on,.tab.on{
  background:rgba(232,163,61,.10);
  border-color:var(--spot);color:var(--spot);
}

/* ── rows and list items respond to the pointer ─────────────────── */
.song,.arow,.srow,.rail{transition:background .16s var(--ease),border-color .16s var(--ease)}
.rail:hover{border-color:var(--brass)}

/* ── the live dot actually glows ────────────────────────────────── */
.livepill .dot{box-shadow:0 0 0 3px rgba(232,163,61,.16),0 0 12px rgba(232,163,61,.7)}
.statebar .dot.on{box-shadow:0 0 0 3px rgba(49,224,127,.15),0 0 12px rgba(49,224,127,.65)}

/* ── toasts land instead of appearing ───────────────────────────── */
.toast{
  box-shadow:0 12px 40px -12px rgba(0,0,0,.9);
  transition:transform .32s var(--ease),opacity .22s var(--ease);
}

/* ── quiet the scrollbar ────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--brass);background-clip:content-box}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════
   Per-surface refinements
   ══════════════════════════════════════════════════════════════════ */

/* ── AUDIENCE PAGE ───────────────────────────────────────────────
   audience.html now ships its own complete, deliberately different
   visual language (near-black/Anton+Outfit, ported from the Figma
   Make prototype) and no longer loads this file at all — the warm
   amber "stage lamp" wash this file paints doesn't fit that palette.
   .head and .name stay below only because binder.html still uses
   them; audience-only rules (.avatar, .livepill, .tag, .total, .foot,
   the tile-accordion helpers) were removed as dead code rather than
   left to rot for a page that can't see them.
   Read at arm's length, one-handed, in a dark room, by someone who
   has had a drink. Bigger type, more air, and a clear first move. */
.head{padding:44px 0 6px}
.name{font-size:36px;letter-spacing:-.03em;line-height:1.05}

/* tip amounts read as denominations, not form fields — still used by
   home.html's .cta and (bare .amt) nothing else load-bearing, kept
   for that page. */
.amt{padding:14px 0;font-size:17px;transition:transform .12s var(--ease)}
.amt:active{transform:scale(.96)}
.cta{padding:17px;letter-spacing:-.01em}

/* ── DASHBOARD ───────────────────────────────────────────────────── */
.top{padding:24px 0 12px}
.top h1{font-size:24px}
.card{padding:22px}
.card h2{font-size:12px;letter-spacing:.14em;color:var(--brass)}
.tabs{padding:6px 0 18px;
  background:linear-gradient(180deg,var(--stage) 70%,transparent)}
.tab{padding:9px 17px}
label{font-size:11px;letter-spacing:.12em}
th{font-size:10px;letter-spacing:.12em}
td{padding:10px 8px}
tbody tr{transition:background .16s var(--ease)}
tbody tr:hover{background:rgba(140,175,255,.02)}

/* the drop zone should invite a file, not just accept one */
#drop{transition:border-color .18s var(--ease),background .18s var(--ease)}
#drop:hover{border-color:var(--brass);background:rgba(140,175,255,.02)}

/* ── LIVE MODE ───────────────────────────────────────────────────
   Read from a mic stand, at a glance, between songs. */
.req{padding:16px 18px}
.stat b,.stats b{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── BINDER ──────────────────────────────────────────────────────
   The triad is the signature: what your hands do, plus the capo,
   equals what the room hears. Give it the weight of an instrument
   panel rather than three boxes. */
.triad{border-radius:16px}
.fld{padding:16px 12px}
.val{font-size:26px;letter-spacing:-.02em}
.sounds{background:linear-gradient(180deg,rgba(232,163,61,.07),rgba(232,163,61,.02))}
.sounds .val{font-size:28px}
.mini{transition:transform .12s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.mini:active{transform:translateY(1px)}
.chords{font-size:17px;letter-spacing:.02em}
.sect+.sect{padding-top:18px;border-top:1px solid rgba(140,175,255,.05);margin-top:2px}

/* ── EMPTY STATES ────────────────────────────────────────────────
   An empty screen is an invitation to act, not an apology. */
.sheet.empty,.empty{color:var(--dim);line-height:1.65}

/* ── LIVE MODE, in detail ────────────────────────────────────────
   Glanced at from a mic stand between songs, so the queue has to
   parse in about a second: song title first, money second, and the
   buttons big enough to hit without looking. */
.statebar{padding:14px 16px;box-shadow:inset 0 1px 0 var(--line-hi),var(--lift)}
.bigbtn{transition:transform .12s var(--ease),filter .18s var(--ease)}
.bigbtn.go{background-image:linear-gradient(180deg,#5fe89e,var(--ok));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 10px -3px rgba(49,224,127,.5)}
.bigbtn:active{transform:translateY(1px)}
.stat{box-shadow:inset 0 1px 0 var(--line-hi),var(--lift);padding:12px 10px}
.stat b{font-size:22px;letter-spacing:-.02em}
.stat span{font-size:10px;letter-spacing:.12em;color:var(--brass)}
.req .song{font-size:19px;letter-spacing:-.015em}
.req .meta b{font-variant-numeric:tabular-nums}
.a{transition:transform .12s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.a:active{transform:translateY(1px)}
.a:hover{border-color:var(--brass)}
.a.ok:hover{border-color:var(--ok)}
.a.no:hover{border-color:var(--bad)}
/* the manual-add bar is a fixed shelf — give it a real edge */
.manual{box-shadow:0 -1px 0 var(--line-hi),0 -12px 32px -18px rgba(0,0,0,.95);
  background:linear-gradient(180deg,var(--panel),var(--stage))}