/* Area report. Builds on the site's seo.css (.card, .fact-grid, .data-table,
   .btn) and its --o-* tokens, so light and dark mode come for free. */
.area-search { display: flex; gap: var(--o-s2); flex-wrap: wrap; margin: var(--o-s4) 0; }
.area-search input {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 1.1rem;
  padding: 12px 14px; border: 1px solid var(--o-rule); border-radius: var(--o-r2);
  background: var(--o-surface); color: var(--o-ink); text-transform: uppercase;
}
.area-search input::placeholder { text-transform: none; color: var(--o-muted); }
.area-search button { flex: 0 0 auto; }
.area-error { color: var(--o-brick); font-weight: 600; margin: var(--o-s2) 0; }
.area-list { padding-left: 1.2em; }
.area-list li { margin: 4px 0; }

.area-head .area-sub { color: var(--o-muted); margin-top: -4px; }
.area-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--o-t-sm); margin: var(--o-s3) 0 var(--o-s4); }
.area-section h2 { margin-top: 0; }
.area-section[data-status="unavailable"], .area-section[data-status="empty"] { background: var(--o-sunken); }
.area-note { color: var(--o-muted); font-size: var(--o-t-sm); margin: var(--o-s2) 0 0; }
.area-section[data-status="unavailable"] .area-note { color: var(--o-ink-soft); }
.area-caveat { color: var(--o-muted); font-size: var(--o-t-xs); margin-top: var(--o-s3); }
.area-subhead { font-size: 1rem; margin: var(--o-s4) 0 var(--o-s2); }

/* Horizontal bars: <ul class="area-bars"><li><span class="area-bar-label">A</span>
   <span class="area-bar-track"><span class="area-bar-fill" style="--w:34%"></span></span>
   <span class="area-bar-value">12</span></li></ul> */
.area-bars { list-style: none; padding: 0; margin: var(--o-s2) 0; }
.area-bars li {
  display: grid; grid-template-columns: minmax(4.5em, 38%) 1fr auto; gap: 8px;
  align-items: center; margin: 5px 0; font-size: var(--o-t-sm);
}
.area-bar-label { overflow-wrap: anywhere; }
.area-bar-track { height: 10px; background: var(--o-sunken); border-radius: 5px; overflow: hidden; }
.area-bar-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--o-signal); border-radius: 5px; }
.area-bar-value { font-family: var(--o-mono); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

.area-sources { font-size: var(--o-t-xs); color: var(--o-muted); }
.area-sources h2 { font-size: 1rem; }
.area-sources li { margin: 6px 0; }
.area-disclaimer { font-weight: 600; color: var(--o-ink-soft); }

@media (max-width: 520px) {
  .area-bars li { grid-template-columns: minmax(4em, 42%) 1fr auto; }
  .area-section { padding: var(--o-s4); }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A worded figure (a council name) at the numeric size shouts; see seo.css .is-worded. */
.fact .value.value-text { font-family: inherit; font-size: var(--o-t-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }

/* Small figure tables (sales by year, rating mix). The site's .schools-table
   turns rows into cards below 900px, which suits a list of schools but
   loses the columns of a three-column figure table, so these stay tables. */
.area-table { width: 100%; border-collapse: collapse; font-size: var(--o-t-sm); margin: var(--o-s2) 0; }
.area-table th, .area-table td { padding: 7px 6px; border-bottom: 1px solid var(--o-rule-soft); text-align: left; }
.area-table thead th { font-size: var(--o-t-xs); font-weight: 600; color: var(--o-muted); border-bottom-color: var(--o-rule); }
.area-table tbody th { font-weight: 500; white-space: nowrap; }
.area-table .num { text-align: right; font-family: var(--o-mono); font-variant-numeric: tabular-nums; }
.area-table tbody tr:last-child th, .area-table tbody tr:last-child td { border-bottom: 0; }

/* /area/licences */
.area-licences { padding-left: 1.2em; }
.area-licences li { margin-bottom: var(--o-s3); overflow-wrap: anywhere; }
.area-notice { font-size: var(--o-t-sm); }
.area-notice p, .area-notice li { overflow-wrap: anywhere; }