/* Article polish: toggle
   The "Source mode" switch as a liquid toggle, after Bencho's
   "Liquid toggle" (MIT, bencho.dev/licence); the same switch in the pinned
   nav row; and reading mode: with reference links off, the rail steps away
   and the story centres.

   ── the droplet, and the air round it ──────────────────────────────────
   Bencho's proportions at the size this row needs: an 18px droplet in a
   24px pill, so 3px of track shows all the way round, and the inset at the
   ends is the same 3px seen twice. The pill is twice as long as it is tall,
   as Bencho's is. js/polish/toggle.js reads these numbers for the travel,
   so the circle and the distance it crosses cannot disagree.

   ── black and white, and the track carries the state ────────────────────
   Off is the light end of the ramp: a white pill (the slab) with a grey
   droplet mixed toward it. On is the inversion: an ink pill with a white
   droplet. No hue: a switch does not need one to say it is on. On cream a
   white pill needs an edge to read as an object, so the off track carries
   a hairline; the ink track does not need one.

   Mapping Bencho's tokens to this site's: --fill-slab is the white the page
   uses for raised controls (#fff by day, --raised by night), --fill-on is
   --ink, --pane-edge is --line. They are set on the switch itself, so
   nothing leaks out. */
html[data-polish] .layerrow .sw{
  --liq-w:46px;--liq-h:24px;--liq-thumb:18px;
  --liq-slab:#fff;--liq-on:var(--ink);--liq-edge:var(--line);
  position:relative;flex:0 0 auto;display:block;width:var(--liq-w);height:var(--liq-h);
  border-radius:999px;background:var(--liq-slab);box-shadow:inset 0 0 0 1px var(--liq-edge);
  /* it is a rail you can push along, not only a button; a vertical swipe
     that starts on it is still the page's scroll */
  touch-action:pan-y;
  transition:background-color 320ms ease,box-shadow 320ms ease}
html[data-polish][data-theme="dark"] .layerrow .sw{--liq-slab:var(--raised)}
@media (prefers-color-scheme:dark){
  html[data-polish]:not([data-theme="light"]) .layerrow .sw{--liq-slab:var(--raised)}
}

/* the droplet. Its transform belongs to js/polish/toggle.js, which writes
   position, stretch and swell into one transform every frame; a CSS
   transition on the same property would re-ease what the spring writes.
   The colour is the only thing here that eases. left:0 matters: without it
   the static position is wherever the line box puts an inline element. */
html[data-polish] .layerrow .sw i{
  position:absolute;left:0;top:50%;display:block;
  width:var(--liq-thumb);height:var(--liq-thumb);margin-top:calc(var(--liq-thumb) / -2);
  border-radius:999px;box-shadow:none;
  background:color-mix(in srgb,var(--liq-on) 19%,var(--liq-slab));
  transform:translateX(3px);transform-origin:50% 50%;
  transition:background-color 320ms ease;will-change:transform}
/* on: the inversion. data-liq is written by the script and follows the
   droplet across the middle while it is dragged; without the script the
   live .on class drives the same look */
html[data-polish] .layerrow .sw[data-liq="on"],
html[data-polish] .layerrow.on .sw:not([data-liq]){background:var(--liq-on);box-shadow:inset 0 0 0 1px transparent}
html[data-polish] .layerrow .sw[data-liq="on"] i,
html[data-polish] .layerrow.on .sw:not([data-liq]) i{background:var(--liq-slab)}
html[data-polish] .layerrow.on .sw:not([data-liq]) i{transform:translateX(25px)}
@media (hover:hover){
  html[data-polish] .layerrow:hover .sw:not([data-liq="on"]){box-shadow:inset 0 0 0 1px var(--ink-4)}
}
/* the row is the keyboard switch, but the focus ring belongs to its pill */
html[data-polish] .layerrow:focus-visible{outline:none;box-shadow:none}
html[data-polish] .layerrow:focus-visible .sw,
html[data-polish] .layerrow:focus-visible .sw[data-liq="on"],
html[data-polish] .layerrow.on:focus-visible .sw:not([data-liq]){
  box-shadow:var(--focus)}

/* ── the same switch in the pinned nav row ───────────────────────────────
   It sits just before the row's divider and shows only once the article's
   own switch has scrolled up under the row (js/polish/toggle.js sets
   .pl-navsw-on), so the two are never on screen together. It fades in on
   the running head's fade. The maroon row carries the same ramp turned
   round: off is a sunk track with a pale droplet, on is a white track with
   a maroon droplet. 36 by 20 with a 14px droplet keeps the article
   switch's 3px of track all the way round. The label goes on phones; the
   switch alone is the target there, 44 by 44, and it gives back the room
   it can to the question beside it. */
/* the look is on the base rule and the show rule only shows it, so the
   hover and on rules below outrank the look and take effect */
html[data-polish] .hd .pl-navsw{
  display:none;align-items:center;gap:10px;flex:0 0 auto;height:47px;margin:0;padding:0 10px;
  border:0;border-radius:0;background:transparent;color:var(--mast-mute);
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:opacity var(--d-3) var(--e-out) var(--nx-lag,0s),
    color var(--d-2) var(--e-out),background-color var(--d-2) var(--e-out)}
html[data-polish] .hd nav.desktopnav.pl-navsw-on .pl-navsw{display:inline-flex}
@starting-style{
  html[data-polish] .hd nav.desktopnav.pl-navsw-on .pl-navsw{opacity:0}
}
@media (hover:hover){
  html[data-polish] .hd .pl-navsw:hover{color:var(--mast-ink);background:var(--mast-hover)}
  html[data-polish] .hd .pl-navsw:hover .pl-sw:not([data-liq="on"]){box-shadow:inset 0 0 0 1px var(--mast-mute)}
}
html[data-polish] .hd .pl-navsw[aria-checked="true"]{color:var(--mast-ink)}
/* the masthead's ring sits 2px outside a control; this one fills the row,
   so its ring is drawn inside it, as the section tabs' is */
html[data-polish] .hd .pl-navsw:focus-visible{outline-offset:-6px;border-radius:8px}
html[data-polish] .hd .pl-sw{
  position:relative;display:block;flex:0 0 auto;width:36px;height:20px;border-radius:999px;
  background:color-mix(in srgb,#000 24%,var(--mast));box-shadow:inset 0 0 0 1px var(--mast-line);
  touch-action:pan-y;transition:background-color 320ms ease,box-shadow 320ms ease}
html[data-polish] .hd .pl-sw i{
  position:absolute;left:0;top:50%;display:block;width:14px;height:14px;margin-top:-7px;
  border-radius:999px;background:color-mix(in srgb,var(--mast-ink) 66%,var(--mast));
  transform:translateX(3px);transform-origin:50% 50%;transition:background-color 320ms ease;will-change:transform}
html[data-polish] .hd .pl-sw[data-liq="on"]{background:var(--mast-ink);box-shadow:inset 0 0 0 1px transparent}
html[data-polish] .hd .pl-sw[data-liq="on"] i{background:var(--mast)}
/* reduced motion: no lag and no glide, a short fade, as the running head
   does there (the site's global switch cuts transitions to .01ms, hence
   the !important) */
@media (prefers-reduced-motion:reduce){
  html[data-polish] .hd .pl-navsw{transition:opacity var(--d-1) linear!important}
}
@media (max-width:720px){
  html[data-polish] .hd .pl-navsw{height:44px;padding:0 4px;margin-left:-4px}
  html[data-polish] .hd .pl-navsw:focus-visible{outline-offset:-3px}
  html[data-polish] .hd .pl-navlbl{display:none}
}

/* ── reading mode: links off, the rail steps away, the story centres ─────
   js/polish/toggle.js sequences it: the rail fades out, then the column
   centres; coming back, the column returns, then the rail fades in. The
   article keeps its width, so nothing reflows vertically. */
html[data-polish] .artgrid > .clrail{transition:opacity var(--d-3) var(--e-out)}
html[data-polish] .artgrid > .clrail.pl-rail-out{opacity:0;pointer-events:none;
  transition:opacity var(--d-2) var(--e-in)}
html[data-polish] .artgrid.pl-reading > .clrail{display:none}
@media (min-width:1081px){
  /* Keep both grid tracks: shifting by half the rail and gap centres the
     unchanged article without changing its width or reflowing its text. */
  html[data-polish] .artgrid.pl-reading > .art{
    position:relative;left:calc((330px + var(--s14)) / 2);justify-self:center}
}