/* ═══════════════════════════════════════════════════════════
   CityBuildRR — Global responsive layer
   Fluid spacing, mobile nav, overflow fixes, touch targets
   ═══════════════════════════════════════════════════════════ */

/* ── Touch devices — hide custom cursor, restore native ── */
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
  #cb-cursor, #cb-ring { display: none !important; }
}

/* ── Global containment ─────────────────────────────────── */
img, video, canvas, svg { max-width: 100%; height: auto; }
.user-screen { overflow-x: clip; }

.pg-loading {
  padding: clamp(48px, 12vw, 80px) var(--page-px);
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.community-filter-wrap {
  padding: 24px var(--page-px) 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.content-max {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ── Home screen layout ───────────────────────────────────── */
.home-screen {
  width: 100%;
  overflow-x: clip;
}

.home-section-head {
  text-align: center;
  margin-bottom: clamp(32px, 6vw, 64px);
}

.home-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 32px);
  min-width: 0;
}

.home-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 20px);
  min-width: 0;
}

.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 64px);
  align-items: start;
  min-width: 0;
}

.home-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2.5vw, 16px);
  margin-top: clamp(16px, 3vw, 24px);
  min-width: 0;
}

.home-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  min-width: 0;
}

.home-fund-total {
  text-align: right;
}

.home-screen .section,
.home-screen .section-wide {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.home-screen .hero-stats {
  width: min(100%, 720px);
  max-width: 100%;
}

.home-screen .hero-sub {
  max-width: min(580px, 100%);
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 900px) {
  .home-grid-2,
  .home-split {
    grid-template-columns: 1fr;
  }

  .home-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-fund-total {
    text-align: left;
    width: 100%;
  }

  .pipe-active-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
}

@media (max-width: 768px) {
  .home-screen {
    padding-bottom: calc(var(--mobile-nav-h) + 8px);
  }

  #hero {
    min-height: calc(100svh - var(--nav-h));
    padding-top: clamp(72px, 10vw, 96px);
    padding-bottom: calc(var(--mobile-nav-h) + clamp(20px, 4vw, 32px));
    justify-content: flex-start;
  }

  .home-screen .hero-actions {
    margin-bottom: clamp(32px, 6vw, 48px);
  }

  .home-screen .hero-stats {
    width: 100%;
    margin-top: auto;
  }

  .home-screen .scroll-cue {
    display: none;
  }

  #footer {
    padding-bottom: calc(clamp(24px, 5vw, 36px) + var(--mobile-nav-float-gap));
  }

  .home-grid-3 {
    grid-template-columns: 1fr;
  }

  .home-stat-row {
    grid-template-columns: 1fr;
  }

  .home-screen .ticker::before,
  .home-screen .ticker::after {
    width: clamp(40px, 12vw, 80px);
  }

  .home-screen .contrib-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .home-screen .cr-rep {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .home-mini-grid {
    grid-template-columns: 1fr;
  }

  .home-screen .hero-title {
    font-size: clamp(44px, 14vw, 68px);
  }

  .home-screen .heading-lg {
    font-size: clamp(34px, 9vw, 48px);
  }

  .home-screen .fund-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .home-screen .hero-eyebrow-line {
    width: clamp(16px, 5vw, 28px);
  }

  .home-screen .hero-eyebrow {
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.14em;
  }
}

/* ── Mobile bottom navigation — iOS Liquid Glass ──────────── */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 650;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding:
    0
    max(var(--safe-right), var(--mobile-nav-float-x))
    calc(var(--mobile-nav-float-gap) + var(--safe-bottom))
    max(var(--safe-left), var(--mobile-nav-float-x));
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.mobile-nav-glass {
  position: relative;
  pointer-events: auto;
  isolation: isolate;
  border-radius: 999px;
  padding: var(--mobile-nav-shell-pad);
  transform: translateZ(0);
  will-change: transform;
}

/* Frosted lens — refracts content behind the bar */
.mobile-nav-glass-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.18) 0%,
      oklch(1 0 0 / 0.08) 22%,
      oklch(0.72 0.04 280 / 0.06) 55%,
      oklch(0.45 0.03 270 / 0.10) 100%);
  backdrop-filter: blur(48px) saturate(190%) brightness(1.12);
  -webkit-backdrop-filter: blur(48px) saturate(190%) brightness(1.12);
  border: none;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    inset 0 0 0 0.5px oklch(1 0 0 / 0.10);
}

/* Specular rim + chromatic edge sheen */
.mobile-nav-glass-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      oklch(1 0 0 / 0.28) 0%,
      oklch(1 0 0 / 0.06) 18%,
      transparent 42%,
      transparent 62%,
      oklch(0.82 0.12 200 / 0.08) 82%,
      oklch(0.68 0.18 295 / 0.10) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

.mobile-nav-glass-edge::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 8%;
  right: 8%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(1 0 0 / 0.65) 35%,
    oklch(1 0 0 / 0.85) 50%,
    oklch(1 0 0 / 0.65) 65%,
    transparent 100%);
  opacity: 0.75;
}

.mobile-nav-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: var(--mobile-nav-gap);
  width: 100%;
  max-width: none;
  margin: 0;
}

/* iOS-style sliding selection capsule */
.mobile-nav-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.24) 0%,
      oklch(1 0 0 / 0.11) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28);
  transition:
    transform 0.55s var(--ios-spring),
    width 0.55s var(--ios-spring),
    opacity 0.25s ease;
  will-change: transform, width;
}

.mobile-nav-selection.ready {
  opacity: 1;
}

.mobile-nav-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.6vw, 4px);
  min-height: var(--mobile-nav-item-h);
  padding: clamp(4px, 1vw, 6px) clamp(1px, 0.5vw, 4px);
  border: none;
  border-radius: 999px;
  background: transparent;
  color: oklch(0.72 0.012 275 / 0.68);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
  font-size: var(--mobile-nav-label-size);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.15;
  cursor: pointer;
  transition:
    color 0.38s var(--ios-spring),
    transform 0.14s var(--ios-spring);
  position: relative;
  z-index: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mobile-nav-item .mobile-nav-icon {
  font-size: var(--mobile-nav-icon-size);
  line-height: 1;
  flex-shrink: 0;
  filter: saturate(0.82) brightness(0.9);
  transform: translateZ(0);
  transition:
    filter 0.38s var(--ios-spring),
    transform 0.45s var(--ios-spring);
}

.mobile-nav-label {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 0 1px;
  transition: color 0.38s var(--ios-spring), opacity 0.38s var(--ios-spring);
}

/* Active tab — color only; glass pill slides underneath */
.mobile-nav-item.act {
  color: oklch(0.99 0.008 295);
}

.mobile-nav-item.act .mobile-nav-icon {
  filter: saturate(1.18) brightness(1.1) drop-shadow(0 1px 10px oklch(0.68 0.28 295 / 0.32));
  transform: translateY(-1px) scale(1.08);
}

.mobile-nav-item.act .mobile-nav-label {
  font-weight: 600;
}

/* Press — iOS tab squish */
.mobile-nav-item.pressed {
  transform: scale(0.9);
}

.mobile-nav-item.pressed .mobile-nav-icon {
  transform: scale(0.92);
}

.mobile-nav-item.act.pressed .mobile-nav-icon {
  transform: translateY(0) scale(0.96);
}

/* Selection bounce when pill lands */
.mobile-nav-item.bounce .mobile-nav-icon {
  animation: ios-tab-icon-pop 0.52s var(--ios-spring);
}

@keyframes ios-tab-icon-pop {
  0%   { transform: scale(1) translateY(0); }
  38%  { transform: scale(1.24) translateY(-3px); }
  62%  { transform: scale(0.94) translateY(0); }
  100% { transform: translateY(-1px) scale(1.08); }
}

.mobile-nav-glass.tap-flash {
  animation: ios-tab-bar-flash 0.32s var(--ios-spring);
}

@keyframes ios-tab-bar-flash {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

.mobile-nav-item .mobile-nav-dot {
  position: absolute;
  top: clamp(2px, 0.8vw, 5px);
  left: calc(50% + clamp(10px, 3.5vw, 14px));
  right: auto;
  min-width: clamp(14px, 4vw, 18px);
  height: clamp(14px, 4vw, 18px);
  padding: 0 clamp(2px, 0.8vw, 4px);
  font-size: clamp(7px, 2vw, 9px);
  box-shadow:
    0 0 0 1.5px oklch(0.12 0.02 270 / 0.85),
    0 2px 8px oklch(0.88 0.24 135 / 0.45);
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-nav-glass-bg {
    background: oklch(0.14 0.028 272 / 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-nav-glass-edge { opacity: 0.35; }
  .mobile-nav-selection {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(0.22 0.03 285 / 0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-selection {
    transition: transform 0.01s linear, width 0.01s linear, opacity 0.01s linear;
  }
  .mobile-nav-item.bounce .mobile-nav-icon,
  .mobile-nav-glass.tap-flash {
    animation: none !important;
  }
  .mobile-nav-item,
  .mobile-nav-item .mobile-nav-icon,
  .mobile-nav-label {
    transition-duration: 0.01s !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav-glass-bg {
    background: oklch(0.12 0.03 272 / 0.92);
  }
}

/* ── Nav helpers ────────────────────────────────────────── */
.nav-hide-mobile { display: flex; }

/* ── Tablet nav tightening ──────────────────────────────── */
@media (min-width: 769px) {
  :root {
    --nav-h: calc(var(--header-bar-h, 58px) + var(--safe-top, 0px));
  }

  .user-screen {
    padding-top: var(--nav-h);
  }
}

@media (max-width: 1100px) {
  .nav-tab { font-size: 11px; }
}

@media (max-width: 900px) and (min-width: 769px) {
  .live-pill { display: none; }
}

/* ── Mobile layout ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h: calc(52px + var(--safe-top, 0px));
    --header-float-top: 0px;
    --header-inset-x: 0px;
    --page-px: clamp(14px, 4vw, 20px);
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  /* React Native WebView: allow vertical page scroll (Android locks otherwise) */
  html.cb-rn-webview,
  html.cb-rn-webview body {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  html.cb-rn-webview .user-screen {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  html {
    height: 100%;
    height: -webkit-fill-available;
  }

  body {
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    /* Reserve space once via .user-screen — avoid stacking body + screen pads */
    padding-bottom: 0;
  }

  .user-screen {
    padding-top: var(--nav-h);
    padding-bottom: calc(var(--mobile-nav-h) + 8px);
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .mobile-nav { display: block; }

  .nav-hide-mobile { display: none !important; }

  .profile-dropdown {
    position: fixed !important;
    left: var(--page-px) !important;
    right: var(--page-px) !important;
    top: auto !important;
    bottom: calc(var(--mobile-nav-h) + 12px) !important;
    width: auto !important;
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }

  .sfx-toggle {
    width: 34px;
    height: 34px;
  }

  /* Auth modal — bottom-sheet rules live in shared/styles/auth.css,
     which loads after this file and owns the whole component. */

  /* Toasts above mobile nav */
  #toast-root {
    bottom: calc(var(--mobile-nav-h) + 12px);
    left: 16px;
    right: 16px;
    transform: none;
    align-items: stretch;
  }
  .cb-toast {
    white-space: normal;
    border-radius: 14px;
    justify-content: center;
    text-align: center;
  }

  /* Full-width CTAs on small screens */
  .ar-launch-btn { font-size: 11px; padding: 14px 18px; }
  .ar-live-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nav-right .btn { padding: 7px 10px !important; font-size: 9px !important; }

  :root {
    --mobile-nav-gap: 0px;
    --mobile-nav-label-size: clamp(9.5px, 2.4vw, 11px);
    --mobile-nav-icon-size: clamp(24px, 6.2vw, 28px);
    --mobile-nav-item-h: 54px;
    --mobile-nav-float-x: 6px;
    --mobile-nav-float-gap: 4px;
  }

  .glass-tabbar-item .city-nav-ico {
    width: 28px;
    height: 28px;
  }
  .glass-tabbar-item--accent .city-nav-ico {
    width: 32px;
    height: 32px;
  }

  .proj-detail-tab-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .proj-detail-tab {
    text-align: center;
    padding: 10px 6px !important;
    font-size: 8px !important;
  }

  .fund-sidebar { padding: 20px 16px !important; }
}

@media (max-width: 360px) {
  :root {
    --mobile-nav-item-h: 50px;
    --mobile-nav-icon-size: 24px;
    --mobile-nav-label-size: 9.5px;
    --mobile-nav-float-x: 4px;
    --mobile-nav-float-gap: 4px;
  }

  .glass-tabbar-item .city-nav-ico {
    width: 26px;
    height: 26px;
  }
  .glass-tabbar-item--accent .city-nav-ico {
    width: 30px;
    height: 30px;
  }
}

/* Landscape phones — keep bar compact */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --mobile-nav-item-h: 44px;
    --mobile-nav-icon-size: 22px;
    --mobile-nav-pad-y: 2px;
    --mobile-nav-float-gap: 4px;
  }

  .glass-tabbar-label,
  .mobile-nav-label {
    display: none;
  }

  .glass-tabbar-item,
  .mobile-nav-item { gap: 0; }
}

/* ── Large screens — center wide content ────────────────── */
@media (min-width: 1400px) {
  .pg-body,
  .pg-body-narrow,
  .pg-hero,
  .community-filter-wrap,
  .submit-pg-wrap,
  .submit-success-wrap {
    padding-left: max(var(--page-px), calc((100vw - var(--content-max)) / 2));
    padding-right: max(var(--page-px), calc((100vw - var(--content-max)) / 2));
  }
}

/* ── Chrome shell kill-switch (must load last) ─────────────── */
#nav.glass,
#nav.glass .glass-bg,
#nav.glass .glass-bg-chrome,
.glass-chrome,
.glass-chrome .glass-bg,
.glass-chrome .glass-bg-chrome,
.glass-tabbar-shell .glass-tabbar,
.glass-tabbar-shell .glass-tabbar .glass-bg,
.glass-tabbar-shell .glass-tabbar .glass-bg-chrome,
.glass-tabbar-pill.glass-chrome,
.glass-tabbar-pill.glass-chrome .glass-bg-chrome,
.glass-menu.glass-chrome,
.glass-menu.glass-chrome .glass-bg-chrome,
.glass-bottom-bar.glass-chrome,
.glass-bottom-bar.glass-chrome .glass-bg-chrome,
.glass-admin-topnav.glass-chrome,
.glass-admin-topnav.glass-chrome .glass-bg-chrome {
  box-shadow: none !important;
  filter: none !important;
}

.glass-tabbar-shell .glass-tabbar .glass-bg-chrome {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    inset 0 0 0 0.5px oklch(1 0 0 / 0.16),
    0 12px 40px -12px oklch(0 0 0 / 0.5),
    0 4px 16px oklch(0 0 0 / 0.2) !important;
}

#nav.glass .glass-bg-chrome,
.glass-menu.glass-chrome .glass-bg-chrome,
.glass-admin-topnav.glass-chrome .glass-bg-chrome,
.glass-bottom-bar.glass-chrome .glass-bg-chrome {
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16) !important;
}

.glass-tabbar-pill.glass-chrome .glass-bg-chrome {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.42),
    inset 0 -1px 1px oklch(0 0 0 / 0.12),
    0 2px 10px oklch(0 0 0 / 0.16) !important;
}

.glass-tabbar-item:hover {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.glass-tabbar-item.act {
  background: transparent !important;
  box-shadow: none !important;
}
.glass-tabbar-item.pressed {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: scale(0.88) !important;
}

.glass-tabbar-item .mobile-nav-icon,
.glass-tabbar-item .mobile-nav-icon-svg {
  filter: none !important;
}

.glass-tabbar-item.act .mobile-nav-icon-svg {
  filter: saturate(1.05) brightness(1.06) !important;
}
.glass-tabbar-item .city-nav-ico,
.glass-tabbar-item.act .city-nav-ico,
.glass-tabbar-item--accent .city-nav-ico,
.glass-tabbar-item--accent.act .city-nav-ico {
  /* never force monochrome filters on city glyphs */
  filter: drop-shadow(0 2px 6px oklch(0 0 0 / 0.4)) !important;
  opacity: 1 !important;
  color: inherit !important;
}

.glass-tabbar-item .mobile-nav-dot {
  box-shadow: 0 0 0 1px oklch(0.12 0.02 270 / 0.85) !important;
}

.nav-tab:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.glass-menu-item:hover {
  background: oklch(1 0 0 / 0.05) !important;
  box-shadow: none !important;
}