:root { color-scheme: light; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111827; background: #f7f7f4; }
  /* The app's brand wash (index.html --radar-wash) on its canvas colour, fixed so it stays in view while the page scrolls. */
  :root { --radar-wash:
    radial-gradient(90rem 52rem at 0% 0%, rgba(37, 99, 235, .36), transparent 75%),
    radial-gradient(80rem 48rem at 100% 4%, rgba(32, 167, 122, .32), transparent 75%),
    radial-gradient(100rem 50rem at 55% 100%, rgba(99, 102, 241, .24), transparent 75%); }
  body { background: var(--radar-wash), #f7f7f4; background-attachment: fixed; }
  /* The app's top nav (components/navigation/TopNav.tsx + index.html .radar-nav-pill/.radar-nav-chip). */
  .app-nav { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 1.5rem; height: 4rem; padding: 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .65); background: transparent; }
  .app-brand { justify-self: start; display: flex; align-items: center; gap: .75rem; min-width: 34px; overflow: hidden; color: #222; text-decoration: none; font: 800 19px/1 Manrope, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
  .app-logo { width: 34px; height: 34px; flex: none; }
  .app-pill { display: flex; gap: 2px; min-width: 0; height: 2.75rem; padding: .25rem; border-radius: 999px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 1px 2px 5px rgba(100, 116, 139, .26), inset -1px -1px 3px #fff, 0 8px 22px rgba(0, 112, 204, .12); }
  .app-pill::-webkit-scrollbar { display: none; }
  .app-pill a { position: relative; display: flex; align-items: center; padding: 0 1rem; border-radius: 999px; color: #1e293b; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .app-pill a:hover { color: #020617; }
  .app-pill a[aria-current] { transform: translateY(-2px); color: #0070cc; font-weight: 700; background: #fff;
    box-shadow: 0 6px 14px rgba(0, 112, 204, .3), 3px 4px 8px rgba(100, 116, 139, .32), -2px -2px 6px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 112, 204, .08); }
  .app-preview { pointer-events: none; position: absolute; right: .125rem; top: 0; padding: 0 .25rem; border-radius: 999px; background: #fbbf24; color: #451a03; font-size: 9px; font-weight: 700; line-height: 13px; letter-spacing: .025em; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
  .app-right { justify-self: end; display: flex; align-items: center; gap: 1rem; }
  .app-theme { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: 0; border-radius: 999px; cursor: pointer; color: #64748b; background: rgba(255, 255, 255, .42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 1px 2px 5px rgba(100, 116, 139, .26), inset -1px -1px 3px #fff, 0 8px 22px rgba(0, 112, 204, .12); }
  .app-theme:hover { color: #222; } .app-theme:active { transform: scale(.96); }
  .app-icon-moon, html[data-theme="dark"] .app-icon-sun { display: none; } html[data-theme="dark"] .app-icon-moon { display: block; }
  .app-admin { color: #64748b; font-size: .875rem; font-weight: 500; text-decoration: none; } .app-admin:hover { color: #222; }
  .app-admin[hidden] { display: none; }
  .app-signin { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; border-radius: .625rem; background: #0070cc; color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; }
  .app-signin:hover { background: #005aa8; }
  .app-account { position: relative; }
  .app-account summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem .25rem .25rem; border: 1px solid #e2e8f0; border-radius: 999px; color: #222; font-size: .875rem; font-weight: 500; background: rgba(255, 255, 255, .5); }
  .app-account summary::-webkit-details-marker { display: none; }
  .app-account summary:hover, .app-account[open] summary { background: #f1f5f9; }
  .app-account[hidden], .app-signin[hidden] { display: none; }
  .app-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #0070cc; color: #fff; font-size: .75rem; font-weight: 600; }
  .app-chevron { color: #64748b; }
  .app-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20; width: 16rem; padding: .5rem; border: 1px solid #e2e8f0; border-radius: .875rem; background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); }
  .app-menu p { margin: 0; padding: .5rem .75rem .25rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
  .app-menu a { display: block; padding: .5rem .75rem; border-radius: .5rem; color: #222; font-size: .875rem; font-weight: 500; text-decoration: none; }
  .app-menu a:hover { background: #f1f5f9; }
  .app-menu .app-signout { margin-top: .25rem; border-top: 1px solid #e2e8f0; border-radius: 0 0 .5rem .5rem; color: #64748b; }
  .app-account-name { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 1023px) {
    .app-nav { grid-template-columns: 1fr auto; height: auto; gap: .5rem 1rem; padding: .6rem 1rem; }
    .app-right { gap: .5rem; }
    .app-pill { grid-column: 1 / -1; grid-row: 2; }
    .app-account-name, .app-chevron { display: none; } .app-account summary { padding: .2rem; }
  }
  /* Headline figures under the title: the answer before the long text. */
  .glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: 0 0 1.25rem; }
  .glance div { padding: .7rem .9rem; border: 1px solid #e5e7eb; border-radius: .875rem; background: #f8fafc; }
  .glance dt { font-size: .75rem; font-weight: 600; color: #64748b; }
  .glance dd { margin: .1rem 0 0; font: 700 1.5rem/1.2 Manrope, sans-serif; letter-spacing: -.02em; color: #0f172a; }
  .glance-note { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 600; color: #64748b; }
  .glance-note.up { color: #15803d; } .glance-note.down { color: #b91c1c; }
  html[data-theme="dark"] .glance div { background: #232323; border-color: #333; }
  html[data-theme="dark"] .glance dd { color: #f5f5f5; } html[data-theme="dark"] .glance dt, html[data-theme="dark"] .glance-note { color: #a3a3a3; }
  html[data-theme="dark"] .glance-note.up { color: #4ade80; } html[data-theme="dark"] .glance-note.down { color: #f87171; }
  /* Phones: the same navigation as the app's phone bar, tighter text, and tables that keep their key columns. */
  @media (max-width: 1023px) {
    /* The app's phone tabs: keys like the map's 2D / 3D, the current page pressed in. */
    .app-pill { height: 2rem; padding: 4px; gap: 4px; border-radius: .5rem; background: transparent; box-shadow: none; }
    .app-pill a { padding: 0 .625rem; font-size: .75rem; border-radius: 6px; background: rgba(255, 255, 255, .28); box-shadow: 2px 2px 4px rgba(100, 116, 139, .35), -2px -2px 4px rgba(255, 255, 255, .6); }
    .app-pill a[aria-current] { transform: translateY(1px); background: rgba(255, 255, 255, .28); box-shadow: inset 2px 2px 4px rgba(100, 116, 139, .35), inset -2px -2px 4px rgba(255, 255, 255, .6); }
    html[data-theme="dark"] .app-pill a { background: rgba(255, 255, 255, .06); box-shadow: 2px 2px 4px rgba(0, 0, 0, .45), -2px -2px 4px rgba(255, 255, 255, .08); }
    html[data-theme="dark"] .app-pill a[aria-current] { box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .45), inset -2px -2px 4px rgba(255, 255, 255, .08); }
    .app-nav { padding: .4rem .75rem; } .app-logo { width: 28px; height: 28px; } .app-brand { font-size: 16px; gap: .5rem; }
    .app-theme { width: 2rem; height: 2rem; } .app-signin { height: 2rem; padding: 0 .875rem; border-radius: 999px; font-size: .8125rem; }
    .app-avatar { width: 1.75rem; height: 1.75rem; }
    body { font-size: .9375rem; line-height: 1.65; }
    .article-header { padding: 1.25rem 0 .5rem; }
    h1 { font-size: 1.85rem; margin: .4rem 0 1rem; }
    .introduction { font-size: 1rem; }
    .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glance dd { font-size: 1.25rem; }
    .prices { font-size: .8125rem; }
    .prices th, .prices td { padding: .3rem .45rem; }
    .prices .chip { min-width: 3.5rem; padding: .05rem .35rem; font-size: .75rem; }
    /* The council filter above the table still narrows by council; the column itself is left out to save width. */
    .prices .council { display: none; }
    .prices.hub .count { display: none; }
    .prices.hub th[scope="row"] a { white-space: nowrap; }
  }
  /* Content sits on one white card over the wash, like the dashboard panels (.market-card). */
  .surface { background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 4px 14px -8px rgba(15, 23, 42, .06); padding: .5rem clamp(1.25rem, 4vw, 2.75rem) 2.5rem; }
  * { box-sizing: border-box; }
  body { margin: 0; font-size: 1rem; line-height: 1.75; }
  a { color: #1749ac; text-underline-offset: .2em; }
  a:hover { text-decoration-thickness: .15em; }
  :focus-visible { outline: 3px solid #0070cc; outline-offset: 4px; }
  .skip-link { position: absolute; left: 1rem; top: -5rem; padding: .5rem 1rem; background: white; z-index: 1; }
  .skip-link:focus { top: .5rem; }
  footer { max-width: 76rem; margin: auto; padding: 1.5rem clamp(1.25rem, 4vw, 3rem); }
  main { max-width: 56rem; margin: auto; padding: 1rem clamp(.75rem, 3vw, 2rem) 3rem; }
  .breadcrumbs { font-size: .875rem; color: #475569; }
  .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; list-style: none; padding: 0; }
  .breadcrumbs li + li::before { content: "/"; margin-right: .6rem; }
  .article-header { padding: 2.5rem 0 1rem; }
  .eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #475569; }
  h1, h2, h3 { font-family: Manrope, sans-serif; line-height: 1.25; text-wrap: balance; color: #111827; }
  h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.035em; margin: .6rem 0 1.5rem; }
  h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -.02em; margin: 0 0 1rem; }
  h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
  p { margin: 0 0 1rem; }
  .introduction { font-size: 1.15rem; color: #374151; }
  article > section { margin-top: 2.5rem; }
  ul { padding-left: 1.4rem; } li { padding-left: .15rem; margin: .55rem 0; }
  .questions, .related { border-top: 1px solid #dfe3e8; padding-top: 2rem; }
  .next-step { margin: 3rem 0; padding: 1.75rem; background: #eaf0f5; border-left: 3px solid #0070cc; }
  .button { display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 1rem; margin-top: .35rem; min-height: 44px; color: white; background: #1749ac; border-radius: .5rem; font-weight: 650; text-decoration: none; }
  .related a { font-weight: 650; } .related span { color: #475569; font-size: .9375rem; }
  footer { color: #475569; font-size: .875rem; }
  .site-footer { max-width: 72rem; padding-top: 0; }
  .site-footer nav { padding: 1.5rem clamp(1.25rem, 3vw, 2rem); border-radius: 1.25rem; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); }
  .site-footer h2 { font-size: 1.05rem; margin: 0 0 .75rem; } .site-footer h2 a { color: #111827; text-decoration: none; }
  .footer-states { display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .site-footer h3 { margin: 0 0 .25rem; font-size: .8rem; letter-spacing: .08em; color: #475569; }
  .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin: 0; padding: 0; line-height: 1.6; }
  .site-footer li a { color: #334155; text-decoration: none; } .site-footer li a:hover { color: #1749ac; text-decoration: underline; }
  .site-footer > p { margin-top: 1rem; }
  main.wide { max-width: 72rem; }
  .map-figure { margin: 1rem 0 2rem; } .map-figure img { display: block; width: 100%; height: auto; border-radius: .5rem; border: 1px solid #dfe3e8; }
  figcaption { font-size: .875rem; color: #475569; margin-top: .5rem; }
  /* Suburb pages: the drawn mini map, its legend, the suburb's own row among its neighbours. */
  .mini-map { --map-empty: #eef2f6; display: block; width: 100%; height: auto; border-radius: .5rem; border: 1px solid #dfe3e8; }
  .mini-map .sea { fill: #f8fafc; } .mini-map .suburb { stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
  /* As the dashboard's suburb labels (theme/mapTheme.ts mapLabelPaint): dark text, white halo; name over median. */
  .mini-map .suburb { fill-opacity: .8; }
  .mini-map .label { font: 600 11px "DM Sans", sans-serif; fill: #0f172a; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .94); stroke-width: 3px; stroke-linejoin: round; }
  .mini-map .label .price { font-weight: 500; }
  .mini-map .label.own { font: 800 14px Manrope, sans-serif; } .mini-map .label.own .price { font-weight: 700; }
  /* The dashboard's legend card, over the map's bottom-left corner. */
  .map-frame { position: relative; }
  .map-legend { position: absolute; left: .6rem; bottom: .6rem; padding: .45rem .6rem; border: 1px solid rgba(226, 232, 240, .9); border-radius: .6rem; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(15, 23, 42, .1); backdrop-filter: blur(6px); font-size: .6875rem; color: #334155; pointer-events: none; }
  .map-legend p { margin: 0 0 .25rem; font-weight: 700; color: #0f172a; }
  .map-legend ul { margin: 0; padding: 0; list-style: none; } .map-legend li { display: flex; align-items: center; gap: .35rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
  .map-legend i { width: .75rem; height: .75rem; border-radius: .2rem; opacity: .8; }
  /* Phones: the map is too short for the card, so it sits under the map as one wrapped row. */
  @media (max-width: 640px) { .map-legend { position: static; margin-top: .4rem; box-shadow: none; } .map-legend ul { display: flex; flex-wrap: wrap; gap: .15rem .6rem; } }
  /* Living in: the Census table and the three-bar breakdowns (suburb, council, state). */
  .series-key { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .75rem 0 .25rem; font-size: .8125rem; font-weight: 600; }
  .series-key span { display: inline-flex; align-items: center; gap: .35rem; } .series-key i { width: .75rem; height: .75rem; border-radius: .2rem; }
  .series-key .suburb i, .bar.suburb i { background: #0070cc; } .series-key .lga i, .bar.lga i { background: #2bb39a; } .series-key .state i, .bar.state i { background: #a3acb9; }
  .table-scroll:has(> .census) { max-height: none; } .prices.census { min-width: 34rem; } .prices.census td { text-align: right; font-variant-numeric: tabular-nums; }
  .prices.census th.suburb, .prices.census th.lga, .prices.census th.state { text-align: right; }
  /* Each area its own tint (the series colours, faint); group names as highlighted bands across the table. */
  .prices.census td.suburb { font-weight: 700; }
  .prices.census .suburb { background: #eef6fd; } .prices.census .lga { background: #ecf8f5; } .prices.census .state { background: #f3f4f6; }
  .prices.census thead th.suburb { color: #005aa8; } .prices.census thead th.lga { color: #1f8a76; } .prices.census thead th.state { color: #4b5563; }
  .prices.census .group-row th { padding: .55rem .75rem; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0f172a; background: #e2e8f0; }
  .prices.census tbody th a { color: inherit; text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 3px; } .prices.census tbody th a:hover { color: #0070cc; text-decoration-color: currentColor; }
  html[data-theme="dark"] .prices.census .suburb { background: #16263a; } html[data-theme="dark"] .prices.census .lga { background: #13302a; } html[data-theme="dark"] .prices.census .state { background: #242424; }
  html[data-theme="dark"] .prices.census thead th.suburb { color: #7cc4fa; } html[data-theme="dark"] .prices.census thead th.lga { color: #5fd3bb; } html[data-theme="dark"] .prices.census thead th.state { color: #a3a3a3; }
  html[data-theme="dark"] .prices.census .group-row th { background: #333; color: #f5f5f5; } html[data-theme="dark"] .prices.census tbody th a { text-decoration-color: #525252; }
  .prices.census td.locked { color: #94a3b8; } .prices.census td.locked .lock { font-size: .75rem; opacity: .75; }
  #census[data-state="loading"] td.locked .lock { animation: census-pulse 1s ease-in-out infinite alternate; } @keyframes census-pulse { to { opacity: .2; } }
  .census-lock { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; margin: .5rem 0 .75rem; padding: .55rem .8rem; border-radius: .6rem; background: #f1f5f9; font-size: .875rem; color: #334155; }
  .census-lock span:empty { display: none; } .census-lock:has(span:empty):has(a[hidden]) { display: none; } .census-lock a { font-weight: 700; }
  .locked-panel { grid-column: 1 / -1; margin: 0; padding: 1.25rem; border: 1px dashed #cbd5e1; border-radius: .75rem; text-align: center; color: #64748b; font-size: .875rem; }
  #census[data-state="loading"] .locked-panel { opacity: .5; }
  html[data-theme="dark"] .census-lock { background: #232323; color: #d4d4d4; } html[data-theme="dark"] .locked-panel { border-color: #404040; color: #a3a3a3; }
  .breakdowns { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1rem; }
  .breakdown h3 { margin-bottom: .25rem; } .breakdown dl { margin: .5rem 0 0; } .breakdown dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: center; padding: .2rem 0; border-top: 1px solid #eef1f4; }
  .breakdown dt { font-size: .8125rem; font-weight: 600; line-height: 1.2; } .breakdown dd { margin: 0; display: grid; gap: 2px; }
  .bar { display: flex; align-items: center; gap: .35rem; height: .6rem; } .bar i { display: block; height: 100%; min-width: 1px; border-radius: 0 .2rem .2rem 0; }
  .bar b { font-size: .6875rem; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; } .bar.suburb b { color: #0f172a; font-weight: 700; }
  html[data-theme="dark"] .map-legend { background: rgba(28, 28, 28, .9); border-color: #333; color: #d4d4d4; } html[data-theme="dark"] .map-legend p, html[data-theme="dark"] .bar.suburb b { color: #f5f5f5; }
  html[data-theme="dark"] .breakdown dl > div { border-color: #2a2a2a; } html[data-theme="dark"] .bar b { color: #a3a3a3; } html[data-theme="dark"] .series-key .suburb i, html[data-theme="dark"] .bar.suburb i { background: #2ea5fa; }
  html[data-theme="dark"] .mini-map .label { fill: #f8fafc; stroke: rgba(15, 23, 42, .92); }
  @media (max-width: 640px) { .mini-map .label { font-size: 14px; stroke-width: 4px; } .mini-map .label.own { font-size: 18px; } }
  table.neighbours tr.self th, table.neighbours tr.self td { background: #fff7e6; font-weight: 700; }
  .glance.single { max-width: 16rem; }
  .prices.suburb-changes, .prices.crime { min-width: 0; width: 100%; }
  #sold-tile[data-state="loading"] dd { opacity: .4; } #sold-tile[data-state="ready"] a { display: none; }
  #sold-tile[data-state="ready"] dd { font-size: 1.05rem; }
  html[data-theme="dark"] .mini-map { --map-empty: #2a2a2a; border-color: #333; } html[data-theme="dark"] .mini-map .sea { fill: #1c1c1c; }
  html[data-theme="dark"] .mini-map .suburb { stroke: #1c1c1c; }
  html[data-theme="dark"] table.neighbours tr.self th, html[data-theme="dark"] table.neighbours tr.self td { background: #2e2108; }
  .rankings { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .ranking { padding-left: 1.6rem; } .ranking li { margin: .25rem 0; } .ranking strong { float: right; font-variant-numeric: tabular-nums; }
  table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin-bottom: 1rem; }
  th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid #dfe3e8; } td { font-variant-numeric: tabular-nums; }
  thead th { font-size: .8125rem; color: #475569; } tbody th { font-weight: 500; }
  /* The suburb table: a card that scrolls inside itself, so its header row stays in view over 800+ rows. */
  .table-scroll { overflow: auto; max-height: 75vh; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12); }
  .prices { min-width: 46rem; margin: 0; line-height: 1.35; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
  .prices th, .prices td { padding: .3rem .6rem; border-bottom: 1px solid #f0f2f5; }
  .prices thead th { position: sticky; z-index: 2; background: #fff; vertical-align: bottom; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e5e7eb; }
  .prices thead tr:first-child th { top: 0; height: 2rem; }
  .prices thead tr:nth-child(2) th { top: 2rem; }
  .prices thead tr:first-child th[rowspan] { height: auto; }
  /* The suburb column stays in view when the table scrolls sideways on a phone (it slides over the council column). */
  .prices th[scope="row"], .prices thead th.suburb { position: sticky; left: 0; z-index: 1; background: #fff; }
  .prices thead th.suburb { z-index: 3; }
  .prices tbody th { font-weight: 600; color: #0f172a; }
  .prices .council { color: #64748b; font-size: .8125rem; }
  .prices .median { font-weight: 600; color: #0f172a; }
  .prices .group { text-align: center; font-size: .75rem; letter-spacing: .12em; color: #0f172a; }
  .prices .group.house { box-shadow: inset 0 3px 0 #3b82f6; } .prices .group.unit { box-shadow: inset 0 3px 0 #f59e0b; }
  .prices th button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; display: inline-flex; gap: .3rem; align-items: center; }
  .prices th button:hover { color: #0070cc; }
  .prices .sort::after { content: "↕"; opacity: .45; }
  .prices th[aria-sort="ascending"] .sort::after { content: "▲"; opacity: 1; }
  .prices th[aria-sort="descending"] .sort::after { content: "▼"; opacity: 1; }
  .prices th[aria-sort="ascending"], .prices th[aria-sort="descending"] { color: #0070cc; }
  .prices .house { background: #f3f8fe; } .prices .unit { background: #fefaf1; }
  .prices thead .house { background: #e8f1fc; } .prices thead .unit { background: #fdf2dc; }
  .prices .group.house { background: #dbeafe; } .prices .group.unit { background: #fde9c3; }
  /* A suburb opened from the home page search (#s-<SAL code>): highlighted, clear of the sticky header. */
  .prices tbody tr { scroll-margin-top: 4.5rem; }
  .prices tbody tr:target > * { box-shadow: inset 0 0 0 999px rgba(250, 204, 21, .32); }
  .prices tbody tr:hover > * { box-shadow: inset 0 0 0 999px rgba(0, 112, 204, .06); }
  .prices .chip { display: inline-block; white-space: nowrap; min-width: 4.4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; text-align: right; }
  .prices .up .chip { background: #dcfce7; color: #15803d; } .prices .down .chip { background: #fee2e2; color: #b91c1c; }
  .prices td:not(.up):not(.down) .chip { color: #64748b; }
  /* Council names link to the Market Dashboard but read as plain table text. */
  .prices td a, html[data-theme="dark"] .prices td a { color: inherit; text-decoration: none; }
  /* Hub: each place name opens its page; plain text that turns blue on hover, like the rest of the table. */
  .prices.hub th a { color: inherit; text-decoration: none; } .prices.hub th a:hover { color: #0070cc; }
  html[data-theme="dark"] .prices.hub th a { color: inherit; } html[data-theme="dark"] .prices.hub th a:hover { color: #7cc4ff; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .heading-with-note { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .heading-with-note h2 { margin: 0; }
  /* The "!" beside the table heading: a quiet grey mark whose note opens on hover (or focus/tap) and closes on leaving. */
  .note { position: relative; display: inline-flex; }
  .note-icon { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 50%; border: 1.5px solid #94a3b8; background: none; color: #64748b; cursor: help; font: 700 .75rem/1 "DM Sans", sans-serif; }
  .note:hover .note-icon, .note-icon:focus-visible { border-color: #475569; color: #334155; }
  .note-panel { display: none; position: absolute; z-index: 5; top: 100%; left: 50%; transform: translateX(-50%); width: min(20rem, 80vw); margin-top: .5rem; padding: .85rem 1rem; border-radius: .75rem; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 12px 30px rgba(15, 23, 42, .16); font-size: .875rem; font-weight: 400; line-height: 1.5; color: #334155; }
  /* An invisible bridge over the gap, so moving onto the note does not close it. */
  .note-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .note:hover .note-panel, .note:focus-within .note-panel { display: block; }
  .note-line { display: block; margin: 0 0 .5rem; } .note-line:last-child { margin: 0; }
  @media (max-width: 1023px) { .note-panel { left: auto; right: -.5rem; transform: none; } }
  .table-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: .75rem; }
  .table-tools .filter { margin: 0; }
  .sold-filter { margin-left: auto !important; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .sold-lock { display: none; font-size: .8125rem; font-weight: 600; color: #475569; text-decoration: none; padding: .3rem .6rem; border-radius: .375rem; background: #f1f5f9; }
  .sold-lock:hover { background: #e2e8f0; color: #0f172a; }
  .sold-filter[data-state="locked"] .sold-lock { display: inline-flex; }
  .sold-filter[data-state="locked"] select { opacity: .5; }
  .sold-filter[data-state="loading"] .sold-hint::after { content: "Loading…"; }
  .sold-hint { font-size: .8125rem; color: #64748b; }
  .prices td.thin { opacity: .3; }
  .filter label { font-size: .8125rem; font-weight: 600; color: #475569; }
  .filter select { font: inherit; font-size: .875rem; padding: .35rem 2rem .35rem .85rem; border: 1px solid #dbe1e8; border-radius: 999px; background: #fff; max-width: 100%; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
  .city-links { columns: 2 12rem; }
  /* Breadcrumbs, and on phones the Map | List keys at the right end of the same line. */
  .crumb-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .view-keys { display: none; }
  /* Phones, after the base rules so they win: smaller type throughout (the earlier phone block is overridden here). */
  @media (max-width: 1023px) {
    .view-keys { display: flex; flex-shrink: 0; height: 1.75rem; padding: 2px; gap: 4px; border-radius: .5rem; font-size: .75rem; font-weight: 600; }
    .view-keys a, .view-keys span { display: inline-flex; align-items: center; padding: 0 .625rem; border-radius: 6px; color: #475569; text-decoration: none; background: rgba(255, 255, 255, .28); box-shadow: 2px 2px 4px rgba(100, 116, 139, .35), -2px -2px 4px rgba(255, 255, 255, .6); }
    .view-keys span[aria-current] { font-weight: 700; color: #0070cc; transform: translateY(1px); box-shadow: inset 2px 2px 4px rgba(100, 116, 139, .35), inset -2px -2px 4px rgba(255, 255, 255, .6); }
    html[data-theme="dark"] .view-keys a, html[data-theme="dark"] .view-keys span { color: #d4d4d4; background: rgba(255, 255, 255, .06); box-shadow: 2px 2px 4px rgba(0, 0, 0, .45), -2px -2px 4px rgba(255, 255, 255, .08); }
    html[data-theme="dark"] .view-keys span[aria-current] { color: #7cc4ff; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .45), inset -2px -2px 4px rgba(255, 255, 255, .08); }
    body { font-size: .875rem; line-height: 1.6; }
    main { padding: .5rem .75rem 2rem; }
    .breadcrumbs { font-size: .75rem; }
    /* One line beside the keys: the current page's name gives way first. */
    .breadcrumbs { min-width: 0; }
    .breadcrumbs ol { margin: .5rem 0; gap: .4rem; flex-wrap: nowrap; white-space: nowrap; } .breadcrumbs li { margin: 0; padding: 0; } .breadcrumbs li + li::before { margin-right: .4rem; }
    .breadcrumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .surface { padding: .25rem 1rem 1.5rem; border-radius: 1rem; }
    .article-header { padding: 1rem 0 .25rem; }
    .eyebrow { font-size: .6875rem; }
    h1 { font-size: 1.375rem; margin: .3rem 0 .75rem; }
    h2 { font-size: 1.125rem; margin: 0 0 .6rem; }
    h3 { font-size: .9375rem; margin: 1.25rem 0 .35rem; }
    p { margin: 0 0 .75rem; }
    .introduction { font-size: .9375rem; }
    article > section { margin-top: 1.75rem; }
    li { margin: .35rem 0; }
    .glance { gap: .4rem; margin: 0 0 .9rem; } .glance div { padding: .5rem .65rem; border-radius: .75rem; }
    .glance dt, .glance-note { font-size: .6875rem; } .glance dd { font-size: 1.125rem; }
    .map-figure { margin: .75rem 0 1.5rem; } figcaption { font-size: .75rem; }
    .questions, .related { padding-top: 1.25rem; }
    .next-step { margin: 2rem 0; padding: 1.1rem; }
    .button { padding: .55rem .9rem; min-height: 40px; font-size: .875rem; }
    table { font-size: .8125rem; } thead th { font-size: .75rem; }
    .prices { font-size: .75rem; } .prices .chip { font-size: .6875rem; }
    .filter label, .filter select, .sold-hint, .related span { font-size: .75rem; }
    footer, .site-footer h2 { font-size: .8125rem; }
  }
  @media print { .app-nav, .next-step, .related, .skip-link { display: none; } body { background: white; } main { max-width: none; padding: 0; } .surface { border: 0; box-shadow: none; padding: 0; } }
  /* Dark theme: the app's switch (html[data-theme="dark"], set before paint by THEME_BOOT_SCRIPT) in the app's dark palette. */
  html[data-theme="dark"] { color-scheme: dark; color: #f5f5f5; background: #121212; }
  html[data-theme="dark"] body { background: var(--radar-wash), #121212; background-attachment: fixed; }
  html[data-theme="dark"] .app-nav { border-bottom-color: rgba(255, 255, 255, .08); }
  html[data-theme="dark"] .app-brand, html[data-theme="dark"] .app-account summary, html[data-theme="dark"] .app-menu a { color: #f5f5f5; }
  html[data-theme="dark"] .app-pill, html[data-theme="dark"] .app-theme { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 1px 2px 4px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .35); }
  html[data-theme="dark"] .app-pill a:not([aria-current]) { color: #e2e8f0; } html[data-theme="dark"] .app-pill a:not([aria-current]):hover { color: #fff; }
  html[data-theme="dark"] .app-pill a[aria-current] { color: #7cc4ff; background: #2b3445; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px rgba(0, 0, 0, .55), -1px -1px 4px rgba(255, 255, 255, .06); }
  html[data-theme="dark"] .app-theme, html[data-theme="dark"] .app-admin { color: #a3a3a3; } html[data-theme="dark"] .app-theme:hover, html[data-theme="dark"] .app-admin:hover { color: #f5f5f5; }
  html[data-theme="dark"] .app-account summary { border-color: #333; background: transparent; }
  html[data-theme="dark"] .app-account summary:hover, html[data-theme="dark"] .app-account[open] summary, html[data-theme="dark"] .app-menu a:hover { background: #262626; }
  html[data-theme="dark"] .app-menu { background: #1c1c1c; border-color: #333; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
  html[data-theme="dark"] .app-menu .app-signout { border-top-color: #333; color: #a3a3a3; }
  html[data-theme="dark"] .surface { background: #1c1c1c; border-color: rgba(255, 255, 255, .08); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px -8px rgba(0, 0, 0, .5); }
  html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] .prices .group, html[data-theme="dark"] .site-footer h2 a { color: #f5f5f5; }
  html[data-theme="dark"] a { color: #7cc4ff; }
  html[data-theme="dark"] .introduction { color: #d4d4d4; }
  html[data-theme="dark"] .breadcrumbs, html[data-theme="dark"] .eyebrow, html[data-theme="dark"] figcaption, html[data-theme="dark"] thead th, html[data-theme="dark"] footer,
  html[data-theme="dark"] .related span, html[data-theme="dark"] .site-footer h3, html[data-theme="dark"] .sold-hint { color: #a3a3a3; }
  html[data-theme="dark"] th, html[data-theme="dark"] td, html[data-theme="dark"] .questions, html[data-theme="dark"] .related, html[data-theme="dark"] .map-figure img { border-color: #333; }
  html[data-theme="dark"] .table-scroll { background: #1c1c1c; border-color: #333; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6); }
  html[data-theme="dark"] .prices th, html[data-theme="dark"] .prices td { border-bottom-color: #2a2a2a; }
  html[data-theme="dark"] .prices thead th, html[data-theme="dark"] .prices th[scope="row"], html[data-theme="dark"] .prices thead th.suburb { background: #1c1c1c; border-bottom-color: #333; }
  html[data-theme="dark"] .prices thead th { color: #a3a3a3; }
  html[data-theme="dark"] .prices tbody th, html[data-theme="dark"] .prices .median, html[data-theme="dark"] .prices .group { color: #f5f5f5; }
  html[data-theme="dark"] .prices .council { color: #a3a3a3; }
  html[data-theme="dark"] .prices .house { background: #16212e; } html[data-theme="dark"] .prices .unit { background: #251e12; }
  html[data-theme="dark"] .prices thead .house { background: #1a2a3d; } html[data-theme="dark"] .prices thead .unit { background: #2f2512; }
  html[data-theme="dark"] .prices .group.house { background: #1f3a5a; } html[data-theme="dark"] .prices .group.unit { background: #4a3812; }
  html[data-theme="dark"] .prices th[aria-sort="ascending"], html[data-theme="dark"] .prices th[aria-sort="descending"], html[data-theme="dark"] .prices th button:hover { color: #7cc4ff; }
  html[data-theme="dark"] .prices tbody tr:hover > * { box-shadow: inset 0 0 0 999px rgba(124, 196, 255, .07); }
  html[data-theme="dark"] .prices .up .chip { background: rgba(74, 222, 128, .14); color: #4ade80; } html[data-theme="dark"] .prices .down .chip { background: rgba(248, 113, 113, .14); color: #f87171; }
  html[data-theme="dark"] .filter label { color: #a3a3a3; }
  html[data-theme="dark"] .next-step { background: #1f2a36; }
  html[data-theme="dark"] .button { background: #0070cc; color: #fff; }
  html[data-theme="dark"] .filter select { background: #262626; color: #f5f5f5; border-color: #404040; }
  html[data-theme="dark"] .sold-lock { background: #262626; color: #d4d4d4; } html[data-theme="dark"] .sold-lock:hover { background: #333; color: #fff; }
  html[data-theme="dark"] .note-icon { border-color: #737373; color: #a3a3a3; } html[data-theme="dark"] .note:hover .note-icon { border-color: #d4d4d4; color: #f5f5f5; }
  html[data-theme="dark"] .note-panel { color: #d4d4d4; background: #1c1c1c; border-color: #333; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
  html[data-theme="dark"] .site-footer nav { background: rgba(28, 28, 28, .6); border-color: rgba(255, 255, 255, .08); }
  html[data-theme="dark"] .site-footer li a { color: #d4d4d4; } html[data-theme="dark"] .site-footer li a:hover { color: #7cc4ff; }
  html[data-theme="dark"] .skip-link { background: #1c1c1c; }