/* A restrained light workspace around the existing experiment components. */
:root {
  --background: #f4f7f9;
  --foreground: #1e2b3a;
  --border: #dce5ec;
  --muted-foreground: #617184;
  --ui-surface: #fff;
  --ui-soft: #f8fafc;
  --ui-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}

html { background: var(--background); }
body { color: var(--foreground); background: var(--background); }
.app-shell { min-height: 100dvh; }

.topbar {
  grid-template-columns: 252px minmax(0, 1fr) auto;
  height: 70px;
  background: #fff;
  border-bottom-color: var(--border);
  box-shadow: 0 1px 3px rgb(30 43 58 / 4%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.brand { gap: 10px; padding-left: 24px; }
.brand-mark { width: 42px; height: 42px; }
.brand strong { color: #142c43; font-size: 20px; font-weight: 750; }
.brand small { color: var(--muted-foreground); }
.current-title { color: #31465b; font-size: 15px; font-weight: 650; }
.current-title span { color: var(--primary); }
.top-actions { padding-right: 24px; }

.workspace {
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: calc(100dvh - 70px);
}
.course-sidebar {
  top: 70px;
  height: calc(100dvh - 70px);
  background: #fbfcfd;
  border-right-color: var(--border);
}
.sidebar-head { height: 64px; padding-inline: 20px; }
.sidebar-head strong { color: #20354a; font-size: 15px; }
.sidebar-head span { background: #eaf2fb; font-size: 11px; }
.search-box {
  height: 42px;
  margin: 16px 14px 8px;
  border-color: #d9e3eb;
  background: #fff;
  box-shadow: 0 1px 2px rgb(25 47 70 / 3%);
}
.search-box:focus-within { border-color: var(--primary); outline: 2px solid rgb(23 105 224 / 12%); }
.course-nav { height: calc(100% - 130px); padding: 6px 10px 32px; }
.chapter-button { min-height: 44px; padding-inline: 12px; }
.chapter-button strong { color: #344a5f; font-weight: 650; }
.experiment-list { padding-left: 12px; }
.experiment-list button { min-height: 42px; padding: 9px 12px; }
.experiment-list button.active {
  background: #eaf2fb;
  color: #174f88;
  box-shadow: inset 3px 0 var(--primary);
}

.experiment-main { min-width: 0; padding: 28px clamp(20px, 2.4vw, 36px) 48px; }
@media (width > 1120px) {
  .experiment-main:has(> .prism-experiment) { padding-block: 12px; }
}
.experiment-main > * { max-width: 1600px; margin-inline: auto; }
.experiment-main :is(h1, h2, h3) { color: #1c2f43; text-wrap: balance; }
.experiment-main p { text-wrap: pretty; }
.experiment-main :is(output, .metric-grid strong, .stage-readout strong, .legacy-data-grid strong, .legacy-motion-readout strong) { font-variant-numeric: tabular-nums; }

/* Shared panel treatment leaves the physics drawings and their colors intact. */
.legacy-experiment,
.to-experiment,
.optics-experiment,
.rm-experiment { background: transparent; }
.to-experiment,
.optics-experiment { padding: 0; }
.legacy-panel,
.to-card,
.to-experiment .to-intro,
.optics-card,
.rm-card,
.vd-title-card,
.vd-stage-card,
.vd-card,
.vd-density-bench-card,
.vd-chart-card,
.stage-card,
.control-card,
.data-card,
.record-card,
.experiment-banner {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.legacy-panel { padding: 20px; }
.to-experiment .to-intro { padding: 20px 22px; }
.to-experiment .to-intro p { color: #526476; line-height: 1.6; }
.legacy-intro { margin-bottom: 18px; padding: 22px 24px; }
.legacy-experiment[data-testid="motion-experiment"] .legacy-intro { margin-bottom: 14px; padding: 16px 22px; }
.legacy-experiment .legacy-intro h1 { margin-bottom: 8px; font-size: clamp(25px, 2vw, 30px); line-height: 1.25; }
.legacy-experiment[data-testid="motion-experiment"] .legacy-intro h1 { margin-bottom: 5px; }
.legacy-experiment[data-testid="motion-experiment"] .legacy-intro p { line-height: 1.55; }
.legacy-intro p { max-width: 96ch; color: #526476; line-height: 1.7; }
.legacy-intro p + p { margin-top: 5px; }
.legacy-experiment h2 { font-size: 18px; line-height: 1.4; }

/* Let the experiment, controls, and supporting information keep natural heights. */
.legacy-motion-layout,
.legacy-speed-layout,
.energy-layout,
.energy-potential .energy-layout,
.statics-layout,
.pressure-experiment .statics-layout,
.optics-layout,
.vd-vision-layout,
.vd-density-grid,
.rm-layout,
.pinhole-layout,
.lab-layout {
  gap: 18px;
  align-items: start;
}
.melting-experiment { align-items: start; gap: 18px; }
.melting-console { align-self: start; }
.legacy-motion-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 330px); }
.legacy-motion-layout:has(> .motion-comparison) { grid-template-rows: min-content min-content 1fr; }
.legacy-motion-layout:has(> .motion-comparison) > .legacy-stage-panel { grid-column: 1; grid-row: 1 / 4; }
.legacy-motion-layout:has(> .motion-comparison) > .legacy-parameters { grid-column: 2; grid-row: 1; }
.legacy-motion-layout > .motion-comparison { grid-column: 2; grid-row: 2; align-self: start; }
.legacy-experiment[data-testid="motion-experiment"]:has(.motion-comparison) > .legacy-footer { display: none; }
.legacy-experiment[data-testid="motion-experiment"]:has(.motion-comparison) :is(.legacy-motion-readout, .legacy-thinking, .legacy-caption) { display: none; }
.legacy-speed-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 330px); }
.energy-layout,
.energy-potential .energy-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
.statics-layout,
.pressure-experiment .statics-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 330px); }
.optics-layout,
.vd-vision-layout,
.vd-density-grid,
.rm-layout,
.lab-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); }
.energy-sidebar,
.legacy-speed-main,
.legacy-speed-sidebar,
.control-stack { gap: 16px; }
.legacy-parameters,
.legacy-speed-sidebar,
.energy-sidebar { align-self: start; }
.legacy-stage-panel,
.energy-stage-panel,
.statics-stage-panel { align-self: start; }
.legacy-scene-viewport { border-radius: 10px; }
.legacy-motion-readout { border: 1px solid #e2eaf0; border-radius: 10px; background: var(--ui-soft); }
.legacy-experiment[data-testid="motion-experiment"] .legacy-control > .legacy-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.legacy-experiment[data-testid="motion-experiment"] .legacy-control > .legacy-buttons .legacy-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}
.legacy-footer {
  margin-top: 18px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.legacy-footer > div { background: var(--ui-soft); border-radius: 8px; }
.legacy-thinking,
.motion-selection-guide,
.observation,
.learning-goal {
  border: 1px solid #d8e5eb;
  border-radius: 10px;
  background: #f2f7f9;
  color: #34566b;
}
.legacy-thinking h3,
.observation strong,
.learning-goal strong { color: #285b76; }
.motion-selection-guide { padding: 12px 14px; line-height: 1.55; }
.motion-comparison { border-radius: 14px; background: #fff; }
.legacy-model-note,
.energy-model-note { color: #708093; line-height: 1.6; }

.experiment-banner { padding: 22px 24px; }
.experiment-banner h1 { margin-top: 6px; font-size: clamp(25px, 2vw, 30px); }
.experiment-banner p { color: #526476; line-height: 1.6; }
.formula-chip { border-color: #d8e5eb; background: #f2f7f9; }
.formula-chip strong { color: #285b76; }
.lab-layout,
.record-card,
.learning-goal { margin-top: 18px; }
.panel-title { min-height: 54px; padding-inline: 18px; }
.panel-title > span { font-weight: 700; }
.stage { background: #f8fafc; }
.metric-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.controls { padding: 14px 18px 4px; }
.control-buttons { padding: 8px 18px 18px; }
.observation { margin: 16px; }
.record-head { padding-inline: 20px; }
.empty-record { background: #fbfcfd; }

/* Short, tactile feedback for existing buttons. */
.topbar button,
.course-sidebar button,
.experiment-main button {
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}
@media (hover: hover) {
  .topbar button:not(:disabled):hover,
  .course-sidebar button:not(:disabled):hover,
  .experiment-main button:not(:disabled):hover { transform: translateY(-1px); }
}
.topbar button:not(:disabled):active,
.course-sidebar button:not(:disabled):active,
.experiment-main button:not(:disabled):active { transform: scale(.98); }
.experiment-main button:disabled { opacity: .55; }
.topbar button:focus-visible,
.course-sidebar button:focus-visible,
.experiment-main button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (width <= 1120px) and (width > 760px) {
  .topbar { grid-template-columns: 220px minmax(0, 1fr) auto; }
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .experiment-main { padding-inline: 22px; }
  .legacy-motion-layout,
  .legacy-speed-layout,
  .energy-layout,
  .energy-potential .energy-layout,
  .statics-layout,
  .pressure-experiment .statics-layout,
  .optics-layout,
  .vd-vision-layout,
  .vd-density-grid,
  .rm-layout,
  .lab-layout { grid-template-columns: minmax(0, 1fr); }
  .legacy-motion-layout:has(> .motion-comparison) { display: flex; flex-direction: column; align-items: stretch; }
  .legacy-motion-layout:has(> .motion-comparison) > :is(.legacy-stage-panel, .legacy-parameters) { width: 100%; min-width: 0; }
  .legacy-motion-layout > .motion-comparison { width: 100%; }
}

@media (width <= 760px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; height: 64px; }
  .brand { padding-left: 12px; }
  .brand-mark { width: 36px; height: 36px; }
  .workspace { display: block; min-height: calc(100dvh - 64px); }
  .course-sidebar {
    top: 0;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    box-shadow: none;
  }
  .course-sidebar.is-open { box-shadow: 12px 0 35px rgb(15 31 53 / 20%); }
  .experiment-main { padding: 16px 12px 32px; }
  .legacy-motion-layout,
  .legacy-speed-layout,
  .energy-layout,
  .energy-potential .energy-layout,
  .statics-layout,
  .pressure-experiment .statics-layout,
  .optics-layout,
  .vd-vision-layout,
  .vd-density-grid,
  .rm-layout,
  .lab-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .legacy-motion-layout:has(> .motion-comparison) { display: flex; flex-direction: column; align-items: stretch; }
  .legacy-motion-layout:has(> .motion-comparison) > :is(.legacy-stage-panel, .legacy-parameters) { width: 100%; min-width: 0; }
  .legacy-motion-layout > .motion-comparison { width: 100%; }
  .legacy-panel { padding: 16px; }
  .to-experiment .to-intro { padding: 18px; }
  .legacy-intro { padding: 20px; }
  .legacy-experiment .legacy-intro h1 { font-size: 24px; }
  .experiment-banner { padding: 20px; }
  .record-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .record-head button { width: 100%; }
  .legacy-motion-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar button,
  .course-sidebar button,
  .experiment-main button { transition: none; }
  .topbar button:not(:disabled):active,
  .course-sidebar button:not(:disabled):active,
  .experiment-main button:not(:disabled):active,
  .topbar button:not(:disabled):hover,
  .course-sidebar button:not(:disabled):hover,
  .experiment-main button:not(:disabled):hover { transform: none; }
}