/* ═══════════════════════════════════════════════
   panes.css — The 3-pane template: sidebar · live demo · reading column.
   Used by Capabilities and Ecosystem. Overview topics drop the demo
   column (.pane.no-demo). Colours come from the .sec-* classes in
   navigation.css; behaviour from panes.js.
   ═══════════════════════════════════════════════ */

.pane {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 96px;
  display: grid;
  grid-template-columns: 248px minmax(340px, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.pane.no-demo { grid-template-columns: 248px minmax(0, 1fr); }
.pane.no-demo .pane-demo { display: none; }
.pane-side, .pane-demo { position: sticky; top: 88px; }
.pane-side { display: grid; gap: 16px; }
.pane-read { min-width: 0; max-width: 760px; }
.pane.no-demo .pane-read { max-width: 900px; }

@media (max-width: 1240px) {
  .pane, .pane.no-demo { grid-template-columns: 220px minmax(0, 1fr); }
  .pane-side { grid-row: span 2; }
  .pane-demo { position: static; grid-column: 2; }
  .pane-read { grid-column: 2; }
}
@media (max-width: 1080px) {
  .pane, .pane.no-demo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pane-side { position: static; grid-row: auto; }
  .pane-demo, .pane-read { grid-column: 1; }
}
@media (max-width: 600px) {
  .pane { width: calc(100% - 28px); padding-top: 20px; }
}

/* ── Sidebar: filter + collapsible groups ── */
.pane-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid #B7C1D6;
}
.pane-filter:focus-within { border-color: #2D5BFF; box-shadow: 0 0 0 3px rgba(45,91,255,0.15); }
.pane-filter span { color: #59647D; font: 700 15px Arial, Helvetica, sans-serif; }
.pane-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #0F1E4D; font: 400 15px Arial, Helvetica, sans-serif; }
.pane-nav { display: grid; gap: 2px; }
.pane-nav-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: #59647D;
  cursor: pointer;
  text-align: left;
  font: 500 12.5px var(--font-code);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pane-nav-head .sec-dot { width: 8px; height: 8px; }
.pane-nav-head[aria-expanded='true'] { color: #0F1E4D; }
.pane-nav-items { margin: 2px 0 10px 9px; border-left: 1px solid rgba(15,30,77,0.3); }
.pane-nav-head[aria-expanded='false'] + .pane-nav-items { display: none; }
.pane-nav-items a {
  display: block;
  margin-left: -1px;
  padding: 7px 14px;
  border-left: 2px solid transparent;
  color: #0F1E4D;
  font: 400 14px var(--font-code);
  text-decoration: none;
  transition: color .15s;
}
.pane-nav-items a:hover { color: var(--c); }
.pane-nav-items a[aria-current='page'] { border-left-color: var(--c); color: var(--c); font-weight: 700; }
.pane-nav-items a[hidden] { display: none; }

/* ── Demo panel ── */
.demo-panel { background: var(--c-tint); border: 1px solid rgba(15,30,77,0.14); }
.demo-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid rgba(15,30,77,0.14);
}
.demo-panel-title { margin-right: auto; color: var(--c); font: 500 13px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.demo-act {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--c);
  cursor: pointer;
  font: 500 12px var(--font-code);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.demo-act:hover { background: rgba(255,255,255,0.7); }
.demo-act.is-primary { border-color: var(--c); background: var(--c); color: #FFFFFF; }
.demo-act.is-primary:hover { background: #FFFFFF; color: var(--c); }
.demo-act:disabled { cursor: wait; opacity: .6; }
.demo-act[hidden] { display: none; }
.demo-panel-body { padding: 20px; }
.demo-panel-status { padding: 10px 20px; border-top: 1px solid rgba(15,30,77,0.14); color: var(--c); font: 400 12px var(--font-code); }
.demo-label { margin: 0 0 10px; color: #59647D; font: 400 11px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.demo-label + .demo-label, * + .demo-label { margin-top: 20px; }
.demo-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 12px;
  border: 1px dashed rgba(15,30,77,0.3);
  color: #59647D;
  text-align: center;
  font: 400 12px var(--font-code);
}
.demo-print {
  margin: 0 0 12px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(15,30,77,0.14);
  box-shadow: 0 12px 26px -16px rgba(15,30,77,0.45);
  animation: demo-print-in .5s cubic-bezier(.2,.9,.3,1);
}
.demo-print img, .demo-print canvas, .demo-print svg { display: block; max-width: 100%; height: auto; }
.demo-print pre { margin: 0; max-height: 240px; overflow: auto; color: #0F1E4D; font: 10px/1.15 var(--font-code); white-space: pre; }
.demo-print figcaption { margin-top: 6px; color: #59647D; font: 400 10.5px var(--font-code); }
.demo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-pair .demo-print { margin: 0; }
.demo-note { margin: 12px 0 0; color: #59647D; font: 400 13px/1.5 Arial, Helvetica, sans-serif; }
.demo-note:empty { display: none; }
.demo-map { position: relative; }
.demo-map span { position: absolute; box-sizing: border-box; border: 2px solid #E63946; }
.demo-map b { position: absolute; left: -2px; top: -15px; padding: 0 4px; background: #E63946; color: #FFFFFF; font: 700 10px Arial, Helvetica, sans-serif; }
@keyframes demo-print-in { from { opacity: 0; transform: translateY(-20px); } }
@media (prefers-reduced-motion: reduce) { .demo-print { animation: none; } }

/* The capture target every demo shares. */
.sample-card {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #D6DCE7;
  color: #0F1E4D;
  font: 14px Arial, sans-serif;
  line-height: normal;
}
.sample-card-kicker { color: #59647D; font: 10px ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.sample-card-title { margin-top: 4px; font: 700 21px/1.2 Arial; outline: none; }
.sample-card-bars { display: flex; gap: 4px; align-items: flex-end; height: 64px; margin-top: 14px; }
.sample-card-bars i { flex: 1; background: #C9D5FF; }
.sample-card-bars i:last-child { background: #2D5BFF; }
.sample-card-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.sample-card-total b { font: 700 26px Arial; }
.sample-card-total span { color: #1E9F6E; font-size: 12px; }
.sample-card label { display: grid; gap: 4px; margin-top: 12px; color: #59647D; font-size: 12px; }
.sample-card input { padding: 7px 8px; border: 1px solid #B7C1D6; color: #0F1E4D; font: 13px Arial; }
.sample-card-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.sample-card-actions button { padding: 8px 14px; border: 0; background: #2D5BFF; color: #FFFFFF; font: 700 13px Arial; }
.sample-card-actions a { color: #2D5BFF; font-size: 13px; }

/* ── Reading column ── */
.pane-topic[hidden] { display: none; }
.doc-head { margin-bottom: 28px; }
.doc-head-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.doc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--c); font: 400 13px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.doc-crumbs span[aria-hidden] { color: rgba(15,30,77,0.3); }
.doc-meta { color: #59647D; font: 400 12px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.doc-head h1 { color: var(--c); font: 700 clamp(40px, 4.4vw, 60px)/1.04 Arial, Helvetica, sans-serif; letter-spacing: -.04em; overflow-wrap: anywhere; }
.doc-lead { max-width: 64ch; margin-top: 20px; font: 400 19px/1.65 Arial, Helvetica, sans-serif; text-wrap: pretty; }
.pane-read h2 { margin: 48px 0 14px; font: 700 26px/1.2 Arial, Helvetica, sans-serif; letter-spacing: -.025em; }
.pane-read > .pane-topic > p, .pane-para { max-width: 68ch; margin: 0 0 16px; font: 400 16px/1.7 Arial, Helvetica, sans-serif; }
.pane-read p a, .pane-read td a { color: #1D3FD8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pane-read p a:hover, .pane-read td a:hover { color: #2D5BFF; text-decoration-thickness: 2px; }
.pane-read code { padding: 2px 6px; background: rgba(45,91,255,0.08); color: #1D3FD8; font: 14px var(--font-code); }
.provided-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.provided-by > span:first-child:not(.topic-sub) { color: #59647D; font: 400 11px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.topic-sub { color: #59647D; font: 400 15px Arial, Helvetica, sans-serif; }

.tag { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid rgba(15,30,77,0.3); background: #FFFFFF; color: #59647D; font: 700 11px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.tag-core { color: #2D5BFF; background: #EEF3FF; border-color: rgba(45,91,255,0.35); }
.tag-plugin { color: #8A4F00; background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.55); }
.tag-experimental { color: #E63946; background: rgba(230,57,70,0.12); border-color: rgba(230,57,70,0.4); }

.pane-code { min-width: 0; background: #0F1E4D; }
.pane-code-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid rgba(217,226,247,0.16); color: #B9C5E4; font: 700 12px Arial, Helvetica, sans-serif; }
.pane-code-bar button { padding: 0; border: 0; background: none; color: #9EB3FF; cursor: pointer; font: inherit; }
.pane-code pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #D9E2F7; font: 13.5px/1.7 var(--font-code); }
.pane-read .pane-code code { padding: 0; background: none; color: inherit; font: inherit; }

.callout { margin-top: 24px; padding: 20px 24px; background: #EEF3FF; border: 1px solid rgba(15,30,77,0.14); font: 400 15.5px/1.65 Arial, Helvetica, sans-serif; }
.callout-label { margin-bottom: 8px; color: #2D5BFF; font: 800 11px Arial, Helvetica, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.pane-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 22px;
  border: 1px solid #0F1E4D;
  color: #0F1E4D;
  font: 700 15px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.pane-button:hover { border-color: #2D5BFF; color: #2D5BFF; }
.pane-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(15,30,77,0.14); border: 1px solid rgba(15,30,77,0.14); }
.index-grid a { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 22px; background: #FFFFFF; color: #0F1E4D; text-decoration: none; transition: background .15s, color .15s; }
.index-grid a:hover { background: var(--c-tint); color: var(--c); }
.index-grid .sec-dot { width: 10px; height: 10px; transition: transform .15s; }
.index-grid a:hover .sec-dot { transform: scale(1.35); }
.index-grid-label { font: 500 14px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.index-grid-meta { margin-left: auto; color: #59647D; font: 400 12px var(--font-code); }
.index-grid a:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 600px) { .index-grid { grid-template-columns: minmax(0, 1fr); } .index-grid a:last-child:nth-child(odd) { grid-column: auto; } }

.compare-table { overflow-x: auto; border: 1px solid rgba(15,30,77,0.14); background: #FFFFFF; }
.compare-table table { width: 100%; border-collapse: collapse; font: 400 14.5px/1.5 Arial, Helvetica, sans-serif; }
.compare-table th { padding: 12px 16px; background: #0F1E4D; color: #FFFFFF; text-align: left; white-space: nowrap; font: 700 11px Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.compare-table td { padding: 12px 16px; border-top: 1px solid rgba(15,30,77,0.14); vertical-align: top; }
.compare-table td:first-child { font-weight: 700; }

.pane-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(15,30,77,0.14); border: 1px solid rgba(15,30,77,0.14); list-style: none; }
.pane-steps li { padding: 20px; background: #FFFFFF; }
.pane-steps h3 { margin: 0 0 10px; color: var(--c); font: 400 11px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.pane-steps p { margin: 0; font: 400 15px/1.6 Arial, Helvetica, sans-serif; }
@media (max-width: 760px) { .pane-steps { grid-template-columns: minmax(0, 1fr); } }

.pipeline { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; }
.pipeline-box { min-width: 0; padding: 24px; background: #FFFFFF; border: 1px solid rgba(15,30,77,0.14); }
.pipeline-box.is-engine { border: 2px solid #2D5BFF; }
.pipeline-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #59647D; font: 400 12px var(--font-code); letter-spacing: .06em; text-transform: uppercase; }
.pipeline-box.is-engine .pipeline-eyebrow { color: var(--sec-capture); }
.pipeline-box strong { display: block; font: 700 21px/1.3 Arial, Helvetica, sans-serif; letter-spacing: -.02em; }
.pipeline-box p { margin: 14px 0 0; color: #59647D; font: 400 14px/1.6 Arial, Helvetica, sans-serif; }
.pipeline-link { display: flex; align-items: center; align-self: center; }
.pipeline-link i { flex: 1; height: 1px; background: rgba(15,30,77,0.3); }
.pipeline-link i + i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(15,30,77,0.3); background: #FFFFFF; }
.pipeline ul { list-style: none; }
.pipeline li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid rgba(15,30,77,0.14); font: 400 14px Arial, Helvetica, sans-serif; }
.pipeline li small { margin-left: auto; color: #59647D; font: 400 11px var(--font-code); }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: minmax(0, 1fr); }
  .pipeline-link { height: 28px; justify-content: center; }
  .pipeline-link i:first-child { flex: none; width: 1px; height: 100%; }
  .pipeline-link i + i { display: none; }
}

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(15,30,77,0.14); }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid rgba(15,30,77,0.14); background: #FFFFFF; color: #0F1E4D; text-decoration: none; transition: border-color .15s; }
.pager a + a, .pager a.is-next { grid-column: 2; text-align: right; }
.pager a:hover { border-color: #2D5BFF; }
.pager span { color: #59647D; font: 400 11px var(--font-code); letter-spacing: .08em; text-transform: uppercase; }
.pager strong { font: 700 17px Arial, Helvetica, sans-serif; transition: color .15s; }
.pager a:hover strong { color: #2D5BFF; }
.pane-list { max-width: 68ch; margin: 0 0 16px; padding-left: 20px; font: 400 16px/1.7 Arial, Helvetica, sans-serif; }
.pane-list li { margin-bottom: 6px; padding-left: 4px; }
.pane-list li::marker { color: var(--c-dot); }

/* ── Converted content pages (scripts/docs-site/sections.py) ── */
.doc-links { margin-top: 18px; }
.pane-content > :first-child { margin-top: 0; }
.pane-content .prose h2 { font-weight: 700; font-size: 26px; letter-spacing: -.025em; }
.pane-content .cta-section { margin-top: 48px; }
.pane-read pre code { padding: 0; background: none; color: inherit; font: inherit; }
.pane-content pre:not([class]):not(.code-block pre):not(.pane-code pre) { margin: 0 0 16px; padding: 16px 20px; overflow-x: auto; background: #0F1E4D; color: #D9E2F7; font: 13.5px/1.7 var(--font-code); }