/* Pippa 3's components on city.css's tokens (--cream, --teal-ink, --gold, --brown, --head, --body): the map labels,
   the first-visit hints, the shop card's actions, the walking hud by state (body[data-doing], core/walk.js doing()) */

/* tap targets ≥ 44 px (the top bar's round chips, the search button, the sheets' ×) */
.hud .chip, .find .go, .sheet .x { min-width: 44px; min-height: 44px; }
.sheet .x { display: grid; place-items: center; top: 2px; left: 4px; }

/* «وين أنا؟»: names over the map (ui/districts.js) */
.maplabels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.maplabel { position: absolute; left: 0; top: 0; padding: 3px 11px 4px; border-radius: 999px; white-space: nowrap;
  font: 700 13px/1.3 var(--head); color: var(--teal-ink); background: rgba(255, 252, 244, .9); box-shadow: 0 0 0 1.5px rgba(58, 46, 31, .55), 0 3px 8px rgba(0, 0, 0, .15);
  opacity: 0; transition: opacity .25s; will-change: transform; }
.maplabel.district { font: 600 12px/1.3 var(--body); color: var(--brown); background: rgba(245, 240, 230, .78); }
.maplabel.on { opacity: 1; }
body.night .maplabel { background: rgba(22, 33, 42, .82); color: #CFEFEF; box-shadow: 0 0 0 1.5px rgba(207, 239, 239, .35); }
body.night .maplabel.district { color: #E8DCC4; }

/* first visit (ui/onboard.js): one short bubble at a time, gone by itself */
.onboard { position: fixed; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); left: 50%; transform: translateX(-50%); z-index: 4;
  max-width: min(88vw, 360px); margin: 0; padding: 9px 16px; border-radius: 18px; background: rgba(255, 250, 240, .95); color: var(--brown);
  font: 600 14px/1.45 var(--head); text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; }
.onboard.pop { animation: bub .25s ease-out; }
@keyframes bub { from { transform: translate(-50%, 10px); opacity: 0; } }
.menubtn.glow { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 8px rgba(242, 185, 52, .95)); transform: scale(1.08); } }
.walktip { position: fixed; top: 34%; left: 50%; transform: translateX(-50%); max-width: min(86vw, 340px); margin: 0; padding: 8px 14px;
  border-radius: 16px; background: rgba(255, 250, 240, .93); color: var(--brown); font: 600 13px/1.5 var(--head); text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; }

/* ☰ (ui/menu.js): one button on the bar, the rest in a sheet of big labelled tiles */
.menubtn { flex: none; margin-top: 4px; margin-inline-start: auto; font-size: 20px; padding: 8px 13px; }
.menusheet { z-index: 6; max-height: 78vh; overflow: auto; }
.menusheet .menuinfo { margin: 4px 30px 10px; font: 500 13px/1.5 var(--head); color: var(--teal-ink); }
.menusheet .menuinfo:empty { display: none; }
.menusheet .menutop .find { max-width: none; margin: 0 0 12px; }
.menugrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menugrid .menuitem { margin: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 6px; font-size: 14px; white-space: normal; text-align: center; position: relative; inset: auto; transform: none; }
.menugrid .menuitem[data-cap]::after { content: attr(data-cap); font: 600 11px/1.2 var(--body); color: var(--brown); }
.menugrid .menuitem[data-cap] { font-size: 20px; }
.menugrid .wxchip { font-size: 12px; }
.walkhud .menubtn { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; margin: 0; }
.cta.gone { display: none; }

/* the small title: only the name on the bar; counts and the next adhan are read in the menu */
.plate { padding: 6px 14px 7px; }
.plate h1 { font-size: 17px; }
.plate .count, .plate .livecount, .plate .adhan { display: none; }
.hud { align-items: center; flex-wrap: nowrap; }

/* the shop card: who and what at a glance, then the actions in one row */
.card .cardacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.card .cardacts .chip, .card .cardacts .gold { min-height: 44px; }
.card .cardacts .gold { padding: 10px 18px; }
.card .mine { margin: 0 0 10px; font: 600 13px/1.4 var(--head); color: var(--teal-ink); }
.card .said { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* the walking hud shows only what fits what the visitor is doing */
body[data-doing="room"] .walktravel, body[data-doing="room"] .minimap, body[data-doing="room"] .walkboards,
body[data-doing="ride"] .walktravel, body[data-doing="deck"] .walktravel, body[data-doing="fading"] .walkact { display: none !important; }

/* phones: a smaller map in the walk, a smaller one-off call to comment */
@media (max-width: 760px) {
  .minimap { width: 84px; height: 84px; }
  .cta { width: auto; max-width: 88vw; padding: 9px 16px; font-size: 13px; }
}
@media (pointer: coarse) { .walkhint { display: none; } }   /* the first walk's tip says it once; no lasting line */
@media (prefers-reduced-motion: reduce) {
  .menubtn.glow, .onboard.pop, .sheet { animation: none; }
  .maplabel { transition: none; }
}
/* ❤️ on the shop card (net/likes.js): a pop and a heart floating up */
.card .cardacts .likebtn { position: relative; min-width: 64px; font-variant-numeric: tabular-nums; }
.card .cardacts .likebtn[aria-pressed="true"] { background: #FBE3E3; border-color: #E9A3A3; }
.likebtn.pop { animation: likepop .45s ease-out; }
@keyframes likepop { 40% { transform: scale(1.18); } }
.likefly { position: absolute; left: 50%; top: 0; pointer-events: none; animation: likefly .9s ease-out forwards; }
@keyframes likefly { from { transform: translate(-50%, 0) scale(.8); opacity: 1; } to { transform: translate(-50%, -46px) scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .likebtn.pop, .likefly { animation: none; } .likefly { display: none; } }