/* =====================================================================
   Likkle Coders — THE PYTHON WORKBOOK (v555)
   ---------------------------------------------------------------------
   Read by children, often on a phone, often on a school projector.
   So: large type, strong contrast, and code that never needs pinching
   to read. The code block keeps a dark ground in BOTH themes on purpose
   — that is what an editor looks like, and the colours stay put when a
   teacher switches theme mid-lesson.
   ===================================================================== */

.pyb { --lv: #16A34A; }

/* ---------- hero ---------- */
.pyb-hero {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px; margin-bottom: 20px;
  border-radius: var(--lct-r-lg);
  background: linear-gradient(135deg, var(--lv), color-mix(in srgb, var(--lv) 62%, #000));
  color: #fff;
}
.pyb-hero-ico { font-size: 2.6rem; line-height: 1; flex: 0 0 auto; }
.pyb-kick {
  display: inline-block; font-size: var(--lct-t-2xs); font-weight: 800;
  letter-spacing: .1em; opacity: .9; margin-bottom: .3rem;
}
.pyb-hero h2 { margin: 0 0 .35rem; font-size: var(--lct-t-2xl); color: #fff; line-height: 1.2; }
.pyb-hero p { margin: 0; font-size: var(--lct-t-sm); line-height: 1.55; opacity: .95; }

/* ---------- level picker ---------- */
.pyb-levels { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 660px){ .pyb-levels { grid-template-columns: repeat(3, 1fr); } }
.pyb-lvl {
  --c: #16A34A;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  min-height: var(--lct-tap); padding: 13px 16px; cursor: pointer; text-align: left;
  background: var(--lct-paper); border: 2px solid var(--lct-line);
  border-radius: var(--lct-r-md); font-family: inherit; color: var(--lct-ink);
  transition: border-color var(--lct-quick), background var(--lct-quick);
}
.pyb-lvl:hover { border-color: var(--c); }
.pyb-lvl.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pyb-lvl-ico { font-size: 1.4rem; }
.pyb-lvl strong { font-size: var(--lct-t-base); }
.pyb-lvl-n { font-size: var(--lct-t-xs); color: var(--lct-ink-3); font-variant-numeric: tabular-nums; }

.pyb-blurb {
  margin: 0 0 18px; font-size: var(--lct-t-sm); line-height: 1.6;
  color: var(--lct-ink-2);
}

/* ---------- activity card ---------- */
.pyb-list { display: flex; flex-direction: column; gap: 18px; }
.pyb-card {
  background: var(--lct-paper); border: 2px solid var(--lct-line);
  border-left: 6px solid var(--lv);
  border-radius: var(--lct-r-lg); padding: 18px 20px; box-shadow: var(--lct-e1);
}
.pyb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: .7rem; }
.pyb-badge {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: 46px; padding: 6px 12px; background: var(--lv); color: #fff;
  border-radius: var(--lct-r-pill); font-family: var(--lct-f-mono);
  font-weight: 800; font-size: var(--lct-t-base); font-variant-numeric: tabular-nums;
}
.pyb-title { margin: 0; font-size: var(--lct-t-lg); color: var(--lct-ink); flex: 1; line-height: 1.25; }
.pyb-chip {
  flex: 0 0 auto; padding: 4px 11px; border-radius: var(--lct-r-pill);
  font-size: var(--lct-t-2xs); font-weight: 800; white-space: nowrap;
}
.pyb-chip--live { background: var(--lct-ok-soft); color: var(--lct-ok-dk, #0f5b2a); border: 1px solid var(--lct-ok); }
.pyb-chip--real { background: var(--lct-page-2); color: var(--lct-ink-3); border: 1px solid var(--lct-line); }

.pyb-brief { margin: 0 0 .8rem; font-size: var(--lct-t-base); line-height: 1.55; color: var(--lct-ink); }
.pyb-know {
  margin: 0 0 1rem; padding: 11px 14px; background: var(--lct-info-soft, var(--lct-page-2));
  border-left: 4px solid var(--lct-info, var(--lv)); border-radius: var(--lct-r-sm);
}
.pyb-know b { display: block; font-size: var(--lct-t-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--lct-ink-3); margin-bottom: .25rem; }
.pyb-know p { margin: 0; font-size: var(--lct-t-sm); line-height: 1.55; color: var(--lct-ink-2); }

/* ---------- the code ---------- */
.pyb-codewrap { border-radius: var(--lct-r-md); overflow: hidden; margin-bottom: .9rem; }
.pyb-codebar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; background: #1e2430; color: #b9c2d0;
  font-size: var(--lct-t-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pyb-copy {
  min-height: 32px; padding: 4px 12px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--lct-r-pill); font-family: inherit; font-size: var(--lct-t-2xs); font-weight: 700;
}
.pyb-copy:hover { background: rgba(255,255,255,.22); }
/* Dark in both themes — this is an editor, and a child copying it into
   Thonny should see the same colours there. */
.pyb-code {
  margin: 0; padding: 16px 18px; background: #11151d; overflow-x: auto;
  font-family: var(--lct-f-mono); font-size: 1rem; line-height: 1.7;
  color: #e6edf3; tab-size: 4;
}
.pyb-code code { font: inherit; color: inherit; background: none; }
.pyb-kw  { color: #ff9ec4; font-weight: 700; }
.pyb-str { color: #9ae86b; }
.pyb-num { color: #ffd479; }
.pyb-com { color: #7f8ea3; font-style: italic; }
.pyb-fn  { color: #7cc7ff; }

/* ---------- run + output ---------- */
.pyb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: .8rem; }
.pyb-run {
  min-height: var(--lct-tap); padding: 10px 22px; cursor: pointer;
  background: var(--lct-ok, #16A34A); color: #fff; border: none;
  border-radius: var(--lct-r-pill); font-family: inherit;
  font-size: var(--lct-t-base); font-weight: 800;
  transition: transform var(--lct-quick), filter var(--lct-quick);
}
.pyb-run:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.pyb-run:disabled { opacity: .6; cursor: wait; }
.pyb-note { font-size: var(--lct-t-xs); color: var(--lct-ink-3); line-height: 1.5; flex: 1; min-width: 190px; }
.pyb-note--real b { color: var(--lct-ink-2); }

.pyb-out { border-radius: var(--lct-r-md); overflow: hidden; border: 1px solid var(--lct-line); }
.pyb-out-bar {
  padding: 6px 14px; background: var(--lct-page-2); color: var(--lct-ink-3);
  font-size: var(--lct-t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pyb-out pre {
  margin: 0; padding: 14px 18px; background: var(--lct-page); overflow-x: auto;
  font-family: var(--lct-f-mono); font-size: .95rem; line-height: 1.65; color: var(--lct-ink);
  white-space: pre-wrap; word-break: break-word;
}
.pyb-out.is-empty {
  padding: 12px 16px; background: var(--lct-page-2); color: var(--lct-ink-3);
  font-size: var(--lct-t-sm); border-radius: var(--lct-r-md);
}
.pyb-fallback {
  padding: 10px 14px; margin-bottom: 8px; font-size: var(--lct-t-xs); line-height: 1.5;
  background: var(--lct-gold-wash, var(--lct-page-2)); color: var(--lct-ink-2);
  border-radius: var(--lct-r-sm);
}

/* ---------- extension ---------- */
.pyb-push {
  margin-top: 1rem; padding: 12px 15px;
  background: var(--lct-gold-wash, var(--lct-page-2));
  border: 1px dashed var(--lct-gold, var(--lct-line)); border-radius: var(--lct-r-sm);
}
.pyb-push b { display: block; font-size: var(--lct-t-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--lct-ink-3); margin-bottom: .25rem; }
.pyb-push p { margin: 0; font-size: var(--lct-t-sm); line-height: 1.55; color: var(--lct-ink-2); }

@media (max-width: 520px){
  .pyb-hero { flex-direction: column; gap: 10px; padding: 18px; }
  .pyb-card { padding: 15px 14px; }
  .pyb-code { font-size: .92rem; padding: 13px 14px; }
}