/* ============================================================================
   report.css — page-specific styles for report.html
   Extracted from the inline <style> blocks (Prompt 23). Brand tokens live in
   design-tokens.css; shared component rules (loading screen, .spinner) live in
   styles/components.css. Only report-page-specific rules belong here.
   ========================================================================== */

/* tokens loaded from design-tokens.css */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f7f6; color: var(--text-primary); margin: 0; padding: 0; }

/* ── Paywall overlay (shown when no valid session) ── */
#paywall { display: none; min-height: 100vh; align-items: center; justify-content: center; background: #f4f7f6; }
#paywall.active { display: flex; }
.paywall-box { background: white; border-radius: 12px; padding: 48px 36px; text-align: center; max-width: 420px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-top: 6px solid var(--brand-green); }
.paywall-box h2 { color: var(--dark-slate); margin: 12px 0 10px; }
.paywall-box p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; }
.btn-green { display: inline-block; background: var(--brand-green); color: white; font-weight: bold; padding: 13px 28px; border-radius: 8px; text-decoration: none; font-size: 1rem; transition: background 0.2s; }
.btn-green:hover { background: var(--brand-green-hover); }
.paywall-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.paywall-secondary { color: var(--text-secondary); font-size: 0.85rem; text-decoration: underline; padding: 6px 12px; cursor: pointer; background: none; border: 0; font-family: inherit; }
.paywall-secondary:hover { color: var(--brand-green); }

/* Loading screen + .spinner come from styles/components.css */

/* ── Report wrapper ── */
#reportWrapper { display: none; }
#reportWrapper.active { display: block; }

/* ── Print/Download button (fixed) ── */
#downloadBtn { position: fixed; bottom: 24px; right: 24px; background: var(--dark-slate); color: white; border: none; padding: 12px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 0.9rem; box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 999; display: flex; align-items: center; gap: 8px; transition: background 0.2s; min-height: 44px; }
#downloadBtn:hover { background: #1a252f; }
/* Gated until the report finishes rendering (see report.html render-complete
   predicate) so users can't export a half-rendered report. */
#downloadBtn:disabled { opacity: 0.55; cursor: progress; box-shadow: none; }
#downloadBtn:disabled:hover { background: var(--dark-slate); }

/* ── Report sub-header ── */
.report-subheader { background: var(--dark-slate); color: #94a3b8; padding: 12px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; border-top: 1px solid rgba(255,255,255,0.08); }
.report-subheader .report-meta { line-height: 1.8; text-align: right; }
.report-subheader .report-label { color: #fff; font-weight: bold; font-size: 0.9rem; }
.premium-badge { display: inline-block; background: var(--brand-green); color: white; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 8px; vertical-align: middle; }

/* ── Map preview — inset cover frame (R11): rounded corners + hairline
      border instead of a full-bleed crop; the parcel boundary strokes in
      brand green (set at L.geoJSON time). ── */
#mapPreview { height: 280px; margin: 20px 40px 0; border-radius: 10px; border: 1px solid var(--border-light); overflow: hidden; }

/* ── Cover identity block (R2) — the land's identity leads the report ── */
.cover-identity { background: white; border-bottom: 1px solid var(--border-light); padding: 18px 40px 14px; }
.cover-situs { font-size: 1.35rem; font-weight: 700; color: var(--dark-slate); line-height: 1.3; }
.cover-locality { font-size: 0.95rem; color: var(--text-secondary); margin-top: 2px; }
.cover-pin { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.cover-pin strong { color: var(--dark-slate); letter-spacing: 0.02em; margin-left: 6px; }

/* ── Parcel summary strip ── */
.parcel-strip { background: #f8fafc; border-bottom: 1px solid var(--border-light); padding: 16px 40px; display: flex; flex-wrap: wrap; gap: 32px; }
.parcel-item { font-size: 0.8rem; color: var(--text-muted); }
.parcel-item strong { display: block; font-size: 1rem; color: var(--dark-slate); margin-top: 2px; }
/* Header parcel size is the MEASURED value (map draw/click); the parcel-record
   card below shows the county OGRIP auditor acreage. Labeling the header keeps
   the two figures from reading as an unexplained discrepancy. */
.parcel-item-note { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; }

/* ── Report body ── */
.report-body { max-width: 860px; margin: 0 auto; padding: 36px 40px 80px; }

/* ── Section cards ── */
.report-section { background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 24px; overflow: hidden; border-top: 4px solid var(--border-light); }
.report-section.soil    { border-top-color: #8b5e3c; }
.report-section.flood   { border-top-color: var(--accent); }
.report-section.wetland { border-top-color: var(--brand-green); }
.report-section.crp     { border-top-color: #e67e22; }
.report-section.crops   { border-top-color: #f1c40f; }
.report-section.landuse { border-top-color: #8bc34a; }
.report-section.energy  { border-top-color: #e74c3c; }
.report-section.water   { border-top-color: #2980b9; }
.report-section.carbon  { border-top-color: #16a085; }
.report-section.ogrip   { border-top-color: var(--brand-green); }
.report-section.exec-summary { border-top-color: var(--dark-slate); }
.report-section.scenarios { border-top-color: var(--brand-green); }

/* OGRIP parcel record */
.ogrip-pin { font-size: 1.2rem; font-weight: 700; color: var(--dark-slate); letter-spacing: 0.02em; margin: 0 0 4px; word-break: break-all; }
.ogrip-county { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 14px; }
.ogrip-badge-row { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.ogrip-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.ogrip-badge.yes { background: #d1fae5; color: #065f46; }
.ogrip-badge.no  { background: #f1f5f9; color: #475569; }
.ogrip-luc { font-size: 0.82rem; color: var(--text-muted); }
.ogrip-auditor-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.85rem; color: var(--brand-green); font-weight: 600; text-decoration: none; }
.ogrip-auditor-link:hover { text-decoration: underline; }
.ogrip-callout { background: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 0 6px 6px 0; padding: 10px 14px; font-size: 0.85rem; color: #78350f; line-height: 1.5; margin-top: 14px; }

.section-header { padding: 16px 24px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #f1f5f9; }
.section-icon { font-size: 1.4rem; }
.section-header h2 { margin: 0; font-size: 1.05rem; color: var(--dark-slate); }
.section-body { padding: 20px 24px; }

/* ── Data grid inside sections ── */
.data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.data-item { background: #f8fafc; border-radius: 6px; padding: 10px 12px; }
.data-label { font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 4px; }
.data-value { font-size: 1rem; font-weight: bold; color: var(--dark-slate); }
.data-value.good  { color: var(--brand-green-aa); }
.data-value.warn  { color: #e67e22; }
.data-value.alert { color: var(--error); }
.data-value small { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }

/* R11 — the single "hero metric" pattern (one per section): the colored-
   border treatment the PI score card pioneered, promoted to a class so
   cash rent / solar lease / CRP value reuse it instead of competing at
   the same visual weight as every other cell. */
.data-item--hero { border: 2px solid var(--brand-green); border-radius: 6px; background: var(--bg-surface); }
.data-item--hero.hero-warn  { border-color: var(--warning); }
.data-item--hero.hero-alert { border-color: var(--error); }
.data-item--hero .data-value { font-size: 1.3rem; }

/* ── Interpretation box ── */
.insight-box { background: #f0f9f4; border-left: 4px solid var(--brand-green); border-radius: 0 6px 6px 0; padding: 12px 16px; font-size: 0.88rem; color: #2d5a3d; line-height: 1.6; margin-top: 4px; }
.insight-box.blue { background: #eff6ff; border-left-color: var(--accent); color: #1e3a5f; }
.insight-box.amber { background: #fffbeb; border-left-color: #f59e0b; color: #78350f; }

/* ── CRP eligibility bar ── */
.eligibility-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.elig-tag { font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.elig-tag.yes { background: #d1fae5; color: #065f46; }
.elig-tag.maybe { background: #fef9c3; color: #713f12; }
.elig-tag.no  { background: #fee2e2; color: #991b1b; }

/* Drought-status pill (water section) */
.drought-pill { padding: 2px 10px; border-radius: 4px; font-size: 0.82rem; color: white; }
.drought-pill.drought-none    { background: var(--brand-green); }
.drought-pill.drought-mild    { background: #f59e0b; }
.drought-pill.drought-severe  { background: #e74c3c; }
.drought-pill.drought-unknown { background: #94a3b8; }

/* ── Recommendations section ── */
.recommendations { background: var(--dark-slate); color: white; border-radius: 10px; padding: 28px 32px; margin-bottom: 28px; }
.recommendations h2 { margin: 0 0 16px 0; font-size: 1.1rem; color: var(--brand-green); }
.rec-item { display: flex; gap: 12px; margin-bottom: 14px; font-size: 0.9rem; line-height: 1.5; color: #cbd5e0; }
.rec-num { background: var(--brand-green); color: white; min-width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; flex-shrink: 0; margin-top: 1px; }

/* ── Bottom CTA ── */
.bottom-cta { background: white; border-radius: 10px; padding: 28px 32px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.bottom-cta h3 { margin: 0 0 8px 0; color: var(--dark-slate); }
.bottom-cta p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; }

/* ── Footer ── */
.report-footer { text-align: center; font-size: 0.72rem; color: var(--text-muted); padding: 20px; line-height: 1.8; }

/* ── Print styles ── */
@media print {
    @page {
        margin: 0.5in 0.4in;
        @top-left { content: "AgriTerra Land Use Report"; font-size: 9pt; color: #94a3b8; }
        @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 9pt; color: #94a3b8; }
    }
    body { background: white; orphans: 3; widows: 3; }
    .report-body { max-width: none; padding: 0 16px 24px; }
    .report-subheader { padding: 12px 16px; }
    .parcel-strip { padding: 12px 16px; gap: 16px; }
    .section-body { padding: 16px 18px; }
    .section-header { padding: 14px 18px 10px; }
    #downloadBtn, .bottom-cta, .paywall-box, #loadingScreen, #pdfOverlay, #mainNav,
    #reportV2, .cookie-consent, .skip-link, .skeleton-block, #mapPreview,
    .leaflet-control-zoom, .leaflet-control-attribution {
        display: none !important;
    }
    .report-section { box-shadow: none; border: 1px solid var(--border-light); break-inside: avoid; page-break-inside: avoid; overflow: visible !important; border-radius: 0; }
    .recommendations {
        background: white !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-light);
        padding: 18px;
    }
    .recommendations h2 { color: var(--dark-slate) !important; }
    .rec-item {
        border-bottom: 1px solid var(--border-light);
        padding: 12px 0;
    }
    .rec-item:last-child { border-bottom: none; }
    .rec-num {
        background: white !important;
        color: var(--brand-green) !important;
        border: 2px solid var(--brand-green);
    }
    .rec-item, .rec-item > div { color: var(--text-primary) !important; }
    .report-subheader, .parcel-strip, .data-item, .insight-box,
    .ogrip-callout, .eligibility-bar, .elig-tag, .ogrip-badge,
    .recommendations, .rec-num, .report-section, .premium-badge,
    .exec-bullets, .exec-bullets li, .exec-risk,
    .cover-identity, .data-item--hero {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* R2/R11 — the cover identity block stays with the parcel strip. */
    .cover-identity { break-inside: avoid; page-break-inside: avoid; padding: 14px 16px 10px; }

    /* Force light sub-header in print — predictable across browsers
       and remains legible when "Background graphics" is OFF. */
    .report-subheader {
        background: white !important;
        color: var(--dark-slate) !important;
        border-bottom: 1px solid var(--border-light);
    }
    .report-subheader .report-label { color: var(--dark-slate) !important; }
    .report-subheader .report-meta { color: var(--text-secondary) !important; }
    .premium-badge {
        background: white !important;
        color: var(--brand-green) !important;
        border: 1px solid var(--brand-green);
    }

    /* Keep section identity intact */
    .recommendations { break-inside: avoid; page-break-inside: avoid; }

    /* Keep headings glued to their content */
    .section-header,
    .section-header h2,
    h2, h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Keep grouped content together */
    .data-grid,
    .data-item,
    .insight-box,
    .eligibility-bar,
    .ogrip-callout,
    .ogrip-badge-row,
    .exec-risk,
    .rec-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Lock data-grid to 3 columns for print. The base
       auto-fill minmax(160px, 1fr) yields ~5 cols at Letter and
       drops to 4/3 on narrower printable areas, multiplying row
       count and split risk. 4 cols wraps long soil-section
       content ("Prime Farmland if Drained", "T Factor (Soil Loss
       Tolerance)"); 3 cols holds every label/value to one line. */
    .data-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .data-item {
        padding: 8px 10px !important;
    }
    .data-label {
        font-size: 0.65rem !important;
    }

    /* OGRIP situs/mail addresses are typically long — give them
       full grid width so they don't wrap raggedly in 3-col layout. */
    .data-item.ogrip-address {
        grid-column: 1 / -1;
    }

    /* Irrigation rating stars — yellow (#f1c40f) desaturates to
       near-invisible in grayscale. Force a high-contrast dark tone. */
    .irrigation-stars { color: #b45309 !important; }

    /* Executive summary bullets — built with inline styles in JS */
    .exec-bullets,
    .exec-bullets li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* R9 — scenario side-by-side table: keep whole, keep its best-fit
       highlight, and never scroll-clip in print. */
    .sc-table-wrap { overflow-x: visible !important; }
    .sc-table, .sc-legend {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .sc-table, .sc-chip, .sc-th--best, .sc-td--best, .sc-legend {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Don't orphan the footer */
    .report-footer { break-before: avoid; page-break-before: avoid; }

    /* Colored value words — keep color AND add weight cue so meaning
       survives even if print-color-adjust is ignored or grayscale. */
    .data-value.good  { color: #1e7a3d !important; font-weight: 700; }
    .data-value.warn  { color: #b45309 !important; font-weight: 700; }
    .data-value.alert { color: #b91c1c !important; font-weight: 700; }

    /* Eligibility pills — border keeps them visible in grayscale */
    .elig-tag {
        border: 1px solid currentColor;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .elig-tag.yes   { color: #047857 !important; background: #ecfdf5 !important; }
    .elig-tag.maybe { color: #b45309 !important; background: #fffbeb !important; }
    .elig-tag.no    { color: #b91c1c !important; background: #fef2f2 !important; }

    /* OGRIP yes/no badges — same treatment */
    .ogrip-badge {
        border: 1px solid currentColor;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .ogrip-badge.yes { color: #047857 !important; background: #ecfdf5 !important; }
    .ogrip-badge.no  { color: #b91c1c !important; background: #fef2f2 !important; }

    /* Drought pill — high-contrast colored text on a light fill,
       with a border so the shape survives grayscale printing. */
    .drought-pill {
        border: 1px solid currentColor;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .drought-pill.drought-none    { color: #047857 !important; background: #ecfdf5 !important; }
    .drought-pill.drought-mild    { color: #b45309 !important; background: #fffbeb !important; }
    .drought-pill.drought-severe  { color: #b91c1c !important; background: #fef2f2 !important; }
    .drought-pill.drought-unknown { color: #475569 !important; background: #f1f5f9 !important; }
}

@media (max-width: 600px) {
    .parcel-strip { padding: 14px 20px; gap: 16px; }
    #mapPreview { margin: 12px 16px 0; height: 220px; }
    .cover-identity { padding: 14px 20px 10px; }
    .cover-situs { font-size: 1.1rem; }
    .report-body { padding: 20px 16px 80px; }
    .section-body { padding: 16px; }
    .data-grid { grid-template-columns: 1fr 1fr; }
    .recommendations { padding: 20px; }
    #downloadBtn { bottom: 16px; right: 16px; padding: 10px 14px; font-size: 0.82rem; }
}

/* ============================================================================
   V2 server-rendered polling UI (report_id flow) — was inline before the
   #reportV2 markup.
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
#reportV2Checklist { list-style: none; padding: 0; margin: 18px auto 0; max-width: 320px; text-align: left; }
#reportV2Checklist li { padding: 7px 0; color: #94a3b8; font-size: 0.92rem; display: flex; align-items: center; gap: 12px; transition: color 0.2s; }
#reportV2Checklist li .check { display: inline-block; width: 20px; text-align: center; font-weight: 700; color: #cbd5e1; }
#reportV2Checklist li.done { color: #0f172a; }
#reportV2Checklist li.done .check { color: #16a34a; }
#reportV2Checklist li.in-progress { color: #0f172a; }
#reportV2Checklist li.in-progress .check { color: #16a34a; }

/* ============================================================================
   F20 — sticky feedback banner (links to feedback.html).
   ========================================================================== */
#feedbackBanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: none; align-items: center; justify-content: center; gap: 14px; padding: 10px 40px; background: #0f172a; color: #fff; font-size: 0.9rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.15); }
#feedbackBanner.show { display: flex; }
#feedbackBanner a { color: #fff; font-weight: 700; text-decoration: underline; }
#feedbackBanner .fb-text { opacity: 0.95; }
#feedbackBanner .fb-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; opacity: 0.8; }
#feedbackBanner .fb-close:hover { opacity: 1; }
@media (max-width: 600px) { #feedbackBanner { font-size: 0.82rem; padding: 10px 36px 10px 12px; gap: 8px; } }