/* ============================================================
   skills-zoo docs — dark-first terminal/garden aesthetic
   ============================================================ */

:root, [data-theme="light"] {
  --bg:            #f6f5f1;
  --surface:       #fbfaf7;
  --surface-2:     #efece5;
  --border:        #dcd7cd;
  --divider:       #e6e2da;
  --text:          #22201b;
  --text-muted:    #6f6c64;
  --text-faint:    #a6a297;
  --accent:        #2f7d5b;   /* garden green */
  --accent-hover:  #245f45;
  --accent-soft:   #dcece3;
  --code-bg:       #edeae2;
  --tag-bg:        #e4e9e5;

  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius:   10px;
  --radius-sm: 6px;
  --maxw: 820px;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-lg: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
}

[data-theme="dark"] {
  --bg:            #121311;
  --surface:       #191b18;
  --surface-2:     #20231f;
  --border:        #2c302a;
  --divider:       #23261f;
  --text:          #d6d4cc;
  --text-muted:    #8b8a80;
  --text-faint:    #5c5b53;
  --accent:        #6cc79a;
  --accent-hover:  #85d6ae;
  --accent-soft:   #1e2a23;
  --code-bg:       #1c1f1b;
  --tag-bg:        #23291f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#121311; --surface:#191b18; --surface-2:#20231f; --border:#2c302a;
    --divider:#23261f; --text:#d6d4cc; --text-muted:#8b8a80; --text-faint:#5c5b53;
    --accent:#6cc79a; --accent-hover:#85d6ae; --accent-soft:#1e2a23;
    --code-bg:#1c1f1b; --tag-bg:#23291f;
  }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:5rem;
}

body {
  min-height:100dvh; line-height:1.65; font-family:var(--font-body);
  font-size:var(--text-base); color:var(--text); background:var(--bg);
}

img,svg { display:block; max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }

h1,h2,h3 { line-height:1.15; text-wrap:balance; letter-spacing:-0.01em; }
p { text-wrap:pretty; max-width:68ch; }

::selection { background:var(--accent-soft); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-sm); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

a,button { transition:color .18s ease, background .18s ease, border-color .18s ease; }

/* ---------- layout ---------- */
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem; }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--divider);
}
.site-header .wrap {
  display:flex; align-items:center; gap:1rem;
  height:3.75rem;
}
.brand { display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--text); }
.brand:hover { text-decoration:none; color:var(--text); }
.brand svg { width:26px; height:26px; color:var(--accent); }
.brand .brand-name { font-family:var(--font-mono); font-size:1rem; letter-spacing:-.02em; }
.header-spacer { flex:1; }
.header-link { font-size:var(--text-sm); color:var(--text-muted); }
.header-link:hover { color:var(--text); text-decoration:none; }
.theme-toggle {
  display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text-muted);
}
.theme-toggle:hover { color:var(--text); border-color:var(--accent); }

/* ---------- hero ---------- */
.hero { padding-block:clamp(3rem,8vw,6rem) 2.5rem; }
.eyebrow {
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
.hero h1 { font-size:var(--text-2xl); margin-bottom:1.1rem; }
.hero .lede { font-size:var(--text-lg); color:var(--text-muted); max-width:56ch; }
.hero .install-hint {
  margin-top:2rem; font-family:var(--font-mono); font-size:var(--text-sm);
  background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.15rem; color:var(--text); overflow-x:auto;
  display:flex; align-items:center; gap:.75rem;
}
.install-hint .prompt { color:var(--accent); user-select:none; }
.install-hint code { white-space:pre; }

/* ---------- sections ---------- */
section { padding-block:2rem; }
.section-label {
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:1.25rem;
  display:flex; align-items:center; gap:.6rem;
}
.section-label::after { content:""; flex:1; height:1px; background:var(--divider); }

/* ---------- skill cards ---------- */
.skill-grid { display:grid; gap:1rem; }
.skill-card {
  display:block; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); padding:1.4rem 1.5rem; color:var(--text);
  position:relative; overflow:hidden;
}
.skill-card:hover { border-color:var(--accent); text-decoration:none; color:var(--text); }
.skill-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:0; transition:opacity .18s ease;
}
.skill-card:hover::before { opacity:1; }
.skill-card .sc-head { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem; }
.skill-card h3 { font-family:var(--font-mono); font-size:var(--text-lg); }
.skill-card .sc-ver { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-faint); }
.skill-card p { color:var(--text-muted); font-size:var(--text-sm); max-width:none; }
/* compact skills index strip */
.skill-index {
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  margin:0 0 2.2rem; padding-bottom:1.4rem; border-bottom:1px solid var(--divider);
}
.skill-index-label {
  font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}
.skill-index-pills { display:flex; gap:.4rem; flex-wrap:wrap; }
.skill-index-pill {
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.28rem .6rem; text-decoration:none; transition:color .15s ease, border-color .15s ease;
}
.skill-index-pill:hover { color:var(--accent); border-color:var(--accent); }
.skill-index-pill--meta {
  border-style:dashed;
  color:var(--text-faint);
}
.skill-index-pill--meta:hover { color:var(--accent); border-color:var(--accent); }
.skill-card { scroll-margin-top:1.5rem; }
.skill-card--meta {
  border-style:dashed;
}
.skill-card--meta:hover { border-style:dashed; }
/* card thumbnail preview */
.sc-thumb {
  display:block; width:calc(100% + 3rem); margin:-1.4rem -1.5rem 1.1rem;
  aspect-ratio:900/560; object-fit:cover; object-position:center top;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
.skill-card:hover .sc-thumb { filter:saturate(1.05); }
/* detail-page hero screenshot */
.skill-shot {
  width:100%; height:auto; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface-2);
  margin:0 0 2rem; box-shadow:0 6px 24px rgba(0,0,0,.10);
}
/* theme-swap: show the preview matching the active theme (must come last) */
.sc-thumb--light, .skill-shot--light { display:none !important; }
[data-theme="light"] .sc-thumb--dark, [data-theme="light"] .skill-shot--dark { display:none !important; }
[data-theme="light"] .sc-thumb--light { display:block !important; }
[data-theme="light"] .skill-shot--light { display:block !important; }
.tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.85rem; }
.tag {
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--accent);
  background:var(--tag-bg); border-radius:var(--radius-sm); padding:.18rem .5rem;
}
.risk-pill {
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  padding:.18rem .5rem; border-radius:var(--radius-sm);
  background:var(--accent-soft); color:var(--accent);
}
.risk-pill--l2 {
  background:color-mix(in srgb, #d98a1f 18%, transparent);
  color:#d98a1f;
}

/* ---------- how-it-works steps ---------- */
.steps { display:grid; gap:.9rem; counter-reset:step; }
.step {
  display:flex; gap:1rem; align-items:flex-start;
  border:1px solid var(--divider); border-radius:var(--radius);
  background:var(--surface); padding:1rem 1.2rem;
}
.step .num {
  flex:none; width:1.9rem; height:1.9rem; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600;
  background:var(--accent-soft); color:var(--accent); border-radius:var(--radius-sm);
}
.step .body h4 { font-size:var(--text-base); margin-bottom:.15rem; }
.step .body p { font-size:var(--text-sm); color:var(--text-muted); margin:0; }
.step code { font-family:var(--font-mono); font-size:.85em; background:var(--code-bg); padding:.1em .35em; border-radius:4px; }

/* ---------- prose (skill detail) ---------- */
.prose { padding-block:1rem 3rem; }
.prose h1 { font-size:var(--text-xl); font-family:var(--font-mono); margin-bottom:.4rem; }
.prose > .sub { color:var(--text-muted); font-size:var(--text-base); margin-bottom:1.75rem; }
.prose h2 { font-size:var(--text-lg); margin:2.25rem 0 .85rem; }
.prose h3 { font-size:var(--text-base); margin:1.5rem 0 .5rem; font-family:var(--font-mono); }
.prose p, .prose li { color:var(--text); font-size:var(--text-base); }
.prose p { margin-bottom:1rem; }
.prose ul, .prose ol { margin:0 0 1rem 1.4rem; }
.prose li { margin-bottom:.4rem; }
.prose li::marker { color:var(--accent); }
.prose strong { color:var(--text); }
.prose code {
  font-family:var(--font-mono); font-size:.88em; background:var(--code-bg);
  padding:.12em .4em; border-radius:4px; color:var(--text);
}
.prose pre {
  background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.25rem; overflow-x:auto; margin:0 0 1.25rem;
}
.prose pre code { background:none; padding:0; font-size:var(--text-sm); line-height:1.55; }
.prose blockquote {
  border-left:3px solid var(--accent); background:var(--surface);
  padding:.9rem 1.2rem; margin:0 0 1.25rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-muted);
}
.prose blockquote p { margin:0; color:var(--text-muted); }

.callout {
  border:1px solid var(--border); background:var(--accent-soft);
  border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1.5rem;
  font-size:var(--text-sm);
}
.callout strong { color:var(--accent); }

.backlink {
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono);
  font-size:var(--text-sm); color:var(--text-muted); margin-bottom:1.5rem;
}
.backlink:hover { color:var(--accent); text-decoration:none; }

.meta-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem; }
.filelist { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.filelist li {
  font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-muted);
  border:1px solid var(--divider); border-radius:var(--radius-sm);
  padding:.55rem .8rem; margin:0; display:flex; gap:.6rem; align-items:center;
}
.filelist .fname { color:var(--text); }

/* ---------- footer ---------- */
.site-footer {
  border-top:1px solid var(--divider); margin-top:3rem;
  padding-block:2rem; color:var(--text-faint); font-size:var(--text-sm);
}
.site-footer .wrap { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.site-footer a { color:var(--text-muted); }
.site-footer .foot-mono { font-family:var(--font-mono); font-size:var(--text-xs); }
.site-footer .header-spacer { flex:1; }