/* sm-shell.css — top bar + account menu shared by home.html and map.html,
 * plus the batch-2 page pieces that must match on both: story-door map pins,
 * the wallet block, the Welcome Week card and night-mode shop windows.
 * Reads the page tokens (--surface/--ink/--line/--purple); both body.dark and
 * body[data-theme="dark"] are honoured. */

/* ---------- top bar ---------- */
#smShell{position:sticky;top:0;z-index:50;background:rgba(247,246,250,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line,#E8E6EF)}
body.dark #smShell,body[data-theme="dark"] #smShell{background:rgba(20,16,30,.78);border-bottom-color:rgba(255,255,255,.08)}
#smShell.sh-float{position:fixed;left:0;right:0;top:0;z-index:45}
#smShell .sh-wrap{max-width:1200px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:18px}
#smShell .sh-logo{display:flex;align-items:center;flex:none}
#smShell .sh-logo img{height:26px;display:block}
body.dark #smShell .sh-logo img,body[data-theme="dark"] #smShell .sh-logo img{content:url('/assets/brand/wordmark-vertical-light.png')}
#smShell .sh-links{display:flex;gap:2px;align-items:center}
#smShell .sh-links a{font-family:var(--body,'Manrope',sans-serif);font-size:13.5px;font-weight:700;color:var(--ink-soft,#5C566F);text-decoration:none;
  padding:9px 13px;border-radius:12px;transition:.15s}
#smShell .sh-links a:hover{background:var(--purple-tint,#F1ECFB);color:var(--purple-deep,#57309C)}
#smShell .sh-links a[aria-current="page"]{color:var(--purple-deep,#57309C)}
body.dark #smShell .sh-links a[aria-current="page"],body[data-theme="dark"] #smShell .sh-links a[aria-current="page"]{color:#CBB7F2}
#smShell .sh-right{margin-left:auto;display:flex;align-items:center;gap:8px}
#smShell .sh-plus{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;text-decoration:none;
  font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:13px;color:#3A2A08;
  background:linear-gradient(135deg,#F2CB6B,#D79A2B);box-shadow:0 1px 2px rgba(32,26,51,.12),inset 0 1px 0 rgba(255,255,255,.55)}
#smShell .sh-plus span{font-size:12px}
#smShell .sh-join[hidden]{display:none!important}
#smShell .sh-join{height:38px;padding:0 16px;border:none;border-radius:999px;cursor:pointer;font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--purple,#6C3FC5),var(--purple-deep,#57309C));box-shadow:0 6px 16px rgba(108,63,197,.28)}
#smShell .sh-signin{height:38px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;text-decoration:none;font-weight:800;font-size:13px;color:var(--ink-soft,#5C566F)}
#smShell .sh-acct{position:relative}
#smShell .sh-avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#E8E6EF);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface,#fff);color:var(--purple-deep,#57309C);font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:15px;cursor:pointer;transition:.15s}
body.authed #smShell .sh-avatar{background:linear-gradient(135deg,#8A5CE0,var(--purple-deep,#57309C));color:#fff;border-color:transparent}
#smShell .sh-acct.open .sh-avatar{box-shadow:0 0 0 3px rgba(108,63,197,.25)}

/* ---------- dropdown ---------- */
#smShell .sh-menu{position:absolute;right:0;top:50px;z-index:300;width:min(320px,calc(100vw - 32px));display:none;flex-direction:column;padding:8px;
  background:var(--surface,#fff);border:1px solid var(--line,#E8E6EF);border-radius:18px;
  box-shadow:0 1px 2px rgba(32,26,51,.06),0 18px 44px rgba(32,26,51,.18)}
#smShell .sh-menu.show{display:flex}
body.dark #smShell .sh-menu,body[data-theme="dark"] #smShell .sh-menu{background:rgba(34,28,50,.96);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.1)}
#smShell .sh-sec{font-family:var(--display,'Sora',sans-serif);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint,#948DA8);padding:10px 12px 4px}
#smShell .sh-sec:empty{padding:0;margin:6px 0;border-top:1px solid var(--line,#E8E6EF)}
#smShell .sh-menu a,#smShell .sh-menu button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:9px 10px;border-radius:12px;font-family:var(--body,'Manrope',sans-serif);font-size:14px;font-weight:700;color:var(--ink,#201A33);text-decoration:none}
#smShell .sh-menu a:hover,#smShell .sh-menu button:hover{background:var(--purple-tint,#F1ECFB)}
#smShell .sh-menu i{flex:none;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;
  background:var(--purple-tint,#F1ECFB);color:var(--purple-deep,#57309C)}
body.dark #smShell .sh-menu i,body[data-theme="dark"] #smShell .sh-menu i{background:rgba(203,183,242,.14);color:#CBB7F2}
#smShell .sh-menu .danger{color:#B93A2E}
#smShell .sh-menu .danger i{background:rgba(185,58,46,.12);color:#B93A2E}
body.dark #smShell .sh-menu .danger,body[data-theme="dark"] #smShell .sh-menu .danger{color:#F0908A}
#smShell .sh-menu .danger:hover{background:rgba(185,58,46,.08)}
@media(max-width:899px){#smShell .sh-links{display:none}#smShell .sh-signin{display:none}}
@media(max-width:480px){#smShell .sh-wrap{padding:0 12px;height:56px}#smShell .sh-logo img{height:22px}}

/* ---------- map pins as story doors ---------- */
/* map.html uses .hpin (ring + inner image); home.html uses .hmark (image div). Both
   become rounded-square "shop windows"; a photo count badge appears via data-n. */
.hpin{border-radius:13px!important}
.hpin .hp-img,.hpin .hp-glyph{border-radius:10px!important}
.hpin.sel{border-radius:16px!important}
.hpin.sel .hp-img,.hpin.sel .hp-glyph{border-radius:12px!important}
.hmark{border-radius:13px!important}
.hpin[data-n]::before,.hmark[data-n]::before{content:attr(data-n);position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--purple,#6C3FC5);color:#fff;font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:12px;line-height:20px;text-align:center;
  border:2px solid var(--surface,#fff);box-shadow:0 2px 6px rgba(20,16,30,.35);z-index:2}
.hmark{position:relative}
.hpin[data-n].deal::after{display:none}

/* ---------- wallet block (home) ---------- */
.sm-wallet{display:none;grid-template-columns:minmax(0,1fr);border-radius:var(--radius,18px);background:var(--surface,#fff);border:1px solid var(--line,#E8E6EF);
  box-shadow:var(--shadow-sm),var(--shine);overflow:hidden}
.sm-wallet .sm-card{padding:14px;display:flex;align-items:center;justify-content:center;background:var(--canvas,#F7F6FA)}
.sm-wallet .stagey{min-width:0;max-width:100%}   /* Run 8: the card's frame shrinks with a narrow phone (it stayed 300 px and was cut off at 320) */
.sm-wallet .plus-card{width:300px;height:189px;max-width:100%;aspect-ratio:1.59;padding:16px 18px;margin:0;box-sizing:border-box;border-radius:14px}
.sm-wallet .plus-card:hover{transform:none}
.sm-wallet .plus-card .name{font-size:18px;margin-bottom:10px}
.sm-wallet .plus-card .pgrid{gap:10px}
.sm-wallet .sm-pts{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.sm-wallet .points-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sm-wallet .points-top .num{font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:38px;letter-spacing:-.5px;color:var(--purple-deep,#57309C);line-height:1}
body.dark .sm-wallet .points-top .num{color:#CBB7F2}
.sm-wallet .points-top .unit{font-size:13px;font-weight:700;color:var(--ink-soft,#5C566F);margin-left:5px}
.sm-wallet .points-top .lbl{display:none}
.sm-wallet .points-sub{font-size:13px;font-weight:600;color:var(--ink-soft,#5C566F);line-height:1.5}
.sm-wallet #potList{display:flex;flex-direction:column}
.sm-wallet .wallet-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.sm-wallet .wallet-row>span{display:none}
@media(min-width:900px){
  .sm-wallet{grid-template-columns:328px 1fr;min-height:217px}
  .hero-row .side{grid-column:1/-1}   /* wallet sits full-width under the map on desktop */
}

body.authed .sm-wallet{display:grid}

/* ---------- Welcome Week campaign card (logged out) ---------- */
.sm-campaign{position:relative;overflow:hidden;border-radius:var(--radius,18px);padding:22px;color:#fff;
  background:linear-gradient(135deg,#6C3FC5 0%,#57309C 55%,#2C1A52 100%);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.18)}
.sm-campaign::before{content:'';position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,61,.45),transparent 65%);pointer-events:none}
.sm-campaign .sc-when{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:5px 11px;font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:12px;margin-bottom:12px}
.sm-campaign h3{font-family:var(--display,'Sora',sans-serif);font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.2px;margin:0 0 8px}
.sm-campaign p{font-size:13.5px;line-height:1.55;opacity:.92;margin:0 0 16px;max-width:38ch}
.sm-campaign .btns{display:flex;gap:8px;flex-wrap:wrap}
.sm-campaign .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.sm-campaign .btn.ghost:hover{color:#fff;border-color:#fff}

/* ---------- shop windows at night ---------- */
body.dark .rcard,body[data-theme="dark"] .rcard{background:#221E2E;border-color:#3A3450}
body.dark .rcard .ph,body[data-theme="dark"] .rcard .ph{background:#2C2440}
body.dark .rcard .ph img.hero,body[data-theme="dark"] .rcard .ph img.hero{filter:brightness(.92) contrast(1.05)}
body.dark .rcard .ph .fallback,body[data-theme="dark"] .rcard .ph .fallback{background:linear-gradient(135deg,#2C2440,#3A2E5C)}
body.dark .rcard .ph .fallback b,body[data-theme="dark"] .rcard .ph .fallback b{color:rgba(203,183,242,.4)}
body.dark .rcard .nm,body[data-theme="dark"] .rcard .nm{color:#EFEAF8}
body.dark .rcard .mt,body[data-theme="dark"] .rcard .mt{color:#B7AFCB}
body.dark .rcard:hover,body[data-theme="dark"] .rcard:hover{box-shadow:0 14px 36px rgba(0,0,0,.5),0 0 0 3px rgba(203,183,242,.22)}
body.dark .skel,body[data-theme="dark"] .skel{background:linear-gradient(100deg,#2A2438 40%,#332C46 50%,#2A2438 60%);background-size:200% 100%}

/* ---- App Project Fix R2: unverified-account pill in the header ---- */
#smShell .sh-plus.sh-verify{color:#fff;background:linear-gradient(135deg,var(--purple,#6C3FC5),var(--purple-deep,#57309C));box-shadow:0 6px 16px rgba(87,48,156,.28)}
#smShell .sh-plus.sh-verify span{font-size:13px}
/* R112 — the App Store / Play build runs edge to edge: keep the bar's contents below the status bar (only in the app; config.js sets data-native) */
html[data-native="1"] #smShell{padding-top:env(safe-area-inset-top)}

/* ═══ Run 8 (R122): the full audit — tap targets of at least 44 px; nothing moves ═══ */
#smShell .sh-logo{min-height:44px}
#smShell .sh-plus,#smShell .sh-join,#smShell .sh-signin{height:44px}
#smShell .sh-avatar{width:44px;height:44px}
#smShell .sh-links a{min-height:44px;display:inline-flex;align-items:center}
.sm-campaign .btn{min-height:44px}