/* Engraphy developer docs — shared styling.
   Brand tokens mirror the landing page (index.html): Bricolage Grotesque
   (display), Schibsted Grotesk (body), Space Mono (code), Verdant on cream. */
:root{
  --verdant:#4C7A59; --deep:#375C43; --g300:#93B389;
  --cream:#F3F1E6; --paper:#FBFAF2; --sand:#EFEAD9; --line:#DEDCC8; --line-2:#D0CBB2;
  --ink:#2A3626; --body:#4E5545; --muted:#7C806A; --gold:#C6A253;
  --code-bg:#F1EEE0;
  --topbar-h:60px;
  --display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--body);font-family:var(--sans);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--deep);text-decoration:none}
a:hover{color:var(--verdant);text-decoration:underline}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:50;height:var(--topbar-h);display:flex;align-items:center;
  gap:14px;padding:0 20px;background:rgba(243,241,230,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.topbar .brand:hover{text-decoration:none}
.topbar .brand__nm{font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.02em}
.topbar .brand__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verdant);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px}
.topbar .spacer{flex:1}
.topbar .home{font-size:.9rem;color:var(--body)}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:6px;cursor:pointer;
  padding:7px 9px;flex-direction:column;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}

/* ---- shell: sidebar + content ---- */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);max-width:1200px;margin:0 auto}
.sidebar{position:sticky;top:var(--topbar-h);align-self:start;height:calc(100vh - var(--topbar-h));
  overflow-y:auto;border-right:1px solid var(--line);padding:26px 16px 40px}
.sidebar h4{margin:0 0 10px;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);font-weight:400;padding:0 10px}
.sidebar nav a{display:block;padding:8px 10px;border-radius:6px;color:var(--body);font-size:.94rem;
  border-left:2px solid transparent}
.sidebar nav a:hover{background:var(--paper);color:var(--deep);text-decoration:none}
.sidebar nav a.active{background:var(--paper);color:var(--deep);font-weight:600;
  border-left-color:var(--verdant)}
.sidebar nav .num{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-right:8px}

.content{padding:44px 40px 90px;min-width:0}
.md{max-width:760px}

/* ---- prose ---- */
.md h1,.md h2,.md h3,.md h4{font-family:var(--display);color:var(--ink);font-weight:700;
  letter-spacing:-.02em;line-height:1.18;scroll-margin-top:calc(var(--topbar-h) + 12px)}
.md h1{font-size:2.15rem;margin:0 0 .5em}
.md h2{font-size:1.5rem;margin:1.9em 0 .55em;padding-top:.5em;border-top:1px solid var(--line)}
.md h3{font-size:1.16rem;margin:1.6em 0 .5em}
.md h4{font-size:1rem;margin:1.4em 0 .4em}
.md p{margin:0 0 1.05em}
.md strong{color:var(--ink);font-weight:600}
.md ul,.md ol{margin:0 0 1.15em;padding-left:1.4em}
.md li{margin:.3em 0}
.md li>ul,.md li>ol{margin:.3em 0}
.md hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.md img{max-width:100%}

/* inline + block code */
.md code{font-family:var(--mono);font-size:.83em;background:rgba(76,122,89,.10);color:var(--deep);
  padding:.12em .4em;border-radius:4px}
.md pre{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;padding:15px 16px;
  overflow-x:auto;margin:0 0 1.3em}
.md pre code{display:block;background:none;color:var(--ink);padding:0;font-size:.82rem;line-height:1.6;
  white-space:pre}

/* blockquote (e.g. the naming note) */
.md blockquote{margin:0 0 1.3em;padding:2px 18px;border-left:3px solid var(--g300);
  background:var(--paper);color:var(--body);border-radius:0 8px 8px 0}
.md blockquote p:last-child{margin-bottom:.6em}
.md blockquote p:first-child{margin-top:.6em}

/* tables */
.md .tbl,.md table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.9rem}
.md table{display:block;overflow-x:auto}
.md th,.md td{padding:9px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.md thead th{background:var(--paper);font-family:var(--mono);font-weight:400;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.md tbody td:first-child{color:var(--ink)}

.docfoot{max-width:760px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.84rem}
.docfoot a{color:var(--deep)}

/* ---- responsive: sidebar becomes a drawer ---- */
.scrim{display:none}
@media (max-width:860px){
  .burger{display:flex}
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:270px;height:auto;
    background:var(--cream);z-index:45;transform:translateX(-100%);transition:transform .25s ease;
    border-right:1px solid var(--line)}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.12)}
  .scrim.show{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(30,40,26,.28);z-index:44}
  .content{padding:30px 22px 70px}
}
@media (max-width:520px){
  .topbar .brand__tag{display:none}
  .content{padding:24px 16px 60px}
  .md h1{font-size:1.8rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}