/* ============================================================
   switch.css — the digital ⇄ security toggle.

   A shared component: it appears on every page, so it lives in
   its own file rather than inside any one page's stylesheet.
   Colours come from tokens.css, so it follows the chosen side.
   ============================================================ */

/* ---------- the toggle: always at the bottom, always open -----
   It stays an expanded pill on every screen. The icons carry the
   two trades: a grid resolving into fluid forms for digital, and
   </> for security.
   -------------------------------------------------------------- */
/* ---------- the dock -----------------------------------------
   The sticky row at the foot of every page. The pill used to be the
   sticky element itself; the background-lines control now sits beside
   it, and that control has to share the pill's place rather than float
   in a corner — in the corner it landed on the CV's sticky pager, on
   the first characters of every line of an article, and on the copy of
   an open card.

   So the sticky position and the margins that make the pill's gap above
   the footer live here now, unchanged and in the same numbers. The dock
   is exactly as wide as the pill, so the pill is still the same box, in
   the same place, centred the same way; the control hangs off its right
   edge without widening it and without adding a second band.

   Sticky rather than fixed, for the reason it always was: it floats at
   the foot of the window while there is page left, then reaches its own
   place in the flow and stops there. Fixed stayed pinned to the window,
   so the only way to keep it off the footer was to pad the footer out
   by its height, which is what made the footer on the landing page
   nearly three times the one on the CV.
   -------------------------------------------------------------- */
.switch-dock {
  position: sticky;
  bottom: clamp(1rem, 3vh, 1.75rem);
  margin: clamp(2.5rem, 6vh, 4rem) auto clamp(1.5rem, 4vh, 2.5rem);
  width: max-content;
  max-width: calc(100vw - 2rem);
  z-index: 60;
}

.switch {
  /* relative, so the thumb and the lines control both measure from it;
     the dock owns where it sits */
  position: relative;
  margin: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  padding: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
}
.switch__thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: var(--panel-strong);
  border-radius: 999px;
  transition: transform var(--dur-breath) var(--ease-sand);
}
html[data-mode="security"] .switch__thumb { transform: translateX(100%); }
html.no-motion .switch__thumb { transition: none; }

.switch__opt {
  /* The toggle rides on every page, and only main.css carried the button
     reset — so on the CV and the reading room these kept the browser's own
     buttonface background and outset border, and the pill read as two
     boxed buttons instead of one switch. A shared component resets its
     own element. */
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;

  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  min-width: 7.5rem;
  min-height: 2.75rem;     /* 44px: the target itself, not counting the pill */
  padding: 0.5rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.02em;
  color: var(--panel-dim);
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--dur-breath) var(--ease-sand);
}
.switch__opt[aria-pressed="true"] { color: #111; }
.switch__opt:hover[aria-pressed="false"] { color: var(--panel-strong); }

.switch__icon {
  display: flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem;
  flex: none;
}
.switch__icon svg { width: 100%; height: 100%; }
.switch__icon--glyph { font-size: 0.82rem; letter-spacing: -0.04em; }

/* the toggle announces changes through this, so it ships with it */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- getting out of the way ---------------------------
   The pill floats over the page, so it must never be the reason
   somebody cannot finish something. While the shell has focus it
   recedes: you are typing into the panel underneath it.

   This fades with `filter`, not `opacity`, and does not touch
   `transform`. The entrance tween writes both of those inline every
   frame, and a CSS transition on a property GSAP is animating reads
   its own in-flight value back as the start of the next frame — the
   entrance stalls a few percent in and the pill never arrives.

   The whole dock recedes, not just the pill: the lines control rides in
   the same row, and half a row fading out would be worse than none of
   it. pointer-events inherits, so the pill still answers none while the
   shell is being typed into and auto again afterwards. */
.switch-dock { transition: filter var(--dur-breath) var(--ease-sand); }
body.is-typing .switch-dock { filter: opacity(0.12); pointer-events: none; }
body.is-typing .switch-dock:focus-within { filter: none; pointer-events: auto; }
html.no-motion .switch-dock { transition: none; }

/* At 320px the pill and the lines control together are wider than the
   screen, so the pill's options give up the padding they do not need.
   Both labels stay, because a toggle whose labels vanish is a toggle
   nobody can read. */
@media (max-width: 359px) {
  .switch__opt { min-width: 5.75rem; padding-inline: 0.7rem; }
}