/* Page spacing.

   Measured against Wikipedia, MDN, LITFL, Radiopaedia, the ILAE site,
   Osmosis and TeachMeAnatomy: on a phone they keep reading text 12 to 20 px
   from the screen edge and almost never put a card inside a card inside a
   card. Several pages here stacked three framed boxes, so text started 50 to
   80 px in and lines held about 35 characters.

   The rules below hold every page to one scheme on phones:
     - page text sits 16 px from the edge;
     - a card adds one 12 px inset (13 px with its border), so text inside a
       card starts about 29 px in;
     - a topic panel that only frames other cards runs edge to edge, so it
       adds no inset of its own.
   On tablets the outer gutter is 24 px. On wide screens, running prose on
   Seizure Management stops near 80 characters a line.

   This file is loaded last on each page and changes spacing only. */

/* ---------- Phones ---------- */
@media (max-width: 600px) {

  /* Seizure Management: the open topic is a full-width band; its cards sit
     16 px in, level with the task buttons above. */
  #seizure-management .section-detail {
    margin-inline: -1rem;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #seizure-management .section-detail > .info-box { padding: 1rem; }
  #seizure-management :is(.status-protocol-intro, .status-step-card, .considerations-box,
    .guideline-card, .pregnancy-card, .info-card, .asm-reference-tools, .dre-atlas) {
    padding: 0.75rem;
  }
  #seizure-management #status-epilepticus .status-step-card { padding: 0.75rem; }
  #seizure-management .status-table td ul.no-bullets { padding-left: 0; }
  #seizure-management .status-table td ul.no-bullets ul { padding-left: 1rem; }

  /* ILAE Classification: one 16 px gutter, then single-level cards. */
  main.page-ilae_classification { padding-left: 1rem; padding-right: 1rem; }
  #ilae-classification.container { padding-left: 0; padding-right: 0; }
  #ilae-classification .ilae-page-summary { max-width: none; margin-left: 0; margin-right: 0; padding: 0.75rem; }
  #ilae-classification :is(.ilae-tree, .ilae-seizure-orientation, .step-panel, .subtype-card,
    .at-a-glance-table) {
    padding: 0.75rem;
  }
  /* !important: ilae-core.css sets these with !important. */
  #ilae-classification .clinical-examples-section { padding: 1rem 0.75rem !important; }
  #ilae-classification .example-content { padding: 0.75rem !important; }
  #ilae-classification :is(.subtype-card, .ilae-seizure-orientation) ul { padding-left: 1.1rem; }

  /* EEG Fundamentals: the lesson card sits 8 px from the screen edge and its
     text 12 px inside it, like every other card; course cards one inset deep. */
  body.has-fundamentals-reader .page-eeg_lead_simulator { --lesson-gutter: 0.75rem; }
  .fr-course-overview { padding: 0.75rem; }
  .fr-course-overview .course-test { padding: 0.75rem; }
  .fr-course-overview ul { padding-left: 1.1rem; }

  /* ACNS terminology: cards and tools one inset deep. */
  #acns-container :is(#acns-criteria, #acns-name-builder, #acns-report-builder, #acns-strip-drill) { padding: 0.75rem; }
  #acns-container .module-card .module-content { padding: 0.75rem; }
  #acns-container :is(.acnsb-result, .acnsr-output) { padding: 0.75rem; }

  /* Rotation guide, question bank and resources: single cards. */
  #epilepsy-rotation .info-box { padding: 0.75rem; }
  .page-container .question-card { padding: 0.75rem; }
  .resource-container .resource-card { padding: 0.75rem; }

  /* Board Review notes and questions. */
  #board-review-container :is(.br-q, .br-note) { padding: 0.75rem; }

  /* High-yield notes panel shown at the foot of several pages. */
  .high-yield-panel { padding: 0.75rem; }
  .high-yield-panel .hy-item a { padding: 0.6rem 0.7rem; }
}

/* ---------- Natus and Persyst steps, phones and tablets ----------
   The step number used to hold its own column, pushing every line of the
   step 48 to 56 px to the right. It now sits beside the step heading and
   the text below uses the card's full width. */
@media (max-width: 1024px) {
  .natus-step {
    display: block;
    position: relative;
    padding: 1rem;
  }
  .natus-step-number {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }
  :is(.natus-step-content, .natus-step-text, .step1-text-container) > :is(h3, h4):first-child {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding-left: 42px;
  }
}
@media (max-width: 600px) {
  .natus-step { padding: 0.75rem; }
  .natus-step-number { top: 0.75rem; left: 0.75rem; width: 28px; height: 28px; font-size: 0.9rem; }
  :is(.natus-step-content, .natus-step-text, .step1-text-container) > :is(h3, h4):first-child {
    min-height: 28px;
    padding-left: 38px;
  }
}

/* ---------- Tablets ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  #ilae-classification.container { padding-left: 0.5rem; padding-right: 0.5rem; }
  #ilae-classification .ilae-page-summary { max-width: none; margin-left: 0; margin-right: 0; }
  #ilae-classification :is(.ilae-seizure-orientation, .step-panel) { padding: 1rem; }
  #ilae-classification .subtype-card { padding: 0.85rem 1rem; }
}

/* ---------- Wide screens ---------- */
/* Topic panels on Seizure Management span about 1,060 px; prose across that
   runs past 130 characters a line. Tables, grids and figures keep the full
   width; paragraphs stop near 80 characters. */
@media (min-width: 1025px) {
  #seizure-management .section-detail :is(.info-box > p:not([class]), .info-box > :is(.clinical-note, .reference-note),
    .status-protocol-intro p, .considerations-box > p, .guideline-card > p, .se-clock > figcaption) {
    max-width: 80ch;
  }
}