/* The lesson frame (record 5dhi/R3, docs/lesson-frame.md): the same header, four step chips, stage,
   Lumen's column and Next button for every lesson, plus the session and proposal pages.
   Colours, type, space and radii come only from tokens.css. */

.fr-kicker { margin: 0; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky-gold); }
.fr-paper .fr-kicker, .fr-stage .fr-kicker, .fr-lesson-card .fr-kicker, .fr-section .fr-kicker { color: var(--warn); }
.fr-head h1 { margin: var(--space-1) 0 0; line-height: 1.08; }
.button.secondary { background: var(--lit); color: var(--ink); }

/* ── Lesson header: title, lesson strip, step chips ── */
.fr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: end; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.fr-head--single { grid-template-columns: minmax(0, 1fr); }
.fr-kicker-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fr-strip { display: flex; gap: var(--space-1); }
.fr-strip a {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  font-size: var(--text-xs); font-weight: 800; background: var(--glass-dark); color: var(--on-sky); border: 1px solid var(--glass-line);
}
.fr-strip a.is-draft { color: var(--on-sky-muted); border-style: dashed; }
.fr-strip a.is-done { background: var(--success); border-color: var(--success); }
.fr-strip a.is-current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--shadow-button); }

.fr-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1);
  padding: var(--space-1); border-radius: var(--radius-pill); background: var(--glass-dark); border: 1px solid var(--glass-line);
}
.fr-steps button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3);
  font-size: var(--text-md); font-weight: 800; background: none; color: var(--on-sky); border-radius: var(--radius-pill);
}
.fr-steps button:hover { transform: none; background: var(--veil); }
.fr-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-sm); background: var(--veil); }
.fr-steps .opt { font-size: var(--text-xs); font-weight: 600; color: var(--on-sky-muted); }
.fr-steps button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-button); }
.fr-steps button[aria-selected="true"] .n { background: var(--lit); }
.fr-steps button[aria-selected="true"] .opt { color: var(--accent-ink); }
.fr-steps button.is-ready:not([aria-selected="true"]) .n, .fr-steps button[data-done="true"]:not([aria-selected="true"]) .n { background: var(--success); color: var(--lit); }
.fr-steps button[data-done="true"] .n::after { content: "✓"; }
.fr-steps button[data-done="true"] .n { font-size: 0; }
.fr-steps button[data-done="true"] .n::after { font-size: var(--text-sm); }

/* ── Body: the stage and Lumen's column ── */
.fr-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: start; }

/* Paper: the one content surface. Nothing inside it gets another filled box. */
.fr-stage, .fr-paper { background: var(--lit); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.fr-stage { padding: var(--space-4); display: grid; container-type: inline-size; }
/* Without the script every step stacks in order. With it, one shows at a time, and every step is
   at least as tall as the scene, so changing step does not move the page. */
.fr-panel + .fr-panel { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px dashed var(--lit-edge); }
.js .fr-panel { display: none; margin: 0; padding: 0; border: 0; min-height: calc(71cqw + 48px); }
.js .fr-panel[data-on] { display: block; }
.js .fr-panel-explore[data-on], .js .fr-panel-explain[data-on], .js .fr-panel-try[data-on] { display: grid; }

/* The scene inside the stage. */
.fr-stage .scene.stage { place-items: stretch; min-height: 0; gap: var(--space-3); }
.fr-stage .scene-caption, .fr-stage .stage-skip, .fr-stage .stage-try-head, .fr-stage .module-note { display: none !important; }
.fr-stage .scene-stage { box-shadow: none; border-radius: var(--radius-md); }
.fr-stage .scene-controls button { background: var(--lit-warm); }
.fr-body[data-step="watch"] .stage-try { display: none; }
.fr-body[data-step="try"] .scene-controls { display: none; }
.fr-stage .stage-try { gap: var(--space-3); }
.fr-stage .module-readout div, .fr-stage .module-chips button { background: var(--lit-warm); }
.fr-stage .module { margin: 0; box-shadow: none; padding: 0; }

@media (min-width: 768px) {
  /* The first pane runs across the top; the others sit in a row below it. */
  .fr-stage .scene-stage { grid-template-columns: repeat(var(--panes, 3), minmax(0, 1fr)); gap: 2px; background: var(--lit-edge); }
  .fr-stage .scene-stage > :first-child { grid-column: 1 / -1; }
  .fr-stage [data-scene="energy"] { --panes: 2; }
  .fr-stage .stage-try .module-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
  .fr-stage [data-scene="sun-angle"] .stage-try .module-controls > :nth-child(1) { grid-area: 1 / 1; }
  .fr-stage [data-scene="sun-angle"] .stage-try .module-controls > :nth-child(2) { grid-area: 2 / 1; }
  .fr-stage [data-scene="sun-angle"] .stage-try .module-controls > :nth-child(3) { grid-area: 1 / 2; }
  .fr-stage [data-scene="sun-angle"] .stage-try .module-controls > :nth-child(4) { grid-area: 1 / 3; }
  .fr-stage [data-scene="sun-angle"] .stage-try .module-controls > :nth-child(5) { grid-area: 2 / 3; }
  .fr-stage [data-scene="energy"] .stage-try .module-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-stage [data-scene="energy"] .stage-try .module-controls > .module-chips { grid-column: 1 / -1; }
  .fr-stage .module-readout { grid-template-columns: repeat(4, 1fr); }
}

/* A separate interactive (the heat lesson's): the chart beside its controls */
.fr-panel-try .module-head { display: none; }
.fr-panel-try .module-note { display: block; }
@media (min-width: 768px) {
  .fr-panel-try .module { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-content: start; align-items: start; }
  .fr-panel-try .module svg { grid-row: 1 / span 3; }
  .fr-panel-try .module-controls, .fr-panel-try .module-readout, .fr-panel-try .module-note { margin: 0; grid-column: 2; }
}

/* Explore: the stage is the card */
.fr-panel-explore { grid-template-rows: 1fr auto; padding: var(--space-6) var(--space-7) var(--space-3); }
.fr-card { max-width: 640px; font-size: var(--text-lg); line-height: 1.55; }
.fr-card[hidden] { display: none; }
.fr-card h3 { margin: 0 0 var(--space-3); font: 600 var(--text-xl)/1.2 var(--font-display); font-variation-settings: var(--display-soft); }
.fr-card p { margin: 0 0 var(--space-3); }
.fr-card table { font-size: var(--text-sm); border-collapse: collapse; width: 100%; max-width: 480px; }
.fr-card td, .fr-card th { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--lit-edge); text-align: left; }
.fr-card-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--lit-edge); padding-top: var(--space-3); }
.fr-card-nav button { padding: var(--space-2) var(--space-5); background: var(--lit-warm); }
.fr-card-nav button:disabled { opacity: 0.35; cursor: default; }
.fr-card-pos { font-size: var(--text-sm); font-weight: 800; color: var(--ink-muted); }

/* Explain */
.fr-panel-explain { align-content: start; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.fr-question { margin: 0; font-size: var(--text-xl); line-height: 1.25; color: var(--ink); }
.fr-explain-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-muted); }
.fr-explain-foot .primary { width: auto; font-size: var(--text-md); padding: var(--space-3) var(--space-5); }
.fr-pointer { grid-column: 2; justify-self: start; font-size: var(--text-md); padding: var(--space-2) var(--space-4); background: transparent; color: var(--on-sky); border: 2px solid var(--accent); }
.fr-body:not([data-step="explain"]) .fr-pointer { display: none; }
.explain-form textarea { min-height: 180px; }

/* A step that is not built yet: the same stage, a plain message */
.fr-soon { display: grid; align-content: center; justify-items: start; gap: var(--space-2); min-height: 260px; padding: var(--space-5) var(--space-6); background: var(--lit-warm); border-radius: var(--radius-md); }
.fr-soon h2 { margin: 0; font-size: var(--text-xl); line-height: 1.25; color: var(--ink); }
.fr-soon p { margin: 0; color: var(--ink-muted); }
.fr-try-text { color: var(--ink); }
.fr-try-text p { margin: 0; }

/* Lumen's column: narration on top, chat opens below it on request */
.fr-rail { position: sticky; top: calc(var(--bar-h) + var(--space-4)); display: grid; gap: var(--space-4); }
.fr-says { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: start; min-height: 150px; }
.fr-says .lumen { width: 84px; height: 84px; margin: -14px -10px 0 -16px; filter: drop-shadow(0 0 14px var(--lumen-glow)); }
.fr-line { font: 500 var(--text-lg)/1.45 var(--font-display); font-variation-settings: var(--display-soft); color: var(--on-sky); }
.fr-line p { margin: 0 0 var(--space-2); }
.fr-line p:last-child { margin-bottom: 0; }
@media (min-width: 1200px) {
  .fr-rail .chat { position: static; width: auto; height: 440px; box-shadow: none; }
}

/* Footer: one primary action that names the next step */
.fr-foot { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); max-width: calc((100% - var(--space-5)) * 8 / 12); }
.fr-back { background: var(--glass-dark); color: var(--on-sky); border: 1px solid var(--glass-line); }
.fr-back:disabled { opacity: 0.35; cursor: default; }
.fr-more { background: var(--lit); color: var(--ink); }
.fr-more[hidden] { display: none; }
.fr-card a { color: var(--warn); font-weight: 700; }
.fr-card ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.fr-card li { margin-bottom: var(--space-2); }
.fr-next.primary { width: auto; font-size: var(--text-md); padding: var(--space-3) var(--space-5); }
.fr-body:not(.is-framed) ~ .fr-foot { display: none; }

/* ── Session page ── */
.fr-session-top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: start; }
.fr-intro { padding: var(--space-4) var(--space-5); }
.fr-intro > :first-child { margin-top: 0; }
.fr-intro > :last-child { margin-bottom: 0; }
.fr-progress { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--glass-dark); border: 1px solid var(--glass-line); }
.fr-progress p { margin: var(--space-2) 0; }
.fr-progress-big { font: 600 var(--text-xl)/1.2 var(--font-display); font-variation-settings: var(--display-soft); }
.fr-progress-big span { font: 600 var(--text-sm) var(--font-body); color: var(--on-sky-muted); }
.fr-section-title { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xl); }
.fr-lesson-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fr-lesson-card a {
  display: grid; height: 100%; grid-template-rows: auto 1fr; text-decoration: none; background: var(--lit); color: var(--ink);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.fr-lesson-card a:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.fr-poster { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--sky-indigo); }
.fr-poster svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fr-poster-sky { fill: var(--sky-violet); }
.fr-poster-arc { fill: none; stroke: var(--lumen-gold); stroke-width: 1.6; stroke-dasharray: 3 3; }
.fr-poster-sun { fill: var(--lumen-cream); stroke: var(--lumen-gold); stroke-width: 1.5; }
.fr-poster-ridge { fill: var(--ridge-near); }
.fr-poster-play { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-button); font-size: var(--text-md); }
.is-draft .fr-poster { background: var(--sky-night); }
.fr-poster-draft { padding: var(--space-2) var(--space-4); border: 1px dashed var(--glass-line); border-radius: var(--radius-pill); color: var(--on-sky-muted); font-size: var(--text-sm); font-weight: 700; }
.fr-lesson-body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.fr-lesson-body h3 { margin: 0; font: 600 var(--text-lg)/1.25 var(--font-display); font-variation-settings: var(--display-soft); min-height: 2.5em; }
.fr-writes { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--ink-muted); }
.fr-writes.is-saved { color: var(--success); }
.fr-session-extra { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.fr-session-extra details { padding: 0 var(--space-5); }
.fr-session-extra summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 800; }
.fr-session-extra .teacher-links h2 { display: none; }

/* ── Proposal page ── */
.fr-proposal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 820px; }
.fr-section { padding: var(--space-4) var(--space-5); }
.fr-section blockquote { margin: var(--space-2) 0; font: 500 var(--text-lg)/1.5 var(--font-display); font-variation-settings: var(--display-soft); }
.fr-section.is-empty { background: var(--glass-dark); color: var(--on-sky-muted); box-shadow: none; border: 1px dashed var(--glass-line); }
.fr-section.is-empty .fr-kicker { color: var(--sky-gold); }
.fr-todo { margin: var(--space-1) 0 0; }
.fr-edit { font-size: var(--text-sm); font-weight: 800; color: var(--warn); }
.fr-team-note { margin-top: var(--space-6); color: var(--on-sky-muted); }
.fr-team-note .code { color: var(--on-sky); }

/* ── Tablet: the stage across the page, Lumen's narration under it, the chat in a side drawer ── */
@media (max-width: 1199px) {
  .fr-head { grid-template-columns: minmax(0, 1fr); }
  .team-chip { display: none; }
  .fr-body { grid-template-columns: minmax(0, 1fr); }
  .fr-rail { position: static; }
  .fr-says { min-height: 0; }
  .fr-foot { max-width: none; }
  .fr-lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-session-top { grid-template-columns: minmax(0, 1fr); }
}

/* ── Phone: the steps become a tab bar along the bottom; the scene stacks its panes ── */
@media (max-width: 767px) {
  .topbar { --bar-h: 52px; gap: var(--space-2); }
  .brand span, .topbar-proposal span, .topbar-where a:first-child, .topbar-where [aria-hidden] { display: none; }
  .topbar-where { flex: 1; }
  .topbar-where a:nth-of-type(2), .topbar-where [aria-current] { display: inline; }
  .topbar-proposal { margin-left: 0; padding: var(--space-2) var(--space-3); }
  .page { padding: var(--space-4) var(--space-3) 120px; }
  .fr-head h1 { font-size: var(--text-xl); }
  .fr-steps {
    position: fixed; z-index: 25; left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
    background: var(--sky-night); box-shadow: var(--shadow-card);
  }
  .fr-steps button { flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-1); font-size: var(--text-xs); }
  .fr-steps .opt { display: none; }
  .fr-stage { padding: var(--space-2); border-radius: var(--radius-md); }
  .js .fr-panel { min-height: 0; }
  .fr-panel-explore { padding: var(--space-4); }
  .fr-panel-explain { padding: var(--space-3); }
  .fr-soon { padding: var(--space-4); }
  .fr-card { font-size: var(--text-md); }
  /* Lumen's narration stays in view above the tab bar while the panes scroll past. */
  .fr-rail { position: sticky; bottom: 90px; z-index: 5; }
  .fr-says { min-height: 0; align-items: center; padding: var(--space-2) var(--space-3); background: var(--sky-night); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .fr-says .lumen { width: 52px; height: 52px; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-3)); }
  .fr-line { font-size: var(--text-sm); }
  .fr-foot { margin-bottom: var(--space-4); }
  .fr-lesson-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── One Lumen on a lesson page (record 5dhi/R1, P18). Lumen stands beside its words, so the top bar
   shows no second and third one. ── */
.lesson-page .brand .lumen, .lesson-page .ask-lumen .lumen { display: none; }
.lesson-page .ask-lumen { padding: 0 var(--space-4); }
.fr-ask, .fr-deck-dots { display: none; }

/* ── The lesson on a phone (record 5dhi/R1, P18): the whole Watch step in one view.
   The small panes share one place and the one the narration lights is on top. Lumen, its words and the
   four steps are one bar along the bottom, and a tap on Lumen opens the chat. ── */
@media (max-width: 767px) {
  .lesson-page .brand, .lesson-page .ask-lumen { display: none; }
  .lesson-page .topbar-where a:nth-of-type(2)::before { content: "‹ "; }
  .lesson-page .topbar .lumen-sound { margin: 0; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
  .lesson-page .page { padding-top: var(--space-2); padding-bottom: 160px; }
  .lesson-page .fr-head { margin-bottom: var(--space-2); gap: 0; }
  .lesson-page .fr-head h1, .lesson-page .fr-kicker-row .fr-kicker { display: none; }

  .js .fr-stage .scene-stage { grid-template-columns: minmax(0, 1fr); }
  .js .fr-stage .scene-stage > svg:not(:first-child) { grid-area: 2 / 1; visibility: hidden; max-height: max(150px, calc(100dvh - 500px)); }
  .js .fr-stage .scene-stage > svg.is-shown { visibility: visible; }
  .fr-deck-dots { grid-area: 3 / 1; display: flex; justify-content: center; gap: var(--space-2); height: 20px; }
  .fr-deck-dots button { width: 28px; height: 20px; padding: 0; border-radius: 0; background: none; display: grid; place-items: center; }
  .fr-deck-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-sky-muted); opacity: 0.6; }
  .fr-deck-dots button[aria-pressed="true"]::before { width: 18px; border-radius: var(--radius-pill); background: var(--accent); opacity: 1; }
  .fr-deck-dots button:hover { transform: none; }

  /* Above the step bar, so the chat that opens from here covers it. */
  .fr-rail { position: fixed; z-index: 26; top: auto; left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + 44px); }
  .fr-says, .fr-says.is-staged {
    grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--space-2); align-items: start; padding: var(--space-2) var(--space-3) var(--space-1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; box-shadow: none;
  }
  .fr-says .lumen { grid-area: 1 / 1; width: 48px; height: 48px; margin: calc(-1 * var(--space-1)) 0 0; cursor: pointer; }
  .fr-ask { display: block; grid-area: 2 / 1; justify-self: center; margin-top: calc(-1 * var(--space-1)); padding: 0 var(--space-2); font-size: var(--text-xs); line-height: 1.5; background: var(--accent); color: var(--accent-ink); }
  /* Three lines of Lumen's words. A longer line moves up by itself at reading pace (lesson-frame.js). */
  .fr-line { grid-area: 1 / 2 / span 2; font-size: var(--text-sm); line-height: 1.3; height: 3.9em; overflow-y: auto; scrollbar-width: none; }
  .fr-body[data-step="explain"] .fr-line { height: auto; min-height: 3.9em; }
  .fr-body[data-step="explain"] .fr-line { max-height: 9.1em; }
  .fr-says .fr-pointer { grid-column: 1 / -1; justify-self: stretch; margin: var(--space-1) 0; font-size: var(--text-sm); }
  .fr-steps { height: 44px; padding: 0 var(--space-1) var(--space-1); border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 0; box-shadow: none; }
  .fr-steps button { flex-direction: row; gap: var(--space-1); padding: 0; font-size: var(--text-xs); }
  .fr-steps .n { width: 20px; height: 20px; font-size: var(--text-xs); }
  /* The step bar moves between Watch and Try, so the Back and Next buttons show only where they lead on. */
  .fr-back, .fr-body[data-step="watch"] ~ .fr-foot, .fr-body[data-step="try"] ~ .fr-foot { display: none; }
  .fr-foot { justify-content: flex-end; }
  .fr-steps button[data-done="true"] .n::after { font-size: var(--text-xs); }
}