/* ==========================================================================
   Sold results ledger (/results.html), on top of styles.css.
   The homepage ledger's type (serif street, lining numerals, hairlines),
   grouped by month: the month holds the left columns, its sales the right.
   A bar chart of sales by month sits under the facts (scripts/charts.py);
   js/motion-lite.js grows its bars when it reaches the screen.
   ========================================================================== */

/* ---- Page and masthead (the few listing-page rules this page used, so it
   no longer loads listing.css) --------------------------------------------- */

.results-page { padding-top: var(--header-h); }
.results-head { padding: clamp(48px, 6vw, 96px) 0 0; }
.results-head h1 {
  font-size: clamp(42px, 5.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 14ch;
  margin-bottom: 20px;
  text-wrap: balance;
}
@media (max-width: 620px) {
  .results-head { padding-top: 20px; }
  .results-head .breadcrumb { margin-bottom: 14px; }
}

/* ---- Masthead: answer first --------------------------------------------- */

.results-head .eyebrow { margin-bottom: 20px; }

.results-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
}
.results-intro h1 { grid-column: 1 / span 6; margin-bottom: 0; }
.results-answer { grid-column: 8 / -1; padding-bottom: 0.4em; }

.results-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  margin-bottom: 14px;
}
.results-summary { color: var(--grey); max-width: 52ch; }

/* Three facts on one hairline row, the homepage stat style. */
.results-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: clamp(40px, 5vw, 72px);
}
.results-fact {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 30px;
  border-left: 1px solid var(--hairline);
  min-width: 0;
}
.results-fact:first-child { padding-left: 0; border-left: 0; }
.results-fact dt {
  order: 2;
  margin-top: 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}
.results-fact-number {
  order: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: clamp(44px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.results-fact-span { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.015em; line-height: 1.12; }
.results-fact-note {
  order: 3;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
}
.results-fact-note a,
.results-rule a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.results-fact-note a:hover,
.results-rule a:hover { color: var(--ink); }
/* Touch: a 44px tap area round "See the profile", with the text where it was. */
@media (pointer: coarse) {
  .results-fact-note a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* Sits under the ledger links, so the filter and the sales come first on phones. */
.results-rule {
  margin: 28px 0 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey);
}
.results-rule strong { color: var(--ink); font-weight: 700; }

/* ---- Suburb filter ---------------------------------------------------------- */

.results-body { padding: clamp(56px, 6vw, 96px) 0 var(--section-pad); }

/* Anchor targets for the no-JS filter: the jump lands on the chips, clear of
   the fixed header. */
.results-target {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.results-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Pills, 44px to tap: the shared .page-toc look (styles.css). */
.results-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.results-chip:hover { border-color: var(--ink); }
.results-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* All is the default. The script marks the current chip with aria-current;
   without it, "All" is styled current and the :target rules (the FILTER
   block below) restyle it when a suburb is picked. The static HTML carries
   no aria-current, so screen readers are never told the wrong chip. */
.results-filter:not(.is-enhanced) .results-chip[data-filter="all"],
.results-chip[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-chip-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  font-feature-settings: "tnum" 1;
  opacity: 0.7;
}

.results-status {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--grey);
}
/* Without JS, :target picks which line shows (the FILTER block below). */
.results-status [data-status]:not([data-status="all"]) { display: none; }

/* No-JS filter: one set of :target rules per suburb chip, written by
   scripts/results_page.py from docs/areas-data.json. */
/* FILTER:START generated by scripts/results_page.py, do not hand-edit */
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-ledger .results-row:not([data-area="shepparton"]),
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-ledger .results-month:not([data-areas~="shepparton"]),
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-status [data-status]:not([data-status="shepparton"]),
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-ledger .results-month-count { display: none; }
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-status [data-status="shepparton"] { display: inline; }
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-chips [data-filter="shepparton"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-filter:not(.is-enhanced) #in-shepparton:target ~ .results-chips [data-filter="all"] { background: #fff; color: var(--ink); border-color: var(--hairline); }
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-ledger .results-row:not([data-area="kialla"]),
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-ledger .results-month:not([data-areas~="kialla"]),
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-status [data-status]:not([data-status="kialla"]),
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-ledger .results-month-count { display: none; }
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-status [data-status="kialla"] { display: inline; }
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-chips [data-filter="kialla"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-filter:not(.is-enhanced) #in-kialla:target ~ .results-chips [data-filter="all"] { background: #fff; color: var(--ink); border-color: var(--hairline); }
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-ledger .results-row:not([data-area="mooroopna"]),
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-ledger .results-month:not([data-areas~="mooroopna"]),
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-status [data-status]:not([data-status="mooroopna"]),
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-ledger .results-month-count { display: none; }
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-status [data-status="mooroopna"] { display: inline; }
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-chips [data-filter="mooroopna"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-filter:not(.is-enhanced) #in-mooroopna:target ~ .results-chips [data-filter="all"] { background: #fff; color: var(--ink); border-color: var(--hairline); }
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-ledger .results-row:not([data-area="tatura"]),
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-ledger .results-month:not([data-areas~="tatura"]),
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-status [data-status]:not([data-status="tatura"]),
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-ledger .results-month-count { display: none; }
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-status [data-status="tatura"] { display: inline; }
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-chips [data-filter="tatura"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-filter:not(.is-enhanced) #in-tatura:target ~ .results-chips [data-filter="all"] { background: #fff; color: var(--ink); border-color: var(--hairline); }
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-ledger .results-row:not([data-area="murchison"]),
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-ledger .results-month:not([data-areas~="murchison"]),
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-status [data-status]:not([data-status="murchison"]),
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-ledger .results-month-count { display: none; }
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-status [data-status="murchison"] { display: inline; }
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-chips [data-filter="murchison"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-filter:not(.is-enhanced) #in-murchison:target ~ .results-chips [data-filter="all"] { background: #fff; color: var(--ink); border-color: var(--hairline); }
.results-filter:not(.is-enhanced) #in-other:target ~ .results-ledger .results-row:not([data-area="other"]),
.results-filter:not(.is-enhanced) #in-other:target ~ .results-ledger .results-month:not([data-areas~="other"]),
.results-filter:not(.is-enhanced) #in-other:target ~ .results-status [data-status]:not([data-status="other"]),
.results-filter:not(.is-enhanced) #in-other:target ~ .results-ledger .results-month-count { display: none; }
.results-filter:not(.is-enhanced) #in-other:target ~ .results-status [data-status="other"] { display: inline; }
.results-filter:not(.is-enhanced) #in-other:target ~ .results-chips [data-filter="other"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.results-filter:not(.is-enhanced) #in-other:target ~ .results-chips [data-filter="all"] { background: #fff; color: var(--ink); border-color: var(--hairline); }
/* FILTER:END */

/* ---- Sales by month (scripts/charts.py bar_chart) ------------------------------- */

.results-chart { padding: clamp(48px, 5vw, 72px) 0 0; }
.results-chart-title {
  font-size: var(--text-title-sm);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.chart { margin: 0; }
.chart-cols {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(6px, 1.2vw, 18px);
  /* Top-aligned: every bar area is the same height, whatever hangs below. */
  align-items: start;
}
.chart-col {
  display: grid;
  grid-template-rows: clamp(120px, 16vw, 220px) auto auto auto;
  justify-items: center;
  min-width: 0;
}
.chart-bar { display: block; width: 100%; height: 100%; }
.chart-bar rect { fill: var(--ink); }
.chart-count {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1;
}
.chart-label {
  margin-top: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--grey);
}
.chart-year {
  margin-top: 2px;
  font-size: 11px;
  color: var(--grey);
  font-feature-settings: "tnum" 1;
}
.chart-note {
  margin-top: 18px;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
}
/* One ink baseline under the bars, above the counts and month labels. */
.chart-bars .chart-cols { position: relative; }
.chart-bars .chart-cols::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(120px, 16vw, 220px);
  height: 1px;
  background: var(--ink);
}

/* ---- The ledger ---------------------------------------------------------------- */

.results-ledger { margin-top: clamp(40px, 4vw, 56px); }

.results-month {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  border-top: 1px solid var(--ink);
  padding: 22px 0 clamp(36px, 4vw, 56px);
}
.results-month[hidden],
.results-row[hidden] { display: none; }

.results-month-head {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.results-month-head h2 {
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.results-month-count {
  margin-top: 8px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}

/* Pulls the first row's top padding back, so the first row shown lines up
   with the month heading whichever rows the filter hides. */
.results-list {
  grid-column: 5 / -1;
  list-style: none;
  margin-top: -18px;
}
.results-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "addr meta price";
  align-items: baseline;
  gap: 8px 28px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--hairline);
}
.results-row:last-child,
.results-row.is-last-shown { border-bottom: 0; }

.results-addr { grid-area: addr; min-width: 0; }
.results-street {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 21px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.results-suburb {
  display: block;
  margin-top: 4px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}

.results-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}
.results-doc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.results-doc:hover { color: var(--grey); }

.results-price {
  grid-area: price;
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 23px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.results-price.is-undisclosed {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}

.results-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

/* ---- Responsive ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .results-intro h1, .results-answer { grid-column: 1 / -1; }
  .results-answer { padding: 24px 0 0; }
  /* Two counts side by side, the months under them: the ledger stays close. */
  .results-facts { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .results-fact { padding: 22px 0 22px 18px; }
  .results-fact:first-child { padding-left: 0; }
  .results-fact:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .results-fact-number { font-size: 44px; }
  .results-fact-span { font-size: 28px; }
  .results-fact dt { margin-top: 10px; }
  .results-month-head,
  .results-list { grid-column: 1 / -1; }
  .results-month-head {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }
  .results-month-count { margin: 0; }
}

@media (max-width: 560px) {
  /* Twelve thin bars on a phone: smaller labels, a little less gap. */
  .chart-cols { gap: 5px; }
  .chart-count { font-size: 15px; }
  .chart-label { font-size: 10px; letter-spacing: 0.6px; }
  .chart-year { font-size: 10px; }
}
@media (max-width: 400px) {
  /* Too narrow for "OCT": each month shows its first letter. The full
     month is still read out from the chart's hidden text. */
  .chart-label-rest { display: none; }
  .chart-label { letter-spacing: 0; }
}

@media (max-width: 820px) {
  /* Street and price on the first line; suburb, tag and statement under it. */
  .results-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "addr price" "meta meta";
    gap: 8px 16px;
  }
  .results-street { font-size: 19px; }
  .results-price { font-size: 19px; }
  .results-meta { justify-content: flex-start; }
  .results-chips { gap: 8px; }
  .results-chip { padding: 0 14px; gap: 8px; }
  /* 44px tap target for the statement links, nothing moves. */
  .results-doc { display: inline-block; padding: 13px 0; margin: -13px 0; }
}

/* Touch screens have no hover: show which addresses are links, and make the
   whole row the tap target for its listing page. */
@media (hover: none) {
  .results-row { position: relative; }
  .results-row .ledger-link {
    position: static;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(16, 16, 16, 0.35);
    text-underline-offset: 4px;
  }
  .results-row .ledger-link::after { display: none; }
  .results-row .ledger-link::before { content: ""; position: absolute; inset: 0; }
  .results-doc { position: relative; z-index: 1; }
}

/* ---- Printing and high contrast ------------------------------------------ */

/* A printout shows every month, scrolled to or not. */
@media print {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Windows high contrast: the bars and their baseline stay visible. */
@media (forced-colors: active) {
  .chart-bar rect { fill: CanvasText; }
  .chart-bars .chart-cols::after { forced-color-adjust: none; background: CanvasText; }
}