/* ============================================================================
   ouRGeo — documentation pages
   ----------------------------------------------------------------------------
   Layered on top of site.css. Docs pages deliberately do NOT link forum.css:
   they use none of its components, and its .chip (a pressable filter pill)
   collides with the marketing pages' .chip (a monospace tag) that the docs
   want. Everything forum.css would have contributed is defined here instead.

   Most rules below are ported verbatim from the inline <style> blocks of
   ourgeo-features.html / ourgeo-download.html / index.html rather than
   reinvented, so the docs sit visually inside the existing design system.
   ========================================================================== */

/* ── Sticky positioning fix — must come before any position:sticky rule ───
   site.css sets `html, body { overflow-x: hidden }`. When overflow-x is
   `hidden` and overflow-y is `visible`, CSS promotes overflow-y to `auto`,
   which turns <body> into its own scroll container. position:sticky then
   resolves against that box instead of the viewport — and since <body> never
   actually scrolls, every sticky element silently stops working (the TOC
   sidebar and the sticky table headers below both did).

   `clip` prevents horizontal scrolling exactly like `hidden` but does NOT
   establish a scroll container, so sticky keeps working. Scoped to the docs
   pages by living here rather than in site.css. A browser too old for `clip`
   drops this declaration and inherits site.css's `hidden` — sticky degrades
   to static, which is the current behaviour, not a regression.             */
html, body { overflow-x: clip; }

/* ── Shell ────────────────────────────────────────────────────────────────
   .frame is 1040px, which leaves too little prose once a 240px sidebar takes
   its share. Docs pages opt into a wider frame.                            */
.frame.wide { max-width: 1280px; }

/* ── Two-column docs layout with a sticky sidebar TOC ─────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 26px;
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px 16px;
  border-radius: 12px;
  background: rgb(var(--panel-rgb) / 0.55);
  border: 1px solid rgb(var(--water-rgb) / 0.14);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--water-rgb) / 0.3) transparent;
}
.docs-toc::-webkit-scrollbar { width: 8px; }
.docs-toc::-webkit-scrollbar-thumb {
  background: rgb(var(--water-rgb) / 0.25); border-radius: 8px;
}

.docs-toc .toc-title {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--water);
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid rgb(var(--water-rgb) / 0.16);
}
.docs-toc a {
  display: block; padding: 7px 10px; margin-bottom: 2px; border-radius: 7px;
  color: var(--muted); text-decoration: none; font-size: 0.87rem; line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.docs-toc a:hover { color: var(--aqua); background: rgb(var(--aqua-rgb) / 0.06); }
/* Set by the IntersectionObserver scrollspy in page-docs.js. */
.docs-toc a.current {
  color: var(--aqua); background: rgb(var(--aqua-rgb) / 0.08);
  border-left-color: var(--aqua);
}
.docs-toc a.sub { padding-left: 22px; font-size: 0.82rem; }

/* The sidebar's cross-page links to the other docs pages. */
.docs-toc .toc-pages {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgb(var(--water-rgb) / 0.16);
}
.docs-toc .toc-pages a { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.04em; }
.docs-toc .toc-pages a.here { color: var(--water); }

/* ── Anchored sections ────────────────────────────────────────────────────
   Without scroll-margin-top an anchor jump parks the heading flush against
   the top of the viewport.                                                 */
.geo-section { scroll-margin-top: 20px; }
.geo-section h3, .geo-section h4 { scroll-margin-top: 20px; }

/* ── Typography site.css lacks (ported from the marketing pages) ───────── */
.geo-section h2 .num { color: var(--route); font-size: 0.95rem; }
.geo-section h3 {
  font-family: var(--font-display); font-size: 0.9rem; color: var(--aqua);
  letter-spacing: 0.04em; margin: 24px 0 8px; text-transform: uppercase;
}
.geo-section h4 {
  font-family: var(--font-display); font-size: 0.78rem; color: var(--water);
  letter-spacing: 0.05em; margin: 18px 0 6px; font-weight: 500;
}
.geo-section .lede {
  color: var(--aqua); font-size: 1.02rem; font-weight: 600;
  margin-bottom: 14px; line-height: 1.5;
}
.geo-section .highlight { color: var(--route); font-weight: 600; }
.geo-section a { color: var(--aqua); text-decoration: none; }
.geo-section a:hover { color: var(--water); text-decoration: underline; }

.geo-section ul { list-style: none; margin: 6px 0 14px; padding: 0; }
.geo-section ul li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  line-height: 1.6; color: var(--text); font-size: 0.97rem;
}
.geo-section ul li::before {
  content: "▸"; color: var(--water); position: absolute; left: 4px; top: 0;
}
.geo-section ul li strong { color: var(--text-strong); }
.geo-section ol { margin: 6px 0 14px; padding-left: 22px; }
.geo-section ol li {
  margin-bottom: 9px; line-height: 1.6; color: var(--text); font-size: 0.97rem;
}
.geo-section ol li::marker { color: var(--water); font-family: var(--font-mono); }

.mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--aqua); }
code {
  font-family: var(--font-mono); font-size: 0.88em; color: var(--aqua);
  background: rgb(var(--water-rgb) / 0.07); border-radius: 4px; padding: 1px 5px;
}

/* ── Code blocks ──────────────────────────────────────────────────────── */
pre.code {
  background: var(--bg-0); border: 1px solid rgb(var(--water-rgb) / 0.2);
  border-radius: 10px; padding: 16px 18px; overflow-x: auto; margin: 8px 0 14px;
  font-family: var(--font-mono); font-size: 0.85rem;
  line-height: 1.7; color: var(--text-strong);
}
pre.code code { background: none; padding: 0; color: inherit; font-size: inherit; }
pre.code .cmt { color: var(--text-faint); }
pre.code .fn  { color: var(--aqua); }
pre.code .op  { color: var(--route); }
pre.code .str { color: var(--ok); }

/* ── Callouts ─────────────────────────────────────────────────────────── */
.geo-callout {
  background: rgb(var(--aqua-rgb) / 0.06); border-left: 3px solid var(--aqua);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 14px 0;
  color: var(--text-strong); font-size: 0.95rem; line-height: 1.7;
}
.geo-callout.warn {
  background: rgb(var(--route-rgb) / 0.07); border-left-color: var(--route);
}
.geo-callout strong { color: var(--text-strong); }

/* ── Tag chips (the features-page flavour: a monospace label, not a button) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.chip {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--aqua);
  background: rgb(var(--aqua-rgb) / 0.06); border: 1px solid rgb(var(--aqua-rgb) / 0.25);
  border-radius: 6px; padding: 5px 10px;
}
.chip.route { color: var(--route); border-color: rgb(var(--route-rgb) / 0.3); background: rgb(var(--route-rgb) / 0.06); }

/* ── Jump pill row (mobile TOC fallback + in-section shortcuts) ────────── */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.jump a {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--aqua);
  border: 1px solid rgb(var(--aqua-rgb) / 0.35); border-radius: 999px;
  padding: 7px 14px; text-decoration: none; transition: background 0.2s;
}
.jump a:hover { background: rgb(var(--aqua-rgb) / 0.08); }

/* ── Category / feature card grid ─────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.cat {
  background: rgb(var(--water-rgb) / 0.04); border: 1px solid rgb(var(--water-rgb) / 0.15);
  border-radius: 10px; padding: 14px 16px;
}
.cat .h {
  font-family: var(--font-display); font-size: 0.8rem; color: var(--water);
  letter-spacing: 0.03em; margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.cat .h .n { color: var(--route); font-size: 0.75rem; flex: none; }
.cat .d { font-size: 0.85rem; color: var(--text); line-height: 1.5; }

/* ── Hub index cards — one per docs sub-page ──────────────────────────── */
.doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 10px; }
.doc-card {
  display: block; text-decoration: none; padding: 18px 20px; border-radius: 12px;
  background: rgb(var(--water-rgb) / 0.04); border: 1px solid rgb(var(--water-rgb) / 0.16);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.doc-card:hover {
  transform: translateY(-2px); border-color: rgb(var(--aqua-rgb) / 0.45);
  background: rgb(var(--aqua-rgb) / 0.06); text-decoration: none;
}
.doc-card .t {
  font-family: var(--font-display); font-size: 0.92rem; color: var(--water);
  letter-spacing: 0.04em; margin-bottom: 7px;
}
.doc-card:hover .t { color: var(--aqua); }
.doc-card .d { font-size: 0.88rem; color: var(--text); line-height: 1.6; }
.doc-card .m {
  margin-top: 9px; font-family: var(--font-mono);
  font-size: 0.74rem; color: var(--muted);
}

/* ── Tables (site.css styles none; ported from index.html's table.cmp) ─── */
.cmp-wrap { overflow-x: auto; margin: 10px 0 16px; }
table.cmp {
  width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.92rem;
}
table.cmp th, table.cmp td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid rgb(var(--water-rgb) / 0.12); vertical-align: top;
}
table.cmp thead th {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--water);
  position: sticky; top: 0; background: var(--map-panel); z-index: 1;
}
table.cmp tbody th { font-weight: 600; color: var(--text-strong); }
table.cmp td .yes { color: var(--aqua); }
table.cmp td .no  { color: var(--danger); }
table.cmp tbody tr:hover { background: rgb(var(--water-rgb) / 0.035); }
table.cmp code { white-space: nowrap; }

/* Tool reference tables: first column is the tool name, last the R call. */
table.cmp.tools td:first-child { white-space: nowrap; font-weight: 600; color: var(--text-strong); }
table.cmp.tools .params { color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
table.cmp.tools .params b { color: var(--text); font-weight: 600; }
table.cmp.tools .rfn {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--aqua); white-space: nowrap;
}

/* ── Parameter tables inside a tool entry ─────────────────────────────── */
.param-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 6px 0 14px; }
.param-table th, .param-table td {
  text-align: left; padding: 8px 12px; vertical-align: top;
  border-bottom: 1px solid rgb(var(--water-rgb) / 0.1);
}
.param-table thead th {
  font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--water);
}
.param-table td.name { font-family: var(--font-mono); color: var(--aqua); white-space: nowrap; }
.param-table td.type { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }

/* ── Keyboard keys ────────────────────────────────────────────────────── */
kbd, .kbd {
  display: inline-block; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-strong); background: rgb(var(--water-rgb) / 0.1);
  border: 1px solid rgb(var(--water-rgb) / 0.3); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 7px; line-height: 1.5; white-space: nowrap;
}

/* ── Definition rows — "Button — what it does" ────────────────────────── */
.deflist { margin: 8px 0 14px; }
.deflist .row {
  display: grid; grid-template-columns: 210px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid rgb(var(--water-rgb) / 0.1);
}
.deflist .row:last-child { border-bottom: 0; }
.deflist .k {
  font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.03em;
  color: var(--water); line-height: 1.6;
}
.deflist .k .sc {
  display: block; margin-top: 4px; font-family: var(--font-mono);
  font-size: 0.72rem; color: var(--muted); letter-spacing: 0;
}
.deflist .v { font-size: 0.94rem; color: var(--text); line-height: 1.7; }
.deflist .v code { white-space: nowrap; }

/* ── Screenshots ──────────────────────────────────────────────────────── */
.shot { margin: 16px 0 4px; }
.shot img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid rgb(var(--water-rgb) / 0.25);
  box-shadow: 0 6px 26px rgb(var(--shadow-rgb) / 0.55); background: rgb(var(--panel-rgb) / 0.6);
}
/* Set by the img onerror handler when a screenshot has not been added yet. */
.shot img.missing {
  min-height: 200px; border-style: dashed; border-color: rgb(var(--water-rgb) / 0.4);
  background: repeating-linear-gradient(45deg, rgb(var(--water-rgb) / 0.05) 0 8px, transparent 8px 16px),
              rgb(var(--panel-rgb) / 0.7);
  object-fit: contain;
}
.shot figcaption {
  margin-top: 8px; font-size: 0.82rem; color: var(--muted);
  text-align: center; line-height: 1.5;
}

/* ── Toolbox filter box ───────────────────────────────────────────────── */
.tool-filter { margin: 4px 0 18px; position: relative; }
.tool-filter input { padding-right: 96px; }
.tool-filter .count {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.76rem;
  color: var(--muted); pointer-events: none;
}
/* Applied by page-docs.js only while a query is active, so Ctrl+F still
   searches the whole page in the default state. */
tr.filtered-out, .geo-section.filtered-out { display: none; }
.filter-empty {
  text-align: center; color: var(--muted); padding: 26px 20px; font-size: 0.95rem;
}

/* ── Back-to-top ──────────────────────────────────────────────────────── */
.to-top {
  display: inline-block; margin-top: 6px; font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.to-top:hover { color: var(--aqua); }

/* ── Docs footer meta line ────────────────────────────────────────────── */
.docs-meta {
  margin-top: 4px; font-family: var(--font-mono);
  font-size: 0.76rem; color: var(--muted);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: 0; }
  /* The sidebar becomes a plain pill row above the content. */
  .docs-toc {
    position: static; max-height: none; overflow: visible;
    display: flex; flex-wrap: wrap; gap: 8px; padding: 14px;
    margin-bottom: 20px;
  }
  .docs-toc .toc-title { width: 100%; margin-bottom: 2px; }
  .docs-toc a {
    border: 1px solid rgb(var(--aqua-rgb) / 0.3); border-left-width: 1px;
    border-radius: 999px; padding: 6px 13px; margin: 0; font-size: 0.8rem;
  }
  .docs-toc a.current { border-color: var(--aqua); border-left-width: 1px; }
  .docs-toc a.sub { padding-left: 13px; }
  .docs-toc .toc-pages {
    width: 100%; display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 8px; padding-top: 10px;
  }
  .cat-grid, .doc-cards { grid-template-columns: 1fr; }
  .deflist .row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 620px) {
  .geo-section { padding: 22px 18px; }
  pre.code { font-size: 0.78rem; padding: 13px 14px; }
}