/* CellExplorer — Shared explorer-series shell. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #060812; color: #e6e8f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100%; }

/* ===== Topbar ===== */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: #0b0f1f;
  border-bottom: 1px solid #1c2236;
  z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.app-logo { width: 28px; height: 28px; object-fit: contain; }
.app-title { font-size: 15px; font-weight: 600; letter-spacing: 0.2px; }
.hint { font-size: 12px; color: #8e92a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 6px; }
.topbar-sep { width: 1px; height: 22px; background: #2a3148; margin: 0 4px; }
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #161b2e; color: #cfd3e5;
  border: 1px solid #2a3148; border-radius: 5px;
  padding: 5px 10px; font-size: 12px; cursor: pointer;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
.btn-ico { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.btn-ico path, .btn-ico circle, .btn-ico line, .btn-ico rect { vector-effect: non-scaling-stroke; }
.action-btn:hover { background: #1d2440; }
.action-btn.toggle { color: #8a90a8; }
.action-btn.toggle.on { background: #1d4a5a; color: #e6f0ff; border-color: #3a8cb4; }

/* ===== Canvas ===== */
#canvas-area { position: relative; flex: 1 1 auto; min-height: 0; background: radial-gradient(ellipse at center, #0a1422 0%, #060812 70%); }
#scene-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 14px; color: #8e92a8;
}

.hover-tip {
  position: absolute; pointer-events: none;
  background: rgba(10, 14, 30, 0.94);
  border: 1px solid rgba(90, 200, 212, 0.55);
  color: #e6e8f0;
  padding: 5px 9px; border-radius: 5px; font-size: 12px;
  transform: translate(14px, 14px);
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.hover-tip .tip-name { font-weight: 600; letter-spacing: 0.01em; }
.hover-tip .tip-sub  { color: #9aa6c4; font-size: 11px; margin-top: 2px; }

/* ===== Floating panels ===== */
.floating-panel {
  position: absolute; z-index: 4;
  background: rgba(12, 16, 30, 0.94);
  border: 1px solid #2a3148; border-radius: 7px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
}
.floating-panel[hidden] { display: none; }
.panel-header {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; background: #131a30;
  border-bottom: 1px solid #2a3148;
  border-radius: 7px 7px 0 0; cursor: grab;
  user-select: none;
}
.panel-header-title { font-size: 12px; font-weight: 600; color: #cfd3e5; }
.panel-header-spacer { flex: 1 1 auto; }
.panel-header-btn {
  background: transparent; border: 0; color: #8e92a8;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 5px;
}
.panel-header-btn:hover { color: #fff; }
.panel-header-search {
  background: #0b0f1f; border: 1px solid #2a3148; color: #cfd3e5;
  border-radius: 4px; padding: 3px 7px; font-size: 11px; width: 110px;
}
.panel-body { padding: 9px 11px; overflow-y: auto; }

/* ===== Shared accordion (collapsible top-level sections) ===== */
.acc-section { border-bottom: 1px solid #1b2433; }
.acc-section:last-child { border-bottom: none; }
.acc-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 9px 4px; color: #c4d0e2; font-size: 12.5px; font-weight: 600;
  text-align: left; user-select: none;
}
.acc-head:hover { color: #fff; }
.acc-section.open > .acc-head {
  color: #eaf6f9;
  background: linear-gradient(90deg, rgba(90,200,212,0.14), rgba(90,200,212,0));
  border-left: 2px solid #5ac8d4; padding-left: 6px;
}
.acc-section.open > .acc-head .acc-ico { color: #b9eef5; }
.acc-ico {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6fb8c2;
}
.acc-ico svg { width: 19px; height: 19px; display: block; }
.acc-title { flex: 1; }
.acc-count { font-size: 10.5px; color: #8e92a8; font-weight: 500; }
.acc-section.open > .acc-head .acc-count { color: #9fdbe4; }
.acc-chev {
  width: 6px; height: 6px; flex: 0 0 auto; margin: 0 2px;
  border-right: 2px solid #6b788f; border-bottom: 2px solid #6b788f;
  transform: rotate(-45deg); transition: transform 0.16s ease;
}
.acc-section.open .acc-chev { transform: rotate(45deg); border-color: #b9eef5; }
.acc-body { display: none; padding: 1px 0 9px 2px; }
.acc-section.open > .acc-body { display: block; }

.cell-types-panel {
  top: 56px; right: 12px; width: 248px;
  max-height: calc(100vh - 80px);
}
.cell-types-panel .panel-body { max-height: calc(100vh - 140px); }
.overlays-panel { top: 56px; right: 272px; width: 232px; }
.info-panel {
  top: 56px; left: 12px; width: 440px;
  min-width: 300px; min-height: 220px;
  max-width: calc(100vw - 24px); max-height: calc(100vh - 72px);
  resize: both; overflow: hidden;
}
/* let the body fill + scroll inside the (resizeable) panel */
#info-panel .panel-body { flex: 1 1 auto; min-height: 0; }
/* visible resize affordance — the native corner grip is invisible on dark bg */
#info-panel::after {
  content: ''; position: absolute; right: 2px; bottom: 2px;
  width: 14px; height: 14px; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 60%, transparent 60%),
    linear-gradient(135deg, transparent 75%, rgba(255,255,255,0.22) 75%, rgba(255,255,255,0.22) 85%, transparent 85%);
  border-bottom-right-radius: 7px;
}
.library-panel { top: 56px; left: 12px; width: 268px; }
.quiz-panel {
  width: 480px; min-width: 320px; min-height: 240px;
  max-height: calc(100vh - 100px);
  top: auto; bottom: 24px;
  left: calc(50% - 240px); right: auto;
}

/* When the library panel is visible, info pops in next to it. */
.info-panel { left: 296px; }
#canvas-area:has(#library-panel[hidden]) .info-panel {
  left: 12px;
  width: 880px;
}

/* ===== Overlay checkboxes ===== */
.panel-sub-title {
  font-size: 10px; color: #6b7090; text-transform: uppercase; letter-spacing: 0.7px;
  margin: 10px 0 4px;
}
.ov-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #cfd3e5;
  padding: 3px 0; cursor: pointer;
}
.ov-check input { accent-color: #5ac8d4; }
.ov-check.quiz-disabled { opacity: 0.45; cursor: not-allowed; }
.ov-check.quiz-disabled input { cursor: not-allowed; }
/* Tools the quiz locks out (labels, auto-rotate) — greyed and unclickable, with
   the reason in the title attribute so the tooltip explains itself. */
.tool-icon.quiz-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.tool-icon.quiz-disabled .tool-state { display: none; }

.cell-type-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.cell-type-btn {
  background: #161b2e; color: #cfd3e5;
  border: 1px solid #2a3148; border-radius: 5px;
  padding: 6px 9px; text-align: left;
  cursor: pointer; font-size: 12.5px;
}
.cell-type-btn:hover { background: #1d2440; border-color: #3a8cb4; }
.cell-type-btn.active { background: #1d4a5a; color: #e6f0ff; border-color: #3a8cb4; }
/* Cell-type picker rendered as a single-open category accordion */
#cell-type-list .acc-section.open > .acc-body { display: flex; flex-direction: column; gap: 4px; padding: 3px 0 9px 4px; }
#cell-type-list .cell-type-btn { width: 100%; }

/* ===== Library ===== */
.organelle-library { display: flex; flex-direction: column; gap: 2px; }
.org-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: 4px;
  cursor: pointer;
}
.org-row:hover { background: #1a2238; }
.org-row.selected { background: #1d3a5a; color: #e6f0ff; }
.org-swatch { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; border: 1px solid rgba(255,255,255,0.18); }
.org-name { font-size: 12.5px; color: #cfd3e5; }
.org-row.selected .org-name { color: #e6f0ff; }
.org-sub { font-size: 10.5px; color: #8e92a8; margin-left: auto; }

/* ===== Info card ===== */
.info-empty { font-size: 12.5px; color: #8e92a8; font-style: italic; }
.info-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.info-sub   { font-size: 12px; color: #8eb7e0; margin-bottom: 8px; }
.info-section-title { font-size: 10px; color: #6b7090; text-transform: uppercase; letter-spacing: 0.7px; margin: 10px 0 4px; }
.info-body { font-size: 13px; line-height: 1.5; color: #cfd3e5; }
.info-image {
  margin: 8px 0 4px;
  padding: 0;
  background: rgba(10, 14, 30, 0.5);
  border: 1px solid #1c2236;
  border-radius: 6px;
  overflow: hidden;
}
.info-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  background: #0a0e1e;
}
.info-image-credit {
  display: block;
  font-size: 10.5px;
  color: #6b7090;
  padding: 5px 8px 6px;
  line-height: 1.35;
}
.info-image-credit a { color: #8eb7e0; text-decoration: none; }
.info-image-credit a:hover { text-decoration: underline; }
.info-facts { margin: 0; padding: 0; list-style: none; }
.info-facts li { font-size: 12.5px; color: #cfd3e5; margin: 3px 0; }
.info-facts strong { color: #8eb7e0; font-weight: 600; margin-right: 4px; }
.info-steps { margin: 2px 0 4px; padding-left: 18px; }
.info-steps li { font-size: 12.5px; color: #cfd3e5; margin: 2px 0; line-height: 1.4; }
.info-steps li strong { color: #cfe0f3; font-weight: 600; }

/* ===== Quiz ===== */
.quiz-body { display: flex; flex-direction: column; gap: 11px; }

.quiz-home { display: flex; flex-direction: column; gap: 10px; }
.quiz-title { font-size: 16px; font-weight: 600; color: #fff; }
.quiz-sub   { font-size: 12.5px; color: #8e92a8; line-height: 1.45; }

.quiz-mode-list { display: flex; flex-direction: column; gap: 6px; }
.quiz-mode-btn {
  background: #161b2e; border: 1px solid #2a3148; color: #cfd3e5;
  border-radius: 6px; padding: 8px 11px; cursor: pointer;
  text-align: left; display: flex; flex-direction: column; gap: 2px;
}
.quiz-mode-btn:hover { background: #1d2440; border-color: #3a8cb4; }
.quiz-mode-name { font-size: 13px; font-weight: 600; color: #e6f0ff; }
.quiz-mode-desc { font-size: 11px; color: #8e92a8; font-weight: 400; }

.quiz-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #8e92a8;
}
.quiz-status strong { color: #cfd3e5; }

.quiz-q {
  background: rgba(10, 14, 30, 0.6);
  border-left: 3px solid #5ac8d4;
  border-radius: 4px;
  padding: 9px 11px;
  font-size: 13px; color: #fff; line-height: 1.45;
}
.quiz-q em { font-style: italic; color: #aaddff; font-weight: 400; }

.quiz-clues { margin: 0 0 0 18px; padding: 0; font-size: 12px; color: #cfd3e5; }
.quiz-clues li { margin: 2px 0; }

.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quiz-choice {
  background: #1a2238; border: 1px solid #3a4868;
  color: #e6e8f0; border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px;
  cursor: pointer; text-align: left;
}
.quiz-choice:hover  { background: #233055; border-color: #4a6088; }
.quiz-choice.correct { background: #1a3a1c; border-color: #4a8c52; color: #b6f9b6; }
.quiz-choice.wrong   { background: #3a1a1c; border-color: #8c4a52; color: #f9b6b6; }
.quiz-choice:disabled { cursor: default; }

.quiz-find-hint { font-size: 12px; color: #8eb7e0; font-style: italic; }

.quiz-feedback {
  min-height: 18px; font-size: 12px;
  padding: 6px 8px; border-radius: 4px;
  background: transparent; color: #cfd3e5;
}
.quiz-feedback.ok { background: rgba(20, 51, 31, 0.7); color: #b6f9b6; border-left: 3px solid #5aaa5a; }
.quiz-feedback.no { background: rgba(51, 17, 17, 0.7); color: #f9b6b6; border-left: 3px solid #aa5a5a; }

.quiz-controls { display: flex; gap: 8px; justify-content: flex-end; }
.quiz-btn {
  background: #161b2e; border: 1px solid #2a3148;
  color: #cfd3e5; border-radius: 5px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.quiz-btn:hover { background: #1d2440; border-color: #3a8cb4; }
.quiz-btn.primary { background: #1d4a5a; border-color: #3a8cb4; color: #e6f0ff; }
.quiz-btn.primary:hover { background: #245a72; }

.quiz-results { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.quiz-score   { font-size: 28px; font-weight: 700; color: #fff; }
.quiz-pct     { font-size: 16px; color: #8e92a8; font-weight: 400; }
.quiz-verdict { font-size: 13px; color: #cfd3e5; font-style: italic; }

/* ===== Processes panel ===== */
/* Right-docked: sits just left of the cell-type panel (right:12 + 248 + 12 gap = 272),
   or against the right edge when the cell-type panel is closed. */
.processes-panel { top: 56px; right: 272px; left: auto; width: 320px; max-height: calc(100vh - 100px); }
#canvas-area:has(#cell-types-panel[hidden]) .processes-panel { right: 12px; }
.processes-body { padding: 6px 10px; }

/* Slide the right-docked panels out from under the Tutor pane (384px wide) when
   it opens, so the Cell types, Processes and Overlays panes stay visible. */
.cell-types-panel, .processes-panel, .overlays-panel { transition: right .25s ease; }
body.tutor-open .cell-types-panel { right: 408px; }   /* 12 + 384 + gap */
body.tutor-open .processes-panel  { right: 668px; }    /* left of the shifted cell-types panel */
body.tutor-open .overlays-panel   { right: 668px; }
/* when the cell-types pane is closed, processes takes the slot just left of the tutor */
body.tutor-open #canvas-area:has(#cell-types-panel[hidden]) .processes-panel { right: 408px; }
.proc-list { display: flex; flex-direction: column; }

/* Process accordion bodies hold the row list. */
#processes-list .acc-body { display: none; }
#processes-list .acc-section.open > .acc-body { display: flex; flex-direction: column; gap: 2px; }
#processes-list .acc-section.empty { display: none; }

.proc-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 4px;
  cursor: pointer;
}
.proc-row:hover { background: #1a2238; }
.proc-row.active { background: #1d3a5a; color: #e6f0ff; }
.proc-name { font-size: 12.5px; color: #cfd3e5; flex: 1; }
.proc-tag { font-size: 10px; color: #8e92a8; }
.proc-row.active .proc-name { color: #e6f0ff; }

.proc-empty { font-size: 12px; color: #8e92a8; padding: 12px 8px; text-align: center; }

/* ===== Process player (main-workspace overlay) ===== */
.player-overlay {
  position: absolute; inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at center, #0e1424 0%, #060812 80%);
}
.player-overlay[hidden] { display: none; }
.player-canvas {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  cursor: grab;
}
.player-canvas:active { cursor: grabbing; }
.player-overlay-title-bar {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 10px;
  z-index: 4; pointer-events: none;
}
.player-overlay-title {
  pointer-events: auto;
  background: rgba(10, 14, 30, 0.78);
  border: 1px solid rgba(90, 200, 212, 0.55);
  color: #e6e8f0;
  padding: 6px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.player-overlay-title-bar .player-btn.close {
  margin-left: auto;
  pointer-events: auto;
  background: #7a1d2a;
  border: 1px solid #c44b5d;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px 7px 30px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  position: relative;
}
.player-overlay-title-bar .player-btn.close::before {
  content: "\00d7";
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-52%);
  font-size: 18px; line-height: 1;
  font-weight: 700;
}
.player-overlay-title-bar .player-btn.close:hover {
  background: #9a2538;
  border-color: #e06478;
}
.player-overlay-bar {
  position: absolute; left: 50%; right: auto; bottom: 14px;
  transform: translateX(-50%);
  width: min(500px, calc(100% - 28px));
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(10, 14, 30, 0.82);
  border: 1px solid #1c2236; border-radius: 8px;
  padding: 10px 12px;
  z-index: 4;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.player-labels {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene-labels {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene-labels[hidden] { display: none; }
.scene-labels .cell3d-label {
  background: rgba(10, 14, 30, 0.72);
  border-color: rgba(120, 200, 255, 0.4);
  font-size: 11.5px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.scene-labels .cell3d-label.selected {
  background: rgba(90, 200, 212, 0.95);
  border-color: rgba(255, 255, 255, 0.85);
  color: #08121b;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(90, 200, 212, 0.25), 0 4px 14px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -150%) scale(1.04);
}
.cell3d-label {
  position: absolute;
  transform: translate(-50%, -130%);
  white-space: nowrap;
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #e6e8f0;
  background: rgba(10, 14, 30, 0.78);
  border: 1px solid rgba(90, 200, 212, 0.45);
  padding: 2px 6px; border-radius: 3px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.player-caption {
  min-height: 38px;
  font-size: 12.5px; line-height: 1.45; color: #cfd3e5;
  background: rgba(10, 14, 30, 0.6);
  border-left: 3px solid #5ac8d4;
  padding: 7px 10px; border-radius: 4px;
}
.player-scrubber {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px;
  background: transparent;
  cursor: pointer;
  margin: 0; padding: 0;
}
.player-scrubber:focus { outline: none; }
.player-scrubber::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #5ac8d4 0%, #5ac8d4 var(--scrub-pct, 0%), #2a3148 var(--scrub-pct, 0%), #2a3148 100%);
}
.player-scrubber::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: #2a3148;
}
.player-scrubber::-moz-range-progress {
  height: 4px; border-radius: 2px;
  background: #5ac8d4;
}
.player-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #e6f0ff;
  border: 2px solid #5ac8d4;
  margin-top: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  cursor: pointer;
}
.player-scrubber::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #e6f0ff;
  border: 2px solid #5ac8d4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  cursor: pointer;
}
.player-scrubber:hover::-webkit-slider-thumb { background: #fff; border-color: #7ddce8; }
.player-scrubber:hover::-moz-range-thumb { background: #fff; border-color: #7ddce8; }
.player-controls {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.player-btn {
  background: #161b2e; border: 1px solid #2a3148; color: #cfd3e5;
  border-radius: 5px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.player-btn:hover { background: #1d2440; border-color: #3a8cb4; }
.player-btn.primary { background: #1d4a5a; border-color: #3a8cb4; color: #e6f0ff; }
.player-btn.primary:hover { background: #245a72; }
.player-step { font-size: 11.5px; color: #8e92a8; margin-left: 4px; }
.player-spacer { flex: 1; }
.player-loop { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #cfd3e5; cursor: pointer; }
.player-loop input { accent-color: #5ac8d4; }

.player-svg .lbl {
  fill: #e6e8f0; font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
  text-anchor: middle;
}
.player-svg .lbl-sub { fill: #8eb7e0; font-size: 10px; }
.player-svg .stroke-soft { stroke: rgba(255,255,255,0.18); }

/* ---------- Build-a-cell mode ---------- */

.builder-cell {
  position: relative;
  margin: 4px 0;
  min-height: 180px;
  padding: 28px 14px 14px 14px;
  border: 2px dashed #3a8cb4;
  border-radius: 80px / 60px;
  background: radial-gradient(ellipse at center, rgba(40, 80, 120, 0.45) 0%, rgba(20, 30, 60, 0.55) 70%, rgba(15, 22, 44, 0.7) 100%);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.builder-cell.drag-over {
  border-color: #6ae0ff;
  background: radial-gradient(ellipse at center, rgba(70, 130, 180, 0.55) 0%, rgba(30, 60, 100, 0.65) 70%, rgba(20, 30, 60, 0.8) 100%);
  box-shadow: inset 0 0 24px rgba(110, 220, 255, 0.35);
}
.builder-cell-label {
  position: absolute; top: 8px; left: 16px;
  font-size: 11.5px; color: #8eb7e0; letter-spacing: 0.04em; text-transform: uppercase;
  pointer-events: none;
}
.builder-placed {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: flex-start;
  min-height: 80px;
}
.builder-tray-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.builder-tray-title { font-size: 11.5px; color: #8e92a8; letter-spacing: 0.03em; }
.builder-tray {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px;
  background: #131a2c;
  border: 1px solid #2a3450;
  border-radius: 8px;
  min-height: 56px;
}

.builder-chip {
  display: inline-flex; align-items: center;
  padding: 6px 11px;
  font-size: 12.5px;
  background: #233055; color: #e6f0ff;
  border: 1px solid #3a4a78; border-radius: 999px;
  cursor: grab;
  user-select: none;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  touch-action: none;
}
.builder-chip:hover { background: #2c3a66; border-color: #5a6fa0; }
.builder-chip:active, .builder-chip.dragging { cursor: grabbing; opacity: 0.55; transform: scale(0.97); }
.builder-chip.placed {
  background: #1a3a1c; border-color: #4a8c52; color: #b6f9b6; cursor: default;
}
.builder-chip.placed .builder-tick { color: #b6f9b6; margin-left: 2px; font-weight: 700; }

.builder-chip.bounce-back {
  animation: builder-bounce 0.55s ease;
  border-color: #c45a5a !important;
  background: #4a1a1c !important;
  color: #ffd0d0 !important;
}
@keyframes builder-bounce {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-8px) scale(1.03); }
  40%  { transform: translateX(8px)  scale(1.03); }
  60%  { transform: translateX(-5px) scale(1.02); }
  80%  { transform: translateX(5px)  scale(1.01); }
  100% { transform: translateX(0)    scale(1); }
}

.builder-chip.pop-in {
  animation: builder-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes builder-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.builder-ghost {
  background: #2c3a66; border: 1px solid #6ae0ff; color: #e6f0ff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12.5px;
  opacity: 0.92;
}

.builder-wrong { color: #f9b6b6; font-weight: 600; }

/* Info-card: "When it breaks" + Related chips */
.info-when-broken {
  background: rgba(180, 60, 60, 0.10);
  border-left: 3px solid #d34d4d;
  padding: 8px 11px;
  border-radius: 4px;
  color: #f3d6d6;
}
.info-related {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.info-chip {
  background: rgba(106, 224, 255, 0.10);
  border: 1px solid rgba(106, 224, 255, 0.45);
  color: #d6f1ff;
  font: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.info-chip:hover {
  background: rgba(106, 224, 255, 0.22);
  border-color: #6ae0ff;
}
.info-chip:active { transform: scale(0.96); }

/* ===== Custom tooltips (replaces native title tooltips) ===== */
.ui-tip {
  position: fixed; z-index: 2147483600; pointer-events: none;
  max-width: 240px; white-space: normal; overflow-wrap: break-word; word-break: break-word;
  background: rgba(20,24,34,0.97); color: #dfe8f5;
  border: 1px solid #2c3c5c; border-radius: 7px; padding: 6px 10px;
  font: 500 11.5px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  letter-spacing: .1px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ui-tip[hidden] { display: none; }

/* ===== Floating tools bar (overlay toggles) ===== */
.tools-palette { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 3px; z-index: 20; max-width: calc(100% - 24px);
  background: rgba(13,20,30,0.94); border: 1px solid #234050; border-radius: 10px; padding: 5px 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); user-select: none; }
.tools-palette[hidden] { display: none; }
.tools-palette.dragging { box-shadow: 0 18px 50px rgba(0,0,0,0.7); }
.tools-palette-grip { display: flex; align-items: center; justify-content: center; width: 14px; margin-right: 3px;
  background: none; border: none; cursor: grab; color: #45596b; padding: 0; border-radius: 5px; }
.tools-palette-grip:hover { color: #7fd4e6; background: #15323c; }
.tools-palette-grip svg { width: 8px; height: 16px; fill: currentColor; pointer-events: none; }
.tools-palette.dragging .tools-palette-grip { cursor: grabbing; }

.tool-icon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; width: 56px; min-height: 50px; background: none; border: 1px solid transparent; color: #aebccd;
  padding: 5px 4px 4px; border-radius: 7px; cursor: pointer;
  font: 600 9.5px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; letter-spacing: .15px;
  transition: background .12s, color .12s, border-color .12s; }
.tool-icon:hover { background: #16293a; color: #fff; border-color: #234050; }
.tool-icon.on { background: #133a44; border-color: #3a8cb4; color: #bfeaf5; }
.tool-icon.on .tool-svg { color: #6fcfe2; }
.tool-svg { width: 22px; height: 22px; color: #8aa0b4; stroke: currentColor; stroke-width: 1.6; fill: none; transition: color .12s; }
.tool-icon:hover .tool-svg { color: #d6ecf5; }
.tool-name { font-size: 9.5px; opacity: .92; text-align: center; line-height: 1.1; white-space: normal; }
.tool-state { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 999px; background: transparent; pointer-events: none; }
.tool-state.on { background: #44ddaa; box-shadow: 0 0 6px rgba(68,221,170,.7); }
.tool-icon-sep { width: 1px; align-self: stretch; background: #243646; margin: 4px 3px; }

@media (max-width: 760px) { .tool-icon { width: 48px; min-height: 46px; } .tool-svg { width: 20px; height: 20px; } }

/* ===== Intro tour (spotlight walkthrough) ===== */
.tour-overlay { position: fixed; inset: 0; z-index: 100000; pointer-events: auto; background: transparent; }
.tour-ring { position: fixed; z-index: 100001; pointer-events: none; border: 2px solid #44aaff; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8,10,18,0.62), 0 0 18px rgba(68,170,255,0.55) inset, 0 0 22px rgba(68,170,255,0.45);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.tour-pop { position: fixed; z-index: 100002; width: 320px; max-width: calc(100vw - 24px);
  background: rgba(20,24,34,0.98); border: 1px solid #2c3c5c; border-radius: 11px; padding: 15px 16px 13px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #e7eef8; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
.tour-step { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: #6fb0e8; font-weight: 700; margin-bottom: 5px; }
.tour-pop h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #fff; }
.tour-pop p { margin: 0 0 13px; font-size: 12.8px; line-height: 1.5; color: #c4d2e4; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-spacer { flex: 1; }
.tour-btn { background: #1c2a3a; border: 1px solid #2c4a6e; color: #cfe6ff; border-radius: 7px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tour-btn:hover { background: #244466; border-color: #44aaff; }
.tour-btn.primary { background: #2a5588; border-color: #44aaff; color: #fff; }
.tour-btn.primary:hover { background: #336aa8; }
.tour-skip { background: none; border: none; color: #8593a8; font-size: 12px; cursor: pointer; padding: 7px 4px; }
.tour-skip:hover { color: #cfe6ff; text-decoration: underline; }
#btn-tour { font-weight: 700; padding: 5px 11px; }

/* ===== Tutor Mode (right-docked guided course) ===== */
#btn-tutor.tutor-cta { background: #15463f; border-color: #1f7a6b; color: #7fe8d3; font-weight: 600; }
#btn-tutor.tutor-cta:hover { background: #1b594f; border-color: #2aa890; color: #b8f5e8; }
#btn-tutor.tutor-cta.on { background: #1f7a6b; border-color: #2aa890; color: #eafff9; }

/* Tutor mode docks into the right flyout like everything else, instead of being
   a fixed drawer covering the canvas and the panel a student needs open. */
#tutor-panel { position: static; width: 100%; height: 100%; min-height: 0; flex: 1 1 auto;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; background: rgba(13,17,26,0.92); border: 1px solid rgba(255,255,255,0.10);
  box-shadow: -14px 0 40px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #e7eef8; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
#tutor-panel[hidden] { display: none; }
.tutor-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid #1c2536; }
.tutor-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tutor-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #2aa890; font-weight: 700; }
.tutor-h { font-size: 15.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutor-x { background: none; border: 1px solid #2a3a52; color: #aebdd2; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 17px; line-height: 1; }
.tutor-x:hover { background: #1a2536; color: #fff; }
.tutor-progress { height: 4px; background: #16202f; }
.tutor-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg,#2aa890,#44aaff); transition: width .3s ease; }
.tutor-scroll { flex: 1; overflow-y: auto; padding: 14px; }

.tutor-intro { font-size: 12.8px; line-height: 1.55; color: #b9c6d8; margin-bottom: 12px; }
.tutor-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tutor-stage { display: flex; gap: 10px; align-items: flex-start; background: #141c2a; border: 1px solid #233148; border-radius: 10px; padding: 11px 12px; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.tutor-stage:hover { border-color: #2aa890; background: #16202f; transform: translateY(-1px); }
.tutor-stage.locked { opacity: .5; cursor: not-allowed; }
.tutor-stage.locked:hover { border-color: #233148; background: #141c2a; transform: none; }
.tutor-stage.done { border-color: #1f5a4f; }
.ts-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 7px; border-radius: 999px; white-space: nowrap; align-self: center; }
.ts-badge.beginner { background: #14331f; color: #9be8b0; }
.ts-badge.intermediate { background: #14283f; color: #8fc4ff; }
.ts-badge.advanced { background: #2e1f3f; color: #c9a4ff; }
.ts-main { flex: 1; min-width: 0; }
.ts-title { font-size: 13.5px; font-weight: 700; color: #eef4fb; }
.ts-check { color: #58d6a8; }
.ts-sum { font-size: 11.5px; color: #93a3b8; line-height: 1.4; margin-top: 2px; }
.ts-go { font-size: 11.5px; color: #2aa890; font-weight: 600; align-self: center; white-space: nowrap; }

.tutor-bc { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tutor-link { background: none; border: none; color: #6fb0e8; font-size: 12px; cursor: pointer; padding: 0; }
.tutor-link:hover { color: #9fd0ff; }
.tutor-stepcount { font-size: 11px; color: #7d8ba0; }
.tutor-objs { background: #10212c; border: 1px solid #1d3a44; border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; }
.tutor-objs-t { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: #6fb0a0; font-weight: 700; margin-bottom: 5px; }
.tutor-objs ul { margin: 0; padding-left: 18px; }
.tutor-objs li { font-size: 12px; color: #c2d2e2; line-height: 1.5; }

.tutor-card { background: #131b28; border: 1px solid #243149; border-radius: 11px; padding: 14px 15px; }
.tutor-card.task { border-color: #2a4a44; }
.tutor-card.quiz { border-color: #2c4a6e; }
.tutor-tag { display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.tutor-card.task .tutor-tag { background: #14332c; color: #8fe6cf; }
.tutor-card.quiz .tutor-tag { background: #14283f; color: #8fc4ff; }
.tutor-card h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.tutor-prose { font-size: 13px; line-height: 1.6; color: #c8d5e6; }
.tutor-prose p { margin: 0 0 9px; }
.tutor-prose ul, .tutor-prose ol { margin: 0 0 9px; padding-left: 20px; }
.tutor-prose li { margin: 3px 0; }
.tutor-prose strong { color: #eaf2fb; }
.tutor-prose code { background: #0e1420; border: 1px solid #25324a; border-radius: 4px; padding: 1px 5px; font-size: 12px; color: #9fd0ff; }
.tutor-hint { margin-top: 10px; font-size: 12px; color: #c9b98f; background: rgba(60,48,20,.35); border: 1px solid #4a3f22; border-radius: 7px; padding: 7px 10px; }
.tutor-q { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.45; margin-bottom: 11px; }
.tutor-choices { display: flex; flex-direction: column; gap: 7px; }
.tutor-choice { text-align: left; background: #1a1f2e; border: 1px solid #2a3142; color: #e6ecf6; border-radius: 8px; padding: 10px 12px; font-size: 12.8px; cursor: pointer; }
.tutor-choice:hover:not(:disabled) { background: #232a3c; border-color: #44aaff; }
.tutor-choice.correct { background: #14331f; border-color: #4caf6a; color: #b6f9b6; }
.tutor-choice.wrong { background: #311; border-color: #a55; color: #f9b6b6; }
.tutor-checkmsg { min-height: 16px; font-size: 12px; line-height: 1.45; margin-top: 10px; }
.tutor-checkmsg.ok { color: #8fe6b0; }
.tutor-checkmsg.no { color: #f3a6a6; }

/* Tutor v2 interactive challenge box */
.tutor-challenge { margin-top: 11px; font-size: 12.5px; line-height: 1.5; border-radius: 8px; padding: 9px 11px;
  background: rgba(40,52,72,.5); border: 1px solid #2c3a52; color: #cfe0f3; transition: background .2s, border-color .2s; }
.tutor-challenge.go { background: rgba(36,58,86,.55); border-color: #2f5378; color: #bcd9f5; }
.tutor-challenge.ok { background: rgba(22,80,46,.4); border-color: #2c8a52; color: #b6f0c8; }
.tutor-challenge.no { background: rgba(86,32,32,.4); border-color: #8a3c3c; color: #f3bcbc; }
.tutor-challenge strong { color: #fff; }

.tutor-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.tutor-foot.center { flex-direction: column; }
.tutor-btn { background: #1c2a3a; border: 1px solid #2c4a6e; color: #cfe6ff; border-radius: 8px; padding: 9px 16px; font-size: 12.8px; font-weight: 600; cursor: pointer; }
.tutor-btn:hover { background: #244466; border-color: #44aaff; }
.tutor-btn.primary { background: #1f7a6b; border-color: #2aa890; color: #eafff9; }
.tutor-btn.primary:hover { background: #258a78; }
.tutor-btn.disabled, .tutor-btn:disabled { opacity: .4; cursor: not-allowed; }

.tutor-done { text-align: center; padding: 18px 6px; }
.tutor-done-badge { width: 56px; height: 56px; border-radius: 50%; background: #15463f; border: 2px solid #2aa890; color: #7fe8d3; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.tutor-done h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.tutor-done p { font-size: 13px; color: #c2d2e2; margin: 0 0 16px; }
.tutor-alldone { font-size: 12.5px; color: #9be8c8; background: #122a24; border: 1px solid #1f5a4f; border-radius: 8px; padding: 10px 12px; }

@media (max-width: 720px) { #tutor-panel { width: 100vw; max-width: 100vw; } }

/* ===== Read-aloud (TTS) speaker buttons ===== */
.tts-btn { display: inline-flex; align-items: center; justify-content: center; }
.tts-btn svg { width: 16px; height: 16px; display: block; }
.tts-btn.playing { color: #5ac8d4 !important; border-color: #3a8cb4 !important; }
.tts-btn.playing svg { animation: tts-pulse 1.1s ease-in-out infinite; }
@keyframes tts-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.player-btn.tts-btn { padding: 4px 8px; }
.tts-btn svg { pointer-events: none; }

/* ===== Process player: pill toggles + title-bar read-aloud ===== */
.player-controls { flex-wrap: nowrap; }
.pill-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px solid #2a3148; border-radius: 999px;
  background: #161b2e; color: #9aa6c4; font-size: 12px; font-weight: 600;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.pill-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-toggle:hover { border-color: #3a8cb4; color: #cfd3e5; }
.pill-toggle:has(input:checked) { background: #143a44; border-color: #3a8cb4; color: #bfeaf5; }
.pill-toggle:has(input:focus-visible) { outline: 2px solid #5ac8d4; outline-offset: 1px; }

/* read-aloud speaker icon, top-right of the player title bar */
.player-overlay-title-bar #btn-tts-player {
  margin-left: auto; pointer-events: auto;
  background: rgba(10,14,30,0.78); border: 1px solid rgba(90,200,212,0.55);
  color: #cfe0e8; padding: 6px 9px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.player-overlay-title-bar #btn-tts-player:hover { border-color: #7ddce8; color: #eaf6f9; }
.player-overlay-title-bar #btn-tts-player.on { background: #143a44; border-color: #3a8cb4; color: #bfeaf5; }
.player-overlay-title-bar #btn-tts-player svg { width: 17px; height: 17px; }
.player-overlay-title-bar .player-btn.close { margin-left: 8px; }

/* ===== Topbar auto-speak (global read-aloud) button ===== */
#btn-autospeak { padding: 5px 9px; line-height: 0; }
#btn-autospeak svg { width: 16px; height: 16px; }
#btn-autospeak.on { background: #143a44; border-color: #3a8cb4; color: #bfeaf5; }

/* Share tool flash feedback */
.tool-icon.flash { border-color: #2aa890; }
.tool-icon.flash .tool-name { color: #7fe8d3; opacity: 1; }

/* ===================================================================== *
 * Workspace: icon rail + single flyout per side
 * =====================================================================
 * The panels used to be absolutely positioned over the canvas, so the 3D
 * view had no idea they were there — it centred the cell in the full
 * canvas, exactly where the panels sat.
 *
 * As layout siblings the canvas is only given the space genuinely free.
 * Exactly one flyout may be open per side (enforced in layout.js), so
 * panels can never tile each other into slivers.
 *
 * #app is a grid ("top" / "center"); #workspace now takes the centre cell
 * and lays its children out as a row.
 */
#workspace {
  /* cell-explorer's #app is `display:flex; flex-direction:column`, so the
     workspace is simply the second flex row rather than a named grid area. */
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

#canvas-area {
  order: 3;
  flex: 1 1 auto;
  min-width: 0;   /* without this the canvas refuses to shrink and pushes
                     the right-hand flyout off screen */
}

/* ---- the always-visible rail ---- */
.icon-rail {
  order: 1;
  flex: 0 0 auto;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(10, 13, 22, 0.86);
  border-right: 1px solid rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 6;
}
.rail-sep {
  width: 44px; height: 1px;
  margin: 6px 0;
  background: rgba(255,255,255,0.10);
  flex: 0 0 auto;
}
/* Same elements that used to sit in the toolbar — same ids, same handlers —
   restacked as icon-over-label. `title` still carries the longer explanation
   through tooltips.js. */
.rail-btn {
  width: 64px;
  height: auto;
  flex-direction: column;
  gap: 4px;
  padding: 7px 2px 6px;
  justify-content: center;
  position: relative;
  white-space: normal;
  text-align: center;
}
.rail-btn .btn-label { display: block; font-size: 10.5px; line-height: 1.1; }
.rail-btn .btn-ico { width: 20px; height: 20px; }
.rail-btn.on::after {
  content: '';
  position: absolute;
  top: 5px; bottom: 5px; right: -7px;
  width: 2px; border-radius: 2px;
  background: #44aaff;
}

/* ---- the flyout that pops out of the rail ---- */
.flyout {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 10px 8px;
  background: rgba(10, 13, 22, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#flyout-left  { order: 2; width: var(--flyout-left-w, 300px); }
#flyout-right { order: 4; width: var(--flyout-right-w, 400px); }

/* A flyout with nothing open takes no space — closing a panel hands its width
   straight back to the cell. Id-qualified because the widths above are set
   on ids, and an id beats a class whichever comes first in the file. */
#flyout-left[data-empty="true"],
#flyout-right[data-empty="true"] {
  width: 0; padding: 0; overflow: hidden;
}

.rail-resize {
  position: absolute;
  top: 0; bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background 120ms;
}
.rail-resize:hover, .rail-resize.dragging { background: rgba(68,170,255,0.35); }
[data-rail-resize="left"]  { right: 0; }
[data-rail-resize="right"] { left: 0; }
.flyout[data-empty="true"] .rail-resize { display: none; }

/* ---- panels, docked ----
 * Only one panel is ever visible per flyout, so each simply fills it. No
 * proportional height shares needed — which is what prevents tiling. */
.flyout > .floating-panel {
  position: static;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  resize: none;
  box-shadow: none;
}
.flyout > .floating-panel::after { display: none; }
.flyout > .floating-panel .panel-header { cursor: default; }

/* ---- first-run hint over the canvas ---- */
.canvas-hint {
  position: absolute;
  /* Bottom-right, not centred: the cell sits in the middle of the canvas
     and anything centred would land on top of it. */
  right: 16px; bottom: 16px;
  z-index: 7;
  display: flex; align-items: center; gap: 10px;
  max-width: min(340px, calc(100% - 32px));
  padding: 8px 10px 8px 14px;
  font-size: 12.5px; line-height: 1.45; color: #cdd6e6;
  background: rgba(12, 16, 28, 0.86);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}
.canvas-hint[hidden] { display: none; }
.canvas-hint-x {
  flex: 0 0 auto; background: transparent; border: none; color: #8e9bb0;
  font-size: 17px; line-height: 1; width: 22px; height: 22px;
  border-radius: 50%; cursor: pointer;
}
.canvas-hint-x:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* ---- narrow screens ---- */
@media (max-width: 1200px) {
  #flyout-left  { width: var(--flyout-left-w, 268px); }
  #flyout-right { width: var(--flyout-right-w, 340px); }
}
/* Below this a docked flyout leaves too little canvas to be worth it, so they
   float over the model instead and only one may be open at all. The rail stays
   put, so every panel is still one tap away. */
@media (max-width: 900px) {
  #workspace[data-floating="true"] .flyout {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 12;
    width: min(320px, 84vw);
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  }
  #workspace[data-floating="true"] #flyout-left  { left: 76px; }
  #workspace[data-floating="true"] #flyout-right { right: 0; }
}
/* The toolbar is down to four actions, so it only wraps on very small screens. */
@media (max-width: 620px) {
  #app { grid-template-rows: auto 1fr; }
  #topbar { height: auto; min-height: 44px; flex-wrap: wrap; padding: 6px 12px; row-gap: 6px; }
  .topbar-right { flex: 1 1 100%; justify-content: flex-start; }
  .topbar-sep { display: none; }
}


/* The green call-to-action treatment made sense for one button among many in a
   toolbar. In a rail of six uniform labelled buttons a permanently-coloured one
   reads as *selected*, which is what `.on` means for its neighbours. */
.rail-btn#btn-tutor.tutor-cta { background:#1c1c2a; border-color:#2a2a3a; color:#e0e0ee; font-weight:500; }
.rail-btn#btn-tutor.tutor-cta:hover { background:#2a2a3a; border-color:#3a3a4a; color:#fff; }
.rail-btn#btn-tutor.tutor-cta.on { background:#1c2a3a; border-color:#44aaff; color:#aaddff; }