/* In-app Docs surface: two-column layout, collapsible nav on narrow screens. */

.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.docs-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
.docs-nav-group-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--as-text-muted); margin: 0 0 6px; }
.docs-nav-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: var(--as-radius-sm); color: var(--as-text-secondary); font-size: 14px; cursor: pointer; font-family: inherit; }
.docs-nav-item:hover { background: var(--as-surface-muted); color: var(--as-text-primary); }
/* --as-white, not --as-text-inverse: the inverse token flips to dark navy in dark mode,
   and a solid marine background needs white in BOTH schemes (same choice as .btn-primary). */
.docs-nav-item[aria-current="page"] { background: var(--as-marine); color: var(--as-white); font-weight: 600; }
/* Locked tabs are marked by the words "off"/"admin" in the tab itself, never by dimming. */
.docs-nav-locked { font-style: italic; }
.docs-nav-locked[aria-current="page"] { background: var(--as-navy); color: var(--as-white); }
.docs-nav-state { font-size: 11px; font-weight: 400; }

.docs-hero { margin-bottom: 6px; }
.docs-hero-band { background: var(--as-navy); border-radius: var(--as-radius-sm); padding: 16px 16px 10px; }
.docs-hero-band .dg { min-width: 0; max-height: 128px; }
.docs-hero-lede { color: var(--as-text-secondary); font-size: 16px; margin: 10px 4px 2px; }
.docs-nav-mark { display: inline-flex; }
.docs-nav-item { display: flex; align-items: center; gap: 9px; }
.docs-nav-label { min-width: 0; }
.docs-nav-item[aria-current="page"] .dg-line { stroke: var(--as-white); }
.docs-nav-item[aria-current="page"] .dg-chip { stroke: var(--as-white); fill: transparent; }

.docs-article { line-height: 1.65; color: var(--as-text-primary); }
.docs-article > h1 { display: none; }
.docs-article h2 { font-size: 24px; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--as-border); }
.docs-article h2:first-child { margin-top: 0; }
.docs-article h3 { font-size: 18px; margin: 22px 0 8px; }
.docs-article h4 { font-size: 15px; margin: 18px 0 6px; }
.docs-article p { margin: 10px 0; }
.docs-article ul, .docs-article ol { margin: 10px 0 10px 22px; padding: 0; }
.docs-article li { margin: 4px 0; }
.docs-article a { color: var(--as-marine); text-decoration: underline; text-underline-offset: 2px; }
.docs-article code { background: var(--as-surface-muted); border: 1px solid var(--as-border); border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.docs-article table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.docs-article th, .docs-article td { border: 1px solid var(--as-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.docs-article th { background: var(--as-surface-muted); font-weight: 600; }
.docs-article hr { border: 0; border-top: 1px solid var(--as-border); margin: 22px 0; }
.docs-article .docs-code { position: relative; background: var(--as-navy); color: #e7eef1; border-radius: var(--as-radius-sm); padding: 14px 16px; overflow-x: auto; }
.docs-article .docs-code code { background: none; border: 0; color: inherit; padding: 0; font-size: 13px; }
.docs-code-lang { position: absolute; top: 6px; right: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9fb3bd; }

/* Canonical flow fences render as a chip chain; the order on screen is the order spoken. */
ol.docs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 14px 0; padding: 0; counter-reset: step; }
.docs-flow-step { position: relative; background: var(--as-surface-muted); border: 1px solid var(--as-border); border-radius: 999px; padding: 5px 14px; font-size: 13px; counter-increment: step; }
.docs-flow-step::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--as-marine); color: #fff; font-size: 11px; font-weight: 700; margin-right: 7px; }
.docs-flow-step + .docs-flow-step::after { content: ""; }
.docs-flow-step:not(:last-child) { margin-right: 14px; }
.docs-flow-step:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + 2px); top: 50%; transform: translateY(-50%); color: var(--as-marine); font-weight: 700; }

.docs-locked { background: var(--as-surface-muted); border: 1px dashed var(--as-border); border-radius: var(--as-radius-sm); padding: 18px; color: var(--as-text-secondary); }
.docs-locked p { margin: 0; }

/* Canonical figures (```diagram): the continuous-line house style (AIRUN-044). They sit on
   the brand-navy band - the style's native surface - so pale strokes and the one citrus
   accent read with high contrast in BOTH themes, instead of citrus washing out on white. */
.docs-figure { background: var(--as-navy); border-radius: var(--as-radius-sm); padding: 18px 14px 14px; margin: 18px 0; overflow-x: auto; }
.dg { display: block; width: 100%; height: auto; min-width: 520px; max-height: 480px; fill: none; transform: rotate(-.3deg); }
.dg text { font-family: Montserrat, system-ui, sans-serif; }
.dg-chip { fill: #20313B; stroke: #E5EEEF; stroke-width: 2; stroke-linecap: round; }
.dg-t { fill: #E5EEEF; font-size: 16px; font-weight: 600; }
.dg-s { fill: #BAC8CE; font-size: 15px; }
.dg-line { stroke: #E5EEEF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dg-head { stroke-width: 2.2; }
.dg-accent { stroke: var(--as-citrus); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.dg-icon { width: 22px; height: 20px; min-width: 0; max-height: none; flex: none; transform: rotate(-3deg); }
@media (max-width: 900px) {
  .dg { min-width: 460px; }
}

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-nav { position: static; }
}