/* The planner uses the same rooftop and light workspace shell as Today. */
body[data-planner-view="planner"],
body[data-planner-view="planner"] .main,
body[data-planner-view="planner"] #plannerView { background: #e8eef8; }
body[data-planner-view="planner"] .sidebar,
body[data-planner-view="planner"] .topbar { display: none; }
body[data-planner-view="planner"] .main { max-width: none; min-height: 100vh; margin: 0; padding: 0; }
#plannerView { min-height: 100vh; margin: 0; padding: 0 0 56px; color: #243454; color-scheme: light; --rooftop-frame: #e8eef8; }
#plannerView .rooftop-banner { height: clamp(230px, 22vw, 315px); margin: 0; }
#plannerView .banner-copy { left: max(5vw, calc((100vw - 1300px) / 2)); }
#plannerView .banner-roof-link { right: max(5vw, calc((100vw - 1300px) / 2)); }

#plannerView .planner-heading { margin: 2px 0 17px; }
#plannerView .planner-heading .eyebrow { color: #7e8aa2; }
#plannerView .planner-heading h1 { margin: 6px 0 4px; color: #253456; font-size: clamp(23px,2.3vw,32px); font-weight: 660; letter-spacing: -.045em; }
#plannerView .planner-heading .muted { margin: 0; color: #7d8ca6; }
#plannerView .planner-heading .button.primary { border: 0; border-radius: 7px; background: #3b4dc7; color: #fff; }
#plannerView .planner-heading .button.primary:hover { background: #2d3eae; }
#plannerView .planner-surface { border: 1px solid #d6deec; border-radius: 9px; background: #fff; box-shadow: 0 5px 15px #6880ad12; }
#plannerView .planner-toolbar,
#plannerView .planner-filter { border-bottom-color: #e2e8f2; }
#plannerView .range-title { color: #26395b; }
#plannerView .icon-button { border-color: #d9e2ef; background: #f7f9fd; color: #4e6289; }
#plannerView .icon-button:hover { border-color: #5367d4; color: #3449bd; }
#plannerView .segmented { border-color: #dbe3ef; background: #eef2f9; }
#plannerView .segmented button { color: #647492; }
#plannerView .segmented button.selected { background: #fff; color: #3348bd; box-shadow: 0 1px 5px #293f831e; }
#plannerView .search-box { border-color: #dbe3ef; background: #f7f9fd; color: #6b7c98; }
#plannerView .search-box input { color: #283a5b; }
#plannerView .search-box input::placeholder { color: #91a0b7; }
#plannerView .filter-select,
#plannerView .range-summary { color: #71809b; }
#plannerView .filter-select select,
#plannerView .task-status-select { border-color: #dce4ef; background: #f7f9fd; color: #475c83; }
#plannerView .day-group { border-bottom-color: #e6ebf4; }
#plannerView .day-heading { color: #7d8ca5; }
#plannerView .day-heading strong,
#plannerView .task-title { color: #263858; }
#plannerView .day-heading.today strong { color: #364dc3; }
#plannerView .task-meta,
#plannerView .task-time { color: #7e8da5; }
#plannerView .task-row { border-bottom-color: #e6ebf4; }
#plannerView .task-row:hover { background: #f7f9fd; }
#plannerView .task-check { border-color: #91a0b5; }
#plannerView .task-tool { color: #667b9c; }
#plannerView .task-tool:hover { background: #eaf0fb; color: #3449bf; }
#plannerView .muted,
#plannerView .empty-state { color: #7d8ca6; }
#plannerView .empty-state strong { color: #293a5a; }
#plannerView .empty-state .button.secondary { border-color: #dce4ef; background: #f7f9fd; color: #4055bb; }

#plannerView .board-column { border-color: #dce4ef; background: #f5f8fd; }
#plannerView .board-head { color: #26395b; }
#plannerView .board-head span,
#plannerView .board-card small { color: #7d8ca5; }
#plannerView .board-card { border-color: #dce4ef; background: #fff; color: #2a3b5b; }
#plannerView .board-column.drag-over { border-color: #5367d4; }
#plannerView .calendar-day { border-right-color: #e5ebf4; }
#plannerView .calendar-day-head { border-bottom-color: #e5ebf4; color: #7d8ca5; }
#plannerView .calendar-day-head b { color: #26395b; }
#plannerView .calendar-day.today .calendar-day-head b { color: #344bc0; }
#plannerView .calendar-item { border-left-color: #4359c5; background: #eaf0fd; color: #34476b; }
#plannerView .calendar-item.done { border-left-color: #38a38d; color: #7a8b9d; }
#plannerView .calendar-add { border-color: #cbd6e8; color: #607296; }

@media (max-width: 780px) {
  #plannerView .planner-heading { align-items: flex-start; }
  #plannerView .planner-heading .button { flex: none; }
}
@media (max-width: 540px) {
  #plannerView .rooftop-banner { height: 230px; }
  #plannerView .planner-heading { gap: 8px; }
  #plannerView .planner-heading h1 { font-size: 22px; }
  #plannerView .planner-heading .muted { max-width: 210px; font-size: 10px; }
  #plannerView .planner-heading .button { padding: 0 8px; font-size: 10px; }
  #plannerView .planner-filter { flex-wrap: wrap; }
}