/* Quantum-Like Lab by Ethan Dickey. Tools stay with their network, independent of the inspector. */
.network-playground { margin:0 0 7px; padding:8px 10px; border:1px solid #355569; border-radius:11px; background:#102430; font-size:.875rem; }
.network-playground [hidden] { display:none !important; }
.network-tool-row,.network-tool-buttons,.network-view-actions,.network-paint-buttons,.network-tool-secondary { display:flex; align-items:center; gap:6px; }
.network-tool-row { flex-wrap:wrap; justify-content:space-between; gap:7px 12px; }
.network-tool-buttons { flex-wrap:wrap; align-items:flex-start; }
.network-playground button { padding:7px 10px; min-height:38px; font-size:.875rem; border-radius:7px; white-space:nowrap; }
.network-tool-buttons button { display:inline-flex; gap:6px; align-items:center; }
.network-tool-buttons button > span:first-child { font-size:1.07rem; line-height:1; }
.network-playground [aria-pressed="true"] { border-color:#86ded0; background:#214a49; color:#efffff; box-shadow:inset 0 0 0 1px #86ded03b; }
.network-playground button:focus-visible,.network-playground input:focus-visible,.network-playground summary:focus-visible { outline:3px solid #b8fff0; outline-offset:2px; }
.network-view-actions { margin-left:auto; }
.network-view-actions button { color:#d0e5ed; background:#10212c; }
.network-tool-context { border-top:1px solid #304754; margin-top:8px; padding-top:8px; }
.network-tool-context > p { margin:0 0 8px; color:#d1e3e9; line-height:1.45; font-size:.875rem; }
.network-match-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.network-connect-controls { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:10px; min-height:42px; }
.network-connect-controls button { width:180px; }
.network-connect-controls [data-connect-summary] { font-size:.875rem; line-height:1.4; min-height:2.8em; display:flex; align-items:center; overflow-wrap:anywhere; }
.network-paint-buttons button:first-child { border-left:3px solid #7bd6ff; }
.network-paint-buttons button:last-child { border-left:3px solid #f3a2e8; }
.network-paint-buttons span { display:inline-flex; min-width:17px; justify-content:center; color:#e3f3f5; }
.network-paint-buttons button { min-width:88px; }
.network-match-controls [data-network-action="commit"] { min-width:180px; }
.network-playground .network-within { display:flex; flex-direction:row; align-items:center; gap:7px; font-size:.875rem; color:#d4e4e9; margin:0; }
.network-within input { width:18px; height:18px; margin:0; }
.network-match-summary,.network-match-limitation { flex:1 0 100%; font-size:.875rem; margin:0; line-height:1.4; }
.network-match-summary { color:#c9e9e2; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:4px 12px; min-height:calc(2.8em + 4px); }
.network-match-coverage { grid-column:1 / -1; }
.network-new-pair,.network-existing-pair { display:inline-flex; align-items:center; gap:5px; }
.network-new-pair::before,.network-existing-pair::before { content:""; width:17px; border-top:3px solid #73f0cb; }
.network-existing-pair::before { border-color:#ffca85; border-top-style:dashed; }
.network-match-limitation { color:#f1cf9b; min-height:2.8em; }
/* Preview feedback reserves its usual two lines without clipping longer text. */
.network-playground [data-match-limitation][hidden] { display:block !important; visibility:hidden; }
.network-matching-start { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:#d4e4e9; flex:1 0 100%; line-height:1.45; }
.network-matching-start > span { flex:1 1 300px; }
.network-matching-start button { white-space:normal; text-align:left; }
.network-tool-secondary { gap:12px; margin-top:7px; align-items:flex-start; }
.network-tool-secondary > button { color:#afc4ce; padding:5px 7px; min-height:34px; }
.network-playground details { padding:0; margin:0; border:0; background:transparent; color:#adc7d2; font-size:.875rem; }
.network-playground summary { padding:7px 0; cursor:pointer; }
.network-playground details > div { display:flex; flex-wrap:wrap; align-items:end; gap:7px; margin-top:6px; }
.network-playground details label { margin:0; font-size:.875rem; }
.network-playground .network-more-tools { align-self:stretch; }
.network-playground .network-more-tools > summary { padding:8px 9px; min-height:38px; border:1px solid #355569; border-radius:7px; color:#d2e4ec; }
.network-playground .network-more-tools > div { align-items:center; }
.network-playground input[type="number"] { width:78px; padding:6px; margin-top:4px; }
.network-playground .network-hammer-controls { display:flex; align-items:center; flex-direction:row; gap:9px; max-width:340px; margin:0; font-size:.875rem; }
.network-hammer-controls input { max-width:145px; margin:0; }
.network-hammer-controls span { min-width:42px; color:#bacfd9; }
.network-play-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:5px 10px; color:#cae3e7; font-size:.875rem; line-height:1.45; }
.network-playground[data-network-tool="move"] .network-play-foot:has(#network-playground-status:empty):has([data-network-invitation][hidden]):has([data-network-update-prominent][hidden]) { display:none; }
.network-playground:not([data-network-tool="move"]) .network-play-foot { min-height:max(38px,2.9em); margin-top:6px; }
.network-update-prominent { margin-left:auto; }
.network-update-extra { display:inline-flex; }
.network-playground [data-network-action="update-pattern"] { min-width:120px; padding:7px 9px; }
.network-playground:not([data-network-tool="move"]) #network-playground-status { flex:1 1 180px; min-width:0; }
#network-playground-status { overflow-wrap:anywhere; }
#network-playground-status:empty { display:none; }
.network-play-foot:not(:has(#network-playground-status:empty)),.network-play-foot:has([data-network-invitation]:not([hidden])) { margin-top:6px; }
.network-invitation { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto; color:#adc4cf; }
.network-invitation button { min-height:32px; padding:4px 7px; color:#c9dae2; }
body[data-level="basic"] .network-playground { margin-bottom:6px; }
@media(max-width:650px) {
  .network-playground { padding:7px; }
  .network-tool-row { gap:7px; }
  .network-tool-buttons { width:100%; gap:5px; }
  .network-tool-buttons > button { flex:1 1 auto; justify-content:center; white-space:normal; padding:7px 6px; min-height:44px; }
  .network-playground .network-more-tools { flex:1 0 100%; }
  .network-playground .network-more-tools > summary { min-height:42px; }
  .network-playground .network-more-tools > div > button { min-height:44px; }
  .network-view-actions { width:100%; justify-content:space-between; margin:0; }
  .network-view-actions button { flex:1; padding:7px; min-height:42px; white-space:normal; }
  .network-invitation { margin-left:0; }
  .network-match-controls { gap:8px; }
  .network-connect-controls { grid-template-columns:minmax(0,1fr); gap:5px; }
  .network-connect-controls button { width:auto; justify-self:start; }
  .network-connect-controls [data-connect-summary] { min-height:1.4em; }
}

/* Beginner uses the same real evolution control, without a competing selection action. */
.network-view-actions [data-network-action="evolve"][data-recommended="true"] { background:#255f54; border-color:#80d9bd; color:#f1fff9; }