/* ===== Reset / base ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(ellipse 100% 80% at 50% 40%, #0a1230 0%, #04061a 60%, #02030c 100%);
  color: #e0e0ee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== Topbar ===== */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  /* height, not min-height, until the toolbar is allowed to wrap — see the
     narrow-screen rule near the end of this file. */
  height: 44px; flex-shrink: 0;
  gap: 8px 12px;
  background: rgba(10, 10, 20, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 20;
}
.topbar-left {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.app-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.app-logo {
  width: 30px; height: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.app-title {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.2px;
}
.hint {
  font-size: 12px;
  color: #aaaabb;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-sep {
  width: 1px;
  background: #2a2a3a;
  margin: 0 4px;
  align-self: stretch;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1c1c2a;
  color: #e0e0ee;
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  white-space: nowrap;
}
.btn-ico { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.btn-ico path, .btn-ico circle, .btn-ico line { vector-effect: non-scaling-stroke; }
.action-btn:hover { background: #2a2a3a; border-color: #3a3a4a; }
.action-btn.toggle.on {
  background: #1c2a3a;
  border-color: #44aaff;
  color: #aaddff;
}

/* ===== 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: #aaddff !important; border-color: #44aaff !important; }
.tts-btn.playing svg { animation: tts-pulse 1.1s ease-in-out infinite; }
@keyframes tts-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.tts-btn svg { pointer-events: none; }

/* ===== 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: #1c2a3a; border-color: #44aaff; color: #aaddff; }

/* ===== Canvas area ===== */
/* ===== Workspace: icon rails + single flyout ====================== *
 * A flex row of:
 *     [icon rail | flyout | canvas | flyout | icon rail]
 *
 * The rails and flyouts are real layout, not overlays, so the canvas is only
 * ever given the space that is genuinely free and the body centres itself
 * inside that. Nothing covers the model at any width, with no magic numbers.
 *
 * Exactly one flyout may be open per side (enforced in layout.js). An earlier
 * version let Anatomy, Info and Quiz share one rail, dividing its height
 * between them — three panels in a 300px column are slivers, not panels.
 */
#workspace {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;      /* lets the children scroll instead of forcing growth */
  min-width: 0;
}

#canvas-area {
  position: relative;
  flex: 1 1 auto;
  order: 3;
  min-width: 0;       /* without this the canvas refuses to shrink below its
                         intrinsic width and pushes the right rail off-screen */
  overflow: hidden;
  background: #04061a;
}

/* ---- the always-visible rail ---- *
 * One rail, on the left, holding every panel button. Wide enough to caption
 * each icon: an unlabelled strip relies entirely on hover tooltips, which is
 * fine for a daily-use tool and not fine for a lecture theatre where most
 * people are seeing it for the first time.
 *
 * Tutor and Quiz buttons live here with the rest, but their panels open in the
 * right-hand flyout, so a student can keep the tutorial open on one side and
 * the anatomy list on the other.
 */
.icon-rail {
  flex: 0 0 auto;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(8, 10, 20, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 6;
}
#rail-left { order: 1; border-right: 1px solid rgba(255,255,255,0.07); }

.rail-sep {
  width: 44px; height: 1px;
  margin: 6px 0;
  background: rgba(255,255,255,0.10);
  flex: 0 0 auto;
}

/* These are the SAME elements that used to sit in the toolbar — same ids, same
   handlers — restacked as icon-over-label. Their `title` still carries the
   longer explanation via 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;
}
.rail-btn .btn-label {
  display: block;
  font-size: 10.5px;
  line-height: 1.1;
  letter-spacing: 0.1px;
}
.rail-btn .btn-ico { width: 20px; height: 20px; }

/* An open flyout is marked on its rail button by a bar against the canvas
   edge, so "which panel am I looking at" is readable at a glance. */
.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 a rail ---- */
.flyout {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: rgba(8, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#flyout-left  { order: 2; width: var(--flyout-left-w, 268px);  padding: 10px 10px 10px 8px; }
#flyout-right { order: 4; width: var(--flyout-right-w, 330px); padding: 10px 8px 10px 10px; }

/* The info card is paragraphs of anatomy prose where the other left-hand panels
   are short lists, so it gets a wider column. On a laptop the body model uses
   only the middle third of the canvas and the rest is empty background, so the
   width comes out of space that was doing nothing. layout.js sets data-open.
   Specificity note: this is (1,1,0) and beats the plain #flyout-left rules
   above and in the media queries below, so each breakpoint needs its own. */
#flyout-left[data-open="info-panel"] { width: var(--flyout-left-info-w, 344px); }

/* A flyout with nothing open takes no space at all — closing a panel hands its
   width straight back to the model.
   The ids are load-bearing: the widths above and in the narrow-screen media
   queries are set on #flyout-left / #flyout-right, and an id beats a class no
   matter which comes first in the file. */
#flyout-left[data-empty="true"],
#flyout-right[data-empty="true"] {
  width: 0;
  padding: 0;
  overflow: hidden;
}

/* Drag the inner edge to resize a flyout. */
.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 ============================================= *
 * These selectors deliberately override the .floating-panel block below,
 * which is kept intact for anything still genuinely floating.
 *
 * Because only one panel is ever visible per flyout, each simply fills it.
 * No proportional height shares are needed — which is precisely what removes
 * the 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;
  background: rgba(18, 18, 28, 0.72);
}
.flyout > .floating-panel::after { display: none; }   /* resize-corner grip */
.flyout > .floating-panel .panel-header { cursor: default; }  /* not draggable */
.flyout > .floating-panel.focused {
  box-shadow: none;
  border-color: rgba(68,170,255,0.35);
}

/* ===== First-run hint over the canvas ============================= */
.canvas-hint {
  position: absolute;
  /* Bottom-RIGHT, not bottom-centre. The body is always a narrow vertical strip
     down the middle of the canvas, so anything centred lands on top of it —
     which is the exact problem this whole layout change was about. The
     bottom-left is taken by the site credit. */
  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.82);
  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);
  animation: hint-in 320ms ease both;
}
.canvas-hint[hidden] { display: none; }
.canvas-hint-text { min-width: 0; }
.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; }
@keyframes hint-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .canvas-hint { animation: none; } }

/* Background aura. The WebGL canvas clears to transparent, so this sits behind
   it — which means the glow costs nothing to render, is untouched by the tone
   mapping and the ambient-occlusion pass, and gives the body something to sit
   against now that the ground plane is gone. */
#canvas-area::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(88, 132, 214, 0.30) 0%,
                                        rgba(58, 92, 166, 0.16) 38%,
                                        rgba(12, 20, 48, 0.00) 72%),
    radial-gradient(34% 30% at 27% 76%, rgba(45, 212, 191, 0.13) 0%,
                                        rgba(45, 212, 191, 0.00) 70%),
    radial-gradient(30% 26% at 76% 22%, rgba(178, 119, 255, 0.13) 0%,
                                        rgba(178, 119, 255, 0.00) 70%),
    radial-gradient(120% 100% at 50% 50%, #0a1030 0%, #04061a 62%, #01020a 100%);
}

/* A soft vignette over the top corners keeps the panels legible against it. */
#canvas-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 105% at 50% 46%,
              rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.45) 100%);
}
#scene-canvas { z-index: 1; }
#scene-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
}
#scene-canvas:active { cursor: grabbing; }

.loading {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px; color: #aaaabb;
  background: rgba(10, 12, 22, 0.7);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 4;
  pointer-events: none;
}

/* ----- Full-screen loader (initial boot) ----- */
.loading-overlay {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
  max-width: 360px;
  background: rgba(10, 12, 22, 0.82);
  padding: 14px 18px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.loading-overlay.fade-out { opacity: 0; }
.loading-title {
  font-size: 14px; font-weight: 600; color: #fff;
  letter-spacing: 0.2px;
}
.loading-sub {
  font-size: 11.5px; color: #8a8eaa;
  margin-top: 3px; margin-bottom: 10px;
}
.loading-list {
  display: flex; flex-direction: column; gap: 6px;
}
.loading-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #b8bcd2;
}
.loading-row-name { width: 80px; flex-shrink: 0; }
.loading-row-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loading-row-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #4a8fff, #88c4ff);
  transition: width 0.18s ease;
}
.loading-row.done .loading-row-fill {
  background: linear-gradient(90deg, #3aa860, #66d088);
  width: 100% !important;
}
.loading-row.done .loading-row-name { color: #7fd29a; }
.loading-row.failed .loading-row-fill { background: #aa3a3a; width: 100% !important; }
.loading-row.failed .loading-row-name { color: #d27f7f; }

/* ----- Background mini-loader (post-boot lazy/continued loads) ----- */
.bg-loader {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(10, 12, 22, 0.82);
  padding: 7px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 4;
  pointer-events: none;
  font-size: 11.5px; color: #cdd0e6;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.bg-loader[hidden] { display: none; }
.bg-loader-bar {
  width: 120px; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bg-loader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4a8fff, #88c4ff);
  transition: width 0.18s ease;
}

/* Overlay row "loading…" hint when lazy fetch is in flight */
.ov-check.is-loading { opacity: 0.65; }
.ov-check.is-loading::after {
  content: 'loading…';
  margin-left: 8px;
  font-size: 10.5px;
  color: #88a;
  font-style: italic;
}

/* ===== Hover tip ===== */
.hover-tip {
  position: absolute;
  background: rgba(15, 18, 30, 0.92);
  border: 1px solid rgba(68,170,255,0.35);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  z-index: 7;
  transform: translate(-50%, calc(-100% - 12px));
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.tip-name { font-weight: 600; color: #fff; }
.tip-sub { font-size: 10.5px; color: #88a; margin-top: 2px; }

/* Quiz target reticle — pulsing ring that tracks the highlighted part */
.quiz-reticle { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 8; will-change: transform, opacity; }
.quiz-reticle .qr-ring {
  position: absolute; left: -27px; top: -27px; width: 54px; height: 54px;
  border: 3px solid #ffd400; border-radius: 50%;
  box-shadow: 0 0 16px 4px rgba(255, 200, 0, 0.75), inset 0 0 10px rgba(255, 210, 0, 0.55);
}
.quiz-reticle .qr-dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #ffd400;
}

/* Always-on structure labels (Systems → Display → Always-on labels) */
.body-label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.body-label {
  position: absolute; top: 0; left: 0;
  white-space: nowrap;
  font-size: 11px; line-height: 1;
  color: #eaf2ff;
  background: rgba(15, 18, 30, 0.78);
  border: 1px solid rgba(68,170,255,0.30);
  border-radius: 5px;
  padding: 3px 7px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* ===== Floating panels ===== */
.floating-panel {
  position: absolute;
  top: 56px;
  left: 16px;
  width: 320px;
  height: 540px;
  min-width: 240px;
  min-height: 200px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  background: rgba(18, 18, 28, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 8;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}
.floating-panel[hidden] { display: none; }
.floating-panel.focused {
  border-color: rgba(68,170,255,0.55);
  box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(68,170,255,0.25);
  z-index: 9;
}
.floating-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.18) 50%, rgba(255,255,255,0.18) 60%, transparent 60%),
    linear-gradient(135deg, transparent 75%, rgba(255,255,255,0.18) 75%, rgba(255,255,255,0.18) 85%, transparent 85%);
  border-bottom-right-radius: 10px;
}

.panel-header {
  display: flex; align-items: center;
  padding: 7px 10px 7px 12px;
  background: rgba(10, 10, 18, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}
.panel-header-title {
  font-weight: 600; font-size: 13px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 240px;
}
.panel-header-spacer { flex: 1; }
.panel-header-search {
  background: #0e0e18;
  border: 1px solid #2a2a3a;
  color: #e0e0ee;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  width: 110px;
  margin-right: 6px;
}
.panel-header-search:focus { outline: none; border-color: #44aaff; }
.panel-header-btn {
  background: transparent;
  border: none;
  color: #aaaabb;
  font-size: 16px;
  width: 22px; height: 22px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
}
.panel-header-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.panel-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 12px 14px;
}
.panel-sub-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #777788;
  margin: 8px 0 4px;
}
.panel-sub-title:first-child { margin-top: 0; }

/* ===== Panel positions ===== */
.library-panel {
  width: 280px;
  height: auto;
  max-height: calc(100vh - 80px);
  min-width: 240px; min-height: 240px;
  top: 56px; left: auto; right: 16px;
}
.info-panel {
  width: 380px;
  height: auto;
  max-height: calc(100vh - 80px);
  min-width: 300px; min-height: 240px;
  top: 56px; left: 268px; right: auto; bottom: auto;
}
.overlays-panel {
  width: 240px;
  height: auto;
  max-height: calc(100vh - 190px);
  min-width: 200px; min-height: 240px;
  top: 56px; left: 16px;
}
.quiz-panel {
  width: 360px;
  height: auto;
  max-height: calc(100vh - 190px);
  min-width: 300px; min-height: 280px;
  top: auto; bottom: 16px; left: calc(50% - 180px); right: auto;
}
.animations-panel {
  width: 280px;
  height: auto;
  max-height: calc(100vh - 80px);
  min-width: 220px; min-height: 200px;
  top: 56px; left: 272px; right: auto;
}

/* ===== Animations panel ===== */
.anim-list {
  display: flex; flex-direction: column; gap: 6px;
}
.anim-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.anim-row:hover { background: rgba(68,170,255,0.07); border-color: rgba(68,170,255,0.25); }
.anim-row.playing {
  background: rgba(68,170,255,0.12);
  border-color: rgba(68,170,255,0.55);
}
.anim-meta { flex: 1 1 auto; min-width: 0; }
.anim-label {
  font-size: 12.5px; font-weight: 600; color: #e6e8f0;
  line-height: 1.2;
}
.anim-summary {
  font-size: 11px; color: #8e92a8;
  line-height: 1.35;
  margin-top: 3px;
}
.anim-indicator {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 11px;
  color: #aaddff;
}
.anim-row.playing .anim-indicator { color: #44aaff; }

/* ===== Country library ===== */
.country-library {
  display: flex; flex-direction: column; gap: 2px;
}
.country-item {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  min-width: 0;
  border: 1px solid transparent;
  transition: background 150ms, border-color 150ms;
}
.country-item:hover { background: #1a1a26; border-color: #2a2a3a; }
.country-item.selected { background: #1c2a3a; border-color: #44aaff; }
.country-flag {
  flex-shrink: 0;
  width: 24px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 2px;
  background: #0a0a14;
}
.country-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.country-name {
  font-size: 12.5px; color: #e0e0ee;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.country-cap {
  font-size: 10.5px; color: #88a;
  margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 80px;
}
.lib-cat-section {
  margin-top: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lib-cat-section:last-child { border-bottom: none; }
/* Top-level (system) header — standardized accordion head */
.lib-cat-head {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  background: none;
  border: none;
  color: #c4d0e2;
  padding: 9px 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-align: left;
}
.lib-cat-head:hover { color: #fff; }
.lib-cat-section.open > .lib-cat-head {
  color: #eaf4ff;
  background: linear-gradient(90deg, rgba(68,170,255,0.12), rgba(68,170,255,0));
  border-left: 2px solid #44aaff;
  padding-left: 6px;
}
.lib-cat-section.open > .lib-cat-head .acc-ico { color: #cfe6ff; }
.lib-cat-head .acc-ico {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #7fb0e0;
}
.lib-cat-head .acc-ico svg { width: 19px; height: 19px; display: block; }
.lib-cat-name { flex: 1; }
.lib-cat-caret {
  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;
}
.lib-cat-section.open > .lib-cat-head .lib-cat-caret {
  transform: rotate(45deg); border-color: #cfe6ff;
}
.lib-cat-count {
  margin-left: auto;
  color: #8da3bd;
  font-size: 10px;
  font-weight: 600;
  background: #1a1a26;
  padding: 1px 6px;
  border-radius: 8px;
}
.lib-cat-body { display: none; flex-direction: column; gap: 1px; padding-left: 4px; }
.lib-cat-section.open > .lib-cat-body { display: flex; }

/* ===== Anatomy accordion (system → sub-group → part) ===== */
.anatomy-accordion { display: flex; flex-direction: column; gap: 0; }
.anatomy-accordion .lib-cat-section--sub {
  margin-top: 2px; padding-left: 8px;
  border-bottom: none;
}
/* Sub-group header keeps the lightweight triangle caret */
.anatomy-accordion .lib-cat-head--sub .lib-cat-caret {
  width: 0; height: 0; margin: 0;
  border: none;
  border-left: 5px solid #777;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: none; transition: transform 150ms;
}
.anatomy-accordion .lib-cat-section--sub.open > .lib-cat-head--sub .lib-cat-caret {
  transform: rotate(90deg); border-left-color: #cfe6ff;
}
.anatomy-accordion .lib-cat-head--sub {
  gap: 6px;
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 11.5px;
  font-weight: 500;
  color: #b5b5c8;
  padding: 3px 4px;
}
.anatomy-accordion .lib-cat-section--sub.open > .lib-cat-head--sub {
  background: none;
  border-left: none;
  padding-left: 4px;
  color: #d8e4f2;
}
.anatomy-accordion .lib-cat-head--sub .lib-cat-count {
  background: #14141e;
  font-size: 9.5px;
  padding: 1px 5px;
}
.anatomy-accordion .library-row {
  display: flex; flex-direction: column;
  padding: 4px 8px;
  margin-left: 6px;
  border-left: 1px solid #20202c;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  transition: background 120ms;
}
.anatomy-accordion .library-row:hover { background: #1a1a26; border-left-color: #44aaff; }
.anatomy-accordion .library-row.selected {
  background: #1f3a5a;
  border-left: 3px solid #66bbff;
  margin-left: 4px;
  box-shadow: inset 0 0 0 1px rgba(102, 187, 255, 0.25);
}
.anatomy-accordion .library-row.selected .lib-name { color: #fff; font-weight: 600; }
.anatomy-accordion .library-row.selected .lib-sub  { color: #b8d4ec; }

/* Reference-only entries: an anatomy card with no matching mesh in the model.
   Still readable, but it cannot be shown in 3D — marked so the click does not
   appear to silently fail. Regenerate the list with build/audit_coverage.py. */
.anatomy-accordion .library-row.no-mesh .lib-name { opacity: .62; }
.anatomy-accordion .library-row.no-mesh .lib-name::after {
  content: "ref";
  margin-left: 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7f8ea3;
  border: 1px solid #39445a;
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: 1px;
}
.anatomy-accordion .library-row.no-mesh:hover { border-left-color: #5a6478; }
.anatomy-accordion .lib-name { font-size: 12.5px; color: #e0e0ee; line-height: 1.25; }
.anatomy-accordion .lib-sub  { font-size: 10.5px; color: #7a7a90; font-style: italic; line-height: 1.2; }
.library-empty { padding: 16px 8px; color: #888; font-size: 12px; text-align: center; }

/* ===== Overlay checkboxes ===== */
.ov-check {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 12.5px;
  color: #ddd;
}
.ov-check:hover { color: #fff; }
.ov-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid #44aaff;
  border-radius: 3px;
  background: #0e0e18;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.ov-check input[type=checkbox]:checked {
  background: #44aaff;
}
.ov-check input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0;
  width: 4px; height: 8px;
  border: solid #0a0a14;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ===== Accordion (standardized: closed-by-default, single-open, icon + chevron) ===== */
.acc-section { border-bottom: 1px solid rgba(255,255,255,0.06); }
.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;
}
.acc-head:hover { color: #fff; }
.acc-section.open > .acc-head {
  color: #eaf4ff;
  background: linear-gradient(90deg, rgba(68,170,255,0.12), rgba(68,170,255,0));
  border-left: 2px solid #44aaff;
  padding-left: 6px;
}
.acc-section.open > .acc-head .acc-ico { color: #cfe6ff; }
.acc-ico {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #7fb0e0;
}
.acc-ico svg { width: 19px; height: 19px; display: block; }
/* Rendered-from-model PNG icons (Systems + Anatomy panes). */
.acc-ico img { width: 22px; height: 22px; display: block; object-fit: contain;
  opacity: .92; transition: opacity .12s, transform .12s; }
.acc-section.open > .acc-head .acc-ico img,
.lib-cat-section.open > .lib-cat-head .acc-ico img,
.acc-head:hover .acc-ico img, .lib-cat-head:hover .acc-ico img { opacity: 1; transform: scale(1.06); }
.acc-title { flex: 1; }
.acc-count {
  flex: 0 0 auto;
  color: #8da3bd; font-size: 10px; font-weight: 600;
  background: #1a1a26; padding: 1px 6px; border-radius: 8px;
}
.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: #cfe6ff; }
.acc-body { display: none; padding: 1px 0 9px 6px; }
.acc-section.open > .acc-body { display: block; }

/* ===== Fact card ===== */
/* Slowly-rotating 3D model of the selected part, at the top of the info card. */
.info-model {
  width: 100%;
  height: 152px;
  flex: 0 0 auto;
  border-radius: 10px;
  margin: 0 0 8px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 36%, rgba(70,96,142,.30), rgba(9,13,22,.55) 72%);
  box-shadow: inset 0 0 0 1px rgba(120,150,200,.12);
}
.info-model canvas { display: block; width: 100% !important; height: 100% !important; }
.info-model.is-empty { display: none; }
/* On a laptop-height screen the card's own scroll viewport is barely 500px, and
   a 152px preview eats nearly a third of it before a word of text is read. */
@media (max-height: 820px) { .info-model { height: 118px; } }

.info-empty {
  padding: 12px;
  font-size: 12.5px;
  color: #888;
  text-align: center;
  font-style: italic;
}

/* ===== Info card content =====
   js/info-card.js has always emitted .ic-* markup, but no .ic-* rules were ever
   written — not here and not on the live site. Two consequences the card had
   been shipping with:
     · .ic-key and .ic-val are both plain <span>s, so with no styling they laid
       out inline and each label ran straight into its value: "LatinHepar,
       partes reliquae", "Systemdigestive", and so on.
     · Nothing set a font-size, so the card inherited the browser default of
       16px while the rest of this UI sits at 12.5px. That alone is most of the
       reason a liver entry needed roughly three screens of scrolling. */
#info-body {
  font-size: 13px;
  line-height: 1.5;
  color: #c5c9d6;
}

.ic-meta {
  display: flex; flex-direction: column;
  gap: 3px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid #232333;
}
/* Label column wide enough for "Location", the longest key the data uses. */
.ic-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 2px 10px;
  align-items: baseline;
}
.ic-key {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  color: #777788;
}
.ic-val {
  font-size: 12.5px;
  color: #dfe3ee;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ic-section { margin: 0 0 12px; }
.ic-section:last-child { margin-bottom: 0; }
.ic-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  color: #7fb0d8;
  margin: 0 0 3px;
}
.ic-section p { margin: 0; }

.ic-facts, .ic-refs { margin: 0; padding-left: 15px; }
.ic-facts li, .ic-refs li { margin: 0 0 4px; }
.ic-facts li:last-child, .ic-refs li:last-child { margin-bottom: 0; }
.ic-refs {
  font-size: 11.5px;
  color: #9096a6;
}
.ic-refs li { overflow-wrap: anywhere; }
.fc-head {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid #232333;
}
.fc-thumb {
  width: 110px; height: 110px;
  object-fit: cover;
  background: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.fc-thumb.no-img {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  background: #1a1a26;
  border: 1px dashed #2a2a3a;
}
.fc-head-text { flex: 1; min-width: 0; }
.fc-name {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 2px;
}
.fc-sub {
  font-size: 11.5px; color: #88a;
}
.fc-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #777788;
  margin: 12px 0 6px;
}
.fc-summary {
  font-size: 12.5px; line-height: 1.55; color: #cce6ff;
}
.fc-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin-top: 4px;
}
.fc-facts dt {
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10.5px;
  padding-top: 1px;
}
.fc-facts dd {
  color: #e0e0ee;
  margin: 0;
  overflow-wrap: anywhere;
}
.fc-links {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fc-link {
  background: transparent;
  border: 1px solid rgba(68,170,255,0.4);
  color: #aaddff;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  text-decoration: none;
}
.fc-link:hover { background: rgba(68,170,255,0.10); border-color: #44aaff; }

.fc-locate-btn {
  background: #1c2a3a;
  border: 1px solid #44aaff;
  color: #aaddff;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.fc-locate-btn:hover { background: #244466; }

/* ===== Stats overlay ===== */
.stats-overlay {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(10, 10, 20, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #e0e0ee;
  z-index: 5;
  pointer-events: none;
  min-width: 140px;
}
.stats-formula {
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.stats-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 1.5px 0;
}
.stats-label {
  color: #777788;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ===== Quiz panel ===== */
.quiz-body { display: flex; flex-direction: column; gap: 12px; }
.quiz-intro { font-size: 13px; color: #cce6ff; line-height: 1.5; }
.quiz-start {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.quiz-mode-btn {
  flex: 1 1 0;
  background: #1c2a3a;
  border: 1px solid #44aaff;
  color: #aaddff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  min-width: 120px;
}
.quiz-mode-btn:hover { background: #244466; }
.quiz-q {
  background: rgba(10, 10, 20, 0.6);
  border-left: 3px solid #44aaff;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13.5px; color: #fff;
  line-height: 1.45;
}
.quiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.quiz-choice {
  background: #1c1c2a;
  border: 1px solid #2a2a3a;
  color: #e0e0ee;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.quiz-choice:hover { background: #2a2a3a; border-color: #44aaff; }
.quiz-choice.correct { background: #143;border-color: #5a5; color: #b6f9b6; }
.quiz-choice.wrong { background: #311; border-color: #a55; color: #f9b6b6; }
.quiz-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #aaa;
}
.quiz-next, .quiz-restart {
  background: #1c2a3a; border: 1px solid #44aaff;
  color: #aaddff; border-radius: 5px;
  padding: 4px 11px; font-size: 11.5px; cursor: pointer;
}
.quiz-next:hover, .quiz-restart:hover { background: #244466; }
.quiz-home { display: flex; flex-direction: column; gap: 12px; }
.quiz-title { font-size: 16px; font-weight: 600; color: #fff; }
.quiz-sub { font-size: 12.5px; color: #aabbcc; line-height: 1.45; }
.quiz-mode-list { display: flex; flex-direction: column; gap: 6px; }
.quiz-mode-list .quiz-mode-btn {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; text-align: left;
  padding: 9px 11px;
}
.quiz-mode-name { font-size: 13px; font-weight: 600; color: #cce8ff; }
.quiz-mode-desc { font-size: 11px; color: #88a; font-weight: 400; }
.quiz-q em { font-style: italic; color: #aaddff; font-weight: 400; }
.quiz-body { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px; }
.quiz-flag-big { font-size: 36px; display: inline-block; margin-left: 6px; vertical-align: middle; }
.quiz-flag-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.quiz-flag-img {
  display: block;
  width: 160px; max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  background: #0a0a14;
}
.quiz-find-hint { font-size: 12px; color: #aacceb; font-style: italic; }
.quiz-side-hint { display: block; margin-top: 4px; font-size: 11px; color: #8fb6dd; font-weight: 400; font-style: italic; }
.quiz-build-count { font-size: 14px; margin: 6px 0; color: #eaf2ff; }
.quiz-build-wrong { color: #ff8a8a; }
.quiz-build-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.quiz-build-chip { font-size: 11px; padding: 2px 8px; border-radius: 11px; background: rgba(22,198,12,0.16); border: 1px solid rgba(22,198,12,0.5); color: #b8f5b0; }
.quiz-feedback {
  min-height: 18px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  background: transparent;
  color: #ccd;
}
.quiz-feedback.ok { background: #14331f; color: #b6f9b6; border-left: 3px solid #5a5; }
.quiz-feedback.no { background: #311; color: #f9b6b6; border-left: 3px solid #a55; }
.quiz-controls { display: flex; gap: 8px; justify-content: flex-end; }
.quiz-btn {
  background: #1c2a3a;
  border: 1px solid #44aaff;
  color: #aaddff;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.quiz-btn:hover { background: #244466; }
.quiz-btn.primary { background: #2a5588; color: #fff; }
.quiz-btn.primary:hover { background: #336699; }
.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: #aabbcc; font-weight: 400; }
.quiz-verdict { font-size: 13px; color: #cce6ff; font-style: italic; }

/* ===== Responsive ===== */
/* ===== Narrow screens ============================================= *
 * The toolbar is down to branding plus five actions — the five panel toggles
 * became rail icons — so it needs roughly 550px rather than the 1,032px it
 * did before. It therefore stays on one 44px row at any realistic screen
 * size, and only wraps to a second row on genuinely tiny ones. Every
 * capability stays visible and labelled; nothing is truncated or hidden.
 */
@media (max-width: 620px) {
  #topbar {
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    padding: 6px 12px;
    row-gap: 6px;
  }
  .topbar-left { flex: 1 0 auto; }
  .topbar-right { flex: 1 1 100%; justify-content: flex-start; }
  .topbar-sep { display: none; }        /* separators read as noise once wrapped */
}

/* Narrow the flyouts before considering floating them — a 1,100px screen can
   still show one comfortably alongside the model. */
@media (max-width: 1200px) {
  #flyout-left  { width: var(--flyout-left-w, 244px); }
  #flyout-right { width: var(--flyout-right-w, 300px); }
  #flyout-left[data-open="info-panel"] { width: var(--flyout-left-info-w, 312px); }
}
@media (max-width: 900px) {
  #flyout-left  { width: var(--flyout-left-w, 228px); }
  #flyout-right { width: var(--flyout-right-w, 280px); }
  #flyout-left[data-open="info-panel"] { width: var(--flyout-left-info-w, 288px); }
}
/* Below this a docked flyout would leave too little canvas to be worth it, so
   flyouts stop being layout and float over the model instead. The icon rails
   stay put, so every panel is still one tap away. layout.js sets
   data-floating on the workspace. */
@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);
  }
  /* Clear the rail on the left; nothing to clear on the right any more. */
  #workspace[data-floating="true"] #flyout-left  { left: 76px; }
  #workspace[data-floating="true"] #flyout-right { right: 0; }
}

/* ===== 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; }

/* ===== Share button flash feedback ===== */
#btn-share.flash { background: #143a44; border-color: #44aaff; color: #bfeaf5; }

/* ===== 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) ===== */
/* The green call-to-action treatment made sense when Tutor was one button among
   ten in a toolbar and needed to draw the eye. In a rail of five uniform,
   labelled buttons a permanently-coloured one reads as *selected* — which is
   exactly what the `.on` state means for its four neighbours. So in the rail it
   matches the others, and only the tint of its icon marks it out. */
.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; }

/* Tutor mode docks into the right flyout like everything else.
   It used to be `position: fixed; right: 0; width: 384px; z-index: 40`
   appended to <body> — a drawer that covered the right rail, part of the
   canvas and, most awkwardly, the Anatomy panel a student needs open to find
   the structure a tutor task is asking about. Now Tutor sits on the right and
   Anatomy on the left, and they coexist. */
#tutor-panel { position: static; width: 100%; height: 100%; min-height: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; background: rgba(13,17,26,0.92);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; overflow: hidden;
  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-showme { display: inline-block; margin-top: 9px; font-size: 11.5px; color: #7fb2e8; background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.tutor-showme:hover { color: #a8cdf5; }

.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; }

/* (tutor now inherits the flyout width; no separate narrow rule needed) */

/* ===== Narrated animation player ===== */
.anim-player { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; }
.anim-player[hidden] { display: none; }
.ap-backdrop { position: absolute; inset: 0; background: rgba(4,7,14,0.78); backdrop-filter: blur(2px); }
.ap-dialog { position: relative; width: min(880px, 94vw); background: #11131c; border: 1px solid #2a3145;
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); overflow: hidden; }
.ap-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #222a3c; }
.ap-title { font-weight: 700; font-size: 15px; color: #eaf2ff; flex: 1 1 auto; }
.ap-icon { background: #1b2030; color: #cdd9ef; border: 1px solid #2c3550; border-radius: 7px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; }
.ap-icon:hover { background: #232b40; color: #fff; }
.ap-close { font-size: 20px; }
.ap-narrate.off { opacity: .45; }

.ap-stage { position: relative; aspect-ratio: 16 / 9; background: #060912; display: flex; align-items: center; justify-content: center; }
.ap-img, .ap-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ap-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 22px 16px;
  background: linear-gradient(to top, rgba(4,7,14,0.92), rgba(4,7,14,0.55) 55%, transparent);
  color: #f2f7ff; pointer-events: none; }
.ap-step-title { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #7fd0ff; margin-bottom: 4px; }
.ap-step-text { display: block; font-size: 15.5px; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

.ap-controls { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-top: 1px solid #222a3c; }
.ap-timeline { flex: 1 1 auto; display: flex; gap: 4px; height: 9px; align-items: stretch; }
.ap-seg { position: relative; padding: 0; border: none; height: 100%; background: #2a3245; border-radius: 5px; overflow: hidden; cursor: pointer; min-width: 8px; }
.ap-seg:hover { background: #36405b; }
.ap-seg.active { box-shadow: 0 0 0 1px #4aa3ff inset; }
.ap-seg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg,#ff5d8f,#4aa3ff); }
.ap-time { font-size: 12px; color: #93a4c4; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }

/* ===== Merged animations modal: menu (cards) + player views ===== */
.ap-dialog { width: min(920px, 94vw); }
.ap-back { width: auto; padding: 0 11px; gap: 3px; font-size: 13px; font-weight: 600; display: none; }
.ap-narrate { display: none; }
.ap-dialog.view-player .ap-back,
.ap-dialog.view-player .ap-narrate { display: inline-flex; }
.ap-player-view { display: none; }
.ap-dialog.view-player .ap-player-view { display: block; }
.ap-dialog.view-player .ap-menu { display: none; }

.ap-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  gap: 13px;
  padding: 16px;
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
.ap-card {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; cursor: pointer; color: inherit; font: inherit;
  background: #161a26; border: 1px solid #29314a; border-radius: 11px;
  overflow: hidden;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.ap-card:hover { border-color: #4aa3ff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.45); }
.ap-card.playing { border-color: #ff5d8f; box-shadow: 0 0 0 1px rgba(255,93,143,0.45); }
.ap-card-thumb-wrap { position: relative; }
.ap-card-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #060912; }
.ap-card-play {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,26,0.5); border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 50%; color: #fff; font-size: 15px; padding-left: 3px;
  opacity: 0; transition: opacity 120ms;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ap-card:hover .ap-card-play { opacity: 1; }
.ap-card-body { padding: 9px 11px 12px; }
.ap-card-title { font-size: 13.5px; font-weight: 700; color: #eaf2ff; line-height: 1.25; }
.ap-card-sys { font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #ff7da6; margin-top: 4px; }
.ap-card-sum { font-size: 11.5px; color: #9aa3bd; line-height: 1.4; margin-top: 5px; }