/* PowerShare 2 - planning feature (Planning view + "Planning near you" tile)
   Covers js/features/planning.js (view), js/features/planning-tile.js (tile)
   and the markup shared via js/features/planning-data.js.
   All colours/spacing come from css/tokens.css custom properties - no raw hex. */

/* ── Shared section chrome (used by both the view and the tile) ─────────── */

.planning-section-group + .planning-section-group {
  margin-top: var(--space-6);
}

.planning-group-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.planning-group-section-label {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--colour-brand-dark);
}

.planning-group-section-desc {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.planning-group {
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.planning-group + .planning-group {
  margin-top: var(--space-3);
}

.planning-group--compact {
  padding: var(--space-3);
}

.planning-group-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.planning-group-icon {
  font-size: var(--text-xl);
  line-height: 1;
  flex-shrink: 0;
}

.planning-group-meta { flex: 1; min-width: 0; }

.planning-group-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-md);
  color: var(--colour-text);
  margin: 0;
}

.planning-group-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--colour-brand-dark);
  background: var(--colour-brand-pale);
  border-radius: var(--radius-pill);
  padding: 0.05rem var(--space-2);
}

.planning-group-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: var(--leading-body);
}

/* ── Designation / policy item lists ──────────────────────────────────────── */

.planning-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.planning-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
}

.planning-item-date {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  white-space: nowrap;
}

.planning-item-doc {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--colour-link);
  white-space: nowrap;
}

.planning-none-note,
.planning-more-empty {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  margin: var(--space-3) 0 0;
}

/* ── Planning policy cards (Local Plan / Neighbourhood Plan) ─────────────── */

.planning-policy-card + .planning-policy-card {
  margin-top: var(--space-3);
}

.planning-doc-btn {
  display: inline-block;
  margin-top: var(--space-3);
}

.planning-review-notice {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--colour-warn-bg);
  color: var(--colour-warn);
  font-size: var(--text-sm);
}

.planning-stage-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 0.05rem var(--space-2);
}

.planning-stage-adopted { color: var(--colour-success); background: var(--colour-success-bg); }
.planning-stage-review  { color: var(--colour-warn);    background: var(--colour-warn-bg); }

.planning-stage-explainer {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--colour-text);
}

.planning-stage-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.planning-stage-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.planning-stage-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.planning-stage-dot--consult { background: var(--colour-warn); }
.planning-stage-dot--exam    { background: var(--colour-info); }
.planning-stage-dot--adopted { background: var(--colour-success); }

.planning-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ── Footer links (view + tile) ──────────────────────────────────────────── */

.planning-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── "More designations" collapsible section ─────────────────────────────── */

.planning-more-details {
  margin-top: var(--space-5);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.planning-more-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  background: var(--colour-surface-alt);
  font-weight: 600;
  color: var(--colour-brand-dark);
  list-style: none;
}

.planning-more-summary::-webkit-details-marker { display: none; }

.planning-more-label { flex: 1; }

.planning-more-count {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.planning-more-chevron {
  transition: transform 0.15s ease;
}

.planning-more-details[open] .planning-more-chevron {
  transform: rotate(180deg);
}

.planning-more-body {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.planning-more-nil {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  padding: var(--space-2) var(--space-3);
}

.planning-more-nil-label { flex: 1; }

.planning-more-nil-status {
  font-size: var(--text-xs);
}

/* ── National map panel (Planning view) ──────────────────────────────────── */

.planning-map-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--colour-brand-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.planning-map-panel-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.planning-map-panel-icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.planning-map-panel-title {
  margin: 0;
  font-size: var(--text-md);
  color: var(--colour-brand-dark);
}

.planning-map-panel-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-brand-dark);
}

.planning-map-open-btn {
  white-space: nowrap;
}

/* ── Council ArcGIS map links (Planning view) ────────────────────────────── */

.planning-maps-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.planning-maps-card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  color: var(--colour-brand-dark);
}

.planning-council-map-hit,
.planning-council-map-miss {
  font-size: var(--text-sm);
  margin: 0;
}

.planning-council-map-miss {
  color: var(--colour-text-muted);
}

.planning-maps-details {
  margin-top: var(--space-3);
}

.planning-maps-details summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-link);
}

.planning-maps-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.planning-maps-table th,
.planning-maps-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.planning-maps-table tbody tr:last-child th,
.planning-maps-table tbody tr:last-child td {
  border-bottom: none;
}

.planning-map-row--match {
  background: var(--colour-surface-alt);
}

.planning-map-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--colour-brand-dark);
  background: var(--colour-brand-pale);
  border-radius: var(--radius-pill);
  padding: 0.05rem var(--space-2);
  margin-left: var(--space-1);
}

.planning-view-body {
  margin-top: var(--space-5);
}

/* ── Summary tile ("Planning near you") ──────────────────────────────────── */

.planning-tile-intro {
  font-size: var(--text-sm);
  color: var(--colour-text);
  margin: 0 0 var(--space-3);
}

.planning-tile-radius {
  color: var(--colour-text-muted);
}

.planning-tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.planning-tile-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.planning-tile-row-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.planning-tile-row-label { flex: 1; }

.planning-tile-row-count {
  font-weight: 700;
  color: var(--colour-brand-dark);
  background: var(--colour-brand-pale);
  border-radius: var(--radius-pill);
  padding: 0.05rem var(--space-2);
  font-size: var(--text-xs);
}

.planning-tile-actions {
  margin: var(--space-4) 0 0;
}