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