/* Warcut / Warpaint 20-Phase Modernization - Phase 06 Timeline Zoom, Scale, and Work Area
   Adds a compact scale/work-area strip, mini overview, draggable work area overlay, and variable timeline width. */
:root{
  --warcut-phase06-scale-height:58px;
  --warcut-phase06-timeline-width:100%;
}

html.warcut-phase06-zoom-ready #phase18Controls.warcut-phase06-layout{
  grid-template-rows:9px var(--warcut-phase05-transport-height) var(--warcut-phase06-scale-height) auto minmax(76px,1.2fr) minmax(78px,1fr) minmax(26px,auto) !important;
}

html.warcut-phase06-zoom-ready #phase18Controls .phase06-scale-strip{
  grid-row:3 !important;
  width:calc(100% - 12px) !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
  margin:0 6px !important;
  min-height:var(--warcut-phase06-scale-height);
  display:grid;
  grid-template-columns:minmax(220px,auto) minmax(260px,1fr) minmax(330px,auto);
  grid-template-rows:26px 20px;
  gap:4px 8px;
  align-items:center;
  padding:4px 7px;
  border:1px solid rgba(57,207,255,.20);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(22,27,35,.96),rgba(10,13,18,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden;
}

html.warcut-phase06-zoom-ready #phase18Controls .phase18-toolbar{ grid-row:4 !important; }
html.warcut-phase06-zoom-ready #phase18Controls .phase18-timeline-shell{ grid-row:5 !important; }
html.warcut-phase06-zoom-ready #phase18Controls #phase1LayerTimeline{ grid-row:6 !important; }
html.warcut-phase06-zoom-ready #phase18Controls .phase18-frame-rail{ grid-row:7 !important; }

.phase06-scale-left,
.phase06-scale-center,
.phase06-scale-right{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  white-space:nowrap;
}
.phase06-scale-center{ justify-content:center; overflow:hidden; }
.phase06-scale-right{ justify-content:flex-end; overflow:hidden; }
.phase06-mini-label{
  color:#9fb4c5;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.phase06-select-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#9fb4c5;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
}
.phase06-scale-strip button,
.phase06-scale-strip select{
  min-height:21px !important;
  padding:3px 7px !important;
  border:1px solid rgba(94,113,130,.82) !important;
  border-radius:6px !important;
  background:rgba(18,22,29,.96) !important;
  color:#eaf8ff !important;
  font-size:10px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.phase06-scale-strip button:hover,
.phase06-scale-strip select:hover{
  border-color:rgba(57,207,255,.75) !important;
  color:#9defff !important;
}
.phase06-scale-strip button.is-active{
  border-color:rgba(245,185,66,.78) !important;
  color:#ffe8a6 !important;
  background:linear-gradient(180deg,rgba(245,185,66,.16),rgba(18,22,29,.95)) !important;
}
.phase06-zoom-slider{
  width:118px;
  accent-color:#39cfff;
}
.phase06-readout{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  max-width:230px;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:2px 7px;
  border:1px solid rgba(83,103,120,.56);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:#d9eff8;
  font-size:10px;
}
.phase06-overview{
  grid-column:1 / -1;
  position:relative;
  min-height:18px;
  border:1px solid rgba(71,92,112,.72);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(6,9,14,.95),rgba(17,23,32,.95));
  overflow:hidden;
  cursor:pointer;
}
.phase06-overview:focus-visible{
  outline:2px solid rgba(57,207,255,.72);
  outline-offset:1px;
}
.phase06-overview-track,
.phase06-overview-work,
.phase06-overview-window{ position:absolute; inset:0; }
.phase06-overview-seg{
  position:absolute;
  top:3px;
  bottom:3px;
  border-radius:3px;
  background:rgba(97,128,154,.60);
}
.phase06-overview-seg.current{ background:rgba(57,207,255,.86); box-shadow:0 0 8px rgba(57,207,255,.38); }
.phase06-overview-work{
  top:2px;
  bottom:2px;
  border-radius:999px;
  background:rgba(245,185,66,.16);
  border-left:1px solid rgba(245,185,66,.82);
  border-right:1px solid rgba(245,185,66,.82);
  pointer-events:none;
}
.phase06-overview-window{
  top:1px;
  bottom:1px;
  border:1px solid rgba(255,255,255,.80);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(57,207,255,.24),0 0 14px rgba(57,207,255,.22);
  pointer-events:none;
}

html.warcut-phase06-zoom-ready #phase18Controls .phase18-ruler-inner,
html.warcut-phase06-zoom-ready #phase18Controls #phase18LanesWrap,
html.warcut-phase06-zoom-ready #phase18Controls .phase18-lane-inner,
html.warcut-phase06-zoom-ready #phase18Controls .phase1-layer-lanes{
  width:var(--warcut-phase06-timeline-width) !important;
  min-width:var(--warcut-phase06-timeline-width) !important;
}

html.warcut-phase06-zoom-ready #phase18LanesWrap{ position:relative !important; }
.phase06-work-area-overlay{
  position:absolute;
  top:0;
  bottom:0;
  z-index:8;
  pointer-events:none;
  border-left:1px solid rgba(245,185,66,.92);
  border-right:1px solid rgba(245,185,66,.92);
  background:linear-gradient(90deg,rgba(245,185,66,.08),rgba(245,185,66,.16),rgba(245,185,66,.08));
  box-shadow:inset 0 0 0 1px rgba(245,185,66,.12),0 0 18px rgba(245,185,66,.08);
}
.phase06-work-area-overlay.is-enabled{ display:block; }
.phase06-work-fill{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.phase06-work-handle{
  position:absolute;
  top:0;
  bottom:0;
  width:10px;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(255,232,166,.95),rgba(245,185,66,.72)) !important;
  opacity:.92;
  cursor:ew-resize !important;
  pointer-events:auto;
}
.phase06-work-handle.start{ left:-5px; }
.phase06-work-handle.end{ right:-5px; }
.phase06-work-handle::after{
  content:'';
  position:absolute;
  top:8px;
  bottom:8px;
  left:4px;
  width:2px;
  border-left:1px solid rgba(25,20,12,.75);
  border-right:1px solid rgba(255,255,255,.34);
}
html.phase06-work-dragging,
html.phase06-work-dragging *{
  cursor:ew-resize !important;
  user-select:none !important;
}

html.warcut-phase06-zoom-ready #phase18Controls .phase18-scroll-area,
html.warcut-phase06-zoom-ready #phase18Controls #phase1LayerScroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(57,207,255,.46) rgba(5,8,12,.55);
}

@media (max-width:1280px){
  html.warcut-phase06-zoom-ready #phase18Controls .phase06-scale-strip{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto 20px;
    min-height:82px;
  }
  .phase06-scale-right{ grid-column:1 / -1; justify-content:flex-start; }
  .phase06-overview{ grid-row:3; }
  html.warcut-phase06-zoom-ready #phase18Controls.warcut-phase06-layout{
    --warcut-phase06-scale-height:82px;
    grid-template-rows:9px auto var(--warcut-phase06-scale-height) auto minmax(70px,1fr) minmax(70px,1fr) minmax(26px,auto) !important;
  }
}