/* ---- the autobet panel --------------------------------------------------
   §8. The number of bets uses INFINITY AS ITS EMPTY STATE rather than a
   separate toggle, and every one of these fields is read at a round boundary
   — Mines shipped five of these as drawings with no listener once, and a
   player-set loss limit that silently does not apply is the worst thing a
   panel like this can contain. */
/* TASK 8: sliders, not a field grid - see index.html's #autopanel note for
   the owner's reference and what was kept, adapted and left out. The sliders
   are the GAME's own, styled for the sheet: the track is a hairline with the
   filled side in the house red, the thumb a plain white disc - no gradients,
   no glow, restraint is the house style. Two columns while the sheet has the
   width, one when it does not (auto-fit, not a viewport query: the sheet's
   width is the container that matters). */
#autopanel{display:grid;gap:16px}
#autopanel[hidden]{display:none}
.apGrid{display:grid;gap:18px 26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.apCol{display:grid;gap:16px;align-content:start;min-width:0}
.ap{display:grid;gap:8px;min-width:0}
.apCap{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.apCap .cap,.apField .cap{font:600 9px/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;
  color:#666C7E;white-space:nowrap}
.apCap b{font:700 13px/1 var(--fig);font-variant-numeric:tabular-nums;color:var(--ink)}
input[type=range].apR,#autopanel input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;margin:0}
#autopanel input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--cp-red) 0%,var(--cp-red) var(--fill,0%),#262A35 var(--fill,0%))}
#autopanel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:0;margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#autopanel input[type=range]:focus{outline:none}
#autopanel input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px rgba(192,24,12,.45)}
#autopanel input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#262A35}
#autopanel input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--cp-red)}
#autopanel input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.apCheck{display:flex;align-items:center;gap:10px;min-height:22px;cursor:pointer}
.apCheck span{font:600 12px/1.2 var(--ui);color:var(--ink)}
.apCheck input{width:16px;height:16px;accent-color:var(--cp-red);cursor:pointer}
.apField{display:grid;gap:6px}
.apField input{width:100%;min-width:0;height:32px;padding:0 8px;background:#080A0D;
  border:1px solid var(--hair);border-radius:8px;
  font:600 13px/1 var(--fig);font-variant-numeric:tabular-nums;color:var(--ink)}
.apField input:focus{outline:none;border-color:#3A3F50;color:#fff}
.apField input::placeholder{color:#454B5B;font-family:var(--ui);font-size:12px}
#autorun{font:600 10.5px/1.4 var(--fig);font-variant-numeric:tabular-nums;color:#6C7386}
#autorun:empty{display:none}

/* ---- WF-UI: RAIL 2's RUNNING READOUT ------------------------------------
   "Running · n rolls · +$x" as TEXT — no progress bar, ever (an infinite
   run has no denominator). While money is live the PRESS SPACE hint yields
   its slot (Space is dead as a commit during a run anyway — onCta turns it
   into STOP, which the readout sits beside explaining). paint() writes the
   text and the data-live flag; the figure is gold ONLY in profit
   (refinement note 3) and --loss — repointed to #8E93A3 by the ember law,
   which made this line's own hex THE token: the readable ledger grey is
   what --loss means now (text only; the board's loss is --acc-out), so
   the one figure that already wore it reads it by name. */
.hzRun{display:none}
#app[data-money="live"] .hzSpace{display:none}
#app[data-money="live"] .hzRun[data-live]{display:flex;flex:none;align-items:baseline}
.hzRun b{font:inherit;font-weight:700;font-variant-numeric:tabular-nums;color:var(--loss)}
.hzRun b[data-up="1"]{color:var(--win)}

/* ---- ADVANCED: the martingale disclosure --------------------------------
   Collapsed by default; the sliders stay the panel's first read. .seg is the
   retired panel's own two-way pill, byte-for-byte (style.css:751-754 before
   the split), because the click delegation in game.js was written against
   exactly this shape. The % field only earns its ink when its own mode is
   "Increase by" — :has() on the sibling seg, the same selector idiom the
   track already uses for #bandA — so a Reset row reads as one decided
   control, not a control plus a stray number. */
#apAdv{border-top:1px solid var(--hair);padding-top:12px}
#apAdv summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font:600 9px/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;color:#666C7E;
  transition:color .15s}
#apAdv summary::-webkit-details-marker{display:none}
#apAdv summary::before{content:'';width:0;height:0;
  border-left:4px solid currentColor;border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;transition:transform .18s}
#apAdv[open] summary::before{transform:rotate(90deg)}
#apAdv summary:hover{color:#C8CDDA}
.apAdvBody{display:grid;gap:12px;padding-top:14px}
.apAdvRow{display:grid;grid-template-columns:52px minmax(0,1fr) 74px;
  align-items:center;gap:10px}
.apAdvRow > .cap{font:600 9px/1 var(--ui);letter-spacing:.11em;text-transform:uppercase;
  color:#666C7E;white-space:nowrap}
.seg{display:grid;grid-auto-flow:column;gap:3px;padding:3px;background:#080A0D;
  border:1px solid var(--hair);border-radius:8px}
.seg button{height:26px;border-radius:6px;font:600 11px/1 var(--ui);color:#767C90}
.seg button[data-on]{background:#20242E;color:#fff}
.apPct{display:flex;align-items:center;gap:5px;height:32px;padding:0 8px;
  background:#080A0D;border:1px solid var(--hair);border-radius:8px;min-width:0}
.apPct input{width:100%;min-width:0;background:none;border:0;padding:0;text-align:right;
  font:600 13px/1 var(--fig);font-variant-numeric:tabular-nums;color:var(--ink)}
.apPct input:focus{outline:none;color:#fff}
.apPct span{font:600 11px/1 var(--ui);color:#5E6476;flex:none}
.apAdvRow:has(.seg [data-v="reset"][data-on]) .apPct{opacity:.35}

/* ---- the mode selector, ON THE BOARD ------------------------------------
   §6 of the research: multi-band betting is the structural differentiator and
   it is crypto-only — Roobet, Duelbits, wolf.bet and Windice all ship it and
   every regulated slider is strictly two-sided. The control sits above the
   track and not in the dock because the mode is what the track DRAWS: it
   changes the picture directly under it, and a control that repaints the
   object beside it belongs next to that object.
   ALL FOUR PRICE IDENTICALLY. Switching mode preserves the win chance
   exactly, so the multiplier does not move — Roobet's choice and the right
   one. That is asserted in scripts/diag-dice-math.mjs. */
/* FIVE OBJECTS ON FOUR AXES was the composition finding, and this is one of
   them: the rail was shrink-to-fit and centred at 316px inside a 760px group,
   agreeing with nothing above or below it. Stretched to the group it becomes a
   fourth object on the same two verticals, and four equal columns give the
   four modes the equal weight their identical price already claims. */
/* TASK (r2) 4: THE OWNER'S OWN WORDS — "Radio button on v1 is better, color
   red etc." v1's direction control is a two-segment pill with a sliding
   background and the ACTIVE segment filled in the house red gradient over
   dark ink; ours was four flat, low-contrast tabs. Adapted rather than
   copied straight: v1 only ever has two segments (Over/Under), this rail
   has four (Under/Over/Between/Outside) and stays four — the fill treatment
   and the sliding indicator are what transfer, not the segment count.
   #modes .segbg IS THE SAME MECHANISM v1's .segbg is (a sibling element
   sliding under the buttons), sized and positioned in CSS to match this
   rail's own 4-up grid rather than v1's 2-up one — see game.js's mode-rail
   IIFE (builds it) and paint() (drives --idx, the one number both the
   pill's position and this file's math read). */
/* GOO R6 TASK 4a: THE PILL IS v1's PILL. The owner pointed back at v1's
   selector ("the selector for under/above is also better"); measured against
   ours, the MECHANISM was already v1's (this .segbg, the .34s
   cubic-bezier(.3,1.35,.4,1) spring, the accent gradient, the label flip —
   all ported in r2 task 4), so what actually differed is the GEOMETRY and
   the MATERIAL: v1's track is a borderless pill (980px radii) in
   rgba(255,255,255,.06), ours was an 11px-radius bordered box. Adopted:
   999px radii on track/pill/buttons, v1's translucent track (the hairline
   border goes — v1's control is cut out of light, not drawn in line), and
   the slide moves to TRANSFORM, v1's own property, which is also this
   file's rule for anything that moves (the compositor, not layout). */
/* THE FILL IS THE ACCENT, THE INK IS WHITE — the owner corrected the last
   round's reading of their mark: "I meant the text to be white the button
   should be red." The white-pill detour lasted one round; what their mark
   was actually pointing at was the ACTIVE LABEL's #2B0805 ink, unreadable
   on the red fill. Flat fill (no gradient, no glow — the mechanism carries
   no shadow), white ink. Both colours are 00-tokens.css's --pill/--pill-ink
   — one writer, no hex here. Everything else about the control — the
   spring, the transform slide, the .segclip cap window, the four-segment
   geometry — is untouched. */
/* collar round: justify-self:stretch left with the rail's old home — as a
   #play row it stretched to the group; as the board's own row (20-stage)
   it CARRIES the group's measure itself and centres. Position is
   20-stage's business now; everything below is still the control's own. */
#modes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;
  background:rgba(255,255,255,.06);border-radius:999px;
  max-width:100%}
/* THE MATH, re-based for the transform slide: the pill sits at the first
   column (left:4px, width 25% - 5px — the 4px padding + 4px gap sum both
   cancel to that constant) and travels by its OWN width plus one gap per
   index: translateX reads % of the element itself, so 100% + 4px IS the
   column step (25% of track - 1px), algebraically, at every track width. */
/* THE OVERSHOOT IS CLIPPED AT THE TRACK'S OWN CAPS. The .34s spring below
   necessarily travels PAST its target before settling; between the inner
   segments the excess lands in the neighbour's gap and reads as bounce, but
   at the END columns there is no neighbour — the pill's cap painted up to
   ~19px past the track's rounded right edge on a click into Outside
   (measured at 1280×760; ~8px at 380×300), and symmetrically past the left
   edge arriving at Under from the right. .segclip is a window with the
   track's exact geometry (inset:0, the same 999px radii): the spring curve
   is untouched, the bounce still reads on the inner segments, and at the
   ends the escaping cap compresses into the track's own cap instead of
   painting outside it. A wrapper rather than overflow:hidden on #modes
   itself so the buttons' focus outlines (2px outside the button, flush
   with the track edge) stay unclipped. Built by the mode-rail IIFE in
   game.js; segbg's coordinates are unchanged — inset:0 spans the same
   containing block the pill measured against before. */
#modes .segclip{position:absolute;inset:0;border-radius:999px;overflow:hidden;
  z-index:0;pointer-events:none}
/* WF-UI GRAFT B3: THE THUMB WEARS THE MONEY MATERIAL — the second of
   exactly two money-material objects (the commit is the other; UI-CHOICE
   §3's depth budget). A bet-parameter segment may wear money per v1's own
   grammar; the flat --pill fill this replaces was the r2 correction's
   floor, and B's gradient+catch-light rendered better than A's plainer
   one, so B's recipe ships: the red's own hi/lo around the pill colour,
   a top catch-light, an accent bloom. background-color stays --pill so
   the token pair (--pill/--pill-ink, 00-tokens.css) is still the one
   writer of the pill's hue. */
#modes .segbg{position:absolute;top:4px;bottom:4px;left:4px;
  width:calc(25% - 5px);border-radius:999px;z-index:0;
  transform:translateX(calc(var(--idx,0) * (100% + 4px)));
  background-color:var(--pill);
  background-image:linear-gradient(180deg, var(--cp-red-hi) -40%, var(--pill) 45%, var(--cp-red-lo) 130%);
  box-shadow:0 3px 12px color-mix(in srgb, var(--cp-red) 40%, transparent),
             inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .34s cubic-bezier(.3,1.35,.4,1)}
#modes button{position:relative;z-index:1;height:calc(34px*var(--scc,1));padding:0 8px;border-radius:999px;
  font:600 calc(12.5px*var(--scc,1))/1 var(--ui);color:#767C90;white-space:nowrap;transition:color .16s}
#modes button:hover{color:#C8CDDA}
/* WHITE INK ON THE RED FILL — the owner's correction, verbatim: "the text
   to be white the button should be red." Read through --pill-ink so the
   pair can only ever move together. White on --cp-red measures ~5.9:1 —
   verified in the render, including mid-slide. */
#modes button[data-on]{color:var(--pill-ink);font-weight:800}
#frame[data-tiny] #modes button{height:21px;padding:0 6px;font-size:10.5px}
/* the tiny rung pads 2px (60-density), so the pill's rest position and
   width re-solve for it: col = 25% - 4px, and the step is again its own
   width + the 4px gap = 25% exactly. */
#frame[data-tiny] #modes .segbg{top:2px;bottom:2px;left:2px;width:calc(25% - 4px)}
/* R1 MONEY LOCK: the rail's dim now covers the AUTO run too, not only the
   in-flight roll — setMode has guarded S.rolling||S.auto since it was
   written, so between autobet rolls the rail was inert but looked live:
   a click did nothing and told the player nothing. data-money="live" is
   paint()'s exact spelling of that same guard's condition. */
#frame[data-rolling] #modes,
#app[data-money="live"] #modes{opacity:.55;pointer-events:none}

/* PORTRAIT (mobile round): the mode rail is FOUR THUMB TARGETS — the tiny
   rung's 21px buttons (portrait phones are all data-tiny by width) step to
   the 44px floor; the pill's rest position and width re-solve for the 3px
   padding exactly as the tiny rung re-solved for its 2px. After the tiny
   rules, same specificity: order wins. */
#frame[data-port] #modes{padding:3px}
#frame[data-port] #modes button{height:44px;padding:0 6px;font-size:13.5px}
/* 25% - 4.5px, the file's own algebra re-run for a 3px pad: col =
   (W - 2*3 - 3*4)/4 = 25% - 4.5px, and the step (own width + 4px gap)
   is again the column pitch exactly — the mock's -6px drifted the pill
   1.5px per index and sat it 4.5px shy of Outside's cap. */
#frame[data-port] #modes .segbg{top:3px;bottom:3px;left:3px;width:calc(25% - 4.5px)}