/* ==========================================================================
   FUNDAMENTALS READER: one section at a time, with a course index
   ==========================================================================

   Behaviour is in assets/js/components/fundamentals-reader.js. Everything here
   is generated markup except .fr-hidden, which is applied to the page's own
   headers and sections to page between them.

   The index is fixed rather than a flex item because #main-content is already
   a flex container shared with other page furniture; taking it out of flow
   means this file cannot change how the rest of that row behaves.
   ========================================================================== */

.fr-hidden { display: none !important; }

/* Stable first paint. The HTML opens on the first Basics lesson and carries
   this class before any script runs. Keep that one lesson visible while the
   course index is being built, and suppress the remaining legacy panel DOM so
   a slow device never paints the retired all-at-once layout. */
body.fundamentals-reader-pending #lead-simulator-container > .tab-content {
  display: none !important;
}

body.fundamentals-reader-pending #lead-simulator-container > #basics-tab {
  display: block !important;
}

body.fundamentals-reader-pending #basics-tab > .fundamentals-content > * {
  display: none !important;
}

body.fundamentals-reader-pending #basics-tab > .fundamentals-content > :first-child,
body.fundamentals-reader-pending #basics-tab > .fundamentals-content > :nth-child(2) {
  display: block !important;
}

/* --- index ------------------------------------------------------------ */

.fr-index {
  box-sizing: border-box;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: #fff;
  padding: 0.8rem 0.7rem 0.85rem;
}

.fr-index-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.fr-index-title {
  margin: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6e7b88;
}

.fr-index-hide,
.fr-index-desktop-toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid #cfdae6;
  border-radius: 7px;
  background: #fff;
  color: #45515e;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}

.fr-index-hide:hover,
.fr-index-desktop-toggle:hover { background: #eef5fb; border-color: #9db9d4; }

.fr-index-hide:focus-visible,
.fr-index-desktop-toggle:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }

.fr-progress {
  margin: 0 0 0.4rem !important;
  font-size: 0.76rem !important;
  color: #45515e;
}

.fr-bar {
  height: 4px;
  border-radius: 999px;
  background: #e7edf4;
  overflow: hidden;
  margin-bottom: 0.9rem;
}

.fr-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1f9d55;
  transition: width 0.3s ease;
}

.fr-group {
  margin-bottom: 0.72rem;
  padding-bottom: 0.62rem;
  border-bottom: 1px solid #edf1f5;
}
.fr-group:last-child { margin-bottom: 0; }
.fr-group:last-child { padding-bottom: 0; border-bottom: 0; }

.fr-group-title {
  margin: 0 0 0.3rem !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b97a4;
}

.fr-link {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #33424f;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  padding: 0.34rem 0.38rem;
  cursor: pointer;
}

.fr-link:hover { background: #f2f7fc; }
.fr-link:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 1px; }

.fr-link.is-current {
  background: #eaf3fb;
  color: #0b4f8a;
  font-weight: 650;
}

/* hollow → filled → check, so "opened" and "finished" stay distinguishable */
.fr-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 0.22rem;
  border: 1.5px solid #b9c6d4;
  border-radius: 50%;
  background: transparent;
}

.fr-link.is-visited .fr-dot { background: #b9c6d4; }

.fr-link.is-done .fr-dot {
  border-color: #1f9d55;
  background: #1f9d55;
  position: relative;
}

.fr-link.is-done .fr-dot::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.5px;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.fr-link.is-current .fr-dot { border-color: #0b6ab8; }

.fr-hot {
  display: block;
  width: 100%;
  appearance: none;
  border: 1px solid #dbe4ee;
  border-radius: 7px;
  background: #f7fafd;
  color: #0b4f8a;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  padding: 0.38rem 0.5rem;
  margin-bottom: 0.28rem;
  cursor: pointer;
}

.fr-hot:hover { background: #eaf3fb; border-color: #9db9d4; }
.fr-hot:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 1px; }

/* --- pager ------------------------------------------------------------ */

.fr-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.6rem 0 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #fff;
}

.fr-pager-bottom { margin: 1.4rem 0 0.5rem; }

.fr-pager button {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #fff;
  color: #24303c;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

.fr-pager button:hover:not(:disabled) { background: #eef5fb; border-color: #9db9d4; }
.fr-pager button:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }
.fr-pager button:disabled { opacity: 0.4; cursor: default; }

.fr-next {
  background: #0b6ab8 !important;
  border-color: #0b6ab8 !important;
  color: #fff !important;
}

.fr-next:hover:not(:disabled) { background: #0a5c9f !important; }

.fr-count {
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.78rem !important;
  color: #6e7b88;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-sequence-cue {
  margin: 1.15rem 0 0.45rem !important;
  color: #566474;
  font-size: 0.875rem !important;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
}

.fr-index-toggle {
  display: none;
  appearance: none;
  width: 100%;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #fff;
  color: #24303c;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

/* --- completion ------------------------------------------------------- */

.fr-completion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin: 1.25rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #f7fafd;
}

.fr-completion[hidden] { display: none; }

.fr-completion.is-complete {
  border-color: #a9d9bd;
  background: #f1faf5;
}

.fr-completion-text {
  margin: 0 !important;
  color: #45515e;
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.fr-focus-target:focus-visible {
  outline: 3px solid rgba(11, 106, 184, 0.55);
  outline-offset: 5px;
  border-radius: 3px;
}

/* --- wide: index becomes a fixed rail beside the content -------------- */

@media (min-width: 1200px) {
  .fr-row {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
  }

  .fr-index {
    position: sticky;
    top: 92px;
    flex: 0 0 232px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
  }

  .fr-index-hide { display: inline-flex; }

  .fr-index-desktop-toggle {
    align-self: flex-start;
    margin: 0.6rem 0 0.2rem 0.7rem;
  }

  .fr-row.is-index-hidden .fr-index { display: none; }
  .fr-row.is-index-hidden .fr-index-desktop-toggle { display: inline-flex; }

  /* min-width:0 or the module's wide figures refuse to let the row shrink. */
  body.has-fundamentals-reader #lead-simulator-container {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.fr-align-left { text-align: left !important; }

/* --- narrow: index collapses behind a Contents button ----------------- */

@media (max-width: 1199px) {
  .fr-index-toggle { display: block; }

  .fr-index {
    display: none;
    margin: 0 0 0.6rem;
  }

  .fr-index.is-open { display: block; }
}

@media (max-width: 600px) {
  .fr-pager { flex-wrap: wrap; }
  .fr-count { order: 3; flex: 1 0 100%; text-align: center; white-space: normal; }
  .fr-pager button { flex: 1 1 auto; }
  .fr-completion { align-items: stretch; flex-direction: column; }
}

/* --- dark ------------------------------------------------------------- */

body.dark .fr-index,
body.dark .fr-pager,
body.dark .fr-index-toggle { background: #232c36; border-color: #3a3a3c; }

body.dark .fr-index-hide,
body.dark .fr-index-desktop-toggle {
  background: #2c2c2e;
  border-color: #48484a;
  color: #e5e5ea;
}

body.dark .fr-index-hide:hover,
body.dark .fr-index-desktop-toggle:hover { background: #3a3a3c; }

body.dark .fr-index-title,
body.dark .fr-group-title { color: #9aa4b0; }
body.dark .fr-group { border-bottom-color: #3a3a3c; }
body.dark .fr-progress { color: #d6d6db; }
body.dark .fr-bar { background: #3a3a3c; }
body.dark .fr-link { color: #e5e5ea; }
body.dark .fr-link:hover { background: #2c2c2e; }
body.dark .fr-link.is-current { background: #1b354f; color: #cfe6ff; }
body.dark .fr-dot { border-color: #5a6472; }
body.dark .fr-link.is-visited .fr-dot { background: #5a6472; }
body.dark .fr-hot { background: #2c2c2e; border-color: #48484a; color: #9fcbf5; }
body.dark .fr-hot:hover { background: #3a3a3c; }
body.dark .fr-pager button { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .fr-pager button:hover:not(:disabled) { background: #3a3a3c; }
body.dark .fr-index-toggle { color: #e5e5ea; }
body.dark .fr-count { color: #a1a1a6; }
body.dark .fr-sequence-cue { color: #c3ccd6; }
body.dark .fr-completion { background: #232c36; border-color: #48484a; }
body.dark .fr-completion.is-complete { background: #183126; border-color: #2f7050; }
body.dark .fr-completion-text { color: #d6d6db; }

@media (prefers-reduced-motion: reduce) {
  .fr-bar-fill { transition: none; }
  body.has-fundamentals-reader .tab-content { animation: none; }
}

/* ==========================================================================
   READING MEASURE
   ==========================================================================

   With four tabs of stacked sections the column was as wide as the viewport
   allowed, which put body copy at roughly 120 characters a line, around
   double a comfortable measure, and the main reason the page read as messy
   even where the content was fine. Capping the prose (and only the prose:
   figures, tables, simulators and trace pages still use the full width) is
   the single largest legibility win available here.
   ========================================================================== */

body.has-fundamentals-reader .fundamentals-section > p,
body.has-fundamentals-reader .fundamentals-section > ul,
body.has-fundamentals-reader .fundamentals-section > ol,
body.has-fundamentals-reader .fundamentals-text > p,
body.has-fundamentals-reader .fundamentals-text > ul,
body.has-fundamentals-reader .aq-ask,
body.has-fundamentals-reader .aq-explain p {
  max-width: 80ch;
}

body.has-fundamentals-reader .fundamentals-section > p,
body.has-fundamentals-reader .fundamentals-section > ul,
body.has-fundamentals-reader .fundamentals-section > ol,
body.has-fundamentals-reader .fundamentals-text > p,
body.has-fundamentals-reader .fundamentals-text > ul,
body.has-fundamentals-reader .fundamentals-text > ol,
body.has-fundamentals-reader .fundamentals-card > p {
  box-sizing: border-box;
  width: 100%;
  max-width: 80ch;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.has-fundamentals-reader .fundamentals-section > p,
body.has-fundamentals-reader .fundamentals-section > ul,
body.has-fundamentals-reader .fundamentals-section > ol,
body.has-fundamentals-reader .fundamentals-text > p,
body.has-fundamentals-reader .fundamentals-text > ul,
body.has-fundamentals-reader .fundamentals-text > ol,
body.has-fundamentals-reader .fundamentals-card > p {
  font-size: 1rem;
  line-height: 1.7;
}

body.has-fundamentals-reader .fundamentals-text > p,
body.has-fundamentals-reader .fundamentals-section > p {
  margin-bottom: 1rem;
}

body.has-fundamentals-reader .fundamentals-text > ul > li,
body.has-fundamentals-reader .fundamentals-text > ol > li,
body.has-fundamentals-reader .fundamentals-section > ul > li,
body.has-fundamentals-reader .fundamentals-section > ol > li {
  margin-bottom: 0.42rem;
  line-height: 1.65;
}

body.has-fundamentals-reader .var-panel > p,
body.has-fundamentals-reader .step-panel > p,
body.has-fundamentals-reader .concept-item > p,
body.has-fundamentals-reader .important-note p,
body.has-fundamentals-reader .pro-tip p {
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* .label-breakdown rows are display:flex to get a "label | value" split, which
   works only while the row holds exactly one <strong> and one run of text. The
   impedance row also carries an icon and a second <strong>, and each of those
   became its own column. The row rendered as "Ordinarily kept at | ≤ 5 kΩ |
   (but not near zero…)" in four ragged pieces. A hanging inline label gives
   the same reading order and cannot break on the row's contents. */
body.has-fundamentals-reader .label-breakdown li {
  display: block;
}

body.has-fundamentals-reader .label-breakdown li > strong:first-child {
  display: inline-block;
  min-width: 9.5rem;
  margin-right: 0.4rem;
}

/* Every section is now its own page, so the first heading on it should not
   carry the extra separation that made sense in a continuous scroll. */
body.has-fundamentals-reader .section-header {
  margin-top: 0;
}

body.has-fundamentals-reader .fundamentals-section {
  margin-bottom: 0;
}

/* The reader already supplies orientation and progress, so keep the repeated
   page hero compact enough that the first lesson starts in the first viewport. */
body.has-fundamentals-reader main.page-eeg_lead_simulator {
  padding-top: 0.65rem !important;
  padding-bottom: 2.75rem !important;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .page-title {
  margin: 0.55rem 0 0.45rem !important;
  padding-bottom: 4px;
  font-size: 1.5rem;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .page-title::after {
  width: 76px;
  height: 2px;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .simulator-intro {
  width: 100%;
  margin-bottom: 0.45rem !important;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card {
  padding: 0.55rem 0.9rem !important;
  box-shadow: none;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card > i {
  display: none;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card h3 {
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card p {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* This study page is long and frequently interactive; a fixed footer hides
   controls and explanations. Let it follow the course in document flow. */
body.has-fundamentals-reader #footer-container footer {
  position: static;
  width: 100%;
}

body.has-fundamentals-reader #page-content {
  padding-bottom: 0;
}

@media (max-width: 768px) {
  body.has-fundamentals-reader .page-eeg_lead_simulator .page-title {
    margin-top: 0.25rem !important;
    font-size: 1.35rem;
  }

  body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card {
    padding: 0.5rem 0.7rem !important;
    text-align: left;
  }

  body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card h3 {
    font-size: 0.95rem;
  }

  body.has-fundamentals-reader .page-eeg_lead_simulator .intro-card p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}