/* ---------------------------------------------------------------------------
   allyway — the detail pane, the code block and the try-it panel
--------------------------------------------------------------------------- */

.detail__header {
  padding: var(--s-16) var(--s-20) var(--s-14);
  border-bottom: var(--rule-w) solid var(--rule);
}
.detail__title-row {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  flex-wrap: wrap;
}
.detail__pill { font-size: var(--t-11); padding: var(--s-4) var(--s-7); }
.detail__path {
  font: 500 var(--t-16) / 1.25 var(--font-mono);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.detail__actions { margin-left: auto; display: flex; gap: var(--s-8); }

.detail__lede {
  margin-top: var(--s-10);
  max-width: 56ch;
  font: 400 var(--t-12-5) / var(--lh-body) var(--font-sans);
  color: var(--ink-70);
  text-wrap: pretty;
}
.detail__lede code { font-size: 0.95em; }

.detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-11, 0.6875rem);
}
.detail__chips .chip {
  cursor: default;
  font-weight: 500;
  padding: var(--s-4) var(--s-7);
}
.detail__chips .chip:hover { background: transparent; }

.detail__body { padding: var(--s-16) var(--s-20) var(--s-32); }

.detail__section + .detail__section,
.detail__section .detail__section { margin-top: var(--s-22); }
.detail__section > .label { display: block; margin-bottom: var(--s-9); }
.detail__section > .detail__section:first-child { margin-top: var(--s-16); }
.detail__section-head {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  flex-wrap: wrap;
  margin-bottom: var(--s-9);
}
.detail__section-head h3,
.detail__section-head h4 { margin: 0; }

/* The tab bar carries the rule beneath the header, so a tabbed header does
   not draw a second one above it. The component-schema view has no tabs and
   keeps its own. */
.detail__header--tabbed { border-bottom: 0; padding-bottom: 0; }

/* Roomy (1b) header sizes */
[data-density='roomy'] .detail__path { font-size: var(--t-19); }
[data-density='roomy'] .detail__pill { font-size: var(--t-11-5); padding: var(--s-5) var(--s-8); }
[data-density='roomy'] .detail__body { padding-top: var(--s-4); }
[data-density='roomy'] .detail__lede { max-width: 62ch; font-size: var(--t-13-5); line-height: var(--lh-prose); color: var(--ink); }

/* --- tabs -------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: var(--s-18) var(--s-20) 0;
  border-bottom: var(--rule-w-strong) solid var(--rule-strong);
}
.tab {
  padding: var(--s-9) var(--s-14);
  border: 0;
  background: none;
  color: var(--ink-70);
  font: 500 var(--t-11-5) / 1.2 var(--font-sans);
  cursor: pointer;
  min-height: var(--h-36);
  transition: background-color var(--dur) var(--ease);
}
.tab:hover { background: var(--hover-surface); color: var(--ink); }
.tab[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.tab[aria-selected='true']:hover { background: var(--fill-hover); }
.tabpanel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (forced-colors: active) {
  .tab[aria-selected='true'] { border-bottom: 3px solid Highlight; }
  .field-row input:focus-visible,
  .field-row textarea:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* --- fact grid ----------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: var(--s-20);
  border: var(--rule-w) solid var(--rule);
}
.facts > div {
  padding: var(--s-13) var(--s-15, 0.9375rem);
  border-right: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
}
.facts dt { font: 600 var(--t-9-5) / 1.3 var(--font-mono); letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--ink-55); }
.facts dd { margin: var(--s-7) 0 0; font: 400 var(--t-12-5) / 1.4 var(--font-mono); }

/* --- parameter table ----------------------------------------------------- */
.params { border: var(--rule-w) solid var(--rule); }

table.params {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table.params caption { text-align: left; padding: 0 0 var(--s-9); }
table.params th,
table.params td {
  padding: var(--s-7) var(--s-10);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--rule-w) solid var(--rule-softer);
  overflow-wrap: anywhere;
}
table.params thead th {
  background: var(--paper-alt);
  border-bottom: var(--rule-w) solid var(--rule);
  font: 600 var(--t-9-5) / 1.3 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-55);
}
table.params tbody tr:last-child th,
table.params tbody tr:last-child td { border-bottom: 0; }
table.params tbody th {
  font: 400 var(--t-11-5) / 1.35 var(--font-mono);
  font-weight: 500;
}
table.params td { font: 400 var(--t-11-5) / 1.35 var(--font-mono); }
table.params .col-type { color: var(--ink-70); }
table.params .col-notes { font-family: var(--font-sans); color: var(--ink-70); }
/* The constraints, then the description under them — two lines in one cell
   rather than one run-on. */
.col-notes__facts { display: block; }
.col-notes__facts + .md { margin-top: var(--s-6); }
.params-stack .col-notes__facts { display: inline; }

/* "yes" is a word, never a colour and never an asterisk. */
.req-yes { font-weight: 600; }
.req-no { color: var(--ink-55); }

.params col.c-field { width: 28%; }
.params col.c-type { width: 20%; }
.params col.c-req { width: 12%; }
.params col.c-notes { width: 40%; }

/* Stacked definition rows replace the table on small screens — a table that
   is restyled with display:block loses its semantics, so the narrow layout is
   a real <dl> rather than a table pretending. */
.params-stack { border: var(--rule-w) solid var(--rule); margin: 0; }
.params-stack > div {
  padding: var(--s-11, 0.6875rem) var(--s-12);
  border-bottom: var(--rule-w) solid var(--rule-softer);
}
.params-stack > div:last-child { border-bottom: 0; }
.params-stack dt { font: 500 var(--t-12-5) / 1.3 var(--font-mono); overflow-wrap: anywhere; }
.params-stack dd { margin: var(--s-5) 0 0; font: 400 var(--t-11-5) / 1.5 var(--font-sans); color: var(--ink-70); }

/* --- responses ----------------------------------------------------------- */
.responses { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.response-chip {
  padding: var(--s-5) var(--s-8);
  border: var(--rule-w) solid currentColor;
  font: 500 var(--t-11) / 1.3 var(--font-mono);
}
.response-list { border: var(--rule-w) solid var(--rule); }
.response-list > li {
  display: flex;
  gap: var(--s-12);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--s-9) var(--s-12);
  border-bottom: var(--rule-w) solid var(--rule-softer);
  font: 400 var(--t-12) / 1.5 var(--font-sans);
}
.response-list > li:last-child { border-bottom: 0; }
.response-list .response-chip { flex: none; }

/* --- code block ---------------------------------------------------------- */
.codeblock__head {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  flex-wrap: wrap;
  margin-bottom: var(--s-9);
}
.lang-tabs { display: flex; gap: var(--s-8); }
.lang-tab {
  padding: var(--s-3) var(--s-6);
  border: var(--rule-w) solid var(--border-quiet);
  background: transparent;
  color: var(--ink-55);
  font: 500 var(--t-10-5) / 1.4 var(--font-mono);
  cursor: pointer;
  min-height: var(--h-24);
  transition: background-color var(--dur) var(--ease);
}
.lang-tab:hover { background: var(--hover-surface); color: var(--ink); }
.lang-tab[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.lang-tab[aria-selected='true']:hover { background: var(--fill-hover); }
.codeblock__copy { margin-left: auto; }
.codeblock__copy[data-copied='true'] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

@media (forced-colors: active) {
  .lang-tab[aria-selected='true'] { border: 2px solid Highlight; }
}

/* --- try it -------------------------------------------------------------- */
.tryit__warning {
  display: flex;
  gap: var(--s-12);
  padding: var(--s-11, 0.6875rem) var(--s-13);
  border: var(--rule-w) solid var(--patch-fg);
  background: var(--patch-bg);
  color: var(--patch-fg);
  font: 400 var(--t-12) / 1.5 var(--font-sans);
  margin-bottom: var(--s-16);
}

.tryit__fields { display: grid; gap: var(--s-12); }
.field-row { display: grid; gap: var(--s-6); }
/* The description under a field is prose the document wrote, so it gets the
   prose rules; the facts line above it stays a single terse line. */
.hint--prose { display: block; }
.hint--prose table { font-size: 0.95em; }
.field-row label { font: 600 var(--t-11) / 1.3 var(--font-sans); }
.field-row .hint { font: 400 var(--t-11) / 1.5 var(--font-sans); color: var(--ink-55); }
.field-row input,
.field-row textarea {
  width: 100%;
  padding: var(--s-8) var(--s-10);
  border: var(--rule-w) solid var(--ink);
  background: var(--field-bg);
  font: 400 var(--t-12-5) / 1.5 var(--font-mono);
  color: var(--ink);
  min-height: var(--h-32);
}
.field-row textarea { min-height: 8rem; resize: vertical; }
.field-row input:focus-visible,
.field-row textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.tryit__actions { display: flex; gap: var(--s-10); align-items: center; flex-wrap: wrap; margin-top: var(--s-16); }
.tryit__status { font: 400 var(--t-11-5) / 1.5 var(--font-sans); color: var(--ink-55); }

.result { margin-top: var(--s-18); border: var(--rule-w) solid var(--rule); }
.result__head {
  display: flex;
  gap: var(--s-10);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--s-10) var(--s-12);
  background: var(--paper-alt);
  border-bottom: var(--rule-w) solid var(--rule);
  font: 400 var(--t-11-5) / 1.4 var(--font-mono);
  color: var(--ink-55);
}
.result__body { padding: var(--s-12); }
.result__section + .result__section { margin-top: var(--s-14); }
.result__note {
  font: 400 var(--t-11-5) / 1.6 var(--font-sans);
  color: var(--ink-70);
  max-width: 68ch;
}
.result__section-head {
  display: flex;
  gap: var(--s-10);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-9);
}
.result__section-head .label { margin: 0; }
.result__copy { margin-left: auto; }
.result__copy[data-copied='true'] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.result--error { border-color: var(--delete-fg); }
.result--error .result__head { background: var(--delete-bg); color: var(--delete-fg); }

.kv { border: var(--rule-w) solid var(--rule); margin: 0; }
.kv > div {
  display: grid;
  grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
  gap: var(--s-10);
  padding: var(--s-6) var(--s-10);
  border-bottom: var(--rule-w) solid var(--rule-softer);
}
.kv > div:last-child { border-bottom: 0; }
.kv dt { font: 500 var(--t-11) / 1.4 var(--font-mono); color: var(--ink-55); overflow-wrap: anywhere; }
.kv dd { margin: 0; font: 400 var(--t-11) / 1.4 var(--font-mono); overflow-wrap: anywhere; }

/* Sticky primary action on the pushed detail page (1f). */
.sticky-action { display: none; }
@media (max-width: 48rem) {
  .sticky-action {
    display: block;
    position: sticky;
    bottom: 0;
    padding: var(--s-12) var(--s-14);
    border-top: var(--rule-w-strong) solid var(--rule-strong);
    background: var(--paper);
  }
  .sticky-action .btn { width: 100%; height: var(--h-48); font-size: var(--t-13); }
  .detail__header { padding: var(--s-18) var(--s-14) var(--s-14); }
  .detail__body { padding: var(--s-16) var(--s-14) var(--s-24); }
  .detail__path { font-size: var(--t-17); }
  .tabs { margin: var(--s-16) var(--s-14) 0; }
}

/* Three-up segmented control, as drawn in 1f. */
@media (max-width: 48rem) {
  .tabs--segmented {
    margin: var(--s-16) 0 0;
    border: var(--rule-w) solid var(--ink);
    border-bottom-width: var(--rule-w);
    flex-wrap: nowrap;
    /* More sections than fit scroll inside the control rather than pushing
       the page sideways. */
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tabs--segmented .tab {
    flex: 1 0 auto;
    min-width: 0;
    text-align: center;
    justify-content: center;
    border-left: var(--rule-w) solid var(--ink);
    min-height: var(--h-44);
  }
  .tabs--segmented .tab:first-child { border-left: 0; }
}

/* Enum parameters are a dropdown rather than a free-text box, so the values
   the schema allows are the values you can pick. */
.field-row select {
  width: 100%;
  padding: var(--s-8) var(--s-10);
  border: var(--rule-w) solid var(--ink);
  background: var(--field-bg);
  color: var(--ink);
  font: 400 var(--t-12-5) / 1.5 var(--font-mono);
  min-height: var(--h-32);
  border-radius: 0;
}
.field-row select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* A field that stopped the request: the word carries it, not the colour. */
.hint--error { color: var(--delete-fg); }
.field-row [aria-invalid='true'] { border-color: var(--delete-fg); border-width: var(--rule-w-strong); }

@media (max-width: 48rem) {
  .field-row select { min-height: var(--h-44); }
}

@media (forced-colors: active) {
  .field-row select:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  .field-row [aria-invalid='true'] { border-style: dashed; }
}

/* ---------------------------------------------------------------------------
   Responses, opened up
--------------------------------------------------------------------------- */

/* No rule under a response: the list already separates them. */

.response-summary,
.response-row {
  display: flex;
  gap: var(--s-12);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--s-9) var(--s-12);
  font: 400 var(--t-12) / 1.5 var(--font-sans);
}
.response-summary { cursor: pointer; list-style-position: outside; }
.response-summary::marker { color: var(--ink-55); }
.response-summary:hover { background: var(--hover-surface); }
.response-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.response-summary__text { flex: 1 1 12ch; }
.response-summary__shape {
  font: 400 var(--t-11) / 1.5 var(--font-mono);
  color: var(--ink-55);
  white-space: nowrap;
}
.response-row { color: var(--ink-70); }

.response-detail__body {
  padding: var(--s-4) var(--s-12) var(--s-16);
  border-top: var(--rule-w) solid var(--rule-softer);
}
.response-detail__meta {
  display: flex;
  gap: var(--s-10);
  align-items: baseline;
  flex-wrap: wrap;
  margin: var(--s-10) 0 0;
  font: 400 var(--t-11-5) / 1.5 var(--font-sans);
}

/* A response example can run to hundreds of lines, so it scrolls in its own
   box rather than burying everything under it. The block carries tabindex so
   the scroll is reachable from the keyboard. */
.response-detail__body pre.code-block {
  max-height: 24rem;
  overflow: auto;
}

/* --- the payload shape --------------------------------------------------- */

.tree-toolbar {
  display: flex;
  gap: var(--s-14);
  margin-bottom: var(--s-8);
  font: 400 var(--t-11) / 1.6 var(--font-sans);
}

.schema-tree { margin: 0; }
/* Each level indents, and the rule makes the run of a branch visible without
   the indent alone having to carry it. */
.schema-tree .schema-tree {
  margin-left: var(--s-8);
  padding-left: var(--s-12);
  border-left: var(--rule-w) solid var(--rule);
}

.field-node,
.field-branch > summary {
  padding: var(--s-5) 0;
}
.field-branch > summary {
  cursor: pointer;
  list-style-position: outside;
}
.field-branch > summary::marker { color: var(--ink-55); }
.field-branch > summary:hover .field-node__name { text-decoration: underline; }
.field-branch > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-node__line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-8);
}
.field-node__name { font: 500 var(--t-12-5) / 1.4 var(--font-mono); overflow-wrap: anywhere; }
.field-node__type { font: 400 var(--t-11-5) / 1.4 var(--font-mono); color: var(--ink-70); }
.field-node__req { font: 400 var(--t-10-5) / 1.4 var(--font-mono); }
.field-node__note { font: 400 var(--t-11) / 1.5 var(--font-sans); color: var(--ink-55); }
.field-node__desc {
  font: 400 var(--t-11-5) / 1.5 var(--font-sans);
  color: var(--ink-70);
  flex: 1 1 20ch;
  min-width: 0;
}

@media (max-width: 48rem) {
  .schema-tree .schema-tree { margin-left: var(--s-4); padding-left: var(--s-8); }
  .field-branch > summary { padding: var(--s-8) 0; min-height: var(--h-44); }
  .field-node__desc { flex-basis: 100%; }
}

@media (forced-colors: active) {
  .response-summary:focus-visible,
  .field-branch > summary:focus-visible { outline: 2px solid Highlight; }
}

/* One-of variants are alternatives, not members, so they are numbered rather
   than run together as if they all applied at once. */
.schema-tree--variants > li + li { border-top: var(--rule-w) dashed var(--rule); }

.field-branch__source {
  margin: var(--s-4) 0 var(--s-8);
  font: 400 var(--t-11) / 1.5 var(--font-sans);
  color: var(--ink-55);
}

/* WCAG 2.2 target size: these are text buttons, so the room comes from
   padding rather than from a box that would look like something else. */
.tree-toolbar .link-quiet {
  min-height: 1.5rem;
  padding: var(--s-4) 0;
}