/* Address/link is the only required input, submitted straight to the
   right of it; the optional unit/rooms/area/floor fields sit inside a
   collapsed <details> (see .report-form-extra-toggle below) rather than
   always-visible, so refining to an exact unit is still a single
   round-trip without making the common one-field case look heavier than
   it is. */
.report-form {
  display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.report-form input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 14.5px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--canvas); font-family: inherit;
}
.report-form input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* Button sits beside the address field rather than below the whole form -
   direct feedback that it read as a separate step instead of the same
   action. .report-form-extra (optional unit/rooms/area/floor) stays a
   separate row below, collapsed by default. */
.report-form-main { display: flex; gap: 10px; align-items: stretch; }
.report-form-main .addr-typeahead-anchor { flex: 1; min-width: 0; }
.report-form-main .btn-primary { flex: none; }
.report-form-extra { display: flex; gap: 12px; flex-wrap: wrap; }
.report-form-extra .pf-field { display: flex; flex-direction: column; gap: 5px; min-width: 110px; flex: 1; }
.report-form-extra .pf-field label { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; }
.report-form-extra .pf-field input {
  padding: 9px 10px; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--canvas); font-family: inherit; width: 100%; box-sizing: border-box;
}
.report-form .btn-primary {
  align-self: flex-start; border: none; border-radius: var(--radius-sm); padding: 10px 26px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #fff;
  box-shadow: 0 3px 10px rgba(200,146,46,.35);
}
.report-form .btn-primary:hover { filter: brightness(1.08); }

/* Paywall teaser - shown in place of the detailed sections when
   is_full_access is False (see property_report.html and
   apps/mapui/report_views.py::_build_report_context). Deliberately a
   single real card, not a blurred fake-preview of the actual content -
   this project's own "fact-only" ethos extends to not faking a glimpse of
   data the user hasn't actually unlocked yet. */
.report-paywall {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.report-paywall h2 { margin: 0 0 14px; font-size: 18px; }
.report-paywall-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px;
  margin: 0 0 16px; padding: 0; list-style: none;
}
.report-paywall-list li {
  font-size: 13.5px; color: var(--ink-soft); padding-left: 20px; position: relative;
}
.report-paywall-list li::before {
  content: "✓"; position: absolute; left: 0; color: #9c7020; font-weight: 700;
}
.report-paywall-lede { font-size: 14px; color: var(--ink); margin: 0 0 18px; }
.report-paywall-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.report-paywall-actions form { margin: 0; }
.report-paywall .btn-primary {
  border: none; border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #fff;
  box-shadow: 0 3px 10px rgba(200,146,46,.35);
}
.report-paywall .btn-primary:hover { filter: brightness(1.08); }
.report-paywall .btn-secondary { border-radius: var(--radius-sm); padding: 11px 22px; }

.report-error {
  background: #fdf6e3; border: 1px solid #f3e3b0; color: #7a5c00; padding: 12px 16px;
  border-radius: var(--radius); font-size: 13.5px; margin-bottom: 18px;
}
.report-error-suggestions { margin-top: 8px; }
.report-error-suggestions ul { margin: 4px 0 0; padding-left: 18px; }
.report-error-suggestions a { color: #7a5c00; font-weight: 600; text-decoration: underline; }
.report-error-suggestions a:hover { color: #4a3800; }

.report-no-sales {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 20px; font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.report-no-sales p { margin: 0 0 10px; }
.report-no-sales p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .report-form-main { flex-direction: column; }
  .report-form-main .btn-primary { align-self: stretch; }
  .report-form-extra { flex-direction: column; }
  .report-form-extra .pf-field { min-width: 0; }
}

/* Hero: gradient header card with the address, key tags and headline
   stats up front - what someone opened the report to see immediately,
   not something to find after scrolling past building facts. */
/* Padding/type-scale trimmed down - direct feedback that this box was
   "really big but doesn't show much info in it". Real content (address,
   tags, estimate, gauge) is unchanged; it's just packed tighter now. */
.report-hero {
  background: radial-gradient(700px 260px at 90% -20%, rgba(200,146,46,.28), transparent 60%),
              linear-gradient(135deg, #12293a 0%, #1c3f57 100%);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; color: #fff;
  box-shadow: 0 8px 24px rgba(18,35,59,.3);
}
.report-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.report-hero-address { font-size: 19px; font-weight: 800; line-height: 1.3; }
.report-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tag-chip {
  background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.tag-chip-brand { background: var(--brand); color: #fff; }

/* PDF download, moved out of its own full-width right-aligned row (real
   mobile complaint - it crowded the hero box awkwardly on narrow screens)
   into the same tag-chip row as the era/room/area badges, styled as a real
   pill link rather than a big button; the arrow emoji was also dropped
   per direct feedback. */
.tag-chip-action {
  background: linear-gradient(135deg, var(--gold-light, #e0ac4a), var(--gold-dark, #9c7020));
  color: #1a1204; cursor: pointer; text-decoration: none; transition: filter .15s, transform .15s;
}
.tag-chip-action:hover { filter: brightness(1.08); transform: translateY(-1px); }

.report-verdict {
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; flex-shrink: 0; max-width: 280px;
  display: flex; flex-direction: column; gap: 2px;
}
.report-verdict.verdict-good { background: #12b76a; color: #fff; }
.report-verdict.verdict-warn { background: #f79009; color: #fff; }
.report-verdict.verdict-fair { background: rgba(255,255,255,.18); color: #fff; }

.specs-override-note {
  margin-top: 12px; padding: 8px 12px; background: rgba(255,255,255,.1); border-radius: var(--radius-sm);
  font-size: 12px; color: rgba(255,255,255,.85); line-height: 1.5;
}

/* The single synthesized "what's this worth" number - building comparables
   preferred, falling back to apkaime then city/novads (see
   report_views.py::_headline_estimate) - shown before the per-listing gauge
   below so a plain address lookup (no pasted ss.lv link) still leads with
   one clear figure instead of two separate panels the reader has to
   combine themselves. */
.value-estimate {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2);
}
.value-estimate-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.value-estimate-label span { text-transform: none; font-weight: 500; opacity: .75; letter-spacing: normal; }
.value-estimate-num { font-size: 29px; font-weight: 800; line-height: 1.2; margin-top: 4px; background: linear-gradient(120deg, #fff, #f0d9ad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.value-estimate-range { font-size: 14px; opacity: .85; margin-top: 2px; }
.value-estimate-median { font-size: 13px; opacity: .85; margin-top: 6px; }
.value-estimate-median strong { color: #f0d9ad; }
.value-estimate-median span { opacity: .8; }
.value-estimate .trust-label { color: rgba(255,255,255,.75); margin-top: 6px; }

/* Real market-value figures, blurred for non-subscribers - direct
   feedback that the headline estimate (and the listing-verdict gauge's
   own euro figures, same class of number) was fully visible to anyone,
   free or paying, which undercut the whole "pay to see the value" pitch.
   Everything ELSE in this hero (address, tags, deal-count/methodology
   trust-label text) stays plain - only the actual priced figures are
   gated, same pattern as the homepage's own live-preview teaser. */
.value-estimate-num.blurred, .value-estimate-range.blurred, .value-estimate-median strong.blurred {
  filter: blur(7px); user-select: none;
}
.value-estimate-locked-note {
  font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 4px; font-style: italic;
}

/* Underpriced-to-overpriced gauge for the specific pasted listing (rent or
   sale, both handled) - a marker on a green-to-red bar reads faster than a
   number alone for "is this a good deal". */
.price-gauge { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.price-gauge-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.price-gauge-verdict { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.price-gauge-verdict.verdict-good { background: #12b76a; color: #fff; }
.price-gauge-verdict.verdict-warn { background: #f79009; color: #fff; }
.price-gauge-verdict.verdict-fair { background: rgba(255,255,255,.22); color: #fff; }
.price-gauge-bar {
  position: relative; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #12b76a 0%, #fed165 50%, #f04438 100%);
}
.price-gauge-marker {
  position: absolute; top: -4px; width: 18px; height: 18px; margin-left: -9px;
  background: #fff; border: 3px solid var(--brand-dark); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.price-gauge-marker.blurred { filter: blur(4px); }
.price-gauge-labels { display: flex; justify-content: space-between; font-size: 11px; opacity: .8; margin-top: 6px; }
.price-gauge-nums { font-size: 12.5px; opacity: .9; margin-top: 8px; }
.price-gauge-nums strong.blurred { filter: blur(5px); user-select: none; }

/* Anonymous/free-tier teaser inside the hero - same real numbers and pill
   style as the homepage's live preview widget (see home.js/home.css's
   .preview-stat), direct feedback that the real report page's own paywall
   view showed noticeably less than what the homepage teased. Priced/graded
   figures (parādi, energoklase, NĪN, īre, apkaimes vieta) blur just the
   value, same pattern as .value-estimate-num above - counts (darījumi,
   sludinājumi, apgrūtinājumi) are real findings, shown plainly. */
.hero-teaser { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.hero-teaser-stats { display: flex; gap: 6px; flex-wrap: wrap; }
/* Light pills instead of translucent-on-navy - direct feedback that the
   darker version blended too much into the hero and was hard to read.
   Same light background/text pairs as the homepage's own preview-stat
   pills (home.css), just reused here on a dark card instead of a white one. */
.hero-teaser-stat {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: #eef1f4; color: #3a4657;
}
.hero-teaser-stat strong { font-weight: 800; }
.hero-teaser-stat strong.blurred { filter: blur(3px); user-select: none; }
.hero-teaser-stat.stat-good { background: #e6f6ec; color: #0a7a4e; }
.hero-teaser-stat.stat-bad { background: #fbe8e6; color: #942f22; }

.report-hero-stats {
  display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero-stat-num { font-size: 22px; font-weight: 800; }
.hero-stat-lbl { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.hero-stat-num.yield-good { color: #6ee7a8; }
.hero-stat-num.yield-mid { color: #fed165; }
.hero-stat-num.yield-low { color: #ffb199; }

.section-sub { font-size: 12px; font-weight: 500; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* Fact list - checked the actual reference (m2cena.lv/analyses/sample) in a
   real browser, not just fetched as markdown (which strips layout): its
   secondary-facts section isn't a grid of tiles at all, it's a flat list -
   icon + label on the left, value on the right, one hairline divider
   between rows, no per-row background/border/color. A grid of colorful
   tiles (this project's first two attempts) reads as visually much busier
   than that reference regardless of whether the tiles have borders - the
   structural fix is switching to rows, not just removing shadows. One
   single accent color per section (inherited from the section's own icon
   header, not a rotating rainbow) for the small dot, matching m2cena's
   restrained one-accent-plus-grayscale palette. */
.fact-grid { display: flex; flex-direction: column; }
.fact-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.fact-item:last-child { border-bottom: none; }
.fact-item::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-dark, #9c7020);
}
.fact-item-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: 1; min-width: 0; }
.fact-lbl { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.fact-val { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; text-align: right; }

/* Links a private/interactive report back to the same building's public,
   crawlable /ipasums/ page - direct feedback that these SEO pages existed
   but nothing on the site actually linked to them. */
.report-seo-link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold-dark, #9c7020); text-decoration: none; }
.report-seo-link:hover { text-decoration: underline; }

/* Energy-efficiency class badge - standard EU A-G traffic-light gradient
   (green = efficient, red = inefficient), same convention as every real
   energy label a buyer already recognizes (appliances, EPCs). */
.fact-val[class*="energy-class-"] {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px;
  padding: 2px 10px; border-radius: 6px; color: #fff; font-size: 14px;
}
.fact-val.energy-class-a-plus { background: #0a7a4e; }
.fact-val.energy-class-a { background: #2f9e5c; }
.fact-val.energy-class-b { background: #7cb342; }
.fact-val.energy-class-c { background: #c8a838; }
.fact-val.energy-class-d { background: #d98a2b; }
.fact-val.energy-class-e { background: #d9642b; }
.fact-val.energy-class-f { background: #c0392b; }

.nl-row-match { background: var(--brand-tint); }

#report-map {
  height: 320px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
}

.street-view-frame {
  height: 320px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
  background: var(--canvas);
}
.street-view-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.listings-table td:first-child { width: 56px; padding: 6px 8px; }
.listing-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }

.report-info-banner {
  background: var(--brand-tint); color: var(--brand-dark); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px;
}

.count-pill {
  background: var(--line-soft); color: var(--ink-faint); font-weight: 700; font-size: 10.5px;
  padding: 1px 7px; border-radius: 10px; margin-left: 4px;
}
.underpriced-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 10.5px;
  font-weight: 700; background: #e6f6ec; color: #0a7a4e;
}

/* Same 4 colors as Pārskati's era pie chart / card.js's era badge - "era-N"
   always means the same era everywhere in the product. */
.era-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px 3px 7px; border-radius: 20px; color: #fff; white-space: nowrap;
}
.era-badge.era-0 { background: #b08968; }
.era-badge.era-1 { background: #7d8597; }
.era-badge.era-2 { background: #4a7c95; }
.era-badge.era-3 { background: #1f5c85; }

/* Compact layout - direct feedback that the report felt too spacious.
   Tighter section spacing/heading size scoped to .report-page only, so
   these overrides don't leak into other pages sharing seo.css's
   .section-block. */
.report-page .section-block { margin-bottom: 14px; }
.report-page .section-block h2 { font-size: 14.5px; margin: 0 0 8px; }
.report-page .section-block.compact {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.report-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.report-grid-2 .section-block { margin-bottom: 0; }
@media (max-width: 720px) { .report-grid-2 { grid-template-columns: 1fr; } }

.encumbrance-list {
  list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.encumbrance-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.encumbrance-item:last-child { border-bottom: none; }
.encumbrance-kind { flex: 1; }
.encumbrance-scope {
  flex: none; font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap;
}

.price-range { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.price-range.warn-value { color: #c0392b; }
.price-range-unit { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-left: 2px; }
.price-range-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.report-page .fact-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.report-page .fact-item { padding: 7px 10px; }
.report-page .fact-val { font-size: 13.5px; }

/* Always visible, not collapsed - deal history is the extensive part of
   the report and shouldn't be hidden behind a toggle. */
.report-deals-history { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.report-deals-heading { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.report-deals-history h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin: 16px 0 6px; }
.report-deals-history table { font-size: 12.5px; }

/* Green = "this is likely the specific unit/listing in question" -
   distinct from the blue brand-tint used for generic filter matches
   elsewhere in the product, since this is a probabilistic guess the user
   should be able to tell apart from a hard filter match at a glance. */
.deal-row-suspected { background: #e6f6ec; }
.tag-chip-suspected { background: #12b76a; color: #fff; }

/* Combined darījumi+sludinājumi timeline, sorted chronologically - direct
   request once the pavei.lv backfill made both real, dated ss.lv listing
   history AND VZD deal history available for the same building, so they
   read as one interleaved story instead of two separate, hard-to-compare
   tables. Left border color is the one visual cue distinguishing the two
   kinds (green = darījums/VZD deal, brand-blue = sludinājums/ss.lv listing)
   - same green already used everywhere else in this file for "good"/deal
   context (.tag-chip-suspected, .price-history-list-row.latest). */
.history-feed { display: flex; flex-direction: column; gap: 6px; }
.history-card {
  position: relative;
  border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 12px; background: var(--surface);
}
.history-card.kind-deal { border-left-color: #0a7a4e; background: #e6f6ec; }
.history-card.kind-listing { border-left-color: var(--brand); background: #e3edf2; }
.history-card.is-anomaly { opacity: .55; }
.history-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-card-date { font-size: 11px; color: var(--ink-faint); }
.history-card-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 20px; color: #fff; white-space: nowrap;
}
.history-card-badge.kind-deal { background: #0a7a4e; }
.history-card-badge.kind-listing { background: var(--brand); }
.history-card-price {
  display: block; font-size: 15px; font-weight: 800; margin-top: 3px;
}
.history-card.kind-deal .history-card-price { color: #0a7a4e; }
.history-card.kind-listing .history-card-price { color: var(--brand); }
/* Fixed-width grid columns, same 3 columns for BOTH deal and listing rows
   (direct feedback/screenshot: with plain inline text, a listing row's
   "2 ist." sat in a different horizontal position than a deal row's - the
   two kinds visually didn't line up in the combined feed). Every card
   renders all 3 spans unconditionally (empty ones show "-", not omitted),
   so column position never depends on which facts a given row happens to
   have - col-2 istabas, col-3 platība, col-4 €/m² (deals) or "Izīrē"
   (listings) - same slot, different meaning, still visually aligned like a
   real table. (Numbered from 2 not 1 - col-1 used to be Dzīvokļa Nr. before
   that moved to its own line under the price; kept the class names as-is
   rather than renumbering everything for a cosmetic-only reason.)
   justify-content:center keeps the whole column set centered in the card
   without breaking the fixed per-column widths that make alignment work in
   the first place. */
.history-card-meta {
  /* col-4 widened 90px -> 115px - direct bug report: "1020 €/..." was
     ellipsis-truncating on desktop (the 90px column, minus 20px padding,
     didn't leave enough room for a real 4-digit €/m² figure at this
     font-size/weight). */
  display: grid; grid-template-columns: 55px 85px 115px; gap: 0;
  font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 6px; justify-content: center;
}
.history-card-meta span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 10px; border-right: 1px solid var(--line);
}
/* The exact per-unit VZD address ("Malienas iela 78-2") shown under the
   price for darījums rows - direct request in place of the more generic
   "Dzīvoklis Nr. 2". Left-aligned (not centered like the rest of the card)
   since it reads as a sub-label of the price above it, not a data column. */
.history-card-unit-address { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; text-align: left; }
.history-card-meta span:last-child { border-right: none; }
/* Sludinājumi rows only - photo is absolutely positioned in the card's own
   corner rather than sharing flex space with the text column (an earlier
   version wrapped price/meta/tags in a narrower flex column alongside the
   photo) - direct feedback/screenshot: that narrower column meant
   .history-card-meta's grid centered against a DIFFERENT available width
   than a photo-less darījums row's, so the same fixed 3-column grid landed
   at a different X position depending on row kind, defeating the whole
   point of the shared column layout. Every row's price/meta/tags now share
   the exact same full-card-width flow regardless of kind, so centering
   (or any future alignment) is identical across the whole feed - the photo
   just floats on top without affecting that layout at all. Positioned
   below .history-card-top's badge (top ~28px), not at top:0, so it doesn't
   overlap it. */
.history-card-photos { position: absolute; top: 28px; right: 12px; display: flex; gap: 4px; }
.history-card-photo-thumb {
  position: relative; width: 40px; height: 40px; border-radius: 5px; flex: none; padding: 0; border: none;
  cursor: pointer; overflow: hidden; background: var(--canvas);
}
.history-card-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* pavei only ever gives one photo per listing - its own wide multi-shot
   strip (real native size 320x60px), not several individual photos like
   ss.lv's own gallery - squeezing that into a 40x40 square (even with
   object-fit:contain) produced a tiny, illegible letterboxed sliver.
   Same small scale/position as .history-card-photo-thumb above (direct
   feedback: "smaller... like wider not a square"), just wide instead of
   square - height fixed, width auto so the real ~5.3:1 strip shape shows
   at a compact, legible size instead of full card width. */
.history-card-photo-wide {
  position: absolute; top: 28px; right: 12px; display: inline-block; height: 36px; max-width: 160px;
  padding: 0; border: none; border-radius: 5px; cursor: pointer; overflow: hidden; background: #111;
}
.history-card-photo-wide img { height: 100%; width: auto; max-width: 100%; display: block; }
.history-card-photo-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(18,35,59,.6); color: #fff; font-size: 11px; font-weight: 700;
}

/* Mobile: direct bug report - the desktop layout's fixed 55/85/90px meta
   columns don't leave enough room for real values ("1 050 €/m²", "56.4 m²")
   at a phone's default text scale, so they ellipsis-truncated to "...";
   and the absolutely-positioned corner photo (sized/placed for a wide
   desktop card) could end up squeezed against or under the meta grid on a
   narrow card instead of sitting clearly beside it. Real fix, not a
   smaller version of the same layout: meta columns become flexible
   (equal-share, wrapping allowed) so values always fit in full, and the
   photo drops out of absolute positioning into the card's own normal flow
   as its own row, so it's never fighting the text for the same space. */
@media (max-width: 640px) {
  .history-card-meta {
    grid-template-columns: repeat(3, 1fr); gap: 4px;
  }
  .history-card-meta span {
    white-space: normal; overflow: visible; text-overflow: clip;
    padding: 0 4px; font-size: 13px; text-align: center;
  }
  .history-card-photos, .history-card-photo-wide {
    position: static; top: auto; right: auto; margin-top: 8px;
  }
  .history-card-photo-wide { height: 48px; max-width: 100%; }
  .history-card-photos { justify-content: flex-start; }
}

#photo-lightbox-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(18,35,59,.85); align-items: center; justify-content: center; padding: 24px;
}
#photo-lightbox-backdrop.open { display: flex; }
#photo-lightbox { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
/* width (not just max-width) is what actually upscales a small source
   image to fill the box - pavei's own thumbstrip preview is genuinely
   tiny (320x60px), and max-width/max-height alone only cap size, they
   never stretch an image smaller than its box. Direct request: show it
   bigger even though the source resolution itself can't improve. */
#photo-lightbox-img { width: min(720px, 92vw); height: auto; max-height: 85vh; object-fit: contain; border-radius: 8px; }
#photo-lightbox-close, #photo-lightbox-prev, #photo-lightbox-next {
  position: absolute; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  border-radius: 50%; width: 40px; height: 40px; font-size: 20px; line-height: 1; transition: background .12s;
}
#photo-lightbox-close:hover, #photo-lightbox-prev:hover, #photo-lightbox-next:hover { background: rgba(255,255,255,.25); }
#photo-lightbox-close { top: -50px; right: -6px; }
#photo-lightbox-prev { left: -56px; top: 50%; transform: translateY(-50%); }
#photo-lightbox-next { right: -56px; top: 50%; transform: translateY(-50%); }
#photo-lightbox-count { position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12.5px; }
@media (max-width: 640px) {
  #photo-lightbox-prev { left: 4px; }
  #photo-lightbox-next { right: 4px; }
  #photo-lightbox-close { top: 4px; right: 4px; }
}

/* Direct request: clicking a sludinājums row shows the full saved listing
   text/specs (title, description, floor/series/district) instead of just
   the summary line already visible in the feed. Only kind-listing cards
   are clickable this way (deals have no comparable saved text) - see the
   pointer cursor scoped to that class only, and each card's onclick guarded
   by data-listing being present. Same backdrop/modal pattern as the photo
   lightbox above, deliberately not shared markup with it since one shows an
   image and the other a text panel. */
.history-card.kind-listing { cursor: pointer; }
/* Visible tap/click affordance - cursor:pointer alone is invisible on
   touch devices (direct feedback: "make it look like it's clickable").
   Normal flow (not absolutely positioned) so it never fights the photo
   for the same corner - always the last line, however tall the card is. */
.history-card-expand-hint {
  display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  color: var(--brand); text-transform: uppercase; letter-spacing: .02em; text-align: right;
}
#listing-detail-backdrop {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(18,35,59,.85); align-items: center; justify-content: center; padding: 16px;
}
#listing-detail-backdrop.open { display: flex; }
/* Kept deliberately compact (direct feedback: the first version was
   "bigger than the screen") - a real popup, not a near-fullscreen page. */
#listing-detail-modal {
  position: relative; width: min(420px, 100%); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-md, 0 10px 40px rgba(0,0,0,.3));
}
#listing-detail-close {
  position: absolute; top: 10px; right: 10px; border: none; background: var(--canvas); color: var(--ink);
  cursor: pointer; border-radius: 50%; width: 30px; height: 30px; font-size: 17px; line-height: 1;
}
#listing-detail-close:hover { background: var(--line); }
#listing-detail-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 30px; }
#listing-detail-price { font-size: 18px; font-weight: 800; color: var(--ink); }
#listing-detail-date { font-size: 11.5px; color: var(--ink-faint); }
#listing-detail-meta { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }
#listing-detail-description {
  font-size: 13px; line-height: 1.55; color: var(--ink); margin-top: 12px; white-space: pre-line;
}
@media (max-width: 640px) {
  #listing-detail-modal { width: 94vw; max-height: 65vh; padding: 16px 18px; }
}

.history-card-link {
  display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--brand);
  text-decoration: none;
}
.history-card-link:hover { text-decoration: underline; }
.history-card-tags { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.history-card-tags:empty { display: none; }

/* Listing cards - real photo, price and status up front, same visual
   language as the Jauni sludinājumi cards (new-listings.css's .nl-card)
   rather than a cramped 48px-thumbnail row - direct feedback that the
   report's listings looked far less detailed than the rest of the site. */
.listing-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.listing-card {
  display: block; text-decoration: none; color: inherit; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s;
}
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-card-suspected { border-color: #12b76a; }
.listing-card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--canvas); }
.listing-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Same reasoning as .history-card-photo-thumb-contain below - pavei's
   preview is one wide multi-photo strip, not a single image, so cover
   crops it to an illegible sliver in this taller 4:3 box. */
.listing-card-photo-contain img { object-fit: contain; background: #111; }
.listing-card-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-faint); font-size: 12px; }
.listing-card-kind {
  position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 3px 8px; border-radius: 20px; color: #fff;
}
.listing-card-kind.sale { background: var(--brand); }
.listing-card-kind.rent { background: #0a7a4e; }
/* Featured listing - the one specific ss.lv listing this project has
   actually tracked price changes for, surfaced at the top of Kopsavilkums
   with real photos and its real price chart (direct request), rather than
   only appearing buried in the full building listing list further down
   in the Aktīvi sludinājumi tab. */
.featured-listing-photos { display: flex; gap: 8px; margin: 10px 0; overflow-x: auto; }
.featured-listing-photos img {
  width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex: none; background: var(--canvas);
}
.featured-listing-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.featured-listing-price { font-size: 17px; font-weight: 800; color: var(--ink); }
.featured-listing-specs { font-size: 13px; color: var(--ink-soft); }
.featured-listing-link { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; }
.featured-listing-link:hover { text-decoration: underline; }

.listing-card-body { padding: 10px 12px 12px; }
.listing-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.listing-card-price { font-size: 15px; font-weight: 800; color: var(--ink); }
.listing-card-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* Real price-change history (apps.listings.ss_lv.listing_activity, built
   from SsLvPriceSnapshot - this project's own accumulated observations of
   a listing over time, not ss.lv's edit log which isn't exposed anywhere).
   Only rendered when at least 2 snapshots exist, so a listing this project
   just started tracking never shows a fake single-point "history". */
.price-history { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line-soft); }
.price-history-first-seen { display: block; font-size: 10.5px; color: var(--ink-faint); margin-bottom: 4px; }
.price-history-summary { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 3px; }
.price-history-point { font-size: 11.5px; color: var(--ink-soft); }
.price-history-point-latest { font-weight: 700; color: var(--ink); }
.price-history-arrow { font-size: 11px; color: var(--ink-faint); margin: 0 3px; }

/* Dates+prices as a real list on the left, chart on the right - direct
   feedback: the chart's old inline text labels got crowded/relocated as
   history length changed, reading as "random, not beautiful". Splitting
   the exact numbers into their own list lets the chart itself be a
   clean, uniform shape (same fixed height at any point count) rather
   than text-driven layout. */
.price-history-chart-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.price-history-list { flex: none; min-width: 88px; display: flex; flex-direction: column; gap: 3px; }
.price-history-list-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.price-history-list-row .ph-date { color: var(--ink-faint); }
.price-history-list-row .ph-price { font-weight: 700; color: var(--ink-soft); }
.price-history-list-row.latest .ph-date, .price-history-list-row.latest .ph-price { color: #0a7a4e; }
.activity-chart-wrap { flex: 1; height: 70px; min-width: 0; }
.activity-chart { width: 100%; height: 100%; display: block; }
/* Same brand green already used site-wide for "good" (.verdict-good,
   risk-count-good) instead of an arbitrary neon green, and a single soft
   shadow instead of the previous multi-layer glow - direct feedback that
   the chart looked "random, not beautiful"; a smooth curve + gradient
   fill + restrained color reads as a deliberate, designed chart instead
   of raw plotted data. */
.activity-chart-fill-top { stop-color: #12b76a; stop-opacity: .22; }
.activity-chart-fill-bottom { stop-color: #12b76a; stop-opacity: 0; }
.activity-chart-line {
  fill: none; stroke: #0a9c5c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(10, 156, 92, .3));
}
.activity-chart-dot { fill: #fff; stroke: #0a9c5c; stroke-width: 2; }
.activity-chart-dot-latest { fill: #0a9c5c; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 3px rgba(10, 156, 92, .5)); }

.deal-row-anomaly { opacity: .55; }
.deal-row-anomaly td:first-child { text-decoration: line-through; }
.anomaly-note { font-size: 10.5px; font-weight: 700; color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }

/* Icon + heading pattern - direct feedback ("I really like m2cena's UI",
   whose report puts a small icon before every section title) reproduced
   with this project's own line-icon set (no emoji - premium product, see
   standing UI rule) rather than copying their exact icons. One `mask-image`
   per data-icon value keeps every h2 edit to a single attribute instead of
   hand-writing an <svg> in each template block. */
.report-page .section-block h2[data-icon],
.report-page h2[data-icon] {
  display: flex; align-items: center; gap: 9px;
}
.report-page h2[data-icon]::before {
  content: ''; display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  background: var(--brand, #1c3f57);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.report-page h2[data-icon="building"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxOCIvPjxsaW5lIHgxPSI0IiB5MT0iOSIgeDI9IjIwIiB5Mj0iOSIvPjxsaW5lIHgxPSI0IiB5MT0iMTUiIHgyPSIyMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMjEiIHgyPSIxMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMjEiIHgyPSIxNCIgeTI9IjE1Ii8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxOCIvPjxsaW5lIHgxPSI0IiB5MT0iOSIgeDI9IjIwIiB5Mj0iOSIvPjxsaW5lIHgxPSI0IiB5MT0iMTUiIHgyPSIyMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMjEiIHgyPSIxMCIgeTI9IjE1Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMjEiIHgyPSIxNCIgeTI9IjE1Ii8+PC9zdmc+Cg=="); }
.report-page h2[data-icon="alert"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMC4yOSAzLjg2TDEuODIgMThhMiAyIDAgMCAwIDEuNzEgM2gxNi45NGEyIDIgMCAwIDAgMS43MS0zTDEzLjcxIDMuODZhMiAyIDAgMCAwLTMuNDIgMHoiLz48bGluZSB4MT0iMTIiIHkxPSI5IiB4Mj0iMTIiIHkyPSIxMyIvPjxsaW5lIHgxPSIxMiIgeTE9IjE3IiB4Mj0iMTIuMDEiIHkyPSIxNyIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMC4yOSAzLjg2TDEuODIgMThhMiAyIDAgMCAwIDEuNzEgM2gxNi45NGEyIDIgMCAwIDAgMS43MS0zTDEzLjcxIDMuODZhMiAyIDAgMCAwLTMuNDIgMHoiLz48bGluZSB4MT0iMTIiIHkxPSI5IiB4Mj0iMTIiIHkyPSIxMyIvPjxsaW5lIHgxPSIxMiIgeTE9IjE3IiB4Mj0iMTIuMDEiIHkyPSIxNyIvPjwvc3ZnPg=="); }
.report-page h2[data-icon="chart"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDIwVjEwTTEwIDIwVjRNMTYgMjBWMTQiLz48L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDIwVjEwTTEwIDIwVjRNMTYgMjBWMTQiLz48L3N2Zz4K"); }
.report-page h2[data-icon="home"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDExbDktOCA5IDgiLz48cGF0aCBkPSJNNSAxMHYxMGgxNFYxMCIvPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDExbDktOCA5IDgiLz48cGF0aCBkPSJNNSAxMHYxMGgxNFYxMCIvPjwvc3ZnPgo="); }
.report-page h2[data-icon="euro"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOCA2YTcgNyAwIDEgMCAwIDEyIi8+PGxpbmUgeDE9IjQiIHkxPSIxMCIgeDI9IjE0IiB5Mj0iMTAiLz48bGluZSB4MT0iNCIgeTE9IjE0IiB4Mj0iMTIiIHkyPSIxNCIvPjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOCA2YTcgNyAwIDEgMCAwIDEyIi8+PGxpbmUgeDE9IjQiIHkxPSIxMCIgeDI9IjE0IiB5Mj0iMTAiLz48bGluZSB4MT0iNCIgeTE9IjE0IiB4Mj0iMTIiIHkyPSIxNCIvPjwvc3ZnPgo="); }
.report-page h2[data-icon="calculator"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgcng9IjIiLz48bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIxNiIgeTI9IjYiLz48bGluZSB4MT0iOCIgeTE9IjExIiB4Mj0iOCIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjE2IiB5MT0iMTEiIHgyPSIxNiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjgiIHkxPSIxNSIgeDI9IjgiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxNiIgeTE9IjE1IiB4Mj0iMTYiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSI4IiB5MT0iMTkiIHgyPSI4IiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTYiIHkxPSIxOSIgeDI9IjE2IiB5Mj0iMTkuMDEiLz48L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjQiIHk9IjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgcng9IjIiLz48bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIxNiIgeTI9IjYiLz48bGluZSB4MT0iOCIgeTE9IjExIiB4Mj0iOCIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjE2IiB5MT0iMTEiIHgyPSIxNiIgeTI9IjExLjAxIi8+PGxpbmUgeDE9IjgiIHkxPSIxNSIgeDI9IjgiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSIxNiIgeTE9IjE1IiB4Mj0iMTYiIHkyPSIxNS4wMSIvPjxsaW5lIHgxPSI4IiB5MT0iMTkiIHgyPSI4IiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iMTkuMDEiLz48bGluZSB4MT0iMTYiIHkxPSIxOSIgeDI9IjE2IiB5Mj0iMTkuMDEiLz48L3N2Zz4K"); }
.report-page h2[data-icon="pin"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxMGMwIDYtOCAxMi04IDEycy04LTYtOC0xMmE4IDggMCAwIDEgMTYgMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxMGMwIDYtOCAxMi04IDEycy04LTYtOC0xMmE4IDggMCAwIDEgMTYgMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+Cg=="); }
.report-page h2[data-icon="list"]::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSI4IiB5MT0iNiIgeDI9IjIxIiB5Mj0iNiIvPjxsaW5lIHgxPSI4IiB5MT0iMTIiIHgyPSIyMSIgeTI9IjEyIi8+PGxpbmUgeDE9IjgiIHkxPSIxOCIgeDI9IjIxIiB5Mj0iMTgiLz48bGluZSB4MT0iMyIgeTE9IjYiIHgyPSIzLjAxIiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB5MT0iMTIiIHgyPSIzLjAxIiB5Mj0iMTIiLz48bGluZSB4MT0iMyIgeTE9IjE4IiB4Mj0iMy4wMSIgeTI9IjE4Ii8+PC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSI4IiB5MT0iNiIgeDI9IjIxIiB5Mj0iNiIvPjxsaW5lIHgxPSI4IiB5MT0iMTIiIHgyPSIyMSIgeTI9IjEyIi8+PGxpbmUgeDE9IjgiIHkxPSIxOCIgeDI9IjIxIiB5Mj0iMTgiLz48bGluZSB4MT0iMyIgeTE9IjYiIHgyPSIzLjAxIiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB5MT0iMTIiIHgyPSIzLjAxIiB5Mj0iMTIiLz48bGluZSB4MT0iMyIgeTE9IjE4IiB4Mj0iMy4wMSIgeTI9IjE4Ii8+PC9zdmc+Cg=="); }

.report-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.report-actions form { margin: 0; }
.report-share-link { display: flex; gap: 6px; align-items: center; }
.report-share-link input {
  font-size: 12.5px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; width: 240px; max-width: 40vw; background: var(--canvas); font-family: inherit;
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
/* Generic (unscoped) .btn-primary for report-actions on the demo page -
   .report-form/.report-paywall already have their own scoped .btn-primary,
   but nothing outside those existed here yet for the demo's PDF button. */
.report-actions .btn-primary {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #fff;
  font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 8px;
  cursor: pointer; border: none; box-shadow: 0 3px 10px rgba(200,146,46,.35);
  transition: filter .15s, transform .15s;
}
.report-actions .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Small centered "building your report" card over a dimmed backdrop (not a
   full-screen navy takeover - direct feedback on the first version) while
   the form's real GET navigation is in flight - see the trigger script at
   the bottom of property_report.html for why this is a timed animation,
   not real progress. */
#report-loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 20, 30, .55);
  align-items: center; justify-content: center;
}
#report-loading-overlay.active { display: flex; }
.report-loading-box {
  width: 100%; max-width: 300px; padding: 28px 26px; text-align: center;
  background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.report-loading-spinner {
  width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--line-soft, #f0f2f5); border-top-color: var(--gold-light, #e0ac4a);
  animation: report-spin 0.9s linear infinite;
}
@keyframes report-spin { to { transform: rotate(360deg); } }
.report-loading-title { color: var(--ink, #16202c); font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.report-loading-steps { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-direction: column; gap: 2px; }
.report-loading-steps li {
  display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; text-align: left;
  color: var(--ink-faint, #8a94a3); transition: color .2s;
}
.report-loading-steps li::before {
  content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--line, #e6e9ee); transition: border-color .2s, background .2s;
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
}
.report-loading-steps li.active { color: var(--ink, #16202c); font-weight: 600; }
.report-loading-steps li.active::before {
  border-color: var(--gold-light, #e0ac4a);
  box-shadow: 0 0 0 3px rgba(224,172,74,.18);
}
.report-loading-steps li.done { color: var(--ink, #16202c); }
.report-loading-steps li.done::before {
  border-color: var(--gold-light, #e0ac4a); background-color: var(--gold-light, #e0ac4a);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312293a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Banner on the fixed /demo/ page - real report content, but the address
   is fixed and there's no owner/paywall, so it must never be mistaken for
   the user's own report (see report_views.demo_report_view). */
/* Smaller, single row - direct feedback that the banner was too big and
   the CTA wrapped onto its own line below the text instead of sitting
   next to it. Text lives in its own flex child (.demo-banner-text) so it
   can wrap internally without pushing the button down - the button stays
   flex:none, always on the same row. */
.demo-banner {
  margin: 0 0 14px; padding: 8px 14px; border-radius: var(--radius, 10px);
  background: linear-gradient(135deg, #12293a, #1c3f57); color: #f4f6f8;
  font-size: 12px; line-height: 1.4; display: flex; align-items: center; gap: 12px;
}
.demo-banner-text { flex: 1; min-width: 0; }
.demo-banner strong { color: #e0ac4a; }
.demo-banner-cta {
  flex: none; background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #fff;
  font-weight: 700; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: 11.5px;
  white-space: nowrap;
}
@media (max-width: 460px) {
  .demo-banner { flex-wrap: wrap; }
}

/* "Ko pārbaudīt pirms pirkuma" - flag-based, not a fabricated numeric
   score: this project only has enough real data to say "these specific
   things are worth checking", not enough to responsibly calibrate a
   single 0-100 number the way a full property-inspection service could. */
.risk-flags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.risk-flag {
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5;
  border-left: 3px solid var(--line);
}
.risk-flag strong { display: block; margin-bottom: 2px; }
.risk-flag-warn { background: #fdf3e7; border-left-color: #c8922e; color: #6b4a10; }
.risk-flag-info { background: var(--canvas, #f6f7f9); border-left-color: var(--line); color: var(--ink-faint); }

/* Sticky in-page tab nav (see report-nav.js) - lets the report be jumped
   around instead of one long undifferentiated scroll. Horizontal-scrolls
   on narrow screens rather than wrapping, so it stays one row. */
.report-tabs {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; margin-bottom: 16px; box-shadow: var(--shadow-sm); scrollbar-width: none;
}
.report-tabs::-webkit-scrollbar { display: none; }
.report-tabs a {
  flex: none; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; transition: background .15s, color .15s;
}
.report-tabs a:hover { background: var(--canvas); color: var(--ink); }
.report-tabs a.active { background: var(--brand); color: #fff; }
.report-tab-section { scroll-margin-top: 64px; }

/* Kopsavilkums dashboard tile grid - re-presents data the report already
   computes elsewhere (see report_views.py's _build_summary_tiles), not new
   fetches. good/caution/risk extend the same vocabulary .risk-flag-warn/
   -info already used below, plus a genuine "good" tier neither needed
   until now. The combined numeric risk score this grid used to include
   alongside these tiles was removed - direct feedback that the single
   0-100 blend wasn't a trustworthy read; the underlying per-category tiles
   (heating/water debt, energy class, encumbrances) stay, since each one is
   a plain fact, not a synthesized judgment call. */
/* Flex row, each tile flex:1 - full container width (matching every other
   full-width block on the page), and when there are more tiles than
   comfortably fit, they shrink together to stay on one row rather than
   wrapping - direct feedback ("same width as other things", "if more
   don't fit, make them smaller and fit"). min-width:0 is what actually
   lets a flex item shrink below its content's natural width. */
.summary-tiles { display: flex; gap: 10px; }
.summary-tile {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.summary-tile-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-tile-good { border-left-color: #0a7a4e; }
.summary-tile-caution { border-left-color: #c8922e; }
.summary-tile-risk { border-left-color: #c0392b; }
.summary-tile-neutral { border-left-color: var(--brand); }
.summary-tile-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.summary-tile-value { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 3px; line-height: 1.25; }
.summary-tile-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

/* Optional intake-form fields, collapsed by default (<details>, no JS) -
   direct feedback that unit/rooms/area/floor being always-visible made the
   form feel heavier than the one required input (address) warrants. Opens
   automatically when a previous submission already used one of them (see
   the `open` attribute in property_report.html), so returning to refine a
   report doesn't hide what's already filled in. */
.report-form-extra-toggle { border-top: 1px solid var(--line); padding-top: 10px; }
.report-form-extra-toggle summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); list-style: none; user-select: none;
}
.report-form-extra-toggle summary::-webkit-details-marker { display: none; }
.report-form-extra-toggle summary::before { content: "+ "; }
.report-form-extra-toggle[open] summary::before { content: "− "; }
.report-form-extra-toggle .report-form-extra { margin-top: 12px; }

@media (max-width: 640px) {
  .report-tabs { top: 0; }

  /* The desktop "shrink to fit one row" layout squeezes 5 tiles into
     illegible slivers on a phone (direct bug report, confirmed against a
     screenshot) - real UI needed, not a smaller version of the same
     layout: one unified card, each stat its own full-width row so the
     value text (e.g. "28 000 - 69 000 EUR") never gets ellipsis-truncated. */
  .summary-tiles {
    flex-direction: column; gap: 0; border-radius: var(--radius-sm);
    overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 18px;
  }
  .summary-tile {
    border-radius: 0; box-shadow: none; border: none; border-left: 4px solid var(--line);
    border-bottom: 1px solid var(--line-soft); padding: 13px 16px;
  }
  .summary-tile:last-child { border-bottom: none; }
  .summary-tile-value { white-space: normal; overflow: visible; text-overflow: clip; }
}

@media print {
  .no-print, .navbar, .site-header, .report-form, .report-form-extra { display: none !important; }
  body { background: #fff !important; }
  .report-hero {
    background: #fff !important; color: #111 !important;
    border: 1px solid #ccc !important; box-shadow: none !important;
  }
  .report-hero * { color: #111 !important; }
  .section-block, .report-grid-2 > * { box-shadow: none !important; border: 1px solid #ccc !important; }
  #report-map, .street-view-frame { display: none !important; }
  a { color: #111 !important; text-decoration: none !important; }
  .report-page { max-width: 100% !important; }
}