/* ============================================================================
   nhelectionresults.org — built from scratch.

   Direction: an election broadsheet. White paper, black ink, hairline rules
   instead of cards and shadows. Density comes from typography and rules, not
   from boxes floating on grey. Figures are monospaced so columns of votes hold
   still as they update.

   Party colours validated against white (dataviz six checks):
     #c81e1e / #1e4fc4 — CVD dE 26.0 protan, normal-vision 35.3, both >= 3:1.
   Status green #146c43 vs amber #b26a00 always carries its text label.
   ========================================================================= */

@font-face { font-family:"PS"; src:url("/static/vendor/plex/plex-sans-400.woff2") format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"PS"; src:url("/static/vendor/plex/plex-sans-500.woff2") format("woff2");
             font-weight:500; font-display:swap; }
@font-face { font-family:"PS"; src:url("/static/vendor/plex/plex-sans-600.woff2") format("woff2");
             font-weight:600; font-display:swap; }
@font-face { font-family:"PS"; src:url("/static/vendor/plex/plex-sans-700.woff2") format("woff2");
             font-weight:700; font-display:swap; }
@font-face { font-family:"PM"; src:url("/static/vendor/plex/plex-mono-500.woff2") format("woff2");
             font-weight:500; font-display:swap; }
@font-face { font-family:"PM"; src:url("/static/vendor/plex/plex-mono-600.woff2") format("woff2");
             font-weight:600; font-display:swap; }

:root {
  --paper:#ffffff; --ink:#101112; --ink2:#54585e; --ink3:#8a8f96;
  --rule:#111214; --hair:#d8dade; --tint:#f6f6f4;
  --R:#c81e1e; --D:#1e4fc4; --Rt:#c81e1e1f; --Dt:#1e4fc41f;
  --good:#146c43; --warn:#b26a00;
  --sans:"PS",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"PM",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 16px/1.45 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:inherit}
.w{max-width:1300px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.w{padding:0 16px}}

/* ---- masthead: a nameplate, not a nav bar ------------------------------- */
.plate{border-bottom:3px solid var(--rule)}
.plate .w{display:flex;align-items:flex-end;justify-content:space-between;
          gap:24px;padding-top:18px;padding-bottom:10px;flex-wrap:wrap}
.wordmark{font-weight:700;font-size:clamp(22px,3.4vw,34px);line-height:1;
          letter-spacing:-.03em;text-decoration:none;display:block}
.wordmark span{color:var(--ink3);font-weight:400}
.plate .meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--ink2);text-align:right;line-height:1.7}

nav.sections{border-bottom:1px solid var(--hair)}
nav.sections .w{display:flex;gap:0;flex-wrap:wrap}
nav.sections a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
               text-transform:uppercase;text-decoration:none;color:var(--ink2);
               padding:11px 0;margin-right:26px;border-bottom:2px solid transparent}
nav.sections a:hover{color:var(--ink)}
nav.sections a.on{color:var(--ink);border-bottom-color:var(--rule)}

/* ---- ticker ------------------------------------------------------------- */
.ticker{background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;
        letter-spacing:.1em}
.ticker .w{display:flex;gap:22px;padding:7px 24px;flex-wrap:wrap;align-items:center}
.ticker b{font-weight:600}
.ticker .dim{color:#9aa0a8}
.live-dot{width:6px;height:6px;background:#3ddc84;display:inline-block;margin-right:7px;
          animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.notice{border-left:3px solid var(--warn);background:#fdf7ec;color:#7a4a00;
        padding:9px 14px;margin:16px 0;font-size:13px;font-weight:500}

/* ---- section heads ------------------------------------------------------ */
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
      border-bottom:2px solid var(--rule);padding-bottom:6px;margin:34px 0 0;flex-wrap:wrap}
.head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.head .note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
            text-transform:uppercase;color:var(--ink3)}

/* ---- the lead figure ---------------------------------------------------- */
.lead{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;
      padding:26px 0 20px}
@media(max-width:820px){.lead{grid-template-columns:1fr;gap:18px}}
.lead h1{margin:0;font-size:clamp(30px,5vw,52px);line-height:1.02;
         letter-spacing:-.035em;font-weight:700;max-width:16ch}
.lead p{margin:10px 0 0;color:var(--ink2);max-width:52ch;font-size:15px}
.tally{text-align:right;font-family:var(--mono)}
@media(max-width:820px){.tally{text-align:left}}
.tally .n{font-size:clamp(38px,7vw,60px);font-weight:600;line-height:.95;
          letter-spacing:-.03em;display:block}
.tally .n small{font-size:.42em;color:var(--ink3);font-weight:500}
.tally .cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--ink3);margin-top:6px}
.rulebar{height:3px;background:var(--hair);margin-top:10px;min-width:220px}
.rulebar i{display:block;height:100%;background:var(--rule);
           transition:width .8s cubic-bezier(.2,.6,.3,1)}

/* ---- race block: a table, not a card ------------------------------------ */
.race{border-bottom:1px solid var(--hair);padding:20px 0}
.race:last-child{border-bottom:0}
.race > h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:0 0 2px}
.race .sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:22px}}
.col{min-width:0}
.col + .col{border-left:1px solid var(--hair);padding-left:40px}
@media(max-width:860px){.col + .col{border-left:0;padding-left:0;
  border-top:1px solid var(--hair);padding-top:18px}}

.colhead{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pty{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
     text-transform:uppercase}
.col.R .pty{color:var(--R)} .col.D .pty{color:var(--D)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
     border:1px solid currentColor;padding:2px 6px;color:var(--ink2)}
.tag.called{color:var(--good)} .tag.close{color:var(--warn)}

.row{display:grid;grid-template-columns:1fr auto;gap:2px 14px;margin-bottom:11px}
.row .nm{font-size:15px;font-weight:500;min-width:0;overflow:hidden;
         text-overflow:ellipsis;white-space:nowrap}
.row .nm .w-{color:var(--good);font-weight:600}
.row.win .nm{font-weight:700}
.row .vt{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.row .vt b{font-weight:600;font-size:14px}
.row .vt span{color:var(--ink3)}
.bar{grid-column:1/3;height:6px;background:#eceef0;position:relative;margin-top:3px}
.bar i{position:absolute;left:0;top:0;bottom:0;transition:width .8s cubic-bezier(.2,.6,.3,1)}
.col.R .bar .v{background:var(--R)} .col.D .bar .v{background:var(--D)}
.col.R .bar .p{background:var(--Rt)} .col.D .bar .p{background:var(--Dt)}

.odds{border-top:1px solid var(--hair);margin-top:14px;padding-top:10px;
      font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:baseline}
.odds b{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink)}
.odds .who{font-weight:600;color:var(--ink)}
.foot{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink3);
      display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---- chamber strip ------------------------------------------------------ */
.chambers{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:18px 0 4px}
@media(max-width:860px){.chambers{grid-template-columns:1fr;gap:18px}}
.chambers > div + div{border-left:1px solid var(--hair);padding-left:40px}
@media(max-width:860px){.chambers > div + div{border-left:0;padding-left:0}}
.ch h4{margin:0 0 10px;font-size:14px;font-weight:700}
.ch .line{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;
          font-size:13px;margin-bottom:7px}
.ch .line .n{font-family:var(--mono);font-size:11px;color:var(--ink2)}

.more{display:flex;justify-content:space-between;align-items:center;gap:16px;
      border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);
      padding:16px 0;margin:34px 0;text-decoration:none;font-weight:600}
.more:hover{background:var(--tint)}
.more .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
         text-transform:uppercase;color:var(--ink3);font-weight:500;display:block;margin-top:3px}

footer.f{border-top:1px solid var(--hair);margin-top:40px;padding:22px 0 50px;
         color:var(--ink3);font-size:12px}
footer.f p{margin:4px 0;max-width:80ch}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;
  transition-duration:.001ms!important}}

/* ---- races page --------------------------------------------------------- */
.filters{display:flex;gap:0;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--hair);
         padding-bottom:0;margin-top:6px;position:sticky;top:0;background:var(--paper);z-index:400}
.filters .grp{display:flex;gap:0;flex-wrap:wrap}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--ink3);
  padding:11px 0;margin-right:24px;cursor:pointer}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink);border-bottom-color:var(--rule)}
.filters .seg{margin-left:auto;display:flex;border:1px solid var(--hair);align-self:center}
.filters .seg button{margin:0;padding:6px 12px;border-bottom:0}
.filters .seg button.on{background:var(--ink);color:#fff}
.filters .seg button.on.R{background:var(--R)} .filters .seg button.on.D{background:var(--D)}
@media(max-width:700px){.filters .seg{margin-left:0;width:100%}}

.count{display:flex;gap:0;border-bottom:2px solid var(--rule);margin-top:2px}
.count div{flex:1 1 0;padding:12px 0}
.count div + div{border-left:1px solid var(--hair);padding-left:16px}
.count .n{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;display:block}
.count .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--ink3);margin-top:5px}
.count .called .n{color:var(--good)} .count .close .n{color:var(--warn)}

.split{display:grid;grid-template-columns:minmax(280px,32%) 1fr;gap:34px;align-items:start;
       padding-top:22px}
.split.solo{grid-template-columns:1fr}
.split.solo .mapcol{display:none}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:24px}
  .mapcol{order:2} .grid{order:1}}
/* The offset is measured from the sticky filter bar at run time (see
   stickOffset() in site_races.html); 52px is only the fallback. The bar is
   107px tall whenever the office list wraps to two rows, so a fixed 52px
   parked the top of the map - zoom buttons and all - underneath it. */
.mapcol{position:sticky;top:var(--stick,52px)}
@media(max-width:980px){.mapcol{position:static}}
.mapbox{border:1px solid var(--hair);position:relative;background:#fbfbfa}
#nhmap{height:clamp(340px,60vh,660px)}
/* Below the map, not floating on it - an overlaid legend and a cursor-anchored
   hovercard will always collide eventually. */
/* The search box sits first in the filter row and takes the width it can get,
   dropping to full width on a phone where the office tabs already wrap. */
/* place pages: one section per office, the parties side by side */
/* A write-in the Secretary of State named: a real result under a real name,
   but not somebody who was on the ballot, so it says so. */
.wi{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink3);border:1px solid var(--hair);border-radius:2px;
    padding:1px 4px;margin-left:5px;vertical-align:1px;white-space:nowrap}

.race{margin:0 0 26px}
.rh{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;
    border-bottom:2px solid var(--rule);padding-bottom:6px}
.rh .s{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
       text-transform:uppercase;color:var(--ink3);font-weight:400;margin-left:8px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.foot a{color:var(--ink2)}

/* site-wide search, in the header on every page */
.gsearch{position:relative;max-width:var(--w,1100px);margin:0 auto;padding:0 var(--pad,20px) 8px}
.gsearch input{width:100%;font:400 13px/1.3 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--hair);border-radius:2px;padding:7px 10px}
.gsearch input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.gres{position:absolute;left:var(--pad,20px);right:var(--pad,20px);top:100%;z-index:900;
  background:var(--paper);border:1px solid var(--rule);max-height:60vh;overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.12)}
.gr{display:block;padding:8px 11px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.gr:last-child{border-bottom:0}
.gr:hover{background:var(--tint)}
.gr b{display:block;font-size:14px;font-weight:600}
.gr span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink3)}
.gr.none{color:var(--ink3);font-size:13px}

/* filters on the races page */
.fsel{font:400 12px/1.3 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--hair);border-radius:2px;padding:5px 7px;max-width:180px}
.fsel[hidden]{display:none}
.fclr{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--hair);border-radius:2px;padding:5px 8px;
  color:var(--ink2);cursor:pointer}
.fclr:hover{color:var(--ink);border-color:var(--rule)}

.srch{font:400 13px/1.3 var(--sans);color:var(--ink);background:var(--paper);
      border:1px solid var(--hair);border-radius:2px;padding:6px 9px;
      min-width:210px;flex:0 1 260px;margin-right:4px}
.srch:focus{outline:2px solid var(--ink);outline-offset:-2px}
.srch::placeholder{color:var(--ink3)}
@media (max-width:640px){.srch{flex:1 1 100%;margin:0 0 6px}}

.legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 2px 0;
        font-family:var(--mono);font-size:10px;letter-spacing:.08em;
        text-transform:uppercase;color:var(--ink2)}
.legend .r{display:flex;align-items:center;gap:6px}
/* The count of towns and wards each candidate leads, so the key answers
   "where is she winning?" without hunting for a swatch on the map. */
.legend .r b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.legend .r.n{color:var(--ink3);font-style:normal}
#detlegend{padding:0 2px 16px}
.legend i{width:12px;height:9px;display:inline-block;border:1px solid rgba(0,0,0,.15);flex:none}

/* Cards run from two names to fourteen, and a grid row is only ever as short
   as its tallest card: a four-name race sitting beside Rockingham 13 left
   about 400px of white space above and below itself. Newspaper columns pack
   instead - each card takes the height it needs and the next one starts
   directly beneath it. `columns:300px` keeps the old auto-fill behaviour of
   letting the width decide how many columns there are. */
.grid{columns:300px;column-gap:34px}
.dist{-webkit-column-break-inside:avoid;break-inside:avoid}
.dist{border-top:1px solid var(--hair);padding:15px 0;text-align:left;background:none;
      border-left:0;border-right:0;border-bottom:0;width:100%;cursor:pointer;font:inherit;color:inherit}
.dist:hover{background:var(--tint)}
.dist .t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.dist .dn{font-size:15px;font-weight:700;letter-spacing:-.015em}
.dist .dm{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
          color:var(--ink3);margin:2px 0 10px}
.dist .cr{display:grid;grid-template-columns:1fr auto;gap:1px 10px;margin-bottom:7px}
.dist .cr .n2{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dist .cr .n2.w{font-weight:700}
.dist .cr .v2{font-family:var(--mono);font-size:12px;text-align:right;white-space:nowrap}
.dist .cr .v2 span{color:var(--ink3)}
.dist .cb{grid-column:1/3;height:5px;background:#eceef0;position:relative}
.dist .cb i{position:absolute;left:0;top:0;bottom:0}
.dist .od{font-family:var(--mono);font-size:11px;color:var(--ink2);margin-top:9px;
          border-top:1px solid var(--hair);padding-top:7px}
.dist .od b{font-size:13px;font-weight:600;color:var(--ink)}

.detail{display:none} .detail.show{display:block}
.dhead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
       border-bottom:2px solid var(--rule);padding-bottom:8px;margin:26px 0 16px}
.dhead h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.025em}
.dhead .s{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.back{background:none;border:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
      text-transform:uppercase;cursor:pointer;color:var(--ink2);padding:0}
.back:hover{color:var(--ink)}
.callout{border-left:3px solid var(--ink);background:var(--tint);padding:11px 14px;
         font-weight:600;margin-bottom:16px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.callout.called{border-color:var(--good)} .callout.too_close{border-color:var(--warn)}
.callout .p{margin-left:auto;font-family:var(--mono);font-weight:600}
#detmap{height:clamp(240px,38vh,420px);border:1px solid var(--hair);margin-bottom:18px;background:#fbfbfa}
table.pt{border-collapse:collapse;width:100%;font-size:13px}
table.pt th,table.pt td{padding:7px 10px;border-bottom:1px solid var(--hair);text-align:right;white-space:nowrap}
table.pt th:first-child,table.pt td:first-child{text-align:left;position:sticky;left:0;background:var(--paper)}
table.pt thead th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
                  color:var(--ink2);border-bottom:2px solid var(--rule);background:var(--paper)}
table.pt td{font-family:var(--mono)}
table.pt td:first-child{font-family:var(--sans)}
/* A 300-row precinct table scrolled inside the page loses its header on the
   first flick, and every column is a candidate name you need to read the row.
   Give the table its own scroll box and pin the header and the precinct
   column inside it. */
.tw{overflow:auto;max-height:min(70vh,720px);overscroll-behavior:contain;
    border:1px solid var(--hair)}
table.pt thead th{position:sticky;top:0;z-index:2}
table.pt th:first-child,table.pt td:first-child{z-index:1}
table.pt thead th:first-child{z-index:3}
.leaflet-container{background:#f0f0ee}
.leaflet-tooltip.tip{background:#fff;border:1px solid var(--rule);border-radius:0;box-shadow:none;
  padding:9px 11px;font:400 13px/1.35 var(--sans);color:var(--ink);width:min(260px,84vw);white-space:normal}
.leaflet-tooltip.tip:before{display:none}
.tip .tn{font-weight:700;font-size:14px;margin-bottom:2px}
.tip .tm{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--ink3);margin-bottom:7px;display:flex;justify-content:space-between;gap:8px}
.tip .tr{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.tip .tr + .tr{border-top:1px solid var(--hair)}
.tip .tr .v{font-family:var(--mono);font-weight:600;white-space:nowrap}

/* Button children were inheriting the UA's centred alignment. */
.dist .cr .n2{text-align:left}
.dist .t,.dist .dm{text-align:left}

/* Keep the hovercard inside the map panel. In a narrow sticky column a
   cursor-anchored tooltip runs off the edge and over the race list; clamp its
   width and let Leaflet flip it to whichever side has room. */
.mapbox{isolation:isolate}
.leaflet-tooltip.tip{width:auto;max-width:min(240px,calc(100vw - 48px));
  box-shadow:0 6px 22px rgba(16,17,18,.16);z-index:650}
@media(min-width:981px){.leaflet-tooltip.tip{max-width:230px}}

/* Grid items stretch by default; pin the name to the start of its column so a
   short name sits against the left edge rather than floating in the track. */
.dist .cr .n2{justify-self:start}
.dist .cr .v2{justify-self:end}

/* Deterministic row: name left, figure right, bar beneath. Grid alignment was
   leaving short names floating in their track. */
.dist .cr{display:block;margin-bottom:8px}
.dist .crtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dist .crtop .n2{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
                 white-space:nowrap;text-align:left}
.dist .crtop .v2{flex:0 0 auto;text-align:right}
.dist .cb{display:block;margin-top:3px}

/* The hovercard was clamped so tight that names and the status line wrapped. */
.leaflet-tooltip.tip{width:max-content;min-width:200px;
  max-width:min(280px,calc(100vw - 40px))}
.tip .tn{white-space:normal;line-height:1.25}
.tip .tm{white-space:nowrap;gap:14px}
.tip .tr span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:150px}

/* Phone: New Hampshire is tall and narrow, so a full-width map panel is mostly
   empty margin either side. Cap it and centre it, and shorten it so the races
   above it are not pushed off-screen. */
@media(max-width:980px){
  .mapbox{max-width:420px;margin:0 auto}
  #nhmap{height:min(52vh,380px)}
  .legend{font-size:9px;gap:3px 12px}
  #detmap{height:min(42vh,300px)}
}
@media(max-width:520px){
  .mapbox{max-width:100%}
  #nhmap{height:300px}
}

/* Hover detail, pinned inside the map. Cursor-anchored tooltips get
   repositioned by Leaflet on every mousemove, so no clamp survives; a panel
   inside the container cannot escape it by construction. */
.mapinfo{position:absolute;top:10px;right:10px;z-index:600;
  background:#fff;border:1px solid var(--rule);padding:9px 11px;
  font:400 13px/1.35 var(--sans);color:var(--ink);
  width:min(230px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto;
  box-shadow:0 6px 22px rgba(16,17,18,.14);pointer-events:none}
.mapinfo .tn{font-weight:700;font-size:14px;margin-bottom:2px}
.mapinfo .tm{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:7px;
  display:flex;justify-content:space-between;gap:8px}
.mapinfo .tr{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.mapinfo .tr + .tr{border-top:1px solid var(--hair)}
.mapinfo .tr .v{font-family:var(--mono);font-weight:600;white-space:nowrap}
@media(max-width:520px){.mapinfo{position:static;width:100%;margin-top:8px;
  max-height:none;box-shadow:none}}