/* per-page polish: docs
   Scope: .lay (docs grid), .ph, .doc, .toc, .cb, .note, .dnav
   NEVER touch .nav, .toc, .card, .row, .input generically ,  all scoped below
*/

/* ── Page layout: lift top clearance so content starts below the floating nav ── */
/* 2F: the proto .lay is `220px minmax(0,720px)` inside a 1180 max-width
   box, so on a 1280 viewport ~176px of the grid track + the page
   margin sat empty on the RIGHT and the content read left-of-centre.
   Cap the .lay to exactly the used width (220 sidebar + 64 gap + 740
   content) so `margin:0 auto` truly centres the whole block in the
   viewport with no dead right space. */
.lay {
  padding-top: 64px !important;
}
/* desktop-only: scoped above the 980 collapse so the mobile single
   column (space-ds.css <=640 / proto <=980) is never overridden.
   Federico 2026-05-19: docs felt too narrow / "starts so far on the
   right." Widened the layout to feel like a proper documentation
   site: 1240 max-width, 200 TOC, 56 gap, content column up to 920
   wide, side paddings trimmed from 48 -> 32. Paragraph max-width
   (64ch) still caps text wrap inside the column so reading width
   stays comfortable; code blocks / callouts / images can use the
   wider canvas. Content now begins ~280px from the viewport left at
   1280 (was ~412). */
@media (min-width: 981px) {
  .lay {
    max-width: 1240px !important;
    grid-template-columns: 200px minmax(0, 920px) !important;
    gap: 56px !important;
    padding: 64px 32px 96px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
}

/* ── Page header: bigger title, tighter eyebrow/h1 stack ── */
.ph .h1 {
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}
.ph p {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
  margin-top: 9px !important;
}

/* CANON sec 12.1  -  content-TOC active = paper bg + shadow-sm. */
.lay aside.toc a.on {
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 600 !important;
}
.lay aside.toc a.on svg {
  opacity: 1 !important;
  color: var(--accent) !important;
}
.lay aside.toc a:hover {
  color: var(--ink) !important;
}
/* CANON sec 10 / sec 12.1  -  TOC label eyebrow. */
.lay aside.toc .te {
  color: var(--ink-mute) !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

/* ── Doc body: bump line-height + measure cap ── */
/* 2F: 62ch (~480px) was far narrower than the 740px content column,
   producing ragged 3-4-word lines + ~50% dead space. Widen the prose
   measure to ~700px (a comfortable long-form measure that fills the
   column without over-running). */
.doc p {
  line-height: 1.72 !important;
  font-size: 14.5px !important;
  max-width: 700px !important;
  color: var(--ink-soft) !important;
}
.doc li {
  line-height: 1.68 !important;
  font-size: 14.5px !important;
}
/* List bullets get accent tint */
.doc li::before {
  background: color-mix(in srgb, var(--accent) 60%, var(--ink-faint)) !important;
}

/* CANON sec 10  -  h2 = 22 / 640 / -.02em. Override proto's 19px inline. */
.doc h2 {
  font-size: 22px !important;
  font-weight: 640 !important;
  letter-spacing: -.02em !important;
  margin-top: 44px !important;
  margin-bottom: 11px !important;
  color: var(--ink) !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--line) !important;
}
.doc h2:first-child {
  margin-top: 0 !important;
  padding-bottom: 8px !important;
}
.doc h3 {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
  margin-top: 26px !important;
  margin-bottom: 6px !important;
}

/* -- Code-block header strip: CANON sec 10 eyebrow tracking. -- */
.doc .cb-h {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)) !important;
  border-bottom: 1px solid var(--accent-line) !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
}
.doc .cb-h .cp {
  color: var(--ink-mute) !important;
  transition: color .15s !important;
}
.doc .cb-h .cp:hover {
  color: var(--accent) !important;
}
.doc .cb pre {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
}
/* 2F: docs mobile -- CLI-reference code blocks clipped on the right
   (trailing comments truncated, a period dropped). Make the <pre>
   horizontally scrollable with inner padding so a long line scrolls
   within the block instead of being silently cut. Scoped to the docs
   code block; safe at every width (no-op when content fits). */
.doc .cb pre,
.doc pre {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  white-space: pre !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 16px !important;
}
/* On a phone the parent .cb is `overflow:hidden`, so an unwrapped
   pre that is wider than the block is silently CLIPPED (the scroll
   is invisible and unswipeable in a static view). Wrap the code on
   mobile instead: nothing is cut, no hidden horizontal scroll. */
@media (max-width: 640px) {
  .doc .cb pre,
  .doc pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow-x: visible !important;
  }
}

/* ── Note callout: tighten left-edge visual cue ── */
.doc .note {
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* ── Bottom doc nav: more breathing room ── */
.dnav {
  margin-top: 56px !important;
  padding-top: 24px !important;
  gap: 12px !important;
}

/* ── Mobile: collapse TOC gracefully ── */
@media (max-width: 980px) {
  .lay {
    padding-top: 40px !important;
  }
  .lay aside.toc {
    margin-bottom: 8px !important;
  }
}