/* ============================================================================
   The pass ring — mini boarding passes fanned round a map pin. See js/poi-ring.js.
   Sits over the map (and #gs-card, 1200) but under the pass sheet (#hb-sheet,
   4151), so a tapped mini's full pass covers it and "← All N tickets" lands back.
   ============================================================================ */
#pr-root {
    --cx: 50vw; --cy: 45vh;
    position: fixed; inset: 0; z-index: 1240; pointer-events: none;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    -webkit-user-select: none; user-select: none;
}
#pr-root.on { pointer-events: auto; }

/* the map dims, with the pin itself left in a pool of light */
#pr-root .pr-dim {
    position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--cx) var(--cy), rgba(20, 24, 30, 0) 0 30px, rgba(20, 24, 30, .44) 46px);
}
#pr-root.on .pr-dim { opacity: 1; }

/* after a check-in the map's pin is gone — the place keeps a green ✓N in its stead */
#pr-root .pr-here {
    position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%) scale(.3);
    min-width: 40px; height: 40px; padding: 0 8px; border-radius: 20px; display: none;
    background: #27ae60; color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    font: 800 16px/34px var(--font-ui, 'Figtree', sans-serif); text-align: center; box-sizing: border-box;
    transition: transform .45s cubic-bezier(.2, 1.8, .4, 1);
}
#pr-root.hit .pr-here { display: block; }
#pr-root.on.hit .pr-here { transform: translate(-50%, -50%) scale(1); }

/* the ring */
#pr-root .pr-ring { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; }
/* the place, what one visit does, and the check-in — docked at the bottom so
   it never collides with a pass, however many there are */
#pr-root .pr-panel {
    position: absolute; left: 50%; bottom: calc(18px + var(--safe-bottom, 0px)); transform: translate(-50%, 16px);
    width: min(calc(100vw - 32px), 360px); box-sizing: border-box; text-align: center; color: #fff;
    background: rgba(15, 17, 23, .9); border-radius: 18px; padding: 13px 16px 10px; opacity: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: opacity .25s .1s, transform .3s .1s;
}
#pr-root.on .pr-panel { opacity: 1; transform: translate(-50%, 0); }
#pr-root .pr-panel b { display: block; font: 400 16px var(--font-display, 'Archivo Black', sans-serif); }
#pr-root .pr-panel small {
    display: block; font: 800 9px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .14em; color: #ffcf3d; margin-top: 4px;
}
#pr-root.hit .pr-panel small { color: #7ee2a2; }
#pr-root .pr-check {
    display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 12px; padding: 11px 14px; cursor: pointer;
    background: #fff; color: #1a1a1a; font: 800 13.5px var(--font-ui, 'Figtree', sans-serif);
}
#pr-root .pr-check:disabled { opacity: .7; }
#pr-root .pr-away { display: block; margin-top: 8px; font: 500 12px var(--font-ui, 'Figtree', sans-serif); color: rgba(255, 255, 255, .75); line-height: 1.4; }
#pr-root .pr-report {
    margin-top: 8px; border: 0; background: none; color: rgba(255, 255, 255, .5); padding: 4px 8px;
    font: 600 11px var(--font-ui, 'Figtree', sans-serif); cursor: pointer;
}

#pr-root .pr-mini {
    position: absolute; left: 0; top: 0; width: 120px; height: 82px; margin: -41px 0 0 -60px; border: 0; padding: 0;
    cursor: pointer; border-radius: 11px; color: #fff; background: none; text-align: left;
    font-family: var(--font-ui, 'Figtree', sans-serif); overflow: visible;
    /* drop-shadow, not box-shadow: it follows the notches instead of filling them */
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .3));
    transform: translate(0, 0) scale(.2); opacity: 0; -webkit-tap-highlight-color: transparent;
    transition: transform .42s cubic-bezier(.2, 1.45, .4, 1), opacity .2s;
}
#pr-root.on .pr-mini.in { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
#pr-root.on .pr-mini.in:active { transform: translate(var(--x), var(--y)) scale(.94); }
/* notches + perforation: a boarding pass, not a chip. The ground is its own
   layer so the notches can be real holes (the map shows through) while the
   stamp art and the CHECKED IN sticker still hang over the edges. */
#pr-root .pr-mini::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 11px; background: var(--c1);
    -webkit-mask: radial-gradient(circle 5.5px at 0 58px, transparent 98%, #000 100%) left / 51% 100% no-repeat,
                  radial-gradient(circle 5.5px at 100% 58px, transparent 98%, #000 100%) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 5.5px at 0 58px, transparent 98%, #000 100%) left / 51% 100% no-repeat,
                  radial-gradient(circle 5.5px at 100% 58px, transparent 98%, #000 100%) right / 51% 100% no-repeat;
}
#pr-root .pr-mt { position: absolute; left: 0; right: 0; top: 0; padding: 7px 34px 0 9px; }  /* top-pinned: a <button> centres its content */
#pr-root .pr-mt small {
    display: block; font: 800 7px/1.1 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; opacity: .75;
}
#pr-root .pr-mt b {
    margin-top: 3px; font: 400 10.5px/1.15 var(--font-display, 'Archivo Black', sans-serif); overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#pr-root .pr-mb {
    position: absolute; left: 0; right: 0; bottom: 0; height: 24px; border-top: 1.5px dashed rgba(255, 255, 255, .35);
    background: rgba(0, 0, 0, .14);
    /* the stub's top edge runs through the notches — punch them here too */
    -webkit-mask: radial-gradient(circle 5.5px at 0 0, transparent 98%, #000 100%) left / 51% 100% no-repeat,
                  radial-gradient(circle 5.5px at 100% 0, transparent 98%, #000 100%) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 5.5px at 0 0, transparent 98%, #000 100%) left / 51% 100% no-repeat,
                  radial-gradient(circle 5.5px at 100% 0, transparent 98%, #000 100%) right / 51% 100% no-repeat; border-radius: 0 0 11px 11px; display: flex; align-items: center;
    justify-content: space-between; padding: 0 9px; box-sizing: border-box;
    font: 800 9px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .06em;
}
#pr-root .pr-mb em { font-style: normal; color: #ffcf3d; }
#pr-root .pr-mini.ready .pr-mb { background: #ffcf3d; color: #1a1a1a; }
#pr-root .pr-mini.ready .pr-mb em { color: #1a1a1a; }
#pr-root .pr-art {
    position: absolute; right: -6px; top: -10px; width: 40px; height: 40px; object-fit: contain; transform: rotate(8deg);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}
#pr-root .pr-art.tone-dark { background: #F4F1EA; border-radius: 50%; padding: 3px; box-sizing: border-box; }
#pr-root .pr-art-none { display: grid; place-items: center; color: #ffcf3d; font-size: 20px; }
#pr-root .pr-coin { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; }
#pr-root .pr-pnch {
    position: absolute; left: -8px; top: -12px; transform: rotate(-10deg) scale(2.2); z-index: 2; opacity: 0;
    font: 800 8.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; color: #fff;
    background: #27ae60; border: 2px solid #fff; padding: 3px 5px; border-radius: 5px; white-space: nowrap;
}
#pr-root .pr-mini.hit .pr-pnch { animation: prPunch .4s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes prPunch { to { transform: rotate(-10deg) scale(1); opacity: 1; } }

/* WHY GO? — the caller's line above a pass opened from the map */
#hb-sheet .pr-why {
    margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff7d6;
    border: 1px solid rgba(179, 135, 40, .35); font-size: 14px; line-height: 1.45;
}
#hb-sheet .pr-why small {
    display: block; font: 800 9.5px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .14em;
    color: #7a5a10; margin-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
    #pr-root .pr-mini, #pr-root .pr-here { transition-duration: .01s !important; }
}

/* ── THE PLACE CARD (2026-11-02, default; js/poi-ring.js cardOpen) ───────
   The partner card's grammar for every pin. Demo: /static/poi-card-v2-preview.html */
.pc-pop { z-index: 6; }
.pc-pop .mapboxgl-popup-content { padding: 0; border-radius: 18px; overflow: hidden; background: #fff; width: 264px;
    box-shadow: 0 10px 34px rgba(0,0,0,.3); font-family: var(--font-ui, Figtree, sans-serif); color: #1a1a1a;
    animation: pc-rise .32s cubic-bezier(.2,.9,.3,1.2); }
.pc-pop .mapboxgl-popup-tip { border-top-color: #fff; }
@keyframes pc-rise { from { transform: translateY(14px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.pc-pop .pc-hero { position: relative; height: 118px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-pop .pc-stamp { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.pc-pop .dw-coin.pc-stamp { width: 84px; height: 84px; }
.pc-pop .pc-fan { display: flex; align-items: center; }
.pc-pop .pc-fa { width: 64px; height: 64px; object-fit: contain; margin: 0 -10px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.pc-pop .pc-fan > :nth-child(2) { width: 80px; height: 80px; z-index: 1; }
.pc-pop .pc-none { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; }
.pc-pop .pc-stamp.tone-light, .pc-pop .pc-fa.tone-light, :is(.pc-pop, .pc-scope) .pc-art.tone-light { background: #1a1a2e; border-radius: 50%; padding: 4px; box-sizing: border-box; }
.pc-pop .pc-tag { position: absolute; top: 10px; left: 10px; background: rgba(26,26,26,.8); color: #fff; font-size: 10px;
    font-weight: 800; letter-spacing: .12em; padding: 4px 9px; border-radius: 100px; }
.pc-pop .pc-body { padding: 12px 14px 14px; }
.pc-pop .pc-name { font-weight: 800; font-size: 17px; line-height: 1.15; }
.pc-pop .pc-dist { font-size: 12px; color: #777; margin-top: 2px; }
:is(.pc-pop, .pc-scope) .pc-h { margin: 12px 0 4px; font: 700 10px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; color: #8a8270; }
:is(.pc-pop, .pc-scope) .pc-rows { max-height: 196px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain; }
:is(.pc-pop, .pc-scope) .pc-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px;
    border-radius: 12px; cursor: pointer; }
:is(.pc-pop, .pc-scope) .pc-row + .pc-row { border-top: 1px solid #f0ebe0; }
:is(.pc-pop, .pc-scope) .pc-row:active { background: #F4F1EA; }
:is(.pc-pop, .pc-scope) .pc-art { width: 38px; height: 38px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
:is(.pc-pop, .pc-scope) .pc-art.pc-none { background: #e74c3c; border-radius: 50%; font-size: 18px; }
:is(.pc-pop, .pc-scope) .pc-tx { flex: 1; min-width: 0; }
:is(.pc-pop, .pc-scope) .pc-tx b { display: block; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pc-pop, .pc-scope) .pc-tx small { display: block; font-size: 11px; color: #888; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.pc-pop, .pc-scope) .pc-bar { height: 4px; border-radius: 3px; background: #eee7d8; margin-top: 5px; overflow: hidden; }
:is(.pc-pop, .pc-scope) .pc-bar i { display: block; height: 100%; background: #e74c3c; border-radius: 3px; }
:is(.pc-pop, .pc-scope) .pc-row.ready .pc-bar i { background: #27ae60; }
:is(.pc-pop, .pc-scope) .pc-ct { font: 700 12px var(--font-mono, 'JetBrains Mono', monospace); color: #555; transition: color .3s; }
:is(.pc-pop, .pc-scope) .pc-ct.up { color: #27ae60; }
:is(.pc-pop, .pc-scope) .pc-chev { color: #bbb; font-size: 18px; margin-left: -4px; }
:is(.pc-pop, .pc-scope) .pc-punch { position: absolute; left: 32px; top: 30px; width: 20px; height: 20px; border-radius: 50%;
    background: #27ae60; color: #fff; border: 2px solid #fff; font: 800 11px/16px var(--font-ui, Figtree, sans-serif);
    text-align: center; transform: scale(0); pointer-events: none; }
:is(.pc-pop, .pc-scope) .pc-row.done .pc-punch { animation: pc-punch .38s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes pc-punch { to { transform: scale(1); } }
:is(.pc-pop, .pc-scope) .pc-row.done .pc-tx small { color: #1e7a45; font-weight: 700; }
.pc-pop .pc-more { display: block; width: 100%; margin-top: 2px; border: 0; background: none; padding: 7px 0 2px;
    font: 700 12.5px var(--font-ui, Figtree, sans-serif); color: #e74c3c; cursor: pointer; text-align: left; }
.pc-pop .pc-state { margin-top: 10px; font-size: 12px; color: #555; background: #F4F1EA; border-radius: 11px; padding: 8px 10px; text-align: center; line-height: 1.35; }
.pc-pop .pc-state.ok { background: #e3f4ea; color: #1e7a45; font-weight: 700; }
.pc-pop .pc-check { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 100px; padding: 11px 0;
    font: 800 13.5px var(--font-ui, Figtree, sans-serif); color: #1a1a1a; cursor: pointer;
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 40%, #b38728 60%, #fbf5b7 100%); }
.pc-pop .pc-check:disabled { opacity: .6; }
.pc-pop .pc-report { display: block; margin: 8px auto 0; border: 0; background: none; font: 600 11px var(--font-ui, Figtree, sans-serif); color: #999; cursor: pointer; }
.pc-scope .pc-h { margin-top: 10px; }
.dpad-partner-popup .pc-scope .pc-tx b { font-size: 13px; }
/* The landing hint would sit on the card; the card already says how check-in works. */
body.pc-open #dep-landing-notice { display: none !important; }

/* ── Show me the way (js/map-route.js, 2026-11-03) ─────────────────────── */
.pc-pop .pc-walk { display: block; width: 100%; margin-top: 8px; border: 1.5px solid #1a1a1a; border-radius: 100px;
    padding: 10px 0; background: #fff; font: 800 13.5px var(--font-ui, Figtree, sans-serif); color: #1a1a1a; cursor: pointer; }
.dr-strip { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 608px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
    background: #1a1a1a; color: #F4F1EA; box-shadow: 0 8px 32px rgba(0,0,0,.35);
    font-family: var(--font-ui, Figtree, sans-serif);
    transform: translateY(calc(100% + 140px)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.dr-strip.up { transform: none; }
.dr-strip .dr-tx { min-width: 0; }
.dr-strip .dr-nm { font-size: 13px; font-weight: 700; color: #FFD93D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-strip .dr-big { font-size: 22px; font-weight: 800; line-height: 1.05; margin-top: 2px; }
.dr-strip .dr-sm { font-size: 12px; opacity: .75; margin-top: 3px; }
.dr-strip .dr-btns { margin-left: auto; display: flex; gap: 6px; flex: none; }
.dr-strip button { border: 0; border-radius: 10px; padding: 10px 12px; font: 700 13px var(--font-ui, Figtree, sans-serif);
    color: inherit; background: rgba(255,255,255,.12); cursor: pointer; }
.dr-strip .dr-maps { background: #FFD93D; color: #1a1a1a; }
@media (prefers-reduced-motion: reduce) { .dr-strip { transition: none; } }