/* thf-dv-layout.css
   Note: CSS custom properties cannot be used inside @media query conditions
   (browser limitation). All breakpoint pixel values in this file correspond
   to Bootstrap 5 breakpoints defined as variables in thf-dv-variables.css.
   Each media query is annotated with the variable name it mirrors.
   Structural layout for THF graphics.
   Controls the graphic container, header, plot areas, footer, and accordion.
   Does not set font properties — those live in thf-dv-fonts.css.
   ─────────────────────────────────────────────────────────────────────────── */


/* ── Graphic container ────────────────────────────────────────────────────── */

.dv-graphic {
  padding-top:    24px;
  padding-bottom: 24px;
  margin-bottom:  var(--space-graphic-gap);
}

.dv-graphic:last-child {
  margin-bottom: 0;
}


/* ── Header — designation, headline, intro ────────────────────────────────── */

.dv-graphic-header {
  margin-bottom: var(--space-header-bottom);
}


/* ── Plots wrapper ────────────────────────────────────────────────────────── */

/* Side-by-side layout — applied when layout: side-by-side in YAML.
   Build script adds .dv-graphic-plots--side-by-side to the plots wrapper.
   Equal-width columns on tablet and above; stacks on mobile.              */

.dv-graphic-plots--side-by-side {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--side-by-side-gutter, 24px);
}

.dv-graphic-plots--side-by-side .dv-graphic-plot {
  flex:      1 1 calc(50% - var(--side-by-side-gutter, 24px) / 2);
  max-width: calc(50% - var(--side-by-side-gutter, 24px) / 2);
}

/* --bp-sm-max */
@media (max-width: 575.98px) {
  .dv-graphic-plots--side-by-side .dv-graphic-plot {
    flex:      0 0 100%;
    max-width: 100%;
  }
}


/* ── Individual plot ──────────────────────────────────────────────────────── */

.dv-graphic-plot {
  margin-bottom: var(--space-plot-gap);
}

.dv-graphic-plot:last-child {
  margin-bottom: 0;
}

/* SVG container — D3 renders into this div */
.dv-graphic-plot-svg {
  position: relative;   /* needed for tooltip absolute positioning */
  width:    100%;
  overflow: visible;
}

.dv-graphic-plot-svg svg {
  display: block;
  width:   100%;
  height:  auto;
}


/* ── Footer — notes, sources, accordion ───────────────────────────────────── */

.dv-graphic-footer {
  margin-top: var(--space-footer-top);
}

.dv-graphic-notes {
  margin-bottom: 4px;
}

.dv-graphic-sources-abbrev {
  margin-bottom: var(--space-sources-top);
}


/* ── Full sources accordion ───────────────────────────────────────────────── */

.dv-graphic-sources-accordion {
  padding-top: 8px;
  margin-top:  4px;
}

.dv-graphic-sources-body {
  padding-top: 8px;
}

/* Individual source items */
.dv-graphic-sources-full li {
  margin-bottom: 6px;
  padding-left:  0;
  list-style:    disc;
}

.dv-graphic-sources-full {
  padding-left: 16px;   /* indent to show bullet */
}

.dv-graphic-sources-full li:last-child {
  margin-bottom: 0;
}

/* One level of bullet sub-items */
.dv-graphic-sources-full li ul {
  margin-top:  4px;
  padding-left: 16px;
  list-style:  disc;
}

.dv-graphic-sources-full li ul li {
  margin-bottom: 2px;
}


/* ── Legend (HTML, above or below plot SVG) ───────────────────────────────── */

.dv-graphic-legend {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px 16px;
  margin-bottom: 8px;
}

.dv-graphic-legend--below {
  margin-bottom: 0;
  margin-top:    8px;
}

.dv-graphic-legend--left   { justify-content: flex-start; }
.dv-graphic-legend--center { justify-content: center; }
.dv-graphic-legend--right  { justify-content: flex-end; }

.dv-graphic-legend-item {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   11px;
  color:       var(--color-ink-2);
  white-space: nowrap;
}

.dv-graphic-legend-swatch {
  display:       inline-block;
  width:         10px;
  height:        10px;
  border-radius: 2px;
  flex-shrink:   0;
}


/* ── Organization logo ────────────────────────────────────────────────────── */

.dv-graphic-logo {
  display:         flex;
  justify-content: flex-end;
  margin-top:      12px;
}

.dv-graphic-logo img {
  display: block;
  height:  24px;
  width:   auto;
}


/* ── Axis tick text ──────────────────────────────────────────────────────── */

.tick text {
  font-size:   11px;
  font-family: var(--font-sans);
}


/* ── Annotation labels ────────────────────────────────────────────────────── */

.annotation-band-label,
.annotation-line-label {
  font-size:   11px;
  font-family: var(--font-sans);
}


/* ── Bar value labels ────────────────────────────────────────────────────── */

.bar-label {
  font-size:   11px;
  fill:        var(--color-ink-2);
  font-family: var(--font-sans);
}


/* ── Axis titles ──────────────────────────────────────────────────────────── */

.axis-title {
  font-size:   11px;
  fill:        var(--color-ink-3);
  font-family: var(--font-sans);
}

.axis-title-y {
  dominant-baseline: auto;
}


/* ── Download exclude zone ────────────────────────────────────────────────── */
/* Elements with this class are hidden during html2canvas capture */

.dv-download-exclude {
  /* Visibility toggled by JS during capture — no base styles needed */
}


/* ── Scatter plot size legend ─────────────────────────────────────────────── */
/* Rendered as SVG inside the plot area. Position and offset controlled       */
/* via YAML; styles controlled here.                                          */

:root {
  --size-legend-label-offset: 6px;    /* px above top of each circle */
  --size-legend-font-size:    10px;
  --size-legend-color:        var(--color-ink-3);
}

/* Hide classes written by build script via media query */
.dv-size-legend-hide-sm  { display: block; }
.dv-size-legend-hide-md  { display: block; }
.dv-size-legend-hide-lg  { display: block; }
.dv-size-legend-hide-xl  { display: block; }
.dv-size-legend-hide-xxl { display: block; }
.dv-size-legend-hidden   { display: none !important; }

/* --bp-sm-max  */ @media (max-width: 575.98px)  { .dv-size-legend-hide-sm  { display: none; } }
/* --bp-md-max  */ @media (max-width: 767.98px)  { .dv-size-legend-hide-md  { display: none; } }
/* --bp-lg-max  */ @media (max-width: 991.98px)  { .dv-size-legend-hide-lg  { display: none; } }
/* --bp-xl-max  */ @media (max-width: 1199.98px) { .dv-size-legend-hide-xl  { display: none; } }
/* --bp-xxl-max */ @media (max-width: 1399.98px) { .dv-size-legend-hide-xxl { display: none; } }


/* ── Map chart ────────────────────────────────────────────────────────────── */

/* Albers projection — shown above md breakpoint, hidden below */
.dv-map-albers {
  display: block;
  width:   100%;
}

/* --bp-md-max */
@media (max-width: 767.98px) {
  .dv-map-albers { display: none; }
}

/* TGM — hidden above md breakpoint, shown below */
.dv-map-tgm {
  display: none;
  width:   100%;
}

/* --bp-md-max */
@media (max-width: 767.98px) {
  .dv-map-tgm { display: block; }
}

/* TGM label font — inherits from graphic system, bold for readability */
.dv-map-tgm text {
  font-family: var(--font-sans);
  font-weight: 600;
  user-select: none;
}


/* ── Choropleth legend ────────────────────────────────────────────────────── */

.dv-map-choro-legend {
  width:        100%;
  margin-bottom: 8px;
}

.dv-map-choro-ramp {
  height:        12px;
  border-radius: 2px;
  width:         100%;
}

.dv-map-choro-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       11px;
  color:           var(--color-ink-3);
  margin-top:      3px;
}

/* ── Border field legend ──────────────────────────────────────────────────── */

.dv-map-border-legend {
  margin-top: 6px;
}

/* ── Map state labels ─────────────────────────────────────────────────────── */
/* Font size is controlled via YAML (label_font_size) and set inline.         */
/* Font family and weight are defined here.                                   */

.state-label {
  font-family:    var(--font-sans);
  font-weight:    600;
  pointer-events: none;
  user-select:    none;
}


/* ── Table chart ──────────────────────────────────────────────────────────── */

.dv-table-wrapper {
  width:               100%;
  font-family:         var(--font-sans);
  font-size:           13px;
  color:               var(--color-ink-1);
  border-top:          1px solid var(--color-border);
}

/* ── Header ── */

.dv-table-head {
  background:          var(--color-bg-surface);
  border-bottom:       2px solid var(--color-border);
}

.dv-table-row {
  /* grid-template-columns set inline to match header */
}

.dv-table-th {
  padding:             6px 10px;
  font-weight:         600;
  font-size:           12px;
  color:               var(--color-ink-2);
  white-space:         nowrap;
  user-select:         none;
  border-right:        1px solid var(--color-border);
  border-bottom:       2px solid var(--color-border);
  background:          var(--color-bg-surface);
}

.dv-table-th:last-child { border-right: none; }

.dv-table-th--sortable {
  cursor:              pointer;
}

.dv-table-th--sortable:hover {
  color:               var(--color-ink-1);
  background:          var(--color-border);
}

.dv-table-th--active {
  color:               var(--color-ink-1);
}

.dv-table-sort-arrow {
  font-size:           10px;
  color:               var(--color-ink-3);
}

/* Rank column — header and body cells share compact padding */
.dv-table-th.dv-table-th--rank,
.dv-table-th--rank {
  padding:             6px 4px;
  text-align:          right;
  background:          var(--color-bg-surface);
  border-right:        1px solid var(--color-border);
  font-weight:         600;
  font-size:           12px;
  color:               var(--color-ink-2);
}

/* ── Header groups ── */

.dv-table-header-group {
  padding:             4px 10px;
  font-size:           11px;
  font-weight:         600;
  color:               var(--color-ink-3);
  border-bottom:       1px solid var(--color-border);
  border-right:        1px solid var(--color-border);
  background:          var(--color-bg-page);
}

.dv-table-header-group:last-child { border-right: none; }

.dv-table-header-group--empty {
  background:          transparent;
  border-bottom-color: transparent;
}

/* ── Body ── */

.dv-table-td {
  padding:             6px 10px;
  border-bottom:       1px solid var(--color-border);
  border-right:        1px solid var(--color-border);
  color:               var(--color-ink-1);
  white-space:         nowrap;
}

.dv-table-td:last-child { border-right: none; }

.dv-table-td--even {
  background:          var(--color-bg-surface);
}

.dv-table-td--rank {
  padding:             6px 4px;
  text-align:          right;
}

/* ── Sticky first column ── */

.dv-table-sticky-col {
  position:            sticky;
  left:                0;
  z-index:             1;
  background:          var(--color-bg-page);
  border-left:         1px solid var(--color-border);
}

.dv-table-td--even.dv-table-sticky-col {
  background:          var(--color-bg-surface);
}

.dv-table-th.dv-table-sticky-col {
  background:          var(--color-bg-surface);
  z-index:             3;
}