.planning-type-cards {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.planning-type-cards button {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  text-align: left;
}
.planning-type-cards button:hover,
.planning-type-cards button:focus-visible {
  border-color: var(--ink);
  box-shadow: inset 3px 0 var(--yellow);
}
.planning-type-cards img {
  width: 132px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.planning-type-cards span { padding: 12px; }
.planning-type-cards b,
.planning-type-cards small { display: block; }
.planning-type-cards b { font-size:var(--font-xs); letter-spacing: .04em; }
.planning-type-cards small { margin-top: 4px; color: var(--muted); font-size:var(--font-xs); }
.empty-surfaces > span { display: block; margin-top: 5px; color: var(--muted); font-size:var(--font-xs); }
.fence-result-plan { width: 100%; max-height: 470px; border: 1px solid var(--line); background: #f7f9f8; }
.fence-result-plan .fence-paths { fill: none; stroke: #252a27; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.fence-result-plan .fence-nodes circle { fill: #fff; stroke: #252a27; stroke-width: 2; }
.fence-result-plan .fence-nodes text { fill: #68726d; font-size:var(--font-sm); font-weight: 800; }
.fence-result-plan .fence-nodes rect { fill: #fff; stroke: #252a27; stroke-width: 2; }
.fence-result-plan .fence-nodes polygon.corner { fill: var(--yellow); stroke: #252a27; stroke-width: 2; }
.fence-result-plan .fence-gate line,.fence-result-plan .fence-gate path { fill: none; stroke: #176f45; stroke-width: 4; }
.fence-result-plan .fence-gate text { fill: #176f45; font-size:var(--font-sm); font-weight: 850; }
.fence-result-plan .field-id { fill: #4d5752; stroke: none; font-size:var(--font-sm); font-weight: 850; text-anchor: middle; }
.fence-result-plan .fence-plan-legend text { fill: #68726d; stroke: none; font-size:var(--font-sm); font-weight: 800; }
@media (max-width: 1200px) {
  .planning-type-cards button { grid-template-columns: 1fr; }
  .planning-type-cards img { width: 100%; }
  .planning-type-cards span { padding: 9px 10px; }
}
@media (max-width: 700px) {
  .planning-type-cards { grid-template-columns: 1fr; }
  .planning-type-cards button { grid-template-columns: 145px 1fr; }
  .planning-type-cards img { width: 145px; }
}

.fence-placement-advanced { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fence-placement-advanced > summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 800; }
.fence-placement-advanced > p { margin: 8px 0 10px; color: var(--muted); font-size: 11px; }