/* ===== BuyWise Home — Custom Styles ===== */

/* PrimarySourceLink component tokens (accent = EPA, warning = FEMA, neutral = other).
   Light source badges tinted with the BuyWise green (#4a635d); retheme here in one place. */
:root {
  --ps-border-accent:  rgba(74,99,93,0.32);  --ps-bg-accent:  #e6efea;  --ps-text-accent:  #3e5751;  --ps-fill-accent:  #4a635d;
  --ps-border-warning: #e2c583;              --ps-bg-warning: #faf1de;  --ps-text-warning: #8a6a1c;  --ps-fill-warning: #b8860b;
  --ps-border:         rgba(74,99,93,0.22);
  --ps-surface-1:      #eef3f1;
  --ps-text-secondary: #5c6d68;
  --ps-text-primary:   #2f4640;
}
.primary-source-link { transition: filter .15s ease, transform .15s ease; }
.primary-source-link:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ===== Header property switcher ===== */
.property-switcher {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-weight: 600; font-size: inherit;
  color: #6B8E23; background: transparent; border: none; cursor: pointer;
  padding: 0 20px 0 0; margin: 0; outline: none; max-width: 320px;
  text-overflow: ellipsis;
  background-image: 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='%236B8E23' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.property-switcher:hover { color: #5a7a1d; }
.property-switcher:focus-visible { outline: 2px solid #6B8E23; outline-offset: 3px; border-radius: 3px; }
.property-switcher option { color: #1d2622; font-weight: 500; }

/* ===== Prompt inspector (internal / debug — flag-gated in app.js) ===== */
.bw-pi-host { position: relative; }
.bw-pi-btn {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  display: inline-flex; align-items: center; gap: 3px;
  font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px 2px 6px; border-radius: 999px; cursor: pointer;
  color: #7a560c; background: #f6ecd5; border: 1px solid #d9b866;
  opacity: .55; transition: opacity .12s, transform .12s;
}
.bw-pi-host:hover .bw-pi-btn { opacity: 1; }
.bw-pi-btn:hover { transform: translateY(-1px); }
.bw-pi-btn .material-symbols-outlined { line-height: 1; }

.bw-pi-scrim {
  position: fixed; inset: 0; background: rgba(10,14,12,.46); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90;
}
.bw-pi-scrim.open { opacity: 1; pointer-events: auto; }
.bw-pi-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw);
  background: #fff; border-left: 1px solid #e2e8e5; box-shadow: -16px 0 40px rgba(0,0,0,.22);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  z-index: 91; display: flex; flex-direction: column;
}
.bw-pi-drawer.open { transform: translateX(0); }
.bw-pi-head { padding: 20px 22px 16px; border-bottom: 1px solid #e6ebe8; position: relative; flex: none; }
.bw-pi-tag {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; background: #f6ecd5; color: #7a560c;
  padding: 3px 9px; border-radius: 6px;
}
.bw-pi-head h3 { margin: 11px 0 3px; font-size: 19px; color: #1d2622; font-weight: 700; }
.bw-pi-sub { margin: 0; font-size: 12px; color: #5d6a63; font-family: ui-monospace, Menlo, monospace; }
.bw-pi-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid #e2e8e5; background: #f1f4f2; color: #5d6a63; cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.bw-pi-close:hover { color: #1d2622; }
.bw-pi-body { padding: 18px 22px 40px; overflow-y: auto; flex: 1; }
.bw-pi-sec { margin-bottom: 22px; }
.bw-pi-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #8a958d; margin-bottom: 9px;
}
.bw-pi-prompt {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; color: #1d2622; background: #f1f4f2; border: 1px solid #e2e8e5;
  border-left: 3px solid #c79a3a; border-radius: 8px; padding: 14px 15px; margin: 0; overflow-x: auto;
}
.bw-pi-io { display: flex; flex-direction: column; gap: 7px; }
.bw-pi-ioitem { display: flex; gap: 9px; font-size: 13px; color: #5d6a63; align-items: baseline; }
.bw-pi-k {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; flex: none;
  padding: 1px 7px; border-radius: 5px;
}
.bw-pi-ioitem.in .bw-pi-k { color: #1d4c70; background: #e0edf6; }
.bw-pi-ioitem.out .bw-pi-k { color: #7a560c; background: #f6ecd5; }

/* Topographic background pattern */
.topographic-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100C150 150 250 50 400 100S650 150 800 100' stroke='%23abb3b7' fill='none' opacity='0.08' stroke-width='1'/%3E%3Cpath d='M0 200C100 250 300 150 450 200S700 250 800 200' stroke='%23abb3b7' fill='none' opacity='0.08' stroke-width='1'/%3E%3Cpath d='M0 300C200 350 350 250 500 300S750 350 800 300' stroke='%23abb3b7' fill='none' opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
}

/* Dot-grid topo pattern */
.topo-dots {
  background-image: radial-gradient(circle at 2px 2px, rgba(77, 97, 80, 0.05) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Material Symbols baseline */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Navigation group headers */
.nav-group-header {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #737c7f;
  padding: 0.75rem 0.75rem 0.25rem;
  margin-top: 0.25rem;
  user-select: none;
}

/* Noise layer card active state */
.noise-card-active {
  border-color: rgb(74 99 93 / 0.5) !important;
  background-color: rgb(74 99 93 / 0.05) !important;
  box-shadow: 0 0 0 2px rgb(74 99 93 / 0.12) !important;
}

/* Navigation states */
/* Base state matches .nav-inactive so links look correct before app.js runs
   (which applies nav-active/nav-inactive) — avoids a color flash on load. */
.nav-link {
  color: #475569;
  border-radius: 0.5rem;
}
.nav-active {
  background: #ffffff;
  color: #6B8E23 !important;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nav-inactive {
  color: #475569;
}
.nav-inactive:hover {
  background: #e8edf0;
}

.nav-icon {
  color: #64748b;
  transition: color 0.18s ease;
}

.nav-link:hover .nav-icon,
.nav-link.nav-active .nav-icon {
  color: #6B8E23;
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #94a3b8;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.nav-link:hover .nav-dot {
  background: #4a635d;
}

.nav-link.nav-active .nav-dot {
  background: #4a635d;
  box-shadow: 0 0 0 3px rgba(74, 99, 93, 0.14);
}

.sidebar-aux-link .nav-dot {
  background: #94a3b8;
}

.sidebar-aux-link:hover .nav-dot {
  background: #4a635d;
}

.nav-sublist {
  margin: 0.25rem 0 0.5rem 2rem;
  border-left: 1px solid #cfd8dd;
  padding-left: 0.5rem;
}

.subnav-link {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.28rem 0.5rem;
  border-radius: 0.5rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.18s ease;
}

.subnav-link:hover {
  background: #e9eff2;
  color: #4a635d;
}

.subnav-link.active {
  background: #ffffff;
  color: #4a635d;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Chart line animation */
.line-chart-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s ease-out forwards;
}
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

/* Glass panel effect */
.glass-panel {
  background: rgba(248, 249, 250, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Map placeholder styling */
.map-placeholder {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: #64748b;
  border: 2px dashed #94a3b8;
  border-radius: 0.75rem;
}
.map-placeholder .material-symbols-outlined {
  font-size: 3rem;
  opacity: 0.4;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Selection color */
::selection {
  background: #cde8e1;
  color: #3e5751;
}

/* Section header blocks (AI intro text, source pills, watch items) — hidden globally */
[data-gen="headers"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / tablet navigation drawer (< lg = 1024px)
   Desktop (≥ lg) keeps the static sidebar; nothing below changes it.
   ═══════════════════════════════════════════════════════════════════════ */

/* Toggle button + scrim are desktop-hidden by default */
.drawer-toggle-btn { display: none; }
#drawer-scrim { display: none; }

@media (max-width: 1023.98px) {
  /* Show the hamburger only on narrow viewports */
  .drawer-toggle-btn { display: inline-flex; }

  /* Off-canvas by default, slides in when open */
  #app-drawer {
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: none;
    z-index: 95;
  }
  #app-drawer.is-open {
    transform: translateX(0);
    box-shadow: 0 16px 48px rgba(10, 14, 12, .32);
  }

  /* Dimmed backdrop below the header */
  #drawer-scrim {
    display: block;
    position: fixed;
    inset: 3.5rem 0 0 0;
    background: rgba(10, 14, 12, .46);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 94;
  }
  #drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Guarantee desktop layout is untouched at ≥ lg */
@media (min-width: 1024px) {
  #app-drawer { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════   Ask BuyWise — floating assistant (UI only; Gemini wiring comes later)
   ═══════════════════════════════════════════════════════════════════════ */

/* Floating action button — bottom-right, brand gradient */
.bw-ask-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0; border: none; cursor: pointer;
  border-radius: 9999px; overflow: hidden;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
  color: #e2fef6; box-shadow: 0 8px 24px rgba(31, 46, 42, .28), 0 2px 6px rgba(31, 46, 42, .18);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, width .24s cubic-bezier(.4,0,.2,1);
  width: 56px;
}
.bw-ask-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31, 46, 42, .34), 0 3px 8px rgba(31, 46, 42, .22); }
.bw-ask-fab:active { transform: translateY(0); }
.bw-ask-fab:focus-visible { outline: 2px solid #6B8E23; outline-offset: 3px; }
.bw-ask-fab .bw-ask-fab-icon {
  flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
}
.bw-ask-fab .bw-ask-fab-icon .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 500; }
.bw-ask-fab .bw-ask-fab-label {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden; transition: max-width .24s cubic-bezier(.4,0,.2,1), opacity .18s, padding .24s;
  padding-right: 0;
}
/* Expand to a pill on hover/focus (desktop pointer only) */
@media (hover: hover) {
  .bw-ask-fab:hover { width: auto; }
  .bw-ask-fab:hover .bw-ask-fab-label { max-width: 160px; opacity: 1; padding-right: 22px; }
}
.bw-ask-fab.bw-hidden { transform: translateY(120%) scale(.8); opacity: 0; pointer-events: none; }

/* Soft attention pulse ring (settles after first paint) */
.bw-ask-fab::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  box-shadow: 0 0 0 0 rgba(74, 99, 93, .45); animation: bw-ask-pulse 2.6s ease-out 3;
}
@keyframes bw-ask-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 99, 93, .40); }
  70%  { box-shadow: 0 0 0 16px rgba(74, 99, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 99, 93, 0); }
}

/* Chat panel */
.bw-ask-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 82;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border: 1px solid #dbe4e7; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 32, 28, .28), 0 6px 16px rgba(20, 32, 28, .16);
  transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none;
  transform-origin: bottom right; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.bw-ask-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* Panel header — brand gradient */
.bw-ask-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 16px 18px; color: #e2fef6;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
}
.bw-ask-head-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
}
.bw-ask-head-avatar .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; }
.bw-ask-head-text { flex: 1; min-width: 0; }
.bw-ask-head-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.2; }
.bw-ask-head-sub {
  font-size: 11.5px; opacity: .8; margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bw-ask-head-close {
  flex: none; width: 32px; height: 32px; border-radius: 9px; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #e2fef6; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.bw-ask-head-close:hover { background: rgba(255,255,255,.24); }

/* Message stream */
.bw-ask-body {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px;
  background: #f8f9fa;
  background-image: radial-gradient(circle at 2px 2px, rgba(77, 97, 80, 0.045) 1px, transparent 0);
  background-size: 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.bw-ask-msg { display: flex; gap: 9px; align-items: flex-end; max-width: 88%; }
.bw-ask-msg-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 8px; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center;
  background: #cde8e1; color: #3e5751;
}
.bw-ask-msg-avatar .material-symbols-outlined { font-size: 16px; font-variation-settings: 'FILL' 1; }
.bw-ask-bubble {
  font-size: 13.5px; line-height: 1.5; padding: 10px 13px; border-radius: 14px;
  color: #2b3437; background: #ffffff; border: 1px solid #e3e9ec;
  border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(20,32,28,.05);
}
.bw-ask-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.bw-ask-msg.user .bw-ask-bubble {
  color: #e2fef6; background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
  border: none; border-radius: 14px; border-bottom-right-radius: 4px;
}

/* Rendered-markdown spacing inside assistant bubbles */
.bw-ask-bubble p { margin: 0 0 8px; }
.bw-ask-bubble p:last-child { margin-bottom: 0; }
.bw-ask-bubble strong { font-weight: 700; color: #1d2622; }
.bw-ask-msg.user .bw-ask-bubble strong { color: #ffffff; }
.bw-ask-bubble code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: #eef3f1; color: #3e5751; padding: 1px 5px; border-radius: 5px;
}
.bw-ask-ul { margin: 4px 0 8px; padding-left: 18px; }
.bw-ask-ul:last-child { margin-bottom: 0; }
.bw-ask-ul li { margin: 3px 0; }

/* Inline API-key prompt (shown only when no credentials are available) */
.bw-ask-keyrow { display: flex; gap: 6px; margin-top: 10px; }
.bw-ask-keyinput {
  flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 12.5px;
  padding: 7px 10px; border: 1px solid #cde8e1; border-radius: 9px;
  background: #f8f9fa; color: #2b3437; outline: none;
}
.bw-ask-keyinput:focus { border-color: #4a635d; box-shadow: 0 0 0 3px rgba(74,99,93,.12); }
.bw-ask-keysave {
  flex: none; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border: none; border-radius: 9px; color: #e2fef6;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
}
.bw-ask-keysave:hover { filter: brightness(1.08); }

/* Suggestion chips */
.bw-ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px 35px; }
.bw-ask-chip {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 9999px; color: #3f5751;
  background: #ffffff; border: 1px solid #cde8e1; transition: background .14s, border-color .14s, transform .14s;
  display: inline-flex; align-items: center; gap: 6px;
}
.bw-ask-chip:hover { background: #eef5f2; border-color: #4a635d; transform: translateY(-1px); }
.bw-ask-chip .material-symbols-outlined { font-size: 15px; opacity: .8; }

/* Free report: upgrade button inside the locked-chat message */
.bw-ask-upgrade {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border: none; border-radius: 9999px; color: #e2fef6;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
}
.bw-ask-upgrade:hover { filter: brightness(1.08); }
.bw-ask-upgrade .material-symbols-outlined { font-size: 16px; }
.bw-ask-input:disabled { cursor: not-allowed; }

/* Typing indicator */
.bw-ask-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.bw-ask-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #9db0aa;
  animation: bw-ask-blink 1.2s infinite ease-in-out both;
}
.bw-ask-typing span:nth-child(2) { animation-delay: .18s; }
.bw-ask-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes bw-ask-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Composer */
.bw-ask-foot { flex: none; padding: 12px 12px 14px; background: #ffffff; border-top: 1px solid #e3e9ec; }
.bw-ask-inputwrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: #f1f4f6; border: 1px solid #dbe4e7; border-radius: 16px; padding: 6px 6px 6px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.bw-ask-inputwrap:focus-within { border-color: #4a635d; box-shadow: 0 0 0 3px rgba(74,99,93,.12); }
.bw-ask-input {
  flex: 1; border: none; background: transparent; resize: none; outline: none;
  font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: #2b3437;
  max-height: 120px; padding: 6px 0; min-height: 22px;
}
.bw-ask-input::placeholder { color: #8a958d; }
.bw-ask-send {
  flex: none; width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%); color: #e2fef6;
  display: flex; align-items: center; justify-content: center; transition: opacity .15s, transform .15s;
}
.bw-ask-send:hover { transform: translateY(-1px); }
.bw-ask-send:disabled { opacity: .4; cursor: default; transform: none; }
.bw-ask-send .material-symbols-outlined { font-size: 20px; }
.bw-ask-disclaimer { font-size: 10.5px; color: #8a958d; text-align: center; margin-top: 8px; }

/* Mobile: full-width sheet */
@media (max-width: 520px) {
  .bw-ask-panel {
    right: 8px; left: 8px; bottom: 8px; width: auto;
    height: min(78vh, calc(100vh - 16px));
  }
  .bw-ask-fab { right: 16px; bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   $/sqft distribution chart — click-to-inspect detail card
   ═══════════════════════════════════════════════════════════════════════ */
#ppsf-card {
  position: absolute; z-index: 20; width: 232px; max-width: calc(100% - 8px);
  background: #ffffff; border: 1px solid #dbe4e7; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 32, 28, .18), 0 3px 8px rgba(20, 32, 28, .10);
  padding: 12px 14px 13px; font-family: 'Inter', sans-serif;
}
#ppsf-card.hidden { display: none; }
.ppsf-card-close {
  position: absolute; top: 6px; right: 8px; border: none; background: transparent;
  color: #8a958d; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px;
}
.ppsf-card-close:hover { color: #2b3437; }
.ppsf-card-addr { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 13.5px; color: #1d2622; padding-right: 16px; line-height: 1.25; }
.ppsf-card-figs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.ppsf-card-price { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; color: #3f5751; }
.ppsf-card-ppsf { font-size: 12px; font-weight: 700; color: #4a635d; background: #eef5f2; padding: 2px 8px; border-radius: 9999px; }
.ppsf-card-status { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #586064; background: #eaeff1; padding: 3px 7px; border-radius: 5px; }
.ppsf-card-status--active { color: #8a5a0c; background: #faf1de; }
.ppsf-card-details { font-size: 11.5px; color: #586064; margin-top: 7px; }
.ppsf-card-meta { font-size: 11px; color: #8a958d; margin-top: 4px; }
.ppsf-card-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 11px;
  font-size: 12px; font-weight: 700; color: #4a635d; text-decoration: none;
  border: 1px solid #cde8e1; border-radius: 9px; padding: 6px 11px; transition: background .14s;
}
.ppsf-card-link:hover { background: #eef5f2; }
.ppsf-card-link .material-symbols-outlined { line-height: 1; }

/* ── Freemium premium gate ──────────────────────────────────────── */
.bw-locked { position: relative; }
.bw-locked-content {
  filter: blur(7px) saturate(.85);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  transform: scale(1.01);      /* hide blur bleed at edges */
  transition: filter .2s ease;
}
/* Cap a long section's blurred area, but keep a floor so the gate card always
   fits even when a section's teaser content is short (e.g. Property Records). */
.bw-locked {
  min-height: 560px;
  max-height: 78vh;
  overflow: hidden;
}
.bw-premium-gate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(247,249,248,.28) 0%, rgba(247,249,248,.72) 55%, rgba(247,249,248,.92) 100%);
  z-index: 5;
}
.bw-gate-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8e5;
  border-radius: 18px;
  padding: 34px 30px 28px;
  box-shadow: 0 18px 50px rgba(20, 40, 30, .18);
}
.bw-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7a560c;
  background: #f6ecd5;
  border: 1px solid #e6cf9a;
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.bw-gate-badge .material-symbols-outlined { font-size: 15px; line-height: 1; }
.bw-gate-title {
  font-size: 22px;
  font-weight: 800;
  color: #1d2622;
  margin: 0 0 8px;
  line-height: 1.2;
}
.bw-gate-sub {
  font-size: 14px;
  line-height: 1.55;
  color: #5d6a63;
  margin: 0 auto 22px;
  max-width: 360px;
}
.bw-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: #6B8E23;
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(107, 142, 35, .32);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.bw-gate-btn:hover { background: #5c7a1e; box-shadow: 0 8px 22px rgba(107, 142, 35, .42); }
.bw-gate-btn:active { transform: translateY(1px); }
.bw-gate-btn .material-symbols-outlined { font-size: 19px; line-height: 1; }
.bw-gate-foot {
  font-size: 12px;
  color: #94a3a0;
  margin: 16px 0 0;
  font-weight: 600;
}
a.bw-gate-btn { text-decoration: none; }

/* "Payment canceled" after backing out of the upgrade's checkout. */
.bw-upgrade-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border-radius: 12px;
  background: #1d2622;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(20, 40, 30, .25);
  transition: opacity .3s ease-out, transform .3s ease-out;
  @starting-style { opacity: 0; transform: translate(-50%, 8px); }
}
.bw-upgrade-notice .material-symbols-outlined { font-size: 18px; }
.bw-upgrade-notice-out { opacity: 0; transform: translate(-50%, 8px); }

/* ═══════════════════════════════════════════════════════════════════════════
   PDF download — progress dialog
   The PDF is rendered on demand (POST /api/pdf), not at build time, so the
   reader waits 20-40s while the maps are redrawn as static images. That is
   long enough that a spinner alone reads as a hang, hence the named stages.
   ═══════════════════════════════════════════════════════════════════════ */
.bw-pdf-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 15, 16, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.bw-pdf-scrim.open { opacity: 1; pointer-events: auto; }

.bw-pdf-dialog {
  position: fixed; z-index: 91;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(30rem, calc(100vw - 2rem));
  background: #ffffff;
  border: 1px solid rgba(171, 179, 183, 0.4);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(12, 15, 16, 0.22);
  padding: 26px 26px 22px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.bw-pdf-dialog.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.bw-pdf-head { display: flex; align-items: flex-start; gap: 13px; }
.bw-pdf-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ps-bg-accent, #e6efea);
  color: #4a635d;
}
.bw-pdf-title {
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.05rem;
  color: #2b3437; letter-spacing: -0.01em;
}
.bw-pdf-sub { font-size: 0.8rem; color: #586064; margin-top: 3px; line-height: 1.45; }
.bw-pdf-close {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: #737c7f; padding: 2px; border-radius: 999px; line-height: 0;
}
.bw-pdf-close:hover { background: #eaeff1; color: #2b3437; }

.bw-pdf-track {
  height: 6px; border-radius: 999px; background: #e3e9ec;
  overflow: hidden; margin: 20px 0 9px;
}
.bw-pdf-bar {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #4a635d, #6B8E23);
  transition: width 0.4s ease;
}
/* Before the first stage lands there is no percentage to show, so the bar
   sweeps instead of sitting empty. */
.bw-pdf-bar.indeterminate {
  width: 35%;
  animation: bw-pdf-sweep 1.3s ease-in-out infinite;
}
@keyframes bw-pdf-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

.bw-pdf-status {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 0.78rem; color: #586064;
}
.bw-pdf-step { font-weight: 600; color: #2b3437; }
.bw-pdf-elapsed { font-variant-numeric: tabular-nums; color: #737c7f; }

.bw-pdf-note {
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid rgba(171, 179, 183, 0.35);
  font-size: 0.72rem; color: #737c7f; line-height: 1.5;
}

.bw-pdf-actions { display: flex; gap: 9px; margin-top: 18px; }
.bw-pdf-action {
  flex: 1; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.bw-pdf-action-primary { background: #4a635d; color: #e2fef6; }
.bw-pdf-action-primary:hover { opacity: 0.9; }
.bw-pdf-action-ghost {
  background: #f1f4f6; color: #2b3437;
  border: 1px solid rgba(171, 179, 183, 0.45);
}
.bw-pdf-action-ghost:hover { background: #e3e9ec; }

.bw-pdf-error {
  margin-top: 15px; padding: 11px 13px;
  background: #fff7f6; border: 1px solid #fe8983; border-radius: 10px;
  font-size: 0.76rem; color: #752121; line-height: 1.5;
}
.bw-pdf-error pre {
  margin-top: 7px; max-height: 8rem; overflow: auto;
  font-size: 0.66rem; white-space: pre-wrap; color: #9f403d;
}

/* Upload retention notices describe the hosted service (app.js LOCAL_JOBS). */
.bw-local-jobs .bw-retention-note { display: none; }

/* No report yet (building, awaiting payment, not found): the menu and Ask
   BuyWise wait for it, rather than opening empty templates. */
.bw-no-report .nav-link,
.bw-no-report .subnav-link { opacity: .45; pointer-events: none; }
.bw-no-report #bw-ask-fab,
.bw-no-report #bw-pdf-btn,
.bw-no-report #bw-ask-panel { display: none !important; }

/* ── Upgrade call to action, free reports only (app.js syncPlanChrome) ─────
   Settings and Support give way to a lock on each paid section in the nav
   and a quiet banner at the top of each open section. The banner sits in
   the page's own neutral surface so it reads as part of the report, not an
   ad; only the button carries the brand green. */
body.bw-freemium .sidebar-aux-link { display: none; }
body.bw-freemium .nav-link.bw-nav-locked::after {
  content: 'lock';
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  margin-left: auto;
  color: #9aa5a1;
}

.bw-cta-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(15, 23, 42, .07);
  background: #f1f4f2;
  border-radius: 14px;
}
.bw-cta-banner > .material-symbols-outlined { font-size: 19px; color: #7d8a85; flex: none; }
.bw-cta-banner p { margin: 0; flex: 1; font-size: 13px; line-height: 1.45; color: #5d6a63; }
.bw-cta-banner p strong { color: #2b3437; font-weight: 700; }
.bw-cta-banner button {
  flex: none;
  border: 1px solid rgba(107, 142, 35, .35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #4f6b17;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .16s ease-out;
}
.bw-cta-banner button:hover { background: #f3f7ea; border-color: rgba(107, 142, 35, .55); }
.bw-cta-banner button:active { transform: scale(0.97); }
@media (max-width: 640px) {
  .bw-cta-banner { flex-wrap: wrap; }
  .bw-cta-banner button { width: 100%; }
}

/* Overview panel facts. At xl the panel is a fixed height and as narrow as
   ~330px, where four icon+label pairs do not fit on the one line they have,
   so they become plain text separated by dots. */
@media (min-width: 1280px) {
  .bw-facts { column-gap: 0; }
  .bw-facts > span > .material-symbols-outlined { display: none; }
  .bw-facts > span + span::before { content: '\00b7'; margin: 0 7px; color: rgba(255, 255, 255, .5); }
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   The report column is a flex item, and a flex item will not shrink below its
   widest child: one wide table or row made every section wider than a phone,
   cut off on the right (214 Cordova at 375px, 2026-10-28). With min-width 0
   the column keeps the screen's width, and the wide pieces scroll inside their
   own overflow-x wrappers instead. */
main { min-width: 0; }

/* A source chip shrinks with its row; a long name ends in an ellipsis rather
   than pushing the card wider. */
.primary-source-link { max-width: 100%; }
.primary-source-link > span:last-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A 12-column grid stacks to one column below lg; its 11 column gaps alone
   (Schools: gap-8) were wider than a phone. */
@media (max-width: 1023.98px) {
  .grid.grid-cols-12 { column-gap: 0; }
}

/* Phone density: page and card padding of 24px each left about 280px for
   content on a 375px phone; 16px and 18px give it back. Card header rows wrap
   so a title and its source chip never push past the card (Flood Risk). The
   header's search box gives way to the floating Ask button. */
@media (max-width: 640px) {
  main.p-6 { padding: 16px; }
  #section-container .p-6 { padding: 1.125rem; }
  #section-container .px-6 { padding-left: 1.125rem; padding-right: 1.125rem; }
  #section-container .flex.items-center.px-6 { flex-wrap: wrap; row-gap: 6px; }
  header .bw-head-search { display: none; }
  .bw-cr-paper { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* The address beside the logo (md and up) is cut with an ellipsis rather than
   pushing the header's buttons off a tablet's screen. */
#nav-property-address { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Below lg the header has no room for it; the report's title carries it. */
@media (max-width: 1023.98px) { header nav { display: none !important; } }

/* Document cards in reports built before 2026-10-28 carry their HTML with
   them (src/doc_extractor.py renders it into the report). The same wrapping as
   the current renderer, by class, so those reports fit a phone too. */
#doc-results .flex.items-center.gap-3.px-5 { flex-wrap: wrap; row-gap: 4px; }
#doc-results .flex.items-center.gap-3.px-5 > span.text-xs { min-width: 0; overflow-wrap: anywhere; }
#doc-results .flex.items-start.justify-between.gap-3 { flex-wrap: wrap; row-gap: 4px; }
#doc-results .flex.items-start.justify-between.gap-3 > p:first-child { flex: 1 1 11rem; min-width: 0; }

/* Phone-only and wider-screen-only blocks (Local Appreciation's growth table
   is a table above 640px and one card per period below). */
.bw-phone-only { display: none; }
@media (max-width: 640px) {
  .bw-phone-only { display: block; }
  .bw-desk-only { display: none; }
}
.bw-growth-card { padding: 12px 0; border-top: 1px solid hsla(200, 8%, 69%, .2); }
.bw-growth-card:first-child { border-top: 0; padding-top: 0; }
.bw-growth-card p { margin: 0 0 4px; }
.bw-growth-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.bw-growth-row b { font-variant-numeric: tabular-nums; }