/* Quantum-Like Lab by Ethan Dickey. Reference and feedback remain readable. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal, #61e2c4);
  outline-offset: 3px;
}
/* The inset ring remains visible inside the clipped WebGL surface. */
.ql-network-surface canvas:focus-visible {
  outline: 3px solid #b8fff0 !important;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 7px #061722;
}
.network-playground #network-playground-status,
.network-playground:not([data-network-tool="move"]) #network-playground-status,
.network-playground [role="status"],
.network-playground [role="alert"],
.dialog-error,
.error-banner,
#pending-banner,
#dialog-pending,
#toast {
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
@media (forced-colors: active) {
  .ql-network-surface canvas:focus-visible { outline-color: Highlight !important; }
}
/* Keep short instructions readable in Normal as well as Beginner. */
body:not([data-level="basic"]) .play-bit-picker label,
body:not([data-level="basic"]) .play-pattern-picker > span,
body:not([data-level="basic"]) .play-strength-picker > span:first-child,
body:not([data-level="basic"]) .play-gate small,
body:not([data-level="basic"]) .play-strength-scale small,
body:not([data-level="basic"]) .play-controls .play-baseline-note,
body:not([data-level="basic"]) .play-controls .play-gate-note,
body:not([data-level="basic"]) .play-current-result,
body:not([data-level="basic"]) .play-prepared-note,
body:not([data-level="basic"]) .play-prepared-note button,
body:not([data-level="basic"]) .play-glitch-actions button,
#activity-strip,
#activity-strip button {
  font-size: .875rem;
  line-height: 1.5;
}

/* Stable announcements are updated only after a completed user action. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Enlarged text uses another row instead of pushing controls beyond the page. */
.topbar > * { max-width:100%; min-width:0; }
.experience-mode { flex-wrap:wrap; min-width:0; }
.experience-mode .segmented, .register .segmented { flex-wrap:wrap; max-width:100%; }
.experiment-heading { flex-wrap:wrap; align-items:start; }
.experiment-heading > :first-child { flex:1 1 18rem; min-width:0; }
.experiment-heading > button { max-width:100%; white-space:normal; }
@media(max-width:760px) {
  .topbar .brand { flex:1 1 100%; white-space:normal; }
  .topbar .brand > span { min-width:0; }
  .experience-mode { flex:1 1 100%; }
  .experience-mode .segmented { width:100%; }
  .experience-mode .segmented button { flex:1 1 auto; }
  .top-actions { flex-wrap:wrap; }
  .top-actions > * { max-width:100%; white-space:normal; }
}