/* ==========================================================================
   SEIZURE MANAGEMENT COURSE: the reading layout
   ==========================================================================

   Seizure Management is a course that follows EEG Fundamentals: one lesson
   on screen at a time, Previous/Next, a contents rail and a quick check at
   the end of each lesson. The paging and contents come from the shared
   course reader (assets/js/components/fundamentals-reader.js, configured by
   window.NEUROLOGIC_COURSE in the page) and its stylesheet
   fundamentals-reader.css. This file styles the lessons themselves.

   Everything is scoped to #seizure-management so the shared clinical-page
   tokens (--cx-tint and friends in clinical-refine.css) apply, and so the
   older component rules keyed to lesson ids (#status-epilepticus,
   #anti-seizure-medications, #asm-withdrawal, #pregnancy-epilepsy) still
   style the parts this course reuses.
   ========================================================================== */

/* The page follows EEG Fundamentals (eeg-lead-simulator.css,
   fundamentals-refine.css and fundamentals-laptop.css): a centred title below
   the header, the contents rail and one lesson card centred as a pair, the
   pager across the top of the card, and a column of 58rem. */
#seizure-management.sm-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* the fixed header is taller than the body's top padding: start the title
     clear of it, where EEG Fundamentals starts its own */
  padding: 1.375rem 20px 2.5rem;
  --lesson-measure: 58rem;
  --lesson-gutter: 1.75rem;
}

#seizure-management .sm-page-title {
  margin: 0.4rem 0 1rem;
  text-align: center;   /* centered, like every other page title on the site */
  /* the same title as EEG Fundamentals (fundamentals-reader.css) */
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* An alias keeps an old deep link (#workflow-emergency, #print-status-protocol)
   inside the lesson that now holds that content. It takes no space. */
#seizure-management .sm-alias { display: block; height: 0; overflow: hidden; }

/* --- the lesson panel -------------------------------------------------- */

#sm-course {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: calc(var(--lesson-measure) + 2 * var(--lesson-gutter));
  margin: 0 auto;
  border: 0;
  border-radius: 16px;
  background: var(--card-bg, var(--surface-1));
  box-shadow: var(--shadow-sm);
  padding: 0;
  display: flow-root;
}
#sm-course > .tab-content { padding: 0.25rem var(--lesson-gutter) 1.5rem; }

@media (min-width: 1200px) {
  #sm-course-row { justify-content: center; }
  .fr-row > #sm-course { flex: 1 1 auto; min-width: 0; margin: 0; }
}
/* Short laptop windows: the narrower rail and tighter pager of EEG Fundamentals. */
@media (min-width: 1200px) and (max-height: 900px) {
  body.has-fundamentals-reader #sm-course-row { gap: 0.75rem; }
  body.has-fundamentals-reader #sm-course-row > .fr-index { padding: 0.5rem 0.48rem 0.55rem; flex-basis: 220px; }
  body.has-fundamentals-reader #sm-course .fr-pager { margin-block: 0.25rem 0.5rem; padding: 0.35rem 0.5rem; }
}

/* Stable first paint: until the reader runs, show only Welcome. */
body.fundamentals-reader-pending #sm-course .fundamentals-content > :nth-child(n+3) {
  display: none !important;
}

#sm-course .tab-content { animation: none; }

#sm-course .fundamentals-content {
  display: block;
  padding: 0;
  background: transparent;
}

/* Lesson titles are reading headings, not the collapsible controls the shared
   section stylesheets draw for .section-header. These resets hold in the
   course and in lecture mode; size and spacing are the course view's only,
   since lecture mode sets its own slide title (fundamentals-lecture.css). */
#seizure-management #sm-course .fundamentals-content > h2.section-header {
  box-sizing: border-box;
  display: block;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-color);
  cursor: default;
  font-weight: 700;
  text-align: left;
  text-wrap: balance;
  transition: none;
}
#seizure-management #sm-course .fundamentals-content > h2.section-header:hover {
  background: transparent;
  color: var(--text-color);
}
#seizure-management #sm-course .fundamentals-content > h2.section-header:is(:focus, :focus-visible) { outline: none !important; }
body:not(.is-lecture) #seizure-management #sm-course .fundamentals-content > h2.section-header {
  width: 100%;
  margin: 1.15rem 0 1.35rem;
  padding: 0;
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
}
@media (min-width: 1200px) and (max-height: 900px) {
  body:not(.is-lecture) #seizure-management #sm-course .fundamentals-content > h2.section-header { font-size: 1.6rem; }
  body #seizure-management .sm-lesson > .section-badge { margin-bottom: 0.6rem; }
}
body:not(.is-lecture) #seizure-management #sm-course .fundamentals-content > h2.section-header::after { content: none; display: none; }
body:not(.is-lecture) #seizure-management #sm-course .fundamentals-content > h2.section-header:focus-visible { color: var(--accent-color); }
body:not(.is-lecture) #seizure-management #sm-course .fundamentals-content > h2.section-header:focus-visible::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.85rem;
  width: 4px;
  border-radius: 4px;
  background: var(--accent-color);
}

/* --- lesson body ------------------------------------------------------- */

#seizure-management .sm-lesson {
  padding: 0 0 0.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Reading text only: figures keep the type sizes of the shared figure styles.
   The same metrics as EEG Fundamentals (fundamentals-refine.css): 18px with
   1.6 leading in a column of at most about 878px, roughly 94 characters a
   line; 17px on a phone. */
#seizure-management .sm-lesson :is(p, li):not(.brf *) {
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
body:not(.is-lecture) #seizure-management .sm-lesson > :is(p, ul, ol, .sm-note, .sm-eeg-link, .sm-keypoints),
body:not(.is-lecture) #seizure-management .sm-lesson > section > :is(p, ul, ol) {
  max-width: 54.875rem;
}
/* Callouts and quick checks are supporting text, one step down, as in Fundamentals. */
#seizure-management .sm-lesson :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) :is(p, li):not(.sm-callout-title) {
  font-size: 1rem;
  line-height: 1.6;
}
#seizure-management .sm-lesson table :is(p, li),
#seizure-management .sm-lesson :is(td, th) {
  font-size: 0.9375rem;
  line-height: 1.55;
}
#seizure-management .sm-lesson > p,
#seizure-management .sm-lesson > section > p { margin: 0 0 1rem; }

#seizure-management .sm-lesson h3 {
  margin: 1.9rem 0 0.6rem;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-color);
  text-align: left;
  text-wrap: balance;
}
/* Section subheadings carry the EEG-trace rule of EEG Fundamentals
   (fundamentals-dividers.css): the label, then a hairline ending in a spike. */
#seizure-management :is(.sm-lesson, .wh-part) > h3:not([class]) {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 2.1rem 0 0.75rem;
}
#seizure-management :is(.sm-lesson, .wh-part) > h3:not([class])::after {
  content: "";
  flex: 1 1 2rem;
  min-width: 1.5rem;
  height: 18px;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18' fill='none'%3E%3Cpath d='M0 9 H23 L26 9 L29 4 L32 14 L34 9 H46' stroke='%23a32b78' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--border-color), var(--border-color));
  background-size: 46px 18px, calc(100% - 50px) 1px;
  background-position: left center, right center;
}
body.dark #seizure-management :is(.sm-lesson, .wh-part) > h3:not([class])::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18' fill='none'%3E%3Cpath d='M0 9 H23 L26 9 L29 4 L32 14 L34 9 H46' stroke='%23f29ac9' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--border-color), var(--border-color));
}
#seizure-management .sm-lesson h4 {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-color);
}
#seizure-management .sm-lesson ul:not([class]),
#seizure-management .sm-lesson ol:not([class]),
#seizure-management .sm-list {
  margin: 0.4rem 0 1.1rem;
  padding-left: 1.3rem;
}
#seizure-management .sm-lesson ul:not([class]) li,
#seizure-management .sm-lesson ol:not([class]) li,
#seizure-management .sm-list li { margin: 0.45rem 0; }
#seizure-management .sm-lesson :is(ul:not([class]), .sm-list) li::marker { color: var(--accent-color); }

/* Badge: the lesson's kind, an outlined pill with a dot. The dot colours are
   shared with EEG Fundamentals, in fundamentals-reader.css. */
#seizure-management .sm-lesson > .section-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.28rem 0.7rem 0.28rem 0.6rem;
  border: 1px solid var(--cx-tint-border);
  border-radius: 999px;
  background: var(--cx-tint);
  color: var(--text-color);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: none;
}
#seizure-management .sm-lesson > .section-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--badge-dot);
}

/* The opening paragraph says why the lesson matters. */
#seizure-management .sm-lead {
  margin: 0 0 1.25rem;
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: var(--text-color);
}

/* Callouts: one quiet note style, three jobs. */
#seizure-management :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) {
  box-sizing: border-box;
  margin: 1.25rem 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2, var(--surface-1));
}
#seizure-management :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) > :last-child { margin-bottom: 0; }
#seizure-management :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) > .sm-callout-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-color);
}
#seizure-management .sm-callout-title i { color: var(--accent-color); }
#seizure-management :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) p { margin: 0 0 0.5rem; }
#seizure-management :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
#seizure-management :is(.sm-note, .sm-eeg-link, .sm-keypoints, .sm-evidence) li { margin: 0.35rem 0; }

#seizure-management .sm-note {
  border-color: var(--cx-tint-border);
  background: var(--cx-tint);
}
#seizure-management .sm-eeg-link {
  border-color: color-mix(in srgb, #0b6ab8 22%, var(--border-color));
  background: color-mix(in srgb, #0b6ab8 5%, var(--surface-1));
}
body.dark #seizure-management .sm-eeg-link {
  border-color: color-mix(in srgb, #5aa9f0 40%, var(--border-color));
  background: color-mix(in srgb, #5aa9f0 12%, var(--surface-1));
}
#seizure-management .sm-eeg-link .sm-callout-title i { color: #0b6ab8; }
body.dark #seizure-management .sm-eeg-link .sm-callout-title i { color: #8cc6f7; }
#seizure-management .sm-keypoints {
  border-color: var(--cx-tint-border);
  background: var(--surface-1);
}

/* Evidence: one line per study. */
#seizure-management .sm-evidence dl { margin: 0.3rem 0 0; }
#seizure-management .sm-evidence dt {
  margin: 0.7rem 0 0.1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-color);
}
#seizure-management .sm-evidence dt:first-child { margin-top: 0.2rem; }
#seizure-management .sm-evidence dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* Steps in a pathway: numbered cards that read top to bottom. */
#seizure-management .sm-steps {
  counter-reset: sm-step;
  list-style: none;
  margin: 1rem 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
#seizure-management .sm-steps > li {
  counter-increment: sm-step;
  position: relative;
  margin: 0;
  padding: 0.8rem 1rem 0.8rem 3.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}
#seizure-management .sm-steps > li::before {
  content: counter(sm-step);
  position: absolute;
  left: 0.9rem;
  top: 0.85rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--cx-tint-strong);
  color: var(--accent-color);
  font-size: 0.85rem;
  font-weight: 700;
}
#seizure-management .sm-steps > li > strong:first-child { display: block; margin-bottom: 0.15rem; }

/* Two columns of short facts on a wide screen. */
#seizure-management .sm-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
#seizure-management .sm-two-col > div {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}
#seizure-management .sm-two-col h4 { margin-top: 0; }
#seizure-management .sm-two-col ul { margin: 0.2rem 0 0; padding-left: 1.15rem; }
#seizure-management .sm-two-col li { margin: 0.3rem 0; font-size: 1rem; }

/* In-text citations ("Patsalos 2008") are many: they stay quiet in the
   secondary text colour with a faint dotted underline, and turn into the
   link colour on hover or focus. Links to other lessons and pages keep the
   accent colour, so the two read differently. */
#seizure-management .sm-lesson a.reference {
  color: var(--text-secondary);
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
#seizure-management .sm-lesson a.reference:is(:hover, :focus-visible) {
  color: var(--accent-color);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/* Sources at the foot of a lesson. */
#seizure-management .sm-sources {
  margin: 1.5rem 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}
#seizure-management .sm-sources strong { color: var(--text-color); }

/* --- welcome ----------------------------------------------------------- */

#seizure-management .sm-welcome-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
  margin: 0 0 1.1rem;
  color: var(--text-secondary);
  font-size: 0.9375rem !important;
}
#seizure-management .sm-welcome-meta strong { color: var(--text-color); }
#seizure-management .sm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}
#seizure-management :is(.fr-course-start, .fr-course-resume) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--action-bg);
  border-radius: var(--radius-sm, 10px);
  background: var(--action-bg);
  color: var(--action-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
#seizure-management .fr-course-resume {
  background: transparent;
  color: var(--accent-color);
}
#seizure-management .fr-course-resume[hidden] { display: none; }
#seizure-management :is(.fr-course-start, .fr-course-resume):focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
#seizure-management .sm-syllabus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: sm-topic;
}
#seizure-management .sm-syllabus li { margin: 0; counter-increment: sm-topic; }
#seizure-management .sm-syllabus a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  height: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}
#seizure-management .sm-syllabus a::before {
  content: counter(sm-topic);
  color: var(--accent-color);
  font-variant-numeric: tabular-nums;
}
#seizure-management .sm-syllabus a small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.875rem;
}
#seizure-management .sm-syllabus a:hover { border-color: var(--accent-color); }
#seizure-management .sm-syllabus a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* --- quick checks -------------------------------------------------------- */

#seizure-management .atlas-quiz {
  margin: 1.75rem 0 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}
#seizure-management .aq-tag {
  background: var(--cx-tint-strong);
  color: var(--accent-color);
}
#seizure-management .aq-explain { border-left-color: var(--cx-tint-border); }
#seizure-management .aq-chip {
  text-align: left;
  white-space: normal;
  line-height: 1.4;
}
#seizure-management .aq-chip:not(.is-correct, .is-chosen) {
  border-color: var(--border-color);
  background: var(--surface-1);
  color: var(--text-color);
}
#seizure-management .aq-chip:not(.is-correct, .is-chosen):hover:not(:disabled) {
  border-color: var(--cx-tint-border);
  background: var(--cx-tint);
}
body.dark #seizure-management .aq-chip:not(.is-correct, .is-chosen) { background: var(--surface-2); }

/* Touch screens: the medication search is a 44px target. */
@media (pointer: coarse) {
  #seizure-management #anti-seizure-medications .asm-search { min-height: 44px; box-sizing: border-box; }
}

/* --- completion and finish --------------------------------------------- */

#sm-course .fr-completion { margin-top: 0.75rem; }
#sm-course .fr-finish { margin-top: 2rem; }
#sm-course .fr-finish .high-yield-panel { margin-top: 1.25rem; }

/* --- reused components inside lessons -------------------------------------- */

/* Tables keep their own horizontal scroll inside the reading column. */
#seizure-management .sm-lesson .table-scroll { overflow-x: auto; margin: 0.9rem 0 1.1rem; }
#seizure-management .sm-lesson > .custom-table { margin: 0.9rem 0 1.1rem; }
/* The topic cards drew the old pages' frames; inside a lesson they are plain. */
#seizure-management .sm-lesson :is(.info-box) { border: 0; background: transparent; padding: 0; }
#seizure-management #status-epilepticus .status-protocol-grid { margin: 1rem 0 1.25rem; }
#seizure-management #status-epilepticus .status-step-card ul { padding-left: 1.1rem; }
#seizure-management #status-epilepticus .status-step-card li { font-size: 0.975rem; line-height: 1.55; }
#seizure-management .sm-lesson .dre-pathway { margin: 0.5rem 0 1.5rem; }
#seizure-management .sm-lesson .wh-part:first-of-type { margin-top: 0.5rem; padding-top: 0; border-top: 0; }

/* --- narrow screens ------------------------------------------------------- */

/* Below the wide layout the card has no padding of its own (the lesson
   carries the gutter), so Contents, Slides and the progress line keep the
   12px inset they have in EEG Fundamentals (fundamentals-videos.css). */
@media (max-width: 1199px) {
  #seizure-management #sm-course > .fr-index-toggle {
    box-sizing: border-box;
    width: calc(100% - 24px);
    margin: 0 12px 0.5rem;
  }
  #seizure-management #sm-course > .fr-mobile-progress { margin: 0 12px 0.5rem !important; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  body.has-fl:not(.has-fv) #seizure-management #sm-course > .fr-index-toggle {
    width: calc(100% - 7rem - 36px);
    margin-right: 0;
  }
  body.has-fl:not(.has-fv) #seizure-management #sm-course > .fl-entry-top { margin: 0 12px 0.5rem 12px; }
}

@media (max-width: 768px) {
  #seizure-management.sm-shell { padding: 1.5rem 8px 1.5rem; --lesson-gutter: 0.75rem; }
  #seizure-management .sm-page-title { margin-top: 0.2rem; font-size: 1.8rem; }
  body:not(.is-lecture) #seizure-management #sm-course .fundamentals-content > h2.section-header { margin: 1.05rem 0 1.15rem; }
  body #seizure-management .sm-lesson > .section-badge { margin-bottom: 0.85rem; }
  /* 17px on a phone keeps about 40 characters a line, as in EEG Fundamentals */
  #seizure-management .sm-lesson :is(p, li):not(.brf *) { font-size: 1.0625rem; }
  #seizure-management .sm-lead { font-size: 1.0625rem !important; }
  #seizure-management .sm-steps > li { padding-left: 2.8rem; }
  #seizure-management .sm-steps > li::before { left: 0.7rem; }
  /* Medication profiles as cards: the drug name heads its card, without a
     "Medication" label above it. */
  #anti-seizure-medications .custom-table[data-mobile-cards="true"] td[data-label="Medication"] {
    padding-top: 0.8rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
  }
  #anti-seizure-medications .custom-table[data-mobile-cards="true"] td[data-label="Medication"]::before { content: none; }
}
#anti-seizure-medications .asm-class-hint {
  margin: 0.2rem 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
#anti-seizure-medications .asm-class-hint[hidden] { display: none; }

@media print {
  #sm-course { border: 0; padding: 0; }
}

/* --- lecture mode (fundamentals-lecture.css draws the stage) ------------- */

body.is-lecture #sm-course.lec-host { border: 0 !important; }
/* Slides are wider than the course column: let callouts and lists use it. */
body.is-lecture #sm-course.lec-host .sm-lesson :is(p, li) { max-width: none; }
body.is-lecture #sm-course.lec-host .sm-lead { margin-top: 0.2rem; }
body.is-lecture #sm-course.lec-host .sm-lesson > :first-child:not(.lec-off) { margin-top: 0; }
body.is-lecture #sm-course.lec-host .sm-lesson { padding-bottom: 0; }
/* The older #seizure-management .section-header rules outrank the lecture
   title rule by id; restate its metrics (fundamentals-lecture.css). */
body.is-lecture #seizure-management #sm-course.lec-host .fundamentals-content > h2.section-header {
  max-width: none;
  margin: 0 0 1.1rem;
  padding: 1.45rem 0 0;
  font-size: 1.9rem;
  line-height: 1.12;
  letter-spacing: -0.026em;
}

/* Treatment clock: the 5-minute stabilization phase is drawn to scale, so its label is smaller. */
.se-clock .se-phase-stabilize text { font-size: 12.5px; }

/* A one-line key to a term the lesson goes on to use (Level A/B/C). */
#seizure-management .sm-lesson p.sm-legend {
  margin: 0 0 0.8rem;
  padding: 0.45rem 0.75rem;
  border-left: 3px solid var(--cx-tint-border, var(--border-color));
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Course-control instructions inside a caption (span.lec-skip) stay out of the
   lecture's speaker notes; whole paragraphs with .lec-skip are left out by
   fundamentals-lecture.js itself. */
body.is-lecture .lec-notes-body .lec-skip { display: none; }
/* On a phone the continuum figure is a list, so there is nothing to point at. */
@media (max-width: 620px) {
  #seizure-management .sm-pointer-hint { display: none; }
}

/* --- reading aids: one color code for the whole course --------------------
   The same meanings as the drawings: green is what to do, red is harm (what
   to avoid, a contraindication, a danger), blue is a number worth keeping, and
   a soft plum highlight marks the point most often examined. The words carry
   the meaning too; the color only helps the eye find them. */
#seizure-management {
  --sm-do: #1b7348;
  --sm-avoid: #b8322a;
  --sm-num: #1f5cb8;
  --sm-key: color-mix(in srgb, var(--accent-color) 15%, transparent);
}
body.dark #seizure-management {
  --sm-do: #74d6a4;
  --sm-avoid: #ff9b92;
  --sm-num: #92bdff;
  --sm-key: color-mix(in srgb, var(--accent-color) 30%, transparent);
}
#seizure-management .sm-do { color: var(--sm-do); font-weight: 650; }
#seizure-management .sm-avoid { color: var(--sm-avoid); font-weight: 650; }
#seizure-management .sm-num { color: var(--sm-num); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
#seizure-management mark.sm-key {
  padding: 0.05em 0.2em;
  border-radius: 4px;
  background: var(--sm-key);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* the key to the colors, in the Welcome lesson */
#seizure-management .sm-colorkey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.35rem 1.25rem;
  margin: 0.4rem 0 0.7rem;
  padding: 0;
  list-style: none;
}
#seizure-management .sm-colorkey li { margin: 0; font-size: 0.95rem; line-height: 1.45; }

/* Cards: a long list of parallel items (organ systems, syndromes, phases)
   becomes a grid the eye can scan, each card headed by its subject. */
#seizure-management .sm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
#seizure-management .sm-card {
  margin: 0;
  padding: 0.8rem 0.95rem 0.85rem;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--sm-card-edge, var(--cx-tint-border, var(--border-color)));
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}
#seizure-management .sm-card.is-harm { --sm-card-edge: var(--sm-avoid); }
#seizure-management .sm-card.is-do { --sm-card-edge: var(--sm-do); }
#seizure-management .sm-card.is-num { --sm-card-edge: var(--sm-num); }
#seizure-management .sm-card > h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  font-size: 1rem;
  line-height: 1.3;
}
#seizure-management .sm-card > h4 i { color: var(--accent-color); font-size: 0.9rem; }
#seizure-management .sm-card p, #seizure-management .sm-card li { font-size: 0.97rem; line-height: 1.55; }
#seizure-management .sm-card p { margin: 0 0 0.4rem; }
#seizure-management .sm-card ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
#seizure-management .sm-card li { margin: 0.25rem 0; }
#seizure-management .sm-card > :last-child { margin-bottom: 0; }
#seizure-management .sm-card .sm-card-src { font-size: 0.82rem; color: var(--text-secondary); }

/* Table columns that carry a meaning: a faint red wash under the harm, a
   faint green wash under the action; the text stays in the text color. */
#seizure-management td.sm-col-harm { background: color-mix(in srgb, var(--sm-avoid) 6%, transparent); }
#seizure-management td.sm-col-do { background: color-mix(in srgb, var(--sm-do) 7%, transparent); }
#seizure-management th.sm-col-harm { color: var(--sm-avoid); }
#seizure-management th.sm-col-do { color: var(--sm-do); }