/* Warcut / Warpaint 20-Phase Modernization - Phase 05 Transport + Navigation
   Adds full-width timeline allocation and a Photoshop-style transport/navigation strip. */
:root{
  --warcut-phase05-track-width:210px;
  --warcut-phase05-transport-height:30px;
}

html.warcut-phase05-transport-ready .timeline-bar.warcut-phase03-timeline-host{
  grid-template-columns:minmax(0,1fr) !important;
  column-gap:0 !important;
  padding-left:6px !important;
  padding-right:6px !important;
}

html.warcut-phase05-transport-ready .timeline-bar.warcut-phase03-timeline-host .timeline-labels{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

html.warcut-phase05-transport-ready .timeline-bar.warcut-phase03-timeline-host .timeline-strip{
  display:none !important;
}

html.warcut-phase05-transport-ready #phase18Controls.warcut-phase04-layout,
html.warcut-phase05-transport-ready #phase18Controls.warcut-phase05-layout{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
  grid-template-rows:9px var(--warcut-phase05-transport-height) auto minmax(78px,1.2fr) minmax(76px,1fr) minmax(26px,auto) !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase05-transport-strip,
html.warcut-phase05-transport-ready #phase18Controls .phase18-toolbar,
html.warcut-phase05-transport-ready #phase18Controls .phase18-timeline-shell,
html.warcut-phase05-transport-ready #phase18Controls #phase1LayerTimeline,
html.warcut-phase05-transport-ready #phase18Controls .phase18-frame-rail{
  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-left:6px !important;
  margin-right:6px !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase05-transport-strip{
  grid-row:2;
  min-height:var(--warcut-phase05-transport-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 7px;
  border:1px solid rgba(57,207,255,.20);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(25,31,40,.96),rgba(12,15,21,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-toolbar{
  grid-row:3 !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-timeline-shell{
  grid-row:4 !important;
  grid-template-columns:var(--warcut-phase05-track-width) minmax(0,1fr) !important;
}

html.warcut-phase05-transport-ready #phase18Controls #phase1LayerTimeline{
  grid-row:5 !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-frame-rail{
  grid-row:6 !important;
}

.phase05-transport-left,
.phase05-transport-center,
.phase05-transport-right{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.phase05-transport-center{
  flex:1 1 auto;
  justify-content:center;
  overflow:hidden;
}
.phase05-transport-right{
  flex:0 1 auto;
  justify-content:flex-end;
}
.phase05-transport-left{ flex:0 0 auto; }

.phase05-transport-strip button,
.phase05-transport-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;
}
.phase05-transport-strip button:hover,
.phase05-transport-strip select:hover{
  border-color:rgba(57,207,255,.75) !important;
  color:#9defff !important;
}
.phase05-transport-strip button.phase05-play{
  min-width:58px;
  border-color:rgba(57,207,255,.72) !important;
  background:linear-gradient(180deg,rgba(57,207,255,.22),rgba(13,18,26,.96)) !important;
}
.phase05-transport-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;
}
.phase05-transport-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:20px;
  padding:2px 7px;
  border:1px solid rgba(83,103,120,.56);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:#cfe8f4;
  font-size:10px;
  white-space:nowrap;
}
.phase05-transport-chip strong{
  color:#f8fdff;
  font-weight:800;
}
.phase05-mini-label{
  color:#9fb4c5;
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.phase05-fps-select{ min-width:74px; }

html.warcut-phase05-transport-ready #phase18Controls .phase18-scroll-column,
html.warcut-phase05-transport-ready #phase18Controls .phase18-scroll-area,
html.warcut-phase05-transport-ready #phase18Controls #phase1LayerScroll{
  width:100% !important;
  max-width:none !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-ruler-inner,
html.warcut-phase05-transport-ready #phase18Controls .phase18-lanes-wrap,
html.warcut-phase05-transport-ready #phase18Controls .phase18-lane-inner,
html.warcut-phase05-transport-ready #phase18Controls .phase1-layer-lanes{
  min-width:100% !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-ruler,
html.warcut-phase05-transport-ready #phase18Controls .phase18-scroll-area{
  cursor:crosshair;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-playhead{
  cursor:ew-resize;
  pointer-events:auto;
}

html.phase05-playhead-dragging,
html.phase05-playhead-dragging *{
  cursor:ew-resize !important;
  user-select:none !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-track-column,
html.warcut-phase05-transport-ready #phase18Controls #phase1LayerTimeline .phase1-layer-grid{
  grid-template-columns:var(--warcut-phase05-track-width) minmax(0,1fr) !important;
}

html.warcut-phase05-transport-ready #phase18Controls .phase18-toolbar-row{
  justify-content:flex-start;
}

html.warcut-phase05-transport-ready #phase18PlayBtn{
  display:none !important;
}

@media (max-width:1180px){
  :root{ --warcut-phase05-track-width:185px; }
  html.warcut-phase05-transport-ready #phase18Controls.warcut-phase04-layout,
  html.warcut-phase05-transport-ready #phase18Controls.warcut-phase05-layout{
    grid-template-rows:9px auto auto minmax(72px,1fr) minmax(72px,1fr) minmax(26px,auto) !important;
  }
  html.warcut-phase05-transport-ready #phase18Controls .phase05-transport-strip{
    flex-wrap:wrap;
    min-height:46px;
  }
  .phase05-transport-center{ justify-content:flex-start; }
}