/* Liquid glass for the site's controls. The same tokens and parts as the QuettaBench page, keyed to this site's
   own colours. Loaded after the site stylesheet, so it only restyles; it adds no layout.
   button   clear glass face (secondary actions, icon buttons), 12px, 999px for pills and round icons
   primary  ink-tinted glass: dark glass with a bright top rim in light mode, frosted light glass with dark text in dark mode
   chip     thinner glass for small controls, 10px
   row      clickable rows stay flat at rest and turn to glass on hover
   All lift 1px with an accent-tinted rim on hover, press to .97, and show the accent ring on keyboard focus. */
:root, [data-theme=light] {
  --g-fill: rgba(255,255,255,.42); --g-fill-hi: rgba(255,255,255,.78); --g-rim: rgba(255,255,255,.85); --g-line: rgba(27,27,27,.10);
  --g-shadow: 0 8px 24px -10px rgba(27,27,27,.28), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(27,27,27,.06);
  --g-face: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.62));
  --g-chip: inset 0 1px 0 var(--g-rim), 0 1px 2px rgba(27,27,27,.06);
  --g-row: linear-gradient(180deg, rgba(255,255,255,.7), color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.3)));
  --g-ring: color-mix(in srgb, var(--accent) 40%, var(--g-line));
  --g-glow: 0 10px 22px -14px color-mix(in srgb, var(--accent) 60%, transparent);
  --g-ink-face: linear-gradient(180deg, color-mix(in srgb, var(--ink) 72%, #fff), color-mix(in srgb, var(--ink) 94%, transparent) 58%, var(--ink));
  --g-ink-line: color-mix(in srgb, var(--ink) 80%, #000);
  --g-ink-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.4), 0 8px 20px -12px rgba(27,27,27,.6);
}
[data-theme=dark] {
  --g-fill: rgba(255,255,255,.07); --g-fill-hi: rgba(255,255,255,.12); --g-rim: rgba(255,255,255,.22); --g-line: rgba(255,255,255,.10);
  --g-shadow: 0 8px 24px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3);
  --g-face: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --g-chip: inset 0 1px 0 var(--g-rim), 0 1px 2px rgba(0,0,0,.3);
  --g-row: linear-gradient(180deg, rgba(255,255,255,.09), color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.03)));
  --g-ink-face: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ink) 92%, transparent) 58%, color-mix(in srgb, var(--ink) 84%, #888));
  --g-ink-line: color-mix(in srgb, var(--ink) 70%, #fff);
  --g-ink-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.22), 0 8px 22px -12px rgba(0,0,0,.75);
}

/* primary */
.button-primary, .skip-link, .contact-orbit > span {
  background: var(--g-ink-face); border: 1px solid var(--g-ink-line); color: var(--bg); box-shadow: var(--g-ink-shadow);
  transition: transform .25s cubic-bezier(.34,1.45,.64,1), border-color .2s, box-shadow .25s; }
.button-primary { border-radius: 12px; }
.skip-link { border-radius: 12px; }
.button-primary:hover, .contact-orbit:hover > span {
  background: var(--g-ink-face); color: var(--bg); border-color: color-mix(in srgb, var(--accent) 45%, var(--g-ink-line));
  box-shadow: var(--g-ink-shadow), 0 12px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.button-primary:hover { transform: translateY(-1px); }

/* button */
.notes-btn, .nav-icon {
  background: var(--g-face); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); color: var(--ink);
  transition: transform .25s cubic-bezier(.34,1.45,.64,1), border-color .2s, box-shadow .25s, background .2s, color .2s; }
.notes-btn { border-radius: 12px; }
.notes-btn:hover, .nav-icon:hover, .notes-btn[aria-expanded=true] {
  background: var(--g-face); color: var(--ink); border-color: var(--g-ring); box-shadow: var(--g-shadow), var(--g-glow); transform: translateY(-1px); }
.notes-btn[aria-expanded=true] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--g-line)); transform: none; }

/* chip */
.contact-chip {
  background: var(--g-face); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); border-radius: 10px;
  transition: transform .25s cubic-bezier(.34,1.45,.64,1), border-color .2s, box-shadow .25s, color .2s; }
.contact-chip:hover, .contact-chip.is-copied { border-color: var(--g-ring); box-shadow: var(--g-shadow), var(--g-glow); transform: translateY(-1px); }

/* row: the glass sits on an inset layer so the cell keeps its square divider lines */
.tool-stack-cell { position: relative; isolation: isolate; }
.tool-stack-cell::before { content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: 12px; border: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .25s; }
.tool-stack-cell:hover { background: none; }
.tool-stack-cell:hover::before { background: var(--g-row); border-color: var(--g-line); box-shadow: var(--g-chip), var(--g-glow); }

/* press and focus */
.button-primary:active, .notes-btn:active, .nav-icon:active, .contact-chip:active { transform: scale(.97); transition-duration: 80ms; }
.contact-orbit:active > span { transform: scale(.94); }
.button-primary:focus-visible, .notes-btn:focus-visible, .nav-icon:focus-visible, .contact-chip:focus-visible, .tool-stack-cell:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .button-primary:hover, .button-primary:active, .notes-btn:hover, .notes-btn:active, .nav-icon:hover, .nav-icon:active,
  .contact-chip:hover, .contact-chip:active, .contact-orbit:active > span { transform: none; } }