.docs-body {
  min-height: 100dvh;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
}

.docs-body * { scroll-margin-top: 92px; }

.docs-body button:focus-visible,
.docs-body a:focus-visible,
.docs-body summary:focus-visible,
.docs-body [tabindex="-1"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--blue);
}

.docs-skip {
  position: fixed;
  z-index: 30;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: #fff;
  color: var(--ink);
  transform: translateY(-150%);
}

.docs-skip:focus { transform: translateY(0); }

.docs-header {
  position: sticky;
  z-index: 10;
  top: 0;
  height: 72px;
  padding: 0 clamp(20px, 3vw, 46px);
  border-bottom: 1px solid #405166;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  background: var(--ink);
  color: #f7f5ee;
}

.docs-header .brand { color: #f7f5ee; }
.docs-header .brand .os { color: var(--brand-green); }

.docs-header-title {
  color: #9facb9;
  font: 600 11px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.docs-header nav { display: flex; align-items: center; gap: 8px; }
.docs-header nav a { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; color: #d8e2eb; font: 610 11px/1 var(--display); text-decoration: none; }
.docs-header nav a:hover { color: #fff; }
.docs-header .docs-header-action { border: 1px solid #526579; background: #fff; color: var(--ink); }
.docs-header .docs-header-action:hover { background: #e9f0f4; color: var(--ink); }

.docs-layout {
  width: min(100%, 1800px);
  min-height: calc(100dvh - 72px);
  margin: 0 auto;
  border-inline: 1px solid var(--line);
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 260px;
}

.docs-index,
.docs-context {
  position: sticky;
  top: 72px;
  height: calc(100dvh - 72px);
  align-self: start;
}

.docs-index {
  padding: 30px 18px 24px;
  border-right: 1px solid #405166;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #d8e2eb;
}

.index-heading {
  min-height: 34px;
  padding: 0 9px 12px;
  border-bottom: 1px solid #405166;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9facb9;
  font: 600 10px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reference-heading { margin-top: 28px; }
.docs-index nav { display: grid; gap: 3px; padding-top: 8px; }
.docs-index nav a {
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 6px;
  display: grid;
  align-content: center;
  color: #c7d0d8;
  font: 610 13px/1.1 var(--display);
  text-decoration: none;
}
.docs-index nav a small { margin-top: 5px; color: #82909e; font: 400 11px/1.2 var(--body); }
.docs-index nav a:hover { background: #1c241d; color: #fff; }
.docs-index nav a[aria-current="location"] { background: var(--paper); color: var(--ink); }
.docs-index nav a[aria-current="location"] small { color: var(--slate); }
.index-back { margin-top: auto; min-height: 44px; padding: 0 10px; border-top: 1px solid #405166; display: flex; align-items: flex-end; color: #9facb9; font-size: 12px; text-decoration: none; }
.index-back:hover { color: #fff; }

.docs-content { min-width: 0; background: var(--panel); }
.docs-content article { min-width: 0; }
.mobile-docs-index { display: none; }

.docs-section {
  padding: 68px clamp(38px, 6vw, 92px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.docs-opening {
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  align-items: end;
  gap: clamp(48px, 7vw, 100px);
  background: var(--paper);
}

.docs-opening h1 {
  max-width: 780px;
  margin: 0 0 24px;
  font: 650 50px/.98 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.docs-lede { max-width: 68ch; margin: 0; color: var(--slate); font-size: 17px; line-height: 1.65; }
.opening-actions { margin-top: 32px; display: flex; align-items: center; gap: 18px; }
.opening-actions a { min-height: 46px; display: inline-flex; align-items: center; color: var(--blue); font: 620 12px/1 var(--display); text-decoration: none; }
.opening-actions .docs-primary-action { padding: 0 18px; background: var(--brand-green); color: var(--ink); }
.opening-actions .docs-primary-action:hover { background: var(--blue-deep); }

.opening-facts { margin: 0; border-top: 1px solid var(--line); }
.opening-facts div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.opening-facts dt { color: var(--slate); font: 600 10px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.opening-facts dd { margin: 7px 0 0; font: 630 14px/1.25 var(--display); }

.lifecycle-band { padding: 34px clamp(38px, 6vw, 92px) 38px; border-bottom: 1px solid var(--line); background: #e8e6de; }
.lifecycle-band h2 { margin: 0 0 24px; font: 650 19px/1.2 var(--display); }
.lifecycle-band ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.lifecycle-band li { position: relative; min-width: 0; }
.lifecycle-band li::after { content: ""; position: absolute; top: 14px; right: 0; left: 30px; height: 1px; background: var(--line); }
.lifecycle-band li:last-child::after { display: none; }
.lifecycle-band a { position: relative; z-index: 1; padding-right: 12px; display: grid; align-content: start; color: var(--ink); text-decoration: none; }
.lifecycle-band a > span { width: 29px; height: 29px; margin-bottom: 13px; border: 1px solid var(--blue); border-radius: 50%; display: grid; place-items: center; background: #e8e6de; color: var(--blue); font: 650 11px/1 var(--display); }
.lifecycle-band strong { font: 650 14px/1.2 var(--display); }
.lifecycle-band small { margin-top: 5px; color: var(--slate); font-size: 11px; line-height: 1.35; }
.lifecycle-band a:hover strong { color: var(--blue); }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font: 650 32px/1 var(--display); letter-spacing: -.025em; }
.section-heading > a { min-width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--blue); font: 600 19px/1 var(--display); text-decoration: none; }
.section-heading > a:hover { color: var(--blue); }

.cli-file-actions { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cli-file-actions a { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); display: inline-flex; align-items: center; color: var(--blue); font: 610 11px/1 var(--display); text-decoration: none; }
.cli-file-actions a:first-child { border-color: var(--blue); background: var(--blue); color: #fff; }

.docs-section > p,
.docs-section > ul,
.docs-section > ol:not(.instruction-list) { max-width: 72ch; }
.docs-section p,
.docs-section li { color: var(--slate); font-size: 14px; line-height: 1.65; }
.docs-section > p { margin: 19px 0 0; }
.docs-section h3 { margin: 46px 0 14px; font: 650 19px/1.2 var(--display); }
.docs-section a { color: var(--blue); }
.docs-section :not(pre) > code { padding: 2px 5px; background: #e8e6de; color: var(--ink); font: 12px/1.4 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }

.code-block { min-width: 0; max-width: 100%; margin-top: 24px; background: var(--ink); color: #d8e2eb; }
.code-label { min-height: 44px; padding-left: 18px; border-bottom: 1px solid #405166; display: flex; align-items: center; justify-content: space-between; color: #9facb9; font: 600 10px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.code-label button { min-width: 72px; min-height: 44px; border: 0; border-left: 1px solid #405166; background: transparent; color: #fff; cursor: pointer; font: 610 11px/1 var(--display); }
.code-label button:hover { background: #21384e; }
.code-block pre,
.response-pair pre { margin: 0; overflow-x: auto; }
.code-block pre { padding: 20px; }
.code-block pre code,
.response-pair pre code { color: inherit; font: 12px/1.7 "Cascadia Code", Consolas, monospace; }

.docs-note { max-width: 72ch; margin-top: 28px; padding: 18px 20px; border-block: 1px solid var(--line); display: grid; grid-template-columns: 8px 1fr; align-items: start; gap: 13px; background: var(--paper); }
.docs-note .status-lamp { margin-top: 6px; }
.docs-note strong { font: 650 14px/1.2 var(--display); }
.docs-note p { margin: 5px 0 0; }
.boundary-note { background: #efe9df; }

.instruction-list { max-width: 72ch; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.instruction-list li { padding: 15px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 28px 1fr; gap: 13px; }
.instruction-list li > span { width: 28px; height: 28px; border: 1px solid var(--blue); border-radius: 50%; display: grid; place-items: center; color: var(--blue); font: 650 11px/1 var(--display); }
.instruction-list p { margin: 2px 0 0; }

.field-contract { margin-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.field-contract > div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.field-contract > div:nth-child(odd) { border-right: 1px solid var(--line); }
.field-contract > div:nth-child(even) { padding-left: 18px; }
.field-contract strong,
.trust-contract strong { font: 650 14px/1.2 var(--display); }
.field-contract p,
.trust-contract p { margin: 6px 0 0; }

.pairing-sequence { margin-top: 28px; border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.pairing-sequence > div { padding: 20px; border-right: 1px solid var(--line); }
.pairing-sequence > div:last-child { border-right: 0; }
.pairing-sequence span { width: 28px; height: 28px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 650 11px/1 var(--display); }
.pairing-sequence strong { display: block; font: 650 14px/1.2 var(--display); }
.pairing-sequence p { margin: 6px 0 0; }

.trust-contract { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; background: #e8e6de; }
.trust-contract > div { padding: 22px; }
.trust-contract > div:first-child { border-right: 1px solid var(--line); }

.response-pair { min-width: 0; max-width: 100%; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: #d8e2eb; }
.response-pair > div { min-width: 0; }
.response-pair > div:first-child { border-right: 1px solid #405166; }
.response-heading { min-height: 48px; padding: 0 18px; border-bottom: 1px solid #405166; display: flex; align-items: center; gap: 11px; }
.response-heading strong { font: 620 12px/1 var(--display); }
.response-pair pre { padding: 18px; }

.command-grid { min-width: 0; max-width: 100%; margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.command-grid > * { min-width: 0; }
.command-grid .code-block { margin: 0; }

.reference-section { background: var(--paper); }
.reference-table-wrap { width: 100%; min-width: 0; max-width: 100%; margin-top: 28px; overflow-x: auto; }
.reference-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
.reference-table th { padding: 12px 14px; border-block: 1px solid var(--line); color: var(--slate); font: 600 10px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.reference-table td { padding: 15px 14px; border-bottom: 1px solid var(--fine); color: var(--slate); font-size: 13px; line-height: 1.5; vertical-align: top; }
.reference-table td:first-child { width: 42%; }
.reference-footnote { font-size: 12px !important; }

.endpoint-list { margin-top: 28px; border-top: 1px solid var(--line); }
.endpoint-list > div { min-height: 62px; padding: 13px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(220px, 1fr) 110px; align-items: center; gap: 18px; }
.endpoint-list code { color: var(--ink); font: 12px/1.5 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.endpoint-list span { color: var(--slate); font-size: 13px; line-height: 1.4; }
.endpoint-list small { color: var(--blue); font: 600 10px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }

.decision-list { margin-top: 28px; border-top: 1px solid var(--line); }
.decision-list > div { min-height: 68px; padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 32px minmax(210px, .8fr) 1.2fr; align-items: center; gap: 15px; }
.decision-list > div > span { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--slate); font: 650 11px/1 var(--display); }
.decision-list code { color: var(--ink); font: 12px/1.4 "Cascadia Code", Consolas, monospace; }
.decision-list p { margin: 0; }
.decision-list .allowed-code { background: #e6eee8; }
.decision-list .allowed-code > span { border-color: var(--brand-green); background: var(--brand-green); color: var(--ink); }

.boundary-matrix { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); }
.boundary-matrix > div { padding: 24px; }
.boundary-matrix > div:first-child { border-right: 1px solid var(--line); background: #e6eee8; }
.boundary-matrix > div:last-child { background: #efe9df; }
.boundary-matrix strong { font: 650 16px/1.2 var(--display); }
.boundary-matrix ul { margin: 16px 0 0; padding-left: 20px; }
.boundary-matrix li + li { margin-top: 8px; }

.troubleshooting-list { margin-top: 28px; border-top: 1px solid var(--line); }
.troubleshooting-list details { border-bottom: 1px solid var(--line); }
.troubleshooting-list summary { min-height: 58px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; color: var(--ink); font: 650 14px/1.3 var(--display); list-style: none; }
.troubleshooting-list summary::-webkit-details-marker { display: none; }
.troubleshooting-list summary::after { content: "+"; color: var(--blue); font-size: 18px; }
.troubleshooting-list details[open] summary::after { content: "-"; }
.troubleshooting-list p { max-width: 68ch; margin: -2px 8px 20px; }

.docs-footer { min-height: 210px; padding: 46px clamp(38px, 6vw, 92px); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--ink); color: #fff; }
.docs-footer strong { font: 650 24px/1.1 var(--display); }
.docs-footer p { max-width: 62ch; margin: 10px 0 0; color: #aab5c0; font-size: 13px; line-height: 1.55; }
.docs-footer > a { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; flex: 0 0 auto; background: #fff; color: var(--ink); font: 620 12px/1 var(--display); text-decoration: none; }

.docs-context { padding: 34px 22px; border-left: 1px solid var(--line); background: var(--paper); }
.context-block { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.context-block > span:not(.status-lamp) { display: block; margin-bottom: 10px; color: var(--slate); font: 600 10px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.context-block strong { font: 650 19px/1.15 var(--display); }
.context-block p { margin: 7px 0 0; color: var(--slate); font-size: 12px; line-height: 1.5; }
.context-block code { display: block; padding: 13px; background: var(--ink); color: #d8e2eb; font: 11px/1.55 "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.context-warning { display: grid; grid-template-columns: 8px 1fr; align-items: start; gap: 12px; }
.context-warning .status-lamp { margin-top: 5px; }
.context-warning p { margin-top: 0; }
.docs-context > a { min-height: 44px; display: flex; align-items: center; color: var(--blue); font: 610 11px/1 var(--display); text-decoration: none; }

.docs-toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; padding: 13px 18px; background: var(--ink); color: #fff; box-shadow: 0 10px 32px rgba(13,13,13,.22); font-size: 13px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 160ms ease-out, transform 220ms cubic-bezier(.16,1,.3,1); }
.docs-toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1320px) {
  .docs-layout { grid-template-columns: 232px minmax(0, 1fr); }
  .docs-context { display: none; }
}

@media (max-width: 880px) {
  .docs-header { grid-template-columns: 1fr auto; }
  .docs-header-title { display: none; }
  .docs-header nav a:first-child { display: none; }
  .docs-layout { display: block; border-inline: 0; }
  .docs-index { display: none; }
  .mobile-docs-index { display: block; margin: 18px 20px 0; border: 1px solid var(--line); background: var(--paper); }
  .mobile-docs-index summary { min-height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font: 620 12px/1 var(--display); list-style: none; }
  .mobile-docs-index summary::-webkit-details-marker { display: none; }
  .mobile-docs-index summary::after { content: "+"; color: var(--blue); font-size: 18px; }
  .mobile-docs-index[open] summary::after { content: "-"; }
  .mobile-docs-index nav { padding: 8px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
  .mobile-docs-index a { min-height: 44px; padding: 0 8px; display: flex; align-items: center; color: var(--blue); font: 610 11px/1 var(--display); text-decoration: none; }
  .docs-opening { min-height: auto; grid-template-columns: 1fr; align-items: start; }
  .opening-facts { max-width: 540px; }
}

@media (max-width: 620px) {
  .docs-header { height: 64px; padding-inline: 16px; }
  .docs-header nav a { padding-inline: 11px; }
  .docs-body * { scroll-margin-top: 78px; }
  .docs-section { padding: 48px 20px; }
  .docs-opening h1 { font-size: 38px; }
  .docs-lede { font-size: 15px; }
  .opening-actions { align-items: stretch; flex-direction: column; gap: 7px; }
  .opening-actions a { justify-content: center; }
  .lifecycle-band { padding: 30px 20px; }
  .lifecycle-band ol { grid-template-columns: 1fr; }
  .lifecycle-band li { min-height: 72px; }
  .lifecycle-band li::after { top: 29px; bottom: -2px; left: 14px; right: auto; width: 1px; height: auto; }
  .lifecycle-band a { min-height: 44px; grid-template-columns: 29px 1fr; column-gap: 14px; padding-right: 0; }
  .lifecycle-band a > span { grid-row: 1 / span 2; margin-bottom: 0; }
  .lifecycle-band small { grid-column: 2; }
  .section-heading h2 { font-size: 26px; }
  .field-contract,
  .trust-contract,
  .response-pair,
  .command-grid,
  .boundary-matrix { grid-template-columns: 1fr; }
  .field-contract > div:nth-child(odd),
  .trust-contract > div:first-child,
  .response-pair > div:first-child,
  .boundary-matrix > div:first-child { border-right: 0; }
  .field-contract > div:nth-child(even) { padding-left: 0; }
  .pairing-sequence { grid-template-columns: 1fr; }
  .pairing-sequence > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .pairing-sequence > div:last-child { border-bottom: 0; }
  .endpoint-list > div { grid-template-columns: 1fr; gap: 6px; padding-block: 16px; }
  .decision-list > div { grid-template-columns: 32px 1fr; align-items: start; }
  .decision-list p { grid-column: 2; }
  .docs-footer { padding: 38px 20px; align-items: stretch; flex-direction: column; }
  .docs-footer > a { justify-content: center; }
  .docs-toast { right: 16px; bottom: 16px; left: 16px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-toast { transition-duration: .01ms; }
}