/* Shared chrome for every map page (colony, twotowns, growth).
   Page-specific rules live in <page>.css. Copied verbatim into www/. */

main { max-width: 1200px; }

#map { height: 78vh; min-height: 460px; border: 1px solid #c9c0ae;
       background: #ece5d6; box-shadow: 0 1px 6px rgba(60,45,30,.18); }

.leaflet-container { background: #ece5d6;
       font: 13px/1.5 Georgia, 'Times New Roman', serif; }
.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: rgba(251,250,247,.96); color: var(--ink); }
.leaflet-control-layers { border: 1px solid #c9c0ae !important;
       border-radius: 3px; box-shadow: 0 1px 4px rgba(60,45,30,.2);
       font: 12.5px/1.7 Georgia, serif; padding: .25rem .35rem; }
.leaflet-control-layers label { accent-color: var(--accent); }
.leaflet-control-layers-separator { border-top: 1px solid #d8d0bf; }
.leaflet-control-layers .grouphdr { font-size: 10.5px; font-weight: bold;
       letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
       margin: .55rem 0 .1rem; }
.leaflet-control-layers .grouphdr:first-child { margin-top: .1rem; }
.leaflet-bar a { border-bottom-color: #d8d0bf; }
.leaflet-container .leaflet-control-attribution {
       background: rgba(251,250,247,.8); color: var(--muted);
       font: 10px/1.4 Georgia, serif; }

.leaflet-popup-content-wrapper { border: 1px solid #c9c0ae;
       border-radius: 3px; box-shadow: 0 2px 8px rgba(60,45,30,.25); }
.leaflet-popup-tip { background: #fbfaf7; }
.leaflet-popup-content { font: 13px/1.55 Georgia, serif; }
.leaflet-popup-content b { font-size: 14.5px; }
.leaflet-popup-content .muted { color: var(--muted); }
.leaflet-popup-content .terrain { font-style: italic; }
.leaflet-popup-content .src { font-size: 11px; 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 Georgia, serif;
       background: rgba(251,250,247,.96); padding: .6rem .8rem;
       border: 1px solid #c9c0ae; border-radius: 3px;
       box-shadow: 0 1px 4px rgba(60,45,30,.2); }
.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: .05em;
       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; }
p.mapnote { font-size: .9rem; color: var(--muted); }
details.mapnote { font-size: .9rem; color: var(--muted); margin: 1rem 0; }
details.mapnote summary { cursor: pointer; }
details.mapnote p { margin: .6rem 0; }

/* the census-year switch above the map (texas, counties) */
#yrs { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 1rem; }
  #yrs button { font: bold 14px/1 Georgia, serif; padding: .45rem .8rem;
       cursor: pointer; border-radius: 3px; border: 1px solid #c9c0ae;
       background: rgba(251,250,247,.96); color: var(--ink); }
  #yrs button[aria-pressed="true"] { background: #7a3b2e; color: #fbfaf7;
       border-color: #4a2418; }
  #yrcap { margin-left: .5rem; font-size: .9rem; color: var(--muted); }