.dc-run-planner { margin: 12px 0; padding: 16px; border: 1px solid #62809b44; border-radius: 16px; background: var(--dc-panel, #101c2a); }
.dc-run-heading, .dc-run-stop-top, .dc-run-summary, .dc-run-actions, .dc-run-directions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-run-heading { justify-content: space-between; }
.dc-run-heading h2 { margin: 0 0 3px; font-size: 20px; }
.dc-run-heading small, .dc-run-identity small { color: var(--dc-muted, #9ab0c5); }
.dc-run-settings, .dc-run-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.dc-run-settings label, .dc-run-review-grid label, .dc-run-notes { display: grid; gap: 5px; min-width: 0; font-size: 12px; }
.dc-run-settings input, .dc-run-review-grid input, .dc-run-review-grid select, .dc-run-notes textarea { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; font-size: 14px; }
/* iOS date/time controls otherwise retain an intrinsic native width inside grid cells. */
.dc-run-settings input[type="date"], .dc-run-settings input[type="time"] { display: block; -webkit-appearance: none; appearance: none; max-width: 100%; min-height: 44px; font-size: 16px; }
.dc-run-settings input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.dc-run-settings input::-webkit-datetime-edit { min-width: 0; padding: 0; }
.dc-run-origin { grid-column: 1 / -1; }
.dc-run-summary { margin: 16px 0 10px; padding: 10px 12px; border-radius: 10px; background: #38bdf812; font-size: 13px; }
.dc-run-summary span + span { border-left: 1px solid #62809b55; padding-left: 8px; }
.dc-run-stop { margin: 10px 0; border: 1px solid #62809b44; border-left: 3px solid #d9ab47; border-radius: 12px; padding: 12px; }
.dc-run-stop.ready { border-left-color: #47bfa2; }
.dc-run-stop.blocked { border-left-color: #e88383; }
.dc-run-number { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #38bdf822; flex: 0 0 27px; }
.dc-run-identity { display: grid; gap: 5px; min-width: 0; flex: 1 1 180px; font-size: 12px; }
.dc-run-order { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 15px; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.dc-run-stop-actions { display: flex; gap: 5px; }
.dc-run-stop-actions button { min-width: 38px; min-height: 38px; }
.dc-run-state { color: #e1b963; }
.dc-run-state.ready { color: #65d4b8; }
.dc-run-state.blocked, .dc-run-warning { color: #ed9b8a; }
.dc-run-stop details { margin-top: 10px; }
.dc-run-stop summary, .dc-run-candidates > summary { font-size: 13px; cursor: pointer; padding: 5px 0; }
.dc-run-candidates { margin-top: 20px; }
.dc-run-planner .muted { font-size: 12px; line-height: 1.5; }
.dc-run-planner p:empty { display: none; }
.dc-run-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.light-mode .dc-run-planner { background: #fff; }
body.light-mode .dc-run-state.ready { color: #12694f; }
body.light-mode .dc-run-state, body.light-mode .dc-run-warning { color: #805500; }
body.light-mode .dc-run-state.blocked { color: #a33030; }
/* Keep date/time pairs readable before the desktop four-column row gets narrow. */
@media (max-width: 700px) {
  .dc-run-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dc-run-planner { padding: 11px; border-radius: 12px; }
  .dc-run-settings, .dc-run-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dc-run-stop { padding: 10px; }
  .dc-run-stop-top { align-items: flex-start; }
  .dc-run-stop-actions { margin-left: auto; }
}
@media (max-width: 380px) {
  .dc-run-settings { grid-template-columns: minmax(0, 1fr); }
}