/* BMOS secondary pages: /pricing /compare /tools /roadmap /merchants /docs (owner: Workstream E).
   Loaded after nav.css on these pages only. Tokens only: no hex, scale font-sizes, 3 radii,
   one shadow (floating UI only). Rules: /DESIGN.md. Each page namespaces under its body class. */

/* ── Shared ─────────────────────────────────────────── */
.pg main { padding-bottom: var(--s-9); }
/* own the rhythm here: sections.css pads every main > section; these pages space via .pg-sec */
.pg main > section { padding-block: 0; }
.pg main > section.pg-sec { padding-top: var(--section-y); }
.pg-head { padding-top: var(--s-8); }
.pg-head h1 { max-width: 820px; }
.pg-head .pg-intro { margin-top: var(--s-4); max-width: 620px; font-size: var(--t-18); color: var(--n6); }
.pg-sec { padding-top: var(--section-y); }
.pg-sec > h2 { font-size: var(--t-40); }
.pg-sec .pg-sub { margin-top: var(--s-3); max-width: 620px; color: var(--n6); }
.pg-more { margin-top: var(--s-5); font-size: var(--t-16); color: var(--n6); }
.pg-more a { font-weight: 600; }
.pg .final { margin-top: var(--section-y); }

/* Hairline FAQ (details/summary) */
.pg-faq { margin-top: var(--s-5); max-width: 760px; border-top: 1px solid var(--n2); }
.pg-faq details { border-bottom: 1px solid var(--n2); }
.pg-faq summary {
  display: flex; align-items: center; gap: var(--s-4); min-height: 60px; padding: var(--s-3) 0;
  font-size: var(--t-16); font-weight: 700; cursor: pointer; list-style: none;
  border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary:hover { color: var(--brand-ink); }
.pg-faq summary::after {
  content: ''; flex-shrink: 0; margin-left: auto; width: 10px; height: 10px;
  border-right: 1.5px solid var(--n5); border-bottom: 1.5px solid var(--n5);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dur) var(--ease);
}
.pg-faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.pg-faq details p { padding: 0 var(--s-7) var(--s-5) 0; color: var(--n6); max-width: 620px; }

@media (max-width: 860px) {
  .pg-head { padding-top: var(--s-7); }
  .pg-head h1 { font-size: var(--t-40); }
  .pg-head .pg-intro { font-size: var(--t-16); }
  .pg-sec > h2 { font-size: var(--t-28); }
  .pg-faq details p { padding-right: 0; }
}

/* ── /pricing ───────────────────────────────────────── */
.pg-pricing .pr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s-8); align-items: start; }
.pg-pricing .pr-top .pg-head { padding-top: var(--s-9); }
.pg-pricing .pr-plan { margin-top: var(--s-8); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.pg-pricing .pr-name { font-size: var(--t-14); font-weight: 500; color: var(--brand-ink); }
.pg-pricing .pr-price { display: flex; align-items: baseline; gap: var(--s-2); }
.pg-pricing .pr-price b { font-size: var(--t-56); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--display-leading); }
.pg-pricing .pr-price span { font-size: var(--t-14); color: var(--n5); }
.pg-pricing .pr-line { color: var(--n6); }
.pg-pricing .pr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n2); }
.pg-pricing .pr-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--n2); font-size: var(--t-14); color: var(--n6); }
.pg-pricing .pr-list li b { color: var(--n9); font-weight: 600; text-align: right; }
.pg-pricing .pr-plan .btn { margin-top: var(--s-2); }
.pg-pricing .pr-test { font-size: var(--t-12); color: var(--n5); text-align: center; }
.pg-pricing .pr-later { margin-top: var(--s-4); padding-left: var(--s-1); font-size: var(--t-14); color: var(--n6); }
.pg-pricing .pr-later b { color: var(--n9); font-weight: 600; }

/* two-column limits table */
.pg-pricing .pr-lim { margin-top: var(--s-5); width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.pg-pricing .pr-lim th, .pg-pricing .pr-lim td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--n2); }
.pg-pricing .pr-lim thead th { font-size: var(--t-12); font-weight: 500; color: var(--n5); padding-top: 0; }
.pg-pricing .pr-lim tbody th { width: 30%; font-weight: 700; color: var(--n9); }
.pg-pricing .pr-lim td { width: 35%; color: var(--n6); }
.pg-pricing .pr-lim td.pr-now { color: var(--n9); }

/* Help from Mike: quiet list */
.pg-pricing .pr-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-7); align-items: start; }
.pg-pricing .pr-help h2 { font-size: var(--t-28); }
.pg-pricing .pr-help .pg-sub { margin-top: var(--s-3); }
.pg-pricing .pr-help .pr-svc-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); font-size: var(--t-14); font-weight: 600; }
.pg-pricing .pr-svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n2); }
.pg-pricing .pr-svc li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--n2); font-size: var(--t-14); }
.pg-pricing .pr-svc b { color: var(--n9); }
.pg-pricing .pr-svc span { color: var(--n6); }

@media (max-width: 860px) {
  .pg-pricing .pr-top { grid-template-columns: 1fr; gap: 0; }
  .pg-pricing .pr-top .pg-head { padding-top: var(--s-7); }
  .pg-pricing .pr-plan { margin-top: var(--s-6); padding: var(--s-5); }
  .pg-pricing .pr-price b { font-size: var(--t-40); }
  .pg-pricing .pr-lim thead { display: none; }
  .pg-pricing .pr-lim, .pg-pricing .pr-lim tbody, .pg-pricing .pr-lim tr { display: block; width: auto; }
  .pg-pricing .pr-lim tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--n2); }
  .pg-pricing .pr-lim tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; }
  .pg-pricing .pr-lim td { width: auto; padding: 0; border: 0; }
  .pg-pricing .pr-lim td::before { content: attr(data-l); display: block; font-size: var(--t-12); font-weight: 500; color: var(--n5); }
  .pg-pricing .pr-help { grid-template-columns: 1fr; gap: var(--s-5); }
  .pg-pricing .pr-svc li { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ── /compare ───────────────────────────────────────── */
.pg-compare .cm-tbl { margin-top: var(--s-7); width: 100%; border-collapse: collapse; font-size: var(--t-14); table-layout: fixed; }
.pg-compare .cm-tbl th, .pg-compare .cm-tbl td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--n2); }
.pg-compare .cm-tbl thead th { font-size: var(--t-14); font-weight: 700; color: var(--n9); padding-top: 0; border-bottom-color: var(--n3); }
.pg-compare .cm-tbl thead th.cm-us { color: var(--brand-ink); }
.pg-compare .cm-tbl thead th:first-child { width: 20%; }
.pg-compare .cm-tbl tbody th { font-weight: 700; color: var(--n9); }
.pg-compare .cm-tbl td.cm-us { color: var(--n9); }
.pg-compare .cm-v { display: flex; gap: var(--s-2); color: var(--n6); }
.pg-compare .cm-us .cm-v { color: var(--n9); }
.pg-compare .cm-mk { flex-shrink: 0; width: 16px; font-weight: 700; text-align: center; }
.pg-compare .cm-y .cm-mk { color: var(--ok); }
.pg-compare .cm-p .cm-mk { color: var(--warn); }
.pg-compare .cm-n .cm-mk { color: var(--bad); }
.pg-compare .cm-src { margin-top: var(--s-4); font-size: var(--t-12); color: var(--n5); max-width: 760px; }

@media (max-width: 860px) {
  .pg-compare .cm-tbl { margin-top: var(--s-6); table-layout: auto; }
  .pg-compare .cm-tbl thead { display: none; }
  .pg-compare .cm-tbl, .pg-compare .cm-tbl tbody, .pg-compare .cm-tbl tr, .pg-compare .cm-tbl th, .pg-compare .cm-tbl td { display: block; width: auto; }
  .pg-compare .cm-tbl tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--n2); }
  .pg-compare .cm-tbl tbody th { padding: 0 0 var(--s-2); border: 0; font-size: var(--t-16); }
  .pg-compare .cm-tbl td { padding: var(--s-2) 0; border: 0; }
  .pg-compare .cm-tbl td::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: var(--t-12); font-weight: 500; color: var(--n5); }
  .pg-compare .cm-tbl td.cm-us::before { color: var(--brand-ink); }
}

/* ── /tools ─────────────────────────────────────────── */
.pg-tools .tl-card { margin-top: var(--s-7); padding: var(--s-6); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.pg-tools .tl-card h2 { font-size: var(--t-22); }
.pg-tools .tl-in { display: flex; flex-direction: column; gap: var(--s-4); }
.pg-tools .tl-in .urlform { max-width: none; }
.pg-tools .tl-in .err { margin-top: var(--s-1); }
.pg-tools .tl-explain { font-size: var(--t-14); color: var(--n6); }
.pg-tools .tl-res { display: flex; gap: var(--s-5); align-items: flex-start; padding-left: var(--s-7); border-left: 1px solid var(--n2); min-height: 132px; }
.pg-tools .tl-ring { position: relative; flex-shrink: 0; width: 120px; height: 120px; }
.pg-tools .tl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.pg-tools .tl-ring circle { fill: none; stroke-width: 8; }
.pg-tools .tl-ring .tl-bg { stroke: var(--n2); }
.pg-tools .tl-ring .tl-fg { stroke: var(--brand-soft); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 900ms var(--ease), stroke var(--dur) var(--ease); }
.pg-tools .tl-ring.is-ok .tl-fg { stroke: var(--ok); }
.pg-tools .tl-ring.is-mid .tl-fg { stroke: var(--brand-soft); }
.pg-tools .tl-ring.is-low .tl-fg { stroke: var(--bad); }
.pg-tools .tl-ring.is-busy svg { animation: tl-spin 1.2s linear infinite; }
.pg-tools .tl-ring.is-busy .tl-fg { stroke-dashoffset: 245; }
@keyframes tl-spin { to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .pg-tools .tl-ring.is-busy svg { animation: none; } }
.pg-tools .tl-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pg-tools .tl-n b { font-family: var(--mono); font-size: var(--t-28); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-tools .tl-n span { margin-top: var(--s-1); font-size: var(--t-12); color: var(--n5); }
.pg-tools .tl-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-2); }
.pg-tools .tl-status { font-weight: 600; color: var(--n9); }
.pg-tools .tl-fixes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--n2); }
.pg-tools .tl-fixes:empty { display: none; }
.pg-tools .tl-fixes li { padding: var(--s-2) 0; border-bottom: 1px solid var(--n2); font-size: var(--t-14); color: var(--n6); }
.pg-tools .tl-fixes li b { color: var(--n9); }
.pg-tools .tl-full { font-size: var(--t-14); font-weight: 600; }

@media (max-width: 860px) {
  .pg-tools .tl-card { margin-top: var(--s-6); padding: var(--s-5); grid-template-columns: 1fr; gap: var(--s-5); }
  .pg-tools .tl-res { padding-left: 0; padding-top: var(--s-5); border-left: 0; border-top: 1px solid var(--n2); min-height: 0; }
  .pg-tools .tl-ring { width: 96px; height: 96px; }
  .pg-tools .tl-n b { font-size: var(--t-22); }
}

/* ── /roadmap ───────────────────────────────────────── */
.pg-roadmap .rd-list { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid var(--n2); }
.pg-roadmap .rd-list li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) 120px; gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--n2); scroll-margin-top: 80px; }
.pg-roadmap .rd-list h2, .pg-roadmap .rd-list h3 { font-size: var(--t-18); }
.pg-roadmap .rd-list p { color: var(--n6); }
.pg-roadmap .rd-st { font-size: var(--t-14); font-weight: 500; color: var(--n5); text-align: right; }
.pg-roadmap .rd-st.is-now { color: var(--brand-ink); }
.pg-roadmap .rd-group { margin-top: var(--s-8); font-size: var(--t-22); }
.pg-roadmap .rd-group + .pg-sub { margin-top: var(--s-2); color: var(--n6); }
.pg-roadmap .rd-group ~ .rd-list { margin-top: var(--s-5); }

/* the one dark block: a static .agent lookup */
.pg-roadmap .rd-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-7); align-items: center; }
.pg-roadmap .rd-demo h2 { font-size: var(--t-28); }
.pg-roadmap .rd-demo .pg-sub { margin-top: var(--s-3); }
.pg-roadmap .rd-term { background: var(--n9); color: var(--on-dark); border-radius: var(--r-md); overflow: hidden; font-family: var(--mono); font-size: var(--t-12); }
.pg-roadmap .rd-th { display: flex; align-items: center; gap: 6px; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--n8); color: var(--n4); }
.pg-roadmap .rd-th i { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--n7); }
.pg-roadmap .rd-th span { margin-left: var(--s-2); }
.pg-roadmap .rd-tb { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); overflow-x: auto; }
.pg-roadmap .rd-tb p { overflow-wrap: anywhere; }
.pg-roadmap .rd-p { color: var(--brand-soft); }
.pg-roadmap .rd-cm { color: var(--n4); }
.pg-roadmap .rd-rt { color: var(--n4); padding: 0 var(--s-2); }
.pg-roadmap .rd-ok { color: var(--ok-line); }
.pg-roadmap .rd-tb a { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--n7); }
.pg-roadmap .rd-tb a:hover { color: var(--white); }
.pg-roadmap .rd-gap { margin-top: var(--s-3); }

@media (max-width: 860px) {
  .pg-roadmap .rd-list { margin-top: var(--s-6); }
  .pg-roadmap .rd-list li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); padding: var(--s-4) 0; }
  .pg-roadmap .rd-list li > p { grid-column: 1 / -1; grid-row: 2; }
  .pg-roadmap .rd-st { grid-column: 2; grid-row: 1; }
  .pg-roadmap .rd-group { margin-top: var(--s-7); }
  .pg-roadmap .rd-demo { grid-template-columns: 1fr; gap: var(--s-5); }
  .pg-roadmap .rd-demo h2 { font-size: var(--t-22); }
}

/* ── /merchants ─────────────────────────────────────── */
.pg-merchants .mr-count { margin-top: var(--s-7); font-size: var(--t-14); color: var(--n5); }
.pg-merchants .mr-grid { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.pg-merchants .mr-c { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pg-merchants .mr-img { aspect-ratio: 4 / 3; background: var(--white); border-bottom: 1px solid var(--n2); padding: var(--s-4); display: flex; align-items: center; justify-content: center; }
.pg-merchants .mr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pg-merchants .mr-img.is-empty { background: var(--n1); }
.pg-merchants .mr-b { flex: 1; padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.pg-merchants .mr-b h2 { font-size: var(--t-22); }
.pg-merchants .mr-meta { font-size: var(--t-14); color: var(--n6); }
.pg-merchants .mr-n { display: flex; gap: var(--s-6); margin: var(--s-3) 0 var(--s-2); }
.pg-merchants .mr-n div { display: flex; flex-direction: column; }
.pg-merchants .mr-n dt { font-size: var(--t-12); font-weight: 500; color: var(--n5); }
.pg-merchants .mr-n dd { margin: 0; font-family: var(--mono); font-size: var(--t-22); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-merchants .mr-a { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.pg-merchants .mr-empty { padding: var(--s-6) 0; border-top: 1px solid var(--n2); border-bottom: 1px solid var(--n2); color: var(--n6); }
.pg-merchants .mr-add { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--n2); }
.pg-merchants .mr-add p { color: var(--n6); }

@media (max-width: 860px) {
  .pg-merchants .mr-count { margin-top: var(--s-6); }
  .pg-merchants .mr-a .btn { flex: 1; min-height: 44px; }
}

/* ── /docs ──────────────────────────────────────────── */
.pg-docs .dc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-7); }
.pg-docs .dc-main { min-width: 0; max-width: 820px; }
.pg-docs .dc-toc { position: sticky; top: 88px; align-self: start; }
.pg-docs .dc-toc-btn { display: none; }
.pg-docs .dc-toc-list { display: flex; flex-direction: column; gap: 2px; }
.pg-docs .dc-toc-h { padding: 0 10px var(--s-2); font-size: var(--t-12); font-weight: 500; color: var(--n5); }
.pg-docs .dc-toc-list a { color: var(--n6); text-decoration: none; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--t-14); font-weight: 500; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pg-docs .dc-toc-list a:hover { background: var(--n1); color: var(--n9); }
.pg-docs .dc-toc-list a.on { color: var(--brand-ink); background: var(--brand-bg); font-weight: 700; }
.pg-docs .dc-head h1 { font-size: var(--t-40); margin: 0 0 var(--s-3); }
.pg-docs .dc-head p { max-width: 640px; }
.pg-docs .dc-demo { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; font-size: var(--t-14); color: var(--n6); }
.pg-docs .dc-demo b { color: var(--n9); }
.pg-docs .dc-demo > span:last-child { flex: 1; min-width: 240px; }
.pg-docs .dc-sec { padding: var(--s-6) 0 var(--s-2); display: flex; flex-direction: column; gap: var(--s-3); scroll-margin-top: 72px; }
.pg-docs .dc-sec > h2 { font-size: var(--t-28); padding-top: var(--s-6); border-top: 1px solid var(--n2); }
.pg-docs .dc-sec h3 { font-size: var(--t-16); margin-top: var(--s-2); }
.pg-docs .dc-sec p, .pg-docs .dc-sec li { color: var(--n6); }
.pg-docs .dc-sec code, .pg-docs .dc-tbl code, .pg-docs .dc-head code { font-family: var(--mono); font-size: inherit; background: var(--n1); border: 1px solid var(--n2); border-radius: var(--r-sm); padding: 0 5px; color: var(--n9); word-break: break-word; }
/* quickstart: vertical timeline with a 1px line */
.pg-docs .dc-steps { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.pg-docs .dc-steps li { position: relative; padding: 0 0 var(--s-5) var(--s-6); }
.pg-docs .dc-steps li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--n0); border: 2px solid var(--brand-soft); }
.pg-docs .dc-steps li::after { content: ''; position: absolute; left: 8px; top: 24px; bottom: 4px; width: 1px; background: var(--n2); }
.pg-docs .dc-steps li:last-child::after { display: none; }
.pg-docs .dc-steps b { color: var(--n9); display: block; margin-bottom: 2px; }
/* code blocks: dark is content here, not decoration */
.pg-docs .dc-code { border-radius: var(--r-md); background: var(--n9); overflow: hidden; }
.pg-docs .dc-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--n8); min-height: 48px; }
.pg-docs .dc-bar .meth { flex-shrink: 0; }
.pg-docs .dc-path { font-family: var(--mono); font-size: var(--t-12); color: var(--n4); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pg-docs .dc-bar .btn { min-height: 34px; padding: 0 var(--s-3); font-size: var(--t-14); border-radius: var(--r-sm); }
.pg-docs .dc-bar .dc-cp { background: transparent; border-color: var(--n7); color: var(--on-dark); }
.pg-docs .dc-bar .dc-cp:hover { background: var(--n8); color: var(--white); }
.pg-docs .dc-bar .dc-try { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--on-brand); }
.pg-docs .dc-bar .dc-try:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.pg-docs .dc-code pre { margin: 0; padding: var(--s-4); font-family: var(--mono); font-size: var(--t-12); line-height: 1.65; color: var(--on-dark); overflow-x: auto; white-space: pre; }
.pg-docs .dc-res { border-top: 1px dashed var(--n7); background: var(--n8); }
.pg-docs .dc-res[hidden] { display: none; }
.pg-docs .dc-rh { display: flex; align-items: center; gap: 10px; padding: 10px var(--s-4) 0; font-family: var(--mono); font-size: var(--t-12); color: var(--n4); flex-wrap: wrap; }
.pg-docs .dc-st { font-weight: 700; border-radius: var(--r-sm); padding: 1px 7px; border: 1px solid var(--ok); color: var(--ok-line); }
.pg-docs .dc-st.bad { border-color: var(--bad); color: var(--bad-on-dark); }
.pg-docs .dc-res pre { max-height: 380px; overflow: auto; }
.pg-docs .dc-caret { display: inline-block; width: 7px; height: 14px; background: var(--brand-soft); vertical-align: -2px; margin-left: 1px; animation: dc-blink 1s steps(1) infinite; }
@keyframes dc-blink { 50% { opacity: 0; } }
/* field tables */
.pg-docs .dc-tbl { border: 1px solid var(--n2); border-radius: var(--r-md); background: var(--white); overflow: hidden; }
.pg-docs .dc-tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 84px minmax(0, 1.6fr); gap: var(--s-3); padding: 10px 14px; border-bottom: 1px solid var(--n2); font-size: var(--t-14); align-items: start; }
.pg-docs .dc-tr:last-child { border-bottom: 0; }
.pg-docs .dc-tr.dc-th { background: var(--n1); font-size: var(--t-12); font-weight: 500; color: var(--n5); }
.pg-docs .dc-f { font-family: var(--mono); font-size: var(--t-12); font-weight: 600; color: var(--n9); word-break: break-word; }
.pg-docs .dc-t { font-family: var(--mono); font-size: var(--t-12); color: var(--brand-ink); word-break: break-word; }
.pg-docs .dc-req { font-size: var(--t-12); font-weight: 700; }
.pg-docs .dc-req.y { color: var(--ok); }
.pg-docs .dc-req.n { color: var(--n5); }
.pg-docs .dc-ex { font-family: var(--mono); font-size: var(--t-12); color: var(--n9); word-break: break-word; }
.pg-docs .dc-nt { font-family: var(--font); color: var(--n6); font-size: var(--t-12); margin-top: 2px; }
.pg-docs .dc-err .dc-tr { grid-template-columns: 70px minmax(0, 1.3fr) minmax(0, 1.7fr); }
.pg-docs .dc-ep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--s-4); }
.pg-docs .dc-ep h3 { margin: 0; font-family: var(--mono); font-size: var(--t-14); font-weight: 700; letter-spacing: 0; }
.pg-docs .dc-log { list-style: none; margin: 0; padding: 0 0 0 var(--s-4); border-left: 1px solid var(--n2); }
.pg-docs .dc-log li { position: relative; }
.pg-docs .dc-log li::before { content: ''; position: absolute; left: -21px; top: 7px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--brand-soft); }
.pg-docs .dc-log b { color: var(--n9); }
.pg-docs .dc-callout { background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--r-md); padding: 14px var(--s-4); font-size: var(--t-14); color: var(--n9); }

@media (max-width: 860px) {
  .pg-docs .dc { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  /* On this page: static list before JS; sticky, collapsible bar once JS runs */
  .pg-docs .dc-toc { position: static; margin: 0 -20px; padding: var(--s-3) 20px; border-bottom: 1px solid var(--n2); }
  .pg-docs .dc-toc-list { flex-direction: row; flex-wrap: wrap; gap: var(--s-1); }
  .pg-docs .dc-toc-h { width: 100%; padding: 0 0 var(--s-1); }
  .pg-docs .dc-toc[data-js] { position: sticky; top: 60px; z-index: 5; padding: 0 20px; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .pg-docs .dc-toc[data-js] .dc-toc-btn {
    display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 48px; padding: 0;
    border: 0; background: none; font: inherit; font-size: var(--t-14); font-weight: 500; color: var(--n6); cursor: pointer; text-align: left;
  }
  .pg-docs .dc-toc-btn b { color: var(--n9); font-weight: 700; }
  .pg-docs .dc-toc-btn svg { margin-left: auto; transition: transform var(--dur) var(--ease); }
  .pg-docs .dc-toc.open .dc-toc-btn svg { transform: rotate(180deg); }
  .pg-docs .dc-toc[data-js] .dc-toc-list {
    display: none; position: absolute; left: var(--s-4); right: var(--s-4); top: 100%; margin-top: var(--s-1);
    flex-direction: column; flex-wrap: nowrap; gap: 0; padding: var(--s-2); background: var(--white);
    border: 1px solid var(--n2); border-radius: var(--r-md); box-shadow: var(--shadow); max-height: calc(100vh - 140px); overflow-y: auto;
  }
  .pg-docs .dc-toc[data-js].open .dc-toc-list { display: flex; }
  .pg-docs .dc-toc[data-js] .dc-toc-h { display: none; }
  .pg-docs .dc-toc-list a { min-height: 44px; display: inline-flex; align-items: center; }
  .pg-docs .dc-toc:not([data-js]) .dc-toc-list a { border: 1px solid var(--n2); background: var(--white); border-radius: var(--r-pill); padding: 0 var(--s-3); }
  .pg-docs .dc-head { padding-top: var(--s-5); }
  .pg-docs .dc-head h1 { font-size: var(--t-28); }
  .pg-docs .dc-sec { scroll-margin-top: 116px; }
  .pg-docs .dc-sec > h2 { font-size: var(--t-22); }
  .pg-docs .dc-rh span { min-width: 0; word-break: break-all; }
  .pg-docs .dc-bar { flex-wrap: wrap; }
  .pg-docs .dc-bar .btn { min-height: 44px; }
  .pg-docs .dc-bar .dc-cp { margin-left: auto; }
  .pg-docs .dc-path { flex-basis: 100%; order: -1; white-space: normal; word-break: break-all; }
  .pg-docs .dc-tr { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) 10px; }
  .pg-docs .dc-tr.dc-th { display: none; }
  .pg-docs .dc-tr .dc-t { grid-column: 1 / -1; order: 3; }
  .pg-docs .dc-tr .dc-ex { grid-column: 1 / -1; order: 4; }
  .pg-docs .dc-err .dc-tr { grid-template-columns: 52px minmax(0, 1fr); }
  .pg-docs .dc-err .dc-tr > :nth-child(3) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .pg-docs .dc-caret { animation: none; } }