/* ── switch.css ─────────────────────────────────────────────────────────────
   The theme control: a flat circular housing and a small dot — the same
   round mark that sits beside the "T" in the taywav icon mark — that
   travels 270° around the inside of the ring, from bottom-left (dark) to
   bottom-right (light), the long way over the top. The 90° gap stays at
   the bottom, the same dead-zone a real potentiometer's travel leaves.

   The dot's own position has no easing anywhere: it tracks the drag 1:1
   while dragging and snaps instantly to rest otherwise — the only animated
   part of a theme change is the pre-existing sitewide color crossfade
   (--dur-theme, base.css), which only fires once the knob is dragged all
   the way to the opposite rest position. See js/theme.js.

   The ring itself does get one animated cue: a lift (scale + shadow) while
   actively being dragged, toggled via .is-dragging in theme.js. That's the
   "physical control reporting its own state" case --ease-throw exists for
   (ANIMATION-VOCAB.md) — press/release is a real state change, distinct
   from the dot's own unanimated position tracking.
   ───────────────────────────────────────────────────────────────────────── */

.theme-knob {
  /* reset.css never strips native button chrome globally (no appearance
     reset for <button>) — without this, Chrome renders this button with
     native form-control appearance, which silently overrides border-color
     specifically (width/style apply from author CSS, color doesn't, even
     against an inline !important) while looking fine until you actually
     add a border and the color comes out wrong/native instead of ours.
     Found by direct getComputedStyle testing, not visually. */
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s2);
  touch-action: none; /* drag is vertical-only; don't let it fight page scroll */
}

/* Mobile: sized to sit inline in the closed top bar, between the wordmark
   and the menu button (nav.css's mobile grid) — small enough not to
   dominate that row. Desktop (below) goes the other way, bigger, since it
   has its own full standalone cell with room to spare. */
.knob-ring {
  position: relative;
  width: var(--s7);
  height: var(--s7);
  flex: none;
  border-radius: 50%;
  background: var(--switch-housing);
  border: 1px solid var(--switch-edge);
  transform: scale(1);
  box-shadow: 0 0 0 0 transparent;
  transition: transform 320ms var(--ease-throw), box-shadow 320ms var(--ease-throw);
}
@media (min-width: 40em) {
  .theme-knob { padding: var(--s4); }
  .knob-ring { width: var(--s9); height: var(--s9); }
  .knob-dot { width: 1.5rem; height: 1.5rem; }
}

/* A held-down knob lifts slightly off the page — makes the drag distance
   read as more consequential than a flat disc sliding in place would.
   Kept deliberately slight: this is a nudge, not a pop.

   The grow-in has its own short transition-delay (a quick tap or flick
   still never sees it enlarge — 150ms is well under even a fast tap's
   press-to-release time), but the *shrink-back* uses .knob-ring's plain
   undelayed transition above — CSS resolves a transition from the style
   being transitioned *to*, so removing .is-dragging always responds
   immediately regardless of whether the delay had even finished. */
.theme-knob.is-dragging .knob-ring {
  transform: scale(1.045);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--switch-plate) 22%, transparent);
  transition: transform 220ms var(--ease-throw) 150ms, box-shadow 220ms var(--ease-throw) 150ms;
}

/* The dot's rest positions, projected from the same 34%-radius, 225°/135°
   arc js/theme.js uses mid-drag (x = R·sin θ, y = −R·cos θ) — has to match
   that formula exactly, or the dot visibly jumps the instant a drag ends. */
.knob-dot {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--switch-plate);
  --dot-x: -24.04%;
  --dot-y: 24.04%;
  left: calc(50% + var(--dot-x));
  top: calc(50% + var(--dot-y));
  transform: translate(-50%, -50%);
}
[data-theme="light"] .knob-dot { --dot-x: 24.04%; }

.theme-knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .knob-ring { transition: none; }
}