/* BeanMood · the spotlight slot under the city title, and the bean-mood quiz floating over the map (docked at the bottom on phones). */

/* ---------- the spotlight ---------- */
.spotlight{position:relative;margin-top:2px}
body.detail-on .spotlight,body.passport-on .spotlight{display:none}
.sp-card{position:relative;display:grid;gap:10px;padding:18px 18px 16px;border:var(--ink-line);border-radius:24px;background:var(--sp-bg,#f9c3b4);color:var(--espresso);box-shadow:var(--pop);overflow:visible}
.sp-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:28px;padding-right:100px}
.sp-kicker{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:2px solid var(--espresso);border-radius:999px;background:#fff;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.sp-kicker i{font-style:normal;color:var(--accent)}
.sp-paid{font-size:11px;font-weight:800;color:var(--espresso);opacity:.75}
.sp-art{position:absolute;right:6px;top:-30px;pointer-events:none}
.sp-name{font-size:28px;line-height:31px;font-weight:900;letter-spacing:-.03em;padding-right:70px}
.sp-meta{font-size:14px;font-weight:700;opacity:.85}
.sp-why{font-size:16px;line-height:22px;font-weight:600}
.sp-shelf{font-size:13px;line-height:18px}
.sp-shelf b{font-weight:900}
.sp-roast{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sp-roast i{width:30px;height:9px;border:2px solid var(--espresso);border-radius:999px;background:#fff}
.sp-roast span{margin-left:6px;font-size:12px;font-weight:800;white-space:nowrap}
.sp-foot{display:flex;align-items:center;gap:10px;margin-top:2px}
.sp-foot .btn{height:40px}
.sp-dots{margin-left:auto;display:flex;gap:6px}
.sp-dots button{width:12px;height:12px;padding:0;border:2px solid var(--espresso);border-radius:50%;background:#fff;cursor:pointer}
.sp-dots button[aria-current="true"]{width:28px;border-radius:999px;background:var(--espresso)}
.sp-next{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--espresso);border-radius:50%;background:#fff;box-shadow:2px 2px 0 var(--espresso);cursor:pointer;font-size:18px;font-weight:900;color:var(--espresso)}
.sp-next:active{transform:translate(2px,2px);box-shadow:none}

/* ---------- the quiz, floating over the map (desktop) ---------- */
/* bottom-left of the map, sitting just above the legend */
.mapframe>.mood{position:absolute;left:12px;bottom:68px;z-index:6;width:372px;margin:0;padding:14px 16px 14px 8px;grid-template-columns:70px minmax(0,1fr)}
.mapframe>.mood .mood-text{padding-right:30px}
.mapframe>.mood .mood-text strong{font-size:19px;line-height:23px;white-space:nowrap}
.mapframe>.mood .mood-text span:not(.kicker){font-size:13px;line-height:18px}
.mapframe>.mood .mascot-slot{width:70px}
.mapframe>.mood .mascot-slot .mascot{zoom:.85}
.mapframe>.mood .quickroast{flex-wrap:wrap}
.mapframe>.mood .quickroast button{width:40px;height:42px}
.mood .mood-min{position:absolute;top:8px;right:10px;width:28px;height:28px;border:2px solid var(--espresso);border-radius:50%;background:#fff;color:var(--espresso);font-size:15px;font-weight:900;line-height:1;cursor:pointer}
.mood.has-mood .mood-min{background:#fff}
.mood.is-min{width:auto!important;grid-template-columns:auto auto;padding:6px 16px 6px 8px;border-radius:999px;cursor:pointer}
.mood.is-min>*:not(.mascot-slot):not(.mood-pill){display:none!important}
.mood .mood-pill{display:none}
.mood.is-min .mood-pill{display:block;font-weight:900;font-size:15px;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.mood.is-min .mascot-slot{grid-row:auto;width:52px;margin:-18px 0 -6px}
.mood.is-min .mascot-slot .mascot{zoom:.6}
@media (prefers-reduced-motion:no-preference){.mapframe>.mood{animation:quiz-float-in .6s cubic-bezier(.3,1.5,.5,1) .4s both}}
@keyframes quiz-float-in{from{transform:translateY(30px) scale(.9);opacity:0}}

/* ---------- the quiz, docked to the bottom on phones ---------- */
@media (max-width:900px){
 .pane{padding-bottom:110px}
 body>.mood{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;margin:0;padding:10px 12px 10px 6px;grid-template-columns:64px minmax(0,1fr) auto;row-gap:0}
 body>.mood .mascot-slot{grid-row:auto;width:64px;margin:-22px 0 -6px}
 body>.mood .mascot-slot .mascot{zoom:.75}
 body>.mood .mood-text span:not(.kicker),body>.mood .quickroast,body>.mood .mood-roast,body>.mood .mood-min{display:none}
 body>.mood .mood-text strong{font-size:16px;line-height:20px}
 body>.mood .btn{grid-column:auto;height:40px;padding:0 14px}
 body.detail-on>.mood,body.passport-on>.mood{display:none}
 .sp-name{font-size:24px;line-height:28px}
 .sp-roast i{width:26px}
 .sp-roast span{width:100%;margin:2px 0 0}
}

/* ---------- weekly picks: Roaster of the week (per city) + Bean of the week (nationwide, ships) ---------- */
.sp-inner{display:grid;gap:10px}
.sp-wk{font-size:11px;font-weight:800;opacity:.75}
.sp-k2{background:var(--mustard,#f5c518)}
.sp-ships{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:2px dashed #2f6fb5;border-radius:6px;background:#fff;color:#2f6fb5;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg)}
/* the airmail envelope: red and blue stripes say "this comes from far away" */
.sp-card.airmail{padding:10px;background:repeating-linear-gradient(-45deg,#c53030 0 14px,#fff4e2 14px 22px,#2f6fb5 22px 36px,#fff4e2 36px 44px)}
.airmail .sp-inner{padding:14px 14px 14px;border:2px solid var(--espresso,#3b1e08);border-radius:16px;background:#fff4e2}
.airmail .sp-art{top:-34px;right:4px}
.sp-psst{position:relative;justify-self:start;max-width:calc(100% - 96px);padding:7px 12px;border:2px solid var(--espresso,#3b1e08);border-radius:14px;background:#fff;font-size:14px;line-height:18px;font-weight:800;font-style:italic}
.sp-psst::after{content:"";position:absolute;right:-9px;top:10px;width:12px;height:12px;background:#fff;border-top:2px solid var(--espresso,#3b1e08);border-right:2px solid var(--espresso,#3b1e08);transform:rotate(45deg)}
.sp-from{font-size:14px;line-height:20px}
.sp-from b{font-weight:900;color:var(--accent,#c53030)}
.sp-pin{margin-right:4px}
.sp-bonus{justify-self:start;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.65);font-size:12px;font-weight:700}
.sp-bonus b{font-weight:900}