/* The site nav, on every page. Markup is generated by scripts/build-site-index.mjs (the `nav` block);
   behaviour is public/js/nav.js. Pages still carry old `.topbar` rules in their own <style>, which load
   after this file, so selectors here are written to outrank them (`header.sn`, `.sn a.x`).
   No drop shadows: the bar and the menu sit on hairlines. */

.sn {
  --sn-paper: #ebebe8; --sn-card: #fff; --sn-ink: #1e3a2c; --sn-ink-2: #55625c; --sn-bar: #0e3b2f;
  --sn-green: #0a7a2a; --sn-head: #117025; --sn-soft: #e8f3eb; --sn-hover: rgba(14, 59, 47, 0.06);
  --sn-line: rgba(14, 59, 47, 0.11); --sn-h: 60px;
  --sn-cta-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Anchors land below the bar, not under it. */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }

/* ---------- skip link ---------- */
.sn-skip {
  position: absolute; left: 16px; top: 12px; z-index: 60; transform: translateY(-200%);
  padding: 10px 14px; border-radius: 9px; background: #fff; color: #0e3b2f; font: 650 15px/1 Figtree, ui-sans-serif, system-ui, sans-serif;
  text-decoration: none; box-shadow: 0 0 0 1px rgba(14, 59, 47, 0.14);
}
.sn-skip:focus { transform: none; outline: 2px solid #0a7a2a; outline-offset: 2px; }

/* ---------- the bar ---------- */
header.sn {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 20;
  display: block; max-width: var(--page, 76rem); margin: 0 auto 14px; padding: 0;
  background: none; box-shadow: none; border-radius: 0; color: var(--sn-ink);
  font: 550 15px/1 Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sn .sn-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  height: var(--sn-h); padding: 0 10px 0 14px; border-radius: 12px;
  background: var(--sn-paper); box-shadow: 0 0 0 1px rgba(14, 59, 47, 0.08);
}
/* scrolled: the page shows faintly through the bar */
header.sn.is-stuck .sn-bar {
  background: rgba(235, 235, 232, 0.84); box-shadow: 0 0 0 1px var(--sn-line);
  -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.sn.is-stuck .sn-bar { background: rgba(235, 235, 232, 0.97); }
}

/* brand: the ouroboros at 2x, then the wordmark */
.sn a.sn-brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 2px; margin-left: -2px; border-radius: 9px;
  color: var(--sn-ink); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -0.025em;
}
.sn .sn-logo { display: block; width: 32px; height: 32px; overflow: hidden; flex: none; }
.sn .sn-logo img { display: block; width: 384px; height: 32px; max-width: none; image-rendering: pixelated; }
/* the one flourish: point at the logo and the snake chases its tail, a cell at a time */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sn a.sn-brand:hover .sn-logo img { animation: sn-chase 0.96s steps(12) infinite; }
}
@keyframes sn-chase { to { transform: translateX(-384px); } }

/* links */
.sn .sn-nav { display: block; position: relative; }
.sn .sn-links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sn .sn-link {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px; border: 0; border-radius: 9px;
  background: none; color: var(--sn-ink-2); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sn .sn-link:hover, .sn .sn-dd-btn[aria-expanded="true"] { color: var(--sn-ink); background: var(--sn-hover); }
/* the page you're on: green, with a short rule under it */
.sn .sn-link[aria-current="page"], .sn .sn-link.is-on { color: var(--sn-head); }
.sn .sn-link[aria-current="page"]::after, .sn .sn-link.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: currentColor;
}
.sn .sn-chev { flex: none; margin-right: -3px; color: var(--sn-ink-2); }
.sn .sn-dd-btn[aria-expanded="true"] .sn-chev { transform: rotate(180deg); }

/* the call to action: yellow, like every call to action on the site */
.sn a.sn-cta {
  justify-self: end; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 9px; white-space: nowrap;
  color: var(--sn-bar); font-weight: 650; text-decoration: none;
  background: var(--sn-cta-grain), linear-gradient(180deg, #f2df58 0%, #e8d13a 100%); background-size: 140px 140px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(14, 59, 47, 0.13);
}
.sn a.sn-cta:hover { background: var(--sn-cta-grain), linear-gradient(180deg, #f6e566 0%, #edd743 100%); background-size: 140px 140px, 100% 100%; }
.sn a.sn-cta:active { transform: translateY(1px); }

.sn .sn-menu { display: none; }

/* focus: a green ring on everything */
.sn a:focus-visible, .sn button:focus-visible { outline: 2px solid var(--sn-green); outline-offset: 2px; }

/* ---------- the Guides menu ---------- */
.sn .sn-panel {
  display: none; position: absolute; left: 50%; top: calc(100% + 18px); z-index: 2; width: 640px; margin-left: -320px; padding: 8px;
  max-height: calc(100vh - 100px); overflow-y: auto; border-radius: 14px; background: var(--sn-card); box-shadow: 0 0 0 1px rgba(14, 59, 47, 0.14);
  font-weight: 400; line-height: 1.4;
}
.sn .sn-dd-btn[aria-expanded="true"] + .sn-panel { display: block; }
.sn .sn-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.sn .sn-items > li:has(> .sn-feature) { grid-column: 1 / -1; }
.sn a.sn-item { display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 10px; color: var(--sn-ink); text-decoration: none; }
.sn a.sn-item:hover, .sn a.sn-item:focus-visible { background: #f3f4f1; }
.sn .sn-t { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--sn-ink); }
.sn .sn-d { font-size: 13.5px; color: var(--sn-ink-2); text-wrap: pretty; }
.sn a.sn-feature { margin-bottom: 4px; background: var(--sn-soft); }
.sn a.sn-feature:hover, .sn a.sn-feature:focus-visible { background: #dcecdf; }
.sn a.sn-feature .sn-t { color: #0e3b2f; }
.sn a.sn-feature .sn-d { color: #3f5a4c; }
.sn a.sn-item[aria-current="page"] { background: #f3f4f1; }
.sn a.sn-item[aria-current="page"] .sn-t { color: var(--sn-green); }
.sn a.sn-all {
  display: flex; align-items: center; justify-content: space-between; margin: 6px 0 0; padding: 12px 12px 6px;
  border-top: 1px solid var(--sn-line); color: var(--sn-green); font-size: 14.5px; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 8px;
}
.sn a.sn-all:hover { color: var(--sn-bar); }

/* ---------- narrower screens: tighter links ---------- */
@media (max-width: 980px) {
  .sn .sn-link { padding: 0 9px; }
  .sn .sn-bar { gap: 8px; }
}

/* ---------- phones: logo, call to action, menu ---------- */
@media (max-width: 720px) {
  .sn { --sn-h: 56px; }
  .sn .sn-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 0 8px 0 12px; }
  .sn a.sn-brand { gap: 9px; font-size: 19px; }
  .sn a.sn-cta { grid-column: 2; grid-row: 1; height: 40px; padding: 0 14px; }
  .sn .sn-menu {
    grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px;
    background: none; color: var(--sn-ink); cursor: pointer;
  }
  .sn .sn-menu:hover, .sn .sn-menu[aria-expanded="true"] { background: var(--sn-hover); }
  .sn .sn-menu .sn-close, .sn .sn-menu[aria-expanded="true"] .sn-open { display: none; }
  .sn .sn-menu[aria-expanded="true"] .sn-close { display: inline; }

  /* the sheet: full width under the bar, scrolls on its own if it has to */
  .sn .sn-nav {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    max-height: var(--sn-room, calc(100vh - 100px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border-radius: 14px; background: var(--sn-card); box-shadow: 0 0 0 1px rgba(14, 59, 47, 0.14);
  }
  header.sn.is-open .sn-nav { display: block; }
  header.sn.is-open .sn-bar { background: var(--sn-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* the page behind dims; tapping it closes the menu */
  header.sn.is-open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(7, 63, 20, 0.45); }
  header.sn.is-open { z-index: 40; }

  .sn .sn-links { display: grid; gap: 0; }
  .sn .sn-links > li + li { border-top: 1px solid var(--sn-line); }
  .sn .sn-link { display: flex; width: 100%; height: 54px; padding: 0 12px; font-size: 17px; font-weight: 600; color: var(--sn-ink); }
  .sn .sn-link:hover, .sn .sn-dd-btn[aria-expanded="true"] { background: none; }
  .sn .sn-link[aria-current="page"]::after, .sn .sn-link.is-on::after { left: 0; top: 50%; bottom: auto; width: 3px; height: 20px; margin: -10px 0 0; }
  .sn .sn-dd-btn { justify-content: space-between; }
  .sn .sn-chev { margin-right: 0; }
  .sn .sn-panel { position: static; width: auto; margin: 0; padding: 0 0 10px; max-height: none; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .sn .sn-items { grid-template-columns: minmax(0, 1fr); }
  /* titles only on phones, so the whole menu fits on one screen */
  .sn .sn-d { display: none; }
  .sn a.sn-item { display: flex; align-items: center; min-height: 46px; padding: 8px 12px; }
  .sn a.sn-all { min-height: 48px; margin-top: 4px; padding: 4px 12px 0; }
}
@media (max-width: 360px) {
  .sn .sn-word { display: none; }
}

/* the page doesn't scroll behind the open menu (nav.js sets this, and keeps a classic scrollbar's
   space so nothing moves) */
html.sn-lock { overflow: hidden; }
html.sn-lock.sn-gutter { scrollbar-gutter: stable; }

@media print { .sn, .sn-skip { display: none !important; } }