/* TBx isoband map page styles. Shared chrome (palette, header, agents menu,
   fab) is in ../chrome.css. This holds the feed, cards, stats, the deck.gl map
   legend and coverage rail, the lead-capture form, and the footer. Reuses the
   leaderboard card and form classes so the page reads as the same product. */

/* Card attribution */
.card-by { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.card-by .mention { font-size: 11.5px; }

/* Feed of cards */
.feed { max-width: 940px; margin: 26px auto; padding: 0 18px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 24px 22px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
/* The page h1 sits in the first card and matches the h2 look, the chrome header
   title is decoration, this is the SEO heading */
.card-head h1 { margin: 0; font-size: 18px; font-weight: 700; }
/* Weekly vs 12-month-median segmented toggle, an overlay at the map's top-left
   so it rides along into fullscreen, mirrors the legend that sits top-right */
.map-toggle { position: absolute; left: 14px; top: 14px; z-index: 6; display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.map-toggle button { border: none; background: rgba(255,255,255,0.95); color: var(--muted); font: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 12px; cursor: pointer; }
.map-toggle button.on { background: var(--coral); color: #fff; }
.map-toggle button + button { border-left: 1px solid var(--line); }
.card .sub { margin: 12px 0 16px; font-size: 13px; color: var(--muted); }
/* The answer block, the lead sentence an answer engine quotes, supporting facts
   as bullets */
.card .answer { margin: 16px 0 8px; font-size: 14px; color: var(--ink); line-height: 1.55; }
.card .answer-points { margin: 0 0 8px; padding-left: 20px; font-size: 14px; color: var(--ink); line-height: 1.55; }
.card .answer-points li { margin: 4px 0; }
.card .xlink { margin: 14px 0 0; padding: 9px 14px; font-size: 12.5px; line-height: 1.4; color: var(--ink); background: rgba(20,148,138,0.07); border: 1px solid rgba(20,148,138,0.22); border-left: 3px solid #14948a; border-radius: 10px; }
.card .xlink a { color: #0f7268; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(15,114,104,0.4); }
.card .xlink a:hover { border-bottom-color: #0f7268; }

.date-range { font-size: 15px; color: var(--ink); margin: 2px 0 16px; }
.date-range strong { color: var(--coral-dark); }
/* Metric cards in an aligned grid, lead card accented, the how lives behind an i */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-top: 16px; }
.stat { position: relative; padding: 14px 15px; background: rgba(232,131,74,0.04); border: 1px solid var(--line); border-radius: 13px; }
.stat .t { display: flex; align-items: flex-start; gap: 5px; min-height: 30px; line-height: 1.3; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); }
.stat .n { font-size: 38px; font-weight: 800; color: var(--coral-dark); line-height: 1.05; margin: 6px 0 3px; letter-spacing: -0.01em; }
/* The pending-ISO stat is a short label not a number, so it gets a smaller type
   size to sit level with the numeric cards beside it */
.stat.text .n { font-size: 22px; line-height: 1.15; }
.stat .s { font-size: 12px; color: var(--muted); line-height: 1.35; }
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: italic 700 10px/1 Georgia, serif; cursor: help; }
.info:hover, .info:focus { background: var(--coral); border-color: var(--coral); color: #fff; outline: none; }
.info .pop { display: none; position: absolute; top: 22px; left: -6px; width: min(232px, 76vw); background: #2a2018; color: #fff; padding: 10px 12px; border-radius: 9px; font-size: 12px; font-weight: 400; font-style: normal; line-height: 1.45; text-transform: none; letter-spacing: 0; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.info:hover .pop, .info:focus .pop { display: block; }

/* Contact line under the form */
.contact { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* Map fullscreen button, bottom-right so it clears the legend and panel */
.map-fs-btn { position: absolute; bottom: 14px; right: 14px; z-index: 6; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.map-fs-btn:hover { background: #fff; }
#map-card:fullscreen { width: 100vw; height: 100vh; background: #fff; }
#map-card:fullscreen .deckmap { border-radius: 0; }
#map-card:-webkit-full-screen { width: 100vw; height: 100vh; background: #fff; }

/* Hex map: the deck canvas fills its card, legend top-right, the play panel
   bottom. Ported from the signed-off localhost preview, see the task file. */
.mapwrap { position: relative; }
.mapwrap .deckmap { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; }
.tbx-legend { position: absolute; right: 14px; top: 14px; z-index: 5; background: rgba(255,255,255,0.95); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12px; color: #374151; line-height: 1.5; }
.tbx-legend-title { font-weight: 700; color: var(--ink); }
.tbx-legend-bar { height: 10px; width: 150px; border-radius: 5px; background: linear-gradient(90deg,#2a9d8f,#e9c46a,#e8834a); margin: 6px 0 2px; }
.tbx-legend-row { display: flex; justify-content: space-between; }
.tbx-legend-bess { margin-top: 8px; color: var(--muted); }
.tbx-legend-pill { display: inline-block; width: 7px; height: 14px; border-radius: 2px; background: #1d4e89; vertical-align: middle; margin-right: 6px; }

/* Play panel docked at the bottom of the animated card */
.tbx-panel { position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255,255,255,0.95); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
.tbx-panel button { border: 1px solid #d4d9de; background: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); font-size: 13px; }
#tbxMonth { font-weight: 800; color: var(--ink); font-size: 16px; min-width: 112px; }
.tbx-sliderwrap { flex: 1; min-width: 180px; display: flex; flex-direction: row; align-items: center; gap: 8px; }
/* One temp icon at the left marks the slider track's cooler-winter to warmer-summer tint */
.tbx-temp { font-size: 15px; line-height: 1; flex: none; }
#tbxSlider { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; outline: none; width: 100%; }
#tbxSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #555; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
#tbxSlider::-webkit-slider-runnable-track { background: transparent; height: 10px; }
#tbxSlider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #555; cursor: pointer; }
#tbxTip { position: fixed; background: #1f2937; color: #fff; padding: 6px 9px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 99; display: none; }

/* Units toggle inside the legend, a smaller sibling of the map-toggle. */
.tbx-units { display: inline-flex; margin: 7px 0 2px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.tbx-units button { border: none; background: rgba(255,255,255,0.95); color: var(--muted); font: inherit; font-weight: 700; font-size: 11.5px; padding: 3px 9px; cursor: pointer; }
.tbx-units button.on { background: var(--coral); color: #fff; }
.tbx-units button + button { border-left: 1px solid var(--line); }
/* Histogram card units toggle, pushed right to mirror the map legend toggle. */
.hist-units { display: flex; justify-content: flex-end; margin: 7px 0 2px; }
.hist-units .tbx-units { margin: 0; }

/* Click balloon: a small card pinned above the click, its tail points down at
   the pin. Fixed-positioned, page.js sets left/top in viewport pixels. */
#tbxBalloon { position: fixed; transform: translate(-50%, calc(-100% - 14px)); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 30px 10px 12px; font-size: 12.5px; color: var(--ink); line-height: 1.45; box-shadow: 0 6px 22px rgba(0,0,0,0.18); z-index: 100; display: none; max-width: 250px; }
#tbxBalloon::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; }
.tbx-balloon-x { position: absolute; top: 4px; right: 6px; border: none; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.tbx-balloon-area { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.tbx-balloon-tb { color: var(--coral); font-weight: 700; }
.tbx-balloon-gen { color: var(--muted); margin-top: 2px; }
/* Fuel-mix chips under the count, one per kind in the drawn fan, dot matches
   the map dot color so solar gas wind read the same on the card and the map. */
.tbx-balloon-mix { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 5px; }
.tbx-balloon-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 11.5px; }
.tbx-balloon-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Lead-capture form, same look as the leaderboard rank form */
.rank-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rank-form input { flex: 1; min-width: 180px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; color: var(--ink); }
.rank-form button { background: var(--coral); color: #fff; border: none; border-radius: 9px; padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.rank-form button:hover { background: var(--coral-dark); }
.rank-result { margin-top: 14px; font-size: 15px; }
.hp { position: absolute; left: -9999px; }

/* Place autocomplete: a relative wrap so the suggestion list anchors to the
   input, the list renders our own sanitized items, see [[page.js:bindPlaceAutocomplete]] */
.ac-wrap { position: relative; flex: 1; min-width: 180px; display: flex; }
.ac-wrap input { width: 100%; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; }
.ac-list[hidden] { display: none; }
.ac-item { padding: 9px 13px; font-size: 14px; color: var(--ink); cursor: pointer; }
.ac-item.active, .ac-item:hover { background: rgba(232,131,74,0.10); }

.foot { max-width: 940px; margin: 30px auto 50px; padding: 0 18px; font-size: 12px; color: var(--muted); }
.foot .method { margin: 8px 0; font-size: 11px; line-height: 1.5; }

/* Wrapper gives height:100% a real value so the map fills its card */
.chart-wrap { height: 400px; width: 100%; }
.chart-wrap.tall { height: 640px; }

@media (max-width: 600px) {
  .feed { padding: 0 10px; gap: 14px; margin: 14px auto; }
  .card { padding: 14px 14px 16px; }
  .card-head h2 { font-size: 16px; }
  .card-head h1 { font-size: 16px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat .n { font-size: 30px; }
  .stat.text .n { font-size: 19px; }
  /* Form: stack inputs vertically */
  .rank-form { flex-direction: column; }
  .rank-form input, .rank-form button, .ac-wrap { width: 100%; min-width: unset; }
}