/* FLAGSHIP fork styles — cook/make "show-not-tell" experiment (ONE lesson).
 * Loaded only on /mission/<flagship-lesson> alongside learner.css; no shared
 * selector is touched. Colors are existing brand tokens only (zero new hex):
 * heat/bread = --eng-yellow micro-accent · correct glow = --eng-green (action/
 * correct law) · surfaces = --eng-purple/-soft on the space background.
 * Kill switch = delete this file + the flagship conditionals in brief.ejs. */

/* ── verb-as-motion card ─────────────────────────────────────────────── */
.lf-fsm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.lf-fsm__panel {
  appearance: none;
  border: 1.5px solid var(--hairline-dark);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--eng-purple) 12%, transparent);
  color: var(--eng-white);
  padding: 14px 12px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.lf-fsm__panel:hover { border-color: color-mix(in srgb, var(--eng-purple) 55%, transparent); }
.lf-fsm__panel:active { transform: scale(0.985); }
.lf-fsm__panel.is-done { border-color: color-mix(in srgb, var(--eng-green) 45%, transparent); }
.lf-fsm__scene { width: 100%; max-width: 200px; margin: 0 auto; }
.lf-fsm__scene svg { width: 100%; height: auto; display: block; }
.lf-fsm__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--eng-white);
  margin-top: 4px;
}
.lf-fsm__meta { font-size: var(--fs-body-sm); color: var(--eng-white); opacity: 0.92; margin-top: 2px; }
.lf-fsm__meta b { color: var(--eng-yellow); }
.lf-fsm__hint { display: block; font-size: var(--fs-body-sm); opacity: 0.55; margin-top: 8px; }

/* scene parts (tokens only) */
.fs-pot { fill: color-mix(in srgb, var(--eng-purple-soft) 30%, transparent); stroke: var(--eng-white); stroke-width: 3; }
.fs-potrim { fill: var(--eng-space); stroke: var(--eng-white); stroke-width: 3; }
.fs-pothandle { stroke: var(--eng-white); stroke-width: 3; stroke-linecap: round; fill: none; }
.fs-stove, .fs-counter { fill: color-mix(in srgb, var(--eng-white) 22%, transparent); }
.fs-heat { stroke: var(--eng-yellow); stroke-width: 3; stroke-linecap: round; fill: none; }
.fs-steam { stroke: color-mix(in srgb, var(--eng-white) 75%, transparent); stroke-width: 3; stroke-linecap: round; fill: none; }
.fs-bread { fill: color-mix(in srgb, var(--eng-yellow) 68%, transparent); }
.fs-fill { fill: color-mix(in srgb, var(--eng-purple-soft) 80%, transparent); }

/* CSS keyframe fallback when GSAP is absent (class re-added per tap) */
.lf-fsm__scene.is-playing .fs-steam, .lf-fsm__scene.is-playing .fs-anim-rise { animation: fs-steam-rise 1.4s var(--ease-out) 2; }
.lf-fsm__scene.is-playing .fs-heat, .lf-fsm__scene.is-playing .fs-anim-flicker { animation: fs-heat-flicker 0.7s var(--ease-out) 4; }
.lf-fsm__scene.is-playing .fs-piece--base { animation: fs-in-left 0.5s var(--ease-out) both; }
.lf-fsm__scene.is-playing .fs-piece--mid { animation: fs-in-right 0.5s var(--ease-out) 0.2s both; }
.lf-fsm__scene.is-playing .fs-piece--top { animation: fs-in-top 0.5s var(--ease-out) 0.4s both; }
.lf-fsm__scene.is-playing .fs-anim-pop { animation: fs-pop-in 0.5s var(--ease-out) 0.25s both; }
.lf-fsm__scene.is-playing .fs-anim-seq { animation: fs-seq-in 0.6s var(--ease-out) 0.15s both; }
/* CSS can't read data-dx — the move degrades to a fade-in (teaching never
 * depends on the travel; the label reveal carries it) */
.lf-fsm__scene.is-playing .fs-anim-move { animation: fs-seq-in 0.7s var(--ease-out) 0.2s both; }
@keyframes fs-steam-rise {
  0% { opacity: 0; transform: translateY(10px); }
  40% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes fs-heat-flicker {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes fs-in-left { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes fs-in-right { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes fs-in-top { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: none; } }
@keyframes fs-pop-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes fs-seq-in { from { opacity: 0.15; } to { opacity: 1; } }

/* ── techmatch card (word ↔ picture pairs; iterate #2 FIX-1) ─────────── */
.lf-ftm { margin-top: 12px; }
.lf-ftm__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.lf-ftm__tile {
  appearance: none;
  border: 1.5px dashed var(--hairline-dark);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--eng-purple) 10%, transparent);
  color: var(--eng-white);
  padding: 8px 6px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms var(--ease-out);
}
.lf-ftm__tile:not(.is-done):hover { border-color: color-mix(in srgb, var(--eng-purple) 55%, transparent); }
.lf-ftm__tile.is-done {
  border-style: solid;
  border-color: color-mix(in srgb, var(--eng-green) 55%, transparent);
  cursor: default;
}
.lf-ftm__scene { width: 84px; margin: 0 auto; }
.lf-ftm__scene svg { width: 100%; height: auto; display: block; }
.lf-ftm__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--eng-white);
  opacity: 0.55;
}
.lf-ftm__tile.is-done .lf-ftm__word { opacity: 1; color: var(--eng-yellow); }
.lf-ftm__label { font-size: var(--fs-body-sm); color: var(--eng-white); opacity: 0.9; }

/* techmatch scene parts */
.fs-bubble { fill: color-mix(in srgb, var(--eng-white) 70%, transparent); }
.fs-food { fill: color-mix(in srgb, var(--eng-purple-soft) 75%, transparent); }
.fs-ovenwin { fill: var(--eng-space); stroke: var(--eng-white); stroke-width: 2.5; }

/* ── Tier-3 shared scene parts (word blocks · svg text · badges) ──────── */
.fs-wordblock { fill: color-mix(in srgb, var(--eng-purple-soft) 28%, transparent); stroke: var(--eng-white); stroke-width: 2.5; }
.fs-badge { fill: var(--eng-yellow); stroke: var(--eng-space); stroke-width: 2; }
.fs-ghost { fill: none; stroke: color-mix(in srgb, var(--eng-white) 45%, transparent); stroke-width: 2; stroke-dasharray: 4 4; }
.fs-path-dash { fill: none; stroke: color-mix(in srgb, var(--eng-white) 55%, transparent); stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linecap: round; }
.fs-figure { fill: color-mix(in srgb, var(--eng-white) 70%, transparent); }
.fs-bubbleBox { fill: color-mix(in srgb, var(--eng-white) 10%, transparent); stroke: var(--eng-white); stroke-width: 2; }
.fs-txt {
  fill: var(--eng-white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}
.fs-txt--sm { font-size: 11px; }
.fs-txt--big { font-size: 20px; font-weight: 800; }
.fs-txt--hi { fill: var(--eng-yellow); }
.fs-txt--dim { opacity: 0.6; }
.fs-txt--badge {
  fill: var(--eng-space);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
}
/* scanning scene parts (flagship #2) */
.fs-line { fill: color-mix(in srgb, var(--eng-white) 30%, transparent); }
.fs-scanbar { fill: color-mix(in srgb, var(--eng-yellow) 30%, transparent); }
.fs-scantarget { fill: color-mix(in srgb, var(--eng-yellow) 18%, transparent); stroke: var(--eng-yellow); stroke-width: 2; }
.fs-lens { fill: none; stroke: var(--eng-white); stroke-width: 2.5; stroke-linecap: round; }

/* calendar scene parts (flagship #3) — green check = "อยู่ในเกณฑ์" (correct law) */
.fs-check { fill: none; stroke: var(--eng-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* generic animation hooks: sensible transform origin for CSS + GSAP */
.fs-anim-pop, .fs-anim-move, .fs-anim-seq { transform-box: fill-box; transform-origin: 50% 50%; }

/* ── drag-onto-scene card ────────────────────────────────────────────── */
.lf-fsd { margin-top: 12px; }
.lf-fsd__zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.lf-fsd__zone {
  border: 1.5px dashed var(--hairline-dark);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--eng-purple) 10%, transparent);
  padding: 12px 10px;
  min-height: 168px;
  text-align: center;
  transition: border-color 160ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.lf-fsd__scene { width: 80px; margin: 0 auto 2px; }
.lf-fsd__scene svg { width: 100%; height: auto; display: block; }
.lf-fsd__zlabel { font-size: var(--fs-body-sm); color: var(--eng-white); opacity: 0.92; margin-bottom: 8px; }
.lf-fsd__zlabel b { font-family: var(--font-display); font-size: 1.05rem; color: var(--eng-yellow); margin-right: 4px; }
.lf-fsd__zone.is-glow {
  border-color: var(--eng-green);
  box-shadow: 0 0 0 1.5px var(--eng-green), 0 0 22px color-mix(in srgb, var(--eng-green) 45%, transparent);
  animation: fsd-glow-fade 0.9s var(--ease-out) forwards;
}
@keyframes fsd-glow-fade {
  from { box-shadow: 0 0 0 1.5px var(--eng-green), 0 0 22px color-mix(in srgb, var(--eng-green) 45%, transparent); }
  to { box-shadow: 0 0 0 0 transparent; }
}
.lf-fsd__list { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.lf-fsd__placed {
  border: 1.5px solid color-mix(in srgb, var(--eng-green) 55%, transparent);
  background: color-mix(in srgb, var(--eng-green) 14%, transparent);
  color: var(--eng-white);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  padding: 5px 10px;
}
.lf-fsd__pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.lf-fsd__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--hairline-dark);
  background: color-mix(in srgb, var(--eng-white) 8%, transparent);
  color: var(--eng-white);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: var(--fs-body-sm);
  cursor: grab;
  touch-action: none; /* pointer-drag on touch; swipe is suppressed on chips */
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 160ms var(--ease-out);
}
.lf-fsd__emoji { font-size: 1.25rem; line-height: 1; }
.lf-fsd__chip.is-armed { border-color: var(--eng-purple); box-shadow: 0 0 0 1.5px var(--eng-purple); }
.lf-fsd__chip.is-dragging {
  cursor: grabbing;
  border-color: var(--eng-purple);
  z-index: 30;
  position: relative;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--eng-space) 70%, transparent);
}
.lf-fsd.is-complete .lf-fsd__zone { border-style: solid; }

/* ── responsive (390 stays 2-up with tighter padding) ────────────────── */
@media (max-width: 480px) {
  .lf-fsm { gap: 8px; }
  .lf-fsm__panel { padding: 10px 8px 10px; }
  .lf-fsm__word { font-size: 1.25rem; }
  .lf-fsd__zones { gap: 8px; }
  .lf-fsd__zone { min-height: 148px; padding: 10px 6px; }
  .lf-fsd__scene { width: 64px; }
  .lf-ftm__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lf-ftm__scene { width: 72px; }
}

/* ── FD drag affordance (flagship scenedrag + techmatch) ────────────────
   Counterpart of the learner.css block (generic .lf-iv--dnd / .lf-tm);
   defined here because the landing demo loads flagship.css WITHOUT
   learner.css. Same three layers: idle nudge on the first chip until the
   box is touched → faint dashed ✋ ghost rising pool→zones (drag surfaces
   only; asserts no answer) → pulsing green targets while a chip is armed.
   State classes come from lesson-flow-flagship.js. */
@keyframes lf-fsd-nudge {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 color-mix(in srgb, var(--eng-green) 0%, transparent); }
  50% { transform: translateY(-3px); box-shadow: 0 0 10px 0 color-mix(in srgb, var(--eng-green) 25%, transparent); }
}
.lf-fsd:not(.is-touched):not(.is-complete) .lf-fsd__pool .lf-fsd__chip:first-child,
.lf-ftm:not(.is-touched):not(.is-complete) .lf-iv__pool .lf-iv__chip:first-child {
  animation: lf-fsd-nudge 2.2s ease-in-out infinite;
}
@keyframes lf-fsd-target {
  0%, 100% { border-color: color-mix(in srgb, var(--eng-green) 40%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--eng-green) 0%, transparent); }
  50% { border-color: var(--eng-green); box-shadow: 0 0 12px 0 color-mix(in srgb, var(--eng-green) 22%, transparent); }
}
.lf-fsd.has-armed .lf-fsd__zone {
  animation: lf-fsd-target 1.4s ease-in-out infinite;
}
.lf-ftm.has-armed .lf-ftm__tile:not(.is-done) {
  animation: lf-fsd-target 1.4s ease-in-out infinite;
}
@keyframes lf-fsd-ghost {
  0% { opacity: 0; transform: translate(-50%, 0); }
  18% { opacity: 0.5; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-50%, -84px); }
}
.lf-fsd__pool { position: relative; }
.lf-fsd:not(.is-touched):not(.is-complete) .lf-fsd__pool::after {
  content: '✋';
  position: absolute;
  left: 50%;
  top: -6px;
  padding: 3px 10px;
  border: 1.5px dashed color-mix(in srgb, var(--eng-white) 45%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  animation: lf-fsd-ghost 3.6s ease-in-out infinite;
}

/* ── reduced motion: scenes render complete; no animation dependency ─── */
@media (prefers-reduced-motion: reduce) {
  .lf-fsm__scene.is-playing .fs-steam,
  .lf-fsm__scene.is-playing .fs-heat,
  .lf-fsm__scene.is-playing .fs-piece--base,
  .lf-fsm__scene.is-playing .fs-piece--mid,
  .lf-fsm__scene.is-playing .fs-piece--top,
  .lf-fsm__scene.is-playing .fs-anim-rise,
  .lf-fsm__scene.is-playing .fs-anim-flicker,
  .lf-fsm__scene.is-playing .fs-anim-pop,
  .lf-fsm__scene.is-playing .fs-anim-seq,
  .lf-fsm__scene.is-playing .fs-anim-move { animation: none; }
  .lf-fsd__zone.is-glow { animation: none; box-shadow: 0 0 0 1.5px var(--eng-green); }
  .lf-fsm__panel, .lf-fsd__zone, .lf-fsd__chip { transition: none; }
  /* FD drag affordance: nudge + ghost die; armed ring stays static green */
  .lf-fsd:not(.is-touched):not(.is-complete) .lf-fsd__pool .lf-fsd__chip:first-child,
  .lf-ftm:not(.is-touched):not(.is-complete) .lf-iv__pool .lf-iv__chip:first-child,
  .lf-fsd:not(.is-touched):not(.is-complete) .lf-fsd__pool::after,
  .lf-fsd.has-armed .lf-fsd__zone,
  .lf-ftm.has-armed .lf-ftm__tile:not(.is-done) { animation: none; }
  .lf-fsd:not(.is-touched):not(.is-complete) .lf-fsd__pool::after { content: none; }
  .lf-fsd.has-armed .lf-fsd__zone,
  .lf-ftm.has-armed .lf-ftm__tile:not(.is-done) { border-color: var(--eng-green); }
}