/* Quantum-Like Lab by Ethan Dickey. A visible reference, a playful network, and optional depth. */
#sandbox-intro, #sandbox-metrics { display:none; }
body[data-level="basic"] #sandbox-intro,
body[data-level="basic"] #sandbox-metrics,
body[data-level="normal"] #sandbox-intro[data-reference-visible="true"] { display:block; }
body[data-level="basic"] [data-advanced],
body[data-level="basic"] .register,
body[data-level="basic"] .workspaces,
body[data-level="basic"] #wide-workspace,
body[data-level="basic"] .view-toolbar,
body[data-level="basic"] .side-column,
body[data-level="basic"] #encoded-state,
body[data-level="basic"] #community-controls,
body[data-level="basic"] #mobile-results,
body[data-level="basic"] #network-gate-button,
body[data-level="basic"] #pattern-button,
body[data-level="basic"] #math-guide-link,
body[data-level="basic"] #examples-button,
body[data-level="basic"] #presentation-button,
body[data-level="basic"] #performance-button,
body[data-level="basic"] .play-pattern-picker,
body[data-level="basic"] .play-gate strong > span,
body[data-level="basic"] #play-controls [data-play-bits="1"] .play-bit-picker,

body[data-level="basic"] #network-state-overlay,
body[data-level="basic"]:not([data-sandbox-history="true"]) .timeline-card { display:none!important; }
body[data-level="basic"] .experiment { grid-template-columns:minmax(0,1fr); max-width:1280px; margin-inline:auto; padding-top:16px; }
body[data-level="basic"] .graph-column { min-width:0; }
body[data-level="basic"] .topbar { min-height:64px; gap:12px; padding-block:10px; }
body[data-level="basic"] #subhead,
body[data-level="basic"] .experiment-heading .eyebrow,
body[data-level="basic"] .brand small { display:none; }
body[data-level="basic"] .experiment-heading { margin-bottom:9px; }
body[data-level="basic"] .experiment-heading h1 { font-size:clamp(1.4rem,2.15vw,1.85rem); }
body[data-level="basic"] .graph-column > .primary-actions { margin:5px 0 12px; gap:8px; }
body[data-level="basic"] .primary-actions button { min-height:38px; padding:8px 12px; font-size:.87rem; }

/* Current and target use the same group colors as the network. */
.beginner-comparison { container-type:inline-size; margin:0 0 8px; padding:12px; border:1px solid #3b626f; border-radius:11px; background:#0d2530; }
.beginner-comparison-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 14px; margin-bottom:9px; }
.beginner-comparison-heading > strong { font-size:.93rem; color:#e7f4f2; }
.beginner-comparison-heading strong > span,.beginner-comparison-heading > span { font-size:.85rem; color:#b4ced5; font-weight:400; }
.beginner-group-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:9px; }
.beginner-group-strip:has(> :nth-child(3)) { grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); }
.beginner-group-strip.beginner-many-groups { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(100%,12rem); overflow-x:auto; padding:2px 2px 9px; }
.beginner-group-card { text-align:left; padding:8px 10px; background:#091c27; border:1px solid color-mix(in srgb,var(--group-color) 48%,#18303b); border-left:4px solid var(--group-color); border-radius:7px; white-space:normal; color:#dfeaed; min-width:0; }
.beginner-group-card.is-linked,.beginner-group-card[aria-pressed="true"] { background:#203945; outline:2px solid var(--group-color); outline-offset:1px; }
.beginner-group-title { display:flex; align-items:center; gap:7px; color:var(--group-color); font-size:.86rem; margin-bottom:4px; }
.beginner-group-title i { width:8px; height:8px; background:var(--group-color); border-radius:50%; }
.beginner-arrow-row { display:grid; grid-template-columns:3.25rem 3rem minmax(2.625rem,1fr); align-items:center; gap:7px; margin-top:3px; }
.beginner-arrow-row > span:first-child { font-size:.82rem; color:#c1d4dc; }
.beginner-arrow-row .ql-phase-marker { color:var(--group-color); }
.beginner-arrow-row .ql-phase-marker svg { width:1.5625rem; height:1.5625rem; flex-basis:1.5625rem; }
.beginner-arrow-row .ql-phase-target svg { opacity:.82; }
.beginner-share { position:relative; display:block; background:#203744; min-height:1.5rem; border-radius:4px; overflow:hidden; }
.beginner-share > i { position:absolute; inset:0 auto 0 0; background:var(--group-color); opacity:.32; }
.beginner-share > b { position:relative; display:block; text-align:right; padding:0 5px; color:#f1f6f6; font-size:.82rem; line-height:1.5rem; font-weight:500; font-variant-numeric:tabular-nums; }
.beginner-reference-help { margin:9px 1px 0; }
.beginner-reference-help summary,.beginner-view-details summary { width:fit-content; cursor:pointer; color:#b4dcd2; font-size:.84rem; padding-block:4px; }
.beginner-comparison-note { margin:6px 0 0; font-size:.87rem; color:#c1d2dc; line-height:1.5; }
.beginner-reference-tools { display:flex; flex-wrap:wrap; align-items:start; justify-content:space-between; gap:8px 14px; margin-bottom:8px; }
.beginner-reference-tools > button { font-size:.84rem; padding:6px 10px; }
.beginner-view-details { flex:1 1 190px; }
.beginner-view-tools { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:7px 0; }
.beginner-view-tools .segmented { flex:none; }
.beginner-view-tools button { min-height:38px; padding:8px 10px; font-size:.84rem; }
.beginner-view-tools button[aria-pressed="true"] { background:#215545; color:#d4fae9; border-color:#6aa691; }
.beginner-view-tools [data-beginner-view-note] { margin:0; flex:1 1 250px; color:#b7ccd6; font-size:.84rem; line-height:1.5; }
.beginner-register-note { font-size:.82rem; color:#b0c9d3; }

/* Scientific indicators are comparisons, not learning progress. */
.sandbox-score-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.sandbox-score { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 14px; background:#0e2631; border:1px solid #314c5a; border-radius:9px; }
.sandbox-score > span { font-size:.93rem; }
.sandbox-score > strong { color:var(--teal); font-size:1.3rem; font-weight:550; }
.sandbox-score:last-child > strong { color:var(--amber); }
.sandbox-score > small { grid-column:1/-1; color:#bad0dd; line-height:1.5; font-size:.84rem; }
.sandbox-result-note { margin:8px 3px 12px; color:#c1d3dd; font-size:.88rem; line-height:1.5; }
.sandbox-key { display:flex; flex-wrap:wrap; gap:9px 20px; padding:10px 2px; color:#bdd0d9; font-size:.84rem; }
.sandbox-key > span { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.sandbox-key strong { color:#edf5f8; font-weight:550; }
.sandbox-key-dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--teal); margin-right:2px; }
.sandbox-key-dot.bigger { width:17px; height:17px; }
.sandbox-key-colors { width:19px; height:12px; background:linear-gradient(90deg,#50dcc4 45%,transparent 45% 55%,#ffbd71 55%); border-radius:4px; }
.sandbox-key-arrow { color:var(--teal); font-style:normal; font-size:1.35rem; line-height:.8; }
.sandbox-key-line { display:inline-block; width:20px; border-top:2px solid #8ca7bb; margin-right:3px; }

/* Linked network labels are compact graphics. Full text stays in the reference. */
.beginner-network-label { min-width:146px; min-height:62px; padding:6px 8px!important; letter-spacing:0!important; }
.beginner-network-label > strong { display:block; font-size:12px; }
.beginner-label-arrows { display:flex; justify-content:space-between; gap:10px; }
.beginner-label-arrows > span { display:flex; align-items:center; gap:3px; font-size:11px; font-weight:400; color:#d6e3e7; }
.beginner-label-arrows .ql-phase-marker { gap:0; color:var(--group-color); }
.beginner-label-arrows .ql-phase-marker svg { width:24px; height:24px; flex-basis:24px; }
.beginner-label-arrows .ql-phase-sign { display:none; }
.beginner-network-label.is-linked { outline:2px solid currentColor; background:#213b48!important; }
.beginner-inspection p { font-size:.96rem; line-height:1.6; }
.beginner-inspection details { margin-top:16px; border-top:1px solid #355160; padding-top:12px; }
@media(min-width:901px) {
  body[data-level="basic"] #session-safety { display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; padding:7px 3vw; }
  body[data-level="basic"] #session-safety .recovery-summary { flex:1 1 65%; }
  body[data-level="basic"] #session-safety .recovery-details { margin:0; }
  body[data-level="basic"] #session-safety .recovery-details[open],body[data-level="basic"] #session-safety .recovery-offer,body[data-level="basic"] #session-safety .recovery-error,body[data-level="basic"] #session-safety .recovery-warning { flex-basis:100%; }
}
@media(max-width:700px) {
  body[data-level="basic"] .top-actions { margin-left:0; flex-wrap:wrap; }
  .beginner-group-strip:has(> :nth-child(3)) { grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); }
  .beginner-group-strip.beginner-many-groups { grid-template-columns:none; }
  .sandbox-score-row { grid-template-columns:minmax(0,1fr); gap:8px; }
  .beginner-reference-tools { gap:5px 10px; }
}
@media(max-width:470px) {
  .beginner-comparison { padding:9px; }
  .beginner-group-card { padding:7px; }
  .beginner-arrow-row { grid-template-columns:minmax(0,1fr) 2rem; gap:4px; }
  .beginner-arrow-row .ql-phase-marker { gap:0; justify-self:end; }
  .beginner-arrow-row .ql-phase-sign { display:none; }
  .beginner-share { grid-column:1/-1; }
  .beginner-comparison-heading > span { width:100%; }
  .ql-network-surface[data-narrow="true"] .beginner-network-label { min-width:130px; width:130px; min-height:56px; padding:5px 6px!important; }
  .ql-network-surface[data-narrow="true"] .beginner-label-arrows { gap:5px; }
}
/* Use available width before asking beginners to scroll. No smaller type. */
@media(min-width:1101px) {
  body[data-level="basic"] .graph-column { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:18px; align-items:start; }
  body[data-level="basic"] .graph-column > * { grid-column:1/-1; }
  body[data-level="basic"] .graph-column > .experiment-heading { grid-column:1; grid-row:1; }
  body[data-level="basic"] .graph-column > .primary-actions { grid-column:2; grid-row:1; align-self:center; margin:0 0 9px; }
}

@container (min-width:70rem) {
  body[data-level="basic"] .beginner-group-strip:not(:has(> :nth-child(3))) .beginner-group-card { display:grid; grid-template-columns:5.1rem minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:center; }
  body[data-level="basic"] .beginner-group-strip:not(:has(> :nth-child(3))) .beginner-group-title { margin:0; white-space:nowrap; }
  body[data-level="basic"] .beginner-group-strip:not(:has(> :nth-child(3))) .beginner-arrow-row { margin:0; grid-template-columns:3.1rem 2.4rem minmax(2.5rem,1fr); gap:5px; }
}

/* The normalized group picture stays explicitly distinct from full-state match. */
.beginner-shared-note { margin:8px 1px 0; color:#bed4dc; font-size:.86rem; line-height:1.5; }