/* Contentstack Canoe docs: page components for the docs home, Getting started, Core concepts, Metrics,
   Reading your report, Recommendations and Plans and limits. Owner: docs-core.
   Everything here is scoped with a docs- prefix and uses site.css tokens only. */

/* Shared: small helpers ------------------------------------------------------------------------ */
.docs-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.docs-header .docs-kicker + h1 { margin-top: 0; }
.docs-ui { color: var(--ink); font-weight: 600; }
.prose .docs-ui { color: var(--ink); }
.docs-nowrap { white-space: nowrap; }

/* Figures (diagrams, illustrations, mock panels) -------------------------------------------------- */
.docs-figure { margin: 0; min-width: 0; }
.prose > .docs-figure { margin-top: 1.8em; }
.prose > .docs-figure + * { margin-top: 1.8em; }
.docs-frame {
  position: relative; min-width: 0; overflow: hidden;
  padding: clamp(16px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--highlight), var(--shadow);
}
.docs-figure figcaption, .docs-caption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.docs-frame-label { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Numbered task steps ----------------------------------------------------------------------------- */
.docs-steps { counter-reset: dstep; display: grid; }
.prose > .docs-steps { margin-top: 1.4em; }
.docs-steps > li { position: relative; counter-increment: dstep; padding: 0 0 22px 46px; margin: 0; min-width: 0; }
.prose .docs-steps > li + li { margin-top: 0; }
.docs-steps > li::before {
  content: counter(dstep); position: absolute; left: 0; top: 1px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--accent-text); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums;
}
.docs-steps > li::after { content: ""; position: absolute; left: 15px; top: 39px; bottom: 7px; width: 1px; background: var(--line); }
.docs-steps > li:last-child { padding-bottom: 0; }
.docs-steps > li:last-child::after { display: none; }
.docs-steps > li > * + * { margin-top: 8px; }
.docs-steps h3, .docs-steps .docs-step-title { padding-top: 3px; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.docs-steps p, .docs-steps li li { font-size: inherit; }
.docs-steps ul { padding-left: 1.2em; list-style: disc; }
.docs-steps ul > li::marker { color: var(--accent); }
.docs-steps ul > li + li { margin-top: .35em; }

/* Tables that become stacked cards on phones ------------------------------------------------------ */
.docs-table .table td strong { color: var(--ink); }
.docs-table .table th[scope="row"] { white-space: normal; }
.docs-table .table code { white-space: nowrap; }
@media (max-width: 639px) {
  .docs-table:not(.docs-table-keep) { overflow: visible; border: 0; border-radius: 0; background: none; }
  .docs-table:not(.docs-table-keep) > .table { min-width: 0; display: block; }
  .docs-table:not(.docs-table-keep) caption { display: block; }
  .docs-table:not(.docs-table-keep) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .docs-table:not(.docs-table-keep) tbody { display: grid; gap: 10px; }
  .docs-table:not(.docs-table-keep) tr { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .docs-table:not(.docs-table-keep) .table th, .docs-table:not(.docs-table-keep) .table td { display: block; padding: 0; border: 0; }
  .docs-table:not(.docs-table-keep) .table tbody th { font-size: 15.5px; color: var(--ink); }
  .docs-table:not(.docs-table-keep) .table tbody tr > * + * { margin-top: 8px; }
  .docs-table:not(.docs-table-keep) td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  .docs-table:not(.docs-table-keep) .table .num { text-align: left; }
  /* Short-cell tables stay tabular on phones: they fit 343px, so no sideways scroll */
  .docs-table-keep > .table { min-width: 0; font-size: 14px; }
  .docs-table-keep .table th, .docs-table-keep .table td { padding: 10px 12px; }
  .docs-table-keep .table thead th { white-space: normal; }
  .docs-table-keep .table code { white-space: normal; overflow-wrap: anywhere; }
  /* Pill variant: first cell is the card title, the short last cell is a pill on the same line */
  .docs-table-pill:not(.docs-table-keep) .table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
  .docs-table-pill:not(.docs-table-keep) .table tbody tr > * + * { margin-top: 0; }
  .docs-table-pill:not(.docs-table-keep) .table tbody tr > :first-child { grid-column: 1; grid-row: 1; }
  .docs-table-pill:not(.docs-table-keep) .table tbody tr > :last-child {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: start;
    display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  }
  .docs-table-pill:not(.docs-table-keep) .table tbody tr > :not(:first-child):not(:last-child) { grid-column: 1 / -1; margin-top: 6px; }
  .docs-table-pill:not(.docs-table-keep) .table tbody td::before { display: none; }
}

/* Definition blocks (metric cards) --------------------------------------------------------------- */
.docs-def { display: grid; gap: 0; margin-top: 1.2em; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.prose > .docs-def { margin-top: 1.2em; }
.docs-def > div { display: grid; gap: 4px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.docs-def > div:first-child { border-top: 0; }
.docs-def dt { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.docs-def dd { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.docs-def dd strong { color: var(--ink); }
@media (min-width: 640px) {
  .docs-def > div { grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: baseline; }
}

/* Docs home ---------------------------------------------------------------------------------------- */
.docs-home-search { margin-top: 24px; max-width: 620px; }
.docs-home-search .search-results { z-index: 70; }
.docs-home-hint { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.docs-home-hint kbd { vertical-align: 1px; }
@media (pointer: coarse) { .docs-home-hint { display: none; } }
.docs-home-section { margin-top: clamp(36px, 5vw, 56px); }
.docs-home-section > h2 { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
.docs-home-section > p { margin-top: 8px; color: var(--ink-2); }
.docs-home-section > h2 + .docs-answers { margin-top: 12px; }

/* Start here: two paths (Use the app / Agents and API), each a list of numbered link rows */
.docs-start { margin-top: 16px; }
.docs-start > .tab-list { margin-bottom: 16px; }
.docs-start-steps { counter-reset: none; }
.docs-start-steps > li { min-width: 0; }
.docs-start .link-row .step-num { font-size: 12.5px; }
.docs-start .link-row-chev { flex: none; }
.docs-start-steps .code-block { margin-top: 8px; }
.docs-start-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.docs-start-note a { color: var(--accent-text); }
.docs-start-badge { margin-bottom: 12px; }

.docs-answers { display: grid; border-top: 1px solid var(--line); }
.docs-answer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 56px; padding: 12px 2px;
  border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: 15.5px; line-height: 1.4;
}
.docs-answer span { display: block; }
.docs-answer small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.docs-answer .icon { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t) var(--ease), color var(--t-fast); }
@media (hover: hover) { .docs-answer:hover .icon { transform: translateX(2px); color: var(--accent); } .docs-answer:hover > span { color: var(--accent-text); } }
.docs-answer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.docs-help-line { margin-top: 24px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* Setup rail illustration (Getting started) -------------------------------------------------------- */
.docs-setup { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .docs-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.docs-setup-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
:root[data-theme="light"] .docs-setup-card { background: var(--card); }
.docs-setup-title { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.docs-setup-sub { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.docs-check { display: grid; gap: 10px; margin-top: 14px; }
.docs-check li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.docs-check-dot { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); }
.docs-check-dot.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.docs-check-dot.is-done::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--m-check) center / contain no-repeat; mask: var(--m-check) center / contain no-repeat; }
.docs-check-dot.is-run { border-color: var(--accent-line); border-top-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .docs-check-dot.is-run { animation: docs-spin 1.1s linear infinite; } }
@keyframes docs-spin { to { transform: rotate(360deg); } }
.docs-check li.is-wait { color: var(--muted); }
.docs-rail { display: grid; gap: 0; margin-top: 12px; }
.docs-rail li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; padding-bottom: 12px; }
.docs-rail li:last-child { padding-bottom: 0; }
.docs-rail li::after { content: ""; position: absolute; left: 12.5px; top: 28px; bottom: 2px; width: 1px; background: var(--line); }
.docs-rail li:last-child::after { display: none; }
.docs-rail-n { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 12px/1 var(--font); }
.docs-rail li.is-done .docs-rail-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.docs-rail li.is-now .docs-rail-n { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.docs-rail b { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; padding-top: 1px; }
.docs-rail i { font-style: normal; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.docs-rail li.is-next b { color: var(--ink-2); font-weight: 500; }

/* Object model flow (Core concepts) ------------------------------------------------------------- */
.docs-flow { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); counter-reset: dflow; }
.docs-flow-node { position: relative; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); min-width: 0; }
:root[data-theme="light"] .docs-flow-node { background: var(--card); }
.docs-flow-node.is-key { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.docs-flow-node + .docs-flow-node::before {
  content: ""; position: absolute; left: 24px; top: -11px; width: 12px; height: 12px; background: var(--muted);
  -webkit-mask: var(--m-chevron-down) center / contain no-repeat; mask: var(--m-chevron-down) center / contain no-repeat;
}
.docs-flow-label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.docs-flow-name { display: block; margin-top: 4px; color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.docs-flow-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.docs-flow-meta span { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; line-height: 1.3; }
.docs-flow-api { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.docs-flow-api code { font-size: 12px; }
@media (min-width: 760px) {
  .docs-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .docs-flow-node + .docs-flow-node::before { left: -13px; top: 22px; -webkit-mask-image: var(--m-chevron-right); mask-image: var(--m-chevron-right); }
}

/* Prompt matrix (questions x engines) ----------------------------------------------------------------- */
.docs-matrix-wrap { display: grid; gap: 22px; }
.docs-matrix-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.docs-matrix-plan { color: var(--ink); font-size: 14px; font-weight: 600; }
.docs-matrix-math { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.docs-matrix-math b { color: var(--ink); font-weight: 600; }
.docs-matrix { display: grid; gap: 8px; }
.docs-matrix-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.docs-matrix-eng { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.docs-matrix-eng .engine-logo { width: 16px; height: 16px; }
.docs-matrix-cells { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.docs-matrix-cells i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--accent); opacity: .85; }
.docs-matrix-cells.is-free i { background: var(--blue); }
@media (min-width: 480px) {
  .docs-matrix-row { grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; }
  .docs-matrix-head { padding-left: 116px; }
}

/* Question types legend (Concepts) ------------------------------------------------------------------ */
.docs-mix-legend { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .docs-mix-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } }
.docs-mix-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.docs-mix-legend li::before { content: ""; width: 12px; height: 12px; margin-top: 4px; border-radius: 3px; background: var(--sw); }
.docs-mix-legend b { display: block; color: var(--ink); font-weight: 600; }
.docs-mix-legend q { color: var(--muted); quotes: "\201C" "\201D"; }

/* Score composition (Metrics) --------------------------------------------------------------------- */
.docs-weights-legend { display: grid; gap: 10px 20px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .docs-weights-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.docs-weights-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.docs-weights-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--sw); transform: translateY(1px); }
.docs-weights-legend b { color: var(--ink); font-weight: 600; }
.docs-weights-legend em { font-style: normal; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.docs-trim { display: grid; gap: 10px; }
.docs-trim-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 14px; }
.docs-trim-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); white-space: nowrap; }
.docs-trim-name .engine-logo { width: 16px; height: 16px; }
.docs-trim-track { position: relative; height: 12px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.docs-trim-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: inherit; background: var(--accent); }
.docs-trim-val { text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.docs-trim-sum { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.docs-trim-sum div { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.docs-trim-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.docs-trim-sum .is-total { padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink); font-weight: 600; }
.docs-trim-sum .is-total b { color: var(--accent-text); font-size: 18px; }

/* Recommendation card anatomy ------------------------------------------------------------------------ */
.docs-rec { position: relative; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
:root[data-theme="light"] .docs-rec { background: var(--card); }
.docs-rec-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.docs-rec-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.docs-rec-cat { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.docs-rec-target { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.docs-rec-target .icon { width: 14px; height: 14px; }
.docs-rec-title { margin-top: 12px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.docs-rec-why { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.docs-rec-why b { color: var(--ink); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.docs-rec-how { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-soft); }
.docs-rec-how b { display: block; color: var(--ink); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.docs-rec-how ul { margin-top: 6px; padding-left: 1.1em; list-style: disc; display: grid; gap: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.docs-rec-how ul > li::marker { color: var(--muted); }
.docs-rec-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent-text); font-size: 14px; font-weight: 500; }
.docs-rec-link .icon { width: 16px; height: 16px; }
.docs-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.docs-rec .docs-pin { margin-right: 2px; }
.docs-pins { display: grid; gap: 10px; margin-top: 18px; }
.docs-pins li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.docs-pins b { color: var(--ink); }

/* Playbook block ------------------------------------------------------------------------------- */
.docs-play { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.prose > .docs-play { margin-top: 1.4em; }
.docs-play > div { padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.docs-play > div:first-child { border-top: 0; }
.docs-play-k { display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.docs-play-v { display: block; margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.docs-play-v q { color: var(--ink); quotes: "\201C" "\201D"; }
.docs-play > .is-title { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.docs-play > .is-title .docs-play-v { color: var(--ink); font-weight: 600; font-size: 16px; }

/* Execution history replica (Reading your report) --------------------------------------------------- */
.docs-runs { display: grid; gap: 0; font-size: 14px; }
.docs-runs-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 56px minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); }
.docs-runs-row:last-child { border-bottom: 0; }
.docs-runs-head { padding-top: 0; font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.docs-runs-when b { display: block; color: var(--ink); font-weight: 500; }
.docs-runs-when i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.docs-runs-score { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.docs-runs-eng { display: flex; flex-wrap: wrap; gap: 4px; }
.docs-runs-eng span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.docs-runs-eng .engine-logo { width: 14px; height: 14px; }
.docs-runs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: 13px; }
.docs-runs-eng span.is-off { color: var(--muted); border-style: dashed; }
.docs-runs-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.docs-runs-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.docs-runs-status.is-partial::before { background: var(--warn); }
@media (max-width: 559px) {
  .docs-runs-head { display: none; }
  .docs-runs-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 0; }
  .docs-runs-eng { grid-column: 1 / -1; order: 3; }
  .docs-runs-status { grid-column: 1 / -1; order: 4; }
}

/* Plans: comparison and calculator ---------------------------------------------------------------- */
.docs-plan-tag { display: inline-flex; align-items: center; margin-left: 6px; }
.docs-calc { display: grid; gap: 20px; }
.docs-calc-fields { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .docs-calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.docs-calc .field { display: grid; gap: 6px; }
.docs-calc .label { font-size: 14px; }
.docs-calc .hint { font-size: 12.5px; color: var(--muted); }
.docs-calc .input, .docs-calc .select { height: 44px; }
.docs-calc-seg { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); width: 100%; }
.docs-calc-seg label { position: relative; flex: 1; }
.docs-calc-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.docs-calc-seg span { display: grid; place-items: center; min-height: 36px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 14px; font-weight: 500; text-align: center; line-height: 1.2; transition: background-color var(--t-fast), color var(--t-fast); }
.docs-calc-seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--highlight), 0 1px 2px rgba(0, 0, 0, .12); }
.docs-calc-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.docs-calc-out { padding: 18px; border: 1px solid var(--accent-line); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.docs-calc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.docs-calc-total b { color: var(--ink); font-size: clamp(30px, 4vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.docs-calc-total span { color: var(--ink-2); font-size: 15px; }
.docs-calc-math { margin-top: 8px; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.docs-calc-meter { position: relative; height: 10px; margin-top: 16px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.docs-calc-meter i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--t) var(--ease); }
.docs-calc-meter.is-over i { background: var(--warn); }
.docs-calc-verdict { margin-top: 12px; color: var(--ink); font-size: 15px; line-height: 1.55; }
.docs-calc-verdict strong { color: var(--ink); }
.docs-calc-note { margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
html:not(.js) .docs-calc-out { display: none; }

.docs-examples { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.prose > .docs-examples { margin-top: 1.4em; }
@media (min-width: 768px) { .docs-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.docs-example { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.docs-example-k { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.docs-example-t { color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.docs-example-m { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); background: var(--code-bg); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.docs-example p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* Metric summary chips at the top of a metric section */
.docs-metric-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.prose > .docs-metric-meta { margin-top: .7em; }

/* Legend swatches (question mix, score weights) */
.docs-sw-a { --sw: var(--chart-1); } .docs-sw-b { --sw: var(--chart-2); } .docs-sw-c { --sw: var(--chart-3); } .docs-sw-d { --sw: var(--teal); }
:root[data-theme="light"] .docs-sw-c { --sw: #2E7D4F; }
:root[data-theme="light"] .docs-sw-d { --sw: #1F7A6B; }
.docs-frame-label + .docs-trim, .docs-frame-label + .docs-bubble { margin-top: 14px; }

/* Share of voice vs sentiment bubble chart (Reading your report) --------------------------------- */
.docs-bubble { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0 8px; }
.docs-bubble-y { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 0 0 2px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.docs-bubble-plot {
  position: relative; grid-row: 1; aspect-ratio: 4 / 3; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 100% 50%, 33.333% 100%; background-position: 0 -1px, -1px 0;
}
@media (min-width: 640px) { .docs-bubble-plot { aspect-ratio: 16 / 8; } }
.docs-bubble-win { position: absolute; right: 8px; top: 6px; color: var(--muted); font-size: 12px; }
.docs-bubble-dot {
  position: absolute; left: var(--x); bottom: var(--y); width: var(--s); height: var(--s); transform: translate(-50%, 50%);
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--chart-2) 70%, transparent); background: color-mix(in srgb, var(--chart-2) 22%, transparent);
}
.docs-bubble-dot.is-you { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); z-index: 2; }
.docs-bubble-dot b {
  position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap;
  color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.2;
}
.docs-bubble-dot.is-you b { color: var(--ink); font-weight: 600; }
.docs-bubble-dot.lb-below b { bottom: auto; top: calc(100% + 3px); }
.docs-bubble-dot.lb-left b { left: auto; right: calc(100% + 5px); bottom: 50%; transform: translateY(50%); }
.docs-bubble-x { grid-column: 2; display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.docs-bubble-cap { grid-column: 2; margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--muted); font-size: 12.5px; }
.docs-bubble-cap b { color: var(--ink-2); font-weight: 500; }

/* Stat strip used on the report page replicas */
.docs-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.prose > .docs-strip { margin-top: 1em; }
.docs-strip span { display: inline-flex; align-items: baseline; gap: 6px; min-height: 30px; padding: 4px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.4; }
.docs-strip b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Playbook step lists and trigger rows */
.docs-play-v ol, .docs-play-v ul { margin-top: 2px; padding-left: 1.25em; display: grid; gap: 6px; }
.docs-play-v ol { list-style: decimal; }
.docs-play-v ul { list-style: disc; }
.docs-play-v ol > li::marker { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.docs-play-v ul > li::marker { color: var(--accent); }
.docs-play-v li + li { margin-top: 0; }
.docs-play-v strong { color: var(--ink); }
.docs-play .badge { vertical-align: 2px; margin-left: 6px; }
@media (min-width: 640px) {
  .docs-play > div:not(.is-title) { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .docs-play > div:not(.is-title) .docs-play-v { margin-top: 0; }
}
.docs-rec-new { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.docs-calc-plan { border: 0; padding: 0; margin: 0; min-width: 0; }
.docs-calc-plan legend { padding: 0; margin-bottom: 6px; }
@media (min-width: 560px) { .docs-calc-plan .docs-calc-seg { max-width: 320px; } }
.prose .docs-flow > li + li { margin-top: 0; }
.docs-flow-meta span { white-space: nowrap; }
.prose :is(.docs-mix-legend, .docs-weights-legend, .docs-pins, .docs-check, .docs-rail) > li + li { margin-top: 0; }
@media (min-width: 640px) {
  .docs-table-tight .table td:last-child, .docs-table-thfit .table th[scope="row"] { white-space: nowrap; }
}
.docs-figure .cm-panel .cm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .docs-trim-row { grid-template-columns: 176px minmax(0, 1fr) 40px; gap: 12px; } }
.docs-bubble-short { display: none; }
@media (max-width: 639px) {
  .docs-bubble-dot { width: calc(var(--s) * .72); height: calc(var(--s) * .72); }
  .docs-bubble-long { display: none; }
  .docs-bubble-short { display: inline; }
}
.docs-ph { display: inline-block; padding: 0 7px; border-radius: 6px; border: 1px dashed var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-weight: 500; font-size: .92em; line-height: 1.5; }

/* Engine logos in docs (real provider marks, always next to the name) ------------------------------- */
.prose .engine-chips { margin: 1em 0; padding: 0; list-style: none; }
.prose .engine-chips > li + li { margin-top: 0; }
.prose .engine-name { color: var(--ink); }
.docs-engines { display: grid; gap: 12px; margin: 1.2em 0 1em; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.docs-engines-row { display: grid; gap: 8px; }
.docs-engines-plan { color: var(--ink); font-size: 14px; font-weight: 600; }
.docs-engines .engine-chips { margin: 0; }
@media (min-width: 480px) { .docs-engines-row { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; } }

/* Plans table: engine chips inside cells --------------------------------------------------------- */
.prose .docs-plan-table .engine-chips { margin: 0; gap: 6px; }
.docs-plan-table .engine-chip-sm { font-size: 13px; }
.docs-plan-table td[data-label] > .engine-chips { margin-top: 2px; }

/* Docs home: one search box (the hero one) ------------------------------------------------------- */
.docs-layout:has(.docs-home-search) .docs-sidebar > .docs-search { display: none; }

/* Inline code in definition rows stays whole (a long URL opts out with .dd-wrap and a <wbr>) */
.docs-def dd code { white-space: nowrap; }
.docs-def dd code.dd-wrap { white-space: normal; overflow-wrap: anywhere; }
.docs-def > div, .docs-def dd { min-width: 0; }

/* Run status list (Core concepts) ----------------------------------------------------------------- */
.docs-status { display: grid; gap: 10px; margin-top: 1em; padding: 0; list-style: none; }
.prose .docs-status > li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 0; }
.prose .docs-status > li::before, .prose .docs-status > li::marker { content: none; }
.docs-status .badge { justify-self: start; margin-top: 1px; }

/* Playbook rows behind a disclosure (Recommendations) ---------------------------------------------- */
.docs-play-more { border-top: 1px solid var(--line-soft); }
.docs-play-more > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; cursor: pointer; list-style: none;
  color: var(--accent-text); font-size: 14.5px; font-weight: 500; line-height: 1.4;
}
.docs-play-more > summary::-webkit-details-marker { display: none; }
.docs-play-more > summary::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--m-chevron-down) center / contain no-repeat; mask: var(--m-chevron-down) center / contain no-repeat;
  transition: transform var(--t) var(--ease);
}
.docs-play-more[open] > summary::after { transform: rotate(180deg); }
@media (hover: hover) { .docs-play-more > summary:hover { background: var(--hover); } }
.docs-play-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.docs-play-more > div { padding: 14px 18px; border-top: 1px solid var(--line-soft); }
@media (min-width: 640px) {
  .docs-play-more > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .docs-play-more > div .docs-play-v { margin-top: 0; }
}

/* Long code block that shows its first lines (Agent OS instructions): 8 on phones, 14 from 768 ------- */
.docs-code-more { display: none; }
@supports selector(:has(a)) {
  .docs-code-more { display: block; border-top: 1px solid var(--line-soft); }
  .docs-code-more > summary {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; cursor: pointer; list-style: none;
    color: var(--accent-text); font-size: 14px; font-weight: 500;
  }
  .docs-code-more > summary::-webkit-details-marker { display: none; }
  .docs-code-more > summary::after {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--m-chevron-down) center / contain no-repeat; mask: var(--m-chevron-down) center / contain no-repeat;
  }
  .docs-code-more[open] > summary::after { transform: rotate(180deg); }
  .docs-code-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  @media (hover: hover) { .docs-code-more > summary:hover { background: var(--hover); } }
  .docs-code-more-open, .docs-code-more[open] .docs-code-more-closed { display: none; }
  .docs-code-more[open] .docs-code-more-open { display: inline; }
  .docs-code-collapse:not(:has(.docs-code-more[open])) pre {
    max-height: calc(8 * 1.65em + 14px); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  @media (min-width: 768px) { .docs-code-collapse:not(:has(.docs-code-more[open])) pre { max-height: calc(14 * 1.7em + 16px); } }
}

/* Score color bands (Metrics). Fixed band colors, as in the app; the range label carries the meaning */
.docs-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 1em; padding: 0; list-style: none; }
@media (min-width: 560px) { .docs-bands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prose .docs-bands > li { display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.docs-band-sw { display: block; height: 10px; border-radius: 4px; }
.docs-band-1 { background: #2E7D4F; }
.docs-band-2 { background: #8BD49C; }
.docs-band-3 { background: #F2C14E; }
.docs-band-4 { background: #E5534B; }
@media (min-width: 640px) {
  .docs-plan-table > .table { table-layout: fixed; }
  .docs-plan-table thead th:nth-child(1) { width: 22%; }
  .docs-plan-table thead th:nth-child(2) { width: 34%; }
}
@media (max-width: 639px) {
  /* Free and Growth side by side inside each card */
  .docs-plan-table .table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
  .docs-plan-table .table tbody tr > th { grid-column: 1 / -1; }
  .docs-plan-table .table tbody tr > * + * { margin-top: 0; }
}
@media (max-width: 479px) { .docs-home-search .search-input { font-size: 16px; padding-right: 12px; } }

/* Name map (Core concepts): app name and API name on one line, the example beneath, on phones ---- */
.docs-table-map .table code { white-space: nowrap; }
@media (max-width: 639px) {
  .docs-table-map > .table { min-width: 0; display: block; }
  .docs-table-map thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .docs-table-map tbody { display: block; }
  .docs-table-map .table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .docs-table-map .table tbody tr:last-child { border-bottom: 0; }
  .docs-table-map .table th, .docs-table-map .table td { display: block; padding: 0; border: 0; }
  .docs-table-map .table td:last-child { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; }
  .docs-table-map .table td:last-child::before { content: "Example: "; }
  .docs-table-map .table code { font-size: max(12px, .86em); }
}

/* ================================================================================================
   UX pass 2026-09-27 (WP-G). Breakpoints: 480, 768, 1024 and 1200 only.
   ================================================================================================ */

/* Docs bar and sheet (markup: partials/docs-bar.html, behaviour: assets/js/docs.js) ---------------
   Below 1200 one sticky bar under the header replaces the search field, the Docs menu and the TOC
   disclosure; it opens a sheet with "On this page" and "All docs". 1024 to 1199 keeps the sidebar, so the
   bar there is TOC only. Without JavaScript the bar stays hidden and the sidebar shows inline. */
.docs-bar { display: none; }
@media (max-width: 1199px) {
  html.js .docs-bar { display: block; position: sticky; top: var(--header-h); z-index: 45; height: 48px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
  html.js:has(.docs-bar) { scroll-padding-top: calc(var(--header-h) + 64px); }
}
@media (max-width: 1023px) {
  html.js .docs-sidebar { display: none; }
  html.js .docs-header .breadcrumbs { display: none; } /* the BreadcrumbList JSON-LD stays */
  html.js .docs-layout { padding-top: 20px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  html.js .docs-sidebar { top: calc(var(--header-h) + 72px); max-height: calc(100vh - var(--header-h) - 96px); }
  .docs-bar .docs-bar-search { display: none; }
}
.docs-bar-inner { display: flex; align-items: center; gap: 4px; height: 100%; }
.docs-bar-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; margin-left: -8px; padding: 0 8px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font-size: 14.5px; line-height: 1.3; text-align: left;
}
.docs-bar-btn .icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.docs-bar-page { flex: none; max-width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.docs-bar-sec { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.docs-bar-sec::before { content: "\203A"; margin-right: 8px; color: var(--faint); }
.docs-bar-btn .icon-chev { margin-left: auto; transition: transform var(--t) var(--ease); }
.docs-bar-btn[aria-expanded="true"] .icon-chev { transform: rotate(180deg); }
.docs-bar-search, .docs-sheet-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2);
}
.docs-sheet-close { margin-right: -10px; }
.docs-bar-search .icon, .docs-sheet-close .icon { width: 20px; height: 20px; }
@media (hover: hover) { .docs-bar-btn:hover, .docs-bar-search:hover, .docs-sheet-close:hover { background: var(--hover); } }
.docs-bar-btn:focus-visible, .docs-bar-search:focus-visible, .docs-sheet-close:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.docs-sheet {
  position: fixed; inset: 0 0 auto; width: 100%; max-width: none; max-height: calc(100dvh - 48px); margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain;
}
.docs-sheet::backdrop { background: var(--scrim); }
.docs-sheet-inner { padding-block: 8px 20px; }
/* Top-aligned, so the close button stays beside the field when search results open below it */
.docs-sheet-head { display: flex; align-items: flex-start; gap: 8px; min-height: var(--header-h); padding-top: 6px; }
.docs-sheet-head .docs-search { flex: 1; min-width: 0; }
.docs-sheet-tabs { margin-top: 8px; }
.docs-sheet-tabs > .tab-list { display: flex; width: 100%; margin-bottom: 8px; }
.docs-sheet-tabs .tab { flex: 1; justify-content: center; min-height: 40px; }
.docs-sheet .toc a { font-size: 15px; padding-block: 11px; }
.docs-sheet .toc ol ol a { font-size: 14.5px; }
.docs-sheet-nav { display: block; padding: 4px 0; border: 0; background: none; }
.docs-sheet-nav .docs-nav-link { min-height: 44px; font-size: 15px; }
.docs-sheet-nav .docs-nav-group + .docs-nav-group { margin-top: 14px; }
.docs-sheet .search-results { position: static; max-height: none; margin-top: 8px; padding: 0; border: 0; background: none; box-shadow: none; }
.docs-sheet:has(.search-input:not(:placeholder-shown)) .docs-sheet-tabs { display: none; }
@media (prefers-reduced-motion: no-preference) { .docs-sheet[open] { animation: docs-sheet-in .2s var(--ease); } }
@keyframes docs-sheet-in { from { transform: translateY(-8px); opacity: 0; } }
@media (min-width: 768px) { .docs-sheet { max-height: min(640px, calc(100dvh - 48px)); } }
@media (min-width: 1024px) {
  .docs-sheet-head, .docs-sheet-tabs > .tab-list { display: none; }
  .docs-sheet-inner { padding-top: 16px; }
}
html.docs-sheet-open { overflow: hidden; }
@media print { .docs-bar, .docs-sheet { display: none !important; } }

/* End of page: related chips, then a two-column pager ------------------------------------------- */
.docs-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.docs-pager-next { grid-column: 2; }
.docs-pager-link { padding: 10px 12px; gap: 2px; }
.docs-pager-dir { font-size: 12.5px; }
.docs-pager-title { font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .docs-pager-link { padding: 16px 20px; } .docs-pager-title { font-size: 16px; } }
.docs-related { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 32px; }
.docs-related + .docs-pager { margin-top: 20px; }
.docs-foot { margin-top: 32px; }
.docs-related > span { width: 100%; margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.docs-related a, .docs-chips a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.25; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
@media (pointer: coarse) { .docs-related a, .docs-chips a { min-height: 44px; } }
@media (hover: hover) { .docs-related a:hover, .docs-chips a:hover { border-color: var(--accent-line); background: var(--card); } }
.docs-related a:focus-visible, .docs-chips a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Jump chips: one pattern for in-page indexes (Reports tabs, Recommendations categories, FAQ groups) */
.docs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prose > .docs-chips { margin-top: 1.2em; }
.docs-chips a span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* "Show more" blocks: the shared details.disclosure, with its body spaced like prose */
.docs-article details.disclosure { margin-top: 1em; }
.docs-article details.disclosure > summary + * { margin-top: 8px; }
.docs-article details.disclosure > * + * { margin-top: 12px; }
.prose details.disclosure > ul, .prose details.disclosure > ol { margin-top: 8px; }

/* Compact rows: tables that stay one bordered panel on phones, no repeated labels (copy of .dd-rows) */
@media (max-width: 767px) {
  .docs-rows > .table { min-width: 0; display: block; }
  .docs-rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .docs-rows tbody { display: block; }
  .docs-rows .table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .docs-rows .table tbody tr:last-child { border-bottom: 0; }
  .docs-rows .table th, .docs-rows .table td { display: block; padding: 0; border: 0; }
  .docs-rows .table td { font-size: 14px; }
  .docs-rows .table code { white-space: normal; overflow-wrap: anywhere; }
  .docs-rows-inline td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .docs-rows-badge .table tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .docs-rows-badge .table tr > :nth-child(2) { grid-column: 2; grid-row: 1; justify-self: end; }
  .docs-rows-badge .table tr > :nth-child(n+3) { grid-column: 1 / -1; }
}

/* Definition lists read inline on phones ("Format. sk_..."); glance boxes and code values stay stacked */
@media (max-width: 767px) {
  .docs-def:not(.dd-glance):not(.docs-def-stack) > div { display: block; padding: 10px 14px; }
  .docs-def:not(.dd-glance):not(.docs-def-stack) dt { display: inline; margin: 0 6px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
  .docs-def:not(.dd-glance):not(.docs-def-stack) dt::after { content: "."; }
  .docs-def:not(.dd-glance):not(.docs-def-stack) dd { display: inline; font-size: 15px; }
  .docs-def-stack dd code { white-space: normal; overflow-wrap: anywhere; }
}

/* Swipe rows for multi-card figures (shared .snap-row below 768; pages set the card width) */
.docs-setup.snap-row, .docs-flow.snap-row { --snap-w: 84%; }
.docs-examples.snap-row { --snap-w: 80%; }
.docs-frame > .snap-row { --snap-bleed: clamp(16px, 3vw, 28px); }
@media (max-width: 767px) {
  .snap-row:is(.docs-setup, .docs-examples, .docs-flow) { grid-template-columns: none; }
  .docs-setup.snap-row { align-items: stretch; }
  .prose > .docs-examples.snap-row { margin-top: 1.2em; }
  .snap-row > .docs-example { align-content: start; }
}

/* Code on phones: tighter blocks (wrapping itself is shared in site.css) */
@media (max-width: 767px) {
  .docs-article .code-block pre { padding: 12px 14px 14px; font-size: 12.5px; line-height: 1.65; }
  .docs-example-m { overflow-wrap: anywhere; white-space: pre-wrap; }
}
/* Two ways to run the same thing (curl / GitHub Actions): pill tabs, each panel one code block */
.code-tabs { margin-top: 1.2em; }
.code-tabs > .tab-list { margin-bottom: 10px; }
.code-tabs > .tab-panel > .code-block { margin: 0; }

/* Site audit check illustration: capped on phones, with a fade (the mock files are shared, so CSS only) */
@media (min-width: 768px) {
  .docs-frame:has(> [data-sa-mock="check"]) {
    max-height: 620px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent); mask-image: linear-gradient(to bottom, #000 85%, transparent);
  }
}
@media (max-width: 767px) {
  .docs-frame:has(> [data-sa-mock="check"]) {
    max-height: 600px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent);
  }
}

/* Phones: tighter task steps, and the setup illustration without the rail's sublines */
@media (max-width: 767px) {
  .docs-steps > li { padding-bottom: 18px; }
  .docs-steps > li::after { bottom: 4px; }
  .docs-setup .docs-rail i { display: none; }
  .docs-setup .docs-rail li { padding-bottom: 8px; align-items: center; }
  .docs-setup .docs-rail li::after { top: 27px; }
  .docs-setup .docs-rail-n { grid-row: auto; }
  .docs-setup-card { padding: 14px; }
}

/* Compact rows, pill variant: the short last cell (a limit or a plan) sits top right as a pill */
@media (max-width: 767px) {
  .docs-rows-pill .table tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .docs-rows-pill .table tr > :first-child { grid-column: 1; grid-row: 1; align-self: center; }
  .docs-rows-pill .table tr > :last-child {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: start;
    display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  }
  .docs-rows-pill .table tr > :not(:first-child):not(:last-child) { grid-column: 1 / -1; grid-row: 2; }
  .docs-rows-pill .table td[data-label]::before { display: none; }
  .docs-rows.docs-table-keep .table th, .docs-rows.docs-table-keep .table td { padding: 0; }
}
/* From 768 the table is a table again: keep the short last cell ("Up to 10", "Free, Growth") on one line */
@media (min-width: 768px) { .docs-rows-pill .table tr > td:last-child { white-space: nowrap; } }
/* The object model as a swipe row: no chevrons between the cards */
@media (max-width: 767px) {
  .docs-flow.snap-row { gap: 10px; }
  .docs-flow.snap-row > .docs-flow-node + .docs-flow-node::before { display: none; }
  .docs-frame > .docs-flow.snap-row { align-items: stretch; }
}

/* Phones: docs sections sit a little closer, and short-cell tables keep their last column on one line */
@media (max-width: 767px) {
  .docs-article .prose > h2 { margin-top: 1.8em; }
  .docs-article .prose > h3 { margin-top: 1.6em; }
  .prose > .docs-metric-meta { margin-top: .5em; }
  .prose > .docs-metric-meta + p { margin-top: .7em; }
  .docs-table-tight.docs-table-keep .table td:last-child { white-space: nowrap; }
  .docs-table-tight.docs-table-keep .table { font-size: 13.5px; }
}
@media (min-width: 768px) { .docs-def-judged > div { grid-template-columns: 148px minmax(0, 1fr); } }
@media (max-width: 359px) { .docs-pager-link { padding-inline: 10px; } .docs-pager-title { font-size: 13.5px; } }