/* (c) 2026 Wayne State University. All rights reserved. */
/*
 * Critical care EEG workstation (style.css): page layout only.
 * Colours, type sizes, radii, focus and components come from ui-system.css (linked first); this file uses its
 * tokens and never sets a colour literal or a font size below 12 px.
 * Workbench: library 264 px | figure | inspector 320 px at >= 1200 px. On a window at least 1200 x 600 the page itself
 * does not scroll, like EEG review software: header, footer and figure stay put and each side panel scrolls on its own.
 * Below 1200 px the side panels become drawers; below 600 px the figure comes first with a
 * sticky mini-transport. Modes: body[data-mode] = instructor | learn | test (Practice) | viewer.
 * Learn adds the guided-read panel (library | figure | guided read). Practice shows figure | practice panel, and
 * the Compare and Progress tabs (body[data-practice-tab]) give the practice panel the full width.
 * learning.css (linked before this file) styles the learning components themselves.
 */

.cc-main {
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--sl-space-4) var(--sl-space-5) var(--sl-space-6);
}

/* ---------------------------------------------------------------- page header */
.cc-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sl-space-3) var(--sl-space-5);
  margin-bottom: var(--sl-space-4);
}
.cc-title { flex: 1 1 320px; min-width: 0; }
.cc-title h1 { margin: 0; }
.cc-subtitle { max-width: 72ch; margin: var(--sl-space-1) 0 0; color: var(--sl-text-2); }
.cc-mode { display: grid; gap: var(--sl-space-1); }
.cc-mode .sl-hint { max-width: 36ch; }
.cc-due { margin: 0; }
.cc-presenter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2);
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  background: var(--sl-surface);
}
.cc-presenter__label { color: var(--sl-text-2); font-size: var(--sl-fs-1); font-weight: 600; }
.cc-presenter__steps { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); margin: 0; padding: 0; list-style: none; }
/* Hold and the connection chip are state, not steps: set apart after a divider. */
.cc-presenter__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2);
  padding-left: var(--sl-space-2);
  border-left: 1px solid var(--sl-border);
}
.cc-presenter__help { flex-basis: 100%; margin: 0; }
.cc-step {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--sl-fs-1);
  font-weight: 600;
  line-height: 1;
}
#ui-connection[data-state="live"] { border-color: var(--sl-success-ink); color: var(--sl-success-ink); }
#ui-connection[data-state="held"] { border-color: var(--sl-warning-ink); color: var(--sl-warning-ink); }

/* ---------------------------------------------------------------- workbench */
.cc-drawer-bar { display: none; }
.cc-workbench {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 320px;
  grid-template-areas: "library center inspector";
  gap: var(--sl-space-4);
  align-items: start;
}
.cc-library { grid-area: library; }
.cc-center { grid-area: center; display: grid; gap: var(--sl-space-4); min-width: 0; }
.cc-inspector { grid-area: inspector; }
.cc-practice { grid-area: practice; }
.cc-learn { grid-area: learn; }
.cc-panel {
  min-width: 0;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  background: var(--sl-surface);
}
.cc-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  padding: var(--sl-space-3) var(--sl-space-4);
  border-bottom: 1px solid var(--sl-border);
}
.cc-panel__head h2 { margin: 0; font-size: var(--sl-fs-4); }
.cc-count { margin-left: auto; color: var(--sl-text-3); font-size: var(--sl-fs-1); }
.cc-drawer__close { display: none; font-size: var(--sl-fs-5); }
.cc-small-heading { margin: 0 0 var(--sl-space-2); font-size: var(--sl-fs-3); }
.cc-eyebrow { margin: 0; color: var(--sl-text-2); font-size: var(--sl-fs-1); font-weight: 600; }

/* Mode layouts */
body:not([data-mode="learn"]) .cc-learn,
body[data-mode="instructor"] .cc-practice,
body[data-mode="learn"] .cc-practice,
body:not([data-mode="guided"]) .cc-guided-nav,
body:not([data-mode="guided"]) .cc-guided,
body[data-mode="guided"] .cc-library,
body[data-mode="guided"] .cc-inspector,
body[data-mode="guided"] .cc-practice,
body[data-mode="guided"] .cc-toolbars,
body[data-mode="guided"]:not(.cc-guided-context) .cc-context,
body[data-mode="guided"] .cc-teaching,
body[data-mode="guided"] .cc-drawer-bar,
body[data-mode="guided"] .cc-undo,
body[data-mode="guided"] #live-badge,
body[data-mode="guided"] #ui-overlays-hint,
body[data-mode="guided"]:not(.cc-guided-measure) #lx-measure-help,
body[data-mode="learn"] .cc-inspector,
body[data-mode="test"] .cc-library,
body[data-mode="test"] .cc-inspector,
body[data-mode="viewer"] .cc-library,
body[data-mode="viewer"] .cc-inspector { display: none; }
body[data-mode="learn"] .cc-workbench {
  grid-template-columns: 264px minmax(0, 1fr) 360px;
  grid-template-areas: "library center learn";
}
body[data-mode="guided"] .cc-workbench {
  grid-template-columns: 220px minmax(0, 1fr) 340px;
  grid-template-areas: "tour-nav center tour";
}
body[data-mode="test"] .cc-workbench,
body[data-mode="viewer"] .cc-workbench {
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas: "center practice";
}
body[data-mode="viewer"] .cc-workbench { grid-template-columns: minmax(0, 1fr) 380px; }
/* Compare and Progress bring their own figures and tables: the practice panel takes the whole row. */
body[data-mode="test"][data-practice-tab="compare"] .cc-workbench,
body[data-mode="test"][data-practice-tab="progress"] .cc-workbench {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "practice";
}
body[data-mode="test"][data-practice-tab="compare"] .cc-center,
body[data-mode="test"][data-practice-tab="progress"] .cc-center { display: none; }
body:not([data-mode="instructor"]) .cc-presenter,
body[data-mode="instructor"]:not(.cc-presenter-open) .cc-presenter,
body:not([data-mode="instructor"]) .cc-presenter-toggle { display: none; }
body[data-mode="viewer"] .cc-presenter { display: flex; padding: var(--sl-space-1) var(--sl-space-2); }
body[data-mode="viewer"] .cc-presenter > :not(.cc-presenter__status),
body[data-mode="viewer"] .cc-presenter__status > :not(#ui-connection) { display: none; }
body[data-mode="viewer"] .cc-presenter__status { padding-left: 0; border-left: 0; }
body[data-mode="viewer"] .cc-mode,
body[data-mode="viewer"] #new-case { display: none; }
/* The hosted page stays hidden until its educational notice is acknowledged (the class comes from the site build). */
body.cc-entry-pending > :not(dialog) { visibility: hidden; }
/* The hosted copy has no learner display and no Practice schedule. */
.cc-site-hosted .cc-presenter,
.cc-site-hosted .cc-presenter-toggle,
.cc-site-hosted .cc-due { display: none; }

/* Expanded figure */
.cc-expanded .cc-library,
.cc-expanded .cc-learn,
.cc-expanded .cc-inspector { display: none; }
body.cc-expanded[data-mode="instructor"] .cc-workbench,
body.cc-expanded[data-mode="learn"] .cc-workbench { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center"; }
.cc-expanded .cc-canvas { height: max(420px, calc(100vh - 220px)); }

/* ---------------------------------------------------------------- library */
.cc-library__tools { display: grid; gap: var(--sl-space-3); padding: var(--sl-space-3) var(--sl-space-4); }
.cc-search { margin: 0; }
.cc-preset-list { padding: 0 var(--sl-space-2) var(--sl-space-3); }
.cc-group + .cc-group { margin-top: var(--sl-space-2); }
.cc-group__title {
  margin: var(--sl-space-2) var(--sl-space-2) var(--sl-space-1);
  color: var(--sl-text-2);
  font-size: var(--sl-fs-1);
  font-weight: 600;
}
.cc-presets { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cc-preset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "short chip" "title chip";
  gap: 0 var(--sl-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--sl-space-2) var(--sl-space-3);
  border: 1px solid transparent;
  border-radius: var(--sl-radius-sm);
  background: transparent;
  color: var(--sl-text-1);
  text-align: left;
  cursor: pointer;
}
.cc-preset:hover { background: var(--sl-surface-sunken); }
.cc-preset[aria-pressed="true"] { border-color: var(--sl-brand); background: var(--sl-brand-tint); }
.cc-preset__short { grid-area: short; font-size: var(--sl-fs-3); font-weight: 600; }
.cc-preset__title { grid-area: title; color: var(--sl-text-2); font-size: var(--sl-fs-1); }
.cc-preset .sl-chip { grid-area: chip; align-self: center; }
.cc-empty { padding: var(--sl-space-3); }
.cc-library__footer {
  padding: var(--sl-space-3) var(--sl-space-4);
  border-top: 1px solid var(--sl-border);
  color: var(--sl-text-2);
  font-size: var(--sl-fs-1);
}
.cc-library__footer p { margin: 0 0 var(--sl-space-1); }

/* ---------------------------------------------------------------- figure */
.cc-figure { overflow: hidden; }
.cc-figure__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sl-space-2) var(--sl-space-4);
  padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-2);
  background: var(--sl-surface);
}
.cc-figure__head h2 { margin: 0; font-size: var(--sl-fs-4); }
.cc-figure__head .sl-caption { margin: var(--sl-space-1) 0 0; }
.cc-figure__chips { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); }
#live-badge[data-state="running"] { color: var(--sl-success-ink); border-color: var(--sl-success-ink); }

.cc-toolbars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2) var(--sl-space-3);
  padding: var(--sl-space-2) var(--sl-space-4);
  border-top: 1px solid var(--sl-border);
  border-bottom: 1px solid var(--sl-border);
  background: var(--sl-surface-subtle);
}
.cc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-1) var(--sl-space-2);
  min-width: 0;
}
.cc-toolbar + .cc-toolbar { padding-left: var(--sl-space-3); border-left: 1px solid var(--sl-border); }
.cc-toolbar__label { color: var(--sl-text-2); font-size: var(--sl-fs-1); font-weight: 600; }
.cc-toolbar .lx-caliper-controls { display: contents; }
.cc-inline-field { display: inline-flex; align-items: center; gap: var(--sl-space-1); }
.cc-inline-field .sl-label { color: var(--sl-text-2); font-size: var(--sl-fs-1); white-space: nowrap; }
.cc-inline-field .sl-select { width: auto; min-height: var(--sl-control-h-dense); padding: 0 var(--sl-space-2); }
.cc-sens__row { display: inline-flex; align-items: center; gap: 2px; }
.cc-sens .sl-btn--icon { width: var(--sl-control-h-dense); font-size: var(--sl-fs-4); }
.cc-figure__help {
  display: grid;
  gap: 2px;
  padding: var(--sl-space-2) var(--sl-space-4);
  border-top: 1px solid var(--sl-border);
}
.cc-figure__help .sl-hint { margin: 0; }
.cc-clock {
  align-self: center;
  min-width: 5ch;
  color: var(--sl-text-2);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-fs-2);
}

.cc-canvas {
  position: relative;
  height: clamp(420px, calc(100vh - 300px), 720px);
  background: var(--sl-paper);
}
.cc-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.cc-readout:empty { display: none; }
.cc-readout { padding: var(--sl-space-3) var(--sl-space-4); border-top: 1px solid var(--sl-border); }
.cc-readout .lx-readout__title { margin: 0 0 var(--sl-space-2); font-weight: 600; }
.cc-readout .lx-readout__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sl-space-2) var(--sl-space-4);
  margin: 0;
}
.cc-readout .lx-readout__row dt { color: var(--sl-text-2); font-size: var(--sl-fs-1); }
.cc-readout .lx-readout__row dd { margin: 0; font-weight: 600; }

/* ---------------------------------------------------------------- context, teaching card, undo */
.cc-context { padding: var(--sl-space-3) var(--sl-space-4); }
.cc-context__list,
.cc-observations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sl-space-2) var(--sl-space-4);
  margin: 0;
}
.cc-context__list dt,
.cc-observations dt { color: var(--sl-text-2); font-size: var(--sl-fs-1); font-weight: 600; }
.cc-context__list dd,
.cc-observations dd { margin: 0; }
.cc-teaching { display: grid; gap: var(--sl-space-3); padding: var(--sl-space-4); }
.cc-teaching h2 { margin: 0; font-size: var(--sl-fs-5); }
.cc-teaching p { margin: 0; }
.cc-teaching__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sl-space-2);
}
.cc-observations { padding: var(--sl-space-3); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); }
.cc-derived { color: var(--sl-text-2); font-family: var(--sl-font-mono); font-size: var(--sl-fs-2); }
.cc-tip { margin: 0; }
.cc-undo { margin: 0; }
.cc-undo__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-2); }
.cc-undo__body .sl-callout__body { flex: 1 1 240px; }

/* ---------------------------------------------------------------- practice */
.cc-practice { display: grid; gap: var(--sl-space-3); align-content: start; padding: var(--sl-space-4); }
.cc-practice__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-2); }
.cc-practice__head h2 { margin: 0 auto 0 0; font-size: var(--sl-fs-4); }
.cc-practice__status {
  margin: 0;
  padding: var(--sl-space-2) var(--sl-space-3);
  border-left: 3px solid var(--sl-info-ink);
  background: var(--sl-info-tint);
  color: var(--sl-text-1);
}
.cc-practice__root,
.cc-viewer-read { min-width: 0; }
.cc-practice .lx-panel { min-width: 0; }
/* Visually hidden text inside scrolling tables must not widen the page: contain it in the scroll box. */
.cc-workbench .lx-table-wrap { position: relative; }
.cc-data,
.cc-why { border-top: 1px solid var(--sl-border); padding-top: var(--sl-space-2); }
.cc-data > summary,
.cc-why > summary { min-height: var(--sl-target-min); color: var(--sl-text-1); font-weight: 600; cursor: pointer; }
.cc-data[open] > summary,
.cc-why[open] > summary { margin-bottom: var(--sl-space-2); }
.cc-why p { margin: 0; color: var(--sl-text-2); }
.cc-storage { margin: 0 0 var(--sl-space-3); }
#ui-quiz-note { margin: 0; }
body[data-mode="viewer"] .cc-practice__root,
body[data-mode="viewer"] .cc-data,
body[data-mode="viewer"] .cc-why,
body[data-mode="viewer"] #ui-cbm { display: none; }
/* Wide Practice tabs keep the panel readable rather than stretching text across a large screen. */
body[data-practice-tab="compare"] .cc-practice,
body[data-practice-tab="progress"] .cc-practice { justify-self: center; width: 100%; max-width: 1280px; }

/* ---------------------------------------------------------------- learn: guided read and primer */
.cc-learn { display: grid; align-content: start; }
.cc-learn__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2) var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-4);
  border-bottom: 1px solid var(--sl-border);
}
.cc-learn__tools .sl-field { margin: 0; }
.cc-learn__tools .sl-hint { flex-basis: 100%; margin: 0; }
.cc-learn__root { padding: var(--sl-space-3) var(--sl-space-4); min-width: 0; }
.cc-learn__root:empty { display: none; }
.cc-learn .cc-why { margin: 0 var(--sl-space-4) var(--sl-space-3); }
.cc-primer { width: min(560px, calc(100vw - 32px)); }
.cc-primer__card {
  min-height: 180px;
  padding: var(--sl-space-3) var(--sl-space-4);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  background: var(--sl-surface-subtle);
}
.cc-primer__card p { margin: 0 0 var(--sl-space-2); }
.cc-primer__count { color: var(--sl-text-2); font-size: var(--sl-fs-1); }
.cc-primer__term { margin: 0 0 var(--sl-space-2); font-size: var(--sl-fs-5); }
.cc-primer__nav { justify-content: flex-end; margin-top: var(--sl-space-3); }

/* ---------------------------------------------------------------- inspector */
.cc-inspector {
  position: sticky;
  top: calc(var(--sl-header-h) + var(--sl-space-3));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--sl-header-h) - var(--sl-space-5));
  overflow: hidden;
}
.cc-descriptor {
  display: grid;
  gap: var(--sl-space-1);
  padding: var(--sl-space-3) var(--sl-space-4);
  border-bottom: 1px solid var(--sl-border);
  background: var(--sl-surface-subtle);
}
.cc-descriptor__name { margin: 0; font-family: var(--sl-font-mono); font-size: var(--sl-fs-2); font-weight: 600; }
.cc-descriptor__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-2); }
.cc-descriptor[aria-busy="true"] .cc-descriptor__name { color: var(--sl-text-3); }
.cc-issues { display: grid; gap: var(--sl-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--sl-fs-1); }
.cc-issues:empty { display: none; }
.cc-issue__tag { color: var(--sl-warning-ink); font-weight: 600; }
.cc-page { color: var(--sl-text-3); white-space: nowrap; }
.cc-inspector__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cc-inspector .sl-section__summary { gap: var(--sl-space-2); }
.cc-inspector .sl-section__meta .sl-chip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cc-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sl-space-2); margin: 0 0 var(--sl-space-3); }
.cc-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sl-brand); }
.cc-check label { font-size: var(--sl-fs-2); }
.cc-check .sl-hint { grid-column: 2; }
.cc-map { margin: 0 0 var(--sl-space-3); }
.cc-map svg { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto; }
.cc-map svg[aria-disabled="true"] { opacity: 0.6; }
.cc-status-line { margin: calc(var(--sl-space-2) * -1) 0 var(--sl-space-3); }
.cc-chips { display: flex; flex-wrap: wrap; gap: var(--sl-space-1); }
.cc-button-row,
.cc-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-2); margin: 0 0 var(--sl-space-3); }
.cc-file { padding: var(--sl-space-2); }
.cc-timeline .lx-tl__scroll { overflow-x: auto; margin: var(--sl-space-2) 0; }
.cc-timeline table { width: 100%; border-collapse: collapse; font-size: var(--sl-fs-1); }
.cc-timeline caption { text-align: left; font-weight: 600; padding-bottom: var(--sl-space-1); }
.cc-timeline th,
.cc-timeline td { padding: var(--sl-space-1); border-bottom: 1px solid var(--sl-border); text-align: left; vertical-align: top; }
.cc-timeline .lx-tl__row--current { background: var(--sl-brand-tint); }
.cc-timeline .lx-tl__actions { display: flex; flex-wrap: wrap; gap: var(--sl-space-1); }
.cc-timeline fieldset { margin: var(--sl-space-3) 0; padding: var(--sl-space-3); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); }
.cc-timeline legend { padding: 0 var(--sl-space-1); font-size: var(--sl-fs-2); font-weight: 600; }
.cc-timeline .lx-tl__add { display: grid; gap: var(--sl-space-2); }
.cc-timeline .lx-tl__recruited { display: flex; flex-wrap: wrap; gap: var(--sl-space-1); margin: 0 0 var(--sl-space-3); }

/* ---------------------------------------------------------------- reference dialog */
.cc-reference-dialog { width: min(920px, calc(100vw - 32px)); }
.cc-reference-dialog h3 { margin: var(--sl-space-4) 0 var(--sl-space-2); }
.cc-reference-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sl-space-3); }
.cc-ref-card { padding: var(--sl-space-3); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface-subtle); }
.cc-ref-card h4 { margin: 0 0 var(--sl-space-1); font-size: var(--sl-fs-3); }
.cc-ref-card p { margin: 0 0 var(--sl-space-2); }
.cc-table-scroll { max-width: 100%; overflow-x: auto; }
.cc-glossary { width: 100%; border-collapse: collapse; }
.cc-glossary th,
.cc-glossary td { padding: var(--sl-space-2); border-bottom: 1px solid var(--sl-border); text-align: left; vertical-align: top; }
.cc-glossary thead th { color: var(--sl-text-2); font-size: var(--sl-fs-1); }
.cc-abbr { font-weight: 700; }
.cc-nowrap { white-space: nowrap; }
.cc-citation { color: var(--sl-text-2); font-size: var(--sl-fs-1); }

/* ---------------------------------------------------------------- guided mode */
.cc-guided-nav { grid-area: tour-nav; }
.cc-guided { grid-area: tour; }
.cc-guided-nav__list { display: grid; gap: var(--sl-space-3); padding: var(--sl-space-3); }
.cc-guided-lessons { display: grid; gap: var(--sl-space-1); margin: 0; padding: 0; list-style: none; }
.cc-guided-lesson {
  display: flex;
  justify-content: space-between;
  gap: var(--sl-space-2);
  width: 100%;
  padding: var(--sl-space-2);
  border: 1px solid transparent;
  border-radius: var(--sl-radius-md);
  background: transparent;
  color: var(--sl-text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cc-guided-lesson:hover { background: var(--sl-surface-sunken); }
.cc-guided-lesson[aria-current="step"] { border-color: var(--sl-brand); background: var(--sl-brand-tint); font-weight: 600; }
.cc-guided-lesson__done { color: var(--sl-success-ink); font-size: var(--sl-fs-1); font-weight: 400; }
.cc-guided__body { display: grid; gap: var(--sl-space-3); padding: var(--sl-space-4); }
.cc-guided__body p { margin: 0; }
.cc-guided__lesson { margin: 0; font-size: var(--sl-fs-5); }
.cc-guided__step { margin: 0; font-size: var(--sl-fs-4); }
.cc-guided__step:focus { outline: none; }
.cc-guided__source { color: var(--sl-text-2); font-size: var(--sl-fs-1); }
.cc-guided__nav { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); }
.cc-guided-action, .cc-guided-check { display: grid; gap: var(--sl-space-2); justify-items: start; }
.cc-guided-question { font-weight: 600; }
.cc-guided-options { display: grid; gap: var(--sl-space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.cc-guided-option { width: 100%; justify-content: flex-start; text-align: left; height: auto; }
.cc-guided-option[data-result="right"] { border-color: var(--sl-success-ink); color: var(--sl-success-ink); opacity: 1; }
.cc-guided-option[data-result="wrong"] { border-color: var(--sl-danger-ink); color: var(--sl-danger-ink); opacity: 1; }
.cc-guided-feedback { width: 100%; }

/* ---------------------------------------------------------------- drawers (< 1200 px) */
@media (max-width: 1199px) {
  .cc-drawer-bar { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); margin: 0 0 var(--sl-space-3); }
  body[data-mode="learn"] #ui-open-inspector,
  body[data-mode="test"] .cc-drawer-bar,
  body[data-mode="viewer"] .cc-drawer-bar { display: none; }
  body[data-mode="instructor"] .cc-workbench { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center"; }
  body[data-mode="learn"] .cc-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "center" "learn";
  }
  body[data-mode="guided"] .cc-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "center" "tour" "tour-nav";
  }
  .cc-drawer { display: none; }
  body[data-mode="instructor"] .cc-drawer[data-open="true"],
  body[data-mode="learn"] #library[data-open="true"] {
    position: fixed;
    top: var(--sl-header-h);
    bottom: 0;
    z-index: var(--sl-z-drawer);
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: none;
    border-radius: 0;
    box-shadow: var(--sl-shadow-2);
  }
  #library[data-open="true"] { left: 0; overflow: auto; overscroll-behavior: contain; }
  #controls[data-open="true"] { right: 0; overflow: hidden; }
  .cc-drawer__close { display: inline-flex; }
  .cc-drawer-backdrop:not([hidden]) {
    position: fixed;
    inset: var(--sl-header-h) 0 0 0;
    z-index: calc(var(--sl-z-drawer) - 1);
    background: color-mix(in srgb, var(--sl-text-1) 45%, transparent);
  }
  body[data-mode="test"] .cc-workbench,
  body[data-mode="viewer"] .cc-workbench { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "practice"; }
  body[data-mode="test"][data-practice-tab="compare"] .cc-workbench,
  body[data-mode="test"][data-practice-tab="progress"] .cc-workbench { grid-template-areas: "practice"; }
}
@media (min-width: 1200px) {
  .cc-drawer-backdrop { display: none; }
  /* Library column scrolls on its own, like the inspector, instead of with the page. */
  .cc-library {
    position: sticky;
    top: calc(var(--sl-header-h) + var(--sl-space-3));
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--sl-header-h) - var(--sl-space-5));
    overflow: hidden;
  }
  .cc-library .cc-preset-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
}

/* ---------------------------------------------------------------- fixed workstation layout */
/* The page does not scroll: header and footer stay, the figure fills what is left, and side panels scroll on their own.
   app.js moves the case details (.cc-details) into the side panel at this size (FIXED_LAYOUT there must match). */
@media (min-width: 1200px) and (min-height: 600px) {
  html:has(body:not([data-mode="viewer"])) { height: 100%; overflow: hidden; }
  body:not([data-mode="viewer"]) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
  body:not([data-mode="viewer"]) .sl-header,
  body:not([data-mode="viewer"]) .sl-footer { flex: none; }
  body:not([data-mode="viewer"]) .sl-footer { padding: var(--sl-space-1) var(--sl-space-4); }
  body:not([data-mode="viewer"]) .cc-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: var(--sl-space-2) var(--sl-space-4);
  }
  body:not([data-mode="viewer"]) .cc-page-header { flex: none; align-items: center; margin-bottom: var(--sl-space-2); }
  body:not([data-mode="viewer"]) .cc-title h1 { font-size: var(--sl-fs-5); }
  body:not([data-mode="viewer"]) .cc-subtitle { margin-top: 0; font-size: var(--sl-fs-1); }
  body:not([data-mode="viewer"]) .cc-workbench {
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
  }
  body[data-mode="instructor"] .cc-workbench { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  /* The EEG gets the height: one compact head line, compact toolbars and no toolbar captions. */
  body:not([data-mode="viewer"]) .cc-figure__head { align-items: center; padding: var(--sl-space-1) var(--sl-space-3); }
  body:not([data-mode="viewer"]) .cc-figure__head h2 { font-size: var(--sl-fs-3); }
  body:not([data-mode="viewer"]) #ui-figure-caption { font-size: var(--sl-fs-1); }
  body:not([data-mode="viewer"]) .cc-toolbars {
    flex: none;
    gap: var(--sl-space-1) var(--sl-space-3);
    padding: var(--sl-space-1) var(--sl-space-3);
  }
  body:not([data-mode="viewer"]) .cc-toolbar { flex-wrap: wrap; padding: 0; border: 0; }
  body:not([data-mode="viewer"]) .cc-toolbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body:not([data-mode="viewer"]) #ui-overlays-hint,
  body:not([data-mode="viewer"]) #ui-shortcuts { display: none; }
  body:not([data-mode="viewer"]) .cc-center { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body:not([data-mode="viewer"]) .cc-figure { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
  body:not([data-mode="viewer"]) .cc-canvas { flex: 1 1 0; height: auto; min-height: 0; }
  body:not([data-mode="viewer"]) .cc-library,
  body:not([data-mode="viewer"]) .cc-inspector,
  body:not([data-mode="viewer"]) .cc-guided-nav,
  body:not([data-mode="viewer"]) .cc-guided,
  body:not([data-mode="viewer"]) .cc-learn,
  body:not([data-mode="viewer"]) .cc-practice {
    position: static;
    align-content: start;
    height: auto;
    max-height: none;
    min-height: 0;
    overscroll-behavior: contain;
  }
  body:not([data-mode="viewer"]) .cc-guided-nav,
  body:not([data-mode="viewer"]) .cc-guided,
  body:not([data-mode="viewer"]) .cc-learn,
  body:not([data-mode="viewer"]) .cc-practice { overflow: auto; }
  /* The case details share the side panel's scrolling, so they lose their own card frame. */
  .cc-inspector .cc-details > .cc-panel,
  .cc-guided .cc-details > .cc-panel,
  .cc-learn .cc-details > .cc-panel,
  .cc-practice .cc-details > .cc-panel { border-width: 1px 0 0; border-radius: 0; }
  .cc-details .cc-context__list,
  .cc-details .cc-observations { grid-template-columns: minmax(0, 1fr); }
}
.cc-details { display: grid; gap: var(--sl-space-4); }
body[data-mode="test"][data-practice-tab="compare"] .cc-details,
body[data-mode="test"][data-practice-tab="progress"] .cc-details { display: none; }

/* ---------------------------------------------------------------- feedback (hosted copy only) */
body:not(.cc-site-hosted) .cc-feedback-open { display: none; }
.cc-feedback-form { display: grid; gap: var(--sl-space-3); }
.cc-feedback-form textarea { width: 100%; min-height: 140px; resize: vertical; font: inherit; }

/* ---------------------------------------------------------------- phones (< 600 px) */
@media (max-width: 599px) {
  /* Figure first: the title and mode switch stay on top, the presenter group moves below the workbench. */
  .cc-main {
    display: flex;
    flex-direction: column;
    padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-5);
  }
  .cc-page-header { display: contents; }
  .cc-title { flex: none; margin-bottom: var(--sl-space-2); }
  .cc-mode { margin-bottom: var(--sl-space-3); }
  .cc-presenter { order: 5; margin-top: var(--sl-space-4); }
  .cc-drawer-backdrop { order: 6; }
  .cc-figure__head { padding: var(--sl-space-3); }
  .cc-toolbars { padding: var(--sl-space-2) var(--sl-space-3); }
  .cc-toolbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Mini-transport above the trace; display and measure toolbars follow the figure. */
  .cc-figure { display: flex; flex-direction: column; overflow: visible; }
  .cc-toolbars { display: contents; }
  .cc-toolbar { padding: var(--sl-space-2) var(--sl-space-3); background: var(--sl-surface-subtle); }
  .cc-toolbar + .cc-toolbar { padding-left: var(--sl-space-3); border-left: 0; }
  .cc-toolbar--playback {
    position: sticky;
    top: var(--sl-header-h);
    z-index: var(--sl-z-sticky);
    order: 1;
    border-bottom: 1px solid var(--sl-border);
    box-shadow: var(--sl-shadow-1);
  }
  .cc-toolbar--playback .sl-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cc-canvas { order: 2; }
  #ui-toolbar-display { order: 3; border-top: 1px solid var(--sl-border); }
  #ui-toolbar-measure { order: 4; }
  .cc-figure__help { order: 5; }
  .cc-readout { order: 6; }
  .cc-canvas { height: 460px; }
  .cc-context__list,
  .cc-observations { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- learner display (presentation layout) */
body[data-mode="viewer"] .cc-main { padding-top: var(--sl-space-2); }
body[data-mode="viewer"] .cc-page-header { margin-bottom: var(--sl-space-2); align-items: center; }
body[data-mode="viewer"] .cc-subtitle,
body[data-mode="viewer"] .cc-toolbar__label,
body[data-mode="viewer"] .cc-figure__help,
body[data-mode="viewer"] .cc-inline-field .sl-label,
body[data-mode="viewer"] #ui-figure-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body[data-mode="viewer"] .cc-title h1 { font-size: var(--sl-fs-5); }
body[data-mode="viewer"] .cc-toolbars { padding-top: 0; }
body[data-mode="viewer"] .cc-figure__head { padding-bottom: var(--sl-space-1); }
body[data-mode="viewer"] #expand,
body[data-mode="viewer"] #ui-shortcuts { display: none; }
body[data-mode="viewer"] .cc-canvas { height: max(320px, calc(100vh - 290px)); }

/* ---------------------------------------------------------------- print: figure, caption and description */
@media print {
  .cc-library, .cc-practice, .cc-drawer-bar, .cc-page-header .cc-mode, .cc-presenter, .cc-presenter-toggle,
  .cc-toolbars, .cc-undo,
  .cc-inspector__body, .cc-drawer__close, .cc-readout:empty { display: none !important; }
  .cc-workbench { display: block; }
  .cc-inspector { position: static; display: block !important; max-height: none; border: 0; }
  /* Nothing redraws the canvas for print, so keep the bitmap's own aspect ratio instead of stretching it into a
     fixed-height box (which distorted glyphs and the trace time base). */
  .cc-canvas { height: auto; }
  .cc-canvas canvas { height: auto; max-height: 640px; object-fit: contain; }
  .cc-teaching, .cc-context { break-inside: avoid; }
}