/* Shared theme for the generated guide pages.
   Matches 05-Technique-Playground.html and 06-KAPLAY-Cheatsheet.html. */

:root{
  --bg:#0b0f1a; --panel:#141a2b; --panel2:#1b2338; --ink:#e8ecf6; --muted:#93a0bd;
  --accent:#ffd23f; --accent2:#57d1ff; --good:#7cf0a9; --bad:#ff6b6b; --line:#26304b;
  --code:#0d1220;
  --pac:#ffd23f; --dk:#ff9a4d; --fishy:#57d1ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:16.5px;
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(11,15,26,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{max-width:1080px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:9px 20px}
.topbar a{font-size:12.5px;color:var(--muted);text-decoration:none;padding:4px 10px;
  border:1px solid var(--line);border-radius:7px;white-space:nowrap;transition:.15s}
.topbar a:hover{color:var(--ink);border-color:var(--accent2);background:var(--panel)}
.topbar a.here{color:#1a1300;background:var(--accent);border-color:var(--accent);font-weight:700}
.topbar a.ext{border-style:dashed}
.topbar .spacer{flex:1}

/* ---------- content ---------- */
main{padding:34px 0 10px}
h1,h2,h3,h4{line-height:1.25;margin:1.6em 0 .6em;scroll-margin-top:64px}
h1{font-size:32px;margin-top:0;letter-spacing:.2px}
h2{font-size:24px;padding-bottom:7px;border-bottom:1px solid var(--line)}
h3{font-size:19px;color:var(--accent)}
h4{font-size:16.5px;color:var(--accent2)}
p{margin:.85em 0}
a{color:var(--accent2)}
a:hover{color:var(--ink)}
strong{color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
ul,ol{padding-left:24px}
li{margin:.35em 0}
li::marker{color:var(--muted)}

/* ---------- code ---------- */
code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.87em;
  background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#ffe9a8}
pre{background:var(--code);border:1px solid var(--line);border-radius:11px;
  padding:14px 16px;overflow-x:auto;margin:1.1em 0}
pre code{background:none;border:0;padding:0;color:#d6e0f5;font-size:13px;line-height:1.6;white-space:pre}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:1.2em 0;border:1px solid var(--line);border-radius:11px}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--panel2);color:var(--ink);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(87,209,255,.04)}
td code{white-space:normal}

/* ---------- blockquote callouts ---------- */
blockquote{margin:1.2em 0;padding:13px 17px;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--accent2);border-radius:10px}
blockquote > :first-child{margin-top:0}
blockquote > :last-child{margin-bottom:0}
blockquote.warn{border-left-color:var(--bad)}
blockquote.key{border-left-color:var(--accent)}
blockquote.tip{border-left-color:var(--good)}

/* ---------- task lists ---------- */
ul.contains-task-list{list-style:none;padding-left:2px}
ul.contains-task-list li{display:flex;gap:10px;align-items:flex-start;margin:.5em 0}
input[type=checkbox]{margin-top:.4em;width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer}

/* ---------- details ---------- */
details{margin:1.2em 0;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:0 16px}
details[open]{padding-bottom:6px}
summary{cursor:pointer;padding:13px 0;color:var(--ink);font-size:15px}
summary:hover{color:var(--accent2)}

/* ---------- footer ---------- */
footer{margin-top:46px;padding:24px 0 70px;border-top:1px solid var(--line);
  color:var(--muted);font-size:14px}
footer .pager{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
footer .pager a{flex:1 1 240px;text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:12px 15px;transition:.15s}
footer .pager a:hover{border-color:var(--accent2)}
footer .pager span{display:block;font-size:11.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}

@media(max-width:600px){
  body{font-size:16px}
  h1{font-size:26px} h2{font-size:21px}
  main{padding-top:24px}
}