/* GRANITE_VERSION: 2026-10-09.2 */
/* THE DISTRICT MAP (map v1): the stylesheet map.js draws against. A page that
   mounts the map links /map.css and /map.js and nothing else; every rule here
   is under .gm, the class mount() gives its element, so nothing here reaches
   the rest of the page.

   ITS OWN FILE, NOT A REGION OF APP.CSS. Only the pages that mount the map
   need it (Officials' My Town tab and the town pages), so it is fetched there
   and nowhere else, rather than added to the stylesheet every bill and member
   page loads; and it is the module's, beside map.js, so the two travel and
   change together. It reads the page's tokens and defines none of its own
   colours: every colour is a site token or a mix of two, so the theme switch,
   dark mode and any later change of ink re-colour the map without touching it.

   SIZES IN REM, ON D3'S SCALE (8 October 2026): nothing under 13px, and 13px
   only in capitals and figures. Written here as values rather than through
   --t-sm and its kin, which on dev still name 12px and 14px. The labels on
   the map are sized by map.js in the map's own units (--n-*), from the same
   rem values, so they keep their size on screen at any zoom and grow with
   the browser's text setting.

   Ported from the approved prototype (private/design/polish/map_v2/map.css,
   its kit copy proto/css/districtmap.css and round two's districtmap2.css),
   less the zoom hint (the person, 8 October: no hint) and the half split
   (equal stripes were chosen). */

/* PARTY FILLS. A district is filled with its party's ink, mixed toward the
   card's surface by --tint. The inks are D5's, chosen to differ in LIGHTNESS
   as well as hue, which is what lets party survive greyscale and red-green
   colour blindness. At 85% the pair is 1.50:1 in light and 1.70:1 in dark
   (measured, map_v2's README). */
.gm{--tint:85%;--stripe:4;
  --gm-ui:1rem;--gm-sm:.875rem;--gm-label:.8125rem;
  --fill-R:color-mix(in srgb,var(--rep) var(--tint),var(--surface));
  --fill-D:color-mix(in srgb,var(--dem) var(--tint),var(--surface));
  --fill-I:color-mix(in srgb,var(--ind) var(--tint),var(--surface));
  --fill-0:var(--surface);
  font-family:var(--sans);color:var(--ink)}
.gm .gmvh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Controls: the kind of district and the labels, each the site's boxed
   segmented look, and the floterial toggle, which only State House has. */
.gm .gmctl{display:flex;flex-direction:column;gap:.625rem;margin:0 0 .75rem}
.gm .gmrow{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.gm .gmlabhead{font-size:var(--gm-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.gm .gmseg{display:flex;flex-wrap:wrap;border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--surface)}
.gm .gmseg label{position:relative;padding:.5rem .75rem;cursor:pointer;border-left:1px solid var(--rule);
  font-size:var(--gm-ui);font-weight:500;line-height:1.3;color:var(--ink-2)}
.gm .gmseg label:first-child{border-left:0}
.gm .gmseg input{position:absolute;opacity:0;pointer-events:none}
.gm .gmseg label:has(input:checked){background:var(--pine-soft);color:var(--ink);font-weight:600;
  box-shadow:inset 0 -3px 0 var(--pine)}
.gm .gmseg label:has(input:focus-visible){outline:2px solid var(--pine);outline-offset:-2px}
@media (forced-colors:active){.gm .gmseg label:has(input:checked){outline:2px solid Highlight;outline-offset:-3px}}
/* WINDOWS HIGH CONTRAST. The map is a picture of data. In forced colours the
   legend's stripes and hatch lost their pattern and stood blank, and the
   labels lost their halo and became blots on the fills (the review of 8
   October). The map and its swatches keep their own colours there, as an
   image does; the panel and the list say the same in the system's colours. */
@media (forced-colors:active){.gm .gmsvg,.gm .gmleg .sw{forced-color-adjust:none}}
.gm .gmflo{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--gm-ui);cursor:pointer}
.gm .gmflo input{width:1.125rem;height:1.125rem;accent-color:var(--pine)}

/* The legend: every colour said in words, before the map. */
.gm .gmleg{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;align-items:center;margin:0 0 .625rem;
  font-size:var(--gm-sm);line-height:1.4;color:var(--ink)}
.gm .gmleg .k{display:inline-flex;align-items:center;gap:.5rem}
.gm .gmleg .sw{display:inline-block;width:1.75rem;height:1rem;border:1px solid var(--rule-2);flex:0 0 auto}
.gm .sw.p-R{background:var(--fill-R)}.gm .sw.p-D{background:var(--fill-D)}.gm .sw.p-I{background:var(--fill-I)}
.gm .sw.mix{background:repeating-linear-gradient(-45deg,var(--fill-R) 0 4px,var(--fill-D) 4px 8px)}
.gm .sw.vac{background:repeating-linear-gradient(-45deg,var(--surface) 0 4px,var(--edge) 4px 5px)}
.gm .sw.frame{background:var(--surface);border:3px dashed var(--rep);box-shadow:inset 0 0 0 2px var(--surface)}
.gm .sw.frame.p-D{border-color:var(--dem)}
.gm .gmnote{font-size:var(--gm-sm);color:var(--ink-2);line-height:1.5;margin:0;max-width:52rem}
.gm .gmnote b{color:var(--ink);font-weight:600}

/* Map and panel: side by side on a desktop, the legend over the panel; on a
   phone the legend, then the map, then the panel. */
.gm .gmstage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"map key" "map panel";gap:.75rem 1rem;align-items:start}
.gm .gmkey{grid-area:key}.gm .gmbox{grid-area:map}.gm .gmpanel{grid-area:panel}
@media (max-width:53.75em){.gm .gmstage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"key" "map" "panel"}}
.gm.nopanel .gmstage{grid-template-columns:minmax(0,1fr);grid-template-areas:"key" "map"}
.gm .gmbox{position:relative;background:var(--surface);border:1px solid var(--rule-2);border-radius:3px;min-width:0}
.gm .gmwrap{overflow:auto;height:var(--gmh,min(76vh,700px));touch-action:pan-x pan-y;cursor:grab}
.gm .gmwrap:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.gm.static .gmwrap{overflow:hidden;cursor:default}
.gm .gmwrap.dragging{cursor:grabbing}
.gm .gmsvg{display:block;width:100%;height:100%;font-family:var(--sans)}
/* REDUCED MOTION. app.css answers the preference with
   *{transition-duration:.01ms !important}, and since every element's
   transition-property starts as "all", that turned each change of the map's
   width into a transition: for one frame the map still measured its old size,
   so a zoom set the scroll against the old size and the labels were measured
   at the old scale (found 8 October). The map never animates its size. */
.gm .gmsvg{transition-property:none}
.gm .gmzoom{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.25rem}
.gm .gmzoom button{font:600 1rem var(--sans);min-width:2.75rem;height:2.75rem;border:1px solid var(--edge);border-radius:3px;
  background:var(--surface);color:var(--ink);cursor:pointer}
.gm .gmzoom button:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.gm .gmcredit{font-size:var(--gm-sm);color:var(--ink-2);margin:.375rem .625rem .5rem;line-height:1.4}
.gm .gmfail{font-size:var(--gm-ui);margin:.75rem;color:var(--ink)}

/* The drawing. Lines keep their width at every zoom. */
.gm .f{stroke:none;cursor:pointer}
.gm .f.p-R{fill:var(--fill-R)}.gm .f.p-D{fill:var(--fill-D)}.gm .f.p-I{fill:var(--fill-I)}
.gm .f.p-0{fill:var(--fill-0)}
.gm:not(.tinted) .f.on{fill:var(--pine-soft)}
.gm .f:hover{opacity:.82}
.gm.static .f{cursor:default}.gm.static .f:hover{opacity:1}
.gm .mesh{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm.tinted .mesh{stroke:var(--surface)}
.gm:not(.tinted) .mesh{stroke:var(--ink);stroke-width:1}
.gm .under{fill:none;stroke:var(--rule-2);stroke-width:.75;vector-effect:non-scaling-stroke;pointer-events:none}
.gm.tinted .under{stroke:color-mix(in srgb,var(--surface) 55%,transparent)}
/* a city's ward lines on the layers that are not State House: the 2022
   district lines inside the city, drawn like the town lines */
.gm .wardl{stroke-dasharray:3 3}
.gm:not(.tinted) .wardl{stroke:var(--rule-2)}
.gm .ctyc{fill:none;stroke:var(--surface);stroke-width:4.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm .cty{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
/* A floterial is framed from the inside: each frame is clipped to its own
   district, so two floterials that share a border each keep their own band. */
.gm .fcase{fill:none;stroke:var(--surface);stroke-width:10;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm .fdash{fill:none;stroke-width:6;stroke-dasharray:9 6;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm .fdash.p-R{stroke:var(--rep)}.gm .fdash.p-D{stroke:var(--dem)}.gm .fdash.p-I{stroke:var(--ind)}
.gm .fdash.p-0{stroke:var(--ink)}
/* A floterial of both parties: red dash, gap, blue dash, gap, so the frame
   still reads as dashed when the two inks cannot be told apart. */
.gm .fdash.alt{stroke-dasharray:9 19}
.gm .fdash.alt2{stroke-dasharray:9 19;stroke-dashoffset:14}
.gm .selc{fill:none;stroke:var(--surface);stroke-width:8;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm .sel{fill:none;stroke:var(--pine);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm .town{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;pointer-events:none}
/* A town page's map (frame and dim): outside the town a veil of the card's
   colour, the town's edge one solid ink line on a casing. */
.gm .outside{fill:var(--surface);fill-opacity:.68;pointer-events:none}
.gm .tlinec{fill:none;stroke:var(--surface);stroke-width:6;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm .tline{fill:none;stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none}
.gm.framed .town{display:none}

/* THE LABELS: ink on a halo of the card's colour, so each reads on either
   party's fill and on the stripes. Their sizes are map.js's (--n-*). */
.gm .labels text{fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none;
  paint-order:stroke;stroke:var(--surface);stroke-linejoin:round}
.gm .lab{font-size:var(--n-num);font-weight:600;stroke-width:calc(var(--n-num) / 4)}
.gm .nm-town{font-size:var(--n-town);font-weight:500;stroke-width:calc(var(--n-town) / 4)}
/* an unincorporated place (a grant, location or purchase): quieter */
.gm .nm-place{font-size:var(--n-place);font-weight:400;fill:var(--ink-2);stroke-width:calc(var(--n-place) / 4)}
.gm .nm-city{font-size:var(--n-city);font-weight:600;stroke-width:calc(var(--n-city) / 4)}
.gm .nm-ward{font-size:var(--n-ward);font-weight:500;stroke-width:calc(var(--n-ward) / 4)}
/* the chosen town, or a town page's own, and a ward page's own ward */
.gm .nm-here{font-size:var(--n-here);font-weight:600;stroke-width:calc(var(--n-here) / 3.5)}
.gm .nm-ward.is-here{font-size:var(--n-hereward);font-weight:600;stroke-width:calc(var(--n-hereward) / 3.5)}
.gm .nm-county{font-size:var(--n-county);font-weight:600;letter-spacing:.04em;stroke-width:calc(var(--n-county) / 4)}
/* on a town page, what lies outside the town is veiled, and so are its names */
.gm .nm.is-out{fill:var(--ink-2);font-weight:400}
/* The chosen district's tag: its name and number, in pine on the card's
   colour, in a box, like the outline it names. */
/* the chosen district's tag lets a click through to the district under it:
   a click off every district clears the choice (map.js clear) */
.gm .dtag{pointer-events:none}
.gm .dtag rect{fill:var(--surface);stroke:var(--pine);stroke-width:1.5;vector-effect:non-scaling-stroke}
.gm .dtag text{font-size:var(--n-tag);font-weight:600;fill:var(--pine);text-anchor:middle;dominant-baseline:central}
@media (forced-colors:active){.gm .labels text,.gm .dtag text{forced-color-adjust:none}}

/* The panel. */
.gm .gmpanel{background:var(--surface);border:1px solid var(--rule-2);border-radius:3px;padding:1rem 1.125rem;min-height:12rem;
  font-size:var(--gm-ui);line-height:1.5;min-width:0}
.gm .gmpanel h4{font-family:var(--serif);font-size:1.1875rem;font-weight:600;margin:0 0 .25rem;line-height:1.3}
.gm .gmpanel .pk{font-size:var(--gm-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin:1rem 0 .375rem}
.gm .gmpanel .chips{display:flex;flex-wrap:wrap;gap:.375rem}
.gm .gmpanel p{margin:.25rem 0}
.gm .gmpanel .quiet{color:var(--ink-2);font-size:var(--gm-sm)}
.gm .gmpanel a{color:var(--pine)}
.gm .gmpanel .towns a{text-decoration:underline;text-underline-offset:.2em}
.gm .gmpanel .mchip a{color:var(--ink)}
.gm a.gmout::after{content:" \2197";font-size:.85em}
.gm .gmpanel .flobox{margin-top:.75rem;padding:.625rem .75rem;border:1px dashed var(--edge);border-radius:3px}

/* The list: the same answer as text, each district a button that chooses it. */
.gm .gmlist{margin-top:1rem}
.gm .gmlist > summary{cursor:pointer;font-weight:600;font-size:var(--gm-ui);padding:.5rem 0}
.gm .gmlist details.cgrp{border-top:1px solid var(--rule);padding:.375rem 0}
.gm .gmlist details.cgrp summary{cursor:pointer;font-weight:600;font-size:var(--gm-ui)}
.gm .gmlist ul{columns:2 22rem;font-size:var(--gm-ui);margin:.5rem 0 0;padding:0 0 0 1.125rem;line-height:1.5}
.gm .gmlist li{break-inside:avoid;margin:0 0 .375rem}
.gm .gmlist .quiet{color:var(--ink-2);font-size:var(--gm-sm)}
.gm .gmpick{font:inherit;font-weight:600;color:var(--pine);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;text-align:left}
.gm .gmpick:focus-visible{outline:2px solid var(--pine);outline-offset:2px}

@media (max-width:37.5em){
  .gm .gmrow{gap:.5rem}
  .gm .gmseg{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .gm .gmseg label{border-left:1px solid var(--rule);border-top:1px solid var(--rule);text-align:center;padding:.5rem .25rem;
    font-size:var(--gm-sm);display:flex;align-items:center;justify-content:center;min-height:44px}
  .gm .gmseg label:nth-child(3n+1){border-left:0}
  .gm .gmseg label:nth-child(-n+3){border-top:0}
  .gm .gmwrap{height:var(--gmhp,64vh)}
  .gm .gmpanel{min-height:0}
}