#phase-accordion, #milestone-accordion { border-bottom: 1px solid var(--line); }
#phase-accordion > summary, #milestone-accordion > summary {
  padding: 12px 9px; font-size: 12px; font-weight: 650; color: #c6d8e8; cursor: pointer;
  background: #172331;
}
.milestone-panel-body { padding: 9px; font-size: 12px; }
.milestone-hint { margin: 0 0 10px; color: #94aabc; line-height: 1.5; }
.milestone-card {
  display: flex; flex-direction: column; align-items: start; gap: 5px; width: 100%;
  padding: 10px; text-align: left; border: 1px solid #33495e; border-radius: 6px; background: #13212d;
}
.milestone-card strong { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.milestone-card small { color: #9bb4ca; font-size: 10px; }
.milestone-card[aria-pressed="true"] { background: #203f4b; border-color: #81d5c4; }
.milestone-timeline { margin: 12px 0 8px; padding: 0 0 0 10px; list-style: none; border-left: 2px solid #38586b; }
.milestone-timeline li { margin: 0 0 12px; position: relative; }
.milestone-timeline li::before { content: ''; position: absolute; left: -15px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #83c6bf; }
.milestone-edit { padding: 4px 0; font-size: 10px; }
.milestone-panel-body > button { margin: 4px 0; max-width: 100%; white-space: normal; }
.milestone-summary { border-top: 1px solid #385166; margin-top: 12px; padding-top: 5px; line-height: 1.5; }
.milestone-summary h3 { font-size: 13px; }
.milestone-summary p { white-space: pre-wrap; }
.milestone-summary ul { padding-left: 17px; }
.milestone-warning { color: #e0c188; }
.milestone-rail { display: none; }
.is-collapsed .milestone-rail {
  display: block; writing-mode: vertical-rl; margin: 24px 0 0; padding: 14px 7px; align-self: stretch;
  border: 0; border-top: 1px solid #344c62; background: #172735; color: #b6d1e3; font-size: 12px;
}
.milestone-rail.has-active-milestone { color: #a2e3d6; background: #1c3d45; }
.milestone-projection-bar {
  display: flex; align-items: center; flex: none; gap: 10px; min-height: 29px;
  border-top: 1px solid #263c4d; background: #11202b; padding: 3px 10px; font-size: 11px; color: #9db7ca;
}
.milestone-projection-bar > span { flex: 1; min-width: 0; }
.milestone-projection-bar strong { color: #b7e8da; }
.milestone-projection-bar button { font-size: 10px; padding: 3px 5px; flex: none; }
dialog:has(#milestone-picker) { width: min(1200px, 95vw); max-width: 1200px; }
.milestone-form-meta { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 12px; }
.milestone-picker-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.milestone-picker-filters label { display: grid; gap: 4px; color: #a4bdce; font-size: 11px; }
.milestone-picker-filters input, .milestone-picker-filters select { width: 100%; min-width: 0; }
.milestone-picker-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; font-size: 12px; }
.milestone-picker-tools output { margin-left: auto; color: #a4d7c9; }
.milestone-picker-list { max-height: 40vh; min-height: 120px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.milestone-picker-list h3 { position: sticky; top: 0; background: #1a2d3c; margin: 10px 0 0; padding: 7px; font-size: 12px; z-index: 1; }
.milestone-scope-row { display: grid; grid-template-columns: minmax(0, 1fr) 155px 65px; gap: 8px; border-bottom: 1px solid #2b3c4b; padding: 8px 6px; align-items: center; }
.milestone-scope-name { display: flex; align-items: start; gap: 8px; font-size: 12px; line-height: 1.45; }
.milestone-scope-name small { display: block; color: #8cabc1; margin-top: 2px; }
.milestone-scope-row select, .milestone-scope-row input[type="text"], .milestone-delivery-note { font-size: 11px; padding: 5px; min-width: 0; }
.milestone-required { font-size: 11px; white-space: nowrap; }
.milestone-delivery-note { grid-column: 1 / -1; width: 100%; }
@media(max-width: 750px) {
  .milestone-form-meta, .milestone-picker-filters { grid-template-columns: 1fr 1fr; }
  .milestone-scope-row { grid-template-columns: minmax(0, 1fr) 125px; }
  .milestone-required { grid-column: 2; }
  .milestone-projection-bar { flex-wrap: wrap; gap: 3px; }
}