/* Warcut 10-Phase Roadmap - Phase 01 timeline workflow hardening */
:root{
  --phase1-blue:#39cfff;
  --phase1-purple:#8b75ca;
  --phase1-gold:#f5b942;
  --phase1-ink:#0a0d13;
  --phase1-panel:#151a22;
  --phase1-line:rgba(132,151,172,.38);
}

.app-menu .menu-btn{ position:relative; }
.app-menu .menu-btn::after{
  content:'▾';
  margin-left:5px;
  font-size:9px;
  color:rgba(217,239,255,.72);
}

.phase1-command-menu,
.phase1-context-menu{
  position:fixed;
  z-index:99999;
  width:min(270px, calc(100vw - 18px));
  padding:7px;
  border:1px solid rgba(93,207,255,.36);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(26,32,43,.98),rgba(10,12,18,.98));
  box-shadow:0 22px 60px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  color:#eaf8ff;
  backdrop-filter:blur(12px);
}
.phase1-command-title,
.phase1-context-title{
  padding:7px 9px;
  margin-bottom:4px;
  border-radius:7px;
  background:rgba(57,207,255,.08);
  color:#aeeeff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.phase1-command-menu button,
.phase1-context-menu button{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#dfeef7;
  font:600 11px/1.15 system-ui,-apple-system,Segoe UI,sans-serif;
  text-align:left;
  cursor:pointer;
}
.phase1-command-menu button:hover,
.phase1-context-menu button:hover{
  background:linear-gradient(90deg,rgba(57,207,255,.18),rgba(139,117,202,.14));
  color:#ffffff;
}
.phase1-menu-sep{
  height:1px;
  margin:5px 4px;
  background:linear-gradient(90deg,transparent,rgba(154,173,194,.28),transparent);
}

.phase1-project-tabs{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  gap:6px;
  align-items:stretch;
  overflow-x:auto;
  padding:2px 0 2px 6px;
  scrollbar-width:thin;
}
.doctabs .doc-tab.ghost{ display:none !important; }
.phase1-project-tab{
  flex:0 0 auto;
  min-width:138px;
  max-width:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:6px 9px;
  border:1px solid rgba(107,123,145,.6);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(27,34,45,.86),rgba(14,18,25,.96));
  color:#dbefff;
  text-align:left;
  cursor:pointer;
}
.phase1-project-tab span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
}
.phase1-project-tab small{
  color:#91a8bb;
  font-size:9px;
  white-space:nowrap;
}
.phase1-project-tab.active{
  border-color:var(--phase1-blue);
  background:linear-gradient(180deg,rgba(57,207,255,.2),rgba(14,18,25,.96));
  box-shadow:0 0 0 1px rgba(57,207,255,.18),0 0 18px rgba(57,207,255,.09);
}
.phase1-project-tab.phase1-project-tool{
  min-width:54px;
  align-items:center;
  text-align:center;
  color:#bff1ff;
}
.phase1-project-tab.danger{ color:#ffd0d0; border-color:rgba(255,107,107,.32); }

.phase18-clip{ overflow:hidden; }
.phase1-clip-edge{
  position:absolute;
  top:0;
  bottom:0;
  width:10px;
  z-index:6;
  background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,0));
  opacity:.56;
}
.phase1-clip-edge-start{ left:0; cursor:w-resize; }
.phase1-clip-edge-end{ right:0; cursor:e-resize; transform:scaleX(-1); }
.phase18-clip:hover .phase1-clip-edge{ opacity:1; }
.phase1-clip-duration-badge{
  position:absolute;
  right:7px;
  bottom:4px;
  padding:1px 4px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  color:#f4edff;
  font-size:8px;
  letter-spacing:.02em;
  pointer-events:none;
}
html.phase1-trimming{ cursor:ew-resize !important; }
html.phase1-trimming *{ user-select:none !important; }

.phase1-layer-timeline{
  margin-top:8px;
  border:1px solid rgba(95,108,123,.78);
  border-radius:9px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(21,26,34,.96),rgba(12,16,23,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.phase1-layer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(48,54,64,.86),rgba(31,36,45,.95));
}
.phase1-layer-head strong{
  display:block;
  color:#f4f8ff;
  font-size:12px;
}
.phase1-layer-head span{
  display:block;
  margin-top:1px;
  color:#9daebe;
  font-size:10px;
}
.phase1-layer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  justify-content:flex-end;
}
.phase1-layer-actions button,
.phase1-preset-apply{
  min-height:23px;
  padding:4px 7px;
  border:1px solid rgba(93,113,126,.9);
  border-radius:6px;
  background:#1c1f24;
  color:#e8f7ff;
  font-size:10px;
  cursor:pointer;
}
.phase1-layer-actions button:hover,
.phase1-preset-apply:hover{
  border-color:var(--phase1-blue);
  color:#9defff;
}
.phase1-layer-grid{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  min-height:118px;
}
.phase1-layer-labels{
  border-right:1px solid rgba(104,115,128,.55);
  background:linear-gradient(180deg,#252a31,#1e232b);
}
.phase1-layer-label{
  width:100%;
  height:38px;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:1fr 1fr;
  align-items:center;
  gap:0 6px;
  padding:4px 8px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:transparent;
  color:#dceefa;
  text-align:left;
  cursor:pointer;
}
.phase1-layer-label:hover{ background:rgba(57,207,255,.08); }
.phase1-layer-label.active{ background:linear-gradient(90deg,rgba(57,207,255,.16),rgba(139,117,202,.08)); }
.phase1-layer-label.selected{ box-shadow:inset 3px 0 0 rgba(245,185,66,.9); }
.phase1-layer-toggles{
  grid-row:1 / 3;
  display:flex;
  gap:3px;
}
.phase1-layer-toggles b{
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  border:1px solid rgba(134,151,171,.45);
  border-radius:4px;
  color:#aac3d7;
  font-size:9px;
}
.phase1-layer-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf8ff;
  font-size:11px;
  font-weight:700;
}
.phase1-layer-label small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#91a3b6;
  font-size:9px;
}
.phase1-layer-scroll{
  overflow:auto;
  background:#1c2027;
  scrollbar-width:thin;
}
.phase1-layer-lanes{ position:relative; min-height:100%; }
.phase1-layer-lane{
  position:relative;
  height:38px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:repeating-linear-gradient(to right, rgba(255,255,255,.035) 0 1px, transparent 1px 24px),linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.04));
}
.phase1-layer-lane.active{ background-color:rgba(57,207,255,.035); }
.phase1-layer-segment{
  position:absolute;
  top:8px;
  height:21px;
  border:1px solid rgba(116,133,155,.62);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(57,207,255,.13),rgba(78,94,118,.22));
  color:transparent;
  overflow:hidden;
  cursor:pointer;
}
.phase1-layer-segment.current{
  border-color:rgba(57,207,255,.9);
  background:linear-gradient(180deg,rgba(57,207,255,.26),rgba(139,117,202,.18));
  color:#dff8ff;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.phase1-layer-segment.hidden{
  opacity:.34;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 4px,rgba(0,0,0,.12) 4px 8px);
}
.phase1-timeline-hint{
  padding:6px 10px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#8fa2b7;
  font-size:10px;
  background:rgba(0,0,0,.12);
}

.preset-browser{
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(210px,280px);
  gap:12px;
}
.preset-browser .preset-grid,
.preset-browser .dialog-grid{ grid-column:1; }
.phase1-preset-info{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:stretch;
  padding:12px;
  border:1px solid rgba(57,207,255,.22);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(19,28,39,.9),rgba(13,16,23,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.phase1-info-kicker{
  color:#8bdfff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.phase1-preset-info h3{
  margin:6px 0 4px;
  color:#f5fbff;
  font-size:16px;
}
.phase1-preset-info p{
  margin:0 0 10px;
  color:#aebdcb;
  font-size:11px;
  line-height:1.45;
}
.phase1-preset-size{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px;
  margin-bottom:9px;
  border-radius:8px;
  background:rgba(57,207,255,.08);
  color:#dff8ff;
  font-size:11px;
}
.phase1-preset-size span{ color:#9fb3c4; }
.phase1-preset-info ul{
  margin:0 0 10px 16px;
  padding:0;
  color:#c8d9e7;
  font-size:11px;
  line-height:1.55;
}
.phase1-preset-apply{ width:100%; }

@media (max-width: 1100px){
  .phase1-layer-grid{ grid-template-columns:1fr; }
  .phase1-layer-labels{ border-right:0; }
  .preset-browser{ grid-template-columns:1fr; }
  .phase1-preset-info{ grid-column:1; grid-row:auto; }
}


/* Phase 18.2.1 - Header/top-strip cleanup before Roadmap Phase 02
   Goal: prevent menu concealment, stop project tabs from crowding tool controls,
   and keep dropdowns pinned to the top nav instead of opening over the canvas. */
html[data-warcut-phase="18.2.1"] .app-shell,
html[data-warcut-roadmap-phase="01-header-cleanup"] .app-shell{
  grid-template-rows:minmax(30px,34px) minmax(44px,auto) minmax(42px,auto) minmax(0,1fr) 24px;
}
html[data-warcut-phase="18.2.1"] .topbar,
html[data-warcut-roadmap-phase="01-header-cleanup"] .topbar{
  grid-template-columns:minmax(150px,auto) minmax(390px,1fr) auto;
  min-height:30px;
  padding:0 8px;
  gap:8px;
  overflow:visible;
  position:relative;
  z-index:80;
}
html[data-warcut-phase="18.2.1"] .brand-copy strong,
html[data-warcut-roadmap-phase="01-header-cleanup"] .brand-copy strong{font-size:11px;}
html[data-warcut-phase="18.2.1"] .brand-copy span,
html[data-warcut-roadmap-phase="01-header-cleanup"] .brand-copy span{font-size:8px;max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-warcut-phase="18.2.1"] .app-menu,
html[data-warcut-roadmap-phase="01-header-cleanup"] .app-menu{
  justify-content:center;
  overflow:visible;
  gap:1px;
  padding:0 4px;
  min-width:0;
}
html[data-warcut-phase="18.2.1"] .menu-btn,
html[data-warcut-roadmap-phase="01-header-cleanup"] .menu-btn{
  padding:5px 8px;
  border-radius:6px;
  line-height:1;
}
html[data-warcut-phase="18.2.1"] .menu-btn.phase1-menu-open,
html[data-warcut-roadmap-phase="01-header-cleanup"] .menu-btn.phase1-menu-open{
  background:linear-gradient(180deg,rgba(57,207,255,.18),rgba(139,117,202,.08));
  border-color:rgba(57,207,255,.35);
  color:#fff;
}
html[data-warcut-phase="18.2.1"] .topbar-actions,
html[data-warcut-roadmap-phase="01-header-cleanup"] .topbar-actions{justify-content:flex-end;}
html[data-warcut-phase="18.2.1"] .optionsbar,
html[data-warcut-roadmap-phase="01-header-cleanup"] .optionsbar{
  grid-template-columns:minmax(500px,auto) minmax(300px,1fr) minmax(500px,auto);
  min-height:44px;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  overflow:hidden;
}
html[data-warcut-phase="18.2.1"] .option-group,
html[data-warcut-roadmap-phase="01-header-cleanup"] .option-group{flex-wrap:wrap;row-gap:4px;}
html[data-warcut-phase="18.2.1"] .tool-settings,
html[data-warcut-roadmap-phase="01-header-cleanup"] .tool-settings{
  justify-content:flex-start;
  overflow:hidden;
}
html[data-warcut-phase="18.2.1"] .tool-settings input[type="range"],
html[data-warcut-roadmap-phase="01-header-cleanup"] .tool-settings input[type="range"]{width:92px;}
html[data-warcut-phase="18.2.1"] .option-group.compact-ops,
html[data-warcut-roadmap-phase="01-header-cleanup"] .option-group.compact-ops{
  justify-content:flex-end;
  overflow:hidden;
}
html[data-warcut-phase="18.2.1"] .option-group.compact-ops input[type="range"],
html[data-warcut-roadmap-phase="01-header-cleanup"] .option-group.compact-ops input[type="range"]{width:96px;}
html[data-warcut-phase="18.2.1"] .action-btn,
html[data-warcut-roadmap-phase="01-header-cleanup"] .action-btn{padding:5px 9px;font-size:11px;}
html[data-warcut-phase="18.2.1"] .action-btn.small,
html[data-warcut-phase="18.2.1"] .small-btn,
html[data-warcut-roadmap-phase="01-header-cleanup"] .action-btn.small,
html[data-warcut-roadmap-phase="01-header-cleanup"] .small-btn{padding:4px 7px;font-size:10.5px;}
html[data-warcut-phase="18.2.1"] .doctabs,
html[data-warcut-roadmap-phase="01-header-cleanup"] .doctabs{
  align-items:stretch;
  gap:6px;
  min-height:42px;
  padding:5px 8px;
  overflow:hidden;
  background:linear-gradient(180deg,#2b2b2b,#202020);
}
html[data-warcut-phase="18.2.1"] .doctabs #activeDocTab,
html[data-warcut-roadmap-phase="01-header-cleanup"] .doctabs #activeDocTab{
  flex:0 0 min(340px,28vw);
  height:auto;
  min-width:190px;
  border:1px solid rgba(56,189,248,.44);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(34,42,55,.96),rgba(20,24,32,.98));
  box-shadow:inset 0 2px 0 rgba(56,189,248,.5);
  display:flex;
  align-items:center;
  padding:0 11px;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-warcut-phase="18.2.1"] .phase1-project-tabs,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-project-tabs{
  flex:1 1 auto;
  padding:0;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  align-items:stretch;
}
html[data-warcut-phase="18.2.1"] .phase1-project-tab,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-project-tab{
  min-width:150px;
  max-width:230px;
  padding:5px 8px;
  border-radius:8px;
}
html[data-warcut-phase="18.2.1"] .phase1-project-tab.phase1-project-tool,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-project-tab.phase1-project-tool{
  min-width:46px;
  max-width:58px;
}
html[data-warcut-phase="18.2.1"] .phase1-command-menu,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-command-menu{
  width:min(315px,calc(100vw - 16px));
  max-height:min(78vh,620px);
  overflow:auto;
  z-index:2147483000;
  border-color:rgba(245,185,66,.42);
}
html[data-warcut-phase="18.2.1"] .phase1-command-title,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-command-title{
  background:linear-gradient(90deg,rgba(245,185,66,.14),rgba(57,207,255,.08));
  color:#ffe8a6;
}
html[data-warcut-phase="18.2.1"] .phase1-command-menu button,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-command-menu button{padding:8px 10px;font-size:11.5px;}
html[data-warcut-phase="18.2.1"] .phase1-context-menu,
html[data-warcut-roadmap-phase="01-header-cleanup"] .phase1-context-menu{z-index:2147483001;}
@media (max-width:1500px){
  html[data-warcut-phase="18.2.1"] .optionsbar,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .optionsbar{grid-template-columns:minmax(420px,auto) minmax(260px,1fr) minmax(360px,auto);}
  html[data-warcut-phase="18.2.1"] .option-group.compact-ops .dock-focus-btn,
  html[data-warcut-phase="18.2.1"] .option-group.compact-ops .panel-toggle-all-btn,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .option-group.compact-ops .dock-focus-btn,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .option-group.compact-ops .panel-toggle-all-btn{display:none;}
}
@media (max-width:1180px){
  html[data-warcut-phase="18.2.1"] .topbar,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .topbar{grid-template-columns:1fr auto;grid-template-areas:"brand actions" "menu menu";min-height:58px;}
  html[data-warcut-phase="18.2.1"] .brand-lockup,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .brand-lockup{grid-area:brand;}
  html[data-warcut-phase="18.2.1"] .app-menu,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .app-menu{grid-area:menu;justify-content:flex-start;overflow-x:auto;}
  html[data-warcut-phase="18.2.1"] .topbar-actions,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .topbar-actions{grid-area:actions;}
  html[data-warcut-phase="18.2.1"] .optionsbar,
  html[data-warcut-roadmap-phase="01-header-cleanup"] .optionsbar{grid-template-columns:1fr;overflow:auto;}
}