/* Docs-only controlled-interface status map. The visual is a status ledger,
 * never a request path, runtime topology or service-availability claim. */
.docs-page .docs-interface-map {
  position: relative;
  width: min(100%, 72rem);
  margin: 1.5rem auto 2rem;
  color: #f7faf8;
  border: 1px solid #36574e;
  background: #071e1c;
}

.docs-page .docs-interface-map-shell {
  padding: clamp(.7rem, 1.8vw, 1.35rem);
  overflow: hidden;
  background: #071e1c;
}

.docs-page .docs-interface-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.docs-page .docs-interface-map-svg--compact { display: none; }

.docs-page .docs-interface-map *,
.docs-page .docs-interface-map *::before,
.docs-page .docs-interface-map *::after {
  animation: none !important;
  transition: none !important;
}

.docs-page .dcb-bg { fill: #071e1c; }
.docs-page .dcb-frame { fill: none; stroke: #42655a; }
.docs-page .dcb-panel { fill: #0e352f; stroke: #527067; }
.docs-page .dcb-panel--reference { fill: #0c302b; stroke: #9bb4a9; }
.docs-page .dcb-panel--open { fill: #0c2a27; stroke: #a99151; stroke-dasharray: 7 6; }
.docs-page .dcb-panel--required { fill: #102d29; stroke: #d4af37; stroke-dasharray: 7 6; }
.docs-page .dcb-rail { fill: #102f2a; stroke: #5b776e; }
.docs-page .dcb-no-claim { fill: #1a2926; stroke: #c78561; }
.docs-page .dcb-rule { stroke: rgba(232, 241, 236, .27); }
.docs-page .dcb-tag { fill: #102f2a; stroke: #6f8b81; }

.docs-page .dcb-bg,
.docs-page .dcb-frame,
.docs-page .dcb-panel,
.docs-page .dcb-rail,
.docs-page .dcb-no-claim,
.docs-page .dcb-rule,
.docs-page .dcb-tag {
  vector-effect: non-scaling-stroke;
}

.docs-page .dcb-kicker,
.docs-page .dcb-status,
.docs-page .dcb-stage,
.docs-page .dcb-note,
.docs-page .dcb-code,
.docs-page .dcb-tag-text,
.docs-page .dcb-rail-text,
.docs-page .dcb-no-claim-title,
.docs-page .dcb-no-claim-text {
  font-family: var(--mono);
  fill: #f7faf8;
}

.docs-page .dcb-kicker {
  font-size: 17px;
  font-weight: 760;
  letter-spacing: 1.7px;
}

.docs-page .dcb-status {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.1px;
  fill: #d4af37;
}

.docs-page .dcb-rail-text {
  font-size: 17px;
  font-weight: 740;
  letter-spacing: 1.4px;
  fill: #e5ece8;
}

.docs-page .dcb-stage {
  font-size: 15px;
  font-weight: 730;
  letter-spacing: 1.1px;
  fill: #a9beb4;
}

.docs-page .dcb-title {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.2px;
  fill: #f7faf8;
}

.docs-page .dcb-note {
  font-size: 15.5px;
  font-weight: 620;
  letter-spacing: .35px;
}

.docs-page .dcb-note--muted { fill: #a9beb4; }

.docs-page .dcb-code {
  font-size: 14.5px;
  font-weight: 580;
  letter-spacing: .15px;
  fill: #e3ece7;
}

.docs-page .dcb-tag-text {
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .5px;
  fill: #d4af37;
}

.docs-page .dcb-no-claim-title {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: 1.2px;
  fill: #edb293;
}

.docs-page .dcb-no-claim-text {
  font-size: 15px;
  font-weight: 610;
  letter-spacing: .25px;
  fill: #e5ece8;
}

.docs-page .dcb-kicker--compact,
.docs-page .dcb-status--compact,
.docs-page .dcb-stage--compact,
.docs-page .dcb-note--compact,
.docs-page .dcb-code--compact,
.docs-page .dcb-tag-text--compact,
.docs-page .dcb-rail-text--compact,
.docs-page .dcb-no-claim-title--compact,
.docs-page .dcb-no-claim-text--compact {
  font-size: 14.5px;
}

.docs-page .dcb-title--compact {
  font-size: 17px;
  letter-spacing: 0;
}

.docs-page .dcb-kicker--compact,
.docs-page .dcb-no-claim-title--compact { font-weight: 780; }

.docs-page .docs-interface-map figcaption {
  margin: 0;
  padding: .85rem 1.2rem;
  border-top: 1px solid #36574e;
  color: #a9beb4;
  background: #071e1c;
  font: 650 .7rem/1.55 var(--mono);
  letter-spacing: .025em;
}

.docs-page .docs-interface-data-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.docs-page .docs-interface-data {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  background: var(--paper);
  white-space: normal;
}

.docs-page .docs-interface-data caption,
.docs-page .docs-interface-data th,
.docs-page .docs-interface-data td {
  padding: .65rem;
  border: 1px solid var(--rule-strong);
  text-align: left;
  vertical-align: top;
}

.docs-page .docs-code-status {
  margin: 1.4rem auto .55rem;
  color: var(--accent-deep);
  font: 760 .72rem/1.45 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.docs-page #quickstart pre {
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.docs-page #boundary > p {
  max-width: 52rem;
  margin-top: .8rem;
  color: var(--ink-muted);
}

@media (max-width: 60rem) {
  .docs-page .docs-interface-map-svg--wide { display: none; }
  .docs-page .docs-interface-map-svg--compact {
    display: block;
    width: min(100%, 32rem);
    margin-inline: auto;
  }
}

@media (max-width: 36rem) {
  .docs-page .hero h1 { font-size: clamp(2.25rem, 13vw, 3.2rem); }
  .docs-page .docs-interface-map {
    width: auto;
    margin-inline: -.75rem;
  }
  .docs-page .docs-interface-map-shell { padding: .35rem; }
  .docs-page .docs-interface-map figcaption { padding-inline: .85rem; }
  .docs-page #quickstart pre { font-size: .78rem; }
}

@media print {
  .docs-page .docs-interface-map-svg--wide { display: block; }
  .docs-page .docs-interface-map-svg--compact { display: none; }
  .docs-page .docs-interface-map { break-inside: avoid; }
}

@media (forced-colors: active) {
  .docs-page .docs-interface-map-shell { display: none; }
  .docs-page .docs-interface-map {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }
  .docs-page .docs-interface-data-wrap {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
  .docs-page .docs-interface-data {
    color: CanvasText;
    background: Canvas;
  }
  .docs-page .docs-interface-data caption,
  .docs-page .docs-interface-data th,
  .docs-page .docs-interface-data td {
    border-color: CanvasText;
  }
  .docs-page .docs-interface-map figcaption {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }
}