/* PowerShare 2 - planning-apps tile
   Cards for nearby planning applications (PlanIt.org.uk).
   All colours come from css/tokens.css custom properties - no raw hex. */

.planapp-count {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  margin: 0 0 var(--space-3);
}

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

/* Collapsed state: only the first 6 cards show (keep in step with
   INITIAL_VISIBLE in js/features/planning-apps.js). */
.planapp-list--collapsed > li:nth-child(n + 7) {
  display: none;
}

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

.planapp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.planapp-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.planapp-type {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--colour-brand-dark);
  background: var(--colour-brand-pale);
  border-radius: var(--radius-pill);
  padding: 0.125rem var(--space-2);
}

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

.planapp-status--permitted { color: var(--colour-success); background: var(--colour-success-bg); }
.planapp-status--refused   { color: var(--colour-danger);  background: var(--colour-danger-bg); }
.planapp-status--pending   { color: var(--colour-warn);    background: var(--colour-warn-bg); }
.planapp-status--decided   { color: var(--colour-info);    background: var(--colour-info-bg); }
.planapp-status--appealed  { color: var(--colour-info);    background: var(--colour-info-bg); }
.planapp-status--withdrawn { color: var(--colour-text-muted); background: var(--colour-bg); }

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

.planapp-address {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-text);
}

.planapp-applicant {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.planapp-desc {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text);
  line-height: var(--leading-body);
}

.planapp-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.planapp-ref {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  word-break: break-all;
}

.planapp-view {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-link);
}

.planapp-more {
  margin-top: var(--space-3);
}

.planapp-cta {
  margin: var(--space-4) 0 0;
}

.planapp-fallback {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.planapp-fallback a {
  color: var(--colour-link);
}