/* docs.gemmein.com — workshop docs skin (24 Jul reskin).
   Tokens + chrome are 1:1 with landing-v4 (paper/editorial, one emerald
   accent, no dark mode); the docs layer adds the sidebar layout, prose,
   tables, and code blocks. Structure/selectors unchanged from the
   night-vault version — palette + type only. */

:root{
  --bg:#FAF9F7; --surface:#FFFFFF; --surface-2:#FCFCFC; --ink:#1B1B1B; --faint:#6E6E73;
  --line:#ECECEC; --accent:#0f7a5a; --accent-ink:#0c5f47; --accent-soft:rgba(15,122,90,.08);
  --warn:#92400E; --warn-soft:#FBF1DE; --warn-line:#E8D5AA;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",ui-sans-serif,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:color-mix(in srgb, var(--accent) 22%, transparent)}
a{color:var(--accent-ink); text-decoration:none}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}

/* ── nav (1:1 with landing) ───────────────────────── */
nav.top{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; gap:26px; height:60px}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:650; font-size:17px; letter-spacing:-.01em}
.brand .tittle{color:var(--accent)}
.brand small{font-weight:500; color:var(--faint); font-size:12.5px; margin-left:2px; letter-spacing:.02em}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links a{color:var(--faint); font-size:14px}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff}
.btn{display:inline-block; background:var(--accent); color:#fff; font-weight:600;
  padding:10px 20px; border-radius:10px; font-size:14.5px; border:none; cursor:pointer;
  transition:background .15s ease, transform .15s ease;}
.btn:hover{background:var(--accent-ink); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent); background:transparent}

/* ── docs layout: sidebar + article ───────────────── */
.docs-grid{display:grid; grid-template-columns:230px minmax(0,1fr); gap:56px; padding-top:44px; padding-bottom:80px}
aside.side{position:sticky; top:84px; align-self:start; font-size:14px}
.side b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:22px 0 8px}
.side b:first-child{margin-top:0}
.side a{display:block; color:var(--faint); padding:5px 10px; margin-left:-10px; border-radius:8px; line-height:1.45}
.side a:hover{color:var(--ink); background:var(--surface-2)}
.side a.here{color:var(--ink); background:var(--accent-soft); font-weight:600}

article{max-width:720px; min-width:0}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px}
article h1{font-size:clamp(30px,4.6vw,42px); letter-spacing:-.03em; line-height:1.08; font-weight:730; margin-bottom:14px; text-wrap:balance}
article .lede{color:var(--faint); font-size:17px; max-width:56ch; margin-bottom:34px; text-wrap:balance}
article h2{font-size:clamp(21px,2.8vw,26px); letter-spacing:-.02em; line-height:1.2; margin:44px 0 12px}
article h2:first-of-type{margin-top:6px}
article h3{font-size:17px; letter-spacing:-.01em; margin:30px 0 8px}
article p{font-size:15.5px; color:var(--ink); margin-bottom:14px; max-width:66ch}
article p.soft, article li.soft{color:var(--faint)}
article ul, article ol{margin:0 0 16px 22px; font-size:15.5px}
article li{margin-bottom:7px}
article hr{border:none; border-top:1px solid var(--line); margin:38px 0}

/* inline code + blocks — light, paper-consistent (one coherent answer:
   no dark islands; the landing's dark terminal is a singular hero motif,
   not a pattern to repeat across dozens of inline code blocks) */
code{font-family:var(--mono); font-size:.86em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:1.5px 6px; color:var(--accent-ink)}
pre{background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin:16px 0 22px; overflow-x:auto;
  font-family:var(--mono); font-size:13px; line-height:1.75; color:var(--ink)}
pre code{background:none; border:none; padding:0; font-size:inherit; color:inherit}
pre .c{color:var(--faint)}                    /* comment */
pre .k{color:var(--accent-ink); font-weight:600} /* keyword / important token */
pre .s{color:var(--warn)}                     /* string */

/* tables (the rules grid) */
.tbl{width:100%; border-collapse:collapse; font-size:14px; margin:16px 0 22px}
.tbl th{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); text-align:left; padding:9px 12px; border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--faint)}
.tbl td:first-child{color:var(--ink); white-space:nowrap}
.tbl td code{white-space:nowrap}
.tbl-scroll{overflow-x:auto}

/* callouts */
.callout{background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius:14px; padding:16px 20px; font-size:14.5px; margin:18px 0 22px}
.callout b{color:var(--accent-ink)}
.callout.warn{background:var(--warn-soft); border-color:var(--warn-line)}
.callout.warn b{color:var(--warn)}
.callout p{font-size:14.5px; margin:0}
.callout p + p{margin-top:8px}

/* rule pills (match landing's use-case pills) */
.pill{display:inline-block; font-family:var(--mono); font-size:11.5px; border-radius:99px;
  padding:2px 10px; border:1px solid var(--line); background:var(--surface-2); color:var(--faint); white-space:nowrap}
.pill.green{color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); background:var(--accent-soft)}
.pill.amber{color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft)}

/* docs home cards */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cardl{display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; color:var(--ink); transition:border-color .15s}
.cardl:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.cardl .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.cardl h3, .cardl .card-h{font-size:16.5px; font-weight:700; margin:6px 0 5px}
.cardl p{font-size:13.5px; color:var(--faint); margin:0}

/* prev / next */
.pager{display:flex; gap:14px; margin-top:48px}
.pager a{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; font-size:14px; color:var(--ink)}
.pager a:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.pager .dir{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.pager a.next{text-align:right}

/* ── footer (1:1 with landing) ────────────────────── */
footer{border-top:1px solid var(--line); padding:52px 0 44px; margin-top:40px}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:32px; padding-bottom:36px}
.foot-brand p{font-size:13.5px; color:var(--faint); max-width:34ch; margin-top:14px; line-height:1.65}
.foot-col{display:flex; flex-direction:column; gap:10px}
.foot-col b{font-size:13.5px; margin-bottom:4px}
.foot-col a{color:var(--faint); font-size:13.5px}
.foot-col a:hover{color:var(--ink)}
.foot-in{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between; font-size:13px; color:var(--faint); border-top:1px solid var(--line); padding-top:22px}
.foot-in .co{display:flex; gap:10px; flex-wrap:wrap}
.dotsep{opacity:.5}
.foot-legal{margin-left:auto; display:flex; gap:16px}
.foot-legal a{color:var(--faint)}
.foot-legal a:hover{color:var(--ink)}

a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ── responsive ───────────────────────────────────── */
@media (max-width:900px){
  .docs-grid{grid-template-columns:1fr; gap:10px; padding-top:26px}
  aside.side{position:static; display:flex; gap:4px 14px; flex-wrap:wrap; align-items:baseline;
    border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:14px 16px; margin-bottom:22px}
  .side b{margin:0 4px 0 0}
  .side a{margin-left:0; padding:3px 8px}
  .cards,.cards.three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr; gap:26px}
  .foot-legal{margin-left:0}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:24px}
  .foot-brand{grid-column:1/-1}
  .foot-in{flex-direction:column-reverse; align-items:center; gap:12px; text-align:center; justify-content:center}
  .foot-legal{margin-left:0; justify-content:center}
  .foot-in .co{justify-content:center}
  .nav-links a.quiet{display:none}
  .pager{flex-direction:column}
}

/* a11y pass (19 Jul, preserved through 24 Jul reskin): AA button green,
   24px tap targets. .side a keeps its own rule below — NOT part of the
   blanket a:not(.btn) rule, which would flatten the pill inset. */
.btn{background:#0f7a5a}
.btn:hover{background:#0c6349}
.top a:not(.btn), footer a:not(.btn), .foot-col a, .foot-legal a{padding:6px 0}
.side a{padding:7px 10px} /* keeps the pill inset AND ≥24px tap height */
article p a, article li a, .tbl a{display:inline-block; padding:4px 0; margin:-4px 0}
.tbl{display:block; overflow-x:auto; white-space:normal}
.foot-social a{transition:opacity .12s} .foot-social a:hover{opacity:.6}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .cardl, .pager a, .foot-social a{transition:none}
}

@media print{
  nav.top, footer, aside.side, .pager{display:none}
  body{background:#fff}
  .docs-grid{display:block; padding:0}
  article{max-width:none}
  pre, code{background:#fff; border-color:#ccc}
  a{color:#000; text-decoration:underline}
}