/* WFD Academy — course-reader pilot chrome glue + slide-over financials panel
 * (v2.9.2). Loaded ONLY on the pilot page template. Scoped so it cannot
 * touch any other live surface. */

/* ---- Host the scoped module inside the WFD reading column ---- */
#wfd-reader-pilot { display: block; }

/* Suppress the module's own SPA chrome — we use the WFD masthead + rail + footer. */
#wfd-reader-pilot .mobile-bar,
#wfd-reader-pilot .sidebar,
#wfd-reader-pilot .site-footer { display: none !important; }

/* Reflow the module's two-column layout into a single reading column that
 * sits inside .wfd-player__column. */
#wfd-reader-pilot,
#wfd-reader-pilot .layout { display: block !important; min-height: 0 !important; background: transparent !important; }
#wfd-reader-pilot .main { padding: 0 !important; background: transparent !important; }
#wfd-reader-pilot .content { max-width: 760px; margin: 0 auto; }

/* The module CSS sets a page background on the wrapper (was body); keep the
 * WFD cream reading surface instead. */
#wfd-reader-pilot { background: transparent !important; color: var(--wfd-stone-900); }

/* ---- Left rail items in this pilot drive the SPA via hash ---- */
.wfd-player__rail-item[data-slug] { cursor: pointer; }

/* ---- Slide-over financials panel ---- */
.wfd-fs-panel { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.wfd-fs-panel.is-open { visibility: visible; }
.wfd-fs-panel__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0; transition: opacity .28s ease;
}
.wfd-fs-panel.is-open .wfd-fs-panel__overlay { opacity: 1; }
.wfd-fs-panel__sheet {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(760px, 94vw);
  background: var(--wfd-cream, #F7F2E7);
  color: var(--wfd-stone-900, #2A251E);
  box-shadow: -16px 0 48px rgba(0,0,0,0.35);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  outline: none;
}
.wfd-fs-panel.is-open .wfd-fs-panel__sheet { transform: translateX(0); }
.wfd-fs-panel__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: var(--wfd-black, #15110B);
  color: #FFFFFF;
  border-bottom: 2px solid var(--wfd-gold, #C5A572);
}
.wfd-fs-panel__eyebrow {
  display: block;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wfd-gold, #C5A572); margin-bottom: 2px;
}
.wfd-fs-panel__title strong {
  font-family: var(--wfd-font-display, "EB Garamond", serif);
  font-size: 22px; font-weight: 600; color: #FFFFFF;
}
.wfd-fs-panel__close {
  appearance: none; border: 0; background: transparent;
  color: #FFFFFF; font-size: 30px; line-height: 1; cursor: pointer;
  padding: 0 6px; border-radius: 4px;
}
.wfd-fs-panel__close:hover { color: var(--wfd-gold, #C5A572); }
.wfd-fs-panel__close:focus-visible { outline: 2px solid var(--wfd-gold, #C5A572); outline-offset: 2px; }
.wfd-fs-panel__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 28px clamp(20px, 4vw, 40px) 64px;
  scroll-behavior: smooth;
}
/* Numerals / figures inside the financials use the brand numeral font. */
.wfd-fs-panel__body table,
.wfd-fs-panel__body .num,
.wfd-fs-panel__body td,
.wfd-fs-panel__body th { font-feature-settings: "tnum" 1; }
.wfd-fs-panel__body { font-variant-numeric: tabular-nums; }
body.wfd-fs-locked { overflow: hidden; }

/* Highlight the targeted note briefly so the jump is obvious. */
.wfd-fs-panel__body :target {
  scroll-margin-top: 12px;
}

@media (max-width: 600px) {
  .wfd-fs-panel__sheet { width: 100vw; }
}

/* =========================================================================
   v2.9.2 — masthead + slim header pinned (no scroll drift), and the full
   17-chapter syllabus accordion living at the TOP of the left rail.
   All rules scoped to body.wfd-reader-pilot-page so the live /lessons/
   player and every other surface are untouched.
   ========================================================================= */

/* ---- Change 3: stop BOTH the masthead and the slim lesson header from
 * moving on scroll. The base academic CSS uses position:sticky for both, but
 * stacked sticky bars can drift sub-pixel as the browser re-resolves their
 * containing block while scrolling. On the pilot we pin both with
 * position:fixed so neither can move, then offset the player so its content
 * starts cleanly below the fixed chrome. --wfd-masthead-h is measured by
 * wfd-nav.js (fallback 130px). Scoped to the pilot body only. */
body.wfd-reader-pilot-page .wfd-masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
}

body.wfd-reader-pilot-page .wfd-player__slim-header {
  position: fixed;
  top: calc(var(--wfd-rp-chrome-top, 130px) - 1px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;                              /* above all #wfd-reader-pilot content (max z-index there is 50) */
  background-color: #0A0A0A;                 /* --wfd-black, fully opaque (no alpha) */
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 2px solid var(--wfd-gold, #C5A572);
  isolation: isolate;                        /* own stacking context so module paint can't bleed over it */
}

/* Both bars are now out of flow (fixed); push the player section down by the
 * combined masthead + slim-header height so nothing hides under the chrome. */
body.wfd-reader-pilot-page .wfd-player--academic {
  padding-top: calc(var(--wfd-masthead-h, 130px) + var(--wfd-slim-h, 60px));
}

/* Keep the reading column below the bars; no module child may paint over them. */
body.wfd-reader-pilot-page #wfd-reader-pilot { position: relative; z-index: 0; }

/* The sticky left rail offset already accounts for masthead + slim bar via the
 * base academic CSS calc(); with the bars now fixed that math still holds, but
 * the player padding-top shifts the whole shell, so reset the rail's own top to
 * sit just under the fixed slim bar. */
body.wfd-reader-pilot-page .wfd-player__rail {
  top: calc(var(--wfd-rp-chrome-top, 130px) + var(--wfd-slim-h, 60px));
  max-height: calc(100vh - var(--wfd-rp-chrome-top, 130px) - var(--wfd-slim-h, 60px) - 48px);
}

/* ---- Change 2: full 17-chapter syllabus accordion at the TOP of the left
 * rail. Same component as the marketing syllabus page (page-syllabus.php):
 * a native <details> per chapter with a "+" disclosure that rotates to "x"
 * when open, a number, the title, a Free preview / Enrolled badge, and the
 * one-line summary revealed on expand. Restyled here for the dark rail. */
.wfd-rp-syllabus { margin: 0 0 1.5rem; }

.wfd-rp-syllabus .wfd-player__rail-title { margin: 0 0 .5rem; }

.wfd-rp-syllabus__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wfd-rp-syllabus__item { margin: 0; }

.wfd-rp-syllabus__row {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.wfd-rp-syllabus__item:first-child .wfd-rp-syllabus__row { border-top: 0; }

.wfd-rp-syllabus__summary {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-areas:
    "num title chev"
    "num badge chev";
  align-items: start;
  column-gap: 9px;
  row-gap: 3px;
  padding: 9px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wfd-rp-syllabus__summary::-webkit-details-marker { display: none; }
.wfd-rp-syllabus__summary::marker { content: ""; }
.wfd-rp-syllabus__row > .wfd-rp-syllabus__summary:hover { background: rgba(255,255,255,0.05); }
.wfd-rp-syllabus__row > .wfd-rp-syllabus__summary:focus-visible {
  outline: 2px solid var(--wfd-gold, #C5A572);
  outline-offset: 2px;
}

.wfd-rp-syllabus__num {
  grid-area: num;
  font-family: var(--wfd-font-numeral, "Libre Franklin", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--wfd-gold, #C5A572);
  padding-top: 1px;
}
.wfd-rp-syllabus__item--paid .wfd-rp-syllabus__num { color: rgba(255,255,255,0.45); }

.wfd-rp-syllabus__title {
  grid-area: title;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 13px;
  line-height: 1.35;
  color: #FFFFFF;
  min-width: 0;
}
.wfd-rp-syllabus__item--paid .wfd-rp-syllabus__title { color: rgba(255,255,255,0.82); }

.wfd-rp-syllabus__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid rgba(197,165,114,0.5);
}
.wfd-rp-syllabus__badge--free {
  color: #0A0A0A;
  background: var(--wfd-gold, #C5A572);
  border-color: var(--wfd-gold, #C5A572);
}
.wfd-rp-syllabus__badge--paid {
  color: rgba(255,255,255,0.72);
  background: transparent;
  border-color: rgba(255,255,255,0.22);
}

.wfd-rp-syllabus__chev {
  grid-area: chev;
  align-self: center;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--wfd-gold, #C5A572);
  width: 16px;
  text-align: center;
  transition: transform 160ms ease;
}
.wfd-rp-syllabus__row[open] .wfd-rp-syllabus__chev { transform: rotate(45deg); }

.wfd-rp-syllabus__detail {
  padding: 0 4px 10px 31px;
}
.wfd-rp-syllabus__detail p {
  margin: 0;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.68);
}

/* Visual separator between the syllabus accordion and the chapter nav below. */
.wfd-player__rail-title--chapters {
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* =========================================================================
   v2.9.3 — Left-rail restructure.
   - The full 17-chapter syllabus no longer sits as an always-on block at the
     top of the rail. It is now opened on click from "Reference > Syllabus" as
     an in-reader slide-over (same panel mechanic as FLIC financials).
   - REFERENCE group now sits ABOVE the CHAPTERS group in the rail.
   The dark-rail syllabus rules from v2.9.2 are repurposed for the LIGHT panel
   surface below; the original rail block is gone from the markup so those
   dark rules simply no longer apply there.
   ========================================================================= */

/* Syllabus rendered inside the cream slide-over panel: re-tone the v2.9.2
   accordion (which was authored for the dark rail) to read on a light cream
   surface, honouring the three-colour text rule (#2A251E body) and gold for
   borders / badges / accents only. */
.wfd-sy-panel__body .wfd-rp-syllabus--panel { margin: 0; }

.wfd-sy-panel__body .wfd-rp-syllabus__list { list-style: none; margin: 0; padding: 0; }
.wfd-sy-panel__body .wfd-rp-syllabus__item { margin: 0; }

.wfd-sy-panel__body .wfd-rp-syllabus__row {
  border-top: 1px solid rgba(42,37,30,0.12);
}
.wfd-sy-panel__body .wfd-rp-syllabus__item:first-child .wfd-rp-syllabus__row { border-top: 0; }

.wfd-sy-panel__body .wfd-rp-syllabus__summary {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  grid-template-areas:
    "num title chev"
    "num badge chev";
  align-items: start;
  column-gap: 12px;
  row-gap: 4px;
  padding: 13px 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wfd-sy-panel__body .wfd-rp-syllabus__summary::-webkit-details-marker { display: none; }
.wfd-sy-panel__body .wfd-rp-syllabus__summary::marker { content: ""; }
.wfd-sy-panel__body .wfd-rp-syllabus__row > .wfd-rp-syllabus__summary:hover { background: rgba(42,37,30,0.04); }
.wfd-sy-panel__body .wfd-rp-syllabus__row > .wfd-rp-syllabus__summary:focus-visible {
  outline: 2px solid var(--wfd-gold, #C5A572);
  outline-offset: 2px;
}

.wfd-sy-panel__body .wfd-rp-syllabus__num {
  grid-area: num;
  font-family: var(--wfd-font-numeral, "Libre Franklin", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  /* bronze on light per the surface-resolved gold-text rule */
  color: var(--accent-on-light, #5A430F);
  padding-top: 1px;
}
.wfd-sy-panel__body .wfd-rp-syllabus__item--paid .wfd-rp-syllabus__num { color: rgba(42,37,30,0.55); }

.wfd-sy-panel__body .wfd-rp-syllabus__title {
  grid-area: title;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--wfd-stone-900, #2A251E);
  min-width: 0;
}
.wfd-sy-panel__body .wfd-rp-syllabus__item--paid .wfd-rp-syllabus__title { color: rgba(42,37,30,0.88); }

.wfd-sy-panel__body .wfd-rp-syllabus__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--wfd-gold, #C5A572);
}
.wfd-sy-panel__body .wfd-rp-syllabus__badge--free {
  color: #2A251E;
  background: var(--wfd-gold, #C5A572);
  border-color: var(--wfd-gold, #C5A572);
}
.wfd-sy-panel__body .wfd-rp-syllabus__badge--paid {
  color: var(--wfd-stone-900, #2A251E);
  background: transparent;
  border-color: rgba(42,37,30,0.28);
}

.wfd-sy-panel__body .wfd-rp-syllabus__chev {
  grid-area: chev;
  align-self: center;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-on-light, #5A430F);
  width: 18px;
  text-align: center;
  transition: transform 160ms ease;
}
.wfd-sy-panel__body .wfd-rp-syllabus__row[open] .wfd-rp-syllabus__chev { transform: rotate(45deg); }

.wfd-sy-panel__body .wfd-rp-syllabus__detail { padding: 0 6px 12px 42px; }
.wfd-sy-panel__body .wfd-rp-syllabus__detail p {
  margin: 0;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(42,37,30,0.78);
}

/* The hidden source template must never render in the reading column. */
#wfd-rp-syllabus-tpl { display: none !important; }

/* =========================================================================
   v2.9.4 — Robust, self-correcting header pin (no hardcoded heights).
   Both bars are position:fixed; their offsets derive ONLY from the two
   JS-measured vars (--wfd-masthead-h, --wfd-slim-h), which reader-pilot-
   chrome.js republishes on load, resize, fonts.ready and via ResizeObserver.
   With the vars always equal to the bars' real offsetHeight, the slim header
   pins flush under the masthead and the reading content starts flush under
   the slim header — zero gap by construction at any viewport width.
   All rules stay scoped to body.wfd-reader-pilot-page so no other surface,
   including the live /lessons/ player, is affected.
   ========================================================================= */

/* Masthead pinned at the very top — cannot scroll away. */
body.wfd-reader-pilot-page .wfd-masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
}

/* Slim lesson header pinned flush directly beneath the masthead. Its `top`
 * is the MEASURED masthead height, so there is no gap regardless of how tall
 * the masthead actually renders at this breakpoint / after font swap. The
 * fallback 130px applies only for the first paint before the measurer runs;
 * the measured value overwrites it immediately. */
body.wfd-reader-pilot-page .wfd-player__slim-header {
  position: fixed;
  top: calc(var(--wfd-rp-chrome-top, 130px) - 1px);
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0 !important;      /* neutralise the live-player -2px !important nudge so the seam math is purely var-driven */
  z-index: 200;
  background-color: #0A0A0A;     /* --wfd-black, fully opaque */
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 2px solid var(--wfd-gold, #C5A572);
  isolation: isolate;
}

/* The reading section clears BOTH fixed bars: padding-top = measured masthead
 * height + measured slim-header height. Content therefore begins flush under
 * the slim bar with no empty band. Both terms are measured; neither is a
 * load-bearing magic number. */
body.wfd-reader-pilot-page .wfd-player--academic {
  padding-top: calc(var(--wfd-masthead-h, 130px) + var(--wfd-slim-h, 60px));
}

/* No module child may paint over the fixed chrome. */
body.wfd-reader-pilot-page #wfd-reader-pilot { position: relative; z-index: 0; }

/* Sticky left rail sits just below the two fixed bars, again from measured
 * vars only. */
body.wfd-reader-pilot-page .wfd-player__rail {
  top: calc(var(--wfd-rp-chrome-top, 130px) + var(--wfd-slim-h, 60px));
  max-height: calc(100vh - var(--wfd-rp-chrome-top, 130px) - var(--wfd-slim-h, 60px) - 48px);
}

/* When the WordPress admin bar is shown, it pushes the masthead down 32px
 * (46px on narrow). Mirror that so the fixed masthead stays under it; the
 * measurer's ResizeObserver/ load pass keeps --wfd-masthead-h correct, so the
 * slim bar and content still chain from the masthead's real bottom edge. */
body.wfd-reader-pilot-page.admin-bar .wfd-masthead { top: 32px; }
@media screen and (max-width: 782px) {
  body.wfd-reader-pilot-page.admin-bar .wfd-masthead { top: 46px; }
}


/* v2.9.9 - left rail = fully independent fixed panel (never moves with the footer);
   kill the masthead/rail sub-pixel hairline. Scoped to the pilot only. */
body.wfd-reader-pilot-page .wfd-masthead { border-bottom: 0 !important; }
body.wfd-reader-pilot-page .wfd-player__column { grid-column: 2 !important; }
body.wfd-reader-pilot-page .wfd-player__rail {
  position: fixed !important;
  top: calc(var(--wfd-rp-chrome-top, 130px) + var(--wfd-slim-h, 60px) - 1px) !important;
  left: 0 !important;
  width: 296px !important;
  bottom: 0 !important;
  max-height: none !important;
  height: calc(100vh - var(--wfd-rp-chrome-top, 130px) - var(--wfd-slim-h, 60px)) !important;
  overflow-y: auto !important;
  z-index: 150 !important;
}


/* v2.9.10 - center the footer within the content column (right of the fixed 296px rail), not the whole page. Reader page only. */
body.wfd-reader-pilot-page .wfd-footer { box-sizing: border-box !important; padding-left: 296px !important; }

/* =========================================================================
   v2.9.13 — Single-page 17-chapter reader.
   - Locked rail items (Ch 3-17 for non-enrolled visitors): a lock glyph and a
     muted tone. The item stays a normal-looking link; the adapter intercepts
     the click and shows the inline enrol panel.
   - Module sub-headings reuse .wfd-player__rail-title--chapters (already styled).
   - .wfd-rp-enrol: the in-reader "Enrol to unlock" panel rendered into the
     reading column by reader-pilot-adapter.js when a locked chapter is clicked.
   Honours the three-colour text rule + gold for accents/fills/borders only,
   gold-on-dark for the rail, bronze-on-light for the cream reading column.
   ========================================================================= */
.wfd-player__rail-item.wfd-rp-locked { opacity: 0.78; }
.wfd-player__rail-item.wfd-rp-locked:hover { opacity: 1; }
.wfd-player__rail-item .wfd-player__rail-lock {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  line-height: 1;
  color: var(--wfd-gold, #C5A572);
  flex: 0 0 auto;
}

/* In-reader enrol panel (cream reading column). */
.wfd-rp-enrol {
  max-width: 560px;
  margin: 0 auto;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
}
.wfd-rp-enrol__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border: 1px solid var(--wfd-gold, #C5A572);
  border-radius: 6px;
  color: var(--accent-on-light, #5A430F);
}
.wfd-rp-enrol__title {
  font-family: var(--wfd-font-display, "EB Garamond", Georgia, serif);
  font-size: 30px;
  line-height: 1.15;
  color: var(--wfd-stone-900, #2A251E);
  margin: 0 0 12px;
}
.wfd-rp-enrol__text {
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--wfd-stone-900, #2A251E);
  margin: 0 auto 26px;
  max-width: 52ch;
}
.wfd-rp-enrol__actions { margin: 0; }
.wfd-rp-enrol__btn {
  display: inline-block;
  font-family: var(--wfd-font-body, "IBM Plex Sans", sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 6px;
  background: var(--wfd-gold, #C5A572);
  color: #2A251E;
  border: 1px solid var(--wfd-gold, #C5A572);
  transition: filter 140ms ease;
}
.wfd-rp-enrol__btn:hover { filter: brightness(0.94); }
.wfd-rp-enrol__btn:focus-visible {
  outline: 2px solid var(--accent-on-light, #5A430F);
  outline-offset: 2px;
}
.wfd-rp-enrol__btn--disabled {
  background: rgba(42,37,30,0.12);
  border-color: rgba(42,37,30,0.18);
  color: rgba(42,37,30,0.55);
  cursor: default;
}