/* Heatmap: a cartographic plate in the app's paper-and-ink register.
   Heat ramp: one oxide hue, light to dark, validated for monotone lightness and 2:1 light-end contrast on the sea. */
:root {
  --heat-1:#e2a47f;
  --heat-2:#cf8057;
  --heat-3:#b35d38;
  --heat-4:#8e3f20;
  --heat-5:#5e2411;
  --heat-none:#dde2d9;
  --heat-unassessed:#eceee9;
  --sea:#fbfcfa;
  --grid:#e4e8e1;
}
.heat-heading {
  margin-bottom:22px;
}

/* Controls */
.heat-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 32px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.heat-segments {
  display:flex;
  flex-wrap:wrap;
  gap:0 28px;
}
.heat-segments a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  text-decoration:none;
  color:var(--muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 150ms ease-out,border-color 150ms ease-out;
}
.heat-segments a:hover {
  color:var(--ink);
}
.heat-segments a[aria-current] {
  color:var(--ink);
  font-weight:700;
  border-color:var(--accent);
}
.heat-lens {
  display:inline-flex;
  padding:3px;
  margin-bottom:8px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:6px;
}
.heat-lens a {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  font-size:13px;
  text-decoration:none;
  color:var(--muted);
  border-radius:4px;
  transition:background-color 150ms ease-out,color 150ms ease-out;
}
.heat-lens a:hover {
  color:var(--ink);
}
.heat-lens a[aria-current] {
  background:var(--sheet);
  color:var(--ink);
  font-weight:600;
  box-shadow:0 1px 2px rgba(32,38,34,.12);
}

/* Stage: plate and readout */
.heat-stage {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:28px;
  align-items:start;
}
.heat-plate {
  margin:0;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.heat-caption {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 18px;
  padding:12px 16px;
  font-size:13px;
  border-bottom:1px solid var(--line);
}
.heat-caption b {
  font-family:var(--serif);
  font-size:16px;
  font-weight:500;
}
.heat-live {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.heat-live.is-error {
  color:var(--accent);
}
.pulse {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--olive);
  box-shadow:0 0 0 0 rgba(66,81,63,.45);
  animation:heat-pulse 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
.is-error .pulse {
  background:var(--accent);
  animation:none;
}
@keyframes heat-pulse {
  0% { box-shadow:0 0 0 0 rgba(66,81,63,.45); }
  70%,100% { box-shadow:0 0 0 7px rgba(66,81,63,0); }
}
.heat-canvas {
  position:relative;
  background:var(--sea);
  padding:10px 8px 4px;
}
.heat-map {
  display:block;
  width:100%;
  height:auto;
}
.heat-map .sphere {
  fill:var(--sea);
  stroke:#c9cfc6;
  stroke-width:.8;
}
.heat-map .graticule {
  fill:none;
  stroke:var(--grid);
  stroke-width:.5;
}
.land {
  stroke:var(--sheet);
  stroke-width:.45;
  stroke-linejoin:round;
  transition:fill 420ms cubic-bezier(.16,1,.3,1);
}
.lands .land[data-iso],.dots .land {
  cursor:pointer;
}
.land.b0 { fill:var(--heat-none); }
.land.b1 { fill:var(--heat-1); }
.land.b2 { fill:var(--heat-2); }
.land.b3 { fill:var(--heat-3); }
.land.b4 { fill:var(--heat-4); }
.land.b5 { fill:var(--heat-5); }
.land.unassessed { fill:var(--heat-unassessed); cursor:default; }
.dots .land {
  stroke:var(--sheet);
  stroke-width:1;
}
.dots .land.is-hold {
  stroke:var(--ink);
  stroke-dasharray:1.5 1.2;
}
.heat-map .hatch {
  stroke:var(--ink);
  stroke-width:.9;
  stroke-opacity:.55;
}
.holds .hold {
  fill:url(#hold-hatch);
  stroke:none;
  pointer-events:none;
}
.lands .land[data-iso]:hover {
  stroke:var(--ink);
  stroke-width:.9;
}
.selection,.selection-dot {
  fill:none;
  stroke:var(--ink);
  stroke-width:1.6;
  pointer-events:none;
  visibility:hidden;
}
.selection.is-on,.selection-dot.is-on {
  visibility:visible;
}
.hubs {
  visibility:hidden;
}
.heat.show-hubs .hubs {
  visibility:visible;
}
.hub {
  fill:none;
  stroke:var(--olive);
  stroke-width:1.4;
  pointer-events:none;
}
.heat-tip {
  position:absolute;
  left:0;
  top:0;
  z-index:5;
  min-width:150px;
  padding:8px 11px;
  background:var(--ink);
  color:var(--sheet);
  border-radius:6px;
  font-size:12px;
  line-height:1.4;
  pointer-events:none;
  box-shadow:0 6px 18px rgba(32,38,34,.22);
}
.heat-tip b {
  display:block;
  font-size:13px;
}
.heat-tip span {
  color:#d7ddd5;
  font-variant-numeric:tabular-nums;
}

/* Legend */
.heat-legend {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 28px;
  padding:14px 16px 16px;
  border-top:1px solid var(--line);
  font-size:12px;
}
.heat-legend ol,.heat-legend ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}
.ramp {
  gap:0;
}
.ramp li {
  display:flex;
  flex-direction:column;
  min-width:78px;
  color:var(--ink);
}
.ramp .swatch {
  width:100%;
  height:10px;
  margin-bottom:6px;
  border-radius:0;
}
.ramp li:first-child .swatch { border-radius:3px 0 0 3px; }
.ramp li:last-child .swatch { border-radius:0 3px 3px 0; }
.ramp small {
  margin-top:1px;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.keys {
  gap:10px 18px;
  align-items:center;
}
.keys li {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
}
.swatch {
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:3px;
  flex-shrink:0;
}
.swatch.b0 { background:var(--heat-none); }
.swatch.b1 { background:var(--heat-1); }
.swatch.b2 { background:var(--heat-2); }
.swatch.b3 { background:var(--heat-3); }
.swatch.b4 { background:var(--heat-4); }
.swatch.b5 { background:var(--heat-5); }
.hatch-swatch {
  background:repeating-linear-gradient(45deg,var(--ink) 0 1px,var(--heat-none) 1px 4px);
}
.hub-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  cursor:pointer;
}
.hub-toggle input {
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--olive);
}
.ring {
  width:12px;
  height:12px;
  border:1.5px solid var(--olive);
  border-radius:50%;
}

/* Readout */
.heat-readout {
  position:sticky;
  top:16px;
  padding:4px 0 0;
  font-size:14px;
}
.heat[aria-busy="true"] .heat-readout,.heat[aria-busy="true"] .heat-ranking {
  opacity:.6;
  transition:opacity 150ms ease-out;
}
.heat-readout h2 {
  font-size:32px;
  margin:0;
}
.heat-readout h3 {
  font:600 12px/1.3 var(--sans);
  letter-spacing:.02em;
  color:var(--olive);
  margin:24px 0 10px;
}
.readout-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.readout-clear {
  font-size:13px;
  color:var(--muted);
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.readout-meta {
  color:var(--muted);
  font-size:13px;
  margin:6px 0 16px;
}
.readout-score {
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.readout-score .score {
  font:500 56px/1 var(--serif);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;
}
.band-chip {
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:8px;
  align-items:center;
  font-weight:600;
}
.band-chip small {
  grid-column:1/-1;
  margin-top:3px;
  font-weight:400;
}
.readout-hold {
  margin:14px 0 0;
  padding:10px 12px;
  font-size:13px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:6px;
}
.drivers,.readout-facts,.readout-sales {
  margin:0;
}
.drivers div {
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.drivers dt,.readout-facts dt,.readout-sales dt {
  color:var(--muted);
  font-size:12px;
  padding-top:2px;
}
.drivers dd {
  margin:0;
  line-height:1.45;
}
.drivers small,.readout-facts small {
  margin-top:2px;
}
.meter {
  display:block;
  width:100%;
  height:4px;
  margin-top:7px;
}
.meter .track,.bar .track {
  fill:var(--wash);
}
.meter .fill {
  fill:var(--ink);
}
.meter .fill.live {
  fill:var(--olive);
}
.readout-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
}
.readout-facts dd {
  margin:2px 0 0;
  font:500 20px/1.2 var(--serif);
}
.readout-facts dd small {
  font-family:var(--sans);
}
.segment-table {
  width:100%;
  margin-top:20px;
  border-collapse:collapse;
  font-size:13px;
}
.segment-table caption {
  text-align:left;
  font:600 12px/1.3 var(--sans);
  letter-spacing:.02em;
  color:var(--olive);
  padding-bottom:8px;
}
.segment-table th,.segment-table td {
  text-align:left;
  padding:7px 8px 7px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-weight:400;
}
.segment-table thead th {
  font-size:11px;
  color:var(--muted);
}
.segment-table tbody th {
  font-weight:600;
}
.segment-table tr.is-current th::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin:0 6px 1px 0;
  border-radius:50%;
  background:var(--accent);
}
.segment-table .swatch {
  width:9px;
  height:9px;
  margin-right:6px;
  border-radius:2px;
}
.num {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.readout-programmes {
  list-style:none;
  margin:0;
  padding:0;
}
.readout-programmes li {
  padding:8px 0;
  border-bottom:1px solid var(--line);
  line-height:1.4;
}
.readout-programmes a {
  text-decoration:none;
}
.readout-programmes a:hover {
  text-decoration:underline;
}
.readout-sales div {
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.readout-sales dd {
  margin:2px 0 0;
  line-height:1.5;
}
.readout-why {
  margin-top:12px;
  font-size:13px;
}
.readout-why summary {
  cursor:pointer;
  min-height:44px;
  display:flex;
  align-items:center;
  font-weight:600;
}
.readout-why ul {
  margin:0;
  padding-left:18px;
  color:var(--muted);
}
.readout-why li {
  margin-bottom:6px;
}
.readout-signin {
  margin-top:18px;
  padding-top:6px;
  border-top:1px solid var(--line);
}
.top-list {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
  counter-reset:top;
}
.top-list li {
  counter-increment:top;
  border-bottom:1px solid var(--line);
}
.top-list a {
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:baseline;
  padding:9px 0 10px;
  text-decoration:none;
}
.top-list a::before {
  content:counter(top);
  grid-row:1/3;
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.top-list .val {
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.top-list .bar {
  grid-column:2/4;
  width:100%;
  height:4px;
  margin-top:6px;
}
.top-list a:hover .name {
  color:var(--accent);
}
.readout-foot {
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
}
.bar .b1 { fill:var(--heat-1); }
.bar .b2 { fill:var(--heat-2); }
.bar .b3 { fill:var(--heat-3); }
.bar .b4 { fill:var(--heat-4); }
.bar .b5 { fill:var(--heat-5); }

/* Ranking */
.heat-ranking {
  margin-top:48px;
}
.heat-ranking .section-heading {
  align-items:baseline;
}
.ranking-meta {
  font-size:13px;
  color:var(--muted);
}
.table-wrap {
  overflow-x:auto;
  border-top:1px solid var(--ink);
}
.rank-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.rank-table th,.rank-table td {
  text-align:left;
  padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.rank-table thead th {
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.rank-table tbody th {
  font-weight:600;
  min-width:170px;
}
.rank-table tbody th a {
  text-decoration:none;
}
.rank-table tbody th a:hover {
  color:var(--accent);
  text-decoration:underline;
}
.rank-table small {
  font-weight:400;
  margin-top:2px;
}
.rank-table tr.extra {
  display:none;
}
.rank-table.is-all tr.extra {
  display:table-row;
}
.rank-table tr.is-selected {
  background:var(--wash);
}
.heat-cell {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:130px;
  font-weight:600;
}
.heat-cell .bar {
  width:84px;
  height:8px;
  flex-shrink:0;
}
.tag {
  font-size:11px;
  font-weight:600;
  padding:1px 6px;
  border:1px solid var(--ink);
  border-radius:3px;
  vertical-align:1px;
}
.show-all {
  margin-top:18px;
}
.empty-note {
  padding:24px 0;
  color:var(--muted);
}

/* Method */
.heat-method {
  margin-top:64px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.heat-method h2 {
  font-size:32px;
}
.method-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:48px;
}
.method-text p {
  font-size:15px;
  line-height:1.65;
}
.formula {
  margin:18px 0 22px;
  padding:16px 18px;
  background:var(--wash);
  border-radius:6px;
  font:13px/1.8 var(--mono);
  white-space:pre-wrap;
  overflow-x:auto;
}
.formula span {
  font-weight:700;
}
.weights {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin-bottom:26px;
}
.weights caption {
  text-align:left;
  font-weight:600;
  padding-bottom:8px;
}
.weights th,.weights td {
  text-align:left;
  padding:8px 12px 8px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.weights tbody th {
  width:92px;
  color:var(--muted);
  font-weight:400;
}
.weights.check td,.weights.check thead th {
  font-variant-numeric:tabular-nums;
}
.weights thead th {
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.weights.check tbody th {
  color:var(--ink);
  font-weight:600;
}

@media(max-width:1000px) {
  .heat-stage {
    grid-template-columns:1fr;
  }
  .heat-readout {
    position:static;
  }
  .method-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
}
@media(max-width:600px) {
  .heat-controls {
    align-items:stretch;
    flex-direction:column;
    gap:6px;
    border-bottom:0;
  }
  .heat-segments {
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:0 20px;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
  }
  .heat-segments a {
    flex-shrink:0;
    font-size:13px;
  }
  .heat-lens {
    align-self:flex-start;
  }
  .heat-canvas {
    padding:6px 2px 2px;
  }
  .ramp li {
    min-width:0;
    flex:1;
  }
  .ramp small {
    display:none;
  }
  .heat-legend {
    padding:12px;
  }
  .heat-readout h2 {
    font-size:28px;
  }
  .readout-score .score {
    font-size:48px;
  }
  .heat-ranking .section-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .rank-table {
    font-size:13px;
  }
  .rank-table th:nth-child(n+6),.rank-table td:nth-child(n+6) {
    display:none;
  }
  .heat-cell .bar {
    display:none;
  }
  .heat-cell {
    min-width:0;
  }
  .rank-table tbody th {
    min-width:120px;
  }
  .heat-method h2 {
    font-size:27px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .pulse {
    animation:none;
  }
  .land,.heat-segments a,.heat-lens a {
    transition:none;
  }
}

/* Reset the application's admin-table and definition-list defaults inside the heatmap. */
.heat th,.heat-method th {
  background:none;
  font-size:inherit;
  color:inherit;
  white-space:normal;
}
.heat thead th,.heat-method thead th {
  font-size:12px;
  color:var(--muted);
}
.rank-table tbody th {
  font-size:15px;
}
.heat dt {
  margin-top:0;
}
.heat dd {
  font-size:inherit;
}
.drivers div {
  align-items:start;
}
.drivers dt {
  padding-top:1px;
}
.readout-facts dd {
  font-size:20px;
}
.weights tbody th {
  color:var(--muted);
}
.selection {
  stroke-width:2;
}
.heat-live {
  display:block;
}
.heat-live .pulse {
  display:inline-block;
  margin-right:8px;
  vertical-align:1px;
}