/* Screenwhere — documentation site styles.
   Reuses the app's KAC Design System tokens (verbatim from web/style.css) so the
   docs match the product. Self-contained: no external CSS, works over file://. */

/* ===== KAC tokens — base palette + LIGHT semantics ===== */
:root{
  --green-950:#04330a; --green-900:#0d6614; --green-800:#0f7a17; --green-700:#149a1f;
  --green-500:#2dd140; --green-200:#c4ecc8; --green-100:#e8f6ea; --green-50:#f3faf4;
  --ink-950:#0a0d0a; --ink-900:#14181a; --ink-800:#1d2324; --ink-700:#2c3437;
  --ink-500:#5b6469; --ink-400:#7d878c; --ink-300:#b4bcc0; --ink-200:#d5dadc; --ink-100:#ebeeef; --ink-50:#f5f7f7;
  --white:#fff;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-num:"Montserrat Alt1","Inter",system-ui,sans-serif;
  --radius-sm:10px; --radius:18px; --radius-lg:26px; --radius-pill:999px;
  --ease-out:cubic-bezier(.2,.7,.2,1); --dur:.35s; --dur-fast:.2s;
  --color-fg:var(--ink-900); --color-fg-muted:var(--ink-700); --color-fg-subtle:var(--ink-500);
  --color-bg:#fafbfa; --color-bg-soft:#f3f6f3; --color-border:var(--ink-100); --color-border-strong:var(--ink-200);
  --color-accent:var(--green-900); --color-accent-2:var(--green-700); --color-accent-bright:var(--green-500);
  --color-accent-fg:var(--green-900); --color-accent-bg:var(--green-100); --color-on-accent:#fff;
  --color-surface:#fff; --color-surface-alt:#eef1ee;
  --color-overlay:rgba(10,15,10,.45);
  --shadow-1:0 1px 2px rgba(10,15,10,.04),0 4px 14px rgba(10,15,10,.06);
  --shadow-2:0 8px 30px rgba(13,102,20,.08),0 2px 6px rgba(10,15,10,.05);
  --shadow-glow:0 16px 40px -16px rgba(13,102,20,.35);
}
html[data-theme="dark"]{
  --color-fg:#eef2f0; --color-fg-muted:#c0c8c4; --color-fg-subtle:#8a938e;
  --color-bg:#0a0e0c; --color-bg-soft:#101513; --color-border:#252d28; --color-border-strong:#36403b;
  --color-accent:#138a1c; --color-accent-2:#19a826; --color-accent-bright:#2dd140;
  --color-accent-fg:#41dd51; --color-accent-bg:#13251b; --color-on-accent:#fff;
  --color-surface:#161c19; --color-surface-alt:#1f2723;
  --color-overlay:rgba(0,0,0,.66);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.5);
  --shadow-2:0 12px 38px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4);
  --shadow-glow:0 18px 46px -14px rgba(45,209,64,.4); color-scheme:dark;
}
@media (prefers-color-scheme:dark){ html:not([data-theme="light"]):not([data-theme="dark"]){
  --color-fg:#eef2f0; --color-fg-muted:#c0c8c4; --color-fg-subtle:#8a938e;
  --color-bg:#0a0e0c; --color-bg-soft:#101513; --color-border:#252d28; --color-border-strong:#36403b;
  --color-accent:#138a1c; --color-accent-2:#19a826; --color-accent-bright:#2dd140;
  --color-accent-fg:#41dd51; --color-accent-bg:#13251b; --color-on-accent:#fff;
  --color-surface:#161c19; --color-surface-alt:#1f2723; --color-overlay:rgba(0,0,0,.66);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.5);
  --shadow-2:0 12px 38px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4);
  --shadow-glow:0 18px 46px -14px rgba(45,209,64,.4); color-scheme:dark;
}}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }
body{ font-family:var(--font-ui); font-size:16px; line-height:1.6; color:var(--color-fg);
  background:var(--color-bg); -webkit-font-smoothing:antialiased; transition:background .3s,color .3s; }
::selection{ background:var(--color-accent); color:#fff; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums; }
a{ color:var(--color-accent-fg); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.18; letter-spacing:-.02em; }

/* ===== top nav ===== */
.nav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:22px;
  padding:13px clamp(16px,4vw,40px); background:color-mix(in srgb,var(--color-bg) 82%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--color-border); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; color:var(--color-fg); }
.brand .logo{ width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  background:linear-gradient(135deg,var(--color-accent-2),var(--color-accent-bright)); color:#fff; box-shadow:var(--shadow-glow); }
.brand .logo svg{ width:16px; height:16px; }
.brand .wm-accent{ color:var(--color-accent-fg); }
.nav .links{ display:flex; gap:4px; margin-left:6px; flex-wrap:wrap; }
.nav .links a{ padding:7px 12px; border-radius:var(--radius-pill); color:var(--color-fg-muted);
  font-size:.93rem; font-weight:500; transition:background var(--dur-fast),color var(--dur-fast); }
.nav .links a:hover{ background:var(--color-bg-soft); color:var(--color-fg); text-decoration:none; }
.nav .links a.active{ background:var(--color-accent-bg); color:var(--color-accent-fg); }
.nav .grow{ flex:1; }
.ghostbtn{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-pill);
  border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-fg-muted);
  cursor:pointer; transition:transform var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast); }
.ghostbtn:hover{ color:var(--color-accent-fg); border-color:var(--color-accent-bright); transform:translateY(-1px); }
.ghostbtn svg{ width:18px; height:18px; }
.ghostbtn .moon{ display:none; } html[data-theme="dark"] .ghostbtn .sun{ display:none; }
html[data-theme="dark"] .ghostbtn .moon{ display:block; }

/* ===== layout ===== */
.wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
section{ padding:clamp(48px,8vw,96px) 0; }
.kicker{ font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent-fg); }
.lead{ font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--color-fg-muted); max-width:60ch; }

/* ===== hero ===== */
.hero{ position:relative; overflow:hidden; padding-top:clamp(40px,7vw,80px); }
.hero::before{ content:""; position:absolute; inset:-30% -10% auto; height:560px; z-index:-1;
  background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--color-accent-bright) 22%,transparent),transparent 70%);
  animation:floaty 9s var(--ease-out) infinite alternate; }
@keyframes floaty{ from{ transform:translateY(-10px) scale(1); } to{ transform:translateY(14px) scale(1.05); } }
.hero h1{ font-size:clamp(2.3rem,6vw,4rem); margin:.3em 0 .25em; }
.hero h1 .grad{ background:linear-gradient(120deg,var(--color-accent-2),var(--color-accent-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.badge{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--color-accent-bg); color:var(--color-accent-fg); font-size:.82rem; font-weight:600; }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--color-accent-bright);
  box-shadow:0 0 0 0 var(--color-accent-bright); animation:livepulse 2.4s ease-out infinite; }
@keyframes livepulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent-bright) 70%,transparent); }
  70%,100%{ box-shadow:0 0 0 7px transparent; } }
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.98rem; cursor:pointer; border:1px solid transparent; transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast); }
.btn.primary{ background:linear-gradient(120deg,var(--color-accent-2),var(--color-accent-bright)); color:#fff; box-shadow:var(--shadow-glow); }
.btn.primary:hover{ transform:translateY(-2px); text-decoration:none; }
.btn.ghost{ background:var(--color-surface); border-color:var(--color-border-strong); color:var(--color-fg); }
.btn.ghost:hover{ border-color:var(--color-accent-bright); color:var(--color-accent-fg); text-decoration:none; transform:translateY(-2px); }

/* ===== cards / grid ===== */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:30px; }
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-1); transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--color-accent-bright) 40%,var(--color-border)); }
.card .ic{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  background:var(--color-accent-bg); color:var(--color-accent-fg); margin-bottom:14px; }
.card .ic svg{ width:22px; height:22px; }
.card h3{ margin:.1em 0 .35em; font-size:1.12rem; }
.card p{ margin:0; color:var(--color-fg-subtle); font-size:.95rem; }

/* ===== architecture diagram ===== */
.diagram{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:clamp(16px,3vw,30px); box-shadow:var(--shadow-1); margin-top:30px; }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram .lbl,.subdiagram .lbl{ fill:var(--color-fg-subtle); font:600 12px var(--font-ui); }
.diagram .colhd,.subdiagram .colhd{ fill:var(--color-accent-fg); font:700 12px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; }
.diagram .nodebox,.subdiagram .nodebox{ fill:var(--color-bg-soft); stroke:var(--color-border-strong); }
.diagram .nodetxt,.subdiagram .nodetxt{ fill:var(--color-fg); font:600 13px var(--font-ui); }
.diagram .nodesub,.subdiagram .nodesub{ fill:var(--color-fg-subtle); font:500 11px var(--font-ui); }
.diagram .flow,.subdiagram .flow{ stroke:var(--color-accent-bright); stroke-width:2; fill:none; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; }  /* paths use pathLength="1" → geometry-independent draw */
.diagram.in .flow,.subdiagram.in .flow{ animation:draw 1.3s var(--ease-out) forwards; }
.diagram .flow.d2{ animation-delay:.25s; } .diagram .flow.d3{ animation-delay:.5s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.diagram .pulse,.subdiagram .pulse{ fill:var(--color-accent-bright); opacity:0; }
.diagram.in .pulse,.subdiagram.in .pulse{ animation:pulsemove 2.6s var(--ease-out) .9s infinite; }
.diagram .pulse.p2{ animation-delay:1.3s !important; } .diagram .pulse.p3{ animation-delay:1.8s !important; }
@keyframes pulsemove{ 0%{ opacity:0; offset-distance:0%; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ opacity:0; offset-distance:100%; } }

/* ===== scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

/* ===== page header (inner pages) ===== */
.pagehead{ padding:clamp(40px,7vw,80px) 0 8px; }
.pagehead h1{ font-size:clamp(2rem,5vw,3rem); margin:.25em 0 .2em; }

/* ===== prose ===== */
.prose{ max-width:72ch; }
.prose p{ color:var(--color-fg-muted); }
.prose h2{ margin:1.8em 0 .5em; font-size:1.5rem; }
.prose h3{ margin:1.4em 0 .3em; font-size:1.15rem; }
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:6px; padding:1px 6px; }
.prose ul{ padding-left:1.1em; } .prose li{ margin:.3em 0; color:var(--color-fg-muted); }
.prose strong{ color:var(--color-fg); }

/* ===== callout ===== */
.note{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius);
  background:var(--color-accent-bg); border:1px solid color-mix(in srgb,var(--color-accent-bright) 30%,var(--color-border));
  margin:22px 0; }
.note .ic{ color:var(--color-accent-fg); flex:none; } .note .ic svg{ width:20px; height:20px; }
.note p{ margin:0; font-size:.95rem; color:var(--color-fg-muted); }

/* ===== feature rows (alternating) ===== */
.feature{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,4vw,48px); align-items:center;
  padding:clamp(28px,5vw,56px) 0; border-top:1px solid var(--color-border); }
.feature:first-of-type{ border-top:0; }
.feature.flip .ftext{ order:2; }
.feature .ic-pill{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:var(--color-accent-bg); color:var(--color-accent-fg); margin-bottom:14px; }
.feature .ic-pill svg{ width:24px; height:24px; }
.feature h3{ font-size:1.4rem; margin:.1em 0 .35em; }
.feature p{ color:var(--color-fg-muted); margin:.2em 0; }
.feature .tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.feature .tags span{ font-size:.78rem; padding:4px 10px; border-radius:var(--radius-pill);
  background:var(--color-bg-soft); border:1px solid var(--color-border); color:var(--color-fg-subtle); }
@media (max-width:760px){ .feature{ grid-template-columns:1fr; } .feature.flip .ftext{ order:0; } }

/* ===== screenshot frame (placeholder until Phase-5 real captures) ===== */
.shot{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--color-border-strong);
  box-shadow:var(--shadow-2); background:var(--color-surface-alt); }
.shot img{ width:100%; height:auto; display:block; }
.shot.ph{ aspect-ratio:16/10; display:grid; place-items:center; position:relative;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--color-accent-bright) 8%,var(--color-surface)),var(--color-surface-alt)); }
.shot.ph::after{ content:attr(data-label); color:var(--color-fg-subtle); font-size:.86rem; font-weight:600;
  letter-spacing:.04em; padding:8px 14px; border:1px dashed var(--color-border-strong); border-radius:var(--radius-pill); }
.shot.ph .dots{ position:absolute; top:12px; left:14px; display:flex; gap:6px; }
.shot.ph .dots i{ width:9px; height:9px; border-radius:50%; background:var(--color-border-strong); }
figure{ margin:0; } figcaption{ margin-top:9px; font-size:.86rem; color:var(--color-fg-subtle); text-align:center; }

/* ===== screens walkthrough grid ===== */
.screens{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin-top:28px; }
.screens figure p{ margin:7px 2px 0; font-size:.9rem; color:var(--color-fg-subtle); text-align:left; }
.screens figcaption{ text-align:left; font-weight:600; color:var(--color-fg); margin-top:10px; }

/* ===== changelog timeline ===== */
.timeline{ position:relative; margin-top:30px; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--color-accent-bright),transparent); }
.tl{ position:relative; padding:0 0 30px; }
.tl::before{ content:""; position:absolute; left:-30px; top:6px; width:14px; height:14px; border-radius:50%;
  background:var(--color-surface); border:3px solid var(--color-accent-bright); box-shadow:0 0 0 4px var(--color-accent-bg); }
.tl .ver{ display:inline-flex; align-items:baseline; gap:10px; }
.tl .tag{ font:700 .85rem var(--font-num); padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--color-accent-bg); color:var(--color-accent-fg); }
.tl .date{ color:var(--color-fg-subtle); font-size:.85rem; }
.tl h3{ margin:.5em 0 .15em; font-size:1.15rem; }
.tl .sum{ color:var(--color-fg-muted); font-style:italic; margin:.1em 0 .5em; }
.tl ul{ padding-left:1.05em; margin:.3em 0; } .tl li{ color:var(--color-fg-muted); font-size:.95rem; margin:.25em 0; }
.tl.cur .tag{ background:linear-gradient(120deg,var(--color-accent-2),var(--color-accent-bright)); color:#fff; }

/* ===== mini sub-diagram (NAT) ===== */
.subdiagram{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:clamp(14px,3vw,26px); box-shadow:var(--shadow-1); margin:26px 0; }
.subdiagram svg{ width:100%; height:auto; display:block; }

/* ===== footer ===== */
.foot{ border-top:1px solid var(--color-border); padding:30px 0 50px; color:var(--color-fg-subtle); font-size:.9rem; }
.foot .wrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.foot .grow{ flex:1; }
.foot a{ color:var(--color-fg-muted); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; } .diagram .flow{ stroke-dashoffset:0; }
}