/* =========================================================================
   PENTR DOCS — chrome and prose
   Tokens come from colors_and_type.css, which styles.css imports on its first
   line; the template links styles.css before this file, so every custom
   property below is already in scope. No colour is defined here: every value
   is an existing token.

   The marketing pages walk a tone arc of deepening panels. The docs do not.
   One surface, start to finish — docs are read, not scrolled through.
   ========================================================================= */

.docs-body {
  /* Layout constants, not colours. --docs-nav-h mirrors .nav-inner's height
     in styles.css; the sticky rails hang off it. */
  --docs-nav-h: 60px;
  /* One column edge for the whole page. Expressed absolutely rather than in
     `ch`, because `ch` resolves against each element's own font — in `ch` a
     Newsreader h2 and an IBM Plex Sans paragraph end at different places and
     the section rules stop lining up. 41rem is ~68ch of the body face. */
  --docs-measure: 41rem;    /* ~68ch of IBM Plex Sans at 16px */
  --docs-figure: 49rem;     /* tables, code and callouts may run wider */
}

/* -------------------------------------------------------------------------
   SHELL — three columns: nav rail, page, on-this-page.
   .wrap-wide (styles.css) supplies the max-width and the 32px gutters; this
   file adds the grid and the vertical rhythm.
   ------------------------------------------------------------------------- */
.docs-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 0 48px; align-items: start; padding-top: var(--s-9); padding-bottom: var(--s-13); }

/* Sticky rails need `align-items: start` above — a stretched grid item is as
   tall as the row and can never stick. */
.docs-side,
.docs-toc { position: sticky; top: calc(var(--docs-nav-h) + var(--s-7)); max-height: calc(100vh - var(--docs-nav-h) - var(--s-9)); overflow-y: auto; overscroll-behavior: contain; }

/* Thin rails: the scrollbar is chrome, not content. */
.docs-side, .docs-toc { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.docs-side::-webkit-scrollbar, .docs-toc::-webkit-scrollbar { width: 6px; }
.docs-side::-webkit-scrollbar-thumb, .docs-toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }

.docs-body :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------------------- */
.docs-search { position: relative; margin: 0 0 var(--s-7); }
.docs-search input { width: 100%; height: 34px; padding: 0 10px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-3); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-13); transition: border-color var(--dur-fast) var(--ease-out); }
.docs-search input::placeholder { color: var(--fg-4); }
.docs-search input:hover { border-color: var(--border-strong); }
.docs-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.5; }

.docs-search-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: var(--s-2); list-style: none; background: var(--bg-elev-3); border: 1px solid var(--border-strong); border-radius: var(--r-3); box-shadow: var(--shadow-2); }
.docs-search-results[hidden] { display: none; }
.docs-search-results a { display: block; padding: 7px 8px; border-radius: var(--r-2); text-decoration: none; }
.docs-search-results a:hover { background: var(--signal-wash); }
.docs-search-results li.is-active a { background: var(--signal-wash); }
.docs-search-results .r-title { display: block; font-size: var(--t-13); font-weight: var(--w-medium); color: var(--fg); }
.docs-search-results .r-section { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--t-12); color: var(--fg-4); }
.docs-search-results .r-excerpt { display: block; margin-top: 2px; font-size: var(--t-12); line-height: 1.4; color: var(--fg-4); overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   SIDEBAR NAV
   ------------------------------------------------------------------------- */
.docs-nav-section { margin: var(--s-7) 0 var(--s-3); font-family: var(--font-mono); font-size: var(--t-12); font-weight: var(--w-medium); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--fg-4); }
.docs-nav-section:first-child { margin-top: 0; }
.docs-nav-section a { color: inherit; text-decoration: none; }
.docs-nav-section a:hover { color: var(--signal); }
.docs-nav-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.docs-nav-list a { display: block; padding: 6px 10px; border-left: 2px solid var(--border-faint); font-size: var(--t-13); line-height: var(--lh-normal); color: var(--fg-3); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.docs-nav-list a:hover { color: var(--fg); border-left-color: var(--border-strong); }

/* The one lime on the page, besides a hovered link: you are here. */
.docs-nav-list a[aria-current="page"] { color: var(--signal); background: var(--signal-wash); border-left-color: var(--signal); font-weight: var(--w-medium); }

/* -------------------------------------------------------------------------
   PAGE HEAD
   ------------------------------------------------------------------------- */
.docs-main { min-width: 0; }
.docs-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-wide); color: var(--fg-3); }
.docs-crumb a { color: var(--fg-3); text-decoration: none; }
.docs-crumb a:hover { color: var(--fg); }
.docs-crumb .sep { color: var(--fg-4); }
.docs-crumb span:last-child { color: var(--fg-2); }

.docs-main > h1 { margin: var(--s-5) 0 var(--s-5); max-width: var(--docs-measure); font-family: var(--font-display); font-size: clamp(2.125rem, 4vw, var(--t-48)); font-weight: var(--w-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg); }
.docs-lede { margin: 0 0 var(--s-9); padding-bottom: var(--s-8); max-width: var(--docs-measure); border-bottom: 1px solid var(--border-faint); font-size: var(--t-18); line-height: var(--lh-relaxed); color: var(--fg-2); }

/* -------------------------------------------------------------------------
   PROSE
   Running text holds a ~68ch measure; tables, code and callouts are allowed
   to run wider, because a control matrix at 68ch is a scrollbar.
   ------------------------------------------------------------------------- */
.docs-prose { font-family: var(--font-sans); font-size: var(--t-16); line-height: var(--lh-relaxed); color: var(--fg-2); }
.docs-prose > * { max-width: var(--docs-measure); }
.docs-prose > table,
.docs-prose > .codehilite,
.docs-prose > .admonition { max-width: var(--docs-figure); }

.docs-prose h2,
.docs-prose h3 { font-family: var(--font-display); font-weight: var(--w-regular); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg); }
.docs-prose h2 { margin: var(--s-11) 0 var(--s-5); padding-top: var(--s-8); border-top: 1px solid var(--border-faint); font-size: var(--t-30); }
.docs-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.docs-prose h3 { margin: var(--s-9) 0 var(--s-4); font-size: var(--t-24); }
.docs-prose h4 { margin: var(--s-8) 0 var(--s-4); font-family: var(--font-sans); font-size: var(--t-16); font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); color: var(--fg); }
/* The sticky masthead must not eat an anchored heading. */
.docs-prose h2, .docs-prose h3, .docs-prose h4 { scroll-margin-top: calc(var(--docs-nav-h) + var(--s-7)); }

.docs-prose p { margin: 0 0 var(--s-5); }
.docs-prose ul,
.docs-prose ol { margin: 0 0 var(--s-5); padding-left: var(--s-6); }
.docs-prose li { margin-bottom: var(--s-3); }
.docs-prose li::marker { color: var(--fg-4); }
.docs-prose li > ul, .docs-prose li > ol { margin-top: var(--s-3); }
.docs-prose strong { color: var(--fg); font-weight: var(--w-semibold); }
.docs-prose hr { margin: var(--s-10) 0; border: 0; border-top: 1px solid var(--border-faint); }
.docs-prose img { max-width: 100%; height: auto; border-radius: var(--r-3); }
.docs-prose blockquote { margin: 0 0 var(--s-5); padding: var(--s-2) 0 var(--s-2) var(--s-6); border-left: 2px solid var(--border-strong); color: var(--fg-3); font-style: italic; }

/* Links read as text until you reach for them; then the signal. */
.docs-prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
.docs-prose a:hover { color: var(--signal); text-decoration-color: var(--signal); }

/* Heading permalinks: present for keyboards, invisible until wanted. */
.docs-prose .headerlink { margin-left: 0.35em; font-family: var(--font-mono); font-size: 0.7em; color: var(--fg-4); text-decoration: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.docs-prose h2:hover .headerlink,
.docs-prose h3:hover .headerlink,
.docs-prose h4:hover .headerlink,
.docs-prose .headerlink:focus { opacity: 1; }
.docs-prose .headerlink:hover { color: var(--signal); }

/* -------------------------------------------------------------------------
   CODE
   ------------------------------------------------------------------------- */
.docs-prose :not(pre) > code { padding: 1px 5px; background: var(--bg-elev-1); border: 1px solid var(--border-faint); border-radius: var(--r-2); font-family: var(--font-mono); font-size: 0.875em; color: var(--fg); overflow-wrap: break-word; }

.codehilite { margin: 0 0 var(--s-6); border: 1px solid var(--border-faint); border-left: 3px solid var(--border); border-radius: 0 var(--r-3) var(--r-3) 0; overflow-x: auto; }
.codehilite pre { margin: 0; padding: var(--s-5) var(--s-6); font-family: var(--font-mono); font-size: var(--t-13); line-height: var(--lh-relaxed); color: var(--fg-2); }
.codehilite code { font-family: inherit; font-size: inherit; }
/* docs-code.css is generated from Pygments and linked after this file, so it
   arrives with a surface of its own. The token colours are welcome; the panel
   is not — take the background back at a specificity it cannot beat. */
.docs-body .codehilite { background: var(--bg-inset); color: var(--fg-2); }

/* -------------------------------------------------------------------------
   TABLES — the framework control matrices are wide; they scroll, they do not
   break the column.
   ------------------------------------------------------------------------- */
.docs-prose table { display: block; width: max-content; max-width: min(100%, var(--docs-figure)); margin: 0 0 var(--s-7); overflow-x: auto; border-collapse: collapse; border: 1px solid var(--border-faint); border-radius: var(--r-2); font-size: var(--t-14); line-height: var(--lh-normal); }
.docs-prose th,
.docs-prose td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-faint); }
.docs-prose th { background: var(--bg-elev-1); border-bottom-color: var(--border); font-family: var(--font-sans); font-size: var(--t-13); font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); color: var(--fg); white-space: nowrap; }
.docs-prose tbody tr:last-child td { border-bottom: 0; }
.docs-prose tbody tr:hover td { background: var(--bg-elev-1); }

/* -------------------------------------------------------------------------
   ADMONITIONS
   These carry the "what this does not prove" paragraphs an auditor has to
   read, so they are built to stop the eye: a heavy left bar, a tinted wash
   and a mono label. The colours are the product's own severity ramp — a
   caution box reads like a critical finding on purpose.
   The wash is an rgba token, so it is layered over the panel surface as a
   flat gradient rather than replacing it.
   ------------------------------------------------------------------------- */
.admonition { margin: var(--s-7) 0; padding: var(--s-5) var(--s-6); background: var(--bg-elev-1); border: 1px solid var(--border-faint); border-left: 4px solid var(--border-strong); border-radius: 0 var(--r-3) var(--r-3) 0; font-size: var(--t-15); line-height: var(--lh-relaxed); color: var(--fg-2); }
.admonition > :last-child { margin-bottom: 0; }
.admonition-title { margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: var(--t-12); font-weight: var(--w-semibold); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--fg-3); }

.admonition.note { border-left-color: var(--sev-info); background-image: linear-gradient(var(--sev-info-wash), var(--sev-info-wash)); }
.admonition.note > .admonition-title { color: var(--sev-info); }

.admonition.warning { border-left-color: var(--sev-medium); background-image: linear-gradient(var(--sev-medium-wash), var(--sev-medium-wash)); }
.admonition.warning > .admonition-title { color: var(--sev-medium); }

.admonition.caution { border-left-color: var(--sev-critical); background-image: linear-gradient(var(--sev-critical-wash), var(--sev-critical-wash)); }
.admonition.caution > .admonition-title { color: var(--sev-critical); }

/* -------------------------------------------------------------------------
   PAGE FOOT
   ------------------------------------------------------------------------- */
.docs-updated { margin: var(--s-10) 0 0; max-width: var(--docs-figure); font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-wide); color: var(--fg-4); }
.docs-prevnext { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--docs-figure); gap: var(--s-4); margin-top: var(--s-9); padding-top: var(--s-8); border-top: 1px solid var(--border-faint); }
.docs-prevnext a { display: block; padding: var(--s-4) var(--s-5); background: var(--bg-elev-1); border: 1px solid var(--border-faint); border-radius: var(--r-3); font-size: var(--t-14); color: var(--fg); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
.docs-prevnext a:hover { border-color: var(--border-strong); }
.docs-prevnext a:hover .k { color: var(--fg-3); }
.docs-prevnext .k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-4); }
.docs-next { grid-column: 2; text-align: right; }

/* -------------------------------------------------------------------------
   ON THIS PAGE
   ------------------------------------------------------------------------- */
.docs-toc-label { margin: 0 0 var(--s-4); font-family: var(--font-mono); font-size: var(--t-12); font-weight: var(--w-medium); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--fg-4); }
.docs-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-faint); }
.docs-toc-list a { display: block; padding: 5px 0 5px var(--s-4); margin-left: -1px; border-left: 1px solid transparent; font-size: var(--t-13); line-height: var(--lh-normal); color: var(--fg-3); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.docs-toc-list a:hover { color: var(--fg); border-left-color: var(--border-strong); }
.docs-toc-list .lvl-3 a { padding-left: var(--s-7); font-size: var(--t-12); color: var(--fg-4); }
.docs-toc-list .lvl-3 a:hover { color: var(--fg-2); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   1180: the on-this-page rail goes; the page keeps its measure.
    900: the nav rail becomes a sticky strip under the masthead.
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .docs-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 0 40px; }
  .docs-toc { display: none; }
}

@media (max-width: 900px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; padding-bottom: var(--s-11); }

  /* Full-bleed strip: pull out through .wrap-wide's gutters so the rule below
     it spans the viewport, then put the gutters back on the contents. */
  .docs-side { position: sticky; top: var(--docs-nav-h); z-index: 20; max-height: none; overflow: visible; display: flex; align-items: center; gap: var(--s-5); margin: 0 -32px var(--s-8); padding: var(--s-4) 32px; background: var(--bg); border-bottom: 1px solid var(--border-faint); }
  .docs-search { flex: 0 1 220px; margin: 0; }
  .docs-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; display: flex; align-items: center; gap: var(--s-5); white-space: nowrap; scrollbar-width: none; }
  .docs-nav::-webkit-scrollbar { display: none; }
  .docs-nav-section { margin: 0; flex: 0 0 auto; }
  .docs-nav-list { display: flex; align-items: center; gap: var(--s-4); margin: 0; flex: 0 0 auto; }
  .docs-nav-list a { padding: 4px 0; border-left: 0; border-bottom: 2px solid transparent; }
  .docs-nav-list a:hover { border-left: 0; border-bottom-color: var(--border-strong); }
  .docs-nav-list a[aria-current="page"] { background: none; border-left: 0; border-bottom-color: var(--signal); }

  .docs-main { padding-top: var(--s-3); }
}

@media (max-width: 600px) {
  .docs-shell { padding-left: var(--s-6); padding-right: var(--s-6); }
  .docs-side { margin-left: calc(var(--s-6) * -1); margin-right: calc(var(--s-6) * -1); padding-left: var(--s-6); padding-right: var(--s-6); }
  .docs-search { flex: 0 0 150px; }  /* the strip scrolls; the field must not shrink to nothing */
  .docs-prevnext { grid-template-columns: 1fr; }
  .docs-next { grid-column: 1; }
  .docs-prose h2 { margin-top: var(--s-9); font-size: var(--t-24); }
  .docs-prose h3 { font-size: var(--t-20); }
  .codehilite pre { padding: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .docs-body * { transition-duration: 1ms !important; }
}

.docs-legal { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: center; padding: var(--s-6) var(--s-5); border-top: 1px solid var(--border-faint); font-size: var(--t-12); }
.docs-legal a { color: var(--fg-4); text-decoration: none; }
.docs-legal a:hover { color: var(--fg-3); }