/* SenPrints Seller Connector — documentation site
 *
 * Swiss/grid documentation layout: sidebar, content column, in-page contents.
 * Palette follows the SenPrints brand (amber #F59E0B / #B45309 on near-black
 * #0F0F11).
 *
 * Type is Poppins — the face senprints.com uses — with JetBrains Mono for code,
 * both self-hosted; see fonts.css.
 * Poppins is a geometric display sans with a tall x-height and wide, round
 * letterforms, so it sets larger than a text face at the same px and needs more
 * leading before dense paragraphs stay comfortable. Body is therefore 15.5px on
 * a 1.72 line-height rather than 16/1.68, and headings carry tighter tracking to
 * stop the wide caps from sprawling.
 *
 * Themes: the palette lives on :root (light). Dark is redefined twice — once
 * under prefers-color-scheme for visitors who never touch the switch, and once
 * under [data-theme="dark"] so the switch wins either way. Never declare a
 * colour only inside one of those blocks.
 */

@import url("fonts.css");

:root {
  --bg:          #F1F3F5;
  --surface:     #FFFFFF;
  --surface-2:   #F6F8FA;
  --surface-3:   #ECEFF3;
  --fg:          #14151A;
  --muted:       #4A515B;
  /* #737B86 measured 4.28:1 on the white footer surface — under AA for the
     10-12px column headings and registration number that use it. */
  --faint:       #6B737E;
  --line:        #DEE3E8;
  --line-strong: #C0C8D0;

  --accent:      #A14707;
  --accent-mark: #F59E0B;
  --accent-soft: rgba(245, 158, 11, 0.13);
  --accent-ink:  #1A1206;

  --code-bg:     #F1F4F7;
  --shadow:      0 1px 2px rgba(15, 15, 17, 0.05), 0 8px 24px rgba(15, 15, 17, 0.07);

  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 44rem;
  --sidebar: 15rem;
  --toc: 13rem;
  --gutter: 1.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0F0F11;
    --surface:     #16171B;
    --surface-2:   #1C1E23;
    --surface-3:   #23262C;
    --fg:          #E9EAEC;
    --muted:       #ACB2BA;
    --faint:       #7C848F;
    --line:        #2B2B2F;
    --line-strong: #3D3F46;

    --accent:      #F2AE45;
    --accent-mark: #F59E0B;
    --accent-soft: rgba(245, 158, 11, 0.15);
    --accent-ink:  #17100A;

    --code-bg:     #1C1E23;
    --shadow:      0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg:          #0F0F11;
  --surface:     #16171B;
  --surface-2:   #1C1E23;
  --surface-3:   #23262C;
  --fg:          #E9EAEC;
  --muted:       #ACB2BA;
  --faint:       #7C848F;
  --line:        #2B2B2F;
  --line-strong: #3D3F46;

  --accent:      #F2AE45;
  --accent-mark: #F59E0B;
  --accent-soft: rgba(245, 158, 11, 0.15);
  --accent-ink:  #17100A;

  --code-bg:     #1C1E23;
  --shadow:      0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent-mark);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 0.5rem; top: -3rem;
  z-index: 100;
  background: var(--accent-mark);
  color: var(--accent-ink);
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 150ms var(--ease);
}

.skip:focus { top: 0.5rem; }

svg.i {
  width: 1em; height: 1em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ============ top bar ============ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  position: relative;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
}

.brand span { overflow: hidden; text-overflow: ellipsis; }

.brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  object-fit: contain;
}

.topbar-sp { margin-left: auto; }

/* Bar icon buttons: Search, Menu, and the Close that ends a mobile search.
   All three exist only below the sidebar breakpoint and all three sit at the
   right end of the bar, so the brand stays in the first position the eye lands
   on and the controls stay under the thumb. 44px square is the touch minimum.
   `flex: none` is load-bearing: without it these shrink under pressure and the
   bar overflows the viewport instead of the buttons holding their size. */
.iconbtn {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 1.15rem;
}

.iconbtn:hover { color: var(--fg); }

/* One button, two glyphs: the X swaps in while the panel is open so Menu reads
   as a toggle rather than a second destination. */
.iconbtn .x { display: none; line-height: 0; }
[data-nav-open] .navtoggle .x { display: block; }
[data-nav-open] .navtoggle > svg { display: none; }

/* three-state theme switch */

.themeswitch {
  display: flex;
  border: 1px solid var(--line);
  background: var(--surface-2);
  flex: none;
}

.themeswitch button {
  width: 2rem; height: 2.1rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--faint);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0;
}

.themeswitch button:hover { color: var(--fg); }

.themeswitch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent-mark);
}

/* Inside the mobile nav panel the same control gets the room to be honest: full
   width, 44px tall, and each segment labelled. Three unlabelled 32px squares in
   a cramped bar were both under the touch minimum and a guess. */
.nav-theme { display: none; margin-top: 1.6rem; }

.themeswitch.wide { width: 100%; }

.themeswitch.wide button {
  flex: 1;
  width: auto;
  height: 2.75rem;
  grid-auto-flow: column;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ============ search ============ */

.search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 22rem; }

.search-in {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0 0.6rem;
  height: 2.1rem;
}

.search-in:focus-within { border-color: var(--accent-mark); }
.search-in > svg { color: var(--faint); font-size: 0.95rem; }

.search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.875rem;
  padding: 0;
  min-width: 0;
}

.search input:focus { outline: none; }
.search input::placeholder { color: var(--faint); }

.search kbd {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  border: 1px solid var(--line);
  padding: 0.05rem 0.3rem;
  background: var(--surface);
}

.results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  max-height: 24rem;
  overflow-y: auto;
  display: none;
  z-index: 40;
}

.results[data-open="true"] { display: block; }

.results a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.results a:last-child { border-bottom: 0; }
.results a:hover,
.results a[data-active="true"] { background: var(--accent-soft); }

.results .r-page {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.results .r-title { font-weight: 600; font-size: 0.9rem; display: block; }
.results .r-snip { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.results .r-empty { padding: 0.9rem 0.8rem; font-size: 0.875rem; color: var(--muted); }
.results mark { background: var(--accent-soft); color: inherit; font-weight: 600; }

/* ============ shell ============ */

.shell {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--toc);
  gap: 3rem;
  align-items: start;
}

/* ============ sidebar ============ */

.sidebar {
  position: sticky;
  top: 3.5rem;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  padding: 2.2rem 0 2rem;
}

.nav-group {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.7rem;
}

.nav-list { list-style: none; margin: 0 0 1.9rem; padding: 0; display: flex; flex-direction: column; }
.nav-list:last-child { margin-bottom: 0; }

.nav-list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem 0.4rem 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid var(--line);
}

.nav-list a:hover { color: var(--fg); background: var(--surface-2); border-left-color: var(--line-strong); }

.nav-list a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  border-left-color: var(--accent-mark);
  background: var(--accent-soft);
}

.nav-list svg { color: var(--faint); font-size: 1rem; }
.nav-list a[aria-current="page"] svg { color: var(--accent); }

/* ============ content ============ */

.content { padding: 2.6rem 0 2rem; min-width: 0; }
.content > * { max-width: var(--measure); }
.content > .hero,
.content > .cards,
.content > .figures,
.content > .tablewrap,
.content > .full { max-width: none; }

h1 {
  font-size: clamp(2rem, 4.2vw, 2.6rem);
  line-height: 1.13;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: balance;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.28rem;
  line-height: 1.32;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 3.1rem 0 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  position: relative;
  text-wrap: balance;
  scroll-margin-top: 5rem;
}

h2::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2.25rem; height: 2px;
  background: var(--accent-mark);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  margin: 1.9rem 0 0.5rem;
  scroll-margin-top: 5rem;
}

p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin: 0.35rem 0; }
li::marker { color: var(--accent-mark); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
strong { font-weight: 600; }

blockquote {
  margin: 1.4rem 0 1.6rem;
  padding: 1.05rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-mark);
}

blockquote p:last-child { margin: 0; }

code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: 0.08em 0.32em;
  overflow-wrap: anywhere;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.2rem;
}

pre code { background: none; border: 0; padding: 0; font-size: 0.82rem; }

/* ============ tables ============ */

.tablewrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.64rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

thead th {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
td code { white-space: nowrap; }

/* the two write tools are the one distinction a reviewer scans for */
tr.w td { background: var(--accent-soft); }
tr.w td:first-child { box-shadow: inset 3px 0 0 var(--accent-mark); }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--line-strong);
  color: var(--faint);
  white-space: nowrap;
}

.pill.write { color: var(--accent); border-color: var(--accent-mark); background: var(--accent-soft); }

/* ============ in-page contents ============ */

.toc {
  position: sticky;
  top: 3.5rem;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  padding: 2.9rem 0 2rem;
  font-size: 0.84rem;
}

.toc-h {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.7rem;
}

.toc ul { list-style: none; margin: 0; padding: 0; }

.toc a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.7rem;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid var(--line);
  line-height: 1.45;
}

.toc a:hover { color: var(--fg); border-left-color: var(--line-strong); }
.toc a[data-active="true"] { color: var(--accent); border-left-color: var(--accent-mark); }
.toc li.sub a { padding-left: 1.5rem; font-size: 0.8rem; }

/* ============ home: hero ============ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.8rem;
  align-items: start;
  margin-bottom: 2.6rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lede { font-size: 1.1rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.5rem; }

.cta { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0 0 1.3rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: var(--surface);
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.btn:hover { border-color: var(--accent-mark); }
.btn.primary { background: var(--accent-mark); border-color: var(--accent-mark); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.07); }

.endpoint {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--faint);
  margin: 0;
  overflow-wrap: anywhere;
}

.chatcard {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.3rem 1.35rem 1.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.chatcard-head {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.msg {
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 0.55rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  align-self: flex-end;
  max-width: 93%;
}

.msg.reply {
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--accent-mark);
  padding: 0.1rem 0 0.1rem 0.8rem;
  color: var(--muted);
  max-width: 100%;
}

.msg.reply b { color: var(--fg); font-weight: 600; }

.illus-note { font-size: 0.74rem; color: var(--faint); margin: 0.2rem 0 0; font-style: italic; }

/* ============ home: figures ============ */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0 0 2.4rem;
}

.fig { background: var(--surface); padding: 1.1rem 1.2rem 1.2rem; }

.fig .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  line-height: 1;
  font-weight: 500;
  display: block;
  margin-bottom: 0.35rem;
}

.fig.hl .n { color: var(--accent); }
.fig .l { font-size: 0.85rem; color: var(--muted); line-height: 1.45; display: block; }

/* ============ home: cards ============ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0 0 1rem;
}

.card {
  background: var(--surface);
  padding: 1.1rem 1.2rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 2px solid transparent;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}

.card:hover { border-top-color: var(--accent-mark); background: var(--surface-2); }
.card .t { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.97rem; }
.card .t svg { color: var(--accent); font-size: 1.05rem; }
.card .d { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }

/* ============ footer ============ */

.foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 4rem; }

/* One row, the way documentation sites in this space do it: who operates the
   service on the left, company links on the right. The postal address lives
   behind "About & offices" — a footer is for identifying the operator, not for
   reproducing the registry entry. */
.foot-in {
  max-width: 88rem;
  margin: 0 auto;
  padding: 1.3rem var(--gutter) 1.8rem;
  font-size: 0.84rem;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
}

.foot-legal { margin: 0; }
.foot .legal { font-weight: 600; color: var(--muted); text-decoration: none; }
.foot .legal:hover { color: var(--accent); text-decoration: underline; }
.foot .reg { font-family: var(--mono); font-size: 0.78rem; }

.foot-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

/* ============ responsive ============ */

@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: 2.5rem; }
  .toc { display: none; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero { grid-template-columns: 1fr; gap: 1.8rem; }
  .navtoggle { display: grid; }

  /* One appearance control, not two: below this width it lives in the panel,
     where it has room for labels. */
  .topbar-in .themeswitch { display: none; }
  .nav-theme { display: block; }

  /* Panel, not a strip. Anchored under the sticky topbar and closed by default,
     so no sideways gesture is ever required to reach a page. */
  .sidebar {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    z-index: 25;
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    display: none;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
  }

  [data-nav-open] .sidebar { display: block; }
  [data-nav-open] { overflow: hidden; }

  /* The group headings are the reason a panel beats a strip — put them back. */
  .nav-group { display: block; margin-top: 1.1rem; }
  .nav-group:first-child { margin-top: 0; }
  .nav-group + .nav-list { margin-bottom: 0; }

  .nav-list { flex-direction: column; gap: 0; margin: 0; padding: 0; }

  /* 44px rows: a menu is tapped, so the target has to be finger-sized. */
  .nav-list a { padding: 0.7rem 0.7rem; min-height: 2.75rem; }

  .content { padding-top: 2rem; }
}


@media (max-width: 620px) {
  :root { --gutter: 1.1rem; }
  /* 8px is the floor between adjacent touch targets, so the Search and Menu
     hit areas cannot be confused for one another. */
  .topbar-in { gap: 0.5rem; }
  .search kbd { display: none; }

  /* A permanent search field, a three-part theme switch and a Menu button do
     not fit beside the brand on a 360px screen — that combination was what
     pushed the bar 13px past the viewport and made the whole page scroll
     sideways. So the field collapses to its icon, the way Stripe, Tailwind and
     VitePress all handle it, and expands over the bar when tapped. The brand
     keeps its wordmark instead: a logo earns the space a search field was
     holding. */
  .search {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    display: none;
  }

  .searchtoggle { display: grid; }

  [data-search-open] .search { display: block; }
  [data-search-open] .searchclose { display: grid; }
  [data-search-open] .brand,
  [data-search-open] .searchtoggle,
  [data-search-open] .navtoggle { display: none; }

  /* The Close button rides at the right edge of the bar, clear of the field.
     The spacer has to go with it: two auto margins in the same row would split
     the free space and park Close in the middle of the field. */
  [data-search-open] .topbar-sp { display: none; }
  [data-search-open] .searchclose { position: relative; z-index: 1; margin-left: auto; }
  [data-search-open] .search { right: calc(var(--gutter) + 2.75rem); }

  /* 44px: the field is a touch target too, not just a box for text. */
  .search-in { height: 2.75rem; }

  /* Results run to the gutter rather than stopping under the Close button —
     the field is narrow enough already without the snippets inheriting its
     width. */
  [data-search-open] .results { right: -2.75rem; }

  /* Two short lines read better than one line broken mid-list. */
  .foot-in { flex-direction: column; gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}