/* ══ THE SHARED LANGUAGE ══════════════════════════════════════════════════════════════════
   Copied, value for value, from the same block at the top of atlas/atlas_map.html, which copied
   it from shiloh/shiloh_map.html: the tokens on :root, the walnut-and-brass shell bar, the
   parchment sidebar and its dark header band, the monospace-capitals label voice, the chip, the
   filter-status row, the map-control button and the popup card. Class names are identical on
   purpose (docs/design_language.md); a rule changed here is a rule changed in one of three
   copies, so change it in all three or in none. The atlas's own additions in that block
   (--incon, --sea, --land and the rest) come along unused rather than being pruned, so the
   three copies can still be compared line for line. Battle-page additions are BELOW this block
   and named .bp-* or by id. */
:root{
  --ink:#1a1410; --paper:#f4ece0; --paper2:#e8dcc8; --line:#b8a888;
  --union:#1a4f9c; --union-l:#2e7cd6; --ohio:#e0a800; --csa:#b02020;
  --gold:#9a7b3f; --accent:#7a2820; --shadow:rgba(40,28,16,.25);
  --ink-2:#6b5a3c; --gold-2:#b89a5c;
  --fs-min:11px;
  /* Atlas additions. --incon is the "Inconclusive" battle colour: Shiloh's --gold measured
     as grey beside the two army colours (chroma .087, the dataviz validator's floor is .10),
     and this amber passes every check against the parchment map ground (#f1e6cf): lightness
     band, chroma, deutan ΔE 11.4 to --csa, normal-vision ΔE 18.6, contrast >= 3:1. */
  --incon:#a8790a; --neutral:#6b5a3c;
  --sea:#c9d4cd; --land:#f3e9d4; --land-edge:#a8927a; --river:#6f8fa3;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Spectral',serif;color:var(--ink);background:var(--ink)}
body{display:flex;flex-direction:column;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip-link{position:fixed;top:-60px;left:12px;z-index:5000;padding:9px 14px;border-radius:0 0 6px 6px;
  background:var(--gold,#c9a24a);color:#1a1208;font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.06em;text-decoration:none;transition:top .12s}
.skip-link:focus{top:0}

/* ---- TOP-LEVEL NAV SHELL (shiloh_map.html #shellNav) ---- */
#shellNav{flex:0 0 auto;display:flex;align-items:stretch;gap:0;
  padding:0 14px;min-height:50px;background:linear-gradient(180deg,#241a10,#160f08);
  border-bottom:2px solid #e8c04a;box-shadow:0 2px 10px rgba(0,0,0,.5);z-index:1200}
#shellNav .shell-brand{display:flex;flex-direction:column;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22px;line-height:1;
  color:#f0d99a;letter-spacing:1.5px;background:none;border:none;cursor:pointer;
  padding:4px 20px 4px 2px;margin-right:8px;white-space:nowrap;text-align:left;
  border-right:1px solid rgba(240,217,154,.16);transition:color .15s,text-shadow .15s}
#shellNav .shell-brand .glyph{color:#c9a94a;font-size:15px;margin-right:6px}
#shellNav .shell-brand .bsub{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:#9a8250;margin-top:3px}
#shellNav .shell-brand:hover{color:#fff2c8;text-shadow:0 0 12px rgba(240,200,80,.45)}
#shellNav .shell-brand:focus-visible{outline:2px solid #e8c04a;outline-offset:2px}
#shellNav .navwrap{display:flex;align-items:stretch;gap:2px;flex:1;overflow-x:auto}
#shellNav .nav-div{align-self:center;width:1px;height:24px;
  background:rgba(240,217,154,.2);margin:0 8px;flex:0 0 auto}
#shellNav .navbtn{appearance:none;background:none;border:none;border-bottom:3px solid transparent;
  color:#c9b896;font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:600;
  letter-spacing:.8px;text-transform:uppercase;padding:0 13px;cursor:pointer;
  transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
#shellNav .navbtn:hover{color:#f0d99a;background:rgba(240,217,154,.06)}
#shellNav .navbtn.active{color:#f0d99a;border-bottom-color:#e8c04a;background:rgba(240,217,154,.08)}
#shellNav .nb-short{display:none}
#shellNav .navbtn:focus-visible{outline:2px solid #e8c04a;outline-offset:-2px}
#shellBody{flex:1 1 auto;position:relative;min-height:0;overflow:hidden}
#app{display:flex;height:100%;overflow:hidden}
#app[hidden]{display:none}

/* ---- CONTENT STAGE, "Lamplight" (shiloh_map.html #contentStage) ---- */
#contentStage{position:absolute;inset:0;overflow-y:auto;
  background:linear-gradient(170deg,#221b12,#17110a);color:#ece4d3}
#contentStage[hidden]{display:none}
.cstage-wrap{max-width:1100px;margin:0 auto;padding:34px 28px 60px}
.cstage-wrap[hidden]{display:none}
.cstage-eyebrow{font-family:'Spectral',Georgia,serif;font-size:13px;font-style:italic;
  letter-spacing:.01em;color:#cfa75a}
.cstage-title{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:32px;
  color:#f4ecd9;margin:4px 0 14px;line-height:1.1}
.cstage-body{font-size:14.5px;line-height:1.7;color:#d6cbb2;max-width:78ch}
.cstage-body p{margin-bottom:12px}
.cstage-note{margin-top:18px;padding:14px 16px;background:rgba(207,167,90,.10);
  border-left:3px solid #cfa75a;border-radius:4px;font-size:13px;line-height:1.6;color:#d6cbb2}
.cstage-link{display:inline-block;cursor:pointer;color:#d8b878;border-bottom:1px dashed #d8b878;font-weight:600;background:none;border-top:0;border-left:0;border-right:0;font:inherit}
.cstage-link:hover{color:#f0d99a;border-color:#f0d99a}
#sourcesStage .src-sec{margin:30px 0 0}
#sourcesStage .src-h{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:23px;
  line-height:1.15;color:#f0e3c6;margin:0 0 10px;padding-bottom:7px;
  border-bottom:1px solid rgba(207,167,90,.3)}
#sourcesStage .src-lede{font-size:14px;line-height:1.65;color:#b6a888;margin:0 0 12px;max-width:78ch}
#sourcesStage .src-defs{margin:0 0 14px;max-width:78ch}
#sourcesStage .src-defs dt{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);
  letter-spacing:1.4px;text-transform:uppercase;color:#e8c877;margin-top:14px}
#sourcesStage .src-defs dt:first-child{margin-top:0}
#sourcesStage .src-defs dd{margin:5px 0 0;font-size:14px;line-height:1.6;color:#c4b99e}
#sourcesStage .src-defs dd a,#sourcesStage .src-lede a{color:#d8b878}
#sourcesStage .ct-item{margin:0 0 18px;max-width:78ch;border-left:2px solid rgba(240,217,154,.28);padding-left:16px}
#sourcesStage .ct-topic{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:700;color:#f0d99a;margin:0 0 2px}
#sourcesStage .ct-when{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);color:#b6a888;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}
#sourcesStage .ct-v{margin:0 0 6px;font-size:14px;line-height:1.6;color:#d6cbb2}

/* ---- SIDEBAR (shiloh_map.html #sidebar, .hd, .grouphd, .sec, .row) ---- */
#sidebar{width:340px;flex:0 0 340px;height:100%;overflow-y:auto;
  background:linear-gradient(170deg,#f7f0e4,#e9ddc8);
  border-right:3px solid var(--gold);box-shadow:4px 0 18px var(--shadow);z-index:1000}
#sidebar::-webkit-scrollbar{width:9px}
#sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.hd{padding:18px 20px 14px;border-bottom:2px solid var(--gold);
  background:linear-gradient(160deg,#2a1d12,#3d2c1a);color:var(--paper)}
.hd h1{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:28px;
  letter-spacing:.5px;line-height:1.05;color:#f0d99a}
.hd .sub{font-family:'Spectral',Georgia,serif;font-size:12.5px;font-style:italic;
  letter-spacing:.01em;line-height:1.4;color:#c9b896;margin-top:5px}
.hd .count{margin-top:9px;font-size:12.5px;color:#e8dcc4}
.hd .count b{color:#f0d99a;font-family:'JetBrains Mono',monospace}
.sec{border-bottom:1px solid var(--line)}
.grouphd{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold-2);
  padding:14px 20px 6px;background:#2a2018;
  border-top:1px solid rgba(240,217,154,.25);margin-top:0}
.grouphd.task-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;user-select:none;padding-bottom:12px;transition:background .13s,color .13s;width:100%;
  border-left:0;border-right:0;border-bottom:0;text-align:left}
.grouphd.task-hd:hover{background:#352716;color:#f0d99a}
.grouphd.task-hd:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.task-chev{font-size:var(--fs-min);color:var(--gold-2);transition:transform .18s ease;transform:rotate(0deg);flex:0 0 auto}
.grouphd.task-hd[aria-expanded="false"] .task-chev{transform:rotate(-90deg)}
.grouphd.task-hd[aria-expanded="false"]{color:#a08d63}
/* Shiloh's two rules above tie on specificity and the collapsed colour, written second, wins
   on hover too — #a08d63 on the hover ground #352716 measures 4.46:1. Restated for hover. */
.grouphd.task-hd[aria-expanded="false"]:hover{color:#f0d99a}
.grp-body[hidden]{display:none}
.body{padding:8px 20px 14px}
.row{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13.5px}
.row:hover{color:var(--accent)}
.row input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.row input:focus-visible+.swatch,.row input:focus-visible+.chk{outline:2px solid var(--gold);outline-offset:2px}
.swatch{width:15px;height:15px;border-radius:3px;flex:0 0 15px;border:1.5px solid rgba(0,0,0,.3);position:relative;transition:.15s}
.row input:not(:checked)+.swatch{opacity:.28;filter:grayscale(.7)}
.row input:checked+.swatch::after{content:'✓';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-min);color:#fff;font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.chk{width:15px;height:15px;border-radius:3px;flex:0 0 15px;border:1.5px solid #9a8060;background:#fbf6ec;position:relative;transition:.15s}
input:checked+.chk{background:var(--accent);border-color:var(--accent)}
input:checked+.chk::after{content:'✓';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:var(--fs-min);color:#fff;font-weight:700}
.row .lbl{flex:1}
.row .n{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);color:#6b5a3c;
  font-variant-numeric:tabular-nums;padding:1px 0 1px 6px}
.tnote{font-size:var(--fs-min);color:var(--ink-2);margin-top:7px;line-height:1.45;font-style:italic}

/* ---- Chips (shiloh_map.html .narrow-chip) ---- */
.narrow-chips{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 2px}
.narrow-chip{padding:4px 8px;border-radius:11px;cursor:pointer;
  background:rgba(154,123,63,.10);border:1px solid rgba(184,168,136,.55);color:var(--ink);
  font:600 var(--fs-min)/1 'JetBrains Mono',monospace;display:inline-flex;align-items:center;gap:5px}
.narrow-chip:hover{background:rgba(154,123,63,.22)}
.narrow-chip.on{background:var(--gold);border-color:var(--gold);color:#fff}
/* Brass when on, as everywhere — but ink, not white, on it: white on --gold is 3.98:1 at the type
   floor, ink 4.58:1 (WCAG AA). Found when Antietam's two tours lit the tour chip by default; Shiloh
   and the atlas carry the white rule still (docs/backlog.md). */
.narrow-chip.on{color:var(--ink)}
.narrow-chip.on .dot{box-shadow:0 0 0 1px rgba(26,20,16,.55)}
.narrow-chip .n{opacity:.75;margin-left:2px;font-weight:400}
.narrow-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.narrow-chip .dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.7)}

/* ---- Search field (shiloh_map.html .mksearch) ---- */
.mks-field{position:relative;display:flex;align-items:center}
.mks-ico{position:absolute;left:9px;font-size:15px;line-height:1;color:var(--ink-2);pointer-events:none}
.mks-field input[type=text]{width:100%;padding:8px 30px 8px 28px;border:1px solid var(--line);border-radius:6px;
  background:#fbf6ec;font:13px 'Spectral',serif;color:var(--ink)}
.mks-field input[type=text]:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.mks-clear{position:absolute;right:5px;width:22px;height:22px;border:none;border-radius:50%;
  background:none;color:var(--ink-2);font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.mks-clear:hover{background:rgba(154,123,63,.18);color:var(--accent)}
.mks-clear[hidden],.mks-results[hidden]{display:none}
.mks-results{margin-top:5px;max-height:230px;overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--line);border-radius:6px;background:#fbf6ec}
.mks-row{display:flex;gap:8px;align-items:center;width:100%;text-align:left;
  padding:6px 9px;background:none;border:none;border-bottom:1px solid rgba(184,168,136,.4);
  cursor:pointer;font-family:'Spectral',serif;font-size:13px;color:var(--ink);transition:background .1s}
.mks-row:last-child{border-bottom:none}
.mks-row:hover,.mks-row.active,.mks-row:focus-visible{background:rgba(154,123,63,.15);outline:none}
.mks-row .mksr-n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);color:var(--ink-2)}
.mks-row mark{background:rgba(240,200,80,.55);color:inherit;padding:0 1px;border-radius:2px}

/* ---- #filterStatus (shiloh_map.html) ---- */
#filterStatus{padding:9px 20px 10px;background:rgba(154,123,63,.09);font-family:'Spectral',Georgia,serif;border-bottom:1px solid var(--line)}
#filterStatus .fst-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#4a3a24}
#filterStatus .fst-count{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#5a4520}
#filterStatus .fst-of{flex:1}
#filterStatus .fst-reset{padding:3px 9px;cursor:pointer;background:none;
  border:1px solid #b8a888;border-radius:4px;color:#5a4520;
  font:600 var(--fs-min)/1 'JetBrains Mono',monospace;letter-spacing:.6px;text-transform:uppercase}
#filterStatus .fst-reset:hover{background:var(--accent);border-color:var(--accent);color:#fff}
#filterStatus .fst-reset[hidden]{display:none}
#filterStatus .fst-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
#filterStatus .fst-chips:empty{display:none}
#filterStatus .fst-chip{display:inline-flex;align-items:center;gap:5px;
  padding:3px 5px 3px 8px;border-radius:11px;background:rgba(154,123,63,.16);
  border:1px solid rgba(184,168,136,.6);color:#4a3a24;
  font:600 var(--fs-min)/1.25 'JetBrains Mono',monospace;max-width:100%}
#filterStatus .fst-chip .fst-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
#filterStatus .fst-chip .fst-x{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:none;background:none;cursor:pointer;
  color:#8a6d38;font-size:var(--fs-min);line-height:1;padding:0;flex:0 0 14px}
#filterStatus .fst-chip .fst-x:hover{background:var(--accent);color:#fff}

/* ---- MAP + popups (shiloh_map.html #map, .leaflet-popup-*, .pop-*) ---- */
#mapWrap{flex:1;position:relative;min-width:0}
#map{height:100%;width:100%;background:var(--sea)}
.leaflet-container{font-family:'Spectral',serif}
.leaflet-popup-pane{z-index:1050}
.leaflet-popup-content-wrapper{background:#f7f0e4;border:2px solid var(--gold);border-radius:6px;box-shadow:0 6px 24px var(--shadow)}
.leaflet-popup-tip{background:#f7f0e4}
.leaflet-popup-content{margin:13px 15px;font-family:'Spectral',serif;font-size:13px;line-height:1.5;max-width:340px}
.pop-t{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:19px;color:var(--accent);margin-bottom:3px;line-height:1.1}
.pop-aka{font-size:12px;font-style:italic;color:var(--ink-2);margin-bottom:6px}
.pop-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);
  text-transform:uppercase;letter-spacing:1px;padding:2px 7px;border-radius:9px;color:#fff;margin:0 4px 7px 0}
.pop-badge.quiet{background:rgba(154,123,63,.16);color:#4a3a24;border:1px solid rgba(184,168,136,.6)}
/* White on the inconclusive amber (--incon) is 3.89:1; the page's ink on it is 4.7:1, so an
   "Inconclusive" badge keeps the map's colour and takes dark text (WCAG AA, tests/contrast). */
.pop-badge.on-amber{color:var(--ink)}
.pop-meta{font-size:12.5px;margin:2px 0;line-height:1.45}
.pop-meta b{color:#5a4a2c;font-weight:600}
.pop-insc{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:#3a2e1e;line-height:1.55}
.pop-link{display:inline-block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);
  color:var(--union);text-decoration:none;border-bottom:1px dotted}
.pop-link:hover{color:var(--accent)}

/* ---- Floating map controls (shiloh_map.html .map-controls / .mc-btn / .mc-popover) ---- */
.map-controls{position:absolute;top:12px;right:12px;z-index:960;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.map-controls:has(.mc-popover.open){z-index:1090}
.mc-btn{width:150px;box-sizing:border-box;height:40px;padding:0 13px;border-radius:9px;cursor:pointer;
  background:linear-gradient(160deg,#2a1d12,#3d2c1a);border:1.5px solid var(--gold);
  color:#f0d99a;display:flex;align-items:center;gap:8px;
  font:600 12px/1 'JetBrains Mono',monospace;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 3px 12px rgba(0,0,0,.4);transition:background .15s,transform .1s,box-shadow .15s;user-select:none}
.mc-btn:hover{background:linear-gradient(160deg,#3d2c1a,#4d3722)}
.mc-btn:active{transform:scale(.94)}
.mc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mc-btn.on{background:var(--gold);color:#1a1208}
.mc-btn .mc-ico{width:18px;height:18px;flex:none}
.mc-popover{position:absolute;top:0;right:160px;width:270px;z-index:5;
  background:linear-gradient(170deg,#f7f0e4,#e9ddc8);border:2px solid var(--gold);
  border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.45);
  padding:14px 16px 16px;display:none;max-height:78vh;overflow-y:auto}
.mc-popover.open{display:block;animation:mcFade .18s ease}
@keyframes mcFade{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.mc-popover h4{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:17px;
  color:#3a2808;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.mc-popover h4 .mc-x{cursor:pointer;color:var(--ink-2);font-size:15px;padding:0 4px;background:none;border:none}
.mc-popover .ovl-group{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:600;
  letter-spacing:.9px;text-transform:uppercase;color:var(--ink-2);
  margin:13px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.mc-popover .ovl-group:first-of-type{margin-top:2px}


/* ══ BATTLE PAGES ═════════════════════════════════════════════════════════════════════════
   Everything below is the battle-page template's own (battlepage/battle_map.html), shared by
   every page built from it: /donelson/, /corinth/, /maryland-campaign/, /vicksburg/, /gettysburg-campaign/,
   /chickamauga/. */
:root{--memoir:#7b5a12;--web:#7a2820;--doc:#3f5a2a;--ph:#6b5a3c}
#shellNav .nb-short{display:none}

/* The panel: one destination's content at a time, rebuilt by renderPanel(). */
.fld-l{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--ink-2);margin:12px 0 4px;display:block}
.bp-sec{border-bottom:1px solid var(--line);padding:12px 20px 14px}
.bp-sec:last-child{border-bottom:none}
.bp-h{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:19px;line-height:1.15;color:#3a2808;margin:0 0 6px}
.bp-eyebrow{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 5px}
.bp-p{font-size:13.5px;line-height:1.6;color:#2a2016;margin:0 0 9px}
.bp-p:last-child{margin-bottom:0}
.bp-quote{font-size:13.5px;line-height:1.6;color:#2a2016;margin:6px 0 9px;padding:2px 0 2px 11px;border-left:3px solid var(--gold);font-style:italic}
.bp-btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bp-btn{padding:6px 10px;border-radius:6px;cursor:pointer;border:1px solid #b8a888;background:#fbf6ec;color:#4a3a24;
  font:600 var(--fs-min)/1.1 'JetBrains Mono',monospace;letter-spacing:.5px;text-transform:uppercase}
.bp-btn:hover{border-color:var(--gold);background:#f3e8d2}
.bp-btn.on,.bp-btn.primary{background:#2a1d12;color:#f0d99a;border-color:var(--gold)}
.bp-btn.primary:hover{background:#3d2c1a}
.bp-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.bp-btn[disabled]{opacity:.45;cursor:default}
/* dividedground.org additions (docs/site_decisions.md). An <a> styled as a button: the links to
   another page (a battle's own, the campaign's, the next battle) are real links, so a reader can
   open them in a new tab, and they share the button's look. */
a.bp-btn{display:inline-block;text-decoration:none}
/* Prefixed with .leaflet-container where the link sits in a card: Leaflet colours every popup
   link #0078a8, 4.36:1 on the parchment. */
.bp-open,.leaflet-container a.bp-open{display:inline-block;margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);font-weight:600;
  letter-spacing:.04em;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;vertical-align:middle}
.bp-open:hover,.leaflet-container a.bp-open:hover{color:#4f1913}
.bp-open:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a.pop-xlink,.leaflet-container a.pop-xlink{color:var(--union);text-decoration:none}
#contentStage a.pop-xlink{color:#e8c877}
.bp-camp .bp-kv a{color:var(--accent);font-weight:600}
#shellNav .navbtn[hidden],#shellNav .nav-div[hidden]{display:none}
/* A commander's portrait from the shared library (decision R4): small, beside the name, never in place of it. */
.oob-pt{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:middle;margin:0 6px 0 2px;border:1px solid var(--gold);background:#2a1d12}

/* Footnote markers. A passage's sources are one click away and say what kind of source they
   are; the marker is the one place a reader learns how far to trust a sentence. */
.bp-cite{all:unset;cursor:pointer;font:700 var(--fs-min)/1 'JetBrains Mono',monospace;color:var(--accent);
  vertical-align:super;padding:0 1px;margin-left:1px;border-bottom:1px dotted currentColor}
.bp-cite:hover{color:#4a140e}
.bp-cite:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
#contentStage .bp-cite{color:#e8c877}
#contentStage .bp-cite:hover{color:#fff2c8}
#citePop{position:fixed;z-index:4000;width:min(420px,calc(100vw - 24px));max-height:min(60vh,520px);overflow-y:auto;
  background:#f7f0e4;border:2px solid var(--gold);border-radius:8px;box-shadow:0 10px 32px rgba(0,0,0,.45);
  padding:12px 14px 13px;font-size:13px;line-height:1.5;color:var(--ink)}
#citePop[hidden]{display:none}
#citePop .cp-h{display:flex;justify-content:space-between;align-items:center;font:700 var(--fs-min) 'JetBrains Mono',monospace;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
/* The card scrolls when a passage has many sources; its header, and the close button in it,
   stays at the top (top:-12px is the card's own padding). */
#citePop .cp-h{position:sticky;top:-12px;z-index:1;background:#f7f0e4;margin:-12px -14px 6px;padding:10px 14px 6px}
#citePop .cp-x{background:none;border:none;cursor:pointer;color:var(--ink-2);font-size:15px;padding:0 4px}
#citePop .cp-x:hover{color:var(--accent)}
.cp-item{padding:8px 0;border-top:1px solid var(--line)}
.cp-item:first-of-type{border-top:none;padding-top:2px}
.cp-claim{font-weight:600;color:#2a2016}
.cp-ev{margin:5px 0 4px;padding-left:9px;border-left:2px solid var(--gold);font-style:italic;color:#3a2e1e}
.cp-src{font-size:12px;color:var(--ink-2);word-break:break-word}
/* The record's own fields (CWSAC forces, casualties, result; the update's acreage), and the whole
   text behind the 700-character excerpt, since passages cite what lies past it. */
.cp-rec{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin:5px 0 2px;font-size:12.5px}
.cp-rec dt{color:var(--ink-2);font-weight:600}
.cp-rec dd{margin:0;color:var(--ink)}
.cp-more summary{cursor:pointer;font-size:12px;color:var(--ink-2)}
.cp-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cp-src a{color:var(--union)}

/* Status labels — the habit the whole family shares: a label states its status. */
.st{display:inline-block;font:700 var(--fs-min)/1.3 'JetBrains Mono',monospace;letter-spacing:.5px;text-transform:uppercase;
  padding:1px 6px;border-radius:7px;margin-right:4px;background:rgba(154,123,63,.18);color:#4a3a24;white-space:nowrap}
.st.web{background:rgba(122,40,32,.12);color:#7a2820}
.st.memoir{background:rgba(123,90,18,.14);color:#5f450c}
.st.doc{background:rgba(63,90,42,.13);color:#33491f}
.st.interp{background:rgba(26,79,156,.10);color:#1a3f7a}
.st.ph{background:none;border:1px dashed #9a8060;color:#5a4a2c}
#contentStage .st{background:rgba(207,167,90,.16);color:#ecd9a8}
#contentStage .st.web{background:rgba(214,120,100,.16);color:#f2b8a8}
#contentStage .st.memoir{background:rgba(232,200,119,.16);color:#f0d99a}
#contentStage .st.doc{background:rgba(160,200,130,.14);color:#cfe4b8}
#contentStage .st.interp{background:rgba(140,180,240,.14);color:#c4d8f6}
#contentStage .st.ph{border-color:#a2926f;color:#d6cbb2}

/* Placeholders: what this first pass has not reached yet, said plainly and drawn differently
   so it can never be mistaken for content. */
.bp-ph{margin:8px 0;padding:8px 10px;border:1px dashed #9a8060;border-radius:6px;font-size:12.5px;line-height:1.5;
  color:#4a3a24;font-style:italic;background:rgba(154,123,63,.05)}
#contentStage .bp-ph{border-color:rgba(207,167,90,.45);color:#c4b99e;background:rgba(207,167,90,.05)}

/* At a glance: the two sides, the same top-rule colours as the atlas's popup. */
.bp-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 2px}
.bp-side{border-top:3px solid var(--line);padding-top:5px;font-size:12.5px;line-height:1.45}
.bp-side.US{border-top-color:var(--union)}
.bp-side.CS{border-top-color:var(--csa)}
.bp-side .ps-h{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.bp-kv{font-size:12.5px;margin:3px 0;line-height:1.45}
.bp-kv b{color:#5a4a2c;font-weight:600}

/* Engagement and place rows. */
.bp-list{list-style:none;margin:2px 0 0;padding:0}
.bp-list li button{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;padding:6px 6px;border:0;border-radius:5px;
  background:none;cursor:pointer;font:13px/1.3 'Spectral',serif;color:var(--ink)}
.bp-list li button:hover,.bp-list li button:focus-visible,.bp-list li button.on{background:rgba(154,123,63,.15);outline:none}
.bp-list .rl-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.bp-list .rl-ico{flex:none;width:18px;display:flex;justify-content:center;margin-top:1px}
.bp-list .rl-main{flex:1;min-width:0}
.bp-list .rl-name{display:block;font-weight:600}
.bp-list .rl-sub{display:block;font-size:var(--fs-min);color:var(--ink-2);font-family:'JetBrains Mono',monospace;margin-top:1px}
.bp-list li button:hover .rl-sub,.bp-list li button:focus-visible .rl-sub,.bp-list li button.on .rl-sub{color:#5c4b30}
.bp-num-n{flex:none;width:22px;height:22px;border-radius:50%;background:#2a1d12;border:1.5px solid var(--gold);color:#f0d99a;
  font:700 var(--fs-min)/19px 'JetBrains Mono',monospace;text-align:center}

/* The current stop / phase card. */
.bp-card{margin:2px 0 4px;padding:11px 13px;border:1.5px solid var(--gold);border-radius:8px;background:#fbf6ec}
.bp-card .bp-h{margin-bottom:2px}
.bp-when{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}

/* Numbers by source: never averaged. */
table.bp-nums{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
table.bp-nums th{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-2);
  text-align:left;padding:4px 4px;border-bottom:1px solid var(--line)}
table.bp-nums td{padding:4px 4px;border-bottom:1px solid rgba(184,168,136,.45);vertical-align:top;color:#2a2016}
table.bp-nums td.n{font-family:'JetBrains Mono',monospace;text-align:right;white-space:nowrap}
.bp-flag{margin:8px 0;padding:7px 9px;border-left:3px solid var(--accent);background:rgba(122,40,32,.07);font-size:12px;line-height:1.45;color:#4a2a1e}
.bp-flag b{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);letter-spacing:.5px;text-transform:uppercase}

/* Map ink. */
.bp-mk{background:none;border:none}
.bp-mk svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.bp-mk.dim{opacity:.32}
.bp-mk.hl svg{filter:drop-shadow(0 0 4px #f0c040) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.bp-stop{background:none;border:none}
.bp-stop span{display:block;width:26px;height:26px;border-radius:50%;background:#2a1d12;border:2px solid #e8c04a;color:#f0d99a;
  font:700 12px/22px 'JetBrains Mono',monospace;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bp-stop.on span{background:#e8c04a;color:#1a1208;border-color:#2a1d12;transform:scale(1.15)}
.leaflet-tooltip.bp-tip{background:#f7f0e4;border:1px solid var(--gold);border-radius:4px;color:var(--ink);
  font:13px 'Spectral',serif;box-shadow:0 3px 10px var(--shadow);padding:4px 8px}
.leaflet-tooltip.bp-tip b{font-family:'Cormorant Garamond',serif;font-size:15px}
.leaflet-tooltip.bp-tip .tt-sub{display:block;font:var(--fs-min) 'JetBrains Mono',monospace;color:var(--ink-2)}
.leaflet-container .pop-src a{color:var(--union)}
.leaflet-container a.leaflet-popup-close-button{color:var(--ink-2);background:#f7f0e4;border-radius:0 4px 0 6px;top:2px;right:2px}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--accent)}
.pop-status{margin-top:8px;font-size:var(--fs-min);color:var(--ink-2);line-height:1.45;font-style:italic}
.pop-status .st{font-style:normal}
.pop-body{margin-top:6px;font-size:12.5px;line-height:1.55;color:#2a2016}
.pop-body p{margin:0 0 6px}
.pop-src{margin-top:6px;font-size:var(--fs-min);line-height:1.5;color:var(--ink-2)}
/* The popup card (battle_app.js popCard): a head that stays put, tabs, and one panel at a time
   that scrolls. settleHeight() fixes the card's height when it opens, to its tallest panel or to
   what the map can show (popLimits), so a long place scrolls inside the card instead of running
   off a tablet's map. The panel's shading at top and bottom appears only when there is more to
   scroll to (local backgrounds over scroll-attached shadows). Shiloh's popups are not cards. */
.pop-card{display:flex;flex-direction:column;min-height:0}
.pop-head{flex:none;padding-right:14px}
.pop-head .pop-badge{margin-bottom:5px}
.pop-tabs{flex:none;display:flex;flex-wrap:wrap;gap:0 2px;border-bottom:1px solid var(--line)}
.pop-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:6px 8px 5px;cursor:pointer;font:600 var(--fs-min)/1.2 'JetBrains Mono',monospace;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink-2)}
.pop-tab:hover{color:var(--accent)}
.pop-tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.pop-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pop-panel{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  -webkit-overflow-scrolling:touch;padding:7px 3px 2px 0;
  background:linear-gradient(#f7f0e4 40%,rgba(247,240,228,0)) top/100% 16px no-repeat local,
    linear-gradient(rgba(247,240,228,0),#f7f0e4 60%) bottom/100% 16px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(60,40,20,.22),rgba(60,40,20,0)) top/100% 7px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(60,40,20,.22),rgba(60,40,20,0)) bottom/100% 7px no-repeat scroll}
.pop-panel[hidden]{display:none}
.pop-panel:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pop-panel>.pop-status:first-child,.pop-panel>.pop-body:first-child{margin-top:0}
/* A map too short for a head, tabs and a readable panel (a small phone held sideways): the
   whole card scrolls, head and tabs with it, instead of a sliver of panel. */
.pop-card.pop-short{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.pop-card.pop-short .pop-panel{flex:none;min-height:auto;overflow:visible;background:none}
.pop-card.pop-short:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pop-sec{font:600 var(--fs-min)/1.2 'JetBrains Mono',monospace;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-2);
  margin:8px 0 4px;padding-top:7px;border-top:1px solid var(--line)}
/* The numbers table inside a card fits the card's width: a narrow card (a 320 px phone) cut its
   Confederate column off, and the panel scrolls only up and down. */
.pop-card table.bp-nums{table-layout:fixed}
.pop-card table.bp-nums th,.pop-card table.bp-nums td{overflow-wrap:anywhere}
.pop-card table.bp-nums td.n{white-space:normal}
/* A finger needs a taller tab than a pointer does. */
@media(pointer:coarse){.pop-tab{padding:10px 10px 9px}}
.pop-xlink{background:none;border:none;padding:0;font:inherit;color:var(--union);cursor:pointer;border-bottom:1px dotted;text-align:left}
.pop-xlink:hover{color:var(--accent)}
/* On the dark reading stage an in-text link takes that stage's brass, as its other links do:
   the map card's Union blue measures 2.36:1 on #17110a. */
#contentStage .pop-xlink{color:#e8c877;border-bottom-color:rgba(232,200,119,.6)}
#contentStage .pop-xlink:hover{color:#fff2c8}

/* Legend card. */
#legend{position:absolute;left:12px;bottom:22px;z-index:950;max-width:260px;max-height:55vh;overflow-y:auto;
  background:rgba(247,240,228,.97);border:1.5px solid var(--gold);border-radius:8px;box-shadow:0 4px 16px var(--shadow);
  padding:9px 12px 10px;font-size:12px}
#legend[hidden]{display:none}
#legend .lg-h{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2);margin:7px 0 4px}
#legend .lg-h:first-child{margin-top:0}
#legend .lg-r{display:flex;align-items:center;gap:7px;margin:2px 0;color:var(--ink)}
#legend .lg-n{font-size:var(--fs-min);color:var(--ink-2);font-style:italic;margin-top:5px;line-height:1.4}
#legend svg{flex:none}

/* Reference stages (dark). */
.bp-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 14px}
.bp-tab{padding:6px 12px;border-radius:6px;cursor:pointer;border:1px solid rgba(201,168,108,.42);background:rgba(201,168,108,.08);
  color:#e8dcc4;font:600 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:.8px;text-transform:uppercase}
.bp-tab.on{background:#cfa75a;color:#1a1208;border-color:#cfa75a}
.bp-tab:focus-visible{outline:2px solid #f0d99a;outline-offset:2px}
.bp-lede{font-size:14.5px;line-height:1.7;color:#d6cbb2;max-width:78ch;margin:0 0 12px}
.bp-lede a,.bp-dark a{color:#d8b878}

/* Order of battle. */
.oob-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.oob-side{border-top:4px solid #a2926f;padding-top:10px}
.oob-side.US{border-top-color:#5b8fd8}
.oob-side.CS{border-top-color:#d85b5b}
.oob-army{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22px;color:#f4ecd9;line-height:1.15}
.oob-cmd{font-size:13.5px;color:#c4b99e;margin:2px 0 8px}
.oob-cmd b{color:#e8dcc4;font-weight:600}
.oob-node{margin:4px 0 0 0;border-left:2px solid rgba(201,168,108,.28);padding-left:12px}
.oob-node>summary{cursor:pointer;list-style:none;padding:5px 0;font-size:14px;color:#ece4d3}
.oob-node>summary::-webkit-details-marker{display:none}
.oob-node>summary::before{content:'▸';display:inline-block;width:14px;color:#cfa75a;transition:transform .15s}
.oob-node[open]>summary::before{transform:rotate(90deg)}
.oob-node>summary:focus-visible{outline:2px solid #f0d99a;outline-offset:2px}
.oob-lvl{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:.8px;text-transform:uppercase;color:#cfa75a;margin-right:6px}
.oob-name{font-weight:600}
.oob-by{color:#c4b99e}
.oob-units{list-style:none;margin:2px 0 6px;padding:0 0 0 14px}
.oob-units li{font-size:13.5px;line-height:1.5;color:#d6cbb2;padding:1px 0}
.oob-units li .oob-by{font-size:12.5px}
.oob-cwss{margin-top:16px;padding:10px 12px;border:1px solid rgba(201,168,108,.25);border-radius:8px;background:rgba(207,167,90,.04)}
.oob-cwss h4{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:#e8c877;margin:0 0 6px}
.oob-cwss ul{columns:2;column-gap:18px;list-style:none;padding:0;margin:6px 0 0}
.oob-cwss li{font-size:12.5px;line-height:1.5;color:#c4b99e;break-inside:avoid}
.oob-note{font-size:13px;line-height:1.6;color:#b6a888;margin:6px 0 0;max-width:78ch}

/* Articles. */
.ar-layout{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:start}
.ar-index{position:sticky;top:0}
.ar-gh{font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:#e8c877;margin:16px 0 6px}
.ar-gh:first-child{margin-top:0}
.ar-link{all:unset;display:block;cursor:pointer;padding:6px 9px;border-radius:5px;font-size:14px;line-height:1.35;color:#d6cbb2}
.ar-link:hover,.ar-link:focus-visible{background:rgba(207,167,90,.12);color:#f4ecd9}
.ar-link.on{background:rgba(207,167,90,.2);color:#f4ecd9}
.ar-link .ar-ph-t{display:block;font:var(--fs-min) 'JetBrains Mono',monospace;color:#b6a888;margin-top:2px}
.ar-title{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;color:#f4ecd9;line-height:1.1;margin:0 0 6px}
.ar-sum{font-size:15px;font-style:italic;color:#cfbf9c;line-height:1.55;margin:0 0 16px;max-width:72ch}
.ar-body{max-width:72ch}
.ar-body h3{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:21px;color:#f0e3c6;margin:20px 0 6px}
.ar-body p{font-size:15px;line-height:1.75;color:#ddd2ba;margin:0 0 13px}
.ar-body blockquote{margin:6px 0 14px;padding:4px 0 4px 14px;border-left:3px solid #cfa75a;font-style:italic;color:#e3d7bd;font-size:15px;line-height:1.7}
.ar-foot{margin-top:24px;padding-top:12px;border-top:1px solid rgba(207,167,90,.3);font-size:13px;color:#b6a888;line-height:1.6}

/* Home: everywhere this page can take you, and the other battles. */
.home-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:10px 0 20px}
.home-card{all:unset;box-sizing:border-box;display:block;cursor:pointer;padding:14px 16px;border-radius:9px;
  border:1px solid rgba(201,168,108,.35);background:rgba(207,167,90,.06);transition:background .15s,border-color .15s}
.home-card:hover,.home-card:focus-visible{background:rgba(207,167,90,.14);border-color:#cfa75a}
.home-card .hc-t{display:block;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:20px;color:#f4ecd9;line-height:1.15}
.home-card .hc-s{display:block;font-size:13.5px;line-height:1.5;color:#c4b99e;margin-top:4px}
.home-card .hc-k{display:block;font:700 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:#e8c877;margin-bottom:4px}
.home-card.here{border-style:dashed;cursor:default}
.home-h{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:23px;color:#f0e3c6;margin:22px 0 4px;padding-bottom:6px;border-bottom:1px solid rgba(207,167,90,.3)}

/* Sources page tables. */
#sourcesStage .src-sec{margin:30px 0 0}
#sourcesStage .src-h{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:23px;line-height:1.15;color:#f0e3c6;
  margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(207,167,90,.3)}
#sourcesStage .src-lede{font-size:14px;line-height:1.65;color:#b6a888;margin:0 0 12px;max-width:78ch}
#sourcesStage .src-defs{margin:0 0 14px;max-width:78ch}
#sourcesStage .src-defs dt{font-family:'JetBrains Mono',monospace;font-size:var(--fs-min);letter-spacing:1.4px;text-transform:uppercase;color:#e8c877;margin-top:14px}
#sourcesStage .src-defs dt:first-child{margin-top:0}
#sourcesStage .src-defs dd{margin:5px 0 0;font-size:14px;line-height:1.6;color:#c4b99e}
#sourcesStage .src-defs dd a,#sourcesStage .src-lede a{color:#d8b878}
.ix-scroll{overflow-x:auto;border:1px solid rgba(201,168,108,.25);border-radius:8px}
table.ix{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
table.ix th{position:sticky;top:0;background:#2a2016;color:#e8c877;text-align:left;font:700 var(--fs-min) 'JetBrains Mono',monospace;
  letter-spacing:.8px;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid rgba(201,168,108,.35);white-space:nowrap}
table.ix td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.07);color:#d6cbb2;vertical-align:top}
table.ix td.num{font-family:'JetBrains Mono',monospace;font-size:12.5px;text-align:right;white-space:nowrap}
table.ix .sub{display:block;font-size:12px;color:#a2957a}
table.ix a{color:#d8b878;word-break:break-all}
table.ix .ev{font-style:italic;color:#c9bc9e}
details.src-more>summary{cursor:pointer;color:#e8c877;font:600 var(--fs-min) 'JetBrains Mono',monospace;letter-spacing:.8px;text-transform:uppercase;margin:8px 0}
details.src-more>summary:focus-visible{outline:2px solid #f0d99a}

@media (prefers-reduced-motion:reduce){.mc-popover.open{animation:none}}
@media(max-width:720px){ :root{ --fs-min:12px } }
@media(pointer:coarse){ :root{ --fs-min:12px } }
@media(max-width:900px){
  .oob-cols{grid-template-columns:1fr}
  .ar-layout{grid-template-columns:1fr}
  .ar-index{position:static}
}
@media(max-width:720px){
  #app{flex-direction:column}
  #sidebar{width:100%;flex:0 0 auto;height:auto;max-height:46vh;border-right:none;border-bottom:3px solid var(--gold)}
  #mapWrap{flex:1}
  #shellNav{padding:0 8px}
  #shellNav .shell-brand{font-size:19px;padding-right:12px}
  #shellNav .shell-brand .bsub{display:none}
  #shellNav .navbtn{padding:0 9px}
  #shellNav .nb-long{display:none}
  #shellNav .nb-short{display:inline}
  #shellNav .nav-div{display:none}
  .map-controls{top:8px;right:8px}
  .mc-btn{width:auto;height:36px;padding:0 10px}
  .mc-btn .mc-lbl{display:none}
  .mc-popover{width:min(270px,calc(100vw - 80px));right:48px}
  #legend{left:8px;bottom:18px;max-width:200px}
  .cstage-wrap{padding:22px 16px 40px}
  .oob-cwss ul{columns:1}
}
/* A phone: the brand keeps only its star (the button keeps its full aria-label), and the
   destinations scroll sideways under a fade that says there is more; showStage() keeps the
   active one in view. Every destination is also a card on the brand's own site index. */
@media(max-width:560px){
  #shellNav .shell-brand{padding-right:10px;margin-right:4px}
  #shellNav .shell-brand .bt-name{display:none}
  #shellNav .shell-brand .glyph{font-size:19px;margin-right:0}
  #shellNav .navwrap{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent);scrollbar-width:none}
  #shellNav .navwrap::-webkit-scrollbar{display:none}
}