@layer components {
  /* Form groups and repeatable rows */
  .group { min-width: 0; margin: 1.2rem 0 0; padding: 1.6rem 1.8rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .group > legend { float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; font-size: 1.5rem; font-weight: 650; }
  .group > legend + * { clear: both; }
  .group > * + * { margin-top: 1.1rem; }
  .group.subgroup { min-width: 0; margin: 1rem 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .group.subgroup > * + * { margin-top: 1rem; }
  .rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
  .row { position: relative; padding: 1.1rem 0 .3rem; border-top: 1px solid var(--line); }
  .rows > .row:first-child { border-top: 0; padding-top: .3rem; }
  .rows.is-numbered > .row { counter-increment: row; padding-left: 3.8rem; }
  .rows.is-numbered > .row::before { content: counter(row); position: absolute; left: 0; top: 3rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-2); font-family: var(--mono); font-size: 1.3rem; font-weight: 600; color: var(--ink-2); }
  .rows.is-numbered > .row:first-child::before { top: 2.2rem; }
  .row-grid { display: grid; gap: .8rem; }
  .row-grid .label { font-size: 1.25rem; font-weight: 550; color: var(--ink-2); margin-bottom: .3rem; }
  .row-grid .field { min-height: 3.6rem; padding: .45rem .9rem; font-size: 1.4rem; }
  .row-grid .field.mono { font-size: 1.3rem; }
  .row-tools { display: flex; justify-content: flex-end; gap: .1rem; margin-top: .3rem; }
  .row-handle { cursor: grab; touch-action: none; font-size: 1.4rem; line-height: 1; }
  .row.is-dragging { z-index: 2; border-radius: var(--r-control); background: var(--surface); box-shadow: var(--shadow-float); }
  .option-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 7.2rem; }
  .option-texts { display: grid; gap: .4rem; }
  .option-language { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; gap: .6rem; }
  .language-tag { display: inline-grid; place-items: center; height: 2.2rem; padding: 0 .5rem; border-radius: var(--r-control); background: var(--router-soft); color: var(--router-ink); font-family: var(--mono); font-size: 1.1rem; font-weight: 600; }
  .option-grid:has(.option-texts) { align-items: start; }
  .pair-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .request-grid { grid-template-columns: 11rem minmax(0, 1fr); }
  .triple-grid { grid-template-columns: minmax(0, 1fr) 9.6rem minmax(0, 1.2fr); }
  .phrase-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .more { margin-top: 1.1rem; }
  .more > summary { cursor: pointer; font-size: 1.35rem; font-weight: 550; color: var(--ink-2); }
  .more > summary:hover { color: var(--ink); }
  .more[open] > summary { margin-bottom: .9rem; }
  .more > * + * { margin-top: 1rem; }
  .more > summary[hidden] + * { margin-top: 0; }
  .pairs { margin-top: 1.1rem; }
  /* An API call reads as its request, then what to do with the response. */
  /* A folded API call: one line naming it, so the conditions below stay in view. */
  .call > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); cursor: pointer; font-size: 1.3rem; }
  .call > summary:hover { border-color: var(--ink-3); }
  .call > summary { list-style: none; }
  .call > summary::-webkit-details-marker { display: none; }
  .call > summary::before { content: ""; flex: none; align-self: center; width: .6rem; height: .6rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); rotate: -45deg; transition: rotate .12s ease; }
  .call[open] > summary::before { rotate: 45deg; }
  .call[open] > summary { margin-bottom: 1.2rem; }
  .call-method { font-weight: 700; color: var(--router-ink); }
  .call-method:empty, .call-saved:empty { display: none; }
  .call-summary code { min-width: 0; padding: 0; border: 0; background: none; overflow-wrap: anywhere; }
  .call-saved { color: var(--ink-2); }
  .call-saved::before { content: "→ "; }
  .call > * + * { margin-top: 1rem; }
  .action-part-title { margin: 1.6rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 1.2rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .action-part-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .request-body { margin-top: 1.1rem; }
  .request-body-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .request-body-head .label { margin: 0; }
  .request-body-mode.field { width: auto; min-height: 3rem; padding-block: .2rem; font-size: 1.3rem; }
  .request-body-part { min-width: 0; margin: .6rem 0 0; padding: 0; border: 0; }
  .request-body-part > .pairs { margin-top: 0; }
  .request-body-part > .pairs > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .request-body > .hint { margin: .6rem 0 0; }
  .action-answers { margin-top: 1.2rem; }
  .link-button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .25rem; cursor: pointer; }
  .link-button:hover { color: var(--focus); }

  /* A route: actions, then conditions, then the fallback. */
  .route { margin-top: 1rem; padding: 1.2rem 1.4rem .4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
  .rows > .route:first-child { border-top: 1px solid var(--line); padding-top: 1.2rem; }
  .route-step + .route-step { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
  .route-step > .label { font-size: 1.35rem; }
  .action { margin-top: .6rem; padding: 1rem 1rem .3rem; border: 1px solid var(--action-line); border-radius: var(--r-control); background: var(--action-bg); }
  .rows > .action:first-child { border-top: 1px solid var(--action-line); padding-top: 1rem; }
  .action-type { max-width: 24rem; }
  .guard-grid { display: grid; grid-template-columns: auto minmax(0, 2fr) 10rem minmax(0, 1.3fr) auto minmax(0, 2fr); align-items: center; gap: .6rem; }
  .guard-grid .field { min-height: 3.6rem; padding: .45rem .9rem; font-size: 1.35rem; }
  .guard-word { font-size: 1.3rem; font-weight: 550; color: var(--ink-3); }
  .guard-custom { margin-top: .5rem; }
  .guard-custom > summary { width: fit-content; cursor: pointer; font-size: 1.3rem; font-weight: 550; color: var(--ink-3); }
  .guard-custom > summary:hover, .guard-custom[open] > summary { color: var(--ink-2); }
  .guard-custom > .field { width: 100%; margin-top: .5rem; min-height: 3.6rem; font-size: 1.35rem; }
  /* What a data-driven menu's source could name right now, as clickable pills instead of a hidden datalist. */
  .list-available { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 0; font-size: 1.3rem; color: var(--ink-3); }
  /* In the side panel a condition takes two lines: what is tested, then where it leads. */
  @container panel (max-width: 60rem) {
    .guard-grid { grid-template-columns: auto minmax(0, 1fr) 9.5rem minmax(0, 8rem); row-gap: .5rem; }
    .guard-grid > :last-child { grid-column: 2 / -1; }
    /* An address is the long part of a call, so it gets the full row under its method. */
    .request-grid { grid-template-columns: minmax(0, 1fr); }
    .request-grid > :first-child { max-width: 14rem; }
  }
  /* When the panel itself is narrow, multi-column rows stack so nothing is squeezed. */
  @container panel (max-width: 34rem) {
    .option-grid, .triple-grid, .request-grid, .pair-grid { grid-template-columns: minmax(0, 1fr); }
    .guard-grid { grid-template-columns: auto minmax(0, 1fr); }
  }
  @media (max-width: 879px) {
    .panel-head { padding: 2rem 1.8rem 1.4rem; }
    .panel-body { padding: 0 1.6rem; }
    .panel-actions { margin: 2.4rem -1.6rem 0; padding: 1.2rem 1.6rem 1.6rem; }
    .wrap { padding: 1.2rem 1.6rem 6rem; }
  }
}