/* Maidenhead grid locator page. Everything here composes the tokens in
 * tokens.css: no new colours, no new type, no third font. Page CSS lives here
 * beside balun.css and impedance.css, never in style.css. */

/* --- layout: one question, the answer beside it, the map underneath ------ */
.mh .work{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.mh .result{margin-top:0}
@media(max-width:900px){.mh .work{grid-template-columns:1fr}}

.mh .rhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.mh .rhead .rlabel{margin:0}
.mh .copy{min-height:36px;padding:6px 12px;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:var(--s2)}
.mh .copy svg{width:16px;height:16px}
@media(max-width:600px){.mh .rhead{flex-wrap:wrap}.mh .copy{width:100%;justify-content:center}}

/* 6 characters fit the readout slot at --fs-readout in the narrowest column;
 * 8 do not (317 px against 236 px). They break four-and-four at the unchanged
 * size instead of shrinking: one type scale, no new token, and the seam is
 * field+square | subsquare+extended, which is how the locator is read aloud.
 * line-height stays 1 (style.css) so the two lines read as one locator and not
 * as two separate 4-character codes — each half IS a valid locator. */
.mh .big{letter-spacing:.02em;line-height:1}
.mh .big .ln{display:block}
/* The empty state says it in words at --fs-xl in --color-muted: 36 px, 5.6:1
 * contrast in both themes, and the string is the adjustable part if a token
 * bump ever costs the 13 px of headroom it has at 320. */
.mh .big.empty{font-size:var(--fs-xl);color:var(--color-muted)}
@media(max-width:600px){.mh .big{font-size:52px}}

/* Per-axis uncertainty is two values: they may break between the axes, never
 * between a value and its unit, so each axis is a nowrap span and the only
 * break opportunity is the <wbr> after the comma. */
.mh .ax{white-space:nowrap;display:inline-block}

.mh .src{margin:var(--s3) 0 0;font-size:var(--fs-xs);color:var(--color-muted)}

/* --- map frame: a .fcard-family box that must never inherit --card-tilt --- */
/* A drawn box follows the theme. Leaflet writes stroke as a presentation
   ATTRIBUTE at creation, which is frozen: toggling the theme left a green box on
   the notebook page. Presentation attributes lose to any author rule, so this
   single rule wins without a theme observer, and it cannot drift the next time a
   token changes. Dash, weight and the wash stay per-path attributes. */
.mapbox .leaflet-overlay-pane path{stroke:var(--color-signal)}
.mapbox{position:relative;height:380px;margin:var(--s4) 0 0;border:var(--border-w) solid var(--color-edge);border-radius:var(--radius);background:var(--color-surface-sunk);transform:none;overflow:hidden}
[data-theme="panel"] .mapbox{border-color:var(--color-rule)}
@media(max-width:600px){.mapbox{height:260px}}
.mapbox .leaflet-container{height:100%;background:var(--color-surface-sunk);font-family:var(--font-mono)}
.mapbox[data-state="beyond"]{height:auto;min-height:120px}

/* Tiles: the only place a non-token palette enters the page, so it is confined
 * to the tile pane and inverted in panel mode. Roads, labels and water survive
 * this filter; plain invert() goes orange-on-olive and the labels die. */
[data-theme="panel"] .leaflet-tile{filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(1.18) contrast(1.04)}
[data-theme="panel"] .leaflet-container{background:#0e1214}

/* Leaflet's own chrome is the only non-QRPedia UI on the page: restyle it from
 * tokens so the zoom pill and the attribution chip belong to the frame. */
.mapbox .leaflet-control-zoom{border:var(--border-w) solid var(--color-edge);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden}
.mapbox .leaflet-control-zoom a{background:var(--color-surface);color:var(--color-ink);border-bottom:var(--border-w) solid var(--color-rule)}
.mapbox .leaflet-control-zoom a:last-child{border-bottom:0}
.mapbox .leaflet-control-zoom a:hover{background:var(--color-surface-sunk);color:var(--color-ink)}
.mapbox .leaflet-control-attribution{background:var(--color-surface);color:var(--color-muted);border:var(--border-w) solid var(--color-rule);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-xs);padding:2px 6px;margin:0 8px 8px 0}
.mapbox .leaflet-control-attribution a{color:var(--color-accent)}

/* Cell state: the rectangle, never a pin. A pin at 6-character precision is a
 * lie about what we know. Rectangle colour is set from --color-signal at draw
 * time, because Leaflet needs a concrete colour and not a custom property. */
.mapbox.cell .pin{display:none}
.mapbox.pin .cellmark{display:none}

/* Pin: an SVG teardrop in --color-signal with a --color-surface hole. The
 * default blue PNG belongs to no theme. */
.mapbox .pinmark{color:var(--color-signal);filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}
.mapbox .pinmark svg{display:block;width:26px;height:34px}
.mapbox .pinlabel{display:none;margin:2px auto 0;padding:1px 6px;width:max-content;max-width:min(15em,calc(100% - 24px));white-space:normal;text-align:center;font-family:var(--font-mono);font-size:var(--fs-tag);color:var(--color-ink);background:var(--color-surface);border:var(--border-w) solid var(--color-edge);border-radius:var(--radius)}
.mapbox[data-state="clamped"] .pinlabel{display:block}

/* Honesty states. `down` is transient, `beyond` and `clamped` are permanent for
 * that input; all three share one live region and one frame. */
.mapbox[data-state="down"] .leaflet-tile-pane,
.mapbox[data-state="down"] .leaflet-control-zoom,
.mapbox[data-state="beyond"] .leaflet-map-pane{display:none}
/* Attribution follows the data, not the tiles: a dead tile host still leaves a
 * live Place row of OSM-derived text, so the chip stays in down and goes in
 * beyond, where it would be crediting tiles that are not drawn. */
.mapbox[data-state="beyond"] .leaflet-control-attribution,
.mapbox[data-state="down"] .leaflet-control-attribution,
.mapbox[data-tiles="off"] .leaflet-control-attribution{display:none}
.mapbox[data-state="down"] .cellmark,
.mapbox[data-state="beyond"] .cellmark,
.mapbox[data-state="down"] .pinmark,
.mapbox[data-state="beyond"] .pinmark{display:none}

.mapnote{position:absolute;left:0;right:0;bottom:0;margin:0;padding:var(--s2) var(--s3);font-size:var(--fs-sm);color:var(--color-ink);background:var(--color-surface);border-top:var(--border-w) solid var(--color-rule)}
.mapnote:empty{display:none}
.mapbox[data-state="beyond"] .mapnote{position:static;border-top:0;padding:var(--s3)}

/* --- anatomy: three nested levels, drawn from tokens --------------------- */
.mh .anat{display:block;width:100%;height:auto;margin:var(--s2) 0 var(--s3)}
.mh .anat .edge{fill:none;stroke:var(--color-edge);stroke-width:1.5}
.mh .anat .sq{fill:var(--color-surface-sunk);stroke:var(--color-rule);stroke-width:1.5}
.mh .anat .sub{fill:var(--color-accent);fill-opacity:.18;stroke:var(--color-accent);stroke-width:1.5}
.mh .anat text{fill:var(--color-ink);font-family:var(--font-mono)}
.mh .legend{margin:0;display:grid;gap:var(--s2);font-size:var(--fs-sm)}
.mh .legend .lg{display:grid;grid-template-columns:auto 1fr;gap:var(--s3)}
.mh .legend dt{color:var(--color-muted)}
.mh .legend dd{margin:0;font-family:var(--font-mono)}
.mh .legend .lg[hidden]{display:none}