/* PawsMeeet redesign (2026-10). Loaded after styles.css: retunes the shared tokens so older screens and
   sheets match, then styles the new pm- screens. The app is a phone app; on wide screens it is centred. */
:root {
  --cream: #f3eee4;
  --paper: #fffdf8;
  --ink: #191a17;
  --muted: #7d7f77;
  --sage: #2e5641;
  --sage-dark: #1e3a2c;
  --sage-pale: #eef3e6;
  --clay: #e2673e;
  --clay-pale: #fde8de;
  --line: #e2dacb;
  --radius: 18px;
  --pm-ball: #d5ec4e;
  --pm-ball-ink: #38420c;
  --pm-live: #79a815;
  --pm-ink-2: #474a44;
  --pm-paper-2: #ebe4d6;
  --pm-ease: cubic-bezier(.2, .8, .2, 1);
  --pm-w: min(100vw, 480px);
}
html, body { background: var(--cream); }
@media (min-width: 520px) { html { background: #e4ddcf; } body { max-width: 480px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(25, 26, 23, .06), 0 30px 80px rgba(40, 30, 10, .12); min-height: 100vh; } }
.pm-i { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bottom-nav { display: none !important; }

/* buttons, chips, shared */
.pm-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 18px; border: 0; border-radius: 17px; font: 650 16px var(--font-body); cursor: pointer; transition: transform .15s, filter .2s; }
.pm-btn:active { transform: scale(.98); }
.pm-primary { background: var(--sage-dark); color: #fff; }
.pm-ball { background: var(--pm-ball); color: var(--pm-ball-ink); }
.pm-ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.pm-square { width: 54px; padding: 0; flex: none; }
.pm-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(56, 66, 12, .25); }
.pm-small { height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font: 650 13.5px var(--font-body); color: var(--ink); cursor: pointer; white-space: nowrap; }
.pm-small.pm-ball { border-color: transparent; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: var(--paper); color: var(--pm-ink-2); font: 600 13.5px var(--font-body); white-space: nowrap; cursor: pointer; }
.pm-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pm-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px; scrollbar-width: none; }
.pm-chips::-webkit-scrollbar { display: none; }
.pm-iconbtn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 20px; cursor: pointer; }
.pm-iconbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pm-iconbtn b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--clay); color: #fff; font-size: 10.5px; line-height: 18px; text-align: center; }
.pm-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pm-live); }
.pm-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #9cc72a; animation: pm-ping 1.8s infinite; }
@keyframes pm-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pm-live { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--pm-ball-ink); }
.pm-timebar { display: block; height: 4px; border-radius: 2px; background: rgba(56, 66, 12, .14); overflow: hidden; }
.pm-timebar i { display: block; height: 100%; border-radius: 2px; background: var(--pm-live); }
.pm-empty { display: grid; justify-items: center; gap: 8px; padding: 46px 30px; text-align: center; color: var(--muted); }
.pm-empty span { font-size: 34px; }
.pm-empty strong { color: var(--ink); font-size: 17px; }
.pm-empty p { margin: 0 0 8px; line-height: 1.5; }
.pm-page { padding: calc(env(safe-area-inset-top) + 18px) 0 120px !important; }
.pm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 20px 4px; }
.pm-title { margin: 0; font: 600 36px/1 var(--font-display); letter-spacing: -.025em; font-variation-settings: "SOFT" 30; }
.pm-section { display: flex; align-items: baseline; justify-content: space-between; padding: 24px 20px 10px; }
.pm-section h3 { margin: 0; font: 600 21px var(--font-display); }
.pm-section button { border: 0; background: none; color: var(--sage); font: 650 13.5px var(--font-body); cursor: pointer; }

/* tab bar */
.pm-tabs { position: fixed; z-index: 70; bottom: 0; left: 0; right: 0; margin: 0 auto; width: var(--pm-w); display: grid; grid-template-columns: repeat(5, 1fr); padding: 9px 6px calc(env(safe-area-inset-bottom) + 10px); background: rgba(252, 249, 242, .92); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-top: 1px solid rgba(25, 26, 23, .08); }
.pm-tabs button { position: relative; display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: #9a9b93; font: 600 10.5px var(--font-body); cursor: pointer; }
.pm-tabs button.on { color: var(--sage-dark); }
.pm-tabs button.on .pm-i { stroke-width: 2.3; }
.pm-tabs b { position: absolute; top: -4px; left: 50%; margin-left: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--clay); color: #fff; font-size: 10.5px; line-height: 18px; border: 2px solid #fcf9f2; }
.pm-tabs b.soft { background: var(--sage); }
body.in-conversation .pm-tabs { display: none; }

/* ---------- Nearby ---------- */
.pm-nearby { position: fixed; inset: 0; margin: 0 auto; width: var(--pm-w); animation: none !important; transform: none !important; padding: 0 !important; overflow: hidden; }
.pm-map { position: absolute; inset: 0 0 300px; z-index: 0; background: #ece6d7; }
.pm-maptop { position: absolute; z-index: 10; top: calc(env(safe-area-inset-top) + 12px); left: 14px; right: 14px; display: grid; gap: 9px; pointer-events: none; }
.pm-maptop > * { pointer-events: auto; }
.pm-searchrow { display: flex; gap: 8px; }
.pm-search { flex: 1; min-width: 0; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 0; border-radius: 17px; background: var(--paper); box-shadow: 0 6px 22px rgba(40, 35, 15, .14); color: var(--muted); font: 500 15px var(--font-body); cursor: pointer; text-align: left; }
.pm-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-searchrow .pm-iconbtn { width: 50px; height: 50px; border: 0; border-radius: 17px; box-shadow: 0 6px 22px rgba(40, 35, 15, .14); }
.pm-avatar-btn { width: 50px; height: 50px; padding: 3px; border: 0; border-radius: 17px; background: var(--paper); box-shadow: 0 6px 22px rgba(40, 35, 15, .14); cursor: pointer; }
.pm-avatar-btn img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; display: block; }
.pm-login { height: 50px; padding: 0 16px; border: 0; border-radius: 17px; background: var(--sage-dark); color: #fff; font: 650 14px var(--font-body); box-shadow: 0 6px 22px rgba(40, 35, 15, .14); cursor: pointer; }
.pm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 14px; background: rgba(252, 249, 242, .93); backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(40, 35, 15, .1); }
.pm-seg button { height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 11px; background: none; color: var(--pm-ink-2); font: 600 14px var(--font-body); cursor: pointer; }
.pm-seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.pm-seg i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pm-ball); color: var(--pm-ball-ink); font-size: 11px; font-weight: 800; line-height: 20px; }
.pm-locate { position: absolute; z-index: 9; right: 14px; bottom: 360px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 15px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 18px rgba(40, 35, 15, .16); cursor: pointer; }
.pm-sheet { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; max-height: 58vh; padding: 10px 0 calc(env(safe-area-inset-bottom) + 92px); border-radius: 28px 28px 0 0; background: var(--cream); box-shadow: 0 -12px 30px rgba(40, 35, 15, .13); overflow-y: auto; scrollbar-width: none; }
.pm-grab { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #cfc6b5; }
.pm-sheet-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 4px; }
.pm-sheet-head h2 { margin: 0; font: 600 24px var(--font-display); letter-spacing: -.015em; }
.pm-sheet-head span { font-size: 13px; color: var(--muted); }
.pm-dog-row { display: flex; gap: 12px; overflow-x: auto; padding: 10px 20px 14px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pm-dog-row::-webkit-scrollbar { display: none; }
.pm-dog-card { flex: none; width: 158px; scroll-snap-align: start; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); text-align: left; cursor: pointer; }
.pm-dog-ph { position: relative; display: block; height: 100px; }
.pm-dog-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-dog-ph em { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 9px; background: rgba(255, 253, 248, .94); color: var(--sage-dark); font: 800 11px var(--font-body); font-style: normal; }
.pm-dog-bd { display: grid; gap: 3px; padding: 9px 11px 11px; }
.pm-dog-bd strong { font-size: 15.5px; color: var(--ink); }
.pm-dog-bd small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-dog-bd .pm-live { overflow: hidden; white-space: nowrap; }
.pm-dog-bd .pm-timebar { margin-top: 4px; }
.pm-later-tx { font-size: 11.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-later .pm-dog-card { opacity: .82; }
.pm-empty-out { margin: 10px 20px 4px; padding: 14px 16px; border-radius: 18px; background: rgba(213, 236, 78, .3); display: grid; gap: 3px; font-size: 13px; color: var(--pm-ball-ink); }
.pm-empty-out strong { font-size: 15px; color: var(--ink); }
.pm-cta { padding: 4px 20px 0; }
.pm-outbar { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--sage-dark); color: #fff; }
.pm-outbar div { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 12.5px; opacity: .92; }
.pm-outbar strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-outbar button { height: 44px; padding: 0 16px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .15); color: #fff; font: 700 14px var(--font-body); cursor: pointer; }
.pm-place-list { display: grid; gap: 8px; padding: 10px 20px 12px; }
.pm-place-row, .pm-place-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 17px; background: var(--paper); text-align: left; cursor: pointer; color: var(--ink); }
.pm-place-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: #dbe8c6; font-size: 19px; }
.pm-place-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pm-place-tx strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-place-tx small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* modal sheets (going out, invite) */
.pm-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15, 18, 12, .4); animation: pm-fade .3s; }
.pm-modal { position: fixed; z-index: 91; bottom: 0; left: 0; right: 0; margin: 0 auto; width: var(--pm-w); max-height: 92vh; overflow-y: auto; padding: 10px 20px calc(env(safe-area-inset-bottom) + 24px); border-radius: 30px 30px 0 0; background: var(--cream); animation: pm-up .45s var(--pm-ease); }
@keyframes pm-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pm-fade { from { opacity: 0; } }
.pm-modal h2 { margin: 0; font: 600 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.pm-label { margin: 18px 0 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pm-pick { display: grid; gap: 8px; }
.pm-place-opt.on { border-color: var(--sage-dark); background: #f6f9ef; }
.pm-busy { flex: none; padding: 3px 7px; border-radius: 7px; background: rgba(213, 236, 78, .45); color: var(--pm-ball-ink); font-size: 11.5px; font-weight: 700; }
.pm-radio { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #cfc6b5; }
.on > .pm-radio { border-color: var(--sage-dark); }
.on > .pm-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sage-dark); }
.pm-durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pm-durs button { height: 48px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); font: 650 15px var(--font-body); color: var(--ink); cursor: pointer; }
.pm-durs button.on { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.pm-privacy { margin: 14px 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pm-invite-head { display: flex; align-items: center; gap: 12px; }
.pm-invite-head img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.pm-days, .pm-slots, .pm-loc { display: grid; gap: 8px; }
.pm-days { grid-template-columns: repeat(5, 1fr); }
.pm-slots { grid-template-columns: repeat(3, 1fr); }
.pm-days label, .pm-slots label, .pm-loc label { position: relative; cursor: pointer; }
.pm-days input, .pm-slots input, .pm-loc input { position: absolute; opacity: 0; pointer-events: none; }
.pm-days span { height: 64px; display: grid; place-content: center; justify-items: center; gap: 1px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--paper); }
.pm-days small { font-size: 11px; font-weight: 700; color: var(--muted); }
.pm-days strong { font: 600 21px var(--font-display); }
.pm-days input:checked + span { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.pm-days input:checked + span small { color: rgba(255, 255, 255, .7); }
.pm-slots span { height: 46px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 13px; background: var(--paper); font-weight: 650; font-size: 14px; }
.pm-slots label.usual::after { content: "usual"; position: absolute; top: -8px; right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--pm-ball); color: var(--pm-ball-ink); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.pm-slots input:checked + span, .pm-loc input:checked + span { border-color: var(--sage-dark); background: #f6f9ef; color: var(--sage-dark); }
.pm-loc span { display: block; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); font-weight: 600; font-size: 14.5px; }
.pm-note { width: 100%; height: 50px; margin: 14px 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font: 15px var(--font-body); color: var(--ink); }
.pm-days input:focus-visible + span, .pm-slots input:focus-visible + span, .pm-loc input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }

/* ---------- Dog profile ---------- */
.pm-profile { animation: none !important; transform: none !important; position: relative; padding: 0 0 130px !important; min-height: 100vh; }
.pm-hero { position: relative; height: 56vh; max-height: 470px; min-height: 340px; background: var(--pm-paper-2); }
.pm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 26%, transparent 72%, rgba(0, 0, 0, .18)); }
.pm-hero-empty { height: 100%; display: grid; place-items: center; font-size: 60px; }
.pm-round { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 14px); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 253, 248, .92); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; }
.pm-back { left: 16px; }
.pm-share { right: 16px; }
.pm-pbody { position: relative; z-index: 3; margin-top: -36px; padding: 24px 0 0; border-radius: 28px 28px 0 0; background: var(--cream); }
.pm-pname { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 20px; }
.pm-pname h1 { margin: 0; font: 600 46px/.95 var(--font-display); letter-spacing: -.03em; font-variation-settings: "SOFT" 40; overflow-wrap: anywhere; }
.pm-pmeta { margin: 8px 0 0; padding: 0 20px; color: var(--pm-ink-2); font-size: 15px; line-height: 1.4; }
.pm-ring { position: relative; width: 66px; height: 66px; flex: none; }
.pm-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); }
.pm-ring circle { fill: none; stroke-width: 6; }
.pm-ring .track { stroke: var(--line); }
.pm-ring .fill { stroke: var(--pm-live); stroke-linecap: round; }
.pm-ring span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; font: 700 19px var(--font-display); }
.pm-ring small { margin-top: 2px; font: 700 9px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pm-livecard { margin: 18px 20px 0; padding: 13px 14px; border-radius: 18px; background: rgba(213, 236, 78, .38); display: grid; gap: 9px; }
.pm-livecard > div, .pm-usual { display: flex; align-items: center; gap: 10px; }
.pm-livecard p, .pm-usual p { flex: 1; margin: 0; display: grid; gap: 1px; font-size: 12.5px; color: var(--pm-ball-ink); }
.pm-livecard strong, .pm-usual strong { font-size: 15px; color: var(--ink); }
.pm-livecard button { height: 36px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--paper); color: var(--sage-dark); font: 700 13.5px var(--font-body); cursor: pointer; }
.pm-usual { margin: 18px 20px 0; padding: 13px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-usual > span { font-size: 20px; }
.pm-usual p { color: var(--muted); }
.pm-why { margin: 14px 20px 0; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 9px; }
.pm-why h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pm-why p { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.4; }
.pm-why i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--cream); font-style: normal; font-size: 14px; }
.pm-traits { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 0; }
.pm-about { margin: 14px 0 0; padding: 0 20px; font-size: 15px; line-height: 1.55; color: var(--pm-ink-2); }
.pm-muted { font-size: 13.5px; color: var(--muted); }
.pm-mutual { margin: 16px 20px 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--pm-ink-2); }
.pm-stack { display: flex; }
.pm-stack img { width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--cream); object-fit: cover; }
.pm-stack img:first-child { margin-left: 0; }
.pm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 16px 20px 0; }
.pm-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.pm-owner { margin: 16px 20px 0; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-owner p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--pm-ink-2); }
.pm-low { display: flex; gap: 18px; padding: 18px 20px 0; }
.pm-low button { border: 0; background: none; color: var(--muted); font: 600 13px var(--font-body); text-decoration: underline; cursor: pointer; }
.pm-pact { position: fixed; z-index: 75; bottom: 0; left: 0; right: 0; margin: 0 auto; width: var(--pm-w); display: flex; gap: 10px; padding: 16px 20px calc(env(safe-area-inset-bottom) + 18px); background: linear-gradient(180deg, rgba(243, 238, 228, 0), var(--cream) 32%); }
body:has(.pm-profile) .pm-tabs { display: none; }

/* ---------- Inbox ---------- */
.pm-needs { margin: 16px 20px 6px; padding: 15px; border-radius: 22px; background: var(--sage-dark); color: #fff; display: grid; gap: 13px; }
.pm-needs header { display: flex; justify-content: space-between; align-items: center; }
.pm-needs header strong { font-size: 15px; }
.pm-needs header span { font-size: 12.5px; opacity: .7; }
.pm-req { display: flex; align-items: center; gap: 11px; }
.pm-req img { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .2); }
.pm-req div { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 12.5px; opacity: .85; }
.pm-req div strong { opacity: 1; font-size: 14.5px; }
.pm-req strong, .pm-req span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-no { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; cursor: pointer; }
.pm-yes { height: 34px; flex: none; padding: 0 14px; border: 0; border-radius: 17px; background: var(--pm-ball); color: var(--pm-ball-ink); font: 800 13px var(--font-body); cursor: pointer; }
.pm-activity { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); margin: 10px 20px 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-align: left; cursor: pointer; color: var(--ink); }
.pm-activity > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--clay-pale); color: var(--clay); font-size: 18px; }
.pm-activity div { flex: 1; display: grid; gap: 1px; }
.pm-activity small { color: var(--muted); font-size: 12.5px; }
.pm-inbox .pm-chips { padding-top: 14px; padding-bottom: 6px; }
.pm-threads { padding: 4px 0; }
.pm-thread { display: flex; gap: 13px; align-items: center; width: 100%; padding: 11px 20px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.pm-thread-av, .pm-thread-ic, .pm-gstack { width: 54px; height: 54px; flex: none; margin-bottom: 11px; border-radius: 50%; object-fit: cover; }
.pm-thread-ic { display: grid; place-items: center; background: #fde3d6; font-size: 24px; }
.pm-gstack { position: relative; }
.pm-gstack img { position: absolute; width: 37px; height: 37px; border-radius: 50%; border: 2.5px solid var(--cream); object-fit: cover; }
.pm-gstack img:first-child { top: 0; left: 0; }
.pm-gstack img:last-child { right: 0; bottom: 0; }
.pm-thread-bd { flex: 1; min-width: 0; display: grid; gap: 3px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.pm-thread:last-child .pm-thread-bd { border-bottom: 0; }
.pm-thread-top { display: flex; justify-content: space-between; gap: 8px; }
.pm-thread-top strong { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-thread-top time { flex: none; font-size: 12.5px; color: var(--muted); }
.pm-thread-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-thread-mid p { margin: 0; font-size: 14px; color: var(--pm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-thread-mid b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--clay); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center; }
.pm-tag { justify-self: start; display: inline-flex; align-items: center; max-width: 100%; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-tag.play { background: rgba(213, 236, 78, .5); color: var(--pm-ball-ink); }
.pm-tag.group { background: #e8e2f4; color: #4a3c74; }
.pm-tag.event { background: #fde3d6; color: #8b3a1b; }
.pm-activity-list { padding: 0 8px; }

/* ---------- Moments ---------- */
.pm-stories { display: flex; gap: 14px; overflow-x: auto; padding: 6px 20px 12px; scrollbar-width: none; }
.pm-stories::-webkit-scrollbar { display: none; }
.pm-story { flex: none; width: 66px; display: grid; justify-items: center; gap: 5px; border: 0; background: none; font: 600 11.5px var(--font-body); color: var(--pm-ink-2); cursor: pointer; }
.pm-story > span:last-child { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-story-ring { width: 64px; height: 64px; padding: 3px; border-radius: 50%; background: conic-gradient(var(--pm-ball), #8fbf1f, var(--pm-ball)); }
.pm-story-ring img { width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid var(--cream); object-fit: cover; display: block; }
.pm-story.add .pm-story-ring { display: grid; place-items: center; background: none; border: 2px dashed #c9c0ae; font-size: 24px; color: var(--muted); }

/* ---------- Me ---------- */
.pm-passport { position: relative; margin: 14px 20px 0; overflow: hidden; border-radius: 26px; background: var(--sage-dark); color: #fff; cursor: pointer; }
.pm-passport::after { content: ""; position: absolute; top: -30px; right: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(213, 236, 78, .18), transparent 70%); }
.pm-passport-top { display: flex; align-items: center; gap: 14px; padding: 16px; }
.pm-passport-top img { width: 78px; height: 78px; flex: none; border-radius: 22px; object-fit: cover; border: 3px solid rgba(255, 255, 255, .2); }
.pm-passport h2 { margin: 0; font: 600 30px/1 var(--font-display); color: #fff; }
.pm-passport small { font-size: 13px; opacity: .78; }
.pm-passport-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .12); }
.pm-passport-stats > * { display: grid; gap: 1px; padding: 12px 14px; border: 0; background: none; color: #fff; text-align: left; font: inherit; }
.pm-passport-stats > * + * { border-left: 1px solid rgba(255, 255, 255, .12); }
.pm-passport-stats b { font: 600 22px var(--font-display); }
.pm-passport-stats span { font-size: 11.5px; opacity: .75; }
.pm-passport-stats button { cursor: pointer; }
.pm-status { display: flex; align-items: center; gap: 12px; margin: 14px 20px 0; padding: 14px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.pm-status.on { background: rgba(213, 236, 78, .35); border-color: transparent; }
.pm-status div { flex: 1; display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.pm-status strong { font-size: 15px; color: var(--ink); }
.pm-list { margin: 0 20px 14px; overflow: hidden; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.pm-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.pm-li:first-child { border-top: 0; }
.pm-li-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--cream); font-size: 17px; }
.pm-li div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pm-li strong { font-size: 14.5px; }
.pm-li small { font-size: 12.5px; color: var(--muted); }
.pm-li .pm-i { color: #b4ae9f; }
.pm-due { flex: none; padding: 3px 8px; border-radius: 7px; background: var(--clay-pale); color: #8b3a1b; font-size: 12px; font-weight: 800; }
.pm-due.ok { background: rgba(213, 236, 78, .45); color: var(--pm-ball-ink); }
.pm-due.late { background: var(--clay); color: #fff; }

/* older screens and sheets on the new tokens */
.sheet { border-radius: 28px 28px 0 0 !important; background: var(--cream) !important; }
.view:not(.pm-nearby):not(.pm-profile) { padding-bottom: 120px; }

/* toasts drop in from the top, clear of the tab bar and the walk status */
.toast { z-index: 120; top: calc(env(safe-area-inset-top) + 12px); bottom: auto; max-width: min(calc(100vw - 32px), 440px); padding: 13px 16px; border-radius: 16px; background: var(--sage-dark); font-weight: 600; transform: translate(-50%, -140%); transition: transform .4s var(--pm-ease), opacity .3s; }
.toast.show { transform: translate(-50%, 0); }
.pm-tag.wait { background: var(--pm-paper-2); color: var(--pm-ink-2); }
.pm-slots input:disabled + span { color: #c2bcae; text-decoration: line-through; background: transparent; }
.pm-slots label:has(input:disabled)::after { display: none; }

/* chats */
.pm-pinned { margin: 6px 0 12px; overflow: hidden; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-pinned-top { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.pm-pinned-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(213, 236, 78, .45); font-size: 19px; }
.pm-pinned-top div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pm-pinned-top strong { font-size: 15px; }
.pm-pinned-top small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-pinned-acts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pm-pinned-acts > * { height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--sage-dark); font: 700 13px var(--font-body); text-decoration: none; cursor: pointer; }
.pm-pinned-acts > * + * { border-left: 1px solid var(--line); }
.pm-quick { display: flex; gap: 7px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.pm-quick::-webkit-scrollbar { display: none; }
.pm-quick button { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--pm-ink-2); font: 600 13px var(--font-body); cursor: pointer; }
.conversation-page .pm-quick { padding: 8px 14px 0; }
.bubble { border-radius: 19px !important; }
.bubble.mine { background: var(--sage-dark) !important; color: #fff !important; }
.conversation-page .message-log { align-content: start; }
.bubble { max-width: 78%; padding: 10px 13px !important; line-height: 1.38; font-size: 15px; }
.bubble:not(.mine) { justify-self: start; background: var(--paper) !important; border: 1px solid var(--line); border-bottom-left-radius: 6px !important; }
.bubble.mine { justify-self: end; border-bottom-right-radius: 6px !important; }

/* places and events in the Nearby sheet */
.pm-place-chips { padding-top: 8px; padding-bottom: 2px; }
.pm-busy { flex: none; }
.pm-add-row { width: 100%; height: 50px; border: 1.5px dashed #cfc6b5; border-radius: 17px; background: transparent; color: var(--sage-dark); font: 700 14.5px var(--font-body); cursor: pointer; }
.pm-event-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); text-align: left; color: var(--ink); cursor: pointer; }
.pm-event-date { width: 50px; height: 56px; flex: none; display: grid; place-content: center; justify-items: center; border-radius: 14px; background: #fde3d6; color: #8b3a1b; }
.pm-event-date small { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; }
.pm-event-date strong { font: 600 22px/1 var(--font-display); color: var(--ink); }
.pm-event-row .pm-place-tx strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.pm-event-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pm-going { font-size: 12px; font-weight: 700; color: var(--pm-ball-ink); }
.leaflet-park-marker.vet span { background: #c0473f; }
.leaflet-park-marker.restaurant span { background: #b5642d; }
.google-place-marker.vet { background: #c0473f; }
.google-place-marker.restaurant { background: #b5642d; }

/* "Somewhere else" search fields */
.pm-custom { cursor: text; }
.pm-custom input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font: 600 15px var(--font-body); color: var(--ink); outline: none; }
.pm-custom input::placeholder, .pm-loc-custom input::placeholder { color: var(--muted); font-weight: 500; }
.pm-loc-custom span { padding: 0 !important; }
.pm-loc-custom input[data-pm-search] { position: static; opacity: 1; pointer-events: auto; width: 100%; height: 48px; padding: 0 14px; border: 0; background: none; font: 600 14.5px var(--font-body); color: var(--ink); outline: none; }
.pac-container { z-index: 200 !important; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(40, 35, 15, .18); font-family: var(--font-body); }

/* breed picker */
.pm-breed { display: grid; gap: 8px; }
.pm-breed-other { width: 100%; }

/* ===== Round 3: everything from the approved design ===== */
.pm-sub { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pm-pad { padding: 14px 20px 0; }
.pm-head-acts { display: flex; gap: 8px; }
.pm-fine { margin: 22px 20px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pm-round.on { color: var(--clay); }
.pm-outline { border: 1px solid var(--line); background: var(--paper); }

/* map: the design's warm, quiet palette on any base map */
.pm-segrow { display: flex; gap: 8px; align-items: stretch; }
.pm-segrow .pm-seg { flex: 1; }
.pm-weather { display: flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 14px; background: rgba(252, 249, 242, .93); box-shadow: 0 4px 16px rgba(40, 35, 15, .1); font-size: 13.5px; font-weight: 700; white-space: nowrap; }

/* going out */
.pm-durs { grid-template-columns: repeat(4, 1fr); }
.pm-until { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 650; font-size: 14px; }
.pm-until[hidden] { display: none; }
.pm-until input { flex: 1; height: 46px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); font: 600 15px var(--font-body); }
.pm-seg-flat { background: rgba(25, 26, 23, .06); box-shadow: none; }
.pm-seg-flat button { border: 0; border-radius: 11px; background: none; height: 38px; font: 600 14px var(--font-body); color: var(--pm-ink-2); cursor: pointer; }
.pm-seg-flat button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* invite: place tiles and the "usual" tag */
.pm-slots label.usual::after { content: attr(data-usual); text-transform: none; letter-spacing: 0; }
.pm-loc-tile span { display: flex !important; align-items: center; gap: 12px; padding: 10px 12px !important; }
.pm-loc-tile i { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; font-style: normal; font-size: 19px; }
.pm-loc-tile b { flex: 1; min-width: 0; display: grid; gap: 1px; font-weight: normal; }
.pm-loc-tile strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.pm-loc-tile small { font-size: 12.5px; color: var(--muted); }
.pm-loc input:checked + span .pm-radio { border-color: var(--sage-dark); }
.pm-loc input:checked + span .pm-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sage-dark); }

/* inbox */

/* me */
.pm-pawmark { position: absolute; right: -16px; top: -14px; width: 120px; height: 120px; fill: #fff; opacity: .08; }
.pm-week { margin: 14px 20px 0; padding: 14px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.pm-week header { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); font-weight: 600; }
.pm-week header strong { color: var(--ink); font-size: 15px; }
.pm-weekbars { margin-top: 12px; height: 86px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.pm-weekbars div { display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.pm-weekbars i { width: 100%; border-radius: 7px; background: #cfe1b8; }
.pm-weekbars i.today { background: var(--pm-live); }

/* compare home */
.pm-flat { width: 100%; box-shadow: none; border: 1px solid var(--line); }
.pm-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 20px 0; font-size: 12.5px; color: var(--muted); }
.pm-store { height: 26px; display: inline-grid; place-items: center; padding: 0 9px; border-radius: 8px; color: #fff; font-size: 11.5px; font-weight: 800; }
.pm-remind { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); margin: 16px 20px 0; padding: 13px 14px; border: 0; border-radius: 18px; background: #fde3d6; text-align: left; color: var(--ink); cursor: pointer; }
.pm-remind.pm-dropped { background: rgba(213, 236, 78, .4); }
.pm-remind-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #fff; font-size: 19px; }
.pm-remind div { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 12.5px; color: #8b3a1b; }
.pm-remind.pm-dropped div { color: var(--pm-ball-ink); }
.pm-remind strong { font-size: 14.5px; color: var(--ink); }
.pm-remind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 18px 20px 0; }
.pm-cats button { display: grid; justify-items: center; gap: 6px; border: 0; background: none; font: 600 12px var(--font-body); color: var(--pm-ink-2); cursor: pointer; }
.pm-cats span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: var(--paper); border: 1px solid var(--line); font-size: 25px; }
.pm-deal { display: grid; grid-template-columns: 92px 1fr; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); text-align: left; color: var(--ink); cursor: pointer; }
.pm-deal-img img, .pm-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pm-deal-img { width: 92px; height: 112px; padding: 4px; border-radius: 12px; background: #fff; }
.pm-deal-bd { display: grid; align-content: start; min-width: 0; }
.pm-deal-bd strong { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-bars { display: grid; gap: 6px; margin-top: 9px; }
.pm-bar { display: grid; grid-template-columns: 74px 1fr 58px; gap: 8px; align-items: center; font-size: 12px; color: var(--pm-ink-2); }
.pm-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-bar i { height: 8px; border-radius: 4px; background: transparent; }
.pm-bar i b { display: block; height: 100%; border-radius: 4px; background: #ddd5c4; }
.pm-bar.best { color: var(--ink); font-weight: 700; }
.pm-bar.best i b { background: var(--pm-live); }
.pm-bar em { font-style: normal; font-weight: 700; text-align: right; }
.pm-save { justify-self: start; margin-top: 10px; padding: 4px 10px; border-radius: 8px; background: var(--pm-ball); color: var(--pm-ball-ink); font-size: 12.5px; font-weight: 800; }
.pm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px 0; }
.pm-tile { display: grid; gap: 4px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-align: left; color: var(--ink); cursor: pointer; }
.pm-tile-img { height: 96px; padding: 4px; border-radius: 11px; background: #fff; }
.pm-tile strong { font-size: 12.5px; line-height: 1.25; height: 31px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pm-tile b { font: 600 17px var(--font-display); color: var(--sage-dark); }
.pm-tile small { font-size: 11.5px; color: var(--muted); }
.pm-skeleton { height: 140px; border-radius: 22px; background: linear-gradient(90deg, var(--paper), #f6f1e7, var(--paper)); background-size: 200% 100%; animation: pm-shimmer 1.2s infinite; border: 1px solid var(--line); }
.pm-skeleton.short { height: 170px; }
@keyframes pm-shimmer { to { background-position: -200% 0; } }

/* product page */
.pm-product { position: relative; padding: 0 0 120px !important; animation: none !important; }
body:has(.pm-product) .pm-tabs { display: none; }
.pm-prodimg { height: 300px; display: grid; place-items: center; background: #fff; border-bottom: 1px solid var(--line); padding: 40px 30px 20px; }
.pm-prodimg img { max-height: 240px; max-width: 100%; object-fit: contain; }
.pm-prodbody { padding: 18px 20px 0; }
.pm-prodbody h1 { margin: 0; font: 600 26px/1.12 var(--font-display); letter-spacing: -.02em; }
.pm-bigprice { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pm-bigprice b { font: 600 40px var(--font-display); color: var(--sage-dark); }
.pm-bigprice span { font-size: 13.5px; color: var(--pm-ink-2); }
.pm-pack { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.pm-offers { margin: 16px 20px 0; overflow: hidden; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.pm-offer { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 13px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pm-offer:first-child { border-top: 0; }
.pm-offer strong { font-size: 15px; }
.pm-offer .pr { font: 600 19px var(--font-display); text-align: right; }
.pm-offer .pr small { font: 600 11px var(--font-body); color: var(--muted); }
.pm-offer > small { font-size: 12px; color: var(--muted); }
.pm-offer .go { font-size: 12.5px; font-weight: 700; color: var(--sage); text-align: right; }
.pm-offer.best { background: #f5f9ea; }
.pm-offer.best .pr { color: var(--sage-dark); }
.pm-offer.range { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0, 0, 0, .02) 8px 16px); }
.pm-alert { display: flex; align-items: center; gap: 12px; margin: 14px 20px 0; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-alert-ic { font-size: 22px; }
.pm-alert div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pm-alert strong { font-size: 14.5px; }
.pm-alert small { font-size: 12.5px; color: var(--muted); }
.pm-switch { position: relative; width: 52px; height: 31px; flex: none; border: 0; border-radius: 16px; background: #d6cfbf; cursor: pointer; transition: background .2s; }
.pm-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .25s var(--pm-ease); }
.pm-switch.on { background: var(--pm-live); }
.pm-switch.on::after { transform: translateX(21px); }

/* moments: masonry feed, no floating button */
.pm-moments-head { padding: 0 0 6px !important; }
.discover-fab { display: none !important; }
.discover-view .discover-grid { display: block; columns: 2; column-gap: 10px; }
.discover-view .discover-grid > * { break-inside: avoid; margin: 0 0 10px; border-radius: 20px !important; }
.discover-view .discover-grid .discover-post > button > img, .discover-view .discover-grid .discover-post > .post-cover > img { aspect-ratio: auto; height: auto; max-height: 260px; object-fit: cover; }
.discover-view .discover-grid .discover-post:nth-child(3n + 1) > button > img, .discover-view .discover-grid .discover-post:nth-child(3n + 1) > .post-cover > img { min-height: 210px; }

/* ===== Log in / sign up ===== */
.pm-auth { position: fixed; z-index: 95; inset: 0; margin: 0 auto; width: var(--pm-w); overflow-y: auto; background: var(--cream); animation: pm-fade .25s; }
.pm-auth-hero { position: relative; height: 290px; overflow: hidden; background: var(--sage-dark); }
.pm-auth-face { position: absolute; object-fit: cover; border: 4px solid var(--cream); border-radius: 28px; box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.pm-auth-face.f0 { width: 190px; height: 230px; left: -18px; top: 52px; transform: rotate(-7deg); }
.pm-auth-face.f1 { width: 170px; height: 200px; left: 50%; margin-left: -60px; top: 22px; transform: rotate(4deg); z-index: 2; }
.pm-auth-face.f2 { width: 160px; height: 190px; right: -22px; top: 92px; transform: rotate(9deg); }
.pm-auth-shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(30, 58, 44, .35), rgba(30, 58, 44, 0) 40%, rgba(243, 238, 228, 0) 70%, var(--cream)); }
.pm-auth-hero .brand-mark { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 18px); left: 20px; color: #fff; }
.pm-auth-close { z-index: 4; top: calc(env(safe-area-inset-top) + 12px); right: 16px; font-size: 16px; }
.pm-auth-card { position: relative; z-index: 5; margin-top: -26px; padding: 0 22px calc(env(safe-area-inset-bottom) + 30px); }
.pm-auth-card h1 { margin: 0; font: 600 38px/1 var(--font-display); letter-spacing: -.025em; font-variation-settings: "SOFT" 40; }
.pm-auth-lede { margin: 10px 0 18px; font-size: 15px; line-height: 1.5; color: var(--pm-ink-2); }
.pm-auth-seg { margin-bottom: 16px; }
.pm-auth-form { display: grid; gap: 12px; }
.pm-field { display: grid; gap: 6px; }
.pm-field > span { font-size: 13px; font-weight: 700; color: var(--pm-ink-2); }
.pm-field input, .pm-field select { width: 100%; height: 52px; padding: 0 15px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--paper); font: 500 16px var(--font-body); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.pm-field input:focus, .pm-field select:focus { border-color: var(--sage); box-shadow: 0 0 0 4px rgba(46, 86, 65, .12); }
.pm-password { position: relative; }
.pm-password button { position: absolute; right: 8px; bottom: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--cream); color: var(--sage-dark); font: 700 13px var(--font-body); cursor: pointer; }
.pm-inline { grid-template-columns: 1fr 130px; align-items: center; }
.pm-inline select { height: 44px; }
.pm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--pm-ink-2); }
.pm-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--sage-dark); flex: none; }
.pm-consent button, .pm-auth-links button { border: 0; padding: 0; background: none; color: var(--sage-dark); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pm-auth-form .pm-btn { margin-top: 6px; }
.pm-auth [hidden] { display: none !important; }
.pm-auth-links { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: 13.5px; }
.pm-auth-perks { margin: 22px 0 0; padding: 14px; list-style: none; display: grid; gap: 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-auth-perks li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--pm-ink-2); }
.pm-auth-perks span { flex: none; }

/* every other form (dog profile, add a place, events, health) in the same style */
.sheet .sheet-header h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }
.form-grid { gap: 12px !important; }
.form-grid label { font-size: 13px; font-weight: 700; color: var(--pm-ink-2); }
.form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form-grid select, .form-grid textarea { min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line) !important; border-radius: 15px !important; background: var(--paper) !important; font: 500 16px var(--font-body) !important; color: var(--ink); box-shadow: none !important; }
.form-grid textarea { min-height: 96px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--sage) !important; box-shadow: 0 0 0 4px rgba(46, 86, 65, .12) !important; outline: none; }
.form-grid .button, .sheet .button { min-height: 54px; border-radius: 17px !important; background: var(--sage-dark) !important; color: #fff !important; font: 650 16px var(--font-body) !important; border: 0 !important; }
.personality-chip span { border-radius: 17px !important; }
.personality-chip input:checked + span { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.sheet .close { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
.pm-small.pm-ball { background: var(--pm-ball); color: var(--pm-ball-ink); }
.pm-consent { font-weight: 500; }
.pm-store-more { background: var(--paper); color: var(--pm-ink-2); border: 1px solid var(--line); }
.pm-thread-bd > * { min-width: 0; max-width: 100%; }
.pm-thread-top, .pm-thread-mid { min-width: 0; }
.pm-cats button { min-width: 0; padding: 0; }
.pm-cats span { width: 100%; max-width: 58px; height: auto; aspect-ratio: 1; }

/* ===== Round 5: client feedback 2026-10-25 ===== */

/* map avatars: Leaflet sets img width:auto inside the marker pane, which squashed the photo to one side */
.leaflet-container .leaflet-marker-pane .leaflet-dog-avatar img { width: 100%; height: 100%; }

/* Nearby sheet folds down to its title so the whole map shows */
.pm-grab-btn { display: block; width: 100%; height: 22px; margin: -10px 0 0; padding: 10px 0 0; border: 0; background: none; cursor: pointer; }
.pm-grab-btn .pm-grab { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: #bdb3a0; }
.pm-sheet { padding-top: 10px; will-change: transform; overscroll-behavior: contain; transition: transform .34s cubic-bezier(.22, .9, .25, 1); }
.pm-sheet > * { transition: opacity .2s; }
.pm-nearby.sheet-down .pm-sheet { transform: translateY(var(--pm-fold, 0px)); overflow: hidden; }
.pm-sheet-head { padding-top: 8px; }
.pm-nearby.sheet-down .pm-sheet > :not(.pm-grab-btn):not(.pm-sheet-head) { opacity: 0; pointer-events: none; }
.pm-nearby.sheet-down .pm-sheet-head { cursor: pointer; }
.pm-nearby .pm-locate { bottom: calc(var(--pm-sheet-h, 348px) + 12px); }

/* playdate and friend chats: a full page, like WeChat */
.conversation-page { left: 0; right: 0; width: var(--pm-w); margin: 0 auto; z-index: 80; background: var(--cream); }
.conversation-header { gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px 6px; background: var(--paper); }
.conversation-back { width: 40px; font-size: 34px; line-height: 1; }
.conversation-header h1 { font: 700 18px var(--font-display); }
.conversation-header small { color: var(--muted); }
.conversation-header .small-button { height: 34px; padding: 0 12px; border-radius: 12px; font-size: 13px; }
.pm-convo .pm-pinned { flex: 0 0 auto; margin: 10px 14px 0; }
.conversation-page .message-composer { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line); background: var(--paper); }
.conversation-page .message-composer textarea { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); font: 16px var(--font-body); }
.conversation-page .message-composer .small-button { height: 44px; padding: 0 16px; border-radius: 14px; }

/* titles: Plus Jakarta Sans (was Fraunces), a size smaller */
.pm-title { font: 800 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.pm-section h3 { font: 700 18px var(--font-display); letter-spacing: -.01em; }
.pm-sheet-head h2 { font: 800 20px var(--font-display); letter-spacing: -.015em; }
.pm-modal h2 { font: 800 21px/1.2 var(--font-display); letter-spacing: -.015em; }
.pm-days strong { font: 700 18px var(--font-display); }
.pm-pname h1 { font: 800 34px/1.05 var(--font-display); letter-spacing: -.025em; }
.pm-ring span { font: 800 17px var(--font-display); }
.pm-passport h2 { font: 800 24px/1.1 var(--font-display); }
.pm-passport-stats b { font: 800 19px var(--font-display); }
.pm-event-date strong { font: 800 19px/1 var(--font-display); }
.pm-tile b { font: 800 16px var(--font-display); }
.pm-prodbody h1 { font: 800 21px/1.25 var(--font-display); letter-spacing: -.015em; }
.pm-bigprice b { font: 800 32px var(--font-display); letter-spacing: -.02em; }
.pm-offer .pr { font: 800 17px var(--font-display); }
.pm-auth-card h1 { font: 800 30px/1.1 var(--font-display); letter-spacing: -.02em; }
.sheet .sheet-header h2 { font-weight: 800; }

/* Inbox "+" menu: add a dog friend or start a group */
.pm-plus { position: relative; }
.pm-plus summary { list-style: none; display: grid; place-items: center; cursor: pointer; font-size: 20px; }
.pm-plus summary::-webkit-details-marker { display: none; }
.pm-plus[open] summary { background: var(--ink); color: #fff; }
.pm-plus-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 248px; padding: 6px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(40, 35, 15, .18); animation: pm-fade .15s; }
.pm-plus-menu button { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px; border: 0; border-radius: 13px; background: none; text-align: left; cursor: pointer; }
.pm-plus-menu button:hover, .pm-plus-menu button:active { background: var(--cream); }
.pm-plus-menu span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--cream); font-size: 18px; }
.pm-plus-menu strong { display: block; font: 700 14.5px var(--font-body); color: var(--ink); }
.pm-plus-menu small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* QR scanner: full-screen camera with a viewfinder; a photo of the code works too */
.pm-scan-btn { margin: 4px 0 14px; }
.pm-scanner { position: fixed; z-index: 120; inset: 0; margin: 0 auto; width: var(--pm-w); overflow: hidden; background: #0f1512; animation: pm-fade .2s; }
.pm-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-scan-frame { position: absolute; top: 42%; left: 50%; width: min(68vw, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 26px; box-shadow: 0 0 0 100vmax rgba(10, 16, 12, .55); }
.pm-scan-frame::before { content: ""; position: absolute; inset: 0; border-radius: 26px; border: 3px solid var(--pm-ball); }
.pm-scan-frame i { position: absolute; left: 10%; right: 10%; top: 12%; height: 2px; border-radius: 2px; background: var(--pm-ball); box-shadow: 0 0 12px var(--pm-ball); animation: pm-scan-line 2.2s ease-in-out infinite alternate; }
@keyframes pm-scan-line { to { top: 88%; } }
.pm-scanner.no-camera .pm-scan-frame i { display: none; }
.pm-scan-close { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 14px); right: 16px; }
.pm-scan-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 16px; padding: 0 28px calc(env(safe-area-inset-bottom) + 34px); text-align: center; }
.pm-scan-foot p { margin: 0; color: #fff; font: 600 15px/1.5 var(--font-body); }
.pm-scan-photo { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 16px; background: rgba(255, 255, 255, .16); color: #fff; font: 700 14.5px var(--font-body); cursor: pointer; backdrop-filter: blur(8px); }
.pm-nearby .leaflet-bottom { bottom: calc(var(--pm-sheet-h, 348px) - 8px); }
/* the bottom bar is solid: a blur over the moving sheet costs a redraw every frame on phones */
.pm-tabs { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fcf9f2 !important; }

/* Dogs / Places / Events: a compact switch on the left, weather on the right */
.pm-segrow { justify-content: space-between; align-items: center; }
.pm-segrow .pm-seg { flex: none; padding: 2px; border-radius: 12px; }
.pm-segrow .pm-seg button { height: 30px; padding: 0 11px; gap: 5px; border-radius: 10px; font-size: 13px; }
.pm-segrow .pm-seg i { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; font-size: 10px; line-height: 17px; }
.pm-weather { height: 34px; border: 0; border-radius: 12px; color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; }

/* weather sheet: rain summary and the next 12 hours */
.pm-weather-now { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.pm-weather-now > span { font-size: 40px; line-height: 1; }
.pm-weather-now > b { font: 800 34px var(--font-display); letter-spacing: -.02em; }
.pm-weather-now strong { display: block; font: 700 15px var(--font-body); }
.pm-weather-now small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--sage-dark); font-weight: 600; }
.pm-hours { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
.pm-hours > div { flex: none; width: 54px; display: grid; justify-items: center; gap: 5px; padding: 10px 0; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.pm-hours > div.wet { background: #e3eef3; border-color: #c9dde6; }
.pm-hours small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pm-hours span { font-size: 20px; }
.pm-hours b { font: 700 14px var(--font-body); }
.pm-hours em { font-style: normal; font-size: 11px; font-weight: 700; color: #3f7c97; }
.pm-weather-sheet .pm-fine { margin: 12px 0 0; padding: 0; }

/* the map's "+" (add a place, an event, an invite) sits above the locate button and opens upwards */
.pm-mapplus { position: absolute; z-index: 9; right: 14px; bottom: calc(var(--pm-sheet-h, 348px) + 68px); }
.pm-mapplus summary { width: 46px; height: 46px; border-radius: 15px; background: var(--sage-dark); color: #fff; font-size: 24px; box-shadow: 0 6px 18px rgba(40, 35, 15, .2); }
.pm-mapplus[open] summary { background: var(--ink); }
.pm-mapplus[open] { z-index: 20; }
.pm-mapplus .pm-plus-menu { top: auto; right: calc(100% + 8px); bottom: -54px; }
/* phones pinch to zoom; the +/- buttons collided with the map buttons */
.pm-nearby .leaflet-control-zoom { display: none; }

/* iPhone zooms the whole page into any field under 16px when it is tapped: keep every field at 16px on phones */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
}

/* a redraw of the same screen (after a tap) does not replay the entry animations */
.pm-same-view .view { animation: none !important; }
.pm-same-modal .modal-layer, .pm-same-modal .modal-layer .sheet, .pm-same-modal .pm-scrim, .pm-same-modal .pm-modal, .pm-same-modal .pm-auth { animation: none !important; }

/* first-visit popup: welcome and add-to-home-screen steps */
.pm-welcome { position: fixed; z-index: 96; left: 50%; top: 50%; width: min(calc(var(--pm-w) - 32px), 380px); max-height: calc(100dvh - 48px); overflow-y: auto; transform: translate(-50%, -50%); padding: 26px 22px 20px; border-radius: 28px; background: var(--cream); box-shadow: 0 24px 60px rgba(15, 18, 12, .3); animation: pm-pop .25s ease-out; }
@keyframes pm-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.pm-welcome-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--paper); color: var(--pm-ink-2); font-size: 14px; cursor: pointer; }
.pm-welcome-icon img { width: 64px; height: 64px; border-radius: 16px; display: block; box-shadow: 0 8px 20px rgba(30, 58, 44, .25); }
.pm-welcome-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--paper); font-size: 32px; }
.pm-welcome h2 { margin: 16px 0 6px; font: 800 23px/1.15 var(--font-display); letter-spacing: -.015em; }
.pm-welcome-lede { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--pm-ink-2); }
.pm-welcome-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pm-welcome-list li { display: flex; gap: 12px; align-items: center; }
.pm-welcome-list li > span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--paper); font-size: 19px; }
.pm-welcome-list strong { display: block; font: 700 14.5px var(--font-body); }
.pm-welcome-list small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.pm-welcome-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.pm-welcome-steps li { counter-increment: step; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--paper); font-size: 14.5px; line-height: 1.4; }
.pm-welcome-steps li::before { content: counter(step); width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sage-dark); color: #fff; font: 800 13px var(--font-body); }
.pm-welcome-steps b { font-weight: 800; }
.pm-key { display: inline-grid; place-items: center; width: 26px; height: 26px; vertical-align: middle; border-radius: 8px; background: var(--cream); color: #2f6fd6; }
.pm-welcome-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.pm-welcome-foot .pm-btn { width: auto; min-width: 128px; min-height: 48px; }
.pm-welcome-dots { display: flex; gap: 6px; }
.pm-welcome-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cfc6b5; }
.pm-welcome-dots i.on { width: 20px; border-radius: 4px; background: var(--sage-dark); }
.pm-same-modal .pm-welcome { animation: none !important; }
/* map buttons slide with the sheet only when the member folds or opens it, never on a background redraw */
.pm-nearby.pm-sheet-moving .pm-locate, .pm-nearby.pm-sheet-moving .leaflet-bottom, .pm-nearby.pm-sheet-moving .pm-mapplus { transition: bottom .3s; }

/* owner dashboard */
.pm-admin .conversation-header h1 { font: 800 18px var(--font-display); }
.pm-admin-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px); }
.pm-admin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-admin-tiles > div { display: grid; gap: 2px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-admin-tiles b { font: 800 28px/1.1 var(--font-display); color: var(--sage-dark); }
.pm-admin-tiles span { font: 700 13.5px var(--font-body); }
.pm-admin-tiles small { font-size: 12px; color: var(--muted); }
.pm-admin-card { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.pm-admin-card h3 { margin: 0 0 12px; font: 800 16px var(--font-display); }
.pm-admin-bars { height: 74px; display: flex; align-items: flex-end; gap: 3px; }
.pm-admin-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--sage-dark); }
.pm-admin-bars i.zero { background: #e2dccf; }
.pm-admin-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.pm-admin-members { margin: 0; padding: 0; list-style: none; }
.pm-admin-members li { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.pm-admin-members li:first-child { border-top: 0; padding-top: 0; }
.pm-admin-who strong { font: 700 15px var(--font-body); }
.pm-admin-who em { margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: #fbe0e0; color: #9b3a32; font: 700 11px var(--font-body); font-style: normal; }
.pm-admin-who small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); word-break: break-all; }
.pm-admin-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--pm-ink-2); }
.pm-admin-dogs { font-size: 13.5px; line-height: 1.6; }
.pm-admin-dogs small { color: var(--muted); }
.pm-admin-note { margin: 16px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* chat: quick replies step aside while typing; the box grows with the text */
.conversation-page:focus-within .pm-quick { display: none; }
.conversation-page .message-composer textarea { height: 44px; line-height: 1.35; overflow-y: auto; }

/* chat photos: camera beside the box, photo bubbles, full-screen view */
.pm-chat-photo-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--cream); color: var(--sage-dark); cursor: pointer; }
.conversation-page .bubble.has-photo, .conversation-page .bubble.mine.has-photo { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.chat-photo { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.chat-photo img { display: block; width: min(62vw, 240px); min-height: 120px; max-height: 320px; object-fit: cover; border-radius: 16px; background: #e2dccf; }
.pm-photo-view { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: rgba(8, 10, 8, .92); cursor: zoom-out; animation: pm-fade .15s; }
.pm-photo-view img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }

/* post comments: every row has an avatar so they line up */
.post-page-comments { gap: 14px; }
.comment-row { align-items: flex-start; gap: 10px; }
.comment-row img, .comment-row .comment-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; }
.comment-row .comment-avatar { display: grid; place-items: center; background: var(--cream); font-size: 15px; }
.comment-row > div { min-width: 0; padding: 8px 12px; border-radius: 4px 16px 16px 16px; background: var(--cream); }
.comment-row strong { display: block; font: 700 13px var(--font-body); }
.comment-row p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pm-pact .pm-friend-btn { width: auto; flex: none; padding: 0 16px; white-space: nowrap; }

/* bottom sheets fit the visible screen (iPhone counts the area under the toolbar in vh), scroll on their own, and follow a downward drag */
.pm-modal { max-height: 92dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(env(safe-area-inset-bottom) + 32px); will-change: transform; }
.modal-layer .sheet { overscroll-behavior: contain; }

/* the member's own dog where they are (only they see it): a blue ring like the usual location dot */
/* the owner's wish: the photo fills the ring, and the ring says girl (pink) or boy (blue), out or not, own dog or not */
.google-dog-marker, .leaflet-container .leaflet-dog-avatar { padding: 0; border-width: 3px; }
.google-dog-marker.sex-female, .leaflet-container .leaflet-dog-avatar.sex-female { border-color: #ef8fae !important; }
.google-dog-marker.sex-male, .leaflet-container .leaflet-dog-avatar.sex-male { border-color: #4f93e3 !important; }
.google-dog-marker.sex-neutral, .leaflet-container .leaflet-dog-avatar.sex-neutral { border-color: #8fa69a !important; }
.google-dog-marker.me, .leaflet-container .leaflet-dog-avatar.me { box-shadow: 0 6px 14px rgba(40, 40, 30, .28); }
/* iPhone Safari sized a non-square photo by its own shape inside the grid marker, so it showed as an oval */
.google-dog-marker { display: block; box-sizing: border-box; }
.google-dog-marker img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

/* health record form: label text and "(optional)" on one line, the two boxes of a row level, and the iPhone date box stays in its column */
.health-form-row > label { display: flex; flex-wrap: wrap; align-content: flex-end; column-gap: 4px; row-gap: 6px; }
.health-form-row > label > input, .health-form-row > label > select { flex: 1 0 100%; }
.health-form-row input[type="date"] { width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
.health-form-row input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* Inbox activity tiles like Xiaohongshu: three cards, icon on top, unread count on the icon */
.pm-notice-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 20px 6px; }
.pm-notice-tiles button { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; box-shadow: 0 2px 8px rgba(40, 40, 30, .05); }
.pm-notice-ic { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; line-height: 1; }
.pm-notice-ic i { position: absolute; top: -4px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--paper); border-radius: 10px; background: #e5484d; color: #fff; font: 700 11px var(--font-body); font-style: normal; }
.pm-notice-tiles small { font-size: 13px; }

/* the list behind a tile: everything of that kind, newest first; what was new when it opened is tinted */
.pm-activity-sheet h2 { margin-bottom: 8px; }
.pm-notice-list { display: grid; gap: 2px; margin: 0 -8px; }
.pm-notice-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.pm-notice-row.new { background: rgba(229, 72, 77, .07); }
.pm-notice-face { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.pm-notice-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pm-notice-tx strong { font-size: 14.5px; }
.pm-notice-tx small { color: var(--muted); font-size: 12.5px; }
.pm-notice-tx em { font-style: normal; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-notice-post { width: 48px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; }

/* event group chat: who sent each message, and the "event is over" bar with the organiser's close button */
.message-log .bubble-name { display: block; margin: 8px 0 2px 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.event-chat-over { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pm-notice-row button { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.pm-notice-who { flex: none; border-radius: 50%; }
.pm-notice-name { justify-self: start; font-size: 14.5px; font-weight: 700; }
.pm-notice-what { display: grid; gap: 2px; min-width: 0; }

/* Me: the playmates and walks lists behind the passport numbers */
.pm-list-sheet .pm-btn { width: 100%; margin-top: 14px; }
.pm-walk-ic { display: grid; place-items: center; background: var(--sage-pale, #e5eee7); font-size: 20px; }
.pm-walk-min { flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }

/* park filters and a place's own page with member reviews */
.pm-feature-chips { padding-top: 6px; padding-bottom: 2px; }
.pm-feature-chips .pm-chip { height: 30px; padding: 0 11px; font-size: 12.5px; }
.pm-feature-chips .pm-chip.on { background: var(--sage-dark); border-color: var(--sage-dark); }
.pm-place-sheet h2 { margin-top: 2px; }
.pm-place-hero { margin: 0 0 14px; height: 168px; border-radius: 20px; overflow: hidden; position: relative; background: var(--pm-paper-2); }
.pm-place-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-place-hero figcaption { position: absolute; right: 8px; bottom: 6px; max-width: 80%; padding: 2px 7px; border-radius: 7px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-place-hero figcaption a { color: #fff; }
.pm-place-hero-ic { height: 96px; display: grid; place-items: center; font-size: 44px; }
.pm-place-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.pm-place-scores { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; font-size: 13.5px; color: var(--pm-ink-2); }
.pm-place-scores b { color: var(--ink); }
.pm-place-scores a { color: var(--pm-ink-2); font-weight: 650; text-decoration: none; padding: 3px 9px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); }
.pm-paws { display: inline-flex; gap: 1px; font-size: 12px; vertical-align: -1px; }
.pm-paws i { font-style: normal; opacity: .22; filter: grayscale(1); }
.pm-paws i.on { opacity: 1; filter: none; }
.pm-place-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pm-place-acts > * { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: 650 13.5px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pm-place-acts > :first-child { grid-column: 1 / -1; min-height: 50px; font-size: 15.5px; background: var(--pm-ball); border-color: var(--pm-ball); color: var(--pm-ball-ink); }
.pm-place-acts > :only-child, .pm-place-acts > :nth-child(2):last-child { grid-column: 1 / -1; }
.pm-feats { display: flex; flex-wrap: wrap; gap: 7px; }
.pm-feats span, .pm-feats button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 16px; background: #e8f0d8; color: var(--pm-ball-ink); font: 650 13px var(--font-body); border: 1px solid transparent; }
.pm-feats small { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.pm-feats-pick button { background: var(--paper); border-color: var(--line); color: var(--pm-ink-2); cursor: pointer; }
.pm-feats-pick button.on { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.pm-place-about { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--pm-ink-2); }
.pm-place-facts { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; color: var(--pm-ink-2); }
.pm-place-dogs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.pm-place-dogs button { flex: none; display: grid; justify-items: center; gap: 4px; width: 60px; border: 0; background: none; font: 600 11.5px var(--font-body); color: var(--pm-ink-2); cursor: pointer; }
.pm-place-dogs img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--pm-live); }
.pm-place-dogs span { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-review-head { display: flex; align-items: center; justify-content: space-between; }
.pm-review-head button { height: 34px; padding: 0 13px; margin-top: 8px; border: 0; border-radius: 17px; background: var(--sage-dark); color: #fff; font: 650 13px var(--font-body); cursor: pointer; }
.pm-reviews { display: grid; gap: 10px; }
.pm-review { padding: 12px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.pm-review-who { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; }
.pm-review-who img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.pm-review-who > span { display: grid; gap: 1px; min-width: 0; }
.pm-review-who strong { font-size: 14.5px; }
.pm-review-who small { font-size: 12px; color: var(--muted); }
.pm-review-feats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.pm-review-feats span { padding: 2px 8px; border-radius: 9px; background: #eef3e2; color: var(--pm-ball-ink); font-size: 11.5px; font-weight: 650; }
.pm-review p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--pm-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-review-edit { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--sage-dark); font: 650 13px var(--font-body); cursor: pointer; }
.pm-review-form { display: grid; gap: 10px; margin-bottom: 12px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--sage-dark); }
.pm-review-q { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.pm-rate { display: flex; gap: 6px; }
.pm-rate button { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--cream); font-size: 22px; cursor: pointer; filter: grayscale(1); opacity: .45; }
.pm-rate button.on { filter: none; opacity: 1; background: #eef3e2; border-color: #c9d9a6; }
.pm-review-form textarea { width: 100%; box-sizing: border-box; min-height: 78px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--cream); font: 15px/1.45 var(--font-body); color: var(--ink); resize: vertical; }
.pm-review-btns { display: flex; justify-content: flex-end; gap: 8px; }
.pm-review-btns button { height: 42px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--line); background: var(--paper); color: var(--pm-ink-2); font: 650 14px var(--font-body); cursor: pointer; }
.pm-review-btns .pm-review-post { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.pm-review-btns .pm-review-del { color: #b4443a; margin-right: auto; }
.pm-place-sheet .pm-empty-out { margin: 0; }
.pm-place-google { display: block; margin-top: 14px; text-align: center; font-size: 13px; font-weight: 650; color: var(--sage-dark); text-decoration: none; }
.pm-popup-more { display: block; width: 100%; margin-top: 6px; }
.pm-place-acts > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-chip-clear { background: transparent !important; border-style: dashed !important; color: var(--pm-ink-2) !important; }
.pm-tag-add { display: flex; gap: 8px; }
.pm-tag-add input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); font: 15px var(--font-body); color: var(--ink); }
.pm-tag-add button { flex: none; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sage-dark); background: var(--paper); color: var(--sage-dark); font: 650 14px var(--font-body); cursor: pointer; }

/* message requests: a chat with an owner who isn't a friend yet */
.pm-request-note { margin: 10px 4px 14px; padding: 12px 14px; border-radius: 16px; background: rgba(213, 236, 78, .28); color: var(--pm-ball-ink); font-size: 13.5px; line-height: 1.45; text-align: center; }
.pm-request-note p { margin: 0; }
.pm-request-acts { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.pm-request-acts button { height: 36px; padding: 0 16px; border-radius: 18px; border: 0; background: var(--sage-dark); color: #fff; font: 650 13.5px var(--font-body); cursor: pointer; }
.pm-request-acts .pm-request-del { background: var(--paper); border: 1px solid var(--line); color: #b4443a; }
.pm-request-wait { margin: 0; padding: 14px 20px calc(env(safe-area-inset-bottom) + 14px); text-align: center; font-size: 14px; font-weight: 650; color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); }
.pm-list-sheet .pm-threads { margin: 0 -20px; }
.conversation-page:has(.pm-request-note) .pm-quick { display: none; }
.pm-sheet-note { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.map-search-sheet { height: min(80dvh, 640px); max-height: none !important; }

/* dog profile bottom bar: Invite · Follow / Follow back / Following / Friends · chat, all inside the screen */
.pm-pact { box-sizing: border-box; }
.pm-pact-dog { align-items: center; }
.pm-pact-dog .pm-primary { flex: 1; min-width: 0; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 54px; text-align: center; }
.pm-follow-btn { flex: none; width: auto; min-width: 96px; padding: 0 16px; white-space: nowrap; }
.pm-follow-btn.is-new { background: var(--pm-ball); color: var(--pm-ball-ink); }
.pm-follow-btn.is-friends { cursor: default; color: var(--sage-dark); }
.pm-follows-you { background: rgba(213, 236, 78, .35); border-color: transparent; color: var(--pm-ball-ink); }
.pm-rate.need button { border-color: #e0a19a; background: #fdf1ef; }
.pm-rate-hint { margin-top: -4px; font-size: 13px; font-weight: 650; color: #b4443a; }

/* Add a place: only the fields that apply show; parks and beaches get the same ticks as reviews */
.pm-add-place [hidden] { display: none !important; }
.pm-add-tags p { margin: 0 0 8px; font: 700 14px var(--font-body); color: var(--pm-ink-2); }
.pm-add-tags .pm-feats label { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line); background: var(--paper); color: var(--pm-ink-2); font: 650 13px var(--font-body); cursor: pointer; }
.pm-add-tags .pm-feats input { position: absolute; opacity: 0; pointer-events: none; }
.pm-add-tags .pm-feats label:has(input:checked) { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.pm-add-tags .pm-feats label:has(input:focus-visible) { outline: 2px solid var(--sage-dark); outline-offset: 2px; }
.pm-place-tag-add { margin-top: 10px; }
.pm-add-tag-hint { display: block; margin-top: 6px; color: var(--muted); font: 12px/1.4 var(--font-body); }
.pm-dogpark { font-weight: 700; color: var(--sage-dark); }

/* Nearby: every dog in a two-column grid, out now first with a green dot */
.pm-dog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 20px 14px; }
.pm-dog-grid .pm-dog-card { width: auto; min-width: 0; }
.pm-dog-card.is-out { border-color: #8cc56a; box-shadow: 0 0 0 1px #8cc56a inset; }
.pm-dog-on { position: absolute; right: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; background: #3fb34f; border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pm-out-count { display: inline-flex; align-items: center; gap: 5px; color: var(--sage-dark); font-weight: 700; }
.pm-out-count .pm-dot { width: 8px; height: 8px; }
.pm-dog-grid .pm-later-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Me › Health: add is always there */
.pm-section-acts { display: inline-flex; gap: 14px; align-items: baseline; }
.pm-section .pm-section-add { color: var(--sage-dark); font-weight: 800; }
.pm-li-add .pm-li-ic { background: #e8f0d8; color: var(--sage-dark); font-weight: 800; }

/* Edit profile: change the photo */
.pm-edit-photo { display: flex; align-items: center; gap: 14px; }
.pm-edit-photo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pm-edit-photo .pm-btn { width: auto; padding: 0 16px; height: 40px; }
.image-upload-preview:has(img) { cursor: pointer; }
/* the dog list is long now, so "Head out" stays in reach above the tab bar */
.pm-sheet .pm-cta { position: sticky; z-index: 3; bottom: 0; padding: 14px 20px 8px; box-shadow: 0 40px 0 var(--cream); background: linear-gradient(rgba(243, 238, 226, 0), var(--cream) 18px); }

/* Place page: report wrong info; the owner's editor; reports in her dashboard */
.pm-fix-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pm-fix-links button { border: 0; background: none; color: var(--muted); font: 650 13.5px var(--font-body); cursor: pointer; padding: 6px 2px; }
.pm-fix-links .pm-fix-admin { color: var(--sage-dark); }
.pm-fix-links b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: #d9534a; color: #fff; font-size: 11px; }
.pm-fix-form { margin-top: 16px; }
.pm-fix-reports { margin: 0; padding: 10px 12px; list-style: none; border-radius: 13px; background: #fbefe0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink); }
.pm-fix-reports small { display: block; color: var(--muted); font-size: 11.5px; }
.pm-admin-reports ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pm-admin-reports li { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pm-admin-reports li:last-child { border-bottom: 0; padding-bottom: 0; }
.pm-admin-reports p { margin: 0; font-size: 14px; color: var(--ink); }
.pm-admin-reports small { color: var(--muted); font-size: 12px; }
.pm-admin-reports .pm-review-btns { margin-top: 6px; }
.pm-admin-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 9px; background: #d9534a; color: #fff; font: 700 11.5px var(--font-body); vertical-align: 2px; }
.pm-welcome-where { margin: 4px 0 8px; font: 700 12.5px var(--font-body); color: var(--muted); text-align: left; }
.pm-admin-reports { margin-bottom: 14px; }
.pm-fix-top { display: grid; gap: 2px; width: 100%; margin: 14px 0 4px; padding: 11px 14px; border: 1.5px dashed var(--sage-dark); border-radius: 15px; background: #eef3e2; color: var(--sage-dark); font: 750 14.5px var(--font-body); text-align: left; cursor: pointer; }
.pm-fix-top small { font-weight: 600; font-size: 12px; color: var(--muted); }
.pm-fix-top b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: #d9534a; color: #fff; font-size: 11px; }
.image-upload-preview { position: relative; }
.pm-photo-remove { position: absolute; top: 8px; right: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: rgba(28, 33, 27, .78); color: #fff; font: 700 13px var(--font-body); cursor: pointer; }

/* Me › Album */
.pm-album-note { margin: -4px 20px 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.pm-album { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 6px; scrollbar-width: none; }
.pm-album::-webkit-scrollbar { display: none; }
.pm-album-ph, .pm-album-add { position: relative; flex: none; width: 92px; height: 92px; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); cursor: pointer; }
.pm-album-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-album-ph.is-avatar { border: 2.5px solid var(--sage-dark); }
.pm-album-ph em { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 8px; background: var(--sage-dark); color: #fff; font: 700 11px var(--font-body); font-style: normal; }
.pm-album-ph em.private { background: rgba(28, 33, 27, .7); }
.pm-album-add { display: grid; place-items: center; border-style: dashed; color: var(--sage-dark); font-size: 28px; }
.pm-album-sheet { display: grid; gap: 12px; }
.pm-album-big { width: 100%; max-height: 55vh; object-fit: contain; border-radius: 20px; background: #000; }
.pm-album-sheet .pm-album-note { margin: 0; text-align: center; }
.pm-album-acts { display: flex; gap: 10px; }
.pm-album-acts .pm-btn { flex: 1; }
.pm-album-del { color: #b4443a; }

/* Chats: WeChat-style times between messages */
.pm-chat-time { align-self: center; margin: 10px auto 2px; padding: 2px 9px; border-radius: 7px; background: rgba(40, 35, 20, .07); color: var(--muted); font: 600 11.5px var(--font-body); text-align: center; width: fit-content; }

/* Inbox: swipe a chat left for Mark unread / Delete */
.pm-swipe { position: relative; overflow: hidden; }
.pm-swipe > .pm-thread { position: relative; z-index: 1; width: 100%; background: var(--cream); touch-action: pan-y; transition: transform .22s var(--pm-ease); }
.pm-swipe.open > .pm-thread { transform: translateX(calc(-1 * var(--acts, 172px))); }
.pm-swipe-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.pm-swipe-acts button { width: 86px; border: 0; background: #8a9a7e; color: #fff; font: 700 13.5px var(--font-body); cursor: pointer; }
.pm-swipe-acts .pm-swipe-del { background: #d9534a; }

/* Moments: two real columns */
.discover-view .discover-grid.pm-two-col { columns: auto; display: flex; gap: 10px; align-items: flex-start; }
.discover-view .discover-grid.pm-two-col > .pm-col { flex: 1; min-width: 0; margin: 0; border-radius: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.discover-view .discover-grid.pm-two-col .pm-col > * { margin: 0; border-radius: 20px !important; }

/* Me: add friend / share / edit under the dog's card; settings behind the gear */
.pm-me-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 20px 0; }
.pm-me-quick button { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); font: 700 13.5px var(--font-body); cursor: pointer; }
.pm-me-quick button span { font-size: 21px; line-height: 1.1; }
.pm-me-quick button small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 600 11px var(--font-body); }
.pm-settings h2 { margin: 6px 0 14px; font: 600 24px var(--font-display); }
.pm-settings .pm-list { margin: 0; }