/* chordlab player ---------------------------------------------------------- */

:root {
  --bg: #07090d;
  --panel: #10141b;
  --panel-2: #151a23;
  --panel-3: #1b212c;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #eef2f8;
  --muted: #8d97a8;
  --faint: #596376;
  --accent: #8b6cff;
  --accent-2: #22d3ee;
  --grad: linear-gradient(135deg, #8b6cff 0%, #22d3ee 100%);
  --danger: #f87171;
  --radius: 18px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  /* current chord colour, updated from script */
  --h: 256;
  --s: 90%;
  --l: 68%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(139, 108, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.07), transparent 55%),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, output { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.ico { width: 18px; height: 18px; flex: none; display: block; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font-weight: 560;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: rgba(255, 255, 255, 0.18); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.ghost { background: transparent; }
.btn.primary {
  background: var(--grad);
  border-color: transparent;
  color: #07090d;
  font-weight: 680;
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--grad); }

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.icon-btn.small { width: 30px; height: 30px; border-radius: 9px; }
.icon-btn.small .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------- app */
.app {
  height: 100vh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
}

.topbar {
  display: flex;
  align-items: center;
  /* A grid item is never narrower than its content unless told otherwise, and
     a long song title would otherwise push the whole page wider than a phone. */
  min-width: 0;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 9, 13, 0.72);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px;
  border-radius: 10px;
}
.brand-mark { width: 30px; height: 30px; }
.brand-name { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.brand-name b { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.track { flex: 1; min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.track-title { font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.track-meta b { color: var(--text); font-weight: 620; }
.track-meta .arrow { color: var(--accent-2); }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.menu { position: relative; }
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: none;
  z-index: 40;
}
.menu-list.open { display: block; }
.menu-note { padding: 6px 10px 8px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.menu-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: 9px;
  text-align: left;
}
.menu-list button:hover { background: var(--panel-3); }
.menu-list small { color: var(--faint); font-family: var(--mono); }

.view { min-height: 0; }

/* ----------------------------------------------------------------- start */
.start {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
  gap: 28px;
  padding: 34px 40px 30px;
  overflow: auto;
}
.start-hero { display: flex; flex-direction: column; justify-content: center; max-width: 660px; }
.back-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 8px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}
.back-link:hover { color: var(--text); }
.start h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 800;
}
.start h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); font-size: 16px; max-width: 520px; margin: 18px 0 26px; }

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  border-radius: 22px;
  border: 1.5px dashed rgba(139, 108, 255, 0.45);
  background: linear-gradient(180deg, rgba(139, 108, 255, 0.08), rgba(34, 211, 238, 0.03));
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.drop:hover, .drop.over { border-color: var(--accent-2); background: linear-gradient(180deg, rgba(139, 108, 255, 0.14), rgba(34, 211, 238, 0.07)); }
.drop-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--grad);
  color: #07090d;
  margin-bottom: 8px;
  box-shadow: 0 10px 30px rgba(139, 108, 255, 0.35);
}
.drop-icon .ico { width: 26px; height: 26px; }
.drop-title { font-size: 18px; font-weight: 680; }
.drop-sub { color: var(--muted); font-size: 13px; }
.drop-sub u { color: var(--text); text-underline-offset: 3px; }

.path-row { display: flex; gap: 8px; margin-top: 14px; }
.path-row input, .field select {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 13px;
}
.path-row .btn { height: 42px; }

.start-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.panel {
  background: rgba(16, 20, 27, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel.grow { flex: 1; min-height: 260px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.panel-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 640; }
.empty-note { padding: 6px 16px 16px; color: var(--faint); font-size: 13px; }

.recent { padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.recent-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  border: 0;
  background: none;
  text-align: left;
}
.recent-item:hover { background: var(--panel-3); }
.recent-art {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: #07090d;
  background: hsl(var(--h) var(--s) var(--l));
}
.recent-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { font-size: 12px; color: var(--muted); }
.recent-time { font-size: 12px; color: var(--faint); font-family: var(--mono); }

.browser-path {
  margin: 0 16px 6px;
  font: 11px var(--mono);
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}
.browser { flex: 1; overflow: auto; padding: 0 8px 10px; min-height: 0; }
.entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  font-size: 13px;
}
.entry:hover { background: var(--panel-3); }
.entry .ico { width: 16px; height: 16px; color: var(--faint); }
.entry.audio .ico { color: var(--accent-2); }
.entry-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-size { font: 11px var(--mono); color: var(--faint); }

/* --------------------------------------------------------------- loading */
.loading { display: grid; place-items: center; padding: 24px; }
.loading-card {
  width: min(460px, 100%);
  padding: 34px 34px 28px;
  border-radius: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.eq { display: flex; justify-content: center; align-items: flex-end; gap: 5px; height: 46px; margin-bottom: 20px; }
.eq i {
  width: 7px;
  border-radius: 4px;
  background: var(--grad);
  animation: eq 1.1s ease-in-out infinite;
}
.eq i:nth-child(1) { animation-delay: -0.9s; }
.eq i:nth-child(2) { animation-delay: -0.3s; }
.eq i:nth-child(3) { animation-delay: -0.7s; }
.eq i:nth-child(4) { animation-delay: -0.1s; }
.eq i:nth-child(5) { animation-delay: -0.5s; }
.eq i:nth-child(6) { animation-delay: -0.2s; }
.eq i:nth-child(7) { animation-delay: -0.8s; }
@keyframes eq { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.loading.failed .eq i { animation: none; height: 20%; background: var(--danger); }

.loading-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.loading-title { font-size: 21px; font-weight: 700; margin: 4px 0 2px; word-break: break-word; }
.loading-stage { color: var(--muted); font-size: 13px; min-height: 20px; }
.progress { height: 6px; border-radius: 99px; background: var(--panel-3); overflow: hidden; margin: 18px 0 20px; }
.progress i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 99px; transition: width 0.3s ease; }
.steps { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; gap: 8px; }
.steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 13px;
}
.steps li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
}
.steps li.active { color: var(--text); }
.steps li.active::before { border-color: var(--accent-2); border-right-color: transparent; animation: spin 0.8s linear infinite; }
.steps li.done { color: var(--muted); }
.steps li.done::before {
  content: "¹3";
  display: grid;
  place-items: center;
  border: 0;
  background: var(--grad);
  color: #07090d;
  font-size: 10px;
  font-weight: 800;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-error { margin-top: 18px; }
.loading-error-text { color: var(--danger); font-size: 13px; margin-bottom: 14px; word-break: break-word; }
.loading-error .row { display: flex; gap: 8px; justify-content: center; }

/* ---------------------------------------------------------------- player */
.player {
  display: grid;
  grid-template-rows: auto 124px auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 20px 18px;
}

/* now playing */
.now {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 236px;
  align-items: center;
  gap: 28px;
  padding: 20px 26px;
  min-height: 214px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 150% at 38% -20%, hsl(var(--h) var(--s) var(--l) / 0.22), transparent 62%),
    var(--panel);
  overflow: hidden;
  transition: background 0.4s ease;
}
.now::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(var(--h) var(--s) var(--l) / 0.7), transparent);
}
.now-diagram { cursor: pointer; position: relative; display: grid; place-items: center; min-height: 176px; }
.now-main { min-width: 0; }
.now-kicker { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--muted); }
.now-kicker .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.now-chord {
  margin: 2px 0 6px;
  font-size: clamp(64px, 8.6vw, 128px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: hsl(var(--h) var(--s) calc(var(--l) + 6%));
  text-shadow: 0 0 60px hsl(var(--h) var(--s) var(--l) / 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-chord.nc { color: var(--muted); text-shadow: none; }
.now-chord.pop { animation: pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes pop { from { transform: translateY(6px) scale(0.97); opacity: 0.4; } to { transform: none; opacity: 1; } }
.now-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-height: 22px; font-size: 14px; color: var(--muted); }
.now-sub .roman {
  font: 700 13px var(--mono);
  color: hsl(var(--h) var(--s) calc(var(--l) + 10%));
  padding: 1px 8px;
  border-radius: 99px;
  background: hsl(var(--h) var(--s) var(--l) / 0.14);
}
.now-sub .roman:empty { display: none; }
.now-sub .notes { letter-spacing: 0.04em; }
.now-sub .capo-note { color: var(--accent-2); }
.now-sure { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.meter { width: 120px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: hsl(var(--h) var(--s) var(--l)); transition: width 0.3s ease; }
.alt { color: var(--text); }
.alt:empty { display: none; }
.alt b { font-weight: 650; }

.now-next {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.next-head { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.next-in { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--text); }
.next-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.next-chord {
  flex: 1;
  min-width: 0;
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
  color: hsl(var(--h) var(--s) calc(var(--l) + 6%));
}
.next-diagram { width: 76px; flex: none; }
.next-progress { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.next-progress i { display: block; height: 100%; width: 0; background: hsl(var(--h) var(--s) var(--l)); }

/* chord diagrams */
.diag { display: block; width: 100%; height: auto; overflow: visible; }
.diag.large { width: 150px; }
.diag.large.piano { width: 176px; }
.legend-item .diag.piano { width: 44px; }
.diag .fret { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; }
.diag .nut { stroke: rgba(255, 255, 255, 0.85); stroke-width: 4; stroke-linecap: round; }
.diag .string { stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.2; }
.diag .dot { fill: hsl(var(--h) var(--s) var(--l)); }
.diag .dot.root { stroke: #fff; stroke-width: 2; }
.diag .barre { fill: hsl(var(--h) var(--s) var(--l)); }
.diag .open { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.6; }
.diag .open.root { stroke: hsl(var(--h) var(--s) calc(var(--l) + 10%)); stroke-width: 2.2; }
.diag .mute { fill: rgba(255, 255, 255, 0.45); font: 700 11px var(--sans); }
.diag .base { fill: var(--muted); font: 600 10px var(--mono); }
.diag .sname { fill: var(--faint); font: 600 8.5px var(--mono); }
.diag .key-white { fill: #e9edf4; stroke: #0b0d12; stroke-width: 1; }
.diag .key-black { fill: #1a1f29; stroke: #0b0d12; stroke-width: 1; }
.diag .key-white.on { fill: hsl(var(--h) var(--s) var(--l)); }
.diag .key-black.on { fill: hsl(var(--h) var(--s) calc(var(--l) - 12%)); }
.diag .key-white.bass { fill: hsl(var(--h) calc(var(--s) - 30%) calc(var(--l) + 8%)); }
.diag .kname { font: 700 8px var(--sans); fill: #07090d; }
.diag-empty {
  width: 118px;
  height: 140px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  color: var(--faint);
  font-weight: 700;
}
.next-diagram .diag-empty { width: 80px; height: 94px; font-size: 12px; }
.diag-count {
  position: absolute;
  right: 0;
  bottom: -4px;
  font: 600 10px var(--mono);
  color: var(--muted);
  background: var(--panel-3);
  border-radius: 99px;
  padding: 1px 7px;
}

/* chord lane */
.lane {
  position: relative;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.lane.dragging { cursor: grabbing; }
.lane-track { position: absolute; inset: 0 auto 0 0; will-change: transform; }
.barline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.06); }
.barline b { position: absolute; top: 7px; left: 6px; font: 600 10px var(--mono); color: var(--faint); }
.beat { position: absolute; bottom: 9px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.block {
  position: absolute;
  top: 28px;
  bottom: 22px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  overflow: hidden;
  background: hsl(var(--h) var(--s) var(--l) / 0.13);
  box-shadow: inset 0 0 0 1px hsl(var(--h) var(--s) var(--l) / 0.32);
  transition: background 0.2s, box-shadow 0.2s, opacity 0.3s;
}
.block span {
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: hsl(var(--h) var(--s) calc(var(--l) + 10%));
}
.block:hover { background: hsl(var(--h) var(--s) var(--l) / 0.22); }
.block.past { opacity: 0.42; }
.block.active {
  opacity: 1;
  background: hsl(var(--h) var(--s) var(--l));
  box-shadow: 0 10px 34px hsl(var(--h) var(--s) var(--l) / 0.45);
}
.block.active span { color: #07090d; }
.block.nc { --h: 220; --s: 8%; --l: 52%; }
.block.narrow { padding: 0 6px; }
.block.narrow span { font-size: 13px; }
.block.tiny span { display: none; }
.lane-fade { position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; }
.lane-fade.left { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
.lane-fade.right { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }
.lane-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.lane-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  border: 7px solid transparent;
  border-top-color: #fff;
}
.lane-zoom { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s; }
.lane:hover .lane-zoom { opacity: 1; }
.lane-zoom .icon-btn { background: rgba(21, 26, 35, 0.9); }

/* transport */
.transport {
  min-width: 0;             /* the controls wrap; without this they widen the page */
  padding: 12px 18px 12px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.seek { position: relative; height: 56px; }
.seek canvas { display: block; width: 100%; height: 56px; cursor: pointer; touch-action: none; }
.seek-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.seek-tip b { font-weight: 720; margin-right: 8px; }
.seek-tip span { font-family: var(--mono); color: var(--muted); }

.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 8px; }
.time { font: 13px var(--mono); color: var(--muted); }
.time span:first-child { color: var(--text); }
.time .slash { margin: 0 6px; color: var(--faint); }
.buttons { display: flex; align-items: center; gap: 6px; }
.play {
  width: 54px;
  height: 54px;
  margin: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: var(--grad);
  color: #07090d;
  box-shadow: 0 10px 30px rgba(139, 108, 255, 0.35);
  transition: transform 0.12s, filter 0.15s;
}
.play:hover { filter: brightness(1.08); }
.play:active { transform: scale(0.96); }
.play .ico { width: 24px; height: 24px; }

.tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.segmented { display: flex; padding: 3px; border-radius: 11px; background: var(--panel-3); }
.segmented button {
  border: 0;
  background: none;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.segmented button[aria-checked="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.3); }
.stepper { display: flex; align-items: center; height: 32px; border-radius: 10px; background: var(--panel-3); padding: 0 3px 0 10px; }
.stepper-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.stepper button { width: 24px; height: 24px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 15px; line-height: 1; }
.stepper button:hover { background: var(--panel); color: var(--text); }
.stepper output { min-width: 24px; text-align: center; font: 600 12px var(--mono); }
.stepper output.changed { color: var(--accent-2); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  border: 0;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.pill .ico { width: 15px; height: 15px; }
.pill:hover { color: var(--text); }
.pill[aria-pressed="true"], .pill[data-mode="chord"], .pill[data-mode="bar"] {
  background: rgba(34, 211, 238, 0.14);
  color: var(--accent-2);
}
.speed {
  height: 32px;
  border-radius: 10px;
  border: 0;
  background: var(--panel-3);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.volume { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.volume .ico { width: 16px; height: 16px; }
.volume input { width: 80px; accent-color: var(--accent-2); }

/* vocal volume (karaoke) */
.vocals {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 3px;
  border-radius: 10px;
  background: var(--panel-3);
}
.vocals-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.vocals-toggle .ico { width: 15px; height: 15px; }
.vocals-toggle:hover { color: var(--text); background: var(--panel); }
.vocals-toggle[aria-pressed="true"] { background: var(--grad); color: #07090d; }
.vocals-slider { position: relative; display: flex; align-items: center; }
.vocals-slider input { width: 112px; accent-color: var(--accent); }
.vocals-progress {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.3s;
  pointer-events: none;
}
.vocals[data-state="preparing"] .vocals-progress { opacity: 1; }
.vocals output { min-width: 36px; text-align: right; font: 600 11px var(--mono); color: var(--muted); }
.vocals[data-state="preparing"] output,
.vocals[data-state="error"] output { min-width: 70px; color: var(--accent-2); }
.vocals[data-state="error"] output { color: var(--danger); }
.vocals[data-state="unavailable"] { opacity: 0.45; }
.vocals[data-state="unavailable"] input { pointer-events: none; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line-2); }
.menu-list button:disabled { opacity: 0.38; cursor: default; background: none; }

/* chord sheet */
.sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.sheet-head { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 640; flex: none; }
.legend { display: flex; gap: 6px; overflow-x: auto; min-width: 0; scrollbar-width: thin; padding-bottom: 2px; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: hsl(var(--h) var(--s) var(--l) / 0.08);
  white-space: nowrap;
  flex: none;
}
.legend-item:hover { background: hsl(var(--h) var(--s) var(--l) / 0.18); }
.legend-item .diag { width: 30px; }
.legend-item .diag-empty { width: 30px; height: 36px; font-size: 9px; border-radius: 6px; }
.legend-item b { font-weight: 700; color: hsl(var(--h) var(--s) calc(var(--l) + 8%)); }
.legend-item small { color: var(--faint); font: 11px var(--mono); }

.sheet-body { overflow: auto; padding: 10px 16px 16px; min-height: 0; scroll-behavior: smooth; }
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px 8px 14px;
  border-left: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
}
.cell:nth-child(4n + 1) { border-left-width: 2px; }
.cell:hover { background: rgba(255, 255, 255, 0.025); }
.cell .num { position: absolute; top: 4px; left: 6px; font: 600 9px var(--mono); color: var(--faint); }
.cell .chords { display: flex; flex-wrap: wrap; gap: 2px 12px; padding-top: 6px; }
.cell .chords b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: hsl(var(--h) var(--s) calc(var(--l) + 8%)); }
.cell .chords em { font-style: normal; color: var(--faint); font-size: 15px; }
.cell .fill { position: absolute; inset: auto 0 0 0; height: 2px; width: 0; background: var(--accent-2); }
.cell.active { background: rgba(34, 211, 238, 0.07); }

/* ------------------------------------------------------ drawer & dialogs */
.scrim { position: fixed; inset: 0; background: rgba(3, 5, 8, 0.55); z-index: 60; backdrop-filter: blur(2px); }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  z-index: 61;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line-2);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  animation: slide 0.22s ease-out;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.drawer-head h2 { font-size: 17px; font-weight: 700; }
.drawer-body { flex: 1; overflow: auto; padding: 6px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.field output { font: 12px var(--mono); color: var(--accent-2); }
.field small { color: var(--faint); font-size: 12px; }
.field select { font-family: var(--sans); font-size: 14px; }
.field input[type="range"] { accent-color: var(--accent-2); }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(3, 5, 8, 0.6); padding: 20px; }
.modal-card { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 22px; padding-bottom: 18px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); }
.modal-card > p { margin: 10px 20px 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 4px 20px 0; align-items: center; }
.keys dt { text-align: right; white-space: nowrap; }
.keys dd { margin: 0; color: var(--muted); }
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  background: var(--panel-3);
  font: 600 11px var(--mono);
  text-align: center;
  color: var(--text);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(560px, calc(100% - 40px));
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  font-size: 13px;
}
.toast.error { border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }

.dropzone {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 13, 0.82);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.dropzone > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 90px;
  border-radius: 28px;
  border: 2px dashed var(--accent-2);
  font-size: 22px;
  font-weight: 700;
}
.dropzone .ico { width: 44px; height: 44px; color: var(--accent-2); }

/* ---------------------------------------------------------------- offline */
.offline {
  display: grid;
  place-items: center;
  padding: 24px;
}
.offline-card {
  max-width: 460px;
  padding: 40px 34px;
  border-radius: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}
.offline-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.offline-mark .ico { width: 30px; height: 30px; }
.offline h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: -0.01em; }
.offline-lead { margin: 0 0 24px; color: var(--muted); line-height: 1.55; }
.offline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.offline-checked { color: var(--muted); font-size: 12.5px; }
.offline-note { margin-top: 18px; color: var(--muted); font-size: 12px; opacity: .8; }

/* ------------------------------------------------------------- link input */
.link-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 6px 6px 6px 14px;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.link-row:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent);
}
.link-icon { display: flex; color: var(--muted); }
.link-icon .ico { width: 20px; height: 20px; }
.link-row input {
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.link-row input::placeholder { color: var(--muted); }
.link-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
}


/* ------------------------------------------------------------------- the door */
.gate {
  display: grid;
  place-items: center;
  padding: 32px 18px;
  overflow: auto;
}

.gate-card {
  width: min(420px, 100%);
  min-width: 0;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 26px 26px;
}

.gate-mark { width: 46px; height: 46px; }

.gate-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 12px 0 2px;
}
.gate-title b { color: var(--accent-2); font-weight: 600; }

.gate-lead {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.gate-sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.gate-google { display: flex; justify-content: center; min-height: 44px; }
.gate-note { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }

.gate-status {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.gate-status[data-kind="ok"] { border-color: rgba(34, 211, 238, 0.35); }
.gate-status[data-kind="warn"] { border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; }

.gate-more { margin-top: 14px; text-align: left; }
.gate-more > summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 12.5px;
  padding: 7px 2px;
  text-align: center;
}
.gate-more > summary::-webkit-details-marker { display: none; }
.gate-more > summary:hover { color: var(--text); }

.gate-form { display: grid; gap: 9px; padding: 6px 0 2px; }
.gate-form input {
  min-width: 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  outline: none;
}
.gate-form input:focus { border-color: var(--accent); }

/* ------------------------------------------------------------------ approvals */
.admin { padding: 26px 18px; overflow: auto; }

.admin-card {
  width: min(620px, 100%);
  min-width: 0;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.admin-head h2 { font-size: 17px; font-weight: 600; min-width: 0; }

.admin-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--faint);
}
.admin-sub .count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--muted);
  text-align: center;
  letter-spacing: 0;
}

.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.admin-list li.empty {
  justify-content: flex-start;
  color: var(--faint);
  background: none;
  border-style: dashed;
}
.admin-list .who { min-width: 0; display: grid; gap: 1px; }
.admin-list .who b { font-weight: 550; overflow-wrap: anywhere; }
.admin-list .who span { font-size: 12px; color: var(--muted); }
.admin-list .who .when { color: var(--faint); font-size: 11.5px; }
.admin-list .acts { display: flex; gap: 6px; flex: none; }
.admin-list .acts .btn { padding: 7px 11px; font-size: 12.5px; }

.admin-add { display: flex; gap: 8px; margin-top: 22px; }
.admin-add input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  outline: none;
}
.admin-add input:focus { border-color: var(--accent); }

/* A count of people waiting, on the topbar button that leads to them. */
.icon-btn { position: relative; }
.badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0d12;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 15px;
  text-align: center;
}

.more-tools { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .now { grid-template-columns: 150px minmax(0, 1fr) 200px; gap: 20px; }
  .diag.large { width: 132px; }
  .controls { grid-template-columns: auto 1fr; }
  .controls .time { grid-row: 1; }
  .controls .buttons { grid-row: 1; justify-self: end; }
  .controls .tools { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 860px), (max-height: 740px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  .player { grid-template-rows: auto 116px auto auto; }
  .sheet-body { max-height: 60vh; }
  .start { grid-template-columns: 1fr; padding: 24px 18px; }
}

@media (max-width: 860px) {
  .link-row { margin-top: 18px; }
  .link-row .btn span { display: inline; }
  /* Squeezed onto one line the song title leaves no room for its own details,
     so the header becomes two rows: controls, then the track. */
  .app { grid-template-rows: auto minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 10px; row-gap: 2px; }
  .track { order: 3; flex: 1 0 100%; padding-left: 0; border-left: 0; }
  .track-meta { font-size: 11.5px; gap: 2px 10px; }
  .brand-name, .btn span { display: none; }
  /* ...except where the label is the only thing telling you what it does. */
  .admin-head .btn span { display: inline; }
  .track { padding-left: 10px; }
  .now { grid-template-columns: 1fr; text-align: center; padding: 18px; }
  .now-diagram { order: 2; min-height: 0; }
  .now-sub, .now-sure, .now-kicker { justify-content: center; }
  .now-next { order: 3; }
  .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:nth-child(4n + 1) { border-left-width: 1px; }
  .cell:nth-child(2n + 1) { border-left-width: 2px; }
  .player { padding: 12px; }
}

/* A phone is held at arm's length, one-handed, usually while holding an
   instrument in the other. What earns its place on that screen is the chord you
   are on, the one coming, and the transport. Everything else -- the chord
   sheet, the fingering of the next chord, a volume slider the phone already has
   hardware buttons for -- is either folded away behind Tools or simply gone.
   Nothing is removed from the desktop layout by any of this. */
@media (max-width: 720px) {
  /* The sheet is a reference table; on a phone it is a wall of small type that
     pushes the player off the screen. */
  .sheet { display: none; }
  .player { grid-template-rows: auto minmax(0, 1fr) auto; }

  /* The lane already shows what is coming, with more of it. */
  .now-next { display: none; }
  .lane-zoom { display: none; }
  /* The page scrolls on a phone, so the lane's 1fr row can be squeezed to
     nothing when Tools unfolds underneath it. Give it a floor: a chord strip
     with no chords in it looks broken rather than compact. */
  .lane { min-height: 104px; }

  /* Hardware buttons do this better, and it is one slider too many. */
  .volume { display: none; }

  .now { padding: 14px 12px; gap: 10px; }
  .now-chord { font-size: clamp(44px, 17vw, 76px); line-height: 1.05; }
  .now-diagram { max-width: 150px; margin: 0 auto; }

  /* One row: elapsed time, transport, and the way to the rest. Then vocals
     across the full width. Everything else is behind Tools. Each of these is
     placed explicitly because the Tools button is itself a grid child, and
     left to flow it would push the transport off the right edge at 375px. */
  .controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 8px;
  }
  .controls .time { grid-column: 1; grid-row: 1; justify-self: start; }
  .controls .buttons { grid-column: 2; grid-row: 1; justify-self: center; gap: 8px; }
  .more-tools { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; }
  .controls .tools {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  /* The lane scrubs by touch and is right above these, so stepping chord by
     chord does not also need two of the five buttons under the thumb. */
  #btnPrevChord, #btnNextChord { display: none; }
  .play { width: 54px; height: 54px; }
  .icon-btn { width: 40px; height: 40px; }

  /* Vocals is the reason most people are here: it never folds away. */
  .vocals { flex: 1 0 100%; min-width: 0; }
  .app:not([data-tools="open"]) .tools > *:not(.vocals) { display: none; }

  .topbar { padding: 7px 10px; }
  .track-meta { display: none; }
  .gate-card { padding: 26px 18px 20px; }
  .admin-card { padding: 16px 14px; }
  .admin-list li { flex-wrap: wrap; }
  .admin-list .acts { width: 100%; }
  .admin-list .acts .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}