/* Saradom docs — single refined dark theme. Soft contrast (no pure black/white). */
@import url("fonts/fonts.css");
:root {
  --bg:#0e1014; --ink:#cfd3da; --body:#b3b9c2; --muted:#666d76;
  --line:#1c2027; --soft:#151922; --sub:#8891a0;
  --accent:#f0883e; --accent-strong:#ee8636; --accent-soft:rgba(240,136,62,.12);
  --link:#f2a56f;
  --code-bg:#0a0c10; --code-ink:#d4d8e0; --code-border:#1c2027;
  --code-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  --glow:rgba(90,128,230,.12);
  --r-sm:.45rem; --r-md:.7rem; --r-lg:.9rem;
  --hl-keyword:#8f9fbe; --hl-string:#9cb69f; --hl-comment:#5c636d; --hl-title:#cbb08c;
  --hl-number:#cbb08c; --hl-attr:#7db0b0; --hl-tag:#8b9ab4; --hl-built:#a3aec5; --hl-punct:#6f757e;
  --max:48rem;
  --sans:"Inter",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); font-size:17px; }
body {
  margin:0; display:flex; align-items:flex-start;
  font-family:var(--sans); color:var(--body); background:transparent;
  line-height:1.7; font-size:1rem; letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
}

/* sidebar */
.nav { width:268px; flex:none; height:100vh; position:sticky; top:0; display:flex; flex-direction:column; border-right:1px solid var(--line); padding:3.75rem 1.25rem; overflow-y:auto; background:var(--bg); }
.nav .brand { display:block; font-weight:400; font-size:2.3rem; line-height:1.13; letter-spacing:-.03em; text-decoration:none; color:var(--ink); padding:0 .5rem; margin:0 0 1.9rem; }
.nav-group { margin-bottom:0; }
.nav-title { font-size:.68rem; font-weight:400; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); margin:1.9rem .5rem .8rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.nav a { display:block; color:var(--body); text-decoration:none; padding:.27rem .5rem; border-radius:.5rem; font-size:.9rem; transition:background .12s,color .12s; }
.nav a:hover { background:var(--soft); color:var(--ink); }
.nav a.active { background:var(--soft); color:var(--ink); }

/* content */
.content { flex:1; max-width:calc(var(--max) + 8rem); padding:3.75rem 4rem 6rem; margin:0 auto; min-width:0; }
.content > * { max-width:var(--max); }
.content h1 { font-size:2.3rem; font-weight:400; letter-spacing:-.03em; line-height:1.13; color:var(--ink); margin:0 0 1.25rem; }
.content h2 { font-size:1.6rem; font-weight:400; letter-spacing:-.02em; color:var(--ink); margin:2.75rem 0 .75rem; }
.content h3 { font-size:1.2rem; font-weight:400; letter-spacing:-.01em; color:var(--ink); margin:2.25rem 0 .55rem; }
/* heading anchors — the # link appears on hover, click to link to the section */
.content :is(h1,h2,h3,h4) .anchor { margin-left:.4rem; color:var(--muted); text-decoration:none; font-weight:400; opacity:0; transition:opacity .12s ease; }
.content :is(h1,h2,h3,h4):hover .anchor { opacity:.5; }
.content .anchor:hover { opacity:1; color:var(--accent); }
.content p, .content li { color:var(--body); font-size:1.06rem; line-height:1.75; }
.content a { color:var(--link); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--link) 38%, transparent); text-decoration-thickness:1px; text-underline-offset:3px; }
.content a:hover { text-decoration-color:var(--link); }
.content strong { color:var(--ink); font-weight:400; }
.content ol, .content ul { padding-left:1.3rem; margin:1rem 0; }
.content li { margin:.45rem 0; padding-left:.15rem; }
.content li::marker { color:var(--muted); }
.content hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

/* code */
.content pre { background:var(--code-bg); border:1px solid var(--code-border); box-shadow:var(--code-shadow); color:var(--code-ink); padding:1.2rem 1.35rem; border-radius:.9rem; overflow-x:auto; font-size:.86rem; line-height:1.8; margin:1.75rem 0; max-width:100%; }
.content pre code { font-family:var(--mono); color:inherit; background:none; border:0; padding:0; font-size:1em; }
.content :not(pre) > code { background:var(--soft); border:1px solid var(--line); color:var(--ink); padding:.08rem .35rem; border-radius:.35rem; font-size:.85em; font-family:var(--mono); }

/* included source — readable file header linking to the source on GitHub, above the code block */
.content .code-file { font-family:var(--mono); font-size:1.12rem; font-weight:500; margin:2.75rem 0 .6rem; }
.content .code-file a { color:var(--ink); text-decoration:none; }
.content .code-file a:hover { color:var(--accent); }
.content .code-file a::after { content:" ↗"; color:var(--muted); font-size:.8em; }
.content .code-file + pre { margin-top:0; }

/* source-link directive (source=path) — a small coloured link to a file, no code */
.content .code-src { margin:1rem 0; }
.content .code-src a { font-family:var(--mono); font-size:.9rem; color:var(--link); text-decoration:none; }
.content .code-src a:hover { text-decoration:underline; text-underline-offset:3px; }
.content .code-src a::after { content:" ↗"; color:var(--muted); }

/* next-page link at the bottom of a doc — a quiet forward link, not a button */
.content .doc-next { margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:1.06rem; }
.content .doc-next a { background:none; color:var(--accent); font-weight:500; text-decoration:none; }
.content .doc-next a:hover { color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }

/* sidebar footer — sits at the bottom of the nav in normal flow, no sticky overlay */
.nav-foot { margin-top:auto; padding-top:2.5rem; }
.nav-foot a { display:block; color:var(--muted); text-decoration:none; font-size:.85rem; padding:.27rem .5rem; border-radius:.5rem; transition:background .12s,color .12s; }
.nav-foot a:hover { background:var(--soft); color:var(--ink); }

/* mobile chrome — top bar, hamburger, scrim. Hidden on desktop; the ≤820px query turns it on. */
.nav-bar, .nav-scrim, .nav-toggle { display:none; }

/* syntax tokens */
.hljs-keyword,.hljs-selector-tag { color:var(--hl-keyword); }
.hljs-string,.hljs-attr-value,.hljs-regexp { color:var(--hl-string); }
.hljs-comment,.hljs-quote { color:var(--hl-comment); font-style:italic; }
.hljs-title,.hljs-title.function_,.hljs-function .hljs-title { color:var(--hl-title); }
.hljs-number,.hljs-literal { color:var(--hl-number); }
.hljs-attr,.hljs-attribute,.hljs-property { color:var(--hl-attr); }
.hljs-name,.hljs-selector-id,.hljs-selector-class { color:var(--hl-tag); }
.hljs-built_in,.hljs-type { color:var(--hl-built); }
.hljs-meta,.hljs-punctuation { color:var(--hl-punct); }

/* tables */
.content table { border-collapse:collapse; width:100%; font-size:.92rem; margin:1.5rem 0; }
.content th, .content td { border:1px solid var(--line); padding:.5rem .7rem; text-align:left; vertical-align:top; }
.content th { background:var(--soft); font-weight:650; color:var(--ink); }

/* live demo preview box — shared by the home counter and every page that uses
   the <!-- demo: --> directive (notify, action-in-context, vld, the-simple-way). */
.demo { position:relative; display:flex; justify-content:center; align-items:center; min-height:7rem; border:1px solid var(--line); border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:2.4rem 1.6rem 1.6rem; margin:1.75rem 0 0; background-color:rgba(255,255,255,.012); background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:15px 15px; }
.demo + pre, .demo + script + pre { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; border-top:1px solid var(--line); box-shadow:none; }
.demo::before { content:"PREVIEW"; position:absolute; top:.75rem; left:1rem; font-size:.62rem; font-weight:400; letter-spacing:.13em; color:var(--muted); }
/* notify demos */
.demo [counter-space], .demo [counter-onclick] { display:flex; align-items:center; gap:1.1rem; }
.demo [counter-value], .demo [counter-increment] { font-family:var(--mono); font-size:1.7rem; color:var(--ink); min-width:2.5ch; text-align:center; }
.demo [configurator-space], .demo [form-space] { display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.demo label { display:flex; align-items:center; gap:.5rem; color:var(--ink); }
.demo select, .demo [field-clear] { font:inherit; padding:.4rem .6rem; background:var(--code-bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); }
.demo button { background:var(--soft); color:var(--ink); border:1px solid #262c37; border-radius:var(--r-md); padding:.55rem 1.2rem; font:inherit; font-size:.95rem; font-weight:500; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.3); transition:transform .1s ease, box-shadow .15s, filter .15s; }
.demo button:hover { filter:brightness(1.18); }
.demo button:active { transform:translate(1px, 2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.3); }

/* wordmark gradient — reused by the nav brand and footer on every page, so it
   stays general even though the hero styles themselves live in index.css. */
.mark {
  background:linear-gradient(180deg, #f7a45c, #e07a2f);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* keyboard focus — single accent ring, no mouse-click outline */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.demo button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width: 820px) {
  body { display:block; }
  body[nav-open] { overflow:hidden; }

  /* persistent top bar */
  .nav-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
    position:sticky; top:0; z-index:70; height:3.5rem; padding:0 1.25rem;
    background:var(--bg); border-bottom:1px solid var(--line); }
  .nav-bar .brand { font-size:1.4rem; font-weight:400; letter-spacing:-.03em; text-decoration:none; color:var(--ink); }

  /* hamburger → morphs to an X when the drawer is open */
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center;
    width:2.75rem; height:2.75rem; margin-right:-.75rem; padding:0;
    background:none; border:0; color:var(--ink); cursor:pointer; }
  .nav-burger { position:relative; width:20px; height:2px; background:currentColor; border-radius:2px; transition:background .2s ease; }
  .nav-burger::before, .nav-burger::after { content:""; position:absolute; left:0; width:20px; height:2px;
    background:currentColor; border-radius:2px; transition:transform .2s ease; }
  .nav-burger::before { top:-6px; }
  .nav-burger::after { top:6px; }
  body[nav-open] .nav-burger { background:transparent; }
  body[nav-open] .nav-burger::before { transform:translateY(6px) rotate(45deg); }
  body[nav-open] .nav-burger::after { transform:translateY(-6px) rotate(-45deg); }

  /* off-canvas drawer, sliding in under the bar */
  .nav { position:fixed; top:3.5rem; left:0; z-index:60; width:min(18rem,80vw); height:calc(100vh - 3.5rem);
    border-right:1px solid var(--line); padding:1.75rem 1.25rem;
    transform:translateX(-100%); transition:transform .24s ease; }
  .nav .brand { display:none; }
  body[nav-open] .nav { transform:translateX(0); box-shadow:0 12px 40px rgba(0,0,0,.5); }

  /* scrim, below the bar */
  .nav-scrim { display:block; position:fixed; top:3.5rem; left:0; right:0; bottom:0; z-index:50;
    background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .24s ease; }
  body[nav-open] .nav-scrim { opacity:1; visibility:visible; }

  .content { padding:2rem 1.5rem 4rem; }
}

/* Val — themed sub-site: same layout, green accent instead of amber. Applied via <html class="theme-val">. */
.theme-val {
  --accent:#5fae78; --accent-strong:#4e9463; --accent-soft:rgba(95,174,120,.12);
  --link:#84bd98;
}
.theme-val .mark { background:linear-gradient(180deg, #a6d6b4, #4e9463); -webkit-background-clip:text; background-clip:text; }
/* .theme-val overrides for .cta live in index.css, next to the base .cta rules. */

/* Live demo widget — blueprint look, matching the home page preview. Scoped under
   .todo-demo so it never touches the page around it. Uses the shared theme variables. */
.todo-demo, .filter-demo, .produce-demo, .kanban-demo, .tictactoe-demo, .cells-demo {
  --demo-accent:#5a80e6;
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:2.6rem 1.6rem 1.6rem; margin:1.75rem 0;
  background-color:rgba(255,255,255,.012);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:15px 15px;
}
.todo-demo::before, .filter-demo::before, .produce-demo::before, .kanban-demo::before, .tictactoe-demo::before, .cells-demo::before {
  content:"PREVIEW"; position:absolute; top:.75rem; left:1rem;
  font-size:.62rem; font-weight:400; letter-spacing:.13em; color:var(--muted);
}