/* ============================================================
   Facilitation Foundations (Academy path 4.1)
   Intro, module index, and the module quizzes.

   Every value here comes from /design-system/platform-tokens.css.
   The composition is the run sheet: a cumulative clock down the left,
   hairline rules, tabular numerals. Time is the spine of this course,
   so it is the spine of the pages.
   ============================================================ */

.ff-body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--bg-page);
  background-image: var(--paper-grid-image);
  background-size: var(--paper-grid-size);
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces: these ship with defaults belonging to no design system. */
.ff-body ::selection { background: var(--phase-learn-light); color: var(--text-dark); }
.ff-body :where(a, button, summary, input, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm, 4px);
}
.ff-body { scrollbar-color: var(--divider-strong, #D6D3D1) transparent; scrollbar-width: thin; }
.ff-body ::-webkit-scrollbar { width: 11px; height: 11px; }
.ff-body ::-webkit-scrollbar-track { background: transparent; }
.ff-body ::-webkit-scrollbar-thumb {
  background: var(--divider-strong, #D6D3D1);
  border: 3px solid var(--bg-page);
  border-radius: var(--radius-full);
}
.ff-body ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.ff-main { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-8) var(--space-16); }
.ff-crumbs { padding-top: var(--space-6); }
.ff-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------- Hero. No eyebrow: the headline carries its own weight. ---------- */
.ff-hero { padding: var(--space-10) 0 var(--space-2); }
.ff-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.125rem, 5.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
/* The platform's Display Text Pattern: italic phase-dark, flush tint underline. */
.ff-hero__title em {
  font-style: italic;
  color: var(--phase-learn-dark);
  position: relative;
  white-space: nowrap;
}
.ff-hero__title em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 8px; background: var(--phase-learn-light); z-index: -1;
}
.ff-hero__lede {
  margin: var(--space-6) 0 0;
  max-width: 55ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}
.ff-hero__lede strong { color: var(--text-dark); font-weight: 600; }

.ff-facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-5);
  margin: var(--space-7) 0 0;
  font-size: 0.875rem; color: var(--color-ink-secondary);
}
.ff-facts span { display: inline-flex; align-items: center; gap: 7px; }
.ff-facts svg { width: 18px; height: 18px; color: var(--phase-learn-dark); }
.ff-facts i { width: 3px; height: 3px; border-radius: 50%; background: var(--divider-strong, #D6D3D1); }

.ff-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 0; }
.ff-cta--spaced { margin-top: var(--space-10); }

/* ---------- The lesson list ----------
   Two columns per module: the player, then what it teaches. The player leads
   because the page's job is to get someone watching. It must not be sticky:
   a per-row sticky player stays pinned past its own row and collides with the
   next row's player on the way up.

   Each row is a ws_card (feature variant), so the card supplies the surface,
   the border, the radius and the padding. Do not set padding here. */
.ff-lessons { margin: var(--space-12) 0 0; display: grid; gap: var(--space-6); }

.ff-lesson {
  display: grid;
  grid-template-columns: minmax(0, var(--ff-player, 460px)) minmax(0, 1fr);
  gap: var(--space-8);
  scroll-margin-top: 88px;
}

/* Nine cards stacked on a near-white page: at the default --card-border the
   edges read as nine hard rectangles. A lighter edge with a shadow under it
   lifts the card off the page without drawing the box around it. */
.ff-lesson, .ff-total { border-color: var(--gray-100); box-shadow: var(--shadow-sm); }

.ff-lesson__player { align-self: start; }
.ff-video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--text-dark);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}
/* Chrome paints the poster letterboxed unless the box matches the frame. */
.ff-video::-webkit-media-controls-panel { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

.ff-lesson__body { min-width: 0; }
/* The module number leads the title now that the clock eyebrow is gone, so it
   is the only thing on the card saying which module this is. */
.ff-lesson__title {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance;
}
.ff-lesson__no {
  flex: none;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0;
  color: var(--phase-learn-dark);
}
.ff-lesson__sub { margin: var(--space-2) 0 0; max-width: 52ch; font-size: 1rem; color: var(--color-ink-secondary); }
.ff-lesson__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0;
}
.ff-lesson__blurb {
  margin: var(--space-5) 0 0; max-width: 62ch;
  font-size: 0.9375rem; line-height: 1.65; color: var(--color-ink-secondary);
}
.ff-lesson__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }

.ff-row__no {
  display: block;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.ff-slides { font-size: 0.8125rem; color: var(--text-muted); }

.ff-blk h4, .ff-blk .ff-blk__label { margin: 0 0 var(--space-3); }
.ff-blk__label {
  display: block;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.ff-concepts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ff-concepts b { color: var(--text-dark); font-weight: 600; }
.ff-concepts li { font-size: 0.9375rem; color: var(--color-ink-secondary); }

/* The seam: the arc is an argument, so the sheet makes it out loud. */
.ff-seam {
  display: grid; grid-template-columns: var(--ff-clock, 92px) 1fr;
  gap: 0 var(--space-5); padding: var(--space-6) 0;
  border-bottom: 1px solid var(--divider-color);
}
/* On the lesson list there is no clock gutter to hang the label off. */
.ff-seam--flat { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: none; }
.ff-seam--flat .ff-seam__label { text-align: left; padding-right: 0; }
.ff-seam__label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--phase-learn-dark);
  text-align: right; padding-right: 21px;
}
.ff-seam__text {
  margin: 0; max-width: 58ch;
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.0625rem; line-height: 1.5; color: var(--text-dark);
}
.ff-seam__text b { font-style: normal; font-weight: 600; }

.ff-total {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--space-3) var(--space-6); align-items: center;
}
.ff-total__clock {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-dark);
}
.ff-total__text { margin: 0; max-width: 54ch; font-size: 0.9375rem; color: var(--color-ink-secondary); }
.ff-total__text b { color: var(--text-dark); font-weight: 600; }

/* The softened card edge above is a deliberate lightening of --card-border,
   so it has to be given back to anyone who asked for more contrast. */
@media (prefers-contrast: more) {
  .ff-lesson, .ff-total, .ff-q { border-color: var(--card-border); }
}

/* ---------- Watch one module (video.php) ----------
   The player is the page here, so it runs the full content column rather than
   sitting in a card: the module list is for choosing, this page is for
   watching. The script under it is prose, not a run sheet, so it drops the
   tabular clock and takes a reading measure. */
.ff-watch { padding: var(--space-8) 0 0; }
.ff-watch__head { margin: 0 0 var(--space-6); }
.ff-watch__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance;
}
.ff-watch__sub { margin: var(--space-3) 0 0; max-width: 58ch; font-size: 1.0625rem; color: var(--color-ink-secondary); }
.ff-watch__video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--text-dark);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.ff-watch__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4); margin: var(--space-5) 0 0;
}
.ff-watch__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }

.ff-script { margin: var(--space-12) 0 0; padding: var(--space-8) 0 0; border-top: 1px solid var(--text-dark); }
.ff-script__title {
  margin: 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.025em; line-height: 1.15;
}
.ff-script__lede { margin: var(--space-3) 0 0; max-width: 62ch; font-size: 0.9375rem; line-height: 1.65; color: var(--color-ink-secondary); }

.ff-script__slide { margin: var(--space-10) 0 0; }
.ff-script__slide-title {
  display: flex; align-items: baseline; gap: var(--space-3); margin: 0;
  font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.25;
}
.ff-script__no { font-size: 0.8125rem; font-weight: 600; color: var(--phase-learn-dark); }
.ff-script__screen {
  margin: var(--space-3) 0 0; max-width: 62ch;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-left: 1px solid var(--phase-learn);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 0.875rem; line-height: 1.5; color: var(--color-ink-secondary);
}
.ff-script__screen .ff-blk__label { display: block; margin-bottom: 3px; }
.ff-script__say {
  margin: var(--space-4) 0 0; max-width: 68ch;
  font-size: 1rem; line-height: 1.7; color: var(--text-dark);
}
.ff-script__cue {
  margin: var(--space-5) 0 0;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ---------- Sections ---------- */
.ff-section { padding: var(--space-16) 0 0; }
.ff-section__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.625rem, 3.6vw, 2.25rem);
  letter-spacing: -0.025em; line-height: 1.14; margin: 0;
  max-width: 20ch; text-wrap: balance;
}
.ff-section__title em { font-style: italic; color: var(--phase-learn-dark); position: relative; white-space: nowrap; }
.ff-section__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 8px; background: var(--phase-learn-light); z-index: -1;
}
.ff-section__lede { margin: var(--space-3) 0 0; max-width: 54ch; font-size: 1rem; color: var(--color-ink-secondary); }

/* The artifacts ledger: a receipt, not a grid of identical cards. */
.ff-ledger { margin: var(--space-8) 0 0; border-top: 1px solid var(--text-dark); }
.ff-ledger__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-6);
  align-items: baseline; padding: var(--space-5) 0;
  border-bottom: 1px solid var(--divider-color);
}
.ff-ledger__what { margin: 0; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; }
.ff-ledger__note { margin: 5px 0 0; max-width: 54ch; font-size: 0.9375rem; color: var(--color-ink-secondary); }
.ff-ledger__from { font-size: 0.8125rem; font-weight: 600; color: var(--phase-learn-dark); white-space: nowrap; }
.ff-ledger__close { margin: var(--space-5) 0 0; max-width: 58ch; font-size: 0.9375rem; color: var(--color-ink-secondary); }
.ff-ledger__close b { color: var(--text-dark); font-weight: 600; }

.ff-omit {
  margin: var(--space-8) 0 0; display: grid; gap: 1px;
  background: var(--divider-color); border: 1px solid var(--card-border);
  border-radius: var(--radius-xl); overflow: hidden;
}
.ff-omit__row {
  background: var(--card-bg); padding: var(--space-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-7); align-items: start;
}
.ff-omit__what { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-dark); }
.ff-omit__where { margin: 0; font-size: 0.9375rem; color: var(--color-ink-secondary); }

.ff-close { margin: var(--space-16) 0 0; padding: var(--space-10) 0 0; border-top: 1px solid var(--text-dark); }
.ff-close__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-7); align-items: center; }
.ff-close h2 {
  margin: 0; max-width: 22ch;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.625rem, 3.2vw, 2.125rem); letter-spacing: -0.025em; line-height: 1.15;
}
.ff-close p { margin: var(--space-3) 0 0; max-width: 54ch; font-size: 1rem; color: var(--color-ink-secondary); }

/* ---------- Module index ---------- */
.ff-act { margin: var(--space-10) 0 0; }
.ff-act__head {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--text-dark);
}
.ff-act__title { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.ff-act__note { margin: 0; font-size: 0.875rem; color: var(--text-muted); }

.ff-mod {
  display: grid; grid-template-columns: var(--ff-clock, 92px) 1fr;
  gap: 0 var(--space-5); padding: var(--space-7) 0;
  border-bottom: 1px solid var(--divider-color);
  scroll-margin-top: 88px;
}
.ff-mod__clock { font-size: 0.9375rem; font-weight: 600; color: var(--phase-learn-dark); padding-top: 4px; }
.ff-mod__title { margin: var(--space-1) 0 0; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.ff-mod__sub { margin: var(--space-2) 0 0; max-width: 60ch; font-size: 1rem; color: var(--color-ink-secondary); }
.ff-mod__why { margin: var(--space-4) 0 0; max-width: 62ch; font-size: 0.9375rem; color: var(--color-ink-secondary); }
.ff-mod__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); margin-top: var(--space-6); }
.ff-mod__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.ff-mod__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Quiz ---------- */
.ff-quiz { max-width: 760px; }
.ff-quiz__head { padding: var(--space-8) 0 var(--space-6); }
.ff-quiz__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1;
}
.ff-quiz__meta { margin: var(--space-4) 0 0; font-size: 0.9375rem; color: var(--color-ink-secondary); max-width: 60ch; }

/* Each question is a ws_card, matching the module list: the card supplies the
   surface, border, radius and padding, and the form does the spacing between
   them. A fieldset carries a groove border and inline margins of its own that
   the card's own border does not clear, so they are reset here. */
.ff-quizform { display: grid; gap: var(--space-6); }
.ff-q {
  margin: 0; min-width: 0;
  border-color: var(--gray-100); box-shadow: var(--shadow-sm);
  scroll-margin-top: 88px;
}
.ff-q__n {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--phase-learn-dark);
}
/* A <legend> is laid out inside the fieldset's border box, so on a card it cuts
   a notch out of the top edge. Floating it makes it an ordinary block and the
   card's border closes behind it. */
.ff-q > .ff-q__n { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); }
.ff-q__stem {
  clear: both;
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 600;
  line-height: 1.4; letter-spacing: -0.01em; max-width: 62ch;
}
.ff-opts { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.ff-opt {
  display: flex; gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  font-size: 0.9375rem; line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out),
              transform var(--duration-base) var(--ease-in-out);
}
/* Hover is a pointer affordance, so it is gated on a real pointer — on touch a
   :hover rule sticks after the tap. It is also off once the quiz is marked:
   nothing is selectable then, and a tint here would fight the green and red
   the marked answers carry. */
@media (hover: hover) {
  .ff-q:not(.is-marked) .ff-opt:hover {
    background: var(--phase-learn-very-light);
    border-color: var(--phase-learn);
    box-shadow: var(--shadow-sm);
  }
}
.ff-opt input { margin: 0; accent-color: var(--phase-learn); flex: none; }
.ff-opt:has(input:checked) { border-color: var(--phase-learn); box-shadow: var(--shadow-sm); }
.ff-opt__mark { flex: none; width: 20px; height: 20px; opacity: 0; }

/* Marked states. The colour is never the only signal: each carries an icon. */
.ff-q.is-marked .ff-opt { cursor: default; }
.ff-q.is-marked .ff-opt.is-answer {
  border-color: var(--color-success);
  background: var(--color-success-very-light, var(--card-bg));
}
.ff-q.is-marked .ff-opt.is-wrong {
  border-color: var(--color-error);
  background: var(--color-error-very-light, var(--card-bg));
}
.ff-q.is-marked .ff-opt.is-answer .ff-opt__mark { opacity: 1; color: var(--color-success-dark); }
.ff-q.is-marked .ff-opt.is-wrong .ff-opt__mark { opacity: 1; color: var(--color-error-dark); }
.ff-q.is-marked .ff-opt input { pointer-events: none; }

.ff-fb {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl); font-size: 0.9375rem; line-height: 1.55;
  border: 1px solid var(--card-border); background: var(--card-bg);
  color: var(--color-ink-secondary);
}
.ff-fb__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; }
.ff-fb__head svg { width: 18px; height: 18px; }
.ff-fb.is-right { border-color: var(--color-success); }
.ff-fb.is-right .ff-fb__head { color: var(--color-success-dark); }
.ff-fb.is-wrong { border-color: var(--color-error); }
.ff-fb.is-wrong .ff-fb__head { color: var(--color-error-dark); }
.ff-fb__beats { margin: var(--space-3) 0 0; font-size: 0.8125rem; color: var(--text-muted); }

.ff-quiz__actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-8); padding: var(--space-5) 0;
  background: linear-gradient(to top, var(--bg-page) 72%, transparent);
}
/* Status on the left, action on the right. The count is last in the DOM
   because it is a live region and belongs after the control it reports on;
   `order` moves it without changing that. */
.ff-quiz__count {
  order: -1; margin-right: auto;
  font-size: 0.875rem; color: var(--text-muted);
}

.ff-result { margin: var(--space-8) 0 0; }
.ff-result__score {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--text-dark);
}
.ff-result__of { font-size: 1.125rem; color: var(--text-muted); font-weight: 400; }

@media (max-width: 1040px) {
  :root, .ff-body { --ff-player: 400px; }
  .ff-lesson { gap: var(--space-6); }
}
@media (max-width: 900px) {
  .ff-omit__row, .ff-mod__cols { grid-template-columns: 1fr; }
  .ff-close__grid { grid-template-columns: 1fr; align-items: start; }
  .ff-lesson { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 760px) {
  :root, .ff-body { --ff-clock: 0px; }
  .ff-main { padding-left: var(--space-5); padding-right: var(--space-5); }
  .ff-mod { grid-template-columns: 1fr auto; }
  .ff-seam { grid-template-columns: 1fr; }
  .ff-seam__label { text-align: left; padding-right: 0; margin-bottom: 6px; }
  .ff-total { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Too narrow to sit them apart: the button leads and the count follows. */
  .ff-quiz__count { order: 0; margin-right: 0; }
  .ff-ledger__row { grid-template-columns: 1fr; }
  .ff-ledger__from { order: -1; }
  .ff-mod__clock { grid-column: 1 / -1; padding-top: 0; margin-bottom: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .ff-body *, .ff-body *::before, .ff-body *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Toggled by js/academy/foundations-quiz.js. Scoped past .ws-btn's own
   display so hiding a button actually hides it. */
.ff-body .is-hidden { display: none; }