/* ===== Design tokens ===== */
:root {
  --bg: #121418;
  --bg-raised: #1b1e24;
  --bg-overlay: rgba(10, 11, 14, 0.6);
  --surface: #ffffff;
  --text: #e8eaed;
  --text-dim: #9aa0a8;
  --accent: #ff7a1a;
  --accent-text: #1a1206;
  --border: #2a2e36;
  --control-h: 44px;
  --library-w: 320px;
}

* { box-sizing: border-box; }

/* The hidden attribute must win over any display rule below. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

#app {
  display: flex;
  height: 100dvh;
}

/* ===== Buttons & controls ===== */
.btn {
  min-height: var(--control-h);
  min-width: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn--primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-size: 18px; }
.btn--toggle.is-on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn--icon { font-size: 16px; }

.control-select {
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  font-size: 14px;
  padding: 0 8px;
}
.control-select:disabled { opacity: 0.4; }

/* ===== Library ===== */
.library {
  display: flex;
  flex-direction: column;
  width: var(--library-w);
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.library__search {
  display: flex;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 10px;
}
.library__search input { flex: 1; min-width: 0; }
.library__search input {
  width: 100%;
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  padding: 0 12px;
  font-size: 15px;
}
.library__artists {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
}
.library__artists:empty { display: none; }
.artist-chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artist-chip--active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.version-btn--more { color: var(--accent); }

.library__list {
  list-style: none;
  margin: 0;
  padding: 0 8px calc(env(safe-area-inset-bottom) + 8px);
  overflow-y: auto;
  flex: 1;
}
.library__group {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 14px 8px 4px;
}
.library__item button {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  padding: 12px 8px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}
.library__item button:active,
.library__item.is-active button { background: var(--bg); }
.library__item .song-artist { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.library__empty { padding: 24px 20px; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.library__more { padding: 14px 8px 20px; color: var(--text-dim); font-size: 13px; text-align: center; }
.version-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  vertical-align: 1px;
}
.library__versions { list-style: none; margin: 0; padding: 0 0 4px 16px; }
.version-btn {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text-dim);
  padding: 8px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.version-btn:active { background: var(--bg); color: var(--text); }

/* ===== Player ===== */
.player {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.player__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* Collapsed library on wide screens (the ☰ button toggles it). */
@media (min-width: 900px) {
  #app.library-collapsed .library { display: none; }
}
.player__song { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.player__title { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__artist { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__tracks { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.track-chip {
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.track-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* Non-scrolling wrapper: floating panels (mixer, help) anchor to it so
   they stay in place while the score scrolls inside the viewport. */
.player__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.player__viewport {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background: var(--surface);
}
.player__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666;
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
}
.player__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* alphaTab selection/cursor colors */
.at-cursor-bar { background: rgba(255, 122, 26, 0.15); }
.at-cursor-beat { background: rgba(255, 122, 26, 0.75); width: 3px; }

/* While playing, delay the cursor visually so it matches the audio that
   actually reaches the speakers (audio buffering lag, mostly on iOS).
   alphaTab animates the beat cursor via an inline transform transition:
   only the delay is overridden (!important beats inline styles), keeping
   its sliding animation. The bar highlight gets a full zero-duration
   delayed transition since it normally jumps instantly. */
.is-playing .at-cursor-beat {
  transition-delay: var(--cursor-delay, 0ms) !important;
}
.is-playing .at-cursor-bar {
  transition: all 0s linear var(--cursor-delay, 0ms) !important;
}
.at-selection div { background: rgba(255, 122, 26, 0.1); }
.at-highlight * { fill: #ff7a1a; stroke: #ff7a1a; }

.player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  flex-wrap: wrap;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 90px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Mixer panel ===== */
.mixer {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: min(92%, 360px);
  max-height: 60%;
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.mixer__title { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.mixer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mixer__row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.mixer__name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 1 / -1; }
.mixer__row input[type="range"] { width: 100%; accent-color: var(--accent); }
.mixer__btn {
  min-width: 40px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.mixer__btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* ===== Help panel (shares the mixer's floating box style) ===== */
.help { max-height: 70%; }
.help__list { margin: 0; font-size: 13.5px; line-height: 1.45; }
.help__list dt { float: left; clear: left; width: 64px; font-weight: 600; color: var(--text); }
.help__list dd { margin: 0 0 10px 76px; color: var(--text-dim); }

/* ===== Composer overlay (alphaTex editor) ===== */
.composer-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.composer-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.composer-panel__title { flex: 1; margin: 0; font-size: 16px; }
.composer-panel__export { width: auto; padding: 0 10px; font-size: 13px; }
.composer-panel__status {
  margin: 0;
  padding: 4px 12px;
  min-height: 22px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.composer-panel__status.is-error { color: #e5484d; }
.composer-panel__body { flex: 1; min-height: 0; display: flex; }
.composer-panel__edit {
  display: flex;
  flex-direction: column;
  width: min(42%, 520px);
  border-right: 1px solid var(--border);
}
.composer-panel__edit textarea {
  flex: 1;
  resize: none;
  border: 0;
  outline: none;
  padding: 12px;
  background: var(--bg-raised);
  color: var(--text);
  font: 13.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.composer-panel__help {
  border-top: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.composer-panel__help pre { margin: 6px 0 4px; overflow-x: auto; }
.composer-panel__preview {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background: var(--surface);
}
@media (max-width: 899px) {
  .composer-panel__body { flex-direction: column; }
  .composer-panel__edit {
    width: auto;
    height: 40%;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* ===== Catalog manager overlay ===== */
.manager-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.manager-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom: 1px solid var(--border);
}
.manager-panel__title { margin: 0; font-size: 18px; }
.manager-panel__header input {
  flex: 1;
  min-width: 0;
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  padding: 0 12px;
  font-size: 15px;
}
.manager-panel__status { margin: 0; padding: 8px 16px; color: var(--text-dim); font-size: 13px; }
.manager-panel__list {
  list-style: none;
  margin: 0;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 10px);
  overflow-y: auto;
  flex: 1;
}
.manager__row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.manager__name {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  font-size: 15px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.manager__name .song-artist { display: block; }
.manager__song { flex: 1; font-size: 14px; color: var(--text-dim); padding-left: 24px; }
.manager__edit {
  min-width: 36px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-dim);
  cursor: pointer;
}
.manager__songs { list-style: none; margin: 0; padding: 0 0 8px; }

/* Tree view (+/- expanders) */
.tree__node { list-style: none; }
.tree__toggle, .tree__spacer {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--accent);
  font-size: 16px;
  font-family: ui-monospace, monospace;
  cursor: pointer;
}
.tree__spacer { border: none; background: none; cursor: default; }
.tree__children {
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  margin-left: 14px;
}
.manager__song .song-artist { display: block; font-size: 12px; }

/* ===== Mobile layout: library as off-canvas drawer ===== */
@media (max-width: 899px) {
  .library {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, var(--library-w));
    z-index: 20;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  #app.library-open .library { transform: translateX(0); }
  #app.library-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 10;
  }
}