@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@500;600&display=swap');

/* ── DA Notice showroom system ────────────────────────────────────────────
   The design tokens and shared components for the PUBLIC surface, extracted
   2026-09-05 from suburb_live.html so every public page wears one skin.

   Why this file exists. TWO_PART_ARCHITECTURE_2026-08-10.md is locked: every
   page is public OR member, with two renderers. The design split is meant to
   follow that line. It did not: the public suburb page carried the signed-off
   showroom look (accent #e07a34, Barlow Condensed headings, Spline Sans Mono
   figures) while three other PUBLIC pages, the region pages, /suburbs and the
   homepage, wore the member skin (accent #d4692a, Inter only). Someone moving
   from /suburbs to /mangrove-mountain changed brand mid-journey.

   This file is the single source for the showroom tokens. It is loaded by the
   public templates only, and scoped to .showroom so it cannot reach the member
   pages, which keep their own skin by design.

   Load AFTER style.css so these tokens win on public pages.
   ───────────────────────────────────────────────────────────────────────── */

.showroom {
  /* Palette, from design_reference/suburb_page_SIGNED_OFF.html (approved 2026-08-10). */
  --bg: #131c2b;
  --surface: #1a2739;
  --surface-2: #1c2a3e;
  --ink: #eaf0f7;
  --ink-2: #c3d0e0;
  --muted: #8a9eb8;
  --border: #2a3a52;
  --accent: #e07a34;
  --accent-soft: rgba(224, 122, 52, 0.14);
  --bar: #e07a34;
  --bar-track: rgba(255, 255, 255, 0.06);
  --up: #4bbf7b;
  --gov: #6ea0ff;
  --gov-bg: rgba(0, 38, 100, 0.55);
  --gov-bd: #2f4f86;
  --line: rgba(255, 255, 255, 0.045);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  /* Spacing scale. Every gap and pad on the public surface is a multiple of 4. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  /* Type scale, eight steps, proven by verify_design.cjs at 1440 and 390. */
  --t-micro: .72rem;
  --t-small: .82rem;
  --t-body: 1rem;
  --t-lead: 1.1rem;
  --t-h3: 1.5rem;
  --t-h2: 2.4rem;
  /* The value gutter. 9ch holds the widest figure the data produces
     ("$153.29M", measured 75px in a 91px slot at 390px). */
  --gutter-value: 9ch;
  /* Reading measure. Prose is capped; data blocks are scanned, not read, and
     use the full column. */
  --measure: 66ch;

  color: var(--ink);
}

/* ── Section label: the tiny letterspaced eyebrow naming each section's role ── */
.showroom .section-label {
  font-family: 'Spline Sans Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

/* ── Record row ───────────────────────────────────────────────────────────
   ONE component for every list of DA records, on any public page.

   Scraped DA data is not uniform: descriptions run from one word to a full
   sentence, values span $2k to $153M, and some records carry no value at all.
   So the LAYOUT is fixed and the CONTENT adapts inside it, never the reverse.

   Placement is EXPLICIT on both axes. Auto-placement put the value in the 1fr
   column (measured 677px on desktop) and pushed the address into the narrow
   track, because .val carries a definite grid-row and grid places definite-row
   items before auto-placed ones. That is the floating figure with a dead zone
   beside it, and the 59px description column, that this replaces. */
.showroom .rec {
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gutter-value);
  gap: 2px var(--space-5);
  padding: var(--space-3) var(--space-4);
  align-items: baseline;
}
.showroom .rec .addr {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.showroom .rec .meta {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--t-small);
  color: var(--muted);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The date is one unit and must never break across lines. */
.showroom .rec .meta .dt {
  font-family: 'Spline Sans Mono', monospace;
  font-size: .95em;
  white-space: nowrap;
}
.showroom .rec .val {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  font-family: 'Spline Sans Mono', monospace;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: .98rem;
  white-space: nowrap;
}
/* An absent value still occupies its slot, so the rows keep an even beat.
   Nothing is invented: this states that the applicant declared no cost. */
.showroom .rec .val.none {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: .03em;
}
.showroom .approvals,
.showroom .major {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.showroom .approvals .rec,
.showroom .major .rec {
  border-top: 1px solid var(--border);
}
.showroom .approvals .rec:first-child,
.showroom .major .rec:first-child {
  border-top: 0;
}

/* Prose carries a measure; data blocks do not. */
.showroom .prose { max-width: 70ch; }
.showroom .prose p,
.showroom .prose .ack { max-width: var(--measure); }

@media (max-width: 520px) {
  /* The gutter stays 9ch at every width so the value keeps ONE size across
     breakpoints; shrinking it on mobile added a ninth step to the type scale. */
  .showroom .rec { padding: var(--space-3) var(--space-3); gap: 2px var(--space-3); }
}

/* The region link on /suburbs is a navigation link, not a footnote. It was
   inheriting .note, which is italic and muted, so it read as an aside. */
.showroom .region-link {
  margin: 0 0 var(--space-4);
  font-size: var(--t-small);
}
.showroom .region-link a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
}
.showroom .region-link a:hover { text-decoration: underline; }

/* ── Typography ───────────────────────────────────────────────────────────
   The showroom's three faces. Loading the tokens alone was NOT enough: a
   measurement across the four public pages showed /suburbs and the region
   pages still rendering headings in Inter while the suburb page used Barlow
   Condensed, so the accent matched but the typeface still changed mid-journey.
   Barlow Condensed for headings, Inter for body, Spline Sans Mono for figures
   and labels. */
.showroom h1,
.showroom h2,
.showroom h3 {
  font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.showroom .mono,
.showroom .suburb-card-meta,
.showroom .section-label {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* A condensed face is narrower, so it reads smaller at the same pixel size.
   The base stylesheet sizes h2/h3 for Inter (1.2rem / 1rem); carried straight
   into Barlow Condensed those headings lost their presence against the body
   text. Bumped only for the showroom skin. The suburb page sets its own
   heading sizes inline, which load after this file and still win. */
.showroom h2 { font-size: 1.5rem; }
.showroom h3 { font-size: 1.15rem; }

/* Measures for the shared components on pages built from base.html. .fine was
   capped at 90ch, which is still past the 78ch a reader tracks; .note carried
   no cap at all and ran to 81ch on the region pages. */
.showroom .note { max-width: 74ch; }
.showroom .fine { max-width: 74ch; }
/* .lead sat at 1.05rem (17px), one pixel off the 18px tier already in use, so
   it added a ninth step to the scale for no visible difference. */
.showroom .lead { font-size: 1.125rem; }

/* The homepage raw-DA list ran to 86 characters, past the 78 a reader tracks.
   Found on production by the design gate, not locally: the raw-DA volume block
   only renders on the homepage, which was not the page the measure work used. */
.showroom .raw-da-item { max-width: 74ch; }

/* ── One content column across the public surface ─────────────────────────
   Measured 2026-09-05: /suburbs and the region pages sat at 760px while their
   own child suburb pages sat at 1120px, so the column WIDENED as you went down
   the hierarchy. base.html caps main at 760px, which suits a member tool but
   not a showroom page whose main content is a 119-item link index. Widened for
   the showroom skin only; member pages keep 760px, which is right for them. */
.showroom main { max-width: 1120px; }

/* Prose keeps its measure inside the wider column; data blocks use it all.
   Widening main to 1120px pushed prose that fitted at 760px out to 94 and 106
   characters on the homepage and how-it-works, so the cap has to reach nested
   paragraphs, not only direct children. Excluded: the suburb index, whose list
   items are short inline links in a wrap layout, and the record rows, whose
   meta line is already clamped and carries its own slot. */
.showroom main p,
.showroom main li,
.showroom main dd,
.showroom .geo-activity { max-width: 74ch; }
.showroom .suburb-index-list li,
.showroom .rec p,
.showroom .rec li { max-width: none; }

/* The suburb index sits on a surface, like every other block on a suburb page,
   instead of floating as bare links on the page ground. */
.showroom .suburb-index {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.showroom .suburb-index-group + .suburb-index-group {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}