/* ================================================================
   VICTORIA OPEN DATA — 8X Real Estate
   ================================================================
   CSS for City of Victoria data sections on listing detail,
   neighbourhood, and municipality pages.

   Glassmorphic bento design with spring animations, MagicUI
   interactive grids, and monospace accents.

   Prefix convention:
     .vod-  = Victoria Open Data (shared components)
   ================================================================ */

/* ── Design Tokens ───────────────────────────── */
:root {
  /* Functional Accents */
  --vod-teal: #2B6B84;
  --vod-blue: #2a6dfb;
  --vod-green: #42c366;
  --vod-amber: #ecb730;

  /* Trees — West Coast Sitka */
  --vod-tree-deep: #0F4C3A;
  --vod-tree-accent: #40916c;
  --vod-tree-canopy: #52b788;
  --vod-tree-bg: #E6F0ED;

  /* Construction — Permits */
  --vod-con-yellow: #f59e0b;
  --vod-con-yellow-dark: #b45309;
  --vod-con-yellow-light: #fef3c7;
  --vod-con-stripe: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(245,158,11,0.06) 4px,
    rgba(245,158,11,0.06) 8px
  );

  /* Zoning — Analytical */
  --vod-zone-dark: #0f172a;
  --vod-zone-mid: #334155;
  --vod-zone-accent: #3b82f6;
  --vod-zone-light: #f0f4ff;

  /* Dogs */
  --vod-dog-warm: #a16207;
  --vod-dog-accent: #ca8a04;
  --vod-dog-bg: #fefdf5;

  /* Surfaces */
  --vod-bg-card: rgba(255, 255, 255, 0.85);
  --vod-border-muted: rgba(0, 0, 0, 0.06);
  --vod-border-loud: rgba(0, 0, 0, 0.12);

  /* Geometry */
  --vod-rounded-4: 4px;
  --vod-rounded-6: 6px;
  --vod-rounded-8: 8px;
  --vod-rounded-16: 16px;
  --vod-rounded-24: 24px;

  /* Physics */
  --vod-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --vod-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --vod-shadow-card: 0 4px 12px -4px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --vod-shadow-hover: 0 24px 48px -12px rgba(230, 46, 45, 0.12), 0 12px 24px -8px rgba(0, 0, 0, 0.05);
}

/* ── Section Header ──────────────────────────── */
.vod-section {
  margin-top: 48px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.vod-section-label {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E62E2D;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.vod-section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #E62E2D;
  border-radius: 50%;
}
.vod-section-title {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1a1a;
  line-height: 1.15;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

/* ── Bento Grid Layouts ──────────────────────── */
.vod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.vod-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.vod-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.vod-span-2 { grid-column: span 2; }
.vod-span-3 { grid-column: span 3; }
.vod-mb-16 { margin-bottom: 16px; }

/* ── Glassmorphic Bento Card ─────────────────── */
.vod-card {
  background: var(--vod-bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--vod-border-muted);
  border-radius: var(--vod-rounded-24);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), var(--vod-shadow-card);
  padding: 24px;
  position: relative;
  transition: all 0.4s var(--vod-ease);
  overflow: hidden;
}
.vod-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #E62E2D;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 20;
}
.vod-card:hover {
  transform: translateY(-4px) scale(1.005);
  z-index: 10;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), var(--vod-shadow-hover);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.98);
}
.vod-card:hover::after { opacity: 0.2; }

/* ── Card Header & Icon ──────────────────────── */
.vod-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
}
.vod-card-title {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 20px;
  display: block;
  position: relative;
  z-index: 5;
}
.vod-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--vod-rounded-8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--vod-ease);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--vod-shadow-sm);
  position: relative;
  z-index: 5;
}
.vod-card:hover .vod-card-icon {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

/* Icon variants */
.vod-icon-tree { background: var(--vod-tree-bg); color: var(--vod-tree-deep); border-color: rgba(45,106,79,0.15); }
.vod-icon-con { background: var(--vod-con-yellow-light); color: var(--vod-con-yellow-dark); border-color: rgba(245,158,11,0.15); }
.vod-icon-zone { background: var(--vod-zone-light); color: var(--vod-zone-dark); border-color: rgba(59,130,246,0.15); }
.vod-icon-teal { background: #e6f2f7; color: var(--vod-teal); }
.vod-icon-amber { background: #fffbeb; color: var(--vod-amber); }
.vod-icon-red { background: #FCEAEA; color: #E62E2D; }
.vod-icon-blue { background: #eef2ff; color: var(--vod-blue); }

/* ── Big Numbers ─────────────────────────────── */
.vod-big-num {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 8px;
  position: relative;
  z-index: 5;
}
.vod-sublabel {
  font-size: 14px;
  font-weight: 500;
  color: #71717a;
  line-height: 1.5;
  position: relative;
  z-index: 5;
}
.vod-gradient-text {
  background: linear-gradient(135deg, #1a1a1a 0%, #71717a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Zoning Badge ────────────────────────────── */
.vod-zone-badge {
  background: var(--vod-zone-dark);
  color: #fff;
  border-radius: var(--vod-rounded-8);
  padding: 16px 24px;
  display: inline-flex;
  width: fit-content;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  position: relative;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(15,23,42,0.15);
}
.vod-zone-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #E62E2D;
  border-radius: 8px 8px 0 0;
}
.vod-zone-code {
  font-family: 'DM Sans', monospace;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.vod-zone-bylaw {
  font-family: 'DM Sans', monospace;
  font-size: 10px;
  color: #a1a1aa;
  margin-top: 8px;
  letter-spacing: 0.1em;
}

/* ── Zone Designation Label (on card) ─────────── */
.vod-designation-label {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  background: var(--vod-teal);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  line-height: 1.4;
}

/* ── Development Stats ───────────────────────── */
.vod-dev-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.vod-dev-stat {
  padding: 8px 10px;
  background: rgba(43, 109, 132, 0.05);
  border: 1px solid rgba(43, 109, 132, 0.12);
  border-radius: 6px;
}
.vod-dev-stat-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.3;
}
.vod-dev-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Missing Middle Badge ────────────────────── */
.vod-mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  background: rgba(230, 46, 45, 0.08);
  border: 1px solid rgba(230, 46, 45, 0.2);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── Zoning Grid Background ──────────────────── */
.vod-zone-grid-bg {
  background:
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15,23,42,0.04) 1px, transparent 1px),
    var(--vod-bg-card) !important;
  background-size: 20px 20px, 20px 20px, 100% 100% !important;
}
.vod-zone-grid-bg:hover {
  background:
    linear-gradient(90deg, rgba(15,23,42,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15,23,42,0.06) 1px, transparent 1px),
    rgba(255, 255, 255, 0.98) !important;
  background-size: 20px 20px, 20px 20px, 100% 100% !important;
}

/* Crosshair marks on zone cards */
.vod-crosshair { position: absolute; z-index: 1; pointer-events: none; }
.vod-crosshair::before, .vod-crosshair::after { content: ''; position: absolute; background: rgba(15,23,42,0.08); }
.vod-crosshair--tl { top: 16px; left: 16px; }
.vod-crosshair--tl::before { width: 12px; height: 1px; }
.vod-crosshair--tl::after { width: 1px; height: 12px; }
.vod-crosshair--br { bottom: 16px; right: 16px; }
.vod-crosshair--br::before { width: 12px; height: 1px; right: 0; }
.vod-crosshair--br::after { width: 1px; height: 12px; bottom: 0; right: 0; position: absolute; }

/* Interactive Grid Pattern (MagicUI-inspired) */
.vod-igrid-wrap {
  position: absolute;
  top: -60%;
  left: -30%;
  width: 160%;
  height: 220%;
  z-index: 0;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 80%);
  transform: skewY(12deg);
  pointer-events: none;
}
.vod-igrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 48px);
  grid-auto-rows: 48px;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.vod-igrid-sq {
  border-right: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background-color 1.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.vod-igrid-sq:hover {
  background-color: rgba(230, 46, 45, 0.15);
  box-shadow: inset 0 0 0 1px rgba(230, 46, 45, 0.2), 0 0 16px rgba(230, 46, 45, 0.08);
  transition: background-color 0s, box-shadow 0s;
}
.vod-igrid-sq.glow-1 {
  background-color: rgba(230, 46, 45, 0.07);
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.vod-igrid-sq.glow-2 {
  background-color: rgba(230, 46, 45, 0.03);
  transition: background-color 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── File Tree ───────────────────────────────── */
.vod-file-tree {
  font-family: 'DM Sans', monospace;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--vod-border-muted);
  border-radius: var(--vod-rounded-8);
  padding: 16px;
  position: relative;
  z-index: 5;
}
.vod-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--vod-rounded-4);
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
  color: inherit;
}
.vod-tree-item:hover { background: rgba(0,0,0,0.04); }
.vod-tree-children { padding-left: 22px; position: relative; }
.vod-tree-children::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--vod-border-muted);
}
.vod-tree-icon { width: 16px; height: 16px; flex-shrink: 0; }
.vod-tree-folder { color: var(--vod-blue); fill: currentColor; }
.vod-tree-file { color: #71717a; }

/* ── Permit Timeline ─────────────────────────── */
.vod-timeline {
  position: relative;
  padding-left: 32px;
  margin-top: 12px;
  z-index: 5;
}
.vod-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--vod-con-yellow), #E62E2D, var(--vod-blue));
  border-radius: 2px;
  opacity: 0.3;
}
.vod-tl-event {
  position: relative;
  padding-bottom: 32px;
}
.vod-tl-event:last-child { padding-bottom: 0; }
.vod-tl-dot {
  position: absolute;
  left: -32px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  transition: all 0.4s var(--vod-ease);
  box-shadow: 0 0 0 1px var(--vod-border-loud);
}
.vod-tl-event:hover .vod-tl-dot {
  transform: scale(1.4);
  box-shadow: 0 0 12px currentColor;
  border-color: transparent;
}
.vod-dot-building { background: var(--vod-con-yellow); color: var(--vod-con-yellow); }
.vod-dot-plumbing { background: #E62E2D; color: #E62E2D; }
.vod-dot-electrical { background: var(--vod-blue); color: var(--vod-blue); }
.vod-dot-default { background: #71717a; color: #71717a; }

.vod-tl-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.vod-tl-date {
  font-family: 'DM Sans', monospace;
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 600;
}
.vod-tl-desc {
  font-size: 14px;
  color: #52525b;
  margin-bottom: 12px;
  line-height: 1.6;
}
.vod-tl-meta {
  display: inline-flex;
  gap: 16px;
  font-family: 'DM Sans', monospace;
  font-size: 12px;
  color: #52525b;
  background: rgba(0,0,0,0.02);
  padding: 8px 12px;
  border-radius: var(--vod-rounded-6);
}
.vod-tl-meta strong { font-weight: 700; color: #1a1a1a; }
.vod-tl-meta a { color: var(--vod-blue); text-decoration: none; }
.vod-tl-meta a:hover { text-decoration: underline; }

/* ── Badges & Chips ──────────────────────────── */
.vod-badge {
  font-family: 'DM Sans', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--vod-rounded-4);
  display: inline-block;
}
.vod-badge-blue { background: #eef2ff; color: var(--vod-blue); }
.vod-badge-red { background: #FCEAEA; color: #E62E2D; }
.vod-badge-amber { background: #fffbeb; color: var(--vod-amber); }
.vod-badge-teal { background: #e6f2f7; color: var(--vod-teal); }
.vod-badge-con { background: var(--vod-con-yellow-light); color: var(--vod-con-yellow-dark); }
.vod-badge-tree { background: var(--vod-tree-bg); color: var(--vod-tree-deep); }

.vod-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--vod-rounded-6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vod-status-yes { background: #ecfdf5; color: var(--vod-green); }
.vod-status-no { background: rgba(0,0,0,0.04); color: #71717a; }
.vod-status-cond { background: #fffbeb; color: var(--vod-amber); }

.vod-chip {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  transition: 0.2s;
  box-shadow: var(--vod-shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vod-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 5;
}

/* ── Bar Charts ──────────────────────────────── */
.vod-bar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  position: relative;
  z-index: 5;
}
.vod-bar-row:last-child { margin-bottom: 0; }
.vod-bar-label {
  font-size: 14px;
  font-weight: 600;
  width: 140px;
  flex-shrink: 0;
}
.vod-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  overflow: hidden;
}
.vod-bar-fill {
  height: 100%;
  border-radius: 4px;
  transform-origin: left;
}
/* Same rule: the keyframe starts at scaleX(0), so the bar still grows when the
   animation runs and is simply drawn when it does not. */
.vod-bar-fill.vod-animate-bar {
  animation: vodBarGrow 1.2s var(--vod-ease) forwards;
  animation-delay: 0.4s;
}
.vod-bar-num {
  font-family: 'DM Sans', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #71717a;
  width: 40px;
  text-align: right;
}

/* ── Development App Strips ──────────────────── */
.vod-strip {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--vod-bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--vod-border-muted);
  border-radius: var(--vod-rounded-16);
  padding: 16px 24px;
  transition: all 0.4s var(--vod-ease);
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.8), var(--vod-shadow-sm);
}
.vod-strip:hover {
  transform: translateX(6px);
  border-color: rgba(230, 46, 45, 0.15);
  box-shadow: -8px 12px 24px -8px rgba(230, 46, 45, 0.12), inset 0 1px 0 0 rgba(255,255,255,1), var(--vod-shadow-card);
  background: #fff;
}

.vod-dist-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding-right: 24px;
  border-right: 1px solid var(--vod-border-muted);
}
.vod-dist-num {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #1a1a1a;
}
.vod-dist-unit {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a1a1aa;
  margin-top: 6px;
}

/* ── Permit Accent Stripe ────────────────────── */
.vod-permit-accent {
  background: var(--vod-con-stripe);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 1;
}
.vod-card:hover .vod-permit-accent { opacity: 1; }

/* ── Interactive Hover Button ────────────────── */
.vod-hover-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--vod-border-loud);
  border-radius: var(--vod-rounded-8);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--vod-ease);
  z-index: 5;
  box-shadow: var(--vod-shadow-sm);
  width: max-content;
  font-family: 'DM Sans', -apple-system, sans-serif;
  text-decoration: none;
}
.vod-hover-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #E62E2D;
  border-radius: inherit;
  transform: scale(0);
  opacity: 0;
  transition: all 0.4s var(--vod-ease);
  z-index: -1;
}
.vod-hover-btn span {
  transition: transform 0.3s var(--vod-ease);
}
.vod-hover-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s var(--vod-ease);
  position: absolute;
  right: 20px;
}
.vod-hover-btn:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(230,46,45,0.2);
  padding-right: 40px;
  padding-left: 20px;
}
.vod-hover-btn:hover::before { transform: scale(1.5); opacity: 1; }
.vod-hover-btn:hover span { transform: translateX(-4px); }
.vod-hover-btn:hover svg { opacity: 1; transform: translateX(0); }

/* ── Simple View Button (fallback) ───────────── */
.vod-view-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--vod-border-loud);
  border-radius: var(--vod-rounded-8);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s var(--vod-ease);
  z-index: 5;
  box-shadow: var(--vod-shadow-sm);
  font-family: 'DM Sans', -apple-system, sans-serif;
  text-decoration: none;
}
.vod-view-btn:hover {
  color: #fff;
  border-color: transparent;
  background: #E62E2D;
  box-shadow: 0 8px 16px rgba(230,46,45,0.2);
}

/* ── Vertical Marquee ────────────────────────── */
.vod-marquee-container {
  position: relative;
  height: 280px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.vod-marquee-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: vodScrollVertical 20s linear infinite;
}
.vod-marquee-track:hover { animation-play-state: paused; }

@keyframes vodScrollVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.vod-marquee-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--vod-border-muted);
  border-radius: var(--vod-rounded-8);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: 0.2s;
}
.vod-marquee-card:hover {
  background: #fff;
  border-color: var(--vod-border-loud);
  box-shadow: var(--vod-shadow-card);
  transform: scale(1.02);
}

/* ── Circular Progress (lot coverage) ────────── */
.vod-circular-progress {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.vod-circular-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.vod-circular-bg {
  fill: none;
  stroke: rgba(0,0,0,0.04);
  stroke-width: 6;
}
.vod-circular-value {
  fill: none;
  stroke: url(#vod-progress-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 6px rgba(230,46,45,0.3));
}
.vod-circular-glow {
  fill: none;
  stroke: #E62E2D;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  opacity: 0.15;
  filter: blur(4px);
  transition: stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vod-circular-text {
  position: absolute;
  font-family: 'DM Sans', monospace;
  font-size: 24px;
  font-weight: 800;
  color: #1a1a1a;
}
.vod-circular-label {
  position: absolute;
  bottom: -2px;
  font-family: 'DM Sans', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a1a1aa;
}

/* ── Donut Chart ─────────────────────────────── */
.vod-donut-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.05));
}
.vod-donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vod-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Dog Card ────────────────────────────────── */
.vod-dog-bg {
  background: radial-gradient(circle at 95% 10%, rgba(236,183,48,0.06) 0%, transparent 40%), var(--vod-bg-card);
}
.vod-dog-paw {
  position: absolute;
  opacity: 0.04;
  z-index: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.vod-card:hover .vod-dog-paw { opacity: 0.08; }
.vod-dog-paw svg { fill: var(--vod-amber); }

/* ── 8X ASCII Art Background & Kinetics ──────── */

/* Panning dot grid behind section */
.vod-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  z-index: 0;
  animation: vodPanGrid 60s linear infinite;
  pointer-events: none;
}
@keyframes vodPanGrid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-24px, -24px); }
}

/* Ambient orb glow — removed, clashed with rain + dot grid */

/* ASCII art wrapper */
.vod-ascii-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}
.vod-ascii-art {
  font-family: 'DM Sans', monospace;
  font-size: clamp(7px, 0.85vw, 11px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #E62E2D;
  opacity: 0.08;
  white-space: pre;
  margin: 0;
  padding: 10px;
  width: 100%;
}

/* ── Pulse-data background ──────────────────── */
#pulse-data > *:not(.vod-ascii-wrapper) {
  position: relative;
  z-index: 2;
}

/* ── Loading State ───────────────────────────── */
.vod-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px;
  font-size: 14px;
  color: #71717a;
}
.vod-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E62E2D;
  animation: vodPulse 1.2s ease-in-out infinite;
}
@keyframes vodPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ── Animations ──────────────────────────────── */

/* Spring animation — translateY(40px) scale(0.98) to rest */
@keyframes vodBentoSpring {
  0% { opacity: 0; transform: translateY(40px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bar chart grow animation */
@keyframes vodBarGrow {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Simple slide-up fallback */
@keyframes vodSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 🔴 CONTENT MUST NOT DEPEND ON AN ANIMATION RUNNING.
   This carried `opacity: 0`, so every card was invisible by default and only
   became visible if vodBentoSpring actually ran. Anything that stopped it — a
   dropped stylesheet, an unresolved custom property, a browser quirk, an OS
   reduced-motion setting — left the entire Property Intelligence section
   present in the DOM at opacity 0.
   Reported in Safari as the section flashing on load and then vanishing: the
   server-rendered fallback paints, the client removes it on its success path,
   and the replacement is there but never fades in.
   The keyframe already starts at opacity 0, so the fade still happens when the
   animation runs; without it the card is simply visible. */
.vod-animate {
  animation: vodBentoSpring 0.8s var(--vod-ease) forwards;
}
.vod-d1 { animation-delay: 0.1s; }
.vod-d2 { animation-delay: 0.15s; }
.vod-d3 { animation-delay: 0.2s; }
.vod-d4 { animation-delay: 0.25s; }
.vod-d5 { animation-delay: 0.3s; }
.vod-d6 { animation-delay: 0.35s; }
.vod-d7 { animation-delay: 0.4s; }
.vod-d8 { animation-delay: 0.45s; }

/* ── Attribution ─────────────────────────────── */
.vod-attribution {
  margin-top: 16px;
  font-size: 11px;
  color: #a1a1aa;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

/* ── Listing detail compact layout ────────────── */
.vod-ld-section { max-width: 100%; }
.vod-ld-section .vod-card { padding: 20px; }
.vod-ld-2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
  .vod-ld-2col { grid-template-columns: 1fr !important; }
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
  .vod-grid, .vod-grid-2, .vod-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .vod-span-3 { grid-column: span 2; }
}
@media (max-width: 767px) {
  .vod-grid, .vod-grid-2, .vod-grid-6 { grid-template-columns: 1fr; }
  .vod-span-2, .vod-span-3 { grid-column: span 1; }

  /* ── Section spacing ── */
  .vod-section { margin-top: 32px; margin-bottom: 20px; }
  .vod-section-title { font-size: 22px; margin-bottom: 16px; }
  .vod-section-label { font-size: 10px; gap: 6px; }

  /* ── Cards ── */
  .vod-card { padding: 16px; border-radius: var(--vod-rounded-16); }
  .vod-card-header { margin-bottom: 16px; }
  .vod-card-title { font-size: 11px; margin-bottom: 14px; }
  .vod-card-icon { width: 36px; height: 36px; }

  /* ── Disable hover effects on touch ── */
  .vod-card:hover {
    transform: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8), var(--vod-shadow-card);
    border-color: var(--vod-border-muted);
    background: var(--vod-bg-card);
  }
  .vod-card:hover::after { opacity: 0; }
  .vod-card:hover .vod-card-icon { transform: none; box-shadow: var(--vod-shadow-sm); }

  /* ── Big numbers ── */
  .vod-big-num { font-size: 32px; }

  /* ── Strips ── */
  .vod-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--vod-rounded-8);
  }
  .vod-strip:hover { transform: none; }
  .vod-dist-block {
    border-right: none;
    border-bottom: 1px solid var(--vod-border-muted);
    padding-right: 0;
    padding-bottom: 12px;
    width: 100%;
    flex-direction: row;
    gap: 12px;
  }
  .vod-dist-num { font-size: 24px; }

  /* ── Bar charts ── */
  .vod-bar-row { gap: 10px; margin-bottom: 10px; }
  .vod-bar-label { width: 90px !important; font-size: 12px !important; }
  .vod-bar-num { font-size: 12px; width: 32px; }

  /* ── File tree ── */
  .vod-file-tree { font-size: 12px; padding: 12px; }
  .vod-tree-item { padding: 5px 6px; gap: 6px; }
  .vod-tree-children { padding-left: 16px; }

  /* ── Zone badge ── */
  .vod-zone-badge { padding: 12px 16px; min-width: 90px; }
  .vod-zone-code { font-size: 26px; }
  .vod-zone-bylaw { font-size: 9px; }
  .vod-designation-label { font-size: 9px; padding: 2px 8px; }
  .vod-dev-stats { gap: 6px; }
  .vod-dev-stat { padding: 6px 8px; }
  .vod-dev-stat-value { font-size: 11px; }
  .vod-dev-stat-label { font-size: 9px; }
  .vod-mm-badge { font-size: 10px; padding: 4px 8px; }

  /* ── Chips ── */
  .vod-chip { font-size: 11px !important; padding: 4px 10px !important; }

  /* ── Buttons ── */
  .vod-hover-btn { padding: 10px 16px; font-size: 13px; }
  .vod-view-btn { padding: 5px 8px; font-size: 10px; }

  /* ── Mobile layout helpers ── */
  .vod-flex-col-mobile { flex-direction: column !important; }
  .vod-mb-16 { margin-bottom: 12px; }

  /* ── Listing detail specific ── */
  .vod-ld-section .vod-card { padding: 14px; }
  .vod-ld-section .vod-zone-badge { padding: 10px 14px; min-width: 80px; }
  .vod-ld-section .vod-zone-code { font-size: 22px; }

  /* ── Zoning card 2-col → stacked on mobile ── */
  .vod-ld-zoning-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .vod-ld-zoning-left {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center;
  }

  /* ── Dev app scroll ── */
  .vod-devapp-scroll { padding: 12px 14px 16px; max-height: 260px; }
  .vod-devapp-header { padding: 16px 14px 0 !important; }

  /* ── Timeline ── */
  .vod-timeline { padding-left: 24px; }
  .vod-tl-dot { left: -24px; width: 12px; height: 12px; }
  .vod-tl-event { padding-bottom: 20px; }
  .vod-tl-header { gap: 8px; }
  .vod-tl-desc { font-size: 13px; margin-bottom: 8px; }
  .vod-tl-meta { font-size: 11px; padding: 6px 10px; gap: 10px; }

  /* ── Municipality stat grid ── */
  .vod-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .vod-grid-6 .vod-card { padding: 14px 10px !important; }
  .vod-grid-6 .vod-card-icon { margin-bottom: 10px !important; }
  .vod-grid-6 .vod-big-num { font-size: 26px !important; }
  .vod-grid-6 .vod-card-title { font-size: 10px !important; }

  /* ── Neighbourhood dogs card ── */
  .vod-marquee-container { height: 200px; }

  /* ── Circular progress ── */
  .vod-circular-progress { width: 100px; height: 100px; }
  .vod-circular-text { font-size: 20px; }

  /* ── Donut chart ── */
  .vod-donut-wrap { width: 110px; height: 110px; }

  /* ── ASCII art ── */
  .vod-ascii-art { font-size: 6px !important; opacity: 0.05; }

  /* ── Panning dot grid — reduce or hide on mobile ── */
  .vod-section::before { animation: none; width: 100%; height: 100%; }
  /* .vod-section::after removed */

  /* ── Interactive grid — hide on mobile (perf + no hover) ── */
  .vod-igrid-wrap { display: none; }
  .vod-crosshair { display: none; }
}

/* ── Small mobile (≤479px) ── */
@media (max-width: 479px) {
  .vod-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .vod-section-title { font-size: 20px; }
  .vod-big-num { font-size: 28px; }
  .vod-card { padding: 14px; }
  .vod-ld-section .vod-card { padding: 12px; }
  .vod-bar-label { width: 70px !important; font-size: 11px !important; }
  .vod-zone-badge { padding: 10px 12px; min-width: 70px; }
  .vod-zone-code { font-size: 22px; }
  .vod-chip { font-size: 10px !important; padding: 3px 8px !important; }
  .vod-card-header { margin-bottom: 12px; }
  .vod-card-icon { width: 32px; height: 32px; }
  .vod-timeline { padding-left: 20px; }
  .vod-tl-dot { left: -20px; width: 10px; height: 10px; border-width: 2px; }
}

/* ── Permit Modal ───────────────────────────── */
.vod-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: vodFadeIn 0.2s ease;
}
@keyframes vodFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.vod-modal {
  background: #fff;
  border-radius: var(--vod-rounded-16);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2);
  max-width: 960px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vodSlideModal 0.3s var(--vod-ease);
}
@keyframes vodSlideModal {
  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.vod-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--vod-border-muted);
  flex-shrink: 0;
}
.vod-modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--vod-border-muted);
  border-radius: var(--vod-rounded-8);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  color: #71717a;
}
.vod-modal-close:hover {
  background: #FCEAEA;
  border-color: #E62E2D;
  color: #E62E2D;
}
.vod-modal-body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.vod-permit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vod-permit-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.vod-permit-table th {
  background: #f9fafb;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #71717a;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--vod-border-muted);
  white-space: nowrap;
}
.vod-permit-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vod-border-muted);
  vertical-align: top;
}
.vod-permit-table tbody tr {
  transition: background 0.15s;
}
.vod-permit-table tbody tr:hover {
  background: #fafafa;
}
.vod-permit-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Scrollable Dev Apps ────────────────────── */
.vod-devapp-scroll {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.vod-devapp-scroll::-webkit-scrollbar {
  width: 4px;
}
.vod-devapp-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.vod-devapp-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.vod-devapp-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .vod-modal-overlay { padding: 8px; }
  .vod-modal {
    max-height: 92vh;
    border-radius: var(--vod-rounded-8);
  }
  .vod-modal-header { padding: 16px; }
  .vod-modal-header div:first-child .vod-section-label { font-size: 10px; }
  .vod-modal-header div:first-child > div:last-child { font-size: 16px !important; }
  .vod-modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vod-permit-table {
    font-size: 11px;
    min-width: 600px;
  }
  .vod-permit-table th, .vod-permit-table td {
    padding: 8px 8px;
  }
  .vod-permit-table th { font-size: 9px; }
}

/* ── Heritage Register Modal ─────────────────── */
.vod-heritage-controls {
  padding: 0 24px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.vod-heritage-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.vod-heritage-search-wrap::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center;
  pointer-events: none;
  z-index: 1;
}
.vod-heritage-search {
  width: 100%;
  padding: 9px 14px 9px 34px;
  border: 1px solid var(--vod-border-loud);
  border-radius: var(--vod-rounded-8);
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fafafa;
}
.vod-heritage-search:focus {
  border-color: var(--vod-amber);
  box-shadow: 0 0 0 3px rgba(236, 183, 48, 0.12);
  background: #fff;
}
.vod-heritage-search::placeholder { color: #a1a1aa; }
.vod-heritage-select {
  padding: 9px 28px 9px 12px;
  border: 1px solid var(--vod-border-loud);
  border-radius: var(--vod-rounded-8);
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  color: #1a1a1a;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.vod-heritage-select:focus { border-color: var(--vod-amber); }
.vod-heritage-count {
  font-family: 'DM Sans', monospace;
  font-size: 12px;
  color: #71717a;
  margin-left: auto;
  white-space: nowrap;
}

.vod-heritage-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--vod-border-muted);
  display: block;
  transition: transform 0.2s, box-shadow 0.2s;
  background: #f4f4f5;
  cursor: pointer;
}
.vod-heritage-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 10;
  position: relative;
}

/* Sort indicators */
.vod-sortable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  padding-right: 18px !important;
  transition: color 0.15s;
}
.vod-sortable::after {
  content: '⇅';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.3;
  transition: opacity 0.15s;
}
.vod-sortable:hover { color: var(--vod-amber); }
.vod-sortable:hover::after { opacity: 0.6; }
.vod-sort-asc::after { content: '▲'; opacity: 0.7; color: var(--vod-amber); font-size: 8px; }
.vod-sort-desc::after { content: '▼'; opacity: 0.7; color: var(--vod-amber); font-size: 8px; }

/* Row hover accent */
.vod-heritage-modal-table tbody tr {
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.vod-heritage-modal-table tbody tr:hover {
  background: #fffbeb;
  border-left-color: var(--vod-amber);
}

/* Scrollbar */
.vod-heritage-scroll::-webkit-scrollbar { width: 5px; }
.vod-heritage-scroll::-webkit-scrollbar-track { background: transparent; }
.vod-heritage-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
.vod-heritage-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.15); }

.vod-heritage-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 24px;
  border-top: 1px solid var(--vod-border-muted);
  flex-shrink: 0;
}
.vod-page-btn {
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid var(--vod-border-muted);
  border-radius: 6px;
  background: #fff;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.vod-page-btn:hover:not(:disabled):not(.vod-page-active) {
  background: #fffbeb;
  border-color: var(--vod-amber);
  color: var(--vod-amber);
}
.vod-page-btn:disabled { opacity: 0.3; cursor: default; }
.vod-page-active {
  background: var(--vod-amber);
  color: #fff;
  border-color: transparent;
}
.vod-page-ellipsis {
  padding: 4px 2px;
  font-size: 12px;
  color: #a1a1aa;
  pointer-events: none;
}
.vod-page-nav {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* Photo preview overlay */
.vod-photo-preview {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: vodFadeIn 0.15s ease;
}
.vod-photo-preview img {
  max-width: min(600px, 90vw);
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  animation: vodSlideModal 0.25s var(--vod-ease);
}
.vod-photo-preview-caption {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Heritage detail enrichment (listing detail page) */
.vod-heritage-detail-photo {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--vod-rounded-8);
  border: 1px solid var(--vod-border-muted);
  display: block;
  flex-shrink: 0;
  background: #f4f4f5;
}
.vod-heritage-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--vod-border-muted);
  position: relative;
  z-index: 5;
}
.vod-heritage-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vod-heritage-detail-label {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a1a1aa;
}
.vod-heritage-detail-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .vod-heritage-controls { padding: 0 16px 12px; gap: 8px; }
  .vod-heritage-search-wrap { min-width: 100%; }
  .vod-heritage-select { width: 100%; }
  .vod-heritage-thumb { width: 36px; height: 36px; border-radius: 4px; }
  .vod-heritage-detail-photo { max-width: 100%; }
  .vod-heritage-detail-grid { grid-template-columns: 1fr; }
  .vod-heritage-pagination { flex-wrap: wrap; padding: 8px 12px; }
  .vod-page-btn { padding: 5px 8px; font-size: 11px; min-width: 28px; }
  .vod-photo-preview img { max-width: 95vw; border-radius: 8px; }
  .vod-photo-preview-caption { font-size: 11px; padding: 6px 14px; }
}


/* Respect the OS setting — and make it a VISIBILITY guarantee, not merely an
   absence of motion. The failure being guarded against is content that never
   appears at all. */
@media (prefers-reduced-motion: reduce) {
  .vod-animate,
  .vod-bar-fill.vod-animate-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Subject Parcel (ParcelMap BC + CRD orthophoto) ──────────────
   Cadastral register: blueprint grid, monospace identifiers, and one
   high-resolution aerial carrying the measured boundary. Every figure in this
   card is Crown open data, so unlike the MLS record it renders for signed-out
   visitors and for crawlers. */
.vod-parcel-card {
  background:
    linear-gradient(rgba(43,107,132,0.045) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(43,107,132,0.045) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--vod-bg-card);
}
.vod-parcel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.vod-parcel-plan {
  font-family: 'DM Sans', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #E62E2D;
  border: 1px solid rgba(230,46,45,0.3);
  border-radius: var(--vod-rounded-4);
  padding: 4px 9px;
  white-space: nowrap;
}

.vod-parcel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--vod-border-muted);
  border: 1px solid var(--vod-border-muted);
  border-radius: var(--vod-rounded-8);
  overflow: hidden;
  margin-bottom: 18px;
}
.vod-parcel-stat {
  background: #fff;
  padding: 14px 16px;
  min-width: 0;
}
.vod-parcel-stat-label {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 7px;
}
.vod-parcel-stat-value {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1a1a;
  line-height: 1.05;
}
.vod-parcel-stat-value span {
  font-size: 13px;
  font-weight: 700;
  color: #71717a;
  letter-spacing: 0;
}
.vod-parcel-stat-sm { font-size: 15px; letter-spacing: -0.01em; line-height: 1.25; }
.vod-parcel-pid { font-family: 'DM Sans', monospace; font-size: 14px; }
.vod-parcel-irregular { color: #71717a; }
.vod-parcel-stat-sub {
  font-size: 11px;
  color: #71717a;
  margin-top: 6px;
  line-height: 1.4;
}

.vod-parcel-aerial {
  position: relative;
  width: 100%;
  border-radius: var(--vod-rounded-16);
  overflow: hidden;
  background: #14181b;
  box-shadow: var(--vod-shadow-card);
}
.vod-parcel-aerial-flat { aspect-ratio: 640 / 420; }
.vod-parcel-aerial-flat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vod-parcel-tiles { position: absolute; inset: 0; }
/* The worker already oversizes each tile by 1px so the seams overlap — do not
   add a transform here, it would shift tiles off register from their centres. */
.vod-parcel-tiles img {
  position: absolute;
  display: block;
}
.vod-parcel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vod-parcel-fill { fill: rgba(230,46,45,0.16); stroke: none; }
.vod-parcel-halo { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 7; stroke-linejoin: round; }
.vod-parcel-stroke { fill: none; stroke: #E62E2D; stroke-width: 3; stroke-linejoin: round; }
.vod-parcel-vertex { fill: #fff; stroke: #E62E2D; stroke-width: 2; }
.vod-parcel-chip { fill: rgba(17,17,17,0.82); }
.vod-parcel-chip-text {
  fill: #fff;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.01em;
}
.vod-parcel-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: 'DM Sans', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.45);
  border-radius: var(--vod-rounded-4);
  padding: 4px 8px;
  pointer-events: none;
}
.vod-parcel-foot {
  font-size: 11px;
  color: #71717a;
  line-height: 1.5;
  margin-top: 12px;
}
.vod-parcel-foot strong { color: #52525b; font-weight: 700; }

@media (max-width: 767px) {
  .vod-parcel-stats { grid-template-columns: repeat(2, 1fr); }
  .vod-parcel-stat { padding: 12px 13px; }
  .vod-parcel-stat-value { font-size: 21px; }
  .vod-parcel-chip-g { transform-box: fill-box; transform-origin: center; transform: scale(1.7); }
  .vod-parcel-halo { stroke-width: 8; }
  .vod-parcel-stroke { stroke-width: 3.5; }
}