.aegis-phase-timeline{margin:10px 0;background:#fbfdfb;border:1px solid #d9e5dd;border-radius:10px;padding:12px 16px;color:#204c3c;--phase-color:#63ba87}
#workspace:has(.aegis-phase-timeline) .sla-ticket-summary{display:none}
.aegis-phase-head{display:grid;grid-template-columns:112px minmax(0,1fr) 148px;align-items:center;gap:14px}
.aegis-phase-head span{font:600 11px/1.4 system-ui,sans-serif;color:#60786a;letter-spacing:.08em}
.aegis-phase-head h3{font:650 13px/1.35 system-ui,sans-serif;margin:1px 0 0}
.aegis-phase-head>strong{font:650 13px/1.35 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:right;color:var(--phase-color)}
.aegis-phase-progress{display:flex;align-items:center;gap:9px;min-width:0}
.aegis-phase-track{position:relative;flex:1;height:9px;min-width:0;background:repeating-linear-gradient(90deg,#e4eee7 0 7px,transparent 7px 10px);overflow:hidden}
.aegis-phase-fill{display:block;height:100%;max-width:100%;background:repeating-linear-gradient(90deg,var(--phase-color) 0 7px,transparent 7px 10px);transition:width .5s linear,background-color .25s ease}
.aegis-phase-spinner{display:block;flex:0 0 11px;color:var(--phase-color);font:700 15px/1 monospace!important;letter-spacing:0!important;text-align:center}
.aegis-phase-spinner::after{content:'|';animation:aegis-phase-spin .72s step-end infinite}
@keyframes aegis-phase-spin{0%{content:'|'}25%{content:'/'}50%{content:'—'}75%{content:'\\'}}
.aegis-phase-timeline[data-tone="mid"]{--phase-color:#c99a3f}
.aegis-phase-timeline[data-tone="near"],.aegis-phase-timeline[data-tone="overdue"]{--phase-color:#c76d54}
.aegis-phase-timeline[data-tone="done"]{--phase-color:#3e9c74}
.aegis-phase-timeline[data-tone="done"] .aegis-phase-spinner{visibility:hidden}
.aegis-phase-timeline[data-tone="unknown"]{--phase-color:#899f91}
@media(prefers-reduced-motion:reduce){.aegis-phase-spinner::after{animation:none}}
.aegis-phase-details summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;color:#557465;font:500 12px/1.5 system-ui,sans-serif}
.aegis-phase-details summary::-webkit-details-marker{display:none}
.aegis-phase-details summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0 3px}
.aegis-phase-details[open] summary::after{transform:rotate(225deg);margin:3px 2px 0 3px}
.aegis-phase-details summary:hover{color:#204c3c}
.aegis-phase-details summary:focus-visible{outline:2px solid #268766;outline-offset:4px;border-radius:2px}
.aegis-phase-segments {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  border-top:1px solid #e4ece6;
  margin-top:11px;
  padding-top:11px;
}
.aegis-phase-segment{display:flex;gap:8px;min-width:0;align-items:start;color:#64776d}
.aegis-phase-dot{display:grid;place-items:center;flex:0 0 21px;height:21px;border-radius:50%;background:#e8eee9;font:600 11px system-ui,sans-serif}
.aegis-phase-segment div{min-width:0}
.aegis-phase-segment strong{display:block;font:600 12px/1.5 system-ui,sans-serif}
.aegis-phase-segment time{display:block;font:400 11px/1.5 system-ui,sans-serif;color:#71877b;font-variant-numeric:tabular-nums}
.aegis-phase-segment[data-state="done"] .aegis-phase-dot{background:#d8efe1;color:#267f52}
.aegis-phase-segment[data-state="current"]{color:#225d45}
.aegis-phase-segment[data-state="current"] .aegis-phase-dot{background:#225d45;color:white}
.aegis-phase-segment[data-late="true"]{color:#af482e}
.aegis-phase-segment[data-late="true"] .aegis-phase-dot{background:#fae3dc;color:#af482e}

.nav .op-portal-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  font-size:13px;
}

.nav .op-portal-link:hover {
  background:#ffffff12;
}

@media(max-width:650px) {
  .aegis-phase-timeline{padding:12px}
  .aegis-phase-head{grid-template-columns:78px minmax(0,1fr) 105px;gap:7px}
  .aegis-phase-head h3{font-size:11px}
  .aegis-phase-head>strong{font-size:11px}
  .aegis-phase-progress{gap:4px}
  .aegis-phase-track{height:7px}
  .aegis-phase-segments{grid-template-columns:1fr;gap:9px}
  .aegis-phase-segment{gap:4px;flex-wrap:wrap}
  .aegis-phase-dot{flex-basis:18px;height:18px;font-size:10px}
  .aegis-phase-segment strong{font-size:11px}
  .aegis-phase-segment time{font-size:10px}
}

