/* ============================================================
   BitWithBite — Scratch Visual Blocks Theme
   Renders kid-friendly, Scratch-3.0-style code blocks in pure CSS.
   Category colors match the real Scratch editor.
   ============================================================ */

/* ---------- Category color variables ---------- */
.sb-motion    { --c:#4C97FF; --cd:#3373CC; --cl:#7cb5ff; }
.sb-looks     { --c:#9966FF; --cd:#774DCB; --cl:#b28aff; }
.sb-sound     { --c:#CF63CF; --cd:#BD42BD; --cl:#de8ade; }
.sb-events    { --c:#FFBF00; --cd:#CC9900; --cl:#ffd54d; }
.sb-control   { --c:#FFAB19; --cd:#CF8B17; --cl:#ffc45e; }
.sb-sensing   { --c:#5CB1D6; --cd:#2E8EB8; --cl:#8ac8e3; }
.sb-operators { --c:#59C059; --cd:#389438; --cl:#84d184; }
.sb-variables { --c:#FF8C1A; --cd:#DB6E00; --cl:#ffa94d; }
.sb-myblocks  { --c:#FF6680; --cd:#FF3355; --cl:#ff8fa3; }
.sb-pen       { --c:#0FBD8C; --cd:#0B8E69; --cl:#3dd2a8; }

/* ---------- The Scratch workspace (light panel on dark site) ---------- */
.sb-stage{
  background:#f2f6fb;
  background-image:radial-gradient(rgba(76,151,255,.14) 1.2px,transparent 1.2px);
  background-size:22px 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
  padding:1.1rem 1.2rem 1.3rem;
  margin:1.4rem 0;
  overflow-x:auto;
}
.sb-stage *{font-family:'DM Sans',sans-serif}

/* ---------- Sprite header card (which sprite owns this code) ---------- */
.sb-sprite{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:2px solid #e2e9f4;border-radius:12px;
  padding:.45rem .9rem .45rem .55rem;margin-bottom:.9rem;
  box-shadow:0 2px 8px rgba(30,60,120,.10);
}
.sb-sprite-ic{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#e8f1ff,#d6e6ff);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;
}
.sb-sprite-name{font-weight:800;font-size:.85rem;color:#1d2a44;line-height:1.2}
.sb-sprite-sub{font-size:.66rem;color:#7a8cab;font-weight:600}

/* ---------- Script column ---------- */
.sb-script{display:flex;flex-direction:column;align-items:flex-start;min-width:min-content}

/* ---------- Basic stack block ---------- */
.sb-block{
  position:relative;
  background:var(--c);
  border:1px solid var(--cd);
  color:#fff;
  font-weight:700;font-size:.86rem;line-height:1;
  padding:.55rem .9rem;
  border-radius:6px;
  margin-bottom:3px;
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;
  box-shadow:0 2px 0 var(--cd);
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}
/* puzzle tab under each block */
.sb-block::after{
  content:'';position:absolute;left:14px;bottom:-4px;width:22px;height:5px;
  background:var(--c);border:1px solid var(--cd);border-top:none;
  border-radius:0 0 5px 5px;
}
/* hat block (script starter, e.g. when flag clicked) */
.sb-hat{border-radius:22px 22px 6px 6px;padding-top:.7rem}
/* cap block (script ender, e.g. stop all) — no tab below */
.sb-cap::after{display:none}
.sb-cap{border-radius:6px 6px 10px 10px}

/* ---------- C-blocks (forever / repeat / if) ---------- */
.sb-c{position:relative;margin-bottom:3px;min-width:min-content}
.sb-c-top{
  position:relative;
  background:var(--c);border:1px solid var(--cd);
  color:#fff;font-weight:700;font-size:.86rem;
  padding:.55rem .9rem;border-radius:6px 6px 0 0;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.15);
  min-width:140px;
}
.sb-c-body{
  border-left:16px solid var(--c);
  padding:4px 0 4px 6px;
  margin-left:1px;
  box-shadow:inset 1px 0 0 var(--cd);
}
.sb-c-end{
  width:110px;height:14px;
  background:var(--c);border:1px solid var(--cd);
  border-radius:0 6px 6px 6px;margin-left:1px;
  box-shadow:0 2px 0 var(--cd);
}
/* else divider inside if/else */
.sb-c-mid{
  background:var(--c);border:1px solid var(--cd);
  color:#fff;font-weight:700;font-size:.82rem;
  padding:.4rem .9rem;display:inline-flex;
  margin-left:1px;border-radius:0 6px 6px 0;
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}

/* ---------- Inputs inside blocks ---------- */
/* round white number/text input */
.sb-in{
  background:#fff;color:#1d2a44;
  border-radius:999px;padding:.22rem .6rem;
  font-size:.8rem;font-weight:700;line-height:1;
  border:1px solid var(--cd);
  text-shadow:none;min-width:2ch;text-align:center;
}
/* dropdown input (darker shade of the block color) */
.sb-dd{
  background:var(--cd);color:#fff;
  border-radius:999px;padding:.22rem .65rem;
  font-size:.78rem;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;gap:5px;
}
.sb-dd::after{content:'▾';font-size:.7rem;opacity:.85}
/* boolean (pointy) input */
.sb-bool{
  background:var(--cd);color:#fff;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
  padding:.25rem 1rem;font-size:.76rem;font-weight:700;line-height:1;
}
/* boolean slot holding a sensing/operator block */
.sb-block .sb-bool.sb-nest{background:var(--c);filter:brightness(1.05)}

/* ---------- Kid-friendly caption under a script ---------- */
.sb-note{
  margin-top:.9rem;
  background:#fff;border:2px solid #e2e9f4;border-radius:14px;
  padding:.75rem 1rem;
  font-size:.82rem;color:#38507e;line-height:1.65;font-weight:500;
  position:relative;max-width:560px;
  box-shadow:0 2px 8px rgba(30,60,120,.08);
}
.sb-note strong{color:#1d2a44}
.sb-note::before{
  content:'';position:absolute;top:-9px;left:26px;width:14px;height:14px;
  background:#fff;border-left:2px solid #e2e9f4;border-top:2px solid #e2e9f4;
  transform:rotate(45deg);
}

/* ---------- Block palette (single block + kid explanation rows) ---------- */
.sb-palette{display:flex;flex-direction:column;gap:9px;margin:1.2rem 0}
.sb-prow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#f2f6fb;border-radius:12px;padding:.65rem .9rem;
  border:1px solid rgba(255,255,255,.14);
}
.sb-prow .sb-block{margin-bottom:0}
.sb-prow .sb-block::after{display:none}
.sb-pexp{font-size:.8rem;color:#38507e;font-weight:600;line-height:1.5;flex:1;min-width:180px}
.sb-pexp em{font-style:normal;color:#7a8cab;font-weight:500}

/* ---------- Inline mini-block (for use inside sentences) ---------- */
.sbi{
  display:inline-block;
  background:var(--c,#4C97FF);
  border:1px solid var(--cd,#3373CC);
  color:#fff !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:.72rem !important;font-weight:700;
  padding:2px 9px !important;border-radius:6px !important;
  line-height:1.5;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.15);
  vertical-align:middle;
}

/* ---------- Workspace label bar (like the "Code" tab in Scratch) ---------- */
.sb-bar{
  display:flex;align-items:center;gap:8px;margin-bottom:.8rem;
}
.sb-bar-tab{
  background:#4C97FF;color:#fff;font-weight:800;font-size:.7rem;
  border-radius:999px;padding:4px 14px;letter-spacing:.04em;
}
.sb-bar-title{font-size:.78rem;font-weight:700;color:#5a719b}

/* ---------- Category legend chips ---------- */
.sb-legend{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}
.sb-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--glass,rgba(255,255,255,.03));
  border:1px solid var(--rim,rgba(255,255,255,.08));
  border-radius:999px;padding:5px 12px;
  font-size:.72rem;font-weight:700;color:var(--txt2,#8ca8d8);
}
.sb-chip i{width:12px;height:12px;border-radius:4px;background:var(--c);display:inline-block;border:1px solid var(--cd)}

@media(max-width:600px){
  .sb-stage{padding:.8rem .7rem 1rem}
  .sb-block,.sb-c-top{font-size:.78rem;padding:.5rem .7rem}
}