/* ── Side quests: a treasure map ──
   Restored 20 Sep from backup/quest-map-revert-20260920/, pared back at
   Ting's request: the map style without the fly-out/unfold animation, and
   with the coastline, hills, palms, waves and fold creases dropped. What is
   left is paper, a compass, the trail, the stops, the X and the seal.

   The map is laid out in its own 620x430 drawing space. Everything is sized
   in cqw against .qm (a size container) and positioned as a percentage, so
   the whole map scales with the popup at any width — no JS fitting. */
/* A sheet of paper, not a speech bubble: square corners, no tail. The card
   still opens from the side nearest the backpack, it just doesn't point. */
.popup[data-theme="map"]{--popup-w:660px;--popup-fg:#5a3a22;--close-color:#8a5a3b;--popup-bg:#e8cd93;
  border-radius:2px;box-shadow:0 26px 60px rgba(58,36,23,.34),0 3px 10px rgba(58,36,23,.2)}
.popup[data-theme="map"] .popup-tail{display:none}
.popup[data-theme="map"] .popup-content{padding:0;overflow:hidden;background:none}
.popup[data-theme="map"] .popup-close:hover{background:rgba(122,82,40,.16)}

/* ── The sheet ──
   .qm paints the paper itself: a few sepia blotches, a yellowed rim that
   darkens towards the edges like an old map, and the base stock. The
   crumple and fibre relief (the .qm-fx SVG in quests.js) multiplies on top.
   `container-type` makes .qm a stacking context, which is exactly what the
   blend needs — the texture blends with this background and nothing else,
   so the page behind the modal is never touched. */
.qm{--red:#c9583f;position:relative;container-type:inline-size;width:100%;aspect-ratio:620/430;color:#6b4426;
  background:
    radial-gradient(ellipse 34% 26% at 12% 84%,rgba(146,98,38,.17),transparent 70%),
    radial-gradient(ellipse 26% 24% at 89% 19%,rgba(146,98,38,.15),transparent 72%),
    radial-gradient(ellipse 20% 30% at 58% 96%,rgba(158,112,50,.13),transparent 72%),
    radial-gradient(ellipse 14% 16% at 33% 41%,rgba(168,124,60,.10),transparent 74%),
    radial-gradient(ellipse at 20% 10%,rgba(255,252,238,.55),transparent 55%),
    radial-gradient(128% 118% at 50% 44%,transparent 44%,rgba(124,82,32,.17) 84%,rgba(98,62,22,.32) 100%),
    linear-gradient(158deg,#f8e8b8,#f0d9a2 44%,#e7cd90 78%,#dfc283)}
.qm::before{content:'';position:absolute;z-index:1;inset:1.8cqw;border:.26cqw dashed rgba(122,82,40,.34);pointer-events:none}

/* Crumple + fibre relief, lit from the top-left, multiplied onto the sheet. */
/* translateZ gives the filtered texture its own compositor layer, so it is
   rasterised once instead of on every frame of the popup's open scale. */
.qm-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;opacity:.58;transform:translateZ(0);contain:paint}
/* Where the map has been folded into six: a shadow on one side of the
   crease, a catch of light on the other. Kept faint — it should read as
   paper that has lived in a backpack, not as a grid. */
.qm-folds{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(33.33% - 2.4cqw),rgba(116,76,28,.075) calc(33.33% - .1cqw),rgba(255,250,232,.26) calc(33.33% + .1cqw),transparent calc(33.33% + 2.4cqw)),
    linear-gradient(90deg,transparent calc(66.66% - 2.4cqw),rgba(116,76,28,.065) calc(66.66% - .1cqw),rgba(255,250,232,.23) calc(66.66% + .1cqw),transparent calc(66.66% + 2.4cqw)),
    linear-gradient(transparent calc(50% - 1.9cqw),rgba(116,76,28,.065) calc(50% - .1cqw),rgba(255,250,232,.22) calc(50% + .1cqw),transparent calc(50% + 1.9cqw))}

/* the trail */
.qm-art{position:absolute;z-index:1;inset:0;width:100%;height:100%}
.qm-trail{fill:none;stroke:rgba(122,82,40,.45);stroke-width:4.2;stroke-dasharray:2 12;stroke-linecap:round}
.qm-trail-walked{fill:none;stroke:var(--red);stroke-width:4.4;stroke-linecap:round;opacity:.92}

/* title, top left */
.qm-title{position:absolute;z-index:1;left:4.8cqw;top:3.9cqw;width:37.7cqw}
.popup-content .qm-title b{display:block;font:700 4.5cqw/1 'Caveat',cursive;color:#5a3a22}
.popup-content .qm-title span{display:block;margin-top:1cqw;font-size:1.9cqw;line-height:1.5;color:#6b5136}

/* compass rose, floating on the map's left flank */
.qm-compass{position:absolute;z-index:1;left:13.1cqw;top:28.5cqw;width:10cqw;height:10cqw;color:#8a5a3b;opacity:.8}
.qm-compass svg{display:block;width:100%;height:100%}

/* stops along the trail */
.qm-start,.qm-stop{position:absolute;z-index:1;left:calc(var(--x) / 620 * 100%);top:calc(var(--y) / 430 * 100%);transform:translate(-50%,-50%)}
.qm-flag{position:relative;display:block;width:.65cqw;height:4.2cqw;background:#8a5a3b;border-radius:.3cqw}
.qm-flag::after{content:'';position:absolute;left:.65cqw;top:.16cqw;border:1.13cqw solid transparent;border-left:2.6cqw solid var(--red);border-right:0}
.qm-label{position:absolute;left:50%;width:24cqw;transform:translateX(-50%);text-align:center;font:700 2.7cqw/1.15 'Caveat',cursive;color:#5a3a22;text-shadow:0 1px 0 rgba(255,250,235,.8)}
.qm-start .qm-label{top:5cqw}
.qm-stop[data-side="top"] .qm-label{bottom:4.2cqw}
.qm-stop[data-side="bottom"] .qm-label{top:4.2cqw}
.qm-dot{display:grid;place-items:center;width:4.5cqw;height:4.5cqw;border-radius:50%;background:#f7edd0;border:.39cqw solid #8a5a3b;color:#5d8a53;box-shadow:0 .3cqw 0 rgba(120,80,30,.28);transition:transform .35s var(--spring)}
.qm-dot svg{width:2.4cqw;height:2.4cqw}
.qm-stop:hover .qm-dot{transform:scale(1.15) rotate(-6deg)}
.qm-stop:hover .qm-label{color:var(--red)}

/* X marks the quest in progress, with its note pinned above */
.qm-x{display:block;width:6.1cqw;height:6.1cqw;background:
  linear-gradient(45deg,transparent 42%,var(--red) 42% 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--red) 42% 58%,transparent 58%);
  filter:drop-shadow(0 .3cqw 0 rgba(120,40,25,.25))}
.qm-quest{position:absolute;bottom:calc(100% + 1.9cqw);right:-6.4cqw;width:35cqw;padding:1.6cqw 1.9cqw;text-align:right;rotate:-1.5deg;
  background:linear-gradient(#fbf0d2,#f3e2b4);border:.22cqw dashed rgba(122,82,40,.45);border-radius:.8cqw;
  box-shadow:0 1.3cqw 2.9cqw rgba(120,80,30,.22)}
.qm-kicker{display:block;font:700 2.6cqw/1 'Caveat',cursive;color:var(--red)}
.popup-content .qm-quest b{display:block;margin-top:.4cqw;font:800 2.3cqw/1.25 Inter,system-ui,sans-serif;color:#5a3a22}
.qm-bar{display:block;height:1.45cqw;margin:1.3cqw 0 1cqw;border-radius:99px;background:rgba(122,82,40,.22);overflow:hidden}
.qm-bar i{display:block;height:100%;width:var(--p);border-radius:99px;background:linear-gradient(90deg,#e8826f,#c9583f)}
.popup-content .qm-quest small{display:block;font-size:1.8cqw;line-height:1.4;color:#7a5a38}

/* the Strava wax seal */
.qm-seal{position:absolute;z-index:1;right:4.2cqw;bottom:3.2cqw;display:grid;place-items:center;width:15.5cqw;height:15.5cqw;border-radius:50%;text-decoration:none;text-align:center;rotate:-7deg;
  background:radial-gradient(circle at 36% 30%,#e0715c,#c9583f 60%,#a8452f);
  color:#fff6ec;font:700 2.6cqw/1.15 'Caveat',cursive;
  box-shadow:0 1.3cqw 2.9cqw rgba(120,40,25,.35),inset 0 0 0 .48cqw rgba(255,240,225,.35);
  transition:transform .35s var(--spring)}
.qm-seal:hover{transform:scale(1.07)}
.qm-seal:focus-visible{outline:2px solid #5a3a22;outline-offset:3px}

/* Narrow popups: the map keeps its shape, so nudge the type up and drop the
   one line of small print rather than letting it become unreadable. */
@container (max-width:470px){
  .qm-label{font-size:3.4cqw;width:26cqw}
  .qm-kicker{font-size:3.2cqw}
  .popup-content .qm-quest b{font-size:3cqw}
  .popup-content .qm-quest small{display:none}
  .popup-content .qm-title span{font-size:2.4cqw}
  .qm-seal{font-size:3.1cqw;right:2.6cqw;bottom:2.6cqw}
}