/* Рынок сегодня (2026-09-25). A report, not a dashboard: six numbers, two medians, the most active
   ЖК and what just happened. No gauges, no red-and-green trading colours — a disappearance from a
   source is quiet grey, because it is a gap in data, not a disaster. */

.market-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  width: 100%; max-width: 1180px; margin: 0 auto; }

/* The heading belongs to the same column as the report. */
:root[data-page="market"] #market .view-title { max-width: 1180px; margin: 0 auto; }

.market-subtitle { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.5;
  color: var(--ink-2); }

.market-periods { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; width: max-content;
  max-width: 100%; border: 0; border-radius: 12px; background: var(--tabs-track, #EEF2F0); }
.market-period { padding: 8px 16px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.market-period:hover { color: var(--brand-primary, #1f4d3a); }
.market-period.is-active { background: var(--brand-primary); color: #fff;
  box-shadow: 0 4px 12px rgba(31,77,58,.18); }

.market-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.market-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.market-section-title { margin: 0; font-size: 20px; line-height: 1.25; color: var(--ink); }
.market-section-note { margin: -4px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--ink-muted, var(--ink-2)); }

/* ---- the six figures ------------------------------------------------------------------------ */

.market-summary { display: grid; gap: 10px; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.market-summary-item { display: grid; gap: 2px; align-content: start; padding: 14px 16px;
  min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); }
.market-summary-value { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink); }
.market-summary-label { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.market-summary-note { margin-top: 2px; font-size: 11.5px; line-height: 1.4;
  color: var(--ink-muted, var(--ink-2)); }
/* A disappearance is a gap in the source, not an event to shout about. */
.market-summary-quiet .market-summary-value { color: var(--ink-2); }

/* ---- medians and inventory -------------------------------------------------------------------- */

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

.market-inventory { margin: 0; font-size: 13px; color: var(--ink-muted, var(--ink-2)); }

/* ---- the most active ЖК ------------------------------------------------------------------------ */

.market-projects { display: grid; gap: 12px; min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.market-project { display: grid; gap: 6px; align-content: start; padding: 16px; min-width: 0; }
.market-project-name { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); }
.market-project-name a { color: inherit; text-decoration: none; }
.market-project-name a:hover { color: var(--brand-primary, #1f4d3a); }
.market-project-city { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.market-project-count { margin: 2px 0 4px; font-size: 20px; font-weight: 700; color: var(--ink); }
.market-project-rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.market-project-rows li { display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-2); }
.market-project-rows b { color: var(--ink); }
.market-project-removed { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 0;
  padding-top: 6px; border-top: 1px solid var(--border); font-size: 12.5px;
  color: var(--ink-muted, var(--ink-2)); }
.market-project-removed b { font-weight: 600; color: var(--ink-2); }
.market-project-note { margin: 2px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--ink-muted, var(--ink-2)); }

/* ---- what just happened ------------------------------------------------------------------------- */

.market-events { display: grid; gap: 14px; margin: 0; padding: 2px 0 2px 16px; min-width: 0;
  border-left: 1px solid var(--border); list-style: none; }
.market-event { display: grid; gap: 4px; min-width: 0; }
.market-event-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.market-event-time { font-size: 12.5px; color: var(--ink-2); }
.market-event-where { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  overflow-wrap: anywhere; }
.market-event-project,
.market-event-flat { color: var(--ink); text-decoration: none; }
.market-event-project:hover,
a.market-event-flat:hover { color: var(--brand-primary, #1f4d3a); }
.market-event-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0; font-size: 13.5px; color: var(--ink); }
.market-event-price { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.market-event-quiet { margin: 0; font-size: 13px; color: var(--ink-muted, var(--ink-2)); }
.market-event-muted .market-event-where { color: var(--ink-muted, var(--ink-2)); }
.market-delta-down { font-weight: 700; color: var(--good); }
.market-delta-up { font-weight: 700; color: var(--critical); }

.market-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; }
.market-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); }
.market-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); }
.market-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"] .market-badge-reserved { color: #e0a94a; }
/* Removed stays grey on purpose: no red warning for a flat we simply stopped seeing. */
.market-badge-removed { color: var(--ink-muted, var(--ink-2)); }

/* ---- empty, error, loading ---------------------------------------------------------------------- */

.market-empty { margin: 0; padding: 30px 16px; text-align: center; font-size: 14px;
  line-height: 1.6; color: var(--ink-2); }
.market-error { margin: 0; font-size: 13.5px; line-height: 1.5; color: #b42318; }
:root[data-theme="dark"] .market-error { color: #ff6b6b; }

.market-skeleton { display: grid; gap: 16px; }
.market-skeleton-card, .market-skeleton-line { border-radius: var(--radius-card);
  background: var(--surface-2); animation: market-pulse 1.2s ease-in-out infinite; }
.market-skeleton-card { min-height: 86px; }
.market-skeleton-tall { min-height: 180px; }
.market-skeleton-line { height: 14px; max-width: 320px; border-radius: 8px; }
@keyframes market-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* ---- the entry point used elsewhere -------------------------------------------------------------- */

.market-entry { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  text-decoration: none; }
.market-entry:hover { border-color: var(--brand-primary, #1f4d3a); }
.market-entry-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.market-entry-facts { font-size: 13px; font-weight: 600; color: var(--brand-primary, #1f4d3a);
  white-space: nowrap; }

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

@media (max-width: 640px) {
  .market-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-summary-item { padding: 12px 14px; }
  .market-summary-value { font-size: 24px; }
  .market-section-title { font-size: 18px; }
  .market-projects { grid-template-columns: minmax(0, 1fr); }
  .market-events { padding-left: 12px; gap: 12px; }
  .market-periods { width: 100%; }
  .market-period { flex: 1 1 auto; text-align: center; }
  .market-entry { width: 100%; justify-content: space-between; }
}

/* Project photo on top of an activity card: the same 480/960 previews as the other cards, edge to edge. */
.market-project { overflow: hidden; }
.market-project-media { height: 120px; margin: -16px -16px 6px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface-2)); }
.market-project-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) { .market-project-media { height: 150px; } }

/* V4: buttons are 10px controls, not pills. */
.market-entry{border-radius:10px;}

/* ---- «Последние события», 2026-10-06 -------------------------------------------------------------
   A preview, not a feed: up to twelve compact rows in two columns on desktop, on one white panel
   with hairlines between rows. Colour marks the kind of event (mark, label, amount) - never the
   whole row. The page column is as wide as the rest of the site's desktop pages. */
.market-page { max-width: 1400px; }
.market-events-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-width: 0; }
.market-events-head .market-section-note { margin: 4px 0 0; }
.market-events-all { flex: none; font-size: 14px; font-weight: 700; color: var(--brand-primary, #1f4d3a);
  text-decoration: none; white-space: nowrap; }
.market-events-all:hover { text-decoration: underline; }
.market-events { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin: 0; padding: 4px 18px;
  list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card, 16px);
  background: var(--surface); box-shadow: var(--shadow-card); }
.market-event { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 66px; padding: 9px 0; border-bottom: 1px solid var(--gridline, #E6ECE8); min-width: 0; }
.market-event:last-child { border-bottom: 0; }
.market-event-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; line-height: 1; color: var(--mk-tone, var(--ink-2));
  background: color-mix(in srgb, var(--mk-tone, var(--ink-2)) 12%, var(--surface)); }
.market-event-body { display: grid; gap: 3px; min-width: 0; }
.market-event-where { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-event-project { font-size: 14.5px; font-weight: 700; color: var(--ink-strong, var(--ink)); }
.market-event-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0;
  font-size: 13px; line-height: 1.35; }
.market-event-line .market-badge { padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 13px; font-weight: 700; color: var(--mk-tone, var(--ink-2)); }
.market-event-line .market-event-prices,
.market-event-line .market-event-price,
.market-event-line .market-event-quiet { margin: 0; font-size: 13px; }
.market-event-line .market-event-prices { gap: 2px 8px; color: var(--ink-2); }
.market-event-line .market-event-price { font-weight: 600; color: var(--ink); }
.market-event-line .market-delta-down,
.market-event-line .market-delta-up { font-weight: 700; color: var(--mk-tone); }
.market-event-time { align-self: start; padding-top: 3px; font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-event--drop { --mk-tone: var(--semantic-positive, #138253); }
.market-event--increase { --mk-tone: var(--semantic-negative, #B33A3A); }
.market-event--new { --mk-tone: var(--accent-teal, #4F7270); }
.market-event--returned { --mk-tone: var(--brand-primary, #1f4d3a); }
.market-event--reserved { --mk-tone: var(--semantic-warning, #B97909); }
.market-event--removed, .market-event--default { --mk-tone: var(--ink-muted, #8A908C); }
:root[data-theme="dark"] .market-event--returned { --mk-tone: #8fdcb4; }
@media (min-width: 900px) {
  .market-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the hairline under the last row of each column goes away */
  .market-event:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (max-width: 767px) {
  .market-events { padding: 2px 12px; }
  .market-event { gap: 10px; min-height: 62px; }
}
@media (max-width: 767px) {
  /* on a phone the row keeps the change itself; the «было → стало» pair is one tap away */
  .market-event-line .market-event-prices span:first-child { display: none; }
}