/* Warcut / Warpaint 20-Phase Modernization - Phase 04 Timeline Layout Rebuild
   Refines the preserved Phase 18 / 18.2 timeline into a tighter editor-style layout.
   Builds on Phase 03 resize shell without replacing existing timeline/export behavior. */
:root{
  --warcut-phase04-track-width:220px;
  --warcut-phase04-compact-row:32px;
  --warcut-phase04-main-row:44px;
  --warcut-phase04-header-bg:linear-gradient(180deg,rgba(55,61,70,.95),rgba(37,43,52,.96));
}

html.warcut-phase04-timeline-layout-ready .timeline-bar.warcut-phase03-timeline-host{
  grid-template-columns:minmax(245px,auto) minmax(0,1fr) !important;
  grid-template-rows:minmax(26px,auto) minmax(0,1fr) !important;
  gap:4px 8px !important;
  padding:3px 7px 5px !important;
  align-items:stretch !important;
  background:linear-gradient(180deg,rgba(46,51,59,.98),rgba(31,36,44,.98)) !important;
}

html.warcut-phase04-timeline-layout-ready .timeline-bar.warcut-phase03-timeline-host .timeline-labels{
  min-width:240px !important;
  min-height:26px;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  overflow:hidden;
}

html.warcut-phase04-timeline-layout-ready .timeline-labels strong{
  flex:0 0 auto;
  font-size:11px !important;
  letter-spacing:.02em;
}

html.warcut-phase04-timeline-layout-ready .timeline-labels > span:not(.phase04-timeline-header-tools):not(.phase04-height-chip){
  flex:1 1 auto;
  min-width:90px;
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px !important;
}

.phase04-timeline-header-tools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  min-height:22px;
  padding:2px 4px;
  border:1px solid rgba(84,103,120,.66);
  border-radius:7px;
  background:rgba(10,13,18,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.phase04-height-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:18px;
  padding:2px 6px;
  border:1px solid rgba(57,207,255,.25);
  border-radius:999px;
  background:rgba(57,207,255,.08);
  color:#bfefff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.phase04-height-chip small{
  color:#f4fbff;
  font-size:9px;
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
}

.phase04-timeline-header-tools button{
  min-height:18px !important;
  padding:2px 6px !important;
  border:1px solid rgba(110,132,153,.74) !important;
  border-radius:5px !important;
  background:rgba(20,24,31,.88) !important;
  color:#e7f8ff !important;
  font-size:9px !important;
  line-height:1 !important;
}

.phase04-timeline-header-tools button:hover{
  border-color:rgba(57,207,255,.72) !important;
  color:#9defff !important;
}

html.warcut-phase04-timeline-layout-ready .timeline-strip.phase7-timeline{
  min-height:24px !important;
  align-self:center !important;
  padding:0 !important;
  gap:5px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

html.warcut-phase04-timeline-layout-ready .timeline-strip.phase7-timeline .frame,
html.warcut-phase04-timeline-layout-ready .timeline-strip.phase7-timeline .timeline-mini{
  min-height:20px !important;
  padding:2px 7px !important;
  font-size:9.5px !important;
}

html.warcut-phase04-timeline-layout-ready .timeline-note{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:9px auto minmax(78px,1.15fr) minmax(74px,.95fr) minmax(26px,auto);
  gap:4px;
  min-height:0;
  height:100%;
  padding:0 !important;
  overflow:hidden !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase03-timeline-resize-handle{
  min-height:9px !important;
  height:9px !important;
  padding:0 !important;
  justify-content:center !important;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg,rgba(82,96,111,.7),rgba(28,33,41,.9)) !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase03-timeline-resize-handle::before{
  flex:0 0 160px;
  max-width:160px;
  height:5px;
  opacity:.75;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase03-timeline-resize-title,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase03-timeline-resize-actions{
  display:none !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-toolbar{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-height:0;
  padding:0 6px !important;
  overflow:hidden;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-toolbar-row{
  gap:4px !important;
  min-height:22px;
  align-items:center;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-pill{
  padding:3px 7px !important;
  font-size:9px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout button,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout select,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout input{
  min-height:20px;
  font-size:10px;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-transform{
  margin-left:0 !important;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-transform input{
  width:54px;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-timeline-shell{
  grid-row:3;
  display:grid !important;
  grid-template-columns:var(--warcut-phase04-track-width) minmax(0,1fr) !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 6px !important;
  border-radius:7px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-column{
  min-height:0;
  overflow:hidden;
  grid-template-rows:34px var(--warcut-phase04-main-row) repeat(4, var(--warcut-phase04-compact-row)) !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-head,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-row{
  padding:4px 8px !important;
  min-height:0;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-head strong,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-title{
  font-size:10.5px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-head small,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.8px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-scroll-column,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-scroll-area{
  min-height:0;
  height:100%;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-scroll-area{
  overflow:auto !important;
  overscroll-behavior:contain;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-ruler{
  height:34px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-track-lane{
  min-height:var(--warcut-phase04-compact-row) !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-main-lane{
  min-height:var(--warcut-phase04-main-row) !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-clip{
  top:5px !important;
  bottom:5px !important;
  padding:4px 8px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-clip-title{
  font-size:10px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-clip-meta{
  font-size:8.5px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline{
  grid-row:4;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 6px !important;
  overflow:hidden !important;
  border-radius:7px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-head{
  flex:0 0 auto;
  min-height:30px;
  padding:4px 8px !important;
  gap:6px !important;
  background:var(--warcut-phase04-header-bg) !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-head strong{
  font-size:11px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-head span{
  max-width:310px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.8px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-actions{
  flex-wrap:nowrap !important;
  overflow-x:auto;
  justify-content:flex-end;
  scrollbar-width:thin;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-actions button{
  flex:0 0 auto;
  min-height:20px !important;
  padding:2px 6px !important;
  font-size:9px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-grid{
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:var(--warcut-phase04-track-width) minmax(0,1fr) !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-labels,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-scroll{
  min-height:0;
  max-height:100%;
  overflow:auto !important;
  scrollbar-width:thin;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-label,
html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-lane{
  height:32px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-label{
  padding:3px 7px !important;
  grid-template-columns:38px 1fr !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-name{
  font-size:10px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-label small{
  font-size:8.5px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-layer-segment{
  top:6px !important;
  height:19px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout #phase1LayerTimeline .phase1-timeline-hint{
  flex:0 0 auto;
  max-height:20px !important;
  padding:4px 8px !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-frame-rail{
  grid-row:5;
  min-height:26px;
  max-height:36px;
  margin:0 !important;
  padding:0 6px 4px !important;
  align-items:center;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout .phase18-frame-chip{
  min-height:24px !important;
  padding:4px 7px !important;
}

html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase03-collapsed .phase03-timeline-resize-handle{
  min-height:22px !important;
  height:22px !important;
}

@media (max-width:1100px){
  :root{ --warcut-phase04-track-width:190px; }
  html.warcut-phase04-timeline-layout-ready .timeline-bar.warcut-phase03-timeline-host{
    grid-template-columns:1fr !important;
  }
  html.warcut-phase04-timeline-layout-ready .timeline-labels > span:not(.phase04-timeline-header-tools):not(.phase04-height-chip){
    display:none;
  }
  html.warcut-phase04-timeline-layout-ready #phase18Controls.warcut-phase04-layout{
    grid-template-rows:9px auto minmax(72px,1fr) minmax(70px,1fr) minmax(26px,auto);
  }
}