/* Learn-page hero preview (#1957): a small sample of the lesson's first
   exhibit, drawn in the lesson player's own card styles. The card anatomy
   (.lx-card header / body / footer), the equation step rows (.lx-step) and
   the tone palette are mirrored from public/css/caseace.css; the drift pin
   is server/test/learn-preview.test.js. The sample is baked into the page
   HTML, so the card paints with the page: no fetch, no layout shift. The
   lines reveal in sequence (--i sets each item's beat) and a reduced-motion
   reader gets the fully revealed card with no animation. Products.css owns
   the hero grid (.p-hero-shot) and the browser-chrome frame. */

.learn-preview .p-shot-stage{
  min-height:340px;padding:22px;display:flex;align-items:center;
}
.learn-preview .p-shot-stage > *{min-width:0}

.lp-card{
  width:100%;border:1px solid rgba(13,27,22,.14);border-radius:14px;
  background:#fff;overflow:hidden;color:#0d1b16;
}
.lp-head{padding:12px 18px 10px;border-bottom:1px solid rgba(13,27,22,.12)}
.lp-kicker{
  margin:0 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2,#4d5b54);
}
.lp-card h2{
  margin:0;font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.25;
  color:#0d1b16;overflow-wrap:anywhere;
}
.lp-body{list-style:none;margin:0;padding:14px 16px;display:grid;gap:10px}

.lp-line{
  margin:0;padding-left:10px;border-left:3px solid transparent;
  font-size:14.5px;line-height:1.6;color:rgba(13,27,22,.82);overflow-wrap:anywhere;
  animation:lp-in .45s ease both;animation-delay:calc(var(--i,0) * .42s + .35s);
}
.lp-row{
  display:grid;gap:2px;margin:0;padding:10px 14px;
  border:1px solid rgba(13,27,22,.14);border-left-width:3px;border-radius:12px;
  background:#fff;overflow-wrap:anywhere;
  animation:lp-in .45s ease both;animation-delay:calc(var(--i,0) * .42s + .35s);
}
.lp-row .lp-label{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2,#4d5b54);
}
.lp-row .lp-expr{
  font-family:'Fraunces',Georgia,serif;font-size:15.5px;line-height:1.5;color:#0d1b16;
}
.lp-row .lp-val{
  font-family:'Fraunces',Georgia,serif;font-size:16.5px;font-weight:800;color:#2f6b4f;
}

/* the lesson's three tones (caseace.css: green = strong, gold = caution,
   coral = weak; plain is the neutral card) */
.lp-line[data-tone="green"]{border-left-color:#2f6b4f}
.lp-line[data-tone="gold"]{border-left-color:#b9873b}
.lp-line[data-tone="coral"]{border-left-color:#e04a4f}
.lp-row[data-tone="plain"]{border-left-color:rgba(13,27,22,.14)}
.lp-row[data-tone="green"]{border-left-color:#2f6b4f;background:rgba(47,107,79,.07)}
.lp-row[data-tone="gold"]{border-left-color:#b9873b;background:rgba(231,196,107,.18)}
.lp-row[data-tone="coral"]{border-left-color:#e04a4f;background:rgba(224,74,79,.06)}

.lp-foot-band{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;
  padding:0 16px;background:rgba(47,125,79,.07);
}
.lp-foot{margin:0;font-size:13.5px;font-weight:600;color:var(--leaf,#2f7d4f)}
.lp-start{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:13.5px;font-weight:700;color:var(--leaf,#2f7d4f);text-decoration:underline;
  text-underline-offset:3px;
}
.lp-start:focus-visible{outline:3px solid #e7c46b;outline-offset:2px;border-radius:4px}

@keyframes lp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lp-line,.lp-row{animation:none}}

@media (max-width:640px){
  .learn-preview .p-shot-stage{padding:14px}
  .lp-card h2{font-size:16.5px}
}