docs-layout.css

/* Docs layout — the docs-site page furniture: the 3-pane shell (left sidebar +
   content + right TOC), the phone-drawer docs content (segmented Pages/On-this-
   page tabs + sidebar groups), the docs base reset + link colour, the intro-meta
   strip, and the docs responsive breakpoints. Docs-only (home/blog don't use it),
   like docs-chrome.css — import it directly on the docs site, after tokens.css +
   components.css. Moved out of the docs repo so docs styling lives in one place. */

/* Docs-specific layout tokens (3-pane shell). Brand tokens come from the import above.
   --chrome-maxw widens the shared nav + footer to the docs content column (1480). */
:root {
  --side: 280px;
  --toc: 240px;
  --chrome-maxw: var(--maxw-docs);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--maroon-ink); }
body {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--coral-text); text-decoration: none; }
/* Underline on hover for genuine text links only. Buttons, the logo, the stars
   pill, and card-shaped links (whose inner heading/body would otherwise
   underline) manage their own hover — exclude them here so we don't rely on each
   one remembering to reset. :where() keeps this at zero specificity. */
a:hover:not(:where(.btn, .btn *, .logo, .stars, .nav-links a, .mobile-list a, .ex-card, .docs-link-card, .example-repo-card, [class*="card"] )) { color: var(--coral-deep); text-decoration: underline; }

/* Buttons (.btn + variants/sizes), inline code, .code-figure, and admonitions
   (.callout) now come from @cocoindex/brand/components.css. */
.caps { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--mono); }

/* ─── top nav ─── */
/* Lifted from cocoindex-io.github.io globals.css so both sites share the
   exact same header — class names, spacing, hover colors all match 1:1. */
/* Desktop nav bar (nav.top / .logo / .nav-links) comes from
   @cocoindex/brand/nav.css. The docs-only version dropdown (.nav-dd) stays below. */


/* .nav-cta + the .stars pill come from @cocoindex/brand (nav.css + stars.css). */

/* ─── phone drawer: docs content ───
   The drawer shell (scrim + sliding sheet + close header + .mobile-pane /
   .mobile-list / .mobile-foot) and its open/close behavior come from
   @cocoindex/brand (MobileSheet.astro + nav.css). What stays here is the
   docs-only content: the segmented Pages / On-this-page tabs, sidebar groups,
   and the search box. The hamburger + `.stars` phone treatment is the
   @media (max-width: 820px) block below. */

.mobile-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 12px 14px 0;
  padding: 3px;
  background: color-mix(in oklab, var(--maroon-ink) 6%, var(--paper));
  border-radius: var(--r-lg);
  flex: none;
}
.mobile-tabs button {
  appearance: none;
  border: none; background: transparent; cursor: pointer;
  padding: 8px 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--text-sm); letter-spacing: -0.005em;
  color: var(--maroon-ink); opacity: .7;
  border-radius: var(--r-md);
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mobile-tabs button[aria-selected="true"] {
  opacity: 1; color: var(--maroon-ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.mobile-tabs button[disabled] { opacity: .35; cursor: not-allowed; }
.mobile-tabs button:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

.mobile-empty {
  margin: 16px 14px; color: var(--muted);
  font-size: var(--text-sm); line-height: 1.55;
}

.mobile-group { margin: 0 8px 14px; }
.mobile-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 6px 14px 4px;
}
.mobile-group h6 {
  margin: 14px 8px 6px;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--text-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
}
.mobile-group h6 a { color: inherit; text-decoration: none; }
.mobile-group h6 a:hover { color: var(--coral); }


/* ─── layout ─── */
.layout {
  display: grid;
  grid-template-columns: var(--side) 1fr var(--toc);
  max-width: 1480px;
  margin: 0 auto;
}
aside.side {
  position: sticky; top: var(--bar-h); align-self: start;
  height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  padding: 28px 20px 40px 28px;
  border-right: 1px solid var(--rule);
}
aside.toc {
  position: sticky; top: var(--bar-h); align-self: start;
  height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  padding: 28px 28px 40px 20px;
  border-left: 1px solid var(--rule);
}
main.content {
  padding: 48px 56px 96px;
  max-width: 100%;
  min-width: 0;
}

/* ─── main content ─── */

/* Prose typography for rendered markdown (.prose h1/lede/h2/h3/h4, lists,
   blockquotes, tables, mermaid, heading permalinks) lives in
   @cocoindex/brand/prose.css and renders at the docs default scale. Only the
   docs-specific .intro-meta strip below stays local. */

/* Intro-meta strip: the Time / Language / Requires / Version / Last
   updated dl under the lede on every doc page (the ruled band on
   the live docs pages). */
.prose .intro-meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin: 20px 0 8px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: none;
}
.prose .intro-meta .m { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.prose .intro-meta .k {
  font-family: var(--mono);
  font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted);
}
.prose .intro-meta .v {
  font-size: var(--text-sm); font-weight: 500; margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.prose .intro-meta .check { flex: none; }

/* ─── responsive ─── */
@media (max-width: 1120px) {
  .layout { grid-template-columns: var(--side) 1fr; }
  aside.toc { display: none; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  aside.side { display: none; }
  main.content { padding: 32px 24px 64px; }
  .nav-links { display: none; }

  /* No left gutter to spare and no hover on touch: show the link icon inline
     before the heading, faintly, so it stays tappable. */
  .prose .head-anchor {
    position: static; width: auto; opacity: 0.4;
    margin-right: 7px; vertical-align: middle;
  }

  /* Topbar tightens up: less side padding, smaller gap, and the .stars
     pill loses its cream fill + heavy border. At rest the star is just
     a glyph + count in muted-ink; the pill chrome only fades in on
     hover or focus. The burger is the rightmost element and shares the
     same ghost discipline (see .menu-btn above). */
  .nav-in { padding: 10px 18px; gap: 12px; }
  .nav-cta { gap: 4px; }
  .stars {
    height: 28px; padding: 0 8px;
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    min-width: 0;
    font-size: var(--text-xs);
  }
  .stars:hover {
    border-color: var(--rule);
    background: color-mix(in oklab, var(--peach) 14%, var(--paper));
    color: var(--coral);
  }
  .stars svg { width: 12px; height: 12px; opacity: .85; }
  .stars:hover svg { opacity: 1; }
  .stars .count { width: auto; min-width: 3ch; }

  .menu-btn { display: inline-flex; }

  /* Sheet + scrim only exist on phones. */
  .mobile-scrim { display: block; }
  .mobile-sheet { display: flex; }
}