/* Market snapshot on deals hubs and district pages (torquity ADR 0175), the rent-by-city table on country hubs and
   the market search on /deals/ (js/market-search.js). Tokens from parity.css (--p-*). */
/* One inner inset for every market card (search, folded tables), so their contents line up. */
:root { --ms-inset: 28px; }
@media (max-width: 600px) { :root { --ms-inset: 20px; } }
.ms { margin: 24px 0 32px; }
.ms-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.ms-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); color: var(--p-ink); }
.ms-updated { margin: 0; font-size: 14px; color: var(--p-muted-2); }
.ms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ms-kpi { background: var(--p-card); border-radius: var(--p-radius); box-shadow: var(--p-shadow-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ms-kpi--accent { background: var(--p-accent-tint); }
.ms-kpi-label { font-size: 14px; font-weight: 600; color: var(--p-muted); }
.ms-kpi-value { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--p-ink); line-height: 1.1; }
.ms-kpi-value small { font-size: 14px; font-weight: 500; color: var(--p-muted); margin-left: 4px; }
.ms-kpi-sub { font-size: 14px; color: var(--p-muted-2); }
.ms-note { margin: 14px 0 0; font-size: 14px; color: var(--p-muted-2); }
.ms-note p { margin: 0; }
.ms-back { margin: 20px 0 0; font-size: 15px; }

/* ── Intro under a city H1: the answer, then labelled facts ─────────────── */
.ms-lede { margin: 0; font-size: clamp(17px, 1.7vw, 19px); line-height: 1.55; color: var(--p-text); text-wrap: balance; }
.ms-lede strong { color: var(--p-ink); font-weight: 700; white-space: nowrap; }
/* A white card like the tables: the page's background grid must not show between the rows (it read as double lines). */
.ms-facts {
  margin: 18px 0 0; display: grid; gap: 0; padding: 4px var(--ms-inset); background: var(--p-card);
  border-radius: var(--p-radius-sm); box-shadow: var(--p-shadow-card);
}
.ms-fact {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--p-border);
}
.ms-fact:last-child { border-bottom: 0; }
.ms-fact dt {
  font-family: var(--p-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--p-muted);
}
.ms-fact dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--p-text); }
.ms-fact-item { white-space: nowrap; }
@media (max-width: 600px) {
  .ms-fact { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Tables: a card with tabular figures; folded under an H2 + one-line preview ─ */
.ms-table-wrap {
  margin-top: 14px; overflow-x: auto; background: var(--p-card); border-radius: var(--p-radius-sm);
  box-shadow: var(--p-shadow-card);
}
.ms-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ms-table th, .ms-table td { padding: 11px 16px; border-bottom: 1px solid var(--p-border); text-align: left; white-space: nowrap; }
.ms-table tbody tr:last-child > * { border-bottom: 0; }
.ms-table thead th {
  font-family: var(--p-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--p-muted); background: var(--p-accent-tint-2);
}
.ms-table tbody th { font-weight: 600; color: var(--p-ink); font-variant-numeric: normal; }
.ms-table tbody tr:hover { background: var(--p-accent-tint-2); }
.ms-table a { color: var(--p-accent-deep); text-decoration: none; }
.ms-table a:hover { text-decoration: underline; }
.ms-table .num { text-align: right; }
.ms-strong { font-weight: 600; color: var(--p-ink); }
.ms-dim { color: var(--p-muted); }
/* Median as a bar against the dearest row (style="--w: 62%"). */
.ms-bar-col { width: 38%; min-width: 180px; }
.ms-bar-cell { display: flex; align-items: center; gap: 12px; }
.ms-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--p-border); overflow: hidden; }
.ms-bar-fill { display: block; width: var(--w, 0%); height: 100%; border-radius: 3px; background: var(--p-accent); opacity: .75; }
.ms-bar-cell .ms-strong { min-width: 64px; text-align: right; }
/* "Rent map →": the rent calculator opened on the district (?lat&lng&zoom). */
.ms-map-col { width: 1%; text-align: right; }
.ms-table a.ms-map-link {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--p-accent-deep); background: var(--p-accent-tint-2); border: 1px solid var(--p-border);
}
.ms-table a.ms-map-link:hover { text-decoration: none; border-color: var(--p-accent); }

/* "Show all" under a long table (js/market-tables.js): the tail rows hide only once the script runs. */
.ms-table-wrap.is-clipped .ms-row-extra { display: none; }
.ms-show-all {
  display: block; width: 100%; padding: 12px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--p-accent-deep); background: var(--p-accent-tint-2); border: 0; border-top: 1px solid var(--p-border);
}
.ms-show-all:hover { background: var(--p-accent-tint); }
.ms-show-all:focus-visible { outline: none; box-shadow: inset var(--p-focus-ring); }

/* ── Sections: heading + subtitle on the left, the data in a card under it; 56px between sections ── */
.ms-section-head { max-width: var(--container, 1200px); margin: 0 auto 16px; }
.ms-section-title { margin: 0; font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; line-height: 1.25; color: var(--p-ink); }
.ms-section-sub { margin: 6px 0 0; max-width: 760px; font-size: 15px; line-height: 1.55; color: var(--p-muted); }
.ms-section-sub p { margin: 0; }
.ms-block > .ms-table-wrap { margin-top: 0; }
.ms-block + .ms-block { margin-top: 56px; }
.ms-details > .ms-more { margin-top: 56px; }
.ms-faq > .ms-title { margin: 0 0 8px; }

/* Country hub: the sections under the header share one column with the deals grid (--container and its gutter). */
.ms-summary { font-variant-numeric: tabular-nums; }
.ms-zone { max-width: calc(var(--container, 1200px) + 48px); margin: 0 auto; padding: 0 24px; }
.ms-zone + .ms-deals-section { padding-top: 56px; }

/* City / district pages: a data page, wider than the 800px article column (blog posts keep it). */
.blog-post.ms-page { max-width: 1088px; padding-bottom: 32px; position: relative; }
.blog-post.ms-page--hero { padding-top: 0; }  /* the centred .blog-header above it carries the title */
.ms-hero .blog-title { max-width: 920px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.ms-hero .ms-lede { max-width: 720px; margin: 0 auto; }
.ms-page .ms-facts { max-width: none; margin-top: 20px; }

/* Breadcrumbs float in the header's 120px top padding, so a country hub's title starts where /deals/ has it. */
.ms-hero { position: relative; }
.breadcrumbs--float { position: absolute; top: 72px; left: 24px; right: 24px; margin: 0; }

/* Summary first, deals next, the tables and FAQ below. */
.ms-deals { padding: 24px 24px 56px; }
.ms-deals .blog-grid, .ms-deals-title { max-width: 1040px; }
@media (min-width: 769px) { .ms-deals .blog-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }  /* three across in 1040px */
.ms-deals-title { margin: 0 auto 16px; font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; color: var(--p-ink); }
.ms-details-wrap { max-width: 1088px; margin: 0 auto; padding: 0 24px 8px; }
.ms-deals .no-posts { max-width: none; margin: 0; padding: 28px 24px; text-align: left; }
.ms-details { margin: 0; }

/* "More market data" and the FAQ share one disclosure style: hairline card, chevron on the right. */
.ms-more, .ms-faq-item { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); background: var(--p-card); padding: 0 16px; }
.ms-more > summary, .ms-faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--p-ink);
}
.ms-more > summary::-webkit-details-marker, .ms-faq-item > summary::-webkit-details-marker { display: none; }
.ms-more > summary::after, .ms-faq-item > summary::after { content: "▾"; color: var(--p-muted); font-size: 13px; }
.ms-more[open] > summary::after, .ms-faq-item[open] > summary::after { content: "▴"; }
.ms-more > summary { color: var(--p-accent-deep); }
.ms-more[open] { padding-bottom: 16px; }
.ms-more .ms-kpis { margin-top: 4px; }
.ms-faq { margin-top: 56px; display: grid; gap: 8px; }
.ms-faq-item p { margin: 0 0 14px; font-size: 15px; color: var(--p-text); }

/* ── Market search, part of the page header: a centred field, suggestions, the card below it ── */
.msr { max-width: 880px; margin: 28px auto 4px; text-align: left; }
.msr-box { position: relative; max-width: 640px; margin: 0 auto; }
.msr-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--p-muted-2); pointer-events: none; }
.msr-input {
  width: 100%; height: 54px; padding: 0 18px 0 46px; font: inherit; font-size: 16px; color: var(--p-text);
  background: #fff; border: 1px solid var(--p-border-strong); border-radius: 999px;
  box-shadow: var(--p-shadow-card); transition: border-color var(--p-fast, .15s), box-shadow var(--p-fast, .15s);
}
.msr-input::-webkit-search-cancel-button { display: none; }
.msr-input::placeholder { color: var(--p-muted-2); }
.msr-input:focus { outline: none; border-color: var(--p-accent); box-shadow: var(--p-focus-ring); }
.msr-input:disabled { opacity: .6; }
.msr-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px;
  list-style: none; max-height: 360px; overflow-y: auto; background: #fff;
  border-radius: var(--p-radius-sm); box-shadow: var(--p-shadow-card-hover, var(--p-shadow-card));
}
.msr-option {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; padding: 10px 12px; cursor: pointer; border-radius: 8px;
}
.msr-option[aria-selected="true"], .msr-option:hover { background: var(--p-accent-tint); }
.msr-option-name { font-weight: 600; color: var(--p-ink); }
.msr-option-where { grid-column: 1; font-size: 13px; color: var(--p-muted-2); }
.msr-option-rent { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.msr-option-rent small { font-weight: 500; color: var(--p-muted); }
/* The search sits in .blog-header, whose `p` rule (18px, centred, 600px wide) must not reach the card. */
.msr .msr-status { max-width: none; margin: 12px 0 0; font-size: 14px; color: var(--p-muted); text-align: center; }
.msr .msr-card p { max-width: none; margin: 0; font-size: 14px; text-align: left; }
.msr .msr-card .ms-note { margin-top: 14px; }
.msr-status:empty { margin: 0; }
.msr-card {
  margin-top: 24px; padding: var(--ms-inset); background: var(--p-card); border-radius: var(--p-radius);
  box-shadow: var(--p-shadow-card);
}
.msr-card-head { margin-bottom: 16px; }
.msr-card-title { margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 24px); color: var(--p-ink); }
.msr-card .ms-kpi { box-shadow: none; border: 1px solid var(--p-border); }
.msr-card .ms-table-wrap { margin-top: 16px; box-shadow: none; border: 1px solid var(--p-border); }
.msr-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
/* The search card's banner to the rent calculator, opened on the area. */
.msr-map-link {
  display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--p-radius-sm); background: var(--p-accent-tint-2);
  border: 1px solid var(--p-border); color: var(--p-ink); font-size: 15px; font-weight: 500; text-decoration: none;
}
.msr-map-link:hover { border-color: var(--p-accent); }
.msr-map-cta { font-weight: 600; color: var(--p-accent-deep); white-space: nowrap; }
.msr + .hub-links { margin-top: 20px; }
@media (max-width: 600px) {
  .ms-block + .ms-block, .ms-details > .ms-more, .ms-faq { margin-top: 40px; }
  .ms-zone + .ms-deals-section { padding-top: 40px; }
  .ms-deals { padding-bottom: 40px; }
  .ms-table th, .ms-table td { padding: 10px 12px; }
  .ms-bar-col { width: auto; min-width: 0; }
  .ms-bar { display: none; }  /* the figures alone: a phone has no room for the bars */
  .ms-bar-cell { justify-content: flex-end; }
}