/* ==========================================================================
   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. Hide later
   siblings without forcing display:block on the visible pair, so the flex
   layout of .fundamentals-content matches the post-JS tree. */
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 > :nth-child(n+3) {
  display: none !important;
}

/* The old tab panels fade in. That animation restarts when the reader moves
   the container into .fr-row, which is the visible flicker. Kill it on this
   page whether or not the enhancement script has run. */
.page-eeg_lead_simulator .tab-content,
body.fundamentals-reader-pending .tab-content,
body.has-fundamentals-reader .tab-content {
  animation: none;
}

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

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

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

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

.fr-index-close {
  display: none;
}

.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.72rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 0.26rem 0.42rem;
  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-index-meta {
  margin-bottom: 0.7rem;
}

.fr-progress {
  margin: 0 0 0.32rem !important;
  font-size: 0.74rem !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #576674;
}

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

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

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

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

.fr-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 0.67rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.24rem 0.22rem;
  cursor: pointer;
}

.fr-group-toggle:hover { background: #f2f7fc; color: #45515e; }
.fr-group-toggle:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 1px; }

.fr-group-toggle i {
  font-size: 0.58rem;
  transition: transform 0.15s ease;
}

.fr-group.is-open .fr-group-toggle i { transform: rotate(-180deg); }

.fr-group:not(.is-open):not(.fr-group-hot):not(.fr-group-single) .fr-link { display: none; }

.fr-group-single .fr-group-title {
  margin-bottom: 0.14rem !important;
}

.fr-group-lone .fr-link {
  padding-left: 0.35rem;
}

.fr-link {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #33424f;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.38;
  text-align: left;
  padding: 0.28rem 0.35rem 0.28rem 0.45rem;
  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;
}

.fr-link-text {
  min-width: 0;
}

/* hollow → filled → check, so "opened" and "finished" stay distinguishable */
.fr-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 0.2rem;
  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: 2.5px;
  top: 0.5px;
  width: 3px;
  height: 5px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

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

.fr-group-hot {
  margin-bottom: 0.55rem;
  padding-bottom: 0.48rem;
  border-bottom: 1px solid #edf1f5;
}

.fr-group-hot .fr-group-title {
  margin-bottom: 0.28rem !important;
}

.fr-hot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem 0.28rem;
}

.fr-hot {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex: 0 1 auto;
  appearance: none;
  border: 1px solid #dbe4ee;
  border-radius: 999px;
  background: #f7fafd;
  color: #0b4f8a;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  padding: 0.18rem 0.46rem;
  margin-bottom: 0;
  cursor: pointer;
  white-space: nowrap;
}

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

/* --- reset progress --------------------------------------------------- */

.fr-index-footer {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
}

.fr-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: #6e7b88;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.26rem 0.42rem;
  cursor: pointer;
}

.fr-reset i { font-size: 0.68rem; }
.fr-reset:hover { background: #f2f7fc; border-color: #cfdae6; color: #45515e; }
.fr-reset:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }
.fr-reset[hidden] { display: none; }

.fr-reset-confirm {
  border: 1px solid #f0c9c9;
  border-radius: 8px;
  background: #fdf5f5;
  padding: 0.55rem 0.6rem;
}

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

.fr-reset-text {
  margin: 0 0 0.45rem !important;
  font-size: 0.76rem !important;
  line-height: 1.45;
  color: #45515e;
}

.fr-reset-actions {
  display: flex;
  gap: 0.35rem;
}

.fr-reset-yes,
.fr-reset-no {
  appearance: none;
  border: 1px solid #cfdae6;
  border-radius: 7px;
  background: #fff;
  color: #33424f;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 0.3rem 0.62rem;
  cursor: pointer;
}

.fr-reset-yes { background: #b93838; border-color: #b93838; color: #fff; }
.fr-reset-yes:hover { background: #a02f2f; }
.fr-reset-no:hover { background: #eef5fb; border-color: #9db9d4; }
.fr-reset-yes:focus-visible,
.fr-reset-no:focus-visible { outline: 2px solid #0b6ab8; outline-offset: 2px; }

.fr-reset-status {
  margin: 0.35rem 0 0 !important;
  font-size: 0.72rem !important;
  color: #1f7a45;
}

.fr-reset-status:empty { display: none; }

/* --- 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: 0.55rem 0 0; }

.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 {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 58%;
  background: #0b6ab8 !important;
  border-color: #0b6ab8 !important;
  color: #fff !important;
}

.fr-next-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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 {
  display: none !important;
}

.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 248px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d4e0 transparent;
  }

  .fr-index::-webkit-scrollbar { width: 6px; }
  .fr-index::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c8d4e0;
  }

  .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,
  .fr-row > #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: 768px) {
  .fr-pager-top { display: none !important; }

  .fr-pager {
    flex-wrap: nowrap;
  }

  .fr-pager-bottom {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    margin-bottom: 0.35rem;
  }

  .fr-next { max-width: 64%; }

  .fr-pager button,
  .fr-index-toggle,
  .fr-link,
  .fr-hot,
  .fr-reset,
  .fr-reset-yes,
  .fr-reset-no {
    min-height: 44px;
  }

  .fr-index.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    padding: 1rem 0.85rem calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .fr-index-close {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 0.75rem;
    appearance: none;
    border: 1px solid #cfdae6;
    border-radius: 8px;
    background: #fff;
    color: #24303c;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  body.has-fundamentals-reader {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 600px) {
  .fr-count { flex: 0 1 auto; font-size: 0.7rem !important; }
  .fr-next { max-width: 70%; }
  .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,
body.dark .fr-index-close {
  background: #2c2c2e;
  border-color: #48484a;
  color: #e5e5ea;
}

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

body.dark .fr-index-title,
body.dark .fr-group-title,
body.dark .fr-group-toggle { color: #9aa4b0; }
body.dark .fr-group-toggle:hover { background: #2c2c2e; color: #d6d6db; }
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-reset { color: #9aa4b0; }
body.dark .fr-reset:hover { background: #2c2c2e; border-color: #48484a; color: #d6d6db; }
body.dark .fr-reset-confirm { background: #33231f; border-color: #6b3a3a; }
body.dark .fr-reset-text { color: #d6d6db; }
body.dark .fr-reset-no { background: #2c2c2e; border-color: #48484a; color: #e5e5ea; }
body.dark .fr-reset-no:hover { background: #3a3a3c; }
body.dark .fr-reset-yes { background: #c94a4a; border-color: #c94a4a; }
body.dark .fr-reset-yes:hover { background: #b23e3e; }
body.dark .fr-reset-status { color: #6fcf97; }
body.dark .course-syllabus a {
  background: #2c2c2e;
  border-color: #48484a;
  color: #9fcbf5;
}
body.dark .course-syllabus a: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; }
  .fr-group-toggle i { transition: none; }
  body.has-fundamentals-reader .tab-content,
  body.fundamentals-reader-pending .tab-content,
  .page-eeg_lead_simulator .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;
  margin-bottom: 0.45rem;
}

body.has-fundamentals-reader .fundamentals-section {
  margin-bottom: 0;
  padding: 1.2rem 1.25rem 1rem;
}

body.has-fundamentals-reader main.page-eeg_lead_simulator {
  padding-top: 0.65rem !important;
  padding-bottom: 1rem !important;
}

body.has-fundamentals-reader .page-title {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.7rem;
}

body.has-fundamentals-reader .fundamentals-content {
  padding: 0.55rem 0.7rem 0.35rem;
}

@media (min-width: 1200px) {
  body.has-fundamentals-reader .fundamentals-content {
    padding: 0.65rem 0.9rem 0.4rem;
  }
}

/* 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;
}

/* Welcome syllabus: compact linked grid instead of a tall bullet list */
body.has-fundamentals-reader .course-syllabus-lead {
  margin: 0.55rem 0 0.3rem !important;
  font-size: 0.84rem !important;
  font-weight: 650;
  color: #4f5d6a;
}

body.has-fundamentals-reader .course-syllabus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem 0.45rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  max-width: 72ch;
}

body.has-fundamentals-reader .course-syllabus li {
  margin: 0;
}

body.has-fundamentals-reader .course-syllabus a {
  display: block;
  padding: 0.3rem 0.48rem;
  border: 1px solid #e2eaf2;
  border-radius: 8px;
  background: #f9fbfd;
  color: #0b4f8a;
  font-size: 0.82rem;
  line-height: 1.32;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.has-fundamentals-reader .course-syllabus a:hover {
  background: #eaf3fb;
  border-color: #9db9d4;
}

@media (max-width: 720px) {
  body.has-fundamentals-reader .course-syllabus {
    grid-template-columns: minmax(0, 1fr);
  }
}