/* Clockor - one screen, no scrolling except the track list. */

:root {
  /* Solo is the original room: charcoal and green. Multi rewrites every
     chrome token below so the whole interface changes color with the mode. */
  --bg: #0a0e13;
  --panel: #121a24;
  --panel-2: #182231;
  --line: #23303f;
  --line-soft: rgba(255, 255, 255, .07);
  --txt: #e6edf5;
  --dim: #8194a8;
  --dimmer: #5c6b7d;
  --acc: #3ddc84;
  --acc-ink: #b8f5d2;
  --warn: #ff6b6b;
  --amber: #ffb648;
  --topbar-from: #141d28;
  --topbar-to: #101822;
  --chrome: #0e141c;
  --well: #0d141d;
  --chrome-deep: #0c1219;
  --focus-line: #35506d;
  --hover-line: #33465c;
  --times: #8aa4b8;
  --scroll-track: #0b1118;
  --scroll-thumb: #263544;
  --scroll-hover: #33465c;

  /* --row must stay in sync with ROW in js/timeline.js */
  --row: 36px;
  /* Open folder header grows for the mini Recent/Most bar; match FOLDER_OPEN_EXTRA. */
  --folder-open-extra: 20px;
  --headw: 200px;
  --ruler: 30px;
  --notes: 22px;

  /* Thin color lead · name+meta body · remove.
     Times and solo/on/↑ live under the name so the title can use the full width.
     Lasso sits absolute on the left edge so it does not eat name space. */
  --leadw: 8px;
  --lassow: 14px;
  --headcols: var(--leadw) 1fr 12px;
  --headgap: 4px;
  --headpad: 0 4px 0 12px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

body[data-mode="multi"] {
  --bg: #16122a;
  --panel: #221c3c;
  --panel-2: #2c2550;
  --line: #4a3d72;
  --line-soft: rgba(180, 160, 255, .12);
  --txt: #f2eefe;
  --dim: #b4a8d6;
  --dimmer: #7d719e;
  --acc: #a898ff;
  --acc-ink: #e4dfff;
  --topbar-from: #2a2250;
  --topbar-to: #1c1640;
  --chrome: #1c1640;
  --well: #181430;
  --chrome-deep: #16122c;
  --focus-line: #7a68c8;
  --hover-line: #5c4c98;
  --times: #c4b6ee;
  --scroll-track: #141028;
  --scroll-thumb: #3c3470;
  --scroll-hover: #5648a0;
}

* { box-sizing: border-box; }

/* The hidden attribute has to outrank component display rules. Anything styled
   display: flex or grid otherwise ignores being hidden completely, and since the
   code that hides an element also stops positioning it, it freezes on screen
   wherever it last was. One !important here beats remembering a [hidden] guard
   on every component that gets shown and hidden. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--txt);
  font: 13px/1.4 var(--ui);
  -webkit-font-smoothing: antialiased;
  transition: background-color .28s ease, color .28s ease;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--acc); }
.warnish { color: var(--amber); }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(var(--topbar-from), var(--topbar-to));
  border-bottom: 1px solid var(--line);
  transition: background .28s ease, border-color .28s ease;
  flex: 0 0 auto;
}

.brand { display: flex; align-items: center; gap: 8px; }

.logo {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  position: relative;
}
.logo::after {
  content: '';
  position: absolute;
  left: 50%; top: 3px;
  width: 2px; height: 5px;
  background: var(--acc);
  transform-origin: bottom center;
  animation: sweep 4s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.brandname { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.appver {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--dimmer);
  opacity: .85;
  user-select: none;
}

.label {
  width: 190px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--txt);
  font: 12.5px var(--ui);
}
.label:focus { outline: none; border-color: var(--focus-line); background: var(--panel); }
.label::placeholder { color: var(--dimmer); }

.readout {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 9px;
  margin-left: 4px;
  min-width: 0;
  --h: 150;
}
.readout-name {
  grid-column: 1 / -1;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.readout-time {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1;
  color: hsl(var(--h), 20%, 62%);
  transition: color .25s;
}
.readout[data-live="true"] .readout-time {
  color: hsl(var(--h), 78%, 62%);
  text-shadow: 0 0 22px hsla(var(--h), 90%, 55%, .35);
}
.readout-live { font-size: 12px; color: var(--acc); opacity: .9; }

.tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--txt);
  font: 12px var(--ui);
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--panel-2); border-color: var(--hover-line); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: default; transform: none; }
.btn-icon { width: 30px; padding: 6px 0; text-align: center; font-size: 14px; line-height: 1; }
.btn-primary {
  border-color: color-mix(in srgb, var(--acc) 50%, transparent);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc-ink);
}

.btn-toggle.on {
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  color: var(--acc-ink);
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mode-lab {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
  user-select: none;
  flex: 0 0 auto;
}
.mode-pair {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(0, 0, 0, .18);
}
.mode-opt {
  border: none;
  background: transparent;
  color: var(--dim);
  font: 600 11px/1 var(--ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mode-opt + .mode-opt { border-left: 1px solid var(--line); }
.mode-opt:hover { color: var(--txt); background: rgba(255, 255, 255, .04); }
.mode-opt[aria-pressed="true"] {
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  color: var(--acc-ink);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--acc) 75%, transparent);
}

@keyframes blip {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 107, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
}

/* ---------- timeline grid ---------- */

.grid { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* Straddles the seam between the track names and the lanes, spanning all three
   rows so it can be grabbed anywhere down the screen. */
.colsizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--headw);
  width: 8px;
  /* Weighted onto the header's own right padding, so it steals as little of the
     paintable canvas as possible. */
  margin-left: -5px;
  z-index: 6;
  cursor: col-resize;
}
.colsizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: transparent;
  transition: background .12s;
}
.colsizer:hover::after, .colsizer.dragging::after { background: var(--acc); }
body.colsizing { cursor: col-resize; user-select: none; }

.col-head {
  flex: 0 0 var(--headw);
  width: var(--headw);
  height: var(--ruler);
  display: grid;
  grid-template-columns: var(--headcols);
  align-items: center;
  gap: var(--headgap);
  padding: var(--headpad);
  border-right: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  overflow: visible;
  z-index: 4;
}
.grid-head { display: flex; align-items: stretch; flex: 0 0 auto; background: var(--chrome); border-bottom: 1px solid var(--line); transition: background .28s ease, border-color .28s ease; overflow: visible; z-index: 4; }
/* Full width of the track column — the empty times/acts spacers below are
   only there so track rows line up; the header buttons need the room.
   overflow visible so the Sort menu is not clipped. */
.ch-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}
.ch-title > span:first-child { flex: 0 0 auto; }
.col-head > .headlab,
.col-head > span:empty { display: none; }
.col-head-hint {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  font-size: 10px;
  color: var(--dimmer);
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.headlab {
  font-size: 9px;
  letter-spacing: .04em;
  text-align: right;
  color: var(--dimmer);
  white-space: nowrap;
  overflow: hidden;
  cursor: help;
}
.headlab-times { color: var(--times); text-align: right; }
.headlab-acts { cursor: default; }

.ruler-wrap { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; height: var(--ruler); }
.ruler-wrap canvas { display: block; cursor: grab; }

.cursor-chip {
  position: absolute;
  top: 2px; left: 0;
  padding: 3px 7px 4px;
  border-radius: 5px;
  background: rgba(10, 15, 22, .94);
  border: 1px solid var(--hover-line);
  font-size: 10.5px;
  color: #cfe0f2;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  line-height: 1.25;
  text-align: center;
}
.chip-main { color: #e8f0fa; font-weight: 600; }
.chip-sub { color: var(--acc); font-size: 10px; opacity: .95; margin-top: 1px; }
.cursor-chip.is-drag {
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  background: color-mix(in srgb, var(--well) 95%, transparent);
}
.cursor-chip.is-drag .chip-main {
  color: var(--acc-ink);
  font-size: 12px;
  letter-spacing: .02em;
}
.cursor-chip.is-drag .chip-sub { color: var(--times); }

/* ---------- notes strip ---------- */

.grid-notes {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: var(--notes);
  background: var(--chrome-deep);
  border-bottom: 1px solid var(--line);
  transition: background .28s ease, border-color .28s ease;
}

.grid-find {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 30px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.track-find {
  flex: 0 0 var(--headw);
  width: var(--headw);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px 0 10px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.track-find-ico {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--dimmer);
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  opacity: .85;
}
.track-find-ico::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 5px;
  height: 1.5px;
  background: var(--dimmer);
  transform: rotate(45deg);
  border-radius: 1px;
}
.track-find input {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--txt);
  font: 12px var(--ui);
  outline: none;
}
.track-find input::placeholder { color: var(--dimmer); }
.track-find input:focus { border-color: var(--acc); }
.find-show {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  line-height: 1;
  user-select: none;
}
.find-show-label {
  font: 600 8px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.find-show-opts {
  display: flex;
  align-items: center;
  gap: 6px;
}
.find-show-opt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  color: var(--dim);
  font: 10px/1 var(--ui);
  cursor: pointer;
  white-space: nowrap;
}
.find-show-opt:hover { color: var(--txt); }
.find-show-opt input {
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: var(--acc);
  cursor: pointer;
}
.find-show-opt:has(input:checked) { color: var(--txt); }
.track-find-clear {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--dim);
  font: 14px/18px var(--ui);
  cursor: pointer;
}
.track-find-clear:hover { color: var(--txt); background: color-mix(in srgb, var(--acc) 18%, transparent); }
.track-find-clear[hidden] { display: none !important; }
.track-find-restore {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  position: relative;
}
.track-find-restore::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.track-find-restore::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 3px;
  border: 3px solid transparent;
  border-bottom-color: currentColor;
  border-right-color: currentColor;
  transform: rotate(-20deg);
}
.track-find-restore:hover { color: var(--acc); background: color-mix(in srgb, var(--acc) 18%, transparent); }
.track-find-restore[hidden] { display: none !important; }
.track-find-rest { flex: 1 1 auto; min-width: 0; }

.notes-head {
  flex: 0 0 var(--headw);
  width: var(--headw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 10px;
  border-right: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.notes-head-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.notes-add {
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--amber);
  font: 13px/1 var(--ui);
  cursor: pointer;
}
.notes-add:hover { background: var(--panel); border-color: var(--focus-line); }

.folderbtn {
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--dim);
  font: 11px/1 var(--ui);
  cursor: pointer;
}
.folderbtn:hover, .folderbtn.droptarget {
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
}
.folderbtn.droptarget {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent);
}

.notes-strip {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  cursor: copy;
}

.notepin {
  position: absolute;
  top: 3px;
  left: 0;
  max-width: 190px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px 0 4px;
  border: 1px solid rgba(255, 182, 72, .45);
  border-left: 2px solid var(--amber);
  border-radius: 3px;
  background: rgba(255, 182, 72, .12);
  color: #ffd79a;
  font: 10.5px/1 var(--ui);
  white-space: nowrap;
  cursor: grab;
  user-select: none;
}
.notepin:hover { background: rgba(255, 182, 72, .22); border-color: rgba(255, 182, 72, .8); }
.notepin b { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.notepin.dragging { cursor: grabbing; background: rgba(255, 182, 72, .3); z-index: 4; }
.notepin.blank b { color: #a8875c; font-style: italic; }

.notes-empty {
  position: absolute;
  top: 0; left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #45566a;
  font-size: 10.5px;
  pointer-events: none;
}

/* Scrollport wrap: runaways live here (not inside the scrolling element) so
   top/bottom pin to the visible edge instead of the bottom of the track list. */
.grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.grid-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.cols { display: flex; align-items: stretch; min-height: 100%; }

/* Off-screen running tracks: pinned to the scrollport edges. */
.runaway {
  position: absolute;
  left: 0;
  width: var(--headw);
  max-width: 100%;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  pointer-events: none;
  box-sizing: border-box;
}
.runaway-top {
  top: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 55%, transparent), transparent);
}
.runaway-bot {
  bottom: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 55%, transparent), transparent);
}
.runaway[hidden] { display: none !important; }
.runaway-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 10px 5px 8px;
  border: 1px solid hsla(var(--h), 55%, 45%, .55);
  border-radius: 6px;
  background: hsla(var(--h), 40%, 18%, .92);
  color: var(--txt);
  font: 12px/1.2 var(--ui);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.runaway-chip:hover { background: hsla(var(--h), 45%, 22%, .95); }
.runaway-arrow { color: hsl(var(--h), 70%, 62%); font-size: 9px; flex: 0 0 auto; }
.runaway-rail {
  width: 3px; align-self: stretch; min-height: 14px; border-radius: 2px; flex: 0 0 auto;
  background: hsl(var(--h), 70%, 52%);
  box-shadow: 0 0 0 0 hsla(var(--h), 80%, 55%, .5);
  animation: runawaypulse 1.6s ease-out infinite;
}
@keyframes runawaypulse {
  0% { box-shadow: 0 0 0 0 hsla(var(--h), 80%, 55%, .55); }
  70% { box-shadow: 0 0 0 6px hsla(var(--h), 80%, 55%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(var(--h), 80%, 55%, 0); }
}
.runaway-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.runaway-hint { color: var(--dim); flex: 0 0 auto; font-size: 11px; }
.runaway-dur { color: hsl(var(--h), 65%, 68%); flex: 0 0 auto; font-size: 11px; }

.heads { flex: 0 0 var(--headw); width: var(--headw); border-right: 1px solid var(--line); }

/* Tall spacer for scroll; the canvas itself is only the viewport (pinned in JS).
   A full-height canvas was the main scroll hitch on long track lists. */
.lanes { flex: 1 1 auto; min-width: 0; overflow: visible; position: relative; }
.lanes canvas {
  display: block;
  touch-action: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

/* ---------- track rows ---------- */

.trow {
  --h: 150;
  position: relative;
  height: var(--row);
  display: grid;
  grid-template-columns: var(--headcols);
  align-items: center;
  gap: var(--headgap);
  padding: var(--headpad);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  user-select: none;
  contain: layout style;
  /* Always-on thin color rail — glanceable hue without a fat dot. */
  box-shadow: inset 3px 0 0 hsl(var(--h), 55%, 44%);
}

/* Find: non-matches stay as a quiet chart backdrop so painting has neighbors.
   Opacity only — CSS filter:saturate on dozens of rows was a real frame hitch. */
.trow[data-ghost="true"] {
  opacity: .32;
}
.trow[data-ghost="true"][data-context="true"] {
  opacity: .55;
}
.trow[data-ghost="true"] .tname,
.trow[data-ghost="true"] .tcat,
.trow[data-ghost="true"] .ttimes {
  color: var(--dimmer);
}

/* How much of the window you are looking at belongs to this track. Sits on the
   row's own bottom edge so it reads at a glance without taking any space. */
.tbar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: hsl(var(--h), 70%, 52%);
  opacity: .55;
  pointer-events: none;
}
.trow[data-live="true"] .tbar { opacity: .9; }

/* Selected OR running: full row tint + brighter left rail. With Solo off,
   every live track uses this same treatment so multiple clocks look equally lit. */
.trow[data-active="true"],
.trow[data-live="true"] {
  background: hsla(var(--h), 55%, 42%, .20);
  box-shadow: inset 3px 0 0 hsl(var(--h), 78%, 62%);
}
.trow[data-active="true"] .tname,
.trow[data-live="true"] .tname {
  color: #fff;
  font-weight: 600;
}
.trow[data-active="true"] .idx,
.trow[data-live="true"] .idx {
  color: hsl(var(--h), 55%, 68%);
}
.trow:hover { background: rgba(255, 255, 255, .035); }
.trow[data-active="true"]:hover,
.trow[data-live="true"]:hover { background: hsla(var(--h), 55%, 42%, .28); }

/* Timeline pointer is over this row — make the name impossible to miss. */
.trow[data-lanehover="true"] {
  background: hsla(var(--h), 58%, 44%, .34);
  box-shadow: inset 3px 0 0 hsl(var(--h), 82%, 66%);
}
.trow[data-lanehover="true"] .tname {
  color: #fff;
  font-weight: 650;
}
.trow[data-lanehover="true"] .idx {
  color: hsl(var(--h), 60%, 72%);
}
.trow[data-lanehover="true"][data-active="true"],
.trow[data-lanehover="true"][data-live="true"] {
  background: hsla(var(--h), 58%, 44%, .40);
  box-shadow: inset 3px 0 0 hsl(var(--h), 78%, 62%);
}
.trow[data-lanehover="true"][data-selected="true"] {
  box-shadow: inset 3px 0 0 hsl(var(--h), 78%, 62%), inset 0 0 0 1px rgba(126, 166, 255, .4);
}

/* Thin clickable color chip — replaces the old fat dot. Still starts/drags. */
.trail {
  width: 3px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 2px;
  cursor: grab;
  justify-self: center;
  align-self: center;
  background: hsl(var(--h), 60%, 50%);
  box-shadow: inset 0 0 0 1px hsla(var(--h), 80%, 70%, .25);
  transition: height .12s, background .12s;
}
.trail:hover { height: 20px; background: hsl(var(--h), 70%, 58%); }
body.rowdragging .trail { cursor: grabbing; }
.trow[data-live="true"] .trail {
  height: 20px;
  background: hsl(var(--h), 85%, 60%);
  animation: trailpulse 1.7s ease-out infinite;
}
@keyframes trailpulse {
  0% { box-shadow: 0 0 0 0 hsla(var(--h), 90%, 60%, .55); }
  70% { box-shadow: 0 0 0 5px hsla(var(--h), 90%, 60%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(var(--h), 90%, 60%, 0); }
}

.idx { font-size: 9px; color: var(--dimmer); text-align: left; flex: 0 0 auto; min-width: 8px; opacity: .7; }

/* Dragging a track row: a gap line shows where it will land. Holding over
   another row for a beat arms combine instead — that row flashes and a chip
   says "drop to combine". Drag away and it is just a rearrange again. */
.trow.dragsource { opacity: .4; }
.trow.dropgap-before { box-shadow: inset 0 2px 0 0 var(--acc); }
.trow.dropgap-after { box-shadow: inset 0 -2px 0 0 var(--acc); }
.trow.mergearmed {
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 85%, transparent);
  animation: mergeflash .55s ease-in-out infinite alternate;
}
.trow.mergearmed .tname { color: #fff; }
@keyframes mergeflash {
  from { background: color-mix(in srgb, var(--acc) 12%, transparent); }
  to { background: color-mix(in srgb, var(--acc) 28%, transparent); }
}
.mergehint {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  background: var(--well);
  color: var(--acc-ink);
  font: 11px var(--ui);
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.mergehint[hidden] { display: none !important; }
body.rowdragging { user-select: none; }
body.rowdragging .trow { cursor: grabbing; }
body.rowdragging .tname,
body.rowdragging .tcat { pointer-events: none; }

/* Name owns the width; times + acts sit in .tmeta underneath. */
.tbody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}
.tname-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tname {
  min-width: 0;
  flex: 1 1 auto;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt);
  font: 12px/1.15 var(--ui);
  padding: 1px 2px;
  border-radius: 4px;
  text-overflow: ellipsis;
  cursor: grab;
}
.tname:hover { background: rgba(255, 255, 255, .05); }
.tname:not([readonly]) { cursor: text; }
.tname:not([readonly]):focus { outline: none; background: var(--well); border-color: var(--focus-line); }
.trow[data-live="true"] .tname { color: #fff; }
body.rowdragging .tname { cursor: grabbing; }

.tcat {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 52px;
  height: 14px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--dimmer);
  font: 9px/14px var(--ui);
  letter-spacing: .02em;
  text-overflow: ellipsis;
  cursor: pointer;
}
.tcat.blank { max-width: 18px; opacity: 0; }
.trow:hover .tcat.blank,
.trow[data-selected="true"] .tcat.blank { opacity: .55; }
.tcat:not(.blank) {
  border-color: color-mix(in srgb, var(--acc) 28%, transparent);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  color: var(--times);
}
.tcat:hover { color: var(--txt); }
.tcat:not([readonly]) {
  opacity: 1;
  max-width: 96px;
  cursor: text;
  background: var(--well);
  border-color: var(--focus-line);
  color: var(--txt);
}
.tcat:not([readonly]):focus { outline: none; }
.tcat::placeholder { color: var(--dimmer); }

.tmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: 14px;
}
.ttimes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 5px;
  line-height: 1.05;
  min-width: 0;
}
.tvis { font-size: 9px; color: var(--times); text-align: left; }
.tvis.zero { color: #4a5464; }
.ttot { font-size: 9.5px; color: var(--dim); text-align: left; }
.trow[data-live="true"] .ttot { color: hsl(var(--h), 80%, 68%); }
.tlife {
  display: none;
  font-size: 8px;
  line-height: 1.05;
  color: var(--amber);
  text-align: left;
  opacity: .88;
  letter-spacing: -.03em;
  white-space: nowrap;
}
body[data-life="on"] .tlife { display: inline; }
.tlife.blank { color: var(--dimmer); opacity: .45; }
.trow[data-live="true"] .tlife { opacity: 1; }

.tacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
  opacity: .5;
  transition: opacity .12s;
}
.trow:hover .tacts,
.trow[data-live="true"] .tacts,
.trow[data-active="true"] .tacts { opacity: 1; }
.tact {
  flex: 0 0 auto;
  height: 14px;
  margin: 0;
  padding: 0 3px;
  border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  color: var(--dim);
  font: 600 8px/12px var(--ui);
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
}
.tact:hover { color: #fff; border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 28%, transparent); }
.tact-solo[data-on="true"] {
  color: #fff;
  border-color: hsl(var(--h), 55%, 52%);
  background: hsla(var(--h), 55%, 42%, .45);
}
.tact-multi[data-on="true"] {
  color: #fff;
  border-color: hsla(150, 45%, 48%, .7);
  background: hsla(150, 40%, 35%, .4);
}
.tact-top { padding: 0 4px; font-size: 9px; }

/* Up/down carets removed — rearrange by dragging the row (Shift+arrows still work). */

.tx {
  border: none;
  background: transparent;
  color: var(--dimmer);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: opacity .12s, color .12s;
}
.trow:hover .tx { opacity: 1; }
.tx:hover { color: var(--warn); }

.addrow {
  display: block;
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: var(--chrome);
  color: var(--dimmer);
  font: 12px var(--ui);
  text-align: left;
  padding: 0 10px 0 24px;
  cursor: pointer;
}
.addrow:hover { color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--chrome)); }

/* Lives in the Tracks header — not in the scrolling list. */
.bringtop {
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  color: var(--acc);
  font: 600 10px/16px var(--ui);
  letter-spacing: .02em;
  text-transform: none;
  cursor: pointer;
}
.bringtop:hover { background: color-mix(in srgb, var(--acc) 30%, transparent); color: #fff; }
.bringtop.bringlive {
  border-color: color-mix(in srgb, var(--amber) 50%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
}
.bringtop.bringlive:hover {
  background: color-mix(in srgb, var(--amber) 28%, transparent);
  color: #fff;
}
.bringtop.bringlife {
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  background: transparent;
  color: var(--amber);
}
.bringtop.bringlife:hover {
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  color: #fff;
}
.bringtop[aria-pressed="true"] {
  background: color-mix(in srgb, var(--acc) 28%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
}
.bringtop.bringlife[aria-pressed="true"] {
  background: color-mix(in srgb, var(--amber) 32%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, var(--amber) 70%, transparent);
}
.bringtop[hidden] { display: none !important; }

/* Open folder: name, then mini ↑ live / Recent / Most, then times/acts. */
.trow[data-kind="folder"][data-collapsed="false"] {
  height: calc(var(--row) + var(--folder-open-extra));
  align-items: start;
  padding-top: 3px;
  padding-bottom: 2px;
}
.foldsort {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  padding: 0 2px;
  min-width: 0;
}
.foldsort .bringtop {
  height: 13px;
  padding: 0 4px;
  font: 600 8px/11px var(--ui);
  border-radius: 3px;
  letter-spacing: .01em;
}

/* Empty gutter: rubber-band select. Wider so it is easy to grab. */
.tlasso {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lassow);
  z-index: 2;
  cursor: crosshair;
}
.tlasso::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .08);
}
.trow:hover .tlasso::after { background: rgba(126, 166, 255, .28); }
body.marqueeing .tlasso { cursor: crosshair; }

.trow[data-selected="true"] {
  background: rgba(126, 166, 255, .10);
  box-shadow: inset 3px 0 0 hsl(var(--h), 55%, 44%), inset 0 0 0 1px rgba(126, 166, 255, .28);
}
.trow[data-selected="true"][data-active="true"] {
  background: hsla(var(--h), 55%, 42%, .22);
  box-shadow: inset 3px 0 0 hsl(var(--h), 78%, 62%), inset 0 0 0 1px rgba(126, 166, 255, .35);
}

.trow[data-depth="1"] { padding-left: 18px; }
.trow[data-kind="folder"] .tname { letter-spacing: .01em; }

/* Folder disclosure: clear chevron, right = closed, down = open. */
.tdisc {
  width: 10px;
  height: 12px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  justify-self: center;
}
.tdisc::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  /* Closed: ▶ */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid hsl(var(--h), 55%, 62%);
  margin: -5px 0 0 -2px;
  transition: transform .12s ease, border-color .12s;
}
.tdisc[data-open="true"]::before {
  /* Open: ▼ — rotate the right-pointing triangle */
  transform: rotate(90deg);
  margin: -5px 0 0 -3px;
}
.tdisc:hover { background: rgba(255, 255, 255, .1); }
.tdisc:hover::before { border-left-color: #fff; }
.trow[data-lanehover="true"] .tdisc::before,
.trow[data-active="true"] .tdisc::before {
  border-left-color: hsl(var(--h), 70%, 72%);
}

.tfocus {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1.5px solid var(--dimmer);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  justify-self: center;
}
.tfocus[data-on="true"] {
  border-color: hsl(var(--h), 70%, 58%);
  background: hsl(var(--h), 70%, 52%);
  box-shadow: inset 0 0 0 2px var(--bg);
}
.tfocus:hover { border-color: var(--txt); }

.trow.folder-droptarget {
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent);
}

.marquee {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  border: 1px solid rgba(126, 166, 255, .75);
  background: rgba(126, 166, 255, .12);
}

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--dim);
  font-size: 13px;
  /* Overlays the lanes, so it must never intercept a paint drag. */
  pointer-events: none;
}
.empty p { margin: 0; }
.empty button { pointer-events: auto; }

body.erasing .lanes canvas { cursor: crosshair; }
body.marqueeing { user-select: none; cursor: crosshair; }

/* ---------- status bar ---------- */

.statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 28px;
  padding: 0 14px;
  background: var(--chrome);
  border-top: 1px solid var(--line);
  transition: background .28s ease, border-color .28s ease;
  font-size: 11px;
  color: var(--dim);
}
.status-left, .status-right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.stat { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stat i { font-style: normal; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--dimmer); }
.stat b { font-weight: 500; color: var(--txt); font-size: 11.5px; }
.stat-hint { color: var(--dimmer); overflow: hidden; text-overflow: ellipsis; }

/* the archive's front door: proof the time went somewhere rather than nowhere */
.archpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 182, 72, .38);
  background: rgba(255, 182, 72, .1);
  color: #ffd79a;
  border-radius: 20px;
  padding: 2px 10px 2px 8px;
  font: 11px var(--ui);
  cursor: pointer;
  white-space: nowrap;
}
.archpill:hover { background: rgba(255, 182, 72, .2); border-color: rgba(255, 182, 72, .7); }
.archpill-back { font-size: 12px; line-height: 1; opacity: .85; }
.archpill span.mono { font-size: 11px; }

/* ---------- sheet ---------- */

.sheet {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--txt);
  border-radius: 12px;
  padding: 0;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.sheet::backdrop { background: rgba(4, 7, 11, .62); backdrop-filter: blur(2px); }
.sheet form { padding: 16px 18px 14px; }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
}
.sheet-head h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.sheet-x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  font: 22px/1 var(--ui);
  cursor: pointer;
}
.sheet-x:hover { background: rgba(255, 255, 255, .06); color: var(--txt); }
.sheet h2 {
  margin: 14px 0 8px;
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}
.sheet h2:first-child { margin-top: 0; }
.sheet-head + h2 { margin-top: 10px; }
.sheet-row { display: flex; gap: 8px; flex-wrap: wrap; }
.life-row { align-items: flex-end; margin-bottom: 8px; }
.life-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 120px;
  min-width: 0;
  font-size: 11px;
  color: var(--dim);
}
.life-field input {
  width: 100%;
  box-sizing: border-box;
}
.life-preview { margin-top: -2px; }
.btn-danger { border-color: rgba(255, 107, 107, .45); color: #ffc4c4; }

/* ---------- sync ---------- */

.cloudpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  border-radius: 20px;
  padding: 2px 9px 2px 7px;
  font: 11px var(--ui);
  cursor: pointer;
  max-width: 210px;
}
.cloudpill:hover { background: var(--panel-2); color: var(--txt); }
.cloudpill span.mono { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloudlamp { width: 7px; height: 7px; border-radius: 50%; background: var(--dimmer); flex: 0 0 auto; }
.cloudpill[data-status="synced"] .cloudlamp { background: var(--acc); }
.cloudpill[data-status="synced"] { color: var(--txt); border-color: color-mix(in srgb, var(--acc) 30%, transparent); }
.cloudpill[data-status="saving"] .cloudlamp,
.cloudpill[data-status="checking"] .cloudlamp { background: var(--amber); animation: blip 1.2s ease-out infinite; }
.cloudpill[data-status="error"] .cloudlamp { background: var(--warn); }
.cloudpill[data-status="conflict"] .cloudlamp { background: var(--warn); animation: blip 1s ease-out infinite; }
.cloudpill[data-status="conflict"] { border-color: rgba(255, 107, 107, .5); color: #ffcaca; }

.sync { margin-bottom: 4px; }
.sync-note { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: var(--dim); }
.sync-or {
  margin: 12px 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sync-or::before, .sync-or::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.sync-enter { align-items: stretch; }

.enter-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--dim);
}

.codefield {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--txt);
  font-size: 13px;
  letter-spacing: .02em;
}
.codefield:focus { outline: none; border-color: var(--focus-line); }
.codefield::placeholder { color: var(--dimmer); }

.codebox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--well);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  margin-bottom: 8px;
}
.codebox code {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 600;
  color: var(--acc);
  letter-spacing: .01em;
  word-break: break-all;
}
.sync-state { margin: 0 0 10px; font-size: 11.5px; color: var(--dimmer); min-height: 15px; }
.sync-warn {
  border: 1px solid rgba(255, 107, 107, .4);
  background: rgba(255, 107, 107, .07);
  border-radius: 9px;
  padding: 12px 14px;
  margin: 12px 0 4px;
}
.sync-warn p { margin: 0 0 8px; font-size: 12.5px; }
.sync-warn .sheet-row { margin-top: 10px; }
.sync-off { color: var(--amber); }

.sess-head {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.sess-head .enter-label { margin-bottom: 0; }
.sess-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--well);
}
.sess-list:empty { display: none; }
.sess-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.sess-item:last-child { border-bottom: none; }
.sess-item.current {
  background: color-mix(in srgb, var(--acc) 12%, transparent);
}
.sess-meta { min-width: 0; }
.sess-code {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--acc);
  letter-spacing: .01em;
  word-break: break-all;
}
.sess-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--dimmer);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sess-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.sess-actions .btn {
  padding: 4px 8px;
  font-size: 11px;
}

/* ---------- merge-another-session picker ---------- */

.import-range {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.import-field {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}
.import-field input { text-transform: none; letter-spacing: .02em; }
.import-range-hint { margin: 0 0 10px; font-size: 11.5px; }
.import-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.import-sum {
  margin-left: auto;
  font-size: 12px;
  color: var(--acc);
}
.import-tracks {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--well);
}
.import-tracks li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--txt);
  cursor: pointer;
}
.import-tracks li:last-child { border-bottom: none; }
.import-tracks li:hover { background: rgba(255, 255, 255, .03); }
.import-tracks li.zero { color: var(--dimmer); }
.import-tracks input { accent-color: var(--acc); cursor: pointer; }
.import-tracks .im-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-tracks .im-name::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  background: hsl(var(--h, 150), 55%, 46%);
  vertical-align: baseline;
}
.import-tracks .im-cat {
  margin-left: 6px;
  font-size: 10px;
  color: var(--dimmer);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.import-tracks .im-ms {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
}
.import-undo { margin: 0; font-size: 11.5px; }

.merge-head { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.merge-math { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 12.5px; }
.merge-math td { padding: 5px 0; border-bottom: 1px solid var(--line-soft); color: var(--dim); }
.merge-math td:last-child { text-align: right; color: var(--txt); font-size: 12px; }
.merge-math .merge-overlap td { color: var(--amber); font-size: 11.5px; }
.merge-math .merge-total td {
  border-bottom: none;
  padding-top: 8px;
  color: var(--txt);
  font-weight: 600;
}
.merge-math .merge-total td:last-child { color: var(--acc); font-size: 14px; }
.merge-name { display: block; margin-bottom: 12px; }
.merge-name span {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}
.merge-name input { width: 100%; }
.merge-undo { margin: 0; font-size: 11.5px; }
.merge-foot { gap: 8px; }
.merge-gap { flex: 1 1 auto; }

.sheet-foot { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ---------- note editor ---------- */

.sheet-narrow { max-width: 380px; }

.note-when { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.note-when span {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}
.note-when input { flex: 1 1 auto; }

.note-resolved { margin: 6px 0 0; font-size: 12px; color: var(--amber); min-height: 1.2em; }
.note-resolved.bad { color: var(--warn); }

.notefield {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--txt);
  font: 13px/1.5 var(--ui);
  resize: vertical;
}
.notefield:focus { outline: none; border-color: var(--focus-line); }
.notefield::placeholder { color: var(--dimmer); }

.note-hint { margin: 8px 0 0; font-size: 11.5px; }
.note-foot { gap: 8px; }
.note-gap { flex: 1 1 auto; }

/* ---------- move on / the archive ---------- */

/* A strip above the status bar rather than a sheet over the timeline: the whole
   job is watching the crop happen, so it takes its own room instead of covering
   the thing you are looking at. */
.cropbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  background: linear-gradient(#1b1509, #15110b);
  border-top: 1px solid rgba(255, 182, 72, .45);
}
.cropbar-title {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
}
/* Basis of 0 so the readout and buttons keep their room and the slider takes
   whatever is left, however long the summary line gets. */
.cropbar .cropslider { flex: 1 1 0; min-width: 140px; }
.cropbar-read {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.cropbar-read b { font-size: 13.5px; font-weight: 600; color: var(--amber); }
.cropbar-read i { font-style: normal; font-size: 11.5px; color: var(--dim); }

.cropslider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}
/* The filled part of the track is the part being archived, so the slider reads
   as "this much goes away" rather than as an abstract position. */
.cropslider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background-color: var(--well);
  background-image: linear-gradient(rgba(255, 182, 72, .5), rgba(255, 182, 72, .5));
  background-repeat: no-repeat;
  background-size: var(--fill, 0%) 100%;
}
.cropslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 16px;
  margin-top: -6px;
  border-radius: 3px;
  background: var(--amber);
  border: 1px solid #8a5f18;
  cursor: ew-resize;
}
.cropslider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--well);
  border: 1px solid var(--line);
}
.cropslider::-moz-range-progress { height: 6px; border-radius: 3px; background: rgba(255, 182, 72, .5); }
.cropslider::-moz-range-thumb {
  width: 12px; height: 14px;
  border-radius: 3px;
  background: var(--amber);
  border: 1px solid #8a5f18;
  cursor: ew-resize;
}
.cropslider:focus { outline: none; }

.arch-tracks, .arch-notes { list-style: none; margin: 12px 0 0; padding: 0; }
.arch-tracks li {
  --h: 150;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 62px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--dim);
}
.arch-tracks li b {
  font-weight: 500;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--txt);
  font-size: 11.5px;
}
.arch-tracks .cl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arch-tracks .cl-name::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  background: hsl(var(--h), 55%, 46%);
  vertical-align: baseline;
}
.arch-tracks .cl-empty { grid-column: 1 / -1; color: var(--dimmer); font-size: 11.5px; }

.arch-range { margin: 0 0 10px; font-size: 12px; color: var(--dim); }
.arch-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--well);
  border: 1px solid rgba(255, 182, 72, .3);
}
.arch-headline b { font-size: 24px; font-weight: 600; color: var(--amber); letter-spacing: -.5px; }
.arch-headline span { font-size: 11.5px; color: var(--dim); }

/* the share bar under each archived track's name */
.arch-tracks .cl-share {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: hsl(var(--h), 65%, 50%);
  opacity: .5;
}

.arch-notes li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.arch-notes li:last-child { border-bottom: none; }
.arch-notes time { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.arch-notes span { color: var(--dim); overflow-wrap: anywhere; }
.arch-notes .an-blank { color: var(--dimmer); font-style: italic; }

.arch-peek {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--dim);
  cursor: pointer;
}
.arch-peek input { accent-color: var(--amber); cursor: pointer; }
.arch-undo { margin: 10px 0 0; font-size: 11.5px; }
.arch-foot { gap: 8px; }

/* ---------- scrollbars ---------- */

.grid-body::-webkit-scrollbar { width: 10px; }
.grid-body::-webkit-scrollbar-track { background: var(--scroll-track); }
.grid-body::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--scroll-track); }
.grid-body::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

/* ---------- narrow screens (desktop-first, just don't break) ---------- */

@media (max-width: 900px) {
  :root { --headw: 180px; }
  .label { width: 120px; }
  .readout-time { font-size: 20px; }
  .stat-hint { display: none; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .tools { width: 100%; justify-content: flex-start; }
  .readout-time { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo::after, .trow[data-live="true"] .trail, .trow.mergearmed { animation: none; }
}