/* ==========================================================================
   Groove Lab — playable widget
   Colors are the app's own palettes, transcribed from
   ios/Metronome/Utilities/Theme.swift (Theme.palette(for:)).
   Every custom property is declared on :root[data-theme=...] so the host page
   can use the same tokens and recolor with the widget.
   ========================================================================== */

:root,
:root[data-theme="electric-blue"] {
  color-scheme: dark;

  --gl-bg:            #0F1318;
  --gl-surface-1:     #151A21;
  --gl-surface-2:     #1C222A;
  --gl-surface-3:     #252C36;
  --gl-surface-4:     #374151;

  --gl-primary:        #3B82F6;
  --gl-primary-strong: #3171E2;
  --gl-primary-muted:  #1E4EA5;
  --gl-secondary:        #F59E0B;
  --gl-secondary-muted:  #D97706;
  --gl-error:          #F87171;
  --gl-danger-hi:      #F25959;
  --gl-danger-lo:      #BF2E2E;

  --gl-primary-rgb:   59 130 246;
  --gl-secondary-rgb: 245 158 11;
  --gl-surface4-rgb:  55 65 81;
  --gl-error-rgb:     248 113 113;
}

:root[data-theme="midnight"] {
  --gl-bg:            #0F0C19;
  --gl-surface-1:     #151122;
  --gl-surface-2:     #1C182C;
  --gl-surface-3:     #252038;
  --gl-surface-4:     #373151;
  --gl-primary:        #8A5CF1;
  --gl-primary-strong: #774CDD;
  --gl-primary-muted:  #52339F;
  --gl-secondary:        #58D0C8;
  --gl-secondary-muted:  #41A8A2;
  --gl-error:          #E25D8D;
  --gl-danger-hi:      #E05285;
  --gl-danger-lo:      #AD2E61;
  --gl-primary-rgb:   138 92 241;
  --gl-secondary-rgb: 88 208 200;
  --gl-surface4-rgb:  55 49 81;
  --gl-error-rgb:     226 93 141;
}

:root[data-theme="ember"] {
  --gl-bg:            #17110E;
  --gl-surface-1:     #1D1713;
  --gl-surface-2:     #251E19;
  --gl-surface-3:     #2F2721;
  --gl-surface-4:     #443A31;
  --gl-primary:        #EC7639;
  --gl-primary-strong: #D8632D;
  --gl-primary-muted:  #9B461E;
  --gl-secondary:        #F6BD41;
  --gl-secondary-muted:  #D89E2D;
  --gl-error:          #EF6153;
  --gl-danger-hi:      #EB5947;
  --gl-danger-lo:      #B83326;
  --gl-primary-rgb:   236 118 57;
  --gl-secondary-rgb: 246 189 65;
  --gl-surface4-rgb:  68 58 49;
  --gl-error-rgb:     239 97 83;
}

:root[data-theme="mint"] {
  --gl-bg:            #0B1410;
  --gl-surface-1:     #0F1A15;
  --gl-surface-2:     #14221B;
  --gl-surface-3:     #1B2C24;
  --gl-surface-4:     #283F34;
  --gl-primary:        #34D399;
  --gl-primary-strong: #27BE88;
  --gl-primary-muted:  #19845F;
  --gl-secondary:        #FACC15;
  --gl-secondary-muted:  #D8AE0A;
  --gl-error:          #F87171;
  --gl-danger-hi:      #F26159;
  --gl-danger-lo:      #BF332E;
  --gl-primary-rgb:   52 211 153;
  --gl-secondary-rgb: 250 204 21;
  --gl-surface4-rgb:  40 63 52;
  --gl-error-rgb:     248 113 113;
}

:root[data-theme="sunset"] {
  --gl-bg:            #180E10;
  --gl-surface-1:     #1F1315;
  --gl-surface-2:     #28191B;
  --gl-surface-3:     #332123;
  --gl-surface-4:     #493133;
  --gl-primary:        #FB923C;
  --gl-primary-strong: #EA7B2C;
  --gl-primary-muted:  #A5561E;
  --gl-secondary:        #F472B6;
  --gl-secondary-muted:  #CE5692;
  --gl-error:          #F86161;
  --gl-danger-hi:      #F25959;
  --gl-danger-lo:      #BF2E2E;
  --gl-primary-rgb:   251 146 60;
  --gl-secondary-rgb: 244 114 182;
  --gl-surface4-rgb:  73 49 51;
  --gl-error-rgb:     248 97 97;
}

:root[data-theme="rose-gold"] {
  --gl-bg:            #150F12;
  --gl-surface-1:     #1B1418;
  --gl-surface-2:     #231B1F;
  --gl-surface-3:     #2D2428;
  --gl-surface-4:     #41363B;
  --gl-primary:        #EA87A0;
  --gl-primary-strong: #D57089;
  --gl-primary-muted:  #964E60;
  --gl-secondary:        #D4A574;
  --gl-secondary-muted:  #B6895A;
  --gl-error:          #E3616B;
  --gl-danger-hi:      #E05961;
  --gl-danger-lo:      #AD3338;
  --gl-primary-rgb:   234 135 160;
  --gl-secondary-rgb: 212 165 116;
  --gl-surface4-rgb:  65 54 59;
  --gl-error-rgb:     227 97 107;
}

:root[data-theme="arctic"] {
  --gl-bg:            #0D1119;
  --gl-surface-1:     #121721;
  --gl-surface-2:     #181E2A;
  --gl-surface-3:     #202836;
  --gl-surface-4:     #2F3A4C;
  --gl-primary:        #7DD3FC;
  --gl-primary-strong: #64BEEC;
  --gl-primary-muted:  #4284A5;
  --gl-secondary:        #5EEAD4;
  --gl-secondary-muted:  #43BEAB;
  --gl-error:          #EC717D;
  --gl-danger-hi:      #E6616B;
  --gl-danger-lo:      #B2333D;
  --gl-primary-rgb:   125 211 252;
  --gl-secondary-rgb: 94 234 212;
  --gl-surface4-rgb:  47 58 76;
  --gl-error-rgb:     236 113 125;
}

:root[data-theme="mono"] {
  --gl-bg:            #131313;
  --gl-surface-1:     #191919;
  --gl-surface-2:     #202020;
  --gl-surface-3:     #282828;
  --gl-surface-4:     #383838;
  --gl-primary:        #A6A6A6;
  --gl-primary-strong: #8C8C8C;
  --gl-primary-muted:  #616161;
  --gl-secondary:        #737373;
  --gl-secondary-muted:  #595959;
  --gl-error:          #8C8C8C;
  --gl-danger-hi:      #808080;
  --gl-danger-lo:      #595959;
  --gl-primary-rgb:   166 166 166;
  --gl-secondary-rgb: 115 115 115;
  --gl-surface4-rgb:  56 56 56;
  --gl-error-rgb:     140 140 140;
}

/* Text hierarchy is palette-independent in the app (Theme.textPrimary etc.) */
:root {
  --gl-text:    #EFF2F7;
  --gl-text-2:  #94A3B8;
  --gl-text-3:  #64748B;

  --gl-beat-accent: var(--gl-secondary);
  --gl-beat-normal: var(--gl-primary);
  --gl-beat-off:    var(--gl-surface-4);

  --gl-radius:      20px;
  --gl-radius-pad:  12px;
  --gl-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.gl-widget {
  --pad-h: 132px;
  font-family: var(--gl-font);
  color: var(--gl-text);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 140px),
    var(--gl-surface-1);
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--gl-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.8);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, border-color 0.35s ease;
  contain: layout style;
}

.gl-widget *,
.gl-widget *::before,
.gl-widget *::after { box-sizing: border-box; }

.gl-widget button { font: inherit; color: inherit; }

.gl-widget :focus-visible {
  outline: 2px solid var(--gl-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Stage: time signature + pads
   -------------------------------------------------------------------------- */

.gl-stage {
  background: var(--gl-bg);
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: 16px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gl-meterbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
}

.gl-timesig {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgb(var(--gl-primary-rgb) / 0.10);
  border: 1px solid rgb(var(--gl-primary-rgb) / 0.35);
  color: var(--gl-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}
.gl-timesig .gl-slash {
  color: var(--gl-text-3);
  font-weight: 500;
  padding: 0 1px;
}

.gl-grouping {
  font-size: 15px;
  font-weight: 600;
  color: var(--gl-text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gl-grouping .gl-plus { color: var(--gl-text-3); padding: 0 3px; font-weight: 500; }

/* Pads ------------------------------------------------------------------- */

.gl-pads {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

/* One beat: its pads, and the +/- strip that resizes it. */
.gl-beat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.gl-group {
  display: flex;
  gap: 6px;
  min-width: 0;
  height: var(--pad-h);
}

.gl-pad {
  --pad-color: var(--gl-beat-normal);
  --pulse: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--gl-radius-pad);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

.gl-pad[data-state="accented"] { --pad-color: var(--gl-beat-accent); }
.gl-pad[data-state="normal"]   { --pad-color: var(--gl-beat-normal); }
.gl-pad[data-state="off"]      { --pad-color: var(--gl-beat-off); }

/* glow layer (matches the app's blurred, scaled copy behind the block) */
.gl-pad::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--gl-radius-pad) + 2px);
  background: var(--pad-color);
  filter: blur(10px);
  opacity: calc(var(--pulse) * 0.55 * var(--emphasis, 1));
  transform: scale(calc(1 + var(--pulse) * 0.13 * var(--emphasis, 1)));
  z-index: -1;
  will-change: opacity, transform;
}

/* main block */
.gl-pad .gl-pad-face {
  position: absolute;
  inset: 0;
  border-radius: var(--gl-radius-pad);
  background: linear-gradient(180deg, var(--pad-color), color-mix(in srgb, var(--pad-color) 65%, transparent));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 3px 5px rgb(0 0 0 / 0.22);
  filter: brightness(calc(1 + var(--pulse) * var(--bright, 0.28)));
  transform: scale(calc(1 + var(--pulse) * 0.04 * var(--emphasis, 1)));
  will-change: filter, transform;
}

.gl-pad[data-state="accented"] { --emphasis: 1.7; --bright: 0.34; }

.gl-pad:hover .gl-pad-face { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 3px 5px rgb(0 0 0 / 0.22); }
.gl-pad:active .gl-pad-face { transform: scale(0.97); }

/* beat number, top-left, like the app */
.gl-pad-num {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgb(255 255 255 / 0.4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* state glyph: ">" for accent, "x" for muted */
.gl-pad-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-weight: 800;
}
/* A percentage alone vanishes once a beat is split several ways, so the glyph
   has a floor as well as a ceiling. */
.gl-pad-glyph svg { width: 30%; min-width: 11px; max-width: 34px; height: auto; }
.gl-pad[data-state="accented"] .gl-pad-glyph {
  color: rgb(255 255 255 / 0.5);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.3));
}
.gl-pad[data-state="off"] .gl-pad-glyph {
  color: rgb(255 255 255 / 0.12);
}
.gl-pad[data-state="off"] .gl-pad-glyph svg { width: 22%; min-width: 9px; max-width: 24px; }
.gl-pad[data-state="normal"] .gl-pad-glyph { display: none; }

.gl-widget[data-playing="true"] .gl-group { filter: saturate(1.15) brightness(1.05); }
.gl-group { transition: filter 0.35s ease; }

/* Subdivision controls -----------------------------------------------------
   MeasureGridView draws a short tinted strip under each beat: a plus that
   fills the beat's width alone, and a minus that takes half of it once there
   is something to remove. The painted strip stays that short here too, but the
   button around it is a full 40px tall so the touch target clears the minimum.
   The row is real layout, not an overhanging pseudo-element, so no beat's
   target ever reaches into its neighbour's or up into the pads. */

.gl-beatctl {
  --ctl-h: 40px;        /* hit target */
  --ctl-face-h: 22px;   /* what you actually see */
  display: flex;
  gap: 6px;
  height: var(--ctl-h);
  flex: none;
}

.gl-sub {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gl-sub-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ctl-face-h);
  border-radius: 5px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.gl-sub-face svg {
  width: 14px;
  height: 14px;
  display: block;
}

.gl-sub-add .gl-sub-face {
  color: rgb(var(--gl-primary-rgb) / 0.45);
  background: rgb(var(--gl-primary-rgb) / 0.055);
}
.gl-sub-remove .gl-sub-face {
  color: rgb(var(--gl-error-rgb) / 0.42);
  background: rgb(var(--gl-error-rgb) / 0.05);
}

@media (hover: hover) {
  .gl-sub-add:hover:not(:disabled) .gl-sub-face {
    color: rgb(var(--gl-primary-rgb) / 0.9);
    background: rgb(var(--gl-primary-rgb) / 0.14);
  }
  .gl-sub-remove:hover:not(:disabled) .gl-sub-face {
    color: rgb(var(--gl-error-rgb) / 0.85);
    background: rgb(var(--gl-error-rgb) / 0.13);
  }
}

.gl-sub:active:not(:disabled) .gl-sub-face { transform: scale(0.96); }

.gl-sub:disabled { cursor: default; }
.gl-sub:disabled .gl-sub-face { opacity: 0.32; }

/* Ring the visible strip, not the invisible 40px box around it. */
.gl-sub:focus-visible { outline: none; }
.gl-sub:focus-visible .gl-sub-face {
  outline: 2px solid var(--gl-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Transport
   -------------------------------------------------------------------------- */

.gl-transport {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gl-bpm {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.gl-note {
  font-size: 34px;
  line-height: 1;
  color: var(--gl-primary);
  transform: translateY(2px);
  transition: color 0.35s ease;
}

.gl-bpm-value {
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* three digits at this size — reserved so 99 → 100 never shifts the row */
  min-width: 3.1ch;
  text-align: left;
}

.gl-bpm-unit {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gl-text-3);
}

.gl-transport-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gl-profile-readout {
  font-size: 13px;
  font-weight: 500;
  color: var(--gl-text-2);
  white-space: nowrap;
}

.gl-tap {
  padding: 0 16px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: var(--gl-surface-3);
  color: var(--gl-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.gl-tap-short { display: none; }
.gl-tap:hover { background: var(--gl-surface-4); color: var(--gl-text); }
.gl-tap:active { transform: scale(0.96); }
.gl-tap[data-armed="true"] {
  color: var(--gl-primary);
  border-color: rgb(var(--gl-primary-rgb) / 0.5);
  background: rgb(var(--gl-primary-rgb) / 0.12);
}

/* Play button — the app's blue circle with the glow behind it */
.gl-play {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gl-primary) 90%, transparent), var(--gl-primary-strong));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14) inset,
    0 6px 22px -4px rgb(var(--gl-primary-rgb) / 0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.35s ease;
}
.gl-play::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgb(var(--gl-primary-rgb) / 0.25);
  filter: blur(7px);
  z-index: -1;
}
.gl-play::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 50%);
  pointer-events: none;
}
.gl-play svg { width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25)); }
.gl-play[data-playing="false"] svg { transform: translateX(2px); }
.gl-play:hover { transform: scale(1.04); }
.gl-play:active { transform: scale(0.96); }
.gl-play[data-playing="true"] {
  background: linear-gradient(135deg, var(--gl-danger-hi), var(--gl-danger-lo));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14) inset,
    0 6px 22px -4px rgb(var(--gl-error-rgb) / 0.5);
}
.gl-play[data-playing="true"]::before { background: rgb(var(--gl-error-rgb) / 0.25); }

/* Tempo slider ----------------------------------------------------------- */

.gl-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  display: block;
}
.gl-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    rgb(var(--gl-primary-rgb) / 0.5) 0%,
    rgb(var(--gl-primary-rgb) / 0.85) var(--fill, 40%),
    rgb(var(--gl-surface4-rgb) / 0.6) var(--fill, 40%)
  );
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.25);
}
.gl-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgb(var(--gl-surface4-rgb) / 0.6);
}
.gl-slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: rgb(var(--gl-primary-rgb) / 0.85);
}
.gl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #E0E0E0);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.2),
    0 0 12px rgb(var(--gl-primary-rgb) / 0.6),
    0 2px 4px rgb(0 0 0 / 0.4);
}
.gl-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #E0E0E0);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2), 0 0 12px rgb(var(--gl-primary-rgb) / 0.6);
}

/* --------------------------------------------------------------------------
   Shelf: meter / sound / theme rows
   -------------------------------------------------------------------------- */

.gl-shelf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.gl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
}

.gl-row-label {
  flex: 0 0 68px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gl-text-3);
}

.gl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.gl-chip {
  padding: 0 14px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--gl-surface-2);
  color: var(--gl-text-2);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.gl-chip:hover { background: var(--gl-surface-3); color: var(--gl-text); }
.gl-chip:active { transform: scale(0.96); }
.gl-chip[aria-checked="true"] {
  color: var(--gl-primary);
  background: rgb(var(--gl-primary-rgb) / 0.12);
  border-color: rgb(var(--gl-primary-rgb) / 0.45);
}

/* Theme swatches */
.gl-swatch {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: var(--sw-base, #111);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.gl-swatch::before,
.gl-swatch::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.gl-swatch::before {
  width: 15px; height: 15px;
  left: 5px; bottom: 5px;
  background: var(--sw-primary);
}
.gl-swatch::after {
  width: 11px; height: 11px;
  right: 6px; top: 6px;
  background: var(--sw-secondary);
}
.gl-swatch:hover { transform: translateY(-1px); border-color: rgb(255 255 255 / 0.2); }
.gl-swatch[aria-checked="true"] {
  border-color: var(--gl-primary);
  box-shadow: 0 0 0 2px rgb(var(--gl-primary-rgb) / 0.35);
}

.gl-theme-name {
  font-size: 13px;
  color: var(--gl-text-2);
  margin-left: 4px;
  min-width: 92px;
}

.gl-status {
  margin: -6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gl-text-3);
}
.gl-status:empty { display: none; }
.gl-status[data-error="true"] { color: var(--gl-error); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .gl-widget { --pad-h: 104px; padding: 14px; gap: 14px; }
  .gl-stage { padding: 12px 12px 14px; }
  .gl-pads { gap: 9px; }
  .gl-group { gap: 5px; }
  .gl-beatctl { gap: 5px; }
  .gl-bpm-value { font-size: 42px; }
  .gl-note { font-size: 28px; }
  .gl-play { width: 50px; height: 50px; flex-basis: 50px; }
  .gl-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .gl-row-label { flex: none; }
  .gl-profile-readout { display: none; }
}

@media (max-width: 560px) {
  /* When the readout and the transport controls stop fitting side by side,
     the controls drop to their own line rather than colliding. */
  .gl-transport { gap: 10px; flex-wrap: wrap; row-gap: 12px; }
  .gl-bpm { flex: 1 1 auto; }
  .gl-transport-right { gap: 8px; flex: 0 0 auto; }
  .gl-bpm { gap: 7px; }
  .gl-tap { padding: 0 12px; }
  .gl-tap-long { display: none; }
  .gl-tap-short { display: inline; }
}

@media (max-width: 420px) {
  .gl-widget { --pad-h: 84px; }
  .gl-pad-num { font-size: 10px; top: 4px; left: 5px; }
  /* Every pixel spent on a gap here is a pixel off a pad, and a bar of
     1/2/3/4 already spends ten of them. The hit target stays 40px. */
  .gl-pads { gap: 7px; }
  .gl-group { gap: 3px; }
  .gl-beatctl { gap: 3px; --ctl-face-h: 20px; }
  .gl-sub-face { border-radius: 4px; }
  .gl-sub-face svg { width: 12px; height: 12px; }
  .gl-bpm-value { font-size: 34px; }
  .gl-note { font-size: 24px; }
  .gl-bpm-unit { font-size: 10px; letter-spacing: 0.1em; }
  .gl-timesig { font-size: 20px; padding: 5px 11px; }
  .gl-grouping { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-widget *,
  .gl-widget *::before,
  .gl-widget *::after {
    transition-duration: 0.01ms !important;
  }
  .gl-pad::before { transform: none !important; filter: blur(8px); }
  .gl-pad .gl-pad-face { transform: none !important; }
  .gl-play:hover, .gl-play:active { transform: none; }
}