/**
 * @file
 * VA OIG accessible US state choropleth.
 *
 * Colour values mirror the TOKENS object in va_choropleth_map.js. If one
 * changes, change both.
 */

.va-map {
  max-width: 100%;
  overflow: hidden;
}

.va-map__figure {
  margin: 0;
  padding: 0 0 4px;
}

.va-map__caption {
  display: block;
  text-align: center;
  font-family: "Roboto Condensed", "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #112E51;
  padding: 8px 12px 2px;
}

.va-map__instructions {
  margin: 0;
  padding: 0 12px 6px;
  text-align: center;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #3D4551;   /* 9.68:1 on white */
}

.va-map__viewport {
  position: relative;
  max-width: 100%;
}

.va-map__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   States
   --------------------------------------------------------------------------- */

.va-map__state {
  cursor: pointer;
  outline: none;   /* Replaced by the drawn two-colour ring below. */
}

.va-map__state--zero {
  cursor: default;
}

.va-map__shape {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .va-map__shape {
    transition: fill 100ms ease-out;
  }
}

.va-map__label {
  /* Do not set font-size here. It is applied per render as a presentation
     attribute (desired px / current scale) so labels keep a constant pixel
     size while the map scales. A CSS font-size overrides that attribute and
     the labels grow with the map, colliding in the Northeast. */
  font-weight: 600;
  fill: #1B1F23;         /* 11.89:1 on the idle fill */
  pointer-events: none;
  paint-order: stroke;
}

/* When a state is hovered or focused its fill turns navy, so the abbreviation
   sitting ON it must flip to white. Dark ink on #03487E is 1.76:1. */
.va-map__label.is-active {
  fill: #FFFFFF;         /* 9.41:1 on the hover fill */
}

.va-map__label--callout {
  font-weight: 600;
  fill: #1B1F23;
}

/* A callout label sits on the white page, NOT on the state, so it must NOT
   take the white active colour above — that rule would render it invisible.
   It turns navy instead, echoing the highlighted state while staying readable
   (9.41:1 on white). This override must stay more specific than .is-active. */
.va-map__label--callout.is-active {
  fill: #03487E;
  text-decoration: underline;
}

/* The whole callout — leader line, hit area and label — acts as a proxy for a
   state whose own shape is too small to hit. DC's shape is roughly 2px across. */
.va-map__callout {
  cursor: pointer;
}

.va-map__callout-hit {
  fill: transparent;
}

.va-map__callout:hover .va-map__label--callout {
  fill: #03487E;
  text-decoration: underline;
}

.va-map__callout:hover .va-map__leader {
  stroke: #03487E;
}

.va-map__leader {
  pointer-events: none;
}

/* Pointer-only enlarged hit areas for very small states. */
.va-map__tap {
  fill: transparent;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Focus ring
   Two colours by necessity: dark ink is 1.76:1 on the hover navy, white is
   1.4:1 on the idle grey. Neither works alone; together one always clears 3:1.
   A single <path> cannot carry two strokes, so the ring is drawn by a pair of
   shared <use> elements that reference whichever state currently has focus.
   Painted last, so no neighbouring state can cover it.
   --------------------------------------------------------------------------- */

.va-map__focus {
  pointer-events: none;
}

.va-map__focus[hidden] {
  display: none;
}

.va-map__focus-halo,
.va-map__focus-core {
  fill: none;
}

.va-map__focus-halo {
  stroke: #FFFFFF;
  stroke-width: 5;
}

.va-map__focus-core {
  stroke: #1B1F23;
  stroke-width: 2;
}

/* ---------------------------------------------------------------------------
   Tooltip -- unified with the column chart's dark treatment
   --------------------------------------------------------------------------- */

.va-map__tooltip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: 90%;
  padding: 5px 9px;
  border-radius: 3px;
  background: #1B1F23;
  color: #FFFFFF;          /* 16.6:1 */
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.va-map__tooltip[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Status region
   --------------------------------------------------------------------------- */

/* Available to assistive tech, not painted on screen. Used by the status
   region and by the keyboard-navigation sentence, which would only confuse a
   pointer user who cannot act on it. */
.va-map__status,
.va-map__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* clip + nowrap would truncate a full sentence for some AT; keep it flowing. */
.va-map__sr-only {
  white-space: normal;
}

.va-map__subcaption {
  margin: 6px 12px 0;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #1B1F23;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Data table
   --------------------------------------------------------------------------- */

.va-map__details {
  margin: 8px 12px 0;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.va-map__summary {
  cursor: pointer;
  padding: 6px 2px;
  color: #112E51;
  font-weight: 600;
}

.va-map__summary:focus-visible {
  outline: 2px solid #1B1F23;
  outline-offset: 2px;
}

.va-map__table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 10px;
}

.va-map__table caption {
  text-align: left;
  padding: 4px 0 8px;
  color: #1B1F23;
  font-weight: 600;
}

.va-map__table th,
.va-map__table td {
  border: 1px solid #A9AEB1;
  padding: 5px 8px;
  text-align: left;
  color: #1B1F23;
}

.va-map__table thead th {
  background: #F0F0F0;
  padding: 0;
}

/* Sort control. A real <button>, styled to read as a table header rather than
   a form control, but keeping native keyboard operation and focus handling. */
.va-map__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: #1B1F23;          /* 13.7:1 on the #F0F0F0 header */
  text-align: left;
  cursor: pointer;
}

.va-map__sort:hover {
  background: #E1E4E6;
}

.va-map__sort:focus-visible {
  outline: 2px solid #1B1F23;
  outline-offset: -2px;
}

/* Text glyph, so direction survives forced-colors and is never colour-alone. */
.va-map__sort-arrow {
  font-size: 0.8em;
  line-height: 1;
}

.va-map__table tbody th {
  font-weight: 400;
}

.va-map__table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.va-map__table a {
  color: #112E51;
  text-decoration: underline;
}

/* Rows for locations that carry data but have no shape on the map (the U.S.
   territories). The distinction is carried by the visible text in the row, not
   by this styling -- the tint is a convenience for sighted scanning only, so
   nothing is lost in forced-colors or for anyone who cannot perceive it. */
.va-map__row--offmap th,
.va-map__row--offmap td {
  background: #F7F8F9;
}

.va-map__offmap-note {
  color: #3D4551;   /* 9.15:1 on #F7F8F9 */
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Forced colours / Windows High Contrast
   Author fills are replaced, so hover and focus must be re-expressed with
   system colours rather than relying on the navy.
   --------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .va-map__shape {
    fill: Canvas;
    stroke: CanvasText;
  }

  .va-map__state:hover .va-map__shape,
  .va-map__state:focus-visible .va-map__shape {
    fill: Highlight;
    stroke: CanvasText;
    stroke-width: 2;
  }

  .va-map__label,
  .va-map__label.is-active,
  .va-map__label--callout.is-active {
    fill: CanvasText;
  }

  .va-map__callout:hover .va-map__label--callout {
    fill: Highlight;
  }

  .va-map__state:hover .va-map__label,
  .va-map__state:focus-visible .va-map__label {
    fill: HighlightText;
  }

  .va-map__tooltip {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
}