/* Native toolbar reference: a flat, shared control baseline. */
body .studio .transport-left { gap:2px; }
body .studio .transport :is(.transport-text,.tempo-field,.time-signature,.quantization,.transport-unavailable) {
  height:18px; min-height:18px; border:0; border-radius:0;
  background:var(--live-control); color:var(--live-text);
  font:11px/18px LiveSans,Arial,sans-serif; box-shadow:none;
  letter-spacing:0;
}
body .studio .transport-unavailable { display:block; padding:0 6px; opacity:.45; cursor:default; }
body .studio .transport .tempo-field { display:flex; padding:0 3px; width:52px; }
body .studio .transport .tempo-field > span {display:none;}
body .studio .transport .tempo-field input {
  appearance:textfield; width:46px; min-width:0; height:18px; min-height:18px;
  border:0; border-radius:0; padding:0; margin:0; outline:0;
  background:transparent; color:inherit; font:inherit;
  font-variant-numeric:tabular-nums; text-align:center; cursor:ns-resize;
}
body .studio .transport .tempo-field input:focus { background:var(--live-field); cursor:text; }
body .studio .transport .tempo-field input::-webkit-inner-spin-button,
body .studio .transport .tempo-field input::-webkit-outer-spin-button { appearance:none; margin:0; }
body .studio .transport .tempo-field:focus-within { box-shadow:inset 0 -1px var(--live-accent); }
body .studio .transport .time-signature { display:block; padding:0 6px; white-space:nowrap; }
body .studio .transport #tap-tempo { min-width:27px; padding:0 3px; }
body .studio .transport .quantization { width:55px; padding:0 2px; }
body .studio .transport-left .icon-button { height:18px; width:18px; min-width:18px; padding:0; }
body .studio .transport-left #browser-toggle { margin-right:6px; background:transparent; }
body .studio .transport-left .live-icon { width:14px; height:14px; }
body .studio .transport-left #metronome { width:25px; }
/* Link and input Follower retain their honest disabled state. */
@media (min-width:1101px) and (max-width:1250px) {
  body .studio .transport { grid-template-columns:minmax(0,1fr) auto;grid-template-rows:22px 22px;height:46px;min-height:46px;gap:0 5px; }
  body .studio .transport-left {grid-column:1;grid-row:1;}
  body .studio .transport-right {grid-column:2;grid-row:1;}
  body .studio .transport-main {position:static;transform:none;max-width:none;grid-column:1/-1;grid-row:2;justify-self:center;}
}
@media (max-width:760px) {
  body .studio .transport-unavailable {display:none;}
  body .studio .transport .time-signature {display:block;}
}
@media (min-width:481px) and (max-width:760px) {
  body .studio .transport {grid-template-columns:minmax(0,1fr);grid-template-rows:22px 22px 22px;height:70px;min-height:70px;}
  body .studio .transport-left {grid-column:1;grid-row:1;justify-self:start;}
  body .studio .transport-right {grid-column:1;grid-row:2;justify-self:end;}
  body .studio .transport-main {grid-column:1;grid-row:3;justify-self:center;}
}
@media (prefers-reduced-motion:reduce) { body .studio .transport * {transition:none;} }

/* The two meter values share one flat native-style cell. */
body .studio .transport .time-signature {display:flex;align-items:center;justify-content:center;gap:1px;width:52px;padding:0 2px;}
body .studio .transport .time-signature input {appearance:textfield;width:20px;min-width:0;height:18px;min-height:18px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:center;cursor:ns-resize;}
body .studio .transport .time-signature input:focus {background:var(--live-field);outline:0;box-shadow:inset 0 -1px var(--live-accent);cursor:text;}
body .studio .transport .time-signature input::-webkit-inner-spin-button,
body .studio .transport .time-signature input::-webkit-outer-spin-button {appearance:none;margin:0;}
body .studio .transport .time-signature>span {font:inherit;}