/* ==========================================================================
   Evidence charts
   --------------------------------------------------------------------------
   A dark band that separates the record from the argument. Marks are thin,
   grid and axes are recessive hairlines, and no rule is dashed except the
   deliberate "no coverage" tile outline.
   ========================================================================== */

.fame-charts {
  position: relative;
  padding-block: var(--s-8);
  background: var(--ink);
  color: var(--on-dark);
}

.fame-charts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.fame-charts__head h2 {
  margin-top: var(--s-2);
  font-size: 24px;
  color: var(--on-dark);
}

.fame-charts__note {
  max-width: 44ch;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--on-dark-mute);
}

/* Two independent columns rather than a grid.
   With a grid, the tall coverage card set the row height and the short year
   chart beside it sat above a large empty area. Columns let each stack pack
   to its own content, so the band has no dead space at any width. */
.fame-charts__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
}

.fame-charts__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.fame-charts__col--main { flex: 1.55; }
.fame-charts__col--side { flex: 1; }

.fame-chart {
  margin: 0;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
}

.fame-chart figcaption { margin-bottom: var(--s-5); }

.fame-chart h3 {
  font-size: 14.5px;
  font-weight: var(--w-medium);
  color: var(--on-dark);
}

.fame-chart__sub {
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}

.fame-chart__svg { width: 100%; height: auto; overflow: visible; }

/* The tile map is schematic, so it has a natural size. Letting it scale to the
   full card width inflated the tiles until they dominated the whole band. */
.fame-chart__map {
  max-width: 330px;
  margin-inline: auto;
}

/* Axis ticks and category names align in columns, so tabular figures. */
.fame-chart__axis {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}

.fame-chart__cat {
  font-family: var(--font-sans);
  font-size: 12.5px;
  fill: var(--on-dark-2);
}

.fame-chart__value {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--label, #D5D8F0);
  font-variant-numeric: tabular-nums;
}

.fame-chart__tilelabel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}

.fame-chart__tilevalue {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: var(--w-bold);
}

/* Marks are focusable so a keyboard reaches every value the mouse can. */
.fame-chart__bar,
.fame-chart__tile { cursor: default; }

.fame-chart__bar:hover,
.fame-chart__tile:hover { opacity: .85; }

.fame-chart__bar:focus-visible,
.fame-chart__tile:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.fame-chart__scale {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

.fame-chart__scale i {
  width: 22px;
  height: 9px;
  border-radius: 2px;
}

.fame-chart__foot {
  margin: var(--s-4) 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--on-dark-mute);
}

.fame-chart__legend {
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.fame-chart__legend li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 0;
  font-size: var(--t-xs);
}

.fame-chart__legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.fame-chart__legend a { color: var(--on-dark-2); text-decoration: none; }
.fame-chart__legend a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: .18em; }
.fame-chart__legend b { margin-left: auto; color: var(--on-dark); }

/* Tooltip. Enhancement only — every value is also in the table view. */
.fame-chart__tip {
  position: fixed;
  z-index: 60;
  padding: 7px var(--s-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--on-dark);
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-tip);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .fame-charts__grid { flex-direction: column; }
  .fame-charts__col { width: 100%; }
}

@media (max-width: 768px) {
  .fame-charts__head { display: block; }
  .fame-charts__note { margin-top: var(--s-4); }
  .fame-chart { padding: var(--s-4); }
}

/* District breakdown. Present only once the district taxonomy is populated —
   see fame_chart_districts(). */
.fame-chart__districts {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.fame-chart__districts .fame-eyebrow { margin-bottom: var(--s-3); }