/* flatradar - DEEP PROPERTY REPORT, shared styles (loaded by /city/{slug} AND /app).
   Moved out of city.css when the report became a shared surface: /app result cards open the SAME
   modal as the price-map cards, so the two must never drift apart visually.

   TWO RULES FOR THIS FILE, both paid for in blood (ЛОВУШКА №28):
   1. NEVER write a bare asterisk-slash pair inside a comment. An earlier header listed the design
      tokens as "--ink" followed by a star and a slash - that sequence CLOSED the comment, the rest
      of the header became invalid CSS, and the parser skipped forward and ate the very next rule
      (.report-modal). The shell lost its position-fixed + display-flex, so the absolutely-positioned
      backdrop still covered the page while the panel collapsed to 0x0 at the bottom of the
      document: a grey screen and no report. Write token names plainly, no glob patterns.
   2. EVERY var() here carries a fallback. This module is mounted on host pages with different
      palettes (/city defines --brick, /app does not), and a shared component must never render
      invisibly because the host happened not to define one token. tests/test_report_assets.py
      enforces both rules. */
/* modal shell — CENTRED dialog on desktop, full-screen sheet on phones (media query below).
   It used to be a right-hand drawer (justify-content: flex-end + a full-height panel). The owner
   asked for a centred modal: a report is something you STOP and read, not a side rail you keep
   glancing at, and centring puts the summary block under the eye instead of at the screen edge.
   The panel is height:auto and capped at 88vh, so short reports are a compact card and long ones
   scroll INSIDE .rm-body while the page behind stays frozen (body.rm-open). */
.report-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  justify-content: center; align-items: center; padding: 24px 16px; }
.report-modal[hidden] { display: none; }                 /* ЛОВУШКА №16 */
body.rm-open { overflow: hidden; }
.rm-backdrop { position: absolute; inset: 0; background: rgba(6,16,12,.46);
  backdrop-filter: saturate(1.1) blur(3px); -webkit-backdrop-filter: saturate(1.1) blur(3px); }
.rm-panel { position: relative; z-index: 1; width: min(720px, 92vw); max-height: 88vh; background: var(--surface, var(--card, #fffefb));
  border: 1px solid var(--line, var(--border, #e2ddd0)); border-radius: 16px;
  box-shadow: var(--shadow-md, 0 14px 34px -20px rgba(9,40,29,.30)); display: flex; flex-direction: column;
  animation: rm-up .22s ease-out both; }
@keyframes rm-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.rm-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--line-soft, #eae5d9);
  border-radius: 50%; background: var(--surface-2, var(--card-hover, #faf8f2)); color: var(--ink-soft, var(--muted, #47554e)); font-size: 15px; cursor: pointer; line-height: 1; }
.rm-close:hover { color: var(--ink, var(--text, #14201b)); border-color: var(--line, var(--border, #e2ddd0)); }
/* min-height: 0 is load-bearing — a flex item defaults to min-height:auto, which refuses to shrink
   below its content, so without it a long report would grow the panel past max-height instead of
   scrolling inside it. */
.rm-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 32px; }

/* modal shared bits */
.rm-h { margin: 0 0 6px; font-family: var(--display, system-ui, sans-serif); font-weight: 750; font-size: 1.15rem;
  letter-spacing: -.02em; padding-right: 36px; }
.rm-lead { margin: 0 0 14px; color: var(--ink-soft, var(--muted, #47554e)); font-size: 14px; line-height: 1.5; }
.rm-why { margin: 12px 0 0; font-size: 12px; color: var(--ink-faint, #7c8880); }
.rm-btn { padding: 9px 16px; border: 0; border-radius: 10px; background: var(--accent, #0f9d6b);
  color: var(--accent-ink, #053322); font-family: var(--display, system-ui, sans-serif); font-weight: 700; font-size: 14px; cursor: pointer; }
.rm-btn:hover { background: var(--accent-2, #0b7d54); }

/* states: loading / register / quota / error */
.rep-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 12px;
  color: var(--ink-soft, var(--muted, #47554e)); font-size: 14px; text-align: center; }
.rep-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line, var(--border, #e2ddd0));
  border-top-color: var(--accent, #0f9d6b); animation: rep-spin .8s linear infinite; }
@keyframes rep-spin { to { transform: rotate(360deg); } }
.rep-reg-form { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.rep-reg-form input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, var(--border, #e2ddd0));
  background: var(--surface-2, var(--card-hover, #faf8f2)); color: var(--ink, var(--text, #14201b)); font-size: 15px; font-family: inherit; }
.rep-reg-form input:focus { outline: none; border-color: var(--accent, #0f9d6b); }
.rep-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--brick, #a23c1a); min-height: 1em; }
.rep-error { text-align: center; padding: 48px 12px; color: var(--ink-soft, var(--muted, #47554e));
  display: flex; flex-direction: column; gap: 16px; align-items: center; }
.rep-left { margin: 12px 0 0; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink-faint, #7c8880); }

/* report head */
.rep-head { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft, #eae5d9); }
.rep-sub { margin: 4px 0 0; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink-soft, var(--muted, #47554e)); }
.rep-aibusy { margin: 8px 0 0; font-size: 12px; color: var(--amber, #c9741a); }

/* summary-first block: the four numbers a buyer decides on, above the accordion. Ten stacked
   sections meant the owner could not take the report in at a glance, so the decision data is
   hoisted; the sections below still hold every number in full. */
.rep-summary { margin: 12px 0 4px; }
.rep-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.rep-tile { padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line-soft, #eae5d9);
  background: var(--surface-2, var(--card-hover, #faf8f2)); display: flex; flex-direction: column; gap: 3px; }
.rep-tile-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint, #7c8880); }
.rep-tile-v { font-family: var(--mono, ui-monospace, monospace); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink, var(--text, #14201b)); }
.rep-tile-v.good { color: var(--accent-2, #0b7d54); }
.rep-tile-v.warn { color: var(--brick, #a23c1a); }
.rep-tile-empty { font-family: var(--display, system-ui, sans-serif); font-size: 12px; font-weight: 500;
  color: var(--ink-faint, #7c8880); }
.rep-summary .rep-badges { margin-bottom: 9px; }
.rep-badge.good { color: var(--accent-2, #0b7d54); border-color: color-mix(in srgb, var(--accent, #0f9d6b) 45%, var(--line, var(--border, #e2ddd0)));
  background: color-mix(in srgb, var(--accent, #0f9d6b) 10%, transparent); }

/* report sections — a native details/summary accordion. The three most valuable open by default;
   the rest ship collapsed with their titles visible, so the reader sees what exists without
   scrolling through it. Collapsed content stays in the DOM — folded, never dropped. */
.rep-sec { border-bottom: 1px solid var(--line-soft, #eae5d9); }
.rep-sec:last-child { border-bottom: 0; }
.rep-sec-title { margin: 0; padding: 13px 22px 13px 0; position: relative; cursor: pointer;
  font-family: var(--display, system-ui, sans-serif); font-weight: 700; font-size: 14px;
  letter-spacing: -.01em; color: var(--ink, var(--text, #14201b)); list-style: none; min-height: 44px;
  display: flex; align-items: center; }
.rep-sec-title::-webkit-details-marker { display: none; }
.rep-sec-title::after { content: "⌄"; position: absolute; right: 4px; top: 50%; margin-top: -13px;
  font-size: 15px; line-height: 1; color: var(--ink-faint, #7c8880); transition: transform .16s ease-out; }
.rep-sec[open] > .rep-sec-title::after { transform: rotate(180deg); margin-top: -5px; }
.rep-sec-title:hover { color: var(--accent-2, #0b7d54); }
.rep-sec-title:focus-visible { outline: 2px solid var(--accent, #0f9d6b); outline-offset: 2px; border-radius: 6px; }
.rep-sec-body { padding-bottom: 14px; font-size: 13.5px; color: var(--ink-soft, var(--muted, #47554e)); line-height: 1.5; }
.rep-text { margin: 0 0 6px; color: var(--ink, var(--text, #14201b)); }
.rep-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint, #7c8880); line-height: 1.45; }
.rep-muted { margin: 0; color: var(--ink-faint, #7c8880); font-size: 12.5px; }
.rep-stat { margin: 4px 0; }
.rep-stat b { font-family: var(--mono, ui-monospace, monospace); color: var(--ink, var(--text, #14201b)); }
.rep-scope { margin: 0 0 6px; font-weight: 650; color: var(--ink, var(--text, #14201b)); }

/* price hero + comparison */
.rep-hero-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rep-hero { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 24px; color: var(--ink, var(--text, #14201b)); letter-spacing: -.02em; }
.rep-hero.good { color: var(--accent-2, #0b7d54); }                /* below market = brand green */
.rep-verdict { font-size: 12.5px; color: var(--ink-faint, #7c8880); }
.rep-cmp { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink-soft, var(--muted, #47554e)); }
.rep-vs { color: var(--ink-faint, #7c8880); }

/* labelled fields + chip lists (red flags = warning, bargains = green) */
.rep-field { margin: 8px 0 0; }
.rep-flabel { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint, #7c8880); margin-bottom: 5px; }
.rep-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rep-chips li { padding: 6px 10px; border-radius: 9px; background: var(--surface-2, var(--card-hover, #faf8f2));
  border: 1px solid var(--line-soft, #eae5d9); font-size: 12.5px; color: var(--ink, var(--text, #14201b)); }
.rep-chips.warn li { border-color: color-mix(in srgb, var(--brick, #a23c1a) 55%, var(--line, var(--border, #e2ddd0)));
  background: color-mix(in srgb, var(--brick, #a23c1a) 9%, var(--surface, var(--card, #fffefb))); color: var(--brick, #a23c1a); }
.rep-chips.good li { border-color: color-mix(in srgb, var(--accent, #0f9d6b) 45%, var(--line, var(--border, #e2ddd0)));
  background: color-mix(in srgb, var(--accent, #0f9d6b) 9%, var(--surface, var(--card, #fffefb))); color: var(--accent-2, #0b7d54); }
.rep-warn { color: var(--brick, #a23c1a); }
.rep-good { color: var(--accent-2, #0b7d54); }

/* condition badges */
.rep-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rep-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  background: var(--surface-2, var(--card-hover, #faf8f2)); border: 1px solid var(--line-soft, #eae5d9); color: var(--ink-soft, var(--muted, #47554e)); }
.rep-badge.warn { color: var(--brick, #a23c1a); border-color: color-mix(in srgb, var(--brick, #a23c1a) 50%, var(--line, var(--border, #e2ddd0)));
  background: color-mix(in srgb, var(--brick, #a23c1a) 10%, transparent); }

/* sold comp rows */
.rep-sales { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rep-sales li { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink-soft, var(--muted, #47554e));
  padding: 5px 9px; border-radius: 8px; background: var(--surface-2, var(--card-hover, #faf8f2)); border: 1px solid var(--line-soft, #eae5d9); }

/* renovation outlook — an ESTIMATE: muted body + amber badge, never a hard fact */
.rep-sec-estimate .rep-sec-body { opacity: .92; }
.rep-outlook { border-left: 3px solid color-mix(in srgb, var(--amber, #c9741a) 60%, var(--line, var(--border, #e2ddd0))); padding-left: 11px; }
.rep-estimate { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--amber, #c9741a); background: color-mix(in srgb, var(--amber, #c9741a) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber, #c9741a) 45%, var(--line, var(--border, #e2ddd0))); }

/* neighborhood — 🟢 amenity groups + 🔴 nuisance warnings (an OSM estimate) */
.rep-nb-group { margin: 8px 0 0; }
.rep-nb-group:first-child { margin-top: 0; }
.rep-nb-warn { margin-top: 8px; }

/* same building — OTHER active listings in the same building (grounded, additive) */
.rep-sb-list li a { color: var(--ink-soft, var(--muted, #47554e)); text-decoration: none; }
.rep-sb-list li a:hover { color: var(--ink, var(--text, #14201b)); text-decoration: underline; }


/* --- the CTA + lock teaser that OPEN this modal (rendered on /city cards and /app result cards) --
   A signed-out visitor sees an inviting gate, never silence: 🔒 on the button + a one-line teaser
   under it ("register -> 1 free report a day - with a code -> unlimited"). Same lock-teaser idea as
   the investor feed, sized as a real finger target (>=44px). */
.rep-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--accent, #0f9d6b);
  color: var(--accent-ink, #053322); font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; }
.rep-cta:hover { background: var(--accent-2, #0b7d54); }
.rep-cta.is-locked { background: var(--surface-2, var(--card-hover, #faf8f2)); color: var(--ink, var(--text, #14201b)); border: 1px solid var(--line, var(--border, #e2ddd0)); }
.rep-cta.is-locked:hover { border-color: var(--accent, #0f9d6b); background: var(--surface, var(--card, #fffefb)); }
.rep-teaser { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-faint, #7c8880); }
.rep-teaser[hidden] { display: none; }                   /* ЛОВУШКА №16 */
.rep-lock-mark { font-size: 1.7rem; line-height: 1; margin-bottom: 6px; }
.rep-unlimited { margin-top: 4px; }

/* deep-report modal = full-screen sheet on phones (owner tests on phone). Unchanged behaviour when
   the desktop shell became a centred dialog: the sheet still fills the viewport edge to edge, so
   the padding/rounding/max-height of the centred card are all reset here. */
@media (max-width: 760px) {
  .report-modal { justify-content: stretch; align-items: stretch; padding: 0; }
  .rm-panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .rm-body { padding: 20px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .report-modal *, .rm-panel { animation: none !important; transition: none !important; }
}