/* ==========================================================================
   Lecture-mode sketches (components/lecture-sketches.js) and the slide that
   holds one (fundamentals-lecture.js, renderSketch).

   Ink on paper: the slide's own surface, strokes in the text color, two
   marker colors that keep the course's polarity code (blue for surface
   negative, red for surface positive) and the plum accent for anything that
   points or happens. Lettering is Caveat, so the words read as part of the
   drawing rather than as captions.
   ========================================================================== */

.ls-svg {
  --ls-ink: var(--text-color);
  --ls-soft: var(--text-secondary);
  --ls-neg: #2563c9;
  --ls-pos: #cf3a30;
  --ls-acc: var(--accent-color);
  --ls-cur: #23885a;
  --ls-paper: var(--surface-1);
  --ls-wash: var(--surface-2);
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
body.dark .ls-svg {
  --ls-neg: #8db8ff;
  --ls-pos: #ff8f86;
  --ls-cur: #6fd3a0;
}

.ls-ink {
  fill: none;
  stroke: var(--ls-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ls-ink.ls-pass { stroke-width: 1.1; opacity: 0.45; }
.ls-ink.ls-thin { stroke-width: 1.6; }
.ls-ink.ls-layer { stroke: var(--ls-soft); stroke-width: 1.8; }
.ls-ink.ls-grid { stroke: var(--ls-soft); stroke-width: 1; opacity: 0.45; }
.ls-ink.ls-cell { stroke-width: 2.6; }
.ls-ink.ls-head { stroke-width: 2.6; }
.ls-ink.ls-wire { stroke: var(--ls-soft); stroke-width: 1.6; stroke-dasharray: 2 5; }
.ls-ink.ls-panel { stroke: var(--ls-soft); stroke-width: 1.6; }
.ls-ink.ls-elec { stroke-width: 2.2; }
.ls-ink.ls-neg, .ls-ink.ls-negline { stroke: var(--ls-neg); }
.ls-ink.ls-pos, .ls-ink.ls-posline { stroke: var(--ls-pos); }
.ls-ink.ls-acc { stroke: var(--ls-acc); }
.ls-ink.ls-muted { stroke: var(--ls-soft); }
.ls-ink.ls-sign { stroke-width: 3; }

.ls-cellfill { fill: color-mix(in srgb, var(--ls-acc) 12%, transparent); }
.ls-elecfill { fill: var(--ls-paper); }
.ls-panelfill { fill: color-mix(in srgb, var(--ls-wash) 70%, transparent); }
.ls-bone { fill: color-mix(in srgb, var(--ls-soft) 14%, transparent); }
.ls-negfill { fill: color-mix(in srgb, var(--ls-neg) 13%, transparent); }
.ls-posfill { fill: color-mix(in srgb, var(--ls-pos) 11%, transparent); }
.ls-accfill { fill: color-mix(in srgb, var(--ls-acc) 13%, transparent); }
.ls-softfill { fill: color-mix(in srgb, var(--ls-soft) 12%, transparent); }

.ls-bouton { fill: var(--ls-paper); stroke: var(--ls-ink); stroke-width: 2; }
.ls-bouton-on { fill: var(--ls-acc); stroke: var(--ls-acc); stroke-width: 2; }

.ls-ion circle { fill: var(--ls-pos); }
.ls-ion path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.ls-ion.is-neg circle { fill: var(--ls-neg); }

.ls-current {
  fill: none;
  stroke: var(--ls-cur);
  stroke-width: 2.4;
  stroke-dasharray: 7 8;
  stroke-linecap: round;
}
.ls-text.ls-current-text { fill: var(--ls-cur); }

.ls-landmark { fill: var(--ls-acc); }
.ls-countdot { fill: var(--ls-acc); }
.ls-text.ls-on-dot { fill: #fff; font-size: 20px; }
.ls-pulse { fill: var(--ls-acc); stroke: var(--ls-paper); stroke-width: 3; }
.ls-pupil { fill: var(--ls-ink); }
.ls-cornea { fill: none; stroke: var(--ls-pos); stroke-width: 3.2; stroke-linecap: round; }
.ls-measure {
  fill: none;
  stroke: var(--ls-acc);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.85;
}
.ls-measurept { fill: var(--ls-paper); stroke: var(--ls-soft); stroke-width: 1.6; stroke-dasharray: 3 3; }
.ls-chain {
  fill: none;
  stroke: var(--ls-acc);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.ls-trace {
  fill: none;
  stroke: var(--ls-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ls-trace.ls-negtrace { stroke: var(--ls-neg); stroke-width: 2.6; }
.ls-trace.ls-postrace { stroke: var(--ls-pos); stroke-width: 2.6; }
.ls-trace.ls-acctrace { stroke: var(--ls-acc); stroke-width: 2.6; }
.ls-trace.ls-soft { stroke: var(--ls-soft); }
.ls-trace.ls-thick { stroke-width: 3; }

.ls-text {
  fill: var(--ls-ink);
  font-family: Caveat, "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 25px;
  font-weight: 600;
}
.ls-text.ls-strong { font-weight: 700; font-size: 28px; }
.ls-text.ls-big { font-weight: 700; font-size: 36px; }
.ls-text.ls-small { font-size: 21px; }
.ls-text.ls-tiny { font-size: 18px; }
.ls-text.ls-neg { fill: var(--ls-neg); }
.ls-text.ls-pos { fill: var(--ls-pos); }
.ls-text.ls-acc { fill: var(--ls-acc); }
.ls-text.ls-muted { fill: var(--ls-soft); }
.ls-text.ls-cur { fill: var(--ls-cur); }
.ls-text.ls-mono { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 17px; }
.ls-text.ls-mono.ls-mono-s { font-size: 13px; }

/* ------------------------------------------------------------ the slide -- */

body.is-lecture :is(#lead-simulator-container, #sm-course).lec-host > .lec-gen-sketch {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lec-sketch-top {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.lec-sketch-heading { min-width: 0; }
/* The heading keeps one height on every drawing slide and at every step, so
   the drawing never moves: the section line is always one line, the title
   always has room for two lines (a one-line title sits at the top of it),
   and the step name beside it always has room for two lines. */
.lec-sketch-heading .lec-kicker {
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lec-gen .lec-gen-head.lec-sketch-title {
  font-size: 2.05rem;
  letter-spacing: -0.026em;
  line-height: 1.1;
  min-height: 2.2em;   /* two lines at line-height 1.1 */
}
.lec-sketch-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
  align-items: center;
  gap: 1rem 2rem;
}
.lec-sketch-body.is-full { grid-template-columns: minmax(0, 1fr); }
.lec-sketch-fig {
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lec-sketch-fig { cursor: pointer; }   /* a click on the drawing is Next */
.lec-sketch-fig .ls-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.lec-sketch-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.lec-sketch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border-color) !important;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary) !important;
  font-size: 0.74rem !important;
  font-weight: 650;
}
/* Pause and Replay keep their places while a drawing plays, pauses and
   finishes, so the step buttons beside them never slide sideways: a button
   that is not needed right now is invisible but still holds its room, and
   Pause is as wide as Play. With animation off neither ever shows, so they
   take no room at all (.is-still). */
.lec-sketch-btn[hidden] { display: inline-flex; visibility: hidden; }
.lec-sketch-bar.is-still .lec-sketch-btn[hidden] { display: none; }
.lec-sketch-pause { justify-content: center; min-width: 6.5em; }
.lec-sketch-btn:hover { background: var(--surface-2); color: var(--text-color) !important; }
.lec-sketch-btn:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
.lec-sketch-btn i { font-size: 0.7rem; }

/* steps: a drawing that shows several things in turn can go back to one.
   The step buttons lead the drawing's controls beside the heading, and the
   step's name sits under them, so the drawing keeps its height. */
.lec-sketch-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  max-width: 46%;
}
.lec-sketch-steps {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.35rem;
}
.lec-sketch-step-dots { display: flex; gap: 0.25rem; }
.lec-sketch-step-arrow,
.lec-sketch-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--border-color) !important;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary) !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  line-height: 1;
}
.lec-sketch-step-arrow { width: 1.5rem; border-color: transparent !important; }
.lec-sketch-step-arrow i { font-size: 0.72rem; }
.lec-sketch-step-arrow:hover:not(:disabled),
.lec-sketch-step-dot:hover { background: var(--surface-2); color: var(--text-color) !important; }
.lec-sketch-step-arrow:disabled { opacity: 0.3; cursor: default; }
.lec-sketch-step-arrow:focus-visible,
.lec-sketch-step-dot:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
.lec-sketch-step-dot.is-past { color: var(--text-color) !important; border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)) !important; }
.lec-sketch-step-dot.is-on {
  background: var(--accent-color);
  border-color: var(--accent-color) !important;
  color: var(--surface-1) !important;   /* white on plum; dark on the light accent of dark slides */
}
.lec-sketch-step-text {
  /* as wide as the buttons above it, never wider: the heading keeps its room */
  contain: inline-size;
  align-self: stretch;
  max-width: 100%;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    /* at most two lines: the drawing keeps its height */
  line-clamp: 2;
  overflow: hidden;
  text-align: right;
  font-size: 0.92rem;
  line-height: 1.25;
  min-height: 2.5em;        /* and always two lines' room, so a short step name
                               doesn't let the drawing jump up */
}
/* the filled button already shows where you are; the count is for screen readers */
.lec-sketch-step-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lec-sketch-step-label { color: var(--text-color); font-weight: 650; }
@media (pointer: coarse) {
  .lec-sketch-step-arrow, .lec-sketch-step-dot { width: 44px; height: 44px; }
}
@media (max-width: 699px) {
  .lec-sketch-top:has(.lec-sketch-side) { flex-wrap: wrap; }
  .lec-sketch-side { max-width: none; width: 100%; align-items: flex-start; }
  .lec-sketch-step-text { contain: none; text-align: left; }
}

/* key phrases: a few words each, ruled like notes in a margin */
.lec-sketch-keys {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lec-sketch-keys li {
  position: relative;
  padding: 0 0 0 1.25rem;
  color: var(--text-color);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.lec-sketch-keys li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.18rem;
  border-radius: 2px;
  background: var(--accent-color);
  transform: rotate(-6deg);
}

@media (max-width: 900px) {
  .lec-sketch-body { grid-template-columns: 1fr; align-items: start; align-content: start; }
  .lec-sketch-fig { height: auto; }
  .lec-sketch-fig .ls-svg { height: auto; max-height: none; }
}
@media (max-width: 699px) {
  .lec-gen .lec-gen-head.lec-sketch-title { font-size: 1.5rem; }
  .lec-sketch-keys li { font-size: 1rem; }
}

/* Dark slides: the flat tints are stronger, so the colors keep apart on a dark surface. */
body.dark .ls-negfill { fill: color-mix(in srgb, var(--ls-neg) 30%, transparent); }
body.dark .ls-posfill { fill: color-mix(in srgb, var(--ls-pos) 28%, transparent); }
body.dark .ls-accfill { fill: color-mix(in srgb, var(--ls-acc) 30%, transparent); }
body.dark .ls-curfill { fill: color-mix(in srgb, var(--ls-cur) 30%, transparent); }
body.dark .ls-softfill { fill: color-mix(in srgb, var(--ls-soft) 26%, transparent); }
body.dark .ls-cellfill { fill: color-mix(in srgb, var(--ls-acc) 22%, transparent); }
body.dark .ls-bone { fill: color-mix(in srgb, var(--ls-soft) 24%, transparent); }

/* ------------------------------------------------- drawings in a course --
   (course-sketches.js) The lecture's drawings inside a lesson: the drawing's
   title, the drawing on paper, then Play and one button per step. */
.cs-fig {
  margin: 1.5rem 0;
  padding: 0.9rem 1rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}
.cs-fig .cs-title {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-color);
}
.cs-art { margin: 0 auto; max-width: 820px; }
.cs-art .ls-svg { overflow: hidden; }
.cs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin-top: 0.45rem;
}
.cs-btn, .cs-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
}
.cs-btn i { font-size: 0.65rem; }
.cs-btn:hover, .cs-step:hover { color: var(--text-color); border-color: var(--accent-color); }
.cs-btn:focus-visible, .cs-step:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
.cs-steps { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cs-step-n {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-color);
  font-size: 0.72rem;
  font-weight: 700;
}
.cs-step.is-on { border-color: var(--accent-color); color: var(--text-color); }
.cs-step.is-on .cs-step-n { background: var(--accent-color); color: #fff; }
.cs-fig figcaption {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* On a phone the drawing keeps a readable size and scrolls sideways. */
@media (max-width: 640px) {
  .cs-fig { padding: 0.75rem 0.7rem; }
  .cs-art { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cs-art .ls-svg { min-width: 560px; }
  .cs-step-label { display: none; }   /* numbers only; each button names its part to a screen reader */
  .cs-step { padding: 0.25rem 0.45rem; }
}
@media print { .cs-bar { display: none; } }

/* ------------------------------------------- Seizure Management sketches --
   (seizure-lecture-sketches.js) green marks a treatment acting, red marks
   harm; bound drug is drawn gray and free drug in the warm marker. */
.ls-ink.ls-cur { stroke: var(--ls-cur); }
.ls-curfill { fill: color-mix(in srgb, var(--ls-cur) 16%, transparent); }
.ls-trace.ls-curtrace { stroke: var(--ls-cur); stroke-width: 2.6; }
.ls-freedot { fill: var(--ls-pos); stroke: var(--ls-paper); stroke-width: 2; }
.ls-bounddot { fill: var(--ls-soft); stroke: var(--ls-paper); stroke-width: 1.5; }
.ls-enzyme { fill: var(--ls-paper); stroke: var(--ls-ink); stroke-width: 2.2; stroke-linejoin: round; }