/* phpguzzle.org — Swiss × Brutalist docs system */

:root{
  --sans:'Helvetica Neue',Helvetica,Arial,'Segoe UI',Roboto,sans-serif;
  --body:'Golos Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --accent:#e8431f;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f4f3f0;
  --ink:#111111;
  --text:#181818;
  --muted:#5d5d58;
  --faint:#8f8f88;
  --line:#e4e3df;
  --rule:#111111;
  --code-bg:#faf9f6;
  --accent-ink:#ffffff;
}
html[data-theme="dark"]{
  --bg:#0e0e0f;
  --surface:#141416;
  --surface-2:#1b1b1e;
  --ink:#f0efe9;
  --text:#e9e8e2;
  --muted:#a0a09a;
  --faint:#6f6f69;
  --line:#2a2a2d;
  --rule:#f0efe9;
  --code-bg:#0a0a0b;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:auto;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:40;height:56px;display:flex;align-items:center;gap:1.4rem;padding:0 1.6rem;background:var(--bg);border-bottom:2px solid var(--rule)}
.brand{display:flex;align-items:baseline;gap:1px;cursor:pointer;flex:none;font-family:var(--sans);font-weight:700;font-size:1.12rem;letter-spacing:-.025em;color:var(--ink)}
.brand .dot{color:var(--accent)}
.brand .tld{color:var(--faint);font-weight:700}
.spring{flex:1}
.search{display:flex;align-items:center;gap:.6rem;height:34px;width:min(330px,34vw);padding:0 .7rem;background:var(--surface);border:1.5px solid var(--line);color:var(--muted);font-size:.82rem;flex:none}
.search:focus-within{border-color:var(--ink)}
.search-go{display:grid;place-items:center;border:none;background:none;color:var(--muted);padding:0;flex:none;cursor:pointer}
.search-go:hover{color:var(--accent)}
.search input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:.82rem;color:var(--text)}
.search input::placeholder{color:var(--muted)}
.search .k{font-family:var(--mono);font-size:.66rem;color:var(--faint);border:1px solid var(--line);padding:.05rem .3rem;flex:none}
.langs{display:flex;gap:.1rem;flex:none}
.langs a,.langs button{font-family:var(--mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border:none;background:none;color:var(--muted);padding:.3rem .5rem;cursor:pointer}
.langs a.on,.langs button.on{color:var(--accent)}
.langs a:hover,.langs button:hover{color:var(--ink)}
.langs .off{color:var(--faint);opacity:.45;cursor:not-allowed}
.langs .off:hover{color:var(--faint)}
.iconbtn{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line);color:var(--muted);cursor:pointer}
.iconbtn:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- docs layout ---------- */
.docs{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:262px minmax(0,1fr) 216px}
.sidebar{position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);overflow-y:auto;padding:1.7rem 1.1rem 2rem 1.6rem;border-right:1.5px solid var(--line);scrollbar-width:thin}
.sb-group{margin-bottom:1.6rem}
.sb-h{font-family:var(--mono);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);padding:0 .2rem .5rem;margin-bottom:.5rem;border-bottom:2px solid var(--rule);display:flex;gap:.5rem}
.sb-h .gi{color:var(--accent)}
.sb-item{display:flex;gap:.7rem;align-items:baseline;padding:.6rem .5rem;color:var(--text);font-size:.875rem;line-height:1.3;cursor:pointer;border-bottom:1px solid var(--line);transition:.1s}
.sb-item .n{font-family:var(--mono);font-size:.7rem;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.sb-item:hover{color:var(--accent)}
.sb-item.off{opacity:.4;pointer-events:none}
.sb-item.on{color:var(--accent);font-weight:700;border-left:2px solid var(--accent);padding-left:calc(.5rem - 2px)}
.sb-item.on .n{color:var(--accent)}

/* ---------- content ---------- */
.content{padding:2.6rem 3.6rem 5rem;min-width:0;max-width:820px}
.kicker{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:22px;height:2px;background:var(--accent)}
.artmeta{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.7rem 0;border-top:2px solid var(--rule);border-bottom:1px solid var(--line);margin:1.1rem 0 2rem}
.artmeta span{white-space:nowrap}
.artmeta .ac{color:var(--accent)}

/* ---------- prose ---------- */
.prose{font-size:1.02rem;color:var(--text);counter-reset:h2}
.prose h1{font-family:var(--sans);font-weight:700;font-size:3rem;line-height:1.02;letter-spacing:-.03em;margin-bottom:0;color:var(--ink);text-wrap:balance}
.prose .lede,.prose > p:first-of-type{font-size:1.24rem;line-height:1.5;letter-spacing:-.01em;color:var(--ink);margin-bottom:2rem;font-weight:400}
.prose h2{font-family:var(--sans);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);margin:2.8rem 0 1rem;padding-top:1.5rem;border-top:2px solid var(--rule);scroll-margin-top:74px;display:flex;gap:1.1rem;align-items:baseline;counter-increment:h2}
.prose h2::before{content:counter(h2,decimal-leading-zero);font-family:var(--mono);font-size:2.4rem;font-weight:600;line-height:.9;letter-spacing:-.03em;color:var(--accent);flex:none}
.prose h2:first-of-type{margin-top:1.2rem}
.prose h3{font-family:var(--sans);font-weight:700;font-size:1.2rem;margin:1.9rem 0 .6rem;letter-spacing:-.01em;color:var(--ink);scroll-margin-top:74px}
.prose p{margin-bottom:1.15rem}
.prose ul,.prose ol{list-style:none;margin:0 0 1.4rem;padding:0}
.prose ul li{padding:.6rem 0 .6rem 1.6rem;border-bottom:1px solid var(--line);position:relative;line-height:1.5}
.prose ul li::before{content:"\2192";position:absolute;left:0;color:var(--accent);font-weight:700}
.prose ol{counter-reset:ol}
.prose ol li{padding:.6rem 0 .6rem 2rem;border-bottom:1px solid var(--line);position:relative;counter-increment:ol;line-height:1.5}
.prose ol li::before{content:counter(ol,decimal-leading-zero);position:absolute;left:0;font-family:var(--mono);font-size:.78rem;color:var(--accent);font-weight:600}
.prose li ul,.prose li ol{margin:.5rem 0 0}
.prose code{font-family:var(--mono);font-size:.84em;background:var(--surface-2);border:1px solid var(--line);padding:.05rem .35rem;color:color-mix(in srgb,var(--ink) 85%,var(--accent))}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{border-bottom:1.5px solid var(--accent)}
.prose a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.prose a[href^="http"]:not([href*="phpguzzle.org"])::after{content:" \2197";font-size:.85em;color:var(--accent)}
.prose blockquote{margin:1.5rem 0;padding:1rem 1.3rem;background:var(--surface-2);border-left:3px solid var(--accent);font-size:.97rem;color:var(--ink)}
.prose blockquote p{margin:0}
.prose blockquote code{background:var(--bg)}
.prose hr{border:none;border-top:2px solid var(--rule);margin:2.4rem 0}
.prose h2 .ha,.prose h3 .ha{font-family:var(--mono);font-weight:400;color:var(--faint);border:none;margin-left:.6rem;opacity:0;transition:.12s;font-size:.7em}
.prose h2:hover .ha,.prose h3:hover .ha{opacity:1}
.prose .ha:hover{background:none;color:var(--accent)}
.prose .ha.copied{opacity:1;color:var(--accent)}

/* ---------- code blocks ---------- */
/* Shiki ships a light theme (dark tokens on white), so the code surface is pinned
   to a light island in both themes — keeps tokens readable under dark mode. */
.cb{margin:0 0 1.5rem;border:2px solid #111111}
.cb-bar{display:flex;align-items:center;height:36px;padding:0 .5rem 0 .9rem;background:#faf9f6;border-bottom:1.5px solid #e4e3df}
.cb-lang{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid #e4e3df;padding:.05rem .35rem}
.cb-copy{margin-left:auto;display:flex;align-items:center;gap:.35rem;background:none;border:none;color:#5d5d58;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;padding:.3rem .4rem}
.cb-copy:hover{color:var(--accent)}
.cb-copy.copied{color:var(--accent)}
.cb pre{margin:0!important;background:#ffffff!important;padding:.9rem 0!important;overflow-x:auto;display:flex}
.cb pre code{font-family:var(--mono);font-size:.82rem;line-height:1.65;display:block;flex:1;min-width:0;padding:0 1.4rem;background:none!important}
.line-numbers{display:flex;flex-direction:column;flex:none;padding:0 .9rem 0 .6rem;border-right:1px solid #e4e3df;user-select:none;text-align:right}
.line-numbers span{font-family:var(--mono);font-size:.82rem;line-height:1.65;color:#b9b9b3}

/* ---------- feedback ---------- */
.fb{margin-top:3rem;padding:1.1rem 1.2rem;border:2px solid var(--rule);background:var(--surface);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.fb p{font-size:.9rem;color:var(--muted);margin:0}
.fb .acts{display:flex;gap:.5rem;margin-left:auto}
.btn{font-family:var(--mono);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:.5rem .9rem;border:1.5px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer;transition:.12s;text-decoration:none;display:inline-block}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{filter:brightness(1.08)}

/* ---------- toc rail ---------- */
.toc{position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;padding:2.7rem 1.4rem 2rem .4rem}
.toc-h{font-family:var(--mono);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin-bottom:.8rem;padding-bottom:.4rem;border-bottom:2px solid var(--rule)}
.toc a{display:flex;gap:.6rem;font-size:.78rem;line-height:1.4;color:var(--muted);padding:.35rem 0;cursor:pointer;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.toc a .tn{font-family:var(--mono);font-size:.66rem;color:var(--faint);flex:none}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--accent)}
.toc a.on .tn{color:var(--accent)}

/* ---------- home ---------- */
.home{max-width:1180px;margin:0 auto;padding:0 1.6rem}
.home-hero{padding:4.5rem 0 3rem;border-bottom:2px solid var(--rule)}
.home .kick{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);padding:.3rem .7rem;margin-bottom:1.6rem}
.home h1{font-family:var(--sans);font-weight:700;font-size:clamp(2.8rem,6.5vw,5rem);line-height:.98;letter-spacing:-.035em;max-width:18ch;margin-bottom:1.4rem;color:var(--ink);text-wrap:balance}
.home .lede{font-size:1.26rem;line-height:1.5;color:var(--muted);max-width:60ch;letter-spacing:-.01em}
.home-pick{padding:2.4rem 0}
.pick-h{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin-bottom:1.2rem;display:flex;gap:.6rem;align-items:center}
.pick-h .pn{color:var(--accent)}
.locales{display:grid;grid-template-columns:repeat(2,1fr);border:1.5px solid var(--line);border-right:none}
.locale{display:block;text-align:left;padding:1.6rem 1.5rem;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);cursor:pointer;transition:.14s;position:relative;background:var(--surface)}
.locale:hover{background:var(--ink)}
.locale:hover .nm,.locale:hover .tg,.locale:hover .cd,.locale:hover .go{color:var(--bg)}
.locale:hover .cd{border-color:var(--bg)}
.locale .row{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.6rem}
.locale .nm{font-family:var(--sans);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.locale .cd{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);border:1px solid var(--line);padding:.1rem .35rem}
.locale .tg{font-size:.9rem;color:var(--muted);line-height:1.5}
.locale .go{position:absolute;top:1.6rem;right:1.5rem;font-family:var(--mono);color:var(--faint);font-size:1.1rem}
.locale:hover .go{color:var(--accent)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;padding:3rem 0 5rem;border-top:1.5px solid var(--line)}
.feat .n{font-family:var(--mono);font-size:.78rem;color:var(--accent);font-weight:600;padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:2px solid var(--rule)}
.feat h3{font-family:var(--sans);font-size:1.22rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.5rem;color:var(--ink)}
.feat p{font-size:.92rem;color:var(--muted);line-height:1.55}

/* ---------- footer ---------- */
.ft{border-top:3px solid var(--rule);margin-top:0}
.ft-inner{max-width:1340px;margin:0 auto;padding:2.6rem 1.6rem 1.4rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.ft-brand .bk{display:flex;align-items:baseline;gap:1px;font-family:var(--sans);font-weight:700;font-size:1.12rem;letter-spacing:-.025em;color:var(--ink);margin-bottom:.7rem;cursor:pointer}
.ft-brand .bk .dot{color:var(--accent)}
.ft-brand .bk .tld{color:var(--faint)}
.ft-brand p{font-size:.86rem;color:var(--muted);line-height:1.5;max-width:34ch;margin-bottom:1.1rem}
.ft-gh{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.5rem .9rem;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;transition:.12s}
.ft-gh:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ft-col h4{font-family:var(--mono);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding-bottom:.5rem;margin-bottom:.6rem;border-bottom:1.5px solid var(--line)}
.ft-col a{display:block;font-size:.875rem;color:var(--muted);padding:.32rem 0;cursor:pointer;border:none}
.ft-col a:hover{color:var(--accent)}
.ft-col a.on{color:var(--ink);font-weight:600}
.ft-bar{max-width:1340px;margin:0 auto;padding:1rem 1.6rem 1.8rem;border-top:1.5px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.ft-bar .lic{font-size:.76rem;color:var(--faint);max-width:70ch}

/* ---------- burger + mobile drawer ---------- */
.burger{display:none}
.drawer-bd{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:opacity .2s}
.drawer-bd.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;z-index:61;width:min(312px,86vw);height:100%;background:var(--bg);border-right:2px solid var(--rule);transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 1rem 0 1.4rem;border-bottom:2px solid var(--rule);position:sticky;top:0;background:var(--bg)}
.drawer-body{padding:1.3rem 1.1rem 2rem 1.4rem}
.drawer .search{display:flex;width:auto;margin-bottom:1.4rem}
.drawer .langs{display:flex;margin-bottom:1.6rem;border:1.5px solid var(--line);width:fit-content}
.drawer .langs a{padding:.4rem .7rem;border-right:1.5px solid var(--line)}
.drawer .langs a:last-child{border-right:none}

@media(max-width:1080px){.docs{grid-template-columns:248px minmax(0,1fr)}.toc{display:none}.content{padding-left:2.4rem;padding-right:2.4rem}}
@media(max-width:820px){
  .docs{grid-template-columns:1fr}
  .sidebar,.hd .search,.hd .langs,.hd .gh{display:none}
  .burger{display:grid}
  .locales,.feats{grid-template-columns:1fr}
  .content{padding:1.8rem 1.4rem 4rem}
  .prose h1{font-size:2.1rem}
  .prose h2{font-size:1.32rem}
  .prose h2::before{font-size:1.8rem}
  .locales{border-right:1.5px solid var(--line)}
  .ft-inner{grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:520px){.ft-inner{grid-template-columns:1fr}}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line)}
.toc::-webkit-scrollbar{display:none}