/* Mapping Erasure — visual language from the Figma mock:
   deep navy ground, faint isthmus silhouette behind a serif display title,
   monospace body text, light rounded cards, medium-dark red accents.
   The MARKER colours on the map are data encodings (MacEachren 1992) and are
   deliberately untouched by this theme — the red is interface chrome only. */

:root{
  --bg:#14456B;            /* page navy */
  --bg-light:#2A6291;      /* watermark / raised navy */
  --card:#E5E3DD;          /* chips / controls gray */
  --card-deep:#D8D5CE;     /* pressed / hover gray */
  --panel:#F7F6F3;         /* panel + popup ground: near-white */
  --rule:rgba(19,49,75,0.12);   /* hairline dividers on panels */
  --ink:#13314B;           /* text on cards */
  --paper:#E8EEF4;         /* text on navy */
  --paper-dim:rgba(232,238,244,0.65);
  --accent:#A03030;        /* medium-dark red */
  --accent-dark:#7C2323;
  --radius:18px;
  --mono:"Courier New", Courier, ui-monospace, Menlo, monospace;
  --serif:"Aboreto", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box;}
body{
  font-family:var(--mono);
  background:var(--bg);
  color:var(--paper);
  margin:0;
  padding:20px clamp(14px, 4vw, 48px) 40px;
  max-width:1320px;   /* wide enough for the map+legend row and four panels abreast */
  margin-inline:auto;
  line-height:1.45;
}

/* ---------- header ---------- */
.hdr{position:relative; text-align:center; padding:clamp(18px,5vw,54px) 0 6px; overflow:hidden;}
.isthmus{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(820px,100%); height:auto; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 55%, transparent 92%);
}
.isthmus path{fill:var(--bg-light); opacity:0.45;}
.hdr h1,.hdr .sub,.hdr .note{position:relative;}
.hdr h1{
  font-family:var(--serif);
  font-size:clamp(34px, 7vw, 64px);
  font-weight:400;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#fff;
  /* Aboreto is hairline-thin; the Figma sets a 2.5px stroke on the 64px title,
     so the stroke scales with the type (2.5/64 = 0.04em) */
  -webkit-text-stroke:0.04em #fff;
  margin:0 0 6px;
}
.hdr .sub{
  font-size:clamp(13px, 2.2vw, 20px);
  color:#fff;
  margin:0 0 26px;
  letter-spacing:0.02em;
}
.hdr .note{
  font-size:12px;
  color:var(--paper-dim);
  max-width:76ch;
  margin:0 auto 8px;
}

/* ---------- control + filter rows ---------- */
.controls,.filters{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:stretch;
  justify-content:center; margin:14px 0 0;
}
.filters{margin-top:12px;}
/* each tray groups one set of related controls */
.tray{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  justify-content:center; padding:8px 14px; border-radius:18px;
  border:1px solid rgba(232,238,244,0.18);
  background:rgba(232,238,244,0.05);
}
/* filter dropdowns share one width so the pairs read as a tidy grid */
.filters select{width:170px;}
/* the time tray absorbs the row's leftover width so its slider can grow
   without pushing the ghosts toggle onto a second line */
.controls .tray:last-child{flex:1 1 auto;}
.tray-label{
  font-size:10px; font-weight:bold; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--paper-dim); margin-right:2px;
}
.group{display:inline-flex; align-items:center; gap:6px;}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); color:var(--ink);
  font-family:var(--mono); font-weight:bold; font-size:13px;
  padding:4px 12px; border-radius:999px; white-space:nowrap;
}
.yrchip{min-width:11ch; justify-content:center;}
.group{max-width:100%;}
select{
  background:var(--card); color:var(--ink);
  font-family:var(--mono); font-weight:normal; font-size:13px;
  border:none; border-radius:10px; padding:5px 8px;
  max-width:min(58vw, 280px);
}
select:focus,button:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
button{
  font-family:var(--mono); font-weight:bold; font-size:13px;
  background:var(--accent); color:#fff;
  border:none; border-radius:999px; padding:5px 16px; cursor:pointer;
}
button:hover{background:var(--accent-dark);}
input[type=range]{accent-color:var(--accent); flex:1 1 180px; min-width:140px; max-width:300px;}
input[type=checkbox]{accent-color:var(--accent);}

/* the little "why" badges that explain design choices */
.why{
  display:inline-block; width:15px; height:15px; border-radius:50%;
  background:transparent; color:inherit; opacity:0.75;
  font-size:10px; text-align:center; line-height:13px; cursor:help;
  border:1px solid currentColor; font-weight:bold; flex:none;
}
.why:hover{background:var(--accent); border-color:var(--accent); color:#fff; opacity:1;}

/* view caption + epilogue share one centered row; the epilogue joins beside the
   caption when the slider reaches the present rather than dangling below it */
.caprow{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  justify-content:center; margin:12px auto 0; text-align:center;
}
/* the view caption: a wide tray-styled box with roomier type, so the
   one-line description of each view stays readable */
.desc{
  font-size:12.5px; color:rgba(232,238,244,0.8); margin:0;
  max-width:104ch; line-height:1.65;
  padding:9px 20px; border-radius:14px;
  border:1px solid rgba(232,238,244,0.18);
  background:rgba(232,238,244,0.05);
}
.desc:empty{display:none;}
.epi{
  font-size:12px; background:var(--panel); color:var(--ink);
  border-left:4px solid var(--accent); text-align:left; line-height:1.55;
  padding:10px 18px 11px; margin:0; max-width:88ch; border-radius:0 10px 10px 0;
}
.epi-h{
  font-size:10px; font-weight:bold; letter-spacing:0.09em; text-transform:uppercase;
  color:#8A857C; margin-bottom:5px;
}
.epi-stats{display:flex; flex-wrap:wrap; gap:3px 16px; margin-bottom:6px;}
.epi-stats b{color:var(--accent); font-size:14px; margin-right:2px;}
.epi-note{font-size:11px; color:#7A756B; line-height:1.5;}

/* ---------- map ---------- */
/* the legend rides beside the map; the map keeps most of the width */
.maprow{
  display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:14px; margin-top:14px; align-items:stretch;
}
.sidecol{display:flex; flex-direction:column; gap:14px; min-height:0;}
#legpanel{flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin;}
.mapwrap{display:flex; flex-direction:column;}
#eyebar{
  background:var(--accent-dark); color:#fff;
  padding:8px 14px; font-size:13px;
  border-radius:var(--radius) var(--radius) 0 0;
}
#eyebar .eyesub{font-weight:normal; color:#EBD9D6;}
#eyebar button{margin-left:8px; background:#fff; color:var(--accent-dark); padding:2px 12px;}
#eyebar button:hover{background:var(--card);}
#eyebar:not([hidden]) + #map{border-radius:0 0 var(--radius) var(--radius);}
#map{
  width:100%; flex:1; min-height:clamp(440px, 66vh, 740px);
  border:none; border-radius:var(--radius);
  background:#cfd6da;
}

/* ---------- panel cards ---------- */
.panels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(290px,100%), 1fr));
  gap:14px; margin-top:16px;
}
.panel{
  background:var(--panel); color:var(--ink);
  border-radius:var(--radius); padding:16px 18px; font-size:12.5px;
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}
.pt{
  font-weight:bold; font-size:13px; text-transform:uppercase; letter-spacing:0.07em;
  display:flex; align-items:center; gap:8px;
  padding-bottom:7px; border-bottom:2px solid var(--accent); margin-bottom:8px;
}
.ps{font-size:11px; color:#7A756B; margin:-2px 0 10px;}
/* panel order switches (located places, sources): a two-state segmented control in the panel title */
#locsort,#srcsort{margin-left:auto; display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; flex:none;}
#locsort .sortbtn,#srcsort .sortbtn{
  font-size:10px; letter-spacing:0.05em; text-transform:none;
  background:var(--panel); color:#7A756B; padding:2px 9px; border-radius:0;
}
#locsort .sortbtn:not(.on):hover,#srcsort .sortbtn:not(.on):hover{background:var(--card-deep); color:var(--ink);}
#locsort .sortbtn.on,#srcsort .sortbtn.on{background:var(--accent); color:#fff;}
.leg-sec{
  font-size:10px; font-weight:bold; letter-spacing:0.09em; text-transform:uppercase;
  color:#8A857C; margin:12px 0 5px; padding-bottom:3px; border-bottom:1px solid var(--rule);
}
.leg-sec:first-of-type{margin-top:2px;}
.leg-row{display:flex; align-items:center; gap:8px; margin:6px 0; line-height:1.35;}
.sw{width:14px; height:14px; flex:none; border-radius:3px;}
.lsw{width:22px; height:18px; flex:none;}   /* geometry/time keys draw the ACTUAL symbol */
/* long lists scroll inside their panel instead of stretching the whole row */
#srclist,#unloc,#loclist{
  max-height:480px; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-width:thin;
}
.uitem{
  padding:7px 8px; margin:0 -8px; border-bottom:1px solid var(--rule);
  border-left:3px solid transparent; border-radius:0 6px 6px 0; cursor:pointer;
}
.uitem:hover{background:var(--card); border-left-color:var(--accent);}
.uitem:last-child{border-bottom:none;}
.un-name{font-weight:bold;}
.un-co{font-size:11px; color:#7A756B; margin-top:1px;}
.uitem .un-co{margin-left:14px;}
.dot-abs{display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:1px; border-radius:50%;}
.src-row{
  cursor:pointer; margin:0 -8px; padding:7px 8px;
  border-left:3px solid transparent; border-radius:0 6px 6px 0;
  border-bottom:1px solid var(--rule);
}
.src-row:last-child{border-bottom:none;}
.src-row:hover{background:var(--card); border-left-color:var(--accent);}
.src-ttl{font-weight:bold; line-height:1.3;}
.src-neg{color:var(--accent); font-weight:bold;}

/* ---------- the archives behind the sources ---------- */
/* full-width panel below the three list panels: the corpus itself, two columns
   split by affiliation. Everything stays in the interface palette - affiliation
   is encoded by COLUMN and text, never by inventing a new hue (data hues are
   reserved for the map's own encodings). */
.arch-panel{margin-top:14px;}
/* the finding leads the section: full panel width, roomier type */
.arch-note{
  font-size:12.5px; background:var(--card); border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0; padding:12px 18px; margin:4px 0 16px; line-height:1.65;
}
.arch-cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(340px,100%), 1fr));
  gap:10px 28px; align-items:start;
}
.arch-colttl{
  font-size:12px; font-weight:bold; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink); padding-bottom:5px; border-bottom:2px solid var(--accent);
}
/* per-column tallies as small pills, so the counts read at a glance */
.arch-coltally{display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 2px;}
.arch-coltally span{
  background:var(--card); border-radius:999px; padding:2px 10px;
  font-size:10.5px; color:#6d675e;
}
.arch-coltally b{color:var(--accent-dark); margin-right:1px;}
/* each archive is a raised card: header + chips above the rule,
   holdings quieter below it */
.arch-card{
  background:#fff; border:1px solid var(--rule); border-radius:12px;
  padding:12px 14px 11px; margin:10px 0;
  box-shadow:0 1px 5px rgba(0,0,0,0.06);
}
.arch-oos{opacity:0.55;}
.arch-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.arch-id{min-width:0;}
.arch-h{font-weight:bold; font-size:13px; line-height:1.35;}
.arch-h .pop-id{white-space:nowrap;}
.arch-tags{margin-top:8px;}
/* the access route reads differently from the affiliation: outlined, not filled */
.arch-tags .arch-acc{background:transparent; border:1px solid #B7B1A5; color:#6d675e;}
/* not-yet-searched: dashed, matching the map's dashed marks for the unrecorded */
.arch-tags .arch-unsearched{
  background:transparent; border:1px dashed var(--accent-dark);
  color:var(--accent-dark); font-weight:bold;
}
/* the archive linked back to its sources: clickable rows into the source-eye view */
.arch-srcs li::before{content:"\2192";}   /* arrow bullets for the linked source rows */
.arch-nosrc{font-size:11.5px; color:#7A756B; margin-top:3px;}
/* digitization meter: three steps - none / minimal / partial / full - filled in ink,
   the section's one quantitative mark: how searchable is this archive from afar */
.arch-digblock{flex:none; text-align:right; max-width:150px;}
.arch-meter{display:flex; gap:3px; justify-content:flex-end;}
.arch-meter i{
  width:22px; height:7px; border-radius:2px;
  background:transparent; border:1px solid #9A948A;
}
.arch-meter i.on{background:var(--ink); border-color:var(--ink);}
.arch-dig{display:block; font-size:10px; color:#7A756B; margin-top:3px; line-height:1.35;}
.arch-holdwrap{border-top:1px solid var(--rule); margin-top:10px;}
.arch-hold{list-style:none; margin:3px 0 0; padding:0;}
.arch-hold li{
  position:relative; padding-left:15px; margin:3px 0;
  font-size:11.5px; line-height:1.5; color:#4A463E;
}
.arch-hold li::before{content:"\2014"; position:absolute; left:0; color:#B7B1A5;}

/* ---------- popups ---------- */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--panel); color:var(--ink);
  font-family:var(--mono);
  border-radius:12px;
}
/* mini pop-up behind every "?" badge */
#whypop{
  position:absolute; z-index:3000;
  background:var(--panel); color:var(--ink);
  font-family:var(--mono); font-size:12px; line-height:1.55;
  padding:10px 13px; max-width:min(320px, calc(100vw - 24px));
  border-radius:10px; border-top:3px solid var(--accent);
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
}
.leaflet-popup-content{margin:11px 13px;}
/* long records scroll inside the bubble; tint Leaflet's scroll borders to match */
.leaflet-popup-scrolled{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
/* floating record card for unlocated places (no marker to anchor a popup to) */
#recpop{
  position:fixed; z-index:4000; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px, calc(100vw - 28px)); max-height:min(68vh, 540px); overflow:auto;
  background:var(--panel); color:var(--ink); font-family:var(--mono);
  border-radius:14px; border-top:4px solid var(--accent);
  box-shadow:0 12px 48px rgba(0,0,0,0.5); padding:12px 16px 14px;
}
/* the title bar is the drag handle */
#recpop .pop-h{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;}
#recclose{
  position:sticky; top:0; float:right; margin-left:8px;
  background:transparent; color:var(--ink); border:none;
  font-size:19px; line-height:1; padding:0 4px; cursor:pointer;
}
#recclose:hover{color:var(--accent); background:transparent;}
.pop{font-size:12.5px; min-width:260px; line-height:1.55;}
/* header echoes the panel titles: name over a red rule, id muted beside it */
.pop-h{font-weight:bold; font-size:13.5px; padding-bottom:5px; border-bottom:2px solid var(--accent); margin-bottom:5px;}
.pop-id{color:#77716a; font-weight:normal; font-size:11px;}
.pop-sub{color:#7A756B; font-size:11px; margin:2px 0 7px;}
.pop-tags{margin-bottom:2px;}
.pop-tags span{background:var(--card); padding:1px 7px; margin:0 3px 3px 0; display:inline-block; font-size:11px; border-radius:999px;}
.pop-tags .warn{background:var(--accent); color:#fff;}
/* the one dynamic line - what the slider year means for this place - gets its own chip */
.pop-status{display:flex; gap:8px; background:var(--card); border-radius:8px; padding:4px 9px; margin:8px 0 2px;}
/* section headings match the Legend panel's mini-sections */
.pop-srcttl{
  font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:0.08em;
  color:#8A857C; margin:11px 0 4px; padding-bottom:2px; border-bottom:1px solid var(--rule);
}
/* evidence rows: a muted right-aligned key column (year / count / ±m), content beside it */
.ev{display:flex; gap:8px; margin:3px 0;}
.ev-k{flex:0 0 52px; text-align:right; color:#9A948A; font-size:10px; line-height:1.75; white-space:nowrap;}
.ev-v{flex:1; min-width:0;}
.evt,.evo{color:#6d675e;}
/* links between records: a town's card to its features, a feature's back to its town */
.placelink{color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.placelink:hover{color:var(--accent);}
.eyetip{font-size:11px; font-family:var(--mono);}

/* ---------- reading guide: deliberately quieter than the app above it ---------- */
#guide{
  margin-top:110px; padding-top:34px;
  border-top:1px solid rgba(232,238,244,0.25);
  font-size:12px; color:var(--paper-dim); line-height:1.6;
}
#guide h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(20px, 3vw, 28px);
  letter-spacing:0.05em; text-transform:uppercase; color:#fff;
  -webkit-text-stroke:0.03em #fff; text-align:center; margin:0 0 20px;
}
#guide b{color:var(--paper); font-weight:bold;}
#guide .g-pop b{color:var(--ink);}       /* inside the white template card, bold stays ink */
.guide-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
  gap:18px 36px; max-width:980px; margin:0 auto;
}
.g-wide{grid-column:1 / -1;}
.g-ttl{
  font-size:11px; font-weight:bold; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--paper); border-bottom:1px solid rgba(232,238,244,0.25);
  padding-bottom:4px; margin-bottom:9px;
}
/* interface steps: red badge + icon + one sentence, in a balanced grid */
.g-steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr)); gap:2px 36px;}
.g-step{display:flex; gap:9px; margin:7px 0; align-items:flex-start;}
.g-step .gn{position:static; flex:none; margin-top:1px;}
.g-ic{flex:none; width:17px; height:17px; margin-top:1px; color:var(--paper); opacity:0.9;}
/* the template map: every symbol drawn in the map's own style, numbered like the record */
.g-lede{margin:0 0 12px; max-width:95ch;}
.g-map{
  flex:0 1 420px; background:#EDECE7; border-radius:12px; padding:10px;
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}
.g-map svg{display:block; width:100%; height:auto;}
.g-ex{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:flex-start;}
/* the template record: styled exactly like a live popup, numbered in the gutter */
.g-pop{
  position:relative; margin-left:26px; flex:0 1 330px;
  background:var(--panel); color:var(--ink);
  border-radius:12px; padding:11px 13px;
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}
.gn{
  position:absolute; left:-26px;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-style:normal; font-size:10px; font-weight:bold;
  text-align:center; line-height:16px;
}
.g-key{flex:1 1 300px; min-width:min(280px,100%);}
.g-key div{margin:6px 0;}
.g-key .gn{position:static; display:inline-block; margin-right:8px; vertical-align:1px;}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .maprow{grid-template-columns:1fr;}   /* legend drops below the map on narrow screens */
}
@media (max-width:640px){
  body{padding:12px 12px 28px;}
  .hdr .sub br{display:none;}
  .controls,.filters{gap:8px;}
  .tray{width:100%; justify-content:center;}
  input[type=range]{flex-basis:100%; max-width:none; order:5;}
  #map{min-height:min(70vh, 520px);}
}

/* find box: one query across both place panels, matching every recorded name */
.findbar{margin:16px auto 0; max-width:520px;}
.findbar input{
  width:100%; box-sizing:border-box; padding:10px 14px 10px 40px;
  background-color:var(--panel); color:var(--ink);
  /* the magnifying glass, inlined so it needs no extra request */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A756B' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='4.6'/%3E%3Cline x1='10.2' y1='10.2' x2='14.4' y2='14.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:15px center; background-size:15px 15px;
  font-family:var(--mono); font-size:13px;
  border:none; border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}
.findbar input::placeholder{color:#7A756B;}

/* the showing switch gets its own row and more weight than a filter */
.scalerow{display:flex; justify-content:center; margin-top:8px;}
#scaleswitch{display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden;}
#scaleswitch .scbtn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.03em;
  background:var(--panel); color:#7A756B; padding:7px 18px; border:none; cursor:pointer; border-radius:0;
}
#scaleswitch .scbtn:not(.on):hover{background:var(--card-deep); color:var(--ink);}
#scaleswitch .scbtn.on{background:var(--accent); color:#fff; font-weight:bold;}

/* Reset: styled quieter than Play */
#reset,#play{background:var(--card); color:var(--ink);}
#reset:hover,#play:hover{background:var(--card-deep);}

/* corner shortcut to the reading guide, so the guide is never lost below the fold */
#guidebtn{
  position:fixed; right:18px; top:14px; z-index:3000;
  background:var(--panel); color:var(--ink);
  font-family:var(--mono); font-weight:bold; font-size:11.5px; letter-spacing:0.04em;
  border:none; border-left:4px solid var(--accent); border-radius:10px;
  padding:8px 14px; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,0.35);
}
#guidebtn:hover{background:var(--card);}
#guidebtn.offstage{opacity:0; pointer-events:none; transition:opacity 0.25s;}