:root{ --blendBg:#000;  --cellW: 27px; --cellH: 30px; --cell: var(--cellW);  --pad: .5rem; --gap: .5rem; --accent:#0e9; --hi:#e91e63; --labelw: 120px;   --layerAlpha: 1; --idleAlpha: 0.3;}
body{font-family:system-ui;margin:1rem;background:#111;color:#eee}
h1{font-size:1.2rem;margin:0 0 .5rem}
a{color:#0e9}
label{user-select:none}
input[type=range]{width:140px}

/* ---- transport & global ------------------------------------------------ */
#panel{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:.5rem;
  background:#1b1b1b;border:1px solid #333;border-radius:6px;padding:.5rem;
}
#panel span {
  width: 36px;
  text-align: right;
  margin-right: 0.75rem; /* <-- add space between number and next label */
}

#presets.chainOn .ps:not(.full){ cursor: not-allowed; }

/* ---- per-track controls ------------------------------------------------ */
#trackCtrl{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:.75rem;margin:.5rem 0;
}
.trackBox{
  font-size:.85rem; line-height:1.35;
  background:#1b1b1b; padding:.6rem; border:1px solid #333; border-radius:6px;
  position:relative; /* for trig overlay */
}
.trackBox .hdr{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem
}
.trackBox .title{
  font-size:.72rem; color:#e91e63; max-width:62%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
/* 3 columns: right-aligned label | flexible slider | fixed value badge */
.trackBox .tgrid{
  display:grid;
  grid-template-columns: 72px 1fr 80px;
  gap:.4rem .6rem; align-items:center
}
/* full-width rows inside the grid */
.trackBox .urlRow,
.trackBox .btnRow{ grid-column: 1 / -1; }
.trackBox .urlRow{ display:flex; align-items:center; gap:.5rem }
.trackBox .urlRow label{ width:72px; text-align:right; color:#aaa }
.trackBox .urlRow input{ width:100% }

.trackBox .btnRow{
  display:flex; align-items:center; justify-content:space-between;
  margin:.25rem 0 .1rem
}
.trackBox .btnRow .left{ display:flex; align-items:center; gap:.35rem }
.trackBox .btnRow .right{ display:flex; align-items:center; gap:.25rem }

.trackBox label{ font-size:.75rem; color:#aaa; text-align:right; white-space:nowrap }
.trackBox input[type=range]{ width:100% }

/* value badges: fixed, non-wrapping */
.trackBox .sval,.trackBox .vval,.trackBox .dval,.trackBox .rval,.trackBox .lval{
  display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:70px; padding:2px 6px; white-space:nowrap;
  font:12px ui-monospace,monospace; background:#0b0b0b; border:1px solid #333; border-radius:4px
}

/* clickable track-number chip */
.trackBox .hdr .trkNum{
  cursor:pointer;
  display:inline-block;
  min-width:1.6em;
  text-align:center;
  padding:2px 6px;
  border:1px solid #333;
  border-radius:4px;
  background:#111;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.trackBox .hdr .trkNum:hover{
  background:#2a2a2a;
  color: var(--accent);
  border-color:#555;
}

.trackBox .hdr .trkNum.flash{
  background: var(--accent);
  color:#111;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* tiny buttons */
.mini{ padding:.2rem .35rem }
.nudgeBtn{ min-width:2rem }
.trand{ cursor:pointer }

/* ---- 64-step grid + labels -------------------------------------------- */
#seqWrap{
  display:block;           /* was inline-block → caused feedback */
  width:100%;
  overflow-x:hidden;       /* we’re fitting, so keep the edge clean */
  padding-bottom:.25rem;
}

/* Step-number header row uses the SAME table model as #seq */
#stepNumbers{
  border-collapse: collapse;
  margin:.25rem 0 .35rem;
  table-layout: fixed;
}
#stepNumbers td{
  width: var(--cellW);
  height: var(--cellH);
  border:1px solid #444;
  box-sizing:border-box;
  background:#1a1a1a;
  color:#aaa;
  font-size:.7rem;
  text-align:center;
  user-select:none;
}
#stepNumbers td.g4{ font-weight:600; color:#ddd; }

/* First cell is the spacer that aligns with the left row label column */
#stepNumbers td.labelSpacer{
  width: var(--labelw);
  min-width: var(--labelw);
  background:#333;
  padding: 0 .25rem;
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* keep header buttons together; no stretching gap */
  gap:.25rem;
  overflow:hidden;
}
#stepNumbers td.labelSpacer .nudgeBtn{
  height: var(--cellH);
  line-height: calc(var(--cellH) - 2px);
  padding:0 .35rem;
  font-size:.8rem;
  border-radius:3px;
}

#seq{border-collapse:collapse;margin-top:.2rem;table-layout:fixed}
#seq td{width: var(--cellW);height: var(--cellH);border:1px solid #444;cursor:pointer;box-sizing:border-box}
#seq td:nth-child(4n+2){ /* first step cell is child 2 (after rowLabel) */ border-left-color:#666}
#seq td.step.active{background:var(--accent);color:#000}
#seq td.step.disabled{background:#222}
#seq td.step.playhead{outline:2px solid #e91e63}
#seq td.step.editing{outline:2px dashed var(--hi)}
#seq td.step.dragOver{outline:2px dashed var(--accent)}

/* ---- preset + video pane layout --------------------------------------- */
#presetWrap{display:flex;gap:1.5rem;margin-top:1rem;align-items:flex-start}
#vidPane{flex:0 0 520px;height: 360px;background: var(--blendBg, #000);position:relative;overflow:hidden;border:1px solid #333;border-radius:6px}
#vidPane .ytLayer{position:absolute;top:0;left:0;width:100%;height:100%;opacity:var(--idleAlpha);pointer-events:none;transition:opacity .06s linear;filter: invert(var(--mixInvert,0)) contrast(var(--mixContrast,1));}
#vidPane iframe{width:100%;height:100%}
#vidPane .ytLayer:nth-child(1){z-index:1}
#vidPane .ytLayer:nth-child(2){z-index:2}
#vidPane .ytLayer:nth-child(3){z-index:3}
#vidPane .ytLayer:nth-child(4){z-index:4}
#vidPane .ytLayer:nth-child(5){z-index:5}
#vidPane .overlay{position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .2s ease}
#vidPane .ovMsg{background:rgba(30,30,30,.85);border:1px solid #333;border-radius:6px;padding:.75rem 1rem;text-align:center;color:#ccc;font-size:.9rem}

/* ---- preset bank ------------------------------------------------------- */
/* 64 columns = two rows for 128 slots; flex to screen width */
#presets{
  display:grid;
  grid-template-columns: repeat(64, minmax(18px, 1fr));
  grid-auto-rows: 22px;
  gap:3px;
  margin:1rem 0 .25rem;
}
#presets .ps{
  width:auto;     /* take the column width */
  height:22px;    /* keep the original height */
}
.ps{width:22px;height:22px;border:1px solid #666;cursor:pointer;background:#222}
.ps.full{background:#555}
.ps.current{animation:flash .6s steps(2) infinite}
@keyframes flash{50%{background:#e91e63}}
#ioBtns button{margin-right:.5rem;padding:.3rem .6rem}

/* --- visual compositing of stacked YouTube layers --- */
#vidPane .ytLayer { mix-blend-mode: normal; }
#vidPane { background: var(--blendBg, #000); }

@media (prefers-reduced-motion: reduce){
  #seq td.step.playhead{outline-width:1px}
  #vidPane .ytLayer{transition:none}
  #vidPane .overlay{transition:none}
}

/* wide label cells on left of sequencer */
#seq td.rowLabel{
  width: var(--labelw) !important;
  min-width: var(--labelw);
  padding:0 .4rem;
  border:1px solid #444;
  background:#222;
  font-size:.75rem;
  white-space:nowrap;
  height: var(--cellH);

  /* containment + single-line layout */
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr auto; /* left group shrinks, right group sized to content */
  align-items:center;
  gap:.4rem;
}

/* Mute/Solo visual states */
.muteBtn.on, .soloBtn.on{
  background:#e91e63 !important;
  color:#111 !important;
  border-color:#e91e63 !important;
}

/* ===== Trig overlay (ghost + edit) ===================================== */
.trigOverlay{
  position:absolute; inset:6px;
  background:rgba(28,28,28,.92);
  border:1px solid #444; border-radius:6px;
  padding:.6rem; z-index:50; display:none;
}
.trigOverlay.show{ display:block; }
.trigOverlay.ghost{
  opacity:1; pointer-events:none; border-style:dashed;
}
.trigOverlay .thdr{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem;
}
.trigOverlay .trigGrid{
  display:grid; grid-template-columns:72px 1fr 80px; gap:.4rem .6rem; align-items:center;
}
.trigOverlay .hint{ font-size:.72rem; color:#aaa; margin-top:.4rem }
.trigOverlay .badge{
  display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:70px; padding:2px 6px; white-space:nowrap;
  font:12px ui-monospace,monospace; background:#0b0b0b; border:1px solid #333; border-radius:4px
}
.trigOverlay .closeBtn{ cursor:pointer }

#presetColumn{ grid-column: 1 / -1; }

/* ---- header bar ------------------------------------------------------- */
#headerBar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:.75rem;
  margin:0 0 .5rem;
}
#headerBar h1{
  margin:0;
  justify-self:center;   /* keep YTSS centered */
}
#headerBar .transportBtns{ display:flex; gap:.4rem; flex-wrap:wrap }
#headerBar .transportBtns button{ padding:.35rem .6rem }

#svCollapseBtn{
  justify-self:end;      /* push collapse to far right */
}

/* Keep (moved) transport buttons styling intact elsewhere */
#headerBar .transportBtns{ display:none } /* (they've been moved) */

/* subtle rollover enlargement on active steps + presets */
#seq td.step.active{ transition: transform .08s ease, box-shadow .08s ease }
#seq td.step.active:hover{ transform: scale(1.08); box-shadow: 0 0 0 1px var(--accent) inset; z-index:2 }
#presets .ps{ transition: transform .08s ease, border-color .08s ease }
#presets .ps:hover{ transform: scale(1.08); border-color:#aaa }

/* robust label column: space for new controls */
/* --- label column containment fixes (avoid overlap into steps) --- */
#seq td.rowLabel .labelLeft{ display:flex; align-items:center; gap:.4rem; min-width:0; overflow:hidden; }
#seq td.rowLabel .labelLeft .trkLabel{ overflow:hidden; text-overflow:ellipsis; }
#seq td.rowLabel .labelRight{ display:flex; align-items:center; gap:.25rem; white-space:nowrap; }
#stepNumbers td.labelSpacer{ overflow:hidden; }
/* robust label column: space for new controls */
#seq td.rowLabel{ gap:.5rem; }
#seq td.rowLabel .labelLeft{ display:flex; align-items:center; gap:.4rem }
#seq td.rowLabel .labelRight{ display:flex; align-items:center; gap:.25rem }
#seq td.rowLabel select.divSel{
  background:#0b0b0b; color:#ddd; border:1px solid #333; border-radius:4px;
  font:12px ui-monospace,monospace; padding:2px 4px;
  width:max-content; /* prevent flex/grid stretch; keeps stable intrinsic width */
}
#seq td.step{ touch-action: manipulation; }

/* keep step numbers aligned even during zoom/orientation changes */
#stepNumbers{ table-layout: fixed }

#panel label{ display:inline-flex; align-items:center; gap:.4rem }

#stepNumbers td.labelSpacer .actBtn{ height: var(--cellH); line-height: calc(var(--cellH) - 2px); padding:0 .35rem; font-size:.8rem; border-radius:3px }
/* tweak to taste */

/* 2) Make BOTH tables size to their contents (no stretch/compress) */
#seq, #stepNumbers { width: max-content; }

/* 3) Header row uses the same height as step cells */
#stepNumbers td{
  height: var(--cellH);
  line-height: calc(var(--cellH) - 2px);
  font-variant-numeric: tabular-nums; /* fixed-width digits = no visual jitter */
}

/* 4) Header spacer cell (left) matches the label column exactly */
#stepNumbers td.labelSpacer{ height: var(--cellH); }

/* 5) Header buttons adopt the cell height so they never clip */
#stepNumbers td.labelSpacer .nudgeBtn,
#stepNumbers td.labelSpacer .actBtn{
  height: var(--cellH);
  line-height: calc(var(--cellH) - 2px);
  padding: 0 .35rem;
}

/* 6) Keep the same 4-step divider as the grid so verticals line up */
#stepNumbers td:nth-child(4n+2){ border-left-color:#666; }

/* 7) Safety: fixed layout + collapsed borders for both tables */
#stepNumbers, #seq{ table-layout:fixed; border-collapse:collapse; }

/* --- Keep the track number always visible in the label column --- */
:root { --trkNumW: 22px; }             /* tweak if you want it wider/tighter */

#seq td.rowLabel .labelLeft .trkLabel{
  flex: 0 0 var(--trkNumW);            /* no shrink, fixed basis */
  width: var(--trkNumW);
  text-align: center;
  color: #eee;                         /* keep readable on dark bg */
}

/* make sure the rest of the label row can shrink if needed */
#seq td.rowLabel .labelLeft{
  display:flex; align-items:center; gap:.4rem; min-width:0; overflow:hidden;
}

/* ==================== NEW LAYOUT HELPERS FOR REORDERED ROWS ==================== */
#searchVideoRow{
  display:grid;
  grid-template-columns: minmax(300px, 2fr) minmax(360px, 1fr);
  gap: var(--gap);
  align-items: start;
  margin: .5rem 0;
}

#searchColumn {
  display: flex;
  flex-direction: column;
  gap: .75rem; /* space between search and video controls */
}
#searchDock{
  display:block;
}

#vidPane{
  flex: 1 1 auto;    /* let the grid define width */
  height: 360px;     /* tweak height to taste */
}

#videoCtrlDock{
  min-width: 280px;
  display: grid;
  align-content: start;
}

#presetWrap{
  display:grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

#seqWrap{ overflow-x:auto; padding-bottom:.25rem }

/* keep transport controls and actions on a single row */
#panel{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:nowrap;            /* force one row */
}
#panel label{ display:inline-flex; align-items:center; gap:.4rem }

/* pushes actions to the right */
#panel .flex-spacer{ flex:1 1 auto }

/* actions block on the right (no wrap) */
#panel .panelActions{
  display:flex;
  gap:.5rem;
  margin-left:auto;            /* right-align the whole block */
  flex-wrap:nowrap;            /* stay on one line */
}

/* optional: allow wrapping only on very narrow screens */
@media (max-width: 720px){
  #panel{ flex-wrap:wrap }
  #panel .panelActions{
    margin-left:0;
    flex-basis:100%;
    justify-content:flex-start;
    flex-wrap:wrap;           /* fall back gracefully if needed */
  }
}


/* Collapse: hide search + video row when toggled */
body.collapsed #searchVideoRow{ display:none }

#vidPane .fsToggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 20;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}


/* Show FS button only on hover; hide in fullscreen */
#vidPane .fsToggle { opacity:0; transition:opacity .15s; }
#vidPane:hover .fsToggle { opacity:1; }
:fullscreen #vidPane .fsToggle { display:none; }

/* === Align header master controls with per-row controls === */
:root{ --blendBg:#000;
  /* button column width so columns line up (tweak if you want tighter/wider) */
  --ctrlW: 36px;
}

/* Give all control buttons the same footprint as the step height */
#stepNumbers td.labelSpacer .nudgeBtn,
#stepNumbers td.labelSpacer .actBtn,
#seq td.rowLabel .labelRight .nudgeBtn,
#seq td.rowLabel .labelRight .muteBtn,
#seq td.rowLabel .labelRight .soloBtn{
  width: var(--ctrlW);
  height: var(--cellH);
  line-height: calc(var(--cellH) - 2px);
  padding: 0;                 /* square, like your M/S buttons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make the header's reverse/shuffle (actBtn) visually match M/S */
#stepNumbers td.labelSpacer {
  width: var(--labelw);
  min-width: var(--labelw);
  background: #333;
  padding: 0 .25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ⬅️ align buttons to the left */
  gap: .25rem;
  overflow: hidden;
}

/* Keep header buttons snug at the left (already aligned with label column) */
#stepNumbers td.labelSpacer{
  justify-content: flex-start;
  gap: .25rem;                /* same visual spacing everywhere */
}

/* ==== Video Controls bar (mounts in #videoCtrlDock) ==== */
#videoCtrlBar{
  display:grid;
  grid-template-columns:
    auto minmax(200px,1fr)
    auto minmax(200px,1fr)
    auto minmax(220px,1fr);
  gap:.6rem .8rem;
  align-items:center;
  padding:.6rem .8rem;
  border:1px solid #333;
  border-radius:6px;
  background:#1b1b1b;
  font-size:.9rem;
}
#videoCtrlBar label{ color:#bbb; white-space:nowrap }
#videoCtrlBar select,#videoCtrlBar input[type=range]{ width:100% }
#videoCtrlBar label{ color:#bbb; white-space:nowrap }
#videoCtrlBar select,#videoCtrlBar input[type=range]{ width:100% }

/* ==== Tiled view (non-intrusive): same videos, different layout ==== */

/* Fullscreen scaling for tiled view */
:fullscreen #presetWrap { align-items: start; }
#ioBtns{
  grid-column: 2;           /* place in right column of #presetWrap */
  justify-self: end;        /* push to the far right */
  display: flex;
  gap: .5rem;
}

/* === Settings modal ===================================================== */
#settingsModal{
  position: fixed;
  inset: 0;
  display: none;              /* hidden until .show */
  place-items: center;        /* center panel */
  background: rgba(0,0,0,.55);
  z-index: 9999;
  padding: 2rem;
}
#settingsModal.show{ display: grid; }

#settingsPanel{
  width: min(720px, 95vw);
  max-height: 90vh;
  overflow: auto;
  background: #111;
  color: #eee;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 14px 48px rgba(0,0,0,.6);
}

/* the utility classes your settings UI is already using */
#settingsPanel .setGroup{ border-top:1px solid #2a2a2a; margin-top:.75rem; padding-top:.5rem; }
#settingsPanel .setRow{ display:grid; grid-template-columns: 160px 1fr; gap:.35rem .75rem; align-items:center; margin:.35rem 0; }
#settingsPanel .setFooter{ display:flex; justify-content:flex-end; margin-top:.75rem; }
#settingsPanel .badge{ display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#1b1b1b; border:1px solid #3a3a3a; font-size:.85em; }
@media (max-width:560px){ #settingsPanel .setRow{ grid-template-columns: 1fr; } }

#videoCtrlBar #vcPermLab{ display:none }

.trackBox .hdr .trkNum,
#seq td.rowLabel .trkLabel{
  user-select: none;
  -webkit-user-select: none;
}

#stepNumbers td.labelSpacer .nudgeBtn:hover,
#stepNumbers td.labelSpacer .actBtn:hover {
  filter: brightness(0.95);
}


/* =======================
   PATCH — 2025‑08‑16
   Transport & Preset action buttons:
   1) Make Start/Stop the same size as the buttons under the preset slots.
   2) Align the right edge of "Clear All Presets" with the right edge of Stop.
   ======================= */
:root{
  --ytss-btnH: 32px; /* unified button height */
}

/* Transport buttons AFTER they are moved into the Presets column (see main.js boot) */
#presetColumn .transportBtns{
  display:flex;
  gap:.5rem;
  flex-wrap:nowrap;
}
#presetColumn .transportBtns button{
  height: var(--ytss-btnH);
  line-height: calc(var(--ytss-btnH) - 2px);
  padding: 0 .65rem; /* match the IO buttons below */
}

/* Preset IO buttons row: right-align to match the right edge of transport */
#ioBtns{
  display:flex;
  justify-content:flex-end;   /* ⬅ aligns the whole row to the column's right edge */
  gap:.5rem;
}
/* Only add spacing between buttons, keep the last one flush-right */
#ioBtns button{
  height: var(--ytss-btnH);
  line-height: calc(var(--ytss-btnH) - 2px);
  padding: 0 .65rem;
  margin-right: 0;            /* override earlier rule */
}
#ioBtns button:not(:last-child){
  margin-right:.5rem;
}

/* ==== FUNC (Shift) mode ================================================= */
#panel .funcBtn{
  height: var(--ytss-btnH);
  line-height: calc(var(--ytss-btnH) - 2px);
  padding: 0 .65rem;
  border: 1px solid #333;
  border-radius: 6px;
  background: #151515;
  color: #ddd;
}
#panel .funcBtn.on{
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

/* While FUNC is active, make active steps look different */
body.func-mode #seq td.step.active,
body.edit-lock #seq td.step.active{
  background: var(--hi) !important;   /* pink accent already used elsewhere */
  color: #111 !important;
}
/* Keep editing outline visible */
body.func-mode #seq td.step.editing{ outline-color: var(--accent); }

/* One-shot gentle pulse when FUNC is toggled on (helps discoverability) */
@keyframes funcPulse{
  0%   { box-shadow: 0 0 0 0 rgba(14,153,153,0.0) inset; }
  35%  { box-shadow: 0 0 0 2px var(--accent) inset; }
  100% { box-shadow: 0 0 0 0 rgba(14,153,153,0.0) inset; }
}
/* add this line */
body.func-flash .trackBox .hdr .trkNum {
  animation: funcPulse .85s ease-in-out 1;
}

/* keep the rest as-is */
body.func-flash #seq td.rowLabel .trkLabel,
body.func-flash #presets .ps,
body.func-flash #seq td.step{
  animation: funcPulse .85s ease-in-out 1;
}


/* ==== Step value meters (param-aware fill) ==== */
:root{
  --meterOn: var(--accent);
  --meterOff: #0f2523; /* subtle teal-tinted base so 0 doesn’t look empty */
}
#seq td.step{ position: relative; overflow: hidden; }
#seq td.step.active::after{
  content: '';
  position: absolute;
  inset: 1px;
  background: linear-gradient(to top, var(--meterOn) calc(var(--meter, 1) * 100%), var(--meterOff) 0);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
/* Keep outlines & hover effects above the meter */
#seq td.step.playhead, #seq td.step.editing { position: relative; z-index: 1; }
/* When meters are active, neutralize the base bg so the gradient is clear */
body.has-vizmeter #seq td.step.active{ background:#1a1a1a; color:#000; }
/* Hide the meter overlay unless viz meters are enabled */
body:not(.has-vizmeter) #seq td.step.active::after{ content: none; }