/* Паспорт застройщика V2 (2026-09-26). A factual page, not a pitch. The hero uses an existing
   city panorama as a visual anchor, reliability is only ever shown when the backend provides it,
   and the 30-day activity block stays market activity. */

:root {
  --dev-page-bg: var(--page, #F6F8F7);
  --dev-card-bg: var(--surface, #ffffff);
  --dev-border: var(--border, #e2e2dd);
  --dev-text: var(--ink, #171714);
  --dev-muted: var(--ink-2, #575756);
  --dev-faint: var(--ink-muted, #8a8a86);
  --dev-brand: var(--brand-primary, #1f4d3a);
  --dev-radius: var(--radius-card, 14px);
}
:root[data-theme="dark"] {
  --dev-page-bg: #111113;
  --dev-card-bg: var(--surface, #1c1c1e);
  --dev-border: var(--border, #2c2c2e);
  --dev-text: var(--ink, #f2f2ef);
  --dev-muted: var(--ink-2, #b7b7af);
  --dev-faint: var(--ink-muted, #7e7e78);
}

.dev-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  width: 100%; max-width: 1180px; margin: 0; min-width: 0;
  background: var(--dev-page-bg); color: var(--dev-text); }

/* The developer's own name is the page's heading now, so the shell's «Паспорт застройщика» would
   be a second h1 saying less. It stays for screen readers and leaves the layout. */
:root[data-page="developer"] #developer .view-title { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- back link ---------- */

/* A text link, not a pill: going back is not the main thing you do here. */
.dev-developers-back { display: inline-block; justify-self: start; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--dev-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.dev-developers-back:hover { color: var(--dev-brand); text-decoration: underline; }
.dev-developers-back:focus-visible { outline: 2px solid var(--dev-brand); outline-offset: 3px;
  border-radius: 4px; }

/* ---------- hero ---------- */

/* The photograph is shown at full strength; the text gets a local scrim on its own side. No
   page-wide white veil - the picture is the point of the block. */
.dev-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0; min-height: 260px; max-height: 320px; padding: 22px 24px; overflow: hidden;
  border-radius: var(--dev-radius); color: #fff;
  background-image:
    linear-gradient(100deg, rgba(8,12,18,.78) 0%, rgba(8,12,18,.45) 42%, rgba(8,12,18,0) 76%),
    var(--dev-hero-img);
  background-size: auto, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat; }
.dev-hero-copy { display: grid; gap: 4px; max-width: 64ch; min-width: 0; }

.dev-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.82); }
.dev-name { margin: 0; font-size: 38px; line-height: 1.12; color: #fff; overflow-wrap: anywhere;
  text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.dev-subtitle { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.94);
  overflow-wrap: anywhere; }
.dev-fineprint { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.74); }
.dev-related { margin: 4px 0 0; padding-left: 10px; min-width: 0;
  border-left: 2px solid rgba(255,255,255,.5); font-size: 12px; line-height: 1.45;
  color: rgba(255,255,255,.8); }

/* ---------- reliability: the page's second subject, right under the hero ---------- */

.dev-reliability-card { display: grid; gap: 14px; padding: 18px; min-width: 0;
  border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); }
/* With a score, the number leads and the components stand beside it. */
.dev-reliability-card--score { grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px;
  align-items: start; }
.dev-reliability-scoreline { display: grid; justify-items: center; gap: 2px; min-width: 0;
  padding-right: 20px; border-right: 1px solid var(--dev-border); }
.dev-reliability-score { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--dev-text); }
.dev-reliability-score-max { font-size: 13px; font-weight: 500; color: var(--dev-muted); }
.dev-reliability-main { display: grid; gap: 10px; min-width: 0; }
.dev-reliability-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--dev-text);
  overflow-wrap: anywhere; }
.dev-reliability-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--dev-brand); }
.dev-reliability-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dev-muted);
  overflow-wrap: anywhere; }
.dev-reliability-confidence { margin: 0; font-size: 13px; color: var(--dev-muted); }
.dev-reliability-confidence b { color: var(--dev-text); }
.dev-reliability-details { margin: 0; font-size: 13px; color: var(--dev-muted); }
.dev-reliability-details summary { width: fit-content; cursor: pointer; font-weight: 600;
  color: var(--dev-brand); }
.dev-reliability-details summary:hover { text-decoration: underline; }
.dev-reliability-details summary:focus-visible { outline: 2px solid var(--dev-brand);
  outline-offset: 3px; border-radius: 4px; }
.dev-reliability-details p { margin: 8px 0 0; max-width: 78ch; line-height: 1.55; }
.dev-reliability-sources { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.dev-reliability-sources a { color: var(--dev-brand); text-decoration: none; }
.dev-reliability-sources a:hover { text-decoration: underline; }
.dev-reliability-components { display: grid; gap: 6px; min-width: 0; }
.dev-reliability-component { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--dev-border); border-radius: 10px; font-size: 13.5px; }
.dev-reliability-component-label { font-weight: 600; color: var(--dev-text); overflow-wrap: anywhere; }
.dev-reliability-component-status { color: var(--dev-muted); font-size: 12.5px; text-align: right; }
.dev-reliability-component-note { grid-column: 1 / -1; font-size: 12px; color: var(--dev-faint);
  overflow-wrap: anywhere; }
.dev-reliability-missing { display: grid; gap: 4px; margin: 0; padding-left: 20px; min-width: 0;
  font-size: 13.5px; line-height: 1.5; color: var(--dev-muted); }
.dev-reliability-facts { display: grid; margin: 0; padding: 0; min-width: 0; font-size: 13.5px; }
.dev-reliability-fact { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 16px; padding: 9px 0;
  border-bottom: 1px solid var(--dev-border); }
.dev-reliability-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.dev-reliability-fact dt { color: var(--dev-muted); }
.dev-reliability-fact dd { margin: 0; color: var(--dev-text); font-weight: 600; text-align: right; }

/* ---------- identity ---------- */

.dev-identity-summary { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5;
  color: var(--dev-muted); overflow-wrap: anywhere; }
.dev-entities { display: grid; gap: 10px; min-width: 0; }
.dev-entity { display: grid; gap: 10px; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); }
.dev-entity-name { margin: 0; font-size: 16px; line-height: 1.3; color: var(--dev-text);
  overflow-wrap: anywhere; }
.dev-entity-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; min-width: 0; }
.dev-entity-meta div { display: grid; gap: 2px; min-width: 0; }
.dev-entity-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--dev-muted); }
.dev-entity-meta dd { margin: 0; font-weight: 600; color: var(--dev-text); overflow-wrap: anywhere; }
.dev-entity-sources { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; min-width: 0;
  font-size: 12.5px; }
.dev-entity-sources a,
.dev-entity-project a { color: var(--dev-brand); text-decoration: none; }
.dev-entity-sources a:hover,
.dev-entity-project a:hover { text-decoration: underline; }
.dev-entity-sources a:focus-visible,
.dev-entity-project a:focus-visible { outline: 2px solid var(--dev-brand); outline-offset: 2px; }
.dev-entity-projects { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none;
  min-width: 0; }
.dev-entity-project { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 8px 10px; min-width: 0; border: 1px solid var(--dev-border); border-radius: 10px;
  font-size: 13px; }
.dev-entity-project > span:first-child { font-weight: 600; color: var(--dev-text);
  overflow-wrap: anywhere; }
/* Статус связи с ЖК читается цветом: подтверждено - акцент, вероятно - предупреждение,
   не установлено - нейтральный серый. Сиреневого здесь не было и не появится. */
.dev-entity-status { color: var(--dev-muted); white-space: nowrap; }
.dev-entity-status--confirmed { color: var(--brand-primary); font-weight: 600; }
.dev-entity-status--probable { color: var(--warning); font-weight: 600; }
:root[data-theme="dark"] .dev-entity-status--confirmed { color: #6fbf97; }

/* ---------- KPI: one compact strip, not six boxes ---------- */

.dev-kpi { display: grid; gap: 8px; min-width: 0; }
.dev-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 0;
  overflow: hidden; border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); }
.dev-kpi-item { display: grid; gap: 2px; align-content: center; padding: 12px 14px; min-width: 0;
  border-left: 1px solid var(--dev-border); }
.dev-kpi-item:first-child { border-left: 0; }
.dev-kpi-value { font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--dev-text); overflow-wrap: anywhere; }
.dev-kpi-label { font-size: 11px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dev-muted); overflow-wrap: anywhere; }
.dev-kpi-caption { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--dev-faint);
  overflow-wrap: anywhere; }

/* ---------- 30 days of market activity ---------- */

.dev-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.dev-section-title { margin: 0; font-size: 20px; line-height: 1.25; color: var(--dev-text);
  overflow-wrap: anywhere; }
.dev-activity-note { margin: -2px 0 2px; max-width: 78ch; font-size: 12.5px; line-height: 1.45;
  color: var(--dev-faint); overflow-wrap: anywhere; }
.dev-activity-grid { display: grid; gap: 10px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dev-activity-item { display: grid; gap: 2px; align-content: start; padding: 14px 16px;
  min-width: 0; border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); }
.dev-activity-value { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: var(--dev-text); }
.dev-activity-label { font-size: 12.5px; line-height: 1.4; color: var(--dev-muted); }

.dev-medians { display: grid; gap: 8px; max-width: 560px; min-width: 0; }
.dev-median { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; margin: 0; padding: 12px 16px; min-width: 0;
  border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); font-size: 13.5px; color: var(--dev-muted);
  overflow-wrap: anywhere; }
.dev-median b { font-size: 15px; font-weight: 700; color: var(--dev-text); }

/* ---------- projects ---------- */

.dev-projects-grid { display: grid; gap: 14px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dev-project-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  min-width: 0; overflow: hidden; border: 1px solid var(--dev-border);
  border-radius: var(--dev-radius); background: var(--dev-card-bg);
  transition: border-color .15s ease; }
.dev-project-card:hover { border-color: color-mix(in srgb, var(--dev-brand) 35%, var(--dev-border)); }
.dev-project-cover { display: block; width: 100%; height: 150px; object-fit: cover; }
.dev-project-body { display: grid; gap: 4px; padding: 14px 16px 16px; min-width: 0; }
.dev-project-name { margin: 0; font-size: 16px; line-height: 1.3; color: var(--dev-text);
  overflow-wrap: anywhere; }
.dev-project-city { margin: 0; font-size: 12.5px; color: var(--dev-muted); }
.dev-project-facts { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--dev-muted); }
.dev-project-facts li { overflow-wrap: anywhere; }
.dev-project-link { justify-self: start; margin-top: 8px; color: var(--dev-brand);
  text-decoration: none; font-size: 13px; font-weight: 600; }
.dev-project-link:hover { text-decoration: underline; }
.dev-project-link:focus-visible { outline: 2px solid var(--dev-brand); outline-offset: 3px;
  border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .dev-project-card { transition: none; } }

/* ---------- buyer voice ---------- */

.dev-buyer-summary { margin: 0; font-size: 14px; color: var(--dev-muted); }
.dev-buyer-empty,
.dev-identity-empty { margin: 0; padding: 16px; min-width: 0;
  border: 1px dashed var(--dev-border); border-radius: var(--dev-radius);
  font-size: 13.5px; line-height: 1.55; color: var(--dev-muted); }
.dev-topics { display: grid; gap: 10px; min-width: 0; }
.dev-topic { display: grid; gap: 6px; padding: 12px 14px; min-width: 0;
  border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); }
.dev-topic-head { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 16px; min-width: 0; }
.dev-topic-label { font-size: 14px; font-weight: 600; color: var(--dev-text);
  overflow-wrap: anywhere; }
.dev-topic-count { font-size: 18px; font-weight: 700; color: var(--dev-text); }
.dev-sentiment-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dev-chip { padding: 4px 10px; border: 1px solid var(--dev-border); border-radius: 999px;
  background: var(--dev-page-bg); color: var(--dev-muted); font-size: 12px; line-height: 1.3;
  white-space: nowrap; }

/* ---------- data quality ---------- */

.dev-quality-list { display: grid; gap: 8px; margin: 0; padding: 0; min-width: 0; }
.dev-quality-item { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 12px;
  padding: 10px 14px; min-width: 0; border: 1px solid var(--dev-border);
  border-radius: var(--dev-radius); background: var(--dev-card-bg); font-size: 13.5px; }
.dev-quality-item dt { color: var(--dev-muted); }
.dev-quality-item dd { margin: 0; color: var(--dev-text); overflow-wrap: anywhere;
  text-align: right; }

/* ---------- technical source / blocked state ---------- */

.dev-blocked { display: grid; gap: 16px; justify-items: start; padding: 30px 16px; min-width: 0;
  border: 1px solid var(--dev-border); border-radius: var(--dev-radius);
  background: var(--dev-card-bg); }
.dev-blocked-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dev-muted); }
.dev-back { display: inline-flex; padding: 10px 16px; border: 1px solid var(--dev-border);
  border-radius: 999px; background: var(--dev-page-bg); color: var(--dev-brand);
  text-decoration: none; font-size: 14px; font-weight: 600; }
.dev-back:hover { border-color: var(--dev-brand); }

/* ---------- error and loading ---------- */

.dev-error { margin: 0; padding: 16px; min-width: 0; font-size: 14px; line-height: 1.5;
  color: #b42318; background: color-mix(in srgb, #b42318 6%, transparent);
  border: 1px solid color-mix(in srgb, #b42318 35%, var(--dev-border));
  border-radius: var(--dev-radius); }
:root[data-theme="dark"] .dev-error { color: #ff6b6b;
  background: color-mix(in srgb, #ff6b6b 10%, transparent); }

.dev-skeleton { display: grid; gap: 16px; min-width: 0; }
.dev-skeleton-hero { height: 268px; border-radius: var(--dev-radius); background: var(--dev-card-bg);
  animation: dev-pulse 1.2s ease-in-out infinite; }
.dev-skeleton-line { height: 14px; max-width: 320px; border-radius: 8px;
  background: var(--dev-card-bg); animation: dev-pulse 1.2s ease-in-out infinite; }
.dev-skeleton-grid { display: grid; gap: 10px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dev-skeleton-card { min-height: 86px; border-radius: var(--dev-radius);
  background: var(--dev-card-bg); animation: dev-pulse 1.2s ease-in-out infinite; }
.dev-skeleton-projects { display: grid; gap: 14px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dev-skeleton-tall { min-height: 180px; border-radius: var(--dev-radius);
  background: var(--dev-card-bg); animation: dev-pulse 1.2s ease-in-out infinite; }
@keyframes dev-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .dev-skeleton-hero, .dev-skeleton-line, .dev-skeleton-card, .dev-skeleton-tall { animation: none; }
}

/* ---------- tablets ---------- */

@media (max-width: 1023.98px) {
  .dev-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev-kpi-item:nth-child(3n+1) { border-left: 0; }
  .dev-kpi-item:nth-child(n+4) { border-top: 1px solid var(--dev-border); }
  .dev-name { font-size: 32px; }
}

/* ---------- phones ---------- */

@media (max-width: 767.98px) {
  .dev-page { gap: 14px; }

  /* The panorama gets its upright crop, the same one the rest of the app uses on a phone. */
  .dev-hero { min-height: 180px; max-height: 220px; padding: 16px;
    background-image:
      linear-gradient(180deg, rgba(8,12,18,.24) 0%, rgba(8,12,18,.72) 68%, rgba(8,12,18,.82) 100%),
      var(--dev-hero-img-mobile);
    background-position: 0 0, 62% top; }
  .dev-hero-copy { max-width: none; }
  .dev-eyebrow { font-size: 10.5px; }
  .dev-name { font-size: 26px; }
  .dev-subtitle { font-size: 13.5px; }
  .dev-fineprint { font-size: 11.5px; }

  .dev-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-kpi-item { padding: 10px 12px; }
  .dev-kpi-item:nth-child(odd) { border-left: 0; }
  .dev-kpi-item:nth-child(even) { border-left: 1px solid var(--dev-border); }
  .dev-kpi-item:nth-child(n+3) { border-top: 1px solid var(--dev-border); }
  .dev-kpi-value { font-size: 16.5px; }

  .dev-reliability-card { padding: 14px; }
  .dev-reliability-card--score { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dev-reliability-scoreline { justify-items: start; padding: 0 0 12px; border-right: 0;
    border-bottom: 1px solid var(--dev-border); }
  .dev-reliability-score { font-size: 46px; }
  .dev-reliability-title { font-size: 16px; }
  .dev-reliability-fact { flex-direction: column; gap: 2px; }
  .dev-reliability-fact dd { text-align: left; }

  .dev-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-activity-item { padding: 12px; }
  .dev-activity-value { font-size: 23px; }

  .dev-projects-grid,
  .dev-skeleton-projects { grid-template-columns: minmax(0, 1fr); }
  .dev-project-cover { height: 140px; }
  .dev-project-body { padding: 12px; }

  .dev-quality-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dev-quality-item dd { text-align: left; }

  .dev-skeleton-hero { height: 190px; }
}