/* WebHR Developers. One theme for every page: each colour is written once with
   light-dark(), so Light, Dark and Auto (the system's choice) can't drift apart.
   System font with size-specific tracking, translucent chrome, instant press
   feedback; every motion has a reduced-motion equivalent. */

:root {
  color-scheme: light dark;
  --brand: light-dark(#3b4fb8, #8d9cff);
  --brand-strong: light-dark(#2f3f96, #a9b5ff);
  --brand-tint: light-dark(rgba(59, 79, 184, 0.08), rgba(141, 156, 255, 0.13));
  --text: light-dark(#1d1d1f, #f2f3f7);
  --text-2: light-dark(#4b4f5c, #c3c7d4);
  --text-3: light-dark(#6e7383, #9298ab);
  --bg: light-dark(#ffffff, #0d0f1a);
  --bg-2: light-dark(#f5f6fa, #151829);
  --card: light-dark(#ffffff, #141728);
  --line: light-dark(rgba(29, 29, 31, 0.09), rgba(242, 243, 247, 0.10));
  --chrome: light-dark(rgba(255, 255, 255, 0.72), rgba(13, 15, 26, 0.72));
  --code-bg: light-dark(#14172b, #0a0c16);
  --code-text: #e8eaf6;
  --code-dim: #9aa1c2;
  --live: light-dark(#1f7a45, #4cc38a);
  --live-tint: light-dark(rgba(31, 122, 69, 0.10), rgba(76, 195, 138, 0.14));
  --planned: light-dark(#8a5a00, #e0b04f);
  --planned-tint: light-dark(rgba(214, 150, 20, 0.12), rgba(224, 176, 79, 0.14));
  --get: light-dark(#1f7a45, #4cc38a);
  --post: light-dark(#3b4fb8, #8d9cff);
  --put: light-dark(#a86a00, #e0b04f);
  --patch: light-dark(#7a4fb8, #b79cff);
  --delete: light-dark(#c23b3b, #ff8a8a);
  --warn-bg: light-dark(#fff6e5, #2a2212);
  --warn-line: light-dark(#e9b44c, #a8802f);
  --danger: light-dark(#c23b3b, #ff8a8a);
  --shadow-sm: light-dark(0 1px 2px rgba(15, 18, 34, 0.06), 0 1px 2px rgba(0, 0, 0, 0.45));
  --shadow-lg: light-dark(0 12px 32px rgba(15, 18, 34, 0.10), 0 12px 32px rgba(0, 0, 0, 0.5));
  --radius: 14px;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);   /* critically damped feel: fast out, no overshoot */
  --header-h: 3.5rem;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 100%/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  transition: background-color 250ms ease, color 250ms ease;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 50; background: var(--card); padding: 0.5rem 0.75rem; border-radius: 8px; }
.skip:focus { left: 0.5rem; }

/* ── Translucent header: content scrolls under it; a soft edge appears once it does ── */
header.top {
  position: sticky; top: 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  transition: box-shadow 200ms ease, background-color 250ms ease;
}
header.top[data-scrolled] { box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(15, 18, 34, 0.35); }
header.top .brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); }
header.top .brand:hover { text-decoration: none; }
header.top img { height: 1.6rem; width: auto; }
:root[data-theme="dark"] header.top img { filter: invert(1) hue-rotate(180deg) brightness(1.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.top img { filter: invert(1) hue-rotate(180deg) brightness(1.3); } }
header.top .brand span { font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); }
header.top nav { margin-left: auto; display: flex; gap: 0.25rem; }
header.top nav a { color: var(--text-2); font-size: 0.9375rem; padding: 0.4rem 0.7rem; border-radius: 999px; transition: background-color 150ms ease, color 150ms ease; }
header.top nav a:hover { text-decoration: none; background: var(--brand-tint); color: var(--text); }
header.top nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* Theme switch: a three-way segmented control, thumb slides to the choice. */
.theme-switch { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.theme-switch button {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 1.75rem;
  border: 0; background: none; color: var(--text-3); cursor: pointer; border-radius: 999px;
  transition: color 150ms ease, transform 100ms ease-out;
}
.theme-switch button:active { transform: scale(0.92); }
.theme-switch button[aria-checked="true"] { color: var(--text); }
.theme-switch svg { width: 1rem; height: 1rem; }
.theme-switch .thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 2rem; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform 320ms var(--spring); }

/* ── Layout ── */
.layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); max-width: 80rem; margin: 0 auto; }
aside.toc {
  position: sticky; top: var(--header-h); align-self: start; max-height: calc(100vh - var(--header-h));
  overflow-y: auto; padding: 1.75rem 1rem 2rem 1.25rem; font-size: 0.875rem; scrollbar-width: thin;
}
aside.toc .group { margin: 1.25rem 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
aside.toc .group:first-child { margin-top: 0; }
aside.toc a { display: block; padding: 0.3rem 0.65rem; margin: 1px 0; border-radius: 8px; color: var(--text-2); transition: background-color 150ms ease, color 150ms ease; }
aside.toc a:hover { text-decoration: none; background: var(--brand-tint); color: var(--text); }
aside.toc a[aria-current="true"] { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
main.doc { padding: 2.5rem 2.5rem 6rem; min-width: 0; max-width: 54rem; }
details.toc-mobile { display: none; }

/* ── Type: tighter tracking and leading as size grows ── */
.hero { padding: 1rem 0 0.5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--brand); background: var(--brand-tint); padding: 0.25rem 0.65rem; border-radius: 999px; }
h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.028em; font-weight: 700; margin: 0.9rem 0 0.75rem; }
h2 { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.018em; font-weight: 700; margin: 3.5rem 0 0.75rem; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; margin: 1.75rem 0 0.5rem; }
p, li { color: var(--text-2); }
strong { color: var(--text); font-weight: 600; }
.lead { font-size: 1.1875rem; line-height: 1.55; letter-spacing: -0.006em; color: var(--text-2); max-width: 42rem; margin: 0 0 1.5rem; }
.fine { font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--text-3); }

/* ── Buttons: feedback on press, not on release ── */
.btn { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.9375rem/1 system-ui, sans-serif; letter-spacing: -0.005em; padding: 0.7rem 1.1rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 100ms ease-out, background-color 150ms ease; }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--brand); color: light-dark(#fff, #0d0f1a); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--brand-strong); }
.btn.ghost { background: var(--bg-2); color: var(--text); border-color: var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2rem; }

/* ── Cards, steps, notes ── */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0.5rem 0 1rem; }
.fact, .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.fact .k { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.fact .v { margin-top: 0.3rem; color: var(--text); font-size: 0.9375rem; }
.fact code { overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
a.tile { display: block; color: inherit; transition: transform 160ms var(--spring), box-shadow 160ms ease, border-color 160ms ease; }
a.tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-lg); }
a.tile:active { transform: scale(0.985); }
.tile h4 { margin: 0 0 0.25rem; font-size: 1rem; letter-spacing: -0.01em; color: var(--text); }
.tile p { margin: 0; font-size: 0.875rem; }
.tile .count { margin-top: 0.6rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1.1rem 1rem 3.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); position: absolute; left: 1rem; top: 0.95rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: light-dark(#fff, #0d0f1a); font-size: 0.8125rem; font-weight: 700; }
.note, .warn { border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1.25rem 0; font-size: 0.9375rem; }
.note { background: var(--brand-tint); }
.warn { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-line); }
.note p, .warn p { margin: 0; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; font: 600 0.6875rem/1 system-ui, sans-serif; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.3rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.badge.live { color: var(--live); background: var(--live-tint); }
.badge.live::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor; }
.badge.planned { color: var(--planned); background: var(--planned-tint); }
.badge.scope { color: var(--text-2); background: var(--bg-2); text-transform: none; letter-spacing: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }
.method { display: inline-block; min-width: 3.6rem; text-align: center; font: 700 0.6875rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; padding: 0.32rem 0.4rem; border-radius: 6px; color: light-dark(#fff, #0d0f1a); }
.method.get { background: var(--get); } .method.post { background: var(--post); } .method.put { background: var(--put); }
.method.patch { background: var(--patch); } .method.delete { background: var(--delete); }

/* ── Tables ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.65rem 0.9rem; vertical-align: top; }
tr + tr td { border-top: 1px solid var(--line); }
th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); }
td { color: var(--text-2); }

/* ── Code ── */
code { font: 0.875em/1.5 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg-2); padding: 0.1em 0.4em; border-radius: 6px; color: var(--text); }
.code { background: var(--code-bg); border-radius: var(--radius); margin: 1rem 0; overflow: hidden; box-shadow: var(--shadow-sm); }
.code-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem 0.45rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.code-bar .label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--code-dim); }
.code pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; color: var(--code-text); }
.code pre code { background: none; padding: 0; color: inherit; font-size: 0.8125rem; line-height: 1.65; }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 600 0.75rem/1 system-ui, sans-serif; color: var(--code-dim); padding: 0.45rem 0.75rem; border-radius: 7px; transition: color 150ms ease, transform 100ms ease-out; }
.seg button:active { transform: scale(0.95); }
.seg button[aria-selected="true"] { color: #fff; }
.seg .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.14); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 320ms var(--spring), width 320ms var(--spring); }
.copy { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; border: 0; cursor: pointer; border-radius: 8px; padding: 0.4rem 0.65rem; background: rgba(255, 255, 255, 0.07); color: var(--code-dim); font: 600 0.75rem/1 system-ui, sans-serif; transition: transform 100ms ease-out, background-color 150ms ease, color 150ms ease; }
.copy:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.copy:active { transform: scale(0.94); }
.copy[data-done] { color: #7ee2a8; }
.copy svg { width: 0.9rem; height: 0.9rem; }

/* ── Forms (request builder, reference filters) ── */
.builder { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.25rem; box-shadow: var(--shadow-lg); margin: 1.25rem 0; }
.builder .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.field { display: grid; gap: 0.3rem; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.field .hint { font-size: 0.75rem; color: var(--text-3); }
input, select, textarea { font: 0.9375rem/1.4 system-ui, sans-serif; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; width: 100%; transition: border-color 150ms ease, box-shadow 150ms ease; }
textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8125rem; min-height: 9rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
[aria-invalid="true"] { border-color: var(--danger); }
.endpoint-line { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.25rem 0 0.75rem; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-2); }
.check input { width: 1rem; height: 1rem; accent-color: var(--brand); }
.status { font-size: 0.8125rem; color: var(--text-3); min-height: 1.2em; }
.status.error { color: var(--danger); }

/* ── API reference ── */
.ref { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); max-width: 86rem; margin: 0 auto; }
.ref-nav { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.ref-tools { padding: 1rem 1rem 0.75rem; display: grid; gap: 0.6rem; }
.ref-tools input { padding: 0.5rem 0.7rem; font-size: 0.875rem; border-radius: 10px; background: var(--bg-2); }
.filter { display: flex; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.filter button { flex: 1; border: 0; background: none; cursor: pointer; padding: 0.4rem 0.3rem; border-radius: 7px; font: 600 0.75rem/1 system-ui, sans-serif; color: var(--text-3); transition: background-color 150ms ease, color 150ms ease, transform 100ms ease-out; }
.filter button:active { transform: scale(0.96); }
.filter button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.ref-list { overflow-y: auto; padding: 0 0.75rem 2rem; font-size: 0.875rem; scrollbar-width: thin; }
.ref-group > summary { list-style: none; cursor: pointer; margin: 1rem 0 0.3rem; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.ref-group > summary::-webkit-details-marker { display: none; }
.ref-group > summary::after { content: "›"; float: right; transition: transform 200ms var(--spring); }
.ref-group[open] > summary::after { transform: rotate(90deg); }
.ref-tag { margin: 0.4rem 0 0.15rem; padding: 0 0.5rem; font-weight: 600; color: var(--text); font-size: 0.8125rem; }
.ref-list a { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 8px; color: var(--text-2); }
.ref-list a:hover { text-decoration: none; background: var(--brand-tint); color: var(--text); }
.ref-list a[aria-current="true"] { background: var(--brand-tint); color: var(--brand); }
.ref-list a .m { font: 700 0.625rem/1 ui-monospace, monospace; min-width: 2.6rem; color: var(--text-3); }
.ref-list a.planned { opacity: 0.72; }
.ref-list a .dot { margin-left: auto; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--live); flex: none; }
.ref-list a.planned .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--planned); }
.ref-main { padding: 2rem 2.5rem 8rem; min-width: 0; }
.ref-intro { max-width: 46rem; }
.ref-section { margin-top: 3rem; }
.ref-section > h2 { margin: 0 0 0.25rem; }
.op { margin: 1.25rem 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 1rem); }
.op-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.op-head h3 { margin: 0; font-size: 1.0625rem; flex: 1 1 100%; order: -1; }
.op-head code { background: none; padding: 0; font-size: 0.875rem; color: var(--text); overflow-wrap: anywhere; }
.op-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.op-doc { padding: 1rem 1.25rem; min-width: 0; }
.op-doc h4 { margin: 1.1rem 0 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.op-doc h4:first-child { margin-top: 0; }
.op-doc p { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.op-samples { background: var(--code-bg); min-width: 0; }
.op-samples .code { margin: 0; border-radius: 0; box-shadow: none; }
.op.planned .op-samples::before { content: "Planned: not callable yet"; display: block; padding: 0.55rem 1rem 0; font: 600 0.6875rem/1.4 system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #e0b04f; }
.params { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.params td { padding: 0.45rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.params tr:first-child td { border-top: 0; }
.params td:first-child { width: 42%; padding-right: 0.75rem; }
.params .name { font: 600 0.8125rem ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); overflow-wrap: anywhere; }
.params .type { display: block; font-size: 0.75rem; color: var(--text-3); }
.params .req { color: var(--danger); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; margin-left: 0.3rem; }
.params .desc { color: var(--text-2); }
.schema details { margin-left: 0.9rem; border-left: 1px dashed var(--line); padding-left: 0.75rem; }
.schema summary { cursor: pointer; font-size: 0.8125rem; color: var(--brand); margin: 0.2rem 0; }
.empty { padding: 3rem 0; text-align: center; color: var(--text-3); }

footer.foot { padding: 2rem 1.25rem 3rem; text-align: center; font-size: 0.8125rem; color: var(--text-3); }

/* ── Narrow screens ── */
@media (max-width: 64rem) {
  .op-body { grid-template-columns: 1fr; }
}
@media (max-width: 56rem) {
  .layout, .ref { grid-template-columns: 1fr; }
  aside.toc { display: none; }
  .ref-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .ref-list { max-height: 50vh; }
  main.doc { padding: 1.25rem 1rem 4rem; }
  .ref-main { padding: 1.25rem 1rem 5rem; }
  .facts { grid-template-columns: 1fr; }
  details.toc-mobile { display: block; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  details.toc-mobile summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; list-style: none; }
  details.toc-mobile summary::-webkit-details-marker { display: none; }
  details.toc-mobile summary::after { content: "▾"; float: right; color: var(--text-3); transition: transform 200ms var(--spring); }
  details.toc-mobile[open] summary::after { transform: rotate(180deg); }
  details.toc-mobile nav { padding: 0 0.5rem 0.75rem; display: grid; }
  details.toc-mobile nav a { padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--text-2); }
  header.top { padding: 0 0.75rem; gap: 0.5rem; }
  header.top .brand span, header.top nav a.wide { display: none; }
  h2 { margin-top: 2.75rem; }
}

/* ── Accessibility preferences ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .btn:active, .seg button:active, .copy:active, a.tile:active, .theme-switch button:active, .filter button:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  header.top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
}
@media (prefers-contrast: more) {
  :root { --line: light-dark(rgba(29, 29, 31, 0.45), rgba(242, 243, 247, 0.45)); --text-2: var(--text); --text-3: var(--text-2); }
  header.top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--text); }
  .code, .op { outline: 1px solid var(--text); }
}