/**
 * The Quarterly Market Update (03/10/2026) — /prices and /prices/{place}, and the price strip.
 *
 * Written for readers new to price reports: one big number, one plain sentence, one line from cheaper to pricier.
 * The line (and every bar) runs the same way in all three languages, because it is a ruler of numbers: the markup
 * sets dir="ltr" on it, so inset-inline-start is the low end here.
 */

.v2-pr { padding-block-end: var(--s-16); }

.v2-pr-edition { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--ink-dim); font-size: var(--t-sm); margin-block: var(--s-2) 0; }
.v2-pr-live { display: inline-flex; align-items: center; gap: 6px; padding-block: 2px; padding-inline: var(--s-2); border-radius: var(--radius-pill);
  background: var(--live); color: var(--live-on); font-weight: 600; font-size: var(--t-xs); }
.v2-pr-live::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.v2-pr-empty { padding-block: var(--s-10); color: var(--ink-dim); font-size: var(--t-md); }

/* How to read this page: three plain steps. */
.v2-pr-howto { background: var(--surface-warm); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); margin-block: var(--s-4) var(--s-6); }
.v2-pr-howto h2 { font-size: var(--t-md); margin: 0 0 var(--s-3); color: var(--ink); }
.v2-pr-howto-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3) var(--s-6); counter-reset: v2pr; }
.v2-pr-howto-list li { display: grid; gap: 2px; counter-increment: v2pr; padding-inline-start: 34px; position: relative; }
.v2-pr-howto-list li::before { content: counter(v2pr); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 24px; block-size: 24px;
  border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700; }
.v2-pr-howto-list b { color: var(--ink); font-size: var(--t-base); }
.v2-pr-howto-list span { color: var(--ink-body); font-size: var(--t-sm); line-height: 1.6; }

/* Kinds of property. */
.v2-pr-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: 0 var(--s-5); }
.v2-pr-tabs a { display: inline-flex; align-items: center; gap: 6px; padding-block: 7px; padding-inline: var(--s-4); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill); color: var(--ink-body); text-decoration: none; font-size: var(--t-base); background: var(--surface-card); }
.v2-pr-tabs a:hover { border-color: var(--accent); color: var(--accent); }
.v2-pr-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

.v2-pr-ico { flex: none; color: var(--accent); }
.v2-pr-tabs a[aria-current="page"] .v2-pr-ico { color: var(--accent-on); }

/* The cards on the list. */
.v2-pr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s-4); }
.v2-pr-card { display: grid; gap: var(--s-1); block-size: 100%; padding: var(--s-4) var(--s-5) var(--s-5); background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); color: inherit; text-decoration: none; box-shadow: var(--lift-1); transition: box-shadow .15s ease, border-color .15s ease; }
.v2-pr-card:hover { border-color: var(--accent); box-shadow: var(--lift-2); }
.v2-pr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v2-pr-card.is-area { background: var(--surface-warm); border-color: var(--rule-strong); }
.v2-pr-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: var(--t-sm); }
.v2-pr-name { margin: var(--s-1) 0 var(--s-2); font-size: var(--t-lg); line-height: 1.35; color: var(--ink); }
.v2-pr-label { margin: 0; color: var(--ink-dim); font-size: var(--t-sm); font-weight: 600; }
.v2-pr-usual { margin: 0; font-size: var(--t-2xl); font-weight: 700; color: var(--ink); line-height: 1.15; }
.v2-pr-usual small { font-size: var(--t-sm); font-weight: 500; color: var(--ink-dim); }
.v2-pr-usual.is-big { font-size: var(--t-4xl); }
.v2-pr-range { margin: 0; color: var(--ink-body); font-size: var(--t-sm); display: flex; gap: 6px; justify-content: space-between; direction: ltr; }
.v2-pr-foot { margin: var(--s-1) 0 0; color: var(--ink-dim); font-size: var(--t-xs); }

/* The line from cheaper to pricier. */
.v2-pr-bar { display: grid; gap: 4px; margin-block: var(--s-2) var(--s-1); }
.v2-pr-track { position: relative; block-size: 14px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--market-band-soft), color-mix(in srgb, var(--market-band) 30%, var(--surface-card)), var(--market-band-soft)); }
.v2-pr-band { position: absolute; inset-block: 0; border-radius: var(--radius-pill); background: var(--market-band); }
.v2-pr-dot { position: absolute; inset-block-start: -5px; inline-size: 6px; block-size: 24px; margin-inline-start: -3px; border-radius: 3px;
  background: var(--market-dot); box-shadow: 0 0 0 2px var(--surface-card); }
.v2-pr-ends { display: flex; justify-content: space-between; color: var(--ink-dim); font-size: var(--t-xs); }
.v2-pr-track.is-shared { block-size: 10px; margin-block-start: var(--s-1); }
.v2-pr-track.is-shared .v2-pr-dot { inset-block-start: -4px; block-size: 18px; }

/* Up, down, unchanged — always in words. */
.v2-pr-change { margin: var(--s-1) 0 0; font-size: var(--t-sm); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.v2-pr-change.is-up { color: var(--market-up); }
.v2-pr-change.is-down { color: var(--market-down); }
.v2-pr-change.is-flat { color: var(--ink-dim); }

/* One place: the answer. */
.v2-pr-answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-6) var(--s-10); align-items: center;
  background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-6) var(--s-8); box-shadow: var(--lift-1); }
.v2-pr-answer-main { display: grid; gap: var(--s-1); }
.v2-pr-most { margin: var(--s-1) 0 0; font-size: var(--t-md); color: var(--ink-body); }
.v2-pr-size { margin: 0; color: var(--ink-dim); font-size: var(--t-sm); }
.v2-pr-office { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius); background: var(--surface-warm);
  border-inline-start: 3px solid var(--live); font-size: var(--t-sm); color: var(--ink-body); }
.v2-pr-ladder { display: grid; gap: var(--s-2); }
.v2-pr-ladder .v2-pr-track { block-size: 22px; }
.v2-pr-ladder .v2-pr-dot { inset-block-start: -6px; block-size: 34px; inline-size: 8px; margin-inline-start: -4px; }
.v2-pr-ladder .v2-pr-ends { font-size: var(--t-sm); }
.v2-pr-ladder-note { margin: 0; color: var(--ink-body); font-size: var(--t-sm); line-height: 1.7; }

/* Asking, liking, buying, selling. */
.v2-pr-views { margin-block-start: var(--s-8); }
.v2-pr-views h2, .v2-pr-history h2, .v2-pr-worth h2 { font-size: var(--t-xl); margin: 0 0 var(--s-4); color: var(--ink); }
.v2-pr-view-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.v2-pr-view { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface-card); }
.v2-pr-view-head { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
.v2-pr-view-head b { color: var(--ink); font-size: var(--t-base); }
.v2-pr-view-head span { color: var(--ink-dim); font-size: var(--t-sm); }
.v2-pr-view-fig { margin: 0; font-size: var(--t-xl); font-weight: 700; color: var(--ink); }
.v2-pr-view-fig small { font-size: var(--t-sm); font-weight: 400; color: var(--ink-dim); margin-inline-start: var(--s-2); }
.v2-pr-view.is-ask .v2-pr-band { background: var(--market-band); }
.v2-pr-view.is-liked .v2-pr-band { background: var(--accent-lit); }
.v2-pr-view.is-buyers .v2-pr-band { background: color-mix(in srgb, var(--market-band) 55%, var(--ink)); }
.v2-pr-view.is-sold .v2-pr-band { background: var(--market-up); }
.v2-pr-deal { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--live) 22%, var(--surface-card));
  border: 1px dashed var(--live); color: var(--ink); font-weight: 600; }

/* Facts in big numbers. */
.v2-pr-facts { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); }
.v2-pr-facts li { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-block-start: 3px solid var(--accent); background: var(--surface-card); border-radius: 0 0 var(--radius) var(--radius); }
.v2-pr-facts b { font-size: var(--t-2xl); color: var(--ink); }
.v2-pr-facts span { font-size: var(--t-sm); color: var(--ink-body); line-height: 1.5; }

/* Quarter by quarter. */
.v2-pr-history { margin-block-start: var(--s-8); }
.v2-pr-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.v2-pr-history-list li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr) auto; gap: var(--s-3); align-items: center; }
.v2-pr-history-q { font-size: var(--t-sm); color: var(--ink-body); }
.v2-pr-history-bar { display: block; block-size: 14px; background: var(--rule-faint); border-radius: var(--radius-pill); overflow: hidden; }
.v2-pr-history-bar i { display: block; block-size: 100%; background: color-mix(in srgb, var(--market-band) 55%, var(--surface-card)); border-radius: var(--radius-pill); }
.v2-pr-history-list li.is-now .v2-pr-history-bar i { background: var(--market-band); }
.v2-pr-history-list li.is-now .v2-pr-history-q { font-weight: 700; color: var(--ink); }
.v2-pr-history-v { font-weight: 700; color: var(--ink); font-size: var(--t-base); }
.v2-pr-small { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--ink-dim); line-height: 1.6; }

.v2-pr-text { margin-block-start: var(--s-8); }
.v2-pr-text p { margin: 0; font-size: var(--t-md); line-height: 1.9; color: var(--ink-body); max-inline-size: 70ch; }

/* What is my home worth? */
.v2-pr-worth { margin-block-start: var(--s-8); padding: var(--s-5) var(--s-6); border-radius: var(--radius-lg); background: var(--surface-warm); border: 1px solid var(--rule); }
.v2-pr-worth-form { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.v2-pr-worth-form label { font-size: var(--t-sm); color: var(--ink-body); flex-basis: 100%; }
.v2-pr-worth-form input { inline-size: 160px; padding-block: 9px; padding-inline: var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: var(--t-md); background: var(--surface-card); color: var(--ink); }
.v2-pr-worth-result { margin: var(--s-4) 0 0; font-size: var(--t-lg); color: var(--ink); line-height: 1.7; }

.v2-pr-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-8); }
.v2-pr-note { margin-block-start: var(--s-8); color: var(--ink-body); font-size: var(--t-sm); display: grid; gap: var(--s-3); }
.v2-pr-note p { margin: 0; }

.v2-pr-method { margin-block-start: var(--s-8); color: var(--ink-body); font-size: var(--t-sm); line-height: 1.8; }
.v2-pr-method summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.v2-pr-method ul { margin: var(--s-3) 0 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }

/* The price strip on area, guide and project pages. */
.v2-pr-strip { display: grid; gap: var(--s-2); margin-block: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--rule); box-shadow: var(--lift-1); }
.v2-pr-strip-t { margin: 0; font-weight: 700; color: var(--ink); font-size: var(--t-md); }
.v2-pr-strip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v2-pr-strip-list a { display: inline-flex; align-items: center; gap: 6px; padding-block: 6px; padding-inline: var(--s-3); border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong); color: var(--ink-body); text-decoration: none; font-size: var(--t-sm); background: var(--surface); }
.v2-pr-strip-list a:hover { border-color: var(--accent); }
.v2-pr-strip-list b { color: var(--ink); }
.v2-pr-strip-list small { color: var(--ink-dim); }
.v2-pr-strip-more { font-size: var(--t-sm); color: var(--accent); font-weight: 600; text-decoration: none; }

@media (max-width: 760px) {
  .v2-pr-answer { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .v2-pr-history-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .v2-pr-history-bar { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-pr-card { transition: none; }
}