/* EIGHT — the coin buys the room.
   One obsessive concept: the threshold. Lights off, lights on.
   Craft laws applied from sBs/VFX (21 premium tells). */

/* ---------- tokens: one scale, no arbitrary numbers (8pt) ---------- */
:root{
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem;

  /* perceptual lightness ladder in OKLCH, not eyeballed hex */
  --ink:      oklch(97% .012 85);
  --ink-2:    oklch(80% .020 82);
  --ink-3:    oklch(63% .022 80);
  --ground:   oklch(14% .008 70);
  --ground-2: oklch(18% .010 70);
  --ground-3: oklch(23% .013 70);
  --line:     oklch(30% .014 72);

  /* brass: the coin, the lit room. named by purpose, not by value */
  --coin:     oklch(78% .132 74);
  --coin-hi:  oklch(89% .095 88);
  --coin-lo:  oklch(58% .118 62);
  --lit:      oklch(84% .120 78);
  --miss:     oklch(46% .020 40);

  --radius:14px; --radius-lg:22px;

  /* a duration ladder, not one value */
  --t-1:120ms; --t-2:220ms; --t-3:380ms; --t-4:720ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* shadows come in layers */
  --lift:
    0 1px 1px oklch(0% 0 0/.30),
    0 2px 4px oklch(0% 0 0/.22),
    0 8px 18px oklch(0% 0 0/.20);
  --lift-lg:
    0 1px 2px oklch(0% 0 0/.34),
    0 6px 14px oklch(0% 0 0/.26),
    0 22px 48px oklch(0% 0 0/.28);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  /* leading 120-145% of size */
  line-height:1.45;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(96px + var(--safe-b));
  min-height:100svh;
}

/* elevation by tone, not by shadow, on the ground layers */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(26% .028 72/.55), transparent 62%),
    radial-gradient(90% 60% at 50% 108%, oklch(21% .020 64/.45), transparent 60%);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--coin); color:oklch(18% .02 70);
  padding:var(--s1) var(--s2); border-radius:0 0 var(--radius) 0; font-weight:600;
}
.skip:focus{left:0}

/* designed focus ring, not the browser's */
:focus-visible{
  outline:2px solid var(--coin);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- type: measure, tracking that moves with size ---------- */
h1,h2,h3,.stage__h,.thresh__h{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-weight:600; margin:0;
  font-optical-sizing:auto;
}
.vh{
  font-size:clamp(1.65rem,7vw,2.1rem); line-height:1.15;
  letter-spacing:-.018em; margin:0 0 var(--s1);
}
.vh--sm{font-size:1.25rem; letter-spacing:-.01em; margin-top:var(--s5)}
.vsub{
  color:var(--ink-3); margin:0 0 var(--s3);
  max-width:60ch; /* measure */
  font-size:.94rem; line-height:1.5;
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--s2) + var(--safe-t)) var(--s3) var(--s2);
  /* glass belongs on chrome, not on everything */
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  background:oklch(14% .008 70/.72);
  border-bottom:1px solid oklch(30% .014 72/.6);
}
.brand{display:flex; align-items:center; gap:var(--s1)}
.brand__mark{width:26px;height:26px}
.bm__ring{fill:none; stroke:var(--coin); stroke-width:1.4; opacity:.55}
.brand__word{
  font-family:Fraunces,serif; font-weight:700; font-size:1.05rem;
  /* track capitals, not lowercase */
  letter-spacing:.14em;
}
.iconbtn{
  background:none; border:1px solid var(--line); color:var(--ink-2);
  width:38px;height:38px;border-radius:50%; display:grid; place-items:center;
  cursor:pointer; transition:border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.iconbtn:hover{border-color:var(--coin); color:var(--coin)}

/* ---------- views ---------- */
main{position:relative; z-index:1}
.view{padding:var(--s3) var(--s3) var(--s6); max-width:640px; margin:0 auto}
.view[hidden]{display:none}

/* ---------- tonight ---------- */
.stage{text-align:center; padding-top:0}
.stage__eyebrow,.thresh__eyebrow{
  color:var(--coin); font-size:.74rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; margin:0 0 var(--s2);
  font-variant-numeric:tabular-nums;
}
.stage__h{font-size:clamp(2.2rem,11vw,3rem); letter-spacing:-.03em; line-height:1}
.stage__time{
  font-family:Fraunces,serif; font-size:clamp(1.5rem,7vw,1.9rem);
  color:var(--ink-2); margin:2px 0 var(--s3);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

.venue{
  background:var(--ground-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--s2) var(--s3);
  margin:0 0 var(--s3); box-shadow:var(--lift);
}
.venue__label{margin:0 0 var(--s1); font-size:.82rem; color:var(--ink-3)}
.venue__label strong{color:var(--coin); font-weight:600}
.venue__name{
  font-family:Fraunces,serif; font-size:1.25rem; margin:0 0 var(--s2);
  letter-spacing:-.012em;
}

/* ---------- the ring ---------- */
.ring{position:relative; width:min(226px,56vw); margin:0 auto var(--s3); aspect-ratio:1}
.ring svg{width:100%;height:100%; overflow:visible}
.ring__path{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 6; opacity:.8}
.seat{transition:all var(--t-3) var(--ease-out)}
.seat__c{fill:var(--ground-3); stroke:var(--line); stroke-width:1.5}
.seat--in .seat__c{
  fill:var(--lit); stroke:var(--coin-hi); stroke-width:2;
  filter:drop-shadow(0 0 9px oklch(78% .132 74/.55));
}
.seat--out .seat__c{fill:transparent; stroke:var(--miss); stroke-dasharray:2 3}
.seat__t{
  font-family:Inter,sans-serif; font-size:9px; font-weight:600;
  fill:var(--ink-3); text-anchor:middle; letter-spacing:.04em;
}
.seat--in .seat__t{fill:var(--coin)}
.ring__count{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  pointer-events:none;
}
.ring__count span:first-child{
  display:block; font-family:Fraunces,serif; font-size:2.4rem; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.ring__of{display:block; font-size:.72rem; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; margin-top:4px}

.stage__note{color:var(--ink-3); font-size:.84rem; margin:var(--s2) auto 0; max-width:44ch}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-weight:600; font-size:.96rem;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  padding:14px var(--s4); min-height:48px;
  transition:transform var(--t-1) var(--ease), background var(--t-2) var(--ease),
             border-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn--primary{
  background:linear-gradient(180deg,var(--coin-hi),var(--coin));
  color:oklch(20% .03 70); box-shadow:var(--lift);
}
.btn--quiet{background:var(--ground-3); color:var(--ink-2); border-color:var(--line)}
.btn--quiet:hover{color:var(--ink); border-color:var(--coin)}
.btn--ghost{background:none; color:var(--ink-3)}
.btn--ghost:hover{color:var(--ink)}
.btn--wide{width:100%; display:block}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- roster ---------- */
.roster{list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:var(--s1)}
.rw{
  display:flex; align-items:center; gap:var(--s2);
  background:var(--ground-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s2) var(--s3);
}
.rw--next{border-color:var(--coin); background:oklch(20% .022 72)}
.rw__n{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:.76rem; font-weight:600;
  background:var(--ground-3); color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.rw--next .rw__n{background:var(--coin); color:oklch(20% .03 70)}
.rw__name{flex:1; font-weight:500}
.rw__tag{font-size:.72rem; color:var(--coin); letter-spacing:.1em; text-transform:uppercase}
.rw__x{
  background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:1.1rem;
  padding:4px 8px; border-radius:8px;
}
.rw__x:hover{color:var(--ink)}

.agree{display:grid; gap:var(--s1)}
.ag{
  display:flex; gap:var(--s2); align-items:flex-start;
  background:var(--ground-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s2) var(--s3); font-size:.9rem;
}
.ag b{color:var(--coin); font-weight:600; flex:none}

/* ---------- run grid ---------- */
.grid{
  display:grid; grid-template-columns:auto repeat(12,1fr);
  gap:5px; align-items:center; margin-bottom:var(--s3);
  overflow-x:auto; padding-bottom:var(--s1);
}
.gh{font-size:.62rem; color:var(--ink-3); text-align:center; font-variant-numeric:tabular-nums}
.gn{font-size:.78rem; color:var(--ink-2); padding-right:var(--s1); white-space:nowrap}
.gc{aspect-ratio:1; border-radius:4px; background:var(--ground-3); min-width:14px}
.gc--in{background:var(--lit); box-shadow:0 0 6px oklch(78% .132 74/.4)}
.gc--out{background:transparent; border:1px dashed var(--miss)}

.legend{display:flex; gap:var(--s3); flex-wrap:wrap; font-size:.78rem; color:var(--ink-3); margin-bottom:var(--s4)}
.legend span{display:flex; align-items:center; gap:6px}
.dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.dot--in{background:var(--lit)} .dot--out{border:1px dashed var(--miss)} .dot--soon{background:var(--ground-3)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s1)}
.stat{background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3)}
.stat__n{font-family:Fraunces,serif; font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums}
.stat__l{font-size:.78rem; color:var(--ink-3); margin-top:6px}
.stat--hit .stat__n{color:var(--coin)}

/* ---------- wallet ---------- */
.wallet{text-align:center; padding:var(--s5) 0 var(--s3)}
.wallet__n{
  font-family:Fraunces,serif; font-size:4.2rem; line-height:1; margin:0;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--coin-hi),var(--coin-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wallet__l{color:var(--ink-3); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin:var(--s1) 0 0}
.packs{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1); margin:var(--s3) 0}
.pack{
  background:var(--ground-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s3) var(--s1); text-align:center; cursor:pointer; color:var(--ink);
  font:inherit; transition:border-color var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
.pack:hover{border-color:var(--coin)}
.pack:active{transform:scale(.97)}
.pack__n{display:block; font-family:Fraunces,serif; font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums}
.pack__p{display:block; font-size:.78rem; color:var(--ink-3); margin-top:6px; font-variant-numeric:tabular-nums}
.fineprint{font-size:.82rem; color:var(--ink-3); text-align:center; max-width:44ch; margin:0 auto var(--s4)}

.openq{
  background:var(--ground-2); border:1px solid var(--line); border-left:3px solid var(--coin);
  border-radius:var(--radius); padding:var(--s3); font-size:.88rem; color:var(--ink-2);
  margin-bottom:var(--s4);
}
.openq p{margin:0; max-width:58ch}
.openq__t{color:var(--coin); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s1)!important}

.ledger{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ledger li{
  display:flex;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3); background:var(--ground-2);
  border-radius:8px; font-size:.85rem;
}
.ledger em{font-style:normal;color:var(--ink-3)}
.ledger b{font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- tabs ---------- */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:var(--s1) var(--s1) calc(var(--s1) + var(--safe-b));
  background:oklch(14% .008 70/.86);
  backdrop-filter:saturate(170%) blur(20px);
  -webkit-backdrop-filter:saturate(170%) blur(20px);
  border-top:1px solid oklch(30% .014 72/.7);
}
.tab{
  background:none;border:none;cursor:pointer;color:var(--ink-3);
  display:grid;justify-items:center;gap:3px;padding:8px 4px;border-radius:12px;
  font:inherit; font-size:.66rem; letter-spacing:.05em;
  transition:color var(--t-2) var(--ease);
}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.tab svg .fill{fill:currentColor;stroke:none;opacity:0;transition:opacity var(--t-2) var(--ease)}
.tab.is-on{color:var(--coin)}
.tab.is-on svg .fill{opacity:1}

/* ---------- threshold overlay ---------- */
.thresh{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:var(--s3);
  background:oklch(9% .006 70/.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fade var(--t-3) var(--ease-out);
}
.thresh[hidden]{display:none}
.thresh__room{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(60% 45% at 50% 42%, oklch(80% .13 76/.30), transparent 70%);
  transition:opacity var(--t-4) var(--ease-out);
}
.thresh.is-lit .thresh__room{opacity:1}
.thresh__inner{position:relative; text-align:center; max-width:400px; width:100%}
.thresh__h{font-size:clamp(1.8rem,8vw,2.3rem); letter-spacing:-.022em; margin:0 0 var(--s2)}
.thresh__p{color:var(--ink-3); font-size:.92rem; margin:0 auto var(--s5); max-width:34ch}

.coin{background:none;border:none;cursor:pointer;display:grid;justify-items:center;gap:var(--s2);margin:0 auto var(--s3);padding:0}
.coin[hidden]{display:none}
.coin__disc{
  width:168px;height:168px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(from 210deg, var(--coin-lo), var(--coin-hi), var(--coin), var(--coin-lo));
  box-shadow:var(--lift-lg), inset 0 2px 6px oklch(96% .06 90/.45), inset 0 -3px 8px oklch(30% .06 50/.5);
  transition:transform var(--t-3) var(--ease-out), box-shadow var(--t-3) var(--ease);
}
.coin__face{width:78%;height:78%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 32%, oklch(88% .09 86), oklch(66% .12 66));}
.coin__face svg{width:78%;height:78%}
.coin__ring{fill:none;stroke:oklch(34% .05 58/.55);stroke-width:1.6}
.coin__hint{font-size:.74rem;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}
.coin.is-charging .coin__disc{transform:scale(.94)}
.coin.is-done .coin__disc{transform:scale(1.06)}

/* the fill sweep while holding */
.coin__disc::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(var(--coin-hi) calc(var(--p,0)*1%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  opacity:.95;
}
.thresh__done{margin-top:var(--s2); animation:rise var(--t-4) var(--ease-out)}
.thresh__done[hidden]{display:none}
.thresh__lit{font-family:Fraunces,serif;font-size:2rem;color:var(--coin);margin:0}
.thresh__sub{color:var(--ink-3);font-size:.9rem;margin:var(--s1) 0 0}
.thresh__close{margin-top:var(--s3)}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:70;background:oklch(8% .005 70/.6);display:grid;align-items:end}
.sheet[hidden]{display:none}
.sheet__panel{
  background:var(--ground-2); border-top:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--s2) var(--s3) calc(var(--s4) + var(--safe-b));
  max-height:86svh; overflow:auto; box-shadow:var(--lift-lg);
  animation:up var(--t-3) var(--ease-out);
}
.sheet__grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto var(--s3)}
.sheet__h{font-size:1.3rem;margin:0 0 var(--s3);letter-spacing:-.01em}
.field{display:block;margin-bottom:var(--s3)}
.field span{display:block;font-size:.78rem;color:var(--ink-3);margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.field input,.field select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px var(--s2); min-height:48px;
}
.field input:focus,.field select:focus{border-color:var(--coin);outline:none}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(108px + var(--safe-b)); transform:translateX(-50%);
  background:var(--ground-3); color:var(--ink); border:1px solid var(--line);
  padding:var(--s2) var(--s3); border-radius:999px; font-size:.86rem; z-index:80;
  box-shadow:var(--lift); animation:rise var(--t-3) var(--ease-out); white-space:nowrap;
}
.toast[hidden]{display:none}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes up{from{transform:translateY(14px);opacity:.4}to{transform:translateY(0);opacity:1}}

/* view entrance: brevity is the principle */
.view:not([hidden]){animation:vin var(--t-3) var(--ease-out)}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* motion is optional, and that is a requirement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .coin.is-charging .coin__disc,.coin.is-done .coin__disc{transform:none}
}

/* wider screens: keep the measure, do not stretch the app */
@media (min-width:720px){
  body{font-size:18px}
  .tabs{max-width:640px;margin:0 auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid oklch(30% .014 72/.7);border-bottom:none}
}

/* ---------- gate: sign in, then open or join ---------- */
.gate{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  padding:var(--s4) var(--s3) calc(var(--s4) + var(--safe-b));
  background:var(--ground);
}
.gate[hidden]{display:none}
.gate__inner{width:100%; max-width:340px; text-align:center}
.gate__mark{width:52px;height:52px;color:var(--coin);margin-bottom:var(--s3)}
.gate__h{
  font-family:Fraunces,serif; font-size:2.1rem; letter-spacing:.06em;
  margin:0 0 var(--s1); font-weight:700;
}
.gate__p{color:var(--ink-3); margin:0 0 var(--s4); font-size:.94rem}
.gate__gsi{display:grid; place-items:center; min-height:48px; margin-bottom:var(--s3)}
.gate__fine{
  color:var(--ink-3); font-size:.78rem; line-height:1.5;
  margin:var(--s3) auto 0; max-width:34ch;
}
.gate__or{
  color:var(--ink-3); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  margin:var(--s3) 0; position:relative;
}
.gate__or::before,.gate__or::after{
  content:""; position:absolute; top:50%; width:38%; height:1px; background:var(--line);
}
.gate__or::before{left:0} .gate__or::after{right:0}
.gate .field{text-align:left; margin-bottom:var(--s2)}
.gate .field input{text-align:center; letter-spacing:.3em; font-size:1.2rem; text-transform:uppercase}

/* ---------- identity chip ---------- */
.who{display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:var(--s2)}
.who[hidden]{display:none}
.who__pic{width:26px;height:26px;border-radius:50%;border:1px solid var(--line)}
.who__name{font-size:.84rem; color:var(--ink-2); max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- local-mode banner ---------- */
.banner{
  margin:0; padding:10px var(--s3);
  background:oklch(23% .013 70); color:var(--ink-3);
  font-size:.78rem; text-align:center; border-bottom:1px solid var(--line);
}
.banner[hidden]{display:none}

/* ---------- join code ---------- */
.invite{
  background:var(--ground-2); border:1px solid var(--coin);
  border-radius:var(--radius-lg); padding:var(--s3); margin-bottom:var(--s3); text-align:center;
}
.invite[hidden]{display:none}
.invite__l{margin:0 0 6px; font-size:.72rem; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase}
.invite__c{
  margin:0 0 6px; font-family:Fraunces,serif; font-size:2rem;
  letter-spacing:.24em; color:var(--coin); font-variant-numeric:tabular-nums;
}
.invite__n{margin:0; font-size:.8rem; color:var(--ink-3)}

.venue__locked{margin:0; font-size:.84rem; color:var(--ink-3)}
.venue__locked[hidden]{display:none}

/* ---------- payment ---------- */
.paynote{
  font-size:.8rem; text-align:center; color:var(--ink-3);
  max-width:44ch; margin:0 auto var(--s2); line-height:1.5;
}
.paynote--test{
  color:var(--coin); background:oklch(23% .013 70);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px var(--s2); max-width:none;
}
.paynote[hidden]{display:none}

.pack.is-busy{opacity:.6; pointer-events:none}

.pay__lead{margin:0 0 var(--s3); color:var(--ink-2); font-size:.94rem}
.pay__express{min-height:0; margin-bottom:var(--s2)}
.pay__wait{
  margin:0 0 var(--s2); text-align:center; color:var(--ink-3); font-size:.84rem;
}
.pay__wait[hidden]{display:none}
.pay__or{
  color:var(--ink-3); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  margin:var(--s2) 0; position:relative; text-align:center;
}
.pay__or[hidden]{display:none}
.pay__or::before,.pay__or::after{
  content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--line);
}
.pay__or::before{left:0} .pay__or::after{right:0}
.pay__fine{
  margin:var(--s3) 0 0; font-size:.76rem; color:var(--ink-3);
  text-align:center; line-height:1.5;
}

.pay__debug{
  margin:var(--s3) 0 0; padding:var(--s2); background:var(--ground);
  border:1px solid var(--line); border-radius:var(--radius);
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink-3); white-space:pre-wrap; word-break:break-word; overflow-x:auto;
}

/* a tile that will open the native wallet says so */
.pack--wallet{border-color:var(--coin)}
.pack__w{
  display:block; margin-top:6px; font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--coin); font-weight:600;
}