/* Clinical pages refinement layer (September 26, 2026).
 * Loaded last on epilepsy_rotation.html, seizure_management.html and
 * ilae_classification.html. It gives the three pages the same box system,
 * reading measure, labels and dark surfaces as EEG Fundamentals:
 *   Note     brand tint, 10 px corners (asides and key points)
 *   Caution  amber, 10 px corners
 *   Panel    neutral surface, 16 px corners (grouped content)
 *   Frame    page surface, 16 px corners, 1 px border, no shadow
 * Clinical meaning colours (risk levels, answer feedback) are unchanged.
 */

:is(#epilepsy-rotation, #seizure-management, #ilae-classification) {
  --cx-tint: color-mix(in srgb, var(--action-bg) 5%, var(--surface-1));
  --cx-tint-strong: color-mix(in srgb, var(--action-bg) 12%, var(--surface-1));
  --cx-tint-border: color-mix(in srgb, var(--action-bg) 18%, var(--border-color));
  --cx-measure: 40rem;
  --cx-violet: #6b3fa0;
  --cx-amber: #b45309;
  --cx-red: #b42318;
}
body.dark :is(#epilepsy-rotation, #seizure-management, #ilae-classification) {
  --cx-tint: color-mix(in srgb, var(--action-bg) 16%, var(--surface-1));
  --cx-tint-strong: color-mix(in srgb, var(--action-bg) 28%, var(--surface-1));
  --cx-tint-border: color-mix(in srgb, var(--action-bg) 42%, var(--border-color));
  --cx-violet: #c3a0f0;
  --cx-amber: #f0c274;
  --cx-red: #f59a8f;
}

/* ---- Shared: no hairline-plus-wide-shadow, readable lines, sentence-case labels */
:is(#epilepsy-rotation, #seizure-management, #ilae-classification) :is(
  .info-box, .section-detail, .custom-table, table, .workflow-tab, .reference-card-link, .ilae-task-choice,
  .ilae-class-card, .btn-compact, .btn-compact-outline, .tab-nav, .segmented-tab-button, img.responsive-image) {
  box-shadow: none;
}
:is(#epilepsy-rotation, #seizure-management, #ilae-classification) :is(p, li, dd, figcaption):not(table *, .week-glance *, .curriculum-months *, .dre-pathway *, .workflow-tab *, .ilae-task-choice *, .ilae-class-card *) {
  max-width: var(--cx-measure);
}
:is(#epilepsy-rotation, #seizure-management, #ilae-classification) :is(.management-eyebrow, .status-step-time, .asm-filter-label, .ilae-task-meta, .ilae-section-kicker, .filter-label) {
  text-transform: none;
  letter-spacing: .01em;
  font-size: .8125rem;
  font-weight: 700;
}
:is(#epilepsy-rotation, #seizure-management, #ilae-classification) :is(.reference-card-subtext, .examples-description, .examples-attribution) {
  opacity: 1;
  color: var(--text-secondary);
}
:is(#epilepsy-rotation, #seizure-management, #ilae-classification) :is(table, .custom-table) {
  width: 100%;
  max-width: 100%;
}
:is(#epilepsy-rotation, #seizure-management, #ilae-classification) .table-note {
  color: var(--text-secondary);
  font-size: .875rem;
}

/* Figures linked from Board Review. */
.clinical-figure {
  margin: 1.25rem 0;
  max-width: 52rem;
}
.clinical-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: #fff;
}
.clinical-figure a:focus-visible img { outline: 3px solid var(--accent-color); outline-offset: 3px; }
.clinical-figure figcaption { margin-top: .5rem; color: var(--text-secondary); font-size: .875rem; line-height: 1.5; }
.clinical-figure figcaption strong { color: var(--text-color); }

/* Seizure Management: medications by mechanism. Eight groups in an even grid
   that spans the column like the lookup above and the table below: four
   across when the column is wide, two on a tablet or phone, one when very
   narrow (sized to the figure's own width, not the window's). */
.asm-mechanism-map {
  container-type: inline-size;
  margin: 1.5rem 0 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
}
.asm-map-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0 auto 1rem;
  max-width: 46rem;
  text-align: center;
}
.asm-map-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--text-color); }
.asm-map-warning { font-size: 0.9rem; line-height: 1.45; color: var(--asm-warning, #9b2335); }
.asm-map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.asm-map-group {
  --moa: #6b6259;
  margin: 0;
  padding: 0.8rem 0.9rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--moa) 35%, var(--border-color));
  border-top: 4px solid var(--moa);
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--moa) 7%, var(--surface-1));
}
.asm-map-name {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--moa);
}
.asm-map-group ul { margin: 0; padding: 0; list-style: none; }
.asm-map-group li { margin: 0.15rem 0; font-size: 0.9rem; line-height: 1.4; color: var(--text-color); }
.asm-map-group li span { color: var(--text-secondary); }
.asm-map-group[data-moa="na"] { --moa: #a3243b; }
.asm-map-group[data-moa="slow-na"] { --moa: #b14a1f; }
.asm-map-group[data-moa="ca"] { --moa: #8a5a00; }
.asm-map-group[data-moa="gaba"] { --moa: #2c7347; }
.asm-map-group[data-moa="sv2a"] { --moa: #24527f; }
.asm-map-group[data-moa="ampa"] { --moa: #6a3d9a; }
.asm-map-group[data-moa="multi"] { --moa: #1c6f75; }
.asm-map-group[data-moa="disease"] { --moa: #675d54; }
body.dark .asm-mechanism-map { --asm-warning: #ff9aa9; }
body.dark .asm-map-group[data-moa="na"] { --moa: #ff8a9b; }
body.dark .asm-map-group[data-moa="slow-na"] { --moa: #ffa47c; }
body.dark .asm-map-group[data-moa="ca"] { --moa: #f2c15a; }
body.dark .asm-map-group[data-moa="gaba"] { --moa: #7fd69d; }
body.dark .asm-map-group[data-moa="sv2a"] { --moa: #8ec0f2; }
body.dark .asm-map-group[data-moa="ampa"] { --moa: #c9a6f5; }
body.dark .asm-map-group[data-moa="multi"] { --moa: #74d3d8; }
body.dark .asm-map-group[data-moa="disease"] { --moa: #d4c8bc; }
.asm-map-note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}
@container (max-width: 760px) {
  .asm-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 290px) {
  .asm-map-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .asm-mechanism-map { padding: 1rem 0.75rem; }
  .asm-map-grid { gap: 0.6rem; }
  .asm-map-group { padding: 0.7rem 0.7rem 0.75rem; }
  .asm-map-group li { font-size: 0.875rem; }
}


/* ======================================================================
 * Epilepsy Rotation
 * ====================================================================== */
/* Section titles sit on the page, not in a white band above the card; one
   title ("When to Communicate") was also pushed to the right edge. */
#epilepsy-rotation .tab-content > h2.section-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  margin: 2.25rem 0 .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.6rem);
  line-height: 1.25;
}
#epilepsy-rotation .tab-content > h2.section-header .section-heading-icon { color: var(--accent-color); font-size: 1.1rem; }
#epilepsy-rotation .info-box {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
}
#epilepsy-rotation .info-box > h3:first-child { margin-top: 0; }
#epilepsy-rotation .info-box h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; line-height: 1.3; }
#epilepsy-rotation .info-box p { margin: 0 0 .6rem; line-height: 1.6; }

/* Lists: quiet bullets instead of a blue stripe on every item. */
#epilepsy-rotation ul.clean-list { margin: .25rem 0 .75rem; padding: 0; list-style: none; }
#epilepsy-rotation ul.clean-list > li {
  position: relative;
  margin: 0;
  padding: .3rem 0 .3rem 1.1rem;
  border: 0;
  line-height: 1.55;
}
#epilepsy-rotation ul.clean-list > li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .95em;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--accent-color);
}
#epilepsy-rotation td ul.clean-list > li { padding-top: .15rem; padding-bottom: .15rem; }

/* Section jump chips and search from rotation-guide.js: readable size. */
#epilepsy-rotation .rg-chip { font-size: .8125rem; font-weight: 600; }

/* Team list: names in columns rather than one long single column. */
#epilepsy-rotation .accordion-container details > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .25rem 1.5rem;
  margin: .5rem 0 1rem;
  padding: 0;
  list-style: none;
}
#epilepsy-rotation .accordion-container details > ul > li { margin: 0; padding: .3rem 0; border-bottom: 1px solid var(--border-color); }
#epilepsy-rotation .accordion-container summary { cursor: pointer; padding: .35rem 0; color: var(--text-color); }
#epilepsy-rotation .accordion-container details + details { margin-top: .5rem; }
#epilepsy-rotation .contact-table td:first-child { width: 45%; font-weight: 600; }

/* Lecture curriculum: twelve months in a grid, all visible. */
#epilepsy-rotation .curriculum-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#epilepsy-rotation .curriculum-months li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .6rem;
  align-items: start;
  padding: .7rem .8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  max-width: none;
}
#epilepsy-rotation .month-name { color: var(--accent-color); font-weight: 700; }
#epilepsy-rotation .month-topics { font-size: .9375rem; line-height: 1.45; }

/* The week at a glance. */
#epilepsy-rotation .week-glance { margin: 0 0 1.5rem; }
#epilepsy-rotation .week-glance figcaption { margin: 0 0 .75rem; color: var(--text-secondary); font-size: .9375rem; line-height: 1.5; max-width: none; }
#epilepsy-rotation .week-glance figcaption strong { display: block; color: var(--text-color); font-size: 1.05rem; margin-bottom: .15rem; }
#epilepsy-rotation .week-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
#epilepsy-rotation .week-day { padding: .6rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px); background: var(--surface-2); }
#epilepsy-rotation .week-day h4 { margin: 0 0 .5rem; font-size: .9375rem; color: var(--text-color); }
#epilepsy-rotation .week-day ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
#epilepsy-rotation .week-day li {
  display: grid;
  gap: .1rem;
  max-width: none;
  padding: .45rem .55rem;
  border: 1px solid var(--cx-tint-border);
  border-radius: 8px;
  background: var(--surface-1);
  font-size: .875rem;
  line-height: 1.35;
}
#epilepsy-rotation .week-day li.is-key { border-color: var(--action-bg); background: var(--cx-tint-strong); }
#epilepsy-rotation .week-day li.is-empty { border-style: dashed; background: transparent; color: var(--text-secondary); }
#epilepsy-rotation .week-day time { color: var(--accent-color); font-weight: 700; font-size: .8125rem; }
#epilepsy-rotation .week-day small { color: var(--text-secondary); font-size: .8125rem; }
@media (max-width: 760px) {
  #epilepsy-rotation .week-grid { grid-template-columns: 1fr; }
  #epilepsy-rotation .info-box { padding: 1rem; }
}

/* ======================================================================
 * Seizure Management
 * ====================================================================== */
/* Title centered like the other clinical pages. */
#seizure-management .management-intro { text-align: center; margin-inline: auto; max-width: 48rem; }
#seizure-management .management-intro p { margin-inline: auto; }
#seizure-management .management-intro .page-title { text-align: center; }
#seizure-management .management-eyebrow { color: var(--accent-color); }

/* The topic card is the frame; the box inside it is not another card. */
#seizure-management .section-detail {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
}
#seizure-management .section-detail > .info-box {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}
/* Callouts that used a thick left stripe become quiet notes. */
#seizure-management :is(.status-protocol-intro, .considerations-box, .guideline-card) {
  border: 1px solid var(--cx-tint-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--cx-tint);
}
/* Phase cards: one border; the phase colour moves to a dot that matches the clock. */
#seizure-management #status-epilepticus .status-step-card,
#seizure-management #status-epilepticus .status-step-card:is(.urgent, .critical) {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}
#seizure-management .status-step-time { display: flex; align-items: center; gap: .4rem; color: var(--text-secondary); }
#seizure-management .status-step-time::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--se-dot, var(--text-secondary)); }
#seizure-management .status-protocol-grid .status-step-card:nth-child(1) { --se-dot: #8a7f98; }
#seizure-management .status-protocol-grid .status-step-card:nth-child(2) { --se-dot: var(--action-bg); }
#seizure-management .status-protocol-grid .status-step-card:nth-child(3) { --se-dot: var(--cx-violet); }
#seizure-management .status-protocol-grid .status-step-card:nth-child(4) { --se-dot: var(--cx-red); }

/* Steps inside table cells read as a list. */
#seizure-management .status-table ul.no-bullets { margin: 0; padding-left: 1.1rem; list-style: disc; }
#seizure-management .status-table ul.no-bullets li { margin: .15rem 0; }
#seizure-management .status-table ul.no-bullets li::marker { color: var(--accent-color); }

/* Treatment clock. */
.se-clock { margin: 1.25rem 0; }
.se-clock svg { display: block; width: 100%; height: auto; max-width: 900px; }
.se-clock .se-phase rect { stroke: var(--surface-1); stroke-width: 2; }
.se-clock .se-phase text { font: 700 14px system-ui, sans-serif; text-anchor: middle; fill: #fff; }
.se-clock .se-phase-stabilize rect { fill: #8a7f98; }
.se-clock .se-phase-benzo rect { fill: var(--action-bg); }
.se-clock .se-phase-asm rect { fill: #6b3fa0; }
.se-clock .se-phase-refractory rect { fill: #b42318; }
.se-clock .se-ticks line { stroke: var(--text-secondary); stroke-width: 1.5; }
.se-clock .se-ticks text { font: 600 13px system-ui, sans-serif; text-anchor: middle; fill: var(--text-secondary); }
.se-clock .se-marker line { stroke: var(--text-color); stroke-width: 2; stroke-dasharray: 4 3; }
.se-clock .se-marker text { font: 700 13px system-ui, sans-serif; text-anchor: middle; fill: var(--text-color); }
.se-clock .se-note { font: 500 12px system-ui, sans-serif; text-anchor: end; fill: var(--text-secondary); }
.se-clock figcaption { margin-top: .4rem; color: var(--text-secondary); font-size: .9375rem; line-height: 1.5; }

/* Drug-resistant epilepsy pathway. */
.dre-pathway { margin: 0 0 1.5rem; }
.dre-pathway figcaption { margin-bottom: .75rem; color: var(--text-secondary); line-height: 1.5; }
.dre-pathway figcaption strong { display: block; color: var(--text-color); font-size: 1.05rem; }
.dre-pathway ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.dre-pathway li {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  max-width: none;
  padding: .85rem .9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
}
.dre-pathway li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -.62rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color);
  font-weight: 700;
}
.dre-pathway .dre-step {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--action-bg);
  color: var(--action-ink);
  font-size: .8125rem;
  font-weight: 700;
}
.dre-pathway li:last-child .dre-step { background: var(--cx-violet); color: #fff; }
.dre-pathway small { color: var(--text-secondary); font-size: .875rem; line-height: 1.45; }
@media (max-width: 760px) {
  .dre-pathway ol { grid-template-columns: 1fr; }
  .dre-pathway li:not(:last-child)::after { content: "↓"; right: auto; left: 1.4rem; top: auto; bottom: -.9rem; transform: none; }
}

/* Dark theme: legacy near-black cards on the pregnancy topic and elsewhere. */
body.dark #seizure-management :is(.guideline-card, .pregnancy-card, .info-card, .considerations-box, .status-step-card, .reference-card-link, .asm-reference-tools) {
  background: var(--surface-2);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark #seizure-management :is(.guideline-card, .pregnancy-card, .info-card) :is(h3, h4, p, li, strong) { color: var(--text-color); }

/* ======================================================================
 * ILAE Classification
 * ====================================================================== */
#ilae-classification .ilae-task-meta,
#ilae-classification .ilae-section-kicker { color: var(--accent-color); }
#ilae-classification h2.section-header {
  margin: 2rem 0 .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
#ilae-classification .syndrome-item { border-left-width: 1px; }
#ilae-classification .syndrome-item[aria-current="true"],
#ilae-classification .syndrome-item.active { box-shadow: inset 3px 0 0 var(--action-bg); }

/* Classification tree (HTML, so it reflows on phones). */
.ilae-tree { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md, 16px); background: var(--surface-1); }
.ilae-tree .ilae-tree-root {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: .5rem 1.25rem;
  border-radius: 10px;
  background: var(--text-color);
  color: var(--surface-1);
  font-weight: 700;
  text-align: center;
}
.ilae-tree .ilae-tree-classes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
}
/* Connectors: a stem from the root, a rail across, a drop to each class. */
.ilae-tree .ilae-tree-classes::before {
  content: "";
  position: absolute;
  top: .75rem;
  left: 12.5%;
  right: 12.5%;
  border-top: 1.5px solid var(--text-secondary);
}
.ilae-tree .ilae-tree-classes::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: .75rem;
  border-left: 1.5px solid var(--text-secondary);
}
.ilae-tree .ilae-tree-class { position: relative; max-width: none; }
.ilae-tree .ilae-tree-class::before {
  content: "";
  position: absolute;
  top: -.75rem;
  left: 50%;
  height: .75rem;
  border-left: 1.5px solid var(--text-secondary);
}
.ilae-tree .ilae-tree-class h3 {
  margin: 0 0 .5rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  background: var(--tree-color);
  color: #fff;
  font-size: 1rem;
  text-align: center;
}
.ilae-tree .ilae-tree-focal { --tree-color: var(--action-bg); }
.ilae-tree .ilae-tree-generalized { --tree-color: #6b3fa0; }
.ilae-tree .ilae-tree-unknown { --tree-color: #9a5b0e; }
.ilae-tree .ilae-tree-unclassified { --tree-color: #6b6478; }
.ilae-tree .ilae-tree-class ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ilae-tree .ilae-tree-class ul li {
  max-width: none;
  padding: .45rem .6rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: .875rem;
  line-height: 1.35;
  text-align: center;
}
.ilae-tree .ilae-tree-foot { margin: 1rem auto 0; color: var(--text-secondary); font-size: .9375rem; text-align: center; }
.ilae-tree figcaption { margin-top: .75rem; color: var(--text-secondary); font-size: .9375rem; line-height: 1.55; }
.ilae-tree figcaption strong { color: var(--text-color); }
@media (max-width: 760px) {
  .ilae-tree { padding: 1rem; }
  .ilae-tree .ilae-tree-classes { grid-template-columns: 1fr 1fr; }
  .ilae-tree .ilae-tree-classes::before { left: 25%; right: 25%; }
}
@media (max-width: 480px) {
  .ilae-tree .ilae-tree-classes { grid-template-columns: 1fr; padding-top: 1rem; }
  .ilae-tree .ilae-tree-classes::before, .ilae-tree .ilae-tree-classes::after, .ilae-tree .ilae-tree-class::before { display: none; }
}

.syndromes-age-figure { margin: 1.5rem auto 0; }

/* Rotation: section chips wrap instead of running off the right edge, and
   resource links use the brand surfaces. */
@media (min-width: 761px) {
  #epilepsy-rotation .rg-chips { flex-wrap: wrap; overflow-x: visible; }
}
#epilepsy-rotation .milestone-links .table-link {
  border: 1px solid var(--cx-tint-border);
  background: var(--cx-tint);
  color: var(--accent-color);
  font-weight: 600;
}
#epilepsy-rotation .milestone-links .table-link:hover { background: var(--cx-tint-strong); }
body.dark #epilepsy-rotation .milestone-links .table-link { border-color: var(--cx-tint-border); background: var(--cx-tint); color: var(--accent-color); }

/* Inline citation links reused the block ".reference" footer style, whose
   top border and padding drew a stray line through the text above. */
#seizure-management a.reference {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  color: var(--accent-color);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
  text-underline-offset: .18em;
}

/* Topic introductions are opening paragraphs, not boxes. */
#seizure-management p.intro-text {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Selected task and class cards: brand border and tint, no side stripe. */
#ilae-classification .ilae-task-choice.active,
#ilae-classification #seizure-types .step-tabs > .ilae-class-card.is-active,
body.dark #ilae-classification #seizure-types .step-tabs > .ilae-class-card.is-active {
  border-color: var(--action-bg);
  background: var(--cx-tint);
  box-shadow: inset 0 0 0 1px var(--action-bg);
}

/* Treatment clock on phones: the phase cards carry the detail; keep t1/t2. */
.se-clock .se-clock-compact { display: none; margin: .25rem 0 0; }
@media (max-width: 640px) {
  .se-clock svg { display: none; }
  .se-clock .se-clock-compact { display: block; padding: .75rem .9rem; border: 1px solid var(--cx-tint-border); border-radius: var(--radius-sm, 10px); background: var(--cx-tint); max-width: none; }
}

/* Small details from the design check. */
#epilepsy-rotation .week-day h3 { margin: 0 0 .5rem; font-size: .9375rem; color: var(--text-color); }
#seizure-management .workflow-tab strong { line-height: 1.3; }
#seizure-management .workflow-tab small { font-size: .8125rem; }
#ilae-classification .step-count { font-size: .8125rem; }

/* Example notes were faded with opacity (0.8 and 0.5 with !important), which
   dropped them below 4.5:1; use the secondary text colour instead. */
#ilae-classification .clinical-examples-section :is(.examples-description, .examples-attribution) {
  opacity: 1 !important;
  color: var(--text-secondary) !important;
}
/* Pregnancy risk labels: readable size. */
#seizure-management .badge { font-size: .75rem; }

/* Women's health topic (the pregnancy topic, expanded): a contents strip,
   one ruled part per theme, and plain lists for the recommendations. */
#seizure-management .wh-scope { margin: -.25rem 0 1rem; font-size: .9375rem; line-height: 1.55; color: var(--text-secondary); }
#seizure-management .wh-contents { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; padding: .7rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px); background: var(--surface-2); }
#seizure-management .wh-contents a { display: inline-flex; align-items: center; min-height: 34px; padding: .25rem .75rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-1); color: var(--text-color); font-size: .8125rem; font-weight: 600; text-decoration: none; }
#seizure-management .wh-contents a:hover { border-color: var(--accent-color); color: var(--accent-color); }
#seizure-management .wh-contents a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
#seizure-management .wh-part { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); }
#seizure-management .wh-part > h3 { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.3; color: var(--text-color); }
#seizure-management .wh-part [id], #seizure-management .wh-part[id] { scroll-margin-top: 96px; }
#seizure-management .wh-h4 { margin: 1.25rem 0 .5rem; font-size: 1rem; color: var(--text-color); }
#seizure-management .wh-list { margin: .5rem 0 0; padding-left: 1.2rem; }
#seizure-management .wh-list li { margin: .5rem 0; line-height: 1.55; }
#seizure-management .wh-list li::marker { color: var(--accent-color); }
#seizure-management .wh-part .table-scroll { margin: .75rem 0; }
#seizure-management .wh-topic .reference-text { margin-top: 2rem; }
@media (max-width: 640px) {
  #seizure-management .wh-contents { flex-wrap: nowrap; overflow-x: auto; }
  #seizure-management .wh-contents a { flex: 0 0 auto; }
}

/* Seizure Management prose uses the full column, like its tables and
   figures, instead of the 40rem reading measure. */
#seizure-management { --cx-measure: none; }

/* Charts drawn in the page keep a readable scale on wide screens, centred
   in their frame. */
#seizure-management .fr-teach-figure .brf-panel > .brf-svg { max-width: 48rem; margin-inline: auto; }

/* Drug-resistant epilepsy: presurgical evaluation, SEEG and links into the atlas */
#seizure-management .dre-presurg { margin: 1.5rem 0 2rem; }
#seizure-management .dre-presurg [id] { scroll-margin-top: 96px; }
#seizure-management .dre-pathway strong a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-color); text-underline-offset: .18em; }
#seizure-management .dre-list { margin: .5rem 0 0; padding-left: 1.2rem; }
#seizure-management .dre-list li { margin: .5rem 0; line-height: 1.55; }
#seizure-management .dre-list li::marker { color: var(--accent-color); }
#seizure-management .dre-atlas { margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--cx-tint-border); border-radius: var(--radius-md, 16px); background: var(--cx-tint); }
#seizure-management .dre-atlas-title { margin: 0 0 .75rem; }
#seizure-management .dre-atlas-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem; }
#seizure-management .dre-atlas-card { display: grid; gap: .2rem; padding: .7rem .8rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px); background: var(--surface-1); color: var(--text-color); text-decoration: none; }
#seizure-management .dre-atlas-card strong { font-size: .9375rem; }
#seizure-management .dre-atlas-card span { font-size: .8125rem; line-height: 1.4; color: var(--text-secondary); }
#seizure-management .dre-atlas-card:hover { border-color: var(--accent-color); }
#seizure-management .dre-atlas-card:hover strong { color: var(--accent-color); }
#seizure-management .dre-atlas-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* ======================================================================
 * Epilepsy Rotation: intro, guide chooser and contents (October 2, 2026)
 * The page now opens like Seizure Management (an intro, then task cards
 * with an icon and a line on what each guide holds) and reads like Board
 * Review on wide screens (a contents list kept beside the guide, marking
 * the section in view). Narrower screens keep the search-and-chips card.
 * ====================================================================== */
#epilepsy-rotation .rotation-intro { max-width: 48rem; margin: 1.25rem auto 1.75rem; text-align: center; }
#epilepsy-rotation .rotation-intro .page-title { margin: 0 0 .55rem; text-align: center; }
#epilepsy-rotation .rotation-intro p { margin: 0 auto; color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.6; }

#epilepsy-rotation .rotation-chooser { margin: 0 0 1.75rem; }
#epilepsy-rotation .rotation-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}
#epilepsy-rotation .rotation-tab {
  appearance: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: .85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#epilepsy-rotation .rotation-tab:hover { border-color: var(--accent-color); background: var(--surface-2); }
#epilepsy-rotation .rotation-tab:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
#epilepsy-rotation .rotation-tab.active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 7%, var(--surface-1));
  box-shadow: inset 0 3px 0 var(--accent-color);
}
#epilepsy-rotation .rotation-tab-icon {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-1));
  color: var(--accent-color);
}
#epilepsy-rotation .rotation-tab-copy { display: grid; gap: .15rem; min-width: 0; }
#epilepsy-rotation .rotation-tab-copy strong { font-size: .95rem; line-height: 1.2; }
#epilepsy-rotation .rotation-tab-copy small { color: var(--text-secondary); font-size: .8rem; line-height: 1.3; }

/* The contents card: search, then a chip for each section. */
#epilepsy-rotation .rg-bar {
  position: static;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
}
#epilepsy-rotation .rg-title { margin: 0 0 .6rem; color: var(--text-color); font-size: .875rem; font-weight: 700; }
#epilepsy-rotation .rg-search { border-radius: 999px; font-size: .875rem; }
#epilepsy-rotation .rg-search:focus { outline: 3px solid var(--accent-color); outline-offset: 1px; }
#epilepsy-rotation .rg-chip { border-radius: 999px; }
#epilepsy-rotation .rg-chip.is-current {
  border-color: var(--cx-tint-border);
  background: var(--cx-tint-strong);
  color: var(--accent-color);
}
body.dark #epilepsy-rotation .rg-bar { background: var(--surface-1); border-color: var(--border-color); }
body.dark #epilepsy-rotation .rg-chip.is-current { border-color: var(--cx-tint-border); background: var(--cx-tint-strong); color: var(--accent-color); }

/* Wide screens: the contents list sits beside the guide and stays in view. */
@media (min-width: 1100px) {
  #epilepsy-rotation .tab-content.active {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  #epilepsy-rotation .tab-content.active > * { grid-column: 2; min-width: 0; }
  /* grid items keep both margins; the next title's margin is the gap */
  #epilepsy-rotation .tab-content.active > .info-box { margin-bottom: 0; }
  #epilepsy-rotation .tab-content.active > .rg-bar {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    margin: 0;
    padding: .9rem .75rem;
  }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-title { padding: 0 .35rem; }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-search-wrap { margin-bottom: .6rem; }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-chips {
    display: grid;
    gap: .1rem;
    overflow: visible;
    padding: 0;
  }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-chip {
    display: block;
    min-height: 0;
    padding: .45rem .6rem;
    border: 0;
    border-radius: var(--radius-sm, 10px);
    background: transparent;
    color: var(--text-secondary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
  }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-chip:hover { background: var(--surface-2); color: var(--text-color); }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-chip.is-current {
    background: var(--cx-tint);
    color: var(--accent-color);
    box-shadow: inset 3px 0 0 var(--accent-color);
  }
  #epilepsy-rotation .tab-content.active > .rg-bar .rg-chip[hidden] { display: none; }
  #epilepsy-rotation .tab-content.active > .rg-bar + h2.section-header,
  #epilepsy-rotation .tab-content.active > .quick-links-dropdown-container + h2.section-header { margin-top: 0; }
}

@media (max-width: 900px) {
  #epilepsy-rotation .rotation-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #epilepsy-rotation .rotation-intro p { font-size: 1rem; }
  #epilepsy-rotation .rotation-tab { min-height: 94px; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .75rem; }
  #epilepsy-rotation .rotation-tab-icon { flex-basis: auto; width: 34px; height: 34px; }
  #epilepsy-rotation .rg-bar { padding: .85rem; }
  /* The two knowledge lists read as one list on a phone. */
  #epilepsy-rotation .goals-grid { gap: 0; }
}

/* Checklist: the tick shows only on items that are done (the static-icon
   colour rule was also tinting the empty boxes). */
#epilepsy-rotation .checklist li .rg-check i { margin: 0; color: inherit; font-size: inherit; }