/* ==========================================================================
   Suburbs compared (/areas/index.html). Extends the shared layer in
   styles.css (pinned header, footer, type scale, appraisal band). Loaded
   after styles.css.
   The masthead, section grid and table rules it shares with the suburb pages
   are copies of css/area.css's (tests/area-pages-wave3.test.ts keeps them
   equal), so neither page family downloads the other's styles.
   ========================================================================== */

/* Clearance under the pinned header (styles.css "Header"). */
.area-page { padding-top: var(--header-h); }

/* ---- Masthead ---------------------------------------------------------- */

.area-head { padding: var(--masthead-pad) 0 0; }

/* A suburb name is the one title set larger than --text-display. */
.area-head h1 {
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}

.area-statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-lede);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--grey);
}

@media (max-width: 820px) {
  .area-statement { max-width: none; }
}

/* ---- Flagship layout (Sep 2026): the same 12-column rhythm as the homepage.
   Title on the left, supporting copy on the right, content full width. ---- */

.area-head .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
}
.area-head .container > * { grid-column: 1 / -1; }
.area-head .container > h1 { grid-column: 1 / span 7; margin-bottom: 0; }
.area-head .container > .area-statement {
  grid-column: 8 / -1;
  max-width: 30ch;
  padding-bottom: 0.4em;
}

/* The appraisal band is left out: it carries its own split grid. :where()
   keeps the exclusion from adding an id's weight, so the #living and #guide
   placements below still win. */
.area-page .section:where(:not(#appraisal)) > .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.area-page .section:where(:not(#appraisal)) > .container > * { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .area-head .container > h1,
  .area-head .container > .area-statement,
  #living .container > *,
  #living .container > .eyebrow,
  #living .container > .section-title,
  #living .container > .area-living,
  #living .container > .area-others,
  #answers .container > *,
  #answers .container > .eyebrow,
  #answers .container > .section-title,
  #answers .container > .area-answers,
  #answers .container > .area-others,
  #guide .container > *,
  #guide .container > .eyebrow,
  #guide .container > .section-title,
  #guide .container > .area-guide-lede,
  #guide .container > .area-guide-cta,
  #guide .container > .area-others { grid-column: 1 / -1; grid-row: auto; }
  .area-head .container > .area-statement { margin-top: 20px; padding-bottom: 0; }
}

/* ---- Suburbs compared (/areas/index.html) ------------------------------
   One table, the ledger's type: serif lining numerals, hairline rows. On
   phones the table scrolls inside its own frame with the suburb column
   pinned, so the page itself never scrolls sideways. ---------------------- */

.compare-head h1 { font-size: var(--text-display); max-width: 14ch; text-wrap: balance; }
.compare-head .container > .compare-answer {
  grid-column: 8 / -1;
  max-width: 34ch;
  color: var(--ink);
  font-size: clamp(20px, 1.9vw, 26px);
}
.compare-lede { margin-top: clamp(32px, 4vw, 56px); max-width: 70ch; color: var(--grey); }
.compare-head .source-line { margin-top: 12px; }

.compare-section { padding-top: clamp(48px, 5vw, 80px); }
.area-page .compare-section > .container { display: block; }

.compare-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--ink);
}
.compare-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-feature-settings: "lnum" 1, "pnum" 1;
}
/* The caption names the table for screen readers; the lede above says the
   same thing visibly, and a visible caption would scroll with the table. */
.compare-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.compare-table th,
.compare-table td {
  padding: 22px 18px;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
  vertical-align: baseline;
  white-space: nowrap;
}
.compare-table thead th {
  padding-top: 18px;
  padding-bottom: 18px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--grey);
  white-space: normal;
  vertical-align: bottom;
}
.compare-table th:first-child { text-align: left; padding-left: 0; }
.compare-table td {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 24px);
}
.compare-table td.compare-missing { font-family: var(--sans); font-size: 13px; color: var(--grey); }
.compare-table tbody th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 26px);
  background: var(--paper);
}
.compare-table tbody th a { color: inherit; text-decoration: none; }
/* Touch: 44px to tap each suburb name, with nothing moving. */
@media (pointer: coarse) {
  .compare-table tbody th a,
  .compare-suburb h3 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
.compare-table tbody th a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.compare-period {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--grey);
}

.compare-hint { display: none; }

.compare-sources {
  list-style: none;
  margin-top: 28px;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
}
.compare-sources li + li { margin-top: 8px; }
.compare-source-names { color: var(--ink); font-weight: 700; }

.compare-suburbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 var(--col-gap);
  border-top: 1px solid var(--hairline);
}
/* Three across, and the last row never leaves an empty cell: two left
   over share the row, one left over takes all of it. */
.compare-suburb { grid-column: span 2; }
.compare-suburb:nth-child(3n+1):nth-last-child(2),
.compare-suburb:nth-child(3n+1):nth-last-child(2) + .compare-suburb { grid-column: span 3; }
.compare-suburb:nth-child(3n+1):last-child { grid-column: 1 / -1; }
.compare-suburb {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--hairline);
}
.compare-suburb h3 { font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; }
.compare-suburb h3 a { color: inherit; text-decoration: none; }
.compare-suburb p { color: var(--grey); max-width: 46ch; }
.compare-suburb p:first-of-type { color: var(--ink); }
.compare-suburb .text-link { align-self: flex-start; margin-top: auto; padding-top: 8px; }

@media (max-width: 1080px) {
  .compare-suburbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-suburb,
  .compare-suburb:nth-child(3n+1):nth-last-child(2),
  .compare-suburb:nth-child(3n+1):nth-last-child(2) + .compare-suburb,
  .compare-suburb:nth-child(3n+1):last-child { grid-column: auto; }
  .compare-suburbs > .compare-suburb:nth-child(odd):last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .compare-head .container > .compare-answer { grid-column: 1 / -1; margin-top: 20px; max-width: none; }
  .compare-hint {
    display: block;
    margin-top: 12px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--grey);
  }
  /* The suburb column stays put while the figures scroll. */
  .compare-table tbody th,
  .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--hairline);
    padding-right: 16px;
    white-space: normal;
    width: 132px;
    min-width: 132px;
  }
  .compare-table tbody th { font-size: 20px; line-height: 1.2; }
  .compare-period { font-size: 11px; line-height: 1.35; }
  .compare-table th, .compare-table td { padding: 18px 14px; }
  .compare-table { min-width: 700px; }
}

@media (max-width: 620px) {
  .compare-suburbs { grid-template-columns: 1fr; }
}

/* At a glance (Suburbs compared): three small bar charts side by side, one
   per figure, each bar from zero (scripts/charts.py hbar_chart). */
.compare-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px) var(--col-gap);
}
/* One per row keeps a readable length: never wider than a reading column. */
.compare-chart { max-width: 760px; }
/* Three side by side only where each still has room for its bars. */
@media (min-width: 1281px) {
  .compare-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.compare-chart-title {
  font-weight: 400;
  font-size: var(--text-subhead);
  line-height: 1.25;
  margin-bottom: 14px;
}
.chart { margin: 0; }
/* One column grid for the whole chart, shared by every row (subgrid): the
   name column is as wide as the widest name, the value column as the widest
   value, so every bar starts at the same point and grows along the same
   track. Browsers without subgrid keep fixed columns. */
.chart-hbar-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(84px, max-content) minmax(0, 1fr) max-content;
  column-gap: 12px;
}
.chart-hbar-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(84px, 7fr) minmax(0, 10fr) 7em;
  grid-template-columns: subgrid;
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.chart-hbar-name { font-size: 15px; min-width: 0; }
.chart-hbar-track svg { display: block; width: 100%; height: 10px; }
.chart-hbar { fill: var(--ink); }
.chart-hbar-value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* "Under 10 sales" or "Not published": small, and free to wrap, so it never
   widens the value column and shortens every bar in the chart. */
.chart-hbar-value.is-missing {
  max-width: 7em;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
  color: var(--grey);
}

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

@media print {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media (forced-colors: active) {
  .chart-hbar { fill: CanvasText; }
}