/* ═══════════════════════════════════════════════════════════════
   lesson-kit.css — shared pieces for the step-by-step lesson pages
   (approach banner, input pickers, variables, logic box, algorithm list,
   legends, stats). Page-specific animation styles live in each page.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --lk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lk-yellow: #e3b341;
  --lk-green: #56d364;
  --lk-pink: #f778ba;
  --lk-dur: 0.55s;
}

/* ── Approach banner (shown on step 0) ── */
.approach-banner {
  background: linear-gradient(135deg, #12123a, #1a2a4a);
  border: 1px solid var(--purple); border-radius: 10px;
  padding: 14px 20px; display: flex; align-items: center; gap: 16px;
  transition: opacity 0.4s, transform 0.4s;
}
.approach-banner.hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; height: 0; padding: 0; border: none; overflow: hidden; }
.appr-icon { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
.appr-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--purple); margin-bottom: 5px; }
.appr-line1 { font-size: 1rem; font-weight: 700; color: var(--cyan); }
.appr-line2 { font-size: 0.8rem; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* ── Input picker (fields, buttons, example chips) ── */
.lk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.lk-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-field { display: inline-flex; align-items: center; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.lk-field span { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); padding: 0 8px 0 14px; white-space: nowrap; }
.lk-field input { min-width: 0; width: 170px; height: 100%; border: 0; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: .88rem; font-weight: 600; outline: none; padding-right: 12px; -moz-appearance: textfield; }
.lk-field input.narrow { width: 56px; }
.lk-field input::-webkit-inner-spin-button, .lk-field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.lk-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px #79c0ff2e; }
.lk-btn { height: 36px; padding: 0 16px; border-radius: 999px; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; cursor: pointer; border: 1px solid #79c0ff47; background: #79c0ff1a; color: var(--cyan); transition: background .2s, transform .15s; white-space: nowrap; }
.lk-btn:hover { background: #79c0ff30; }
.lk-btn:active { transform: scale(.96); }
.lk-btn.primary { background: var(--cyan); color: #04121f; border-color: var(--cyan); }
.lk-btn.primary:hover { background: #9bd1ff; }
.lk-err { font-size: .78rem; color: var(--red); min-height: 1em; }
.lk-hint { font-size: .8rem; color: var(--muted); margin: 2px 0 10px; line-height: 1.5; }
.lk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lk-chip { font-family: var(--font-mono); font-size: .72rem; padding: 5px 11px; border-radius: 999px; cursor: pointer; background: var(--bg3); border: 1px solid var(--border); color: var(--muted); transition: all .2s; }
.lk-chip:hover { color: var(--text); border-color: #79c0ff66; }
.lk-chip.active { color: var(--cyan); border-color: var(--cyan); background: #79c0ff14; }

/* ── Stage + caption ── */
.lk-stage { position: relative; }
.lk-scroll { overflow-x: auto; scrollbar-width: thin; }
.lk-caption {
  min-height: 2.8em; margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--bg3);
  font-size: .9rem; line-height: 1.55; color: var(--text); border-left: 3px solid var(--blue);
  transition: border-color .3s, background-color .3s;
}
.lk-caption .ok, .lk-ok { color: var(--lk-green); font-weight: 700; }
.lk-caption .no, .lk-no { color: var(--red); font-weight: 700; }
.lk-caption .hl { color: var(--lk-yellow); font-weight: 700; }
.lk-caption.good { border-left-color: var(--lk-green); background: #3fb95012; }
.lk-caption.bad { border-left-color: var(--red); background: #f7816612; }
.lk-caption.warn { border-left-color: var(--lk-yellow); background: #e3b34112; }
.lk-panel-title { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.lk-panel-title .em { font-size: .95rem; letter-spacing: 0; }

/* ── Legend + stat pills ── */
.lk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .74rem; color: var(--muted); }
.lk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lk-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1.5px solid; }
.lk-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lk-stat { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); padding: 4px 10px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--border); }
.lk-stat b { color: var(--text); }
.lk-stat.win b { color: var(--lk-green); }

/* ── Variables ── */
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.stbox { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; text-align: center; font-family: var(--font-mono); transition: all .35s; }
.stbox.flash { border-color: var(--cyan); background: #1a3a5a; animation: lkPop .4s ease; }
.stbox.active { border-color: var(--green); background: var(--grn-bg); animation: lkPop .4s ease; }
.stbox.elim { border-color: var(--red); background: #f7816622; }
@keyframes lkPop { 0% { transform: scale(.93); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
.st-lbl { font-size: .58rem; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; }
.st-val { font-size: 1.05rem; font-weight: 700; color: var(--cyan); word-break: break-word; }
.stbox.active .st-val { color: var(--green); }
.stbox.elim .st-val { color: var(--red); }

/* ── Logic box ── */
.logic-box { background: var(--bg3); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; padding: 11px 14px; font-size: .83rem; color: var(--text); line-height: 1.7; transition: border-color .3s, background .3s; min-height: 52px; }
.logic-box.found { border-left-color: var(--green); background: #3fb95011; }
.logic-box.narrow { border-left-color: var(--orange); background: #f0883e11; }
.logic-box.miss { border-left-color: var(--red); background: #f7816611; }
.logic-box.info { border-left-color: var(--purple); background: #bc8cff11; }
.result-banner.miss { background: #f7816622; border-color: var(--red); }
.result-banner.miss .res-h3 { color: var(--red); }

/* ── Algorithm list ── */
.algo-list { display: flex; flex-direction: column; gap: 9px; }
.al { display: flex; gap: 10px; align-items: flex-start; }
.al-num { width: 20px; height: 20px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--muted); flex-shrink: 0; margin-top: 1px; }
.al.on .al-num { background: var(--blue-bg); border-color: var(--blue); color: var(--cyan); }
.al-txt { font-size: .78rem; color: var(--muted); line-height: 1.55; }
.al.on .al-txt { color: var(--text); }
.cplx-row { display: flex; gap: 8px; margin-top: 12px; }
.cplx { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; text-align: center; }
.cplx-l { font-size: .6rem; color: var(--muted); margin-bottom: 3px; }
.cplx-v { font-size: .92rem; font-weight: 700; font-family: var(--font-mono); }

/* ── Shared token tiles (letters, numbers, indices) ── */
.lk-tile {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px;
  min-width: 0; border-radius: 9px; background: var(--bg3); border: 1.5px solid #2f3945; color: var(--text);
  font-family: var(--font-mono); font-weight: 700;
  transition: opacity .45s var(--lk-ease), transform .45s var(--lk-ease), border-color .25s, background-color .25s, box-shadow .25s, color .25s;
}
.lk-tile i { font-size: .6rem; font-style: normal; font-weight: 500; color: #4a5461; }
.lk-tile.dim { opacity: .25; }
.lk-tile.cur { border-color: var(--lk-yellow); background: #e3b3411f; box-shadow: 0 0 22px -6px #e3b341b3; transform: translateY(-3px); }
.lk-tile.good { border-color: var(--lk-green); background: #3fb95026; box-shadow: 0 0 22px -6px #56d364b3; }
.lk-tile.bad { border-color: var(--red); background: #f7816622; }
.lk-tile.sel { border-color: var(--cyan); background: #79c0ff1f; }

/* ── Little pop-in / shake helpers ── */
@keyframes lkIn { from { opacity: 0; transform: translateY(10px) scale(.8); } }
@keyframes lkShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes lkGlow { 0%, 100% { box-shadow: 0 0 0 0 #56d36400; } 50% { box-shadow: 0 0 0 6px #56d36433; } }
.lk-in { animation: lkIn .45s var(--lk-spring) both; }
.lk-shake { animation: lkShake .45s ease; }

@media (max-width: 640px) {
  .lk-field input { width: 130px; }
  .lk-form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-tile, .lk-in, .lk-shake { transition: none; animation: none; }
}