/* Shared chrome for every map page: the map frame, its controls, legend and
   popups, restyled once from the frame's tokens (DESIGN.md). Page-specific
   rules live in <page>.css. */


#map { height: 78vh; min-height: 460px; border: 1px solid var(--rule);
       background: var(--tint); }

.leaflet-container { background: var(--tint);
       font: var(--t-s)/1.5 var(--sans); }
.base-parchment { filter: sepia(.5) saturate(.35) brightness(1.06)
       contrast(.88); }
.overlay-multiply { mix-blend-mode: multiply; }

.leaflet-control-layers,
.leaflet-popup-content-wrapper,
.leaflet-bar a { background: var(--paper); color: var(--ink); }
.leaflet-control-layers, .leaflet-bar, .leaflet-touch .leaflet-bar,
.leaflet-touch .leaflet-control-layers { border: 1px solid var(--rule) !important;
       border-radius: 0 !important; box-shadow: none !important; }
.leaflet-bar a, .leaflet-bar a:first-child, .leaflet-bar a:last-child {
       border-radius: 0 !important; border-bottom-color: var(--rule); }
.leaflet-control-layers { font: 12.5px/1.7 var(--sans); padding: .25rem .4rem; }
.leaflet-control-layers label { accent-color: var(--accent); }
.leaflet-control-layers-separator { border-top: 1px solid var(--rule); }
.leaflet-control-layers .grouphdr { font-size: 10.5px; font-weight: 500;
       letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
       margin: .55rem 0 .1rem; }
.leaflet-control-layers .grouphdr:first-child { margin-top: .1rem; }
.leaflet-container .leaflet-control-attribution {
       background: var(--paper); color: var(--muted); opacity: .85;
       font: 10px/1.4 var(--sans); }

.leaflet-popup-content-wrapper { border: 1px solid var(--rule);
       border-radius: 0; box-shadow: none; }
.leaflet-popup-tip { background: var(--paper); box-shadow: none;
       border: 1px solid var(--rule); }
.leaflet-popup-content { font: 14px/1.5 var(--serif); }
.leaflet-popup-content b { font-size: 15px; }
.leaflet-popup-content .muted { color: var(--muted); }
.leaflet-popup-content .terrain { font-style: italic; }
.leaflet-popup-content .src { font: 11px/1.4 var(--sans); color: var(--muted); }

/* legend shell; the swatch classes inside it are page-specific,
   except .ln, the line swatch the rail legends share */
.maplegend { font: 12.5px/1.6 var(--sans); color: var(--ink);
       background: var(--paper); padding: .6rem .8rem;
       border: 1px solid var(--rule); }
.maplegend .sw { display: inline-block; width: 14px; height: 11px;
       margin-right: .4rem; vertical-align: baseline; border: 1.5px solid; }
.maplegend .grp { font-size: 10.5px; letter-spacing: .1em; font-weight: 500;
       text-transform: uppercase; color: var(--muted); margin: .5rem 0 .15rem; }
.maplegend .grp:first-child { margin-top: 0; }
.maplegend .ln { display: inline-block; width: 18px; height: 0;
       margin: 0 .5rem .25rem 0; vertical-align: middle; border-top-width: 3px; }

p.lede { margin: .1rem 0 .8rem; }
details.mapnote { font-size: var(--t-s); color: var(--muted); margin: 1rem 0; }
details.mapnote p { margin: .6rem 0; }

/* the controls above a map: buttons are ruled, the pressed one inked */
#yrs, #chapters { display: flex; flex-wrap: wrap; align-items: center;
       gap: .4rem; margin: .2rem 0 1rem; }
#yrs button, #chapters button, #tl button { font: 500 13px/1.3 var(--sans);
       font-variant-numeric: lining-nums; padding: .45rem .8rem; cursor: pointer;
       border: 1px solid var(--rule); border-radius: 0; background: var(--paper);
       color: var(--ink); }
#yrs button:hover, #chapters button:hover, #tl button:hover { border-color: var(--ink); }
#yrs button[aria-pressed="true"], #chapters button.active {
       background: var(--ink); color: var(--paper); border-color: var(--ink); }
#yrcap { margin-left: .5rem; font: var(--t-s)/1.4 var(--sans); color: var(--muted); }

/* the time slider (growth, counties): a hairline track, a bar for a thumb */
#tl { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 1.9rem; }
#track { position: relative; flex: 1; height: 1.9rem; }
#slider { position: absolute; top: 0; left: 0; width: 100%; height: 18px;
       margin: 0; -webkit-appearance: none; appearance: none; background: none;
       cursor: pointer; }
#slider::-webkit-slider-runnable-track { height: 1px; background: var(--rule); }
#slider::-moz-range-track { height: 1px; background: var(--rule); }
#slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
       width: 4px; height: 16px; margin-top: -7.5px; border-radius: 0;
       background: var(--ink); border: 0; }
#slider::-moz-range-thumb { width: 4px; height: 16px; border-radius: 0;
       background: var(--ink); border: 0; }
#ticks .tick { position: absolute; top: 12px; width: 1px; height: 6px;
       background: var(--muted); opacity: .5; pointer-events: none; }
#ticks .lab { position: absolute; top: 21px; transform: translateX(-50%);
       font: 10.5px/1 var(--sans); color: var(--muted); white-space: nowrap;
       font-variant-numeric: lining-nums; }
#ticks .lab.on { color: var(--ink); font-weight: 600; }
#yr { font: 600 20px/1 var(--sans); font-variant-numeric: lining-nums;
       width: 3.4em; text-align: right; }