/* История квартиры (2026-09-25). A quiet passport for one flat: observed facts, no verdict.
   The figures are large enough to read at a glance but never shout; the chart line is the only
   coloured thing on the block besides the direction of a change. Dark mode rides on the tokens. */

.passport-root { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }

.passport-title { margin: 0; font-size: 21px; line-height: 1.25; color: var(--ink); }
.passport-note { margin: -4px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--ink-muted, var(--ink-2)); }

/* ---- the four figures and the two comparisons ---------------------------------------------- */

.passport-figures { display: grid; gap: 10px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.passport-figure { display: grid; gap: 4px; padding: 12px 14px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.passport-figure-label { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); }
.passport-figure-value { font-size: 20px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink); }

.passport-comparisons { display: grid; gap: 4px; min-width: 0; }
.passport-comparison { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.passport-delta { font-weight: 700; }
.passport-good { color: var(--good); }
.passport-critical { color: var(--critical); }
.passport-neutral { color: var(--ink-2); font-weight: 600; }

/* ---- counters and status -------------------------------------------------------------------- */

.passport-counters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  min-width: 0; font-size: 13px; color: var(--ink-2); }

.passport-status,
.passport-badge { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600;
  line-height: 1.3; white-space: nowrap; }
.passport-status-reserved,
.passport-badge-reserved { border-color: color-mix(in srgb, #b7791f 40%, var(--border));
  color: #8a5a10; background: color-mix(in srgb, #b7791f 8%, transparent); }
:root[data-theme="dark"] .passport-status-reserved,
:root[data-theme="dark"] .passport-badge-reserved { color: #e0a94a; }

/* ---- the step chart --------------------------------------------------------------------------- */

.passport-chart { width: 100%; min-width: 0; }
.passport-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.passport-chart-line { fill: none; stroke: var(--brand-primary); stroke-width: 2;
  stroke-linejoin: round; }
.passport-chart-area { fill: var(--brand-primary); fill-opacity: .08; stroke: none; }
.passport-chart-dot { fill: var(--brand-primary); stroke: var(--surface); stroke-width: 1.5; }
.passport-chart-label { fill: var(--ink-2); font-size: 11px;
  font-family: var(--font-sans, system-ui, sans-serif); }
.passport-chart-label-end { text-anchor: end; }

/* ---- what happened, newest first --------------------------------------------------------------- */

.passport-events { display: grid; gap: 14px; margin: 0; padding: 2px 0 2px 16px; min-width: 0;
  border-left: 1px solid var(--border); list-style: none; }
.passport-event { display: grid; gap: 4px; min-width: 0; }
.passport-event-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  min-width: 0; }
.passport-badge-drop { border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  color: var(--good); background: color-mix(in srgb, var(--good) 8%, transparent); }
.passport-badge-increase { border-color: color-mix(in srgb, var(--critical) 45%, var(--border));
  color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, transparent); }
.passport-event-date { font-size: 12.5px; color: var(--ink-2); }
.passport-event-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0; min-width: 0; font-size: 13.5px; color: var(--ink); }
.passport-event-delta { font-weight: 700; }

.passport-empty { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* ---- when the early history could not be believed ------------------------------------------------ */

.passport-quality { display: grid; gap: 4px; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-2);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.passport-quality p { margin: 0; }

.passport-error { margin: 0; font-size: 13.5px; line-height: 1.5; color: #b42318; }
:root[data-theme="dark"] .passport-error { color: #ff6b6b; }

/* ---- loading ------------------------------------------------------------------------------------- */

.passport-skeleton-title, .passport-skeleton-line,
.passport-skeleton-card, .passport-skeleton-chart { border-radius: 8px; background: var(--surface-2);
  animation: passport-pulse 1.2s ease-in-out infinite; }
.passport-skeleton-title { width: 55%; height: 22px; }
.passport-skeleton-line { width: 85%; height: 13px; }
.passport-skeleton-figures { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.passport-skeleton-card { height: 68px; }
.passport-skeleton-chart { height: 170px; }
@keyframes passport-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

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

@media (max-width: 640px) {
  .passport-title { font-size: 19px; }
  .passport-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passport-figure { padding: 10px 12px; }
  .passport-figure-value { font-size: 17px; }
  .passport-events { padding-left: 12px; gap: 12px; }
  .passport-status, .passport-badge { font-size: 11.5px; padding: 3px 9px; }
}

/* The flat page names its ЖК; now that name is the way back to it. */
.detail-project-link { color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border); }
.detail-project-link:hover { color: var(--brand-primary, #1f4d3a);
  border-bottom-color: currentColor; }