/* EasyNut Wiki — white page, black text, a documentation layout:
   top bar, menu on the left, the article in the middle, "on this page" on the right. */
:root{
  --bg:#ffffff; --ink:#111418; --ink2:#3d444d; --muted:#6a737d;
  --line:#e3e6ea; --soft:#f5f7f9; --soft2:#eef1f4;
  --accent:#0d7a3a; --accentSoft:#e7f4ec; --link:#0b5fbf;
  --note:#0b5fbf; --tip:#0d7a3a; --important:#7c3aed; --warning:#9a6700; --caution:#c4262e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --topH:56px; --sideW:272px; --tocW:220px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--topH) + 16px)}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--sans); -webkit-text-size-adjust:100%}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:30; height:var(--topH); display:flex; align-items:center; gap:16px;
  padding:0 20px; background:#fff; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); white-space:nowrap}
.brand:hover{text-decoration:none}
.logo{width:28px; height:28px; flex:none}
.brandName{font-size:17px; letter-spacing:.01em}
.brandName b{color:var(--accent); font-weight:700}
.menuBtn{display:none; border:1px solid var(--line); background:#fff; border-radius:6px; font-size:18px; width:38px; height:36px; cursor:pointer; color:var(--ink)}
.search{position:relative; flex:1; max-width:440px; margin-left:12px}
.search input{width:100%; height:36px; border:1px solid var(--line); border-radius:6px; padding:0 12px; font:inherit; font-size:14px; background:var(--soft); color:var(--ink)}
.search input:focus{outline:2px solid var(--accent); outline-offset:-1px; background:#fff}
.results{position:absolute; top:42px; left:0; right:0; max-height:70vh; overflow:auto; background:#fff; border:1px solid var(--line);
  border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.12); padding:6px}
.results a{display:block; padding:8px 10px; border-radius:6px; color:var(--ink)}
.results a:hover,.results a.on{background:var(--soft2); text-decoration:none}
.results .rT{font-weight:600; font-size:14px}
.results .rS{font-size:13px; color:var(--muted); margin-top:2px}
.results mark{background:#fff1a8; color:inherit; padding:0 1px}
.results .none{padding:10px; color:var(--muted); font-size:14px}
.topLinks{margin-left:auto; display:flex; align-items:center; gap:16px; font-size:14px; white-space:nowrap}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.lang a{padding:4px 10px; color:var(--ink2); font-weight:600; font-size:13px}
.lang a.on{background:var(--ink); color:#fff}
.lang a:hover{text-decoration:none; background:var(--soft2)}
.lang a.on:hover{background:var(--ink)}
.siteLink{color:var(--ink2)}

/* ---------- three columns ---------- */
.layout{display:grid; grid-template-columns:var(--sideW) minmax(0,1fr) var(--tocW); min-height:calc(100vh - var(--topH))}
.side{position:sticky; top:var(--topH); height:calc(100vh - var(--topH)); overflow:auto; border-right:1px solid var(--line);
  padding:18px 14px 24px 18px; background:#fbfcfd; font-size:14px}
.side h2{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:20px 0 6px 8px; font-weight:700}
.side h2:first-child{margin-top:4px}
.side ul{list-style:none; margin:0; padding:0}
.side ul ul{margin-left:12px; border-left:1px solid var(--line); padding-left:4px}
.side li a,.side li .planned{display:block; padding:5px 8px; border-radius:6px; color:var(--ink2); line-height:1.35}
.side li a:hover{background:var(--soft2); text-decoration:none; color:var(--ink)}
.side li a.on{background:var(--accentSoft); color:var(--accent); font-weight:600; box-shadow:inset 3px 0 0 var(--accent)}
.side li .planned{color:#9aa1a9; cursor:default}
.side li .label{display:block; padding:5px 8px; color:var(--ink); font-weight:600; line-height:1.35}
.side li .planned::after{content:attr(data-tag); margin-left:6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid #d6dade; border-radius:4px; padding:0 4px; color:#9aa1a9}
.side .menuTitle{font-weight:700; font-size:15px; margin:0 0 6px 8px; color:var(--ink)}
.sideFoot{margin:24px 0 0 8px; font-size:12.5px}
.sideFoot a{color:var(--muted)}

.main{min-width:0; padding:36px 48px 64px}
.doc{max-width:780px}
.toc{position:sticky; top:var(--topH); height:calc(100vh - var(--topH)); overflow:auto; padding:40px 18px 24px 8px; font-size:13px}
.toc .tocT{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:0 0 8px}
.toc a{display:block; color:var(--ink2); padding:3px 0 3px 10px; border-left:2px solid var(--line); line-height:1.35}
.toc a.l3{padding-left:22px; font-size:12.5px}
.toc a.on{color:var(--accent); border-left-color:var(--accent)}
.toc a:hover{text-decoration:none; color:var(--ink)}

/* ---------- the article ---------- */
.doc h1{font-size:34px; line-height:1.2; margin:0 0 12px; letter-spacing:-.01em}
.doc h2{font-size:24px; line-height:1.3; margin:44px 0 12px; padding-top:12px; border-top:1px solid var(--line)}
.doc h3{font-size:18.5px; margin:30px 0 8px}
.doc h4{font-size:16px; margin:24px 0 6px}
.doc h2 .anchor,.doc h3 .anchor{opacity:0; margin-left:8px; color:var(--muted); font-weight:400}
.doc h2:hover .anchor,.doc h3:hover .anchor{opacity:1; text-decoration:none}
.doc p,.doc ul,.doc ol,.doc table,.doc pre,.doc blockquote,.doc figure{margin:0 0 16px}
.doc ul,.doc ol{padding-left:24px}
.doc li{margin:4px 0}
.doc li > ul,.doc li > ol{margin:4px 0 0}
.doc > p:first-of-type{font-size:17.5px; color:var(--ink2)}
.doc strong{font-weight:650}
.doc code{font-family:var(--mono); font-size:.88em; background:var(--soft2); border:1px solid var(--line); border-radius:4px; padding:.08em .35em}
.doc pre{background:#0f1720; color:#e6edf3; border-radius:8px; padding:14px 16px; overflow:auto; font-size:13.5px; line-height:1.5}
.doc pre code{background:none; border:0; padding:0; color:inherit; font-size:inherit}
.doc kbd{font-family:var(--mono); font-size:.85em; border:1px solid #c9ced4; border-bottom-width:2px; border-radius:4px; padding:.05em .4em; background:#fff}
.doc hr{border:0; border-top:1px solid var(--line); margin:32px 0}
.doc table{border-collapse:collapse; width:100%; font-size:14.5px; display:block; overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top}
.doc th{background:var(--soft); font-weight:650}
.doc tr:nth-child(even) td{background:#fbfcfd}
.doc img{max-width:100%; height:auto}
.doc figure{margin:20px 0 24px}
.doc figure img{display:block; border:1px solid #d5d9de; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.06); cursor:zoom-in; background:#0b0d10}
.doc figcaption{font-size:13.5px; color:var(--muted); margin-top:8px}
.doc blockquote{border-left:4px solid var(--line); padding:4px 16px; color:var(--ink2); background:var(--soft)}
.doc blockquote > :last-child{margin-bottom:0}

/* GitHub alerts: > [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION] */
.doc .alert{border-left:4px solid var(--c); background:color-mix(in srgb, var(--c) 6%, #fff); padding:10px 16px 10px; border-radius:0 6px 6px 0; margin:0 0 18px}
.doc .alert > :last-child{margin-bottom:0}
.doc .alert .alertT{font-weight:700; color:var(--c); font-size:14px; margin:0 0 4px; display:flex; gap:6px; align-items:center}
.doc .alert.note{--c:var(--note)} .doc .alert.tip{--c:var(--tip)} .doc .alert.important{--c:var(--important)}
.doc .alert.warning{--c:var(--warning)} .doc .alert.caution{--c:var(--caution)}

.doc .loading,.doc .err{color:var(--muted)}
.pager{max-width:780px; display:flex; gap:16px; margin-top:48px}
.pager a{flex:1; border:1px solid var(--line); border-radius:8px; padding:12px 16px; color:var(--ink)}
.pager a:hover{border-color:var(--accent); text-decoration:none}
.pager a.next{text-align:right}
.pager small{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.pager span{font-weight:600}
.docFoot:empty{display:none}
.docFoot{max-width:780px; margin-top:28px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap}
.docFoot a{color:var(--ink2)}

.lightbox{position:fixed; inset:0; z-index:50; background:rgba(10,12,15,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:calc(100vh - 90px); border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lbCap{color:#e6e9ec; font-size:14px; margin-top:12px; max-width:900px; text-align:center}

/* ---------- narrower screens ---------- */
@media (max-width:1240px){
  .layout{grid-template-columns:var(--sideW) minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:900px){
  .menuBtn{display:inline-block}
  .layout{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed; left:0; top:var(--topH); bottom:0; width:min(86vw, 320px); z-index:40; transform:translateX(-102%);
    transition:transform .18s ease; box-shadow:4px 0 24px rgba(0,0,0,.12); height:auto}
  .side.open{transform:none}
  .scrim{position:fixed; inset:var(--topH) 0 0 0; background:rgba(0,0,0,.25); z-index:35}
  .main{padding:24px 16px 48px}
  .doc h1{font-size:28px}
  .doc h2{font-size:21px}
  .siteLink{display:none}
  .search{margin-left:0}
  .brandName{display:none}
}
@media (max-width:520px){ .top{gap:10px; padding:0 12px} .pager{flex-direction:column} }
@media print{
  .top,.side,.toc,.pager,.docFoot,.scrim{display:none !important}
  .layout{display:block} .main{padding:0}
  .doc figure img{box-shadow:none}
  a{color:inherit}
}