/* Shared styling for the two 2026-to-date maps — PHI and national.
 *
 * BUILT FOR A NARROW EMBED. These pages are placed in a column that is at most 560 px
 * wide and can be as narrow as 320 px, so the layout is a single stacked column rather
 * than the full-bleed map with a floating panel it used to be. At 320 px a 320 px-wide
 * floating panel covered the entire map, which is why that arrangement is gone.
 *
 * Order down the page: headline, dek, map, legend, notes, credit and source. The legend
 * sits UNDER the map so it never covers data and never has to compete for width with it.
 *
 * Everything is sized in rem and percentages; the only fixed pixel values are hairlines
 * and the legend swatch, which should not scale.
 */

/* Faces come from web/fonts.css, linked by each page — the repo's single source of truth
   for the Inquirer's type, and the same file scripts/brand_fonts.py reads to build the
   matplotlib faces. Nothing is redeclared here. */

:root {
  --ink: #1a1a1a;
  --muted: #5a5a5a;
  --faint: #8a8a8a;
  --rule: #e2e2e2;
  --panel-bg: rgba(255, 255, 255, 0.95);
  /* Grot 10 for everything except the headline, which is Inquirer Headline — both from
     web/fonts.css. System stacks stay behind them so the page is readable if
     media.inquirer.com is unreachable. */
  --font: 'Grot 10', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --headline: 'Inquirer Headline', Georgia, "Times New Roman", serif;
  /* Per-map frame shape, overridden inline on #mapwrap. PHI is near-square (aspect 0.99),
     the lower 48 is about 1.9 wide-to-tall. Setting it per page means neither map is
     letterboxed inside a frame shaped for the other. */
  --map-aspect: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  /* An embed inherits the host page's scroll; this column never needs its own. */
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 12px 14px;
}

h1 {
  font-family: var(--headline);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.dek { font-size: 0.84rem; line-height: 1.45; margin: 0 0 10px; color: #333; }

/* ---- Map ---------------------------------------------------------------- */
/* The frame holds its shape at any width, so the map never collapses to zero height
   the way a percentage height on an auto-height parent would. */
#mapwrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--map-aspect);
  background: #eef1f4;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
#map { position: absolute; inset: 0; }

/* Leaflet's own furniture, shrunk to suit a 320 px frame. */
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution {
  font-size: 0.56rem;
  line-height: 1.3;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.82);
}
.leaflet-control-attribution a { color: var(--muted); }
.leaflet-bar a {
  width: 24px; height: 24px; line-height: 24px; font-size: 1rem;
}

/* ---- Readout ------------------------------------------------------------ */
/* Pinned inside the map frame rather than to the viewport, since the map is no longer
   the whole page. Sits along the bottom so it covers the least interesting part of
   either frame, and is dismissed by tapping the map. */
#readout {
  position: absolute;
  z-index: 1000;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background: var(--panel-bg);
  backdrop-filter: blur(3px);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
  font-size: 0.78rem;
}
#readout[hidden] { display: none; }
#readout .big { font-size: 1.3rem; font-weight: 700; line-height: 1; }
#readout .lbl { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
#readout .spark { margin: 6px 0 1px; }
#readout .spark svg { display: block; width: 100%; height: 34px; }
#readout .spark-axis {
  display: flex; justify-content: space-between;
  font-size: 0.6rem; color: var(--muted);
}
/* Touch devices get an explicit dismiss; a mouse just moves away. */
#readout .close {
  position: absolute; top: 2px; right: 4px;
  border: 0; background: none; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--faint); padding: 4px;
}

/* ---- Legend, under the map ---------------------------------------------- */
#legend { margin: 9px 0 0; }
.legend-title {
  font-size: 0.66rem; font-weight: 500; color: #333; margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* One continuous ramp of equal blocks with the class range centered under each. A
   stacked list of eight rows was taller than the map at 320 px. */
.legend-ramp { display: flex; width: 100%; }
.legend-ramp .legend-block { flex: 1 1 0; height: 13px; }
.legend-ramp .legend-block:first-child { border-radius: 2px 0 0 2px; }
.legend-ramp .legend-block:last-child { border-radius: 0 2px 2px 0; }
.legend-labels { display: flex; width: 100%; margin-top: 3px; }
.legend-labels span {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.6rem;
  color: var(--muted);
  line-height: 1.2;
  /* The widest label is five characters ("11–17"); let it break rather than push the
     ramp out of alignment if a future build produces something longer. */
  overflow-wrap: anywhere;
}
/* ---- Footer ------------------------------------------------------------- */
.note {
  font-size: 0.68rem; line-height: 1.45; color: var(--muted);
  margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid var(--rule);
}
.source { font-size: 0.64rem; line-height: 1.45; color: var(--faint); margin: 0; }
.credit { color: var(--muted); }

/* At the narrow end the type steps down slightly so the dek stays two or three lines
   rather than five, and the map keeps its share of the column. */
@media (max-width: 400px) {
  .wrap { padding: 8px 10px 12px; }
  h1 { font-size: 1.14rem; }
  .dek { font-size: 0.8rem; }
  .legend-labels span { font-size: 0.56rem; }
}