/* Shared styles for robot-car lessons. Copied into each tutorial's assets/ folder.
   Kid-friendly: big type, high contrast, colorful, fully responsive, prints cleanly. */
:root {
  --bg: #0f1226;
  --card: #1b1f3b;
  --ink: #eef1ff;
  --muted: #aab0d6;
  --accent: #ff7a1a;     /* Elegoo orange */
  --accent2: #28c2ff;    /* electric blue */
  --good: #36d399;
  --warn: #ffd23f;
  --radius: 18px;
  --maxw: 880px;
  font-size: 18px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.6;
}
header.hero {
  background: linear-gradient(135deg, #1b1f3b, #2a1840 60%, #3a1d12);
  padding: 2.4rem 1.2rem; text-align: center; border-bottom: 4px solid var(--accent);
}
header.hero .eyebrow {
  color: var(--accent2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: .8rem;
}
header.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin: .3rem 0 .4rem; }
header.hero p.sub { color: var(--muted); max-width: 40ch; margin: 0 auto; font-size: 1.05rem; }
.badges { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.badge {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; color: var(--ink);
}
.badge.time::before { content: "⏱ "; }
.badge.level::before { content: "🎯 "; }
.badge.age::before { content: "🧒 "; }

main { max-width: var(--maxw); margin: 0 auto; padding: 1.4rem 1.1rem 4rem; }
section { margin: 2.2rem 0; }
h2 { font-size: 1.5rem; border-left: 6px solid var(--accent); padding-left: .6rem; }

.parts { list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.parts li { background: var(--card); border-radius: 12px; padding: .7rem .9rem;
  border: 1px solid rgba(255,255,255,.08); }

/* Step cards */
.step { background: var(--card); border-radius: var(--radius); padding: 1.2rem 1.3rem;
  margin: 1.1rem 0; border: 1px solid rgba(255,255,255,.08); position: relative; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent);
  color: #1a1300; font-weight: 800; font-size: 1.1rem; margin-right: .5rem;
}
.step h3 { display: inline; font-size: 1.25rem; vertical-align: middle; }
.step .body { margin-top: .8rem; }
.step label.done {
  display: inline-flex; gap: .4rem; align-items: center; color: var(--muted);
  margin-top: .8rem; cursor: pointer; user-select: none; font-size: .95rem;
}
.step.checked { outline: 2px solid var(--good); }

figure { margin: 1rem 0; text-align: center; }
figure img, figure video { max-width: 100%; height: auto; border-radius: 12px;
  background: #fff; cursor: zoom-in; }
figure video { cursor: auto; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

.callout { border-radius: 12px; padding: .9rem 1.1rem; margin: 1rem 0; }
.callout.tip { background: rgba(54,211,153,.12); border-left: 5px solid var(--good); }
.callout.warn { background: rgba(255,210,63,.12); border-left: 5px solid var(--warn); }

details.trouble { background: var(--card); border-radius: 12px; padding: .6rem 1rem;
  margin: .6rem 0; border: 1px solid rgba(255,255,255,.08); }
details.trouble summary { cursor: pointer; font-weight: 600; }

footer { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.1rem 3rem;
  color: var(--muted); font-size: .85rem; border-top: 1px solid rgba(255,255,255,.1); }
footer a { color: var(--accent2); }

/* Lightbox for figures */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none;
  align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 8px; background:#fff; }

@media print {
  :root { --bg:#fff; --card:#fff; --ink:#111; --muted:#444; }
  body { color:#111; } header.hero { background:#fff; color:#111; }
  .step, .parts li, details.trouble { border:1px solid #ccc; }
  figure img { border:1px solid #ddd; }
}