.planning-band {
  grid-column: 1 / -1;
  border-block: 1px solid rgba(7, 20, 13, .18);
  background: #f4f8f1;
  padding: 18px;
  margin: 4px 0;
}

.planning-band__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.planning-band__head h3 {
  margin: 0 0 4px;
  color: var(--forest-2, #074d2a);
  font-size: 20px;
  letter-spacing: 0;
}

.planning-band__head p {
  margin: 0;
  color: var(--muted, #5c6f61);
  font-size: 14px;
  line-height: 1.45;
}

.planning-badge {
  flex: 0 0 auto;
  border: 1px solid #bfd2b8;
  background: #fff;
  color: #074d2a;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.utility-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-left: 5px solid #79c84b;
  background: #fff;
  padding: 14px;
  margin-top: 12px;
}

.utility-result[data-state="idle"] { border-left-color: #8b968d; }
.utility-result[data-state="review"] { border-left-color: #d28a00; }
.utility-result strong { display: block; color: #07140d; margin-bottom: 4px; }
.utility-result p { margin: 0; color: #405342; font-size: 13px; line-height: 1.45; }
.utility-result a { white-space: nowrap; }

.utility-programs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.utility-program {
  border: 1px solid #d5e0d1;
  background: #fff;
  padding: 12px;
}

.utility-program[hidden] { display: none; }
.utility-program strong { display: block; color: #074d2a; }
.utility-program span { display: block; color: #5c6f61; font-size: 13px; line-height: 1.4; margin-top: 4px; }
.utility-program a { display: inline-block; margin-top: 8px; color: #074d2a; font-weight: 850; }

.future-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.future-choice-set {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.future-choice-set legend {
  font-weight: 900;
  color: #17281c;
  margin-bottom: 8px;
}

.future-checks {
  display: grid;
  gap: 7px;
}

.future-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid #d5e0d1;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  color: #263329;
  font-weight: 750;
  font-size: 14px;
}

.future-check input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  accent-color: #0b6f3a;
}

.future-summary {
  grid-column: 1 / -1;
  border-left: 5px solid #0b6f3a;
  background: #fff;
  padding: 12px 14px;
  color: #405342;
  font-size: 13px;
  line-height: 1.45;
}

.photo-coach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid #b8cbb2;
  background: #fff;
  color: #074d2a;
  padding: 0 10px;
  margin: 2px 0 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.photo-coach-button:hover,
.photo-coach-button:focus-visible {
  border-color: #0b6f3a;
  outline: 3px solid rgba(121, 200, 75, .24);
}

.photo-quality {
  display: none;
  border-left: 4px solid #79c84b;
  background: #eff8eb;
  color: #22452e;
  padding: 8px 9px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.photo-quality.show { display: block; }
.photo-quality.warn { border-left-color: #d28a00; background: #fff7df; color: #6c4900; }
.photo-quality.good { border-left-color: #0b6f3a; }

.route-sketch-tool {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-top: 1px solid #d5e0d1;
  margin-top: 14px;
  padding-top: 14px;
}

.route-sketch-tool strong { display: block; color: #074d2a; }
.route-sketch-tool span { display: block; color: #5c6f61; font-size: 13px; margin-top: 3px; }
.route-sketch-tool .btn { min-width: 150px; }
.route-sketch-status { font-weight: 850; }
.route-sketch-status.saved { color: #0b6f3a; }

.planner-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 12, 7, .82);
}

.planner-modal.open { display: flex; }
.planner-modal__dialog {
  width: min(900px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  background: #fff;
  color: #07140d;
  border-top: 6px solid #79c84b;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
}

.planner-modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #dfe8dc;
}

.planner-modal__head h2 { margin: 0; font-size: 24px; letter-spacing: 0; }
.planner-modal__head p { margin: 4px 0 0; color: #5c6f61; font-size: 13px; }
.planner-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #bfd0ba;
  background: #f5f8f3;
  color: #07140d;
  font-size: 24px;
  cursor: pointer;
}

.planner-modal__body { padding: 16px; }
.coach-stage {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #07140d;
  color: #fff;
}

.coach-stage img { width: 100%; max-height: 520px; object-fit: contain; display: none; }
.coach-stage.has-image img { display: block; }
.coach-placeholder { max-width: 540px; padding: 32px; text-align: center; color: rgba(255,255,255,.82); }
.coach-stage.has-image .coach-placeholder { display: none; }
.coach-frame {
  position: absolute;
  inset: 12% 10%;
  border: 3px solid #a7df63;
  pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0,0,0,.16);
}

.coach-frame::before,
.coach-frame::after {
  content: "";
  position: absolute;
  background: rgba(167, 223, 99, .7);
}
.coach-frame::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.coach-frame::after { top: 50%; left: 0; right: 0; height: 1px; }
.coach-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.coach-copy div { border: 1px solid #dfe8dc; padding: 11px; }
.coach-copy strong { display: block; color: #074d2a; margin-bottom: 4px; }
.coach-copy span { color: #5c6f61; font-size: 13px; line-height: 1.4; }

.sketch-stage { background: #07140d; padding: 10px; overflow: auto; touch-action: none; }
#routeSketchCanvas { display: block; max-width: 100%; height: auto; margin: auto; background: #18251d; cursor: crosshair; touch-action: none; }
.sketch-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sketch-toolbar button { min-height: 42px; border: 1px solid #b8cbb2; background: #f5f8f3; color: #074d2a; padding: 0 13px; font-weight: 900; cursor: pointer; }
.sketch-toolbar .save-sketch { margin-left: auto; background: #0b6f3a; color: #fff; border-color: #0b6f3a; }
.sketch-help { margin: 10px 0 0; color: #5c6f61; font-size: 13px; line-height: 1.4; }

body.planner-modal-open { overflow: hidden; }

@media (max-width: 700px) {
  .planning-band { padding: 14px; }
  .planning-band__head { display: block; }
  .planning-badge { display: inline-block; margin-top: 10px; }
  .utility-result,
  .route-sketch-tool { grid-template-columns: 1fr; }
  .utility-result a,
  .route-sketch-tool .btn { width: 100%; }
  .utility-programs,
  .future-grid,
  .coach-copy { grid-template-columns: 1fr; }
  .planner-modal { padding: 7px; }
  .planner-modal__dialog { max-height: calc(100dvh - 14px); }
  .coach-stage { min-height: 280px; }
  .sketch-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .sketch-toolbar .save-sketch { margin-left: 0; grid-column: 1 / -1; }
}