/* Phase 18.3 / Roadmap Phase 02 - frame-layer timeline sync model */
html[data-warcut-roadmap-phase="02-frame-layer-sync"] .brand-copy span::after{
  content:" | Phase 02 frame-layer sync model";
  color:#99f6e4;
}
.phase2-frame-layer-sync{
  margin:8px 0 0;
  border:1px solid rgba(45,212,191,.28);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(8,18,31,.96),rgba(11,15,25,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  color:#dbeafe;
  overflow:hidden;
}
.phase2-sync-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
  background:linear-gradient(90deg,rgba(20,184,166,.13),rgba(59,130,246,.08),rgba(168,85,247,.07));
}
.phase2-sync-head strong{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#ecfeff;}
.phase2-sync-head small{display:block;margin-top:2px;color:#99a9c3;font-size:11px;}
.phase2-kicker{display:inline-flex;margin-bottom:3px;font-size:10px;color:#5eead4;text-transform:uppercase;letter-spacing:.12em;}
.phase2-sync-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.phase2-sync-actions button,
.phase2-track-mini,
.phase2-track-name,
.phase2-track-jump{
  border:1px solid rgba(125,211,252,.26);
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(8,13,25,.98));
  color:#dff8ff;
  border-radius:8px;
  padding:5px 8px;
  font-size:11px;
  cursor:pointer;
}
.phase2-sync-actions button:hover,
.phase2-track-mini:hover,
.phase2-track-name:hover,
.phase2-track-jump:hover{border-color:rgba(45,212,191,.55);color:#fff;background:rgba(20,184,166,.16);}
.phase2-sync-status{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:7px 12px;
  border-bottom:1px solid rgba(148,163,184,.14);
  background:rgba(2,6,23,.42);
  font-size:11px;
  color:#b9c7dc;
}
.phase2-sync-status span{display:inline-flex;gap:4px;align-items:center;border:1px solid rgba(148,163,184,.14);border-radius:999px;padding:4px 8px;background:rgba(15,23,42,.72);}
.phase2-sync-status b{color:#e0f2fe;}
.phase2-sync-status .phase2-mode{border-color:rgba(45,212,191,.24);}
.phase2-warning{color:#fde68a!important;border-color:rgba(251,191,36,.35)!important;background:rgba(113,63,18,.24)!important;}
.phase2-collapsible-body{display:block;}
.phase2-frame-layer-sync.collapsed .phase2-collapsible-body{display:none;}
.phase2-track-grid{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:118px;border-bottom:1px solid rgba(148,163,184,.14);}
.phase2-track-labels{border-right:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.48);}
.phase2-track-label{min-height:35px;display:grid;grid-template-columns:26px 26px 26px minmax(0,1fr) 46px;align-items:center;gap:4px;padding:4px 6px;border-bottom:1px solid rgba(148,163,184,.11);}
.phase2-track-label.active{background:linear-gradient(90deg,rgba(45,212,191,.16),rgba(59,130,246,.06));box-shadow:inset 3px 0 0 rgba(45,212,191,.85);}
.phase2-track-label.collapsed{min-height:25px;opacity:.9;}
.phase2-track-mini{padding:3px 0;text-align:center;min-width:24px;font-size:10px;border-radius:6px;}
.phase2-track-name{min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 6px;background:transparent;border-color:transparent;}
.phase2-track-jump{padding:4px 6px;font-size:10px;}
.phase2-track-scroll{overflow:auto;background:linear-gradient(90deg,rgba(15,23,42,.58),rgba(2,6,23,.72));}
.phase2-track-lanes{position:relative;min-width:720px;}
.phase2-track-lane{position:relative;height:35px;border-bottom:1px solid rgba(148,163,184,.11);background-image:linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);background-size:96px 100%;}
.phase2-track-lane.active{background-color:rgba(45,212,191,.05);}
.phase2-track-lane.collapsed{height:25px;}
.phase2-clip,
.phase2-visibility-ref{
  position:absolute;
  top:6px;
  height:23px;
  border-radius:7px;
  border:1px solid rgba(56,189,248,.4);
  background:linear-gradient(180deg,rgba(14,165,233,.24),rgba(37,99,235,.14));
  color:#e0f2fe;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  padding:0 7px;
  font-size:10px;
  overflow:hidden;
  cursor:pointer;
}
.phase2-track-lane.collapsed .phase2-clip{height:15px;top:5px;font-size:0;padding:0 3px;}
.phase2-clip.current{border-color:rgba(251,191,36,.85);box-shadow:0 0 0 1px rgba(251,191,36,.45),0 0 18px rgba(251,191,36,.18);background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(14,165,233,.15));}
.phase2-clip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.phase2-clip small{color:#bae6fd;white-space:nowrap;}
.phase2-visibility-ref{top:9px;height:16px;border-style:dashed;border-color:rgba(167,139,250,.36);background:rgba(167,139,250,.10);opacity:.55;pointer-events:auto;}
.phase2-frame-ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px;padding:8px;background:rgba(2,6,23,.34);max-height:168px;overflow:auto;}
.phase2-frame-ledger-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"n name time" "n layer layer";gap:1px 6px;align-items:center;border:1px solid rgba(148,163,184,.16);border-radius:9px;background:rgba(15,23,42,.72);color:#dbeafe;padding:6px 8px;text-align:left;cursor:pointer;}
.phase2-frame-ledger-row:hover{border-color:rgba(45,212,191,.45);background:rgba(20,184,166,.10);}
.phase2-frame-ledger-row.current{border-color:rgba(251,191,36,.68);box-shadow:inset 3px 0 0 rgba(251,191,36,.85);}
.phase2-frame-ledger-row b{grid-area:n;color:#5eead4;font-size:12px;}
.phase2-frame-ledger-row span{grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#eff6ff;}
.phase2-frame-ledger-row small{grid-area:time;color:#93c5fd;font-size:10px;}
.phase2-frame-ledger-row em{grid-area:layer;color:#a7f3d0;font-size:10px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.phase2-linked-to-active-layer{outline:1px solid rgba(45,212,191,.48)!important;outline-offset:-2px;}
.phase2-model-selected{box-shadow:0 0 0 1px rgba(251,191,36,.62),0 0 18px rgba(251,191,36,.16)!important;}
.phase2-track-active{box-shadow:inset 3px 0 0 rgba(45,212,191,.9)!important;}
.phase2-track-has-selected-frame{filter:saturate(1.15) brightness(1.08);}
@media (max-width:1180px){
  .phase2-sync-head{align-items:flex-start;flex-direction:column;}
  .phase2-sync-actions{justify-content:flex-start;}
  .phase2-track-grid{grid-template-columns:230px minmax(0,1fr);}
  .phase2-track-label{grid-template-columns:24px 24px 24px minmax(0,1fr);}
  .phase2-track-jump{display:none;}
}