.panel-row { display: flex; flex-wrap: wrap; align-items: start; gap: 1rem; }
.panel-column { display: flex; flex-direction: column; gap: .75rem; }
.panel-control { min-width: 0; }
.panel-current, .panel-feedback { font-size: .85rem; margin: .25rem 0; }
.panel-current { color: #465469; }
.panel-control label { margin-block: 0 .5rem; }
.panel-control input:not([type="checkbox"]) { max-width: 100%; box-sizing: border-box; }

/* Author typography follows container inheritance, including native controls. */
.panel-control input, .panel-control button { font: inherit; color: inherit; text-align: inherit; }
[hidden] { display: none !important; }

/* Constrain intrinsic control/text widths without clipping content or focus rings. */
body { max-width: 88rem; }
#panel-content { container-type: inline-size; }
#panel-content > * { margin-inline: auto; }
#panel-content * { box-sizing: border-box; min-width: 0; }
#panel-content p { margin-block: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.panel-row > *, .panel-column > * { max-width: 100%; }
.panel-control select { width: 100%; max-width: 100%; font: inherit; color: inherit; }
.panel-control label { display: block; }
.panel-control button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.panel-grid { display: grid; grid-template-columns: var(--panel-columns); }
@container (max-width: 800px) {
  .panel-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Compact shared header for live and practice panels. */
body { margin-block: .75rem; }
.panel-status-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid #b5c2d3; }
.panel-status-bar h1 { margin: 0; font-size: 1rem; }
.panel-status-bar p { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
#panel-status { color: #465469; }
#panel-error:empty { display: none; }

.panel-feedback:empty { display: none; }

#panel-status.panel-status-failure { color: #a32121; }