/* akari user guide (docs surface).

   The guide renders in its own standalone document, loading only base.css (for
   the design tokens, fonts, and resets) and this file. It reuses akari's system
   from base.css (dark violet-graphite steel under a muted lilac signal) and adds
   the docs-specific layout: the sticky header, the sidebar/content/TOC frame,
   the prose typography for rendered Markdown, and the table-of-contents rail.
   Everything is namespaced under .guide-* so nothing here touches the app pages,
   and where a bare-element rule in base.css would bleed through (main, headings)
   the .guide- rules override it by specificity. */

:root {
  --guide-header-h: 3.25rem;
  --guide-aside: 15rem;
  --guide-toc: 14rem;
  --guide-gutter: var(--sp-xl);
}

.guide-body {
  min-height: 100vh;
  background: var(--bg);
}

.guide-hidden { display: none; }

/* Skip link: hidden until focused, then it drops into view. */
.guide-skip {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -140%);
  top: 0.6rem;
  z-index: var(--z-overlay);
  background: var(--lilac);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  transition: transform var(--dur-base) var(--ease-settle);
}
.guide-skip:focus { transform: translate(-50%, 0); text-decoration: none; }

/* ============================ Header ============================ */
.guide-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--guide-header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 0 var(--guide-gutter);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.guide-brand { color: var(--text); font-weight: 600; font-size: 1rem; display: inline-flex; }
.guide-brand:hover { text-decoration: none; }
.guide-header .brandmark { display: inline-flex; align-items: center; gap: var(--sp-sm); }
.guide-header .brandglyph { color: var(--lilac); display: block; }
.guide-header .brandver { color: var(--muted); font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; align-self: center; }
.guide-header-sep { width: 1px; height: 1.1rem; background: var(--border-strong); }
.guide-header-label {
  font-family: var(--mono); font-size: 0.75rem; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.guide-header-action { color: var(--subtext); font-size: 0.875rem; }
.guide-header-action:hover { color: var(--lilac); text-decoration: none; }

/* Nav toggle: only on narrow viewports. */
.guide-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--subtext);
}
.guide-menu:hover { background: var(--surface-2); color: var(--text); }

/* ============================ Frame ============================ */
.guide-shell {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 var(--guide-gutter);
}
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.25rem);
  align-items: start;
}

/* ============================ Sidebar ============================ */
.guide-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-overlay);
  width: min(82vw, 20rem);
  padding: calc(var(--guide-header-h) + var(--sp-lg)) var(--guide-gutter) var(--sp-xl);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(-101%);
  transition: transform var(--dur-slow) var(--ease-settle);
  overscroll-behavior: contain;
}
.is-guide-nav-open .guide-sidebar { transform: none; }
.guide-nav-label {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--sp-md);
}
.guide-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.guide-nav-link {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--subtext); font-size: 0.875rem; line-height: 1.35;
  transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.guide-nav-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.guide-nav-link.is-active { color: var(--lilac); background: var(--surface-3); font-weight: 500; }
.guide-nav-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); flex: none; }
.guide-nav-link.is-active .guide-nav-num { color: var(--lilac); }

/* Scrim behind the mobile drawer. */
.guide-scrim {
  position: fixed; inset: 0; z-index: var(--z-sticky);
  border: 0; padding: 0; background: rgba(8, 6, 14, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-state), visibility var(--dur-slow);
}
.is-guide-nav-open .guide-scrim { opacity: 1; visibility: visible; }

/* ============================ Main column ============================ */
.guide-main {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0;
}

.guide-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.guide-action {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--subtext);
  font-family: var(--mono); font-size: 0.75rem; line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state), background var(--dur-fast) var(--ease-state);
}
.guide-action:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); text-decoration: none; }
.guide-action-ico { flex: none; color: var(--faint); }
.guide-action:hover .guide-action-ico { color: var(--lilac); }
.guide-action[data-copied] { border-color: rgba(159, 214, 166, 0.5); color: var(--ok); }
.guide-action[data-copied] .guide-action-ico { color: var(--ok); }

/* ============================ Prose ============================ */
.guide-prose { max-width: 46rem; font-size: 0.9375rem; line-height: 1.7; color: var(--subtext); }
.guide-prose > * + * { margin-top: var(--sp-lg); }

.guide-prose h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--text);
  margin: 0 0 var(--sp-sm);
}
.guide-prose h2 { font-size: 1.35rem; color: var(--text); margin: 0; }
.guide-prose h3 { font-size: 1.0625rem; color: var(--text); margin: 0; }
.guide-prose h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0; }
.guide-prose > :is(h2, h3, h4) { margin-top: var(--sp-2xl); }
.guide-prose > h2 { padding-top: var(--sp-xl); border-top: 1px solid var(--border); }
.guide-prose :is(h1, h2, h3, h4) { scroll-margin-top: calc(var(--guide-header-h) + var(--sp-lg)); }

/* Lead subtitle: the blockquote right under the page title. */
.guide-prose > h1 + blockquote {
  margin-top: var(--sp-md);
  padding: 0 0 var(--sp-lg);
  border: 0; border-bottom: 1px solid var(--border);
  font-size: 1.0625rem; color: var(--muted);
}
.guide-prose > h1 + blockquote p { margin: 0; }

.guide-prose blockquote {
  border-left: 2px solid var(--lilac);
  padding: 2px 0 2px var(--sp-lg);
  color: var(--subtext);
}
.guide-prose blockquote > * + * { margin-top: var(--sp-sm); }
.guide-prose blockquote strong { color: var(--text); }

.guide-prose a { color: var(--lilac); }
.guide-prose a:hover { text-decoration: underline; text-underline-offset: 2px; }

.guide-prose ul, .guide-prose ol { padding-left: 1.4rem; margin-top: var(--sp-md); }
.guide-prose li::marker { color: var(--faint); }
.guide-prose li + li { margin-top: var(--sp-sm); }
.guide-prose li > :is(ul, ol) { margin-top: var(--sp-sm); }

/* Inline code chip; code inside a pre well keeps the plain mono treatment. */
.guide-prose :not(pre) > code {
  font-family: var(--mono); font-size: 0.85em;
  padding: 0.1em 0.36em;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
}

.guide-prose pre {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg);
  overflow-x: auto; font-size: 0.8125rem; line-height: 1.65;
}
.guide-prose pre code {
  font-family: var(--mono); color: var(--text);
  background: none; border: 0; padding: 0; font-size: inherit;
}

.guide-prose table {
  display: block; width: 100%; overflow-x: auto;
  border-collapse: collapse; font-size: 0.875rem;
}
.guide-prose :is(th, td) {
  text-align: left; padding: 7px 12px;
  border: 1px solid var(--border); vertical-align: top;
}
.guide-prose td { color: var(--subtext); }
.guide-prose thead th {
  background: var(--surface-2); color: var(--text);
  font-family: var(--mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.guide-prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-xl) 0; }
.guide-prose img { max-width: 100%; border-radius: var(--r-md); }
.guide-prose strong { color: var(--text); font-weight: 600; }

/* ============================ Prev / next ============================ */
.guide-prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);
  margin-top: var(--sp-2xl); padding-top: var(--sp-xl);
  border-top: 1px solid var(--border);
}
.guide-prevnext-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-state), background var(--dur-fast) var(--ease-state);
}
.guide-prevnext-link:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.guide-prevnext-link.is-next { text-align: right; }
.guide-prevnext-dir { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--faint); }
.guide-prevnext-title { color: var(--text); font-weight: 500; font-size: 0.875rem; }
.guide-prevnext-spacer { display: block; }

/* ============================ TOC ============================ */
.guide-toc { display: none; }
.guide-toc-label {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--sp-md);
}
.guide-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.guide-toc-item.is-h3 { padding-left: 0.85rem; }
.guide-toc-link {
  display: block; padding: 5px 0 5px 0.85rem; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted); font-size: 0.8125rem; line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-state), border-color var(--dur-fast) var(--ease-state);
}
.guide-toc-link:hover { color: var(--subtext); text-decoration: none; }
.guide-toc-link.is-active { color: var(--lilac); border-left-color: var(--lilac); }

/* ============================ Footer ============================ */
.guide-footer {
  max-width: 88rem; margin: var(--sp-2xl) auto 0;
  padding: var(--sp-lg) var(--guide-gutter);
  display: flex; align-items: center; gap: var(--sp-lg);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.75rem; color: var(--faint);
}
.guide-footer a { color: var(--muted); }
.guide-footer a:hover { color: var(--lilac); text-decoration: none; }

/* ============================ Responsive ============================ */
@media (min-width: 64rem) {
  .guide-menu { display: none; }
  .guide-layout { grid-template-columns: var(--guide-aside) minmax(0, 1fr); }
  /* Sidebar becomes a static, sticky rail. */
  .guide-sidebar {
    position: sticky; top: var(--guide-header-h);
    inset: auto; width: auto;
    max-height: calc(100vh - var(--guide-header-h));
    padding: var(--sp-xl) var(--sp-sm) var(--sp-xl) 0;
    background: transparent; border-right: 0;
    transform: none;
  }
  .guide-scrim { display: none; }
}

@media (min-width: 86rem) {
  .guide-layout { grid-template-columns: var(--guide-aside) minmax(0, 1fr) var(--guide-toc); }
  .guide-toc {
    display: block; position: sticky; top: var(--guide-header-h);
    max-height: calc(100vh - var(--guide-header-h)); overflow-y: auto;
    padding: var(--sp-xl) 0;
  }
}

@media (max-width: 40rem) {
  .guide-prevnext { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-sidebar, .guide-scrim, .guide-skip { transition: none; }
}