/* /stores: the painted map of Snapy stores and the list under it.
   Builds on ../../site.css (tokens, fonts, header, price-tag button) and the homepage's painted menu
   (../../stories/hero: hero.css, menu.js); everything here is this page's own. */

.stores-page { --halo: #f6efe0; --note: #fffdf6; --slip-line: 0 1px 0 rgba(42, 33, 29, .5), 0 0 0 1px rgba(42, 33, 29, .55); }
.stores-page main { display: block; }

/* the menu: Store map, the page you're on, keeps its marigold stroke painted in (and in the footer, its ink line) */
.menu-main a[aria-current="page"]::before { -webkit-mask-position: 0 0; mask-position: 0 0; }
.foot-group a[aria-current="page"] { color: var(--ink); }
.foot-group a[aria-current="page"]::after { clip-path: inset(0 0 0 0); }

/* ---------------------------------------------------------------- heading */
.atlas-head { padding: clamp(6px, 1.6vh, 22px) var(--gutter) clamp(12px, 2.2vh, 22px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 30px; }
.atlas-head h1 { margin: 0; font: 400 clamp(2.3rem, 8.6vw, 3.7rem)/1.02 var(--display); letter-spacing: -.01em; }
.atlas-head p { margin: 0; max-width: 44ch; color: var(--ink-soft); font-size: clamp(.98rem, .5vw + .85rem, 1.1rem); line-height: 1.5; }

/* ---------------------------------------------------------------- the map */
/* phones: edge to edge, torn top and bottom. desktop: inside the gutters, torn all round.
   (On short phones it takes up to 72% of the screen, so all the storefronts fit at once. Upright, never
   less than 416 px: the three rows of storefronts round Vancouver need that much (atlas.js). Under
   360 px wide, where the longest shop names may take three lines, the rows need 460 px.) */
.atlas-map {
  position: relative;
  height: max(55svh, min(460px, 72svh)); min-height: 360px; max-height: 620px;
  overflow: hidden;
  overflow: clip; /* (not a scroll box: focus on a pin near its edge can't shift the map inside its frame) */
  background: #f6efe0;
  isolation: isolate;
  touch-action: pan-y;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
@media (max-width: 699px) and (min-height: 451px) { .atlas-map { min-height: 416px; } }
@media (max-width: 359px) { .atlas-map { height: max(55svh, 460px); } }
@media (min-width: 700px) { .atlas-map { height: 64vh; min-height: 440px; max-height: 780px; margin: 0 var(--gutter); } }
.atlas-gl { position: absolute; inset: 0; }
/* (inside the torn edge, which the mask cuts away: the ring would vanish into it at -6px) */
.atlas-gl canvas:focus-visible { outline: 3px solid var(--ink); outline-offset: -30px; }
.atlas-map:not(.is-ready) :is(.atlas-gl, .atlas-pins, .atlas-leaders, .atlas-names) { opacity: 0; }
.atlas-gl, .atlas-pins, .atlas-leaders, .atlas-names { transition: opacity .5s ease; }
/* the paper's own grain over the whole map, as on every painting on the site */
.atlas-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("img/paper.jpg") 0 0 / 640px 640px; mix-blend-mode: multiply; }

/* hand-placed place names */
.atlas-names { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.place {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 400 17px/1.1 var(--display); color: rgba(42, 33, 29, .74);
  text-shadow: 1.5px 0 0 var(--halo), -1.5px 0 0 var(--halo), 0 1.5px 0 var(--halo), 0 -1.5px 0 var(--halo),
    1.1px 1.1px 0 var(--halo), -1.1px -1.1px 0 var(--halo), 1.1px -1.1px 0 var(--halo), -1.1px 1.1px 0 var(--halo);
  opacity: 0; transition: opacity .3s ease;
}
.place.is-on { opacity: 1; }
.place--region { font: 600 12px/1 var(--label); letter-spacing: .34em; text-transform: uppercase; color: rgba(84, 68, 62, .62); }
/* phones (and phones held sideways), where the storefronts are smaller too (atlas.js): 13.5 px leaves
   Vancouver's name room among the six storefronts round it */
@media (max-width: 699px), (max-height: 450px) { .place { font-size: 13.5px; } .place--region { font-size: 10.5px; } }

/* leader lines from a fanned-out storefront back to its true spot */
.atlas-leaders { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.atlas-leaders path { fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-dasharray: 1 0; }
.atlas-leaders circle { fill: var(--red); stroke: var(--ink); stroke-width: 1.3; }

/* the storefronts: each <li> sits on its anchor (the foot of the facade) and scales from there */
.atlas-pins { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; transition: opacity .3s ease; }
.pin.is-off { opacity: 0; }
.pin.is-off .pin-btn { pointer-events: none; }
.pin-btn {
  position: absolute; left: calc(var(--x) * -1); top: calc(var(--up) * -1); width: var(--w);
  display: flex; flex-direction: column; align-items: center;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  transition: transform .45s cubic-bezier(.3, 1.7, .45, 1);
}
.pin-img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(42, 33, 29, .28)) drop-shadow(0 5px 5px rgba(42, 33, 29, .16)); }
.pin-slip {
  position: relative; display: block; margin-top: -14px; width: max-content;
  padding: 3px 9px 4px; background: var(--note); box-shadow: var(--slip-line);
  transform: rotate(var(--tilt));
}
.pin-name { display: block; white-space: nowrap; font: 400 15px/1.08 var(--display); color: var(--ink); }
.pin-town { display: block; margin-top: 2px; font: 600 10.5px/1.15 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
@media (hover: hover) { .pin-btn:hover { transform: translateY(-5px); } .pin-btn:hover .pin-name { color: var(--red); } }
.pin-btn:focus-visible { outline: none; transform: translateY(-5px); }
.pin-btn:focus-visible .pin-slip { box-shadow: 0 0 0 2px var(--note), 0 0 0 4.5px var(--ink); }
.pin:focus-within { z-index: 99999 !important; }
@media (max-width: 699px) {
  .pin-slip { margin-top: -11px; padding: 2px 7px 3px; }
  .pin-name { font-size: 12.5px; }
  .pin-town { font-size: 9.5px; letter-spacing: .07em; }
}

/* zoom and "all stores": over the map's corner on wide screens, on the paper just under it on phones.
   Every control is a 48 px target on touch screens. */
.atlas-frame { position: relative; }
.atlas-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 10px var(--gutter) 0; }
.atlas-tools button {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; background: var(--note); box-shadow: var(--slip-line); color: var(--ink); cursor: pointer;
  font: 600 .92rem/1 var(--body);
}
.atlas-tools button:hover { color: var(--red); }
.atlas-tools button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.atlas-tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.atlas-tools .atlas-all { width: auto; padding: 0 16px; margin-right: auto; transform: rotate(-1.5deg); }
@media (min-width: 700px) and (min-height: 451px) {
  .atlas-tools { position: absolute; z-index: 6; top: 24px; right: calc(var(--gutter) + 22px); margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 8px; }
  .atlas-tools button { width: 40px; height: 40px; }
  .atlas-tools .atlas-all { margin: 0 0 4px; padding: 0 14px; }
}
@media (min-width: 700px) and (min-height: 451px) and (pointer: coarse) { .atlas-tools button { width: 48px; height: 48px; } }
html.is-walking .atlas-tools { opacity: 0; transition: opacity .3s ease; }

/* the map's credits, written small on a strip of paper */
.atlas-map .maplibregl-ctrl-bottom-right { right: 16px; bottom: calc(8px + 2.6%); }
.atlas-map .maplibregl-ctrl-attrib.maplibregl-attrib-empty { display: none; }
.atlas-map .maplibregl-ctrl.maplibregl-ctrl-attrib { margin: 0; padding: 2px 8px 3px; border-radius: 0; background: rgba(251, 248, 240, .92); font: 500 11px/1.45 var(--body); color: var(--ink-soft); }
.atlas-map .maplibregl-ctrl-attrib a { color: var(--ink-soft); text-decoration: none; }
.atlas-map .maplibregl-ctrl-attrib a:hover { color: var(--red); text-decoration: underline; }
.atlas-map .maplibregl-ctrl-attrib a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* phones: the credits move to the paper under the map, in a line of their own under the buttons */
.atlas-credit { flex: 1 1 100%; margin: 2px 0 0; font: 500 11px/1.45 var(--body); color: var(--ink-soft); text-align: right; }
.atlas-credit a { color: inherit; text-decoration: none; }
.atlas-credit a:hover { color: var(--red); text-decoration: underline; }
.atlas-credit a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (max-width: 699px) { .atlas-map .maplibregl-ctrl-bottom-right { display: none; } }
@media (min-width: 700px) { .atlas-credit { display: none; } }
/* "use two fingers": a paper note, not a grey veil */
.atlas-map .maplibregl-cooperative-gesture-screen { background: rgba(251, 248, 240, .72); color: var(--ink); font: 600 1.05rem/1.3 var(--body); }

/* coming soon: a note taped to the map */
.atlas-card {
  position: absolute; left: 0; top: 0; z-index: 8; width: min(290px, calc(100% - 24px));
  padding: 24px 22px 18px; background: var(--note);
  box-shadow: 0 1px 0 rgba(42, 33, 29, .18), 0 12px 26px -16px rgba(42, 33, 29, .55);
}
.atlas-card::before { content: ""; position: absolute; left: 50%; top: -11px; width: 104px; height: 24px; margin-left: -52px; background: rgba(240, 182, 64, .58); transform: rotate(-2deg); }
.atlas-card-close { position: absolute; right: 0; top: 0; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
.atlas-card-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.atlas-card-close:hover { color: var(--red); }
.atlas-card-close:focus-visible { outline: 2px solid var(--ink); outline-offset: -9px; }
.atlas-card-soon { display: inline-block; margin: 0 0 8px; padding: 2px 8px 1px; border: 2px solid var(--red); color: var(--red); font: 600 .78rem/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-3deg); }
.atlas-card-name { margin: 0; font: 400 1.55rem/1.08 var(--display); outline: none; }
.atlas-card-where { margin: 6px 0 0; font: 600 .9rem/1.4 var(--body); color: var(--ink-soft); }
.atlas-card-addr { margin: 4px 0 0; font-size: .9rem; line-height: 1.45; }
.atlas-card-note { margin: 10px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }

.atlas-status { position: absolute; left: 50%; top: 50%; z-index: 9; transform: translate(-50%, -50%); width: min(30ch, 86%); margin: 0; text-align: center; font: 600 1rem/1.45 var(--body); color: var(--ink-soft); }
.atlas-map.is-unavailable { height: auto; min-height: 0; padding: 28px 0; background: none; border-top: 1px dashed rgba(42, 33, 29, .3); border-bottom: 1px dashed rgba(42, 33, 29, .3); }
.atlas-map.is-unavailable .atlas-status { position: static; transform: none; margin: 0 auto; }
.atlas-map.is-unavailable + .atlas-tools { display: none; }

html.is-walking .atlas-names, html.is-walking .atlas-leaders, html.is-walking .atlas-map .maplibregl-ctrl-bottom-right { opacity: 0; transition: opacity .3s ease; }

/* ---------------------------------------------------------------- the list */
.dir { max-width: 1160px; margin: 0 auto; padding: clamp(34px, 6vw, 70px) var(--gutter) 0; }
.dir-head { display: grid; gap: 14px; }
.dir-head h2 { margin: 0; font: 400 clamp(1.85rem, 5.4vw, 2.6rem)/1.05 var(--display); }
.dir-tools { display: grid; gap: 16px; margin: 0; }
.dir-search { display: flex; align-items: center; gap: 10px; max-width: 470px; padding: 2px 2px 4px; border-bottom: 2px solid var(--ink); }
.dir-search:focus-within { border-bottom-color: var(--red); box-shadow: 0 1.5px 0 var(--red); }
.dir-search svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.dir-search input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 0; border: 0; outline: none; background: none; color: var(--ink); font: 500 1.05rem var(--body); }
.dir-search input::placeholder { color: rgba(84, 68, 62, .62); }
.dir-search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* the kind filter, as little paper price tags; the chosen one turns red like the site's button */
.dir-kinds { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
/* each tag is a 48 px target: the label reaches past the painted tag, above and below it */
.kind { position: relative; display: inline-block; padding: 9px 0; margin: -9px 0; cursor: pointer; transform: rotate(-1.2deg); }
.kind:nth-child(even) { transform: rotate(1deg); }
.kind input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kind span {
  position: relative; display: block; padding: 7px 13px 7px 27px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  background: #efe5cf; color: var(--ink); font: 600 .9rem/1.2 var(--body); white-space: nowrap;
}
.kind span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.4px rgba(42, 33, 29, .7); }
.kind small { margin-left: 3px; font: 600 .8rem var(--label); color: var(--ink-soft); }
.kind input:checked + span { background: #c2362f url("../../img/tag-sm.webp") center / 100% 100% no-repeat; color: #fff7ea; }
.kind input:checked + span small { color: #fbd9c4; }
.kind:hover span { background-color: #e8dcc2; }
.kind input:checked:hover + span { background-color: #c2362f; }
.kind input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--ink); }
/* and a ring round the whole tag, which shows on the red chosen one too */
.kind:has(input:focus-visible) { outline: 2.5px solid var(--ink); outline-offset: 1px; border-radius: 4px; }

.dir-status { margin: 0; font: 600 .95rem var(--body); color: var(--ink-soft); }
.dir-list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1.5px solid rgba(42, 33, 29, .72); }
.dir-item {
  position: relative;
  display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "thumb body" "thumb live" "thumb walk";
  column-gap: 16px; row-gap: 3px; align-items: center;
  padding: 16px 0 15px; border-bottom: 1px dashed rgba(42, 33, 29, .38);
}
.dir-item[hidden] { display: none; }
.dir-thumb { grid-area: thumb; width: 92px; height: auto; align-self: center; }
.dir-body { grid-area: body; min-width: 0; }
.dir-name { margin: 0; font: 400 1.32rem/1.1 var(--display); }
.dir-meta { margin: 3px 0 0; font: 600 .9rem/1.35 var(--body); color: var(--ink-soft); }
.dir-kind::before { content: "·"; margin: 0 .45em; }
.dir-addr { margin: 2px 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink-soft); }
.dir-live { grid-area: live; margin: 2px 0 0; font-size: .95rem; }
.dir-live strong { font: 600 1.14rem var(--label); color: var(--red); letter-spacing: .02em; }
.dir-live--soon strong { font: 600 .82rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.dir-walk { grid-area: walk; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font: 600 .98rem var(--body); color: var(--ink); text-decoration: none; }
/* the whole row is the link's target, so the shop's name and picture take a tap too */
a.dir-walk::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  a.dir-walk:hover { color: var(--red); }
  a.dir-walk:hover .ink-arrow { transform: translateX(4px); }
  .dir-item:has(a.dir-walk:hover) .dir-name { color: var(--red); }
}
a.dir-walk:focus-visible { outline: none; }
a.dir-walk:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; }
.dir-walk--soon { color: var(--ink-soft); font-weight: 500; }
.dir-walk .ink-arrow { width: 34px; height: 16px; }
.dir-empty { margin: 22px 0 0; color: var(--ink-soft); }
@media (max-width: 899px) {
  .dir-kind { display: block; }
  .dir-kind::before { content: none; }
}
@media (max-width: 520px) {
  .dir-kinds { gap: 9px 8px; }
  .kind span { padding: 7px 11px 7px 25px; font-size: .85rem; }
  .kind span::before { left: 9px; }
}
.dir-empty button { margin: -12px 0 -12px 6px; padding: 12px 2px; border: 0; background: none; color: var(--ink); font: 600 1rem var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 900px) {
  .dir-tools { gap: 18px; }
  .dir-item { grid-template-columns: 116px minmax(0, 1.5fr) minmax(0, 1fr) 150px; grid-template-areas: "thumb body live walk"; column-gap: 26px; padding: 14px 0; }
  .dir-thumb { width: 116px; }
  .dir-walk { justify-self: end; }
}

/* ---------------------------------------------------------------- your shop */
.yours { margin: clamp(56px, 9vw, 110px) var(--gutter) 0; text-align: center; }
.yours h2 { margin: 0 0 8px; font: 400 clamp(1.8rem, 5vw, 2.5rem)/1.05 var(--display); }
.yours p { margin: 0 auto 26px; max-width: 40ch; color: var(--ink-soft); }
.yours .tag-btn { margin-left: 20px; }
@media (max-width: 359px) {
  .yours .tag-btn > span { padding-left: 40px; padding-right: 18px; font-size: .98rem; }
  .dir-search input { font-size: .96rem; }
}

.credits { margin: clamp(56px, 8vw, 100px) var(--gutter) 0; padding: 18px 0 30px; border-top: 1px dashed rgba(42, 33, 29, .3); }
.credits p { margin: 0 auto; max-width: 92ch; font-size: .8rem; line-height: 1.55; color: var(--ink-soft); text-align: center; }
.credits a { color: inherit; }

/* ---------------------------------------------------------------- walking in */
.walkin { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; }
.walkin[hidden] { display: none; }
.walkin.on { pointer-events: auto; cursor: pointer; }
.walkin-paper { position: absolute; inset: 0; opacity: 0; background: var(--paper) url("img/paper.jpg") 0 0 / 640px 640px; }
.walkin-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; visibility: hidden; }
.walkin.on .walkin-img { visibility: visible; }
.walkin-wet { position: absolute; inset: 0; width: 100%; height: 100%; }
.walkin-card { position: absolute; left: 50%; top: 50%; width: min(88vw, 680px); margin: 0; text-align: center; opacity: 0; transform: translate(-50%, -44%); transition: opacity .5s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.walkin.card-on .walkin-card { opacity: 1; transform: translate(-50%, -50%); }
.walkin-card p { margin: 0; }
.walkin-thumb { display: block; width: clamp(120px, 16vw, 168px); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 1px 0 rgba(42, 33, 29, .28)) drop-shadow(0 6px 6px rgba(42, 33, 29, .14)); }
.walkin-kicker { font: 600 .8rem var(--label); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.walkin-name { margin: 12px 0 10px !important; font: 400 clamp(2.3rem, 7.4vw, 4.4rem)/1.03 var(--display); color: var(--ink); }
.walkin-where { font: 600 1rem var(--body); color: var(--ink-soft); }
.walkin-count { margin-top: 6px !important; font: 600 1.2rem var(--label); letter-spacing: .02em; color: var(--red); }

/* Windows high contrast drops box-shadows: the storefronts and the kind tags get real outlines */
@media (forced-colors: active) {
  .pin-btn:focus-visible .pin-slip, .kind:has(input:focus-visible) { outline: 3px solid CanvasText; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .pin, .pin-btn, .place, .walkin-card, .atlas-gl, .atlas-pins, .atlas-leaders, .atlas-names { transition: none; }
  html.is-walking .atlas-tools, html.is-walking .atlas-names, html.is-walking .atlas-leaders, html.is-walking .atlas-map .maplibregl-ctrl-bottom-right,
  .atlas-map .maplibregl-cooperative-gesture-screen { transition: none; }
  .pin-btn:hover, .pin-btn:focus-visible { transform: none; }
  .walkin-card, .walkin.card-on .walkin-card { transform: translate(-50%, -50%); }
}