/* Quantum-Like Lab, built under Ethan Dickey's guidance and feedback. */
#normal-transition:not([hidden]) { display:grid; gap:8px; padding:14px 16px; margin:0 0 12px; border:1px solid #537c79; border-radius:12px; background:#102d34; line-height:1.5; }
#normal-transition strong { font-size:1.05rem; }
#normal-transition small { font-size:.9rem; color:#bfd0d8; }
#normal-transition .button-row { display:flex; gap:8px; flex-wrap:wrap; }
.watch-group-shares { display:flex; flex-wrap:wrap; gap:8px 18px; padding:10px 0; }
.watch-group-shares span { display:flex; gap:8px; align-items:center; font-size:1rem; }
.watch-group-shares b { font-variant-numeric:tabular-nums; min-width:4.5ch; }
.tutorial-card { min-width:0; max-width:100%; }
.tutorial-card .tutorial-copy { min-width:0; }
.tutorial-card button { white-space:normal; }
@media (max-width:600px) {
  #normal-transition:not([hidden]) { padding:12px; }
  .watch-actions { flex-wrap:wrap; }
  .watch-actions button { max-width:100%; white-space:normal; }
}

/* The Beginner guide has a stable home immediately after the common bar. */
body[data-level="basic"] > #beginner-tutorial-slot { max-width:1700px; margin:0 auto; padding:12px 3vw 0; }
body[data-level="basic"] > #beginner-tutorial-slot:empty,
body[data-level="basic"] > #beginner-tutorial-slot:has(> [hidden]) { display:none; }
body[data-level="basic"] > #beginner-tutorial-slot > #tutorial { margin:0 0 12px; }

/* State replacement is an explicit edit, distinct from opening an inspector. */
button.state-replace { border:2px solid #d3aa6a; background:#342e22; color:#ffe2b5; font-weight:600; white-space:normal; line-height:1.35; }
button.state-replace:hover { background:#49402f; }
.state-change-note { font-size:.9rem; line-height:1.5; color:#dbc8a9; white-space:normal; max-width:56ch; }
.network-playground .network-update-prominent,
.network-playground .network-update-extra { display:grid; gap:6px; max-width: min(100%,32rem); min-width:0; }
.network-playground button.state-replace { white-space:normal; justify-self:start; }