/* runTIME — dark athletic theme */
:root {
  --bg: #0b0e14;
  --panel: #121826;
  --panel-2: #182033;
  --line: #232d42;
  --text: #e8ecf5;
  --muted: #8a94ab;
  --accent: #ff6a2b;        /* start-gun orange */
  --accent-soft: #ff6a2b33;
  --run: #2dd4a7;           /* interval run */
  --walk: #ffd166;          /* interval walk */
  --marker: #4cc9f0;        /* distance markers */
  --hit: #2dd4a7;
  --near: #ffd166;
  --off: #4a5568;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------------------------------------- top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #131a2a, #0f1523);
}
.brand { display: flex; align-items: baseline; gap: 10px; font-size: 24px; font-weight: 700; }
.brand-run { color: var(--text); letter-spacing: -0.5px; }
.brand-time {
  color: var(--accent);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: 1px;
}
.tagline { font-size: 12px; color: var(--muted); font-weight: 400; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.music-status { font-size: 12px; color: var(--run); }
.music-status.demo { color: var(--muted); }

/* -------------------------------------------------------------- layout */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 288px 1fr 300px;
  gap: 14px;
  padding: 14px;
  min-height: 0;
}
.panel { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.card.grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.h-toggle { cursor: pointer; display: flex; align-items: center; gap: 7px; }
.h-toggle input { accent-color: var(--accent); }

.field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.field-row label { width: 82px; flex-shrink: 0; color: var(--muted); font-size: 12px; }
input[type="text"], input[type="number"], input[type="search"], select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
input.tiny { width: 58px; text-align: center; }
.ratio-colon { color: var(--muted); font-weight: 700; }
.unit-suffix { color: var(--muted); font-size: 12px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.seg { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button {
  background: none; border: none; color: var(--muted);
  padding: 5px 14px; cursor: pointer; font: inherit; font-size: 12px;
}
.seg button.active { background: var(--accent); color: #fff; font-weight: 600; }

.derived { font-size: 12px; color: var(--marker); margin-top: 2px; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-apple { background: #fa2d48; border-color: #fa2d48; color: #fff; font-weight: 600; }
.btn-apple:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* --------------------------------------------------------------- stats */
.stats dl { display: flex; flex-direction: column; gap: 6px; }
.stats dl > div { display: flex; justify-content: space-between; font-size: 13px; }
.stats dt { color: var(--muted); }
.stats dd { font-variant-numeric: tabular-nums; }
.stats .good { color: var(--run); }
.stats .bad { color: var(--accent); }
.stats .warn { color: var(--walk); }

/* ------------------------------------------------------------ timeline */
.viz-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.viz-scroller { flex: 1; overflow-y: auto; padding: 0 10px; }
.viz {
  position: relative;
  display: grid;
  /* run-info rail (clock | distance | intervals), then the music */
  grid-template-columns: 56px 104px 26px 1fr;
  column-gap: 8px;
}
.col-ruler, .col-intervals, .col-markers { position: relative; }

/* ruler */
.ruler-tick {
  position: absolute; right: 0; left: 0;
  border-top: 1px solid var(--line);
}
.ruler-label {
  position: absolute; right: 4px; top: -8px;
  font-size: 10.5px; color: var(--muted);
  background: var(--panel); padding: 1px 3px;
  font-variant-numeric: tabular-nums;
}

/* intervals gutter */
.col-intervals.off { display: none; }
.seg-run, .seg-walk { position: absolute; left: 4px; right: 4px; border-radius: 3px; }
.seg-run {
  background: linear-gradient(180deg, #1d4a3d, #16382f);
  border: 1px solid #2dd4a744;
  display: flex; align-items: center; justify-content: center;
}
.seg-run span { font-size: 9px; color: var(--run); opacity: 0.85; }
.seg-walk { background: repeating-linear-gradient(45deg, var(--walk), var(--walk) 3px, #b98f3a 3px, #b98f3a 6px); }

/* transport bar */
.transport {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.btn-play-main {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-size: 15px; line-height: 1; flex-shrink: 0;
}
.btn-play-main:hover { filter: brightness(1.12); }
.np { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#np-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#np-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-time { font-size: 12px; color: var(--marker); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* playhead — live position while playing */
.playhead {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--marker);
  box-shadow: 0 0 10px #4cc9f066;
  z-index: 7; pointer-events: none;
}
.playhead-label {
  position: absolute; right: 6px; top: -9px;
  background: var(--marker); color: #06202c;
  font-size: 10.5px; font-weight: 700;
  border-radius: 8px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* song blocks */
.col-blocks { display: flex; flex-direction: column; min-width: 0; }
.block {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, var(--panel-2), #141b2c);
  border: 1px solid var(--line);
  border-top: none;
  border-left: 3px solid var(--off);
  overflow: hidden;
  cursor: grab;
  min-height: 7px;
  user-select: none;
}
.col-blocks .block:first-child { border-top: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.block:hover { background: linear-gradient(180deg, #1e2740, #171f33); z-index: 2; }
.block.match-hit { border-left-color: var(--hit); }
.block.match-near { border-left-color: var(--near); }
.block.match-off { border-left-color: var(--off); }
.block.match-unknown { border-left-color: #2c3650; }
.block.in-buffer { opacity: 0.8; }
.block.overtime { opacity: 0.35; filter: saturate(0.4); }
.block.finish-song { box-shadow: inset 0 0 0 1px var(--accent); }
.block.sortable-ghost { opacity: 0.35; }
.block.sortable-chosen { cursor: grabbing; }

.block-main { display: flex; flex-direction: column; min-width: 0; }
.block-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-artist { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-side { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.block-dur { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.finish-badge { font-size: 14px; }

.bpm-chip {
  background: none; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-size: 11px; padding: 1px 7px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.bpm-chip small { color: var(--muted); margin-left: 2px; font-size: 9px; }
.match-hit .bpm-chip { border-color: var(--hit); color: var(--hit); }
.match-near .bpm-chip { border-color: var(--near); color: var(--near); }
.bpm-chip:hover { border-color: var(--accent); }

.block-remove {
  background: none; border: none; color: var(--muted); font-size: 15px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.block-remove:hover { color: var(--accent); }

.block-play {
  background: none; border: none; color: var(--marker); font-size: 12px;
  cursor: pointer; padding: 0 2px; line-height: 1;
  display: none;
}
body.connected .block:hover .block-play { display: inline; }
.block-play:hover { color: var(--accent); }

/* size tiers */
.block.compact { padding: 0 8px; }
.block.compact .block-title { font-size: 12px; }
.block.compact .block-artist { display: none; }
.block.micro { padding: 0 8px; }
.block.micro .block-main { flex-direction: row; gap: 6px; align-items: center; }
.block.micro .block-title { font-size: 10.5px; font-weight: 500; }
.block.micro .block-artist { display: none; }
.block.micro .block-dur, .block.micro .bpm-chip { font-size: 9.5px; }
.block.micro .bpm-chip { padding: 0 5px; }

/* silence zone */
.silence {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--line); border-top: none; border-radius: 0 0 6px 6px;
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, #ffffff05 8px, #ffffff05 16px);
  color: var(--muted); font-size: 12.5px;
  overflow: hidden;
}
.silence em { color: var(--accent); font-style: normal; }

/* distance markers — one readable line in the run-info rail */
.marker {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: baseline; gap: 6px;
  border-top: 1px solid #4cc9f04d;
  padding: 1px 2px 0;
}
.marker-d { font-size: 12px; color: var(--marker); font-weight: 700; letter-spacing: 0.2px; }
.marker-t { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.marker.finish { border-top: none; }
.marker.finish .marker-d { color: var(--accent); font-size: 12.5px; }
.marker.finish .marker-t { color: var(--text); }

/* cooldown buffer zone (in the rail, next to the clock) */
.buffer-zone {
  position: absolute; left: 0; right: 0;
  background: linear-gradient(180deg, #2dd4a716, transparent);
  border-left: 2px solid #2dd4a755;
  pointer-events: none;
}
.buffer-zone span {
  position: absolute; top: 3px; right: 4px;
  font-size: 9.5px; color: var(--run); opacity: 0.85;
  text-transform: uppercase; letter-spacing: 1px;
}

/* finish line across everything */
.finish-line {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--accent);
  box-shadow: 0 0 12px var(--accent-soft), 0 0 3px var(--accent);
  z-index: 6; pointer-events: none;
}
.finish-line::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 6px;
  background: repeating-linear-gradient(90deg, #fff2, #fff2 6px, transparent 6px, transparent 12px);
}

/* -------------------------------------------------------------- library */
.library .card input[type="search"] { margin-bottom: 10px; }
.library-results { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.lib-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  cursor: grab;
}
.lib-item:hover { border-color: var(--marker); }
.lib-item.sortable-ghost { opacity: 0.4; }
.lib-meta { min-width: 0; display: flex; flex-direction: column; }
.lib-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-artist { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-add { flex-shrink: 0; padding: 2px 9px; font-weight: 700; color: var(--run); }

/* ---------------------------------------------------------- bpm popover */
.bpm-popover {
  position: fixed; z-index: 50;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  width: 180px;
  box-shadow: 0 8px 24px #0009;
}
.bpm-popover-row { display: flex; gap: 6px; margin-bottom: 6px; }
.bpm-popover-row:last-child { margin-bottom: 0; }
.bpm-popover input { width: 80px; }

/* --------------------------------------------------------------- footer */
.footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.footer a { color: var(--walk); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  body { overflow: auto; }
  .layout { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .viz-wrap { min-height: 70vh; }
  .panel { overflow: visible; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }