/*
 * docs.css - the Jenesis documentation site, layered over app.css (the console design system) and Pico.
 *
 * It adds three things app.css does not: the Jenesis brand palette and heading font, the documentation
 * layout (top bar, left menu, readable content column, prev/next), and the landing grid. It stays additive:
 * brand colours are wired into Pico's own --pico-* variables so light/dark theming keeps working, and the
 * app.* component classes (badge, card, list) remain available to chapter authors.
 */

/* ---- Brand ---------------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* The brand palette and the Pico primary wiring live in app.css (the shared console design system) so the
     documentation site and both product consoles stay identical. These are local aliases to app.css's
     --app-brand-* tokens for the few docs-only rules below; do not redefine the hex here. */
  --brand-ink: var(--app-brand-ink);
  --brand-amber: var(--app-brand-amber);
  --brand-cream: var(--app-brand-cream);
  --brand-rust: var(--app-brand-rust);

  --docs-measure: 46rem;              /* readable line length for prose */
  --docs-sidebar-width: 16rem;
  --docs-header-height: 3.5rem;
}

h1, h2, h3, .site-brand__name, .landing-hero h1 {
  font-family: "Archivo", var(--pico-font-family);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

body { --pico-line-height: 1.6; }

/* Logos are single-colour SVGs; the base page ships the light (ink) mark and JS swaps to the dark (cream)
   mark under a dark theme. */
[data-theme="dark"] img[data-logo] { content: none; }

/* ---- Skip link + focus ---------------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brand-ink); color: var(--brand-cream);
  padding: var(--app-space-2) var(--app-space-4); border-radius: 0 0 var(--app-radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ---- Top bar -------------------------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-block: 0;   /* Pico pads body>header; kill it so the bar's real height matches --docs-header-height */
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--app-space-4);
  max-width: 80rem; margin: 0 auto; padding: 0 var(--app-space-4);
  height: var(--docs-header-height);
}
.site-brand { display: inline-flex; align-items: center; gap: var(--app-space-2); text-decoration: none; color: inherit; }
.site-brand__name { font-size: var(--app-font-size-lg); }
.site-nav { display: flex; gap: var(--app-space-4); margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--pico-muted-color); font-size: var(--app-font-size-sm); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--pico-primary); }
.site-repo {
  display: inline-flex; align-items: center; gap: var(--app-space-1);
  text-decoration: none; color: var(--pico-muted-color); font-size: var(--app-font-size-sm);
}
.site-repo:hover { color: var(--pico-primary); }
.site-repo__mark { flex: none; }
.theme-toggle, .nav-toggle {
  background: none; border: 1px solid var(--pico-muted-border-color); color: inherit;
  width: auto; margin: 0; padding: var(--app-space-1) var(--app-space-3);
  border-radius: var(--app-radius-md); font-size: var(--app-font-size-sm); line-height: 1.2; cursor: pointer;
}
.nav-toggle { margin-left: auto; display: none; }

/* ---- Landing -------------------------------------------------------------------------------------------- */
.landing { max-width: 60rem; margin: 0 auto; padding: var(--app-space-6) var(--app-space-4); }
.landing-hero { text-align: center; padding: var(--app-space-6) 0; }
.landing-hero h1 { font-size: var(--app-font-size-2xl); margin-bottom: var(--app-space-3); }
.landing-hero p { max-width: 40rem; margin: 0 auto; color: var(--pico-muted-color); font-size: var(--app-font-size-lg); }
.landing-release {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--app-space-3); margin-top: var(--app-space-5); font-size: var(--app-font-size-sm);
}
.landing-release__version {
  text-decoration: none; padding: var(--app-space-1) var(--app-space-3);
  border: 1px solid var(--pico-muted-border-color); border-radius: 999px; color: var(--pico-muted-color);
}
.landing-release__version:hover { border-color: var(--pico-primary); color: var(--pico-primary); }
.landing-release__version strong { color: var(--pico-primary); }
.landing-release__install {
  background: var(--pico-code-background-color); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--app-radius-md); padding: var(--app-space-1) var(--app-space-3); font-size: var(--app-font-size-sm);
}

.project-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--app-space-4); margin-top: var(--app-space-6);
}
.project-card {
  display: flex; flex-direction: column; gap: var(--app-space-3);
  padding: var(--app-space-5); text-decoration: none; color: inherit;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--app-radius-lg);
  background: var(--pico-card-background-color); transition: border-color 0.15s, transform 0.15s;
}
.project-card:hover { border-color: var(--pico-primary); transform: translateY(-2px); }
.project-card img { width: 2.5rem; height: 2.5rem; }
.project-card__name { font-family: "Archivo", var(--pico-font-family); font-weight: 800; font-size: var(--app-font-size-lg); }
.project-card__tagline { color: var(--pico-muted-color); font-size: var(--app-font-size-sm); margin: 0; }

/* ---- Docs layout ---------------------------------------------------------------------------------------- */
.docs {
  display: grid; grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  gap: var(--app-space-6); max-width: 80rem; margin: 0 auto; padding: 0 var(--app-space-4);
  align-items: start;
}
.docs-sidebar {
  position: sticky; top: calc(var(--docs-header-height) + 1px);
  max-height: calc(100vh - var(--docs-header-height) - 1px); overflow-y: auto;
  padding: var(--app-space-5) 0;
  scrollbar-width: none;                 /* Firefox: hide the menu scrollbar */
}
.docs-sidebar::-webkit-scrollbar { width: 0; height: 0; }   /* WebKit/Blink */
.docs-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.docs-menu a {
  display: block; padding: var(--app-space-2) var(--app-space-3);
  text-decoration: none; color: var(--pico-muted-color); font-size: var(--app-font-size-sm);
  border-radius: var(--app-radius-sm);
}
.docs-menu a:hover { color: var(--pico-color); background: var(--pico-card-sectioning-background-color); }
.docs-menu a[aria-current] { color: var(--pico-primary); font-weight: 600; }

.docs-content { padding: var(--app-space-5) 0 var(--app-space-6); min-width: 0; }
.docs-content article { max-width: var(--docs-measure); }
.docs-content h1 { font-size: var(--app-font-size-2xl); margin-bottom: var(--app-space-5); }
.docs-content h2 {
  font-size: var(--app-font-size-xl); margin-top: var(--app-space-6); margin-bottom: var(--app-space-3);
  padding-top: var(--app-space-4); border-top: 1px solid var(--pico-muted-border-color);
}
.docs-content h3 { font-size: var(--app-font-size-lg); margin-top: var(--app-space-5); margin-bottom: var(--app-space-2); }
.docs-content p, .docs-content li { line-height: 1.65; }
.docs-content pre {
  background: var(--pico-code-background-color); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--app-radius-md); padding: var(--app-space-4); overflow-x: auto; font-size: var(--app-font-size-sm);
}
.docs-content :not(pre) > code { font-size: 0.9em; }
.docs-content table { display: block; overflow-x: auto; }

/* Admonitions: <div class="note|tip|warning"> ... </div>. Reuse the app status palette. */
.note, .tip, .warning {
  border-radius: var(--app-radius-md); padding: var(--app-space-3) var(--app-space-4);
  margin: var(--app-space-4) 0; border-left: 3px solid; font-size: var(--app-font-size-sm);
}
.note { background: var(--app-status-info-bg); color: var(--app-status-info-fg); border-color: var(--app-status-info-fg); }
.tip { background: var(--app-status-pass-bg); color: var(--app-status-pass-fg); border-color: var(--app-status-pass-fg); }
.warning { background: var(--app-status-warn-bg); color: var(--app-status-warn-fg); border-color: var(--app-status-warn-fg); }
.note :last-child, .tip :last-child, .warning :last-child { margin-bottom: 0; }

/* Demo catalogue: a compact two-column list of example projects. */
.demo-list { list-style: none; padding: 0; margin: 0 0 var(--app-space-5); display: grid; gap: 2px; }
.demo-item {
  display: grid; grid-template-columns: minmax(11rem, 14rem) 1fr; gap: var(--app-space-4);
  align-items: baseline; padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--app-radius-sm);
}
.demo-item:hover { background: var(--pico-card-sectioning-background-color); }
.demo-item a { text-decoration: none; font-weight: 600; }
.demo-item a:hover { text-decoration: underline; }
.demo-item span { color: var(--pico-muted-color); font-size: var(--app-font-size-sm); }
@media (max-width: 40rem) {
  .demo-item { grid-template-columns: 1fr; gap: 0; }
}

.docs-pager {
  display: flex; justify-content: space-between; gap: var(--app-space-4);
  margin-top: var(--app-space-6); padding-top: var(--app-space-4);
  border-top: 1px solid var(--pico-muted-border-color); max-width: var(--docs-measure);
}
.docs-pager a {
  display: flex; flex-direction: column; text-decoration: none;
  padding: var(--app-space-3) var(--app-space-4); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--app-radius-md); min-width: 0;
}
.docs-pager a:hover { border-color: var(--pico-primary); }
.docs-pager__next { text-align: right; margin-left: auto; }
.docs-pager span { font-size: var(--app-font-size-xs); color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Mobile --------------------------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-block !important; }
  .docs { grid-template-columns: 1fr; }
  .docs-sidebar {
    position: static; max-height: none; padding: var(--app-space-4) 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
  }
  .docs-sidebar[hidden] { display: none; }
  .docs-pager { flex-direction: column; }
  .docs-pager__next { margin-left: 0; text-align: left; }
}