/* ─────────────────────────────────────────────
   Block Lab — Media (4.3.0): Costumes / Sounds tab tools, image thumbnails,
   paint editor and sound recorder. Uses the lab's colour variables.
───────────────────────────────────────────── */

/* Thumbnails: image costumes in the sprite tray and the Costumes tab */
.blab-sprite .em img{ display:block; width:34px; height:34px; object-fit:contain; margin:0 auto; }
.blab-costume .em{ min-height:46px; display:flex; align-items:center; justify-content:center; }
.blab-costume .em img{ display:block; width:56px; height:46px; object-fit:contain; }
.blab-costume, .blab-sound{ position:relative; }
.blab-costume .n{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 4px; }

/* Tool row at the top of the Costumes and Sounds tabs */
.blab-pane-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.blab-pane-tools .blab-tool-btn{ padding:7px 12px; }
.blab-pane-note{ margin:0; font-size:12.5px; color:var(--blab-muted); line-height:1.45; max-width:60ch; }

/* Edit / delete buttons on a costume or sound tile */
.blab-tile-acts{ position:absolute; top:-8px; right:-8px; display:none; gap:3px; }
.blab-costume:hover .blab-tile-acts, .blab-sound:hover .blab-tile-acts,
.blab-costume:focus-within .blab-tile-acts, .blab-sound:focus-within .blab-tile-acts{ display:flex; }
.blab-tile-acts button{ width:22px; height:22px; border-radius:50%; border:1px solid var(--blab-line); background:var(--blab-panel-2);
  color:var(--blab-text); font-size:12px; line-height:1; cursor:pointer; padding:0; }
.blab-tile-acts button:hover{ border-color:#00A1FF; }
.blab-tile-acts button:last-child:not(:first-child), .blab-sound .blab-tile-acts button{ background:#f85149; border-color:#f85149; color:#fff; font-weight:700; }

/* A sound the student added */
.blab-sound.mine{ border-color:#7a4f7a; }
.blab-sound.mine .pl{ background:#00A1FF; }

/* How much of the project's media budget is used */
.blab-media-use{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--blab-muted); margin-top:4px; max-width:360px; }
.blab-media-use b{ color:var(--blab-text); font-weight:600; }
.blab-media-use i{ height:6px; border-radius:99px; background:var(--blab-panel-2); overflow:hidden; }
.blab-media-use u{ display:block; height:100%; background:#00A1FF; border-radius:99px; }

/* ── Modal (paint editor, recorder) ── */
.bmd-overlay{ position:absolute; inset:0; z-index:200; background:rgba(5,10,16,.72); display:flex; align-items:center; justify-content:center; padding:14px; }
.bmd-win{ max-width:100%; max-height:100%; overflow:auto; background:var(--blab-bg); border:1px solid var(--blab-line); border-top:3px solid #00A1FF;
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.bmd-win.bmd-small{ width:420px; }
.bmd-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--blab-panel); border-bottom:1px solid var(--blab-line); }
.bmd-head b{ font-size:15px; }
.bmd-body{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.bmd-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bmd-muted{ color:var(--blab-muted); font-size:13px; margin:0; display:inline-flex; align-items:center; gap:6px; }
.bmd-err{ color:#f85149; font-size:13px; margin:0; }
.bmd-btn{ background:#00A1FF; color:#fff; border:0; border-radius:999px; padding:8px 18px; font-weight:700; font-size:14px; cursor:pointer; }
.bmd-btn:hover{ filter:brightness(1.1); }
.bmd-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Paint editor */
.bmd-paintrow{ display:flex; gap:12px; align-items:flex-start; }
.bmd-tools{ display:flex; flex-direction:column; gap:6px; width:118px; flex:none; }
.bmd-tool{ display:flex; align-items:center; gap:8px; background:var(--blab-panel); border:1px solid var(--blab-line); color:var(--blab-text);
  border-radius:8px; padding:6px 8px; font-size:13px; cursor:pointer; text-align:left; }
.bmd-tool span{ width:18px; text-align:center; }
.bmd-tool:hover{ border-color:#00A1FF; }
.bmd-tool.on{ border-color:#00A1FF; background:#0f2a3d; box-shadow:0 0 0 2px rgba(0,161,255,.25); }
.bmd-chk{ font-size:12px; color:var(--blab-muted); display:flex; gap:6px; align-items:center; margin-top:4px; }
.bmd-canvaswrap{ border:1px solid var(--blab-line); border-radius:8px; overflow:hidden; line-height:0; background:#fff; max-width:100%; }
.bmd-canvaswrap canvas{ display:block; max-width:100%; height:auto; touch-action:none; cursor:crosshair; }
.bmd-paint .bmd-canvaswrap canvas[width="240"]{ width:360px; }
.bmd-checker{ background-color:#fff;
  background-image:linear-gradient(45deg,#e8ecf0 25%,transparent 25%),linear-gradient(-45deg,#e8ecf0 25%,transparent 25%),
                   linear-gradient(45deg,transparent 75%,#e8ecf0 75%),linear-gradient(-45deg,transparent 75%,#e8ecf0 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.bmd-cols{ gap:6px; }
.bmd-col{ width:24px; height:24px; border-radius:50%; border:2px solid var(--blab-line); cursor:pointer; padding:0; }
.bmd-col.on{ border-color:#00A1FF; box-shadow:0 0 0 2px rgba(0,161,255,.45); }
.bmd-cols input[type=color]{ width:30px; height:24px; border:0; padding:0; background:none; cursor:pointer; }
.bmd-cols input[type=range]{ width:110px; accent-color:#00A1FF; }

/* Recorder */
.bmd-rec{ display:flex; align-items:center; gap:14px; }
.bmd-rec .bmd-btn.on{ background:#f85149; }
.bmd-time{ font-variant-numeric:tabular-nums; color:var(--blab-muted); }
.bmd-meter{ height:8px; border-radius:99px; background:var(--blab-panel-2); overflow:hidden; }
.bmd-meter i{ display:block; height:100%; width:0; background:#3fb950; transition:width .08s; }
.bmd-after audio{ height:34px; max-width:100%; }

@media (max-width:700px){
  .bmd-paintrow{ flex-direction:column; }
  .bmd-tools{ flex-direction:row; flex-wrap:wrap; width:auto; }
  .bmd-paint .bmd-canvaswrap canvas[width="240"]{ width:100%; }
}