/* Jalapeño lesson. Everything scoped under .jal-*. */
.jal-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jal-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.jal-hero img { width: 300px; max-width: 100%; max-height: 30vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* the pod */
.jal-stem { fill: none; stroke: #4f7d2a; stroke-width: 5; stroke-linecap: round; }
.jal-skin { fill: #2f8f3a; stroke: #16451b; stroke-width: 1.5; transition: fill .8s; }
.jal-pod.red .jal-skin { fill: #c8322b; stroke: #5a1310; }
.jal-shine { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 3; stroke-linecap: round; }
.jal-cork { fill: none; stroke: #b98b52; stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.jal-pod.corked .jal-cork { opacity: 1; }
.jal-one { display: block; }

/* two plants */
.jal-garden { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jal-plant { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 8px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.jal-plant svg { width: 100%; max-width: 130px; height: 140px; display: block; }
.jal-plant b { font-size: 14px; font-weight: 800; }
.jal-plant small { font-size: 12.5px; color: var(--dim); font-weight: 600; }
.jal-trunk { fill: none; stroke: #3f6b22; stroke-width: 5; stroke-linecap: round; }
.jal-leaf { fill: #3f9a3a; transition: fill .4s; }
.jal-leaves { transition: transform .4s; transform-box: fill-box; transform-origin: 50% 100%; }
.jal-plant svg.wilt .jal-leaf { fill: #9a9440; }
.jal-plant svg.wilt .jal-leaves { transform: scaleY(.9); }
.jal-grow { transform-box: fill-box; transform-origin: 50% 0%; transition: transform .35s, opacity .3s; opacity: 0; }
.jal-log { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; width: 100%; margin-top: 4px; }
.jal-log i { height: 8px; border-radius: 2px; background: var(--raised); transition: background .25s; }
.jal-log i.on.wet { background: #4fa8ff; }
.jal-log i.on.dry { background: #c79a5a; }
.gauge.jal-heat { width: 100%; margin-top: 4px; }

/* corking close-up */
.jal-zoom { display: flex; align-items: center; gap: 18px; padding: 10px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.jal-zoom .jal-one { width: 90px; height: 210px; }
.jal-tag { display: flex; flex-direction: column; gap: 2px; }
.jal-tag b { font-size: 20px; color: #e6bd84; }
.jal-tag span { font-size: 14px; color: var(--dim); }

/* ripening */
.jal-ripe { width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.jal-ripe .jal-one { width: 80px; height: 180px; }
.jal-ripe .jal-one.red .jal-skin { fill: #c8322b; stroke: #5a1310; }
.jal-ripe .gauge { width: 100%; }

/* the shelf */
.jal-rules { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.jal-rules div { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
.jal-rules b { color: var(--gold); }
.choices.jal-shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.choices.jal-shelf .choice { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; min-height: 150px; text-align: center; }
.choices.jal-shelf .jal-opt { width: 40px; height: 96px; }
.choices.jal-shelf span { font-size: 12.5px; line-height: 1.2; }

/* the store bin */
.jal-bin { width: 100%; max-width: 330px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px 0; padding: 14px 10px; border-radius: 18px; background: linear-gradient(#3a2a1c, #22180f); border: 1px solid rgba(201,140,27,.35); }
.jal-bin svg { width: 100%; height: 76px; transform: rotate(var(--r)); }
.jal-bin svg .jal-pod.out { transition: opacity .6s, transform .6s; }
.jal-bin.sorted svg .jal-pod.out { opacity: .15; }

@media (max-height: 700px) {
  .jal-hero img { max-height: 24vh; }
  .jal-plant svg { height: 104px; }
  .jal-zoom .jal-one { height: 170px; }
  .jal-ripe .jal-one { height: 130px; }
  .jal-bin svg { height: 60px; }
  .choices.jal-shelf .choice { min-height: 128px; }
  .choices.jal-shelf .jal-opt { height: 80px; }
}