/* STORYBOOK VOICES TRACKS — BUILD 14 REPAIR
   Scoped only to the new clip controls; does not reposition Build 12 bars. */
.placementBadge14{
  position:absolute;right:7px;top:5px;z-index:4;
  padding:2px 6px;border-radius:9px;
  background:rgba(0,0,0,.58);color:#fff;font-size:10px;
  pointer-events:none
}
.repairControls14{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto
}
.repairControls14 label{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap
}
.repairControls14 select{
  min-height:28px;border-radius:7px
}
.repairControls14 input[type="range"]{width:92px}

.finalControls17{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}.finalControls17 label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.finalControls17 input[type="range"]{width:92px}.finalControls17 input[type="number"]{width:62px;min-height:28px}.finalControls17 output{min-width:38px}

/* ===== VIP 25 — RETRO-STYLE WORKTABLE SELECTION ===== */
#stage{position:relative;overflow:visible}
#theaterArea{overflow:visible}
#stage .worktableObject25{position:absolute;display:block;touch-action:none;user-select:none;-webkit-user-drag:none;box-sizing:border-box}
#stage .worktableObject25.activeObject25{outline:3px solid #8fd8ff;outline-offset:4px;box-shadow:0 0 0 1px rgba(255,255,255,.9)}
#stage.playing25 .worktableObject25{outline:none!important;box-shadow:none!important}
.vip25Controls{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.vip25Controls label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.vip25Controls input[type="number"]{width:72px}
.working25Label{font-weight:700}

/* ===== BUILD 26 — FINAL WORKTABLE TOOLBOX ===== */
.trackLabel.expanded,.trackLane.expanded{height:205px!important}
.clipControls{top:76px!important;height:116px!important;display:none!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:7px 10px!important}
.trackLane.expanded .clipControls{display:flex!important}
.vip26Row{display:flex;align-items:center;gap:10px;min-width:max-content;height:46px}
.vip26Row label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.vip26Row input[type="range"]{width:82px}
.vip26Row input[type="number"]{width:64px;min-height:28px}
.vip26Row select{min-height:30px;max-width:130px}
.vip26Row button{white-space:nowrap}
.vip26Row output{min-width:34px}
#stage .worktableObject25{z-index:2}
#stage .worktableObject25.activeObject25{outline:3px solid #8fd8ff!important;outline-offset:3px!important}

/* ===== BUILD 27 — REAL STAGE IMAGES, NOT LINES ===== */
#stage .worktableObject25{
  width:auto!important;
  height:60%!important;
  max-width:70%!important;
  max-height:70%!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
}
#stage .worktableObject25.activeObject25{
  outline:3px solid #8fd8ff!important;
  outline-offset:4px!important;
}

/* ===== BUILD 28 — STAGE HAS REAL DIMENSIONS ===== */
#theaterArea{position:relative!important;overflow:visible!important;}
#stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}
#stage .worktableObject25{
  position:absolute!important;
  display:block!important;
  width:auto!important;
  height:60%!important;
  max-width:70%!important;
  max-height:70%!important;
  object-fit:contain!important;
}

/* ===== BUILD 29 — PLAY TONIGHT WORKFLOW CLEANUP ===== */
#stageWorkflow29{
  width:min(1100px,72vw);margin:12px auto -14px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
#stageWorkflow29 .glassButton{height:34px;min-height:34px;padding:0 14px;font-size:15px}
#timelineGrowthBar{display:none!important}
#projectBar .snap29Moved{display:none!important}
.rulerCorner{position:relative!important;height:35px!important;padding:0 8px!important;display:flex!important;align-items:center!important;gap:7px!important;line-height:1!important;font-size:12px!important}
#timelineSetupTools{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
#timelineSetupTools .glassButton{width:auto!important;height:25px!important;min-height:25px!important;margin:0!important;padding:0 8px!important;border-radius:13px!important;font-size:11px!important;white-space:nowrap!important}
#timelineRuler,.second{height:35px!important}
.secondLabel{top:4px!important;font-size:12px!important}
.majorTick{height:16px!important}
.minorTick{height:8px!important}
#labelRows{height:calc(100% - 35px)!important}

/* Compact blue clip tabs: 38px. */
.trackClip{top:5px!important;height:38px!important;border-radius:9px!important}
.clipTitle{padding:9px 22px 0 13px!important;font-size:16px!important;line-height:18px!important}
.placementBadge14{top:4px!important}
.trackClip.clipGrouped:after{bottom:1px!important}

.trackLabel.expanded,.trackLane.expanded{height:205px!important}
.clipControls{height:116px!important;overflow:visible!important;right:8px!important}
.vip26Row{
  width:100%!important;min-width:0!important;height:46px!important;
  display:flex!important;align-items:center!important;gap:6px!important;
  flex-wrap:nowrap!important
}
.vip26Row label{font-size:12px!important;gap:3px!important}
.vip26Row input[type="range"]{width:68px!important}
.vip26Row input[type="number"]{width:54px!important}
.vip26Row select{max-width:105px!important;font-size:12px!important}
.vip26Row button{padding:5px 8px!important;font-size:12px!important}
.vip26Row output{min-width:30px!important;font-size:12px!important}
#snapTool29{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px}
#snapTool29 select{min-height:28px;max-width:92px;font-size:12px}
@media(max-width:1180px){#stageWorkflow29{width:94vw}}

/* ===== BUILD 30 — THREE-ROW DISCOVERY TOOLBOX ===== */
.trackLabel.expanded,.trackLane.expanded{height:252px!important}
.clipControls{height:164px!important;overflow:visible!important}
.vip26Row{height:46px!important}
.vip26Row3{justify-content:flex-start!important}
.storyMotion30{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-right:5px;border-right:1px solid #ffffff24}
.storyMotion30 strong{font-size:12px;color:#dfeaff}
.storyMotion30 input[type="number"]{width:48px!important}
.storyMotion30 select{max-width:82px!important}
.spinPurpose30{font-weight:700}
.vip26Row3 [data-v26a="delete"]{display:inline-block!important;visibility:visible!important;margin-right:4px}
#snapHome30{display:none}

/* ===== BUILD 31 — LABELED COLLAPSIBLE ANIMATIONS ===== */
.animations31{width:100%;min-width:900px;border-top:1px solid #ffffff24;padding-top:4px;color:#fff}
.animations31 summary{cursor:pointer;font-size:13px;font-weight:800;color:#dfeaff;letter-spacing:.2px;user-select:none}
.animationGroups31{display:flex;align-items:flex-start;gap:8px;padding-top:5px}
.animationGroups31 fieldset{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:4px 7px 5px;border:1px solid #ffffff24;border-radius:9px;min-width:180px}
.animationGroups31 legend{font-size:10px;font-weight:900;letter-spacing:.7px;color:#dfeaff;padding:0 4px}
.animationGroups31 label{display:inline-flex!important;align-items:center!important;gap:3px!important;font-size:11px!important;white-space:nowrap!important}
.animationGroups31 input[type="checkbox"]{width:auto!important;margin:0!important}
.animationHint31{display:block;padding-top:4px;color:#bfc9da;font-size:10px}
.vip26Row3 [data-v26a="clearMotion"],.vip26Row3 [data-v26a="delete"]{font-weight:800!important}

/* ===== BUILD 32 — USER-FRIENDLY ANIMATION DECISION ROWS ===== */
.trackClip{height:38px!important}
#timelineRuler,.second,.rulerCorner{height:35px!important}

.animationDecisionRow1,
.animationDecisionRow2{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  min-width:max-content!important;
  height:40px!important;
}
.animationDecisionRow1 label,
.animationDecisionRow2 label{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  white-space:nowrap!important;
}
.animationDecisionRow1 button,
.animationDecisionRow2 button{white-space:nowrap!important}

/* ===== BUILD 33 — COMPACT TOOLBOX + RESTORED TRACK SCROLL =====
   CSS ONLY.
   Keeps Stage, IndexedDB, 38px clips, 35px ruler and left track controls untouched.
*/
.trackLabel.expanded,
.trackLane.expanded{
  height:286px!important;
}

.clipControls{
  top:52px!important;
  height:226px!important;
  right:8px!important;
  padding:5px 10px 10px!important;
  gap:2px!important;

  /* Restore the toolbox scrollbar for each expanded track. */
  overflow-x:scroll!important;
  overflow-y:hidden!important;

  /* Do not squeeze the animation tools to the visible width. */
  align-items:flex-start!important;
  justify-content:flex-start!important;
  scrollbar-gutter:stable!important;
}

.trackLane.expanded .clipControls{
  display:flex!important;
}

/* Keep each toolbox row compact. */
.animationDecisionRow1,
.animationDecisionRow2,
.vip26Row{
  min-height:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
}

.animations31{
  flex:0 0 auto!important;
  padding-top:2px!important;
}

/* Make the per-track scrollbar easy to grab. */
.clipControls::-webkit-scrollbar{
  height:12px;
}
.clipControls::-webkit-scrollbar-thumb{
  background:rgba(210,220,235,.48);
  border-radius:8px;
}
.clipControls::-webkit-scrollbar-track{
  background:rgba(255,255,255,.07);
  border-radius:8px;
}

@media(max-width:820px){
  .trackLabel.expanded,
  .trackLane.expanded{height:286px!important}

  .clipControls{
    height:226px!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
  }
}

/* ===== BUILD 34 — ANIMATION BREATHING ROOM + SCROLL FINISH =====
   CSS ONLY.
   Gives the Animations chooser and its scrollbar a little more room.
   Keeps the Stage, DB, 38px clips, 35px ruler and left track controls untouched.
*/
.trackLabel.expanded,
.trackLane.expanded{
  height:304px!important;
}

.clipControls{
  height:244px!important;
  padding-bottom:14px!important;
  overflow-x:scroll!important;
  overflow-y:hidden!important;
  scrollbar-gutter:stable!important;
}

.animations31{
  min-height:58px!important;
  padding-top:5px!important;
  padding-bottom:7px!important;
}

/* Keep the animation groups clear of the horizontal scrollbar. */
.animationGroups31{
  padding-top:6px!important;
  padding-bottom:8px!important;
}

/* Slightly roomier, easy-to-grab inner toolbox scrollbar. */
.clipControls::-webkit-scrollbar{
  height:14px;
}
.clipControls::-webkit-scrollbar-thumb{
  background:rgba(210,220,235,.52);
  border-radius:8px;
  border:2px solid rgba(25,29,36,.75);
}
.clipControls::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:8px;
}

@media(max-width:820px){
  .trackLabel.expanded,
  .trackLane.expanded{height:304px!important}

  .clipControls{
    height:244px!important;
    padding-bottom:14px!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
  }
}

/* ===== BUILD 36 — TOOLBOX SCROLL RANGE REPAIR =====
   Keeps all four scrollbars.
   Repairs ONLY the horizontal scrollbar inside the toolbox.
*/

/* The toolbox remains the scrolling viewport. */
.clipControls{
  overflow-x:scroll!important;
  overflow-y:hidden!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  scrollbar-gutter:stable!important;
}

/* Give every toolbox section a genuine scrollable canvas.
   1500px is intentionally wider than the visible editor on laptop/tablet,
   so the existing toolbox scrollbar has a real horizontal range. */
.clipControls > .animationDecisionRow1,
.clipControls > .animationDecisionRow2,
.clipControls > .vip26Row,
.clipControls > .animations31{
  width:1500px!important;
  min-width:1500px!important;
  max-width:none!important;
  flex:0 0 auto!important;
}

/* Keep the animation choices in one continuous horizontal strip. */
.animations31{
  overflow:visible!important;
}

.animationGroups31{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  min-width:1500px!important;
  max-width:none!important;
}

.animationGroups31 fieldset{
  flex:0 0 auto!important;
}

/* Existing toolbox scrollbar — visible and draggable. */
.clipControls::-webkit-scrollbar{height:14px}
.clipControls::-webkit-scrollbar-thumb{
  background:rgba(210,220,235,.58);
  border-radius:8px;
  border:2px solid rgba(25,29,36,.75);
}
.clipControls::-webkit-scrollbar-track{
  background:rgba(255,255,255,.09);
  border-radius:8px;
}
/* ===== 15PX TOOLBOX HEIGHT TEST ===== */

.trackLabel.expanded,
.trackLane.expanded{
  height:319px!important;   /* was 304px */
}

.clipControls{
  height:259px!important;   /* was 244px */
}
/* ===== TOOLBOX SCROLLBAR WIDTH REPAIR ===== */

/* Keep the toolbox itself limited to the visible track window.
   Do NOT let the 60000px timeline determine its scrollbar width. */
.clipControls{
  left:8px!important;
  right:auto!important;

  width:calc(100vw - 330px)!important;
  max-width:calc(100vw - 330px)!important;

  overflow-x:scroll!important;
  overflow-y:hidden!important;

  scrollbar-gutter:stable!important;
}

/* The contents inside the toolbox stay wider than the toolbox,
   giving the horizontal scrollbar something useful to scroll. */
.clipControls > .animationDecisionRow1,
.clipControls > .animationDecisionRow2,
.clipControls > .vip26Row,
.clipControls > .animations31{
  width:1500px!important;
  min-width:1500px!important;
  max-width:none!important;
  flex-shrink:0!important;
}

.animationGroups31{
  width:max-content!important;
  min-width:1500px!important;
  max-width:none!important;
  flex-wrap:nowrap!important;
}

/* ===== FIVE SMALL WORKING BUTTONS DIRECTLY ABOVE STAGE ===== */
#editBar{display:none!important}

#stageWorkflow29{
  width:min(1100px,72vw)!important;
  min-height:0!important;
  margin:6px auto 6px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#stageWorkflow29 .glassButton{
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:18px!important;
  font-size:15px!important;
  white-space:nowrap!important;
}
@media(max-width:1180px){#stageWorkflow29{width:94vw!important}}

/* ===== BUILD 38 — COMPACT PROJECT ROW + SNAP BESIDE STAGE ===== */
/* Keep the clock element for playback code, but remove the large visible 00000 display. */
#currentTime{display:none!important}

/* Story + Scene only: compact the upper row. */
#projectBar{
  height:50px!important;
  min-height:50px!important;
  margin-top:8px!important;
  padding:5px 12px!important;
}
#projectBar label{font-size:17px!important;margin-right:12px!important}
#projectBar input{
  height:36px!important;
  padding:0 10px!important;
  font-size:17px!important;
}

/* Snap now lives beside the five Stage test buttons. */
#stageSnap29{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  margin-left:5px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#stageSnap29 select{
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 9px!important;
  border-radius:17px!important;
  color:#fff!important;
  background:#34363e!important;
  border:1px solid #ffffff45!important;
  font-size:14px!important;
}

/* No duplicate empty/black edit row. */
#editBar{display:none!important}


/* ===== GAYLE SAFE BOX FIT — CLEAN MASTER =====
   Keep the known-good track geometry. Gayle uses 28px inside the existing
   toolbox; Darlene and the original horizontal scrollbar remain intact. */
.trackLabel.expanded,.trackLane.expanded{height:319px!important}
.clipControls{height:259px!important;overflow-x:scroll!important;overflow-y:hidden!important}
.clipControls > .motion41{width:1500px!important;min-width:1500px!important;max-width:none!important;flex:0 0 28px!important}

/* ===== BUILD 44 — BUCKY ABSOLUTE TOOLBOX VIEWPORT =====
   Outer toolbox geometry is explicit. JavaScript supplies the visible
   timeline left/width so horizontal timeline scrolling cannot cut it off. */
.trackLane{position:relative!important}
.trackLane.expanded .clipControls{
  position:absolute!important;
  right:auto!important;
  box-sizing:border-box!important;
  height:259px!important;
  overflow-x:scroll!important;
  overflow-y:hidden!important;
}

/* ==========================================================
   GOLDEN ROAD — GROW THE WHOLE BOX
   Internal rows remain untouched and in their existing flow.
   ========================================================== */
.trackLabel.expanded,
.trackLane.expanded{
  height:379px!important;
}

.trackLane.expanded .clipControls{
  height:319px!important;
}
/* END GOLDEN ROAD — GROW THE WHOLE BOX */