/* mapscrolly.css — embedded scrollytelling data maps.
   One <section class="mapscrolly"> per map, spliced into a chapter's flow.
   The sticky map on the right updates as the reader scrolls the step cards on
   the left. Reuses the chapter palette (--ink, --parch, --accent, --gold …),
   so it must be linked *after* the chapter's own <style>.
   Driven by js/mapscrolly.js; the map SVG carries its own <style> and colours. */

.mapscrolly{
  margin:70px auto 60px;
  max-width:min(60rem,calc(100vw - clamp(120px,13vw,170px) - 56px));
  padding:0 22px;
}
.mapscrolly .ms-intro{max-width:var(--measure,38rem);margin:0 auto 6px;padding:0}
.mapscrolly .ms-kicker{font-family:var(--disp);letter-spacing:4px;text-transform:uppercase;
  font-size:11.5px;color:var(--gold);font-weight:700;margin-bottom:8px}
.mapscrolly h2{font-family:var(--disp);font-weight:700;line-height:1.1;margin:0 0 8px;
  font-size:clamp(24px,3.4vw,34px)}
.mapscrolly h2 em{font-style:italic;color:var(--accent);font-weight:400}
.mapscrolly .ms-sub{font-size:clamp(15px,1.9vw,18px);color:var(--ink-soft);font-style:italic;margin:0}

/* ---------- the scrolly grid ---------- */
.mapscrolly .ms-scrolly{display:grid;grid-template-columns:minmax(14rem,19rem) 1fr;gap:30px;
  align-items:start;margin-top:14px}
.mapscrolly .ms-steps{padding:22vh 0 40vh}
.mapscrolly .ms-step{min-height:74vh;display:flex;align-items:flex-start}
.mapscrolly .ms-step .card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);
  padding:16px 20px 13px;box-shadow:0 10px 26px -18px var(--shadow);
  transition:border-color .3s,opacity .3s,transform .3s;opacity:.5;transform:translateY(4px)}
.mapscrolly .ms-step.active .card{border-left-color:var(--accent);opacity:1;transform:none}
.mapscrolly .ms-step .yr{font-family:var(--disp);font-size:11.5px;letter-spacing:2.5px;color:var(--gold);
  font-weight:700;text-transform:uppercase}
.mapscrolly .ms-step h3{font-family:var(--disp);font-size:21px;line-height:1.15;margin:4px 0 9px;font-weight:700}
.mapscrolly .ms-step p{margin:0 0 9px;font-size:16px;line-height:1.55}
.mapscrolly .ms-step p:last-child{margin-bottom:0}
.mapscrolly .ms-step .ch{font-size:12px;letter-spacing:.4px;color:var(--ink-faint);font-style:italic}
.mapscrolly .ms-step .ch a{color:var(--accent)}

/* ---------- the sticky map plate ---------- */
.mapscrolly .ms-stage{position:sticky;top:5vh;height:90vh;display:flex;flex-direction:column;justify-content:center}
.mapscrolly .ms-plate{position:relative;background:#fbf6e9;border:1px solid var(--ink);padding:10px;
  box-shadow:0 14px 40px -18px var(--shadow)}
.mapscrolly .ms-plate::after{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:2}
.mapscrolly .ms-badge{position:absolute;top:16px;left:18px;z-index:3;font-family:var(--disp);font-weight:700;
  font-size:clamp(18px,2.3vw,30px);letter-spacing:1px;color:var(--accent);
  background:rgba(251,246,233,.86);padding:2px 12px;border:1px solid var(--line)}
.mapscrolly .ms-plate svg{display:block;width:100%;height:auto}
.mapscrolly .ms-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 0}
.mapscrolly .ms-controls button{font:inherit;font-size:13px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);padding:8px 10px;min-height:44px;cursor:pointer}
.mapscrolly .ms-controls button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mapscrolly .ms-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mapscrolly .ms-controls button:disabled{opacity:.45;cursor:default}
.mapscrolly .ms-progress{font-size:12px;color:var(--ink-soft);text-align:center}
.mapscrolly .ms-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 2px 0;font-size:12.5px;color:var(--ink-soft)}
.mapscrolly .ms-legend span{display:inline-flex;align-items:center;gap:6px}
.mapscrolly .ms-legend svg{width:22px;height:13px}
.mapscrolly .ms-legend .dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.mapscrolly .ms-cite{margin:8px 2px 0;font-size:11.5px;line-height:1.45;color:var(--ink-faint);font-style:italic}

/* ---------- scroll-driven reveal (only once JS marks the module live) ------ */
.mapscrolly.ms-live .ms-stage svg [data-s]{transition:opacity .45s}
.mapscrolly.ms-live .ms-stage svg g[data-s]:not(.on),
.mapscrolly.ms-live .ms-stage svg text[data-s]:not(.on),
.mapscrolly.ms-live .ms-stage svg path[data-s]:not(.on){opacity:0;pointer-events:none}
.mapscrolly.ms-live .ms-stage svg tspan[data-s]:not(.on){display:none}
/* provinces: hidden until they enter a state, painted by the engine's s-* class */
.mapscrolly.ms-live .ms-stage svg [data-pv]:not(.on){opacity:0}
/* gold outline for anything that changed at the current step */
.mapscrolly .ms-stage svg .is-new circle{stroke:var(--gold)!important;stroke-width:2.6px!important}
.mapscrolly .ms-stage svg path.is-new{stroke:var(--gold)!important;stroke-width:2.4px!important;stroke-dasharray:none!important}
.mapscrolly .ms-stage svg text.is-new,.mapscrolly .ms-stage svg .is-new>text{fill:var(--gold)!important}

/* the current route segment on the reveal maps, drawn a touch stronger */
.mapscrolly .ms-stage svg path.seg{transition:opacity .45s}

/* hover tooltip (province maps) */
.mapscrolly .ms-tip{position:fixed;z-index:60;pointer-events:none;background:rgba(43,33,25,.92);color:var(--parch);
  font-size:13px;line-height:1.4;padding:7px 11px;max-width:18rem;border-radius:2px;opacity:0;transition:opacity .12s}
.mapscrolly .ms-tip b{font-variant:small-caps;letter-spacing:.5px;display:block}
.mapscrolly .ms-tip.on{opacity:1}

/* A page that wraps all its text in one reading column (chapter 19's
   <article class="col">) would squeeze the two-column scrolly into that measure.
   Break the module out to its usual width, centred on the column. Margins, not a
   transform, so the sticky stage and the fixed hover tooltip keep working. */
@media (min-width:861px){
  .col .mapscrolly{
    --ms-w:min(60rem,calc(100vw - clamp(120px,13vw,170px) - 56px));
    width:var(--ms-w);max-width:none;margin-left:calc(50% - var(--ms-w) / 2);margin-right:0;
  }
}

/* ---------- responsive: stack, map becomes a sticky top strip ---------- */
@media (max-width:860px){
  .mapscrolly{max-width:100%}
  /* Generated HTML puts the cards first for the desktop columns. On narrow
     screens the plate must precede them so it can stick throughout the story. */
  .mapscrolly .ms-scrolly{display:flex;flex-direction:column;gap:0}
  .mapscrolly .ms-stage{position:sticky;top:0;height:auto;z-index:6;background:var(--parch);
    order:-1;align-self:stretch;flex-shrink:0;
    padding:8px 0 8px;border-bottom:1px solid var(--line);margin:0 -22px;padding-left:22px;padding-right:22px}
  .mapscrolly .ms-plate svg{max-height:42vh}
  .mapscrolly .ms-badge{top:12px;left:26px;font-size:17px}
  .mapscrolly .ms-legend{font-size:11px;gap:4px 12px}
  .mapscrolly .ms-cite{display:none}
  .mapscrolly .ms-steps{padding:4vh 0 24vh}
  .mapscrolly .ms-step{min-height:58vh}
}
@media (prefers-reduced-motion:reduce){
  .mapscrolly *{transition:none!important}
}