/* Tribal Nations Partner Map — Focus on Energy
   Palette matches the other Focus maps (outreach_map, communities-of-focus). */

:root {
  --foe-general-blue: #034ea2;
  --foe-business-4: #1a2a57;
  --foe-general-green: #00ab4e;
  --foe-trade-ally: #c45428;
  --foe-body: #3c3c3c;
  --foe-white: #ffffff;
  --foe-gray-1: #f5f7fa;
  --foe-gray-2: #e0e0e0;
  --foe-gray-3: #9aa0a6;

  /* The blue of the Energy Impact Summary cards in the source document. */
  --card-blue: #034ea2;
  --card-blue-dark: #023b7a;
  --card-rule: rgba(255, 255, 255, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--foe-body);
  background: var(--foe-white);
}

/* The top bar and the map stack, and the map takes whatever is left. This
   replaces a `calc(100% - 58px)` on .layout that assumed a 58px top bar: the
   bar actually measures 66px, so the page ran 8px past the bottom of the
   window and the last 8px of Leaflet's attribution line — the OpenStreetMap,
   CARTO and US Census credits — sat below the fold, unreadable without
   scrolling a page that is not meant to scroll. Measured at 1280x860 on the
   live test site before this change, and the same in this branch before the
   fix. Letting flex do the arithmetic means the bar can change height
   without taking the credits off screen again. */
body {
  display: flex;
  flex-direction: column;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */

/* The logo and the title sit together at the left, in that order (#26), so
   `flex-start` rather than the `space-between` that pushed a lone title block
   across the bar. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 12px 20px;
  background: var(--foe-white);
  border-bottom: 2px solid var(--foe-general-blue);
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* 40px keeps the bar at the 66px the layout below was measured against, now
   that the subtitle is gone (#34) and the logo is the tallest thing in it. `width: auto` keeps
   the artwork's own 600x123 proportions — it is never stretched. */
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
}

.topbar h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  color: var(--foe-general-blue);
}

/* ── Layout ──────────────────────────────────────────────────────────── */

/* ?embed=1 (#32): the host page supplies the heading, so the bar goes. The
   layout is flex, so the map simply takes the space. */
.embed .topbar { display: none; }

.layout {
  display: flex;
  /* `min-height: 0` lets the map shrink inside the flex column instead of
     forcing the body taller than the window. */
  flex: 1;
  min-height: 0;
}

.map-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--foe-gray-1);
}

/* ── Legend: a panel floating over the map (#22) ─────────────────────── */

/* The dock is the column the toggle button and the panel share. It is pinned
   to the map's top-right because that is the only corner with no furniture in
   it: Leaflet puts its zoom buttons top-left and its attribution bottom-right.
   The `bottom` offset keeps a long open panel clear of the attribution.

   The dock covers a tall, mostly empty box, so it must not take the pointer:
   without `pointer-events: none` its invisible half would swallow every drag
   aimed at the map behind it. Its children take the pointer back. */
.legend-dock {
  position: absolute;
  /* Leaflet's own controls reach z-index 1000. */
  z-index: 1100;
  top: 12px;
  right: 12px;
  /* Clears Leaflet's attribution line along the bottom edge. This used to be
     76px to clear the outline note that stood in the same corner; #26 moved
     that key into the panel, so the panel gets the space back. */
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.legend-dock > * { pointer-events: auto; }

.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--foe-white);
  background: var(--foe-general-blue);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  /* The button stands on whatever the map happens to be showing, so it
     carries its own contrast rather than borrowing the page's white. */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.panel-toggle:hover { background: var(--card-blue-dark); }

.panel-toggle:focus-visible {
  outline: 2px solid var(--foe-white);
  outline-offset: -4px;
}

/* Points down while the panel is closed and up while it is open, so the
   control reads as a disclosure rather than as a link. */
.panel-toggle-caret {
  width: 0;
  height: 0;
  border-right: 4.5px solid transparent;
  border-left: 4.5px solid transparent;
  border-top: 5px solid currentColor;
}

.panel-toggle[aria-expanded="true"] .panel-toggle-caret {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}

/* The panel is itself a flex column: the key and the heading are fixed at the
   top and only the list of nations scrolls (#26). Scrolling the whole panel
   instead would carry the key off the top as soon as you went looking down the
   list, which is the one place it is wanted. */
.legend {
  width: 300px;
  max-width: 100%;
  /* `min-height: 0` is what lets this flex child scroll within the dock
     instead of growing past the dock's own bottom edge. */
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--foe-white);
  border: 1px solid var(--foe-gray-2);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

/* The panel is closed at every width until the visitor opens it, so this is
   no longer confined to the narrow-screen media query. */
.legend[hidden] { display: none; }

.legend-title {
  flex: 0 0 auto;
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--foe-business-4);
}

/* The only part of the panel that scrolls. `min-height: 0` is what allows a
   flex child to shrink below its content height and scroll instead. */
.legend-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── The map key, at the top of the panel (#26) ──────────────────────── */

/* These two lines used to sit in a small box pinned to the map's bottom-right
   corner, permanently on screen. #26 moved them in here, beside the nations
   they describe, and removed that box. */
.legend-key {
  flex: 0 0 auto;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--foe-gray-2);
}

.key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px;
  font-size: 12.5px;
  line-height: 1.35;
}

/* A patch of the same fill behind the same outline the map draws, so it reads
   as a sample rather than as a bullet. app.js sets the colour, the width and
   the solid-or-dashed from the very style objects the map layers use, so the
   key cannot drift away from what is on the map. */
.key-swatch {
  flex: 0 0 26px;
  height: 16px;
  border-radius: 2px;
}

.key-text { flex: 1; }

.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--foe-body);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.legend-row:hover,
.legend-row:focus-visible {
  background: var(--foe-gray-1);
  outline: none;
}

.legend-row.is-active {
  background: #e9f1fb;
  box-shadow: inset 3px 0 0 var(--foe-general-blue);
}

.seal-badge--legend {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  /* 34 - 2*1px border = 32 of usable circle; see the badge rules below. */
  border: 1px solid var(--foe-gray-2);
}

.legend-name { flex: 1; }

.legend-row .no-data {
  display: block;
  font-size: 11.5px;
  font-style: italic;
  color: var(--foe-gray-3);
}

/* ── Seal markers ────────────────────────────────────────────────────── */

/* Sizing the seals (#18, replacing the #16 approach).
 *
 * A seal is TWO elements: `.seal-badge`, the white disc, and `.seal-art`,
 * the artwork inside it. They are separate for two reasons.
 *
 * 1. Leaflet 1.9.4 ships
 *        .leaflet-container .leaflet-marker-pane img { width: auto;
 *                                                      padding: 0; ... }
 *    at specificity (0,2,1), which outranks a one-class rule of ours at
 *    (0,1,0). #16 styled the <img> itself, so inside the marker pane its
 *    width and padding were simply discarded: the image fell back to its
 *    own aspect ratio and the "disc" became an oval, 31.7px to 75.1px
 *    wide. The legend and the popup were correct precisely because neither
 *    sits in the marker pane. A <span> is not an <img>, so the badge is out
 *    of that rule's reach by construction rather than by out-shouting it.
 *
 * 2. The artwork can then be sized independently of the disc, which is what
 *    equal-area sizing needs.
 *
 * The artwork's own width and height are set in app.js — see the "Seal
 * sizing" note there for the equal-area rule chosen on #18.
 */
.seal-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--foe-white);
  border-radius: 50%;
}

.seal-art {
  display: block;
  /* app.js sets an explicit width and height matching the artwork's own
     ratio, so nothing is ever stretched; object-fit is belt and braces. */
  object-fit: contain;
}

/* Fallback for a seal app.js has not sized yet. 70.7% is the square
   inscribed in the disc (1/sqrt(2)), so unsized artwork is never bigger than
   its circle.
   `:not([style])` matters: a max-width beats an explicit width, so without
   it these caps clamp the equal-area size app.js has just calculated and the
   non-square seals come out too small. The moment app.js writes the inline
   width and height, the [style] attribute appears and these stop applying. */
.seal-art:not([style]) {
  max-width: 70.7%;
  max-height: 70.7%;
}

/* Leaflet forces `max-width: none !important` on images in the marker pane,
   so the fallback has to match that selector's weight to land there. */
.leaflet-container .leaflet-marker-pane img.seal-art:not([style]) {
  max-width: 70.7% !important;
  max-height: 70.7% !important;
}

.seal-badge--marker {
  width: 44px;
  height: 44px;
  /* 44 - 2*2px border = 40 of usable circle. */
  border: 2px solid var(--foe-general-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ── Popup: styled after the Energy Impact Summary card ──────────────── */

.leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
}

.leaflet-popup-content {
  width: auto !important;
  margin: 0;
  line-height: 1.35;
}

.card { width: 330px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: var(--foe-white);
  background: var(--card-blue-dark);
}

.seal-badge--card {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  /* No border here, so the whole 42 is usable circle. */
}

.card-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
}

.card-hero {
  padding: 14px;
  color: var(--foe-white);
  background: var(--card-blue);
}

.card-hero .label {
  font-size: 13.5px;
  font-weight: 600;
}

.card-hero .value {
  font-size: 33px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.card-rows {
  color: var(--foe-white);
  background: var(--card-blue);
}

/* Each row is an icon column plus the label/value column, as in the document's
   cards. The hero figure above deliberately has no icon, and neither does the
   "No project details." note. */
.card-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-top: 1px solid var(--card-rule);
}

.row-text {
  flex: 1;
  min-width: 0;
}

.card-row .label {
  font-size: 12.5px;
  line-height: 1.3;
}

.card-row .value {
  font-size: 19px;
  font-weight: 700;
}

.card-row .unit {
  font-size: 12.5px;
  font-weight: 400;
}

/* ── Card icons, traced from the source document ─────────────────────── */

/* Inline SVG rather than image files: they take the card's white from
   `currentColor`, stay sharp at any zoom, and add nothing to assets/. */
.card-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon text {
  fill: currentColor;
  stroke: none;
}

/* The second unit's icon sits inline with its figure, so it is a size down. */
.card-icon-sm {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
}

/* A nation with both kWh and Therms shows both on this one row, each behind
   its own number, as the document's card does (#34). It never wraps; where
   the pair is too wide for the card, app.js (fitEnergyRows) lowers --fit so
   the figures, units and flame shrink together until it fits. */
.energy-pair {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
}

.energy-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-row .energy-pair .value { font-size: calc(19px * var(--fit, 1)); }
.card-row .energy-pair .unit { font-size: calc(12.5px * var(--fit, 1)); }
.energy-pair .card-icon-sm {
  flex-basis: calc(21px * var(--fit, 1));
  width: calc(21px * var(--fit, 1));
  height: calc(21px * var(--fit, 1));
}

.card-empty {
  padding: 16px 14px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--foe-white);
  background: var(--card-blue);
}

.card-links {
  padding: 10px 14px;
  font-size: 12.5px;
  background: var(--foe-white);
}

.card-links a {
  display: block;
  margin: 3px 0;
  color: var(--foe-general-blue);
}

.card-links .story a { color: var(--foe-trade-ally); }

.card-foot {
  padding: 0 14px 10px;
  font-size: 11px;
  color: var(--foe-gray-3);
  background: var(--foe-white);
}

/* A figure with no value (#30). Smaller and lighter than a number, so it is
   never mistaken for one — and it is not a zero, which shows as 0. */
.card .value-na,
.card-hero .value-na {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  opacity: 0.85;
}

/* ── County tooltip ──────────────────────────────────────────────────── */

.county-tooltip {
  padding: 2px 7px;
  font-size: 12px;
  color: var(--foe-body);
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.county-tooltip::before { display: none; }

.map-note {
  position: absolute;
  right: 12px;
  bottom: 24px;
  z-index: 500;
  max-width: 260px;
  padding: 8px 11px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-left: 3px solid var(--foe-trade-ally);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.leaflet-control-attribution { font-size: 10.5px; }

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .topbar { padding: 10px 16px; gap: 12px; }
  .topbar h1 { font-size: 16px; }

  /* Down from 40px with the title, so both still fit on one line and neither
     pushes the page sideways. */
  .brand-logo { height: 30px; }

  /* The dock spans the width of the map, so an open panel is a full-width
     drawer rather than a 300px card pressed against the right edge. */
  .legend-dock {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .legend { width: 100%; }

  .card { width: min(330px, 78vw); }
  .card-hero .value { font-size: 28px; }

  /* Give the narrower card a little more room for its figures. */
  .card-row { gap: 9px; }
  .card-icon { flex-basis: 26px; width: 26px; height: 26px; }
  .card-icon-sm { flex-basis: 19px; width: 19px; height: 19px; }
}