.monitor-intro {
  max-width: 42rem;
}

.monitor-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.monitor-list .card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
}

.monitor-list .card p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

body.monitor-map {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lsoa-app {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

.lsoa-panel {
  grid-column: 1;
  grid-row: 1 / span 2;
  overflow: auto;
  background: var(--surface-raised);
  border-right: 1px solid var(--line);
  padding: 1rem 1rem 1.5rem;
}

.lsoa-panel h1 {
  font-size: 1.65rem;
  margin: 0 0 0.35rem;
}

.lsoa-lead,
.lsoa-credit,
.lsoa-status {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 0.9rem;
}

.lsoa-panel label,
.lsoa-panel legend {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}

.lsoa-panel fieldset {
  border: 0;
  margin: 0 0 0.9rem;
  padding: 0;
}

.lsoa-choice {
  display: flex;
  gap: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

.lsoa-choice label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}

.lsoa-panel input,
.lsoa-panel select {
  width: 100%;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.lsoa-results {
  list-style: none;
  margin: -0.5rem 0 0.85rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  max-height: 16rem;
  overflow: auto;
}

.lsoa-results button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  color: var(--ink);
}

.lsoa-results li:last-child button {
  border-bottom: 0;
}

.lsoa-results button:hover,
.lsoa-results button:focus {
  background: var(--accent-soft);
}

.lsoa-results small {
  display: block;
  color: var(--ink-muted);
}

.lsoa-detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-bottom: 0.9rem;
}

.lsoa-detail h2 {
  font-size: 1.2rem;
  margin: 0 0 0.2rem;
}

.lsoa-detail p {
  margin: 0 0 0.35rem;
}

.lsoa-legend {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 0.9rem;
}

.lsoa-legend button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  color: var(--ink);
}

.lsoa-legend button:hover,
.lsoa-legend button[aria-current="true"] {
  background: var(--accent-soft);
}

.lsoa-legend-scale {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.3rem;
}

.lsoa-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(15, 26, 36, 0.25);
}

.lsoa-map {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  position: relative;
}

.lsoa-dock {
  grid-column: 2;
  grid-row: 2;
  background: var(--surface-raised);
  border-top: 1px solid var(--line);
  padding: 0.35rem 0.9rem;
}

.lsoa-dock:has(#lsoa-split:not([hidden])) {
  padding: 0.7rem 0.9rem 0.85rem;
  max-height: 46vh;
  overflow: auto;
  min-width: 0;
  container-type: inline-size;
}

/* The wide rankings table scrolls with the dock. Keep the subject buttons
   and the place title in the visible width while that happens. They still
   scroll away vertically, so a table heading can take the top. The split
   has to be as wide as the table, or the title has no room to stay put. */
.lsoa-dock:has(#lsoa-split:not([hidden])) #lsoa-overlay,
.lsoa-dock:has(#lsoa-split:not([hidden])) .lsoa-split-head {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 100cqi;
  max-width: 100cqi;
  box-sizing: border-box;
  background: var(--surface-raised);
}

.lsoa-dock:has(#lsoa-split:not([hidden])) #lsoa-split {
  width: max-content;
  min-width: 100%;
}

/* On a wide pane the figures stay in view while the rankings table scrolls
   sideways. A fixed layout keeps those columns inside the pane. On a narrow
   pane the figures keep their own width and scroll with the rankings, so the
   labels are not crushed into one another. */
@media (min-width: 901px) {
  #lsoa-split-stats > .lsoa-dash-block {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 100cqi;
    max-width: 100cqi;
    box-sizing: border-box;
    background: var(--surface-raised);
  }

  #lsoa-split-stats > .lsoa-dash-block .lsoa-dash {
    table-layout: fixed;
    width: 100%;
  }
}

.lsoa-dock .eyebrow {
  margin-bottom: 0.35rem;
}

.lsoa-overlay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.85rem;
}

.lsoa-overlay-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lsoa-overlay-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.lsoa-overlay-menu button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}

.lsoa-overlay-menu button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.lsoa-overlay-menu button:disabled {
  cursor: not-allowed;
  color: var(--ink-muted);
}

.lsoa-overlay-menu button span {
  font-weight: 500;
}

.lsoa-dock-note,
.lsoa-chart-key {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0.45rem 0 0;
}

#lsoa-overlay .lsoa-dock-note {
  flex: 1 1 14rem;
  margin: 0;
}

#lsoa-overlay[hidden],
#lsoa-split[hidden],
#lsoa-collision-outcome[hidden],
.lsoa-chart-block[hidden] {
  display: none;
}

#lsoa-split:not(:has(.lsoa-chart-block:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

#lsoa-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(11rem, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}

.lsoa-split-main {
  min-width: 0;
}

.lsoa-rank-dock {
  max-width: 100%;
  margin: 0 0 0.85rem;
}

.lsoa-rank-dock .lsoa-dash {
  min-width: 40rem;
  margin-top: 0;
}

.lsoa-rank-dock caption {
  caption-side: top;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0.15rem 0 0.3rem;
}

.lsoa-rank-dock .lsoa-dash thead th:first-child {
  text-align: left;
}

.lsoa-rank-dock .lsoa-dash tbody th {
  width: 11.5rem;
}

.lsoa-rank-dock .lsoa-dash td {
  white-space: nowrap;
}

.lsoa-split-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  align-items: flex-start;
}

.lsoa-split-head h2 {
  font-size: 1.25rem;
  margin: 0 0 0.15rem;
}

.lsoa-split-head p {
  margin: 0;
  color: var(--ink-soft);
}

.lsoa-split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex-shrink: 0;
}

.lsoa-split-actions .button {
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
}

.lsoa-cpz {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
}

.lsoa-dash-when {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.lsoa-pop {
  margin: 0.45rem 0 0.35rem;
}

.lsoa-pop h3 {
  margin: 0.9rem 0 0.15rem;
  font-size: 1rem;
}

.lsoa-pop caption {
  caption-side: top;
  text-align: left;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.35rem 0 0.15rem;
}

.lsoa-pop .lsoa-dash th:not(:first-child),
.lsoa-pop .lsoa-dash td {
  text-align: right;
  padding-right: 0.7rem;
}

.lsoa-pop .lsoa-dash tbody th {
  text-align: left;
  width: auto;
}

.lsoa-dash {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25rem 0 0.35rem;
  font-size: 0.92rem;
}

.lsoa-dash th,
.lsoa-dash td {
  vertical-align: top;
  text-align: left;
  padding: 0.4rem 0.55rem 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.lsoa-dash thead th {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 700;
  padding-top: 0.15rem;
}

/* Preview pane: each table's column headings stay at the top of the dock
   while that table's rows are still in view, then leave with the table so
   the next table's headings can take the same place. Sticky cells need
   separate borders, and the rank table must not be its own scroll box. */
#lsoa-split .lsoa-dash {
  border-collapse: separate;
  border-spacing: 0;
}

#lsoa-split .lsoa-dash thead th {
  position: sticky;
  /* The dock's padding stays on screen. Pull the heading up through that
     padding so a row cannot show in the gap above the stuck labels. */
  top: -0.7rem;
  z-index: 2;
  padding-top: 0.85rem;
  background: var(--surface-raised);
}

.lsoa-dash tbody th {
  width: 9rem;
  padding-right: 0.7rem;
  font-weight: 700;
}

.lsoa-dash-kicker,
.lsoa-dash-name,
.lsoa-dash-rate,
.lsoa-dash-count,
.lsoa-dash-meta {
  display: block;
}

.lsoa-dash-kicker {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.lsoa-dash-name,
.lsoa-dash-meta {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 500;
}

.lsoa-dash-rate {
  font-weight: 700;
}

.lsoa-dash-count {
  margin-top: 0.1rem;
}

.lsoa-dash tr.lsoa-dash-has-trend th,
.lsoa-dash tr.lsoa-dash-has-trend td {
  border-bottom: none;
  padding-bottom: 0.05rem;
}

.lsoa-dash-trend th,
.lsoa-dash-trend td {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.lsoa-dash-trend .lsoa-dash-kicker {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.lsoa-spark {
  display: block;
  width: 100%;
  max-width: 8.5rem;
  height: 1.7rem;
}

.lsoa-spark.lsoa-spark-narrow {
  width: 2.75rem;
  max-width: 2.75rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.lsoa-trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lsoa-trend-figures {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.lsoa-spark-empty {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 500;
}

.profile-cpz {
  margin: 0 0 1.5rem;
}

.profile-cpz h2 {
  margin-bottom: 0.4rem;
}

#lsoa-split .lsoa-stats {
  grid-template-columns: 7.6rem minmax(0, 1fr);
  gap: 0.28rem 0.55rem;
  margin: 0.55rem 0 0.2rem;
  font-size: 0.95rem;
}

#lsoa-split .lsoa-stats dd {
  margin: 0;
}

.lsoa-stats {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 0.45rem 0.85rem;
  margin: 0.85rem 0 0.35rem;
}

.lsoa-stats dt {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 600;
}

.lsoa-stats dd {
  margin: 0;
}

.lsoa-stats-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.35rem 0 0.7rem;
}

.lsoa-split-charts {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.lsoa-chart-title {
  margin: 0 0 0.15rem;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
}

.lsoa-chart {
  width: min(100%, 26rem);
  justify-self: end;
}

.lsoa-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.lsoa-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.lsoa-chart-key span,
.lsoa-chart-key button.lsoa-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lsoa-chart-key button.lsoa-key-item {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0.05rem 0.1rem;
  cursor: pointer;
}

.lsoa-chart-key button.lsoa-key-item[aria-pressed="false"] {
  opacity: 0.45;
}

.lsoa-chart-key button.lsoa-key-item[aria-pressed="false"] span:last-child {
  text-decoration: line-through;
}

.lsoa-chart-empty {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.profile-chart {
  margin: 0 0 1.5rem;
}

.profile-chart h2 {
  margin-bottom: 0.4rem;
}

#lsoa-map,
#lsoa-map * {
  touch-action: none;
}

#lsoa-map {
  position: absolute;
  inset: 0;
}

.lsoa-sources {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.lsoa-sources p {
  margin: 0 0 0.75rem;
}

.lsoa-sources a {
  word-break: break-word;
}

.profile-hierarchy {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.55rem 1rem;
  margin: 0 0 1.5rem;
}

.profile-hierarchy dt {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 600;
}

.profile-hierarchy dd {
  margin: 0;
}

.profile-note,
.profile-siblings {
  margin-bottom: 1.5rem;
}

.profile-siblings ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.profile-ranks {
  --ranks-width: min(1120px, calc(100vw - 2.5rem));
  width: var(--ranks-width);
  margin-left: calc(50% - var(--ranks-width) / 2);
  margin-bottom: 1.5rem;
}

.profile-ranks h3 {
  margin: 1.4rem 0 0.25rem;
  font-size: 1.15rem;
}

.profile-ranks-notes {
  margin: 0.4rem 0 0.2rem;
  padding-left: 1.2rem;
}

.profile-ranks-notes li {
  margin: 0.2rem 0;
}

.profile-ranks-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  margin: 0.35rem 0;
  font-size: 0.92rem;
}

.profile-ranks-tools select,
.profile-ranks-tools input {
  font: inherit;
  margin-left: 0.35rem;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
}

.profile-ranks-scroll {
  max-height: 32rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}

.profile-ranks table {
  width: 100%;
  min-width: 52rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

.profile-ranks-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.profile-ranks th,
.profile-ranks td {
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: right;
  background: var(--surface-raised);
}

.profile-ranks thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.profile-ranks tbody th {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
  font-weight: 700;
}

.profile-ranks thead th:first-child {
  left: 0;
  z-index: 3;
  text-align: left;
}

.profile-ranks-sort {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: right;
  cursor: pointer;
}

.profile-ranks-sort[data-direction="desc"]::after {
  content: " \2193";
}

.profile-ranks-sort[data-direction="asc"]::after {
  content: " \2191";
}

.profile-ranks-value {
  display: block;
  font-weight: 700;
}

.profile-ranks tr.is-current th,
.profile-ranks tr.is-current td {
  background: var(--accent-soft);
}

.profile-ranks-gap td {
  text-align: left;
  color: var(--ink-soft);
  font-size: 0.82rem;
  background: var(--surface);
}

@media (max-width: 900px) {
  body.monitor-map {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .lsoa-app {
    display: flex;
    flex-direction: column;
  }

  .lsoa-map {
    order: -1;
    height: 52vh;
    flex: none;
  }

  .lsoa-dock {
    order: 0;
    max-height: none;
  }

  #lsoa-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .lsoa-chart {
    width: 100%;
    justify-self: stretch;
  }

  .lsoa-stats {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .lsoa-stats dd {
    margin-bottom: 0.55rem;
  }

  .lsoa-panel {
    order: 1;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .lsoa-split-head {
    flex-direction: column;
  }

  .profile-hierarchy {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .profile-hierarchy dd {
    margin-bottom: 0.65rem;
  }
}