/*
 * inrealio — application stylesheet.
 *
 * Extracted from the four inline <style> blocks of inrealio.html in WP7.2,
 * concatenated in document order. Order is load-bearing: the legibility floors
 * added in WP7.1 are last on purpose, because declared first they lost every
 * cascade tie to the admin and HUD rules they exist to raise.
 */

/* ── block 1 of 4 (was inline) ─────────────────────────────── */

/* Tokens live in styles/tokens.css (WP8.3) — this file declares no values of its own. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;font-family:var(--font-body);}


/* Handoff overlay — 3-2-1 before the clock starts (WP3/WP4) */
.handoff{position:fixed;inset:0;z-index:9998;background:var(--surface-0-a94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-7);}
.handoff-count{font-family:var(--font-display);font-size:96px;font-weight:700;color:var(--accent-live);line-height:1;}
.handoff-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--text-muted);}
.handoff-state{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-10);
  padding:var(--space-8) 20px;max-width:420px;width:88%;}
.handoff-state-t{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted);margin-bottom:var(--space-3);}
.handoff-state-v{font-size:14px;color:var(--text-strong);line-height:1.5;}
.handoff-note{font-size:var(--fs-meta);color:var(--text-muted);max-width:420px;text-align:center;padding:0 20px;}

/* Connection banner — WS reconnect state (WP0.7) */
.conn-banner{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9999;
  background:var(--accent-warn-dim);border:1px solid var(--accent-warn);color:var(--accent-warn);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  padding:var(--space-4) var(--space-7);border-radius:var(--radius-6);max-width:90vw;text-align:center;
  pointer-events:none;
}
button{cursor:pointer;font-family:var(--font-body);}

/* scanlines — only on dark screens */
.dark-screen::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,var(--accent-live-a007) 3px,var(--accent-live-a007) 4px);pointer-events:none;z-index:9998;}

/* ═══════════════════════════════════════════
   SCREEN SYSTEM
═══════════════════════════════════════════ */
/* (WP11.5, B47) The inset used to be var(--demo-banner-h,0px) so screens
   started below the demo banner. The banner went with demo mode (WP9.1, ADR
   0016) and nothing set the variable since, so it was always 0. */
/* (WP11.1) Was an inline onmouseover/onmouseout pair on the landing's "apply
   as an actor" button. !important because the button's own border and colour
   sit in its style attribute, which the inline handler overwrote directly. */
[data-hover-lift]:hover{border-color:var(--fg-a25)!important;color:var(--text-strong)!important;}
/* (WP11.1) Likewise the watch page's actor rows. */
[data-hover-live]:hover{border-color:var(--accent-live-a3)!important;}

.screen{position:fixed;inset:0;display:none;flex-direction:column;overflow:hidden;z-index:10;}
.screen.active{display:flex;}
.screen.dark-screen{background:var(--surface-0);color:var(--text-strong);}
.screen.light-screen{background:var(--light-surface-0);color:var(--light-text);}

/* ═══════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════ */
/* loading dots */
.dots::after{content:'.';animation:da 1.2s steps(3,end) infinite;}
@keyframes da{0%{content:'.';}33%{content:'..';}66%{content:'...';}100%{content:'.';}}
@keyframes lp{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes tf{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sw{0%{top:0;opacity:.6}95%{opacity:.6}100%{top:100%;opacity:0}}

/* ═══════════════════════════════════════════
   SCREENS 1–5: LANDING + CONTROLLER FLOW
═══════════════════════════════════════════ */

/* — NAV — */
/* (WP7.0.5) gap + min-width:0 + a non-shrinking CTA. .screen is overflow:hidden,
   so once the nav's content exceeded the viewport the right-hand CTA was simply
   clipped off the edge. Now the link row absorbs the squeeze instead. */
.land-nav{background:var(--surface-1);border-bottom:1px solid var(--border-subtle);padding:0 32px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-shrink:0;}
.land-logo{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:3px;color:var(--text-strong);flex-shrink:0;}
.land-logo .io{color:var(--accent-live);}
.nav-links{display:flex;gap:24px;font-size:13px;min-width:0;flex-shrink:1;overflow:hidden;}
.nav-links a{white-space:nowrap;}
.nav-cta{flex-shrink:0;}
.nav-links a{color:var(--text-secondary);text-decoration:none;transition:color var(--motion-fade);}
.nav-links a:hover{color:var(--text-strong);}
.nav-cta{background:var(--accent-live-dim);border:1px solid var(--accent-live-a35);border-radius:var(--radius-6);padding:7px 18px;font-family:var(--font-mono);font-size:var(--fs-ui);letter-spacing:.1em;color:var(--accent-live);transition:all var(--motion-hover);}
.nav-cta:hover{background:var(--accent-live-a2);}

/* — HERO — */
.hero{background:var(--surface-1);border-bottom:1px solid var(--border-subtle);padding:64px 32px 52px;flex-shrink:0;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 110%,var(--accent-live-a05),transparent);pointer-events:none;}
.hero h1{font-family:var(--font-display);font-size:clamp(30px,5vw,64px);font-weight:700;letter-spacing:.02em;line-height:1.08;margin-bottom:var(--space-8);max-width:660px;}
.hero h1 em{color:var(--accent-live);font-style:normal;}
.hero p{font-size:16px;color:var(--text-body);max-width:500px;line-height:1.7;margin-bottom:28px;}
/* Second hero line (the account truth) sits tight under the first. */
.hero p.hero-note{margin-top:-20px;}
/* (WP15) The hero: copy on the left, a looping graphic on the right. Phones get the copy alone. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-8) 40px;align-items:center;}
.hero-copy{min-width:0;}
.hero h1 em{white-space:nowrap;}
.hero-art{justify-self:end;width:100%;max-width:440px;}
.hero-art > svg, .hero-art > video{display:block;width:100%;height:auto;}
@media (max-width:700px){ .hero{display:block;} .hero-art{display:none;} }

/* The graphic. Every colour is a token; the loop is 9s, one 1s step per key press:
   W W A W W D W W, then a beat of rest. While a key is lit the stick figure walks (a 0.8s stride);
   between presses it stands. It moves on W and turns to face the new way on A and D. */
.ha-roads path{fill:none;stroke:var(--surface-2);stroke-width:15;stroke-linecap:round;}
.ha-trail{fill:none;stroke:var(--accent-live);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1.5 8;opacity:.75;animation:ha-march .7s linear infinite;}
.ha-cap{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1.5;}
.ha-ltr{fill:var(--text-muted);font-family:var(--font-mono);font-size:16px;font-weight:700;text-anchor:middle;}
.ha-lit{opacity:0;}
.ha-lit .ha-cap{fill:var(--accent-live-a15);stroke:var(--accent-live);}
.ha-lit .ha-ltr{fill:var(--accent-live);}
.ha-lit-w{animation:ha-w 9s linear infinite;}
.ha-lit-a{animation:ha-a 9s linear infinite;}
.ha-lit-d{animation:ha-d 9s linear infinite;}
.ha-move{transform:translate(250px,270px);animation:ha-walk 9s linear infinite;}
.ha-face{animation:ha-face 9s linear infinite;}
.ha-fig{fill:none;stroke:var(--accent-live);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}
.ha-stand{animation:ha-off 9s linear infinite;}
.ha-walking{opacity:0;transform:rotate(5deg);animation:ha-on 9s linear infinite;}
.ha-limb{transform-origin:0 -30px;animation:ha-swing .4s cubic-bezier(.55,0,.45,1) infinite alternate;}
.ha-leg{transform-origin:0 -16px;}
.ha-swing-b{animation-name:ha-swing-b;}
.ha-dot{fill:var(--accent-danger);}
.ha-ring{fill:none;stroke:var(--accent-danger);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ha-ping 1.6s ease-out infinite;}
.ha-live-lbl{fill:var(--accent-danger);font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;}
@keyframes ha-march{to{stroke-dashoffset:-9.5;}}
@keyframes ha-swing{from{transform:rotate(32deg)}to{transform:rotate(-32deg)}}
@keyframes ha-swing-b{from{transform:rotate(-32deg)}to{transform:rotate(32deg)}}
/* Walking while a key is lit: [k, k+0.8] of each 1s step. */
@keyframes ha-on{0%,8.8%{opacity:1}8.9%,11%{opacity:0}11.11%,19.9%{opacity:1}20%,22.1%{opacity:0}22.22%,31%{opacity:1}31.1%,33.2%{opacity:0}33.33%,42.1%{opacity:1}42.2%,44.3%{opacity:0}44.44%,53.2%{opacity:1}53.3%,55.4%{opacity:0}55.55%,64.3%{opacity:1}64.4%,66.5%{opacity:0}66.67%,75.4%{opacity:1}75.5%,77.6%{opacity:0}77.78%,86.6%{opacity:1}86.7%,100%{opacity:0}}
@keyframes ha-off{0%,8.8%{opacity:0}8.9%,11%{opacity:1}11.11%,19.9%{opacity:0}20%,22.1%{opacity:1}22.22%,31%{opacity:0}31.1%,33.2%{opacity:1}33.33%,42.1%{opacity:0}42.2%,44.3%{opacity:1}44.44%,53.2%{opacity:0}53.3%,55.4%{opacity:1}55.55%,64.3%{opacity:0}64.4%,66.5%{opacity:1}66.67%,75.4%{opacity:0}75.5%,77.6%{opacity:1}77.78%,86.6%{opacity:0}86.7%,100%{opacity:1}}
@keyframes ha-ping{from{transform:scale(1);opacity:.9;}to{transform:scale(3);opacity:0;}}
@keyframes ha-w{0%,8.9%{opacity:1}9.5%,11%{opacity:0}11.11%,20%{opacity:1}20.6%,33.2%{opacity:0}33.33%,42.2%{opacity:1}42.8%,44.3%{opacity:0}44.44%,53.3%{opacity:1}53.9%,66.5%{opacity:0}66.67%,75.5%{opacity:1}76.1%,77.6%{opacity:0}77.78%,86.7%{opacity:1}87.3%,100%{opacity:0}}
@keyframes ha-a{0%,22.1%{opacity:0}22.22%,31.1%{opacity:1}31.7%,100%{opacity:0}}
@keyframes ha-d{0%,55.4%{opacity:0}55.55%,64.4%{opacity:1}65%,100%{opacity:0}}
@keyframes ha-walk{
  0%{transform:translate(250px,270px);opacity:0}2%{opacity:1}
  8.89%,11.11%{transform:translate(250px,220px)}20%,33.33%{transform:translate(250px,170px)}
  42.22%,44.44%{transform:translate(200px,170px)}53.33%,66.67%{transform:translate(150px,170px)}
  75.56%,77.78%{transform:translate(150px,120px)}86.67%{transform:translate(150px,70px);opacity:1}
  96%,100%{transform:translate(150px,70px);opacity:0}}
@keyframes ha-face{0%,22.22%{transform:scaleX(1)}23.5%,55.55%{transform:scaleX(-1)}56.8%,100%{transform:scaleX(1)}}
/* No motion: one still frame — W lit, the walker part-way up the first street. */
@media (prefers-reduced-motion:reduce){
  .ha-trail,.ha-lit,.ha-move,.ha-face,.ha-stand,.ha-walking,.ha-limb,.ha-ring{animation:none;}
  .ha-stand{opacity:1;}
  .ha-walking{opacity:0;}
  .ha-lit-w{opacity:1;}
  .ha-move{transform:translate(250px,170px);}
  .ha-ring{opacity:.45;transform:scale(2);}
}

/* (WP15) The two ways to pay on the pay screen, and the nudge after a Play now purchase. */
/* (WP18) The quote, the balance and the secondary links under the single primary action. */
.pay-quote{text-align:center;padding:var(--space-4) 0 var(--space-1);}
.pay-amount{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--accent-live);line-height:1.1;}
.pay-sub{font-size:var(--fs-meta);color:var(--text-muted);margin-top:var(--space-1);}
.pay-flag{font-family:var(--font-mono);font-size:10px;margin-top:var(--space-3);}
.pay-flag-warn{color:var(--accent-warn);} .pay-flag-live{color:var(--accent-live);}
.pay-balance{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);font-size:var(--fs-meta);color:var(--text-muted);text-align:center;}
.pay-ok{color:var(--accent-live);} .pay-low{color:var(--accent-danger);}
.pay-links{text-align:center;margin:var(--space-3) 0 var(--space-5);}
.pay-link{font-size:var(--fs-meta);color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px;}
.pay-link:hover{color:var(--text-strong);}
.pay-mode-note{font-size:var(--fs-meta);color:var(--text-muted);line-height:1.5;text-align:center;margin:var(--space-4) 0 var(--space-5);}
.guest-el{margin-top:var(--space-5);}
.q-nudge{background:var(--accent-live-a05);border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--space-7);font-size:var(--fs-meta);color:var(--text-secondary);text-align:center;}
.q-nudge[hidden]{display:none;}
.hero-pills{display:flex;gap:var(--space-4);flex-wrap:wrap;}
.hp{background:var(--fg-a04);border:1px solid var(--fg-a09);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-7);font-size:10px;color:var(--text-secondary);font-family:var(--font-mono);letter-spacing:.08em;}

/* — HOW IT WORKS — */
.land-how{padding:44px 32px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;}
.section-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.22em;color:var(--text-muted);text-transform:uppercase;margin-bottom:20px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7);}
.step-card{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-10);padding:18px;}
.step-num{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live);letter-spacing:.12em;margin-bottom:var(--space-4);}
.step-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.04em;margin-bottom:var(--space-2);}
.step-body{font-size:var(--fs-body);color:var(--text-body);line-height:1.6;}

/* — ACTOR GRID — */
.actors-section{padding:44px 32px;flex:1;overflow-y:auto;}
.actor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--space-5);margin-top:var(--space-8);}
.actor-card{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-10);padding:18px;transition:all var(--motion-fade);cursor:pointer;}
.actor-card:hover{border-color:var(--accent-live-a3);background:var(--accent-live-a04);}
.actor-card.offline{opacity:.4;pointer-events:none;}
.ac-head{display:flex;align-items:center;gap:var(--space-5);margin-bottom:11px;}
.ac-av{width:38px;height:38px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:700;flex-shrink:0;}
.ac-name{font-size:14px;font-weight:500;}
.ac-city{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.06em;margin-top:1px;}
.ac-badge{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;padding:2px 7px;border-radius:var(--radius-10);display:flex;align-items:center;gap:var(--space-1);white-space:nowrap;}
.ac-badge.live{background:var(--accent-live-dim);border:1px solid var(--accent-live-a2);color:var(--accent-live);}
.ac-badge.off{background:var(--fg-a03);border:1px solid var(--border-subtle);color:var(--text-muted);}
.ac-dot{width:4px;height:4px;border-radius:var(--radius-round);}
.ac-badge.live .ac-dot{background:var(--accent-live);animation:lp 1.4s ease-in-out infinite;}
.ac-badge.off .ac-dot{background:var(--text-muted);}
.ac-bio{font-size:var(--fs-meta);color:var(--text-body);line-height:1.55;margin-bottom:var(--space-6);}
.ac-tier{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;padding:2px var(--space-4);border-radius:var(--radius-4);margin-bottom:var(--space-5);}
.ac-tier.insta{background:var(--accent-info-a1);border:1px solid var(--accent-info-a2);color:var(--accent-info);}
.ac-tier.phone{background:var(--accent-warn-a1);border:1px solid var(--accent-warn-a2);color:var(--accent-warn);}
/* (WP7.0.5) Wraps instead of clipping. A złoty price is wider than the euro
   amount this was laid out for, so at narrow card widths the price ran onto a
   second line and pushed the buttons out of the card. */
.ac-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.ac-price{font-family:var(--font-mono);font-size:11px;color:var(--accent-warn);white-space:nowrap;}
.ac-queue{font-size:var(--fs-meta);color:var(--text-muted);}
.take-btn{background:var(--accent-live-dim);border:1px solid var(--accent-live-a3);border-radius:var(--radius-5);padding:var(--space-3) var(--space-6);font-family:var(--font-mono);font-size:var(--fs-ui);letter-spacing:.08em;color:var(--accent-live);transition:all var(--motion-hover);}
.take-btn:hover{background:var(--accent-live-a2);}

/* — MODAL SCREENS (nick, pay, queue) — */
/* (WP18) A modal card taller than the window (the pay card with its quote, a phone) used to be
   clipped at both ends: .screen hides overflow and the card was centred. Now the screen scrolls
   and the card centres itself with auto margins — centred when it fits, from the top when not. */
.modal-screen{align-items:center;justify-content:flex-start;overflow-y:auto;}
.modal-screen > .modal-card{margin:auto 0;flex-shrink:0;}
.modal-card{background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-14);padding:32px;width:100%;max-width:400px;}
.modal-card h2{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:.04em;margin-bottom:3px;}
.modal-sub{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted);margin-bottom:20px;}
.actor-pill{display:flex;align-items:center;gap:var(--space-5);background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-8);padding:var(--space-5) var(--space-6);margin-bottom:20px;}
.ap-av{width:32px;height:32px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:700;flex-shrink:0;}
.ap-name{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.04em;}
.ap-city{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.05em;}
.ap-price{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--accent-warn);}
.f-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--text-muted);display:block;margin-bottom:var(--space-2);}
.f-input{width:100%;background:var(--fg-a04);border:1px solid var(--border-strong);border-radius:var(--radius-7);padding:11px var(--space-7);font-family:var(--font-mono);font-size:var(--fs-ui);color:var(--text-strong);outline:none;transition:border-color var(--motion-fade);margin-bottom:var(--space-1);}
.f-input:focus{border-color:var(--accent-live-a4);}
.f-hint{font-size:var(--fs-meta);color:var(--text-muted);margin-bottom:var(--space-8);}
.f-err{font-size:var(--fs-meta);color:var(--accent-danger);min-height:14px;margin-bottom:var(--space-4);}
.primary-btn{width:100%;background:var(--accent-live-dim);border:1px solid var(--accent-live-a4);border-radius:var(--radius-9);padding:13px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.16em;color:var(--accent-live);transition:all var(--motion-hover);margin-bottom:var(--space-4);}
.primary-btn:hover{background:var(--accent-live-a2);}
.primary-btn:disabled{opacity:.3;cursor:not-allowed;}
.ghost-btn{width:100%;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-9);padding:9px;font-size:var(--fs-meta);color:var(--text-muted);transition:all var(--motion-hover);}
.ghost-btn:hover{border-color:var(--border-strong);color:var(--text-strong);}
.pay-summary{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-8);padding:var(--space-6);margin-bottom:18px;}
.ps-row{display:flex;justify-content:space-between;font-size:var(--fs-meta);color:var(--text-muted);margin-bottom:3px;}
.ps-row:last-child{margin-bottom:0;}
.ps-val{color:var(--text-strong);font-weight:500;}
.ps-price{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--accent-live);}
#stripe-element{background:var(--fg-a04);border:1px solid var(--border-strong);border-radius:var(--radius-8);padding:var(--space-6);margin-bottom:var(--space-7);}

/* queue screen */
/* ── QUEUE SCREEN — full-screen watch + position overlay ── */
.q-layout{width:100%;height:100%;display:flex;flex-direction:column;background:var(--surface-0);}
.q-topbar{background:var(--surface-1);border-bottom:1px solid var(--border-subtle);padding:0 var(--space-7);height:44px;display:flex;align-items:center;gap:var(--space-5);flex-shrink:0;}

/* Queue position banner — pinned below topbar */
.q-banner{background:linear-gradient(90deg,var(--accent-warn-a12),var(--accent-warn-a06));border-bottom:1px solid var(--accent-warn-a2);padding:var(--space-5) var(--space-8);display:flex;align-items:center;gap:var(--space-8);flex-shrink:0;}
.q-pos-badge{background:var(--accent-warn);color:var(--black);font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.04em;border-radius:var(--radius-8);padding:var(--space-1) var(--space-7);flex-shrink:0;line-height:1.3;}
.q-banner-info{flex:1;min-width:0;}
.q-banner-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text-strong);line-height:1.2;}
.q-banner-eta{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);margin-top:2px;letter-spacing:.06em;}
.q-progress{height:3px;background:var(--border-subtle);border-radius:var(--radius-2);overflow:hidden;margin-top:var(--space-3);}
.q-progress-fill{height:100%;background:var(--accent-warn);border-radius:var(--radius-2);transition:width .5s;width:80%;}

/* Body: video + sidebar like watch page */
.q-body{flex:1;display:flex;overflow:hidden;min-height:0;}
.q-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.q-stream{position:relative;background:var(--black);flex-shrink:0;}
.q-stream::before{content:'';display:block;padding-top:56.25%;}
.q-stream iframe,.q-stream>div{position:absolute;inset:0;width:100%;height:100%;border:none;}
.q-stream iframe{display:block;}
.q-stream-label{position:absolute;top:8px;left:10px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live-a5);letter-spacing:.1em;pointer-events:none;background:var(--shade-a4);padding:2px var(--space-4);border-radius:var(--radius-3);}
/* (WP18) `.q-stream>div` above stretches every child over the frame, so the label and the
   controller badge (bottom left, by its inline style) both ended up at the top left, printed
   over each other. Put each back in its own corner. */
.q-stream > .q-stream-label{inset:8px auto auto 10px;width:auto;height:auto;}
.q-stream > #q-ctrl-lbl{inset:auto auto 8px 10px;width:auto;height:auto;}

/* Below video: prep panel */
.q-below{flex:1;overflow-y:auto;padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-6);}
.q-below::-webkit-scrollbar{width:2px;}

/* Safety warning */
.q-safety{background:var(--accent-warn-a07);border:1px solid var(--accent-warn-a2);border-radius:var(--radius-10);padding:var(--space-7) var(--space-8);}
.q-safety-title{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--accent-warn);margin-bottom:var(--space-5);}
.q-safety-item{display:flex;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-4);font-size:var(--fs-meta);color:var(--text-a75);line-height:1.55;}
.q-safety-item:last-child{margin-bottom:0;}
.q-safety-icon{font-size:14px;flex-shrink:0;margin-top:1px;}

/* WASD preview */
.q-wasd-preview{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-10);padding:var(--space-7) var(--space-8);}
.q-wasd-title{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--space-6);}
.q-wasd-grid{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-bottom:var(--space-5);}
.q-wasd-row{display:flex;gap:var(--space-2);}
.q-key{width:44px;height:44px;background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--radius-6);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:16px;color:var(--text-strong);gap:1px;}
.q-key span{font-size:var(--fs-meta);color:var(--text-muted);}
.q-actions-row{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.q-action-chip{background:var(--surface-3);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-1) var(--space-5);font-size:var(--fs-meta);color:var(--text-muted);display:flex;align-items:center;gap:var(--space-2);}
.q-action-chip .q-chip-key{font-family:var(--font-mono);font-size:var(--fs-micro);background:var(--fg-a07);border:1px solid var(--border-strong);border-radius:var(--radius-3);padding:1px var(--space-2);color:var(--accent-live);}

/* Chat sidebar on queue screen */
/* (WP8.1) Reshaping Law: the rail clamps and gives way first; was a fixed 280px. */
.q-sidebar{flex:0 1 clamp(260px, 22vw, 380px);min-width:0;background:var(--surface-1);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow:hidden;}
@media(max-width:600px){.q-sidebar{display:none;}}
.q-chat-msgs{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:3px;}
.q-chat-msgs::-webkit-scrollbar{width:2px;}
.q-chat-msgs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-1);}
.q-chat-badge{font-size:var(--fs-micro);padding:1px var(--space-2);border-radius:var(--radius-3);flex-shrink:0;margin-top:2px;font-family:var(--font-mono);}
.q-chat-input-wrap{padding:var(--space-4);border-top:1px solid var(--border-subtle);flex-shrink:0;}
.q-chat-row{display:flex;gap:var(--space-2);}
.q-chat-row input{flex:1;background:var(--fg-a04);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-3) var(--space-4);font-size:var(--fs-ui);color:var(--text-strong);font-family:var(--font-body);outline:none;}
.q-chat-row input:focus{border-color:var(--accent-live-a3);}
.q-chat-send{background:var(--accent-live-dim);border:1px solid var(--accent-live-glow);border-radius:var(--radius-5);padding:var(--space-3) var(--space-5);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live);}

/* — CONTROLLER HUD — */
/* ── MOBILE CONTROLLER — D-pad layout for phones ── */
@media (max-width: 700px) {
  /* Hide entire desktop layout grid */
  #s-ctrl .layout { display: none !important; }
  /* Show mobile controller — fills the full screen */
  #ctrl-mobile { display: flex !important; }
}
@media (min-width: 701px) {
  #ctrl-mobile { display: none !important; }
  /* (WP8.1) Was `display:grid` with no template — see the layout block at the end. */
  #s-ctrl .layout { display: flex; }
}

/* Mobile controller panel — full screen, flex column */
#ctrl-mobile {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--surface-0);
  overflow: hidden;
}
.cm-top {
  background: var(--surface-1); border-bottom: 1px solid var(--border-subtle);
  padding:0 var(--space-7); height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cm-timer { font-family: var(--font-mono); font-size: 28px; color: var(--accent-warn); letter-spacing: .04em; }
.cm-timer.urgent { color: var(--accent-danger); }
.cm-info { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--text-muted); text-align: right; line-height: 1.5; }
.cm-body { flex: 1; display: flex; flex-direction: column; padding:var(--space-6) var(--space-7); gap:var(--space-5); overflow: hidden; }
/* command label */
.cm-cmd { background: var(--accent-live-a05); border: 1px solid var(--accent-live-a12); border-radius:var(--radius-10); padding:var(--space-5); text-align: center; flex-shrink: 0; }
.cm-cmd-text { font-family: var(--font-display); font-size: clamp(20px,6vw,32px); font-weight: 700; letter-spacing: .14em; color: var(--text-muted); }
/* D-pad */
.cm-dpad { display: flex; flex-direction: column; align-items: center; gap:var(--space-4); flex: 1; justify-content: center; }
.cm-dpad-row { display: flex; gap:var(--space-4); }
.cm-key {
  aspect-ratio: 1;
  width: clamp(70px, 26vw, 110px);
  background: var(--surface-2); border: 1.5px solid var(--border-strong);
  border-radius:var(--radius-14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: clamp(22px, 7vw, 36px); color: var(--text-strong);
  user-select: none; -webkit-user-select: none; touch-action: none;
  cursor: pointer; transition:all var(--motion-press);
}
.cm-key .cm-sub { font-size: clamp(8px, 2.5vw, 12px); color: var(--text-muted); margin-top:2px; }
.cm-key.active { background: var(--accent-live-dim); border-color: var(--accent-live); color: var(--accent-live); box-shadow: 0 0 16px var(--accent-live-glow); }
.cm-mods { display: flex; gap:var(--space-4); width: 100%; }
.cm-mod {
  flex: 1; padding:clamp(var(--space-4),2.5vw,var(--space-6)) var(--space-3); background: var(--surface-2);
  border: 1.5px solid var(--border-subtle); border-radius:var(--radius-10); text-align: center;
  user-select: none; touch-action: none; cursor: pointer; transition:all var(--motion-press);
}
.cm-mod-k { font-family: var(--font-mono); font-size: 11px; color: var(--accent-live); display: block; }
.cm-mod-l { font-size:var(--fs-meta); color: var(--text-muted); display: block; margin-top:2px; }
.cm-mod.active { border-color: var(--accent-live); background: var(--accent-live-dim); }
/* bottom action row */
.cm-actions { display: flex; gap:var(--space-3); flex-shrink: 0; }
.cm-act {
  flex: 1; padding:var(--space-5) var(--space-1); background: var(--surface-2);
  border: 1.5px solid var(--border-subtle); border-radius:var(--radius-10);
  display: flex; flex-direction: column; align-items: center; gap:3px;
  user-select: none; touch-action: none; cursor: pointer; transition:all var(--motion-tap);
}
.cm-act-k { font-family: var(--font-mono); font-size:var(--fs-micro); color: var(--accent-live); }
.cm-act-l { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cm-act.g .cm-act-l { color: var(--accent-live); }
.cm-act.a .cm-act-l { color: var(--accent-warn); }
.cm-act.b .cm-act-l { color: var(--accent-info); }
.cm-act.r .cm-act-l { color: var(--accent-danger); }
.cm-act.r { border-color: var(--accent-danger-a3); }
.cm-act:active, .cm-act.pressed { transform: scale(.93); }
.cm-act.g:active, .cm-act.g.pressed { border-color: var(--accent-live); background: var(--accent-live-dim); }
.cm-act.a:active, .cm-act.a.pressed { border-color: var(--accent-warn); background: var(--accent-warn-dim); }
.cm-act.r:active, .cm-act.r.pressed { border-color: var(--accent-danger); background: var(--accent-danger-dim); }
/* tips row */
.cm-tips { display: flex; gap:var(--space-2); flex-shrink: 0; }
.cm-tip { flex: 1; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius:var(--radius-6); padding:var(--space-3) 2px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--accent-warn); cursor: pointer; transition:all var(--motion-tap); }
.cm-tip:active { border-color: var(--accent-warn); background: var(--accent-warn-dim); }
.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-8);background:var(--surface-1);border-bottom:1px solid var(--border-subtle);gap:var(--space-6);}
.tlogo{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:2px;white-space:nowrap;}
.tlogo .io{color:var(--accent-live);}
.top-center{display:flex;align-items:center;gap:18px;flex:1;justify-content:center;}
.live-pill{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:10px;color:var(--accent-live);letter-spacing:.1em;}
.ldot{width:6px;height:6px;border-radius:var(--radius-round);background:var(--accent-live);box-shadow:0 0 6px var(--accent-live);animation:lp 1.4s ease-in-out infinite;}
.timer{font-family:var(--font-mono);font-size:24px;color:var(--accent-warn);letter-spacing:.06em;line-height:1;}
.timer.urgent{color:var(--accent-danger);animation:tf .5s ease-in-out infinite;}
.status-text{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;}
.top-right{display:flex;align-items:center;gap:var(--space-6);}
.actor-nm{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.06em;text-align:right;}
.actor-loc{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.06em;}
.lat-tag{font-family:var(--font-mono);font-size:var(--fs-micro);padding:3px 7px;border-radius:var(--radius-3);border:1px solid var(--accent-live);color:var(--accent-live);letter-spacing:.06em;transition:color var(--motion-slide),border-color var(--motion-slide);}
.left-panel,.right-panel{background:var(--surface-1);display:flex;flex-direction:column;overflow:hidden;}
.left-panel{border-right:1px solid var(--border-subtle);}
.right-panel{border-left:1px solid var(--border-subtle);}
.pblock{border-bottom:1px solid var(--border-subtle);padding:var(--space-5) var(--space-6);flex-shrink:0;}
.pblock:last-child{border-bottom:none;flex:1;}
.plabel{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;color:var(--text-muted);text-transform:uppercase;margin-bottom:var(--space-4);}
.wasd-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);}
.wasd-row{display:flex;gap:var(--space-1);}
.wkey{width:46px;height:46px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-6);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:16px;color:var(--text-strong);cursor:pointer;user-select:none;transition:all var(--motion-press);gap:1px;}
.wkey .sub{font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.06em;}
.wkey.active{background:var(--accent-live-dim);border-color:var(--accent-live);color:var(--accent-live);box-shadow:0 0 10px var(--accent-live-glow);transform:scale(.93);}
.mod-strip{display:flex;gap:var(--space-1);margin-top:var(--space-3);width:100%;}
.mkey{flex:1;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-2) var(--space-1);text-align:center;cursor:pointer;transition:all var(--motion-press);}
.mkey .mk{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live);letter-spacing:.04em;display:block;}
.mkey .ml{font-size:var(--fs-meta);color:var(--text-muted);display:block;margin-top:1px;}
.mkey.active{border-color:var(--accent-live);background:var(--accent-live-dim);box-shadow:0 0 7px var(--accent-live-glow);}
.kbtn{display:flex;align-items:center;gap:7px;width:100%;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-1);cursor:pointer;transition:all var(--motion-press);color:var(--text-strong);position:relative;overflow:hidden;}
.kbtn::after{content:'';position:absolute;inset:0;background:var(--accent-live);opacity:0;transition:opacity var(--motion-press);}
.kbtn:last-child{margin-bottom:0;}
.kbtn.pressed{border-color:var(--accent-live);box-shadow:0 0 8px var(--accent-live-glow);transform:scale(.97);}
.kbtn.pressed::after{opacity:.1;}
.kbd{font-family:var(--font-mono);font-size:10px;background:var(--fg-a07);border:1px solid var(--fg-a13);border-radius:var(--radius-3);padding:2px var(--space-3);min-width:26px;text-align:center;color:var(--accent-live);letter-spacing:.04em;flex-shrink:0;position:relative;z-index:1;}
.kbl{font-size:var(--fs-meta);font-weight:500;position:relative;z-index:1;}
.kbr{font-size:var(--fs-micro);color:var(--text-muted);margin-left:auto;font-family:var(--font-mono);position:relative;z-index:1;}
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.cbtn{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-4);padding:var(--space-3) var(--space-2);text-align:center;cursor:pointer;transition:all var(--motion-tap);}
.cbtn.active{border-color:var(--accent-info);background:var(--accent-info-dim);box-shadow:0 0 7px var(--accent-info-a3);}
.ck{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-info);display:block;letter-spacing:.04em;}
.cl{font-size:var(--fs-meta);color:var(--text-muted);display:block;margin-top:1px;}
.cam-row{display:flex;gap:3px;margin-top:3px;}
.cbtn-sm{flex:1;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-4);padding:var(--space-2) 3px;text-align:center;cursor:pointer;transition:all var(--motion-tap);}
.tip-row{display:flex;gap:3px;}
.tamt{flex:1;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-4);padding:var(--space-3) 2px;text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--accent-warn);cursor:pointer;transition:all var(--motion-tap);}
.tamt:hover{border-color:var(--accent-warn);background:var(--accent-warn-dim);}
.tamt.flash{border-color:var(--accent-warn);background:var(--accent-warn-dim);box-shadow:0 0 10px var(--accent-warn-a4);}
.sc-btn{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-4);padding:var(--space-3) var(--space-4);margin-bottom:3px;cursor:pointer;transition:all var(--motion-tap);}
.sc-btn:hover{border-color:var(--accent-live-a25);}
.sc-btn:last-child{margin-bottom:0;}
.scn{font-size:var(--fs-meta);font-weight:500;}
.scp{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live);}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-3);}
.chat-msgs::-webkit-scrollbar{width:2px;}
.chat-msgs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-2);}
.cmsg{font-size:var(--fs-meta);line-height:1.5;}
.cmsg .cu{font-family:var(--font-mono);font-size:var(--fs-micro);}
.cmsg .ct{color:var(--text-a65);}
.chat-form{display:flex;gap:var(--space-1);}
.chat-form input{flex:1;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-4);padding:var(--space-2) 7px;font-size:var(--fs-ui);color:var(--text-strong);font-family:var(--font-body);outline:none;}
.chat-form input:focus{border-color:var(--accent-live-a3);}
.chat-form button{background:var(--accent-live-dim);border:1px solid var(--accent-live);border-radius:var(--radius-4);padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live);cursor:pointer;}
.stream-panel{position:relative;background:var(--black);overflow:hidden;}
.stream-bg{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,var(--accent-live-a01) 2px,var(--accent-live-a01) 3px),radial-gradient(ellipse 80% 60% at 50% 40%,var(--surface-video-tint),var(--black));display:flex;align-items:center;justify-content:center;}
.sp-icon{font-family:var(--font-mono);font-size:40px;color:var(--accent-live-a1);display:block;margin-bottom:var(--space-6);}
.sp-text{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.12em;line-height:2;text-align:center;}
#ctrl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.corner{position:absolute;width:18px;height:18px;border-color:var(--accent-live-a35);border-style:solid;}
.c-tl{top:10px;left:10px;border-width:1px 0 0 1px;}
.c-tr{top:10px;right:10px;border-width:1px 1px 0 0;}
.c-bl{bottom:54px;left:10px;border-width:0 0 1px 1px;}
.c-br{bottom:54px;right:10px;border-width:0 1px 1px 0;}
.xhair{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);pointer-events:none;opacity:.2;}
.xhair::before,.xhair::after{content:'';position:absolute;background:var(--accent-live);}
.xhair::before{width:1px;height:12px;top:-6px;left:0;}
.xhair::after{width:12px;height:1px;top:0;left:-6px;}
.sweep{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-live-a5),transparent);animation:sw 4s linear infinite;}
.hud-tl{position:absolute;top:12px;left:14px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live-a55);letter-spacing:.07em;line-height:1.9;}
.hud-tr{position:absolute;top:12px;right:14px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live-a55);letter-spacing:.07em;line-height:1.9;text-align:right;}
.hud-bl{position:absolute;bottom:54px;left:14px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--fg-a25);letter-spacing:.07em;}
.action-flash{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-live);text-shadow:0 0 24px var(--accent-live-glow);opacity:0;transition:opacity var(--motion-tap);pointer-events:none;white-space:nowrap;}
.action-flash.show{opacity:1;}
.sess-bar{position:absolute;bottom:0;left:0;right:0;background:var(--surface-0-a92);border-top:1px solid var(--border-subtle);padding:var(--space-3) var(--space-7);display:flex;align-items:center;gap:var(--space-5);}
.sess-label{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.1em;white-space:nowrap;}
.sess-track{flex:1;height:3px;background:var(--fg-a05);border-radius:var(--radius-2);overflow:hidden;}
.sess-fill{height:100%;background:var(--accent-live);border-radius:var(--radius-2);transition:width 1s linear;}
.sess-time{font-family:var(--font-mono);font-size:11px;color:var(--accent-live);white-space:nowrap;}
/* (WP8.1) The same card, in the rail's flow instead of floating over the frame. */
#vote-float{margin:var(--space-5) var(--space-6);background:var(--surface-1-a94);border:1px solid var(--accent-info-a25);border-radius:var(--radius-8);padding:var(--space-5) var(--space-7);display:none;flex-shrink:0;}
#vote-float.show{display:block;}
.vf-q{font-family:var(--font-display);font-size:var(--fs-meta);font-weight:700;color:var(--accent-info);margin-bottom:7px;letter-spacing:.06em;}
.vf-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-1);}
.vf-opt{background:var(--fg-a04);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-3) var(--space-4);cursor:pointer;font-size:var(--fs-meta);transition:all var(--motion-hover);}
.vf-opt:hover{border-color:var(--accent-info-a3);}
.vf-opt.voted{border-color:var(--accent-live-a3);background:var(--accent-live-dim);cursor:default;}
.vf-bar-w{height:2px;background:var(--fg-a05);border-radius:var(--radius-1);overflow:hidden;margin-top:3px;}
.vf-bar{height:100%;background:var(--accent-info);border-radius:var(--radius-1);transition:width var(--motion-slide);}
.vf-opt.voted .vf-bar{background:var(--accent-live);}
.vf-footer{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);margin-top:var(--space-2);}
.bottom-bar{flex-shrink:0;background:var(--surface-1);border-top:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 var(--space-7);gap:var(--space-3);}
.abtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-6);padding:var(--space-4) var(--space-1);cursor:pointer;transition:all var(--motion-tap);position:relative;overflow:hidden;height:50px;gap:2px;}
.abtn::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--motion-tap);}
.abtn.g{border-color:var(--accent-live-a2);}
.abtn.g::before{background:var(--accent-live);}
.abtn.a{border-color:var(--accent-warn-a2);}
.abtn.a::before{background:var(--accent-warn);}
.abtn.b{border-color:var(--accent-info-a2);}
.abtn.b::before{background:var(--accent-info);}
.abtn.r{border-color:var(--accent-danger-a35);min-width:68px;flex:0;}
.abtn.r::before{background:var(--accent-danger);}
.abtn:hover::before,.abtn:active::before,.abtn.pressed::before{opacity:.12;}
.abtn:active,.abtn.pressed{transform:scale(.94);}
.abtn.g:active,.abtn.g.pressed{border-color:var(--accent-live);box-shadow:0 0 10px var(--accent-live-glow);}
.abtn.a:active,.abtn.a.pressed{border-color:var(--accent-warn);}
.abtn.b:active,.abtn.b.pressed{border-color:var(--accent-info);}
.abtn.r:active,.abtn.r.pressed{border-color:var(--accent-danger);}
.abtn-k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;position:relative;z-index:1;}
.abtn-l{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:1;}
.abtn.g .abtn-k{color:var(--accent-live);}
.abtn.a .abtn-k{color:var(--accent-warn);}
.abtn.b .abtn-k{color:var(--accent-info);}
.abtn.r .abtn-k,.abtn.r .abtn-l{color:var(--accent-danger);}
.bar-sep{width:1px;height:36px;background:var(--border-subtle);flex-shrink:0;}
.q-badge{flex:0;white-space:nowrap;padding:0 var(--space-5);display:flex;flex-direction:column;align-items:center;gap:1px;}
.q-badge .ql{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);letter-spacing:.1em;}
.q-badge .qv{font-family:var(--font-mono);font-size:14px;color:var(--text-strong);}

/* ═══════════════════════════════════════════
   ACTOR ONBOARDING (light theme)
═══════════════════════════════════════════ */
.ob-nav{background:var(--light-surface-1);border-bottom:1px solid var(--light-border);padding:0 32px;height:52px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.ob-logo{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:3px;color:var(--light-text);}
.ob-logo .io{color:var(--light-accent);}
.ob-back{font-size:var(--fs-meta);color:var(--light-text-muted);background:none;border:none;display:flex;align-items:center;gap:var(--space-1);}
.ob-back:hover{color:var(--light-text);}

/* stepper */
.ob-stepper{background:var(--light-surface-1);border-bottom:1px solid var(--light-border);padding:var(--space-7) 32px;display:flex;align-items:center;gap:0;flex-shrink:0;overflow-x:auto;}
.ob-step{display:flex;align-items:center;gap:0;flex-shrink:0;}
.ob-step-dot{width:26px;height:26px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;transition:all .2s;flex-shrink:0;}
.ob-step-dot.done{background:var(--light-accent);color:var(--white);}
.ob-step-dot.active{background:var(--light-text);color:var(--white);}
.ob-step-dot.pending{background:var(--light-surface-2);color:var(--light-text-muted);border:1px solid var(--light-border);}
.ob-step-label{font-size:var(--fs-meta);font-weight:500;margin-left:var(--space-3);white-space:nowrap;}
.ob-step-label.active{color:var(--light-text);}
.ob-step-label.done{color:var(--light-accent);}
.ob-step-label.pending{color:var(--light-text-muted);}
.ob-connector{height:1px;width:24px;background:var(--light-border);flex-shrink:0;margin:0 var(--space-1);}
.ob-connector.done{background:var(--light-accent);}

/* ob body */
.ob-body{flex:1;overflow-y:auto;padding:32px;}
.ob-section{max-width:640px;margin:0 auto;}
.ob-title{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:.03em;color:var(--light-text);margin-bottom:var(--space-1);}
.ob-subtitle{font-size:14px;color:var(--light-text-muted);margin-bottom:28px;line-height:1.6;}
.ob-field{margin-bottom:18px;}
.ob-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--light-text-muted);display:block;margin-bottom:var(--space-3);font-weight:500;}
.ob-input{width:100%;background:var(--light-surface-1);border:1.5px solid var(--light-border);border-radius:var(--radius-8);padding:11px var(--space-7);font-size:var(--fs-ui);color:var(--light-text);outline:none;font-family:var(--font-body);transition:border-color var(--motion-fade);}
.ob-input:focus{border-color:var(--light-accent);}
.ob-input-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
.ob-select{width:100%;background:var(--light-surface-1);border:1.5px solid var(--light-border);border-radius:var(--radius-8);padding:11px var(--space-7);font-size:var(--fs-ui);color:var(--light-text);outline:none;font-family:var(--font-body);transition:border-color var(--motion-fade);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7268' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.ob-select:focus{border-color:var(--light-accent);}
.ob-err{font-size:var(--fs-meta);color:var(--light-danger);margin-top:var(--space-1);}
.ob-hint{font-size:var(--fs-meta);color:var(--light-text-muted);margin-top:var(--space-1);line-height:1.5;}
/* social login */
.social-btns{display:flex;gap:var(--space-5);margin-bottom:20px;}
.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--light-surface-1);border:1.5px solid var(--light-border);border-radius:var(--radius-9);padding:11px;font-size:13px;font-weight:500;color:var(--light-text);transition:all .12s;}
.social-btn:hover{border-color:var(--light-border-strong);background:var(--light-surface-0);}
.social-btn svg{flex-shrink:0;}
.ob-divider{display:flex;align-items:center;gap:var(--space-6);margin-bottom:20px;}
.ob-divider::before,.ob-divider::after{content:'';flex:1;height:1px;background:var(--light-border);}
.ob-divider span{font-size:var(--fs-meta);color:var(--light-text-muted);}
/* equipment cards */
.equipment-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-3);}
.eq-card{background:var(--light-surface-1);border:2px solid var(--light-border);border-radius:var(--radius-10);padding:18px;cursor:pointer;transition:all var(--motion-fade);position:relative;}
.eq-card:hover{border-color:var(--light-border-strong);}
.eq-card.selected{border-color:var(--light-accent);background:var(--light-accent-dim);}
.eq-card.selected::after{content:'✓';position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--light-accent);color:var(--white);border-radius:var(--radius-round);font-size:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);}
.eq-icon{font-size:28px;margin-bottom:var(--space-5);}
.eq-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.04em;margin-bottom:var(--space-1);color:var(--light-text);}
.eq-desc{font-size:var(--fs-meta);color:var(--light-text-muted);line-height:1.55;margin-bottom:var(--space-5);}
.eq-price{font-family:var(--font-mono);font-size:11px;}
.eq-price.premium{color:var(--light-accent);}
.eq-price.standard{color:var(--light-warn);}
/* mount guide */
.mount-guide{background:var(--light-surface-0);border:1px solid var(--light-border);border-radius:var(--radius-10);padding:18px;margin-bottom:18px;}
.mount-guide-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;margin-bottom:var(--space-1);color:var(--light-text);}
.mount-guide-sub{font-size:var(--fs-meta);color:var(--light-text-muted);margin-bottom:var(--space-7);}
.mount-steps{display:flex;flex-direction:column;gap:var(--space-4);}
.mount-step{display:flex;gap:var(--space-5);align-items:flex-start;}
.mount-step-n{width:22px;height:22px;border-radius:var(--radius-round);background:var(--light-text);color:var(--white);font-size:10px;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.mount-step-body{flex:1;font-size:var(--fs-meta);color:var(--light-text);line-height:1.55;}
.mount-step-body strong{font-weight:600;}
/* price picker */
.price-picker{background:var(--light-surface-1);border:1.5px solid var(--light-border);border-radius:var(--radius-10);padding:18px;}
.price-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);}
.price-picker-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--light-text);}
.currency-selector{display:flex;gap:var(--space-1);}
.cur-btn{background:var(--light-surface-2);border:1px solid var(--light-border);border-radius:var(--radius-5);padding:var(--space-1) var(--space-5);font-family:var(--font-mono);font-size:10px;color:var(--light-text-muted);transition:all var(--motion-hover);}
.cur-btn.active{background:var(--light-text);color:var(--white);border-color:var(--light-text);}
.price-slider-wrap{margin-bottom:var(--space-6);}
.price-slider-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--light-text-muted);margin-bottom:var(--space-3);}
.price-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--radius-2);background:linear-gradient(to right, var(--light-accent) 0%, var(--light-accent) var(--pct,40%), var(--light-border) var(--pct,40%), var(--light-border) 100%);outline:none;}
.price-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:var(--radius-round);background:var(--light-text);border:3px solid var(--white);box-shadow:var(--shadow-thumb);cursor:pointer;}
.price-display{text-align:center;font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--light-text);}
.price-display span{font-size:16px;color:var(--light-text-muted);}
.price-note{font-size:var(--fs-meta);color:var(--light-text-muted);text-align:center;margin-top:var(--space-1);}
/* bank input */
.bank-type-tabs{display:flex;gap:var(--space-3);margin-bottom:var(--space-8);}
.bank-tab{flex:1;background:var(--light-surface-2);border:1.5px solid var(--light-border);border-radius:var(--radius-7);padding:9px;font-size:var(--fs-meta);font-weight:500;color:var(--light-text-muted);transition:all var(--motion-hover);}
.bank-tab.active{background:var(--light-surface-1);border-color:var(--light-text);color:var(--light-text);}
/* T&C */
.tc-frame{display:block;width:100%;height:340px;border:1px solid var(--light-border);border-radius:var(--radius-8);background:var(--surface-0);margin-bottom:var(--space-5);}
.check-row{display:flex;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-5);}
.check-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;accent-color:var(--light-accent);flex-shrink:0;}
.check-row label{font-size:var(--fs-meta);color:var(--light-text);line-height:1.5;cursor:pointer;}
/* test stream */
.stream-test{background:var(--light-surface-0);border:1px solid var(--light-border);border-radius:var(--radius-10);overflow:hidden;margin-bottom:18px;}
.stream-test-header{padding:var(--space-7) var(--space-8);border-bottom:1px solid var(--light-border);display:flex;align-items:center;justify-content:space-between;}
.stream-test-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--light-text);}
.stream-test-status{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;}
.stream-test-status.ok{color:var(--light-accent);}
.stream-test-status.wait{color:var(--light-warn);}
.stream-test-status.err{color:var(--light-danger);}
.stream-test-body{padding:var(--space-8);}
.stream-test-check{display:flex;align-items:center;gap:var(--space-5);padding:7px 0;border-bottom:1px solid var(--light-border);font-size:var(--fs-meta);}
.stream-test-check:last-child{border-bottom:none;}
.stc-icon{width:18px;height:18px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta);flex-shrink:0;}
.stc-icon.ok{background:var(--light-ok-bg);color:var(--light-ok-fg);}
.stc-icon.wait{background:var(--light-wait-bg);color:var(--light-wait-fg);}
.stc-icon.err{background:var(--light-err-bg);color:var(--light-err-fg);}
.stc-icon.spin{background:var(--light-spin-bg);color:var(--light-spin-fg);animation:sp .8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
/* ob buttons */
.ob-primary{width:100%;background:var(--light-text);color:var(--white);border:none;border-radius:var(--radius-9);padding:var(--space-7);font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.14em;transition:all var(--motion-hover);}
.ob-primary:hover{background:var(--light-btn-hover);}
.ob-primary:disabled{opacity:.35;cursor:not-allowed;}
.ob-secondary{width:100%;background:transparent;border:1.5px solid var(--light-border);border-radius:var(--radius-9);padding:var(--space-5);font-size:var(--fs-meta);color:var(--light-text-muted);transition:all var(--motion-hover);margin-top:var(--space-4);}
.ob-secondary:hover{border-color:var(--light-border-strong);color:var(--light-text);}
.ob-success{text-align:center;padding:32px;}
.ob-success-icon{font-size:56px;margin-bottom:var(--space-8);}
.ob-success-title{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:.04em;color:var(--light-text);margin-bottom:var(--space-4);}
.ob-success-body{font-size:14px;color:var(--light-text-muted);line-height:1.7;max-width:440px;margin:0 auto 24px;}

/* ── block 2 of 4 (was inline) ─────────────────────────────── */
.acs-icon.ok   { background:var(--accent-live) !important; border-color:var(--accent-live) !important; color:var(--black) !important; }
.acs-icon.err  { background:var(--accent-danger)   !important; border-color:var(--accent-danger)   !important; color:var(--white) !important; }
.acs-icon.spin { border-color:var(--accent-warn) !important; color:var(--accent-warn) !important; animation:sp .8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.actor-chk-item:hover { background:var(--fg-a03); }
.actor-chk-item.done .actor-chk-circle { background:var(--accent-live) !important; border-color:var(--accent-live) !important; color:var(--black) !important; }
#actor-eq-insta.selected, #actor-eq-phone.selected { border-color:var(--accent-live-a5) !important; }

/* ── block 3 of 4 (was inline) ─────────────────────────────── */
#adk-U.active,#adk-D.active,#adk-L.active,#adk-R.active{background:var(--accent-live-dim) !important;border-color:var(--accent-live) !important;color:var(--accent-live) !important;box-shadow:0 0 14px var(--accent-live-glow);}
#adk-run.active{border-color:var(--accent-live) !important;background:var(--accent-live-dim) !important;color:var(--accent-live) !important;}
#adk-sneak.active{border-color:var(--accent-warn) !important;background:var(--accent-warn-dim) !important;color:var(--accent-warn) !important;}
#s-actor-hud{height:100%;max-height:100dvh;}

/* Duration picker buttons */
.platform-key-input{width:100%;background:var(--surface-0);border:1px solid var(--border-strong);border-radius:var(--radius-5);padding:7px var(--space-5);font-family:var(--font-mono);font-size:var(--fs-ui);color:var(--text-strong);outline:none;transition:border-color var(--motion-fade);}
.platform-key-input:focus{border-color:var(--accent-live-a4);}
.platform-row{background:var(--surface-0);border:1px solid var(--border-subtle);border-radius:var(--radius-6);padding:var(--space-5) var(--space-6);}

/* ── WATCH PAGE — mobile-first YouTube layout ── */
.watch-layout{width:100%;height:100%;display:flex;flex-direction:column;background:var(--surface-0);overflow:hidden;}
.watch-topbar{background:var(--surface-1);border-bottom:1px solid var(--border-subtle);padding:0 var(--space-6);height:44px;display:flex;align-items:center;gap:var(--space-5);flex-shrink:0;}

/* Video — full width, 16:9, sits at top */
.watch-stream{position:relative;background:var(--black);width:100%;flex-shrink:0;}
.watch-stream::before{content:'';display:block;padding-top:56.25%;} /* 16:9 */
.watch-stream iframe,.watch-stream>div{position:absolute;inset:0;width:100%;height:100%;border:none;}
.watch-stream iframe{display:block;}

/* Below video: actor strip + vote + tabs + panel */
.watch-below{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}

/* Actor info strip */
.watch-actor-strip{background:var(--surface-2);border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-5);flex-shrink:0;}
.was-name{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;}
.was-city{font-size:var(--fs-meta);color:var(--text-muted);}
.was-stats{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);text-align:right;}

/* Tab bar */
.watch-tabs{display:flex;border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--surface-1);}
.watch-tab{flex:1;padding:9px var(--space-1);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--text-muted);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;transition:all var(--motion-hover);}
.watch-tab:hover{color:var(--text-strong);}
.watch-tab.active{color:var(--accent-live);border-bottom-color:var(--accent-live);}

/* Tab panels */
.watch-panel{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0;}
.watch-panel.active{display:flex;}

/* On desktop — show chat sidebar next to video */
@media (min-width:768px){
  .watch-layout{flex-direction:column;}
  .watch-desktop-row{display:flex;flex:1;overflow:hidden;min-height:0;}
  .watch-main-col{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
  /* (WP8.1) Reshaping Law: the rail clamps and gives way first; was a fixed 320px. */
  .watch-sidebar-col{flex:0 1 clamp(280px, 22vw, 380px);min-width:0;background:var(--surface-1);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow:hidden;}
}
@media (max-width:767px){
  .watch-sidebar-col{display:none;}
  .watch-desktop-row{display:contents;}
  .watch-main-col{display:contents;}
}

/* chat */
.wchat-msgs{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:3px;}
.wchat-msgs::-webkit-scrollbar{width:2px;}
.wchat-msgs::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-1);}
.wchat-msg{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--fs-meta);}
.wchat-badge{font-size:var(--fs-micro);padding:1px var(--space-2);border-radius:var(--radius-3);flex-shrink:0;margin-top:2px;font-family:var(--font-mono);}
.wbadge-ctrl{background:var(--accent-live-a15);color:var(--accent-live);}
.wbadge-spec{background:var(--fg-a05);color:var(--text-muted);}
.wbadge-tip{background:var(--accent-warn-a15);color:var(--accent-warn);}
.wbadge-sys{background:var(--fg-a04);color:var(--text-muted);}
.wbadge-vote{background:var(--accent-vote-dim);color:var(--accent-vote);}
.wbadge-mission{background:var(--accent-info-a15);color:var(--accent-info);}
.wchat-nick{font-weight:500;color:var(--text-strong);white-space:nowrap;}
.wchat-text{color:var(--text-secondary);flex:1;word-break:break-word;line-height:1.4;}
.wchat-input-wrap{padding:var(--space-4);border-top:1px solid var(--border-subtle);flex-shrink:0;}
.wchat-nick-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-2);}
.wchat-nick-in{flex:1;background:var(--fg-a04);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-2) var(--space-4);font-size:10px;color:var(--text-strong);font-family:var(--font-mono);outline:none;}
.wchat-row{display:flex;gap:var(--space-2);}
.wchat-row input{flex:1;background:var(--fg-a04);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:var(--space-3) var(--space-4);font-size:var(--fs-ui);color:var(--text-strong);font-family:var(--font-body);outline:none;}
.wchat-row input:focus{border-color:var(--accent-live-a3);}
.wchat-send{background:var(--accent-live-dim);border:1px solid var(--accent-live-glow);border-radius:var(--radius-5);padding:var(--space-3) var(--space-5);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-live);}

/* vote in watch */
.wvote-wrap{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-subtle);flex-shrink:0;display:none;background:var(--accent-info-a04);}
.wvote-wrap.show{display:block;}
.wvote-q{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:var(--space-1);}
.wvote-timer{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-warn);margin-bottom:var(--space-3);}
.wvote-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);}
.wvote-opt{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:7px 9px;cursor:pointer;transition:all var(--motion-hover);font-size:var(--fs-meta);}
.wvote-opt:hover{border-color:var(--accent-info-a3);}
.wvote-opt.voted{border-color:var(--accent-live-a3);background:var(--accent-live-dim);cursor:default;}
.wvote-opt-lbl{font-weight:500;margin-bottom:3px;}
.wvote-bar-w{height:2px;background:var(--fg-a05);border-radius:var(--radius-1);overflow:hidden;margin-bottom:2px;}
.wvote-bar{height:100%;background:var(--accent-info);border-radius:var(--radius-1);transition:width var(--motion-slide);}
.wvote-opt.voted .wvote-bar{background:var(--accent-live);}
.wvote-meta{display:flex;justify-content:space-between;font-size:var(--fs-micro);color:var(--text-muted);font-family:var(--font-mono);}

/* tip panel */
.wtip-panel{padding:var(--space-6);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-5);}
.wtip-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);}
.wtip-preset{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:7px 2px;text-align:center;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);transition:all var(--motion-hover);}
.wtip-preset:hover,.wtip-preset.sel{border-color:var(--accent-warn-a4);color:var(--accent-warn);background:var(--accent-warn-dim);}
.wtip-custom-row{display:flex;align-items:center;gap:var(--space-3);background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:7px var(--space-5);}
.wtip-custom-row span{font-size:var(--fs-meta);color:var(--text-muted);}
.wtip-custom-row input{flex:1;background:transparent;border:none;font-family:var(--font-mono);font-size:var(--fs-ui);color:var(--text-strong);outline:none;}
.wtip-msg{width:100%;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-5);padding:7px var(--space-5);font-size:var(--fs-meta);color:var(--text-strong);font-family:var(--font-body);outline:none;}
.wtip-btn{width:100%;background:var(--accent-warn-dim);border:1px solid var(--accent-warn-a3);border-radius:var(--radius-7);padding:11px;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--accent-warn);transition:all var(--motion-hover);}
.wtip-btn:hover{background:var(--accent-warn-a2);}

/* actions */
.wact-panel{padding:var(--space-5);overflow-y:auto;}
.wact-group{margin-bottom:var(--space-6);}
.wact-group-title{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--space-3);}
.wact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);}
.wact-btn{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-6);padding:var(--space-4) var(--space-3);cursor:pointer;transition:all var(--motion-hover);text-align:center;}
.wact-btn:hover{border-color:var(--accent-live-a25);}
.wact-btn:active{transform:scale(.96);}
.wact-icon{font-size:16px;display:block;margin-bottom:2px;}
.wact-name{font-size:var(--fs-meta);font-weight:500;display:block;}
.wact-price{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent-warn);display:block;margin-top:1px;}

/* queue panel */
.wqueue-panel{padding:var(--space-6);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-4);}
.wqueue-ctrl{background:var(--accent-live-dim);border:1px solid var(--accent-live-glow);border-radius:var(--radius-7);padding:var(--space-5) var(--space-6);}
.wqc-lbl{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--accent-live-a5);margin-bottom:3px;}
.wqc-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--accent-live);}
.wqueue-join{width:100%;background:var(--accent-live-dim);border:1px solid var(--accent-live-glow);border-radius:var(--radius-7);padding:11px;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--accent-live);transition:all var(--motion-hover);}
.wqueue-join:hover{background:var(--accent-live-a2);}

/* control strip */
.watch-ctrl-strip{background:var(--surface-2);border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-5);flex-shrink:0;}

/* actor selector */
.watch-actor-selector{padding:var(--space-6);overflow-y:auto;flex:1;}

/* ── block 4 of 4 (was inline) ─────────────────────────────── */
#s-admin{background:var(--admin-surface-0);color:var(--admin-text);font-family:var(--font-mono-plain);overflow:hidden;flex-direction:column;}
.adm-topbar{background:var(--admin-surface-2);border-bottom:1px solid var(--admin-border);padding:0 var(--space-8);height:46px;display:flex;align-items:center;gap:var(--space-7);flex-shrink:0;}
.adm-logo{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:2px;color:var(--text-strong);}
.adm-logo span{color:var(--accent-live);}
.adm-title{font-size:10px;letter-spacing:.2em;color:var(--text-dim);border-left:1px solid var(--admin-border);padding-left:var(--space-7);}
.adm-conn{display:flex;align-items:center;gap:var(--space-3);margin-left:auto;font-size:var(--fs-meta);color:var(--text-dim);}
.adm-conn-dot{width:6px;height:6px;border-radius:var(--radius-round);background:var(--accent-warn);}
#adm-conn-status{font-size:var(--fs-micro);letter-spacing:.06em;}
.adm-ts{font-size:var(--fs-meta);color:var(--admin-border);margin-left:var(--space-4);}
.adm-body{flex:1;display:flex;overflow:hidden;min-height:0;}
/* left sidebar nav */
/* (WP8.2) Reshaping Law: was a fixed 160px. */
.adm-nav{flex:0 1 clamp(140px, 12vw, 200px);min-width:0;background:var(--admin-surface-1);border-right:1px solid var(--admin-border);display:flex;flex-direction:column;padding:var(--space-6) 0;}
.adm-nav-item{padding:9px var(--space-8);font-size:10px;letter-spacing:.1em;color:var(--text-dim);cursor:pointer;border-left:2px solid transparent;transition:all var(--motion-hover);}
.adm-nav-item:hover{color:var(--admin-text);background:var(--fg-a02);}
.adm-nav-item.active{color:var(--accent-live);border-left-color:var(--accent-live);background:var(--accent-live-a04);}
.adm-nav-sep{height:1px;background:var(--admin-border);margin:var(--space-4) 0;}
.adm-nav-danger{padding:9px var(--space-8);font-size:10px;letter-spacing:.1em;color:var(--admin-danger-dim);cursor:pointer;border-left:2px solid transparent;transition:all var(--motion-hover);}
.adm-nav-danger:hover{color:var(--accent-danger);background:var(--accent-danger-a05);border-left-color:var(--accent-danger);}
/* main content */
.adm-main{flex:1 1 0;overflow-y:auto;padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-7);min-width:0;}
.adm-main::-webkit-scrollbar{width:3px;}
.adm-main::-webkit-scrollbar-thumb{background:var(--admin-border);border-radius:var(--radius-2);}
/* panels */
.adm-panel{display:none;}
.adm-panel.active{display:block;}
/* stat counters row */
.adm-counters{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4);margin-bottom:var(--space-1);}
.adm-counter{background:var(--admin-surface-2);border:1px solid var(--admin-border);border-radius:var(--radius-6);padding:var(--space-5) var(--space-6);}
.adm-counter-v{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text-strong);line-height:1;}
.adm-counter-l{font-size:var(--fs-micro);letter-spacing:.1em;color:var(--text-dim);margin-top:3px;}
.adm-counter.hi .adm-counter-v{color:var(--accent-live);}
.adm-counter.warn .adm-counter-v{color:var(--accent-warn);}
.adm-counter.red .adm-counter-v{color:var(--accent-danger);}
/* section header */
.adm-section-head{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-5);}
.adm-section-title{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;}
.adm-section-line{flex:1;height:1px;background:var(--admin-border);}
/* actor cards grid */
.adm-actor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);}
.adm-actor-card{background:var(--admin-surface-2);border:1px solid var(--admin-border);border-radius:var(--radius-8);padding:var(--space-6);transition:border-color var(--motion-fade);}
.adm-actor-card.adm-live{border-color:var(--accent-live-a2);}
.adm-actor-card.adm-offline{opacity:.55;}
.adm-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-5);}
.adm-card-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-strong);letter-spacing:.04em;}
.adm-card-city{font-size:var(--fs-meta);color:var(--text-dim);margin-top:1px;}
.adm-card-status{font-size:var(--fs-micro);letter-spacing:.1em;padding:3px 7px;border-radius:var(--radius-3);}
.adm-status-live{background:var(--accent-live-a1);color:var(--accent-live);border:1px solid var(--accent-live-a2);}
.adm-status-off{background:var(--fg-a03);color:var(--text-dim);border:1px solid var(--admin-border);}
.adm-card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1);margin-bottom:var(--space-5);}
.adm-stat{background:var(--admin-surface-0);border:1px solid var(--admin-border-tile);border-radius:var(--radius-4);padding:var(--space-2) var(--space-1);text-align:center;}
.adm-stat-v{display:block;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--admin-text);line-height:1;}
.adm-stat-l{display:block;font-size:var(--fs-meta);color:var(--text-dim);margin-top:1px;}
.adm-controller-badge{font-size:var(--fs-micro);color:var(--accent-live);background:var(--accent-live-a07);border:1px solid var(--accent-live-a15);border-radius:var(--radius-4);padding:3px var(--space-4);margin-bottom:var(--space-4);letter-spacing:.06em;}
.adm-card-actions{display:flex;flex-wrap:wrap;gap:var(--space-1);}
/* buttons */
.adm-btn{font-family:var(--font-mono-plain);font-size:var(--fs-micro);letter-spacing:.08em;padding:var(--space-1) var(--space-4);border-radius:var(--radius-4);cursor:pointer;border:1px solid;transition:all var(--motion-hover);}
.adm-btn:disabled{opacity:.3;cursor:not-allowed;}
.adm-btn-red{background:var(--accent-danger-a08);border-color:var(--accent-danger-a2);color:var(--accent-danger);}
.adm-btn-red:hover:not(:disabled){background:var(--accent-danger-a18);}
.adm-btn-warn{background:var(--accent-warn-a08);border-color:var(--accent-warn-a2);color:var(--accent-warn);}
.adm-btn-warn:hover:not(:disabled){background:var(--accent-warn-a18);}
.adm-btn-green{background:var(--accent-live-a08);border-color:var(--accent-live-a2);color:var(--accent-live);}
.adm-btn-green:hover:not(:disabled){background:var(--accent-live-a18);}
.adm-btn-blue{background:var(--accent-info-a08);border-color:var(--accent-info-a2);color:var(--accent-info);}
.adm-btn-blue:hover:not(:disabled){background:var(--accent-info-a18);}
.adm-btn-muted{background:var(--fg-a03);border-color:var(--admin-border);color:var(--text-dim);}
.adm-btn-muted:hover:not(:disabled){color:var(--admin-text);border-color:var(--text-dim);}
.adm-btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--fs-meta);}
/* tables */
.adm-table{width:100%;border-collapse:collapse;font-size:var(--fs-meta);}
.adm-table th{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--text-dim);padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--admin-border);}
.adm-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--admin-border-faint);vertical-align:middle;}
.adm-table tr:hover td{background:var(--fg-a015);}
.adm-badge-slot{color:var(--accent-live);}
.adm-badge-tip{color:var(--accent-warn);}
.adm-badge-action{color:var(--accent-info);}
.adm-badge-scenario{color:var(--accent-vote);}
.adm-green{color:var(--accent-live);}
.adm-amber{color:var(--accent-warn);}
.adm-red{color:var(--accent-danger);}
.adm-muted{color:var(--text-dim);}
/* log */
.adm-log-box{background:var(--admin-surface-0);border:1px solid var(--admin-border);border-radius:var(--radius-6);flex:1 1 auto;min-height:160px;overflow-y:auto;padding:var(--space-4);font-size:var(--fs-meta);}
.adm-log-line{color:var(--text-dim);line-height:1.7;border-bottom:1px solid var(--admin-surface-1);padding-bottom:2px;}
.adm-log-line:first-child{color:var(--admin-text);}
/* (WP17, ADR 0029) no YouTube channel yet: say so, instead of an empty frame */
.yt-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-6);text-align:center;background:var(--surface-1);font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--text-muted);letter-spacing:.06em;z-index:2;}
.yt-soon[hidden]{display:none;}
/* (WP17) queue watchdog */
.adm-watchdog{background:var(--admin-surface-2);border:1px solid var(--admin-border);border-radius:var(--radius-8);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6);font-family:var(--font-mono-plain);font-size:var(--fs-meta);}
.adm-wd-status{font-weight:700;letter-spacing:.06em;padding:var(--space-2) var(--space-4);border-radius:var(--radius-5);display:inline-flex;align-items:center;gap:var(--space-2);}
.adm-wd-ok{color:var(--accent-live);background:var(--accent-live-a1);}
.adm-wd-stale{color:var(--accent-warn);background:var(--accent-warn-a1);}
.adm-wd-alert{color:var(--accent-danger);background:var(--accent-danger-a2);}
.adm-wd-meta{color:var(--text-dim);margin-top:var(--space-3);}
.adm-wd-list{margin-top:var(--space-4);display:flex;flex-direction:column;gap:2px;}
.adm-wd-line{color:var(--admin-text);overflow-wrap:anywhere;}
.adm-wd-violation{color:var(--accent-danger);}
.adm-wd-heal{color:var(--accent-warn);}
.adm-wd-cleared,.adm-wd-recent .adm-wd-line{color:var(--text-dim);}
/* config form */
.adm-cfg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5);margin-bottom:var(--space-6);}
.adm-cfg-field{display:flex;flex-direction:column;gap:var(--space-1);}
.adm-cfg-label{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-dim);}
.adm-cfg-input{background:var(--admin-surface-2);border:1px solid var(--admin-border);border-radius:var(--radius-5);padding:7px var(--space-5);font-family:var(--font-mono-plain);font-size:var(--fs-ui);color:var(--admin-text);outline:none;width:100%;}
.adm-cfg-input:focus{border-color:var(--accent-live-a3);}
/* right sidebar — log panel */
/* (WP8.2) Reshaping Law: was a fixed 220px. */
.adm-sidebar{flex:0 1 clamp(200px, 16vw, 280px);min-width:0;background:var(--admin-surface-1);border-left:1px solid var(--admin-border);display:flex;flex-direction:column;padding:var(--space-6);overflow:hidden;}
.adm-sidebar-title{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--text-dim);margin-bottom:var(--space-4);}

/* ── Utility classes extracted from inline styles ── */
.adm-avatar-lg{width:18px;height:18px;border-radius:var(--radius-round);border:1.5px solid var(--border-strong);font-size:var(--fs-meta);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--motion-fade);}
.adm-meta-sm{font-size:var(--fs-meta);color:var(--text-muted);margin-top:1px;}
.adm-list-row{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background var(--motion-hover);}
.adm-row-gap{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-3);}
.text-sm-med{font-size:var(--fs-meta);font-weight:500;}
.adm-input-row{display:flex;align-items:center;gap:var(--space-5);background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-6);padding:9px var(--space-6);}
.adm-avatar-sm{width:16px;height:16px;border-radius:var(--radius-round);border:1.5px solid var(--border-strong);font-size:var(--fs-meta);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mono-8-muted{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);}
.text-9-muted-mt{font-size:var(--fs-meta);color:var(--text-muted);margin-top:3px;}
.mono-7-muted{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);}
.mono-label-mb{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted);margin-bottom:var(--space-5);}
.adm-card{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-8);overflow:hidden;}
.ml-auto-flex{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);}
.dot-green{width:7px;height:7px;border-radius:var(--radius-round);background:var(--accent-live);}
.mono-9-green{font-size:var(--fs-micro);color:var(--accent-live);font-family:var(--font-mono);}
.text-11-muted{font-size:var(--fs-meta);color:var(--text-muted);}
.flex-col-gap6{display:flex;flex-direction:column;gap:var(--space-3);}
.mono-9-muted{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);}
.mono-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted);}

/* ═══════════════════════════════════════════
   ACCOUNT / WALLET (WP1)
═══════════════════════════════════════════ */
.acc-wrap{max-width:560px;margin:0 auto;padding:32px 20px 60px;}
.acc-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text-strong);margin-bottom:var(--space-1);}
.acc-sub{font-size:13px;color:var(--text-muted);margin-bottom:26px;}
.acc-card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-10);padding:20px;margin-bottom:var(--space-8);}
.acc-bal-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--text-muted);margin-bottom:var(--space-3);}
.acc-bal{font-family:var(--font-display);font-size:40px;font-weight:700;color:var(--accent-live);line-height:1;}
.acc-bal-note{font-size:var(--fs-meta);color:var(--text-muted);margin-top:var(--space-4);}
.acc-topups{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-8);}
.acc-topup{flex:1;min-width:88px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-8);
  padding:var(--space-6) var(--space-4);color:var(--text-strong);font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:all .12s;}
.acc-topup:hover{border-color:var(--accent-live);color:var(--accent-live);}
.acc-topup:disabled{opacity:.5;cursor:not-allowed;}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);
  padding:var(--space-5) 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-meta);}
.acc-row:last-child{border-bottom:none;}
.acc-row-l{color:var(--text-strong);}
.acc-row-t{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);}
.acc-amt{font-family:var(--font-mono);font-size:13px;white-space:nowrap;}
.acc-amt.pos{color:var(--accent-live);}
.acc-amt.neg{color:var(--text-strong);}
.acc-empty{color:var(--text-muted);font-size:var(--fs-meta);padding:var(--space-8) 0;text-align:center;}
.acc-input{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-8);
  padding:var(--space-6) var(--space-7);color:var(--text-strong);font-family:var(--font-body);font-size:var(--fs-ui);margin-bottom:var(--space-5);}
.acc-input:focus{outline:none;border-color:var(--accent-live);}
.acc-btn{width:100%;background:var(--accent-live);color:var(--on-accent-live);border:none;border-radius:var(--radius-8);
  padding:13px;font-family:var(--font-mono);font-size:var(--fs-ui);letter-spacing:.08em;cursor:pointer;font-weight:600;}
.acc-btn:disabled{opacity:.5;cursor:not-allowed;}
.acc-btn-ghost{width:100%;background:transparent;color:var(--text-muted);border:1px solid var(--border-strong);
  border-radius:var(--radius-8);padding:11px;font-family:var(--font-mono);font-size:var(--fs-ui);cursor:pointer;margin-top:var(--space-4);}
.acc-or{text-align:center;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;margin:var(--space-8) 0;}
.acc-msg{font-size:var(--fs-meta);padding:var(--space-5) var(--space-6);border-radius:var(--radius-6);margin-bottom:var(--space-6);display:none;}
.acc-msg.ok{background:var(--accent-live-dim);border:1px solid var(--accent-live);color:var(--accent-live);display:block;}
.acc-msg.err{background:var(--accent-danger-dim);border:1px solid var(--accent-danger);color:var(--accent-danger);display:block;}
.acc-slot{background:var(--accent-live-dim);border:1px solid var(--accent-live);border-radius:var(--radius-8);padding:var(--space-6) var(--space-7);
  font-size:var(--fs-meta);color:var(--accent-live);margin-bottom:var(--space-8);}

/* ═══════════════════════════════════════════
   WP7.1 — LEGIBILITY FLOORS
   Floors only. No hue, no layout, no spacing rhythm changes. Everything here
   either raises a size, raises an opacity, or stops something clipping.
═══════════════════════════════════════════ */

/* Tap targets. min-height rather than height, so a control grows with its
   content instead of clipping it — the failure mode this codebase is prone to,
   with 54 fixed pixel heights meeting 30 overflow:hidden containers.

   44px is a *touch* floor (Apple HIG / WCAG 2.5.5). Applying it to a
   mouse-driven operator console turns dense chip rows into stacks, so the base
   rule is the pointer-agnostic WCAG 2.5.8 floor and coarse pointers get the
   full 44 below. Inputs and primary CTAs take 44 everywhere. */
input, select, textarea,
.primary-btn, .ob-primary, .nav-cta, .take-btn, .wqueue-join, .wtip-btn {
  min-height:44px;
}
button, .ghost-btn, .wtip-preset, .tamt, .cm-tip, .sc-btn,
.q-chat-send, .adm-btn {
  min-height:32px;
}
@media (pointer:coarse) {
  button, .ghost-btn, .wtip-preset, .tamt, .cm-tip, .sc-btn,
  .q-chat-send, .adm-btn {
    min-height:44px;
  }
}

/* Controls that are badges rather than targets keep their footprint. */
.ac-badge, .ac-tier, .hp, .q-action-chip, .q-chip-key, .adm-stat,
.wact-price, .adm-conn, .adm-controller-badge {
  min-height:0;
}

/* Fixed heights that now carry larger text must be allowed to grow rather than
   clip. */
.land-nav { height:auto; min-height:52px; }
.q-topbar { height:auto; min-height:44px; }

/* Dense operator stat tiles: the sublabel is a label, not content, so it takes
   the micro floor. At --fs-meta the four-across row wrapped "22,40 zł unpaid"
   onto three lines and left the tiles ragged. */
.adm-stat-l { font-size:var(--fs-micro); }
.adm-stat-v { white-space:nowrap; }

/* line-height:1 clips Rajdhani's own glyph box — visible on Polish diacritics
   and on any descender. These carry numbers and short labels, so the extra
   couple of pixels change nothing but stop the trim. */
.adm-counter-v, .adm-stat-v, .handoff-count, .timer, .acc-bal { line-height:1.15; }
.hero h1 { line-height:1.2; }

/* The actor card's button group could not wrap, so a longer PLN price pushed it
   past the card edge where .actor-card's rounding clipped it. */
.ac-footer > div { min-width:0; }
.ac-footer > div:last-child { flex-wrap:wrap; justify-content:flex-end; }

/* "How it works" was repeat(3,1fr) at every width, so on a 390px phone each
   card got ~110px and the third one ran off the screen. Readable text made it
   obvious; it was already unreadable before. Mobile-first audience — stack. */
@media (max-width:700px) { .steps { grid-template-columns:1fr; } }

/* Inputs never below 16px: iOS zooms the viewport on focus otherwise, which
   silently breaks every mobile form. */
input, select, textarea { font-size:var(--fs-ui); }

/* The ≥1600px type scaling moved to styles/tokens.css with the rest of the type tokens (WP8.3). */

/* ── item 9: a centred column on large displays ──────────────────── */
/*
 * Presented as a candidate at the WP7.1 checkpoint and approved on
 * 2026-09-05. On a 24" display the admin console and the landing page were
 * huddled in the top-left with a third of the screen empty; this centres them
 * in a 1440px column. It is a composition change rather than a legibility one,
 * which is why it was the founder's call and not applied by default.
 *
 * Nothing below 1600px is touched.
 */
@media (min-width:1600px){
  #s-land .hero, #s-land .land-how, #s-land .actors-section{
    max-width:1440px; margin-left:auto; margin-right:auto; width:100%;
  }
  #s-land .land-nav{ padding-left:max(32px, calc((100vw - 1440px) / 2));
                     padding-right:max(32px, calc((100vw - 1440px) / 2)); }
  /* The admin half of item 9 moved to the WP8.2 block: the 1440px column is
     the admin's container at every width now, and it was missing width:100%,
     so a flex .adm-body shrank to its content and each sub-page came out a
     different width. Corrected 15 Sep 2026. */
}

/* ── live events overlay (WP7.4) ──────────────────────────────────── */
/*
 * Sits over the video on every screen that has one. Pointer-events are off
 * throughout: an announcement must never swallow a click meant for the
 * controls underneath — the viewer is steering a person and the panic button
 * is down there.
 *
 * Colours and type come from the existing tokens rather than new values;
 * ADR 0009 freezes the design, and a new surface is not a licence to invent.
 */
#event-overlay{
  position:fixed; inset:0; z-index:9500;
  pointer-events:none;
  display:flex; align-items:flex-start; justify-content:center;
}

.ev-card{
  pointer-events:none;
  position:absolute;
  border-radius:var(--radius-10);
  font-family:var(--font-display);
  letter-spacing:.02em;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  will-change:opacity, transform;
  max-width:min(92vw, 640px);
}
.ev-card.ev-in{ opacity:1; }

.ev-line{ font-weight:700; }
.ev-note{
  font-family:var(--font-body); font-weight:400;
  opacity:.88; margin-top:var(--space-1);
  overflow-wrap:anywhere;
}
.ev-amount{
  display:inline-block; margin-top:var(--space-3);
  font-family:var(--font-mono); color:var(--accent-live);
}

/* toast — a corner chip, for things that are merely true */
.ev-toast{
  top:14px; right:14px;
  transform:translateY(-8px);
  background:var(--surface-0-a9);
  border:1px solid var(--fg-a14);
  color:var(--text-strong);
  padding:9px 13px;
  font-size:var(--fs-meta);
}
.ev-toast.ev-in{ transform:translateY(0); }

/* banner — across the top, with a sound */
.ev-banner{
  top:0; left:50%;
  transform:translate(-50%,-10px);
  background:linear-gradient(180deg, var(--surface-0-a96), var(--surface-0-a82));
  border:1px solid var(--accent-live-a4);
  border-top:none;
  border-radius:0 0 var(--radius-12) var(--radius-12);
  color:var(--text-strong);
  padding:var(--space-6) 22px;
  font-size:var(--fs-body);
  text-align:center;
}
.ev-banner.ev-in{ transform:translate(-50%,0); }

/* takeover — six seconds across the middle, for the ones that paid for it */
.ev-takeover{
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.96);
  background:var(--surface-0-a93);
  border:1px solid var(--accent-live-a55);
  box-shadow:var(--shadow-takeover);
  color:var(--text-strong);
  padding:26px 34px;
  font-size:clamp(20px, 3.4vw, 34px);
  text-align:center;
}
.ev-takeover.ev-in{ transform:translate(-50%,-50%) scale(1); }
.ev-takeover .ev-note{ font-size:var(--fs-body); }

/* A slot ending is information, not celebration. */
.ev-type-slot_end{ border-color:var(--fg-a14); }

/* (WP18) compact — the queue screen's corner card: small, silent, never centred.
   It lives in #q-alerts, top right of the queue's video frame (the LIVE label has the
   top left). Outside that host it takes the overlay's top-right corner instead. */
/* `.q-stream > .q-alerts`, not `.q-alerts`: `.q-stream>div` stretches every child over the frame. */
.q-stream > .q-alerts{ position:absolute; inset:8px 10px auto auto; width:auto; height:auto; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-end; max-width:min(70%, 340px); }
.ev-compact{
  position:relative;
  background:var(--surface-0-a9);
  border:1px solid var(--accent-live-a4);
  color:var(--text-strong);
  padding:var(--space-3) var(--space-5);
  font-size:var(--fs-meta);
  letter-spacing:.01em;
  transform:translateY(-6px);
}
#event-overlay > .ev-compact{ position:absolute; top:14px; right:14px; max-width:min(70vw, 340px); }
.ev-compact.ev-in{ transform:translateY(0); }
.ev-compact .ev-line{ font-weight:600; }
.ev-compact .ev-note{ margin-top:0; }
.ev-compact .ev-amount{ margin-top:var(--space-1); }

@media (max-width:520px){
  .ev-toast{ left:10px; right:10px; }
  .ev-banner{ left:0; right:0; transform:translateY(-10px); border-radius:0 0 var(--radius-10) var(--radius-10); }
  .ev-banner.ev-in{ transform:translateY(0); }
}

/* ═══════════════════════════════════════════
   WP8.1 — CONTROLLER LAYOUT: THE RESHAPING LAW
═══════════════════════════════════════════ */
/*
 * The controller had `display:grid` and no template — since the first commit.
 * Every column was implicit `auto`, so the video panel, whose content is all
 * absolutely positioned, sized to nothing while the two key lists took the
 * screen: a 340px portrait strip between two 600px rails on the 24" display,
 * 140px at 1280. And `grid-column:1/-1` on the top and bottom bars meant
 * "column 1", because an implicit grid has no -1 to count back from.
 *
 * The rule now, for every multi-column screen (ADR 0014): the primary region
 * is `flex:1 1 0` with a floor; the rails are `flex:0 1 clamp()` and give way
 * first; below the screen's breakpoint the rails collapse — drawer, tabs or
 * stack — before the primary region loses a pixel. Here the primary region is
 * the video, the breakpoint is 1400px, and the rails take 20vw each so the
 * video holds 60% of the viewport from 1400 up.
 *
 * Nothing in here is a new colour, a new type size or a new component: the
 * rail tabs are the watch page's tab bar, and the ownership pulse is --accent-live
 * and --accent-live-glow at the sizes they already come in.
 */
#s-ctrl .layout{ flex-direction:column; width:100%; height:100%; }
.ctrl-main{ flex:1 1 0; min-height:0; display:flex; position:relative; }
.stream-panel{ flex:1 1 0; min-width:560px; }
.left-panel,.right-panel{ flex:0 1 clamp(260px, 20vw, 400px); min-width:0; }

/* Furniture that exists only below the breakpoint. */
.rail-tabs{ display:none; }
.drawer-handle{ display:none; }

/* Item 4 — a camera the actor does not have leaves the grid entirely. */
.cam-grid .cbtn[hidden]{ display:none; }

/* Item 5 — ownership. The frame pulses and the clock is the loudest thing on
   the screen for exactly as long as the slot is live; the class rides on the
   same state change that starts and stops the clock. */
.layout.owned .stream-panel::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 2px var(--accent-live), inset 0 0 22px var(--accent-live-glow);
  animation:own-pulse 2.4s ease-in-out infinite;
}
@keyframes own-pulse{
  0%,100%{ box-shadow:inset 0 0 0 2px var(--accent-live), inset 0 0 22px var(--accent-live-glow); }
  50%    { box-shadow:inset 0 0 0 1px var(--accent-live-glow),    inset 0 0 6px  var(--accent-live-dim); }
}
.layout.owned .timer{ font-size:34px; }
.layout.owned .status-text{ color:var(--accent-live); }

/* Item 6 — the bottom action row duplicates the key panel on desktop. Hidden
   above 1024; tablets keep it, and the mobile controller has its own. */
@media (min-width:1025px){ .bottom-bar{ display:none; } }

/* Item 2 — below the breakpoint. Left rail becomes a drawer under the video,
   right rail folds into tabs above the chat. Grid rather than flex here so the
   drawer is in flow — no overlap, no z-order, no dependence on the rail's
   width — and the right rail spans both rows. */
@media (min-width:701px) and (max-width:1399px){
  .ctrl-main{ display:grid; grid-template-columns:minmax(0,1fr) clamp(260px, 30vw, 340px); grid-template-rows:minmax(0,1fr) auto; }
  .stream-panel{ grid-column:1; grid-row:1; min-width:0; }
  .right-panel{ grid-column:2; grid-row:1 / -1; flex:none; }
  .left-panel{
    grid-column:1; grid-row:2; flex:none; display:none;
    border-right:none; border-top:1px solid var(--border-subtle);
    flex-direction:row; flex-wrap:wrap; max-height:46vh; overflow-y:auto;
  }
  .ctrl-main.drawer-open .left-panel{ display:flex; }
  .left-panel .pblock{ flex:1 1 220px; border-bottom:none; border-right:1px solid var(--border-subtle); }
  .left-panel .pblock:last-child{ border-right:none; }
  .drawer-handle{
    display:inline-flex; align-items:center; flex-shrink:0;
    background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-4);
    padding:2px var(--space-4); min-height:0;
    font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.1em; color:var(--accent-live);
  }
  .rail-tabs{ display:flex; }
  .right-panel .pblock[data-rail]:not(.rail-open){ display:none; }
}

/* ═══════════════════════════════════════════
   WP8.2 — ADMIN: ONE CONTAINER
═══════════════════════════════════════════ */
/*
 * Every admin sub-page renders inside this one box. It is the same 1440px
 * column item 9 gave the landing page, and it was already declared for the
 * admin at ≥1600px — but without `width:100%`, so a flex `.adm-body` shrank to
 * whatever its content happened to be, and Live came out 1560px wide while
 * Transactions came out 920px, both centred, neither the column. Sub-pages
 * live inside `.adm-main` and set no widths of their own; the container is
 * the only place a width is decided.
 *
 * The nav and the log rail are the rails (Reshaping Law, ADR 0014): clamp(),
 * give way first, and below 900px the nav is behind a hamburger while the log
 * stacks under the content.
 */
.adm-body{ width:100%; max-width:1440px; margin:0 auto; }
.adm-nav-toggle{ display:none; }

/* Dense tables: the full container width, scrolling only when the columns
   genuinely overflow it. */
.adm-table-wrap{ width:100%; overflow-x:auto; }
.adm-table th,.adm-table td{ white-space:nowrap; }

/* Destructive actions grouped and set apart. Same buttons, same hues — the
   divider is the red the buttons already carry, at their own border alpha. */
.adm-act-group{ display:flex; flex-wrap:wrap; gap:var(--space-1); align-items:center; }
.adm-act-danger{ border-left:1px solid var(--accent-danger-a2); padding-left:var(--space-4); margin-left:var(--space-1); }
.adm-act-stack{ border-left:none; border-top:1px solid var(--accent-danger-a2); padding:var(--space-4) 0 0; margin:var(--space-4) 0 0; display:flex; flex-direction:column; gap:var(--space-2); }
.adm-sidebar-block{ margin-top:var(--space-6); flex-shrink:0; }
.adm-cfg-wide{ grid-column:span 3; }   /* was an inline style; a class so the phone layout can undo it */

@media (max-width:899px){
  .adm-body{ flex-direction:column; }
  .adm-topbar{ height:auto; min-height:46px; flex-wrap:wrap; padding:var(--space-3) var(--space-6); gap:var(--space-4); }
  .adm-title,.adm-ts{ display:none; }
  .adm-nav-toggle{ display:inline-block; }
  /* The nav rail becomes a sheet under the top bar, opened from the hamburger. */
  .adm-nav{ display:none; flex:none; border-right:none; border-bottom:1px solid var(--admin-border); padding:var(--space-3) 0; }
  .adm-body.nav-open .adm-nav{ display:flex; }
  .adm-main{ padding:var(--space-6); }
  /* The log rail stacks under the content, capped so the content keeps the room. */
  .adm-sidebar{ flex:0 0 auto; max-height:38vh; border-left:none; border-top:1px solid var(--admin-border); overflow-y:auto; }
  .adm-log-box{ flex:none; min-height:120px; max-height:160px; }
  .adm-counters{ grid-template-columns:repeat(3,1fr); }
  .adm-cfg-grid{ grid-template-columns:1fr; }
  .adm-cfg-wide{ grid-column:auto; }
}
/* Three-across at 390px is ~118px a tile, and "127,50 zł" in 26px Rajdhani
   is wider than that — the currency wrapped and clipped. Two-across fits. */
@media (max-width:599px){
  .adm-counters{ grid-template-columns:repeat(2,1fr); }
}

/* (WP13, B54) Terms and Privacy, quietly, at the foot of the landing and account screens. */
.legal-links{ display:flex; justify-content:center; gap:var(--space-8); padding:var(--space-8) 32px 28px; font-size:var(--fs-meta); flex-shrink:0; }
.legal-links a{ color:var(--text-muted); text-decoration:none; padding:var(--space-3) 0; }
.legal-links a:hover{ color:var(--text-secondary); text-decoration:underline; }
#s-account .legal-links{ padding-left:0; padding-right:0; }

/* (WP14) The controller's event ticker: a row of its own, so it can never sit on the
   video, and the controller screen makes no sound for events. Tokens only.
   (WP18) Never cut mid-word: the strip is two lines tall at every width, fixed so the
   video below does not jump when an event wraps. The newest item comes first and may
   wrap onto line two; older items are whole or absent — one that does not fit falls to
   a third line, which max-height + overflow hide as a whole line, never half a word.
   align-content is flex-start, not center: centring three lines in a two-line box would
   clip the newest item's first line. */
.ctrl-ticker{ --ct-lh:1.4; flex-shrink:0; height:calc(2em * var(--ct-lh) + 8px); display:flex; align-items:center; gap:var(--space-5); padding:0 var(--space-8);
  font-size:var(--fs-meta); background:var(--surface-1); border-bottom:1px solid var(--border-subtle); overflow:hidden; }
.ctrl-ticker-label{ flex-shrink:0; align-self:center; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em; color:var(--text-dim); }
.ctrl-ticker-track{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-content:flex-start; column-gap:var(--space-7); row-gap:0;
  max-height:calc(2em * var(--ct-lh)); overflow:hidden; line-height:var(--ct-lh); font-size:var(--fs-meta); }
.ct-idle{ color:var(--text-dim); }
.ct-item{ color:var(--text-secondary); white-space:nowrap; animation:ct-in var(--motion-slide) ease-out; }
.ct-item:first-child{ white-space:normal; overflow-wrap:normal; color:var(--text-strong); font-weight:600; }
.ct-tip{ color:var(--accent-warn); } .ct-dare{ color:var(--accent-info); } .ct-vote_result{ color:var(--accent-vote); }
.ct-slot_start, .ct-slot_end{ color:var(--text-muted); }
@keyframes ct-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
#ctrl-mobile .ctrl-ticker{ padding:0 var(--space-7); }

/* (WP18) The PL/EN switch, in the header of every screen. Two segments, the current one lit.
   Modal cards carry it in their top-right corner. Tokens only. */
.lang-switch{ display:inline-flex; flex-shrink:0; border:1px solid var(--border-subtle); border-radius:var(--radius-5); overflow:hidden; }
.ls-btn{ background:transparent; border:none; padding:var(--space-1) var(--space-3); font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.08em; color:var(--text-muted); cursor:pointer; line-height:1.4; min-width:28px; }
.ls-btn + .ls-btn{ border-left:1px solid var(--border-subtle); }
.ls-btn.on{ background:var(--accent-live-a1); color:var(--accent-live); }
.ls-btn:hover:not(.on){ color:var(--text-strong); }
.modal-card{ position:relative; }
.lang-switch-corner{ position:absolute; top:var(--space-5); right:var(--space-5); }
.acc-top{ display:flex; justify-content:flex-end; margin-bottom:var(--space-4); }
.light-screen .lang-switch{ border-color:var(--light-border); }
.light-screen .ls-btn{ color:var(--light-text-muted); }
.light-screen .ls-btn + .ls-btn{ border-left-color:var(--light-border); }
.light-screen .ls-btn.on{ background:var(--light-surface-2); color:var(--light-text); }
.lang-switch-nav{ margin-left:auto; margin-right:var(--space-5); }