/* The live Austin heat map on Market Statistics (owner 2026-10-15, from the approved mockup;
   heatlive.js). Agent IV's own tokens (styles.css) for everything around the map — the switch, the
   search, the side panel, the ZIP card, the sheet, compare — so it follows light / dark. The map
   itself, its key, its labels and its notes stay the PDF's fixed cream paper and fills in both looks,
   like every other map in the app (maps.css); the fills are the server's, never the agent's brand. */

/* The small-sample warning ("only 5 leases"): small bold text, so in light mode a darker amber than
   --warn (#A8730C was 3.9:1 on the card; this is 5.0:1 or better on the card and the panel). Dark mode
   keeps the theme's --warn, which already reads. */
:root { --hl-few: #8A5B06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl-few: var(--warn); } }
:root[data-theme="dark"] { --hl-few: var(--warn); }

/* ---- the page: wide while the heat map is chosen (Draw your area's precedent) ---- */
#charts-card.hl-wide { max-width: 1120px; }
#charts-card.hl-wide form { gap: 0; }
.hl-wide .layouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-wide .layout.heat { grid-column: auto; }
@media (max-width: 860px) {
  .hl-wide .layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-wide .layout.heat { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .hl-wide .layouts { grid-template-columns: minmax(0, 1fr); } }

/* Phones: ~16px from the screen's edge to the content (Compare Homes' precedent for a wide tool page). */
@media (max-width: 560px) {
  body.hl-on { padding: 0.75rem 0.5rem; }
  #charts-card.hl-wide { padding: 1.3rem calc(1rem - 0.5rem - 1px) 1.2rem; }
  .hl-wide h1 { font-size: 1.7rem; }
  .hl-wide .tagline { margin-bottom: 1.1rem; }
}

/* ---- the live map section ---- */
.hl { text-align: left; margin: 0.2rem 0 1.2rem; }
.hl[hidden] { display: none; }
/* The short line said to a screen reader (heatlive.js say()): out of sight. */
.hl-said { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hl-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem;
  margin: 0 0 0.7rem; }

/* The map switch: the app's segmented pill (market.html .view-toggle). */
.hl-switch { display: inline-flex; padding: 3px; border: 1.5px solid var(--field-line); border-radius: 999px;
  background: var(--field); max-width: 100%; box-sizing: border-box;
  overflow-x: auto; scrollbar-width: none; }   /* a safety net: a long label can never push the page sideways */
.hl-switch::-webkit-scrollbar { display: none; }
.hl-switch button { width: auto; margin: 0; border: none; background: transparent; color: var(--muted);
  font-weight: 700; font-size: 0.84rem; padding: 0.48rem 0.95rem; border-radius: 999px; line-height: 1;
  white-space: nowrap; }
.hl-switch button[aria-checked="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.hl-switch button:hover:not([aria-checked="true"]) { background: transparent; color: var(--ink); }
.hl-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hl-switch .sm { display: none; }
/* The figures on their way (heat-speed): the switch waits for them, and looks it. */
.hl-switch button[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.hl-switch button[aria-disabled="true"]:hover:not([aria-checked="true"]) { color: var(--muted); }

/* Find a ZIP or city. It gives way a little (to 240px) so it keeps its place beside the six maps' switch
   on a computer (the sixth, rent change, 2026-10-15), and is never wider than it was (320px). */
.hl-find { position: relative; flex: 1 1 240px; max-width: 320px; min-width: 0; }
.hl-find svg { position: absolute; left: 0.75rem; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.hl-find input { width: 100%; box-sizing: border-box; padding: 0.6rem 2.3rem 0.6rem 2.2rem; font-size: 0.92rem;
  border-radius: 999px; -webkit-appearance: none; appearance: none; }
/* Chrome's own blue clear-search × is hidden; the page draws its own in the app's ink. */
.hl-find input::-webkit-search-cancel-button, .hl-find input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.hl-find .hl-clear { position: absolute; right: 0.35rem; top: 50%; width: 28px; height: 28px; margin: -14px 0 0; padding: 0;
  border-radius: 50%; background: transparent; color: var(--muted); font: 700 18px/28px sans-serif; text-align: center; }
.hl-find .hl-clear:hover:not(:disabled) { background: var(--pill); color: var(--ink); }
.hl-find .hl-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hl-find .hl-clear[hidden] { display: none; }
.hl-suggest { z-index: 1100; max-height: min(22rem, 70vh); }   /* a group of six plus its "+N more" row fits */
.hl-suggest li { display: flex; align-items: baseline; gap: 0.5rem; }
.hl-suggest li b { font-weight: 800; color: var(--ink); }
.hl-suggest li .hl-sg-val { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  font-size: 0.85rem; flex: none; white-space: nowrap; }
/* A long place ("Georgetown · Williamson County" at 377px) is cut short; the ZIP and its figure stay whole
   on one line (review 2026-10-15: "0.8 mo" broke over two). */
.hl-suggest li b { flex: none; }
.hl-suggest li > span:not(.hl-sg-val) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-suggest li.hl-sg-head { cursor: default; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.9rem 0.2rem; }
.hl-suggest li.hl-sg-head:hover { background: none; }
.hl-suggest li.hl-sg-none, .hl-suggest li.hl-sg-more { cursor: default; color: var(--muted); font-size: 0.85rem; }
.hl-suggest li.hl-sg-more { padding-top: 0.35rem; padding-bottom: 0.45rem; font-size: 0.78rem; font-style: italic; }
.hl-suggest li.hl-sg-more:hover { background: none; }

/* The map and the side panel. The map's height is one number per size (--hl-map-h): the loading and
   "couldn't load" cover takes the same. */
.hl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: stretch; }
.hl-mapwrap { position: relative; min-width: 0; --hl-map-h: 600px; }
.hl-map { height: var(--hl-map-h); margin: 0; border-radius: 10px; border: 1.5px solid var(--panel-line); background: #F5F1E8; }
.hl-map.leaflet-container { background: #F5F1E8; outline: none; }
/* The ring only after a key: Leaflet focuses the map on a click or tap too (heatlive.js sets .hl-ptr). */
.hl-map.leaflet-container:focus-visible:not(.hl-ptr) { box-shadow: 0 0 0 2px var(--accent); }
.hl-map .leaflet-control-zoom { margin: 10px 10px 0 0; }
.hl-map .leaflet-control-attribution { font-size: 10px; }

/* Whole area / Central Austin: the module's control dress (maps.css .aiv-ctl), top left. */
.hl-views { position: absolute; top: 10px; left: 10px; z-index: 800; display: flex; overflow: hidden; }
.hl-views button { width: auto; margin: 0; padding: 0.42rem 0.7rem; border-radius: 0; background: #FBF9F4;
  color: #2A2522; font-size: 0.76rem; font-weight: 700; line-height: 1.1; }
.hl-views button + button { border-left: 1px solid #DED5C2; }
.hl-views button:hover:not(:disabled) { background: #F2EDE2; color: #2A2522; }
.hl-views button:focus-visible { outline: 2px solid #82632B; outline-offset: -2px; }

/* Loading, or why the map couldn't load: over the map, on its own cream. */
.hl-state { position: absolute; left: 0; right: 0; top: 0; height: var(--hl-map-h); z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; border-radius: 10px;
  background: rgba(245, 241, 232, 0.92); }
.hl-state[hidden] { display: none; }
.hl-state-card { max-width: 24rem; padding: 0.9rem 1.1rem; border-radius: 10px; background: #FBF9F4; border: 1px solid #DED5C2;
  box-shadow: 0 1px 4px rgba(42, 37, 34, 0.18); color: #2A2522; text-align: center; font-size: 0.9rem; line-height: 1.45; }
.hl-state-card p { margin: 0; }
.hl-state-card a { color: #82632B !important; }
.hl-state-card button { width: auto; margin: 0.7rem 0 0; padding: 0.5rem 1rem; font-size: 0.86rem; border-radius: 999px;
  background: #2A2522; color: #FBF9F4; }
.hl-state-card button:hover:not(:disabled) { background: #3D3733; }
.hl-spin { display: inline-block; width: 18px; height: 18px; margin-bottom: 0.4rem; border-radius: 50%;
  border: 2.5px solid #DED5C2; border-top-color: #82632B; animation: hl-spin 0.9s linear infinite; }
@keyframes hl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hl-spin { animation-duration: 3s; } }
/* Nothing to drive while it loads: the key, the views and Download wait. */
.hl.hl-busy .hl-views, .hl.hl-busy .hl-legend:empty { visibility: hidden; }
/* The map drawn, its figures on their way (heat-speed): a light note at the top, the map in view and
   movable under it (the switch, cards and Download wait for the figures). */
.hl-state.figures { background: transparent; align-items: flex-start; padding-top: 3.4rem; pointer-events: none; }
.hl-state-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.85rem; border-radius: 999px;
  background: rgba(251, 249, 244, 0.96); border: 1px solid #DED5C2; box-shadow: 0 1px 4px rgba(42, 37, 34, 0.18);
  color: #2A2522; font-size: 0.84rem; font-weight: 700; }
.hl-state-pill .hl-spin { width: 14px; height: 14px; margin: 0; border-width: 2px; }

/* A map not ready yet: its words on the map itself, the basemap under them. */
.hl-wait { position: absolute; left: 0; right: 0; top: 0; height: var(--hl-map-h); z-index: 780; display: flex;
  align-items: flex-start; justify-content: center; padding: 3.6rem 1rem 1rem; box-sizing: border-box; pointer-events: none; }
.hl-wait[hidden] { display: none; }
.hl-wait-card { max-width: 21rem; padding: 0.8rem 1rem 0.85rem; border-radius: 10px; background: rgba(251, 249, 244, 0.97);
  border: 1px solid #DED5C2; box-shadow: 0 1px 6px rgba(42, 37, 34, 0.22); color: #2A2522; text-align: center;
  pointer-events: auto; }
.hl-wait-card b { display: block; font-size: 0.92rem; font-weight: 800; }
.hl-wait-card p { margin: 0.3rem 0 0; font-size: 0.86rem; line-height: 1.45; }
.hl-wait-card .hl-wait-fine { font-size: 0.74rem; color: #6E6558; }

/* The key: fixed cream like the map (maps.css .aiv-legend), bottom right, each band a button. */
.hl-legend { position: absolute; right: 10px; bottom: 10px; z-index: 800; width: 238px; box-sizing: border-box;
  padding: 0.55rem 0.5rem 0.45rem; border-radius: 8px; background: rgba(251,249,244,0.96); border: 1px solid #DED5C2;
  box-shadow: 0 1px 4px rgba(42,37,34,0.18); color: #2A2522; text-align: left; }
.hl-legend:empty { display: none; }
.hl-lg-title { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.3rem; font-size: 0.8rem; font-weight: 800; }
.hl-lg-period { padding: 0.05rem 0.3rem 0.35rem; font-size: 0.7rem; font-style: italic; color: #6E6558; }
.hl-lg-wait { margin: 0.25rem 0.3rem 0.15rem; font-size: 0.76rem; line-height: 1.4; color: #2A2522; }
.hl-bands { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.hl-band { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 0.5rem;
  width: 100%; margin: 0; padding: 0.26rem 0.35rem; border-radius: 6px; background: transparent; color: #2A2522;
  font-size: 0.78rem; font-weight: 600; text-align: left; line-height: 1.2; transition: opacity 0.12s; }
.hl-band:hover:not(:disabled) { background: #EFE8D9; color: #2A2522; }
.hl-band:focus-visible { outline: 2px solid #82632B; outline-offset: -1px; }
.hl-band i { display: block; width: 20px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(42,37,34,0.18); }
.hl-band em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: #6E6558; font-variant-numeric: tabular-nums; }
.hl-band.on { background: #EFE6D2; box-shadow: inset 0 0 0 1.5px #82632B; }
.hl-band.on em { color: #2A2522; }
.hl-legend.filtering .hl-band:not(.on) { opacity: 0.42; }
.hl-band:disabled { cursor: default; opacity: 0.5; }
/* The farm ZIPs' dotted outline, named (only for an agent with farm ZIPs on the map). */
.hl-lg-farm { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem 0.1rem; font-size: 0.74rem;
  font-weight: 600; color: #2A2522; }
.hl-lg-farm svg { flex: none; overflow: visible; }
.hl-lg-farm line { stroke-linecap: round; }
.hl-lg-farm line.c { stroke: #FFFFFF; stroke-width: 5; }
.hl-lg-farm line.i { stroke: #2A2522; stroke-width: 2; stroke-dasharray: 0.1 4.6; }
.hl-lg-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.35rem 0.3rem 0;
  margin-top: 0.25rem; border-top: 1px solid #E2DBCA; font-size: 0.7rem; color: #6E6558; }
.hl-lg-foot b { color: #2A2522; }
.hl-lg-foot button { width: auto; margin: 0; padding: 0.15rem 0.5rem; border-radius: 999px; background: #2A2522;
  color: #FBF9F4; font-size: 0.7rem; font-weight: 700; }
.hl-lg-foot button:hover:not(:disabled) { background: #3D3733; }
/* A phone or tablet: the picked ZIPs under the key (a computer lists them in the side panel). */
.hl-lg-picks { margin-top: 0.45rem; padding: 0.45rem 0.3rem 0.1rem; border-top: 1px solid #E2DBCA; }
.hl-lg-picks p { margin: 0 0 0.4rem; font-size: 0.7rem; color: #6E6558; }
.hl-lg-picks div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hl-lg-picks button { display: inline-flex; align-items: baseline; gap: 0.35rem; width: auto; margin: 0; padding: 0.38rem 0.6rem;
  border-radius: 999px; background: #FFFFFF; color: #2A2522; box-shadow: inset 0 0 0 1px #CFC4AE; font-size: 0.76rem;
  line-height: 1.1; }
.hl-lg-picks button b { font-weight: 800; }
.hl-lg-picks button span { font-weight: 600; color: #6E6558; font-variant-numeric: tabular-nums; }
.hl-lg-picks button:hover:not(:disabled) { background: #EFE8D9; color: #2A2522; }
@media (min-width: 1001px) { .hl-lg-picks { display: none; } }

/* Labels on the map: the PDF's Helvetica, each in the PDF's text colour and halo for its fill (the
   server's legend row: heatlive.js sets color and --halo); ink on the paper. */
.hl-lbl-icon { background: none; border: 0; }
.hl-lbl { --halo: #F5F1E8; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); text-align: center;
  white-space: nowrap; pointer-events: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #242424;
  line-height: 1.12; text-shadow: 0 0 2px var(--halo), 0 0 2px var(--halo), 0 0 3px var(--halo); }
.hl-lbl b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; }
.hl-lbl span { display: block; font-size: 10.5px; font-weight: 400; }
.hl-lbl.pill { padding: 0.12rem 0.45rem; border-radius: 999px; background: #2A2522; color: #FBF9F4; text-shadow: none;
  box-shadow: 0 0 0 1.5px #FFFFFF, 0 1px 5px rgba(0,0,0,0.4); }
.hl-lbl.pill.sel { background: #82632B; box-shadow: 0 0 0 2px #FFFFFF, 0 1px 6px rgba(0,0,0,0.45); }
.hl-lbl.pill b { font-size: 11px; }
.hl-lbl.pill span { font-size: 10px; opacity: 0.9; }
/* A tag moved off its ZIP (neighbours' tags would touch): a white-cased leader back to a dot on the ZIP. */
.hl-lead { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.hl-lead line { stroke-linecap: round; }
.hl-lead line.c { stroke: #FFFFFF; stroke-width: 3.8; }
.hl-lead line.i { stroke: #2A2522; stroke-width: 1.7; }
.hl-lead circle { fill: #2A2522; stroke: #FFFFFF; stroke-width: 1.6; }
.hl-lead.sel line.i { stroke: #82632B; }
.hl-lead.sel circle { fill: #82632B; }
.hl-city { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: italic 500 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4A4540;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; }
.hl-city.big { font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.01em; }
.hl-city.dot { width: 4px; height: 4px; border-radius: 50%; background: #242424; box-shadow: 0 0 0 1.2px #F5F1E8; }
.hl-hwy { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 700 10px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #6A6359;
  text-shadow: 0 0 2px #F5F1E8, 0 0 2px #F5F1E8, 0 0 3px #F5F1E8, 0 0 3px #F5F1E8; }

/* "In your farm" on a farm ZIP's card and hover card. */
.hl-farm-tag { display: inline-block; margin-left: 0.4rem; padding: 0.06rem 0.42rem; border-radius: 999px;
  background: var(--pill); color: var(--pill-fg); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
  vertical-align: 1px; white-space: nowrap; }

/* The hover card (a computer): the theme's panel, like the module's popup. */
.hl-hover { position: absolute; left: 1.5px; top: 1.5px; z-index: 900; pointer-events: none; border-radius: 10px;
  border: 1.5px solid var(--accent); background: var(--panel); color: var(--ink); box-shadow: 0 12px 30px rgba(42,37,34,0.28); }
.hl-hover[hidden] { display: none; }
.hl-tipc { width: 232px; padding: 0.55rem 0.7rem 0.6rem; font-size: 0.78rem; line-height: 1.3; }
.hl-tipc .t1 { display: flex; align-items: baseline; gap: 0.45rem; }
.hl-tipc .t1 b { font-size: 1rem; font-weight: 800; }
.hl-tipc .t1 span { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-tipc .t1 .hl-farm-tag { margin-left: auto; color: var(--pill-fg); overflow: visible; font-size: 0.6rem; }
.hl-tipc table { width: 100%; border-collapse: collapse; margin-top: 0.35rem; display: table; }
.hl-tipc td { padding: 0.12rem 0; color: var(--muted); }
.hl-tipc td:first-child { white-space: nowrap; }
.hl-tipc td + td { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-tipc tr.on td { color: var(--ink); font-weight: 800; }
.hl-tipc tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.4rem; }
.hl-tipc .t3 { margin-top: 0.35rem; padding-top: 0.3rem; border-top: 1px solid var(--soft-line); color: var(--faint);
  font-size: 0.72rem; line-height: 1.4; }
.hl-tipc .t3 b { color: var(--ink); }

/* ---- the side panel (a computer) ---- */
.hl-side { height: 600px; box-sizing: border-box; overflow: auto; border: 1.5px solid var(--panel-line); border-radius: 12px;
  background: var(--soft); padding: 0.9rem 0.95rem; }
.hl-side.has-card { border-color: var(--accent); }
.hl-side h3 { margin: 0 0 0.15rem; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.hl-side .hl-sub { margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--muted); }
.hl-side-wait { margin: 0.2rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink); }
.hl-how { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.45rem; }
.hl-how li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.5rem; align-items: start;
  font-size: 0.82rem; line-height: 1.4; color: var(--ink); }
.hl-how svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; margin-top: 0.05rem; }
.hl-tophead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.4rem;
  padding-top: 0.85rem; border-top: 1px solid var(--soft-line); }
.hl-tophead h3 { margin: 0; }
.hl-mini { display: inline-flex; padding: 2px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--field); }
.hl-mini button { width: auto; margin: 0; white-space: nowrap; padding: 0.22rem 0.55rem; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 0.7rem; font-weight: 700; line-height: 1.1; }
.hl-mini button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.hl-mini button:hover:not([aria-pressed="true"]) { background: transparent; color: var(--ink); }
.hl-top { display: grid; gap: 0.3rem; }
.hl-top button { display: grid; grid-template-columns: 1.3rem auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem;
  width: 100%; margin: 0; padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--panel);
  border: 1px solid var(--panel-line); color: var(--ink); font-size: 0.84rem; font-weight: 600; text-align: left; }
.hl-top button:hover:not(:disabled) { background: var(--panel); border-color: var(--accent); color: var(--ink); }
.hl-top i { font-style: normal; font-size: 0.72rem; font-weight: 800; color: var(--accent); }
.hl-top b { font-weight: 800; }
.hl-top span { color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-top em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- the ZIP card (side panel on a computer, bottom sheet on a phone) ---- */
.zc { text-align: left; color: var(--ink); }
.zc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.zc-zip { font-family: var(--serif); font-size: 1.75rem; line-height: 1.05; letter-spacing: 0.01em; }
.zc-area { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.zc-area .hl-farm-tag { margin-left: 0.45rem; }
.zc-x { width: 28px; height: 28px; margin: 0; padding: 0; flex: none; border-radius: 50%; background: var(--panel);
  color: var(--ink); font: 700 18px/28px sans-serif; box-shadow: inset 0 0 0 1px var(--panel-line); }
.zc-x:hover:not(:disabled) { background: var(--pill); color: var(--ink); }
.zc-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.4rem; margin: 0.6rem 0 0.65rem;
  font-size: 0.78rem; color: var(--muted); }
.zc-rank b { display: inline-block; padding: 0.14rem 0.5rem; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font-size: 0.74rem; font-weight: 800; }
.zc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
/* Six maps' tiles and the median sold price: that last one has the row to itself, full width. */
.zc-tiles > .zc-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.zc-tile { display: block; width: 100%; margin: 0; padding: 0.5rem 0.6rem 0.5rem; border-radius: 9px; text-align: left;
  background: var(--panel); border: 1px solid var(--panel-line); color: var(--ink); font-weight: 400; line-height: 1.2;
  box-sizing: border-box; }
button.zc-tile:hover:not(:disabled) { background: var(--panel); border-color: var(--accent); color: var(--ink); }
.zc-tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.zc-tile span { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--muted); line-height: 1.2; }
.zc-tile b { display: block; margin-top: 0.15rem; font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.zc-tile small { display: block; margin-top: 0.1rem; font-size: 0.68rem; color: var(--faint); }
.zc-tile small.few { color: var(--hl-few); font-weight: 700; }
.zc-btns { display: grid; gap: 0.45rem; margin-top: 0.8rem; }
/* The shortcuts are links (they open Market Reports or My Farm, pre-filled): dressed as the buttons. */
.zc-btns .zc-go { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 0.7rem 0.8rem; font-size: 0.88rem;
  font-weight: 600; text-align: center; text-decoration: none; border-radius: 8px; background: var(--btn-bg); color: var(--btn-fg); }
.zc-btns .zc-go:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
/* the middle button ("Add this map to my PDF") a little wider, so it wraps to two lines, not three */
.zc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.4rem; }
.zc-row > * { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0;
  padding: 0.55rem 0.35rem; font-size: 0.78rem; font-weight: 600; line-height: 1.15; text-align: center;
  text-decoration: none; border-radius: 8px; }
.hl-ghost, .zc-row > * { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hl-ghost:hover:not(:disabled), .zc-row > *:hover:not(:disabled) { background: var(--panel); color: var(--accent); }
.zc-row button.in { background: var(--accent); color: var(--on-accent); }
.zc-btns a:focus-visible, .zc-row > *:focus-visible, .zc-tile:focus-visible, .hl-top button:focus-visible,
.hl-dl:focus-visible, .zc-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zc-fine { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--faint); line-height: 1.35; }

/* Under the map: the date line and Texas notice, and Download this map. */
.hl-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem 1.2rem; margin-top: 0.6rem; }
.hl-caption { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted); font-style: italic; max-width: 46rem; }
.hl-dl { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; width: auto; margin: 0; padding: 0.55rem 0.95rem;
  font-size: 0.85rem; font-weight: 700; border-radius: 999px; }
.hl-dl svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hl.hl-busy .hl-dl, .hl.hl-pre .hl-dl { visibility: hidden; }

/* ---- compare ---- */
.hl-compare { margin-top: 1rem; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--soft);
  padding: 0.85rem 0.95rem 0.95rem; }
.hl-compare[hidden] { display: none; }
.hl-cmp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap;
  margin: 0 0 0.65rem; }
.hl-cmp-head h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.hl-cmp-head p { margin: 0; font-size: 0.76rem; color: var(--muted); }
.hl-cmp-head button { width: auto; margin: 0 0 0 auto; padding: 0.3rem 0.75rem; font-size: 0.76rem; font-weight: 700;
  border-radius: 999px; background: var(--pill); color: var(--pill-fg); }
.hl-cmp-head button:hover:not(:disabled) { background: var(--soft-line); color: var(--pill-fg); }
.hl-cmp { display: grid; grid-template-columns: minmax(5.2rem, 1.05fr) repeat(var(--n, 3), minmax(0, 1fr));
  border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.hl-cmp > div { padding: 0.4rem 0.7rem; border-top: 1px solid var(--soft-line); min-width: 0; font-variant-numeric: tabular-nums; }
.hl-cmp > .h { border-top: 0; }
.hl-cmp > .l { font-size: 0.76rem; color: var(--muted); font-weight: 600; line-height: 1.25; }
.hl-cmp > .v { font-size: 0.95rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
/* A sold price is the widest figure: one size down on a phone, never broken across lines. */
.hl-cmp > .v.money { white-space: nowrap; }
.hl-cmp > .v small { display: block; font-size: 0.66rem; font-weight: 600; color: var(--faint); margin-top: 0.1rem; }
.hl-cmp > .v small.few { color: var(--hl-few); }
.hl-cmp > .on { background: var(--soft); }
.hl-cmp > .l.on { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.hl-cmp .zh { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.3rem; }
.hl-cmp .zh b { display: block; font-size: 1rem; font-weight: 800; color: var(--ink); }
.hl-cmp .zh span { display: block; font-size: 0.68rem; color: var(--muted); font-weight: 600; line-height: 1.2; }
.hl-cmp .zh button { width: 22px; height: 22px; margin: 0; padding: 0; flex: none; border-radius: 50%;
  background: var(--soft); color: var(--muted); font: 700 15px/22px sans-serif; }
.hl-cmp .zh button:hover:not(:disabled) { background: var(--pill); color: var(--danger); }
.hl-cmp-one { margin: 0; font-size: 0.86rem; color: var(--ink); }
.hl-cmp-fine { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--faint); }

/* ---- the report block under it: "Make it a report" while the heat map is chosen ---- */
.hl-h2 { display: none; }
.hl-wide .hl-pdf { margin: 0.4rem 0 0; padding: 1rem 1.05rem 1.1rem; border: 1.5px solid var(--panel-line); border-radius: 12px; }
.hl-wide .hl-h2 { display: block; margin: 0 0 0.3rem; font-size: 1rem; font-weight: 800; color: var(--ink); }
.hl-wide .heat-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 1.2rem; }
.hl-wide .hl-pdf #submit { width: auto; min-width: 18rem; margin-top: 1rem; }
.hl-pdf .heat-metric span { transition: color 0.2s; }
.hl-pdf .heat-metric.flash span { color: var(--accent); }

/* ---- toast + the download dialog ---- */
.hl-toast { position: fixed; top: 14px; left: 50%; z-index: 2000; transform: translate(-50%, -160%); max-width: calc(100vw - 32px);
  width: max-content; box-sizing: border-box; padding: 0.7rem 1rem; border-radius: 10px; background: var(--btn-bg);
  color: var(--btn-fg); font-size: 0.86rem; font-weight: 600; line-height: 1.4; text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3); pointer-events: none; visibility: hidden;
  transition: transform 0.22s ease-out, visibility 0s linear 0.22s; }
.hl-toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform 0.22s ease-out; }
.hl-modal { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: var(--overlay); }
.hl-modal-card { width: 100%; max-width: 420px; box-sizing: border-box; padding: 1.4rem 1.4rem 1.2rem; border-radius: 3px;
  background: var(--panel); color: var(--ink); border-top: 3px solid var(--accent); text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.hl-modal-card h3 { margin: 0 0 0.5rem; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.hl-modal-card p { margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.hl-modal-card p b { color: var(--ink); }
.hl-modal-btns { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.hl-modal-btns button { width: auto; margin: 0; padding: 0.65rem 1.1rem; font-size: 0.9rem; }
.hl-modal-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the stacked layout (a phone, a tablet, a narrow window — up to 1000px): the map full width, the key
   under it, the card in a bottom sheet. Wider than that, the side panel leaves the map 600px or more. ---- */
@media (max-width: 1000px) {
  .hl-grid { grid-template-columns: minmax(0, 1fr); }
  .hl-side { display: none; }
  .hl-mapwrap { --hl-map-h: 520px; }
  .hl-map { border-radius: 10px 10px 0 0; }
  .hl-state { border-radius: 10px 10px 0 0; }
  .hl-legend { position: static; width: auto; border-radius: 0 0 10px 10px; border: 1.5px solid var(--panel-line);
    border-top: 0; box-shadow: none; background: #FBF9F4; padding: 0.55rem 0.55rem 0.5rem; }
  .hl-legend:empty { display: block; min-height: 2.4rem; }
  .hl-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 0.4rem; }
  .hl-band { padding: 0.38rem 0.35rem; }
}
/* On a tablet the sheet keeps a card's width instead of spanning the screen. */
@media (min-width: 561px) and (max-width: 1000px) {
  .hl-sheet.aiv-sheet { max-width: 560px; margin: 0 auto; }
}
/* A short screen (a phone turned sideways, 844 × 390): the sheet at most 55% of it, so a tapped ZIP has
   a strip of map above it (review 2026-10-15: at 70% it covered the ZIP). heatlive.js sheetShare() too. */
@media (max-height: 500px) {
  .hl-sheet.aiv-sheet { max-height: 55vh; }
}
@media (max-width: 860px) {
  .hl-mapwrap { --hl-map-h: 440px; }
  .hl-wide .heat-metrics { grid-template-columns: minmax(0, 1fr); }
  .hl-wide .hl-pdf #submit { width: 100%; min-width: 0; }
}
/* The short map names from 860px down: the six long ones need ~710px (they needed ~600 with five;
   a phone turned sideways is 667). */
@media (max-width: 860px) {
  .hl-head { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .hl-switch { display: flex; width: 100%; }
  .hl-switch button { flex: 1 1 auto; padding: 0.5rem 0.3rem; font-size: 0.76rem; }
  .hl-switch .lg { display: none; }
  .hl-switch .sm { display: inline; }
  .hl-find { flex: 1 1 auto; max-width: none; }
}
@media (max-width: 560px) {
  /* A phone: the six maps in two rows of three, the same pill buttons in a rounded field — every map
     in sight, nothing scrolled sideways (377px leaves the switch 345). */
  .hl-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border-radius: 18px; }
  .hl-switch button { padding: 0.55rem 0.25rem; }
  .hl-mapwrap { --hl-map-h: 420px; }
  .hl-views button { padding: 0.45rem 0.6rem; font-size: 0.74rem; }
  .hl-band { font-size: 0.74rem; gap: 0.35rem; grid-template-columns: 16px minmax(0, 1fr) auto; }
  .hl-band i { width: 16px; height: 12px; }
  .hl-foot { flex-direction: column; align-items: stretch; }
  .hl-dl { justify-content: center; }
  .hl-compare { padding: 0.75rem 0.6rem 0.8rem; }
  .hl-cmp-head p { order: 3; flex-basis: 100%; }
  .hl-cmp { grid-template-columns: minmax(5rem, 0.9fr) repeat(var(--n, 3), minmax(0, 1fr)); }
  .hl-cmp > div { padding: 0.45rem 0.4rem; }
  .hl-cmp > .l { font-size: 0.7rem; }
  .hl-cmp > .v { font-size: 0.86rem; }
  .hl-cmp > .v.money { font-size: 0.78rem; }
  /* the ZIP's × sits in the header cell's top-right corner, over the ZIP, so a narrow column still fits it */
  .hl-cmp > .h { position: relative; padding-top: 1.5rem; }
  .hl-cmp .zh { display: block; }
  .hl-cmp .zh b { font-size: 0.9rem; }
  .hl-cmp .zh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hl-cmp .zh button { position: absolute; top: 0.3rem; right: 0.3rem; width: 20px; height: 20px; font: 700 14px/20px sans-serif; }
  .hl-wide .hl-pdf { padding: 0.9rem 0.8rem 1rem; }
}

/* The narrowest phones (320–370px): the compare table a size smaller, so three ZIPs still fit. */
@media (max-width: 370px) {
  .hl-compare { padding-left: 0.45rem; padding-right: 0.45rem; }
  .hl-cmp { grid-template-columns: minmax(4.6rem, 0.85fr) repeat(var(--n, 3), minmax(0, 1fr)); }
  .hl-cmp > div { padding: 0.42rem 0.3rem; }
  .hl-cmp > .h { padding-top: 1.5rem; }
  .hl-cmp > .l { font-size: 0.66rem; }
  .hl-cmp > .v { font-size: 0.76rem; }
  .hl-cmp > .v.money { font-size: 0.7rem; }
  .hl-cmp .zh b { font-size: 0.82rem; }
}
@media (max-width: 340px) { .hl-cmp > .v { font-size: 0.7rem; } .hl-cmp > .v.money { font-size: 0.64rem; } }

/* The sheet's card: a touch tighter. */
.hl-sheet .zc-zip { font-size: 1.55rem; }
.hl-sheet .zc-rank { margin: 0.45rem 0 0.55rem; }
.hl-sheet .zc-tile { padding: 0.42rem 0.55rem; }
.hl-sheet .zc-tile b { font-size: 1.02rem; }
.hl-sheet .zc-btns { margin-top: 0.65rem; }
.hl-sheet .aiv-sheet-body { padding: 0 1rem 1rem; }