/* Liquid controls, after Apple's Liquid Glass.
   A control is a small piece of glass: it lights up where the pointer is,
   drifts a few pixels toward it, and gives under a press, then springs back.
   Modes, set with data-liquid on the element:
     ""     full: glow, magnet, press   (buttons, pills)
     "soft" glow and press, no magnet    (tiles, list rows)
     "glow" glow only                    (text links, disclosure rows)
   Everything here is off under prefers-reduced-motion except the glow. */

.liquid {
  position: relative; isolation: isolate; overflow: hidden;
  --mx: 50%; --my: 50%; --tx: 0px; --ty: 0px; --press: 1;
  transform: translate(var(--tx), var(--ty)) scale(var(--press));
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, box-shadow .25s, color .2s;
  will-change: transform;
}
.liquid::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(140px circle at var(--mx) var(--my), rgb(255 255 255 / .55), rgb(255 255 255 / 0) 62%);
  opacity: 0; transition: opacity .3s;
}
.liquid.is-near::before { opacity: 1; }
.liquid.is-pressed { --press: .96; transition-duration: .12s; }
[data-liquid="glow"].liquid.is-pressed { --press: 1; }

/* the frosted edge: a thin light on the top rim, the way glass catches light */
.liquid::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
}
[data-liquid="glow"].liquid::after { display: none; }

/* outlined pills become glass: translucent, blurred behind, a soft lift when near */
.liquid.btn-ghost, .liquid.back {
  background: rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
}
.liquid.btn-ghost.is-near, .liquid.back.is-near { background: rgb(255 255 255 / .3); }

/* the solid emerald button keeps its color and gets depth instead */
.liquid.btn:not(.btn-ghost):not(.btn-dark) { box-shadow: 0 10px 24px -14px rgb(16 185 129 / .6); }
.liquid.btn:not(.btn-ghost):not(.btn-dark).is-near { box-shadow: 0 16px 32px -14px rgb(16 185 129 / .75); }
.liquid.btn:not(.btn-ghost):not(.btn-dark)::before {
  background: radial-gradient(140px circle at var(--mx) var(--my), rgb(255 255 255 / .38), rgb(255 255 255 / 0) 62%);
}

/* disclosure rows and list links: only the light moves */
summary.liquid::before, .toc a.liquid::before {
  background: radial-gradient(220px circle at var(--mx) var(--my), rgb(16 185 129 / .12), rgb(16 185 129 / 0) 62%);
}
/* list links stay on the baseline: no clipping, the glow lives inside the padding box */
.toc a.liquid { display: inline-block; overflow: visible; vertical-align: baseline; padding: 0 8px; margin-left: -8px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .liquid { transition: background-color .2s, box-shadow .25s, color .2s; transform: none; }
  .liquid.is-pressed { transform: none; }
}
/* the same, when the visitor flips the Reduce motion switch */
.rm .liquid { transition: background-color .2s, box-shadow .25s, color .2s; transform: none; }
.rm .liquid.is-pressed { transform: none; }

/* the site-wide Reduce motion switch (assets/motion.js), in every footer and in the hero */
.foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.rm-switch { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: none; color: var(--ink-2, #3B4453); box-shadow: inset 0 0 0 1px var(--line, #E3E8EF); font: 600 .82rem/1 var(--font, system-ui, sans-serif); cursor: pointer; }
.rm-switch:hover { color: var(--ink, #0B1220); box-shadow: inset 0 0 0 1.5px var(--ink-3, #6B7280); }
.rm-switch[hidden] { display: none; }
.rm-switch .knob { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: var(--ink-3, #6B7280); transition: background-color .2s; }
.rm-switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.rm-switch[aria-checked="true"] .knob { background: var(--emerald-deep, #047857); }
.rm-switch[aria-checked="true"] .knob::after { transform: translateX(12px); }

/* footer links grow an underline from the left */
footer li a { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 0 1.5px no-repeat; transition: background-size .3s cubic-bezier(.2,.7,.2,1), color .2s; }
footer li a:hover, footer li a:focus-visible { background-size: 100% 1.5px; }

/* Accessibility floor shared by every page (WCAG 2.2 AA).
   Jump links and Tab focus land below the 68px sticky nav (2.4.11),
   and footer links and checkboxes meet the 24px target size (2.5.8). */
html { scroll-padding-top: 88px; }
footer li a { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 24px; }
input[type="checkbox"] { min-width: 24px; min-height: 24px; }