/* Meccha Crafteleon wiki — same art direction as the landing page (html/meccha/index.html):
   Monocraft for anything structural, Inter for prose, lime/teal/orange on warm dark brown.
   Docs need a different density than a landing page, so: no zoom, a sticky nav, and a prose
   measure that stays readable. Everything else is the site's own tokens.
   Dark is the default (the site DA). A light variant is opt-in via [data-theme="light"]
   for readers who prefer black-on-white; wiki.js toggles it and remembers the choice. */

@font-face { font-family:'Monocraft'; src:url('/assets/fonts/Monocraft.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Monocraft'; src:url('/assets/fonts/Monocraft-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --bg:#1b1712; --bg-2:#26201a; --panel:#2a241c; --panel-2:#332c22;
  --line:rgba(255,240,210,0.10); --line-soft:rgba(255,240,210,0.055); --edge:rgba(255,240,210,0.22);
  --text:#f8f1e4; --muted:#c6bda8; --prose:#ded5c1;
  --lime:#a7e05a; --teal:#2fbfa0; --orange:#f16436; --red:#e93c2d;
  --code-bg:rgba(0,0,0,0.30); --img-bg:#0d0b08;
  --hover:rgba(255,255,255,0.04); --hover-strong:rgba(255,255,255,0.08);
  --pixel:'Monocraft', ui-monospace, monospace;
  --body:'Inter', system-ui, sans-serif;
}

/* Light variant — black-on-warm-white, same accents pulled darker for contrast. */
:root[data-theme="light"] {
  --bg:#f4efe4; --bg-2:#fbf7ef; --panel:#fdfaf3; --panel-2:#ece5d5;
  --line:rgba(40,30,20,0.14); --line-soft:rgba(40,30,20,0.07); --edge:rgba(40,30,20,0.24);
  --text:#2a241c; --muted:#6e6454; --prose:#3b342a;
  --lime:#4a7d1a; --teal:#0f8770; --orange:#c9521c; --red:#c4302a;
  --code-bg:#f1ead8; --img-bg:#eae2d1;
  --hover:rgba(40,30,20,0.055); --hover-strong:rgba(40,30,20,0.10);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:var(--body); color:var(--text); line-height:1.65; font-size:17.5px;
  background:
    radial-gradient(50% 40% at 12% 0%, rgba(167,224,90,0.10), transparent 60%),
    radial-gradient(45% 40% at 90% 6%, rgba(47,191,160,0.09), transparent 60%),
    radial-gradient(60% 45% at 82% 100%, rgba(241,100,54,0.10), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-attachment:fixed; min-height:100vh;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

a { color:var(--lime); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── shell ─────────────────────────────────────────────── */
.shell { max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,32px) 64px; }

.top {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px 0; border-bottom:1px solid var(--line); margin-bottom:clamp(24px,4vw,40px);
}
.top .brand { display:inline-flex; align-items:center; gap:11px; font-family:var(--pixel); font-size:19px; color:var(--text); }
.top .brand:hover { text-decoration:none; color:var(--lime); }
.top .brand .dot { width:10px; height:10px; background:var(--lime); box-shadow:0 0 10px var(--lime); }
.top .sep { color:var(--muted); font-family:var(--pixel); font-size:19px; }
.top .home { margin-left:auto; font-family:var(--pixel); font-size:17px; color:var(--muted); }
.top .home:hover { color:var(--text); text-decoration:none; }
.top .lang { display:flex; gap:6px; }
.top .lang a {
  font-family:var(--pixel); font-size:15px; color:var(--muted);
  padding:4px 11px; border:1px solid var(--line); border-radius:999px;
  transition:color .16s, border-color .16s;
}
.top .lang a:hover { color:var(--text); border-color:var(--edge); text-decoration:none; }
.top .lang a.on { color:var(--lime); border-color:rgba(167,224,90,0.4); }
/* language dropdown — wiki.js collapses the .lang links into this <select> (progressive enhancement) */
.top .lang select {
  font-family:var(--pixel); font-size:15px; color:var(--muted); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:6px 32px 6px 14px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99f8c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:13px;
  transition:color .16s, border-color .16s;
}
.top .lang select:hover { color:var(--text); border-color:var(--edge); }
.top .lang select option { color:#1a1a1a; background:#fff; }

/* theme toggle — injected by wiki.js; an icon button (contrast/half-moon glyph) */
.top .themetog {
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  width:34px; height:34px; padding:0; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  transition:color .16s, border-color .16s, transform .16s;
}
.top .themetog:hover { color:var(--text); border-color:var(--edge); }
.top .themetog:active { transform:scale(.92); }
.top .themetog svg { display:block; width:18px; height:18px; }

.cols { display:grid; grid-template-columns:238px 1fr; gap:clamp(24px,5vw,52px); align-items:start; }
@media (max-width:860px){ .cols { grid-template-columns:1fr; gap:26px; } }

/* ── side nav ──────────────────────────────────────────── */
.side { position:sticky; top:22px; }
@media (max-width:860px){ .side { position:static; } }
.side .lbl { font-family:var(--pixel); font-size:15.5px; color:var(--muted); letter-spacing:.5px; margin:0 0 11px 14px; }
.side nav + .lbl { margin-top:30px; }
.side a {
  display:block; font-family:var(--pixel); font-size:17px; color:var(--muted);
  padding:8px 14px; border-left:2px solid transparent; border-radius:0 5px 5px 0;
  transition:color .16s, background .16s, border-color .16s;
}
.side a:hover { color:var(--text); background:var(--hover); text-decoration:none; }
.side a.on { color:var(--lime); border-left-color:var(--lime); background:rgba(167,224,90,0.09); }
@media (max-width:860px){
  .side nav { display:flex; flex-wrap:wrap; gap:6px; }
  .side a { border-left:0; border-radius:7px; background:var(--hover); }
  .side a.on { border-left:0; }
}

/* ── prose ─────────────────────────────────────────────── */
.doc { min-width:0; max-width:70ch; }
.doc h1 {
  font-family:var(--pixel); font-weight:400; font-size:clamp(25px,4.4vw,34px);
  line-height:1.25; margin-bottom:8px;
}
.doc .lede { color:var(--muted); font-size:17.5px; margin-bottom:34px; }
.doc h2 {
  font-family:var(--pixel); font-weight:400; font-size:21px; color:var(--text);
  margin:44px 0 14px; padding-left:13px; border-left:3px solid var(--lime);
}
.doc h3 { font-family:var(--pixel); font-weight:400; font-size:16.5px; color:var(--text); margin:26px 0 8px; }
.doc p { margin:12px 0; color:var(--prose); }
.doc ul, .doc ol { margin:12px 0 12px 20px; color:var(--prose); }
.doc li { margin:6px 0; }
.doc li::marker { color:var(--muted); }
.doc strong { color:var(--text); font-weight:600; }
.doc hr { border:0; border-top:1px solid var(--line); margin:44px 0; }

/* inline code + command chips: a command is the thing people copy, so it gets the accent */
code {
  font-family:var(--pixel); font-size:13.5px; color:var(--text);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:4px; padding:1px 5px; white-space:nowrap;
}
code.c { color:var(--lime); }

pre {
  font-family:var(--pixel); font-size:13.5px; line-height:1.85;
  background:var(--code-bg); border:1px solid var(--line); border-left:3px solid var(--orange);
  border-radius:9px; padding:13px 16px; margin:16px 0; overflow-x:auto; color:var(--text);
}
pre .d { color:var(--muted); } /* trailing explanation on a command line */

/* ── steps: the site's numbered panel, one per row ─────── */
.steps { list-style:none; margin:18px 0 0; padding:0; counter-reset:s; }
.steps li {
  position:relative; counter-increment:s; padding:0 0 0 44px; margin:0 0 20px;
}
.steps li::before {
  content:counter(s); position:absolute; left:0; top:1px;
  width:28px; height:28px; display:grid; place-items:center;
  font-family:var(--pixel); font-size:13px; color:var(--bg);
  background:var(--lime); border-radius:7px;
}
.steps li b { display:block; font-family:var(--pixel); font-weight:400; font-size:14.5px; color:var(--text); margin-bottom:3px; }
.steps li p { margin:3px 0 0; }

/* ── callout ───────────────────────────────────────────── */
.note {
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:15px 18px; margin:22px 0; overflow:hidden; font-size:16px; color:var(--prose);
}
.note::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--teal); }
.note.warn::before { background:var(--orange); }
.note b { font-family:var(--pixel); font-weight:400; color:var(--text); }

/* ── tables ────────────────────────────────────────────── */
.tw { overflow-x:auto; margin:18px 0; }
table { width:100%; border-collapse:collapse; font-size:15.5px; }
th {
  font-family:var(--pixel); font-weight:400; font-size:13px; color:var(--muted);
  text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
td { padding:9px 12px; border-bottom:1px solid var(--line-soft); color:var(--prose); vertical-align:top; }
td:first-child { white-space:nowrap; }
tr:last-child td { border-bottom:0; }

/* ── key caps: the landing page's hotbar, reused ───────── */
.hotbar { display:flex; gap:8px; flex-wrap:wrap; padding:10px; background:rgba(0,0,0,0.28); border:1px solid var(--line); border-radius:10px; margin:18px 0; width:max-content; max-width:100%; }
.slot { width:96px; background:linear-gradient(180deg,#3a352a,#2a251b); border:2px solid; border-color:#5b5341 #17140e #17140e #5b5341; border-radius:4px; padding:11px 7px 9px; text-align:center; }
.slot kbd { display:block; font-family:var(--pixel); font-size:16.5px; color:#a7e05a; margin-bottom:5px; }
.slot span { font-size:12px; color:#c6bda8; line-height:1.4; display:block; }

/* ── figures ───────────────────────────────────────────── */
figure { margin:22px 0; }
figure img {
  display:block; width:100%; height:auto; border-radius:11px;
  border:1px solid var(--line); background:var(--img-bg); box-shadow:0 20px 44px -30px rgba(0,0,0,0.7);
}
figure img.pix { image-rendering:pixelated; }
/* Screen recordings ride in a figure like an image does. Served as video rather than as a GIF: the
   same clip is roughly forty times smaller, and it does not stall the page while it loads. */
figure video {
  display:block; width:100%; height:auto; border-radius:11px;
  border:1px solid var(--line); background:var(--img-bg); box-shadow:0 20px 44px -30px rgba(0,0,0,0.7);
}
figcaption { font-size:14px; color:var(--muted); margin-top:9px; }

/* craft grids are small pixel-art images: side by side, never blown up */
.crafts { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:20px 0; }
@media (max-width:560px){ .crafts { grid-template-columns:1fr; } }
.crafts figure { margin:0; }
.crafts figcaption { margin-top:7px; font-family:var(--pixel); font-size:13px; }

.strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:12px; overflow-x:auto; padding-bottom:10px; margin:20px 0; }
.strip figure { margin:0; }
.strip img { aspect-ratio:16/9; object-fit:cover; }

/* ── hub cards ─────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:26px; }
@media (max-width:640px){ .cards { grid-template-columns:1fr; } }
.card {
  position:relative; display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:20px 20px 18px; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s;
}
.card:hover { transform:translateY(-4px); border-color:var(--edge); text-decoration:none; }
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--lime); }
.card:nth-child(2)::before { background:var(--teal); }
.card:nth-child(3)::before { background:var(--orange); }
.card:nth-child(4)::before { background:var(--lime); }
.card:nth-child(5)::before { background:var(--teal); }
.card:nth-child(6)::before { background:var(--orange); }
.card b { display:block; font-family:var(--pixel); font-weight:400; font-size:17.5px; color:var(--text); margin-bottom:6px; }
.card span { font-size:15.5px; color:var(--muted); }

/* ── next/prev ─────────────────────────────────────────── */
/* prev sits left, next right; margin-auto also parks a lone Next on the right */
.next { display:flex; gap:12px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid var(--line); }
.next .n-next { margin-left:auto; }
.next a {
  font-family:var(--pixel); font-size:14px; color:var(--text); background:var(--hover);
  border:1px solid var(--line); border-radius:9px; padding:11px 17px; transition:background .18s, border-color .18s;
}
.next a:hover { background:var(--hover-strong); border-color:var(--edge); text-decoration:none; }

/* ── faq ───────────────────────────────────────────────── */
/* Collapsed by default so the whole list stays scannable in one screen; the first
   one is open as an affordance that the rest of the rows open too. */
.faq { margin:20px 0 0; border-top:1px solid var(--line-soft); }
.faq details { border-bottom:1px solid var(--line-soft); }
.faq summary {
  list-style:none; cursor:pointer; position:relative; padding:15px 38px 15px 2px;
  font-family:var(--pixel); font-size:16px; color:var(--text); transition:color .18s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--lime); }
.faq summary::after {
  content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-family:var(--pixel); font-size:19px; color:var(--muted); transition:color .18s;
}
.faq details[open] summary { color:var(--lime); }
.faq details[open] summary::after { content:"−"; color:var(--lime); }
.faq .a { padding:0 38px 18px 2px; }
.faq .a p { margin:0 0 10px; }
.faq .a p:last-child { margin-bottom:0; }

.foot { border-top:1px solid var(--line); margin-top:56px; padding-top:20px; font-size:14px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot a { color:var(--muted); }
.foot a:hover { color:var(--text); }