/* Documentation styling. The palette is the landing page's, so the two read
   as one site, but the layout is different on purpose: the landing page is a
   photograph you scroll through, and this is something people arrive at with
   a question and want answered in one screen. No background image, no frosted
   panes, higher contrast, shorter measure. */
:root{
  --ink:#16101a; --ink-2:#1f1725;
  --paper:#faf6f8;
  --blossom:#ffb7c5; --rose:#d81b60;

  --bg:var(--paper); --surface:#fff;
  --text:#221a27; --text-dim:#5f5167; --hair:rgba(34,26,39,.14);
  --accent:var(--rose); --accent-soft:rgba(216,27,96,.09);
  --code-bg:rgba(34,26,39,.06);
  --measure:70ch;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --bg:var(--ink); --surface:var(--ink-2);
    --text:#f4ecf1; --text-dim:#b9a7c0; --hair:rgba(255,255,255,.13);
    --accent:var(--blossom); --accent-soft:rgba(255,183,197,.11);
    --code-bg:rgba(255,255,255,.07);
  }
}
:root[data-theme="dark"]{
  --bg:var(--ink); --surface:var(--ink-2);
  --text:#f4ecf1; --text-dim:#b9a7c0; --hair:rgba(255,255,255,.13);
  --accent:var(--blossom); --accent-soft:rgba(255,183,197,.11);
  --code-bg:rgba(255,255,255,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Karla,ui-sans-serif,system-ui,sans-serif;
  font-size:1.02rem; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--accent); color:var(--bg); padding:.6rem 1rem; border-radius:8px; z-index:10}

.topbar{
  display:flex; align-items:baseline; gap:.85rem;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  border-bottom:1px solid var(--hair);
  position:sticky; top:0; background:var(--bg); z-index:5;
}
.brand{
  font-family:Newsreader,Georgia,serif; font-size:1.35rem; font-weight:400;
  color:var(--text); text-decoration:none; letter-spacing:-.01em;
}
.crumb{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim)}

.shell{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1180px; margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.5rem) 4rem;
}
@media(min-width:900px){ .shell{grid-template-columns:210px minmax(0,1fr)} }

.side{display:flex; flex-direction:column; gap:.1rem; align-self:start}
@media(min-width:900px){ .side{position:sticky; top:5rem} }
.side a{
  color:var(--text-dim); text-decoration:none;
  padding:.42rem .7rem; border-radius:8px; font-size:.94rem;
  border-left:2px solid transparent;
}
.side a:hover{color:var(--text); background:var(--accent-soft)}
.side a.on{color:var(--accent); border-left-color:var(--accent); font-weight:600}

main{min-width:0}
h1{
  font-family:Newsreader,Georgia,serif; font-weight:300;
  font-size:clamp(2.1rem,1.5rem + 2vw,3rem); line-height:1.08;
  margin:0 0 .5rem; letter-spacing:-.015em;
}
.lede{font-size:1.12rem; color:var(--text-dim); max-width:var(--measure); margin:0 0 2.4rem}
h2{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem); line-height:1.2;
  margin:2.8rem 0 .8rem; letter-spacing:-.01em;
}
h3{font-size:1.02rem; font-weight:600; margin:1.8rem 0 .5rem}
p,ul,ol{max-width:var(--measure)}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem; padding-left:1.3rem}
li{margin:.3rem 0}
a{color:var(--accent)}

code{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.86em;
  background:var(--code-bg); padding:.13em .4em; border-radius:5px;
}
pre{
  background:#140e18; color:#e8dfe6; border:1px solid rgba(255,255,255,.11);
  border-radius:12px; padding:1.1rem 1.2rem; overflow-x:auto;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.84rem;
  line-height:1.65; max-width:100%;
}
pre code{background:none; padding:0; font-size:1em}
pre .c{color:#8b7f92}
pre .k{color:var(--blossom)}
pre .g{color:#8fd3a4}

.note, .warn{
  border-radius:12px; padding:1rem 1.2rem; margin:1.5rem 0;
  max-width:var(--measure); border:1px solid var(--hair);
  background:var(--accent-soft);
}
.note p:last-child, .warn p:last-child{margin-bottom:0}
.note strong, .warn strong{color:var(--accent)}
.warn{border-color:color-mix(in srgb,#e0603c 45%,transparent); background:rgba(224,96,60,.09)}
.warn strong{color:#e0603c}
:root[data-theme="dark"] .warn strong{color:#ff9878}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .warn strong{color:#ff9878}
}

.tablewrap{overflow-x:auto; margin:1.2rem 0; max-width:100%}
table{border-collapse:collapse; font-size:.94rem; width:100%}
th,td{text-align:left; padding:.62rem .7rem; border-bottom:1px solid var(--hair); vertical-align:top}
th{font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-dim); font-weight:600}
td code{white-space:nowrap}

.cards{display:grid; gap:.9rem; grid-template-columns:1fr; margin:1.5rem 0}
@media(min-width:700px){ .cards{grid-template-columns:1fr 1fr} }
.cards a{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--hair); border-radius:14px; padding:1.1rem 1.2rem;
  background:var(--surface);
}
.cards a:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.cards strong{display:block; color:var(--accent); margin-bottom:.25rem}
.cards span{color:var(--text-dim); font-size:.93rem}

.foot{
  border-top:1px solid var(--hair); padding:2rem clamp(1rem,4vw,2.5rem) 3rem;
  color:var(--text-dim); font-size:.87rem;
}
.foot p{max-width:var(--measure); margin:0 auto}

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