/* ==========================================================================
   SOMELAB ARCADE — customer-facing design language.
   Paper + ink + hard shadows + platform sky-worlds. Loaded AFTER base.css;
   it re-skins the shared components for the customer surfaces only.
   (Admin keeps the clean technical theme; app.html is frozen on the old
   skin until this direction is validated.)
   ========================================================================== */

/* --- arcade tokens (override the dark SaaS values) ------------------------ */
:root{
  --paper:#F2EBDA; --panel:#FCF8EC; --panel2:#F7F0DD;
  --ink:#191309; --ink2:#4A4033; --mut:#7A6E5C; --faint:#A79A85;
  --line:#191309; --line2:#191309;

  --yellow:#FFD23F; --red:#E8392E; --green:#2FBF3A; --blue:#2E7CE8;
  --vp:#FF5A1F; --premium:#F5B02E;

  /* remap the shared surface vars so base.css components read paper-mode */
  --bg0:var(--paper); --bg1:var(--panel); --bg2:#EFE7D2; --bg3:#E4DAC0;
  --ink-c:#fff;

  --ok:#1F9E4B; --ok-soft:#D9F2D0; --bad:#D22B2B; --bad-soft:#FFDCD2;
  --warn:#B97F0A; --warn-soft:#FFEBB5; --info:#1B62C4; --info-soft:#D7E7FF;

  --pf:var(--twitch); 
  --pf-soft:color-mix(in oklab, var(--pf) 18%, var(--panel));
  --pf-softer:color-mix(in oklab, var(--pf) 9%, var(--panel));
  --pf-line:var(--ink);
  --pf-ink:color-mix(in oklab, var(--pf) 70%, var(--ink));
  --prem-soft:#FFE9B8; --prem-line:var(--ink); --prem-ink:#8A5E00;

  /* platform sky worlds */
  --sky1:#241650; --sky2:#7B4DFF; --sky3:#FF8EC7; --gridc:rgba(255,255,255,.35);

  /* Config first, the approved face as the fallback. With no config — a
     static open of the file, a failed load, a surface with no backend — these
     resolve to exactly what they were before typography became editable. */
  --font-d:var(--vp-font-display,'Archivo Black','Archivo',sans-serif);
  --font-b:var(--vp-font-body,'Archivo','Inter',sans-serif);
  --font-px:var(--vp-font-accent,'Silkscreen',monospace);
  --font-m:var(--vp-font-mono,'JetBrains Mono',ui-monospace,'SF Mono',monospace);

  /* Weight carries hierarchy: primary controls take --bd, supporting
     surfaces take --bd-2. Deliberately not 3px everywhere. */
  --bd:3px; --bd-2:2px;
  --hs:5px 5px 0 var(--ink);      /* primary */
  --hs-s:3px 3px 0 var(--ink);    /* supporting */
  --hs-l:7px 7px 0 var(--ink);    /* selected / lifted */
  --secy:clamp(38px,4.4vw,74px);  /* section rhythm, tighter than base */
  --r-s:8px; --r:14px; --r-l:20px;
  --sh1:var(--hs-s); --sh2:var(--hs); --sh3:var(--hs-l);
  --ring:0 0 0 3px var(--paper), 0 0 0 6px var(--pf);
}
:root[data-pf="twitch"]{  --pf:#8A4DFF; --sky1:#241650; --sky2:#7B4DFF; --sky3:#FF8EC7; }
:root[data-pf="youtube"]{ --pf:#E8392E; --sky1:#38080C; --sky2:#D6362C; --sky3:#FFB35C; }
:root[data-pf="kick"]{    --pf:#2FBF3A; --sky1:#04220B; --sky2:#1E9E33; --sky3:#C6F542; --gridc:rgba(214,255,130,.4); }

body{
  background:var(--paper) ;
  background-image:radial-gradient(rgba(25,19,9,.055) 1.2px, transparent 1.3px);
  background-size:14px 14px;
  color:var(--ink);
  font-family:var(--font-b);
  font-weight:500;
  cursor:default;
}
::selection{ background:var(--yellow); color:var(--ink); }
h1,h2,h3,h4,.disp{ font-family:var(--font-d); font-weight:400; letter-spacing:0; }
.lead{ color:var(--ink2); font-weight:500; }
.mut{ color:var(--mut); } .faint{ color:var(--faint); } .ink2{ color:var(--ink2); }
.mono{ font-family:var(--font-b); font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.px{ font-family:var(--font-px); font-weight:400; letter-spacing:.02em; }
svg{ stroke-width:2.1; }

/* ======================= COMPONENT RE-SKINS =============================== */

/* buttons → physical arcade objects */
.btn{
  --h:40px;
  clip-path:none !important; border-radius:10px;
  border:var(--bd) solid var(--ink);
  font-family:var(--font-d); font-weight:400; letter-spacing:.01em; text-transform:uppercase;
  font-size:.78rem; padding-inline:16px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .09s var(--ease), box-shadow .09s var(--ease), background var(--fast), filter var(--fast);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px) !important; box-shadow:0 0 0 var(--ink) !important; }
.btn::after{ display:none !important; }
.btn-pf{ background:var(--pf); color:#fff; }
:root[data-pf="kick"] .btn-pf{ color:var(--ink); }
.btn-pf:hover{ filter:none; }
/* .btn-vp / .btn-soft are the legacy names still used across site.js. They now
   resolve to the shared customer tokens, so every customer button — drawer,
   checkout, info pages — matches the buy flow rather than the old orange. */
.btn-vp{ background:var(--brand-green); color:var(--ink-900); }
.btn-vp:hover{ background:var(--accent-yellow); filter:none; }
.btn-ghost{ background:var(--panel); color:var(--ink); box-shadow:var(--hs-s); }
.btn-ghost:hover{ background:var(--panel); box-shadow:6px 6px 0 var(--ink); }
.btn-soft{ background:var(--accent-yellow); color:var(--ink-900); }
.btn-lg{ --h:46px; font-size:.92rem; padding-inline:20px; }
.btn-s{ --h:32px; font-size:.68rem; padding-inline:12px; box-shadow:2px 2px 0 var(--ink); }
.btn-s:hover{ box-shadow:3px 3px 0 var(--ink); }

/* cards */
.card{ background:var(--panel); border:var(--bd) solid var(--ink); border-radius:var(--r); box-shadow:var(--hs-s); }

/* chips → stickers */
.chip{
  border:var(--bd-2) solid var(--ink); background:var(--panel); color:var(--ink);
  font-weight:700; height:25px; font-size:.68rem; padding-inline:9px; box-shadow:2px 2px 0 var(--ink);
}
.chip-line{ border-color:var(--ink); background:var(--panel); }
.chip-pf{ background:var(--pf); color:#fff; }
:root[data-pf="kick"] .chip-pf{ color:var(--ink); }
.chip-prem{ background:var(--prem-soft); color:var(--ink); }
.badge{ border:2px solid var(--ink); background:var(--panel); font-family:var(--font-px); font-weight:400; font-size:9px; letter-spacing:.04em; padding:2px 7px; box-shadow:2px 2px 0 var(--ink); }
.badge-ok{ background:var(--ok-soft); color:var(--ink); }
.badge-bad{ background:var(--bad-soft); color:var(--ink); }
.badge-warn{ background:var(--warn-soft); color:var(--ink); }
.badge-info{ background:var(--info-soft); color:var(--ink); }
.badge-mut{ background:var(--bg2); color:var(--ink2); }

/* forms */
.input,.select,.textarea{
  background:#fff; border:var(--bd) solid var(--ink); border-radius:10px; color:var(--ink);
  font-weight:600; box-shadow:inset 3px 3px 0 rgba(25,19,9,.08);
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--ink); box-shadow:inset 3px 3px 0 rgba(25,19,9,.08), 4px 4px 0 var(--pf); }
.input::placeholder{ color:var(--faint); font-weight:500; }
.label{ font-family:var(--font-d); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); }
.hint{ color:var(--mut); }

.switch i{ background:#fff; border:2.5px solid var(--ink); }
.switch i::after{ background:var(--ink); top:2px; left:2px; }
.switch input:checked + i{ background:var(--green); }
.switch input:checked + i::after{ background:#fff; }

/* segmented progress → chunky meter */
.segbar{ height:16px; border:2.5px solid var(--ink); border-radius:6px; background:#fff; }
.segbar > i{ background:var(--pf); }
.segbar::after{ background:repeating-linear-gradient(90deg, transparent 0 10px, var(--ink) 10px 12.5px); opacity:.9; }
.segbar-prem > i{ background:var(--premium); }

/* platform mark */
.pmk{ border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); border-radius:8px; }
.av{ border:2.5px solid var(--ink); border-radius:10px; background:var(--yellow); color:var(--ink); font-family:var(--font-d); }
.av-vp{ background:var(--vp); color:#fff; }

/* toasts */
.toast{ background:var(--ink); color:var(--paper); border:3px solid var(--ink); border-left:8px solid var(--yellow); box-shadow:var(--hs-s); font-weight:700; }
.toast svg{ color:var(--yellow); }

/* ============================ CHROME ===================================== */

/* campaign strip → marquee */
.camp{
  background:var(--ink); color:var(--yellow); border-bottom:0;
  font-family:var(--font-px); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  min-height:30px; padding-block:5px;
}
.camp code{ background:var(--yellow); color:var(--ink); border-radius:4px; font-family:var(--font-px); }
.camp .x{ color:var(--paper); }

/* hero composition */
.hero{
  position:relative;
  padding-block:clamp(12px,1.5vw,20px) 0;
  /* the base sheet sets `padding` shorthand here, which zeroes the gutter
     .wrap provides — restore it so the cluster never touches the edge */
  padding-inline:var(--gut);
}
.hero-sub{
  display:inline-block; margin-top:13px; padding:8px 13px;
  background:var(--ink); color:var(--paper); border-radius:9px;
  font-weight:600; font-size:clamp(.8rem, .74rem + .28vw, .92rem); line-height:1.45;
  transform:rotate(-1.2deg); box-shadow:3px 3px 0 rgba(0,0,0,.25);
  max-width:58ch;
}
@keyframes stamp{ 0%{ transform:rotate(3deg) scale(1.5); opacity:0 } 100%{ transform:rotate(3deg) scale(1) }}

/* ========================== BOOST STATION ================================ */
#consoleMount{ position:relative; z-index:3; max-width:772px; margin:clamp(10px,1.5vw,17px) auto 0; transform:translateY(30px); }
.console{
  background:var(--panel); border:var(--bd) solid var(--ink); border-radius:var(--r-l);
  box-shadow:var(--hs-l); padding:0; overflow:visible; transform:rotate(-.5deg);
}
.console::before{ display:none; }
.console .chip-line{ background:var(--panel); }
.svc-pill{
  height:35px; padding:0 13px; background:#fff; border:var(--bd-2) solid var(--ink); border-radius:9px;
  font-family:var(--font-d); font-size:.72rem; text-transform:uppercase; color:var(--ink);
  box-shadow:3px 3px 0 var(--ink); transition:transform .09s, box-shadow .09s, background .12s;
}
.svc-pill:hover{ background:var(--yellow); color:var(--ink); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.svc-pill:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.svc-pill[aria-selected="true"]{ background:var(--pf); color:#fff; border-color:var(--ink); transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
:root[data-pf="kick"] .svc-pill[aria-selected="true"]{ color:var(--ink); }

/* STANDARD / PREMIUM — physical rocker */
.tier{ background:var(--bg2); border:var(--bd-2) solid var(--ink); border-radius:11px; padding:4px; box-shadow:inset 3px 3px 0 rgba(25,19,9,.12); }
.tier .ind{
  background:#fff; border:2.5px solid var(--ink); border-radius:9px;
  top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
  box-shadow:3px 3px 0 var(--ink);
}
.tier[data-tier="premium"] .ind{
  background:linear-gradient(160deg, #FFE9A9, var(--premium));
  box-shadow:3px 3px 0 var(--ink);
}
.tier .tname{ font-family:var(--font-d); text-transform:uppercase; font-size:.76rem; color:var(--mut); }
.tier .tsub{ color:var(--faint); font-weight:600; }
.tier button[aria-selected="true"] .tname{ color:var(--ink); }
.tier button[aria-selected="true"] .tsub{ color:var(--ink2); }
.tier[data-tier="premium"] button[aria-selected="true"] .tname{ color:var(--ink); }
.tier .tname svg{ color:#C28A00; }

/* readout */
.readout{ padding:15px 2px 1px; }
.readout .q{ font-family:var(--font-d); font-size:clamp(1.75rem,1.35rem + 1.5vw,2.5rem); letter-spacing:-.01em; color:var(--ink); }
.readout .q small{ font-family:var(--font-px); font-size:.3em; color:var(--mut); letter-spacing:.04em; }
.readout .p .was{ color:var(--mut); font-weight:700; }
.readout .p .val{
  display:inline-block; font-family:var(--font-d); font-size:clamp(1.15rem,.95rem + .85vw,1.6rem);
  background:var(--yellow); color:var(--ink); border:var(--bd) solid var(--ink); border-radius:10px;
  padding:3px 11px; box-shadow:3px 3px 0 var(--ink); transform:rotate(1.6deg);
}

/* quantity — custom arcade track */
.qty-slider{ padding-top:6px; }
.range{ height:32px; }
.range::-webkit-slider-runnable-track{
  height:14px; border-radius:7px; border:var(--bd-2) solid var(--ink);
  background:linear-gradient(90deg, var(--pf) var(--fill,50%), #fff var(--fill,50%));
  box-shadow:inset 2px 2px 0 rgba(25,19,9,.14);
}
.range::-webkit-slider-thumb{
  width:25px; height:25px; margin-top:-8px; border-radius:7px;
  background:var(--yellow); border:var(--bd-2) solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  background-image:linear-gradient(90deg, transparent 0 9px, var(--ink) 9px 11px, transparent 11px 15px, var(--ink) 15px 17px, transparent 17px 21px, var(--ink) 21px 23px, transparent 23px);
  background-position:center; background-size:15px 10px; background-repeat:no-repeat;
}
.range:active::-webkit-slider-thumb{ transform:scale(1.12) rotate(-3deg); box-shadow:1px 1px 0 var(--ink); }
.range::-moz-range-track{ height:18px; border-radius:9px; border:var(--bd) solid var(--ink); background:#fff; }
.range::-moz-range-progress{ height:18px; border-radius:9px; background:var(--pf); }
.range::-moz-range-thumb{ width:32px; height:32px; border-radius:9px; background:var(--yellow); border:var(--bd) solid var(--ink); }
.qty-ticks{ margin-top:7px; }
.qty-ticks button{
  font-family:var(--font-px); font-size:.63rem; color:var(--mut);
  border:2px solid transparent; border-radius:7px; padding:4px 7px;
}
.qty-ticks button:hover{ background:#fff; border-color:var(--ink); color:var(--ink); box-shadow:2px 2px 0 var(--ink); }
.qty-ticks button[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); box-shadow:2px 2px 0 rgba(25,19,9,.3); }

.console-meta{ margin-top:13px; gap:6px 15px; }
.console-meta span{ color:var(--ink2); font-weight:600; font-size:.71rem; }
.console-meta svg{ color:var(--mut); width:12px; height:12px; }
.console-meta .deal{ color:var(--ok); }
.console-actions{ gap:9px; margin-top:15px; }
.console-actions .btn{ flex:1; }

/* ============================ MISC PAGES ================================= */
.stage{ background:transparent; }  /* legacy wrapper on product/info/checkout */
.stage-bg{ display:none; }
.crumbs{ color:var(--ink2); font-weight:700; }
@media (max-width:720px){
  #consoleMount{ transform:translateY(34px); }}  /* now holds the burger, at all widths */
.burger{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  background:var(--panel); border:var(--bd) solid var(--ink); border-radius:10px;
  font-family:var(--font-d); font-size:.72rem; text-transform:uppercase; color:var(--ink);
  box-shadow:3px 3px 0 var(--ink); cursor:pointer;
  transition:transform .09s var(--ease), box-shadow .09s var(--ease), background .12s;
}

/* the catalog needs more air above it than the strip below it */
#boosts{ padding-top:clamp(34px,4vw,60px); }


@media (max-width:720px){
  .hero{ padding-top:14px; }
  #consoleMount{ transform:translateY(24px); }}

/* When the action pair stacks, `flex:1` distributes *height* and collapses
   the buttons below a usable touch target. Height comes from --h instead. */
@media (max-width:520px){
  .console-actions{ flex-direction:column; }
  .console-actions .btn{ flex:none; width:100%; }
}

/* ONE-TIME / MONTHLY — a small physical rocker, same family as the tier
   control but deliberately lighter so it doesn't outrank quality */
.ptype{
  position:relative; display:inline-flex; flex:none; padding:3px;
  background:var(--bg2); border:var(--bd-2) solid var(--ink); border-radius:9px;
  box-shadow:inset 2px 2px 0 rgba(25,19,9,.12);
}
.ptype button{
  position:relative; z-index:1; height:29px; padding:0 12px; border-radius:7px;
  font-family:var(--font-d); font-size:.66rem; text-transform:uppercase; letter-spacing:.02em;
  color:var(--mut); transition:color .15s; white-space:nowrap;
}
.ptype button[aria-selected="true"]{ color:var(--ink); }
.readout .p .per{
  display:block; margin-top:3px; text-align:right;
  font-family:var(--font-px); font-size:.58rem; color:var(--ink2); letter-spacing:.04em;
}
.ci-plan{
  margin-top:3px; font-family:var(--font-px); font-size:.52rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mut);
}
.ci-price em{ font-style:normal; font-size:.66rem; font-weight:700; color:var(--ink2); margin-left:2px; }
.ci .stepper button[disabled]{ opacity:.3; pointer-events:none; }

@media (max-width:720px){
  .ptype button{ padding:0 10px; font-size:.6rem; }}
#consoleMount{ max-width:none; margin:0; transform:none; }
@keyframes stationLoad{ from{ opacity:.35; transform:translateY(4px); }}


/* ---- slider: snap feedback + focus, transform-only (§17, §30, §31) ---- */
.range:focus-visible{ outline:none; }
.range:focus-visible::-webkit-slider-thumb{
  box-shadow:2px 2px 0 var(--ink), 0 0 0 4px color-mix(in oklab, var(--pf) 55%, #fff);
}
.range::-webkit-slider-thumb{ transition:transform .12s var(--snap), box-shadow .12s var(--ease); }
.range:hover::-webkit-slider-thumb{ transform:translateY(-1px); }
.range:active::-webkit-slider-thumb{ transform:scale(1.1) rotate(-3deg); }
/* the chosen stop is the one that reads loudest in the tick row */
.qty-ticks button[aria-selected="true"]{ transform:translateY(-1px); }
.svc-pill:focus-visible,.ptype button:focus-visible,.tier button:focus-visible,
.qty-ticks button:focus-visible,.menu-link:focus-visible,.burger:focus-visible,
.btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--yellow), 0 0 0 5px var(--ink);
}

/* ---- price: original sits on the same baseline as the amount (§20) ---- */
.readout .p{ display:flex; align-items:baseline; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.readout .p .was{ margin:0; order:-1; }
.readout .p .per{ width:100%; margin-top:2px; }