/* =========================================================
   Likkle Coders — SCRATCHJR-STYLE CODING BLOCKS (v455)
   Drawn entirely in CSS so the notch reflows around whatever text
   the block carries. See js/lib/lc-blocks.js for why not images.
   ========================================================= */

.lcb{
  /* one hue per category, set by the modifier below */
  --lcb-c:#2196F3;
  --lcb-dark:rgba(0,0,0,.22);

  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left; cursor:pointer;
  padding:14px 16px 14px 14px;
  border:0; border-radius:12px;
  background:var(--lcb-c);
  /* Label colour is set PER CATEGORY below, not globally white.
     These are bright saturated hues and white on them measured
     1.9-3.0:1 — under the 4.5 threshold, and hardest on exactly the
     children who already struggle to read. Dark ink wins on seven of
     the eight, several by more than 7:1. */
  color:var(--lcb-ink,#14202B);
  font-family:inherit; font-weight:800; font-size:.95rem;
  line-height:1.35;
  /* the chunky ScratchJr feel: a solid bottom edge, not a blur */
  box-shadow:0 4px 0 var(--lcb-dark), 0 8px 16px rgba(11,37,69,.16);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* interlocking notch: a socket on top, a matching tab underneath.
   Both are pseudo-elements so they follow the block at any width. */
.lcb::before,
.lcb::after{
  content:''; position:absolute; left:26px;
  width:26px; height:9px; background:inherit;
}
.lcb::before{ top:-1px; border-radius:0 0 8px 8px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.13); }
.lcb::after { bottom:-9px; border-radius:0 0 8px 8px; box-shadow:0 4px 0 var(--lcb-dark); }

/* PALETTE IS SHARED WITH THE BLOCKS STUDIO (css/v7-jamaica.css
   .lb-fam-*). The studio already had a MakeCode-style block look, so
   these deliberately reuse its exact hues — two block surfaces in one
   app must not teach two different colour languages. Change one, change
   both. */
/* measured contrast of the label against its own block is in brackets */
.lcb--trigger{ --lcb-c:#FFAB19; border-radius:22px 22px 12px 12px; }  /* events 8.7:1 */
.lcb--motion { --lcb-c:#4DBBC3; }                                     /* basic  7.3:1 */
.lcb--looks  { --lcb-c:#A26EF3; }                                     /* looks  4.8:1 */
.lcb--sound  { --lcb-c:#F472B6; }                                     /* music  6.2:1 */
.lcb--control{ --lcb-c:#6ABE3F; }                                     /* loops  7.1:1 */
.lcb--pen    { --lcb-c:#00A6A6; }                                     /*        5.5:1 */
.lcb--sensing{ --lcb-c:#2F80ED; }                                     /*        4.3:1 */
/* Red is the one hue where white beats dark ink, but #E63946 only
   reached 4.17:1 — under AA on the STOP block. Darkened to clear it. */
.lcb--end    { --lcb-c:#D32F2F; --lcb-ink:#fff; }                     /* stop   4.98:1 */
.lcb--end .lcb-n{ background:rgba(255,255,255,.28); }
/* a hat block starts a script, so it has no socket to receive one */
.lcb--trigger::before{ display:none; }
.lcb--end::after{ display:none; }

.lcb-ico{ font-size:1.3rem; line-height:1; flex:0 0 auto; }
.lcb-txt{ flex:1; min-width:0; }
.lcb-n{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:.78rem; font-weight:900;
  /* dark wash, not white — the label is now dark ink, and a white pill
     behind dark text washed the number out */
  background:rgba(0,0,0,.14);
}

.lcb:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.05); }
/* press it and it physically sinks onto its own shadow */
.lcb:active:not(:disabled){ transform:translateY(4px); box-shadow:0 0 0 var(--lcb-dark); }
.lcb:focus-visible{ outline:3px solid #0B2545; outline-offset:3px; }

/* A used block must stay READABLE. The old rule dropped it to 35%
   opacity, which turned an amber block into a blank tan bar — the
   child could no longer see which block they had already placed. */
.lcb.is-used{
  cursor:default;
  background:#cbd5e1; color:#475569;
  box-shadow:0 3px 0 #94a3b8;
  /* A used block is a real <button disabled>, and v9-polish.css sets a
     global button:disabled{opacity:.55}. Without stating opacity here
     that global wins and washes the label out — reintroducing the very
     problem this rule exists to fix. Grey says "already placed";
     legible grey says it without hiding the words. */
  opacity:1;
}
.lcb.is-used .lcb-n{ background:rgba(0,0,0,.12); }
.lcb.is-used::before,.lcb.is-used::after{ background:#cbd5e1; }
.lcb.is-used::after{ box-shadow:0 3px 0 #94a3b8; }

/* blocks stacked into a script sit flush so the notches read as joined */
.lcb--stacked{ margin-bottom:9px; }
.lcb--stacked:last-child{ margin-bottom:0; }

/* ---------- the two columns ---------- */
.lcb-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media(max-width:600px){ .lcb-cols{ grid-template-columns:1fr; } }

.lcb-col h4{
  display:flex; align-items:center; gap:7px; margin:0 0 10px;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:#5b6880;
}
.lcb-tray,.lcb-script{
  display:flex; flex-direction:column; gap:9px;
  min-height:120px; padding:14px; border-radius:16px;
}
.lcb-tray{ background:#f1f5f9; border:2px dashed #cbd5e1; }
/* the script area reads as a workspace you drop into */
.lcb-script{ background:#eef6ff; border:2px solid #bfdbfe; }
.lcb-hint{ margin:auto; color:#7b8798; font-size:.88rem; text-align:center; line-height:1.5; }

@media (prefers-color-scheme: dark){
  .lcb-tray{ background:#161d2c; border-color:#2a3446; }
  .lcb-script{ background:#141d2e; border-color:#274060; }
  .lcb-col h4{ color:#93a1bd; }
  .lcb.is-used{ background:#334155; color:#94a3b8; box-shadow:0 3px 0 #1e293b; }
  .lcb.is-used::before,.lcb.is-used::after{ background:#334155; }
}

@media (prefers-reduced-motion: reduce){
  .lcb{ transition:none; }
  .lcb:hover:not(:disabled),.lcb:active:not(:disabled){ transform:none; }
}

/* =========================================================
   MICRO:BIT / MAKECODE CATEGORIES (v460)
   Jamaican primary schools use the BBC micro:bit, so the second
   Block Coder track mirrors MakeCode's toolbox groups. Hues are
   MakeCode-inspired rather than exact matches, tuned so the label
   clears AA — measured ratios in brackets.
   ========================================================= */
.lcb--mb-basic { --lcb-c:#4DA6FF; }   /* Basic     6.5:1 */
.lcb--mb-input { --lcb-c:#C77DFF; }   /* Input     6.1:1 */
.lcb--mb-led   { --lcb-c:#5BC8F5; }   /* LED       8.7:1 */
.lcb--mb-music { --lcb-c:#F48FB1; }   /* Music     7.4:1 */
.lcb--mb-logic { --lcb-c:#4DD0C4; }   /* Logic     8.8:1 */
.lcb--mb-var   { --lcb-c:#FFA94D; }   /* Variables 8.7:1 */
.lcb--loops    { --lcb-c:#6ABE3F; }   /* Loops     7.1:1 — same green as Control */

/* `on start`, `forever`, `on button ...` are hat blocks: they begin a
   script, so they take no socket on top. */
.lcb--mb-basic:first-child,
.lcb--mb-input,
.lcb--loops:first-child{ border-radius:22px 22px 12px 12px; }
.lcb--mb-input::before{ display:none; }

/* track switcher */
.lcb-tracks{ display:flex; gap:8px; justify-content:center; margin:0 0 16px; flex-wrap:wrap; }
.lcb-track{
  border:2px solid #e6eaf2; background:#fff; color:#1b2438; cursor:pointer;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:.88rem; font-family:inherit;
}
.lcb-track.on{ border-color:#0f7a55; background:#f0fdf7; color:#0f7a55; }
.lcb-track:hover:not(.on){ border-color:#c9d3e6; }
.lcb-teach{
  background:#fff8ea; border-left:5px solid #f59e0b; border-radius:0 12px 12px 0;
  padding:12px 15px; margin:0 0 14px; font-size:.9rem; color:#42341a; line-height:1.55;
}
.lcb-teach code{ background:rgba(0,0,0,.07); padding:1px 5px; border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; }
@media (prefers-color-scheme: dark){
  .lcb-track{ background:#1a2130; border-color:#2a3446; color:#e8edf7; }
  .lcb-teach{ background:#241d0e; color:#f0e4c8; }
}