/* SPDX-License-Identifier: AGPL-3.0-only */
@font-face {
  font-family:PocketText;
  src:url('assets/fonts/AtkinsonHyperlegibleNext.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap
}

/* Colors come from Pip's artwork: record-sleeve terracotta, paper, ink blue. */
:root {
  color-scheme:light;
  --bg:#fff;
  --surface:#f5f1e8;
  --surface-strong:#ece5d6;
  --ink:#17364d;
  --heading:#132f45;
  --muted:#446174;
  --accent:#254f70;
  --accent-ink:#fff;
  --accent-soft:#e8edf0;
  --link:#8b432e;
  --sleeve:#c7795c;
  --gold:#b8860b;
  --line:#d6dadb;
  --line-warm:#ddd4c2;
  --code-bg:#e9eef1;
  --pre-bg:#17364d;
  --pre-ink:#f5f1e8;
  --pre-muted:#aabdca;
  --shadow:0 1px 2px rgb(23 54 77 / 6%),0 4px 14px rgb(23 54 77 / 6%);
  --radius:.5rem;
  --radius-small:.3rem
}
@media (prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --bg:#10222f;
    --surface:#15293a;
    --surface-strong:#1b3347;
    --ink:#e9e3d6;
    --heading:#f5f1e8;
    --muted:#a9bac6;
    --accent:#9cc3e4;
    --accent-ink:#0e1f2b;
    --accent-soft:#1d3a52;
    --link:#eea98d;
    --sleeve:#d98a6b;
    --gold:#e0b651;
    --line:#2a4559;
    --line-warm:#2d4658;
    --code-bg:#1d3649;
    --pre-bg:#0a1822;
    --pre-ink:#ece6d9;
    --pre-muted:#8fa6b6;
    --shadow:0 1px 2px rgb(0 0 0 / 25%),0 6px 18px rgb(0 0 0 / 20%)
  }
}

* { box-sizing:border-box }
html {
  scroll-padding-top:1.5rem;
  scrollbar-color:var(--accent) var(--surface);
  -webkit-text-size-adjust:100%
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:18px/1.65 PocketText,system-ui,sans-serif;
  font-variant-ligatures:common-ligatures
}
::selection { background:var(--accent); color:var(--accent-ink) }
a {
  color:var(--link);
  text-underline-offset:.2em;
  text-decoration-thickness:1px
}
a:hover { text-decoration-thickness:2px }
a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--link);
  outline-offset:3px;
  border-radius:2px
}
input,button { font:inherit; caret-color:var(--link) }
input {
  width:100%;
  padding:.65rem .8rem;
  border:1px solid var(--muted);
  border-radius:var(--radius-small);
  background:var(--bg);
  color:var(--ink)
}
input::placeholder { color:var(--muted); opacity:1 }
button { cursor:pointer }
img { max-width:100%; height:auto }
.visually-hidden {
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap
}
.skip-link { position:absolute; left:-100vw; top:1rem }
.skip-link:focus { left:1rem; background:var(--bg); padding:1rem; z-index:5 }

/* Header */
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 3vw;
  border-bottom:1px solid var(--line-warm);
  gap:2rem;
  background:var(--surface)
}
.brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--accent);
  font-size:2rem;
  font-weight:760;
  letter-spacing:-.04em;
  line-height:1
}
.brand img { border-radius:.6rem }
.header-links { display:flex; gap:1.75rem; align-items:center }
.header-links a {
  font-size:1rem;
  padding:.5rem 0;
  color:var(--ink);
  text-decoration:none
}
.header-links a:hover { color:var(--link); text-decoration:underline }

/* Layout */
.layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  max-width:1600px;
  margin:auto
}
.layout.has-toc { grid-template-columns:270px minmax(0,1fr) 230px }
.sidebar {
  background:var(--surface);
  border-right:1px solid var(--line-warm)
}
.sidebar-inner {
  position:sticky;
  top:0;
  max-height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:1.75rem 1.4rem;
  scrollbar-width:thin
}
.navigation>summary { font-weight:700; cursor:pointer; padding:.5rem 0; display:none }
nav { display:grid; gap:.1rem }
.sidebar nav a {
  display:block;
  color:var(--ink);
  text-decoration:none;
  font-size:.93rem;
  padding:.42rem .6rem;
  border-radius:var(--radius-small);
  line-height:1.35
}
.sidebar nav a:hover { background:var(--surface-strong) }
.sidebar nav a[aria-current=page] { background:var(--accent); color:var(--accent-ink); font-weight:600 }
.nav-group { margin-top:1.1rem }
.nav-group h2 {
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:0 .6rem .35rem;
  font-weight:700
}
main {
  padding:2.5rem clamp(1.5rem,5vw,5.5rem) 3rem;
  min-width:0
}
article { max-width:74ch }

/* Search */
.search-box { margin:0 0 1rem; padding:0 0 1.25rem; border-bottom:1px solid var(--line-warm) }
.search-box label { font-size:.95rem; font-weight:650; display:block; margin-bottom:.5rem }
.search-box input { font-size:.9rem }
.search-box p { font-size:.83rem; margin:.5rem 0; color:var(--muted) }
.search-box ul { list-style:none; margin:0; padding:0 }
.search-box li { margin:0 0 .35rem }
.search-box li a {
  display:block;
  padding:.5rem .6rem;
  border-radius:var(--radius-small);
  text-decoration:none;
  color:var(--ink);
  line-height:1.35
}
.search-box li a:hover { background:var(--surface-strong) }
.result-title { display:block; font-weight:650; color:var(--link); font-size:.9rem }
.result-page { display:block; font-size:.75rem; color:var(--muted); margin-top:.1rem }
.result-text { display:block; font-size:.78rem; color:var(--muted); margin-top:.2rem }

/* Type */
.eyebrow {
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--link);
  margin:0 0 .6rem
}
h1,h2,h3,h4 { color:var(--heading) }
h1 {
  font-size:clamp(2.1rem,3.6vw,3.3rem);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:740;
  max-width:24ch;
  text-wrap:balance;
  margin:.25rem 0 1.25rem
}
h2 {
  font-size:1.7rem;
  line-height:1.2;
  margin:3rem 0 1rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance
}
h3 { font-size:1.3rem; margin:2rem 0 .6rem; line-height:1.35 }
h4 { font-size:1.08rem; margin:1.6rem 0 .5rem }
.headerlink {
  margin-left:.4rem;
  color:var(--muted);
  text-decoration:none;
  opacity:0;
  font-weight:400
}
h2:hover .headerlink,h3:hover .headerlink,h4:hover .headerlink,.headerlink:focus { opacity:1 }
h1 .headerlink { display:none }
article>h1+p { font-size:1.08em }
p { margin:1rem 0 }
li { margin:.4rem 0 }
li>ul,li>ol { margin:.3rem 0 }
hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0 }
strong { font-weight:700 }
code {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.84em;
  background:var(--code-bg);
  padding:.12em .3em;
  border-radius:3px;
  overflow-wrap:anywhere
}
.code-frame { position:relative; margin:1.25rem 0 }
pre {
  background:var(--pre-bg);
  color:var(--pre-ink);
  padding:1.15rem 1.4rem;
  border-radius:var(--radius);
  overflow:auto;
  font-size:.86rem;
  line-height:1.6;
  margin:1.25rem 0;
  tab-size:4
}
.code-frame pre { margin:0; padding-right:5rem }
pre code { background:transparent; padding:0; color:inherit; white-space:pre; overflow-wrap:normal; font-size:inherit }
.copy-button {
  position:absolute;
  top:.55rem;
  right:.55rem;
  padding:.3rem .65rem;
  font-size:.75rem;
  font-weight:650;
  color:var(--pre-ink);
  background:transparent;
  border:1px solid var(--pre-muted);
  border-radius:var(--radius-small);
  opacity:.8
}
.copy-button:hover,.copy-button:focus-visible { opacity:1; background:rgb(255 255 255 / 8%) }

/* Callouts: a blockquote opens most guides with a short "in brief" summary. */
blockquote {
  margin:1.5rem 0;
  padding:.9rem 1.3rem;
  background:var(--surface);
  border:1px solid var(--line-warm);
  border-left:4px solid var(--sleeve);
  border-radius:0 var(--radius) var(--radius) 0
}
blockquote>:first-child { margin-top:0 }
blockquote>:last-child { margin-bottom:0 }
blockquote ul { padding-left:1.2rem }

/* Tables */
table { border-collapse:collapse; width:100%; font-size:.9rem; line-height:1.5 }
th,td { padding:.7rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line) }
th { background:var(--surface); font-weight:700; border-bottom:2px solid var(--line-warm) }
tbody tr:hover td { background:color-mix(in srgb,var(--surface) 55%,transparent) }
table code { overflow-wrap:break-word }
.table-scroll { overflow-x:auto; margin:1.5rem 0; border:1px solid var(--line); border-radius:var(--radius) }
.table-scroll table { min-width:560px }
.table-scroll tr:last-child td { border-bottom:0 }

/* Buttons */
.primary-link,.secondary-link {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:.6rem 1.1rem;
  margin:.4rem .6rem .4rem 0;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:650
}
.primary-link { background:var(--accent); color:var(--accent-ink) }
.primary-link:hover { background:var(--heading); color:var(--bg) }
.secondary-link { border:1px solid var(--accent); color:var(--accent) }
.secondary-link:hover { background:var(--accent-soft) }

/* Page furniture */
.page-outline { margin:0 0 1.5rem; max-width:74ch; font-size:.95rem }
.page-outline summary { cursor:pointer; padding:.5rem 0; color:var(--muted) }
.page-outline ul { columns:2 }
.has-toc .page-outline { display:none }
.toc {
  position:sticky;
  top:0;
  align-self:start;
  max-height:100vh;
  overflow:auto;
  padding:2.6rem 1.25rem 2rem 0;
  font-size:.85rem
}
.toc-title {
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .6rem
}
.toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--line) }
.toc li { margin:0 }
.toc a {
  display:block;
  padding:.3rem 0 .3rem .85rem;
  margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--muted);
  text-decoration:none;
  line-height:1.35
}
.toc a:hover { color:var(--ink) }
.toc a.is-current { color:var(--link); border-left-color:var(--sleeve); font-weight:600 }
.pager {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  max-width:74ch;
  margin:3.5rem 0 0
}
.pager a {
  display:block;
  padding:.9rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--heading);
  font-weight:650;
  line-height:1.35
}
.pager a:hover { border-color:var(--sleeve); background:var(--surface) }
.pager span { display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.2rem }
.pager-next { grid-column:2; text-align:right }
.page-source { max-width:74ch; font-size:.85rem; margin:1.5rem 0 0 }
.page-source a { color:var(--muted) }

/* Home */
.home main { padding-top:1.5rem }
.home article { max-width:68rem }
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(12rem,.75fr);
  gap:2.5rem;
  align-items:center;
  padding:2.5rem clamp(1.5rem,4vw,3.25rem);
  margin:0 0 1rem;
  background:var(--surface);
  border:1px solid var(--line-warm);
  border-radius:1.25rem
}
.hero h1 { font-size:clamp(2.4rem,4.4vw,3.9rem); max-width:14ch; margin:.25rem 0 1rem }
.hero-copy h1+p { font-size:1.15rem; max-width:40ch }
.hero-meta { font-size:.88rem; color:var(--muted); margin:1rem 0 0 }
.hero-art { justify-self:center; width:100%; max-width:300px }
.hero-art img { display:block; width:100%; border-radius:1.6rem; box-shadow:var(--shadow) }
.principles,.cards,.three-ways { display:grid; gap:1rem; margin:1.5rem 0 }
.principles { grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)) }
.principle { padding:1.1rem 1.25rem; border-top:3px solid var(--sleeve); background:var(--surface); border-radius:0 0 var(--radius) var(--radius) }
.principle p { margin:0; font-size:.96rem }
.principle strong { display:block; color:var(--heading); font-size:1.05rem; margin-bottom:.35rem }
.group-label {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:2rem 0 -.4rem
}
.cards { grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr)) }
.card {
  position:relative;
  padding:1rem 1.2rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  transition:border-color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out
}
.card:hover { border-color:var(--sleeve); box-shadow:var(--shadow) }
.card:focus-within { border-color:var(--sleeve); outline:3px solid var(--link); outline-offset:2px }
.card p { margin:.35rem 0 0; font-size:.93rem; color:var(--muted); line-height:1.5 }
.card .card-title { margin:0; font-size:1.1rem; font-weight:700 }
.card .card-title a { color:var(--heading); text-decoration:none }
.card .card-title a::after { content:''; position:absolute; inset:0; border-radius:var(--radius) }
.card .card-title a:focus-visible { outline:none }
.card .card-title a::before { content:'→'; float:right; color:var(--sleeve); font-weight:400 }
.three-ways { grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); align-items:start }
.three-ways>div { min-width:0 }
.three-ways p { margin:.3rem 0 .5rem; font-size:.93rem }
.three-ways pre { font-size:.8rem }
.three-ways .code-frame pre { padding:2.5rem 1rem 1rem }

/* 404 */
.not-found-page { text-align:center; margin:3rem auto; max-width:40rem }
.not-found-page img { border-radius:1.4rem; box-shadow:var(--shadow) }
.not-found-page h1 { margin-inline:auto }
.not-found .site-footer { margin-inline:auto }

/* Generated provider reference */
.provider { border-bottom:1px solid var(--line); margin:0; scroll-margin-top:1rem }
.provider summary { padding:1rem .5rem; cursor:pointer; line-height:1.45 }
.provider summary code { color:var(--accent); font-weight:650; background:none }
.provider summary span { display:block; margin:.3rem 0 0 1.4rem; color:var(--muted); font-size:.98rem }
.provider[open] { background:var(--surface) }
.provider-body { padding:.5rem 1rem 1.5rem }
.provider-body pre { max-height:32rem }
.provider-body p { font-size:.9rem }
.provider[hidden] { display:none }
#provider-filter { margin-top:.5rem; max-width:36rem }
#provider-count { color:var(--muted); font-size:.9rem }

/* Footer */
.site-footer {
  border-top:1px solid var(--line);
  margin-top:4rem;
  padding-top:1.5rem;
  color:var(--muted);
  max-width:74ch
}
.home .site-footer { max-width:68rem }
.site-footer p { margin:.5rem 0; font-size:.92rem }
.footer-brand { display:flex; gap:.8rem; align-items:center }
.footer-brand img { border-radius:.5rem; flex:none }
.footer-brand strong { color:var(--heading) }
.footer-links a { margin-right:1rem }
.site-footer .build-info { font-size:.8rem }
a,button,summary { touch-action:manipulation }

@media (max-width:1240px) {
  .layout.has-toc { grid-template-columns:250px minmax(0,1fr) }
  .toc { display:none }
  .has-toc .page-outline { display:block }
}
@media (max-width:900px) {
  .layout,.layout.has-toc { grid-template-columns:220px minmax(0,1fr) }
  .sidebar-inner { padding:1.5rem 1rem }
  main { padding:2rem }
  body { font-size:17px }
  .header-links { gap:1rem }
  .hero { grid-template-columns:1fr; gap:1.5rem }
  .hero-art { max-width:180px; justify-self:start; order:-1 }
}
@media (max-width:680px) {
  .site-header { padding:.7rem 1rem; gap:.75rem; flex-wrap:wrap }
  .brand { font-size:1.7rem }
  .brand img { width:38px; height:38px }
  .header-links { gap:1rem; flex:1; justify-content:flex-end; flex-wrap:wrap; row-gap:0 }
  .header-links a { font-size:.88rem }
  .layout,.layout.has-toc { display:block }
  .sidebar { border-right:0; border-bottom:1px solid var(--line-warm) }
  .sidebar-inner { position:static; max-height:none; overflow:visible; padding:.8rem 1rem }
  .navigation>summary { display:list-item; min-height:44px }
  .navigation nav { padding-top:.5rem; grid-template-columns:1fr 1fr; column-gap:.75rem }
  .nav-group { margin-top:.6rem }
  .search-box { margin:0; padding:0; border:0 }
  .search-box label { margin:.4rem 0 }
  .search-box:has(#site-search:placeholder-shown) #search-status { margin:0 }
  main,.home main { padding:1.5rem 1rem 2rem }
  h1 { font-size:2.15rem }
  h2 { font-size:1.5rem }
  .hero { padding:1.5rem 1.25rem; border-radius:1rem }
  .hero h1 { font-size:2.35rem }
  .hero-art { max-width:120px }
  .page-outline ul { columns:1 }
  .provider summary { padding:1rem .2rem }
  .provider summary code { font-size:.8rem }
  pre { padding:1rem; font-size:.78rem }
  .code-frame pre { padding-right:1rem; padding-top:2.4rem }
  .pager { grid-template-columns:1fr }
  .pager-next { grid-column:1 }
  .footer-links a { display:inline-block; padding:.4rem 0 }
  .home .primary-link,.home .secondary-link { font-size:.95rem }
}
@media (prefers-reduced-motion:no-preference) {
  a,input { transition:background-color .15s ease-out,color .15s ease-out }
  .card:hover { transform:translateY(-2px) }
}
@media (prefers-reduced-motion:reduce) {
  .card { transition:none }
}
@media print {
  .site-header,.sidebar,.page-outline,.toc,.pager,.page-source,.copy-button { display:none }
  .layout,.layout.has-toc { display:block }
  main { padding:0 }
  body { font-size:11pt; background:#fff; color:#000 }
  pre { white-space:pre-wrap; background:#f5f1e8; color:#17364d }
  .table-scroll { overflow:visible; border:0 }
  .table-scroll table { min-width:0 }
  .hero { display:block; border:0; padding:0 }
  .hero-art { max-width:140px }
  h1 { font-size:26pt }
  h2 { break-after:avoid }
  .site-footer { break-inside:avoid }
}