/* The map (js/story-map.js): a parchment chart in the story's dark-teal
   frame. The chart pans and zooms; names, faces and marks stay the size
   they are on screen. Beside it (below it on a phone), what the chosen
   place holds and the ways to get there. */
.smap-overlay {
  --smap-ink:#3b2f22; --smap-ink-soft:#6f604a; --smap-faded:#a4977f; --smap-paper:#f1e5c6; --smap-paper-deep:#dcc79a;
  --smap-gold:#c58f24; --smap-star:#f2b93b; --smap-red:#8e3a26; --smap-teal:#1c2e33;
}
.hs-overlay.overlay.smap-overlay { padding:20px; }
.smap { display:flex;flex-direction:column;width:min(1320px,100%);height:min(860px,calc(100dvh - 40px));background:#1c2e33;border:1px solid #7c9684;border-top:3px solid #bdcc9b;border-radius:15px;box-shadow:0 24px 100px #0008;overflow:hidden;color:#fff4d9; }
.smap-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 22px 12px; }
.smap-head .hs-eyebrow { margin:0 0 2px; }
.smap-head h2 { margin:0;font:500 27px/1.15 Georgia,serif;color:#faf0d6; }
.smap-sub { margin:3px 0 0;color:#b9c7bd;font:14px/1.4 Georgia,serif;font-style:italic; }
.smap-close { flex:none;margin:-4px -8px 0 0; }
.smap-body { flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;padding:0 14px 14px; }

/* ---- the chart */
.smap-chart { position:relative;min-height:0;border-radius:10px;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(255,250,232,.55),rgba(255,250,232,0) 62%),
    radial-gradient(circle at 18% 22%,rgba(160,120,60,.08) 0 2px,transparent 3px) 0 0/37px 41px,
    radial-gradient(circle at 70% 60%,rgba(120,90,40,.06) 0 1.5px,transparent 2.5px) 0 0/29px 23px,
    linear-gradient(160deg,#f3e8cc,#e9d9b0 60%,#e2cd9f);
  box-shadow:inset 0 0 0 1px #b39b6a,inset 0 0 0 5px #efe2c0,inset 0 0 0 6px #b39b6a,inset 0 0 60px rgba(120,86,36,.35); }
.smap-svg { position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none; }
.smap-svg:active { cursor:grabbing; }
.smap-loading { position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--smap-ink-soft);font:italic 18px Georgia,serif; }

/* ground: each place's walk, washed in its region's colour */
.smap-land { stroke:var(--smap-ink);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill-opacity:.55;cursor:pointer;transition:fill-opacity .2s; }
.smap-land.r-meadow { fill:#a9c283; } .smap-land.r-hollow { fill:#e0b86f; } .smap-land.r-wild { fill:#9dbba5; } .smap-land.r-cloud { fill:#a9c2dc; }
.smap-land.here { fill-opacity:.8;stroke-width:2; }
.smap-land.picked { stroke:#9b6a12;stroke-width:2.6;fill-opacity:.85; }
.smap-land.shut { fill:#cfc3a6;fill-opacity:.55;stroke:var(--smap-faded);stroke-dasharray:4 3; }
.smap-land-hatch { fill:url(#smap-hatch);pointer-events:none; }
.smap-hatch-line { stroke:#a8987a;stroke-width:1; }
.smap-lane { fill:none;stroke:#c9a86a;stroke-width:13;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-opacity:.55;cursor:pointer; }
.smap-lane.here { stroke-opacity:.85; } .smap-lane.picked { stroke:#b98a36;stroke-opacity:.9; } .smap-lane.shut { stroke:#cfc3a6; }
.smap-road { fill:none;stroke:#7a5c35;stroke-width:1.6;stroke-dasharray:1 5;stroke-linecap:round;vector-effect:non-scaling-stroke; }
.smap-road.shut { stroke:#aa9b80; }
.smap-road.aside { stroke-dasharray:1 7; }
.smap-scene { fill:#8aa66e;fill-opacity:.55;stroke:var(--smap-ink);stroke-width:.5;stroke-opacity:.5;pointer-events:none; }
.smap-scene .w { fill:none; }
.smap-scene.s-house { fill:#b9784a; } .smap-scene.s-cloud { fill:#fbf7ec;fill-opacity:.9;stroke-opacity:.35; } .smap-scene.s-hill { fill:none;stroke:#7d6a48;stroke-width:.7;stroke-opacity:.7; }
.smap-scene.s-reed { fill:none;stroke:#557a61;stroke-opacity:.8;stroke-width:.7; }
.smap-scene.shut { fill-opacity:.25;stroke-opacity:.3; }

/* the route: gold thread, marching */
.smap-route-under { fill:none;stroke:#fff6d8;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-opacity:.8; }
.smap-route { fill:none;stroke:var(--smap-gold);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 9;vector-effect:non-scaling-stroke;animation:smap-march 1.2s linear infinite; }
.smap-route-under.preview { stroke-width:6;stroke-opacity:.6; }
.smap-route.preview { stroke:#8d6a2b;stroke-width:3;stroke-dasharray:6 6;stroke-opacity:.8;animation:none; }
@keyframes smap-march { to { stroke-dashoffset:-20; } }

/* marks that keep their size */
.smap-glyph .f { fill:#f6ecd2;stroke:var(--smap-ink);stroke-width:1.3;stroke-linejoin:round; }
.smap-glyph .w { fill:none;stroke:var(--smap-ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round; }
.smap-glyph .glow { fill:#ffd57a; }
.smap-glyph .dot { fill:#c2553a;stroke:none; }
.smap-glyph .water { stroke:#5c86a0; }
.smap-glyph .star { fill:var(--smap-star);stroke:#7a5212;stroke-width:1.1;stroke-linejoin:round; }
.smap-g-shut .f { fill:#f3dccb;stroke:var(--smap-red); } .smap-g-shut .w { stroke:var(--smap-red);stroke-width:1.6; }
.smap-svg text { font-family:Georgia,'Times New Roman',serif;fill:var(--smap-ink);paint-order:stroke;stroke:#f5ebd0;stroke-width:3.2px;stroke-linejoin:round; }
.smap-name { font-size:13.5px;font-style:italic;font-weight:600; }
.smap-caption { font-size:10.5px;letter-spacing:.06em;fill:var(--smap-ink-soft)!important; }
.smap-small { font-size:10.5px;font-style:italic;fill:var(--smap-ink-soft)!important; }
.smap-region text { font-size:12px;letter-spacing:.34em;fill:#7c6547!important;opacity:.62;stroke-width:2.4px; }
.smap-place { cursor:pointer;outline:none; }
.smap-hit { fill:transparent; }
.smap-place.shut .smap-glyph { opacity:.5; }
.smap-place.shut .smap-name { fill:var(--smap-faded);font-weight:400; }
.smap-place.here .smap-name { font-weight:700;font-size:14.5px; }
.smap-place.goal .smap-name { fill:#6b4608; }
.smap-place:hover .smap-glyph .f, .smap-place.picked .smap-glyph .f { fill:#fff3c6; }
.smap-place.picked .smap-name { fill:#7a4c00;text-decoration:underline; }
.smap-place:focus-visible .smap-hit { stroke:#1b6d5e;stroke-width:3;fill:rgba(174,230,209,.28); }
.k-room .smap-name, .k-aside .smap-name { font-size:11.5px;font-weight:400; }
[data-zoom=far] .k-room:not(.picked):not(:focus-visible):not(.here):not(.goal) .smap-name,
[data-zoom=far] .smap-landmark text, [data-zoom=far] .smap-faces .smap-more text { display:none; }
[data-zoom=far] .k-room:not(.picked):not(.here):not(.goal) { opacity:.85; }
[data-zoom=near] .smap-region { display:none; }
.smap-pip circle { fill:#2c4a47;stroke:#f5ebd0;stroke-width:1.5; }
.smap-pip text { font:bold 8.5px system-ui,sans-serif!important;fill:#fff!important;stroke:none!important; }
.smap-ring { fill:#f5ebd0;stroke:var(--smap-ink);stroke-width:1.2; }
.smap-blank { fill:#8aa39a; }
.smap-faces .smap-ring { stroke-width:1; }
.smap-news { fill:var(--smap-star);stroke:#7a5212;stroke-width:1; }
.smap-more circle { fill:#efe2c2;stroke:var(--smap-ink);stroke-width:1; }
.smap-more text { font:bold 9px system-ui,sans-serif!important;stroke:none!important; }
.smap-gate { pointer-events:none; }
.smap-landmark { pointer-events:none; }
.smap-you, .smap-goal-mark, .smap-guide-mark { pointer-events:none; }
.smap-you .smap-ring { stroke:#8a5a00;stroke-width:3;fill:#ffe7a8; }
.smap-you-label { font:700 12px system-ui,sans-serif!important;letter-spacing:.08em;fill:#5a3b00!important; }
.smap-pulse { transform-box:fill-box;transform-origin:center;animation:smap-pulse 2.4s ease-in-out infinite; }
@keyframes smap-pulse { 0%,100% { transform:scale(.8);opacity:.9; } 50% { transform:scale(1.25);opacity:.35; } }
.smap-goal-mark .smap-ring { stroke:#a26d10;stroke-width:2.5;fill:#fff0c4; }
.smap-who { font-size:12px;font-weight:700;fill:#6b4608!important; }
.smap-guide-mark .smap-glyph { animation:smap-twinkle 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center; }
@keyframes smap-twinkle { 50% { transform:scale(1.25) rotate(20deg); } }

/* the chart's furniture */
.smap-zoom { position:absolute;right:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 24px); }
.smap-zbtn { min-width:40px;min-height:40px;padding:6px 10px;border:1px solid #9c8452;border-radius:9px;background:#f7eed6e8;color:var(--smap-ink);font:600 18px/1 Georgia,serif!important;box-shadow:0 2px 6px #5a42202e; }
.smap-zbtn:hover { background:#fff7df; }
.smap-zbtn.smap-zwide { font:600 13px/1 system-ui,sans-serif!important; }
.hs-preview .smap-zbtn:focus-visible { outline:3px solid #1b6d5e;outline-offset:2px; }
.smap-compass { position:absolute;left:14px;top:12px;width:54px;height:54px;pointer-events:none;opacity:.8; }
.smap-compass svg { width:100%;height:100%;overflow:visible; }
.smap-compass .c { fill:none;stroke:#7a5c35;stroke-width:.8; }
.smap-compass .n { fill:#7a5c35; } .smap-compass .e { fill:#e8d7ae;stroke:#7a5c35;stroke-width:.6; }
.smap-compass text { font:bold 8px Georgia,serif;fill:#5c4428; }

/* ---- the side */
.smap-side { min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;overscroll-behavior:contain; }
.smap-card { padding:14px 16px;border:1px solid #7c968466;border-radius:12px;background:#16282d; }
.smap-card h3 { margin:0;font:500 21px/1.25 Georgia,serif;color:#faf0d6; }
.smap-card h4 { margin:14px 0 6px;color:#e7d49c;font:700 11px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase; }
.smap-eyebrow { margin:0 0 6px;color:#b3d5c8;font:700 10.5px/1.5 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase; }
.smap-note { margin:8px 0 0;color:#c9d3cb;font:14px/1.5 system-ui,sans-serif; }
.smap-later { color:#d8c68f;font-style:italic; }
.smap-objective { margin:10px 0 0;padding:9px 12px;border-left:3px solid var(--story-brass,#d6bc75);background:#12262b;color:#e6e2d2;font:15px/1.5 Georgia,serif; }
.smap-where { margin:2px 0 0;color:#b9c7bd;font:14px/1.4 Georgia,serif;font-style:italic; }
.smap-card .hs-primary, .smap-card .hs-button { width:100%;margin-top:12px;text-align:center;font-size:15px; }
.smap-who-row { display:flex;align-items:center;gap:12px; }
.smap-face { position:relative;flex:none;display:block;width:44px;height:44px;border:2px solid #baad79;border-radius:50%;background:#4e6258;box-sizing:border-box; }
.smap-face img { display:block;width:100%;height:100%;border-radius:50%;object-fit:cover; }
.smap-face.goal { width:54px;height:54px;border-color:var(--smap-star);box-shadow:0 0 0 3px #f2b93b33; }
.smap-face-star { position:absolute;right:-6px;top:-7px;color:var(--smap-star);font:normal 20px/1 Georgia,serif;text-shadow:0 1px 2px #000a; }
.smap-guiding { border-color:#d8b35a;background:linear-gradient(#2a3a2c,#1f302f); }
.smap-guiding-line { margin:0;color:#ffe9b0;font:600 15px/1.4 Georgia,serif; }
.smap-star { color:var(--smap-star); }
.smap-stop { padding:6px 0;min-height:36px;margin-top:4px; }
.smap-chips { display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0; }
.smap-chip { padding:3px 9px;border:1px solid #9fb1a366;border-radius:20px;background:#102326;color:#d8e1d8;font:12px/1.5 system-ui,sans-serif; }
.smap-chip.shut { border-color:#d68a6f88;color:#f2c5b3;background:#2c1d1a; }
.smap-caption-line { margin:2px 0 0;color:#b9c7bd;font:italic 14px/1.4 Georgia,serif; }
.smap-why { margin:12px 0 0;padding:10px 12px;border-left:3px solid #c77b5e;background:#231c1b;color:#eadbc9;font:14px/1.5 Georgia,serif; }
.smap-why b { display:block;margin-bottom:2px;color:#f4c7b2;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.05em; }
.smap-people { list-style:none;margin:0;padding:0;display:grid;gap:6px; }
.smap-person { display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;background:#1d3337; }
.smap-person .smap-face { width:36px;height:36px; }
.smap-person.news .smap-face { border-color:var(--smap-star); }
.smap-person-words { flex:1;min-width:0;display:flex;flex-direction:column; }
.smap-person-words b { color:#f5ead0;font:600 14px/1.3 system-ui,sans-serif; }
.smap-person-words small { color:#aebdb5;font:12px/1.3 system-ui,sans-serif; }
.smap-person-acts { display:flex;gap:6px;flex:none; }
.smap-card .smap-small-btn { width:auto;margin:0;min-height:36px;padding:6px 10px;font-size:12.5px;border-radius:8px; }
.smap-actions { display:grid;gap:0; }
.smap-picked.empty { background:transparent;border-style:dashed; }
.smap-picked.empty .smap-note:first-child { margin-top:0; }
.smap-list summary { cursor:pointer;color:#e7d49c;font:700 12px/1.6 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;min-height:32px;display:flex;align-items:center; }
.smap-list h4:first-of-type { margin-top:8px; }
.smap-list ul { list-style:none;margin:0;padding:0;display:grid;gap:3px; }
.smap-list-place { width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:38px;padding:6px 10px;border:0;border-radius:7px;background:#1d3337;color:#f3ead3;text-align:left;font:14px/1.3 Georgia,serif!important; }
.smap-list-place:hover { background:#27413f; }
.smap-list-place small { color:#aebdb5;font:12px system-ui,sans-serif;white-space:nowrap; }
.smap-list-place.shut span { color:#9aa59e; }
.smap-list-place.here span { font-weight:700;color:#ffe7a8; }
.smap-key { display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 4px 2px;color:#aebdb5;font:12px/1.4 system-ui,sans-serif; }
.smap-key span { display:inline-flex;align-items:center;gap:6px; }
.smap-key i { display:inline-block;width:14px;height:14px;border-radius:50%;font-style:normal; }
.smap-key .k-you { background:#ffe7a8;border:2.5px solid #8a5a00;box-sizing:border-box; }
.smap-key .k-star { width:auto;height:auto;color:var(--smap-star);font:16px/1 Georgia,serif; }
.smap-key .k-shut { border-radius:2px;background:repeating-linear-gradient(45deg,#f3dccb 0 3px,#8e3a26 3px 4.5px); }
.smap-key .k-face { background:#4e6258;border:2px solid #baad79;box-sizing:border-box; }

/* ---- the HUD's chip: what the starred signs are pointing to, and a way to stop */
.smap-hud-chip { display:inline-flex;align-items:stretch;margin-top:6px;max-width:100%;border:1px solid #d8b35a;border-radius:20px;background:rgba(28,40,34,.86);box-shadow:0 2px 10px #0004;pointer-events:auto; }
.smap-hud-chip[hidden] { display:none!important; }
.smap-hud-chip button { border:0;background:none;color:#ffe9b0;cursor:pointer; }
.smap-hud-chip-open { min-width:0;padding:5px 4px 5px 12px;font:600 12.5px/1.35 system-ui,sans-serif!important;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.smap-hud-chip-open b { color:#fff5d6; }
.smap-hud-chip-stop { flex:none;min-width:34px;padding:0 10px 0 6px;font:18px/1 system-ui,sans-serif!important;color:#e9d6a4!important; }

@media (prefers-reduced-motion: reduce) {
  .smap-route, .smap-pulse, .smap-guide-mark .smap-glyph { animation:none; }
}

/* ---- a phone: the chart on top, the cards below it, one scroll */
@media (max-width: 760px) {
  .hs-overlay.overlay.smap-overlay { padding:0; }
  .smap { width:100%;height:100dvh;max-height:none;border-radius:0;border:0;border-top:0; }
  .smap-head { padding:max(10px,env(safe-area-inset-top)) 14px 8px;align-items:center; }
  .smap-head .hs-eyebrow { font-size:9.5px; }
  .smap-head h2 { font-size:21px; }
  .smap-sub { font-size:13px; }
  .smap-close { font-size:13px;padding:8px;margin:0 -6px 0 0; }
  /* the chart stays put; the cards scroll beneath it */
  .smap-body { display:flex;flex-direction:column;overflow:hidden;padding:0 10px;gap:10px; }
  .smap-chart { flex:none;height:min(50dvh,430px);min-height:260px; }
  .smap-side { flex:1;min-height:0;overflow:auto;padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .smap-card { padding:12px 13px; }
  .smap-card h3 { font-size:19px; }
  .smap-zoom { right:8px;bottom:8px;gap:5px; }
  .smap-zbtn { min-width:44px;min-height:44px; }
  .smap-compass { width:42px;height:42px;left:10px;top:8px; }
  #story-campaign .smap-hud-chip { grid-area:4/1;justify-self:start;margin-top:0; }
}

/* a name that would print over a more important one waits for a closer zoom */
.smap-crowded .smap-name, .smap-crowded .smap-caption, .smap-crowded .smap-faces, .smap-crowded.smap-region, .smap-crowded.smap-landmark text { display:none; }
[data-zoom=far] .smap-crowded.k-room, [data-zoom=far] .smap-crowded.k-aside, [data-zoom=far] .smap-crowded.smap-landmark { display:none; }
.smap-scene.far { fill-opacity:.3;stroke-opacity:.28; }
.smap-scene.far.s-hill { stroke-opacity:.45; }
.smap-scene.far.s-cloud { fill-opacity:.6; }
.smap-gone { display:none; }
.smap-shown { color:var(--smap-star);font:600 12px system-ui,sans-serif;white-space:nowrap; }

/* A travelling chart: the paper owns the space, and the frame stays quiet. */
.smap { background:#193238;border-color:#b2ad8266;border-top:1px solid #b2ad8266;border-left:5px solid #b7a46f;border-radius:4px 12px 12px 4px; }
.smap-head { padding:16px 22px 15px; }
.smap-head .hs-eyebrow { text-transform:none;letter-spacing:0;font:italic 14px/1.4 Georgia,serif;color:#bbcdb9; }
.smap-head h2 { font:500 28px/1.2 Georgia,serif;letter-spacing:-.015em; }
.smap-head .hs-text-button { font:13px/1.4 system-ui,sans-serif;color:#d1d8c6; }
.smap-chart { border-radius:4px; }
.smap-card { border-radius:5px;border-color:#9caf9260;background:#132c30; }
.smap-eyebrow { text-transform:none;letter-spacing:0;font:600 14px/1.5 system-ui,sans-serif;color:#b6cdb7; }
.smap-card h4,.smap-list summary { text-transform:none;letter-spacing:0;font:600 13px/1.5 system-ui,sans-serif;color:#d7c38a; }
.smap-card :is(.hs-primary,.hs-button) { border-radius:5px;font:500 14px/1.4 system-ui,sans-serif; }
.smap-zbtn { border-radius:5px; }
.smap-list summary { min-height:40px; }
@media(max-width:760px) {
  .smap { border:0;border-radius:0; }
  .smap-head { padding:12px 14px 10px;padding-top:max(12px,env(safe-area-inset-top)); }
  .smap-head h2 { font-size:23px; }
  .smap-head .hs-eyebrow { font-size:12px; }
  .smap-chart { height:min(43dvh,360px);min-height:220px; }
}
/* A short landscape screen needs the chart and its destination side by side;
   the portrait layout's fixed chart would leave no room to read or act. */
@media(max-height:500px) and (min-width:600px) {
  .hs-overlay.overlay.smap-overlay { padding:8px; }
  .smap { height:calc(100dvh - 16px);width:100%;border:1px solid #b2ad8266;border-radius:5px; }
  .smap-head { padding:9px 14px; }
  .smap-head .hs-eyebrow { display:none; }
  .smap-head h2 { font-size:21px; }
  .smap-body { display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,34%);padding:0 8px 8px;gap:8px; }
  .smap-chart { height:auto;min-height:0; }
  .smap-side { padding-bottom:4px; }
  .smap-card { padding:10px 12px; }
  .smap-card h3 { font-size:19px; }
  .smap-face.goal { width:40px;height:40px; }
}

/* Campaign audit follow-up: guiding is an action, so stopping it has the same
   touch target as the map controls. A long place name gives way to its stop. */
@media(max-width:760px), (pointer:coarse) {
  .smap-hud-chip-stop { min-width:44px;min-height:44px; }
  .smap-hud-chip-open { min-height:44px; }
}