/* recto — docs hub layout. Inherits tokens.css + components.css.
   Zero JS, zero box-shadow, hairline borders only. Light-only (site has no dark).
   One reusable template: hub (Layout A) + article (Layout B, sidebar + prose). */

/* ====== Docs shell ====== */
.docs {
  max-width: var(--w-table);
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-9);
}

/* ====== Layout B: sidebar + article grid ====== */
.docs__grid {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 860px) {
  .docs__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* Sidebar (sticky on desktop) */
.docs-side { position: sticky; top: var(--s-5); }
.docs-side__group { margin-bottom: var(--s-5); }
.docs-side__label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 var(--s-2);
}
.docs-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.docs-side__list a {
  display: block; text-decoration: none; color: var(--ink-soft);
  font-size: 14px; line-height: 1.4; padding: var(--s-1) var(--s-2);
  border-left: 2px solid transparent; border-radius: 0 var(--r-2) var(--r-2) 0;
}
.docs-side__list a:hover { color: var(--ink-deep); background: var(--ground-recessed); }
.docs-side__list a[aria-current="page"] {
  color: var(--ink-deep); font-weight: 500;
  border-left-color: var(--indigo-dye); background: var(--ground-recessed);
}

/* Mobile disclosure wrapper (native <details>, no JS) */
.docs-side--mobile { display: none; }
@media (max-width: 860px) {
  .docs-side { display: none; }
  .docs-side--mobile { display: block; margin-bottom: var(--s-5); }
  .docs-side--mobile > summary {
    cursor: pointer; font-family: var(--font-mono); font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mid);
    padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-2);
    background: var(--ground-raised); list-style: none;
  }
  .docs-side--mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .docs-side--mobile > summary::-webkit-details-marker { display: none; }
  .docs-side--mobile .docs-side { display: block; position: static; padding: var(--s-4); border: 1px solid var(--rule); border-top: none; }
}

/* ====== Article body (.doc-prose) ====== */
.doc-prose { max-width: var(--w-prose); }
.doc-prose h1 { margin: 0 0 var(--s-3); }
.doc-prose .lede { font-size: 17px; line-height: 1.55; color: var(--ink-mid); margin: 0 0 var(--s-6); }
.doc-prose h2 { margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.doc-prose h3 { margin: var(--s-5) 0 var(--s-2); }
.doc-prose p { margin: 0 0 var(--s-4); }
.doc-prose ul, .doc-prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.doc-prose li { margin: 0 0 var(--s-2); }
.doc-prose li > strong { color: var(--ink-deep); }
.doc-prose code { background: var(--ground-recessed); padding: 1px 5px; border-radius: var(--r-1); font-size: 0.88em; }
.doc-prose pre { background: var(--ground-recessed); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4); overflow-x: auto; margin: 0 0 var(--s-4); }
.doc-prose pre code { background: none; padding: 0; }

/* ====== Breadcrumb ====== */
.docs-crumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.docs-crumb a { color: var(--ink-soft); }

/* ====== Numbered step (getting-started) ====== */
.doc-step { display: flex; gap: var(--s-3); align-items: baseline; }
.doc-step__n {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--ground);
  background: var(--indigo-dye); font-variant-numeric: tabular-nums;
}

/* ====== Figure / screenshot (red box is baked into the PNG at capture) ====== */
.shot { margin: var(--s-4) 0 var(--s-5); }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--ground-raised);
}
.shot figcaption { font-size: 13px; color: var(--ink-soft); margin-top: var(--s-2); line-height: 1.45; }

/* ====== Callout ====== */
.callout {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
  background: var(--ground-raised); border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); font-size: 14px;
}
.callout--note { border-left-color: var(--indigo-dye); }
.callout--warn { border-left-color: var(--ochre); }
.callout--risk { border-left-color: var(--brick); }
.callout strong { color: var(--ink-deep); }

/* ====== FAQ (native details, no JS) ====== */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item > summary {
  cursor: pointer; list-style: none; padding: var(--s-4) 0;
  font-family: var(--font-display); font-size: 18px; color: var(--ink-deep);
  display: flex; justify-content: space-between; gap: var(--s-3); align-items: center;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: '+'; font-family: var(--font-mono); color: var(--ink-soft); }
.faq__item[open] > summary::after { content: '\2013'; }
.faq__item > div { padding: 0 0 var(--s-4); color: var(--ink-mid); max-width: var(--w-prose); }
.faq__item > div p { margin: 0 0 var(--s-3); }

/* ====== Prev / next ====== */
.doc-nav { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); flex-wrap: wrap; }
.doc-nav a { text-decoration: none; font-size: 14px; color: var(--ink-mid); max-width: 48%; }
.doc-nav a:hover { color: var(--ink-deep); }
.doc-nav .mono { display: block; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }

/* ====== Helpful foot ====== */
.doc-help { margin-top: var(--s-7); padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--ground-recessed); font-size: 14px; color: var(--ink-mid); }
.doc-help a { color: var(--ink-mid); }

/* ====== Hub index cards ====== */
.docs-hub__groups { display: flex; flex-direction: column; gap: var(--s-7); }
.docs-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s-4); }
.docs-hub__card { text-decoration: none; color: inherit; display: block; }
.docs-hub__card:hover { text-decoration: none; }
.docs-hub__card .card { transition: border-color var(--t-fast), background var(--t-fast); height: 100%; }
.docs-hub__card:hover .card { border-color: var(--rule-strong); background: var(--ground); }
.docs-hub__card h3 { font-size: 17px; margin: 0 0 var(--s-2); }
.docs-hub__card p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.5; }