/* MapWidget styles */

.map-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Cap the width on very large / ultra-wide displays so the map (whose height
     is derived from its width via aspect-ratio) doesn't grow taller than the
     viewport. Centered so it stays balanced within its full-width container. */
  width: 100%;
  max-width: 2800px;
  margin-left: auto;
  margin-right: auto;
  /* Small buffer so keyboard focus scrolling (see scrollWidgetIntoView in
     map-widget-d3geo.js) leaves a little breathing room above the map. */
  scroll-margin-top: 1rem;
}

/* Render side by side if there is enough space */
@media (min-width: 1024px) {
  .map-widget {
    flex-direction: row;
    align-items: flex-start;
  }
}

.map-widget__map {
  flex: 2;
  padding: 0.5rem;
  /*border-radius: 8px;*/
  background: #ffffff;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);*/

  /* Clip the SVG's corners to the rounded box. */
  overflow: hidden;
  position: relative;
}

/* Cursor-following hover tooltip (opt-in via the show_tooltip argument).
   Hidden by default and only revealed at the desktop breakpoint below, so it
   never shows on mobile/tablet (where there is no cursor to follow). */
.map-widget__tooltip {
  position: absolute;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  padding: 0.5rem;
  border-radius: 8px;
  background: #1b1b1b;
  color: #ffffff;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
  /* `:not([hidden])` preserves the JS `hidden` toggle — without it this rule
     would override `hidden` and keep the tooltip visible after mouseleave. */
  .map-widget__tooltip:not([hidden]) {
    display: flex;
  }
}

/* Category icons (category bar + summary list). Shape-only inline SVG; the
   fill/stroke live here so the icon inherits `color` from its container,
   letting the bar and panel color it independently. */
.map-widget__category-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Category summary bar — sits below the map SVG, inside the map card, so its
   position is independent of the info panel's height. Hidden on mobile
   (the mockup only shows it on wider screens) and hidden until a state
   is selected (via the `hidden` attribute toggled in renderCategoryBar). */
.map-widget__category-bar {
  display: none;

  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgba(10, 19, 34, 0.9); /* #0a1322 at 90% */
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

@media (min-width: 1024px) {
  /* `:not([hidden])` keeps the browser's `hidden` behavior working — without
     it, this display rule would override `hidden` and reveal the bar before a
     state is selected. */
  .map-widget__category-bar:not([hidden]) {
    display: flex;
  }
}

.map-widget__category-bar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.map-widget__category-bar-caption {
  color: white;
  padding-left: 1rem;
}

.map-widget__category-bar-caption-state {
  margin-right: 0.25em;
}

.map-widget__category-bar-total {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding-right: 1rem;
}

.map-widget__category-bar-total-label {
  color: white;
}

.map-widget__category-bar-total-count {
  color: white;
}

.map-widget__category-slots {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid #565c65;
  padding-left: 1rem;
  padding-right: 1rem;
}

.map-widget__category-slot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
  border-left: 1px solid #565c65;
}

.map-widget__category-slot:first-child {
  border-left: 0;
}

/* Top row of a category slot: the icon sits to the left of the count, with the
   label on its own line below (a normal child of the column-flex slot). */
.map-widget__category-slot-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.map-widget__category-slot-label {
  text-align: center;
}

.map-widget__category-slot-count {
  text-align: center;
}

.map-widget__category-slot-empty-label {
  text-align: center;
}

.map-widget__category-slot-empty-count {
  text-align: center;
}

/* The SVG scales to fill the map area; viewBox handles the aspect ratio. */
.map-widget__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600;
  display: block;
}

.map-widget__panel {
  flex: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 3rem;
  /*border-radius: 8px;*/
  background: #ffffff;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);*/

  /* Clip the SVG's corners to the rounded box. */
  overflow: hidden;
}

/* Short gold/yellow accent bar shown above the info-panel heading. */
.map-widget__separator {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  border: 2px solid #ffbe2e;
  border-radius: 2px;
  background: #ffbe2e;
  width: 50px;
}

/* Flex container housing the state badge and heading side by side. */
.map-widget__heading-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Rounded badge showing the state abbreviation, shown next to the heading. */
.map-widget__state-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #ffbe2e;
  color: #1b1b1b;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.map-widget__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.map-widget__action-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Rounded text pill used as the bullet for an action (the fallback when the
   action's bullet has no image). */
.map-widget__bullet-text {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #ffbe2e;
  color: #1b1b1b;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* Image variant of an action's bullet (e.g. a logo or seal). */
.map-widget__bullet-image {
  flex-shrink: 0;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  /* Align the image's top edge with the first line of the action text. The row
     uses `align-items: baseline`, which images don't participate in cleanly, so
     nudge it to line up with the text's cap height. */
  align-self: flex-start;
  margin-top: 0.05rem;
  object-fit: contain;
}

.map-widget__action-content {
  flex: 1;
}

.map-widget__action-date {
  margin-top: 0.125rem;
}

/* Summary list (the default "nothing selected" view). Mirrors the actions-list
   reset so its items align with the panel heading instead of inheriting the
   usa-list bullet indentation. */
.map-widget__summary {
  list-style: none;
  margin: 0;
  padding: 0;
}

.map-widget__summary-label-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Visually hidden container for the keyboard/screen-reader state controls.
   The buttons stay in the accessibility tree and the tab order; only their
   visual presentation is removed. Focusing a button highlights the matching
   state on the (aria-hidden) map, which is the visible focus indicator. */
.map-widget__sr-controls {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden state name added to the info panel so the live region
   reliably announces it when the panel updates. */
.map-widget__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;
}