/* gen6-cma.css: mini-CMA result layer for /home-value/ (wave2 CMA).
   Scoped under .gen6-cma so nothing leaks onto the rest of the page. */
.gen6-cma { margin: 0 0 1.5rem; }
.gen6-cma[hidden] { display: none; }

/* Subject facts strip */
.gen6-cma-subject { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 1.25rem 0 0.25rem; padding: 0; }
.gen6-cma-subject > div { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.88rem; }
.gen6-cma-subject dt { font-weight: 600; color: var(--ink-900, #1b2d4f); }
.gen6-cma-subject dd { margin: 0; color: var(--text, #33465f); }

/* Print-only short why summary: hidden on screen, shown in print */
.gen6-cma-printonly-inline { display: none; }
/* Legal line + confidence one-liner (the page header carries the tag) */
.gen6-cma-legal { font-size: 0.85rem; color: var(--text-soft, #5b7288); margin: 1rem 0 0; }
.gen6-cma-confline { font-size: 0.85rem; color: var(--text, #33465f); margin: 0.6rem 0 0; }
.gen6-cma-context-top { margin-top: 1.25rem; padding-top: 1.25rem; }
/* Print-only footer: hidden on screen, shown in print/PDF */
.gen6-cma-printonly { display: none; }

/* Blocks */
.gen6-cma-block { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--sand-200, #dde6ef); }
.gen6-cma-block h3 { font-family: var(--font-heading, Georgia, serif); font-size: 1.35rem; color: var(--ink-900, #1b2d4f); margin: 0 0 0.3rem; }
.gen6-cma-sub { font-size: 0.87rem; color: var(--text-soft, #5b7288); margin: 0 0 0.9rem; }
.gen6-cma-textsum { font-size: 0.85rem; color: var(--text-soft, #5b7288); margin: 0.6rem 0 0; }
#gen6-cma-waterfall svg, #gen6-cma-scatter svg, #gen6-cma-trend svg { display: block; width: 100%; height: auto; }
.gen6-cma-axis { font-size: 10px; fill: #5b7288; }
.gen6-cma-grid { stroke: #dde6ef; stroke-width: 1; }
.gen6-cma-legend { font-size: 11px; fill: #33465f; }
.gen6-cma-pt { cursor: pointer; }
.gen6-cma-pt:focus { outline: 2px solid var(--sky-500, #4a7fa5); outline-offset: 2px; }
.gen6-cma-tip { min-height: 1.5em; font-size: 0.85rem; color: var(--ink-900, #1b2d4f); margin-top: 0.4rem; }

/* Tabs + table */
.gen6-cma-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.gen6-cma-tabs [role="tab"] { min-height: 44px; padding: 0.5rem 1.2rem; border-radius: 999px; border: 1px solid var(--sand-200, #dde6ef); background: #fff; font-size: 0.88rem; font-weight: 600; color: var(--ink-900, #1b2d4f); cursor: pointer; }
.gen6-cma-tabs [role="tab"][aria-selected="true"] { background: var(--ink-900, #1b2d4f); border-color: var(--ink-900, #1b2d4f); color: #fff; }
.gen6-cma-tablewrap { overflow-x: auto; }
.gen6-cma-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 560px; }
.gen6-cma-table th, .gen6-cma-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--sand-200, #dde6ef); vertical-align: top; }
.gen6-cma-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft, #5b7288); }
.gen6-cma-table td.num, .gen6-cma-table th.num { text-align: right; white-space: nowrap; }
.gen6-cma-table a { color: var(--sky-500, #2b80bb); }
.gen6-cma-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--sky-200, #d2e4f5); color: var(--sky-700, #3d6e8f); }
.gen6-cma-pill.is-water { background: rgba(22, 156, 97, 0.12); color: #137a4c; }
.gen6-cma-pill.is-pool { background: rgba(198, 166, 103, 0.16); color: #7a5f27; }

/* Map */
#gen6-cma-map { height: 340px; border-radius: 10px; border: 1px solid var(--sand-200, #dde6ef); background: var(--foam-100, #f0f4f8); z-index: 0; }
#gen6-cma-map .leaflet-container { font-family: inherit; }

/* Context + market cards */
.gen6-cma-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.gen6-cma-card { padding: 0.85rem 1rem; border: 1px solid var(--sand-200, #dde6ef); border-radius: 10px; background: #fff; }
.gen6-cma-card-k { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft, #5b7288); margin-bottom: 0.25rem; }
.gen6-cma-card-v { font-size: 0.95rem; font-weight: 600; color: var(--ink-900, #1b2d4f); }
.gen6-cma-card-s { display: block; font-size: 0.8rem; font-weight: 400; color: var(--text-soft, #5b7288); margin-top: 0.2rem; }

/* Next steps */
.gen6-cma-next { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--sand-200, #dde6ef); }
.gen6-cma-next .gen6-cma-sub { flex: 1 1 100%; margin: 0; }

@media (max-width: 640px) {
    #gen6-cma-map { height: 280px; }
    .gen6-cma-tabs [role="tab"] { flex: 1 1 auto; padding: 0.5rem 0.6rem; }
}

/* Print: a tight 1-2 page report. Only the result + CMA sections print:
   hero, marketing sections, lead capture, header/footer, photo cards
   (the tabs table carries the same data) and the map stay on screen. */
@media print {
    body #gen6-cma-why svg, body #gen6-cma-scatter svg, body .gen6-cma-table { break-inside: avoid; }
    body .g6-header, body .g6-footer, body .g6-drawer, body #masthead, body #colophon,
    body .g6ph, body .g6ph-review, body #why-different, body #how-it-works, body #what-you-get, body #pathways, body #faq,
    body .lux-lead-capture, body .hv-instant-bar, body .hv-instant-status,
    body .sell-hero-actions, body .sell-hero-proof, body .hv-refine, body .hv-portal-hook,
    body #hv-state-insufficient, body #hv-state-error,
    body #gen6-cma-map-sec, body .gen6-cma-next, body .gen6-cma-tip,
    body #hv-evidence, body #hv-comps, body #hv-comps-heading, body #hv-bucket-line,
    body .hv-comp-grid, body .hv-comp-pool-label,
    body #gen6-cma-trend-sec, body #gen6-cma-market-sec,
    body #gen6-cma-why-sum, body .hv-range-wrap, body #hv-confidence-tag
    { display: none !important; }
    body .gen6-cma-printonly-inline { display: block !important; font-size: 0.78rem !important; margin: 0.4rem 0 0 !important; }
    /* Condensed print report: charts capped, spacing tightened. Trend and
       market charts stay on screen; their one-line summaries still print. */
    body .gen6-cma-block { margin: 1rem 0 0 !important; padding-top: 0.8rem !important; }
    body .gen6-cma-block h3 { font-size: 1.1rem !important; margin-bottom: 0.2rem !important; }
    body .gen6-cma-sub, body .gen6-cma-textsum { font-size: 0.78rem !important; margin: 0.4rem 0 0 !important; }
    body #gen6-cma-waterfall svg, body #gen6-cma-scatter svg { max-height: 2.6in !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; }
    body .gen6-cma-legal, body .gen6-cma-confline { font-size: 0.78rem !important; }
    body .gen6-cma-cards { gap: 0.45rem !important; }
    body .gen6-cma-card { padding: 0.5rem 0.65rem !important; }
    body .gen6-cma-card-v { font-size: 0.85rem !important; }
    body .gen6-cma-tabs { display: none !important; }
    body .gen6-cma-table { font-size: 0.76rem !important; }
    body .gen6-cma-table th, body .gen6-cma-table td { padding: 0.3rem 0.4rem !important; }
    body .hv-point, body .hv-range-big { font-size: 1.9rem !important; }
    body #hv-state-ok > h2 { font-size: 1.35rem !important; margin-bottom: 0.2rem !important; }
    body .hv-result-lede, body .hv-basis { font-size: 0.78rem !important; margin-bottom: 0.4rem !important; }
    body .gen6-cma-subject { margin: 0.6rem 0 0 !important; gap: 0.2rem 1rem !important; }
    body .gen6-cma-subject > div { font-size: 0.78rem !important; }
    body #gen6-cma-scatter svg { max-height: 2.1in !important; }
    body .hv-range-wrap { margin: 0.8rem 0 !important; }
    .gen6-cma-printonly { display: block; margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid #1b2d4f; font-size: 0.82rem; color: #33465f; }
    #valuation-result { padding: 0; }
}

/* 2026-10-01 lead: SVG charts use a 560-unit viewBox that scales to ~0.66 on a phone, so 10-12 unit labels rendered about 7px.
   On phones raise the label sizes in user units (effective ~11-12px) and drop the in-chart sub-notes (the text summary under the chart says the same). */
@media (max-width: 600px) {
  #gen6-cma-waterfall svg .gen6-cma-legend { font-size: 17px; }
  #gen6-cma-waterfall svg .gen6-cma-axis { display: none; }
  .gen6-cma-block svg .gen6-cma-axis { font-size: 15px; }
  .gen6-cma-block svg .gen6-cma-legend { font-size: 16px; }
}