/* Preview-only definitions missing from the theme icon set. */
.at-player-play-pause .fa-play {
 --hah-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3v18l15-9z'/%3E%3C/svg%3E");
}
.at-player-play-pause .fa-pause {
 --hah-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h5v18H5zm9 0h5v18h-5z'/%3E%3C/svg%3E");
}

/* Title-docked controls stay in document flow, above the score. */
#at-player-controls.hah-tab-toolbar-docked {
 position: static;
 inset: auto;
 width: 100%;
 max-width: 52rem;
 margin: .75rem auto 0;
 z-index: auto;
 flex-wrap: wrap;
 justify-content: center;
 gap: .6rem 1rem;
 border: 1px solid var(--hah-border, #e3e6ea);
 border-radius: var(--hah-radius, 10px);
 box-shadow: none;
 background: var(--hah-surface, #fff);
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}
#at-player-controls.hah-tab-toolbar-docked .at-song-info { display: none !important; }
#at-player-controls.hah-tab-toolbar-docked .at-controls-right {
 flex-wrap: wrap;
 justify-content: center;
 gap: .35rem;
}
#at-player-controls.hah-tab-toolbar-docked .at-song-position { white-space: nowrap; }
#at-player-controls.hah-tab-toolbar-docked #sidebar-version-selector { width: auto; max-width: 12rem; }
#at-player-controls.hah-tab-toolbar-docked #tab-rail-toggle { margin-left: .25rem; }
@media (max-width: 480px) {
 #at-player-controls.hah-tab-toolbar-docked { padding: .55rem; gap: .45rem; }
 #at-player-controls.hah-tab-toolbar-docked .at-song-position { margin-right: .25rem !important; font-size: .85rem; }
}

/* Increase each toolbar text/icon size by 2px, preserving existing hierarchy. */
#at-player-controls.hah-tab-toolbar-docked { font-size: calc(1rem + 2px); }
#at-player-controls.hah-tab-toolbar-docked .btn,
#at-player-controls.hah-tab-toolbar-docked #tab-rail-toggle,
#at-player-controls.hah-tab-toolbar-docked #sidebar-version-selector {
 font-size: calc(.875rem + 2px);
}
@media (max-width: 480px) {
 #at-player-controls.hah-tab-toolbar-docked .at-song-position { font-size: calc(.85rem + 2px); }
}

#at-player-controls .hah-tab-speed {
 display: inline-flex;
 align-items: center;
 gap: .4rem;
 margin: 0 .25rem;
 font-size: calc(.875rem + 2px);
 color: var(--hah-ink, #1a1c1e);
 white-space: nowrap;
}
#at-player-controls #at-playback-speed {
 width: 5.5rem;
 font-size: calc(.875rem + 2px);
}

#at-player-controls #at-playback-speed {
 width: 8rem;
 min-width: 5rem;
 margin: 0;
 accent-color: var(--hah-brand, #d83030);
 cursor: pointer;
}
#at-player-controls .hah-tab-speed-value {
 min-width: 4ch;
 font-variant-numeric: tabular-nums;
 text-align: right;
}
@media (max-width: 480px) {
 #at-player-controls #at-playback-speed { width: 7rem; }
}

/* Tab title and author metadata: original responsive sizes plus 2px. */
.tab-page-header .hah-title-core .entry-title {
 font-size: clamp(calc(1.4rem + 2px), calc(2.3vw + 2px), calc(1.95rem + 2px));
}
.tab-page-header .hah-title-core .tab-meta-strip { font-size: calc(.75rem + 2px); }
.tab-page-header .hah-title-core .tab-meta-strip .meta-item strong { font-size: calc(.62rem + 2px); }

#at-player-controls .hah-tab-layers {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: .4rem;
 flex-basis: 100%;
 padding-top: .4rem;
 border-top: 1px solid var(--hah-border, #e3e6ea);
}
#at-player-controls .hah-tab-layer { padding: .3rem .7rem; font-size: calc(.875rem + 2px); }
#at-player-controls .hah-tab-layer:disabled { cursor: not-allowed; }

#at-player-controls .hah-toolbar-separator {
 display: block;
 flex: 0 0 1px;
 width: 1px;
 height: 1.5rem;
 margin: 0 .45rem;
 background: var(--hah-border, #e3e6ea);
}
@media (max-width: 480px) {
 #at-player-controls .hah-toolbar-separator { margin: 0 .15rem; }
}

/* Small screens: only playback, metronome/count-in, tempo and score layers. */
.hah-tab-count-in-icon { display: none; }
@media (max-width: 767px) {
 #at-player-controls.hah-tab-toolbar-docked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .4rem;
 }
 #at-player-controls.hah-tab-toolbar-docked .at-controls-left,
 #at-player-controls.hah-tab-toolbar-docked .at-controls-right { display: contents !important; }
 #at-player-controls.hah-tab-toolbar-docked .at-song-info,
 #at-player-controls.hah-tab-toolbar-docked .at-song-position,
 #at-player-controls.hah-tab-toolbar-docked .at-player-progress,
 #at-player-controls.hah-tab-toolbar-docked .at-loop,
 #at-player-controls.hah-tab-toolbar-docked #sidebar-version-selector,
 #at-player-controls.hah-tab-toolbar-docked #tab-rail-toggle,
 #at-player-controls.hah-tab-toolbar-docked .hah-toolbar-separator,
 #at-player-controls.hah-tab-toolbar-docked .hah-tab-speed-label,
 #at-player-controls.hah-tab-toolbar-docked .hah-tab-count-in-label { display: none !important; }
 #at-player-controls.hah-tab-toolbar-docked .at-player-stop,
 #at-player-controls.hah-tab-toolbar-docked .at-player-play-pause,
 #at-player-controls.hah-tab-toolbar-docked .at-metronome,
 #at-player-controls.hah-tab-toolbar-docked .at-count-in {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 2.25rem;
  min-height: 2.5rem;
  padding: .25rem;
  margin: 0 !important;
 }
 #at-player-controls .hah-tab-count-in-icon { display: inline; font-size: .875rem; font-weight: 700; }
 #at-player-controls .hah-tab-speed { gap: .25rem; margin: 0 0 0 .15rem; }
 #at-player-controls #at-playback-speed { width: clamp(3.75rem, 18vw, 7rem); min-width: 0; }
 #at-player-controls .hah-tab-speed-value { font-size: .875rem; }
 #at-player-controls .hah-tab-layers { gap: .4rem; padding-top: .3rem; }
 #at-player-controls .hah-tab-layer { min-height: 2.5rem; padding: .25rem .65rem; }
}

/* Single-row mobile toolbar; layer names remain available to assistive technology. */
.hah-tab-layer-icon { display: none; }
@media (max-width: 767px) {
 #at-player-controls.hah-tab-toolbar-docked { flex-wrap: nowrap; gap: .125rem; padding: .25rem; }
 #at-player-controls.hah-tab-toolbar-docked .hah-tab-layers { display: contents; }
 #at-player-controls.hah-tab-toolbar-docked .hah-tab-layer-label { display: none; }
 #at-player-controls.hah-tab-toolbar-docked .at-player-stop,
 #at-player-controls.hah-tab-toolbar-docked .at-player-play-pause,
 #at-player-controls.hah-tab-toolbar-docked .at-metronome,
 #at-player-controls.hah-tab-toolbar-docked .at-count-in,
 #at-player-controls.hah-tab-toolbar-docked .hah-tab-layer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(1.75rem, 8vw, 2.25rem);
  width: clamp(1.75rem, 8vw, 2.25rem);
  min-width: 0;
  min-height: 2.5rem;
  padding: .125rem;
  margin: 0 !important;
 }
 #at-player-controls .hah-tab-layer-icon { display: inline-flex; align-items: center; justify-content: center; }
 #at-player-controls .hah-tab-layer-icon svg { display: block; width: 1.125rem; height: 1.125rem; }
 #at-player-controls .hah-tab-layer-icon--tabs { font-size: .625rem; font-weight: 700; letter-spacing: -.025em; }
 #at-player-controls .hah-tab-speed { flex: 1 1 0; min-width: 0; max-width: 7rem; gap: .125rem; margin: 0 .125rem; }
 #at-player-controls #at-playback-speed { flex: 1 1 0; width: 0; min-width: 1.5rem; height: 2.5rem; }
 #at-player-controls .hah-tab-speed-value { flex: 0 0 auto; min-width: 3.5ch; font-size: .75rem; }
}

/* Desktop uses the same layer icons as mobile, with full-size hit targets. */
@media (min-width: 768px) {
 #at-player-controls .hah-tab-layer-label { display: none; }
 #at-player-controls .hah-tab-layer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: .25rem;
 }
 #at-player-controls .hah-tab-layer-icon { display: inline-flex; align-items: center; justify-content: center; }
 #at-player-controls .hah-tab-layer-icon svg { display: block; width: 1.25rem; height: 1.25rem; }
 #at-player-controls .hah-tab-layer-icon--tabs { font-size: .75rem; font-weight: 700; letter-spacing: -.025em; }
}

/* Match the compact mobile count-in icon on desktop. */
@media (min-width: 768px) {
 #at-player-controls .hah-tab-count-in-label { display: none; }
 #at-player-controls .hah-tab-count-in-icon { display: inline; font-size: .875rem; font-weight: 700; }
 #at-player-controls .at-count-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: .25rem;
 }
}

/* Desktop-only smooth-scroll control; phone playback remains smooth by default. */
#at-player-controls .at-smooth-scroll {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2.5rem;
 min-height: 2.5rem;
 padding: .25rem;
}
#at-player-controls .at-smooth-scroll svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 767px) {
 #at-player-controls.hah-tab-toolbar-docked .at-smooth-scroll { display: none !important; }
}

/* Track mixer icon matches the other desktop toolbar controls. */
#at-player-controls #tab-rail-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2.5rem;
 min-height: 2.5rem;
 padding: .25rem;
}
#at-player-controls #tab-rail-toggle svg { display: block; width: 1.25rem; height: 1.25rem; }

/* Keep all desktop controls on one row, with score layers before the track mixer. */
@media (min-width: 768px) {
 #at-player-controls.hah-tab-toolbar-docked {
  max-width: 64rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
 }
 #at-player-controls.hah-tab-toolbar-docked .at-controls-left,
 #at-player-controls.hah-tab-toolbar-docked .at-controls-right { flex: 0 0 auto; flex-wrap: nowrap; }
 #at-player-controls .hah-tab-layers {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
 }
}

@media (min-width: 768px) {
 #at-player-controls.hah-tab-toolbar-docked { gap: .5rem; }
 #at-player-controls.hah-tab-toolbar-docked .at-controls-right { gap: .25rem; }
 #at-player-controls .hah-tab-layers { gap: .25rem; }
 #at-player-controls #at-playback-speed { width: 6rem; }
 #at-player-controls .hah-toolbar-separator { margin: 0 .25rem; }
}

/* Size the desktop bar to its controls rather than leaving unused trailing space. */
@media (min-width: 768px) {
 #at-player-controls.hah-tab-toolbar-docked { width: max-content; max-width: 100%; }
}