/* ==========================================================================
   STEP FLOW  —  a click-through for content that is already a sequence
   ==========================================================================

   Some content states its own order and then ignores it. Reading the Background
   says "four questions, in this order" and draws them as an inert numbered
   strip; the ILAE framework is a three-level diagnostic path drawn as prose.
   This turns that stated order into navigation, showing one step at a time.

   Behaviour is in assets/js/components/step-flow.js. Markup contract:

     .step-flow           wrapper
       .step-tabs         [role=tablist] holding .step-tab buttons
       .step-panel        one per tab, paired by aria-controls
       .step-nav          .step-prev / .step-count / .step-next

   A section can restyle .step-tab for its own look — Fundamentals reuses its
   existing numbered strip — but nothing here depends on that.
   ========================================================================== */

.step-flow { margin: 0.9rem 0 1.2rem; min-width: 0; }

.step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

/* default chip; sections with their own strip override this */
.step-tabs > .step-tab {
  appearance: none;
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  background: #fff;
  color: #33424f;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.step-tabs > .step-tab:hover { background: #f2f7fc; border-color: #9db9d4; }
.step-tab:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }

.step-tabs > .step-tab.is-active {
  background: #0b6ab8;
  border-color: #0b6ab8;
  color: #fff;
}

/* an optional small number/level badge inside a chip */
.step-tab .step-n {
  display: inline-block;
  min-width: 1.35em;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: #eaf2fa;
  color: #0b6ab8;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.step-tabs > .step-tab.is-active .step-n { background: rgba(255, 255, 255, 0.24); color: #fff; }

.step-panel {
  border-top: 1px solid #dfe6ee;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
}

.step-panel > h4:first-child,
.step-panel > h3:first-child { margin-top: 0; }

.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid #dfe6ee;
}

.step-nav .var-arrow,
.step-nav .step-arrow {
  border: 1px solid #d7dee6;
  background: #fff;
  color: #45515e;
  border-radius: 6px;
  padding: 0.32rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.step-nav .var-arrow:hover,
.step-nav .step-arrow:hover { background: #eaf2fa; border-color: #0b6ab8; color: #0b6ab8; }

.step-count {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #5a6570;
}

body.dark .step-tabs > .step-tab { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .step-tabs > .step-tab:hover { background: #3a3a3c; border-color: #6b7783; }
body.dark .step-tabs > .step-tab.is-active { background: #2f8fe0; border-color: #2f8fe0; color: #10171e; }
body.dark .step-tab .step-n { background: #21313f; color: #66b5f2; }
body.dark .step-panel,
body.dark .step-nav { border-top-color: #3a3a3c; }
body.dark .step-nav .var-arrow,
body.dark .step-nav .step-arrow { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .step-nav .var-arrow:hover,
body.dark .step-nav .step-arrow:hover { background: #3a3a3c; border-color: #66b5f2; color: #66b5f2; }
body.dark .step-count { color: #c7c7cc; }

/* A step panel that lists sub-items rather than one block of prose. */
.step-panel .sztype-sub {
  margin: 1.1rem 0 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px dashed #dfe6ee;
  font-size: 0.92rem;
  color: #0b6ab8;
}

.step-panel .sztype-sub:first-of-type { border-top: 0; padding-top: 0; }

body.dark .step-panel .sztype-sub { border-top-color: #3a3a3c; color: #66b5f2; }