/* ============================================================
   Phone mockup — CSS-only iPhone-like frame with app screens
   Follows NearCom PRD design system (Deep Teal, glass, 8/9999 radii)
   ============================================================ */

.phone {
  --w: 300px;
  --h: 620px;
  width: var(--w); height: var(--h);
  border-radius: 46px;
  background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
  padding: 10px;
  position: relative;
  box-shadow:
    0 60px 100px -30px rgba(0, 60, 60, 0.55),
    0 30px 60px -30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1.5px rgba(255,255,255,0.06),
    inset 0 2px 0 rgba(255,255,255,0.08);
  flex-shrink: 0;
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
}
.phone::before, .phone::after {
  content: ""; position: absolute; background: #0a0a0a; border-radius: 4px;
}
.phone::before { /* volume rocker */ left: -3px; top: 100px; width: 3px; height: 60px; }
.phone::after  { /* power btn */    right: -3px; top: 140px; width: 3px; height: 80px; }

.phone__screen {
  width: 100%; height: 100%;
  border-radius: 38px; overflow: hidden;
  background: var(--surface);
  position: relative;
  color: var(--ink);
  font-size: 12px;
  display: flex; flex-direction: column;
}
.phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 26px; background: #000; border-radius: 20px; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.phone__notch::after { content:""; width: 6px; height: 6px; border-radius: 50%; background: #1a2b2b; box-shadow: inset 0 0 0 1px rgba(77,202,202,0.4); }

.phone__status {
  padding: 12px 20px 4px; display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; z-index: 4; position: relative;
}
.phone__status-right { display: flex; gap: 4px; align-items: center; }
.phone__status svg { width: 14px; height: 14px; }

/* Top bar (inside app) */
.p-topbar {
  padding: 8px 16px 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; position: relative; z-index: 3;
}
.p-topbar__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.p-topbar__subtitle { font-size: 10px; color: var(--slate); font-weight: 500; }
.p-topbar__actions { display: flex; gap: 6px; }
.p-icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 12px -6px rgba(0,60,60,0.15);
}
.p-icon-btn svg { width: 14px; height: 14px; stroke: var(--ink); }

/* Chips row */
.p-chips { display: flex; gap: 6px; padding: 0 16px 12px; overflow-x: hidden; }
.p-chip {
  padding: 5px 10px; border-radius: 9999px; font-size: 10px; font-weight: 600;
  background: var(--white); color: var(--graphite); flex-shrink: 0;
  box-shadow: 0 2px 6px -3px rgba(0,60,60,0.15);
}
.p-chip.is-active { background: var(--teal-700); color: white; }

/* Feed cards */
.p-feed { padding: 4px 16px 60px; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.p-card {
  background: var(--white);
  border-radius: 14px; padding: 12px;
  box-shadow: 0 6px 20px -10px rgba(0, 60, 60, 0.15);
}
.p-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.p-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-700));
  color: white; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p-avatar.a2 { background: linear-gradient(135deg, #f5a524, #f26a53); }
.p-avatar.a3 { background: linear-gradient(135deg, #6b8afd, #4b57c8); }
.p-avatar.a4 { background: linear-gradient(135deg, #55c78a, #21815e); }
.p-avatar.a5 { background: linear-gradient(135deg, #c58bf3, #7b3cc6); }
.p-name { font-weight: 700; font-size: 11px; line-height: 1.2; }
.p-meta { font-size: 9px; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 1px; }
.p-tag {
  margin-left: auto; padding: 3px 8px; border-radius: 9999px;
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(0,128,128,0.1); color: var(--teal-700);
}
.p-tag.alert { background: rgba(242,106,83,0.14); color: #c04a34; }
.p-tag.event { background: rgba(245,165,36,0.16); color: #8f6300; }

.p-body { font-size: 11px; line-height: 1.45; color: var(--charcoal); }
.p-body strong { color: var(--ink); }

.p-actions { display: flex; gap: 12px; margin-top: 8px; color: var(--slate); font-size: 10px; font-weight: 600; }
.p-actions span { display: inline-flex; align-items: center; gap: 3px; }
.p-actions svg { width: 12px; height: 12px; stroke: var(--slate); }

/* Media block inside card */
.p-media {
  height: 80px; border-radius: 10px; margin: 6px 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4), transparent 40%),
    linear-gradient(135deg, var(--teal-300), var(--teal-700));
  position: relative; overflow: hidden;
}
.p-media--map {
  background:
    linear-gradient(135deg, rgba(0,50,50,0.9), rgba(0,80,80,0.6)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 20px);
}
.p-media--park {
  background:
    radial-gradient(circle at 30% 60%, #55c78a, transparent 40%),
    radial-gradient(circle at 70% 40%, #21815e, transparent 45%),
    linear-gradient(135deg, #3a8a5d, #1e5c40);
}
.p-media--furn {
  background:
    linear-gradient(135deg, #b98657, #7c4f2b);
}
.p-pin {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal-300); box-shadow: 0 0 0 3px rgba(77,202,202,0.35);
  animation: pulsePin 2s ease-in-out infinite;
}
@keyframes pulsePin {
  0%,100% { box-shadow: 0 0 0 3px rgba(77,202,202,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(77,202,202,0.05); }
}

/* Bottom nav (glass) */
.p-bottom-nav {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  height: 54px; border-radius: 24px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 28px -14px rgba(0,60,60,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: space-around; padding: 0 8px;
  z-index: 6;
}
.p-bottom-nav .item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 8px; color: var(--slate); font-weight: 600;
}
.p-bottom-nav .item svg { width: 18px; height: 18px; stroke: var(--slate); fill: none; stroke-width: 2; }
.p-bottom-nav .item.is-active { color: var(--teal-700); }
.p-bottom-nav .item.is-active svg { stroke: var(--teal-700); }

/* FAB */
.p-fab {
  position: absolute; right: 20px; bottom: 76px; width: 46px; height: 46px;
  border-radius: 50%; background: linear-gradient(135deg, var(--teal-500), var(--teal-800));
  color: white; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300; box-shadow: 0 14px 24px -10px rgba(0,101,101,0.7);
  z-index: 6;
}

/* Marketplace grid */
.p-market {
  padding: 0 16px 60px; overflow: hidden; flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.p-market-item {
  background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 16px -10px rgba(0,60,60,0.2);
}
.p-market-item__img {
  height: 68px;
  background: linear-gradient(135deg, var(--teal-200), var(--teal-500));
}
.p-market-item__img.b1 { background: linear-gradient(135deg, #d9c298, #a7794c); }
.p-market-item__img.b2 { background: linear-gradient(135deg, #b8d4e8, #5c86ad); }
.p-market-item__img.b3 { background: linear-gradient(135deg, #f1c0a6, #c47b58); }
.p-market-item__img.b4 { background: linear-gradient(135deg, #a8d8b9, #5ba57e); }
.p-market-item__body { padding: 8px; }
.p-market-item__title { font-size: 10px; font-weight: 700; line-height: 1.25; }
.p-market-item__price { font-size: 11px; font-weight: 800; color: var(--teal-700); margin-top: 2px; }
.p-market-item__price.free { color: var(--amber); }
.p-market-item__dist { font-size: 8px; color: var(--slate); margin-top: 2px; letter-spacing: 0.04em; font-weight: 600; }

/* Communities list */
.p-community {
  background: var(--white); border-radius: 14px; padding: 10px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 20px -10px rgba(0,60,60,0.15);
}
.p-community__cover {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal-300), var(--teal-600));
}
.p-community__cover.c1 { background: linear-gradient(135deg, #55c78a, #21815e); }
.p-community__cover.c2 { background: linear-gradient(135deg, #f5a524, #d47f00); }
.p-community__cover.c3 { background: linear-gradient(135deg, #6b8afd, #4b57c8); }
.p-community__cover.c4 { background: linear-gradient(135deg, #c58bf3, #7b3cc6); }
.p-community__meta { flex: 1; min-width: 0; }
.p-community__name { font-size: 12px; font-weight: 700; }
.p-community__desc { font-size: 9px; color: var(--slate); margin-top: 2px; }
.p-community__join {
  padding: 5px 10px; border-radius: 9999px; background: var(--teal-700); color: white;
  font-size: 9px; font-weight: 700;
}
.p-community__join.joined { background: rgba(0,128,128,0.1); color: var(--teal-700); }

/* Chat */
.p-chat-bubble {
  padding: 8px 10px; border-radius: 14px; font-size: 10.5px; line-height: 1.4;
  max-width: 82%; box-shadow: 0 4px 12px -8px rgba(0,60,60,0.2);
}
.p-chat-bubble.them { background: var(--white); align-self: flex-start; border-bottom-left-radius: 4px; }
.p-chat-bubble.me { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.p-chat-time { font-size: 8px; color: var(--slate); margin: 4px 0; align-self: center; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

/* Profile screen */
.p-profile-hero {
  padding: 20px 16px; text-align: center;
  background: linear-gradient(180deg, rgba(0,101,101,0.06), transparent);
}
.p-profile-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-700));
  color: white; font-weight: 800; font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px; box-shadow: 0 12px 24px -10px rgba(0,101,101,0.5);
}
.p-profile-name { font-weight: 800; font-size: 15px; }
.p-profile-loc { font-size: 10px; color: var(--slate); margin-top: 2px; }
.p-profile-trust {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  padding: 4px 10px; border-radius: 9999px; background: rgba(85,199,138,0.14);
  color: #21815e; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
}
.p-profile-stats { display: flex; padding: 0 16px 12px; gap: 8px; }
.p-profile-stat { flex: 1; text-align: center; padding: 10px; background: var(--white); border-radius: 12px; box-shadow: 0 4px 12px -8px rgba(0,60,60,0.15); }
.p-profile-stat b { font-size: 15px; display: block; }
.p-profile-stat span { font-size: 9px; color: var(--slate); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Business */
.p-business {
  background: var(--white); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 6px 20px -10px rgba(0,60,60,0.15);
  display: flex; align-items: center; gap: 10px;
}
.p-business__logo {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: white;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-800));
}
.p-business__logo.b2 { background: linear-gradient(135deg, #f5a524, #d47f00); }
.p-business__logo.b3 { background: linear-gradient(135deg, #6b8afd, #4b57c8); }
.p-business__logo.b4 { background: linear-gradient(135deg, #55c78a, #21815e); }
.p-business__name { font-size: 12px; font-weight: 700; }
.p-business__cat { font-size: 9px; color: var(--slate); margin-top: 1px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.p-business__rating { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--amber); display: inline-flex; align-items: center; gap: 3px; }

/* Radius / onboarding */
.p-radius-hero {
  padding: 24px 20px; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative;
}
.p-radius-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.p-radius-sub { font-size: 10px; color: var(--slate); margin-bottom: 20px; }
.p-radius-map {
  width: 210px; height: 210px; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle at center, rgba(0,128,128,0.14), rgba(0,128,128,0.02) 60%, transparent 70%),
    conic-gradient(from 0deg at center, #cfe6e5, #e6efef, #cfe6e5);
  box-shadow: inset 0 0 0 1px rgba(0,101,101,0.14);
}
.p-radius-map::before, .p-radius-map::after {
  content:""; position: absolute; inset: 24px; border-radius: 50%;
  border: 1px dashed rgba(0,101,101,0.24);
}
.p-radius-map::after { inset: 56px; border-color: rgba(0,101,101,0.35); border-style: solid; }
.p-radius-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal-700); box-shadow: 0 0 0 4px white, 0 0 0 5px var(--teal-700);
}
.p-radius-slider {
  margin-top: 22px; width: 220px; height: 6px; border-radius: 9999px;
  background: rgba(0,101,101,0.14); position: relative;
}
.p-radius-slider::before { content:""; position: absolute; left: 0; top: 0; height: 100%; width: 55%; background: var(--teal-700); border-radius: 9999px; }
.p-radius-slider::after {
  content:""; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%);
  width: 18px; height: 18px; border-radius: 50%; background: white;
  box-shadow: 0 0 0 3px var(--teal-700), 0 6px 14px -4px rgba(0,101,101,0.5);
}
.p-radius-label { font-size: 11px; font-weight: 700; color: var(--teal-700); margin-top: 10px; letter-spacing: 0.04em; }

/* Phone size variants */
.phone--sm { --w: 240px; --h: 500px; }
.phone--lg { --w: 340px; --h: 700px; }