/* Habl piece composer — extends the habl.css design language (tokens from
   site.css via habl.css aliases; no new literals beyond hairlines). */
#hb-composer .hb-comp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; }
#hb-composer .hb-comp-tabs .hb-btn { padding: 8px 16px; }
#hb-composer .hb-comp-tabs .hb-btn[aria-pressed="true"] { background: var(--hb-on-1); color: var(--ep-ink); border-color: var(--hb-on-1); font-weight: 600; }

#hb-composer .hb-tool { margin-top: 14px; }
#hb-composer .hb-stage { touch-action: none; }
#hb-composer .hb-stage svg { cursor: crosshair; }

#hb-composer .hb-toolbar { row-gap: 12px; }
/* [hidden] must beat the display rule below, or every mode's controls show at
   once — Bar mode was rendering the Drops and Wall-rail groups too, on every
   screen size (found in the 390px audit, 2026-08-20). */
#hb-composer .hb-comp-group[hidden], #hb-composer [data-for][hidden] { display: none !important; }
#hb-composer .hb-comp-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#hb-composer .hb-comp-group > label { font-size: 12.5px; color: var(--hb-on-3); display: inline-flex; align-items: center; gap: 7px; }
#hb-composer input[type="number"] { width: 64px; background: var(--hb-dark); color: var(--hb-on-1); border: 1px solid var(--hb-hair); border-radius: 8px; padding: 7px 8px; font-family: 'EP JBM', monospace; font-size: 13px; }
#hb-composer input[type="range"] { width: 120px; }
#hb-composer [data-c="sweeps"] { display: inline-flex; gap: 5px; }
#hb-composer [data-c="sweeps"] .hb-btn { padding: 7px 12px; font-variant-numeric: tabular-nums; }

#hb-composer .hb-tb-label { font-size: 12.5px; color: var(--hb-on-3); align-self: center; }
#hb-composer .hb-comp-hint { font-size: 12.5px; color: var(--hb-on-3); margin: 10px 2px 0; min-height: 18px; }
#hb-composer .hb-comp-hint.warn { color: var(--hb-glow); }

#hb-composer .hb-read b[data-r="bom"] { font-size: 13px; font-weight: 500; color: var(--hb-on-2); }

@media (max-width: 700px) {
  #hb-composer .hb-stage svg { cursor: default; }
  #hb-composer input[type="range"] { width: 96px; }
}

/* Empty state — the stage must read as an invitation to draw, never as an
   image that failed to load (Mustafa, 2026-08-20). Sits over the scene and
   disappears the moment anything is drawn. */
#hb-composer .hb-stage { position: relative; }
#hb-composer .hb-empty {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 0 22px;
  pointer-events: none;
}
#hb-composer .hb-stage.empty .hb-empty { display: flex; }
#hb-composer .hb-empty b {
  font-family: 'EP Montserrat', Montserrat, sans-serif;
  font-size: clamp(17px, 2.4vw, 22px); font-weight: 600; color: var(--hb-on-1);
}
#hb-composer .hb-empty span { font-size: 13.5px; color: var(--hb-on-2); max-width: 42ch; }
#hb-composer .hb-stage.empty { cursor: crosshair; }
@media (max-width: 700px) {
  #hb-composer .hb-empty b { font-size: 16px; }
  #hb-composer .hb-empty span { font-size: 12.5px; }
}

@media (max-width: 700px) {
  /* keep the readout labels from breaking mid-phrase in the narrow toolbar */
  #hb-composer .hb-read { gap: 14px; }
  #hb-composer .hb-read b { font-size: 18px; }
  #hb-composer .hb-read span { font-size: 11px; line-height: 1.3; }
}