button, select, input { font: inherit; }
.controls { display: grid; gap: 0.8rem; align-items: end; margin-bottom: 1rem; }
.controls label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.7rem; font-weight: 750; }
.controls select { min-height: 2.7rem; }
.controls .check-control { grid-template-columns: auto 1fr; align-items: center; min-height: 2.7rem; }
.controls button { min-height: 2.8rem; }

.pipeline { margin-bottom: 1rem; padding: 1rem; color: #eafdfb; background: var(--navy); border-radius: 1rem; }
.pipeline-heading, .panel-heading { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.pipeline h2 { color: #fff; }
#pipeline-status { max-width: 18rem; padding: 0.4rem 0.7rem; color: #a9c0dd; background: rgb(255 255 255 / 8%); border-radius: 999px; font-size: 0.67rem; text-align: right; }
.pipeline-track { display: grid; gap: 0.55rem; margin-top: 1rem; }
.pipeline-node { padding: 0.75rem; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 0.65rem; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.pipeline-node span, .pipeline-node strong, .pipeline-node small { display: block; }
.pipeline-node span { color: #8ba7ca; font-size: 0.62rem; }
.pipeline-node strong { margin-top: 0.18rem; color: #5ce5d7; font-size: 0.76rem; }
.pipeline-node small { margin-top: 0.15rem; color: #afc1d9; font-size: 0.62rem; }
.pipeline-node.is-active { background: rgb(80 227 212 / 16%); border-color: #50e3d4; transform: translateY(-2px); }
.pipeline-node.is-error { background: rgb(216 91 117 / 17%); border-color: #e27a91; }
.api-node { border-left: 0.22rem solid #e6a84a; }
.flow-arrow { display: none; align-self: center; color: #50e3d4; text-align: center; }
.pipeline-note { margin: 0.8rem 0 0; color: #9fb4d0; font-size: 0.67rem; }

.workspace { display: grid; gap: 1rem; }
.request-data, .a11y-inspector { display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.request-data div, .a11y-inspector div { padding: 0.65rem; background: #edf1ff; border-radius: 0.55rem; }
.request-data dt, .a11y-inspector dt { color: var(--muted); font-size: 0.65rem; }
.request-data dd, .a11y-inspector dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; font-weight: 800; }
.feedback { min-height: 7rem; margin-top: 1rem; padding: 1rem; background: var(--soft); border: 1px solid var(--line); border-radius: 0.7rem; }
.feedback p { margin-bottom: 0; color: var(--muted); }
.feedback.is-loading { border-color: #e6a84a; }
.feedback.is-success { color: #176a59; background: #effbf7; border-color: #91d7c5; }
.feedback.is-error { color: #8c203a; background: #fff5f7; border-color: #e7b2be; }
#retry-button { margin-top: 0.75rem; }

.log-panel, .source-panel { margin-top: 1rem; }
.quiet-button { min-height: 2.25rem; padding-inline: 0.65rem; color: var(--blue); background: #edf1ff; border: 1px solid #bec9f8; font-size: 0.68rem; }
.event-log { display: grid; gap: 0.45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.event-log li { padding: 0.68rem; background: #f3f6fa; border-left: 0.25rem solid #6978d7; border-radius: 0.45rem; font-size: 0.7rem; }
.event-log li[data-kind="request"] { border-left-color: #e59a2f; }
.event-log li[data-kind="response"] { border-left-color: #22a884; }
.event-log li[data-kind="error"] { border-left-color: #d45d79; }
.event-log li[data-kind="retry"] { border-left-color: #8b78d7; }

.source-panel { display: grid; gap: 1rem; }
.source-panel p { color: var(--muted); }
.source-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.source-tabs button { min-height: 2.5rem; color: var(--muted); background: #fff; border: 1px solid #cdd5e0; }
.source-tabs button[aria-selected="true"] { color: #fff; background: var(--blue); }
#source-code { min-height: 25rem; margin: 0; padding: 1rem; overflow: auto; color: #dffdfa; background: var(--navy); border-radius: 0.75rem; font: 0.72rem/1.55 "Cascadia Code", Consolas, monospace; }

@media (prefers-reduced-motion: reduce) { .pipeline-node { transition: none; } }
@media (min-width: 46rem) {
  .controls { grid-template-columns: 1.2fr repeat(2, 0.8fr) 1fr 0.8fr auto; }
  .workspace { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .pipeline-track { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
  .flow-arrow { display: block; }
  .source-panel { grid-template-columns: 0.55fr 1.45fr; align-items: start; }
}
@media (max-width: 34rem) {
  .pipeline-heading, .panel-heading { flex-direction: column; }
  #pipeline-status { text-align: left; }
}