.planner-resize { display: none; }
.planner-head { flex-wrap: wrap; }
.planner-head .title { flex: 1 1 auto; }
.planner-tools { display: flex; gap: 8px; align-items: center; }
.planner-tools .btn-ghost { border-width: 2px; }
.planner-body { padding: 12px; display: flex; flex-direction: column; gap: 16px; }

.plan-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan-day { background: var(--navy); border-top: 6px solid var(--day); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.plan-day-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--yellow); }
.plan-day-moves { display: flex; }
.plan-day .icon-btn:disabled { opacity: 0.35; cursor: default; }
.plan-day-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.day-title-field { flex: 1 1 150px; font-weight: 800; }
.day-date-field { flex: 1 1 150px; }
.route-toggle { align-self: flex-start; }
.day-swatch { background: var(--day); }

.stops { list-style: none; margin: 0; padding: 4px; min-height: 56px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); }
.stops.over, .stop.over, .unassigned.over { outline: 3px dashed var(--yellow); outline-offset: -3px; }
.stop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 4px 4px 8px; background: var(--navy); cursor: grab; }
.stop-name {
  flex: 1 1 120px; min-width: 0; min-height: 44px;
  padding: 0; border: 0;
  background: none; color: var(--cream);
  font-family: var(--font-display); font-size: 15px; font-weight: 800;
  text-align: left; overflow-wrap: anywhere;
  cursor: pointer;
}
.stop-leg { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--on-navy-3); }
.stop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
.stops-empty { margin: 0; font-size: 13px; color: var(--on-navy-3); }
.plan-day-foot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.day-total { margin: 0; font-size: 24px; font-weight: 900; font-stretch: 70%; }
.day-total .mono-label { color: var(--on-navy-3); }
.day-link { border-width: 2px; font-size: 15px; font-stretch: 100%; text-transform: none; }

.day-picker summary { list-style: none; border-width: 2px; font-size: 14px; font-stretch: 100%; text-transform: none; padding: 0 10px; }
.day-picker summary::-webkit-details-marker { display: none; }
.day-picker[open] { flex: 1 1 100%; }
.day-picker-list {
  list-style: none;
  margin: 4px 0 0; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--cream);
  border: 3px solid var(--navy);
  box-shadow: 4px 4px 0 var(--red);
}
.day-option { width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--navy); font-family: var(--font-display); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.day-option:hover { background: var(--yellow); }
.day-picker-list :focus-visible { outline-color: var(--red); }

.unassigned { background: var(--navy); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.unassigned-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.unassigned .subtitle { margin: 0; }
.unassigned-head .mono-label { color: var(--on-navy-3); }
.free { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.free:empty { display: none; }
.free-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 4px 4px 8px; background: var(--panel); border: 2px solid var(--border-on-navy); cursor: grab; }
.free-name { font-weight: 800; }

@media (min-width: 721px) {
  .board.planning .planner {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    height: var(--planner-height, 48vh);
    border-width: 3px 0 0;
    box-shadow: 0 -6px 0 var(--red);
  }
  .planner-resize { display: block; flex: none; height: 14px; margin-top: -3px; cursor: ns-resize; touch-action: none; user-select: none; background: var(--navy); border-bottom: 3px solid var(--cream); }
  .planner-resize::after { content: ""; display: block; width: 48px; height: 4px; margin: 3px auto 0; background: var(--cream); }
  .planner-resize:hover, .planner-resize.dragging { background: var(--yellow); }
  .planner-resize:hover::after, .planner-resize.dragging::after { background: var(--navy); }
  .planner-body { overflow-y: auto; min-height: 0; }
  .plan-days { flex: none; flex-direction: row; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
  .unassigned { flex: none; }
  .plan-day { flex: 0 0 340px; }
  .page:has(.board.planning) { padding-bottom: calc(var(--planner-height, 48vh) + 2vh); }
}

@media print {
  @page { margin: 14mm; }
  body { background: var(--white); color: var(--ink); }
  .page, .page:has(.board.planning) { padding: 0 !important; }
  .planner-resize, .top, .banner, .map-card, .sheet-tabs, .side > :not(.planner), .planner-head, .plan-day-moves, .route-toggle,
  .stop-tools, .stops-empty, .unassigned, .day-link, .plan-day-foot .muted, .toasts, .dialog { display: none !important; }
  .board, .side { display: block !important; border: 0 !important; padding: 0 !important; background: none !important; }
  .planner, .board.planning .planner {
    display: block !important; position: static !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
    background: none; border: 0; box-shadow: none; margin: 0 !important;
  }
  .planner-body { padding: 0; overflow: visible; }
  .plan-days { display: block; }
  .plan-day { break-after: page; background: none; color: var(--ink); padding: 0; border-top-width: 10px; }
  .plan-day:last-child { break-after: auto; }
  .day-label, .stop-name, .stop-leg, .day-total .mono-label { color: var(--ink); }
  .plan-day .field { border: 0; padding: 0; min-height: 0; background: none; color: var(--ink); font-size: 24px; }
  .stops { background: none; padding: 0; }
  .stop { background: none; border-bottom: 1px solid var(--ink-4); break-inside: avoid; }
}