/* Page frame shared by ALL documentation pages: docs.html (user guide), parameters.html
   (parameter reference) and validation.html. One source, so the side bar, the divider and
   the content column sit in exactly the same place on every page. Content styles live in
   css/docs.css (guide + reference) and in validation.html's own <style>. */
body { height: auto; overflow: auto; min-height: 100vh; background: var(--bg); }

/* width: 100% because body is a flex box (style.css) — without it the shell shrinks to its
   content and the divider moves from page to page */
.doc-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); width: 100%; max-width: 1280px; margin: 0 auto; }

/* Sticky side bar */
.doc-toc {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  padding: 5rem 1.2rem 3rem; border-right: 1px solid var(--border);
}
.doc-toc-logo { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--accent-text); text-decoration: none; display: inline-block; margin-bottom: 0.35rem; }
.doc-toc-sub { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted2); margin-bottom: 1.8rem; }
.doc-toc a { display: block; font-size: 0.74rem; color: var(--muted); text-decoration: none; padding: 0.28rem 0 0.28rem 0.6rem; margin-left: -0.62rem; line-height: 1.3; transition: color 0.15s; border-left: 2px solid transparent; }
.doc-toc a:hover { color: var(--text); }
.doc-toc a.active { color: var(--accent-text); border-left-color: var(--accent); }
/* The other documentation pages + the way back, at the bottom of every side bar */
.doc-toc-links { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.15rem; }
.doc-toc .doc-toc-links a { font-family: var(--mono); font-size: 0.66rem; color: var(--accent-text); }
.doc-toc .doc-toc-links a:hover { color: var(--accent-text); text-decoration: underline; }
.doc-toc .doc-toc-links a.doc-toc-app { margin-top: 0.9rem; }

.doc-main { padding: 5rem 3.2rem 6rem; min-width: 0; }
@media (max-width: 860px) {
  .doc-shell { grid-template-columns: 1fr; }
  .doc-toc { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 2.5rem 16px 1.5rem; }
  .doc-toc a { display: inline-block; margin-right: 0.4rem; }
  .doc-toc-links { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 1.2rem; }
  .doc-toc .doc-toc-links a.doc-toc-app { margin-top: 0; }
  .doc-main { padding: 2.5rem 16px 4rem; }
}

.doc-hero-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted2); margin-bottom: 1rem; }
.doc-hero-title { font-family: 'DM Serif Display', serif; font-size: 2.4rem; line-height: 1.1; color: var(--text); margin-bottom: 1rem; font-weight: 400; }
/* Development-status notice at the top of every doc page */
.doc-alpha { display: flex; align-items: flex-start; gap: 0.7rem; max-width: 62ch; margin: 0 0 1.8rem; padding: 0.75rem 1rem; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-left: 3px solid var(--amber); border-radius: 3px; background: color-mix(in srgb, var(--amber) 8%, transparent); color: var(--text); font-size: 0.86rem; line-height: 1.55; }
.doc-alpha-ico { flex: none; color: var(--amber); margin-top: 0.1rem; }
.doc-alpha strong { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-right: 0.35rem; font-weight: 600; }