/* ============================================================================
   moondb · site styles — "Moon-Phase Contract"
   The constitution is set in serif with hairline rules and folio labels.
   The moon is the only recurring motif; it is drawn by moonphase.js.
   ========================================================================== */

/* ---- top bar (identical on every page) ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: var(--s1); font-family: var(--font-body); font-weight: 600; font-size: 20px; color: var(--ink); border: 0; }
.brand .glyph { width: 22px; height: 22px; }
.nav { display: flex; gap: var(--s3); margin-left: auto; font-family: var(--font-mono); font-size: 13px; }
.nav a { color: var(--ink-soft); border: 0; padding: var(--s1) 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pointer); }
/* the theme twin, as a two-position switch — the contract is read by two lights */
.theme-toggle { display: flex; border: 1px solid var(--hair-strong); }
.theme-toggle button {
  border: 0; border-left: 1px solid var(--hair-strong); background: transparent;
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; padding: 5px 9px; cursor: pointer;
  transition: color var(--t1) var(--ease), background-color var(--t1) var(--ease);
}
.theme-toggle button:first-child { border-left: 0; }
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.on { background: var(--ink); color: var(--paper); }

/* ---- hero / the constitution ---- */
.hero { padding: var(--s7) 0 var(--s5); }
.hero .lede { font-family: var(--font-body); font-size: clamp(18px, 2.2vw, 25px); line-height: 1.5; max-width: 64ch; color: var(--ink); margin: var(--s3) 0 var(--s5); }
.hero .lede b { color: var(--ink); font-weight: 600; font-style: italic; }

/* ---- the moon-phase signature strip (animation #3: a slow silver shimmer) ---- */
.phase-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--hair); }
.phase-row .moon { width: 38px; height: 38px; }
.phase-row .moon svg { width: 100%; height: 100%; display: block; }
.phase-row .cap { margin-left: auto; align-self: center; }
@keyframes silver-shimmer { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
.phase-row .moon { animation: silver-shimmer var(--t3) ease-in-out infinite; }
.phase-row .moon:nth-child(2) { animation-delay: 80ms; }
.phase-row .moon:nth-child(3) { animation-delay: 160ms; }
.phase-row .moon:nth-child(4) { animation-delay: 240ms; }
.phase-row .moon:nth-child(5) { animation-delay: 320ms; }
.phase-row .moon:nth-child(6) { animation-delay: 400ms; }
.phase-row .moon:nth-child(7) { animation-delay: 480ms; }
.phase-row .moon:nth-child(8) { animation-delay: 560ms; }

/* ---- driver cards (the ratified implementations) ---- */
.drivers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.driver { background: var(--paper); padding: var(--s4); }
/* a driver card is a link target: land it below the sticky bar */
.driver { scroll-margin-top: 88px; }

.driver .moon { width: 52px; height: 52px; margin-bottom: var(--s2); }
.driver .moon svg { width: 100%; height: 100%; display: block; }
.driver h3 { margin: 0 0 var(--s1); font-size: 19px; }
.driver .phase-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s2); }
.driver p { color: var(--ink-soft); font-size: 15px; margin: 0 0 var(--s2); }
/* coverage: a fixed two-column list so every driver card lines up */
.driver .coverage {
  list-style: none; margin: var(--s3) 0;
  padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px var(--s2);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft);
}
.driver .coverage li { display: flex; align-items: center; gap: 7px; }
.driver .coverage li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 99px;
  background: var(--dot-green);
}
.driver .coverage li.na::before { background: var(--dot-gray); }
.driver a.ghost { display: inline-block; margin-top: var(--s2); font-family: var(--font-mono); font-size: 13px; color: var(--pointer); border: 0; border-bottom: 1px solid var(--pointer); }

/* ---- signature blocks (trait methods, set in mono) ---- */
.signature { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.85; border: 1px solid var(--hair); border-left: 3px solid var(--ink); background: var(--paper-2); padding: var(--s3); white-space: pre; overflow: auto; color: var(--ink); }
.signature .kw { color: var(--ink-soft); }

/* ---- the generated reference: one entry per declaration, the signature set
   as a line of the statute and the prose beneath it ---- */
.section.first { border-top: 0; padding-top: 0; }
.section h2 + h3 { margin-top: var(--s4); }
.section h3 .count { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0.04em; margin-left: 6px; }
.entry { padding: 14px 0 18px; border-top: 1px solid var(--hair); }
.entry:last-child { border-bottom: 1px solid var(--hair); }
.entry .signature { margin: 0; border: 0; background: transparent; padding: 0; font-size: 12.5px; line-height: 1.6; overflow-x: auto; }
.entry .doc { color: var(--ink-soft); font-size: 15px; line-height: 1.65; max-width: 82ch; margin-top: 6px; }
.entry .doc p { margin: 0 0 8px; }
.entry .doc p:last-child { margin-bottom: 0; }
.entry .doc code.inline { font-size: 12.5px; color: var(--ink); }
.side a .n { color: var(--ink-faint); font-size: 11px; margin-left: 6px; }

/* a heading that contains a signature word should not look like a sticker */
h2 code.inline, h3 code.inline {
  background: none; border: 0; padding: 0; font-size: 0.86em;
  color: var(--pointer); letter-spacing: 0;
}

/* ---- status / folio bar ---- */
.statusbar { display: flex; flex-wrap: wrap; gap: var(--s3); font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); border: 1px solid var(--hair); background: var(--paper-2); padding: var(--s2) var(--s3); }
.statusbar b { color: var(--ink); font-weight: 600; }

/* ---- side index (docs pages) ---- */
.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.side { position: sticky; top: 72px; font-family: var(--font-mono); font-size: 13px; }
.side a { display: block; color: var(--ink-soft); border: 0; padding: 6px 0 6px var(--s2); border-left: 2px solid var(--hair); }
.side a:hover, .side a[aria-current="page"] { color: var(--ink); border-left-color: var(--pointer); }
.side .grp { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; margin-top: var(--s3); }

/* ---- CTA ---- */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s5) 0; }
.btn { font-family: var(--font-mono); font-size: 14px; padding: var(--s2) var(--s3); border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { border-color: var(--pointer); color: var(--pointer); }
.btn.primary:hover { background: var(--pointer); color: var(--paper); }

/* ---- footer ---- */
.foot .cross { color: var(--ink-faint); }
.foot .cross a { color: var(--ink-soft); border-bottom-color: color-mix(in srgb, var(--ink) 20%, transparent); }

.foot { border-top: 1px solid var(--hair); padding-block: var(--s5); color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; }
.foot a { color: var(--ink-soft); border: 0; }

/* ---- mobile ---- */
@media (width <= 860px) {
  .drivers { grid-template-columns: minmax(0, 1fr); }
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .phase-row .moon { width: 30px; height: 30px; }

  /* the bar takes a second row instead of squeezing the links into each other */
  .topbar { flex-wrap: wrap; gap: var(--s2); }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: var(--s2); }
  .nav a { flex: none; padding: 4px 0; }
  .theme-toggle { margin-left: auto; }
}
/* the strip already closes with a rule, so the section that follows does not
   draw a second one a few pixels below it */

/* ---- scroll bars: the page's shows while it moves or under the pointer and
   hides a moment after, keeping its place; a box's is thin, faint at rest and
   darker under the pointer ---- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: color-mix(in srgb, var(--ink) 16%, transparent) padding-box; }
  *:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 32%, transparent) padding-box; }
  html::-webkit-scrollbar { width: 10px; }
  html::-webkit-scrollbar-thumb { border-width: 3px; background: color-mix(in srgb, var(--ink) 26%, transparent) padding-box; }
  html::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 40%, transparent) padding-box; }
  html:not(.scrolling)::-webkit-scrollbar-thumb { background: transparent; border-color: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
  html:not(.scrolling) { scrollbar-color: transparent transparent; }
}