/* Calendite docs — layout + prose for the generated pages under /docs/.
   Committed by hand (it is NOT part of the generated public/docs/ output). Uses the shared
   brand tokens from brand-tokens.css / styles.css so docs track the site palette in both themes.
   The docs pages load the header with data-compact, so --hdr-bar is the fixed header height. */

.doc-main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:calc(var(--hdr-bar) + 40px) var(--hdr-side) 96px;
}
.doc-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:48px;
  align-items:start;
}

/* Sidebar nav.
   Its own scroll region: a tree taller than the viewport scrolls inside the sidebar rather
   than running past the fold, where the sticky offset would otherwise strand the last items
   out of reach. The cap is the viewport below the fixed bar, less the sticky top offset and
   a small tail so the final link doesn't sit flush against the edge. */
.doc-nav{
  position:sticky; top:calc(var(--hdr-bar) + 24px);
  max-height:calc(100vh - var(--hdr-bar) - 48px);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable;
}
.doc-nav-title{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}

/* The nav is a <details> (see build_docs.py). On desktop it is always open and the summary
   is just this label; on narrow screens — where the nav stacks above the article — the
   summary becomes a tappable bar that folds the tree away so it doesn't push the page down.
   docs.js sets the starting state per breakpoint; absent it, the nav degrades to open
   everywhere and stays collapsible on a phone via the native <details>. */
.doc-nav-disclosure{ margin:0; }
summary.doc-nav-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  list-style:none; cursor:default;
}
summary.doc-nav-title::-webkit-details-marker{ display:none; }
.doc-nav-chevron{
  width:16px; height:16px; flex:none; display:none;
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
/* Desktop: the sidebar can never collapse — a keyboard toggle on the summary is swallowed. */
@media (min-width:821px){ summary.doc-nav-title{ pointer-events:none; } }

.doc-nav nav{ display:block; }
.doc-nav a{
  display:block; padding:7px 12px; border-radius:9px; text-decoration:none;
  color:var(--muted); font-size:15px; font-weight:600; line-height:1.35;
  border-left:2px solid transparent;
}
.doc-nav a:hover{ color:var(--ink); background:var(--surface); }
.doc-nav a[aria-current="page"]{
  color:var(--accent); background:var(--accent-bg); border-left-color:var(--accent);
}
.doc-nav-home{ color:var(--ink); }

/* Nested section tree (folders -> sections, any depth) */
.doc-nav-tree, .doc-nav-tree ul{ list-style:none; margin:0; padding:0; }
.doc-nav-tree li{ margin:0; }
.doc-nav-tree ul{ margin:2px 0 6px 8px; padding-left:8px; border-left:1px solid var(--divider); }
.doc-nav-label{
  display:block; padding:10px 12px 4px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
/* A section whose folder is published as a page of its own (`index: true` in its _section.md)
   renders its name as a link. `.doc-nav a` is the more specific selector, so the label has to
   take its own type back or the heading would render as an ordinary nav row, two pixels out of
   line with the plain labels above it. Hover and current state are colour only: a background
   block on a heading reads as a selected page. */
.doc-nav a.doc-nav-label{
  padding:10px 12px 4px; border-left:0; font-size:11px; font-weight:700; color:var(--faint);
}
.doc-nav a.doc-nav-label:hover{ color:var(--ink); background:none; }
.doc-nav a.doc-nav-label[aria-current="page"]{ color:var(--accent); background:none; }

/* Prose column */
.doc.prose{ min-width:0; }
.doc-tools{ display:flex; justify-content:flex-end; min-height:20px; margin-bottom:8px; }
.doc-md-link{
  font-family:var(--mono); font-size:12.5px; color:var(--muted); text-decoration:none;
  border:1px solid var(--border); border-radius:8px; padding:4px 10px;
}
.doc-md-link:hover{ color:var(--ink); border-color:var(--accent); }

.prose h1{ font-size:clamp(30px,4vw,42px); line-height:1.1; margin:.1em 0 .5em; }
.prose h2{ font-size:26px; margin:1.7em 0 .5em; }
.prose h3{ font-size:20px; margin:1.4em 0 .4em; }
.prose h2 + p, .prose h3 + p{ margin-top:.2em; }
.prose p, .prose li{ font-size:17px; line-height:1.7; }
.prose p{ margin:0 0 1.05em; }
.prose ul, .prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
.prose li{ margin:.3em 0; }
.prose li::marker{ color:var(--accent); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prose a:hover{ text-decoration-thickness:2px; }
.prose strong{ font-weight:700; color:var(--ink); }
.prose hr{ border:0; border-top:1px solid var(--divider); margin:2.4em 0; }
.prose blockquote{
  margin:1.4em 0; padding:.4em 1.1em; border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 10px 10px 0; color:var(--muted);
}
.prose blockquote p:last-child{ margin-bottom:0; }

/* Code */
.prose code{
  font-family:var(--mono); font-size:.9em; background:var(--surface-2);
  padding:.12em .4em; border-radius:6px; border:1px solid var(--border);
}
.prose pre{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; overflow-x:auto; margin:0 0 1.4em; box-shadow:var(--shadow);
}
.prose pre code{ background:none; border:0; padding:0; font-size:14px; line-height:1.6; }

/* Tables — echo the landing page's rule table.
   Each table is wrapped in .doc-table (see build_docs.py). A table can't shrink below its
   widest cell, so the rule reference's long regex columns are wider than a phone screen;
   the wrapper takes that overflow as its own sideways scroll so the page never scrolls. */
.doc-table{ overflow-x:auto; overscroll-behavior-x:contain; margin:0 0 1.6em; max-width:100%; }
.prose table{
  width:100%; border-collapse:collapse; margin:0; font-size:15px;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.prose th, .prose td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--divider); vertical-align:top; }
.prose thead th{
  background:var(--surface); font-family:var(--sans); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.prose tbody tr:last-child td{ border-bottom:0; }
.prose td:first-child code{ color:var(--accent); }

/* Overview index */
.doc-lede{ color:var(--muted); font-size:18px; max-width:60ch; margin:0 0 2em; }
/* A section heading that links to its own landing page. It keeps the heading's colour: five
   plain section headings and one accent-underlined one reads as a mistake rather than a link. */
.prose h2 > a, .prose h3 > a, .prose h4 > a{ color:inherit; text-decoration:none; }
.prose h2 > a:hover, .prose h3 > a:hover, .prose h4 > a:hover{ text-decoration:underline; }
.doc-sec-desc{ color:var(--muted); margin:-.4em 0 1.3em; }
.doc-sec-empty{ color:var(--faint); font-style:italic; }
.doc-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.doc-card{
  display:flex; flex-direction:column; gap:6px; padding:18px 20px; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:transform .12s, border-color .12s;
}
.prose a.doc-card, .prose a.doc-card:hover{ text-decoration:none; }
.doc-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.doc-card-title{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--ink); }
.doc-card-desc{ color:var(--muted); font-size:14.5px; line-height:1.5; }

/* Mobile: the nav folds to a row above the content */
@media (max-width:820px){
  .doc-layout{ grid-template-columns:1fr; gap:24px; }
  /* Stacked above the article now, so undo the desktop rule's sticky scroll region —
     left on, its max-height would clip the collapsible tree. */
  .doc-nav{ position:static; max-height:none; overflow:visible; }
  /* The summary is the collapse control: a tappable bar with a chevron that flips on open. */
  summary.doc-nav-title{
    cursor:pointer; margin:0; padding:12px 14px;
    border:1px solid var(--border); border-radius:12px; background:var(--surface);
  }
  .doc-nav-disclosure[open] summary.doc-nav-title{
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }
  .doc-nav-chevron{ display:block; }
  .doc-nav-disclosure[open] .doc-nav-chevron{ transform:rotate(180deg); }
  .doc-nav-disclosure > nav{
    border:1px solid var(--border); border-top:0;
    border-radius:0 0 12px 12px; padding:8px 10px 6px;
  }
}

/* Status icons: ✅/❌ authored in Markdown are swapped for the brand SVGs at build time
   (see build_docs.py). Sized to the surrounding text so they sit inline in prose and inside
   the monospace rule examples, where these currently appear, without breaking the line. */
.doc-icon{ height:1.05em; width:auto; vertical-align:-.15em; }

/* Foot of the docs index: where llms.txt is mentioned. Small and muted because it is
   plumbing for crawlers and agents, not something a reader came here for — but still
   rendered, so an agent that follows links can actually find it. */
.doc-machine-note{
  margin:3em 0 0; padding-top:1.2em; border-top:1px solid var(--divider);
  font-size:12.5px; color:var(--muted);
}
.doc-machine-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }