/* ============================================================
   音樂工作室 chrome.

   Three rules shape all of it:

     - The four rows (transport / tracks / roll / dock) are a single
       CSS grid that never scrolls. Only the roll and the drawer move.
       On a phone the URL bar can't push the keyboard off the bottom
       because nothing here is taller than the viewport.

     - The drawer is ONE implementation. A media query turns the same
       markup from a right-hand panel into a bottom sheet, so there is
       no separate mobile modal and no mirrored controls.

     - No backdrop-filter on the transport, track strip or dock. Those
       elements sit against a canvas that repaints continuously while
       the playhead moves, and a blurred layer over a repainting layer
       is the single biggest framerate killer on mid-range Android.
       Blur is allowed on the drawer, which only ever covers a still page.
   ============================================================ */

:root {
  --bg: #14161a;
  --bg-roll: #101216;
  --panel: #1b1e24;
  --panel-hi: #23272e;

  --ink: #ece7e0;
  --ink-dim: #948d85;
  --ink-faint: #5f5a55;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent: #e0a75e;        /* playhead, active control, step cursor */
  --accent-dim: rgba(224, 167, 94, 0.22);
  --rec: #dd7b74;
  --good: #8fbf8a;

  --radius: 13px;
  --shadow: 0 12px 38px rgba(0, 0, 0, 0.5);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --dock-h: 168px;
  --row-h: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  position: fixed; inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", "Segoe UI", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Nothing on this page is prose, and a long press is an editing gesture here.
   Without all three of these a long press on a phone starts a text selection,
   pops the callout menu, or raises the iOS magnifier over the note you were
   trying to edit. The unprefixed property alone is not enough on Safari. */
#app, #app *, #drawer, #drawer *, #toasts, #toasts * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tinput, input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

button, input, select { font: inherit; color: inherit; }

#app {
  position: fixed; inset: 0;
  display: grid;
  /* minmax(0, 1fr), not the default auto: three of these rows scroll
     horizontally, and an auto column takes its minimum from their content, so
     the whole app would grow as wide as the widest chip row and the keyboard
     would run off the side of the phone. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding-top: var(--safe-t);
}
#transport, #trackstrip, #roll, #dock { min-width: 0; }

/* ── shared controls ───────────────────────────────────────── */

.btn {
  appearance: none;
  font-size: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: rgba(255, 255, 255, 0.1); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1408; font-weight: 600; }
.btn.danger { color: var(--rec); border-color: rgba(221, 123, 116, 0.35); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Square tap targets for the transport. 44px is the smallest thing a
   thumb hits reliably, so nothing here goes below it. */
.tbtn {
  appearance: none;
  width: 44px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.tbtn:hover { background: rgba(255, 255, 255, 0.1); }
.tbtn.on { background: var(--accent); border-color: var(--accent); color: #1a1408; }
.tbtn.rec.on { background: var(--rec); border-color: var(--rec); color: #22100f; }
.tbtn svg { display: block; }

/* A chip is the small pill used for stepped choices (note length, octave). */
.chip {
  appearance: none;
  padding: 7px 11px;
  min-height: 34px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #1a1408; font-weight: 600; }

.readout {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.readout b { color: var(--ink); font-weight: 600; }

/* ── transport ─────────────────────────────────────────────── */

#transport {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#transport::-webkit-scrollbar { display: none; }

#transport .spacer { flex: 1 1 auto; min-width: 4px; }

/* Tap the number, drag it sideways to scrub. Two ways in, because a
   number input on a phone opens a keyboard over the whole app. */
.stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  flex: none;
  touch-action: none;
}
.stepper button {
  appearance: none; background: none; border: 0;
  width: 30px; height: 38px;
  color: var(--ink-dim); font-size: 17px; line-height: 1;
  cursor: pointer;
}
.stepper button:hover { color: var(--ink); }
.stepper .val {
  min-width: 62px; text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  cursor: ew-resize;
  user-select: none;
}
.stepper .val small { display: block; font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.06em; }

/* ── track strip ───────────────────────────────────────────── */

#trackstrip {
  display: flex; align-items: stretch; gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
#trackstrip::-webkit-scrollbar { display: none; }

.track {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px;
  min-height: 42px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tcol, var(--ink-faint));
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.track.on { background: var(--panel-hi); border-color: var(--line-strong); border-left-color: var(--tcol); }
.track.muted { opacity: 0.45; }
.track-name { font-size: 13px; white-space: nowrap; }
.track-inst { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.track-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.track-flags { display: flex; gap: 3px; }
.tflag {
  appearance: none; background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 26px; height: 26px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
}
.tflag.on { background: var(--accent); border-color: var(--accent); color: #1a1408; }
.tflag.more { font-size: 15px; line-height: 0.6; letter-spacing: 0.5px; }

#track-add {
  flex: none;
  width: 42px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: none;
  color: var(--ink-dim);
  font-size: 19px;
  cursor: pointer;
}
#track-add:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }

/* ── roll ──────────────────────────────────────────────────── */

#roll {
  position: relative;
  background: var(--bg-roll);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
#roll canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
}
#roll-notes, #roll-head { pointer-events: none; }

/* ── keyboard dock ─────────────────────────────────────────── */

#dock {
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}
body.dock-collapsed #dock-keys { display: none; }

#dock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  /* One line, always. Wrapping here would push the keyboard off a phone
     screen, which is the one thing the layout must never do. */
  flex-wrap: nowrap;
}
#dock-bar::-webkit-scrollbar { display: none; }
#dock-bar .spacer { flex: 1 1 auto; min-width: 4px; }
#dock-bar .opts { flex-wrap: nowrap; flex: none; }
#dock-bar > * { flex: none; }

#dock-keys {
  display: block;
  width: 100%;
  height: var(--dock-h);
  touch-action: none;
  user-select: none;
}

/* ── drawer: right panel on desktop, bottom sheet under 640px ── */

#scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s ease;
  z-index: 40;
}
body.drawer-open #scrim { opacity: 1; pointer-events: auto; }

#drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: rgba(27, 30, 36, 0.94);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 50;
  display: flex; flex-direction: column;
  padding-top: var(--safe-t);
}
#drawer.open { transform: none; }

.drawer-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.drawer-close {
  appearance: none; background: none; border: 0;
  color: var(--ink-dim); font-size: 24px; line-height: 1;
  cursor: pointer; padding: 2px 6px;
}
.drawer-close:hover { color: var(--ink); }

.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(28px + var(--safe-b));
}

.group { margin-bottom: 20px; }
.group-label {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.srow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.srow:last-child { border-bottom: 0; }
.srow-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srow-txt b { font-size: 13.5px; font-weight: 500; }
.srow-txt small { font-size: 11.5px; color: var(--ink-dim); line-height: 1.4; }
.srow-ctl { flex: none; display: flex; gap: 6px; align-items: center; }

.srow.stack { flex-direction: column; align-items: stretch; }
.srow.stack .srow-ctl { margin-top: 8px; }

.opts { display: flex; flex-wrap: wrap; gap: 6px; }

.tinput {
  appearance: none;
  min-width: 160px; max-width: 100%;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
}
.tinput:focus { outline: none; border-color: var(--accent); }

.toggle {
  position: relative;
  width: 46px; height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  cursor: pointer;
  flex: none;
  transition: background 0.18s ease;
}
.toggle .pip {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.18s ease, background 0.18s ease;
}
.toggle.on { background: var(--accent-dim); border-color: var(--accent); }
.toggle.on .pip { transform: translateX(18px); background: var(--accent); }

.slider { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.slider input[type=range] { width: 100%; accent-color: var(--accent); }

.songrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
}
.songrow.on { border-color: var(--accent); }
.songrow-meta { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.songrow-del {
  appearance: none; background: none; border: 0;
  color: var(--ink-faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.songrow-del:hover { color: var(--rec); }

.note-text { font-size: 11.5px; color: var(--ink-faint); line-height: 1.55; margin: 6px 0 0; }

/* ── toasts ────────────────────────────────────────────────── */

#toasts {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-h) + 74px + var(--safe-b));
  z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
  width: max-content; max-width: min(92vw, 460px);
}
.toast {
  background: rgba(12, 13, 16, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 10px 15px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--shadow);
  animation: toast-in 0.2s ease;
  pointer-events: auto;
  text-align: center;
}
.toast.warn { border-color: rgba(224, 167, 94, 0.5); }
.toast-actions { display: flex; gap: 8px; justify-content: center; margin-top: 9px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── render veil (export only) ─────────────────────────────── */

.home-link {
  display: block; margin-top: 20px;
  font-size: 12.5px; color: var(--ink-faint); text-decoration: none;
}
.home-link:hover { color: var(--ink-dim); }

a.tbtn { text-decoration: none; }

#veil {
  position: fixed; inset: 0;
  z-index: 70;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  background: rgba(20, 22, 26, 0.86);
  font-size: 14px; color: var(--ink-dim);
}
#veil .bar {
  width: 160px; height: 3px; border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
#veil .bar i {
  display: block; width: 40%; height: 100%;
  background: var(--accent);
  animation: veil-slide 1.1s ease-in-out infinite;
}
@keyframes veil-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── one breakpoint ────────────────────────────────────────── */

@media (max-width: 640px) {
  :root { --dock-h: 148px; }

  #transport { padding: 7px 8px; gap: 6px; }
  #trackstrip { padding: 5px 8px; }

  /* Same drawer markup, bottom sheet placement. */
  #drawer {
    top: auto; right: 0; left: 0; bottom: 0;
    width: auto;
    height: min(76vh, 620px);
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    padding-top: 0;
  }
  #drawer.open { transform: none; }
  .drawer-head { padding-top: 18px; }
  .drawer-head::before {
    content: '';
    position: absolute; top: 7px; left: 50%;
    width: 34px; height: 4px; margin-left: -17px;
    border-radius: 2px;
    background: var(--line-strong);
  }

  #toasts { bottom: calc(var(--dock-h) + 66px + var(--safe-b)); }
}

@media (hover: none) {
  .btn:hover, .tbtn:hover, .chip:hover, .tflag:hover { background: inherit; }
}

button:focus-visible, .toggle:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}