/* 
  Tynwald Day narrative map
  Design principle: mobile-first interaction, calm Sanborn-inspired archival sheet aesthetics,
  and restrained visual hierarchy so ceremony sites and civic boundaries remain primary.
*/
:root{
  --radius:5px;
  --paper:#f7efe0;
  --paper-deep:#eadbbf;
  --ink:#211b16;
  --muted:#6f6255;
  --red:#7a1e1e;
  --gold:#d5a944;
  --blue:#315f88;
  --line:#2b2520;
  --panel:rgba(247,239,224,.96);
  --shadow:0 12px 32px rgba(34,24,16,.22);
  --touch:48px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  font-family: Georgia, "Times New Roman", serif;
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
}

.skip-link{
  position:absolute;left:-999px;top:8px;z-index:9999;
  background:#fff;color:#000;padding:.75rem;border:2px solid #000;
}
.skip-link:focus{left:8px}

.map-title{
  position:absolute;
  z-index:850;
  left:22px; right:22px; top:22px;
  pointer-events:none;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.map-title .kicker{
  margin:0 0 2px 0;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:700;
}
.map-title h1{
  margin:0;
  font-size:clamp(1.16rem, 5vw, 2.6rem);
  line-height:1.02;
  font-weight:700;
  max-width:16ch;
}
.map-title .subtitle{
  display:none;
}

.app-shell{position:relative;height:100%;width:100%;overflow:hidden}
#map{
  position:absolute;inset:0;z-index:1;background:var(--paper);
  filter:saturate(.82) contrast(.96);
}

/* Subtle archival sheet texture over the slippy map. */
#map::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:420;
  background:
    radial-gradient(circle at 18% 12%, rgba(122,30,30,.05), transparent 28%),
    radial-gradient(circle at 72% 82%, rgba(94,72,31,.07), transparent 22%),
    repeating-linear-gradient(0deg, rgba(33,27,22,.018), rgba(33,27,22,.018) 1px, transparent 1px, transparent 5px);
  mix-blend-mode:multiply;
}

/* Leaflet z-order: map panes stay below DOM controls. */
.leaflet-pane{z-index:200}
.leaflet-tile-pane{z-index:100}
.leaflet-overlay-pane{z-index:250}
.leaflet-shadow-pane{z-index:300}
.leaflet-marker-pane{z-index:350}
.leaflet-tooltip-pane{z-index:360}
.leaflet-popup-pane{z-index:370}
.leaflet-control-container{display:none}

.loading-card{
  position:absolute;z-index:920;left:50%;top:48%;
  transform:translate(-50%,-50%);
  min-width:220px;
  padding:16px 18px;
  border:2px solid var(--ink);
  background:var(--panel);
  box-shadow:var(--shadow);
  text-align:center;
  font-size:1rem;
}
.loader-dot{
  display:inline-block;width:.8em;height:.8em;margin-right:.45rem;
  border-radius:var(--radius);background:var(--red);
  animation:pulse 1.1s infinite ease-in-out;
}
@keyframes pulse{50%{opacity:.25;transform:scale(.75)}}

.top-actions{
  position:absolute;z-index:890;right:10px;top:12px;
  display:flex;gap:8px;align-items:center;
}
.round-btn,.nav-btn,.legend-toggle,.icon-btn{
  min-height:var(--touch);
  min-width:var(--touch);
  border:2px solid var(--ink);
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 4px 14px rgba(28,20,12,.18);
  font:700 .88rem/1.1 system-ui, -apple-system, Segoe UI, sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}
.round-btn{border-radius:var(--radius);padding:0 14px}
.round-btn:active,.nav-btn:active,.legend-toggle:active,.icon-btn:active{transform:translateY(1px)}
.icon-btn{border-radius:var(--radius);font-size:1.45rem;line-height:1}

.story-panel{
  position:absolute;z-index:880;
  left:10px;right:10px;bottom:calc(10px + var(--safe-bottom));
  padding:12px 14px 14px;
  background:var(--panel);
  border:2px solid var(--ink);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  max-height:45vh;
  overflow:auto;
}
.story-panel.is-hidden{transform:translateY(calc(100% - 46px))}
.grabber{
  width:42px;height:5px;border-radius:var(--radius);background:#8c8173;margin:0 auto 8px;
}
.step-count{
  margin:.1rem 0 .2rem;
  color:var(--red);
  font:700 .72rem/1 system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
}
.story-panel h2{
  margin:.2rem 0 .35rem;font-size:1.04rem;line-height:1.1;
}
.story-panel p{font-size:.95rem;line-height:1.35;margin:.25rem 0}
.story-actions{display:flex;gap:10px;margin-top:10px}
.nav-btn{
  flex:1;border-radius:var(--radius);padding:0 16px;background:#fffaf0;
}
.nav-btn.primary{background:var(--red);color:#fffaf0;border-color:var(--red)}
.nav-btn:disabled{opacity:.45}

.side-panel{
  position:absolute;z-index:900;right:10px;top:72px;width:min(330px, calc(100vw - 20px));
  padding:12px;
  background:var(--panel);
  border:2px solid var(--ink);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.panel-header h2{font-size:1.05rem;margin:0}
.side-panel label{
  display:flex;align-items:center;gap:10px;
  min-height:46px;
  padding:7px 2px;
  font:600 .92rem/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
}
.side-panel input{width:24px;height:24px;accent-color:var(--red)}
.panel-note{font-size:.82rem;line-height:1.25;color:var(--muted);margin:8px 2px 0}

.legend{
  position:absolute;z-index:870;left:10px;top:86px;
  width:min(270px, calc(100vw - 20px));
  background:var(--panel);
  border:2px solid var(--ink);
  box-shadow:0 5px 20px rgba(28,20,12,.16);
  border-radius:var(--radius);
  overflow:hidden;
  font:600 .8rem/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
}
.legend-toggle{width:100%;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:#fff7e7}
.legend-body{padding:10px;display:grid;gap:7px}
.legend.collapsed .legend-body{display:none}
.legend hr{width:100%;border:0;border-top:1px solid rgba(33,27,22,.25);margin:2px 0}
.swatch{
  display:inline-block;width:22px;height:14px;margin-right:7px;vertical-align:-2px;
  border:1.5px solid var(--ink);background:#fff;
}
.swatch.island{background:#f7efe0;border-color:#7a1e1e}
.swatch.sheading{background:repeating-linear-gradient(90deg,#b89b5e 0 5px, transparent 5px 8px)}
.swatch.keys{background:#fff;border-color:#202020}
.swatch.route{height:4px;background:repeating-linear-gradient(90deg,#7a1e1e 0 8px,transparent 8px 12px);border:0}
.swatch.site{width:16px;height:16px;border-radius:50%;background:#ffd166;border-color:#7a1e1e}
.swatch.b-civic{background:#f4d2d0}
.swatch.b-commercial{background:#f7dda7}
.swatch.b-religious{background:#d7e5cc}
.swatch.b-industrial{background:#c7d5e7}

.modal-backdrop[hidden]{display:none!important}
.modal-backdrop{
  position:absolute;inset:0;z-index:930;
  background:rgba(25,20,16,.34);
  display:flex;align-items:flex-end;justify-content:center;
  padding:14px;
}
.modal-card{
  position:relative;
  width:min(720px,100%);
  max-height:82vh;
  overflow:auto;
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:18px 18px 22px;
}
.modal-close{position:absolute;right:10px;top:10px;background:#fffaf0}
.modal-card h2{margin:.2rem 46px .8rem 0}
.modal-card p{line-height:1.42}
.modal-card a{color:var(--red);font-weight:700}
.made-with{border-top:1px solid rgba(33,27,22,.28);padding-top:.8rem}

/* Popup and label styling */
.leaflet-popup-content-wrapper{
  border:2px solid var(--ink);
  border-radius:var(--radius);
  background:#fff7e7;
  color:var(--ink);
  box-shadow:0 8px 24px rgba(34,24,16,.24);
}
.leaflet-popup-tip{background:#fff7e7;border:1px solid var(--ink)}
.leaflet-popup-content{margin:12px 14px;font:500 .92rem/1.35 system-ui, sans-serif}
.popup-title{font:700 1rem/1.15 Georgia, serif;margin-bottom:.25rem;color:var(--red)}
.popup-row{margin:.15rem 0}
.popup-key{font-weight:800;color:#5d5145}

.label-chip{
  color:var(--ink);
  background:rgba(247,239,224,.78);
  border:1px solid rgba(33,27,22,.55);
  border-radius:var(--radius);
  padding:1px 4px;
  font:700 10px/1.1 Georgia, serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-label{
  color:var(--red);
  text-shadow:0 1px 0 #fff8ee, 1px 0 0 #fff8ee, -1px 0 0 #fff8ee, 0 -1px 0 #fff8ee;
  font:700 13px/1.05 Georgia, serif;
  white-space:nowrap;
}
.abbrev-label{
  color:rgba(33,27,22,.72);
  font:700 9px/1 monospace;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  white-space:nowrap;
}

@media (max-width: 520px){
  .top-actions{top:auto;bottom:calc(52vh + var(--safe-bottom));right:10px;flex-direction:column}
  .round-btn{min-width:78px}
  .legend{top:76px;left:8px;width:218px}
  .legend-body{font-size:.76rem}
}

@media (min-width: 780px){
  body{background:#e8dcc4}
  .map-title{left:50px;top:50px}
  .map-title .subtitle{display:block;max-width:34ch;margin:.45rem 0 0;font-size:1rem;line-height:1.32}
  #map{
    inset:24px;
    border:3px solid var(--ink);
    box-shadow:0 12px 40px rgba(34,24,16,.24);
  }
  .top-actions{right:40px;top:40px}
  .story-panel{
    left:40px;right:auto;bottom:40px;width:390px;max-height:48vh;border-radius:var(--radius);
  }
  .legend{left:auto;right:40px;top:105px}
  .side-panel{right:40px;top:105px}
  .story-panel h2{font-size:1.25rem}
  .story-panel p{font-size:1rem}
}