/* THE ACCESSIBILITY PREVIEW, generated from _preview/accessibility-mockup.html by
   scratchpad/gift/mkacport.py. DO NOT EDIT BY HAND: change the mockup and re-run it.
   Scoped under .aca (x4 - see 2. below); the mockup's body.phone is .aca.ph here.
   The little screen's own rules are NOT in this file. The app already carries that whole frame
   from the Appearance port, scoped under .apa, and this markup renders inside an element that is
   both .apa and .aca. Every rule already in appearance-page.css was subtracted out. */

/* ★★ THE SHIM. The mockup speaks --T, --W, --L, --LG and --acTap; the app speaks --Tk, --Wb, --Lh
   and a body.bigtap class. Rewriting a hundred calc()s into the app's names is a hundred chances
   to get one wrong silently; defining the mockup's names in terms of the app's is one block that
   is either right or obviously broken. Everything below this is the mockup's own CSS, unedited.
   ⚠️ --L and --Lh are NOT the same kind of number. --L is a line-height VALUE (1.5 normally) and
   --Lh is a MULTIPLIER (1 normally, 1.33 at Loose), which is why one is the other times 1.5. */
.aca{
  /* the chat on the right reads these */
  --T:  var(--Tk, 1);
  --W:  var(--Wb, 0);
  --L:  calc(1.5 * var(--Lh, 1));
  --LG: var(--Lh, 1);
  --wk: 1;
  --acTap: 1;
  /* ★ and the little screen on the LEFT reads these two, which is easy to miss: .apprev sets its
     own --T from --acT, so the --T above never reaches inside it. In the mockup both were written
     by the settings panel's JS, and none of that JS is ported - without these the left box would
     sit there looking finished and never move for any setting. The numbers are the mockup's own:
     --acT was [.8, 1, 1.2, 1.5], which is --Tk exactly, and --acL was [1.5, 1.74, 2], which is
     1.5 x --Lh's [1, 1.16, 1.33] to within a rounding of the third. */
  --acT: var(--Tk, 1);
  --acL: calc(1.5 * var(--Lh, 1));
}
/* Dyslexia-friendly swaps the typeface app-wide and Verdana has only two weights, so Bolder text
   on top of it does nothing unless the step is widened. Same trick as the mockup's. */
:root[data-dys="on"] .aca{--wk:.66}
/* Bigger buttons reaches the picture too, the way it does in the mockup */
body.bigtap .aca{--acTap:1.4}

body.stillbg .aca.aca.aca.aca .apprev .pvmark, body.stillbg .aca.aca.aca.aca .apprev .pvstar, body.stillbg .aca.aca.aca.aca .apshot .apa, body.stillbg .aca.aca.aca.aca .apshot .sstar{animation:none}
.aca.aca.aca.aca .acprevwrap{padding:10px 0 12px;margin:0 0 6px}
.aca.aca.aca.aca .acpair{display:grid;grid-template-columns:1.85fr 1fr;gap:14px;align-items:stretch}
.aca.aca.aca.aca .acpair[hidden]{display:none}
.aca.aca.aca.aca .acpair > *{min-width:0}
.aca.aca.aca.aca .acprevwrap .apprev{aspect-ratio:16/10;height:auto}
.aca.aca.aca.aca .apprev{--pvpanel:#141b26;--pvline:#1f2836;--pvbar:#39435466;--pvbar2:#2b3443}
.aca.aca.aca.aca .apprev.apprev .pvwrap{zoom:.86}
.aca.aca.aca.aca .apprev{--T:var(--acT,1); --BW:0px; --DW:1; --LG:calc(var(--acL,1.5) / 1.5); --pvchip:calc(var(--chipb,16px) * (.5 + var(--T) * .5)); --pvtab:calc(var(--tabb,18px) * (.5 + var(--T) * .5)); --pvtop:calc(var(--topb,34px) * (.5 + var(--T) * .5))}
.aca.aca.aca.aca .apprev.apprev .pvrow b, .aca.aca.aca.aca .apprev.apprev .pvbars b, .aca.aca.aca.aca .apprev.apprev .pvcard.shift b, .aca.aca.aca.aca .apprev.apprev .pvtable b, .aca.aca.aca.aca .apprev.apprev .pvchippill b{height:calc(4px * var(--T) + var(--BW))}
.aca.aca.aca.aca .apprev.apprev .pvtable em{height:calc(3px * var(--T) + var(--BW))}
.aca.aca.aca.aca .apprev.apprev .pvtl b{height:calc(5px * var(--T) + var(--BW))}
.aca.aca.aca.aca .apprev.apprev .pvword{height:calc(6px * var(--T) + var(--BW))}
.aca.aca.aca.aca .apprev.apprev .pvlbl{height:calc(3px * var(--T) + var(--BW))}
.aca.aca.aca.aca .apprev.apprev .pvcard.shift em{height:calc(4px * var(--T) + var(--BW))}
.aca.aca.aca.aca .apprev.apprev .pvtable b{width:calc(38% * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvtable em{width:calc(58% * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvchippill b{width:calc(26px * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvchippill b.s{width:calc(18px * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvtl b{width:calc(54px * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvword{width:calc(46px * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvlbl{width:calc(30% * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvbars b.s{width:calc(56% * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvcard.shift em{width:calc(22% * var(--DW) * var(--T))}
.aca.aca.aca.aca .apprev.apprev .pvrow{padding:calc(var(--pvnavpad,4px) * var(--T) * var(--LG)) 5px}
.aca.aca.aca.aca .apprev.apprev .pvnav{gap:calc(2px * var(--LG)); -webkit-mask-image:linear-gradient(#000 86%,transparent 99%); mask-image:linear-gradient(#000 86%,transparent 99%)}
.aca.aca.aca.aca .apprev.apprev .pvbars{gap:calc(3px * var(--LG))}
.aca.aca.aca.aca .apprev.apprev .pvtable{gap:calc(4px * var(--LG))}
.aca.aca.aca.aca .apprev.apprev .pvfloor{grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-rows:0; align-content:stretch;max-height:calc(2 * var(--pvth,62px) + var(--pvgap,6px))}
.aca.aca.aca.aca .apprev{--pvth:44px}
.aca.aca.aca.aca .actx{position:relative;overflow:hidden; border-radius:14px; background:linear-gradient(168deg,#0e141d,#080b11); box-shadow:0 26px 50px -36px #000; font-family:var(--acFont,inherit);letter-spacing:var(--acLS,0)}
.aca.aca.aca.aca .acmsgs{position:absolute;inset:0;overflow:hidden;z-index:1; padding:calc(12px * var(--acTap,1)) 15px; -webkit-mask-image:linear-gradient(#000 90%,transparent 100%); mask-image:linear-gradient(#000 90%,transparent 100%)}
.aca.aca.aca.aca .acmsg{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px; padding:calc(7px * var(--acTap,1)) 0}
.aca.aca.aca.aca .acmsg i{width:calc(27px * (.5 + var(--T) * .5));height:calc(27px * (.5 + var(--T) * .5)); border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;color:#fff; font-size:calc(11px * var(--T));font-weight:calc(800 * var(--wk,1) + var(--W));line-height:1}
.aca.aca.aca.aca .actx{--one:var(--accent); --two:#38bdf8; --three:#a78bfa}
.aca.aca.aca.aca .acmsg i.one{background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent))}
.aca.aca.aca.aca .acmsg i.two{background:linear-gradient(140deg,#7dd3fc,#0ea5e9)}
.aca.aca.aca.aca .acmsg i.three{background:linear-gradient(140deg,#c4b5fd,#7c3aed)}
.aca.aca.aca.aca .acmsg.one .achd b{color:var(--one)}
.aca.aca.aca.aca .acmsg.two .achd b{color:var(--two)}
.aca.aca.aca.aca .acmsg.three .achd b{color:var(--three)}
.aca.aca.aca.aca .acbody{min-width:0}
.aca.aca.aca.aca .achd{display:flex;align-items:baseline;gap:8px}
.aca.aca.aca.aca .achd b{font-size:calc(13px * var(--T));font-weight:calc(750 * var(--wk,1) + var(--W));color:#d3ddea; line-height:var(--L)}
.aca.aca.aca.aca .achd s{text-decoration:none;font-size:calc(11px * var(--T));font-weight:calc(600 * var(--wk,1) + var(--W)); color:#6c7789;line-height:var(--L)}
.aca.aca.aca.aca .acmsg p{margin:1px 0 0;font-size:calc(13.5px * var(--T));font-weight:calc(600 * var(--wk,1) + var(--W)); color:#aab6c6;line-height:var(--L)}
.aca.aca.aca.aca .apfloat .apprev.apprev{height:auto;aspect-ratio:16/10}
.aca.ph.ph.ph .apfloat .apprev.apprev{aspect-ratio:9/19}
.aca.aca.aca.aca .apfloat.txwin .apfbody, .aca.aca.aca.aca .apfloat.txwin .actx{height:100%}
.aca.aca.aca.aca .apfloat{cursor:grab}
.aca.aca.aca.aca .apfloat.grabbing{cursor:grabbing}
.aca.aca.aca.aca .apfloat.txwin{width:min(380px,92vw)}
.aca.aca.aca.aca .acsec{display:flex;align-items:center;gap:10px;margin:30px 0 12px; font-size:calc(11px * var(--T));font-weight:calc(800 * var(--wk,1) + var(--W));letter-spacing:.6px;color:var(--dim)}
.aca.aca.aca.aca .acsec::after{content:"";flex:1;height:1px;background:var(--line)}
.aca.aca.aca.aca .acpanel{border-radius:16px;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.aca.aca.aca.aca .acrow{display:flex;align-items:center;gap:14px;padding:calc(16px * var(--acTap,1)) 20px}
.aca.aca.aca.aca .acrow + .acrow{box-shadow:inset 0 1px 0 var(--line)}
.aca.aca.aca.aca .acrow .act{flex:1;min-width:0}
.aca.aca.aca.aca .acrow b{display:block;font-size:calc(14px * var(--T));font-weight:calc(700 * var(--wk,1) + var(--W));line-height:var(--L)}
.aca.aca.aca.aca .acrow small{display:block;margin-top:3px;color:var(--dim);font-size:calc(12.5px * var(--T));line-height:var(--L)}
.aca.aca.aca.aca .acsl{flex:none;width:320px;--pad:9px}
.aca.aca.aca.aca .acsl .tk{display:block;position:relative;height:calc(15px * min(var(--T), 1.15));margin-bottom:8px}
.aca.aca.aca.aca .acsl .tk span{position:absolute;top:0;line-height:1;left:calc(var(--pad) + (100% - var(--pad) * 2) * var(--f)); transform:translateX(-50%);white-space:nowrap; font-size:calc(11px * min(var(--T), 1.15));font-weight:calc(650 * var(--wk,1) + var(--W));color:var(--dim); cursor:pointer;transition:color .14s}
.aca.aca.aca.aca .acsl .tk span.e0{transform:none}
.aca.aca.aca.aca .acsl .tk span.e1{transform:translateX(-100%)}
.aca.aca.aca.aca .acsl .tk span:hover{color:var(--mid)}
.aca.aca.aca.aca .acsl .tk span.on{color:var(--accent)}
.aca.aca.aca.aca .acsl input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0; background:none;cursor:pointer}
.aca.aca.aca.aca .acsl input::-webkit-slider-runnable-track{height:6px;border-radius:999px; background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--panel3) var(--p,0%))}
.aca.aca.aca.aca .acsl input::-moz-range-track{height:6px;border-radius:999px; background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--panel3) var(--p,0%))}
.aca.aca.aca.aca .acsl input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px; border-radius:50%; background:var(--fg);box-shadow:0 2px 8px -1px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.25);cursor:pointer; transition:transform .12s var(--ease)}
.aca.aca.aca.aca .acsl input::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%; background:var(--fg);box-shadow:0 2px 8px -1px rgba(0,0,0,.6);cursor:pointer}
.aca.aca.aca.aca .acsl input:active::-webkit-slider-thumb{transform:scale(1.12)}
.aca.aca.aca.aca .acsl .gr{display:block;position:relative;height:5px;margin-top:6px}
.aca.aca.aca.aca .acsl .gr i{position:absolute;top:0;width:1px;height:5px;background:var(--line2); left:calc(var(--pad) + (100% - var(--pad) * 2) * var(--f))}
.aca.aca.aca.aca .acsw{position:relative;flex:none;width:44px;height:26px;border:0;padding:0;border-radius:999px; background:var(--panel3);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;transition:background .18s}
.aca.aca.aca.aca .acsw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%; background:var(--fg);transition:transform .2s var(--ease)}
.aca.aca.aca.aca .acsw[aria-pressed="true"]{background:var(--accent);box-shadow:none}
.aca.aca.aca.aca .acsw[aria-pressed="true"]::after{transform:translateX(18px)}
.aca.aca.aca.aca .acbtn{flex:none;border:0;cursor:pointer;padding:9px 15px;border-radius:11px;background:var(--panel2); box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg);font-family:inherit; font-weight:calc(700 * var(--wk,1) + var(--W));font-size:calc(12.5px * var(--T));transition:box-shadow .14s}
.aca.aca.aca.aca .acbtn:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.aca.aca.aca.aca .acrel{display:flex;align-items:center;gap:15px;width:100%;text-align:left;border:0;cursor:pointer; padding:calc(15px * var(--acTap,1)) 20px;border-radius:16px;background:var(--panel); box-shadow:0 0 0 1px var(--line);font-family:inherit;color:var(--fg); transition:box-shadow .16s,transform .14s var(--ease)}
.aca.aca.aca.aca .acrel:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--accent),0 14px 28px -22px #000}
.aca.aca.aca.aca .acrel .ic{width:30px;flex:none;display:grid;place-items:center;color:var(--mid)}
.aca.aca.aca.aca .acrel .ic svg{width:26px;height:26px;display:block}
.aca.aca.aca.aca .acrel .ic svg.gm{fill:currentColor;stroke:none}
.aca.aca.aca.aca .acrel:hover .ic{color:var(--fg)}
.aca.aca.aca.aca .acrel .tx{flex:1;min-width:0}
.aca.aca.aca.aca .acrel b{display:block;font-size:calc(14px * var(--T));font-weight:calc(700 * var(--wk,1) + var(--W))}
.aca.aca.aca.aca .acrel small{display:block;margin-top:2px;color:var(--dim);font-size:calc(12.5px * var(--T))}
.aca.aca.aca.aca .acrel .ch{color:var(--dim);font-size:calc(18px * var(--T))}
body.boldtext .aca.aca.aca.aca .apprev{--BW:1.2px;--pvbar:#65769ae6;--pvbar2:#46556e}
:root[data-dys="on"] .aca.aca.aca.aca .apprev{--DW:1.1}
body.bigtap .aca.aca.aca.aca .apprev{--pvnavpad:6px;--chipb:21px;--tabb:24px;--topb:42px;--pvth:58px}
body.bigtap .aca.aca.aca.aca .apprev.apprev .pvtable{padding:10px 10px}
body.bigtap .aca.aca.aca.aca .apprev.apprev .pvcard{padding:8px}
body.bigtap .aca.aca.aca.aca .apprev.apprev .pvchippill{padding:0 11px}
.aca.aca.aca.aca .apprev.replay .pvtable{animation:acpop .22s var(--ease) both}
.aca.aca.aca.aca .actx.replay .acmsg{animation:acpop .22s var(--ease) both}
@keyframes acpop{from{opacity:0;transform:translateY(5px)}}
.aca.ph.ph.ph .acpair{grid-template-columns:1fr}
.aca.ph.ph.ph .acprevwrap .apprev{height:auto}
.aca.ph.ph.ph .actx{min-height:calc(260px * var(--T,1))}
.aca.ph.ph.ph .acprevwrap .apprev.apprev .pvwrap{zoom:1}
.aca.ph.ph.ph .acprevwrap .apprev.apprev .pvfloor{grid-template-rows:none;max-height:none; grid-auto-rows:var(--pvth2,46px);align-content:start}
.aca.ph.ph.ph .acrow{flex-wrap:wrap;gap:12px;padding:14px 16px}
.aca.ph.ph.ph .acsl{width:100%;flex:1 0 100%}
.aca.ph.ph.ph .acrel{padding:14px 16px}

/* ★ LIGHT MODE, which the mockup never had and the app does. The mockup was only ever looked at
   on the dark theme, so both boxes have their dark colours written into them as literals - on a
   white page that is two black cards sitting in the middle of the settings, which is exactly the
   kind of thing he catches ("when you're in white mode and you go to billing, look at this").
   These are app glue, not mockup CSS, which is why they live in the generator rather than being
   something to remember to re-add - a re-run brings them back with everything else.

   ⚠️ THE LITTLE SCREEN NEEDS ALL EIGHT TOKENS, and the mockup only ever set four. On the
   Appearance page a JS module writes these eight inline whenever the theme changes; the mockup had
   no such module, so it hardcoded the four it happened to need and let the other four fall back to
   their dark defaults. Ported as-is, --pvpanel stayed #141b26 in light mode and every table on the
   little screen rendered BLACK on a white page. The first fix was to toggle the .lightpv class the
   Appearance preview uses - it works, but it means JS, a theme hook and a piece of state that can
   go stale. The tokens do the whole job on their own, and this preview has no mark, star or light
   layer, which is the only other thing that class carries. The values are copied from _ap_app.js
   so the two previews cannot disagree about what light Arthur looks like. */
:root[data-theme="light"] .aca.aca.aca.aca .apprev{
  --pvfg:#1a1e25; --pvmid:#414954; --pvdim:#6b727e;
  --pvpanel:#ffffff; --pvline:#e0e5ee; --pvbar:#c3cbd9; --pvbar2:#d9e0ea; --pvbarbg:#ffffff;
  background:linear-gradient(168deg,#f6f8fc,#e7ecf5);
}
/* ⚠️ THE RAIL AND THE TOP BAR ARE NOT TOKENS. Everything else on the little screen takes its
   colour from the eight properties above, so it went light with them; these two are painted by
   flat `.lightpv .pvnav` / `.lightpv .pvtop` rules instead, and with the class gone they stayed
   dark. The result was a light preview with a grey rail down the side and a grey bar across the
   top, which is what he saw. The build check below enumerates every non-glass .lightpv rule that
   could match this markup and fails if one of them has nothing here, so a third one cannot hide. */
:root[data-theme="light"] .aca.aca.aca.aca .pvnav{background:color-mix(in srgb,#fff 66%,transparent)}
:root[data-theme="light"] .aca.aca.aca.aca .pvtop{background:color-mix(in srgb,#fff 74%,transparent)}
:root[data-theme="light"] .aca.aca.aca.aca .actx{
  background:linear-gradient(168deg,#f6f8fc,#e7ecf5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent), 0 18px 40px -34px #5b6578;
}
:root[data-theme="light"] .aca.aca.aca.aca .actx{--two:#0284c7; --three:#7c3aed}
:root[data-theme="light"] .aca.aca.aca.aca .achd b{color:#1c2534}
:root[data-theme="light"] .aca.aca.aca.aca .achd s{color:#5a6578}
:root[data-theme="light"] .aca.aca.aca.aca .acmsg p{color:#39435a}

/* ★★ THE BACKDROP FOLLOWS THE LIVE APPEARANCE SETTINGS. His: "if you put light in the appearance,
   or stars, or anything, I want to also showcase here - on both of these."
   On the Appearance page a script writes the preview's backdrop tokens every time something
   changes, because the controls are on that page. Here there is nothing to listen to and nothing
   to keep in sync: APPR already publishes the whole backdrop on <html> for the APP to read
   (data-bg-light, -lightpos, -stars, -starn, -twinkle, -mark and four strengths), so this preview
   reads the same attributes the app itself does. Change a backdrop setting on Appearance, walk
   back here, and the picture is already right - no wiring, nothing that can go stale.
   ⚠️ --pvac is the colour the light is TINTED with, and it is deliberately --uaccent, not
   --accent. The settings window resets --accent to Arthur blue for its whole subtree (the
   ACCENTSCOPE block); --uaccent is the untouched mirror of what the customer actually picked, and
   a preview of your Arthur that shows someone else's colour is not a preview. */
.aca.aca.aca.aca .apprev, .aca.aca.aca.aca .actx{
  --pvac:  var(--uaccent, #3b82f6);
  --pvlstr:var(--bg-lstr, .5);
  --pvsstr:var(--bg-sstr, .5);
  --pvmstr:var(--bg-mstr, .5);
  --pvmsz: var(--bg-msz, 1);
}
:root[data-bg-light="off"]   .aca.aca.aca.aca .pvlight{display:none}
:root[data-bg-stars="off"]   .aca.aca.aca.aca .pvsky{display:none}
:root[data-bg-mark="off"]    .aca.aca.aca.aca .pvmark{display:none}
:root[data-bg-twinkle="off"] .aca.aca.aca.aca .pvstar{animation:none}
/* Movement is the same switch for this picture as for the app behind it */
:root[data-motion="off"] .aca.aca.aca.aca .pvmark,
:root[data-motion="off"] .aca.aca.aca.aca .pvstar{animation:none}
:root[data-bg-starn="few"]  .aca.aca.aca.aca .pvsky .pvstar:nth-child(n+7){display:none}
:root[data-bg-starn="some"] .aca.aca.aca.aca .pvsky .pvstar:nth-child(n+13){display:none}
/* ⚠️ THE MARK IS THE LEFT BOX'S ONLY, his call and the right one: the light and the stars are
   atmosphere and sit behind anything, but the mark is a watermark - one per screen - and two side
   by side would read as a repeating pattern rather than as a signature. */
.aca.aca.aca.aca .actx .pvmark{display:none}

:root[data-bg-lightpos="corners"] .aca.aca.aca.aca .pvlight{background: radial-gradient(38% 42% at 0% 0%, color-mix(in srgb,var(--pvac) 22%,transparent), transparent 70%), radial-gradient(38% 42% at 100% 0%, color-mix(in srgb,var(--pvac2) 22%,transparent), transparent 70%), radial-gradient(38% 42% at 0% 100%, color-mix(in srgb,var(--pvac2) 18%,transparent), transparent 70%), radial-gradient(38% 42% at 100% 100%, color-mix(in srgb,var(--pvac) 18%,transparent), transparent 70%)}
:root[data-bg-lightpos="top"] .aca.aca.aca.aca .pvlight{background: radial-gradient(62% 58% at 36% -8%, color-mix(in srgb,var(--pvac) 26%,transparent), transparent 72%), radial-gradient(62% 58% at 64% -8%, color-mix(in srgb,var(--pvac2) 26%,transparent), transparent 72%)}

/* ⚠️ THE SWITCH KNOB IS var(--fg), which is white in the dark theme and nearly BLACK in the light
   one - so on a white page every switch grew a dark blob instead of a knob. The mockup was only
   ever looked at dark, where --fg happened to be the right answer. A knob is white on both themes
   because it sits on a coloured track, and it gets the shadow that every physical-looking switch
   has, which is also what keeps it readable against the pale off-state track. */
:root[data-theme="light"] .aca.aca.aca.aca .acsw::after{
  background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.28);
}
:root[data-theme="light"] .aca.aca.aca.aca .acsw{background:#cdd5e2;box-shadow:none}

/* ★ 2026-09-24 AND THE SLIDER THUMBS ARE THE SAME MISTAKE, one control along. His: "look at the
   way the things are black, you see the little dots are black, this is weird as hell."
   `background:var(--fg)` again: near-white on dark, near-BLACK on light, so Text size and Space
   between lines each grew a black dot sitting on a pale blue track. Same answer as the switch
   knob above - a knob is white on both themes, because it rides on a coloured track - and the
   black glow it carried is turned into an ink shadow so the white reads on the unfilled half. */
:root[data-theme="light"] .aca.aca.aca.aca .acsl input::-webkit-slider-thumb{
  background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.3), 0 0 0 1px rgba(16,24,40,.16)}
:root[data-theme="light"] .aca.aca.aca.aca .acsl input::-moz-range-thumb{
  background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.3), 0 0 0 1px rgba(16,24,40,.16)}

/* ⚠️ AND BIGGER BUTTONS HAS TO GROW IT IN BOTH DIRECTIONS. The app-wide rule for that setting is a
   min-height on every button, which a switch is - so a 44x26 toggle became 44x46: the track turned
   into a tall pill with a small knob floating at the top of it. A switch is a shape, not a line of
   text, so it scales as a shape. */
body.bigtap .aca.aca.aca.aca .acsw{width:52px;height:31px;min-height:0}
body.bigtap .aca.aca.aca.aca .acsw::after{width:25px;height:25px}
body.bigtap .aca.aca.aca.aca .acsw[aria-pressed="true"]::after{transform:translateX(21px)}