/* PowerShare 2 - About your area tile styles
   Mobile-first. All colour comes from the design tokens in css/tokens.css -
   never raw hex here. Sub-sections render as cards in a responsive grid,
   matching the area-dashboard tile's visual language. */

/* ── Sub-section grid ────────────────────────────────────────────────────── */

.aya-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .aya-grid { grid-template-columns: 1fr 1fr; }
  .aya-card--wide { grid-column: 1 / -1; }
}

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

.aya-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.aya-card-icon { font-size: var(--text-lg); line-height: 1.3; }

.aya-card-title {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  color: var(--colour-brand-dark);
}

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

/* ── Headline badge (population) ─────────────────────────────────────────── */

.aya-badge {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
}

.aya-badge-big {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--colour-brand-dark);
}

.aya-badge-small { font-size: var(--text-sm); color: var(--colour-text-muted); }

/* ── Deprivation decile scale ─────────────────────────────────────────────── */

.aya-decile { margin-bottom: var(--space-2); }

.aya-decile-label {
  display: inline-block;
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.aya-tone--success { color: var(--colour-success); }
.aya-tone--warn    { color: var(--colour-warn); }
.aya-tone--danger  { color: var(--colour-danger); }
.aya-tone--info    { color: var(--colour-info); }
.aya-tone--neutral { color: var(--colour-text); }

.aya-decile-bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--colour-info-bg), var(--colour-border), var(--colour-success-bg));
  margin: var(--space-2) 0 var(--space-1);
}

.aya-decile-dot {
  position: absolute;
  top: 50%;
  /* --aya-decile-pos is set from data in JS - the sanctioned token exception. */
  left: var(--aya-decile-pos, 50%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--colour-surface);
  box-shadow: var(--shadow-sm);
  background: var(--colour-text-muted);
}

.aya-tone-bg--success { background: var(--colour-success); }
.aya-tone-bg--warn    { background: var(--colour-warn); }
.aya-tone-bg--danger  { background: var(--colour-danger); }
.aya-tone-bg--info    { background: var(--colour-info); }
.aya-tone-bg--neutral { background: var(--colour-text-muted); }

.aya-decile-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

/* ── Notes and fallbacks ──────────────────────────────────────────────────── */

.aya-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.aya-unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  font-style: italic;
}

/* ── Look-deeper links ─────────────────────────────────────────────────────── */

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

.aya-links a {
  color: var(--colour-link);
  font-size: var(--text-sm);
}

/* ── Tile footer bits ─────────────────────────────────────────────────────── */

.aya-fetched {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}